/* ==================== CSS Variables & Theme - Dark Green ==================== */
:root {
    /* Dark Theme Colors */
    --bg-primary: #0a0f0d;
    --bg-secondary: #0d1210;
    --bg-tertiary: #111916;
    --bg-card: #141f1b;

    /* Green Accent Colors */
    --accent-color: #10b981;
    --accent-light: #34d399;
    --accent-dark: #059669;
    --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --accent-glow: 0 0 30px rgba(16, 185, 129, 0.4);

    /* Text Colors */
    --text-primary: #e8f5f0;
    --text-secondary: #a3c4b8;
    --text-hint: #6b8f82;

    /* Telegram theme colors - overwritten by JS */
    --tg-theme-bg-color: #0a0f0d;
    --tg-theme-text-color: #e8f5f0;
    --tg-theme-hint-color: #6b8f82;
    --tg-theme-link-color: #10b981;
    --tg-theme-button-color: #10b981;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #141f1b;

    /* Glass Effect Colors - Dark */
    --glass-bg: rgba(20, 31, 27, 0.7);
    --glass-bg-light: rgba(16, 185, 129, 0.1);
    --glass-border: rgba(16, 185, 129, 0.2);
    --glass-border-light: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Status Colors */
    --success-color: #10b981;
    --success-light: #34d399;
    --danger-color: #ef4444;
    --danger-light: #f87171;
    --warning-color: #f59e0b;
    --warning-light: #fbbf24;

    /* Spacing System */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-family: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Safe Areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==================== Light Theme ==================== */
[data-theme="light"] {
    /* Light Theme Colors */
    --bg-primary: #f5f7f6;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8eeeb;
    --bg-card: #ffffff;

    /* Text Colors for Light Mode */
    --text-primary: #1a2e26;
    --text-secondary: #4a6b5d;
    --text-hint: #7a9b8d;

    /* Telegram theme colors for light */
    --tg-theme-bg-color: #f5f7f6;
    --tg-theme-text-color: #1a2e26;
    --tg-theme-hint-color: #7a9b8d;
    --tg-theme-secondary-bg-color: #ffffff;

    /* Glass Effect Colors - Light */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-bg-light: rgba(16, 185, 129, 0.08);
    --glass-border: rgba(16, 185, 129, 0.25);
    --glass-border-light: rgba(0, 0, 0, 0.05);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* Shadows for Light Mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.15);
}

/* Light mode - darker green gradient for avtomobillar card */
[data-theme="light"] .category-card-full {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.85) 35%,
        rgba(4, 120, 87, 0.9) 65%,
        rgba(6, 95, 70, 0.92) 100%);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 12px 40px -5px rgba(4, 120, 87, 0.5),
                0 8px 25px -3px rgba(6, 95, 70, 0.4),
                0 4px 15px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .brand-card,
[data-theme="light"] .model-card,
[data-theme="light"] .category-item,
[data-theme="light"] .item-card {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.25) 0%,
        rgba(16, 185, 129, 0.1) 30%,
        rgba(208, 208, 208, 0.85) 50%,
        rgba(192, 192, 192, 0.85) 70%,
        rgba(176, 176, 176, 0.85) 100%);
    border-color: rgba(180, 180, 180, 0.5);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2),
                0 2px 6px -2px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .quick-action-card {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.25) 0%,
        rgba(16, 185, 129, 0.1) 30%,
        rgba(208, 208, 208, 0.85) 50%,
        rgba(192, 192, 192, 0.85) 70%,
        rgba(176, 176, 176, 0.85) 100%);
    border-color: rgba(180, 180, 180, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Light mode - dark text on silver cards */
[data-theme="light"] .category-card h4,
[data-theme="light"] .quick-action-card h4,
[data-theme="light"] .brand-name,
[data-theme="light"] .model-name,
[data-theme="light"] .category-name,
[data-theme="light"] .item-name {
    color: #2a2a2a;
}

/* Light mode - white text on dark green avtomobillar card */
[data-theme="light"] .category-card-full .category-content h3 {
    color: #ffffff;
}

[data-theme="light"] .category-card-full .category-content p {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .category-card-full .category-arrow {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .category-card p,
[data-theme="light"] .quick-action-card p,
[data-theme="light"] .brand-count,
[data-theme="light"] .model-count,
[data-theme="light"] .category-count,
[data-theme="light"] .item-count {
    color: #505050;
}

/* Light mode - hero slides keep white text (dark gradient background) */
[data-theme="light"] .hero-slide h2,
[data-theme="light"] .hero-slide p {
    color: #ffffff;
}

[data-theme="light"] .hero-slide p {
    color: rgba(255, 255, 255, 0.85);
}

/* Light mode - modals, sheets, and overlays */
[data-theme="light"] .language-modal-content,
[data-theme="light"] .bottom-sheet-content,
[data-theme="light"] .search-filters-content {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .language-btn,
[data-theme="light"] .glass-card,
[data-theme="light"] .contact-option {
    background: rgba(245, 245, 245, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .language-btn:hover,
[data-theme="light"] .language-btn:active,
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .contact-option:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-color);
}

[data-theme="light"] .language-modal-backdrop,
[data-theme="light"] .bottom-sheet-backdrop,
[data-theme="light"] .search-filters-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

/* ==================== Theme Toggle Button ==================== */
.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:active {
    color: var(--accent-color);
}

.theme-icon {
    transition: var(--transition-base);
}

.theme-icon.hidden {
    display: none;
}

/* ==================== Reset & Base ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    height: 100%;
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    /* Prevent mobile zoom on focus */
    font-size: 16px !important;
    /* Ensure proper touch handling */
    touch-action: manipulation;
    /* Prevent text selection issues */
    -webkit-user-select: text;
    user-select: text;
}

/* Fix for iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Prevent backdrop-filter issues on inputs */
input:focus, select:focus, textarea:focus {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

img {
    max-width: 100%;
    display: block;
}

/* ==================== Language Selector Modal ==================== */
.language-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.language-modal.hidden {
    display: none;
}

.language-modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-xl), var(--accent-glow);
    animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.language-modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.language-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.language-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-btn:hover,
.language-btn:active {
    border-color: var(--accent-color);
    background: var(--glass-bg-light);
    transform: scale(1.02);
}

.language-btn.active {
    border-color: var(--accent-color);
    background: var(--glass-bg-light);
    box-shadow: var(--accent-glow);
}

.language-btn .flag {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.language-btn .flag svg {
    width: 100%;
    height: 100%;
}

.language-btn .lang-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

/* Small Language Switcher Button */
.lang-switcher {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 150;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-switcher:hover {
    background: var(--glass-bg-light);
    box-shadow: var(--accent-glow);
}

.lang-switcher .current-flag {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.lang-switcher .current-flag svg {
    width: 100%;
    height: 100%;
}

.lang-switcher .lang-code {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ==================== Splash Screen ==================== */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7f6 0%, #ffffff 50%, #e8f5f0 100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.splash-screen.hidden {
    display: none;
}

.splash-screen.fade-out {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.splash-content {
    text-align: center;
    color: #1a2e26;
}

.splash-logo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rotating text ring around the car */
.rotating-text-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    animation: rotateTextRing 8s linear infinite;
}

.rotating-text-ring svg {
    width: 100%;
    height: 100%;
}

.rotating-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    fill: var(--accent-color);
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes rotateTextRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Circular container for the car - Stage */
.logo-circle {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff 0%, #f0f5f3 100%);
    border: 3px solid var(--accent-color);
    box-shadow:
        0 0 50px rgba(16, 185, 129, 0.3),
        0 0 100px rgba(16, 185, 129, 0.15),
        inset 0 0 40px rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
    perspective: 500px;
}

/* 3D Car container with rotation */
.car-3d-container {
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotateCar 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

.car-3d {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}

/* 360 degree rotation with 3D effect */
@keyframes rotateCar {
    0% {
        transform: rotateY(-20deg) scale(0.95);
    }
    25% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(20deg) scale(0.95);
    }
    75% {
        transform: rotateY(0deg) scale(1);
    }
    100% {
        transform: rotateY(-20deg) scale(0.95);
    }
}

/* Wheel spinning animation - spokes rotate around wheel center */
.car-3d .wheel-spokes-front {
    transform-origin: 24px 44px;
    animation: wheelSpin 0.6s linear infinite;
}

.car-3d .wheel-spokes-rear {
    transform-origin: 76px 44px;
    animation: wheelSpin 0.6s linear infinite;
}

@keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Ambient light effect on stage */
.logo-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center top, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle floor reflection */
.logo-circle::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 20%;
    right: 20%;
    height: 15%;
    background: linear-gradient(to top, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
}

.logo-pulse {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
    animation: pulse 2s ease-out infinite;
    z-index: 1;
}

.splash-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.splash-subtitle {
    font-size: var(--font-size-lg);
    color: #5a7a6d;
    margin-bottom: var(--space-xl);
}

.splash-loader {
    width: 220px;
    height: 6px;
    background: #e0e8e4;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loader-bar {
    height: 100%;
    width: 0;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    animation: loading 2s ease-out forwards;
    box-shadow:
        var(--accent-glow),
        0 0 10px rgba(16, 185, 129, 0.5);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes loading {
    0% { width: 0; }
    100% { width: 100%; }
}

/* ==================== App Container ==================== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.app-container.hidden {
    display: none;
}

/* ==================== Glass Effect Classes ==================== */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.glass-dark {
    background: rgba(10, 15, 13, 0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border-light);
}

.glass-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Prevent cursor misalignment - no transforms */
    transform: none;
    -webkit-transform: none;
    /* Prevent any inherited transforms */
    will-change: border-color;
}

.glass-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.glass-input::placeholder {
    color: var(--text-hint);
}

/* ==================== Header ==================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: var(--safe-area-top);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border-light);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

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

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    min-height: 56px;
}

.header-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    transition: background 0.2s ease, transform 0.2s ease;
}

.header-btn:active {
    transform: scale(0.92);
    background: var(--bg-card);
}

.header-btn.hidden {
    visibility: hidden;
    pointer-events: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 66px;
    color: var(--accent-color);
    margin-top: -8px;
}

.header-logo-icon {
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 191, 99, 0.3));
}

.header-logo-icon img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.header-logo-icon svg {
    height: 100%;
    width: auto;
}

.header-logo-text {
    font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: -1px;
    line-height: 66px;
    height: 66px;
    display: flex;
    align-items: center;
}

.header-title-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0 var(--space-sm);
    pointer-events: none;
}

.header-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.header-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    display: block;
}

/* ==================== Main Content ==================== */
.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.page {
    display: none;
    min-height: 100%;
    padding-bottom: calc(80px + var(--safe-area-bottom));
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

.page-header-spacer {
    height: var(--space-md);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== Pull to Refresh ==================== */
.pull-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--text-hint);
    font-size: var(--font-size-sm);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pull-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.pull-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-card);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ==================== Hero Section ==================== */
.hero-section {
    position: relative;
    margin: var(--space-md);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: var(--space-xl);
}

/* Hero Stats Badge */
.hero-stats {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.hero-stat-item svg {
    color: white;
    opacity: 1;
}

.hero-stat-item .stat-number {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: white;
}

.hero-stat-item .stat-label {
    font-size: 10px;
    color: white;
    opacity: 1;
    text-transform: lowercase;
}

.hero-stat-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}

.hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: -20px;
    right: -20px;
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    bottom: 20px;
    left: 20px;
    animation-delay: -2s;
}

.shape-3 {
    width: 40px;
    height: 40px;
    top: 50%;
    right: 30%;
    animation-delay: -4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
}

/* Hero Text Slider */
.hero-text-slider {
    position: relative;
    min-height: 90px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.hero-slide.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.hero-slide.exit-left {
    opacity: 0;
    transform: translateX(-30px);
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.hero-title .highlight {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.hero-text {
    font-size: var(--font-size-base);
    opacity: 0.9;
}

/* Hero Indicators */
.hero-indicators {
    display: flex;
    gap: 8px;
    margin-top: var(--space-md);
}

.hero-indicators .indicator {
    width: 24px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-indicators .indicator.active {
    background: rgba(255, 255, 255, 0.9);
    width: 32px;
}

/* ==================== Section ==================== */
.section {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-lg);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.see-all-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--accent-color);
    transition: opacity 0.2s ease;
}

.see-all-btn:active {
    opacity: 0.7;
}

/* ==================== Categories ==================== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-md);
    min-height: 180px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-cars::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.category-electronics::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.category-card:hover::before,
.category-card:active::before {
    opacity: 1;
}

.category-card:active {
    transform: scale(0.98);
    border-color: var(--accent-color);
}

.category-card:hover {
    box-shadow: var(--accent-glow);
}

/* Full-width category card for single category */
.category-card-full {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    padding-left: 150px;
    min-height: 120px;
    background: linear-gradient(180deg, #1a2f28 0%, #0f1f1a 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: visible;
    /* Green glow at bottom for bulging effect */
    box-shadow:
        0 8px 30px -5px rgba(16, 185, 129, 0.4),
        0 4px 15px -3px rgba(16, 185, 129, 0.3),
        inset 0 -1px 0 rgba(16, 185, 129, 0.2);
}

/* Inner glow effect at bottom */
.category-card-full::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -2px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(4px);
}

/* Top highlight for 3D effect */
.category-card-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.category-card-full:active {
    transform: scale(0.98);
    border-color: var(--accent-color);
}

.category-card-full:hover {
    box-shadow:
        0 12px 40px -5px rgba(16, 185, 129, 0.5),
        0 6px 20px -3px rgba(16, 185, 129, 0.4),
        inset 0 -1px 0 rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
}

.category-card-full .category-icon-wrapper {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.category-card-full .category-content {
    flex: 1;
    text-align: left;
}

.category-card-full .category-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.category-card-full .category-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.category-card-full .category-arrow {
    color: var(--accent-color);
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.category-card-full:hover .category-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Car Image for category card */
.category-car-image {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 120px;
    z-index: 10;
    pointer-events: none;
}

.car-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.6s ease-in-out, transform 0.3s ease;
    filter: drop-shadow(4px 8px 15px rgba(0, 0, 0, 0.5));
}

/* Car slide animation */
.car-photo.car-slide {
    opacity: 0;
    transform: scale(0.9);
}

.car-photo.car-slide.active {
    opacity: 1;
    transform: scale(1);
}

.car-photo.car-slide.exit {
    opacity: 0;
    transform: scale(1.1);
}

.category-card-full:hover .car-photo.active {
    transform: scale(1.1) translateX(5px);
    filter: drop-shadow(6px 10px 20px rgba(0, 0, 0, 0.6));
}

.category-card-full:active .car-photo.active {
    transform: scale(1.05) translateX(8px);
}

/* Adjust white car size to match black car */
.car-photo[alt="White Car"] {
    transform: scale(1.5);
}

.car-photo[alt="White Car"].active {
    transform: scale(1.5);
}

.car-photo[alt="White Car"].exit {
    transform: scale(1.6);
}

.category-card-full:hover .car-photo[alt="White Car"].active {
    transform: scale(1.6) translateX(5px);
}

.category-icon-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon-wrapper svg {
    width: 64px;
    height: 64px;
}

.category-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}

.category-icon {
    position: relative;
    z-index: 1;
}

/* 3D Icon Styling */
.icon-3d {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.category-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.category-content p {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.category-arrow {
    display: none; /* Hide arrow in card layout */
}

/* ==================== Quick Actions ==================== */
.quick-actions {
    display: flex;
    gap: var(--space-sm);
}

.quick-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.quick-action-btn:active {
    transform: scale(0.95);
}

.quick-action-btn:hover {
    box-shadow: var(--accent-glow);
}

.quick-action-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    position: relative;
}

.favorites-icon {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.alerts-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

.sell-icon {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger-color);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: none;
    align-items: center;
    justify-content: center;
}

.notification-badge:not(:empty) {
    display: flex;
}

.quick-action-btn span:last-child {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

/* ==================== Listings Grid ==================== */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Section header actions */
.section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Refresh button */
.refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.refresh-btn:hover {
    background: var(--accent-color-20);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.refresh-btn:active {
    transform: scale(0.9);
}

.refresh-btn.spinning svg {
    animation: spin 0.8s linear infinite;
}

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

/* Horizontal scrollable listings slider */
.listings-slider {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.listings-slider::-webkit-scrollbar {
    display: none;
}

.listings-slider .listing-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
}

.listings-slider .listing-card.see-all-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color-20) 0%, var(--accent-color-10) 100%);
    border: 2px dashed var(--accent-color);
    min-height: 220px;
}

.listings-slider .see-all-card .see-all-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-md);
}

.listings-slider .see-all-card .see-all-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.listings-slider .see-all-card .see-all-icon svg {
    color: white;
}

.listings-slider .see-all-card .see-all-text {
    color: var(--accent-color);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Like button on listing cards */
.like-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 20px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.like-btn:active {
    transform: scale(0.9);
}

.like-btn .heart-icon {
    color: white;
    transition: all 0.2s ease;
}

.like-btn.liked .heart-icon {
    fill: #ef4444;
    color: #ef4444;
}

.like-btn .like-count {
    color: white;
    font-size: 12px;
    font-weight: 600;
    min-width: 12px;
    text-align: center;
}

/* Slider like button */
.slider-like-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 16px;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    color: white;
}

.slider-like-btn:active {
    transform: scale(0.9);
}

.slider-like-btn svg {
    transition: all 0.2s ease;
}

.slider-like-btn.liked svg {
    fill: #ef4444;
}

.slider-like-btn .like-count {
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 10px;
    text-align: center;
}

/* Ranking badge for popular listings */
.ranking-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    z-index: 2;
}

/* Expand icon for image preview */
.expand-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
    color: white;
}

.expand-icon:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.8);
}

.listing-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-card:active {
    transform: scale(0.97);
}

.listing-card:hover {
    box-shadow: var(--shadow-lg), var(--accent-glow);
    border-color: var(--accent-color);
}

.listing-image {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--text-hint);
    position: relative;
    overflow: hidden;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.listing-card:hover .listing-image img {
    transform: scale(1.05);
}

.listing-info {
    padding: var(--space-sm);
}

.listing-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.listing-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent-color);
}

.listing-meta {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    margin-top: 2px;
}

.listing-specs {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    flex-wrap: wrap;
}

.listing-meta-row .listing-condition,
.listing-meta-row .listing-location {
    color: var(--text-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.fuel-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    background: var(--glass-bg-light);
    border-radius: var(--radius-sm);
    color: var(--accent-color);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.fuel-badge i {
    font-size: 11px;
}

/* ==================== Skeleton Loading ==================== */
.skeleton {
    pointer-events: none;
}

.skeleton-image,
.skeleton-title,
.skeleton-price,
.skeleton-text {
    background: linear-gradient(90deg,
        var(--bg-tertiary) 0%,
        var(--bg-card) 50%,
        var(--bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-image {
    aspect-ratio: 1;
}

.skeleton-content {
    padding: var(--space-sm);
}

.skeleton-title {
    height: 14px;
    margin-bottom: var(--space-sm);
}

.skeleton-price {
    height: 20px;
    width: 60%;
}

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

/* ==================== Listings List ==================== */
.listings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-md);
}

.listing-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.listing-item:active {
    transform: scale(0.99);
}

.listing-item:hover {
    box-shadow: var(--shadow-lg), var(--accent-glow);
}

.listing-thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    overflow: hidden;
}

.listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.listing-details .listing-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-details .listing-price {
    font-size: var(--font-size-xl);
    margin: var(--space-xs) 0;
}

.listing-details .listing-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.condition-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.condition-badge.new {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.condition-badge.like-new {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.favorite-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-hint);
    transition: transform 0.2s ease, color 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.favorite-btn:active {
    transform: scale(0.9);
}

.favorite-btn.active {
    color: var(--danger-color);
}

.favorite-btn.active svg {
    fill: currentColor;
}

/* Like count in favorite button */
.favorite-btn .like-count {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: var(--danger-color);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.favorite-btn .like-count:empty {
    display: none;
}

/* ==================== Brands & Models Grid ==================== */
.brands-grid,
.models-grid,
.electronics-grid,
.items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: 0 var(--space-md);
}

.brand-card,
.model-card,
.category-item,
.item-card {
    padding: var(--space-lg);
    background: linear-gradient(180deg, #1a2f28 0%, #0f1f1a 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    /* Subtle green glow at bottom */
    box-shadow:
        0 4px 12px -4px rgba(16, 185, 129, 0.2),
        0 2px 6px -2px rgba(16, 185, 129, 0.15);
}

/* Bottom glow line for brand cards - reduced */
.brand-card::before,
.model-card::before,
.category-item::before,
.item-card::before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    filter: blur(2px);
}

.brand-card:active,
.model-card:active,
.category-item:active,
.item-card:active {
    transform: scale(0.96);
}

.brand-card:hover,
.model-card:hover,
.category-item:hover,
.item-card:hover {
    box-shadow:
        0 6px 18px -4px rgba(16, 185, 129, 0.3),
        0 3px 10px -2px rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.brand-name,
.model-name,
.category-name,
.item-name {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.brand-count,
.model-count,
.category-count,
.item-count {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.category-item .category-icon {
    font-size: 32px;
    margin-bottom: var(--space-sm);
    display: block;
}

/* ==================== Filters ==================== */
.filters-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.filter-chips {
    flex: 1;
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.filter-chip.active {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
    box-shadow: var(--accent-glow);
}

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

.sort-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: background 0.2s ease;
}

.sort-btn:active {
    background: var(--bg-card);
}

/* ==================== Pagination ==================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.pagination.hidden {
    display: none;
}

.pagination-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn:not(:disabled):active {
    transform: scale(0.95);
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
}

.page-info {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-hint);
}

/* ==================== Search ==================== */
.search-page-content {
    padding: var(--space-md);
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-md);
    margin-bottom: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.search-icon {
    color: var(--text-hint);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    padding: var(--space-md);
    background: none;
    border: none;
    font-size: var(--font-size-base);
    outline: none;
    color: var(--text-primary);
}

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

.clear-search-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-hint);
    transition: opacity 0.2s ease;
}

.clear-search-btn.hidden {
    display: none;
}

.search-suggestions {
    margin-bottom: var(--space-lg);
}

.suggestion-section h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-hint);
    margin-bottom: var(--space-sm);
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.suggestion-tag {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.suggestion-tag:active {
    transform: scale(0.95);
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.search-results.hidden {
    display: none;
}

/* ==================== Favorites & Alerts ==================== */
.favorites-list {
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alerts-intro {
    text-align: center;
    padding: var(--space-lg);
    margin: 0 var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.alerts-intro-icon {
    font-size: 40px;
    margin-bottom: var(--space-sm);
}

.alerts-intro p {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.create-alert-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: calc(100% - var(--space-md) * 2);
    margin: 0 var(--space-md) var(--space-lg);
    padding: var(--space-md);
    background: var(--accent-gradient);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--accent-glow);
}

.create-alert-btn:active {
    transform: scale(0.98);
}

.alerts-list {
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alert-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: opacity 0.2s ease;
}

.alert-item.inactive {
    opacity: 0.6;
}

.alert-info h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.alert-filters {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.alert-actions {
    display: flex;
    gap: var(--space-sm);
}

.toggle-btn {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-hint);
    transition: all 0.2s ease;
}

.toggle-btn.active {
    background: var(--success-color);
    color: white;
}

.delete-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--danger-color);
    transition: background 0.2s ease;
}

.delete-btn:active {
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== Alert Form Styles ==================== */
.alert-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    margin: 0 var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
}

.alert-info-banner svg {
    flex-shrink: 0;
    color: var(--accent-color);
}

.alert-info-banner p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Autocomplete Wrapper */
.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
}

.autocomplete-suggestions.show {
    display: block;
}

.autocomplete-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: rgba(16, 185, 129, 0.1);
}

.autocomplete-item:active {
    background: rgba(16, 185, 129, 0.2);
}

.autocomplete-item .brand-highlight {
    color: var(--accent-color);
    font-weight: 500;
}

/* Condition Chips */
.condition-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.condition-chip {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.condition-chip:hover {
    border-color: var(--accent-color);
}

.condition-chip.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

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

/* Form row for side by side fields */
.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row .form-group {
    flex: 1;
}

/* Input with prefix (for currency) */
.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix {
    position: absolute;
    left: var(--space-md);
    color: var(--text-hint);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.input-with-prefix .form-input {
    padding-left: calc(var(--space-md) + 20px);
}

/* Optional label hint */
.form-label .optional {
    font-weight: 400;
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

/* ==================== Empty State ==================== */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.empty-state.hidden {
    display: none;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.empty-state p {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
    margin-bottom: var(--space-lg);
}

/* ==================== Seller Dashboard ==================== */
.seller-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    margin-bottom: var(--space-lg);
}

.stat-card {
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.stat-icon {
    font-size: 24px;
    margin-bottom: var(--space-xs);
}

.stat-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--accent-color);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
}

.create-listing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: calc(100% - var(--space-md) * 2);
    margin: 0 var(--space-md) var(--space-lg);
    padding: var(--space-md);
    background: var(--accent-gradient);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--accent-glow);
}

.create-listing-btn:active {
    transform: scale(0.98);
}

.btn-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.my-listings-section {
    padding: 0 var(--space-md);
}

.my-listings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.status-badge {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.status-badge.sold {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

/* ==================== Admin Page ==================== */
.admin-header {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}

.admin-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: var(--space-xs);
}

.admin-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: 0 var(--space-md);
    margin-bottom: var(--space-lg);
}

.admin-stat-card {
    padding: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.admin-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--accent-color);
}

.admin-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.admin-actions {
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.admin-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-action-btn:hover {
    border-color: var(--accent-color);
    box-shadow: var(--accent-glow);
}

.admin-action-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    font-size: 20px;
}

.admin-action-text {
    flex: 1;
}

.admin-action-text h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.admin-action-text p {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

/* ==================== Forms ==================== */
.modern-form {
    padding: 0 var(--space-md);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.form-label i.mdi {
    font-size: 18px;
    color: var(--primary);
    margin-right: 4px;
}

.form-label .optional,
.form-label .optional-label {
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--text-hint);
}

/* Textarea wrapper with character counter */
.textarea-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.textarea-wrapper .form-textarea {
    padding-bottom: 28px;
}

.char-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 5;
}

.char-counter.warning {
    color: var(--warning-color);
    background: rgba(245, 158, 11, 0.15);
}

.char-counter.limit {
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.15);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    /* Fix for cursor misalignment - avoid transforms */
    transform: none !important;
    -webkit-transform: none !important;
    touch-action: manipulation;
    /* Ensure proper text rendering */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /* Prevent parent transforms from affecting cursor */
    isolation: isolate;
    position: relative;
    z-index: 1;
    will-change: border-color;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b8f82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-hint);
}

.form-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    margin-top: var(--space-xs);
}

.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row .form-group {
    flex: 1;
}

.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
    transform: none;
    -webkit-transform: none;
}

.input-prefix {
    position: absolute;
    left: var(--space-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-hint);
    pointer-events: none;
    transform: none;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.input-with-prefix .form-input {
    padding-left: calc(var(--space-md) + 20px);
}

.input-with-prefix.large .input-prefix {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--accent-color);
}

.input-with-prefix.large .form-input {
    font-size: var(--font-size-xl);
    font-weight: 600;
    padding-left: calc(var(--space-md) + 28px);
}

/* Segment Control */
.segment-control {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 4px;
}

.segment-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.segment-btn.active {
    background: var(--glass-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Category Selector Large */
.category-selector-large {
    display: flex;
    gap: var(--space-md);
}

.category-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.category-option.active {
    border-color: var(--accent-color);
    background: var(--glass-bg-light);
    box-shadow: var(--accent-glow);
}

.category-option:active {
    transform: scale(0.97);
}

.category-option-icon {
    font-size: 40px;
}

.category-option-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* Condition Selector */
.condition-selector {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.condition-btn {
    flex: 1;
    min-width: calc(50% - var(--space-sm));
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.condition-btn.active {
    border-color: var(--accent-color);
    background: var(--glass-bg-light);
    color: var(--accent-color);
}

.condition-btn:active {
    transform: scale(0.97);
}

.dynamic-fields.hidden {
    display: none;
}

/* ==================== Image Upload ==================== */
.image-upload-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.upload-preview {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.upload-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--glass-border);
}

.upload-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-preview-item .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-preview-item .remove-btn:hover {
    background: var(--danger-color);
}

.upload-preview-item.primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, rgba(16, 185, 129, 0.8));
}

.upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--glass-bg-light);
}

.upload-btn svg {
    color: var(--accent-color);
}

.upload-hint {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
}

/* ==================== Geolocation & Phone Section ==================== */
.geolocation-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.geolocation-btn,
.share-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.geolocation-btn:active,
.share-phone-btn:active {
    transform: scale(0.98);
}

.geolocation-btn svg,
.share-phone-btn svg {
    color: var(--accent-color);
}

.location-display,
.phone-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--glass-bg-light);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.location-display svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

.phone-display {
    justify-content: space-between;
}

.remove-phone-btn {
    background: none;
    border: none;
    color: var(--text-hint);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

.remove-phone-btn:hover {
    color: var(--danger-color);
}

.phone-input-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.additional-phone-section {
    margin-top: var(--space-sm);
}

.add-phone-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-xs) 0;
}

.add-phone-btn:hover {
    text-decoration: underline;
}

.additional-phone-input {
    margin-top: var(--space-sm);
}

.loading-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* ==================== Price Input with Suggestion ==================== */
.price-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.suggested-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--glass-bg-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.suggested-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggested-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent-color);
    margin: var(--space-xs) 0;
}

.suggested-hint {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.suggested-hint::before {
    content: '✨';
    font-size: 10px;
}

/* ==================== Buttons ==================== */
.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--accent-gradient);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--accent-glow);
}

.primary-btn:active {
    transform: scale(0.98);
}

.primary-btn.full-width {
    width: 100%;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.secondary-btn:active {
    background: var(--bg-tertiary);
}

/* ==================== Bottom Navigation ==================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding-bottom: var(--safe-area-bottom);
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm) 0;
    position: relative;
    color: var(--text-hint);
    transition: color 0.2s ease;
}

.nav-item.active {
    color: var(--accent-color);
}

.nav-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.nav-indicator {
    position: absolute;
    bottom: calc(var(--safe-area-bottom) + 0);
    width: 20px;
    height: 3px;
    background: var(--accent-color);
    border-radius: var(--radius-full);
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.nav-item.active .nav-indicator {
    opacity: 1;
    transform: scaleX(1);
}

/* ==================== Footer ==================== */
.app-footer {
    position: relative;
    text-align: center;
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + var(--safe-area-bottom));
    margin-top: var(--space-2xl);
    font-size: var(--font-size-xs);
}

.app-footer p {
    margin: 0;
    font-weight: 500;
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.6),
                 0 0 20px rgba(16, 185, 129, 0.4),
                 0 0 30px rgba(16, 185, 129, 0.2);
    letter-spacing: 0.3px;
}

/* ==================== Toast ==================== */
.toast-container {
    position: fixed;
    bottom: calc(80px + var(--safe-area-bottom) + var(--space-md));
    left: var(--space-md);
    right: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    pointer-events: none;
    z-index: 1000;
}

.toast {
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--accent-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg), var(--accent-glow);
    animation: toastIn 0.3s ease forwards;
    pointer-events: auto;
}

.toast.fade-out {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* ==================== Bottom Sheet ==================== */
.bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bottom-sheet.hidden {
    display: none;
}

.bottom-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.bottom-sheet-content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: var(--safe-area-bottom);
    max-height: 80vh;
    animation: slideUp 0.3s ease;
    border: 1px solid var(--glass-border);
    border-bottom: none;
}

.bottom-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    margin: var(--space-md) auto;
}

.bottom-sheet-body {
    padding: 0 var(--space-md) var(--space-md);
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ==================== Loading Spinner ==================== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: var(--space-xl) auto;
}

/* ==================== Utilities ==================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.text-hint {
    color: var(--text-hint);
}

.text-accent {
    color: var(--accent-color);
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ==================== Ripple Effect ==================== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(16, 185, 129, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: var(--radius-full);
    opacity: 0.5;
}

/* ==================== Media Queries ==================== */
@media (max-width: 350px) {
    :root {
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 22px;
        --font-size-3xl: 28px;
    }

    .listings-grid {
        gap: var(--space-sm);
    }

    .category-card {
        padding: var(--space-sm);
    }
}

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

    .brands-grid,
    .models-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== Detail Page Styles ==================== */
.detail-gallery {
    margin: 0 calc(-1 * var(--space-md));
    margin-top: calc(-1 * var(--space-md));
}

.gallery-main {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-large {
    font-size: 80px;
    color: var(--text-hint);
}

.gallery-thumbs {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    overflow-x: auto;
}

.gallery-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
}

.gallery-thumbs img:hover,
.gallery-thumbs img.active {
    opacity: 1;
    border-color: var(--accent-color);
}

.detail-info {
    padding: var(--space-md);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.detail-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    flex: 1;
    color: var(--text-primary);
}

.favorite-btn.large {
    position: static;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.detail-price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: var(--space-md);
}

.detail-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.detail-specs .spec-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-specs .spec-label {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-specs .spec-value {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.detail-badges .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.detail-badges .badge svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.detail-badges .badge.location svg {
    color: var(--accent-color);
}

.detail-badges .badge.views svg {
    color: var(--text-hint);
}

.detail-badges .badge.likes {
    color: var(--text-secondary);
}

.detail-badges .badge.likes svg {
    color: var(--text-hint);
}

.detail-badges .badge.likes.active {
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
}

.detail-badges .badge.likes.active svg {
    color: var(--danger-color);
    fill: var(--danger-color);
}

.detail-section {
    margin-bottom: var(--space-lg);
}

.detail-section h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-hint);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-section p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
}

.seller-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.seller-details {
    flex: 1;
}

.seller-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.seller-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.seller-phone svg {
    flex-shrink: 0;
    color: var(--accent-color);
}

.seller-phone.extra {
    margin-top: 4px;
    color: var(--text-hint);
    opacity: 0.8;
}

/* Contact Seller Bottom Sheet */
.contact-seller-sheet {
    padding: var(--space-md);
}

.seller-info-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.seller-avatar.large {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-2xl);
}

.seller-info-text h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.seller-info-text .seller-username {
    font-size: var(--font-size-sm);
    color: var(--accent-color);
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.contact-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
}

.contact-option:active {
    transform: scale(0.98);
}

.contact-option svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

.contact-option.telegram svg {
    color: #24A1DE;
}

.contact-option .phone-number {
    margin-left: auto;
    color: var(--text-hint);
    font-size: var(--font-size-sm);
}

/* Mark as Sold Modal */
.mark-sold-modal {
    padding: var(--space-md);
}

.mark-sold-modal h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.mark-sold-modal .modal-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-hint);
    margin-bottom: var(--space-lg);
}

.sold-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.toggle-buttons {
    display: flex;
    gap: var(--space-sm);
}

.toggle-buttons .toggle-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-buttons .toggle-btn.active {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
}

/* Seller Listing Styles */
.listing-item.seller-listing {
    cursor: pointer;
}

.listing-actions-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 80px;
}

.mark-sold-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-md);
    color: var(--accent-color);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-sold-btn:hover {
    background: var(--accent-color);
    color: white;
}

.mark-sold-btn svg {
    flex-shrink: 0;
}

.status-badge.sold {
    background: var(--success-color);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.listing-stats {
    display: flex;
    align-items: center;
    gap: 4px;
}

.listing-stats svg {
    opacity: 0.6;
}

/* Swipe to Delete Styles - Only for SOLD listings */
.swipe-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
}

.swipe-delete-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show red delete bg when card is being swiped */
.swipe-container.swiping .swipe-delete-bg {
    opacity: 1;
}

.swipe-delete-bg svg {
    width: 28px;
    height: 28px;
    color: white;
}

/* Swipeable sold card */
.swipe-container .listing-item.swipeable {
    position: relative;
    z-index: 1;
    transform: translateX(0);
    will-change: transform;
    touch-action: pan-y;
}

/* Swipe hint text */
.swipe-hint {
    font-size: var(--font-size-xs);
    color: var(--text-hint);
    opacity: 0.7;
}

.swipeable.swiped {
    transform: translateX(-100px);
}

/* Sold listing styling - transparent like active listings */
.listing-item.listing-sold {
    position: relative;
}

.listing-item.listing-sold .listing-thumb {
    position: relative;
}

.listing-item.listing-sold .listing-thumb img {
    filter: grayscale(100%);
}

/* Sold overlay on image with diagonal text */
.sold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

/* Disable clicking on sold listings */
.listing-item.listing-sold {
    pointer-events: none;
    opacity: 0.7;
}

/* But allow swipe on the container */
.swipe-container {
    pointer-events: auto;
}

.swipe-container .listing-item.listing-sold.swipeable {
    pointer-events: auto;
    cursor: default;
}

.sold-overlay span {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 1px;
    transform: rotate(-15deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.detail-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + var(--safe-area-bottom));
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    z-index: 101;
}

/* ==================== Header Actions ==================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.globe-btn {
    color: var(--accent-color);
}

.globe-btn:hover {
    background: var(--glass-bg-light);
}

/* Language Badge - shows current language on non-home pages */
.lang-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px var(--accent-color-50),
                0 0 20px var(--accent-color-30),
                inset 0 0 8px var(--accent-color-20);
    animation: langBadgeGlow 2s ease-in-out infinite alternate;
}

@keyframes langBadgeGlow {
    0% {
        box-shadow: 0 0 8px var(--accent-color-50),
                    0 0 16px var(--accent-color-30);
    }
    100% {
        box-shadow: 0 0 16px var(--accent-color),
                    0 0 24px var(--accent-color-50),
                    0 0 32px var(--accent-color-30);
    }
}

.lang-badge.hidden {
    display: none;
}

/* ==================== Stats Section ==================== */
.stats-section {
    margin-top: calc(-1 * var(--space-md));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.stats-grid.stats-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    text-align: center;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--accent-glow);
}

.stat-box .stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
}

.stat-box .cars-stat {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: var(--accent-color);
}

.stat-box .electronics-stat {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #6366f1;
}

.stat-box .sold-stat {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: var(--warning-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.stat-info .stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* ==================== Language Modal (Updated) ==================== */
.language-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.language-modal-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.language-modal-header .modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-light);
    border-radius: var(--radius-full);
    color: var(--accent-color);
}

.language-modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.language-btn .flag-icon {
    width: 32px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.language-btn .flag-icon svg {
    width: 100%;
    height: 100%;
}

.language-btn .check-icon {
    margin-left: auto;
    color: var(--accent-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.language-btn.active .check-icon {
    opacity: 1;
}

/* ==================== Search Filters Modal ==================== */
.search-filters-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.search-filters-modal.hidden {
    display: none;
}

.search-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.search-filters-content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    border: 1px solid var(--glass-border);
    border-bottom: none;
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--glass-border);
}

.filters-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.close-filters-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-hint);
    transition: background 0.2s ease, color 0.2s ease;
}

.close-filters-btn:hover,
.close-filters-btn:active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.filters-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.filter-group {
    margin-bottom: var(--space-lg);
}

.filter-group > label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.filter-tabs {
    display: flex;
    gap: var(--space-sm);
}

.filter-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    text-align: center;
}

.filter-tab.active {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
    box-shadow: var(--accent-glow);
}

.filter-tab:active {
    transform: scale(0.97);
}

.car-filters {
    padding: var(--space-md);
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
}

.car-filters > label {
    margin-top: var(--space-md);
}

.car-filters > label:first-child {
    margin-top: 0;
}

.filter-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b8f82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.range-inputs .input-with-prefix {
    flex: 1;
}

.range-separator {
    color: var(--text-hint);
    font-weight: 500;
}

.filter-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.filter-input::placeholder {
    color: var(--text-hint);
}

.filter-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.filter-chip-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.filter-chip-btn.active {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: white;
}

.filter-chip-btn:active {
    transform: scale(0.95);
}

.filters-footer {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-md) + var(--safe-area-bottom));
    border-top: 1px solid var(--glass-border);
    background: var(--bg-secondary);
}

.reset-filters-btn {
    flex: 1;
    padding: var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.reset-filters-btn:active {
    background: var(--bg-tertiary);
}

.apply-filters-btn {
    flex: 2;
    padding: var(--space-md);
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--accent-glow);
}

.apply-filters-btn:active {
    transform: scale(0.98);
}

/* ==================== Greeting Section ==================== */
.greeting-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + 60px);
}

.greeting-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.greeting-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.greeting-text {
    display: flex;
    flex-direction: column;
}

.greeting-hello {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.greeting-username {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.greeting-location {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.greeting-location:active {
    transform: scale(0.95);
    background: var(--glass-bg-light);
}

/* ==================== Nearby Section ==================== */
.nearby-section {
    padding-bottom: var(--space-xl);
}

.nearby-location-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nearby-location-display:active {
    transform: scale(0.98);
    background: var(--glass-bg-light);
}

.nearby-location-display span {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.notify-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--accent-color);
    transition: all var(--transition-fast);
}

.notify-btn:active {
    transform: scale(0.95);
}

.distance-slider-container {
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
}

.distance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.distance-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.distance-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--accent-color);
}

.slider-wrapper {
    position: relative;
    padding: 5px 10px;
}

.slider-ticks {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
    height: 20px;
}

.slider-ticks::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #2d3748;
    transform: translateY(-50%);
    border-radius: 1px;
}

.slider-ticks .tick {
    width: 2px;
    height: 14px;
    background: #2d3748;
    border-radius: 1px;
    position: relative;
    z-index: 2;
    align-self: center;
}

.distance-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: calc(100% - 20px);
    height: 20px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 3;
    margin: 0 10px;
    padding: 0;
}

.distance-slider::-webkit-slider-track {
    background: transparent;
    height: 20px;
    border: none;
}

.distance-slider::-moz-range-track {
    background: transparent;
    height: 20px;
    border: none;
}

.distance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-gradient);
    box-shadow: var(--accent-glow);
    cursor: pointer;
    margin-top: 0;
}

.distance-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--accent-gradient);
    cursor: pointer;
}

.distance-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    font-size: 10px;
    color: var(--text-hint);
    padding: 0 10px;
}

.distance-marks span {
    text-align: center;
    width: 0;
    display: flex;
    justify-content: center;
}

.distance-marks span:last-child {
    font-size: 9px;
}

/* ==================== Modal Styles ==================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 380px;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    animation: modalSlideUp 0.3s ease;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.modal-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.modal-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-sm);
}

/* Location Modal */
.location-option-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.location-option-btn.primary {
    background: var(--accent-gradient);
    color: white;
}

.location-option-btn:active {
    transform: scale(0.98);
}

.location-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--text-hint);
    font-size: var(--font-size-sm);
}

.location-divider::before,
.location-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--glass-border);
}

.location-input-group {
    display: flex;
    gap: var(--space-sm);
}

.location-input-group .form-input {
    flex: 1;
}

.location-save-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Location input wrapper for listing form */
.location-input-wrapper {
    display: flex;
    gap: var(--space-sm);
}

.location-input-wrapper .form-input {
    flex: 1;
}

.location-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-btn:active {
    background: var(--glass-bg-light);
}

/* ==================== Color Selector ==================== */
.color-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.color-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.color-btn.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.color-btn[data-color="White"].active::after,
.color-btn[data-color="Silver"].active::after,
.color-btn[data-color="Yellow"].active::after,
.color-btn[data-color="Beige"].active::after {
    color: #333;
    text-shadow: none;
}

/* Color indicator on listing cards */
.listing-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* Distance badge on listing cards */
.listing-distance-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ==================== Brand Card with Icon ==================== */
/* Note: Main brand-card styles are defined earlier with .model-card etc. */
/* This section handles icon-specific overrides */

.brand-card {
    padding-bottom: 55px;
}

.brand-icon {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    padding: 6px;
}

.brand-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(1.2);
    opacity: 0.9;
    transition: all 0.2s ease;
}

.brand-card:hover .brand-icon img {
    filter: brightness(1.4);
    opacity: 1;
    transform: scale(1.1);
}

.brand-card:hover .brand-icon {
    background: rgba(16, 185, 129, 0.2);
}

/* ==================== Primary Button Full Width ==================== */
.primary-btn.full-width {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: white;
    box-shadow: var(--accent-glow);
}

.primary-btn.full-width:active {
    transform: scale(0.98);
}

/* ==================== Mobile Form Input Fixes ==================== */
/* Fix for touch devices - prevent zoom and improve responsiveness */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap target size */
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 48px;
        padding: 14px 16px;
    }

    /* Ensure select dropdowns are more touch-friendly */
    .form-select {
        background-size: 16px;
        padding-right: 48px;
    }

    /* Improve condition/color button touch targets */
    .condition-btn,
    .color-btn {
        min-height: 48px;
    }

    /* Fix filter inputs */
    .filter-input,
    .filter-select {
        min-height: 44px;
        padding: 12px 16px;
    }
}

/* Ensure inputs don't have transform issues */
.form-input:active,
.form-select:active,
.form-textarea:active {
    transform: none;
}

/* Fix for select element native dropdown */
.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px;
}

/* Prevent any parent transforms affecting form elements */
.modern-form {
    transform: none !important;
    will-change: auto;
    /* Prevent any transforms from affecting child inputs */
    perspective: none;
    -webkit-perspective: none;
}

/* Force hardware acceleration on form container */
.page:has(.modern-form) {
    -webkit-overflow-scrolling: touch;
    /* Ensure no transforms on page level */
    transform: none;
}

/* Ensure form groups don't have transforms */
.modern-form .form-group {
    transform: none;
    -webkit-transform: none;
}

/* ==================== Geolocation Prompt ==================== */
.geolocation-prompt {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.geolocation-prompt .geolocation-icon {
    margin-bottom: var(--space-md);
}

.geolocation-prompt .geolocation-icon svg {
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
}

.geolocation-prompt h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.geolocation-prompt .geolocation-benefit {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.geolocation-prompt .geolocation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.geolocation-prompt .primary-btn {
    width: 100%;
    padding: var(--space-md);
    font-weight: 600;
}

.geolocation-prompt .secondary-btn {
    width: 100%;
    padding: var(--space-md);
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.geolocation-prompt .secondary-btn:active {
    background: var(--glass-bg-light);
}

/* ==================== Contact Share Prompt ==================== */
.contact-share-prompt {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.contact-share-prompt .prompt-icon {
    margin-bottom: var(--space-md);
}

.contact-share-prompt .prompt-icon svg {
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
}

.contact-share-prompt h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.contact-share-prompt .prompt-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.contact-share-prompt .prompt-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.contact-share-prompt .primary-btn {
    width: 100%;
    padding: var(--space-md);
    font-weight: 600;
}

.contact-share-prompt .secondary-btn {
    width: 100%;
    padding: var(--space-md);
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-share-prompt .secondary-btn:active {
    background: var(--glass-bg-light);
}

/* ==================== Hidden Contact Styles ==================== */
.seller-phone.hidden-contact {
    color: var(--text-hint);
    opacity: 0.7;
}

.seller-phone.hidden-contact svg {
    opacity: 0.6;
}

.seller-phone .masked-phone {
    font-family: monospace;
    letter-spacing: 1px;
    color: var(--text-hint);
}

/* ==================== Enhanced Color Selector ==================== */
.color-selector-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.color-main-row,
.color-secondary-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.color-btn-enhanced {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    padding: 0;
}

.color-btn-enhanced:hover {
    transform: scale(1.1);
}

.color-btn-enhanced.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.color-btn-enhanced.active::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Light colors need dark checkmark */
.color-btn-enhanced[data-color="White"].active::after,
.color-btn-enhanced[data-color="Silver"].active::after,
.color-btn-enhanced[data-color="Beige"].active::after,
.color-btn-enhanced[data-color="Yellow"].active::after,
.color-btn-enhanced[data-color="Pearl"].active::after {
    color: #333;
    text-shadow: none;
}

.more-colors-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    width: fit-content;
}

.more-colors-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.more-colors-btn svg {
    transition: transform var(--transition-base);
}

/* ==================== Mileage Input with Suffix ==================== */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
    transform: none;
    -webkit-transform: none;
}

.input-with-suffix .form-input {
    padding-right: 50px;
}

.input-suffix {
    position: absolute;
    right: var(--space-md);
    color: var(--text-hint);
    font-size: var(--font-size-sm);
    pointer-events: none;
    transform: none;
    pointer-events: none;
}

/* ==================== Engine Selector with Turbo ==================== */
.engine-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.engine-selector .form-select {
    flex: 1;
    min-width: 120px;
}

.engine-custom-input {
    width: 80px !important;
    flex: 0 0 auto !important;
    text-align: center;
}

.engine-custom-input.hidden {
    display: none !important;
}

.turbo-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.turbo-checkbox.hidden {
    display: none !important;
}

.turbo-checkbox:hover {
    border-color: var(--accent-color);
}

.turbo-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.turbo-checkbox .turbo-icon {
    font-size: 20px;
    color: var(--text-hint);
    transition: color var(--transition-base);
}

.turbo-checkbox .turbo-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.turbo-checkbox:has(input:checked) {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-color);
}

.turbo-checkbox:has(input:checked) .turbo-label {
    color: var(--accent-color);
}

.turbo-checkbox:has(input:checked) .turbo-icon {
    color: var(--accent-color);
}

/* ==================== Accessories Section ==================== */
.accessories-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.accessories-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.accessories-toggle:hover {
    border-color: var(--accent-color);
}

.accessories-toggle .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--accent-color);
}

.accessories-toggle .toggle-icon svg {
    transition: transform var(--transition-base);
}

.accessories-toggle .selected-count {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--text-hint);
}

.accessories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.accessory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 80px;
    background: var(--glass-bg);
}

.accessory-item:hover {
    border-color: var(--accent-color);
}

.accessory-item.selected {
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.15);
}

.accessory-item.selected .accessory-icon {
    color: var(--accent-color);
}

.accessory-icon {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.accessory-icon svg {
    width: 100%;
    height: 100%;
}

.accessory-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive: 2 columns on very small screens */
@media (max-width: 320px) {
    .accessories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== Trim and Engine Select Animation ==================== */
#trim-group,
#engine-group {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== Light Mode Styles for New Components ==================== */
[data-theme="light"] .color-selector-enhanced {
    /* No changes needed */
}

[data-theme="light"] .more-colors-btn {
    background: rgba(200, 200, 200, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .more-colors-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

[data-theme="light"] .accessories-toggle {
    background: rgba(200, 200, 200, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .accessories-grid {
    background: rgba(200, 200, 200, 0.2);
}

[data-theme="light"] .accessory-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .accessory-item.selected {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-color);
}

[data-theme="light"] .accessory-icon {
    color: #555;
}

[data-theme="light"] .accessory-item.selected .accessory-icon {
    color: var(--accent-color);
}

[data-theme="light"] .accessory-label {
    color: #444;
}

[data-theme="light"] .input-suffix {
    color: #666;
}

/* ==================== FULLSCREEN IMAGE GALLERY ==================== */

.image-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.image-gallery-modal.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gallery-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: -1;
    cursor: pointer;
}

.gallery-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.gallery-counter {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    padding: 6px 12px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    backdrop-filter: blur(8px);
}

.gallery-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.5);
    border-radius: 24px;
    padding: 4px 6px;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.gallery-zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.gallery-zoom-btn:hover {
    background: rgba(255,255,255,0.2);
}

.gallery-zoom-btn:active {
    transform: scale(0.95);
    background: rgba(255,255,255,0.3);
}

.gallery-zoom-level {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    min-width: 32px;
    text-align: center;
}

.close-gallery-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.close-gallery-btn:hover {
    background: rgba(0,0,0,0.6);
}

.gallery-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    padding: 60px 0 80px;
}

.gallery-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 60px;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.gallery-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.2s ease;
    transform-origin: center center;
    touch-action: none;
}

.gallery-image-container img.zooming {
    transition: none;
}

.gallery-image-container img.zoomed {
    cursor: grab;
}

.gallery-image-container img.zoomed:active {
    cursor: grabbing;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.gallery-arrow:hover {
    background: rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.1);
}

.gallery-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.gallery-arrow.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.gallery-prev {
    left: 16px;
}

.gallery-next {
    right: 16px;
}

/* Mobile adjustments for arrows */
@media (max-width: 600px) {
    .gallery-arrow {
        width: 44px;
        height: 44px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

    .gallery-image-container {
        padding: 0 50px;
    }

    .gallery-arrow svg {
        width: 24px;
        height: 24px;
    }
}

.gallery-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* Detail page gallery click hint */
.gallery-main {
    position: relative;
    cursor: pointer;
}

.gallery-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    transition: background 0.2s ease;
}

.gallery-main:active::after {
    background: rgba(255,255,255,0.1);
}

.gallery-counter-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
}

/* ==================== ACCESSORIES DISPLAY ON DETAIL PAGE ==================== */

.detail-accessories {
    margin-top: 16px;
}

.detail-accessories h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.accessories-display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 400px) {
    .accessories-display-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.accessory-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent-color);
}

.accessory-badge .mdi {
    font-size: 16px;
}

/* Light mode adjustments */
[data-theme="light"] .accessory-badge {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

/* ==================== MDI ICON STYLES FOR ACCESSORIES FORM ==================== */

.accessory-item .mdi {
    font-size: 28px;
    line-height: 1;
}

.accessory-item.selected .mdi {
    color: var(--accent-color);
}

/* ==================== SUCCESS MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: var(--space-lg);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.success-modal {
    text-align: center;
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    max-width: 320px;
    width: 100%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .success-modal {
    transform: scale(1) translateY(0);
}

.success-icon {
    margin-bottom: var(--space-lg);
    animation: successPulse 0.6s ease;
}

@keyframes successPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.success-icon svg {
    color: var(--accent-color);
}

.success-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.success-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.success-actions {
    display: flex;
    gap: var(--space-md);
}

.success-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.success-btn.home-btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

.success-btn.home-btn:active {
    transform: scale(0.95);
}

.success-btn.listings-btn {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.success-btn.listings-btn:active {
    transform: scale(0.95);
    border-color: var(--accent-color);
}

/* ==================== Promo Code Section ==================== */
.promo-code-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.promo-code-status {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.promo-remaining {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 6px 12px;
    background: var(--accent-gradient);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--accent-glow);
}

.promo-badge.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.promo-badge.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.promo-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.promo-code-input-wrapper {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.promo-input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.promo-input::placeholder {
    letter-spacing: 3px;
    color: var(--text-hint);
}

.promo-generate-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.promo-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--accent-glow);
}

.promo-generate-btn:active {
    transform: scale(0.95);
}

.promo-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.promo-generate-btn i {
    font-size: 18px;
}

.promo-code-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    color: var(--success-color);
    font-size: var(--font-size-sm);
}

.promo-code-info i {
    font-size: 20px;
}

.promo-code-error {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: var(--danger-color);
    font-size: var(--font-size-sm);
}

.promo-code-error i {
    font-size: 20px;
}

/* Light mode adjustments for promo section */
[data-theme="light"] .promo-generate-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .promo-generate-btn:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .promo-code-info {
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .promo-code-error {
    background: rgba(239, 68, 68, 0.1);
}