/* ═══════════════════════════════════════
   CHECKOUT & TICKETS — DARK THEME OVERRIDES
   Revenue-critical: must maintain readability
   and trust signals.
   Loads AFTER checkout-v2.css
   ═══════════════════════════════════════ */

/* ─── VARIABLE OVERRIDES ─── */
:root {
  --checkout-gradient: linear-gradient(135deg, var(--t-accent) 0%, var(--t-purple) 100%);
  --checkout-primary: var(--t-accent);
  --checkout-primary-dark: var(--t-purple);
  --checkout-success: var(--t-green);
  --checkout-danger: var(--t-accent-bright);
  --checkout-text: var(--t-text-primary);
  --checkout-text-muted: var(--t-text-secondary);
  --checkout-border: var(--t-border-mid);
  --checkout-bg: var(--t-bg-deep);
  --checkout-radius: 0;
  --checkout-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --checkout-font-headline: var(--t-font-headline);
  --checkout-font-body: var(--t-font-body);
}

/* ─── PAGE BASE ─── */
body:has(.checkout-page-v2),
.checkout-page-v2-body {
  background: var(--t-bg-abyss) !important;
}

.checkout-page-v2,
.checkout-container {
  background: var(--t-bg-abyss) !important;
}

/* ─── ORDER SUMMARY CARD ─── */
.order-summary-card {
  background: var(--t-bg-card) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

.summary-header {
  background: var(--t-bg-surface) !important;
  border-bottom: 1px solid var(--t-border) !important;
}

.summary-header h4,
.summary-header h5 {
  color: var(--t-text-hero) !important;
}

/* Summary table rows */
.summary-table .table-row,
.summary-table .table-header {
  border-bottom: 1px solid var(--t-border) !important;
}

.summary-table .table-header {
  color: var(--t-text-muted) !important;
}

.summary-table .ticket-name {
  color: var(--t-text-primary) !important;
}

.summary-table .ticket-price,
.summary-table .ticket-qty {
  color: var(--t-text-secondary) !important;
}

.summary-table .ticket-total {
  color: var(--t-text-hero) !important;
}

/* Totals */
.summary-total,
.order-total {
  color: var(--t-text-hero) !important;
  border-top: 1px solid var(--t-border-mid) !important;
}

.summary-total .total-amount,
.order-total .total-amount {
  color: var(--t-green) !important;
}

/* ─── DISCOUNT CODE ─── */
.discount-code-section {
  background: var(--t-bg-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

.discount-input {
  background: var(--t-bg-deep) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text-primary) !important;
  border-radius: 0 !important;
}

.discount-input:focus {
  background: var(--t-bg-deep) !important;
  border-color: var(--t-accent) !important;
}

/* ─── CHECKOUT CARD (PAYMENT FORM) ─── */
.checkout-card {
  background: var(--t-bg-card) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

.card-header-v2 {
  background: var(--t-bg-surface) !important;
  border-bottom: 1px solid var(--t-border) !important;
}

.card-header-v2 h4,
.card-header-v2 h5 {
  color: var(--t-text-hero) !important;
}

/* ─── FORM CONTROLS ─── */
.form-control-v2,
.checkout-card .form-control,
.checkout-card input,
.checkout-card select {
  background: var(--t-bg-deep) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text-primary) !important;
  border-radius: 0 !important;
}

.form-control-v2:focus,
.checkout-card .form-control:focus,
.checkout-card input:focus,
.checkout-card select:focus {
  background: var(--t-bg-deep) !important;
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15) !important;
}

.checkout-card label {
  color: var(--t-text-secondary) !important;
  font-family: var(--t-font-condensed);
}

/* ─── SQUARE PAYMENT CONTAINER ─── */
.square-card-container {
  background: var(--t-bg-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
  padding: 16px !important;
}

/* Square iframe fields are styled by Square SDK — can't override.
   The container styling gives a dark surround. */

/* ─── TERMS AGREEMENT ─── */
.terms-agreement {
  background: var(--t-bg-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
  color: var(--t-text-secondary) !important;
}

.terms-agreement a {
  color: var(--t-accent) !important;
}

/* Checkbox */
.checkmark {
  background: var(--t-bg-deep) !important;
  border: 1px solid var(--t-border-mid) !important;
  border-radius: 0 !important;
}

/* ─── TICKET FIELDS ─── */
.ticket-fields-group {
  background: var(--t-bg-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

.ticket-fields-group h5,
.ticket-fields-group h6 {
  color: var(--t-text-hero) !important;
}

/* ─── BUTTONS ─── */
.btn-checkout,
.btn-pay,
.checkout-card .btn-primary {
  background: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
  color: var(--t-bg-abyss) !important;
  border-radius: 0 !important;
  font-family: var(--t-font-headline);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.btn-checkout:hover,
.btn-pay:hover,
.checkout-card .btn-primary:hover {
  background: var(--t-accent-bright) !important;
  border-color: var(--t-accent-bright) !important;
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.2) !important;
}

.btn-cancel {
  background: var(--t-bg-surface) !important;
  color: var(--t-text-secondary) !important;
  border: 1px solid var(--t-border-mid) !important;
  border-radius: 0 !important;
}

.btn-cancel:hover {
  background: var(--t-bg-elevated) !important;
  color: var(--t-text-hero) !important;
}

/* ─── AUTH CARD ─── */
.auth-card {
  background: var(--t-bg-card) !important;
  border: 2px solid var(--t-purple) !important;
  border-radius: 0 !important;
}

.auth-card .auth-header {
  background: var(--t-bg-surface) !important;
}

/* ─── MOBILE CHECKOUT BAR ─── */
.mobile-checkout-bar {
  background: rgba(5, 5, 8, 0.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--t-border) !important;
}

/* ─── PRELOADER ─── */
.preloader-overlay {
  background: rgba(5, 5, 8, 0.92) !important;
}

.preloader-overlay .spinner-border {
  color: var(--t-accent) !important;
}

/* ─── ERROR / FEEDBACK STATES ─── */
.error-feedback,
.invalid-feedback {
  color: var(--t-accent-bright) !important;
}

.is-invalid {
  border-color: var(--t-accent-bright) !important;
}

/* ═══════════════════════════════════════
   SUCCESS PAGE OVERRIDES
   ═══════════════════════════════════════ */

/* Transaction info rows */
.transaction-info .info-row {
  border-bottom: 1px solid var(--t-border) !important;
}

.info-label {
  color: var(--t-text-muted) !important;
}

.info-value {
  color: var(--t-text-hero) !important;
}

/* Ticket breakdown */
.ticket-breakdown {
  background: var(--t-bg-surface) !important;
  border-radius: 0 !important;
}

/* Table on success page */
.ticket-breakdown .table th {
  color: var(--t-text-hero) !important;
  background: var(--t-bg-surface) !important;
}

.ticket-breakdown .table td {
  color: var(--t-text-primary) !important;
}

/* Discount row inline style override */
tr[style*="background-color: #d4edda"] {
  background-color: rgba(102, 187, 106, 0.1) !important;
}

tr[style*="border-top: 2px solid #28a745"] {
  border-top: 2px solid var(--t-green) !important;
}

/* Success card */
.success-card,
.order-confirmation {
  background: var(--t-bg-card) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════
   TICKET CALCULATOR OVERRIDES
   ═══════════════════════════════════════ */

.calculator-card,
#calculatorForm .card {
  background: var(--t-bg-card) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}

#calculatorForm .card-body {
  background: var(--t-bg-card) !important;
}

#calculatorForm .card-title {
  color: var(--t-text-hero) !important;
}

#calculatorForm .form-control {
  background: var(--t-bg-deep) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text-primary) !important;
  border-radius: 0 !important;
}

#calculatorForm .form-label {
  color: var(--t-text-secondary) !important;
}

/* Results display */
.calculator-results,
.payout-results {
  background: var(--t-bg-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 0 !important;
}