/* ============================================================
   PRECISION LASER — Booking page styles
   Loaded AFTER /css/style.css and reuses its variables, buttons,
   header, footer, .wrap, .eyebrow, .lead, .page-hero and .section.
   Only adds what the main site doesn't already have.
   ============================================================ */

.wrap-narrow{width:min(720px, 92%);margin:0 auto}
.book-main{padding:3rem 0}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}

.link-red{color:var(--red-500);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.mono{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em}
.center{text-align:center}
.mt{margin-top:1.4rem}
.mt-sm{margin-top:.8rem}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem;align-items:center}
.btn-sm{padding:.45rem 1rem;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- Stepper ---------- */
.stepper-outer{background:#fff;border-bottom:1px solid var(--line)}
.stepper{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:1.1rem 0}
.step{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.step-num{
  width:24px;height:24px;display:grid;place-items:center;flex-shrink:0;
  border-radius:50%;border:2px solid var(--line);font-size:.72rem;font-weight:600;
}
.step.done .step-num{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.step.active .step-num{background:var(--red-500);border-color:var(--red-500);color:#fff}
.step.active{color:var(--navy-900);font-weight:600}
.step-sep{width:18px;height:2px;background:var(--line)}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:0 6px 20px -14px rgba(12,27,63,.35);
}
.card + .card{margin-top:1.2rem}

.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:.4rem}
.type-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.5rem;text-align:left;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.type-card::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--red-500);
  transition:width .3s ease;
}
.type-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#C9D4EA}
.type-card:hover::before{width:100%}
.type-card .type{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red-500);
}
.type-card h3{font-size:1.3rem}
.type-card p{color:var(--muted);font-size:.95rem;flex:1}
.type-card .meta{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--navy-800);border-top:1px dashed var(--line);padding-top:.7rem;
}

/* ---------- Calendar ---------- */
.cal-month{margin-bottom:1.4rem}
.cal-month h3{margin-bottom:.8rem;color:var(--navy-800)}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cal-head span{
  text-align:center;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:.3rem;
}
.cal-day{
  aspect-ratio:1/1;border-radius:10px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;transition:.15s ease;min-height:46px;text-align:center;
}
.cal-day .d{font-family:var(--font-display);font-size:1.1rem;font-weight:600;line-height:1.1}
.cal-day .n{font-family:var(--font-mono);font-size:.58rem;color:var(--green,#0F7B4F);letter-spacing:.04em;line-height:1}
a.cal-day.open{border-color:#BFD3C4;cursor:pointer;color:var(--ink)}
a.cal-day.open:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff;transform:translateY(-2px)}
a.cal-day.open:hover .n{color:#9FE3C0}
.cal-day.closed{background:#F1F3F8;color:#B4BCCD;border-style:dashed;cursor:not-allowed}
.cal-day.selected{background:var(--red-500);border-color:var(--red-500);color:#fff}
.cal-day.empty{border:none;background:none}
.cal-day .n.why{
  font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:#98A2B6;line-height:1;
}
.cal-day .n.why.reserved{color:#C98A8D}

.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;font-size:.84rem;color:var(--muted)}
.legend i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:.4rem;vertical-align:-2px}
.legend .ok{background:#fff;border:1px solid #BFD3C4}
.legend .no{background:#F1F3F8;border:1px dashed #B4BCCD}

/* ---------- Time slots ---------- */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.slot{
  border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:.95rem 1rem;text-align:left;transition:.15s ease;display:block;color:var(--ink);
}
.slot strong{display:block;font-family:var(--font-display);font-size:1.08rem;letter-spacing:.03em}
.slot small{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.slot:hover{border-color:var(--navy-800);transform:translateY(-2px);box-shadow:var(--shadow)}
.slot.selected{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.slot.selected small{color:#9FACCB}

/* ---------- Forms ---------- */
.field{margin-bottom:1.1rem}
.field label{
  display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-800);margin-bottom:.4rem;font-weight:500;
}
.field .req{color:var(--red-500)}
.field input,.field textarea,.field select{
  width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(29,62,156,.13);
}
.field textarea{min-height:96px;resize:vertical}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

.error-box{
  background:#FDECEC;border:1px solid #F3B7B9;color:#8E1418;
  padding:.85rem 1rem;border-radius:10px;margin-bottom:1.2rem;font-size:.94rem;
}
.banner-success{background:#E4F3EC;border:1px solid #A8D6C0;color:#0B5537;padding:1rem 1.2rem;border-radius:10px;margin-bottom:1.4rem}
.banner-warn{background:#FEF3E2;border:1px solid #F0CFA0;color:#7A4A08;padding:1rem 1.2rem;border-radius:10px;margin-bottom:1.4rem}

/* ---------- Info panels ---------- */
.info{
  border:1px solid var(--line);border-left:3px solid var(--red-500);background:#fff;
  border-radius:0 10px 10px 0;padding:1.1rem 1.3rem;margin-top:1.2rem;
}
.info h4{
  font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--navy-900);margin-bottom:.5rem;
}
.info ul li{padding-left:1.3rem;position:relative;margin-bottom:.45rem;font-size:.95rem;color:var(--ink)}
.info ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--red-500);
  clip-path:polygon(0 50%, 85% 0, 100% 50%, 85% 100%);
}

/* ---------- Booking receipt ---------- */
.receipt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.receipt-head{background:var(--navy-900);color:#fff;padding:1.4rem 1.6rem}
.receipt-head .ref{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;color:#9FACCB;text-transform:uppercase}
.receipt-head h2{color:#fff;margin-top:.2rem}
.receipt-body{padding:1.5rem 1.6rem}
.rrow{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.rrow:last-child{border-bottom:none}
.rrow dt{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);width:140px;flex-shrink:0;padding-top:.15rem;
}
.rrow dd{font-weight:500;flex:1}

.pill-status{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;font-weight:600;
}
.pill-status.confirmed{background:#E4F3EC;color:#0F7B4F}
.pill-status.cancelled{background:#FDECEC;color:#8E1418}
.pill-status.completed{background:#E8EDF9;color:var(--navy-800)}

/* ---------- Admin ---------- */
.admin-bar{background:var(--navy-950);color:#fff;padding:.7rem 0}
.admin-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.admin-bar nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.admin-bar nav a{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;font-weight:600;color:#9FACCB;
}
.admin-bar nav a.active,.admin-bar nav a:hover{color:#fff}
.admin-brand{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#6E7C9C}

.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:720px}
.table-wrap thead th{
  background:var(--paper);text-align:left;padding:.75rem .9rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;
}
.table-wrap tbody td{padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover{background:#FAFBFE}

.toolbar{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end}
.toolbar .field{margin-bottom:0}
.toolbar select,.toolbar input{min-width:150px}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.6rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.kpi b{display:block;font-family:var(--font-display);font-size:2rem;color:var(--navy-900);line-height:1}
.kpi span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.admin-cal .cal-day{cursor:pointer}
.admin-cal button.cal-day{width:100%}
.admin-cal .cal-day.blocked{background:#FDECEC;border-color:#F3B7B9;color:#8E1418;border-style:solid}
.admin-cal .cal-day.has-booking{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.admin-cal .cal-day.has-booking .n{color:#9FACCB}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .type-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .book-main{padding:2rem 0}
  .cal-head,.cal-grid{gap:.28rem}
  .cal-day{min-height:50px;border-radius:8px}
  .cal-day .d{font-size:.95rem}
  .cal-day .n{display:none}
  .cal-day .n.why{display:block;font-size:.53rem;letter-spacing:-.01em}
  .slot-grid{grid-template-columns:1fr 1fr}
  .rrow{flex-direction:column;gap:.15rem}
  .rrow dt{width:auto}
  .step .step-label{display:none}
  .stepper{gap:.3rem}
  .card{padding:1.2rem}
  .actions .btn{width:100%;text-align:center}
}