<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*:not(script):not(style) { transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease, filter .3s ease; }
[data-theme="light"] {
  --bg-page:#F7F7F7;--bg-card:#FFFFFF;--bg-surface:#F0EFE9;--bg-inset:#E8E7E1;
  --text-primary:#161616;--text-secondary:#555550;--text-tertiary:#999890;
  --border:rgba(22,22,22,0.1);--border-md:rgba(22,22,22,0.2);
  --accent-bg:#161616;--accent-fg:#F7F7F7;--tag-bg:#EEEEE8;
  --slot-hover:#F0EFE9;--slot-selected-bg:#161616;--slot-selected-fg:#F7F7F7;
  --day-hover:#F0EFE9;--day-selected-bg:#000000;--day-selected-fg:#FCFCFC;
  --disabled-bg:#F7F7F7;--disabled-fg:#CCCCCC;
  --surface-interactive:rgba(22,22,22,0.06);
  --surface-interactive-hover:rgba(22,22,22,0.11);
  --bg-chip:#FCFCFC;--bg-chip-hover:#F0EFE9;
}
[data-theme="dark"] {
  --bg-page:#161616;--bg-card:#1E1E1C;--bg-surface:#252522;--bg-inset:#2E2E2A;
  --text-primary:#F7F7F7;--text-secondary:#AAAAAA;--text-tertiary:#666660;
  --border:rgba(247,247,247,0.08);--border-md:rgba(247,247,247,0.18);
  --accent-bg:#F7F7F7;--accent-fg:#161616;--tag-bg:#2A2A26;
  --slot-hover:#2A2A26;--slot-selected-bg:#F7F7F7;--slot-selected-fg:#161616;
  --day-hover:#2A2A26;--day-selected-bg:#F7F7F7;--day-selected-fg:#161616;
  --disabled-bg:#1A1A18;--disabled-fg:#444440;
  --surface-interactive:rgba(255,255,255,0.06);
  --surface-interactive-hover:rgba(255,255,255,0.1);
  --bg-chip:#2E2E2A;--bg-chip-hover:#3A3A36;
}
body {
  font-family:'Manrope',-apple-system,sans-serif;background:var(--bg-page);
  color:var(--text-primary);min-height:100vh;padding:2rem 1.25rem 4rem;
  transition:background .3s ease,color .3s ease,border-color .3s ease;-webkit-font-smoothing:antialiased;
}
.container { max-width:680px;margin:0 auto; }
.top-bar {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:2.25rem;padding-bottom:1.25rem;border-bottom:0.5px solid var(--border-md);
}
.brand { display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit; }
#brandLogo { height:22px;width:auto;display:block; }
.theme-switch {
  border:none;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.theme-switch-track {
  display:block;width:44px;height:24px;border-radius:999px;
  background:var(--bg-inset);border:0.5px solid var(--border-md);
  position:relative;transition:background .25s,border-color .25s;
}
.theme-switch-thumb {
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-primary);transition:transform .25s ease,background .25s;
}
[data-theme="dark"] .theme-switch-thumb { transform:translateX(20px); }
/* Service photo strip — matches Studio7Miami-Booking.html */
.gallery-card {
  background:transparent;border:0.5px solid transparent;border-radius:12px;
  overflow:hidden;margin-bottom:1rem;padding:14px 0;
}
.gallery-strip-wrap {
  overflow:hidden;position:relative;width:100%;
}
.gallery-strip {
  display:flex;gap:10px;padding:0 14px;
  animation:galleryScroll 40s linear infinite;
  width:max-content;
}
.gallery-strip:hover { animation-play-state:paused; }
.gallery-strip-item {
  flex-shrink:0;width:140px;aspect-ratio:2/3;border-radius:16px;overflow:hidden;
}
.gallery-strip-item img {
  width:100%;height:100%;object-fit:cover;display:block;
}
@keyframes galleryScroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-strip { animation:none; }
  .gallery-strip-item:nth-child(n+5) { display:none; }
}
.brand-mark {
  width:22px;height:22px;border-radius:4px;border:0.5px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  background:var(--bg-card);color:var(--text-primary);
}
.s7-icon { width:22px;height:22px;object-fit:contain;border-radius:4px;transition:filter .25s; }
[data-theme="dark"] .s7-icon { filter:invert(1); }
#brandLogo { filter:none; transition:filter .3s ease; }
[data-theme="dark"] #brandLogo { filter:invert(1); }
#palmIcon { filter:none; transition:filter .3s ease; }
[data-theme="dark"] #palmIcon { filter:invert(1); }
.brand-name { font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary); }
.page-header { margin-bottom:2rem; }
.page-title { font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary);line-height:1.2; }
.page-sub { font-size:13px;color:var(--text-secondary);margin-top:6px;line-height:1.6; }
.steps-bar {
  display:flex;align-items:center;justify-content:space-between;gap:0;margin-bottom:2rem;
  background:var(--bg-card);border:0.5px solid var(--border);border-radius:10px;
  padding:14px 18px;
}
.step-item { display:flex;align-items:center;justify-content:center;gap:8px;flex:1; }
.step-num {
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;
  background:#F7F7F7;border:0.5px solid var(--border-md);color:var(--text-tertiary);
  transition:background .2s,color .2s,border-color .2s;
}
.step-item.active .step-num { background:#000000;color:#FCFCFC;border-color:transparent; }
.step-item.done .step-num { background:#F7F7F7;border:0.5px solid var(--border-md);color:var(--text-tertiary);border-color:var(--border-md); }
.step-label { font-size:11px;font-weight:600;color:var(--text-tertiary);letter-spacing:.02em; }
.step-item.active .step-label { color:var(--text-primary); }
.step-divider { flex:1;height:0.5px;background:var(--border-md);margin:0 8px; }
[data-theme="dark"] .step-num { background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.25); }
[data-theme="dark"] .step-item.active .step-num { background:#F7F7F7;color:#161616;border-color:transparent; }
[data-theme="dark"] .step-item.done .step-num { background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.2); }
.booking-card, .time-card, .selection-summary, .detail-card, .addon-card, .shooter-card {
  background:var(--bg-card);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1rem;
}
.card-header { padding:14px 20px 12px;border-bottom:0.5px solid var(--border); }
.card-title { font-size:12px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em; }
.card-sub { font-size:11px;color:var(--text-tertiary);margin-top:2px;line-height:1.5; }
.detail-body, .addon-body { padding:16px 20px 18px; }
.service-name { font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary); }
.service-meta { font-size:13px;color:var(--text-secondary);margin-top:4px; }
.service-desc { font-size:12px;color:var(--text-secondary);line-height:1.7;margin-top:14px; }
.included-label { font-size:12px;font-weight:600;color:var(--text-primary);margin-top:16px;margin-bottom:10px; }
.included-list { margin-left:18px;display:grid;gap:8px; }
.included-list li { font-size:12px;line-height:1.6;color:var(--text-primary); }
.addon-row {
  border:0.5px solid var(--border);border-radius:10px;background:var(--bg-chip);
  padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  transition:border-color .15s,background .15s,color .15s;cursor:pointer;
}
.addon-row:hover { border-color:var(--border-md);background:var(--bg-surface); }
.addon-row.active { background:var(--surface-interactive);border-color:var(--border); }

/* ── Shooter gallery grid ── */
.shooter-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px 20px;
}
@media(max-width:480px){ .shooter-grid { grid-template-columns:repeat(2,1fr); } }
.shooter-bubble {
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px 12px;border-radius:12px;border:0.5px solid var(--border);
  background:var(--bg-chip);cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s;
  text-decoration:none;position:relative;
}
.shooter-bubble:hover { border-color:var(--border-md);background:var(--bg-surface);transform:translateY(-1px); }
.shooter-bubble.selected { border-color:var(--accent-bg);background:var(--surface-interactive); }
[data-theme="dark"] .shooter-bubble.selected { border-color:var(--accent-bg); }
.shooter-avatar {
  width:52px;height:52px;border-radius:50%;background:#F7F7F7;
  border:0.5px solid var(--border-md);display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:600;color:var(--text-secondary);overflow:hidden;flex-shrink:0;
}
.shooter-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
[data-theme="dark"] .shooter-avatar { background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.1); }
.shooter-bubble-name {
  font-size:12px;font-weight:600;color:var(--text-primary);text-align:center;
  letter-spacing:-.01em;line-height:1.3;
}
.shooter-bubble-role { display:none; }
.shooter-gallery-link {
  font-size:10px;font-weight:400;color:#000000;letter-spacing:.01em;
  opacity:0.70;margin-top:1px;text-decoration:none;transition:opacity .2s;
}
.shooter-gallery-link:hover { opacity:0.92; }
[data-theme="dark"] .shooter-gallery-link { color:#FFFFFF; }

/* Surprise Me bubble */
.shooter-bubble.surprise {
  border-style:dashed;
}
.addon-copy strong, .shooter-copy strong { display:block;font-size:13px;font-weight:600;color:var(--text-primary); }
.addon-copy span, .shooter-copy span { display:block;font-size:11px;color:var(--text-tertiary);margin-top:3px;line-height:1.6; }
.addon-price, .shooter-meta { font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap; }
.cal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:0.5px solid var(--border);
}
.cal-month { font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em; }
.cal-grid { padding:16px 12px 20px;overflow:visible; }
.cal-weekdays { display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;min-width:0; }
.cal-wd {
  font-size:10px;font-weight:700;text-align:center;letter-spacing:.06em;
  color:var(--text-tertiary);padding:4px 0;
}
.cal-days { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;min-width:0; }
.cal-day {
  aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;
  min-width:0;overflow:hidden;
  font-size:13px;font-weight:500;cursor:default;color:var(--text-secondary);
  transition:background .15s,color .15s;position:relative;border:none;background:transparent;
}
.cal-day:hover:not(.disabled):not(.empty):not(.selected) { background:#000000 !important;color:#FCFCFC !important; }
[data-theme="dark"] .cal-day:hover:not(.disabled):not(.empty):not(.selected) { background:#F7F7F7 !important;color:#161616 !important; }
.cal-nav-btn:hover, #todayBtn:hover { background:var(--bg-surface) !important;color:var(--text-primary); }
.cal-day.selected { background:var(--day-selected-bg);color:var(--day-selected-fg); }
.cal-day.disabled { color:var(--text-tertiary);opacity:0.81;cursor:default;background:transparent; }
.cal-day.empty { cursor:default; }
.cal-day.today:not(.selected)::after {
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--text-primary);
}
.cal-day.has-slots:not(.disabled):not(.selected) {
  background:var(--bg-chip);color:var(--text-primary);border-radius:8px;cursor:pointer;
}
.time-card.locked, .shooter-card.locked { opacity:.45;pointer-events:none; }
.time-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 20px 20px; }
@media (max-width:480px) { .time-grid { grid-template-columns:repeat(3,1fr); } }
.time-slot {
  padding:10px 6px;border-radius:8px;border:0.5px solid var(--border-md);
  background:var(--bg-chip);font-size:12px;font-weight:500;text-align:center;
  color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.time-slot:hover { background:var(--bg-surface);border-color:var(--border-md);color:var(--text-primary); }
.time-slot.selected { background:var(--slot-selected-bg);color:var(--slot-selected-fg);border-color:transparent; }
.selection-summary { padding:16px 20px; }
.summary-line { display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;color:var(--text-secondary); }
.summary-line strong { color:var(--text-primary);font-weight:600; }
.summary-line.total { border-top:0.5px solid var(--border);margin-top:10px;padding-top:12px;font-size:14px; }
.cta-btn {
  width:100%;padding:15px;background:var(--accent-bg);color:var(--accent-fg);
  border:none;border-radius:10px;font-size:13px;font-family:'Manrope',sans-serif;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:opacity .2s,transform .15s;margin-top:.75rem;
}
.cta-btn:hover:not(:disabled) { opacity:.85; }
.cta-btn:active:not(:disabled) { transform:scale(.99); }
.cta-btn:disabled { opacity:.35;cursor:not-allowed; }
.cta-note { font-size:11px;color:var(--text-tertiary);text-align:center;line-height:1.5;margin-top:.75rem; }
.page-footer {
  margin-top:2rem;padding-top:1rem;border-top:0.5px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
}
.footer-left { font-size:12px;color:var(--text-secondary); }
.footer-right { font-size:11px;color:var(--text-tertiary); }
</style>
