/* Home form ([transcity_onepage]) refinements, loaded after st-onepage.css.
 * Mirrors the V2 vehicle card, trust line and sticky actions. V2 pages never
 * get .st-onepage-enhanced, so their own stylesheet stays authoritative.
 */
#st-onepage-wrapper.st-onepage-enhanced {
    --oe-ink: #172b4d;
    --oe-muted: #526173;
    --oe-line: #d7dde5;
    --oe-accent: #087fca;
    --oe-ease: cubic-bezier(.23,1,.32,1);
}

/* Trust line: Google rating + tap-to-call, above each primary action. */
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex: 0 0 100%; font-size: 13px; line-height: 1.2; color: var(--oe-muted); }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: inherit; text-decoration: none; white-space: nowrap; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust__stars { color: #00a86b; font-size: 14px; letter-spacing: 1px; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust__rating strong { color: var(--oe-ink); font-weight: 700; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust__rating span:last-child { text-decoration: underline; text-decoration-color: #c9d1db; text-underline-offset: 3px; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust__phone { color: var(--oe-ink) !important; font-weight: 600; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-trust__phone svg { color: var(--oe-accent); }

/* Sticky action bars: route, trip details, vehicle choice and payment. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-actions--home,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-planner .st-onepage-actions,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicles-actions,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-paybar {
    position: sticky !important; bottom: 0; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 8px 10px;
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96); border-top: 1px solid #e8ecf1;
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicles-actions.st-is-hidden { display: none !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-actions--home > button,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicles-actions > button { flex: 1 1 0; min-width: 0; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-planner .st-onepage-actions .st-onepage-primary-btn,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-paybar #st-onepage-book-now { flex: 1 1 100%; width: 100%; margin: 0; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicles-actions #st-onepage-vehicles-open-extras { flex: 1 1 100%; order: 3; min-height: 36px; padding: 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--oe-accent) !important; }

/* Back: outline only, no fill. */
:is(#st-onepage-wrapper.st-onepage-enhanced, .st-onepage-modal-portal) .st-onepage-back-btn {
    min-height: 40px !important; padding: 8px 14px !important;
    border: 1.5px solid var(--oe-accent, #087fca) !important; background: transparent !important;
    box-shadow: none !important; color: var(--oe-accent, #087fca) !important;
    font-size: 14px !important; font-weight: 700 !important;
}
:is(#st-onepage-wrapper.st-onepage-enhanced, .st-onepage-modal-portal) .st-onepage-back-btn:hover { background: transparent !important; color: #066aa9 !important; border-color: #066aa9 !important; }

/* Vehicle step on phones: no map, the form takes the full screen.
 * order="classic" keeps the original map + bottom sheet. */
@media (max-width: 959px) {
    #st-onepage-wrapper.st-onepage-enhanced:not(.st-order-classic).is-vehicles-active .st-onepage-map-stage { visibility: hidden !important; }
    #st-onepage-wrapper.st-onepage-enhanced:not(.st-order-classic).is-vehicles-active .st-onepage-sheet { top: 0 !important; bottom: 0 !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; border-radius: 0 !important; }
    /* The sheet is the only scroller, so sticky bars stick to its bottom. */
    #st-onepage-wrapper.st-onepage-enhanced :is(.st-onepage-home, .st-onepage-planner, #st-view-vehicles, #st-view-checkout) { overflow: visible !important; max-height: none !important; }
}

/* Selected total inside the vehicle step (moved there on phones). */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot #st-onepage-map-summary-trigger {
    display: grid !important; position: static !important; inset: auto !important; transform: none !important;
    grid-template-columns: 1fr auto; grid-template-areas: 'label hint' 'amount hint';
    align-items: center; gap: 0 12px; width: 100%; max-width: none; margin: 0 0 14px; padding: 12px 16px;
    border: 1px solid #cfe6f6; border-radius: 14px; background: #f2f9fe !important; box-shadow: none !important; text-align: left;
}
#st-onepage-wrapper.st-onepage-enhanced:not(.has-selected-vehicle) .st-onepage-summary-slot #st-onepage-map-summary-trigger { display: none !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot .st-onepage-map-summary-card__head { grid-area: label; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot .st-onepage-map-summary-card__label { font-size: 12px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--oe-muted) !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot .st-onepage-map-summary-card__amount { grid-area: amount; font-size: 22px !important; font-weight: 700; line-height: 1.2; color: var(--oe-ink) !important; font-variant-numeric: tabular-nums; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot .st-onepage-map-summary-card__hint { grid-area: hint; display: inline-flex !important; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #cfe6f6; color: var(--oe-accent); font-size: 13px !important; font-weight: 600; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-summary-slot .st-onepage-map-summary-card__toll { display: none !important; }

/* Vehicle cards (same structure as V2). */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-list { display: grid; gap: 12px; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card {
    position: relative; display: grid !important; grid-template-columns: 96px minmax(0,1fr);
    grid-template-areas: 'image info' 'price price' 'breakdown breakdown';
    align-items: center; gap: 12px 14px; height: auto !important; min-height: 0 !important;
    padding: 16px !important; border: 1px solid var(--oe-line) !important; border-radius: 18px !important;
    background: #fff !important; box-shadow: none !important; color: var(--oe-ink) !important; cursor: pointer;
    transition: border-color 160ms ease, box-shadow 200ms var(--oe-ease), transform 160ms var(--oe-ease);
}
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card:active { transform: scale(.99); }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card.is-selected { padding: 15px !important; border: 2px solid var(--oe-accent) !important; box-shadow: 0 0 0 4px rgba(8,127,202,.10) !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card.is-selected::after {
    content: ''; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--oe-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__img { grid-area: image; width: 96px !important; height: 64px !important; object-fit: contain; border-radius: 12px; background: #f3f6f9; transform: none !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__info { grid-area: info; width: 100%; min-width: 0; padding-right: 22px; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__headline { display: block; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__name { display: block; color: var(--oe-ink) !important; font-size: 16px !important; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__star { display: none !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__meta span { padding: 2px 8px; border-radius: 999px; background: #eef3f8; color: #3d4b5c !important; font-size: 12px !important; font-weight: 600; line-height: 1.5; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__price {
    grid-area: price; display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: 'label amount' 'eta amount';
    align-items: center; gap: 0 12px; width: 100%; padding-top: 12px; border-top: 1px solid #edf0f4; text-align: left;
}
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__label { grid-area: label; align-self: end; color: var(--oe-ink) !important; font-size: 13px !important; font-weight: 600; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__eta { grid-area: eta; align-self: start; color: var(--oe-muted) !important; font-size: 13px !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__eta::before { content: 'Approx. '; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__amount { grid-area: amount; color: var(--oe-ink) !important; font-size: 24px !important; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-card-breakdown { grid-area: breakdown; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 0; font-size: 12px; line-height: 1.5; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-card-breakdown div { display: flex; gap: 4px; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-card-breakdown dt { margin: 0; color: var(--oe-muted); font-weight: 400; }
#st-onepage-wrapper.st-onepage-enhanced .st-v2-card-breakdown dd { margin: 0; color: var(--oe-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Price breakdown modal (both forms): plain white, square on phones. */
:is(#st-onepage-wrapper, .st-onepage-modal-portal, .st-booking-v2-portal) .st-onepage-map-summary-drawer { background: #fff !important; }
@media (max-width: 767px) {
    :is(#st-onepage-wrapper, .st-onepage-modal-portal, .st-booking-v2-portal) .st-onepage-map-summary-drawer { border-radius: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    #st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card { transition: none; }
    #st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card:active { transform: none; }
}

/* Sticky bars: a hairline plus a faint upward shadow so the list scrolling
 * beneath never blends into the action area. */
#st-onepage-wrapper.st-onepage-enhanced :is(.st-onepage-actions--home, .st-onepage-planner .st-onepage-actions, .st-onepage-vehicles-actions, .st-onepage-paybar) {
    border-top: 1px solid #e3e8ee;
    box-shadow: 0 -6px 16px -6px rgba(23, 43, 77, .12);
}

/* Trust line sits on its own row above the buttons, which share one row. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-actions .st-v2-trust,
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicles-actions .st-v2-trust { order: -1; }

/* PayPal hides "Pay & Book" and renders its own buttons elsewhere: the bar
 * then stops being sticky instead of floating a lone trust line. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-paybar:has(> #st-onepage-book-now[style*="none"]) {
    position: static !important; padding: 0; border: 0; box-shadow: none; background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Vehicle without room for the requested golf clubs. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card.st-card-unavailable { opacity: .55; cursor: not-allowed; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card.st-card-unavailable .st-onepage-vehicle-card__label { color: #aa2530 !important; }

/* Phones: the legacy sheet had a fixed 85dvh height, leaving a large blank
 * area under short steps and the sticky bar floating mid-screen. The sheet
 * now hugs its content (legacy max-heights still cap it and scroll), and has
 * no bottom padding so sticky bars sit flush on the bottom edge. */
@media (max-width: 959px) {
    #st-onepage-wrapper.st-onepage-enhanced .st-onepage-sheet { height: auto !important; padding-bottom: 0 !important; }
    /* The sheet is a grid that stacks all four steps in one cell, so it took
     * the height of the tallest (checkout) on every step. Only the active
     * step takes part in layout on phones. */
    #st-onepage-wrapper.st-onepage-enhanced:not(.is-home-active) .st-onepage-home,
    #st-onepage-wrapper.st-onepage-enhanced:not(.is-planner-active) .st-onepage-planner,
    #st-onepage-wrapper.st-onepage-enhanced:not(.is-vehicles-active) #st-view-vehicles,
    #st-onepage-wrapper.st-onepage-enhanced:not(.is-checkout-active) #st-view-checkout { display: none !important; }
    #st-onepage-wrapper.st-onepage-enhanced :is(.st-onepage-actions--home, .st-onepage-planner .st-onepage-actions, .st-onepage-vehicles-actions, .st-onepage-paybar) {
        margin-bottom: 0 !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Vehicle card price: "Trip total" stacked above the amount, ETA on the left. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__price { grid-template-columns: 1fr auto !important; grid-template-areas: 'eta label' 'eta amount' !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__label { align-self: end; justify-self: end; text-align: right; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__amount { justify-self: end; line-height: 1.15; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-vehicle-card__eta { align-self: center !important; }

/* Address suggestions must not sit under the sticky bar: the bar steps aside
   on phones while a list is open (the keyboard covers it anyway). */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-dropdown.is-open { z-index: 30; }
@media (max-width: 959px) {
    #st-onepage-wrapper.st-onepage-enhanced:has(.st-onepage-dropdown.is-open) :is(.st-onepage-actions--home, .st-onepage-planner .st-onepage-actions) { display: none !important; }
}

/* 4.9.84: contact fields one per row; phone = country + number on one row. */
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-contact-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-contact-grid > .st-onepage-contact-field { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-phone-field .st-phone-wrap { position: relative; display: flex !important; flex-wrap: nowrap !important; gap: 8px; width: 100% !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-phone-field .st-country-dropdown { flex: 0 0 auto; width: auto !important; }
#st-onepage-wrapper.st-onepage-enhanced .st-onepage-phone-field #st-c-phone { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }

/* Phones: the country list is the native picker (never clipped, scrollable,
   familiar). The real select sits invisibly over the flag button. */
@media (max-width: 959px), (pointer: coarse) {
    #st-onepage-wrapper.st-onepage-enhanced .st-country-dropdown > select.st-country-select-hidden {
        position: absolute !important; inset: 0 !important; z-index: 2 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important; pointer-events: auto !important; font-size: 16px; cursor: pointer;
    }
    #st-onepage-wrapper.st-onepage-enhanced .st-country-dropdown-trigger { width: var(--st-cc-w, 104px) !important; min-width: 0 !important; justify-content: center; }
    #st-onepage-wrapper.st-onepage-enhanced .st-country-dropdown-panel { display: none !important; }
}

/* Phones: sticky bars run edge to edge of the screen. */
@media (max-width: 959px) {
    #st-onepage-wrapper.st-onepage-enhanced :is(.st-onepage-actions--home, .st-onepage-planner .st-onepage-actions, .st-onepage-vehicles-actions, .st-onepage-paybar) {
        margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
        padding-left: max(16px, calc(50vw - 50%)) !important; padding-right: max(16px, calc(50vw - 50%)) !important;
        border-radius: 0 !important;
    }
}
