/**
 * ct-sms-auth.css
 *
 * Only what the SMS code step needs on top of coffeetrail-auth.css, which
 * already styles .ct-auth-form, .ct-field, .ct-auth-btn, .ct-auth-divider and
 * .ct-otp-resend-form inside a method panel. Anything already styled there is
 * deliberately not repeated here.
 */

.ct-sms-auth__notice {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecec;
    color: #9b1c1c;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

/* The code step reuses .ct-auth-divider / .ct-auth-subtitle / .ct-auth-btn,
   which are defined in ct-flow's ct-auth.css -- a stylesheet that only loads
   on the ct-register and ct-login pages, never on My Account. Inputs and
   submit buttons are still covered here by coffeetrail-auth.css's generic
   `.ct-auth-methods__panel` rules, but these three text elements are not, so
   they are given a minimal look scoped to this module. */
.ct-sms-auth__code:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.ct-sms-auth__code .ct-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.ct-sms-auth__code .ct-auth-divider::before,
.ct-sms-auth__code .ct-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.ct-sms-auth__code .ct-auth-subtitle {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* The verification code is the one field that must read left-to-right even
   though the form around it is RTL. */
.ct-sms-auth__code [data-ct-sms-code] {
    letter-spacing: 6px;
    text-align: center;
    font-size: 18px;
}

.ct-sms-auth__code [data-ct-sms-target] {
    unicode-bidi: isolate;
}

.ct-sms-auth [data-ct-sms-restart] {
    display: block;
    width: 100%;
    margin-top: 4px;
    background: none;
    border: 0;
    color: #6b7280;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.ct-sms-auth [data-ct-sms-restart]:hover {
    color: #111827;
}

.ct-sms-auth.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.ct-sms-auth .ct-field-error {
    display: block;
    margin-top: 6px;
    color: #9b1c1c;
    font-size: 13px;
    text-align: right;
}