/* ============================================
   TRAIN HVPT — Component Styles
   ============================================ */

/* ============================================
   Bottom Navigation
   ============================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  height: calc(var(--nav-height) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.bottom-nav__tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.bottom-nav__tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
  text-align: center;
}

.bottom-nav__tab svg {
  width: 24px;
  height: 24px;
  transition: color var(--transition-fast);
}

.bottom-nav__tab.active {
  color: var(--red);
}

.bottom-nav__tab:not(.active):hover {
  color: var(--gray-600);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  min-height: 44px;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.btn-primary:hover:not(:disabled) {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.btn-secondary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}

.btn-outline:hover:not(:disabled) {
  background: var(--blue);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  padding: 8px 12px;
  min-height: 44px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  min-height: 44px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--font-size-lg);
}

/* Social login buttons */
.btn-social {
  display: flex;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  gap: var(--space-sm);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.btn-social svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-google {
  background: var(--white);
  color: var(--gray-700);
}

.btn-google:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.btn-microsoft {
  background: var(--gray-800);
  color: var(--white);
  border-color: var(--gray-800);
}

.btn-microsoft:hover {
  background: var(--gray-900);
}

/* ============================================
   Form Inputs
   ============================================ */

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

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
}

.form-input {
  width: 100%;
  padding: 12px var(--space-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 62, 99, 0.12);
}

.form-input::placeholder {
  color: var(--gray-400);
}

.form-input.error {
  border-color: var(--danger);
}

.form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--danger);
}

.form-hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Checkbox / Radio groups */
.check-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.check-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.check-item input[type="checkbox"],
.check-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

/* ============================================
   Divider
   ============================================ */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* ============================================
   Class Cards
   ============================================ */

.class-card {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.class-card:hover {
  box-shadow: var(--shadow-md);
}

.class-card__accent {
  width: 4px;
  flex-shrink: 0;
}

.class-card__accent--red { background: var(--red); }
.class-card__accent--blue { background: var(--blue); }
.class-card__accent--dark { background: var(--gray-800); }
.class-card__accent--teal { background: var(--teal); }

.class-card__body {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.class-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.class-card__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.class-card__time {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.class-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.class-card__action {
  flex-shrink: 0;
}

/* ============================================
   Badges
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}

.badge--green {
  background: var(--green-light);
  color: var(--green);
}

.badge--amber {
  background: var(--amber-light);
  color: var(--amber);
}

.badge--red {
  background: var(--danger-light);
  color: var(--danger);
}

.badge--blue {
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
}

.badge--dark {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge--teal {
  background: rgba(13, 148, 136, 0.08);
  color: var(--teal);
}

.badge--type {
  font-size: 0.6875rem;
  padding: 1px 8px;
}

/* ============================================
   Calendar Controls
   ============================================ */

.calendar-header {
  margin-bottom: var(--space-md);
}

.calendar-toggle {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: var(--space-md);
}

.calendar-toggle__btn {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-500);
  border-radius: calc(var(--radius-md) - 2px);
  transition: all var(--transition-fast);
}

.calendar-toggle__btn.active {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-nav__date {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.calendar-nav__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.calendar-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--gray-600);
  transition: background var(--transition-fast);
}

.calendar-nav__btn:hover {
  background: var(--gray-100);
}

.calendar-nav__btn svg {
  width: 20px;
  height: 20px;
}

.calendar-nav__today {
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.calendar-nav__today:hover {
  background: var(--blue);
  color: var(--white);
}

/* ============================================
   Week View — Time-Grid Timetable
   ============================================ */

/* Grid container — scrollable on all devices */
.week-timetable {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--gray-200);
  /* Show ~5 hours of slots (10 x 44px = 440px) + 40px header */
  max-height: 480px;
}

/* Scroll hint: fade on right edge when content overflows */
.week-timetable::after {
  content: '';
  position: sticky;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7));
  flex-shrink: 0;
  display: none;
}

@media (max-width: 639px) {
  .week-timetable::after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    height: auto;
  }
}

.week-timetable__inner {
  display: grid;
  grid-template-columns: 50px repeat(6, 1fr);
  min-width: 600px;
  position: relative;
}

/* Time axis (left column) */
.week-tt__time-col {
  grid-column: 1;
  display: flex;
  flex-direction: column;
}

.week-tt__time-header {
  height: 40px;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--gray-50);
}

.week-tt__time-slot {
  height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  position: relative;
}

.week-tt__time-slot span {
  transform: translateY(-7px);
  display: block;
}

/* Day columns */
.week-tt__day-col {
  position: relative;
  border-left: 1px solid var(--gray-100);
}

.week-tt__day-header {
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--gray-50);
}

.week-tt__day-header .week-tt__day-date {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--gray-400);
  margin-top: 1px;
}

.week-tt__day-col.is-today .week-tt__day-header {
  color: var(--blue);
  background: #e8f0f6;
}

.week-tt__day-body {
  position: relative;
}

.week-tt__day-slot {
  height: 44px;
  border-top: 1px solid var(--gray-100);
}

.week-tt__day-col.is-today .week-tt__day-body {
  background: rgba(0, 62, 99, 0.02);
}

/* Sunday / closed column */
.week-tt__day-col.is-closed .week-tt__day-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-tt__closed-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-300);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Class blocks — absolute within day body */
.week-tt__block {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 5px;
  padding: 4px 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.week-tt__block:hover {
  transform: scale(1.03);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.week-tt__block-name {
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-tt__block-time {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
  margin-top: 1px;
}

.week-tt__block-spaces {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.2;
  margin-top: 1px;
}

.week-tt__block-spaces.is-full {
  color: rgba(255, 200, 200, 0.95);
}

/* PT block */
.week-tt__block--pt {
  background: #7c3aed;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.85;
}

/* Legend */
.week-tt__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

.week-tt__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-500);
}

.week-tt__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Empty week state */
.week-tt__empty {
  text-align: center;
  padding: var(--space-xl) 0;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

/* Tablet+: roomier blocks */
@media (min-width: 640px) {
  .week-timetable__inner {
    grid-template-columns: 54px repeat(6, 1fr);
    min-width: 680px;
  }

  .week-tt__block {
    left: 3px;
    right: 3px;
    padding: 5px 7px;
  }

  .week-tt__block-name {
    font-size: 0.65rem;
  }

  .week-tt__block-time {
    font-size: 0.58rem;
  }

  .week-tt__block-spaces {
    font-size: 0.55rem;
  }
}

/* Wider screens */
@media (min-width: 1024px) {
  .week-timetable__inner {
    grid-template-columns: 60px repeat(6, 1fr);
    min-width: 800px;
  }

  .week-tt__block-name {
    font-size: 0.7rem;
  }

  .week-tt__block-time {
    font-size: 0.6rem;
  }

  .week-tt__block-spaces {
    font-size: 0.58rem;
  }
}

/* ============================================
   Month View
   ============================================ */

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

.month-grid__header {
  padding: var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
}

.month-cell {
  padding: 4px 1px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  min-height: 72px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.month-cell:hover {
  background: var(--gray-100);
}

.month-cell.today .month-cell__num {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month-cell.other-month {
  opacity: 0.3;
}

.month-cell__num {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  align-self: center;
  margin-bottom: 2px;
}

.month-cell__dots {
  display: flex;
  gap: 3px;
}

.month-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
}

.month-dot--red { background: var(--red); }
.month-dot--blue { background: var(--blue); }
.month-dot--dark { background: var(--gray-800); }
.month-dot--teal { background: var(--teal); }

/* Month view — class label pills */
.month-class-label {
  font-size: 0.5625rem;
  line-height: 1.2;
  padding: 1px 3px;
  border-radius: 2px;
  border-left: 2px solid var(--gray-400);
  background: var(--gray-50);
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.month-class-label--red { border-left-color: var(--red); }
.month-class-label--blue { border-left-color: var(--blue); }
.month-class-label--dark { border-left-color: var(--gray-800); }
.month-class-label--teal { border-left-color: var(--teal); }

/* ============================================
   Booking Modal (slide-up sheet)
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 301;
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
  transform: translateY(100%);
  transition: transform var(--transition-base);
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
}

.modal-overlay.open + .modal-sheet,
.modal-sheet.open {
  transform: translateY(0);
}

.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-lg);
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  transition: background var(--transition-fast);
}

.modal-close:hover {
  background: var(--gray-100);
}

.modal-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xs);
}

.modal-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

.modal-meta__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.modal-meta__row svg {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.modal-section {
  margin-bottom: var(--space-lg);
}

.modal-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.modal-section p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
}

/* Booking success state */
.booking-success {
  text-align: center;
  padding: var(--space-xl) 0;
}

.booking-success__icon {
  width: 64px;
  height: 64px;
  background: var(--green-light);
  color: var(--green);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.booking-success__icon svg {
  width: 32px;
  height: 32px;
}

.booking-success__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.booking-success__credits {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* ============================================
   View Header
   ============================================ */

.view-header {
  margin-bottom: var(--space-lg);
}

.view-header__title {
  font-size: var(--font-size-xl);
  color: var(--gray-900);
}

.view-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 2px;
}

/* ============================================
   Empty State
   ============================================ */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--gray-400);
}

.empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.empty-state__text {
  font-size: var(--font-size-sm);
}

/* ============================================
   Cards (generic)
   ============================================ */

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.card + .card {
  margin-top: var(--space-sm);
}

/* ============================================
   Quick Actions
   ============================================ */

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  transition: box-shadow var(--transition-fast);
}

.quick-action:hover {
  box-shadow: var(--shadow-md);
}

.quick-action__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action__icon--red {
  background: var(--danger-light);
  color: var(--red);
}

.quick-action__icon--blue {
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
}

.quick-action__icon svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   Registration Steps
   ============================================ */

.reg-steps {
  max-width: 100%;
  width: 100%;
}

.reg-progress {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.reg-progress__step {
  flex: 1;
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
}

.reg-progress__step.completed {
  background: var(--blue);
}

.reg-progress__step.active {
  background: var(--blue-light);
}

.reg-step-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-sm);
}

.reg-nav {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.reg-nav .btn {
  flex: 1;
}

/* Plan selection cards */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.plan-card {
  position: relative;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plan-card.selected {
  border-color: var(--blue);
  background: rgba(0, 62, 99, 0.03);
}

.plan-card__popular {
  position: absolute;
  top: -10px;
  right: var(--space-md);
  background: var(--red);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.plan-card__name {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 2px;
}

.plan-card__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
}

.plan-card__price span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--gray-500);
}

.plan-card__detail {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* ============================================
   Stub / Coming Soon
   ============================================ */

.stub-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl);
  min-height: 50vh;
}

.stub-view__icon {
  width: 80px;
  height: 80px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--gray-400);
}

.stub-view__icon svg {
  width: 36px;
  height: 36px;
}

.stub-view__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.stub-view__text {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  max-width: 280px;
}

/* ============================================
   Profile Card
   ============================================ */

.profile-card {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto var(--space-md);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.profile-avatar-edit {
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.profile-avatar-edit:hover {
  background: var(--red-dark);
}

.profile-photo-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-align: center;
  margin-top: var(--space-sm);
}

.profile-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
}

.profile-email {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-200);
}

.profile-stat__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
}

.profile-stat__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* ============================================
   Next class card (home)
   ============================================ */

.next-class {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.next-class__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}

.next-class__icon--red { background: var(--red); }
.next-class__icon--blue { background: var(--blue); }
.next-class__icon--dark { background: var(--gray-800); }
.next-class__icon--teal { background: var(--teal); }

.next-class__icon svg {
  width: 24px;
  height: 24px;
}

.next-class__info {
  flex: 1;
}

.next-class__name {
  font-weight: var(--font-weight-semibold);
}

.next-class__time {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* ============================================
   Credit display
   ============================================ */

.credits-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: rgba(0, 62, 99, 0.04);
  border-radius: var(--radius-md);
}

.credits-bar__label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.credits-bar__count {
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  font-size: var(--font-size-lg);
}

/* No-credits warning in booking modal */
.no-credits-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(173, 0, 5, 0.06);
  border: 1px solid rgba(173, 0, 5, 0.2);
  border-radius: var(--radius-md);
  color: var(--red);
}
.no-credits-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.no-credits-warning__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}
.no-credits-warning__text {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* ============================================
   Credit Top-Up Picker
   ============================================ */

.topup-picker {
  text-align: center;
  padding: var(--space-lg) 0;
}

.topup-picker__label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.topup-picker__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

.topup-picker__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.topup-picker__btn:active {
  background: var(--gray-100);
  transform: scale(0.95);
}

.topup-picker__btn:disabled {
  color: var(--gray-300);
  border-color: var(--gray-100);
  cursor: default;
}

.topup-picker__qty {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  min-width: 64px;
  text-align: center;
  line-height: 1;
}

.topup-calc {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--dark);
  padding: var(--space-md);
  background: rgba(0, 62, 99, 0.04);
  border-radius: var(--radius-md);
}

/* ============================================
   Home Dashboard — Stats Row
   ============================================ */

.home-stats {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) 0;
}

.home-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.home-stat__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  line-height: 1;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-stat__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.home-stat__divider {
  width: 1px;
  height: 32px;
  background: var(--gray-200);
  flex-shrink: 0;
}

/* ============================================
   Home Dashboard — Motivational Banner
   ============================================ */

.home-banner {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.home-banner__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

/* ============================================
   Home Dashboard — Leaderboard Teaser
   ============================================ */

.home-leaderboard__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--blue);
}

.home-leaderboard__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.home-leaderboard__text {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}

.home-leaderboard__text strong {
  color: var(--blue);
}

/* ============================================
   Home Dashboard — Upcoming Classes List
   ============================================ */

.upcoming-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 0;
  min-height: 44px;
}

.upcoming-item + .upcoming-item {
  border-top: 1px solid var(--gray-100);
}

.upcoming-item__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.upcoming-item__dot--red { background: var(--red); }
.upcoming-item__dot--blue { background: var(--blue); }
.upcoming-item__dot--dark { background: var(--gray-800); }
.upcoming-item__dot--teal { background: var(--teal); }

.upcoming-item__info {
  flex: 1;
  min-width: 0;
}

.upcoming-item__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-item__time {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* ============================================
   Progress — PB Cards
   ============================================ */

.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-sm);
}

.pb-card {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}

.pb-card__name {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: 2px;
}

.pb-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
}

.pb-card__value span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--gray-500);
}

/* ============================================
   Progress — Bar Chart
   ============================================ */

.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  padding-top: var(--space-md);
  max-width: 100%;
  overflow: hidden;
}

.chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  max-width: 32px;
  background: var(--red);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 4px;
  transition: height var(--transition-base);
}

.chart-bar--blue {
  background: var(--blue);
}

.chart-bar-label {
  font-size: 0.5625rem;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  margin-bottom: 2px;
  white-space: nowrap;
}

.chart-date {
  font-size: 0.625rem;
  color: var(--gray-500);
  margin-top: 4px;
  white-space: nowrap;
}

/* ============================================
   Progress — Session History Cards
   ============================================ */

.weight-session {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.weight-session__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.weight-session__date {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.weight-session__class {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.weight-session__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.weight-session__exercises {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weight-exercise {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: var(--font-size-sm);
  gap: var(--space-sm);
  border-bottom: 1px solid var(--gray-100);
}
.weight-exercise:last-child {
  border-bottom: none;
}

.weight-exercise__left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.weight-exercise__name {
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weight-exercise__detail {
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.pb-flag {
  display: inline-block;
  background: var(--amber);
  color: var(--white);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-bold);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Chart header layout */
.progress-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.progress-chart-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Chart type toggle (bar/line) */
.chart-type-toggle {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.chart-type-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chart-type-toggle__btn.active {
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

/* Line chart for progress */
.progress-line-chart {
  display: flex;
  gap: var(--space-sm);
  height: 160px;
}
.progress-line-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--gray-400);
  padding: 4px 0;
  flex-shrink: 0;
  width: 40px;
  text-align: right;
}
.progress-line-chart__area {
  flex: 1;
  position: relative;
  min-width: 0;
}
.progress-line-chart__svg {
  width: 100%;
  height: 100%;
}
.progress-line-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.progress-line-chart__labels {
  display: flex;
  justify-content: space-between;
  padding-left: 48px;
  position: relative;
  margin-top: 4px;
}
.progress-line-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.625rem;
  color: var(--gray-500);
  white-space: nowrap;
}

/* ============================================
   Progress — Weight Logger Inputs
   ============================================ */

.weight-log-exercise {
  margin-bottom: var(--space-sm);
}

.weight-log-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

/* Voice exercise input */
.voice-exercise-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.voice-exercise-input-wrap .exercise-name-input {
  padding-right: 44px;
}

.voice-exercise-mic {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: #003E63;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  /* 44px touch target with transparent padding */
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
}
.voice-exercise-mic:hover {
  background: rgba(0, 62, 99, 0.08);
}
.voice-exercise-mic--active {
  color: #ad0005;
  animation: micPulse 1s infinite;
}

@keyframes micPulse {
  0%, 100% { background: rgba(173, 0, 5, 0.08); }
  50% { background: rgba(173, 0, 5, 0.2); }
}

/* Exercise match picker */
.exercise-match-picker {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 4px;
}
.exercise-match-picker__header {
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gray-100);
}
.exercise-match-picker__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--gray-800);
}
.exercise-match-picker__option:hover {
  background: var(--gray-50);
}
.exercise-match-picker__option--custom {
  color: var(--gray-500);
  font-style: italic;
  border-top: 1px solid var(--gray-100);
}

/* Weight log exercise name row */
.weight-log-exercise__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
}

/* Remove exercise button in weight logger */
.weight-log-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  /* 44px touch target */
  min-width: 44px;
  min-height: 44px;
}
.weight-log-remove:hover {
  color: var(--red);
  background: rgba(173, 0, 5, 0.08);
}

/* ============================================
   Progress — Per-Set Logging
   ============================================ */

.set-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.set-row--with-tempo {
  grid-template-columns: 36px 1fr 1fr 1fr auto;
}

.set-row__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
}

.set-row__input {
  min-height: 44px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  text-align: center;
  -webkit-appearance: none;
}

.set-row__input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 62, 99, 0.15);
}

.set-row__delete {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.set-row__delete:hover {
  color: var(--red);
  background: rgba(173, 0, 5, 0.05);
}

.set-header {
  display: grid;
  grid-template-columns: 36px 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}

.set-header--with-tempo {
  grid-template-columns: 36px 1fr 1fr 1fr auto;
}

.set-header__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  font-weight: 500;
  text-align: center;
}

.set-summary {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-top: 6px;
  padding: 4px 0;
}

.set-summary strong {
  color: var(--blue);
}

.add-set-btn {
  min-height: 44px;
  width: 100%;
  border: 1px dashed var(--gray-300);
  background: none;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.add-set-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.tempo-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}

.tempo-toggle--active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* ============================================
   Progress — Previous Session Card
   ============================================ */

.prev-session-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.prev-session__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.prev-session__header svg {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 2px;
}

.prev-session__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  line-height: 1.3;
}

.prev-session__meta {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

.prev-session__exercises {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.prev-session__exercise {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.prev-session__ex-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
}

.prev-session__ex-detail {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-align: right;
  flex-shrink: 0;
}

.prev-session__copy-btn {
  min-height: 52px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  gap: var(--space-sm);
}

.prev-session__copy-btn svg {
  flex-shrink: 0;
}

/* ============================================
   Progress — Body Measurements
   ============================================ */

.measurement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.measurement-item {
  text-align: center;
}

.measurement-item__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: 2px;
}

.measurement-item__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
}

.measurement-item__value span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--gray-500);
}

.measurement-item__delta {
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

/* Simple data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--gray-200);
}

.data-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

/* ============================================
   Chat / Messages
   ============================================ */

.chat-view {
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--space-md));
  margin-bottom: 0;
  height: calc(100vh - var(--header-height) - var(--nav-height) - var(--safe-area-bottom));
  height: calc(100dvh - var(--header-height) - var(--nav-height) - var(--safe-area-bottom));
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  flex-shrink: 0;
}

.chat-header__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.chat-header__status {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-avatar--header {
  width: 40px;
  height: 40px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--off-white);
}

.chat-date-sep {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  padding: var(--space-sm) 0;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  max-width: 85%;
}

.chat-row--me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-row--them {
  align-self: flex-start;
}

.chat-bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  position: relative;
}

.chat-bubble p {
  margin: 0;
}

.chat-bubble--me {
  background: var(--blue);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.chat-bubble--them {
  background: var(--white);
  color: var(--gray-800);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.chat-time {
  display: block;
  font-size: 0.625rem;
  margin-top: 4px;
  opacity: 0.6;
}

.chat-broadcast {
  display: inline-block;
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}

.chat-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.chat-input__field {
  flex: 1;
  padding: 10px var(--space-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 1rem;
  background: var(--gray-50);
  -webkit-appearance: none;
}

.chat-input__field:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.chat-input__send {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.chat-input__send:disabled {
  opacity: 0.4;
}

.chat-input__send svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   Profile — Detail Rows
   ============================================ */

.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.profile-row + .profile-row {
  border-top: 1px solid var(--gray-100);
}

.profile-row__label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.profile-row__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-900);
}

/* ============================================
   Profile — Payment History
   ============================================ */

.payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.payment-row + .payment-row {
  border-top: 1px solid var(--gray-100);
}

.payment-row__desc {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.payment-row__date {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.payment-row__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

/* ============================================
   Profile — Settings Rows
   ============================================ */

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 14px 0;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.settings-row + .settings-row {
  border-top: 1px solid var(--gray-100);
}

.settings-row:hover {
  color: var(--blue);
}

.settings-row span {
  flex: 1;
}

.settings-row__chevron {
  color: var(--gray-400);
  flex-shrink: 0;
}

.settings-row--danger {
  color: var(--danger);
}

.settings-row--danger:hover {
  color: var(--red-dark);
}

.settings-row--muted {
  color: var(--gray-500);
}

.settings-row--muted:hover {
  color: var(--gray-700);
}

/* ============================================
   Leaderboard — Pill Label
   ============================================ */

.lb-pill {
  display: inline-block;
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}

/* ============================================
   Leaderboard — Podium
   ============================================ */

.lb-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: 0 var(--space-md);
}

.lb-podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 120px;
}

.lb-podium__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--white);
  margin-bottom: var(--space-xs);
}

.lb-podium__col--1 .lb-podium__avatar {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-base);
}

.lb-podium__avatar--gold { background: #D4A017; }
.lb-podium__avatar--silver { background: #8E8E8E; }
.lb-podium__avatar--bronze { background: #A0522D; }

.lb-podium__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  text-align: center;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.lb-podium__count {
  font-size: 0.625rem;
  color: var(--gray-500);
  margin-bottom: var(--space-xs);
  white-space: nowrap;
}

.lb-podium__badge-label {
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  color: var(--blue);
  margin-bottom: var(--space-xs);
}

.lb-podium__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.lb-podium__bar--gold {
  background: linear-gradient(180deg, #D4A017, #B8860B);
  height: 80px;
}

.lb-podium__bar--silver {
  background: linear-gradient(180deg, #A8A8A8, #8E8E8E);
  height: 60px;
}

.lb-podium__bar--bronze {
  background: linear-gradient(180deg, #C0774A, #A0522D);
  height: 44px;
}

/* ============================================
   Leaderboard — Table
   ============================================ */

.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-table thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-500);
  text-align: left;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--gray-200);
}

.lb-th-rank { width: 40px; }
.lb-th-num { text-align: right !important; width: 70px; }

.lb-table tbody tr {
  transition: background var(--transition-fast);
}

.lb-table tbody tr:hover {
  background: var(--gray-50);
}

.lb-td-rank {
  padding: 10px var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  font-weight: var(--font-weight-medium);
}

.lb-td-name {
  padding: 10px var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-900);
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-td-num {
  padding: 10px var(--space-sm);
  font-size: var(--font-size-sm);
  text-align: right;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}

.lb-table tbody tr + tr {
  border-top: 1px solid var(--gray-100);
}

/* Highlight user row */
.lb-row--user {
  background: rgba(0, 62, 99, 0.04) !important;
}

.lb-row--user .lb-td-name {
  color: var(--blue);
}

/* Medal rows */
.lb-row--gold .lb-td-rank { color: #D4A017; }
.lb-row--silver .lb-td-rank { color: #8E8E8E; }
.lb-row--bronze .lb-td-rank { color: #A0522D; }

/* Rank badges */
.lb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

.lb-badge--gold { background: #D4A017; }
.lb-badge--silver { background: #8E8E8E; }
.lb-badge--bronze { background: #A0522D; }

/* ============================================
   Leaderboard — Prize Cards (Annual)
   ============================================ */

.lb-prizes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.lb-prize-card {
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}

.lb-prize-card--gold {
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.12), rgba(184, 134, 11, 0.06));
  border: 1px solid rgba(212, 160, 23, 0.2);
}

.lb-prize-card--silver {
  background: linear-gradient(135deg, rgba(142, 142, 142, 0.12), rgba(142, 142, 142, 0.06));
  border: 1px solid rgba(142, 142, 142, 0.2);
}

.lb-prize-card--bronze {
  background: linear-gradient(135deg, rgba(160, 82, 45, 0.12), rgba(160, 82, 45, 0.06));
  border: 1px solid rgba(160, 82, 45, 0.2);
}

.lb-prize-card__rank {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
}

.lb-prize-card--gold .lb-prize-card__rank { color: #D4A017; }
.lb-prize-card--silver .lb-prize-card__rank { color: #8E8E8E; }
.lb-prize-card--bronze .lb-prize-card__rank { color: #A0522D; }

.lb-prize-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  margin-bottom: 4px;
}

.lb-prize-card__desc {
  font-size: 0.625rem;
  color: var(--gray-500);
  line-height: 1.3;
}

/* ============================================
   Leaderboard — Climb Message
   ============================================ */

.lb-climb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(0, 62, 99, 0.04);
  border: 1px solid rgba(0, 62, 99, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

.lb-climb svg {
  color: var(--blue);
  flex-shrink: 0;
}

.lb-climb strong {
  color: var(--blue);
}

.lb-referral-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  line-height: 1.5;
}

.lb-referral-note svg {
  flex-shrink: 0;
  color: var(--gray-400);
  margin-top: 1px;
}

/* ============================================
   Notifications — Bell Badge
   ============================================ */

.app-header__action {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: var(--red);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* ============================================
   Notifications — Panel
   ============================================ */

.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.notif-overlay.open {
  opacity: 1;
  visibility: visible;
}

.notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 251;
  width: 100%;
  max-width: 380px;
  height: 100%;
  background: var(--white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.notif-panel.open {
  transform: translateX(0);
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.notif-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.notif-panel__close:hover {
  background: var(--gray-100);
}

.notif-panel__close svg {
  width: 20px;
  height: 20px;
}

.notif-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.notif-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

/* ============================================
   Notifications — Items
   ============================================ */

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.notif-item:hover {
  background: var(--gray-50);
}

.notif-item--unread {
  background: rgba(0, 62, 99, 0.03);
}

.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon svg {
  width: 18px;
  height: 18px;
}

.notif-icon--green {
  background: var(--green-light);
  color: var(--green);
}

.notif-icon--red {
  background: var(--danger-light);
  color: var(--danger);
}

.notif-icon--blue {
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
}

.notif-icon--amber {
  background: var(--amber-light);
  color: var(--amber);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  margin-bottom: 2px;
}

.notif-text {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  line-height: 1.4;
}

.notif-time {
  font-size: 0.625rem;
  color: var(--gray-400);
  margin-top: 4px;
}

.notif-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ============================================
   Stripe — Card Form
   ============================================ */

.stripe-card-form {
  margin-bottom: var(--space-md);
}

.stripe-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-bottom: var(--space-sm);
}

.stripe-secure svg {
  flex-shrink: 0;
}

/* ============================================
   Cancellation — Confirmation Screen
   ============================================ */

.cancel-confirm {
  text-align: center;
  padding: var(--space-md) 0;
}

.cancel-confirm__icon {
  color: var(--amber);
  margin-bottom: var(--space-md);
}

.cancel-confirm__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.cancel-confirm__policy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: left;
}

.cancel-confirm__policy--refund {
  background: var(--green-light);
}

.cancel-confirm__policy--no-refund {
  background: var(--amber-light);
}

.cancel-confirm__policy-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.cancel-confirm__policy--refund .cancel-confirm__policy-icon {
  color: var(--green);
}

.cancel-confirm__policy--no-refund .cancel-confirm__policy-icon {
  color: var(--amber);
}

.cancel-confirm__policy-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 2px;
}

.cancel-confirm__policy--refund .cancel-confirm__policy-title { color: var(--green); }
.cancel-confirm__policy--no-refund .cancel-confirm__policy-title { color: var(--amber); }

.cancel-confirm__policy-text {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  line-height: 1.4;
}

/* Cancel button (red outline) */
.cancel-btn {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

.cancel-btn:hover {
  background: var(--danger) !important;
  color: var(--white) !important;
}

/* Cancel success icon (amber instead of green) */
.cancel-success__icon {
  background: var(--amber-light) !important;
  color: var(--amber) !important;
}

/* Cancel info text on booking modal */
.cancel-info__text {
  font-size: var(--font-size-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  line-height: 1.4;
}

.cancel-info__text--green {
  background: var(--green-light);
  color: var(--green);
}

.cancel-info__text--amber {
  background: var(--amber-light);
  color: var(--amber);
}

/* ============================================
   Waitlist — Position Display
   ============================================ */

.waitlist-info {
  text-align: center;
}

.waitlist-info__position {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--amber);
  margin-bottom: var(--space-xs);
}

.waitlist-position {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.waitlist-position__number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--amber);
}

.waitlist-position__label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Waitlist success icon (amber) */
.waitlist-success__icon {
  background: var(--amber-light) !important;
  color: var(--amber) !important;
}

/* Waitlist offer screen */
.waitlist-offer {
  text-align: center;
  padding: var(--space-md) 0;
}

.waitlist-offer__icon {
  color: var(--blue);
  margin-bottom: var(--space-md);
}

.waitlist-offer__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.waitlist-offer__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--amber);
  background: var(--amber-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}

/* ============================================
   Guest Pass — Form & Confirmation
   ============================================ */

.guest-pass-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 62, 99, 0.04);
  border: 1px solid rgba(0, 62, 99, 0.1);
  border-radius: var(--radius-md);
}

.guest-pass-info__icon {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}

.guest-pass-info__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  margin-bottom: 2px;
}

.guest-pass-info__note {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

/* Guest list in booking modal */
.guest-list {
  padding: var(--space-sm) 0;
}

.guest-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.guest-item svg {
  color: var(--blue);
  flex-shrink: 0;
}

/* Guest success icon (blue) */
.guest-success__icon {
  background: rgba(0, 62, 99, 0.08) !important;
  color: var(--blue) !important;
}

/* Guest item — expanded with email + PAR-Q status */
.guest-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guest-item__name {
  font-weight: var(--font-weight-medium);
}

.guest-item__email {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PAR-Q status badges */
.parq-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.parq-status--done {
  background: var(--green-light);
  color: var(--green);
}

.parq-status--sent {
  background: var(--amber-light);
  color: var(--amber);
}

.parq-status--pending {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Returning guest notice (on form) */
.guest-return-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--amber-light);
  border-radius: var(--radius-md);
}

.guest-return-notice svg {
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 2px;
}

.guest-return-notice__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--amber);
  margin-bottom: 2px;
}

.guest-return-notice__text {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  line-height: 1.4;
}

/* PAR-Q email notice (on confirmation screen) */
.guest-parq-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(0, 62, 99, 0.04);
  border: 1px solid rgba(0, 62, 99, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  text-align: left;
  line-height: 1.4;
}

.guest-parq-notice svg {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Guest confirmation detail rows */
.guest-confirm-detail {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.guest-confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--font-size-sm);
}

.guest-confirm-row + .guest-confirm-row {
  border-top: 1px solid var(--gray-200);
}

.guest-confirm-row__label {
  color: var(--gray-500);
}

.guest-confirm-row__value {
  font-weight: var(--font-weight-medium);
  color: var(--gray-900);
}

/* Guest trial status badges */
.trial-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.trial-status--prospect {
  background: rgba(255, 152, 0, 0.12);
  color: #e65100;
}

.trial-status--member {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}

/* Guest onboarding email notice */
.guest-onboarding-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(76, 175, 80, 0.06);
  border: 1px solid rgba(76, 175, 80, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  text-align: left;
  line-height: 1.4;
}

.guest-onboarding-notice svg {
  color: #2e7d32;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================
   PT Booking — Banner on Book page
   ============================================ */

.pt-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(0, 62, 99, 0.06), rgba(0, 62, 99, 0.02));
  border: 1px solid rgba(0, 62, 99, 0.12);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.pt-banner:hover {
  border-color: var(--blue);
}

.pt-banner__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pt-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.pt-banner__price {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pt-banner__arrow {
  color: var(--gray-400);
  flex-shrink: 0;
}

/* ============================================
   PT Booking — Intro Card
   ============================================ */

.pt-intro__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.pt-intro__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.pt-intro__price {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pt-intro__text {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   PT Booking — Day Groups & Slots
   ============================================ */

.pt-day__label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-sm);
}

.pt-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.pt-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pt-slot:hover:not(:disabled):not(.pt-slot--booked) {
  border-color: var(--blue);
  background: rgba(0, 62, 99, 0.02);
}

.pt-slot__time {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  margin-bottom: 4px;
}

.pt-slot__price {
  font-size: var(--font-size-xs);
  color: var(--blue);
  font-weight: var(--font-weight-medium);
}

.pt-slot__status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.pt-slot--unavailable {
  background: var(--gray-50);
  border-color: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.5;
}

.pt-slot--unavailable .pt-slot__status {
  color: var(--gray-400);
}

.pt-slot--booked {
  border-color: var(--blue);
  background: rgba(0, 62, 99, 0.04);
}

.pt-slot--booked .pt-slot__status {
  color: var(--blue);
}

/* PT price row in payment modal */
.pt-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.pt-price-row__amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
}

/* ============================================
   Utility: text-center
   ============================================ */

.text-center {
  text-align: center;
}

/* ============================================
   Voice Input
   ============================================ */

.voice-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.voice-input-wrap .form-input {
  flex: 1;
  min-width: 0;
}

.voice-mic-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.voice-mic-btn:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.voice-mic-btn--active {
  background: var(--red);
  color: var(--white);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 43, 43, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(210, 43, 43, 0); }
}

/* Voice Hero Block — prominent mic CTA for Fitness Goals */
.voice-hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(135deg, rgba(0, 62, 99, 0.05), rgba(0, 62, 99, 0.02));
  border: 1px dashed rgba(0, 62, 99, 0.2);
  border-radius: var(--radius-md);
}

.voice-hero-block__prompt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.voice-hero-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 62, 99, 0.25);
}

.voice-hero-btn:hover {
  background: var(--blue-dark);
  transform: scale(1.05);
}

.voice-hero-btn--active {
  background: var(--red);
  box-shadow: 0 4px 12px rgba(210, 43, 43, 0.3);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-hero-btn--active:hover {
  background: var(--red-dark);
}

.voice-hero-block__status {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: var(--space-sm);
}

/* ============================================
   Toggle Switches
   ============================================ */

.settings-toggles {
  display: flex;
  flex-direction: column;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 0;
}

.settings-toggle-row + .settings-toggle-row {
  border-top: 1px solid var(--gray-100);
}

.settings-toggle-info {
  flex: 1;
  min-width: 0;
}

.settings-toggle-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-800);
}

.settings-toggle-desc {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 1px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch__track {
  display: block;
  width: 44px;
  height: 24px;
  background: var(--gray-300);
  border-radius: 12px;
  position: relative;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.toggle-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast);
}

.toggle-switch input:checked + .toggle-switch__track {
  background: var(--blue);
}

.toggle-switch input:checked + .toggle-switch__track::after {
  transform: translateX(20px);
}

/* ============================================
   Referral Section
   ============================================ */

.referral-hero {
  text-align: center;
  padding: var(--space-md) 0;
  margin-bottom: var(--space-md);
}

.referral-hero__count {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  line-height: 1;
}

.referral-hero__label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 4px;
}

.referral-code-block {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.referral-code-block__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-sm);
}

.referral-code-block__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.referral-code-block__code {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  letter-spacing: 1px;
}

.referral-lb-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--blue);
  margin-bottom: var(--space-sm);
}

.referral-lb-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   Referral Summary Card (Profile)
   ============================================ */

.referral-summary-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.referral-summary-card:hover {
  box-shadow: var(--shadow-md);
}

.referral-summary-card__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

.referral-summary-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.referral-summary-card__info {
  flex: 1;
  min-width: 0;
}

.referral-summary-card__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.referral-summary-card__rank {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.referral-summary-card__code {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--blue);
  letter-spacing: 0.5px;
  background: rgba(0, 62, 99, 0.06);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================
   Danger Zone (Delete Account)
   ============================================ */

.settings-danger-box {
  background: rgba(210, 43, 43, 0.04);
  border: 1px solid rgba(210, 43, 43, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.settings-danger-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-danger-list li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.settings-danger-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
  opacity: 0.5;
}

/* ============================================
   Data Export List
   ============================================ */

.data-export-list {
  display: flex;
  flex-direction: column;
}

.data-export-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 0;
}

.data-export-item + .data-export-item {
  border-top: 1px solid var(--gray-100);
}

.data-export-icon {
  font-size: 1.25rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.data-export-info {
  flex: 1;
  min-width: 0;
}

.data-export-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-800);
}

.data-export-desc {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* ============================================
   Body Weight Chart
   ============================================ */

.body-chart {
  display: flex;
  gap: 8px;
  height: 160px;
  max-width: 100%;
  overflow: hidden;
}

.body-chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  padding: 4px 0;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

.body-chart__area {
  flex: 1;
  position: relative;
  min-width: 0;
}

.body-chart__svg {
  width: 100%;
  height: 100%;
}

.body-chart__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.body-chart__labels {
  position: relative;
  height: 20px;
  margin-top: 4px;
  margin-left: 36px;
}

.body-chart__label {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

/* ============================================
   Body History Rows
   ============================================ */

.body-history {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.body-history-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.body-history-row:last-child {
  border-bottom: none;
}

.body-history-row__date {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: 2px;
}

.body-history-row__metrics {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.body-history-row__weight {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
}

.body-history-row__bf {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.body-history-row__notes {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  font-style: italic;
  margin-top: 4px;
}

.text-green {
  color: var(--green);
}

/* ============================================
   Calendar Heatmap
   ============================================ */

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.heatmap-header {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  text-align: center;
  font-weight: var(--font-weight-medium);
  padding-bottom: 4px;
}

.heatmap-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--gray-600);
  background: var(--gray-50);
  transition: background var(--transition-fast);
}

.heatmap-cell--empty {
  background: transparent;
}

.heatmap-cell--active {
  background: var(--green);
  color: var(--white);
  font-weight: var(--font-weight-bold);
}

.heatmap-cell--today {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.heatmap-cell--future {
  background: transparent;
  color: var(--gray-300);
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}

.heatmap-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.heatmap-legend__dot--active {
  background: var(--green);
}

.chart-bar--blue {
  background: var(--blue);
}

/* ============================================
   Metric Selector Pills
   ============================================ */

.metric-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.metric-selector::-webkit-scrollbar {
  display: none;
}

.metric-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.metric-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.metric-pill--active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.metric-pill--active:hover {
  color: var(--white);
}

/* ============================================
   Body Coaching Note
   ============================================ */

.body-coaching-note {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md);
  background: rgba(0, 62, 99, 0.04);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--blue);
}

.body-coaching-note svg {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 1px;
}

.body-coaching-note p {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   Body Log Form Groups
   ============================================ */

.body-log-group {
  margin-bottom: var(--space-md);
}

.body-log-group__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gray-100);
}

/* ============================================
   Goal Selector
   ============================================ */

.goal-counter {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-xs);
}
.check-item input:disabled + * {
  opacity: 0.4;
}

/* ============================================
   Class Logos
   ============================================ */

.class-card__logo {
  width: 80px;
  height: auto;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.upcoming-item__logo {
  width: 80px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.next-class__logo {
  width: 80px;
  height: auto;
  object-fit: contain;
}

/* ============================================
   PAR-Q — Member App
   ============================================ */

/* CTA card (not completed) */
.parq-cta-card {
  border-left: 4px solid var(--amber, #F59E0B);
  padding: var(--space-md);
}

.parq-cta-card__icon {
  color: var(--amber, #F59E0B);
  margin-bottom: var(--space-sm);
}

.parq-cta-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  margin-bottom: 2px;
}

.parq-cta-card__desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-md);
}

/* Summary card (completed) */
.parq-summary-card {
  padding: var(--space-md);
}

.parq-summary-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.parq-summary-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.parq-summary-card__icon--done {
  background: var(--green-light, rgba(34, 197, 94, 0.1));
  color: var(--green, #22C55E);
}

.parq-summary-card__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.parq-summary-card__date {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.parq-summary-card__flags {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

/* PAR-Q form */
.parq-questions {
  margin-bottom: var(--space-md);
}

.parq-question {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--gray-100);
}

.parq-question:last-child {
  border-bottom: none;
}

.parq-question__number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.parq-question__body {
  flex: 1;
}

.parq-question__text {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.parq-question__toggles {
  display: flex;
  gap: var(--space-xs);
}

.parq-toggle {
  cursor: pointer;
}

.parq-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.parq-toggle__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  transition: all var(--transition-fast);
}

.parq-toggle input[type="radio"]:checked + .parq-toggle__label--no {
  background: var(--green-light, rgba(34, 197, 94, 0.1));
  color: var(--green, #22C55E);
  border-color: var(--green, #22C55E);
}

.parq-toggle input[type="radio"]:checked + .parq-toggle__label--yes {
  background: var(--danger-light, rgba(239, 68, 68, 0.1));
  color: var(--danger, #EF4444);
  border-color: var(--danger, #EF4444);
}

.parq-divider {
  height: 1px;
  background: var(--gray-200);
  margin: var(--space-md) 0;
}

.parq-declaration {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.4;
  cursor: pointer;
}

.parq-declaration input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ============================================
   Guest Pass Card
   ============================================ */

.guest-pass-card {
  padding: var(--space-md);
}

.guest-pass-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.guest-pass-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guest-pass-card__info {
  flex: 1;
  min-width: 0;
}

.guest-pass-card__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.guest-pass-card__expiry {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.guest-pass-card__desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.guest-pass-card__empty {
  text-align: center;
  padding: var(--space-sm) 0;
}

.guest-pass-card .btn svg {
  margin-right: var(--space-xs);
}

/* ============================================
   Group PT — Type Toggle
   ============================================ */

.pt-type-toggle {
  display: flex;
  gap: 0;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
}

.pt-type-toggle__btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-type-toggle__btn.active {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Group PT — Type Selection Cards
   ============================================ */

.group-pt-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-pt-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.group-pt-type:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.group-pt-type.selected {
  border-color: var(--blue);
  background: rgba(0, 62, 99, 0.03);
  box-shadow: 0 0 0 3px rgba(0, 62, 99, 0.08);
}

.group-pt-type__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-pt-type__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  flex-shrink: 0;
}

.group-pt-type.selected .group-pt-type__icon {
  background: rgba(0, 62, 99, 0.08);
  color: var(--blue);
}

.group-pt-type__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.group-pt-type__detail {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 1px;
}

.group-pt-type__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.group-pt-type.selected .group-pt-type__check {
  border-color: var(--blue);
  background: var(--blue);
}

.group-pt-type__check svg {
  display: none;
}

.group-pt-type.selected .group-pt-type__check svg {
  display: block;
}

/* ============================================
   Group PT — Participant Form
   ============================================ */

.group-pt-participant-field {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.group-pt-participant-field__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.group-pt-input {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  margin-bottom: 8px;
}

.group-pt-input:last-child {
  margin-bottom: 0;
}

.group-pt-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 62, 99, 0.1);
}

.group-pt-input.input-error {
  border-color: var(--danger);
}

.group-pt-input::placeholder {
  color: var(--gray-400);
}

.group-pt-you {
  padding: var(--space-md);
}

.group-pt-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.group-pt-price-row__amount {
  font-size: 1.1rem;
  color: var(--blue);
}

.group-pt-error {
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: var(--space-md);
  color: var(--danger);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.modal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-md);
  font-family: 'Inter', sans-serif;
}

.modal-back-btn:hover {
  color: var(--gray-700);
}

/* ============================================
   Group PT — Pricing Pills
   ============================================ */

.group-pt-pricing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-sm);
}

.group-pt-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 62, 99, 0.06);
  color: var(--blue);
  border-radius: var(--radius-full);
}

/* ============================================
   Group PT — Slot Variant
   ============================================ */

.pt-slot--group {
  border-left: 3px solid var(--teal);
}

/* ============================================
   Group PT — Status Screen
   ============================================ */

.group-pt-status-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-100);
}

.group-pt-status-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--gray-900);
}

.group-pt-link-card {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.group-pt-link-card__info {
  margin-bottom: var(--space-sm);
}

.group-pt-link-card__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.group-pt-link-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.group-pt-link-url {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.7rem;
  font-family: monospace;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-600);
  box-sizing: border-box;
}

.btn-copied {
  background: var(--green) !important;
  color: var(--white) !important;
}

.group-pt-confirmed {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--green-light);
  border-radius: var(--radius-md);
  color: var(--green);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ============================================
   Group PT — Booking Item Dot
   ============================================ */

.upcoming-item__dot--group-pt {
  background: var(--teal);
}


/* ============================================
   Prize Draw Section (Leaderboard page)
   ============================================ */

.pd-section {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.pd-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: var(--gray-800);
}

.pd-section__header svg {
  color: #ffc107;
}

.pd-section__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

.pd-winner-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
}

.pd-winner-card--me {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 143, 0, 0.06));
  border: 1px solid rgba(255, 193, 7, 0.25);
}

.pd-winner-card__confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc107, #ff8f00, #ad0005, #003E63, #ffc107);
  background-size: 200% 100%;
  animation: pdShimmer 3s ease infinite;
}

@keyframes pdShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pd-winner-card__emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.pd-winner-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-winner-card__text strong {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
}

.pd-winner-card__text span {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pd-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.pd-status--eligible {
  background: var(--green-light);
  color: var(--green);
  font-weight: var(--font-weight-semibold);
}

.pd-status--progress {
  flex-direction: column;
  align-items: stretch;
  background: var(--gray-50);
  color: var(--gray-600);
}

.pd-status--progress span {
  font-size: var(--font-size-xs);
  text-align: center;
  margin-top: var(--space-xs);
}

.pd-status__bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pd-status__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc107, #ff8f00);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.pd-status--info {
  background: var(--gray-50);
  color: var(--gray-500);
}

.pd-voucher {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, rgba(27, 158, 62, 0.06), rgba(27, 158, 62, 0.02));
  border: 1px solid rgba(27, 158, 62, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.pd-voucher svg {
  color: var(--green);
  flex-shrink: 0;
}

.pd-voucher strong {
  color: var(--green);
}

/* ============================================
   Responsive — Mobile improvements (M-H4)
   ============================================ */

/* Narrow screens: tighten spacing */
@media (max-width: 480px) {
  /* Profile card: slightly smaller avatar */
  .profile-avatar {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-lg);
  }

  /* Profile stats: tighter gap */
  .profile-stats {
    gap: var(--space-md);
  }

  /* Class cards: tighter padding */
  .class-card__body {
    padding: var(--space-sm) var(--space-md);
  }

  /* Leaderboard podium: smaller on narrow screens */
  .lb-podium {
    gap: var(--space-sm);
    padding: 0 var(--space-xs);
  }

  .lb-podium__avatar {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xs);
  }

  .lb-podium__col--1 .lb-podium__avatar {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-sm);
  }

  .lb-podium__name {
    font-size: 0.6875rem;
  }

  /* Calendar nav buttons: meet 44px touch target */
  .calendar-nav__btn {
    width: 44px;
    height: 44px;
  }

  /* Bottom nav: smaller font on very narrow screens */
  .bottom-nav__tab {
    font-size: 0.625rem;
  }
}

/* Wider screens: make use of extra space */
@media (min-width: 768px) {
  /* Profile card: larger avatar */
  .profile-avatar {
    width: 88px;
    height: 88px;
    font-size: var(--font-size-2xl);
  }

  /* Profile stats: wider gaps */
  .profile-stats {
    gap: var(--space-2xl);
  }

  /* Leaderboard podium: roomier */
  .lb-podium {
    gap: var(--space-lg);
  }

  .lb-podium__avatar {
    width: 56px;
    height: 56px;
  }

  .lb-podium__col--1 .lb-podium__avatar {
    width: 64px;
    height: 64px;
  }
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast--error {
  background: #dc2626;
  color: #fff;
}

.toast--success {
  background: #16a34a;
  color: #fff;
}

.toast--info {
  background: var(--blue);
  color: #fff;
}

.toast__close {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 18px;
}

.toast__close:hover {
  opacity: 1;
}

/* ============================================
   PWA Install Banner
   ============================================ */

.pwa-install-banner {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: var(--space-md);
  right: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: var(--space-md);
  z-index: 9999;
  transform: translateY(120%);
  transition: transform 0.3s ease;
}

.pwa-install-banner.visible {
  transform: translateY(0);
}

.pwa-install-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pwa-install-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.pwa-install-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-install-banner__text strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.pwa-install-banner__text span {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pwa-install-banner__actions {
  display: flex;
  gap: var(--space-sm);
}

.pwa-install-banner__btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.pwa-install-banner__btn--install {
  background: var(--blue);
  color: var(--white);
}

.pwa-install-banner__btn--dismiss {
  background: var(--gray-100);
  color: var(--gray-600);
}