/* ════════════════════════════════════════════════════════════
   SHA Booking — Frontend CSS v1.0.0
   Matches SHA Silver Jewellery brand: cream + gold + Playfair
════════════════════════════════════════════════════════════ */

.sha-bk{
  --bk-gold:#9B7B2A;
  --bk-gold-dk:#6B5518;
  --bk-cream:#FAF8F3;
  --bk-text:#1C1A14;
  --bk-text2:#5A5040;
  --bk-text3:#9A9080;
  --bk-bdr:#E5DCCA;
  --bk-bdr2:#EDE6D6;
  --bk-white:#FFFFFF;
  --bk-green:#3A9068;
  --bk-gold-fill:rgba(155,123,42,.07);
  --bk-font-head:'Playfair Display',Georgia,serif;
  --bk-font-body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  background:var(--bk-cream);
  padding:56px 24px;
  font-family:var(--bk-font-body);
  color:var(--bk-text);
  box-sizing:border-box;
}
.sha-bk *,.sha-bk *::before,.sha-bk *::after{box-sizing:border-box;}
.sha-bk-inner{
  max-width:680px;margin:0 auto;
  background:var(--bk-white);
  border:1px solid var(--bk-bdr);
}

/* ── HEADER ───────────────────────────────────────────────── */
.sha-bk-head{padding:44px 44px 28px;text-align:center;}
.sha-bk-label{
  font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bk-gold);margin-bottom:14px;
}
.sha-bk-heading{
  font-family:var(--bk-font-head);font-size:2.3rem;font-weight:500;
  line-height:1.1;color:var(--bk-text);margin:0 0 14px;
}
.sha-bk-intro{
  font-size:.92rem;line-height:1.7;color:var(--bk-text2);
  font-weight:300;margin:0 auto;max-width:440px;
}

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.sha-bk-progress{display:flex;gap:0;}
.sha-bk-pbar{flex:1;height:4px;background:var(--bk-bdr2);transition:background .4s ease;}
.sha-bk-pbar.on{background:var(--bk-gold);}

/* ── STEPS ────────────────────────────────────────────────── */
.sha-bk-step{display:none;padding:40px 44px;}
.sha-bk-step.active{display:block;}
.sha-bk-step-head{display:flex;align-items:center;gap:13px;margin-bottom:26px;}
.sha-bk-step-num{
  width:30px;height:30px;border-radius:50%;background:var(--bk-gold);color:#fff;
  font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sha-bk-step-head h3{
  font-family:var(--bk-font-head);font-size:1.35rem;font-weight:500;
  color:var(--bk-text);margin:0;
}

/* ── FIELD LABELS ─────────────────────────────────────────── */
.sha-bk-field-label{
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk-text3);margin-bottom:11px;
}

/* ── SELECTION CARDS ──────────────────────────────────────── */
.sha-bk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sha-bk-cards--col{grid-template-columns:1fr;}
.sha-bk-card-sel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--bk-bdr2);
  padding:16px 18px;font-family:var(--bk-font-body);
  transition:border-color .25s,background .25s;
}
.sha-bk-card-sel:hover{border-color:var(--bk-gold);background:var(--bk-gold-fill);}
.sha-bk-card-sel.on{border-color:var(--bk-gold);background:var(--bk-gold-fill);}
.sha-bk-card-txt{display:flex;flex-direction:column;gap:3px;}
.sha-bk-card-name{
  font-family:var(--bk-font-head);font-size:1.04rem;font-weight:500;color:var(--bk-text);
}
.sha-bk-card-sub{font-size:.74rem;color:var(--bk-text3);font-weight:300;}
.sha-bk-radio{
  width:18px;height:18px;border-radius:50%;border:1px solid var(--bk-bdr);
  flex-shrink:0;transition:all .25s;position:relative;
}
.sha-bk-card-sel.on .sha-bk-radio{
  border-color:var(--bk-gold);background:var(--bk-gold);
}
.sha-bk-card-sel.on .sha-bk-radio::after{
  content:'';position:absolute;inset:5px;background:#fff;border-radius:50%;
}

/* ── CALENDAR ─────────────────────────────────────────────── */
.sha-bk-cal{margin-bottom:24px;}
.sha-bk-cal-nav{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.sha-bk-cal-nav button{
  width:34px;height:34px;background:transparent;border:1px solid var(--bk-bdr2);
  color:var(--bk-text2);font-size:1.1rem;cursor:pointer;transition:all .25s;
  display:flex;align-items:center;justify-content:center;
}
.sha-bk-cal-nav button:hover:not(:disabled){border-color:var(--bk-gold);color:var(--bk-gold);}
.sha-bk-cal-nav button:disabled{opacity:.3;cursor:not-allowed;}
.sha-bk-cal-title{
  font-family:var(--bk-font-head);font-size:1.1rem;font-weight:500;color:var(--bk-text);
}
.sha-bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.sha-bk-cal-dayname{
  text-align:center;font-size:.6rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bk-text3);padding:8px 0;
}
.sha-bk-cal-day{
  text-align:center;padding:10px 4px;font-size:.84rem;border-radius:2px;
  transition:all .2s;
}
.sha-bk-cal-day.empty{background:transparent;}
.sha-bk-cal-day.off{color:var(--bk-bdr);cursor:not-allowed;}
.sha-bk-cal-day.avail{
  color:var(--bk-text);cursor:pointer;background:var(--bk-gold-fill);
  font-weight:500;
}
.sha-bk-cal-day.avail:hover{background:var(--bk-gold);color:#fff;}
.sha-bk-cal-day.selected{background:var(--bk-gold)!important;color:#fff!important;font-weight:600;}
.sha-bk-cal-day.today{box-shadow:inset 0 0 0 1px var(--bk-gold);}
.sha-bk-cal-legend{
  display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;
}
.sha-bk-cal-legend span{
  display:flex;align-items:center;gap:6px;
  font-size:.68rem;color:var(--bk-text3);
}
.sha-bk-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.sha-bk-dot.avail{background:var(--bk-gold-fill);box-shadow:inset 0 0 0 1px var(--bk-gold);}
.sha-bk-dot.sel{background:var(--bk-gold);}
.sha-bk-dot.off{background:var(--bk-bdr);}

/* ── TIME SLOTS ───────────────────────────────────────────── */
.sha-bk-slots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:7px;margin-bottom:8px;max-height:264px;overflow-y:auto;
  padding:3px;
}
.sha-bk-slots::-webkit-scrollbar{width:7px;}
.sha-bk-slots::-webkit-scrollbar-track{background:var(--bk-cream);}
.sha-bk-slots::-webkit-scrollbar-thumb{background:var(--bk-bdr);border-radius:4px;}
.sha-bk-slot{
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--bk-bdr2);
  padding:11px 8px;cursor:pointer;font-family:var(--bk-font-body);
  text-align:center;transition:border-color .25s,background .25s;
}
.sha-bk-slot:hover{border-color:var(--bk-gold);background:var(--bk-gold-fill);}
.sha-bk-slot.on{border-color:var(--bk-gold);background:var(--bk-gold);}
.sha-bk-slot.on .sha-bk-slot-time{color:#fff;}
.sha-bk-slot-time{
  font-family:var(--bk-font-head);font-size:.92rem;font-weight:500;
  color:var(--bk-text);white-space:nowrap;
}
.sha-bk-slot-label{font-size:.66rem;color:var(--bk-text3);font-weight:300;}

/* ── INPUTS ───────────────────────────────────────────────── */
.sha-bk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sha-bk-input-wrap{margin-bottom:15px;}
.sha-bk-input-wrap label{
  display:block;font-size:.64rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bk-text3);margin-bottom:7px;
}
.sha-bk-opt{opacity:.55;text-transform:none;letter-spacing:0;font-weight:400;}
.sha-bk-input-wrap input,
.sha-bk-input-wrap select,
.sha-bk-input-wrap textarea{
  width:100%;background:var(--bk-cream);border:1px solid var(--bk-bdr2);
  color:var(--bk-text);padding:12px 15px;font-family:var(--bk-font-body);
  font-size:.92rem;font-weight:300;outline:none;transition:border-color .25s;
  border-radius:0;
}
.sha-bk-input-wrap input:focus,
.sha-bk-input-wrap select:focus,
.sha-bk-input-wrap textarea:focus{border-color:var(--bk-gold);}
.sha-bk-input-wrap textarea{resize:vertical;min-height:80px;}

/* ── SUMMARY ──────────────────────────────────────────────── */
.sha-bk-summary{
  background:var(--bk-cream);border:1px solid var(--bk-bdr2);
  padding:16px 20px;margin:18px 0;
}
.sha-bk-sum-row{
  display:flex;justify-content:space-between;gap:14px;
  font-size:.8rem;padding:7px 0;border-bottom:1px solid var(--bk-bdr2);
  color:var(--bk-text3);
}
.sha-bk-sum-row:last-child{border-bottom:none;}
.sha-bk-sum-row strong{color:var(--bk-gold-dk);font-weight:500;text-align:right;}

/* ── BUTTONS ──────────────────────────────────────────────── */
.sha-bk-actions{display:flex;gap:10px;margin-top:26px;}
.sha-bk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;font-family:var(--bk-font-body);font-size:.74rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:none;cursor:pointer;transition:all .25s;border-radius:0;
}
.sha-bk-btn--gold{background:var(--bk-gold);color:#fff;flex:1;}
.sha-bk-btn--gold:hover{background:var(--bk-gold-dk);}
.sha-bk-btn--ghost{
  background:transparent;color:var(--bk-text3);border:1px solid var(--bk-bdr2);
}
.sha-bk-btn--ghost:hover{border-color:var(--bk-gold);color:var(--bk-gold);}
.sha-bk-btn--wa{background:#25D366;color:#fff;width:100%;margin-bottom:10px;}
.sha-bk-btn--wa:hover{opacity:.9;}
.sha-bk-btn:disabled{opacity:.6;cursor:wait;}

/* ── ERROR & FINEPRINT ────────────────────────────────────── */
.sha-bk-error{
  display:none;color:#C0392B;font-size:.78rem;margin:10px 0 0;font-weight:400;
}
.sha-bk-error.show{display:block;}
.sha-bk-fineprint{
  font-size:.68rem;color:var(--bk-text3);text-align:center;
  margin:14px 0 0;font-weight:300;line-height:1.6;
}

/* ── CONFIRMATION MODAL ───────────────────────────────────── */
.sha-bk-modal-wrap{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);
  z-index:99999;align-items:center;justify-content:center;padding:20px;
}
.sha-bk-modal-wrap.open{display:flex;}
.sha-bk-modal{
  background:#fff;padding:46px 40px;max-width:440px;width:100%;text-align:center;
  font-family:var(--bk-font-body);animation:shaBkModalIn .35s ease;
}
@keyframes shaBkModalIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.sha-bk-modal-ico{
  width:58px;height:58px;border-radius:50%;background:#9B7B2A;color:#fff;
  font-size:1.6rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.sha-bk-modal h3{
  font-family:'Playfair Display',Georgia,serif;font-size:1.7rem;font-weight:500;
  color:#1C1A14;margin:0 0 10px;
}
.sha-bk-modal p{
  font-size:.86rem;color:#5A5040;line-height:1.65;margin:0 0 20px;font-weight:300;
}
.sha-bk-modal-close{
  width:100%;background:none;border:1px solid #EDE6D6;color:#9A9080;
  padding:11px;font-family:var(--bk-font-body);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .25s;
}
.sha-bk-modal-close:hover{border-color:#9B7B2A;color:#9B7B2A;}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:560px){
  .sha-bk{padding:32px 14px;}
  .sha-bk-head{padding:32px 24px 22px;}
  .sha-bk-heading{font-size:1.8rem;}
  .sha-bk-step{padding:30px 24px;}
  .sha-bk-cards,.sha-bk-grid2{grid-template-columns:1fr;}
  .sha-bk-actions{flex-direction:column;}
  .sha-bk-modal{padding:34px 24px;}
}