rent in Dubai price", already shown in the summary row */
.dcb-price small,
.dcb-price-main small { display: none; }
.dcb-price > span:not(.dcb-deposit-tag) {
flex-basis: 100%; font: 500 13px/1.35 inherit; color: var(--dcb-grey);
}
/* the deposit is already stated once in the hero and again in step 3 */
.dcb-deposit-tag { display: none; }
/* the JS emits class="dcb-btn ghost dcb-car-select", so .dcb-btn.ghost (0,2,0)
would otherwise outrank a bare .dcb-car-select (0,1,0) */
.dcb-car-select,
.dcb-btn.ghost.dcb-car-select {
width: 100%; min-height: 44px; padding: 0 12px;
background: var(--dcb-primary); color: var(--dcb-ink); border: 0; border-radius: 999px;
font: 700 14px/1 inherit; font-family: inherit; box-shadow: none; cursor: pointer;
transition: background-color 120ms linear, color 120ms linear;
}
.dcb-car-select:hover,
.dcb-btn.ghost.dcb-car-select:hover { background: var(--dcb-ink); color: #FFF; }
/* the spec row is styled for the day the view emits it; it is not in buildCarCard yet */
.dcb-spec-row { display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 0; border-top: 0; margin: 0; }
.dcb-spec { display: inline-flex; align-items: center; gap: 4px; }
.dcb-spec-icon { width: 13px; height: 13px; flex: none; color: var(--dcb-primary-deep); }
.dcb-spec-icon svg { width: 100%; height: 100%; display: block; }
.dcb-spec-copy { display: inline-flex; align-items: center; gap: 4px; }
.dcb-spec-label { display: none; }
.dcb-spec-value { font: 500 13px/1.3 inherit; color: var(--dcb-grey); white-space: nowrap; }
/* ==========================================================================
BLOCK 7 — LOADING, EMPTY AND ERROR: three components, not one grey sentence
========================================================================== */
/* renderCars() emits exactly one state node: for
loading, network error and empty alike. .dcb-skeleton-card and the whole
.dcb-state/.dcb-state__* family were never produced by script.js or
booking-ui.php and have been removed. Like car-search.js, this funnel makes a
failed request read as "no such cars" — it needs an error modifier in JS. */
.dcb-loading {
grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
gap: 12px; padding: 32px 20px; background: #FFF; border: 1px solid var(--dcb-border);
border-radius: var(--dcb-radius); text-align: center; box-shadow: none;
font: 500 14px/1.5 inherit; color: var(--dcb-grey);
}
/* ==========================================================================
BLOCK 8 — THE LOCATION SHEET
The old sheet was align-items:flex-end with no overflow-y and no max-height,
so ~928px of content against a ~560px viewport pushed the header, the map
and the close button off the TOP, with body scroll locked and no Escape.
========================================================================== */
.dcb-sheet-backdrop {
overflow-y: auto; align-items: flex-end; justify-content: center;
background: rgba(0, 30, 107, .45); overscroll-behavior: contain;
}
.dcb-sheet {
display: flex; flex-direction: column; width: 100%; max-width: 520px;
background: #FFF; border-radius: 20px 20px 0 0; padding: 0 16px 20px;
box-shadow: 0 -12px 40px rgba(0, 30, 107, .28);
max-height: 88vh; /* MUST stay above the dvh line: iOS < 15.4 drops dvh */
max-height: 88dvh;
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
animation: dcbSheet 200ms ease forwards;
}
.dcb-sheet-header {
position: sticky; top: 0; z-index: 2; background: #FFF;
display: flex; align-items: center; gap: 12px; margin: 0 -16px;
padding: 14px 16px 12px; border-bottom: 1px solid var(--dcb-line);
}
.dcb-sheet-title { font: 700 18px/1.2 inherit; color: var(--dcb-ink); }
#dcb-close-sheet { min-width: 44px; min-height: 44px; }
.dcb-sheet-search {
display: flex; align-items: center; gap: 10px; min-height: 52px;
border: 1px solid var(--dcb-border); border-radius: var(--dcb-radius-field);
padding: 0 12px; margin: 12px 0; background: #FFF;
}
.dcb-sheet-search input {
font-size: 16px; font-weight: 500; color: var(--dcb-ink);
border: 0; background: transparent; flex: 1; min-width: 0; font-family: inherit;
}
.dcb-sheet-group { margin-top: 4px; }
.dcb-sheet-subtitle { font: 700 13px/1.3 inherit; color: var(--dcb-grey); margin: 12px 0 8px; }
.dcb-sheet-list { max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 4px; }
.dcb-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dcb-map-title { font: 700 14px/1.3 inherit; color: var(--dcb-ink); }
.dcb-map-sub,
.dcb-map-hint,
.dcb-map-empty { font: 500 13px/1.4 inherit; color: var(--dcb-grey); }
.dcb-map { background: var(--dcb-bg); border: 1px solid var(--dcb-border); border-radius: 12px; }
.dcb-map-pin { border: 0; background: none; cursor: pointer; padding: 0; }
.dcb-pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dcb-primary); box-shadow: 0 0 0 3px rgba(60, 173, 213, .35); }
.dcb-map-pin:hover .dcb-pin-dot { background: var(--dcb-ink); box-shadow: 0 0 0 3px rgba(0, 30, 107, .25); }
.dcb-map-pin.is-active .dcb-pin-dot { background: var(--dcb-ink); box-shadow: 0 0 0 3px rgba(0, 30, 107, .25); }
.dcb-map-fields { display: grid; gap: 10px; margin-top: 10px; }
.dcb-map-field { display: flex; flex-direction: column; gap: 6px; }
.dcb-map-field input {
min-height: 44px; font-size: 16px; border: 1px solid var(--dcb-border);
border-radius: 8px; padding: 0 10px; color: var(--dcb-ink); font-family: inherit;
}
/* Station rows become priced rows. The old .dcb-info-dot is a decorative
letter "i" with no handler of its own — it promises information it never
delivers, so it is hidden and the fee goes into .dcb-station-sub instead. */
.dcb-station {
display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
min-height: 56px; padding: 10px 12px; width: 100%; text-align: left;
border: 1px solid transparent; border-radius: 12px; background: #FFF; cursor: pointer;
font-family: inherit;
transition: background-color 120ms linear, border-color 120ms linear;
}
.dcb-station:hover { background: var(--dcb-bg); border-color: var(--dcb-border); }
.dcb-station-meta { min-width: 0; }
.dcb-station-name { font: 700 16px/1.3 inherit; color: var(--dcb-ink); }
.dcb-station-sub { font: 400 13px/1.35 inherit; color: var(--dcb-grey); }
.dcb-info-dot { display: none; }
@media (min-width: 1024px) {
.dcb-sheet-backdrop { align-items: center; }
.dcb-sheet { max-height: 80dvh; border-radius: 20px; }
}
/* ==========================================================================
BLOCK 9 — STEP 3: CONFIG, LEGAL, ADDONS, TRANSFER, PRICE
========================================================================== */
.dcb-config-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
/* Step 3 is a bounded, internally scrolling panel, exactly like the results
grid: the driver form, add-ons and delivery options used to add their full
height to the page. "Back to cars" stays outside the scrollport so it is
always reachable, and the price footer is pinned to the bottom of it so the
total and the CTA never scroll out of sight. */
/* CONTAINER-AWARE, NOT VIEWPORT-AWARE.
This widget renders inside a 56%-wide hero card on the daily page — about
630px — while the viewport is 1400px. Viewport media queries therefore split
step 3 into two ~300px columns INSIDE a 630px box, which is what made every
field wrap and the whole step read as a jumble. Container queries are not an
option here (`container-type` applies `contain: layout`, which breaks the
map's getBoundingClientRect maths), but flex-wrap measures the real
available width for free: the two columns sit side by side only when there
is genuinely room for both. */
.dcb-config-layout {
display: flex; flex-wrap: wrap; gap: 10px;
align-items: flex-start;
max-height: min(62vh, 620px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
padding: 2px;
}
.dcb-config-left { flex: 1 1 320px; }
.dcb-config-right { flex: 1 1 360px; }
.dcb-config-left,
.dcb-config-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The chosen car is a CONFIRMATION, not a second hero. As a full-width image
card it ate ~250px before the form even began. The five children are exactly
title, sub, image, meta, foot, so every one gets a named area — an element
left unplaced is what broke the results card in an earlier revision. */
.dcb-hero-card {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
grid-template-areas: "img title" "img sub" "img meta" "foot foot";
align-items: start; gap: 2px 12px;
background: #FFF; border: 1px solid var(--dcb-border); border-radius: 12px;
padding: 12px; box-shadow: none;
}
.dcb-hero-image {
grid-area: img; width: 64px; height: 64px; margin: 0;
background: var(--dcb-bg); border-radius: 8px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.dcb-hero-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.dcb-hero-title { grid-area: title; font: 700 16px/1.3 inherit; color: var(--dcb-ink); }
.dcb-hero-sub { grid-area: sub; font: 400 13px/1.4 inherit; color: var(--dcb-grey); margin-top: 1px; }
/* updateConfig emits six: brand, service, seats, doors, transmission, mileage */
.dcb-hero-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dcb-hero-meta .dcb-badge { font-size: 13px; padding: 3px 8px; }
.dcb-hero-foot { grid-area: foot; margin-top: 8px; font: 500 13px/1.45 inherit; color: var(--dcb-grey); }
.dcb-contact-group { background: #FFF; border: 1px solid var(--dcb-border); border-radius: 12px; padding: 13px; }
/* a form-section label, not a heading competing with the page's own headings */
.dcb-group-title { font: 700 13px/1.3 inherit; color: var(--dcb-ink); letter-spacing: .2px; }
/* Three subtitles are three extra lines of prose the labels already carry, and
the widget is 630px wide inside the daily page hero at a 1400px viewport — so
a viewport query got this backwards. Hidden at every width. */
.dcb-group-subtitle { display: none; font: 400 13px/1.4 inherit; color: var(--dcb-grey); margin-top: 2px; }
/* Three children: name, the .dcb-phone-field wrapper, email. As a 2-column
grid that left email alone on row two beside an empty cell. As a wrapping
flex row they pack neatly at whatever width the card actually has. */
.dcb-field-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: stretch; }
.dcb-field-inline > * { flex: 1 1 210px; min-width: 0; }
.dcb-field-inline input,
.dcb-field-inline select,
.dcb-contact-group textarea,
#dcb-special-requests {
min-height: 52px; font-size: 16px; font-weight: 500; color: var(--dcb-ink);
border: 1px solid var(--dcb-border); border-radius: var(--dcb-radius-field);
padding: 0 12px; background: #FFF; width: 100%; font-family: inherit;
}
.dcb-field-inline input::placeholder,
.dcb-contact-group textarea::placeholder { color: var(--dcb-grey); opacity: 1; font-weight: 400; }
.dcb-contact-group textarea,
#dcb-special-requests,
.dcb-driver-group textarea { min-height: 88px; padding: 12px; margin-top: 10px; line-height: 1.5; }
/* #dcb-special-requests is a SIBLING of .dcb-field-inline, not a child of it,
so it is full width already and needs no span rule. */
.dcb-transfer-group { gap: 12px; }
/* intl-tel-input v26.0.6.
Read off the live DOM, not assumed: this build renders
`iti iti--allow-dropdown iti--show-flags iti--inline-dropdown`. It is NOT
iti--separate-dial-code, so every rule written against that modifier was
dead. The library also writes `style="padding-left:87px"` INLINE on the tel
input, so CSS must never try to set that padding — an inline style wins and
the two would only ever disagree.
The dropdown is position:absolute inside .iti__country-container, which means
.dcb-config-layout's own overflow WILL clip it. It is therefore capped to a
height that fits inside the panel and scrolls its own list. */
/* The phone control must be the same 52px box as the name and email inputs it
sits beside, all the way down: wrapper -> .iti -> the tel input. */
.dcb-phone-field { min-width: 0; position: relative; display: flex; }
.dcb-phone-field .iti { width: 100%; display: block; position: relative; min-height: 52px; }
/* password managers inject a floated 0x0 root in here; it must not disturb the row */
.dcb-phone-field > [data-lastpass-icon-root],
.dcb-phone-field > [data-dashlane-rid],
.dcb-phone-field > [data-1p-root] { display: none !important; }
.dcb-phone-field .iti__tel-input,
.dcb-phone-field .dcb-phone-input {
width: 100%; min-height: 52px; height: 52px; font-size: 16px; font-weight: 500;
color: var(--dcb-ink); background: #FFF; font-family: inherit;
border: 1px solid var(--dcb-border); border-radius: var(--dcb-radius-field);
padding-right: 12px; /* never padding-LEFT: the library writes that inline */
}
.dcb-phone-field .iti__tel-input::placeholder { color: var(--dcb-grey); opacity: 1; font-weight: 400; }
.dcb-phone-field .iti__country-container { padding: 1px; }
.dcb-phone-field .iti__selected-country {
height: 100%; border: 0; border-right: 1px solid var(--dcb-border);
border-radius: var(--dcb-radius-field) 0 0 var(--dcb-radius-field);
background: var(--dcb-bg); padding: 0 9px 0 11px; cursor: pointer;
}
.dcb-phone-field .iti__selected-country:hover { background: var(--dcb-tint); }
.dcb-phone-field .iti__selected-dial-code { font: 500 16px/1 inherit; color: var(--dcb-ink); margin-left: 5px; }
.dcb-phone-field .iti__arrow { margin-left: 5px; border-top-color: var(--dcb-grey); }
/* THE LIBRARY'S HIDE MUST ALWAYS WIN.
intl-tel-input closes the dropdown by adding .iti__hide, whose own rule is a
single class — specificity (0,1,0). Any descendant-qualified rule of ours,
e.g. `.dcb-phone-field .iti__dropdown-content`, is (0,2,0) and outranks it,
so an unguarded `display:flex` here leaves all 244 countries permanently
rendered inside the driver form while the button still reports
aria-expanded="false". This backstop is first, and every display rule below
is guarded with :not(.iti__hide). */
.dcb-phone-field .iti__hide,
.dcb-phone-field .iti__hide[class] { display: none !important; }
.dcb-phone-field .iti__dropdown-content:not(.iti__hide) {
display: flex; flex-direction: column; overflow: hidden;
max-height: 280px; background: #FFF;
border: 1px solid var(--dcb-border); border-radius: 12px;
box-shadow: 0 18px 36px rgba(0, 30, 107, .16);
}
.dcb-phone-field .iti__search-input {
border: 0; border-bottom: 1px solid var(--dcb-line); border-radius: 0;
padding: 11px 12px; font-size: 16px; font-family: inherit; color: var(--dcb-ink);
}
.dcb-phone-field .iti__country-list {
max-height: 208px; overflow-y: auto; overscroll-behavior: contain;
border: 0; box-shadow: none; border-radius: 0;
}
.dcb-phone-field .iti__country { padding: 11px 12px; font-size: 14px; min-height: 44px; }
.dcb-phone-field .iti__country-name { color: var(--dcb-ink); }
.dcb-phone-field .iti__dial-code { color: var(--dcb-grey); }
.dcb-phone-field .iti__country.iti__highlight,
.dcb-phone-field .iti__country[aria-selected="true"] { background: var(--dcb-tint); }
.dcb-phone-field .iti__no-results { padding: 12px; font: 500 13px/1.4 inherit; color: var(--dcb-grey); }
/* inert on this build (inline-dropdown), kept in case a page ever inits
separateDialCode — harmless either way */
.dcb-driver-group .dcb-phone-field .iti--separate-dial-code { width: 100%; }
/* renderAddons() emits > +
+ . .dcb-addon-toggle is a
CHECKBOX. An earlier revision styled it as a 44px pill button AND hid it with
`.dcb-addon-card input{position:absolute;opacity:0}` at the same time, so the
card carried an invisible 44px box with its own margins. It is a real,
visible, native checkbox now — accessible, obvious, and zero custom markup. */
.dcb-addon-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dcb-addon-card {
flex: 1 1 240px; min-width: 0;
display: grid; grid-template-columns: 22px 44px minmax(0, 1fr);
align-items: center; gap: 10px;
border: 1px solid var(--dcb-border); border-radius: 10px; background: #FFF;
padding: 9px 11px; cursor: pointer; overflow: hidden;
transition: border-color 120ms linear, background-color 120ms linear;
}
.dcb-addon-card:hover { border-color: var(--dcb-primary); }
.dcb-addon-card:has(.dcb-addon-toggle:checked) { border-color: var(--dcb-ink); background: var(--dcb-tint); }
.dcb-addon-toggle {
position: static; opacity: 1; pointer-events: auto;
width: 20px; height: 20px; margin: 0; padding: 0;
min-height: 0; border: 0; border-radius: 0; background: none;
accent-color: var(--dcb-ink); cursor: pointer; flex: none;
}
.dcb-addon-media {
width: 44px; height: 44px; background: var(--dcb-bg); border-radius: 8px;
overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none;
}
.dcb-addon-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcb-addon-image--placeholder {
display: flex; align-items: center; justify-content: center;
color: var(--dcb-grey); font: 500 18px/1 inherit; width: 100%; height: 100%;
}
.dcb-addon-copy { padding: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcb-addon-title { font: 700 14px/1.3 inherit; color: var(--dcb-ink); }
.dcb-addon-price { font: 500 13px/1.3 inherit; color: var(--dcb-grey); }
.dcb-addon-empty { font: 500 13px/1.5 inherit; color: var(--dcb-grey); padding: 8px 0; }
.dcb-transfer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dcb-transfer-select {
width: 100%; min-height: 52px; font-size: 16px; font-weight: 500; color: var(--dcb-ink);
border: 1px solid var(--dcb-border); border-radius: var(--dcb-radius-field);
padding: 0 40px 0 12px; background-color: #FFF; appearance: none; margin-top: 12px;
font-family: inherit;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342567A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.dcb-transfer-note {
background: var(--dcb-tint); border: 1px solid var(--dcb-border); color: var(--dcb-ink);
border-radius: 10px; padding: 10px 12px; margin-top: 10px; font: 700 13px/1.4 inherit;
}
#dcb-transfer-info-toggle {
width: auto; min-width: 0; min-height: 44px; padding: 11px 4px 9px;
background: none; border: 0; box-shadow: none; border-radius: 0;
color: var(--dcb-ink); font: 700 14px/1.2 inherit; font-family: inherit;
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dcb-primary);
}
.dcb-transfer-info-panel[hidden] { display: none; }
.dcb-transfer-info-panel {
margin-top: 10px; background: var(--dcb-bg); border: 1px solid var(--dcb-border);
border-radius: 10px; padding: 10px;
max-height: 210px; overflow-y: auto; overscroll-behavior: contain;
}
.dcb-transfer-info-title { font: 700 14px/1.3 inherit; color: var(--dcb-ink); margin-bottom: 6px; }
.dcb-transfer-info-list { list-style: none; margin: 0; padding: 0; }
.dcb-transfer-info-list li {
display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 8px 0;
border-bottom: 1px solid var(--dcb-line); font: 500 13px/1.4 inherit; color: var(--dcb-grey);
}
.dcb-transfer-info-list li:last-child { border-bottom: 0; }
.dcb-transfer-info-list strong { color: var(--dcb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.dcb-legal-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dcb-legal-check {
display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
min-height: 44px; padding: 9px 10px; border: 1px solid var(--dcb-border);
border-radius: 10px; background: #FFF; cursor: pointer;
transition: border-color 120ms linear, background-color 120ms linear;
}
.dcb-legal-check:hover { border-color: var(--dcb-primary); }
.dcb-legal-check:has(.dcb-legal-checkbox:checked) { border-color: var(--dcb-ink); background: var(--dcb-tint); }
.dcb-legal-checkbox { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--dcb-ink); cursor: pointer; }
.dcb-legal-copy { font: 400 13px/1.45 inherit; color: var(--dcb-ink); }
.dcb-legal-text { color: inherit; }
.dcb-legal-link,
.dcb-legal-link-text {
color: var(--dcb-ink); font-weight: 700; text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: var(--dcb-primary);
}
.dcb-legal-link:hover,
.dcb-legal-link:focus { text-decoration-color: var(--dcb-ink); }
.dcb-legal-check.is-invalid {
border-color: var(--dcb-danger); background: var(--dcb-danger-bg);
box-shadow: inset 2px 0 0 var(--dcb-danger);
}
/* NO .dcb-legal-error rule here: a full read of booking-ui.php and script.js
shows nothing anywhere emits that class, so the old block was unreachable.
script.js:1930 and :1958 already toggle .is-invalid on .dcb-legal-check, so
ONE added per label in booking-ui.php lights a
tested error state with zero JS change. Re-add the two rules with it. */
.dcb-availability-status { border-radius: 12px; padding: 11px 13px; font: 700 13px/1.4 inherit; gap: 8px; align-items: center; margin-top: 12px; }
.dcb-availability-status.is-checking,
.dcb-availability-status.is-available { background: var(--dcb-tint); border: 1px solid var(--dcb-border); color: var(--dcb-ink); }
.dcb-availability-status.is-unavailable,
.dcb-availability-status.is-error { background: var(--dcb-danger-bg); border: 1px solid var(--dcb-danger); color: var(--dcb-danger); }
/* Hierarchy inverted by moving DOM nodes, never by flex order: order changes
paint order, not accessibility-tree reading order. */
.dcb-price-footer {
display: block; background: var(--dcb-bg); border: 1px solid var(--dcb-border);
border-radius: 12px; padding: 12px 13px; margin-top: 12px;
/* NOT sticky. .dcb-config-layout is a two-column scrollport on desktop, and a
sticky element living in the SHORTER column pins itself to the scrollport
floor and then rides over whatever the taller column scrolls past it. The
footer sits at its natural place at the end of the form instead, with a
heavier top edge so it reads as the summary that closes the step. */
position: static;
border-top-width: 2px; border-top-color: var(--dcb-ink);
}
/* Seven lines of near-identical numbers is why this step read as noise. The
breakdown is now one quiet block and the figure the customer is actually
asked for is the only thing with weight. Note .dcb-total-with-vat ALSO
carries .dcb-price-sub, hence the :not() below. */
.dcb-price-stack { display: flex; flex-direction: column; gap: 0; }
/* .dcb-price-main has exactly two children: #dcb-price-per-day and the single
.dcb-suffix ("/ Day"). space-between threw them to opposite ends of the
footer; they read as one phrase and must sit together. */
.dcb-price-main {
display: flex; justify-content: flex-start; align-items: baseline;
flex-wrap: wrap; gap: 0 4px;
padding: 2px 0; border-bottom: 0;
font: 500 13px/1.5 inherit; color: var(--dcb-grey);
}
/* the struck old price sits before the live one on the same line */
.dcb-price-main .dcb-price-strike { margin-right: 4px; }
/* the single .dcb-suffix inside #dcb-app. Was #c0c0c0 on white at 1.82:1, so
you could not tell whether "735" was per day or the whole total. */
.dcb-suffix { font: 500 13px/1 inherit; color: var(--dcb-grey); }
.dcb-price-sub:not(.dcb-total-with-vat) {
padding: 2px 0; border-bottom: 0;
font: 400 13px/1.5 inherit; color: var(--dcb-grey);
display: flex; justify-content: space-between; gap: 12px;
}
/* one colour, not four near-identical low-contrast blues */
.dcb-addons-total,
.dcb-transfer-total,
.dcb-vat-total { color: var(--dcb-grey); }
.dcb-total-with-vat {
border-bottom: 0; border-top: 1px solid var(--dcb-line);
margin-top: 7px; padding: 9px 0 3px; font: 700 22px/1.2 inherit;
color: var(--dcb-ink);
display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.dcb-price-strike { color: var(--dcb-grey); font: 500 13px/1.3 inherit; text-decoration: line-through; }
/* "Deposit: 700 AED" is one short string. A dashed panel around it was more
furniture than message; it is a quiet line under the total now, separated
because it is refundable and is NOT part of what the customer pays today. */
.dcb-deposit-note {
display: block; white-space: normal; margin-top: 4px;
background: none; border: 0; color: var(--dcb-grey);
padding: 0; font: 500 13px/1.4 inherit;
}
.dcb-deposit-note:empty { display: none; }
#dcb-complete {
width: 100%; margin-top: 10px; min-height: 50px; border-radius: 999px;
background: var(--dcb-primary); color: var(--dcb-ink); border: 0;
font: 700 16px/1 inherit; font-family: inherit; box-shadow: none; cursor: pointer;
transition: background-color 120ms linear, color 120ms linear;
}
#dcb-complete:hover { background: var(--dcb-ink); color: var(--dcb-on-dark); }
.dcb-success {
margin-top: 14px; background: var(--dcb-tint); border: 1px solid var(--dcb-border);
color: var(--dcb-ink); border-radius: var(--dcb-radius); padding: 20px; font: 500 16px/1.55 inherit;
}
.dcb-success strong { font-weight: 700; }
/* ==========================================================================
BLOCK 10 — TOAST AND MOTION
Raised above the sheet: the backdrop is 2147483640 and the sheet
2147483641, so every toast raised while the sheet was open painted
UNDERNEATH it — and the toast is the wizard's only error channel.
========================================================================== */
.dcb-toast {
left: 50%; bottom: 24px; transform: translateX(-50%);
background: var(--dcb-ink); color: #FFF; border-radius: 12px; padding: 13px 16px;
font: 700 14px/1.35 inherit; max-width: min(92vw, 420px);
box-shadow: 0 12px 32px rgba(0, 30, 107, .35);
z-index: 2147483642; transition: opacity 120ms linear;
}
@keyframes dcbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dcbSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dcbSlideLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dcbSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.dcb-step,
.dcb-step.anim-up,
.dcb-step.anim-left,
.dcb-sheet { animation: none !important; }
.dcb-car-card,
.dcb-chip,
.dcb-addon-card,
.dcb-station,
.dcb-btn,
.dcb-icon-btn,
.dcb-car-select { transition: none !important; }
}