/* =========================================================================
   7Sky Travels — site-wide theme layer
   Loaded after the legacy template stylesheets (style.css / style_1.css)
   on purpose: this file re-skins colour, type, spacing and depth across
   every shared component without touching the Bootstrap 3 grid/JS the
   booking flow depends on.
   ========================================================================= */

:root {
    --navy-900: #041321;
    --navy-800: #0a2f52;
    --navy-700: #123a5e;
    --navy-600: #1a4b7a;
    --sky-500:  #1483d6;
    --sky-300:  #6cd0ff;
    --gold-600: #e8a400;
    --gold-500: #FFD71E;
    --gold-200: #ffe98a;
    --gold-100: #fff6d6;
    --ink-900:  #1b2733;
    --ink-600:  #52657a;
    --neutral-50:  #f6f8fb;
    --neutral-100: #eef2f7;
    --neutral-200: #e2e8f0;
    --white: #ffffff;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 10px rgba(10,47,82,.08);
    --shadow-md: 0 10px 30px rgba(10,47,82,.12);
    --shadow-lg: 0 20px 50px rgba(4,19,33,.20);
    --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------------
   Base / typography
   --------------------------------------------------------------------- */
body {
    color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6,
.title, .section-title, .light-section-title h1, .light-section-title h2,
.product-search-title, .main-footer .about-box h3, .page-title h3,
.choose-us-item h4, .modal-title {
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
    font-weight: 700;
    letter-spacing: .2px;
}

a { transition: color .2s var(--ease); }

::selection { background: var(--navy-800); color: var(--gold-200); }

/* ---------------------------------------------------------------------
   Header — two rows on purpose:
   Row 1 (.site-topbar): logo left, Trustpilot + phone right, opposite the logo.
   Row 2 (.site-navbar): nav links, collapsible on mobile via the hamburger.
   --------------------------------------------------------------------- */
.site-header { position: relative; }

.site-topbar { background: var(--white); border-top: 4px solid var(--gold-500); }
.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 14px 0;
    gap: 10px;
}
.site-topbar .navbar-brand.logo { height: auto; padding: 0; float: none; margin: 0; }

.site-nav-actions { display: flex; align-items: center; }
.site-trustpilot-mini { display: flex; align-items: center; margin-right: 18px; }
.site-trustpilot-mini img { height: 34px; width: auto; border-radius: var(--radius-sm); }

.site-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-800) !important;
    color: var(--white) !important;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* Bootstrap's own .navbar-default .navbar-nav>li>a:hover rule can be more
   specific than a single class and sets background-color:transparent on
   hover/focus — without !important here it would win, leaving white text
   on a transparent (white) background, i.e. an invisible phone number. */
.site-phone-cta:hover,
.site-phone-cta:focus {
    background: var(--navy-800) !important;
    color: var(--white) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.site-phone-cta .fa-phone { color: var(--gold-500); }

.site-navbar {
    background: var(--white);
    border-top: 1px solid var(--neutral-100);
    box-shadow: var(--shadow-sm);
    margin: 0;
    border-radius: 0;
    min-height: auto;
}
.site-navbar .navbar-header { min-height: 0; }
.site-navbar .navbar-toggle { margin: 8px 0; border-color: var(--neutral-200); }
.site-navbar .navbar-toggle .icon-bar { background: var(--navy-800); }
.site-navbar .navbar-toggle:hover,
.site-navbar .navbar-toggle:focus { background: var(--neutral-50); }

.site-nav-links > li > a {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--navy-800) !important;
    position: relative;
    padding: 16px 14px;
}
.site-nav-links > li > a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 10px;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
}
.site-nav-links > li > a:hover::after,
.site-nav-links > li.active > a::after { transform: scaleX(1); }
.site-nav-links > li > a:hover,
.site-nav-links > li > a:focus,
.site-nav-links > li.active > a,
.site-nav-links > li.active > a:focus,
.site-nav-links > li.active > a:hover {
    background: transparent !important;
    color: var(--navy-800) !important;
}

@media (max-width: 767px) {
    .site-trustpilot-mini { display: none; }
    .site-phone-cta { padding: 8px 14px; font-size: 14px; }
    .site-nav-links > li > a::after { display: none; }
}

/* ---------------------------------------------------------------------
   Hero / search widget
   --------------------------------------------------------------------- */
.full-width-search {
    background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-600) 100%);
    padding: 46px 0 60px;
}

.search-top.nav-tabs {
    border: none;
    margin-bottom: -1px;
}
.search-top.nav-tabs > li > a {
    background: rgba(255,255,255,.08);
    color: var(--white);
    border: none !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 4px;
    padding: 14px 26px;
}
.search-top.nav-tabs > li.active > a,
.search-top.nav-tabs > li.active > a:hover,
.search-top.nav-tabs > li.active > a:focus {
    background: var(--white) !important;
    color: var(--navy-800) !important;
    border: none !important;
}
.search-top.nav-tabs > li.active > a i { color: var(--gold-600); }

.search-section .tab-content {
    background: var(--white);
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px 26px 26px;
}

.search-section .product-search-title {
    color: var(--navy-800) !important;
    font-size: 22px !important;
    font-weight: 800;
    position: relative;
    padding-left: 16px;
    margin-bottom: 14px;
}
.search-section .product-search-title::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 5px;
    border-radius: 3px;
    background: var(--gold-500);
}

.search-col-padding label {
    color: var(--ink-600);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.search-section .form-control,
.search-section input.form-control {
    background: var(--neutral-50);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    height: 44px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-section .form-control:focus {
    border-color: var(--sky-500);
    box-shadow: 0 0 0 3px rgba(20,131,214,.15);
    outline: none;
}
.search-section .input-group-addon {
    background: var(--neutral-50);
    border: 1.5px solid var(--neutral-200);
    border-left: none;
    color: var(--navy-700);
}

.select-box__current {
    background: var(--neutral-50);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    height: 44px;
    display: flex;
    align-items: center;
}
.select-box__input-text { color: var(--ink-900); margin: 0; }

.pax {
    background: var(--neutral-50);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    height: 44px;
    line-height: 42px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
}
.pax .text-white { color: var(--ink-900) !important; font-size: 13px; }
.pax .fa-angle-down { margin-right: 3px; font-size: 11px; }

/* Trip type / passengers / cabin class row: give it the same
   uppercase micro-label + spacing treatment as the fields below it. */
.flight_type, .cabin_class, .pax {
    position: relative;
    margin-top: 24px;
}
.flight_type::before,
.cabin_class::before,
.pax::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    font-weight: 700;
    font-size: 12.5px;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-600);
    white-space: nowrap;
}
.flight_type::before { content: "Trip Type"; }
.cabin_class::before { content: "Cabin Class"; }
.pax::before { content: "Passengers"; }

.flight_type { margin-right: 10px; }
.pax { margin-right: 10px; }

.price-Guaranteed {
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
}
.price-Guaranteed p { color: var(--navy-800) !important; margin: 0; }

.search-button {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-500) 55%, var(--gold-600)) !important;
    color: var(--navy-900) !important;
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(255,215,30,.35);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(255,215,30,.45);
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600)) !important;
}

#gl_recaptcha { transform-origin: left top; }

/* ---------------------------------------------------------------------
   Deals carousel
   --------------------------------------------------------------------- */
.offer-slider .item-bg {
    background: var(--navy-800) !important;
    background-image: linear-gradient(160deg, var(--navy-700), var(--navy-900)) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,.06);
    /* equal-height cards regardless of airline-name length: fix the height
       and pin the "For Booking Call" row to the bottom via margin-top:auto */
    height: 200px;
    display: flex;
    flex-direction: column;
}
.offer-slider .item-bg hr { margin-top: auto; margin-bottom: 8px; }

/* "No deals available" fallback card: its <a> is a direct flex child of
   .item-bg (unlike the real deal cards, where the CTA is nested inside a
   row), so it stretches full-width via flex's default align-items:stretch
   and picks up the legacy plain-gold-bar look from style_1.css. */
.offer-slider .item-bg h3,
.offer-slider .item-bg h4 { color: var(--white); }
.offer-slider .item-bg > a {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--gold-200), var(--gold-500) 60%, var(--gold-600)) !important;
    color: var(--navy-900) !important;
    padding: 8px 16px !important;
    border-radius: 999px;
    border: none !important;
    font-weight: 800;
    font-size: 13px !important;
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   Welcome / how-it-work band
   --------------------------------------------------------------------- */
#how-it-work {
    background: var(--neutral-50);
}
#how-it-work .work-row { padding: 50px 0; }
#how-it-work h1 { color: var(--navy-800); font-size: 30px; }
#how-it-work h1 strong { color: var(--sky-500); }
#how-it-work p { color: var(--ink-600); max-width: 900px; margin: 14px auto 0; line-height: 1.8; }

/* ---------------------------------------------------------------------
   Top destinations
   --------------------------------------------------------------------- */
.td-overlay {
    background: linear-gradient(160deg, rgba(4,19,33,.92), rgba(10,47,82,.85)) !important;
}
.light-section-title h1 { color: var(--white); }
.light-section-title p { color: rgba(255,255,255,.8); }

.td-product { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.td-product img { transition: transform .5s var(--ease); }
.td-product:hover img { transform: scale(1.08); }
.td-product .overlay {
    background: linear-gradient(180deg, rgba(4,19,33,0) 40%, rgba(4,19,33,.92) 100%);
    display: flex;
    align-items: flex-end;
}
.td-product .overlay .wrapper { padding: 20px; width: 100%; }
.td-product .overlay h3 span { color: var(--gold-500); font-weight: 800; letter-spacing: 1px; }
.td-product .overlay h5 { opacity: .85; margin-bottom: 2px; }
.td-product .overlay p { color: rgba(255,255,255,.85); margin: 6px 0 12px; }
.td-product .overlay a {
    display: inline-block;
    background: var(--gold-500);
    color: var(--navy-900) !important;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none !important;
    letter-spacing: .5px;
    transition: transform .2s var(--ease);
}
.td-product .overlay a:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   Why choose us
   --------------------------------------------------------------------- */
#why-choose-us, .choose-us-row { background: var(--white) !important; }
#why-choose-us .light-section-title h1,
#why-choose-us .light-section-title h4 { color: var(--navy-800); }
#why-choose-us .light-section-title h4 { color: var(--gold-600); letter-spacing: 2px; }
#why-choose-us .light-section-title p { color: var(--ink-600); }

.choose-us-item {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.choose-us-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.choose-icon {
    background: var(--navy-800) !important;
    color: var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}
.choose-icon .pound-sign {
    /* raster icon (dark glyph on transparent bg) — recolour to match the
       white font-icon siblings since `color` doesn't affect <img> content */
    filter: brightness(0) invert(1);
}
.choose-us-item h4 { color: var(--navy-800); margin-top: 18px; }
.choose-us-item p { color: var(--ink-600); }

/* ---------------------------------------------------------------------
   Footer — single cohesive grid (about / links / contact / newsletter),
   then a trust/payment strip, then a slim copyright bar.
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); border-top: 5px solid var(--gold-500); }

.footer-main { padding: 50px 0 30px; }
.footer-col { margin-bottom: 26px; }
.footer-col h3, .footer-col h4 {
    color: var(--gold-500) !important;
    font-size: 16px;
    letter-spacing: .5px;
    margin: 0 0 18px;
}
.footer-col p, .footer-col li, .footer-col a { color: rgba(255,255,255,.75); }
.footer-about p { line-height: 1.8; font-size: 13.5px; }

.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { text-decoration: none; font-size: 14px; transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--gold-500); }

.footer-contact p { margin-bottom: 14px; font-size: 14px; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--gold-500); }
.footer-contact .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: var(--gold-500);
    margin-right: 8px;
    font-size: 13px;
}

.footer-newsletter p { font-size: 13.5px; margin-bottom: 16px; }
/* Stacked, not side-by-side: the newsletter column (col-md-3) is too narrow
   to fit an "Enter Your Email" input next to a "SUBSCRIBE" button without
   squeezing the input down to a sliver. */
.footer-newsletter form { display: flex; flex-direction: column; gap: 10px; }
.footer-newsletter .form-control {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white) !important;
    border-radius: var(--radius-sm);
    height: 44px;
    box-shadow: none;
    width: 100%;
}
.footer-newsletter .form-control::placeholder { color: rgba(255,255,255,.5); }
.footer-newsletter .subs_button {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-500) 60%, var(--gold-600));
    color: var(--navy-900);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 800;
    padding: 0 16px;
    height: 44px;
    width: 100%;
    white-space: nowrap;
}
.footer-newsletter .subs_button .fa { margin-right: 6px; }
.footer-newsletter-note { font-size: 11.5px; opacity: .6; margin: 8px 0 0; }

.footer-trust {
    position: relative;
    background: var(--navy-800);
    padding: 22px 0;
}
.we-accept ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.we-accept ul li {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    display: flex;
    align-items: center;
}
.barclays-col { display: flex; align-items: center; justify-content: flex-end; }
.barclays-col .barclay { border-radius: var(--radius-sm); }

.go-up a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-900) !important;
    box-shadow: var(--shadow-sm);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.footer-bottom { background: var(--navy-900); padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.footer-bottom-inner p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.footer-bottom-inner a { color: var(--gold-500); text-decoration: none; }
.footer-linkedin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: var(--gold-500) !important;
    font-size: 12px;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.footer-linkedin:hover {
    background: #0a66c2;
    color: var(--white) !important;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .barclays-col { justify-content: flex-start; margin-top: 16px; }
    .go-up { position: static; margin-top: 16px; text-align: center; }
    .go-up a { position: static; transform: none; margin: 0 auto; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------------
   Simple content pages: About / Terms / Privacy / Callback
   --------------------------------------------------------------------- */
.misc-row { background: var(--neutral-50); }
.misc-row .large-block,
.about-intro.style1.large-block {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 36px 40px !important;
}
.misc-row .title,
.about-intro .title {
    color: var(--navy-800);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 3px solid var(--gold-500);
    display: inline-block;
}
.about-intro h4 {
    color: var(--navy-800);
    margin-top: 30px;
    padding-left: 14px;
    border-left: 4px solid var(--gold-500);
}
.about-intro p, .about-intro li { color: var(--ink-600); line-height: 1.8; }
.about-intro ul { padding-left: 20px; }
.about-intro a { color: var(--sky-500); }

.contact-bg {
    background: linear-gradient(160deg, rgba(4,19,33,.85), rgba(10,47,82,.85)), url(../images/contact-bg.jpg) bottom fixed;
    background-size: cover;
}
.contact-address { background: var(--navy-800) !important; }
.contact-address h2 { color: var(--white); }
.contact-address .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: var(--gold-500);
    font-size: 18px;
    margin-bottom: 10px;
}
.contact-form .form-control {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--neutral-200);
    height: 42px;
}
.contact-form .form-control:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(20,131,214,.15); }
.contact-form .btn-primary {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-500) 60%, var(--gold-600));
    color: var(--navy-900);
    border: none;
    font-weight: 800;
    letter-spacing: .5px;
    border-radius: 999px;
    padding: 10px 34px;
}

/* ---------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------- */
.modal-content { border-radius: var(--radius-md); overflow: hidden; border: none; box-shadow: var(--shadow-lg); }
.modal-header { background: var(--navy-800); border: none; }
.modal-header .modal-title { color: var(--gold-500) !important; }
.modal-header .close { color: var(--white); opacity: .8; text-shadow: none; }
.modal-footer { border-top: 1px solid var(--neutral-100); }
.modal .btn-primary {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-500) 60%, var(--gold-600));
    color: var(--navy-900);
    border: none;
    font-weight: 700;
}
.modal .btn-default { border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.trustpilot img { border-radius: var(--radius-sm); }