/* =========================================
   ZongoMall Premium CSS - Fully Polished
   Mobile-first + Perfect on iPhone 13 Pro
   Version 14.0 (Smaller cards + Transparent lightbox)
========================================= */

:root {
    /* Brand */
    --primary: #0e8f6f;
    --primary-dark: #0b7657;
    --primary-light: #14b892;
    --primary-tint: #eafaf5;

    /* Marketplace gold — the signature accent (price tags, ratings, CTA highlights) */
    --gold: #eb9c2e;
    --gold-dark: #c97f12;
    --gold-tint: #fdf3e1;

    /* Ghana flag accents — used sparingly as a local-context motif */
    --gh-red: #ce1126;
    --gh-gold: #fcd116;
    --gh-green: #006b3f;
    --gh-black: #14181f;

    /* Neutrals — warm, not cold slate */
    --dark: #14181f;
    --gray: #6b6f76;
    --gray-light: #9a9fa6;
    --border: #e4e2da;
    --light: #faf9f5;
    --surface-alt: #f4f2ec;
    --white: #ffffff;

    /* Feedback */
    --danger: #dc2626;
    --danger-tint: #fef2f2;

    --shadow: 0 4px 20px rgba(20, 24, 31, 0.06);
    --shadow-hover: 0 14px 32px rgba(20, 24, 31, 0.12);
    --radius: 16px;
    --radius-sm: 12px;

    --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--light);
    color: var(--dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Sticky-footer layout for the Forgot/Reset Password pages ONLY — lets
   .auth-page reliably fill and center in whatever space is left between
   the header and footer, on any screen height, without guessing pixel
   heights. Scoped to body.auth-body-layout (set only by those two pages)
   because some pages — like the inbox chat UI — define their own
   full-viewport layout and must NOT be turned into a flex column here,
   or their own height math gets nested inside this one and breaks. */
body.auth-body-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body.auth-body-layout .main-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .logo-text, .price, .price-large {
    font-family: var(--font-display);
}

a { color: inherit; }

/* Visible keyboard focus everywhere — accessible + intentional */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2.5px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Prevent iPhone zoom on input focus */
input, select, textarea, button {
    font-size: 16px !important;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== HEADER ===== */
.site-header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 10px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.logo-text span {
    color: var(--primary);
}

/* Search */
.search-box {
    order: 3;
    width: 100%;
    margin-top: 2px;
}
.search-box form {
    display: flex;
}
.search-box input {
    flex: 1;
    padding: 13px 16px;
    border: 2px solid #e4e2da;
    border-radius: var(--radius) 0 0 var(--radius);
    outline: none;
    background: #faf9f5;
    transition: 0.2s;
}
.search-box input:focus {
    border-color: var(--primary);
    background: white;
}
.search-box button {
    padding: 0 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-weight: 600;
    cursor: pointer;
}

/* Navigation buttons */
.nav-actions {
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    border: 2px solid #e4e2da;
    color: var(--dark);
}
.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.btn-large {
    padding: 16px 32px;
    font-size: 1.05rem;
    border-radius: 14px;
}
.btn-whatsapp {
    background: #25D366 !important;
    color: white !important;
    border: none !important;
}
.btn-whatsapp:hover {
    background: #20ba5a !important;
}

/* ===== HERO ===== */
.hero {
    position: relative;
    background: var(--dark);
    color: white;
    padding: 52px 0 46px;
    text-align: center;
    overflow: hidden;
}
/* Signature: a red-gold-green stripe under the hero — a subtle Ghanaian flag
   motif that reads as "local marketplace" without being a literal flag. */
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--gh-red) 0 33.33%, var(--gh-gold) 33.33% 66.66%, var(--gh-green) 66.66% 100%);
    z-index: 2;
}

/* Small black star badge, echoing the flag's Black Star, tucked beside the headline */
.hero-star-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gh-black);
    color: var(--gh-gold);
    font-size: 0.75rem;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.18);
}

.hero-locale-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(252, 209, 22, 0.35);
    color: #f0ede4;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.hero-locale-chip .flag-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.hero-locale-chip .flag-dot.r { background: var(--gh-red); }
.hero-locale-chip .flag-dot.g { background: var(--gh-gold); }
.hero-locale-chip .flag-dot.gr { background: var(--gh-green); }

/* ===== HERO BACKGROUND SLIDER ===== */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.4s ease, transform 6s ease-out;
    will-change: opacity, transform;
}
.hero-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16,21,28,0.82), rgba(16,21,28,0.9));
}
.hero-content {
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity 0.3s ease; transform: none; }
}

/* Hero slider arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(16,21,28,0.45);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hero-arrow:hover {
    background: rgba(16,21,28,0.75);
    border-color: var(--gh-gold, #f0c419);
    transform: translateY(-50%) scale(1.08);
}
.hero-arrow-prev { left: 18px; }
.hero-arrow-next { right: 18px; }

/* Hero slider dot indicators */
.hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}
.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease;
}
.hero-dot.active {
    background: var(--gh-gold, #f0c419);
    border-color: var(--gh-gold, #f0c419);
    transform: scale(1.15);
}

@media (max-width: 640px) {
    .hero-arrow { width: 36px; height: 36px; font-size: 0.95rem; }
    .hero-arrow-prev { left: 8px; }
    .hero-arrow-next { right: 8px; }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ===== HERO CITY TYPEWRITER ===== */
/* Grid-stack technique: the hidden sizer (longest city name) and the visible
   typewriter text share the same grid cell, so the track always sizes to the
   longest word. This reserves space up front and prevents any layout shift
   or reflow as shorter/longer cities type in — at every viewport/font-size. */
.hero-cycle {
    display: inline-grid;
    vertical-align: bottom;
    color: var(--gold);
    text-align: left;
}
.hero-cycle-sizer,
.hero-cycle-visible {
    grid-area: 1 / 1;
    white-space: nowrap;
}
.hero-cycle-sizer {
    visibility: hidden;
    pointer-events: none;
}
.hero-cycle-visible {
    display: inline-flex;
    align-items: baseline;
}
.hero-cycle-cursor {
    display: inline-block;
    width: 3px;
    margin-left: 3px;
    height: 0.85em;
    background: var(--gold);
    animation: heroCursorBlink 0.9s step-end infinite;
}
@keyframes heroCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero p {
    font-size: 1.05rem;
    color: #cfd3d9;
    margin-bottom: 28px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.hero .btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #1a1305;
    font-weight: 700;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 28px -8px rgba(235, 156, 46, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero .btn-primary:hover {
    background: linear-gradient(135deg, #f5ac47 0%, var(--gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -8px rgba(235, 156, 46, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hero .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px -6px rgba(235, 156, 46, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== SECTION ===== */
.section {
    padding: 40px 0 50px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-header h2 {
    font-size: 1.45rem;
    font-weight: 700;
}
.section-header a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ===== AD CARDS ===== */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.listing-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(20, 24, 31, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
    border: 1px solid var(--surface-alt);
}

.listing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.listing-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--surface-alt);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-image.no-image {
    background: linear-gradient(135deg, var(--border), #d8d4c8);
}

.placeholder-icon {
    font-size: 1.9rem;
    opacity: 0.35;
}

.listing-body {
    padding: 8px 9px 9px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.listing-body h3 {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dark);
}

/* Signature price-tag treatment — small gold ticket, not a generic bold number */
.price {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.meta {
    font-size: 0.66rem;
    color: var(--gray);
    margin-top: auto;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* Mobile — genuinely compact, not a shrunk desktop card */
@media (max-width: 640px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .listing-card {
        border-radius: 8px;
    }

    .listing-body {
        padding: 6px 7px 7px;
    }

    .listing-body h3 {
        font-size: 0.7rem;
        margin-bottom: 2px;
        -webkit-line-clamp: 1;
    }

    .price {
        font-size: 0.76rem;
        margin-bottom: 2px;
    }

    .meta {
        font-size: 0.58rem;
        gap: 3px;
    }

    .placeholder-icon {
        font-size: 1.3rem;
    }
}

@media (max-width: 380px) {
    .listings-grid {
        gap: 6px;
    }
    .listing-body {
        padding: 5px 6px 6px;
    }
}

/* ===== SINGLE AD PAGE ===== */
.listing-single-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
}

.main-image {
    border-radius: 16px;
    overflow: hidden;
    background: #f4f2ec;
    aspect-ratio: 4/3;
    position: relative;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.price-large {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary);
    margin: 10px 0 14px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 22px 0;
}

.action-buttons .btn-large {
    padding: 10px 16px;
    font-size: 0.88rem;
}

/* Desktop / Mobile Call button */
.desktop-only { display: flex; }
.mobile-only  { display: none; }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only  { display: flex !important; }
}

.call-btn {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ===== LIGHTBOX - More Transparent ===== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);          /* More transparent */
    backdrop-filter: blur(6px);                /* Nice frosted glass */
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox img {
    max-width: 92%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    color: white;
    font-size: 2.8rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.9;
}

.lightbox-nav {
    position: absolute;
    bottom: 40px;
    display: flex;
    gap: 20px;
}

.lightbox-nav button {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    border: none;
    color: white;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.lightbox-nav button:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .listing-single-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .main-image {
        aspect-ratio: 1 / 1;
        max-height: 450px;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 12px;
    }

    /* Compact mobile hero — listings should be reachable in the first
       scroll on a marketplace site, not buried under a full-screen
       banner. Desktop hero is untouched. */
    .hero {
        padding: 14px 0 12px;
    }
    .hero-locale-chip {
        padding: 4px 11px;
        font-size: 0.64rem;
        margin-bottom: 7px;
    }
    .hero h1 {
        font-size: 1.05rem;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    .hero-star-badge {
        width: 15px;
        height: 15px;
        font-size: 0.54rem;
        margin-right: 5px;
    }
    .hero p {
        font-size: 0.72rem;
        line-height: 1.35;
        margin-bottom: 10px;
    }
    .hero .btn-large {
        padding: 8px 17px;
        font-size: 0.78rem;
    }
    .hero-dots {
        bottom: 10px;
    }

    .section {
        padding: 22px 0 30px;
    }
    .section-header {
        margin-bottom: 12px;
    }
    .section-header h2 {
        font-size: 1.1rem;
    }
    .section-header a {
        font-size: 0.85rem;
    }
}

/* ===== LEGAL / INFO PAGES (About, Privacy, Terms) ===== */
.legal-hero {
    position: relative;
    background: var(--dark);
    color: white;
    padding: 44px 0 34px;
    text-align: center;
    overflow: hidden;
}
.legal-flag-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gh-red) 0 33.33%, var(--gh-gold) 33.33% 66.66%, var(--gh-green) 66.66% 100%);
}
.legal-hero h1 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.legal-hero p { color: #cfd3d9; }

.legal-container {
    max-width: 780px;
}
.legal-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--dark);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
    color: #3d424b;
    margin-bottom: 12px;
    line-height: 1.7;
}
.legal-list {
    margin: 0 0 12px 20px;
    color: #3d424b;
    line-height: 1.8;
}
.legal-list li { margin-bottom: 4px; }

@media (max-width: 640px) {
    .legal-hero { padding: 30px 0 24px; }
    .legal-hero h1 { font-size: 1.4rem; }
}

/* ===== PAGINATION (/ads) ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 32px;
}
.pagination-link {
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--dark);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.pagination-link:hover { background: #2a323d; }
.pagination-current {
    color: var(--gray);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===== FOOTER ===== */
.site-footer {
    position: relative;
    background: var(--dark);
    color: #9a9fa6;
    text-align: center;
    padding: 32px 16px 26px;
    margin-top: 20px;
    font-size: 0.85rem;
    line-height: 1.7;
}
.footer-flag-bar {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gh-red) 0 33.33%, var(--gh-gold) 33.33% 66.66%, var(--gh-green) 66.66% 100%);
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-logo { height: 64px; opacity: 0.9; }
.footer-tagline { color: #e4e2da; font-weight: 600; margin-top: 4px; }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.footer-links a {
    color: #cfd3d9;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--gh-gold); }

.footer-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #25D366;
    color: #0b3b1e;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
    transition: background 0.2s, transform 0.15s;
}
.footer-whatsapp-btn i { font-size: 1rem; }
.footer-whatsapp-btn:hover {
    background: #1fbd5a;
    transform: translateY(-1px);
}

.footer-copy { color: #7d828a; }
.footer-star { color: var(--gh-gold); }

@media (max-width: 640px) {
    .footer-logo { height: 75px; }
}

/* Auto-hide header / search / footer on mobile for focused, full-height
   auth screens (forgot-password, reset-password) so the glass card
   centers in the viewport instead of sharing space with site chrome. */
@media (max-width: 768px) {
    .site-header--hide-mobile { display: none !important; }
    .search-box--hide-mobile { display: none !important; }
    .site-footer--hide-mobile { display: none !important; }
}

/* =====================================================
/* =====================================================
   ZONGOMALL AUTH MODAL — Premium Glassmorphism (compact)
   ===================================================== */

.auth-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.auth-modal.active {
    display: flex !important;
}

/* Rich, ambient dark backdrop with brand-color glow */
.auth-modal-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(650px circle at 18% 12%, rgba(20, 184, 146, 0.30), transparent 60%),
        radial-gradient(600px circle at 88% 85%, rgba(235, 156, 46, 0.22), transparent 55%),
        linear-gradient(160deg, rgba(6, 10, 16, 0.88) 0%, rgba(10, 22, 22, 0.92) 55%, rgba(6, 10, 16, 0.94) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Glass card — compact by default on every screen size */
.auth-modal-content {
    position: relative;
    width: 100%;
    max-width: 366px;
    border-radius: 20px;
    padding: 18px 20px 16px;
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    color: #f5f7f6;

    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.045) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 30px 70px -15px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 60px -12px rgba(14, 143, 111, 0.35);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}
/* Signature Ghana-flag hairline, softened into the glass edge */
.auth-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--gh-red) 0 33.33%, var(--gh-gold) 33.33% 66.66%, var(--gh-green) 66.66% 100%);
    opacity: 0.85;
}
/* Soft inner glow blob, purely decorative */
.auth-modal-content::after {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(14, 184, 146, 0.45), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    z-index: -1;
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    color: #eef1f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.auth-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(90deg);
}

/* Branded logo header inside the modal */
.auth-modal-brand {
    text-align: center;
    margin-bottom: 10px;
}
.auth-modal-logo {
    height: 30px;
    width: auto;
    display: inline-block;
    margin-bottom: 4px;
    filter: drop-shadow(0 4px 16px rgba(20, 184, 146, 0.35));
}
.auth-modal-tagline {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(245, 247, 246, 0.55);
    letter-spacing: 0.03em;
}

/* Tabs — glass pill toggle */
.auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 3px;
    border-radius: 12px;
}
.auth-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    color: rgba(245, 247, 246, 0.55);
    transition: all 0.25s ease;
}
.auth-tab.active {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px -4px rgba(14, 143, 111, 0.6);
}

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; animation: authFadeIn 0.3s ease; }
@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-form h3 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}
.auth-subtitle {
    color: rgba(245, 247, 246, 0.6);
    margin: 0 0 14px 0;
    font-size: 0.86rem;
    line-height: 1.35;
}

/* Form groups — scoped to the dark glass contexts (auth modal + the
   standalone Forgot/Reset auth-card) only. .form-group is a common class
   name reused by other forms on the site (post-ad, edit-ad, etc.) which
   must NOT inherit this dark styling. */
.auth-modal-content .form-group,
.auth-card .form-group { margin-bottom: 8px; }
.auth-modal-content .form-group label,
.auth-card .form-group label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: rgba(245, 247, 246, 0.8);
    letter-spacing: 0.01em;
}

/* Glass input shell — icon + input (+ optional toggle button).
   Scoped to the dark contexts only, same reasoning as above. */
.auth-modal-content .input-shell,
.auth-card .input-shell {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.auth-modal-content .input-shell:focus-within,
.auth-card .input-shell:focus-within {
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(20, 184, 146, 0.16);
}
.auth-modal-content .input-shell .input-icon,
.auth-card .input-shell .input-icon {
    flex: none;
    width: 34px;
    text-align: center;
    color: rgba(245, 247, 246, 0.4);
    font-size: 0.86rem;
}
.auth-modal-content .input-shell:focus-within .input-icon,
.auth-card .input-shell:focus-within .input-icon { color: var(--primary-light); }

.auth-modal-content .form-group input,
.auth-card .form-group input {
    width: 100%;
    padding: 9px 10px 9px 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: #ffffff;
    outline: none;
}
.auth-modal-content .form-group input::placeholder,
.auth-card .form-group input::placeholder { color: rgba(245, 247, 246, 0.35); }

/* Autofill override — browsers otherwise force a white/yellow opaque
   background on autofilled fields, which broke the dark-glass look on
   just the autofilled field (e.g. email) while the untouched password
   field stayed dark, an inconsistent look within the same form. */
.auth-modal-content .form-group input:-webkit-autofill,
.auth-card .form-group input:-webkit-autofill,
.auth-modal-content .form-group input:-webkit-autofill:hover,
.auth-card .form-group input:-webkit-autofill:hover,
.auth-modal-content .form-group input:-webkit-autofill:focus,
.auth-card .form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #1b2420 inset;
    box-shadow: 0 0 0px 1000px #1b2420 inset;
    caret-color: #ffffff;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Password toggle button */
.auth-modal-content .password-wrapper,
.auth-card .password-wrapper { position: relative; }
.auth-modal-content .toggle-password,
.auth-card .toggle-password {
    flex: none;
    width: 34px;
    height: 100%;
    background: none;
    border: none;
    color: rgba(245, 247, 246, 0.45);
    cursor: pointer;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.auth-modal-content .toggle-password:hover,
.auth-card .toggle-password:hover { color: var(--primary-light); }

/* Options row */
.auth-modal-content .form-options,
.auth-card .form-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
    margin-top: -2px;
    font-size: 0.8rem;
}
.auth-modal-content .remember-me,
.auth-card .remember-me {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(245, 247, 246, 0.6);
    cursor: pointer;
}
.auth-modal-content .forgot-link,
.auth-card .forgot-link {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}
.auth-modal-content .forgot-link:hover,
.auth-card .forgot-link:hover { color: #f5ac47; text-decoration: underline; }

/* Main button — premium gradient with lift */
.auth-btn {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 11px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px -6px rgba(14, 143, 111, 0.55);
}
.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(14, 143, 111, 0.65), 0 0 0 1px rgba(235, 156, 46, 0.3);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Switch text */
.auth-switch {
    text-align: center;
    margin: 12px 0 0 0;
    font-size: 0.82rem;
    color: rgba(245, 247, 246, 0.55);
}
.auth-switch a { color: var(--gold); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Message box */
.auth-message {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 500;
    display: none;
    text-align: center;
    border: 1px solid transparent;
}
.auth-message.error {
    display: block;
    background: rgba(220, 38, 38, 0.14);
    color: #ff9d9d;
    border-color: rgba(220, 38, 38, 0.35);
}
.auth-message.success {
    display: block;
    background: rgba(20, 184, 146, 0.14);
    color: #6bf0c9;
    border-color: rgba(20, 184, 146, 0.4);
}

/* Scrollbar polish inside the glass card (only shows up on very short screens) */
.auth-modal-content::-webkit-scrollbar { width: 6px; }
.auth-modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; }

/* ===== Extra-small phones — trim a little further ===== */
@media (max-width: 360px) {
    .auth-modal-content { padding: 16px 16px 14px; border-radius: 18px; }
    .auth-modal-logo { height: 26px; }
    .auth-tab { padding: 7px 8px; font-size: 0.82rem; }
    .auth-modal-content .form-group input,
    .auth-card .form-group input { font-size: 0.87rem; }
}

/* =====================================================
   ZONGOMALL — Standalone auth pages (Forgot / Reset Password)
   Same premium glass language, reliably centered between the
   (possibly hidden) header and footer via the sticky-footer
   flex layout on body/.main-content.
   ===================================================== */
.auth-page {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    overflow: hidden;
    background:
        radial-gradient(650px circle at 15% 10%, rgba(20, 184, 146, 0.28), transparent 55%),
        radial-gradient(550px circle at 90% 90%, rgba(235, 156, 46, 0.20), transparent 55%),
        linear-gradient(160deg, #0a0e14 0%, #0e1b1a 55%, #0a0e14 100%);
}
.auth-page::before,
.auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.auth-page::before {
    width: 240px; height: 240px;
    top: -70px; left: -50px;
    background: rgba(14, 143, 111, 0.35);
}
.auth-page::after {
    width: 200px; height: 200px;
    bottom: -60px; right: -40px;
    background: rgba(235, 156, 46, 0.25);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 366px;
    padding: 22px 22px 18px;
    border-radius: 20px;
    color: #f5f7f6;

    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.045) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 30px 70px -15px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 60px -12px rgba(14, 143, 111, 0.35);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--gh-red) 0 33.33%, var(--gh-gold) 33.33% 66.66%, var(--gh-green) 66.66% 100%);
    opacity: 0.85;
}

.auth-card-brand {
    text-align: center;
    margin-bottom: 10px;
}
.auth-card-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 8px 20px -6px rgba(14, 143, 111, 0.55);
}
.auth-card-logo {
    height: 30px;
    width: auto;
    filter: drop-shadow(0 4px 16px rgba(20, 184, 146, 0.35));
}

.auth-card h1 {
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
    text-align: center;
}

.auth-card > p {
    text-align: center;
    color: rgba(245, 247, 246, 0.6);
    margin-bottom: 14px;
    font-size: 0.84rem;
    line-height: 1.4;
}

.auth-card .auth-switch { position: relative; z-index: 1; }

@media (max-width: 480px) {
    .auth-page { padding: 16px 14px; }
    .auth-card { padding: 18px 16px 16px; border-radius: 18px; }
    .auth-card-brand { margin-bottom: 8px; }
    .auth-card-icon { width: 40px; height: 40px; font-size: 1.05rem; margin-bottom: 6px; }
    .auth-card-logo { height: 26px; }
    .auth-card h1 { font-size: 1.08rem; }
    .auth-card > p { font-size: 0.8rem; margin-bottom: 12px; }
}
@media (max-width: 360px) {
    .auth-card { padding: 16px 14px 14px; }
    .auth-card-logo { height: 24px; }
}