/*
 * Flight search widget (searchform.php)
 * One bar split into From / To / dates / travellers with fare options underneath,
 * plus the travellers popover, airport autocomplete and date picker.
 */

:root {
    --sf-blue: #2c5aa0;
    --sf-blue-dark: #224a87;
    --sf-blue-soft: #f2f7fd;
    --sf-accent: #fc6c00;
    --sf-accent-dark: #fc6c00;
    --sf-ink: #14161a;
    --sf-text: #4a4f59;
    --sf-muted: #8b919c;
    --sf-line: #e6e8ed;
    --sf-chip: #f2f3f5;
    --sf-range: #ffeceb;
    --sf-red: #fc6c00;
}

/* jQuery UI ships its own font stack - keep the site font everywhere */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: "Google Sans", sans-serif;
}


/* ---------- card ---------- */

.sf-card {
    position: relative;
    margin-right: 46px;   /* room for the search button that hangs off the right edge */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(20, 22, 26, .06), 0 28px 50px -26px rgba(11, 42, 91, .4);
    scroll-margin-top: 110px;
}

.sf-row {
    display: flex;
    align-items: stretch;
    padding-right: 40px;   /* the part of the search button that sits inside the card */
    height: 94px;
}


/* ---------- round trip / one way ---------- */

.sf-trip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;          /* fixed so the search button below can be offset by it */
    padding: 0 14px;
    border-bottom: 1px solid var(--sf-line);
}

.sf-trip-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

/* radio dot */
.sf-trip-opt::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #c5c9d1;
    border-radius: 50%;
    background: #fff;
    transition: border-color .2s, background-color .2s;
}

.sf-trip-opt:hover { color: var(--sf-ink); }

.sf-trip-opt.is-active {
    background: var(--sf-blue-soft);
    color: var(--sf-blue);
}

.sf-trip-opt.is-active::before {
    border-color: var(--sf-blue);
    background: var(--sf-blue);
    box-shadow: inset 0 0 0 3px #fff;
}

.sf-trip-opt:focus { outline: 0; }
.sf-trip-opt:focus-visible { box-shadow: 0 0 0 2px var(--sf-blue); }

/* the bar takes the card's top corners, so the boxes under it stay square */
.sf-trip ~ .sf-row .sf-field {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* desktop: the search button is placed from the card top, so move it down by the bar */
.sf-trip ~ .sf-submit { top: 70px; }


/* ---------- segments ---------- */

.sf-field,
.sf-date {
    position: relative;
    min-width: 0;
    padding: 10px 20px 10px;
    cursor: pointer;
    transition: background-color .2s;
}

.sf-field:hover,
.sf-field:focus-within,
.sf-field.is-open,
.sf-date:hover,
.sf-date:focus-within { background: var(--sf-blue-soft); }

.sf-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--sf-text);
    cursor: inherit;
}

.sf-label-ico {
    display: block;
    flex: 0 0 15px;
}

.sf-caret {
    width: 7px;
    height: 7px;
    margin: -4px 0 0 2px;
    border-right: 2px solid var(--sf-blue);
    border-bottom: 2px solid var(--sf-blue);
    transform: rotate(45deg);
}

.sf-input,
.sf-value {
    display: block;
    width: 100%;
    height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -.01em;
    color: var(--sf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: inherit;
}

.sf-input::placeholder {
    font-size: 22px;
    font-weight: 600;
    color: #b3b8c2;
    opacity: 1;
}

.sf-sub {
    display: block;
    min-height: 18px;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    color: var(--sf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* from / to */

.sf-route {
    position: relative;
    display: flex;
    flex: 2.6 1 0;
    min-width: 0;
}

.sf-route > .sf-field { flex: 1 1 0; }

.sf-from {
    padding-right: 32px;
    border-top-left-radius: 14px;
}

.sf-to {
    padding-left: 34px;
    border-left: 1px solid var(--sf-line);
}

.sf-place .sf-input { cursor: text; }

.sf-place .sf-sub:empty::before {
    content: 'City, airport or code';
    color: var(--sf-muted);
}

/* "DXB, Dubai": the code is a separate element only so the phone layout can move it */
.sf-sub .sf-code { font-weight: inherit; }

/* short weekday next to the date - phone layout only */
.sf-show-day { display: none; }

.sf-swap {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sf-blue);
    box-shadow: 0 6px 14px -6px rgba(44, 90, 160, .8);
    cursor: pointer;
    transition: background-color .2s, transform .35s ease;
}

.sf-swap::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 9px;
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-mask: url(../images/sf-swap.svg) no-repeat center / contain;
    mask: url(../images/sf-swap.svg) no-repeat center / contain;
}

.sf-swap:hover { background-color: var(--sf-blue-dark); }
.sf-swap.is-spun { transform: rotate(180deg); }

.sf-swap:focus { outline: 0; }
.sf-swap:focus-visible { box-shadow: 0 0 0 3px rgba(44, 90, 160, .35); }


/* dates: one segment, two halves */

.sf-dates {
    display: flex;
    flex: 2 1 0;
    padding: 0;
    border-left: 1px solid var(--sf-line);
}

.sf-dates:hover,
.sf-dates:focus-within { background: transparent; }

.sf-date { flex: 1 1 0; }

.sf-date + .sf-date { border-left: 1px solid var(--sf-line); }

/* the input covers the whole half (so the calendar opens under the box) and stays invisible -
   the date is drawn by .sf-show */
.sf-date .sf-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    padding: 38px 20px 32px;
    font-size: 16px;
    color: transparent;
    caret-color: transparent;
}

.sf-date .sf-input::selection { background: transparent; }

.sf-date .sf-input::placeholder {
    font-size: 18px;
    color: #b3b8c2;
}

.sf-show {
    display: block;
    height: 34px;
    font-size: 16px;
    font-weight: 500;
    line-height: 34px;
    color: var(--sf-ink);
    white-space: nowrap;
}

.sf-show b {
    margin-right: 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.sf-clear {
    position: absolute;
    top: 16px;
    right: 14px;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c5c9d1;
    cursor: pointer;
    transition: background-color .2s;
}

.sf-clear::before,
.sf-clear::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transform: rotate(45deg);
}

.sf-clear::after { transform: rotate(-45deg); }

.sf-clear:hover { background: var(--sf-text); }

.sf-date.is-off .sf-clear { display: none; }

.sf-date.is-off .sf-sub::before {
    content: 'Save more on round trips';
    color: var(--sf-muted);
}


/* travellers */

.sf-pax {
    flex: 1.35 1 0;
    padding: 0;
    border-left: 1px solid var(--sf-line);
}

.sf-pax-toggle {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 20px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.sf-pax-toggle:focus { outline: 0; }
.sf-pax-toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--sf-blue); }

.sf-value {
    font-size: 16px;
    font-weight: 500;
}

.sf-value b {
    margin-right: 4px;
    font-size: 22px;
    font-weight: 700;
}


/* search button: hangs off the right edge of the card */

.sf-submit {
    position: absolute;
    right: -46px;
    top: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 172px;
    height: 58px;
    margin: 0;
    padding: 0 22px 0 30px;
    border: 0;
    border-radius: 999px;
    background: #fc6c00;
    box-shadow: 0 12px 12px -12px #fc6c00;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.sf-submit:hover {
    background: #f36804;
    box-shadow: 0 14px 26px -12px rgba(223, 42, 42, 1);
}

.sf-submit:active { transform: translateY(1px); }

.sf-submit:focus { outline: 0; }
.sf-submit:focus-visible { box-shadow: 0 0 0 3px rgba(250, 58, 58, .35); }


/* fare options under the bar */

.sf-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--sf-line);
}

.sf-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 6px;
    background: var(--sf-chip);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sf-text);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.sf-check:hover { background: #e9ebef; }

.sf-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--sf-blue);
    cursor: pointer;
}

.sf-check:has(input:checked) {
    background: #e7effa;
    color: var(--sf-blue);
}


/* ---------- errors ---------- */

.sf-field.has-error:not(.sf-dates),
.sf-date.has-error { background: #fff5f5; }

.sf-error {
    position: absolute;
    left: 20px;
    top: calc(100% - 8px);
    z-index: 6;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--sf-red);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.sf-error::before {
    content: '';
    position: absolute;
    left: 16px;
    top: -4px;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}


/* ---------- travellers popover ---------- */

.sf-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 340px;
    padding: 8px 20px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 50px -16px rgba(11, 42, 91, .35), 0 0 0 1px rgba(11, 42, 91, .05);
    cursor: default;
}

.sf-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}

.sf-count-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sf-ink);
}

.sf-count-text small {
    display: block;
    font-size: 12.5px;
    color: var(--sf-muted);
}

.sf-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-stepper button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #c9d2e0;
    border-radius: 50%;
    background: #fff;
    color: var(--sf-blue);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.sf-stepper button:hover:not(:disabled) {
    border-color: var(--sf-blue);
    background: var(--sf-blue-soft);
}

.sf-stepper button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.sf-stepper output {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    color: var(--sf-ink);
}

.sf-cabins {
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-cabins legend {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-muted);
}

.sf-cabin {
    position: relative;
    margin: 0;
    flex: 1 1 calc(50% - 4px);
}

.sf-cabin input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sf-cabin span {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    color: var(--sf-text);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.sf-cabin span:hover { border-color: #b8c3d6; }

.sf-cabin input:checked + span {
    border-color: var(--sf-blue);
    background: var(--sf-blue-soft);
    color: var(--sf-blue);
}

.sf-cabin input:focus-visible + span { box-shadow: 0 0 0 3px rgba(44, 90, 160, .2); }

.sf-done {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    background: var(--sf-blue);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.sf-done:hover { background: var(--sf-blue-dark); }


/* ---------- airport autocomplete ---------- */

.ui-autocomplete.sf-ac {
    z-index: 1050 !important;
    max-height: 372px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 50px -16px rgba(11, 42, 91, .35), 0 0 0 1px rgba(11, 42, 91, .05);
}

/* jquery-ui.css paints menu rows with icon sprites and !important borders - clear those for this menu */
.sf-ac .ui-menu-item {
    border: 0 !important;
    background: none !important;
}

.sf-ac .ui-menu-item .ui-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 10px;
    background: none !important;
    font-size: inherit;
    font-weight: 400;
    color: var(--sf-ink);
}

.sf-ac .ui-menu-item .ui-menu-item-wrapper.ui-state-active { background: var(--sf-blue-soft) !important; }

.sf-ac .ui-menu-item .ui-menu-item-wrapper .sf-ac-text { color: var(--sf-ink) !important; font-weight: 400; }
.sf-ac .ui-menu-item .ui-menu-item-wrapper .sf-ac-code { color: var(--sf-accent-dark) !important; font-weight: 700; }

.sf-ac .ui-state-disabled { opacity: 1; }

.sf-ac .ui-state-disabled .ui-menu-item-wrapper {
    padding: 12px !important;
    color: var(--sf-muted);
    font-size: 14px;
}

.sf-ac-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eaf1fa url(../images/sf-plane.svg) no-repeat center / 18px;
}

.sf-ac-text {
    flex: 1 1 auto;
    min-width: 0;
}

.sf-ac-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.sf-ac-text small {
    display: block;
    font-size: 12.5px;
    color: var(--sf-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-ac-code {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ffeeee;
    font-size: 13px;
    letter-spacing: .04em;
}


/* ---------- date picker ---------- */

/* jQuery UI renders the picker into the page up front and shows it inline when needed */
#ui-datepicker-div { display: none; }

.ui-datepicker.sf-dp {
    z-index: 1050 !important;
    width: 320px;
    margin-top: 8px;
    padding: 14px 12px 10px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 50px -16px rgba(11, 42, 91, .35), 0 0 0 1px rgba(11, 42, 91, .05);
    font-size: 14px;
}

.ui-datepicker.sf-dp.ui-datepicker-multi-2 { width: 640px !important; }

.sf-dp .ui-datepicker-group { padding: 0 8px; }

.sf-dp .ui-datepicker-group + .ui-datepicker-group { border-left: 1px solid #edf0f5; }

.sf-dp .ui-datepicker-header {
    padding: 4px 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sf-ink);
}

.sf-dp .ui-datepicker-title {
    margin: 0 40px;
    font-size: 15px;
    font-weight: 600;
    line-height: 32px;
}

/* arrows are drawn on the buttons themselves (jquery-ui.css forces a black background with !important) */
.sf-dp a.ui-datepicker-prev.ui-corner-all,
.sf-dp a.ui-datepicker-next.ui-corner-all {
    top: 4px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--sf-blue) url(../images/left.png) no-repeat center !important;
    cursor: pointer;
    transition: background-color .2s;
}

.sf-dp a.ui-datepicker-next.ui-corner-all { background-image: url(../images/right.png) !important; }

.sf-dp a.ui-datepicker-prev.ui-corner-all { left: 0; }
.sf-dp a.ui-datepicker-next.ui-corner-all { right: 0; }

.sf-dp a.ui-datepicker-prev.ui-datepicker-prev-hover,
.sf-dp a.ui-datepicker-next.ui-datepicker-next-hover { background-color: var(--sf-accent) !important; }

.sf-dp .ui-datepicker-prev span,
.sf-dp .ui-datepicker-next span { display: none; }

.sf-dp .ui-datepicker-prev.ui-state-disabled,
.sf-dp .ui-datepicker-next.ui-state-disabled {
    opacity: .25;
    cursor: default;
}

.sf-dp table {
    margin: 0;
    font-size: 14px;
}

.sf-dp th {
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--sf-muted);
}

.sf-dp td {
    padding: 1px 0;
    border: 0;
}

.sf-dp td a,
.sf-dp td span {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--sf-ink);
    font-size: 14px;
    line-height: 36px;
    text-align: center;
}

.sf-dp td a:hover { background: var(--sf-blue-soft) !important; }

.sf-dp td.ui-state-disabled span { color: #c3c9d5; }

.sf-dp td a.ui-state-highlight { color: var(--sf-accent-dark); }

.sf-dp td.sf-day-range { background: var(--sf-range); }

.sf-dp td.is-range.sf-day-start { background: linear-gradient(90deg, transparent 50%, var(--sf-range) 50%); }
.sf-dp td.is-range.sf-day-end { background: linear-gradient(90deg, var(--sf-range) 50%, transparent 50%); }

.sf-dp td.sf-day-start a,
.sf-dp td.sf-day-end a {
    background: var(--sf-accent) !important;
    color: #fff;
}


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

@media (max-width: 1199.98px) {
    .sf-card { margin-right: 0; }

    .sf-row {
        flex-wrap: wrap;
        height: auto;   /* the fixed desktop height can't hold the wrapped rows */
        padding-right: 0;
    }

    .sf-route {
        flex: 1 1 100%;
        border-bottom: 1px solid var(--sf-line);
    }

    .sf-to { border-top-right-radius: 14px; }

    .sf-dates {
        flex: 1 1 60%;
        border-left: 0;
    }

    .sf-pax { flex: 1 1 40%; }

    /* below the fare options, full width */
    .sf-submit {
        position: static;
        width: calc(100% - 40px);
        margin: 0 20px 18px;
    }
}

/* phones: every part of the search is its own white card (icon left, value, airport code right)
   on a soft panel */
@media (max-width: 767.98px) {
    .sf-card {
        padding: 10px;
        border-radius: 16px;
        background: #f1f4f8;
    }

    .sf-trip {
        height: auto;
        padding: 0 0 10px;
        border-bottom: 0;
    }

    .sf-trip-opt.is-active {
        background: #fff;
        box-shadow: 0 0 0 1px #dde3ec;
    }

    .sf-row {
        flex-direction: column;
        gap: 8px;
    }

    .sf-route {
        flex: none;
        flex-direction: column;
        gap: 8px;
        border-bottom: 0;
    }

    .sf-route > .sf-field { flex: none; }

    /* the cards */
    .sf-field {
        border: 1px solid #dde3ec;
        background: #fff;
    }

    .sf-trip ~ .sf-row .sf-field { border-radius: 12px; }   /* undo the square corners from the trip bar rule */

    .sf-dates:hover,
    .sf-dates:focus-within { background: #fff; }   /* only the half you touch lights up */

    /* icons */
    .sf-place::before,
    .sf-dates::before,
    .sf-pax::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        z-index: 2;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        background: #5b6270;
        -webkit-mask: var(--sf-ico) no-repeat center / contain;
        mask: var(--sf-ico) no-repeat center / contain;
        pointer-events: none;
    }

    .sf-from { --sf-ico: url(../images/se_dep_icon.svg); }
    .sf-to { --sf-ico: url(../images/se_arrival_icon.svg); }
    .sf-dates { --sf-ico: url(../images/se_calender_icon.svg); }
    .sf-pax { --sf-ico: url(../images/se_psng_icon.svg); }

    .sf-label {
        margin-bottom: 1px;
        font-size: 12px;
        line-height: 16px;
        color: var(--sf-muted);
    }

    .sf-sub {
        min-height: 16px;
        margin-top: 0;
        font-size: 11.5px;
        line-height: 16px;
        color: var(--sf-muted);
    }

    /* from / to */
    .sf-place { padding: 9px 66px 9px 50px; }

    .sf-place .sf-input,
    .sf-place .sf-input::placeholder {
        height: 26px;
        font-size: 18px;
        line-height: 26px;
    }

    .sf-place .sf-sep { display: none; }

    .sf-place .sf-code {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 700;
        color: var(--sf-ink);
    }

    .sf-swap {
        left: auto;
        right: 22px;
        width: 32px;
        height: 32px;
        margin: -16px 0 0;
        border: 1px solid #dde3ec;
        background: #fff;
        box-shadow: 0 4px 10px -6px rgba(11, 42, 91, .45);
        transform: rotate(90deg);
    }

    .sf-swap::before {
        left: 6px;
        top: 6px;
        width: 18px;
        height: 18px;
        background: var(--sf-blue);
    }

    .sf-swap:hover { background-color: var(--sf-blue-soft); }
    .sf-swap.is-spun { transform: rotate(270deg); }

    /* dates: one card, departure | return */
    .sf-dates { flex: none; }

    .sf-date { padding: 9px 12px; }

    .sf-date:first-child {
        padding-left: 50px;
        border-radius: 11px 0 0 11px;
    }

    .sf-date + .sf-date { border-radius: 0 11px 11px 0; }

    .sf-label-ico,
    .sf-caret { display: none; }

    .sf-date .sf-input { padding: 0 12px; }
    .sf-date .sf-input::placeholder { color: transparent; }

    .sf-show {
        height: 26px;
        font-size: 14px;
        line-height: 26px;
    }

    .sf-show b {
        margin-right: 3px;
        font-size: 18px;
    }

    .sf-show-day {
        display: inline;
        margin-left: 5px;
        font-size: 12px;
        font-weight: 500;
        color: var(--sf-muted);
    }

    .sf-date:not(.is-off) .sf-sub { display: none; }   /* the weekday is already next to the date */

    .sf-clear { top: 8px; right: 8px; }

    /* one way: the return half becomes an "add" prompt */
    .sf-date.is-off {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .sf-date.is-off .sf-label { display: none; }

    .sf-date.is-off .sf-show {
        height: auto;
        line-height: 20px;
    }

    .sf-date.is-off .sf-show::before {
        content: '+ Add Return Date';
        font-size: 13.5px;
        font-weight: 600;
        color: var(--sf-blue);
    }

    /* travellers: "1 Traveller | Economy" on one line */
    .sf-pax {
        flex: none;
        padding: 0;
    }

    .sf-pax-toggle { padding: 9px 14px 9px 50px; }

    .sf-value {
        display: inline;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
    }

    .sf-value b {
        margin-right: 3px;
        font-size: 18px;
    }

    .sf-pax-toggle .sf-sub {
        display: inline;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        color: var(--sf-ink);
    }

    .sf-pax-toggle .sf-sub::before {
        content: '|';
        margin: 0 6px 0 4px;
        font-weight: 400;
        color: var(--sf-muted);
    }

    .sf-pop {
        left: 0;
        right: 0;
        width: auto;
    }

    /* fare options + search */
    .sf-extras {
        gap: 6px;
        padding: 10px 0 0;
        border-top: 0;
    }

    .sf-check {
        padding: 6px 10px;
        border: 1px solid #dde3ec;
        background: #fff;
        font-size: 12.5px;
    }

    .sf-submit {
        width: 100%;
        height: 52px;
        margin: 12px 0 0;
    }

    .ui-datepicker.sf-dp { max-width: calc(100vw - 24px); }
}

@media (max-width: 380px) {
    .sf-place .sf-input,
    .sf-place .sf-input::placeholder,
    .sf-place .sf-code { font-size: 16.5px; }

    .sf-show b { font-size: 17px; }
    .sf-check { font-size: 9px; padding: 5px 5px; }
}