/* ══════════════════════════════════════════════════════════════
   Boeing Taxi — compact quote widget
   Adapts to its CONTAINER, not the viewport, so the same markup
   works in a hero, a CTA band, a sidebar and a footer without
   per-location overrides. Container queries drive the layout;
   viewport media queries provide a fallback for older browsers.
   ══════════════════════════════════════════════════════════════ */
.btbq{
  --ink:#0A1A29; --ink-2:#12293D; --body:#4A5E72; --muted:#7A8FA3;
  --orange:#F26A1B; --orange-d:#D25509; --orange-t:#FFF3EB;
  --paper:#FFFFFF; --alt:#F4F7FA; --line:#E3EAF1; --line-2:#C6D4E1;
  --ok:#2F7D4F; --err:#C13B57;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  container-type:inline-size;
  container-name:btbq;
  font-family:var(--text);color:var(--body);font-size:16px;line-height:1.5;
  width:100%;max-width:100%;text-align:left;
}
.btbq *,.btbq *::before,.btbq *::after{box-sizing:border-box}
.btbq :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.btbq__form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(18px,3.2cqi,26px);
  box-shadow:0 2px 6px rgba(10,26,41,.05),0 18px 44px rgba(10,26,41,.10);
  position:relative;overflow:hidden;
}
.btbq__form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),#FF9147)}

.btbq__hd{margin-bottom:16px}
.btbq__t{font-family:var(--display);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.15;margin:0;font-size:clamp(1.1rem,2.6cqi,1.35rem)}
.btbq__s{margin:6px 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}

/* ── grid: single column by default (narrowest containers) ── */
.btbq__grid{display:grid;grid-template-columns:1fr;gap:12px}
.btbq__f{position:relative;min-width:0}
.btbq__f[hidden]{display:none}
.btbq__f > label:not(.btbq__check){display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}

.btbq__ic{position:absolute;left:13px;top:calc(50% + 9px);transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;z-index:2}
.btbq .btbq__f input{
  width:100%;padding:13px 14px 13px 39px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  font-family:var(--text);font-size:.94rem;color:var(--ink);line-height:1.4;
  transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none;height:auto;margin:0;box-shadow:none;
}
.btbq .btbq__f input:hover{border-color:var(--line-2)}
.btbq .btbq__f input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-t)}
.btbq .btbq__f input::placeholder{color:#A6B5C3;opacity:1}
.btbq__f.has-err input{border-color:var(--err);box-shadow:0 0 0 4px rgba(193,59,87,.1)}
.btbq__err{display:none;margin-top:6px;font-size:.79rem;color:var(--err);line-height:1.4}
.btbq__f.has-err .btbq__err{display:block}

/* ── return toggle ── */
.btbq label.btbq__check{display:flex;align-items:center;gap:11px;cursor:pointer;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;transition:.18s;user-select:none;font-size:.92rem;line-height:1.4;color:var(--ink);margin:0;font-family:var(--text);font-weight:500;letter-spacing:0;text-transform:none}
.btbq__check:hover{border-color:var(--line-2);background:var(--alt)}
.btbq .btbq__check input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}
.btbq__box{width:19px;height:19px;border-radius:6px;border:1.8px solid var(--line-2);flex:none;display:grid;place-items:center;color:transparent;background:#fff;transition:.18s}
.btbq__check input:checked ~ .btbq__box{background:var(--orange);border-color:var(--orange);color:#fff}
.btbq__check:has(input:checked){border-color:var(--orange);background:var(--orange-t)}
.btbq__check input:focus-visible ~ .btbq__box{outline:3px solid var(--orange);outline-offset:2px}

/* ── CTA ── */
.btbq .btbq__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.012em;
  padding:16px 24px;border-radius:11px;border:1.5px solid var(--orange);
  background-color:var(--orange);color:#fff;cursor:pointer;line-height:1.2;
  transition:background-color .18s,border-color .18s,transform .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;box-shadow:0 8px 22px rgba(242,106,27,.26);height:auto;
}
.btbq .btbq__btn:hover,
.btbq .btbq__btn:focus{background-color:var(--orange-d);border-color:var(--orange-d);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,106,27,.34)}
.btbq .btbq__btn:active{transform:translateY(0)}
.btbq .btbq__btn[disabled]{background-color:#EBB894;border-color:#EBB894;cursor:progress;transform:none;box-shadow:none}

.btbq__note{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0;font-size:.83rem;color:var(--muted);text-align:center;line-height:1.45}
.btbq__note svg{color:var(--ok);flex:none}

/* ══════════════════════════════════════════════════════════════
   CONTAINER QUERIES — layout responds to the block it sits in
   ══════════════════════════════════════════════════════════════ */

/* ≥ 420px: date and time pair up */
@container btbq (min-width:420px){
  .btbq__grid{grid-template-columns:1fr 1fr}
  .btbq__f--from,.btbq__f--to,.btbq__f--ret,.btbq__f--go{grid-column:1/-1}
}

/* ≥ 620px: locations pair up too — the hero/sidebar case */
@container btbq (min-width:620px){
  .btbq__form{padding:26px}
  .btbq__grid{grid-template-columns:1fr 1fr;gap:14px}
  .btbq__f--from,.btbq__f--to{grid-column:span 1}
  .btbq__f--ret,.btbq__f--go{grid-column:1/-1}
}

/* ≥ 900px: single inline row — the CTA band and footer case */
@container btbq (min-width:900px){
  .btbq__form{padding:22px 24px}
  .btbq__hd{margin-bottom:14px}
  .btbq__grid{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(0,.85fr) minmax(0,.7fr) auto;
    gap:12px;align-items:end;
  }
  .btbq__f--from{grid-column:1}
  .btbq__f--to{grid-column:2}
  .btbq__f--date{grid-column:3}
  .btbq__f--time{grid-column:4}
  .btbq__f--go{grid-column:5;align-self:end}
  .btbq .btbq__btn{width:auto;white-space:nowrap;padding:13px 24px;font-size:.94rem}
  .btbq__f--ret{grid-column:1/-1;order:9}
  .btbq__f--rdate{grid-column:1;order:10}
  .btbq__f--rtime{grid-column:2;order:11}
  .btbq label.btbq__check{padding:9px 0;border:0;background:transparent}
  .btbq__check:hover{background:transparent}
  .btbq__note{justify-content:flex-start;margin-top:10px}
}

/* ≥ 1150px: room for the heading beside the fields */
@container btbq (min-width:1150px){
  .btbq__form{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:28px;align-items:center;padding:24px 28px}
  .btbq__hd{margin-bottom:0}
  .btbq__grid{grid-column:2}
  .btbq__note{grid-column:2;margin-top:10px}
}

/* ══ forced layouts via the layout attribute ══ */
.btbq--stack .btbq__grid{grid-template-columns:1fr!important}
.btbq--stack .btbq__f{grid-column:1/-1!important}
.btbq--stack .btbq__btn{width:100%!important}
.btbq--stack .btbq__form{display:block!important}

/* ══ fallback for browsers without container queries ══ */
@supports not (container-type:inline-size){
  @media (min-width:560px){
    .btbq__grid{grid-template-columns:1fr 1fr}
    .btbq__f--from,.btbq__f--to,.btbq__f--ret,.btbq__f--go{grid-column:1/-1}
  }
  @media (min-width:900px){
    .btbq__f--from,.btbq__f--to{grid-column:span 1}
  }
}

/* ══ dark backgrounds (CTA bands, footers) ══ */
.btbq--onink .btbq__form{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);backdrop-filter:blur(14px);box-shadow:none}
.btbq--onink .btbq__t{color:#fff}
.btbq--onink .btbq__s,.btbq--onink .btbq__note{color:#9FB6CB}
.btbq--onink .btbq__f > label:not(.btbq__check){color:#7B94AB}
.btbq--onink label.btbq__check{color:#fff;border-color:rgba(255,255,255,.18)}
.btbq--onink .btbq__check:hover{background:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){
  .btbq *{transition-duration:.01ms!important}
  .btbq .btbq__btn:hover{transform:none}
}

/* mobile: the widget must not add dead space below itself inside a hero */
@media (max-width:640px){
  .btbq{margin-bottom:0}
  .btbq__form{padding-bottom:20px}
  .btbq__note{margin-bottom:0}
  .btbq__grid{margin-bottom:0}
}
.btbq__form > *:last-child{margin-bottom:0}