/* =========================================================================
 * css/bw-v4.css — booking widget V4 (12 Nov 2026; hover and place list on computers, v2;
 *   bigger text with .bw-v4--lg and the landing-page sheet layer, v3)
 * -------------------------------------------------------------------------
 * Styles the parts that are new in
 *   site/resources/views/shared/guest/_v2/booking-widget-v4.blade.php
 * (one "Dates and times" field and its sheet, the grouped place list, the
 * reasons to book under the button). Loaded AFTER css/bw-v3.css, which
 * still styles the shared parts (fields, place list, switch, Search cars).
 * Every rule is scoped to .bw-v4, so the V3 widget is not affected.
 * Behaviour: js/bw-v4.js
 * =========================================================================*/

/* ---------- grid: place | dates, or place | drop-off place | dates ---------- */
.bw-v4 .bw-v3__grid { grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.25fr); }
.bw-v4.bw-v3--has-dloc .bw-v3__grid { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(280px, 1.25fr); }

/* ---------- the dates field ---------- */
.bw-v4 .bw-v3__control--dates { gap: 10px; }

/* ---------- place list: Airports, City centers ---------- */
.bw-v4 .bw-v3__pop--list { max-height: 440px; }
.bw-v4 .bw-v4__grp {
    margin: 0;
    padding: 12px 12px 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--bw3-muted);
}
.bw-v4 .bw-v4__group:first-child .bw-v4__grp { padding-top: 6px; }
.bw-v4 .bw-v3__opt { font-size: 16px; min-height: 46px; }
.bw-v4 .bw-v4__sheet-head { display: none; }

/* close button (place sheet on phones, dates sheet everywhere) */
.bw-v4 .bw-v4__x {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f2f4;
    color: var(--bw3-text);
    cursor: pointer;
}
.bw-v4 .bw-v4__x svg { width: 18px; height: 18px; }

/* ---------- reasons to book, under the button ---------- */
.bw-v4 .bw-v4__trust {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: #424245;
}
.bw-v4 .bw-v4__trust li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.bw-v4 .bw-v4__trust svg { width: 15px; height: 15px; color: #1a8a3a; flex: 0 0 auto; }

/* ---------- the dates sheet (a centred window on computers, a bottom sheet on phones) ---------- */
.bw-v4 .bw-v3__field--dates .bw-v3__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 10000;
    animation: bw-v3-fade .2s ease;
}
.bw-v4 .bw-v3__field--dates .bw-v3__scrim[hidden] { display: none; }

.bw-v4 .bw-v3__pop--range {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 440px;
    max-width: calc(100vw - 32px);
    height: min(700px, calc(100vh - 48px));
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 22px;
    z-index: 10010;
    animation: bw-v4-modal .22s cubic-bezier(.32, .72, 0, 1);
}
.bw-v4 .bw-v3__pop--range[hidden] { display: none; }

@keyframes bw-v4-modal {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.bw-v4 .bw-v4__rg-head { flex: 0 0 auto; padding: 8px 16px 0; }
.bw-v4 .bw-v4__rg-grab { display: none; }
.bw-v4 .bw-v4__rg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.bw-v4 .bw-v4__rg-title { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--bw3-text); }

.bw-v4 .bw-v4__rg-legs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.bw-v4 .bw-v4__rg-leg {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--bw3-border);
    border-radius: 12px;
    font: inherit;
    color: var(--bw3-text);
    text-align: left;
    cursor: pointer;
}
.bw-v4 .bw-v4__rg-leg.is-active { border-color: var(--bw3-accent); box-shadow: inset 0 0 0 1px var(--bw3-accent); }
.bw-v4 .bw-v4__rg-leg-k { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--bw3-muted); }
.bw-v4 .bw-v4__rg-leg-v {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}
.bw-v4 .bw-v4__rg-leg-v.is-placeholder { font-weight: 500; color: var(--bw3-muted); }

.bw-v4 .bw-v4__rg-wd {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ececf0;
    font-size: 13px;
    font-weight: 600;
    color: var(--bw3-muted);
    text-align: center;
}

.bw-v4 .bw-v4__rg-months {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 16px 8px;
}
.bw-v4 .bw-v4__rg-mtitle { margin: 16px 0 6px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--bw3-text); }
.bw-v4 .bw-v4__rg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }

.bw-v4 .bw-v4__day {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--bw3-text);
    cursor: pointer;
}
.bw-v4 .bw-v4__day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.bw-v4 .bw-v4__day.is-today span { box-shadow: inset 0 0 0 1.5px var(--bw3-border); }
.bw-v4 .bw-v4__day.is-range { background: var(--bw3-accent-soft); }
.bw-v4 .bw-v4__day.is-start.has-end { background: linear-gradient(90deg, transparent 50%, var(--bw3-accent-soft) 50%); }
.bw-v4 .bw-v4__day.is-end { background: linear-gradient(90deg, var(--bw3-accent-soft) 50%, transparent 50%); }
.bw-v4 .bw-v4__day.is-start span,
.bw-v4 .bw-v4__day.is-end span { background: var(--bw3-accent); color: #fff; font-weight: 600; box-shadow: none; }
.bw-v4 .bw-v4__day:disabled { cursor: default; }
.bw-v4 .bw-v4__day:disabled span { color: #c7c7cc; background: transparent; }
.bw-v4 .bw-v4__day.is-short span { text-decoration: line-through; }

.bw-v4 .bw-v4__rg-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #ececf0;
}
.bw-v4 .bw-v4__rg-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bw-v4 .bw-v4__rg-pill {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 54px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--bw3-border);
    border-radius: 27px;
    font: inherit;
    color: var(--bw3-text);
    text-align: left;
    cursor: pointer;
}
.bw-v4 .bw-v4__rg-pill svg { width: 18px; height: 18px; color: var(--bw3-muted); flex: 0 0 auto; }
.bw-v4 .bw-v4__rg-pill-t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bw-v4 .bw-v4__rg-pill-k { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--bw3-muted); }
.bw-v4 .bw-v4__rg-pill-v { font-size: 17px; line-height: 21px; font-weight: 600; }
.bw-v4 .bw-v4__rg-pill.is-active { background: var(--bw3-accent-soft); border-color: var(--bw3-accent); box-shadow: inset 0 0 0 1px var(--bw3-accent); }

.bw-v4 .bw-v4__rg-trow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.bw-v4 .bw-v4__rg-prompt { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--bw3-text); }
.bw-v4 .bw-v4__rg-other { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--bw3-muted); }
.bw-v4 .bw-v4__rg-sel {
    height: 36px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid var(--bw3-border);
    border-radius: 10px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--bw3-text);
}

.bw-v4 .bw-v4__rg-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bw-v4 .bw-v4__rg-chip {
    appearance: none;
    -webkit-appearance: none;
    height: 44px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--bw3-border);
    border-radius: 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--bw3-text);
    cursor: pointer;
}
.bw-v4 .bw-v4__rg-chip.is-active { background: var(--bw3-accent); border-color: var(--bw3-accent); color: #fff; font-weight: 600; }

.bw-v4 .bw-v4__rg-done {
    appearance: none;
    -webkit-appearance: none;
    height: 52px;
    padding: 0 18px;
    background: var(--bw3-accent);
    border: 0;
    border-radius: 980px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.bw-v4 .bw-v4__rg-done:disabled { background: #e8e8ed; color: var(--bw3-muted); cursor: default; }

/* hover looks only where there is a mouse: on phones a tapped day, time or button keeps its chosen look
   (an iPhone keeps :hover on the last thing tapped, which turned a chosen day grey instead of black) */
@media (hover: hover) {
    .bw-v4 .bw-v4__x:hover { background: #e8e8ed; }
    .bw-v4 .bw-v4__day:hover:not(:disabled):not(.is-start):not(.is-end) span { background: rgba(0, 0, 0, .06); }
    .bw-v4 .bw-v4__rg-chip:hover:not(.is-active) { border-color: var(--bw3-accent); }
    .bw-v4 .bw-v4__rg-done:hover:not(:disabled) { background: var(--bw3-accent-dark); }
}

/* =========================================================================
 * Responsive
 * =========================================================================*/

/* computers and tablets: Airports and City centers side by side, so the whole place list fits under the field */
@media (min-width: 641px) {
    .bw-v4 .bw-v3__pop--list { width: max(100%, 480px); max-height: none; }
    .bw-v4 .bw-v4__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
    .bw-v4 .bw-v4__list .bw-v4__grp { padding-top: 6px; }
}

/* tablet: place and dates side by side; with a drop-off place, dates go full width */
@media (max-width: 1099px) {
    .bw-v4 .bw-v3__grid,
    .bw-v4.bw-v3--has-dloc .bw-v3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bw-v4 .bw-v3__field--ploc,
    .bw-v4.bw-v3--has-dloc .bw-v3__field--ploc { grid-column: auto; }
    .bw-v4.bw-v3--has-dloc .bw-v3__field--dates { grid-column: 1 / -1; }
}

/* phone: one column, bottom sheets */
@media (max-width: 640px) {
    .bw-v4 .bw-v3__grid,
    .bw-v4.bw-v3--has-dloc .bw-v3__grid { grid-template-columns: 1fr; }
    .bw-v4.bw-v3--has-dloc .bw-v3__field--dates { grid-column: auto; }

    .bw-v4 .bw-v3__pop--list { max-height: 80vh; padding: 8px 10px 10px; }
    .bw-v4 .bw-v4__sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 4px 4px; }
    .bw-v4 .bw-v4__sheet-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--bw3-text); }
    .bw-v4 .bw-v3__opt { font-size: 17px; min-height: 50px; }

    .bw-v4 .bw-v3__pop--range {
        inset: auto 0 0 0;
        margin: 0;
        width: auto;
        max-width: none;
        height: 92vh;
        height: 92dvh;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: bw-v3-sheet .26s cubic-bezier(.32, .72, 0, 1);
    }
    .bw-v4 .bw-v4__rg-grab { display: block; width: 38px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: #d2d2d7; }

    .bw-v4 .bw-v4__trust { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 2px; font-size: 13px; }
}

/* short phones (iPhone SE and smaller): a slimmer header and footer leave more room for the days */
@media (max-width: 640px) and (max-height: 720px) {
    .bw-v4 .bw-v4__rg-legs { margin-top: 4px; }
    .bw-v4 .bw-v4__rg-leg { min-height: 48px; padding: 6px 12px; }
    .bw-v4 .bw-v4__rg-wd { margin-top: 8px; }
    .bw-v4 .bw-v4__rg-foot { gap: 8px; padding: 10px 16px 12px; }
    .bw-v4 .bw-v4__rg-pill { height: 48px; }
    .bw-v4 .bw-v4__rg-done { height: 48px; }
    .bw-v4 .bw-v4__rg-mtitle { margin: 12px 0 4px; }
}

/* very narrow phones */
@media (max-width: 360px) {
    .bw-v4 .bw-v4__day { height: 42px; }
    .bw-v4 .bw-v4__day span { width: 38px; height: 38px; font-size: 15px; }
    .bw-v4 .bw-v4__rg-chips { gap: 6px; }
    .bw-v4 .bw-v4__rg-chip { font-size: 14px; }
    .bw-v4 .bw-v4__rg-pill { padding: 0 12px; gap: 7px; }
}

/* BW-TEXT v1 (12 Nov 2026): bigger, darker text in the form, the place list and the dates sheet.
   Only with .bw-v4--lg on the widget (set by booking-widget-v4.blade.php while the switch shows it).
   The chosen place and dates go to 18px only in the main search forms: the review page, the fleet
   page and the calculator keep 17px, where 18px French dates no longer fit on one line. */
.bw-v4.bw-v4--lg .bw-v3__label { font-size: 15px; color: #424245; margin-bottom: 8px; }
.bw-v4.bw-v4--lg .bw-v3__label-ic { width: 16px; height: 16px; }
/* the main search forms (home, city, airport and car landing pages) also get 18px for the chosen place and dates */
.bw-v4.bw-v4--lg .bw-v3__form:not(#bw-form-fleet):not(#cv2-form) .bw-v3__value { font-size: 18px; }
.bw-v4.bw-v4--lg .bw-v3__switch-label { font-size: 16px; }
.bw-v4.bw-v4--lg .bw-v3__submit { font-size: 18px; }
.bw-v4.bw-v4--lg .bw-v4__trust { font-size: 15px; }
.bw-v4.bw-v4--lg .bw-v4__trust svg { width: 16px; height: 16px; }
.bw-v4.bw-v4--lg .bw-v4__grp { font-size: 15px; }
.bw-v4.bw-v4--lg .bw-v3__opt { font-size: 17px; }
.bw-v4.bw-v4--lg .bw-v4__rg-title,
.bw-v4.bw-v4--lg .bw-v4__sheet-title { font-size: 20px; }
.bw-v4.bw-v4--lg .bw-v4__rg-leg-k { font-size: 14px; line-height: 18px; }
.bw-v4.bw-v4--lg .bw-v4__rg-leg-v { font-size: 16px; line-height: 21px; }
.bw-v4.bw-v4--lg .bw-v4__rg-wd { font-size: 14px; }
.bw-v4.bw-v4--lg .bw-v4__rg-mtitle { font-size: 18px; }
.bw-v4.bw-v4--lg .bw-v4__day span { font-size: 18px; }
.bw-v4.bw-v4--lg .bw-v4__rg-pill-k { font-size: 14px; line-height: 17px; }
.bw-v4.bw-v4--lg .bw-v4__rg-pill-v { font-size: 18px; line-height: 22px; }
.bw-v4.bw-v4--lg .bw-v4__rg-prompt,
.bw-v4.bw-v4--lg .bw-v4__rg-other { font-size: 15px; }
.bw-v4.bw-v4--lg .bw-v4__rg-sel { font-size: 17px; }
.bw-v4.bw-v4--lg .bw-v4__rg-chip { font-size: 17px; }
.bw-v4.bw-v4--lg .bw-v4__rg-done { font-size: 18px; }
@media (max-width: 640px) {
    .bw-v4.bw-v4--lg .bw-v3__opt { font-size: 18px; }
    .bw-v4.bw-v4--lg .bw-v3__submit { padding: 0 16px; }
    /* phones: the switch keeps 14px in the narrower fleet and calculator forms, 15px in the main search forms */
    .bw-v4.bw-v4--lg .bw-v3__switch-label { font-size: 14px; }
    .bw-v4.bw-v4--lg .bw-v3__form:not(#bw-form-fleet):not(#cv2-form) .bw-v3__switch-label { font-size: 15px; }
}
/* phones narrower than an iPhone 12-16 (375 px and less): the longest French words keep a size
   that fits, so the dates and the sheet's pick-up and return boxes stay on one line */
@media (max-width: 389px) {
    .bw-v4.bw-v4--lg .bw-v3__form:not(#bw-form-fleet):not(#cv2-form) .bw-v3__value { font-size: 17px; }
    .bw-v4.bw-v4--lg .bw-v4__rg-leg-v { font-size: 15px; line-height: 20px; }
    .bw-v4.bw-v4--lg .bw-v4__rg-pill-k { font-size: 13px; line-height: 16px; }
}
@media (max-width: 360px) {
    .bw-v4.bw-v4--lg .bw-v4__day span { font-size: 16px; }
    .bw-v4.bw-v4--lg .bw-v4__rg-chip { font-size: 15px; }
    .bw-v4.bw-v4--lg .bw-v4__rg-leg-v { font-size: 14px; }
    .bw-v4.bw-v4--lg .bw-v3__form:not(#bw-form-fleet):not(#cv2-form) .bw-v3__switch-label { font-size: 14px; }
    /* the longest button labels ("Rechercher des voitures", "Confirmer les dates") stay on one line */
    .bw-v4.bw-v4--lg .bw-v3__submit { font-size: 17px; padding: 0 12px; }
    .bw-v4.bw-v4--lg .bw-v3__submit svg { display: none; }
}

/* LP-SHEET v1 (12 Nov 2026): on the car landing pages the form sits in .lp-bw, which keeps its own layer
   (z-index 10) so the card can overlap the photo. While one of the form's panels is open, that layer goes
   above the site's top bar and the WhatsApp button, so the dates sheet and its dark backdrop cover them,
   as on the other pages. */
.lp-bw:has(.bw-v4 .bw-v3__pop:not([hidden])) { z-index: 10002; }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bw-v4 .bw-v3__pop--range, .bw-v4 .bw-v3__field--dates .bw-v3__scrim { animation: none !important; }
    .bw-v4 .bw-v4__day span { transition: none !important; }
}