/* Capital Motors - Main Stylesheet */

/* Base & Typography */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0A0A0A;
    color: white;
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
    font-family: 'Space Grotesk', sans-serif;
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Brand Colors */
.brand-red {
    color: #E31837;
}

.bg-brand-red {
    background-color: #E31837;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111111; }
::-webkit-scrollbar-thumb { background: #E31837; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c0142f; }
* { scrollbar-width: thin; scrollbar-color: #E31837 #111111; }

/* Button Classes */
.btn-red {
    background-color: #E31837;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.btn-red:hover { background-color: #b91232; transform: translateY(-1px); }
.btn-red:active { transform: translateY(0); }

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-badge.available { background-color: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.status-badge.reserved  { background-color: rgba(234,179,8,0.15);  color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.status-badge.sold      { background-color: rgba(227,24,55,0.15);  color: #E31837; border: 1px solid rgba(227,24,55,0.3); }

/* Discount Badge */
.discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    background-color: rgba(227, 24, 55, 0.2);
    color: #E31837;
    border: 1px solid rgba(227, 24, 55, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Discounted price display */
.price-original {
    text-decoration: line-through;
    opacity: 0.45;
    font-size: 0.8em;
    font-weight: 500;
}
.price-discounted {
    color: #E31837;
    font-weight: 800;
}

/* Bestand Badge */
.bestand-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Transition Utilities */
.transition-fast   { transition: all 0.15s ease; }
.transition-normal { transition: all 0.25s ease; }
.transition-slow   { transition: all 0.40s ease; }

.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(227, 24, 55, 0.2);
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
body.light-mode {
    background-color: #F2F1EC !important;
    color: #1A1A1A !important;
}

/* Scrollbar */
body.light-mode::-webkit-scrollbar-track { background: #E0DFD9; }
body.light-mode * { scrollbar-color: #E31837 #E0DFD9; }

/* Navigation */
body.light-mode nav {
    background-color: rgba(242, 241, 236, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode nav a:not([class*="bg-"]):not(.btn-red) {
    color: #1A1A1A !important;
}
body.light-mode nav span {
    color: #1A1A1A !important;
}

/* Glass cards & panels */
body.light-mode .glass-effect {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* Dark section backgrounds */
body.light-mode section {
    background-color: transparent !important;
}
body.light-mode footer {
    background-color: #E6E5E0 !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Text overrides */
body.light-mode .text-white { color: #1A1A1A !important; }
body.light-mode h1, body.light-mode h2,
body.light-mode h3, body.light-mode h4 { color: #1A1A1A !important; }

/* Opacity text variants — Tailwind uses the CSS variable --tw-text-opacity */
body.light-mode [class*="text-white/"],
body.light-mode .text-white\/60,
body.light-mode .text-white\/40,
body.light-mode .text-white\/30,
body.light-mode .text-white\/20 {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Chip / tag backgrounds */
body.light-mode [class*="bg-white/"] {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Border overrides */
body.light-mode [class*="border-white/"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Form inputs */
body.light-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]),
body.light-mode select,
body.light-mode textarea {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1A1A1A !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: rgba(0, 0, 0, 0.3) !important; }

/* Filter buttons in katalog */
body.light-mode .glass-effect form button:not([class*="bg-\[#E31837\]"]):not(.bg-brand-red) {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #1A1A1A !important;
}

/* Vehicle spec chips */
body.light-mode .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Theme toggle button */
#themeToggle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease;
    color: white;
}
#themeToggle:hover { background: rgba(255, 255, 255, 0.15); }
body.light-mode #themeToggle {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1A1A1A !important;
}