/*------------------------------------------------------------
  RESERVANEO — flat design system
  Square corners, hairline borders, flat fills, compact spacing.
  Near-monochrome palette; the accent blue is reserved for
  links and primary actions only.
  ------------------------------------------------------------*/

:root {
    /* DUOTONE — lead carries actions and links, counter is the
       counterpoint used to alternate sections and illustrations.
       Chrome and body copy stay neutral so the colour reads as
       information rather than decoration. */
    --color-primary: #101010;
    --color-primary-hover: #000000;

    /* Playful accent set, sampled from the reference */
    --c-green: #00C068;
    --c-orange: #F97316;
    --c-red: #F5432C;
    --c-sky: #58B8F8;
    --c-blue: #137FEB;
    --c-amber: #F5B544;
    --c-purple: #6E56CF;

    /* Deeper variants for UI state — bright hues above are for
       illustration fills and fail 3:1 as a state indicator. */
    --c-blue-deep: #137FEB;
    --c-sky-deep: #078BE3;
    --c-orange-deep: #DE5D04;
    --c-amber-deep: #B77708;
    --c-green-deep: #009752;
    --c-purple-deep: #6E56CF;

    /* Single accent for active icon state — on the strokes */
    --icon-active: #137FEB;

    --color-counter: var(--c-orange);
    --color-counter-hover: #DD5E0A;
    --color-counter-text: #B4480A;

    --tint-lead: #EAF3FF;
    --tint-counter: #FFF3E6;

    --color-accent: var(--c-green);
    --color-accent-hover: #00A85B;

    /* NEUTRAL SCALE (50 lightest -> 950 darkest) */
    --color-white: #ffffff;
    --color-gray-50: #FBFBFA;
    --color-gray-100: #F3F3F1;
    --color-gray-150: #E9E9E6;
    --color-gray-200: #DEDEDA;
    --color-gray-400: #6B6B68;
    --color-gray-500: #5C5C58;
    --color-gray-900: #242422;
    --color-gray-950: #101010;

    /* Page sits on an off-white ground; cards are the white plane */
    --surface: #F8F8F8;
    --surface-alt: #FFFFFF;

    /* SEMANTIC STATES */
    --color-success: #1e7a43;
    --color-warning: #8a5a00;
    --color-danger: #b32020;

    /* FORMS */
    --color-input: #f4f4f4;

    /* THIRD-PARTY */
    --color-trustpilot: #00733d;
    --color-trustpilot-hover: #005c31;

    /* BORDERS */
    --border-hairline: 1px solid var(--color-gray-200);
    --border-light: 1px solid var(--color-gray-150);

    /* TYPOGRAPHY — neutral grotesque, no webfont */
    --font-heading: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fw-300: 400;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 700;
    --fw-900: 700;

    /* TYPE SCALE — compact, minimal fluid range */
    --text-hero: clamp(2.75rem, 6.5vw, 5rem);
    --text-h1: clamp(2.25rem, 5vw, 3.5rem);
    --text-h2: clamp(1.75rem, 3.6vw, 2.75rem);
    --text-h3: clamp(1.1875rem, 1.5vw, 1.375rem);
    --text-h4: 1.25rem;
    --text-h5: 1.125rem;
    --text-h6: 1rem;
    --text-nav: 0.9375rem;
    --text-title: clamp(1.375rem, 2.4vw, 1.625rem);
    --text-base: 1rem;
    --text-md: 0.9375rem;
    --text-sm: 0.875rem;
    --text-xs: 0.8125rem;

    /* SPACING — tight, fixed steps */
    --space-xl: 7rem;
    --space-lg: 5rem;
    --space-base: 4rem;
    --space-md: 3rem;
    --space-sm: 1.5rem;
    --space-xs: 1rem;
    --space-xxs: 0.5rem;

    /* Page edge inset */
    --gutter-x: 1rem;

    /* Feature-list markers */
    --mark-check: url("/img/icons/ui/check.svg");
    --mark-clock: url("/img/icons/ui/clock.svg");

    /* RADIUS — square by design */
    --radius-base: 20px;
    --radius-sm: 12px;
    --radius-full: 999px;

    /* SHADOW — flat design has none */
    --shadow-base: none;

    /* TRANSITIONS — colour only, nothing moves */
    --transition-base: background-color .12s linear, color .12s linear, border-color .12s linear;
    --transition-slow: background-color .12s linear, color .12s linear, border-color .12s linear;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-gray-950);
    background-color: var(--color-white);
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
}

main {
    flex: 1;
}

.head {
    position: relative;
}

.head-xl {
    padding: var(--space-lg) 0;
}

.head-lg {
    padding: var(--space-base) 0;
}

.head-md {
    padding: var(--space-md) 0;
}

.head-sm {
    padding: var(--space-sm) 0;
}

section {
    position: relative;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.section-lg {
    padding-top: var(--space-base);
    padding-bottom: var(--space-base);
}

/* @media (max-width: 767.98px) {
    section {
        margin: 0;
        border-radius: var(--radius-sm);
    }
} */

/*------------------------------------------------------------
  [ IMAGES ]
  ------------------------------------------------------------*/

.content-overlay {
    position: relative;
    z-index: 5;
}

.img-overlay {
    display: none;
}

img {
    border: 0;
    height: auto;
    image-rendering: auto;
    vertical-align: middle;
}

.hotel-photo-container,
.transport-photo-container,
.event-photo-container,
.restaurant-photo-container {
    width: 100%;
    max-width: 110px;
    height: 110px;
    overflow: hidden;
}

.taxi-photo-container {
    width: 100%;
    max-width: 125px;
    height: auto;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.restaurant-photo-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hotel-photo-container img,
.transport-photo-container img,
.event-photo-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-50);
}

.taxi-photo-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.object-position-top {
    object-position: top;
}

.object-position-center {
    object-position: center;
}

.object-position-right {
    object-position: right;
}

.object-position-bottom {
    object-position: bottom;
}

.spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.18em;
}

.spinner-border-lg {
    width: 2rem !important;
    height: 2rem !important;
    border-width: 0.28em !important;
}

/* -------NEW AD RESTAURANT PAGE LANDING--------- */

.search-image-container-inner {
    border-radius: var(--radius-sm);
}

.search-image-container-inner.large {
    flex: 1;
    overflow: hidden;
}

.search-image-container-inner.large {
    width: 120px;
    height: 120px;
}

.search-image-container-inner.large img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.search-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    flex: 1;
}

.search-image-container-inner.small {
    min-height: 148px;
    overflow: hidden;
}

.search-image-container-inner img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-gray-150);
}

.flex-basis-70 {
    flex-basis: 70%;
}

.flex-basis-30 {
    flex-basis: 30%;
}

.flex-basis-60 {
    flex-basis: 60%;
}

.flex-basis-40 {
    flex-basis: 40%;
}

.grid-template-lg-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199.98px) {
    .grid-template-lg-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991.98px) {
    .search-image-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0.5rem;
        flex: 1;
    }

    .search-image-grid .search-image-container-inner:nth-child(3),
    .search-image-grid .search-image-container-inner:nth-child(4) {
        display: none;
    }

    .grid-template-lg-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .flex-basis-70 {
        flex-basis: 100%;
    }

    .search-image-container-outer {
        width: 100%;
        max-height: 180px;
    }

    .search-image-container-inner.large {
        width: 100%;
        height: 100%;
        max-height: 140px;
    }

    .search-image-container-inner.large img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 575.98px) {

    .search-image-container-inner.small {
        height: 80px;
    }

    .flex-basis-70 {
        flex-basis: 100%;
    }

    .grid-template-lg-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.search-image-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.search-image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media (max-width: 767.98px) {
    .btn-dropdown-more {
        background-color: var(--color-white) !important;
    }

    .search-image-container {
        height: auto;
        margin-bottom: 1rem;
    }

    .search-image-container img {
        height: 140px;
        width: 100%;
    }

    .hotel-photo-container,
    .transport-photo-container,
    .event-photo-container,
    .restaurant-photo-container {
        max-width: 100%;
    }

    .taxi-photo-container {
        height: 100px;
        max-width: 100%;
    }
}

.avatar {
    height: 3rem;
    width: 3rem;
    position: relative;
    display: inline-block !important;
}

.avatar-group {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.avatar-group>li:not(:last-child) {
    margin-right: -0.8rem;
}

.avatar-group>li {
    position: relative;
}

.avatar-xs {
    height: 2.4rem;
    width: 2.4rem;
}

.avatar-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

ul li .checkmarks {
    width: 16px;
    height: 16px;
}

.icons {
    width: 20px;
    height: 20px;
}

.icons-md {
    width: 18px;
    height: 18px;
}

.icons-sm {
    width: 16px;
    height: 16px;
}

.icons-xs {
    width: 14px;
    height: 14px;
}

/* ------------ */

#date-time-block {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease, visibility 0s linear 0.5s;
}

#date-time-block.visible {
    display: flex;
    max-height: 80px;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: max-height 0.5s ease, opacity 0.4s ease, visibility 0s linear 0s;
}

.blurred-block {
    align-items: center;
    background: var(--color-white);
    border: var(--border-hairline);
    display: flex;
    left: 20px;
    padding: 12px 20px;
    position: absolute;
    right: 20px;
}

.blurred-block.top {
    top: 24px;
}

.blurred-block.bottom {
    bottom: 24px;
}

/* -----------------------
SCROLLING BUTTONS GROUP
 ----------------------- */

.scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}

.scrollable-buttons {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    width: 100%;
}

.scrollable-buttons button {
    transition: var(--transition-base);
}

.scrollable-buttons button:hover {
    border-color: var(--color-gray-500) !important;
}

.scrollable-buttons::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    display: block;
    font-size: var(--text-md);
    background-color: var(--color-white);
    color: var(--color-gray-950) !important;
    font-weight: var(--fw-500);
    border: 1px solid var(--color-gray-200) !important;
    padding: 7px 9px !important;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition-base);
}

.scroll-btn:hover {
    border-color: var(--color-gray-500) !important;
}

.scroll-btn.left {
    display: none;
    left: 0;
}

.scroll-btn.left svg {
    transform: rotate(180deg);
}

.scroll-btn.right {
    right: 0;
}

@media (max-width: 767.98px) {
    .scrollable-buttons {
        overflow-x: scroll;
    }

    .scroll-btn {
        display: none !important;
    }
}

/* ----------------------- */

/*------------------------------------------------------------
  [ NAVIGATION / TABS NAV ]
  ------------------------------------------------------------*/

nav {
    position: relative;
    z-index: 99;
}

.nav::-webkit-scrollbar {
    display: none;
}

.nav {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.navbar {
    position: relative;
    top: 0;
    padding: 0.35rem 0;
    background-color: var(--color-white);
    border-bottom: var(--border-hairline);
    z-index: 1030;
}

.navbar-title {
    font-size: var(--text-base);
}

@media (max-width: 767.98px) {
    nav.navbar {
        margin: 0;
        border-radius: var(--radius-sm);
    }
}

.navbar .navbar-brand img {
    height: 26px;
}

.navbar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 0 !important;
    height: 34px;
    width: 34px;
    transition: var(--transition-base);
}

.navbar .btn.btn-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background-color: transparent;
    font-size: var(--text-md);
    font-weight: var(--fw-400);
    padding: 5px 10px !important;
    height: 34px;
    width: 100%;
    min-width: 72px;
    transition: var(--transition-base);
}

.navbar .btn svg path {
    fill: none;
    stroke: var(--color-gray-950);
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.navbar .btn:hover {
    background-color: var(--color-gray-100);
}

.navbar .btn:hover svg path {
    fill: none;
}

.navbar-toggler {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: transparent;
    background-image: none;
    border: 0;
    padding: 5px;
    width: 34px;
    height: 34px;
    transition: var(--transition-base);
}

.navbar-toggler svg {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-gray-900);
}

.navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
}

.navbar-toggler:hover {
    background: var(--color-gray-100) !important;
}

.nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    color: var(--color-gray-950);
    font-size: var(--text-nav);
    font-weight: var(--fw-400);
    border: 1px solid transparent;
    transition: var(--transition-base);
}

.nav-link svg path {
    fill: none;
    stroke: var(--color-gray-950) !important;
}

.nav-link .contact-icons {
    width: 20px !important;
    height: 20px !important;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--color-gray-500);
}

.nav-link.active {
    color: var(--color-primary) !important;
    background-color: transparent;
    font-weight: var(--fw-600);
}

.offcanvas-body .nav-link {
    color: var(--color-gray-950);
}

.offcanvas-body .nav-link.active {
    color: var(--color-gray-400);
}

.offcanvas-body .nav-link:hover {
    background-color: var(--color-gray-50);
    color: var(--color-primary);
}

.nav-link.active svg path {
    fill: none;
    stroke: var(--color-primary) !important;
}

.nav-link.dropdown-toggle.show {
    background-color: var(--color-gray-100);
}

.navbar .dropdown-menu.show {
    background-color: var(--color-white);
    border: var(--border-hairline);
    width: fit-content;
    z-index: 1000;
    padding: 4px;
    overflow: auto;
}

.navbar .dropdown-menu .dropdown-item {
    padding: .35rem .75rem;
    font-size: var(--text-md);
}

.navbar .dropdown-menu .dropdown-item:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-gray-100) !important;
}

.dropdown-item:hover {
    color: var(--color-gray-950) !important;
    background-color: var(--color-gray-100) !important;
    border-radius: var(--radius-sm);
}

.dropdown-menu.show {
    border: 1px solid var(--color-gray-150);
}

.dropdown-toggle::after {
    border-top: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-left: 0;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    margin-left: 0.5em;
}

/* --------- TABS ----------- */

#dashboardTabs .nav-underline .nav-link {
    color: var(--color-gray-400) !important;
    padding: 8px 10px;
    font-weight: var(--fw-500);
    font-size: var(--text-md);
    width: fit-content;
    min-width: 100px;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: var(--transition-base);
}

#dashboardTabs .nav-underline .nav-link svg {
    width: 18px !important;
    height: 18px !important;
}

#dashboardTabs .nav-underline .nav-link.active {
    color: var(--color-white) !important;
    font-weight: var(--fw-600);
    border: 0;
    border-bottom: 2px solid var(--color-white) !important;
}

#dashboardTabs .nav-underline .nav-link:hover {
    color: var(--color-white) !important;
}

#tabs .nav-underline .nav-link {
    color: var(--color-gray-500) !important;
    padding: 8px 10px;
    font-weight: var(--fw-500);
    font-size: var(--text-md);
    width: fit-content;
    min-width: 90px;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: var(--transition-base);
}

#tabs .nav-underline .nav-link.active {
    background-color: transparent;
    color: var(--color-gray-950) !important;
    font-weight: var(--fw-600);
    border: 0;
    border-bottom: 2px solid var(--color-primary) !important;
}

/* single restaurant page tabs */
#tabs .nav-underline-primary .nav-link {
    color: var(--color-gray-500) !important;
    padding: 8px 10px;
    font-weight: var(--fw-500) !important;
    font-size: var(--text-md);
    width: fit-content;
    min-width: 90px;
    text-align: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
    transition: var(--transition-base);
}

#tabs .nav-underline-primary .nav-link.active {
    background-color: transparent;
    color: var(--color-gray-950) !important;
    font-weight: var(--fw-600) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

@media (max-width: 767.98px) {

    #tabs .nav-underline .nav-link,
    #tabs .nav-underline-primary .nav-link {
        font-size: var(--text-sm);
        padding: 6px;
        width: fit-content;
        min-width: 80px;
    }

    #dashboardTabs .nav-underline .nav-link,
    #dashboardTabs .nav-underline-primary .nav-link {
        font-size: var(--text-sm);
        padding: 6px;
        width: fit-content;
        min-width: 90px;
    }
}

.tab-content>.active {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.3rem;
}

.offcanvas.offcanvas-end {
    width: 350px;
}

.offcanvas-backdrop {
    overflow: hidden;
}

.offcanvas-header {
    padding: 0.9rem 1rem;
}

.offcanvas-header .btn-close {
    position: static;
    color: var(--color-gray-950);
    padding: 10px;
    margin: 0;
    opacity: 1;
    transition: var(--transition-base);
}

.offcanvas-header .btn-close:hover {
    background-color: var(--color-gray-50);
}

.fixed-callback {
    position: fixed;
    right: 2%;
    bottom: 5%
}

.fixed-callback .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
}


/*------------------------------------------------------------
  [ DASHBOARD FLIGHT / TRAIN ROUTES CARDS DESIGN ]
  ------------------------------------------------------------*/

.text-truncate {
    width: 80px;
}

.route-line,
.taxi-route-line {
    height: 1px;
    background: transparent;
    position: relative;
    flex-grow: 1;
    min-width: 200px;
    max-width: 200px;
    width: 100%;
}

.taxi-route-line {
    max-width: 110px;
    min-width: 100px;
}

.route-line .line {
    display: block;
    height: 2px;
    background: var(--color-primary-hover);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.route-line .dot {
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}


.taxi-route-line .line {
    display: block;
    height: 2px;
    background: var(--color-gray-950);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.taxi-route-line .dot {
    width: 10px;
    height: 10px;
    background: var(--color-gray-950);
    border: 2px solid var(--color-gray-950);
    border-radius: var(--radius-sm);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}

.taxi-route-line .start-dot {
    border-radius: var(--radius-sm);
}

.route-line .start-dot,
.taxi-route-line .start-dot {
    left: 0;
}

.route-line .end-dot,
.taxi-route-line .end-dot {
    right: 0;
}

@media (max-width: 767.98px) {
    .taxi-route-line {
        max-width: 280px;
        min-width: 100px;
    }
}

@media (max-width: 575.98px) {
    .taxi-route-line {
        max-width: 220px;
        min-width: 160px;
    }
}

/*------------------------------------------------------------
  [ TEXT ]
  ------------------------------------------------------------*/

h1.hero-title {
    font-size: var(--text-h1);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
    color: var(--color-gray-950);
    overflow-wrap: break-word;
    letter-spacing: normal;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.4em;
}

h1,
.h1 {
    font-size: var(--text-h1);
    font-weight: var(--fw-700);
    line-height: 1.15;
}

h2,
.h2 {
    font-size: var(--text-h2);
    font-weight: var(--fw-700);
    letter-spacing: normal;
}

h3,
.h3 {
    font-size: var(--text-h3);
    font-weight: var(--fw-700);
}

h4,
.h4 {
    font-size: var(--text-h4);
    font-weight: var(--fw-600);
}

h5,
.h5 {
    font-size: var(--text-h5);
    font-weight: var(--fw-500);
}

h6,
.h6 {
    font-size: var(--text-h6);
    font-weight: var(--fw-600);
}

p,
.p {
    font-size: var(--text-base);
    font-weight: var(--fw-400);
    line-height: 1.5;
    margin-bottom: 1em;
}

small,
.small {
    font-size: var(--text-sm);
    font-weight: var(--fw-400);
}

.fs-medium {
    font-size: var(--text-md);
}

.fs-small {
    font-size: var(--text-sm);
}

.fs-xsmall {
    font-size: var(--text-xs);
}

.fw-500 {
    font-weight: var(--fw-500) !important;
}

.fw-400 {
    font-weight: var(--fw-400) !important;
}

.fw-300 {
    font-weight: var(--fw-300) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-lightgreen {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-dark {
    color: var(--color-gray-950) !important;
}

.text-light {
    color: var(--color-gray-400) !important;
}

.text-grey {
    color: var(--color-gray-400) !important;
}

.text-neutral {
    color: var(--color-gray-150) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-taxi {
    color: var(--color-primary) !important;
}

.heading-shim, .hero-shim {
    position: relative;
}

/*------------------------------------------------------------
  [ BACKGROUNDS / BACKGROUND-COLORS ]
  ------------------------------------------------------------*/

.bg {
    padding: var(--space-xs) var(--space-sm) !important;
    border: var(--border-hairline);
}

.bg-sm {
    padding: var(--space-xs) !important;
    border: var(--border-hairline);
}

.bg-xxs {
    padding: var(--space-xxs) var(--space-xs) !important;
    border: var(--border-hairline);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-light {
    background-color: var(--color-gray-100) !important;
}

.bg-dark {
    background-color: var(--color-gray-950) !important;
}

.bg-grey {
    background-color: var(--color-gray-100) !important;
}

.bg-charcoal {
    background-color: var(--color-gray-900) !important;
}

.bg-xtra-light {
    background-color: var(--color-gray-50) !important;
}

.bg-lightgreen {
    background-color: rgba(243, 255, 241, 1) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-warning {
    background-color: #fff3d1 !important;
}

.bg-taxi-theme {
    background-color: var(--color-gray-100) !important;
}

.bg-transparent {
    background: transparent !important;
}

.bg-bordered {
    background-color: var(--color-white);
    border: var(--border-hairline);
}

.bg-bordered-dark {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-500);
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.underline {
    border-bottom: 2px solid var(--color-primary);
}

.flatpickr-day.selected {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-gray-150) !important;
}

.fill-primary {
    fill: var(--color-primary-hover);
}

.fill-mode {
    fill: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

@media (max-width: 991.98px) {
    #payments .container-fluid {
        height: auto;
    }
}

@media (max-width: 767.98px) {
    #payments .bg {
        padding: var(--space-xs) !important;
    }

    #payments .container-fluid {
        height: auto;
    }
}

hr {
    border-color: var(--color-gray-200);
    opacity: 1;
    margin: var(--space-sm) 0;
}

#credit-card-icon {
    height: 24px;
    width: 28px;
}

/*------------------------------------------------------------
  [ BUTTONS / LINKS ]
  ------------------------------------------------------------*/

.btn {
    position: relative;
    padding: 0.5rem 0.9rem;
    width: fit-content;
    line-height: 1.2;
    font-family: var(--font-heading);
    font-weight: var(--fw-500);
    font-size: var(--text-base);
    border: 1px solid transparent;
    transition: var(--transition-base);
}

.btn:hover,
.btn:focus {
    outline: none;
    box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: var(--text-md);
}

.btn-lg {
    padding: 9px 18px;
    line-height: 1.3;
    max-height: 44px;
    height: 100%;
}

.btn-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem !important;
    text-decoration: none;
    padding: 0 !important;
    color: var(--color-primary);
}

.btn-link .rounded-circle {
    background: var(--color-gray-100);
    padding: 6px;
    transition: var(--transition-base);
}

.btn-link:hover {
    color: var(--color-primary);
}

.btn-link:hover .rounded-circle {
    background: var(--color-gray-150);
}

.btn-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 18px;
    width: 18px;
}

.btn-circle span {
    position: relative;
    top: -1px;
}

.btn-dropdown-more {
    position: relative;
    border: 1px solid var(--color-gray-200);
    padding: 2px;
    background-color: var(--color-white) !important;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: 0;
    z-index: 9;
    max-height: fit-content;
    transition: var(--transition-base);
}

.btn-dropdown-more:hover {
    background-color: var(--color-gray-100) !important;
}

.btn-dropdown-more svg {
    height: 26px;
    width: 26px;
}

.btn-primary {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-cta {
    min-width: 130px;
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-size: var(--text-base) !important;
    font-weight: var(--fw-600) !important;
}

.btn-primary:disabled,
.btn-cta:disabled {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    color: var(--color-white);
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-cta:hover,
.btn-cta:focus,
.btn-cta:focus-visible {
    color: var(--color-white);
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white);
}

.btn-primary-soft {
    font-weight: var(--fw-500);
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: var(--color-gray-200);
}

.btn-primary-soft:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    transition: var(--transition-base);
}

.btn-secondary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-secondary:disabled,
.btn-secondary:focus-visible {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-taxi-theme {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-taxi-theme:hover,
.btn-taxi-theme:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-dark {
    background-color: var(--color-gray-950);
    color: var(--color-white);
}

.btn-trustpilot {
    color: var(--color-white) !important;
    background-color: var(--color-trustpilot) !important;
    border-color: var(--color-trustpilot) !important;
    transition: var(--transition-base);
}

.btn-trustpilot:hover {
    background: var(--color-trustpilot-hover) !important;
    border-color: var(--color-trustpilot-hover) !important;
}

.btn-trustpilot:disabled,
.btn-trustpilot:focus-visible {
    background-color: var(--color-trustpilot) !important;
    border-color: var(--color-trustpilot) !important;
}

.btn-danger-soft {
    color: var(--color-danger);
    background-color: var(--color-white);
    border-color: var(--color-danger);
}

.btn-danger-soft:hover {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-ticket {
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-decoration: none;
    color: var(--color-gray-950);
    font-size: var(--text-md);
    font-weight: var(--fw-500);
    width: 100%;
}

.btn-ticket svg path {
    stroke: var(--color-gray-50);
    transition: var(--transition-base);
}

.btn-ticket:hover {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-400);
}

.btn-ticket:hover svg path {
    stroke: var(--color-gray-950);
}

a.link {
    position: relative;
    font-weight: var(--fw-400);
    color: var(--color-gray-950);
    width: fit-content;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.link:hover,
a.link:focus {
    color: var(--color-primary);
}

.pointer-events-none {
    pointer-events: none !important;
}

.btn-back {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    outline: none;
    box-sizing: border-box;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--fw-500);
    line-height: 1;
    color: var(--color-gray-950);
    background-color: var(--color-white);
    padding: 6px;
    width: 34px;
    height: 34px;
    transition: var(--transition-base);
}

.btn-back:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

/*------------------------------------------------------------
  [ MODALS ]
  ------------------------------------------------------------*/

.modal .btn-close {
    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    background-color: var(--color-gray-100);
    padding: 10px;
    opacity: 1;
    transition: var(--transition-base);
    z-index: 99;
}

@media (min-width: 768px) {
    .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
    }

    .modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
    }

    .modal-content {
        margin: auto;
    }
}

/*------------------------------------------------------------
  [ SCROLLBAR ]
  ------------------------------------------------------------*/

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-white);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400);
    border: 0;
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
}

/*------------------------------------------------------------
  [ FORMS / INPUTS ]
  ------------------------------------------------------------*/

input, textarea {
    touch-action: manipulation;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--color-gray-950);
    background: rgba(0, 0, 0, 0.04);
}

.input-icons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    pointer-events: none;
}

.input-icons.icon-location {
    background: url(/img/icons/icon-location.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-destination {
    background: url(/img/icons/icon-destination.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-calendar {
    background: url(/img/icons/icon-calendar.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-clock {
    background: url(/img/icons/icon-clock.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-search {
    background: url(/img/icons/icon-search-dark.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 22px;
    width: 22px;
}

.input-icons.icon-group {
    background: url(/img/icons/icon-group.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-ticket {
    background: url(/img/icons/icon-ticket.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-filter {
    background: url(/img/icons/icon-filter.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-title {
    background: url(/img/icons/icon-title.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-category {
    background: url(/img/icons/icon-category.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-sub-category {
    background: url(/img/icons/icon-category.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-hotel {
    background: url(/img/icons/icon-hotel.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.input-icons.icon-payment-card {
    background: url(/img/icons/icon-payment-card.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-payment-card {
    background-image: url(/img/icons/icon-payment-card-light.svg);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 97%;
}

/* ----------------- */

.custom-radio-field {
    display: flex;
    flex-direction: row;
    min-width: fit-content;
}

.custom-radio-field input[type="radio"] {
    outline: none !important;
    margin-right: 2px;
    position: relative;
    border: 0;
    top: 1px;
    overflow: hidden;
    opacity: 0;
}

.custom-radio-field label.is-checked,
.custom-radio-field input[type="radio"]:checked+label {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.custom-radio-field input[type="radio"] {
    display: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .custom-radio-field input[type="radio"] {
        top: 1px;
    }
}

@-moz-document url-prefix() {
    .custom-radio-field input[type="radio"] {
        top: -1px;
    }
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: -apple-appearance) {
        .custom-radio-field input[type="radio"] {
            top: -1px;
        }
    }
}

.custom-radio-field {
    overflow: hidden;
    width: fit-content;
    border-radius: var(--radius-sm);
}

.custom-radio-field label {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    color: var(--color-gray-500);
    font-size: var(--text-md);
    padding: 0.4rem 0.75rem !important;
    min-width: 6rem;
    text-align: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    transition: var(--transition-base);
}

.custom-radio-field label:hover {
    cursor: pointer;
}

.form-label {
    font-size: var(--text-sm);
    margin-bottom: 3px;
    color: var(--color-gray-500);
    font-weight: var(--fw-500);
}

.form-group {
    display: flex;
    align-items: center;
    padding: 0.35rem;
    border: 1px solid var(--color-gray-200);
}

.form-select {
    cursor: pointer;
}

.iti {
    height: 50px;
}

.iti--fullscreen-popup {
    position: absolute !important;
    inset: auto !important;
    height: auto !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    outline: 1px solid var(--color-primary);
    outline-offset: -2px;
}

.form-control::placeholder,
.form-select::placeholder {
    font-size: var(--text-base);
    font-weight: var(--fw-400) !important;
    color: var(--color-gray-400) !important;
    opacity: 1;
}

.form-control::-ms-input-placeholder,
.form-select::-ms-input-placeholder {
    color: var(--color-gray-100);
    font-weight: var(--fw-400) !important;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    background-size: 80%;
    outline: none;
    box-shadow: none;
}

.form-check-input:checked {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
}

#payments .form-check-input {
    width: 1.6em;
    height: 1.6em;
}

#services .form-toggler {
    padding-left: 12px;
    height: 2.6rem;
}

#services .form-toggler .label {
    font-size: var(--text-sm);
}

#services textarea.form-control {
    height: auto;
}

#services #locations .just-validate-error-label {
    display: block !important;
}

#services .just-validate-error-label {
    display: none !important;
}

#services .icon-location,
#services .icon-destination,
#services .icon-group {
    left: 12px;
    top: 50%;
}

#services .btn-flip-icon {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 18px;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    z-index: 999;
}

#services .btn-flip-icon .btn {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
}

@media (max-width: 991.98px) {
    #services .btn-flip-icon .btn {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    #services .form-toggler {
        height: auto;
    }

    #services .form-toggler .label {
        font-size: var(--text-md);
    }

    #services .taxi-radio-field {
        width: 100%;
    }

    #services .taxi-radio-field label {
        width: 100%;
    }

    #payments .form-check-input {
        width: 2.2em;
        height: 2.2em;
    }

    #form-flight .btn,
    #form-train .btn,
    #form-hotel .btn,
    #form-event .btn {
        width: 100%;
        justify-content: center;
    }
}

#results-container .form-control,
#results-container .form-select {
    cursor: pointer;
}

#results-container .form-control,
#results-container .form-select {
    border-color: var(--color-white);
    background-color: var(--color-white);
}

/* #payments .form-control:hover,
#payments .form-control:focus {
    border-color: var(--color-success);
    box-shadow: none;
} */

#results-container .form-control::placeholder {
    color: var(--color-gray-950);
}

/* #payments .form-control::placeholder {
    color: rgb(121, 124, 131) !important;
    font-weight: var(--fw-500);
    font-size: var(--text-md);
} */

.price-title {
    font-size: var(--text-h4);
}

@media (max-width: 767.98px) {
    .price-title {
        font-size: var(--text-h3);
    }
}

/* CHAT BUBBLE */

.chat-bubble {
    background: var(--color-input);
    border-radius: var(--radius-sm);
    width: 400px;
}

.chat-area {
    position: relative;
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: calc(100% - 1rem);
}

.chat-area .modal-body {
    max-height: 400px;
}

.chat-area .modal-content {
    border: none;
    border-radius: var(--radius-sm);
    outline: 0;
    height: 100%;
}

.chat-area .modal-dialog-scrollable {
    height: 100% !important;
}

.chatbox {
    width: auto;
    overflow: hidden;
    height: 100%;
}

.chatbox .modal-dialog {
    max-width: 100%;
    margin: 0;
}

.msg-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-area .form-control {
    display: block;
    width: 80%;
    padding: 0.375rem 0.75rem;
    font-size: var(--text-md);
    font-weight: var(--fw-400);
    line-height: 1.5;
    color: var(--color-gray-950);
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.chat-area .form-control:focus {
    outline: 0;
    box-shadow: none;
}

.msg-body ul {
    overflow: hidden;
}

.msg-body ul li {
    list-style: none;
    margin: 15px 0;
}

.msg-body ul li.support-bubble {
    display: block;
    width: 100%;
    position: relative;
}

.msg-body ul li.support-bubble:before {
    display: block;
    clear: both;
    content: "";
    position: absolute;
    top: -6px;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent var(--color-gray-100) transparent;
    -webkit-transform: rotate(-37deg);
    -ms-transform: rotate(-37deg);
    transform: rotate(-37deg);
}

.msg-body ul li.support-bubble p {
    font-size: var(--text-md);
    line-height: 1.5;
    font-weight: var(--fw-400);
    padding: 15px;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    display: inline-block;
    border-bottom-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    margin-bottom: 0;
}

.msg-body ul li.support-bubble p b {
    display: block;
    color: var(--color-gray-950);
    font-size: var(--text-md);
    line-height: 1.5;
    font-weight: 500;
}

.msg-body ul li.user-bubble {
    display: block;
    width: 100%;
    text-align: right;
    position: relative;
}

.msg-body ul li.user-bubble:before {
    display: block;
    clear: both;
    content: "";
    position: absolute;
    bottom: 15px;
    right: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent var(--color-gray-100) transparent;
    -webkit-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    transform: rotate(37deg);
}

.msg-body ul li.user-bubble p {
    text-align: start;
    color: var(--color-gray-950);
    font-size: var(--text-md);
    line-height: 1.5;
    font-weight: var(--fw-400);
    padding: 15px;
    max-width: 400px;
    background: var(--color-gray-100);
    display: inline-block;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    margin-bottom: 0;
}

.msg-body ul li.user-bubble p b {
    display: block;
    color: var(--color-gray-950);
    font-size: var(--text-md);
    line-height: 1.5;
    font-weight: 500;
}

.msg-body ul li.user-bubble:after {
    display: block;
    content: "";
    clear: both;
}

.msg-time {
    display: block;
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    line-height: 1.5;
    font-weight: var(--fw-400);
}

li.user-bubble .msg-time {
    margin-right: 20px;
}

@media (max-width: 767.98px) {
    .chatbox {
        width: 100%;
        background: var(--color-white);
        transition: all 0.5s ease;
        border-left: none;
    }

    .msg-body ul li.support-bubble p {
        text-align: start;
        font-size: 13px;
        padding: 8px;
        border-bottom-left-radius: var(--radius-sm);
        border-top-right-radius: var(--radius-sm);
        border-bottom-right-radius: var(--radius-sm);
    }

    .msg-body ul li.user-bubble p {
        font-size: 13px;
        padding: 8px;
        border-top-left-radius: var(--radius-sm);
        border-top-right-radius: var(--radius-sm);
        border-bottom-left-radius: var(--radius-sm);
    }
}

/* FORM UPLOAD INPUT CSS */
.file-upload-wrapper {
    position: relative;
}

.file-upload-wrapper .file-input {
    opacity: 0;
    position: absolute;
    top: -200vh;
    z-index: -1;
    pointer-events: none;
}

.file-upload-wrapper .file-input+label {
    padding: 18px;
    background: var(--color-white);
    width: 100%;
    border: 1px dashed var(--color-gray-400);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: var(--transition-base);
}

.file-upload-wrapper .file-input+label:hover {
    cursor: pointer;
    border: 1px dashed var(--color-primary);
}

#label-dropzone.valid {
    border-color: var(--color-trustpilot);
}

.file-upload-wrapper .file-input+label img {
    height: 100%;
    width: 100%;
    max-width: 35px;
    max-height: 35px;
}

.file-upload-wrapper .file-input+label .btn {
    margin: 24px 0;
    min-width: 200px;
    border: 1px solid var(--color-trustpilot);
    color: var(--color-gray-950);
}

.file-upload-wrapper .file-input+label .btn:hover {
    color: var(--color-white);
    background: var(--color-trustpilot);
}

.file-upload-wrapper .file-input+label .btn-remove {
    border: 1px solid #e30a0a;
    color: #e30a0a;
}

.file-upload-wrapper .file-input+label .btn-remove:hover {
    border: 1px solid #e30a0a;
    background-color: #e30a0a;
    color: #ffffff;
}

.file-upload-wrapper .file-input+label>* {
    align-self: center;
}


/*------------------------------------------------------------
  [ ERROR / SUCCESS FLASHMESSAGES / ERRORS / BADGES ]
  ------------------------------------------------------------*/

.message {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: var(--space-xxs) var(--space-xs);
    margin-bottom: 0.75rem;
    font-size: var(--text-md);
    font-weight: var(--fw-500);
    color: var(--color-gray-950);
    z-index: 999;
}

.message.error {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-danger);
}

.message.success,
.alert-success {
    background: var(--color-gray-50);
    margin-bottom: 0.75rem !important;
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-success);
}

.alert span::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: var(--radius-sm);
}

.alert.alert-warning,
.alert.alert-Ongoing {
    border: 0;
    background-color: rgb(255, 239, 209);
}

.alert.alert-warning span::before,
.alert.alert-Ongoing span::before {
    background-color: rgb(255, 165, 0);
}

.alert.alert-Ouvert,
.alert.alert-ouvert,
.alert.alert-success,
.alert.alert-Confirmed {
    border: 0;
    background-color: rgb(224, 255, 229);
}

.alert.alert-Ouvert span::before,
.alert.alert-ouvert span::before,
.alert.alert-success span::before,
.alert.alert-Confirmed span::before {
    background-color: rgb(67, 217, 91);
}

.alert.alert-Fermé,
.alert.alert-fermé,
.alert.alert-danger,
.alert.alert-Cancelled {
    border: 0;
    background-color: rgb(255, 230, 226);
}


.alert.alert-Fermé span::before,
.alert.alert-fermé span::before,
.alert.alert-danger span::before,
.alert.alert-Cancelled span::before {
    background-color: rgb(225, 40, 40);
}

.alert.alert-Expired,
.alert.alert-Previous,
.alert.alert-grey {
    border: 0;
    background-color: rgb(240, 240, 240);
}

.alert.alert-Expired span::before,
.alert.alert-Previous span::before,
.alert.alert-grey span::before {
    background-color: rgb(120, 120, 120);
}

.just-validate-error-label {
    font-size: var(--text-sm);
    color: #da3743 !important;
}

.just-validate-error-field {
    border-color: #da3743 !important;
}

.just-validate-success-label {
    font-size: var(--text-sm);
    color: var(--color-success) !important;
}

.just-validate-success-field {
    border-color: var(--color-success) !important;
}

.ticket-status span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-md);
    font-weight: var(--fw-500);
    color: var(--color-gray-950);
    left: 0 !important;
}

.ticket-status span::before {
    content: "";
    width: 10px;
    height: 10px;
    margin: auto 5px auto 0;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
}

.ticket-success span::before,
.ticket-open span::before,
.ticket-ouvert span::before {
    background-color: var(--color-primary-hover);
}

.ticket-danger span::before,
.ticket-closed span::before,
.ticket-fermé span::before {
    background-color: var(--color-danger);
}

.error-msg {
    background: var(--color-gray-50);
    padding: 6px 8px;
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-danger);
    font-size: var(--text-sm);
    color: var(--color-gray-950);
}

/*------------------------------------------------------------
  [ RESULTS PAGE ]
  ------------------------------------------------------------*/

.dotted {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0 !important;
}

.dotted::before {
    content: ' • ';
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    margin: auto 4px auto 0;
    color: var(--color-gray-500);
}

/* -----------------------------------------------------------
[ BS5 CAROUSEL CSS ]
------------------------------------------------------------- */

.carousel-indicators {
    position: relative;
    display: flex;
    flex-direction: row;
}

.carousel-indicators .active {
    opacity: 1;
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

.carousel-indicators [data-bs-target] {
    opacity: 1 !important;
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-200);
    width: 8px !important;
    height: 8px !important;
    overflow: hidden;
}

/*------------------------------------------------------------
  [ CAROUSEL CSS SINGLE RESTAURANT VIEW ]
  ------------------------------------------------------------*/

.cursor-pointer {
    cursor: pointer;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-size: 60%;
}

#imageGalleryModal .modal-content {
    background: rgba(0, 0, 0, 0.8);
}

#imageGalleryModal .carousel-control-prev,
#imageGalleryModal .carousel-control-next {
    width: 8%;
}

#imageGalleryModal .carousel {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto
}

#imageGalleryModal .carousel-inner,
#imageGalleryModal .carousel-item {
    height: 100%;
    width: 100%;
}

#imageGalleryModal .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* For modal sizing */
#imageGalleryModal .modal-dialog {
    max-width: min(800px, 90vw);
}

#imageGalleryModal .modal-content {
    background: transparent;
    border: none;
}

/*------------------------------------------------------------
  [ PAYMENT PAGE ]
  ------------------------------------------------------------*/

.half-fluid .left-half,
.half-fluid .right-half {
    left: 50%;
    margin-left: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
    padding: 0px;
}

@media (min-width: 992px) {
    .half-fluid .left-half {
        padding-left: 0 !important;
        position: absolute;
        left: 0;
        right: 50%;
        margin-left: auto;
        width: auto;
    }

    .half-fluid .right-half {
        padding-right: 0 !important;
        position: absolute;
        right: 0;
        left: 50%;
        margin-left: auto;
        width: auto;
    }
}

.vh-100 {
    height: 100vh !important;
}

@media (max-width: 991.98px) {
    .vh-100 {
        height: 85vh !important;
    }
}

/*------------------------------------------------------------
  [ FAQ / ACCORDIONS ]
  ------------------------------------------------------------*/

.accordion-item {
    border: 0 !important;
    border-bottom: var(--border-hairline) !important;
    padding: var(--space-xxs) 0;
}

.accordion-button {
    padding: 8px 4px;
    border: 0 !important;
    background: none !important;
    outline: none;
    font-weight: var(--fw-600);
    z-index: 1;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-white);
}

.result-accordion .accordion-button::after {
    content: "";
    display: inline-block;
    margin-left: initial;
    height: 14px;
    width: 14px;
    background-size: contain;
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.result-accordion .accordion-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/*------------------------------------------------------------
  [ FOOTER ]
  ------------------------------------------------------------*/

footer {
    top: 0;
    padding: var(--space-md) 0 0;
    background-color: var(--color-gray-950);
    border-top: 1px solid var(--color-gray-950);
}

footer.footer {
    margin: 0;
}

@media (max-width: 767.98px) {
    footer.footer {
        margin: 0;
        border-radius: var(--radius-sm);
    }
}

footer a {
    position: relative;
    font-size: var(--text-md);
    font-weight: var(--fw-400);
    color: var(--color-gray-200);
    line-height: 1.5;
    text-decoration: none;
    transition: var(--transition-base);
}


footer a:hover,
footer a:focus {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer .footer-title {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

footer ul {
    display: flex;
    flex-direction: row;
    margin: 0;
}

.footer-top {
    padding: var(--space-md) 0;
}

footer .footer-brand {
    height: 22px;
}

footer .dropdown .btn {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: var(--color-gray-200);
    padding: 5px 10px;
    min-width: 92px;
    width: fit-content;
    transition: var(--transition-base);
}

footer .dropdown .btn:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}

footer .dropdown-menu.show {
    background: var(--color-gray-950);
    border: 1px solid var(--color-gray-500);
    padding: 2px;
}

footer .dropdown .dropdown-item {
    color: var(--color-white);
    background: var(--color-gray-950);
    font-size: var(--text-md);
}

footer .dropdown .dropdown-item:hover,
footer .dropdown .dropdown-item:active {
    background: var(--color-gray-900);
    color: var(--color-white) !important;
}

.footer-bottom {
    padding: var(--space-sm) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.flag-icon {
    width: 22px;
    height: 18px;
    object-fit: cover;
    border: 1px solid var(--color-gray-50);
}

.flag {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

/*------------------------------------------------------------
  [ AUTO-COMPLETE INPUT ]
  ------------------------------------------------------------*/
.ac {
    position: relative;
    width: 100%;
}

.ac-popup {
    max-height: 400px;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    width: 100%;
    min-width: 160px;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px;
    overflow: auto;
    opacity: 1;
}

.ac-popup .invisible {
    opacity: 0 !important;
}

.ac-popup button.list-group-item.list-group-item-action {
    border-radius: var(--radius-sm);
}

.ac-popup hr {
    margin: 0;
}

.ac-popup button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
}

.ac-popup button:hover {
    background-color: var(--color-gray-150);
    color: var(--color-gray-950);
}

.ac-result-icon {
    background-image: url("/img/assets/food-image-default.svg");
    background-size: 60px 60px;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 60px;
    height: 60px;
    display: inline-block;
}

#form-taxi .ac-popup button:hover {
    background-color: var(--color-primary);
    color: var(--color-gray-950);
}

#form-taxi .form-control:focus,
#form-taxi .form-select:focus {
    border-color: var(--color-primary);
    outline: 1px solid var(--color-primary);
    outline-offset: -2px;
}

/*------------------------------------------------------------
  [ BROWSER GEOLOCATION INPUT / BUTTON / ICON ]
  ------------------------------------------------------------*/

#geolocation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 50%;
    background-color: transparent;
    border: 0;
    width: 36px !important;
    height: 36px;
    padding: 8px;
    transition: var(--transition-base);
    transform: translateY(-50%);
    z-index: 10;
}

#geolocation-btn svg path {
    stroke: var(--color-gray-400);
    fill: var(--color-gray-400);
}

#geolocation-btn:hover {
    background-color: var(--color-input);
}

#geolocation-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#geolocation-btn:hover svg path {
    stroke: var(--color-gray-900);
    fill: var(--color-gray-900);
}

.has-location-icon {
    padding-right: 3rem !important;
}

/*------------------------------------------------------------
  [ SKELETON PLACEHOLDER ]
  ------------------------------------------------------------*/

.skeleton {
    background-color: var(--color-gray-100);
}

.skeleton-dark {
    background-color: var(--color-gray-900);
}

.skeleton-lg {
    background-color: var(--color-gray-900);
}

.skeleton-lg img {
    min-height: 400px;
}

/* Remove shimmer when image is loaded */
.skeleton.loaded {
    background: none;
}


.dashboard-card {
    position: relative;
    background-color: var(--color-white);
    border: var(--border-hairline);
    cursor: pointer;
    transition: var(--transition-base);
}

.dashboard-card:hover {
    border-color: var(--color-gray-500);
}

.dashboard-card .accordion-button::after {
    display: none !important;
}

.card.overflow-hidden,
.tiny-slider.overflow-hidden {
    will-change: transform;
}

.card.card-img-scale .card-img-scale-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
}

.card.card-img-scale img {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: scale(1.001);
    transform: scale(1.001);
}

.card.card-img-scale:hover img {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}

a.card {
    box-shadow: none;
    transition: var(--transition-base, 0.3s ease);
}

a.card:hover {
    box-shadow: none;
    border-color: var(--color-primary);
}

a.card .arrow {
    width: 20px;
    height: auto;
}

a.card.icon-link>.arrow {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentcolor;
    transform: translate3d(0, 0, 0);
}

a.card:hover .icon-link>.arrow {
    transition: transform 0.4s ease-in-out;
    transform: translate3d(0.3rem, 0, 0);
}


.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.truncated-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 240px;
}

.truncated-text-lg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 400px;
}

@media (max-width: 1199.98px) {
    .truncated-text-lg {
        max-width: 240px;
    }
}

@media (max-width: 991.98px) {
    .truncated-text {
        max-width: 280px;
    }

    .truncated-text-lg {
        max-width: 400px;
    }
}

@media (max-width: 767.98px) {
    .truncated-text {
        max-width: 260px;
    }

    .truncated-text-lg {
        max-width: 320px;
    }
}

@media (max-width: 575.98px) {
    .truncated-text {
        max-width: 200px;
    }

    .truncated-text-lg {
        max-width: 220px;
    }
}

.mt-n7 {
    margin-top: -4rem !important;
}

/* SLIDERS */
.slider-round {
    height: 10px;
}

.slider-round .noUi-connect {
    background: var(--color-success);
}

#min-price,
#max-price {
    font-family: var(--font-heading);
    color: var(--color-gray-500);
    font-size: var(--text-md);
    font-weight: var(--fw-500);
}

.slider-round.noUi-horizontal {
    height: 8px;
}

.slider-round.noUi-horizontal .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px;
    /* half the width */
    border-radius: var(--radius-sm);
}

.slider-round.noUi-horizontal .noUi-handle:before,
.slider-round.noUi-horizontal .noUi-handle:after {
    all: unset;
}

/* TAXI SERVICE */
@media (max-width: 767.98px) {
    #form-taxi .btn {
        width: 100%;
    }
}

.custom-taxi-checkbox {
    position: relative;
    background-color: var(--color-white);
    cursor: pointer;
    align-items: center;
    border: 2px solid var(--color-gray-200);
    padding: .5rem !important;
    text-decoration: none !important;
    cursor: pointer;
    display: block;
    display: flex;
    flex-direction: inherit;
    min-height: 60px;
    position: relative;
    width: 100%;
    transition: var(--transition-base);
}

.custom-taxi-checkbox:hover {
    cursor: pointer;
    border-color: var(--color-gray-100);
}

.custom-taxi-checkbox.checked {
    border: 2px solid var(--color-primary);
    background-color: rgba(37, 99, 235, 0.04);
    background-image: none;
    background-position: right calc(0.375em + 0.1875rem) top calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    background-repeat: no-repeat;
    transition: none !important;
}

.location-trace {
    border-left: 1.5px solid #0d2647;
    height: 56px;
    position: absolute;
    top: 36px;
    left: 25px;
    z-index: 99;
    display: none !important;
}

/* PAGINATOR STYLING */
.paginator li a {
    padding: 6px 12px;
    background: var(--color-white);
    color: var(--color-gray-950);
    font-size: var(--text-base);
    font-weight: var(--fw-400);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.paginator li a:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
}

.paginator li.active a {
    background: var(--color-primary-hover);
    color: var(--color-white);
    font-weight: var(--fw-700);
}

/*------------------------------------------------------------
  [ TAXI LANDING IMAGE ANIMATIONS ]
  ------------------------------------------------------------*/

/* Markers */
.marker {
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 100%;
}

.marker-pickup {
    top: 66%;
    left: 56%;
}

.marker-destination {
    display: none;
    top: 66%;
    left: 66%;
}

.marker-pin {
    width: 26px;
    height: 26px;
    background: var(--color-gray-950);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.marker-pin-destination {
    background: #22c55e;
    border-radius: var(--radius-sm);
}

.marker-dot {
    width: 8px;
    height: 8px;
    background: #fff;
}

.marker-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 4px 9px;
    width: max-content;
    font-size: var(--text-sm);
    font-weight: var(--fw-500);
}

.marker-label-pickup {
    background: #0d0d0d;
    color: #fff;
}

.marker-label-destination {
    background: #22c55e;
    color: #fff;
}

/* Animated Route */
.route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* Taxi Cars */
.taxi {
    position: absolute;
    width: fit-content;
    min-width: 34px;
    height: 34px;
    align-items: center;
    background: var(--color-white);
    border: var(--border-hairline);
    display: flex;
    justify-content: center;
    font-size: 16px;
    z-index: 8;
}

.taxi-1 {
    top: 28%;
    left: 38%;
}

.taxi-2 {
    top: 42%;
    left: 18%;
}

.taxi-3 {
    top: 22%;
    left: 72%;
}

/*------------------------------------------------------------
  [ VISUAL DIFFERENTIATION — BADGES, MASKS, DIVIDERS, CARDS ]
  ------------------------------------------------------------*/

.badge-label {
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: var(--color-white);
    border: var(--border-hairline);
    font-size: var(--text-md);
    font-weight: var(--fw-400);
    width: fit-content;
    height: min-content;
    padding: 4px 10px;
    position: relative;
}

.badge-label-light {
    background-color: var(--color-gray-100);
}

/* --------------------------------------------- */

/* Soft mist — layered radial fades at offset positions */
/* Drift — very soft diagonal gradient wash */
/* Linen — soft woven texture, barely-there fabric feel */
/* --------------------------------------------- */

/* Feature cards with left border accent */
.feature-card {
    background: var(--color-gray-50);
    border: var(--border-hairline);
    border-left: 3px solid var(--color-primary);
    padding: 0.9rem 1.1rem;
    transition: var(--transition-base);
}

.feature-card:hover {
    background: var(--color-gray-100);
}

.feature-card-dark {
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
    border-left-color: var(--color-primary);
}

/* Numbered step circles — larger and bolder than default badges */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-700);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* Split two-tone section — left dark, right light on desktop */
.section-split {
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .section-split::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: var(--color-gray-950);
        z-index: 0;
    }

    .section-split>.container-md {
        position: relative;
        z-index: 1;
    }
}

/* Subtle dot grid pattern for background texture */
/* Icon container with soft background */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-gray-100);
    border: var(--border-hairline);
}

.icon-box-dark {
    background: var(--color-gray-900);
}

/* Stat / highlight number */
.stat-highlight {
    font-size: var(--text-h2);
    font-weight: var(--fw-800);
    letter-spacing: -0.03em;
    color: var(--color-primary);
    line-height: 1;
}

.feature-list-connected .step-number {
    position: relative;
    z-index: 2;
}

/* NEW LANDING EXPANDED IMAGE ROW */

.expand-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 210px;
    gap: 8px;
    overflow: hidden;
}

.expand-card {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-white);
    border: var(--border-hairline);
}

.expand-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

/* Gradient overlay */
.expand-card-overlay {
    display: none;
}

/* Glass text block — MonksTrip style */
.expand-card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background-color: var(--color-gray-950);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.expand-card-title {
    font-size: var(--text-sm);
    font-weight: var(--fw-600);
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expand-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: transparent;
    color: var(--color-white);
    flex-shrink: 0;
}

.expand-card:hover .expand-card-arrow {
    color: var(--color-white);
}

/* Mobile — stack vertically */
@media (max-width: 767.98px) {
    .expand-row {
        flex-direction: column;
        height: auto;
    }

    .expand-card {
        flex: none;
        height: 200px;
    }

    .expand-card:hover {
        flex: none;
    }

    .expand-card-text {
        transform: translateY(0);
    }
}

/* OFFER BLOCK VIP / STANDARD */

/* ============================================================
   Statement-information (descriptor) page
   ============================================================ */

/* Hero: was 80vh + head-xl padding (oversized). Size to content, symmetric spacing. */
.bg-landing {
    height: auto;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.bg-landing .content-overlay p:last-child {
    margin-bottom: 0 !important;
}

/* Type scale & rhythm for the content sections */
.descriptor-page h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.2rem);
    line-height: 1.2;
    margin: 0;
}

.descriptor-page h3 {
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    font-weight: var(--fw-600);
    line-height: 1.3;
    margin: 0.9rem 0 0;
}

.descriptor-page p,
.descriptor-page li {
    font-size: 1.075rem;
    line-height: 1.7;
}

.descriptor-page p {
    max-width: 68ch;
    margin: 0;
}

.descriptor-page ul,
.descriptor-page ol {
    margin: 0.15rem 0 0;
    padding-left: 1.25rem;
}

.descriptor-page li {
    margin-bottom: 0.4rem;
}

/* FAQ: replace the bland default-grey with a branded blue -> navy gradient */
section.bg-secondary.descriptor-page {
    background: var(--color-gray-950) !important;
}

/* FAQ call-to-action: solid accent pill instead of the low-contrast blue link */
.faq-cta.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-start;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-600);
    line-height: 1;
    text-decoration: none;
    transition: var(--transition-base);
}

.faq-cta.btn-link:hover,
.faq-cta.btn-link:focus {
    background: var(--color-primary-hover);
    color: var(--color-white);
}

.faq-cta .rounded-circle {
    width: 2rem;
    height: 2rem;
    background: var(--color-gray-950);
    color: #ffffff;
}

.faq-cta .icons {
    width: 18px;
    height: 18px;
}
/*------------------------------------------------------------
  [ BOOTSTRAP OVERRIDES — flat design ]
  The templates lean on Bootstrap's rounding and shadow
  utilities; neutralise them so nothing re-rounds or re-lifts.
  ------------------------------------------------------------*/

/* Bootstrap's own rounding utilities stand; the design is rounded again.
   Only the form-check radio keeps an explicit circle. */
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.alert,
.list-group,
.toast {
    border-radius: var(--radius-base);
}

/* Native form controls keep their own shape */
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas {
    box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 8px 24px rgba(16, 16, 16, 0.06);
}

.card {
    border: var(--border-hairline);
}

.modal-content,
.offcanvas {
    border: var(--border-hairline);
}

.dropdown-menu {
    border: var(--border-hairline);
    font-size: var(--text-base);
}

/* Flat, legible links: accent colour, underlined in body copy */
a {
    color: var(--color-primary);
    text-decoration: none;
}

p a:not(.btn):not(.nav-link):not(.dropdown-item),
li a:not(.btn):not(.nav-link):not(.dropdown-item):not(.footer-link),
.descriptor-page a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-primary-hover);
}

/* Tables read as data, not cards */
.table {
    font-size: var(--text-md);
}

.table > :not(caption) > * > * {
    padding: 0.45rem 0.6rem;
}

.table thead th {
    font-weight: var(--fw-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Reduce Bootstrap's default gutters for a denser page */
.container,
.container-md,
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/*------------------------------------------------------------
  [ ZIGZAG CONTENT SECTIONS ]
  Alternating image/text rows on an even split, separated by a
  hairline rule instead of alternating light/dark bands.
  ------------------------------------------------------------*/

.section-zigzag {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    background-color: var(--surface);
}


/* Smaller, calmer images than the old full-height cards */

/* Section headings step down from the page h1 but stay section-scale */
.section-zigzag h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.section-zigzag p {
    max-width: 62ch;
}

/*------------------------------------------------------------
  [ PAGE HEADERS ]
  Flat grey band with a hairline rule, dark text. The booking
  form sits inside as a white bordered panel.
  ------------------------------------------------------------*/

.hero,
.bg-landing,
.hero-restaurant,
.hero-planes,
.hero-trains,
.hero-events,
.hero-hotel,
.hero-taxi,
.hero-taxi-gradient {
    background-color: var(--surface-alt);
    background-image: none;
}

.hero h1,
.bg-landing h1,
.hero-restaurant h1,
.hero-planes h1,
.hero-trains h1,
.hero-events h1,
.hero-hotel h1,
.hero-taxi h1 {
    margin-bottom: 0.4rem;
}

/* Lead line under a header heading */
.hero > .container > .row p,
.bg-landing .content-overlay p {
    color: var(--color-gray-500);
}

/* --- Booking form panel ------------------------------------ */

.header-form .form-control,
.header-form .form-select {
    width: 100%;
}

/*------------------------------------------------------------
  [ MOBILE ]
  One responsive step-down of the spacing scale, so every
  section, header and panel tightens consistently instead of
  each component carrying its own ad-hoc override.
  ------------------------------------------------------------*/

@media (max-width: 767.98px) {
    :root {
        --space-xl: 2.25rem;
        --space-lg: 1.75rem;
        --space-base: 1.5rem;
        --space-md: 1.25rem;
        --space-sm: 1rem;
        --space-xs: 0.75rem;
        --space-xxs: 0.5rem;
    }

    .container,
    .container-md,
    .container-fluid {
        padding-left: var(--gutter-x);
        padding-right: var(--gutter-x);
    }

    /* Headers: heading, lead and form share one full-width column */
    .hero .row > [class*="col-"],
    .bg-landing .row > [class*="col-"] {
        text-align: left;
    }

    .header-form,
    .hero .form-group {
        width: 100%;
    }

    /* Every control stacks full width, one per row */
    .header-form .form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem !important;
    }

    .header-form .custom-radio-field,
    .header-form .custom-radio-field label {
        width: 100%;
    }

    .header-form .btn,
    .hero .form-group .btn {
        width: 100%;
        justify-content: center;
    }

    /* Zigzag rows: image above text, consistent gap */
    .section-zigzag .row {
        row-gap: var(--space-sm);
    }

    /* Stop headings from running oversized on narrow screens */
    h1, .h1 {
        font-size: 1.75rem;
    }

    h2, .h2 {
        font-size: 1.4rem;
    }

    .section-zigzag h2 {
        font-size: 1.25rem;
    }
}

/*------------------------------------------------------------
  [ DUOTONE SECTION ACCENTS ]
  Each service owns a hue. The accent marks the section's
  identity — badge, card edge, step markers — while actions
  stay lead blue so "this is clickable" never changes colour.
  ------------------------------------------------------------*/

.accent-lead .badge-label {
    background-color: var(--tint-lead);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--fw-600);
}

.accent-counter .badge-label {
    background-color: var(--tint-counter);
    border-color: var(--color-counter);
    color: var(--color-counter-text);
    font-weight: var(--fw-600);
}

.accent-lead .card {
    border-left: 4px solid var(--color-primary);
}

.accent-counter .card {
    border-left: 4px solid var(--color-counter);
}

/* Service mark in the page header */
/* Counter hue earns its keep on secondary emphasis */
.step-number {
    background: var(--color-counter);
}

.feature-card {
    border-left-color: var(--color-counter);
}

.badge-label {
    border-color: var(--color-gray-200);
}

/* Emphasis inside header copy — was referenced by the home hero
   but never defined, so the figure rendered as plain body text. */
.text-lightblue,
.text-counter {
    color: var(--color-counter-text) !important;
    font-weight: var(--fw-700);
}

/*------------------------------------------------------------
  [ FORM UX ]
  Persistent labels, grouped radios, and left padding reserved
  only for controls that actually carry an icon.
  ------------------------------------------------------------*/

/* Reboot styles <legend> as a 1.5rem full-width heading; make it
   read as a field label instead. */
legend.form-label {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 3px;
    font-size: var(--text-sm);
    line-height: inherit;
}

/* Only icon-bearing text inputs need the inset; selects and
   textareas lost their icons and get normal padding back. */
#services .form-select,
#services textarea.form-control {
    padding-left: 0.65rem;
}

#services textarea.form-control {
    min-height: 4.5rem;
}

/* Required fields are marked, not just enforced on submit */
.form-label:has(+ * > [required]),
.form-label:has(+ [required]) {
    font-weight: var(--fw-600);
}

/* Inline validation messages sit with their field */
.just-validate-error-label {
    display: block;
    margin-top: 3px;
}

#errors-container-origin:empty,
#errors-container-destination:empty {
    display: none;
}

/* Payment fields: CakePHP wraps each control in .input — keep the
   label/field pairs evenly spaced in the card panel. */
#payments .input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#payments .form-label {
    margin-bottom: 3px;
}

/* Comfortable tap targets on touch devices */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .header-form .btn {
        min-height: 44px;
    }

    .form-check-input {
        width: 1.35em;
        height: 1.35em;
    }
}

/*------------------------------------------------------------
  [ MOBILE NAVIGATION PANEL ]
  Slides down from the top, full width. Services come first as
  a two-column grid of marks; secondary links follow as a plain
  hairline-separated list.
  ------------------------------------------------------------*/

.offcanvas.offcanvas-top.nav-panel {
    height: auto;
    max-height: 92vh;
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
}

.nav-panel .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-gray-200);
    flex: 0 0 auto;
}

.nav-panel-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gray-500);
}

.nav-panel .offcanvas-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Group heading */
.nav-group-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gray-400);
    margin: 0 0 0.5rem;
}

.nav-group-label + .nav-links,
.nav-services + .nav-group-label {
    margin-top: 1.25rem;
}

/* --- Services: two-column grid of marks --- */

.nav-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-services a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-white);
    color: var(--color-gray-950);
    font-size: var(--text-base);
    font-weight: var(--fw-600);
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition-base);
}

.nav-services a:hover,
.nav-services a:focus-visible {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-500);
    color: var(--color-gray-950);
}

.nav-services img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-gray-150);
}

/* --- Secondary links: hairline list --- */

.nav-panel .nav-links {
    gap: 0 !important;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-gray-200);
}

.nav-panel .nav-links .nav-item {
    border-bottom: 1px solid var(--color-gray-200);
}

.nav-panel .nav-links .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.6rem 0.25rem;
    font-size: var(--text-base);
    font-weight: var(--fw-500);
    border: 0;
}

.nav-panel .nav-links .nav-link:hover {
    background-color: var(--color-gray-100);
    color: var(--color-primary);
}

.nav-panel .nav-links .nav-link.active {
    color: var(--color-primary) !important;
    font-weight: var(--fw-700);
}

.nav-panel .nav-links .nav-item-signout {
    margin-top: 0.75rem;
    border-top: 1px solid var(--color-gray-200);
}

.nav-panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 1.25rem;
    text-decoration: none;
}

/* Two columns is tight under ~360px */
@media (max-width: 359.98px) {
    .nav-services {
        grid-template-columns: 1fr;
    }
}

/* Footer groups read as distinct blocks once they stack on mobile */
@media (max-width: 767.98px) {
    footer .footer-lower .row > [class*="col-"] {
        margin-bottom: 1.5rem !important;
    }

    footer .footer-title {
        margin-bottom: 0.6rem;
    }

    footer .footer-lower ul {
        gap: 0.4rem !important;
    }
}

/*------------------------------------------------------------
  [ SECTION SURFACES ]
  Main-page sections alternate white / off-white instead of
  carrying their own rule. Component borders (cards, panels,
  tables, nav rows) are untouched — those mark objects, not
  sections.
  ------------------------------------------------------------*/

.section-zigzag.surface-alt,
section.surface-alt {
    background-color: var(--surface-alt);
}

/* A card on the off-white ground needs its own ground back */
.surface-alt .card,
.surface-alt .bg-bordered {
    background-color: var(--surface);
}

/* The zigzag illustration wells already carry their own tint */

/*------------------------------------------------------------
  [ REFERENCE PASS — 480.mp4 ]
  Display headlines, pill controls, soft rounded cards on an
  off-white ground, playful accent set.
  ------------------------------------------------------------*/

body {
    background-color: var(--surface);
}

/* --- Display type ------------------------------------------ */

h1, .h1, h2, .h2, h3, .h3,
.nav-panel-title {
    font-family: var(--font-heading);
    letter-spacing: -0.035em;
}

h1, .h1 {
    font-weight: 700;
    line-height: 1.02;
}

h2, .h2 {
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

h3, .h3 {
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

p, .p {
    color: var(--color-gray-400);
    line-height: 1.6;
}

h1 + p, h2 + p, .h2 + p {
    font-size: 1.0625rem;
    max-width: 46ch;
}

/* Coloured category label above a section heading */
.badge-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0 0 0.35rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-600);
    letter-spacing: -0.01em;
    color: var(--c-blue);
}

.badge-label-light { background: transparent; }
.accent-lead .badge-label { background: transparent; color: var(--c-blue); }
.accent-counter .badge-label { background: transparent; color: var(--c-orange); }

/* --- Controls ---------------------------------------------- */

.btn {
    border-radius: var(--radius-full);
    padding: 0.7rem 1.35rem;
    font-weight: var(--fw-600);
    letter-spacing: -0.01em;
}

.btn-lg { padding: 0.85rem 1.75rem; }
.btn-sm { padding: 0.4rem 0.9rem; }

.btn-cta,
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-cta:hover, .btn-primary:hover,
.btn-cta:focus, .btn-primary:focus {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* --- Surfaces ---------------------------------------------- */

.hero,
.bg-landing,
.hero-restaurant, .hero-planes, .hero-trains,
.hero-events, .hero-hotel, .hero-taxi, .hero-taxi-gradient {
    background-color: var(--surface);
}

.section-zigzag { background-color: var(--surface); }
.section-zigzag.surface-alt,
section.surface-alt { background-color: var(--surface); }

.card,
.bg,
.bg-sm,
.bg-bordered,
.feature-card,
/* Cards are the white plane on the off-white page, no hard edge */
.card,
.bg-bordered {
    background-color: var(--color-white);
    border: 0;
}

.feature-card {
    background: var(--color-white);
    border: 0;
    border-left: 3px solid var(--c-green);
    padding: 1.25rem 1.5rem;
}

.accent-lead .card { border-left: 0; }
.accent-counter .card { border-left: 0; }

/* Illustrations carry their own rounded panel; no extra clipping */

.icon-box,
.nav-services img {
    border-radius: var(--radius-sm);
    border: 0;
}

.step-number {
    border-radius: var(--radius-full);
    background: var(--c-green);
}

/* --- FAQ: +/- rows on hairlines ---------------------------- */

.accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--color-gray-150) !important;
    padding: 0.35rem 0;
}

.accordion-button {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--fw-600);
    letter-spacing: -0.015em;
    padding: 1rem;
}

.accordion-button::after {
    content: "+";
    background-image: none !important;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-gray-400);
    width: auto;
    height: auto;
    transform: none !important;
}

.accordion-button:not(.collapsed)::after { content: "\2212"; }
.accordion-body { color: var(--color-gray-400); padding: 0 0.25rem 1rem; }

/* --- Chrome ------------------------------------------------ */

.navbar {
    background-color: var(--surface);
    border-bottom: 0;
    padding: 0.9rem 0;
}

.nav-link { font-weight: var(--fw-500); }

footer {
    background-color: var(--color-gray-950);
    border-radius: var(--radius-base) var(--radius-base) 0 0;
}

.nav-services a { border-radius: var(--radius-sm); }
.nav-panel-cta { border-radius: var(--radius-full); }

/* --- Hero blob field (reference signature) ------------------ */

.hero,
#landing.head-lg,
#landing.head-xl {
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) 0;
}

.hero-blobs {
    position: absolute;
    inset: 0;
    background-image: url(/img/assets/illustrations/hero-blobs.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.hero-blobs + .container,
.hero-blobs ~ .container,
.hero-blobs ~ .container-md {
    position: relative;
    z-index: 1;
}

/* Keep the centre clear so the headline never sits on a shape */
@media (max-width: 1199.98px) {
    .hero-blobs { opacity: 0.55; }
}

@media (max-width: 767.98px) {
    .hero-blobs { display: none; }
}

/*------------------------------------------------------------
  [ ZIGZAG ILLUSTRATIONS ]
  The artwork carries its own tinted panel and rounded corners,
  so the wrapper adds nothing: no ground, no border, no shadow,
  no clipping. Intrinsic dimensions drive the box, so square and
  3:2 scenes both render uncropped.
  ------------------------------------------------------------*/

.section-zigzag .card {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
}

.section-zigzag .card img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: fill;
    border-radius: 0;
    background: transparent;
}

/*------------------------------------------------------------
  [ MOBILE PAGE EDGE ]
  --gutter-x drives the page edge. Only genuinely full-bleed
  blocks apply it directly; anything inside a .container is
  already inset and must not double up.
  ------------------------------------------------------------*/

@media (max-width: 767.98px) {
    :root {
        --gutter-x: 1.5rem;
    }

    /* Full-bleed: sits outside any .container */
    .nav-panel .offcanvas-body,
    .nav-panel .offcanvas-header {
        padding-left: var(--gutter-x);
        padding-right: var(--gutter-x);
    }

    /* Breaks out to 100vw, so it needs the inset back */
    .half-fluid .left-half,
    .half-fluid .right-half {
        padding-left: var(--gutter-x) !important;
        padding-right: var(--gutter-x) !important;
    }

    /* Accordion rows align to the container edge, not inside it */
    .accordion-button,
    .accordion-body {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 575.98px) {
    :root {
        --gutter-x: 1.25rem;
    }
}

/*------------------------------------------------------------
  [ TYPE RHYTHM ]
  Headings earn space above only when they follow prose. Flex
  and grid containers own their own spacing via `gap`, so the
  top margin is suppressed inside them to avoid double gaps.
  ------------------------------------------------------------*/

p + h2, ul + h2, ol + h2, p + .h2,
p + h3, ul + h3, ol + h3, p + .h3 {
    margin-top: 1.5em;
}

p + h4, ul + h4, ol + h4,
p + h5, ul + h5 {
    margin-top: 1.6em;
}

/* Containers that space their own children */
.d-flex > h1, .d-flex > h2, .d-flex > h3,
.d-flex > h4, .d-flex > h5, .d-flex > h6,
[class*="col-"] > h1:first-child,
[class*="col-"] > h2:first-child,
[class*="col-"] > h3:first-child,
.accordion-header {
    margin-top: 0;
}

/* Lists share the paragraph rhythm */
ul, ol {
    margin-bottom: 1em;
}

li + li {
    margin-top: 0.3em;
}

/* Last element in a block shouldn't push the block open */
p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

/* Lead paragraph directly under a page heading */
h1 + p {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--color-gray-400);
}

/*------------------------------------------------------------
  [ CONTENT SUB-HEADS + LIST RHYTHM ]
  ------------------------------------------------------------*/

/* Q&A style sub-heads inside content blocks read as sub-heads,
   not as section titles. */
.section-lg h3,
.section-zigzag h3 {
    font-size: var(--text-h3);
    font-weight: var(--fw-600);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 0.35em;
}

/* Lists that space themselves with flex `gap` must not also
   carry the paragraph rhythm's li margin. */
ul.d-flex > li + li,
ol.d-flex > li + li,
[class*="gap-"] > li + li {
    margin-top: 0;
}

/* A list directly under its lead-in sits closer to it */
p + ul,
p + ol {
    margin-top: -0.25em;
}

/* Checkmark rows: align the mark to the first line, not the centre */
li.d-flex > img.icons {
    flex: 0 0 auto;
    margin-top: 0.2em;
    align-self: flex-start;
}

/*------------------------------------------------------------
  [ CONTACT SECTION ]
  Text left, contact cards stacked right on desktop; single
  column below lg. Cards are tappable rows with a labelled
  value, not centred chips.
  ------------------------------------------------------------*/

.contact-section {
    background-color: var(--surface);
}

.contact-lead {
    max-width: 38ch;
    margin-bottom: 1.5rem;
}

.contact-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-cards > li + li {
    margin-top: 0;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-base);
    text-decoration: none;
    color: var(--color-gray-950);
    transition: var(--transition-base);
}

a.contact-card:hover,
a.contact-card:focus-visible {
    border-color: var(--color-gray-400);
    background-color: var(--color-gray-50);
    color: var(--color-gray-950);
}

.contact-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background-color: var(--tint-lead);
}

.contact-card-icon img {
    width: 24px;
    height: 24px;
}

.contact-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-card-label {
    font-size: var(--text-sm);
    font-weight: var(--fw-500);
    color: var(--color-gray-400);
    letter-spacing: 0.01em;
}

.contact-card-value {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--fw-600);
    letter-spacing: -0.015em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* The third card is information, not an action */
.contact-card-static {
    background-color: transparent;
    border-style: dashed;
}

.contact-card-static .contact-card-icon {
    background-color: var(--color-gray-100);
}

.contact-note {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-150);
    max-width: 78ch;
    font-size: var(--text-md);
    color: var(--color-gray-400);
}

@media (max-width: 991.98px) {
    .contact-lead {
        max-width: none;
    }

    .contact-note {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .contact-card {
        padding: 1rem;
        gap: 0.85rem;
    }

    .contact-card-icon {
        width: 42px;
        height: 42px;
    }
}

/*------------------------------------------------------------
  [ OFFER CARDS ]
  Head row pairs the plan name with its price; features sit in
  a two-column check grid instead of one long stacked list.
  ------------------------------------------------------------*/

.offer-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-base);
}

.offer-card-vip {
    border-color: var(--color-gray-950);
    box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 32px rgba(16, 16, 16, 0.08);
}

/* --- head: name + price on one line ------------------------ */

.offer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-gray-150);
}

.offer-identity { min-width: 0; flex: 1 1 14rem; }

.offer-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.4rem;
}

.offer-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-gray-950);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.06em;
}

.offer-billing {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    line-height: 1.45;
}

.offer-price {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0;
    text-align: right;
}

.offer-price-amount {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-gray-950);
}

.offer-price-period {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    white-space: nowrap;
}

/* --- body -------------------------------------------------- */

.offer-intro p {
    margin: 0 0 0.6rem;
    font-size: var(--text-md);
    color: var(--color-gray-400);
}

.offer-intro p:last-child { margin-bottom: 0; }

.offer-intro .offer-pitch {
    color: var(--color-gray-950);
    font-weight: var(--fw-600);
    font-size: var(--text-base);
}

.offer-features-title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-400);
}

/* two-column check grid replaces the long single list */
/* the one thing VIP adds spans the grid and is marked */
.offer-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 767.98px) {
    .offer-card { padding: 1.25rem; gap: 1rem; }
    .offer-features { grid-template-columns: 1fr; }
    .offer-head { gap: 0.5rem; }
    .offer-price { width: 100%; text-align: left; }
}

/*------------------------------------------------------------
  [ OFFER FEATURE LIST ]
  The marker is a flex child, not an absolutely-positioned
  pseudo-element, so it stays locked to the first line however
  the label wraps. Three states carry meaning:
  included (green) · conditional (amber) · exclusive (orange).
  ------------------------------------------------------------*/

.offer-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.offer-features > li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0;
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--color-gray-900);
}

/* Shared marker geometry */
.offer-features > li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.12em;
    border-radius: var(--radius-full);
    background-color: var(--c-green);
    -webkit-mask: var(--mark-check) center / 70% no-repeat;
    mask: var(--mark-check) center / 70% no-repeat;
}

/* Included by default; conditional gets its own mark and tone */
.offer-feature-conditional {
    color: var(--color-gray-400);
}

.offer-feature-conditional::before {
    background-color: var(--c-amber);
    -webkit-mask: var(--mark-clock) center / 82% no-repeat;
    mask: var(--mark-clock) center / 82% no-repeat;
}

/* --- The differentiator --------------------------------------
   Spans the grid, sits on a tinted ground with a solid edge,
   and says plainly why it is set apart. */

.offer-feature-exclusive {
    grid-column: 1 / -1;
    position: relative;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.6rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.15rem;
    background-color: var(--tint-counter);
    border-left: 3px solid var(--c-orange);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-gray-950);
    font-weight: var(--fw-500);
}

.offer-feature-exclusive::before {
    background-color: var(--c-orange);
    margin-top: 0.2em;
}

.offer-feature-tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background-color: var(--c-orange);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}

/* the label itself takes the remaining width */
.offer-feature-exclusive > span:last-child {
    flex: 1 1 14rem;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .offer-features {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .offer-feature-exclusive {
        padding: 0.75rem 0.85rem;
    }
}

/*------------------------------------------------------------
  [ FORM SYSTEM ]
  One radius ladder and one padding value across every control.
  Panels sit one step above their fields (20 outer / 12 inner)
  so the nesting reads correctly; the pill is reserved for
  buttons and the single-field hero search.
  ------------------------------------------------------------*/

.form-control,
.form-select,
textarea.form-control {
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.95rem;
    min-height: 3rem;
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-white);
    font-size: var(--text-base);
    line-height: 1.4;
}

textarea.form-control {
    min-height: 5.5rem;
    padding-top: 0.6rem;
}

/* Panel that holds fields: one step wider than the fields */
.header-form {
    border-radius: var(--radius-base);
    padding: var(--space-sm);
    gap: var(--space-xs);
}

/* Icon-bearing fields keep room for the mark.
   Icon sits at left:12px and is 20px wide, so text must start
   clear of 32px — every text input in #services carries one. */
#services .form-control,
#services .form-select {
    padding: 0.7rem 0.95rem;
}

#services input.form-control {
    padding-left: 2.5rem;
}

#services .form-select,
#services textarea.form-control {
    padding-left: 0.95rem;
}

#services .form-select.select-sm {
    padding: 0.55rem 2rem 0.55rem 0.95rem !important;
    min-height: 2.75rem;
    min-width: 120px;
    height: auto !important;
}

/* --- Label / field / group rhythm --------------------------- */

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-500);
    color: var(--color-gray-400);
}

legend.form-label {
    margin-bottom: 0.35rem;
}

/* --- Checkout: even spacing between every field row --------- */

#payments .input {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

#payments form .row,
#payments form > .d-flex {
    margin-bottom: var(--space-xs);
}

#payments .form-control,
#payments .form-select {
    width: 100%;
}

#payments hr {
    margin: var(--space-sm) 0;
}

/* Validation messages share the field rhythm */
.just-validate-error-label {
    margin-top: 0.3rem;
    font-size: var(--text-sm);
}

@media (max-width: 767.98px) {
    .header-form {
        padding: var(--space-xs);
    }

    .form-control,
    .form-select {
        min-height: 3rem;
    }
}

/*------------------------------------------------------------
  [ CORNER COHERENCE ]
  Anything that paints a background or border behind a rounded
  control must round to match, or its square corners show
  through. Outer radius = inner radius + the padding between
  them, so the curves stay concentric.
  ------------------------------------------------------------*/

/* Field group: white panel wrapping 12px fields at 0.35rem padding */
.form-group {
    border-radius: calc(var(--radius-sm) + 0.35rem);
}

/* Autocomplete popup: square list buttons were overflowing the
   rounded panel at the first and last row. */
.ac-popup {
    border: 1px solid var(--color-gray-150);
}

.ac-popup button.list-group-item,
.ac-popup .list-group-item {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.ac-popup .list-group:first-child .list-group-item:first-child {
    border-top: 0;
}

/* Small round control */
.btn-dropdown-more {
    border-radius: var(--radius-full);
}

/* Upload dropzone */
.file-upload-wrapper .file-input + label {
    border-radius: var(--radius-base);
}

.file-upload-wrapper .file-input + label .btn {
    border-radius: var(--radius-full);
}

/* Footer language switcher */
footer .dropdown .btn,
footer .dropdown-menu.show {
    border-radius: var(--radius-sm);
}

footer .dropdown .dropdown-item {
    border-radius: calc(var(--radius-sm) - 4px);
}

/* Intl-tel-input wraps the phone field; keep the flag button and
   the field sharing one outline rather than two mismatched ones. */
.iti {
    width: 100%;
    height: auto;
}

.iti .form-control {
    width: 100%;
}

/* A rounded box that clips its children must not also lose its
   own border to the clip. */
.custom-radio-field {
    border-radius: var(--radius-full);
}

.custom-radio-field label:first-of-type {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
}

.custom-radio-field label:last-of-type {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
}

/*------------------------------------------------------------
  [ SERVICE SHOWCASE ]
  Stage + rail. The rail sits on a deeper ground than the stage
  so the two zones read as separate. Right of the copy on
  desktop, below it on mobile.
  ------------------------------------------------------------*/

/* --- stage -------------------------------------------------- */

.showcase-service {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--fw-700);
    letter-spacing: -0.02em;
}

.showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-md);
    font-weight: var(--fw-600);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.showcase-link:hover,
.showcase-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- rail --------------------------------------------------- */

.showcase-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- responsive --------------------------------------------- */

@media (max-width: 991.98px) {
    .hero-copy {
        text-align: center;
        align-items: center;
    }

    .hero-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .showcase {
        max-width: 34rem;
        margin-inline: auto;
    }
}

@media (max-width: 575.98px) {
    /* rail moves under the stage as one row of six */
    .showcase {
        grid-template-columns: 1fr;
    }

    .showcase-rail {
        grid-template-columns: repeat(6, 1fr);
        align-self: auto;
        gap: 0.35rem;
        padding: 0.45rem;
    }

    .showcase-tab {
        width: 100%;
        height: 44px;
    }

    .showcase-tab img {
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-slide {
        transition: none;
    }
}

/*------------------------------------------------------------
  [ SERVICE SHOWCASE — CARD ]
  The illustrations carry their own 32px panel with a shape that
  breaks out of it, so the card must not clip and must not add a
  competing corner. Outer radius = inner + padding, which lands
  on 32px and reads concentric with the artwork.
  ------------------------------------------------------------*/

.showcase {
    --showcase-pad: 0.75rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--showcase-pad);
    padding: var(--showcase-pad);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: calc(var(--radius-base) + var(--showcase-pad));
    overflow: visible;
}

/* --- stage: the artwork is its own panel ------------------- */

.showcase-stage {
    position: relative;
    display: grid;
    min-width: 0;
    background-color: transparent;
}

.showcase-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
}

.showcase-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* natural ratio — cover was cropping the overflowing shape */
.showcase-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 448 / 449;
}

.showcase-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.35rem 0.15rem;
    background-color: transparent;
    border: 0;
}

/* --- rail: an inset panel, one step tighter than the card --- */

.showcase-rail {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background-color: var(--color-gray-100);
    border: 0;
    border-radius: var(--radius-base);
    align-self: stretch;
}

.showcase-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    cursor: pointer;
    transition: background-color .15s linear, border-color .15s linear;
}


/*------------------------------------------------------------
  [ ICONS ]
  Inlined from webroot/img/icons/ui/*.svg via element('icon').
  Sized in em so an icon tracks the text it sits beside, and
  drawn in currentColor so it inherits its context.
  ------------------------------------------------------------*/

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
    color: inherit;
}

.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-xl { width: 1.75em; height: 1.75em; }

/* Buttons and links pair an icon with a label */
.btn .icon,
.showcase-link .icon,
.nav-link .icon {
    width: 1em;
    height: 1em;
}

/* Decorative flourish is artwork, not an icon */
.icon-underline-flourish {
    width: auto;
    height: auto;
}

/*------------------------------------------------------------
  [ SHOWCASE RAIL — ACTIVE COLOUR ]
  Icons are inlined, so the active one is coloured on its own
  paths via currentColor. Each service carries the hue of its
  illustration.
  ------------------------------------------------------------*/

.showcase-tab {
    color: var(--color-gray-400);
}

.showcase-tab .icon {
    width: 26px;
    height: 26px;
    transition: color .18s linear, transform .18s ease;
}

.showcase-tab:hover {
    color: var(--color-gray-900);
    background-color: var(--color-white);
}

.showcase-tab.is-active {
    background-color: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--icon-active);
}

.showcase-tab.is-active .icon {
    transform: scale(1.06);
}


@media (prefers-reduced-motion: reduce) {
    .showcase-tab .icon,
    .showcase-tab.is-active .icon {
        transition: none;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .showcase-tab .icon {
        width: 22px;
        height: 22px;
    }
}

/*------------------------------------------------------------
  [ VEHICLE CATEGORIES ]
  Was four cramped equal-flex columns sharing a dark band with an
  unrelated question. Now its own light section: a responsive card
  grid, each card leading with the vehicle on a tinted well.
  ------------------------------------------------------------*/

.vehicles-section {
    background-color: var(--surface);
}

.vehicles-head {
    max-width: 58ch;
    margin-bottom: var(--space-sm);
}

.vehicles-head h3 {
    margin-bottom: 0.4rem;
}

.vehicles-head p {
    margin: 0;
}

.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vehicle-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0;
    padding: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-base);
}

/* The mark sits in a chip at the card's top-left. The full-width band
   this replaces was sized for 100px car artwork, and it was painted
   --surface-alt (#FFFFFF) on a --color-white card, so it never showed. */
.vehicle-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 56px;
    height: 56px;
    background-color: var(--color-gray-100);
    border-radius: var(--radius-sm);
}

/* line icons, so they take their weight from the text colour rather
   than carrying their own; one size for all four */
.vehicle-art .icon {
    width: 28px;
    height: 28px;
    color: var(--color-gray-950);
}

.vehicle-copy {
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--color-gray-400);
}

/* the label is inside the translated string; give it its own line */
.vehicle-copy strong {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: var(--fw-700);
    letter-spacing: -0.015em;
    color: var(--color-gray-950);
}

.vehicles-note {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-md);
    color: var(--color-gray-400);
}

/*------------------------------------------------------------
  [ BOOKING TIMING ]
  The two options read as a pair, not a bullet list.
  ------------------------------------------------------------*/

.timing-section {
    background-color: var(--surface-alt);
}

.timing-inner {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.timing-head h3 { margin-bottom: 0.4rem; }
.timing-head p { margin: 0; }

.timing-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timing-options > li {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0;
    padding: 1.1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-base);
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--color-gray-400);
}

.timing-options strong {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: var(--fw-700);
    letter-spacing: -0.015em;
    color: var(--color-gray-950);
}

.timing-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--icon-active);
}

@media (max-width: 1199.98px) {
    .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .timing-inner { grid-template-columns: 1fr; gap: var(--space-sm); }
}

@media (max-width: 575.98px) {
    .vehicle-grid,
    .timing-options { grid-template-columns: 1fr; }
    .vehicle-art { height: 84px; }
}

/* Service icon inside a form's primary action */
.btn .btn-icon {
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.15rem;
    opacity: 0.9;
}

/*------------------------------------------------------------
  [ TAXI HEADER — WAYFINDER ]
  A map plate bleeding off the right edge, with a dashed route
  drawn between two stops and a car tracing it. Sits behind the
  content and never intercepts a click.
  ------------------------------------------------------------*/

.hero-taxi {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.wayfinder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    color: var(--icon-active);
    /* Anchored left under the headline, dissolving as it passes
       behind the form. Two gradients intersect so it also softens
       at the top and bottom instead of cutting at the section edge. */
    -webkit-mask-image:
        linear-gradient(to right, #000 0%, #000 26%, rgba(0, 0, 0, 0.5) 58%, transparent 90%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, #000 0%, #000 26%, rgba(0, 0, 0, 0.5) 58%, transparent 90%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
    mask-composite: intersect;
}

.wayfinder-map {
    position: absolute;
    inset: 0;
    background-image: url(/img/assets/illustrations/taxi-wayfinder.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    opacity: 0.9;
}

/* the tinted plate that carries it off the edge */
/* keeps the headline legible over the map without hiding it */
.wayfinder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(248, 248, 248, 0.62) 0%,
        rgba(248, 248, 248, 0.34) 34%,
        rgba(248, 248, 248, 0.10) 60%,
        rgba(248, 248, 248, 0) 80%);
}

/* keep the header content above the artwork */
.hero-taxi > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .wayfinder { opacity: 0.6; }
}

@media (max-width: 767.98px) {
    .wayfinder { display: none; }
}


/*------------------------------------------------------------
  [ CONTENT ILLUSTRATIONS — WIDER ABOVE MOBILE ]
  The scenes are square artwork with their own rounded panel, so
  a cover-crop would slice the panel's corners off. Instead the
  frame goes rectangular and the artwork sits centred within it,
  which shortens the zigzag rows on wider screens.
  ------------------------------------------------------------*/

@media (min-width: 768px) {
    .section-zigzag .card img {
        aspect-ratio: 4 / 3;
        object-fit: contain;
        object-position: center;
    }
}

@media (min-width: 1200px) {
    .section-zigzag .card img {
        aspect-ratio: 3 / 2;
    }
}


/*------------------------------------------------------------
  [ RESTAURANT SEARCH BAR ]
  Two comboboxes — where, then what — and a submit, sharing one
  pill. Above 768px they sit in a row split by a hairline; below
  it the pill unrolls into three stacked, individually bordered
  controls so each one still reads as a field on its own.
  ------------------------------------------------------------*/

.search-bar {
    display: block;
    position: relative;
    padding: 0.35rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
}

.search-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.search-bar-fields {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Both fields flex, so the bar keeps its proportions at any width.
   The name field carries the longer placeholder and gets the bias. */
.search-bar .search-field {
    position: relative;
    min-width: 0;
}

.search-bar .search-field-city { flex: 4 1 0; }
.search-bar .search-field-name { flex: 5 1 0; }

.search-bar .search-field-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    z-index: 1;
    color: var(--color-gray-400);
    pointer-events: none;
}

.search-bar .search-field-icon .icon {
    width: 18px;
    height: 18px;
}

.search-bar .search-field:focus-within .search-field-icon {
    color: var(--color-gray-900);
}

.search-bar .form-control {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem 0.6rem 2.8rem;
    border: 0;
    border-radius: var(--radius-full);
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

/* The pill already carries the focus ring; tinting the active field
   is only there to say which of the two has the caret. */
.search-bar .form-control:focus {
    border: 0;
    outline: none;
    box-shadow: none;
    background-color: var(--color-gray-50);
}

/* Bootstrap fills a disabled control grey, which paints a square
   block inside the pill. The field stays flat and just dims. */
.search-bar .form-control:disabled {
    background-color: transparent;
    opacity: 1;
}

.search-bar .form-control:disabled::placeholder {
    color: var(--color-gray-400) !important;
    opacity: 0.6;
}

.search-bar .search-field:has(.form-control:disabled) {
    cursor: not-allowed;
}

.search-bar .search-field:has(.form-control:disabled) .search-field-icon {
    color: var(--color-gray-200);
}

.search-divider {
    flex: 0 0 1px;
    align-self: stretch;
    width: 1px;
    margin: 0.45rem 0;
    background-color: var(--color-gray-200);
}

.search-bar .search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1.15rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.search-bar .search-submit .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Shown only while the name field is locked, and taken out of flow
   so the bar doesn't jump when a city is picked. */
.search-hint {
    display: none;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.search-bar:has(#input-restaurant:disabled) .search-hint {
    display: block;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 1.25rem;
    right: 1.25rem;
}

/* --- Results list ------------------------------------------ */

/* Flush rows: the panel's own radius clips them, so they no longer
   need the 3px gutter that showed their square corners.
   Positioned `fixed` so the header's `overflow: hidden` can neither clip
   the list nor convince flip() to open it upwards; the script sets width,
   top and left against the field on every open, resize and scroll. */
.search-bar .ac-popup {
    padding: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
}

.search-bar .ac-popup button.list-group-item {
    padding: 0.6rem 0.8rem;
    font-size: var(--text-md);
    border-radius: calc(var(--radius-sm) - 4px);
    border: 0;
}

.search-bar .ac-popup button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--color-gray-150);
}

.search-bar .ac-item-geoloc {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.search-bar .ac-item-geoloc .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--color-gray-400);
}

.search-bar .ac-popup hr {
    border-top-color: var(--color-gray-150);
    opacity: 1;
}

/* --- Stacked below 768px ------------------------------------ */

@media (max-width: 767.98px) {
    .search-bar {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .search-bar:focus-within {
        box-shadow: none;
    }

    .search-bar-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .search-divider {
        display: none;
    }

    .search-bar .form-control {
        min-height: 44px;
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-sm);
        background-color: var(--color-white);
    }

    .search-bar .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
        background-color: var(--color-white);
    }

    .search-bar .form-control:disabled {
        background-color: var(--color-gray-50);
    }

    .search-bar .search-submit {
        width: 100%;
        min-height: 44px;
        border-radius: var(--radius-sm);
    }

    .search-bar:has(#input-restaurant:disabled) .search-hint {
        position: static;
        margin-top: 0.5rem;
    }
}


/*------------------------------------------------------------
  [ CENTRED HEADER LEAD ]
  `h1 + p` is capped at 46ch for readability. A capped block
  still sits flush left inside its column, so a centred lead
  read as off-centre against the heading above it even though
  its own text was centred. Centre the box, not just the text.
  ------------------------------------------------------------*/

.text-center > h1 + p,
.text-center > h2 + p,
.text-center > .h2 + p,
h1 + p.text-center,
h2 + p.text-center,
.h2 + p.text-center {
    margin-inline: auto;
}

/* The search bar's helper line follows the bar it belongs to. */
.search-hint {
    text-align: center;
}


/*------------------------------------------------------------
  [ ZIGZAG PHOTOGRAPHY ]
  Photographs, unlike the scene illustrations, carry no panel of
  their own and must fill their frame, so they crop rather than
  contain and take the radius from the stylesheet. Three of the
  four sources ship with rounded corners baked in and one does
  not; cropping to a landscape frame removes the corner region
  from all of them, so the CSS radius is what actually shows and
  the set reads consistently.
  ------------------------------------------------------------*/

.section-zigzag .card-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-base);
    background-color: var(--color-gray-100);
}

@media (min-width: 1200px) {
    .section-zigzag .card-photo img {
        aspect-ratio: 3 / 2;
    }
}


/*------------------------------------------------------------
  [ SERVICE PAGE MEDIA CARDS ]
  Some of the supplied photography carries its own rounded
  corners baked into the pixels, with the corner region left
  transparent; the rest is square and edge-to-edge. A white card
  behind the first kind paints a white wedge into each corner,
  so the card stops painting a plane of its own: square sources
  are still clipped to the card's radius, rounded ones show the
  section through their own corners.
  ------------------------------------------------------------*/

.card.card-media {
    background-color: transparent;
    box-shadow: none;
}


/*------------------------------------------------------------
  [ SERVICE FORM ROWS ]
  Two defects in the row that holds the flight type buttons.
  ------------------------------------------------------------*/

/* Reboot sets `fieldset { min-width: 0 }`. As a flex item the radio
   group's fieldset then shrank below its own content — 81px around a
   192px control — and the buttons spilled 111px over the select next
   to them, burying "Aller-retour". */
.header-form fieldset {
    flex: 0 0 auto;
    min-width: fit-content;
}

@media (max-width: 767.98px) {
    /* The rows carry `flex-wrap` alongside `flex-sm-nowrap` to undo
       it, so from 0 to 575px the row still wraps while it is already
       stacked as a column. Chrome hands the first item extra
       main-axis size for that — 24px of dead space under the flight
       type buttons, against 8px between every other row. */
    .header-form .form-group {
        flex-wrap: nowrap !important;
    }
}


/*------------------------------------------------------------
  [ GUEST SELECTOR ]
  It is a <div class="form-control">, not an <input>, so the
  `#services input.form-control` padding that clears the leading
  mark never reached it and the icon sat on top of the guest
  count. Being a div it also had no vertical centring of its own.
  ------------------------------------------------------------*/

/* #services .form-control carries an id, so the padding has to be
   reached with one too or the override never lands. */
#services .form-guest-selector:has(.input-icons) {
    display: flex;
    align-items: center;
    padding-left: 2.5rem;
    cursor: pointer;
}

#services .form-guest-selector .label-guests-label {
    margin-left: 0.15rem;
}


/*------------------------------------------------------------
  [ CHECKOUT — BOOKING PREVIEW ]
  The summary of what is being paid for. It was an outlined box
  in --color-primary (near-black) with every line at the same
  size and weight, so nothing in it read as the headline.
  ------------------------------------------------------------*/

.booking-preview {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: var(--space-sm);
    background-color: var(--color-white);
    border: var(--border-hairline);
    border-radius: var(--radius-base);
}

.booking-preview + .booking-preview {
    margin-top: var(--space-xs);
}

/* The lead line — route, venue or city — carries the card */
.booking-preview .h5 {
    font-size: 1.125rem;
    font-weight: var(--fw-700);
    color: var(--color-gray-950);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 0;
}

/* The two ends of a route are equals; the mark between them is the
   only thing that should look like punctuation. */
.booking-preview .h5 + .h5,
.booking-preview .city-from,
.booking-preview .city-to {
    color: var(--color-gray-950);
}

/* Values carry the meaning, so they take the ink. Only the marks
   beside them recede. */
.booking-preview .fs-medium,
.booking-preview .p {
    font-size: var(--text-md);
    color: var(--color-gray-900);
}

.booking-preview .text-light {
    color: var(--color-gray-900) !important;
}

.booking-preview .text-dark {
    color: var(--color-gray-950) !important;
}

/* One mark size across every service, dropped back far enough to
   read as a cue rather than compete with the value it labels. */
.booking-preview img:not(.icon-transport):not(.icon-taxi):not(.icon-event):not(.basic-image) {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    opacity: 0.38;
}

/* Fields the booking never set stay in the DOM as empty spans; left
   alone they still take a line and open a gap through the card.
   Needs !important: these carry .d-flex, which Bootstrap ships as
   `display: flex !important`, so a plain `display: none` loses. */
.booking-preview span:empty:not(.preview-sep),
.booking-preview div:empty {
    display: none !important;
}

/* Was <hr class="vr my-2 mx-1"> — an <hr> doing a vertical rule's job,
   with margins that left it floating off the text baseline. */
.preview-sep {
    flex: 0 0 1px;
    align-self: center;
    width: 1px;
    height: 0.85em;
    min-height: 0;
    margin: 0 0.1rem;
    padding: 0;
    border: 0;
    background-color: var(--color-gray-200);
    opacity: 1;
}

.booking-preview-sm {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* The mobile fare pill above the taxi summary */
.booking-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    font-size: var(--text-sm);
    background-color: var(--color-white);
    border: 1px solid var(--c-green);
    border-radius: var(--radius-full);
}

.hotel-photo-container,
.transport-photo-container,
.event-photo-container,
.restaurant-photo-container,
.taxi-photo-container {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/*------------------------------------------------------------
  [ CHECKOUT — CONSENT ]
  Two legal confirmations sat as loose --text-xs grey between the
  CVV field and the submit button, and the four document links
  inside them were painted the same colour as the text with no
  underline, so nothing showed they could be opened.
  ------------------------------------------------------------*/

.consent-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: var(--space-sm) 0;
    padding-top: var(--space-sm);
    border-top: var(--border-hairline);
}

.consent-group .input,
.consent-group .form-check {
    margin-bottom: 0;
}

/* The checkbox sits inside the label, so the label is the flex row —
   box in one column, the wrapped text hanging in the other. */
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-gray-500);
    cursor: pointer;
}

.consent-label > span,
.consent-label > div {
    flex: 1 1 auto;
    min-width: 0;
}

.consent-group .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.15em;
    flex: 0 0 auto;
}

.consent-link {
    color: var(--color-gray-950);
    font-weight: var(--fw-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-link:hover,
.consent-link:focus-visible {
    color: var(--color-primary-hover);
}

/*------------------------------------------------------------
  [ CHECKOUT — WHAT THE SUBSCRIPTION INCLUDES ]
  Eight points, each previously an <img> tick with
  alt="checkmark icon" — announced eight times over — at 18px
  except one at 16px, beside grey text at one flat weight.
  The tick is now a mask on ::before, so it takes a colour from
  the token set and costs no request.
  ------------------------------------------------------------*/

.booking-benefits {
    gap: 0;
}

.booking-benefits-title {
    font-size: 1.0625rem;
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    color: var(--color-gray-950);
    margin: 0 0 0.25rem;
}

/* Two across rather than eight down: the card loses about half its
   height, which keeps the booking summary above it and the pay
   button below it closer together on the checkout. */
.benefit-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.1rem;
    row-gap: 0.75rem;
}

.benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-gray-900);
}

/* The billing term is the one line that is not a service, and the
   longest; it runs the full width instead of taking a column. */
.benefit-list li:last-child {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gray-150);
}

/* One column once there is no room for two */
@media (max-width: 575.98px) {
    .benefit-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.65rem;
    }
}

.benefit-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 0.15rem;
    background-color: var(--c-green-deep);
    -webkit-mask: var(--mark-check) center / 12px 12px no-repeat;
    mask: var(--mark-check) center / 12px 12px no-repeat;
}


/*------------------------------------------------------------
  [ CHECKOUT — SUMMARY COLUMN ]
  The column had no width of its own and centred its contents
  vertically, so on a wide screen the cards stretched to 768px
  and floated 200px down the page, away from the form they
  belong to.
  ------------------------------------------------------------*/

.checkout-aside {
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-md) var(--space-sm);
}

.checkout-aside-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    max-width: 27rem;
}

/* Between 768 and 991 the columns are stacked, so the summary sits
   under the form and should read full width, centred. */
@media (max-width: 991.98px) {
    .checkout-aside {
        padding: var(--space-sm) var(--gutter-x) var(--space-md);
    }

    .checkout-aside-inner {
        max-width: 34rem;
    }
}

/* Meta rows wrap as whole facts rather than breaking mid-value —
   at 432px "2 voyageurs" was splitting across two lines. Scoped to
   .flex-row so it cannot catch the outer plate-and-content row,
   which is .flex-md-row and must stay free to shrink. */
.booking-preview .d-flex.flex-row.gap-3 {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

.booking-preview .d-flex.flex-row.gap-3 > span {
    white-space: nowrap;
}

/* gap-3 plus the rule's own margins spent ~64px between three short
   facts, which pushed the last one onto a line of its own behind an
   orphaned separator. */
.booking-preview .d-flex.flex-row.gap-3 {
    gap: 0.5rem !important;
    /* A wrapping flex container stretches its line to the box, and
       the box takes its height from the line — the row settled at
       61px around 23px of text. Packing the line stops it. */
    align-content: flex-start;
    align-items: center;
}

.booking-preview .preview-sep {
    margin: 0.15rem 0.1rem;
}

/* One plate size for every service, so the cards line up whichever
   booking is being paid for */
.booking-preview .hotel-photo-container,
.booking-preview .transport-photo-container,
.booking-preview .event-photo-container,
.booking-preview .restaurant-photo-container,
.booking-preview .taxi-photo-container {
    flex: 0 0 auto;
    width: 84px;
    max-width: 84px;
    height: 84px;
    background-color: var(--color-gray-100);
    border-radius: var(--radius-sm);
}

.booking-preview .taxi-photo-container img,
.booking-preview .hotel-photo-container img,
.booking-preview .transport-photo-container img,
.booking-preview .event-photo-container img {
    background-color: transparent;
    padding: 0.5rem;
}

/* The plate: a quiet ground for the service mark rather than a grey
   block. Hairline instead of fill, so it belongs to the same family
   as the card around it. */
.booking-preview .hotel-photo-container,
.booking-preview .transport-photo-container,
.booking-preview .event-photo-container,
.booking-preview .taxi-photo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-150);
}

/* The restaurant plate holds a photograph, not a mark, so it fills */
.booking-preview .restaurant-photo-container {
    background-color: var(--color-gray-100);
    border: 0;
}

.booking-preview .transport-photo-container img,
.booking-preview .event-photo-container img,
.booking-preview .hotel-photo-container img,
.booking-preview .taxi-photo-container img {
    width: 40px;
    height: 40px;
    padding: 0;
    opacity: 0.75;
}

/* Plate and copy share a baseline at the top of the card */
.booking-preview > .d-flex.flex-md-row {
    align-items: flex-start;
    gap: var(--space-xs) !important;
}

.booking-preview > .d-flex.flex-md-row > .d-flex.flex-column {
    gap: 0.4rem !important;
    padding-top: 0.1rem;
}

/* The taxi summary is a stack of eight facts rather than a lead line
   plus detail; even rhythm keeps it from reading as a wall. */
.taxi-block .d-flex.flex-column.align-items-start > .d-flex {
    padding: 0.05rem 0;
}

/* text-capitalize title-cases every word, which is wrong for French:
   "Gare de Lyon" rendered as "Gare De Lyon" and "jeu. 2 oct. 18:30"
   as "Jeu. 2 Oct. 18:30". The values already arrive correctly cased. */
.booking-preview .text-capitalize {
    text-transform: none !important;
}