/* ==========================================================================
   TRACK ORDER.CSS  —  this page only
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#1D364D;
  --text-color:#3C4B64;
  --page:#F5F8FC;
  --slate:#3A4C63;
  --livid:#9CBED3;
  --stone:#DEDDD5;
  --sand:#C9A176;
  --line:#C9D0D8;
  --r-sm:6px; --r-md:8px;
  --shell:1440px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  margin:0;
  background:var(--page);
  color:var(--text-color);
  font-family:var(--font-secondary);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none}
:focus-visible{outline:2px solid var(--head-color);outline-offset:2px;border-radius:4px}

.wrap{padding:40px var(--gutter)}
h1{margin:0 0 34px;font-size:34px;line-height:1.2;font-weight:400;color:var(--head-color)}
.head-rule{display:none;border:0;border-top:1px solid #CDAF8C;margin:0 0 26px}

.track{
  display:grid;
  grid-template-columns:40% minmax(0,1fr);   /* 40% form / 60% image */
  column-gap:34px;
  align-items:stretch;
}

/* ============ FORM CARD ============ */
.track-form{
  background:var(--slate);
  border-radius:var(--r-md);
  padding:32px;
}
.field+.field{margin-top:22px}
.field label{display:block;margin-bottom:10px;font-size:16px;font-weight:500;color:#fff}
.field input{
  width:100%;height:52px;padding:0 18px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;
  font-size:15px;outline:none;
}
.field input::placeholder{color:rgba(255,255,255,.45)}
.field input:focus{border-color:#fff}
.field.is-bad input{border-color:#F0A9A9}
.err{display:none;margin:8px 0 0;font-size:13px;color:#F0A9A9}
.field.is-bad .err{display:block}

.track-btn{
  width:100%;height:52px;margin-top:28px;border:0;cursor:pointer;
  border-radius:var(--r-sm);
  background:var(--livid);color:var(--head-color);font-size:16px;font-weight:600;
  font-family:inherit;
}
.track-btn:hover{background:#8DB4CC}

/* ==========================================================================
   RIGHT SIDE  —  the shared slot both states live in
   ========================================================================== */
.track-result{
  min-width:0;
  height:100%;                  /* = form card height */
  position:relative;
}

.state{height:100%}
.state.is-hidden{display:none !important}

/* --- state 2: order details card --- */
.details{
  background:var(--stone);
  border-radius:var(--r-md);
  padding:34px 38px;
  height:100%;
  overflow:auto;
}
.details h2{margin:0 0 24px;font-size:26px;font-weight:700;color:var(--head-color)}
.details dl{
  margin:0;display:grid;grid-template-columns:minmax(0,352px) minmax(0,1fr);
  column-gap:24px;row-gap:14px;align-items:start;
}
.details dt{font-size:15px;font-weight:600;color:var(--head-color)}
.details dd{margin:0;font-size:15px;color:var(--head-color)}

/* --- state 1: promo banner --- */
.promo-wrap{
  position:relative;
  margin:0;
  width:100%;
  min-width:0;
  height:100%;
  line-height:0;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#26394F;           /* shows while the image loads */
}
.promo-wrap picture{
  display:block;
  position:absolute;
  inset:0;
}
.promo-wrap .promo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ==========================================================================
   TABLET / MOBILE  —  stacked, natural heights
   ========================================================================== */
@media (max-width:900px){
  .wrap{padding:26px var(--gutter) 48px}
  h1{font-size:22px;margin-bottom:16px}
  .head-rule{display:block}

  .track{grid-template-columns:minmax(0,1fr);row-gap:20px}

  .track-form{padding:22px 20px}
  .field label{font-size:15px;margin-bottom:8px}
  .field input{height:48px;font-size:14px}
  .track-btn{height:48px;margin-top:22px;font-size:15px}

  .track-result{height:auto}
  .state{height:auto}

  .details{height:auto;overflow:visible;padding:24px 20px}
  .details h2{font-size:21px;margin-bottom:18px}
  .details dl{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:16px}
  .details dt,.details dd{font-size:14px}

  .promo-wrap{position:static;height:auto}
  .promo-wrap picture{position:static;inset:auto}
  .promo-wrap .promo-img{height:auto;object-fit:contain}
}

@media (max-width:480px){
  .details dl{grid-template-columns:1fr;row-gap:6px}
  .details dt{margin-top:10px}
}

@media (prefers-reduced-motion:no-preference){
  .track-btn{transition:background-color .15s ease}
}

/*new css for trac order*/
/* ============ MULTI-PRODUCT LIST (Track Order results) ============ */
.product-list{display:flex;flex-direction:column;gap:4px}
.track-item-row{font-size:15px;color:var(--head-color)}

/* ============ FORM-LEVEL ERROR (below Track Order button) ============ */
.track-error{
  display:none;
  margin-top:14px;
  font-size:14px;
  color:#F0A9A9;
}