.App-Overview{display: none !important;}

/* =========================================
   CHECKOUT PAGE STYLES
   Uses design tokens from design-system.css
   ========================================= */

/* Checkout Items */
.checkout-items-list {
  margin-bottom: 1.5rem;
}

.checkout-event-group {
  border-bottom: 1px solid var(--bat-gray-200);
  padding-bottom: 1rem;
}

.checkout-event-title {
  margin-bottom: 0.75rem;
}

.checkout-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bat-gray-200);
  border-radius: var(--bat-radius-sm);
  margin-bottom: 0.5rem;
  background: var(--bat-white);
}

.checkout-item-info {
  flex: 1;
}

.checkout-item-info h6 {
  font-weight: var(--bat-font-weight-semibold);
}

.checkout-item-price {
  flex-shrink: 0;
  font-weight: var(--bat-font-weight-semibold);
  margin-left: 1rem;
  white-space: nowrap;
}

.checkout-item-actions {
  flex-shrink: 0;
  margin-left: 1rem;
}
.checkout-item-actions .btn {
  color: var(--bat-blue, #5386E4);
  border-color: var(--bat-blue, #5386E4);
  background: transparent;
}
.checkout-item-actions .btn:hover,
.checkout-item-actions .btn:focus {
  color: #fff;
  background: var(--bat-blue, #5386E4);
  border-color: var(--bat-blue, #5386E4);
}

/* Date / time meta line — consistent across all event types */
.checkout-item-meta {
  font-size: 0.82rem;
  color: var(--bat-text-secondary, #6b7280);
  margin-bottom: 0.25rem;
}
.checkout-item-meta i {
  font-size: 0.75rem;
}

/* Seats (AS) */
.checkout-seat {
  font-size: 0.85rem;
  color: var(--bat-text-secondary);
  padding: 2px 0;
}

/* Shared detail section — registration fields, convention attendees */
.checkout-detail-section {
  font-size: 0.82rem;
  border-left: 2px solid var(--bat-gray-200);
  padding-left: 0.6rem;
}
.checkout-detail-row {
  padding: 2px 0;
}
.checkout-detail-row + .checkout-detail-row {
  margin-top: 0.15rem;
}

/* Ticket-specific add-ons shown inline under their ticket */
.checkout-ticket-addon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: var(--bat-gray-100, #f3f4f6);
  border-left: 3px solid var(--bat-blue, #3b82f6);
  border-radius: 0 var(--bat-radius-sm, 4px) var(--bat-radius-sm, 4px) 0;
  font-size: 0.82rem;
}
.checkout-ticket-addon i.fa-plus-circle {
  color: var(--bat-blue, #3b82f6);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.checkout-ticket-addon-price {
  margin-left: auto;
  font-weight: var(--bat-font-weight-semibold, 600);
  white-space: nowrap;
  color: var(--bat-text-primary, #111827);
}

/* Registration Edit Modal */
#regEditModal .modal-header {
  border-bottom: 2px solid var(--bat-gray-200);
  padding: 1.25rem 1.5rem;
}
#regEditModal .modal-title {
  font-weight: var(--bat-font-weight-bold);
  font-size: 1.2rem;
}
#regEditModal .modal-body {
  padding: 1.5rem;
}
#regEditModal .modal-footer {
  border-top: 2px solid var(--bat-gray-200);
  padding: 1rem 1.5rem;
}
#regEditModal .reg-section {
  margin-bottom: 1.5rem;
}
#regEditModal .reg-section-header {
  font-weight: var(--bat-font-weight-semibold);
  font-size: 1.05rem;
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  border-bottom: 2px solid;
}
#regEditModal .reg-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
#regEditModal .reg-row > .reg-field {
  flex: 1;
  min-width: 0;
}
#regEditModal .reg-field label {
  font-weight: var(--bat-font-weight-medium);
  font-size: .9rem;
  margin-bottom: .35rem;
  display: block;
  color: var(--bat-text-primary);
}
#regEditModal .reg-field label .req { color: #dc3545; }
#regEditModal .reg-field input:not([type="checkbox"]):not([type="radio"]),
#regEditModal .reg-field select,
#regEditModal .reg-field textarea {
  width: 100%;
  border: 1px solid var(--bat-gray-300);
  border-radius: var(--bat-radius-sm);
  padding: .5rem .75rem;
  font-size: .95rem;
  transition: border-color var(--bat-transition-fast), box-shadow var(--bat-transition-fast);
}
#regEditModal .reg-field input:not([type="checkbox"]):not([type="radio"]):focus,
#regEditModal .reg-field select:focus,
#regEditModal .reg-field textarea:focus {
  border-color: var(--bat-blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--bat-blue-100);
}
#regEditModal .reg-field .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 0;
}
#regEditModal .reg-field .form-check-input {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  margin: 0;
}
#regEditModal .reg-field .form-check-label {
  font-weight: var(--bat-font-weight-normal);
  font-size: .9rem;
  margin-bottom: 0;
  cursor: pointer;
}
#regEditModal .reg-field .radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
#regEditModal .reg-field .radio-group label {
  font-weight: var(--bat-font-weight-normal);
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
#regEditModal .reg-field .agreement-box {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--bat-gray-300);
  border-radius: var(--bat-radius-sm);
  padding: .75rem;
  font-size: .85rem;
  color: var(--bat-text-secondary);
  background: var(--bat-gray-100);
  margin-bottom: .5rem;
  white-space: pre-wrap;
}
/* Section accent colors (intentional palette — not tokenized) */
#regEditModal .section-color-0 { border-color: #4f46e5; color: #4f46e5; }
#regEditModal .section-color-1 { border-color: #059669; color: #059669; }
#regEditModal .section-color-2 { border-color: #d97706; color: #d97706; }
#regEditModal .section-color-3 { border-color: #dc2626; color: #dc2626; }
#regEditModal .section-color-4 { border-color: #7c3aed; color: #7c3aed; }

@media (max-width: 576px) {
  #regEditModal .reg-row { flex-direction: column; gap: .5rem; }
}

/* ===== HOLD EXPIRATION TIMER ===== */
.checkout-timer-banner {
  background: var(--bat-blue-50, #eff6ff);
  color: var(--bat-blue-dark, #1e40af);
  border: 1px solid var(--bat-blue, #3b82f6);
  border-radius: var(--bat-radius-sm, 6px);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}
.checkout-timer-banner.warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}
.checkout-timer-banner.expired {
  background: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}