/* ================================================================
   NEW DESIGN — Travelofly
   Navy + Orange theme ported from New Design/assets/css/style.css
   ================================================================ */

:root {
  --nd-primary: #0a2b52;
  --nd-primary-d: #061d3a;
  --nd-secondary: #e85d00;
  --nd-ink: #1f2a37;
  --nd-muted: #5b6675;
  --nd-line: #e4e8ee;
  --nd-bg: #f4f7fb;
  --nd-radius: 14px;
  --nd-shadow: 0 10px 30px rgba(16, 42, 80, .10);
  --nd-white: #ffffff;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.nd-body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--nd-ink);
  background: var(--nd-bg);
  line-height: 1.55;
}
.nd-body img { max-width: 100%; display: block; }
.nd-body a { color: inherit; text-decoration: none; }

/* ---- Layout ---- */
.nd-wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* ================================================================
   TOPBAR / HEADER
   ================================================================ */
.nd-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--nd-line);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(16,42,80,.06);
}
.nd-topbar .nd-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  height: 64px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---- Logo ---- */
.nd-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 6px;
}
.nd-logo .nd-plane {
  color: var(--nd-secondary); /* orange plane */
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nd-logo .nd-brand {
  font-weight: 800;
  font-size: 24px;
  color: var(--nd-primary);   /* dark navy text */
  letter-spacing: -.4px;
  line-height: 1;
}

/* ---- Nav ---- */
.nd-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  flex: 1;
}
.nd-trust {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nd-muted);
  margin-right: 10px;
  flex-shrink: 0;
}
.nd-trust .nd-stars {
  color: #00b67a;   /* green stars — matches Trustpilot brand */
  font-size: 13px;
  letter-spacing: -1px;
}
.nd-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--nd-ink);
  padding: 6px 11px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.nd-nav a:hover       { color: var(--nd-primary); background: var(--nd-bg); }
.nd-nav a.nd-nav-active { color: var(--nd-primary); font-weight: 700; }

/* ---- Call box (right side — white, no dark background) ---- */
.nd-callbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--nd-ink);
  padding: 6px 0 6px 16px;
  border-left: 1px solid var(--nd-line);
}
.nd-callbox:hover { color: var(--nd-primary); }

/* Circle icon wrapper */
.nd-cb-ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--nd-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--nd-primary);
}
/* Text block */
.nd-cb-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nd-cb-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nd-muted);
  white-space: nowrap;
}
.nd-cb-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--nd-primary);
  white-space: nowrap;
  letter-spacing: .3px;
}

/* ---- Hamburger (mobile) ---- */
.nd-navtoggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  width: 40px; height: 40px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nd-navtoggle .nd-bars,
.nd-navtoggle .nd-bars::before,
.nd-navtoggle .nd-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nd-primary);
  border-radius: 2px;
  transition: .2s;
}
.nd-navtoggle .nd-bars { position: relative; }
.nd-navtoggle .nd-bars::before { content: ""; position: absolute; top: -7px; left: 0; }
.nd-navtoggle .nd-bars::after  { content: ""; position: absolute; top:  7px; left: 0; }

@media (max-width: 900px) {
  .nd-navtoggle { display: flex; }
  .nd-callbox .nd-cb-label { display: none; }
  .nd-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 18px 16px;
    border-bottom: 1px solid var(--nd-line);
    box-shadow: 0 8px 20px rgba(16,42,80,.1);
    gap: 2px;
    z-index: 300;
  }
  .nd-nav.open { display: flex; }
  .nd-nav a, .nd-trust { width: 100%; }
  .nd-callbox { border-left: none; padding-left: 0; }
  .nd-cb-num { font-size: 15px; }
}
@media (max-width: 480px) {
  .nd-logo .nd-brand { font-size: 20px; }
  .nd-cb-num { font-size: 14px; }
  .nd-cb-ic { width: 34px; height: 34px; }
}

/* ================================================================
   HERO
   ================================================================ */
.nd-hero {
  position: relative;
  background: linear-gradient(120deg, #081f3d, #0a2b52 45%, #144079);
  color: #fff;
  padding: 36px 0 110px;
  overflow: hidden;
}
.nd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 80% -10%, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.nd-hero h1 {
  font-size: clamp(22px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -.5px;
}
.nd-hero h1 .nd-h1a { display: block; }
.nd-hero h1 .nd-h1call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: clamp(17px, 4vw, 30px);
  color: #fff;
  border-bottom: 3px solid var(--nd-secondary);
  padding-bottom: 2px;
}
.nd-hero h1 .nd-h1call:hover { color: #ffd9bf; }
.nd-hero h1 .nd-h1ic {
  display: grid;
  place-items: center;
  width: 1.3em; height: 1.3em;
  border-radius: 50%;
  background: var(--nd-secondary);
  font-size: .72em;
}
.nd-hero-badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-top: 16px;
  justify-content: center;
}
.nd-hero-badges span { display: flex; align-items: center; gap: 7px; }
.nd-dot { width: 9px; height: 9px; border-radius: 50%; background: #00b67a; }
@media (max-width: 640px) {
  .nd-hero { padding: 18px 0 60px; }
}

/* ================================================================
   SEARCH CARD
   ================================================================ */
.nd-quotezone { position: relative; z-index: 10; }
.nd-searchcard {
  max-width: 1080px;
  margin: -80px auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--nd-shadow);
  position: relative;
  z-index: 5;
}
.nd-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 10px 0;
}
.nd-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 8px;
  border: none;
  background: transparent;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--nd-muted);
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  transition: .15s;
}
.nd-tab.active { color: var(--nd-primary); background: #e9eff7; }
.nd-tab.nd-dull { opacity: .4; filter: grayscale(.6); }
.nd-tab .nd-ti { font-size: 17px; }
.nd-tab.active .nd-ti { color: var(--nd-secondary); }
.nd-panel { padding: 20px; }
.nd-triptype {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--nd-muted);
  flex-wrap: wrap;
}
.nd-triptype label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.nd-triptype input { width: 20px; height: 20px; margin: 0; accent-color: var(--nd-secondary); }
.nd-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr 1.2fr auto;
  gap: 12px;
  align-items: end;
}
.nd-field { position: relative; display: flex; flex-direction: column; gap: 5px; }
.nd-field label { font-size: 12px; font-weight: 700; color: var(--nd-muted); text-transform: uppercase; letter-spacing: .4px; }
.nd-field input,
.nd-field select {
  padding: 13px 12px;
  border: 1.5px solid var(--nd-line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nd-ink);
  width: 100%;
  background: #fff;
  min-height: 48px;
}
.nd-field input:focus,
.nd-field select:focus {
  outline: none;
  border-color: var(--nd-primary);
  box-shadow: 0 0 0 3px rgba(10,43,82,.16);
}
.nd-field input[type=date] { -webkit-appearance: none; appearance: none; display: block; }
.nd-paxbtn { cursor: pointer; user-select: none; }
.nd-searchbtn {
  background: linear-gradient(180deg, #e85d00, var(--nd-secondary));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(232,93,0,.35);
  transition: .15s;
  height: 48px;
}
.nd-searchbtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.nd-formnote { margin: 12px 2px 0; font-size: 12px; color: var(--nd-muted); line-height: 1.5; }
.nd-formnote a { color: var(--nd-primary); text-decoration: underline; }

/* Autocomplete */
.nd-acbox {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--nd-shadow);
  z-index: 30;
  max-height: 250px;
  overflow: auto;
  display: none;
}
.nd-acbox.open { display: block; }
.nd-acitem {
  padding: 11px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  border-bottom: 1px solid #f1f4f8;
}
.nd-acitem:hover, .nd-acitem.hl { background: #e9eff7; }
.nd-acitem .nd-code { color: var(--nd-muted); font-weight: 700; font-size: 12px; }

/* Pax popover */
.nd-paxpop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: 12px;
  box-shadow: var(--nd-shadow);
  padding: 14px;
  z-index: 30;
  width: 240px;
  display: none;
}
.nd-paxpop.open { display: block; }
.nd-paxrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}
.nd-paxrow .nd-stp { display: flex; align-items: center; gap: 10px; }
.nd-stp button {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--nd-primary);
  background: #fff;
  color: var(--nd-primary);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
}
.nd-stp span { min-width: 20px; text-align: center; font-weight: 700; }

/* Search card responsive */
@media (max-width: 980px) {
  .nd-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .nd-searchbtn { grid-column: auto; }
}
@media (max-width: 640px) {
  .nd-searchcard { margin-top: -46px; border-radius: 14px; }
  .nd-tabs { padding: 6px 6px 0; gap: 4px; }
  .nd-tab { font-size: 12px; padding: 8px 3px; flex-direction: column; gap: 2px; }
  .nd-panel { padding: 10px 12px 12px; }
  .nd-grid { gap: 8px; }
  .nd-field input { padding: 10px; font-size: 16px; }
  .nd-searchbtn { height: 42px; font-size: 14px; }
}

/* ================================================================
   BOOKING FLOW SHARED
   ================================================================ */
/* Stepper */
.nd-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 24px 0 0;
}
.nd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nd-step-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--nd-line);
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--nd-muted);
  transition: .2s;
}
.nd-step.active .nd-step-circle {
  background: var(--nd-primary);
  border-color: var(--nd-primary);
  color: #fff;
}
.nd-step.completed .nd-step-circle {
  background: #0a8a52;
  border-color: #0a8a52;
  color: #fff;
}
.nd-step-label { font-size: 12px; font-weight: 600; color: var(--nd-muted); white-space: nowrap; }
.nd-step.active .nd-step-label { color: var(--nd-primary); }
.nd-step.completed .nd-step-label { color: #0a8a52; }
.nd-step-line {
  height: 2px;
  flex: 1;
  min-width: 40px;
  background: var(--nd-line);
  margin-bottom: 22px;
}
.nd-step-line.done { background: #0a8a52; }
@media (max-width: 640px) {
  .nd-step-line { min-width: 18px; }
  .nd-step-circle { width: 32px; height: 32px; font-size: 12px; }
  .nd-step-label { font-size: 10px; }
}

/* ---- Content wrapper for booking pages ---- */
.nd-page { background: var(--nd-bg); min-height: calc(100vh - 64px); padding: 28px 0 48px; }
.nd-page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .nd-page-grid { grid-template-columns: 1fr; } }

/* ---- Card ---- */
.nd-card {
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  box-shadow: 0 4px 14px rgba(16,42,80,.05);
  margin-bottom: 20px;
}
.nd-card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--nd-line);
  font-weight: 700;
  font-size: 16px;
  color: var(--nd-primary-d);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nd-card-body { padding: 20px 22px; }
.nd-card-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--nd-line);
  background: #fafbfc;
  border-radius: 0 0 var(--nd-radius) var(--nd-radius);
}

/* ---- Price summary sidebar ---- */
.nd-price-sidebar { position: sticky; top: 80px; }
.nd-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--nd-line);
  gap: 8px;
}
.nd-price-row:last-child { border-bottom: none; }
.nd-price-row .nd-label { color: var(--nd-muted); }
.nd-price-row .nd-amount { font-weight: 700; color: var(--nd-ink); }
.nd-price-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  font-weight: 800;
  font-size: 17px;
  color: var(--nd-primary-d);
}
.nd-price-total .nd-amount { color: var(--nd-secondary); }

/* ---- Form fields (booking pages) ---- */
.nd-form-group { margin-bottom: 16px; }
.nd-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--nd-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.nd-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--nd-line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--nd-ink);
  background: #fff;
  transition: .15s;
  appearance: none;
}
.nd-form-control:focus {
  outline: none;
  border-color: var(--nd-primary);
  box-shadow: 0 0 0 3px rgba(10,43,82,.12);
}
.nd-form-control.nd-invalid { border-color: #dc2626; }
.nd-input-group { display: flex; }
.nd-input-group .nd-form-control:not(:first-child) { border-radius: 0 10px 10px 0; border-left: none; }
.nd-input-group .nd-ig-pre {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--nd-bg);
  border: 1.5px solid var(--nd-line);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: var(--nd-muted);
  font-size: 14px;
  white-space: nowrap;
}
.nd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nd-form-row.nd-col3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .nd-form-row, .nd-form-row.nd-col3 { grid-template-columns: 1fr; }
}

/* ---- Passenger card ---- */
.nd-pax-card {
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.nd-pax-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--nd-primary-d);
  margin-bottom: 16px;
}
.nd-pax-ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #e9eff7;
  color: var(--nd-primary);
  display: grid;
  place-items: center;
  font-size: 16px;
}

/* ---- Flight itinerary card ---- */
.nd-flight-card {
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.nd-flight-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.nd-airline-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--nd-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.nd-airline-logo img { width: 36px; height: 36px; object-fit: contain; }
.nd-route-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.nd-route-bar .nd-time { font-size: 22px; font-weight: 800; color: var(--nd-ink); }
.nd-route-bar .nd-iata { font-size: 12px; font-weight: 700; color: var(--nd-muted); text-align: center; }
.nd-flight-line {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--nd-muted);
}
.nd-flight-line .nd-track {
  height: 2px;
  width: 100%;
  background: var(--nd-line);
  border-radius: 99px;
  position: relative;
}
.nd-flight-line .nd-track::after {
  content: "✈";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--nd-secondary);
}
.nd-badge-dir {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e9eff7;
  color: var(--nd-primary);
}
.nd-badge-dir.nd-return { background: #e5f8f0; color: #0a8a52; }
.nd-layover-bar {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--nd-muted);
  padding: 8px 0;
  border-top: 1px dashed var(--nd-line);
  border-bottom: 1px dashed var(--nd-line);
  margin: 8px 0;
}

/* ---- Fare cards ---- */
.nd-fare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.nd-fare-card {
  border: 2px solid var(--nd-line);
  border-radius: var(--nd-radius);
  padding: 20px;
  cursor: pointer;
  transition: .2s;
  position: relative;
}
.nd-fare-card:hover, .nd-fare-card.selected {
  border-color: var(--nd-secondary);
  box-shadow: 0 6px 20px rgba(232,93,0,.12);
}
.nd-fare-card input[type=radio] {
  position: absolute;
  top: 16px; right: 16px;
  accent-color: var(--nd-secondary);
  width: 18px; height: 18px;
}
.nd-fare-title { font-size: 17px; font-weight: 800; color: var(--nd-ink); margin-bottom: 4px; }
.nd-fare-price { font-size: 22px; font-weight: 800; color: var(--nd-secondary); margin-bottom: 14px; }
.nd-fare-badge {
  position: absolute;
  top: -10px; left: 16px;
  background: var(--nd-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.nd-benefit-list { list-style: none; padding: 0; margin: 0; }
.nd-benefit-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.nd-benefit-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.nd-benefit-icon.nd-yes { background: #d1fae5; color: #059669; }
.nd-benefit-icon.nd-no  { background: #fee2e2; color: #dc2626; }
@media (max-width: 640px) { .nd-fare-grid { grid-template-columns: 1fr; } }

/* ---- Continue / Action button ---- */
.nd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #e85d00, var(--nd-secondary));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232,93,0,.3);
  transition: .15s;
  text-decoration: none;
}
.nd-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff; }
.nd-btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.nd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--nd-primary);
  border: 1.5px solid var(--nd-primary);
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  text-decoration: none;
}
.nd-btn-outline:hover { background: #e9eff7; }

/* ---- Alert ---- */
.nd-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.nd-alert.nd-info { background: #e9eff7; color: var(--nd-primary-d); }
.nd-alert.nd-success { background: #d1fae5; color: #065f46; }
.nd-alert.nd-warning { background: #fffbeb; color: #92400e; }
.nd-alert.nd-danger  { background: #fee2e2; color: #991b1b; }
.nd-alert-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }

/* ---- Addon cards ---- */
.nd-addon-card {
  background: #fff;
  border: 1.5px solid var(--nd-line);
  border-radius: var(--nd-radius);
  margin-bottom: 16px;
  transition: .2s;
  overflow: hidden;
}
.nd-addon-card:hover { box-shadow: 0 4px 16px rgba(16,42,80,.08); }
.nd-addon-card.selected { border-color: #0a8a52; }
.nd-addon-card.skipped  { border-color: #d1d5db; opacity: .7; }
.nd-addon-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--nd-bg); border-bottom: 1px solid var(--nd-line); }
.nd-addon-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.nd-addon-title { font-size: 15px; font-weight: 700; color: var(--nd-ink); margin-bottom: 2px; }
.nd-addon-desc { font-size: 13px; color: var(--nd-muted); }
.nd-addon-price { font-size: 18px; font-weight: 800; color: var(--nd-ink); }
.nd-addon-body { padding: 14px 20px 16px; }
.nd-addon-actions { display: flex; gap: 10px; }
.nd-addon-add {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #0a2b52, #144079);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: .2s;
}
.nd-addon-add:hover { filter: brightness(1.1); }
.nd-addon-add.added { background: linear-gradient(135deg, #059669, #0a8a52); }
.nd-addon-skip {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--nd-line);
  background: #fff;
  color: var(--nd-muted);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: .2s;
}
.nd-addon-skip:hover { background: var(--nd-bg); }
.nd-addon-skip.selected { background: var(--nd-bg); border-color: var(--nd-muted); color: var(--nd-ink); }
.nd-recommended-badge {
  position: absolute;
  top: 10px; right: 16px;
  background: var(--nd-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ---- Payment form ---- */
.nd-payment-method-tabs { display: flex; gap: 12px; margin-bottom: 20px; }
.nd-pay-tab {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--nd-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--nd-muted);
  text-align: center;
  transition: .15s;
}
.nd-pay-tab.active { border-color: var(--nd-primary); color: var(--nd-primary); background: #e9eff7; }

/* ---- Confirmation ---- */
.nd-confirm-hero {
  text-align: center;
  padding: 32px 20px;
  border-bottom: 1px solid var(--nd-line);
}
.nd-confirm-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  display: grid;
  place-items: center;
  font-size: 34px;
  margin: 0 auto 16px;
}
.nd-pnr-badge {
  display: inline-block;
  background: var(--nd-primary);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  padding: 6px 20px;
  border-radius: 8px;
  letter-spacing: 2px;
  margin: 10px 0;
}
.nd-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.nd-info-item {
  padding: 12px 14px;
  background: var(--nd-bg);
  border-radius: 10px;
  border: 1px solid var(--nd-line);
}
.nd-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--nd-muted); margin-bottom: 4px; }
.nd-info-value { font-size: 14px; font-weight: 700; color: var(--nd-ink); }

/* ---- Table ---- */
.nd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nd-table th { background: var(--nd-bg); color: var(--nd-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--nd-line); }
.nd-table td { padding: 12px 14px; border-bottom: 1px solid var(--nd-line); vertical-align: middle; }
.nd-table tr:last-child td { border-bottom: none; }

/* ================================================================
   FOOTER
   ================================================================ */
.nd-site-notice {
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  padding: 14px 0;
}
.nd-site-notice .nd-sn-in {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: #78350f;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}
.nd-sn-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fde68a;
  color: #92400e;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 13px;
  margin-top: 1px;
}
.nd-footer {
  background: #0c1a2b;
  color: #c7d2e0;
  padding: 40px 0 24px;
  font-size: 14px;
}
.nd-fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 26px;
}
.nd-footer h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.nd-footer a { display: block; padding: 8px 0; color: #c7d2e0; }
.nd-footer a:hover { color: #fff; }
.nd-footer .nd-footer-logo { color: #fff; }
.nd-footer .nd-footer-logo .nd-plane { color: var(--nd-secondary); }
.nd-footer-intro { font-size: 13.5px; color: #8ea0b6; margin: 8px 0 16px; line-height: 1.55; }
.nd-footer-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #e85d00, var(--nd-secondary));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(232,93,0,.4);
  margin-top: 4px;
}
.nd-footer-callbtn:hover { transform: translateY(-1px); color: #fff; }
.nd-fbar {
  border-top: 1px solid #1e2f45;
  margin-top: 26px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #8ea0b6;
  font-size: 13px;
}
.nd-disc { font-size: 12px; color: #7d8ea6; margin-top: 14px; line-height: 1.6; }
@media (max-width: 820px) { .nd-fgrid { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 520px) {
  .nd-fgrid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .nd-fgrid > div:first-child { grid-column: 1/-1; }
  .nd-fbar { justify-content: center; text-align: center; }
}

/* ================================================================
   STICKY MOBILE CALL BAR
   ================================================================ */
.nd-callbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--nd-primary-d), #0a2b52);
  color: #fff;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  z-index: 9000;
  text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0,0,0,.25);
}
.nd-callbar .nd-tcb-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--nd-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nd-callbar .nd-tcb-ic svg { width: 18px; height: 18px; }
.nd-callbar .nd-tcb-tx small { display: block; font-size: 11.5px; opacity: .85; }
.nd-callbar .nd-tcb-tx b { display: block; font-size: 20px; font-weight: 800; }
@media (max-width: 767px) { .nd-callbar { display: flex; } }

/* ================================================================
   SEARCH RESULTS PAGE
   ================================================================ */
.nd-results-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .nd-results-wrap { grid-template-columns: 1fr; } }
.nd-filter-card { background: #fff; border-radius: var(--nd-radius); border: 1px solid var(--nd-line); }
.nd-filter-head { padding: 14px 18px; border-bottom: 1px solid var(--nd-line); font-weight: 700; color: var(--nd-primary-d); display: flex; justify-content: space-between; align-items: center; }
.nd-filter-section { padding: 14px 18px; border-bottom: 1px solid var(--nd-line); }
.nd-filter-section h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--nd-muted); margin-bottom: 10px; }
.nd-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid var(--nd-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--nd-ink);
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.nd-filter-pill input { margin: 0; accent-color: var(--nd-secondary); }
.nd-filter-pill.active, .nd-filter-pill:has(input:checked) { border-color: var(--nd-secondary); background: #fff5ee; color: var(--nd-secondary); }

/* Flight result card */
.nd-flight-result {
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius);
  margin-bottom: 14px;
  transition: .15s;
  overflow: hidden;
}
.nd-flight-result:hover { border-color: var(--nd-primary); box-shadow: 0 4px 16px rgba(10,43,82,.08); }
.nd-flight-result-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; }
.nd-fr-route { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.nd-fr-col { text-align: center; }
.nd-fr-time { font-size: 20px; font-weight: 800; }
.nd-fr-iata { font-size: 12px; color: var(--nd-muted); font-weight: 600; }
.nd-fr-line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nd-fr-line-track { height: 2px; background: var(--nd-line); width: 100%; border-radius: 99px; position: relative; }
.nd-fr-line-track::after { content: "✈"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--nd-secondary); }
.nd-fr-stops { font-size: 11.5px; color: var(--nd-muted); font-weight: 600; }
.nd-fr-duration { font-size: 11.5px; color: var(--nd-muted); }
.nd-fr-price-col { text-align: right; }
.nd-fr-price { font-size: 22px; font-weight: 800; color: var(--nd-secondary); }
.nd-fr-price-label { font-size: 11px; color: var(--nd-muted); }
.nd-fr-book-btn {
  display: block;
  background: linear-gradient(180deg, #e85d00, var(--nd-secondary));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  white-space: nowrap;
  transition: .15s;
}
.nd-fr-book-btn:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  .nd-flight-result-body { grid-template-columns: 1fr; }
  .nd-fr-price-col { text-align: left; }
}

/* ================================================================
   STATIC PAGES (About, Contact, FAQ, Manage Booking)
   ================================================================ */
.nd-page-hero {
  background: linear-gradient(120deg, #081f3d, var(--nd-primary) 60%, #144079);
  color: #fff;
  padding: 48px 0;
}
.nd-page-hero h1 { font-size: 32px; font-weight: 800; margin: 0 0 8px; }
.nd-page-hero p { font-size: 16px; opacity: .9; margin: 0; }
.nd-content-section { padding: 48px 0; }
.nd-faq-item {
  background: #fff;
  border: 1px solid var(--nd-line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.nd-faq-summary {
  padding: 16px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--nd-ink);
}
.nd-faq-summary::-webkit-details-marker { display: none; }
details[open] .nd-faq-summary { color: var(--nd-primary); }
.nd-faq-ans { padding: 0 18px 16px; color: var(--nd-muted); font-size: 14.5px; }

/* ================================================================
   UTILITIES
   ================================================================ */
.nd-text-primary { color: var(--nd-primary) !important; }
.nd-text-secondary { color: var(--nd-secondary) !important; }
.nd-text-muted { color: var(--nd-muted) !important; }
.nd-bg-primary { background: var(--nd-primary) !important; }
.nd-fw-bold { font-weight: 700 !important; }
.nd-fw-800  { font-weight: 800 !important; }
.nd-fs-sm   { font-size: 13px !important; }
.nd-mb0     { margin-bottom: 0 !important; }
.nd-mt-auto { margin-top: auto !important; }
.nd-d-flex  { display: flex !important; }
.nd-align-center { align-items: center !important; }
.nd-justify-between { justify-content: space-between !important; }
.nd-gap-8   { gap: 8px !important; }
.nd-gap-12  { gap: 12px !important; }

/* For pages using this new design but needing extra bottom spacing above callbar on mobile */
@media (max-width: 767px) { .nd-page, .nd-results-page { padding-bottom: 80px; } }


/* ================================================================
   REFERENCE SITE CSS — exact copy from travelofly.com/assets/css/
   index.css + site.css — all original class names work as-is
   ================================================================ */

:root{
  --primary:var(--site-primary, #0a2b52);
  --primary-d:#061d3a;
  --secondary:var(--site-secondary, #e85d00);
  --secondary-d:#e85d00;
  --ink:#1f2a37;
  --muted:#5b6675;
  --line:#e4e8ee;
  --bg:#f4f7fb;
  --radius:14px;
  --shadow:0 10px 30px rgba(16,42,80,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ---------- TOP BAR: navbar styles live in header.php ---------- */
/* base .logo (also reused by the footer brand mark) */
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:26px;color:var(--primary);letter-spacing:-.5px}
.logo .plane{color:var(--secondary);display:grid;place-items:center}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}
.tab .ti .ico{width:19px;height:19px;vertical-align:middle}
.tab.active .ti{color:var(--secondary)}
.op-code .ico{width:24px;height:24px}
.pill .ico{width:15px;height:15px;vertical-align:-3px}
.logos span{display:inline-flex;align-items:center;gap:8px}
.logos .ico{width:20px;height:20px;color:var(--primary)}
.cic{display:grid;place-items:center}
.cic .ico{width:1em;height:1em}
.callbar .cb-ic .ico{width:20px;height:20px}
.hero h1 .h1ic .ico{width:55%;height:55%}

/* ---------- HERO ---------- */
.hero{position:relative;background:linear-gradient(120deg,#081f3d,#0a2b52 45%,#144079);color:#fff;padding:40px 0 118px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 80% -10%,rgba(255,255,255,.18),transparent);pointer-events:none}
.hero h1{font-size:40px;line-height:1.12;margin:0 0 12px;font-weight:800;max-width:760px}
.hero p.sub{font-size:18px;max-width:620px;opacity:.95;margin:0}
.badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;font-size:14px;font-weight:600}
.badges span{display:flex;align-items:center;gap:7px}
.hero h1,.hero p.sub,.badges{transition:opacity .18s}
.hero.swap h1,.hero.swap p.sub,.hero.swap .badges{opacity:0}
@media(prefers-reduced-motion:reduce){.hero h1,.hero p.sub,.badges{transition:none}}
.badges .dot{width:9px;height:9px;border-radius:50%;background:#7CFFCB}
/* two-line H1: line 1 = keyword headline, line 2 = click-to-call */
.hero h1{margin:0;max-width:none}
.hero h1 .h1a{display:block;white-space:nowrap;font-size:clamp(18px,5.4vw,46px);line-height:1.1;letter-spacing:-.5px}
.hero h1 .h1call{display:inline-flex;align-items:center;gap:10px;margin-top:10px;white-space:nowrap;font-size:clamp(17px,4.7vw,30px);line-height:1.1;color:#fff;text-decoration:none;border-bottom:3px solid var(--secondary);padding-bottom:2px}
.hero h1 .h1call:hover,.hero h1 .h1call:focus-visible{color:#ffd9bf;outline:none}
.hero h1 .h1ic{display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--secondary);font-size:.72em}
.hero .h1a{transition:opacity .18s}
.hero.swap .h1a{opacity:0}
@media(prefers-reduced-motion:reduce){.hero .h1a{transition:none}}
#heroBadges{justify-content:center;color:var(--muted);margin:16px 0 0;font-size:13.5px;gap:10px 22px}
#heroBadges .dot{background:#00b67a}
@media(max-width:640px){
  .hero{padding:14px 0 60px}
  .hero h1 .h1call{margin-top:6px;border-bottom-width:2px;padding:10px 0 4px}
  #heroBadges{font-size:12px;gap:6px 14px;margin-top:12px}
}

/* ---------- SEARCH WIDGET ---------- */
.searchcard{max-width:1080px;margin:-90px auto 0;background:#fff;border-radius:18px;box-shadow:var(--shadow);position:relative;z-index:5}
.tabs{display:flex;gap:6px;padding:10px 10px 0}
.tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border:none;background:transparent;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:12px 12px 0 0;transition:.15s}
.tab.active{color:var(--primary);background:#e9eff7}
.tab.dull{opacity:.4;filter:grayscale(.6)}
.tab .ti{font-size:18px}
.panel{padding:20px}
.triptype{display:flex;gap:18px;margin-bottom:14px;font-weight:600;font-size:14px;color:var(--muted)}
.triptype label{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px}
.triptype input{width:20px;height:20px;margin:0;accent-color:var(--secondary)}
.grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 1fr 1.2fr auto;gap:12px;align-items:end}
.field{position:relative;display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.field input,.field select{padding:13px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-weight:600;color:var(--ink);width:100%;background:#fff}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,43,82,.16)}
.paxbtn{cursor:pointer;user-select:none}
.searchbtn{background:linear-gradient(180deg,#e85d00,var(--secondary));color:#fff;border:none;border-radius:10px;padding:14px 26px;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 8px 18px rgba(232,93,0,.35);transition:.15s;height:48px}
.searchbtn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hidefield{display:none}
.formnote{margin:14px 2px 0;font-size:12px;color:var(--muted);line-height:1.5}
.formnote a{color:var(--primary);text-decoration:underline}
/* iOS Safari renders date inputs as small pills: make them full-size like the other fields */
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;min-height:48px;text-align:left;line-height:1.2}
.field input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.field input{min-width:0}
@media(max-width:980px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .searchbtn{grid-column:auto}
  #searchForm.oneway #departField,#searchForm.is-hotel #fromField{grid-column:1/-1}
}
@media(max-width:640px){
  .searchcard{margin-top:-46px;border-radius:14px}
  .tabs{padding:6px 6px 0;gap:4px}
  .tab{font-size:12.5px;padding:9px 2px;gap:2px;flex-direction:column}
  .tab .lbl-txt{white-space:nowrap;font-size:clamp(11px,3.4vw,12.5px)}
  .tab .ti{font-size:17px}
  .panel{padding:10px 12px 12px}
  .triptype{margin-bottom:8px;font-size:13px}
  .grid{gap:8px}
  .field{gap:3px}
  .field label{font-size:12px}
  .field input{padding:10px;font-size:16px;border-radius:9px}
  .field input[type=date]{min-height:46px}
  .searchbtn{height:42px;padding:0 10px;font-size:15px;align-self:end}
  .formnote{font-size:12px;margin-top:8px;line-height:1.45}
  .talknow{display:none}
}

/* autocomplete */
.acbox{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:var(--shadow);z-index:30;max-height:250px;overflow:auto;display:none}
.acbox.open{display:block}
.acitem{padding:11px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:14px;border-bottom:1px solid #f1f4f8}
.acitem:hover,.acitem.hl{background:#e9eff7}
.acitem .code{color:var(--muted);font-weight:700;font-size:12px}

/* pax popover */
.paxpop{position:absolute;top:100%;left:0;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px;z-index:30;width:240px;display:none}
.paxpop.open{display:block}
.paxrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.paxrow .stp{display:flex;align-items:center;gap:10px}
.stp button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--primary);background:#fff;color:var(--primary);font-size:18px;font-weight:700;cursor:pointer;line-height:1}
.stp span{min-width:20px;text-align:center;font-weight:700}

/* ---------- SECTIONS ---------- */
section.blk{padding:56px 0}
section.blk h2{font-size:28px;text-align:center;margin:0 0 8px;color:var(--primary-d)}
section.blk .lead{text-align:center;color:var(--muted);max-width:680px;margin:0 auto 34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 4px 14px rgba(16,42,80,.05)}
.card .ic{width:48px;height:48px;border-radius:12px;background:#e9eff7;color:var(--primary);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
@media(max-width:820px){ .cards{grid-template-columns:1fr} }

.altbg{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.route{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:14.5px}
.route .price{color:var(--secondary-d);font-weight:800}
.route a.price{text-decoration:none;padding:6px 10px;margin:-6px -10px;border-radius:8px}.route a.price:hover{background:#eaf7ea}
.route:hover{border-color:var(--primary);cursor:pointer}
@media(max-width:820px){ .routes{grid-template-columns:1fr} }

.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:820px){ .split{grid-template-columns:1fr} }
.pill{display:inline-block;background:#e9eff7;color:var(--primary);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;margin-bottom:10px}
ul.check{list-style:none;padding:0;margin:14px 0 0}
ul.check li{position:relative;padding:8px 0 8px 30px;color:var(--muted)}
ul.check li:before{content:"\2713";position:absolute;left:0;top:8px;color:#00b67a;font-weight:800;background:#e5f8f0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px}

.faq{max-width:820px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden}
.qa summary{padding:16px 18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa[open] summary{color:var(--primary)}
.qa .ans{padding:0 18px 16px;color:var(--muted);font-size:14.5px}

/* CTA band */
.ctaband{background:linear-gradient(120deg,var(--primary),var(--primary-d));color:#fff;text-align:center;padding:50px 0}
.ctaband h2{color:#fff;font-size:28px;margin:0 0 8px}
.ctaband p{opacity:.9;margin:0 0 22px}
.callbtn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(180deg,#e85d00,var(--secondary));color:#fff;font-size:22px;font-weight:800;padding:16px 34px;border-radius:999px;box-shadow:0 10px 26px rgba(232,93,0,.45)}
.callbtn:hover{transform:translateY(-2px)}

/* logos strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px;opacity:.75;font-weight:800;color:var(--muted);font-size:20px}

/* footer */
footer{background:#0c1a2b;color:#c7d2e0;padding:40px 0 24px;font-size:14px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
footer h4{color:#fff;font-size:15px;margin:0 0 12px}
footer a{display:block;padding:11px 0;color:#c7d2e0}
footer a:hover{color:#fff}
.fbar{border-top:1px solid #1e2f45;margin-top:26px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8ea0b6}
.disc{font-size:12px;color:#7d8ea6;margin-top:14px;line-height:1.6}
@media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr;gap:22px} }
@media(max-width:520px){
  footer{padding:30px 0 22px}
  .fgrid{grid-template-columns:1fr 1fr;gap:18px 16px}
  .fgrid>div:first-child{grid-column:1/-1}
  footer a{padding:9px 0}
  footer .fgrid>div:first-child .callbtn{width:100%;justify-content:center}
  .fbar{justify-content:center;text-align:center}
  .fbar span{flex-basis:100%}
}

/* ---------- QUOTE MODAL (closable: Google Ads disruptive-ads policy) ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,20,35,.72);backdrop-filter:blur(2px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:24px 14px;overflow:auto}
.overlay.open{display:flex}
.modal{position:relative;background:#fff;border-radius:18px;max-width:640px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;animation:pop .25s ease}
.mclose{position:absolute;top:12px;right:14px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mclose:hover{background:rgba(255,255,255,.4)}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.mhead{background:linear-gradient(90deg,var(--secondary),#8c0030 55%,var(--primary-d));color:#fff;padding:20px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.mhead h3{margin:0;font-size:22px}
.mhead p{margin:2px 0 0;font-size:13.5px;opacity:.92}
.timer{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 14px;font-weight:800;font-size:18px;white-space:nowrap}
.timer small{display:block;font-size:10px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.mbody{padding:26px}
.tripcols{display:grid;grid-template-columns:1fr 1fr;gap:0;text-align:center}
.tripcols .col{padding:6px 14px}
.tripcols .col+.col{border-left:1px solid var(--line)}
.tripcols h4{color:var(--primary);margin:0 0 8px;font-size:17px}
.tripcols .big{font-size:19px;font-weight:800}
.tripcols .mut{color:var(--muted);font-size:14px;margin-top:4px}
.nofee{text-align:center;color:#0a8a52;font-weight:700;font-size:14px;margin:18px 0}
.nofee .chk{display:inline-grid;place-items:center;width:20px;height:20px;background:#0a8a52;color:#fff;border-radius:50%;font-size:12px;margin-right:6px}
.mcall{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#e85d00,var(--secondary));color:#fff;font-size:24px;font-weight:800;padding:18px;border-radius:999px;box-shadow:0 12px 26px rgba(232,93,0,.45);width:100%;margin-top:6px}
.msteps{list-style:none;padding:0;margin:18px auto 0;max-width:340px;text-align:left}
.msteps li{display:flex;align-items:center;gap:10px;padding:6px 0;color:#9aa5b1;font-size:15px}
.msteps .st{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #cfd6df;display:grid;place-items:center;font-size:11px;color:#fff}
.msteps li.run{color:var(--ink)}.msteps li.run .st{border-color:var(--secondary);border-right-color:transparent;animation:mspin .8s linear infinite}
.msteps li.done{color:var(--ink)}.msteps li.done .st{background:#0a8a52;border-color:#0a8a52}.msteps li.done .st:after{content:"\2713"}
@keyframes mspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.msteps li.run .st{animation:none}}
.mcall:hover{transform:translateY(-2px)}
.mnote{text-align:center;color:var(--muted);font-size:12px;margin-top:16px;line-height:1.6}
@media(max-width:520px){ .mhead h3{font-size:18px} .mcall{font-size:20px} .tripcols .big{font-size:16px} }

/* ---------- immediate call affordance under the search card ---------- */
.talknow{text-align:center;color:var(--muted);margin:16px auto 0;font-weight:600;font-size:14.5px}
.talknow a{color:var(--primary);font-weight:800;text-decoration:underline}

/* ---------- TAB SHOWCASE (airlines / rail / hotels) ---------- */
.showcase{padding:40px 0 8px}
.spanel[hidden]{display:none}
.spanel>h2{font-size:26px;margin:0 0 6px;color:var(--primary-d);text-align:center}
.spanel>.lead{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 26px}
.op{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.op-head{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.op-code{flex:none;width:52px;height:52px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;letter-spacing:.5px}
.op-txt{flex:1;min-width:220px}
.op-txt h3{margin:0 0 3px;font-size:20px;color:var(--primary-d)}
.op-title-link{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;border-radius:3px;transition:color .15s ease,text-decoration-color .15s ease}
.op-title-link:hover,.op-title-link:focus-visible{color:var(--secondary-d);text-decoration-color:currentColor;outline:2px solid transparent}
.op-title-link:focus-visible{outline:2px solid var(--secondary);outline-offset:3px}
.op-meta{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
.op-meta b{color:var(--ink)}
.op-txt p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
.op-cta{flex:none;align-self:center;background:#fff;border:1.5px solid var(--secondary);color:var(--secondary-d);font-weight:800;border-radius:999px;padding:9px 18px;font-size:14px;white-space:nowrap}
.op-cta:hover{background:var(--secondary);color:#fff}
.op-routes{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.sroute{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;cursor:pointer;font:inherit;color:inherit}
.sroute:hover,.sroute:focus-visible{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(10,43,82,.12)}
.sroute .r1{font-weight:700;font-size:14.5px}
.sroute .r1 .iata{color:var(--primary);font-weight:800;white-space:nowrap}
.sroute .r2{font-size:12.5px;color:var(--muted)}
/* Show 3 routes per operator; the rest open with "Show all" (keeps the mobile page short) */
.op-routes li.more{display:none}
.op.open .op-routes li.more{display:block}
.op-more{display:block;width:calc(100% - 20px);margin:0 10px 12px;padding:11px;border:1px dashed #c9d4e3;border-radius:10px;background:#f7f9fc;color:var(--primary);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.op-more:hover,.op-more:focus-visible{border-color:var(--primary);background:#fff;outline:none}
/* Quote popup: route track + progress animation */
.mtrack{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.mtrack .mc{flex:none;font-weight:800;font-size:22px;color:var(--primary);letter-spacing:.04em;min-width:48px;text-align:center}
.mtrack .mp{position:relative;flex:1;height:26px}
.mtrack .mp:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #c8d3e3}
.mtrack .mp:after{content:"";position:absolute;right:-2px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#0a8a52;box-shadow:0 0 0 4px rgba(10,138,82,.15)}
.mtrack .mpl{position:absolute;top:50%;left:0;font-size:22px;line-height:1;color:#e85d00;transform:translate(-50%,-55%);transition:left 2.6s cubic-bezier(.45,.05,.35,1)}
.mbar{height:6px;border-radius:99px;background:#edf1f7;overflow:hidden}
.mbar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#e85d00,#ff9a4d,#e85d00);background-size:200% 100%;animation:mshine 1.1s linear infinite;transition:width 2.6s cubic-bezier(.45,.05,.35,1)}
.modal.ready .mbar span{background:#0a8a52;animation:none}
@keyframes mshine{to{background-position:-200% 0}}
.mstatus{margin:8px 0 14px;text-align:center;font-weight:700;font-size:14px;color:#8c4a12}
.modal.ready .mstatus{color:#0a8a52}
.modal.ready .mcall{animation:mpulse 1.8s ease-out infinite}
@keyframes mpulse{0%{box-shadow:0 12px 26px rgba(232,93,0,.45),0 0 0 0 rgba(232,93,0,.45)}70%{box-shadow:0 12px 26px rgba(232,93,0,.45),0 0 0 16px rgba(232,93,0,0)}100%{box-shadow:0 12px 26px rgba(232,93,0,.45),0 0 0 0 rgba(232,93,0,0)}}
@media(prefers-reduced-motion:reduce){.mtrack .mpl,.mbar span{transition:none;animation:none}.modal.ready .mcall{animation:none}}
.plans{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.plans th,.plans td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.plans th{background:#e9eff7;color:var(--primary-d);font-size:13px}
.plans td:first-child{font-weight:700;white-space:nowrap}
.plans td:last-child{color:var(--muted)}
.tblwrap{overflow-x:auto;margin-bottom:18px}
.chains{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:18px}
.chain{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.chain h3{margin:0 0 4px;font-size:16px;color:var(--primary-d)}
.chain p{margin:0;font-size:13.5px;color:var(--muted)}
.cities{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 18px}
.cities .sroute{width:auto;flex-direction:row;padding:9px 14px;border-radius:999px;font-weight:700;font-size:14px}
.sdisc{font-size:12px;color:var(--muted);text-align:center;max-width:820px;margin:6px auto 0;line-height:1.6}
@media(max-width:560px){
  .spanel>h2{font-size:21px}
  .op-head{padding:16px}
  .op-cta{width:100%;text-align:center}
  /* phones: keep each airline intro to 3 lines so the list stays scannable */
  .op-txt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .op:not(.open) .op-routes li:nth-child(3){display:none}
  .op-routes{grid-template-columns:1fr}
}

/* ---------- sticky mobile call bar (persistent conversion CTA) ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;align-items:center;gap:12px;background:linear-gradient(180deg,#e85d00,var(--secondary));color:#fff;padding:10px 14px;box-shadow:0 -6px 20px rgba(10,20,35,.22)}
  .callbar .cb-ic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:20px;flex:none}
  .callbar .cb-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .callbar .cb-tx b{font-size:14px}
  .callbar .cb-tx small{font-size:11px;opacity:.92}
  .callbar .cb-go{margin-left:auto;background:#fff;color:var(--secondary-d);font-weight:800;padding:10px 16px;border-radius:999px;font-size:14px;white-space:nowrap}
  body{padding-bottom:70px}
}
/* ===== Home page: design shared with travel-details.php and the service pages (refs 222.jpeg / 333.jpeg) ===== */
.res-bar,.hero-call{display:none}
.home{--blue:#2b55c4;--soft:#f2f6fd;--green:#2e8b2e;background:#fff}
.home .hero{background:radial-gradient(ellipse 60% 70% at 78% 18%,rgba(255,255,255,.16),transparent 60%),radial-gradient(ellipse 50% 40% at 15% 100%,rgba(232,93,0,.22),transparent 70%),linear-gradient(160deg,#06162b 0%,#0a2b52 55%,#123f75 100%)}
.home .searchcard{box-shadow:0 18px 44px rgba(3,18,40,.28)}
.home .tab.active .ti{color:var(--blue)}
.home .triptype{display:inline-flex;width:max-content;max-width:100%;gap:0;background:#eaf0fb;border-radius:10px;padding:3px}
.home .triptype label{position:relative;min-height:0;min-width:120px;justify-content:center;padding:8px 16px;border-radius:8px;color:#2c3e57}
.home .triptype input{position:absolute;opacity:0;width:1px;height:1px}
.home .triptype label:has(input:checked){background:var(--primary);color:#fff}
.home .triptype label:has(input:focus-visible){outline:2px solid var(--secondary);outline-offset:2px}
.home .field label{text-transform:none;letter-spacing:0;color:#4b5a6e}
.home .field input,.home .field select{border:1px solid #d6deea;font-weight:500}
.home .field input:focus,.home .field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,85,196,.15)}
.home .searchbtn{background:var(--blue);border-radius:999px;box-shadow:0 7px 18px rgba(43,85,196,.28)}
.home .searchbtn:hover{background:#1f45a8;filter:none}
.home #heroBadges .dot{background:var(--green)}
.home .op-cta{border-color:var(--blue);color:var(--blue)}
.home .op-cta:hover{background:var(--blue);color:#fff}
.home .sroute{background:#fff}
.home .sroute:hover,.home .sroute:focus-visible{border-color:var(--blue);box-shadow:0 8px 22px rgba(20,45,80,.1)}
.home .sroute .r1 .iata{color:var(--green)}
.home .altbg{background:#fff}
.features{background:var(--soft,#f2f6fd);padding:26px 0;margin-top:34px}
.features .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.feature{display:flex;gap:14px;align-items:flex-start;padding:4px 26px}
.feature+.feature{border-left:1px solid #d5deec}
.feature .fi{flex:0 0 44px;height:44px;border-radius:12px;background:#dfe8fb;display:grid;place-items:center;font-size:22px}
.feature h3{font-size:18px;margin:0 0 4px;font-weight:600}.feature p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.feature p a{color:var(--primary);text-decoration:underline}
.home .routes{gap:16px}
.home .route{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:16px 18px;transition:border-color .15s,box-shadow .15s,transform .15s}
.home .route:hover,.home .route:focus-visible{border-color:var(--blue);box-shadow:0 8px 22px rgba(20,45,80,.1);transform:translateY(-2px);outline:none}
.home .route .rt{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;min-width:0}
.home .route .rt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.home .route .rt i{font-style:normal;color:#444;flex:none}
.home .route .rb{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.home .route small{color:var(--muted);font-size:12.5px;font-weight:400}
.home .route .price{color:var(--green);white-space:nowrap}
.cards-note{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
.callband{padding:10px 0 46px}
.callband .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(90deg,#eaf0fd,#f6f8fe);border:1px solid #d8e3f5;border-radius:14px;padding:22px 28px}
.callband .big{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--primary);line-height:1.1}
.callband .big b{color:var(--blue)}
.callband p{margin:6px 0 0;color:var(--muted);font-size:14px}
.callband .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.callband .tags span{background:#fff;border:1px solid #d8e3f5;border-radius:999px;padding:4px 11px;font-size:12px;color:#334}
.callband .callbtn{font-size:19px;padding:14px 26px}
@media(max-width:900px){
  .home .res-bar{display:block;background:var(--primary);color:#fff;text-align:center;font-size:19px;font-weight:600;padding:9px 16px}
  .home .hero{background:#fff;color:var(--ink);padding:14px 0 0;text-align:center}
  .home .hero:before{display:none}
  .home .hero h1 .h1a{white-space:normal;font-size:24px}
  .home .hero h1 .h1call{display:none}
  .home .hero-call{display:block;margin:12px -18px 0}
  .home .hero-call .band{background:var(--primary);color:#fff;font-weight:700;font-size:18px;padding:8px 12px}
  .home .hero-call .hsub{font-weight:700;font-size:16px;margin:8px 0 10px}
  .home .hero-call .pill{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--primary);color:#fff;text-decoration:none;font-size:28px;font-weight:800;border-radius:999px;padding:10px 18px;margin:0 6px 22px}
  .home .hero-call .pill span{width:44px;height:44px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:20px}
  .home .quotezone{background:var(--blue);padding:22px 0 18px}
  .home .quotezone .wrap{padding:0 16px}
  .home .searchcard{margin-top:0;border-radius:20px}
  .home .quotezone #heroBadges{color:#fff}
  .home .quotezone #heroBadges .dot{background:#bff0c8}
  .home .triptype{display:flex;width:100%!important}.home .triptype label{flex:1;min-width:0;padding:11px 8px;font-size:15px}
  .home .field input,.home .field select{min-height:54px;border-radius:14px}
  .home .searchbtn{height:54px;font-size:18px}
  .features{margin-top:0;padding:8px 0}
  .features .wrap{grid-template-columns:1fr}
  .feature{padding:18px 4px}.feature+.feature{border-left:0;border-top:1px solid #d5deec}
  .feature h3{font-size:22px}
  .callband .inner{flex-direction:column;align-items:stretch;text-align:center;padding:20px}
  .callband .tags{justify-content:center}.callband .callbtn{justify-content:center}
}
@media(max-width:640px){.home .hero-call .pill{font-size:24px}}
/* Consistent Travelofly logo palette across the site */
.logo { color: var(--primary, #0a2b52); }
.logo .plane { color: var(--secondary, #e85d00); }


/* Shared site header — design matches reference 222.jpeg (desktop) / 333.jpeg (mobile) */
.topbar{position:sticky;top:0;z-index:950;background:#fff;border-bottom:1px solid #e6ebf3;box-shadow:0 2px 10px rgba(16,42,80,.04)}
.topbar .wrap{max-width:1180px;display:flex;align-items:center;gap:18px;min-height:74px}
.topbar .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:26px;color:#0a2b52;letter-spacing:-.5px;flex:none;text-decoration:none}
.topbar .logo .plane{display:grid;place-items:center;color:#e85d00;flex:none}
.topbar .nav{display:flex;align-items:center;gap:2px;font-weight:500;margin-left:14px}
.topbar .nav a{position:relative;color:#3b4a5e;padding:8px 13px;border-radius:8px;text-decoration:none;font-size:15px}
.topbar .nav a:hover,.topbar .nav a:focus-visible{color:#2b55c4;background:#f2f6fd;outline:none}
.topbar .nav a.on{color:#2b55c4;font-weight:600}
.topbar .nav a.on:after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:#2b55c4}
.topbar .trust{display:flex;align-items:center;gap:6px;color:#00b67a;font-weight:700;font-size:14px;padding:0 8px}
.topbar .trust .stars{color:#00b67a;letter-spacing:1px}

/* click-to-call: round icon + label + number, no pill (desktop) */
.callbox{margin-left:auto;display:inline-flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;color:#0a2b52;text-decoration:none;flex:none;transition:background .15s}
.callbox:hover,.callbox:focus-visible{background:#f2f6fd;outline:none;text-decoration:none}
.callbox .ic{position:relative;width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid #2b55c4;color:#2b55c4;display:grid;place-items:center;flex:none}
.callbox .ic:after{content:"";position:absolute;right:-1px;top:-1px;width:10px;height:10px;border-radius:50%;background:#12b76a;border:2px solid #fff}
.callbox .tx{display:flex;flex-direction:column;line-height:1.15}
.callbox .lbl{font-size:11.5px;font-weight:600;color:#5b6675;letter-spacing:.1px}
.callbox .lbl-short{display:none}
.callbox .num{font-size:21px;font-weight:800;color:#0a2b52;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.2px}

/* hamburger */
.navtoggle{display:none;flex:none;width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:#0a2b52;cursor:pointer;place-items:center;padding:0}
.navtoggle:hover,.navtoggle:focus-visible{background:#f2f6fd;outline:none}
.navtoggle .bars,.navtoggle .bars:before,.navtoggle .bars:after{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;position:relative;transition:transform .2s,background .2s}
.navtoggle .bars:before,.navtoggle .bars:after{content:"";position:absolute;left:0}
.navtoggle .bars:before{top:-7px}.navtoggle .bars:after{top:7px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars:before{transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars:after{transform:translateY(-7px) rotate(-45deg)}
.topbar .nav-call{display:none}

/* --- tablet / mobile: one row  logo · call · menu ; nav becomes a drawer --- */
@media(max-width:1060px){
  .navtoggle{display:grid;order:3}
  .topbar .wrap{min-height:60px;gap:8px}
  .topbar .logo{font-size:22px;order:1}
  .callbox{order:2;background:#f2f6fd;border:1px solid #d8e3f5;border-radius:999px;padding:5px 14px 5px 5px}
  .callbox .ic{width:34px;height:34px;border:0;background:#2b55c4;color:#fff}
  .callbox .ic:after{border-color:#f2f6fd}
  .callbox .lbl-long{display:none}
  .callbox .lbl-short{display:block}
  .callbox .num{font-size:16px}
  .topbar .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:4px 18px 18px;border-top:1px solid #e6ebf3;box-shadow:0 14px 28px rgba(16,42,80,.12)}
  .topbar .nav.open{display:flex}
  .topbar .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid #f1f4f8;color:#1f2a37;font-size:16px;font-weight:600}
  .topbar .nav a:hover{background:none}
  .topbar .nav a.on{color:#2b55c4}
  .topbar .nav a.on:after{display:none}
  .topbar .trust{padding:12px 4px}
  .topbar .nav a.nav-call{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:14px;border:0;border-radius:999px;background:#0a2b52;color:#fff;font-size:18px;font-weight:800}
}
@media(max-width:560px){
  .topbar .wrap{padding:0 6px 0 12px;gap:6px}
  .topbar .logo{font-size:19px;gap:5px;letter-spacing:-.6px;padding:7px 0}
  .topbar .logo .plane svg{width:20px;height:20px}
  .callbox{padding:4px 10px 4px 4px;gap:6px;min-height:44px;min-width:0}
  .callbox .ic{width:30px;height:30px}
  .callbox .ic svg{width:14px;height:14px}
  .callbox .ic:after{width:8px;height:8px}
  .callbox .tx{min-width:0}
  .callbox .lbl{font-size:9.5px;white-space:nowrap}
  .callbox .num{font-size:14px;letter-spacing:-.2px}
  .navtoggle{width:40px;height:44px}
}
/* narrow phones: shorter label so the menu button always fits */
@media(max-width:420px){
  .callbox .lbl-short{font-size:0}
  .callbox .lbl-short:before{content:"24/7 Live Agent";font-size:9.5px}
}
/* small phones (360px Android etc.): keep the full "Travelofly" logo, shrink everything a little */
@media(max-width:380px){
  .topbar .wrap{padding:0 4px 0 10px;gap:4px}
  .topbar .logo{font-size:17px;gap:4px;letter-spacing:-.5px}
  .topbar .logo .plane svg{width:18px;height:18px}
  .callbox{padding:4px 8px 4px 4px;gap:5px}
  .callbox .ic{width:28px;height:28px}
  .callbox .ic svg{width:13px;height:13px}
  .callbox .lbl-short:before{font-size:9px}
  .callbox .num{font-size:13px}
  .navtoggle{width:36px}
}
/* very narrow phones (320px): drop the small label above the number, logo stays */
@media(max-width:340px){
  .topbar .logo{font-size:15.5px}
  .callbox .lbl{display:none!important}
  .callbox .num{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.navtoggle .bars,.navtoggle .bars:before,.navtoggle .bars:after{transition:none}}

.site-notice{background:#fff8f1;border-top:1px solid #f6d9bf;border-bottom:1px solid #f6d9bf;padding:20px 0}
.site-notice .sn-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:14px;align-items:flex-start}
.site-notice .sn-ic{flex:none;width:30px;height:30px;border-radius:50%;background:#e85d00;color:#fff;display:grid;place-items:center;font:700 16px/1 Georgia,serif;margin-top:1px}
.site-notice p{margin:0;color:#3a2a1c;font-size:14.5px;line-height:1.6;font-family:inherit}
.site-notice strong{color:#0a2b52}
@media(max-width:600px){.site-notice{padding:16px 0}.site-notice .sn-in{padding:0 16px;gap:10px}.site-notice p{font-size:13.5px}}

.tf-callbar{display:none}
@media(max-width:767px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  .tf-callbar{position:fixed;left:0;right:0;bottom:0;z-index:960;display:flex;align-items:center;gap:12px;padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#f47b20,#e85d00);color:#fff!important;text-decoration:none!important;box-shadow:0 -4px 16px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent;font-family:inherit}
  .tf-callbar:active{filter:brightness(.95)}
  .tf-callbar .tcb-ic{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.9);display:grid;place-items:center;animation:tfcbRing 2.4s ease-in-out infinite}
  .tf-callbar .tcb-ic svg{width:22px;height:22px}
  .tf-callbar .tcb-tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.1;text-align:center}
  .tf-callbar .tcb-tx small{font-size:12px;font-weight:600;letter-spacing:.02em;opacity:.95;white-space:nowrap}
  .tf-callbar .tcb-tx b{font-size:clamp(24px,8.4vw,36px);font-weight:800;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:2px}
}
@keyframes tfcbRing{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}80%{transform:rotate(12deg)}85%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.tf-callbar .tcb-ic{animation:none}}

.tfac-wrap{position:relative}
.tfac{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 4px);min-width:260px;max-height:330px;overflow:auto;background:#fff;border:1px solid #d9e1ec;border-radius:12px;box-shadow:0 14px 32px rgba(10,35,65,.18);padding:6px;text-align:left}
.tfac[hidden]{display:none}
.tfac button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:#fff;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;color:#172536}
.tfac button:hover,.tfac button.on{background:#eef4fc}
.tfac .ic{flex:none;width:30px;height:30px;border-radius:8px;background:#eef2f8;color:#0a2b52;display:grid;place-items:center;font-size:15px}
.tfac .tx{min-width:0;flex:1}
.tfac b{display:block;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfac small{display:block;font-size:12px;color:#64748b;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfac .cd{flex:none;font-weight:800;font-size:13px;color:#0a2b52;background:#eef2f8;border-radius:6px;padding:3px 7px}
.tfac .none{padding:10px;font-size:13px;color:#64748b}
@media(max-width:600px){.tfac{min-width:0;max-height:280px}}

.tss{position:fixed;inset:0;z-index:100000;background:rgba(12,22,38,.55);display:flex;align-items:flex-start;justify-content:center;padding:28px 12px;overflow:auto;font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.tss[hidden]{display:none}
.tss-card{position:relative;width:100%;max-width:712px;background:#fff;border-radius:20px;padding:30px 18px 24px;box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center;color:#222;animation:tssIn .25s ease}
@keyframes tssIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.tss-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f6;color:#444;font-size:18px;cursor:pointer;display:grid;place-items:center}
.tss-x:hover,.tss-x:focus-visible{background:#e3e7ee;outline:none}
.tss-route{margin:0 30px 14px;font-size:clamp(20px,4.2vw,26px);font-weight:700;line-height:1.25;color:#1f1f1f}
.tss-route .to{color:#c4161c;font-weight:600;margin:0 .35em}
.tss-dates{font-size:clamp(14px,2.6vw,16px);font-weight:700;margin:0 0 8px}
.tss-note{font-size:clamp(13px,2.4vw,15.5px);color:#333;margin:0 auto;max-width:620px;line-height:1.45}
.tss-wait{margin:30px 0 12px;font-size:clamp(24px,4.6vw,30px);font-weight:700;color:#155c93}
.tss-sub{margin:0 auto;font-size:clamp(14px,2.7vw,17.5px);color:#2a2a2a;max-width:600px;line-height:1.45}
.tss-sub b{font-weight:700}
.tss-load{display:flex;justify-content:center;gap:3px;margin:34px 0 30px}
.tss-load i{display:block;width:21px;height:10px;background:#a9a9a9;animation:tssBlk 1.05s steps(1) infinite}
.tss-load i:nth-child(2){animation-delay:.15s}.tss-load i:nth-child(3){animation-delay:.3s}.tss-load i:nth-child(4){animation-delay:.45s}.tss-load i:nth-child(5){animation-delay:.6s}.tss-load i:nth-child(6){animation-delay:.75s}.tss-load i:nth-child(7){animation-delay:.9s}
@keyframes tssBlk{0%{background:#ff7a00}14.28%{background:#a9a9a9}}
.tss.ready .tss-load i{animation:none;background:#1f9d55}
.tss.ready .tss-wait{color:#1f7a3f}
.tss.fail .tss-load i{animation:none;background:#c4161c}
.tss.fail .tss-wait{color:#c4161c}
.tss-legs{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;text-align:left;margin:0 0 26px}
.tss-leg .code{font-size:clamp(20px,4vw,23px);font-weight:700;color:#1f1f1f;line-height:1.2}
.tss-leg .name{font-size:clamp(13px,2.4vw,15.5px);color:#2a2a2a;line-height:1.2;margin-top:6px}
.tss-leg .date{font-size:clamp(15px,2.9vw,18px);color:#2a2a2a;margin-top:10px}
.tss-leg.r{text-align:right}
.tss-mid{align-self:center;font-size:clamp(30px,6vw,40px);line-height:1;color:#1f1f1f;padding:0 6px;font-weight:700}
.tss-call{display:inline-flex;align-items:center;justify-content:center;gap:14px;max-width:100%;padding:12px 22px;border-radius:5px;background:#ff6a00;color:#fff!important;text-decoration:none!important;font-size:clamp(17px,3.6vw,21px);font-weight:700;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(255,106,0,.3);transition:transform .15s,background .15s}
.tss-call:hover{background:#f25f00;transform:translateY(-1px)}
.tss-call .ic{flex:none;width:30px;height:30px;border-radius:5px;background:#15528a;display:grid;place-items:center}
.tss-call .ic svg{width:18px;height:18px}
.tss.ready .tss-call{animation:tssPulse 1.8s ease-out infinite}
@keyframes tssPulse{0%{box-shadow:0 6px 16px rgba(255,106,0,.3),0 0 0 0 rgba(255,106,0,.45)}70%{box-shadow:0 6px 16px rgba(255,106,0,.3),0 0 0 14px rgba(255,106,0,0)}100%{box-shadow:0 6px 16px rgba(255,106,0,.3),0 0 0 0 rgba(255,106,0,0)}}
.tss-cbt[hidden],.tss-cb[hidden]{display:none!important}
.tss-cbt{display:block;margin:16px auto 0;border:0;background:none;color:#155c93;font:inherit;font-size:14.5px;font-weight:600;text-decoration:underline;cursor:pointer}
.tss-cb{margin:12px auto 0;max-width:460px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tss-cb[hidden]{display:none}
.tss-cb input{flex:1;min-width:190px;min-height:46px;padding:10px 12px;border:1px solid #cfd6df;border-radius:6px;font:inherit;font-size:16px}
.tss-cb button{min-height:46px;padding:0 18px;border:0;border-radius:6px;background:#15528a;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.tss-msg{margin:10px auto 0;font-size:14px;max-width:520px}
.tss-msg[hidden]{display:none}
.tss-fine{margin:18px auto 0;font-size:11.5px;color:#6b7684;line-height:1.5;max-width:600px}
@media(max-width:560px){
  .tss{padding:12px 8px}
  .tss-card{padding:24px 14px 18px;border-radius:16px}
  .tss-wait{margin-top:22px}.tss-load{margin:24px 0 22px}
  .tss-load i{width:17px;height:9px}
  .tss-call{width:100%;gap:10px;padding:13px 12px}
}
@media(prefers-reduced-motion:reduce){.tss-card,.tss-load i,.tss.ready .tss-call{animation:none}.tss-load i:nth-child(4){background:#ff7a00}}
/* Consistent shared footer styling; page-specific footer copy remains in each template. */
.site-footer{background:#0c1a2b;color:#c7d2e0;padding:40px 0 24px;font-size:14px;line-height:1.55}
.site-footer .wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.site-footer h4{color:#fff;font-size:15px;margin:0 0 12px}
.site-footer a{display:inline-block;padding:9px 0;color:#c7d2e0;text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:#fff;text-decoration:underline}
.site-footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.site-footer .fgrid a{display:block}
.site-footer .disc{font-size:12px;color:#8ea0b6;margin-top:14px;line-height:1.6}
.site-footer .legal{border-top:1px solid #1e2f45;margin-top:26px;padding-top:16px;color:#8ea0b6;font-size:12px}
@media(max-width:820px){.site-footer .fgrid{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.site-footer{padding:30px 0 22px}.site-footer .fgrid{grid-template-columns:1fr 1fr;gap:18px 16px}.site-footer .fgrid>div:first-child{grid-column:1/-1}.site-footer .fbar{justify-content:center;text-align:center}.site-footer .fbar span{flex-basis:100%}}