/**
 * Car Transfer checkout redesign (Shared In Coach + Private Transfer).
 *
 * UI ONLY. Every rule is scoped under .dahr-ck (review/checkout) or
 * .dahr-ckc (booking confirmed) so nothing here can leak into the other
 * modules that share the .hw-car--* / .hw-passenger--* class names
 * (flight, hotel, excursion, booking history...).
 *
 * The car transfer templates carry their own inline <style> blocks in the
 * body, which come AFTER this enqueued file in document order. Every
 * override of an existing class is therefore written with at least two
 * class selectors (.dahr-ck .hw-...) so it wins on specificity instead of
 * relying on source order.
 *
 * Root font-size is 10px in this theme, so 1rem = 10px.
 */

.dahr-ck,
.dahr-ckc,
.dahr-ckv,
.dahr-ckvc {
    --ck-ink: #0F294D;
    --ck-ink-soft: #5A6B85;
    --ck-line: #E3E8F0;
    --ck-brand: #3264FF;
    --ck-brand-dark: #2450DB;
    --ck-brand-soft: #EEF3FF;
    /* React parity (client, 8-Oct-26): .hw-exchk--panel is
       `border: 1px solid #ECEEF3; border-radius: 6px;
        box-shadow: 0 1px 2px rgba(16,24,40,.04)`.
       The 1px border is drawn as a `0 0 0 .1rem` SPREAD shadow, not a real
       border: all 18 boxes in this file already read these two tokens, so one
       change reaches every one of them, and a shadow adds no box size — a real
       border would have grown every card and sidebar by 2px and could have
       reflowed the grids. */
    --ck-card-radius: .6rem;
    --ck-shadow: 0 0 0 .1rem #ECEEF3, 0 .1rem .2rem rgba(16, 24, 40, .04);
    /* PDF item 1 (client, 8-Oct-26): "dahr-ck__main ane dahr-ck__hero ubhi ek
       line ma nthi". The hero bleeds out of its container with negative
       margins and then pads back in by `vw/2 - 50% + gutter`, which lands its
       content at `container content edge + gutter`. The cards sit AT the
       container content edge, so any non-zero gutter pushed the Back link, the
       title and the step indicator that many px to the right of the cards --
       and the indicator the same distance left of the sidebar's right edge.
       Measured at 1.5rem: title 15px right of the card, steps 15px left of the
       sidebar; at 0 both are exactly 0. React does not have this problem
       because its hero sits OUTSIDE the body container and re-applies the same
       padding itself (.hw-exchk--heroInner). Keep this at 0: the container
       (.hw-page--width / .hw__page-inner) already supplies the gutter, and it
       is responsive (1.5/3/5/6/10rem), so a fixed value here can never match
       it at every width. */
    --ck-gutter: 0rem;
}

/* ==========================================================================
   1. Shell + full-bleed hero
   ========================================================================== */

/* The review form itself is the shell. Neutralise the old two-column grid
   that .hw-car--transferPaymentSection sets at several breakpoints. */
/* The review form sits in .hw-car--transferPaymentSectionMain, which adds a
   2.4rem top padding. With the full-bleed hero that reads as a stray strip
   between the site header and the band, so it is removed on the hosts that
   actually contain a redesigned form. */
.dahr-ck-host.hw-car--transferPaymentSectionMain {
    padding-top: 0;
}

.dahr-ck.hw-car--transferPaymentSection {
    display: block;
    grid-template-columns: none;
    row-gap: 0;
    column-gap: 0;
}

.dahr-ck__hero {
    position: relative;
    background: linear-gradient(120deg, #283D6B 0%, #22335E 52%, #3264FF 165%);
    color: #fff;
    /* Bleed to the viewport edges out of the .hw-page--width container.
       --dahr-vw is documentElement.clientWidth, set from JS: it excludes the
       scrollbar, so the band can never create a horizontal one. 100vw is only
       the fallback for when the script has not run yet. */
    margin-left: calc(50% - var(--dahr-vw, 100vw) / 2);
    margin-right: calc(50% - var(--dahr-vw, 100vw) / 2);
    /* React: .hw-exchk--hero { padding: 18px 0 54px } */
    padding-top: 18px;
    padding-bottom: 54px;
    box-shadow: 0 1rem 2.6rem -1.8rem rgba(40, 61, 107, .5);
    padding-left: calc(var(--dahr-vw, 100vw) / 2 - 50% + var(--ck-gutter));
    padding-right: calc(var(--dahr-vw, 100vw) / 2 - 50% + var(--ck-gutter));
}

.dahr-ck__heroTop {
    display: flex;
    /* flex-end, not flex-start: the left column is Back-on-top-of-title, so this
       is what puts the step indicator on the SAME line as the title instead of
       up beside the Back link (client, 8-Oct-26). On narrow screens the row
       wraps and align-items stops applying, which is the behaviour we want. */
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

/* React: .hw-exchk--back { gap:6px; font-weight:600; padding:6px 8px }
   and on the hero `color: rgba(255,255,255,.85)`. */
.dahr-ck__back {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: .6rem .8rem;
    margin-left: -.8rem;
}

.dahr-ck__back:hover,
.dahr-ck__back:focus {
    color: #fff;
    opacity: .85;
}

.dahr-ck__title {
    margin: .8rem 0 0;
    color: #fff;
    /* React: .hw-exchk--heroTitle { font-size: clamp(20px,2.4vw,27px);
       font-weight: 800; letter-spacing: -.01em } */
    font-size: 2.7rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Step indicator ---------------------------------------------------------- */

.dahr-ck__steps {
    display: flex;
    align-items: center;
    /* React: .hw-exchk--steps { gap: 6px } */
    gap: .6rem;
    /* The indicator now sits in the hero's top row, bottom-aligned with the
       title, so it no longer needs to be pushed down. .6rem lifts its text
       centre onto the title's. */
    margin-top: 0;
    margin-bottom: 0;
}

.dahr-ck__step {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    /* 14px (client, 8-Oct-26) */
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
}
.a2aFliter {
    padding: 0 !important;
}
/* React: 26px circle, 13px label, bg rgba(255,255,255,.16) on the hero */
.dahr-ck__stepNum {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .5);
}

.dahr-ck__step.is-active {
    color: #fff;
}

.dahr-ck__step.is-active .dahr-ck__stepNum {
    background: #fff;
    color: #283D6B;
}

.dahr-ck__step.is-done .dahr-ck__stepNum {
    background: #4ade80;
    color: #0f3d22;
}

/* React draws this as .hw-exchk--step::after (30px x 2px, radius 2px). Here it
   is a real element in the markup, restyled to the same size. */
.dahr-ck__stepBar {
    width: 3rem;
    height: 2.5px;
    border-radius: .2rem;
    margin: 0 .6rem;
    background: rgba(255, 255, 255, .28);
    flex-shrink: 0;
}

/* ==========================================================================
   2. Two column body
   ========================================================================== */

.dahr-ck__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: -3.2rem;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 992px) {
    .dahr-ck__main {
        grid-template-columns: minmax(0, 1fr) 45rem;
        align-items: flex-start;
    }
}

@media screen and (min-width: 1300px) {
    .dahr-ck__main {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

/* Left column: drop the old grid/scroll rules from the page stylesheet. */
.dahr-ck .hw-car--transferDetailLst {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    height: auto;
    overflow: visible;
    grid-template-rows: none;
    min-width: 0;
}

/* React: .hw-exchk--panel { padding: 22px } - one value, no breakpoint step. */
.dahr-ck__card {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 20px;
}

/* React: .hw-exchk--panelTitle { font-size: 18px; margin-bottom: 14px } */
.dahr-ck__cardTtl {
    margin: 0 0 1.4rem;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
}

/* Step panes -------------------------------------------------------------- */

.dahr-ck__pane {
    display: none;
}

.dahr-ck__pane.is-active {
    display: block;
}

/* The legacy widgets inside the panes lose their own card chrome — the pane
   is the card now. */
.dahr-ck .dahr-ck__pane .hw-car--listShow__widget,
.dahr-ck .dahr-ck__pane .hw__grid {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.dahr-ck__block + .dahr-ck__block {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ck__blockTtl {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
}

.dahr-ck__blockTtl .dahr-ck__opt {
    font-weight: 500;
    color: var(--ck-ink-soft);
}

.dahr-ck__note {
    margin: .4rem 0 1.2rem;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ck-ink-soft);
}

/* ==========================================================================
   3. Passenger accordion
   ========================================================================== */

.dahr-ck .hw-passenger--accodion .accordion-item {
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    overflow: hidden;
    background: #fff;
}

.dahr-ck .hw-passenger--accodion .accordion-item + .accordion-item {
    margin-top: 1.6rem;
}

.dahr-ck .hw-passenger--accodion .accordion-button {
    background: #fff;
    color: var(--ck-ink);
    font-size: 1.6rem;
    font-weight: 700;
    padding: 1.6rem 2rem;
    box-shadow: none;
    gap: 1rem;
}

.dahr-ck .hw-passenger--accodion .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid var(--ck-line);
}

.dahr-ck .hw-passenger--accodion .accordion-body {
    padding: 2rem;
}

.dahr-ck .hw-passenger--accodion .accordion-body > .row {
    --bs-gutter-x: 1.6rem;
    --bs-gutter-y: 1.6rem;
}

/* --- Matching the excursion/hotel passenger card (client, 8-Oct-26) --------
   Three measured differences, all fixed in CSS so neither the server-rendered
   Adult 1 nor the JS-built Adult 2+ markup had to be touched. */

/* 1. The divider under an open header. The template's inline <style> forces
      `border: none !important` on .accordion-button, which killed the
      border-bottom set above — hence !important here, on a 3-class selector so
      it beats that 2-class one. */
.dahr-ck .hw-passenger--accodion .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid var(--ck-line) !important;
}

/* 2. Field rows were 31px apart, not 16px: the row gets the bootstrap gutter
      set above AND the template's own `row-gap: 1.5rem`. Drop the second one
      and let the gutter alone do the spacing. */
.dahr-ck .hw-passenger--accodion .accordion-body .row {
    row-gap: 0;
}

/* 3. Adult 2+ come from a JS template literal whose row opens with an EMPTY
      placeholder column. It renders 0px tall but still takes a full gutter row,
      which made every Adult 2+ panel 31px taller than Adult 1. Hidden here
      rather than edited out of that one-line JS string. Adult 1 is unaffected —
      its first child is the Prefix column, not a .col-md-12. */
.dahr-ck .alladultssic .accordion-body > .row > div.col-md-12:first-child {
    display: none;
}

/* Inputs ------------------------------------------------------------------ */

/* React parity (client, 8-Oct-26). .hw-form--input in the React app's
   assets/css/Style.css:
     background #fff; border .1rem solid #D7D7D7; padding 1rem 1.2rem;
     border-radius .5rem; font-size 1.4rem; line-height 1.5; color #151515;
     min-height 4.4rem;  and from 992px up font-size 1.6rem / line-height 1.75.
   Focus there is `border-color: var(--hw-brand-orange)`, which despite the name
   resolves to #3264FF - the same brand blue we already use. */
.dahr-ck .form-control,
.dahr-ck .hw__btn-dropdown {
    min-height: 4.4rem;
    padding: 1rem 1.2rem;
    border-radius: .5rem;
    border: .1rem solid #D7D7D7;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #151515;
    background-color: #fff;
}

@media screen and (min-width: 992px) {
    .dahr-ck .form-control,
    .dahr-ck .hw__btn-dropdown {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}

.dahr-ck .form-control:focus,
.dahr-ck .hw__btn-dropdown:focus {
    border-color: var(--ck-brand);
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

.dahr-ck textarea.form-control {
    min-height: 7.2rem;
    padding-top: 1.6rem;
    resize: vertical;
}

.dahr-ck .hw__name_error {
    display: block;
    margin-top: .5rem;
    font-size: 1.3rem;
    color: #E5484D;
}

.dahr-ck .hw__required-line {
    border-color: #E5484D !important;
}

/* Pickup / drop-off pair (Shared In Coach only) --------------------------- */

.dahr-ck .hw-sic-pick-drop--detailsGroup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .dahr-ck .hw-sic-pick-drop--detailsGroup {
        grid-template-columns: 1fr 1fr;
    }
}

.dahr-ck #sicpickup,
.dahr-ck #sicdropoff {
    min-height: 5.2rem;
    padding-right:40px;
}
#sicpickup, #sicdropoff {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sicpickup:focus, #sicdropoff:focus {
    text-overflow: clip;
}

/* ==========================================================================
   4. Payment method cards (step 2)
   ========================================================================== */

.dahr-ck .hw-select--payment {
    display: block;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.dahr-ck .hw-radio--inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

@media screen and (min-width: 768px) {
    .dahr-ck .hw-radio--inline {
        grid-template-columns: 1fr 1fr;
    }
}

.dahr-ck .dahr-ck__pay,
.dahr-ckv .dahr-ck__pay {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 1.6rem 1.8rem;
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.dahr-ck .dahr-ck__pay:hover,
.dahr-ckv .dahr-ck__pay:hover {
    border-color: #C3D0E8;
}

.dahr-ck .dahr-ck__pay input[type="radio"],
.dahr-ckv .dahr-ck__pay input[type="radio"] {
    width: 2rem;
    height: 2rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--ck-brand);
}

.dahr-ck .dahr-ck__payIcon,
.dahr-ckv .dahr-ck__payIcon {
    color: var(--ck-ink-soft);
    display: inline-flex;
    flex-shrink: 0;
}

.dahr-ck .dahr-ck__payTxt,
.dahr-ckv .dahr-ck__payTxt {
    min-width: 0;
    display: block;
}

.dahr-ck .dahr-ck__payName,
.dahr-ckv .dahr-ck__payName {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ck-ink);
    line-height: 1.3;
}

.dahr-ck .dahr-ck__payMeta,
.dahr-ckv .dahr-ck__payMeta {
    display: block;
    font-size: 1.3rem;
    color: var(--ck-ink-soft);
    line-height: 1.4;
    margin-top: .2rem;
}

.dahr-ck .dahr-ck__pay.is-selected,
.dahr-ckv .dahr-ck__pay.is-selected {
    border-color: var(--ck-brand);
    background: var(--ck-brand-soft);
}

/* ==========================================================================
   5. Collapsible policy block
   ========================================================================== */

.dahr-ck__acc {
    border-top: .1rem solid var(--ck-line);
    margin-top: 2.4rem;
    padding-top: 2.4rem;
}

.dahr-ck__accHd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
    text-align: left;
    cursor: pointer;
}

.dahr-ck__accHd svg {
    flex-shrink: 0;
    transition: transform .2s ease;
}

.dahr-ck__accHd.is-closed svg {
    transform: rotate(180deg);
}

.dahr-ck__accBody {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--ck-ink-soft);
}

.dahr-ck__accBody p:last-child,
.dahr-ck__accBody ul:last-child {
    margin-bottom: 0;
}

.dahr-ck__accHd.is-closed + .dahr-ck__accBody {
    display: none;
}

/* ==========================================================================
   6. Terms line + footer actions
   ========================================================================== */

.dahr-ck__terms {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--ck-ink-soft);
}

.dahr-ck__terms a {
    color: #0062FF;
    text-decoration: underline;
}

.dahr-ck__terms a:hover {
    color: #0F294D;
}

.dahr-ck__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 2.4rem;
}

.dahr-ck__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 5.2rem;
    padding: 0 2.8rem;
    border: .1rem solid transparent;
    border-radius: .8rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dahr-ck__btn--primary {
    background: #0062FF;
    color: #fff;
}

.dahr-ck__btn--primary:hover,
.dahr-ck__btn--primary:focus {
    background: var(--ck-brand-dark);
    color: #fff;
}

.dahr-ck__btn--ghost {
    background: var(--ck-brand-soft);
    color: var(--ck-brand);
}

.dahr-ck__btn--ghost:hover,
.dahr-ck__btn--ghost:focus {
    background: #E0E9FF;
    color: var(--ck-brand);
}

/* ==========================================================================
   7. Summary sidebar
   ========================================================================== */

.dahr-ck .hw-car--transferFareSummary {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2rem;
    row-gap: 0;
    min-width: 0;
}

@media screen and (min-width: 992px) {
    .dahr-ck .hw-car--transferFareSummary {
        position: sticky;
        top: 2rem;
        z-index: 2;
    }
}

.dahr-ck .hw-passenger--fareSummary__box {
    padding: 0;
}

.dahr-ck__prod {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.dahr-ck__prodImg {
    width: 8.8rem;
    height: 6.4rem;
    border-radius: .8rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #F1F4F9;
}

.dahr-ck__prodImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dahr-ck__prodTxt {
    min-width: 0;
}

.dahr-ck__prodTtl {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ck-ink);
    margin: 0;
}

.dahr-ck__prodSub {
    font-size: 1.4rem;
    color: var(--ck-ink-soft);
    margin-top: .2rem;
    line-height: 1.4;
}

.dahr-ck__edit {
    display: inline-block;
    margin-top: .4rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ck-brand);
    cursor: pointer;
    text-decoration: none;
}

.dahr-ck__edit:hover {
    text-decoration: underline;
    color: var(--ck-brand);
}

/* Meta rows (date, vehicle, passengers...) -------------------------------- */

.dahr-ck__meta {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.dahr-ck__metaRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
    font-size: 1.5rem;
    line-height: 1.4;
}

.dahr-ck__metaKey {
    color: var(--ck-ink-soft);
    flex-shrink: 0;
}

.dahr-ck__metaVal {
    color: var(--ck-ink);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* The meta values are filled by the existing JS, which writes
   "<b>Route:</b> ..." into them. Hide that inline label — the row already
   has its own key column. */
.dahr-ck__metaVal b {
    display: none;
}

.dahr-ck .dahr-ck__badges,
.dahr-ckc .dahr-ck__badges {
    display: flex;
    flex-wrap: wrap;
/*    gap: 13.8rem;*/
    margin-top: 1.6rem;
}

.dahr-ck .dahr-ck__badges:empty,
.dahr-ckc .dahr-ck__badges:empty {
    display: none;
    margin: 0;
}

.dahr-ck .dahr-ck__quantities,
.dahr-ckc .dahr-ck__quantities {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    justify-content: flex-end;
}

/* Fare table -------------------------------------------------------------- */

.dahr-ck .hw-passenger--fareSummary__table {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ck .hw-passenger--fareSummary__table > .d-flex {
    padding: .6rem 0;
    column-gap: 1.2rem;
}

.dahr-ck .hw-passenger--fareSummary__table > .d-flex:last-of-type {
    margin-top: .8rem;
    padding-top: 1.6rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ck__sideCta {
    margin-top: 2rem;
}

.dahr-ck .dahr-ck__sideCta .hw__btn,
.dahr-ck .dahr-ck__sideCta .dahr-ck__btn {
    width: 100%;
    min-height: 5.4rem;
    border-radius: .8rem;
    font-size: 1.7rem;
    font-weight: 700;
}

.dahr-ck__sideLink {
    display: block;
    width: 100%;
    margin-top: 1.2rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ck-ink);
    cursor: pointer;
    text-align: center;
}

.dahr-ck__sideLink:hover {
    color: var(--ck-brand);
}

/* The AED reference line under the total. */
.dahr-ck .dahr-original-aed-sic,
.dahr-ck .dahr-original-aed {
    font-size: 1.3rem;
    color: var(--ck-ink-soft);
}

.dahr-ck .dahr-original-aed-sic:empty,
.dahr-ck .dahr-original-aed:empty {
    display: none;
}

/* Step visibility of the sidebar CTAs ------------------------------------- */

.dahr-ck[data-ck-step="1"] .dahr-ck__ctaStep2 {
    display: none;
}

.dahr-ck[data-ck-step="2"] .dahr-ck__ctaStep1 {
    display: none;
}

/* Low balance / gateway error notice -------------------------------------- */

.dahr-ck .error_notice_wrapper {
    margin-bottom: 1.6rem;
}

.dahr-ck .error_notice_alert:empty {
    display: none;
}

.dahr-ck .error_notice_alert {
    background: #FEF2F2;
    border: .1rem solid #FECACA;
    border-radius: .8rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    color: #B42318;
}

/* ==========================================================================
   8. Booking confirmed pages
   ========================================================================== */

/* The confirmed pages are not inside a width-constrained container, so the
   band is simply full width with a .hw-page--width child.
   These pages carry their own inline <style> for .hw-expire--session__*,
   .hw-bookId and .hw-cicle-tickBox, so every override below is written with
   the .dahr-ckc ancestor to win on specificity rather than on order. */
.dahr-ckc .dahr-ckc__hero {
    position: relative;
    background: linear-gradient(120deg, #283D6B 0%, #22335E 52%, #3264FF 165%);
    color: #fff;
    padding: 18px 0 54px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    min-height: 0;
}

.dahr-ckc .hw-cicle-tickBox {
    background-color: rgba(255, 255, 255, .18);
}

.dahr-ckc__heroRow {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
}

.dahr-ckc__heroTtl {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: .8rem 0 0;
}

.dahr-ckc__tick {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dahr-ckc .dahr-ckc__heroTtl h4,
.dahr-ckc .dahr-ckc__heroTtl .dahr-ckc__h {
    margin: 0;
    color: #fff;
    font-size: 3.2rem;
    line-height: 1.25;
    font-weight: 700;
}

.dahr-ckc .dahr-ckc__desc {
    margin-top: .8rem;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .78);
}

.dahr-ckc .hw-bookId {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    background: none;
    padding: 0;
}

.dahr-ckc .dahr-ckc__breakupTtl,
.dahr-ckf .dahr-ckc__breakupTtl {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
    margin-bottom: 0;
}

.dahr-ckc .dahr-ckc__breakupTtl + .hw-passenger--fareSummary__table,
.dahr-ckc .dahr-ckc__breakupTtl + .price-breakup .hw-passenger--fareSummary__table,
.dahr-ckf .dahr-ckc__breakupTtl + .hw-passenger--fareSummary__table {
    margin-top: .8rem;
    padding-top: 0;
    border-top: 0;
}

.dahr-ckc__main.hw-car--transferPaymentSection {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: -6.2rem;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 992px) {
    .dahr-ckc__main.hw-car--transferPaymentSection {
        grid-template-columns: minmax(0, 1fr) 45rem;
        align-items: flex-start;
    }
}

@media screen and (min-width: 1300px) {
    .dahr-ckc__main.hw-car--transferPaymentSection {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

.dahr-ckc .hw-car--transferPassenger__listShow {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    min-width: 0;
}

.dahr-ckc .hw-car--listShow__widget {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2.4rem;
}

@media screen and (min-width: 768px) {
    .dahr-ckc .hw-car--listShow__widget {
        padding: 3.2rem;
    }
}

.dahr-ckc .hw-car--listShow__widget > .hw__text20,
.dahr-ckc .hw-car--listShow__widget > .hw__text18 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ck-ink);
    margin-bottom: 1.6rem;
}

.dahr-ckc .hw-car--transferFareSummary {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2rem;
    min-width: 0;
}

@media screen and (min-width: 992px) {
    .dahr-ckc .hw-car--transferFareSummary {
        position: sticky;
        top: 2rem;
    }
}

.dahr-ckc .hw-passenger--fareSummary__box {
    padding: 0;
}

.dahr-ckc .hw-passenger--fareSummary__table,
.dahr-ckf .hw-passenger--fareSummary__table {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ckc .hw-passenger--fareSummary__table > .d-flex,
.dahr-ckf .hw-passenger--fareSummary__table > .d-flex {
    padding: .6rem 0;
    column-gap: 1.2rem;
}

.dahr-ckc .hw-passenger--fareSummary__table > hr,
.dahr-ckf .hw-passenger--fareSummary__table > hr {
    margin: 1rem 0;
    border-color: var(--ck-line);
    opacity: 1;
}

.dahr-ckc .hw-table--defaultDiv {
    border: 0;
}

.dahr-ckc .hw-table--default thead th {
    background: transparent;
    font-size: 1.2rem;
    letter-spacing: .06em;
/*    text-transform: uppercase;*/
    color: var(--ck-ink-soft);
    font-weight: 600;
    border-bottom: .1rem solid var(--ck-line);
}

.dahr-ckc .hw-table--default td {
    font-size: 1.5rem;
    color: var(--ck-ink);
    border-bottom: .1rem solid var(--ck-line);
}

.dahr-ckc .hw-table--default tbody tr:last-child td {
    border-bottom: 0;
}

.dahr-ckc .hw__td-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    color: var(--ck-brand);
}

.dahr-ckc .hw__td-link a:hover {
    background: var(--ck-brand-soft);
}

/* Sidebar product card on the confirmed pages reuses the review styles. */
.dahr-ckc .dahr-ck__prod,
.dahr-ckc .dahr-ck__meta,
.dahr-ckc .dahr-ck__metaRow,
.dahr-ckc .dahr-ck__badges {
    min-width: 0;
}

.dahr-ckc .dahr-ck__metaVal b {
    display: none;
}

.dahr-ckc .hw-after--bookingWidget.tickets {
    display: none;
}

.dahr-ckc .hw-after--bookingWidget.tickets + hr {
    display: none;
}

.dahr-ckc .hw-after--bookingWidget.ticketsInner .hw__btn {
    width: 100%;
/*    min-height: 5.4rem;*/
    border-radius: .8rem;
    font-size: 1.7rem;
    font-weight: 700;
}

/* ==========================================================================
   9. Small screens
   ========================================================================== */

@media screen and (max-width: 767px) {

    .dahr-ck__hero,
    .dahr-ckc__hero {
        padding-top: 1.6rem;
        padding-bottom: 7rem;
    }

    .dahr-ck__title,
    .dahr-ckc__heroTtl h4,
    .dahr-ckc__heroTtl .dahr-ckc__h {
        font-size: 2.4rem;
    }

    .dahr-ck__steps {
        width: 100%;
    }

    .dahr-ck__stepBar {
        width: 2rem;
    }

    .dahr-ck__step {
        font-size: 1.4rem;
    }

    .dahr-ck__card {
        padding: 2rem 1.6rem;
    }

    .dahr-ck .hw-car--transferFareSummary,
    .dahr-ckc .hw-car--transferFareSummary,
    .dahr-ckc .hw-car--listShow__widget {
        padding: 2rem 1.6rem;
    }

    .dahr-ck__actions .dahr-ck__btn {
        width: 100%;
    }
}

/* ==========================================================================
   10. Insurance checkout (?tab=insurance)
   --------------------------------------------------------------------------
   Same .dahr-ck design system as the car transfer flow. The insurance template
   carries its own inline <style> blocks in the body, so every override of one
   of its classes is written with the .dahr-ck ancestor to win on specificity
   instead of on source order.

   Panes: #insurance-tab (1 Plan) and #insurance-checkout (2 Details) keep
   their inline display and stay owned by the page's existing handlers;
   #insurance-payment (3 Payment) is owned by the step switcher.
   ========================================================================== */

/* .hw__page-inner adds a 2.4rem top padding that would show as a strip above
   the full-bleed band. */
.dahr-ck-host.hw__page-inner {
    padding-top: 0;
}

.dahr-ck__content {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    min-width: 0;
}

.dahr-ck__main--full,
.dahr-ck .dahr-ck__main--full {
    grid-template-columns: minmax(0, 1fr);
}

/* Back controls -----------------------------------------------------------
   The four original anchors keep their classes (and the inline show/hide the
   page's JS does to them); only their looks change. Which one is offered is
   still the page's decision, except on the payment step, where the switcher's
   own Back is the only sensible one. */

.dahr-ck__backWrap {
    display: block;
}

.dahr-ck .dahr-ck__back {
    cursor: pointer;
    font-size: 13.3333px;
}

.dahr-ck .back_to_insurance_tab,
.dahr-ck .dahr-ck__backStep3 {
    display: none;
}

.dahr-ck[data-ck-step="2"] .back_to_insurance_tab,
.dahr-ck[data-ck-step="3"] .dahr-ck__backStep3 {
    display: inline-flex;
}

/* The three plan-step anchors used to sit inside #insurance-tab, so they were
   implicitly hidden with it. They live in the hero now, so the same scoping is
   restored here - the page's own JS still decides which of them is current. */
.dahr-ck[data-ck-step="2"] .back_to_first_step,
.dahr-ck[data-ck-step="2"] .back_to_product,
.dahr-ck[data-ck-step="2"] .back_to_product_from_checkout,
.dahr-ck[data-ck-step="3"] .back_to_first_step,
.dahr-ck[data-ck-step="3"] .back_to_product,
.dahr-ck[data-ck-step="3"] .back_to_product_from_checkout,
.dahr-ck[data-ck-step="3"] .back_to_insurance_tab {
    display: none !important;
}

/* Cards -------------------------------------------------------------------- */

.dahr-ck .hw__grid.hw__bsnull,
.dahr-ck .hw__grid.hw__bnull {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.dahr-ck .selected_date_wrapper {
    display: block;
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ck-ink);
}

.dahr-ck .selected_date_wrapper:empty {
    display: none;
    margin: 0;
}

.dahr-ck #insurance-checkout .hw__textdark.hw__text20,
.dahr-ck #insurance-checkout .hw__text-black.hw__text20 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
    margin-bottom: 1.2rem;
}

/* Error spans: the page toggles their display inline, so only looks here. */
.dahr-ck span.error {
    margin-top: .5rem;
    font-size: 1.3rem;
}

/* Passenger accordion ------------------------------------------------------ */

.dahr-ck #passengerFieldsContainer .accordion-item {
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    overflow: hidden;
    background: #fff;
}

.dahr-ck #passengerFieldsContainer > div + div {
    margin-top: 1.6rem;
}

.dahr-ck #passengerFieldsContainer .accordion-button {
    background: #fff;
    color: var(--ck-ink);
    font-size: 1.6rem;
    font-weight: 700;
    padding: 1.6rem 2rem;
    box-shadow: none;
    gap: 1rem;
}

.dahr-ck #passengerFieldsContainer .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid var(--ck-line);
}

.dahr-ck #passengerFieldsContainer .accordion-collapse > .row {
    padding: 2rem;
    --bs-gutter-y: 1.6rem;
}

/* Summary sidebar ----------------------------------------------------------
   It stays a <table>: the page writes into td.issue-date, td.end-date,
   td.adult_count, td.child_count, td.infant_count, td.departure and
   td.arrival, and td.issue-date also drives the passport-expiry rule. Only
   the presentation is changed. */

.dahr-ck .hw-book--sidebar {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    min-width: 0;
}

@media screen and (min-width: 992px) {
    .dahr-ck .hw-book--sidebar {
        position: sticky;
        top: 2rem;
        z-index: 2;
    }
}

.dahr-ck .hw-book--sidebarTop {
    padding: 2rem 2rem 1.2rem;
    border-bottom: .1rem solid var(--ck-line);
}

/* React: .hw-exchk--summaryHead { font-size: 16px } */
.dahr-ck .hw-book--sidebarTop .hw__h7 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ck-ink);
}

.dahr-ck .hw-book--sidebarMiddle {
    padding: 2rem;
}

.dahr-ck .hw-book--sidebarMiddle .hw__table table {
    width: 100%;
}

.dahr-ck .hw-book--sidebarMiddle td {
    padding: .6rem 0;
    font-size: 1.5rem;
    line-height: 1.4;
    border: 0;
    vertical-align: top;
}

.dahr-ck .hw-book--sidebarMiddle td:first-child {
    color: #6b7280;
    font-weight: 500;
}

.dahr-ck .hw-book--sidebarMiddle td:last-child {
    color: #1b2439 !important;
    font-weight: 600;
    word-break: break-word;
}

.dahr-ck .hw-book--sidebarMiddle td[colspan="2"] {
    padding: 0;
}

.dahr-ck .hw-book--sidebarMiddle hr {
    margin: 1.2rem 0;
    border-color: var(--ck-line);
    opacity: 1;
}

.dahr-ck .selected-plan-count .hw__text18,
.dahr-ck .selected-plan-type-div .hw__text-bold {
    font-size: 1.5rem;
}

.dahr-ck .selected-plan-type-div .bi-trash {
    cursor: pointer;
    color: var(--ck-ink-soft);
}

.dahr-ck .selected-plan-type-div .bi-trash:hover {
    color: #E5484D;
}

.dahr-ck .hw-book--sidebarMiddle .hw__text-brand {
    color: var(--ck-brand);
}

/* Sidebar call-to-action ---------------------------------------------------
   Scoped to the insurance sidebar on purpose: .dahr-ck__sideCta and
   .dahr-ck__ctaStep2 are shared with the car transfer review forms, where the
   step-2 element is a wrapper div that must stay a block. */

.dahr-ck .hw-book--sidebar .dahr-ck__sideCta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ck .hw-book--sidebar .dahr-ck__sideCta .hw__btn,
.dahr-ck .hw-book--sidebar .dahr-ck__sideCta .dahr-ck__btn {
    width: 100%;
    min-height: 5.4rem;
    border-radius: .8rem;
    font-size: 1.7rem;
    font-weight: 700;
}

/* The purchase button is shown by the page's own handler as soon as the
   Details step opens; it belongs on the Payment step now. */
.dahr-ck[data-ck-step="1"] .insurance-checkout,
.dahr-ck[data-ck-step="2"] .insurance-checkout {
    display: none !important;
}

.dahr-ck .hw-book--sidebar .dahr-ck__ctaStep2 {
    display: none;
}

.dahr-ck[data-ck-step="2"] .hw-book--sidebar .dahr-ck__ctaStep2 {
    display: flex;
    /* Same 1.6rem the page's own .continue button carries, so the gap down to
       Email Quotation reads identically on every step. */
    margin-bottom: 1.6rem;
}

.dahr-ck[data-ck-step="3"] .continue {
    display: none !important;
}


/* Plan cards --------------------------------------------------------------- */

.dahr-ck .plan-details.highlighted,
.dahr-ck .plan-category.highlighted {
    border-color: var(--ck-brand);
}

.dahr-ck .more-details {
    color: var(--ck-brand);
    font-weight: 600;
}

/* Selected travel date in the Traveller Summary header: moved here 8-Oct-26,
   then taken OUT again on 9-Oct-26 ("Traveller Summary mathi date remove kri
   de"). HIDDEN, not deleted, and that is deliberate: the page still runs
   `$('span.selected_date_wrapper_outer_box').text(formattedDate[0])`
   (insurance template ~2621). Nothing READS the element - it is the only
   remaining copy and there is no reader - so a delete would also have been
   safe, but hiding keeps that write pointed at a real node and makes putting
   the chip back a one-line change.
   FOUR classes on purpose: the template's own inline <style> carries
   `.selected_date_wrapper.selected-date--wrapperRD` and comes AFTER this file
   in document order, so a shorter selector here would lose.
   The chip's own look is kept below, commented out, for exactly that. */
.dahr-ck .hw-book--sidebarTop .selected_date_wrapper.selected-date--wrapperRD {
    display: none;
}

/* .dahr-ck .hw-book--sidebarTop .selected_date_wrapper.selected-date--wrapperRD {
    display: inline-flex;
    align-items: center;
    margin: 1.2rem 0 0;
    padding: .8rem 1.2rem;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 600;
    background: var(--ck-brand-soft);
    border-radius: .6rem;
} */

/* The page leaves it empty until a date is picked — :empty still matches when
   the only "content" is the class's ::before calendar icon, so nothing shows
   until there is a real date to show. */
.dahr-ck .hw-book--sidebarTop .selected_date_wrapper:empty {
    display: none;
}

/* ==========================================================================
   11. Insurance confirmation screen
   ========================================================================== */

.dahr-ck .dahr-ck__hero--confirmed .dahr-ckc__heroTtl {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: .8rem 0 0;
}

.dahr-ck .dahr-ck__hero--confirmed .dahr-ck__title {
    margin: 0;
}

.dahr-ck .dahr-ck__hero--confirmed .dahr-ckc__tick {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dahr-ck .dahr-ck__hero--confirmed .dahr-ckc__desc {
    margin-top: .8rem;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .78);
}

.dahr-ck .confirmation-container {
    background: #fff;
    text-align: left;
    padding: 2.4rem;
}

@media screen and (min-width: 768px) {
    .dahr-ck .confirmation-container {
        padding: 3.2rem;
    }
}

.dahr-ck .confirmation-content {
    display: block;
    text-align: left;
}

.dahr-ck .confirmation-content .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 2.4rem;
    justify-content: flex-start;
}

.dahr-ck .confirmation-content .download-btn {
    border: 0;
}

.dahr-ck .another-insurance-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.6rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ck-ink-soft);
    text-decoration: none;
}

.dahr-ck .another-insurance-link:hover {
    color: var(--ck-brand);
}

.dahr-ck .passenger-table {
    width: 100%;
    border-collapse: collapse;
}

.dahr-ck .passenger-table thead th {
    background: transparent;
    border: 0;
    border-bottom: .1rem solid var(--ck-line);
    padding: 0 0 1.2rem;
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ck-ink-soft);
    font-weight: 600;
    text-align: left;
}

.dahr-ck .passenger-table tbody td {
    border: 0;
    border-bottom: .1rem solid var(--ck-line);
    padding: 1.4rem 0;
    font-size: 1.5rem;
    color: var(--ck-ink);
    text-align: left;
}

.dahr-ck .passenger-table tbody tr:last-child td {
    border-bottom: 0;
}

.dahr-ck .generate-pdf-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    color: var(--ck-brand);
}

.dahr-ck .generate-pdf-link:hover {
    background: var(--ck-brand-soft);
}

@media screen and (max-width: 767px) {

    .dahr-ck .hw-book--sidebarTop,
    .dahr-ck .hw-book--sidebarMiddle {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .dahr-ck .confirmation-container {
        padding: 2rem 1.6rem;
    }
}

/* ==========================================================================
   12. A2A flight checkout (?tab=flight, ?tab=emergency-flight)
   --------------------------------------------------------------------------
   Same .dahr-ck design system. The hero is its own element
   (.dahr-ck--flightHero) because the four screens live in separate top-level
   containers; the step switcher writes data-ck-step onto every .dahr-ck
   element so these rules can key off it.

   Most of this module's CSS lives in the GLOBAL assets/css/style.css and is
   shared with car transfer and bus (.hw__bf-list*, .hw-two--colFilterWrap*),
   so nothing below edits those rules - everything is an override scoped to
   .dahr-ck / #booking_list_main / #passenger_details.
   ========================================================================== */

.dahr-ck--flightHero.is-hidden {
    display: none;
}

.dahr-ck--flightHero .dahr-ck__hero {
    min-height: 147px;
    margin-bottom: 0;
}
a.dahr-ck__back.back_to_calender {
    font-size: 14px;
}

/*.js-toggleFilter, .hw-two--colFilterBarAction .hw-link {
    padding: 0 !important;
}*/

/* The calendar screen keeps the page's own look; from step 1 on, the panes
   sit under the band. */
.dahr-ck--flightHero + #booking_list_main,
#single_booking_wrapper.dahr-ck,
#passenger_details.dahr-ck {
    position: relative;
    z-index: 2;
    margin-top: -5.2rem;
}

.dahr-ck--flightHero.is-hidden + #booking_list_main {
    margin-top: 0;
}

/* Back controls: all four live in the hero, one per step. These class names
   are shared with the car transfer and insurance flows, so every rule is
   scoped to the flight hero. */
.dahr-ck--flightHero .dahr-ck__back {
    display: none;
    cursor: pointer;
}

/* Three steps since 14-Oct-26 (CLAUDE.md 7.52). `.back_to_listing` has no
   step any more - it was the passenger-count screen's Back - so it keeps the
   `display: none` above and is never shown. It stays in the markup because the
   error path at ~2838 still TRIGGERS it, which works on a hidden element. */
.dahr-ck--flightHero[data-ck-step="1"] .back_to_calender,
.dahr-ck--flightHero[data-ck-step="2"] .back_to_single_booking,
.dahr-ck--flightHero[data-ck-step="3"] .dahr-ck__backPay {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Step 1 - Choose A Flight
   -------------------------------------------------------------------------- */

#booking_list_main.dahr-ck .hw-two--colFilterWrapBar {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
}

span.dahr-ck__step.is-done {
    color: #fff;
}
.a2aFilterWrap-sec {
    margin-top: -34px;
    position: relative;
}
/*.a2aFilterWrap-sec .hw-two--colFilterWrapBar {
    margin-top: 25px !important;
}*/
.a2aFilterWrap-sec .hw-two--colFilterWrapContent {
padding-top: 0 !important;
}
.a2aFullHeight {
height: 100% !important;
}

.carCTAftr {
    margin: 0;
}

.a2aFullHeight .dahr-ck__card {
    display: flex;
    flex-direction: column;
}
.dahr-ck__cardFoot.a2actaStep3{
        margin-top: auto;
}
.a2a-sideCtaSec {
    margin: 0 !important;
}
.a2aFilterWrapMain {
margin-top: 0 !important;
}
.dahr-ck__side_column {
    max-height: 100% !important;
}
#booking_list_main.dahr-ck .hw-two--colFilterBarTop {
    border-bottom: .1rem solid var(--ck-line);
}

#booking_list_main.dahr-ck .hw-two--colFilterBarAction {
    padding: 1.8rem 2rem;
}

#booking_list_main.dahr-ck .hw-two--colFilterBarBody {
    padding: 2rem;
    row-gap: 2.4rem;
}

#booking_list_main.dahr-ck .hw-two__colWidget + .hw-two__colWidget {
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

#booking_list_main.dahr-ck .hw-two__colWidget > .hw__text-bold {
    font-size: 1.7rem;
    color: var(--ck-ink);
    margin-bottom: 1.2rem;
}

#booking_list_main.dahr-ck .reset-filter-btn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ck-brand);
    text-decoration: underline;
}

#booking_list_main.dahr-ck .hw-calender--topBar {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 1.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flight cards. The <li class="hw__bf-list"> element and the hidden inputs
   inside it drive the filters and .select_booking, so only looks change. */
#booking_list_main.dahr-ck .hw__bf-list--wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#booking_list_main.dahr-ck .hw__bf-list {
    background: #fff;
    border: .1rem solid transparent;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#booking_list_main.dahr-ck .hw__bf-list:hover {
    border-color: #C3D0E8;
}

#booking_list_main.dahr-ck .hw__bf-list--item {
    padding: 2rem;
}

@media screen and (min-width: 768px) {
    #booking_list_main.dahr-ck .hw__bf-list--item {
        padding: 2.4rem;
    }
}

#booking_list_main.dahr-ck .hw__bf-list--price .hw__btn {
    min-height: 4.6rem;
    border-radius: .8rem;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
}

#booking_list_main.dahr-ck .hw__bf-list.no-data-message {
    padding: 3.2rem 2.4rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Step 2 - Choose Number Of Passengers
   -------------------------------------------------------------------------- */

#single_booking_wrapper.dahr-ck .hw-calender--topBar {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 1.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#single_booking_wrapper.dahr-ck .hw__grid.hw__bsnull.hw__bnull:not(.hw-calender--topBar) {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2.4rem;
}

@media screen and (min-width: 768px) {
    #single_booking_wrapper.dahr-ck .hw__grid.hw__bsnull.hw__bnull:not(.hw-calender--topBar) {
        padding: 3.2rem;
    }
}

#single_booking_wrapper.dahr-ck .flight_single_book_now {
    min-height: 5.4rem;
    border-radius: .8rem;
    font-size: 1.7rem;
    font-weight: 700;
}

/* The +/- pickers keep their own compact sizing. */
.dahr-ck .hw__quantity-picker .form-control {
    min-height: 4.4rem;
    border-radius: 0;
    text-align: center;
}

.dahr-ck .hw__quantity-picker .btn-number {
    min-height: 4.4rem;
}

/* --------------------------------------------------------------------------
   Steps 3 and 4 - Passenger Details / Payment
   -------------------------------------------------------------------------- */

#passenger_details.dahr-ck .hw-screen--paymentRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

@media screen and (min-width: 992px) {
    #passenger_details.dahr-ck .hw-screen--paymentRow {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

@media screen and (min-width: 1300px) {
    #passenger_details.dahr-ck .hw-screen--paymentRow {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

#passenger_details.dahr-ck .hw-screen--paymentCol {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    min-width: 0;
    width: auto;
    max-width: none;
}

#passenger_details.dahr-ck .hw-screen--paymentColSummary {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    min-width: 0;
    width: auto;
    max-width: none;
}

@media screen and (min-width: 992px) {
    #passenger_details.dahr-ck .hw-screen--paymentColSummary {
        position: sticky;
        top: 2rem;
        z-index: 2;
    }
}

#passenger_details.dahr-ck .hw-screen--SummaryHead {
    padding: 2rem 2rem 1.2rem;
    border-bottom: .1rem solid var(--ck-line);
}

#passenger_details.dahr-ck .hw-screen--SummaryHead .hw__h7 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ck-ink);
}

#passenger_details.dahr-ck .hw__book-box {
    padding: 2rem;
}

#passenger_details.dahr-ck .hw__book-box hr {
    margin: 1.6rem 0;
    border-color: var(--ck-line);
    opacity: 1;
}

#passenger_details.dahr-ck .hw-flight-booking--dateLeft,
#passenger_details.dahr-ck .hw__grid.hw__bsnull.hw__bnull {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#passenger_details.dahr-ck .hw__text-black.hw__text20 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
    margin-bottom: 1.2rem;
}

#passenger_details.dahr-ck .accordion-item {
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    overflow: hidden;
    background: #fff;
}

#passenger_details.dahr-ck .accordion-item + .accordion-item,
#passenger_details.dahr-ck .adult_wrapper + .child_wrapper,
#passenger_details.dahr-ck .child_wrapper + .infant_wrapper {
    margin-top: 1.6rem;
}

#passenger_details.dahr-ck .accordion-button {
    background: #fff;
    color: var(--ck-ink);
    font-size: 1.6rem;
    font-weight: 700;
    padding: 1.6rem 2rem;
    box-shadow: none;
    gap: 1rem;
}

#passenger_details.dahr-ck .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid var(--ck-line);
}

#passenger_details.dahr-ck .accordion-collapse > .row {
    padding: 2rem;
    --bs-gutter-y: 1.6rem;
}

#passenger_details.dahr-ck .error-message {
    margin-top: .5rem;
    font-size: 1.3rem;
    color: #E5484D;
}

/* Sidebar call-to-action. .dahr-ck__sideCta is shared with the other flows,
   so these rules are scoped to this page. */
#passenger_details.dahr-ck .dahr-ck__sideCta {
   /* margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);*/
}

#passenger_details.dahr-ck .dahr-ck__sideCta .hw__btn,
#passenger_details.dahr-ck .dahr-ck__sideCta .dahr-ck__btn {
    width: 100%;
    min-height: 5.4rem;
    border-radius: .8rem;
    font-size: 1.7rem;
    font-weight: 700;
}

#passenger_details.dahr-ck .dahr-ck__ctaStep3 {
    display: none;
    margin-bottom: 2rem;
}

#passenger_details.dahr-ck[data-ck-step="2"] .dahr-ck__ctaStep3 {
    display: flex;
}

/* Hold / Book Now belong on the Payment step. */
#passenger_details.dahr-ck[data-ck-step="2"] .final_book_now {
    display: none !important;
}

/* --------------------------------------------------------------------------
   A2A booking confirmed
   -------------------------------------------------------------------------- */

.dahr-ckf .dahr-ck__hero--confirmed .dahr-ckc__heroTtl {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: .8rem 0 0;
}

.dahr-ckf .dahr-ck__hero--confirmed .dahr-ck__title {
    margin: 0;
}

@media screen and (min-width: 990px) {
    .dahr-ckc__tick {
        width: 40px !important;
        height: 40px !important;
    }
}

.dahr-ckf .dahr-ck__hero--confirmed .dahr-ckc__tick {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dahr-ckf .dahr-ck__hero--confirmed .dahr-ckc__desc {
    margin-top: .8rem;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .78);
}

.dahr-ckf .dahr-ck__main--full {
    grid-template-columns: minmax(0, 1fr);
}

.dahr-ckf .dahr-ck__card {
    text-align: left;
}

.dahr-ckf .hw-flight--listShow {
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    padding: 2rem;
}

.dahr-ckf .dahr-ck__actions {
    justify-content: flex-start;
}

.dahr-ckf .dahr-ck__actions .hw__btn {
    min-height: 5rem;
    border-radius: .8rem;
    font-size: 1.6rem;
    font-weight: 700;
}

.dahr-ckf .hw-table--reDesign thead th {
    background: transparent;
    border: 0;
    border-bottom: .1rem solid var(--ck-line);
    padding: 0 1.2rem 1.2rem 0;
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ck-ink-soft);
    font-weight: 600;
    text-align: left;
}

.dahr-ckf .hw-table--reDesign tbody td {
    border: 0;
    border-bottom: .1rem solid var(--ck-line);
    padding: 1.4rem 1.2rem 1.4rem 0;
    font-size: 1.5rem;
    color: var(--ck-ink);
    text-align: left;
}

.dahr-ckf .hw-table--reDesign tbody tr:last-child td {
    border-bottom: 0;
}

.dahr-ckf .hw__td-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    color: var(--ck-brand);
}

.dahr-ckf .hw__td-link a:hover {
    background: var(--ck-brand-soft);
}

@media screen and (max-width: 767px) {

    .dahr-ck--flightHero + #booking_list_main,
    #single_booking_wrapper.dahr-ck,
    #passenger_details.dahr-ck {
        margin-top: -5rem;
    }

    #passenger_details.dahr-ck .hw__book-box,
    #passenger_details.dahr-ck .hw-screen--SummaryHead {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

/* The hero carries the screen name, so the panes' own title bars would just
   repeat it - and they sit on the band, where dark text is unreadable. */
.dahr-ck--flightHero .dahr-ck__title [data-ck-title] {
    display: none;
}

.dahr-ck--flightHero[data-ck-step="1"] .dahr-ck__title [data-ck-title="1"],
.dahr-ck--flightHero[data-ck-step="2"] .dahr-ck__title [data-ck-title="2"],
.dahr-ck--flightHero[data-ck-step="3"] .dahr-ck__title [data-ck-title="3"] {
    display: inline;
}

#booking_list_main.dahr-ck .hw__page-titlebar,
#single_booking_wrapper.dahr-ck .hw__page-titlebar,
#passenger_details.dahr-ck .hw__page-titlebar {
    display: none;
}

/* ==========================================================================
   13. A2A flight — UI fixes (client feedback, 6-Oct-26)
   --------------------------------------------------------------------------
   Filters collapse/scroll, date-bar alignment, passenger-count screen, the
   empty state, and a sticky Hold / Book Now. CSS only - the collapse itself
   is the page's existing `body.sidebar-filter--show` mechanism, the date
   arrows are the page's own handlers, and the empty state is the markup the
   server and the filter JS already emit.
   ========================================================================== */

/* --- 1. Filters: sticky header + a proper inner scroller ------------------
   The bar is `display:grid; grid-template-rows:auto 1fr`. Scrolling the BAR
   made the header slide over the first widget (and section 12 had made that
   header transparent, which is what let the content show through it). The
   header now keeps its white background and the second grid row is the only
   thing that scrolls. */

#booking_list_main.dahr-ck .hw-two--colFilterWrapBar {
    overflow: hidden;
    border-radius: var(--ck-card-radius);
    top: 2rem;
    max-height: calc(100dvh - 6rem);
    margin-top: 0;
}
/*.hw-two--colFilterWrapContent {
    padding-top: 0 !important;
}*/

a.dahr-ck__back.back_to_listing {
    font-size: 14px !important;
}
a.dahr-ck__back.back_to_single_booking {
    font-size: 14px !important;
}
button.dahr-ck__back.dahr-ck__prev.dahr-ck__backPay {
    font-size: 14px !important;
}

#booking_list_main.dahr-ck .hw-two--colFilterBarTop {
    background: #fff;
    border-bottom: .1rem solid var(--ck-line);
    border-radius: var(--ck-card-radius) var(--ck-card-radius) 0 0;
    position: static;
    z-index: auto;
}

#booking_list_main.dahr-ck .hw-two--colFilterBarGroup {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--ck-line) transparent;
}

#booking_list_main.dahr-ck .hw-two--colFilterBarGroup::-webkit-scrollbar {
    width: .6rem;
}

#booking_list_main.dahr-ck .hw-two--colFilterBarGroup::-webkit-scrollbar-thumb {
    background: var(--ck-line);
    border-radius: 1rem;
}

#booking_list_main.dahr-ck .hw-link--icon {
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ck-ink-soft);
    cursor: pointer;
}

#booking_list_main.dahr-ck .hw-link--icon:hover {
    color: var(--ck-brand);
}

#booking_list_main.dahr-ck .js-toggleFilter {
    font-size: 18px;
    gap: 12px;
}
/*.hw-two--colFilterWrap {
    margin-top: 18px;
}*/

/* --- 2. Collapsed state ---------------------------------------------------
   `body.sidebar-filter--show` is set by the page's own toggle; only its looks
   change here. The global rule narrows the bar to 7.4rem, so the matching
   content width is restated for the new one. */

body.sidebar-filter--show #booking_list_main.dahr-ck .hw-two--colFilterWrapBar {
    width: 9.2rem;
    min-width: 9.2rem;
    max-height: none;
    box-shadow: var(--ck-shadow);
}

body.sidebar-filter--show #booking_list_main.dahr-ck .hw-two--colFilterBarTop {
    border-bottom: 0;
    border-radius: var(--ck-card-radius);
}

body.sidebar-filter--show #booking_list_main.dahr-ck .hw-two--colFilterBarAction {
    padding: 1rem;
    justify-content: center;
}

body.sidebar-filter--show #booking_list_main.dahr-ck .js-toggleFilter {
    background: var(--ck-brand);
    color: #fff;
    flex-direction: column;
    row-gap: .4rem;
    width: 100%;
    padding: 1.2rem .6rem;
    border-radius: .8rem;
    font-size: 1.3rem;
    font-weight: 600;
    justify-content: center;
    text-align: center;
}

body.sidebar-filter--show #booking_list_main.dahr-ck .hw-two--colFilterWrapContent {
    width: calc(100% - 9.2rem);
}

/* --- 3. Date selector ----------------------------------------------------- */

#booking_list_main.dahr-ck .hw-calender--topBar {
    padding: 1rem 2rem;
    min-height: 6.4rem;
    gap: 1.6rem;
}

/* The page positions this group and both arrows ABSOLUTELY, with the arrow
   offsets (left: -70px / 164px) hardcoded around a 13rem date string - so the
   bar's `justify-content: center` never applied to it and the group drifted
   off-centre as soon as the date rendered at a different width. Here, and only
   inside #booking_list_main, the three are put back in normal flow so the flex
   bar centres them for real, horizontally and vertically. The identical
   classes on the other screens (and in the insurance flow) are untouched. */
#booking_list_main.dahr-ck .selected_date_wrapper_outer_box {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
    line-height: 1;
}

#booking_list_main.dahr-ck .selected_date_wrapper_outer_box::before {
    display: none;
}

#booking_list_main.dahr-ck .prev_date_flight,
#booking_list_main.dahr-ck .next_date_flight {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    width: 3.6rem;
    height: 3.6rem;
    flex-shrink: 0;
    border-radius: .8rem;
    background: var(--ck-brand-soft);
    color: var(--ck-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.6rem;
    transition: background-color .15s ease;
}

#booking_list_main.dahr-ck .prev_date_flight:hover,
#booking_list_main.dahr-ck .next_date_flight:hover {
    background: #E0E9FF;
}

#booking_list_main.dahr-ck .selected_date_wrapper {
    min-width: 13rem;
    text-align: center;
    margin-bottom: 0px;
}

/* --- 4. Empty state -------------------------------------------------------
   Two shapes already exist: the server sends a bare <div> into the <ul>, and
   the filter JS appends <li class="hw__bf-list no-data-message">. Both get
   the same card here; no markup is changed. */

#booking_list_main.dahr-ck .booking_list_wrapper > div,
#booking_list_main.dahr-ck .hw__bf-list.no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: #fff;
    border: .1rem dashed #C9D4E8;
    border-radius: var(--ck-card-radius);
    box-shadow: none;
    padding: 4.8rem 2.4rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--ck-ink-soft);
}

#booking_list_main.dahr-ck .booking_list_wrapper > div::before,
#booking_list_main.dahr-ck .hw__bf-list.no-data-message::before {
    content: "";
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background-color: var(--ck-brand-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%233264FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10h4a2 2 0 0 1 0 4h-4l-4 7H9l2-7H6l-2 3H2l1-5-1-5h2l2 3h5L9 3h3l4 7Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

#booking_list_main.dahr-ck .hw__bf-list.no-data-message .hw__h6 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ck-ink);
    margin: 0;
}

#booking_list_main.dahr-ck .hw__bf-list.no-data-message:hover {
    border-color: #C9D4E8;
}

/* --- 5. Choose Number Of Passengers --------------------------------------- */

#single_booking_wrapper.dahr-ck .hw-flight--listShow {
    border: .1rem solid var(--ck-line);
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
}

#single_booking_wrapper.dahr-ck .col-md-5 > .row {
    background: #F7F9FD;
    border: .1rem solid var(--ck-line);
    border-radius: 1rem;
    padding: 2rem;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 1.2rem;
}

#single_booking_wrapper.dahr-ck .col-md-5 label.hw__text-bold {
    display: block;
    margin-bottom: .6rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ck-ink-soft);
}

/* Extended to the merged counters (client, 14-Oct-26, section 48) rather
   than copied there, so the two can never drift apart. The step-2 half of
   each selector is kept: that screen is skipped now, but a pull that
   restores it gets its chrome back with it. */
#single_booking_wrapper.dahr-ck .hw__quantity-picker,
#passenger_details.dahr-ck .dahr-a2a-pax .hw__quantity-picker {
    background: #fff;
    border: .1rem solid var(--ck-line);
    border-radius: .8rem;
    overflow: hidden;
}

#single_booking_wrapper.dahr-ck .hw__quantity-picker .btn-number,
#passenger_details.dahr-ck .dahr-a2a-pax .hw__quantity-picker .btn-number {
    border: 0;
    background: transparent;
    color: var(--ck-ink);
    width: 3.6rem;
}

#single_booking_wrapper.dahr-ck .hw__quantity-picker .btn-number:disabled,
#passenger_details.dahr-ck .dahr-a2a-pax .hw__quantity-picker .btn-number:disabled {
    opacity: .35;
}

#single_booking_wrapper.dahr-ck .hw__quantity-picker .form-control,
#passenger_details.dahr-ck .dahr-a2a-pax .hw__quantity-picker .form-control {
    border: 0;
    background: transparent;
    font-weight: 700;
    color: var(--ck-ink);
    padding-left: 0;
    padding-right: 0;
}

#single_booking_wrapper.dahr-ck .line__divider {
    list-style: none;
}

#single_booking_wrapper.dahr-ck ul.list-unstyled {
    gap: .6rem 1.6rem;
    margin-bottom: 0;
    padding: 1.2rem 0 0;
    border-top: .1rem solid var(--ck-line);
    font-size: 1.5rem;
}

#single_booking_wrapper.dahr-ck .single_flight_error:empty {
    display: none;
}

#single_booking_wrapper.dahr-ck .hw__text18 {
    font-size: 1.6rem;
}

/* --- 6. Hold / Book Now always reachable ----------------------------------
   The Traveler Summary is taller than the viewport, so the two action
   buttons used to sit below the fold. The summary becomes a column with its
   own scroller and the CTA block sticks to its bottom edge. Desktop only -
   on mobile the sidebar stacks under the form and scrolls with the page. */

@media screen and (min-width: 992px) {
    #passenger_details.dahr-ck .hw-screen--paymentColSummary {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 4rem);
    }

    #passenger_details.dahr-ck .hw-screen--SummaryHead {
        flex: 0 0 auto;
    }

/*    #passenger_details.dahr-ck .hw__book-box {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--ck-line) transparent;
    }*/

    #passenger_details.dahr-ck .hw__book-box::-webkit-scrollbar {
        width: .6rem;
    }

    #passenger_details.dahr-ck .hw__book-box::-webkit-scrollbar-thumb {
        background: var(--ck-line);
        border-radius: 1rem;
    }

    #passenger_details.dahr-ck .dahr-ck__sideCta {
        /*position: sticky;
        bottom: 0;
        z-index: 3;
        background: #fff;*/
        /* bleed over the book-box padding so nothing scrolls past the edges */
       /* margin-left: -2rem;
        margin-right: -2rem;
        margin-bottom: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;*/
    }
}

/* ==========================================================================
   14. Global Visa checkout (?tab=global-visa-request)
   ========================================================================== */

/* UI ONLY. Scoped to .dahr-ckv (the 3-step request page, which also hosts the
   ?editVisa=true form) and .dahr-ckvc (the thank-you / failure screens).
   The scope class matters: .file-container, .upload-preview, .image-preview,
   .del-image, .documents-wrapper, .steps-wrapper and .visa-steps* are SHARED
   with the Oman Visa request template (both call the same
   get_preview_of_upload_file_html()), so an unscoped rule here would silently
   restyle that module too.

   The template carries its own inline <style> blocks in the body, which come
   AFTER this enqueued file in document order, so every override of one of its
   classes is written with at least two class selectors to win on specificity
   instead of on source order.

   The hero, step indicator, card, button and terms classes are the unscoped
   .dahr-ck__* ones from sections 1-7, reused as-is so this page is visually
   identical to the car / insurance / flight checkouts. Only the
   Global-Visa-specific chrome lives below.

   There is NO step-state JS: each of the three panes carries its own hero with
   its own hard-coded is-active / is-done classes, and the panes are still shown
   and hidden exclusively by the existing handlers. Nothing here sets `display`
   on a pane. */

/* Shell ------------------------------------------------------------------- */

.dahr-ckv .global_visa_select_fields,
.dahr-ckv .global_visa_upload_fields,
.dahr-ckv .global_visa_payment_fields {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    margin-top: 0;
}

/* .hw__page-inner adds a 2.4rem top padding that would read as a stray strip
   above the full-bleed band. */
.dahr-ckv.hw__page-inner-bg {
    padding-top: 0;
}

.dahr-ckv .dahr-ckv__hero {
    padding-bottom: 9rem;
}

/* Optional photo backdrop. --ckv-hero-img is set inline on .dahr-ckv from PHP
   with content_url(), so it resolves on root AND sub-directory installs. */
.dahr-ckv .dahr-ckv__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ckv-hero-img, none);
    background-size: cover;
    background-position: center 38%;
    opacity: .22;
    pointer-events: none;
}

.dahr-ckv .dahr-ckv__hero > * {
    position: relative;
    z-index: 1;
}

/* The hero step indicator is DISPLAY ONLY (client, 8-Oct-26) — the .is-link /
   .go_to_* / .back_to_* classes were removed from its circles, and section 18
   makes the whole indicator pointer-events:none. Only the layout rule is left
   here; it wraps on narrow screens because this module has the longest labels. */
.dahr-ckv .dahr-ck__steps {
    flex-wrap: wrap;
    row-gap: .8rem;
}

.dahr-ckv__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: -3.2rem;
    position: relative;
    z-index: 2;
    padding-bottom: 3.2rem;
}

@media screen and (min-width: 992px) {
    .dahr-ckv__body--split {
        grid-template-columns: minmax(0, 1fr) 45rem;
        align-items: flex-start;
    }
}

@media screen and (min-width: 1300px) {
    .dahr-ckv__body--split {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

.dahr-ckv__col {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    min-width: 0;
}

/* Step 2's right-hand column: the Details card (client, 8-Oct-26). It is much
   shorter than the documents column, so it sticks while that one scrolls and
   the Back / Next buttons stay in view. */
@media screen and (min-width: 992px) {
    .dahr-ckv__col--side {
        position: sticky;
        top: 2rem;
    }
}

/* The Details fields keep their bootstrap col-lg-6 / col-lg-4 classes — the
   markup is untouched — but in a 36rem sidebar those would render two and
   three to a row. Full width in this column only; below 992px the column is
   full width again and bootstrap's own rules take over unchanged. */
@media screen and (min-width: 992px) {
    .dahr-ckv .dahr-ckv__col--side .documents-info > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

.dahr-ckv .dahr-ck__card {
    min-width: 0;
}

/* Section 2 only styles .dahr-ck__opt inside a .dahr-ck__blockTtl. */
.dahr-ckv .dahr-ck__cardTtl .dahr-ck__opt {
    font-weight: 500;
    color: var(--ck-ink-soft);
}

/* Form controls ----------------------------------------------------------- */

.dahr-ckv__field {
    min-width: 0;
}

.dahr-ckv .dahr-ckv__label {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ck-ink);
}

/* Same React values as .dahr-ck .form-control above. This rule exists at all
   because style.css gives these a 7.6rem min-height from 1200px up. */
.dahr-ckv .global_visa_select_fields .form-control,
.dahr-ckv .global_visa_select_fields .hw__btn-dropdown,
.dahr-ckv .dahr-ckv__pane .form-control,
.dahr-ckv .dahr-ckv__pane .hw__btn-dropdown {
    min-height: 4.4rem;
    padding: 1rem 1.2rem;
    border-radius: .5rem;
    border: .1rem solid #D7D7D7;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #151515;
    background-color: #fff;
}

@media screen and (min-width: 992px) {
    .dahr-ckv .global_visa_select_fields .form-control,
    .dahr-ckv .global_visa_select_fields .hw__btn-dropdown,
    .dahr-ckv .dahr-ckv__pane .form-control,
    .dahr-ckv .dahr-ckv__pane .hw__btn-dropdown {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}

.dahr-ckv .dahr-ckv__pane textarea.form-control {
    min-height: 10rem;
    padding-top: 1.2rem;
}

.dahr-ckv .dahr-ckv__pane .form-control:focus,
.dahr-ckv .dahr-ckv__pane .hw__btn-dropdown:focus {
    border-color: var(--ck-brand);
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

/* .hw__required-line is what every validator in this template adds. */
.dahr-ckv .dahr-ckv__pane .form-control.hw__required-line,
.dahr-ckv .dahr-ckv__pane .hw__btn-dropdown.hw__required-line {
    border-color: #DC3545;
}

.dahr-ckv .hw__name_error {
    display: block;
    margin-top: .6rem;
    font-size: 1.3rem;
    line-height: 1.4;
}

.dahr-ckv .hw__name_error:empty {
    display: none;
}

.dahr-ckv .hw-input--groupIcon {
    position: relative;
}

.dahr-ckv .hw-input--groupIcon .icon-left {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    color: var(--ck-ink-soft);
    pointer-events: none;
}

.dahr-ckv .hw-input--groupIcon .form-control {
    padding-left: 4.4rem;
}

/* Document upload tiles --------------------------------------------------- */

.dahr-ckv .documents-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 2.4rem;
    margin: 0;
}

.dahr-ckv__docGroup {
    min-width: 0;
}

/* Only the NEW request form groups become a grid. The ?editVisa=true form
   keeps its own bootstrap rows and its .documents-items-full behaviour. */
.dahr-ckv .dahr-ckv__docGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin: 0;
}

@media screen and (min-width: 576px) {
    .dahr-ckv .dahr-ckv__docGrid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Five classes on purpose. The template's inline <style> carries
   `.documents-wrapper .documents-items .file-container { width: 50% }` (and a
   `+ .file-container { margin-top }` under 576px) at the same three-class
   weight but LATER in document order, so a shorter selector here would lose the
   tie and each tile would be half of its own grid cell. */
.dahr-ckv .documents-wrapper .documents-items .dahr-ckv__docGrid > .file-container {
    width: auto;
    margin: 0;
    padding: 0;
}

/* Same reason: the inline block sets a 1.6rem label margin from 992px up at
   three classes + one element. */
.dahr-ckv .documents-wrapper .documents-items .file-container > label {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ck-ink);
}

.dahr-ckv .upload-preview {
    min-height: 16rem;
    max-height: none;
    border-radius: .8rem;
    border: .15rem dashed #C3D0E8;
    background: #F7F9FD;
    padding: 1.6rem;
}

.dahr-ckv .upload-preview.hw__required-line {
    border-color: #DC3545;
    background: #FEF2F2;
}

.dahr-ckv .upload-preview .bi.bi-cloud-upload {
    width: 4.8rem;
    height: 4.8rem;
    background: var(--ck-brand);
}

.dahr-ckv .documents-wrapper .documents-items .file-container .upload-preview > p:nth-of-type(1) {
    margin-top: 1.2rem;
    font-size: 1.5rem;
    color: var(--ck-ink);
}

.dahr-ckv .documents-wrapper .documents-items .file-container .upload-preview > p:last-child {
    font-size: 1.3rem;
    color: var(--ck-ink-soft);
}

.dahr-ckv .documents-wrapper .documents-items .file-container .image-preview {
    min-height: 16rem;
    height: 16rem;
    max-height: none;
    border-radius: .8rem;
    border: .1rem solid var(--ck-line);
    background: #F7F9FD;
}

@media screen and (min-width: 768px) {
    .dahr-ckv .upload-preview {
        min-height: 19rem;
    }

    .dahr-ckv .documents-wrapper .documents-items .file-container .image-preview {
        min-height: 19rem;
        height: 19rem;
    }
}

/* Confirm-your-details list (step 3, left column) -------------------------- */

.dahr-ckv .confirm-details-wrapper {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
}

.dahr-ckv .confirm-details-item {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
    column-gap: 2.4rem;
}

@media screen and (min-width: 576px) {
    .dahr-ckv .confirm-details-item {
        grid-template-columns: 1fr 1fr;
    }
}

.dahr-ckv .confirm-details-item + .confirm-details-item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ckv .confirm-details-item .hw__text20 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ck-ink-soft);
    line-height: 1.4;
}

.dahr-ckv .confirm-details-item .hw__text18,
.dahr-ckv .confirm-details-item .hw__text16 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ck-ink);
}

.dahr-ckv .confirm-details-item .hw__small-ic-new {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 2.8rem 2.8rem;
    flex-shrink: 0;
}

/* Summary sidebar --------------------------------------------------------- */

/* display:contents lets the existing ColLeft / ColRight become the two tracks
   of .dahr-ckv__body--split without touching the markup they live in.
   .hw-payment--twoSideway itself must keep its class: the Stripe error handler
   inserts its fallback notice before it. */
.dahr-ckv .hw-payment--twoSideway {
    display: contents;
    padding-top: 0;
    row-gap: 0;
    column-gap: 0;
}

.dahr-ckv .hw-payment--twoSidewayColLeft {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    min-width: 0;
}

.dahr-ckv .hw-payment--twoSidewayColRight {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    min-width: 0;
    overflow: hidden;
}

@media screen and (min-width: 992px) {
    .dahr-ckv .hw-payment--twoSidewayColRight {
        position: sticky;
        top: 2rem;
        z-index: 1;
    }
}

.dahr-ckv .hw-payment--twoSidewayHead {
    min-height: 0;
    padding: 2rem 2rem 1.6rem;
    border-bottom: .1rem solid var(--ck-line);
}

/* React: .hw-exchk--summaryHead { font-size: 16px } */
.dahr-ckv .hw-payment--twoSidewayHead .hw__h7 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ck-ink);
}

.dahr-ckv .hw-payment--twoSidewayfareSummary {
    padding: 2rem;
}

.dahr-ckv .hw-payment--twoSidewayfareSummary .total-aed p {
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ck-ink-soft);
}

.dahr-ckv .hw-payment--twoSidewayfareSummary .total-aed p b {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ck-ink);
}

.dahr-ckv .hw-payment--twoSidewayfareSummary .total-aed hr {
    margin: 1.6rem 0;
    border-top: .1rem solid var(--ck-line);
    opacity: 1;
}

.dahr-ckv .hw-payment--twoSidewayfareSummary .total-aed p.total_price {
    margin-bottom: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ck-ink);
}

.dahr-ckv .hw-payment--twoSidewayfareSummary .total-aed p.total_price b {
    font-size: 2.2rem;
    color: var(--ck-brand);
}

.dahr-ckv .dahr-original-aed {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--ck-ink-soft) !important;
    margin-top: .6rem !important;
}

.dahr-ckv .dahr-original-aed:empty {
    display: none;
}

/* Payment method cards ---------------------------------------------------- */

/* The picker lives in the LEFT column (its own .dahr-ck__card), not in the
   summary sidebar, so the inline <style> rules that are written as
   `.hw-payment--twoSidewayfareSummary .payment-Method …` no longer match it at
   all and nothing here has to out-specify them. */
.dahr-ckv .payment-Method {
    margin: 0;
}

/* The radios keep their ids (#wallet / #online) and their name; only the box
   around them changes. is-selected is mirrored from :checked by the switcher. */
.dahr-ckv .hw-radio--inline.select-payment {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .dahr-ckv .hw-radio--inline.select-payment {
        grid-template-columns: 1fr 1fr;
    }
}

/* The option cards themselves are the car transfer's `.dahr-ck__pay` label +
   icon + name + meta, and `.dahr-ckv` was added to those rules in section 4
   rather than copied here, so the two checkouts can never drift apart. */

/* Pay Now ----------------------------------------------------------------- */

/* .final_book_now is still the form submit button (the Wallet path relies on
   the native submit) and .online_book_now is re-created next to it by the
   payment_mode change handler, so the wrapper must keep accepting siblings. */
.dahr-ckv .button_wrapper .hw__btn.final_book_now {
    width: 100%;
    min-height: 5.2rem;
    border-radius: .8rem;
    font-size: 1.6rem;
    font-weight: 700;
}

.dahr-ckv .button_wrapper .loader-img-wrapper {
    border-radius: .8rem;
}

.dahr-ckv .dahr-ck__terms {
    margin-top: 1.6rem;
    font-size: 1.3rem;
    /* Left aligned (client, 8-Oct-26). It used to be centred, from when this
       was a bare one-line sentence; with the acceptance checkbox in front it
       has to line up with the rest of the card like any other form row. */
    text-align: left;
}

/* Error notice ------------------------------------------------------------ */

.dahr-ckv .error_notice_wrapper {
    margin: 0 0 1.6rem;
}

.dahr-ckv .error_notice_alert {
    background: #FEF2F2;
    border: .1rem solid #FECACA;
    border-radius: .8rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    color: #B42318;
}

.dahr-ckv .error_notice_alert:empty {
    display: none;
}

/* ?editVisa=true form ----------------------------------------------------- */

/* Not redesigned. It only inherits the card and control chrome above so it
   does not render unstyled next to the new panes. */
.dahr-ckv #update_visa_documents .global_visa_upload_fields {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2.4rem;
    margin-top: 2.4rem;
}

.dahr-ckv #update_visa_documents .form-control {
    min-height: 5.2rem;
    border-radius: .8rem;
    border: .1rem solid var(--ck-line);
}

/* Small screens ----------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .dahr-ckv .dahr-ckv__hero {
        padding-bottom: 7rem;
    }

    .dahr-ckv .dahr-ck__title {
        font-size: 2.4rem;
    }

    .dahr-ckv .dahr-ck__step {
        font-size: 1.4rem;
    }

    .dahr-ckv .dahr-ck__stepBar {
        width: 2rem;
    }

    .dahr-ckv__body {
        margin-top: -5.6rem;
    }

    .dahr-ckv .dahr-ck__card {
        padding: 2rem;
    }
}

/* ==========================================================================
   15. Global Visa confirmation + failure screens (?tab=global-visa-confirm)
   ========================================================================== */

.dahr-ckvc .dahr-ckvc__hero {
    position: relative;
    background: linear-gradient(120deg, #283D6B 0%, #22335E 52%, #3264FF 165%);
    color: #fff;
    margin-left: calc(50% - var(--dahr-vw, 100vw) / 2);
    margin-right: calc(50% - var(--dahr-vw, 100vw) / 2);
    padding: 2.4rem calc(var(--dahr-vw, 100vw) / 2 - 50% + var(--ck-gutter)) 9rem;
}

.dahr-ckvc .dahr-ck__title {
    margin: 0;
}

.dahr-ckvc__body {
    margin-top: -3.2rem;
    position: relative;
    z-index: 2;
    padding-bottom: 3.2rem;
}

.dahr-ckvc .dahr-ckvc__card {
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 4rem 2.4rem;
    text-align: center;
    max-width: 64rem;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .dahr-ckvc .dahr-ckvc__card {
        padding: 5.6rem 4rem;
    }
}

.dahr-ckvc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--ck-brand-soft);
    color: var(--ck-brand);
    margin-bottom: 2.4rem;
}

.dahr-ckvc__icon--fail {
    background: #FEF2F2;
    color: #B42318;
}

.dahr-ckvc .dahr-ckvc__ttl {
    margin: 0 0 1.2rem;
    font-size: 2.8rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ck-ink);
}

@media screen and (min-width: 768px) {
    .dahr-ckvc .dahr-ckvc__ttl {
        font-size: 3.2rem;
    }
}

.dahr-ckvc .dahr-ckvc__desc {
    margin: 0 auto;
    max-width: 46rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--ck-ink-soft);
}

.dahr-ckvc__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    margin-top: 3.2rem;
}

.dahr-ckvc .dahr-ckvc__actions .dahr-ck__btn {
    min-width: 24.5rem;
}

.dahr-ckvc .dahr-ckvc__actions .dahr-ck__sideLink {
    color: var(--ck-ink-soft);
}

/* ==========================================================================
   16. "Processing your booking" progress modal (shared by every checkout)
   ========================================================================== */

/* UI ONLY. The whole modal is built by assets/js/dahr-checkout-loader.js and
   appended to <body>, so no template carries any markup for it and nothing here
   can collide with a module's own classes. Every selector is prefixed
   .dahr-ckl so it is scoped by construction.

   It layers ON TOP of each module's existing busy indicator
   (.loader-img-wrapper / hw-before--loader) — those were left exactly as they
   are, so removing this file degrades the pages to today's behaviour.

   Root font-size is 10px in this theme, so 1rem = 10px. */

.dahr-ckl {
    --ckl-ink: #0F294D;
    --ckl-ink-soft: #5A6B85;
    --ckl-line: #E3E8F0;
    --ckl-brand: #3264FF;
    --ckl-done: #16A34A;

    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 41, 77, .38);
    opacity: 0;
    transition: opacity .18s ease-out;
    /* The page behind is scroll-locked while this is up (see lockScroll() in
       dahr-checkout-loader.js), so the overlay has to be able to scroll
       ITSELF - otherwise a card taller than the viewport is unreachable.
       `contain` stops a scroll gesture here chaining to the page, which is
       also what holds the lock on touch devices. */
    overflow: auto;
    overscroll-behavior: contain;
    /* The overlay is deliberately click-blocking: it is what stops a second
       Pay Now while the first one is still in flight. */
}

.dahr-ckl.is-visible {
    opacity: 1;
}

@supports (backdrop-filter: blur(2px)) {
    .dahr-ckl {
        backdrop-filter: blur(2px);
    }
}

.dahr-ckl__card {
    width: 100%;
    max-width: 44rem;
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 2.4rem 6rem rgba(15, 41, 77, .22);
    padding: 4rem 3.2rem 2.4rem;
    text-align: center;
    transform: translateY(1.2rem);
    transition: transform .18s ease-out;
}

.dahr-ckl.is-visible .dahr-ckl__card {
    transform: none;
}

/* Icon: a static light track with a brand arc spinning over it, padlock in
   the middle. */
.dahr-ckl__icon {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ckl-brand);
}

.dahr-ckl__icon::before,
.dahr-ckl__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: .4rem solid #E6EDFF;
}

.dahr-ckl__icon::after {
    border-color: var(--ckl-brand) transparent transparent transparent;
    animation: dahrCklSpin 1s linear infinite;
}

@keyframes dahrCklSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dahr-ckl__icon::after {
        animation-duration: 2.4s;
    }
}

.dahr-ckl__icon svg {
    width: 3rem;
    height: 3rem;
}

.dahr-ckl__ttl {
    margin: 0 0 .8rem;
    font-size: 2.2rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ckl-ink);
}

.dahr-ckl__sub {
    margin: 0 0 2.8rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--ckl-ink-soft);
}

/* Stages ------------------------------------------------------------------ */

.dahr-ckl__steps {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    text-align: left;
    margin: 0 auto;
    max-width: 28rem;
}

.dahr-ckl__step {
    display: flex;
    align-items: center;
    column-gap: 1.2rem;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    color: #AEBACB;
    transition: color .2s ease-out;
}

.dahr-ckl__dot {
    position: relative;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: .2rem solid #DCE3EE;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease-out, background-color .2s ease-out;
}

.dahr-ckl__dot svg {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0;
    transition: opacity .2s ease-out;
}

.dahr-ckl__step.is-active {
    color: var(--ckl-ink);
}

.dahr-ckl__step.is-active .dahr-ckl__dot {
    border-color: var(--ckl-brand);
}

.dahr-ckl__step.is-done {
    color: var(--ckl-done);
}

.dahr-ckl__step.is-done .dahr-ckl__dot {
    border-color: var(--ckl-done);
    background: var(--ckl-done);
}

.dahr-ckl__step.is-done .dahr-ckl__dot svg {
    opacity: 1;
}

/* Footer ------------------------------------------------------------------ */

.dahr-ckl__note {
    margin: 2.8rem 0 0;
    padding-top: 1.8rem;
    border-top: .1rem solid var(--ckl-line);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--ckl-ink-soft);
}

/* Swapped in by the script when the wait runs long — the modal deliberately
   stays up, because closing it would uncover Pay Now and invite a second
   submit while the first is still in flight. */
.dahr-ckl.is-slow .dahr-ckl__note {
    color: #B45309;
    font-weight: 600;
}

@media screen and (max-width: 479px) {
    .dahr-ckl__card {
        padding: 3.2rem 2rem 2rem;
    }

    .dahr-ckl__ttl {
        font-size: 1.9rem;
    }

    .dahr-ckl__steps {
        max-width: none;
    }
}

/* ==========================================================================
   17. Required Terms & Conditions checkbox (shared by every checkout)
   ========================================================================== */

/* Markup from dahr_checkout_terms_line(); behaviour from
   window.dahrCheckoutTerms in assets/js/dahr-checkout-loader.js. The wrapper
   .dahr-ck__terms already has its type styles in section 6, so only the row,
   the box and the error state are described here.

   The box carries no name and no id on purpose — see the PHP docblock. */

.dahr-ck__termsRow {
    display: flex;
    align-items: flex-start;
    column-gap: 1rem;
}

.dahr-ck__termsCheck {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    flex-shrink: 0;
    margin-top: .25rem;
    accent-color: var(--ck-brand, #3264FF);
    cursor: pointer;
    border: 1px solid #656565;
    border-radius: .5rem;
}

.dahr-ck__termsTxt {
    cursor: pointer;
}

/* The two links keep the pointer/underline they already had in section 6 —
   clicking them opens the page and never toggles the box. */
.dahr-ck__termsTxt a {
    cursor: pointer;
}

.dahr-ck__termsErr {
    display: none;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #DC3545;
}

.dahr-ck__terms.is-invalid .dahr-ck__termsErr {
    display: block;
}

.dahr-ck__terms.is-invalid .dahr-ck__termsCheck {
    outline-offset: .2rem;
    border-radius: .3rem;
}

/* Global Visa centres its terms line (section 14), so the row has to centre
   too — otherwise the checkbox sits flush left under centred text. */
/* Global Visa used to centre its terms line, so the row and the message were
   centred to match. Both are left aligned now — see section 14. */
.dahr-ckv .dahr-ck__termsRow {
    justify-content: flex-start;
    text-align: left;
}

.dahr-ckv .dahr-ck__termsErr {
    text-align: left;
}

/* ==========================================================================
   18. Progress stepper: tick on completed steps, and never clickable
   ========================================================================== */

/* Client, 8-Oct-26. Applies to every booking flow that uses the shared
   indicator — car transfer (SIC + private), A2A flight, insurance and Global
   Visa — because they all render the same .dahr-ck__step markup and only
   toggle .is-done / .is-active on it.

   CSS ONLY for the tick: no template markup and no JS changed, so the existing
   design, spacing and step logic are untouched. Section 1 already turns a done
   step green; all that is added here is swapping the digit for a check. */

/* A completed step shows a tick instead of its number. The digit is collapsed
   with font-size rather than removed, so the circle keeps the exact size,
   line-height and spacing it has in section 1. */
.dahr-ck__step.is-done .dahr-ck__stepNum {
    font-size: 0;
    color: transparent;
    /* React tints the check with `color: #0f3d22` on the #4ade80 circle. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%230f3d22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem 1.4rem;
}

/* Current and upcoming steps keep their numbers — nothing above touches them. */

/* The indicator is display only: a step can never be reached by clicking it,
   only with the Next / Back buttons. Global Visa's circles used to carry the
   .go_to_* / .back_to_* handler classes; those were removed from the markup,
   and this is the belt-and-braces guard so the indicator cannot quietly become
   clickable again in any module. The handlers themselves are untouched — the
   buttons still use them. */
.dahr-ck__steps,
.dahr-ck__step,
.dahr-ck__stepNum,
.dahr-ck__stepBar {
    pointer-events: none;
    cursor: default;
    user-select: none;
}

/* Left over from when Global Visa's circles were links. Kept as a no-op guard:
   if a stale .is-link ever comes back with a pull, it must not look clickable. */
.dahr-ck__step.is-link {
    cursor: default;
}


/* ==========================================================================
   19. Sticky card footer for the forward CTA (client, 8-Oct-26)
   --------------------------------------------------------------------------
   Ported 1:1 from the React HOTEL checkout, which is the agreed reference
   (section 23 of CLAUDE.md). There the forward CTA is NOT in the sidebar: it
   sits in a bar pinned to the bottom of the details card -
   Hotel.css: `.hw-hotel--guestFoot { position: sticky; bottom: 0; z-index: 3;
   display: flex; justify-content: flex-end; background: #fff;
   margin: 22px -20px -20px; padding: 14px 20px;
   border-top: 1px solid #eef1f7; border-radius: 0 0 6px 6px }`
   with `.hw-btn { min-width: 220px }` and, under 768px,
   `margin: 18px -20px -20px; padding: 12px 20px` + a full-width button.

   The negative margins are what make the bar bleed to the card's own edges,
   so they MUST mirror `.dahr-ck__card`'s padding - 2.2rem by default,
   `2rem 1.6rem` under 768px, and `2rem` for `.dahr-ckv` under 768px. Change
   one and the other has to follow, or the bar stops touching the card edge.

   `position: sticky` needs the bar to be the LAST child of the card and needs
   no `overflow` on any ancestor; both were checked for all six call sites.
   Only the FORWARD CTA gets this treatment - the plain Back rows stay
   `.dahr-ck__actions`, exactly like React's non-sticky `.hw-exchk--panelFoot`.
   ========================================================================== */

.dahr-ck__cardFoot {
    position: sticky;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
    background: #fff;
    margin: 22px -20px -20px;
    padding: 1.4rem 2.2rem;
    border-top: .1rem solid #EEF1F7;
    border-radius: 0 0 var(--ck-card-radius) var(--ck-card-radius);
}

/* Back on the left, forward CTA on the right (Global Visa step 2). */
.dahr-ck__cardFoot--split {
    justify-content: space-between;
}

/* React gives only the single CTA a 220px floor; a Back button must not grow
   to match it. */
.dahr-ck__cardFoot .dahr-ck__btn--primary {
    min-width: 22rem;
}

.dahr-ck__cardFoot .dahr-ck__btn {
    margin: 0;
}

/* The flight CTA kept its id/classes when it moved out of the sidebar, and
   section 12 gives it a sidebar margin that would open a gap inside the bar. */
#passenger_details.dahr-ck .dahr-ck__cardFoot .dahr-ck__ctaStep3 {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {

    .dahr-ck__cardFoot {
        margin: 1.8rem -1.6rem -2rem;
        padding: 1.2rem 1.6rem;
    }

    .dahr-ckv .dahr-ck__cardFoot {
        margin: 1.8rem -2rem -2rem;
        padding: 1.2rem 2rem;
    }

    .dahr-ck__cardFoot .dahr-ck__btn,
    .dahr-ck__cardFoot .dahr-ck__btn--primary {
        min-width: 0;
        flex: 1;
    }
}


/* ==========================================================================
   20. "WP bugs" PDF round (client, 8-Oct-26) - UI ONLY
   --------------------------------------------------------------------------
   Items 3, 4, 5, 9 and 10 of the client PDF. Item 1 (hero not vertically in
   line with the body) is fixed at the token itself - see --ck-gutter in
   section 1. Items 2, 7 and 8 are markup, item 6 is the shared select2
   enhancer in assets/js/dahr-checkout-loader.js.
   ========================================================================== */

/* --- PDF 5: summary-card facts are React's 13.5px scale --------------------
   React `.hw-exchk--facts li { font-size: 13.5px }`,
   `.hw-exchk--factLbl { color:#6b7280 }`,
   `.hw-exchk--factVal { color:#1b2439; font-weight:600 }` (Excursion.css 3922).
   Section 2 had 1.5rem with the --ck-ink tokens; these override it in place so
   every module's summary card follows, with no markup change. */

.dahr-ck .dahr-ck__meta,
.dahr-ckc .dahr-ck__meta {
    gap: 1rem;
}

.dahr-ck .dahr-ck__metaRow,
.dahr-ckc .dahr-ck__metaRow {
    gap: 1.2rem;
    font-size: 1.35rem;
    line-height: 1.45;
}

.dahr-ck .dahr-ck__metaKey,
.dahr-ckc .dahr-ck__metaKey {
    font-size: 13.5px;
    font-weight: 400;
    color: #6b7280;
}

.dahr-ck .dahr-ck__metaVal,
.dahr-ckc .dahr-ck__metaVal {
    color: #1b2439;
    font-weight: 600;
}

/* --- PDF 3: the long row sits behind a "More details" toggle ---------------
   Client picked ROUTE only (8-Oct-26) - it is the row that wraps onto three
   lines and makes the card look crowded; Date / Time / Vehicle / Persons stay
   visible. Native <details>, so there is NO new JavaScript and nothing to
   initialise; the row keeps its .sicfallocations class, so the existing fill
   code is untouched. */

.dahr-ck .dahr-ck__more,
.dahr-ckc .dahr-ck__more {
    margin-top: 1rem;
    border-top: .1rem solid #EEF1F7;
    padding-top: 1rem;
}

.dahr-ck .dahr-ck__more > summary,
.dahr-ckc .dahr-ck__more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ck-brand);
    user-select: none;
}

.dahr-ck .dahr-ck__more > summary::-webkit-details-marker,
.dahr-ckc .dahr-ck__more > summary::-webkit-details-marker {
    display: none;
}

.dahr-ck .dahr-ck__more > summary::after,
.dahr-ckc .dahr-ck__more > summary::after {
    content: "";
    width: .8rem;
    height: .8rem;
    border-right: .15rem solid currentColor;
    border-bottom: .15rem solid currentColor;
    transform: rotate(45deg) translate(-.1rem, -.1rem);
    transition: transform .15s ease;
}

.dahr-ck .dahr-ck__more[open] > summary::after,
.dahr-ckc .dahr-ck__more[open] > summary::after {
    transform: rotate(-135deg) translate(-.1rem, -.1rem);
}

.dahr-ck .dahr-ck__more .dahr-ck__metaRow,
.dahr-ckc .dahr-ck__more .dahr-ck__metaRow {
    margin-top: 1rem;
}

/* Section 2 gives .dahr-ck__metaRow `display: flex`, which BEATS the user-agent
   rule that hides a closed <details>'s children - without this the Route row
   stayed visible and the toggle did nothing. Measured. */
.dahr-ck .dahr-ck__more:not([open]) .dahr-ck__metaRow,
.dahr-ckc .dahr-ck__more:not([open]) .dahr-ck__metaRow {
    display: none;
}

/* --- PDF 4: Refundable / Two Way as light OUTLINE chips --------------------
   Client picked the subtle outline (8-Oct-26). The chips are built server side
   in other-function.php (hw-voucher--badge + a colour modifier) and the car
   transfer template styles them in its own inline <style>, which comes AFTER
   this file - hence the extra class and !important on the properties that
   inline block sets. The colour modifiers keep only their TEXT colour, so
   Refundable still reads green and Non Refundable still reads red. */

.dahr-ck .dahr-ck__badges,
.dahr-ckc .dahr-ck__badges {
    gap: .8rem;
    margin-top: 1.2rem;
}

.dahr-ck .dahr-ck__badges .hw-voucher--badge,
.dahr-ckc .dahr-ck__badges .hw-voucher--badge {
    background: transparent !important;
    border: .1rem solid currentColor !important;
    border-radius: 999px !important;
    padding: .25rem .9rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    column-gap: .5rem;
}

.dahr-ck .dahr-ck__badges .hw-voucher--badge i,
.dahr-ckc .dahr-ck__badges .hw-voucher--badge i {
    font-size: 1.1rem !important;
}

/* `.hw-voucher--secondary` (Two Way) was white-on-navy, so with the fill gone
   its text and its new border were invisible. The other three modifiers
   (primary green, default blue, cancel navy) already read correctly on white
   and are deliberately left alone. */
.dahr-ck .dahr-ck__badges .hw-voucher--badge.hw-voucher--secondary,
.dahr-ckc .dahr-ck__badges .hw-voucher--badge.hw-voucher--secondary {
    color: var(--ck-ink) !important;
}

/* --- PDF 10: price breakup follows the React hotel summary -----------------
   React (HotelAmountSumary.js + Style.css 3812): every detail row is a 14px
   BOLD label with a 500-weight value, and the Total sits in its own
   `__tfoot` at 18px with the brand blue on the amount. Ours had 16px bold blue
   values and a 20/22px total.
   CSS ONLY - not one price element moved, so `.total_price_sic`,
   `.transition_fees`, `.falltotalsic`, `.private_total_price`, `.total_price`
   and every other fill target keep their classes and their positions.
   `!important` is required: `.hw__text-bold` and `.hw__text-brand` in
   style.css are themselves !important. */

.dahr-ck .hw-passenger--fareSummary__box span.hw__text16,
.dahr-ck .hw-screen--paymentColSummary span.hw__text16,
.dahr-ck .hw-book--sidebar span.hw__text16 {
    font-size: 1.4rem !important;
    line-height: normal !important;
}

.dahr-ck .hw-passenger--fareSummary__box span.hw__text-black.hw__text16,
.dahr-ck .hw-screen--paymentColSummary span.hw__text-black.hw__text16,
.dahr-ck .hw-book--sidebar span.hw__text-black.hw__text16 {
    font-weight: bold !important;
    color: #121826 !important;
}
}

.dahr-ck .hw-passenger--fareSummary__box span.hw__textblue.hw__text16,
.dahr-ck .hw-screen--paymentColSummary span.hw__textblue.hw__text16,
.dahr-ck .hw-book--sidebar span.hw__textblue.hw__text16 {
        font-weight: bold !important;
    color: #121826 !important;
}

.dahr-ck .hw-passenger--fareSummary__box span.hw__text20,
.dahr-ck .hw-screen--paymentColSummary span.hw__text20,
.dahr-ck .hw-book--sidebar span.hw__text20,
.dahr-ck .hw-passenger--fareSummary__box span.hw__text22,
.dahr-ck .hw-screen--paymentColSummary span.hw__text22,
.dahr-ck .hw-book--sidebar span.hw__text22 {
    font-size: 1.8rem !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
}

.dahr-ck .hw-passenger--fareSummary__box span.hw__text-black.hw__text20,
.dahr-ck .hw-screen--paymentColSummary span.hw__text-black.hw__text20,
.dahr-ck .hw-book--sidebar span.hw__text-black.hw__text20 {
    color: #151515 !important;
}

.dahr-ck .hw-passenger--fareSummary__box span.hw__text-brand.hw__text22,
.dahr-ck .hw-screen--paymentColSummary span.hw__text-brand.hw__text22,
.dahr-ck .hw-book--sidebar span.hw__text-brand.hw__text22 {
    color: var(--ck-brand) !important;
}

/* --- PDF 9: a dropdown must escape its card, never be trimmed --------------
   Section 3 / 10 / 12 all gave `.accordion-item` `overflow: hidden` purely to
   clip the 8px corners, and that clipped the intl-tel-input country list (and
   any native dropdown) at the row's bottom edge. The clipping now lives on the
   first and last children instead, so the corners still look the same and the
   dropdown can paint outside.
   The open row is lifted above the rows after it; select2 is told to render
   into <body> (dahr-checkout-loader.js), so it is never clipped by anything. */

.dahr-ck .hw-passenger--accodion .accordion-item,
.dahr-ck #passengerFieldsContainer .accordion-item,
#passenger_details.dahr-ck .accordion-item {
    overflow: visible;
}

.dahr-ck .hw-passenger--accodion .accordion-item > :first-child,
.dahr-ck #passengerFieldsContainer .accordion-item > :first-child,
#passenger_details.dahr-ck .accordion-item > :first-child,
.dahr-ck .hw-passenger--accodion .accordion-item > :first-child .accordion-button,
.dahr-ck #passengerFieldsContainer .accordion-item > :first-child .accordion-button,
#passenger_details.dahr-ck .accordion-item > :first-child .accordion-button {
    border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;
}

.dahr-ck .hw-passenger--accodion .accordion-item > :last-child,
.dahr-ck #passengerFieldsContainer .accordion-item > :last-child,
#passenger_details.dahr-ck .accordion-item > :last-child {
    border-bottom-left-radius: .8rem;
    border-bottom-right-radius: .8rem;
}

/* A row the user is typing in paints above the rows below it. */
.dahr-ck .accordion-item:focus-within {
    position: relative;
    z-index: 4;
}

.dahr-ck .iti--container,
.dahr-ck .iti__country-list {
    z-index: 1100;
}

/* --- PDF 6: select2 is dressed to match .form-control ----------------------
   The enhancer keeps the native <select> in place (same id, name and value),
   so nothing server side or in any existing handler changes; these rules only
   make the replacement look like the inputs beside it. The dropdown itself is
   rendered into <body>, which is why it is styled unscoped but under the
   .dahr-ck--select2 class the enhancer adds. */

.dahr-ck .select2-container,
.dahr-ckv .select2-container {
    width: 100% !important;
}

.dahr-ck .select2-container--default .select2-selection--single,
.dahr-ckv .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 4.4rem;
    padding: 1rem 1.2rem;
    border: .1rem solid #D7D7D7;
    border-radius: .5rem;
    background: #fff;
    display: flex;
    align-items: center;
}

.dahr-ck .select2-container--default .select2-selection--single .select2-selection__rendered,
.dahr-ckv .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: #151515;
    font-size: 1.4rem;
}

.dahr-ck .select2-container--default .select2-selection--single .select2-selection__arrow,
.dahr-ckv .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: .6rem;
}

.dahr-ck .select2-container--default.select2-container--focus .select2-selection--single,
.dahr-ck .select2-container--default.select2-container--open .select2-selection--single,
.dahr-ckv .select2-container--default.select2-container--focus .select2-selection--single,
.dahr-ckv .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ck-brand);
}

.select2-container--default .select2-dropdown.dahr-ck--select2 {
    border-color: #D7D7D7;
    border-radius: .5rem;
    box-shadow: 0 .8rem 2.4rem rgba(16, 24, 40, .12);
    overflow: hidden;
}

.select2-dropdown.dahr-ck--select2 .select2-search--dropdown .select2-search__field {
    min-height: 3.8rem;
    padding: .6rem 1rem;
    border: .1rem solid #D7D7D7;
    border-radius: .4rem;
    font-size: 1.4rem;
}

.select2-dropdown.dahr-ck--select2 .select2-results__option {
    padding: .8rem 1.2rem;
    font-size: 1.4rem;
}

.select2-dropdown.dahr-ck--select2 .select2-results__option--highlighted[aria-selected] {
    background: var(--ck-brand, #3264FF);
}

@media screen and (min-width: 992px) {

    .dahr-ck .select2-container--default .select2-selection--single .select2-selection__rendered,
    .dahr-ckv .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}


/* ==========================================================================
   21. React checkout parity, round 2 (client, 8-Oct-26) - CSS ONLY
   --------------------------------------------------------------------------
   Round 1 (section 23 notes in CLAUDE.md) was done from the HOTEL checkout
   alone. The client then asked for a proper review of BOTH the Hotel and the
   Excursion checkouts. They turn out to share ONE design system - the
   `hw-exchk--*` block in `Dahrb2b-react/src/assets/css/Excursion.css`
   (~3749-3870); the hotel only adds `hw-hotel--*` modifiers on top. So that
   block is the authority, and these rules bring every value in line with it.
   Nothing here changes markup, so no handler, class or fill target moves.
   ========================================================================== */

/* --- hero title: React is 700, clamped, and has NO letter-spacing ---------
   `.hw-exchk--heroTitle { font-weight: 700; font-size: clamp(20px,2.4vw,27px) }`
   Ours was a flat 2.7rem at 800 with -.01em, so it read heavier than React at
   every width and did not shrink on narrow screens. */
.dahr-ck__title {
    font-size: clamp(2rem, 2.4vw, 27px);
    font-weight: 700;
    letter-spacing: normal;
    margin-top: 4px;
}

/* --- back link: React has no left padding and no negative margin ----------
   `.hw-exchk--back { padding: 6px 8px 6px 0 }`. Ours padded 8px on the left
   and cancelled it with margin-left:-.8rem - same result, two moving parts. */
.dahr-ck__back {
    padding: .6rem .8rem .6rem 0;
    margin-left: 0;
}

/* --- sticky card footer: React pads 16px, not 14 -------------------------- */
.dahr-ck__cardFoot {
    padding: 14px 20px;
}

/* --- panel foot / action row: React `.hw-exchk--panelFoot` --------------- */
.dahr-ck__actions {
    margin-top: 2rem;
}

/* --- summary card: React `.hw-exchk--summary { padding: 18px }` ----------- */
.dahr-ck .hw-car--transferFareSummary {
    padding: 20px;
}

.dahr-ck .hw-book--sidebarTop {
    padding: 1.8rem 1.8rem 1.2rem;
}

.dahr-ck .hw-book--sidebarMiddle {
    padding: 1.8rem;
}

/* --- summary product block: React `.hw-exchk--tourImg` 96x66/8, title 16 -- */
.dahr-ck__prodImg {
    width: 9.6rem;
    height: 6.6rem;
    border-radius: .8rem;
}

.dahr-ck__prodTtl {
    font-size: 1.6rem;
}

/* --- sidebar CTA block: React `.hw-exchk--asideCta` ----------------------- */
/*.dahr-ck__sideCta,
.dahr-ck .hw-book--sidebar .dahr-ck__sideCta {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: .1rem solid #EEF1F7;
}*/

/* React `.hw-exchk--asideBack { font-size: 13px; color: #556 }` */
.dahr-ck__sideLink {
    font-size: 1.3rem;
    color: #556;
}

/* --- payment method cards: React `.hw-exchk--method` ----------------------
   1.5px border, 12px radius, 16px padding, 14px gap, and a #f5f8ff tint when
   selected. Ours were 1px/8px/16-18px/12px on --ck-brand-soft. */
.dahr-ck__pay,
.dahr-ckv .dahr-ck__pay {
    gap: 1.4rem;
    padding: 1.6rem;
    border-width: .15rem;
    border-color: #E2E6EE;
    border-radius: 1.2rem;
}

.dahr-ck__pay:hover,
.dahr-ckv .dahr-ck__pay:hover {
    border-color: #C3CCDB;
}

.dahr-ck__pay.is-selected,
.dahr-ckv .dahr-ck__pay.is-selected {
    border-color: var(--ck-brand);
    background: #F5F8FF;
}

.dahr-ck__payName,
.dahr-ckv .dahr-ck__payName {
    font-size: 1.5rem;
}

.dahr-ck__payMeta,
.dahr-ckv .dahr-ck__payMeta {
    font-size: 1.25rem;
    color: #6b7280;
}

/* --- terms line: React `.hw-exchk--terms` 12.5px #6b7280, 16px above ------
   The CHECKBOX row keeps React's own `.hw-exchk--agreeCheck` scale (13.5px,
   #4b5563, line-height 1.55) - it is a different element there, and ours
   already matches its 18px box, 10px gap and accent colour. */
.dahr-ck__terms {
    margin-top: 1.6rem;
}

.dahr-ck__termsTxt {
    font-size: 1.35rem;
    line-height: 1.55;
    color: #4b5563;
}

/* ==========================================================================
   Breakpoints - React narrows the panel to 18px under 768px, and drops to one
   column at 991px with the sidebar CTA hidden (ours keeps the CTA because the
   PHP checkouts have no mobile bottom bar to move it to).
   ========================================================================== */

@media screen and (max-width: 767px) {

    .dahr-ck__card {
        padding: 1.8rem;
    }

    .dahr-ck .hw-car--transferFareSummary,
    .dahr-ckc .hw-car--transferFareSummary,
    .dahr-ckc .hw-car--listShow__widget {
        padding: 1.8rem;
    }

    /* section 19's bleed has to follow the card padding, or the sticky bar
       stops touching the card edge. */
    .dahr-ck__cardFoot {
        margin: 1.8rem -1.8rem -1.8rem;
        padding: 1.2rem 1.8rem;
    }

    .dahr-ckv .dahr-ck__cardFoot {
        margin: 1.8rem -2rem -2rem;
        padding: 1.2rem 2rem;
    }
}

/* ==========================================================================
   22. Stray location pin inside the passenger form (client, 8-Oct-26)
   --------------------------------------------------------------------------
   A location pin was painting ON TOP of the Prefix / Nationality dropdown
   text in the car transfer checkout. Identified by rendering the theme's own
   icon and pixel-comparing it with the screenshot: it is
   `.i-bi.i-bi-location-blue`, the 20px data-URI pin defined in the car
   transfer template's inline <style> and normally used for the pickup / drop
   location ROWS (other-function.php builds those strings with it).

   It overlaps the text because `<i>` is `display: inline` by default, so
   `.i-bi`'s width/height do not apply - the element reserves NO space but its
   background image still paints, straight over whatever is beside it.

   Scoped to the form only. The legitimate pins live in
   `.middle-content--rowItem` (booking list, confirmed pages) and in the
   summary `.dahr-ck__metaVal` Route / Pickup rows; neither sits inside an
   `.accordion-body` or a `.hw__dropdown`, so neither is touched here.
   ========================================================================== */

.dahr-ck .accordion-body .i-bi-location-blue,
.dahr-ck .hw__dropdown .i-bi-location-blue,
.dahr-ckv .accordion-body .i-bi-location-blue,
.dahr-ckv .hw__dropdown .i-bi-location-blue {
    display: none !important;
}

/* ==========================================================================
   23. A2A passenger-count screen: counters left, flight right, no date bar
       (client, 8-Oct-26) - CSS ONLY, #single_booking_wrapper
   --------------------------------------------------------------------------
   Two client points on "Choose Number Of Passengers":
     - the Adult / Child / Infant panel moves to the LEFT and the flight card
       to the RIGHT (they were col-md-7 flight + col-md-5 counters);
     - the date strip above the card goes.

   Done with `order` rather than by moving the markup, so the DOM is untouched
   and every class the page's JS fills (~25 `.flight_single_*` targets, the
   quantity pickers, `.select_booking`) stays exactly where it is. The child
   combinator matters: `col-md-5` holds its own nested `.row` of `col-md-12`
   rows, and those must not be reordered.
   ========================================================================== */

@media screen and (min-width: 768px) {

    #single_booking_wrapper.dahr-ck .row > .col-md-5 {
        order: 1;
    }

    #single_booking_wrapper.dahr-ck .row > .col-md-7 {
        order: 2;
    }
}

/* The date strip. HIDDEN, not removed: the span carries
   `.selected_date_wrapper`, and `$('.selected_date_wrapper').text(...)` writes
   to every copy on the page (flight template ~2523 / 4208 / 4240). Deleting it
   would be fine for those, but `document.querySelector('.selected_date_wrapper')`
   (~2997) takes the FIRST one in DOM order, so the element has to stay where
   it is. Hiding the wrapper also takes its margin-top with it. */
#single_booking_wrapper.dahr-ck .hw__page-titlebar + .hw__mt-20,
#single_booking_wrapper.dahr-ck .hw-calender--topBar {
    display: none;
}

/* ==========================================================================
   24. Passenger accordion: A2A + insurance match the car transfer one
       (client, 8-Oct-26) - CSS ONLY
   --------------------------------------------------------------------------
   The car transfer accordion was tightened to the React excursion/hotel card
   in section 3 (see CLAUDE.md §7.17 round 2). A2A and insurance were left
   behind because BOTH their templates carry the same inline block:

       #passengerDetailsAccordion .accordion-item .accordion-collapse > .row,
       #passengerFieldsContainer  .accordion-item .accordion-collapse > .row
           { margin: 0; padding: 1.6rem 0.85rem;
             border-top: 1px solid var(--hw-gray-600); }
       ... .accordion-item { margin-top: 2rem }

   That selector is (1,3,0) - the SAME specificity as section 12/10's version -
   and the inline <style> sits later in the document, so the template was
   winning. These rules add one more class to get (1,4,0) and take it back.

   The car's `border-bottom` on the open header IS copied (8-Oct-26, round 2).
   §29 first kept these modules' own row `border-top` instead, on the theory
   that it renders in the same place - it does not, see the note on the rule
   below - so the row border is switched off and the header draws the line,
   exactly as the car does. `!important` is required to beat the templates'
   `border: none !important` on `.accordion-button`, the same way section 3
   does it for the car.
   ========================================================================== */

#passenger_details.dahr-ck .accordion-item .accordion-collapse > .row,
.dahr-ck #passengerFieldsContainer .accordion-item .accordion-collapse > .row {
    /* Car: `.accordion-body { padding: 2rem }` with the row's own negative
       gutters cancelling the columns' padding. Here the template zeroes those
       margins, so the columns' .8rem half-gutter is still inside - 1.2 + .8
       lands the first field at the same 2rem as the car. */
    padding: 2rem 1.2rem;
    /* The divider moves OFF this row and onto the open header below. A
       bootstrap `.row` carries `margin-top: -1.6rem` (the gutter), so a
       `border-top` here is painted 1.6rem ABOVE where the content starts -
       it cut into the header's padding and left a 3.7rem gap under itself.
       Measured on the real pages: car header 58px / 21px gap, A2A 42px / 37px
       gap, with the same 79px overall. */
    border-top: 0;
    /* Car zeroes the row gap so the 1.6rem gutter alone spaces the fields;
       these rows carry `hw__rowg-20` (2rem) on top of the gutter. */
    row-gap: 0;
    --bs-gutter-x: 1.6rem;
    --bs-gutter-y: 1.6rem;
}

/* The template gives EVERY item `margin-top: 2rem`, including the first one;
   the car has no gap above its first row. Section 12/10 already set the
   between-items gap to 1.6rem. */
#passenger_details.dahr-ck .accordion-item:first-child,
.dahr-ck #passengerFieldsContainer .accordion-item:first-child,
.dahr-ck #passengerFieldsContainer > div:first-child .accordion-item {
    margin-top: 0;
}

/* --- A2A: the date above Passenger Details goes (client, 8-Oct-26) --------
   HIDDEN, not deleted. `jQuery('.selected_date_wrapper_outer_box.flight-booking-date').text()`
   (flight template ~2793) reads this exact element for `selectedBookingDate`,
   and `$('.selected_date_wrapper').text(...)` writes to it, so it has to stay
   in the DOM. The `.hw__mt-16` wrapper is hidden too so its margin goes with
   it; the date bars in #booking_list_main and #single_booking_wrapper are a
   different element each and are not affected. */
#passenger_details.dahr-ck .dahr-ck__cardTtl + .hw__mt-16,
#passenger_details.dahr-ck .hw-flight-booking--dateLeft {
    display: none;
}

/* ==========================================================================
   25. Insurance plan loader (client, 8-Oct-26) - CSS ONLY
   --------------------------------------------------------------------------
   While the plans are fetched the page does
       $('#insurance-tab').append('<div id="flights_processing"
            class="dataTables_processing" role="status">…4 dots…</div>')
   (insurance template ~2683). That is DataTables' own processing element, and
   DataTables 1.13.6 positions it `absolute; top:50%; left:50%` with -100px /
   -26px margins. `#insurance-tab` (a `.dahr-ck__card`) is not positioned, so
   the dots escaped the card and centred themselves on the whole content area,
   leaving the card as an empty strip above them.

   NOTE the positioning is the THEME's, not the CDN's: style.css ~2000 has
   `div.dataTables_processing { position: absolute; top: 11rem; left: 50%;
   margin-left: -100px }`, which is exactly the offset seen on screen.

   Fixed without touching the JS: the element is put back IN FLOW inside the
   card, so it centres under the title and the card grows to hold it. The card
   is given `position: relative` as well, so even if that absolute positioning
   comes back the dots stay inside this card.

   BOTH cards are covered: the same `#flights_processing` element is appended
   to `#insurance-tab` while the plans load (~2683) and to `#insurance-checkout`
   on the purchase paths (~3589 / 4097 / 4202 / 4240 / 4311), and neither was
   positioned. The id is reused, never duplicated - each append is paired with
   a `$('#flights_processing').remove()`.
   The four dots are deliberately NOT restyled - style.css sets
   `background: #0F294D !important` on them, which is what every DataTable
   loader in the portal uses, and insurance should not be the odd one out.
   ========================================================================== */

.dahr-ck #insurance-tab,
.dahr-ck #insurance-checkout {
    position: relative;
}

.dahr-ck #insurance-tab #flights_processing,
.dahr-ck #insurance-checkout #flights_processing {
    position: static;
    width: auto;
    margin: 0;
    padding: 3.2rem 0 2rem;
    text-align: center;
    color: var(--ck-ink-soft);
    font-size: 1.4rem;
}

/* --- A2A: the duplicate card title goes (client, 8-Oct-26) ----------------
   `#passenger_details` printed "Passenger Details" three times: the hero step
   title, the card's own `.dahr-ck__cardTtl`, and the label above the accordion
   (flight template 1015 / 1468 / 1482). The middle one is the redundant copy.

   HIDDEN, not deleted, on purpose: §29's date rule is
   `.dahr-ck__cardTtl + .hw__mt-16`, and the rule below is
   `+ .hw__mt-16 + .hw__mt-16`. Both are adjacent-SIBLING selectors, so the h3
   has to stay in the DOM for them to keep matching - `display: none` does not
   affect sibling matching, removing the element would.
   With the title and the date block both hidden, the THIRD block is first in
   the card and its own 1.6rem top margin on top of the card's 2.2rem padding
   read as a gap, so it is zeroed.

   /!\ The chain SHIFTED on 14-Oct-26, when Booking Reference moved to the
   Payment pane: the third block used to be Booking Reference and is now the
   section head + accordion. The rule needs no edit - it still lands on
   whatever is first visible, which is exactly its job - but 28.2's four-link
   version now matches nothing. See the note there. */

#passenger_details.dahr-ck [data-ck-pane="details"] > .dahr-ck__cardTtl {
    display: none;
}

/* `.hw__mt-16` is `margin-top: 1.6rem !important` in style.css (~276), so this
   needs !important too. */
#passenger_details.dahr-ck .dahr-ck__cardTtl + .hw__mt-16 + .hw__mt-16 {
    margin-top: 0 !important;
}

/* --- A2A passenger-count screen: the CTA sits in a card footer -------------
   (client, 8-Oct-26) The Book button moved out of the counters panel to the
   bottom-right of the white card and was renamed "Continue to Payment", so the
   screen ends the same way every other checkout step does (§24).

   ⚠️ Section 19's bleed assumes a `.dahr-ck__card`, which is 2.2rem padded.
   The card HERE is `.hw__grid.hw__bsnull.hw__bnull`, padded 2.4rem and 3.2rem
   from 768px (section 12), so the negative margins have to be restated at both
   sizes or the bar stops touching the card edge.

   The button keeps `.hw__btn.hw__btn-primary.flight_single_book_now` - it is
   NOT a `.dahr-ck__btn`, so section 19's `min-width` does not reach it. */

/* The bleed that used to be here (2.4/3.2rem, for the old outer box) is gone -
   section 26 moved this bar into the left card, which is 2.2rem padded. */
#single_booking_wrapper.dahr-ck .dahr-ck__cardFoot .flight_single_book_now {
    min-width: 22rem;
    width: auto;
}


/* The divider, on the open header - where the car puts it (section 3). */
#passenger_details.dahr-ck .accordion-button:not(.collapsed),
.dahr-ck #passengerFieldsContainer .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid var(--ck-line) !important;
}

/* --- Confirmed hero: no empty subtitle gap (client, 8-Oct-26) -------------
   The "Thank you! Your Ticket has been Booked…" line was dropped — the
   "Booking Confirmed" heading right above it already says that. On SIC only
   the CONFIRMED branch was blanked, so `$booking_description` still carries
   "Our team will check your order…" for a pending order and that keeps
   rendering; this stops the now-empty div leaving its margin behind on the
   confirmed one. */
.dahr-ckc .dahr-ckc__desc:empty,
.dahr-ck .dahr-ck__hero--confirmed .dahr-ckc__desc:empty,
.dahr-ckf .dahr-ck__hero--confirmed .dahr-ckc__desc:empty {
    display: none;
}

/* ==========================================================================
   26. A2A passenger-count screen uses the standard card layout
       (client, 8-Oct-26) - CSS ONLY apart from moving the CTA into the card
   --------------------------------------------------------------------------
   Every other checkout step is `.dahr-ck__main` = a left column of
   `.dahr-ck__card`s + a `.dahr-ck__side` summary. This screen was one big
   white box holding a grey counters panel and a bordered flight box, which is
   why it read differently from the rest.

   Done without restructuring the DOM: the outer box is emptied of its card
   chrome, the bootstrap `.row` becomes the same grid the other steps use, and
   the two columns take the card / sidebar chrome instead. The `order` swap
   from §28 still applies (grid honours `order` just as flex does), so the
   counters stay left and the flight summary right.
   ========================================================================== */

/* the outer box stops being a card - it is just the grid's wrapper now */
#single_booking_wrapper.dahr-ck .hw__grid.hw__bsnull.hw__bnull:not(.hw-calender--topBar) {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#single_booking_wrapper.dahr-ck .row.hw__rowg-20 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    row-gap: 1.2rem;
    margin: 0;
    align-items: start;
}

/* both columns become cards; the bootstrap width/flex/padding are replaced */
#single_booking_wrapper.dahr-ck .row.hw__rowg-20 > .col-md-5,
#single_booking_wrapper.dahr-ck .row.hw__rowg-20 > .col-md-7 {
    width: auto;
    max-width: none;
    flex: none;
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: var(--ck-shadow);
    padding: 2.2rem;
    min-width: 0;
}

/* the grey inner panel and the bordered flight box were standing in for the
   cards; the cards provide that chrome now */
#single_booking_wrapper.dahr-ck .col-md-5 > .row {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

#single_booking_wrapper.dahr-ck .hw-flight--listShow {
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* the CTA bar now sits in the left card, so its bleed follows THAT card's
   2.2rem padding - not the 2.4/3.2rem of the old outer box (§32). */
#single_booking_wrapper.dahr-ck .dahr-ck__cardFoot {
    margin: 2.2rem -2.2rem -2.2rem;
    padding: 1.6rem 2.2rem;
}

@media screen and (min-width: 992px) {

    #single_booking_wrapper.dahr-ck .row.hw__rowg-20 {
        grid-template-columns: minmax(0, 1fr) 45rem;
    }
}

/* --- A2A step 2: the flight box reads like the Details step's summary -----
   (client, 8-Oct-26) ⚠️ `.hw-flight--listShow` is `display: flex`, so the
   airline block and the timeline sat SIDE BY SIDE. That was fine in the old
   58%-wide column; once §35 put it in a 450px card the timeline was squeezed
   to 241px and every label wrapped ("Dubai (DXB)" over two lines, "2h 40min"
   over two). Stacking them gives the timeline the full card width, which is
   the vertical rhythm the Details step's `.hw__book-box` already has.
   The container's own side padding goes too - the card pads now. */

#single_booking_wrapper.dahr-ck .hw-flight--listShow {
    flex-direction: column;
    align-items: stretch;
    row-gap: 1.6rem;
}

#single_booking_wrapper.dahr-ck .hw-flight--listContainer {
    padding: 0;
    max-width: none;
}

/* The Details step pins its side columns with
   `.hw__bf-list--time > .d-flex > div:not(.hw-line-section) { min-width: 9.5rem }`
   (flight template ~280). Same floor here, so the two boxes line up. */
#single_booking_wrapper.dahr-ck .hw-timeline > .hw-departure,
#single_booking_wrapper.dahr-ck .hw-timeline > .hw-arrival {
    min-width: 9.5rem;
}

/* Heading, matching the Details step's `.hw-screen--SummaryHead` but sitting
   inside a card that already has 2.2rem of padding. */
#single_booking_wrapper.dahr-ck .hw-screen--SummaryHead {
    display: block;
    min-height: 0;
    margin: -.4rem 0 1.6rem;
    padding: 0 0 1.2rem;
    border-bottom: .1rem solid var(--ck-line);
}

#single_booking_wrapper.dahr-ck .hw-screen--SummaryHead .hw__h7 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ck-ink);
}


/* ==========================================================================
   27. Car transfer <-> React HOTEL checkout parity (client, 9-Oct-26)
   --------------------------------------------------------------------------
   The client sent the React hotel checkout (both steps) as THE reference for
   the car transfer checkout: "form na input fields, select dropdowns, icons,
   fonts, spacing, buttons ane overall styling - badhu j Hotel Checkout na
   design sathe consistent hovu joie."

   Reference, read from the SOURCE (not guessed off the screenshots):
     Dahrb2b-react/src/pages/hotels/checkout/**               (markup)
     Dahrb2b-react/src/assets/css/Excursion.css  ~3749-3870   (hw-exchk--*)
     Dahrb2b-react/src/assets/css/Hotel.css      ~4427-4520, ~5842-5890
     Dahrb2b-react/src/assets/css/Style.css      ~660-790, ~4170-4300

   Everything here is CSS. The only markup that changed is a section-head
   wrapper per card section and the Booking Reference title becoming a real
   <label> - no handler, name, id, value or payload was touched.

   Scoped to .dahr-ck, which on the car templates is the SIC review form and
   the private transfer review form. The A2A flight and insurance checkouts
   also carry .dahr-ck, so every rule below that could otherwise reach them is
   pinned to a car-only class (.dahr-ck__secHead, .hw-passenger--accodion);
   those modules get their own round.
   ========================================================================== */

/* --- 27.1 Section head: icon chip + title + divider ------------------------
   React: .hw-exchk--sectionHead { display:flex; gap:12px; padding-bottom:14px;
   margin-bottom:20px; border-bottom:1px solid #ECEEF3 } with a 36px rounded
   #EBEFFF chip holding an 18px #3264FF icon and an 18px/700 title.
   This is the one piece section 21 deliberately did NOT port, because it
   needed markup; the client has now asked for it. */

.dahr-ck .dahr-ck__secHead {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: .1rem solid #ECEEF3;
}

.dahr-ck .dahr-ck__secIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    flex: none;
    border-radius: 1rem;
    background: #EBEFFF;
    color: var(--ck-brand);
}

.dahr-ck .dahr-ck__secIcon svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--ck-brand);
}

.dahr-ck .dahr-ck__secTtl {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    letter-spacing: -.01em;
}

/* A block that carries its own section head must not ALSO get the generic
   block separator from section 2 - that would draw a rule above the heading
   and a second one below it. React spaces consecutive sections with
   `.hw-exchk--sectionHead { margin-top: 2.8rem }` and nothing else. */
.dahr-ck .dahr-ck__block + .dahr-ck__block.dahr-ck__block--sec {
    margin-top: 2.8rem;
    padding-top: 0;
    border-top: 0;
}

/* --- 27.2 Field label (Booking Reference) ---------------------------------
   React: .hw-exchk--label { 14px/600; margin-bottom 6px } +
          .hw-exchk--optional { #98A2B6; 500 }.
   It is a LABEL above a field, not a section title - which is why the car's
   1.7rem .dahr-ck__blockTtl there read as a third heading on the page. */

.dahr-ck .dahr-ck__label {
    display: block;
    margin-bottom: .6rem;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ck-ink);
}

.dahr-ck .dahr-ck__label .dahr-ck__opt {
    font-weight: 500;
    color: #98A2B6;
}

/* React: .hw-exchk--bookingRef { margin-top:18px; padding-top:18px;
   border-top:1px solid #EEF1F7 }, with the hotel's .hw-hotel--payField
   pulling margin-top back to 16px. */
.dahr-ck .dahr-ck__block + .dahr-ck__block.dahr-ck__block--field {
    margin-top: 1.6rem;
    padding-top: 1.8rem;
    /* !important because this block also carries the theme utility
       `.hw__bnull { border-width: 0 !important }`, which is why the generic
       .dahr-ck__block separator never drew a line above Booking Reference.
       React does draw one there (.hw-exchk--bookingRef). */
    border-top: .1rem solid #EEF1F7 !important;
}

/* --- 27.3 Passenger accordion = React's .hw-passenger--detailsGroupItem ----
   React (Style.css ~4238-4292):
     item    border 1px #D7D7D7, radius .5rem
     header  padding 1.2rem 2rem, 1.4rem/700, divider under it when open
     body    padding 1.6rem
   Ours was 1.6rem/2rem padding, 1.6rem text and a .8rem radius (section 3).
   The gap BETWEEN items stays 1.6rem: React's is 1.5rem
   (.hw-hotelPassenger--listShow__widget .hw-passenger--detailsGroup), a 1px
   difference not worth a rule.

   .hw-passenger--accodion appears only on the two car review forms and on
   private-booking-confirmed.php, which is .dahr-ckc - so this cannot reach the
   A2A or insurance accordions (#passengerDetailsAccordion /
   #passengerFieldsContainer, section 24). */

.dahr-ck .hw-passenger--accodion .accordion-item {
    border-color: #D7D7D7;
    border-radius: .5rem;
}

.dahr-ck .hw-passenger--accodion .accordion-button {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
}

.dahr-ck .hw-passenger--accodion .accordion-body {
    padding: 1.6rem;
}

/* No icon in the accordion header (client, 9-Oct-26: "red highlight krya che
   ae icon remove kri de, hotel checkout ma nthi"). React's header is the text
   alone - `{typeMap[type]} {index + 1}` in HotelGuestDetailsFormItem.
   Hidden rather than deleted because four of the five headers that carry it
   are built from one-line JS template literals (Adult 2+, Child, Infant in
   the car template ~7171-7191); one rule covers the server-rendered Adult 1,
   the private transfer's "Person Detail" and all of those. The button is a
   flex container, so `display: none` takes the icon's 2rem box and the gap
   with it - no leftover indent.
   Scoped to .dahr-ck, so the two booking-CONFIRMED pages (.dahr-ckc) keep
   their icons; only the checkout was in scope. */
.dahr-ck .hw-passenger--accodion .accordion-button .i-bi-user-dark {
    display: none;
}

/* Section 3 draws the open-header divider in --ck-line (#E3E8F0) with an
   !important (the template forces `border: none !important` on the button).
   React draws it in the SAME colour as the item border, #D7D7D7. */
.dahr-ck .hw-passenger--accodion .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid #D7D7D7 !important;
}

/* --- 27.4 Terms line + buttons --------------------------------------------
   Both are SHARED pieces: .dahr-ck__terms comes from one helper
   (dahr_checkout_terms_line) and .dahr-ck__btn is used by all four
   checkouts. The client asked for the CAR module this round and the rest
   "ek pachi ek", so these two are pinned to the car scope
   `.dahr-ck.hw-car--transferPaymentSection` - the SIC review form and the
   private transfer review form, and only those: the two booking-confirmed
   pages carry the same hw-car-- class but are .dahr-ckc, not .dahr-ck.
   When A2A / insurance / Global Visa are done, lift these onto the plain
   class and delete the scope. */

/* Terms: the hotel uses .hw-term--conditionInput (Style.css ~4183 +
   Hotel.css 2308) - label 1.4rem / line-height 1.714 / weight 500, body
   colour #555, 1rem gap. Section 21 had taken the EXCURSION value
   (13.5px #4B5563 lh 1.55). */
.dahr-ck.hw-car--transferPaymentSection .dahr-ck__terms .dahr-ck__termsRow {
    column-gap: 1rem;
}

.dahr-ck.hw-car--transferPaymentSection .dahr-ck__terms .dahr-ck__termsTxt {
    font-size: 1.4rem;
    line-height: 1.71429;
    font-weight: 500;
    color: #555;
}

/* Buttons: React's .hw-btn is `padding .8rem 2rem; font-weight bold;
   border-radius .5rem` at 1.4rem/1.5, rising to 1.6rem/1.75 from 768px
   (Style.css 2525 + 5554) - i.e. 4.4rem tall on desktop, the same height as
   the inputs beside it. Ours was 5.2rem with a .8rem radius.
   .hw-exchk--btnWide / the hotel's guestFoot keep min-width 220px, which
   section 19 already sets. */
.dahr-ck.hw-car--transferPaymentSection .dahr-ck__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    line-height: 1.75;
}

/* The sidebar Pay Now is the theme's .hw__btn (5.4rem / 1.7rem / .8rem
   radius); React's aside CTA is the same .hw-btn as the forward CTA, only
   full width. The ghost/outline variants it sits next to are untouched. */
.dahr-ck.hw-car--transferPaymentSection .dahr-ck__ctaStep2 .hw__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    line-height: 1.75;
}

/* --- 27.6 Confirmed page: Download Receipt row ----------------------------
   React's hotel CONFIRMED screen keeps the sidebar for the Price Breakup and
   nothing else (HotelAmountSumary.js, CONFIRM branch) and puts the download
   in the LEFT column as a labelled inline row
   (HotelDetailsTabContent.js -> .hw-fbk--ticketsSection.hw-hotel--dlInline):
     .hw-hotel--dlInline        { display:flex; align-items:center; gap:16px;
                                  flex-wrap:wrap }
     .hw-exchk--panelSubTitle   { 15px/700 #1b2439; margin:0; white-space:nowrap }
     .hw-tk--dlRow > div > .hw-btn { padding:11px 14px; font-size:14px;
                                  font-weight:600; border-radius:4px;
                                  min-height:44px; min-width:160px;
                                  line-height:1.2; white-space:nowrap }
   Ours is one button, not the hotel's With Fare / Without Fare pair, so the
   row is label-left / button-right. The <a> keeps its href, its
   .hw__btn.hw__btn-primary classes and its download target exactly as they
   were in the sidebar - only where it sits and how it is painted changed.

   Scoped to .dahr-ckc (the two car booking-confirmed pages). */

.dahr-ckc .dahr-ckc__dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.dahr-ckc .dahr-ckc__dlTtl {
    flex: none;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    white-space: nowrap;
}

.dahr-ckc .dahr-ckc__dlAct {
    flex: 0 1 auto;
}

/* Two classes so this beats the `.hw__btn` block in each confirmed page's own
   inline <style>, which comes after this file in document order. */
.dahr-ckc .dahr-ckc__dlAct .dahr-ckc__dlBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 16rem;
    min-height: 4.4rem;
    padding: 1.1rem 1.4rem;
    border-radius: .4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

@media screen and (max-width: 575px) {

    /* React stacks the same row at 575px (.hw-hotel--dlInline). */
    .dahr-ckc .dahr-ckc__dl {
/*        flex-direction: column;*/
        align-items: stretch;
        gap: 1rem;
    }

    .dahr-ckc .dahr-ckc__dlAct .dahr-ckc__dlBtn {
        width: 100%;
    }
}

/* --- 27.5 select2 dressed as React's .hw-gsel -----------------------------
   The screenshot shows an OPEN dropdown: white 8px panel, 6px inner padding,
   rounded rows, the chosen row in brand blue on a light blue tint with a
   check mark. That is HwPlainSelect / .hw-gsel (Style.css ~668-770).
   select2's own look (solid blue highlight, square panel, triangle arrow) was
   the visible mismatch.

   The panel renders into <body>, so it is styled through the
   .dahr-ck--select2 class the enhancer adds on `select2:open`
   (assets/js/dahr-checkout-loader.js) - nothing in that JS changed. */

/* Control: React .hw-gsel--control. Border/padding/size already match the
   inputs (section 20); this adds the hover tone and the placeholder colour. */
.dahr-ck .select2-container--default .select2-selection--single:hover {
    border-color: #9AA3B5;
}

.dahr-ck .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #98A2B6;
}

/* Arrow. select2's own <b> triangle is already `display:none` in the car
   template's inline <style>, which draws the chevron as a background image on
   .select2-selection__arrow instead and flips it with `scaleY(-1)` when open -
   so the MECHANISM already matches React, only the paint did not: that arrow
   is black and sits in a 5.8rem-wide box sized for the theme's 5.8rem-tall
   selects, while React's .hw-gsel--chevron is a 2rem #6B7488 chevron.
   Recoloured and resized here; the open-state flip is left exactly as it is.
   `body` is needed in the selector because the inline rule it overrides is
   `body .select2-container--default ... .select2-selection__arrow` and the
   template's <style> comes after this file in document order. */
body .dahr-ck .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 3.6rem;
    background-size: 2rem 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M5.79289 9.29289C6.18342 8.90237 6.81658 8.90237 7.20711 9.29289L12.5 14.5858L17.7929 9.29289C18.1834 8.90237 18.8166 8.90237 19.2071 9.29289C19.5976 9.68342 19.5976 10.3166 19.2071 10.7071L13.2071 16.7071C12.8166 17.0976 12.1834 17.0976 11.7929 16.7071L5.79289 10.7071C5.40237 10.3166 5.40237 9.68342 5.79289 9.29289Z' fill='%236B7488'/%3E%3C/svg%3E");
}

/* Panel: React .hw-gsel--menu. */
.select2-container--default .select2-dropdown.dahr-ck--select2 {
    padding: .6rem;
    /* !important: the car template's inline <style> has
       `body .select2-container .select2-dropdown { border: 1px solid
        var(--hw-gray-600) !important }`. */
    border: .1rem solid #E6E9F0 !important;
    border-radius: .8rem;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 24, 40, .14);
    overflow: hidden;
}

.select2-dropdown.dahr-ck--select2 .select2-results__options {
    padding: 0;
}

/* Rows: React .hw-gsel--option. */
.select2-dropdown.dahr-ck--select2 .select2-results__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #1B2439;
    border-radius: .6rem;
    transition: background .12s ease, color .12s ease;
}

/* select2's own highlight is a solid brand fill with white text. React tints
   the row instead, so the hover/keyboard row reads like .hw-gsel--option:hover
   and only the CHOSEN one is blue. */
.select2-dropdown.dahr-ck--select2 .select2-results__option--highlighted[aria-selected] {
    background: #F3F5F9;
    color: #1B2439;
}

.select2-dropdown.dahr-ck--select2 .select2-results__option[aria-selected="true"] {
    background: rgba(50, 100, 255, .08);
    color: #3264FF;
    font-weight: 600;
}

/* The check mark React draws as an inline <svg> in the chosen row. Painted
   with a mask so it inherits the row colour and needs no extra element. */
.select2-dropdown.dahr-ck--select2 .select2-results__option[aria-selected="true"]::after {
    content: "";
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Search box inside the panel (nationality / country lists). */
.select2-dropdown.dahr-ck--select2 .select2-search--dropdown {
    padding: 0 0 .6rem;
}

.select2-dropdown.dahr-ck--select2 .select2-search--dropdown .select2-search__field {
    min-height: 4rem;
    padding: .8rem 1.2rem;
    border: .1rem solid #D7D7D7;
    border-radius: .5rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #151515;
}

.select2-dropdown.dahr-ck--select2 .select2-search--dropdown .select2-search__field:focus {
    border-color: #3264FF;
    outline: none;
}

@media screen and (min-width: 992px) {

    /* React bumps .hw-gsel--control to 1.6rem from 992px, exactly like the
       inputs; the menu rows stay 1.4rem there. */
    .dahr-ck .select2-container--default .select2-selection--single .select2-selection__placeholder {
        font-size: 1.6rem;
    }
}


/* ==========================================================================
   28. A2A flight checkout <-> React HOTEL checkout parity (client, 9-Oct-26)
   --------------------------------------------------------------------------
   Second module of the "ek pachi ek" pass that section 27 started on the car
   transfer. Same reference, same method: values read from
   Dahrb2b-react/src/pages/hotels/checkout/** and Excursion.css ~3749-3870 /
   Hotel.css ~4427-4520 / Style.css ~660-790, ~2525-2570, ~4170-4300.

   Scope is `#passenger_details.dahr-ck` - the A2A Details + Payment screen -
   so nothing here can reach insurance or Global Visa, which keep section 24
   and get their own round. Markup changes are two headings only (see the
   CLAUDE.md note); no field name, id, class, handler or payload moved.
   ========================================================================== */

/* --- 28.1 Passenger accordion = React's .hw-passenger--detailsGroupItem ----
   Section 24 aligned this accordion to the car's OLD numbers; section 27 has
   since moved the car onto React's, so A2A follows here.
     item    border 1px #D7D7D7, radius .5rem
     header  padding 1.2rem 2rem, 1.4rem/700
     body    1.6rem
   The row needs (1,4,0) to beat the template's own inline
   `#passengerDetailsAccordion .accordion-item .accordion-collapse > .row`,
   exactly as section 24 explains. */

#passenger_details.dahr-ck .accordion-item {
    border-color: #D7D7D7;
    border-radius: .5rem;
}

#passenger_details.dahr-ck .accordion-item .accordion-button {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
}

#passenger_details.dahr-ck .accordion-item .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid #D7D7D7 !important;
}

#passenger_details.dahr-ck .accordion-item .accordion-collapse > .row {
    /* The template zeroes this row's negative gutters, so the columns' own
       .8rem half-gutter stays inside: .8 + .8 lands the first field at
       React's 1.6rem, the same place the car's `.accordion-body { padding:
       1.6rem }` puts it. */
    padding: 1.6rem .8rem;
}

/* No icon in the accordion header (client, 9-Oct-26) - React's header is the
   text alone. Hidden rather than deleted: four of the five headers that carry
   this span are built from JS template literals (flight template ~2870-3099).
   Insurance uses the same class and is NOT in scope here. */
#passenger_details.dahr-ck .accordion-button--userIcon {
    display: none;
}

/* --- 28.2 Section head above the passenger list ---------------------------
   The plain `hw__text-black hw__text-bold hw__text20` label is now the same
   icon chip + title + divider the car got in 27.1 (.hw-exchk--sectionHead).
   /!\ DORMANT since 14-Oct-26, kept on purpose. Its wrapper WAS the FOURTH
   child of the card - hidden title, hidden date block, Booking Reference,
   section head - but Booking Reference moved to the Payment pane (client), so
   the card now has three blocks and this four-link selector matches nothing.
   That is the right outcome: the section head is now the first VISIBLE block
   and takes section 24's `margin-top: 0` instead, which is what puts it on
   the card's own padding. The rule is left here so that a pull restoring the
   old markup restores the old spacing with it - the same policy section 24
   uses for insurance.
   `.hw__mt-16` is `margin-top: 1.6rem !important` in style.css (~276), hence
   the !important; 2.8rem is React's gap between two sections
   (`.hw-hotelContact--listShow__widget .hw-exchk--sectionHead`). */
#passenger_details.dahr-ck .dahr-ck__cardTtl + .hw__mt-16 + .hw__mt-16 + .hw__mt-16 {
    margin-top: 2.8rem !important;
}

/* --- 28.3 Terms line + buttons = React's .hw-term--condition / .hw-btn -----
   Section 27 pinned these to the car scope while the other modules waited;
   A2A joins now. Insurance and Global Visa still use the stock values. */

#passenger_details.dahr-ck .dahr-ck__terms .dahr-ck__termsRow {
    column-gap: 1rem;
}

#passenger_details.dahr-ck .dahr-ck__terms .dahr-ck__termsTxt {
    font-size: 1.4rem;
    line-height: 1.71429;
    font-weight: 500;
    color: #555;
}

/* React `.hw-btn`: padding .8rem 2rem, radius .5rem, 1.6rem/1.75 from 768px
   = 4.4rem tall, the same height as the inputs beside it. */
#passenger_details.dahr-ck .dahr-ck__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    line-height: 1.75;
}

/* The sidebar Hold / Book Now are the theme's .hw__btn; React's aside CTA is
   the same .hw-btn as the forward one, only full width. */
#passenger_details.dahr-ck .dahr-ck__sideCta .hw__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    line-height: 1.75;
}

/* --- 28.4 Booking confirmed: the download / view button row ---------------
   booking-confirmed.php keeps its three buttons where they are (Download
   Ticket with Fare / without Fare / View Booking Details) - nothing moved and
   no wording changed. They just take React's DOWNLOAD button metrics, which
   is what the hotel's confirmed screen uses for exactly this row
   (.hw-tk--dlRow > div > .hw-btn in Excursion.css ~3947 + ~3957):
   padding 11x14, 14px/600, radius 4px, min 44x160, line-height 1.2.
   `.hw-button--groupButtonsConfirm .col-autoDiv .hw__btn` in style.css is
   (0,3,0), so three classes plus the .dahr-ckf scope take it. */
.dahr-ckf .hw-button--groupButtonsConfirm .col-autoDiv .hw__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    min-width: 16rem;
    padding: 1.1rem 1.4rem;
    border-radius: .4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}


/* ==========================================================================
   29. Checkout dropdown = React's HwPlainSelect / .hw-gsel
       (client, 9-Oct-26) - replaces the select2 dressing in section 20/27.5
   --------------------------------------------------------------------------
   Values are React's, resolved to literals from
   Dahrb2b-react/src/assets/css/Style.css ~668-770 (.hw-gsel*):
     control  min-height 4.4rem, padding 1rem 1.2rem, radius .5rem,
              border .1rem #D7D7D7, 1.4rem/1.5 -> 1.6rem/1.75 from 992px
     menu     top calc(100% + .6rem), padding .6rem, radius .8rem,
              border .1rem #E6E9F0, shadow 0 1.2rem 2.8rem rgba(16,24,40,.14)
     option   padding 1rem 1.2rem, 1.4rem, radius .6rem
     hover    #F3F5F9        selected  #3264FF on rgba(50,100,255,.08), 600
     chevron  2rem #6B7488, rotates 180deg when open

   The markup is built by `dahrCheckoutSelects` in
   assets/js/dahr-checkout-loader.js - no template carries any of it, so this
   block is scoped by construction. The native <select> stays in the DOM in
   its original parent and is hidden the way select2 hides it (1x1 clipped,
   never display:none - a display:none `required` select makes Chrome abort a
   native submit with "not focusable").

   The select2 rules in sections 20 and 27.5 are now dead - select2 is not
   loaded on the front end at all - but they are LEFT in place: if anything
   ever enqueues it, those dropdowns still look right.
   ========================================================================== */

.dahr-ck .dahr-gsel__native,
.dahr-ckv .dahr-gsel__native,
.dahr-gsel-scope .dahr-gsel__native {
    position: absolute !important;
    width: .1rem !important;
    height: .1rem !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
}

.dahr-ck .dahr-gsel,
.dahr-ckv .dahr-gsel,
.dahr-gsel-scope .dahr-gsel {
    position: relative;
    width: 100%;
}

/* The OPEN box is lifted, not just the menu inside it: a z-index on the menu
   alone only orders it against its own siblings, so the fields that come
   later in the row still painted over it (measured - the menu showed through
   "Passport Expiry Date"). Lifting the box puts the whole dropdown above
   them, and it drops back to auto when closed so nothing else is affected. */
.dahr-ck .dahr-gsel.is-open,
.dahr-ckv .dahr-gsel.is-open,
.dahr-gsel-scope .dahr-gsel.is-open {
    z-index: 60;
}

.dahr-ck .dahr-gsel__control,
.dahr-ckv .dahr-gsel__control,
.dahr-gsel-scope .dahr-gsel__control {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    min-height: 4.4rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border: .1rem solid #D7D7D7;
    border-radius: .5rem;
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 400;
    color: #151515;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dahr-ck .dahr-gsel__control:hover,
.dahr-ckv .dahr-gsel__control:hover,
.dahr-gsel-scope .dahr-gsel__control:hover {
    border-color: #9AA3B5;
}

.dahr-ck .dahr-gsel.is-open .dahr-gsel__control,
.dahr-ck .dahr-gsel__control:focus-visible,
.dahr-ckv .dahr-gsel.is-open .dahr-gsel__control,
.dahr-ckv .dahr-gsel__control:focus-visible,
.dahr-gsel-scope .dahr-gsel.is-open .dahr-gsel__control,
.dahr-gsel-scope .dahr-gsel__control:focus-visible {
    border-color: var(--ck-brand);
    outline: none;
}

.dahr-ck .dahr-gsel__value,
.dahr-ckv .dahr-gsel__value,
.dahr-gsel-scope .dahr-gsel__value {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dahr-ck .dahr-gsel__value.is-placeholder,
.dahr-ckv .dahr-gsel__value.is-placeholder,
.dahr-gsel-scope .dahr-gsel__value.is-placeholder {
    color: #98A2B6;
}

.dahr-ck .dahr-gsel__chevron,
.dahr-ckv .dahr-gsel__chevron,
.dahr-gsel-scope .dahr-gsel__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #6B7488;
    transition: transform .2s ease;
}

.dahr-ck .dahr-gsel__chevron svg,
.dahr-ckv .dahr-gsel__chevron svg,
.dahr-gsel-scope .dahr-gsel__chevron svg {
    width: 2rem;
    height: 2rem;
}

.dahr-ck .dahr-gsel.is-open .dahr-gsel__chevron,
.dahr-ckv .dahr-gsel.is-open .dahr-gsel__chevron,
.dahr-gsel-scope .dahr-gsel.is-open .dahr-gsel__chevron {
    transform: rotate(180deg);
}

/* Disabled (the infant parent-name row keeps its selects disabled). */
.dahr-ck .dahr-gsel.is-disabled .dahr-gsel__control,
.dahr-ckv .dahr-gsel.is-disabled .dahr-gsel__control,
.dahr-gsel-scope .dahr-gsel.is-disabled .dahr-gsel__control {
    background: #F3F5F9;
    color: #98A2B6;
    cursor: not-allowed;
}

/* The invalid state the pages set on the NATIVE select (`.hw__required-line`)
   is mirrored onto the control. This is the reason the generated box is
   inserted as the select's next SIBLING and the select is never re-parented. */
.dahr-ck .dahr-gsel.is-invalid .dahr-gsel__control,
.dahr-ckv .dahr-gsel.is-invalid .dahr-gsel__control,
.dahr-ck .hw__required-line + .dahr-gsel .dahr-gsel__control,
.dahr-ckv .hw__required-line + .dahr-gsel .dahr-gsel__control,
.dahr-gsel-scope .dahr-gsel.is-invalid .dahr-gsel__control,
.dahr-gsel-scope .hw__required-line + .dahr-gsel .dahr-gsel__control {
    border-color: #E5484D;
}

/* Menu ------------------------------------------------------------------- */

.dahr-ck .dahr-gsel__menu,
.dahr-ckv .dahr-gsel__menu,
.dahr-gsel-scope .dahr-gsel__menu {
    display: none;
    position: absolute;
    top: calc(100% + .6rem);
    left: 0;
    right: 0;
    z-index: 60;
    padding: .6rem;
    background: #fff;
    border: .1rem solid #E6E9F0;
    border-radius: .8rem;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 24, 40, .14);
    animation: dahrGselIn .14s ease;
}

.dahr-ck .dahr-gsel.is-open .dahr-gsel__menu,
.dahr-ckv .dahr-gsel.is-open .dahr-gsel__menu,
.dahr-gsel-scope .dahr-gsel.is-open .dahr-gsel__menu {
    display: block;
}

.dahr-ck .dahr-gsel.is-above .dahr-gsel__menu,
.dahr-ckv .dahr-gsel.is-above .dahr-gsel__menu,
.dahr-gsel-scope .dahr-gsel.is-above .dahr-gsel__menu {
    top: auto;
    bottom: calc(100% + .6rem);
}

@keyframes dahrGselIn {
    from { opacity: 0; transform: translateY(-.4rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.dahr-ck .dahr-gsel__list,
.dahr-ckv .dahr-gsel__list,
.dahr-gsel-scope .dahr-gsel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 24rem;
    overflow-y: auto;
}

.dahr-ck .dahr-gsel__option,
.dahr-ckv .dahr-gsel__option,
.dahr-gsel-scope .dahr-gsel__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #1B2439;
    border-radius: .6rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.dahr-ck .dahr-gsel__option:hover,
.dahr-ck .dahr-gsel__option.is-active,
.dahr-ckv .dahr-gsel__option:hover,
.dahr-ckv .dahr-gsel__option.is-active,
.dahr-gsel-scope .dahr-gsel__option:hover,
.dahr-gsel-scope .dahr-gsel__option.is-active {
    background: #F3F5F9;
}

.dahr-ck .dahr-gsel__option.is-selected,
.dahr-ckv .dahr-gsel__option.is-selected,
.dahr-gsel-scope .dahr-gsel__option.is-selected {
    color: var(--ck-brand);
    font-weight: 600;
    background: rgba(50, 100, 255, .08);
}

.dahr-ck .dahr-gsel__option.is-disabled,
.dahr-ckv .dahr-gsel__option.is-disabled,
.dahr-gsel-scope .dahr-gsel__option.is-disabled {
    color: #98A2B6;
    cursor: not-allowed;
}

.dahr-ck .dahr-gsel__tick,
.dahr-ckv .dahr-gsel__tick,
.dahr-gsel-scope .dahr-gsel__tick {
    display: inline-flex;
    flex: none;
    color: var(--ck-brand);
}

.dahr-ck .dahr-gsel__tick svg,
.dahr-ckv .dahr-gsel__tick svg,
.dahr-gsel-scope .dahr-gsel__tick svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* Search box, shown from 6 options up (nationality / country lists). */
.dahr-ck .dahr-gsel__searchWrap,
.dahr-ckv .dahr-gsel__searchWrap,
.dahr-gsel-scope .dahr-gsel__searchWrap {
    padding: 0 0 .6rem;
}

.dahr-ck .dahr-gsel__search,
.dahr-ckv .dahr-gsel__search,
.dahr-gsel-scope .dahr-gsel__search {
    box-sizing: border-box;
    width: 100%;
    min-height: 4rem;
    padding: .8rem 1.2rem;
    border: .1rem solid #D7D7D7;
    border-radius: .5rem;
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #151515;
    background: #fff;
}

.dahr-ck .dahr-gsel__search:focus,
.dahr-ckv .dahr-gsel__search:focus,
.dahr-gsel-scope .dahr-gsel__search:focus {
    border-color: var(--ck-brand);
    outline: none;
}

@media screen and (min-width: 992px) {

    /* React bumps .hw-gsel--control to 1.6rem from 992px, exactly like the
       inputs; the menu rows stay 1.4rem there. */
    .dahr-ck .dahr-gsel__control,
    .dahr-ckv .dahr-gsel__control,
    .dahr-gsel-scope .dahr-gsel__control {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}


/* ==========================================================================
   30. A2A booking confirmed: two columns like the car's (client, 9-Oct-26)
   --------------------------------------------------------------------------
   "red highlight ... right sidebar box ma move, green highlight ... left
   sidebar box ma, jem car na confirm booking page ma che emj."
   booking-confirmed.php was ONE full-width card; it is now the same
   `.dahr-ck__main` grid every other screen uses - passenger table on the
   left, flight summary + its download / view buttons on the right.

   The two blocks were moved VERBATIM in the markup (verified: all 39 PHP
   blocks byte-identical, every href, class and the ownership gate unchanged,
   div/aside balanced). Everything below is the chrome the move needs.
   ========================================================================== */

/* The grid itself comes from section 2 via the `.dahr-ck__main` class that is
   still on the element; only the alignment is restated. */
.dahr-ckf .dahr-ckf__confirmMain {
    align-items: start;
}

@media screen and (min-width: 992px) {
    .dahr-ckf .dahr-ckf__confirmMain > .dahr-ck__side {
        position: sticky;
        top: 2rem;
    }
}

/* Left card -------------------------------------------------------------- */

.dahr-ckf .dahr-ckf__paxTtl {
    margin-bottom: 1.4rem;
}

/* The table carried `hw__mt-32` from the old centred layout; inside a card
   that already has 2.2rem of padding it read as a gap under the title.
   `.hw__mt-32` is `margin-top: 3.2rem !important` in style.css. */
.dahr-ckf .dahr-ck__content .table-responsive.hw__mt-32 {
    margin-top: 0 !important;
}

/* Right card ------------------------------------------------------------- */

/* Same reason: the route header opened with `hw__mt-32` when it was the first
   thing in a tall centred card. */
.dahr-ckf .dahr-ckf__sideCard > .d-flex.hw__mt-32:first-child {
    margin-top: 0 !important;
}

.dahr-ckf .dahr-ckf__sideCard .hw__text20 {
    font-size: 1.8rem;
    line-height: 1.3;
}

/* Keep the flight timeline readable at 45rem, the way section 26 pins the
   Details step's summary columns. */
.dahr-ckf .dahr-ckf__sideCard .hw__bf-list--time > .d-flex > div:not(.hw-line-section) {
    min-width: 9.5rem;
}

/* Download / view actions card, LEFT column (client, 9-Oct-26) -------------
   Same shape as the car confirmed page's Download Receipt row (27.6): label
   on the left, actions on the right, in their own card under the passenger
   table. The three buttons keep React's download metrics from 28.4. */

.dahr-ckf .dahr-ckf__dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.dahr-ckf .dahr-ckf__dlTtl {
    flex: none;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    white-space: nowrap;
}

.dahr-ckf .dahr-ckf__dlAct {
    flex: 0 1 auto;
    min-width: 0;
}

/* `.hw-button--groupButtonsConfirm` is a centred 86rem row built for the old
   full-width card; here it is just the button group. `.hw__mt-32` is
   `margin-top: 3.2rem !important` in style.css. */
.dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm {
    width: auto;
    max-width: none;
    margin: 0 !important;
    column-gap: 1rem;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm .col-autoDiv {
    flex: 0 0 auto;
    width: auto;
}

@media screen and (max-width: 767px) {

    .dahr-ckf .dahr-ckf__dl {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm {
        flex-direction: column;
    }

    .dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm .col-autoDiv,
    .dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm .col-autoDiv .hw__btn {
        width: 100%;
    }
}

/* The Persons meta row sits between the flight timeline and the Price
   Breakup, so it needs the same 2rem/divider rhythm the breakup heading has.
   `.dahr-ck__meta*` already reach this page - its wrapper is
   `<div class="dahr-ck dahr-ckf">` - so only the spacing is set here. */
.dahr-ckf .dahr-ckf__sideMeta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}

.dahr-ckf .dahr-ckf__sideMeta + .dahr-ckc__breakupTtl {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
}


/* --- A2A confirmed: the last gaps against the car page (client, 9-Oct-26) --

   1. Booking id in the hero. `.hw-bookId` is a styled chip in style.css, so
      the car's reset is reused verbatim - just extended to this page. */
.dahr-ckf .hw-bookId {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    background: none;
    padding: 0;
    align-self: end;
    white-space: nowrap;
}

/* 2. Status column: the car prints the status as plain text; A2A wrapped it in
      a green/red `.hw__badge`. The badge chrome is stripped so the two tables
      read the same. The markup keeps its classes, so a status change still
      swaps hw__badge-confirm / hw__badge-cancel underneath. */
.dahr-ckf .hw-table--reDesign tbody td .hw__badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* 3. Download card: the label stays left and the BUTTON GROUP stays right,
      the way the car's Download Receipt row reads. Three long labels do not
      fit beside the label on every width, so when the row wraps the group
      keeps its right edge instead of jumping to the left. */
.dahr-ckf .dahr-ckf__dlAct {
    margin-left: auto;
}

.dahr-ckf .dahr-ckf__dlAct .hw-button--groupButtonsConfirm {
    justify-content: flex-end;
}

/* 4. One divider before Price Breakup, like the car. The Persons row had a
      rule of its own as well, which read as a double line under the flight
      timeline. */
.dahr-ckf .dahr-ckf__sideMeta {
    border-top: 0;
    padding-top: 0;
}

/* 5. "Book Another Ticket" carried `hw__mt-32` from the old centred layout;
      inside the column it only needs the grid's own rhythm. */
.dahr-ckf .dahr-ck__content > .d-flex.hw__mt-32 {
    margin-top: .4rem !important;
}


/* ==========================================================================
   31. A2A booking confirmed == the CAR booking confirmed, measured
       (client, 9-Oct-26) - CSS ONLY
   --------------------------------------------------------------------------
   The client said the page still did not match, so instead of comparing by
   eye both pages were rendered in ONE harness (the real bootstrap +
   style.css + car-checkout.css + sic-booking-confirmed.php's own inline
   <style>, with the real extracted markup of each) and their computed styles
   were diffed element by element. Every value below is the CAR's, read off
   that page - not a guess.

       element            car              A2A was
       grid gap           12px             20px
       grid margin-top    -62px +24 pad    -32px, no pad
       hero padding       24px 0 80px      18px 0 54px
       left card padding  32px             22px
       card title         22px / 1.4 / mb 16   20px / 1.75 / mb 14
       thead th padding   10px 20px        0 12px 12px 20px
       tbody td padding   10px 20px        14px 12px 14px 20px
       table border       1px #CCC r5      1px rgba(18,24,38,.1)
       aside card padding 20px             22px
       price block inset  +24px each side  0
       Price Breakup gap  20px             16px

   Already identical and left alone: the card background / radius / shadow,
   the 450px sidebar, `.hw__td-link` icon button (38x38, r8, #EEF5FF,
   #3264FF), the th colour / size / tracking / uppercase, the td colour and
   size, the price rows (6px 0, 12px gap, 16px) and the Total row.
   ========================================================================== */

/* 1. Grid: the car's gap and the same overlap onto the hero. The car gets
      there with `margin-top: -62px` plus 24px of its own top padding, i.e.
      the card sits 38px above the hero's bottom edge; this page has no
      padding on the grid, so one value does it. */
.dahr-ckf .dahr-ckf__confirmMain {
    gap: 1.2rem;
    margin-top: -3.8rem;
}

/* 2. Hero band: VERTICAL padding only.
      ⚠️ This used to be the shorthand `padding: 2.4rem 0 8rem`, which also
      zeroed padding-left/right - and those two are what section 1 uses to pad
      the bled band's content back in:
          margin-l/r  = calc(50% - var(--dahr-vw)/2)      (reach the edges)
          padding-l/r = calc(var(--dahr-vw)/2 - 50% + --ck-gutter)
      Killing them left the band full width with ZERO gutter, so `Back to
      search`, the title and the booking id sat on the viewport edge while the
      cards below were inset. Longhand here so the bleed keeps working; the
      content then lands on the container's content edge, i.e. in line with the
      cards, which is what the car page looks like.
      Same reason there is no `margin: 0` here: without the bleed the band
      stops at the container and no longer reaches the window edges. */
.dahr-ckf .dahr-ck__hero--confirmed {
    padding-top: 2.4rem !important;
    padding-bottom: 8rem !important;
}

/* 3. Left column cards. The aside keeps the car's own 2rem. */
.dahr-ckf .dahr-ck__content > .dahr-ck__card {
    padding: 3.2rem;
}

.dahr-ckf .dahr-ckf__sideCard {
    padding: 2rem;
}

/* 4. Card title: the car's is `hw__text20`, which style.css renders at 2.2rem
      with a 1.4 line-height. */
.dahr-ckf .dahr-ckf__paxTtl {
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 1.6rem;
}

/* 5. Table cells. The car pads every cell 1rem 2rem; this table had the
      asymmetric padding section 12 gave it. */
.dahr-ckf .hw-table--reDesign thead th,
.dahr-ckf .hw-table--reDesign tbody td {
    padding: 1rem 2rem;
}

/* 6. The table's own outline. The car draws it on the <table>
      (`.hw-table--defaultDiv table` in the page's inline <style>): 1px #CCC,
      radius .5rem, separate borders. This one had the same shape in a
      different tone. */
.dahr-ckf .hw-table--reDesign {
    border-color: #CCC;
}

/* ⚠️ `body .hw-table--reDesign tbody tr td { border-bottom: 1px solid
   rgba(18,24,38,.1) !important }` in style.css beats any plain rule - which is
   also why section 12's `--ck-line` divider never actually applied to this
   table. `body` + the scope + `tr` match its shape and win. */
body .dahr-ckf .hw-table--reDesign tbody tr td {
    border-bottom-color: #CCC !important;
}

/* 7. Sidebar price block. In the car it is `.hw-after--bookingWidget
      .ticketsInner`, which adds 24px of side padding INSIDE the aside, so the
      divider and the money rows are inset further than the rows above them.
      Reproduced here on the two elements that make up the block. */
.dahr-ckf .dahr-ckf__sideCard .dahr-ckc__breakupTtl,
.dahr-ckf .dahr-ckf__sideCard .hw-passenger--fareSummary__table {
    margin-left: 2.4rem;
    margin-right: 2.4rem;
}

/* 8. ...and the car's 2rem gap above it. Section 30 had pulled this to 1.6rem
      to compensate for the Persons row's own rule, which is gone. */
.dahr-ckf .dahr-ckf__sideMeta + .dahr-ckc__breakupTtl {
    margin-top: 2rem;
    padding-top: 2rem;
}


/* ==========================================================================
   32. Insurance checkout <-> React HOTEL checkout parity (client, 9-Oct-26)
   --------------------------------------------------------------------------
   Third module of the "ek pachi ek" pass that sections 27 (car transfer) and
   28 (A2A flight) started. Same reference, same values - see §38/§39 in
   CLAUDE.md for where each number comes from.

   ⚠️ SCOPE, so the car and A2A cannot move:
   every selector is pinned to an id that exists ONLY in
   customer-submenu-insurance-template.php (`#passengerFieldsContainer`,
   `#insurance-checkout`, `#insurance-payment`) or to
   `.div-with-summary.dahr-ck` - the excursion bookings template also uses
   `.div-with-summary`, but WITHOUT `dahr-ck`, so the two-class selector is
   insurance-only. Section 24 still owns the insurance accordion's base;
   these rules override it the same way section 28 does for A2A, and section
   24's A2A half is untouched.
   ========================================================================== */

/* --- 32.1 Passenger accordion = React's .hw-passenger--detailsGroupItem ----
   item border 1px #D7D7D7 / radius .5rem, header 1.2rem 2rem at 1.4rem with
   the divider under it, body 1.6rem. The row needs (1,4,0) to beat the
   template's own inline `#passengerFieldsContainer .accordion-item
   .accordion-collapse > .row`, exactly as section 24 explains. */

.div-with-summary.dahr-ck #passengerFieldsContainer .accordion-item {
    border-color: #D7D7D7;
    border-radius: .5rem;
}

.div-with-summary.dahr-ck #passengerFieldsContainer .accordion-item .accordion-button {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
}

.div-with-summary.dahr-ck #passengerFieldsContainer .accordion-item .accordion-button:not(.collapsed) {
    border-bottom: .1rem solid #D7D7D7 !important;
}

.div-with-summary.dahr-ck #passengerFieldsContainer .accordion-item .accordion-collapse > .row {
    /* The template zeroes this row's negative gutters, so the columns' own
       .8rem half-gutter stays inside: .8 + .8 lands the first field at
       React's 1.6rem, where the car's `.accordion-body { padding: 1.6rem }`
       puts it. */
    padding: 1.6rem .8rem;
}

/* No icon in the accordion header - React's header is the text alone. Hidden
   rather than deleted because every one of these headers is built from the
   `createFields()` template literal (~2890). A2A uses the same class name and
   is NOT in scope here. */
.div-with-summary.dahr-ck #passengerFieldsContainer .accordion-button--userIcon {
    display: none;
}

/* --- 32.2 Section head above the passenger list ---------------------------
   The plain `hw__textdark hw__text20 hw__text-bold` label is now the icon
   chip + title + divider of 27.1. Its wrapper is the `.hw__grid` that follows
   the Booking Reference block, and 2.8rem is React's gap between two
   sections. */
.div-with-summary.dahr-ck #insurance-checkout > .hw__grid.hw__bsnull.hw__bnull {
    margin-top: 2.8rem;
}

/* --- 32.3 Terms line + buttons = React's .hw-term--condition / .hw-btn ----- */

#insurance-payment .dahr-ck__terms .dahr-ck__termsRow {
    column-gap: 1rem;
}

#insurance-payment .dahr-ck__terms .dahr-ck__termsTxt {
    font-size: 1.4rem;
    line-height: 1.71429;
    font-weight: 500;
    color: #555;
}

/* React `.hw-btn`: padding .8rem 2rem, radius .5rem, 1.6rem/1.75 from 768px
   = 4.4rem tall, the same height as the inputs beside it. */
.div-with-summary.dahr-ck .dahr-ck__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    line-height: 1.75;
}

/* The sidebar purchase button is the theme's .hw__btn; React's aside CTA is
   the same .hw-btn as the forward one, only full width. */
.div-with-summary.dahr-ck .dahr-ck__sideCta .hw__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    line-height: 1.75;
}

/* --- 32.4 Step 1 "Continue" in the Plan card's sticky footer --------------
   (client, 9-Oct-26) The button moved out of the sidebar into
   `#insurance-tab`'s `.dahr-ck__cardFoot`, so the Plan step ends the way
   every other step does. It keeps all of its classes - including
   `hw__bnt-full` and `hw__mb-16`, which are layout-only but are left on in
   case anything ever selects them - so the footer just undoes them: React's
   CTA is auto-width, right-aligned (the footer is `justify-content:
   flex-end`) with the same 22rem floor section 19 gives the other modules.
   `.hw__mb-16` is `margin-bottom: 1.6rem !important` in style.css. */
.div-with-summary.dahr-ck #insurance-tab .dahr-ck__cardFoot .continue {
    width: auto;
    min-width: 22rem;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   33. Insurance CONFIRMED screen == the car / A2A confirmed pages
       (client, 9-Oct-26) - the values are the ones section 31 measured off
       sic-booking-confirmed.php, reused here.
   --------------------------------------------------------------------------
   The screen is rendered by TWO JS template literals that replace
   `.hw__page-inner` (the wallet path ~3745 and `showInsuranceConfirmation()`
   ~4471); both were given the same shape - a Traveler details card, an
   actions card under it and the "Get Another Insurance" link last.

   ⚠️ `id="insurance-passengers-table"` MOVED UP from the card to the column
   so the three `#insurance-passengers-table .generate-invoice` selectors
   (~3785, ~3960, ~4515) keep matching now that the button lives in a sibling
   card. Nothing in CSS targets that id, so moving it was free.

   ⚠️ NO SIDEBAR, on purpose: the renderer replaces the whole page body, so
   the Traveller Summary is gone by then and there is no plan/price data in
   scope to rebuild one from. `.dahr-ck__main--full` is kept and the column
   stays single. Carrying the summary across would be a behaviour change, not
   styling - flagged to the client instead.

   Scope is the id, which exists only in this template, so the car and A2A
   confirmed pages cannot move.
   ========================================================================== */

/* Card chrome + title, the car's numbers (section 31). */
#insurance-passengers-table > .dahr-ck__card {
    padding: 3.2rem;
}

#insurance-passengers-table .dahr-ck__cardTtl {
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 1.6rem;
}

/* Table: the car pads every cell 1rem 2rem and draws the grid in #CCC. */
#insurance-passengers-table .passenger-details.table-responsive {
    margin-top: 0 !important;
}

#insurance-passengers-table .hw-table--reDesign thead th,
#insurance-passengers-table .hw-table--reDesign tbody td {
    padding: 1rem 2rem;
}

#insurance-passengers-table .hw-table--reDesign {
    border-color: #CCC;
}

/* ⚠️ `body .hw-table--reDesign tbody tr td` in style.css carries
   `border-bottom: ... !important`, so this needs `body` + `tr` + !important to
   take it - the same trap section 31 hit on the A2A page. */
body #insurance-passengers-table .hw-table--reDesign tbody tr td {
    border-bottom-color: #CCC !important;
}

/* Actions card: label left, buttons right - the car's Download Receipt row. */
#insurance-passengers-table .dahr-cki__dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
}

#insurance-passengers-table .dahr-cki__dlTtl {
    flex: none;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    white-space: nowrap;
}

#insurance-passengers-table .dahr-cki__dlAct {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

/* `.dahr-ck__actions` is a `margin-top: 2rem` row elsewhere; inside the card
   it is just the button group. */
#insurance-passengers-table .dahr-cki__dlAct .dahr-ck__actions {
    margin: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "Get Another Insurance" is the last item in the column, below both cards.
   `.dahr-ck__content`'s own 2rem row-gap already spaces it. */
#insurance-passengers-table > .another-insurance-link {
    align-self: flex-start;
    margin-top: -.4rem;
}

/* Booking id in the hero, the car's reset. The marker class keeps this off
   every other `.hw-bookId` on the site. */
.dahr-ck .dahr-cki__bookId {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    background: none;
    padding: 0;
    align-self: end;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {

    #insurance-passengers-table > .dahr-ck__card {
        padding: 2rem 1.6rem;
    }

    #insurance-passengers-table .dahr-cki__dl {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    #insurance-passengers-table .dahr-cki__dlAct,
    #insurance-passengers-table .dahr-cki__dlAct .dahr-ck__actions {
        margin-left: 0;
        width: 100%;
    }

    #insurance-passengers-table .dahr-cki__dlAct .dahr-ck__btn {
        flex: 1;
    }
}


/* ==========================================================================
   34. Global Visa checkout <-> React HOTEL checkout parity (client, 9-Oct-26)
   --------------------------------------------------------------------------
   Fourth and last module of the "ek pachi ek" pass (27 car transfer, 28 A2A
   flight, 32 insurance). Same reference and the same values - see CLAUDE.md
   §38/§39/§41 for where each number comes from.

   ⚠️ **`.dahr-ckv` is NOT inside a `.dahr-ck`.** The Global Visa root is
   `<div class="hw__page-inner-bg dahr-ckv">` (template ~569), so section 27's
   `.dahr-ck .dahr-ck__secHead` / `.dahr-ck .dahr-ck__label` rules never reach
   this page - they are repeated here rather than widened, which also keeps
   the car, A2A and insurance scopes untouched. The dropdown (section 29) and
   the input metrics (section 23) already list `.dahr-ckv` explicitly, so
   those needed nothing.
   ========================================================================== */

/* --- 34.1 Section head: icon chip + title + divider -----------------------
   React `.hw-exchk--sectionHead`. On this page the CONTENT cards carry it
   ("Select Country & Date", "Documents to be uploaded", "Details"); "Payment"
   and "Confirm Your Details" keep a plain `.dahr-ck__cardTtl`, exactly as
   React keeps `.hw-exchk--panelTitle` for its Payment panel. */

.dahr-ckv .dahr-ck__secHead {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: .1rem solid #ECEEF3;
}

.dahr-ckv .dahr-ck__secIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    flex: none;
    border-radius: 1rem;
    background: #EBEFFF;
    color: var(--ck-brand);
}

.dahr-ckv .dahr-ck__secIcon svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--ck-brand);
}

.dahr-ckv .dahr-ck__secTtl {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    letter-spacing: -.01em;
}

/* --- 34.2 Field label (Booking Reference) --------------------------------- */

.dahr-ckv .dahr-ck__label {
    display: block;
    margin-bottom: .6rem;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ck-ink);
}

.dahr-ckv .dahr-ck__label .dahr-ck__opt {
    font-weight: 500;
    color: #98A2B6;
}

/* --- 34.3 The three upload-group titles ----------------------------------
   They sit UNDER a card title, so at `.dahr-ck__blockTtl`'s 1.7rem they read
   as loud as the 1.8rem head above them. 1.5rem/700 is the same step the
   other modules' in-card labels use (`.dahr-ckc__dlTtl`). */
.dahr-ckv .dahr-ckv__docGroup .dahr-ck__blockTtl {
    font-size: 1.5rem;
    line-height: 1.3;
}

.dahr-ckv .dahr-ckv__docGroup + .dahr-ckv__docGroup {
    margin-top: 2.4rem;
}

/* --- 34.4 Terms line + buttons = React's .hw-term--condition / .hw-btn ----
   The row stays CENTRED here - that is section 14's choice for this page and
   the client has not asked to change it; only the type is brought in line. */

.dahr-ckv .dahr-ck__terms .dahr-ck__termsRow {
    column-gap: 1rem;
}

.dahr-ckv .dahr-ck__terms .dahr-ck__termsTxt {
    font-size: 1.4rem;
    line-height: 1.71429;
    font-weight: 500;
    color: #555;
}

/* React `.hw-btn`: padding .8rem 2rem, radius .5rem, 1.6rem/1.75 from 768px
   = 4.4rem tall, the same height as the inputs beside it. */
.dahr-ckv .dahr-ck__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    line-height: 1.75;
}

/* The sidebar Pay Now is the theme's .hw__btn; React's aside CTA is the same
   .hw-btn as the forward one, only full width. */
.dahr-ckv .dahr-ck__sideCta .hw__btn,
.dahr-ckv .hw-pay--nowBtn .hw__btn {
    min-height: 4.4rem;
    padding: .8rem 2rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    line-height: 1.75;
}

/* --- 34.5 Hero background = the plain gradient, like every other module ----
   (client, 9-Oct-26) This hero carried a map photo behind the gradient - a
   `::before` at `opacity: .22` fed by the inline `--ckv-hero-img` custom
   property (section 14, added 6-Oct-26). Every other checkout hero is the
   gradient alone, so the backdrop is switched off here.

   HIDDEN, not deleted: the PHP still computes `$ckv_hero_img` through
   content_url() and still prints the custom property on the root, so putting
   the photo back is removing this one rule. The old `::before` declarations
   are kept in section 14 and simply never paint.

   With the photo gone the 9rem bottom padding - chosen to show more of it -
   left a tall empty navy band, so it drops to the 8rem the base
   `.dahr-ck__hero` rule gives car transfer, A2A and insurance (measured: band
   182px tall on all four, card overlap 32px). NOT React's 5.4rem: this file
   raised that figure for every module long ago and Global Visa has to match
   the other three, not the reference in isolation. */
.dahr-ckv .dahr-ckv__hero::before {
    content: none;
}

.dahr-ckv .dahr-ckv__hero {
    padding-bottom: 8rem;
}

@media screen and (max-width: 767px) {
    .dahr-ckv .dahr-ckv__hero {
        padding-bottom: 8rem;
    }
}


/* --- 34.6 "Confirm Your Details" is a collapsible section ------------------
   (client, 9-Oct-26) Ported from React's `.hw-exchk--sectionHead__toggle`
   (Hotel.css ~4462-4495), the control the hotel checkout uses for
   "Guest details" / "Contact details". The card also MOVED above Payment.

   The head is a real <button type="button">, not React's
   `<div role="button">`, so Enter/Space and focus come for free - which is
   why these rules have to strip the UA button chrome before section 34.1's
   `.dahr-ck__secHead` flex layout can apply. `width: 100%` + `text-align:
   left` are what keep it looking like the three static section heads on
   steps 1 and 2.

   ⚠️ The chevron must NOT be wrapped in `.dahr-ck__secToggle` with a
   `margin-left: auto` on a CHILD: the head is the flex container, so the
   auto margin goes on the chevron itself. */

.dahr-ckv .dahr-ck__secHead--toggle {
    width: 100%;
    padding: 0 0 0;
    border: 0;
    /* The divider belongs to the OPEN state only (client, 14-Oct-26): with the
       section collapsed there is nothing under the line, so it read as a stray
       rule across the card.
       /!\ TRANSPARENT, not `border-bottom: 0` - the 1px stays in the box, so
       the head does not jump a pixel when it opens, and this also has to beat
       the BASE `.dahr-ckv .dahr-ck__secHead` rule above, which sets the same
       border at the same (0,2,0) specificity and would otherwise draw it. */
    border-bottom: .1rem solid transparent;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    /* React: collapsed head has NO bottom margin, open head has 2rem. */
    margin-bottom: 0;
    transition: margin-bottom .2s ease;
}

.dahr-ckv .dahr-ck__secHead--toggle.is-open {
    border-bottom-color: #ECEEF3;
    margin-bottom: 2rem;
}

.dahr-ckv .dahr-ck__secHead--toggle:focus-visible {
    outline: .2rem solid var(--ck-brand);
    outline-offset: .2rem;
}

.dahr-ckv .dahr-ck__secChevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: none;
    color: var(--ck-ink);
    transition: transform .25s ease;
}

.dahr-ckv .dahr-ck__secChevron svg {
    width: 2rem;
    height: 2rem;
}

.dahr-ckv .dahr-ck__secHead--toggle.is-open .dahr-ck__secChevron {
    transform: rotate(180deg);
}

/* The body. `.confirm-details-items` was referenced by nothing - no CSS, no
   JS - so it doubles as the collapse target instead of a new wrapper div. */
.dahr-ckv .dahr-ckv__confirmBody {
    display: none;
}

.dahr-ckv .dahr-ckv__confirmBody.is-open {
    display: block;
}

/* The last group inside the body carries hw__mb-24; with the body collapsed
   or open that trailing space is the card's padding's job. */
.dahr-ckv .dahr-ckv__confirmBody > .confirm-details-item:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   35. Car transfer Pickup / Drop Location dropdown (client, 9-Oct-26)
       "Option B - icon chip + two lines", chosen from three mockups.
   --------------------------------------------------------------------------
   This restyles GOOGLE'S OWN autocomplete panel (`.pac-container`), the one
   `new google.maps.places.Autocomplete()` appends to <body>. The markup is
   Google's and we never touch it:

       .pac-container.pac-logo
         .pac-item
           span.pac-icon.pac-icon-marker
           span.pac-item-query  > span.pac-matched
           span                 (the region, e.g. "Abu Dhabi - United Arab Emirates")

   One grid turns that into the chip + two lines: the icon spans both rows,
   the query is row 1 and the region row 2. No markup change, no change to
   selection - `place_changed`, the lat/lng writes and the bounds /
   strictBounds rules all keep working exactly as they do today.

   SCOPE: `html.dahr-pac-car`. The panel is a BODY child, so it is shared with
   any module that ever adds Places; today all 8 Autocomplete instances in the
   theme are in customer-submenu-car-transfer-template.php, and that template
   is the only thing that sets the class. A future module keeps Google's
   default look until it opts in.

   SPECIFICITY IS LOAD-BEARING, not tidiness. The Maps API injects its own
   <style> when it loads, which is AFTER this file, so a bare `.pac-item` rule
   of ours would LOSE the tie on source order. Every selector here is prefixed
   with the scope class to out-specify Google's. Do not "simplify" them back
   to the bare class.

   /!\ LITERAL COLOURS, NOT `var(--ck-*)`. The --ck tokens are declared on
   `.dahr-ck, .dahr-ckc, .dahr-ckv, .dahr-ckvc` (top of this file), and
   .pac-container is a BODY child outside every one of them, so a var() here
   resolves to nothing and the text falls back to Google's #999 grey. Caught
   in test. Values are the same ones those tokens hold.
   ========================================================================== */

/* --- 35.1 The panel ------------------------------------------------------- */

html.dahr-pac-car .pac-container {
    /* Google sets `top` inline, so this is what opens the 8px gap under the
       field without touching its positioning. */
    margin-top: .8rem;
    padding: .6rem;
    border: .1rem solid #E6E9F0;
    border-radius: .8rem;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 24, 40, .10);
    background: #fff;
    font-family: inherit;              /* Google hardcodes Arial */
}

/* "Powered by Google" is REQUIRED by the Places terms - it is only moved into
   a quiet footer, never hidden. Google draws it as .pac-logo::after. */
html.dahr-pac-car .pac-container.pac-logo::after {
    height: 3rem;
    margin: .6rem -.6rem -.6rem;
    padding: 0 1.4rem;
    border-top: .1rem solid #F1F3F7;
    background-color: #FCFCFD;
    background-position: right 1.4rem center;
}

/* --- 35.2 A row = 36px chip + two lines ----------------------------------- */

html.dahr-pac-car .pac-container .pac-item {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    column-gap: 1.2rem;
    align-items: center;
    padding: .9rem 1.2rem;
    border-top: 0;                     /* Google draws a hairline per row */
    border-radius: .8rem;
    line-height: normal;
    white-space: normal;               /* the two cells clip, not the row */
    cursor: pointer;
}

html.dahr-pac-car .pac-container .pac-item:hover,
html.dahr-pac-car .pac-container .pac-item-selected,
html.dahr-pac-car .pac-container .pac-item-selected:hover {
    background-color: rgba(50, 100, 255, .08);
}

/* The chip. Google's .pac-icon is a 15x20 sprite slice; it becomes the chip
   and spans both text rows. The pin is inlined so there is no extra request
   and no dependency on Google's sprite staying where it is. */
html.dahr-pac-car .pac-container .pac-icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0;
    border-radius: 1rem;
    background-color: #EBEFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233264FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8rem 1.8rem;
}

html.dahr-pac-car .pac-container .pac-item:hover .pac-icon,
html.dahr-pac-car .pac-container .pac-item-selected .pac-icon {
    background-color: #3264FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

/* Line 1 - the place name. */
html.dahr-pac-car .pac-container .pac-item-query {
    grid-column: 2;
    padding-right: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0F294D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Line 2 - the region. `.pac-item-query ~ span` and NOT `:last-child`: a
   prediction with no region would otherwise hand the small grey style to the
   name itself. */
html.dahr-pac-car .pac-container .pac-item-query ~ span {
    grid-column: 2;
    margin-top: .1rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.4;
    color: #5A6B85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The typed letters. Google already bolds these; they also take brand blue. */
html.dahr-pac-car .pac-container .pac-matched {
    font-weight: 700;
    color: #3264FF;
}

/* --- 35.3 Airports get a plane ------------------------------------------- */
/* `.dahr-pac--air` is added by the car transfer template's own observer - see
   the comment there. Google exposes no place type on the DOM, so the class is
   matched off the name; it is COSMETIC ONLY and the worst case is a pin. */

html.dahr-pac-car .pac-container .pac-item.dahr-pac--air .pac-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233264FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 19.5 12 21l1.5-1.5M3 13.5l9-2 9 2M12 11.5V4.8a1.3 1.3 0 0 1 2.6 0v6M7 16.5l5-1.2 5 1.2'/%3E%3C/svg%3E");
}

html.dahr-pac-car .pac-container .pac-item.dahr-pac--air:hover .pac-icon,
html.dahr-pac-car .pac-container .pac-item-selected.dahr-pac--air .pac-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 19.5 12 21l1.5-1.5M3 13.5l9-2 9 2M12 11.5V4.8a1.3 1.3 0 0 1 2.6 0v6M7 16.5l5-1.2 5 1.2'/%3E%3C/svg%3E");
}

@media screen and (max-width: 767px) {

    html.dahr-pac-car .pac-container .pac-item {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        column-gap: 1rem;
        padding: .8rem 1rem;
    }

    html.dahr-pac-car .pac-container .pac-icon {
        width: 3.2rem;
        height: 3.2rem;
    }
}


.d-flex.align-items-center.justify-content-between.total-section {
    padding-top: 2rem;
    border-top: .1rem solid #EEF1F7;
    margin-top: 1.6rem;
}


input::placeholder {
    color: var(--hw-gray-700) !important;
    font-weight: 400;
}


li.iti__divider {
    display: none;
}


.sidebarMiddle-Summary td:first-child {
    font-weight: 400 !important;
    color: #6b7280;
    font-size: 13.5px;
}

.d-flex.justify-content-between.hw__mt-20.hw__text20.insurance-total {
    padding-top: 20px;
    border-top: .1rem solid var(--ck-line);
}

/* ==========================================================================
   36. Car checkout: the AED reference line reads "AED" (client, 13-Oct-26)
   --------------------------------------------------------------------------
   The "You'll pay ... 150" line under the Total rendered its currency as a
   glyph that reads like a baht sign at small sizes, not as the letters AED.

   It is NOT a typo in the markup. dahr-currency-switcher.js
   (`originalAedLine()`) already emits the literal text:
       You'll pay <span class="hw-currency-text aed">AED</span> 150
   and style.css ~55 then restyles it:
       body .hw-currency-text.aed { font-family: 'aedregular' !important }
   - a webfont whose glyph for those letters is the new UAE Dirham symbol.
   That is deliberate and is what every OTHER amount on the page uses, so the
   font is left alone; only this one reference line opts out of it.

   /!\ `!important` is required: the style.css rule carries it too, and ours
   only wins on specificity otherwise.

   SCOPE - all five checkouts, ONE scope each, never the bare class:
     .dahr-original-aed-sic                         SIC; class exists nowhere else
     #private-booking-form .dahr-original-aed       private transfer
     #cc-booking-form .dahr-original-aed            A2A flight     (13-Oct-26)
     .div-with-summary.dahr-ck .dahr-original-aed   insurance      (13-Oct-26)
     #global_visa_form .dahr-original-aed           Global Visa    (13-Oct-26)
   `.dahr-original-aed` is SHARED by the private transfer, A2A, insurance AND
   Global Visa, which is why each is pinned to its own scope - a bare-class
   rule would change all four at once.
   Insurance is the only one with no form id around the line, so it uses the
   two-class `.div-with-summary.dahr-ck`: the excursion bookings template also
   carries `.div-with-summary` but WITHOUT `dahr-ck`, so that pairing is
   insurance-only. Every scope was confirmed to contain its line first, and
   `#global_visa_form` exists only in the Global Visa template (plus its
   legacy `…-template1.php`, which functions.php never loads).
   NOT changed: `#stripe-original-aed`, the same line inside the Stripe modal -
   that id IS shared across modules, so it needs its own per-module scoping
   before it can be touched.
   ========================================================================== */

#sic-booking-form .dahr-original-aed-sic .hw-currency-text.aed,
#private-booking-form .dahr-original-aed .hw-currency-text.aed,
#cc-booking-form .dahr-original-aed .hw-currency-text.aed,
.div-with-summary.dahr-ck .dahr-original-aed .hw-currency-text.aed,
#global_visa_form .dahr-original-aed .hw-currency-text.aed {
    font-family: inherit !important;
}


/* ==========================================================================
   37. A2A filters: one "Clear" control, where Hide used to be
       (client, 13-Oct-26)
   --------------------------------------------------------------------------
   Reset used to be the FIRST `.hw-two__colWidget` inside the scrolling filter
   body, pinned with `position: absolute; right: 1.6rem` by the flight
   template's own inline <style> (~255). Two problems came from that:
     - it floated at the top of the panel instead of reading as a control;
     - being out of flow, it left Duration as the "second" widget, so Duration
       drew the `.hw-two__colWidget + .hw-two__colWidget` border-top (~1751)
       and that showed as a stray line across the top of the panel.
   The button MOVED into `.hw-two--colFilterBarAction`, next to Hide, which
   fixes both: the line disappears on its own because Duration is now the
   FIRST widget and the `+` rule no longer matches it. No divider rule was
   touched. The inline `.reset-filter-btnDiv` rule is now dead (its div is
   gone) and was left in place.

   /!\ That action row carries a native click listener toggling
   `sidebar-filter--show` (flight template ~4331), so the Reset handler now
   calls `e.stopPropagation()` - otherwise resetting would also collapse the
   filters. The CSS here cannot do that; see the handler.
   ========================================================================== */

/* `margin-left: auto` absorbs the free space, so Filters stays left and this
   button sits hard right - the slot Hide used to occupy. No margin-right: it
   is the last item now, and the row's own 1.8rem/2rem padding is the inset. */
#booking_list_main.dahr-ck .hw-two--colFilterBarAction .reset-filter-btn {
    margin-left: auto;
    flex: none;
    cursor: pointer;
}

/* Collapsed, the rail is 9.2rem wide and centres the Filters toggle, so there
   is no room for Clear - and nothing to clear from, since the widgets are
   hidden. */
body.sidebar-filter--show #booking_list_main.dahr-ck .hw-two--colFilterBarAction .reset-filter-btn {
    display: none;
}


/* ==========================================================================
   38. Insurance: no "Continue to Payment" while the plans are loading
       (client, 13-Oct-26)
   --------------------------------------------------------------------------
   On step 1 the Continue button sat in the card footer the whole time, so it
   was clickable while the plan list was still being fetched - before there was
   a single plan to select.

   The page appends DataTables' `#flights_processing` into `#insurance-tab` in
   the plan call's `beforeSend` (~2699) and removes it again when the call
   finishes, so the presence of that element IS the loading state. `:has()`
   reads it directly, which is why this needs no JS and no new class: nothing
   has to remember to toggle anything, and the button comes back by itself the
   moment the loader is removed.

   SCOPE: `#insurance-tab` is insurance-only, and it holds exactly ONE
   `.dahr-ck__cardFoot` (the step-1 Continue). The same `#flights_processing`
   id is also appended to `#insurance-checkout` on the purchase paths - a
   different element, so this rule does not fire there.

   /!\ If `:has()` is unsupported the rule is simply ignored and the button
   behaves as it did before - it degrades to today's behaviour, never to a
   hidden button. The file already relies on `:empty`, `dvh` and
   `:focus-within`, so this baseline is nothing new.

   /!\ The plan call's `error:` handler did NOT remove the loader; it does now
   (insurance template ~2721). Without that, one failed request would have left
   the spinner up AND this rule would have kept Continue hidden - a dead end.
   ========================================================================== */

#insurance-tab:has(#flights_processing) .dahr-ck__cardFoot {
    display: none;
}

.gv__hero__sec {
    padding-bottom: 54px !important;
}

.gvMainWrap {
        margin-top: -34px !important;
}

.gv__next__btn {
    min-width: 12rem !important;
}

/* ==========================================================================
   39. Insurance search: the From / To dropdown == the car transfer's
       Pickup / Drop dropdown (client, 14-Oct-26)
   --------------------------------------------------------------------------
   `?tab=insurance` -> "Book Travel Insurance" -> the two `.airport-select`
   selects (#fromAirport / #toAirport). They are select2 widgets with an ajax
   source (`get_airport_data`), NOT Google Places - so this reproduces section
   35's "Option B" look (8px panel, 36px icon chip, two lines, matched letters
   in brand blue) on select2's own markup instead of Google's `.pac-item`.

   /!\ THE ROW'S TWO LINES COME FROM `templateResult` in the template, not from
   CSS. select2 renders one text node per option, and the option text is a
   single pipe string - "Country (CC) | City | CODE (Airport)" - which CSS
   cannot split. The renderer only PAINTS it: `id` and `text` are left exactly
   as the JSON has them, because the whole insurance module reads the value
   back with `.val()` and splits it on ' | '.

   /!\ SCOPE. Every `.select2-*` rule in this template's own inline <style> is
   UNSCOPED, and a select2 panel is normally a <body> child - so a bare rule
   here would repaint every select2 on the site. Two things make the id scope
   work and both must stay:
     - `dropdownParent: $(elementId).parent()` in `initializeSelect2()` keeps
       the panel INSIDE the field's own column, i.e. inside
       `#insurance-first-step`;
     - `#insurance-first-step` exists only in this template.
   If that `dropdownParent` is ever dropped, the panel moves to <body>, these
   rules stop matching and the dropdown silently reverts to select2's default
   look. It does NOT leak - it just stops applying.

   /!\ The template's inline <style> loads AFTER this file, so the id is also
   what wins the cascade; `[aria-selected="true"]` there is `!important`, which
   is why the selected row restates its background with `!important` too.

   /!\ Never add `dropdownCssClass` to reach this - section 20 records why:
   it needs `select2/compat/dropdownCss`, which select2.min.js does not ship,
   and the whole call then throws.
   ========================================================================== */

/* --- 39.1 The panel ------------------------------------------------------- */

#insurance-first-step .select2-container--default .select2-dropdown {
    margin-top: .8rem;
    border: .1rem solid #E6E9F0;
    border-radius: .8rem;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 24, 40, .10);
    background: #fff;
    overflow: hidden;
}

/* select2 squares off the edge nearest the field; the car panel is round on
   all four corners, above and below. */
#insurance-first-step .select2-container--default .select2-dropdown--below,
#insurance-first-step .select2-container--default .select2-dropdown--above {
    border-radius: .8rem;
}

#insurance-first-step .select2-container--default .select2-results > .select2-results__options {
    padding: .6rem;
    max-height: 32rem;
}

/* The search box inside the panel, to the same metrics as the checkout's own
   dropdown (section 29). */
#insurance-first-step .select2-container--default .select2-search--dropdown {
    padding: .6rem .6rem .2rem;
}

#insurance-first-step .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 4rem;
    padding: 0 1.2rem;
    border: .1rem solid #E6E9F0;
    border-radius: .6rem;
    font-size: 1.4rem;
    color: #0F294D;
    outline: 0;
}

#insurance-first-step .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3264FF;
}

/* "Please enter 2 or more characters" / "Searching…" / "No results found" -
   quiet, and on the same inset as the rows. */
#insurance-first-step .select2-container--default .select2-results__message {
    padding: 1.2rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.4;
    color: #5A6B85;
}

/* --- 39.2 A row = 36px chip + two lines ----------------------------------- */

#insurance-first-step .select2-container--default .select2-results__option {
    padding: 0;
    border-radius: .8rem;
    line-height: normal;
}

#insurance-first-step .select2-container--default .select2-results__option--highlighted[aria-selected],
#insurance-first-step .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(50, 100, 255, .08) !important;
    color: inherit;
    font-weight: 500;
}

#insurance-first-step .dahr-ins-opt {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    column-gap: 1.2rem;
    align-items: center;
    padding: .9rem 1.2rem;
    cursor: pointer;
}

/* The chip. The pin is inlined, exactly as section 35 does it, so there is no
   extra request and no sprite dependency. */
#insurance-first-step .dahr-ins-opt__icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1rem;
    background-color: #EBEFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233264FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 19.5 12 21l1.5-1.5M3 13.5l9-2 9 2M12 11.5V4.8a1.3 1.3 0 0 1 2.6 0v6M7 16.5l5-1.2 5 1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8rem 1.8rem;
}

/* A row with no second line still has to leave the chip centred. */
#insurance-first-step .dahr-ins-opt__icon:last-child {
    grid-row: 1;
}

#insurance-first-step .select2-results__option--highlighted[aria-selected] .dahr-ins-opt__icon,
#insurance-first-step .select2-results__option[aria-selected="true"] .dahr-ins-opt__icon {
    background-color: #3264FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 19.5 12 21l1.5-1.5M3 13.5l9-2 9 2M12 11.5V4.8a1.3 1.3 0 0 1 2.6 0v6M7 16.5l5-1.2 5 1.2'/%3E%3C/svg%3E");
}

/* Line 1 - "City (CODE)". */
#insurance-first-step .dahr-ins-opt__name {
    grid-column: 2;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0F294D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Line 2 - the country. */
#insurance-first-step .dahr-ins-opt__meta {
    grid-column: 2;
    margin-top: .1rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.4;
    color: #5A6B85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The typed letters, same as Google's `.pac-matched` in section 35. */
#insurance-first-step .dahr-ins-opt__hit {
    font-weight: 700;
    color: #3264FF;
}

@media screen and (max-width: 767px) {

    #insurance-first-step .dahr-ins-opt {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        column-gap: 1rem;
        padding: .8rem 1rem;
    }

    #insurance-first-step .dahr-ins-opt__icon {
        width: 3.2rem;
        height: 3.2rem;
    }
}


/* ==========================================================================
   40. Insurance checkout: "Email Quotation" is a PAYMENT-step control
       (client, 14-Oct-26)
   --------------------------------------------------------------------------
   The button lives in the sidebar `.dahr-ck__sideCta` and was visible on all
   three steps, including Plan - where there is nothing to quote yet. It now
   shows only on step 3.

   Done here rather than in JS because `.emai-quote` has NO handler and NO
   show()/hide() anywhere in the theme (grepped - the class appears exactly
   once, on the markup), so nothing can fight the rule and nothing had to be
   taught about the step.

   /!\ `:not([data-ck-step="3"])` and NOT a pair of display rules: the button
   is `.hw__btn.hw__bnt-full`, so its visible display comes from the theme. By
   only ever REMOVING it we never have to restate what it should be, and a
   future change to .hw__btn keeps working.

   SCOPE: `.div-with-summary.dahr-ck` is insurance-only (the excursion
   bookings template uses `.div-with-summary` WITHOUT `dahr-ck` - see section
   32), and `.emai-quote` exists only in the insurance template.
   ========================================================================== */

.div-with-summary.dahr-ck:not([data-ck-step="3"]) .emai-quote {
    display: none !important;
}


/* ==========================================================================
   41. Insurance step 1: plan validation state + the Total separator
       (client, 14-Oct-26)
   --------------------------------------------------------------------------
   Two unrelated fixes, both insurance-only, both scoped on
   `.div-with-summary.dahr-ck` / `#insurance-tab` (see section 32 for why those
   two are insurance and nothing else).
   ========================================================================== */

/* --- 41.1 The plan CARDS turn red when Continue is refused ---------------- */
/* The state class is toggled from `dahrInsPlanNotice()`, the same call that
   shows and hides the message, so the border and the text can never disagree.
   It is parked on `#planContainer` - one toggle point, and it survives the
   `$('#planContainer').html(...)` rebuilds - while the red is painted on the
   CARDS inside it (client, 14-Oct-26: the ring used to wrap the whole
   container, which read as a box around empty space).

   The plan step has TWO screens and the red follows whichever is on show:
     - `.plan-category`  - the "Travel Assurance … Starting at …" cards;
     - `.plan-details`   - the per-plan cards with the radios, after a category
                           is opened (the categories are hidden by then).
   A hidden card paints nothing, so listing both is what makes the state
   visible wherever Continue was actually refused.

   /!\ `border-color` ALONE. Both cards already carry
   `border: .1rem solid var(--hw-gray-600)` AND a `transition: border-color`
   in the template's inline <style> (~1607 and ~1729), so recolouring adds no
   layout at all and fades in for free. Never add a `border-width` here.

   /!\ Specificity is load-bearing: that inline <style> loads AFTER this file
   and carries `.plan-category:hover` / `.plan-category.highlighted` at (0,2,0).
   The `#insurance-tab` id takes these rules to (1,3,0) so they win.

   /!\ The class name is ours, not bootstrap's `.is-invalid`: that one carries
   form-control styling (icon, padding, border colour) which would leak onto a
   plain div the moment anything in the page targets it generically. */

#insurance-tab .plan-container.dahr-ins-plan--invalid .plan-category,
#insurance-tab .plan-container.dahr-ins-plan--invalid .plan-details {
    border-color: #E5484D;
}

/* The message itself, so it reads as a field error rather than body copy. */
#insurance-tab .plan_notice_wrapper .plan_notice_alert {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #E5484D;
}

/* --- 41.2 The separator sits ABOVE Total, not below ----------------------- */
/* It was the sidebar CTA's own `border-top` (section 11,
   `.dahr-ck .hw-book--sidebar .dahr-ck__sideCta`), which drew the line under
   Total AND under the AED reference line below it. That rule is SHARED with
   the car transfer, A2A and Global Visa sidebars, so it is overridden here
   rather than changed - the other three keep their line exactly where it is.

   `hw__mt-20` already supplies the row's margin-top (and it is !important in
   style.css), so only the padding and the rule itself are set here. */

.div-with-summary.dahr-ck .hw-book--sidebar .dahr-ck__sideCta {
    padding-top: 0;
    border-top: 0;
}

.div-with-summary.dahr-ck .hw-book--sidebar .insurance-total {
    padding-top: 2rem;
    border-top: .1rem solid var(--ck-line);
}
.insurance-paynow, .insurance-EmailQuotation {
    width: 48.5% !important;
}

/* ==========================================================================
   42. Insurance payment step: the Terms checkbox is not outlined when it is
       refused (client, 14-Oct-26)
   --------------------------------------------------------------------------
   Section 17 gives `.dahr-ck__terms.is-invalid` a red `outline` on the box AND
   shows the message under it. The client wants the message alone here - the
   red square around the checkbox read as a broken control.

   ONLY the outline goes. `.dahr-ck__termsErr` still shows, so the refusal is
   still explained, and `dahrCheckoutTerms.validate()` is untouched - an
   unticked box still blocks Pay Now exactly as before.

   The checkbox keeps its ordinary `1px solid #656565` border from section 17;
   that is its resting chrome, not a validation state.

   /!\ SCOPED to insurance. `.dahr-ck__terms` is rendered by the shared
   `dahr_checkout_terms_line()` on all four checkouts, so an unscoped rule
   would take the outline off the car, A2A and Global Visa too - which nobody
   asked for. `.div-with-summary.dahr-ck` is insurance-only (section 32).
   ========================================================================== */

.div-with-summary.dahr-ck .dahr-ck__terms.is-invalid .dahr-ck__termsCheck {
    outline: 0;
}


/* ==========================================================================
   43. A2A payment step: Booking Reference keeps the car's field spacing
       (client, 14-Oct-26)
   --------------------------------------------------------------------------
   The block moved out of the Passenger Details pane into the Payment pane and
   was given the car's `dahr-ck__block dahr-ck__block--field` pair, which is
   what draws React's 16px margin + 18px padding + #EEF1F7 rule
   (`.dahr-ck .dahr-ck__block + .dahr-ck__block.dahr-ck__block--field`,
   section 27.2).

   /!\ In A2A that rule LOSES, and only in A2A. Section 12 carries
   `#passenger_details.dahr-ck .hw__grid.hw__bsnull.hw__bnull { padding: 0 }`
   at (1,4,0) against the shared rule's (0,4,0), and this block carries
   `hw__grid hw__bsnull hw__bnull` - so the padding was zeroed and the field
   sat tight under the payment methods while the car's had 18px. Measured
   side by side: 0px vs 18px.

   Adding `#passenger_details` here takes it to (1,5,0) and hands the padding
   back. The margin and the border were never in dispute - nothing in the A2A
   scope touches those - so only `padding-top` is restated.
   ========================================================================== */

#passenger_details.dahr-ck .dahr-ck__block + .dahr-ck__block.dahr-ck__block--field {
    padding-top: 1.8rem;
}


/* ==========================================================================
   44. Car checkout summary: the dirham glyph sits with its amount
       (client, 14-Oct-26) — CAR ONLY
   --------------------------------------------------------------------------
   Base Fare / Taxes and Fees / Total render as
   `<span class="hw-currency-text aed">AED</span> 150.00`, and style.css ~55
   puts the `aedregular` webfont on that span - a font whose "AED" ligature IS
   the dirham glyph. The glyph and the digits then come from two different
   fonts, which is where both complaints come from.

   MEASURED first, with the real font loaded and the glyph rasterised to a
   canvas so the INK box could be compared rather than the line box:
     - ink centres already matched (0.5px at 16px, 0px at 22px) - there was no
       real baseline problem;
     - the glyph's ink was 1-2px TALLER than the digits (13 vs 12 at 16px,
       18 vs 16 at 22px) and its bottom sat ON the baseline while the digits
       stop 1px above it. A taller glyph hanging 1px lower is what reads as
       "not centred";
     - the markup's literal space did render (4.5px at 16px, 6.1px at 22px),
       but the glyph has a NEGATIVE right side bearing (-0.6px - its ink
       overhangs its advance width), which eats into it.

   So: `.92em` makes the ink heights match EXACTLY (12/12 and 16/16), the 1px
   `vertical-align` lifts the glyph off the baseline onto the digits' own ink
   centre, and the margin guarantees the gap on top of the space.

   /!\ SCOPED to the two car FORMS. `.hw-passenger--fareSummary__table` is also
   used by sic-booking-confirmed.php, private-booking-confirmed.php and
   booking-confirmed.php (A2A), and `.hw-currency-text.aed` is on every amount
   in every module - a looser selector would re-size currency symbols across
   the whole portal.
   ========================================================================== */

#sic-booking-form .hw-passenger--fareSummary__table .hw-currency-text.aed,
#private-booking-form .hw-passenger--fareSummary__table .hw-currency-text.aed {
    font-size: .92em;
    vertical-align: 1px;
    margin-right: .25rem;
}
.transition_fees, .total_price_sic,.hw__text-brand.hw__text-bold.hw__text22.falltotalsic{
    justify-content: center;
    align-items: center;
}

.hw-currency-text.aed{
    line-height: normal !important;
}

/* ==========================================================================
   45. Car booking CONFIRMED: "Traveler Details" gets the section-head chip
       (client, 14-Oct-26) — CAR CONFIRMED PAGES ONLY
   --------------------------------------------------------------------------
   The same icon chip + title the checkout cards use (section 27.1), on the
   heading of the passenger table on `sic-booking-confirmed.php` and
   `private-booking-confirmed.php`.

   /!\ `.dahr-ckc` is NOT nested inside a `.dahr-ck` — the confirmed pages open
   with `<div class="dahr-ckc">` and nothing else — so section 27.1's
   `.dahr-ck .dahr-ck__secHead` rules never reach them. Same trap section 34
   records for `.dahr-ckv`. The declarations are therefore repeated here rather
   than widening 27.1, which would pull the four CHECKOUT scopes along with it.

   Values are 27.1's, unchanged, so the heading reads exactly like the
   "Passenger Details" head on the car checkout.

   The page keeps `.hw-car--listShow__widget` on the card, so the heading's own
   card padding and the rest of the layout are untouched; only the title line
   changed. `.dahr-ck__secHead` appeared NOWHERE on these two pages before this
   (grepped), so nothing existing can be caught by these rules.
   ========================================================================== */

.dahr-ckc .dahr-ck__secHead {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: .1rem solid #ECEEF3;
}

.dahr-ckc .dahr-ck__secIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    flex: none;
    border-radius: 1rem;
    background: #EBEFFF;
    color: var(--ck-brand);
}

.dahr-ckc .dahr-ck__secIcon svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--ck-brand);
}

.dahr-ckc .dahr-ck__secTtl {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ck-ink);
    letter-spacing: -.01em;
}

/* ==========================================================================
   46. A2A checkout: "dd/mm/yyyy" tooltip on the date fields
       (client, 14-Oct-26)
   ==========================================================================

   The client sent a reference shot of a small white box reading `dd/mm/yyyy`
   floating above a date field, and asked for the same on every date the A2A
   checkout asks the agent to type. In `#passenger_details` that is exactly two
   fields per passenger -- Date Of Birth (`.passenger-dob`) and Passport Expiry
   Date (`.passenger-passport-expiry`) -- and both already carry the format in
   their placeholder, which the 1/3-width column TRUNCATES ("Date Of Birth
   (dd/mm/yyy'"). The tooltip is what makes the format readable again, and it
   also survives the moment the placeholder disappears: it shows on :focus as
   well as :hover, i.e. while the agent is actually typing.

   /!\ CSS ONLY, and deliberately so. Those two inputs are rendered at FIVE
   points -- the static Adult(1) block plus four one-line JS string literals
   (Adult 2+, Child, Infant, and the Adult(1) rebuild in `.back_to_single_booking`)
   -- so a markup-based tooltip meant editing all five. More importantly the
   flight template validates with `$(this).parent().find('.' + errorClass)`
   (CLAUDE.md 7.19), so WRAPPING an input in a tooltip element would move its
   `.parent()` away from the error span and silently break every field error on
   this screen. Nothing here adds, removes or re-parents a node: the hint text
   is a literal `content:` string on the input's EXISTING parent, reached with
   `:has(> input...)`. Placeholders, names, ids, classes, the datepicker
   (`format: 'dd/mm/yyyy'`) and the POST payload are all untouched.

   /!\ `:has()` is already relied on in this file (section 38). If it is ever
   unsupported the two rules are simply ignored and the fields behave exactly as
   they do today -- it degrades to no tooltip, never to a broken field.

   /!\ SCOPE. `.passenger-dob` / `.passenger-passport-expiry` are shared with
   the DUMMY VOUCHER module (customer-submenu-dummy-voucher-bookings-template.php),
   so a bare class selector would restyle that module too. Everything below is
   pinned to `#passenger_details.dahr-ck`, which exists only in the A2A flight
   template -- car transfer, insurance and Global Visa cannot be reached either.

   The parent being matched is the bootstrap column for Adult/Child, and
   `.hw__inline-group` for the Infant DOB (the only one with an extra wrapper).
   `.hw__inline-group` is ALREADY `position: relative` in style.css; the
   `position: relative` below is for the plain columns. It is safe there: the
   error spans in those columns are `display: block` in normal flow, so nothing
   re-anchors. The pseudo-element is absolutely positioned, so it never becomes
   a flex item of `.hw__inline-group` and adds no height anywhere.

   z-index stays low (5) on purpose: bootstrap-datepicker renders at ~1050, so
   on the rare occasion it flips above the field the calendar covers the
   tooltip rather than the other way round. The datepicker's normal position is
   BELOW the input, which is why the tooltip sits above it. */

#passenger_details.dahr-ck div:has(> input.passenger-dob),
#passenger_details.dahr-ck div:has(> input.passenger-passport-expiry) {
    position: relative;
}

#passenger_details.dahr-ck div:has(> input.passenger-dob)::after,
#passenger_details.dahr-ck div:has(> input.passenger-passport-expiry)::after {
    content: "dd/mm/yyyy";
    position: absolute;
    left: 0;
    bottom: calc(100% + .6rem);
    z-index: 5;
    padding: .5rem .9rem;
    border: .1rem solid #E6E9F0;
    border-radius: .6rem;
    background: #fff;
    box-shadow: 0 .4rem 1.2rem rgba(16, 24, 40, .12);
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ck-ink);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

#passenger_details.dahr-ck div:has(> input.passenger-dob:hover)::after,
#passenger_details.dahr-ck div:has(> input.passenger-dob:focus)::after,
#passenger_details.dahr-ck div:has(> input.passenger-passport-expiry:hover)::after,
#passenger_details.dahr-ck div:has(> input.passenger-passport-expiry:focus)::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   47. Car transfer Pickup Time dropdown == the checkout dropdown
       (client, 14-Oct-26)
   ==========================================================================

   `?tab=car-transfer` -> Private / Airport search -> the `#pickup_time` field.
   Its panel was the last dropdown in the module still on its own 2016 styling
   (1rem radius, 1.5rem padding, 1.6rem rows, a bare blue hover) while every
   other dropdown on the checkouts is the React `.hw-gsel` clone built in
   section 29. These rules repaint it with section 29's EXACT values: 8px
   panel, 1px #E6E9F0, 6px padding, 12x28 shadow, rows 10x12 at 14px with a
   6px radius, #F3F5F9 hover, and the chosen row #3264FF / 600 on
   rgba(50,100,255,.08) with a tick.

   /!\ `#pickup_time` is NOT a `<select>` -- it is a readonly `<input>` with a
   hand-built `#timeDropdown` beside it (`div.dropdown-item >
   span.time-hour-minutes + span.time-period`). That is WHY section 29 never
   reached it: `dahrCheckoutSelects` only converts real `<select>` elements.
   Nothing here changes that machinery -- the builder, the click handlers, the
   AM/PM split, the past-time filter and the value written into #pickup_time
   are all untouched.

   /!\ SCOPE. `.time-dropdown` is SHARED with three other modules that have
   their own copy of this picker and their own inline styling for it --
   auction-listing, dealer-vehicles and vehicle-bookings -- so a bare
   `.time-dropdown` rule would silently restyle all three. Every selector
   below is pinned to **`#timeDropdown`**, an id that exists exactly once in
   the whole theme (grepped), in the car transfer template.

   /!\ LITERAL COLOURS, NOT `var(--ck-*)`. The `--ck-*` tokens are declared on
   `.dahr-ck, .dahr-ckc, .dahr-ckv, .dahr-ckvc`, and this panel lives in the
   SEARCH form (`#point_to_point_fields`, ~line 1711) -- the first `.dahr-ck`
   in that template does not open until ~3070. A `var()` here would resolve to
   nothing and the text would fall back to the browser default. Same trap as
   section 35's `.pac-container`.

   /!\ The id is also what wins the CASCADE. The template's own inline
   `<style>` (~4529) comes AFTER this file, but its selectors are
   `.time-dropdown` (0,1,0) and `.time-dropdown .dropdown-item` (0,2,0), so a
   single id out-specifies them. The one exception is its
   `background-color: rgba(0,0,0,0) !important` on the row -- an `!important`
   beats specificity, so the hover and selected backgrounds below must carry
   `!important` too. Nothing else here does. */

#timeDropdown {
    padding: .6rem;
    border: .1rem solid #E6E9F0;
    border-radius: .8rem;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 24, 40, .14);
    margin-top: .6rem;
    max-height: 24rem;
    background: #fff;
}

/* `display: flex` + an explicit width replaces the inline rule's
   `inline-flex`, which only stacked because bootstrap's `.dropdown-item`
   happens to carry `width: 100%`. The .2rem gap and the 4.5rem min-width on
   `.time-hour-minutes` are the template's own and are deliberately kept --
   that min-width is what lines the AM/PM column up. */
#timeDropdown .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .2rem;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #1B2439;
    border-radius: .6rem;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

#timeDropdown .dropdown-item:hover {
    color: #1B2439;
    background-color: #F3F5F9 !important;
}

#timeDropdown .dropdown-item.dahr-tsel--on {
    color: #3264FF;
    font-weight: 600;
    background-color: rgba(50, 100, 255, .08) !important;
}

/* The tick is a pseudo-element, so the row builder needs no extra markup --
   it only toggles .dahr-tsel--on. Same path and weight as the TICK constant
   in assets/js/dahr-checkout-loader.js. */
#timeDropdown .dropdown-item.dahr-tsel--on::after {
    content: "";
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%233264FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.6rem 1.6rem no-repeat;
}

/* The AM/PM separator the builder inserts, quietened to the panel's own edge
   colour. It is bootstrap's `.dropdown-divider` and is left in the markup. */
#timeDropdown .dropdown-divider {
    margin: .6rem .4rem;
    border-top-color: #E6E9F0;
}

/* ==========================================================================
   48. A2A: the passenger counters, merged into Passenger Details
       (client, 14-Oct-26)
   ==========================================================================

   The old "Choose Number Of Passengers" screen is gone; its Adult / Child /
   Infant counters now sit at the TOP of the Details card, each with its own
   price under it, above the "Passenger Details" section head.

   /!\ SCOPE: `#passenger_details` exists only in the A2A flight template, and
   `.dahr-a2a-pax*` is a new class used nowhere else. The counters' own
   classes (`.hw__quantity-picker`, `.btn-number`, `.input-number`) are SHARED
   with the old step-2 markup and with other modules, so nothing here is
   written against them unscoped.

   /!\ `.dahr-a2a-pax__priceWrap` deliberately also carries bootstrap's
   `col-md-12 mt-3` - that pair is what the deal-fare branch of
   `.select_booking` hides with
   `$(".flight_single_price").closest("div.col-md-12.mt-3").hide()`. The two
   declarations below only undo the bootstrap gutter padding and margin so the
   chip sits where this layout wants it; the classes themselves must stay. */

#passenger_details.dahr-ck .dahr-a2a-pax {
    margin: 0 0 2.4rem;
    padding: 0 0 2rem;
    border-bottom: .1rem solid #ECEEF3;
}

#passenger_details.dahr-ck .dahr-a2a-pax__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

#passenger_details.dahr-ck .dahr-a2a-pax__col > label {
    display: block;
    margin: 0 0 .8rem;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ck-ink);
}

/* The seat refusal the handler writes into .single_flight_error. Empty by
   default, so it must not reserve space until it has something to say. */
#passenger_details.dahr-ck .dahr-a2a-pax .single_flight_error:not(:empty) {
    margin-bottom: 1.6rem;
}

#passenger_details.dahr-ck .dahr-a2a-pax__priceWrap {
    margin-top: 1rem !important;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.4rem;
    line-height: 1.5;
}

#passenger_details.dahr-ck .dahr-a2a-pax__priceLbl {
    margin-right: .4rem;
    color: var(--ck-ink-soft);
}

/* The amount keeps .hw__text-brand / .hw__weight500 from the markup, which
   style.css already paints brand blue - this only sets the weight so it reads
   as a figure rather than as body copy. */
#passenger_details.dahr-ck .dahr-a2a-pax__priceWrap .hw__text-brand {
    font-weight: 600;
}

@media screen and (max-width: 575px) {

    #passenger_details.dahr-ck .dahr-a2a-pax__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

/* ==========================================================================
   49. "dd/mm/yyyy" tooltip on the OTHER three checkouts' date fields
       (client, 15-Oct-26)
   ==========================================================================

   Section 46 gave the A2A checkout a small white hint box above every date
   input; the client asked for the same on car transfer, insurance and Global
   Visa. Same technique, same metrics, same reasoning -- read section 46 first,
   it explains why this is a `content:` string on the input's EXISTING parent
   (`:has(> input...)`) and never a wrapper element: wrapping would move an
   input's `.parent()` away from its error span and silently break field
   validation on these screens exactly as it would on A2A.

   /!\ THE HINT TEXT MUST MATCH THE FIELD'S REAL DATEPICKER FORMAT. A tooltip
   is a promise about what the field accepts, so a wrong one actively teaches
   the agent to type a date the picker will mis-read. That is why Global Visa
   below says `yyyy-mm-dd` and not `dd/mm/yyyy`: its five inputs are POSTed
   straight into DATE columns and are initialised `format: 'yyyy-mm-dd'`
   (CLAUDE.md 7.57). When that module is ever converted to day-first, this
   block's content string has to move with it -- they are one decision.

   /!\ SCOPE. Every selector here is pinned to an id that exists in exactly
   one template. `.infant_booking_from` / `._infant_dob` alone appear in SIX
   templates (car, insurance, flight, dealer-vehicles, dummy-voucher and the
   never-loaded car …-template1.php), and `.passport-expiry` is shared too, so
   a bare class rule would put hints on modules nobody asked about -- and on
   fields whose format differs. Scopes used: `#sic-booking-form` (car SIC
   checkout), `#passengerFieldsContainer` (insurance passenger card) and
   `.dahr-ckv` (Global Visa request page, which also covers its ?editVisa
   form -- same ids, same format, so the hint is right there too).

   /!\ `:has()` again (sections 38 and 46): unsupported means the rules are
   ignored and the fields behave exactly as they do today. It degrades to no
   tooltip, never to a broken field.

   Fields deliberately NOT covered:
   - the car SEARCH form's `#pickup_date` / `#scheduledate`. They are not
     checkout fields, and they render a human date ("Thu, 05 Jul 25") whose
     string is parsed by convertPrivateToIsoFormat() / convertToBackendFormat()
     — a hint there would invite typing, which those parsers cannot survive.
   - the insurance SEARCH form's `#depart-date` / `#return-date` (dd-mm-yyyy,
     five separate consumers incl. a server-side one — CLAUDE.md 7.57).
   - the private transfer checkout, which has no date input at all.
   ========================================================================== */

/* ---- 49.1 Car transfer: the SIC checkout's infant Date of Birth ----
   Both builders inject `.infant_booking_from` into `.infant_wrapper` inside
   `#sic-booking-form`, and both are already `format: 'dd/mm/yyyy'` (the slash
   is load-bearing in isDifferenceLessThan2Years()). The direct parent is
   `.hw__inline-group`, which style.css already makes `position: relative` --
   the declaration below is restated only so this block does not depend on
   that staying true. */
#sic-booking-form div:has(> input.infant_booking_from) {
    position: relative;
}

/* ---- 49.2 Insurance: passenger DOB + passport expiry ----
   All three DOB inputs carry `.infant_booking_from` and sit in a bootstrap
   column; the expiry input is `.passport-expiry` in its own column. Both are
   `dd/mm/yyyy` — the expiry one as of 15-Oct-26 (CLAUDE.md 7.57). */
#passengerFieldsContainer div:has(> input.infant_booking_from),
#passengerFieldsContainer div:has(> input.passport-expiry) {
    position: relative;
}

/* ---- 49.3 Global Visa: travel range + the three expiry fields ----
   Matched by id, so no shared class can leak. Each input sits in a wrapper
   div next to its inline SVG icon. */
.dahr-ckv div:has(> input#travel_from_date),
.dahr-ckv div:has(> input#travel_to_date),
.dahr-ckv div:has(> input#passport_expiry_date),
.dahr-ckv div:has(> input#emirates_expiry_date),
.dahr-ckv div:has(> input#visa_expiry_date) {
    position: relative;
}

/* The hint box itself. Values are section 46's, to the pixel, so all four
   checkouts show the identical control. */
#sic-booking-form div:has(> input.infant_booking_from)::after,
#passengerFieldsContainer div:has(> input.infant_booking_from)::after,
#passengerFieldsContainer div:has(> input.passport-expiry)::after,
.dahr-ckv div:has(> input#travel_from_date)::after,
.dahr-ckv div:has(> input#travel_to_date)::after,
.dahr-ckv div:has(> input#passport_expiry_date)::after,
.dahr-ckv div:has(> input#emirates_expiry_date)::after,
.dahr-ckv div:has(> input#visa_expiry_date)::after {
    content: "dd/mm/yyyy";
    position: absolute;
    left: 0;
    bottom: calc(100% + .6rem);
    z-index: 5;
    padding: .5rem .9rem;
    border: .1rem solid #E6E9F0;
    border-radius: .6rem;
    background: #fff;
    box-shadow: 0 .4rem 1.2rem rgba(16, 24, 40, .12);
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ck-ink);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

/* Global Visa's five fields are yyyy-mm-dd, so they say so. See the warning
   at the top of this section before "fixing" this to dd/mm/yyyy. */
.dahr-ckv div:has(> input#travel_from_date)::after,
.dahr-ckv div:has(> input#travel_to_date)::after,
.dahr-ckv div:has(> input#passport_expiry_date)::after,
.dahr-ckv div:has(> input#emirates_expiry_date)::after,
.dahr-ckv div:has(> input#visa_expiry_date)::after {
    content: "yyyy-mm-dd";
}

/* Shown on hover AND on focus -- focus is the moment the placeholder is gone,
   i.e. exactly when the agent is typing and needs the format. */
#sic-booking-form div:has(> input.infant_booking_from:hover)::after,
#sic-booking-form div:has(> input.infant_booking_from:focus)::after,
#passengerFieldsContainer div:has(> input.infant_booking_from:hover)::after,
#passengerFieldsContainer div:has(> input.infant_booking_from:focus)::after,
#passengerFieldsContainer div:has(> input.passport-expiry:hover)::after,
#passengerFieldsContainer div:has(> input.passport-expiry:focus)::after,
.dahr-ckv div:has(> input#travel_from_date:hover)::after,
.dahr-ckv div:has(> input#travel_from_date:focus)::after,
.dahr-ckv div:has(> input#travel_to_date:hover)::after,
.dahr-ckv div:has(> input#travel_to_date:focus)::after,
.dahr-ckv div:has(> input#passport_expiry_date:hover)::after,
.dahr-ckv div:has(> input#passport_expiry_date:focus)::after,
.dahr-ckv div:has(> input#emirates_expiry_date:hover)::after,
.dahr-ckv div:has(> input#emirates_expiry_date:focus)::after,
.dahr-ckv div:has(> input#visa_expiry_date:hover)::after,
.dahr-ckv div:has(> input#visa_expiry_date:focus)::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   50. Car Transfers SEARCH loader - "Hold on, we're finding the best cars
       for you" (client, 15-Oct-26).

   The values below are the client-approved file (Downloads/car-loader.html)
   verbatim; only the selectors changed, because that file's class names
   (.overlay, .modal, .top, .row, .chip, .step, .bar ...) are far too generic
   to drop into this theme. EVERY selector here is prefixed .dahr-srl, and no
   template carries any of this markup - assets/js/dahr-search-loader.js
   builds the whole popup itself. So this block cannot restyle one existing
   element on any page.

   Two deliberate departures from that file, both outside the design:
   - font-family is NOT Manrope. The portal loads DM Sans + Poppins and
     nothing else; pulling in a third Google font would be a page-wide change,
     which this work is not allowed to make.
   - z-index is 99999, not 10. A search loader has to sit over the dashboard's
     own stacking contexts (sticky bars, modals, the Google Places panel).
   ========================================================================== */
.dahr-srl {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    z-index: 99999;
}

.dahr-srl.is-open {
    display: flex;
}

.dahr-srl__modal {
    width: 100%;
    max-width: 60rem;
    background: #fff;
    border-radius: 1.6rem;
    overflow: hidden;
    box-shadow: 0 2.4rem 6rem rgba(15, 25, 55, .24);
    animation: dahrSrlPop .4s cubic-bezier(.2, .8, .2, 1) both;
    color: #1B1F2B;
    text-align: left;
}

@keyframes dahrSrlPop {
    from { opacity: 0; transform: translateY(1.6rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---- header band ---- */
.dahr-srl__top {
    background: #F3F7FF;
    border-bottom: .1rem solid #E3EAFB;
    padding: 3.2rem 3.6rem 2.8rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.dahr-srl__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.6rem;
}

.dahr-srl__end { min-width: 0; }
.dahr-srl__end--right { text-align: right; }

.dahr-srl__lbl { font-size: 1.4rem; font-weight: 700; line-height: 1.4; }

.dahr-srl__big {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: .4rem 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dahr-srl__sub { font-size: 1.6rem; color: #3B404D; line-height: 1.4; }

.dahr-srl__iconSlot { display: flex; align-items: center; justify-content: center; flex: none; }
.dahr-srl__car { width: 10rem; height: 6rem; flex: none; }
.dahr-srl__body { animation: dahrSrlBob .6s ease-in-out infinite; }
.dahr-srl__sl { animation: dahrSrlSpeed .8s linear infinite; }
.dahr-srl__sl:nth-child(2) { animation-delay: .25s; }
.dahr-srl__sl:nth-child(3) { animation-delay: .5s; }

@keyframes dahrSrlBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-.2rem); }
}

@keyframes dahrSrlSpeed {
    0%   { transform: translateX(.6rem); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translateX(-.8rem); opacity: 0; }
}

/* Insurance: shield + tick, from the approved insurance-loader.html. The
   shield reuses the car's bob, so only the tick and the sparks are new. */
.dahr-srl__ins { width: 7.2rem; height: 7.2rem; flex: none; }
.dahr-srl__shield { animation: dahrSrlBob .6s ease-in-out infinite; transform-origin: center; }
/* 22, not the approved file's 18: the tick path "M16.5 24l5 5 10-11" is
   21.94 units long (measured with getTotalLength), so a dasharray SHORTER
   than the path makes the 18-on/18-off pattern repeat across it and the
   stroke breaks at the elbow. The array must be >= the path length for a
   clean single draw. */
.dahr-srl__chk { stroke-dasharray: 22; animation: dahrSrlTick 1.6s ease-in-out infinite; }
.dahr-srl__spark { animation: dahrSrlPulse 1.6s ease-in-out infinite; }
.dahr-srl__spark:nth-of-type(2) { animation-delay: .3s; }

@keyframes dahrSrlTick {
    0%        { stroke-dashoffset: 22; }
    60%, 100% { stroke-dashoffset: 0; }
}

@keyframes dahrSrlPulse {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50%      { opacity: 1; transform: scale(1); }
}

.dahr-srl__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.dahr-srl__chip {
    background: #fff;
    border: .1rem solid #E3EAFB;
    padding: 1rem 1.6rem;
    border-radius: 999px;
}

/* ---- body ---- */
.dahr-srl__bottom {
    padding: 3rem 3.6rem 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.dahr-srl__title { font-size: 2rem; font-weight: 700; line-height: 1.4; }

.dahr-srl__steps { display: flex; flex-direction: column; gap: 1.4rem; }

.dahr-srl__step {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
}

.dahr-srl__step--pending span { color: #9AA0AD; }

.dahr-srl__ico {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dahr-srl__ico--done { background: #2F6BF5; }
.dahr-srl__ico--pending { border: .2rem solid #E4E6EB; }
.dahr-srl__ico--active {
    border: .2rem solid #D5E0FB;
    border-top-color: #2F6BF5;
    animation: dahrSrlSpin .8s linear infinite;
}

@keyframes dahrSrlSpin { to { transform: rotate(360deg); } }

.dahr-srl__bar {
    height: .6rem;
    border-radius: 999px;
    background: #EEF1F6;
    overflow: hidden;
}

.dahr-srl__bar i {
    display: block;
    height: 100%;
    width: 0;
    background: #2F6BF5;
    border-radius: 999px;
    transition: width .2s linear;
}

.dahr-srl__meta {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #5B6070;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .dahr-srl { padding: 1.6rem; }
    .dahr-srl__top,
    .dahr-srl__bottom { padding-left: 2.2rem; padding-right: 2.2rem; }
    .dahr-srl__big { font-size: 2.4rem; }
    .dahr-srl__car { width: 7.6rem; height: 4.6rem; }
    .dahr-srl__ins { width: 5.6rem; height: 5.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dahr-srl__modal,
    .dahr-srl__body,
    .dahr-srl__sl,
    .dahr-srl__shield,
    .dahr-srl__chk,
    .dahr-srl__spark,
    .dahr-srl__ico--active { animation: none !important; }
    .dahr-srl__bar i { transition: none !important; }
}

/* ==========================================================================
   51. Car SEARCH form: the Rental Type + Select Hours dropdowns
       (client, 16-Oct-26; Select Hours added the same day).

   `#rental_type` ("Car Rental with Chauffer" > Rental Type) was the last
   <select> in the module still opening as a NATIVE OS list, because the
   shared component in assets/js/dahr-checkout-loader.js only scans
   `.dahr-ck` / `.dahr-ckv` and this field is in the SEARCH form, outside
   both. It is now opted in with the marker class `dahr-gsel-scope` on its
   `.hw-input--2icon` wrapper; section 29 lists that class beside the two
   checkout scopes, so the box and the menu come out identical to every
   other dropdown in the portal with no rule duplicated here.

   DESIGN ONLY. The component keeps the same <select> (same id, name,
   options, value) clipped 1x1 beside the generated box and dispatches a
   native `change`, so `syncRentalHoursVisibility()`, the delegated
   `#rental_type` change handler and the jQuery-validate `rental_type` rule
   all run exactly as before.

   `#rental_hours` ("Select Hours", shown only for Rental Type = Hourly) is
   opted in the same way and shares every rule below - it sits in the same
   row as Rental Type, so the two must not look different. Its own column is
   still `display: none` until the Hourly branch of
   `syncRentalHoursVisibility()` shows it; that handler is untouched, and the
   component builds the box for a hidden select exactly as for a visible one.

   The rules below only make the generated control sit in the search row like
   its neighbours: 58px tall with 40px of left padding under 768px, 68px /
   58px from 768px up - the metrics these two selects had before they were
   converted. Scoped to `#rental_type_col` / `#rental_hours_col`, two ids
   that exist once each in the theme, so no other dropdown is affected.
   ========================================================================== */
#rental_type_col .dahr-gsel__control,
#rental_hours_col .dahr-gsel__control {
    min-height: 5.8rem;
    padding-left: 4rem;
    font-size: 1.6rem;
}

/* The wrapper's own chevron would sit on top of the component's. The LEFT
   icon stays - every field in this row has one. */
#rental_type_col .hw-input--iconAfter,
#rental_hours_col .hw-input--iconAfter {
    display: none;
}

/* Both the icon and the generated box are positioned and the box comes
   LATER in the DOM, so without this the control's white background paints
   over the icon and the field loses it. `pointer-events: none` keeps a
   click on the icon opening the dropdown instead of being swallowed. */
#rental_type_col .hw-input--iconBefore,
#rental_hours_col .hw-input--iconBefore {
    z-index: 61;   /* the OPEN box takes 60 (section 29) */
    pointer-events: none;
}

@media (min-width: 768px) {
    #rental_type_col .dahr-gsel__control,
    #rental_hours_col .dahr-gsel__control {
        min-height: 6.8rem;
        padding-left: 5.8rem;
    }
}

/* ==========================================================================
   52. Car SEARCH form: Point to Point bar - Pickup + Drop in one container,
       Date + Pickup Time in one container (client, 16-Oct-26).

   EVERY rule here needs `.dahr-sb-on` on #point_to_point_fields. That class
   is printed by the template only when $dahr_car_searchbar_v2 is true and is
   toggled by the tour_type handler, so:
     - revert  = flip that flag (or add_filter('dahr_car_searchbar_v2',
       '__return_false')) and the form falls straight back to the old layout;
     - Airport Transfer and Car Rental, which REUSE the very same
       `.comman-datetime-pass` row, never carry the class and so are untouched.

   The two wrappers the template adds are inert without it: the arrow is
   hidden and `.dahr-sb__group--when` is `display: contents`, which removes it
   from layout entirely so its two columns sit in the row exactly as before.

   No field id, name, class, handler or validation rule was changed - this is
   wrappers + CSS only.
   ========================================================================== */
.dahr-sb__arrow { display: none; }

/* Out of the layout until the design is switched on. */
.dahr-sb__group--when { display: contents; }

/* ---- the two containers ---- */
.dahr-sb-on .private-plocation,
.dahr-sb-on .dahr-sb__group--when {
    display: flex;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    border: .1rem solid #D9DCE3;
    border-radius: .8rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.dahr-sb-on .private-plocation:focus-within,
.dahr-sb-on .dahr-sb__group--when:focus-within {
    border-color: #3264FF;
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

/* The two rows are bootstrap `.row`s: negative side margins plus a 12px
   gutter padding on every child. Left alone, the VISIBLE box edges sit inside
   their flex boxes and the gaps between the four controls came out 6 / 12 / 6
   instead of one even value (measured). Zeroing the gutter here makes each
   box's visible edge its real edge, and ONE `column-gap` then governs every
   gap in the bar. Gated, so the other two tabs keep bootstrap's own spacing. */
.dahr-sb-on .private-plocation,
.dahr-sb-on .comman-datetime-pass {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

.dahr-sb-on .comman-datetime-pass {
    display: flex;
    column-gap: 1.2rem;
}

.dahr-sb-on .comman-datetime-pass > * {
    padding-left: 0;
    padding-right: 0;
}

.dahr-sb-on .comman-datetime-pass > .dahr-sb__group--when {
    flex: 1.3 1 0;
    min-width: 0;
}

/* Number of Person sits beside that container, not inside it, so it needs its
   own share rather than bootstrap's fixed third. */
.dahr-sb-on .comman-datetime-pass > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* ---- a field inside a container ----
   The columns keep their `col-sm-*` classes (nothing in the markup lost
   them), so their width and padding are overridden rather than removed. */
.dahr-sb-on .private-plocation > [class*="col-"],
.dahr-sb-on .dahr-sb__group--when > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

/* The field chrome moves from the input to the container around it. */
.dahr-sb-on .private-plocation .form-control,
.dahr-sb-on .dahr-sb__group--when .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The divider BETWEEN Date and Pickup Time. Pickup Time keeps a slightly
   bigger share - its placeholder is the longer of the two - but only just:
   at 1.25 it was taking so much that "Select Date" truncated to "S" instead
   (client, 16-Oct-26). Both cells carry ~108px of icon padding and border, so
   what is left for text is the cell minus that, and BOTH have to clear their
   own placeholder (87px for Date, 92px for Pickup Time). */
.dahr-sb-on .dahr-sb__group--when > [class*="col-"] + [class*="col-"] {
    border-left: .1rem solid #E7EAF0;
    /* 1.2, and it is worked out from TEXT ROOM, not from width: Date's
       trailing padding is 1.6rem against Pickup Time's 5rem (it has a real
       chevron), so Pickup Time needs ~34px more box to end up with the same
       room for its placeholder. At 1.2 both finish with ~32px to spare. */
    flex: 1.2 1 0;
}

/* ---- Pickup -> Drop arrow ---- */
.dahr-sb-on .dahr-sb__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    flex: none;
    color: #5A6B85;
}

.dahr-sb-on .dahr-sb__arrow svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* Each field's error span is taken OUT of flow and dropped under the bar.
   Measured without this: a message renders INSIDE the bordered container and
   grows it from 69px to 97px, which reads as the box breaking rather than a
   field error. The column is already `.hw-prelative`, so it is the anchor.
   The span itself is untouched - same element, same class, same show/hide, so
   jQuery-validate's errorPlacement still finds it. */
.dahr-sb-on .private-plocation .error-message,
.dahr-sb-on .dahr-sb__group--when .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .4rem;
    padding-left: 1.4rem;
}

@media (max-width: 575.98px) {
    /* Bootstrap stacks col-sm-* below 576px, so the containers become
       vertical and the divider has to move with them. */
    .dahr-sb-on .private-plocation,
    .dahr-sb-on .dahr-sb__group--when {
        flex-direction: column;
    }

    .dahr-sb-on .dahr-sb__group--when > [class*="col-"] + [class*="col-"] {
        border-left: 0;
        border-top: .1rem solid #E7EAF0;
    }

    .dahr-sb-on .dahr-sb__arrow {
        width: auto;
        height: 2.4rem;
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   53. Car SEARCH form, Point to Point: the whole bar on ONE row
       (client, 16-Oct-26). Alignment only - not one field, container, colour
       or size from section 52 changes; they are simply laid out beside each
       other instead of on two lines.

   This is NOT a new idea in the theme: the COMPACT results bar
   (`.hw-car--transferTabSecond #vehicle-search`, the template's own inline
   <style> ~11123) already makes the form a grid and `#point_to_point_fields`
   a flex row from 992px. Section 53 gives the FULL search form the same
   shape, so the two screens finally read alike.

   Gated twice over:
     - `:has(#point_to_point_fields.dahr-sb-on)` - so it is live only while
       Point to Point is the selected transfer type AND the v2 flag is on
       ($dahr_car_searchbar_v2 = false still reverts everything, §62);
     - `@media (min-width: 1300px)` - below that nothing here applies and
       the form keeps today's stacked rows, which is the responsive fallback.

   /!\ THAT FLOOR WAS 992px UNTIL 16-Oct-26 AND WAS RAISED ON MEASUREMENT.
   The bar is never as wide as the viewport: `.hw-car--transferSection` caps
   at `144rem - 20rem` and `.hw__grid` pads it, so even on a 1920px screen it
   is **1192px**, and four fields plus their icon chrome is all that fits in
   it. Measured slack against each field's own placeholder (minimum of the
   four): 1920 and 1440 -> 27px, 1300 -> 12px, **1200 -> -6px**, i.e. "Pickup
   Location" and "Pickup Time" start to clip at the old floor. Stacked, every
   row gets the full width and the worst case is 94px of slack. So falling
   back early is the honest answer rather than shipping the very thing this
   round was raised to fix - a bar reading "S" and "Pick...". Measure before
   lowering it again, and raise it if any chrome is ever added.

   `:not(.hw-car--transferTabSecond …)` is deliberate: the compact bar has its
   own grid with its own tracks, and two grid definitions on one element would
   fight. The results screen is left exactly as it is.

   /!\ EVERY rule below keys on `dahr-sb-1line`, NOT on `dahr-sb-on`, and the
   difference is the whole point:
       `dahr-sb-on`     = "the shared Date | Pickup Time row reads as ONE
                           container" - wanted on ALL THREE transfer types;
       `dahr-sb-1line`  = "this tab fits on ONE line" - Point to Point ONLY.
   They were the same class until 16-Oct-26, and that is exactly why section
   53 leaked twice: onto Car Rental, where `margin-top: 0` killed the gap
   between its two rows (measured 0.67px), and onto Airport Transfer, where
   `display: flex` stretched the Date | Pickup Time container to the height of
   the whole flight block (measured 164px). Anything added below assumes one
   line, so it belongs on `dahr-sb-1line`.

   ========================================================================== */
@media (min-width: 1300px) {
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #vehicle-search:has(#point_to_point_fields.dahr-sb-1line) {
        display: grid;
        /* ONE column: the four fields take the whole line and Search drops
           to a line of its own underneath (client, 16-Oct-26). It used to be
           a second `auto` track beside them, which ate ~170px of the bar and
           left Date / Pickup Time too narrow for their own placeholders
           ("S" / "Pick..." - measured 155px against the 168px needed). */
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    /* "Choose Transfer Type" keeps its own full-width line above the bar. */
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #vehicle-search:has(#point_to_point_fields.dahr-sb-1line) > #private-transfer-type {
        grid-column: 1 / -1;
    }

    /* The two rows become the two halves of one line. */
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #point_to_point_fields.dahr-sb-1line {
        display: flex;
        column-gap: 1.2rem;
        min-width: 0;
    }

    /* Share of the line. Pickup + Drop hold two fields and Date + Time +
       Person hold three, so the second block takes the bigger share - with
       the old 1.15 / 1 the three-field side was the one that ran out of
       room. Measured at 1440px: Date 184px for an 87px placeholder, Pickup
       Time 229px for 92px, so neither can truncate again. */
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #point_to_point_fields.dahr-sb-1line > .private-plocation {
        flex: 1 1 0;
        min-width: 0;
    }

    .hw-car--transferTab:not(.hw-car--transferTabSecond) #point_to_point_fields.dahr-sb-1line > .comman-datetime-pass {
        flex: 1.3 1 0;
        min-width: 0;
        /* `.hw-gapR--15 + .hw-gapR--15` gives the second row its top margin;
           side by side there is no second row. The compact bar zeroes the
           same thing (template inline <style> ~11139). */
        margin-top: 0;
    }

    /* Date + Pickup Time hold two fields against Number of Person's one, so
       they take the bigger share of that block. Measured at 1440px: Date
       gets 112px of text room for an 87px placeholder and Pickup Time 130px
       for 92px, with Number of Person still 290px wide. */
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #point_to_point_fields.dahr-sb-1line > .comman-datetime-pass > .dahr-sb__group--when {
        flex: 1.6 1 0;
    }

    /* Search on its own line, hard right. The element is already
       `d-flex justify-content-end`, so in a single-column grid it is full
       width and its own flex end-justification does the alignment - no
       `justify-self` needed, and the button keeps its natural height (it was
       stretched to the 77px field height while it shared their line). */
    .hw-car--transferTab:not(.hw-car--transferTabSecond) #vehicle-search:has(#point_to_point_fields.dahr-sb-1line) > .hw-col--searchBtn {
        align-self: start;
        margin-top: 1.2rem;
    }
}

/* ==========================================================================
   54. Car SEARCH form, Point to Point: clear-location button + a Places
       panel that spans the whole route container (client, 16-Oct-26).

   Companion to sections 52 / 53 and gated the same way, so the
   $dahr_car_searchbar_v2 revert (§62 in CLAUDE.md) still takes all of it
   away: the button defaults to `display: none` exactly like
   `.dahr-sb__arrow`, and the panel rule needs a class only this bar's own
   script sets.
   ========================================================================== */

/* Inert until the design is switched on. */
.dahr-sb__clear { display: none; }

.dahr-sb-on .private-plocation .hw-input--2icon { position: relative; }

/* Shown ONLY while the field holds a value, and `:placeholder-shown` is what
   makes that free: both inputs carry a placeholder, so an empty field matches
   it and the button stays away. No JS tracks the value - which matters,
   because Google writes the value itself on a prediction click and does not
   reliably fire `input`. The button must therefore stay a LATER SIBLING of
   its input inside `.hw-input--2icon`, or `~` stops matching. */
.dahr-sb-on .private-plocation .form-control:not(:placeholder-shown) ~ .dahr-sb__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F1F3F7;
    color: #5A6B85;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.dahr-sb-on .private-plocation .dahr-sb__clear:hover,
.dahr-sb-on .private-plocation .dahr-sb__clear:focus-visible {
    background: #E3E8F0;
    color: #0F294D;
}

.dahr-sb-on .private-plocation .dahr-sb__clear svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* ---- reclaim the dead trailing padding ----
   `.hw-input--2icon` reserves a flat 5rem on the right of every field for a
   trailing chevron. Measured, only ONE of these five fields actually has one:
   Pickup Time's, 2.4rem wide ending 2rem from the edge, so its 5rem is right
   and is left alone. Date has no trailing icon at all and the two locations
   have theirs commented out in the markup, so on a bar this tight that space
   was simply lost to the placeholder - which is what let "Select Date"
   render as "S" (client, 16-Oct-26).

   The locations keep 4rem, not 1.6rem: that is where the clear button sits
   (2.4rem wide, 1rem from the edge), so the text still stops 6px clear of it.
   Gated like everything else here, so the other two tabs keep the theme's
   padding. */
.dahr-sb-on .dahr-sb__group--when #pickup_date {
    padding-right: 1.6rem !important;
}

/* The same on the left. `.hw-input--2icon` pads 5.8rem for a leading icon
   that measures 2.4rem wide and ends 4.4rem in, so 1.4rem of that is empty -
   and it is empty FIVE times across one bar. 5rem keeps a .6rem gap between
   the icon and the text and hands ~40px back to the placeholders. */
.dahr-sb-on .private-plocation .form-control,
.dahr-sb-on .dahr-sb__group--when .form-control {
    padding-left: 5rem !important;
}

.dahr-sb-on .private-plocation .form-control {
    padding-right: 4rem !important;
}

/* ---- the prediction panel spans the whole route container ----
   Google appends `.pac-container` to <body> and writes `left` / `top` /
   `width` INLINE on it on every keystroke, so this is the one place those
   two horizontal values are taken back - `!important` beats an inline style.
   The two custom properties are published by the bar's own script while a
   P2P location field has focus (and removed with the class the moment it
   loses focus, so the other six Places inputs in that template are never
   affected). Without the class, or without the properties, every panel keeps
   Google's own width exactly as before. Section 35 still paints the rows. */
html.dahr-pac-p2p .pac-container {
    left: var(--dahr-pac-left, auto) !important;
    width: var(--dahr-pac-width, auto) !important;
    max-width: none !important;
}

/* ==========================================================================
   55. Car SEARCH form, Point to Point: the COMPACT results bar
       (`.hw-car--transferTabSecond`, client 16-Oct-26).

   Sections 52 / 54 reach this screen too - they are gated on `.dahr-sb-on`,
   which the P2P tab carries in both states - but section 53's one-line grid
   deliberately does not (`:not(.hw-car--transferTabSecond)`), because the
   compact bar has a grid of its own in the template's inline <style> ~11138.
   This block is the compact half of the same work, and it is gated three
   ways: the compact class, `#point_to_point_fields.dahr-sb-on`, and the same
   992px floor the compact grid itself uses. Airport Transfer and Car Rental
   drop `.dahr-sb-on` in the tour_type handler, so none of it reaches them,
   and the hourly `is-rental` layout is likewise untouched.

   /!\ THE BUG THIS FIXES IS A REAL COLLISION, worth understanding before
   touching either side. The compact bar has carried this rule since long
   before the v2 work:

       #point_to_point_fields .private-plocation > div {
           flex: 1 1 50%; min-width: 20rem; }

   It was written when `.private-plocation` had exactly TWO children - Pickup
   and Drop. Section 62 inserted a third, `.dahr-sb__arrow`, as a sibling
   between them, and `> div` matched it: the arrow was handed `flex: 1 1 50%`
   AND a 20rem floor, so it rendered **200px wide** (measured) in the middle
   of the route box. That is the "location input takes a lot of space" the
   client saw - a 200px hole, not an oversized field. Section 52's
   `width: 3.4rem; flex: none` lost to it on specificity (0,3,0 against
   (1,3,0)), which is why the arrow needs restating here rather than fixing
   in 52.

   Lesson for the next person: adding a child to `.private-plocation` or to
   `.comman-datetime-pass` can silently change the layout of the OTHER screen
   through these `> div` rules. Check both states.
   ========================================================================== */
@media (min-width: 992px) {
    /* The arrow is a separator, never a column. */
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .private-plocation > .dahr-sb__arrow {
        flex: 0 0 3.4rem;
        width: 3.4rem;
        min-width: 0;
        max-width: none;
    }

    /* Share the line by proportion instead of "the addresses absorb
       everything". The template's own rule leaves `.comman-datetime-pass` at
       `flex: 0 1 auto`, so every spare pixel went to the route box while
       Date and Pickup Time stayed at their content width and truncated to
       "Sat, 24 ..." - the same complaint the full bar had, on the same two
       fields. */
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .private-plocation {
        flex: 1 1 0;
    }

    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .comman-datetime-pass {
        flex: 1.15 1 0;
    }

    /* The 20rem floor on each address was what made "absorb everything"
       safe; with a proportional basis it only stops the flex maths working,
       so it goes - the proportion keeps both addresses comfortably wider
       than that floor anyway (measured 241px each at 1920). */
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .private-plocation > [class*="col-"] {
        flex: 1 1 0;
        min-width: 0;
    }

    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .dahr-sb__group--when {
        flex: 1.8 1 0;
    }

    /* Date / Pickup Time sit closer to even here than on the full bar.
       Section 52's 1.2 is tuned for a PLACEHOLDER ("Pickup Time", 92px); on
       this screen both fields hold a real VALUE, and "Sat, 24 Oct 26" is the
       longer of the two, so the extra width has to go the other way or the
       date renders as "Sat, 24 ..." - which is what the client reported.
       An EVEN split is right here: Date needs ~100px of text plus 1.6rem of
       trailing padding, Pickup Time ~70px plus the 5rem its chevron needs,
       which comes out within a few px of each other. Measured after: Date
       +10px to spare, Pickup Time +16px. */
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #point_to_point_fields.dahr-sb-on .dahr-sb__group--when > [class*="col-"] + [class*="col-"] {
        flex: 1 1 0;
    }
}

/* ==========================================================================
   56. Car SEARCH form: the CAR RENTAL WITH CHAUFFEUR bar (client, 16-Oct-26).

   The last of the three transfer types to be brought onto the §62-64 design.
   It reuses that language rather than inventing a second one: Pickup + Drop
   share ONE bordered container with the same arrow between them, and the
   Date | Pickup Time container and Number of Person come free, because this
   tab now carries `dahr-sb-on` on `#point_to_point_fields` as well - the SAME
   class Point to Point uses - so section 52 styles that shared row identically
   on both tabs. Nothing in 52 was edited to make that work.

   What differs, and why this needs a section of its own:
     - This tab has a Rental Type select (and Select Hours when Hourly) that
       Point to Point does not, so its own row is laid out here;
     - and section 53's one-LINE grid never reaches this tab, because 53 keys
       on `dahr-sb-1line` and only Point to Point carries it (see the warning
       at the top of 53). Five boxes plus Search on one line is exactly the
       squeeze §64 measured and rejected, so Car Rental keeps two field rows
       with Search below them, right-aligned - the same shape, one row taller.
       /!\ This was first done with `:not(:has(#car_rental_fields.is-rental))`
       on 53's own selectors; the class split replaced that, so do not add
       such a guard back - it would be dead weight.

   Gated on `.dahr-cr-on`, printed by the SAME `$dahr_car_searchbar_v2` flag
   and toggled by the same `tour_type` handler, so the one-flag revert in §62
   takes this away too: the route wrapper is `display: contents` by default
   and the arrow and the clear button are already `display: none` from 52/54.

   /!\ `.dahr-cr__route` is a new direct `div` child of
   `#car_rental_fields > .row`, and the COMPACT results bar has its own
   `#car_rental_fields.is-rental > .row > div { flex: 1 1 auto; min-width:
   20rem }` - the very rule that cost 200px in §64b. Here it is harmless and
   even right (the route box SHOULD absorb the leftover), but the arrow had to
   be restated for that screen all the same. Check both states after touching
   this row.
   ========================================================================== */

/* Out of the layout until the design is switched on. */
.dahr-cr__route { display: contents; }

@media (min-width: 992px) {
    /* ---- row 1: Rental Type [+ Select Hours] + the route container ---- */
    .dahr-cr-on > .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        column-gap: 1.2rem;
        flex-wrap: nowrap;
    }

    .dahr-cr-on > .row > * {
        padding-left: 0;
        padding-right: 0;
    }

    /* The two selects hold short values ("Hourly Rental", "5 Hours"), so they
       take the smaller shares and the two addresses - which can run to a full
       Google Places string - take the rest. */
    .dahr-cr-on > .row > #rental_type_col {
        flex: 1 1 0;
        min-width: 0;
    }

    .dahr-cr-on > .row > #rental_hours_col {
        flex: .75 1 0;
        min-width: 0;
    }

    .dahr-cr-on > .row > .dahr-cr__route {
        display: flex;
        align-items: stretch;
        flex: 2.1 1 0;
        min-width: 0;
    }
}

/* ---- the route container, identical to .private-plocation in section 52 ---- */
.dahr-cr-on .dahr-cr__route {
    border: .1rem solid #D9DCE3;
    border-radius: .8rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.dahr-cr-on .dahr-cr__route:focus-within {
    border-color: #3264FF;
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

.dahr-cr-on .dahr-cr__route > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

/* The field chrome moves from the input to the container around it. */
.dahr-cr-on .dahr-cr__route .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 5rem !important;
    padding-right: 4rem !important;
}

.dahr-cr-on .dahr-cr__route .dahr-sb__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    flex: 0 0 3.4rem;
    color: #5A6B85;
}

.dahr-cr-on .dahr-cr__route .dahr-sb__arrow svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* Same treatment as section 52: a field error is dropped UNDER the bar rather
   than growing the bordered box from the inside. The column is already
   `.hw-prelative`, so it is the anchor. */
.dahr-cr-on .dahr-cr__route .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .4rem;
    padding-left: 1.4rem;
}

/* ---- the clear (x) button, section 54's control on this tab ---- */
.dahr-cr-on .dahr-cr__route .hw-input--2icon { position: relative; }

.dahr-cr-on .dahr-cr__route .form-control:not(:placeholder-shown) ~ .dahr-sb__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F1F3F7;
    color: #5A6B85;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.dahr-cr-on .dahr-cr__route .dahr-sb__clear:hover,
.dahr-cr-on .dahr-cr__route .dahr-sb__clear:focus-visible {
    background: #E3E8F0;
    color: #0F294D;
}

.dahr-cr-on .dahr-cr__route .dahr-sb__clear svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* ---- the COMPACT results bar ----
   The same collision §64b documents: `#car_rental_fields.is-rental > .row >
   div` hands every direct child `flex: 1 1 50%` and a 20rem floor, and the
   arrow is now one of them. It is a separator, never a column. */
@media (min-width: 992px) {
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #car_rental_fields.dahr-cr-on .dahr-cr__route > .dahr-sb__arrow {
        flex: 0 0 3.4rem;
        width: 3.4rem;
        min-width: 0;
        max-width: none;
    }

    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search #car_rental_fields.dahr-cr-on .dahr-cr__route > [class*="col-"] {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    /* Below the grid breakpoint bootstrap stacks the columns again, so the
       container has to follow - exactly what section 52 does for the Point to
       Point one under 576px. */
    .dahr-cr-on .dahr-cr__route {
        display: flex;
        flex-direction: column;
    }

    .dahr-cr-on .dahr-cr__route .dahr-sb__arrow {
        width: auto;
        height: 2.4rem;
        flex: none;
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   56.4 Car Rental: every box is built the SAME way, so they cannot differ in
        height (client, 16-Oct-26 - "input height is not same").

   /!\ THE CAUSE IS STRUCTURAL, which is why the fix is too. The route and the
   Date | Pickup Time boxes are CONTAINERS: their visible edge is the
   container's own border, so the box measures `input + 2 x border`. Rental
   Type and Select Hours were still the ORIGINAL shape - the border on the
   input itself - so their visible box measured `input`, two pixels shorter,
   and the bordered boxes in one row did not line up. The flex row does
   stretch the COLUMN, but a column is invisible; what the agent sees is the
   `.hw-input--2icon` inside it, which kept its content height and sat at the
   top of the stretched column. On the client's render that read as a clearly
   shorter box.

   So the chrome moves off the input and onto the wrapper here too. Now every
   box in the bar - Rental Type, Select Hours, the route container, the
   Date | Pickup Time container - is `1px border + input + 1px border`, and
   they are equal at EVERY breakpoint without a single hard-coded height
   (the theme steps `.form-control--large` 5.8 / 6.8 / 7.6rem at base / 768 /
   1400, and all four boxes follow it together because they all wrap one).
   Number of Person needs nothing: it is a flex sibling of the Date | Pickup
   Time container, so section 52's row stretches it to match.

   Do NOT "fix" this with a min-height - that reintroduces the three theme
   breakpoints as magic numbers in a second place, and they would silently
   drift apart.
   ========================================================================== */
.dahr-cr-on > .row > [class*="col-"] > .hw-input--2icon {
    border: .1rem solid #D9DCE3;
    border-radius: .8rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.dahr-cr-on > .row > [class*="col-"] > .hw-input--2icon:focus-within {
    border-color: #3264FF;
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

.dahr-cr-on > .row > [class*="col-"] > .hw-input--2icon > .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The column stretches to the row; the box inside it has to follow, or it
   sits short at the top of a taller column - which is the symptom above. */
@media (min-width: 992px) {
    .dahr-cr-on > .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .dahr-cr-on > .row > [class*="col-"] > .hw-input--2icon {
        flex: 1 1 auto;
    }
}

/* The error span was in normal flow under the field; inside a flex column it
   would be stretched into the box. Out of flow, under the bar, exactly as
   section 52 does for Point to Point and 56 for the route. */
.dahr-cr-on > .row > [class*="col-"] > .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .4rem;
    padding-left: 1.4rem;
}

/* ==========================================================================
   56.5 Car Rental: the GENERATED dropdown inside the box, and the compact
        bar's trailing gap (client, 16-Oct-26).

   /!\ THE HARNESS MISSED THIS, and the reason is worth recording. Rental
   Type is not a plain `<select>` on screen: section 61 opts it into the
   shared `.dahr-gsel` component, which hides the native select and builds
   `.hw-input--2icon > .dahr-gsel > .dahr-gsel__control` beside it. A test
   page that does not load `assets/js/dahr-checkout-loader.js` has no
   `.dahr-gsel` at all, so 56.4's "the box is the wrapper" change looked
   right while on the real page it put a border around a control that
   already had one. **Load the component in the harness** - the same lesson
   as the runtime-injected CSS in section 48.

   Two symptoms, one cause:
     - `.dahr-gsel__control` carries its own `1px #D7D7D7` + `.5rem` radius
       (section 29), so with 56.4's border on the wrapper the field drew
       TWO borders, the inner one reading as a stray line near the bottom;
     - and it carries its own `min-height` (section 51: 5.8 / 6.8rem), which
       no longer tracks the box. Measured: wrapper 77.33, control 68 - the
       control sat 9px short at the TOP of the box, which is what read as
       "the text is not centred".
   So inside this bar the control gives up its own chrome and fills the
   wrapper. It is already `display: flex; align-items: center`, so filling
   the box IS the vertical centring - no extra rule needed.
   /!\ `#rental_type_col` is an ID, so section 51's `#rental_type_col
   .dahr-gsel__control` is (1,1,0); these selectors carry the id too and
   reach (1,5,0). Drop the id and section 51 silently wins again.
   ========================================================================== */
.dahr-cr-on > .row > #rental_type_col > .hw-input--2icon > .dahr-gsel,
.dahr-cr-on > .row > #rental_hours_col > .hw-input--2icon > .dahr-gsel {
    height: 100%;
}

.dahr-cr-on > .row > #rental_type_col > .hw-input--2icon > .dahr-gsel > .dahr-gsel__control,
.dahr-cr-on > .row > #rental_hours_col > .hw-input--2icon > .dahr-gsel > .dahr-gsel__control {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
    height: 100%;
}

/* ---- the compact results bar ends 12px short of the row above ----
   The compact grid is `1fr auto auto` (template inline <style> ~11139) and
   only TWO of those tracks are ever filled, so the third sits at 0px with a
   full `column-gap` in front of it: measured `1112px 56px 0px` and the
   Search button finishing at 1536 while the row above reached 1548. Letting
   the button's wrapper span to the end absorbs that gap instead of leaving
   it hanging off the right edge.
   /!\ Scoped to this tab on purpose. Point to Point's compact bar has the
   same third track, but nobody has asked for it and widening the fix would
   move a screen the client did not report. */
@media (min-width: 992px) {
    .hw-car--transferTab.hw-car--transferTabSecond #vehicle-search:has(#car_rental_fields.dahr-cr-on) > .hw-col--searchBtn {
        grid-column: 2 / -1;
    }
}

/* ==========================================================================
   57. Car SEARCH form: the AIRPORT TRANSFER bar (client, 16-Oct-26).

   The third and last transfer type, brought onto the §62-65 design. Same
   language again, nothing new invented: Flight Number + Flight Date share
   ONE container, Airport Terminal -> Drop Location share a route container
   with the same arrow and the same clear (x) button, and the Date | Pickup
   Time container plus Number of Person come from section 52 because this tab
   now carries `dahr-sb-on` as well. Shape matches Car Rental: two field rows
   with Search below them, right-aligned.

   /!\ THIS TAB WAS VISIBLY BROKEN BEFORE THIS SECTION EXISTED, and the cause
   is worth keeping. `#airport_transfer_fields` is NESTED inside
   `#point_to_point_fields`, so the moment that wrapper carried `dahr-sb-on`
   section 53 treated the tab as a one-line bar: `#point_to_point_fields`
   went `display: flex`, the flight block and the Date | Pickup Time block
   became flex items side by side, and the container STRETCHED to the flight
   block's two-row height - measured **164px** against a 77px field. That is
   the tall empty box the client reported. Section 53 now keys on
   `dahr-sb-1line`, which only Point to Point carries, so it can no longer
   reach here.

   Gated on `.dahr-at-on`, printed by the SAME `$dahr_car_searchbar_v2` flag,
   so §62's one-flag revert takes this away too: both wrappers are
   `display: contents` by default and the arrow and clear button are already
   `display: none` from 52/54.
   ========================================================================== */

/* Out of the layout until the design is switched on. */
.dahr-at__flight,
.dahr-at__route { display: contents; }

@media (min-width: 1200px) {
    /* /!\ 1200px, NOT 992 - raised on measurement, the same call section 53
       makes for Point to Point. The four fields on this line need ~764px of
       text plus padding; the bar is 901px at a 1024 viewport and 873px at
       996, where "Flight Number (e.g. EK539)" came out 20-28px short and
       rendered clipped. At 1200 the worst field still has room to spare, and
       below it the blocks stack and every row gets the full bar. Do not lower
       it without re-measuring. */
    /* The flight pair and the route sit on ONE line.
       /!\ `#flight_leg_row` (the Arrival / Departure switch) and
       `#ixigo_status_bar` are CONDITIONAL siblings that live BETWEEN the two
       field rows in the DOM. Left alone they would break the line in half the
       moment a flight lookup runs. `order` pins the switch above the fields
       and the status message below them, so the bar never jumps while the
       lookup is in flight. */
    .dahr-at-on {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.2rem;
        row-gap: 1.2rem;
        align-items: stretch;
    }

    /* /!\ All three rows carry an INLINE `margin-bottom:12px` in the markup
       (template ~1546 / ~1563 / ~1662), so nothing but `!important` can take
       it off. It HAS to come off `#ixigo_lookup_row`: that row is now a flex
       item BESIDE the route container, and a bottom margin on one item of a
       line raises the whole line's cross size - the flight box then rendered
       77.33px inside an 89.33px line while the route box was stretched to the
       full 89.33 (measured). The gaps come from `row-gap` above instead, so
       the conditional rows keep their spacing when they appear. */
    .dahr-at-on > #flight_leg_row,
    .dahr-at-on > #ixigo_lookup_row,
    .dahr-at-on > #ixigo_status_bar {
        margin-bottom: 0 !important;
    }

    .dahr-at-on > #flight_leg_row {
        order: -1;
        flex: 0 0 100%;
    }

    .dahr-at-on > #ixigo_status_bar {
        order: 1;
        flex: 0 0 100%;
    }

    /* /!\ The FLIGHT block takes the bigger share, not the route - measured
       from text room, not from field count: "Flight Number (e.g. EK539)" is
       198px of text where "Airport Terminal" is 121px and "Drop Location"
       106px. With the shares the other way round Flight Number was 37px short
       and rendered clipped. Inside the block the number field gets 1.3 against
       the date's 1 for the same reason. */
    .dahr-at-on > #ixigo_lookup_row {
        flex: 1 1 0;
        min-width: 0;
    }

    .dahr-at-on > .row:not(#flight_leg_row):not(#ixigo_lookup_row) {
        flex: 1.05 1 0;
        min-width: 0;
    }

    /* Both inner rows lose the bootstrap gutter, the same reset section 52
       makes, so one `column-gap` governs every gap in the bar. */
    .dahr-at-on > .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        column-gap: 1.2rem;
        flex-wrap: nowrap;
    }

    .dahr-at-on > .row > * {
        padding-left: 0;
        padding-right: 0;
    }

    .dahr-at-on .dahr-at__flight,
    .dahr-at-on .dahr-at__route {
        display: flex;
        align-items: stretch;
        flex: 1 1 0;
        min-width: 0;
    }

    /* The column stretches to the row; the box inside it must follow, or it
       sits short at the top - §65b's lesson, same shape here. */
    .dahr-at-on > .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .dahr-at-on > .row > [class*="col-"] > .hw-input--2icon {
        flex: 1 1 auto;
    }
}

/* ---- the two containers, identical to section 52's ---- */
.dahr-at-on .dahr-at__flight,
.dahr-at-on .dahr-at__route {
    border: .1rem solid #D9DCE3;
    border-radius: .8rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.dahr-at-on .dahr-at__flight:focus-within,
.dahr-at-on .dahr-at__route:focus-within {
    border-color: #3264FF;
    box-shadow: 0 0 0 .3rem rgba(50, 100, 255, .12);
}

.dahr-at-on .dahr-at__flight > [class*="col-"],
.dahr-at-on .dahr-at__route > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

/* The divider between Flight Number and Flight Date - the route has its
   arrow instead, exactly as on the other two tabs. */
.dahr-at-on .dahr-at__flight > [class*="col-"] + [class*="col-"] {
    border-left: .1rem solid #E7EAF0;
}

/* The field chrome moves from the input to the container around it. */
.dahr-at-on .dahr-at__flight .form-control,
.dahr-at-on .dahr-at__route .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 5rem !important;
}

.dahr-at-on .dahr-at__route .form-control {
    padding-right: 4rem !important;
}

/* Neither flight field has a trailing icon, so the theme's flat 5rem right
   padding is dead space - the same reclaim section 54 makes on Point to
   Point. The locations keep 4rem: the clear button lives there. */
.dahr-at-on .dahr-at__flight .form-control {
    padding-right: 1.6rem !important;
}

.dahr-at-on .dahr-at__flight > [class*="col-"]:first-child {
    flex: 1.3 1 0;
}

.dahr-at-on .dahr-at__route .dahr-sb__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    flex: 0 0 3.4rem;
    color: #5A6B85;
}

.dahr-at-on .dahr-at__route .dahr-sb__arrow svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* Errors drop under the bar instead of growing the bordered box. */
.dahr-at-on .dahr-at__flight .error-message,
.dahr-at-on .dahr-at__route .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .4rem;
    padding-left: 1.4rem;
}

/* ---- the clear (x) button, section 54's control on this tab ---- */
.dahr-at-on .dahr-at__route .hw-input--2icon { position: relative; }

.dahr-at-on .dahr-at__route .form-control:not(:placeholder-shown) ~ .dahr-sb__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F1F3F7;
    color: #5A6B85;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.dahr-at-on .dahr-at__route .dahr-sb__clear:hover,
.dahr-at-on .dahr-at__route .dahr-sb__clear:focus-visible {
    background: #E3E8F0;
    color: #0F294D;
}

.dahr-at-on .dahr-at__route .dahr-sb__clear svg {
    width: 1.2rem;
    height: 1.2rem;
}

@media (max-width: 1199.98px) {
    /* Bootstrap stacks the columns again below the grid breakpoint, so the
       containers follow - the same fallback sections 52 and 56 give. */
    .dahr-at-on .dahr-at__flight,
    .dahr-at-on .dahr-at__route {
        display: flex;
        flex-direction: column;
    }

    .dahr-at-on .dahr-at__flight > [class*="col-"] + [class*="col-"] {
        border-left: 0;
        border-top: .1rem solid #E7EAF0;
    }

    .dahr-at-on .dahr-at__route .dahr-sb__arrow {
        width: auto;
        height: 2.4rem;
        flex: none;
        transform: rotate(90deg);
    }
}