/* ============================================================
   BOOKING MODAL — booking-modal.css  (v2 — mystic redesign)
   "Book a Session" flow: category → service → duration → redirect
   Built from the same visual language as .svc-c cards / hero
   nebula background / gold-violet palette already on the site.
   ============================================================ */

.bm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bm-overlay.open {
  display: flex;
  animation: bmFadeIn .3s ease;
}

@keyframes bmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal shell — nebula glass panel ── */
.bm-modal {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 24px;
  padding: 40px 36px 32px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(160deg, rgba(26,21,53,.92) 0%, rgba(14,11,31,.96) 100%);
  border: 1px solid rgba(226,185,90,.18);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 60px rgba(91,33,182,.12),
    inset 0 1px 0 rgba(226,185,90,.08);
  animation: bmRise .35s cubic-bezier(.25,.46,.45,.94);
}

@keyframes bmRise {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bm-modal::-webkit-scrollbar { width: 5px; }
.bm-modal::-webkit-scrollbar-thumb { background: rgba(226,185,90,.3); border-radius: 4px; }

/* Twinkling starfield, scattered across the panel */
.bm-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; z-index: 0; }
.bm-star {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--gold2);
  border-radius: 50%;
  opacity: .25;
  animation: bmTwinkle 3.2s ease-in-out infinite;
}
@keyframes bmTwinkle {
  0%, 100% { opacity: .15; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.6); }
}

.bm-modal > * { position: relative; z-index: 1; }

.bm-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 34px; height: 34px;
  border: 1px solid rgba(226,185,90,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  z-index: 2;
}
.bm-close:hover {
  color: var(--ink);
  background: var(--gold2);
  border-color: var(--gold2);
  transform: rotate(90deg);
}

/* ── Header ── */
.bm-glyph-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bm-glyph-row .bm-rule {
  flex: 1;
  height: 1px;
  max-width: 60px;
  background: linear-gradient(90deg, transparent, rgba(226,185,90,.5));
}
.bm-glyph-row .bm-rule.right { background: linear-gradient(90deg, rgba(226,185,90,.5), transparent); }
.bm-glyph-sun {
  font-size: 13px;
  color: var(--gold);
  animation: bmSunSpin 10s linear infinite;
  display: inline-block;
}
@keyframes bmSunSpin { to { transform: rotate(360deg); } }

.bm-eyebrow {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.bm-title {
  text-align: center;
  font-family: 'Cormorant Upright', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 6px;
}
.bm-title em { color: var(--gold2); font-style: italic; }

.bm-sub {
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 15.5px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 28px;
  min-height: 22px;
}

/* ── Constellation stepper ── */
.bm-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}
.bm-node {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 1px solid rgba(157,144,187,.3);
  color: var(--muted);
  background: rgba(255,255,255,.02);
  cursor: default;
  transition: all .3s ease;
  flex-shrink: 0;
}
.bm-node.done {
  cursor: pointer;
  color: var(--ink);
  background: var(--gold2);
  border-color: var(--gold2);
}
.bm-node.current {
  color: var(--gold2);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(226,185,90,.12), 0 0 16px rgba(226,185,90,.35);
  animation: bmNodePulse 1.8s ease-in-out infinite;
}
@keyframes bmNodePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(226,185,90,.12), 0 0 14px rgba(226,185,90,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(226,185,90,.18), 0 0 22px rgba(226,185,90,.5); }
}
.bm-node-line {
  width: 28px;
  height: 1px;
  background: rgba(157,144,187,.25);
  flex-shrink: 0;
  position: relative;
}
.bm-node-line.filled { background: rgba(226,185,90,.55); }

/* ── Steps ── */
.bm-step { display: none; }
.bm-step.active { display: block; animation: bmStepIn .3s ease; }
@keyframes bmStepIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Mystic option cards (category & service) ── */
.bm-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  padding: 24px 18px 20px;
  background: linear-gradient(150deg, rgba(31,26,61,.7) 0%, rgba(17,13,38,.75) 100%);
  border: 1px solid rgba(139,92,246,.16);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), border-color .35s, box-shadow .35s;
  font-family: 'Jost', sans-serif;
  color: var(--cream);
}
.bm-card::before {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,185,90,.14), transparent 70%);
  top: var(--my, -60px); left: var(--mx, -60px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.bm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226,185,90,.4);
  box-shadow: 0 14px 36px rgba(0,0,0,.35), 0 0 24px rgba(226,185,90,.08);
}
.bm-card:hover::before { opacity: 1; }

.bm-card-ic {
  display: block;
  font-size: 26px;
  color: var(--gold2);
  margin-bottom: 14px;
  filter: drop-shadow(0 0 8px rgba(226,185,90,.3));
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.bm-card:hover .bm-card-ic { transform: scale(1.15) rotate(-6deg); }

.bm-card-name {
  font-family: 'Cormorant Upright', serif;
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.bm-card-desc {
  font-family: 'EB Garamond', serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  display: block;
}

/* Single-column variant for service step under narrower categories */
.bm-grid.bm-grid-1 { grid-template-columns: 1fr; }

/* ── Duration cards — moon-phase styled ── */
.bm-grid-duration { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bm-dur-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 10px 18px;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(150deg, rgba(31,26,61,.7) 0%, rgba(17,13,38,.75) 100%);
  border: 1px solid rgba(139,92,246,.16);
  transition: transform .3s ease, border-color .3s, box-shadow .3s;
  color: var(--cream);
  font-family: 'Jost', sans-serif;
}
.bm-dur-card:hover {
  transform: translateY(-3px);
  border-color: rgba(226,185,90,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.3), 0 0 20px rgba(226,185,90,.1);
}
.bm-moon {
  width: 26px; height: 26px;
  border-radius: 50%;
  position: relative;
  background: rgba(226,185,90,.08);
  border: 1px solid rgba(226,185,90,.4);
  overflow: hidden;
}
.bm-moon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: var(--gold2);
  box-shadow: 0 0 10px rgba(226,185,90,.6);
}
.bm-dur-card[data-phase="sliver"] .bm-moon::after  { width: 25%; }
.bm-dur-card[data-phase="half"]   .bm-moon::after  { width: 55%; }
.bm-dur-card[data-phase="full"]   .bm-moon::after  { width: 100%; left: 0; }

.bm-dur-time {
  font-family: 'Cormorant Upright', serif;
  font-size: 19px;
  font-weight: 600;
}
.bm-dur-tag {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 480px) {
  .bm-modal { padding: 30px 20px 24px; }
  .bm-title { font-size: 24px; }
  .bm-grid { grid-template-columns: 1fr; }
  .bm-grid-duration { grid-template-columns: 1fr; }
  .bm-node-line { width: 16px; }
}

/* ── Footer trail (text breadcrumb, secondary nav) ── */
.bm-trail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
}
.bm-crumb { color: var(--p3); cursor: pointer; opacity: .75; }
.bm-crumb:hover { color: var(--gold2); }
.bm-crumb.current { color: var(--gold2); cursor: default; opacity: 1; }
.bm-trail-sep { color: var(--muted); opacity: .4; }

/* ── Redirect step — sacred seal animation ── */
.bm-redirect {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 10px 6px;
}
.bm-seal {
  position: relative;
  width: 72px; height: 72px;
  margin-bottom: 22px;
}
.bm-seal-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(226,185,90,.25);
  border-top-color: var(--gold2);
  animation: bmSealSpin 1.6s linear infinite;
}
.bm-seal-ring.r2 {
  inset: 12px;
  border-width: 1px;
  border-top-color: transparent;
  border-right-color: var(--p2);
  animation-duration: 2.2s;
  animation-direction: reverse;
}
.bm-seal-core {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow: 0 0 18px rgba(226,185,90,.6);
  animation: bmCorePulse 1.6s ease-in-out infinite;
}
@keyframes bmSealSpin { to { transform: rotate(360deg); } }
@keyframes bmCorePulse {
  0%, 100% { opacity: .6; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.1); }
}

.bm-redirect-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.bm-redirect-text {
  font-family: 'Cormorant Upright', serif;
  font-size: 19px;
  color: var(--cream);
  margin-bottom: 4px;
}
.bm-redirect-sub {
  font-family: 'EB Garamond', serif;
  font-size: 13.5px;
  font-style: italic;
  color: var(--muted);
}
.bm-redirect-link {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bm-redirect-link:hover { color: var(--cream); }