/* ==========================================================================
   BMB affiliate auth — signup (extras on top of login.css)
   ========================================================================== */
.thissection a,
.thissection article,
.thissection aside,
.thissection details,
.thissection div,
.thissection figcaption,
.thissection figure,
.thissection footer,
.thissection h1,
.thissection h2,
.thissection h3,
.thissection h4,
.thissection h5,
.thissection h6,
.thissection header,
.thissection hgroup,
.thissection input,
.thissection li,
.thissection nav,
.thissection ol,
.thissection p,
.thissection section,
.thissection span,
.thissection ul {
    float: none !important;
}

.auth-frame--signup {
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: start;
    padding-top: 16px;
    padding-bottom: 16px;
}

.auth-pitch--signup {
    position: sticky;
    top: 56px;
    align-self: start;
}

/* Quote card */
.auth-quote {
    margin-top: 28px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 3px solid var(--auth-blue);
    border-radius: 14px;
    box-shadow: 0 8px 24px -12px rgba(11, 31, 61, 0.10);
    position: relative;
}

.auth-quote__icon {
    color: var(--auth-blue);
    font-size: 14px;
    opacity: 0.5;
    margin-bottom: 6px;
}

.auth-quote p {
    font-size: 14px;
    color: var(--auth-ink-2);
    line-height: 1.55;
    margin-bottom: 8px;
    font-style: italic;
}

.auth-quote__author {
    font-size: 12px;
    color: var(--auth-ink-3);
    font-weight: 500;
    letter-spacing: 0.01em;
}


/* ==========================================================================
   Signup card sizing
   ========================================================================== */

.auth-card--signup {
    max-width: 540px;
    padding: 34px 32px 28px;
}


/* ==========================================================================
   Step bar — horizontal pill stepper
   ========================================================================== */

.step-bar {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 24px;
    position: relative;
    padding: 6px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 999px;
}

.step-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--auth-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: default;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    min-width: 0;
}

.step-bar__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.18s ease;
}

.step-bar__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-bar__item.active {
    background: #ffffff;
    color: var(--auth-blue);
    box-shadow: 0 2px 8px rgba(11, 31, 61, 0.06);
}

.step-bar__item.active .step-bar__dot {
    background: linear-gradient(135deg, #005eb8 0%, #3b82f6 100%);
    box-shadow: 0 2px 6px rgba(0, 94, 184, 0.35);
}

.step-bar__item.completed {
    color: var(--auth-ink-2);
}

.step-bar__item.completed .step-bar__dot {
    background: var(--auth-blue);
}


/* ==========================================================================
   Form steps
   ========================================================================== */

.signup-form {
    display: flex;
    flex-direction: column;
}

.form-step {
    display: none;
    flex-direction: column;
    gap: 14px;
    animation: fadeUp 0.35s ease-out;
}

.form-step.active {
    display: flex;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Field tweaks for plain inputs (when select / textarea sits raw inside .field__input without an icon) */
.field__input--plain {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.field__input--plain .field__control {
    padding-left: 14px;
}

.field__input--textarea {
    align-items: stretch;
}

.field__input--textarea .field__control {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

/* Restore icon-style label inside .field__label */
.field__label i {
    color: var(--auth-blue);
    margin-right: 6px;
    font-size: 12px;
}

/* Group label (radio/checkbox) */
.field--group {
    border: none;
    padding: 0;
}

/* Radio group */
.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--auth-ink-2);
    padding: 10px 14px;
    border: 1.5px solid var(--auth-line);
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.radio-label:hover {
    border-color: rgba(0, 94, 184, 0.35);
    background: rgba(0, 94, 184, 0.04);
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--auth-blue);
}

.radio-label:has(input[type="radio"]:checked) {
    border-color: var(--auth-blue);
    background: rgba(0, 94, 184, 0.08);
    color: var(--auth-blue);
    font-weight: 600;
}


/* ==========================================================================
   OTP section
   ========================================================================== */

.otp-section {
    background: linear-gradient(180deg, rgba(0, 94, 184, 0.05) 0%, rgba(108, 176, 224, 0.06) 100%);
    border: 1px solid rgba(0, 94, 184, 0.14);
    border-radius: 14px;
    padding: 16px;
    margin-top: 4px;
}

.otp-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--auth-ink-1);
}

.otp-section__head i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #005eb8 0%, #3b82f6 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 94, 184, 0.3);
}

.otp-section__hint {
    font-size: 12.5px;
    color: var(--auth-ink-3);
    margin: 6px 0 12px 34px;
}

.field--otp .field__input {
    background: #ffffff;
}

.field--otp .field__control {
    padding-left: 16px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
}

.field--otp .field__control::placeholder {
    letter-spacing: 0.4em;
    color: #cbd5e1;
}

.otp-info {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--auth-ink-3);
}

.resend-otp-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.resend-text {
    font-size: 12.5px;
    color: var(--auth-ink-3);
    margin: 0;
}

.resend-otp-btn {
    background: transparent;
    border: 1.5px solid rgba(0, 94, 184, 0.25);
    color: var(--auth-blue);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.resend-otp-btn:not(:disabled):hover {
    background: var(--auth-blue);
    color: #ffffff;
    border-color: var(--auth-blue);
}

.resend-otp-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* ==========================================================================
   Terms checkbox (override default check styling slightly)
   ========================================================================== */

.terms-section {
    margin-top: 4px;
}

.terms-section .check {
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}

.terms-section .check__box {
    margin-top: 2px;
}

.terms-link {
    color: var(--auth-blue);
    font-weight: 600;
}

.terms-link:hover {
    color: var(--auth-blue-2);
    text-decoration: underline;
}


/* ==========================================================================
   Step buttons (prev / next layout)
   ========================================================================== */

.step-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.auth-btn--ghost {
    background: #ffffff;
    color: var(--auth-ink-2);
    border: 1.5px solid var(--auth-line);
    box-shadow: none;
}

.auth-btn--ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--auth-ink-1);
    transform: translateY(-1px);
}

.auth-btn--ghost:hover i {
    transform: translateX(-3px);
}


/* ==========================================================================
   Select2 & Native Select alignment with field__input
   ========================================================================== */

/* Prevent Select2 absolute drops from causing body scroll */
body.auth-body {
    overflow-x: hidden;
    max-width: 100vw;
}

select.field__control {
    height: 48px;
    padding: 0 14px;
    border: none !important;
    background-color: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    color: var(--auth-ink-1, #0f172a);
    font-family: inherit;
    font-size: 14.5px;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
}

select.field__control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.field__input--plain .select2-container {
    width: 100% !important;
    display: block;
}

.select2-container--default .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    height: 48px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 14px;
    border-radius: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--auth-ink-1);
    padding: 0;
    font-size: 14.5px;
    line-height: 48px !important; /* Perfectly centers the text vertically */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 14px;
}

/* Fix horizontal scrollbar issue from Select2 */
body .select2-container--open {
    box-sizing: border-box;
}

.select2-dropdown {
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(11, 31, 61, 0.14);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--auth-blue);
    color: #ffffff;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--auth-line);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--auth-blue-2);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}


/* ==========================================================================
   Loader overlay
   ========================================================================== */

.loader-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 61, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loader-overlay.show {
    display: flex;
}

.loader-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .auth-frame--signup {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .auth-pitch--signup {
        position: static;
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .auth-pitch--signup .auth-pillars {
        align-items: flex-start;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-quote {
        text-align: left;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .auth-card--signup {
        padding: 26px 22px 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .step-bar__label {
        display: none;
    }

    .step-bar__item.active .step-bar__label {
        display: inline;
    }

    .step-bar__item {
        padding: 8px;
    }

    .resend-otp-section {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .resend-otp-btn {
        justify-content: center;
    }

    .field--otp .field__control {
        font-size: 16px;
        letter-spacing: 0.3em;
    }
}

@media (max-width: 767px) {
    body.newhome header {
        background: #fff;
        padding: 6px 0;
    }

    .hotel {
        background: #fff !important;
        /* padding: 6px 0; */
    }
}