/* Cars4Go | Design #2 | Readable stylesheet
   Keep existing selectors and responsive overrides.
   Background: ../img/city_headlights.png
*/

:root {
    --navy: #001829;
    --yellow: #ffce0d;
    --white: #fff;
    --ink: #06172d;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* BASE */
body {
    margin: 0;
    background: #001829;
    color: white;
    font-family: Roboto,Arial,sans-serif;
}

/* LAYOUT */
.site-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(#001829 0%,#001829 76%,#001829 100%);
}

/* HEADER / NAVIGATION */
.site-header {
    height: 177px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 29px 4.3% 0;
    position: relative;
    z-index: 3;
    background: linear-gradient(90deg,#001522 0%,#00213a 58%,#001829 100%);
}

.brand {
    width: 36.5%;
    max-width: 535px;
    flex-shrink: 0;
    display: block;
}

.brand img {
    width: 100%;
    height: auto;
    display: block;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px,1.75vw,30px);
    padding-top: 53px;
    white-space: nowrap;
}

.main-nav a,.language {
    color: white;
    text-decoration: none;
    font-size: clamp(12px,1vw,16px);
    font-weight: 400;
}

.main-nav a.current {
    position: relative;
    font-weight: 700;
}

.main-nav a.current:after {
    content: "";
    height: 4px;
    background: var(--yellow);
    position: absolute;
    bottom: -13px;
    left: -5px;
    right: -5px;
}

.my-reservation {
    border-left: 1px solid #8799ab;
    padding-left: 23px;
    margin-left: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-icon {
    font-size: 30px;
    line-height: 16px;
}

.language {
    border-left: 1px solid #8799ab;
    padding-left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flag {
    font-size: 26px;
}

.chevron {
    font-size: 20px;
}

/* HERO / BACKGROUND */
.hero {
    height: 468px;
    position: relative;
}

.hero-art {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,#001829 0%,rgba(0,24,41,.99) 10%,rgba(0,24,41,.94) 33%,rgba(0,24,41,.70) 46%,rgba(0,24,41,0) 63%),linear-gradient(180deg,rgba(0,24,41,.45),transparent 40%),url("../img/city_headlights.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hero-content {
    position: relative;
    max-width: 1536px;
    margin: 0 auto;
    height: 100%;
}

.slogan {
    position: absolute;
    top: 90px;
    left: 4.6%;
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.dash {
    height: 4px;
    width: 57px;
    background: var(--yellow);
    margin-top: 31px;
    flex-shrink: 0;
}

.slogan h1 {
    font-family: Dosis,Roboto,sans-serif;
    font-size: clamp(30px,3.25vw,51px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .3px;
    margin: 0;
    text-shadow: 0 2px 8px #001829;
}

.slogan strong {
    color: var(--yellow);
    font-weight: 700;
}

.slogan p {
    display: flex;
    align-items: center;
    gap: 26px;
    letter-spacing: 8px;
    font-size: clamp(17px,1.8vw,29px);
    font-weight: 300;
    margin: 18px 0 0 23px;
    white-space: nowrap;
}

.slogan p span {
    display: block;
    width: 82px;
    height: 3px;
    background: var(--yellow);
}

.award {
    position: absolute;
    width: 220px;
    height: auto;
    object-fit: contain;
    top: -48px;
    right: 6.2%;
    filter: drop-shadow(0 0 10px #001829);
}

/* RESERVATION TABS AND FORM */
.booking {
    position: relative;
    z-index: 4;
    margin: -1px 3.9% 0;
}

.tabs {
    display: flex;
    height: 62px;
    max-width: 1020px;
    background: rgba(0,15,30,.94);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    border-top: 1px solid rgba(130,195,224,.6);
}

.tab {
    appearance: none;
    border: 0;
    color: #fff;
    background: transparent;
    min-width: 0;
    flex: 1;
    font-size: 16px;
    font-family: Roboto,sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.tab span {
    font-size: 28px;
    line-height: 1;
}

.tab.active {
    color: var(--yellow);
    background: linear-gradient(#063c60,#00213a);
    border: 1px solid #19a9e4;
    border-bottom: 5px solid var(--yellow);
    border-radius: 18px 18px 0 0;
}

.booking-card {
    background: #fff;
    border: 1px solid #e1e7ed;
    border-radius: 16px;
    min-height: 126px;
    padding: 23px 20px 15px;
    box-shadow: 0 8px 22px #0003;
}

.booking-grid {
    display: grid;
    grid-template-columns: 2.15fr 1.2fr 1.07fr 1.25fr 1.05fr 1.5fr;
    gap: 15px;
    align-items: end;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
}

.control {
    border: 1px solid #d2dfed;
    border-radius: 11px;
    height: 55px;
    display: flex;
    align-items: center;
    background: #fff;
    min-width: 0;
    padding: 0 12px;
}

.control input,.control select {
    background: transparent;
    border: 0;
    outline: 0;
    min-width: 0;
    width: 100%;
    font: 14px Roboto,Arial,sans-serif;
    color: #152e4c;
    height: 100%;
}

.field-icon {
    margin-right: 10px;
}

.return-date {
    border-left: 1px solid #8ea3ba;
    padding-left: 17px;
}

.search-btn {
    height: 68px;
    border: 0;
    border-radius: 11px;
    background: var(--yellow);
    color: #001829;
    font: 700 18px Roboto,Arial,sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    white-space: nowrap;
}

.search-btn:hover {
    background: #ffdb43;
}

.magnifier {
    width: 24px;
    height: 24px;
    border: 4px solid #001829;
    border-radius: 50%;
    position: relative;
}

.magnifier:after {
    content: "";
    position: absolute;
    width: 14px;
    height: 4px;
    background: #001829;
    right: -11px;
    bottom: -5px;
    transform: rotate(47deg);
    border-radius: 3px;
}

.panel[hidden] {
    display: none !important;
}

.panel:not(#rental) {
    color: #06172d;
    padding: 4px 12px 12px;
}

.panel h2 {
    margin: 0 0 8px;
    font-size: 23px;
}

.panel p {
    margin: 0 0 14px;
}

.simple-fields {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.simple-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.simple-fields input {
    height: 43px;
    padding: 10px;
    border: 1px solid #cbd7e2;
    border-radius: 8px;
}

.simple-fields .search-btn {
    height: 43px;
    padding: 0 20px;
}

/* BENEFITS */
.benefits {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 34px 4.4% 60px;
    gap: 0;
}

.benefits article {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 26px 0 10px;
    position: relative;
}

.benefits article+article {
    border-left: 1px solid #6a849b;
    padding-left: 42px;
}

.benefit-icon {
    width: 81px;
    height: 81px;
    flex-shrink: 0;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--yellow);
    font-size: 39px;
}

.benefits h2 {
    font-size: 21px;
    margin: 0 0 9px;
    font-weight: 600;
}

.benefits p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: #d8e1ed;
    margin: 0;
}

@media (max-width:1200px) {
    .site-header {
        height: 155px;
    }
    .main-nav {
        gap: 12px;
        padding-top: 42px;
    }
    .brand {
        width: 34%;
    }
    .hero {
        height: 410px;
    }
    .slogan {
        top: 85px;
    }
    .award {
        width: 170px;
        top: -24px;
    }
    .booking-grid {
        gap: 10px;
    }
    .booking-card {
        padding: 18px 13px;
    }
    .control {
        padding: 0 8px;
    }
    .search-btn {
        font-size: 15px;
    }
    .benefits article {
        gap: 13px;
    }
    .benefits article+article {
        padding-left: 22px;
    }
    .benefits h2 {
        font-size: 17px;
    }
    .benefits p {
        font-size: 15px;
    }
    .benefit-icon {
        width: 62px;
        height: 62px;
        font-size: 30px;
    }
}

@media (max-width:800px) {
    .site-header {
        height: auto;
        min-height: 155px;
        display: block;
        padding: 18px 5% 12px;
    }
    .brand {
        width: 320px;
        max-width: 82%;
    }
    .main-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 18px;
        gap: 12px 18px;
    }
    .main-nav a,.language {
        font-size: 12px;
    }
    .my-reservation {
        padding-left: 12px;
    }
    .hero {
        height: 360px;
    }
    .hero-art {
        background-size: auto 100%;
        background-position: 65% center;
    }
    .slogan {
        top: 105px;
        left: 5%;
        gap: 10px;
    }
    .dash {
        width: 25px;
        margin-top: 17px;
    }
    .slogan h1 {
        font-size: clamp(24px,4.6vw,38px);
    }
    .slogan p {
        letter-spacing: 3px;
        gap: 9px;
        margin-left: 0;
    }
    .slogan p span {
        width: 25px;
    }
    .award {
        width: 110px;
        right: 4%;
        top: 2px;
    }
    .booking {
        margin: 0 3%;
    }
    .tabs {
        height: 55px;
    }
    .tab {
        font-size: 12px;
        gap: 6px;
    }
    .tab span {
        font-size: 18px;
    }
    .booking-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .pickup {
        grid-column: 1/-1;
    }
    .return-date {
        border-left: 0;
        padding-left: 0;
    }
    .search-btn {
        height: 53px;
        grid-column: 1/-1;
    }
    .benefits {
        grid-template-columns: repeat(2,1fr);
        row-gap: 30px;
    }
    .benefits article:nth-child(3) {
        border-left: 0;
        padding-left: 10px;
    }
}

@media (max-width:460px) {
    .main-nav {
        gap: 9px 14px;
    }
    .main-nav a:nth-child(5),.main-nav a:nth-child(6) {
        display: none;
    }
    .hero {
        height: 300px;
    }
    .slogan {
        top: 112px;
    }
    .slogan h1 {
        font-size: 22px;
    }
    .slogan p {
        font-size: 13px;
    }
    .award {
        width: 88px;
        top: 12px;
    }
    .tab {
        font-size: 10px;
        gap: 3px;
    }
    .tab span {
        font-size: 15px;
    }
    .booking-card {
        padding: 14px 10px;
    }
    .benefits {
        margin: 25px 3%;
        gap: 22px 8px;
    }
    .benefits article {
        padding: 0 !important;
        border: 0 !important;
        gap: 10px;
    }
    .benefit-icon {
        width: 47px;
        height: 47px;
        font-size: 22px;
    }
    .benefits h2 {
        font-size: 14px;
    }
    .benefits p {
        font-size: 12px;
    }
}

/* RESERVATION FORM EXTENSIONS */
/* Reservation fields: one row on large screens, responsive below. */

.booking-grid {
    display: grid;
    grid-template-columns: minmax(155px,1.4fr) minmax(155px,1.4fr) minmax(125px,1fr) minmax(112px,.85fr) minmax(125px,1fr) minmax(112px,.85fr) minmax(160px,1.25fr);
    gap: 12px;
    align-items: end;
}

.booking-grid .pickup,.booking-grid .return-location,.booking-grid .return-date {
    grid-column: auto;
    border: 0;
    padding: 0;
}

.booking-grid .search-btn {
    grid-column: auto;
    height: 55px;
    font-size: 15px;
    gap: 8px;
}

.booking-grid .control {
    height: 52px;
}

.booking-questions {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 36px;
    padding: 15px 3px 3px;
    color: #06172d;
    border-top: 1px solid #e2e9ef;
    margin-top: 6px;
}

.question-group {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: #06172d;
}

.question-group legend {
    font-weight: 600;
    margin-bottom: 7px;
}

.question-group label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.question-group input {
    accent-color: #001829;
}

.state-choice {
    min-width: 220px;
    flex: 1 1 250px;
    max-width: 360px;
}

.state-choice[hidden] {
    display: none !important;
}

@media (max-width:1320px) {
    .booking-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
    .booking-grid .search-btn {
        grid-column: span 2;
    }
}

@media (max-width:800px) {
    .booking-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .booking-grid .search-btn {
        grid-column: 1/-1;
    }
    .booking-questions {
        gap: 18px;
    }
}

@media (max-width:480px) {
    .booking-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    .booking-grid .pickup,.booking-grid .return-location {
        grid-column: 1/-1;
    }
    .booking-grid .search-btn {
        grid-column: 1/-1;
    }
    .booking-questions {
        display: block;
    }
    .question-group {
        margin-bottom: 14px;
    }
    .state-choice {
        max-width: 100%;
        margin-top: 8px;
    }
    .booking-grid .control input,.booking-grid .control select {
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE LAYOUT — FINAL CONSOLIDATED SETTINGS
   Desktop styles above remain unchanged.
   ============================================================ */

@media (max-width: 800px) {
    /* Compact header: logo sits close to the upper edge. */
    .site-header {
        min-height: 0;
        height: auto;
        padding: 3px 5% 5px;
    }

    .brand {
        position: relative;
        top: 0;
        margin: 0;
        line-height: 0;
    }

    .main-nav {
        padding-top: 6px;
        row-gap: 5px;
    }

    /* The award is positioned relative to the hero, above it. */
    .hero {
        height: 172px;
        z-index: 4;
    }

    .slogan {
        top: 20px;
    }

    .award {
        top: -154px;
        right: 4%;
        width: 78px;
        max-width: 20vw;
    }

    .booking {
        margin: 0 3%;
    }

    /* Shift the city/car image upward without changing the asset. */
    .hero-art {
        background-size: auto 120%;
        background-position: 65% bottom;
    }

    /* Remove only the small yellow bar before the headline. */
    .slogan .dash {
        display: none;
    }

    /* Move the headline and NO HIDDEN FEES 5px to the left. */
    .slogan {
        left: calc(5% - 5px);
    }

    /* The second navigation row sits 3px lower. */
    .main-nav .my-reservation,
    .main-nav .language {
        position: relative;
        top: 3px;
    }
}

@media (max-width: 460px) {
    .site-header {
        padding: 2px 5% 3px;
    }

    .main-nav {
        padding-top: 4px;
        row-gap: 4px;
    }

    .hero {
        height: 136px;
    }

    .slogan {
        top: 15px;
    }

    .award {
        top: -140px;
        right: 3%;
        width: 65px;
        max-width: 20vw;
    }

    .tabs {
        height: 50px;
    }

    /* Keep the vehicle visible within the shorter mobile hero. */
    .hero-art {
        background-size: auto 120%;
        background-position: 65% bottom;
    }
}

/* MOBILE — Alineación de la segunda línea del menú */
@media (max-width: 800px) {

    .main-nav .my-reservation,
    .main-nav .language {
        position: relative;
        top: 12px;
    }

    .my-reservation .profile-icon {
        position: static;
    }

}



/* Barra de progreso de cinco pasos — integrada en index.php */
/* Cars4Go: misma barra de cinco pasos de test3, aislada de los estilos de cada pagina */
.c4g-checkout-steps.c4g-shared-progress{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(8px,2vw,26px)!important;flex-wrap:wrap!important;width:100%!important;margin:0!important;padding:13px 14px!important;background:rgba(0,24,41,.86)!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.15)!important;box-sizing:border-box!important;font-family:Dosis,Arial,sans-serif!important;position:relative!important;z-index:3!important}
.c4g-checkout-steps.c4g-shared-progress>span{display:inline-flex!important;align-items:center!important;gap:7px!important;color:#d6e1eb!important;font-size:15px!important;line-height:1.2!important;white-space:nowrap!important;opacity:.8!important;position:static!important;width:auto!important;height:auto!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.c4g-checkout-steps.c4g-shared-progress>span>b{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:27px!important;height:27px!important;min-width:27px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.45)!important;color:#fff!important;background:rgba(255,255,255,.08)!important;font-size:14px!important;font-weight:700!important}
.c4g-checkout-steps.c4g-shared-progress>span>strong{font-size:15px!important;font-weight:600!important;color:inherit!important;text-transform:none!important;letter-spacing:0!important}
.c4g-checkout-steps.c4g-shared-progress>span.active{opacity:1!important;color:#ffce19!important}
.c4g-checkout-steps.c4g-shared-progress>span.active>b{background:#ffce19!important;border-color:#ffce19!important;color:#001829!important}
@media(max-width:650px){.c4g-checkout-steps.c4g-shared-progress{gap:7px 12px!important;padding:10px 8px!important}.c4g-checkout-steps.c4g-shared-progress>span,.c4g-checkout-steps.c4g-shared-progress>span>strong{font-size:12px!important}.c4g-checkout-steps.c4g-shared-progress>span>b{width:22px!important;height:22px!important;min-width:22px!important;font-size:12px!important}}


/* Premio 2026: ajuste vertical, sin alterar el diseño existente. */
.award { top: -15px; }
@media (max-width:800px) { .award { top: -125px; } }
@media (max-width:460px) { .award { top: -110px; } }

/* Premio original: desplazar hacia abajo 20% de su propia altura; conservar silueta. */
.award { transform:translateY(20%); }

/* SEO: ubicación visible dentro del H1, sin alterar el eslogan existente */
.slogan .c4g-seo-heading { display:block; font-family:Roboto,Arial,sans-serif; font-size:clamp(14px,1.2vw,18px); font-weight:500; line-height:1.35; letter-spacing:.3px; color:#f4f6fa; margin-bottom:12px; }
@media (max-width:800px) { .slogan .c4g-seo-heading {font-size:12px; margin-bottom:6px;} }
@media (max-width:460px) { .slogan .c4g-seo-heading {font-size:11px; margin-bottom:4px;} }


/* Locations: desplegable accesible para desktop y pantallas tactiles. */
.main-nav .c4g-locations-menu { position:relative; display:inline-block; color:#fff; font-size:clamp(12px,1vw,16px); font-weight:400; z-index:30; }
.main-nav .c4g-locations-menu > summary { display:list-item; list-style:none; cursor:pointer; white-space:nowrap; }
.main-nav .c4g-locations-menu > summary::-webkit-details-marker { display:none; }
.main-nav .c4g-locations-menu > summary:focus-visible { outline:2px solid #ffdc38; outline-offset:5px; }
.main-nav .c4g-location-chevron { font-size:.75em; margin-left:3px; }
.main-nav .c4g-locations-dropdown { position:absolute; z-index:50; top:calc(100% + 12px); left:0; min-width:220px; padding:8px; background:#001829; border:1px solid rgba(255,255,255,.22); border-radius:10px; box-shadow:0 12px 25px rgba(0,0,0,.25); }
.main-nav .c4g-locations-dropdown a { display:block; padding:11px 12px; color:#fff; font-size:14px; text-decoration:none; white-space:normal; border-radius:6px; }
.main-nav .c4g-locations-dropdown a:hover,.main-nav .c4g-locations-dropdown a:focus-visible { background:rgba(255,255,255,.12); color:#ffdc38; }
.c4g-seo-location-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; padding:24px 12px; background:#001829; color:#fff; font-size:14px; }
.c4g-seo-location-links a { color:#ffdc38; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:800px){ .main-nav .c4g-locations-menu { font-size:12px; } .main-nav .c4g-locations-dropdown { left:0; min-width:190px; } }
@media(max-width:460px){ .main-nav .c4g-locations-menu { display:inline-block!important; } }

/* Locations: mantener el desplegable por encima de la barra de progreso y el hero. */
.site-shell { overflow: visible; }
.site-header { z-index: 100; }
.main-nav .c4g-locations-menu { z-index: 101; }
.main-nav .c4g-locations-dropdown { z-index: 102; }