/*
 * Launch fixes of the old site's look (audit P0, docs/research/2026-10-27-propunere-ux-conversie-seo.md), loaded after
 * minified_*.css and structura-seo.css (src/app/[lang]/layout.tsx). Each rule changes the page only where the old CSS
 * fails; where it works, the page looks as before.
 */

/* ---- row 3: „Continuă fără discount” under the popup's button ---- */
#adsModal .ads-skip-wrap { margin-top: 10px; }
#adsModal .ads-skip-discount { color: #555; font-size: 14px; text-decoration: underline; }
#adsModal .ads-skip-discount:hover, #adsModal .ads-skip-discount:focus { color: #006598; }

/*
 * ---- row 8: the search form's dates must be readable at every width ----
 * On one line the old 40/20/20/20 columns left the date input 46-108 px wide, too narrow for "28-10-2026" with its
 * padding: it looked empty. The date columns take what the date (140 px) and the hour need.
 *  - >= 1200 px: one line; the location column is never narrower than its label (Safari's wider font ran it into the
 *    date's icon, Safari audit 31.10) and the button column gives way.
 *  - 768-1199 px: the four fields do not fit on one line (the button went alone on a second row at 1000-1100 px):
 *    the location gets the first row, the dates and the button the second, as with „Returnez în altă locație” below.
 * Under 768 px the form is one column and the dates were already wide.
 */
.datetime-group .date-range-start input.date,
.datetime-group .date-range-end input.date { min-width: 140px; }
@media (min-width: 768px) {
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:has(.datetime-group) { flex: 0 0 auto; width: auto; max-width: none; }
  .wrapper-reservation-form .datetime-group > .date-range-start,
  .wrapper-reservation-form .datetime-group > .date-range-end { flex: 0 0 auto; }
  .wrapper-reservation-form .datetime-group input.date { width: 140px; min-width: 140px; padding-left: 18px; padding-right: 18px; }
  .wrapper-reservation-form .datetime-group > .box-time-select { flex: 0 0 auto; width: 110px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .wrapper-reservation-form:has(.datetime-group):not(:has(.box-return-location:not(.hidden))) { flex-wrap: wrap; row-gap: 16px; }
  .wrapper-reservation-form:has(.datetime-group):not(:has(.box-return-location:not(.hidden))) > .col-md-40 { flex: 0 0 100%; width: 100%; max-width: 100%; }
  .wrapper-reservation-form:has(.datetime-group):not(:has(.box-return-location:not(.hidden))) > .col-md-40 .wrapper-locations { max-width: 520px; }
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:not(:has(.datetime-group)) { flex: 1 0 auto; width: auto; max-width: none; align-self: flex-end; padding-top: 0 !important; }
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:not(:has(.datetime-group)) .box-submit-button { margin-left: auto; }
}
/* The fleet's and the car page's form on one line (>= 1200 px, Vlad 31.10: „s-a descentrat”): their row aligned its
   columns at the bottom, and the location column, taller by „Returnez în altă locație” under its field, put its label
   and field 44 px above the dates'. The columns start together, as on the homepage; the button comes down by a label
   (23 px + its 5 px margin), level with the fields. */
@media (min-width: 1200px) {
  .wrapper-reservation-form:has(.send-estimate):not(:has(.box-return-location:not(.hidden))) { align-items: flex-start; }
  .wrapper-reservation-form:has(.send-estimate):not(:has(.box-return-location:not(.hidden))) > .col-md-20:not(:has(.datetime-group)) { align-self: flex-start; padding-top: 28px !important; }
}
/* 1200-1399 px: their labels are larger than the homepage's, and the row ran 45 px past the form („Modifică informațiile”
   cut at the edge, UX review 31.10): the date and the hour a little narrower, the button whole */
@media (min-width: 1200px) and (max-width: 1399px) {
  .wrapper-reservation-form:has(.send-estimate) .datetime-group input.date { width: 106px; min-width: 106px; padding-left: 10px; padding-right: 10px; }
  .wrapper-reservation-form:has(.send-estimate) .datetime-group > .box-time-select { width: 96px; }
  .wrapper-reservation-form:has(.send-estimate):not(:has(.box-return-location:not(.hidden))) > .col-md-20:not(:has(.datetime-group)) { flex: 0 1 auto; width: auto; min-width: 150px; max-width: none; }
  .wrapper-reservation-form:has(.send-estimate) .box-submit-button button.send-estimate { font-size: 15px; padding-left: 10px; padding-right: 10px; }
}
/* „Returnez în altă locație” open, 992-1199 px: the button's column a little wider, „Modifică informațiile” on one line
   (it was cut, UX review 31.10) */
@media (min-width: 992px) and (max-width: 1199px) {
  #form-reservation .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:nth-child(2),
  #form-reservation .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:nth-child(3) { flex: 0 0 36%; max-width: 36%; }
  #form-reservation .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:last-child { flex: 0 0 28%; max-width: 28%; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .box-submit-button button.send-estimate { font-size: 15px; padding-left: 10px; padding-right: 10px; }
}
/* „Returnez în altă locație” open: the date fills its share of the column, its hour right beside it (it drifted 40-120 px
   away, UX review 31.10) */
@media (min-width: 768px) {
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .datetime-group input.date { width: 100%; min-width: 0; }
}
/* tablets (768-991 px): the two date columns share the second row, the date and the hour narrow with it; the button
   gets the third row */
@media (min-width: 768px) and (max-width: 991px) {
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:has(.datetime-group) { flex: 1 1 40%; min-width: 0; }
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:not(:has(.datetime-group)) { flex: 0 0 100%; }
  .wrapper-reservation-form .datetime-group { display: grid !important; grid-template-columns: 3fr 2fr; gap: 12px; }
  .wrapper-reservation-form .datetime-group > * { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .wrapper-reservation-form .datetime-group input.date { width: 100%; min-width: 0; }
}
@media (min-width: 1200px) {
  .wrapper-reservation-form:has(.datetime-group) { flex-wrap: nowrap; }
  .wrapper-reservation-form:has(.datetime-group) > .col-md-40 { flex: 1 1 0%; width: auto; max-width: none; min-width: min-content; }
  .wrapper-reservation-form:has(.datetime-group) > .col-md-20:not(:has(.datetime-group)) { flex: 0 1 20%; max-width: 20%; margin-left: 0; }
}

/*
 * ---- row 9: the banner of the home and location pages when its picture does not load ----
 * The white H1 sat on the page's white background. A dark fallback colour behind the picture (hidden by the picture
 * when it loads: the image covers the whole banner) and no broken-image text.
 */
.wrapper-banner .banner-content { background-color: #0d3b56; background-image: linear-gradient(135deg, #0d3b56 0%, #006598 100%); }
.wrapper-banner .banner-content > img.hero-video { color: transparent; }

/*
 * ---- row 10: the car page at 992–1199 px ----
 * The gallery's column grew to the width of all the slides (slick, ~65 000 px) because a flex item never shrinks
 * under its content (min-width: auto). min-width: 0 keeps it in its column; between 992 and 1199 px the gallery and
 * the price sit side by side, as from 1200 px, so the price stays in the first screen.
 */
.wrapper-car-details > .container > .row > [class*='col-'],
.slider-car-images-wrapper > * { min-width: 0; }
@media (min-width: 992px) and (max-width: 1199px) {
  .wrapper-car-details > .container > .row > .col-lg-8 { flex: 0 0 62%; width: 62%; max-width: 62%; }
  .wrapper-car-details > .container > .row > .col-lg-4 { flex: 0 0 38%; width: 38%; max-width: 38%; }
}

/* Fleet opened from „Rezervă mașina” on the home page: the chosen car is outlined for a few seconds. */
.home-reserve-target { outline: 3px solid #3069ef; outline-offset: 6px; border-radius: 20px; transition: outline-color .6s; }

/* The outline of the chosen car was cut by the carousel's overflow: draw it inside the card. Lists above the phone's call bar. */
.home-reserve-target { outline: 0; box-shadow: inset 0 0 0 3px #3069ef, 0 0 0 6px #3069ef33 !important; }
.select2-container--open { z-index: 10060; }

/* A finer scale on desktop (Vlad 28.10: „să nu mai fie butucănos”), instead of zooming the whole page: a lighter
   header on every page (the footer has its own sizes since 30.10: footer-original.module.css). The car cards keep their size. */
@media (min-width: 992px) {
  .header-site { padding: 6px 28px !important; }
  .header-site .header-menu-item { font-size: 15px !important; padding: 8px 14px !important; }
  .header-site .navbar-brand img, .header-site a img[alt*="ogo"] { height: 40px !important; width: auto !important; }
  .header-site .btn.button-primary { font-size: 15px !important; min-height: 42px; padding-top: 10px; padding-bottom: 10px; }
}

/* Short / long term (Solutions): tiles on wide screens, cards on phones — chosen by the screen, not the user agent. */
@media (max-width: 991px) { .wrapper-solutions .solutions-tiles { display: none !important; } }
@media (min-width: 992px) { .wrapper-solutions .solutions-cards { display: none !important; } }

/* Floating search on the home page (wlc-site.js): a slim pill under the header once the form has scrolled away. */
.wlc-float-search { position: fixed; left: 50%; top: 84px; z-index: 1040; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease, top .3s ease; width: min(560px, calc(100vw - 24px)); }
.wlc-float-search.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.wlc-fs-open { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 6px 6px 16px; border: 1px solid #e3e9f0; border-radius: 999px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(14, 34, 57, .14); color: #1a2b33; text-align: left; cursor: pointer; font: inherit; }
.wlc-fs-open:hover { border-color: #c9d6ff; box-shadow: 0 12px 34px rgba(48, 105, 239, .18); }
.wlc-fs-open:focus-visible { outline: 3px solid #3069ef; outline-offset: 3px; }
.wlc-fs-icon { display: inline-flex; color: #3069ef; flex: none; }
.wlc-fs-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.wlc-fs-text strong { font: 14px Raleway-Bold, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wlc-fs-text small { font: 12px Raleway-Regular, Arial, sans-serif; color: #5a6b78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: lining-nums; }
.wlc-fs-go { flex: none; padding: 10px 18px; border-radius: 999px; background: #3069ef; color: #fff; font: 14px Raleway-Bold, Arial, sans-serif; }
@media (max-width: 767px) {
  .wlc-float-search { width: calc(100vw - 20px); }
  .wlc-fs-open { min-height: 48px; padding: 4px 4px 4px 12px; gap: 10px; }
  .wlc-fs-text strong { font-size: 13px; }
  .wlc-fs-text small { font-size: 11px; }
  .wlc-fs-go { padding: 9px 14px; font-size: 13px; }
}
/* the smallest phones (320–359): without the icon the question and the dates fit whole */
@media (max-width: 359px) { .wlc-fs-icon { display: none; } .wlc-fs-open { gap: 8px; } .wlc-fs-go { padding: 9px 11px; } }
@media (prefers-reduced-motion: reduce) { .wlc-float-search { transition: none; } }
.wlc-fs-short { display: none; }
@media (max-width: 767px) { .wlc-fs-long { display: none; } .wlc-fs-short { display: inline; } }

/* Full-page UX audit, 29.10 — site-wide fixes (header, footer, lists, calendar, short/long term cards). */
/* Short / long term cards up to tablets, as on wlc.ro: centred white cards, the whole photo, room under the title. */
@media (max-width: 991px) {
  .wrapper-solutions .wrapper-solution.solutions-cards { display: block !important; max-width: 560px; margin: 0 auto 32px !important; padding: 21px; border-radius: 20px; background: #fff; }
  .wrapper-solutions .wrapper-solution-img { display: block; width: 100%; height: auto !important; aspect-ratio: 358 / 159; object-fit: cover; object-position: center; border-radius: 10px; margin-bottom: 24px; }
  .wrapper-solutions .solutions-title { display: flex; align-items: center; gap: 12px; font-size: 22px !important; line-height: 1.35; margin: 0 0 16px !important; text-wrap: balance; }
  .wrapper-solutions .solutions-title img { flex: 0 0 29px; }
  .wrapper-solutions .solutions-content { font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
}
/* Header: a 44px menu button on phones. */
@media (max-width: 991px) { .header-site .navbar-toggle { min-width: 44px; min-height: 44px; } }
/* Lists: 44px options. */
.select2-results__option { min-height: 44px; padding: 11px 16px !important; display: flex; align-items: center; }
/* Calendar: a past month cannot be chosen, and hover is lighter than the chosen day. */
.ui-datepicker .ui-datepicker-prev.ui-state-disabled { opacity: .3; pointer-events: none; }
.ui-datepicker td a.ui-state-hover:not(.ui-state-active) { background: #e6f0ff !important; color: #1f4fd1 !important; }

/* Search form, every page: a visible keyboard focus and a 44px „Returnez în altă locație”. */
.box-form-reservation .form-control:focus-visible,
.box-form-reservation .select2-selection:focus-visible,
.box-form-reservation .button-primary:focus-visible,
.box-form-reservation .home-different-return:focus-visible { outline: 3px solid #3069ef !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(48, 105, 239, .18) !important; }
/* once the return field is open the link is hidden (main.js adds .hidden); a forced display left a 44px gap */
.home-different-return:not(.hidden) { min-height: 44px; display: inline-flex !important; align-items: center; }
.home-different-return.hidden { display: none !important; }
/* „Returnez în altă locație” / „Returnez la locul de preluare”: real buttons in every search form, so the keyboard can
   do what the mouse does through the list's top option (Vlad 29.10). Outside the homepage the first one stays out of the
   way on desktop and appears under the pick-up field only while it has the keyboard focus. */
.home-different-return, .wlc-same-return { border: 0; background: transparent; color: #285ad0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0 0; }
.wlc-same-return { display: inline-flex; align-items: center; min-height: 32px; }
.box-form-reservation .wlc-same-return:focus-visible, .box-form-reservation #hide_drop_off_location:focus-visible { outline: 3px solid #3069ef !important; outline-offset: 2px; }
.box-form-reservation #hide_drop_off_location { cursor: pointer; }
@media (max-width: 767px) { .wlc-same-return { min-height: 44px; } }
@media (min-width: 768px) {
  .wrapper-locations > .box-filter-select { position: relative; }
  .home-different-return.wlc-return-quiet:not(.hidden) { position: absolute !important; top: 100%; left: 0; z-index: 5; min-height: 0 !important; padding: 6px 10px !important; background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
  .home-different-return.wlc-return-quiet:not(.hidden):not(:focus) { width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }
}

/* Bootstrap's `scroll-behavior: smooth` on <html> stops the old site's jQuery scroll animations half-way
   ($('html, body').animate({scrollTop}) in main.js: .click_calendar, the fleet filters…). The scripts that want a
   smooth scroll ask for it themselves (window.scrollTo({behavior:'smooth'})). */
html { scroll-behavior: auto !important; }

/* Map (home and location pages): the pins are there from the first frame — the drop is only a movement, so a paused
   or slow animation never leaves them invisible. On phones the close labels sit on opposite sides. The text panel
   over the airport photo reads on a darker glass. */
@keyframes wlc-map-drop { 0% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .wlc-map-pin { animation: none !important; } }
@media (max-width: 767px) {
  /* the label side of each city on phones is in the map's data (locations-map.tsx `phone`, structura-seo.css) */
  .wlc-map-label { font-size: 11px; }
}
.wrapper-assistance .content-assistance { background: rgba(8, 20, 29, .84) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wrapper-assistance .content-assistance, .wrapper-assistance .content-assistance p, .wrapper-assistance .content-assistance li { color: #fff; }

/* ══ Scala comună WLC (Vlad 29.10: aceleași proporții pe toate paginile — home, flotă, mașină, orașe, categorii) ══
   The values agreed on the home page, as variables and as rules on the shared class names, so every page renders at
   the same scale whatever template it uses. Page CSS may add layout, not other sizes. */
:root {
  --wlc-blue: #0070ff; --wlc-ink: #1a1a1a; --wlc-muted: #526171;
  --wlc-h1: 54px; --wlc-h1-m: 34px; --wlc-h1-plain: 40px; --wlc-h1-plain-m: 30px;
  --wlc-h2: 32px; --wlc-h2-m: 26px; --wlc-h3: 20px; --wlc-eyebrow: 14px; --wlc-text: 15px; --wlc-lh: 1.65;
  --wlc-gap: 96px; --wlc-gap-m: 56px; --wlc-radius-card: 20px; --wlc-radius-btn: 10px; --wlc-btn-h: 48px;
}
/* Hero title (every page with the photo banner) and a plain page title */
h1.title-homepage-rent { font-size: var(--wlc-h1) !important; line-height: 1.04 !important; }
h1:not(.title-homepage-rent) { font-size: var(--wlc-h1-plain) !important; line-height: 1.15 !important; }
/* Section titles */
h2.header-title, h2.subtitle-about-us, h2.title-offer-widget, h2.first-benefits-title, h2.home-story-widget-title, h2.reservation-now-title,
h2.car-details-widget-title, h2.info-faq-section-title, h2.wrapper-title-categories-label, .wrapper-title-categories-label {
  font-family: Syne-Medium, sans-serif !important; font-weight: 500 !important; font-size: var(--wlc-h2) !important; line-height: 1.2 !important;
  letter-spacing: normal; text-transform: none; text-wrap: balance;
}
/* The small blue label over a title */
.header-title-blue, .subtitle-offers { font: var(--wlc-eyebrow)/1.4 Syne-Bold, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: var(--wlc-blue); }
/* Body text in the content blocks */
.about-us-description, .about-us-description p, .header-description, .home-story-widget-text, .home-story-widget-text p { font-size: var(--wlc-text); line-height: var(--wlc-lh); }
/* Primary buttons */
.button-primary { min-height: var(--wlc-btn-h); border-radius: var(--wlc-radius-btn) !important; }
@media (max-width: 767px) {
  h1.title-homepage-rent { font-size: var(--wlc-h1-m) !important; }
  h1:not(.title-homepage-rent) { font-size: var(--wlc-h1-plain-m) !important; }
  h2.header-title, h2.subtitle-about-us, h2.title-offer-widget, h2.first-benefits-title, h2.home-story-widget-title, h2.reservation-now-title,
  h2.car-details-widget-title, h2.info-faq-section-title, h2.wrapper-title-categories-label, .wrapper-title-categories-label { font-size: var(--wlc-h2-m) !important; }
}
/* Header between 992 and 1199px (laptops at 1024): the menu stays on one line. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-site { padding: 6px 16px !important; }
  .header-site .header-menu-item { white-space: nowrap; padding: 8px 9px !important; font-size: 14px !important; }
  .header-site .btn.button-primary { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
  /* the logo a little smaller, with air before the menu (it was 2px from it) */
  .header-site .navbar-brand { margin-right: 16px; }
  .header-site .navbar-brand img { max-width: 112px; height: auto; }
}

/* „Returnez în altă locație” on every search form (Vlad 29.10: outside the homepage the fields were squeezed into
   one row): the two places get the whole first row, side by side; dates and the button move to the second row, the same on
   the homepage, city, category and /flota-auto pages. */
@media (min-width: 768px) {
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) { flex-wrap: wrap; row-gap: 16px; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:first-child { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .wrapper-locations { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .wrapper-locations > * { width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: 0 !important; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .wrapper-locations label { margin-top: 0 !important; min-height: 25px; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .select2-container { width: 100% !important; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .datetime-group { display: grid !important; grid-template-columns: 3fr 2fr; gap: 12px; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) .datetime-group > * { width: 100% !important; max-width: none !important; margin: 0 !important; }
}
@media (min-width: 992px) {
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:nth-child(2),
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:nth-child(3) { flex: 0 0 37.5%; max-width: 37.5%; }
  .wrapper-reservation-form:has(.box-return-location:not(.hidden)) > .padding-input-form:last-child { flex: 0 0 25%; max-width: 25%; align-self: flex-end; padding-top: 0 !important; }
}

/* An open list sits in <body>; the old `.select2-container { width:100% !important }` made it as wide as the page from
   the field's left edge, so the page scrolled sideways while a list was open (1024px, Pagini de categorie 29.10). */
body > .select2-container { width: auto !important; }

/* Phones: the old styles centre an open list (left:50% + translate, !important) away from its field. wlc-site.js gives
   each open list its field's place and width; select2 placing the list again no longer moves it sideways. */
@media (max-width: 768px) {
  body > .select2-container.select2-container--open { left: var(--wlc-s2-left, 50%) !important; width: var(--wlc-s2-width, calc(100vw - 96px)) !important; max-width: none; transform: none !important; }
  body > .select2-container.select2-container--open:not([style*="--wlc-s2-left"]) { transform: translateX(-50%) !important; }
}

/* ══ Booking flow: centring and alignment (29.10, /flota-auto → /adauga-extra → /plata) ══ */
/* (/flota-auto is the Fleet's: its rows keep their own alignment, from the left; removed here 30.10) */

/* /plata: the box was an 11/12 column stuck to the left (128 px free on the left, 220 px on the right): centred, as on
   /adauga-extra. */
section.wrapper-container-payment > .col-md-11 { float: none; margin-left: auto !important; margin-right: auto !important; }
/* /plata: the field rows had width: 100% on top of Bootstrap's −15 px margins, so every field ended 30 px before the
   column (on phones 20 px on the left, 50 px on the right). */
.wrapper-payment .payment-client-details > .row { width: auto; }
/* The step titles („Alege o opțiune extra”, „Detaliile rezervării tale”, „Sumarul pachetului tău”) were 36 px, off the
   common scale: section-title size, so the summary's title stays on one line and leaves no gap under the left one. */
.wrapper-booking-top-title { font-size: var(--wlc-h2) !important; line-height: 1.2; }
@media (max-width: 767px) { .wrapper-booking-top-title { font-size: var(--wlc-h2-m) !important; } }
/* phones: the title on the fields' edge (the client details have 5 px more padding) */
@media (max-width: 991px) { .wrapper-payment .wrapper-booking-top-title { padding-left: 5px; padding-right: 5px; } }
.wrapper-payment .wrapper-booking-top-title { margin-bottom: 24px; }

@media (min-width: 992px) {
  /* /adauga-extra and /plata: a wider summary column, so the button text, the car name and the price rows fit
     („Continuă cu finalizarea rezervării” was cut, the name broke on three lines). */
  .wrapper-booking-flex-top .wrapper-booking-inner > .col-lg-7,
  .wrapper-container-payment .wrapper-booking-inner > .col-lg-7 { flex: 0 0 56%; max-width: 56%; }
  .wrapper-booking-flex-top .wrapper-booking-inner > .col-lg-5,
  .wrapper-container-payment .wrapper-booking-inner > .col-lg-5 { flex: 0 0 44%; max-width: 44%; }
  .wrapper-container-payment .wrapper-booking-inner > .col-md-7 { flex: 0 0 56%; max-width: 56%; align-self: flex-end; }
  .wrapper-container-payment .wrapper-booking-inner > .col-md-5 { flex: 0 0 44%; max-width: 44%; }
  .wrapper-booking-right { padding-left: 28px !important; padding-right: 28px !important; }
  /* the summary's divider lines reach the card's edges (they were set for the old 48 px padding and stuck out 22 px) */
  .wrapper-booking-right .summary-border, .wrapper-booking-right .summary-border-bottom { margin-left: -29px !important; margin-right: -29px !important; }
  .wrapper-booking-right .summary-form-wrapper .button-primary { width: 100%; padding-left: 12px; padding-right: 12px; white-space: normal; }
  /* the car's photo above its name, both the column's width */
  .wrapper-booking-right .row.align-items-center:has(> .box-car-image) { flex-direction: column-reverse; align-items: flex-start !important; }
  .wrapper-booking-right .row.align-items-center:has(> .box-car-image) > [class*='col-'] { flex: none; width: 100%; max-width: 100%; }
  .wrapper-booking-right .box-car-image img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 12px; }

  /* /plata: one field per row (the placeholders were cut at 217 px) */
  .wrapper-payment .payment-client-details .row > .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  .wrapper-payment .payment-client-details .row > .col-lg-6:not(:last-child) { margin-bottom: 16px; }
  .wrapper-payment .payment-client-details .phone-wrapper { margin-top: 0; }
  /* the promo code field takes the row, the button stays at its end */
  .wrapper-payment .wrapper-voucher { display: flex; gap: 12px; }
  .wrapper-payment .wrapper-voucher > .box-voucher-input { flex: 1 1 auto; width: auto; max-width: none; }
  .wrapper-payment .wrapper-voucher > .box-voucher-button { flex: none; width: auto; }
  /* „Ești client existent?” on the form's width, its arrow at the end of the line (it fell under the text) */
  .wrapper-payment .wrapper-client-details > .container .col-lg-6 { flex: none; width: 100%; max-width: 100%; }
}

/* /adauga-extra: the breadcrumb sat in a nested .container (30 px further in than the title): above the title, on its edge. */
.wrapper-booking-top .container-breadcrumb { margin-bottom: 8px; }
.wrapper-booking-top .container-breadcrumb > .container { width: auto; max-width: none; margin: 0; padding: 0; }
.wrapper-booking-top .container-breadcrumb .breadcrumb { padding-left: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; row-gap: 4px; }
.wrapper-booking-top:has(.container-breadcrumb) { flex-direction: column-reverse; align-items: flex-start; }
/* /adauga-extra: a long extra name („Kilometri Nelimitați – Condu fără griji!”) ran into „Detalii”. */
.wrapper-booking-left .panel-title { gap: 16px; }
.wrapper-booking-left .panel-title > .collapse-input { flex: none; }
/* /adauga-extra and /plata at 992–1199 px (laptops at 1024): the box takes the header's width and less inner padding,
   so the names, the summary rows and the fields stop breaking (the content was 704 px of 930). */
@media (min-width: 992px) and (max-width: 1199px) {
  .wrapper-booking-flex-top > .col-md-11, section.wrapper-container-payment > .col-md-11 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .wrapper-booking-flex-top .wrapper-booking-inner { padding-left: 32px; padding-right: 32px; }
}

/* ══ Booking flow: prices with two decimals and discounts (29.10, „114,00 €”) ══ */
/* /adauga-extra: „12,00 € / perioadă” — the price and its unit on one line, a space between them (the flex row ate it) */
.wrapper-booking-left .extra p.price { gap: 4px; align-items: baseline; flex-wrap: wrap; }
.wrapper-booking-left .extra p.price > strong { white-space: nowrap; }
.wrapper-booking-left .extra p.price .price-unit { font-weight: 400; color: #656565; }
/* the summary: a price never breaks between the number and „€” and keeps its column on the right */
.wrapper-booking-right .pull-right, .wrapper-booking-right .summary-label > span,
.wrapper-booking-right .price-val, .summary-payment .price-val, .summary-payment .extras-total { white-space: nowrap; }
.wrapper-booking-right .summary-label { gap: 12px; }
/* „3 × 31,00 € 28,00 €”: the old price struck through, then the new one, on one baseline */
.summary-per-day { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.summary-per-day > span { white-space: nowrap; }
/* phones, „Detalii preț”: the rental row and the online discount, in the same columns as the extras */
.summary-modal-rent li { gap: 12px; align-items: baseline !important; }
.summary-modal-rent .extras-price { white-space: nowrap; }
.summary-modal-total > span:last-child { white-space: nowrap; }

/* Search form details (UX 29.10): the revert link clear of the field's focus ring, a focus ring in the list's search
   box, the typed-place option looking choosable, labels on one line on laptops, a tappable × on phones, the
   missing pick-up message by its field. */
.wlc-same-return { margin-top: 6px; }
.select2-container--open .select2-search__field:focus-visible { outline: 2px solid #3069ef !important; outline-offset: 1px; }
.select2-custom-add-location { background: #e8f0ff; cursor: pointer; }
@media (min-width: 992px) { .wrapper-reservation-form .padding-input-form > label, .wrapper-reservation-form .box-filter-select > label { white-space: nowrap; } }
@media (max-width: 767px) { .box-form-reservation #hide_drop_off_location { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -13px -12px; } }
.wlc-pick-error { margin: 6px 0 0; color: #c62828; font-size: 13px; font-weight: 600; }

/* Keyboard focus on the whole site: the old bundle removes every outline (`:focus,:focus-visible{outline:0!important}`),
   so a keyboard user could not see where they are (Restul paginilor 29.10). Back for keyboard focus only. */
html body :focus-visible { outline: 3px solid #3069ef !important; outline-offset: 2px; }
/* „Sari la conținut” (wlc-site.js): first on Tab, hidden until then. */
.wlc-skip { position: fixed; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: #fff; color: #1a1a1a; font: 15px Raleway-Bold, Arial, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: top .15s ease; }
.wlc-skip:focus { top: 12px; text-decoration: none; }
#continut:focus { outline: 0 !important; }

/* „Vezi mai mult” in the reviews: a 17px text link, now a 44px tap area on phones and tablets (Pagini de locații, UX 29.10). */
@media (max-width: 767px), (hover: none) {
  .review-text-more { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Prices in the single format „2.680,20 €/lună” (Vlad 29.10): amount, € and period stay on one line. */
.wlc-price { white-space: nowrap; }
/* /long-term/lista-masini: a two-line car name no longer pushes the price below its neighbours'; on a phone the
   „23 de modele disponibile” count wraps instead of running under „Sortează” (UX 29.10). */
@media (min-width: 576px) {
  .wrapper-long-term-rental-cars .item-carousel-inner > .title-car { min-height: calc(2 * 1.43em); min-height: 2lh; }
}
@media (max-width: 479px) {
  .wrapper-long-term-rental-cars .mobile-sticky-results-label { white-space: normal; line-height: 1.25; }
}
/* the open filter lists (period, km…) above the fixed „Coșul tău” panel (z-index 999) on phones; „Sortează” and
   „Filtrează” at 44px */
.filter-group.open > .dropdown-menu, .filter-group .dropdown-menu.show { z-index: 1000; }
@media (max-width: 767px) {
  .wrapper-long-term-rental-cars .filters-sort-right .btn { min-height: 44px; }
}
/* offer cards on the photo: the price no longer touches „Află detalii” / „Rezervă mașina” */
.item-details-gradient { column-gap: 12px; }

/* The contact form's ticked box (the GDPR yes / no) was a plain purple square, with no tick: a ticked box looked like
   a coloured empty one (Restul paginilor 30.10). The same ticked box as the site's other forms. */
#form-contact .icheckbox_flat-blue.checked { background: url(/images/checked-flat-blue.svg) center center / contain no-repeat !important; }

/* Header menus by keyboard (UX review of the integration, 30.10): on desktop the city and category lists opened on
   hover only; they open too while the focus is inside them (Tab on „Închirieri auto” / „Flota auto”, then their
   links). On phones the list links get a 44 px target (they had 39). */
@media (min-width: 992px) {
  .header-site .dropdown-menu-li:focus-within .dropdown-menu-list { display: block; position: absolute; padding: 14px; clear: both; white-space: nowrap; z-index: 99999; text-align: left; list-style: none; background-color: #fff; box-shadow: 0 0 20px 0 #dbe0e399; border-radius: 10px; }
}
@media (max-width: 991px) {
  .header-site .dropdown-menu-list li a { min-height: 44px; display: flex; align-items: center; }
}

/* position: sticky works again (Blog și SEO 30.10): the old `body, html { overflow-x: hidden }` made the body a scroll
   container, so nothing could stick to the window. `clip` still cuts what sticks out sideways, without that; a
   browser that does not know `clip` keeps the old rule. */
html, body { overflow-x: clip; }

/* a jump to the search form (#form-reservation links, the browser's own scroll) stops under the fixed header */
#form-reservation, .box-form-reservation { scroll-margin-top: 110px; }

/* The fixed header floats 5 px under the top of the screen: the content passing under it showed, cut, in that strip
   (Flota Auto 30.10). A white band across the whole width covers the strip while the header is fixed. */
@media (min-width: 993px) {
  .header-site-container.sticky-scroll::before { content: ""; display: block; position: fixed; top: 0; left: 0; right: 0; width: auto; height: 5px; background: #fff; pointer-events: none; } /* display: Bootstrap's clearfix makes it a 0-wide table */
}

/* ══ Booking flow: /plata, the final button with the summary (Vlad 29.10, F6) ══ */
/* The payment method, the terms and „Finalizează rezervarea” end the summary card, under the total. On desktop the
   shorter column stays in view while the other scrolls; a column taller than the window scrolls until its end is
   visible and stops there (--wlc-pay-top, set in PAYMENT_SCRIPT). */
.wrapper-payment .payment-finish { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dbe0e3; }
.wrapper-payment .payment-finish .btn_order { width: 100%; }
/* the terms and GDPR texts on the card's edge like the rest of it (on phones they ran 4 px from the screen's edge) */
.wrapper-payment .payment-finish .box-checker, .wrapper-payment .payment-finish .gdpr-payment-card, .wrapper-payment .payment-finish .gdpr-reservation { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* the terms' second line under its text, not under the box; the card payment note under the payment choice */
.wrapper-payment .payment-finish .box-checker { position: relative; padding-left: 30px; }
.wrapper-payment .payment-finish .box-checker > .icheckbox_flat-blue { position: absolute !important; left: 0; top: 3px; }
.wrapper-payment .payment-finish .gdpr-payment-card { margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
@media (min-width: 768px) {
  /* „Înapoi la opțiunile extra” was white (for the phones' dark card) on the white desktop card */
  .wrapper-payment .summary-payment .payment-back a { color: #0070ff; }
}
@media (min-width: 992px) {
  /* the old bundle's body{overflow-x:hidden} makes <body> a scroll box that never scrolls, so nothing could stick:
     clip cuts the same overflow without that */
  body:has(.wrapper-container-payment) { overflow-x: clip; }
  .wrapper-container-payment .wrapper-booking-inner > [class*='col-lg-'] { position: sticky; top: var(--wlc-pay-top, 24px); align-self: flex-start; }
  /* a smaller photo keeps the summary short enough to follow the form */
  .wrapper-payment .wrapper-booking-right .box-car-image img { max-width: 180px; }
}
/* the car's damage group under its name in the summary (Vlad 30.10, D9); the link on one line, a 44 px target */
.wrapper-booking-right .car-damage-group, .summary-payment .car-damage-group { margin: 10px 0 12px; font-size: 14px; line-height: 1.4; color: #656565; }
.wrapper-booking-right .car-damage-group a, .summary-payment .car-damage-group a { display: inline-block; padding: 13px 0; margin: -13px 0; white-space: nowrap; color: #0058cc; text-decoration: underline; }
/* summary rows (D10): a long label wraps, its amount stays on the right on its line (the taxes on phones) */
.wrapper-booking-right .list-unstyled > .summary-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wrapper-booking-right .list-unstyled > .summary-label > span { flex: none; white-space: nowrap; text-align: right; }
.summary-modal-rent li { display: flex; justify-content: space-between; }
/* the taxes (D10): rows like the extras, the amount on the right of its label */
.summary-taxes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.summary-taxes li .extras-price { float: none; flex: none; white-space: nowrap; }
/* „Taxe de locație” (Vlad 31.10): the reason under each tax's name, small and muted, on its own line */
.summary-taxes .summary-tax-note { display: block; margin-top: 2px; font: 12px/1.4 Raleway-Regular, sans-serif !important; color: #5a646d; font-weight: 400; white-space: normal; }
/* /plata on phones: the card keeps the total and „Detalii preț” (the rows add up in the popup); a partial row list
   there did not add up (UX 30.10, D10) */
@media (max-width: 767px) { .summary-payment .total-extra { display: none !important; } }
/* /adauga-extra (UX integration #22): a free extra already in the booking says so instead of offering „Adaugă”;
   the 22 px tick box answers a 44 px tap */
.wrapper-booking-left .extra-included { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px; background: #e8f5ec; color: #1a7f37; font-size: 14px; font-weight: 600; white-space: nowrap; }
.wrapper-booking-left .collapse-input .icheckbox_flat-blue ins.iCheck-helper { top: -11px !important; left: -11px !important; width: 44px !important; height: 44px !important; }
/* the summary (UX integration re-check): „Înapoi la …” a 44 px target; „Servicii extra” hidden while the list is empty
   (main.js adds the rows there, the title comes back with them) */
.summary-form-wrapper .btn-default { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.wrapper-booking-right .summary-label-warning:has(+ ul.extras_summary:not(:has(li))) { display: none; }
/*
 * The price ladder, as on the fleet card (Vlad 30.10, 9c627a7): „3 zile × 47,00 €  141,00 €”, „Extra discount −7,05 €”
 * in green, extras, taxes, promo code, one big total and, small, under it, the grey box „Dacă plătești online X €”.
 * One left edge for the words, one right edge for the amounts.
 */
.wrapper-booking-right .summary-ladder, .summary-modal-rent, .total-online-box { font-variant-numeric: tabular-nums lining-nums; }
.wrapper-booking-right .summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.wrapper-booking-right .summary-row > span:last-child { flex: none; white-space: nowrap; text-align: right; }
.wrapper-booking-right .summary-ladder:empty { display: none; }
.summary-was { color: #656565; font-size: 14px; font-weight: normal; }
.wrapper-booking-right .summary-discount, .wrapper-booking-right .discount-online-text,
.summary-modal-rent .summary-discount, .summary-modal-rent .summary-discount .extras-price,
.summary-modal-rent .discount-online-text, .summary-modal-rent .discount-online-text .extras-price { color: #0b7350 !important; font-weight: 600; }
.summary-applied { display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding: 0 6px; border-radius: 9px; background: #e8f5ef; color: #0b7350; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.discount-online-text small { font-size: 13px; font-weight: normal; color: #5a646d; }
.total-online-box { flex-basis: 100%; display: flex; justify-content: flex-end; margin: 6px 0 0; }
.total-online-box[hidden] { display: none !important; }
.total-online-box > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 6px; background: #eef2f5; font-size: 13px; line-height: 1.4; color: #5a646d; white-space: nowrap; }
.total-online-box b { color: #1a1a1a; }
.wrapper-booking-right .total, .summary-payment .total, .summary-modal-total { flex-wrap: wrap; }
/* „De plată acum:” and its amount stay on one row; the box goes under them */
.wrapper-booking-right .total > .total-label, .summary-payment .total > .total-label { white-space: nowrap; font-size: 24px; }
.wrapper-booking-right .summary-border + .total-bottom .total { column-gap: 12px; }
/* the promo code and the online payment: their own group after the extras and taxes, not one more extra (UX 30.10) */
.wrapper-booking-right .summary-ladder-after { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6ebef; }
/* phones: „De plată acum:” and its amount on one row, as „Total:” */
.summary-modal-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; }
.summary-modal-total > .total-label { white-space: nowrap; font-size: 22px !important; }
.summary-modal-total > .total-online-box { flex-basis: 100%; }
/* one style for the amounts of the column: the rental and the discounts as the extras' amounts (UX 30.10) */
.wrapper-booking-right .summary-row > span:last-child { font-family: Syne-Bold, sans-serif; font-size: 20px; font-weight: normal; }
/* /plata on phones: the online row on the dark card, readable (the green of the light summary is too dark there) */
@media (max-width: 767px) {
}

/* ==========================================================================
 * Checkout (/adauga-extra, /plata) in the fleet card's look (Vlad 30.10: same colours and details as the new fleet,
 * the layout kept). Tokens of the card (compara.css, 9c627a7): borders #dbe0e3, fine rules #e6ebef, the price box
 * #f3f6f8 (radius 12), muted text #5a646d, dark #1a1a1a, green #0b7350 on #e8f5ef, the chosen option bordered #0070ff,
 * eyebrows 11px Raleway-Bold upper case, amounts in tabular figures, one big Syne total.
 * ========================================================================== */
/* the summary's titles: eyebrows, as the card's category, not blue 20 px titles */
.wrapper-booking-right .summary-label-warning, .wrapper-booking-right h2.summary-label, .wrapper-booking-right .car_details-auto {
  margin: 18px 0 6px !important; font: 11px/1.3 Raleway-Bold, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #56616d !important;
}
.wrapper-booking-right .car_details-auto { margin-top: 0 !important; }
.wrapper-booking-right .summary-label-warning:first-child { margin-top: 0 !important; }
.wrapper-booking-right .summary-date-hour-infp, .wrapper-booking-right .summary-date-hour-info,
.wrapper-booking-right .list-unstyled.big-zindex, .wrapper-booking-right ul.list-unstyled > li > div { color: #1a1a1a; }
.wrapper-booking-right .summary-date-hour-infp, .wrapper-booking-right .summary-date-hour-info { font-size: 15px; }
/* every row of the summary as the card's rows: words muted on the left, amounts dark on the right */
.wrapper-booking-right .summary-warranty li, .wrapper-booking-right .extras_summary li, .wrapper-booking-right .summary-taxes li,
.wrapper-booking-right .summary-row {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px !important;
  font: 14px/1.45 Raleway-Medium, sans-serif !important; color: #5a646d;
}
.wrapper-booking-right .summary-warranty li > :first-child, .wrapper-booking-right .extras_summary .title-extra,
.wrapper-booking-right .summary-taxes .title-extra, .wrapper-booking-right .summary-row > span:first-child { flex: 1; min-width: 0; color: #5a646d; font: inherit !important; }
.wrapper-booking-right .summary-warranty li > .pull-right, .wrapper-booking-right .extras_summary .extras-price,
.wrapper-booking-right .summary-taxes .extras-price, .wrapper-booking-right .summary-row > span:last-child {
  float: none !important; flex: none; white-space: nowrap; text-align: right; font: 14px/1.45 Raleway-SemiBold, sans-serif !important; color: #1a1a1a !important;
}
.wrapper-booking-right .summary-row.summary-discount > span, .wrapper-booking-right .summary-row.discount-online-text > span:first-child,
.wrapper-booking-right .summary-row.summary-discount > span:last-child, .wrapper-booking-right .summary-row.discount-online-text > span:last-child { color: #0b7350 !important; font-family: Raleway-SemiBold, sans-serif !important; }
/* „GRATUIT”, „INCLUS”: in green, as what costs nothing */
.wrapper-booking-right .summary-free { color: #0b7350 !important; }
/* removing an extra: a quiet × after the amount, so every label starts on the same left edge (it was a red ⊗ before it) */
.wrapper-booking-right .extras_summary li > .d-flex { order: 3; flex: none; }
.wrapper-booking-right .extras_summary .remove-extra { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px -8px -8px 0; border-radius: 8px; }
.wrapper-booking-right .extras_summary .remove-extra img { width: 14px; height: 14px; filter: grayscale(1); opacity: .55; }
.wrapper-booking-right .extras_summary .remove-extra:hover, .wrapper-booking-right .extras_summary .remove-extra:focus-visible { background: #eef2f5; }
.wrapper-booking-right .extras_summary .remove-extra:hover img { opacity: .9; }
/* desktop: the prices and the total in one grey box, as on the card */
@media (min-width: 769px) {
  .wrapper-booking-right .summary-prices { margin-top: 18px; padding: 12px 14px 8px; border-radius: 12px 12px 0 0; background: #f3f6f8; }
  .wrapper-booking-right .summary-prices .summary-label-warning { margin: 10px 0 6px !important; }
  .wrapper-booking-right .summary-prices > .summary-label-warning:first-child { margin-top: 0 !important; }
  .wrapper-booking-right .summary-prices .summary-ladder-after { margin-top: 8px; padding-top: 8px; }
  /* kept in the page (0 high): the phones' bar watches it to stop being fixed under the summary */
.wrapper-booking-right .summary-prices + .summary-border { height: 0; margin: 0 !important; overflow: hidden; }
  .wrapper-booking-right .total-bottom .total {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin: 0; padding: 10px 14px 12px;
    border-top: 1px solid #e6ebef; border-radius: 0 0 12px 12px; background: #f3f6f8;
  }
  .wrapper-booking-right .total-bottom .total > .total-label { margin: 0; font: 16px/1.3 Raleway-Bold, sans-serif !important; color: #1a1a1a; }
  .wrapper-booking-right .total-bottom .total > .order_total { font: 28px/1.15 Syne-Bold, sans-serif !important; color: #1a1a1a; }
  .wrapper-booking-right .total-bottom .summary-border-bottom { margin: 16px 0 !important; visibility: hidden; height: 0; }
}
.total-online-box > span { font-size: 12px; }
/* the buttons as the card's „Rezervă”: one blue, 48 px, radius 10; the way back a quiet text link */
.wrapper-booking-right .summary-form-wrapper .button-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-radius: 10px; padding: 10px 16px !important; font: 16px/1.25 Raleway-Bold, sans-serif !important; }
.wrapper-booking-right .summary-form-wrapper .btn-default { width: 100%; margin-top: 6px; border: 0; background: none; color: #0058cc; font: 15px Raleway-SemiBold, sans-serif; }
.wrapper-booking-right .summary-form-wrapper .btn-default:hover { text-decoration: underline; background: none; }
/* the extras: „Detalii” a quiet pill with a 44 px target; a chosen extra bordered blue, as the chosen option on the card */
.wrapper-booking-left .extra { transition: border-color .15s, box-shadow .15s; }
.wrapper-booking-left .extra:has(.icheckbox_flat-blue.checked), .wrapper-booking-left .extra:has(.extra-included) { border-color: #0070ff !important; box-shadow: 0 0 0 1px #0070ff inset; }
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"] {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: -6px 0; padding: 0 10px; border-radius: 16px;
  font: 14px Raleway-SemiBold, sans-serif; color: #0058cc; position: relative;
}
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"]::after { content: ''; position: absolute; inset: -7px -2px; } /* a 46 px tap target (audit A17) */
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"]:hover { background: #eef2f5; text-decoration: none; }
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"] > div { color: inherit; }
.wrapper-booking-left .extra .panel-body { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f3f6f8; color: #5a646d; font-size: 14px; line-height: 1.5; }
.wrapper-booking-left .extra .panel-body > strong { display: block; margin-bottom: 4px; color: #1a1a1a; }
.wrapper-booking-left .extra p.price > strong { color: #1a1a1a; }
.wrapper-booking-left .extra p.price .price-unit { color: #5a646d; }
.wrapper-booking-left .extra-included { background: #e8f5ef; color: #0b7350; }
/* a protection package's protections (Vlad 31.10): „Inclus în Acoperire Premium Integrală” under the price, the box locked */
.wrapper-booking-left .extra-in-package { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 12px; background: #e8f5ef; color: #0b7350; font: 13px/1.4 Raleway-SemiBold, sans-serif; }
.wrapper-booking-left .extra-in-package[hidden] { display: none; }
.wrapper-booking-left .extra:has(.extra-in-package:not([hidden])) .icheckbox_flat-blue { background: #e6ebef !important; border-color: #c4ccd3 !important; cursor: not-allowed; }
.wrapper-booking-left .extra:has(.extra-in-package:not([hidden])) .price { opacity: .55; }
/* /plata: a payment method as an option of the card: bordered, the chosen one blue */
.list-types-payment > li { margin: 0 0 8px; padding: 0 12px; border: 1px solid #dbe0e3; border-radius: 11px; background: #fff; transition: border-color .15s; }
.list-types-payment > li:has(.checked) { border-color: #0070ff; box-shadow: 0 0 0 1px #0070ff inset; }
/* phones: „Detalii preț” in the site's blue (it was orange), and no „Costuri extra” line the card does not have */
.summary-total-modal { color: #0070ff !important; }
@media (max-width: 768px) {
  .wrapper-booking .total-bottom .total-bottom-mobile-extra .total-extra { display: none !important; }
}
.wrapper-booking-right .summary-warranty li > .summary-free, .wrapper-booking-right .extras_summary .extras-price.summary-free { color: #0b7350 !important; }
/* „Detalii” open: the same blue chevron (it turned orange), pointing up */
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"] img { width: 12px; filter: brightness(0) saturate(100%) invert(26%) sepia(82%) saturate(2964%) hue-rotate(206deg) brightness(103%) contrast(106%); }
/* phones: the bar at the bottom stays dark, as the fleet's compare bar; „Detalii preț” a light blue link, 44 px */
@media (max-width: 768px) {
  .total-bottom .summary-total-modal { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -6px; color: #8cbcff !important; font: 14px Raleway-SemiBold, sans-serif; text-decoration: underline; }
  .total-bottom .total > h2.total-label { font: 18px/1.3 Raleway-Bold, sans-serif !important; }
}
/* phones, „Detalii preț”: the same summary as on desktop (eyebrows, small rows, the prices and the total in a grey box) */
#summaryModal .summary-modal-title, #summaryModal .summary-modal-body-top > div > div:first-child {
  margin: 16px 0 6px !important; font: 11px/1.3 Raleway-Bold, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #56616d !important;
}
#summaryModal .summary-warranty li, #summaryModal .extras_summary li, #summaryModal .summary-modal-rent li {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px !important;
  font: 14px/1.45 Raleway-Medium, sans-serif !important; color: #5a646d !important;
}
#summaryModal .summary-warranty li > :first-child, #summaryModal .extras_summary .title-extra, #summaryModal .summary-modal-rent li > span:first-child { flex: 1; min-width: 0; font: inherit !important; color: #5a646d !important; }
#summaryModal .summary-warranty li > .pull-right, #summaryModal .extras-price {
  float: none !important; flex: none; white-space: nowrap; font: 14px/1.45 Raleway-SemiBold, sans-serif !important; color: #1a1a1a !important;
}
#summaryModal .summary-discount, #summaryModal .summary-discount > span, #summaryModal .discount-online-text, #summaryModal .discount-online-text > span { color: #0b7350 !important; }
#summaryModal .summary-free { color: #0b7350 !important; }
#summaryModal .extras_summary li > .d-flex { order: 3; flex: none; }
#summaryModal .extras_summary .remove-extra { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -10px -10px -10px 0; }
#summaryModal .extras_summary .remove-extra img { width: 14px; height: 14px; filter: grayscale(1); opacity: .55; }
#summaryModal .summary-modal-total {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f3f6f8; align-items: baseline;
}
#summaryModal .summary-modal-total > .total-label { font: 16px/1.3 Raleway-Bold, sans-serif !important; color: #1a1a1a; }
#summaryModal .summary-modal-total > .order_total { font: 26px/1.15 Syne-Bold, sans-serif !important; color: #1a1a1a; }
#summaryModal .summary-modal-rent li.summary-discount > span, #summaryModal .summary-modal-rent li.discount-online-text > span,
#summaryModal .summary-warranty li > .summary-free, #summaryModal .extras_summary .extras-price.summary-free { color: #0b7350 !important; }
/* /plata on phones, the dark card: the methods outlined in light lines, the chosen one light blue; eyebrows and links light */
@media (max-width: 767px) {
}
@media (max-width: 768px) { .total-bottom-mobile-extra { display: flex !important; justify-content: flex-end; } }
/* /confirmare: the same ladder and colours as the fleet card and the steps before (Vlad 30.10): the reductions in green,
   the old price per day struck small and grey, no struck total */
.wrapper-confirmation .confirmation-discount, .wrapper-confirmation .confirmation-discount > span { color: #0b7350 !important; font-family: Raleway-SemiBold, sans-serif; }
.wrapper-confirmation .confirmation-discount small { font-family: Raleway-Medium, sans-serif; font-size: 13px; color: #5a646d; }
.wrapper-confirmation .confirmation-figma-car-price-before { color: #5a646d; font-size: .9em; text-decoration: line-through; }
.wrapper-confirmation .confirmation-figma-order-box { font-variant-numeric: tabular-nums lining-nums; }
.wrapper-confirmation .confirmation-free { color: #0b7350 !important; }
/* review UX (restyle): the online row stays hidden while the payment at pick-up is chosen (the rows' display:flex won
   over jQuery's inline display:none) */
.wrapper-booking-right .summary-row.discount-online-text[style*="none"], #summaryModal li.discount-online-text[style*="none"] { display: none !important; }
/* the car's name as on the card (Syne-Bold) */
.wrapper-booking-right .car_details-name, .summary-payment .car_details-name { font-family: Syne-Bold, sans-serif !important; font-size: 30px !important; line-height: 1.15; }
/* ticks and radios as the card's: blue when chosen, a visible grey ring when not */
.wrapper-payment .iradio_flat-blue, .wrapper-payment .icheckbox_flat-blue, .wrapper-booking-left .icheckbox_flat-blue { border: 1.5px solid #8a939b !important; }
.wrapper-payment .iradio_flat-blue.checked, .wrapper-payment .icheckbox_flat-blue.checked,
.wrapper-booking-left .icheckbox_flat-blue.checked { border-color: #0070ff !important; background-color: #0070ff !important; }
/* „Detalii” a pill also when closed: it is a button */
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"] { background: #eef4ff; }
.wrapper-booking-left .extra .collapse-input > a[data-toggle="collapse"]:hover { background: #e0ebff; }
/* phones: the bottom bar as the fleet's bar (#1a1a1a, rounded, a shadow); „Detalii preț” a light outlined pill */
@media (max-width: 768px) {
  .wrapper-booking-right:not(.summary-payment) .total-bottom.total-bottom-fixed { background: #1a1a1a !important; box-shadow: 0 -10px 30px rgba(16, 24, 40, .22); }
  .total-bottom .summary-total-modal { padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 22px; text-decoration: none; min-height: 36px; margin: -4px 0 4px; }
}
.wrapper-booking-right .summary-ladder-after:not(:has(> :not([style*="none"]))) { display: none; }
.wrapper-booking-left .icheckbox_flat-blue.checked { background-image: none !important; position: relative; }
.wrapper-booking-left .icheckbox_flat-blue.checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
/* the tick drawn over the box took the clicks: a ticked extra could not be unticked from its box (review UX 31.10) */
/*
 * A desktop window made narrow (Vlad 30.10: „crăcănat”): the summary under the extras keeps the full-width look.
 * „Detalii preț” only at the fixed bar's widths; the car's photo beside its name; the same space above every
 * title; the prices in the grey box and the total under them at every width (not when it is the phones' fixed bar).
 */
/* the window is on every page now (bug Vlad 31.10: a narrow desktop window or a tablet had the bar without it); its
   button and the bar's extra row only at the bar's widths, as the bar's script (≤ 768 px) */
@media (min-width: 769px) { .summary-total-modal, .total-bottom-mobile-extra { display: none !important; } }
.wrapper-booking-right .summary-prices { margin-top: 18px; padding: 12px 14px 8px; border-radius: 12px 12px 0 0; background: #f3f6f8; }
.wrapper-booking-right .summary-prices > .summary-label-warning:first-child { margin-top: 0 !important; }
/* kept in the page (0 high): the phones' bar watches it to stop being fixed under the summary */
.wrapper-booking-right .summary-prices + .summary-border { height: 0; margin: 0 !important; overflow: hidden; }
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total, .summary-payment.wrapper-booking-right .total-bottom .total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin: 0; padding: 10px 14px 12px;
  border-top: 1px solid #e6ebef; border-radius: 0 0 12px 12px; background: #f3f6f8;
}
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total > .total-label, .summary-payment.wrapper-booking-right .total-bottom .total > .total-label { margin: 0; font: 16px/1.3 Raleway-Bold, sans-serif !important; color: #1a1a1a !important; }
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total > .order_total, .summary-payment.wrapper-booking-right .total-bottom .total > .order_total { font: 28px/1.15 Syne-Bold, sans-serif !important; color: #1a1a1a !important; }
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .summary-border-bottom, .summary-payment.wrapper-booking-right .total-bottom .summary-border-bottom { margin: 16px 0 !important; visibility: hidden; height: 0; }
.wrapper-booking-right .summary-label-warning, .wrapper-booking-right h2.summary-label { margin: 16px 0 4px !important; }
.wrapper-booking-right .summary-date-hour { display: block; margin: 0; }
.wrapper-booking-right .summary-date-hour > div { margin: 0; }
.wrapper-booking-right ul.list-unstyled { margin-bottom: 0; }
.wrapper-booking-right .row.align-items-center:has(> .box-title-car) { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; }
.wrapper-booking-right .row.align-items-center:has(> .box-title-car) > div { float: none; width: auto; padding: 0; }
.wrapper-booking-right .row.align-items-center:has(> .box-title-car) > .box-title-car { flex: 1; min-width: 0; }
.wrapper-booking-right .row.align-items-center:has(> .box-title-car) > .box-car-image { flex: 0 0 38%; }
.wrapper-booking-right .row.align-items-center:has(> .box-title-car) > .box-car-image img { width: 100%; height: auto; }
.wrapper-booking-right .car-damage-group a { white-space: normal; }

/* ==========================================================================
 * The summary as the bill (Vlad 30.10: „asta e nota de plată”; no grey, the photo large with the name on it, the price
 * details clearly visible). Head: the car on a light blue ground. Trip: pick-up and return on a small timeline.
 * Bill: a white receipt with a blue head „Detalii preț”, dark rows of 15 px, groups split by dashed lines, the total
 * under a firm rule, the online price in a green note.
 * ========================================================================== */
.wrapper-booking-right .bill-hero {
  position: relative; overflow: hidden; margin: -6px -8px 18px; padding: 18px 18px 6px; border-radius: 16px;
  background: linear-gradient(160deg, #e6f0ff 0%, #f3f8ff 55%, #fbfdff 100%);
}
.wrapper-booking-right .bill-hero-name.car_details-name { position: relative; z-index: 1; margin: 0 !important; font: 26px/1.15 Syne-Bold, sans-serif !important; color: #1a1a1a !important; }
.wrapper-booking-right .bill-hero .car-damage-group { position: relative; z-index: 1; margin: 6px 0 0; color: #3e4a56; }
.wrapper-booking-right .bill-hero-car { display: block; width: 100%; max-height: 190px; margin: 4px auto 0; object-fit: contain; mix-blend-mode: multiply; }
/* the trip on a timeline: a filled dot for the pick-up, an open one for the return */
.wrapper-booking-right .bill-trip { position: relative; margin: 0 0 16px; padding-left: 22px; }
.wrapper-booking-right .bill-trip::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 26px; border-left: 2px dotted #b9c7d6; }
.wrapper-booking-right .bill-trip > div { position: relative; margin: 0 0 12px; }
.wrapper-booking-right .bill-trip > div:last-child { margin-bottom: 0; }
.wrapper-booking-right .bill-trip > div::before { content: ''; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #0070ff; box-shadow: 0 0 0 3px #e6f0ff; }
.wrapper-booking-right .bill-trip > div:last-child::before { background: #fff; border: 2px solid #0070ff; }
.wrapper-booking-right .bill-trip dt { font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d; }
.wrapper-booking-right .bill-trip dd { display: flex; flex-direction: column; margin: 2px 0 0; }
.wrapper-booking-right .bill-trip dd > span { font: 16px/1.35 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
.wrapper-booking-right .bill-trip dd > small { font: 14px/1.4 Raleway-Medium, sans-serif; color: #5a646d; }
/* what is included: two quiet rows between hairlines */
.wrapper-booking-right .bill-included { margin: 0 0 18px; padding: 10px 0 4px; border-top: 1px solid #e6ebef; border-bottom: 1px solid #e6ebef; }
/* the bill */
.wrapper-booking-right .summary-prices.bill {
  margin-top: 0; padding: 0 16px 6px; border: 1px solid #cfe0ff; border-bottom: 0; border-radius: 16px 16px 0 0; background: #fff;
}
.wrapper-booking-right .bill-head {
  margin: 0 -16px 12px; padding: 11px 16px; border-radius: 15px 15px 0 0; background: #0070ff; color: #fff;
  font: 13px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.wrapper-booking-right .summary-prices.bill .summary-label-warning { margin: 14px 0 6px !important; padding-top: 12px; border-top: 1px dashed #d5dde5; }
.wrapper-booking-right .summary-prices.bill > .bill-head + .summary-label-warning { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.wrapper-booking-right .summary-prices.bill .summary-row, .wrapper-booking-right .summary-prices.bill .extras_summary li, .wrapper-booking-right .summary-prices.bill .summary-taxes li {
  font-size: 15px !important; color: #1a1a1a;
}
.wrapper-booking-right .summary-prices.bill .summary-row > span:first-child, .wrapper-booking-right .summary-prices.bill .extras_summary .title-extra,
.wrapper-booking-right .summary-prices.bill .summary-taxes .title-extra { color: #2b3540; }
.wrapper-booking-right .summary-prices.bill .summary-row > span:last-child, .wrapper-booking-right .summary-prices.bill .extras-price { font-size: 15px !important; }
.wrapper-booking-right .summary-prices.bill .summary-ladder-after { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d5dde5; }
/* the total closes the bill: a firm rule over it, the same white, the blue border round it */
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total, .summary-payment.wrapper-booking-right .total-bottom .total {
  padding: 12px 16px 14px; border: 1px solid #cfe0ff; border-top: 0; border-radius: 0 0 16px 16px; background: #fff;
  box-shadow: inset 0 2px 0 #1a1a1a; margin: 0 0 0;
}
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total > .total-label, .summary-payment.wrapper-booking-right .total-bottom .total > .total-label { font-size: 17px !important; }
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total > .order_total, .summary-payment.wrapper-booking-right .total-bottom .total > .order_total { font-size: 30px !important; }
.wrapper-booking-right .total-online-box > span { background: #e8f5ef; color: #0b7350; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.wrapper-booking-right .total-online-box b { color: #0b7350; }
.wrapper-booking-right .summary-prices.bill ~ .total-bottom:not(.total-bottom-fixed) { margin-top: 0 !important; }
/* under the bill the whole breakdown is in view: „Detalii preț” only in the fixed bar */
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total-bottom-mobile-extra { display: none !important; }

/* phones, „Detalii preț”: the same trip timeline (Vlad 30.10) */
#summaryModal .bill-trip { margin: 4px 0 18px; }
#summaryModal .bill-trip { position: relative; margin: 0 0 16px; padding-left: 22px; }
#summaryModal .bill-trip::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 26px; border-left: 2px dotted #b9c7d6; }
#summaryModal .bill-trip > div { position: relative; margin: 0 0 12px; }
#summaryModal .bill-trip > div:last-child { margin-bottom: 0; }
#summaryModal .bill-trip > div::before { content: ''; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #0070ff; box-shadow: 0 0 0 3px #e6f0ff; }
#summaryModal .bill-trip > div:last-child::before { background: #fff; border: 2px solid #0070ff; }
#summaryModal .bill-trip dt { font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d; }
#summaryModal .bill-trip dd { display: flex; flex-direction: column; margin: 2px 0 0; }
#summaryModal .bill-trip dd > span { font: 16px/1.35 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
#summaryModal .bill-trip dd > small { font: 14px/1.4 Raleway-Medium, sans-serif; color: #5a646d; }
/* „Detalii preț”: a real button in the bar, so it is seen (Vlad 30.10) */
@media (max-width: 768px) {
  .total-bottom .summary-total-modal {
    display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 8px; padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: 22px; background: rgba(255, 255, 255, .12);
    color: #fff !important; font: 15px/1 Raleway-Bold, sans-serif !important; text-decoration: none !important; cursor: pointer;
  }
  .total-bottom .summary-total-modal::after {
    content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: 2px;
  }
}
/* review UX (the bill): no break before the total on narrow screens; the total's amount stays right when it wraps
   under „De plată acum”; one right edge for every amount (the × of an extra sits outside it) */
.wrapper-booking-right .summary-prices.bill ~ .total-bottom:not(.total-bottom-fixed) { border-top: 0 !important; padding-top: 0 !important; }
.wrapper-booking-right .total-bottom .total > .order_total { margin-left: auto; text-align: right; }
.wrapper-booking-right .summary-prices.bill { padding-right: 32px; }
.wrapper-booking-right .summary-prices.bill .bill-head { margin-right: -32px; }
.wrapper-booking-right .total-bottom:not(.total-bottom-fixed) .total, .summary-payment.wrapper-booking-right .total-bottom .total { padding-right: 32px; }
.wrapper-booking-right .summary-prices.bill .extras_summary li { position: relative; }
.wrapper-booking-right .summary-prices.bill .extras_summary li > .d-flex { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); }
.wrapper-booking-right .summary-prices.bill .extras_summary .remove-extra { width: 28px; height: 28px; margin: 0; }
/* phones, „Detalii preț”: the same white bill (no grey total box), the online price in green */
#summaryModal .summary-modal-total { background: #fff; border: 1px solid #cfe0ff; box-shadow: inset 0 2px 0 #1a1a1a; border-radius: 0 0 14px 14px; }
#summaryModal .total-online-box > span { background: #e8f5ef; color: #0b7350; }
#summaryModal .total-online-box b { color: #0b7350; }
#summaryModal .summary-modal-total > .order_total { margin-left: auto; }

/*
 * /plata on phones (Vlad 30.10: „griul ăsta închis n-are nicio treabă”, „alb mai fumuriu”, „șerpuiala noastră”): the
 * payment card is smoky white glass over the WLC wave, dark text, the car cut out on it, the methods as on desktop.
 */
@media (max-width: 767px) {
  .wrapper-payment .summary-payment:not(:has(.bill)) {
    position: relative; overflow: hidden; color: #1a1a1a; border: 1px solid rgba(0, 112, 255, .14); border-radius: 24px; margin: 8px 0 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(244, 248, 255, .5) 100%),
      url('/images/serpuire-extra.svg') 70% 100% / 150% auto no-repeat,
      #eef4ff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(16, 40, 90, .10);
  }
  .wrapper-payment .summary-payment:not(:has(.bill)), .wrapper-payment .summary-payment:not(:has(.bill)) ul li,
  .wrapper-payment .summary-payment:not(:has(.bill)) .form-group label, .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment label,
  .wrapper-payment .summary-payment:not(:has(.bill)) .car_details-name, .wrapper-payment .summary-payment:not(:has(.bill)) .total h2,
  .wrapper-payment .summary-payment:not(:has(.bill)) .total .price-val, .wrapper-payment .summary-payment:not(:has(.bill)) .payment-finish,
  .wrapper-payment .summary-payment:not(:has(.bill)) .payment-finish p, .wrapper-payment .summary-payment:not(:has(.bill)) .gdpr-right-wrapper,
  .wrapper-payment .summary-payment:not(:has(.bill)) .box-checker { color: #1a1a1a !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) a:not(.btn):not(.summary-total-modal), .wrapper-payment .summary-payment:not(:has(.bill)) .form-group a,
  .wrapper-payment .summary-payment:not(:has(.bill)) .payment-back a { color: #0058cc !important; text-decoration: underline; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .car_details-auto { color: #56616d !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .box-car-image img { background: none; border-radius: 0; mix-blend-mode: multiply; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .summary-border-bottom div { background: rgba(0, 112, 255, .14) !important; }
  /* the online row: green on the light glass */
  .wrapper-payment .summary-payment:not(:has(.bill)) .online-note, .wrapper-payment .summary-payment:not(:has(.bill)) .online-note > span:last-child { color: #0b7350 !important; font-family: Raleway-SemiBold, sans-serif; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .online-note small { color: #3e4a56; }
  /* the total in a white receipt strip */
  .wrapper-payment .summary-payment:not(:has(.bill)) .total-bottom .total {
    margin: 0; padding: 12px 14px; border: 1px solid #cfe0ff; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 2px 0 #1a1a1a;
  }
  .wrapper-payment .summary-payment:not(:has(.bill)) .total > h2.total-label { font: 17px/1.3 Raleway-Bold, sans-serif !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .total .order_total { font: 28px/1.15 Syne-Bold, sans-serif !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .total-online-box > span { background: #e8f5ef; color: #0b7350; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .total-online-box b { color: #0b7350; }
  /* „Detalii preț”: a blue pill on the light card */
  .wrapper-payment .summary-payment:not(:has(.bill)) .summary-total-modal {
    display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px; padding: 0 16px; border: 0; border-radius: 22px;
    background: #0070ff; color: #fff !important; font: 15px/1 Raleway-Bold, sans-serif !important; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 112, 255, .28);
  }
  .wrapper-payment .summary-payment:not(:has(.bill)) .summary-total-modal::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: 2px; }
  /* the methods as on desktop: white rows, the chosen one blue */
  .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment > li { background: #fff; border-color: #dbe0e3; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment > li:has(.checked) { border-color: #0070ff; box-shadow: 0 0 0 1px #0070ff inset; background: #fff; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .icheckbox_flat-blue.checked::after, .wrapper-payment .summary-payment:not(:has(.bill)) .iradio_flat-blue.checked::after { border-color: #fff !important; }
}
/* review UX (the glass card): one fine blue line instead of the old dark grey one; „Detalii preț” a secondary light blue
   pill (the blue fill is for „Finalizează rezervarea”); the methods on the same edges as the rest; a larger eyebrow;
   the window's backdrop the brand's dark blue, not black */
@media (max-width: 767px) {
  .wrapper-payment .summary-payment:not(:has(.bill)) .total-bottom-mobile-extra { border-top: 1px solid rgba(0, 112, 255, .14) !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .summary-total-modal { background: #e6f0ff !important; color: #0058cc !important; box-shadow: none !important; border: 1px solid #b9d3ff !important; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment { margin-left: 0; margin-right: 0; padding: 0; }
  .wrapper-payment .summary-payment:not(:has(.bill)) .car_details-auto { font-size: 12px !important; }
}
#summaryModal.modal { background: rgba(8, 28, 66, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body:has(#summaryModal.in) .modal-backdrop { opacity: 0 !important; }
@media (max-width: 767px) { .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment, .wrapper-payment .summary-payment:not(:has(.bill)) .list-types-payment > li { margin-left: 0 !important; margin-right: 0 !important; width: auto; } }

/*
 * /confirmare in the bill's look of the booking steps (Vlad 30.10: „tot în stilul ăsta, inclusiv culorile”): the trip
 * on the timeline, the car large on light blue with its name on it, „Detalii preț” in a blue head, dark rows split by
 * dashed lines, the total under a firm rule (no black band, no grey bands).
 */
.wrapper-confirmation .conf-trip { position: relative; margin: 6px 0 10px; padding-left: 24px; }
.wrapper-confirmation .conf-trip::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 30px; border-left: 2px dotted #b9c7d6; }
.wrapper-confirmation .conf-trip > div { position: relative; margin: 0 0 14px; }
.wrapper-confirmation .conf-trip > div:last-child { margin-bottom: 0; }
.wrapper-confirmation .conf-trip > div::before { content: ''; position: absolute; left: -24px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #0070ff; box-shadow: 0 0 0 3px #e6f0ff; }
.wrapper-confirmation .conf-trip > div:last-child::before { background: #fff; border: 2px solid #0070ff; }
.wrapper-confirmation .conf-trip dt { font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d; }
.wrapper-confirmation .conf-trip dd { display: flex; flex-direction: column; margin: 2px 0 0; }
.wrapper-confirmation .conf-trip dd > span { font: 17px/1.35 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
.wrapper-confirmation .conf-trip dd > small { font: 14px/1.4 Raleway-Medium, sans-serif; color: #5a646d; }
.wrapper-confirmation .conf-trip-days { display: inline-flex; gap: 6px; margin: 8px 0 0; padding: 4px 12px; border-radius: 14px; background: #e6f0ff; color: #0058cc; font: 14px Raleway-SemiBold, sans-serif; }
.wrapper-confirmation .conf-trip-days strong { color: #1a1a1a; }

.wrapper-confirmation .conf-bill { border: 1px solid #cfe0ff; border-radius: 20px; background: #fff; overflow: hidden; font-variant-numeric: tabular-nums lining-nums; }
.wrapper-confirmation .conf-hero { position: relative; margin: 0; padding: 22px 28px 4px; border-radius: 0; background: linear-gradient(160deg, #e6f0ff 0%, #f3f8ff 55%, #fbfdff 100%); }
.wrapper-confirmation .conf-hero .bill-hero-name { position: relative; z-index: 1; font: 30px/1.15 Syne-Bold, sans-serif; color: #1a1a1a; }
.wrapper-confirmation .conf-hero .bill-hero-car { display: block; width: 100%; max-width: 420px; max-height: 220px; margin: 0 auto; object-fit: contain; mix-blend-mode: multiply; }
.wrapper-confirmation .conf-bill .bill-head { justify-content: flex-start; border-radius: 0; background: #0070ff; color: #fff; padding: 12px 28px; font: 13px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 28px 10px; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-data > span { padding: 0; border: 0; background: none; color: #1a1a1a; font: 17px/1.4 Raleway-Medium, sans-serif; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-price strong { font: 17px/1.4 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
.wrapper-confirmation .conf-bill .confirmation-figma-line { margin: 0 28px; padding: 10px 0; border-top: 0; font: 17px/1.4 Raleway-Medium, sans-serif; color: #1a1a1a; }
.wrapper-confirmation .conf-bill .confirmation-figma-line > span:last-of-type { font: 17px/1.4 Raleway-SemiBold, sans-serif; white-space: nowrap; }
.wrapper-confirmation .conf-bill .confirmation-figma-line-title {
  margin: 8px 28px 0; padding: 14px 0 4px; border-top: 1px dashed #d5dde5; background: none;
  font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d;
}
.wrapper-confirmation .conf-bill .confirmation-discount + .confirmation-figma-line-title { margin-top: 8px; }
.wrapper-confirmation .conf-bill .confirmation-figma-line:not(.confirmation-figma-line-title) + .confirmation-discount:not(.confirmation-discount + .confirmation-discount) { border-top: 1px dashed #d5dde5; margin-top: 8px; padding-top: 14px; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-row + .confirmation-discount { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
.wrapper-confirmation .conf-bill .confirmation-figma-total {
  margin: 12px 0 0; padding: 18px 28px; background: #fff; color: #1a1a1a; box-shadow: inset 0 2px 0 #1a1a1a;
  font: 34px/1.1 Syne-Bold, sans-serif;
}
.wrapper-confirmation .conf-bill .confirmation-figma-total span:first-child { font: 18px/1.3 Raleway-Bold, sans-serif; text-transform: none; }
.wrapper-confirmation .conf-bill .confirmation-deposit { margin: 0; padding: 12px 28px 16px; border-top: 1px solid #e6f0ff; background: #f6f9ff; color: #3e4a56; font-size: 15px; }
.wrapper-confirmation .conf-bill .confirmation-deposit > span:last-of-type { font-size: 15px; color: #1a1a1a; }
.wrapper-confirmation .conf-bill .label-summery-item { background: #e6f0ff; color: #0058cc; }
/* „Taxe de locație”: the reason under each tax's name, as in the summary of /adauga-extra */
.wrapper-confirmation .conf-bill .conf-tax { align-items: flex-start !important; }
.wrapper-confirmation .conf-bill .conf-tax-note { display: block; margin-top: 2px; font: 12px/1.4 Raleway-Regular, sans-serif; color: #5a646d; text-align: left; }
@media (max-width: 767px) {
  .wrapper-confirmation .conf-hero { padding: 16px 16px 2px; }
  .wrapper-confirmation .conf-hero .bill-hero-name { font-size: 24px; }
  .wrapper-confirmation .conf-bill .bill-head, .wrapper-confirmation .conf-bill .confirmation-figma-car-row, .wrapper-confirmation .conf-bill .confirmation-figma-total, .wrapper-confirmation .conf-bill .confirmation-deposit { padding-left: 16px; padding-right: 16px; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line, .wrapper-confirmation .conf-bill .confirmation-figma-line-title { margin-left: 16px; margin-right: 16px; font-size: 15px; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line > span:last-of-type, .wrapper-confirmation .conf-bill .confirmation-figma-car-data > span, .wrapper-confirmation .conf-bill .confirmation-figma-car-price strong { font-size: 15px; }
  .wrapper-confirmation .conf-bill .confirmation-figma-total { font-size: 28px; }
}
/* the QR block: the code beside its text (the text was squeezed to one word a line) */
.wrapper-confirmation .confirmation-figma-quick { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; float: none; align-items: center; gap: 24px; padding: 20px 24px; border: 1px solid #cfe0ff; border-radius: 20px; background: linear-gradient(160deg, #e6f0ff 0%, #f7faff 100%); }
.wrapper-confirmation .confirmation-figma-quick > div:first-child { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wrapper-confirmation .confirmation-figma-quick > div:first-child span { font-size: 12px; color: #56616d; word-break: break-all; max-width: 160px; text-align: center; }
.wrapper-confirmation .confirmation-figma-quick-text { flex: 1; min-width: 0; }
.wrapper-confirmation .confirmation-figma-qr { width: 146px; height: 146px; padding: 8px; border-radius: 12px; background: #fff; }
@media (max-width: 767px) { .wrapper-confirmation .confirmation-figma-quick { flex-direction: column; text-align: center; } }
@media (max-width: 767px) {
  .wrapper-confirmation .conf-bill .confirmation-figma-line:not(.confirmation-figma-line-title),
  .wrapper-confirmation .conf-bill .confirmation-figma-car-row, .wrapper-confirmation .conf-bill .confirmation-figma-total {
    display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px; text-align: left !important;
  }
  .wrapper-confirmation .conf-bill .confirmation-figma-line > span:first-child, .wrapper-confirmation .conf-bill .confirmation-figma-car-data { flex: 1; min-width: 0; text-align: left !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line > span:last-of-type, .wrapper-confirmation .conf-bill .confirmation-figma-car-price { flex: none; text-align: right !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line-title { text-align: left !important; font-size: 11px !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-total span:first-child { font-size: 16px; }
  .wrapper-confirmation .conf-bill .confirmation-figma-car-row { padding-top: 12px; padding-bottom: 6px; }
}
/* review UX (/confirmare): the rental a group like on /plata (label, no solid line), the same spacing everywhere; the
   deposit an ordinary row on the right edge; the car melts into its ground; room above the footer on phones; the
   „how you take the car” box as the bill's quiet info, the QR block as wide as the bill */
.wrapper-confirmation .conf-bill .conf-group-label, .wrapper-confirmation .conf-bill .confirmation-figma-line-title {
  margin: 14px 28px 2px !important; padding: 0 !important; border: 0 !important; font: 11px/1.3 Raleway-Bold, sans-serif !important;
  letter-spacing: .08em; text-transform: uppercase; color: #56616d; text-align: left !important; background: none !important;
}
.wrapper-confirmation .conf-bill .confirmation-figma-line-title { margin-top: 10px !important; padding-top: 12px !important; border-top: 1px dashed #d5dde5 !important; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-row { border: 0 !important; padding: 6px 28px !important; }
.wrapper-confirmation .conf-bill .confirmation-figma-line:not(.confirmation-figma-line-title) { padding: 6px 0 !important; }
.wrapper-confirmation .conf-bill .confirmation-figma-car-row + .confirmation-discount { padding-top: 6px !important; }
.wrapper-confirmation .conf-bill .confirmation-deposit { margin: 0 28px !important; padding: 12px 0 16px !important; background: none !important; border-top: 1px dashed #d5dde5 !important; }
.wrapper-confirmation .conf-hero .bill-hero-car { background: none !important; border-radius: 0 !important; }
.wrapper-confirmation .confirmation-figma-quick { max-width: none; }
.wrapper-confirmation .confirmation-figma-info { margin-top: 24px; padding: 20px 24px; border: 1px solid #e6ebef; border-radius: 20px; background: #fff; }
.wrapper-confirmation .confirmation-figma-info-title { margin: 0 0 8px !important; padding: 0 !important; font: 18px/1.3 Syne-Bold, sans-serif !important; color: #1a1a1a; }
.wrapper-confirmation .confirmation-figma-info p { margin: 0; font-size: 15px; line-height: 1.6; color: #2b3540; }
.wrapper-confirmation .confirmation-figma-client-info, .wrapper-confirmation .confirmation-figma-company-data span { color: #3e4a56 !important; }
@media (max-width: 767px) {
  .wrapper-confirmation .conf-bill .conf-group-label, .wrapper-confirmation .conf-bill .confirmation-figma-line-title { margin-left: 16px !important; margin-right: 16px !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-car-row { padding-left: 16px !important; padding-right: 16px !important; }
  .wrapper-confirmation .conf-bill .confirmation-deposit { margin: 0 16px !important; }
  .wrapper-confirmation { padding-top: 24px !important; padding-bottom: 40px !important; }
  .wrapper-confirmation .confirmation-figma-card { margin-bottom: 40px !important; }
}
@media (max-width: 767px) {
  .wrapper-confirmation .conf-bill .confirmation-figma-car-row { margin: 0 !important; min-height: 0 !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-car-row > * { margin: 0 !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line-title { display: block !important; text-align: left !important; }
  .wrapper-confirmation .conf-bill .confirmation-figma-line-title > span { display: inline; text-align: left !important; }
}
/* /confirmare (Vlad 30.10): „Locație și perioadă” — the trip on the left, the car with its name on the right, so the row
   is balanced; the bill below starts with its blue head */
.wrapper-confirmation .conf-trip-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.wrapper-confirmation .conf-trip-wrap .conf-hero { padding: 16px 20px 6px; border-radius: 18px; border: 1px solid #cfe0ff; }
.wrapper-confirmation .conf-trip-wrap .conf-hero .bill-hero-name { font-size: 22px; }
.wrapper-confirmation .conf-trip-wrap .conf-hero .bill-hero-car { max-height: 150px; }
.wrapper-confirmation .conf-bill .bill-head { border-radius: 0; }
@media (max-width: 767px) {
  .wrapper-confirmation .conf-trip-wrap { grid-template-columns: 1fr; gap: 16px; }
}
/* /confirmare printed („Printează”, „Save as PDF”): only the order card, with its colours, on white (Vlad 30.10) */
@media print {
  body:has(.wrapper-confirmation) header, body:has(.wrapper-confirmation) .header-site-container, body:has(.wrapper-confirmation) footer,
  body:has(.wrapper-confirmation) .confirmation-figma-actions, body:has(.wrapper-confirmation) .confirmation-figma-success,
  body:has(.wrapper-confirmation) .reservation-now, body:has(.wrapper-confirmation) [class*="cookie"], body:has(.wrapper-confirmation) nextjs-portal { display: none !important; }
  body:has(.wrapper-confirmation) { background: #fff !important; }
  .wrapper-confirmation { padding: 0 !important; background: none !important; }
  .wrapper-confirmation * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrapper-confirmation .confirmation-figma-card { margin: 0 !important; box-shadow: none !important; border: 0 !important; }
  .wrapper-confirmation .conf-bill, .wrapper-confirmation .confirmation-figma-quick, .wrapper-confirmation .conf-trip-wrap { break-inside: avoid; }
}
/* review UX (Locație și perioadă): the trip column as wide as its text, the car card wider; names wrap in balance; the
   client's contact quieter than the trip; on phones the car first in the block */
.wrapper-confirmation .conf-trip-wrap { grid-template-columns: max-content minmax(0, 1fr); gap: 32px; align-items: start; }
.wrapper-confirmation .conf-hero .bill-hero-name, .wrapper-confirmation .confirmation-figma-client-name { text-wrap: balance; }
.wrapper-confirmation .confirmation-figma-client-name { font-size: 20px !important; }
.wrapper-confirmation .confirmation-figma-client-info { font-size: 15px !important; }
.wrapper-confirmation .conf-trip dd > small { font-size: 15px; color: #2b3540; }
@media (max-width: 767px) {
  .wrapper-confirmation .conf-trip-wrap { grid-template-columns: 1fr; }
  .wrapper-confirmation .conf-trip-wrap > .conf-hero { order: -1; }
  .wrapper-confirmation .conf-trip-wrap .conf-hero .bill-hero-car { max-height: 120px; }
}
.wrapper-confirmation .conf-trip .conf-addr { margin: 1px 0 2px; font: 14px/1.4 Raleway-Medium, sans-serif; font-style: normal; color: #2b3540; }

/*
 * /plata on desktop on one page (Vlad 30.10): the customer's details on top in two columns, under them one wide card:
 * the car and the trip | the bill and the total | the payment, the terms and „Finalizează rezervarea”. No sticky
 * columns, no long scroll. Desktop browsers only (the phones' page has no .bill).
 */
@media (min-width: 992px) {
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) { display: flex; flex-wrap: wrap; row-gap: 0; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > div { width: 100%; flex: 0 0 100%; max-width: 100%; position: static !important; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .col-md-7 { order: 1; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .col-lg-7 { order: 2; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .col-md-5 { order: 3; display: block !important; margin-top: 28px; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .summary-payment-col { order: 4; }
  /* the details: a white card, the fields two by two */
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .wrapper-client-details { padding: 20px 24px 8px; border: 1px solid #dbe0e3; border-radius: 20px; background: #fff; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details > .row { display: contents; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details > .row > div { width: auto; float: none; padding: 0; margin: 0 0 14px; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details textarea { height: 48px; min-height: 48px; resize: vertical; }
  /* the wide card: three columns (the car and the trip | the bill and the total | the payment) */
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details > .row::before,
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .payment-client-details > .row::after { display: none; }
  .wrapper-container-payment .summary-payment:has(.bill) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start;
    padding: 24px !important; border: 1px solid #dbe0e3; border-radius: 24px; background: #fff;
  }
  .wrapper-container-payment .summary-payment:has(.bill) > * { min-width: 0; }
  .wrapper-container-payment .summary-payment:has(.bill) > input, .wrapper-container-payment .summary-payment:has(.bill) > script,
  .wrapper-container-payment .summary-payment:has(.bill) > .wrapper-payemnt-details { display: none !important; }
  .wrapper-container-payment .summary-payment:has(.bill) .bill-side .bill-hero { margin: 0 0 16px; }
  .wrapper-container-payment .summary-payment:has(.bill) .bill-side .bill-included { margin-bottom: 0; }
  .wrapper-container-payment .summary-payment:has(.bill) .bill-col .total-bottom { margin: 0 !important; }
  .wrapper-container-payment .summary-payment:has(.bill) > .payment-finish { margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid #e6ebef; }
  .wrapper-container-payment .summary-payment:has(.bill) .payment-finish .btn_order { margin-top: 12px; min-height: 52px; font-size: 17px !important; }
}
@media (min-width: 992px) {
  /* one page: the card speaks for itself (no second title), less air above the details */
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .col-md-5 { display: none !important; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) > .summary-payment-col { margin-top: 20px; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) { padding-top: 28px !important; padding-bottom: 28px !important; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .wrapper-booking-top-title { margin-bottom: 14px; }
  .wrapper-container-payment .wrapper-booking-inner:has(.bill) .wrapper-client-details .payment-client-details > .row > div { margin-bottom: 10px; }
}
@media (min-width: 992px) {
  .wrapper-container-payment .summary-payment:has(.bill) .bill-side .bill-hero { padding: 14px 16px 2px; }
  .wrapper-container-payment .summary-payment:has(.bill) .bill-side .bill-hero-name { font-size: 22px !important; }
  .wrapper-container-payment .summary-payment:has(.bill) .bill-side .bill-hero-car { max-height: 120px; }
}
/* a narrower desktop: the car and the bill side by side, the payment under them across the card */
@media (min-width: 992px) and (max-width: 1199px) {
  .wrapper-container-payment .summary-payment:has(.bill) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); row-gap: 20px; }
  .wrapper-container-payment .summary-payment:has(.bill) > .payment-finish { grid-column: 1 / -1; padding: 20px 0 0 !important; border-left: 0 !important; border-top: 1px solid #e6ebef !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .wrapper-container-payment .summary-payment:has(.bill) > .payment-finish > * { min-width: 0; }
}
/* the trip now carries the address: its column shares the room, the car keeps at least 220 px; narrower, one under the other */
.wrapper-confirmation .conf-trip-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr); }
@media (max-width: 1199px) { .wrapper-confirmation .conf-trip-wrap { grid-template-columns: 1fr; } .wrapper-confirmation .conf-trip-wrap > .conf-hero { max-width: 420px; } }
/* „Alte beneficii incluse” (i): the window in the bill's look (Vlad 30.10): a small title, green ticks, the text on the
   left (the rows' flex of the summary made each line push its text to the right) */
.tooltip .tooltip-inner { padding: 12px 16px !important; border: 1px solid #cfe0ff !important; border-radius: 14px !important; box-shadow: 0 14px 34px rgba(16, 40, 90, .14) !important; }
.tooltip .tooltip-inner .tt-title { margin: 0 0 6px; font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d; text-align: left; }
.tooltip .tooltip-inner ul.tt-benefits { margin: 0; padding: 0; }
.tooltip .tooltip-inner ul.tt-benefits li {
  display: flex !important; justify-content: flex-start !important; align-items: baseline; gap: 8px; margin: 0 0 4px !important; padding: 0 !important;
  font: 14px/1.45 Raleway-Medium, sans-serif !important; color: #1a1a1a !important; text-align: left !important; white-space: normal;
}
.tooltip .tooltip-inner ul.tt-benefits li:last-child { margin-bottom: 0 !important; }
.tooltip .tooltip-inner .tt-tick { flex: none; color: #0b7350; font-weight: 700; }
.tooltip.top .tooltip-arrow { border-top-color: #cfe0ff !important; }
/* the (i) of the summary in the new look (Vlad 30.10): a small blue dot with „i”, as a button (44 px target) */
.info-link { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: 4px; vertical-align: middle; text-decoration: none !important; }
.info-link::after { content: ''; position: absolute; inset: -12px; }
.info-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e6f0ff; color: #0058cc; font: 12px/1 Raleway-Bold, sans-serif; font-style: normal; }
.info-link:hover .info-dot, .info-link:focus-visible .info-dot { background: #0070ff; color: #fff; }
.wrapper-booking-right .summary-warranty li > div:first-child { display: inline-flex; align-items: center; gap: 2px; }

/* The compare bar and the cookie notice step out of the way of the home showcase's buttons (wlc-site.js, Vlad 31.10) */
#wlc-compare-bar.wlc-cmp-bar.is-open.wlc-yield { transform: translate(-50%, calc(100% + 40px)); pointer-events: none; }
/* the notice writes its own style after this file (#wlc-consent.wlc-visible): the extra class wins over it */
html body #wlc-consent.wlc-visible.wlc-yield { transform: translateY(calc(100% + 24px)); pointer-events: none; }

/* „Caută mașini” while the search is on its way (wlc-site.js, Vlad 31.10) */
#form-reservation .box-submit-button button.wlc-busy, [data-dates-cta].wlc-busy { cursor: progress; }
.wlc-spin { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: wlc-spin .8s linear infinite; }
@keyframes wlc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wlc-spin { animation-duration: 2.4s; } }

/* ==========================================================================
 * Audit final A11 (Vlad 31.10): /plata
 * ========================================================================== */
/* the page's title is its h1 now: the look of the old div */
.wrapper-payment h1.wrapper-booking-top-title { margin-top: 0; }
/* phones, on top: the car, the pick-up and the return, the total, without a tap (same trip as the summary's) */
.pay-top { margin: 0 0 20px; padding: 16px; border: 1px solid #dbe0e3; border-radius: 16px; background: #fff; }
.pay-top-car { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pay-top-name { font: 18px/1.25 Syne-Bold, sans-serif; color: #1a1a1a; }
.pay-top-car img { width: 110px; height: auto; flex: none; }
.pay-top .bill-trip { position: relative; margin: 0 0 14px; padding-left: 22px; }
.pay-top .bill-trip::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 26px; border-left: 2px dotted #b9c7d6; }
.pay-top .bill-trip > div { position: relative; margin: 0 0 10px; }
.pay-top .bill-trip > div:last-child { margin-bottom: 0; }
.pay-top .bill-trip > div::before { content: ''; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #0070ff; box-shadow: 0 0 0 3px #e6f0ff; }
.pay-top .bill-trip > div:last-child::before { background: #fff; border: 2px solid #0070ff; }
.pay-top .bill-trip dt { font: 11px/1.3 Raleway-Bold, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56616d; }
.pay-top .bill-trip dd { display: flex; flex-direction: column; margin: 2px 0 0; }
.pay-top .bill-trip dd > span { font: 15px/1.35 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
.pay-top .bill-trip dd > small { font: 14px/1.4 Raleway-Medium, sans-serif; color: #5a646d; }
.pay-top-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-top: 12px; border-top: 1px solid #e6ebef; }
.pay-top-label { font: 15px/1.3 Raleway-SemiBold, sans-serif; color: #1a1a1a; }
.pay-top-value { font: 22px/1.2 Syne-Bold, sans-serif; color: #1a1a1a; font-variant-numeric: tabular-nums lining-nums; margin-right: auto; }
.pay-top-total .summary-total-modal { display: inline-flex; align-items: center; min-height: 44px; color: #0070ff; font: 15px/1.3 Raleway-SemiBold, sans-serif; cursor: pointer; }
/* under „Finalizează rezervarea”: what happens next and what to bring */
.pay-reassure { margin: 14px 0 0; padding: 0; font: 14px/1.45 Raleway-Medium, sans-serif; color: #5a646d; }
.pay-reassure li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.pay-reassure li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #0b7350; font-weight: 700; }
/* the car and „Detalii preț” are in the card on top (.pay-top): not again by the payment choice (review UX 31.10) */
.wrapper-payment:has(.pay-top) .wrapper-payemnt-details .summary-total-modal { display: none !important; }

/* The shortest rental (wlc-site.js, Vlad 31.10): the rule and „Da, calculează pentru 2 zile” under the return date */
.wlc-short { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #1d1d1f; font-size: 14px; line-height: 20px; }
.wlc-short p { margin: 0 0 10px; font-weight: 600; }
.wlc-short .wlc-nowrap { white-space: nowrap; }
.wlc-short .wlc-short-yes { min-height: 44px; padding: 10px 18px; width: auto; background: #fff !important; color: #1f5fe0 !important; border: 2px solid #1f5fe0 !important; box-shadow: none; }
.wlc-short .wlc-short-yes:hover, .wlc-short .wlc-short-yes:focus-visible { background: #eef3ff !important; }
@media (min-width: 768px) { .wrapper-reservation-form + .wlc-short { margin: 12px 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wrapper-reservation-form + .wlc-short p { margin: 0; } }

/* A header menu open (wlc-site.js, Vlad 31.10): the floating search bar and the compare bar step aside */
body.wlc-menu-open .wlc-float-search,
body.wlc-menu-open #wlc-compare-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* /plata in a desktop window narrowed to a phone's width (review UX 31.10): the bill already has the total and the
   „Detalii preț” bar, so the phones' second total under it goes; the payment choices keep dark labels on their white boxes */
@media (max-width: 768px) {
  .wrapper-payment .summary-payment:has(.bill) .wrapper-payemnt-details > .total-bottom-mobile-extra,
  .wrapper-payment .summary-payment:has(.bill) .wrapper-payemnt-details > .total { display: none !important; }
  .wrapper-payment .summary-payment:has(.bill) .list-types-payment label { color: #1a1a1a !important; }
}

/* ---- the selects' arrow: minified_*.css points at /images/select-arrow-down.svg, which the site has never had (a 404 on
 * every page with a select, Park4Fly audit 31.10). The selects have always shown without it, so the rule asks for no
 * image: nothing changes on screen and the request is gone ---- */
select { background-image: none !important; }