/* ===============================================
   AKM MUSIC - STUDIO PAGE
   Built entirely on the master-design.css token set.
   =============================================== */

/* --- Hero ------------------------------------------------------------- */

.studio-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
  background: linear-gradient(180deg, var(--bg-section-light) 0%, var(--bg-body) 100%);
}

.studio-hero-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
}

.studio-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
}

.studio-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-md);
}

.studio-lead {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Quick facts under the hero — plain text, not tappable */
.studio-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  margin: var(--space-lg) 0 0;
}

.studio-facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.studio-facts i { color: var(--color-primary); }

/* Photos — modest, end of page. Static (no hover lift). */
.studio-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 820px;
  margin: 0 auto;
}

.studio-photo {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
  background: var(--color-gray-100);
  margin: 0;
}

.studio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .studio-photos { grid-template-columns: 1fr 1fr; max-width: 480px; }
  .studio-photo:first-child { grid-column: 1 / -1; }
  .studio-title { font-size: var(--font-size-4xl); }
}

/* --- Equipment (flat list, informational) ----------------------------- */

.details-gap { margin-top: var(--space-2xl); }

.equipment-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xs) var(--space-lg);
  max-width: 820px;
  margin: 0 auto;
}

.equipment-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.equipment-item i {
  flex: 0 0 24px;
  text-align: center;
  color: var(--color-primary);
}

.equipment-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* --- Info: hours & pricing -------------------------------------------- */

.studio-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .studio-info-grid { grid-template-columns: 1fr; }
}

.info-card {
  background: var(--bg-section-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
}

.info-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
}

.info-card-title i { color: var(--color-primary); }

.hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.hours-row:last-child { border-bottom: 0; }

.hours-days { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.hours-time { font-weight: var(--font-weight-bold); color: var(--color-primary); white-space: nowrap; }

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.price-name { font-weight: var(--font-weight-semibold); }
.price-name small { display: block; color: var(--text-muted); font-weight: var(--font-weight-normal); }

.price-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary);
  white-space: nowrap;
}
.price-value small { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); }

.price-note {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: var(--space-md) 0 0;
}

.price-note i { color: var(--color-warning); margin-top: 2px; }

/* --- Booking section -------------------------------------------------- */

.booking-section { background: var(--bg-section-light); }

.booking-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .booking-layout { grid-template-columns: 1fr; }
}

.booking-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.studio-banner {
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.studio-banner--warn  { background: rgba(245, 158, 11, 0.1); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.35); }
.studio-banner--error { background: rgba(220, 38, 38, 0.08); color: var(--color-accent-dark); border: 1px solid rgba(220, 38, 38, 0.3); }
.studio-banner--info  { background: rgba(37, 99, 235, 0.08); color: var(--color-primary-dark); border: 1px solid rgba(37, 99, 235, 0.25); }

/* --- Calendar --------------------------------------------------------- */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.cal-month {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.cal-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cal-nav:hover:not(:disabled) { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}

.cal-weekdays {
  margin-bottom: var(--space-xs);
}

.cal-weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) 0;
}

.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* large touch target */
  min-height: 56px;
  padding: var(--space-xs);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), border-color var(--transition-fast);
}

.cal-cell--blank { border: 0; background: transparent; cursor: default; }

.cal-cell:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.cal-cell:disabled { cursor: not-allowed; opacity: 0.4; background: var(--bg-section-dark); }

.cal-cell.is-today { border-color: var(--color-primary); border-width: 2px; }

.cal-cell.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.cal-cell--free .cal-dot    { background: var(--color-success); }
.cal-cell--partial .cal-dot { background: var(--color-warning); }
.cal-cell--full .cal-dot    { background: var(--color-accent); }
.cal-cell.is-selected .cal-dot { background: var(--color-white); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.legend-item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot--free    { background: var(--color-success); }
.legend-dot--partial { background: var(--color-warning); }
.legend-dot--full    { background: var(--color-accent); }
.legend-dot--past    { background: var(--color-gray-300); }

/* --- Day panel -------------------------------------------------------- */

.day-panel { margin-top: var(--space-xl); }

.day-empty,
.slot-empty {
  padding: var(--space-lg);
  border-radius: var(--border-radius-md);
  background: var(--bg-section-light);
  color: var(--text-muted);
  text-align: center;
  font-size: var(--font-size-sm);
  margin: 0;
}

.day-title { font-size: var(--font-size-xl); margin-bottom: 2px; }
.day-hours { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; }
.day-hours i { color: var(--color-primary); margin-right: 4px; }

.day-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: var(--space-lg) 0 var(--space-sm);
}

.day-subtitle-note { text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-medium); }

.booked-list { list-style: none; display: grid; gap: var(--space-xs); }

.booked-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-sm);
  background: var(--bg-section-light);
  border-left: 3px solid var(--color-accent);
  font-size: var(--font-size-sm);
}

.booked-item--none {
  border-left-color: var(--color-success);
  color: var(--text-muted);
}

.booked-badge {
  padding: 2px var(--space-xs);
  border-radius: 9999px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-accent-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.booked-time { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.booked-meta { color: var(--text-muted); }

/* Only the last four digits of the mobile are ever rendered here. */
.booked-mask {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-xs);
}

.slot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-xs);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.slot-chip:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.slot-chip.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.slot-start { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.slot-end   { font-size: var(--font-size-xs); opacity: 0.7; }

/* --- Booking form ----------------------------------------------------- */

.form-group { margin-bottom: var(--space-lg); }

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Segmented controls: session type + duration */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }

.segment { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }

.segment-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
}

.segment-label small { font-weight: var(--font-weight-normal); color: var(--text-muted); font-size: var(--font-size-xs); }

.segment input:checked + .segment-label {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.segment input:focus-visible + .segment-label { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); }
.segment input:checked + .segment-label small { color: var(--color-primary); }

.duration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); }

.duration-btn {
  min-height: 52px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.duration-btn:hover { border-color: var(--color-primary); transform: translateY(-2px); }

.duration-btn.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

/* Repeat: deliberately small and easy to ignore */
.repeat-block {
  padding: var(--space-md);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-section-light);
}

.repeat-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  margin: 0;
}

.repeat-toggle input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

.repeat-options { margin-top: var(--space-md); }
.repeat-options .form-label { font-size: var(--font-size-xs); }
.repeat-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin: var(--space-xs) 0 0; }

.booking-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-lg);
}

.booking-summary i { margin-right: 4px; }

/* Guidance shown while the submit button is disabled */
.booking-hint {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  color: #92400e;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-md);
}

.booking-hint i { color: var(--color-warning); }

.form-error {
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--color-accent-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-lg);
}

.form-privacy {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-md) 0 0;
}

.form-privacy i { color: var(--color-success); margin-top: 2px; }

#bookingSubmit { width: 100%; }

/* --- Success ---------------------------------------------------------- */

.booking-success {
  text-align: center;
  animation: fadeInUp 0.5s ease-out;
}

.success-icon { font-size: var(--font-size-5xl); color: var(--color-success); margin-bottom: var(--space-sm); }
.success-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-xs); }
.success-body { color: var(--text-secondary); margin-bottom: var(--space-md); }

.success-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.booking-success .btn { width: 100%; margin-bottom: var(--space-sm); }

/* --- Rules strip ------------------------------------------------------ */

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* Flat, informational — no shadow/hover so it doesn't read as tappable */
.rule-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border-color);
}

.rule-card i { color: var(--color-primary); font-size: var(--font-size-xl); }
.rule-card h4 { font-size: var(--font-size-base); margin-bottom: 2px; }
.rule-card p { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; }

/* --- Homepage studio CTA band ----------------------------------------- */

.studio-cta {
  margin: var(--space-3xl) auto;
  max-width: var(--max-width-content);
  padding: var(--space-2xl);
  border-radius: var(--border-radius-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.studio-cta h2 { color: var(--color-white); font-size: var(--font-size-3xl); margin-bottom: var(--space-xs); }
.studio-cta p { color: rgba(255, 255, 255, 0.85); margin: 0; }

.studio-cta-facts {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.studio-cta-facts span { display: inline-flex; align-items: center; gap: var(--space-xs); }

.studio-cta .btn {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  flex-shrink: 0;
}
.studio-cta .btn:hover { background: var(--color-gray-100); color: var(--color-primary-dark); }

@media (max-width: 768px) {
  .studio-cta { flex-direction: column; text-align: center; margin: var(--space-2xl) var(--space-lg); }
  .studio-cta-facts { justify-content: center; }
  .studio-cta .btn { width: 100%; }
  .duration-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .duration-btn { font-size: var(--font-size-sm); }
  .booking-panel { padding: var(--space-lg); }
  .cal-cell { min-height: 48px; font-size: var(--font-size-sm); }
  .booked-mask { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-cell, .slot-chip, .equipment-card, .studio-photo, .duration-btn { transition: none; }
  .cal-cell:hover, .slot-chip:hover, .equipment-card:hover, .studio-photo:hover { transform: none; }
  .booking-success { animation: none; }
}