/* ==========================================
   VAIVITA GROUP — Quick Commerce Theme
   Midnight Black • Champagne Gold • Ivory
========================================== */

:root {
    --vv-black: #0B0D12;
    --vv-black-soft: #12151C;
    --vv-charcoal: #1B2029;
    --vv-gold: #C9A24A;
    --vv-gold-light: #E4C779;
    --vv-ivory: #F5E8C8;
    --vv-white: #FFFFFF;
    --vv-muted: #6B7280;
    --vv-border: #E5E7EB;
    --vv-success: #198754;
    --vv-radius: 14px;
    --vv-shadow: 0 8px 25px rgba(11, 13, 18, 0.09);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #F7F7F8;
    color: #20242C;
    font-family: Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

a {
    color: #967326;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--vv-black);
}

/* Navigation */

.navbar,
.site-navbar {
    background: var(--vv-black) !important;
    border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}

.navbar-brand,
.site-navbar .brand {
    color: var(--vv-ivory) !important;
    font-weight: 800;
    letter-spacing: 2px;
}

.navbar-brand:hover,
.site-navbar .brand:hover {
    color: var(--vv-gold-light) !important;
}

.navbar .nav-link {
    color: #E5E7EB !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--vv-gold-light) !important;
}

/* Main layout */

.container {
    max-width: 1200px;
}

main {
    min-height: 65vh;
    padding-top: 24px;
    padding-bottom: 40px;
}

h1, h2, h3, h4, h5 {
    color: var(--vv-black);
    font-weight: 700;
    line-height: 1.3;
}

.section-title {
    margin-bottom: 20px;
    font-weight: 800;
}

/* Hero banner */

.hero {
    position: relative;
    overflow: hidden;
    padding: 44px !important;
    color: var(--vv-ivory);
    background:
        radial-gradient(ellipse at 90% 10%,
            rgba(201, 162, 74, 0.20), transparent 42%),
        linear-gradient(125deg, #0B0D12, #1B2029 70%, #272116);
    border: 1px solid rgba(201, 162, 74, 0.4);
    border-radius: 20px !important;
    box-shadow: var(--vv-shadow);
}

.hero h1 {
    max-width: 700px;
    color: var(--vv-ivory);
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: -1px;
}

.hero p {
    max-width: 650px;
    color: #E5E7EB;
}

.hero .eyebrow {
    color: var(--vv-gold-light);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Buttons */

.btn-brand,
.btn-primary {
    color: var(--vv-black) !important;
    background: var(--vv-gold) !important;
    border: 1px solid var(--vv-gold) !important;
    border-radius: 9px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-brand:hover,
.btn-primary:hover {
    color: var(--vv-black) !important;
    background: var(--vv-gold-light) !important;
    border-color: var(--vv-gold-light) !important;
    transform: translateY(-1px);
}

.btn-outline-light {
    border-radius: 9px;
}

.btn-outline-dark {
    border-color: var(--vv-black);
    border-radius: 9px;
}

.btn-outline-dark:hover {
    color: var(--vv-ivory);
    background: var(--vv-black);
}

/* Product cards */

.product-card {
    height: 100%;
    overflow: hidden;
    background: var(--vv-white);
    border: 1px solid var(--vv-border);
    border-radius: var(--vv-radius);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vv-shadow);
    border-color: rgba(201, 162, 74, 0.65);
}

.product-image {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    background: #F3F0E8;
}

.product-placeholder {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F5E8C8, #F7F7F8);
    font-size: 3rem;
}

.product-card .card-body {
    padding: 16px;
}

.product-card h3,
.product-card .h6 {
    color: var(--vv-black);
    font-weight: 700;
}

.product-card .fw-bold {
    color: #987527;
    font-size: 1.15rem;
}

/* Forms and search */

.form-control,
.form-select {
    min-height: 44px;
    border: 1px solid #D5D8DE;
    border-radius: 9px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vv-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 74, 0.2);
}

label {
    font-weight: 600;
}

/* Tables */

.table {
    background: var(--vv-white);
    vertical-align: middle;
}

.table thead th {
    color: var(--vv-ivory);
    background: var(--vv-black);
    border-color: #343943;
}

.table td,
.table th {
    padding: 12px;
}

/* Cards and panels */

.card {
    border-radius: var(--vv-radius);
}

.empty-state {
    padding: 32px 20px;
    color: #626875;
    text-align: center;
    background: var(--vv-white);
    border: 1px dashed #D1D5DB;
    border-radius: var(--vv-radius);
}

/* Badges and status */

.badge {
    font-weight: 600;
}

.text-success {
    color: var(--vv-success) !important;
}

/* Footer */

footer,
.site-footer {
    margin-top: 40px;
    padding: 30px 0;
    color: #D1D5DB;
    background: var(--vv-black);
    border-top: 1px solid rgba(201, 162, 74, 0.35);
}

footer h5,
footer h6,
.site-footer h5 {
    color: var(--vv-ivory);
}

footer a,
.site-footer a {
    color: var(--vv-gold-light);
}

footer a:hover,
.site-footer a:hover {
    color: var(--vv-white);
}

/* Mobile responsive */

@media (max-width: 767px) {
    main {
        padding-top: 16px;
        padding-bottom: 28px;
    }

    .hero {
        padding: 25px 20px !important;
        border-radius: 14px !important;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero .btn {
        margin: 5px 0;
    }

    .hero .btn + .btn {
        margin-left: 0 !important;
    }

    .product-image {
        height: 165px;
    }

    .product-card .card-body {
        padding: 12px;
    }

    .product-card .btn {
        width: 100%;
        font-size: 0.88rem;
    }

    .container {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* Reduced motion accessibility */

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