/* ═══════════════════════════════════════════════════════
   Church Seats – Public Styles
═══════════════════════════════════════════════════════ */
:root {
  --cs-primary:    #1e293b;
  --cs-accent:     #6366f1;
  --cs-accent-dk:  #4f46e5;
  --cs-light:      #f8fafc;
  --cs-border:     #e2e8f0;
  --cs-radius:     14px;
  --cs-shadow:     0 4px 24px rgba(0,0,0,.08);
  --cs-font:       'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cs-avail:      #22c55e;
  --cs-reserved:   #f59e0b;
  --cs-sold:       #ef4444;
  --cs-ease:       cubic-bezier(.4,0,.2,1);
}

/* ── Base wrapper ───────────────────────────────────── */
.cs-wrapper {
  font-family: var(--cs-font);
  color: var(--cs-primary);
  max-width: 1100px;
  margin: 0 auto;
}

/* ── View switching ─────────────────────────────────── */
.cs-view         { animation: cs-fadein .25s var(--cs-ease); }
.cs-view-hidden  { display: none !important; }
@keyframes cs-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ═══════════════════════════════════════════════════════
   FLOATING CART BAR
═══════════════════════════════════════════════════════ */
.cs-cart-bar {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--cs-ease), opacity .25s var(--cs-ease), margin .35s var(--cs-ease);
  margin-bottom: 0;
}
.cs-cart-bar.cs-bar-visible {
  max-height: 120px;
  opacity: 1;
  margin-bottom: 16px;
}

.cs-cart-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: var(--cs-radius);
  padding: 14px 20px;
  box-shadow: 0 4px 20px rgba(99,102,241,.25);
}

.cs-cart-bar-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.cs-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: cs-chip-in .18s var(--cs-ease);
}
@keyframes cs-chip-in { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:none; } }
.cs-bar-chip-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  transition: color .12s;
}
.cs-bar-chip-remove:hover { color: #fca5a5; }

.cs-cart-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.cs-cart-bar-total {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.cs-cart-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cs-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--cs-font);
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.cs-cart-bar-btn:hover { background: var(--cs-accent-dk); transform: translateY(-1px); }

.cs-bar-badge {
  background: #fff;
  color: var(--cs-accent);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   FLOORPLAN
═══════════════════════════════════════════════════════ */
.cs-floorplan-container {
  position: relative;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  margin-bottom: 16px;
  line-height: 0;
}
.cs-floorplan-container img,
.cs-floorplan-container svg { width:100%; height:auto; display:block; }

/* SVG seats */
.cs-floorplan-container svg [data-cs-seat] {
  cursor: pointer;
  transition: opacity .15s, filter .15s;
}
.cs-floorplan-container svg [data-cs-seat]:hover       { filter:brightness(1.15); }
.cs-floorplan-container svg [data-cs-seat].cs-selected { filter:brightness(1.3) drop-shadow(0 0 5px rgba(99,102,241,.7)); }
.cs-floorplan-container svg [data-cs-seat][data-status=reserved],
.cs-floorplan-container svg [data-cs-seat][data-status=sold]     { cursor:not-allowed; }

/* Image overlays */
.cs-seat-overlay { transition: filter .15s, transform .12s; }
.cs-seat-overlay:hover                                 { filter:brightness(1.12); transform:scale(1.05); }
.cs-seat-overlay.cs-selected                           { filter:brightness(1.25); outline:3px solid #6366f1; outline-offset:1px; transform:scale(1.05); }
.cs-seat-overlay[data-status=reserved]:hover,
.cs-seat-overlay[data-status=sold]:hover               { filter:none; transform:none; }

/* Stats badge */
.cs-stats-badge {
  position: absolute;
  background: rgba(15,23,42,.82);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11px;
  font-family: var(--cs-font);
  line-height: 1.9;
  min-width: 128px;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.cs-stats-badge.top-left     { top:12px;    left:12px;  }
.cs-stats-badge.top-right    { top:12px;    right:12px; }
.cs-stats-badge.bottom-left  { bottom:12px; left:12px;  }
.cs-stats-badge.bottom-right { bottom:12px; right:12px; }
.cs-stat-row    { display:flex; align-items:center; gap:7px; }
.cs-stat-dot    { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cs-stat-dot.available { background:var(--cs-avail); }
.cs-stat-dot.reserved  { background:var(--cs-reserved); }
.cs-stat-dot.sold      { background:var(--cs-sold); }
.cs-stat-row strong    { margin-left:auto; padding-left:10px; font-weight:700; }

/* Legend */
.cs-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0 20px;
  font-size: 12px;
  color: #64748b;
}
.cs-legend-item   { display:flex; align-items:center; gap:6px; }
.cs-legend-swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.cs-legend-hint   { margin-left:auto; font-style:italic; color:#94a3b8; }

/* No plan */
.cs-no-plan { background:#f8fafc; border:2px dashed #e2e8f0; border-radius:var(--cs-radius); padding:60px; text-align:center; color:#94a3b8; }

/* ═══════════════════════════════════════════════════════
   CART / CHECKOUT PAGE
═══════════════════════════════════════════════════════ */
.cs-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 768px) { .cs-checkout-layout { grid-template-columns: 1fr; } }

/* Back button at top of cart view */
.cs-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--cs-border);
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cs-font);
  color: var(--cs-primary);
  cursor: pointer;
  transition: background .14s, border-color .14s;
  text-decoration: none;
}
.cs-btn-back:hover { background: var(--cs-light); border-color: #cbd5e1; }

/* ── Order summary panel ─────────────────────────────── */
.cs-order-summary {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
  position: sticky;
  top: 20px;
}
.cs-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-summary-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}
.cs-summary-items {
  padding: 10px 12px;
  min-height: 60px;
  max-height: 320px;
  overflow-y: auto;
}
.cs-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--cs-light);
  margin-bottom: 6px;
  font-size: 13px;
  animation: cs-fadein .18s var(--cs-ease);
}
.cs-summary-item-label { flex:1; font-weight:600; }
.cs-summary-item-price { font-weight:700; color:var(--cs-accent); white-space:nowrap; }
.cs-summary-item-remove {
  background: none; border: none;
  color: #ef4444; cursor: pointer;
  font-size: 16px; padding: 0 2px;
  opacity: .6; line-height: 1;
  transition: opacity .12s;
}
.cs-summary-item-remove:hover { opacity:1; }

.cs-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 2px solid var(--cs-border);
  font-size: 15px;
  font-weight: 700;
}
.cs-summary-total-amount { font-size: 22px; font-weight: 800; color: var(--cs-accent); }

.cs-summary-actions { padding: 12px 20px 16px; }

/* ── Checkout form ───────────────────────────────────── */
.cs-checkout-form-wrap {
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  padding: 28px 28px 24px;
}
.cs-checkout-form-wrap > h2 {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 800;
}
.cs-form-section {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-form-section:last-of-type { border-bottom: none; }
.cs-form-section h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94a3b8;
  margin: 0 0 14px;
}
.cs-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) { .cs-field-row { grid-template-columns: 1fr; } }

.cs-field { display: flex; flex-direction: column; gap: 4px; }
.cs-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
}
.cs-field input {
  border: 1.5px solid var(--cs-border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--cs-font);
  color: var(--cs-primary);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  box-sizing: border-box;
}
.cs-field input:focus { outline:none; border-color:var(--cs-accent); box-shadow:0 0 0 3px rgba(99,102,241,.12); }

.cs-field-full { grid-column: 1 / -1; }

.cs-field-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  font-style: italic;
}

/* Payment methods */
.cs-pay-methods { display:flex; flex-direction:column; gap:7px; }
.cs-pay-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 2px solid var(--cs-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cs-font);
  transition: border-color .15s, background .15s;
}
.cs-pay-method input[type=radio] { display: none; }
.cs-pay-method:has(input:checked) { border-color:var(--cs-accent); background:#ede9fe22; }
.cs-pm-icon  { font-size:20px; width:28px; text-align:center; flex-shrink:0; }
.cs-pm-name  { flex:1; }
.cs-pm-check {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--cs-border);
  flex-shrink:0; transition:all .15s;
}
.cs-pay-method:has(input:checked) .cs-pm-check {
  border-color:var(--cs-accent);
  background:var(--cs-accent);
  box-shadow:inset 0 0 0 3px #fff;
}

/* Checkout actions */
.cs-checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* Main pay button */
.cs-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--cs-font);
  cursor: pointer;
  letter-spacing: .02em;
  transition: opacity .15s, transform .12s;
}
.cs-btn-checkout:hover    { opacity:.92; transform:translateY(-1px); }
.cs-btn-checkout:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.cs-btn-danger-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--cs-font);
  cursor: pointer;
  transition: background .13s;
}
.cs-btn-danger-sm:hover { background: #fecaca; }

.cs-terms-note {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 12px;
}
.cs-terms-note a { color: var(--cs-accent); text-decoration: none; }
.cs-terms-note a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   SUCCESS VIEW
═══════════════════════════════════════════════════════ */
.cs-success {
  text-align: center;
  padding: 60px 24px;
  font-family: var(--cs-font);
}
.cs-success-icon { font-size: 72px; margin-bottom: 16px; }
.cs-success h2   { font-size: 24px; font-weight: 800; color: var(--cs-primary); margin: 0 0 10px; }
.cs-success p    { color: #64748b; font-size: 15px; }
.cs-order-ref {
  font-size: 13px;
  font-weight: 700;
  background: #f1f5f9;
  border-radius: 9px;
  padding: 10px 18px;
  display: inline-block;
  margin-top: 14px;
  color: #64748b;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════
   SPINNER & TOAST
═══════════════════════════════════════════════════════ */
.cs-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cs-spin .55s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* PayPal area */
#cs-paypal-buttons { margin-top: 10px; }

@media (max-width: 600px) {
  .cs-cart-bar-inner { flex-wrap: wrap; gap: 10px; }
  .cs-cart-bar-chips { width: 100%; }
  .cs-cart-bar-right { width: 100%; justify-content: space-between; }
  .cs-checkout-form-wrap { padding: 20px 16px; }
}

/* -- Inline Validation Styles -- */
.cs-field input.cs-field-error {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.cs-field input.cs-field-success {
  border-color: #22c55e !important;
  background-color: #f0fdf4 !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}