/* PickleHub Booking – booking.css */

.phb-wrapper { font-family: 'Work Sans', sans-serif; }
.phb-wrapper .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.phb-wrapper .scrollbar-hide::-webkit-scrollbar { display: none; }
.phb-wrapper .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Modal backdrop ── */
#phb-modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 99998;
}
#phb-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#phb-modal.open,
#phb-modal-backdrop.open { display: flex; }

#phb-modal-box {
  background: #ffffff;
  border-radius: 1rem;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
  animation: phbSlideUp 0.25s ease;
}
.dark #phb-modal-box { background: #1e293b; color: #f1f5f9; }

@keyframes phbSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Step indicator ── */
.phb-step-indicator { display: flex; align-items: center; }
.phb-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex: 1; position: relative;
}
.phb-step:not(:last-child)::after {
  content: '';
  position: absolute; top: 14px; left: 50%; right: -50%;
  height: 2px; background: #e2e8f0;
}
.phb-step.done::after { background: #C58415; }
.phb-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #e2e8f0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; position: relative; z-index: 1;
  transition: all 0.2s;
}
.phb-step.active .phb-step-dot { border-color: #C58415; background: #C58415; color: #fff; }
.phb-step.done   .phb-step-dot { border-color: #C58415; background: #C58415; color: #fff; }
.phb-step-label  { font-size: 10px; font-weight: 600; color: #94a3b8; text-align: center; }
.phb-step.active .phb-step-label,
.phb-step.done   .phb-step-label { color: #C58415; }

/* ── Form inputs ── */
.phb-input {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  outline: none;
  transition: border-color 0.15s;
  background: #f8fafc;
  color: #1e293b;
}
.phb-input:focus { border-color: #C58415; background: #fff; }

/* ── Payment method labels ── */
.phb-pay-label {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 0.75rem;
  border: 2px solid #e2e8f0; cursor: pointer;
  transition: border-color 0.15s;
}
.phb-pay-label:hover  { border-color: rgba(197,132,21,0.4); }
.phb-pay-label.active { border-color: #C58415; background: rgba(197,132,21,0.05); }

/* ── Grid selected slot ── */
.phb-slot-selected {
  background: #C58415 !important;
  color: #fff !important;
  border-color: #C58415 !important;
  box-shadow: 0 4px 12px rgba(197,132,21,0.35) !important;
}

/* ── Cart badge pulse ── */
@keyframes phbPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.phb-cart-pulse { animation: phbPulse 0.4s ease; }

/* ── Checkmark animation ── */
@keyframes phbCheckDraw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0;  }
}
.phb-check-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: phbCheckDraw 0.5s 0.2s forwards ease;
}

/* ── Tailwind config (injected via JS) ── */