/* ==========================================================================
   FLIGHTS & TICKETS - MODERN THEME LAYER
   Loaded from header.php AFTER the legacy Travelo stylesheets on every page.
   Overrides the old theme with a modern design system:
   fonts, colors, buttons, forms, cards, nav, footer, results.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
    /* Kayak-style palette led by the brand's logo orange, navy ink, white surfaces */
    --ft-primary: #ff690f;
    --ft-primary-dark: #d95700;
    --ft-navy: #0f294d;
    --ft-navy-2: #16345f;
    --ft-ink: #0f294d;
    --ft-text: #455873;
    --ft-muted: #8592a6;
    --ft-accent: #ff7d26;
    --ft-accent-dark: #f0640a;
    --ft-amber: #ffb400;
    --ft-bg: #f5f7fa;
    --ft-card: #ffffff;
    --ft-line: #dadfe6;
    --ft-green: #00b67a;
    --ft-radius: 12px;
    --ft-radius-sm: 8px;
    --ft-shadow: 0 1px 2px rgba(15, 41, 77, .05), 0 6px 18px -8px rgba(15, 41, 77, .12);
    --ft-shadow-lg: 0 2px 4px rgba(15, 41, 77, .06), 0 16px 40px -12px rgba(15, 41, 77, .2);
    --ft-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ft-font-display: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. BASE / TYPOGRAPHY
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ft-font) !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ft-text) !important;
    background: var(--ft-bg) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.box-title, .search-tab-content h4.title {
    font-family: var(--ft-font-display) !important;
    color: var(--ft-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

a { color: var(--ft-primary); transition: color .15s ease; }
a:hover, a:focus { color: var(--ft-accent-dark); text-decoration: none; }

#page-wrapper { background: var(--ft-bg); }

::selection { background: rgba(255, 105, 15, .18); }

/* Slim modern scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cad6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9aa5b6; }

/* --------------------------------------------------------------------------
   2. BUTTONS
   -------------------------------------------------------------------------- */
.button,
.btn-small, .btn-medium, .btn-large,
button[type="submit"],
input[type="submit"],
.full-width.icon-check {
    font-family: var(--ft-font) !important;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    border: 0;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%) !important;
    color: #fff !important;
    padding: 12px 26px;
    box-shadow: 0 4px 12px -4px rgba(255, 105, 15, .5);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    cursor: pointer;
    /* legacy theme sets fixed heights/line-heights on buttons which pushes
       the label off-center - normalize so text is always dead-centre */
    height: auto !important;
    line-height: 1.25 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* inline-flex breaks nothing, but full-width buttons must stay full width */
.button.full-width, button[type="submit"].full-width,
input[type="submit"].full-width, .full-width.icon-check {
    display: flex;
    width: 100%;
}

.button:hover, .btn-small:hover, .btn-medium:hover, .btn-large:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(255, 105, 15, .55);
    color: #fff !important;
}

button[type="submit"]:active { transform: translateY(0); }

/* Legacy blue-classed theme buttons follow the brand orange too */
.button.blue, .blue-bg, .button.dark-blue {
    background: linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%) !important;
    box-shadow: 0 4px 12px -4px rgba(255, 105, 15, .5);
}

/* Orange reserved for high-intent price CTAs */
.button.yellow, .button.orange {
    background: linear-gradient(180deg, #ff934d 0%, var(--ft-accent) 60%, var(--ft-accent-dark) 100%) !important;
    box-shadow: 0 4px 12px -4px rgba(240, 100, 10, .5);
}

/* Don't hijack bootstrap's modal close "x" or slider controls */
button.close, .bx-controls a, .flex-direction-nav a {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0;
}

/* Old "btn-extra" chunky icon buttons (homepage intro) */
.button.btn-extra {
    border-radius: 14px !important;
    padding: 14px 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.button.btn-extra span, .button.btn-extra em { color: #fff !important; }

/* --------------------------------------------------------------------------
   3. FORMS (inputs, selects, dates, checkboxes)
   -------------------------------------------------------------------------- */
label {
    font-family: var(--ft-font) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

.input-text,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], textarea {
    font-family: var(--ft-font) !important;
    height: 48px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ft-ink) !important;
    background: #fff !important;
    border: 1.5px solid var(--ft-line) !important;
    border-radius: var(--ft-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    /* iOS Safari gives <input type="date"> a native intrinsic min-width and
       ignores width; neutralize so date fields never overflow their column. */
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    box-sizing: border-box;
}

textarea { height: auto; min-height: 110px; }

.input-text:focus, input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--ft-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 105, 15, .16) !important;
}

::placeholder { color: #94a3b8 !important; opacity: 1; }

/* Kill the legacy fake-select overlay; show real, modern-styled selects */
.selector { position: relative; }
.selector .custom-select { display: none !important; }
.selector select, select.full-width, select {
    font-family: var(--ft-font) !important;
    opacity: 1 !important;
    position: static !important;
    width: 100%;
    height: 48px !important;
    padding: 10px 38px 10px 14px !important;
    font-size: 15px;
    color: var(--ft-ink) !important;
    background-color: #fff !important;
    border: 1.5px solid var(--ft-line) !important;
    border-radius: var(--ft-radius-sm) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer;
}

/* custom checks/radios: white checkmark on the brand orange */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border: 1.5px solid #b6c1d1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color .12s ease, background .12s ease;
    vertical-align: middle;
}
input[type="checkbox"]:hover { border-color: var(--ft-primary); }
input[type="checkbox"]:checked {
    border-color: var(--ft-primary);
    background-color: var(--ft-primary);
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.2 4.4 8l6-6.5'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 11px 9px, 100% 100%;
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border: 1.5px solid #b6c1d1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color .12s ease;
    vertical-align: middle;
}
input[type="radio"]:hover { border-color: var(--ft-primary); }
input[type="radio"]:checked { border: 5.5px solid var(--ft-primary); }

.radio-inline, .checkbox-inline {
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ft-text);
    letter-spacing: 0;
}

/* jQuery-UI autocomplete dropdown */
.ui-autocomplete {
    font-family: var(--ft-font) !important;
    background: #fff !important;
    border: 1px solid var(--ft-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--ft-shadow-lg) !important;
    padding: 6px !important;
    max-height: 320px;
    overflow-y: auto;
    z-index: 99999 !important;
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item-wrapper {
    font-size: 14px;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border: 0 !important;
    color: var(--ft-text) !important;
    background: none !important;
}
.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: #fff1e6 !important;
    color: var(--ft-primary-dark) !important;
    margin: 0 !important;
}

/* jQuery-UI datepicker fallback */
.ui-datepicker {
    font-family: var(--ft-font) !important;
    border: 1px solid var(--ft-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--ft-shadow-lg) !important;
    padding: 10px !important;
}

/* --------------------------------------------------------------------------
   4. SEARCH BOX (homepage + sidebars)
   -------------------------------------------------------------------------- */
.search-box-wrapper {
    background: transparent !important;
    padding: 0 !important;
}

.search-box {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: var(--ft-shadow-lg) !important;
    padding: 26px 28px 22px !important;
    border: 1px solid rgba(226, 232, 240, .8);
}

/* legacy tab strip becomes a simple heading chip */
.search-tabs { margin-bottom: 14px !important; }
.search-tabs li a {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ft-ink) !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
}
.search-tabs li a i { color: var(--ft-accent) !important; font-size: 22px !important; }
.visible-mobile .search-tabs li a { font-size: 17px !important; }

.search-box h4.title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ft-primary) !important;
    border-bottom: 1px solid var(--ft-line);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.search-box .form-group { margin-bottom: 14px; }

/* legacy wrappers around the form must not add chrome */
.search-box .search-tab-content,
.search-box .tab-pane {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Sidebar variants on results pages */
.travelo-box .search-box, .sidebar .search-box { padding: 20px !important; }

/* --------------------------------------------------------------------------
   5. HERO (homepage)
   -------------------------------------------------------------------------- */
.ft-hero {
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 28, 56, .88) 0%, rgba(15, 41, 77, .72) 55%, rgba(15, 41, 77, .55) 100%),
        url('../images/homepage10_bg2.jpg') center 35% / cover no-repeat;
    padding: 64px 0 150px;
    color: #fff;
    text-align: center;
}

.ft-hero .container { position: relative; z-index: 2; }
.ft-hero-points { justify-content: center; }

.ft-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    color: #fde68a;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}

.ft-hero h1 {
    color: #fff !important;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 auto 14px;
    max-width: 640px;
}

.ft-hero h1 em {
    font-style: normal;
    color: var(--ft-amber);
}

.ft-hero p.ft-hero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin: 0 auto 26px;
}

.ft-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ft-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}
.ft-hero-points li svg { flex: 0 0 auto; }

/* search card overlaps hero bottom */
.ft-search-pull { margin-top: -110px; position: relative; z-index: 5; }
.ft-search-pull #main { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* destination pages reuse the homepage search box with no hero to overlap */
.ft-dest-search { display: block; padding: 22px 0 6px; }
.ft-dest-search .ft-search-pull { margin-top: 0; }
/* deal-card "Book now": legacy .btn-small padding squashes it flat */
.flight-list .action .button.btn-small {
    min-height: 44px;
    padding: 11px 18px !important;
    font-size: 14px;
}

/* hide the legacy flexslider if any page still renders it */
#slideshow .flexslider { display: none !important; }

@media (max-width: 767px) {
    .ft-hero { padding: 54px 0 130px; }
    .ft-hero h1 { font-size: 30px; }
    .ft-hero p.ft-hero-sub { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION  (new ft-* markup in header.php)
   -------------------------------------------------------------------------- */
#header { background: none; border: 0; }

.ft-topbar {
    background: #f7f9fc;
    border-bottom: 1px solid #e8edf3;
    color: var(--ft-text);
    font-size: 13px;
    padding: 7px 0;
}
.ft-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ft-topbar-badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ft-topbar-badges span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.ft-topbar-badges svg { color: var(--ft-green); }
.ft-topbar a.ft-phone {
    color: var(--ft-primary-dark);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .01em;
}
.ft-topbar a.ft-phone:hover { color: var(--ft-primary); }
.ft-topbar .ft-stars { color: var(--ft-green); letter-spacing: 2px; font-size: 13px; }

/* bootstrap's clearfix ::before/::after become stray flex items and push
   flex children toward the center - drop them on our flex containers */
.ft-topbar .container::before, .ft-topbar .container::after,
.ft-navbar .container::before, .ft-navbar .container::after,
.ft-footer-bottom .container::before, .ft-footer-bottom .container::after {
    display: none !important;
    content: none !important;
}

.ft-navbar {
    background: #fff;
    box-shadow: 0 1px 0 var(--ft-line), 0 8px 24px -18px rgba(15, 23, 42, .25);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.ft-navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 74px;
}
.ft-logo img { height: 44px; width: auto; display: block; }

.ft-nav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ft-nav > li { position: relative; }
.ft-nav > li > a {
    display: block;
    padding: 26px 15px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ft-ink);
}
.ft-nav > li > a:hover { color: var(--ft-primary); }
.ft-nav > li > a .caret-svg { margin-left: 5px; opacity: .5; }

/* dropdown */
.ft-nav .ft-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: 14px;
    box-shadow: var(--ft-shadow-lg);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .18s ease;
    z-index: 1040;
}
.ft-nav > li:hover > .ft-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ft-dropdown li a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ft-text);
}
.ft-dropdown li a:hover { background: #fff1e6; color: var(--ft-primary-dark); }

.ft-nav-cta { display: flex; align-items: center; gap: 10px; }
.ft-btn-ghost {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #ffd0ad;
    font-size: 14px;
    font-weight: 600;
    color: var(--ft-primary-dark) !important;
    transition: all .15s ease;
}
.ft-btn-ghost:hover { border-color: var(--ft-primary); color: var(--ft-primary) !important; background: #fff7f0; }
.ft-btn-solid {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(255, 105, 15, .5);
    transition: all .15s ease;
}
.ft-btn-solid:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* hamburger (uses bootstrap collapse against #mobile-menu-01) */
#header .mobile-menu-toggle,
.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(var(--ft-ink), var(--ft-ink)) 50% 15px / 22px 2.5px no-repeat,
        linear-gradient(var(--ft-ink), var(--ft-ink)) 50% 21px / 22px 2.5px no-repeat,
        linear-gradient(var(--ft-ink), var(--ft-ink)) 50% 27px / 22px 2.5px no-repeat,
        transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    position: static;
    margin: 0;
    padding: 0;
    float: none;
    box-shadow: none !important;
}

.mobile-menu {
    background: #fff !important;
    border-top: 1px solid var(--ft-line);
    box-shadow: 0 24px 32px -20px rgba(15, 23, 42, .25);
}
.mobile-menu .menu > li > a,
.mobile-menu .menu > li li > a {
    font-family: var(--ft-font) !important;
    display: block;
    padding: 13px 22px !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--ft-ink) !important;
    background: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.mobile-menu .menu > li li > a { padding-left: 38px !important; font-weight: 600; color: var(--ft-text) !important; }
.mobile-menu .menu > li > a:hover { color: var(--ft-primary) !important; }
.mobile-topnav { padding: 14px 22px 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.mobile-topnav li { list-style: none; }
.mobile-topnav li a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ft-navy);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
}

@media (max-width: 991px) {
    .ft-nav, .ft-nav-cta .ft-btn-ghost, .ft-nav-cta .ft-btn-solid { display: none !important; }
    #header .mobile-menu-toggle, .mobile-menu-toggle { display: block; }
    .ft-navbar .container { min-height: 64px; }
    .ft-logo img { height: 36px; }
    .ft-topbar-badges span.ft-hide-sm { display: none; }
}

/* --------------------------------------------------------------------------
   7. CARDS / CONTENT SECTIONS
   -------------------------------------------------------------------------- */
.image-box .box, .travelo-box, .box.discount-box, .contact-box {
    background: var(--ft-card);
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: var(--ft-radius) !important;
    box-shadow: var(--ft-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.image-box .box:hover { transform: translateY(-4px); box-shadow: var(--ft-shadow-lg); }

.image-box .box figure img { width: 100%; height: auto; }
.image-box .box .details {
    background: var(--ft-card) !important;
    padding: 16px 18px !important;
}
.image-box .box .details .box-title a { color: var(--ft-ink) !important; font-weight: 700; }
.image-box .box .details .box-title a:hover { color: var(--ft-primary) !important; }

.travelo-box {
    padding: 24px !important;
    overflow: visible;
}

figcaption, .caption-title { font-family: var(--ft-font) !important; }

/* section headings like "WHY BOOK WITH US!" */
.text-center h2 em { color: var(--ft-accent); font-style: normal; }

/* icon boxes ("Why book with us") */
.icon-box.style4 {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--ft-radius);
    padding: 22px 18px !important;
    height: 100%;
    transition: background .2s ease, transform .2s ease;
}
.icon-box.style4:hover { background: rgba(255, 255, 255, .11); transform: translateY(-3px); }
.icon-box.style4 i { font-size: 30px !important; color: #fbbf24 !important; margin-bottom: 12px; }
.icon-box.style4 .box-title { color: #fff !important; font-size: 16px; margin: 8px 0 6px; }
.icon-box.style4 p.description { color: rgba(255, 255, 255, .75) !important; font-size: 13.5px; }

/* dark map/parallax bands become a clean navy gradient */
.global-map-area {
    background: linear-gradient(135deg, #0b1f3f 0%, #122c57 60%, #17346a 100%) !important;
    border-radius: 0;
}
.global-map-area .container.description h2,
.global-map-area .description h2 { color: #fff !important; }

/* breadcrumbs / page-title strips */
#page-title, .page-title-container {
    background: linear-gradient(135deg, #0b1f3f, #17346a) !important;
}
.breadcrumbs li a, .breadcrumb > li a { color: #9fb4d8; }

/* --------------------------------------------------------------------------
   8. FLIGHT RESULTS / BOOKING FLOW
   -------------------------------------------------------------------------- */
article[style*="table"], .flight-list article, #flights-list article {
    border-radius: var(--ft-radius) !important;
    border: 1px solid var(--ft-line);
    box-shadow: var(--ft-shadow);
    margin-bottom: 18px !important;
}

.sort-by-section, .toggle-container, .panel {
    background: #fff;
    border: 1px solid var(--ft-line) !important;
    border-radius: var(--ft-radius) !important;
    box-shadow: var(--ft-shadow);
}

.price, .final-price, .skin-color strong { font-family: var(--ft-font) !important; }

.table, table.table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.table > thead > tr > th {
    background: #f1f5f9;
    color: var(--ft-ink);
    font-weight: 700;
    border-bottom: 1px solid var(--ft-line) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .05em;
}
.table > tbody > tr > td { border-color: #eef2f7 !important; vertical-align: middle; }

/* bootstrap modals */
.modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--ft-shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--ft-line); }
.modal-footer { border-top: 1px solid var(--ft-line); }

/* alerts */
.alert { border-radius: 12px; border: 0; }

/* --------------------------------------------------------------------------
   9. FOOTER  (new ft-* markup in footer.php)
   -------------------------------------------------------------------------- */
#footer { background: var(--ft-navy) !important; color: #94a3b8; }

.ft-footer-main { padding: 56px 0 36px; }
.ft-footer-main h4 {
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 18px;
}
.ft-footer-main ul { list-style: none; margin: 0; padding: 0; }
.ft-footer-main ul li { margin-bottom: 9px; }
.ft-footer-main ul li a {
    color: #a7b4c9;
    font-size: 14px;
    font-weight: 500;
}
.ft-footer-main ul li a:hover { color: #fff; }

.ft-footer-brand img { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .95; }
.ft-footer-brand p { font-size: 13.5px; color: #8fa0ba; max-width: 280px; }
.ft-footer-contact { margin-top: 14px; }
.ft-footer-contact a.ft-footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}
.ft-footer-contact a.ft-footer-phone:hover { color: #fde68a; }
.ft-footer-contact .ft-footer-email { display: block; margin-top: 6px; color: #a7b4c9; font-size: 13.5px; }
.ft-footer-contact .ft-footer-email:hover { color: #fff; }

.ft-footer-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.ft-footer-badges img { height: 46px; width: auto; background: #fff; border-radius: 10px; padding: 6px 10px; }

.ft-footer-atol {
    border-top: 1px solid rgba(148, 163, 184, .18);
    padding: 22px 0;
    font-size: 12.5px;
    color: #7d8fa9;
    line-height: 1.7;
}
.ft-footer-atol a { color: #9fb4d8; text-decoration: underline; }
.ft-footer-atol a:hover { color: #fff; }

.ft-footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, .18);
    padding: 18px 0;
    font-size: 13px;
    color: #7d8fa9;
    display: block;
}
.ft-footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ft-footer-bottom a { color: #9fb4d8; }
.ft-footer-bottom a:hover { color: #fff; }

@media (max-width: 767px) {
    .ft-footer-main { padding: 40px 0 20px; }
    .ft-footer-main .ft-footer-col { margin-bottom: 28px; }
}

/* --------------------------------------------------------------------------
   10. MISC / LEGACY CLEANUP
   -------------------------------------------------------------------------- */
hr { border-color: var(--ft-line) !important; }

/* legacy trust header styles are gone; guard against stray spacers */
.trust-spacer { display: none; }

/* legacy sidebar promo banners are retired */
.offer-pics { display: none !important; }

/* old yellow theme link colors */
.yellow-color { color: #fbbf24 !important; }

/* discover-style footer link lists used on some inner pages */
ul.discover li a { font-family: var(--ft-font) !important; }

/* five-star ratings */
.five-stars-container .five-stars { filter: hue-rotate(0deg); }

/* pagination */
.pagination > li > a, .pagination > li > span {
    border-radius: 10px !important;
    margin: 0 3px;
    border: 1.5px solid var(--ft-line);
    color: var(--ft-ink);
    font-weight: 600;
}
.pagination > .active > a { background: var(--ft-primary) !important; border-color: var(--ft-primary) !important; }

/* make embedded images non-overflowing on small screens */
img { max-width: 100%; }

/* --------------------------------------------------------------------------
   11. MOBILE-FIRST OPTIMIZATIONS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body { font-size: 15px; }

    .container { padding-left: 16px; padding-right: 16px; }

    /* comfortable 48px tap targets everywhere */
    .button, .btn-medium, .btn-large,
    button[type="submit"], input[type="submit"] {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    button[type="submit"].full-width, .full-width.icon-check {
        width: 100%;
        font-size: 16px;
        padding: 14px 20px;
    }

    /* search card: single column, tighter padding, full-bleed feel */
    .search-box { padding: 20px 16px 16px !important; border-radius: 18px !important; }
    .search-box h4.title { margin-top: 6px; }
    .search-box .form-group { margin-bottom: 12px; }
    .ft-search-pull { margin-top: -96px; }

    /* inputs: 16px font prevents iOS zoom-on-focus */
    .input-text, input[type="text"], input[type="email"], input[type="tel"],
    input[type="date"], select, textarea {
        font-size: 16px !important;
        height: 50px;
    }

    /* topbar: single compact row */
    .ft-topbar { font-size: 12px; padding: 7px 0; }
    .ft-topbar .container { justify-content: center; row-gap: 4px; }

    /* sections breathe less on mobile */
    .section, .container.section { padding-top: 28px; padding-bottom: 28px; }

    /* cards stack with consistent gaps */
    .image-box .box { margin-bottom: 16px; }

    /* icon boxes: 2-up grid stays readable */
    .icon-box.style4 { padding: 16px 12px !important; margin-bottom: 12px; }
    .icon-box.style4 i { font-size: 24px !important; }
    .icon-box.style4 .box-title { font-size: 14px; }
    .icon-box.style4 p.description { font-size: 12.5px; }

    /* tables scroll sideways instead of breaking layout */
    .table-responsive, .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* footer: center brand, tap-friendly links */
    .ft-footer-main ul li { margin-bottom: 4px; }
    .ft-footer-main ul li a { display: inline-block; padding: 6px 0; }
    .ft-footer-bottom .container { justify-content: center; text-align: center; }
}

/* very small phones */
@media (max-width: 380px) {
    .ft-hero h1 { font-size: 26px; }
    .ft-logo img { height: 32px; }
    .ft-btn-solid { padding: 8px 13px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   12. TRIP-STYLE SEARCH BAR (form_advance-search.php)
   Bordered field boxes with tiny labels inside; horizontal grid on desktop.
   Placed last so it wins over the generic form rules above.
   -------------------------------------------------------------------------- */

/* segmented trip-type control */
.ft-trip-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ft-seg {
    display: inline-flex;
    background: #edf1f7;
    border-radius: 9px;
    padding: 3px;
}
.ft-seg label { margin: 0; position: relative; text-transform: none; letter-spacing: 0; }
.ft-seg input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.ft-seg span {
    display: block;
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ft-text);
    cursor: pointer;
    transition: all .15s ease;
}
.ft-seg input:checked + span {
    background: #fff;
    color: var(--ft-primary);
    box-shadow: 0 1px 4px rgba(15, 41, 77, .18);
}
.ft-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ft-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    cursor: pointer;
}

/* field grid */
.ft-fields {
    display: grid;
    grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
/* visible cells: adults, children, infants, email, phone, search
   (airline/class are display:none for now and consume no track) */
.ft-fields-sub { grid-template-columns: .45fr .45fr .45fr 1.3fr 1.1fr 1.1fr; margin-bottom: 0; }

.ft-field {
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 9px;
    padding: 7px 12px 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
    min-width: 0;
}
.ft-field:hover { border-color: #9fb2cc; }
.ft-field:focus-within {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 2px rgba(255, 105, 15, .15);
}
.ft-field > label {
    display: block;
    /* clearly smaller + bolder than the 15-16px field values/placeholders */
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--ft-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-field .input-text,
.ft-field input[type="text"],
.ft-field input[type="email"],
.ft-field input[type="tel"],
.ft-field input[type="date"],
.ft-field select {
    border: 0 !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    color: var(--ft-ink) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.ft-field select {
    background-position: right 0 center !important;
    padding-right: 22px !important;
}
.ft-field input:focus, .ft-field select:focus {
    border: 0 !important;
    box-shadow: none !important;
}
.ft-field .date-wrapper2 { display: block; }

/* optional email/phone lead fields live inside the sub row; on narrow
   screens each takes a full row so the microcopy stays readable */
@media (max-width: 600px) {
    .ft-field-lead-email, .ft-field-lead-phone { grid-column: 1 / -1; }
}

/* search button fills its grid cell (matches the height of the fields beside it).
   !important beats the global button reset's `height:auto !important`. */
.ft-search-btn { align-self: stretch; }
.ft-search-btn button[type="submit"] {
    width: 100%;
    height: 100% !important;
    min-height: 54px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 9px !important;
    padding: 10px 18px;
}

/* tablet: two-per-row */
@media (max-width: 991px) {
    .ft-fields { grid-template-columns: 1fr 1fr; }
    .ft-fields-sub { grid-template-columns: 1fr 1fr; }
    .ft-search-btn { grid-column: 1 / -1; }
}

/* phones: From/To full width, dates paired, passengers 3-up */
@media (max-width: 600px) {
    .ft-fields { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ft-field-origin, .ft-field-destination { grid-column: 1 / -1; }
    .ft-fields-sub { grid-template-columns: 1fr 1fr 1fr; }
    .ft-field-airline { grid-column: 1 / -1; }
    .ft-field-class { grid-column: 1 / -1; }
    .ft-search-btn { grid-column: 1 / -1; }
    .ft-field .input-text,
    .ft-field input[type="text"],
    .ft-field input[type="email"],
    .ft-field input[type="tel"],
    .ft-field input[type="date"],
    .ft-field select {
        font-size: 16px !important;  /* prevent iOS zoom */
        height: 30px !important;
    }
    .ft-trip-row { gap: 12px; margin-bottom: 12px; }
    .ft-seg span { padding: 8px 20px; }
}

/* --------------------------------------------------------------------------
   12b. GDS-STYLE FLIGHT RESULTS (flight-results.php)
   -------------------------------------------------------------------------- */

/* top modify-search band (Trip.com style) */
.ft-modify {
    background: #fff;
    border-bottom: 1px solid var(--ft-line);
    padding: 18px 0 14px;
    box-shadow: 0 10px 24px -22px rgba(15, 41, 77, .35);
    margin-bottom: 20px;
}
.ft-modify .ft-trip-row { margin-bottom: 12px; }
.ft-modify .ft-fields { margin-bottom: 10px; }
.ft-modify .ft-fields-modify { grid-template-columns: 1.35fr 1.35fr 1fr 1fr; }
.ft-modify .ft-fields-modify-sub { grid-template-columns: .45fr .45fr .45fr 1.3fr 1.1fr 1fr; margin-bottom: 0; }
.ft-modify .ft-search-btn button[type="submit"] { min-height: 50px; }

/* --------------------------------------------------------------------------
   flight-results.php — MOBILE-ONLY: compact "Modify Search" / "Filter Flights"
   buttons that toggle the (otherwise collapsed) form + filter panels.
   Desktop is unchanged: the button row is hidden and both panels always show.
   -------------------------------------------------------------------------- */
.ft-mobile-controls { display: none; }   /* desktop: no mobile buttons */

@media (max-width: 767px) {
    .ft-mobile-controls { display: flex; gap: 10px; width: 100%; }
    .ft-mini-btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 10px 12px;
        background: #fff;
        border: 1.5px solid var(--ft-line);
        border-radius: 10px;
        font-family: var(--ft-font);
        font-weight: 700;
        font-size: 14px;
        color: var(--ft-ink);
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .ft-mini-btn svg { flex: 0 0 auto; color: var(--ft-primary); }
    .ft-mini-btn.is-active { background: var(--ft-primary); border-color: var(--ft-primary); color: #fff; }
    .ft-mini-btn.is-active svg { color: #fff; }

    /* the top band is just the button row until a panel is opened */
    .ft-modify { padding: 12px 0 0; margin-bottom: 0; }
    /* the legacy section#content adds 40px top padding — far too big a gap under
       the button row on mobile (the desktop header card is hidden here). Pull the
       results up so the button row and the results toolbar sit close together. */
    .ft-modify ~ section#content { padding-top: 8px !important; }
    .ft-modify > .container > #ft-modify-form { display: none; }
    .ft-modify.is-open > .container > #ft-modify-form { display: block; margin-top: 12px; }

    /* filter box: hidden until toggled (override the JS inline display:block) */
    #ft-filters { display: none !important; margin-bottom: 12px; }
    #ft-filters.is-open { display: block !important; }

    /* declutter above the results — the phone sits in the top bar + header */
    .ft-side-help { display: none; }
}

/* Desktop: hide the always-open form; show a "Search results" header instead.
   "Edit search" reveals the form. (Mobile keeps the mini-button controls.) */
.ft-results-head { display: none; }

@media (min-width: 768px) {
    /* drop the full-width white band — the header follows the body/container
       width as a contained card instead of spanning edge to edge */
    .ft-modify {
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
        padding: 20px 0 0;
        margin-bottom: 8px;
    }
    .ft-results-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid var(--ft-line);
        border-radius: 16px;
        box-shadow: 0 14px 34px -26px rgba(15, 41, 77, .45);
        padding: 14px 16px 14px 22px;
    }
    /* route (city + [CODE] chips + swap icon) */
    .ft-rh-route { min-width: 0; }
    .ft-rh-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .ft-rh-city { font-size: 20px; font-weight: 800; line-height: 1; color: var(--ft-ink); }
    .ft-rh-code {
        display: inline-block; background: #fff2ea; color: var(--ft-primary);
        font-weight: 800; font-size: 11.5px; letter-spacing: .04em; padding: 4px 8px; border-radius: 7px;
    }
    .ft-rh-swap { color: var(--ft-muted); display: inline-flex; }
    .ft-rh-meta { margin: 8px 0 0; font-size: 13.5px; color: var(--ft-muted); }

    /* pill buttons with two-line labels (icon circle + title + sub) */
    .ft-rh-actions { display: flex; align-items: stretch; gap: 10px; flex: 0 0 auto; }
    .ft-rh-pill {
        display: inline-flex; align-items: center; gap: 11px;
        padding: 9px 20px; border-radius: 999px;
        text-decoration: none; cursor: pointer;
        border: 1.5px solid var(--ft-line); background: #fff !important;
        min-height: 56px; height: auto !important; line-height: 1.2 !important;
        font-family: var(--ft-font);
        -webkit-appearance: none; appearance: none;
    }
    .ft-rh-ic {
        width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
        display: grid; place-items: center; background: #fff2ea; color: var(--ft-primary);
    }
    .ft-rh-tx { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
    .ft-rh-tx b { font-size: 14.5px; font-weight: 800; color: var(--ft-ink); }
    .ft-rh-tx em { font-size: 11.5px; font-style: normal; color: var(--ft-muted); margin-top: 1px; }

    .ft-rh-edit:hover { border-color: var(--ft-primary); }
    .ft-rh-edit:hover .ft-rh-tx b { color: var(--ft-primary); }
    .ft-rh-edit.is-active { border-color: var(--ft-primary); }
    .ft-rh-edit.is-active .ft-rh-ic { background: var(--ft-primary); color: #fff; }

    .ft-rh-call {
        background: linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%) !important;
        border-color: var(--ft-primary) !important;
        box-shadow: 0 8px 20px -8px rgba(255, 105, 15, .55);
    }
    .ft-rh-call:hover { filter: brightness(1.05); }
    .ft-rh-call .ft-rh-ic { background: rgba(255, 255, 255, .22); color: #fff; }
    .ft-rh-call .ft-rh-tx b { color: #fff; }
    .ft-rh-call .ft-rh-tx em { color: rgba(255, 255, 255, .9); }

    /* form hidden until "Modify search" is pressed — appears as its own card */
    #ft-modify-form { display: none; }
    .ft-modify.is-open #ft-modify-form {
        display: block;
        margin-top: 12px;
        padding: 18px 22px;
        background: #fff;
        border: 1px solid var(--ft-line);
        border-radius: 16px;
        box-shadow: 0 14px 34px -26px rgba(15, 41, 77, .45);
    }
}

/* typeahead combobox (From / To on the results modify bar) */
.ft-combo-field { position: relative; }
.ft-combo-field.ft-combo-invalid {
    border-color: #e5484d;
    box-shadow: 0 0 0 2px rgba(229, 72, 77, .15);
}
.ft-combo-list {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    min-width: calc(100% + 2px);
    width: max-content;
    max-width: min(420px, 92vw);
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    box-shadow: var(--ft-shadow-lg);
    padding: 6px;
    z-index: 5000;
}
.ft-co-item {
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.ft-co-item:hover, .ft-co-item.active { background: #fff1e6; }
.ft-co-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ft-co-city {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ft-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-co-code {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ft-text);
    background: #f2f5f9;
    border-radius: 6px;
    padding: 2px 7px;
}
.ft-co-item:hover .ft-co-code, .ft-co-item.active .ft-co-code { background: #ffe3cc; color: var(--ft-primary-dark); }
.ft-co-sub {
    display: block;
    font-size: 12px;
    color: var(--ft-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-co-empty { padding: 12px; font-size: 13.5px; color: var(--ft-muted); text-align: center; }

/* the matched substring - instant "your text matches here" feedback */
.ft-hl { font-weight: 800; color: var(--ft-primary); font-style: normal; }

@media (max-width: 600px) {
    .ft-combo-list { max-width: calc(100vw - 40px); }
}

/* custom styled dropdowns (js/ft-dropdown.js) */
.ft-dd-field { position: relative; }
.ft-dd-field select.ft-dd-native { display: none !important; }
.ft-dd-trigger {
    display: block;
    width: 100%;
    height: 28px;
    border: 0 !important;
    margin: 0;
    padding: 0 22px 0 0 !important;
    background:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") right 4px center no-repeat,
        transparent !important;
    box-shadow: none !important;
    font-family: var(--ft-font) !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--ft-ink);
    text-align: left;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-radius: 0 !important;
}
.ft-dd-trigger .ft-dd-label { display: block; overflow: hidden; text-overflow: ellipsis; }
.ft-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    min-width: calc(100% + 2px);
    width: max-content;
    max-width: min(320px, 92vw);
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    box-shadow: var(--ft-shadow-lg);
    padding: 6px;
    z-index: 5000;
}
.ft-dd-search { padding: 2px 2px 8px; }
.ft-dd-search input {
    width: 100%;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border: 1.5px solid var(--ft-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
}
.ft-dd-options { max-height: 260px; overflow-y: auto; }
.ft-dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ft-text);
    cursor: pointer;
    white-space: nowrap;
}
.ft-dd-opt:hover, .ft-dd-opt.active { background: #fff1e6; color: var(--ft-ink); }
.ft-dd-opt.selected { color: var(--ft-primary-dark); font-weight: 700; }
.ft-dd-opt svg { flex: 0 0 auto; color: var(--ft-primary); }
.ft-dd-empty { padding: 12px; font-size: 13.5px; color: var(--ft-muted); text-align: center; }

/* themed date picker (js/ft-datepicker.js) */
.ft-dp-field { position: relative; cursor: pointer; }
.ft-dp-field input.ft-dp-native { display: none !important; }
.ft-dp-display {
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ft-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z'/%3E%3C/svg%3E") right 2px center no-repeat;
    padding-right: 24px;
}
.ft-dp-display.ft-dp-empty { color: #94a3b8; font-weight: 500; }
.ft-dp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    /* fixed metrics so legacy page styles can't inflate the calendar */
    width: 292px !important;
    min-width: 0 !important;
    max-width: 92vw;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: 14px;
    box-shadow: var(--ft-shadow-lg);
    padding: 12px;
    z-index: 5000;
    cursor: default;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}
.ft-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ft-dp-head strong {
    font-family: var(--ft-font-display);
    font-size: 15px !important;
    color: var(--ft-ink);
}
.ft-dp-nav {
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    border: 1px solid var(--ft-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--ft-ink);
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ft-dp-nav:hover:not(:disabled) { border-color: var(--ft-primary) !important; color: var(--ft-primary); }
.ft-dp-nav:disabled { opacity: .35; cursor: default; }
.ft-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.ft-dp-dow {
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ft-muted);
    padding: 4px 0 6px;
}
.ft-dp-day {
    height: 34px !important;
    min-height: 0 !important;
    width: 100%;
    border: 0 !important;
    border-radius: 9px !important;
    background: none !important;
    font-family: var(--ft-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ft-ink) !important;
    cursor: pointer;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .12s ease;
}
.ft-dp-day:hover:not(:disabled) { background: #fff1e6 !important; }
.ft-dp-day.today { box-shadow: inset 0 0 0 1.5px var(--ft-line) !important; }
.ft-dp-day.selected {
    background: linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%) !important;
    color: #fff !important;
}
.ft-dp-day.disabled { color: #c2cbd8 !important; cursor: default; font-weight: 500; }

/* date/price strip (results column, Skyscanner style) */
.ft-datestrip {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.ft-ds-chip {
    flex: 1 1 0;
    min-width: 104px;
    height: auto !important;
    min-height: 68px;
    line-height: 1.3;
    border: 1px solid var(--ft-line);
    background: #fff;
    border-radius: 10px;
    padding: 12px 8px !important;
    font-family: var(--ft-font);
    text-align: center;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: var(--ft-shadow);
}
.ft-ds-chip span { display: block; font-size: 13px; font-weight: 600; color: var(--ft-ink); }
.ft-ds-chip strong { display: block; font-size: 15px; font-weight: 800; color: var(--ft-ink); margin-top: 4px; }
.ft-ds-chip.ft-ds-cheap strong { color: #00a690; }
.ft-ds-chip:hover { border-color: var(--ft-primary); transform: translateY(-1px); }
.ft-ds-chip.active {
    border: 1.5px solid #ffb27d;
    background: #fff1e6;
    cursor: default;
}
.ft-ds-chip.active:hover { transform: none; }
.ft-ds-chip.active span { color: var(--ft-ink); }
.ft-ds-chip.active.ft-ds-cheap strong { color: #00a690; }

@media (max-width: 991px) {
    .ft-modify .ft-fields-modify { grid-template-columns: 1fr 1fr; }
    .ft-modify .ft-fields-modify-sub { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ft-modify { padding: 14px 0 12px; }
    .ft-modify .ft-fields-modify { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ft-modify .ft-fields-modify .ft-field-origin,
    .ft-modify .ft-fields-modify .ft-field-destination { grid-column: 1 / -1; }
    .ft-modify .ft-fields-modify-sub { grid-template-columns: 1fr 1fr 1fr; }
    .ft-modify .ft-field-airline, .ft-modify .ft-field-class { grid-column: 1 / -1; }
    .ft-ds-chip { flex: 0 0 104px; }
}

/* results toolbar */
.ft-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    padding: 16px 20px;
    margin-bottom: 8px;
}
.ft-rb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ft-primary);
    margin-bottom: 7px;
}
.ft-rb-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
    color: var(--ft-ink);
    font-family: var(--ft-font-display, var(--ft-font));
}

.ft-rb-sort {
    display: inline-flex;
    align-items: stretch;
    background: #edf1f7;
    border-radius: 10px;
    padding: 3px;
}
.ft-rb-sort button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    margin: 0;
    background: none;
    height: 36px;
    line-height: 1;
    padding: 0 18px;
    border-radius: 8px;
    font-family: var(--ft-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ft-text);
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: none;
}
.ft-rb-sort button.active {
    background: #fff;
    color: var(--ft-primary);
    box-shadow: 0 1px 4px rgba(15, 41, 77, .18);
}

.ft-rb-meta { font-size: 12.5px; color: var(--ft-muted); margin: 0 2px 14px; }

/* flight card */
.ft-flight-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.ft-flight-card:hover { border-color: #b9c8de; box-shadow: var(--ft-shadow-lg); }

.ft-fc-main { flex: 1 1 auto; padding: 16px 18px 12px; min-width: 0; }

.ft-fc-airline { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ft-fc-airline img {
    height: 34px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}
.ft-fc-airline strong { display: block; font-size: 14.5px; color: var(--ft-ink); line-height: 1.2; }
.ft-fc-airline span { font-size: 12px; color: var(--ft-muted); }

/* legs */
.ft-leg { padding: 8px 0; }
.ft-leg + .ft-leg { border-top: 1px dashed #e4e9f0; }
.ft-leg-date { font-size: 11.5px; font-weight: 600; color: var(--ft-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ft-leg-date span { color: #aab6c8; font-weight: 500; }
.ft-leg-line { display: flex; align-items: center; gap: 14px; }
.ft-leg-end { flex: 0 0 auto; min-width: 74px; }
.ft-leg-end strong { display: block; font-size: 21px; font-weight: 800; color: var(--ft-ink); line-height: 1.1; letter-spacing: -.01em; }
.ft-leg-end strong sup { font-size: 11px; color: var(--ft-accent-dark); font-weight: 700; }
.ft-leg-end span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ft-text); margin-top: 2px; }
.ft-leg-end em { display: block; font-style: normal; font-size: 11.5px; color: var(--ft-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.ft-leg-arr { text-align: right; }
.ft-leg-arr em { margin-left: auto; }

.ft-leg-mid { flex: 1 1 auto; text-align: center; min-width: 70px; }
.ft-leg-dur { display: block; font-size: 11.5px; font-weight: 600; color: var(--ft-muted); margin-bottom: 3px; }
.ft-leg-track { display: block; position: relative; height: 2px; background: #d8e0ea; border-radius: 2px; }
.ft-leg-track i {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 2px solid #b0bdcf;
    border-right: 2px solid #b0bdcf;
}
.ft-leg-stops { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.ft-leg-direct { color: var(--ft-green); }
.ft-leg-1stop { color: var(--ft-accent-dark); }

/* chips */
.ft-fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ft-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ft-text);
    background: #f2f5f9;
    border-radius: 999px;
    padding: 4px 10px;
}
.ft-chip svg { color: #8ea2bd; }
.ft-chip-warn { background: #fff4e8; color: var(--ft-accent-dark); }

/* price column */
.ft-fc-price {
    flex: 0 0 200px;
    border-left: 1px dashed #e4e9f0;
    background: #fafbfd;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}
.ft-fc-price-top small { display: block; font-size: 11.5px; color: var(--ft-muted); }
.ft-fc-price-top strong { display: block; font-size: 26px; font-weight: 800; color: var(--ft-ink); letter-spacing: -.02em; line-height: 1.15; }
.ft-fc-price-top span { display: block; font-size: 11px; color: var(--ft-muted); margin-bottom: 10px; }
.ft-fc-select {
    display: block;
    background: linear-gradient(180deg, #ff934d 0%, var(--ft-accent) 60%, var(--ft-accent-dark) 100%);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9px;
    padding: 11px 10px;
    box-shadow: 0 4px 12px -4px rgba(240, 100, 10, .5);
    transition: filter .15s ease, transform .15s ease;
}
.ft-fc-select:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ft-fc-call { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ft-primary); }
.ft-fc-note { display: block; margin-top: 8px; font-size: 10.5px; color: #9aa8bc; line-height: 1.4; }

/* no results */
.ft-no-results {
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    padding: 28px 24px;
    margin-bottom: 18px;
    text-align: center;
}
.ft-no-results h4 { margin: 0 0 8px; font-size: 18px; }
.ft-no-results p { color: var(--ft-muted); font-size: 14px; max-width: 480px; margin: 0 auto; }

/* sidebar filters */
.ft-filters {
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    padding: 16px 16px 8px;
    margin-bottom: 16px;
}
.ft-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ft-filters-head h4 { margin: 0; font-size: 15px; font-weight: 800; }
.ft-filters-head button {
    border: 0;
    background: none;
    color: var(--ft-primary);
    font-family: var(--ft-font);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
}
.ft-filter-group { border-top: 1px solid #eef2f6; padding: 12px 0; }
.ft-filter-group h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ft-muted); }
.ft-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ft-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 8px;
    cursor: pointer;
}
.ft-filter-row span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-filter-row em { font-style: normal; font-size: 12px; color: var(--ft-muted); }

/* GBP price-range dual slider (Trip.com style) */
.ft-price-vals {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--ft-ink);
    margin-bottom: 8px;
}
.ft-dual-range { position: relative; height: 26px; margin: 0 6px; }
.ft-dr-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #dbe2ec;
    border-radius: 4px;
}
.ft-dr-track i {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--ft-primary);
    border-radius: 4px;
}
.ft-dual-range input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    background: none !important;
    border: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    box-shadow: none !important;
}
.ft-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--ft-primary);
    box-shadow: 0 1px 4px rgba(15, 41, 77, .3);
    cursor: pointer;
}
.ft-dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--ft-primary);
    box-shadow: 0 1px 4px rgba(15, 41, 77, .3);
    cursor: pointer;
}
.ft-dual-range input[type="range"]::-moz-range-track { background: none; }

/* fake GDS search overlay */
#ft-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(160deg, #0a1c38 0%, #0f294d 60%, #16345f 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    opacity: 1;
    transition: opacity .45s ease;
}
#ft-search-overlay.ft-hide { opacity: 0; pointer-events: none; }
.ft-so-inner { max-width: 420px; width: 100%; }
.ft-so-plane { font-size: 40px; margin-bottom: 14px; animation: ft-fly 1.6s ease-in-out infinite; display: inline-block; }
@keyframes ft-fly {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-8px) rotate(3deg); }
}
.ft-so-inner h2 { color: #fff !important; font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.ft-so-inner .ft-so-route { color: #ffb400; }
.ft-so-step { font-size: 14px; color: rgba(255, 255, 255, .8); min-height: 22px; margin-bottom: 18px; }
.ft-so-bar { height: 6px; background: rgba(255, 255, 255, .15); border-radius: 6px; overflow: hidden; }
.ft-so-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8b3d, #ffab6b); border-radius: 6px; transition: width .5s ease; }
.ft-so-logos { margin-top: 20px; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* results page mobile */
@media (max-width: 767px) {
    .ft-results-bar { padding: 14px; }
    .ft-rb-title { font-size: 18px; }
    .ft-rb-sort { width: 100%; }
    .ft-rb-sort button { flex: 1 1 0; padding: 9px 8px; }

    .ft-flight-card { flex-direction: column; }
    .ft-fc-price {
        flex: 1 1 auto;
        border-left: 0;
        border-top: 1px dashed #e4e9f0;
        padding: 12px 16px 14px;
    }
    .ft-fc-price-top { display: flex; align-items: baseline; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .ft-fc-price-top strong { font-size: 22px; }
    .ft-fc-price-top span { margin-bottom: 0; }
    .ft-fc-select { margin-top: 10px; }
    .ft-leg-end { min-width: 64px; }
    .ft-leg-end strong { font-size: 18px; }
    .ft-leg-end em { max-width: 80px; }
}

/* --------------------------------------------------------------------------
   12b1. GDS RESULTS (gds-flight-results.php) — new-theme skin over the live
   GDS machinery (carrier grouping, jQuery-UI filter sliders, details modal)
   -------------------------------------------------------------------------- */
.gds-offer-card { margin-bottom: 0; }
.gds-carrier-block { margin-bottom: 16px; }
/* "Flight Details" link at the card's top-right (opens the details modal) */
.ft-fc-details {
    margin-left: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff1e6;
    color: var(--ft-primary-dark) !important;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.ft-fc-details:hover { background: #ffe3cc; }
@media (max-width: 600px) {
    .ft-fc-details { padding: 5px 10px; font-size: 12px; }
}

/* the offer card and its "view more" bar must read as ONE box:
   kill every legacy margin between them, square the card's bottom corners */
.gds-carrier-block .flight-item { margin: 0 !important; padding: 0 !important; }
.gds-carrier-block .flight-item .ft-flight-card,
.gds-carrier-block .flight-item article { margin-bottom: 0 !important; }

/* "view N more flights of this airline" bar — the card's bottom edge */
.gds-more-bar {
    background: var(--ft-navy);
    border-radius: 0 0 var(--ft-radius) var(--ft-radius);
    margin-top: -1px;
    position: relative;
    z-index: 1;
    padding: 9px 16px 8px;
    text-align: center;
}
.gds-more-bar .show-more-flights-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
}
.gds-more-bar .show-more-flights-btn:hover { color: #ffb27d !important; }
.gds-more-bar img { width: 18px; height: 18px; border-radius: 4px; background: #fff; padding: 1px; }
.gds-more-bar svg { opacity: .7; }
.gds-carrier-block .ft-flight-card { margin-bottom: 0; }
.gds-carrier-block:has(.gds-more-bar) .gds-offer-card { border-radius: var(--ft-radius) var(--ft-radius) 0 0 !important; }

/* per-carrier modal: theme the injected cards */
.airline-modal-content { border-radius: 16px !important; border: 0 !important; background: var(--ft-bg) !important; }
.airline-modal .popup-flight { margin-bottom: 14px; }
.airline-modal .ft-flight-card { box-shadow: var(--ft-shadow); }

/* sidebar filter panels (legacy collapse structure, ft look) */
.gds-filters { padding: 16px 16px 6px; }
.gds-filters .panel { border: 0 !important; box-shadow: none !important; background: none !important; margin: 0 !important; border-top: 1px solid #eef2f6 !important; border-radius: 0 !important; }
.gds-filters .panel:first-child { border-top: 0 !important; }
.gds-filters .panel-title { margin: 0; }
.gds-filters .panel-title a {
    display: block;
    padding: 12px 0 10px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ft-muted) !important;
    background: none !important;
    border: 0 !important;
}
.gds-filters .panel { padding: 0 !important; }
.gds-filters .panel-title { padding: 0 !important; margin: 0 !important; text-align: left !important; }
.gds-filters .panel-title a:hover { color: var(--ft-primary) !important; }
.gds-filters .panel-content { padding: 2px 4px 14px !important; background: none !important; }
.gds-filters .time-headings {
    font-size: 12px;
    font-weight: 700;
    color: var(--ft-ink);
    margin: 8px 0 4px;
}
.gds-filters .min-price-label, .gds-filters .max-price-label,
.gds-filters .start-time-label, .gds-filters .end-time-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ft-ink);
}
.gds-filters .filters-option li,
.gds-filters .check-square.filters-option li {
    list-style: none;
    margin: 0 0 2px;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.gds-filters .filters-option li a,
.gds-filters .check-square.filters-option li a {
    text-transform: none !important;
    background: none !important;
    background-image: none !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.gds-filters .filters-option li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ft-text) !important;
    background: none !important;
}
.gds-filters .filters-option li a:hover { background: #f7f9fc !important; }
.gds-filters .filters-option li.active a {
    background: #fff1e6 !important;
    color: var(--ft-primary-dark) !important;
    font-weight: 700;
}
.gds-filters .filters-option li img { border-radius: 4px; }
.gds-filters .check-square li a:before, .gds-filters .check-square li:before { display: none !important; content: none !important; }

/* checkbox-style rows (matches the own-results filter design):
   click toggles li.active — checked = that option is selected as a filter */
.gds-filters .gds-check {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid #b6c1d1;
    border-radius: 4px;
    background: #fff;
    transition: border-color .12s ease, background .12s ease;
}
.gds-filters .filters-option li a:hover .gds-check { border-color: var(--ft-primary); }
.gds-filters .filters-option li.active .gds-check {
    border-color: var(--ft-primary);
    background-color: var(--ft-primary);
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.2 4.4 8l6-6.5'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ff8b3d 0%, var(--ft-primary) 60%, #e65c00 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 11px 9px, 100% 100%;
}
.gds-filters .gds-f-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gds-filters .gds-f-price { flex: 0 0 auto; font-style: normal; font-size: 12px; color: var(--ft-muted); }
.gds-filters .filters-option li.active .gds-f-price { color: var(--ft-primary-dark); }

/* plain (non-collapsible) filter groups, own-page look */
.gds-filter-group { border-top: 1px solid #eef2f6; padding: 12px 0 14px; }
.gds-filter-group:first-child { border-top: 0; padding-top: 4px; }
.gds-group-title {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ft-muted);
}
.gds-filter-group .ft-price-vals { margin: 0 2px 8px; }
.gds-filter-group #price-range { margin: 12px 8px 6px; }
.gds-stops-any { margin: 0; padding: 0; }

/* radio look for the Stops rows */
.gds-filters .gds-check.gds-radio { border-radius: 50%; }
.gds-filters .filters-option li.active .gds-check.gds-radio {
    background: #fff !important;
    background-image: none !important;
    border: 5.5px solid var(--ft-primary);
}

/* collapse +/- toggle bubbles in brand orange (legacy theme paints them cyan) */
.gds-filters .panel-title a:after,
.gds-filters .panel-title a:before,
.gds-filters .panel-title a .collapse-icon,
.gds-filters .panel-title a > i {
    color: #fff !important;
    background: var(--ft-primary) !important;
    background-color: var(--ft-primary) !important;
    border-color: var(--ft-primary) !important;
}

/* jQuery-UI sliders in brand orange */
.gds-filters .ui-slider {
    height: 5px !important;
    background: #dbe2ec !important;
    border: 0 !important;
    border-radius: 4px !important;
    margin: 14px 8px 6px;
}
.gds-filters .ui-slider .ui-slider-range { background: var(--ft-primary) !important; border-radius: 4px; }
.gds-filters .ui-slider .ui-slider-handle {
    width: 17px !important;
    height: 17px !important;
    top: -6px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 5px solid var(--ft-primary) !important;
    box-shadow: 0 1px 4px rgba(15, 41, 77, .3);
    cursor: pointer !important;
    outline: none;
}

/* details modal (bootstrap): container themed by .modal-content rules.
   The itinerary inside is legacy markup — three fixes scoped to it:
   1) breathing room between the close "x" and the first leg header
   2) segment rows are floated cols with NO clearfix, so the Connection
      Time bar overlapped the next segment — contain + clear the floats
   3) BOOK NOW / CLICK FOR CALL: legacy .btn-small padding squashed them */
.modal[id^="flight-details-"] .modal-body { padding-top: 14px; }
.modal[id^="flight-details-"] .modal-body > h4:first-child { margin-top: 4px; }

/* Leg header (Departure/Return + total duration): vertically centre the icons
   with their text (the inner flex spans had no align-items, so the clock/plane
   icon floated above the label). */
.modal[id^="flight-details-"] .modal-body > h4 > span { align-items: center; }
.modal[id^="flight-details-"] .modal-body > h4 .icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0;
}
.modal[id^="flight-details-"] .modal-body > h4 .icon i { line-height: 1; vertical-align: middle; }

.modal[id^="flight-details-"] .article-lg {
    overflow: hidden;            /* contains the floated cols */
    margin-bottom: 12px;
}
.modal[id^="flight-details-"] .details-wrapper::after,
.modal[id^="flight-details-"] .second-row::after {
    content: "";
    display: block;
    clear: both;
}

.modal[id^="flight-details-"] .total-time.col-md-12 {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    padding: 9px 12px !important;
    margin: 4px 0 16px !important;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.4;
}

.modal[id^="flight-details-"] .action .button.btn-small {
    min-height: 46px;
    padding: 12px 18px !important;
    font-size: 14px;
}
@media (min-width: 768px) {
    .modal[id^="flight-details-"] .action .row {
        display: flex;
        align-items: center;
        width: 100%;   /* nested .row is a flex item — stop it shrinking to fit */
    }
    .modal[id^="flight-details-"] .action #left1 {
        height: auto;
        padding: 4px 0;
    }
}

@media (max-width: 767px) {
    /* filter sidebar column: no gap when the filter panel is collapsed (the empty
       column otherwise pushes the results down); the panel adds its own margin when open */
    .gds-filters-col { margin-bottom: 0; }
    #ft-filters.is-open { margin-bottom: 16px; }

    /* ---- Flight-details popup: tidy the segment timeline on phones ---- */
    .modal[id^="flight-details-"] .modal-dialog { margin: 8px; }
    /* less side gutter (more room for airport names) + bottom clearance so the
       last row isn't hidden behind the floating chat button */
    .modal[id^="flight-details-"] .modal-body { padding: 12px 12px 34px !important; }

    /* leg header (Departure/Return + total duration): shrink so each side fits
       one line instead of wrapping, and keep the icon aligned with the text */
    .modal[id^="flight-details-"] .modal-body > h4 {
        font-size: 14px !important;
        padding: 8px 10px !important;
        line-height: 1.3;
        gap: 8px;
    }
    .modal[id^="flight-details-"] .modal-body > h4 > span { gap: 6px !important; }
    .modal[id^="flight-details-"] .modal-body > h4 .icon i { font-size: 15px; }

    /* logo + airline block: centre with a little breathing room */
    .modal[id^="flight-details-"] .airline_details { text-align: center; margin: 2px 0 8px; line-height: 1.55; }

    /* the 3-column timeline row: departure | arrow | arrival */
    .modal[id^="flight-details-"] .take-off,
    .modal[id^="flight-details-"] .landing { padding: 0 3px !important; }
    .modal[id^="flight-details-"] .take-off p,
    .modal[id^="flight-details-"] .landing p {
        margin: 0;
        font-size: 12px;
        line-height: 1.42;
        word-break: break-word;
    }
    .modal[id^="flight-details-"] .iternery-text-time { font-size: 16px; }

    /* middle column: drop the arrow + duration down to the time row so the
       segment reads as a proper departure -> arrival path, and keep the icon small */
    .modal[id^="flight-details-"] .take-off.col-xs-2 {
        padding-top: 20px !important;
        font-size: 12px;
        line-height: 1.3;
    }
    .modal[id^="flight-details-"] .iternery-arrow-popup {
        display: block;
        max-width: 32px;
        margin: 0 auto 3px;
    }
}

/* --------------------------------------------------------------------------
   12b2. BOOKING PAGE — SELECTED ITINERARY + TRUST BAND
   -------------------------------------------------------------------------- */
.ft-itin { margin-bottom: 22px; }
.ft-itin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ft-itin-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}
.ft-itin-head h3 svg { color: var(--ft-green); flex: 0 0 auto; }
.ft-itin-change { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.ft-itin .ft-flight-card { margin-bottom: 12px; }
.ft-itin .ft-flight-card:hover { transform: none; }

.ft-itin-fares {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ft-muted);
}
.ft-itin-fares span { display: block; padding: 1px 0; }

.ft-itin-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: #f7f9fc;
    border: 1px solid #e8edf3;
    border-radius: var(--ft-radius);
    padding: 12px 14px;
}
.ft-itin-trust > span { display: block; font-size: 12px; }
.ft-itin-trust svg { color: var(--ft-green); vertical-align: -2px; margin-right: 5px; }
.ft-itin-trust strong { font-size: 12.5px; color: var(--ft-ink); }
.ft-itin-trust em { display: block; font-style: normal; color: var(--ft-muted); margin-top: 1px; }

@media (max-width: 767px) {
    .ft-itin { margin-bottom: 16px; }
    .ft-itin-head h3 { font-size: 15.5px; }
    .ft-itin-trust { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 10px 12px; }
}

/* GDS booking page — elegant itinerary detail (.gbk-*). Clean flight-path cards:
   airline row + cabin chip, then departure -> path -> arrival, plus connection pills. */
.gbk-itin { margin-bottom: 4px; }
.gbk-empty { color: var(--ft-muted); padding: 12px 0; }

.gbk-leg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.gbk-leg-head:first-child { margin-top: 4px; }
.gbk-leg-dir { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gbk-leg-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,105,15,.12); color: var(--ft-primary); flex: 0 0 auto; }
.gbk-leg-word { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ft-primary); }
.gbk-leg-route { font-size: 16px; font-weight: 800; color: var(--ft-ink); }
.gbk-leg-route em { font-style: normal; color: var(--ft-muted); margin: 0 4px; font-weight: 600; }
.gbk-leg-dur { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ft-ink); background: #f2f5f9; padding: 5px 11px; border-radius: 999px; }
.gbk-leg-dur svg { color: var(--ft-muted); }

.gbk-seg { border: 1px solid var(--ft-line, #e6ebf1); border-radius: 14px; background: #fff; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,41,77,.04); }
.gbk-seg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef2f6; }
.gbk-seg-airline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gbk-seg-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.gbk-seg-air-txt { min-width: 0; line-height: 1.3; }
.gbk-seg-air-txt strong { display: block; font-size: 14px; color: var(--ft-ink); font-weight: 800; }
.gbk-seg-air-txt span { font-size: 12px; color: var(--ft-muted); }
.gbk-cabin { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #d24e00; background: #fff3ec; border: 1px solid #ffe0cd; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

.gbk-seg-route { display: flex; align-items: flex-start; gap: 10px; padding-top: 14px; }
.gbk-pt { flex: 1 1 0; min-width: 0; }
.gbk-pt-arr { text-align: right; }
.gbk-time { font-size: 20px; font-weight: 800; color: var(--ft-ink); line-height: 1.1; }
.gbk-date { font-size: 11.5px; color: var(--ft-muted); margin-top: 2px; }
.gbk-city { font-size: 13px; font-weight: 700; color: var(--ft-ink); margin-top: 6px; }
.gbk-city b { font-weight: 700; color: var(--ft-primary); }
.gbk-airport { font-size: 11.5px; color: var(--ft-muted); margin-top: 1px; line-height: 1.35; }
.gbk-mid { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; align-self: center; min-width: 90px; }
.gbk-mid-dur { font-size: 11.5px; font-weight: 700; color: var(--ft-muted); margin-bottom: 5px; white-space: nowrap; }
.gbk-mid-line { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; color: var(--ft-primary); }
.gbk-mid-line i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg,#e6ebf1,#c9d3e0); }
.gbk-mid-line svg { position: relative; background: #fff; padding: 0 5px; transform: rotate(90deg); }

.gbk-conn { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: #0f6f8f; background: #eaf7fb; border: 1px solid #d4eef6; border-radius: 999px; padding: 7px 14px; margin: 0 auto 12px; width: fit-content; max-width: 100%; }
.gbk-conn svg { color: #17a2c7; flex: 0 0 auto; }

@media (max-width: 767px) {
    /* leg header: [icon DEPARTURE] .... [duration] on line 1, route on line 2 */
    .gbk-leg-head { margin: 14px 0 10px; row-gap: 5px; }
    .gbk-leg-dir { order: 1; }
    .gbk-leg-dur { order: 2; font-size: 12px; padding: 4px 9px; }
    .gbk-leg-route { order: 3; flex-basis: 100%; font-size: 15px; }

    .gbk-seg { padding: 12px; }
    .gbk-seg-route { gap: 6px; }
    .gbk-time { font-size: 17px; }
    .gbk-city { font-size: 12px; }
    .gbk-airport { font-size: 11px; }
    .gbk-mid { min-width: 58px; }
    .gbk-mid-dur { font-size: 10.5px; }

    /* booking form: full width on phones — drop the nested Bootstrap column
       gutters + the .booking-section 30px inset so the fields line up with the
       itinerary cards above (no odd inset) */
    #booking-form .col-sms-14 { padding-left: 0 !important; padding-right: 0 !important; }
    #booking-form .booking-section { padding-left: 0 !important; padding-right: 0 !important; }
    #booking-form .form-group.row { margin-left: 0 !important; margin-right: 0 !important; }
    #booking-form .form-group.row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* --------------------------------------------------------------------------
   12c. LEAD FORMS (Request Call Back etc.)
   -------------------------------------------------------------------------- */
.ft-lead-form {
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: 14px;
    box-shadow: var(--ft-shadow);
    padding: 20px 20px 18px;
    max-width: 560px;
}
.ft-lead-head { margin-bottom: 16px; }
.ft-lead-head h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
}
.ft-lead-head h4 svg { color: var(--ft-primary); flex: 0 0 auto; }
.ft-lead-head p { font-size: 13.5px; color: var(--ft-muted); margin: 0; }

.ft-lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.ft-lead-grid .ft-span2 { grid-column: 1 / -1; }
.ft-lead-grid .ft-field input[type="tel"],
.ft-lead-grid .ft-field input[type="email"] {
    border: 0 !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    color: var(--ft-ink) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.ft-lead-grid .ft-field input[type="tel"]:focus,
.ft-lead-grid .ft-field input[type="email"]:focus { border: 0 !important; box-shadow: none !important; }

.ft-lead-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-text);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 14px;
    cursor: pointer;
}
.ft-lead-terms input { flex: 0 0 auto; margin-top: 2px; }
.ft-lead-terms a { font-weight: 600; }

.ft-lead-form button[type="submit"] { width: 100%; font-size: 15.5px; padding: 13px 20px; }

.ft-lead-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ft-muted);
    margin: 10px 0 0;
}
.ft-lead-note svg { color: var(--ft-green); }

/* on the dedicated page the form sits centred inside the legacy box */
.contact-form .ft-lead-form { margin: 0 auto; }

/* compact sidebar variant (destination/booking pages) — the column is narrow,
   so every field goes full-width to keep labels readable */
.ft-lead-form.ft-lead-side { max-width: none; padding: 16px 14px 14px; }
.ft-lead-side .ft-lead-head h4 { font-size: 16px; }
.ft-lead-side .ft-lead-head p { font-size: 12.5px; }
.ft-lead-side .ft-lead-grid { grid-template-columns: 1fr !important; gap: 8px; }
.ft-lead-side button[type="submit"] { font-size: 14.5px; padding: 12px 16px; }

/* legacy sidebar wrapper must not paint behind the new card */
.book-with-us-box { background: none !important; padding: 0 !important; border: 0 !important; }
.book-with-us-box .container { display: none; }

/* "Need More Help?" sidebar box */
.sidebar .contact-box { margin-bottom: 16px; }
.sidebar .contact-box h4 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.sidebar .contact-box p { font-size: 13px; color: var(--ft-muted); }
.sidebar .contact-box .contact-phone a {
    font-size: 17px;
    font-weight: 800;
    color: var(--ft-primary-dark) !important;
    word-break: normal;
}
.sidebar .contact-box .contact-phone i { color: var(--ft-primary) !important; }
.sidebar .contact-box .contact-email {
    font-size: 11px !important;
    color: var(--ft-muted) !important;
    word-break: break-all;
}

/* wide variant (get-a-quote page) */
.ft-lead-form.ft-lead-wide { max-width: 760px; margin: 0 auto; padding: 26px 26px 22px; }
.ft-lead-sec {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ft-primary);
    border-bottom: 1px solid #f0f3f7;
    padding-bottom: 7px;
    margin: 18px 0 12px;
}
.ft-lead-form .ft-lead-sec:first-of-type { margin-top: 4px; }
.ft-lead-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ft-lead-checks { display: flex; gap: 10px 24px; flex-wrap: wrap; margin: 2px 0 6px; }
.ft-field .ft-seg-infield { margin-top: 3px; }
.ft-field textarea {
    border: 0 !important;
    padding: 2px 0 0 !important;
    min-height: 84px;
    font-size: 15px !important;
    font-weight: 500;
    color: var(--ft-ink) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
    resize: vertical;
}
.ft-field textarea:focus { border: 0 !important; box-shadow: none !important; }
.ft-field > label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #a3aebf; }

@media (max-width: 560px) {
    .ft-lead-form.ft-lead-wide { padding: 18px 14px; }
    .ft-lead-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
}

/* narrow screens: one field per row — split pairs truncate their labels */
@media (max-width: 420px) {
    .ft-lead-form { padding: 16px 14px; }
    .ft-lead-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* --------------------------------------------------------------------------
   13. HOMEPAGE CONTENT SECTIONS (regions, routes, promos, why-us)
   -------------------------------------------------------------------------- */
/* homepage sections: kill legacy #content padding so rhythm is ours */
section#content.ft-home { padding: 0 !important; }

.ft-section { padding-top: 44px; padding-bottom: 8px; }
.ft-sec-head { margin-bottom: 22px; }
.ft-sec-head h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
}
.ft-sec-head p { color: var(--ft-muted); font-size: 14.5px; margin: 0; }

/* region explorer cards */
.ft-region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ft-region-card {
    position: relative;
    display: block;
    border-radius: var(--ft-radius);
    overflow: hidden;
    height: 150px;
    box-shadow: var(--ft-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ft-region-card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow-lg); }
.ft-region-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ft-region-card:hover img { transform: scale(1.05); }
.ft-region-card .ft-region-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(15, 41, 77, 0) 30%, rgba(10, 28, 56, .82) 100%);
}
.ft-region-card .ft-region-label strong {
    color: #fff;
    font-family: var(--ft-font-display);
    font-size: 17px;
    font-weight: 700;
}
.ft-region-card .ft-region-label span {
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* popular route links (SEO grid) */
.ft-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 20px;
    background: #fff;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    padding: 20px 22px;
    box-shadow: var(--ft-shadow);
}
.ft-links a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ft-text);
    border-bottom: 1px dashed #edf1f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-links a:hover { color: var(--ft-primary); }

/* promo cards */
.ft-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ft-promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ft-radius);
    overflow: hidden;
    box-shadow: var(--ft-shadow);
    background: #fff;
    border: 1px solid var(--ft-line);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ft-promo-card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow-lg); }
.ft-promo-card img { width: 100%; height: 150px; object-fit: cover; flex: 0 0 auto; }
.ft-promo-card .ft-promo-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
}
.ft-promo-card .ft-promo-body strong {
    display: block;
    font-family: var(--ft-font-display);
    font-size: 16.5px;
    color: var(--ft-ink);
    margin: 0 0 6px;
    line-height: 1.3;
}
.ft-promo-card .ft-promo-desc {
    display: block;
    font-size: 13.5px;
    color: var(--ft-muted);
    line-height: 1.55;
    margin: 0 0 14px;
}
.ft-promo-card .ft-promo-cta {
    display: block;
    margin-top: auto;
    color: var(--ft-primary);
    font-size: 13.5px;
    font-weight: 700;
}
.ft-promo-card:hover .ft-promo-cta { color: var(--ft-primary-dark); }

/* homepage intro band needs air after the routes grid */
.ft-intro { margin-top: 36px; }

/* light "why book with us" band */
.ft-why { background: #fff; border-top: 1px solid #edf1f6; padding: 44px 0 36px; margin-top: 36px; }
.ft-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ft-why-card {
    background: #f7f9fc;
    border: 1px solid #edf1f6;
    border-radius: var(--ft-radius);
    padding: 20px 18px;
}
.ft-why-card .ft-why-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff1e6;
    color: var(--ft-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ft-why-card strong {
    display: block;
    font-family: var(--ft-font-display);
    font-size: 15px;
    color: var(--ft-ink);
    margin-bottom: 4px;
}
.ft-why-card p { font-size: 13.5px; color: var(--ft-muted); margin: 0; line-height: 1.55; }

@media (max-width: 991px) {
    .ft-region-grid { grid-template-columns: repeat(2, 1fr); }
    .ft-links { grid-template-columns: repeat(2, 1fr); }
    .ft-promo-grid { grid-template-columns: 1fr 1fr; }
    .ft-why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .ft-section { padding-top: 30px; padding-bottom: 4px; }
    .ft-sec-head h2 { font-size: 20px; }
    .ft-region-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ft-region-card { height: 124px; }
    .ft-region-card .ft-region-label { padding: 10px 12px; }
    .ft-region-card .ft-region-label strong { font-size: 15px; }
    .ft-region-card .ft-region-label span { font-size: 11.5px; }
    .ft-intro { margin-top: 26px; }
    .ft-links { grid-template-columns: 1fr; padding: 14px 18px; }
    .ft-promo-grid { grid-template-columns: 1fr; }
    .ft-why { padding: 32px 0 26px; margin-top: 28px; }
    .ft-why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ft-why-card { padding: 14px 12px; }
}