:root {
  --brand-blue: #1d5fd6;
  --brand-blue-dark: #164aad;
  --brand-blue-light: #4f8bef;
  --brand-orange: #f2932b;
  --bg: #f4f7fb;
  --surface: #FFFFFF;
  --border: #e3e8f0;
  --text: #16233d;
  --text-muted: #64748b;
  --danger: #c0392b;
  --success: #1e8a4c;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --max-width: 1200px;
  --shadow-card: 0 10px 30px rgba(22, 35, 61, 0.08);
  --shadow-lg: 0 24px 60px rgba(22, 35, 61, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark { display: block; width: 44px; height: auto; flex-shrink: 0; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-title {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.brand-subtitle {
  font-weight: 600;
  font-size: 10px;
  color: var(--brand-blue);
  letter-spacing: 0.14em;
}

/* ---------- Promo ticker ---------- */
/* A single continuous auto-scrolling strip directly under the header on
   every page -- airline "special fare, call us" promos plus a
   fraud-safety ATTENTION notice. On mobile this also lands directly
   above the search widget, since the hero banner below it is hidden
   under 720px (see ".hero:not(.hero-plain)" further down) -- no extra
   placement rule is needed for that, it falls out of normal document
   flow once the hero collapses. The track's markup is duplicated once
   (see gen_pages.py's PROMO_TICKER) so the translateX(-50%) loop below
   is seamless with no visible jump or gap. */
.promo-ticker {
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.promo-ticker-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: promo-ticker-scroll 38s linear infinite;
  will-change: transform;
}

.promo-ticker:hover .promo-ticker-track { animation-play-state: paused; }

.promo-ticker-item {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 32px;
  border-right: 1px solid var(--border);
}

.promo-ticker-item a {
  color: var(--brand-blue);
  text-decoration: underline;
  font-weight: 800;
  margin-left: 5px;
}

.promo-ticker-attention {
  display: inline-flex;
  align-items: center;
  background: rgba(192,57,43,0.1);
  color: var(--danger);
  border: 1px solid rgba(192,57,43,0.35);
  border-radius: 999px;
  padding: 6px 16px;
}

.promo-ticker-attention a {
  color: var(--danger);
  text-decoration: underline;
}

@keyframes promo-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-ticker-track { animation: none; }
}

.nav-links {
  display: flex;
  gap: 24px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--text);
  flex-wrap: wrap;
}

.nav-links a { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--brand-blue); }
.nav-links a.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Hidden on desktop -- only takes over once .nav-links itself is hidden
   below the 720px breakpoint, so mobile visitors always have a way to
   reach the other pages instead of the nav just disappearing. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; }

/* Hidden on desktop -- Login/Register already have their own buttons in
   the header bar there. Shown only inside the mobile dropdown below, so
   phones get one hamburger icon in the bar instead of the header trying
   to fit the logo, both auth buttons AND a toggle button side by side. */
.nav-links-mobile-cta { display: none; }

.lang-select {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.lang-select .chevron { font-size: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-sm { padding: 9px 18px; font-size: 14px; }

.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { background: var(--brand-blue-dark); }
.btn-outline { background: transparent; color: var(--brand-blue); border: 1.5px solid var(--brand-blue); }
.btn-outline:hover { background: var(--brand-blue); color: #fff; }
.btn-light { background: #fff; color: var(--text); }
.btn-light:hover { background: var(--brand-orange); color: #fff; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: #fff;
  /* Not overflow:hidden -- the Travellers popover is a taller absolutely-
     positioned child (trigger + Adults/Children/Infants rows + Done
     button) than the section's own bottom padding, and hiding overflow
     here was clipping its lower rows off instead of letting it float over
     the trust-badges section below. hero-media still fills exactly this
     section's box (inset: 0 with no negative margins of its own), so nothing
     here actually needs clipping. */
  padding-bottom: 60px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8,16,32,0.34) 0%, rgba(8,16,32,0.17) 38%, rgba(8,16,32,0.05) 62%, rgba(8,16,32,0.0) 100%),
    linear-gradient(0deg, rgba(8,16,32,0.14), rgba(8,16,32,0) 50%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 14px;
  padding-bottom: 190px;
}

.hero-eyebrow {
  display: block;
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.95);
  /* A short, tight blur so the shadow reads as crisp contrast behind the
     glyphs, not a soft glow that spreads into the next line -- a wide
     blur here was smearing into the line below once the line-gaps got
     tight, making adjacent lines look like they were overlapping. */
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
}

.hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85), 0 2px 3px rgba(0,0,0,0.9);
}

.hero-tagline {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand-orange);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
}

.hero-sub {
  font-size: 15px;
  line-height: 1.4;
  max-width: 620px;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
}

.hero-location strong { display: block; font-size: 16px; }
.hero-location small { display: block; color: rgba(255,255,255,0.85); font-size: 12.5px; }
.hero-location .heart { margin-left: 6px; color: #ff5a7a; }

/* A shorter banner for the individual Flights/Hotels/Hajj/Tour Packages
   pages that reuse the same .hero markup with their own photo, and for
   any page-header banner that ISN'T immediately followed by the search
   widget -- the home hero's big padding-bottom only exists to leave room
   for the search card's negative margin, so a hero without one needs a
   normal, much smaller amount instead. */
.hero.hero-plain { padding-bottom: 0; }
.hero.hero-plain .hero-content { padding-top: 56px; padding-bottom: 56px; }
.hero.hero-plain .hero-sub { max-width: 640px; }

/* ---------- Homepage intro banner ---------- */
/* The "Explore the World with / MUHAMMAD TOURS AND TRAVELS / Your Journey,
   Our Priority" text used to sit inside .hero-content, overlaid on the
   destination photo. It now lives in its own solid-color banner directly
   under the promo ticker instead, on PC only -- on mobile the whole hero
   area (photo included) is already hidden below 720px so the search
   widget sits right under the ticker, and this banner stays hidden there
   too rather than adding it back in above the search form. */
.hero-intro {
  background: linear-gradient(120deg, var(--brand-blue), var(--brand-blue-dark));
  padding: 32px 0 28px;
}

.hero-intro .hero-eyebrow { text-shadow: none; }

.hero-intro h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: none;
}

.hero-intro .hero-tagline {
  display: inline-flex;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 999px;
  padding: 6px 20px;
  margin: 0;
  text-shadow: none;
}

@media (max-width: 720px) {
  .hero-intro { display: none; }
}

/* ---------- Search widget ---------- */

.search-widget-wrap {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}

.search-widget {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px 26px 26px;
  color: var(--text);
}

.search-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.search-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}

.search-tab.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

.search-tripwrap {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.radio input { accent-color: var(--brand-blue); width: 16px; height: 16px; }

.search-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.standard-fields {
  display: grid;
  grid-template-columns: 1.15fr auto 1.15fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.standard-fields.oneway {
  grid-template-columns: 1.15fr auto 1.15fr 1fr;
}

.standard-fields.oneway .field-return { display: none; }

.form-row-bottom {
  display: flex;
  gap: 12px;
  align-items: end;
}

.form-row-bottom .field-travellers { flex: 1.3; }
.form-row-bottom .field-class { flex: 1; }

.field-input.select-field { position: relative; }

.field-input select {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  min-width: 0;
  padding-right: 18px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.field-input.select-field::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.6;
  pointer-events: none;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.field-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  background: var(--bg);
}

.field-input:focus-within { border-color: var(--brand-blue); background: #fff; }

.field-input input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  min-width: 0;
  font-family: inherit;
}

.field-icon { font-size: 15px; opacity: 0.75; flex-shrink: 0; }

.swap-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--brand-blue);
  font-size: 16px;
  cursor: pointer;
  align-self: center;
  margin-bottom: 1px;
}
.swap-btn:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.search-submit { height: 46px; padding: 0 24px; flex-shrink: 0; }

/* ---------- Multi-city segments ---------- */

.multicity-fields {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.segment-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.segment-row .field label { display: flex; align-items: center; gap: 6px; }
.segment-row .field label .seg-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.segment-remove {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
}
.segment-remove:hover:not(:disabled) { background: #fdecec; color: #d64545; border-color: #f3c6c6; }
.segment-remove:disabled { opacity: 0.35; cursor: not-allowed; }

.add-flight-btn { align-self: flex-start; margin-top: 2px; }

/* ---------- Airport autocomplete dropdown ---------- */

.airport-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 45;
  text-align: left;
}

.airport-dropdown.open { display: block; }

.airport-option {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.airport-option:last-child { border-bottom: none; }
.airport-option:hover, .airport-option.highlighted { background: var(--bg); }
.airport-option .code {
  display: inline-block;
  font-weight: 700;
  color: var(--brand-blue);
  margin-right: 8px;
  font-size: 13.5px;
}
.airport-option .place { font-size: 13.5px; font-weight: 600; color: var(--text); }
.airport-option .name { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.airport-empty { padding: 12px 14px; color: var(--text-muted); font-size: 13px; }

/* ---------- Travellers & class popover ---------- */

#pax-plain-wrap { display: none; }

.pax-trigger { padding: 0; }
.pax-trigger-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
}
.pax-trigger-inner:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; border-radius: var(--radius-md); }
.pax-trigger-inner #pax-summary { font-size: 14.5px; font-weight: 600; color: var(--text); }
.pax-chevron { margin-left: auto; font-size: 11px; opacity: 0.6; flex-shrink: 0; }

.pax-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 50;
  cursor: default;
}

.pax-panel.open { display: block; }

.pax-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.pax-row-label strong { display: block; font-size: 14px; color: var(--text); }
.pax-row-label small { display: block; font-size: 12px; color: var(--text-muted); }

.pax-stepper { display: flex; align-items: center; gap: 12px; }

.pax-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--brand-blue);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pax-btn:hover:not(:disabled) { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.pax-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.pax-count { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; color: var(--text); }

.pax-done { width: 100%; justify-content: center; margin-top: 6px; }

.search-note {
  margin: 14px 2px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.search-error {
  margin: 10px 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}
.search-error[hidden] { display: none; }

/* ---------- Trust row ---------- */

.trust-row { background: var(--surface); border-bottom: 1px solid var(--border); padding: 30px 0; }

.trust-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.trust-item strong { display: block; font-size: 14px; }
.trust-item small { color: var(--text-muted); }
.trust-icon { font-size: 22px; }

/* ---------- Sections ---------- */

section { padding: 72px 0; }

.section-heading { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-eyebrow { color: var(--brand-blue); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.section-heading h2 { font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 14px; }
.section-heading p { color: var(--text-muted); font-size: 16px; margin: 0; }

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.section-heading-left .section-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.section-heading-left p { color: var(--text-muted); margin: 0; font-size: 15px; }

.section-link { color: var(--brand-blue); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* ---------- Destinations ---------- */

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.destination-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: block;
}

.destination-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.destination-card:hover img { transform: scale(1.05); }

.destination-body { padding: 16px 18px 18px; }

.dest-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.destination-body p { margin: 4px 0 10px; font-size: 13.5px; color: var(--text-muted); }
.dest-explore { font-size: 13.5px; font-weight: 600; color: var(--brand-blue); }
.destination-card:hover .dest-explore { text-decoration: underline; }

/* ---------- Offers ---------- */

.offers-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.offer-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  display: block;
}

.offer-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

.offer-scrim { position: absolute; inset: 0; }
.offer-scrim-blue { background: linear-gradient(160deg, rgba(20,60,140,0.75), rgba(10,20,40,0.35)); }
.offer-scrim-teal { background: linear-gradient(160deg, rgba(10,90,90,0.72), rgba(10,20,40,0.35)); }
.offer-scrim-navy { background: linear-gradient(160deg, rgba(12,20,50,0.8), rgba(10,20,40,0.45)); }

.offer-body {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  color: #fff;
}

.offer-body h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.offer-body .btn { align-self: flex-start; }

.offers-note { text-align: center; color: var(--text-muted); font-size: 12.5px; margin: 26px 0 0; }

/* ---------- Features ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(29,95,214,0.08);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.feature-card h3 { margin: 0 0 8px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* ---------- Gallery / partners ---------- */

.gallery-bg { background: var(--bg); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery-grid .gallery-item { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; }
.gallery-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid .gallery-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }

/* ---------- Simple page header (Login / Register) ---------- */
/* A plain gradient banner for the two account pages -- no photo, since
   there isn't a natural one for a login/register screen the way there is
   for a destination-led page like Flights or Hajj & Umrah. */

.simple-header {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
  padding: 56px 0 60px;
  text-align: center;
}
.simple-header h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); }
.simple-header p { margin: 0; color: rgba(255,255,255,0.85); font-size: 15px; }

/* ---------- WhatsApp / contact callout ---------- */

.callout {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.callout h2 { margin: 0 0 10px; font-size: 26px; }
.callout p { margin: 0; color: rgba(255,255,255,0.85); max-width: 460px; }
.callout-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.callout .btn-primary { background: var(--brand-orange); color: #fff; }
.callout .btn-primary:hover { background: #d97e19; }
.callout .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.callout .btn-outline:hover { background: #fff; color: var(--brand-blue); }

.callout-address { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 16px; line-height: 1.6; }

/* ---------- Contact info cards (Contact page) ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }

.contact-info-list { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 0; }

.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(29,95,214,0.08);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
/* min-width: 0 lets this flex item shrink below its content's intrinsic
   width -- without it, a long unbroken string (the email address) forces
   the item wider than the flex container and overflows narrow phones. */
.contact-info-item > div { min-width: 0; }
.contact-info-item strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.contact-info-item span, .contact-info-item a {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contact-info-item a:hover { color: var(--brand-blue); }

/* ---------- Simple lead-capture forms (Contact / Login / Register) ---------- */
/* These are honest lead-capture forms, not real authentication -- this
   static site has no account backend of its own (see README), so
   submitting emails the details to the team the same way the search
   widget does, and each page says so plainly above the form. */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.form-card .field { margin-bottom: 16px; }
.form-card .field:last-of-type { margin-bottom: 0; }

.form-card textarea {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  width: 100%;
  min-width: 0;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}

.form-card .field-input.textarea-field { align-items: flex-start; padding-top: 12px; }

.form-note {
  display: flex;
  gap: 10px;
  background: rgba(29,95,214,0.06);
  border: 1px solid rgba(29,95,214,0.18);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.5;
}

.form-submit-row { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.form-submit-row .btn { width: 100%; justify-content: center; }
.form-success {
  display: none;
  background: rgba(34,150,90,0.1);
  border: 1px solid rgba(34,150,90,0.3);
  color: #1c7a4d;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  margin-top: 16px;
}
.form-success.visible { display: block; }

.auth-page-wrap { max-width: 480px; margin: 0 auto; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted); }
.auth-switch a { color: var(--brand-blue); font-weight: 600; }

/* ---------- Flight search results page ---------- */

/* Compact re-search bar: route, editable dates (prev/next-day arrows,
   real query-string navigation -- no fake countdown/urgency timer here,
   see script.js comment) and a link back to the full search form. */
.results-searchbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 0; }
.results-searchbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.results-route-block { min-width: 0; }
.results-route-cities { font-size: clamp(17px, 2vw, 20px); font-weight: 800; letter-spacing: 0.01em; }
.results-route-meta { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }

.results-date-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}
.date-nav-btn {
  border: none;
  background: var(--surface);
  color: var(--brand-blue);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}
.date-nav-btn:hover { background: var(--brand-blue); color: #fff; }
.date-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--surface); color: var(--brand-blue); }
.date-nav-label { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 0 6px; }
.date-nav-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.date-nav-date { font-size: 13px; font-weight: 700; }

.results-section { padding: 20px 0 64px; background: #f4f6fb; }

.results-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: 24px;
}

.results-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: sticky;
  top: 88px;
}
.results-filters-heading { margin: 0 0 12px; font-size: 15px; }
.results-filters-toggle-btn {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}
.results-filters-toggle-icon { transition: transform 0.15s ease; color: var(--brand-blue); }
.results-filters-toggle-btn[aria-expanded="true"] .results-filters-toggle-icon { transform: rotate(180deg); }

.filter-group { margin-bottom: 20px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.filter-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.filter-pill:hover { border-color: var(--brand-blue); }
.filter-pill.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 5px 0;
  cursor: pointer;
}
.filter-checkbox-row input { accent-color: var(--brand-blue); width: 15px; height: 15px; }

/* Dual-handle range slider: two overlapping native <input type=range>
   elements (pointer-events disabled on the track, re-enabled only on the
   thumb) so dragging is native/touch-friendly with no custom pointer math. */
.range-slider { position: relative; padding-top: 4px; }
.range-slider-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 14px 2px 0;
}
.range-slider-fill { position: absolute; top: 0; bottom: 0; background: var(--brand-blue); border-radius: 999px; }
.range-slider-input {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.range-slider-input::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; }
.range-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand-blue);
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
  margin-top: 0;
}
.range-slider-input::-moz-range-track { background: transparent; border: none; }
.range-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand-blue);
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
}
.range-slider-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.range-slider-sub { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }

.results-main { min-width: 0; }

/* ---- Airline quick-fare strip ---- */
.airline-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.airline-strip-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px 8px 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.airline-strip-item:hover { border-color: var(--brand-blue); }
.airline-strip-item.active { border-color: var(--brand-blue); background: rgba(29,95,214,0.06); }
.airline-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.airline-strip-name { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.airline-strip-price { display: block; font-size: 14px; font-weight: 800; color: var(--brand-blue); white-space: nowrap; }

/* ---- Toolbar: result count + Gross/Agent fare view toggle ---- */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.results-count { font-weight: 700; font-size: 15px; }
.results-count span { color: var(--brand-blue); }
.fare-toggle { display: inline-flex; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 3px; }
.fare-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fare-toggle-btn.active { background: var(--brand-blue); color: #fff; }
.fare-toggle-btn .lock-icon { font-size: 11px; opacity: 0.8; }

.agent-fare-locked {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
}
.agent-fare-locked .agent-fare-icon { font-size: 30px; margin-bottom: 10px; }
.agent-fare-locked h3 { margin: 0 0 6px; font-size: 18px; }
.agent-fare-locked p { margin: 0 0 18px; color: var(--text-muted); font-size: 14.5px; max-width: 420px; margin-left: auto; margin-right: auto; }

.summary-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.summary-chip {
  flex: 1 1 160px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-chip:hover { border-color: var(--brand-blue); }
.summary-chip.active { border-color: var(--brand-blue); background: rgba(29,95,214,0.06); }
.summary-chip-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.summary-chip-price { font-size: 17px; font-weight: 700; color: var(--brand-blue); }

.freshness-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(30,138,76,0.08);
  border: 1px solid rgba(30,138,76,0.25);
  color: #1c7a4d;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.freshness-banner.stale { background: rgba(242,147,43,0.1); border-color: rgba(242,147,43,0.35); color: #96591a; }
.freshness-refresh {
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.results-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.results-loading { color: var(--text-muted); font-size: 15px; }

.results-fallback {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
}
.results-fallback h3 { margin: 0 0 8px; font-size: 18px; }
.results-fallback p { margin: 0 0 18px; color: var(--text-muted); font-size: 14.5px; }

.results-list { display: flex; flex-direction: column; gap: 14px; }

.flight-offer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.flight-offer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.flight-offer-airline-block { display: flex; align-items: center; gap: 10px; }
.flight-offer-airline-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 10px;
}
.flight-offer-airline { font-weight: 700; font-size: 14.5px; }
.flight-offer-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.flight-offer-tag {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #eef2fb;
  color: var(--brand-blue);
  border-radius: 999px;
  padding: 3px 10px;
}
.flight-offer-tag-refundable { background: rgba(30,138,76,0.12); color: var(--success); }

.flight-offer-bound { margin-bottom: 14px; }
.flight-offer-bound:last-child { margin-bottom: 0; }
.flight-offer-bound-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }

.flight-offer-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.flight-offer-timepoint { display: flex; flex-direction: column; gap: 2px; }
.flight-offer-timepoint:last-child { text-align: right; align-items: flex-end; }
.flight-offer-time { font-size: 18px; font-weight: 700; }
.flight-offer-iata { font-size: 12.5px; color: var(--text-muted); }
.flight-offer-timeline-middle { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flight-offer-duration { font-size: 12.5px; color: var(--text-muted); }
.flight-offer-line { width: 100%; min-width: 60px; height: 1.5px; background: var(--border); position: relative; }
.flight-offer-line::after { content: ''; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-blue); }
.flight-offer-line::before { content: ''; position: absolute; left: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-blue); }
.flight-offer-stops { font-size: 11.5px; color: var(--text-muted); }

.flight-offer-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flight-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f4f6fb;
  border-radius: 999px;
  padding: 4px 10px;
}
.flight-offer-badge-refundable { color: var(--success); background: rgba(30,138,76,0.1); }
.flight-offer-badge-nonrefundable { color: var(--danger); background: rgba(192,57,43,0.08); }

.flight-offer-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.flight-offer-baggage { font-size: 13px; color: var(--text-muted); }
.flight-offer-price-block { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.flight-offer-price-col { text-align: right; }
.flight-offer-price-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.flight-offer-price { font-size: 20px; font-weight: 800; color: var(--brand-blue); }
.flight-offer-book-btn { white-space: nowrap; }

/* ---------- Footer ---------- */

.site-footer { background: #0d1b33; color: rgba(255,255,255,0.75); padding: 48px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-grid h4 { color: #fff; font-size: 14px; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-brand p { max-width: 320px; font-size: 14px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-brand .brand-subtitle { color: var(--brand-blue-light); }
.footer-brand .brand-title { color: #fff; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .standard-fields,
  .standard-fields.oneway {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }
  .swap-btn { display: none; }
  .segment-row { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .segment-remove { grid-column: span 2; justify-self: start; }
  .form-row-bottom { flex-wrap: wrap; }
  .form-row-bottom .search-submit { flex: 1 0 100%; }
}

@media (max-width: 900px) {
  .destinations-grid { grid-template-columns: repeat(2, 1fr); }
  .offers-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .gallery-item.wide { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { justify-content: flex-start; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .results-layout { grid-template-columns: 1fr; }
  .results-filters { position: static; }
  .results-filters-heading { display: none; }
  .results-filters-toggle-btn { display: flex; }
  #results-filters-body.collapsed { display: none; }
}

/* The full inline nav (7 links + language selector + Login/Register)
   needs roughly 1090px of header width before it stops wrapping onto a
   second line -- and since .header-inner has a fixed height, a wrapped
   second line doesn't grow the header, it just overlaps whatever comes
   right after it (the promo ticker/hero). Tested directly: at 1080px the
   nav wraps and overlaps; at 1090px it fits on one line. So the hamburger
   breakpoint is 1090px, not 720px -- 720px only left a wrapping, broken
   header on tablets and small laptops in between (iPad portrait/landscape,
   721-1085px window widths, etc.) with no way to reach the links that got
   pushed onto the hidden second line. */
@media (max-width: 1090px) {
  .nav-toggle { display: flex; }
  /* Previously this just hid the nav below 720px with no way back in --
     the menu simply vanished on phones. It now collapses into a dropdown
     panel the toggle button above opens/closes instead. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: var(--shadow-lg);
    padding: 10px 24px 16px;
    z-index: 70;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav-links a:last-of-type { border-bottom: none; }
  /* The auth buttons in the bar itself are hidden below -- only the
     hamburger stays there -- so Login/Register need a way back in, added
     here inside the dropdown instead. */
  .nav-cta > .btn { display: none; }
  .nav-links-mobile-cta {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .nav-links-mobile-cta .btn { flex: 1; justify-content: center; }
}

@media (max-width: 720px) {
  .destinations-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .callout { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .standard-fields,
  .standard-fields.oneway { grid-template-columns: 1fr; }
  .segment-row { grid-template-columns: 1fr; }
  .segment-remove { grid-column: span 1; }
  /* Below 720px, every search-widget page (Home/Flights/Hotels/
     Hajj & Umrah/Tour Packages -- plain .hero, not .hero-plain) drops the
     hero photo and title entirely and puts the search card directly under
     the site header instead, so a phone visitor sees the search form
     immediately rather than scrolling past a banner first. This only
     targets .hero:not(.hero-plain) -- the About/Contact page-header
     banners (.hero-plain) have no search widget competing for the top of
     the screen, so they keep their photo on mobile. */
  .hero:not(.hero-plain) { padding-top: 16px; padding-bottom: 0; }
  .hero:not(.hero-plain) .hero-media,
  .hero:not(.hero-plain) .hero-content { display: none; }
  .search-widget-wrap { margin-top: 0; }
  .hero.hero-plain .hero-content { padding-top: 32px; padding-bottom: 32px; }
  .hero.hero-plain { padding-bottom: 0; }
  .hero.hero-plain .hero-media img { object-position: center 40%; }
  .results-searchbar-inner { align-items: flex-start; }
  .results-date-nav { width: 100%; justify-content: space-between; }
  .summary-row { flex-direction: column; }
  .results-toolbar { align-items: stretch; }
  .fare-toggle { width: 100%; }
  .fare-toggle-btn { flex: 1; justify-content: center; }
  .flight-offer-timeline { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; }
  .flight-offer-timepoint:last-child { text-align: center; align-items: center; }
  .flight-offer-line { min-width: 40px; }
  .flight-offer-card-footer { flex-direction: column; align-items: flex-start; }
  .flight-offer-price-block { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .flight-offer-price-col { text-align: left; }
  .flight-offer-book-btn { width: 100%; text-align: center; }
  .airline-strip-item { padding: 6px 10px 6px 6px; }
}

@media (max-width: 520px) {
  .destinations-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .search-widget { padding: 18px 16px 20px; }
  .search-tabs { gap: 6px; }
  .search-tab { padding: 8px 12px; font-size: 13px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { height: auto; padding: 14px 0; }
  .lang-select { display: none; }
  .nav-cta { gap: 8px; }
  .btn-sm { padding: 8px 14px; font-size: 13px; }
  .brand-title { font-size: 15px; }
  .brand-subtitle { font-size: 9px; }
  .trust-grid { gap: 16px 24px; }
  .form-card { padding: 22px 18px; }
  .promo-ticker-item { font-size: 14px; padding: 11px 20px; }
  .promo-ticker-track { animation-duration: 26s; }
}

/* Customer assistant and selected-offer enquiry. Existing layouts remain unchanged. */
.mtt-chat-toggle{position:fixed;right:18px;bottom:18px;z-index:100;border:0;border-radius:999px;background:#1d5fd6;color:#fff;padding:13px 18px;box-shadow:0 9px 28px #123b7b66;font-weight:800}
.mtt-chat{display:none;position:fixed;right:18px;bottom:75px;z-index:100;width:min(380px,calc(100vw - 24px));height:min(540px,calc(100vh - 105px));background:#fff;border:1px solid #d8e5f2;border-radius:18px;box-shadow:0 20px 65px #132d5080;overflow:hidden;flex-direction:column}
.mtt-chat.open{display:flex}.mtt-chat-head{background:#123d79;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:13px 15px}.mtt-chat-head strong{display:block}.mtt-chat-head small{color:#d0e4ff}.mtt-chat-head button{border:0;background:none;color:#fff;font-size:22px}.mtt-chat-log{padding:14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:9px}.mtt-chat-bubble{background:#eef4ff;border-radius:12px;padding:9px 12px;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere}.mtt-chat-bubble.user{background:#1d5fd6;color:#fff;align-self:flex-end}.mtt-chat-prompts{padding:6px 10px;display:flex;gap:6px;overflow-x:auto}.mtt-chat-prompts button{background:#fff;border:1px solid #bed3ed;border-radius:999px;padding:5px 9px;white-space:nowrap;font-size:12px;color:#173d73}.mtt-chat-form{display:flex;gap:7px;border-top:1px solid #e4ebf2;padding:10px}.mtt-chat-form input{min-width:0;flex:1;border:1px solid #d8e5f2;border-radius:9px;padding:9px}.mtt-chat-form button{background:#1d5fd6;color:#fff;border:0;border-radius:9px;padding:0 12px;font-weight:800}
.mtt-dialog-backdrop{display:none;position:fixed;inset:0;z-index:110;background:#0d203fc2;align-items:center;justify-content:center;padding:16px}.mtt-dialog-backdrop.open{display:flex}.mtt-dialog{position:relative;background:#fff;border-radius:18px;padding:24px;width:min(510px,100%);max-height:90vh;overflow:auto}.mtt-dialog h2{font-size:24px;margin:0 0 7px}.mtt-dialog p{color:#53637a}.mtt-dialog label{display:block;font-weight:750;margin:12px 0 5px}.mtt-dialog input,.mtt-dialog textarea{width:100%;padding:11px;border:1px solid #cbd8e7;border-radius:9px}.mtt-dialog textarea{min-height:70px;resize:vertical}.mtt-dialog-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.mtt-dialog-actions a{color:#1d5fd6;font-weight:750}.mtt-dialog-status{min-height:18px;color:#b42318;font-size:13px;margin-top:8px}.mtt-dialog-close{position:absolute;top:10px;right:12px;background:#edf3fa;border:0;border-radius:50%;width:32px;height:32px;font-size:20px}.mtt-dialog .mtt-success{color:#157147;font-weight:750}.mtt-dialog .mtt-disclaimer{font-size:12px;color:#64748b}
@media(max-width:540px){.mtt-chat-toggle{right:12px;bottom:12px}.mtt-chat{right:12px;bottom:68px}.mtt-dialog{padding:18px}}
.mtt-chat .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Muhammad International Travels visual refresh */
:root{--brand-blue:#076b68;--brand-blue-dark:#044c4a;--brand-blue-light:#16968b;--bg:#f7f8f6;--text:#173433;--text-muted:#63736f;--border:#dfe7e2;--radius-xl:20px}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:#f8faf8}.container{max-width:1280px}.utility-bar{background:#123c3a;color:#e7f0e9;font-size:12px;padding:8px 0}.utility-bar .container{display:flex;justify-content:space-between;gap:16px}.utility-bar a{color:inherit}.skip-link{position:fixed;top:-80px;left:20px;z-index:999;background:white;padding:12px}.skip-link:focus{top:12px}.site-header{background:#fff}.brand-title{letter-spacing:2px;color:#163f3c}.brand-subtitle{letter-spacing:1.3px;font-size:10px}.brand-mark{width:52px;height:48px;object-fit:contain}.nav-links{gap:18px;font-size:13px}.nav-cta{gap:8px}.lang-select{display:none}.promo-ticker{background:#eef3eb;color:#344e43;border:0;font-size:12px}.promo-ticker-track{animation-duration:100s}.promo-ticker:hover .promo-ticker-track{animation-play-state:paused}.hero{padding:0 0 44px;background:#e9efea}.hero-media{height:510px;bottom:auto}.hero-media img{object-position:center 48%}.hero-scrim{background:linear-gradient(90deg,rgba(7,32,30,.84),rgba(7,32,30,.34) 57%,rgba(7,32,30,.06))}.international-hero-copy{position:relative;z-index:1;padding-top:62px;padding-bottom:92px;color:white}.journey-label{font-size:11px;letter-spacing:3px;font-weight:700;color:#e2d5a7}.hero .international-hero-copy h1{font-family:Georgia,serif;font-size:64px;line-height:1.08;letter-spacing:-1.8px;margin:19px 0 18px;font-weight:400;max-width:750px}.international-hero-copy h1 em{font-style:italic;color:#e8dcb5}.international-hero-copy p{font-size:16px;line-height:1.7;color:#f1f4ee;margin:0 0 24px}.hero-discover{color:white;font-size:13px;border-bottom:1px solid #d9cfa9;padding-bottom:7px}.photo-caption{position:absolute;right:26px;bottom:100px;font-size:10px;letter-spacing:2px}.search-widget-wrap{margin-top:-35px;z-index:5}.search-widget{border:1px solid #e1e8e2;box-shadow:0 18px 45px #11372b14;padding:24px 28px}.search-tabs{border-bottom:1px solid var(--border);padding-bottom:18px}.search-tab{border:0;border-radius:9px;background:#f1f5f1;padding:12px 22px}.search-tab.active{background:var(--brand-blue);color:white}.search-note{font-size:11px}.field{border-radius:10px}.btn{border-radius:9px}.trust-row{background:white;border-bottom:1px solid var(--border)}.trust-item strong{font-size:13px}.trust-item small{font-size:11px}.trust-icon{background:#edf4ed;color:var(--brand-blue)}#destinations,#offers,#airlines,#why-us,#contact{padding:64px 0}.section-eyebrow{color:#086b65;letter-spacing:1px}.section-heading-left .section-eyebrow{font-family:Georgia,serif;font-size:32px;letter-spacing:-.5px}.destinations-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.destination-card{border:1px solid #e2e8e1;box-shadow:none;border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}.destination-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px #123c3a18}.destination-card img{height:205px;object-fit:cover}.destination-body{padding:17px}.dest-name{font-size:18px}.destination-body p{font-size:12px}.dest-explore{color:#076b68}.offer-card{border-radius:16px;min-height:260px}.offer-body h3{font-family:Georgia,serif;font-size:27px;font-weight:400}.gallery-bg{background:#edf2ec}.section-heading h2{font-family:Georgia,serif;font-size:36px;font-weight:400}.feature-card{box-shadow:none;border:1px solid #dae4d9;border-radius:14px}.callout{background:#123f3b;border-radius:20px;padding:42px}.callout h2{font-family:Georgia,serif;font-weight:400;font-size:36px}.site-footer{background:#102e2d;color:#edf4ed}.site-footer .brand-title,.site-footer .brand-subtitle{color:#fff}.site-footer a{color:#d5e6df}.site-footer p,.footer-bottom{color:#bdd1c9}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd913b;outline-offset:4px}
@media(max-width:1100px){.nav-links{gap:12px}.nav-cta>.btn{display:none}.hero .international-hero-copy h1{font-size:56px}.destinations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.utility-bar .container>span{display:none}.utility-bar .container{justify-content:center}.header-inner{padding-top:12px;padding-bottom:12px}.hero:not(.hero-plain){padding-top:0;padding-bottom:24px}.hero:not(.hero-plain) .hero-media{display:block;height:390px}.international-hero-copy{padding-top:38px;padding-bottom:72px}.hero .international-hero-copy h1{font-size:43px;letter-spacing:-1px}.international-hero-copy p{font-size:14px}.journey-label{font-size:9px;letter-spacing:1.8px}.photo-caption{display:none}.search-widget-wrap{margin-top:-20px}.search-widget{padding:18px 16px}.search-tabs{gap:6px}.search-tab{padding:10px;font-size:12px;flex:1 1 40%;justify-content:center}.destinations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.destination-card img{height:165px}.destination-body{padding:12px}.dest-name{font-size:16px}.section-heading-left .section-eyebrow{font-size:25px}.section-heading-row{gap:10px}.section-link{font-size:11px}#destinations,#offers,#airlines,#why-us,#contact{padding:40px 0}.callout{padding:25px}.section-heading h2,.callout h2{font-size:29px}.brand-subtitle{font-size:9px}.brand-title{font-size:21px}.site-footer li{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Five destination campaign carousel */
.mit-carousel{position:relative;height:570px;isolation:isolate;background:#153e39;overflow:hidden;color:#fff}.mit-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s;pointer-events:none}.mit-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}.mit-slide-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}.mit-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,29,28,.88),rgba(4,29,28,.53) 48%,rgba(4,29,28,.08)),linear-gradient(0deg,rgba(4,29,28,.5),transparent 45%)}.mit-slide-content{position:relative;height:100%;padding-top:38px}.mit-kicker{display:block;font-size:10px;letter-spacing:3px;color:#f0e4c2;font-weight:700}.mit-promo{display:inline-block;margin-top:20px;padding:6px 11px;border:1px solid #ffffff55;border-radius:5px;font-size:10px;letter-spacing:1.7px;background:#ffffff10}.hero .mit-slide h1{font-family:Georgia,serif;font-size:57px;line-height:1.08;letter-spacing:-1.5px;font-weight:400;margin:17px 0 16px;max-width:850px}.mit-slide h1 em{color:#f1dfb4;font-weight:400}.mit-slide p{max-width:485px;color:#f5f6f1;font-size:16px;line-height:1.65;margin:0 0 21px}.mit-hero-cta{background:#efddb1;color:#133b36;border:0;padding:12px 20px;box-shadow:none}.mit-hero-cta:hover{background:white;color:#133b36}.mit-disclaimer{display:block;font-size:10px;color:#e0e8dd;margin-top:12px}.mit-location{position:absolute;right:25px;bottom:116px;font-size:12px;letter-spacing:3px}.mit-controls{position:absolute;z-index:3;bottom:62px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:15px}.mit-dots{display:flex;gap:8px}.mit-dot{padding:11px 13px;min-height:44px;border:1px solid #ffffff50;background:#153e3970;color:white;border-radius:7px;font:inherit;font-size:11px;cursor:pointer}.mit-dot[aria-pressed=true]{background:#f1dfb4;color:#133b36;border-color:#f1dfb4}.mit-arrows{display:flex;gap:7px}.mit-arrows button{height:44px;min-width:44px;border:1px solid #ffffff70;border-radius:7px;background:#153e3980;color:white;cursor:pointer;font-size:16px}#mit-play{font-size:11px;min-width:64px}.mit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hero .search-widget-wrap{margin-top:-36px}.hero{padding-bottom:36px}
@media(max-width:720px){.mit-carousel{height:555px}.mit-slide-content{padding-top:28px}.mit-kicker{font-size:8px;letter-spacing:1.7px}.mit-promo{margin-top:17px;font-size:9px}.hero .mit-slide h1{font-size:38px;letter-spacing:-.8px;line-height:1.12;margin-top:17px}.mit-slide p{font-size:14px;max-width:340px}.mit-shade{background:linear-gradient(90deg,#062d2cdb,#062d2c60),linear-gradient(0deg,#062d2cbb,transparent)}.mit-location{display:none}.mit-controls{bottom:58px;flex-wrap:wrap;gap:12px}.mit-dots{gap:5px;width:100%;justify-content:space-between}.mit-dot{padding:8px 5px;font-size:9px;flex:1}.mit-arrows{margin-left:auto}.mit-disclaimer{font-size:9px;max-width:260px}.hero .search-widget-wrap{margin-top:-24px}.mit-hero-cta{font-size:13px}}
@media(prefers-reduced-motion:reduce){.mit-slide{transition:none}}

/* Search-first responsive layout: mobile <=720px, tablet and desktop >720px. */
.hero{overflow:visible;padding-bottom:32px}
.hero .search-widget-wrap{position:relative;z-index:10;margin-top:-80px}
.hero .search-widget{background:#fff;opacity:1;overflow:visible;box-shadow:0 16px 40px #123c3a25}
.mit-carousel{height:500px}
.mit-slide-content{padding-top:24px}
.mit-promo{margin-top:13px}
.hero .mit-slide h1{font-size:48px;margin:12px 0}
.mit-slide p{font-size:15px;line-height:1.5;margin-bottom:15px}
.mit-controls{bottom:100px}
.mit-location{bottom:164px}
.search-widget .field{min-width:0}
.search-widget input,.search-widget select{min-width:0;max-width:100%}
.search-widget .pax-panel{z-index:60}
@media(min-width:721px) and (max-width:1024px){
 .mit-carousel{height:520px}
 .hero .mit-slide h1{font-size:44px}
 .mit-slide p{max-width:430px}
 .mit-location{display:none}
 .mit-controls{bottom:104px;gap:10px}
 .mit-dot{padding:10px 8px;font-size:10px}
 .hero .search-widget-wrap{margin-top:-80px}
 .search-widget{padding:22px}
 .standard-fields,.standard-fields.oneway{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:end}
 .standard-fields .field-from{grid-column:1;grid-row:1}
 .standard-fields .swap-btn{grid-column:2;grid-row:1;position:static;transform:none;align-self:center}
 .standard-fields .field-to{grid-column:3;grid-row:1}
 .standard-fields .field-depart{grid-column:1;grid-row:2}
 .standard-fields .field-return{grid-column:3;grid-row:2}
 .form-row-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .form-row-bottom .search-submit{grid-column:1/-1;width:100%}
}
@media(max-width:720px){
 .hero .mit-carousel{display:none!important}
 .hero:not(.hero-plain){padding:18px 0 24px}
 .hero .search-widget-wrap{margin-top:0!important;width:100%}
 .hero .search-widget{padding:18px 14px;border-radius:14px}
 .search-tabs{margin-bottom:16px}
 .form-row-bottom{display:flex;flex-wrap:wrap}
 .form-row-bottom .field-travellers,.form-row-bottom .field-class{flex:1 1 120px;min-width:0}
 .form-row-bottom .search-submit{flex:1 0 100%;width:100%;min-height:48px}
 .search-widget .pax-panel{min-width:0;width:min(300px,calc(100vw - 64px))}
}

/* Compact hero: search begins immediately after the campaign disclaimer. */
.mit-controls,.mit-location{display:none!important}
@media(min-width:721px){
 .hero .mit-carousel{height:calc(var(--mit-copy-height, 360px) + 80px)}
 .mit-slide-content{height:auto;padding-bottom:0}
 .mit-disclaimer{margin-bottom:0;line-height:15px}
 .hero .search-widget-wrap{margin-top:-80px}
}

/* Header contacts between navigation and account actions. */
.header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.header-contact{display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0}
.header-contact a{white-space:nowrap;font-size:12px;font-weight:600;text-decoration:none}
.header-whatsapp{background:#e8f5eb;color:#166337;padding:10px 12px;border-radius:8px;border:1px solid #c9e6cf}
.header-phone{color:#17443e;padding:10px 0}
.nav-cta{margin-left:0}
@media(min-width:1101px){.header-inner{max-width:1480px;gap:14px}.header-inner .nav-links{flex:1;justify-content:center;gap:13px;font-size:12px}.header-inner .nav-cta>.btn{display:inline-flex}.header-contact{gap:8px}.header-contact a{font-size:11px}.header-inner .brand{flex-shrink:0}}
@media(min-width:721px) and (max-width:1100px){.header-contact{margin-left:auto}.header-inner .nav-cta>.btn{display:inline-flex}}
@media(max-width:720px){.header-inner{gap:8px}.header-inner>.brand{order:1}.header-inner>.nav-cta{order:2;margin-left:auto}.header-inner>.nav-links{order:3}.header-contact{order:4;width:100%;border-top:1px solid #e3eae5;padding-top:9px;gap:22px}.header-contact a{font-size:12px}.header-whatsapp{padding:8px 14px}}
.signed-in-account{display:flex!important;flex-direction:column;max-width:200px;gap:3px;white-space:normal!important;overflow-wrap:anywhere}.signed-in-account strong{font-size:12px}.signed-in-account small{font-size:9px;font-weight:400}
/* Worldwide airport picker */
.field-input{position:relative}.mit-airport-picker{position:absolute;top:calc(100% + 8px);left:0;width:440px;max-width:calc(100vw - 52px);z-index:200;background:#fff;border:1px solid #cbdcd1;border-radius:12px;box-shadow:0 16px 42px #163e3429;max-height:none;padding:12px;overflow:visible;color:#173e35}.mit-airport-picker:not(.open){display:none}.mit-airport-picker.open{display:block}.mit-airport-picker input.airport-filter{display:block;width:100%;padding:12px!important;border:1px solid #bbcec0!important;border-radius:8px;background:#f7faf7;font-size:14px!important;color:#173e35}.airport-match-count{font-size:11px;padding:10px 2px;color:#5c7365}.airport-results{max-height:280px;overflow-y:auto;overscroll-behavior:contain}.mit-airport-picker .airport-option{display:grid;grid-template-columns:48px 1fr;gap:3px 10px;padding:12px 6px;cursor:pointer;border-bottom:1px solid #e6ece7}.mit-airport-picker .code{grid-row:1/3;background:#e8f3eb;align-self:start;padding:6px 3px;text-align:center;border-radius:5px;color:#076b5d;font-weight:700}.mit-airport-picker .place{font-size:13px;font-weight:600;white-space:normal}.mit-airport-picker .name{font-size:11px;grid-column:2;white-space:normal}.airport-option:hover,.airport-option.highlighted{background:#edf5ef}.airport-more{width:100%;background:#f1f6f1;border:0;padding:11px;margin-top:7px;border-radius:7px;color:#075f50;cursor:pointer}.airport-more[hidden]{display:none}.field-to .mit-airport-picker{left:auto;right:0}@media(max-width:720px){.mit-airport-picker{width:min(440px,calc(100vw - 64px))}.airport-results{max-height:240px}.field-to .mit-airport-picker{left:0;right:auto}}

.mit-confirm{max-width:620px;width:calc(100% - 28px);border:1px solid #dce5df;border-radius:18px;padding:28px;color:#153e36;box-shadow:0 25px 80px #0004}.mit-confirm::backdrop{background:#08292099}.mit-confirm h2{font-size:23px}.mit-confirm dl{display:grid;grid-template-columns:1fr 2fr;gap:12px;background:#f2f6f1;padding:18px;border-radius:10px;max-height:45vh;overflow:auto}.mit-confirm dt{font-weight:700}.mit-confirm dd{margin:0;overflow-wrap:anywhere}.confirm-actions{display:flex;justify-content:flex-end;gap:12px}.confirm-note{font-size:12px;color:#52685b}.mtt-chat{z-index:1000}.mtt-chat-toggle{z-index:999}.mtt-chat-log{overflow:auto}.mtt-chat-prompts{flex-wrap:wrap}

.mtt-chat{width:min(430px,calc(100vw - 24px));max-height:85vh}.mtt-chat-log{max-height:55vh;overflow-y:auto}.mtt-chat-bubble{white-space:pre-wrap}.mit-contact-form{display:grid;gap:10px;padding:14px;border:1px solid #ceded0;border-radius:10px;background:white;margin:10px}.mit-contact-form label{display:grid;gap:5px;font-size:12px;color:#214d40}.mit-contact-form input:not([type=checkbox]){width:100%;padding:10px;border:1px solid #b9cec0;border-radius:6px;font-size:14px;box-sizing:border-box}.mit-contact-form .mit-contact-consent{display:flex;align-items:flex-start;gap:8px}.mit-contact-consent input{width:auto}.mit-contact-form button{border:0;background:#076b5d;color:white;padding:11px;border-radius:7px;cursor:pointer}.mit-contact-form button:disabled{opacity:.6}.mit-contact-form p{font-size:12px;overflow-wrap:anywhere}

/* Full Travel AI Agent chat interface */
.mtt-chat.open{display:flex;flex-direction:column}.mtt-chat{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 110px)}.mtt-chat-head small{display:block;font-size:9px;letter-spacing:1px;margin-top:5px;color:#dcebe3}.agent-toolbar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#eef5f0;border-bottom:1px solid #dbe7df}.agent-toolbar span{flex:1;font-size:10px;color:#416652}.agent-toolbar button{border:1px solid #c5d9cc;background:white;color:#194d3c;border-radius:6px;padding:6px;font-size:10px;cursor:pointer}.mtt-chat-log{flex:1;min-height:150px;max-height:none;overflow-y:auto}.mtt-chat-prompts{flex-shrink:0}.agent-human{font-size:11px;text-align:center;padding:9px;color:#176641}.mtt-chat-form{display:flex;gap:8px;align-items:end;flex-shrink:0}.mtt-chat-form textarea{flex:1;min-width:0;resize:vertical;max-height:130px;border:1px solid #bfd4c5;border-radius:9px;padding:10px;font:14px/1.5 Arial;color:#173e35;box-sizing:border-box}.agent-disclaimer{display:block;text-align:center;padding:0 14px 10px;font-size:9px;color:#65796c}.mtt-chat.agent-expanded{width:min(740px,calc(100vw - 32px));height:calc(100dvh - 100px)}@media(max-width:600px){.mtt-chat.open{position:fixed;left:10px;right:10px;bottom:75px;width:auto;height:calc(100dvh - 110px);max-height:740px}.mtt-chat-toggle{font-size:13px}.agent-toolbar{flex-wrap:wrap}.mtt-chat.agent-expanded{left:6px;right:6px;width:auto}}