:root {
  color-scheme: light;
  --seo-plum: #2e1a47;
  --seo-plum-hover: #452862;
  --seo-coral: #f56a61;
  /* Coral for small text: 4.6:1 on cream. Use the sand shade on sand panels (5.1:1). */
  --seo-coral-text: #c8443b;
  --seo-coral-text-sand: #b8392f;
  font-family: Inter, "Noto Sans Arabic", system-ui, sans-serif;
  color: #30263b;
  background: #fbf9f6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #fbf9f6; }
a { color: inherit; }
.seo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 40px, 1120px);
  min-height: 82px;
  margin: 0 auto;
  border-bottom: 1px solid #ebe6ef;
}
.seo-brand { display: inline-flex; align-items: center; }
.seo-brand img { display: block; width: 148px; height: 40px; object-fit: contain; }
.seo-header nav { display: flex; align-items: center; gap: 24px; }
.seo-header nav a { color: #49365d; font-size: 14px; font-weight: 650; text-decoration: none; }
.seo-header nav a:hover, .seo-footer a:hover { color: var(--seo-coral-text); }
.seo-header .seo-language-link { color: var(--seo-coral-text); }
.seo-content { width: min(100% - 40px, 980px); margin: 0 auto; padding: 30px 0 68px; }
.seo-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #6f6777; font-size: 13px; line-height: 1.6; }
.seo-breadcrumb a { color: #5f536b; text-decoration: none; }
.seo-hero {
  margin-top: 28px;
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid #eee6ee;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff 0%, #f6f0f8 100%);
}
.seo-eyebrow { margin: 0 0 12px; color: var(--seo-coral-text); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.seo-hero h1 { max-width: 760px; margin: 0; color: #2e1a47; font-size: clamp(32px, 6vw, 54px); line-height: 1.12; letter-spacing: -.04em; }
.seo-hero > p:not(.seo-eyebrow) { max-width: 680px; margin: 17px 0 0; color: #6f6777; font-size: 17px; line-height: 1.7; }
.seo-primary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 24px; padding: 0 20px; border-radius: 13px; background: #2e1a47; color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; }
.seo-primary-link:hover { background: #483262; }
.seo-track-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 24px 0 0 10px; padding: 0 20px; border: 2px solid #2e1a47; border-radius: 13px; background: #fff; color: #2e1a47; font-size: 14px; font-weight: 750; text-decoration: none; }
.seo-track-link:hover { background: #f4eef8; }
/* Update 88: a route with no current fares shows its last fares with this note. */
.seo-last-known-note { margin-top: 18px; padding: 14px 16px; border: 1px solid #e8dcc8; border-radius: 13px; background: #fff7ec; color: #2e1a47; }
.seo-last-known-note p { margin: 0; }
.seo-last-known-alternatives { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
.seo-secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 2px solid #2e1a47; border-radius: 13px; background: #fff; color: #2e1a47; font-size: 14px; font-weight: 750; text-decoration: none; }
.seo-secondary-link:hover { background: #f4eef8; }
.seo-hero > p.seo-track-note { margin-top: 10px; font-size: 14px; }
html[dir="rtl"] .seo-track-link { margin: 24px 10px 0 0; }
@media (max-width: 520px) { .seo-track-link { margin-left: 0; margin-top: 12px; } html[dir="rtl"] .seo-track-link { margin-right: 0; } }
.seo-fares { margin-top: 44px; }
.seo-fares h2 { margin: 0; color: #2e1a47; font-size: clamp(23px, 4vw, 32px); letter-spacing: -.03em; }
.seo-note { max-width: 760px; margin: 10px 0 18px; color: #6f6777; font-size: 14px; line-height: 1.7; }
/* Update 90: the date of the newest saved fare, and the note shown instead of fares older than 14 days. */
.seo-fares-checked { margin: 6px 0 0; color: #2e6b4f; font-size: 14px; font-weight: 700; }
.seo-stale-note { max-width: 760px; margin: 10px 0 16px; padding: 14px 16px; border: 1px solid #e8dcc8; border-radius: 13px; background: #fff7ec; color: #2e1a47; font-size: 15px; line-height: 1.6; }
.seo-fare-list { display: grid; gap: 11px; }
.seo-fare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 18px; border: 1px solid #e9e4eb; border-radius: 16px; background: #fff; }
.seo-fare-row > div { display: grid; gap: 6px; }
.seo-fare-row span { color: #6f6777; font-size: 12px; }
.seo-fare-row strong { color: #332243; font-size: 14px; line-height: 1.5; }
.seo-fare-row > div:first-child strong { color: #2e1a47; font-size: 17px; }
.seo-footer { display: flex; flex-wrap: wrap; gap: 22px; width: min(100% - 40px, 1120px); margin: 0 auto; padding: 24px 0 36px; border-top: 1px solid #ebe6ef; color: #6f6777; font-size: 13px; }
.seo-footer a { color: #49365d; text-decoration: none; }
.seo-affiliate-disclosure { flex-basis: 100%; font-size: 12px; line-height: 1.6; }
.seo-quick-answer, .seo-route-insight, .seo-route-guidance, .seo-related-routes, .seo-faq, .seo-route-directory {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid #ebe6ef;
}
.seo-quick-answer h2, .seo-route-insight h2, .seo-route-guidance h2, .seo-related-routes h2, .seo-faq h2, .seo-route-directory h2 {
  margin: 0 0 12px;
  color: #2e1a47;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.seo-quick-answer p, .seo-route-insight p, .seo-route-guidance p, .seo-related-routes p, .seo-route-directory > p {
  max-width: 820px;
  color: #6f6777;
  font-size: 15px;
  line-height: 1.75;
}
.seo-reverse-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 20px 0 12px; }
.seo-reverse-route strong { color: #2e1a47; font-size: 13px; }
.seo-reverse-route a, .seo-route-hub-link { color: #49365d; font-weight: 750; text-underline-offset: 4px; }
.seo-related-routes ul, .seo-route-directory ul { display: grid; gap: 9px; padding: 0; list-style: none; }
.seo-related-routes li, .seo-route-directory li { border: 1px solid #e9e4eb; border-radius: 13px; background: #fff; }
.seo-related-routes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 17px; }
.seo-related-routes li a { color: #49365d; font-weight: 700; text-decoration: none; }
.seo-related-routes li span { color: #2e1a47; font-size: 13px; font-weight: 750; }
.seo-route-hub-link { display: inline-flex; margin-top: 17px; }
.seo-faq article { padding: 17px 0; border-bottom: 1px solid #ebe6ef; }
.seo-faq h3 { margin: 0 0 7px; color: #332243; font-size: 16px; line-height: 1.5; }
.seo-faq article p { max-width: 820px; margin: 0; color: #6f6777; font-size: 14px; line-height: 1.75; }
.seo-route-directory ul { margin: 22px 0 0; }
.seo-route-directory li { overflow: hidden; }
.seo-route-directory li > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  color: #49365d;
  text-decoration: none;
}
.seo-route-directory li > a:hover { background: #f7f2f8; }
/* Update 95 (M7): route rows link only the route name; the link's ::after covers the whole row. */
.seo-route-directory li.seo-route-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  color: #49365d;
}
.seo-route-directory li.seo-route-row:hover { background: #f7f2f8; }
.seo-route-list-link { color: inherit; text-decoration: none; }
.seo-route-list-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.seo-route-list-link:focus-visible { outline: none; }
.seo-route-list-link:focus-visible::after { outline: 2px solid #2e1a47; outline-offset: -2px; }
.seo-route-list-names { display: grid; gap: 4px; font-weight: 750; }
.seo-route-list-recorded { color: #6f6777; font-size: 12px; font-weight: 500; }
.seo-route-list-fare { color: #2e1a47; font-weight: 800; }
.seo-route-list-month { color: #6f6777; font-size: 12px; }
.seo-home-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.seo-home-link-grid a { display: grid; gap: 9px; padding: 19px; border: 1px solid #e9e4eb; border-radius: 16px; background: #fff; text-decoration: none; }
.seo-home-link-grid a strong { color: #2e1a47; font-size: 15px; }
.seo-home-link-grid a span { color: #6f6777; font-size: 13px; line-height: 1.65; }
html[dir="rtl"] { font-family: "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
html[dir="rtl"] .seo-hero h1 { letter-spacing: 0; }
@media (max-width: 650px) {
  .seo-header { min-height: 70px; flex-wrap: wrap; row-gap: 0; padding: 6px 0; }
  .seo-header nav { flex-wrap: wrap; gap: 0 14px; }
  /* Tap targets: 44px tall links, wrapping onto a second row on narrow phones instead of overflowing. */
  .seo-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .seo-footer a, .seo-footer span { display: inline-flex; align-items: center; min-height: 44px; }
  /* Update 35: brand, breadcrumb and body-level links that stood alone on a line are 44px tall too. */
  .seo-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .seo-header nav a, .seo-footer a { min-width: 44px; justify-content: center; }
  .seo-breadcrumb a, .seo-reverse-route a, .seo-route-hub-link, .blog-destination-link { display: inline-flex; align-items: center; min-height: 44px; }
  .seo-breadcrumb a { min-width: 44px; justify-content: center; }
  .seo-affiliate-disclosure, .seo-eyebrow { font-size: 12px; }
  .seo-route-guidance li a { display: inline-flex; align-items: center; min-height: 44px; }
  .seo-route-directory li > a, .seo-route-directory li.seo-route-row, .seo-related-routes li > a { min-height: 44px; }
  .seo-content { padding-top: 20px; }
  .seo-hero { margin-top: 20px; border-radius: 21px; }
  .seo-fare-row { grid-template-columns: 1fr; gap: 13px; }
  .seo-route-insight, .seo-route-guidance, .seo-related-routes, .seo-faq, .seo-route-directory { margin-top: 28px; padding-top: 22px; }
  .seo-route-directory li > a, .seo-route-directory li.seo-route-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 13px 12px; }
  .seo-route-list-month { grid-column: 1 / 3; }
  .seo-home-link-grid { grid-template-columns: 1fr; }
}
.seo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; }
.seo-facts > div { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(46, 26, 71, .1); }
.seo-facts dt { color: rgba(46, 26, 71, .66); font-size: 12px; font-weight: 700; }
.seo-facts dd { margin: 4px 0 0; color: #2e1a47; font-size: 15px; font-weight: 700; }

/* Hand-written route notes (update 28) */
.seo-route-note { margin: 18px 0; padding: 18px 20px; border: 1px solid rgba(46,26,71,.12); border-radius: 18px; background: #fffdfb; }
.seo-route-note h2 { margin: 0 0 10px; font-size: 20px; }
.seo-route-note-list { display: grid; gap: 12px; margin: 0; padding: 0; }
.seo-route-note-list div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; }
.seo-route-note-list dt { margin: 0; font-size: 13px; font-weight: 700; color: #8a4a3b; }
.seo-route-note-list dd { margin: 0; font-size: 15px; line-height: 1.6; color: #2e1a47; }
.seo-route-note-sources { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #5b5069; }
.seo-route-note-sources a { color: #2e1a47; }
@media (max-width: 520px) { .seo-route-note-list div { grid-template-columns: 1fr; gap: 3px; } }

/* Update 81: the route directory is grouped by departure city, and route pages list more routes from the same city. */
.seo-more-routes { margin-top: 38px; padding-top: 28px; border-top: 1px solid #ebe6ef; }
.seo-more-routes h2 { margin: 0 0 12px; color: #2e1a47; font-size: clamp(22px, 4vw, 30px); letter-spacing: -.025em; line-height: 1.2; }
.seo-more-routes ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.seo-more-routes li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; min-height: 44px; padding: 11px 15px; border: 1px solid #e9e4eb; border-radius: 13px; background: #fff; }
.seo-more-routes li a { color: #49365d; font-weight: 700; text-decoration: none; }
.seo-more-routes li span { color: #2e1a47; font-size: 13px; font-weight: 750; }
.seo-route-directory .seo-route-origins ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 6px; }
.seo-route-directory .seo-route-origins li { border-radius: 999px; }
.seo-route-directory .seo-route-origins li > a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 15px; color: #49365d; font-size: 14px; font-weight: 700; text-decoration: none; }
.seo-route-directory .seo-route-origins li > a span { color: #6f6777; font-weight: 500; }
.seo-route-group { margin-top: 30px; scroll-margin-top: 16px; }
.seo-route-group h3 { margin: 0; color: #2e1a47; font-size: clamp(19px, 3.4vw, 23px); line-height: 1.3; }
.seo-route-group ul { margin-top: 14px; }

/* Update 82: destination photo, cheapest days chart and price alert card on route pages. */
.seo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.seo-route-photo { margin: 22px 0 0; }
.seo-route-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 24px; background: #efe8f0; }
.seo-route-photo figcaption { margin-top: 8px; color: #6f6777; font-size: 12px; line-height: 1.6; }
.seo-route-photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 650px) { .seo-route-photo img { aspect-ratio: 4 / 3; border-radius: 18px; } }

.seo-days-chart { margin-top: 44px; padding: 22px; border: 1px solid #e9e4eb; border-radius: 20px; background: #fff; }
.seo-days-chart h2 { margin: 0; color: #2e1a47; font-size: clamp(23px, 4vw, 32px); letter-spacing: -.03em; }
.seo-days-summary { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #332243; font-size: 14px; font-weight: 650; }
.seo-days-key { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--seo-coral); }
.seo-days-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin: 34px 0 0; padding: 0; list-style: none; border-bottom: 1px solid #d9d1dc; }
.seo-days-bar { position: relative; display: flex; align-items: flex-end; flex: 1 1 0; min-width: 0; height: 100%; }
.seo-days-fill { position: relative; display: block; width: 100%; height: var(--bar); border-radius: 3px 3px 0 0; background: var(--seo-plum); }
.seo-days-bar-lowest .seo-days-fill { background: var(--seo-coral); }
.seo-days-bar-empty { height: 100%; }
.seo-days-price { position: absolute; top: -26px; color: var(--seo-coral-text); font-size: 13px; font-weight: 800; white-space: nowrap; unicode-bidi: isolate; }
.seo-days-bar-lowest::before { position: absolute; top: -6px; bottom: var(--bar); inset-inline-start: 50%; border-inline-start: 1px dashed var(--seo-coral); content: ""; }
.seo-days-price-start { inset-inline-start: 0; }
.seo-days-price-end { inset-inline-end: 0; }
.seo-days-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #6f6777; font-size: 12px; }
.seo-days-chart .seo-note { margin-top: 14px; }

.seo-alert-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; padding: 22px; border: 1px solid rgba(46,26,71,.12); border-radius: 20px; background: #f6f0f8; }
.seo-alert-card h2 { margin: 0; color: #2e1a47; font-size: 20px; letter-spacing: -.02em; }
.seo-alert-card p { margin: 6px 0 0; color: #4f4459; font-size: 15px; line-height: 1.6; }
.seo-alert-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 13px; background: var(--seo-plum); color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; }
.seo-alert-button:hover { background: var(--seo-plum-hover); }
@media (max-width: 520px) { .seo-alert-button { width: 100%; } }

/* Update 83: Arabic letters join, so letter-spacing pulls Arabic words apart. */
:lang(ar) { letter-spacing: 0 !important; }

/* Update 91: fuller route notes (time difference, entry, our pages, sources), the guide link and the site footer on server pages. */
.seo-route-note h3 { margin: 18px 0 8px; font-size: 16px; color: #2e1a47; }
.seo-route-note-entry, .seo-route-note-links, .seo-route-note-sources { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.seo-route-note-entry li, .seo-route-note-links li { font-size: 15px; line-height: 1.6; color: #2e1a47; }
.seo-route-note-links a { color: #2e1a47; font-weight: 700; }
.seo-route-note-sources li { font-size: 14px; line-height: 1.6; }
.seo-full-guide { margin: 12px 0; }
/* Update 92: "Before you fly" box on route pages. */
.seo-before-fly { margin: 18px 0; padding: 16px 20px; border: 1px solid rgba(46,26,71,.12); border-radius: 18px; background: #fff; }
.seo-before-fly h2 { margin: 0 0 8px; font-size: 18px; color: #2e1a47; }
.seo-before-fly ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-before-fly a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(46,26,71,.18); border-radius: 999px; background: #fff; color: #2e1a47; font-weight: 700; text-decoration: none; }
.seo-footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; width: 100%; }
@media (max-width: 520px) { .seo-footer-links { gap: 0 18px; } }

/* Update 93: who keeps the page, and the routes hub date. */
.seo-checked-by { margin: 10px 0 16px; font-size: 14px; line-height: 1.6; color: #5b5069; }
.seo-checked-by a { color: #2e1a47; font-weight: 700; }
.blog-index-updated { margin: 8px 0 0; font-size: 14px; color: #5b5069; }