/**
 * OTP Verification Module — Styles
 *
 * Two parts:
 *   1) Phone row (.atx-otp-phone-row)  — country-code <select> + mobile <input>
 *   2) Modal     (.atx-otp-modal*)     — verification dialog
 *
 * The theme's global style.css may override any of these rules for site-specific
 * branding (colors, fonts, radius, etc.). Selectors here are kept low-specificity.
 */

/* ----------------------------------------------------------------------- */
/* Phone row                                                               */
/* ----------------------------------------------------------------------- */

.atx-otp-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* Baseline styling — inherit host theme typography & colors so the row
   blends in. Hosts can override via their own `.atx-booking__row > input`
   style etc. without needing !important. */
.atx-otp-phone-row .atx-otp-country-code,
.atx-otp-phone-row .atx-otp-mobile-input {
    font: inherit;
    color: inherit;
    background: #fff;
}

.atx-otp-phone-row .atx-otp-country-code {
    flex: 0 0 auto;
    width: 5.5rem;
    min-width: 0;
}

.atx-otp-phone-row .atx-otp-mobile-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* The country code as the house dropdown (house_select, the default): the
   width sits on the dropdown, the select inside fills it. */
.atx-otp-phone-row .atx-otp-cc-select { flex: 0 0 auto; width: 120px; }
.atx-otp-phone-row .atx-otp-cc-select > .atx-otp-country-code { flex: 1 1 auto; width: auto; font-weight: 600; }

/* Native <select> options can't be heavily styled, but font-family / size /
   colors honored in most browsers help the open list match the page. */
.atx-otp-phone-row .atx-otp-country-code option {
    font: inherit;
    color: #222;
    background: #fff;
    padding: 4px 8px;
}

/* ----------------------------------------------------------------------- */
/* Modal                                                                   */
/* ----------------------------------------------------------------------- */

/* The window itself is the house .atx-dialog (style.css); here only
   its contents: the centred code field and the buttons' line. */
.atx-otp-modal__body {
    padding: 8px 0 20px;
    text-align: center;
}

.atx-otp-modal__status {
    margin: 0 0 16px;
    font-size: 15px;
    color: #666;
}

.atx-otp-modal__input-group { text-align: center; }
.atx-otp-modal__input-group[hidden] { display: none; }

.atx-otp-modal__label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.atx-otp-modal__code-input {
    font-family: 'Roboto Mono', 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    width: 220px;
    padding: 14px;
    border: 2px solid #aaa;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.atx-otp-modal__code-input:focus {
    border-color: var(--are-color, #E52713);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--are-color, #E52713) 15%, transparent);
}

/* The house feedback box (.atx-feedback--error, style.css); here only its place. */
.atx-otp-modal__error { margin: 12px 0 0; }

/* The footer is the house's .atx-actions (Avbryt | Verifiera, equally wide). */

/* Buttons are house buttons (.atx-btn, style.css). Skicka ny kod is a small
   one under the code field. */
.atx-otp-modal__btn { box-sizing: border-box; }
.atx-otp-modal__btn--resend { margin-top: 14px; }
.atx-otp-modal__countdown:not(:empty) { margin-left: 0.35em; }

/* Small screens */
@media (max-width: 480px) {
    /* Stronger than the house's 16px for fields in a window (style.css). */
    .atx-otp-modal .atx-otp-modal__code-input { width: 100%; letter-spacing: 8px; font-size: 28px; }
}