/* ============================================================
   BIDII CLEANERS — booking system styles
   Loaded on top of bidii.css.
   ============================================================ */

.bk-layout { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 980px) { .bk-layout { grid-template-columns: 1fr 340px; gap: 2.2rem; } }

/* ---------- Progress ---------- */
.bk-steps { display: flex; gap: .4rem; margin-bottom: 1.8rem; list-style: none; padding: 0; }
.bk-steps li { flex: 1; }
.bk-steps .bar { height: 5px; border-radius: 3px; background: var(--b-line); transition: background .25s; }
.bk-steps li[data-state="done"] .bar,
.bk-steps li[data-state="current"] .bar { background: var(--b-blue); }
.bk-steps .lab { font-size: .76rem; font-weight: 700; color: var(--b-slate); margin-top: .45rem; display: block; letter-spacing: .02em; }
.bk-steps li[data-state="current"] .lab { color: var(--b-blue); }
@media (max-width: 560px) { .bk-steps .lab { font-size: .68rem; } }

/* ---------- Panels ---------- */
.bk-panel {
  background: #fff; border: 1px solid var(--b-line); border-radius: var(--b-r-lg);
  padding: 1.5rem; box-shadow: var(--b-sh-sm);
}
@media (min-width: 720px) { .bk-panel { padding: 2rem; } }
.bk-panel[hidden] { display: none !important; }
.bk-panel h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.bk-panel > .b-muted { margin-bottom: 1.5rem; }

.bk-group { margin-bottom: 1.6rem; }
.bk-group > h3 { font-size: .95rem; font-weight: 800; margin-bottom: .8rem; letter-spacing: -0.01em; }

/* ---------- Selectable option cards ---------- */
.bk-options { display: grid; gap: .6rem; }
@media (min-width: 560px) { .bk-options.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .bk-options.three { grid-template-columns: repeat(3,1fr); } }

.bk-opt { position: relative; }
.bk-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bk-opt input + span {
  display: flex; flex-direction: column; gap: .15rem;
  border: 1.5px solid var(--b-line); border-radius: var(--b-r);
  padding: .85rem 1rem; cursor: pointer; background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
  min-height: 56px; justify-content: center;
}
.bk-opt input:hover + span { border-color: #AFC9E3; }
.bk-opt input:checked + span {
  border-color: var(--b-blue); background: var(--b-soft);
  box-shadow: 0 0 0 1px var(--b-blue);
}
.bk-opt input:focus-visible + span { outline: 3px solid var(--b-blue); outline-offset: 2px; }
.bk-opt .t { font-weight: 700; font-size: .96rem; }
.bk-opt .s { font-size: .82rem; color: var(--b-slate); }
.bk-opt .p { font-size: .84rem; font-weight: 800; color: var(--b-blue); margin-top: .1rem; }

/* checkbox style extras */
.bk-opt.check input + span { flex-direction: row; align-items: center; gap: .7rem; }
.bk-opt.check .box {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--b-line);
  flex-shrink: 0; display: grid; place-items: center; background: #fff; transition: all .15s;
}
.bk-opt.check input:checked + span .box { background: var(--b-blue); border-color: var(--b-blue); }
.bk-opt.check .box svg { opacity: 0; color: #fff; }
.bk-opt.check input:checked + span .box svg { opacity: 1; }
.bk-opt.check .grow { flex: 1; }

/* ---------- Calendar ----------
   Hand-built so the month is always spelled out. Day cells are kept at
   44px so they can be tapped accurately on a phone, outdoors. */
.bk-cal {
  border: 1px solid var(--b-line); border-radius: var(--b-r);
  padding: .9rem; background: #fff; max-width: 420px;
}
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.bk-cal-month { font-weight: 800; font-size: 1rem; }
.bk-cal-arrow {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--b-line); background: #fff; color: var(--b-ink);
  display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.bk-cal-arrow:hover:not(:disabled) { border-color: var(--b-blue); color: var(--b-blue); }
.bk-cal-arrow:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 2px; }
.bk-cal-arrow:disabled { opacity: .3; cursor: not-allowed; }

.bk-cal-dows, .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-cal-dows span {
  text-align: center; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--b-slate); padding-bottom: .35rem;
}
.bk-day-pad { height: 44px; }
.bk-day {
  height: 44px; border: 0; background: #fff; border-radius: var(--b-r-sm);
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--b-ink); cursor: pointer; transition: background .12s, color .12s, box-shadow .12s;
}
.bk-day:hover:not(:disabled) { background: var(--b-soft); color: var(--b-blue); }
.bk-day:focus-visible { outline: 3px solid var(--b-blue); outline-offset: -1px; }
.bk-day:disabled { color: #B6C2CF; cursor: not-allowed; }
.bk-day.is-closed { text-decoration: line-through; }
.bk-day.is-chosen {
  background: var(--b-blue); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 1px var(--b-blue);
}
.bk-day.is-chosen:hover { background: var(--b-blue); color: #fff; }

/* The chosen date written out in full, so nobody can misread the grid. */
.bk-cal-chosen {
  margin-top: .8rem; font-weight: 700; font-size: .95rem; color: var(--b-blue);
}
.bk-cal-chosen[hidden] { display: none; }

/* ---------- Time slots ---------- */
.bk-slots { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; }
@media (min-width: 560px) { .bk-slots { grid-template-columns: repeat(3,1fr); } }
.bk-slots .bk-opt input + span { text-align: center; align-items: center; min-height: 50px; padding: .7rem .5rem; }
.bk-slots .bk-opt input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Summary ---------- */
.bk-summary {
  background: #fff; border: 1px solid var(--b-line); border-radius: var(--b-r-lg);
  padding: 1.4rem; box-shadow: var(--b-sh);
}
@media (min-width: 980px) { .bk-summary { position: sticky; top: calc(var(--demo-bar-h, 0px) + 1rem); } }
.bk-summary h3 { font-size: 1rem; margin-bottom: 1rem; }
.bk-lines { display: grid; gap: .55rem; font-size: .9rem; }
.bk-line { display: flex; justify-content: space-between; gap: 1rem; }
.bk-line .k { color: var(--b-slate); }
.bk-line .v { font-weight: 600; text-align: right; }
.bk-line.discount .v { color: var(--b-green); }
.bk-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--b-line); margin-top: 1rem; padding-top: 1rem;
}
.bk-total .k { font-weight: 800; }
.bk-total .v { font-weight: 800; font-size: 1.6rem; color: var(--b-blue); letter-spacing: -0.03em; }
.bk-empty { color: var(--b-slate); font-size: .9rem; }

/* ---------- Nav buttons ---------- */
.bk-nav { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.bk-nav .b-btn { flex: 1; min-width: 140px; }
@media (min-width: 560px) { .bk-nav .b-btn { flex: 0 1 auto; } }

.bk-error {
  background: #FDECEA; border: 1px solid #F5C6C0; color: #8E2A1E;
  border-radius: var(--b-r-sm); padding: .8rem 1rem; font-size: .9rem;
  margin-bottom: 1.2rem; font-weight: 600;
}
.bk-error[hidden] { display: none; }

/* ---------- Review list ---------- */
.bk-review-list { display: grid; gap: 0; border: 1px solid var(--b-line); border-radius: var(--b-r); overflow: hidden; }
.bk-review-row { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--b-line); font-size: .93rem; }
.bk-review-row:last-child { border-bottom: 0; }
.bk-review-row .k { color: var(--b-slate); flex-shrink: 0; }
.bk-review-row .v { font-weight: 700; text-align: right; }

/* ---------- Success ---------- */
.bk-success { text-align: center; padding: 1rem 0; }
.bk-tick {
  width: 76px; height: 76px; border-radius: 50%; background: #E3F7EF;
  color: var(--b-green); display: grid; place-items: center; margin: 0 auto 1.3rem;
}
.bk-ref {
  display: inline-block; background: var(--b-soft); color: var(--b-blue);
  border-radius: var(--b-pill); padding: .5rem 1.3rem;
  font-weight: 800; letter-spacing: .07em; font-size: 1.05rem; margin: .5rem 0 1.3rem;
}
.bk-next { text-align: left; max-width: 420px; margin: 1.5rem auto 0; display: grid; gap: .8rem; }
.bk-next li { display: flex; gap: .7rem; font-size: .92rem; color: var(--b-slate); }
.bk-next svg { flex-shrink: 0; color: var(--b-green); margin-top: 3px; }