#wa-otp-panel-wrapper {
    margin: 0 auto;
    max-width: 420px;
}

.wa-otp-checkout-heading {
    font-weight: 600;
    color: #111827;
    margin: 0 auto 12px;
    max-width: 420px;
}

.wa-otp-hidden {
    display: none !important;
}

.wa-otp-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 24px;
    margin: 0 auto 16px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
}

.wa-otp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.wa-otp-card-header h3 {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    color: #111827;
}

.wa-otp-subtext {
    margin: 6px 0 20px;
    color: #6b7280;
    font-size: 0.92em;
    line-height: 1.4;
}

.wa-otp-field-group {
    margin-bottom: 16px;
}

.wa-otp-field-group label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.wa-otp-phone-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.wa-otp-country-badge {
    flex: 0 0 auto;
    width: 90px;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 4px;
    font-size: 16px;
    font-weight: 600;
    background: #f9fafb;
    color: #111827;
    box-sizing: border-box;
}

.wa-otp-phone-row input#wa_otp_phone {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.wa-otp-card input.input-text,
.wa-otp-card select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wa-otp-card input.input-text:focus,
.wa-otp-card select:focus {
    outline: none;
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.wa-otp-code-wrapper {
    position: relative !important;
}

.wa-otp-code-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    pointer-events: none;
}

/* Purely decorative — these are plain <span> elements, never real inputs,
   so there is no browser/input text-rendering quirk that can affect them.
   They just display whatever the real (invisible) input below currently
   holds. */
.wa-otp-digit-display {
    width: 50px;
    padding: 15px 0;
    box-sizing: border-box;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: center;
    background: #f9fafb;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wa-otp-digit-display.wa-otp-digit-filled {
    background: #f0fdf4;
    border-color: #25D366;
    color: #15803d;
}

.wa-otp-code-wrapper:focus-within .wa-otp-digit-display {
    border-color: #25D366;
}

/* The one real input in this whole group. Fully invisible — the boxes
   above show the digits — but still receives taps, the keyboard, typing,
   paste, and iOS's OTP autofill suggestion normally, since it behaves
   exactly like any single ordinary text field. */
.wa-otp-real-input {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    font-size: 16px !important;
    text-align: center !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.wa-otp-real-input:focus {
    outline: none;
}

@media (max-width: 380px) {
    .wa-otp-digit-display {
        width: 42px;
        padding: 12px 0;
        font-size: 19px;
    }
    .wa-otp-code-boxes {
        gap: 7px;
    }
}

.wa-otp-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
    margin-top: 4px;
}

.wa-otp-btn:active {
    transform: scale(0.99);
}

.wa-otp-btn-primary {
    background: #25D366;
    color: #ffffff;
}

.wa-otp-btn-primary:hover:not(:disabled) {
    background: #1fb659;
}

.wa-otp-btn-primary:disabled {
    background: #a7e9c1;
    cursor: not-allowed;
}

.wa-otp-message {
    min-height: 1.2em;
    margin: 14px 0 0;
    font-size: 0.9em;
    color: #1a7f37;
    font-weight: 500;
}

.wa-otp-message-error {
    color: #dc2626;
}

.wa-otp-divider {
    margin: 0 auto 24px;
    max-width: 420px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
    text-align: center;
    position: relative;
}

/* Match the Google Sign-In button's width to our own buttons/card so the
   whole login area reads as one consistent width, not a narrower block
   floating inside a wider one. Google's script renders the actual button
   at a fixed internal size we can't resize directly, so we center it
   within this container and clip any overflow rather than letting it
   spill past the edge and cause horizontal scrolling on mobile. */
.googlesitekit-sign-in-with-google__frontend-output-button {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto 16px !important;
    overflow: hidden;
    display: flex !important;
    justify-content: center;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.googlesitekit-sign-in-with-google__frontend-output-button.wa-otp-google-ready {
    opacity: 1;
}

@media (max-width: 480px) {
    .wa-otp-card {
        padding: 20px 16px;
        border-radius: 10px;
        max-width: 100%;
    }

    .wa-otp-divider {
        max-width: 100%;
    }

    .googlesitekit-sign-in-with-google__frontend-output-button {
        max-width: 100% !important;
    }

    .wa-otp-phone-row {
        flex-wrap: nowrap;
    }

    .wa-otp-country-badge {
        width: 80px;
        min-width: 80px;
        padding-left: 4px;
        padding-right: 2px;
        font-size: 15px;
    }

    .wa-otp-btn {
        padding: 14px 16px;
        font-size: 1.05em;
    }

    .wa-otp-card-header h3 {
        font-size: 1.05em;
    }
}