/* logistics.css — mobile-service travel check + day-full waitlist UI.
   Additive layer for book.html; reuses the theme vars from styles.css
   (--rust, --cream-bg/-fade/-border, --surface, --title-text, --body-text)
   so dark mode flips for free. Loaded after booking-flow.css. */

/* ---- Travel-check banner (under the client address field) ---------------- */
.travel-check{
  margin-top:12px;border-radius:10px;
  padding:13px 15px;
  display:flex;gap:11px;align-items:flex-start;
  font-size:15px;line-height:1.5;
  border:1px solid var(--cream-border);
  background:var(--cream-fade);
  color:var(--body-text);
}
.travel-check[hidden]{display:none}
.travel-check .tc-ic{flex:none;width:22px;height:22px;margin-top:1px}
.travel-check .tc-ic svg{width:22px;height:22px}
.travel-check strong{color:var(--title-text)}
.travel-check .tc-sub{display:block;margin-top:3px;font-size:13px;opacity:.85}

/* checking… (neutral) */
.travel-check.is-checking{opacity:.85}
/* yes, in area (sage/emerald accent) */
.travel-check.is-ok{
  background:color-mix(in srgb,#10b981 10%,var(--surface,#fff));
  border-color:color-mix(in srgb,#10b981 38%,var(--cream-border));
}
.travel-check.is-ok .tc-ic{color:#0f9d6f}
/* outside service area (rust warning) */
.travel-check.is-out{
  background:color-mix(in srgb,var(--rust) 9%,var(--surface,#fff));
  border-color:color-mix(in srgb,var(--rust) 32%,var(--cream-border));
}
.travel-check.is-out .tc-ic{color:var(--rust)}

/* ---- "Day is full" → join the waitlist ----------------------------------- */
.waitlist-box{
  margin-top:14px;text-align:left;
  border:1px solid color-mix(in srgb,var(--rust) 28%,var(--cream-border));
  background:color-mix(in srgb,var(--rust) 7%,var(--surface,#fff));
  border-radius:12px;
  padding:18px 18px 16px;
}
.waitlist-box[hidden]{display:none}
.waitlist-box .wl-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:4px}
.waitlist-box .wl-ic{flex:none;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust)}
.waitlist-box .wl-ic svg{width:19px;height:19px}
.waitlist-box h4{
  margin:0 0 2px;font-family:var(--font-body);font-size:16px;
  font-weight:700;color:var(--title-text);line-height:1.3;
}
.waitlist-box .wl-sub{margin:0;font-size:14px;line-height:1.5;color:var(--body-text)}

.waitlist-box .wl-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;
}
.waitlist-box .wl-fields .wl-full{grid-column:1 / -1}
.waitlist-box label{
  display:block;margin-bottom:5px;font-weight:700;font-size:14px;color:var(--title-text);
}
.waitlist-box input{
  width:100%;padding:11px 12px;font-size:16px;font-family:var(--font-body);
  border:1px solid var(--cream-border);border-radius:8px;background:var(--surface,#fff);
  color:var(--body-text);
}
.waitlist-box input:focus{outline:none;border-color:var(--rust)}
.waitlist-box .wl-actions{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.waitlist-box .btn{min-height:46px}
.waitlist-box .wl-status{font-size:14px;line-height:1.45}
.waitlist-box .wl-status.ok{color:#0f9d6f;font-weight:700}
.waitlist-box .wl-status.err{color:#a02020}

/* Confirmed state: collapse the form, show a friendly note. */
.waitlist-box.is-done .wl-fields,
.waitlist-box.is-done .wl-actions .btn{display:none}
.waitlist-box.is-done .wl-done{
  display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:15px;line-height:1.5;color:var(--title-text);
}
.waitlist-box .wl-done{display:none}
.waitlist-box.is-done .wl-done svg{flex:none;width:20px;height:20px;color:#0f9d6f;margin-top:1px}

/* ---- mobile (no overflow at 390px) --------------------------------------- */
@media (max-width:600px){
  .waitlist-box .wl-fields{grid-template-columns:1fr;gap:9px}
  .waitlist-box .btn{width:100%}
  .travel-check{font-size:14px}
}

/* ---- dark mode: vars already flip; just soften the colored panels -------- */
:root[data-theme="dark"] .waitlist-box{
  background:color-mix(in srgb,var(--rust) 16%,var(--surface,#1c1e22));
}
:root[data-theme="dark"] .travel-check.is-ok{
  background:color-mix(in srgb,#10b981 16%,var(--surface,#1c1e22));
}
:root[data-theme="dark"] .travel-check.is-out{
  background:color-mix(in srgb,var(--rust) 16%,var(--surface,#1c1e22));
}