/* ==========================================================================

   GLOBAL ZERO-FLICKER & INSTANT VIEW TRANSITION STYLES

   ========================================================================== */

*, *::before, *::after {

  -webkit-tap-highlight-color: transparent !important;

}



html {

  background-color: #071A2B;

}



body {

  background-color: #F8FAFC;

}



@keyframes fgFadeOut {

  from { opacity: 1; }

  to { opacity: 0; }

}



@keyframes fgFadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@view-transition {

  navigation: auto;

}



::view-transition-old(root) {

  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fgFadeOut;

}



::view-transition-new(root) {

  animation: 120ms cubic-bezier(0, 0, 0.2, 1) both fgFadeIn;

}



/* ==========================================================================

   FAREGRAM PIXEL-PRECISE APP-STYLE DESIGN SYSTEM (2026)

   Matching the approved concept reference down to every single pixel & proportion

   ========================================================================== */



:root {

  --fg-midnight: #071F33;

  --fg-blue: #0078F3;

  --fg-blue-active: #006CE0;

  --fg-yellow-btn: #FAB915;

  --fg-yellow-hover: #EAA809;

  --fg-sky-bg: #E8F4FC;

  --fg-cloud-card: #FFFFFF;

  --fg-border-card: #E5EEF5;

  --fg-border-box: #E6EDF2;

  --fg-text-title: #081B2B;

  --fg-text-slate: #546574;

  --fg-text-muted: #8091A0;

  --fg-red-badge: #E32636;

}



/* Base Body & Shell Reset */

body.fg-app-body {

  background-color: #F0F6FB;

  margin: 0;

  padding: 0;

  color: var(--fg-text-title);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  -webkit-font-smoothing: antialiased;

  min-height: 100vh;

}



body.fg-drawer-locked {

  overflow: hidden !important;

  touch-action: none;

}



.fg-app-viewport-wrapper {

  max-width: 480px;

  margin: 0 auto;

  background: #F0F6FB;

  min-height: 100vh;

  position: relative;

  box-shadow: 0 0 50px rgba(7, 31, 51, 0.08);

}



@media (min-width: 768px) {

  .fg-app-viewport-wrapper {

    max-width: 100%;

    box-shadow: none;

    background: transparent;

  }

  .fg-app-content-container {

    max-width: 1160px;

    margin: 0 auto;

  }

}



/* 1. Header (72px height, exact 44x44 touch targets, balanced icons) */

.fg-app-header-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 72px;

  padding: 0 16px;

  background: transparent;

  position: relative;

  z-index: 20;

}



.fg-header-menu-btn {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  cursor: pointer;

  color: #172B4D;

  padding: 0;

  border-radius: 8px;

  transition: background-color 0.15s ease;

}



.fg-header-menu-btn:hover,

.fg-header-menu-btn:focus-visible {

  background-color: rgba(7, 31, 51, 0.06);

  outline: none;

}



.fg-header-left-cluster {

  display: flex;

  align-items: center;

  gap: 14px; /* Generous, comfortable distance between menubar and logo */

}



.fg-header-logo-group {

  display: flex;

  flex-direction: column;

  justify-content: center;

  margin-left: 0 !important;

  padding-left: 0 !important;

}



.fg-header-logo-brand {

  font-size: 24px;

  font-weight: 800;

  letter-spacing: -0.03em;

  color: var(--fg-blue, #0878F9) !important;

  line-height: 1.1;

  text-decoration: none;

}



.fg-header-logo-brand span {

  color: var(--fg-midnight, #071F33) !important;

}



.fg-header-tagline {

  font-size: 11.5px;

  font-weight: 500;

  color: var(--fg-text-slate);

  letter-spacing: -0.01em;

}



.fg-header-right-group {

  display: flex;

  align-items: center;

  gap: 12px;

}



.fg-header-bell-btn {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  cursor: pointer;

  color: #172B4D;

  position: relative;

  padding: 0;

  border-radius: 8px;

}



.fg-header-bell-badge {

  position: absolute;

  top: 6px;

  right: 6px;

  background: var(--fg-red-badge);

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

}



.fg-header-avatar-circle {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #476685;

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  box-shadow: 0 2px 6px rgba(7, 31, 51, 0.12);

}



/* 2. Hero Area (Dynamic Atmospheric Travel Banner, Mountains, Clouds & Aircraft Wing) */

.fg-app-hero-container,

.fg-dynamic-travel-hero {

  padding: 14px 16px 16px;

  position: relative;

  min-height: 154px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  overflow: hidden;

  background-color: #EAF2F8; /* Soft Faregram sky fallback */

}



.fg-hero-artwork-layer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

  pointer-events: none;

  overflow: hidden;

}



.fg-hero-banner-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: right 30%;

  display: block;

}



/* Atmospheric scrim gradient protecting text contrast on the left while preserving aircraft wing on the right */

.fg-hero-overlay-scrim {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(

    90deg,

    rgba(245, 248, 252, 0.98) 0%,

    rgba(245, 248, 252, 0.92) 38%,

    rgba(245, 248, 252, 0.45) 68%,

    rgba(245, 248, 252, 0.08) 100%

  );

  pointer-events: none;

}



.fg-hero-content-container {

  position: relative;

  z-index: 5;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



.fg-hero-left-column {

  max-width: 76%;

}



/* Contextual Notification Pill */

.fg-hero-context-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 3px 10px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(0, 120, 243, 0.18);

  box-shadow: 0 2px 6px rgba(7, 31, 51, 0.04);

  font-size: 12px;

  font-weight: 650;

  color: #071F33;

  margin-bottom: 6px;

  line-height: 1.3;

}



.fg-hero-type-critical .fg-hero-context-badge {

  border-color: rgba(220, 53, 69, 0.35);

  background: rgba(255, 245, 245, 0.95);

  color: #B02A37;

}



.fg-hero-type-warning .fg-hero-context-badge {

  border-color: rgba(255, 193, 7, 0.45);

  background: rgba(255, 251, 235, 0.95);

  color: #856404;

}



.fg-hero-type-emergency .fg-hero-context-badge {

  border-color: rgba(220, 53, 69, 0.5);

  background: #FFF0F1;

  color: #A30014;

}



.fg-hero-badge-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.fg-hero-badge-divider {

  color: #94A3B8;

}



.fg-hero-badge-status {

  font-weight: 500;

  color: #64748B;

}



.fg-hero-type-critical .fg-hero-badge-status {

  color: #DC3545;

  font-weight: 700;

}



/* Dynamic Primary Headline */

.fg-hero-headline,

.fg-hero-greeting-title {

  font-size: 32px;

  font-weight: 800;

  letter-spacing: -0.035em;

  color: #071F33;

  margin: 0 0 4px;

  line-height: 1.15;

}



/* Dynamic Supporting Message */

.fg-hero-supporting-message,

.fg-hero-greeting-sub {

  font-size: 17.5px;

  font-weight: 500;

  color: #4A6072;

  margin: 0;

  line-height: 1.25;

}



.fg-hero-alert-subtext {

  font-size: 12.5px;

  color: #64748B;

  margin: 4px 0 0;

  line-height: 1.3;

}



/* Hero Actions Row */

.fg-hero-actions-row {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 10px;

  flex-wrap: wrap;

}



.fg-hero-btn-primary {

  background: var(--fg-blue);

  color: #FFFFFF !important;

  font-size: 13px;

  font-weight: 700;

  padding: 8px 16px;

  border-radius: 20px;

  text-decoration: none;

  min-height: 38px;

  display: inline-flex;

  align-items: center;

  box-shadow: 0 2px 8px rgba(0, 120, 243, 0.25);

  transition: transform 0.15s ease, background-color 0.15s ease;

}



.fg-hero-btn-primary:hover {

  background: #0060C4;

  transform: translateY(-1px);

}



.fg-hero-btn-secondary {

  background: rgba(255, 255, 255, 0.85);

  color: #071F33 !important;

  border: 1px solid #CFD9E0;

  font-size: 13px;

  font-weight: 600;

  padding: 8px 14px;

  border-radius: 20px;

  text-decoration: none;

  min-height: 38px;

  display: inline-flex;

  align-items: center;

  transition: background-color 0.15s ease;

}



.fg-hero-btn-secondary:hover {

  background: #FFFFFF;

}



/* 3. Contextual Slogan Area (Right Side Cursive Script) */

.fg-hero-slogan-area {

  position: relative;

  z-index: 5;

  text-align: right;

  padding-right: 4px;

  pointer-events: none;

  margin-top: -2px;

}



.fg-hero-cursive-slogan {

  font-family: 'Segoe Script', 'Brush Script MT', cursive, sans-serif;

  font-size: 15px;

  line-height: 1.15;

  color: #2F6496;

  opacity: 0.88;

  display: block;

  white-space: pre-line;

  letter-spacing: -0.01em;

}



@media (max-width: 480px) {

  .fg-hero-slogan-area {

    display: none !important; /* Hide on compact mobile screens to prevent overlapping */

  }

  .fg-hero-left-column {

    max-width: 88%;

  }

  .fg-hero-headline,

  .fg-hero-greeting-title {

    font-size: 29px;

  }

  .fg-hero-supporting-message,

  .fg-hero-greeting-sub {

    font-size: 16px;

  }

}



/* 3. Service Navigation Bar (White container, 92px, 24px icons, 12.5px labels) */

.fg-app-services-container {

  margin: 0 16px 16px;

  background: #FFFFFF;

  border-radius: 22px;

  padding: 10px 8px;

  box-shadow: 0 4px 18px rgba(7, 31, 51, 0.05);

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  align-items: center;

  text-align: center;

  min-height: 92px;

}



.fg-app-service-tile {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 10px 4px;

  border-radius: 16px;

  text-decoration: none;

  color: #556877;

  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  min-height: 72px;

  border: none;

  background: transparent;

  cursor: pointer;

}



.fg-app-service-tile.active {

  background: var(--fg-blue);

  color: #FFFFFF;

  box-shadow: 0 3px 10px rgba(0, 120, 243, 0.25);

}



.fg-service-tile-icon {

  margin-bottom: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

}



.fg-service-tile-label {

  font-size: 12.5px;

  font-weight: 600;

  line-height: 1.1;

}



/* 4. Active Service Search Card */

.fg-app-search-card {

  margin: 0 16px 20px;

  background: #FFFFFF;

  border-radius: 24px;

  padding: 18px 16px 20px;

  box-shadow: 0 4px 24px rgba(7, 31, 51, 0.06);

  position: relative;

  min-height: 480px;

  transition: min-height 0.2s ease;

}



.fg-service-panel {

  display: block;

}



.fg-service-panel.d-none {

  display: none !important;

}



.fg-service-panel-heading {

  margin-bottom: 16px;

}



.fg-panel-title {

  font-size: 19px;

  font-weight: 800;

  color: #071C2E;

  margin: 0 0 4px;

  letter-spacing: -0.02em;

}



.fg-panel-sub {

  font-size: 13px;

  color: #6C7D8C;

  margin: 0;

}



.fg-panel-input {

  width: 100%;

  border: none;

  font-size: 17px;

  font-weight: 700;

  color: #071C2E;

  background: transparent;

  outline: none;

  padding: 4px 0 0;

}



.fg-panel-input::placeholder {

  color: #9EAFBE;

  font-weight: 500;

  font-size: 15px;

}



.fg-panel-date-input {

  border: none;

  font-size: 15px;

  font-weight: 700;

  color: #071C2E;

  background: transparent;

  outline: none;

  width: 100%;

  padding-top: 4px;

}



.fg-panel-select {

  border: none;

  font-size: 14px;

  font-weight: 700;

  color: #071C2E;

  background: transparent;

  outline: none;

  width: 100%;

  padding: 2px 0 0;

  cursor: pointer;

}



/* More Services Grid in Panel */

.fg-more-services-grid {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 8px;

}



.fg-more-service-card {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  border-radius: 16px;

  border: 1.5px solid var(--fg-border-box);

  text-decoration: none;

  color: inherit;

  transition: all 0.15s ease;

}



.fg-more-service-card:hover {

  border-color: var(--fg-blue);

  background: #F8FBFE;

}



.fg-more-icon-box {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  background: #E8F4FC;

  color: var(--fg-blue);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.fg-more-card-text {

  flex-grow: 1;

}



.fg-more-title {

  font-size: 14.5px;

  font-weight: 700;

  color: #071C2E;

}



.fg-more-desc {

  font-size: 12px;

  color: #7B8C9C;

}



/* Trip Type Segmented Control (One-line 3-Column Grid) */

.fg-segmented-trip-bar {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  background: #F1F5F9;

  border-radius: 16px;

  padding: 4px;

  gap: 4px;

  margin-bottom: 18px;

  min-height: 48px;

  align-items: center;

}



.fg-segment-pill-btn {

  padding: 10px 8px;

  border-radius: 13px;

  border: none;

  background: transparent;

  color: #536474;

  font-size: 13.5px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.15s ease;

  min-height: 40px;

  line-height: 18px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: clip;

  text-align: center;

}



.fg-segment-pill-btn.active {

  background: var(--fg-blue);

  color: #FFFFFF;

  box-shadow: 0 2px 8px rgba(0, 120, 243, 0.22);

}



/* Symmetrical Route Grid (From / Swap / To) */

.fg-precise-route-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);

  align-items: center;

  column-gap: 2px;

  margin-bottom: 14px;

  position: relative;

}



.fg-precise-route-cell {

  background: #FFFFFF;

  border: 1.5px solid var(--fg-border-box);

  border-radius: 16px;

  padding: 13px;

  cursor: pointer;

  min-height: 96px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  position: relative;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.fg-precise-route-cell:hover,

.fg-precise-route-cell:focus-visible {

  border-color: var(--fg-blue);

  outline: none;

  box-shadow: 0 0 0 3px rgba(0, 120, 243, 0.12);

}



.fg-cell-top-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.fg-cell-top-tag {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  font-weight: 600;

  color: #7B8C9C;

}



.fg-cell-clear-x {

  color: #A0B0BF;

  font-size: 16px;

  line-height: 1;

}



.fg-cell-city-title {

  font-size: 21px;

  font-weight: 800;

  color: #071C2E;

  line-height: 1.15;

  margin-top: 4px;

}



.fg-cell-airport-meta {

  font-size: 12.5px;

  font-weight: 500;

  color: #8292A1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-top: 2px;

}



.fg-route-swap-center-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1.5px solid #D6E3EE;

  color: var(--fg-blue);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 8px rgba(7, 31, 51, 0.07);

  cursor: pointer;

  padding: 0;

  z-index: 5;

  margin: 0 auto;

  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;

}



.fg-route-swap-center-btn:hover {

  transform: rotate(180deg);

  background: #F0F7FF;

}



/* Symmetrical Date Grid (104px min height) */

.fg-precise-date-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 14px;

}



.fg-precise-date-cell {

  background: #FFFFFF;

  border: 1.5px solid var(--fg-border-box);

  border-radius: 16px;

  padding: 13px;

  cursor: pointer;

  min-height: 104px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.fg-precise-date-cell:hover,

.fg-precise-date-cell:focus-visible {

  border-color: var(--fg-blue);

  outline: none;

  box-shadow: 0 0 0 3px rgba(0, 120, 243, 0.12);

}



.fg-date-cell-label {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  font-weight: 600;

  color: #7B8C9C;

}



.fg-date-cell-val {

  font-size: 18px;

  font-weight: 800;

  color: #071C2E;

  margin-top: 4px;

  line-height: 1.15;

}



.fg-date-cell-val.blue-prompt {

  color: var(--fg-blue);

}



.fg-date-cell-sub {

  font-size: 12px;

  color: #7E8E9E;

  margin-top: 2px;

  line-height: 1.2;

}



/* Mobile-Readable Preferences: Row 1 Travellers Full Width, Row 2 Cabin & Fare */

.fg-precise-pref-block {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 16px;

}



.fg-precise-pref-subrow {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

}



.fg-precise-pref-cell {

  background: #FFFFFF;

  border: 1.5px solid var(--fg-border-box);

  border-radius: 16px;

  padding: 12px 14px;

  cursor: pointer;

  min-height: 80px;

  display: grid;

  grid-template-columns: 24px minmax(0, 1fr) 20px;

  align-items: center;

  gap: 10px;

  transition: border-color 0.15s ease;

}



.fg-precise-pref-cell.fg-pref-full {

  min-height: 76px;

}



.fg-precise-pref-cell:hover,

.fg-precise-pref-cell:focus-visible {

  border-color: var(--fg-blue);

  outline: none;

}



.fg-pref-icon-col {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #7B8C9C;

}



.fg-pref-content-col {

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

}



.fg-pref-content-label {

  font-size: 11px;

  font-weight: 600;

  color: #8292A1;

  line-height: 1;

}



.fg-pref-content-val {

  font-size: 14px;

  font-weight: 800;

  color: #071C2E;

  margin-top: 3px;

  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.fg-pref-content-sub {

  font-size: 11.5px;

  color: #8292A1;

  margin-top: 2px;

  line-height: 1;

}



.fg-pref-chevron-col {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  color: #A0B0BF;

}



/* Additional Preferences (Checkboxes with 44px touch targets) */

.fg-precise-check-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

  padding: 0 4px;

}



.fg-precise-check-label {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  font-weight: 500;

  color: #4A6072;

  cursor: pointer;

  user-select: none;

  min-height: 44px;

}



.fg-precise-check-label input[type="checkbox"] {

  width: 20px;

  height: 20px;

  accent-color: var(--fg-blue);

  cursor: pointer;

  border-radius: 4px;

}



/* Primary Yellow Search Button (58px high, 15px radius, #FAB915, 3-column optical centering) */

.btn-fg-exact-yellow-search {

  width: 100%;

  height: 58px;

  background: var(--fg-yellow-btn);

  color: #071C2E;

  border: none;

  border-radius: 15px;

  font-size: 17.5px;

  font-weight: 700;

  display: grid;

  grid-template-columns: 24px 1fr 24px;

  align-items: center;

  justify-items: center;

  cursor: pointer;

  box-shadow: 0 4px 14px rgba(250, 185, 21, 0.3);

  transition: all 0.15s ease;

  padding: 0 16px;

  letter-spacing: -0.01em;

}



.btn-fg-exact-yellow-search:hover {

  background: var(--fg-yellow-hover);

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(250, 185, 21, 0.4);

}



.btn-fg-exact-yellow-search:active {

  transform: translateY(0);

}



.fg-search-btn-icon-col,

.fg-search-btn-arrow-col {

  display: flex;

  align-items: center;

  justify-content: center;

}



.fg-search-btn-text-col {

  text-align: center;

}



/* 5. Recent Searches (74px min height cards) */

.fg-app-recent-section {

  padding: 0 16px 24px;

}



.fg-recent-title-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

}



.fg-recent-heading-text {

  font-size: 17.5px;

  font-weight: 800;

  color: #071C2E;

  margin: 0;

}



.fg-recent-viewall-link {

  font-size: 13.5px;

  font-weight: 600;

  color: var(--fg-blue);

  text-decoration: none;

}



.fg-recent-cards-pair {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

}



.fg-exact-recent-card {

  background: #FFFFFF;

  border-radius: 18px;

  padding: 12px 14px;

  border: 1px solid var(--fg-border-card);

  display: flex;

  align-items: center;

  gap: 10px;

  box-shadow: 0 2px 10px rgba(7, 31, 51, 0.03);

  cursor: pointer;

  text-decoration: none;

  color: inherit;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  min-width: 0;

  overflow: hidden;

  min-height: 74px;

}



.fg-exact-recent-card:hover {

  border-color: var(--fg-blue);

  box-shadow: 0 4px 14px rgba(0, 120, 243, 0.1);

}



.fg-recent-icon-disc {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #E8F4FC;

  color: var(--fg-blue);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.fg-recent-card-text-col {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex-grow: 1;

}



.fg-recent-route-strong {

  font-size: 14.5px;

  font-weight: 800;

  color: #071C2E;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.fg-recent-date-span {

  font-size: 12px;

  color: #8292A1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-top: 2px;

}



.fg-recent-chevron {

  color: #A0B0BF;

  flex-shrink: 0;

  display: flex;

  align-items: center;

}



/* 6. Mobile Bottom Navigation Bar (76px high, Plan bubble 56x56) */

.fg-app-fixed-bottom-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 76px;

  background: #FFFFFF;

  border-top: 1px solid #EBF0F5;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  align-items: center;

  z-index: 1030;

  box-shadow: 0 -4px 18px rgba(7, 31, 51, 0.05);

  padding-bottom: env(safe-area-inset-bottom, 0px);

}



@media (min-width: 768px) {

  .fg-app-fixed-bottom-bar {

    display: none !important;

  }

}



.fg-fixed-bottom-nav-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #7C8D9D;

  text-decoration: none;

  font-size: 11.5px;

  font-weight: 600;

  min-height: 48px;

  position: relative;

  border: none;

  background: transparent;

  transition: color 0.15s ease;

}



.fg-fixed-bottom-nav-item.active {

  color: var(--fg-blue);

}



.fg-bottom-icon-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 2px;

}



.fg-fixed-bottom-nav-item.active .fg-bottom-icon-wrap {

  color: var(--fg-blue);

}



.fg-bottom-center-plan-bubble {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: var(--fg-blue);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: -24px;

  border: 4px solid #FFFFFF;

  box-shadow: 0 4px 14px rgba(0, 120, 243, 0.35);

}



.fg-bottom-center-plan-bubble svg {

  color: #FFFFFF;

  stroke: #FFFFFF;

}



.fg-inbox-badge-count {

  position: absolute;

  top: 2px;

  right: 18px;

  background: var(--fg-red-badge);

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  padding: 1px 5px;

  border-radius: 999px;

  border: 1.5px solid #fff;

}



/* 7. Slide-out Navigation Drawer & Backdrop */

.fg-drawer-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(7, 31, 51, 0.52);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

  z-index: 2000;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}



.fg-drawer-backdrop.is-open {

  opacity: 1;

  pointer-events: auto;

}



.fg-drawer {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: min(88vw, 360px);

  max-width: 380px;

  height: 100vh;

  height: 100dvh;

  background: #FFFFFF;

  z-index: 2010;

  transform: translateX(-100%);

  visibility: hidden;

  pointer-events: none;

  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;

  display: flex;

  flex-direction: column;

  box-shadow: 10px 0 35px rgba(7, 31, 51, 0.18);

}



@media (min-width: 768px) {

  .fg-drawer {

    max-width: 420px;

  }

}



@media (min-width: 1024px) {

  .fg-drawer,

  .fg-drawer-backdrop {

    display: none !important;

  }

}



.fg-drawer.is-open {

  transform: translateX(0);

  visibility: visible;

  pointer-events: auto;

}



.fg-drawer-header {

  padding: 18px 18px 14px;

  border-bottom: 1px solid #EEF2F6;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.fg-drawer-brand {

  font-size: 20px;

  font-weight: 800;

  letter-spacing: -0.03em;

  color: var(--fg-midnight);

}



.fg-drawer-brand span {

  color: var(--fg-blue);

}



.fg-drawer-brand small {

  display: block;

  font-size: 11px;

  font-weight: 500;

  color: #7B8C9C;

  letter-spacing: 0;

  margin-top: 1px;

}



.fg-drawer-close-btn {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  cursor: pointer;

  color: #556877;

  border-radius: 50%;

  padding: 0;

}



.fg-drawer-close-btn:hover {

  background: #F0F6FB;

  color: #071C2E;

}



.fg-drawer-quick-services {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  padding: 14px 16px;

  border-bottom: 1px solid #EEF2F6;

  background: #FAFBFD;

}



.fg-drawer-service-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 8px 4px;

  border-radius: 12px;

  text-decoration: none;

  color: #556877;

  font-size: 11.5px;

  font-weight: 600;

  background: #FFFFFF;

  border: 1px solid #E9EFF5;

  transition: all 0.15s ease;

}



.fg-drawer-service-btn:hover,

.fg-drawer-service-btn.active {

  border-color: var(--fg-blue);

  color: var(--fg-blue);

  background: #F0F7FF;

}



.fg-drawer-service-icon {

  margin-bottom: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--fg-blue);

}



.fg-drawer-nav {

  padding: 12px 14px 30px;

  overflow-y: auto;

  flex-grow: 1;

}



.fg-drawer-section-title {

  font-size: 10.5px;

  font-weight: 700;

  color: #94A3B3;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 10px 10px 4px;

}



.fg-drawer-link {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  border-radius: 10px;

  text-decoration: none;

  color: #2D3E4E;

  font-size: 14px;

  font-weight: 600;

  transition: background-color 0.15s ease, color 0.15s ease;

  min-height: 44px;

}



.fg-drawer-link:hover,

.fg-drawer-link:focus-visible {

  background-color: #F0F6FB;

  color: var(--fg-blue);

  outline: none;

}



.fg-drawer-link.active {

  background-color: #EFF6FF;

  color: #0878F9;

  font-weight: 700;

}



.fg-drawer-collapse-toggle {

  cursor: pointer;

  color: #475569;

}



.fg-drawer-submenu {

  background: #F8FAFC;

  border-radius: 12px;

  margin: 4px 0 10px;

  padding: 4px 6px;

  border: 1px solid #E2E8F0;

}



.fg-drawer-link.fg-sublink {

  font-size: 13px;

  font-weight: 600;

  min-height: 40px;

  padding: 8px 12px;

  color: #475569;

}



.fg-drawer-link.fg-sublink:hover {

  color: #0878F9;

  background: #FFFFFF;

}



.fg-chevron-transition {

  transition: transform 0.2s ease;

}



[aria-expanded="true"] .fg-chevron-transition {

  transform: rotate(180deg);

}



.fg-drawer-account-footer {

  padding: 14px 18px;

  background: #FFFFFF;

  border-top: 1px solid #EEF2F6;

  flex-shrink: 0;

  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

}



.fg-drawer-user-avatar {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: #0878F9;

  color: #FFFFFF;

  font-size: 15px;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



/* Bottom spacing so content is never obscured */

.fg-app-scroll-content {

  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));

}



/* ==========================================================================

   MODAL BOTTOM SHEET STYLING (Matching User Screenshots)

   ========================================================================== */

.fg-modal-sheet .modal-content {

  border-radius: 24px;

  border: none;

  box-shadow: 0 10px 40px rgba(7, 31, 51, 0.2);

  padding: 10px 14px 16px;

}



@media (max-width: 767px) {

  .fg-modal-sheet .modal-dialog {

    margin: 0;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    max-width: 100%;

  }

  .fg-modal-sheet .modal-content {

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    max-height: 90vh;

    overflow-y: auto;

  }

}



.fg-sheet-card-option {

  border: 1.5px solid var(--fg-border-box);

  border-radius: 16px;

  padding: 14px 16px;

  background: #FFFFFF;

  cursor: pointer;

  transition: all 0.15s ease;

}



.fg-sheet-card-option:hover {

  border-color: var(--fg-blue);

  background: #F8FBFE;

}



.fg-sheet-card-option.active {

  border-color: var(--fg-blue);

  background: #F0F7FF;

}



.fg-sheet-icon-box {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  background: #F1F5F9;

  color: #556877;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.fg-sheet-icon-box.active {

  background: var(--fg-blue);

  color: #FFFFFF;

}



.fg-sheet-radio-circle {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  border: 2px solid #CBD5E1;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  margin-top: 4px;

}



.fg-sheet-radio-circle.active {

  border-color: var(--fg-blue);

  background: #FFFFFF;

}



.fg-sheet-radio-circle.active::after {

  content: '';

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--fg-blue);

}



.fg-sheet-feature-list {

  list-style: none;

  padding-left: 0;

  margin: 0;

}



.fg-sheet-feature-list li {

  position: relative;

  padding-left: 14px;

  font-size: 12px;

  color: #5A6D7E;

  line-height: 1.4;

  margin-bottom: 2px;

}



.fg-sheet-feature-list li::before {

  content: '•';

  position: absolute;

  left: 0;

  color: var(--fg-blue);

  font-size: 14px;

}



.fg-app-counter-btn {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  border: 1.5px solid var(--fg-border-box);

  background: #FFFFFF;

  color: #071C2E;

  font-weight: 700;

  font-size: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.15s ease;

}



.fg-app-counter-btn:hover {

  border-color: var(--fg-blue);

  background: #F0F7FF;

  color: var(--fg-blue);

}



.fg-app-counter-val {

  min-width: 24px;

  text-align: center;

  font-weight: 800;

  font-size: 16px;

  color: #071C2E;

}





/* ==========================================================================

   APP-STYLE CONTINUOUS VERTICAL CALENDAR STYLES (FARE-CENTRIC, 44PX TARGETS)

   ========================================================================== */



.fg-calendar-sheet-content {

  border-radius: 20px 20px 0 0 !important;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



@media (min-width: 768px) {

  .fg-calendar-sheet-content {

    border-radius: 20px !important;

    max-height: 85vh;

  }

}



.fg-cal-scroll-body {

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  max-height: 58vh;

  background-color: #fafbfc;

}



/* Route context & Trip Mode Pill */

.fg-cal-route-context {

  font-size: 13px;

  font-weight: 500;

  color: #4b5563;

}



.fg-cal-trip-mode-pill {

  border: 1px solid #e5e7eb;

}



/* Selected Dates Summary Strip */

.fg-cal-selection-strip {

  display: flex;

  gap: 8px;

}



.fg-cal-strip-box {

  background: #ffffff;

  border: 1.5px solid #e5e7eb;

  border-radius: 12px;

  padding: 8px 12px;

  display: flex;

  flex-direction: column;

  cursor: pointer;

  transition: all 0.2s ease;

}



.fg-cal-strip-box.active {

  border-color: #0066cc;

  background-color: #f0f7ff;

}



.fg-cal-strip-label {

  font-size: 11px;

  font-weight: 700;

  color: #6b7280;

  display: flex;

  align-items: center;

  gap: 4px;

  text-transform: uppercase;

}



.fg-cal-strip-box.active .fg-cal-strip-label {

  color: #0066cc;

}



.fg-cal-strip-val {

  font-size: 15px;

  font-weight: 700;

  color: #111827;

  line-height: 1.25;

  margin-top: 2px;

}



.fg-cal-strip-sub {

  font-size: 11.5px;

  color: #6b7280;

}



/* Day of Week Header Grid */

.fg-cal-weekday-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  text-align: center;

  padding-bottom: 6px;

  border-bottom: 1px solid #e5e7eb;

}



.fg-weekday-head {

  font-size: 12px;

  font-weight: 700;

  color: #9ca3af;

  text-transform: uppercase;

}



/* Month Section */

.fg-cal-month-section {

  margin-bottom: 24px;

}



.fg-cal-month-title {

  font-size: 15px;

  font-weight: 700;

  color: #1f2937;

  margin-bottom: 12px;

  padding-left: 4px;

}



/* 7-Column Days Grid */

.fg-cal-days-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  row-gap: 4px;

}



/* Individual Day Cell & Target */

.fg-cal-day-cell {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 46px;

  padding: 0;

}



.fg-cal-day-btn {

  width: 42px;

  height: 42px;

  min-width: 42px;

  min-height: 42px;

  border-radius: 50%;

  border: none;

  background: transparent;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 14.5px;

  font-weight: 600;

  color: #1f2937;

  cursor: pointer;

  position: relative;

  z-index: 2;

  transition: all 0.15s ease-in-out;

  padding: 0;

  margin: 0;

}



.fg-cal-day-btn:hover:not(:disabled) {

  background-color: #e0f2fe;

  color: #0284c7;

}



.fg-cal-day-btn:focus-visible {

  outline: 2px solid #0066cc;

  outline-offset: 2px;

}



/* Disabled dates (past or beyond 365 days) */

.fg-cal-day-btn:disabled,

.fg-cal-day-btn.disabled {

  color: #d1d5db !important;

  cursor: not-allowed;

  background: transparent !important;

  pointer-events: none;

}



/* Today indicator */

.fg-cal-day-btn.is-today:not(.is-selected-depart):not(.is-selected-return) {

  border: 1.5px solid #0066cc;

  font-weight: 700;

  color: #0066cc;

}



/* Selected departure */

.fg-cal-day-btn.is-selected-depart {

  background-color: #0066cc !important;

  color: #ffffff !important;

  font-weight: 700;

  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.35);

}



/* Selected return */

.fg-cal-day-btn.is-selected-return {

  background-color: #0066cc !important;

  color: #ffffff !important;

  font-weight: 700;

  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.35);

}



/* In-range highlight for roundtrip connector */

.fg-cal-day-cell.is-in-range {

  background-color: #e0f2fe;

}



.fg-cal-day-cell.range-start {

  border-top-left-radius: 50%;

  border-bottom-left-radius: 50%;

  background: linear-gradient(to right, transparent 50%, #e0f2fe 50%);

}



.fg-cal-day-cell.range-end {

  border-top-right-radius: 50%;

  border-bottom-right-radius: 50%;

  background: linear-gradient(to left, transparent 50%, #e0f2fe 50%);

}



.fg-cal-day-cell.range-single {

  background: transparent !important;

}



/* Empty filler cells */

.fg-cal-day-cell.is-empty {

  pointer-events: none;

}



/* Booking window boundary note */

.fg-cal-end-notice {

  text-align: center;

  padding: 16px;

  margin-top: 12px;

  background-color: #f3f4f6;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 500;

  color: #4b5563;

}





/* ==========================================================================

   HIGH-END APP-STYLE AIRPORT / CITY AUTOCOMPLETE MODAL

   ========================================================================== */



#modalAirportPicker .modal-dialog {

  margin: auto;

}



@media (max-width: 767.98px) {

  #modalAirportPicker.modal.fade .modal-dialog {

    transform: translateY(100%);

    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    margin: 0;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    max-width: 100%;

  }



  #modalAirportPicker.modal.show .modal-dialog {

    transform: translateY(0);

  }



  #modalAirportPicker .modal-content {

    border-radius: 24px 24px 0 0 !important;

    border: none;

    max-height: 85vh;

    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);

  }

}



.fg-app-airport-item {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 12px 16px !important;

  border-radius: 12px !important;

  cursor: pointer !important;

  transition: all 0.15s ease !important;

  min-height: 54px !important;

  margin-bottom: 4px !important;

  background-color: #ffffff !important;

  border: 1px solid #f3f4f6 !important;

}



.fg-app-airport-item:hover,

.fg-app-airport-item:focus-visible,

.fg-app-airport-item.selected {

  background-color: #f0f7ff !important;

  border-color: #0066cc !important;

  outline: none !important;

}



.fg-airport-city-tag {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #111827 !important;

  line-height: 1.25 !important;

}



.fg-airport-name-tag {

  font-size: 12px !important;

  color: #6b7280 !important;

  margin-top: 2px !important;

}



.fg-airport-iata-badge {

  font-size: 13.5px !important;

  font-weight: 800 !important;

  color: #0066cc !important;

  background-color: #e0f2fe !important;

  padding: 4px 10px !important;

  border-radius: 8px !important;

  letter-spacing: 0.5px !important;

  min-width: 46px !important;

  text-align: center !important;

}



/* HIGH-END CALENDAR GRID PERFECTION */

.fg-cal-days-grid {

  display: grid !important;

  grid-template-columns: repeat(7, 1fr) !important;

  gap: 2px !important;

}



.fg-cal-weekday-grid {

  display: grid !important;

  grid-template-columns: repeat(7, 1fr) !important;

  text-align: center !important;

  padding: 8px 0 !important;

  border-bottom: 1px solid #e5e7eb !important;

}



.fg-weekday-head {

  font-size: 12px !important;

  font-weight: 700 !important;

  color: #9ca3af !important;

  text-transform: uppercase !important;

  text-align: center !important;

}



.fg-cal-day-cell {

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 44px !important;

  width: 100% !important;

}



.fg-cal-day-btn {

  width: 38px !important;

  height: 38px !important;

  min-width: 38px !important;

  min-height: 38px !important;

  border-radius: 50% !important;

  border: none !important;

  background: transparent !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  color: #1f2937 !important;

  cursor: pointer !important;

  transition: all 0.15s ease !important;

}



.fg-cal-day-btn:hover:not(:disabled) {

  background-color: #e0f2fe !important;

  color: #0284c7 !important;

}



.fg-cal-day-btn.is-selected-depart,

.fg-cal-day-btn.is-selected-return {

  background-color: #0066cc !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.35) !important;

}



.fg-cal-day-btn:disabled {

  color: #d1d5db !important;

  cursor: not-allowed !important;

  pointer-events: none !important;

}



/* Unified Mobile Header Bar Symmetry & Spacing across all pages */

@media (max-width: 991.98px) {

  .fg-header-main {

    height: 72px !important;

    min-height: 72px !important;

    background: #FFFFFF !important;

    border-bottom: 1px solid #E2E8F0 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

  }

  .fg-header-inner {

    height: 72px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

  }

  .fg-header-left-cluster {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

  }

  .fg-header-logo-group {

    margin-left: 0 !important;

    padding-left: 0 !important;

  }

}