/* ========== SDI Booking — Frontend (Classic Restored) ========== */
:root{
  --sdi-dark-bg: #000000;
  --sdi-select-bg: #A0132C;
  --sdi-select-color: #ffffff;
  --sdi-accent: #1e88e5;
  --sdi-ok: #10b981;
  --sdi-danger: #ef4444;
  --sdi-muted: #64748b;
  --sdi-ring: rgba(30,136,229,.28);
  --sdi-bg: #ffffff;
  --sdi-bg-alt: #f8fafc;
  --sdi-border: #e5e7eb;
  --sdi-text: #0f172a;
  --sdi-text-dim: #334155;
  --sdi-slot-taken-bg-pink: #ede1e1;
  --sdi-slot-taken-border:  #fecaca;
  --sdi-slot-taken-text:    #9ca3af;
}

.sdi-booking-wrap, .sdi-booking-wrap * { box-sizing: border-box; }
.sdi-booking-wrap { max-width: 860px; margin: 25px auto; padding: 0 8px; }
.sdi-booking-wrap.sdi-compact { max-width: 720px; }

/* ---------- Service select (classic) ---------- */
.sdi-service-select{ display:flex; justify-content:start; margin: 0 0 12px; position:relative; }
.sdi-service-select select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:var(--sdi-select-bg) !important;
  border:1px solid var(--sdi-border);
  border-radius: 999px;
  padding: 10px 40px 10px 14px;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--sdi-select-color) !important;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  width: 100%;
}
.sdi-service-select select:focus{
  outline: none;
  border-color: var(--sdi-accent);
  box-shadow: 0 0 0 3px var(--sdi-ring);
}
.sdi-service-select::after{
  content: '▾';
  position: absolute;
  right: 12px;             /* simpler + stable */
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
  font-size: 12px;
}

/* ---------- Calendar shell ---------- */
.sdi-cal{
  width: 100%;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--sdi-text);
  background: #fff;
  border: 1px solid var(--sdi-border);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.sdi-cal > header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 12px;
}
.sdi-cal .month{ font-weight:700; letter-spacing:.2px; }
.sdi-cal .nav{ display:flex; gap:8px; }
.sdi-cal .nav button{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--sdi-border);
  background:#fff; cursor:pointer; font-size:16px;
}
.sdi-cal .nav button:hover{ background:var(--sdi-bg-alt); }

/* ---------- Grid ---------- */
.sdi-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.sdi-dayname{
  font-size:12px; color:#555; text-align:center; padding:6px 0;
}

/* ---------- Day cell ---------- */
.sdi-cell{
  position: relative;
  aspect-ratio: 1 / 1;          /* keep square on all screens */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .15s ease, transform .05s ease;
  min-height: 56px;
}
.sdi-cell:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.sdi-cell.disabled{ opacity:.45; pointer-events:none; filter:grayscale(.05); }

/* status colors */
.sdi-cell.available{ background:#ffffff; }
.sdi-cell.full{ background:#fff3f3; }
.sdi-cell.off{ background:#f7f7f7; }

/* date number */
.sdi-cell .d{
  font-weight:600; font-size:13px; color: var(--sdi-text);
  background:#f3f4f6; border-radius:8px; padding:2px 6px; display:inline-block;
}

/* small badge bottom-left */
.sdi-cell .badge{
  position:absolute; left:10px; bottom:10px;
  width:14px; height:14px; border-radius:999px; background:#e5e7eb;
}
.sdi-cell.available .badge{ background: var(--sdi-ok); }
.sdi-cell.full .badge{ background: var(--sdi-danger); }
.sdi-cell.off .badge{ background:#9ca3af; }

/* ---------- Legend ---------- */
.sdi-legend{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.sdi-legend .pill{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--sdi-border); background:#eef2ff; color:#111;
}
.sdi-legend .pill-available{ background: var(--sdi-ok); color:#fff; border-color: var(--sdi-ok); }
.sdi-legend .pill-full{ background: var(--sdi-danger); color:#fff; border-color: var(--sdi-danger); }
.sdi-legend .pill-off{ background:#9ca3af; color:#fff; border-color:#9ca3af; }

/* ---------- Modal (classic card, not fullscreen) ---------- */
.sdi-modal-backdrop{
  position: fixed; inset: 0; z-index: 9999;
  display:none; align-items:center; justify-content:center; /* center on all screens */
  background: rgba(0,0,0,.35);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:24px 12px;
}
.sdi-modal{
  width:min(560px,96vw);
  background:#fff; border:1px solid var(--sdi-border); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; overflow:hidden;
  max-height:min(720px,92vh);
}
.sdi-modal > header{
  padding:14px 16px; font-weight:700; border-bottom:1px solid var(--sdi-border);
  position:sticky; top:0; background:#fff; z-index:1;
}
.sdi-close{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--sdi-border); background:#fff; color:var(--sdi-text-dim);
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.sdi-close:hover{ background:#f8fafc; }

.sdi-modal .body{ padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-beavior:contain; }

/* ---------- Slots ---------- */
.sdi-slots{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px; margin-bottom:12px;
}
.sdi-slot{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; border-radius:10px; border:1px solid var(--sdi-border);
  background:#fff; cursor:pointer; font-size:13px; padding:0 8px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sdi-slot:hover{ background:#f9fafb; }
.sdi-slot.selected{ border-color:var(--sdi-accent); box-shadow:0 0 0 3px var(--sdi-ring); }
.sdi-slot.taken,.sdi-slot:disabled {
  background: var(--sdi-slot-taken-bg-pink);
  color: var(--sdi-slot-taken-text);
  border-color: var(--sdi-slot-taken-border);
  border-style:dashed; cursor:not-allowed; pointer-events:none;
  text-decoration-line: line-through;
  text-decoration-color: var(--sdi-slot-taken-text);
  text-decoration-thickness: 2px;
}

/* ---------- Form ---------- */
.sdi-form{ display:grid; gap:10px; }
.sdi-form label{ font-size:12px; color:var(--sdi-text-dim); display:block; }
.sdi-form input,.sdi-form textarea{
  width:100%; height:35px; padding:10px 12px; border:1px solid var(--sdi-border); border-radius:10px; margin-top:6px; background:#fff;
}
.sdi-form textarea{ height:auto; }
.sdi-form input:focus,.sdi-form textarea:focus{ outline:none; border-color:var(--sdi-accent); box-shadow:0 0 0 3px var(--sdi-ring); }
.sdi-submit{ height:40px; border:0; border-radius:10px; background:var(--sdi-accent); color:#fff; font-weight:600; cursor:pointer; }
.sdi-submit:disabled{ background:#cbd5e1; cursor:not-allowed; }
.sdi-selected-hint{ color:var(--sdi-text-dim); }

/* ---------- Toast (built-in) ---------- */
.sdi-toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:10000;
  background:rgba(20,20,20,.92); color:#fff;
  padding:10px 14px; border-radius:8px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, bottom .2s ease;
  max-width:92vw; text-align:center;
}
.sdi-toast.show{ opacity:1; bottom:34px; pointer-events:auto; }

/* ---------- Responsive tweaks (kept stable) ---------- */
@media (max-width:820px){
  .sdi-booking-wrap { max-width: 100%; }
  .sdi-grid{ gap: 0px; }
  .sdi-cal{ padding: 12px; }
  .sdi-cal .nav button{ width:34px; height:34px; }
}
@media (max-width:640px){
  /* keep cells square even on small screens */
  .sdi-cell{ aspect-ratio: 0; padding: 3px;min-width: 30px;min-height: 45px; }
  .sdi-service-select select{ width:100%; }
  .sdi-cell .badge{ 
    left: 6px; 
    bottom: 6px;
    width: 8px;
    height: 8px;
  }
  .sdi-cell .d{
    padding: 0px 3px;
    font-size: 11px;
  }
  .sdi-slots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Keep modal centered (no forced full-screen) */
  .sdi-modal-backdrop{ align-items:center; padding:24px 12px; }
  .sdi-modal{ width:min(560px,96vw); height:auto; max-height:min(86vh, 720px); border-radius:16px; }
  .sdi-modal .body{ padding:12px 16px; }
  .sdi-dayname{ font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
  .sdi-slot,.sdi-toast{ transition:none; }
}