/* ── VibeReserve CSS Custom Properties ─────────────────── */
:root {
  --vr-primary:        #1d4ed8;
  --vr-primary-hover:  #1e40af;
  --vr-primary-light:  #eff6ff;
  --vr-primary-rgb:    29,78,216;
  --vr-btn-bg:         #1d4ed8;
  --vr-btn-text:       #ffffff;
  --vr-btn-radius:     10px;
  --vr-card-radius:    14px;
  --vr-font-family:    'Inter', system-ui, sans-serif;
  --vr-font-size:      15px;
  --vr-heading-weight: 700;
  --vr-padding:        20px;
  --vr-border-color:   #e2e8f0;
  --vr-bg:             #ffffff;
  --vr-surface:        #f8fafc;
}

/*
 * VibeReserve Frontend CSS — Full responsive
 */

/* ── Keyframes ─────────────────────────────────── */
@keyframes vrFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes vrPop    { from{opacity:0;transform:scale(.92)}        to{opacity:1;transform:scale(1)} }
@keyframes vrSpin   { to{transform:rotate(360deg)} }

/* ── Spinner ────────────────────────────────────── */
.vr-spinner {
  display:inline-block; width:22px; height:22px;
  border:2.5px solid #dbeafe; border-top-color:var(--vr-primary);
  border-radius:50%; animation:vrSpin .65s linear infinite; flex-shrink:0;
}

/* ── Step panel ─────────────────────────────────── */
.vr-step-panel { animation:vrFadeUp .26s ease; }

/* Step dots */
#vr-booking-root .vr-step-dot.vr-dot-active  { background:#fff !important; border-color:#fff !important; color:var(--vr-primary) !important; box-shadow:0 0 0 4px rgba(255,255,255,.25); }
#vr-booking-root .vr-step-dot.vr-dot-done    { background:rgba(255,255,255,.9) !important; border-color:rgba(255,255,255,.9) !important; color:var(--vr-primary) !important; }
#vr-booking-root .vr-step-line.vr-line-done  { background:rgba(255,255,255,.7) !important; }

/* ── Service cards ──────────────────────────────── */
#vr-booking-root .vr-svc-card:hover { border-color:var(--vr-primary) !important; box-shadow:0 8px 30px rgba(var(--vr-primary-rgb),.15) !important; transform:translateY(-2px); }
#vr-booking-root .vr-svc-card.vr-svc-selected { border-color:var(--vr-primary) !important; box-shadow:0 0 0 3px rgba(var(--vr-primary-rgb),.12),0 8px 24px rgba(var(--vr-primary-rgb),.15) !important; background:var(--vr-primary-light) !important; }
#vr-booking-root .vr-svc-card.vr-svc-selected .vr-svc-check { display:flex !important; animation:vrPop .3s cubic-bezier(.34,1.56,.64,1); }

/* ── Staff chips ────────────────────────────────── */
#vr-booking-root .vr-staff-chip.vr-chip-selected { background:var(--vr-primary) !important; color:#fff !important; border-color:var(--vr-primary) !important; box-shadow:0 3px 10px rgba(var(--vr-primary-rgb),.3); }

/* ── Category pills ─────────────────────────────── */
#vr-booking-root .vr-cat-pill.vr-pill-active { background:var(--vr-primary) !important; color:#fff !important; border-color:var(--vr-primary) !important; }

/* ── Next/Back buttons ──────────────────────────── */
#vr-booking-root .vr-btn-next:disabled { opacity:.45; cursor:not-allowed; box-shadow:none !important; }
#vr-booking-root .vr-btn-next:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--vr-primary-rgb),.45) !important; }
#vr-booking-root .vr-btn-confirm:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(var(--vr-primary-rgb),.5) !important; }
#vr-booking-root input[type="date"] { font-family:'Inter',sans-serif; color-scheme:light; }
#vr-booking-root, .vr-font-sans { font-family: var(--vr-font-family, 'Inter', system-ui, sans-serif); font-size: var(--vr-font-size, 15px); }

/* ════════════════════════════════════════════════
   TIME SLOTS
   ════════════════════════════════════════════════ */
#vr-slots { display:flex; flex-direction:column; gap:12px; }

#vr-booking-root .vr-slot-group { display:flex; flex-direction:column; gap:8px; }

#vr-booking-root .vr-slot-group-label { display:flex; align-items:center; gap:8px; }
#vr-booking-root .vr-slot-group-label::after { content:''; flex:1; height:1px; background:linear-gradient(to right,#e2e8f0,transparent); }
#vr-booking-root .vr-slot-group-pill { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:#475569; background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:20px; padding:4px 11px; white-space:nowrap; font-family:inherit; }

#vr-booking-root .vr-slot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }

#vr-booking-root .vr-slot {
  position:relative; display:flex !important; align-items:center !important; justify-content:center !important;
  padding:9px 4px !important; font-size:12px !important; font-weight:700 !important;
  font-family:'Inter',system-ui,sans-serif !important; border-radius:9px !important;
  border:1.5px solid #e2e8f0 !important; background:#fff !important; color:#334155 !important;
  cursor:pointer !important; transition:all .15s ease !important; outline:none !important;
  white-space:nowrap !important; line-height:1 !important; box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
  text-decoration:none !important; width:100% !important; box-sizing:border-box !important;
}
#vr-booking-root .vr-slot:hover:not(.vr-slot-unavail) { border-color:var(--vr-primary) !important; background:var(--vr-primary-light) !important; color:var(--vr-primary) !important; transform:translateY(-2px) !important; box-shadow:0 4px 10px rgba(37,99,235,.18) !important; }
#vr-booking-root .vr-slot.vr-slot-selected { background:linear-gradient(135deg,var(--vr-primary-hover),var(--vr-primary)) !important; border-color:var(--vr-primary) !important; color:#fff !important; box-shadow:0 4px 12px rgba(var(--vr-primary-rgb),.4) !important; transform:translateY(-2px) !important; }
#vr-booking-root .vr-slot.vr-slot-unavail { opacity:.35 !important; cursor:not-allowed !important; background:#f8fafc !important; color:#94a3b8 !important; text-decoration:line-through !important; box-shadow:none !important; transform:none !important; }

.vr-slots-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:28px 0; }
.vr-slots-empty { padding:24px 0; text-align:center; }

.vr-slots-area { max-height:300px; overflow-y:auto; padding-right:3px; }
.vr-slots-area::-webkit-scrollbar { width:3px; }
.vr-slots-area::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* ════════════════════════════════════════════════
   BASE RESPONSIVE RULES
   ════════════════════════════════════════════════ */

/* Root container */
#vr-booking-root { width:100%; max-width:700px; margin:0 auto; box-sizing:border-box; }

/* Card — no side overflow on mobile */
#vr-booking-root .vr-max-w-3xl { max-width:100% !important; }
#vr-booking-root .vr-bg-white.vr-rounded-3xl { border-radius:16px !important; overflow:hidden; }

/* Step header padding */
#vr-booking-root .vr-relative.vr-px-8 { padding-left:20px !important; padding-right:20px !important; }

/* Inner step panels — default px-8 */
.vr-step-inner { padding:24px 28px 8px; }

/* Action bar — bottom buttons */
.vr-action-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; border-top:1px solid #f1f5f9; background:rgba(248,250,252,.8);
}

/* Step 2 grid — side by side default */
.vr-step2-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:20px;
  align-items:start;
}

/* Step 3 details grid */
.vr-step3-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.vr-step3-grid .vr-full { grid-column:1/-1; }

/* ════════════════════════════════════════════════
   MOBILE — max 520px
   ════════════════════════════════════════════════ */
@media (max-width:520px) {

  /* Header */
  #vr-booking-root .vr-relative.vr-px-8,
  #vr-booking-root [class*="vr-px-8"] { padding-left:16px !important; padding-right:16px !important; }
  #vr-booking-root [class*="vr-pt-8"] { padding-top:20px !important; }
  #vr-booking-root [class*="vr-pb-6"] { padding-bottom:14px !important; }

  /* Title */
  #vr-booking-root h2[class*="vr-text-2xl"] { font-size:18px !important; }

  /* Progress steps — smaller dots */
  #vr-booking-root .vr-step-dot { width:30px !important; height:30px !important; font-size:12px !important; }
  #vr-booking-root .vr-step-line { min-width:6px !important; max-width:30px !important; }
  #vr-booking-root .vr-step-lbl { font-size:9px !important; }

  /* Step inner */
  .vr-step-inner { padding:18px 16px 8px; }
  .vr-action-bar { padding:12px 16px; }

  /* Step 1: service cards — 2 col */
  #vr-booking-root [style*="repeat(auto-fill,minmax(180px"] {
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  #vr-booking-root .vr-svc-card .vr-h-28 { height:90px !important; }

  /* Step 2: Stack date + slots vertically */
  .vr-step2-grid { grid-template-columns:1fr !important; gap:16px !important; }

  /* Slots: 3 col on mobile */
  #vr-booking-root .vr-slot-grid { grid-template-columns:repeat(3,1fr) !important; gap:5px !important; }
  #vr-booking-root .vr-slot { font-size:11px !important; padding:8px 3px !important; }
  .vr-slots-area { max-height:240px; }

  /* Selected time badge hidden on mobile (shown inline in slots) */
  #vr-selected-time-badge { display:none !important; }

  /* Step 3: single column */
  .vr-step3-grid { grid-template-columns:1fr !important; }
  .vr-step3-grid .vr-full { grid-column:1 !important; }

  /* Step 4 summary */
  #vr-booking-root .vr-max-w-52 { max-width:160px !important; }

  /* Back/Next buttons */
  .vr-action-bar button { font-size:12px !important; padding:9px 14px !important; }
  #vr-booking-root .vr-btn-confirm { font-size:12px !important; }

  /* Success screen */
  #vr-booking-root .vr-py-16 { padding-top:40px !important; padding-bottom:40px !important; }
  #vr-booking-root .vr-w-20 { width:64px !important; height:64px !important; }
  #vr-booking-root .vr-text-2xl { font-size:20px !important; }
}

/* ── Very small screens ─────────────────────────── */
@media (max-width:360px) {
  #vr-booking-root .vr-step-lbl { display:none !important; }
  #vr-booking-root [style*="repeat(auto-fill,minmax(180px"] { grid-template-columns:1fr !important; }
  #vr-booking-root .vr-slot-grid { grid-template-columns:repeat(3,1fr) !important; }
  #vr-booking-root .vr-slot { font-size:10px !important; }
}