/* ================================================================
   Kartódromo Vila Nova de Paiva — Global Stylesheet
   ================================================================ */

/* --- Design Tokens -------------------------------------------- */
:root {
    --kvnp-red:    #c0392b;
    --kvnp-dark:   #111827;
    --kvnp-mid:    #1e293b;
    --kvnp-accent: #f59e0b;
}

/* --- Base ----------------------------------------------------- */
body         { font-family: 'Inter', sans-serif; background: #f8fafc; }
h1,h2,h3,h4,h5 { font-family: 'Oswald', sans-serif; }

/* --- Navbar --------------------------------------------------- */
.navbar-kvnp { background: var(--kvnp-dark); border-bottom: 1px solid #1e293b; }
.navbar-kvnp .nav-link {
    color: #94a3b8 !important;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    transition: color .2s;
}
.navbar-kvnp .nav-link:hover,
.navbar-kvnp .nav-link.active  { color: #fff !important; }
.navbar-kvnp .nav-link.active  { border-bottom: 2px solid var(--kvnp-red); }

/* --- Buttons -------------------------------------------------- */
.btn-kvnp-primary {
    background: var(--kvnp-red); border: none; color: #fff;
    font-family: 'Oswald', sans-serif; font-size: .8rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .9rem 2rem;
    box-shadow: 0 8px 24px rgba(192,57,43,.35);
    transition: all .2s;
}
.btn-kvnp-primary:hover {
    background: #a93226; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(192,57,43,.45);
}
.btn-kvnp-outline {
    border: 2px solid #334155; color: #94a3b8;
    font-family: 'Oswald', sans-serif; font-size: .8rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .9rem 2rem; background: transparent;
    transition: all .2s;
}
.btn-kvnp-outline:hover { border-color: #64748b; color: #fff; }

/* --- Hero ----------------------------------------------------- */
.hero { background: var(--kvnp-dark); min-height: 90vh; position: relative; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(192,57,43,.15) 0%, transparent 60%);
}
.hero-badge {
    background: rgba(5,150,105,.15); border: 1px solid rgba(5,150,105,.35);
    color: #34d399; font-size: .7rem; letter-spacing: .1em;
}
.hero h1    { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1; }
.hero h1 span { color: var(--kvnp-red); }
.hero-visual {
    background: linear-gradient(135deg, rgba(192,57,43,.1), #1e293b, rgba(245,158,11,.08));
    border: 1px solid #1e293b; border-radius: 1rem;
    min-height: 340px; display: flex; align-items: center; justify-content: center;
}

/* --- Utilities ------------------------------------------------ */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shadow-sm-hover { transition: box-shadow .2s; }
.shadow-sm-hover:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.section-divider { width: 60px; height: 4px; background: var(--kvnp-red); border-radius: 2px; }

/* --- Service Cards -------------------------------------------- */
.service-card { border: 1px solid #e2e8f0; border-radius: 1rem; transition: box-shadow .2s, transform .2s; }
.service-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-4px); }
.service-icon { width: 52px; height: 52px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

/* --- Booking Section ------------------------------------------ */
.booking-section { background: linear-gradient(160deg, #0d1117 0%, #1a1f2e 100%); }
.booking-panel   {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.25rem; backdrop-filter: blur(8px);
}

/* --- Calendar (CSS Grid nativo) ------------------------------- */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-header { font-family: 'Oswald', sans-serif; font-size: 1.1rem; letter-spacing: .08em; }
.cal-dow {
    font-size: .6rem; font-weight: 700; letter-spacing: .08em;
    color: #475569; text-transform: uppercase;
    text-align: center; padding: .35rem 0;
}
.cal-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: .55rem;
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    position: relative; user-select: none; min-width: 0;
}
.cal-day.past     { color: #334155; cursor: default; opacity: 0.4; }
.cal-day.closed   { background: rgba(71,85,105,0.35); color: #64748b; cursor: not-allowed; }
.cal-day.open     { color: #e2e8f0; }
.cal-day.open:hover { background: rgba(192,57,43,.35); color: #fff; transform: scale(1.1); }
.cal-day.selected { background: var(--kvnp-red) !important; color: #fff !important; transform: scale(1.1); box-shadow: 0 4px 18px rgba(192,57,43,.55); }
.cal-day.too-soon { color: #475569; cursor: not-allowed; border: 1px dashed rgba(255,255,255,0.3); opacity: 0.5; }
.cal-day.no-groups { background: rgba(255,255,255,0.03); color: #475569; cursor: not-allowed; border: 1px dashed var(--kvnp-accent); }

/* --- Slot Buttons --------------------------------------------- */
.slot-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid rgba(74,222,128,.25);
    background: rgba(74,222,128,.07); color: #86efac;
    font-size: .8rem; font-weight: 700;
    padding: .75rem; border-radius: .75rem;
    transition: all .2s; width: 100%;
    font-family: 'Oswald', sans-serif; letter-spacing: .06em;
}
.slot-btn:hover          { background: rgba(74,222,128,.2); border-color: #4ade80; color: #fff; transform: translateY(-2px); }
.slot-btn:disabled       { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); color: #374151; cursor: not-allowed; transform: none; }
.slot-btn.selected-slot  { background: var(--kvnp-red); border-color: var(--kvnp-red); color: #fff; box-shadow: 0 4px 16px rgba(192,57,43,.4); }

/* --- Booking Form --------------------------------------------- */
.form-kvnp { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; }
.form-kvnp .form-label  { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .08em; }
.form-kvnp .form-control { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e2e8f0; border-radius: .6rem; }
.form-kvnp .form-control::placeholder { color: #475569; }
.form-kvnp .form-control:focus { background: rgba(255,255,255,.1); border-color: var(--kvnp-red); box-shadow: 0 0 0 .2rem rgba(192,57,43,.2); color: #fff; }
.caution-notice { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); border-radius: .75rem; }
.summary-box    { background: rgba(192,57,43,.1);  border: 1px solid rgba(192,57,43,.25);  border-radius: .75rem; }

/* --- Race Type Cards ------------------------------------------ */
.race-type-card {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04); border-radius: .65rem;
    padding: .7rem .9rem; cursor: pointer;
    transition: all .18s; display: flex; align-items: center; gap: .6rem;
}
.race-type-card:hover    { border-color: rgba(192,57,43,.5); background: rgba(192,57,43,.08); }
.race-type-card.selected { border-color: var(--kvnp-red); background: rgba(192,57,43,.15); }
.race-type-card .race-icon { font-size: 1.1rem; flex-shrink: 0; }
.race-type-card .race-name { font-size: .78rem; font-weight: 700; color: #e2e8f0; line-height: 1.2; }
.race-type-card .race-desc { font-size: .68rem; color: #64748b; line-height: 1.3; }
.race-type-card .price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(192,57,43,0.9);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
}

/* --- Legend --------------------------------------------------- */
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* --- Page Hero (interior pages) ------------------------------- */
.page-hero {
    background: var(--kvnp-dark); padding: 5rem 0 3rem;
    position: relative; overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(192,57,43,.12) 0%, transparent 60%);
}

/* --- Content Cards (interior pages) --------------------------- */
.content-card {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 1rem; transition: box-shadow .2s, transform .2s;
}
.content-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-3px); }

/* --- Pricing Cards -------------------------------------------- */
.price-card {
    border: 1px solid #e2e8f0; border-radius: 1rem;
    transition: box-shadow .2s, transform .2s;
    overflow: hidden;
}
.price-card.featured { border-color: var(--kvnp-red); box-shadow: 0 0 0 2px var(--kvnp-red); }
.price-card .price-header { background: var(--kvnp-dark); color: #fff; padding: 1.5rem; }
.price-card .price-header.featured-header { background: var(--kvnp-red); }
.price-tag { font-family: 'Oswald', sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1; }
.price-tag sup { font-size: 1rem; vertical-align: super; }
.price-tag span { font-size: 1rem; font-weight: 400; color: #94a3b8; }

/* --- Footer --------------------------------------------------- */
footer     { background: #0a0f1a; border-top: 1px solid #1e293b; }
footer a   { color: #64748b; text-decoration: none; font-size: .8rem; transition: color .2s; }
footer a:hover { color: #94a3b8; }
footer p { color: #64748b !important; margin-bottom: 0; }
footer { padding-bottom: 100px !important; }

/* --- Cookie Bar ----------------------------------------------- */
#cookie-bar { 
    position: fixed; bottom: 20px; left: 20px; right: 20px; 
    background: rgba(15, 23, 42, 0.95); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 9999; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#cookie-bar.hidden { transform: translateY(150%); }

/* --- Responsive Refinements ---------------------------------- */
@media (max-width: 991.98px) {
    .navbar-kvnp .navbar-collapse {
        margin-top: 1rem;
        padding: 1.5rem;
        background: rgba(17, 24, 39, 0.98);
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
    .navbar-kvnp .nav-link {
        padding: 0.8rem 0;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .navbar-kvnp .nav-link.active {
        border-bottom: 2px solid var(--kvnp-red);
        width: fit-content;
    }
    .navbar-kvnp .dropdown {
        margin: 1rem 0;
    }
    .navbar-kvnp .dropdown-menu {
        background: #1e293b;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-kvnp .dropdown-item {
        color: #94a3b8;
    }
    .navbar-kvnp .dropdown-item:hover {
        background: rgba(192,57,43,0.1);
        color: #fff;
    }
    .navbar-kvnp .btn-kvnp-primary {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .hero h1 { font-size: 2.8rem; }
    .cal-grid { gap: 2px; }
    .cal-day { font-size: 0.75rem; }
    .booking-panel { padding: 1.25rem !important; }
}