/* Booking flow — reuses brand tokens from /css/style.css */
.book-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:var(--black);
}
.book-brand img{ height:40px; width:auto; border-radius:3px; }
.book-phone{
  font-family:var(--tag); font-weight:700; color:var(--yellow);
  letter-spacing:.04em; font-size:1.05rem;
}
.book-main{ max-width:720px; margin:0 auto; padding:24px 20px 80px; }

/* progress */
.steps{
  display:flex; gap:6px; margin:0 0 24px; flex-wrap:wrap;
  font-family:var(--tag); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem;
}
.steps li{
  flex:1 1 auto; text-align:center; padding:8px 4px; min-width:64px;
  background:var(--paper-dim); color:#4a463e; border-bottom:3px solid transparent;
}
.steps li.active{ background:var(--yellow); color:var(--black); border-color:var(--black); font-weight:700; }
.steps li.done{ background:var(--charcoal); color:var(--yellow); }

.step h1{ font-size:clamp(1.6rem,5vw,2.3rem); margin-bottom:18px; }

.panel{ padding:16px; border-radius:var(--radius); background:var(--paper-dim); }
.panel.error{ background:#fbe3e0; color:var(--red); border-left:4px solid var(--red); }
.muted{ color:#4a463e; }

/* choices */
.choice-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:560px){ .choice-grid{ grid-template-columns:1fr 1fr; } }
.choice, .type-card{
  text-align:left; background:var(--white); border:2px solid var(--black);
  border-radius:var(--radius); padding:18px; box-shadow:4px 4px 0 var(--black);
  transition:transform .15s ease, box-shadow .15s ease; display:block; width:100%;
}
.choice:hover, .type-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--black); }
.choice-title{ display:block; font-family:var(--display); font-size:1.4rem; }
.choice-sub{ display:block; color:#555; margin-top:4px; font-size:.95rem; }

/* type list */
.type-list{ display:grid; gap:12px; margin-bottom:16px; }
.type-card.selected{ background:var(--yellow); }
.type-card .tc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.type-card .tc-name{ font-family:var(--display); font-size:1.25rem; }
.type-card .tc-price{ font-family:var(--tag); font-weight:700; font-size:1.15rem; white-space:nowrap; }
.type-card .tc-desc{ color:#555; font-size:.92rem; margin-top:6px; }
.type-card.selected .tc-desc{ color:#3a3320; }

/* roll-off material cards (Standard / Heavy / Yard waste), colors from the price sheet */
.material-card{
  display:block; background:var(--white); border:2px solid var(--black); border-radius:var(--radius);
  box-shadow:4px 4px 0 var(--black); overflow:hidden; cursor:pointer; text-align:left;
}
.material-card .tc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:12px 16px; }
.material-card .tc-name{ font-family:var(--display); font-size:1.3rem; }
.material-card .tc-price{ font-family:var(--tag); font-weight:700; font-size:1.2rem; white-space:nowrap; }
.material-card.mat-std .tc-top{ background:#e9b73c; color:var(--black); }
.material-card.mat-heavy .tc-top{ background:#3f5f86; color:#fff; }
.material-card.mat-yard .tc-top{ background:#55744a; color:#fff; }
.material-card .tc-desc, .material-card .tc-terms{ display:block; padding:12px 16px 14px; color:#333; font-size:.93rem; }
.material-card .tc-terms{ font-weight:700; padding-top:0; }
.material-card .mat-more{ display:none; padding:0 16px 14px; }
.material-card.selected{ outline:4px solid var(--yellow); outline-offset:-4px; box-shadow:6px 6px 0 var(--black); }
.material-card.selected .mat-more{ display:block; }
.material-card:focus-visible{ outline:3px solid var(--black); outline-offset:2px; }
.material-card .hint{ color:#555; font-size:.85rem; margin:8px 0 0; }
.load-list{ display:grid; gap:6px; margin-top:4px; }
.load-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:2px solid var(--black); border-radius:var(--radius); background:#fff; font-size:.93rem; color:#111; }
.load-opt input{ width:18px; height:18px; }
.load-opt span:first-of-type{ flex:1; }
.summary .line.note{ color:#cfc9bd; font-size:.85rem; padding-top:0; }

/* fields */
.field{ display:block; margin-bottom:16px; }
/* .field display:block was overriding the hidden attribute */
.field[hidden]{ display:none; }
.field-label{ display:block; font-family:var(--tag); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; margin-bottom:6px; }
label.field{ font-family:var(--tag); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; }
.field input, .field select, .field textarea, .rental-days select{
  display:block; width:100%; margin-top:6px; padding:12px; border:2px solid var(--black);
  border-radius:var(--radius); background:var(--white); font-family:var(--body); text-transform:none; font-weight:400;
}
.grid-2{ display:grid; gap:0 14px; grid-template-columns:1fr; }
@media(min-width:520px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.avail{ margin-top:8px; font-family:var(--tag); font-weight:600; font-size:.9rem; }
.avail.ok{ color:#1a7a37; } .avail.no{ color:var(--red); }

.check{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; margin:12px 0; }
.check input{ margin-top:3px; width:20px; height:20px; }

.agreement-box{
  max-height:320px; overflow-y:auto; padding:16px; border:2px solid var(--black);
  border-radius:var(--radius); background:var(--white); margin-bottom:16px; font-size:.92rem;
}
/* marketing ".step h3 / .step p" rules paint these white; force dark text on the white box */
.agreement-box, .book-main .agreement-box :is(h3,p,li,strong,span,div,td,th){ color:var(--black); }
.agreement-box h3{ font-size:1.1rem; margin-bottom:8px; }
.agreement-box ul{ list-style:disc; padding-left:20px; }
.agreement-box li{ margin:6px 0; }

/* add-ons */
.addon-list{ display:grid; gap:8px; margin-top:8px; }
.addon-opt{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:2px solid var(--black); border-radius:var(--radius); background:var(--white); font-size:.95rem;
}
.addon-opt input{ width:20px; height:20px; }
.addon-opt span:first-of-type{ flex:1; }
.addon-price{ font-family:var(--tag); font-weight:600; color:#555; }

/* thumbs */
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumb{ position:relative; width:72px; height:72px; border:2px solid var(--black); border-radius:3px; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.uploading{ opacity:.5; }
.thumb button{ position:absolute; top:0; right:0; background:var(--red); color:#fff; border:none; width:20px; height:20px; line-height:18px; }

/* summary */
.summary{ background:var(--charcoal); color:var(--paper); border-radius:var(--radius); padding:18px; margin-bottom:18px; }
.summary .line{ display:flex; justify-content:space-between; padding:5px 0; font-size:.95rem; }
.summary .line.total{ border-top:1px solid rgba(255,255,255,.2); margin-top:8px; padding-top:12px; font-family:var(--tag); font-weight:700; font-size:1.2rem; color:var(--yellow); }
.summary .line.muted-line{ color:#a49; }
.summary .disc{ color:#8fd19e; }

.promo-row{ display:flex; gap:8px; }
.promo-row input{ flex:1; }
.promo-row .btn{ padding:10px 16px; }
.promo-msg{ margin-top:8px; font-size:.9rem; font-family:var(--tag); font-weight:600; }
.promo-msg.ok{ color:#1a7a37; } .promo-msg.no{ color:var(--red); }

.pay-options{ border:2px solid var(--black); border-radius:var(--radius); padding:14px; margin-bottom:18px; }
.pay-options legend{ font-family:var(--tag); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:0 8px; }
.pay-opt{ display:flex; gap:10px; align-items:center; padding:10px 4px; font-size:1rem; cursor:pointer; }
.pay-opt input{ width:20px; height:20px; }

.nav-row{ display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.nav-row .btn{ flex:0 0 auto; }
.fineprint{ margin-top:14px; color:#7a746a; font-size:.82rem; text-align:center; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:2px 2px 0 var(--black); }

/* confirm page */
.confirm-wrap{ max-width:560px; margin:60px auto; padding:0 20px; text-align:center; }
.confirm-badge{ font-size:3rem; }
.confirm-ref{ font-family:var(--tag); font-weight:700; font-size:1.4rem; letter-spacing:.04em; background:var(--yellow); display:inline-block; padding:6px 16px; border:2px solid var(--black); box-shadow:4px 4px 0 var(--black); margin:12px 0; }

/* agreement: language toggle, acknowledgements, signature, verification */
.agr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lang-toggle{ display:inline-flex; border:2px solid var(--black); border-radius:var(--radius); overflow:hidden; }
.lang-toggle button{ padding:8px 14px; background:var(--white); color:var(--black); border:0; font-family:var(--tag); font-weight:600; cursor:pointer; }
.lang-toggle button.active{ background:var(--yellow); }
.acks{ border:0; padding:0; margin:0 0 12px; }
#sig-canvas{ width:100%; height:auto; aspect-ratio:640/180; background:#fff; border:2px solid var(--black); border-radius:var(--radius); touch-action:none; display:block; margin-bottom:6px; cursor:crosshair; }
.inline-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.inline-row input{ flex:1; min-width:120px; }
.btn-sm{ padding:7px 12px; font-size:.8rem; }
.hint, .step p.hint, .step p.fineprint{ font-size:.82rem; color:#4a463e; }  /* beats the marketing-site ".step p" pale rule */
/* ghost buttons default to white text (for dark headers); the booking pages are cream */
.book-main .btn-ghost{ color:var(--black); border-color:var(--black); }
.book-main .btn-ghost:hover{ background:var(--yellow-pale); }