/* All rules scoped under .fc-widget so this can't bleed into (or be bled on
   by) the host page's global styles once embedded.

   Colors are CSS variables so the whole visual identity can be swapped with
   one class toggle (see .fc-widget.fc-theme-night below) — this is the demo
   proof that styling is fully ours to control. */

.fc-widget, .fc-widget *, .fc-widget *::before, .fc-widget *::after {
  box-sizing: border-box;
}

.fc-widget {
  /* Brand tokens pulled directly from flightclubdartsusa.com's computed
     styles (dark nav bg, brand green, brand red hover, cream section bg,
     Bebas Neue headings, sharp/square corners throughout — see git history
     for how these were sampled). --fc-accent/-hover intentionally mirror the
     real site's actual green→red hover behavior, not an invented palette. */
  --fc-page-bg: transparent;
  --fc-text: #0e1915;
  --fc-text-muted: #5b6b64;
  --fc-card-bg: #fff;
  --fc-card-shadow: 0 1px 3px rgba(14, 25, 21, 0.1);
  --fc-border: #ddd8d2;
  --fc-border-soft: #f0ede8;
  --fc-accent: #00a479;
  --fc-accent-hover: #ef435b;
  --fc-accent-active: #00875f;
  --fc-accent-glow: none;
  --fc-input-bg: #fff;
  --fc-tier-1: #71bcc5;
  --fc-tier-1-hover: #5aa3ac;
  --fc-tier-1-active: #3d747a;
  --fc-tier-2: #00a479;
  --fc-tier-2-hover: #00875f;
  --fc-tier-2-active: #045c43;
  --fc-tier-3: #9f2936;
  --fc-tier-3-hover: #7c1f29;
  --fc-tier-3-active: #5c161d;

  /* Radius tokens: default theme goes sharp/square to match the real site's
     buttons and cards (all border-radius: 0 there); the night theme below
     reclaims rounded corners as part of its own distinct look. */
  --fc-radius-sm: 0px;
  --fc-radius-md: 2px;
  --fc-radius-lg: 0px;
  --fc-radius-pill: 0px;

  background: var(--fc-page-bg);
  font-family: 'brandon', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--fc-text);
  max-width: 860px;
  margin: 0 auto;
  padding: 16px;
  border-radius: var(--fc-radius-lg);
  position: relative;
  transition: background .3s ease;
}

.fc-widget h1, .fc-widget h2 {
  font-family: 'Bebas Neue', 'brandon', -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.fc-widget h1 { font-size: 2.1rem; margin: 0 0 4px; line-height: 1; }
.fc-widget h2 { font-size: 1.35rem; margin: 0 0 16px; line-height: 1; }
.fc-widget .fc-subtitle { color: var(--fc-text-muted); font-size: 0.85rem; margin-bottom: 20px; }

.fc-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.fc-theme-toggle {
  border: 1.5px solid var(--fc-border); background: var(--fc-card-bg); color: var(--fc-text);
  border-radius: var(--fc-radius-pill); padding: 7px 14px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .2s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fc-theme-toggle:hover { border-color: var(--fc-accent); }

.fc-steps { display: flex; gap: 0; margin-bottom: 24px; }
.fc-step-label {
  flex: 1; text-align: center; padding: 8px 4px; font-size: 0.78rem; font-weight: 600;
  border-bottom: 3px solid var(--fc-border); color: #aaa; transition: all .2s;
}
.fc-step-label.active { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-step-label.done { border-color: var(--fc-accent); color: var(--fc-accent); opacity: .55; }
.fc-step-label.clickable { cursor: pointer; }
.fc-step-label.clickable:hover { opacity: .85; text-decoration: underline; }

.fc-card {
  background: var(--fc-card-bg); border-radius: var(--fc-radius-md); padding: 24px;
  box-shadow: var(--fc-card-shadow); margin-bottom: 16px;
  transition: background .3s ease, box-shadow .3s ease;
}

.fc-controls-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; align-items: flex-end; }
.fc-field { display: flex; flex-direction: column; gap: 5px; }
.fc-field label { font-size: 0.78rem; font-weight: 600; color: var(--fc-text-muted); }
.fc-field select, .fc-field input {
  border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius-sm); padding: 8px 12px; font-size: 0.9rem;
  background: var(--fc-input-bg); color: var(--fc-text); min-width: 160px;
}
.fc-field select:focus, .fc-field input:focus { outline: none; border-color: var(--fc-accent); }

.fc-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .fc-slot-grid { grid-template-columns: repeat(2, 1fr); } }
.fc-slot-btn {
  background: var(--fc-tier-1); color: #fff; border: none; border-radius: var(--fc-radius-sm);
  padding: 14px 8px; cursor: pointer; font-size: 0.88rem; font-weight: 600;
  line-height: 1.4; text-align: center; transition: all .15s;
}
.fc-slot-btn:hover { background: var(--fc-tier-1-hover); transform: translateY(-1px); box-shadow: var(--fc-accent-glow); }
.fc-slot-btn.selected { background: var(--fc-tier-1-active); outline: 3px solid var(--fc-tier-1); outline-offset: 2px; }
.fc-slot-btn .fc-slot-sub { font-size: 0.75rem; font-weight: 400; opacity: .85; }

/* Tier 2 ($2/person) */
.fc-slot-btn--tier-2 { background: var(--fc-tier-2); }
.fc-slot-btn--tier-2:hover { background: var(--fc-tier-2-hover); }
.fc-slot-btn--tier-2.selected { background: var(--fc-tier-2-active); outline-color: var(--fc-tier-2); }

/* Tier 3 ($3/person) */
.fc-slot-btn--tier-3 { background: var(--fc-tier-3); }
.fc-slot-btn--tier-3:hover { background: var(--fc-tier-3-hover); }
.fc-slot-btn--tier-3.selected { background: var(--fc-tier-3-active); outline-color: var(--fc-tier-3); }

/* Test-only "SPECIAL" one-off event rule — a blue/pink/red gradient so it
   reads as clearly distinct from the solid Tier 1/2/3 colors. Hover/selected
   need their own explicit `background` (not just `filter`) — otherwise the
   base .fc-slot-btn:hover/.selected rules' solid Tier 1 color wins, since
   this block never overrides that property for those states. */
.fc-slot-btn--special {
  background: linear-gradient(135deg, #3b82f6 0%, #ec4899 55%, #ef4444 100%);
}
.fc-slot-btn--special:hover {
  background: linear-gradient(135deg, #2563eb 0%, #db2777 55%, #dc2626 100%);
}
.fc-slot-btn--special.selected {
  background: linear-gradient(135deg, #1d4ed8 0%, #be185d 55%, #b91c1c 100%);
  outline: 3px solid rgba(0, 0, 0, 0.45); outline-offset: 2px;
}

/* Simulated sold-out slot — deliberately muted/outlined so it never reads
   as a normal bookable option. */
.fc-slot-btn--waitlist {
  background: transparent; border: 2px dashed var(--fc-border); color: var(--fc-text-muted);
}
.fc-slot-btn--waitlist:hover {
  background: transparent; border-color: var(--fc-accent); color: var(--fc-accent);
  transform: none; box-shadow: none;
}

.fc-pkg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.fc-pkg-card {
  border: 2px solid var(--fc-border); border-radius: var(--fc-radius-md); background: var(--fc-card-bg); cursor: pointer;
  padding: 0 0 10px; text-align: left; overflow: hidden; transition: all .15s; font-family: inherit;
}
.fc-pkg-card:hover { border-color: var(--fc-accent); transform: translateY(-2px); box-shadow: var(--fc-accent-glow); }
.fc-pkg-card.active { border-color: var(--fc-accent); box-shadow: var(--fc-accent-glow); }
.fc-pkg-card-img {
  width: 100%; height: 90px; background-size: cover; background-position: center;
  background-color: var(--fc-border-soft); display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.fc-pkg-card-placeholder { color: var(--fc-text-muted); }
.fc-pkg-card-name { font-size: 0.88rem; font-weight: 700; padding: 10px 12px 2px; color: var(--fc-text); }
.fc-pkg-card-count { font-size: 0.75rem; color: var(--fc-text-muted); padding: 0 12px; }

.fc-pkg-body { display: none; }
.fc-pkg-body.active { display: block; }
.fc-pkg-desc { font-size: 0.82rem; color: var(--fc-text-muted); margin-bottom: 14px; font-style: italic; }

.fc-item-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--fc-border-soft);
}
.fc-item-row:last-child { border-bottom: none; }
.fc-item-thumb {
  width: 84px; height: 56px; flex-shrink: 0; margin-right: 14px;
  border-radius: var(--fc-radius-sm); background-size: cover; background-position: center;
}
.fc-item-name { font-size: 0.88rem; flex: 1; }
.fc-item-price { font-size: 0.82rem; color: var(--fc-text-muted); width: 80px; text-align: right; margin-right: 14px; }
.fc-qty-ctrl { display: flex; align-items: center; gap: 8px; }
.fc-qty-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--fc-accent);
  background: var(--fc-card-bg); color: var(--fc-accent); font-size: 1.1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fc-qty-btn:hover { background: var(--fc-accent); color: #fff; }
.fc-qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 0.9rem; }

.fc-pkg-footer {
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--fc-border-soft);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.fc-pkg-total { font-size: 1.05rem; font-weight: 700; }
.fc-validation-msg { font-size: 0.8rem; color: #c0392b; font-weight: 600; }
.fc-validation-ok { font-size: 0.8rem; color: var(--fc-accent); font-weight: 600; }

.fc-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 480px) { .fc-review-grid { grid-template-columns: 1fr; } }
.fc-review-field label { font-size: 0.75rem; font-weight: 600; color: var(--fc-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fc-review-field .fc-val { font-size: 1rem; font-weight: 600; margin-top: 2px; }
.fc-review-items { margin-top: 12px; }
.fc-review-item-row { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 5px 0; border-bottom: 1px solid var(--fc-border-soft); }
.fc-review-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--fc-border); }

.fc-package-log {
  background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 16px;
  font-family: 'Menlo', 'Consolas', monospace; font-size: 0.78rem;
  overflow-x: auto; white-space: pre; line-height: 1.5; margin-top: 12px;
}
.fc-package-log-label { font-size: 0.78rem; color: var(--fc-text-muted); font-weight: 600; margin-top: 16px; margin-bottom: 4px; }

.fc-btn {
  padding: 13px 28px 10px; border-radius: var(--fc-radius-sm); border: none; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; transition: all .15s;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fc-btn-primary { background: var(--fc-accent); color: #fff; }
.fc-btn-primary:hover:not(:disabled) { background: var(--fc-accent-hover); box-shadow: var(--fc-accent-glow); }
.fc-btn-primary:disabled { background: #a0c8b0; cursor: not-allowed; }
.fc-btn-secondary { background: var(--fc-border-soft); color: var(--fc-text); }
.fc-btn-secondary:hover { background: var(--fc-border); }
.fc-btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; gap: 10px; }

.fc-checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px) { .fc-checkout-layout { grid-template-columns: 1fr; } }
.fc-checkout-main .fc-card { margin-bottom: 16px; }
.fc-payment-element { min-height: 200px; }
.fc-policy-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--fc-text-muted); line-height: 1.5; cursor: pointer; }
.fc-policy-row input { margin-top: 3px; flex-shrink: 0; }
.fc-checkout-summary { position: sticky; top: 16px; }
.fc-summary-line { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 4px 0; }
.fc-summary-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--fc-border-soft); }

.fc-hidden { display: none !important; }
.fc-notice { background: var(--fc-border-soft); border-left: 3px solid var(--fc-accent); border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0; padding: 10px 14px; font-size: 0.82rem; color: var(--fc-text-muted); margin-bottom: 16px; }
.fc-error { background: #fdecea; border: 1px solid #f5c2c0; color: #a12622; border-radius: var(--fc-radius-sm); padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px; }
.fc-loading { display: flex; align-items: center; gap: 8px; color: var(--fc-text-muted); font-size: 0.85rem; padding: 8px 0; }
.fc-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--fc-border);
  border-top-color: var(--fc-accent);
  border-radius: 50%;
  animation: fc-spin 0.7s linear infinite;
}
@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   NIGHT CLUB THEME — pure proof-of-concept that this can be restyled
   however the brand wants. Toggle applies .fc-theme-night to the widget
   root; every rule above reads from the variables redefined here, so this
   block is the ENTIRE visual swap — no other CSS or markup changes needed.
   ───────────────────────────────────────────────────────────────────────── */
.fc-widget.fc-theme-night {
  --fc-page-bg: radial-gradient(circle at 20% 0%, #2a1240 0%, #0d0518 55%, #050308 100%);
  --fc-text: #f2ecff;
  --fc-text-muted: #b7a9d6;
  --fc-card-bg: #171025;
  --fc-card-shadow: 0 0 0 1px rgba(255, 46, 136, 0.15), 0 8px 30px rgba(124, 58, 237, 0.25);
  --fc-border: #3a2b57;
  --fc-border-soft: #241a38;
  --fc-accent: #ff2e88;
  --fc-accent-hover: #ff4fa0;
  --fc-accent-active: #c2005f;
  --fc-accent-glow: 0 0 16px rgba(255, 46, 136, 0.65);
  --fc-input-bg: #1f1730;
  --fc-tier-1: #22d3ee;
  --fc-tier-1-hover: #0fb8d4;
  --fc-tier-1-active: #0a7f92;
  --fc-tier-2: #39ffb0;
  --fc-tier-2-hover: #1fe097;
  --fc-tier-2-active: #0f9c6c;
  --fc-tier-3: #ff2965;
  --fc-tier-3-hover: #e0104e;
  --fc-tier-3-active: #9c0038;

  /* Reclaim rounded corners + pill shapes for the club look — the default
     theme above goes deliberately sharp/square to match the real site. */
  --fc-radius-sm: 10px;
  --fc-radius-md: 12px;
  --fc-radius-lg: 16px;
  --fc-radius-pill: 20px;

  padding: 20px;
  box-shadow: 0 0 60px rgba(124, 58, 237, 0.2);
}

.fc-widget.fc-theme-night h1,
.fc-widget.fc-theme-night h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}
.fc-widget.fc-theme-night h1 { font-size: 1.4rem; }
.fc-widget.fc-theme-night h2 { font-size: 1rem; }

.fc-widget.fc-theme-night h1 {
  background: linear-gradient(90deg, #ff2e88, #7c3aed, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 46, 136, 0.35);
}

.fc-widget.fc-theme-night .fc-btn {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  padding: 11px 28px;
}

.fc-widget.fc-theme-night .fc-slot-btn,
.fc-widget.fc-theme-night .fc-btn-primary,
.fc-widget.fc-theme-night .fc-qty-btn:hover {
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

.fc-widget.fc-theme-night .fc-field select,
.fc-widget.fc-theme-night .fc-field input {
  color: var(--fc-text);
}

.fc-widget.fc-theme-night .fc-package-log {
  background: #0a0712;
  border: 1px solid var(--fc-border);
}