/* ==========================================================================
   JETT — Component library (light, photographic, card-led)
   Screen modules compose these; they do not reinvent them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — orange is the conversion path, one primary per screen.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 54px; padding-inline: var(--sp-6);
  border-radius: var(--r-lg);
  font-size: var(--fs-lg); line-height: 1; text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--block { display: flex; width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

.btn--primary { background: var(--jett-orange); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--orange-600); }

.btn--brand { background: var(--jett-navy); color: var(--text-on-brand); box-shadow: var(--shadow-md); }
.btn--brand:hover { background: var(--navy-600); }

.btn--secondary { background: var(--n-100); color: var(--text-1); }
.btn--secondary:hover { background: var(--n-200); }

.btn--outline { background: transparent; border: 1.5px solid var(--hairline-strong); color: var(--text-1); }
.btn--ghost { background: transparent; color: var(--jett-petrol); min-height: 44px; }
.btn--sm { min-height: 42px; font-size: var(--fs-sm); padding-inline: var(--sp-4); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; box-shadow: none; }

/* Circular action button (the reference's calendar "Search"). */
.fab {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--jett-orange); color: #fff;
  box-shadow: var(--shadow-accent);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.fab:active { transform: scale(0.94); }
.fab[disabled] { opacity: 0.35; pointer-events: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   App bar — floats over photography by default
   -------------------------------------------------------------------------- */
.appbar {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--sp-2);
  min-height: 56px; padding: var(--safe-t) var(--sp-2) 0;
  position: relative; z-index: var(--z-header);
}
.appbar--solid {
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.appbar__title { text-align: center; font-size: var(--fs-lg); line-height: 1.2; }
.appbar__sub { display: block; font-size: var(--fs-xs); color: var(--text-3); }

.iconbtn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--text-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--n-100); }
.iconbtn--float {
  background: rgba(255, 255, 255, 0.92); color: var(--jett-navy); box-shadow: var(--shadow-sm);
}
.iconbtn--float:hover { background: #fff; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; border: 1px solid var(--hairline); }
.card--tap { width: 100%; text-align: start; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.card--tap:active { transform: scale(0.99); }
.card--tap:hover { box-shadow: var(--shadow-md); }
.card--selected { box-shadow: 0 0 0 2px var(--jett-orange), var(--shadow-md); }
.card--brand { background: var(--grad-brand); color: var(--text-on-brand); }

/* The white sheet that overlaps the photographic header. */
.sheet-panel {
  position: relative;
  margin-top: calc(var(--sp-8) * -1);
  background: var(--bg-sheet);
  border-radius: var(--r-3xl) var(--r-3xl) 0 0;
  padding: var(--sp-6) var(--gutter) var(--sp-6);
  box-shadow: 0 -12px 32px -18px rgba(11, 59, 78, 0.3);
}

/* --------------------------------------------------------------------------
   Photographic header
   -------------------------------------------------------------------------- */
.photo { position: relative; overflow: hidden; background: var(--navy-700); }
.photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__scrim { position: absolute; inset: 0; background: var(--grad-scrim); }
.photo__content { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.field { display: block; width: 100%; text-align: start; }
.field__label { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 2px; }
.field__control {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-1);
  color: var(--text-1);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field__value { font-size: var(--fs-xl); }
.field__placeholder { color: var(--text-3); }
.field__icon { flex: 0 0 auto; color: var(--jett-petrol); }
.field__error { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--danger-500); }

.field--boxed .field__control {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.field--boxed .field__control:focus-within { border-color: var(--jett-petrol); background: var(--n-000); }
.field__control--invalid { border-color: var(--danger-500) !important; }

input.field__control, textarea.field__control { font-size: var(--fs-lg); }
input::placeholder { color: var(--text-3); }

.searchbox {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: 50px;
  background: var(--surface-sunken); border-radius: var(--r-pill);
  color: var(--text-3);
}
.searchbox input { flex: 1 1 auto; color: var(--text-1); }

/* --------------------------------------------------------------------------
   Swap control — sits on the divider between origin and destination
   -------------------------------------------------------------------------- */
.swapbtn {
  position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--jett-navy); color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.swapbtn:active { transform: translateY(-50%) rotate(180deg); }

/* --------------------------------------------------------------------------
   Floating tab bar
   -------------------------------------------------------------------------- */
.tabbar {
  position: absolute; inset-inline: 0; bottom: 0; z-index: var(--z-tabbar);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: var(--tabbar-h); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--n-000) 88%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
}
.tabbar__btn {
  display: grid; place-items: center; gap: 2px; height: 100%;
  color: var(--text-3); font-size: var(--fs-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}
.tabbar__btn[aria-current="page"] { color: var(--jett-navy); }
.tabbar__center {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-inline: auto; margin-top: -22px;
  border-radius: 50%; background: var(--grad-accent); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(255, 96, 0, 0.62), 0 0 0 6px rgba(255, 96, 0, 0.12);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.tabbar__center:active { transform: scale(0.93); }

/* --------------------------------------------------------------------------
   Segmented control
   -------------------------------------------------------------------------- */
.segmented {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-1); padding: 4px; background: var(--surface-sunken); border-radius: var(--r-pill);
}
.segmented__btn {
  position: relative; z-index: 1; min-height: 40px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2);
  transition: color var(--dur-base) var(--ease-out);
}
.segmented__btn[aria-selected="true"] { color: #fff; }
.segmented__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--r-pill);
  background: var(--jett-navy); box-shadow: var(--shadow-xs);
  transition: inset-inline-start var(--dur-base) var(--ease-spring), width var(--dur-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Chips · badges · scroller
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding-inline: var(--sp-4);
  border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--surface); font-size: var(--fs-sm); color: var(--text-2);
  white-space: nowrap; transition: all var(--dur-fast) var(--ease-out);
}
.chip[aria-pressed="true"] { background: var(--jett-navy); border-color: var(--jett-navy); color: #fff; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); background: var(--n-100); color: var(--text-2);
}
.badge--brand { background: var(--navy-100); color: var(--jett-navy); }
.badge--accent { background: var(--orange-100); color: var(--orange-700); }
.badge--ok { background: rgba(31, 170, 99, 0.12); color: #14804a; }
.badge--glass { background: rgba(255, 255, 255, 0.92); color: var(--jett-navy); box-shadow: var(--shadow-xs); }

.scroller {
  display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none;
  padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x mandatory;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   List rows
   -------------------------------------------------------------------------- */
.listrow {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-2); text-align: start; border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.listrow:hover { background: var(--n-050); }
.listrow + .listrow { border-top: 1px solid var(--hairline); }
.listrow__title { font-size: var(--fs-md); }
.listrow__sub { font-size: var(--fs-xs); color: var(--text-3); }
.listrow__code {
  flex: 0 0 auto; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
  background: var(--navy-100); color: var(--jett-navy); font-size: var(--fs-xs); letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Stepper
   -------------------------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper__btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); color: var(--text-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.stepper__btn:hover:not([disabled]) { background: var(--n-100); }
.stepper__btn[disabled] { opacity: 0.3; pointer-events: none; }
.stepper__value { min-width: 26px; text-align: center; font-size: var(--fs-lg); }

/* --------------------------------------------------------------------------
   Route connector — dotted line with a coach glyph riding it
   -------------------------------------------------------------------------- */
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); }
.route__line {
  position: relative; height: 1px;
  background-image: linear-gradient(to right, var(--n-400) 0 4px, transparent 4px 9px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
}
.route__glyph {
  position: absolute; inset-inline-start: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-sheet); padding-inline: var(--sp-2); color: var(--jett-navy);
}
[dir="rtl"] .route__glyph { transform: translate(50%, -50%); }

/* --------------------------------------------------------------------------
   Fare rows
   -------------------------------------------------------------------------- */
.fare {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2);
}
.fare--total {
  padding-top: var(--sp-3); margin-top: var(--sp-2);
  border-top: 1px dashed var(--hairline-strong);
  font-size: var(--fs-xl); color: var(--text-1);
}

/* --------------------------------------------------------------------------
   Sheet (modal)
   -------------------------------------------------------------------------- */
.sheet-scrim {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 34, 45, 0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--dur-base) var(--ease-out) both;
}
@keyframes sheet-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
.sheet {
  display: flex; flex-direction: column; width: 100%; max-width: var(--app-max-w);
  max-height: 90dvh; background: var(--bg-sheet);
  border-radius: var(--r-3xl) var(--r-3xl) 0 0; box-shadow: var(--shadow-lg);
  animation: sheet-up var(--dur-slow) var(--ease-out) both;
}
.sheet__grip { width: 40px; height: 4px; margin: var(--sp-3) auto var(--sp-1); border-radius: var(--r-pill); background: var(--n-200); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--gutter); }
.sheet__title { font-size: var(--fs-2xl); }
.sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) calc(var(--sp-6) + var(--safe-b)); }
.sheet__foot { padding: var(--sp-3) var(--gutter) calc(var(--sp-4) + var(--safe-b)); border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   Dock — sticky bottom CTA
   -------------------------------------------------------------------------- */
.dock {
  position: sticky; bottom: 0; z-index: var(--z-tabbar);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + var(--safe-b));
  background: color-mix(in srgb, var(--bg-page) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
}
.dock__summary { flex: 0 0 auto; line-height: 1.15; }
.dock__total { font-size: var(--fs-xl); }
.dock .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Empty state · toast · spinner
   -------------------------------------------------------------------------- */
.empty { display: grid; place-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--text-3); }

.toast { position: fixed; inset-inline: 0; bottom: calc(var(--sp-10) + var(--safe-b)); z-index: var(--z-toast); display: flex; justify-content: center; pointer-events: none; padding-inline: var(--gutter); }
.toast__inner {
  max-width: var(--app-max-w); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--jett-navy); color: #fff; box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); animation: fade-in var(--dur-base) var(--ease-out) both;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 800ms linear infinite;
}
.spinner--lg { width: 54px; height: 54px; border-width: 4px; }
.spinner--brand { border-color: var(--n-200); border-top-color: var(--jett-navy); }