/* One border value for the dark theme (owner 2026-09-28): 22 percent white on every screen, 35 on
   iOS, where the same line reads fainter ("more in iphone safari"). Every border on the site reads
   var(--bv-line) (or --bv-line-solid where a solid grey is needed), so this is the one place to move it. */
:root { --bv-line: rgba(255,255,255,0.15); --bv-line-solid: #35354f; --bv-lift: 0 1px 3px rgba(255,255,255,0.06); }
/* One value on every device (owner 2026-09-28): the stronger iPhone line of 2026-09-27 answered a Safari extension (Noir) darkening the page, not the phone. */
/* ========================================
   CUSTOMER PANEL — Sports Bar AI
   Styles for /panel pages (inside main site layout)
   ======================================== */

/* ---------- Panel Variables ---------- */
.panel-wrap {
  --bg-card: #161622;
  --bg-glass: rgba(255,255,255,0.04);
  --bg-hover: rgba(255,255,255,0.06);
  --border: var(--bv-line);
  --border-hover: rgba(255,255,255,0.35);
  --accent: #4aa1d9;
  --accent2: #7c3aed;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --text: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --transition: 0.2s ease;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 24px;
  min-height: 60vh;
}

/* ========================================
   ACCOUNT NAV
   One list, three groups, always rendered whole. It replaced two tab strips
   that swapped places, so that standing on Security hid Orders and standing
   on Orders hid Security (2026-08-24).
   Desktop: a sidebar beside the page. Under 900px: a horizontal strip above
   it, group headings dropped, because seven items do not fit a phone row.
   ======================================== */
.acct-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px;
}
.acct-shell .panel-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.acct-nav-wrap { position: sticky; top: 88px; }
.acct-nav { display: flex; flex-direction: column; gap: 2px; }
.acct-nav-group {
  padding: 16px 12px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
}
.acct-nav-group:first-child { padding-top: 0; }
.acct-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.87rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.acct-nav-item i, .acct-nav-item svg { flex-shrink: 0; width: 16px; text-align: center; }
.acct-nav-item:hover { color: #e2e8f0; background: rgba(255,255,255,0.04); }
.acct-nav-item.active { color: #fff; background: rgba(74,161,217,0.15); }
.acct-nav-item.active i, .acct-nav-item.active svg { color: #4aa1d9; stroke: #4aa1d9; }

@media (max-width: 900px) {
  .acct-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 16px 12px;
  }
  .acct-nav-wrap { position: static; }
  .acct-nav {
    flex-direction: row;
    gap: 2px;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--bv-line);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav-group { display: none; }
  .acct-nav-item { padding: 9px 14px; justify-content: center; }
}
@media (max-width: 560px) {
  .acct-nav-item span { display: none; }
  .acct-nav-item { flex: 1; padding: 10px 12px; }
}

/* ========================================
   PAGE HEADER
   ======================================== */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.page-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.page-actions { display: flex; align-items: center; gap: 8px; }

/* ========================================
   BUTTONS
   ======================================== */
/* Optical centering — symmetric padding + .tb-trim utility (see
   bookvelt-textcenter.css). Trim handles cap-height / baseline math. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: 0.85rem; line-height: 1; transition: var(--transition); border: none;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #00c4cc); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text); }
.btn-danger { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-ghost { background: none; color: var(--text-muted); padding: 6px 10px; }
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; line-height: 1; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========================================
   STAT CARDS
   ======================================== */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.stat-label {
  font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.stat-icon.blue { background: rgba(74,161,217,0.15); color: var(--accent); }
.stat-icon.green { background: rgba(34,197,94,0.15); color: var(--success); }
.stat-icon.orange { background: rgba(243,147,34,0.15); color: var(--brand-orange); }
.stat-icon.purple { background: rgba(124,58,237,0.15); color: var(--accent2); }

/* ========================================
   DATA TABLE
   ======================================== */
.data-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead { background: var(--bg-glass); border-bottom: 1px solid var(--border); }
.data-table th {
  text-align: left; padding: 10px 14px; font-weight: 600;
  color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.data-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); vertical-align: middle;
}
.data-table tbody tr { transition: var(--transition); }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); }

.table-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-muted);
}
.pagination-btns { display: flex; gap: 4px; }
.pagination-btn {
  padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.8rem;
  color: var(--text-secondary); background: var(--bg-glass);
  border: 1px solid var(--border); transition: var(--transition);
}
.pagination-btn:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========================================
   BADGES
   ======================================== */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 20px; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.badge-active, .badge-confirmed, .badge-completed, .badge-succeeded { background: rgba(34,197,94,0.15); color: var(--success); }
.badge-inactive, .badge-draft { background: rgba(100,116,139,0.2); color: var(--text-muted); }
.badge-pending { background: rgba(245,158,11,0.15); color: var(--warning); }
.badge-cancelled, .badge-failed, .badge-refunded { background: rgba(239,68,68,0.15); color: var(--danger); }

/* ========================================
   FORMS
   ======================================== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 12px; background: var(--bg-glass);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.85rem; outline: none; transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-select { appearance: none; cursor: pointer; }
.form-select option { background: var(--bg-card); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 0.72rem; color: var(--danger); margin-top: 4px; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle {
  display: block; width: 36px; min-width: 36px; max-width: 36px; height: 20px;
  border-radius: 10px; background: var(--bg-glass); border: 1px solid var(--border);
  position: relative; transition: var(--transition); flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-muted); transition: var(--transition);
}
.toggle-input:checked + .toggle { background: var(--accent); border-color: var(--accent); }
.toggle-input:checked + .toggle::after { left: 18px; background: #fff; }
.toggle-input { display: none; }

/* ========================================
   SLIDE PANEL
   ======================================== */
.slide-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 300; opacity: 0; visibility: hidden; transition: var(--transition);
}
.slide-panel-overlay.open { opacity: 1; visibility: visible; }
.slide-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 90vw; background: var(--bg-secondary);
  border-left: 1px solid var(--border); z-index: 310;
  transform: translateX(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column;
}
.slide-panel-overlay.open .slide-panel { transform: translateX(0); }
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 1.1rem; font-weight: 700; }
.panel-close {
  width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm);
  color: var(--text-muted); transition: var(--transition);
}
.panel-close:hover { background: var(--bg-hover); color: var(--text); }
.panel-body { flex: 1; overflow-y: auto; padding: 20px; }
.panel-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 500;
  display: flex; flex-direction: column-reverse; gap: 8px;
}
.toast {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  min-width: 280px; max-width: 400px; font-size: 0.85rem;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4); animation: toastIn 0.3s ease;
}
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error { border-left: 3px solid var(--danger); }
.toast.toast-info { border-left: 3px solid var(--accent); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   CONFIRM MODAL
   ======================================== */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 400; display: none; align-items: center; justify-content: center;
}
.confirm-overlay.open { display: flex; }
.confirm-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; text-align: center;
}
.confirm-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.confirm-text { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; }

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { margin-bottom: 16px; opacity: 0.4; }
.empty-state h3 { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state p { font-size: 0.85rem; margin-bottom: 16px; }

/* ========================================
   DETAIL VIEW
   ======================================== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.detail-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.detail-card-title {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.detail-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 0.85rem; border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--text-muted); }
.detail-row .value { color: var(--text); font-weight: 500; }

/* ========================================
   SECTION CARDS (for settings pages)
   ======================================== */
.section-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.section-card-title {
  font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.section-card-desc {
  font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px;
}

/* Notification preference row */
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.pref-row:last-child { border-bottom: none; }
.pref-info { flex: 1; }
.pref-title { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.pref-desc { font-size: 0.75rem; color: var(--text-muted); }

/* Connected account row */
.provider-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.provider-row:last-child { border-bottom: none; }
.provider-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-glass);
}
.provider-info { flex: 1; display: flex; align-items: center; gap: 8px; }
.provider-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.provider-status { font-size: 0.75rem; color: var(--text-muted); }
.provider-status.connected { color: var(--success); }

/* ========================================
   FAVORITES GRID
   ======================================== */
.fav-group-title {
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fav-group-title:first-child { margin-top: 0; }
.fav-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.fav-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; text-align: center;
  position: relative; transition: var(--transition);
}
.fav-card:hover { border-color: var(--border-hover); }
.fav-card img {
  display: block; width: 40px; height: 40px;
  object-fit: contain; margin: 0 auto 8px;
}
.fav-card-ph {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--bg-glass); display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); font-size: 1.1rem;
}
.fav-card-name { font-size: 0.7rem; font-weight: 600; color: var(--text); }
/* Add card: same footprint as a favourite, drawn as an invitation rather than
   a saved thing. Green is the add colour across the brand. */
.fav-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; border-style: dashed; background: transparent;
  min-height: 100px; width: 100%; font-family: inherit;
}
.fav-add:hover { border-color: #66b32e; }
.fav-add-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(102, 179, 46, 0.12); color: #66b32e;
}
.fav-add .fav-card-name { color: #66b32e; }
.fav-remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: var(--transition); opacity: 0;
}
.fav-card:hover .fav-remove { opacity: 1; }
.fav-remove:hover { color: var(--danger); background: rgba(239,68,68,0.15); }

/* Favorites actions bar */
.fav-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.fav-actions .btn { display: inline-flex; align-items: center; gap: 5px; }

/* Favorites picker modal */
.fav-picker-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fav-picker {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); width: 100%; max-width: 480px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.fav-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
}
.fav-picker-header h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
.fav-picker-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: var(--transition);
}
.fav-picker-close:hover { background: var(--bg-hover); color: var(--text); }
.fav-picker-search { padding: 10px 18px 0; }
.fav-picker-search input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 0.85rem; outline: none;
}
.fav-picker-search input:focus { border-color: var(--accent); }
.fav-picker-filter {
  display: flex; gap: 6px; padding: 10px 18px 0; flex-wrap: wrap;
}
.fav-pill {
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
  background: var(--bg-glass); color: var(--text-muted); border: 1px solid var(--border);
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.fav-pill:hover { border-color: var(--border-hover); color: var(--text); }
.fav-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fav-picker-list {
  flex: 1; overflow-y: auto; padding: 10px 12px 14px;
}
.fav-picker-list .empty-state { padding: 30px 10px; }
.fav-picker-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius); cursor: pointer; transition: var(--transition);
}
.fav-picker-row:hover { background: var(--bg-hover); }
.fav-picker-badge {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; border-radius: 4px;
}
.fav-picker-badge-ph {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-glass); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 700;
}
.fav-picker-name { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text); }
.fav-picker-sub { color: var(--text-muted); font-weight: 400; margin-left: 4px; font-size: 0.75rem; }
.fav-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.fav-check svg, .fav-check i { display: none; }
.fav-check.checked {
  background: var(--accent); border-color: var(--accent);
}
.fav-check.checked svg, .fav-check.checked i { display: block; color: #fff; }

/* ========================================
   SKELETON LOADING
   ======================================== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-hover) 50%, var(--bg-glass) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
   ORDERS LIST
   ======================================== */
.orders-list {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.orders-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.orders-table thead { background: var(--bg-glass); border-bottom: 1px solid var(--border); }
.orders-table th {
  text-align: left; padding: 10px 12px; font-weight: 600;
  color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.orders-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); vertical-align: top;
}
.orders-table tbody tr { cursor: default; transition: var(--transition); }
.orders-table tbody tr:hover { background: var(--bg-hover); }
.orders-table tbody tr:last-child td { border-bottom: none; }
.order-ref { color: var(--accent); font-size: 0.78rem; font-weight: 600; background: none; }
.order-event { font-weight: 600; color: var(--text); font-size: 0.82rem; line-height: 1.3; }
.order-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.order-time { font-weight: 600; color: var(--text); white-space: nowrap; }
.order-ticket-line { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.order-passes { display: flex; align-items: center; gap: 6px; }
.pass-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; background: var(--bg-glass);
  border: 1px solid var(--border); transition: var(--transition);
}
.pass-icon:hover { border-color: var(--accent); background: var(--bg-hover); }
.pass-icon img { border-radius: 0; }
.pass-pdf svg { color: var(--text-muted); }
.pass-pdf:hover svg { color: var(--accent); }

/* Mobile cards (hidden on desktop) */
.orders-mobile { display: none; }
.order-card {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  cursor: default; transition: var(--transition);
}
.order-card:hover { background: var(--bg-hover); }
.order-card:last-child { border-bottom: none; }
.order-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.order-card-event { flex: 1; min-width: 0; }
.order-card-title { font-size: 0.85rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.order-card-league { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.order-card-loc {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;
}
.order-card-loc svg { color: var(--orange, #f39322); flex-shrink: 0; }
.order-card-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
  font-size: 0.78rem; color: var(--text-secondary);
}
.order-card-tickets { margin-top: 8px; }
.order-card-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* ========================================
   ORDER CONFIRMATION (in sidebar)
   ======================================== */
.oc-card { background: #12121e; border-radius: 16px; border: 1px solid var(--bv-line-solid); overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .panel-wrap { padding: 16px 12px; }
  .panel-wrap .form-row { grid-template-columns: 1fr; }
  .panel-wrap .detail-grid { grid-template-columns: 1fr; }
  .panel-wrap .stats-grid { grid-template-columns: 1fr 1fr; }
  .panel-wrap .slide-panel { width: 100vw; max-width: 100vw; }
  .panel-wrap .fav-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .orders-desktop { display: none; }
  .orders-mobile { display: block; }
}
@media (max-width: 480px) {
  .panel-wrap .stats-grid { grid-template-columns: 1fr; }
  .panel-wrap .page-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- Welcome Popup ---------- */
.welcome-popup {
  background: #161622;
  border: 1px solid var(--bv-line);
  border-radius: 16px;
  padding: 32px 28px 28px;
  max-width: 480px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.25s ease;
}
.welcome-header { text-align: center; margin-bottom: 24px; }
.welcome-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 12px 0 4px; }
.welcome-subtitle { font-size: 0.9rem; color: #94a3b8; margin: 0; }
.welcome-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.welcome-feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bv-line);
  border-radius: 10px;
}
.welcome-feature svg { flex-shrink: 0; margin-top: 2px; }
.welcome-feature div { display: flex; flex-direction: column; gap: 2px; }
.welcome-feature strong { font-size: 0.9rem; color: #fff; }
.welcome-feature span { font-size: 0.8rem; color: #94a3b8; }
.welcome-terms {
  background: rgba(74,161,217,0.06);
  border: 1px solid rgba(74,161,217,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.welcome-terms-label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 0.85rem; color: #cbd5e1;
}
.welcome-terms-label input[type="checkbox"] {
  margin-top: 3px; accent-color: #4aa1d9; flex-shrink: 0;
  width: 18px; height: 18px;
}
.welcome-terms-label a { color: #4aa1d9; text-decoration: underline; }
.welcome-terms-label a:hover { color: #6bb5e3; }
.welcome-btn {
  width: 100%; padding: 14px; font-size: 1rem; font-weight: 600;
  border-radius: 10px;
}
.welcome-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.welcome-decline {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.welcome-decline:hover { color: #ef4444; }

/* Billing modal */
.billing-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.billing-modal {
  background: var(--bg-surface, #12121e); border: 1px solid var(--border-color, var(--bv-line-solid));
  border-radius: 16px; padding: 28px 32px; width: 100%; max-width: 600px;
  margin: auto; overflow: visible; color: #fff;
}
.billing-page-form { display: flex; flex-direction: column; gap: 32px; }
.billing-form { display: flex; flex-direction: column; gap: 16px; }
.billing-modal .bf-row { flex-wrap: wrap; }
.bf-row { display: flex; gap: 12px; }
.bf-field { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-field label { font-size: 0.72rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }
.bf-field input, .bf-field select {
  background: #1a1a2e; border: 1px solid var(--bv-line-solid); border-radius: 8px;
  padding: 10px 14px; font-size: 0.88rem; color: #fff; font-family: inherit;
  outline: none; width: 100%; box-sizing: border-box;
}
.bf-field input:focus, .bf-field select:focus { border-color: #4aa1d9; box-shadow: 0 0 0 2px rgba(74,161,217,0.15); }
.bf-field input::placeholder { color: #4b5563; }
.bf-field select { appearance: none; }
@media (max-width: 640px) {
  .bf-row { flex-wrap: wrap; }
  .bf-row .bf-field { min-width: 100%; }
  .bf-row .bf-field[style*="flex:0"] { min-width: 100%; flex: 1 1 100% !important; }
}
@media (max-width: 420px) {
  .bf-row .bf-field { min-width: 100%; }
  .bf-row .bf-field[style*="flex:0"] { min-width: 100%; flex: 1 1 100% !important; }
}


/* Notifications matrix */
.notif-matrix { width: 100%; border-collapse: collapse; }
.notif-matrix th { text-align: center; padding: 10px 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.notif-matrix tr:first-child td { border-top: none; }
.notif-matrix td { padding: 14px 8px; border-top: 1px solid var(--bv-line); }
.notif-matrix .notif-type { width: 55%; }
.notif-matrix .notif-cell { text-align: center; }
.notif-matrix .toggle-wrap { display: inline-flex; }
@media (max-width: 560px) {
  /* Stack: full-width title+desc row, toggles on their own line below */
  .notif-matrix, .notif-matrix tbody { display: block; }
  .notif-matrix tr { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 0; border-top: 1px solid var(--bv-line); }
  .notif-matrix tr:first-child { border-top: none; }
  .notif-matrix td { display: block; border-top: none; padding: 0; }
  .notif-matrix .notif-type { width: 100%; margin-bottom: 10px; }
  .notif-matrix .notif-cell { flex: 0 0 auto; margin-right: 14px; }
}

/* Switch with the channel icon riding the knob */
.notif-switch { display: inline-flex; cursor: pointer; }
.notif-switch .toggle-input { display: none; }
.notif-switch-track {
  display: block; width: 46px; min-width: 46px; height: 26px;
  border-radius: 13px; background: var(--bg-glass); border: 1px solid var(--border);
  position: relative; transition: var(--transition); flex-shrink: 0;
}
.notif-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-muted); color: #14141e;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.notif-switch-knob i, .notif-switch-knob img { font-size: 12px; line-height: 1; }
.notif-switch .toggle-input:checked + .notif-switch-track {
  background: var(--accent); border-color: var(--accent);
}
.notif-switch .toggle-input:checked + .notif-switch-track .notif-switch-knob {
  left: 22px; background: #fff; color: var(--accent);
}

/* ========================================
   PROFILE PAGE
   ======================================== */
.pf-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.pf-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  display: block;
}
.pf-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.6rem;
}
.pf-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pf-hint { font-size: 0.75rem; color: var(--text-muted); }
.pf-save-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pf-org-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.pf-org-name { font-weight: 600; }
.pf-org-open { margin-left: auto; }
@media (max-width: 560px) {
  .pf-avatar-row { flex-direction: column; align-items: flex-start; }
  .pf-org-row { flex-wrap: wrap; }
  .pf-org-open { margin-left: 0; }
}

/* WhatsApp sits with the phone as a contact detail, but it is not a plain
   field: the number is only stored once a code sent over WhatsApp is
   verified, so the row shows the current value and opens the editor. */
.pf-wa-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
}
.pf-wa-row .provider-status { flex: 1; font-size: 0.85rem; }

/* The tier check on a bar favourite's logo corner (owner 2026-09-27), self-contained
   so the account pages do not depend on frontpage.css for it. */
.fav-card .sb-logo-wrap { position: relative; display: inline-flex; margin: 0 auto 8px; }
.fav-card .sb-logo-wrap img, .fav-card .sb-logo-wrap .fav-card-ph { margin: 0; }
.fav-card .sb-logo-wrap .ld-tier-badge { position: absolute; right: -6px; top: -6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-card, #12121e); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.fav-card .sb-logo-wrap .ld-tier-badge i { font-size: 14px !important; line-height: 1; }
.fav-card .ld-tier-listed { color: #f39220; }
.fav-card .ld-tier-paid { color: #4aa1d9; }
.fav-card .ld-tier-managed { color: #22c55e; }

/* Tab rows inside the account area (Notifications: inbox / settings, all / unread). The markup is
   the business panel's .bp-tab, whose rules are scoped to #bizPanel; these are the account's own. */
.panel-wrap .bp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.panel-wrap .bp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-glass); color: var(--text-secondary); font: inherit; font-size: .84rem; font-weight: 600; line-height: 1; cursor: pointer; }
.panel-wrap .bp-tab > i { font-size: 0.95em !important; line-height: 1; }
.panel-wrap .bp-tab:hover { color: var(--text); border-color: var(--border-hover); }
.panel-wrap .bp-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(74,161,217,0.14); }

/* Borders on every object (owner 2026-09-27). */
.panel-wrap .btn, .panel-wrap input, .panel-wrap select, .panel-wrap textarea { border: 1px solid var(--bv-line); }