#scHotelBooking.sc-flight-booking {
    min-height: 660px;
    /* overflow: hidden; */
    z-index: 111111111;
    padding-top: 54px;
    background-color: #f7fafb;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(217, 12, 56, .09) 0, rgba(217, 12, 56, 0) 24%),
        radial-gradient(circle at 72% 55%, rgba(30, 126, 142, .09) 0, rgba(30, 126, 142, 0) 27%),
        linear-gradient(135deg, #fff 0%, #f8fbfc 47%, #edf5f7 100%);
    background-position: center;
    background-size: cover;
}

.sc-flight-booking .sc-hotel-overlay {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 44%, rgba(255, 255, 255, .05) 78%),
        linear-gradient(0deg, rgba(244, 248, 249, .92) 0%, rgba(244, 248, 249, 0) 52%);
}

.sc-flight-booking .sc-hotel-container {
    position: relative;
    z-index: 2;
}

.sc-flight-booking .sc-hotel-hero-copy {
    width: min(760px, 64vw);
}

.sc-flight-booking .sc-hotel-hero-copy h1 {
    max-width: 770px;
    font-size: clamp(44px, 4vw, 63px);
}

.sc-flight-booking .sc-hotel-hero-copy h1 em {
    color: var(--hotel-red);
    font-style: normal;
}

.sc-flight-booking .sc-hotel-hero-copy > p {
    max-width: 590px;
}

/* Decorative route artwork: code-native SVG, no extra image request. */
.sc-flight-art {
    position: absolute;
    z-index: 0;
    top: 20px;
    right: max(12px, calc((100vw - 1280px) / 2));
    width: min(43vw, 590px);
    pointer-events: none;
    opacity: .9;
}

.sc-flight-art svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    filter: drop-shadow(0 22px 38px rgba(27, 70, 81, .1));
}

.sc-flight-route {
    stroke: rgba(30, 126, 142, .15);
    stroke-width: 22;
    stroke-linecap: round;
}

.sc-flight-route-dash {
    stroke: #1e7e8e;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 8 13;
}

.sc-flight-plane {
    fill: rgba(255, 255, 255, .96);
    stroke: var(--hotel-red);
    stroke-width: 3;
    stroke-linejoin: round;
}

.sc-flight-dot {
    fill: #fff;
    stroke: #1e7e8e;
    stroke-width: 4;
}

.sc-flight-dot-end {
    stroke: var(--hotel-red);
}

.sc-flight-art-ring {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(30, 126, 142, .11);
    border-radius: 50%;
}

.sc-flight-art-ring-one {
    top: 47px;
    right: 41px;
    width: 245px;
    height: 245px;
}

.sc-flight-art-ring-two {
    top: 84px;
    right: 77px;
    width: 173px;
    height: 173px;
    border-color: rgba(217, 12, 56, .1);
}

/* Toolbar */
.sc-flight-search-shell {
    transform: translateY(34px);
    animation: scFlightLift .72s .08s cubic-bezier(.2, .75, .25, 1) both;
}

.sc-flight-toolbar {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 3px;
}

.sc-flight-tool {
    position: relative;
}

.sc-flight-tool-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px;
    color: #29424e;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #dce6e9;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(26, 48, 58, .06);
    cursor: pointer;
    font-size: 10px;
    font-weight: 720;
    transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sc-flight-tool-trigger:hover,
.sc-flight-tool.is-open .sc-flight-tool-trigger {
    color: var(--hotel-red);
    border-color: rgba(217, 12, 56, .28);
    box-shadow: 0 9px 22px rgba(217, 12, 56, .09);
}

.sc-flight-tool-trigger > svg:first-child {
    width: 17px;
    height: 17px;
    color: var(--hotel-red);
}

.sc-flight-tool-chevron {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    color: #70838c;
    transition: transform .18s ease;
}

.sc-flight-tool.is-open .sc-flight-tool-chevron {
    transform: rotate(180deg);
}

.sc-flight-tool-menu,
.sc-flight-bags-popover {
    position: absolute;
    z-index: 120;
    top: calc(100% + 9px);
    left: 0;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    border: 1px solid #e0e7e9;
    border-radius: 13px;
    box-shadow: 0 20px 44px rgba(15, 34, 44, .18);
    transform: translateY(-6px) scale(.985);
    transform-origin: top left;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.sc-flight-tool.is-open .sc-flight-tool-menu,
.sc-flight-tool.is-open .sc-flight-bags-popover {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sc-flight-tool-menu {
    width: 165px;
    padding: 6px;
}

.sc-flight-tool-menu button {
    display: flex;
    width: 100%;
    padding: 10px 11px;
    color: #334b56;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}

.sc-flight-tool-menu button:hover,
.sc-flight-tool-menu button.is-selected {
    color: var(--hotel-red);
    background: var(--hotel-red-soft);
}

.sc-flight-bags-popover {
    width: min(335px, calc(100vw - 28px));
    padding: 14px;
}

/* Main flight form */
.sc-flight-search-grid {
    grid-template-columns: minmax(165px, 1fr) 42px minmax(165px, 1fr) minmax(130px, .72fr) minmax(130px, .72fr) minmax(195px, 1.04fr) 142px;
    grid-template-areas: "from swap to depart return travellers search";
    align-items: stretch;
}

.sc-flight-from { grid-area: from; }
.sc-flight-swap { grid-area: swap; }
.sc-flight-to { grid-area: to; }
.sc-flight-depart { grid-area: depart; }
.sc-flight-return { grid-area: return; }
.sc-flight-travellers { grid-area: travellers; }
.sc-flight-search-button { grid-area: search; }

.sc-flight-search-grid .sc-hotel-field {
    min-height: 76px;
    padding-inline: 11px;
}

.sc-flight-search-grid .sc-hotel-field:first-child,
.sc-flight-search-grid .sc-flight-from {
    border-radius: 13px 7px 7px 13px;
}

.sc-flight-search-grid .sc-flight-to,
.sc-flight-search-grid .sc-flight-depart,
.sc-flight-search-grid .sc-flight-return,
.sc-flight-search-grid .sc-flight-travellers {
    border-radius: 7px;
}

.sc-flight-search-grid .sc-hotel-field > label {
    margin-left: 37px;
}

.sc-flight-search-grid .sc-hotel-field-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    margin-right: 6px;
}

.sc-flight-search-grid .sc-hotel-field-copy input,
.sc-flight-search-grid .sc-hotel-field-copy strong {
    font-size: 11px;
}

.sc-flight-search-grid .sc-hotel-field-copy small {
    font-size: 8px;
}

.sc-flight-airport .sc-hotel-dropdown {
    width: max(100%, 340px);
}

.sc-flight-swap {
    position: relative;
    z-index: 8;
    display: grid;
    width: 38px;
    height: 38px;
    align-self: center;
    justify-self: center;
    padding: 0;
    place-items: center;
    color: var(--hotel-red);
    background: #fff;
    border: 3px solid var(--hotel-red);
    border-radius: 50%;
    box-shadow: 0 6px 15px rgba(117, 11, 37, .17);
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.sc-flight-swap:hover {
    color: #fff;
    background: var(--hotel-red);
    transform: rotate(180deg);
}

.sc-flight-swap svg {
    width: 18px;
    height: 18px;
}

.sc-flight-date .sc-hotel-date-part {
    min-height: 30px;
}

.sc-flight-date.is-disabled {
    opacity: .62;
    background: #f2f5f6;
}

.sc-flight-date.is-disabled .sc-hotel-date-part,
.sc-flight-date.is-disabled input {
    pointer-events: none;
    cursor: default;
}

.sc-flight-travellers-popover {
    width: min(385px, calc(100vw - 32px));
}

.sc-flight-cabin {
    min-width: 0;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
}

.sc-flight-cabin legend {
    margin-bottom: 8px;
    color: #263d48;
    font-size: 11px;
    font-weight: 720;
}

.sc-flight-cabin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.sc-flight-cabin-grid button {
    min-height: 36px;
    padding: 6px 7px;
    color: #5a6f79;
    background: #f7f9fa;
    border: 1px solid #dfe7ea;
    border-radius: 8px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 680;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.sc-flight-cabin-grid button:hover,
.sc-flight-cabin-grid button.is-selected {
    color: var(--hotel-red);
    background: var(--hotel-red-soft);
    border-color: rgba(217, 12, 56, .28);
}

.sc-flight-search-button {
    min-height: 76px;
}

.sc-flight-options {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.sc-hotel-toast p {
    margin: 0;
}

@keyframes scFlightLift {
    from { opacity: 0; transform: translateY(58px); }
    to { opacity: 1; transform: translateY(34px); }
}

@media (max-width: 1160px) {
    #scHotelBooking.sc-flight-booking {
        min-height: 780px;
    }

    .sc-flight-art {
        right: -35px;
        width: 47vw;
        opacity: .64;
    }


    .sc-flight-search-grid {
        grid-template-columns: minmax(200px, 1fr) 42px minmax(200px, 1fr) minmax(155px, .75fr) minmax(155px, .75fr);
        grid-template-areas:
            "from swap to depart return"
            "travellers travellers travellers search search";
    }

    .sc-flight-search-grid .sc-flight-from {
        border-radius: 13px 7px 7px 7px;
    }

    .sc-flight-search-grid .sc-flight-return {
        border-radius: 7px 13px 7px 7px;
    }

    .sc-flight-search-grid .sc-flight-travellers {
        border-radius: 7px 7px 7px 13px;
    }

    .sc-flight-search-button {
        border-radius: 7px 7px 13px 7px;
    }
}

@media (max-width: 820px) {
    #scHotelBooking.sc-flight-booking {
        min-height: auto;
        padding: 36px 13px 0;
        background-color: #f7fafb;
        background-image:
            radial-gradient(circle at 98% 5%, rgba(217, 12, 56, .1) 0, rgba(217, 12, 56, 0) 29%),
            radial-gradient(circle at 10% 48%, rgba(30, 126, 142, .08) 0, rgba(30, 126, 142, 0) 30%),
            linear-gradient(155deg, #fff 0%, #f6fafb 58%, #edf5f7 100%);
        background-position: center;
        background-size: cover;
    }

    .sc-flight-booking .sc-hotel-overlay {
        background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(242, 247, 248, .84));
    }

    .sc-flight-booking .sc-hotel-hero-copy {
        width: 100%;
    }

    .sc-flight-booking .sc-hotel-hero-copy h1 {
               font-size: 30px;
        line-height: 1.3;
    }

    .sc-flight-art {
        top: 112px;
        right: -42px;
        width: min(64vw, 430px);
        opacity: .22;
    }

    .sc-flight-search-shell {
        transform: translateY(28px);
        animation: scFlightLiftMobile .68s .05s cubic-bezier(.2, .75, .25, 1) both;
    }

    .sc-flight-toolbar {
        margin-left: 0;
    }

    .sc-flight-search-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "from"
            "swap"
            "to"
            "depart"
            "return"
            "travellers"
            "search";
    }

    .sc-flight-search-grid .sc-hotel-field,
    .sc-flight-search-grid .sc-flight-from,
    .sc-flight-search-grid .sc-flight-to,
    .sc-flight-search-grid .sc-flight-depart,
    .sc-flight-search-grid .sc-flight-return,
    .sc-flight-search-grid .sc-flight-travellers {
        min-height: 68px;
        border-radius: 7px !important;
    }

    .sc-flight-search-grid .sc-flight-from {
        border-radius: 13px 13px 7px 7px !important;
    }

    .sc-flight-swap {
        width: 36px;
        height: 36px;
        margin: -19px 17px;
        justify-self: end;
        transform: rotate(90deg);
    }

    .sc-flight-swap:hover {
        transform: rotate(270deg);
    }

    .sc-flight-search-button {
        min-height: 64px;
        border-radius: 7px 7px 13px 13px;
    }

    .sc-flight-airport .sc-hotel-dropdown {
        width: 100%;
    }

    .sc-flight-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    @keyframes scFlightLiftMobile {
        from { opacity: 0; transform: translateY(48px); }
        to { opacity: 1; transform: translateY(28px); }
    }
}

@media (max-width: 470px) {
    .sc-flight-booking .sc-hotel-hero-copy h1 br {
        display: none;
    }

    .sc-flight-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-flight-tool-trigger {
        justify-content: space-between;
        width: 100%;
    }

    .sc-flight-tool-trigger > svg:first-child {
        margin-right: 1px;
    }

    .sc-flight-tool-trigger > span {
        flex: 1;
        text-align: left;
    }

    .sc-flight-tool-menu,
    .sc-flight-bags-popover {
        right: 0;
        width: 100%;
    }


    .sc-flight-options {
        grid-template-columns: 1fr;
    }

    .sc-flight-cabin-grid {
        grid-template-columns: 1fr;
    }
}
