/* Key Chapters:

Chapter 1: Supplementary Reset & CSS Variables Configuration
Chapter 2: Button variants (colors, sizing, rounded states)
Chapter 3-5: Inputs, checkboxes, radios, custom dropdown overrides
Chapter 11: Tempus Dominus Date Picker styling
Chapter 12: Flight/Voli Card design styles
Chapter 21: Cart & Checkout elements
CSS Custom Properties & Core Color Variables
Colors and sizing constraints are declared inside the :root pseudo-class: 

*/

@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Chapter 1 */
:root {
    /* Color Palette */
    --color-primary: #0c2b57;
    --color-blue: #0d8ae4;
    --color-band: #f5f5f7;
    --color-action-light: #f46d00;
    --color-action: #df5d00;
    --color-blueA8: #0a58a8;
    --color-grey1A: #0000001a;
    --color-grey36: #102036;
    --color-grey26: #00000026;
    --color-grey29: #00000029;
    --color-grey59: #00000059;
    --color-grey70: #707070;
    --color-greyFA: #f4f6fa;
    --color-line29: #1e2229;
    --color-black05: #050505;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-error: #e11d48;
    --color-green: #0BD69F;
    /* Border Radius tokens */
    --radius-outer: 10px;
    --radius-inner: 5px;
    /* Typographic Responsive Scale Scale */
    --font-femto: 8px;
    --font-pico: 9px;
    --font-nano: 10px;
    --font-micro: 11px;
    --font-uxs: 12px;
    --font-xs: 14px;
    --font-sm: 16px;
    --font-md: 18px;
}

@media (min-width: 768px) {
    :root {
        --font-femto: 9px;
        --font-pico: 10px;
        --font-nano: 11px;
        --font-micro: 12px;
        --font-uxs: 13px;
        --font-xs: 15px;
        --font-sm: 17px;
        --font-md: 19px;
    }
}

@media (min-width: 1200px) {
    :root {
        --font-femto: 11px;
        --font-pico: 12px;
        --font-nano: 13px;
        --font-micro: 14px;
        --font-uxs: 15px;
        --font-xs: 17px;
        --font-sm: 19px;
        --font-md: 21px;
    }
}

body {
    font-family: "Google Sans Flex", sans-serif;
}

.font-fira {
    font-family: "Fira Sans Condensed", sans-serif;
}

.font-fira-sans {
    font-family: "Fira Sans", sans-serif;
}

.font-flex {
    font-family: "Google Sans Flex", sans-serif !important;
}

div,
a,
ul,
ol,
li,
span,
img,
p,
section,
input,
label,
h1,
h2,
h3,
h4,
h5,
h6,
i {
    /* outline: dotted 1px grey; */
}

/* Chapter 2 */
.vola-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: calc(var(--font-md) * 2 + 8px) !important;
    background: var(--color-action-light);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 4px;
    opacity: 1;
    color: var(--color-white);
    font-size: var(--font-micro);
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 calc(var(--font-uxs) * 2);
    border: transparent;
    min-width: 150px;
}

.button-width {
    min-width: 230px;
}

.vola-btn .icon {
    font-size: calc(var(--font-nano) * 2);
}

.vola-btn-white {
    background: var(--color-white);
    color: var(--color-action-light);
    border: 1px solid var(--color-action-light);
}

.vola-btn-white-second {
    background: var(--color-white);
    color: var(--color-action-light);
    border: 2px solid var(--color-action-light);
    font-weight: 600;
}

.button-succes {
    color: var(--color-green);
    border: 2px solid var(--color-green);
}

a {
    text-decoration: none;
}

/* Chapter 3 */

.volaeasy-input {
    position: relative;
    width: 100%;
    /* max-width: 420px; */
    font-family: "Fira Sans Condensed", sans-serif;
}


    .volaeasy-input input {
        cursor: pointer !important;
        width: 100%;
        height: calc(var(--font-md) * 4 - 4px);
        border: 2px solid transparent;
        border-radius: 2px;
        background: #fff;
        padding: 28px 45px 18px 18px;
        font-size: calc(var(--font-xs) + 1);
        color: #1f2b3d;
        outline: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    .volaeasy-input input,
    .volaeasy-input textarea {
        cursor: pointer !important;
        width: 100%;
        height: calc(var(--font-md) * 4 - 4px);
        border: 2px solid transparent;
        border-radius: 3px;
        background: #fff;
        padding: 28px 45px 18px 18px;
        font-size: calc(var(--font-xs) + 1);
        color: #1f2b3d;
        outline: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    .volaeasy-input textarea {
        resize: none;
        height: 100px;
    }

    .volaeasy-input label {
        position: absolute;
        left: 55px;
        top: calc(var(--font-uxs) * 2);
        font-size: calc(var(--font-xs) + 1px);
        line-height: calc(var(--font-xs) + 4px);
        color: #1f2b3d;
        pointer-events: none;
        transition: 0.2s;
    }

.volaeasy-icon {
    position: absolute;
    left: calc(var(--font-xs) + 1px);
    top: calc(var(--font-uxs) * 2);
    font-size: calc(var(--font-md) + 1px);
    color: var(--color-primary);
    transition: 0.2s;
    pointer-events: none;
}

.icon-color-blue {
    color: var(--color-blue) !important;
}

.volaeasy-input input:focus {
    padding-left: 18px;
}

    .volaeasy-input input:focus ~ label,
    .volaeasy-input input:not(:placeholder-shown) ~ label,
    .volaeasy-input.is-error label {
        top: 10px;
        left: 36px;
        margin-left: 5px;
        color: var(--color-blue) !important;
        font-size: var(--font-pico);
        line-height: calc(var(--font-pico) + 2px);
    }

    /* Focus color */
    .volaeasy-input input:focus ~ label {
        color: var(--color-blue);
    }

/* Error color always priority */
.volaeasy-input.is-error label {
    color: var(--color-error) !important;
}

.volaeasy-input input:focus ~ .volaeasy-icon,
.volaeasy-input input:not(:placeholder-shown) ~ .volaeasy-icon,
.volaeasy-input.is-error .volaeasy-icon {
    opacity: 1;
    visibility: visible;
    top: 10px;
    left: 18px;
    font-size: calc(var(--font-pico) + 2px);
}

.volaeasy-input input:focus ~ .volaeasy-icon {
    color: var(--color-blue);
}

/* Variant: Floating Icon (Flight Search Inputs) (Now default) */
.volaeasy-input.has-floating-icon input:focus ~ label,
.volaeasy-input.has-floating-icon input:not(:placeholder-shown) ~ label,
.volaeasy-input.has-floating-icon.is-error label {
    left: 36px;
    margin-left: 5px;
}

.volaeasy-input.has-floating-icon.is-error label {
    margin-left: 5px;
}

.volaeasy-input.has-floating-icon input:focus ~ .volaeasy-icon,
.volaeasy-input.has-floating-icon input:not(:placeholder-shown) ~ .volaeasy-icon,
.volaeasy-input.has-floating-icon.is-error .volaeasy-icon {
    opacity: 1;
    visibility: visible;
    top: 10px;
    left: 18px;
    font-size: calc(var(--font-pico) + 2px);
    color: var(--color-blue);
}

.volaeasy-error-icon {
    display: none;
    position: absolute;
    right: 16px;
    top: 15px;
    width: var(--font-sm);
    height: var(--font-sm);
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
}

.volaeasy-input small {
    display: none;
    color: #fff;
    font-size: 11px;
    margin-left: 18px;
    margin-top: 5px;
}

.volaeasy-input.is-error input {
    border-color: var(--color-error);
}

.volaeasy-input.is-error label,
.volaeasy-input.is-error i {
    color: var(--color-error);
}

.volaeasy-input.is-error .volaeasy-error-icon {
    display: flex;
}

.volaeasy-input.is-error small {
    display: block;
}

.password-toggle {
    position: absolute;
    right: 18px;
    top: calc(var(--font-xs) * 2 + 1px);
    font-size: 20px;
    color: var(--color-blue);
    cursor: pointer;
    transition: 0.2s;
    z-index: 2;
}

    .password-toggle:hover {
        opacity: 0.8;
    }

.input-info-icon {
    position: absolute;
    right: 18px;
    top: calc(var(--font-xs) * 2 + 1px);
    font-size: 20px;
    color: var(--color-blue);
    cursor: pointer;
    transition: 0.2s;
    z-index: 2;
}

    .input-info-icon:hover {
        opacity: 0.8;
    }

/* Heading */
.heading-1 {
    font-size: calc(var(--font-md) * 2 + 8px);
    font-weight: bold;
    margin: 0;
}

.heading-2 {
    font-size: calc(var(--font-md) * 2 - 2px);
    font-weight: 500;
    margin: 0;
}

.heading-3 {
    font-size: calc(var(--font-xs) * 2);
    font-weight: 500;
    margin: 0;
}

.pragraph-22 {
    font-size: calc(var(--font-femto) * 2);
    font-family: "Fira Sans Condensed", sans-serif;
}

.pragraph {
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
}


.sec_space {
    padding: calc(var(--font-md) * 3) 0;
}

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


/* Header */
.sec_header {
    background-color: var(--color-primary);
    padding: calc(var(--font-md) * 3) 0 calc(var(--font-pico) * 4);
    transition: padding 0.3s ease-in-out;
}

.header-scrolled {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.logo {
    height: calc(var(--font-xs) * 2.5);
}

@media (min-width: 768px) {
    .logo {
        height: calc(var(--font-xs) * 3.5);
    }
}

.hero-section {
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    color: var(--color-white);
    padding: calc(var(--font-md) * 2 + 8px) 0 calc(var(--font-femto) * 2 + 1px) 0;
}

.info_box {
    border: 0.5px solid var(--color-primary);
    padding: calc(var(--font-md) * 2) calc(var(--font-uxs) * 2);
    border-radius: var(--radius-inner);
    text-align: center;
    color: var(--color-primary);
    margin: 0 auto;
}

.features-flex .col-md-3 {
    position: relative;
    cursor: pointer;
    min-height: 250px;
}

.icon-feature {
    font-size: var(--font-sm);
    line-height: 1;
    transition: all 0.3s ease-in-out;
}

    .icon-feature svg {
        width: 3.5rem;
        height: 3.5rem;
        fill: var(--secondary2);
        transition: all 0.3s ease-in-out;
    }

.feature-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-sm);
    line-height: 1.25;
    transition: all 0.3s ease-in-out;
    position: relative;
    padding-bottom: 10px;
}

    .feature-title::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--secondary2);
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }

.card-border-top {
    border-top: 4px solid rgb(13, 138, 228);
}

.back-to-page {
    display: flex;
    align-items: center;
    font-size: var(--font-micro);
    text-transform: uppercase;
    color: var(--color-grey36);
    font-family: "Google Sans Flex", sans-serif;
    gap: 4px;
    font-weight: 500;
    margin: 10px 0 40px 0;
}

    .back-to-page i {
        font-size: 30px;
        width: 18px;
    }

/* Features Card */
.features-flex .col-md-3 p:last-child {
    font-size: 0.95rem;
    color: var(--color-primary);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    margin-top: 15px;
    padding-top: 15px;
    margin-bottom: 0;
}

.features-flex .col-md-3:hover .icon-feature {
    font-size: 2.5rem;
}

    .features-flex .col-md-3:hover .icon-feature svg {
        width: 2.5rem;
        height: 2.5rem;
    }

.features-flex .col-md-3:hover .feature-title {
    font-size: 0.95rem;
}

    .features-flex .col-md-3:hover .feature-title::after {
        opacity: 1;
    }

.features-flex .col-md-3:hover p:last-child {
    opacity: 1;
    visibility: visible;
    max-height: 150px;
}

.cta-box {
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    border-radius: var(--font-pico);
    color: var(--color-white);
    text-align: center;
    margin: 0 auto;
    padding: 9px calc(var(--font-md) * 2) calc(var(--font-md) + 12px);
    box-shadow: 0px 5px 15px var(--color-grey29);
}

.cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--font-uxs);
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: calc(var(--font-md) * 2 + 8px);
    padding: var(--font-pico) calc(var(--font-uxs) * 2);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--font-sm);
    box-shadow: 0px 3px 6px var(--color-grey29);
    transition: all 0.3s ease-in-out;
    width: 361px;
}

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

    .cta-pill i {
        color: var(--color-blue);
        font-size: calc(var(--font-md) * 1.5);
    }

    .cta-pill .underline {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }


/* Footer */
.main-footer {
    position: relative;
    margin-top: calc(var(--font-uxs) * 4);
}

    /* Divider stops short of both page edges (as per XD) */
    .main-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(var(--font-uxs) * 4);
        right: calc(var(--font-uxs) * 4);
        border-top: 2px solid var(--color-primary);
    }

    .main-footer .container {
        padding-top: calc(var(--font-uxs) * 4);
        padding-bottom: calc(var(--font-uxs) * 4);
    }

.footer-text,
.footer-links li,
.footer-links a {
    font-size: calc(var(--font-uxs) + 1px);
    color: var(--color-primary);
    line-height: 1.6;
    text-decoration: none;
    margin: 0;
}

.footer-heading {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: 500;
    color: var(--color-primary);
    font-family: "Fira Sans Condensed", sans-serif;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links a:hover {
        text-decoration: underline;
    }

    .footer-links i {
        margin-right: 6px;
    }

.footer-col-border {
    border-left: 1px solid var(--color-primary);
    padding-left: 2rem;
}

@media (max-width: 991px) {
    .footer-col-border {
        border-left: none;
        padding-left: 0.75rem;
        margin-top: 2rem;
    }
}

.footer-logo-praesidium {
    width: 30%;
}

.footer-logo-vola {
    width: 30%;
}

.footer-logo-pci {
    width: 90%;
}

.footer-seal {
    width: calc(var(--font-md) * 2 + 9px);
}

/* Login Card */
.login-card {
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    border-radius: 4px;
    padding: calc(var(--font-md) * 2 + 8px) calc(var(--font-md) * 2 - 2px) calc(var(--font-xs) * 4 + 2px);
    color: var(--color-white);
    box-shadow: 0px 5px 15px var(--color-grey29);
    position: relative;
}

    .login-card .vola-btn {
        width: 220px;
        max-width: 100%;
    }

.space-top-56 {
    margin-top: calc(var(--font-micro) * 4);
}

.space-top-77 {
    margin-top: calc(var(--font-sm) * 4 + 1px);
}

.forgot-password,
.no-account,
.back-link {
    color: var(--color-white);
    font-size: var(--font-micro);
    text-decoration: none;
}

    .forgot-password:hover,
    .back-link:hover {
        color: var(--color-white);
    }

.login-divider {
    border-color: var(--color-white) !important;
    margin: calc(var(--font-sm) - 1px) auto calc(var(--font-uxs) + 1px) auto;
    max-width: 420px;
}

.back-link {
    position: absolute;
    bottom: calc(var(--font-md) * 1.1);
    left: calc(var(--font-md));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

    .back-link i {
        font-size: 30px;
    }

/* Chapter 11: Date Picker styling */
.datepicker-dropdown {
    padding: 15px;
    border: none;
    box-shadow: 0px 5px 15px var(--color-grey29);
    border-radius: var(--radius-inner);
    font-family: inherit;
    min-width: 250px;
}

.datepicker .datepicker-switch {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-micro) !important;
    text-align: center;
}

    .datepicker .datepicker-switch:hover,
    .datepicker .prev:hover,
    .datepicker .next:hover {
        background: transparent;
    }

.datepicker th.prev,
.datepicker th.next {
    background-color: var(--color-action-light);
    color: var(--color-white);
    border-radius: var(--radius-inner);
    width: calc(var(--font-pico) * 3) !important;
    height: calc(var(--font-pico) * 3) !important;
    text-align: center;
}

    .datepicker th.prev:hover,
    .datepicker th.next:hover {
        background-color: var(--color-action);
    }

.datepicker table {
    width: 100%;
}

    .datepicker table tr td.active.active,
    .datepicker table tr td.active.active:hover {
        background-color: var(--color-blue) !important;
        color: var(--color-white) !important;
        background-image: none !important;
        text-shadow: none;
        border-radius: 0;
    }

.datepicker td {
    font-size: var(--font-pico);
    text-align: center;
}

.datepicker th.dow {
    color: #888;
    font-weight: 400;
    font-size: var(--font-pico) !important;
    text-transform: uppercase;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
}

.datepicker-custom-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 5px;
}

    .datepicker-custom-footer .selected-date-text {
        font-weight: 700;
        font-size: var(--font-micro);
        color: var(--color-primary);
    }

    .datepicker-custom-footer .btn-chiudi {
        background-color: var(--color-blue);
        color: var(--color-white);
        border: none;
        padding: calc(var(--font-femto) - 3px) calc(var(--font-xs) + 1px);
        border-radius: 4px;
        font-weight: 600;
        font-size: var(--font-micro);
    }

        .datepicker-custom-footer .btn-chiudi:hover {
            background-color: var(--color-blueA8);
        }

/* Custom Dropdown (Ora) */
.volaeasy-input-dropdown {
    cursor: pointer;
}

.volaeasy-fake-input {
    width: 100%;
    height: calc(var(--font-md) * 4 - 4px);
    border: 2px solid transparent;
    border-radius: 2px;
    background: var(--color-white);
    padding: calc(var(--font-micro) * 2) calc(var(--font-uxs) * 3) calc(var(--font-xs) + 1px) calc(var(--font-xs) + 1px);
    font-size: calc(var(--font-xs) + 1px);
    color: transparent;
    /* Hidden by default */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: 0.2s;
    display: flex;
    align-items: flex-end;
    /* Match input padding bottom */
}

.volaeasy-input-dropdown:hover .volaeasy-fake-input {
    border-color: var(--color-action-light);
}

.volaeasy-input-dropdown.is-error .volaeasy-fake-input {
    border: 2px solid var(--color-error);
}

.volaeasy-input-dropdown .dropdown-chevron {
    position: absolute;
    right: calc(var(--font-xs) + 1px);
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-primary);
    transition: transform 0.3s ease;
    pointer-events: none;
}

/* Open State */
.volaeasy-input-dropdown.show .volaeasy-fake-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 2px solid transparent;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15);
    color: var(--color-primary);
    position: relative;
    z-index: 100001;
}

.volaeasy-input-dropdown.has-value .volaeasy-fake-input {
    color: var(--color-primary);
}

.volaeasy-input-dropdown.show .dropdown-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Manual Floating Label & Icon for Dropdown */
.volaeasy-input-dropdown.show label,
.volaeasy-input-dropdown.has-value label {
    top: calc(var(--font-femto) - 1px);
    left: calc(var(--font-pico) * 3);
    font-size: var(--font-pico);
    line-height: calc(var(--font-pico) + 2px);
    margin-left: 5px;
    z-index: 100002;
    color: var(--color-blue);
}

.volaeasy-input-dropdown.show label {
    color: var(--color-blue);
}

.volaeasy-input-dropdown.show .volaeasy-icon,
.volaeasy-input-dropdown.has-value .volaeasy-icon {
    opacity: 1;
    visibility: visible;
    top: calc(var(--font-femto) - 1px);
    left: calc(var(--font-md) - 1px);
    font-size: calc(var(--font-pico) + 2px);
    z-index: 100002;
    color: var(--color-blue);
}

.volaeasy-input-dropdown.show .volaeasy-icon {
    color: var(--color-blue);
}

/* Dropdown Menu overrides */
.volaeasy-custom-dropdown .dropdown-menu {
    border-bottom-left-radius: var(--radius-inner);
    border-bottom-right-radius: var(--radius-inner);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: calc(var(--font-femto) - 1px) 0;
    border: none;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 0 !important;
    min-width: 100%;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100003;
    background-color: var(--color-white);
}

.volaeasy-custom-dropdown .dropdown-item {
    padding: calc(var(--font-femto) - 1px) calc(var(--font-md) - 1px);
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-primary);
    font-weight: 400;
    font-family: "Fira Sans Condensed", sans-serif;
}

    .volaeasy-custom-dropdown .dropdown-item:hover {
        background-color: var(--color-grey-light);
        color: var(--color-blue);
    }

/* Dropdown Search Input */
.volaeasy-custom-dropdown .dropdown-search-wrapper {
    padding: 8px 12px;
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-grey-light);
    z-index: 10;
    margin-bottom: 5px;
}

.volaeasy-custom-dropdown .dropdown-search-input {
    width: 100%;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--radius-inner);
    padding: 6px 10px 6px 32px;
    font-size: var(--font-xs);
    outline: none;
    font-family: "Fira Sans Condensed", sans-serif;
    color: var(--color-primary);
    background-color: #f8f9fa;
}

    .volaeasy-custom-dropdown .dropdown-search-input:focus {
        border-color: var(--color-blue);
        background-color: var(--color-white);
    }

.volaeasy-custom-dropdown .dropdown-search-wrapper .search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0bec5;
    font-size: var(--font-xs);
}

/* Scrollbar styles for dropdown */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
}

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #c0c0c0;
    }

/* Chapter 21: Cart & Checkout elements */
.checkout-stepper {
    padding: 30px 0;
}

.stepper-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.stepper-wrapper-secondry {
    max-width: 850px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    z-index: 1;
}

    .stepper-item::after {
        position: absolute;
        content: "";
        border-bottom: 1px dashed #b3b3b3;
        width: 100%;
        top: calc(var(--font-uxs));
        left: 50%;
        z-index: -1;
    }

    .stepper-item:last-child::after {
        content: none;
    }

.step-counter {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--font-sm) + 1px);
    height: calc(var(--font-sm) + 1px);
    border-radius: 50%;
    background-color: #b3b3b3;
    margin-top: calc(var(--font-uxs) - (var(--font-sm) + 1px) / 2);
    margin-bottom: calc(10px + var(--font-uxs) - (var(--font-sm) + 1px) / 2);
}

.stepper-item.active .step-counter {
    background-color: var(--color-blue);
    width: calc(var(--font-uxs) * 2);
    height: calc(var(--font-uxs) * 2);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 10px;
    z-index: 4;
}


.stepper-item .step-counter i {
    display: none;
}

.stepper-item.active .step-counter i {
    font-size: var(--font-xs);
    display: inline-block;
}

.step-name {
    color: #B4B2B0;
    font-size: var(--font-pico);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

.stepper-item.active .step-name {
    color: var(--color-white);
    font-weight: 600;
}

/* Nested Dropdown Logic */
.volaeasy-custom-dropdown .dropdown-submenu {
    position: relative;
}

    .volaeasy-custom-dropdown .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -10px !important;
        border-radius: var(--radius-inner);
        display: none;
    }

    .volaeasy-custom-dropdown .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

/* Error state integration for Dropdowns */
.volaeasy-input-dropdown.is-error .volaeasy-fake-input {
    border: 1px solid var(--color-error);
}

.volaeasy-input-dropdown .volaeasy-error-icon {
    right: 42px;
    /* Push it to the left to avoid overlapping chevron */
    top: 50%;
    transform: translateY(-50%);
}

/* Custom Radio Buttons */
.volaeasy-radio-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

    .volaeasy-radio-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.volaeasy-radio-checkmark {
    position: relative;
    height: var(--font-md);
    width: var(--font-md);
    background-color: transparent;
    border-radius: 50%;
    border: 6px solid var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}

.volaeasy-radio-container:hover input ~ .volaeasy-radio-checkmark {
    opacity: 0.8;
}

.volaeasy-radio-container input:checked ~ .volaeasy-radio-checkmark {
    border-color: var(--color-blue);
}

.volaeasy-radio-text {
    font-size: calc(var(--font-sm) - 1px);
    font-weight: 400;
    font-family: "Fira Sans Condensed", sans-serif;
}

/* Custom Checkboxes */
.volaeasy-checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

    .volaeasy-checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.volaeasy-checkbox-checkmark {
    position: relative;
    height: var(--font-uxs);
    min-width: var(--font-uxs);
    background-color: var(--color-white);
    border-radius: 2px;
    border: 1px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volaeasy-checkbox-container:hover input ~ .volaeasy-checkbox-checkmark {
    border-color: var(--color-blue);
}

.volaeasy-checkbox-container input:checked ~ .volaeasy-checkbox-checkmark {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.volaeasy-checkbox-text {
    font-size: var(--font-uxs);
    font-weight: 400;
    color: var(--color-primary);
    font-family: "Fira Sans", sans-serif;
}

/* Modifier for simple dropdown using standard component */
.volaeasy-input-dropdown.is-simple .volaeasy-fake-input {
    border: 1px solid var(--color-primary) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 0 calc(var(--font-sm) * 2) 0 var(--font-uxs) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    background-color: var(--color-white) !important;
    color: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.volaeasy-input-dropdown.is-simple:hover .volaeasy-fake-input {
    border-color: var(--color-blue) !important;
}

.volaeasy-input-dropdown.is-simple .volaeasy-icon {
    display: none !important;
}

/* Unfocused Label acts as middle placeholder */
.volaeasy-input-dropdown.is-simple label {
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: calc(var(--font-sm) - 1px) !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.volaeasy-input-dropdown.is-simple .dropdown-chevron {
    right: 15px !important;
    color: var(--color-primary) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Focus and Has-Value States for Simple Dropdown */
.volaeasy-input-dropdown.is-simple.show .volaeasy-fake-input,
.volaeasy-input-dropdown.is-simple.has-value .volaeasy-fake-input {
    padding: 8px calc(var(--font-sm) * 2) 0 var(--font-uxs) !important;
    /* Slight push down to avoid label */
    align-items: center !important;
    color: var(--color-primary) !important;
    /* Reveal actual value */
}

/* Focus state specific styling */
.volaeasy-input-dropdown.is-simple.show .volaeasy-fake-input {
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    position: relative !important;
    z-index: 100001 !important;
}

/* Floating Label when Focused or Has-Value */
.volaeasy-input-dropdown.is-simple.show label,
.volaeasy-input-dropdown.is-simple.has-value label {
    top: 10px !important;
    transform: none !important;
    font-size: 11px !important;
    color: var(--color-blue) !important;
    left: 15px !important;
}

/* Flight Search Widget Specifics */
.search-widget-container {
    margin-top: -30px;
    position: relative;
    z-index: 10;
    max-width: 1220px;
}

.search-tabs {
    background: transparent;
    flex-wrap: nowrap;
    overflow-x: auto;
}

    .search-tabs::-webkit-scrollbar {
        display: none;
    }

    .search-tabs .nav-link {
        background-color: var(--color-white);
        color: var(--color-primary);
        border: none;
        font-weight: 500;
        font-size: calc(var(--font-sm) - 1px);
        padding: var(--font-uxs) calc(var(--font-uxs) * 2);
        border-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        margin-right: 5px;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .search-tabs .nav-link.active {
            background-color: var(--color-primary);
            color: var(--color-white);
            font-weight: 600;
        }

        .search-tabs .nav-link.disabled,
        .search-tabs .nav-link:disabled {
            background-color: var(--color-white) !important;
            color: var(--color-primary) !important;
            opacity: 1 !important;
        }

            .search-tabs .nav-link.disabled i,
            .search-tabs .nav-link:disabled i {
                color: var(--color-primary) !important;
            }

        .search-tabs .nav-link i {
            font-size: calc(var(--font-nano) * 2);
            margin-right: 5px;
        }

.search-tab-content {
    background: linear-gradient(to bottom, var(--color-primary), var(--color-blue));
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    .search-tab-content .wc-panel-close {
        display: none;
        right: -5%;
        top: -20%;
    }

.collapse .search-tab-content .wc-panel-close {
    display: block;
}

@media (max-width: 991.98px) {
    .search-tab-content .wc-panel-close {
        right: 15px;
        top: 15px;
    }
}

.swap-icon-container {
    width: calc(var(--font-sm) * 2 + 2px);
    height: calc(var(--font-sm) * 2 + 2px);
    padding: 0;
    border: 1px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: var(--font-micro);
    cursor: pointer;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .swap-icon-container {
        top: calc(var(--font-md) * 2 + 6px)
    }
}

.primary-border {
    border: 1px solid var(--color-primary);
}

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

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

/* Disabled States */
.vola-btn:disabled,
.vola-btn.disabled,
button:disabled,
button.disabled,
a.disabled,
a[disabled],
a:has(> button:disabled),
a:has(> .vola-btn:disabled),
a:has(> button.disabled),
a:has(> .vola-btn.disabled) {
    background: #b5b5b5 !important;
    color: var(--color-white) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-radius: 4px;
}

    .vola-btn:disabled .icon,
    .vola-btn.disabled .icon,
    .vola-btn:disabled i,
    .vola-btn.disabled i,
    button:disabled i,
    button.disabled i {
        color: var(--color-white) !important;
    }

.volaeasy-radio-container input:disabled ~ .volaeasy-radio-checkmark,
.volaeasy-checkbox-container input:disabled ~ .volaeasy-checkbox-checkmark {
    opacity: 0.5;
    cursor: not-allowed;
}

.volaeasy-radio-container input:disabled ~ .volaeasy-radio-text,
.volaeasy-checkbox-container input:disabled ~ .volaeasy-checkbox-text {
    opacity: 0.5;
}

.volaeasy-radio-container:has(input:disabled),
.volaeasy-checkbox-container:has(input:disabled) {
    cursor: not-allowed;
}

.volaeasy-input input:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    border-color: transparent;
    color: #6c757d;
}

    .volaeasy-input input:disabled ~ label {
        color: #6c757d;
    }

    .volaeasy-input input:disabled ~ .volaeasy-icon {
        color: #6c757d;
    }

.volaeasy-input-dropdown.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}

    .volaeasy-input-dropdown.is-disabled .volaeasy-fake-input {
        background-color: #e9ecef !important;
        border-color: transparent !important;
    }

    .volaeasy-input-dropdown.is-disabled.has-value .volaeasy-fake-input {
        color: #6c757d !important;
    }

    .volaeasy-input-dropdown.is-disabled label,
    .volaeasy-input-dropdown.is-disabled .dropdown-chevron,
    .volaeasy-input-dropdown.is-disabled .volaeasy-icon {
        color: #6c757d !important;
    }

/* Tariffe Checkbox List Columns */
.tariffe-checkbox-list {
    column-count: 1;
    column-gap: calc(var(--font-sm) + 1px);
}

    .tariffe-checkbox-list .volaeasy-checkbox-container {
        margin-bottom: calc(var(--font-femto) - 3px);
        break-inside: avoid;
        page-break-inside: avoid;
        display: flex;
    }

@media (min-width: 768px) {
    .tariffe-checkbox-list {
        column-count: 2;
    }
}

.notification-header {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: 500;
    margin-bottom: 0;
}

.notification-link {
    font-size: var(--font-pico);
}

.notification-list ul {
    padding-left: 0 !important;
}

    .notification-list ul li {
        list-style: none;
    }

        .notification-list ul li a {
            color: var(--color-primary);
            text-decoration: none;
        }

            .notification-list ul li a:hover {
                color: var(--color-blue);
            }

.notification-status {
    font-size: calc(var(--font-femto) - 1px);
    color: var(--color-action);
}

.notification-text {
    font-size: var(--font-micro);
    margin-bottom: 0;
    color: var(--color-grey36);
    line-clamp: 1;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.icon-archived {
    font-size: calc(var(--font-md) + 1px);
}

.text-archived {
    font-size: calc(var(--font-sm) - 1px);
}

.notification-date {
    font-size: calc(var(--font-femto) - 1px);
    color: #707070;
}

.supporto-pragraph {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    font-weight: 500;
    margin: var(--font-sm) 0;
}

.supporto-icon {
    width: 20px;
    text-align: center;
}

hr {
    opacity: 1;
    border-top: 1px solid var(--color-primary) !important;
}

.user-button {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: none;
    padding: var(--font-femto) var(--font-femto) var(--font-femto) calc(var(--font-sm) + 1px);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: calc(var(--font-femto) - 1px);
    height: var(--font-md) * 2 + 4px;
    position: relative;
    overflow: visible;
    margin-left: calc(var(--font-nano) * 2.5);
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    min-width: 10rem;
}

.rounded-user-icon {
    background-color: var(--color-white);
    position: absolute;
    left: calc(var(--font-nano) * -2.5);
    top: 2px;
    width: calc(var(--font-md) * 2 + 4px);
    height: calc(var(--font-md) * 2 + 4px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    z-index: 1;
}

.navbar-dropdown-list {
    top: -4px !important;
    width: calc(100% - 33px);
    border-radius: 0 !important;
}

    .navbar-dropdown-list .dropdown-item {
        border-top: 1px solid #102036;
        font-family: "Fira Sans", sans-serif;
        font-size: calc(var(--font-xs) + 1px);
        padding: 12px;
        color: #102036 !important;
    }

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

.result-flights .nav-link {
    font-size: calc(var(--font-sm) - 1px);
}

.result-flights .active {
    display: inline-block;
    color: var(--color-primary) !important;
    line-height: 1 !important;
    border-bottom: 2px solid var(--color-primary) !important;
    padding-bottom: 0 !important;
}

.detail-box {
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    color: var(--color-white);
    padding: calc(var(--font-sm) + 5px) calc(var(--font-md) + 8px) !important;
    border-radius: 5px;
}

.search-text {
    color: var(--color-grey36);
    font-size: calc(var(--font-sm) - 1px);
    font-family: "Fira Sans Condensed", sans-serif;
}

/* Flexdatalist overrides */

.volaeasy-airport-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    position: relative;
    transition: background-color 0.2s;
}

    .volaeasy-airport-item .airport-icon-wrap {
        width: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
    }

    /* Main items (Cities) */
    .volaeasy-airport-item.type-main {
        background-color: #f3f4f6;
        border-left: 3px solid var(--color-primary);
        border-radius: 4px;
        padding-left: 12px;
        color: var(--color-primary);
        margin: 6px 10px 0 10px;
    }

        .volaeasy-airport-item.type-main .airport-icon-wrap {
            color: var(--color-primary);
        }

    /* Child items (Airports) */
    .volaeasy-airport-item.type-child {
        background-color: var(--color-white);
        border-left: none;
        padding-left: var(--font-uxs);
        color: var(--color-grey19);
        margin: 0 10px;
    }

        .volaeasy-airport-item.type-child .airport-icon-wrap {
            color: #0ea5e9;
            /* Light blue airplane */
        }

        /* Connecting lines */
        .volaeasy-airport-item.type-child .airport-connector {
            position: absolute;
            left: 1px;
            top: -50%;
            height: 100%;
            width: 14px;
            border-left: 1px solid #cbd5e1;
            border-bottom: 1px solid #cbd5e1;
            pointer-events: none;
        }

/* Hover & Active States */

/* Passenger Dropdown Customization */
.passenger-dropdown-menu {
    font-family: "Fira Sans Condensed", sans-serif;
}

    .passenger-dropdown-menu .btn {
        border-color: #cbd5e1 !important;
    }

        .passenger-dropdown-menu .btn:hover {
            background-color: #f8fafc !important;
        }

/* Airline Matrix Carousel */
.airline-matrix-container {
    border: 1px solid #7d93b2;
    /* Standard border color */
}

.matrix-labels {
    background-color: #fff;
    z-index: 2;
    border-right: 1px solid #e0e0e0;
}

.matrix-cell {
    border-bottom: 1px solid #e0e0e0;
    font-size: var(--font-micro) !important;
    color: var(--color-primary) !important;
    padding: var(--font-uxs) 0;
}

    .matrix-cell:last-child {
        border-bottom: none;
    }

.matrix-column.border-end {
    border-right: 1px solid #e0e0e0;
}

.matrix-carousel-wrapper {
    width: calc(100% - 130px);
    min-width: 0;
}

.airline-matrix-carousel .owl-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

    .airline-matrix-carousel .owl-nav button.owl-prev,
    .airline-matrix-carousel .owl-nav button.owl-next {
        width: calc(var(--font-sm) * 2 + 2px);
        height: calc(var(--font-sm) * 2 + 2px);
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px !important;
        color: var(--color-primary) !important;
        pointer-events: auto;
        border: 1px solid #e0e0e0 !important;
        position: relative;
    }

    .airline-matrix-carousel .owl-nav button.owl-prev {
        margin-left: 5px;
    }

    .airline-matrix-carousel .owl-nav button.owl-next {
        margin-right: 5px;
    }

    .airline-matrix-carousel .owl-nav button:hover {
        color: var(--color-white) !important;
        background: var(--color-primary) !important;
    }

    .airline-matrix-carousel .owl-nav button.owl-prev.disabled,
    .airline-matrix-carousel .owl-nav button.owl-next.disabled {
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #adb5bd !important;
        box-shadow: none;
        border: 1px solid #f1f1f1 !important;
        cursor: default;
    }

        .airline-matrix-carousel .owl-nav button.owl-prev.disabled i,
        .airline-matrix-carousel .owl-nav button.owl-next.disabled i {
            color: #e0e0e0 !important;
        }

.airline-matrix-carousel .owl-dots {
    display: none !important;
}

/* Specific cell highlights */
.matrix-highlight {
    background-color: #FFF0E0;
    color: var(--color-black) !important;
    font-weight: bold;
    border: 1px solid var(--color-action) !important;
}

.matrix-green {
    background-color: #fae8e8;
    color: var(--color-black) !important;
    font-weight: bold;
    border: 1px solid red !important;
}


/* Extracted Inline Styles from result.html */
.text-color-action-light {
    color: var(--color-action-light);
}

.w-350px {
    width: 350px;
}

.text-wrap-normal {
    white-space: normal;
}

.h-200px {
    height: 200px;
}

.icon-w-20 {
    width: 20px;
    text-align: center;
}

.fs-90 {
    font-size: 0.9rem;
}

.btn-action-light {
    background-color: var(--color-action-light);
    font-size: 0.85rem;
    border-radius: 4px;
}

.cart-badge {
    bottom: -4px;
    right: -6px;
    background: var(--color-action-light);
    border-radius: 50%;
    font-size: 0.6rem;
    width: 14px;
    height: 14px;
}

.divider-vertical {
    width: 1px;
    height: 20px;
    background-color: #cbd5e1;
}

.fs-95 {
    font-size: 0.95rem;
}

.cursor-pointer-nowrap {
    cursor: pointer;
    white-space: nowrap;
}

.border-primary-light {
    border: 1px solid var(--color-primary) !important;
    border-radius: 3px !important;
}

.up-flight-icon {
    font-size: calc(var(--font-sm) + 1px);
    color: var(--color-grey36);
}

.flight-name {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
}

.selected-flight-list {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    line-height: calc(var(--font-xs) + 1px);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: "Fira Sans", sans-serif;
}

/* Sidebar filter header styles when collapsed */
.offcanvas-body [data-bs-toggle="collapse"].collapsed {
    border-bottom: 1px solid var(--color-primary) !important;
    padding-bottom: 15px !important;
    margin-bottom: 0 !important;
}

.offcanvas-body [data-bs-toggle="collapse"] i.fa-angle-up {
    transition: transform 0.3s ease;
}

.offcanvas-body [data-bs-toggle="collapse"].collapsed i.fa-angle-up {
    transform: rotate(180deg);
}

.fs-85 {
    font-size: 0.85rem;
}

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

.rounded-bottom-4 {
    border-radius: 0 0 4px 4px;
}

.cursor-pointer {
    cursor: pointer;
}

.matrix-labels-col {
    min-width: 130px;
    width: 130px;
    border-color: #cbd5e1 !important;
}

/* Ensure row heights are perfectly synchronized across all independent columns */
.matrix-labels .matrix-cell:nth-child(1),
.matrix-column .matrix-cell:nth-child(1) {
    height: 60px !important;
}

.matrix-labels .matrix-cell:nth-child(2),
.matrix-column .matrix-cell:nth-child(2),
.matrix-labels .matrix-cell:nth-child(3),
.matrix-column .matrix-cell:nth-child(3),
.matrix-labels .matrix-cell:nth-child(4),
.matrix-column .matrix-cell:nth-child(4) {
    height: calc(var(--font-md) * 2 + 8px) !important;
}

.owl-carousel .owl-item img {
    width: 85% !important;
    object-fit: contain;
}

/* Sorting Bar Custom Styles */
.sorting-bar {
    background-color: #f4f6f8;
}

.custom-radio {
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .custom-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-radio .radio-mark {
        height: var(--font-md);
        width: var(--font-md);
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0px 3px 6px #00000059;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

        .custom-radio .radio-mark::after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #b0bec5;
            /* Light gray dot */
            transition: all 0.2s ease;
        }

    .custom-radio input:checked ~ .radio-mark {
        background-color: var(--color-blue);
        box-shadow: none;
    }

.custom-radio-blue input:checked ~ .radio-mark {
    background-color: var(--color-blue);
    box-shadow: none;
}

.custom-radio input:checked ~ .radio-mark::after {
    background: #fff;
    width: 8px;
    height: 8px;
}

.custom-radio-lebal {
    font-size: var(--font-micro) !important;
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

/* Flight Card Styles */
.flight-to-flight-card {
    padding: calc(var(--font-md) + 2px);
    border: 1px solid var(--color-primary);
}

.mb-30 {
    margin-bottom: calc(var(--font-uxs) * 2);
}

.flight-card-logo-col {
    width: 140px;
    flex-shrink: 0;
}

.flight-time-text {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.flight-city-text {
    font-weight: 600;
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    line-height: calc(var(--font-sm) + 1px);
    font-family: "Fira Sans", sans-serif;
}

.flight-duration-text {
    font-size: var(--font-pico);
    font-weight: 600;
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.flight-text-muted {
    font-size: var(--font-pico);
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.-mt-10 {
    margin-top: -5px !important;
}

.flight-dots-divider {
    border-top: 2px dotted #cbd5e1;
    height: 0;
    flex-grow: 1;
}

.flight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.flight-icon-text {
    font-size: var(--font-uxs);
    color: var(--color-primary);
}

.baggage-details {
    font-size: var(--font-pico) !important;
    color: var(--color-grey36) !important;
    font-family: "Fira Sans Condensed", sans-serif;
}

.text-green-500 {
    color: var(--color-green);
}

.badge-emerald {
    background-color: var(--color-green);
    color: #fff;
    padding: 6px 12px;
    font-size: var(--font-pico);
    font-weight: 600;
    border-radius: 0 100px 100px 0;
    font-family: "Fira Sans Condensed", sans-serif;
}

.flight-action-row {
    font-size: var(--font-micro) !important;
    color: var(--color-primary);
    font-family: "Fira Sans", sans-serif;
}

.flight-total-person {
    font-size: var(--font-pico) !important;
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.flight-price-text {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    font-family: "Fira Sans", sans-serif;
}

.flight-circle-info {
    color: var(--color-primary);
    width: var(--font-uxs);
    height: var(--font-uxs);
}

.flight-bottom-btn {
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
}

    .flight-bottom-btn:hover {
        background-color: #e2e8f0;
    }

.flight-bottom-bar {
    background-color: var(--color-white);
    margin-top: 10px;
}

.flight-jet-logo {
    height: calc(var(--font-pico) * 2);
}

.icon-slashed {
    position: relative;
    display: inline-block;
}

    .icon-slashed::after {
        content: '';
        position: absolute;
        top: 50%;
        left: -10%;
        width: 120%;
        height: 1.5px;
        background-color: currentColor;
        transform: translateY(-50%) rotate(45deg);
        transform-origin: center;
    }

/* Custom Tooltipster Theme for Pricing */
.tooltipster-sidetip.tooltipster-custom-pricing .tooltipster-box {
    background: #fff;
    border: 1px solid var(--color-blue);
    border-radius: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: calc(var(--font-sm) + 1px);
}

.tooltip-pricing-header {
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    padding: calc(var(--font-sm) - 1px);
    font-weight: 600;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.tooltip-pricing-title {
    font-size: var(--font-uxs) !important;
    font-weight: 700;
    color: var(--color-grey36);
}

.tooltip-pricing-totals {
    background-color: #F4F6FA;
    border-radius: 3px;
    overflow: hidden;
}

.tooltip-pricing-totals-footer {
    background: var(--color-primary);
    color: #fff;
    padding: 2px;
    font-size: calc(var(--font-xs) + 1px);
}

.tooltipster-sidetip.tooltipster-custom-pricing .tooltipster-content {
    padding: 0;
}

.tooltip-pricing-container {
    min-width: calc(var(--font-md) * 13);
}

/* Flight Details Expanded Classes */
.flight-leg-badge {
    position: absolute;
    top: 10px;
    left: -1px;
    background-color: var(--color-primary);
    color: white;
    font-size: 0.75rem;
    padding: 3px 15px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    font-weight: 600;
    z-index: 2;
}

.flight-logo img {
    height: 35px;
    margin-top: 20px;
}

.flight-vf-code {
    margin-top: var(--font-pico);
    font-weight: 700;
    font-size: var(--font-pico);
    color: var(--color-grey36);
    font-family: "Fira Sans Condensed", sans-serif;
}

.flight-leg-info {
    font-size: var(--font-pico);
    color: var(--color-grey36);
    font-family: "Fira Sans Condensed", sans-serif;
}

    .flight-leg-info .fw-bold {
        font-family: "Fira Sans", sans-serif;
    }

    .flight-leg-info strong {
        font-family: "Fira Sans", sans-serif;
    }

.flight-time {
    font-size: var(--font-micro);
    color: var(--color-grey36);
    font-weight: 500;
    font-family: "Fira Sans", sans-serif;
}

.flight-date {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.flight-city {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    font-weight: 600;
    font-family: "Fira Sans", sans-serif;
}

.flight-details-duration {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    text-align: center;
    font-family: "Fira Sans", sans-serif;
}

.border-color-dark {
    border-color: #050505 !important;
}

.flight-leg-meta {
    font-size: var(--font-micro);
    color: var(--color-grey36);
    font-family: "Fira Sans Condensed", sans-serif;
}

.flight-details-container {
    background-color: #F4F6FA !important;
    padding: var(--font-md);
}

.flight-details-icon {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-primary);
}

.flight-details-time {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    font-family: "Fira Sans Condensed", sans-serif;
}

    .flight-details-time span {
        font-family: "Fira Sans", sans-serif;
    }

/* Flight Accordion Tabs Active State */

.flight-bottom-btn {
    font-size: var(--font-micro);
    color: var(--color-grey36);
    border-top: 2px solid transparent !important;
}

/* Default state (all closed) - look like separate buttons */
.flight-bottom-bar:not(:has(.flight-bottom-btn[aria-expanded="true"])) {
    gap: 10px;
}

    .flight-bottom-bar:not(:has(.flight-bottom-btn[aria-expanded="true"])) .flight-bottom-btn {
        background-color: #F4F6FA;
        border-radius: 4px !important;
    }

/* Expanded state (at least one open) - look like connected tabs */
.flight-bottom-bar:has(.flight-bottom-btn[aria-expanded="true"]) {
    padding: 0;
    gap: 0;
}

    .flight-bottom-bar:has(.flight-bottom-btn[aria-expanded="true"]) .flight-bottom-btn {
        background-color: #ffffff !important;
        border-radius: 0 !important;
        border-top: 2px solid transparent !important;
        font-size: var(--font-micro);
        color: var(--color-grey36);
    }

        .flight-bottom-bar:has(.flight-bottom-btn[aria-expanded="true"]) .flight-bottom-btn[aria-expanded="true"] {
            background-color: #F4F6FA !important;
            font-weight: 600 !important;
        }

.flight-bottom-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.flight-bottom-btn[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* Scalo Section Styles */
.scalo-container {
    height: calc(var(--font-pico) * 3);
    margin-top: -3px;
    margin-bottom: -3px;
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    margin-left: 27%;
    /* justify-content: center; */
    font-family: "Fira Sans", sans-serif;
    width: auto;
}

.scalo-dot {
    width: var(--font-femto);
    height: var(--font-femto);
    border: 2px solid var(--color-action-light);
}

.scalo-dotted-line {
    width: 0;
    border-color: var(--color-action-light) !important;
    border-style: dotted !important;
    border-width: 1px !important;
}

.scalo-lebal {
    font-size: var(--font-uxs);
    font-family: "Fira Sans", sans-serif;
    color: var(--color-action-light) !important;
    line-height: calc(var(--font-xs) + 1px);
    font-weight: 500;
}

.clock-icon {
    font-size: 10px;
    color: var(--color-action-light) !important;
}

.scalo-time {
    font-size: var(--font-uxs);
    font-family: "Fira Sans", sans-serif;
    color: var(--color-action-light) !important;
    line-height: calc(var(--font-xs) + 1px);
}

.text-color-orange {
    color: var(--color-action-light) !important;
}

.scalo-dot-icon {
    font-size: 6px;
}

/* Regole Tariffarie Table */
.flight-table-header {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.table-body {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.warning-text {
    color: var(--color-error);
    font-size: var(--font-pico);
}

/* Tariffe Carousel */
.tariffe-carousel .owl-stage {
    display: flex;
}

.tariffe-carousel .owl-item {
    display: flex;
}

.tariffe-card {
    border: 1px solid #214068 !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.tariffe-carousel .owl-nav button.owl-prev,
.tariffe-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #adb5bd !important;
    font-size: 40px !important;
    border-radius: 50% !important;
    width: calc(var(--font-sm) * 2 + 2px);
    height: calc(var(--font-sm) * 2 + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

    .tariffe-carousel .owl-nav button.owl-prev.disabled,
    .tariffe-carousel .owl-nav button.owl-next.disabled {
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #adb5bd !important;
        box-shadow: none;
        border: 1px solid #f1f1f1 !important;
        cursor: default;
    }

        .tariffe-carousel .owl-nav button.owl-prev.disabled i,
        .tariffe-carousel .owl-nav button.owl-next.disabled i {
            color: #e0e0e0 !important;
        }

.tariffe-carousel .owl-nav button.owl-prev {
    left: -20px;
}

.tariffe-carousel .owl-nav button.owl-next {
    right: -20px;
}

.tariffe-carousel .owl-nav button:hover {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
}

.card-inner-flight-logo {
    max-height: calc(var(--font-sm) + 1px) !important;
}

.airline-price {
    font-size: calc(var(--font-sm) - 1px);
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: start;
    font-family: "Fira Sans", sans-serif;
}

.info-icon {
    font-size: var(--font-uxs);
}

.airline-class {
    font-size: var(--font-micro);
    color: var(--color-grey36);
    display: flex;
    align-items: center;
    font-family: "Fira Sans Condensed", sans-serif;
}

    .airline-class strong {
        font-family: "Fira Sans", sans-serif;
    }

.airlines-list {
    font-family: "Fira Sans", sans-serif;
}

.list-unstyled {
    font-size: var(--font-micro);
    color: var(--color-primary);
    padding-left: 0;
    font-family: "Fira Sans Condensed", sans-serif;
}

.airlines-list-icon {
    font-size: calc(var(--font-md) - 1px);
}

.vola-link {
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-micro);
    color: var(--color-grey36);
    font-weight: 400;
}

/* Custom Dual Range Slider */
.volaeasy-dual-slider {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 15px;
    margin-bottom: 5px;
}

    .volaeasy-dual-slider .slider-track {
        position: absolute;
        width: 100%;
        height: 6px;
        background-color: #e9ecef;
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .volaeasy-dual-slider .slider-progress {
        position: absolute;
        height: 6px;
        background-color: var(--color-primary);
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .volaeasy-dual-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 6px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        pointer-events: none;
        z-index: 3;
        margin: 0;
    }

        .volaeasy-dual-slider input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: var(--color-primary);
            cursor: pointer;
            pointer-events: auto;
            border: 3px solid white;
        }

        .volaeasy-dual-slider input[type="range"]::-moz-range-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: var(--color-primary);
            cursor: pointer;
            pointer-events: auto;
            border: 3px solid white;
        }

.btn:disabled {
    border: 0;
    background: var(--color-grey1A);
}

.btn-load-more {
    border: 1px solid #8e9db0;
    color: var(--color-primary);
    background-color: white;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

    .btn-load-more:hover {
        background-color: var(--color-primary);
        color: white;
    }

.text-fira-sans-condensed {
    font-family: "Fira Sans Condensed", sans-serif;
}

.min-val-display,
.max-val-display {
    font-family: "Fira Sans", sans-serif;
}

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

.cart-flight {
    padding: calc(var(--font-xs) * 2);
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    border-radius: 4px;
}

.card-price {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: calc(var(--font-md) * 2 + 8px) !important;
    background: var(--color-white);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 4px;
    opacity: 1;
    color: var(--color-primary);
    font-size: calc(var(--font-uxs) * 2);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 20px;
    border: transparent;
    min-width: 240px;
    font-family: "Fira Sans", sans-serif;
}

.modal-content {
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
}

.model-details-text {
    font-size: calc(var(--font-uxs) * 2);
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

    .model-details-text i {
        transform: rotate(-90deg);
        font-size: calc(var(--font-pico) * 2);
    }

.cart-container {
    margin: calc(var(--font-xs) * 2) 0;
    background: var(--color-white);
    padding: calc(var(--font-pico) * 2);
    border-radius: 3px;
}

.bg-color-light {
    background-color: #F4F6FA;
}

.paragraph-m {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: 500;
    color: var(--color-grey36);
}

.view-flight-services {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    font-size: var(--font-micro);
    color: var(--color-grey36);
    margin-bottom: 0;
    margin-top: 8px;
    gap: var(--font-femto);
}

    .view-flight-services i {
        font-weight: normal;
        font-size: calc(var(--font-sm) + 1px);
    }

/* Flight Service Cards in Cart */
.flight-service-card {
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 5px;
    background-color: var(--color-white);
    font-family: "Fira Sans", sans-serif;
}

    .flight-service-card:last-child {
        margin-bottom: 0;
    }

.flight-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

    .flight-service-header i {
        font-size: calc(var(--font-micro) + 1px);
        color: var(--color-grey36);
    }

.flight-service-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--color-grey36);
    font-size: calc(var(--font-micro) + 1px);
}

.flight-service-status {
    font-size: var(--font-femto);
    color: var(--color-grey36);
    font-weight: 400;
}

.flight-service-desc {
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    margin-bottom: 0;
}

.tooltip_services_content {
    width: 350px;
    padding: calc(var(--font-md) + 1px) !important;
}

.service-tooltip-title {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-weight: 500;
    margin-bottom: var(--font-md);
}

.service-tooltip-item-title {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-weight: 500;
    border-bottom: 1px solid var(--color-primary);
    padding: 0.1px 0;
    margin-bottom: var(--font-femto);
    font-family: "Fira Sans Condensed", sans-serif !important;
}

.service-tooltip-item-content {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-family: "Fira Sans Condensed", sans-serif !important;
    font-weight: 400 !important;
}

/* "Non incluso" State */
.flight-service-card.service-not-included {
    border-color: #f15b67;
}

    .flight-service-card.service-not-included .flight-service-title,
    .flight-service-card.service-not-included .flight-service-desc {
        color: #8c98a4;
    }

    .flight-service-card.service-not-included .flight-service-status {
        color: #f15b67;
    }

    .flight-service-card.service-not-included .flight-service-title i {
        color: #aeb5bc;
    }

/* Custom Tooltipster Theme for Services */
.tooltipster-sidetip.tooltipster-custom-services .tooltipster-box {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
}

.tooltipster-sidetip.tooltipster-custom-services .tooltipster-content {
    padding: 0;
    color: var(--color-primary);
    font-family: "Fira Sans Condensed", sans-serif;
}

.confirm-flight-details {
    font-size: calc(var(--font-sm) - 1px);
    font-weight: 500;
    color: var(--color-action-light);
    display: flex;
    align-items: start;
    margin-top: calc(var(--font-md) + 4px);
    text-decoration: underline;
    margin-bottom: 0;
}

/* NDC Offer Warning */
.ndc-offer-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-error);
    margin-top: calc(var(--font-md) + 5px);
    width: 100%;
}

.ndc-warning-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: calc(var(--font-sm) * 2 + 2px);
    height: calc(var(--font-sm) * 2 + 2px);
    border: 1px solid var(--color-error);
    border-radius: 50%;
    color: var(--color-error);
    font-size: calc(var(--font-uxs) * 2);
    font-weight: 500;
    flex-shrink: 0;
}

.ndc-warning-text {
    font-size: calc(var(--font-uxs));
    font-weight: 500;
    line-height: 1.3;
    font-family: "Fira Sans", sans-serif;
}

.delete-icon-circle {
    min-width: calc(var(--font-sm) * 2 + 2px);
    height: calc(var(--font-sm) * 2 + 2px);
    border: 1px solid var(--color-action-light);
    color: var(--color-action-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-sm) + 1px);
    transition: all 0.2s ease-in-out;
}

    .delete-icon-circle:hover {
        background-color: var(--color-action-light);
        color: var(--color-white);
    }

.back-page {
    display: flex;
    align-items: center;
    font-size: var(--font-micro);
    text-decoration: none;
    color: var(--color-white);
    text-transform: uppercase;
    gap: 4px;
}

    .back-page i {
        font-size: calc(var(--font-uxs) * 2);
        width: 20px;
    }

.back-page-primary,
.back-page-primary i {
    color: var(--color-primary) !important;
}

/* Mobile: top border, no left border */
.border-responsive {
    border-top: 1px solid var(--color-primary) !important;
    border-left: 0 !important;
}

/* Desktop (md+): left border, no top border */
@media (min-width: 768px) {
    .border-responsive {
        border-left: 1px solid var(--color-primary) !important;
        border-top: 0 !important;
    }
}

.checkout-card {
    padding: var(--font-nano) var(--font-sm) calc(var(--font-nano) * 3) var(--font-sm);
    background: linear-gradient(to bottom, var(--color-primary) 0%, #006ebc 100%);
    border-radius: 4px;
}

@media (min-width: 768px) {
    .checkout-card {
        padding: calc(var(--font-md) * 2) calc(var(--font-md) * 5 + 5px) calc(var(--font-md) * 2) calc(var(--font-md) * 5 + 5px);
    }
}

.responsive-total-border {
    border-left: 0 !important;
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

@media (min-width: 768px) {
    .responsive-total-border {
        border-top: 0 !important;
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}

.responsive-border-lg {
    border-left: 0 !important;
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

@media (min-width: 992px) {
    .responsive-border-lg {
        border-top: 0 !important;
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}

.flight-tab-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(var(--font-sm) + 1px);
    background: var(--color-white);
    padding: var(--font-femto);
    color: var(--color-grey36);
}

/* Volaeasy Search Input Component */
.volaeasy-search-input {
    display: flex;
    height: calc(var(--font-uxs) * 4);
    width: 100%;
}

@media (min-width: 768px) {
    .volaeasy-search-input {
        width: auto;
    }
}

.volaeasy-search-input input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 10px 15px;
    outline: none;
    font-size: var(--font-sm);
    color: var(--color-primary);
}

    .volaeasy-search-input input::placeholder {
        color: #b3b3b3;
        font-weight: 400;
    }

.volaeasy-search-input .search-btn {
    background-color: var(--color-grey36);
    color: var(--color-white);
    border: none;
    border-radius: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: calc(var(--font-uxs) * 4);
}

    .volaeasy-search-input .search-btn:hover {
        background-color: #1a3355;
    }


.volaeasy-search-input .fa-user-magnifying-glass {
    position: absolute;
    font-size: 1.9em;
    background-color: var(--color-grey36);
    padding: 1px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.volaeasy-search-input .search-btn:hover .fa-user-magnifying-glass {
    background-color: #1a3355;
}

.passeggeri-details {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: 500;
    color: var(--color-white);
    width: 100%;
}

.w-215 {
    width: 215px;
}

/* No icon utility for inputs */
.volaeasy-input.no-icon label,
.volaeasy-input-dropdown.no-icon.show label,
.volaeasy-input-dropdown.no-icon.has-value label {
    left: 18px !important;
    margin-left: 0 !important;
}

.volaeasy-input.no-icon input {
    padding-left: 18px !important;
}

.no-flight-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--font-md) * 5) 0;
}

.no-result-heading {
    font-size: calc(var(--font-sm) * 2 + 2px);
    font-weight: bold;
    color: var(--color-grey36);
    margin-bottom: 0;
}

.no-flight-icon {
    font-size: calc(var(--font-md) * 2 + 8px);
    color: var(--color-primary);
    text-align: center;
}

.no-flight-disc {
    font-size: calc(var(--font-femto) * 2);
    font-weight: 400;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0;
    font-family: "Fira Sans Condensed", sans-serif;
}

.list-height {
    max-height: 350px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.btn-light-orange {
    background: #FFF0E0 !important;
}

/* Pagamento Specific Classes */

.vola-cart-icon-lg {
    font-size: 2.2rem;
}

.vola-totale-label {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: 600;
    color: var(--color-grey36);
    font-family: "Fira Sans", sans-serif;
}

.vola-totale-price {
    font-size: calc(var(--font-uxs) * 2);
    font-weight: 700;
    color: var(--color-primary);
    font-family: "Fira Sans", sans-serif;
}

.radio-text {
    font-size: calc(var(--font-sm) - 1px) !important;
    font-weight: 600;
    text-wrap: wrap;
}

.radio-img {
    width: 92px;
    height: 53px;
    object-fit: cover;
}

.pagamento-box {
    background: var(--color-white);
    padding: var(--font-nano) var(--font-sm) calc(var(--font-nano) * 3) var(--font-sm);
    box-shadow: 0px 3px 6px #00000026;
    border-radius: 3px;
    padding: calc(var(--font-uxs) * 2);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.conferma-card {
    background: var(--color-white);
    padding: calc(var(--font-sm) * 3) calc(var(--font-sm) * 3) calc(var(--font-nano) * 3) calc(var(--font-sm) * 3);
    box-shadow: 0px 3px 6px #00000026;
    border-radius: 3px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.conferma-heading {
    font-weight: bold;
    color: var(--color-green);
    font-size: calc(var(--font-md) + 1px);
    display: flex;
    gap: var(--font-femto);
    justify-content: center;
    align-items: center;
}

.your-booking {
    font-size: calc(var(--font-xs) + 1px);
    font-weight: bold;
    color: var(--color-primary);
}

.booking-number {
    font-size: calc(var(--font-uxs) * 2);
    color: var(--color-blue);
    line-height: 1;
    margin-bottom: var(--font-femto);
    margin-top: var(--font-femto);
    font-family: "Fira Sans", sans-serif;
}

.booking-pnr {
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
}

.download-booking-details {
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    text-decoration: underline;
    cursor: pointer;
}

.tax-included {
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-micro);
    color: var(--color-grey36);
}

.step-counter-error {
    background-color: var(--color-error) !important;
}

.step-counter-sucess {
    background-color: var(--color-green) !important;
}

.conferma-heading-error {
    font-weight: bold;
    color: var(--color-error);
    font-size: calc(var(--font-xs));
    display: flex;
    gap: var(--font-femto);
    justify-content: center;
    align-items: center;
}

    .conferma-heading-error div {
        width: calc(var(--font-uxs) * 2);
        height: calc(var(--font-uxs) * 2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-error);
        color: var(--color-white);
    }

.not-successful {
    font-family: "Fira Sans", sans-serif;
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 1px);
    font-weight: 600;
}

.changing-search {
    font-family: "Fira Sans", sans-serif;
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 1px);
}

.input-with-radio {
    min-height: calc(var(--font-md) * 4 - 4px);
    background-color: var(--color-white);
    border-radius: 2px;
    padding: 5px var(--font-pico);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-family: "Fira Sans Condensed", sans-serif;
}

.label_question {
    font-family: "Fira Sans Condensed", sans-serif;
    color: var(--color-grey36);
    font-size: calc(var(--font-uxs) + 1px);
    margin-bottom: 0;
}

.volaeasy-file-upload {
    display: flex;
    height: calc(var(--font-md) * 4 - 4px);
    background-color: var(--color-white);
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    font-family: "Fira Sans Condensed", sans-serif;
    cursor: pointer;
}

    .volaeasy-file-upload .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

.volaeasy-file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
}

    .volaeasy-file-info .file-title {
        font-size: var(--font-pico);
        color: var(--color-primary);
        font-weight: 500;
        margin-bottom: 2px;
    }

    .volaeasy-file-info .file-placeholder {
        font-size: calc(var(--font-xs) + 1px);
        color: #b0bec5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

.volaeasy-file-btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-width: calc(var(--font-md)*3);
}

    .volaeasy-file-btn i {
        font-size: calc(var(--font-sm) + 2px);
        margin-bottom: 3px;
    }

    .volaeasy-file-btn span {
        font-size: var(--font-pico);
        font-weight: 400;
        text-align: center;
        line-height: var(--font-micro);
    }

/* Captcha Component */
.captcha-container {
    height: 50px;
    background-color: var(--color-white);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    width: 100%;
    max-width: 320px;
}

.captcha-image {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    min-width: 100px;
}

    .captcha-image img {
        height: 38px;
        object-fit: contain;
    }

.captcha-input-wrapper {
    flex: 1;
    background-color: #eaf5fb;
    /* Very light blue matching design */
}

.captcha-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 15px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: var(--font-xs);
    color: #1f2b3d;
    outline: none;
}

    .captcha-input::placeholder {
        color: #b0bec5;
    }

.captcha-refresh {
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    cursor: pointer;
    transition: opacity 0.2s;
}

    .captcha-refresh:hover {
        opacity: 0.8;
    }

    .captcha-refresh i {
        color: var(--color-blue);
        font-size: calc(var(--font-md) + 4px);
    }

.pas-service-title,
.pas-add-service-title {
    font-size: var(--font-uxs);
    line-height: var(--font-uxs);
    border-bottom: 1px solid var(--color-blue);
    color: var(--color-blue);
    font-weight: 400;
    padding: 5px 0;
    text-transform: none;
    letter-spacing: normal;
}

.pas-select {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 8px;
}

.fl-seg {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 8px;
}

.seg-dtls {
    font-size: var(--font-uxs);
}

.seg-dtl {
    flex: 0 0 40%;
    max-width: 40%;
    font-size: 11px;
}

.pas-ser-selection {
    padding: 16px 0;
}

.pas-select {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 8px;
}

.list-unstyled {
    list-style: none;
}

.pas-ser-selection ul li {
    padding-bottom: 12px;
}

.fl-seg {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 8px;
}

.fl-seg-title {
    font-weight: 700;
}

    .fl-seg-title span {
        color: var(--color-blue);
    }

.pas-add-service {
    padding: var(--font-sm);
    border-radius: var(--radius-inner);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
}

.passenger-service-row {
    padding: var(--font-sm);
    border-radius: var(--radius-inner);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
    margin-bottom: var(--font-femto);
}

.pas-service-title,
.pas-add-service-title {
    font-size: var(--font-uxs);
    line-height: var(--font-uxs);
    border-color: var(--color-blue);
    color: var(--color-blue);
    font-weight: 400;
    /* padding: .5rem .5rem; */
    text-transform: none;
    letter-spacing: normal;
}

.pas-ser-name {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 8px;
}

.pas-ser-code {
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 8px;
}

.pas-ser-seg {
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 8px;
}

.pas-ser-price {
    flex: 0 0 10%;
    max-width: 10%;
    text-align: right;
}

.pas-serv-row {
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
}

.pas-add-service-detail {
    font-size: var(--font-nano);
}

.pas-add-detial {
    box-shadow: none;
    padding: var(--font-sm);
    border: solid 1px var(--color-grey93);
    border-radius: var(--radius-inner);
}

.pas-ser-seg .seg-name-short {
    margin-right: 8px;
}

.seg-name-short,
.pas-name-short {
    border: 1px solid #707070;
    width: 19px;
    display: inline-block;
    border-radius: 3px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 500;
    color: #707070;
    text-align: center;
}

.pas-add-right {
    width: 100%;
}

.pas-seg-con {
    justify-content: flex-end;
    padding-bottom: 11px;
    align-items: center;
}

.pas-short {
    flex: 0 0 24px;
    max-width: 24px;
    text-align: center;
}

.seg-short {
    flex: 0 0 32px;
    max-width: 32px;
    text-align: center;
}

.seg-name-short,
.pas-name-short {
    border: 1px solid #707070;
    width: 19px;
    display: inline-block;
    border-radius: 3px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 500;
    color: #707070;
    text-align: center;
}

.pas-price {
    flex: 0 0 24px;
    max-width: 24px;
    text-align: center;
}

.service-name {
    color: var(--color-blue);
    font-weight: 400;
}

.service-name {
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pas-add-service-detail .pas-ser-code {
    font-weight: 500;
    text-transform: uppercase;
}

.pas-seg-select {
    justify-content: flex-end;
    padding-bottom: 16px;
    align-items: center;
}

.pas-name-short {
    color: rgba(13, 138, 228, 0.8);
    border-color: rgba(13, 138, 228, 0.8);
}

.seg-name-short,
.pas-name-short {
    border: 1px solid #707070;
    width: 19px;
    display: inline-block;
    border-radius: 3px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 500;
    color: #707070;
    text-align: center;
}

.pas-seg-select select.form-select {
    margin-left: 12px;
    width: 300px;
}


.form-select {
    border-color: var(--color-grey88);
    padding: var(--font-uxs) calc(var(--font-sm) * 0.5);
    color: var(--color-grey22);
    font-size: var(--font-micro);
    line-height: var(--font-micro);
    border-radius: var(--radius-outer);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 50px;
    box-shadow: unset;
    border-style: solid;
    border-width: 1px;
}

.pas-name-short {
    color: rgba(13, 138, 228, 0.8);
    border-color: rgba(13, 138, 228, 0.8);
}

.wc-panel-close:hover {
    opacity: 0.8;
}

.vola-icon-crossed {
    position: relative;
    display: inline-block;
    color: #adb5bd !important;
}

    .vola-icon-crossed::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120%;
        height: 2px;
        background-color: red;
        transform: translate(-50%, -50%) rotate(45deg);
        border-radius: 1px;
    }

.fs-18 {
    font-size: calc(var(--font-xs) + 1px);
}

.fs-24 {
    font-size: calc(var(--font-pico) * 2);
}

/* wc css */
.head-fix {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Search page: leave room under the widget for the open guests panel */
.wc-search-sec {
    padding-bottom: calc(var(--font-md) * 18);
}

@media (max-width: 991px) {
    .wc-search-sec {
        padding-bottom: calc(var(--font-md) * 6);
    }
}

/* Hotel search field icons (XD: Font Awesome 7 Pro Solid, 25px) */
.wc-hs-icon {
    font-size: 25px;
}

.nine-link {
    color: var(--color-white);
    font-size: var(--font-uxs);
    font-weight: 500;
    text-decoration: underline;
}

    .nine-link:hover {
        color: var(--color-white);
    }

.datepicker-trigger {
    pointer-events: auto;
    cursor: pointer;
}

.guest-toggle {
    width: 100%;
    height: calc(var(--font-md) * 4 - 4px);
    border: 2px solid transparent;
    border-radius: 2px;
    background: var(--color-white);
    box-shadow: 0 2px 5px var(--color-grey26);
    color: var(--color-primary);
    font-size: var(--font-uxs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--font-femto) - 3px);
    padding: 0 8px;
    transition: 0.2s;
}

    .guest-toggle:hover {
        border-color: var(--color-action-light);
    }

.guest-part {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

    .guest-part i {
        font-size: 22px;
        flex-shrink: 0;
    }

.guest-num {
    font-weight: 600;
    flex-shrink: 0;
}

.guest-chevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-black);
}


/* Labels stay visible in both states; they truncate before the value does */
.guest-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-toggle[aria-expanded="true"] {
    border-radius: 2px 2px 0 0;
}

    .guest-toggle[aria-expanded="true"] .guest-chevron {
        transform: rotate(180deg);
    }

.guest-menu {
    width: 100%;
    border: none;
    border-radius: 0 0 var(--radius-inner) var(--radius-inner);
    box-shadow: 0 5px 15px var(--color-grey29);
    padding: var(--font-sm) calc(var(--font-xs) + 1px);
}

.room-box {
    padding-bottom: var(--font-uxs);
    margin-bottom: var(--font-uxs);
    border-bottom: 1px solid var(--color-primary);
}

    .room-box:has(.child-item) {
        border-bottom: none;
    }

.room-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: calc(var(--font-femto) - 2px);
    margin-bottom: var(--font-uxs);
}

.room-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-del-room {
    border: none;
    background: none;
    color: var(--color-action-light);
    font-size: var(--font-uxs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: calc(var(--font-femto) - 3px);
    padding: 0;
}

    .btn-del-room:hover {
        color: var(--color-action);
    }

    .btn-del-room.is-off {
        color: var(--color-grey59);
        pointer-events: none;
    }

.cnt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--font-femto) - 2px) 0;
}

.cnt-lbl {
    color: var(--color-primary);
    font-size: var(--font-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cnt-ctrl {
    display: flex;
    align-items: center;
    gap: var(--font-pico);
}

.btn-cnt {
    width: calc(var(--font-uxs) * 2);
    height: calc(var(--font-uxs) * 2);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-nano);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

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

.cnt-num {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-xs);
    min-width: var(--font-uxs);
    text-align: center;
}

.child-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-uxs);
    padding-top: calc(var(--font-femto) - 2px);
}

.child-item {
    flex: 1 1 45%;
    min-width: 0;
}

.child-lbl {
    display: flex;
    align-items: center;
    gap: calc(var(--font-femto) - 3px);
    color: var(--color-primary);
    font-size: var(--font-micro);
    font-weight: 700;
    margin-bottom: calc(var(--font-femto) - 3px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.age-dd {
    position: relative;
    display: block;
}

.age-btn {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-primary);
    background: none;
    color: var(--color-primary);
    font-size: var(--font-xs);
    padding: calc(var(--font-femto) - 3px) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--font-femto);
}

    .age-btn:focus {
        outline: none;
        border-bottom-color: var(--color-blue);
    }

    .age-btn i {
        font-size: var(--font-uxs);
        transition: transform 0.3s ease;
    }

.age-dd.open .age-btn i {
    transform: rotate(180deg);
}

.age-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 100%;
    min-width: 120px;
    max-height: 180px;
    overflow-y: auto;
    margin: 0;
    padding: calc(var(--font-femto) - 2px) 0;
    list-style: none;
    background: var(--color-white);
    box-shadow: 0 5px 15px var(--color-grey29);
    border-radius: var(--radius-inner);
}

.age-dd.open .age-list {
    display: block;
}

.age-list li {
    padding: calc(var(--font-femto) - 2px) var(--font-uxs);
    color: var(--color-primary);
    font-size: var(--font-xs);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .age-list li:hover {
        background: var(--color-grey1A);
    }

.guest-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--font-femto);
}

.btn-add-room {
    border: none;
    background: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-uxs);
    display: flex;
    align-items: center;
    gap: calc(var(--font-femto) - 2px);
    padding: 0;
    text-align: left;
}

    .btn-add-room:hover {
        color: var(--color-blue);
    }

    .btn-add-room i {
        font-size: var(--font-sm);
    }

.guest-foot .vola-btn {
    height: calc(var(--font-md) * 2) !important;
    padding: 0 calc(var(--font-md) + 2px);
    min-width: auto;
}

.bell-link {
    color: var(--color-action-light);
    text-decoration: none;
}

.menu-350 {
    width: 350px;
}

.cart-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    border: 1px solid var(--color-action-light);
    background: var(--color-white);
    border-radius: 50%;
    font-size: var(--font-femto) !important;
    width: 15px;
    height: 15px;
    color: var(--color-action-light) !important;
    font-family: "Fira Sans Condensed", sans-serif !important;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 11px !important;
}

.wc-dest-input::placeholder {
    color: transparent;
}

.wc-dest-input:focus::placeholder {
    color: var(--color-grey59);
}

.wc-panel-close {
    position: absolute;
    top: var(--font-uxs);
    right: var(--font-uxs);
    border: none;
    background: none;
    color: var(--color-white);
    font-size: calc(var(--font-md) + 2px);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

.wc-map {
    position: relative;
    border: 1px solid var(--color-grey26);
    border-radius: var(--radius-inner);
    overflow: hidden;
}

.wc-map-img {
    width: 100%;
    display: block;
}

.wc-map-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-inner);
    font-size: var(--font-uxs);
    font-weight: 600;
    padding: calc(var(--font-femto) - 2px) calc(var(--font-md) + 6px);
}

    .wc-map-btn:hover {
        background: var(--color-blueA8);
    }

.wc-strip {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-inner);
    background: var(--color-white);
    padding: var(--font-pico) var(--font-sm);
    color: var(--color-primary);
}

.wc-strip-title {
    font-weight: 700;
    font-size: var(--font-uxs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-strip-sub {
    font-size: var(--font-uxs);
}

.wc-hcard {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-inner);
    overflow: hidden;
    padding: 20px;
}

    .wc-hcard > .row.p-3 {
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    .wc-hcard .collapse > .p-3 {
        padding: 20px !important;
    }

.wc-himg {
    position: relative;
    height: 220px;
    width: 100%;
    background-color: #f4f5f7;
    overflow: hidden;
    display: block !important;
}

    .wc-himg img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: fill !important;
        object-position: center !important;
        display: block !important;
    }

.wc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--font-md) * 2 - 4px);
    height: calc(var(--font-md) * 2 - 4px);
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-grey59);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
}

.wc-arrow-left {
    left: var(--font-femto);
}

.wc-arrow-right {
    right: var(--font-femto);
}

.wc-arrow:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.wc-stars {
    color: #F7DB08;
    font-size: var(--font-uxs);
    margin-bottom: calc(var(--font-femto) - 3px);
}

.wc-hname {
    color: var(--color-grey36);
    font-weight: 700;
    font-size: var(--font-sm);
    margin-bottom: calc(var(--font-femto) - 3px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .wc-hname {
        white-space: normal;
    }
}

.wc-map-link {
    color: var(--color-blue);
    font-size: var(--font-uxs);
    text-decoration: underline;
}

.wc-haddr,
.wc-hrate {
    color: var(--color-grey36);
    font-size: var(--font-uxs);
}

.wc-hside {
    color: var(--color-grey36);
}

@media (min-width: 768px) {
    .wc-hside {
        border-left: 1px solid var(--color-grey26);
    }
}

.wc-hstay {
    font-size: var(--font-micro);
}

.wc-hside-hr {
    border-color: var(--color-grey36);
    margin: var(--font-pico) 0;
}

.wc-hfrom {
    font-size: var(--font-micro);
}

.wc-hprice {
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 4px);
    font-weight: 700;
}

.wc-info-ico {
    font-size: var(--font-nano);
    vertical-align: super;
    position: relative;
    cursor: pointer;
}

.wc-detail-btn {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-inner);
    font-size: var(--font-micro);
    font-weight: 600;
    padding: var(--font-pico) var(--font-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
    text-decoration: none;
}

    .wc-detail-btn:hover {
        background: var(--color-blueA8);
        color: var(--color-white);
    }

.wc-showrooms {
    width: 100%;
    border: none;
    background: var(--color-band);
    color: var(--color-primary);
    font-size: var(--font-uxs);
    font-weight: 500;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--font-femto);
}

    .wc-showrooms:hover {
        background: #e3e8ee;
    }

    .wc-showrooms .wc-hide-lbl,
    .wc-showrooms.collapsed .wc-show-lbl {
        display: inline;
    }

    .wc-showrooms .wc-show-lbl,
    .wc-showrooms.collapsed .wc-hide-lbl {
        display: none;
    }

    .wc-showrooms i {
        transition: transform 0.3s ease;
    }

    .wc-showrooms:not(.collapsed) i {
        transform: rotate(180deg);
    }

.wc-hcard .collapse {
    background: #f4f6fa;
}

.wc-best-banner {
    background: var(--color-green);
    color: var(--color-white);
    font-size: var(--font-uxs);
    font-weight: 700;
    border-radius: 3px;
    padding: calc(var(--font-femto) - 3px) var(--font-uxs);
    margin-bottom: var(--font-uxs);
}

.wc-rooms-title {
    color: var(--color-grey36);
    font-weight: 700;
    font-size: var(--font-xs);
    margin-bottom: var(--font-uxs);
}

.wc-room {
    border: 1px solid var(--color-grey26);
    border-radius: 3px;
    background: var(--color-white);
    height: 100%;
    padding: var(--font-uxs) var(--font-sm);
}

    .wc-room.is-best {
        border-color: var(--color-green);
    }

.wc-red {
    color: var(--color-error);
}

.wc-rprice {
    border: 1px solid var(--color-grey26);
    border-radius: 3px;
    background: var(--color-white);
    height: 100%;
    padding: var(--font-uxs);
}

    .wc-rprice.is-best {
        border-color: var(--color-green);
    }

.wc-rprice-val {
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 2px);
    font-weight: 700;
}

.wc-quote-link {
    color: var(--color-blue);
    font-size: var(--font-micro);
}

.wc-cart-btn {
    background: var(--color-action-light);
    color: var(--color-white);
    border: none;
    border-radius: 3px;
    width: calc(var(--font-md) * 2 + 4px);
    height: calc(var(--font-md) * 2 - 2px);
    font-size: var(--font-sm);
    flex-shrink: 0;
}

    .wc-cart-btn:hover {
        background: var(--color-action);
    }

.wc-rprice-hr {
    border-color: var(--color-grey36);
    margin: var(--font-pico) 0;
}

.wc-pkg-link {
    color: var(--color-grey36);
    font-size: var(--font-micro);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.wc-pkg-code {
    color: var(--color-grey36);
    font-size: var(--font-nano);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.wc-flt-select {
    border: none;
    color: var(--color-primary);
    font-size: var(--font-uxs);
    padding: 0;
    box-shadow: none;
}

    .wc-flt-select:focus {
        box-shadow: none;
    }

.wc-flt-search {
    color: var(--color-primary);
}

    .wc-flt-search input {
        border: none;
        outline: none;
        width: 100%;
        min-width: 0;
        color: var(--color-primary);
        font-size: var(--font-uxs);
    }

        .wc-flt-search input::placeholder {
            color: var(--color-primary);
        }

    .wc-flt-search i {
        color: var(--color-primary);
        font-size: var(--font-xs);
        flex-shrink: 0;
    }

.wc-star {
    border: none;
    background: none;
    color: #f5c518;
    font-size: calc(var(--font-md) + 2px);
    padding: 0;
}

.wc-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 32, 54, 0.45);
    z-index: 1040;
}

    .wc-backdrop.show {
        display: block;
    }

.wc-raised {
    position: relative;
    z-index: 1050;
}

.wc-qmodal {
    position: relative;
    border: none;
    border-radius: var(--radius-inner);
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-blue) 100%);
    padding: calc(var(--font-md) * 2) calc(var(--font-md) * 2 + 8px);
}

.wc-q-title {
    font-weight: 700;
    margin-bottom: var(--font-pico);
}

.wc-q-sub {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: calc(var(--font-femto) - 2px);
}

.wc-q-dates {
    font-size: var(--font-uxs);
}

.wc-qcard {
    background: var(--color-white);
    border-radius: 3px;
    padding: var(--font-sm);
}

    .wc-qcard .flex-grow-1 {
        min-width: 0;
    }

        .wc-qcard .flex-grow-1 > .d-flex > div:first-child {
            min-width: 0;
            flex: 1;
        }

.wc-q-side {
    border-left: 1px solid var(--color-grey26);
    padding-left: var(--font-sm);
    flex-shrink: 0;
    min-width: 150px;
    align-self: stretch;
}

@media (max-width: 767px) {

    /* Force the whole card to stack in one column rather than relying on
       flex-wrap, so info/price never fight for width on narrow screens */
    .wc-qcard > .d-flex {
        flex-direction: column;
    }

    /* Name/address vs the hotel-chain badge stack too, instead of squeezing */
    .wc-qcard .flex-grow-1 > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--font-femto);
    }

    .wc-q-logo {
        align-self: flex-start;
    }

    .wc-q-side {
        border-left: none;
        border-top: 1px solid var(--color-grey26);
        padding-left: 0;
        padding-top: var(--font-sm);
        min-width: 100%;
        text-align: left;
    }
}

.wc-q-room {
    border: none;
    padding: 0;
    height: auto;
}

/* Force stacked layout for quote modal room info on mobile and tablet */
@media (max-width: 991px) {
    .wc-q-room .wc-room-head {
        display: none !important;
    }

    .wc-q-room .wc-room-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: var(--font-xs) !important;
        padding: var(--font-sm) 0 !important;
        text-align: left !important;
        border: none !important;
    }

        .wc-q-room .wc-room-row > span {
            display: flex !important;
            align-items: center !important;
            gap: var(--font-uxs) !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
        }

        .wc-q-room .wc-room-row i.d-md-none {
            display: inline-block !important;
            min-width: 35px !important;
            text-align: center !important;
        }

        .wc-q-room .wc-room-row span.d-md-none {
            display: inline-flex !important;
            min-width: 35px !important;
            justify-content: center !important;
        }
}

.wc-qf {
    background: var(--color-white);
    border-radius: 2px;
    padding: calc(var(--font-femto) - 2px) var(--font-uxs);
}

    .wc-qf label {
        display: block;
        color: var(--color-blue);
        font-size: var(--font-pico);
        margin-bottom: 1px;
    }

    .wc-qf input,
    .wc-qf textarea {
        display: block;
        width: 100%;
        border: none;
        outline: none;
        resize: none;
        color: var(--color-primary);
        font-size: var(--font-xs);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wc-qf textarea {
        white-space: normal;
    }

.wc-q-back {
    border: none;
    background: none;
    color: var(--color-white);
    font-size: var(--font-uxs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
    padding: 0;
}

.wc-q-logo {
    color: #9b8f8f;
    font-size: var(--font-micro);
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

    .wc-q-logo span {
        font-size: var(--font-femto);
        letter-spacing: 4px;
    }

.wc-rooms-scroll {
    max-height: 480px;
    overflow-y: auto;
    padding-right: var(--font-femto);
    margin-bottom: var(--font-uxs);
}

.wc-dtitle {
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 6px);
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-share {
    color: var(--color-primary);
    font-size: var(--font-uxs);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--font-femto) - 3px);
}

    .wc-share i {
        color: var(--color-blue);
        font-size: var(--font-sm);
    }

.wc-gal {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 190px);
    gap: var(--font-femto);
}

.wc-gal-main {
    grid-row: span 2;
}

    .wc-gal-main img,
    .wc-gal-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.wc-gal-thumb {
    position: relative;
}

.wc-gal-more {
    position: absolute;
    right: var(--font-pico);
    bottom: var(--font-pico);
    width: calc(var(--font-md) * 2 + 4px);
    height: calc(var(--font-md) * 2 + 4px);
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-grey36);
    font-size: var(--font-uxs);
    font-weight: 600;
}

.wc-dtabs {
    border-bottom: 1px solid var(--color-grey26);
    gap: 0;
}

.wc-dtab {
    display: block;
    padding: var(--font-pico) calc(var(--font-md) * 2);
    color: var(--color-grey36);
    font-size: var(--font-uxs);
    text-decoration: none;
}

    .wc-dtab.active {
        background: var(--color-primary);
        color: var(--color-white);
        font-weight: 600;
    }

.wc-panel {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    padding: calc(var(--font-md) + 6px);
    color: var(--color-grey36);
    font-size: var(--font-uxs);
}

.wc-hlogo {
    color: #9b8f8f;
    font-size: var(--font-md);
    letter-spacing: 3px;
    line-height: 1.5;
}

    .wc-hlogo span {
        font-size: var(--font-nano);
        letter-spacing: 5px;
    }

.wc-sec-title {
    color: var(--color-grey36);
    font-size: calc(var(--font-md) + 2px);
    font-weight: 700;
    margin: 0;
}

.wc-top-link {
    color: var(--color-primary);
    font-size: var(--font-uxs);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--font-femto) - 3px);
}

.wc-srv-list {
    columns: 3;
    column-gap: calc(var(--font-md) * 2);
    padding-left: var(--font-sm);
}

    .wc-srv-list li {
        margin-bottom: calc(var(--font-femto) - 3px);
        break-inside: avoid;
    }

.wc-avail-bar {
    background: linear-gradient(to bottom, var(--color-primary), var(--color-blue));
    border-radius: 3px;
    padding: var(--font-pico) var(--font-sm);
    color: var(--color-white);
    font-size: var(--font-uxs);
}

.wc-dside-txt {
    color: var(--color-grey36);
    font-size: var(--font-uxs);
}

.wc-poi-grid {
    columns: 3;
    column-gap: calc(var(--font-md) * 3);
    column-rule: 1px solid var(--color-primary);
}

.wc-poi {
    break-inside: avoid;
    margin-bottom: calc(var(--font-md) + 6px);
}

.wc-poi-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-uxs);
    display: flex;
    align-items: center;
    gap: var(--font-femto);
    margin-bottom: var(--font-uxs);
}

    .wc-poi-title i {
        font-size: var(--font-xs);
    }

.wc-poi-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wc-poi-row {
    display: flex;
    justify-content: space-between;
    gap: var(--font-uxs);
    color: var(--color-grey36);
    font-size: var(--font-uxs);
    margin-bottom: calc(var(--font-femto) - 3px);
}

    .wc-poi-row span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wc-poi-row span:last-child {
        flex-shrink: 0;
    }

.wc-reg-item {
    margin-bottom: var(--font-uxs);
}

.wc-reg-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-uxs);
    display: flex;
    align-items: baseline;
    gap: var(--font-femto);
}

    .wc-reg-title i {
        font-size: var(--font-xs);
    }

.wc-reg-val {
    font-weight: 400;
}

.wc-reg-txt {
    color: var(--color-grey36);
    font-size: var(--font-uxs);
    margin-top: calc(var(--font-femto) - 3px);
    padding-left: calc(var(--font-md) + 4px);
}

.wc-reg-hr {
    border-color: var(--color-primary);
    margin: var(--font-uxs) 0;
}

.wc-dest-input::placeholder {
    color: transparent;
}

.wc-dest-input:focus::placeholder {
    color: var(--color-grey59);
}

.wc-sugg {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    width: 100%;
    min-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: 0 0 var(--radius-inner) var(--radius-inner);
    box-shadow: 0 5px 15px var(--color-grey29);
}

    .wc-sugg.show {
        display: block;
    }

.wc-sugg-grp {
    display: flex;
    align-items: center;
    gap: var(--font-femto);
    background: #f2f2f2;
    color: var(--color-grey36);
    font-size: var(--font-micro);
    font-weight: 700;
    padding: calc(var(--font-femto) - 2px) var(--font-uxs);
}

    .wc-sugg-grp i {
        font-size: var(--font-uxs);
    }

.wc-sugg-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .wc-sugg-list li {
        padding: calc(var(--font-femto) - 2px) var(--font-uxs);
        border-bottom: 1px solid var(--color-grey1A);
        color: var(--color-grey36);
        font-size: var(--font-uxs);
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .wc-sugg-list li:hover {
            background: var(--color-grey1A);
        }

.wc-info-ico[data-tip]::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--color-white);
    border: 1px solid var(--color-action-light);
    border-radius: var(--radius-outer);
    box-shadow: 0 2px 6px var(--color-grey29);
    color: var(--color-action-light);
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: var(--font-uxs);
    font-weight: 600;
    padding: calc(var(--font-femto) - 3px) var(--font-uxs);
    white-space: nowrap;
}

.wc-info-ico[data-tip]:hover::after {
    display: block;
}

.wc-recap-card {
    background: #f2f4f7;
    border-radius: var(--radius-inner);
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.wc-recap-day {
    background: #f2f4f7;
    color: var(--color-primary);
    font-size: var(--font-uxs);
    border-radius: 3px;
    padding: 15px 0px;
    /*  margin-bottom: var(--font-uxs);*/
}

    .wc-recap-day i {
        font-size: var(--font-xs);
    }

.wc-recap-line {
    min-height: 100px;
}

.wc-vline {
    width: 0;
}

.wc-print-btn {
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-uxs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
    padding: 0;
}

    .wc-print-btn i {
        font-size: var(--font-sm);
    }

.wc-confirm-btn {
    background: var(--color-white);
    border: 1px solid var(--color-green);
    border-radius: var(--radius-inner);
    color: var(--color-green);
    text-decoration: none;
    font-size: var(--font-uxs);
    font-weight: 500;
    padding: var(--font-pico) calc(var(--font-md) + 6px);
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
}

    .wc-confirm-btn:hover {
        background: var(--color-green);
        color: var(--color-white);
    }

.sec_header {
    position: relative;
    z-index: 1051;
}

    .sec_header.head-fix {
        position: sticky;
        top: 0;
    }

.wc-attn-title {
    color: var(--color-error);
    font-size: var(--font-md);
    font-weight: 700;
    text-transform: uppercase;
}

.wc-attn-hr {
    border-color: var(--color-grey59);
    opacity: 0.2;
}

.wc-attn-msg {
    color: var(--color-grey36);
    font-size: var(--font-xs);
    font-weight: 500;
}

.wc-attn-lbl {
    color: var(--color-error);
    font-weight: 700;
}

.wc-btn-yes,
.wc-btn-no {
    font-size: var(--font-xs);
    font-weight: 700;
    border-radius: var(--radius-inner);
    padding: var(--font-femto) calc(var(--font-md) + 6px);
}

.wc-btn-yes {
    background: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--color-blue);
}

    .wc-btn-yes:hover {
        background: var(--color-blueA8);
        border-color: var(--color-blueA8);
    }

.wc-btn-no {
    background: var(--color-white);
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

    .wc-btn-no:hover {
        background: var(--color-grey1A);
    }

@media (max-width: 767px) {
    .wc-gal {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 190px 110px 110px;
    }

    .wc-gal-main {
        grid-column: span 2;
        grid-row: span 1;
    }

    .wc-srv-list {
        columns: 1;
    }

    .wc-poi-grid {
        columns: 1;
        column-rule: none;
    }
}

/* Chapter: Hotel Cart (cart-hotel.html) */
.wc-cart-label {
    color: var(--color-grey36);
    font-weight: 600;
    font-size: var(--font-uxs);
    margin-bottom: var(--font-uxs);
}

.wc-cart-date {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-uxs);
    padding: var(--font-pico) var(--font-sm);
    border-radius: 3px;
}

.wc-cart-card {
    border: 1px solid var(--color-grey26);
    border-radius: 3px;
    background: var(--color-white);
    margin-top: var(--font-uxs);
}

.wc-cart-body {
    padding: var(--font-sm);
}

.wc-cart-price {
    border: 1px solid var(--color-grey26);
    border-radius: 3px;
    background: var(--color-white);
    padding: var(--font-sm);
    min-height: 330px;
}

    /* Stay summary matches the "Hotel" label styling */
    .wc-cart-price .wc-hstay {
        color: var(--color-grey36);
        font-size: var(--font-uxs);
    }

/* Room block: icon header row + one row per room (XD layout) */
.wc-room-grid {
    margin-top: var(--font-uxs);
}

.wc-room-head,
.wc-room-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr 0.8fr;
    gap: var(--font-uxs);
    align-items: center;
    text-align: center;
    color: var(--color-primary);
}

.wc-room-head {
    padding-bottom: var(--font-femto);
    border-bottom: 1px solid var(--color-grey59);
}

    .wc-room-head i {
        font-size: 20px;
    }

/* Refund column: XD composes two icons - coins 20px + right-left arrows 15px */
.wc-refund-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.wc-room-head .wc-refund-ico .fa-coins {
    font-size: 20px;
}

.wc-room-head .wc-refund-ico .fa-right-left {
    font-size: 15px;
}

.wc-room-row {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: var(--font-micro);
    color: var(--color-grey36);
    padding: var(--font-uxs) 0;
    border-bottom: 1px solid var(--color-grey59);
}

    /* XD: room name cell is one step larger than the rest of the row */
    .wc-room-row > span:first-child {
        font-size: var(--font-uxs);
    }

    /* XD: saving + price columns stay on the primary navy */
    .wc-room-row > span:nth-child(5),
    .wc-room-row > span:nth-child(6) {
        color: var(--color-primary);
    }

    .wc-room-row:last-child {
        border-bottom: none;
    }

@media (max-width: 767px) {
    .wc-room-head {
        display: none;
    }

    .wc-room-row {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: var(--font-xs);
        padding: var(--font-sm) 0;
        text-align: left;
    }

        .wc-room-row > span {
            display: flex;
            align-items: center;
            gap: var(--font-uxs);
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .wc-room-row .d-md-none {
            min-width: 35px;
            text-align: center;
            justify-content: center;
        }
}

.wc-info-toggle {
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-uxs);
    font-weight: 500;
    padding: 0;
    margin-top: var(--font-uxs);
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
}

    .wc-info-toggle i {
        transition: transform 0.3s ease;
    }

    .wc-info-toggle:not(.collapsed) i {
        transform: rotate(180deg);
    }

.wc-info-block {
    margin-top: var(--font-sm);
}

.wc-info-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-uxs);
    margin-bottom: var(--font-femto);
}

.wc-info-text {
    color: var(--color-grey36);
    font-size: var(--font-uxs);
    margin-bottom: var(--font-uxs);
}

.wc-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-grey36);
    font-size: var(--font-uxs);
}

    .wc-info-list li {
        margin-bottom: calc(var(--font-femto) - 3px);
    }

.wc-warn {
    display: flex;
    align-items: flex-start;
    gap: var(--font-uxs);
    color: var(--color-error);
    font-size: var(--font-uxs);
    font-weight: 600;
    margin-bottom: var(--font-uxs);
}

    .wc-warn i {
        font-size: var(--font-sm);
        flex-shrink: 0;
        width: calc(var(--font-md) * 2 - 4px);
        height: calc(var(--font-md) * 2 - 4px);
        border: 1px solid var(--color-error);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.wc-trash-btn {
    width: calc(var(--font-md) * 2 - 4px);
    height: calc(var(--font-md) * 2 - 4px);
    border: 1px solid var(--color-action-light);
    border-radius: 50%;
    background: none;
    color: var(--color-action-light);
    font-size: var(--font-uxs);
}

    .wc-trash-btn:hover {
        background: var(--color-action-light);
        color: var(--color-white);
    }


.offcanvas-lg {
    z-index: 1111;
}

.fa-sharp .fa-solid .fa-clock {
    font-style: 10px !important;
}

/* ------------------------------------------- */
/* rate matrix / calendar search style
/* ------------------------------------------- */
.matrix_container_wrap {
    margin-bottom: calc(var(--font-uxs) * 2);
}


.matrix_call_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
}

.flexible_date {
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    font-weight: 500;
    margin-bottom: 0;
}

.matrix_call {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--font-femto);
    cursor: pointer;
    font-size: var(--font-micro);
    color: var(--color-grey36);
}

.matrix_container {
    border: 1px solid var(--color-primary);
    padding: calc(var(--font-micro) * 2);
    border-radius: 3px;
    margin-top: calc(var(--font-sm) + 1px);
}

.rate_matrix_box {
}

.rate_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fff;
}

.rate_col {
    border-top: 1px solid #E8E8E8;
    border-left: 1px solid #E8E8E8;
    text-align: center;
    /* font-weight: 500; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 1 12.5%;
    width: 12.5%;
    height: calc(var(--font-uxs) * 3.2);
    padding: 0px 0px;
    cursor: pointer;
    color: var(--color-grey36);
}

    .rate_col:hover {
        /* background-color: var(--color-orange); */
    }

.sw_airline_rate_logo {
    margin: 0 auto;
    height: calc(var(--font-femto) * 2);
    width: calc(var(--font-femto) * 4);
    text-align: center;
}

    .sw_airline_rate_logo img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        /* contain-width & cover-height */
        object-position: center center;
    }

.rate_row .rate_col:last-child {
    border-right: solid 1px var(--color-primary);
}

/* First row date headers (column headers) */
.rate_matrix_box .rate_row:first-child .rate_col span {
    font-weight: 500;
}

/* First column date headers (row headers) */
.rate_matrix_box .rate_row .rate_col:first-child span {
    font-weight: 500;
    color: var(--color-white);
    text-align: left;
}

.rate_matrix_box .rate_row:last-child .rate_col {
    border-bottom: solid 1px var(--color-primary);
}

.rate_row .rate_col:first-child {
    /* font-weight: 600; */
    justify-content: center;
    background-color: var(--color-primary);
    align-items: flex-start;
    padding-left: 5px;
}



    .rate_row .rate_col:first-child:hover {
        background-color: var(--color-primary);
        cursor: unset;
    }

    .rate_row .rate_col:first-child.suggested_row_col:first-child:hover {
        /* background-color: #ccf1ff; */
    }

    .rate_matrix_box .rate_row:first-child .suggested_row_col,
    .rate_row .rate_col:first-child.suggested_row_col:first-child {
        border-color: #E8E8E8 !important;
    }


.rate_matrix_box .rate_row:first-child .rate_col {
    /* font-weight: 600; */
    background-color: var(--color-blue);
    color: var(--color-white);
}

    .rate_matrix_box .rate_row:first-child .rate_col:hover {
        background-color: var(--color-blue);
        cursor: unset;
    }

.rate_matrix_box .rate_row:first-child .suggested_row_col:hover {
    /* background-color: #ccf1ff; */
}

.rate_col span,
.m_l_10 {
    font-size: 8px;
    font-family: "Fira Sans", sans-serif;
}

.lowest_rate,
.lowest_rate_i {
    background-color: #FFF0E0;
    font-weight: 600;
    border: 1px solid #F46D00 !important;
}

.highest_rate,
.highest_rate_i {
    background-color: #FFD6DF;
    font-weight: 600;
    border: 1px solid var(--color-error) !important;
}

.suggested_row_col,
.you_date {
    background-color: #D6FFF4;
    border-color: var(--color-green) !important;
}

.price_indicator_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    margin-top: var(--font-sm);
}

    .price_indicator_row .m_l_10 {
        font-family: "Google Sans Flex", sans-serif;
        font-size: var(--font-micro);
    }


.indicator_box {
    height: calc(var(--font-sm) + 1px);
    width: calc(var(--font-sm) + 1px);
    border: solid 1px #dfdfdf;
}

.m_l_10 {
    margin-left: 10px;
    /* font-weight: 600; */
}

.col_info {
    display: unset;
    /* color: var(--color-blue); */
}

.col_info_child {
    position: relative;
}

.col_info .info_right,
.col_info .info_left {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-micro);
}

.col_info .info_right {
    display: flex;
    justify-content: space-between;
    padding: 4px 4px;
}

.col_info .info_left {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-primary);
    padding: 3px 4px;
}

    .col_info .info_right i,
    .col_info .info_left i {
        width: 10px;
        font-size: 8px;
    }

/* Default: show "Show", hide "Hide" */
.matrix_call .text_hide {
    display: none;
}

.matrix_call .text_show {
    display: inline;
}

/* When expanded: swap them */
.matrix_call[aria-expanded="true"] .text_hide {
    display: inline;
}

.matrix_call[aria-expanded="true"] .text_show {
    display: none;
}

/* Chevron rotation */
.matrix_call .fa-chevron-down {
    transition: transform 0.3s ease;
}

.matrix_call[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Top-left corner */
.rate_matrix_box .rate_row:first-child .rate_col:first-child {
    border-radius: var(--radius-inner) 0 0 0;
}

/* Top-right corner */
.rate_matrix_box .rate_row:first-child .rate_col:last-child {
    border-radius: 0 var(--radius-inner) 0 0;
}

/* Bottom-left corner */
.rate_matrix_box .rate_row:last-child .rate_col:first-child {
    border-radius: 0 0 0 var(--radius-inner);
}

/* Bottom-right corner */
.rate_matrix_box .rate_row:last-child .rate_col:last-child {
    border-radius: 0 0 var(--radius-inner) 0;
}

@media (min-width: 768px) {
    .matrix_call_main {
        padding-left: calc(var(--font-micro) * 2.3);
    }

    .rate_col {
        padding: 0px 4px;
        height: calc(var(--font-uxs) * 4);
    }

        .rate_col span,
        .m_l_10 {
            font-size: var(--font-uxs);
            font-family: "Fira Sans", sans-serif;
        }

    .rate_row .rate_col:first-child {
        padding-left: 10px;
    }

    .col_info .info_right {
        padding: 4px 10px;
    }

    .col_info .info_left {
        padding: 3px 10px;
    }

        .col_info .info_right i,
        .col_info .info_left i {
            font-size: 14px;
        }
}

@media (min-width: 1200px) {
    .rate_col {
        padding: 0px 8px;
    }
}

@media (min-width: 1600px) {
    .rate_col {
        padding: 0px 10px;
    }
}

/* One-way Matrix - Start */
.oneway_matrix .oneway_date_row .rate_col {
    background-color: var(--color-primary) !important;
    color: var(--color-white);
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-left: 0;
}

    .oneway_matrix .oneway_date_row .rate_col span {
        color: var(--color-white);
        text-align: center;
        font-weight: 500;
    }

.oneway_matrix .oneway_price_row .rate_col:first-child {
    background-color: #fff;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    color: var(--color-grey36);
}

    .oneway_matrix .oneway_price_row .rate_col:first-child span {
        color: var(--color-grey36);
        text-align: center;
    }

    .oneway_matrix .oneway_price_row .rate_col:first-child:hover {
        background-color: #fff;
    }

.oneway_matrix .oneway_price_row .rate_col.lowest_rate:first-child {
    background-color: #FFF0E0 !important;
}

.oneway_matrix .oneway_price_row .rate_col.highest_rate:first-child {
    background-color: #FFD6DF !important;
}

.oneway_matrix .oneway_price_row .rate_col.suggested_row_col:first-child {
    background-color: #D3FDEE !important;
}

/* One-way Matrix - End */

.wc-flt-head {
    padding-bottom: var(--font-femto);
    margin-bottom: var(--font-uxs);
}

    .wc-flt-head i {
        transition: transform 0.3s ease;
    }

    .wc-flt-head:not(.collapsed) i {
        transform: rotate(180deg);
    }

/* Utilities replacing inline styles (hotel pages) */
.bg-primary-solid {
    background-color: var(--color-primary);
}

.wc-filter-item {
    border-bottom: 1px solid var(--color-grey59);
}

    .wc-filter-item:last-child {
        border-bottom: none;
    }

.wc-avail-col {
    min-width: 250px;
}

.wc-avail-btn {
    width: 80px;
    height: calc(var(--font-md) * 4 - 4px) !important;
    padding: 0;
}

.wc-gal-item {
    display: flex;
    justify-content: center;
    background-color: var(--color-black);
}

.wc-arrow-top {
    z-index: 4;
}

.wc-modal-plain {
    background-color: transparent;
}

.wc-spacer-45 {
    height: 45px;
}

/* Check-out Hotel Notes Component */
.wc-note-box {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-grey26);
    padding: var(--font-sm);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.wc-note-label {
    font-size: var(--font-nano);
    color: var(--color-primary-light, var(--color-primary));
    font-weight: 500;
    margin-bottom: var(--font-pico);
}

.wc-note-input {
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    width: 100%;
    font-size: var(--font-uxs);
    color: var(--color-grey36);
    padding-bottom: 24px;
    /* Space for the send button */
}

    .wc-note-input::placeholder {
        color: var(--color-grey59);
    }

.wc-note-send {
    position: absolute;
    bottom: var(--font-sm);
    right: var(--font-sm);
    border: none;
    background: none;
    color: var(--color-action);
    font-size: var(--font-md);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

    .wc-note-send:hover {
        transform: scale(1.1);
    }

#map-search-box {
    font-size: 14px;
    padding: 10px 15px;
    text-overflow: ellipsis;
    width: 250px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    outline: none;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
}

/* Share dropdown styling */
.share-point {
    padding: 20px 0 11px 22px;
    margin: 0px;
    background: #fff;
    right: 0px;
    position: relative;
    z-index: 9;
    border: 0px;
    border-radius: 10px;
    width: 237px;
    overflow: hidden;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

    .share-point ul {
        padding: 0;
        margin: 0px;
    }

        .share-point ul li {
            padding: 0px;
            margin: 0px 0 10px 0;
            list-style: none;
        }

            .share-point ul li span {
                padding: 0;
                margin: 0px 12px 0 0;
                list-style: none;
                display: inline-block;
                width: 25px;
                text-align: center;
            }

                .share-point ul li span i {
                    padding: 0;
                    font-size: 20px;
                }

            .share-point ul li a {
                padding: 0;
                margin: 0px;
                list-style: none;
                font-weight: 600;
                font-size: 12px;
                display: flex;
                align-items: center;
                color: var(--color-primary);
                text-decoration: none;
            }

                .share-point ul li a:hover {
                    color: var(--color-blue);
                }

.shareview .dropdown-menu {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

    .shareview .dropdown-menu.show {
        display: block;
        padding: 0;
        border: 0;
    }

.shareview li {
    position: relative;
}

/* Remove dropdown arrow */
.shareview .dropdown-toggle::after,
.wc-share::after {
    display: none !important;
}

/* Close button on dropdown */
a.share-close-btn {
    position: absolute;
    right: 13px;
    font-size: 18px;
    z-index: 99;
    top: 10px;
    text-decoration: none;
}

/* Clamped text overview styling */

/* VolaEasy 3-part Date Input Group (Day / Month / Year) - Start */
.volaeasy-date-group-input,
.volaeasy-input.volaeasy-date-group-input {
    position: relative;
    background: #fff;
    border-radius: 2px;
    height: calc(var(--font-md) * 4 - 4px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    border: 2px solid transparent;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: text;
    transition: border-color 0.2s ease;
}

    .volaeasy-date-group-input label,
    .volaeasy-input.volaeasy-date-group-input label {
        position: absolute;
        top: 3px !important;
        left: 15px !important;
        font-size: 11px !important;
        color: var(--color-blue) !important;
        pointer-events: none;
        transition: 0.2s;
    }

    .volaeasy-input.is-error .volaeasy-date-group-input label,
    .volaeasy-input.volaeasy-date-group-input.is-error label {
        top: 6px !important;
        font-size: 11px !important;
        color: var(--color-error) !important;
    }

    .volaeasy-date-group-input .volaeasy-error-icon,
    .volaeasy-input.volaeasy-date-group-input .volaeasy-error-icon {
        top: 6px !important;
        right: 15px !important;
    }

    .volaeasy-date-group-input .date-mul-input,
    .volaeasy-input.volaeasy-date-group-input .date-mul-input {
        display: flex;
        align-items: center;
        margin-top: 7px;
        height: 24px;
    }

        .volaeasy-date-group-input .date-mul-input input,
        .volaeasy-input.volaeasy-date-group-input .date-mul-input input {
            width: 30px !important;
            height: auto !important;
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            font-size: calc(var(--font-xs) + 2px) !important;
            color: #1f2b3d !important;
            text-align: center !important;
            border-radius: 0 !important;
        }

            .volaeasy-date-group-input .date-mul-input input::placeholder,
            .volaeasy-input.volaeasy-date-group-input .date-mul-input input::placeholder {
                color: #1f2b3d;
                opacity: 1;
            }

            .volaeasy-date-group-input .date-mul-input input.aa-input,
            .volaeasy-input.volaeasy-date-group-input .date-mul-input input.aa-input {
                width: 46px !important;
            }

        .volaeasy-date-group-input .date-mul-input .input-sep,
        .volaeasy-input.volaeasy-date-group-input .date-mul-input .input-sep {
            color: #1f2b3d;
            font-size: calc(var(--font-xs) + 2px);
            padding: 0 4px !important;
            user-select: none;
            pointer-events: none;
            display: inline-block;
            text-align: center;
        }

    .volaeasy-input.is-error .volaeasy-date-group-input,
    .volaeasy-input.volaeasy-date-group-input.is-error {
        border-color: var(--color-error) !important;
    }

/* VolaEasy 3-part Date Input Group (Day / Month / Year) - End */


/* Flight Checkout Form */
.checkout-form {
    background-color: #fff;
}

    .checkout-form .volaeasy-input > input,
    .checkout-form .volaeasy-date-group-input,
    .checkout-form .volaeasy-fake-input {
        border: 1px solid var(--color-primary) !important;
    }

    .checkout-form .is-error input,
    .checkout-form .is-error .volaeasy-date-group-input,
    .checkout-form .is-error .volaeasy-fake-input,
    .checkout-form .is-error.volaeasy-date-group-input {
        border-color: var(--color-error) !important;
    }

    .checkout-form .date-mul-input input {
        border: none !important;
    }


/* =========================================================================
   TRANSFER SEARCH  (XD "Flusso 1" / Ricerca, artboard 1920x1488)
   Panel 1220x400 @ (350,297); fields 80px tall; grid 310/310/160/150/200 g11
   ========================================================================= */

/* XD builds the transfer search on a 1220px panel (the other tabs use 1100).
   Without this the five columns fall to 196px and the labels truncate. */
.wc-tr-wrap {
    max-width: 1220px;
}

.wc-tr-panel {
    background: transparent linear-gradient(180deg, var(--color-primary) 0%, var(--color-blueA8) 59%, var(--color-blue) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0 3px 6px var(--color-grey59);
    /* Transfers is the last tab, so every panel corner is free */
    border-radius: 3px;
    padding: 53px 23px 30px;
}

/* --- trip type / service type row --- */
.wc-tr-opts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--font-uxs) calc(var(--font-md) * 2);
    margin-bottom: 34px;
}

.wc-tr-radios,
.wc-tr-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--font-md) * 1.5);
}

.wc-tr-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--font-femto);
    min-width: 0;
}

    .wc-tr-opt label {
        display: inline-flex;
        align-items: center;
        font-family: "Fira Sans", sans-serif;
        font-size: calc(var(--font-xs) + 1px);
        line-height: 22px;
        color: var(--color-white);
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Real inputs stay in the DOM for semantics; the mark is drawn on the label,
   because a replaced <input> does not render ::before. */
.wc-tr-radio,
.wc-tr-check {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 21px;
    margin: 0;
    cursor: pointer;
}

    /* Radio drawn as Font Awesome circle-dot, per XD */
    .wc-tr-radio + label::before {
        content: "\f192";
        font-family: "Font Awesome 7 Pro";
        font-weight: 900;
        font-size: 20px;
        line-height: 21px;
        color: var(--color-white);
        margin-right: var(--font-femto);
        flex-shrink: 0;
    }

    .wc-tr-radio:checked + label::before {
        color: var(--color-blue);
    }

    /* Checkbox, per XD: 15x15 / 2px radius.
   unchecked = white with a navy hairline; checked = solid blue, no tick. */
    .wc-tr-check + label::before {
        content: "";
        width: 15px;
        height: 15px;
        background: var(--color-white);
        border: 1px solid var(--color-primary);
        border-radius: 2px;
        display: inline-block;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .wc-tr-check:checked + label::before {
        background: var(--color-blue);
        border-color: var(--color-blue);
    }

    .wc-tr-radio:focus-visible + label,
    .wc-tr-check:focus-visible + label {
        outline: 2px solid var(--color-white);
        outline-offset: 2px;
    }

/* --- field rows --- */
/* XD: both rows share a 5-column grid (5 x 220 + 4 x 18.5 = 1174). The route
   row uses two 2-column fields, leaving the last column empty. */
.wc-tr-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 18.5px;
    row-gap: 18.5px;
}

.wc-tr-route > * {
    grid-column: span 2;
}

.wc-tr-route {
    margin-bottom: 28px;
}

/* --- leg group: "Andata" / "Ritorno" --- */
.wc-tr-leg + .wc-tr-leg {
    margin-top: 33px;
}

.wc-tr-leg[hidden] {
    display: none;
}

.wc-tr-leg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 27px;
    margin-bottom: 9px;
    padding-left: 12px;
    color: var(--color-white);
}

.wc-tr-leg-ico {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .wc-tr-leg-ico i {
        width: auto;
    }

.wc-tr-leg-bus {
    font-size: 30px;
}

.wc-tr-leg-arr {
    font-size: 20px;
}

.wc-tr-leg-name {
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-md) + 1px);
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One way has no leg title, but XD keeps the first route row at the same
   height, so the removed header space is added back as a margin. */
.wc-tr-panel:not(.is-return) .wc-tr-leg-head {
    display: none;
}

/* --- field shell: white box, navy hairline, per XD --- */
.wc-tr-fld {
    position: relative;
    min-width: 0;
}

    .wc-tr-fld input,
    .wc-tr-fld select,
    .wc-tr-static {
        border: 1px solid var(--color-primary) !important;
        border-radius: 3px !important;
        box-shadow: 0 3px 6px var(--color-grey26) !important;
        background: var(--color-white);
    }

    /* Padding stays at the shared 18px, exactly like the flight fields: it is the
   label that sits clear of the icon, not the text. Padding the input instead
   left the typed value indented once the icon floated away. */
    .wc-tr-fld input {
        font-family: "Fira Sans Condensed", sans-serif;
        font-size: calc(var(--font-xs) + 1px);
    }

    .wc-tr-fld label {
        left: 48px;
        font-family: "Fira Sans Condensed", sans-serif;
        color: var(--color-grey36);
    }

.wc-tr-duo label {
    left: 65px;
}

.volaeasy-input.has-floating-icon.wc-tr-duo input:focus ~ label,
.volaeasy-input.has-floating-icon.wc-tr-duo input:not(:placeholder-shown) ~ label,
.volaeasy-input.has-floating-icon.wc-tr-duo.is-error label {
    left: 50px;
}

/* --- field icons --- */
.wc-tr-ico {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-primary);
    pointer-events: none;
    transition: 0.2s;
}

    /* Font Awesome gives every icon a 1.25em centred box. XD sets the glyphs on
   their own natural width, so that box is removed here: with it the duo group
   ran under the label and the icon/label gap was wrong on every field. */
    .wc-tr-ico,
    .wc-tr-ico i,
    .wc-tr-caret {
        width: auto;
        text-align: left;
    }

.wc-tr-ico-duo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.wc-tr-ico-lg {
    font-size: 20px;
}

.wc-tr-ico-sm {
    font-size: 15px;
}

/* Focus / filled: the icon shrinks and rises next to the floated label, the
   same movement .volaeasy-icon makes on the hotel and flight search fields. */
.wc-tr-fld input:focus ~ .wc-tr-ico,
.wc-tr-fld input:not(:placeholder-shown) ~ .wc-tr-ico,
.wc-tr-fld.is-error .wc-tr-ico {
    top: 10px;
    left: 18px;
    transform: none;
    font-size: calc(var(--font-pico) + 2px);
    color: var(--color-blue);
}

    /* the paired glyphs shrink together */
    .wc-tr-fld input:focus ~ .wc-tr-ico .wc-tr-ico-lg,
    .wc-tr-fld input:not(:placeholder-shown) ~ .wc-tr-ico .wc-tr-ico-lg,
    .wc-tr-fld.is-error .wc-tr-ico .wc-tr-ico-lg {
        font-size: calc(var(--font-pico) + 2px);
    }

    .wc-tr-fld input:focus ~ .wc-tr-ico .wc-tr-ico-sm,
    .wc-tr-fld input:not(:placeholder-shown) ~ .wc-tr-ico .wc-tr-ico-sm,
    .wc-tr-fld.is-error .wc-tr-ico .wc-tr-ico-sm {
        font-size: var(--font-pico);
    }

/* --- N. Volo info popover ------------------------------------------------
   XD "Info n. Volo": 256x87 white box, r3, shadow 0 0 15px #00000080, text
   Fira Sans 12/14 #050505 26 in / 24 down (172 wide), xmark 14 at 14/11.
   Opens from the field's own info icon, so it is a button, not a plain <i>. */
.wc-tr-info {
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    pointer-events: auto;
}

    .wc-tr-info i,
    .wc-tr-info-x i {
        width: auto;
    }

.wc-tr-infopop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    width: 256px;
    /* XD's box is wider than the field, so it may not clamp to it */
    max-width: calc(100vw - 32px);
    /* XD's text frame is 172 wide and its first line measures exactly 172, so
       the copy gets 2px more here to break into the same three lines */
    padding: 24px 56px 21px 26px;
    border-radius: 3px;
    background: var(--color-white);
    box-shadow: 0 0 15px #00000080;
    text-align: left;
}

.wc-tr-info-txt {
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-pico);
    line-height: 14px;
    color: var(--color-black05);
}

.wc-tr-info-x {
    position: absolute;
    top: 11px;
    right: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-micro);
    line-height: 1;
    color: var(--color-black05);
}

/* A two-glyph field needs its floated label further right, or the pair runs
   under it. Matches .has-floating-icon's specificity so this wins. */
.volaeasy-input.wc-tr-duo input:focus ~ label,
.volaeasy-input.wc-tr-duo input:not(:placeholder-shown) ~ label,
.volaeasy-input.has-floating-icon.wc-tr-duo.is-error label {
    left: 47px;
}

.wc-tr-caret {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-black);
    pointer-events: none;
}

/* --- custom dropdown: the field and its panel read as one box, per XD --- */
.wc-tr-dd {
    position: relative;
}

.wc-tr-dd-btn {
    width: 100%;
    height: calc(var(--font-md) * 4 - 4px);
    position: relative;
    text-align: left;
    padding: 0 45px 0 48px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    box-shadow: 0 3px 6px var(--color-grey26);
    cursor: pointer;
}

.wc-tr-dd-lbl {
    display: block;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-tr-dd-val {
    display: none;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: #707070;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* open / filled: the label floats up small and blue, the icon shrinks */
.wc-tr-dd.is-open .wc-tr-dd-btn,
.wc-tr-dd.is-filled .wc-tr-dd-btn {
    padding-top: 14px;
    padding-left: 20px;
    /* clear the caret only, so the value has the same room as in XD */
    padding-right: 38px;
}

.wc-tr-dd.is-open .wc-tr-dd-lbl,
.wc-tr-dd.is-filled .wc-tr-dd-lbl {
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-uxs) - 3px);
    line-height: 14px;
    color: var(--color-blue);
    padding-left: 20px;
}

.wc-tr-dd.is-open .wc-tr-dd-val,
.wc-tr-dd.is-filled .wc-tr-dd-val {
    display: block;
}

.wc-tr-dd.is-open .wc-tr-ico,
.wc-tr-dd.is-filled .wc-tr-ico {
    font-size: calc(var(--font-pico) + 2px);
    color: var(--color-blue);
    top: 21px;
    transform: none;
}

.wc-tr-dd.is-open .wc-tr-caret {
    transform: translateY(-50%) rotate(180deg);
}

/* merge the button with the open panel into a single outlined box */
.wc-tr-dd.is-open .wc-tr-dd-btn {
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}

.wc-tr-dd-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--font-md) * 4 - 4px);
    z-index: 20;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-top: none;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 6px var(--color-grey26);
    padding: 8px 0 12px;
}

.wc-tr-dd.is-open .wc-tr-dd-panel {
    display: block;
}

.wc-tr-dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wc-tr-dd-opt {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 1px 20px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 24px;
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .wc-tr-dd-opt:hover,
    .wc-tr-dd-opt.is-on {
        background: var(--color-band);
        color: var(--color-primary);
    }

.wc-tr-dd-sep {
    margin: 6px 20px;
    border: 0;
    border-top: 1px solid var(--color-grey26);
    opacity: 1;
}

/* the quarter-hour list scrolls inside the panel */
.wc-tr-dd-scroll {
    max-height: 70px;
    overflow-y: auto;
}

/* --- passengers panel --- */
/* The panel must stay exactly as wide as the field so the two read as the
   single box XD draws. Our container is 1100 where XD's is 1220, so the side
   padding is trimmed a little to keep the row labels off the counter. */
.wc-tr-dd-pax .wc-tr-dd-panel {
    padding: 11px 16px 22px;
}

.wc-tr-dd-pax .wc-tr-cnt {
    gap: 8px;
}

.wc-tr-pax-row {
    display: flex;
    align-items: center;
    height: 38px;
}

    .wc-tr-pax-row .wc-tr-lbl {
        flex: 1 1 auto;
        min-width: 0;
    }

.wc-tr-confirm {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 33px;
    border: none;
    border-radius: 4px;
    background: var(--color-action-light);
    box-shadow: 0 3px 6px var(--color-grey29);
    color: var(--color-white);
    font-family: "Google Sans Flex", sans-serif;
    font-size: var(--font-micro);
    font-weight: 500;
    text-transform: uppercase;
}

/* --- swap button: 40px white disc centred on the seam --- */
.wc-tr-swap {
    position: absolute;
    left: -29px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
}

/* --- luggage field: static box with a stepper --- */
/* The luggage field is one of five 220px columns now, so the stepper sits
   closer to the edge than it did in the old wide layout. */
.wc-tr-static {
    height: calc(var(--font-md) * 4 - 4px);
    display: flex;
    align-items: center;
    padding: 0 18px 0 48px;
    gap: var(--font-femto);
}

.wc-tr-lbl {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-tr-cnt {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.wc-tr-step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
    font-size: calc(var(--font-xs) + 1px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.wc-tr-num {
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    color: var(--color-grey36);
    min-width: 12px;
    text-align: center;
}

/* --- submit: shares the last row with luggage + flight no. --- */
.wc-tr-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 34px;
}

/* a hidden return leg must not leave an empty grid row behind */
.wc-tr-leg[hidden] {
    display: none;
}

.wc-tr-cerca {
    width: 150px;
    height: 50px !important;
    font-family: "Google Sans Flex", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    text-decoration: none;
}

    .wc-tr-cerca i {
        font-size: 20px;
    }

/* --- responsive -----------------------------------------------------------
   >=1200px reproduces the XD grid 1:1; below that the columns fold down.
   The swap disc always straddles the seam between departure and arrival. */
@media (max-width: 1199.98px) {
    .wc-tr-panel {
        padding: calc(var(--font-md) * 2) var(--font-md) var(--font-md);
    }

    .wc-tr-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .wc-tr-route > * {
        grid-column: span 3;
    }

    .wc-tr-opts {
        margin-bottom: calc(var(--font-md) * 1.5);
    }
}

@media (max-width: 991.98px) {
    .wc-tr-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .wc-tr-route > * {
        grid-column: span 1;
    }
}

@media (max-width: 767.98px) {
    .wc-tr-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

        .wc-tr-tabs .nav-item {
            flex: 1 1 50%;
            max-width: 50%;
        }

        .wc-tr-tabs .nav-link {
            width: 100%;
        }
}

@media (max-width: 575.98px) {
    .wc-tr-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wc-tr-route > * {
        grid-column: span 1;
    }

    /* stacked: centre the disc on the gap between the two fields */
    .wc-tr-swap {
        left: 50%;
        top: -32px;
        transform: translateX(-50%);
    }

    .wc-tr-opts {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--font-uxs);
    }

    .wc-tr-radios,
    .wc-tr-checks {
        gap: calc(var(--font-md) * 1.5);
        width: 100%;
    }

    .wc-tr-actions {
        justify-content: stretch;
    }

    .wc-tr-cerca {
        width: 100%;
    }
}

/* =========================================================================
   TRANSFER RESULTS  (XD "Flusso 1" / Risultati solo andata, artboard 1920x2740)
   Column 1220 @ x350. XD header 181; tabs 37 under it, panel 1220x155 @ 260,
   alert 1220x70 @ 434, heading 1220x100 @ 540, cards 1220x235 from 675 with a
   265 pitch, load-more pill 342x81 50 under the last card. Card geometry below
   is card-relative; XD strokes are inner, so padding = XD offset - 1.
   ========================================================================= */
/* --- page rhythm: header -> tabs -> summary panel --- */
.wc-tr-top {
    padding-top: 37px;
}

.wc-tr-restabs {
    margin-bottom: 15px;
}

/* --- search summary panel: XD "Modifica ricerca", Default State --- */
.wc-tr-sumbox {
    background: transparent linear-gradient(180deg, var(--color-primary) 0%, var(--color-blueA8) 59%, var(--color-blue) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0 3px 6px var(--color-grey29);
    border-radius: 3px 3px 0 0;
    padding: 30px 45px 27px;
}

/* white bar: XD 1130x50 for one leg; with the return leg it grows to 1130x100
   and the two legs sit 41 apart. Text starts 20 in. */
.wc-tr-sumbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 19px;
    min-height: 50px;
    background: var(--color-white);
    border-radius: 3px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

.wc-tr-sumleg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--font-femto) 20px;
}

/* XD a/r: the white bar is 100 tall with its legs 15 from the top, and the
   panel around it grows with it */
.wc-tr-sumbar:has(.wc-tr-sumleg + .wc-tr-sumleg) {
    justify-content: flex-start;
    min-height: 100px;
    padding: 15px 20px 22px;
}

.wc-tr-sumbox:has(.wc-tr-sumleg + .wc-tr-sumleg) {
    padding-bottom: 29px;
}

    .wc-tr-sumbox:has(.wc-tr-sumleg + .wc-tr-sumleg) .wc-tr-sumfoot {
        margin-top: 29px;
    }

.wc-tr-sumitem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* XD keeps the columns of both legs in line, whatever the dates or stop names
   are, so each column keeps its XD width (route 359 | date 182 | passengers 193
   | bags 33 | flight 121). The order is fixed by the markup both legs share. */
@media (min-width: 1200px) {

    .wc-tr-sumleg > .wc-tr-sumitem:nth-child(3) {
        min-width: 182px;
    }

    .wc-tr-sumleg > .wc-tr-sumitem:nth-child(5) {
        min-width: 193px;
    }

    .wc-tr-sumleg > .wc-tr-sumitem:nth-child(7) {
        min-width: 33px;
    }

    .wc-tr-sumleg > .wc-tr-sumitem:nth-child(9) {
        min-width: 121px;
    }
}

.wc-tr-sumico,
.wc-tr-sumico-sm {
    width: auto;
    flex-shrink: 0;
    color: var(--color-primary);
}

.wc-tr-sumico {
    font-size: 20px;
}

.wc-tr-sumico-sm {
    font-size: 15px;
}

/* XD: date -> time 19, adults -> child icon 20 */
.wc-tr-sumtime {
    margin-left: 9px;
}

.wc-tr-sumpair {
    margin-left: 10px;
}

.wc-tr-sumlbl,
.wc-tr-sumval {
    font-family: "Fira Sans", sans-serif;
}

.wc-tr-sumval {
    margin-left: 4px;
    font-weight: 500;
}

.wc-tr-sumfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--font-sm);
    margin-top: 26px;
    padding-right: 8px;
}

.wc-tr-back,
.wc-tr-modify {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
}

.wc-tr-back {
    font-size: var(--font-micro);
    line-height: 18px;
}

.wc-tr-modify {
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
}

    .wc-tr-back:hover,
    .wc-tr-modify:hover {
        color: var(--color-white);
        opacity: 0.85;
    }

    .wc-tr-back i,
    .wc-tr-modify i {
        width: auto;
        font-size: 20px;
        transition: transform 0.2s;
    }

    .wc-tr-modify[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

/* --- service advisory: XD box 1220x70, icon 48 in, text 37 after the icon --- */
.wc-tr-results {
    padding-top: 19px;
}

.wc-tr-alert {
    display: flex;
    align-items: flex-start;
    gap: 37px;
    margin: 0;
    padding: 14px 29px 18px 48px;
    border: 1px solid var(--color-error);
    border-radius: 3px;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-uxs);
    line-height: 18px;
    color: var(--color-error);
}

    .wc-tr-alert i {
        width: auto;
        flex-shrink: 0;
        margin-top: -1px;
        font-size: 20px;
    }

/* --- results heading: XD 1220x100, icon 45 in, text 26 after it --- */
.wc-tr-reshead {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 100px;
    margin-top: 36px;
    padding: 27px 45px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    box-shadow: 0 3px 6px var(--color-grey26);
}

    .wc-tr-reshead > i {
        width: auto;
        flex-shrink: 0;
        font-size: 30px;
        color: var(--color-primary);
    }

.wc-tr-reshead-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wc-tr-reshead-title {
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 700;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

.wc-tr-reshead-sub {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* XD a/r band: van | 8 | right-long 20 | 25 | text */
.wc-tr-reshead:has(.wc-tr-reshead-dir) {
    gap: 8px;
}

    .wc-tr-reshead:has(.wc-tr-reshead-dir) > i:first-child {
        margin-left: 5px;
    }

.wc-tr-reshead > .wc-tr-reshead-dir {
    font-size: 20px;
}

.wc-tr-reshead:has(.wc-tr-reshead-dir) .wc-tr-reshead-txt {
    margin-left: 17px;
}

/* --- shared card pieces (the Preventivo modal reuses these) --- */
.wc-tr-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 35px;
}

.wc-tr-card-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--font-md);
    min-width: 0;
}

/* XD: supplier logo 89x23, vehicle 179x134 */
.wc-tr-card-logo {
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    height: 20px;
    object-fit: contain;
    align-self: flex-start;
}

/* never squeezed by the fixed card row: XD draws the vehicle past the divider's end */
.wc-tr-card-img {
    flex-shrink: 0;
    width: 179px;
    max-width: 100%;
    height: 134px;
    object-fit: contain;
}

.wc-tr-card-main {
    min-width: 0;
    padding-left: var(--font-md);
}

.wc-tr-cat {
    display: flex;
    align-items: center;
    gap: var(--font-femto);
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 700;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

/* XD: 15x12 colour tab per service tier */
.wc-tr-chip {
    width: 15px;
    height: 12px;
    flex-shrink: 0;
}

    .wc-tr-chip.is-economy {
        background: var(--color-green);
    }

    .wc-tr-chip.is-business {
        background: #c523eb;
    }

    .wc-tr-chip.is-standard {
        background: #f5ec10;
    }

    .wc-tr-chip.is-premium {
        background: #ffd700;
    }

.wc-tr-veh {
    margin: 3px 0 0;
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-tr-feats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-femto) calc(var(--font-md) + 6px);
    list-style: none;
    margin: var(--font-md) 0 0;
    padding: 0;
}

.wc-tr-feat,
.wc-tr-access {
    display: flex;
    align-items: center;
    gap: var(--font-femto);
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-uxs);
    line-height: 18px;
    color: var(--color-grey36);
    min-width: 0;
}

.wc-tr-access {
    margin-top: var(--font-sm);
}

/* a feature wraps as a whole ("2 bagagli"), never mid-label */
.wc-tr-feat {
    white-space: nowrap;
}

    .wc-tr-feat i,
    .wc-tr-access i {
        font-size: 20px;
        color: var(--color-primary);
        width: auto;
        flex-shrink: 0;
    }

.wc-tr-price {
    margin: 19px 0 0;
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-size: calc(var(--font-md) * 2 - 12px);
    line-height: 36px;
    color: var(--color-grey36);
}

/* --- result card: XD 1220x235 --------------------------------------------
   tracks  media 1-275 | detail 275-920 | price 920-1219  (274 : 645 : 299 of the
   1218 inside the stroke - fr, so the 1116 column at 1200-1399 scales, not clips)
   dividers are the column borders, 25 -> 203 (the fixed 178 row) */
.wc-tr-card {
    /* anchor for this card's own cancellation popover */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 274fr) minmax(0, 645fr) minmax(0, 299fr);
    grid-template-rows: minmax(178px, auto) auto;
    padding: 24px 0 31px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    box-shadow: 0 3px 10px var(--color-grey26);
}

    /* logo 69,30  vehicle 55,75 */
    .wc-tr-card .wc-tr-card-media {
        align-items: flex-start;
        gap: 22px;
        padding: 5px 0 0 35px;
    }

    .wc-tr-card .wc-tr-card-logo,
    .wc-tr-qcard .wc-tr-card-logo {
        margin-left: 14px;
    }

    /* detail column: text 32 after the divider, wait block ends 37 before the next.
   The second track is the wait block's own 134, so the wider "Visualizza i
   dettagli" tab below it overflows leftwards instead of squeezing the features */
    .wc-tr-card .wc-tr-card-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 134px;
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        padding: 3px 37px 0 31px;
    }

.wc-tr-info {
    grid-row: 1 / 3;
    min-width: 0;
}

.wc-tr-card .wc-tr-cat,
.wc-tr-qcard .wc-tr-cat {
    gap: 5px;
}

/* feature row @ 116; items start 306 / 415 / 554 */
.wc-tr-card .wc-tr-feats,
.wc-tr-qcard .wc-tr-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 32px 0 0 -1px;
}

/* XD Condiviso: allow flexible feature rendering */

.wc-tr-card:has(.wc-tr-veh + .wc-tr-veh) .wc-tr-feats {
    margin-top: 21px;
}

.wc-tr-veh + .wc-tr-veh {
    margin-top: 0;
}

/* XD draws the shared bus a little taller than the car, and its van glyph
   sits in a 25 wide box */
.wc-tr-card-img[data-service="shared"] {
    width: 178px;
    height: 149px;
}

.wc-tr-feat[data-service="shared"] i {
    width: 25px;
}

    /* the stops pictogram is narrower (XD 17) */
    .wc-tr-feat[data-service="shared"] i.fa-route {
        width: 17px;
    }

/* XD icon 21 and text 18 share a baseline edge: text sits 3 below the icon top */
.wc-tr-card .wc-tr-feat,
.wc-tr-qcard .wc-tr-feat {
    align-items: flex-end;
    gap: 5px;
}

    .wc-tr-card .wc-tr-feat .fa-user,
    .wc-tr-qcard .wc-tr-feat .fa-user {
        margin-right: 3px;
    }

/* accessibility row: icon @ 149, text @ 153, text lines up with the tier name */
.wc-tr-card .wc-tr-access,
.wc-tr-qcard .wc-tr-access {
    align-items: flex-start;
    gap: 3px;
    margin: 16px 0 0 -3px;
}

    .wc-tr-card .wc-tr-access i,
    .wc-tr-qcard .wc-tr-access i {
        margin-top: -4px;
    }

/* wait: icon 749, label 774-883 right-aligned, value 6 under the label */
.wc-tr-wait {
    display: grid;
    grid-template-columns: auto 109px;
    column-gap: 10px;
    align-items: start;
    grid-column: 2;
    grid-row: 1;
    /* the "Visualizza" row below is wider; keep this block tight to the right */
    justify-self: end;
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-uxs);
    line-height: 18px;
    color: var(--color-grey36);
    text-align: right;
}

    .wc-tr-wait i {
        width: auto;
        margin-top: 1px;
        font-size: 15px;
        color: var(--color-primary);
    }

.wc-tr-wait-lbl,
.wc-tr-wait-val {
    grid-column: 2;
}

.wc-tr-wait-val {
    margin-top: 6px;
    font-weight: 700;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
}

/* "Visualizza i dettagli": text 725, chevron ends 883, bottom 206 */
.wc-tr-more {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    min-width: 240px;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    height: 60px;
    margin: 0 -30px -26px 0;
    padding: 19px 30px 0 38px;
    background: none;
    border: none;
    border-radius: 4px 4px 0 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: var(--font-micro);
    line-height: 18px;
    color: var(--color-grey36);
    transition: background-color 0.2s;
}

    .wc-tr-more i {
        width: auto;
        margin-top: -3px;
        font-size: 20px;
        color: var(--color-black05);
        transition: transform 0.2s;
    }

.wc-tr-more-hide {
    display: none;
}

.wc-tr-card.is-open .wc-tr-more {
    position: relative;
    z-index: 2;
    background: var(--color-greyFA);
}

.wc-tr-card.is-open .wc-tr-more-show {
    display: none;
}

.wc-tr-card.is-open .wc-tr-more-hide {
    display: inline;
}

.wc-tr-card.is-open .wc-tr-more i {
    transform: rotate(180deg);
}

/* price column: everything 12 after the divider */
.wc-tr-card-side {
    min-width: 0;
    padding: 2px 0 0 20px;
    border-left: 1px solid var(--color-primary);
}

/* stack: cancellation 18, +19 price 36, +4 quote 21, +31 PRENOTA 50 */
.wc-tr-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.wc-tr-canc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: var(--font-micro);
    line-height: 18px;
    color: var(--color-grey36);
    text-align: left;
}

    .wc-tr-canc i {
        width: auto;
        flex-shrink: 0;
        font-size: 15px;
        color: var(--color-primary);
    }

.wc-tr-quote {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    margin: 4px 0 0 2px;
    padding: 0;
    background: none;
    border: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: var(--font-micro);
    line-height: 18px;
    color: var(--color-blue);
    text-decoration: underline;
    text-align: left;
}

    .wc-tr-quote i {
        width: auto;
        font-size: 20px;
    }

.wc-tr-book {
    width: 150px;
    height: 50px !important;
    margin-top: 31px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    text-decoration: none;
}

/* expanded detail region: XD band 1126x292, 26 under the card body and 46 in
   from each side, so the card grows 235 -> 553 */
.wc-tr-card-det {
    grid-column: 1 / -1;
    margin: 26px 46px 0;
    padding: 22px 35px 23px 39px;
    background: var(--color-greyFA);
    border-radius: 3px;
}

/* XD: struck-through wheelchair, scoped so other pages' .icon-slashed keep theirs */
.wc-tr-access .icon-slashed::after {
    left: 50%;
    height: 2px;
    background-color: var(--color-error);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(135deg);
}

/* --- load more: XD pill 342x81, r50 --- */
.wc-tr-moreres {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.wc-tr-loadmore {
    width: 342px;
    max-width: 100%;
    min-height: 81px;
    padding: 0 var(--font-md);
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 50px;
    font-family: "Google Sans Flex", sans-serif;
    font-size: calc(var(--font-md) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
    transition: background-color 0.2s;
}

    .wc-tr-loadmore:hover {
        background: var(--color-band);
    }

/* --- responsive ----------------------------------------------------------
   >=1200 is the XD grid 1:1. Below that the tracks go fluid (<1200), the price
   column drops under the card (<992), and everything stacks (<768). */
/* 1200-1399: the column is 1116, not 1220, so the summary bar drops the extra
   route spacing and tightens the divider gaps to stay on one line */
@media (max-width: 1399.98px) {
    .wc-tr-sumbar {
        column-gap: 12px;
        padding: 0 16px;
    }
}

@media (max-width: 1199.98px) {
    .wc-tr-top {
        padding-top: var(--font-md);
    }

    .wc-tr-sumbox {
        padding: var(--font-sm) var(--font-md);
    }

    .wc-tr-sumfoot {
        margin-top: var(--font-sm);
        padding-right: 0;
    }

    .wc-tr-alert {
        gap: var(--font-md);
        padding: var(--font-uxs) var(--font-md);
    }

    .wc-tr-reshead {
        gap: var(--font-md);
        padding: var(--font-sm) var(--font-md);
    }

    .wc-tr-card {
        grid-template-columns: 220px minmax(0, 1fr) 240px;
        grid-template-rows: auto auto;
        padding: var(--font-md) 0;
    }

        .wc-tr-card .wc-tr-card-media {
            padding: 0 var(--font-md);
        }

        .wc-tr-card .wc-tr-card-logo,
        .wc-tr-qcard .wc-tr-card-logo {
            margin-left: 0;
        }

        .wc-tr-card .wc-tr-card-main {
            padding: 0 var(--font-md);
        }

        .wc-tr-card .wc-tr-feats,
        .wc-tr-qcard .wc-tr-feats {
            display: flex;
            gap: var(--font-femto) var(--font-md);
            margin: var(--font-md) 0 0;
        }

        .wc-tr-card .wc-tr-access,
        .wc-tr-qcard .wc-tr-access {
            margin: var(--font-uxs) 0 0;
        }

    /* the tab still meets the band: its bottom margin cancels the band's top one */
    .wc-tr-more {
        min-width: 0;
        height: auto;
        margin: var(--font-uxs) -16px calc(-1 * var(--font-uxs)) 0;
        padding: 8px 16px;
    }

        .wc-tr-more i {
            margin-top: 0;
        }

    .wc-tr-card-det {
        margin: var(--font-uxs) var(--font-md) 0;
        padding: var(--font-md);
    }

    .wc-tr-card-side {
        padding: 0 var(--font-md);
    }
}

@media (max-width: 991.98px) {
    .wc-tr-card {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-rows: auto;
    }

    /* card body, then the opened details, then the price band */
    .wc-tr-card-det {
        grid-row: 2;
    }

    .wc-tr-card-side {
        position: relative;
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: var(--font-md);
        padding-top: var(--font-md);
        border-left: none;
        border-top: 1px solid var(--color-primary);
    }

    /* price left, PRENOTA right on the same band */
    .wc-tr-buy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--font-md);
    }

    .wc-tr-canc {
        grid-column: 1 / -1;
    }

    .wc-tr-price {
        margin-top: var(--font-femto);
    }

    .wc-tr-book {
        grid-column: 2;
        grid-row: 2 / 4;
        margin-top: 0;
    }

    /* the popover follows its link once the column has moved under the card;
       two classes so this beats the base .wc-tr-cancpop defined further down */
    .wc-tr-card-side .wc-tr-cancpop {
        top: 30px;
        left: var(--font-md);
        right: var(--font-md);
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .wc-tr-top {
        padding-top: var(--font-sm);
    }

    .wc-tr-sumbox {
        padding: var(--font-uxs);
    }

    .wc-tr-sumbar {
        padding: var(--font-femto) var(--font-uxs);
    }

    .wc-tr-alert {
        gap: var(--font-uxs);
        padding: var(--font-uxs);
    }

    .wc-tr-reshead {
        align-items: flex-start;
        gap: var(--font-uxs);
        padding: var(--font-uxs);
    }

        .wc-tr-reshead > i {
            font-size: 24px;
        }

    .wc-tr-card {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--font-uxs) 0;
    }

    /* stacked: media, detail, opened details, price band */
    .wc-tr-card-media {
        grid-row: 1;
    }

    .wc-tr-card-main {
        grid-row: 2;
    }

    .wc-tr-card-det {
        grid-row: 3;
    }

    .wc-tr-card-side {
        grid-row: 4;
    }

    /* logo on its own line, vehicle centred under it at the XD size */
    .wc-tr-card .wc-tr-card-media {
        flex-direction: column;
        align-items: center;
        gap: var(--font-femto);
        padding: 0 var(--font-uxs);
    }

    .wc-tr-card .wc-tr-card-logo {
        align-self: flex-start;
    }

    .wc-tr-card .wc-tr-card-img {
        width: 179px;
        height: 134px;
    }

    .wc-tr-card .wc-tr-card-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        row-gap: var(--font-uxs);
        margin-top: var(--font-uxs);
        padding: var(--font-uxs) var(--font-uxs) 0;
        border-left: none;
        border-top: 1px solid var(--color-primary);
    }

    .wc-tr-info,
    .wc-tr-wait,
    /* the details toggle sits in the middle of the card */
    .wc-tr-more {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .wc-tr-wait {
        justify-self: start;
        grid-template-columns: auto minmax(0, 1fr);
        text-align: left;
    }

    .wc-tr-wait-lbl {
        width: auto;
    }

    .wc-tr-more {
        margin: 0;
    }

    .wc-tr-card-side {
        margin-top: var(--font-uxs);
        padding: var(--font-uxs) var(--font-uxs) 0;
    }

    .wc-tr-book {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        margin-top: var(--font-uxs);
    }

    .wc-tr-card-det {
        margin: 0 var(--font-uxs);
        padding: var(--font-uxs);
    }

    .wc-tr-card-side .wc-tr-cancpop {
        left: var(--font-uxs);
        right: var(--font-uxs);
    }

    .wc-tr-moreres {
        margin-top: calc(var(--font-md) * 2);
    }

    .wc-tr-loadmore {
        width: 100%;
        min-height: 56px;
        font-size: var(--font-sm);
    }
}

/* --- journey timeline: shared by the card details and the quote modal -----
   XD "open dettagli" / Preventivo. Header row, then a white 782x204 box whose
   tracks are  time 52 | marker 19 | connector 182 | place. Rows: first stop,
   middle (duration + driver note), last stop 16 under the middle. The four
   tracks are one grid on the <ol>, so the vertical run spans the rows even
   when an address wraps. */
.wc-tr-jrn {
    background: var(--color-greyFA);
    border-radius: 3px;
    padding: 22px 34px 24px 33px;
}

/* van 20 | 10 | Partenza | 33 | date, all 18/22 */
.wc-tr-jrn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 0 0 20px 12px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

    .wc-tr-jrn-head i {
        width: auto;
        font-size: 20px;
        color: var(--color-primary);
    }

.wc-tr-jrn-date {
    margin-left: 23px;
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
}

.wc-tr-jrn-body {
    background: var(--color-white);
    border-radius: 3px;
}

.wc-tr-stops {
    position: relative;
    display: grid;
    grid-template-columns: 52px 19px minmax(0, 182px) minmax(0, 1fr);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wc-tr-stop {
    display: contents;
}

    .wc-tr-stop:first-child > * {
        grid-row: 1;
    }

.wc-tr-stop-mid > * {
    grid-row: 2;
}

.wc-tr-stop:last-child > * {
    grid-row: 3;
    margin-top: 16px;
}

/* vertical run: 7 under the first marker, 7 above the pin */
.wc-tr-stops::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-self: start;
    width: 1px;
    margin: 28px 0 -14px 7px;
    background: var(--color-black05);
}

.wc-tr-stop-time {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

.wc-tr-stop:last-child .wc-tr-stop-time {
    margin-top: 19px;
}

/* the marker cell also covers the connector track */
.wc-tr-stop-mark {
    position: relative;
    grid-column: 2 / 4;
    align-self: stretch;
}

.wc-tr-stop-mid .wc-tr-stop-mark {
    grid-column: 2;
}

.wc-tr-stop-mark i {
    display: block;
    width: 15px;
    margin-top: 6px;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: var(--color-primary);
}

.wc-tr-stop-mark .fa-location-dot {
    margin-top: 5px;
    font-size: 20px;
    line-height: 21px;
}

.wc-tr-stop:last-child .wc-tr-stop-mark i {
    margin-top: 5px;
}

/* connector: 4 after the marker to 8 before the place name */
.wc-tr-stop-mark::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 19px;
    right: 8px;
    height: 1px;
    background: var(--color-primary);
}

.wc-tr-stop-mid .wc-tr-stop-mark::after {
    content: none;
}

.wc-tr-stop-place {
    grid-column: 4;
    min-width: 0;
}

.wc-tr-stop-name {
    display: block;
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

.wc-tr-stop-addr {
    display: block;
    margin-top: 3px;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-uxs);
    line-height: 18px;
    color: var(--color-grey36);
}

/* duration / distance under the connector, 20 in */
.wc-tr-jrn-meta {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
}

    .wc-tr-jrn-meta span,
    .wc-tr-jrn-note {
        display: flex;
        align-items: center;
        font-family: "Fira Sans", sans-serif;
        font-size: var(--font-uxs);
        line-height: 18px;
        color: var(--color-grey36);
    }

    .wc-tr-jrn-meta span {
        gap: 6px;
    }

    .wc-tr-jrn-meta i {
        width: 15px;
        flex-shrink: 0;
        margin-top: -2px;
        font-size: 15px;
        text-align: center;
        color: var(--color-black05);
    }

/* driver note under a 1px rule: icon 16 | 11 | text */
.wc-tr-jrn-note {
    grid-column: 4;
    gap: 11px;
    min-width: 0;
    max-width: 318px;
    margin-top: 5px;
    padding-top: 2px;
    border-top: 1px solid var(--color-line29);
}

    .wc-tr-jrn-note i {
        width: 16px;
        flex-shrink: 0;
        margin-top: -3px;
        font-size: 15px;
        color: var(--color-primary);
    }

/* facts beside the timeline: icons centred on 39, text at 65, 14/17 */
.wc-tr-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 31px 24px 24px 32px;
    background: var(--color-white);
    border-radius: 3px;
}

    .wc-tr-facts li {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        align-items: center;
        column-gap: 19px;
        font-family: "Fira Sans Condensed", sans-serif;
        font-size: var(--font-micro);
        line-height: 17px;
        color: var(--color-grey36);
    }

    .wc-tr-facts i {
        width: auto;
        justify-self: center;
        font-size: 15px;
        color: var(--color-primary);
    }

/* the expanded region lays the timeline and the facts side by side */
.wc-tr-card-det {
    display: none;
}

    /* "Partenza" takes its own row, so both white boxes share a top and a height */
    .wc-tr-card-det.show,
    .wc-tr-card-det.collapsing {
        display: grid;
        grid-template-columns: minmax(0, 782fr) minmax(0, 253fr);
        gap: 21px 17px;
    }

    .wc-tr-card-det .wc-tr-jrn {
        display: contents;
    }

    .wc-tr-card-det .wc-tr-jrn-head {
        grid-column: 1 / -1;
        margin: 0 0 0 6px;
    }

    .wc-tr-card-det .wc-tr-jrn-body {
        padding: 31px 24px 25px 92px;
    }

    .wc-tr-card-det .wc-tr-facts {
        grid-row: 2;
        grid-column: 2;
    }

/* narrow: one text track; the note gets its own row under the duration */
@media (max-width: 991.98px) {

    .wc-tr-card-det.show,
    .wc-tr-card-det.collapsing {
        grid-template-columns: 1fr;
    }

    .wc-tr-card-det .wc-tr-facts {
        grid-row: auto;
        grid-column: 1;
    }

    .wc-tr-jrn,
    .wc-tr-card-det .wc-tr-jrn-body,
    .wc-tr-jrn-body {
        padding: var(--font-uxs);
    }

    .wc-tr-jrn-head {
        margin-left: 0;
    }

    .wc-tr-jrn-date {
        margin-left: 0;
    }

    .wc-tr-stops {
        grid-template-columns: 48px 19px minmax(0, 1fr);
    }

    .wc-tr-stop-mark,
    .wc-tr-stop-mid .wc-tr-stop-mark {
        grid-column: 2;
    }

        .wc-tr-stop-mark::after {
            content: none;
        }

    .wc-tr-stop-place,
    .wc-tr-jrn-meta {
        grid-column: 3;
    }

    .wc-tr-jrn-meta {
        padding-left: 0;
    }

    .wc-tr-jrn-note {
        grid-column: 3;
        grid-row: 3;
        max-width: none;
        margin-top: 10px;
    }

    .wc-tr-stop:last-child > * {
        grid-row: 4;
    }

    .wc-tr-stops::before {
        grid-row: 1 / 4;
    }
}

/* --- cancellation rules ---------------------------------------------------- */
/* XD opens this on the card whose link was clicked - a popover, no backdrop.
   Panel is the 500x400 "Refund" artboard, its right edge flush with the card's
   and its top 53px above the card, so it covers the link that opened it. */
/* XD "Refund": 479x380, radius 10, shadow 0 0 15px #00000080 */
.wc-tr-cancpop {
    position: absolute;
    top: -53px;
    right: 0;
    z-index: 5;
    width: 479px;
    max-width: 100%;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 0 15px #00000080;
    padding: 30px 33px 32px 32px;
    text-align: left;
}

.wc-tr-cancel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--font-sm);
}

.wc-tr-cancel-title {
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-primary);
}

/* XD: xmark Solid 14 #050505, 16 from the right and 11 down */
.wc-tr-cancel-x {
    position: absolute;
    top: 11px;
    right: 16px;
    border: none;
    background: none;
    padding: 0;
    font-size: var(--font-micro);
    color: var(--color-black05);
    line-height: 1;
}

    .wc-tr-cancel-x i {
        width: auto;
    }

/* XD: 413x95, 1px #A2ABB1, radius 10, 28 under the title */
.wc-tr-refund {
    margin-top: 28px;
    padding: 10px 19px;
    border: 1px solid #a2abb1;
    border-radius: 10px;
}

.wc-tr-refund-keys,
.wc-tr-refund-days {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-pico);
    line-height: 18px;
}

/* XD: Fira Sans Condensed Regular 15 in green / red */
.wc-tr-refund-keys {
    justify-content: space-around;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: var(--font-uxs);
}

.wc-tr-refund-full {
    color: var(--color-green);
}

.wc-tr-refund-none {
    color: var(--color-error);
}

/* the two-tone track with a dot at each milestone */
.wc-tr-refund-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: var(--font-femto) 0;
    height: var(--font-uxs);
    background: linear-gradient(to right, var(--color-green) 0 50%, var(--color-error) 50% 100%);
    background-size: 100% 2px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

    .wc-tr-refund-bar i {
        font-size: var(--font-pico);
        color: var(--color-blue);
        width: auto;
        background: var(--color-white);
    }

.wc-tr-refund-days {
    color: var(--color-grey36);
}

/* XD: rows at 201 and 282, name column at 139 */
.wc-tr-rules {
    margin: 12px 0 0;
}

.wc-tr-rule {
    display: grid;
    grid-template-columns: 107px 1fr;
    gap: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-grey26);
}

    .wc-tr-rule:last-child {
        border-bottom: none;
    }

    /* XD: Google Sans Flex 14/17, "Prima del" Regular, the date Medium */
    .wc-tr-rule dt {
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 400;
        font-size: var(--font-micro);
        line-height: 17px;
        color: var(--color-primary);
    }

        .wc-tr-rule dt strong {
            font-weight: 500;
        }

    /* XD: Fira Sans 12/14 #102036 */
    .wc-tr-rule dd {
        margin: 0;
        font-family: "Fira Sans", sans-serif;
        font-size: var(--font-pico);
        line-height: 14px;
        color: var(--color-grey36);
    }

/* XD: Google Sans Flex Medium 14, 6 above the text */
.wc-tr-rule-name {
    display: block;
    margin-bottom: 6px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: var(--font-micro);
    line-height: 18px;
    color: var(--color-primary);
}

/* --- modifica ricerca overlay --------------------------------------------- */
/* the overlay carries the search panel at its own design width, so the
   >=1200 field grid still applies inside the dialog */
/* --- quote modal reuses .wc-qmodal / .wc-panel-close / .wc-qf -------------
   XD "Preventivo transfer solo andata": panel 1222x1541 at top 227, left 350
   on the 1920 artboard - so full content width, centred, opening below the
   header rather than over it. Inner content column is 900, giving 161 sides. */
.wc-tr-qdlg {
    max-width: 1222px;
    /* header is 170.5 tall and sticky; XD leaves 44px between it and the panel */
    margin-top: 215px;
}

.wc-tr-qmodal {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-blueA8) 59%, var(--color-blue) 100%);
    padding: 103px 161px 80px;
}

    /* XD title: Google Sans Flex ExtraBold 50px in a 62 frame, +2.5 tracking */
    .wc-tr-qmodal .wc-q-title {
        font-weight: 800;
        font-size: 50px;
        line-height: 62px;
        letter-spacing: 2.5px;
    }

/* the summary card carries the service tier's colour as its border */
.wc-tr-qcard {
    padding: 25px 25px 27px;
    border: 1px solid var(--color-green);
    box-shadow: 0 3px 10px var(--color-grey26);
}

    /* Column split gives the middle column the width its feature row needs, so
   Privato / passeggeri / bagagli stay on one line as in XD. */
    .wc-tr-qcard .wc-tr-qtop {
        display: grid;
        grid-template-columns: 140fr 350fr 134fr;
        align-items: start;
        gap: var(--font-sm);
        padding-bottom: var(--font-sm);
    }

    .wc-tr-qcard .wc-tr-card-side {
        align-self: center;
        text-align: right;
    }

    .wc-tr-qcard .wc-tr-price {
        margin: 0;
        color: var(--color-primary);
    }

/* XD a/r: Andata and Ritorno 25 apart; each head holds its icons in an 84 slot
   so the leg name starts at 139 and the date at 247 */
.wc-tr-jrn + .wc-tr-jrn {
    margin-top: 25px;
}

.wc-tr-jrn-icons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 84px;
}

.wc-tr-jrn-head .wc-tr-jrn-dir {
    font-size: 15px;
}

/* Ritorno leads with the arrow, which XD sets 2 further in */
.wc-tr-jrn-icons > .wc-tr-jrn-dir:first-child {
    margin: 0 -2px 0 2px;
}

.wc-tr-jrn-leg {
    width: 98px;
}

    .wc-tr-jrn-leg + .wc-tr-jrn-date {
        margin-left: 0;
    }

/* XD 1920 (panel 1222): title 103 | subtitle 192 | dates 248 | card 159,394
   900 wide; top row logo 55,33 | vehicle 41,77 | tier 271 | price 664,143;
   the journey starts 212 down the card */
@media (min-width: 1300px) {
    .wc-tr-qmodal .wc-q-title {
        margin-bottom: 27px;
    }

    .wc-tr-qmodal .wc-q-sub {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 18px;
        font-weight: 400;
        font-size: 30px;
        line-height: 38px;
    }

        .wc-tr-qmodal .wc-q-sub i {
            width: auto;
            font-size: 30px;
        }

    /* 119 to the card: 95 here plus the header block's own 24 (mb-4) */
    .wc-tr-qmodal .wc-q-dates {
        margin-bottom: 95px;
        font-weight: 500;
        font-size: 22px;
        line-height: 27px;
    }

    .wc-tr-qcard {
        margin-right: 1px;
        margin-left: -3px;
        padding: 32px 24px 27px 25px;
    }

        .wc-tr-qcard .wc-tr-qtop {
            grid-template-columns: 223px 415px auto;
            gap: 0;
            padding-bottom: 1px;
        }

        .wc-tr-qcard .wc-tr-card-media {
            align-items: flex-start;
            gap: 21px;
        }

        .wc-tr-qcard .wc-tr-card-side {
            align-self: start;
            text-align: left;
        }

        .wc-tr-qcard .wc-tr-price {
            margin-top: 110px;
            align-self: start;
            justify-self: start;
        }
}

/* the 161px sides and 103px top only fit while the panel is at full width */
@media (max-width: 1299.98px) {
    .wc-tr-qmodal {
        padding: 70px var(--font-md) 50px;
    }

        .wc-tr-qmodal .wc-q-title {
            font-size: calc(var(--font-md) * 2 - 4px);
            line-height: 1.1;
        }

    .wc-tr-qdlg {
        margin-top: 190px;
    }

    .wc-tr-qcard {
        padding: var(--font-sm);
    }

        .wc-tr-qcard .wc-tr-qtop {
            grid-template-columns: 1fr;
            gap: var(--font-md);
        }

        .wc-tr-qcard .wc-tr-card-media {
            align-items: center;
        }

        .wc-tr-qcard .wc-tr-card-logo {
            align-self: flex-start;
        }

        .wc-tr-qcard .wc-tr-card-main {
            padding-left: 0;
            border-left: none;
        }

        .wc-tr-qcard .wc-tr-card-side {
            border-left: none;
            border-top: 1px solid var(--color-primary);
            width: 100%;
            padding: var(--font-sm) 0 0 0;
            justify-self: stretch;
            text-align: left;
        }

        .wc-tr-qcard .wc-tr-price {
            justify-self: start;
            align-self: start;
        }
}

@media (max-width: 991.98px) {

    .wc-tr-card-det.show,
    .wc-tr-card-det.collapsing {
        grid-template-columns: 1fr;
    }

    .wc-tr-card-det .wc-tr-facts {
        grid-row: auto;
        grid-column: 1;
    }

    /* the stacked header is 139 tall here, so the panel has to start below it */
    .wc-tr-qdlg {
        margin-top: 165px;
    }

    .wc-tr-qcard .wc-tr-qtop {
        grid-template-columns: 1fr;
    }

    .wc-tr-qcard .wc-tr-card-main {
        border-left: none;
    }

    .wc-tr-qcard .wc-tr-price {
        justify-self: start;
    }
}

@media (max-width: 575.98px) {
    .wc-tr-rule {
        grid-template-columns: 1fr;
        gap: var(--font-femto);
    }
}

/* =========================================================================
   TRANSFER CART  (XD "Flusso 1" / Carrello-solo andata, artboard 1920x1415)
   Reuses the hotel cart shell (.cart-flight, .cart-container, .card-price,
   .wc-cart-date / -card / -price, .wc-trash-btn) and the transfer timeline;
   only the XD geometry of this screen lives here. Panel 1220 @ y307, white
   box 1152, main column 835 | 20 | sidebar 248.
   ========================================================================= */
.wc-tc-sec {
    padding-top: 54px;
}

/* XD: Google Sans Flex Black 40/50, 22 above the panel */
.wc-tc-title {
    margin: 0 0 22px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 50px;
}

.wc-tc-panel {
    padding: 79px 34px 36px;
    background: transparent linear-gradient(180deg, var(--color-primary) 0%, var(--color-blueA8) 59%, var(--color-blue) 100%) 0% 0% no-repeat padding-box;
    border-radius: 3px;
}

/* top and bottom bars: action | cart icon 17 price box 17 PRENOTA */
.wc-tc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wc-tc-total {
    display: flex;
    align-items: center;
    gap: 17px;
}

.wc-tc-cart {
    width: auto;
    font-size: 30px;
    color: var(--color-white);
}

.wc-tc-total .card-price {
    padding: 0 29px;
    border-radius: 3px;
}

.wc-tc-book {
    width: 150px;
    font-family: "Google Sans Flex", sans-serif;
    text-decoration: none;
}

/* NUOVA RICERCA: XD 200x50, icon 29 in, label 8 after it */
.wc-tc-new {
    justify-content: flex-start;
    gap: 8px;
    width: 200px;
    padding: 0 20px 0 29px;
    white-space: nowrap;
    font-family: "Google Sans Flex", sans-serif;
    text-decoration: none;
}

    .wc-tc-new i {
        width: auto;
        font-size: 20px;
    }

.wc-tc-back {
    gap: 5px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
}

    .wc-tc-back i {
        width: auto;
    }

/* white box: 40 under the top bar, 42 above the bottom one */
.wc-tc-box {
    margin: 40px 0 42px;
    padding: 35px 26px 56px 23px;
    border-radius: 3px;
}

.wc-tc-item {
    display: grid;
    grid-template-columns: minmax(0, 835fr) minmax(0, 248fr);
    align-items: start;
    column-gap: 20px;
}

.wc-tc-main {
    min-width: 0;
}

/* "Transfer Solo Andata" .... "Privato", aligned with the navy bar's text */
.wc-tc-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px 0 17px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
}

.wc-tc-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-tc-service {
    flex-shrink: 0;
}

/* navy bar: XD 834x47 */
.wc-tc-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 20px;
    min-height: 47px;
    margin-top: 16px;
    padding: 0 20px 0 17px;
}

.wc-tc-leg {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
    min-width: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
}

    .wc-tc-leg i {
        width: auto;
        font-size: 30px;
    }

.wc-tc-day {
    margin-left: 19px;
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
}

.wc-tc-dur {
    font-family: "Fira Sans", sans-serif;
    font-size: var(--font-uxs);
    line-height: 18px;
}

    .wc-tc-dur strong {
        margin-left: 14px;
        font-weight: 500;
    }

/* transfer card: XD 835x270, navy stroke, media 197 | timeline */
.wc-tc-card {
    display: grid;
    grid-template-columns: 197px minmax(0, 1fr);
    align-items: start;
    margin-top: 22px;
    padding: 53px 24px 52px 28px;
    border-color: var(--color-primary);
}

.wc-tc-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.wc-tc-logo {
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    height: 18px;
    object-fit: contain;
}

.wc-tc-veh {
    max-width: 100%;
    margin-top: 12px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: var(--font-micro);
    line-height: 17px;
    color: var(--color-grey36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-tc-img {
    flex-shrink: 0;
    width: 142px;
    max-width: 100%;
    height: 106px;
    margin-top: 11px;
    object-fit: contain;
}

/* same timeline as the results page, with the cart's shorter 161 connector */
.wc-tc-card .wc-tr-stops {
    grid-template-columns: 52px 19px minmax(0, 161px) minmax(0, 1fr);
    margin-top: 8px;
}

/* sidebar: XD 248x340, navy stroke */
.wc-tc-side {
    position: relative;
    min-height: 340px;
    margin-top: 37px;
    padding: 0 16px 76px 0;
    border-color: var(--color-primary);
}

/* facts: text 64 in, rows 25 apart, icons centred on 38 */
.wc-tc-facts {
    gap: 8px;
    padding: 34px 0 0 30px;
    background: none;
}

    .wc-tc-facts .wc-tr-chip {
        justify-self: center;
    }

.wc-tc-price {
    margin: 19px 0 0 24px;
}

/* "Costo di emissione (EUR)": XD field 200x60, label 20/9, value 20/31 */
.wc-tc-fee {
    width: 200px;
    max-width: 100%;
    margin: 22px 0 0 23px;
    padding: 8px 19px 6px;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    background: var(--color-white);
}

    .wc-tc-fee label {
        display: block;
        font-family: "Fira Sans", sans-serif;
        font-weight: 500;
        font-size: var(--font-uxs);
        line-height: 18px;
        color: var(--color-grey36);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wc-tc-fee input {
        display: block;
        width: 100%;
        height: 22px;
        margin-top: 4px;
        padding: 0;
        border: 0;
        outline: none;
        background: none;
        font-family: "Fira Sans", sans-serif;
        font-weight: 600;
        font-size: calc(var(--font-xs) + 1px);
        line-height: 22px;
        color: var(--color-grey36);
    }

    .wc-tc-fee:focus-within {
        border-color: var(--color-blue);
    }

/* XD a/r: Andata / Ritorno bars carry a 20px long arrow, leg names start at
   500 and the date at 602 whichever arrow leads */
.wc-tc-leg .wc-tc-dir {
    font-size: 20px;
}

.wc-tc-leg:has(.wc-tc-dir) .wc-tc-legname {
    width: 92px;
}

.wc-tc-leg:has(.wc-tc-dir) .wc-tc-day {
    margin-left: 0;
}

/* the return leg starts 36 under the outbound card */
.wc-tc-card + .wc-tc-date {
    margin-top: 36px;
}

/* Ritorno leads with the arrow; XD tucks the van 2 closer to it */
.wc-tc-leg > .wc-tc-dir:first-child {
    margin-right: -2px;
}

/* XD a/r at 1920: one sidebar for both legs (715 tall) with its contents 208
   lower than on the one-way cart and the bin 22 from the bottom; 50 under the
   return card, 51 down to the bottom bar and 80 below it */
@media (min-width: 1200px) {
    .wc-tc-item:has(.wc-tc-card ~ .wc-tc-card) .wc-tc-side {
        align-self: stretch;
        padding-top: 208px;
    }

    .wc-tc-item:has(.wc-tc-card ~ .wc-tc-card) .wc-tc-trash {
        bottom: 21px;
    }

    .wc-tc-panel:has(.wc-tc-card ~ .wc-tc-card) {
        padding-bottom: 80px;
    }

        .wc-tc-panel:has(.wc-tc-card ~ .wc-tc-card) .wc-tc-box {
            margin-bottom: 51px;
            padding-bottom: 50px;
        }
}

/* XD Carrello-condiviso at 1920: the bus column is 175 (not 197), so times
   and dots start 22 further left while the stop names stay put; the name wraps
   in a 102 frame and the 153x127 bus tucks up under it */
@media (min-width: 1200px) {
    .wc-tc-card:has(.wc-tc-img[data-service="shared"]) {
        grid-template-columns: 175px minmax(0, 1fr);
    }

        .wc-tc-card:has(.wc-tc-img[data-service="shared"]) .wc-tr-stops {
            grid-template-columns: 52px 19px minmax(0, 183px) minmax(0, 1fr);
        }

    .wc-tc-veh[data-service="shared"] {
        max-width: 102px;
        white-space: normal;
    }

    .wc-tc-img[data-service="shared"] {
        width: 153px;
        height: 127px;
        /* its extra height hangs into the card's padding, which stays 270 */
        margin: -17px 0 -10px 6px;
    }
}

/* delete: XD 40x40 ring, 16 from the right and 18 from the bottom */
.wc-tc-trash {
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .wc-tc-sec {
        padding-top: calc(var(--font-md) * 2);
    }

    .wc-tc-panel {
        padding: calc(var(--font-md) * 2) var(--font-md) var(--font-md);
    }

    .wc-tc-box {
        margin: var(--font-md) 0;
        padding: var(--font-md);
    }

    .wc-tc-card {
        grid-template-columns: 170px minmax(0, 1fr);
        padding: var(--font-md);
    }
}

/* the sidebar drops under the transfer */
@media (max-width: 991.98px) {
    .wc-tc-item {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--font-md);
    }

    .wc-tc-side {
        min-height: 0;
        margin-top: 0;
        padding-bottom: var(--font-md);
    }
}

@media (max-width: 767.98px) {
    .wc-tc-title {
        margin-bottom: var(--font-md);
        font-size: 30px;
        line-height: 38px;
    }

    .wc-tc-panel {
        padding: var(--font-md) var(--font-uxs);
    }

    .wc-tc-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--font-uxs);
    }

    .wc-tc-total {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--font-uxs);
    }

    .wc-tc-new,
    .wc-tc-back {
        justify-content: center;
    }

    .wc-tc-new {
        width: 100%;
    }

    .wc-tc-box {
        padding: var(--font-uxs);
    }

    .wc-tc-head,
    .wc-tc-date {
        padding-left: var(--font-uxs);
        padding-right: var(--font-uxs);
    }

    .wc-tc-head {
        padding: 0;
    }

    .wc-tc-date {
        padding-top: var(--font-femto);
        padding-bottom: var(--font-femto);
    }

    .wc-tc-day {
        margin-left: 0;
    }

    /* logo and name on top, vehicle centred, then the timeline */
    .wc-tc-card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--font-uxs);
        padding: var(--font-uxs);
    }

    .wc-tc-img {
        align-self: center;
    }

    .wc-tc-card .wc-tr-stops {
        grid-template-columns: 48px 19px minmax(0, 1fr);
        margin-top: 0;
    }

    .wc-tc-side {
        padding-bottom: calc(var(--font-md) * 3);
    }
}

/* =========================================================================
   TRANSFER CHECKOUT  (XD "Flusso 1" / Check out solo andata, 1920x1803)
   check-out.html?product=transfer reuses the flight/hotel checkout markup and
   classes unchanged: heading utilities, flight-tab-content, passeggeri-details,
   volaeasy-search-input, checkout-form with the Bootstrap grid, volaeasy fields.
   .wc-co-transfer (on the transfer block) only adds what XD draws differently:
   type, colours and icons at every width, and the 1920 spacing from 1200px up.
   Below 1200px the shared utilities keep the flight/hotel layout.
   ========================================================================= */
/* card 1220 r10; "Prenotazione" Google Sans Flex ExtraBold 50/62 */
.checkout-card:has(.wc-co-transfer) {
    max-width: 1220px;
    margin: 0 auto;
    border-radius: 10px;
}

    .checkout-card:has(.wc-co-transfer) h2 {
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 800 !important;
        font-size: 50px;
        line-height: 62px;
    }

    /* stepper: done step is a 30px #0C8AE4 circle-check, open steps #B4B2B0 dots
   on a solid 1px #E8E8E8 line; labels Bold (current) / Medium (others) */
    .checkout-card:has(.wc-co-transfer) .stepper-item::after {
        border-bottom: 1px solid #e8e8e8;
    }

    .checkout-card:has(.wc-co-transfer) .stepper-item:not(.active) .step-counter {
        background-color: #b4b2b0;
    }

    .checkout-card:has(.wc-co-transfer) .stepper-item.active .step-counter {
        background: none;
    }

        .checkout-card:has(.wc-co-transfer) .stepper-item.active .step-counter i {
            --fa: "\f05d";
            width: auto;
            font-size: 30px;
            line-height: 30px;
            color: #0c8ae4;
        }

    .checkout-card:has(.wc-co-transfer) .stepper-item .step-name {
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 500;
    }

    .checkout-card:has(.wc-co-transfer) .stepper-item.active .step-name {
        font-weight: 700;
    }

    /* the rule under the stepper: one 3px #0D8AE4 line */
    .checkout-card:has(.wc-co-transfer) .border-2.border-color-blue {
        border-width: 3px 0 0 !important;
    }

    /* INDIETRO: Medium */
    .checkout-card:has(.wc-co-transfer) .back-page {
        font-weight: 500;
    }

/* heading "DATI PASSEGGERI": Bold 18/22, user-pen 20, 4 between */
.wc-co-transfer :has(> .fa-user-pen) {
    gap: 4px !important;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
}

.wc-co-transfer .fa-user-pen {
    width: auto;
    font-size: 20px;
}

/* route bar: 1px #707070 frame (38 tall), navy van 10 before the text */
.wc-co-transfer .flight-tab-content {
    border: 1px solid var(--color-grey70);
    line-height: 28px;
    overflow-wrap: anywhere;
}

    .wc-co-transfer .flight-tab-content i {
        margin-right: 2px;
        color: var(--color-primary);
    }

/* "Passeggero 1 - ...": Bold 18/22, user icon 20, 18 to the text */
.wc-co-transfer .passeggeri-details {
    font-weight: 700;
    line-height: 22px;
}

    .wc-co-transfer .passeggeri-details i {
        width: auto;
        margin-right: 14px;
        font-size: 20px;
    }

/* "Cerca viaggiatore": 1px navy r3, Fira Sans 18 #B4B2B0 24 in, 30px icon;
   overflow clips the corners, so keep it from shrinking like flight's box */
.wc-co-transfer .volaeasy-search-input {
    flex-shrink: 0;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    overflow: hidden;
}

    .wc-co-transfer .volaeasy-search-input input {
        min-width: 0;
        padding: 0 0 0 24px;
        font-family: "Fira Sans", sans-serif;
        font-size: calc(var(--font-xs) + 1px);
    }

        .wc-co-transfer .volaeasy-search-input input::placeholder {
            color: #b4b2b0;
        }

    .wc-co-transfer .volaeasy-search-input .search-btn,
    .wc-co-transfer .volaeasy-search-input .fa-user-magnifying-glass {
        background-color: var(--color-primary);
    }

    .wc-co-transfer .volaeasy-search-input .fa-user-magnifying-glass {
        font-size: 30px;
    }

/* form: white r3 */
.wc-co-transfer .checkout-form {
    border-radius: 3px;
}

/* fields at rest (empty, unfocused): label #102036, 22 in; tops follow the
   shared calc(--font-uxs * 2) so they scale with the field */
.wc-co-transfer .volaeasy-input.no-icon input:placeholder-shown:not(:focus) ~ label {
    left: 22px !important;
    top: calc(var(--font-uxs) * 2 + 1px);
    color: var(--color-grey36);
}

/* dropdowns: r3 like the inputs; caret chevron-down Light 20 #000, 21 in */
.wc-co-transfer .volaeasy-input-dropdown .volaeasy-fake-input {
    border-radius: 3px !important;
}

.wc-co-transfer .volaeasy-input-dropdown .dropdown-chevron {
    width: auto;
    right: 21px !important;
    font-size: 20px !important;
    line-height: 21px;
    color: var(--color-black) !important;
}

/* Prefisso at rest: Fira Sans 18 #102036, 20/29 in */
.wc-co-transfer .is-simple:not(.show):not(.has-value) label {
    left: 20px !important;
    top: calc(var(--font-uxs) * 2 - 1px) !important;
    transform: none !important;
    font-family: "Fira Sans", sans-serif;
    color: var(--color-grey36) !important;
}

/* Ora at rest: clock 20 at 19/32, label 45/31 */
.wc-co-transfer .volaeasy-input-dropdown:not(.is-simple):not(.show):not(.has-value) .volaeasy-icon {
    left: 19px;
    top: calc(var(--font-uxs) * 2 + 2px);
    font-size: 20px;
    line-height: 21px;
}

.wc-co-transfer .volaeasy-input-dropdown:not(.is-simple):not(.show):not(.has-value) label {
    left: 45px;
    top: calc(var(--font-uxs) * 2 + 1px);
    margin: 0;
    color: var(--color-grey36);
}

/* "Salva il passeggero": floppy 20 | 7 | Fira Sans 18 (flight has a checkbox
   here, so there is no shared control to reuse) */
.wc-cot-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Fira Sans", sans-serif;
    font-size: calc(var(--font-xs) + 1px);
    line-height: 22px;
    color: var(--color-grey36);
    white-space: nowrap;
}

    .wc-cot-save i {
        width: auto;
        font-size: 20px;
        color: var(--color-primary);
    }

    .wc-cot-save:hover {
        color: var(--color-primary);
    }

/* AVANTI: XD 110x50 with a 30px chevron (class form of the inline style the
   flight/hotel buttons carry) */
.wc-co-next {
    width: 110px;
    min-width: 110px;
    padding: 0;
    gap: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: var(--font-micro);
    font-weight: 500;
    text-decoration: none;
}

    .wc-co-next i {
        width: auto;
        font-size: 30px;
    }

@media (min-width: 768px) {

    /* XD: 69 under AVANTI, stepper 59 above and below, steps 240 apart */
    .checkout-card:has(.wc-co-transfer) {
        padding-bottom: 69px;
    }

        .checkout-card:has(.wc-co-transfer) .checkout-stepper {
            padding-top: 59px;
            padding-bottom: 59px;
        }

        .checkout-card:has(.wc-co-transfer) .stepper-wrapper {
            max-width: 720px;
        }
}

/* XD search 346 wide wherever the passenger row has room for it */
@media (min-width: 992px) {
    .wc-co-transfer .volaeasy-search-input {
        width: 346px;
    }
}

/* XD 1920 spacing: heading 10 under the rule and 39 over the route; van 34 in;
   search 7 lower than the passenger text; form 61/36/62 with
   halves 44 and rows 31 apart; save 19 after the Cod. sconto field */
@media (min-width: 1200px) {
    .wc-co-transfer :has(> .fa-user-pen) {
        margin: 10px 0 39px !important;
    }

    .wc-co-transfer .flight-tab-content {
        padding-left: 34px !important;
    }

        /* XD a/r: the longer date ends 23 in from the bar's right edge */
        .wc-co-transfer .flight-tab-content:has([data-trip="ar"]) {
            padding-right: 22px;
        }

    .wc-co-transfer .passeggeri-details {
        position: relative;
        top: -3px;
    }

    .wc-co-transfer .volaeasy-search-input {
        position: relative;
        top: 4px;
    }

    .wc-co-transfer .checkout-form {
        padding: 61px 36px 62px !important;
    }

        .wc-co-transfer .checkout-form > .row {
            --bs-gutter-x: 44px;
            --bs-gutter-y: 31px;
        }

    .wc-cot-save {
        margin: 0 0 -2px 19px;
    }
}

@media (max-width: 991.98px) {
    .checkout-card:has(.wc-co-transfer) h2 {
        font-size: calc(var(--font-md) * 2 - 2px);
        line-height: 1.2;
    }
}

.transfer-disable {
    opacity: 0.6;
    pointer-events: none;
}

.wc-transfer-service-icon {
    font-style: normal;
}

.icn-srd::before {
    content: "\f55e";
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
}

.icn-pvt::before {
    content: "\f1b9";
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
}

.icn-meet-greet::before {
    content: "\f2b5";
    font-family: 'Font Awesome 7 Pro';
    font-weight: 400;
}

.icn-meet-point::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    content: "\f21d";
}

.icn-dir-ride::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    content: "\f360";
}

.icn-s-btwn::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    content: "\f55b";
}

.icn-g-f::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 400;
    content: "\f18c";
}

.icn-no-g-f,
.icn-no-wc-a {
    position: relative;
}

    .icn-no-g-f::before {
        font-family: 'Font Awesome 7 Pro';
        font-weight: 400;
        content: "\f18c";
        color: var(--color-grey74);
    }

    .icn-no-g-f::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: -1px;
        right: 0;
        height: 10px;
        border-top: 2px solid #ff0000;
        z-index: 0;
        width: 20px;
        transform: rotate(320deg);
    }

.icn-wc-a::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    content: "\f193";
}

.icn-no-wc-a::before {
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    content: "\f193";
    color: var(--color-grey74);
}

.icn-no-wc-a::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: -1px;
    right: 0;
    height: 10px;
    border-top: 2px solid #ff0000;
    z-index: 0;
    width: 20px;
    transform: rotate(320deg);
}


/* Baggage Hover Tooltip Popup */
.cd_bag_tooltip_wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    vertical-align: middle;
}

    .cd_bag_tooltip_wrapper i {
        font-size: 13px;
        width: 14px;
        text-align: center;
    }

    .cd_bag_tooltip_wrapper .cd_bag_tooltip_popup {
        position: absolute;
        bottom: calc(100% + 7px);
        left: 0;
        background-color: #1e1427;
        color: #ffffff;
        border-radius: 8px;
        padding: 7px 12px;
        min-width: 170px;
        max-width: min(290px, 85vw);
        width: max-content;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        z-index: 1050;
        visibility: hidden;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        pointer-events: none;
        text-align: left;
        display: flex;
        flex-direction: column;
    }

        .cd_bag_tooltip_wrapper .cd_bag_tooltip_popup::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 24px;
            width: 0;
            height: 0;
            border-width: 6px 6px 0 6px;
            border-style: solid;
            border-color: #1e1427 transparent transparent transparent;
        }

    .cd_bag_tooltip_wrapper:hover .cd_bag_tooltip_popup {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

.cd_bag_tooltip_section {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    gap: 2px;
}

    .cd_bag_tooltip_section:first-child {
        padding-top: 0;
    }

    .cd_bag_tooltip_section:last-child {
        padding-bottom: 0;
    }

    .cd_bag_tooltip_section:not(:last-child) {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    }

.cd_bag_tip_title {
    font-size: 11.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
    word-break: break-word;
}

.cd_bag_tip_text {
    font-size: 11px;
    font-weight: 500;
    color: #e2e8f0;
    line-height: 1.35;
}

.cd_bag_tip_desc {
    font-size: 10.5px;
    color: #cbd5e1;
    line-height: 1.35;
}



/* Upsell Fare Route Navigation Bar (Tabs) */
.upsell-route-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    height: 32px;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
}

.upsell-route-arrow {
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    color: #94a3b8;
    flex-shrink: 0;
    user-select: none;
    transition: color 0.15s;
}

    .upsell-route-arrow:hover {
        color: var(--color-primary, #214068);
    }

.upsell-route-list {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

    .upsell-route-list::-webkit-scrollbar {
        display: none;
    }

.upsell-route-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 11.5px;
    font-family: "Fira Sans", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-grey36, #64748b);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
}

    .upsell-route-item:hover {
        color: var(--color-primary, #214068);
    }

    .upsell-route-item.active {
        color: var(--color-primary, #214068);
        font-weight: 600;
        border-bottom: 2px solid var(--color-primary, #214068);
    }

.upsell-route-bar:has(.upsell-route-item:only-child) .upsell-route-arrow {
    display: none;
}

.upsell-tab-pane {
    animation: fadeInTab 0.15s ease-in-out;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Flight detail print Baggage List */
.flight-leg-meta.flight-baggage-list,
ul.flight-leg-meta {
    display: flex;
    flex-direction: column !important;
    gap: 4px;
    padding-left: 0;
    margin-bottom: 0;
}

    .flight-leg-meta.flight-baggage-list li,
    ul.flight-leg-meta li {
        display: flex;
        align-items: center;
        line-height: 1.4;
        color: var(--color-grey36);
        font-size: var(--font-micro, 12px);
    }

        .flight-leg-meta.flight-baggage-list li i,
        ul.flight-leg-meta li i {
            width: 16px;
            text-align: center;
            margin-right: 6px;
            flex-shrink: 0;
        }

        .flight-leg-meta.flight-baggage-list li.text-muted,
        ul.flight-leg-meta li.text-muted {
            color: #6c757d !important;
        }

.wc-border-left {
    border-left: 1px solid var(--color-primary);
}

.wc-supplier-info {
    font-weight: 600;
    font-size: 10px;
    color: var(--bs-red);
    text-transform: initial;
}

.wc-on-request-pill {
    color: #fff;
    background: #7d7d7d;
    padding: 3px 5px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 8px;
    margin-right: 8px;
    line-height: initial;
}

.wc-transfer-services-details {
    padding: var(--responsive-margin-padding) 0 0 0;
    grid-column: 1 / -1;
}

.volaeasy-checkbox-container.is-error {
    border: 1px solid #fc9797 !important;
}