/* ---------- Purchase steps and add-on cards in the ticket modal ----------
 *
 * Moved out of event_page.html so the timed-entry page's stepper looks the
 * same: the step dots (.tm-steps), the per-ticket tabs and the add-on cards.
 * The product grid, fair-pass and attendee styles are event_page-only and
 * stay in its own <style>.
 */
.tm-addon-step {
  flex:1; overflow-y:auto; min-height:0;
  -webkit-overflow-scrolling:touch;
}
/* Ticket tabs (per-ticket) */
.tm-addon-tabs {
  display:flex; gap:0; overflow-x:auto;
  border-bottom:2px solid var(--bat-gray-200);
  padding:0 1rem;
}
.tm-addon-tab {
  border:none; background:none; padding:.6rem 1rem;
  font-size:.9rem; color:var(--bat-text-secondary);
  cursor:pointer; white-space:nowrap; position:relative;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.tm-addon-tab:hover { color:var(--bat-text-primary); }
.tm-addon-tab.active {
  color:var(--bat-green); font-weight:var(--bat-font-weight-semibold);
  border-bottom-color:var(--bat-green);
}
.tm-addon-ticket-pane { padding:1rem; }

/* Category group headers */
.tm-addon-category-group { margin-bottom:1.25rem; }
.tm-addon-category-header {
  display:flex; align-items:center; gap:.5rem;
  font-weight:var(--bat-font-weight-semibold); font-size:.95rem;
  padding:.5rem 0; margin-bottom:.5rem;
  border-bottom:2px solid var(--bat-gray-200);
  color:var(--bat-text-primary);
}
.tm-addon-category-header i {
  font-size:.9rem; width:20px; text-align:center;
}
.tm-addon-category-header .tm-cat-count {
  font-weight:var(--bat-font-weight-normal); font-size:.8rem;
  color:var(--bat-text-muted); margin-left:auto;
}

/* Add-on card — matches .tm-ticket-row pattern */
.tm-addon-card {
  display:flex; align-items:center; gap:1rem;
  padding:1rem; margin-bottom:.75rem;
  background:var(--bat-white); border:1px solid var(--bat-gray-200);
  border-radius:var(--bat-radius-lg);
  transition:border-color var(--bat-transition-fast), box-shadow var(--bat-transition-fast);
}
.tm-addon-card:hover { border-color:var(--bat-gray-300); }
.tm-addon-card.selected {
  border-color:var(--bat-green);
  box-shadow:0 0 0 2px rgba(0,166,81,.12);
}
.tm-addon-card.sold-out { opacity:.5; pointer-events:none; }

.tm-steps { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--bat-gray-200, #e5e7eb); }
.tm-steps-item { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:#6c757d; white-space:nowrap; }
.tm-steps-dot { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:1.5px solid #adb5bd; color:#6c757d; background:#fff; }
.tm-steps-item.done .tm-steps-dot { background:#9ED13C; border-color:#9ED13C; color:#1a1a1a; }
.tm-steps-item.active { color:#16123F; font-weight:700; }
.tm-steps-item.active .tm-steps-dot { background:#16123F; border-color:#16123F; color:#fff; }
.tm-steps-line { flex:1; height:2px; background:#dee2e6; min-width:12px; }
.tm-steps-line.done { background:#9ED13C; }
@media (max-width: 575px) { .tm-steps-item:not(.active) .tm-steps-label { display:none; } }

.tm-addon-error { background:#FDE4E2; color:#C21B1B; border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600; margin-bottom:10px; }

.tm-addon-card-thumb {
  width:56px; height:56px; border-radius:var(--bat-radius-sm);
  object-fit:cover; flex-shrink:0;
}
.tm-addon-card-info { flex:1; min-width:0; }
.tm-addon-card-name {
  font-size:1rem; font-weight:var(--bat-font-weight-semibold);
  color:var(--bat-text-primary);
}
.tm-addon-card-desc {
  font-size:.85rem; color:var(--bat-text-secondary); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tm-addon-card-meta {
  font-size:.8rem; color:var(--bat-text-muted); margin-top:2px;
}
.tm-addon-card-meta i { margin-right:.25rem; }
.tm-addon-card-price {
  font-size:1rem; font-weight:var(--bat-font-weight-bold);
  color:var(--bat-green); margin-top:2px;
}
.tm-addon-card-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:.35rem;
  flex-shrink:0;
}
.tm-addon-card-right .badge { font-size:.75rem; }

/* Checkbox toggle for ticket-specific add-ons */
.tm-addon-toggle {
  width:22px; height:22px; accent-color:var(--bat-green);
  cursor:pointer; flex-shrink:0;
}

/* Qty rows container */
.tm-addon-rows { padding:1rem; }
@media (min-width: 768px) {
  .tm-addon-rows { padding:1.5rem; }
  .tm-addon-ticket-pane { padding:1.5rem; }
}

/* Mobile: stack card layout vertically */
@media (max-width: 400px) {
  .tm-addon-card { flex-wrap:wrap; gap:.5rem; padding:.75rem; }
  .tm-addon-card-thumb { width:44px; height:44px; }
  .tm-addon-card-right { flex-direction:row; width:100%; justify-content:flex-end; }
  .tm-addon-card-desc { white-space:normal; }
}