/* ===========================================
   WD Studios Booking — Frontend Styles
   Two-pane month calendar + day panel
   =========================================== */

/* ---------- Variables ---------- */
:root{
  --wdsb-text:#111827;
  --wdsb-muted:#6b7280;
  --wdsb-border:#e5e7eb;
  --wdsb-bg:#ffffff;
  --wdsb-soft:#f9fafb;
  --wdsb-soft-2:#f3f4f6;
  --wdsb-primary:#2563eb;
  --wdsb-primary-d:#1d4ed8;
  --wdsb-radius:12px;
  --wdsb-radius-sm:8px;
  --wdsb-shadow:0 1px 2px rgb(0 0 0 / 8%);
}

/* ---------- Base ---------- */
.wdsb-wizard{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; color:var(--wdsb-text); line-height:1.5; }
@keyframes wdsbSlideIn { from {opacity:0; transform:translateX(16px);} to {opacity:1; transform:translateX(0);} }
.wdsb-step,.wdsb-card{ background:#fff; border:1px solid var(--wdsb-border); border-radius:var(--wdsb-radius); padding:16px; box-shadow:var(--wdsb-shadow); }
.wdsb-step{ animation:wdsbSlideIn .25s ease; }
.wdsb-step__title{ color:#111 !important; margin:4px 0 12px; font-weight:700; font-size:1.15rem; }
.wdsb-row{ margin:10px 0; }
.wdsb-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.wdsb-back{ display:inline-block; margin-bottom:8px; color:#374151; cursor:pointer; text-decoration:none; }
.wdsb-back:hover{ text-decoration:underline; }

/* Inputs */
.wdsb-row input[type="number"], .wdsb-row input[type="text"], .wdsb-row input[type="email"],
.wdsb-row input[type="password"], .wdsb-row select, .wdsb-row textarea{
  width:100%; max-width:460px; border:1px solid var(--wdsb-border); border-radius:10px; padding:8px 10px; font-size:.95rem; outline:none; background:#fff;
}
.wdsb-row textarea{ max-width:100%; }

/* Buttons (bootstrap-friendly fallback) */
.wdsb-wizard .btn{ display:inline-block; border:1px solid transparent; border-radius:10px; padding:8px 14px; line-height:1.2; cursor:pointer; font-weight:600; background:var(--wdsb-soft-2); color:#111; }
.wdsb-wizard .btn:hover{ filter:brightness(0.98); }
.wdsb-wizard .btn-primary{ background:var(--wdsb-primary); color:#fff; border-color:var(--wdsb-primary-d); }
.wdsb-wizard .btn-primary:hover{ background:var(--wdsb-primary-d); }

/* Studios */
.wdsb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.wdsb-studio-card{ border:1px solid var(--wdsb-border); border-radius:var(--wdsb-radius); padding:12px; background:#fff; display:flex; flex-direction:column; min-height:100%; }
.wdsb-studio-card img{ width:100%; height:160px; object-fit:cover; border-radius:10px; }
.wdsb-studio-card h3{ margin:10px 0 4px; font-size:1.05rem; line-height:1.25; }
.wdsb-studio-card p{ margin:0 0 8px; color:var(--wdsb-muted); }
.wdsb-levels{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.wdsb-level{ display:flex; align-items:flex-start; gap:8px; }
.wdsb-level input{ margin-top:3px; }
.wdsb-level-label{ display:inline-block; }
.wdsb-badge{ background:#e5e7eb; color:#374151; border-radius:999px; padding:2px 8px; font-size:.75rem; margin-left:6px; }
.wdsb-choose-wrap{ margin-top:auto; display:flex; justify-content:flex-end; }

/* Totals */
.wdsb-summary{ margin-top:10px; }
.wdsb-totals{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; border-top:1px dashed var(--wdsb-border); padding-top:10px; }

/* Terms */
.wdsb-terms{ max-height:180px; overflow:auto; border:1px solid var(--wdsb-border); border-radius:10px; padding:10px; margin-bottom:8px; }

/* Options pages */
.wdsb-group-head h3{ margin:8px 0; }
.wdsb-group-head p{ margin:4px 0 8px; color:var(--wdsb-muted); }
.wdsb-option-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.wdsb-option-left{ display:flex; align-items:center; gap:8px; }
.wdsb-option-price{ white-space:nowrap; }
.wdsb-opt-img{ width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--wdsb-border); }
.wdsb-option-help{ margin:-6px 0 8px 28px; color:var(--wdsb-muted); }

/* =========================
   Two-pane Calendar Layout
   ========================= */
.wdsb-calwrap{
  display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:start;
}
.wdsb-daypanel{ position:relative; }
.wdsb-daypanel__card{ position:sticky; top:12px; }

.wdsb-month{ border:1px solid var(--wdsb-border); border-radius:var(--wdsb-radius); background:#fff; overflow:hidden; box-shadow:var(--wdsb-shadow); }
.wdsb-month__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:#111827; color:#fff; }
.wdsb-month__title{ margin:0; font-size:1rem; font-weight:600; }
.wdsb-legend{ display:flex; gap:12px; font-size:.9rem; flex-wrap:wrap; }
.wdsb-legend .dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; vertical-align:middle; background:#d1d5db; }
.wdsb-legend .dot.green{ background:#22c55e; }
.wdsb-legend .dot.amber{ background:#f59e0b; }
.wdsb-legend .dot.red{ background:#ef4444; }

.wdsb-cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--wdsb-soft); border-bottom:1px solid var(--wdsb-border); }
.wdsb-cal__dow>div{ padding:8px 10px; font-size:.85rem; color:var(--wdsb-muted); text-align:center; }

.wdsb-cal.wdsb-cal--month{ display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; padding:6px; } /* force grid */
.wdsb-cal__cell{ min-height:56px; border:1px solid #f3f4f6; background:#fff; display:flex; align-items:flex-start; justify-content:flex-start; padding:6px 7px; position:relative; border-radius:8px; margin:4px; text-align:left; }
.wdsb-cal__cell.blank{ background:transparent; border-color:transparent; }
.wdsb-cal__cell.dim{ color:#c7c7c7; background:#fafafa; border-color:#f1f5f9; }
.wdsb-cal__num{ font-size:.95rem; line-height:1; font-weight:600; }

/* Clickable date cells */
button.wdsb-cal__cell{ cursor:pointer; transition:transform .05s ease, box-shadow .1s ease; }
button.wdsb-cal__cell:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgb(0 0 0 / 8%); }

/* RAG */
.wdsb-cal__cell.green{ background:#dcfce7; border-color:#bbf7d0; }
.wdsb-cal__cell.amber{ background:#fef3c7; border-color:#fde68a; }
.wdsb-cal__cell.red{ background:#fee2e2; border-color:#fecaca; }

/* Day panel */
.wdsb-daypanel__title{ margin:0 0 6px; }
.wdsb-times{ display:flex; flex-wrap:wrap; gap:8px; }
.wdsb-time{
  border:1px solid var(--wdsb-border); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer;
}
.wdsb-time:hover{ background:#f8fafc; }
.wdsb-time.active{ background:#2563eb; color:#fff; border-color:#1d4ed8; }

.wdsb-alert{ border:1px solid var(--wdsb-border); background:var(--wdsb-soft); border-radius:10px; padding:8px 10px; color:#374151; margin-bottom:8px; }

/* Legacy list calendar (kept for safety if rendered elsewhere) */
.wdsb-cal{ display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; }
.wdsb-day{ border:1px solid var(--wdsb-border); background:#fff; color:#111; border-radius:var(--wdsb-radius-sm); padding:8px 10px; cursor:pointer; min-width:72px; transition:transform .05s ease, box-shadow .1s ease; }
.wdsb-day:hover{ transform:translateY(-1px); box-shadow:var(--wdsb-shadow); }
.wdsb-day.green{ background:#dcfce7; border-color:#bbf7d0; }
.wdsb-day.orange,.wdsb-day.amber{ background:#fef3c7; border-color:#fde68a; }
.wdsb-day.red{ background:#fee2e2; border-color:#fecaca; }

/* Utilities */
.wdsb-muted{ color:var(--wdsb-muted); }

/* Responsive */
@media (max-width: 900px){
  .wdsb-calwrap{ grid-template-columns:1fr; }
  .wdsb-daypanel__card{ position:static; }
}