/* Booking wizard + client dashboard. Mobile-first, extends css/style.css. */

.app{padding-top:calc(var(--head) + 16px);padding-bottom:36px}
.app-head{display:grid;gap:10px;margin-bottom:20px}
.app-head .btn{justify-self:start}

/* ---------- stepper ---------- */
.steps{
  display:flex;margin:0 0 18px;padding:0;list-style:none;counter-reset:s;
  gap:0;
}
.steps li{
  flex:1;position:relative;padding-top:30px;text-align:center;
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-2);counter-increment:s;
}
.steps li::before{
  content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border:1px solid var(--linha-2);border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--preto);
  font-size:.72rem;letter-spacing:0;transition:all .3s;
}
.steps li::after{
  content:"";position:absolute;top:12px;left:calc(-50% + 12px);
  width:calc(100% - 24px);height:1px;background:var(--linha);
}
.steps li:first-child::after{display:none}
.steps li.done{color:var(--cinza)}
.steps li.done::before{border-color:var(--ouro);color:var(--ouro);content:"\2713"}
.steps li.active{color:var(--branco)}
.steps li.active::before{border-color:var(--ouro);background:var(--ouro);color:var(--preto)}

/* ---------- layout ---------- */
.book-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}

.panel{
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r-lg);padding:16px;
}
.panel h2{font-size:clamp(1.5rem,5.5vw,2.1rem);margin-bottom:6px}
.panel .hint{color:var(--cinza);font-size:.9rem;margin-bottom:16px}
.step-pane[hidden]{display:none}

/* ---------- trip-type tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:4px}
.tile{
  position:relative;border:1px solid var(--linha);border-radius:var(--r);
  padding:13px 14px;cursor:pointer;background:var(--preto);
  transition:border-color .2s,background .2s;
}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile strong{display:block;font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;margin-bottom:3px}
.tile span{color:var(--cinza);font-size:.88rem;line-height:1.45;display:block}
.tile:has(input:checked){border-color:var(--ouro);background:rgba(201,162,74,.07)}
.tile:has(input:focus-visible){outline:2px solid var(--ouro);outline-offset:2px}

/* ---------- field errors ---------- */
.field{position:relative;min-width:0}
.err{display:block;color:#e58d7f;font-size:.84rem;margin-top:6px;letter-spacing:0;text-transform:none;line-height:1.45}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#8a4a40}
.timepick[aria-invalid="true"] select,.timepick[aria-invalid="true"] .mer{border-color:#8a4a40}

.row-btns{display:flex;justify-content:space-between;gap:8px;margin-top:20px;flex-wrap:wrap}
.row-btns .btn{flex:1 1 auto;padding:0 18px}

/* ---------- live summary ----------
   On phones this collapses to a fixed bar showing only the running total; the
   itemised version lives in the Review step. */
.summary{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--preto-2);border-top:1px solid var(--ouro);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px var(--pad);
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
}
.summary h3,.summary dl,.summary .fare-line,.summary .fare-note{display:none}
.summary .fare{margin:0;padding:0;border:0}
.summary .fare-total{margin:0;padding:0;border:0;align-items:center}
.summary .fare-total strong{font-size:1.7rem}
.summary[hidden]{display:none}

.sum-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--linha);font-size:.95rem;
}
.sum-row:last-child{border-bottom:0}
.sum-row dt{color:var(--cinza);flex:0 0 auto}
.sum-row dd{margin:0;text-align:right;overflow-wrap:anywhere;min-width:0}

.fare{margin-top:18px;padding-top:16px;border-top:1px solid var(--ouro)}
.fare-line{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;color:var(--cinza);padding:4px 0}
.fare-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
.fare-total span:first-child{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.fare-total strong{font-family:var(--display);font-size:2.05rem;font-weight:400;letter-spacing:-.03em;color:var(--ouro);line-height:1}
.fare-note{font-size:.84rem;color:var(--cinza);margin:12px 0 0;line-height:1.55}

/* review step reuses the itemised fare inside the panel */
#review{margin:0 0 4px}

/* ---------- confirmation ---------- */
.confirm{text-align:center;padding:12px 0}
.confirm .ref{
  font-family:var(--display);font-size:2.1rem;color:var(--ouro);
  letter-spacing:.04em;margin:14px 0 6px;
}
.confirm .row-btns{justify-content:center}

/* ---------- dashboard tabs ---------- */
.tabs{
  display:flex;gap:6px;margin-bottom:20px;
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r-pill);padding:5px;
}
.tabs button{
  flex:1;background:none;border:0;color:var(--cinza);
  font:500 .7rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  min-height:40px;padding:0 8px;cursor:pointer;border-radius:var(--r-pill);
  transition:color .2s,background .2s;
}
.tabs button[aria-selected="true"]{color:var(--preto);background:var(--ouro)}
.tabs .count{opacity:.65;margin-left:3px}

/* ---------- trip card ---------- */
.trip{
  display:grid;grid-template-columns:1fr;gap:14px;
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r-lg);padding:15px;margin-bottom:10px;
  transition:border-color .25s;
}
.trip .when{
  display:flex;gap:10px;align-items:baseline;
  border-bottom:1px solid var(--linha);padding-bottom:12px;
}
.trip .when .d{font-family:var(--display);font-size:1.85rem;font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--ouro)}
.trip .when .m{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.trip .when .t{font-size:.9rem;margin-left:auto}
.trip .route{display:grid;gap:6px;min-width:0}
.trip .leg{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.trip .leg i{color:var(--ouro);flex:0 0 auto;width:15px;height:15px;margin-top:3px}
.trip .meta{color:var(--cinza);font-size:.84rem;margin-top:4px}
.trip .side{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.trip .price{font-family:var(--display);font-size:1.5rem;color:var(--branco)}
.trip.is-cancelled{opacity:.55}
.trip.is-cancelled .price{text-decoration:line-through}

.badge{
  display:inline-block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border:1px solid;border-radius:var(--r-pill);white-space:nowrap;
}
.badge.requested{color:var(--ouro);border-color:rgba(201,162,74,.45)}
.badge.confirmed{color:#7dbd94;border-color:rgba(125,189,148,.45)}
.badge.pending-quote{color:#9aa4c0;border-color:rgba(154,164,192,.45)}
.badge.cancelled,.badge.completed{color:var(--cinza);border-color:var(--linha-2)}

.link-btn{
  background:none;border:0;color:var(--cinza);
  font:400 .8rem var(--sans);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:8px 0;min-height:38px;
}

/* ---------- calendar ---------- */
.cal{background:var(--preto-2);border:1px solid var(--linha);border-radius:var(--r-lg);padding:15px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.cal-head strong{font-family:var(--display);font-size:1.22rem;font-weight:500;letter-spacing:-.01em}
.cal-head button{
  background:none;border:1px solid var(--linha);color:var(--cinza);
  width:40px;height:40px;border-radius:var(--r-pill);cursor:pointer;display:grid;place-items:center;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-grid .dow{
  text-align:center;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza-2);padding-bottom:6px;
}
.cal-day{
  aspect-ratio:1;display:grid;place-items:center;position:relative;
  border-radius:var(--r-sm);font-size:.88rem;color:var(--cinza);
}
.cal-day.out{color:#2e2e35}
.cal-day.today{border:1px solid var(--linha-2);color:var(--branco)}
.cal-day.has{background:rgba(201,162,74,.14);color:var(--branco);cursor:pointer}
.cal-day.has::after{
  content:"";position:absolute;bottom:4px;width:4px;height:4px;
  border-radius:var(--r-pill);background:var(--ouro);
}

.empty{
  text-align:center;padding:34px 18px;
  border:1px dashed var(--linha-2);border-radius:var(--r-lg);color:var(--cinza);
}
.empty h3{margin-bottom:8px;color:var(--branco)}

/* ---------- detail dialog ---------- */
dialog{
  background:var(--preto-2);color:var(--branco);
  border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:0;max-width:520px;width:calc(100% - 24px);
  max-height:88dvh;box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.dlg{padding:18px;overflow-y:auto;max-height:88dvh}
.dlg h3{font-size:1.5rem;margin-bottom:3px}
.dlg .ref-line{color:var(--ouro);font-size:.77rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}

/* =========================================================================
   Tablet and up
   ========================================================================= */
@media (min-width:700px){
  .app{padding-top:calc(var(--head) + 34px)}
  .app-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;flex-wrap:wrap;margin-bottom:34px;
  }
  .steps li{font-size:.72rem;padding-top:34px}
  .steps li::before{width:26px;height:26px}
  .steps li::after{top:13px;left:calc(-50% + 13px);width:calc(100% - 26px)}
  .panel{padding:32px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .row-btns .btn{flex:0 0 auto;padding:0 28px}
  .trip{
    grid-template-columns:96px 1fr auto;gap:22px;align-items:center;padding:22px;
  }
  .trip .when{
    display:block;text-align:center;border-bottom:0;
    border-right:1px solid var(--linha);padding:0 18px 0 0;
  }
  .trip .when .d{font-size:2.2rem}
  .trip .when .m{display:block;margin-top:5px}
  .trip .when .t{display:block;margin:7px 0 0}
  .trip .side{display:grid;gap:10px;justify-items:end;text-align:right}
  .cal{padding:24px}
  .dlg{padding:32px}
  .confirm .ref{font-size:2.6rem}
}

/* =========================================================================
   Desktop — summary returns to a sticky sidebar
   ========================================================================= */
@media (min-width:1000px){
  .app{padding-bottom:60px}
  .book-grid{grid-template-columns:1.55fr 1fr;gap:36px}
  .panel{padding:40px}

  .summary{
    position:sticky;top:calc(var(--head) + 24px);
    left:auto;right:auto;bottom:auto;z-index:1;
    border:1px solid var(--linha);border-radius:var(--r-lg);
    padding:26px;box-shadow:none;
  }
  .summary h3{
    display:block;font-family:var(--sans);font-weight:500;
    font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cinza);margin-bottom:18px;
  }
  .summary dl{display:block}
  .summary .fare-line{display:flex}
  .summary .fare-note{display:block}
  .summary .fare{margin-top:20px;padding-top:18px;border-top:1px solid var(--ouro)}
  .summary .fare-total{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
  .summary .fare-total strong{font-size:2.3rem}
}

/* Hover effects only where a pointer exists. On touch screens a
   :hover sticks after the tap and the element stays lit. */
@media (hover:hover) and (pointer:fine){
  .tile:hover{border-color:var(--linha-2)}
  .tabs button:hover{color:var(--branco)}
  .trip:hover{border-color:var(--linha-2)}
  .link-btn:hover{color:#e58d7f}
  .cal-head button:hover{border-color:var(--ouro);color:var(--ouro)}
  .cal-day.has:hover{background:rgba(201,162,74,.26)}
}

/* The wizard pins a fare bar to the bottom on phones — lift the back-to-top
   button clear of it. :has() keeps this to the pages that actually show one. */
@media (max-width:999px){
  body:has(.summary:not([hidden])) .to-top{bottom:82px}
}