/* Etapas page styles moved from inline <style> in etapas.html */

/* Left panel effect: 1/3 width on large screens, full width on small screens */
.card-body .row-effect {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

.left-effect {
    -webkit-backdrop-filter: saturate(130%) blur(7px) !important;
    backdrop-filter: saturate(130%) blur(7px) !important;
    box-shadow: rgb(111, 111, 111) -1.73px 1.73px 1.73px -1.46px inset !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.8s, -webkit-transform 0.8s !important;
    border-radius: 15px !important;
    background: rgba(3, 3, 3, 0.4) !important;
    padding: 10px 0px 10px 0px !important;
    color: inherit !important;
}



.left-effect .left-inner {
    padding: 6px !important;
}

.right-content {
    flex: 1;
    min-width: 200px !important;
}



/* Responsive: on small screens, left-effect becomes full width above content */
@media (max-width:768px) {
    .left-effect {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Banner card usado no modal (pontuação da etapa) - totalmente isolado */
.prorace-results-banner.card-style {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100px;
}

.prorace-results-banner .card-center {
    padding: 18px;
}

.prorace-results-banner .card-center h1 {
    margin: 0;
}

.prorace-results-banner.interlagos {
    background-image: url('../images/pistas/interlagos.jpg');
    background-size: cover;
    background-position: center;
}

/* Overlay/modal dynamic rules (if not present) */


/* RESULTS-MODAL (isolated) */
.prorace-results-overlay {
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
}

.prorace-results-modal {
    background: var(--bg-modal, #fff);
    border-radius: 10px;
    max-width: 980px;
    width: 95%;
    max-height: 90%;
    overflow: auto;
    padding: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

/* Banner specific to results modal */
.prorace-results-banner.card-style {
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.prorace-results-banner .card-center {
    padding: 18px;
}

.prorace-results-banner .card-center h1 {
    margin: 0;
}

/* Header row inside results table: gradient applied to cells to allow rounded top corners */
.prorace-results-table-wrapper {
    border-radius: 10px; /* round all corners so table has top and bottom rounded */
    overflow: hidden;
}

.prorace-results-table-wrapper {
    /* subtle elevation to highlight the card when modal is open */
    box-shadow: 0 10px 30px rgba(10, 20, 30, 0.12);
    transition: box-shadow 220ms ease-in-out, transform 220ms ease-in-out;
}

/* slightly stronger shadow when wrapper is focused/visible (helps on some backgrounds) */
.prorace-results-overlay .prorace-results-table-wrapper {
    box-shadow: 0 16px 48px rgba(8, 18, 28, 0.18);
}

.prorace-results-header {
    /* cor padrão (quando não for grid específico) */
    background: linear-gradient(151deg, #0C327C 0%, #0d61bc 35%, #000000 50%, #C70220 70%, #860519 100%);
}

/* header da tabela de resultados por Grid */
.prorace-results-header.bg-grid-golden {
    background: linear-gradient(151deg, #8d6b1f 0%, #cfa93e 30%, #e5c25f 60%, #eecc4b 100%);
}

.prorace-results-header.bg-grid-silver {
    background: linear-gradient(151deg, #7a7a7a 0%, #bfbfbf 30%, #e5e5e5 60%, #f7f7f7 100%) !important;
}

.prorace-results-header.bg-grid-bronze {
    background: linear-gradient(151deg, #4b2e1a 0%, #8c5a32 30%, #b67a4a 60%, #d8a56f 100%);
}

.prorace-results-header.bg-grid-ws {
    background: linear-gradient(135deg, #0b3a8f 0%, #1d5fd6 45%, #c8102e 100%);
}

.prorace-results-header th {
    background: transparent;
    color: #fff;
    padding: 8px;
}

/* Piloto cell inside results modal */
.prorace-results-piloto {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prorace-results-piloto img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
}

.prorace-results-piloto span {
    display: inline-block;
    vertical-align: middle;
    color: #000;
}


/* POS and PTS cells */
.prorace-results-pos {
    /* padrão (quando nenhuma classe de grid for aplicada) */
    background-image: linear-gradient(to right, #0d4596, #0c4ca0);
    color: #fff;
    padding: 8px;
    vertical-align: middle;
    font-weight: 600;
}

/* Variantes por Grid — usam !important para garantir override sobre o padrão */
.prorace-results-pos.bg-grid-golden {
    background: linear-gradient(151deg, #8d6b1f 0%, #cfa93e 30%, #e5c25f 60%, #eecc4b 100%) !important;
    color: #fff !important;
}
.prorace-results-pos.bg-grid-silver {
    background: linear-gradient(151deg, #7a7a7a 0%, #bfbfbf 30%, #e5e5e5 60%, #f7f7f7 100%) !important;
    color: #111 !important;
}
.prorace-results-pos.bg-grid-bronze {
    background: linear-gradient(151deg, #4b2e1a 0%, #8c5a32 30%, #b67a4a 60%, #d8a56f 100%) !important;
    color: #fff !important;
}
.prorace-results-pos.bg-grid-ws {
    background: linear-gradient(135deg, #0b3a8f 0%, #1d5fd6 45%, #c8102e 100%) !important;
    color: #fff !important;
}
.prorace-results-pts {
    background-color: #f1f1f1 !important;
    color: #080808;
    padding: 8px;
    font-weight: 600 !important;
}

/* Alternating row background for Results modal (match classificação table pattern) */
.prorace-results-table tbody tr:nth-child(odd) td:not(:first-child),
.prorace-results-table tbody tr:nth-child(odd) th {
    background-color: #f4f4f4;
}
.prorace-results-table tbody tr:nth-child(even) td:not(:first-child),
.prorace-results-table tbody tr:nth-child(even) th {
    background-color: #e3e3e3;
}

/* Dark theme variants */
body.theme-dark .prorace-results-table tbody tr:nth-child(odd) td:not(:first-child),
body.theme-dark .prorace-results-table tbody tr:nth-child(odd) th {
    background-color: #181818 !important;
}
body.theme-dark .prorace-results-table tbody tr:nth-child(even) td:not(:first-child),
body.theme-dark .prorace-results-table tbody tr:nth-child(even) th {
    background-color: #232323 !important;
}


/* Close button inside results modal header */
.prorace-results-close {
    margin-left: 12px;
    padding: 8px 12px;
    border: none;
    background: #e74c3c;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

/* Footer button: full width and rounded */
.prorace-results-footer { margin-top: 12px; }
.prorace-results-close { display: block; width: 100%; padding: 12px; border-radius: 5px; margin-left: 0; }

/* Dark theme variants for results modal only */
/* Dark theme: avoid overriding banner background-image; only adjust colors and overlays */
/* Dark-mode rules with increased specificity to override light-mode rules without !important */
body.theme-dark .prorace-results-modal {
    background-color: #0b0b0b;
    color: #eee;
}

body.theme-dark .prorace-results-modal .prorace-results-banner.card-style {
    color: #eee; /* keep banner text light */
}

/* stronger banner overlay in dark mode for contrast */
body.theme-dark .prorace-results-modal .prorace-results-banner.card-style .card-overlay {
    background: linear-gradient(rgba(0,0,0,0.64), rgba(0,0,0,0.48));
}

body.theme-dark .prorace-results-overlay {
    background-color: rgba(2, 2, 2, 0.82);
}

/* Slight backdrop blur in dark mode to increase focus on the modal content */
body.theme-dark .prorace-results-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Dark mode: make B1/B2/W and PTS numbers white for contrast, with increased specificity */
body.theme-dark .prorace-results-modal .prorace-results-table td:nth-child(3),
body.theme-dark .prorace-results-modal .prorace-results-table td:nth-child(4),
body.theme-dark .prorace-results-modal .prorace-results-table td:nth-child(5) {
    color: #fff;
}

/* Dark mode: PTS cell background darker and text white */
body.theme-dark .prorace-results-modal .prorace-results-pts {
    background-color: rgba(255,255,255,0.06);
    color: #fff;
}

/* Dark mode: piloto name color */
body.theme-dark .prorace-results-modal .prorace-results-piloto span {
    color: #fff;
}

/* Top-right floating close X inside the modal */
.prorace-results-modal { position: relative; }
.prorace-results-close-x {
    /* position will be set by JS since button lives under the overlay */
    background: #fff;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    color: #000; /* default (light mode): black */
    box-shadow: 0 6px 18px rgba(20,20,20,0.12);
    transition: transform 140ms ease, background-color 120ms ease, color 120ms ease;
}
.prorace-results-close-x:hover { transform: translateY(-2px); background: #fafafa; }

/* Dark-mode: make the circular X red for emphasis and dark background subtle */
body.theme-dark .prorace-results-close-x {
    color: #e53935; /* red X color in dark mode */
    background: #ffffff; /* white circular background */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
body.theme-dark .prorace-results-close-x:hover { transform: translateY(-2px); background: #fff2f2; }

/* Make B1/B2/W columns use black text color in results modal */
.prorace-results-table td:nth-child(3),
.prorace-results-table td:nth-child(4),
.prorace-results-table td:nth-child(5) {
    color: #000;
}

/* Round bottom corners of the last row so the table is rounded on both top and bottom */
.prorace-results-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
.prorace-results-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* Explanatory info card specific to results modal */
.prorace-results-info-card { margin-top: 14px; }
.prorace-results-info-content { margin: 0; color: inherit; }
.prorace-results-info-key { color: #41b2b8; font-weight: 700; }

/* ==========================================================================
   FUNDO DO CARD DE ETAPA
   --------------------------------------------------------------------------
   Cada pista tem duas imagens, e elas funcionam de jeitos diferentes:

     desenho do traçado → images/pistas/<slug>.png
       Achado sozinho: etapas.html monta o caminho a partir do nome da pista.
       Basta pôr o arquivo na pasta com o nome certo.

     fundo do card → images/etapas/<qualquer-nome>.jpg
       NÃO é achado sozinho. O card recebe o slug da pista como classe
       (etapas.html, em cardEtapa), e o fundo só aparece se existir uma regra
       com essa classe. É o que está aqui embaixo.

   O <slug> é o nome digitado no admin, minúsculo, sem acento, com espaços
   virando hífen: "Yas Marina" vira "yas-marina".

   O nome do .jpg é livre — quem precisa bater é a CLASSE com o slug.

   As 18 primeiras pistas (interlagos, monza, suzuka, spa, fuji, bathurst,
   barcelona, brands, litoral, sardena, redbull, nurb, lago, auto, seca, st,
   tokyo, blue) têm a regra delas lá no styles/bootstrap4.css, junto das
   classes .bg-N do tema. Daqui para frente as novas ficam neste arquivo, que
   é do projeto e carrega depois do tema.
   ========================================================================== */

.yas-marina {
    background-image: url(../images/etapas/yas.jpg);
}

.gilles-villeneuve {
    background-image: url(../images/etapas/gilles.jpg);
}

.sportsland-sugo {
    background-image: url(../images/etapas/sportsland.jpg);
}

.autumn-ring {
    background-image: url(../images/etapas/automn.jpg);
}


/* --------------------------------------------------------------------------
   As demais pistas do Gran Turismo 7.

   Uma imagem por circuito: as variantes (Reverse, Short, No Chicane, Infield,
   Clockwise...) correm no mesmo lugar, então dividem a mesma foto e aparecem
   juntas no seletor.

   Os nomes de arquivo curtos (nurb, st, litoral, auto, seca, sardena, lago,
   blue, tokyo, brands, redbull, spa, bathurst) vêm do tema antigo, de quando
   as classes eram abreviadas. O arquivo ficou com o nome de lá; quem precisa
   bater com o slug da pista é o seletor.
   -------------------------------------------------------------------------- */

/* Lago Maggiore */
.lago-maggiore-centre,
.lago-maggiore-centre-reverse,
.lago-maggiore-east,
.lago-maggiore-east-reverse,
.lago-maggiore-east-end,
.lago-maggiore-east-end-reverse,
.lago-maggiore-full-course,
.lago-maggiore-full-course-reverse,
.lago-maggiore-west,
.lago-maggiore-west-reverse,
.lago-maggiore-west-end,
.lago-maggiore-west-end-reverse {
    background-image: url(../images/etapas/lago.jpg);
}

/* Sardegna */
.sardegna-road-a,
.sardegna-road-a-reverse,
.sardegna-road-b,
.sardegna-road-b-reverse,
.sardegna-road-c,
.sardegna-road-c-reverse,
.sardegna-windmills,
.sardegna-windmills-reverse {
    background-image: url(../images/etapas/sardena.jpg);
}

/* Blue Moon Bay */
.blue-moon-infield-a,
.blue-moon-infield-a-reverse,
.blue-moon-infield-b,
.blue-moon-infield-b-reverse,
.blue-moon-speedway,
.blue-moon-speedway-reverse {
    background-image: url(../images/etapas/blue.jpg);
}

/* Nürburgring */
.nurburgring-24h-no-chicane,
.nurburgring-endurance,
.nurburgring-gp,
.nurburgring-nordschleife,
.nurburgring-nordschleife-tourist,
.nurburgring-sprint {
    background-image: url(../images/etapas/nurb.jpg);
}

/* Sainte Croix */
.sainte-croix-a,
.sainte-croix-a-reverse,
.sainte-croix-b,
.sainte-croix-b-reverse,
.sainte-croix-c,
.sainte-croix-c-reverse {
    background-image: url(../images/etapas/st.jpg);
}

/* Tokyo Expressway */
.tokyo-express-central-ccw,
.tokyo-express-central-clockwise,
.tokyo-express-east-clockwise,
.tokyo-express-east-counterclockwise,
.tokyo-express-south-clockwise,
.tokyo-express-south-counterclockwise {
    background-image: url(../images/etapas/tokyo.jpg);
}

/* Barcelona Catalunya */
.barcelona-catalunya-gp,
.barcelona-catalunya-gp-no-chicane,
.barcelona-catalunya-national,
.barcelona-catalunya-rallycross {
    background-image: url(../images/etapas/barcelona.jpg);
}

/* Dragon Trail */
.dragon-trail-gardens,
.dragon-trail-gardens-reverse,
.dragon-trail-seaside,
.dragon-trail-seaside-reverse {
    background-image: url(../images/etapas/litoral.jpg);
}

/* Autopolis */
.autopolis,
.autopolis-shortcut {
    background-image: url(../images/etapas/auto.jpg);
}

/* Brands Hatch */
.brands-hatch-gp,
.brands-hatch-indy {
    background-image: url(../images/etapas/brands.jpg);
}

/* Red Bull Ring */
.red-bull-ring,
.red-bull-ring-short {
    background-image: url(../images/etapas/redbull.jpg);
}

/* Spa-Francorchamps */
.spa-francorchamps,
.spa-24h-layout {
    background-image: url(../images/etapas/spa.jpg);
}

/* Fuji */
.fuji-short {
    background-image: url(../images/etapas/fuji.jpg);
}

/* Monza */
.monza-no-chicane {
    background-image: url(../images/etapas/monza.jpg);
}

/* Mount Panorama */
.mount-panorama {
    background-image: url(../images/etapas/bathurst.jpg);
}

/* Laguna Seca */
.laguna-seca {
    background-image: url(../images/etapas/seca.jpg);
}

/* Le Mans — seletor de atributo porque classe CSS não pode começar com
   dígito: ".24-heures-du-mans" é inválido e o navegador descarta a regra
   inteira. [class~="..."] casa a mesma classe e é válido. */
[class~="24-heures-du-mans"],
[class~="24-heures-du-mans-no-chicane"] {
    background-image: url(../images/etapas/lemans.jpg);
}

/* Alsace */
.alsace-test-course,
.alsace-test-course-reverse,
.alsace-village,
.alsace-village-reserve {
    background-image: url(../images/etapas/alsace.jpg);
}

/* Broad Bean */
.broad-bean,
.broad-bean-reverse {
    background-image: url(../images/etapas/broadbean.jpg);
}

/* Colorado Springs */
.colorado-springs-lake,
.colorado-springs-lake-reverse {
    background-image: url(../images/etapas/colorado.jpg);
}

/* Daytona */
.daytona-road-course,
.daytona-tri-oval {
    background-image: url(../images/etapas/daytona.jpg);
}

/* Deep Forest */
.deep-forest,
.deep-forest-reverse {
    background-image: url(../images/etapas/deepforest.jpg);
}

/* Eiger Nordwand */
.eiger-nordwand,
.eiger-nordwand-reverse {
    background-image: url(../images/etapas/eiger.jpg);
}

/* Fishermans Ranch */
.fishermans-ranch,
.fishermans-ranch-reverse {
    background-image: url(../images/etapas/fishermans.jpg);
}

/* Goodwood */
.goodwood {
    background-image: url(../images/etapas/goodwood.jpg);
}

/* Grand Valley */
.grand-valley-highway-1,
.grand-valley-highway-1-reverse,
.grand-valley-south,
.grand-valley-south-reverse {
    background-image: url(../images/etapas/grandvalley.jpg);
}

/* High Speed Ring */
.high-speed-ring,
.high-speed-ring-reverse {
    background-image: url(../images/etapas/highspeed.jpg);
}

/* Kyoto Driving Park */
.kyoto-miyabi,
.kyoto-yamagiwa,
.kyoto-yamagiwa-miyabi,
.kyoto-yamagiwa-miyabi-reverse,
.kyoto-yamagiwa-reverse {
    background-image: url(../images/etapas/kyoto.jpg);
}

/* Lake Louise */
.lake-louise-long,
.lake-louise-long-reverse,
.lake-louise-short,
.lake-louise-short-reverse,
.lake-louise-tri-oval,
.lake-louise-tri-oval-reverse {
    background-image: url(../images/etapas/lakelouise.jpg);
}

/* Northern Isle */
.northern-isle,
.northern-isle-infield {
    background-image: url(../images/etapas/northernisle.jpg);
}

/* Road Atlanta */
.road-atlanta {
    background-image: url(../images/etapas/roadatlanta.jpg);
}

/* Special Stage Route X */
.special-stage-route-x {
    background-image: url(../images/etapas/routex.jpg);
}

/* Trial Mountain */
.trial-mountain,
.trial-mountain-reverse {
    background-image: url(../images/etapas/trialmountain.jpg);
}

/* Tsukuba */
.tsukuba {
    background-image: url(../images/etapas/tsukuba.jpg);
}

/* Watkins Glen */
.watkins-glen-long-course,
.watkins-glen-short-course {
    background-image: url(../images/etapas/watkins.jpg);
}

/* Willow Springs */
.willow-springs-big-willow,
.willow-springs-horse-thief-mile,
.willow-springs-horse-thief-mile-reverse,
.willow-springs-streets-of-willow-springs,
.willow-springs-streets-of-willow-springs-reverse {
    background-image: url(../images/etapas/willow.jpg);
}