/* Order tracking page (status.html). Loaded after tokens.css, base.css, components.css. Owner: task D.
   Redesign (P, 7.11): docs/design/mockups/mockup-status-footer.webp (top part) + docs/design/mockup-status.md.
   Sky opening with the statue (left) and the flag (right), a navy pill, a huge title with a red swoosh,
   a white two-column card (form | illustration), the result under the card, then the three-item strip. */

/* The sky and the two side pictures come from page-hero.css (.sky-page + .sky-deco, the same as contact,
   about and reviews; design review 11). body:has(> .sky-page) there also runs the sky into the footer wave. */
.status-page { padding-block: var(--space-6) var(--space-7); }
@media (max-width: 767.98px) {
  .status-page { padding-top: var(--space-5); }
}

.status-wrap { display: grid; gap: var(--space-5); justify-items: center; }
.status-wrap > * { width: 100%; max-width: 880px; }
.status-wrap > .status-perks { max-width: 1000px; }
.status-wrap .alert { margin: 0; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; letter-spacing: .03em; }
.small { font-size: .9rem; }

/* ---------- Opening ---------- */
.status-head { display: grid; justify-items: center; text-align: center; gap: var(--space-3); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--navy-grad);
  color: var(--white);
  font-weight: 500;
  font-size: .98rem;
  box-shadow: 0 6px 16px rgba(11, 42, 91, .22);
}
.status-pill svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 640px) {
  .status-pill { margin-bottom: var(--space-3); }   /* F2: 12px gap + 12px = ~24px above the title, as in the mockup */
}
.status-title {
  font-size: clamp(2.6rem, 10vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--navy-900);
}
.status-title.title-swoosh::after { width: clamp(96px, 22vw, 150px); height: 13px; margin-top: 4px; }
.status-lead { color: #2C3A55; font-size: 1.12rem; text-wrap: balance; }

/* ---------- The card: form (start) | divider | illustration (end) ---------- */
.status-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  background: var(--white);
  border: 1px solid rgba(15, 63, 140, .07);
  border-radius: var(--radius-card-lg, 24px);
  box-shadow: var(--shadow-soft);
}
.status-form { display: grid; gap: var(--space-1); }
.status-form .field { margin-bottom: var(--space-3); }
.status-form .field__label { font-weight: 700; color: var(--navy-900); }
.status-form .field__hint { font-size: .85rem; }

/* input with an icon cell on the right edge (start in RTL), like the mockup.
   48px and radius 10px like every other field on the site (design review 12). */
.status-input { position: relative; }
.status-input .input {
  height: 48px;
  min-height: 48px;
  padding-right: 58px;              /* physical: the inputs are LTR, the icon is always on the right */
  padding-left: 14px;
  border-radius: var(--radius-field, 10px);
  border-color: #CFDBEB;
  font-size: 1rem;
}
.status-input .input:hover { border-color: var(--blue-300); }
/* A clear focus mark (a11y 8): the shared ring was 1.4:1 here, and the border kept #CFDBEB. */
.status-input .input:focus,
.status-input .input:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(30, 99, 214, .55);
}
.field--error .status-input .input { border-color: var(--red-600); }
.field--error .status-input .input:focus { box-shadow: 0 0 0 3px rgba(215, 38, 61, .35); }
.status-input__icon {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 46px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  border-left: 1px solid #DCE5F1;
  border-radius: 0 9px 9px 0;
  pointer-events: none;
}
.status-input__icon svg { width: 22px; height: 22px; }
.status-form #order-id { text-transform: uppercase; letter-spacing: .04em; }
.status-form #order-id::placeholder, .status-form #family-name::placeholder { text-transform: none; letter-spacing: .02em; color: #687690; opacity: 1; }

.status-submit {
  margin-top: var(--space-2);
  min-height: 58px;
  border-radius: var(--radius-btn, 12px);
  font-size: 1.2rem;
  gap: 12px;
}
.status-submit svg { width: 22px; height: 22px; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .status-submit:hover svg { transform: translateX(-3px); }
}
.status-submit:active { transform: scale(.98); }
.status-submit:disabled { opacity: .7; }

.status-local {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: var(--space-3);
  color: #42506A;
  font-size: .9rem;
  line-height: 1.5;
}
.status-local svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue-700); }

.status-card__art { display: grid; place-items: center; }
.status-card__art svg { width: min(260px, 70%); height: auto; }

/* ---------- Three-item strip ---------- */
.status-perks {
  display: grid;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: 1px solid rgba(15, 63, 140, .07);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-soft);
}
.status-perks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
}
.status-perks li + li { border-top: 1px solid var(--line); }
.status-perks svg { width: 40px; height: 40px; flex: none; color: var(--blue-700); }
.status-perks div { display: grid; gap: 2px; }
.status-perks strong { color: var(--navy-900); font-size: 1.08rem; }
.status-perks span { color: #4A5873; font-size: .93rem; line-height: 1.5; }

/* ---------- Boxes (not found, travelers, timeline) ---------- */
.status-box {
  background: var(--white);
  border: 1px solid rgba(15, 63, 140, .07);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5) var(--space-4);
}
.status-box h3 { font-size: 1.15rem; color: var(--navy-900); margin-bottom: var(--space-3); }
.status-box__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--blue-700);
}
.status-box__icon svg { width: 30px; height: 30px; }

.status-notfound { display: grid; gap: var(--space-4); }
.status-notfound__body { display: grid; gap: var(--space-3); }
.status-notfound h2 { font-size: 1.35rem; color: var(--navy-900); margin: 0; }
.status-notfound p, .status-notfound ul { margin: 0; }
.status-notfound .check-list svg { color: var(--blue-700); }
.status-notfound .btn { justify-self: start; }
.status-notfound:focus, .status-result:focus { outline: none; }

/* ---------- Result ---------- */
.status-result { display: grid; gap: var(--space-4); }
.status-result__grid { display: grid; gap: var(--space-4); align-items: start; }

/* The big status. Tone classes come from customer-view.js (ok / blue / warn / red / muted). */
.status-hero {
  --tone-bg: var(--sky-100);
  --tone-soft: #F4F9FF;
  --tone-ink: var(--blue-700);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(135deg, var(--tone-soft) 0%, var(--white) 70%);
  border: 1px solid rgba(15, 63, 140, .07);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-soft);
}
.status-hero--ok { --tone-bg: #D8F2E2; --tone-soft: #EDF9F1; --tone-ink: #13753F; }
.status-hero--blue { --tone-bg: var(--sky-200); --tone-soft: #EEF5FE; --tone-ink: var(--blue-700); }
.status-hero--warn { --tone-bg: #FCEBC0; --tone-soft: #FFF8E6; --tone-ink: #7F5600; }
.status-hero--red { --tone-bg: #FAD5DA; --tone-soft: #FEF0F2; --tone-ink: #A81B2F; }
.status-hero--muted { --tone-bg: #E3E9F1; --tone-soft: #F3F6FA; --tone-ink: #4D5B74; }
.status-hero__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-ink);
}
.status-hero__icon svg { width: 30px; height: 30px; }
.status-hero__body { display: grid; gap: var(--space-2); min-width: 0; }
.status-hero__meta { margin: 0; color: #4A5873; font-size: .95rem; }
.status-hero__label {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--tone-ink);
}
.status-hero__text { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }

/* Travelers */
.travelers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.traveler {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.traveler:last-child { padding-bottom: 0; border-bottom: 0; }
.traveler p { margin: 0; }
.traveler__name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--navy-900); }
.traveler__num {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: .88rem;
}
.traveler__app { overflow-wrap: anywhere; color: #3E4C66; }
.traveler__app strong { display: inline-block; color: var(--ink); }
.traveler__self { color: #4A5873; }
.traveler__download { gap: 8px; border-radius: var(--radius-btn, 12px); min-height: 52px; }
.traveler__download svg { width: 20px; height: 20px; flex: none; }
.status-travelers .alert { margin-top: var(--space-3); }

/* Timeline: done = navy dot, current = ring + bold, upcoming = hollow grey */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item {
  position: relative;
  display: grid;
  gap: 2px;
  padding-inline-start: 30px;
  padding-bottom: var(--space-4);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid var(--navy-700);
  box-sizing: border-box;
}
.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 22px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--sky-200);
}
.timeline__item--done:not(:last-child)::after { background: #9DBCE8; }
.timeline__item--current::before {
  inset-inline-start: 1px;
  top: 3px;
  width: 20px; height: 20px;
  background: var(--white);
  border: 6px solid var(--blue-700);
  box-shadow: 0 0 0 4px rgba(30, 99, 214, .14);
}
.timeline__item--current .timeline__label { font-weight: 700; color: var(--navy-900); }
.timeline__item--upcoming::before { background: var(--white); border-color: #AEBBD0; }
.timeline__item--upcoming .timeline__label { color: #56647D; }
.timeline__label { font-weight: 500; }
.timeline__when { color: #56647D; font-size: .85rem; }

.status-actions { display: grid; gap: var(--space-3); }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 640px) {
  .traveler__download { justify-self: start; width: auto; }
  .status-actions { display: flex; flex-wrap: wrap; justify-content: center; }
  .status-hero { padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .status-hero__icon { width: 64px; height: 64px; }
  .status-hero__icon svg { width: 34px; height: 34px; }
  .status-box { padding: var(--space-5); }
  .status-notfound { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) var(--space-5); }
}
@media (min-width: 768px) {
  .status-card {
    grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, .85fr);
    gap: var(--space-6);
    padding: var(--space-6) var(--space-7);
  }
  .status-card::before {        /* the thin vertical divider between the form and the illustration */
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    margin-block: var(--space-2);
    background: var(--line);
  }
  .status-form { grid-column: 1; grid-row: 1; }
  .status-card__art { grid-column: 3; grid-row: 1; }
  .status-card__art svg { width: min(270px, 100%); }
  .status-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-3) var(--space-2); }
  .status-perks li { padding: var(--space-3) var(--space-5); justify-content: center; }
  .status-perks li + li { border-top: 0; border-inline-start: 1px solid var(--line); }
}
@media (min-width: 900px) {
  .status-result__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  /* phones: the illustration is a small accent above the form */
  .status-card__art { order: -1; }
  .status-card__art svg { width: 150px; }
}

@media print {
  .status-form, .status-actions, .status-local, .traveler__download, .status-card__art, .status-perks,
  .sky-deco { display: none !important; }
}