/* ==========================================
   NORWAY AUTO - Milk & Orange Theme
   Light Creamy Design with Orange Accents
   ========================================== */

/* ==================== ROOT VARIABLES - MILK & ORANGE ==================== */
:root {
    /* PRIMARY PALETTE - MILK & CREAM */
    --milk-white: #FFFEF9;           /* Молочно-білий */
    --milk-cream: #FFF9F0;           /* Кремовий */
    --milk-light: #FFF5E6;           /* Світлий крем */
    --milk-beige: #F5EFE7;           /* Бежевий */
    
    /* ORANGE PALETTE - ACCENTS */
    --orange-primary: #FF6B35;       /* Яскравий помаранчевий */
    --orange-hover: #FF5722;         /* Темний помаранчевий */
    --orange-light: #FF8A65;         /* Світлий помаранчевий */
    --orange-soft: #FFE0D6;          /* М'який помаранчевий */
    
    /* TEXT COLORS */
    --text-primary: #2D2D2D;         /* Темно-сірий */
    --text-secondary: #5A5A5A;       /* Сірий */
    --text-muted: #8B8B8B;           /* Світло-сірий */
    
    /* BORDERS & DIVIDERS */
    --border-light: #E8E1D5;         /* Світла межа */
    --border-medium: #D4C9B8;        /* Середня межа */
    
    /* SHADOWS - SOFT & SUBTLE */
    --shadow-soft: 0 2px 8px rgba(255, 107, 53, 0.08);
    --shadow-medium: 0 4px 16px rgba(255, 107, 53, 0.12);
    --shadow-large: 0 8px 32px rgba(255, 107, 53, 0.16);
    --shadow-orange: 0 4px 20px rgba(255, 107, 53, 0.25);
}

/* ==================== GLOBAL OVERRIDES ==================== */
body {
    background: var(--milk-white) !important;
    color: var(--text-primary) !important;
}

/* ==================== NAVIGATION ==================== */
.navbar,
nav {
    background: var(--milk-cream) !important;
    border-bottom: 2px solid var(--border-light) !important;
    box-shadow: var(--shadow-soft) !important;
}

.navbar-brand,
.nav-link,
nav a {
    color: var(--text-primary) !important;
}

.nav-link:hover,
nav a:hover {
    color: var(--orange-primary) !important;
}

.nav-link.active,
nav a.active {
    color: var(--orange-primary) !important;
}

/* ==================== BUTTONS - ORANGE ==================== */
.btn-primary,
button[type="submit"],
.cta-button,
.btn-orange {
    background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-hover) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-orange) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.cta-button:hover {
    background: linear-gradient(135deg, var(--orange-hover) 0%, #E64A19 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(255, 107, 53, 0.35) !important;
}

.btn-outline,
.btn-secondary {
    background: transparent !important;
    color: var(--orange-primary) !important;
    border: 2px solid var(--orange-primary) !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: var(--orange-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* ==================== HERO SECTION ==================== */
.hero,
.hero-section,
section[class*="hero"] {
    background: linear-gradient(135deg, var(--milk-cream) 0%, var(--milk-light) 100%) !important;
    color: var(--text-primary) !important;
}

.hero h1,
.hero-title {
    color: var(--text-primary) !important;
    text-shadow: 2px 2px 4px rgba(255, 107, 53, 0.1) !important;
}

.hero p,
.hero-subtitle {
    color: var(--text-secondary) !important;
}

/* ==================== CARDS ==================== */
.car-card,
.card,
.product-card {
    background: #FFFFFF !important;
    border: 2px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s ease !important;
}

.car-card:hover,
.card:hover {
    border-color: var(--orange-soft) !important;
    box-shadow: var(--shadow-medium) !important;
    transform: translateY(-4px) !important;
}

.car-card h3,
.card-title {
    color: var(--text-primary) !important;
}

.car-card p,
.card-text {
    color: var(--text-secondary) !important;
}

.car-price,
.price {
    color: var(--orange-primary) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

/* ==================== BADGES ==================== */
.badge,
.tag,
.car-badge {
    background: var(--orange-primary) !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.badge-featured,
.featured-badge {
    background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-light) 100%) !important;
    box-shadow: var(--shadow-orange) !important;
}

/* ==================== FORMS ==================== */
input,
textarea,
select {
    background: #FFFFFF !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--orange-primary) !important;
    box-shadow: 0 0 0 4px var(--orange-soft) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* ==================== SECTIONS ==================== */
section {
    background: var(--milk-white) !important;
}

/* NOTE: intentionally no automatic even/odd section alternation — each
   section defines its own intentional background color (see page-specific
   <style> blocks); auto-alternating clashed with that design. */

.section-title,
h2 {
    color: var(--text-primary) !important;
}

.section-subtitle,
.lead {
    color: var(--text-secondary) !important;
}

/* ==================== FOOTER ==================== */
footer {
    background: var(--milk-beige) !important;
    color: var(--text-primary) !important;
    border-top: 3px solid var(--orange-primary) !important;
}

footer a {
    color: var(--text-secondary) !important;
    transition: color 0.3s ease !important;
}

footer a:hover {
    color: var(--orange-primary) !important;
}

/* ==================== MODAL ==================== */
.modal-content,
.modal {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-large) !important;
}

.modal-header {
    background: var(--milk-cream) !important;
    border-bottom: 2px solid var(--border-light) !important;
    border-radius: 20px 20px 0 0 !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-body {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
}

.close,
.btn-close {
    color: var(--text-secondary) !important;
}

/* ==================== LINKS ==================== */
a {
    color: var(--orange-primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: var(--orange-hover) !important;
    text-decoration: underline !important;
}

/* ==================== TABLES ==================== */
table {
    background: #FFFFFF !important;
    border: 2px solid var(--border-light) !important;
}

thead {
    background: var(--milk-cream) !important;
}

th {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

tr:hover {
    background: var(--milk-light) !important;
}

/* ==================== STATS & NUMBERS ==================== */
.stat-number,
.counter {
    color: var(--orange-primary) !important;
    font-weight: 800 !important;
}

.stat-label {
    color: var(--text-secondary) !important;
}

/* ==================== TESTIMONIALS ==================== */
.testimonial,
.review-card {
    background: #FFFFFF !important;
    border-left: 4px solid var(--orange-primary) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-soft) !important;
}

.testimonial-author {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.testimonial-text {
    color: var(--text-secondary) !important;
}

/* ==================== ICONS ==================== */
.icon,
i {
    color: var(--orange-primary) !important;
}

.icon-circle {
    background: var(--orange-soft) !important;
    padding: 16px !important;
    border-radius: 50% !important;
}

/* ==================== PAGINATION ==================== */
.pagination a,
.page-link {
    background: #FFFFFF !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.pagination a.active,
.page-link.active {
    background: var(--orange-primary) !important;
    border-color: var(--orange-primary) !important;
    color: #FFFFFF !important;
}

.pagination a:hover,
.page-link:hover {
    background: var(--orange-soft) !important;
    border-color: var(--orange-primary) !important;
}

/* ==================== ALERTS ==================== */
.alert {
    background: var(--milk-light) !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
}

.alert-success {
    background: #E8F5E9 !important;
    border-color: #81C784 !important;
    color: #2E7D32 !important;
}

.alert-warning {
    background: var(--orange-soft) !important;
    border-color: var(--orange-primary) !important;
    color: var(--orange-hover) !important;
}

/* ==================== BREADCRUMBS ==================== */
.breadcrumb {
    background: var(--milk-cream) !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--orange-primary) !important;
}

/* ==================== DROPDOWN ==================== */
.dropdown-menu {
    background: #FFFFFF !important;
    border: 2px solid var(--border-light) !important;
    box-shadow: var(--shadow-medium) !important;
    border-radius: 12px !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background: var(--orange-soft) !important;
    color: var(--orange-primary) !important;
}

/* ==================== PROGRESS BAR ==================== */
.progress {
    background: var(--milk-light) !important;
    border-radius: 20px !important;
    height: 12px !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--orange-primary) 0%, var(--orange-light) 100%) !important;
    border-radius: 20px !important;
}

/* ==================== CAROUSEL ==================== */
.carousel-control-prev,
.carousel-control-next {
    background: rgba(255, 107, 53, 0.8) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.carousel-indicators button {
    background: var(--orange-primary) !important;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--milk-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--orange-primary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange-hover);
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 768px) {
    .btn-primary,
    button[type="submit"] {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
    
    .car-card,
    .card {
        margin-bottom: 20px !important;
    }
}

/* ==================== UTILITY CLASSES ==================== */
.bg-milk {
    background: var(--milk-white) !important;
}

.bg-cream {
    background: var(--milk-cream) !important;
}

.bg-orange {
    background: var(--orange-primary) !important;
    color: #FFFFFF !important;
}

.text-orange {
    color: var(--orange-primary) !important;
}

.border-orange {
    border-color: var(--orange-primary) !important;
}

.shadow-soft {
    box-shadow: var(--shadow-soft) !important;
}

.shadow-orange {
    box-shadow: var(--shadow-orange) !important;
}