/* ================================================================
 * theme-sections.css — Dynamic Theme Layer for Public Portal Sections
 * All colors derived from CSS custom properties set by theme.php
 * Loaded AFTER theme.php so these override any hardcoded section styles
 * ================================================================ */

/* ── GLOBAL HERO & PAGE BANNERS (HERO, REGISTER, LOGIN, ABOUT, SEARCH, CONTACT) ── */
.section-hero-gradient,
.hero-premium,
.auth-split-section,
.about-banner,
.search-header-premium,
.search-banner,
.contact-banner,
.page-header-section,
.page-hero-section,
.animate-gradient {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-light, #2563eb) 50%,
        var(--vn-indigo-dark, #1d4ed8) 100%) !important;
}

/* ── STATS BAR ──────────────────────────────────────────────────── */
.stats-bar-premium {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb, 27, 31, 122), 0.08) 0%,
        rgba(var(--primary-rgb, 27, 31, 122), 0.15) 100%) !important;
    box-shadow: 0 20px 50px rgba(var(--primary-rgb, 27, 31, 122), 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.stat-item:hover {
    border-color: var(--primary-color, #1B1F7A) !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 27, 31, 122), 0.18) !important;
}

.icon-indigo {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.12) !important;
    color: var(--primary-color, #1B1F7A) !important;
    border-color: rgba(var(--primary-rgb, 27, 31, 122), 0.2) !important;
}

.icon-crimson {
    background: rgba(var(--secondary-rgb, 192, 57, 43), 0.12) !important;
    color: var(--secondary-color, #C0392B) !important;
    border-color: rgba(var(--secondary-rgb, 192, 57, 43), 0.2) !important;
}

.icon-gold {
    background: rgba(var(--accent-rgb, 232, 162, 2), 0.14) !important;
    color: var(--accent-color, #D97706) !important;
    border-color: rgba(var(--accent-rgb, 232, 162, 2), 0.25) !important;
}

.num-indigo  { color: var(--primary-color, #1B1F7A) !important; }
.num-crimson { color: var(--secondary-color, #C0392B) !important; }
.num-gold    { color: var(--accent-color, #D97706) !important; }

.stat-divider {
    background: linear-gradient(180deg, transparent,
        rgba(var(--primary-rgb, 27, 31, 122), 0.25), transparent) !important;
}

/* ── FEATURED COMBINED SECTION ───────────────────────────────────── */
.featured-combined-section {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-dark, #0f172a) 100%) !important;
}

.feat-tab-btn.active,
.profile-tab-btn.active {
    background: var(--primary-color, #1B1F7A) !important;
}

/* Featured section CTA buttons */
.btn-glass-primary,
a.btn-glass-primary {
    background: linear-gradient(135deg,
        var(--primary-color, #1B1F7A) 0%,
        var(--vn-indigo-light, #2A3199) 100%) !important;
    box-shadow: 0 10px 25px rgba(var(--primary-rgb, 27, 31, 122), 0.4) !important;
}

/* View All link */
.view-all-link {
    color: var(--accent-color, #E8A202) !important;
}

/* ── DISTRICT COVERAGE SECTION ───────────────────────────────────── */
.district-coverage-premium {
    background: linear-gradient(135deg,
        var(--vn-indigo-dark, #0a0d2c) 0%,
        var(--primary-color, #1e3a8a) 50%,
        var(--vn-indigo-dark, #0f172a) 100%) !important;
}

.district-coverage-premium::before {
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
                    rgba(var(--primary-rgb, 27, 31, 122), 0.35) 0%, transparent 70%),
                radial-gradient(circle at 90% 80%,
                    rgba(var(--secondary-rgb, 192, 57, 43), 0.15) 0%, transparent 50%) !important;
}

/* Allow custom Page Layout Manager background colors & background images to show through */
.page-section-wrapper[style*="background"] .district-coverage-premium,
.page-section-wrapper[style*="background"] .featured-combined-section,
.page-section-wrapper[style*="background"] .recent-members-section,
.page-section-wrapper[style*="background"] .stats-bar-premium {
    background: transparent !important;
}

.page-section-wrapper[style*="background"] .district-coverage-premium::before {
    background: transparent !important;
}

.dist-tab-btn.active {
    background: var(--primary-color, #1B1F7A) !important;
    color: #fff !important;
}

/* District card active / hub badge */
.district-card.active,
.district-card:hover {
    border-color: var(--primary-color, #1B1F7A) !important;
    box-shadow: 0 0 18px rgba(var(--primary-rgb, 27, 31, 122), 0.4) !important;
}

.hub-badge {
    background: var(--primary-color, #1B1F7A) !important;
}

/* View all districts button */
.view-all-districts {
    background: linear-gradient(135deg,
        var(--secondary-color, #C0392B) 0%,
        var(--accent-color, #d97706) 100%) !important;
    box-shadow: 0 10px 25px rgba(var(--secondary-rgb, 192, 57, 43), 0.4) !important;
}

/* ── RECENT MEMBERS SECTION ──────────────────────────────────────── */
.recent-members-section {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-dark, #0f172a) 100%) !important;
}

.segmented-control-glass .seg-btn.active,
.district-gender-tabs .seg-btn.active {
    background: var(--primary-color, #1B1F7A) !important;
}

/* Member card "NEW" badge */
.member-badge-new {
    background: var(--secondary-color, #C0392B) !important;
}

/* Profile card profession badge */
.profession-badge {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.85) !important;
    color: #fff !important;
}

/* ── MATRIMONIAL SERVICES & SUCCESS STORIES PANELS ────────────────── */
.services-panel-card,
.stories-panel-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(var(--primary-rgb, 27, 31, 122), 0.12) 100%) !important;
    border: 1.5px solid rgba(var(--primary-rgb, 27, 31, 122), 0.2) !important;
    box-shadow: 0 16px 40px rgba(var(--primary-rgb, 27, 31, 122), 0.12) !important;
}

.svc-tile-modern:hover {
    border-color: var(--primary-color, #1B1F7A) !important;
    box-shadow: 0 12px 30px rgba(var(--primary-rgb, 27, 31, 122), 0.18) !important;
}

.story-card-modern:hover {
    border-color: var(--secondary-color, #e11d48) !important;
    box-shadow: 0 16px 36px rgba(var(--secondary-rgb, 225, 29, 72), 0.2) !important;
}

.service-icon-bg {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.12) !important;
    color: var(--primary-color, #1B1F7A) !important;
}

/* ── NAV HEADINGS / SECTION TITLES ──────────────────────────────── */
.section-title-primary {
    color: var(--primary-color, #1B1F7A) !important;
}

.section-highlight {
    color: var(--accent-color, #E8A202) !important;
}

/* Ensure 100% white font visibility for headings on dark / themed section backgrounds */
.recent-members-section h2,
.district-coverage-premium h2,
.featured-combined-section h2,
.hero-premium h1, .hero-premium h2,
.search-header-premium h1, .search-header-premium h2,
.about-banner h1, .about-banner h2,
.contact-banner h1, .contact-banner h2,
.auth-split-section h1, .auth-split-section h2 {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.recent-members-section p,
.district-coverage-premium p,
.featured-combined-section p {
    color: rgba(255, 255, 255, 0.90) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer,
.site-footer,
footer.vn-liquid-footer {
    background: linear-gradient(135deg,
        var(--vn-midnight, #0A0D2C) 0%,
        var(--primary-color, #1B1F7A) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

footer.vn-liquid-footer::before {
    background: radial-gradient(circle at 50% 0%,
        rgba(var(--primary-rgb, 27, 31, 122), 0.45) 0%,
        transparent 75%) !important;
}

/* ── CTA BUTTONS (GLOBAL) ────────────────────────────────────────── */
.btn-primary, .btn-cta, .premium-submit-btn {
    background: linear-gradient(135deg,
        var(--primary-color, #1B1F7A) 0%,
        var(--vn-indigo-light, #2A3199) 100%) !important;
    border-color: var(--primary-color, #1B1F7A) !important;
}

/* Search filter sidebar header */
.filter-header {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-light, #2563eb) 100%) !important;
}

/* Search page mobile filter button */
button[onclick="toggleFilterDrawer()"] {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-light, #2563eb) 100%) !important;
    border-color: var(--vn-indigo-dark, #1d4ed8) !important;
}

/* Search page sidebar CTA ad cards */
.sidebar-ad-card,
.mobile-ad-banner-card {
    background: linear-gradient(135deg,
        var(--primary-color, #1e3a8a) 0%,
        var(--vn-indigo-light, #2563eb) 100%) !important;
    box-shadow: 0 15px 35px rgba(var(--primary-rgb, 30, 58, 138), 0.25) !important;
}

/* Apply button in search filter */
.apply-filters-btn, .btn-apply-search {
    background: linear-gradient(135deg,
        var(--primary-color, #2563eb) 0%,
        var(--vn-indigo-dark, #1d4ed8) 100%) !important;
}

/* Search results profile card view button */
.profile-nav-btn, .view-profile-btn {
    background: var(--primary-color, #1a237e) !important;
}

/* "W Hub" badge on district cards */
.w-hub-badge {
    background: var(--primary-color, #1B1F7A) !important;
}

/* ── AUTHENTICATION PAGES (REGISTER & LOGIN) ──────────────────────── */
.auth-split-section {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-dark, #0A0D2C) 100%) !important;
}

.auth-right-glass {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.40) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}

.auth-right-glass h1,
.auth-right-glass h2,
.auth-left-brand h1,
.auth-left-brand h2 {
    color: #ffffff !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

.auth-brand-highlight,
.auth-accent-text,
.auth-brand-highlight i {
    color: var(--accent-color, #E8A202) !important;
}

.auth-btn-primary {
    background: linear-gradient(135deg, 
        var(--accent-color, #E8A202) 0%, 
        var(--secondary-color, #C0392B) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb, 27, 31, 122), 0.4) !important;
}

.auth-btn-primary:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb, 27, 31, 122), 0.55) !important;
}

.auth-btn-otp {
    border: 1.5px solid var(--accent-color, #E8A202) !important;
    background: rgba(var(--accent-rgb, 232, 162, 2), 0.18) !important;
    color: #ffffff !important;
}

.auth-link-accent {
    color: var(--accent-color, #E8A202) !important;
    font-weight: 800 !important;
}

.auth-split-container {
    display: grid !important;
    gap: 2.5rem !important;
    align-items: flex-start !important;
    z-index: 1 !important;
}

/* ── AUTH FORMS MODERN DESIGN SYSTEM ───────────────────────── */
.auth-form-group {
    margin-bottom: 0.9rem;
}

.auth-form-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.auth-form-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: #ffffff;
    outline: none;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.auth-form-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
}

.auth-form-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230f172a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.auth-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.auth-form-row-dob-age {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.auth-age-input {
    background: rgba(255, 255, 255, 0.25) !important;
    font-weight: 800 !important;
    cursor: not-allowed !important;
    text-align: center;
}

@media (min-width: 992px) {
    .auth-split-container {
        grid-template-columns: 1fr 1.15fr !important;
    }
}

@media (max-width: 991px) {
    .auth-split-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .auth-split-section {
        padding: 1.5rem 0.75rem !important;
    }

    .auth-right-glass {
        padding: 1.6rem 1.1rem !important;
        border-radius: 20px !important;
    }

    /* In mobile view, each field is in a single row (100% width) */
    .auth-form-row-2col {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
        margin-bottom: 0.9rem !important;
    }

    /* EXCEPT Date of Birth and Age: remain together in a single compact row */
    .auth-form-row-dob-age {
        grid-template-columns: 1fr 82px !important;
        gap: 0.65rem !important;
        margin-bottom: 0.9rem !important;
    }

    .auth-form-row-dob-age .auth-dob-input {
        padding-left: 10px !important;
        padding-right: 6px !important;
        font-size: 0.84rem !important;
    }

    .auth-form-row-dob-age .auth-age-input {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 0.88rem !important;
    }
}

/* ── ABOUT US PAGE DYNAMIC THEME OVERRIDES ──────────────────────── */
.about-banner {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-dark, #0A0D2C) 100%) !important;
}

/* ── CONTACT US PAGE DYNAMIC THEME OVERRIDES ────────────────────── */
.contact-banner {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-dark, #0A0D2C) 100%) !important;
}

.icon-indigo-bg {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.14) !important;
    color: var(--primary-color, #1B1F7A) !important;
}

.icon-crimson-bg {
    background: rgba(var(--secondary-rgb, 192, 57, 43), 0.14) !important;
    color: var(--secondary-color, #C0392B) !important;
}

.icon-gold-bg {
    background: rgba(var(--accent-rgb, 232, 162, 2), 0.16) !important;
    color: var(--accent-color, #E8A202) !important;
}

/* ── PROFILE VIEW PAGE DYNAMIC THEME OVERRIDES ────────────────── */
.profile-hero-banner {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-dark, #0A0D2C) 100%) !important;
}

.sidebar-widget-premium h3 {
    color: var(--primary-color, #1B1F7A) !important;
}

.membership-id-badge {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-light, #2563eb) 100%) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb, 27, 31, 122), 0.3) !important;
}

.btn-navy {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-light, #2563eb) 100%) !important;
    color: #ffffff !important;
}

.btn-outline-gold {
    background: rgba(var(--accent-rgb, 232, 162, 2), 0.10) !important;
    color: var(--accent-color, #E8A202) !important;
    border: 1.5px solid var(--accent-color, #E8A202) !important;
}

.profile-floating-cta-bar {
    background: rgba(var(--primary-rgb, 27, 31, 122), 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ── SEARCH PAGE DYNAMIC THEME OVERRIDES ────────────────────────── */
.search-header-premium {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-dark, #0A0D2C) 100%) !important;
}

.filter-header {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-light, #2563eb) 100%) !important;
    color: #ffffff !important;
}

.apply-btn, .apply-filters-btn, .btn-apply-search {
    background: linear-gradient(135deg, 
        var(--accent-color, #E8A202) 0%, 
        var(--secondary-color, #C0392B) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb, 27, 31, 122), 0.35) !important;
}

.results-count-badge {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-light, #2563eb) 100%) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 31, 122), 0.3) !important;
}

.mini-id-search-box button {
    background: var(--primary-color, #1B1F7A) !important;
}

.mini-id-search-box button:hover {
    background: var(--accent-color, #E8A202) !important;
}

.category-quick-tab.active {
    background: linear-gradient(135deg, 
        var(--primary-color, #1B1F7A) 0%, 
        var(--vn-indigo-light, #2563eb) 100%) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #1B1F7A) !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb, 27, 31, 122), 0.35) !important;
}

.search-page-container {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.results-info h2 {
    color: var(--primary-color, #1B1F7A) !important;
}

.mini-id-search-box {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1.5px solid rgba(var(--primary-rgb, 27, 31, 122), 0.2) !important;
}

.mini-id-search-box input {
    color: var(--primary-color, #1B1F7A) !important;
}

/* Light Section Theme overrides for Search Page */
.light-section-theme .seo-column-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.light-section-theme .seo-col-title {
    color: #0f172a !important;
}

.light-section-theme .seo-tag {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

.light-section-theme .seo-tag:hover {
    background: var(--primary-color, #1B1F7A) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #1B1F7A) !important;
}

/* Light Section Theme overrides for Profile View Page */
.light-section-theme .profile-card-premium {
    color: #0f172a !important;
}

.light-section-theme .sidebar-widget-premium h3 {
    color: #0f172a !important;
}

.light-section-theme .similar-profile-card:hover {
    border-color: var(--primary-color, #1B1F7A) !important;
}

.light-section-theme .detail-row-premium {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
}

.light-section-theme .detail-row-premium .label {
    color: #475569 !important;
}

.light-section-theme .detail-row-premium .value {
    color: #0f172a !important;
}

/* ── SPLIT SECTION CONTAINER & COLUMN LAYOUT ────────────────────── */
.split-section-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    padding: 2rem 1rem;
    width: 100% !important;
    box-sizing: border-box !important;
}

.split-col {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
}

@media (max-width: 1024px) {
    .split-section-container {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0.5rem 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .split-col {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}