/* ============================================================
   SanatanSansaar Auth Pages — Login & Registration
   Depends on: design-tokens.css
   Shared by astrologer login and registration pages.
   ============================================================ */

/* ── Login card shell ── */
.login-offer { margin-top: 0 !important; padding-top: 80px; }

.login-offer-bg {
    background: linear-gradient(135deg, var(--ss-black-warm) 0%, #2A1500 100%) !important;
    border-top: 2px solid rgba(212,175,55,0.40) !important;
    padding: 20px !important;
    border-top-left-radius: var(--ss-radius-lg) !important;
    border-top-right-radius: var(--ss-radius-lg) !important;
}

/* ── Lower card body ── */
.bg-white.p-4 {
    background: var(--ss-surface-raised) !important;
    border-color: var(--ss-edge-subtle) !important;
    border-bottom-left-radius: var(--ss-radius-lg) !important;
    border-bottom-right-radius: var(--ss-radius-lg) !important;
}

/* ── Registration form card ── */
.sychics-join-form {
    background: var(--ss-surface-raised) !important;
    border-color: var(--ss-edge-subtle) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius-lg) !important;
}
.sychics-join-form h2 small { color: var(--ss-content) !important; }

/* ── Text overrides ── */
h3, .font-22, .colorblack, .text-dark, p { color: var(--ss-content-body) !important; }
.text-dark.font-13 { color: var(--ss-content-tertiary) !important; }

/* ── Labels ── */
label { color: var(--ss-content-secondary) !important; }
.red-color { color: var(--ss-gold-600) !important; }

/* ── Phone input row ── */
.inputform,
#header-country-dropdown-container {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    border-radius: var(--ss-radius) !important;
    overflow: hidden;
}
.country-dropdown-container select.form-control,
.country-dropdown-container .select2-container {
    border: none !important;
    border-right: 1px solid var(--ss-edge) !important;
    border-radius: 0 !important;
    width: 20% !important;
    flex: 0 0 20% !important;
}
.country-dropdown-container input.form-control {
    border: none !important;
    border-radius: 0 !important;
    width: 80% !important;
    flex: 1 1 80% !important;
}

/* ── Form controls ── */
.form-control {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
}
.form-control::placeholder { color: var(--ss-hint) !important; }
.form-control:focus {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-focus-ring) !important;
    background: var(--ss-surface-overlay) !important;
    color: var(--ss-content) !important;
}
select.form-control option {
    background: var(--ss-surface-raised) !important;
    color: var(--ss-content) !important;
}
input[type="time"].form-control { color-scheme: dark; }

/* ── OTP section ── */
.otpheader { color: var(--ss-content-tertiary) !important; }
.otpheader a { color: var(--ss-gold-700) !important; }
#otpCode.form-control {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
}
#otpCode.form-control::placeholder { color: var(--ss-hint) !important; }

/* ── Send OTP / Submit / Next / Previous buttons ── */
.btn-chat {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    transition: box-shadow 0.3s, transform 0.3s !important;
}
.btn-chat:hover {
    background: var(--ss-astro-gradient-hover) !important;
    box-shadow: var(--ss-glow-gold-lg) !important;
    transform: translateY(-1px) !important;
    color: var(--ss-content-inverse) !important;
}

/* ── Continue with Gmail button ── */
.btn-danger {
    background: var(--ss-card-hover) !important;
    border: 1px solid var(--ss-edge-subtle) !important;
    color: var(--ss-content-secondary) !important;
    border-radius: var(--ss-radius) !important;
}
.btn-danger:hover {
    background: rgba(255,255,255,0.10) !important;
    color: var(--ss-content) !important;
}

/* ── Links ── */
.ss-link-accent { color: var(--ss-gold-700) !important; }
.ss-link-accent:hover { color: var(--ss-gold-500) !important; }
.btn-link { color: var(--ss-gold-700) !important; }

/* ── Select2 dark ── */
.select2-container--default .select2-selection--single {
    background: transparent !important;
    border: none !important;
    color: var(--ss-content) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ss-content) !important;
    margin-top: 5px !important;
}
.select2-container--default .select2-selection--multiple {
    background: var(--ss-surface-overlay) !important;
    border-color: var(--ss-edge) !important;
    color: var(--ss-content) !important;
}
.select2-container--default .select2-results__option {
    background: var(--ss-surface-raised) !important;
    color: var(--ss-content-body) !important;
}
.select2-container--default .select2-results__option--highlighted {
    background: rgba(212,175,55,0.20) !important;
    color: var(--ss-gold-700) !important;
}
.select2-dropdown {
    background: var(--ss-surface-raised) !important;
    border-color: var(--ss-edge) !important;
}
.select2-search__field {
    background: var(--ss-surface-overlay) !important;
    color: var(--ss-content) !important;
    border-color: var(--ss-edge) !important;
}

/* ── Promo / info column (registration) ── */
.sychics-join-info h2 small { color: var(--ss-content) !important; }
.sychics-join-info h2 b.red-color { color: var(--ss-gold-700) !important; }
.sychics-join-info p { color: var(--ss-content-tertiary) !important; }
.sychics-join-info .border-danger {
    background: var(--ss-surface-raised) !important;
    border-color: rgba(212,175,55,0.35) !important;
    color: var(--ss-content) !important;
}
.sychics-join-info .border-danger span,
.sychics-join-info .border-danger p { color: var(--ss-content-secondary) !important; }

/* ── Checkbox / radio ── */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ss-gold-700); }

/* ── Conditional reveal containers (registration) ── */
#platform-details-container,
#refer-details-container {
    display: none;
    border: 2px dotted var(--ss-edge) !important;
    background: rgba(212,175,55,0.04) !important;
    border-radius: var(--ss-radius) !important;
    padding: 15px;
    margin-bottom: 20px;
}

/* ── Bootstrap button overrides ── */
.btn-primary {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: var(--ss-radius) !important;
    font-weight: 600 !important;
}

/* ── Alerts ── */
.alert-danger {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.35) !important;
    color: #FCA5A5 !important;
}
.alert-success {
    background: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.30) !important;
    color: #6EE7B7 !important;
}

/* ── OTP input ── */
.otp-input {
    text-align: center;
    font-size: 1.25rem;
    width: 100%;
    height: 3rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ss-edge);
    transition: border-color 0.2s ease-in-out;
}

/* ── Hide number input arrows ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* ── Step wizard (registration) ── */
.step { display: none; }
.step.active { display: block; }

/* ── Step progress indicator ── */
.step-progress-bar { gap: 4px; padding: 0 8px; }
.step-progress-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    border-bottom: 3px solid var(--ss-edge-subtle);
    color: var(--ss-content-disabled);
    transition: var(--ss-transition-fast);
}
.step-progress-item span { display: block; font-weight: 700; font-size: 1rem; }
.step-progress-item small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
.step-progress-item.active { border-bottom-color: var(--ss-gold-700); color: var(--ss-gold-700); }
.step-progress-item.completed { border-bottom-color: var(--ss-status-success); color: var(--ss-status-success); }

/* ── File input height ── */
input[type="file"].form-control { height: 44px; }

/* ── Modal close button ── */
.ss-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--ss-status-error);
    color: var(--ss-content);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
}

/* ── Word count helper ── */
#wordCount { color: var(--ss-content-tertiary); }

/* ── Image modal responsive (registration) ── */
#modalImage { width: 500px; height: 520px; }

/* ── Responsive — Tablet ── */
@media (max-width: 768px) {
    .login-offer { padding-top: 60px; }
    .login-offer-bg { padding: 16px !important; }
    .bg-white.p-4 { padding: 16px !important; }

    /* Registration form */
    .sychics-join-form { padding: 16px; }
    .sychics-join-info { margin-bottom: 24px; }
}

/* ── Responsive — Mobile ── */
@media (max-width: 576px) {
    .login-offer { padding-top: 40px; }
    .login-offer-bg {
        padding: 14px !important;
        border-top-left-radius: var(--ss-radius) !important;
        border-top-right-radius: var(--ss-radius) !important;
    }
    .bg-white.p-4 {
        padding: 14px !important;
        border-bottom-left-radius: var(--ss-radius) !important;
        border-bottom-right-radius: var(--ss-radius) !important;
    }

    /* Country dropdown — wider select on mobile */
    .inputform,
    #header-country-dropdown-container {
        border-radius: var(--ss-radius-sm) !important;
    }
    .inputform select,
    #header-country-dropdown-container select {
        width: 30% !important;
        min-width: 70px;
        font-size: 0.8rem;
    }
    .inputform input,
    #header-country-dropdown-container input {
        width: 70% !important;
        font-size: 0.9rem;
    }

    /* Buttons full width on mobile */
    .btn-chat {
        width: 100%;
        padding: 12px !important;
        font-size: 0.95rem !important;
    }
    .btn-danger {
        width: 100%;
        padding: 12px !important;
    }

    /* Registration steps — tighter spacing */
    .sychics-join-form { padding: 12px; border-radius: var(--ss-radius) !important; }
    .sychics-join-form h2 { font-size: 1.1rem; }
    .sychics-join-info .border-danger { padding: 12px !important; }

    /* Step progress — compact on mobile */
    .step-progress-item small { display: none; }
    .step-progress-item span { font-size: 0.85rem; }

    /* Image modal */
    #modalImage { width: 100%; height: auto; }
    #imageModal div { max-width: 95%; max-height: 95%; }
}