/**
 * Milanadda — Phase 2: Modern Telegram-Inspired UI/UX System
 * Hardware-accelerated, lightweight, dark/light theme support, tactile micro-interactions.
 */

:root {
    /* Color Tokens — Light Mode (Default) */
    --tg-bg: #f5f7fb;
    --tg-bg-pattern: radial-gradient(circle at 50% 0%, rgba(255, 45, 85, 0.06) 0%, transparent 60%);
    --tg-surface: #ffffff;
    --tg-surface-elevated: #ffffff;
    --tg-surface-hover: #f0f4fa;
    --tg-surface-active: #e5ebf5;
    --tg-border: rgba(15, 23, 42, 0.08);
    --tg-border-strong: rgba(15, 23, 42, 0.14);
    --tg-border-active: rgba(255, 45, 85, 0.35);

    --tg-text: #0f172a;
    --tg-text-secondary: #475569;
    --tg-text-muted: #64748b;
    --tg-text-inverse: #ffffff;

    --tg-primary: #ff2d55;
    --tg-primary-hover: #e02246;
    --tg-primary-active: #c71537;
    --tg-primary-light: rgba(255, 45, 85, 0.1);
    --tg-primary-glow: rgba(255, 45, 85, 0.28);

    --tg-accent-blue: #0088cc;
    --tg-accent-blue-light: rgba(0, 136, 204, 0.1);
    --tg-success: #10b981;
    --tg-success-light: rgba(16, 185, 129, 0.12);

    /* Shadows & Depth */
    --tg-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
    --tg-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --tg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --tg-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --tg-shadow-glow: 0 0 24px var(--tg-primary-glow);

    /* Radius & Spacing */
    --tg-radius-xs: 6px;
    --tg-radius-sm: 10px;
    --tg-radius-md: 16px;
    --tg-radius-lg: 22px;
    --tg-radius-pill: 9999px;

    /* Transitions & Physics */
    --tg-ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    --tg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tg-transition-fast: 0.15s var(--tg-ease-out);
    --tg-transition-base: 0.22s var(--tg-ease-out);

    /* Typography — Soria (Art Nouveau serif) for headings, Plus Jakarta Sans for body */
    --tg-font-heading: 'Soria', 'Georgia', 'Times New Roman', serif;
    --tg-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark Theme Overrides — Apple/GitHub-style mid-gray, NOT navy/black */
[data-theme="dark"] {
    --tg-bg: #1c1c1e;
    --tg-bg-pattern: radial-gradient(circle at 50% 0%, rgba(255, 45, 85, 0.07) 0%, transparent 60%);
    --tg-surface: #2c2c2e;
    --tg-surface-elevated: #3a3a3c;
    --tg-surface-hover: #323234;
    --tg-surface-active: #3d3d3f;
    --tg-border: rgba(255, 255, 255, 0.10);
    --tg-border-strong: rgba(255, 255, 255, 0.18);
    --tg-border-active: rgba(255, 45, 85, 0.5);

    --tg-text: #f2f2f7;
    --tg-text-secondary: #aeaeb2;
    --tg-text-muted: #8e8e93;
    --tg-text-inverse: #0f172a;

    --tg-primary: #ff3b61;
    --tg-primary-hover: #ff5277;
    --tg-primary-active: #e02246;
    --tg-primary-light: rgba(255, 45, 85, 0.18);
    --tg-primary-glow: rgba(255, 59, 97, 0.30);

    --tg-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.14);
    --tg-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);
    --tg-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.24);
    --tg-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.32);

    /* Legacy Milan Theme Variables Overrides */
    --baby-pink: #1c1c1e;
    --dark-text: #f2f2f7;
    --card-bg: #2c2c2e;
    --border-color: rgba(255, 255, 255, 0.10);
    --hover-pink: #3a3a3c;
    --milan-text: #f2f2f7;
    --milan-muted: #aeaeb2;
    --milan-card-border: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   GLOBAL TYPOGRAPHY — Soria headings + Plus Jakarta Sans body
   ========================================================= */
body {
    font-family: var(--tg-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tg-font-heading) !important;
    letter-spacing: -0.01em;
}

/* Smooth Base Typography & Reset */
body.home-bg,
[data-theme="dark"] body.home-bg {
    background: var(--tg-bg) !important;
    background-image: var(--tg-bg-pattern) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--tg-text) !important;
    font-family: var(--tg-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-height: 100vh;
    padding-bottom: 70px; /* Space for mobile bottom bar */
}

@media (min-width: 992px) {
    body.home-bg {
        padding-bottom: 0;
    }
}

/* =========================================================
   1. TELEGRAM-STYLE APP HEADER & NAVIGATION
   ========================================================= */
.tg-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--tg-border);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .tg-header {
    background: rgba(44, 44, 46, 0.90);
}

.tg-header.scrolled {
    box-shadow: var(--tg-shadow-sm);
}

.tg-header-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Brand Logo */
.tg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    user-select: none;
}

.tg-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.tg-brand-meta {
    display: flex;
    flex-direction: column;
}

.tg-brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--tg-primary);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tg-brand-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: var(--tg-radius-pill);
    background: var(--tg-primary-light);
    color: var(--tg-primary);
}

.tg-brand-status {
    font-size: 0.72rem;
    color: var(--tg-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}

.tg-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tg-success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    display: inline-block;
    animation: tgPulse 2s infinite ease-in-out;
}

@keyframes tgPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

/* Desktop Navigation Links */
.tg-nav-links {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .tg-nav-links {
        display: flex;
    }
}

.tg-nav-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--tg-radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tg-text-secondary);
    text-decoration: none;
    transition: var(--tg-transition-fast);
}

.tg-nav-item a:hover {
    color: var(--tg-primary);
    background: var(--tg-surface-hover);
}

.tg-nav-item a.active {
    color: var(--tg-primary);
    background: var(--tg-primary-light);
}

/* Header Actions */
.tg-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Telegram Tactile Button Utility */
.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: var(--tg-radius-pill);
    padding: 8px 18px;
    font-size: 0.88rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    transition: transform 0.12s var(--tg-ease-spring), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.tg-btn:active {
    transform: scale(0.96) !important;
}

.tg-btn-primary {
    background: var(--tg-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--tg-primary-glow);
}

.tg-btn-primary:hover {
    background: var(--tg-primary-hover);
    box-shadow: 0 6px 18px var(--tg-primary-glow);
    color: #ffffff !important;
}

.tg-btn-surface {
    background: var(--tg-surface);
    color: var(--tg-text) !important;
    border-color: var(--tg-border);
}

.tg-btn-surface:hover {
    background: var(--tg-surface-hover);
    border-color: var(--tg-border-strong);
    color: var(--tg-text) !important;
}

.tg-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    color: var(--tg-text-secondary);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--tg-transition-fast);
}

.tg-btn-icon:hover {
    background: var(--tg-surface-hover);
    color: var(--tg-primary);
    border-color: var(--tg-border-strong);
}

.tg-btn-icon:active {
    transform: scale(0.92);
}

/* Theme Toggle Button Specifics */
#themeToggleBtn i {
    transition: transform 0.35s var(--tg-ease-spring);
}

[data-theme="dark"] #themeToggleBtn i {
    transform: rotate(360deg);
}

/* =========================================================
   2. TELEGRAM HERO STAGE & STATS
   ========================================================= */
.tg-hero {
    position: relative;
    padding: 48px 16px 28px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.tg-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    padding: 6px 16px;
    border-radius: var(--tg-radius-pill);
    box-shadow: var(--tg-shadow-sm);
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tg-text-secondary);
    transition: var(--tg-transition-fast);
}

.tg-hero-pill:hover {
    border-color: var(--tg-border-active);
    transform: translateY(-1px);
}

.tg-hero-pill .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tg-primary);
}

.tg-hero-title {
    font-family: var(--tg-font-heading);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--tg-text);
}

.tg-hero-title .gradient-text {
    background: linear-gradient(135deg, var(--tg-primary) 0%, #ff6b8b 50%, var(--tg-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tg-hero-subtitle {
    font-size: clamp(0.98rem, 2vw, 1.15rem);
    color: var(--tg-text-muted);
    max-width: 680px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* Hero Quick Actions */
.tg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

/* Stats Pill Strip */
.tg-stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 780px;
    margin: 0 auto 36px;
}

@media (min-width: 768px) {
    .tg-stats-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tg-stat-card {
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-md);
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--tg-shadow-xs);
    transition: var(--tg-transition-base);
}

.tg-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--tg-border-active);
    box-shadow: var(--tg-shadow-sm);
}

.tg-stat-number {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--tg-primary);
    line-height: 1.1;
    margin-bottom: 4px;
}

.tg-stat-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================================
   3. POPULAR METROS QUICK-JUMP CHIPS (TELEGRAM HORIZONTAL BAR)
   ========================================================= */
.tg-metro-section {
    max-width: 1040px;
    margin: 0 auto 32px;
    padding: 0 16px;
}

.tg-metro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tg-metro-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tg-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tg-metro-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    -webkit-overflow-scrolling: touch;
}

.tg-metro-scroll::-webkit-scrollbar {
    display: none;
}

.tg-metro-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--tg-radius-pill);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    color: var(--tg-text);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--tg-shadow-xs);
    transition: var(--tg-transition-fast);
    cursor: pointer;
}

.tg-metro-chip i {
    color: var(--tg-primary);
    font-size: 0.8rem;
}

.tg-metro-chip:hover {
    background: var(--tg-surface-hover);
    border-color: var(--tg-border-active);
    color: var(--tg-primary);
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-sm);
}

.tg-metro-chip:active {
    transform: scale(0.95);
}

/* =========================================================
   4. TELEGRAM FLOATING SEARCH & INSTANT FILTER BAR
   ========================================================= */
.tg-search-wrapper {
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 0 16px;
}

.tg-search-box {
    position: relative;
    background: var(--tg-surface);
    border: 1.5px solid var(--tg-border);
    border-radius: var(--tg-radius-pill);
    box-shadow: var(--tg-shadow-sm);
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 18px;
    transition: var(--tg-transition-base);
}

.tg-search-box:focus-within {
    border-color: var(--tg-primary);
    box-shadow: 0 6px 24px var(--tg-primary-glow);
    background: var(--tg-surface-elevated);
}

.tg-search-icon {
    font-size: 1.1rem;
    color: var(--tg-primary);
    margin-right: 12px;
}

.tg-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--tg-text);
    font-size: 0.98rem;
    font-weight: 500;
    padding: 8px 0;
}

.tg-search-input::placeholder {
    color: var(--tg-text-muted);
}

.tg-search-clear {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--tg-surface-hover);
    color: var(--tg-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--tg-transition-fast);
}

.tg-search-clear:hover {
    background: var(--tg-surface-active);
    color: var(--tg-text);
}

.tg-search-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 0;
    font-size: 0.78rem;
    color: var(--tg-text-muted);
}

/* Empty Match State */
.tg-empty-state {
    background: var(--tg-surface);
    border: 1px dashed var(--tg-border-strong);
    border-radius: var(--tg-radius-lg);
    padding: 36px 20px;
    text-align: center;
    margin-top: 16px;
}

.tg-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tg-primary-light);
    color: var(--tg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 12px;
}

/* =========================================================
   5. MODERN ACCORDION & LOCATION DIRECTORY
   ========================================================= */
.tg-directory-section {
    max-width: 1040px;
    margin: 0 auto 54px;
    padding: 0 16px;
}

.tg-section-head {
    text-align: center;
    margin-bottom: 28px;
}

.tg-section-title {
    font-family: var(--tg-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tg-text);
    margin-bottom: 8px;
}

.tg-section-subtitle {
    font-size: 0.95rem;
    color: var(--tg-text-muted);
}

/* Accordion Container */
.tg-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-accordion-item {
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-md);
    overflow: hidden;
    box-shadow: var(--tg-shadow-xs);
    transition: var(--tg-transition-fast);
}

.tg-accordion-item:hover {
    border-color: var(--tg-border-strong);
    box-shadow: var(--tg-shadow-sm);
}

.tg-accordion-item.open {
    border-color: var(--tg-border-active);
    box-shadow: var(--tg-shadow-sm);
}

.tg-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--tg-text);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    transition: var(--tg-transition-fast);
    user-select: none;
}

.tg-accordion-header:hover {
    background: var(--tg-surface-hover);
}

.tg-accordion-item.open .tg-accordion-header {
    background: var(--tg-surface-hover);
    color: var(--tg-primary);
}

.tg-state-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-state-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tg-primary-light);
    color: var(--tg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.tg-accordion-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--tg-radius-pill);
    background: var(--tg-surface-hover);
    color: var(--tg-text-secondary);
    border: 1px solid var(--tg-border);
}

.tg-accordion-item.open .tg-accordion-badge {
    background: var(--tg-primary);
    color: #ffffff;
    border-color: var(--tg-primary);
}

.tg-accordion-arrow {
    font-size: 0.9rem;
    color: var(--tg-text-muted);
    transition: transform 0.25s var(--tg-ease-spring);
}

.tg-accordion-item.open .tg-accordion-arrow {
    transform: rotate(180deg);
    color: var(--tg-primary);
}

/* Accordion Body & City Grid */
.tg-accordion-body {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--tg-border);
    background: var(--tg-surface);
}

.tg-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .tg-city-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

.tg-city-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--tg-radius-sm);
    background: var(--tg-surface-hover);
    border: 1px solid var(--tg-border);
    color: var(--tg-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.12s var(--tg-ease-spring), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tg-city-link:hover {
    background: var(--tg-primary);
    border-color: var(--tg-primary);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--tg-primary-glow);
}

.tg-city-link:active {
    transform: scale(0.96);
}

.tg-city-link i {
    font-size: 0.75rem;
    opacity: 0.4;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.tg-city-link:hover i {
    opacity: 1;
    transform: translateX(3px);
    color: #ffffff;
}

/* =========================================================
   6. TRUST & INFORMATION CARDS (TELEGRAM CARDS)
   ========================================================= */
.tg-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .tg-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tg-info-card {
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-lg);
    padding: 28px 22px;
    box-shadow: var(--tg-shadow-xs);
    transition: var(--tg-transition-base);
    display: flex;
    flex-direction: column;
}

.tg-info-card:hover {
    transform: translateY(-4px);
    border-color: var(--tg-border-active);
    box-shadow: var(--tg-shadow-md);
}

.tg-info-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--tg-radius-md);
    background: var(--tg-primary-light);
    color: var(--tg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.tg-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-text);
    margin-bottom: 10px;
}

.tg-info-desc {
    font-size: 0.9rem;
    color: var(--tg-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* =========================================================
   7. FAQ SECTION
   ========================================================= */
.tg-faq-item {
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: var(--tg-transition-fast);
}

.tg-faq-item:hover {
    border-color: var(--tg-border-strong);
}

.tg-faq-button {
    width: 100%;
    padding: 18px 22px;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--tg-text);
    text-align: left;
    cursor: pointer;
    transition: var(--tg-transition-fast);
}

.tg-faq-button:hover {
    color: var(--tg-primary);
}

.tg-faq-body {
    padding: 0 22px 20px;
    font-size: 0.92rem;
    color: var(--tg-text-secondary);
    line-height: 1.6;
}

/* =========================================================
   8. TELEGRAM FOOTER
   ========================================================= */
.main-footer,
.tg-footer {
    background: var(--tg-surface) !important;
    border-top: 1px solid var(--tg-border) !important;
    padding: 56px 20px 36px;
    color: var(--tg-text-secondary) !important;
    font-size: 0.88rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.main-footer h6,
.tg-footer h6 {
    color: var(--tg-text) !important;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.main-footer .footer-links-list,
.tg-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-footer .footer-links-list li,
.tg-footer-links li {
    margin-bottom: 10px;
}

.main-footer .footer-links-list a,
.tg-footer-links a {
    color: var(--tg-text-secondary) !important;
    text-decoration: none;
    transition: var(--tg-transition-fast);
}

.main-footer .footer-links-list a:hover,
.tg-footer-links a:hover {
    color: var(--tg-primary) !important;
    padding-left: 2px;
}

.main-footer hr,
.tg-footer-divider {
    border-color: var(--tg-border) !important;
    margin: 36px 0 24px;
}

.main-footer .disclaimer-text,
.main-footer .text-muted,
.tg-footer-disclaimer {
    font-size: 0.78rem;
    color: var(--tg-text-muted) !important;
    line-height: 1.6;
}

/* RTA Compliance Badge */
.rta-badge {
    background: #f8fafc;
    border-color: #e2e8f0 !important;
    transition: var(--tg-transition-fast);
}

.rta-badge .rta-badge__text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.rta-badge:hover {
    border-color: rgba(255, 45, 85, 0.4) !important;
}

/* =========================================================
   Footer Verified Payment Trust Badges
   ========================================================= */
.footer-payment-trust {
    border-top: 1px solid var(--tg-border, #e5e7eb);
    border-bottom: 1px solid var(--tg-border, #e5e7eb);
}

.footer-trust-title {
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    color: var(--tg-text, #1e293b);
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 28px;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.payment-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.payment-badge .upi-text {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0b7285;
    letter-spacing: 0.5px;
}

/* Dark Mode Footer Payment Trust Badges */
[data-theme="dark"] .footer-payment-trust {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .footer-trust-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .payment-badge {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================================
   9. TELEGRAM MOBILE BOTTOM NAVIGATION BAR
   ========================================================= */
.tg-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--tg-border);
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

[data-theme="dark"] .tg-bottom-bar {
    background: rgba(23, 33, 43, 0.94);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991.98px) {
    .tg-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}

.tg-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 12px;
    color: var(--tg-text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--tg-radius-sm);
    transition: var(--tg-transition-fast);
    flex: 1;
    text-align: center;
    user-select: none;
}

.tg-tab-item i {
    font-size: 1.15rem;
    transition: transform 0.15s var(--tg-ease-spring);
}

.tg-tab-item:active {
    transform: scale(0.92);
}

.tg-tab-item.active {
    color: var(--tg-primary);
}

.tg-tab-item.active i {
    transform: translateY(-2px);
}

/* Featured Tab Button (Post Ad) */
.tg-tab-featured {
    position: relative;
    top: -10px;
    background: var(--tg-primary);
    color: #ffffff !important;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 6px 18px var(--tg-primary-glow);
    padding: 0;
    flex: 0 0 48px;
}

.tg-tab-featured i {
    font-size: 1.35rem;
    color: #ffffff;
}

.tg-tab-featured:active {
    transform: scale(0.9) !important;
}

/* =========================================================
   10. TELEGRAM WEB TOAST SYSTEM
   ========================================================= */
.tg-toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.tg-toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(23, 33, 43, 0.95);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--tg-radius-pill);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-size: 0.88rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: opacity 0.25s var(--tg-ease-out), transform 0.25s var(--tg-ease-spring);
}

[data-theme="light"] .tg-toast {
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
}

.tg-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tg-toast-icon {
    font-size: 1rem;
    color: var(--tg-primary);
}

/* Skeleton Loading Placeholder */
.tg-skeleton {
    background: linear-gradient(90deg, var(--tg-surface-hover) 25%, var(--tg-surface-active) 50%, var(--tg-surface-hover) 75%);
    background-size: 200% 100%;
    animation: tgSkeleton 1.5s infinite linear;
    border-radius: var(--tg-radius-sm);
}

@keyframes tgSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================================
   11. COMPREHENSIVE GLOBAL DARK THEME (ALL PAGES & COMPONENTS)
   ========================================================= */
[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: #1c1c1e !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 45, 85, 0.07) 0%, transparent 60%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* Headers on all subpages - NO borders, NO box-shadows in dark mode */
[data-theme="dark"] .header-awwwards {
    background: #2c2c2e !important;
    border: 0 none !important;
    border-top: 0 none !important;
    border-bottom: 0 none !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Explicitly eliminate borders from inner, c-header-main, header-main, and header-main__container */
.header-awwwards .inner,
.header-awwwards .c-header-main,
.header-awwwards .header-main,
.header-awwwards .header-main__container,
[data-theme="dark"] .header-awwwards .inner,
[data-theme="dark"] .header-awwwards .c-header-main,
[data-theme="dark"] .header-awwwards .header-main,
[data-theme="dark"] .header-awwwards .header-main__container {
    background: transparent !important;
    border: 0 none !important;
    border-top: 0 none !important;
    border-bottom: 0 none !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Header Right Section & Spacing */
.header-main__right {
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin-left: auto;
}

.header-main__user {
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Theme toggle button in header-awwwards - borderless circular icon matching user icon */
.header-awwwards .theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #222222 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-awwwards .theme-toggle-btn:hover {
    background-color: #f3f3f3 !important;
}

[data-theme="dark"] .header-awwwards .theme-toggle-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .header-awwwards .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .auth-header {
    background: #2c2c2e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] .header-main__link {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .header-main__link:hover {
    color: var(--tg-primary) !important;
}

.header-main__ico {
    margin-right: -8px !important;
}

[data-theme="dark"] .header-main__ico {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .header-main__ico:hover {
    background-color: #3a3a3c !important;
    color: #ffffff !important;
}

[data-theme="dark"] .button--small--outline--rounded {
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: transparent !important;
}

[data-theme="dark"] .button--small--outline--rounded:hover {
    background: var(--tg-primary) !important;
    border-color: var(--tg-primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .budget-tag--small--solid--black {
    background-color: #ff2d55 !important;
    color: #ffffff !important;
}

/* Hamburger Icon Alignment & Dark Mode */
.header-main__hamburger {
    margin-left: -8px !important;
}

[data-theme="dark"] .header-main__hamburger:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hamburger-bar {
    background-color: #f2f2f7 !important;
}

/* Mobile Nav Drawer, Header & Full Dark Styling */
[data-theme="dark"] .nav-header-main {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .nav-header-main__mobile-head {
    background: #2c2c2e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .nav-header-main__mobile-head .text-dark {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .drawer-close-btn {
    background: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .drawer-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

[data-theme="dark"] .drawer-user-card {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .drawer-user-card__greeting {
    color: #8e8e93 !important;
}

[data-theme="dark"] .drawer-user-card__name {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .drawer-user-card__subtext {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .drawer-btn--secondary {
    background: #3a3a3c !important;
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .drawer-btn--secondary:hover {
    background: #48484a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .drawer-btn--outline {
    background: transparent !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ff453a !important;
}

[data-theme="dark"] .nav-header-main__link {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .nav-header-main__link:hover,
[data-theme="dark"] .nav-header-main__link:active {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-header-main__dropdown,
[data-theme="dark"] .header-main__dropdown {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .search-inspiration__section {
    color: #aeaeb2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .search-inspiration__item {
    color: #e5e5ea !important;
}

[data-theme="dark"] .search-inspiration__item:hover {
    background-color: #3a3a3c !important;
    color: var(--tg-primary) !important;
}

/* Popular Cities Section in Drawer */
[data-theme="dark"] .drawer-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .drawer-section__title {
    color: #8e8e93 !important;
}

[data-theme="dark"] .drawer-chip {
    background: #2c2c2e !important;
    color: #e5e5ea !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .drawer-chip:hover {
    background: rgba(255, 45, 85, 0.2) !important;
    color: #ff3b61 !important;
    border-color: rgba(255, 45, 85, 0.4) !important;
}

/* Mobile Drawer Footer */
[data-theme="dark"] .drawer-footer {
    background: #242426 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .drawer-footer__links a {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .drawer-footer__links a:hover {
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .drawer-footer__divider {
    color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .drawer-footer__copy {
    color: #8e8e93 !important;
}

/* Typography on Mobile Drawer items */
.nav-header-main__link,
.drawer-section__title,
.search-inspiration__section,
.drawer-user-card__name {
    font-family: var(--tg-font-body) !important;
}

.drawer-post-btn {
    font-family: var(--tg-font-body) !important;
}

/* Cards, Containers & Content Boxes across all pages */
[data-theme="dark"] .card,
[data-theme="dark"] .listing-card,
[data-theme="dark"] .ad-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .terms-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .dynamic-promo-carousel,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20) !important;
}

/* Typography across all pages */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6,
[data-theme="dark"] .card-title,
[data-theme="dark"] .text-dark {
    color: #f2f2f7 !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .card-text,
[data-theme="dark"] .content p,
[data-theme="dark"] .content li,
[data-theme="dark"] .lead {
    color: #aeaeb2 !important;
}

[data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.10) !important;
    opacity: 0.4;
}

/* Forms, Inputs & Selects across all pages */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-custom,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .input-group-text {
    background-color: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-control-custom:focus {
    background-color: #3a3a3c !important;
    border-color: var(--tg-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.22) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .form-label-custom {
    color: #aeaeb2 !important;
}

[data-theme="dark"] ::placeholder {
    color: #8e8e93 !important;
}

/* Tables on Dashboard & Logs */
[data-theme="dark"] .table {
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: #3a3a3c !important;
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Light buttons & badges in dark mode */
[data-theme="dark"] .btn-light {
    background-color: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: #444448 !important;
    border-color: var(--tg-primary) !important;
    color: var(--tg-primary) !important;
}

/* Alerts */
[data-theme="dark"] .alert-light {
    background-color: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(0, 136, 204, 0.15) !important;
    border-color: rgba(0, 136, 204, 0.3) !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 45, 85, 0.15) !important;
    border-color: rgba(255, 45, 85, 0.3) !important;
    color: #ff6b8b !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

/* Breadcrumbs & Pagination */
[data-theme="dark"] .breadcrumb {
    background: transparent !important;
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .page-link {
    background-color: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--tg-primary) !important;
    border-color: var(--tg-primary) !important;
    color: #ffffff !important;
}

/* Accordion in subpages */
[data-theme="dark"] .accordion-item {
    background-color: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .accordion-button {
    background-color: #2c2c2e !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #3a3a3c !important;
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .accordion-body {
    background-color: #2c2c2e !important;
    color: #aeaeb2 !important;
}

/* Search bar on subdomain */
[data-theme="dark"] .search-form__field {
    background: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .search-form__input {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .search-form__button {
    color: #aeaeb2 !important;
}

/* Footer on all pages */
[data-theme="dark"] .main-footer {
    background: #2c2c2e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .main-footer h6 {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .main-footer .footer-links-list a {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .main-footer .footer-links-list a:hover {
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .main-footer .disclaimer-text,
[data-theme="dark"] .main-footer .text-muted {
    color: #8e8e93 !important;
}

[data-theme="dark"] .rta-badge {
    background: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .rta-badge .rta-badge__text {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .rta-badge:hover {
    background: #444448 !important;
    border-color: var(--tg-primary) !important;
}

/* Auth pages (login, register, forgot-password) body & card */
[data-theme="dark"] body.auth-page-bg,
[data-theme="dark"] .auth-wrapper body {
    background-color: #1c1c1e !important;
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card,
[data-theme="dark"] .auth-card {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* List items */
[data-theme="dark"] li,
[data-theme="dark"] .content li {
    color: #aeaeb2 !important;
}


/* =========================================================
   12. AUTH PAGES DARK THEME — Override inline styles
   (login.php, register.php, forgot-password.php)
   ========================================================= */

/* Page body & background */
[data-theme="dark"] body {
    background-color: #1c1c1e !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 45, 85, 0.07) 0%, transparent 60%) !important;
    color: #f2f2f7 !important;
}

/* Auth header bar */
[data-theme="dark"] .auth-header {
    background: #2c2c2e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Main card & sub-panels */
[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .register-card,
[data-theme="dark"] .forgot-card,
[data-theme="dark"] .reset-card,
[data-theme="dark"] .verify-card,
[data-theme="dark"] .login-wrapper,
[data-theme="dark"] .signup-wrapper,
[data-theme="dark"] .register-wrapper,
[data-theme="dark"] .forgot-wrapper,
[data-theme="dark"] .reset-wrapper {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Dynamic Rotating Benefits Carousel Pill */
[data-theme="dark"] .dynamic-promo-carousel {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .promo-slide-item {
    color: #f2f2f7 !important;
}

/* Step Progress Indicator (register.php) */
[data-theme="dark"] .step-progress-bar .step-node {
    color: #8e8e93 !important;
}

[data-theme="dark"] .step-progress-bar .step-node .node-circle {
    background: #3a3a3c !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .step-progress-bar .step-node.active {
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .step-progress-bar .step-node.active .node-circle {
    background: var(--milan-gradient) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .step-progress-bar .step-node.completed {
    color: #34d399 !important;
}

[data-theme="dark"] .step-progress-bar .step-node.completed .node-circle {
    background: #198754 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .step-progress-bar .step-line {
    background: #3a3a3c !important;
}

[data-theme="dark"] .step-progress-bar .step-line.completed {
    background: #198754 !important;
}

/* Badges: Adult guarantee (register) & Security assurance (login) */
[data-theme="dark"] .adult-guarantee-badge,
[data-theme="dark"] .security-badge-box {
    background: rgba(255, 45, 85, 0.12) !important;
    border: 1px dashed rgba(255, 45, 85, 0.35) !important;
    color: #ff7a9b !important;
}

/* Form Inputs & Labels */
[data-theme="dark"] .form-label-custom {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .form-control-custom {
    background-color: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .form-control-custom:focus {
    background-color: #3a3a3c !important;
    border-color: var(--tg-primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.22) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .form-text {
    color: #8e8e93 !important;
}

[data-theme="dark"] .password-toggle-btn {
    color: #8e8e93 !important;
}

[data-theme="dark"] .password-toggle-btn:hover {
    color: var(--tg-primary) !important;
}

/* Password Strength & Interactive Checklist (register.php) */
[data-theme="dark"] .strength-container .strength-header {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .strength-meter-bg {
    background-color: #1c1c1e !important;
}

[data-theme="dark"] .password-rules-box {
    background: #3a3a3c !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .password-rules-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .rules-list li {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .rules-list li .rule-icon {
    background: #2c2c2e !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .rules-list li.rule-valid {
    color: #34d399 !important;
}

[data-theme="dark"] .rules-list li.rule-valid .rule-icon {
    background: #198754 !important;
    color: #ffffff !important;
}

/* Terms & 18+ Consent Toggle Card (register.php) */
[data-theme="dark"] .toggle-switch-card {
    background: #3a3a3c !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .toggle-switch-card:hover {
    border-color: rgba(255, 45, 85, 0.45) !important;
}

[data-theme="dark"] .slider-custom {
    background-color: #2c2c2e !important;
}

[data-theme="dark"] .slider-custom:before {
    background-color: #f2f2f7 !important;
}

[data-theme="dark"] .toggle-text-block {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .toggle-text-block strong {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .toggle-text-block a {
    color: #ff7a9b !important;
}

/* OTP 6-Digit Verification Inputs (forgot-password / verify) */
[data-theme="dark"] .otp-digit-box {
    background: #3a3a3c !important;
    border: 2px solid rgba(255, 255, 255, 0.14) !important;
    color: #ff3b61 !important;
}

[data-theme="dark"] .otp-digit-box:focus {
    background: #3a3a3c !important;
    border-color: var(--tg-primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.22) !important;
}

/* Auth Cards Bottom Links & Subtext */
[data-theme="dark"] .auth-container .text-muted,
[data-theme="dark"] .auth-container small {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .auth-container .border-top {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .btn-create-account,
[data-theme="dark"] .btn-back-login,
[data-theme="dark"] .btn-secondary-action {
    background: #3a3a3c !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .btn-create-account:hover,
[data-theme="dark"] .btn-back-login:hover,
[data-theme="dark"] .btn-secondary-action:hover {
    background: #444448 !important;
    border-color: var(--tg-primary) !important;
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .feature-item {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.30) !important;
    color: #34d399 !important;
}

[data-theme="dark"] .email-pill {
    background: rgba(255, 45, 85, 0.12) !important;
    border-color: rgba(255, 45, 85, 0.30) !important;
    color: #ff7a9b !important;
}

[data-theme="dark"] .verify-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .verify-subtitle {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .forgot-pass-link {
    color: #ff7a9b !important;
}

/* Form error/success states */
[data-theme="dark"] .invalid-feedback {
    color: #ff6b8b !important;
}

[data-theme="dark"] .valid-feedback {
    color: #34d399 !important;
}

/* Terms page & privacy page */
[data-theme="dark"] .terms-section,
[data-theme="dark"] .privacy-section,
[data-theme="dark"] .content-section,
[data-theme="dark"] .page-section {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-content {
    background: #1c1c1e !important;
}

/* Sections with bg-white or bg-light used as page wrappers */
[data-theme="dark"] section.bg-white,
[data-theme="dark"] section.bg-light,
[data-theme="dark"] div.bg-white,
[data-theme="dark"] div.bg-light {
    background: #1c1c1e !important;
}

/* Inner card-like bg-white within sections */
[data-theme="dark"] .container .bg-white,
[data-theme="dark"] .container-fluid .bg-white {
    background: #2c2c2e !important;
}

/* Nav tabs (city/category pages) */
[data-theme="dark"] .nav-tabs {
    border-color: rgba(255,255,255,0.10) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: #2c2c2e !important;
    color: var(--tg-primary) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Badges */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.text-dark {
    background: #3a3a3c !important;
    color: #f2f2f7 !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f2f2f7 !important;
}

/* Jumbotron / hero fallback */
[data-theme="dark"] .jumbotron {
    background: #2c2c2e !important;
}

/* Subdomain index page */
[data-theme="dark"] .subdomain-wrapper,
[data-theme="dark"] .city-hero,
[data-theme="dark"] .cat-hero {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}

/* Links on content pages */
[data-theme="dark"] .content a:not(.btn):not(.tg-btn) {
    color: #ff7a9b !important;
}

[data-theme="dark"] .content a:not(.btn):not(.tg-btn):hover {
    color: var(--tg-primary) !important;
}


/* =========================================================
   13. COMPREHENSIVE DARK THEME FOR ALL REMAINING SUBPAGES
   (ad.php, city.php, category.php, subdomain_index.php,
    dashboard.php, buy-coins.php, post-ad.php, search.php)
   ========================================================= */

/* Ad Detail Page (ad.php) */
[data-theme="dark"] .ad-detail-header,
[data-theme="dark"] .ad-gallery,
[data-theme="dark"] .ad-description,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .safety-card,
[data-theme="dark"] .related-ads-card,
[data-theme="dark"] .ad-sidebar-card {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f2f2f7 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="dark"] .ad-detail-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .ad-detail-meta {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .ad-id-badge {
    background: #3a3a3c !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .thumb-strip {
    background: #1c1c1e !important;
}

[data-theme="dark"] .ad-description-text {
    color: #d1d1d6 !important;
}

[data-theme="dark"] .ad-description h6 {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .contact-item {
    background: #3a3a3c !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .contact-item:hover {
    background: rgba(255, 45, 85, 0.20) !important;
    color: #ff3b61 !important;
}

[data-theme="dark"] .contact-item .icon-phone {
    background: rgba(25, 118, 210, 0.25) !important;
    color: #64b5f6 !important;
}

[data-theme="dark"] .contact-item .icon-whatsapp {
    background: rgba(46, 125, 50, 0.25) !important;
    color: #81c784 !important;
}

[data-theme="dark"] .contact-item .icon-email {
    background: rgba(230, 81, 0, 0.25) !important;
    color: #ffb74d !important;
}

[data-theme="dark"] .safety-tip {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .info-card .btn-report {
    background: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .info-card .btn-report:hover {
    background: rgba(255, 45, 85, 0.20) !important;
    color: #ff3b61 !important;
    border-color: var(--tg-primary) !important;
}

/* Subdomain Index & Category Cards (subdomain_index.php) */
[data-theme="dark"] .category-card {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="dark"] .cat-overlay {
    background: rgba(44, 44, 46, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .cat-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .cat-desc {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .loc-pill {
    background: #3a3a3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #aeaeb2 !important;
}

[data-theme="dark"] .loc-pill:hover {
    background: var(--tg-primary) !important;
    color: #ffffff !important;
    border-color: var(--tg-primary) !important;
}

[data-theme="dark"] .wide-search-box {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .wide-search-box .form-control {
    background: transparent !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .wide-search-box .form-control::placeholder {
    color: #8e8e93 !important;
}

[data-theme="dark"] .section-title {
    color: #f2f2f7 !important;
}

/* Listing Cards (city.php, category.php, search.php) */
[data-theme="dark"] .listing-card-horizontal {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20) !important;
    color: #f2f2f7 !important;
}

[data-theme="dark"] .listing-card-horizontal:hover {
    border-color: var(--tg-primary) !important;
}

[data-theme="dark"] .modern-ad-card {
    background: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="dark"] .modern-ad-card__media {
    background: #1c1c1e !important;
}

[data-theme="dark"] .vip-badge {
    background: #3a3a3c !important;
    color: var(--tg-primary) !important;
    border-color: var(--tg-primary) !important;
}

/* Dashboard Page (dashboard.php) */
[data-theme="dark"] .dashboard-sidebar .list-group-item {
    background-color: #2c2c2e !important;
    color: #aeaeb2 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .dashboard-sidebar .list-group-item:hover {
    background-color: #3a3a3c !important;
    color: var(--tg-primary) !important;
}

[data-theme="dark"] .dashboard-sidebar .list-group-item.active {
    background-color: var(--tg-primary) !important;
    border-color: var(--tg-primary) !important;
    color: #ffffff !important;
}

/* Buy Coins Page (buy-coins.php) */
[data-theme="dark"] .page-title {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .page-subtitle {
    color: #aeaeb2 !important;
}

[data-theme="dark"] .pricing-card {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="dark"] .pricing-card:hover {
    border-color: var(--tg-primary) !important;
}

[data-theme="dark"] .pricing-card-label input[type="radio"]:checked + .pricing-card {
    background: #3a3a3c !important;
    border-color: var(--tg-primary) !important;
}

[data-theme="dark"] .coin-amount {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .price-new {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .price-old {
    color: #8e8e93 !important;
}

/* Bootstrap Form Helpers & General Components */
[data-theme="dark"] .form-text {
    color: #8e8e93 !important;
}

[data-theme="dark"] .text-black-50 {
    color: #8e8e93 !important;
}

[data-theme="dark"] .text-dark {
    color: #f2f2f7 !important;
}

[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20) !important;
}