/* RedFox Auto noir theme — shared by the entry, service and parts pages. */
:root {
    color-scheme: dark;
    --bg-void: #050505;
    --bg-primary: #090909;
    --bg-secondary: #111111;
    --bg-tertiary: #181818;
    --bg-card: #111111;
    --bg-card-hover: #181818;
    --glass-bg: rgba(10, 10, 10, 0.82);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-primary: #f5f5f5;
    --text-secondary: rgba(245, 245, 245, 0.68);
    --text-muted: rgba(245, 245, 245, 0.42);
    --accent-red: #c9212b;
    --accent-red-dim: rgba(201, 33, 43, 0.12);
    --accent-red-glow: rgba(201, 33, 43, 0.2);
    --accent-blue: #e2e2e2;
    --accent-blue-dim: rgba(255, 255, 255, 0.08);
    --accent-blue-glow: rgba(255, 255, 255, 0.11);
    --accent-light: #efefef;
    --accent-gray: #a3a3a3;
    --accent-green: #ededed;
    --accent-orange: #bdbdbd;
    --accent-glow: rgba(201, 33, 43, 0.2);
    --gradient-accent: linear-gradient(135deg, #d2d2d2 0%, #8e8e8e 100%);
}

html {
    background: #050505;
}

body {
    background:
        radial-gradient(ellipse 70% 34% at 50% -12%, rgba(255, 255, 255, 0.075), transparent 72%),
        radial-gradient(ellipse 42% 30% at 12% 78%, rgba(201, 33, 43, 0.035), transparent 70%),
        #070707 !important;
    color: var(--text-primary);
}

::selection {
    color: #fff;
    background: rgba(201, 33, 43, 0.72);
}

::-webkit-scrollbar-track { background: #090909 !important; }
::-webkit-scrollbar-thumb { background: #555 !important; }
::-webkit-scrollbar-thumb:hover { background: #777 !important; }

.header,
.top-bar {
    background: rgba(7, 7, 7, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.logo-icon {
    background: transparent !important;
    color: #f1f1f1 !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}

.logo-icon svg { color: #f1f1f1 !important; }
.logo-text span,
.logo-name span { color: var(--accent-red) !important; }

.header-badge,
.panel-tag,
.hero-badge,
.section-label {
    color: #d7d7d7 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea,
.search-bar,
.calc-select,
.booking-form-input,
.booking-form-select {
    background-color: rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #f3f3f3 !important;
}

input:focus,
select:focus,
textarea:focus,
.search-bar:focus-within,
.calc-select:focus {
    border-color: rgba(255, 255, 255, 0.46) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

/* Entry page */
.panel-sto::before,
.panel-shop::before {
    background: radial-gradient(ellipse 120% 80% at 50% 60%, rgba(255, 255, 255, 0.06), transparent 70%) !important;
}

.split-panel:first-child {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.018), transparent 58%);
}

.split-panel:last-child {
    background: linear-gradient(210deg, rgba(255, 255, 255, 0.025), transparent 58%);
}

.panel-divider-line {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.38), transparent) !important;
}

.panel-icon-ring,
.panel-shop .panel-icon-ring {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
}

.split-divider::after {
    background: linear-gradient(180deg, #555, #d8d8d8, #555) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.12) !important;
}

.panel-icon,
.panel-sto .panel-icon,
.panel-shop .panel-icon,
.panel-cta,
.panel-sto .panel-cta,
.panel-shop .panel-cta {
    color: #ededed !important;
}

.panel-icon-ring::after,
.panel-shop .panel-icon-ring::after {
    background: #cfcfcf !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.28) !important;
}

.ripple-overlay.sto,
.ripple-overlay.shop {
    background: radial-gradient(circle at var(--rx) var(--ry), rgba(255, 255, 255, 0.13) 0%, #050505 70%) !important;
}

/* Service page */
.hero-bg-image img,
.work-category-image img {
    filter: none;
}

.hero-bg-overlay {
    background: linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.75) 44%, rgba(5, 5, 5, 0.28) 100%) !important;
}

.hero-fullwidth::before,
.section-first,
.section-dark,
.section-promo,
.section {
    background-color: transparent !important;
}

.section-dark,
.section-promo {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.work-category,
.calculator-card,
.calculator-form,
.calculator-result,
.contact-form,
.contact-info,
.map-wrapper,
.calc-feature,
.booking-modal,
.booking-notice {
    background: rgba(8, 8, 8, 0.42) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;
}

.work-category:hover {
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28) !important;
}

.btn-primary,
.work-book-btn,
.vin-form-submit,
.reg-submit,
.search-btn,
.calc-cta {
    background: transparent !important;
    color: #f2f2f2 !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.work-book-btn:hover,
.vin-form-submit:hover,
.reg-submit:hover,
.search-btn:hover,
.calc-cta:hover {
    background: #fff !important;
    color: #050505 !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

.btn-secondary,
.work-calc-link,
.back-btn,
.header-auth-btn,
.header-cart-btn {
    color: #dedede !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

.btn-secondary:hover,
.work-calc-link:hover,
.back-btn:hover,
.header-auth-btn:hover,
.header-cart-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
}

.hero-promo-code,
.text-red,
.work-note,
.calc-result-total,
.calc-info-value,
.contact-icon,
.section-title em {
    color: var(--accent-red) !important;
}

.hero-badge-dot,
.cart-badge {
    background: var(--accent-red) !important;
}

.hero-arrow:hover,
.hero-dot.active {
    background: rgba(201, 33, 43, 0.72) !important;
    border-color: rgba(201, 33, 43, 0.85) !important;
}

.calc-notice,
.calc-notice-promo,
.work-calc-link-promo {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.27) !important;
    color: var(--text-secondary) !important;
}

.calc-checkbox input:checked + .calc-checkbox-mark {
    background: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
}

.messenger-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #e8e8e8 !important;
}

/* Parts page */
.search-hero h1 em {
    background: none !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
}

.info-notice {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.27) !important;
    border-left-color: var(--accent-red) !important;
}

.info-notice-title,
.info-notice a,
.brand-price,
.td-price,
.cross-price {
    color: #ededed !important;
}

.brand-card,
.offers-table-wrap,
.vin-block,
.contact-block,
.reg-modal,
#loginModal > div {
    background: rgba(8, 8, 8, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.brand-card:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.cta-btn,
.cart-add-btn {
    color: #e8e8e8 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    box-shadow: none !important;
}

.cta-btn:hover,
.cart-add-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
}

.vin-form-auto {
    color: #e9e9e9 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.offers-table thead,
.cross-group-header,
.used-section-header {
    background: rgba(255, 255, 255, 0.035) !important;
}

.used-badge,
.count {
    color: #dedede !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.toast.success,
.toast.info,
.toast.error {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
}


@media (max-width: 768px) {
    .hero-bg-overlay {
        background: linear-gradient(180deg, rgba(5, 5, 5, 0.48), rgba(5, 5, 5, 0.92)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}