/* ========================================================
   Cargo4U v2 — Home Page Styles
   ======================================================== */

/* Smooth scrolling for V2 home page */
body.v2-home-page { scroll-behavior: smooth; }

/* Scroll guard — locks body scroll while Trucking/booking is active.
   Must target html (not body) — on desktop html is the scroll container.
   overflow:hidden on body alone is ignored by the viewport scroll engine. */
html.v2-scroll-locked {
    overflow: hidden !important;
}
html.v2-scroll-locked body {
    overflow: hidden !important;
}

/* Modal scroll guard — held only while a booking modal is open. */
html.v3-modal-scroll-locked,
html.v3-modal-scroll-locked body {
    overflow: hidden !important;
}

/* Auth modal scroll guard - a separate class so the auth modal owns its own
   lock and closing it cannot release a booking modal's lock. */
html.v3-auth-scroll-locked,
html.v3-auth-scroll-locked body {
    overflow: hidden !important;
}

/* Offset for fixed navbar so sections aren't hidden behind it */
#Booking, #OurServices, #AboutUs, #ContactUs { scroll-margin-top: 80px; }

/* --- Google Places Autocomplete Dropdown --- */
.pac-container {
    z-index: 99999 !important;
}

/* --- Hybrid Hero Transition Layer --- */
.v2-booking-shell {
    position: relative;
}

/* --- Hero: full-bleed photo + left text + split booking cards --- */
.v2-hybrid-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-image: url('../../assets/images/cargo4u_hero_background.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* Dark gradient overlay on left side for text readability */
.v2-hybrid-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        95deg,
        rgba(18, 18, 55, 0.82) 0%,
        rgba(18, 18, 55, 0.60) 38%,
        rgba(18, 18, 55, 0.15) 65%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* ── Text area (top-left) ───────────────────────────────────────────── */
.v2-hero-text-area {
    position: relative;
    z-index: 1;
    padding: 56px 60px 0;
    max-width: 620px;
}

/* The single <h1>. Carries the headline's own colour/scale so neither line
   depends on an inner span rule matching; the second line only adds its
   accent colour on top. Replaces the 0.5rem bottom margin the old second
   <h1> contributed. */
.v3-hero-headline {
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.v2-hybrid-hero-title {
    display: block;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.v2-hero-title-accent {
    display: block;
    color: #f7e50f;
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    /* Restores the 1.2 line-height this line had when it lived in its own
       <h1> (Bootstrap's heading default). The shared .v3-hero-headline
       line-height (1.15) is otherwise inherited here, shrinking each
       wrapped line of this two-line accent by ~2.4px and shifting the
       tagline up ~5px. */
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.v2-hybrid-hero-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 440px;
}

/* ── Booking bar (bottom, raised towards middle) ────────────────────── */
.v2-hero-booking-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    margin: 0 15vw 14vh;
    border-radius: 22px;
    overflow: visible;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
}

/* Pickup card — dark navy */
.v2-hero-pickup-card {
    flex: 1;
    background: #1f2668;
    padding: 22px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    border-radius: 22px 0 0 22px;
}

.v2-hero-pickup-card::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* Dropoff card — white */
.v2-hero-dropoff-card {
    flex: 1;
    background: #ffffff;
    padding: 22px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 0 22px 22px 0;
}

/* Category pill */
.v2-hero-category-pill {
    display: inline-flex;
    align-items: center;
    background: #14175c;
    color: #ffffff;
    border-radius: 50px;
    padding: 3px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

/* Step row */
.v2-hero-step-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.v2-hero-step-num {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
}

.v2-hero-dropoff-card .v2-hero-step-num {
    border-color: #1f2668;
    color: #1f2668;
}

.v2-hero-step-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.v2-hero-dropoff-card .v2-hero-step-name {
    color: #1a1a4e;
}

/* Card caption */
.v2-hero-card-caption {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.4;
}

.v2-hero-dropoff-card .v2-hero-card-caption {
    color: #6b7280;
}

/* Input field */
.v2-hero-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 8px 0;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.v2-hero-input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.80);
}

.v2-hero-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.v2-hero-dropoff-card .v2-hero-input {
    border-bottom-color: rgba(0, 0, 0, 0.18);
    color: #1a1a2e;
}

.v2-hero-dropoff-card .v2-hero-input:focus {
    border-bottom-color: #1f2668;
}

.v2-hero-dropoff-card .v2-hero-input::placeholder {
    color: #bbb;
    font-style: italic;
}

/* Book Now button — brand blue */
.v2-hero-book-btn {
    background-color: var(--blue-color, #1A89C8);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    align-self: flex-start;
    margin-top: 6px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.v2-hero-book-btn:hover {
    background-color: #1572a8;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Error message */
.v2-hybrid-hero-error {
    margin: 4px 0 0;
    color: #dc3545;
    font-size: 0.82rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Per-field red highlight + shake on validation failure */
.v2-hero-input--error {
    border-bottom-color: #ef4444 !important;
    animation: v2HeroShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.v2-hero-pickup-card .v2-hero-input--error::placeholder {
    color: rgba(239, 68, 68, 0.65);
}

.v2-hero-dropoff-card .v2-hero-input--error::placeholder {
    color: rgba(239, 68, 68, 0.55);
}

@keyframes v2HeroShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* --- Error message text under hero inputs ---
   Always occupies space (height never collapses); visibility toggled by Alpine
   so the booking bar height stays perfectly stable. ---
*/
.v2-hero-field-error {
    margin: 5px 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
    height: 1.1rem;      /* fixed — reserves space even when invisible */
    overflow: hidden;
    visibility: hidden;  /* default hidden; Alpine sets visible on error */
}
.v2-hero-field-error--light {
    color: #dc3545;
}

/* --- Custom hero autocomplete dropdown --- */
.v2-hero-input-wrap {
    position: relative;
}

.v2-hero-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    /* ~3 items tall: item padding 10px top+bottom + ~2 lines text ≈ 56px/item */
    max-height: 170px;
    overflow-y: auto;
    /* Scrollbar styling — thin & subtle */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.v2-hero-dropdown::-webkit-scrollbar { width: 4px; }
.v2-hero-dropdown::-webkit-scrollbar-track { background: transparent; }
.v2-hero-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.v2-hero-dropdown--light::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* Dark variant — pickup card */
.v2-hero-dropdown--dark {
    background: #1a2070;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Light variant — dropoff card */
.v2-hero-dropdown--light {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.v2-hero-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.v2-hero-dropdown--dark .v2-hero-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.10);
}

.v2-hero-dropdown--light .v2-hero-dropdown-item:hover {
    background: #f3f6fb;
}

.v2-hero-dropdown--dark .v2-hero-dropdown-item + .v2-hero-dropdown-item {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.v2-hero-dropdown--light .v2-hero-dropdown-item + .v2-hero-dropdown-item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.v2-hero-dd-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 1px;
}

.v2-hero-dd-icon--light {
    background: #eef2ff;
    color: #1f2668;
}

.v2-hero-dd-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.v2-hero-dd-main {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-hero-dd-main--light {
    color: #1a1a4e;
}

.v2-hero-dd-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-hero-dd-sub--light {
    color: #6b7280;
}

/* --- Suppress native pac-container on hero inputs (we use custom dropdown) --- */
.v2-hero-pickup-card .pac-container,
.v2-hero-dropoff-card .pac-container {
    display: none !important;
}

/* --- Hero: pac-container overrides scoped to hero booking bar ---
   Google's native dropdown sits right below the input inside each card.
   We style it to match: dark for pickup card, light for dropoff card.
*/
.v2-hero-pickup-card .pac-container {
    background: #1a2070;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    margin-top: 2px;
}
.v2-hero-pickup-card .pac-item {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 7px 12px;
    cursor: pointer;
    color: rgba(255,255,255,0.82);
    font-size: 0.88rem;
    line-height: 1.4;
}
.v2-hero-pickup-card .pac-item:first-child { border-top: none; }
.v2-hero-pickup-card .pac-item:hover,
.v2-hero-pickup-card .pac-item-selected {
    background: rgba(255,255,255,0.12);
}
.v2-hero-pickup-card .pac-item-query {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}
.v2-hero-pickup-card .pac-icon { filter: brightness(4); }

.v2-hero-dropoff-card .pac-container {
    border-radius: 0 0 12px 12px;
    margin-top: 2px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}
.v2-hero-dropoff-card .pac-item {
    padding: 7px 12px;
    font-size: 0.88rem;
}
.v2-hero-dropoff-card .pac-item-query {
    font-weight: 600;
    color: #1a1a4e;
}

/* --- Map Container --- */
/* Sticky column: always fills exactly the viewport below the 65px navbar,
   regardless of how tall the booking form gets on the left. */
.v2-map-container {
    position: sticky;
    height: calc(100vh - 65px);
    align-self: flex-start;
    overflow: hidden;
}

/* --- Route-processing spinner overlay --- */
.v2-map-route-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none; /* don't block map interactions */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Radial gradient that fades the map edges while routing */
.v2-map-route-loading__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.55) 70%,
        rgba(255, 255, 255, 0.72) 100%
    );
}

/* Centred spinner pill */
.v2-map-route-loading__spinner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 18px 28px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
}

/* Spinning ring */
.v2-map-route-loading__ring {
    width: 36px;
    height: 36px;
    border: 3.5px solid rgba(69, 14, 251, 0.18);
    border-top-color: #450efb;
    border-radius: 50%;
    animation: v2-spin 0.75s linear infinite;
}

@keyframes v2-spin {
    to { transform: rotate(360deg); }
}

.v2-map-route-loading__label {
    font-size: 12.5px;
    font-weight: 600;
    color: #450efb;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Map toolbar (Pickup/Dropoff radio toggle) */
.v2-map-toolbar {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    z-index: 2;
}

.v2-map-toolbar label {
    cursor: pointer;
    white-space: nowrap;
}

.v2-map-toolbar input[type="radio"] {
    margin-right: 3px;
    vertical-align: middle;
}

/* --- Booking form scrollable area — scrollbar hidden --- */
.booking-form-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.booking-form-container::-webkit-scrollbar {
    display: none;
}

/* --- Booking Card — fixed mobile-like width on all screens --- */
.v2-booking-card {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Form column: auto-size to fit the card, let map fill the rest */
.form-content {
    width: auto;
    flex: 0 0 auto;
    z-index: 1;
    /* Constrain height so booking form scrolls independently of the map */
    height: calc(100vh - 65px);
    max-height: calc(100vh - 65px);
}

/* Scrollable container constrains the card + some padding */
/* Padding was previously an inline style — now managed here so mobile override works */
.booking-form-container {
    width: 520px;
    max-width: 100vw;
    background: #ffffff;
    padding: 0 24px 20px 24px;
}

/* ========================================================
   Step Indicator (Stepper)
   ======================================================== */
.v2-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.v2-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    transition: all 0.2s;
}

.v2-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
}

.v2-step.active {
    color: var(--blue-color, #1a73e8);
}

.v2-step.active .step-num {
    background: var(--blue-color, #1a73e8);
    color: #fff;
}

.v2-step.completed {
    color: #28a745;
}

.v2-step.completed .step-num {
    background: #28a745;
    color: #fff;
}

.v2-step-line {
    width: 40px;
    height: 2px;
    background: #e0e0e0;
    transition: background 0.2s;
}

.v2-step-line.active {
    background: var(--blue-color, #1a73e8);
}

/* ========================================================
   Direction-style Route Panel (Google Maps style)
   4-column grid: handle | icon | input | action
   ======================================================== */
.v2-direction-panel {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 8px 12px 12px 12px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.v2-direction-row {
    display: grid;
    grid-template-columns: 24px 24px 1fr 24px;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 2px;
    transition: opacity 0.2s;
}

.v2-direction-row.last {
    margin-bottom: 0;
}

.v2-direction-row[draggable="true"] {
    cursor: grab;
}

.v2-direction-row[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.6;
}

/* Column 1: Drag handle — always in DOM for grid integrity, hidden by default */
.v2-direction-drag-handle {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a6;
    font-size: 15px;
    cursor: grab;
    opacity: 0;
    pointer-events: none;   /* SortableJS handle must be visible & pointer-active to start drag */
    transition: opacity 0.15s;
}

.v2-direction-drag-handle:hover {
    color: #5f6368;
}

.v2-direction-row:hover .v2-direction-drag-handle.active {
    opacity: 1;
    pointer-events: auto;
}

/* Column 2: Timeline icon — top-aligned with dashed line to next row */
.v2-direction-timeline {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    min-height: 38px;
    padding-top: 10px;
}

/* Downward dashed line — only on rows with .has-line */
.v2-direction-timeline.has-line::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2.75px;
    top: calc(10px + 14px); /* padding-top + dot height */
    bottom: -6px;
    background: repeating-linear-gradient(
        to bottom,
        #9aa0a6 0px,
        #9aa0a6 5px,
        transparent 5px,
        transparent 9px
    );
}

.v2-direction-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}

.v2-direction-dot.pickup {
    background: #fff;
    border: 2.5px solid #1a73e8;
    box-shadow: none;
}

.v2-direction-dot.stop {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #00897b;
    box-shadow: none;
}

/* Dropoff pin icon (inline SVG — no color/font-size needed) */
.v2-direction-dropoff-pin {
    flex-shrink: 0;
    z-index: 1;
    display: block;
    overflow: visible; /* counteract Bootstrap svg{overflow:hidden} */
}

/* Column 3: Input field */
.v2-direction-content {
    min-width: 0;
}

/* Label-on-border (fieldset legend style) */
.v2-dir-field {
    position: relative;
    margin-top: 8px;
}

.v2-dir-field-label {
    position: absolute;
    top: -8px;
    left: 10px;
    background: #fff;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}

.v2-direction-content .form-control {
    font-size: 14px;
    height: 42px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid #c0c4c9;
    background: #fff;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.v2-direction-content .form-control:focus {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 0 0 2.5px rgba(26, 115, 232, 0.15);
    outline: none;
}

/* SortableJS ghost (drop placeholder) and dragging card styles */
.v2-row-ghost {
    opacity: 0.35;
    background: #e8f0fe;
    border-radius: 8px;
}

.v2-row-dragging {
    background: #fff !important;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(60, 64, 67, 0.22);
    opacity: 1 !important;
    z-index: 9999;
    cursor: grabbing !important;
}

/* Column 4: Action button area */
.v2-col-action {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* Stop remove button — circle-xmark (Google Maps style), hidden until row hovered */
.v2-stop-remove {
    opacity: 0;
    transition: opacity 0.15s;
    background: none;
    border: none;
    color: #70757a;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-stop-remove:hover {
    color: #3c4043;
}

.v2-direction-row:hover .v2-stop-remove {
    opacity: 1;
}

.v2-swap-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 14px;
}

.v2-swap-btn:hover {
    background: var(--blue-color, #1a73e8);
    color: #fff;
    border-color: var(--blue-color, #1a73e8);
}

.v2-swap-btn:disabled,
.v2-swap-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.v2-swap-row {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    margin: -18px 0;
}

/* Add Stop — same 4-column grid for perfect alignment */
.v2-direction-add-stop {
    display: grid;
    grid-template-columns: 24px 24px 1fr 24px;
    column-gap: 8px;
    margin-top: 12px;   /* compensates for missing label height on rows above */
    cursor: pointer;
    user-select: none;
}

/* Col 2: plus icon lives in the timeline column */
.v2-add-dest-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a6;
    font-size: 17px;
    height: 42px;   /* match input height */
    transition: color 0.15s;
}

.v2-direction-add-stop:hover .v2-add-dest-timeline {
    color: #5f6368;
}

/* Col 3: "Add Stop" text — ghost dashed input look */
.v2-add-dest-text {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    height: 42px;   /* match input height */
    border-radius: 8px;
    border: 1.5px dashed #c0c4c9;
    color: #9aa0a6;
    font-size: 14px;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.v2-direction-add-stop:hover .v2-add-dest-text {
    background: #f1f3f4;
    border-color: #9aa0a6;
    color: #5f6368;
}

/* Disabled state — dropoff is empty, nothing to move yet */
.v2-direction-add-stop.is-disabled {
    cursor: default;
    pointer-events: none;
}

.v2-direction-add-stop.is-disabled .v2-add-dest-timeline {
    color: #d2d5d9;
}

.v2-direction-add-stop.is-disabled .v2-add-dest-text {
    border-color: #e8eaed;
    color: #d2d5d9;
}

/* ========================================================
   Schedule Row (inside .v2-direction-panel)
   Same 4-col grid as direction rows for perfect alignment.
   ======================================================== */
.v2-schedule-row {
    display: grid;
    grid-template-columns: 24px 24px 1fr 24px;
    align-items: center;
    column-gap: 8px;
    margin-top: 0;
    margin-bottom: 4px;
    padding: 8px 0 6px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    user-select: none;
    border-radius: 8px 8px 0 0;
    transition: background 0.15s;
    /* overflow hidden for slide animation */
    overflow: hidden;
}

/* Schedule row slide-in / slide-out transitions */
.v2-schedule-enter {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-schedule-enter-start {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.v2-schedule-enter-end {
    opacity: 1;
    max-height: 60px;
    padding-top: 8px;
    padding-bottom: 6px;
    margin-bottom: 4px;
}
.v2-schedule-leave {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-schedule-leave-start {
    opacity: 1;
    max-height: 60px;
}
.v2-schedule-leave-end {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.v2-schedule-row:hover {
    background: #f8f9fb22;
}

.v2-schedule-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    font-size: 16px;
}

.v2-schedule-row-content {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.v2-schedule-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.12s;
}

.v2-schedule-col:hover {
    background: #f1f3f4;
}

.v2-schedule-col-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9aa0a6;
    line-height: 1.2;
}

.v2-schedule-col-value {
    font-size: 14px;
    color: #202124;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.v2-schedule-col-value.v2-schedule-placeholder {
    color: #202124;
    font-weight: 700;
}

.v2-schedule-divider {
    color: #c8cbcf;
    font-size: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ========================================================
   Truck Type Carousel
   ======================================================== */
.v2-truck-section {
    min-width: 0;
}

.v2-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.v2-carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px;
    flex: 1;
    min-width: 0;
}

.v2-carousel-track::-webkit-scrollbar {
    display: none;
}

.v2-truck-card {
    flex: 0 0 auto;
    width: 130px;
    min-height: 110px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    scroll-snap-align: start;
}

.v2-truck-card:hover {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
    transform: translateY(-2px);
}

.v2-truck-card.selected {
    border-color: var(--blue-color, #1a73e8);
    background: rgba(26, 115, 232, 0.06);
    box-shadow: 0 2px 12px rgba(26, 115, 232, 0.25);
}

.v2-truck-card .truck-img-wrap {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.v2-truck-card .truck-img-wrap img {
    max-width: 65px;
    max-height: 42px;
    object-fit: contain;
}

.v2-truck-card .truck-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.v2-truck-card.selected .truck-name {
    color: var(--blue-color, #1a73e8);
}

.v2-truck-card .truck-desc {
    font-size: 10px;
    color: #888;
    line-height: 1.2;
    margin-top: 2px;
}

.v2-truck-body-label {
    font-size: 9px;
    color: #999;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 1px;
}

.v2-truck-card.selected .v2-truck-body-label {
    color: var(--blue-color, #1a73e8);
    opacity: 0.7;
}

.v2-truck-specs {
    font-size: 9px;
    color: #888;
    line-height: 1.3;
    margin-top: 4px;
}

.v2-truck-specs-icon {
    color: #aaa;
    font-size: 10px;
    margin-right: 2px;
}

.v2-truck-card.selected .v2-truck-specs-icon {
    color: var(--blue-color, #1a73e8);
}

.v2-truck-specs-sep {
    margin-left: 1px;
    color: #999;
}

.v2-carousel-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 12px;
    z-index: 1;
}

.v2-carousel-arrow:hover {
    background: var(--blue-color, #1a73e8);
    color: #fff;
    border-color: var(--blue-color, #1a73e8);
}

.v2-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ========================================================
   Vehicle Type Selector (Lalamove-style vertical list)
   ======================================================== */
.v2-vehicle-selector {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.v2-vs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}

.v2-vs-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Collapsed: selected truck preview — same height as expanded card */
.v2-vs-selected-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 8px 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: 2px solid var(--blue-color, #1a73e8);
    border-radius: 10px;
    background: rgba(26, 115, 232, 0.06);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
}

.v2-vs-selected-preview:hover {
    background: rgba(26, 115, 232, 0.1);
}

.v2-vs-preview-name {
    color: var(--blue-color, #1a73e8);
}

.v2-vs-selected-preview .v2-vs-preview-specs i {
    color: var(--blue-color, #1a73e8) !important;
}

.v2-vs-selected-preview .v2-vs-ton-pill {
    color: #fff;
    background: var(--blue-color, #1a73e8);
}

.v2-vs-preview-img {
    width: 45%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-vs-preview-img img {
    max-width: 100%;
    max-height: 80px;
}

.v2-vs-preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.v2-vs-preview-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-vs-preview-specs {
    font-size: 11px;
    color: #888;
    min-width: 0;
    overflow: hidden;
}

/* Expanded: scrollable vertical list */
.v2-vs-list {
    max-height: 330px;
    overflow-y: auto;
    padding: 0 8px 8px;
    scrollbar-width: thin;
}

.v2-vs-list::-webkit-scrollbar {
    width: 4px;
}

.v2-vs-list::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

.v2-vs-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
}

.v2-vs-card:last-child {
    margin-bottom: 0;
}

.v2-vs-card:hover {
    border-color: var(--blue-color, #1a73e8);
    background: rgba(26, 115, 232, 0.02);
}

.v2-vs-card.selected {
    border-color: var(--blue-color, #1a73e8);
    background: rgba(26, 115, 232, 0.06);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
}

.v2-vs-card-img {
    width: 45%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-vs-card-img img {
    max-width: 100%;
    max-height: 80px;
}

.v2-vs-card-info {
    flex: 1;
    min-width: 0;
}

.v2-vs-card-name {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

.v2-vs-card.selected .v2-vs-card-name {
    color: var(--blue-color, #1a73e8);
}

.v2-vs-card-specs {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.v2-vs-card-specs i {
    font-size: 10px;
    color: #aaa;
    margin-right: 3px;
}

.v2-vs-card.selected .v2-vs-card-specs i {
    color: var(--blue-color, #1a73e8);
}

.v2-vs-ton-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #555;
    background: #e8e8e8;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    margin-left: 6px;
    vertical-align: middle;
}

.v2-vs-card.selected .v2-vs-ton-pill,
.v2-vs-card:hover .v2-vs-ton-pill {
    color: #fff;
    background: var(--blue-color, #1a73e8);
}

/* Description text for types without dimensions (lorry crane, low loader) */
.v2-vs-card-desc {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.3;
}

.v2-vs-card-check {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--blue-color, #1a73e8);
    font-size: 18px;
}

/* ========================================================
   Price Breakdown Panel
   ======================================================== */
.v2-price-breakdown {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Blue-tinted variant (use class="v2-price-breakdown v2-price-breakdown--blue" to opt in) */
.v2-price-breakdown--blue {
    background: #f0f7ff;
    border-color: #d4e5f7;
}

.v2-price-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
}

.v2-price-distance {
    font-size: 13px;
    color: #555;
    padding: 6px 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.v2-price-eta {
    font-size: 12px;
    color: #555;
    background: #f0f4ff;
    border: 1px solid #d0dcf5;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: #444;
}

.v2-price-row > span:last-child {
    font-weight: 700;
    color: #222;
}

.v2-price-subheader {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    padding: 6px 0 2px 0;
    border-top: 1px dashed #dee2e6;
    margin-top: 4px;
}

.v2-price-note {
    padding: 8px 0 4px 0;
    border-top: 1px solid #dee2e6;
    margin-top: 6px;
}

.v2-price-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0 0;
    border-top: 2px solid var(--blue-color, #1a73e8);
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-color, #1a73e8);
}

/* ========================================================
   Schedule Section (Step 2)
   ======================================================== */
.v2-schedule-section {
    /* container — intentionally empty, structural wrapper */
    display: block;
}

.v2-schedule-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.v2-schedule-card .schedule-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

/* ========================================================
   Step 2 Price Summary (legacy — kept for backward compat)
   ======================================================== */
.v2-price-summary {
    background: #f0f7ff;
    border: 1px solid #d4e5f7;
    border-radius: 10px;
    padding: 12px 16px;
}

/* ========================================================
   Additional Services — compact layout
   ======================================================== */
.v2-additional-services {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    background: #fff;
    min-width: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.v2-addl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    user-select: none;
}

.v2-addl-header:hover {
    background: #f8f9fb;
}

.v2-addl-body {
    padding: 1px 0;
}

/* Single option row — flex with wrap so field group wraps on very narrow screens */
.v2-addl-option {
    padding: 7px 10px;
    border-bottom: 1px solid #f2f2f2;
    min-height: 24px;
    align-items: center;
}

.v2-addl-option:last-child {
    border-bottom: none;
}

/* Prevent checkbox from stretching — must stay square */
.v2-addl-option .form-check-input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    align-self: center;
    flex-shrink: 0;
}

.v2-addl-icon {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.v2-addl-label {
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
}

/* Outer wrapper inside x-if: pushes group (field + cost) to far right */
.v2-addl-checked-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Inline field group — label + input */
.v2-addl-inline-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-addl-field-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.v2-addl-input {
    width: 120px !important;
    font-size: 13px;
    flex-shrink: 0;
}

.v2-addl-cost-display {
    font-size: 13px;
    color: #333;
    font-weight: 400;
    white-space: nowrap;
    width: 150px;
    text-align: right;
    margin-left: 20px;
    flex-shrink: 0;
}

/* ======================================================
   Price info note (small muted footnote)
   ====================================================== */
.v2-price-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #e7f3ff;
    border-left: 4px solid var(--blue-color, #1a73e8);
    border-radius: 4px;
    font-size: 12px;
    color: #004085;
}

/* ========================================================
   Flatpickr Overrides
   ======================================================== */
.flatpickr-calendar {
    z-index: 99999 !important;
}

/* ══════════════════════════════════════════════════
   UNIFIED SECTION HEADER — matches nav dropdown font
   ══════════════════════════════════════════════════ */
.v2-section-title,
.v2-promotions-module-title,
.v2-about-title,
.v2-features-title,
.v2-contact-header h2 {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: #1f2937;
}

/* --- Promotions Section --- */
.v2-promotions-module {
    background: #f4f6fc;
    padding: 0;
}

.v2-promotions-module .promotion-title {
    text-align: center;
}

.v2-promo-wrapper {
    position: relative;
}

.v2-promo-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 8px 10px;
    /* Center single slide */
    justify-content: center;
}

.v2-promo-track::-webkit-scrollbar {
    display: none;
}

.v2-promo-slide {
    flex: 0 0 min(980px, 100%);
    scroll-snap-align: center;
}

.v2-promo-media {
    position: relative;
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    background: #e5e7eb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.v2-promo-media.is-empty {
    background: linear-gradient(135deg, #0d1f34 0%, #17314f 60%, #22466f 100%);
}

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

.v2-promo-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.58) 100%);
    pointer-events: none;
}

.v2-promo-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px 18px;
    color: #fff;
}

.v2-promo-content h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.v2-promo-content p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.v2-promo-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.v2-promo-fallback-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

.v2-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.v2-promo-grid-item {
    min-width: 0;
}

.v2-promo-prev,
.v2-promo-next {
    z-index: 3;
}

/* AirAsia-style gradient edge arrows — invisible by default, fade in on hover */
.v2-promotions-module-title {
    margin: 0;
    text-align: center;
}

.v2-promotions-module .promo-arrow {
    position: absolute;
    top: 0;
    width: 54px;
    height: 220px; /* Match promo media height */
    border-radius: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    opacity: 0;
    z-index: 5 !important;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease, background 0.35s ease;
    transform: none;
}
.v2-promotions-module .promo-arrow::before {
    display: none !important;
}
.v2-promotions-module .promo-prev {
    left: 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 100%);
}
.v2-promotions-module .promo-next {
    right: 0;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(to left, rgba(0,0,0,0.45) 0%, transparent 100%);
}
.v2-promo-wrapper:hover .promo-arrow {
    opacity: 1;
}
.v2-promotions-module .promo-arrow:hover {
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.v2-promotions-module .promo-next:hover {
    background: linear-gradient(to left, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.v2-promotions-module .promo-arrow:active {
    transform: none;
}

/* Dot indicators */
.v2-promo-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.v2-promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4c8d0;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}
.v2-promo-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--blue-color, #1a73e8);
}

/* --- Features / Our Services — overlay cards like Promotions --- */
.v2-features-module {
    background: #fff;
    padding: 0 !important;
}

.v2-features-title {
    text-align: center;
    margin: 18px 0;
}

.v2-features-wrap {
    position: relative;
}

/* -------------------------------------------------------------------
   Bento Grid  (desktop ≥ 992 px)  —  4 cols × 3 rows, 8 cards

   ┌────────────────────┬──────────┬──────────┐  row 1 : 180 px
   │   Card 1  (hero)   │  Card 2  │  Card 3  │
   │      2 col × 2 row ├──────────┼──────────┤  row 2 : 180 px
   │                    │  Card 4  │  Card 5  │
   ├──────────┬──────────┬──────────────────────┤  row 3 : 240 px
   │  Card 6  │  Card 7  │  Card 8  (2 col wide) │
   └──────────┴──────────┴──────────────────────┘
   ------------------------------------------------------------------- */
.v2-features-track.is-vertical {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 180px 180px 240px;
    gap: 14px;
}

/* All cards in bento mode fill their grid cell exactly */
.v2-features-track.is-vertical .v2-feature-card {
    height: 100%;
}

.v2-features-track.is-vertical .v2-feature-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.v2-features-track.is-vertical .v2-feature-card:nth-child(8) {
    grid-column: 3 / 5;
}

.v2-features-track.is-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 6px 10px;
}

.v2-features-track.is-carousel::-webkit-scrollbar {
    display: none;
}

/* Overlay card — image fills, text overlaid at bottom */
.v2-feature-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 220px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0,0,0,0.06);
    background: #e5e7eb;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.v2-feature-card:hover {
    transform: scale(1.025);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.v2-feature-card .v2-feature-media img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-feature-card:hover .v2-feature-media img {
    transform: scale(1.08);
}

.v2-features-track.is-carousel .v2-feature-card {
    flex: 0 0 min(860px, 86vw);
    scroll-snap-align: start;
}

.v2-feature-media {
    position: absolute;
    inset: 0;
}

.v2-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2-feature-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 28px;
    background: linear-gradient(135deg, #0d1f34 0%, #17314f 60%, #22466f 100%);
}

/* Dark gradient overlay for text legibility */
.v2-feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

.v2-feature-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px 18px;
    color: #fff;
}

/* h2 and h3 both matched: the card titles are <h3> so they nest under the
   section's <h2>. The h2 arm stays for any card markup not yet demoted. */
.v2-feature-content h2,
.v2-feature-content h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.v2-feature-content p {
    margin: 0;
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.88rem;
    line-height: 1.45;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v2-feature-content ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.v2-feature-content li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.88);
    font-size: 0.78rem;
    line-height: 1.3;
    background: rgba(255,255,255,0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

.v2-feature-content li::before {
    content: '\2022';
    color: rgba(255,255,255,0.6);
    font-weight: 700;
    line-height: 1;
}

.v2-feature-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.35);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: all 0.2s;
}

.v2-feature-prev {
    left: 8px;
}

.v2-feature-next {
    right: 8px;
}

.v2-feature-nav:hover {
    background: var(--blue-color);
    border-color: var(--blue-color);
    color: #fff;
}

.v2-feature-nav:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.v2-feature-empty-state {
    padding: 24px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

/* --- About Us --- */
.v2-about-section#AboutUs {
    padding: 64px 0;
    background: #fff;
}

/* Two-column layout: content left (2fr), stats right (1fr) */
.v2-about-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.v2-about-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.v2-about-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--blue-color, #1A89C8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.v2-about-title {
    margin: 0 0 16px;
    text-align: left;
}

.v2-about-text {
    color: #4b5563;
    font-size: 0.96rem;
    line-height: 1.75;
    text-align: left;
    margin: 0 0 12px;
}

.v2-about-text--secondary {
    color: #64748b;
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.v2-about-highlights {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-about-highlights li {
    padding: 5px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef4ff 0%, #f0f7ff 100%);
    border: 1px solid rgba(26, 137, 200, 0.18);
    color: #1a3a5c;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: default;
}

.v2-about-highlights li:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #e0effe 100%);
    border-color: rgba(26, 137, 200, 0.35);
    box-shadow: 0 2px 8px rgba(26, 137, 200, 0.12);
    transform: translateY(-1px);
}

.v2-about-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-color, #1A89C8);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(26, 137, 200, 0.28);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    align-self: flex-start;
}

.v2-about-readmore:hover {
    background: #1570a8;
    box-shadow: 0 6px 20px rgba(26, 137, 200, 0.38);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* Stats panel */
.v2-about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.v2-about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f4f7ff;
    border: 1.5px solid #e8ecf3;
    border-radius: 14px;
    padding: 20px 12px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.v2-about-stat:hover {
    box-shadow: 0 4px 14px rgba(26, 137, 200, 0.12);
    transform: translateY(-2px);
}

.v2-about-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--blue-color, #1A89C8);
    line-height: 1;
}

.v2-about-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.3;
}

/* --- Contact Us --- */
.v2-contact-section#ContactUs {
    background: #f4f6fc;
    padding: 64px 0 56px;
    margin: 0;
    min-height: auto;
    width: 100%;
    text-align: left;
}

.v2-contact-header {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
}

.v2-contact-header h2 {
    margin: 0;
    /* inherits from unified section title */
}

/* Override V1 style.css yellow focus rule for #ContactUs */
.v2-contact-section#ContactUs input:focus,
.v2-contact-section#ContactUs textarea:focus {
    border-color: var(--blue-color, #1A89C8) !important;
    box-shadow: 0 0 0 3px rgba(26, 137, 200, 0.15) !important;
}

/* Blue accent bar under section title */
.v2-contact-header h2::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--blue-color, #1A89C8);
    border-radius: 2px;
    margin: 10px auto 0;
}

.v2-contact-header p {
    margin: 14px auto 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 520px;
}

/* Contact info cards */
.v2-contact-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 840px;
    margin: 0 auto 24px;
}

.v2-contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e8ecf3;
    border-radius: 12px;
    text-decoration: none;
    color: #1f2937;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.v2-contact-info-item:hover {
    border-color: var(--blue-color, #1A89C8);
    box-shadow: 0 4px 14px rgba(26, 137, 200, 0.14);
    transform: translateY(-2px);
    color: #1f2937;
    text-decoration: none;
}

.v2-contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f1fb, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-color, #1A89C8);
    font-size: 15px;
    flex-shrink: 0;
}

.v2-contact-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.v2-contact-info-label {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v2-contact-info-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e3a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Form card */
.v2-contact-form {
    max-width: 840px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid #e8ecf3;
    border-top: 3px solid var(--blue-color, #1A89C8);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(26, 137, 200, 0.07);
    padding: 28px 28px 24px;
}

.v2-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.v2-contact-field {
    min-width: 0;
}

.v2-contact-field--full {
    grid-column: 1 / -1;
}

/* Unified input / select styles */
.v2-contact-field input,
.v2-contact-field textarea,
.v2-contact-section .v2-contact-phone-row .CountryCode-ContactUs {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    font-size: 0.93rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.18s ease;
}

.v2-contact-field input,
.v2-contact-field textarea {
    padding: 12px 14px;
}

.v2-contact-field textarea {
    min-height: 160px;
    resize: vertical;
}

.v2-contact-field input:focus,
.v2-contact-field textarea:focus,
.v2-contact-section .v2-contact-phone-row .CountryCode-ContactUs:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue-color, #1A89C8);
    box-shadow: 0 0 0 3px rgba(26, 137, 200, 0.15);
}

.v2-contact-field input.is-invalid,
.v2-contact-field textarea.is-invalid {
    border-color: #dc2626;
}

.v2-contact-field-error {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #dc2626;
}

.v2-contact-phone-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    align-items: center;
}

/* Country code + phone number are ONE control, so both children take one set
   of tokens rather than each inheriting whatever wins its own cascade. The
   values match the other #ContactUs fields (style-v3.css `#ContactUs input`,
   an ID selector this file cannot outrank without an #ContactUs prefix of its
   own) so the row sits flush with Name/Email/Message rather than the two of
   them disagreeing with each other and with their siblings. */
#ContactUs .v2-contact-phone-row {
    --c4u-phone-height: 56px;
    --c4u-phone-radius: 10px;
    --c4u-phone-font: 1rem;
    --c4u-phone-pad: 0 20px;
}

#ContactUs .v2-contact-phone-row .CountryCode-ContactUs,
#ContactUs .v2-contact-phone-row input[name="phone"] {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    box-sizing: border-box;
    width: 100%;
    height: var(--c4u-phone-height);
    min-height: var(--c4u-phone-height);
    margin: 0;
    padding: var(--c4u-phone-pad);
    border: 2px solid #e1e5e9;
    border-radius: var(--c4u-phone-radius);
    background-color: #fff;
    color: var(--black-color, #1e293b);
    font-size: var(--c4u-phone-font);
    line-height: 1.2;
}

/* appearance:none upstream strips the native arrow; without one the select is
   indistinguishable from the text input it now matches. */
#ContactUs .v2-contact-phone-row .CountryCode-ContactUs {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    padding-right: 36px;
}

/* CAPTCHA + Submit: image|refresh → input → send message (3 stacked rows), centered */
.v2-contact-captcha-submit-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 10px;
    align-items: stretch;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.v2-contact-captcha-img {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* The captcha is 150x40 at source. Rendering it at its natural size keeps the
   glyphs at the sharpness they were drawn at — it was being stretched to
   ~286x76 and cropped by object-fit:cover, which is the worst possible
   treatment for something the reader has to decode letter by letter. */
.v2-contact-captcha-img img {
    width: 150px;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.v2-contact-captcha-action {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
}

/* Refresh borrows the site's existing secondary button, .blueBtn in its
   unfilled base form (style-v3.css:99) — 1px blue rule, pill radius, weight
   500, fills blue on hover — instead of the one-off 1.5px/8px outline that
   appeared nowhere else on the page. */
#reloadCaptcha,
.v2-contact-captcha-action .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    background: transparent;
    color: var(--blue-color, #1A89C8);
    border: 1px solid var(--blue-color, #1A89C8);
    border-radius: 25px;
    padding: 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.3s ease;
}

#reloadCaptcha:hover,
.v2-contact-captcha-action .btn:hover {
    background: var(--blue-color, #1A89C8);
    color: #fff;
}

.v2-contact-captcha-input {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: stretch;
}

.v2-contact-captcha-input input {
    width: 100%;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    padding: 12px 14px;
    font-size: 0.93rem;
    transition: border-color 0.2s ease, background 0.18s ease;
}

.v2-contact-captcha-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue-color, #1A89C8);
    box-shadow: 0 0 0 3px rgba(26, 137, 200, 0.15);
}

.v2-contact-submit {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: stretch;
}

/* Submit — full-width pill CTA */
.v2-contact-submit .blueBtn,
.v2-contact-submit .btn-lrg.blueBtn {
    width: 100%;
    background: var(--blue-color, #1A89C8);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 13px 32px;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(26, 137, 200, 0.28);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    margin-top: 0;
}

.v2-contact-submit .blueBtn:hover,
.v2-contact-submit .btn-lrg.blueBtn:hover {
    background: #1570a8;
    box-shadow: 0 6px 20px rgba(26, 137, 200, 0.38);
    transform: translateY(-1px);
    color: #fff !important;
}

/* Social links — hidden on desktop, shown on mobile */
.v2-contact-socials {
    display: none;
}

.v2-contact-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 16px;
    transition: all 0.22s ease;
    text-decoration: none;
}

.v2-contact-social-link:hover {
    background: var(--blue-color, #1A89C8);
    border-color: var(--blue-color, #1A89C8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 137, 200, 0.28);
}

/* Legacy footer override — hide old row */
.footer-row { display: none !important; }
/* ========================================================
   Schedule Modal (Alpine-driven, no Bootstrap dependency)
   Bottom-sheet on mobile, centred card on desktop.
   ======================================================== */
.v2-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Alpine x-transition classes for modal enter/leave */
.v2-modal-enter {
    transition: opacity 0.25s ease;
}

.v2-modal-enter-start {
    opacity: 0;
}

.v2-modal-enter-end {
    opacity: 1;
}

.v2-modal-leave {
    transition: opacity 0.2s ease;
}

@keyframes v2-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 991.98px) {
    /* ── Booking hero & map ─────────────────────────────────────────────────────── */
    .v2-hybrid-hero-overlay {
        background-size: 120vh auto !important;
        background-position: -15dvh 70px !important;
        background-repeat: no-repeat;
    }

    .v2-hybrid-hero-overlay::before {
        background: linear-gradient(
            to top right,
            rgba(18, 18, 55, 0.95) 10%,
            rgba(18, 18, 55, 0.75) 25%,
            rgba(18, 18, 55, 0.95) 35%,
            transparent 100%
        );
    }
    .v2-hero-text-area {
        padding: 40px 32px 0;
        max-width: 100%;
    }
    .v2-hybrid-hero-title {
        font-size: 1.85rem;
    }
    .v2-hero-title-accent {
        font-size: 1.65rem;
    }
    .v2-hybrid-hero-subtitle {
        font-size: 0.9rem;
    }
    .v2-hero-booking-bar {
        margin: 0 20px 10vh;
    }
    /* Hero dropdown — keep to 3 items on tablet/mobile too */
    .v2-hero-dropdown {
        max-height: 170px;
    }
    .v2-map-container {
        position: relative;
        top: auto;
        height: 50vh;
        min-height: 320px;
    }

    /* ── Page sections ──────────────────────────────────────────────────────── */
    .v2-promo-slide {
        flex-basis: min(92vw, 480px);
    }

    .v2-promo-media {
        height: 200px;
    }

    .v2-promotions-module .promo-arrow {
        height: 200px;
    }

    .v2-promo-grid {
        grid-template-columns: 1fr;
    }

    .v2-feature-card {
        height: 200px;
    }

    /* Bento → 2-col on tablet */
    .v2-features-track.is-vertical {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .v2-features-track.is-vertical .v2-feature-card {
        height: 200px;
    }
    .v2-features-track.is-vertical .v2-feature-card:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: auto;
        height: 220px;
    }
    .v2-features-track.is-vertical .v2-feature-card:nth-child(8) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .v2-features-track.is-carousel .v2-feature-card {
        flex-basis: min(92vw, 440px);
    }

    .v2-feature-nav {
        display: none;
    }

    .v2-feature-content h2,
    .v2-feature-content h3 {
        font-size: 1.05rem;
    }

    .v2-about-highlights {
        flex-wrap: wrap;
        gap: 6px;
    }

    .v2-contact-form {
        padding: 14px;
    }

    .v2-contact-grid {
        grid-template-columns: 1fr;
    }

    .v2-contact-field--full {
        grid-column: 1;
    }

    .v2-contact-phone-row {
        grid-template-columns: 140px 1fr;
    }

    /* Tablet: no change needed, already stacked layout */

    /* Contact info cards — stack to 1 col on tablet */
    .v2-contact-info-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

.v2-modal {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
    animation: v2-modal-slide-up 0.22s cubic-bezier(0.34, 1.05, 0.64, 1);
}

@keyframes v2-modal-slide-up {
    from { transform: translateY(48px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 576px) {
    .v2-modal-backdrop {
        align-items: center;
    }
    .v2-modal {
        border-radius: 16px;
        max-height: 600px;
    }
}

.v2-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
    color: #202124;
    background: #fff;
}

.v2-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a6;
    font-size: 18px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.v2-modal-close:hover {
    background: #f1f3f4;
}

.v2-modal-body {
    padding: 2px 16px 0;
}

.v2-modal-footer {
    padding: 10px 16px 22px;
    background: #fff;
}

/* Current selection preview */
.v2-schedule-selected-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #3c4043;
}

.v2-schedule-selected-display .fa-circle-check {
    color: var(--blue-color, #1a73e8);
    font-size: 18px;
}

/* ========================================================
   Drum / Scroll Picker  —  3 columns: Date | Hour | Minute
   ======================================================== */
.v2-drum-picker {
    position: relative;
    display: flex;
    height: 190px;
    margin: 4px 0 2px;
    overflow: hidden;
}

/* Top and bottom fade gradients */
.v2-drum-picker::before,
.v2-drum-picker::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 75px;
    pointer-events: none;
    z-index: 3;
}

.v2-drum-picker::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 25%, rgba(255,255,255,0));
}

.v2-drum-picker::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 25%, rgba(255,255,255,0));
}

/* Each scrollable column */
.v2-drum-col {
    flex: 1;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.v2-drum-col::-webkit-scrollbar {
    display: none;
}

/* Padding spacers so first/last items can scroll to center.
   Formula: (drum-height - item-height) / 2 = (190 - 40) / 2 = 75px
   This ensures item[0] is perfectly centered at scrollTop=0,
   and each subsequent item is exactly 40px (1 itemH) away. */
.v2-drum-spacer {
    height: 75px;
    flex-shrink: 0;
}

/* Each row option */
.v2-drum-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: 14px;
    color: #9aa0a6;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.12s, font-size 0.12s;
}

.v2-drum-item.active {
    color: #202124;
    font-weight: 700;
    font-size: 17px;
}

/* Two lines marking the center selection band.
   top = (drum-height - item-height) / 2 = (190 - 40) / 2 = 75px */
.v2-drum-center-lines {
    position: absolute;
    top: 75px;
    left: 16px;
    right: 16px;
    height: 40px;
    border-top: 2px solid #5f6368;
    border-bottom: 2px solid #5f6368;
    pointer-events: none;
    z-index: 2;
}

/* Confirm button */
.v2-schedule-confirm-btn {
    display: block;
    width: 100%;
    background: var(--blue-color, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    padding: 13px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
}

.v2-schedule-confirm-btn:hover {
    background: #1558b0;
}

/* --- Route Info Tooltip (ETA + Distance at route midpoint) --- */
.v2-route-info-tooltip {
    position: absolute;
    /* Sit above polylines (z ~100-115) within overlayLayer, but the tooltip's
       pane (overlayLayer) is still below markerLayer so native markers always
       render on top regardless of this value. */
    z-index: 200;
    transform: translate(-50%, calc(-100% - 16px));
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.85);
    border-radius: 6px;
    padding: 8px 16px 8px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    cursor: default;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.v2-rti-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.v2-rti-shadow {
    position: relative;
    display: inline-block;
}

.v2-rti-shadow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 44px;
    height: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0));
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.v2-rti-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.v2-rti-eta {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.v2-rti-dist {
    font-size: 16px;
    color: #70757a;
}

/* --- Hover Pin Overlay (large red pin on direction-row hover) --- */
.v2-hover-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 200;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.v2-hover-pin-anim {
    animation: v2HoverPinDrop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes v2HoverPinDrop {
    0%   { transform: translate(-50%, calc(-100% - 30px)); opacity: 0; }
    25%  { opacity: 1; }
    60%  { transform: translate(-50%, calc(-100% + 4px)); }
    78%  { transform: translate(-50%, calc(-100% - 2px)); }
    100% { transform: translate(-50%, -100%); }
}

/* ================================================================
   LTL Custom Mode — Multi-Dropoff & Route List Styles
   ================================================================ */

/* --- LTL Mode Selector (Standard / Custom toggle) --- */
.v2-ltl-mode-selector .btn-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.v2-ltl-mode-selector .btn-group .btn-outline-primary {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.3;
    border: none !important;
    border-radius: 0 !important;
    background: #fff;
    color: #666;
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: none !important;
}
.v2-ltl-mode-selector .btn-group .btn-outline-primary:not(:last-of-type) {
    border-right: 1px solid #e8eaed !important;
}
.v2-ltl-mode-selector .btn-group .btn-outline-primary small {
    font-size: 10px;
    line-height: 1;
    opacity: 0.6;
    color: #888;
}
.v2-ltl-mode-selector .btn-group .btn-check:checked + .btn-outline-primary {
    background: var(--blue-color, #1a73e8) !important;
    color: #fff !important;
    font-weight: 600;
}
.v2-ltl-mode-selector .btn-group .btn-check:checked + .btn-outline-primary small {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1;
}
.v2-ltl-mode-selector .btn-group .btn-outline-primary:hover:not(:disabled) {
    background: #f5f8ff;
    color: #444;
}
.v2-ltl-mode-selector .btn-group .btn-check:checked + .btn-outline-primary:hover {
    background: #1565c0 !important;
    color: #fff !important;
}

/* --- Mode Switch Confirmation Modal --- */
.v2-mode-switch-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.v2-mode-switch-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px 20px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ================================================================
   LCL Pallet Section — Compact Card Styling
   ================================================================ */
.v2-pallet-section {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 0 0 10px;
}
.v2-pallet-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.v2-pallet-card {
    margin: 0 10px 8px;
    padding: 10px 12px;
    background: #f8f9fb;
    border: 1.5px solid #e8eaed;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.v2-pallet-card:hover {
    border-color: rgba(26, 115, 232, 0.3);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.08);
}
.v2-pallet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.v2-pallet-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}
.v2-pallet-remove {
    background: none;
    border: none;
    color: #b0b4b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.v2-pallet-card:hover .v2-pallet-remove {
    opacity: 1;
}
.v2-pallet-remove:hover {
    color: #dc3545;
}
.v2-pallet-dims {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.v2-pallet-dims .v2-dir-field {
    margin-top: 0;
}
.v2-pallet-dims .form-control {
    font-size: 13px;
    height: 38px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1.5px solid #c0c4c9;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-pallet-dims .form-control:focus {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 0 0 2px rgba(26,115,232,0.13);
    outline: none;
}
/* Pickup + Dropoff in one row */
.v2-pallet-assign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.v2-pallet-assign-row .v2-dir-field {
    margin-top: 6px;
}
.v2-pallet-assign-row .form-select {
    font-size: 12px;
    height: 38px;
    padding: 6px 28px 6px 8px;
    border-radius: 6px;
    border: 1.5px solid #c0c4c9;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-pallet-assign-row .form-select:focus {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 0 0 2px rgba(26,115,232,0.13);
    outline: none;
}
.v2-pallet-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: calc(100% - 20px);
    margin: 4px 10px 0;
    padding: 6px 12px;
    border: 1.5px dashed #c0c4c9;
    border-radius: 8px;
    background: transparent;
    color: #9aa0a6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.v2-pallet-add-btn:hover {
    background: #f1f3f4;
    border-color: var(--blue-color, #1a73e8);
    color: var(--blue-color, #1a73e8);
}
.v2-pallet-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.v2-cargo-pallet-svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ================================================================
   Pallet Address Fields (Custom LTL V2 — inline pickup/dropoff)
   ================================================================ */
.v2-pallet-address-fields {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e0e0e0;
}
.v2-pallet-address-fields .v2-dir-field {
    position: relative;
}
.v2-pallet-address-fields .v2-dir-field-label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.v2-pallet-address-fields .form-control-sm {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1.5px solid #c0c4c9;
}
.v2-pallet-address-fields .form-control-sm:focus {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.13);
}

/* ================================================================
   Route Configuration Section (Custom LTL V2 — drag-to-reorder)
   ================================================================ */
.v2-route-config-section {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 0 0 6px;
}
.v2-route-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.v2-route-config-list {
    padding: 0 10px;
}
.v2-route-stop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #f8f9fb;
    border: 1.5px solid #e8eaed;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: default;
}
.v2-route-stop-row:hover {
    border-color: rgba(26, 115, 232, 0.3);
    box-shadow: 0 1px 4px rgba(26, 115, 232, 0.08);
}
.v2-route-stop-drag-handle {
    color: #c0c4c9;
    cursor: grab;
    font-size: 12px;
    padding: 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.v2-route-stop-drag-handle:hover {
    color: #888;
}
.v2-route-stop-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8eaed;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.v2-route-stop-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.v2-route-stop-dot.is-pickup {
    background: #1a73e8;
    border: 2px solid #0d47a1;
}
.v2-route-stop-dot.is-dropoff {
    background: #EA4335;
    border: 2px solid #b71c1c;
}
.v2-route-stop-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.v2-route-stop-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-route-stop-address {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SortableJS drag states */
.v2-route-stop-row.v2-row-ghost {
    opacity: 0.4;
    background: #e3f2fd;
    border-color: var(--blue-color, #1a73e8);
}
.v2-route-stop-row.v2-row-dragging {
    background: #fff;
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.18);
}

/* ================================================================
   Custom LTL Direction Timeline (read-only route from pallets)
   ================================================================ */
.v2-custom-ltl-timeline .v2-direction-drag-handle {
    opacity: 0;
    pointer-events: none;
    cursor: grab;
}
.v2-custom-ltl-timeline .v2-direction-row:hover .v2-direction-drag-handle.active {
    opacity: 1;
    pointer-events: auto;
}
.v2-custom-ltl-timeline .v2-direction-content .form-control {
    background: #f8f9fb !important;
    cursor: default !important;
    pointer-events: none;
    color: #333;
    border-color: #e0e0e0;
}
.v2-custom-ltl-stops-wrap {
    position: relative;
}
.v2-custom-ltl-swap-row {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
}
.v2-custom-ltl-stop-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8eaed;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   Collapsible Pallet Cards — Collapsed / Active States
   ================================================================ */
.v2-pallet-card.is-collapsed {
    cursor: pointer;
    padding: 6px 10px;
}
.v2-pallet-card.is-collapsed:hover {
    border-color: rgba(26, 115, 232, 0.35);
}
.v2-pallet-card.is-active {
    border-color: var(--blue-color, #1a73e8);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.18), 0 2px 8px rgba(26, 115, 232, 0.10);
    background: #f5f8ff;
}

/* Row 1: icon + title + dims + actions */
.v2-pallet-collapsed-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    min-height: 24px;
}
.v2-pallet-collapsed-title {
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
.v2-pallet-collapsed-dims {
    color: #888;
    font-size: 11px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-pallet-collapsed-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.v2-pallet-collapsed-actions button {
    background: none;
    border: none;
    color: #b0b4b8;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.v2-pallet-collapsed-actions button:hover {
    color: var(--blue-color, #1a73e8);
    background: rgba(26, 115, 232, 0.08);
}

/* Row 2: mini vertical pickup → dropoff timeline (dashed connector) */
/* 3-column pallet route mini timeline */
.v2-pallet-mini-timeline {
    display: grid;
    grid-template-columns: fit-content(45%) 1fr fit-content(45%);
    align-items: center;
    column-gap: 0;
    margin-top: 5px;
    width: 100%;
    min-width: 0;
}
/* Left (pickup) and right (dropoff) columns: dot + name */
.v2-pmt-col {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
/* Space between pickup name and the dashed line */
.v2-pmt-origin {
    padding-right: 6px;
}
/* Arrowhead + dot + name; no extra gap before arrowhead */
.v2-pmt-dest {
    gap: 4px;
    justify-content: flex-start;
    padding-left: 0;
}
.v2-pallet-mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.v2-pallet-mini-dot.pickup {
    background: #fff;
    border: 2px solid #1a73e8;
}
.v2-pallet-mini-dot.dropoff {
    background: #EA4335;
    border: none;
}
.v2-pmt-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Center column: dashed line only — stretches full width */
.v2-pmt-connector {
    display: flex;
    align-items: center;
    width: 100%;
}
.v2-pmt-line {
    display: block;
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #aaa 0px,
        #aaa 4px,
        transparent 4px,
        transparent 7px
    );
}
/* Arrowhead — lives in dest column, flush against the dashed line */
.v2-pmt-arrow {
    display: block;
    width: 0;
    height: 0;
    margin-right: 2px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #aaa;
    flex-shrink: 0;
}

/* Collapse toggle button in expanded pallet header */
.v2-pallet-collapse-btn {
    background: none;
    border: none;
    color: #b0b4b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.v2-pallet-card:hover .v2-pallet-collapse-btn {
    opacity: 1;
}
.v2-pallet-collapse-btn:hover {
    color: var(--blue-color, #1a73e8);
}

/* --- Custom LTL Dropoff Panel --- */
.v2-ltl-dropoffs {
    border-top: 1px dashed #ddd;
    padding-top: 8px;
    margin-top: 4px;
}
.v2-ltl-dropoffs-header {
    padding: 4px 0 6px 42px;
    font-size: 13px;
    color: #444;
}

/* --- Custom LTL Pickup Panel --- */
.v2-ltl-pickups {
    border-top: 1px dashed #ddd;
    padding-top: 8px;
    margin-top: 4px;
}
.v2-ltl-pickups-header {
    padding: 4px 0 6px 42px;
    font-size: 13px;
    color: #444;
}
.v2-direction-dot.pickup-custom {
    background: #1a73e8;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v2-pickup-number {
    line-height: 1;
}

/* --- Custom LTL Route List (clickable route rows) --- */
.v2-ltl-route-list {
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 4px;
}
.v2-ltl-route-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.3s;
    font-size: 13px;
}
.v2-ltl-route-row:hover {
    background: rgba(0,0,0,0.04);
}
.v2-ltl-route-row.is-highlighted {
    background: rgba(26,115,232,0.08);
    box-shadow: inset 3px 0 0 currentColor;
}
.v2-route-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.v2-route-label {
    flex: 1;
    font-size: 13px;
    color: #333;
}
.v2-route-dist {
    margin-left: auto;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* Inline dot used in price breakdown per-leg rows */
.v2-route-dot-inline {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* --- Cargo Dropoff Overlay (map) --- */
.v2-cargo-dropoff-overlay {
    position: absolute;
    transform: translate(-50%, 14px);
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 210;
}
.v2-cargo-icon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 2px solid;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    white-space: nowrap;
}
.v2-cargo-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
}
.v2-cargo-label {
    font-weight: 700;
    font-size: 13px;
}
.v2-cargo-count {
    color: #666;
    font-size: 10px;
}
.v2-container {
    width: 100% !important;
}

/* ========================================================
   V2 Mobile Polish Overrides (375x667 baseline)
   Keep scoped to V2 modules to avoid changing legacy pages.
   ======================================================== */
.v2-promotions-module#promotion {
    margin-top: 0 !important;
}

.v2-promotions-module .promotion-slider-wrapper {
    padding: 0 !important;
    max-width: none;
}

@media (max-width: 575.98px) {
    .v2-promotions-module {
        padding: 5px !important;
        margin-bottom: 0 !important;
    }

    .v2-promotions-module-title {
        font-size: 1.15rem;
        margin-bottom: 5px !important;
    }

    .v2-promotions-module .promo-arrow {
        width: 36px;
        font-size: 16px;
        height: 180px; /* Match mobile promo media height */
        opacity: 0.6; /* Always visible on mobile (no hover) */
    }
    .v2-promo-dots {
        gap: 5px;
        margin-top: 6px;
    }

    .v2-promo-track {
        gap: 0;
        padding: 0;
        justify-content: flex-start;
    }

    .v2-promo-slide {
        flex-basis: 100%;
        padding: 0 6px;
    }

    .v2-promo-media {
        height: 180px;
        border-radius: 12px;
    }

    .v2-promo-content {
        padding: 12px 14px;
    }

    .v2-promo-content h3 {
        font-size: 0.98rem;
    }

    .v2-promo-content p {
        margin-top: 3px;
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .v2-features-module {
        padding: 5px 0 !important;
    }

    .v2-features-title {
        font-size: 1.2rem;
        margin: 3.5px !important;
    }

    .v2-features-module .container.my-5 {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .v2-features-track.is-vertical {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }
    /* Single column: the desktop bento span and the tablet 220px hero height
       both have to be reset, or cards 1 and 8 keep per-position heights that
       nothing in their content justifies once the grid is one card wide.
       200px is the shared sibling height set above. */
    .v2-features-track.is-vertical .v2-feature-card:nth-child(1),
    .v2-features-track.is-vertical .v2-feature-card:nth-child(8) {
        grid-column: 1;
        grid-row: auto;
        height: 200px;
    }

    .v2-feature-card {
        height: 180px;
        border-radius: 12px;
    }

    .v2-feature-content {
        padding: 12px 14px;
    }

    .v2-feature-content h2,
    .v2-feature-content h3 {
        margin-bottom: 3px;
        font-size: 1rem;
    }

    .v2-feature-content p {
        font-size: 0.82rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .v2-feature-content ul {
        margin-top: 6px;
        gap: 3px;
    }

    .v2-feature-content li {
        font-size: 0.72rem;
        padding: 1px 6px;
    }

    .v2-about-section#AboutUs {
        padding: 32px 0;
    }

    /* Stack to single column on mobile */
    .v2-about-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .v2-about-content {
        text-align: center;
    }

    .v2-about-subtitle {
        font-size: 0.68rem;
    }

    .v2-about-title {
        font-size: 1.2rem;
        text-align: center;
    }

    .v2-about-text {
        font-size: 0.86rem;
        line-height: 1.55;
        text-align: center;
    }

    .v2-about-highlights {
        justify-content: center;
        margin-bottom: 20px;
    }

    .v2-about-highlights li {
        font-size: 0.78rem;
        padding: 4px 10px;
    }

    .v2-about-readmore {
        align-self: center;
        padding: 10px 28px;
        font-size: 0.88rem;
    }

    /* Stats: 2x2 grid stays but smaller */
    .v2-about-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 340px;
        margin: 0 auto;
    }

    .v2-about-stat {
        padding: 16px 10px;
        border-radius: 12px;
    }

    .v2-about-stat-value {
        font-size: 1.4rem;
    }

    .v2-about-stat-label {
        font-size: 0.68rem;
    }

    .v2-contact-section#ContactUs {
        padding: 28px 0 24px;
    }

    .v2-contact-header {
        margin-bottom: 20px;
    }

    .v2-contact-header h2 {
        font-size: 1.15rem;
    }

    .v2-contact-header h2::after {
        width: 32px;
        margin-top: 7px;
    }

    .v2-contact-header p {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }

    /* Hide contact info cards on mobile (covered by footer) */
    .v2-contact-info-row {
        display: none;
    }

    .v2-contact-form {
        padding: 16px 14px 14px;
        border-radius: 12px;
        border-top-width: 3px;
        box-shadow: 0 4px 16px rgba(26, 137, 200, 0.08);
    }

    .v2-contact-grid {
        gap: 8px;
    }

    /* Compact inputs */
    #ContactUs .v2-contact-field input {
        min-height: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 0.875rem;
        border-radius: 8px;
        line-height: 1;
    }

    /* Phone pair: compact the shared tokens so both children move together. */
    #ContactUs .v2-contact-phone-row {
        --c4u-phone-height: 40px;
        --c4u-phone-radius: 8px;
        --c4u-phone-font: 0.875rem;
        --c4u-phone-pad: 0 12px;
    }

    #ContactUs .v2-contact-phone-row .CountryCode-ContactUs {
        background-position: right 9px center;
        background-size: 12px 12px;
        padding-right: 27px;
    }

    .v2-contact-field textarea {
        min-height: 90px;
        height: auto;
        padding: 10px 12px;
        font-size: 0.875rem;
        border-radius: 8px;
        resize: none;
        line-height: 1.45;
    }

    .v2-contact-phone-row {
        grid-template-columns: 130px 1fr;
        gap: 8px;
    }

    #ContactUs .v2-contact-captcha-input input {
        min-height: 40px;
        height: 40px;
        padding: 0 10px;
        font-size: 0.85rem;
        border-radius: 8px;
        line-height: 1;
    }

    /* Mobile captcha: image (col1) | refresh (col2) — row1
       Enter CAPTCHA input full-width — row2
       Send Message full-width pill — row3
    */
    .v2-contact-captcha-submit-group {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 8px;
    }

    .v2-contact-captcha-img {
        grid-column: 1;
        grid-row: 1;
    }

    .v2-contact-captcha-action {
        grid-column: 2;
        grid-row: 1;
    }

    #reloadCaptcha,
    .v2-contact-captcha-action .btn {
        height: 100%;
        padding: 0 16px;
        font-size: 0.82rem;
        border-radius: 25px;
    }

    .v2-contact-captcha-input {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #ContactUs .v2-contact-captcha-input input {
        min-height: 42px;
        padding: 0 12px;
        font-size: 0.875rem;
        border-radius: 8px;
    }

    .v2-contact-submit {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        align-items: stretch;
    }

    .v2-contact-submit .blueBtn,
    .v2-contact-submit .btn-lrg.blueBtn {
        width: 100%;
        height: auto;
        min-height: 44px;
        border-radius: 50px;
        font-size: 0.92rem;
        padding: 12px 24px;
    }

    /* Show socials on mobile (hidden on desktop) */
    .v2-contact-socials {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
    }

    .v2-contact-social-link {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.22s ease;
    }

    .v2-contact-social-link:hover {
        background: var(--blue-color, #1A89C8);
        border-color: var(--blue-color, #1A89C8);
        color: #fff;
    }

}

/* ── User icon / logout button — all breakpoints ──────────────── */
.v2-mobile-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    line-height: 1;
}
.v2-mobile-user-icon i {
    font-size: 1.15rem;
    line-height: 1;
}
.v2-mobile-user-icon:hover {
    color: #ffe44d;
    background: rgba(255, 255, 255, 0.08);
}
.v2-mobile-user-icon--logout {
    color: rgba(255, 120, 120, 0.9);
}
.v2-mobile-user-icon--logout:hover {
    color: #ff6b6b;
    background: rgba(255, 80, 80, 0.12);
}
.v2-mobile-user-icon-form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

@media (max-width: 767.98px) {

    /* ──────────────────────────────────────────────
       0. Body & main-content resets
       ────────────────────────────────────────────── */
    body.v2-home-page {
        padding-top: 0 !important;
        overflow-x: hidden;
        /* hide page-level scrollbar on this full-bleed map page */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    body.v2-home-page::-webkit-scrollbar {
        display: none;
    }

    body.v2-home-page .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ── Mobile logged-in user icon strip ──────────────────────────────── */
    /* Bell icon — match the mobile icon strip sizing */
    .v2-notif-bell-btn { color: #ffffff; }
    .v2-notif-bell-icon {
        font-size: 1.15rem;
        line-height: 1;
        display: block;
    }
    /* Icon wrap — positions the notification count badge */
    .v2-notif-bell-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        line-height: 1;
    }
    /* Bell button */
    .v2-notif-bell-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        border-radius: 8px;
        transition: color 0.18s ease, background 0.18s ease;
    }
    .v2-notif-bell-btn:hover {
        color: #ffe44d;
        background: rgba(255,255,255,0.08);
    }
    .v2-mobile-user-icons {
        align-items: center;
        gap: 4px;
    }

    /* Base icon button / link */
    .v2-mobile-user-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.18s ease, background 0.18s ease;
        line-height: 1;
    }
    .v2-mobile-user-icon i {
        font-size: 1.15rem;
        line-height: 1;
    }
    .v2-mobile-user-icon span:not(.v2-mobile-icon-wrap):not(.v2-mobile-icon-badge) {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        line-height: 1;
        color: inherit;
    }
    .v2-mobile-user-icon:hover {
        color: #ffe44d;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Logout — red tint */
    .v2-mobile-user-icon--logout {
        color: rgba(255, 120, 120, 0.9);
    }
    .v2-mobile-user-icon--logout:hover {
        color: #ff6b6b;
        background: rgba(255, 80, 80, 0.12);
    }

    /* Icon wrap — positions the incomplete-profile badge */
    .v2-mobile-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        line-height: 1;
    }
    .v2-mobile-icon-badge {
        position: absolute;
        top: -3px;
        right: -5px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #f7e50f;
        box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
        pointer-events: none;
    }

    /* Form wrapper — zero out default form spacing */
    .v2-mobile-user-icon-form {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }

    /* ──────────────────────────────────────────────
       3b. Map blur-frame overlay — edge frame
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-map-container {
        /* Strong inset blur-frame on left & right edges */
        box-shadow:
            inset  40px 0 50px -8px rgba(255,255,255,0.75),
            inset -40px 0 50px -8px rgba(255,255,255,0.75);
    }
    body.v2-home-page .v2-booking-shell .v2-map-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background:
            /* top edge */
            linear-gradient(to bottom,  rgba(255,255,255,0.10) 0%, transparent 18%),
            /* bottom edge — covers Google terms bar */
            linear-gradient(to top,     rgba(255,255,255,0.55) 0%, transparent 14%),
            /* left edge */
            linear-gradient(to right,   rgba(255,255,255,0.60) 0%, transparent 14%),
            /* right edge */
            linear-gradient(to left,    rgba(255,255,255,0.60) 0%, transparent 14%);
    }
    /* Bottom-only blur layer to obscure Google terms text */
    body.v2-home-page .v2-booking-shell .v2-map-container::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 28px;
        z-index: 3;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(255,255,255,0.22);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent 100%);
    }

    /* ──────────────────────────────────────────────
       3b. Hero overlay — mobile adjustments
       ────────────────────────────────────────────── */
    .v2-hybrid-hero-overlay {
        background-position: 65% top;
        background-size: 160% auto;
        justify-content: flex-start;
    }
    .v2-hero-text-area {
        padding: calc(65px + 18px) 20px 12px;
        max-width: 100%;
    }
    .v2-hybrid-hero-title {
        font-size: 1.65rem;
        margin-bottom: 8px;
    }
    .v2-hero-title-accent {
        font-size: 1.45rem;
    }
    .v2-hybrid-hero-subtitle {
        font-size: 0.86rem;
        max-width: 100%;
    }
    .v2-hero-booking-bar {
        margin: auto 5.5vw 10vh;
        flex-direction: column;
        overflow: visible;
    }
    .v2-hero-pickup-card {
        border-radius: 18px 18px 0 0 !important;
        padding: 16px 20px 18px;
    }
    .v2-hero-dropoff-card {
        border-radius: 0 0 18px 18px !important;
        padding: 16px 20px 18px;
    }
    .v2-hero-step-name {
        font-size: 1.1rem;
    }
    .v2-hero-book-btn {
        width: 100%;
        align-self: stretch;
        text-align: center;
        justify-content: center;
        padding: 11px 20px;
    }

    /* ──────────────────────────────────────────────
       4. Booking shell — full-width, no gaps
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.v2-home-page .v2-booking-shell > .row.g-0.d-flex {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ──────────────────────────────────────────────
       5. Map — 70% height, FULL width, no margins
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-map-container {
        order: 1;
        position: relative;
        top: auto;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        height: 70vh;
        height: 70dvh;
        min-height: 0;
        max-height: none;
        z-index: 1;
        border-bottom: 1px solid #e5e7eb;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* ──────────────────────────────────────────────
       6. Form panel — 30% height, full width
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .form-content {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
        height: 30dvh;
        overflow-y: auto;
        min-height: 0;
        max-height:v2-direction-panel none;
        /* overflow: visible so address dropdowns aren't clipped at the panel edge */
        /* Pull form up to visually close the unexplained gap */
        margin-top: -1rem !important;
        /* Prevent scroll-chaining to body when guard is active */
        overscroll-behavior: contain;
    }

    body.v2-home-page .v2-booking-shell .booking-form-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        max-height: 100%;
        /* Must be visible — overflow-y:auto clips absolute dropdowns inside.
           Scrolling is handled by the page body on mobile. */
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 100px 12px !important;
        background: #ffffff !important;
    }

    /* Alpine root div — transparent so map shows through */
    body.v2-home-page .v2-booking-shell .booking-form-container > div {
        background: transparent !important;
    }

    /* Booking card — fill container, overflow visible so dropdowns aren't clipped */
    body.v2-home-page .v2-booking-shell .v2-booking-card {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible;
    }

    /* ──────────────────────────────────────────────
       Zero all intermediate wrapper divs so Alpine
       root & x-show wrappers can't inject top space.
       Also kill v2-order-summary mt-3 ghost margin.
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .booking-form-container > div,
    body.v2-home-page .v2-booking-shell .booking-form-container > div > div {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body.v2-home-page .v2-booking-shell .v2-order-summary {
        margin-top: 0 !important;
    }
    body.v2-home-page .v2-booking-shell .v2-booking-card > div[x-show]:not(.v2-order-summary) {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ──────────────────────────────────────────────
       7. LTL/FTL tabs — text-height only, no space
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-tabs-row {
        line-height: 1 !important;
        font-size: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    body.v2-home-page .v2-booking-shell .v2-tabs-row .v2-shipment-tabs {
        margin-bottom: 0 !important;
        padding: 0 !important;
        border-bottom-width: 1px;
    }

    body.v2-home-page .v2-booking-shell .v2-tabs-row .v2-shipment-tabs .nav-item {
        display: flex;
        align-items: flex-end;
    }

    body.v2-home-page .v2-booking-shell .v2-tabs-row .v2-shipment-tabs .nav-item > button.nav-link {
        padding: 0 0 3px 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        min-height: 0 !important;
        height: auto !important;
        border-bottom-width: 2px;
        margin-bottom: -1px !important;
    }

    /* ──────────────────────────────────────────────
       8. LTL mode selector — compact
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-ltl-mode-selector {
        margin-bottom: 2px;
    }

    body.v2-home-page .v2-booking-shell .v2-ltl-mode-selector .btn-group .btn-outline-primary {
        padding: 3px 4px !important;
        font-size: 10px !important;
        line-height: 1;
    }

    body.v2-home-page .v2-booking-shell .v2-ltl-mode-selector .btn-group .btn-outline-primary small {
        display: none;
    }

    /* ──────────────────────────────────────────────
       9. Direction panel + form fields — compact
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-direction-panel {
        padding: 4px 8px 8px 8px;
        border-radius: 10px;
    }

    body.v2-home-page .v2-booking-shell .v2-direction-row {
        column-gap: 5px;
        margin-bottom: 2px;
    }

    body.v2-home-page .v2-booking-shell .v2-direction-timeline {
        min-height: 34px;
        padding-top: 10px;
    }

    /* Dashed connector: recalc top to match mobile padding-top (10px + dot 14px) */
    body.v2-home-page .v2-booking-shell .v2-direction-timeline.has-line::after {
        top: calc(10px + 14px);
        bottom: -6px;
    }

    /* Stop dots are 12px — adjust so they also center on the 34px input */
    body.v2-home-page .v2-booking-shell .v2-direction-dot.stop {
        margin-top: 1px;
    }

    /* Swap row: tighter overlap for compact rows */
    body.v2-home-page .v2-booking-shell .v2-swap-row {
        margin: -12px 0;
    }

    body.v2-home-page .v2-booking-shell .v2-dir-field {
        margin-top: 4px;
    }

    body.v2-home-page .v2-booking-shell .v2-dir-field-label {
        font-size: 9px;
        top: -6px;
    }

    body.v2-home-page .v2-booking-shell .v2-direction-content .form-control {
        height: 34px;
        font-size: 13px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    /* Schedule row compact */
    body.v2-home-page .v2-booking-shell .v2-schedule-row {
        padding: 4px 0;
    }

    body.v2-home-page .v2-booking-shell .v2-schedule-col-label {
        font-size: 9px;
    }

    body.v2-home-page .v2-booking-shell .v2-schedule-col-value {
        font-size: 10px;
    }

    /* ──────────────────────────────────────────────
       10. Add Stop button — match 34px compact fields
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-direction-add-stop {
        column-gap: 5px;
        margin-top: 4px;
    }

    body.v2-home-page .v2-booking-shell .v2-add-dest-timeline {
        height: 34px;
        font-size: 14px;
    }

    body.v2-home-page .v2-booking-shell .v2-add-dest-text {
        height: 34px;
        font-size: 13px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .v2-swap-btn {
        width: 24px;
        height: 24px;
        padding: 0;
    }

    /* ──────────────────────────────────────────────
       11. Truck Type — contain within form width
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-vehicle-selector {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-list {
        overflow-x: hidden;
        padding: 0 6px 6px;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-card {
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
    }
    /* Shrink the truck image column on mobile so info text has room */
    body.v2-home-page .v2-booking-shell .v2-vs-card-img,
    body.v2-home-page .v2-booking-shell .v2-vs-preview-img {
        width: 40%;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-card-img img,
    body.v2-home-page .v2-booking-shell .v2-vs-preview-img img {
        max-height: 55px;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-card-name,
    body.v2-home-page .v2-booking-shell .v2-vs-preview-name {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-selected-preview {
        padding: 6px 8px;
        margin: 0 8px 8px;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-card-specs,
    body.v2-home-page .v2-booking-shell .v2-vs-card-desc {
        white-space: normal;
        word-break: break-word;
    }
    body.v2-home-page .v2-booking-shell .v2-vs-card-check {
        top: 6px;
        right: 8px;
        font-size: 15px;
    }

    /* ──────────────────────────────────────────────
       12. Additional Services — fix width overflow
       ────────────────────────────────────────────── */
    body.v2-home-page .v2-booking-shell .v2-additional-services {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    /* When an addon is checked, push the checked-group below the label row */
    body.v2-home-page .v2-booking-shell .v2-addl-option {
        flex-wrap: wrap;
    }
    body.v2-home-page .v2-booking-shell .v2-addl-checked-group {
        flex-direction: row;
        align-items: center;
        margin-left: 0;
        width: 100%;
        gap: 8px;
        padding: 6px 0 2px;
    }

    /* Floating in-border label wrapper — matches v2-dir-field pattern */
    body.v2-home-page .v2-booking-shell .v2-addl-inline-field {
        position: relative;
        margin-top: 6px;
        flex: 1;
        min-width: 0;
    }
    body.v2-home-page .v2-booking-shell .v2-addl-field-label {
        position: absolute;
        top: -7px;
        left: 10px;
        background: #fff;
        padding: 0 4px;
        font-size: 9px;
        font-weight: 600;
        color: #9aa0a6;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        z-index: 1;
        pointer-events: none;
        white-space: nowrap;
    }
    /* Input styled like form-control address fields */
    body.v2-home-page .v2-booking-shell .v2-addl-input {
        width: 100% !important;
        max-width: 100%;
        height: 24px;
        font-size: 14px;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1.5px solid #c0c4c9;
        box-shadow: none;
    }
    /* Workers: width just wide enough for the label "No. of Workers" */
    body.v2-home-page .v2-booking-shell .v2-addl-inline-field:has(input[x-model="manpower"]) {
        flex: 0 0 auto;
        width: fit-content;
        min-width: 90px;  /* slightly wider than label text */
    }
    /* Workers cost: push to right edge */
    body.v2-home-page .v2-booking-shell .v2-addl-checked-group:has(input[x-model="manpower"]) .v2-addl-cost-display {
        margin-left: auto;
        text-align: right;
    }
    /* Cargo value: take exactly half the available space */
    body.v2-home-page .v2-booking-shell .v2-addl-inline-field:has(input[x-model="cargoValue"]) {
        flex: 0 0 50%;
        min-width: 0;
    }
    /* Cargo cost: take the other half, vertically aligned to input bottom */
    body.v2-home-page .v2-booking-shell .v2-addl-checked-group:has(input[x-model="cargoValue"]) .v2-addl-cost-display {
        flex: 0 0 calc(50% - 8px);
        text-align: right;
        align-self: flex-end;
        padding-bottom: 6px;
        font-size: 12px;
        white-space: nowrap;
        margin-left: 0;
        width: auto;
    }
    /* Default cost display reset */
    body.v2-home-page .v2-booking-shell .v2-addl-cost-display {
        width: auto;
        margin-left: 0;
        text-align: left;
        font-size: 12px;
        align-self: flex-end;
        padding-bottom: 6px;
    }

    /* Booking flow mobile states: keep desktop-style structure, scaled down.
       Also ensure internal form-panel scrolling remains enabled. */
    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell > .row.g-0.d-flex,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell > .row.g-0.d-flex {
        height: 100dvh;
        min-height: 100dvh;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-map-container,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-map-container {
        flex: 0 0 28dvh;
        height: 28dvh;
        min-height: 168px;
        max-height: 220px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .form-content,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .form-content {
        flex: 1 1 auto;
        height: 72dvh;
        min-height: 0;
        max-height: 72dvh;
        margin-top: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .booking-form-container,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .booking-form-container {
        height: 100%;
        max-height: 100%;
        padding: 0 12px 20px 12px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary {
        margin-top: 8px !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 14px;
        padding: 16px 14px !important;
        max-height: calc(72dvh - 20px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-title,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-schedule,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-schedule {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-cols,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-cols {
        flex-direction: row;
        gap: 14px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-label,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-label {
        font-size: 12px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-value,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-schedule-value {
        font-size: 13px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-route,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-route {
        padding: 4px 0 12px;
        margin-bottom: 10px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-route-row,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-route-row {
        min-height: 42px;
        gap: 10px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-route-name,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-route-name {
        font-size: 13px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-route-addr,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-route-addr {
        font-size: 11px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-info-row,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-info-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-info-text,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-info-text {
        min-width: 0;
        flex: 1;
        text-align: right;
        width: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-total,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-total {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-total-value,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-total-value {
        font-size: 18px;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-summary-balance,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-summary-balance {
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .d-flex.gap-2.mt-3,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .d-flex.gap-2.mt-3 {
        flex-direction: row;
        align-items: stretch;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-place-order-btn,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-place-order-btn {
        height: 42px;
        font-size: 14px;
        padding: 0 12px;
    }

    body.v2-home-page.v2-mobile-booking-summary-step .v2-booking-shell .v2-order-summary .v2-edit-btn,
    body.v2-home-page.v2-mobile-booking-success-step .v2-booking-shell .v2-order-summary .v2-edit-btn {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }
}

/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP BREAKPOINTS (Consolidated)
   Feature: customer-screen-consolidation
   ═══════════════════════════════════════════════════════════ */

/* ── XL Desktop (≥1400px) ─────────────────────────────── */
@media (min-width: 1400px) {
    /* Container override — lift Bootstrap 1320px cap */
    body.v2-home-page .v2-container.container {
        max-width: 1600px;
    }

    /* Hero typography scaling */
    .v2-hybrid-hero-title { font-size: 3.4rem; }
    .v2-hero-title-accent { font-size: 3rem; }
    .v2-hybrid-hero-subtitle { font-size: 1.1rem; max-width: 500px; }
    .v2-hero-text-area { max-width: 700px; padding: 72px 80px 0; }

    /* Features bento grid — taller rows */
    .v2-features-track.is-vertical {
        grid-template-rows: 220px 220px 280px;
        gap: 18px;
    }

    /* About Us — wider layout */
    .v2-about-layout { max-width: 1100px; }

    /* Contact Us — wider layout */
    .v2-contact-header { max-width: 800px; }
    .v2-contact-info-row { max-width: 1000px; }
    .v2-contact-form { max-width: 1000px; }
}

/* ── XXL Desktop (≥1920px) ────────────────────────────── */
@media (min-width: 1920px) {
    /* Container override */
    body.v2-home-page .v2-container.container {
        max-width: 1800px;
    }

    /* Hero typography scaling */
    .v2-hybrid-hero-title { font-size: 3.8rem; }
    .v2-hero-title-accent { font-size: 3.4rem; }
    .v2-hero-text-area { max-width: 800px; padding: 80px 100px 0; }

    /* Hero booking bar margins */
    .v2-hero-booking-bar { margin: 0 12vw 12vh; }

    /* Features bento grid — taller rows */
    .v2-features-track.is-vertical {
        grid-template-rows: 260px 260px 320px;
        gap: 22px;
    }

    /* About Us — wider layout */
    .v2-about-layout { max-width: 1300px; }

    /* Contact Us — wider layout */
    .v2-contact-header { max-width: 900px; }
    .v2-contact-info-row { max-width: 1200px; }
    .v2-contact-form { max-width: 1200px; }
}

/* ── Ultra-wide (≥2560px) ─────────────────────────────── */
@media (min-width: 2560px) {
    /* Container override */
    body.v2-home-page .v2-container.container {
        max-width: 2200px;
    }

    /* Hero booking bar margins */
    .v2-hero-booking-bar { margin: 0 18vw 12vh; }

    /* About Us — wider layout */
    .v2-about-layout { max-width: 1500px; }
}

/* ========================================================
   Profile Theme Rollout — Booking Screen (Desktop Only)
   Keep mobile booking untouched by design.
   ======================================================== */
@media (min-width: 992px) {
    body.v2-home-page .form-content {
        background:
            radial-gradient(circle at 88% 4%, rgba(244, 197, 49, 0.16), transparent 24%),
            radial-gradient(circle at 8% 6%, rgba(17, 88, 170, 0.12), transparent 28%),
            linear-gradient(180deg, #f7fbff 0%, #eef3fb 58%, #ecf1f8 100%);
        border-right: 1px solid rgba(18, 42, 69, 0.08);
    }

    body.v2-home-page .booking-form-container {
        background: transparent;
    }

    body.v2-home-page .v2-booking-card {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 22px;
        border: 1px solid rgba(18, 42, 69, 0.08);
        box-shadow: 0 18px 32px rgba(18, 42, 69, 0.09);
        padding: 16px;
        margin-top: 18px;
        margin-bottom: 16px;
    }

    body.v2-home-page .v2-vs-title,
    body.v2-home-page .v2-dir-field-label,
    body.v2-home-page .v2-schedule-col-label,
    body.v2-home-page .v2-addl-field-label,
    body.v2-home-page .v2-price-subheader {
        color: #4a6380;
    }

    body.v2-home-page .v2-booking-card .btn-danger {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e8 100%) !important;
        color: #be123c !important;
        border: 1px solid #ffccd5 !important;
    }

    body.v2-home-page .v2-booking-card .v2-price-breakdown,
    body.v2-home-page .v2-booking-card .v2-direction-panel,
    body.v2-home-page .v2-booking-card .v2-vehicle-selector {
        border-color: rgba(18, 42, 69, 0.08);
        box-shadow: 0 8px 22px rgba(18, 42, 69, 0.07);
    }
}

body.v2-home-page .v2-booking-card .btn-primary,
body.v2-home-page .v2-pallet-add-btn,
body.v2-home-page .v2-hero-book-btn {
    background: linear-gradient(120deg, #f4c531, #f6d45f) !important;
    color: #0f2f57 !important;
    border: none !important;
    box-shadow: 0 12px 24px rgba(244, 197, 49, 0.3) !important;
}

body.v2-home-page .v2-booking-card .btn-primary:hover,
body.v2-home-page .v2-pallet-add-btn:hover,
body.v2-home-page .v2-hero-book-btn:hover {
    filter: brightness(0.96);
}

.v2-insurance-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
}
.v2-insurance-fields .v2-addl-checked-group { margin-left: 0; }
.v2-proof-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.v2-proof-input-native {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.v2-proof-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed #c0c4c9;
    border-radius: 6px;
    background: #fafbfc;
    color: #4a6380;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.v2-proof-trigger:hover { border-color: #f4c531; background: #fffdf5; }
.v2-proof-trigger i { color: #f4c531; }
.v2-proof-hint {
    font-weight: 400;
    color: #9aa0a6;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.v2-proof-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}
.v2-proof-uploading { color: #4a6380; background: #f4f7fb; }
.v2-proof-attached {
    color: #1a7f4b;
    background: #effaf3;
    border: 1px solid #c7ecd6;
}
.v2-proof-attached i { color: #1a7f4b; }
.v2-proof-filename {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-proof-remove {
    border: none;
    background: transparent;
    color: #9aa0a6;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 13px;
}
.v2-proof-remove:hover { color: #d33; }
.v2-proof-error {
    font-size: 11px;
    color: #d33;
    text-align: right;
}

@media (max-width: 767.98px) {
    .v2-insurance-fields {
        width: 100%;
        align-items: stretch;
        margin-left: 0;
    }
    .v2-proof-upload { align-items: stretch; }
    .v2-proof-trigger { justify-content: center; }
    .v2-proof-status { justify-content: center; }
    .v2-proof-filename { max-width: none; flex: 1; }
    .v2-proof-error { text-align: center; }
}