:root{
  --bg:#0a0f1a;
  --panel:#0e152a;
  --panel2:#0a1020;
  --text:#e7ecf3;
  --muted:#a7b3c7;
  --accent:#d4af37;
  --accent2:#3b82f6;
  --ring:rgba(59,130,246,.30);
  --success:#d4af37;
  --danger:#ef4444;
  --radius:16px;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 12% -12%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 420px at 88% -8%, rgba(212,175,55,.10), transparent 58%),
    linear-gradient(180deg, #071022, #060a12 60%, #05070d);
  color:var(--text);
  line-height:1.5;
}

a{color:inherit}

/* HERO */
.hero{
  padding:26px 16px 18px;
  background:
    radial-gradient(800px 360px at 50% -10%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, #0a1020, #0b1222 60%, #070b13);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent2), transparent);
  opacity:.6;
}
.hero-wrap{max-width:980px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:14px}
.hero-logo{
  width:118px; height:118px; border-radius:22px; overflow:hidden;
  background: radial-gradient(closest-side, rgba(59,130,246,.30), transparent 68%);
  box-shadow: 0 16px 44px rgba(3,102,214,.35);
}
.hero-logo img{width:100%; height:100%; object-fit:cover}
.hero-text{text-align:center}
.hero h1{margin:0; font-size:2rem; letter-spacing:.2px; line-height:1.15}
.hero-sub{margin:6px 0 0; color:#dfe7ff; font-size:1.1rem; opacity:.95}
.hero-meta{margin:8px 0 0; color:#9fb7ff; font-size:.95rem; opacity:.9}

/* PROGRAM */
.program{padding:14px 16px 0}
.program-wrap{max-width:1040px; margin:0 auto}
.program-title{margin:14px 0 12px; text-align:center; font-size:1.35rem; color:#eaf2ff}

.filters{
  background:linear-gradient(180deg,var(--panel2),rgba(14,21,42,.85));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  box-shadow:0 10px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding:16px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}
.filter-group{min-width:240px}
.filter-label{font-weight:900; color:#eaf2ff; margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.chip{
  border:1px solid var(--border2);
  background:rgba(255,255,255,.04);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:950;
  min-width:64px;
  text-align:center;
  user-select:none;
}
.chip:hover{border-color:rgba(59,130,246,.35)}
.chip.active{
  border-color:rgba(212,175,55,.72);
  background:rgba(212,175,55,.12);
  box-shadow:0 10px 28px rgba(212,175,55,.10);
}
.filter-toggle{min-width:300px}
.toggle{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.95rem}
.toggle input{transform:scale(1.08)}

/* View toggle */
.view-toggle{display:flex; gap:10px; margin:12px 0 10px; justify-content:flex-start}
.vt-btn{
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff; cursor:pointer; font-weight:950;
}
.vt-btn.active{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22)}

/* Messages */
.program-msg, .program-error{
  margin:10px 0 0;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.program-error{border-color:rgba(239,68,68,.35); color:#fecaca}

/* Cards grid */
.events-grid{display:grid; grid-template-columns:1fr; gap:14px; margin:10px 0 6px}
@media(min-width:768px){.events-grid{grid-template-columns:repeat(3,1fr); gap:18px}}

.ecard{
  position:relative;
  background:linear-gradient(180deg, rgba(11,16,32,.94), rgba(10,16,32,.62));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 52px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
  min-height:228px;
}
.ecard::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(560px 240px at 50% 0%, rgba(59,130,246,.16), transparent 70%);
  pointer-events:none;
}
.ecard-link{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.ecard-logo{
  width:96%;
  max-width:440px;
  max-height:178px;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.58));
  transform: translateY(14px);
}

/* Badges */
.badge{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,16,32,.58);
  padding:7px 10px;
  border-radius:999px;
  color:#eaf2ff;
  font-weight:900;
  letter-spacing:.2px;
  backdrop-filter: blur(6px);
  box-shadow:0 10px 22px rgba(0,0,0,.34);
  user-select:none;
  white-space:nowrap;
}
.badge-season{top:12px; left:12px; width:40px; padding:0; border-radius:12px; font-size:1.05rem}
.badge-j{
  top:12px; right:12px;
  background:linear-gradient(135deg, rgba(59,130,246,.24), rgba(59,130,246,.10));
  border-color:rgba(59,130,246,.46);
  font-size:1.05rem;
  padding:8px 12px;
  min-width:64px;
}
.badge-date{bottom:12px; right:12px; background:rgba(255,255,255,.06)}
.badge-extra{bottom:12px; left:12px; background:rgba(255,255,255,.06)}

/* MAP */
.map-wrap{margin-top:10px}
.map{
  height:430px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.map-note{opacity:.8; font-size:13px; margin-top:8px}
@media(max-width:600px){ .map{height:300px} }

/* FORM */
main{padding:12px 16px 40px; max-width:1040px; margin:0 auto}
form{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding:20px;
  margin:12px 0
}
fieldset{
  border:2px solid rgba(212,175,94,.35);
  padding:18px;
  border-radius:14px;
  margin:16px 0 0;
  position:relative;
}
legend{padding:0 8px; color:var(--accent2); font-weight:900; font-size:1.1rem}
.grid{display:flex; flex-direction:column; gap:16px}
label{display:block; font-size:1rem; margin-bottom:8px; font-weight:600}
.req{color:#fbbf24; font-weight:900}
.muted{color:var(--muted); font-size:.95rem}

.input-container{position:relative}
input[type="text"], input[type="email"], input[type="tel"], input[type="range"], select, textarea{
  width:100%;
  padding:16px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.16);
  background:#0b1020;
  color:var(--text);
  outline:none;
  font-size:16px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px var(--ring);
  background:#0b142a
}
textarea{min-height:120px; resize:vertical}
select{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23d4af37' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:44px
}

/* Radios/checkbox blocks */
.check-row{display:flex; flex-direction:column; gap:10px}
.check{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:14px 44px 14px 48px;
  min-height:54px;
  border-radius:12px;
  background:#0b1020;
  border:1px solid rgba(255,255,255,.08);
  transition:.2s;
  cursor:pointer;
}
.check input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.check::before{
  content:"";
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:2px solid #cfd8e3;
  background:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.check:has(input:checked){
  border-color:rgba(212,175,55,.60);
  background:rgba(212,175,94,.08);
}
.check:has(input:checked)::before{ background:var(--accent2); border-color:#fff }
.check:has(input:checked)::after{
  content:"✓"; position:absolute; right:14px;
  color:var(--accent); font-weight:900; font-size:16px
}

/* Slider with hand */
.slider-container{
  position:relative;
  margin:10px 0 0;
  background: rgba(11,16,32,.5);
  border-radius:12px;
  padding:15px;
  border:2px solid rgba(212,175,94,.5);
}
input[type="range"]{
  height:44px;
  padding:0;
  background:transparent;
  position:relative;
  z-index:2;
  width:calc(100% - 10px);
  margin:0 5px
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  height:28px; width:28px; border-radius:50%;
  background:var(--accent2);
  border:2px solid #fff;
  box-shadow:0 4px 12px rgba(59,130,246,.4)
}
input[type="range"]::-webkit-slider-track{
  height:8px; background:rgba(255,255,255,.12);
  border-radius:4px
}
.hand-hint{
  position:absolute;
  top:-35px; left:0;
  z-index:5;
  opacity:.95;
  pointer-events:none;
  animation: slideHand 3s ease-in-out infinite;
}
.hand-hint svg{width:32px; height:32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); color: var(--accent)}
@keyframes slideHand{
  0%{transform:translateX(0); opacity:0}
  10%{opacity:.95}
  30%{transform:translateX(calc(100% - 50px)) scale(1.1)}
  50%{transform:translateX(calc(100% - 50px))}
  70%{transform:translateX(0) scale(1.1)}
  90%{opacity:.95}
  100%{transform:translateX(0); opacity:0}
}
.confidence-display{margin-top:8px; display:flex; gap:8px; align-items:center}
.confidence-value{font-weight:950; color:#fff}

/* Availability rows */
.avail-row{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.avail-row:last-child{border-bottom:0}
.avail-title{font-weight:900; color:#eaf2ff}
.avail-info{margin-top:2px}

/* Submit */
.submit{margin-top:22px; display:flex; gap:12px; flex-direction:column}
button{
  appearance:none; border:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  padding:18px 24px;
  border-radius:14px;
  font-weight:900;
  font-size:1.1rem;
  min-height:56px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(59,130,246,.28)
}
button:hover{transform:translateY(-2px)}
.outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:#fff
}

@media(min-width:768px){
  .submit{flex-direction:row}
}

/* Leaflet logo markers (prevent giant logos) */
.logo-marker{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,16,32,.78);
  box-shadow:0 10px 26px rgba(0,0,0,.40), 0 0 0 2px rgba(59,130,246,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.logo-marker img{
  width:38px !important;
  height:38px !important;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}

/* Slider: give breathing room so label doesn't collide with hand */
#fieldset-availability label[for="confidence_pct"]{
  display:block;
  margin-bottom:14px;
}

/* Slider: separate label from the hand animation */
#fieldset-availability label[for="confidence_pct"]{
  margin-bottom:18px; /* more space */
}

/* Move the hand down so it doesn't overlap the label */
.hand-hint{
  top:-18px !important;   /* was ~ -35px */
}

/* Bigger map markers for better readability */
.logo-marker{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
}
.logo-marker img{
  width:56px !important;
  height:56px !important;
}

/* Level badge on tournament cards */
.badge-level{
  top:12px;
  left:60px; /* next to season icon */
  background:rgba(255,255,255,.06);
}
.badge-level.elite{ border-color: rgba(212,175,55,.35); }
.badge-level.aaa{ border-color: rgba(59,130,246,.40); }

/* Capacity ribbon (per-year: full / limited) */
.ecard{ position:relative; }

.ribbon{
  position:absolute;
  top:16px;
  right:-56px;
  width:210px;
  text-align:center;
  padding:8px 0;
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 25px rgba(0,0,0,.40);
  z-index:12;
}

.ribbon.full{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
}

.ribbon.limited{
  background:linear-gradient(135deg, rgba(212,175,55,.95), rgba(59,130,246,.35));
  color:#0b1020;
}

/* --- Override: capacity badge in bottom-left (no masking) --- */
.ribbon{
  top:auto !important;
  right:auto !important;
  left:12px !important;
  bottom:12px !important;
  width:auto !important;
  transform:none !important;
  padding:8px 12px !important;
  border-radius:12px !important;
  letter-spacing:.4px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  max-width:70% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:.92rem !important;
}
.ribbon.full{
  background:linear-gradient(135deg, rgba(239,68,68,.95), rgba(185,28,28,.85)) !important;
  color:#fff !important;
}
.ribbon.limited{
  background:linear-gradient(135deg, rgba(212,175,55,.95), rgba(59,130,246,.35)) !important;
  color:#0b1020 !important;
}

/* --- Override v2: diagonal ribbon bottom-left (short + subtle) --- */
.ribbon{
  left:-58px !important;
  bottom:18px !important;
  top:auto !important;
  right:auto !important;

  width:210px !important;
  padding:8px 0 !important;

  transform:rotate(35deg) !important;   /* diagonal, less aggressive than 45 */
  border-radius:12px !important;

  font-size:.88rem !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;

  max-width:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  backdrop-filter: blur(6px) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.40) !important;
}

.ribbon.full{
  background:linear-gradient(135deg, rgba(239,68,68,.92), rgba(185,28,28,.82)) !important;
  color:#fff !important;
}

.ribbon.limited{
  background:linear-gradient(135deg, rgba(212,175,55,.92), rgba(59,130,246,.28)) !important;
  color:#0b1020 !important;
}

/* --- Tweak: show full ribbon text (less clipped) --- */
.ribbon{
  left:-34px !important;     /* was -58px => less clipped */
  width:195px !important;    /* slightly narrower */
  padding:8px 0 !important;
  transform:rotate(33deg) !important; /* tiny adjustment */
}

/* Ribbon style for collaboration */
.ribbon.collab{
  background:rgba(255,255,255,.10);
  color:#eaf2ff;
  border-color:rgba(255,255,255,.18);
}

/* Move special icon (✈️ / 🏕️) under the season icon to avoid ribbon overlap */
.badge-extra{
  top:54px !important;     /* under season icon */
  left:12px !important;
  bottom:auto !important;
  right:auto !important;
  width:40px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:1.05rem !important;
}

/* Submit overlay (loading curtain) */
.submit-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.submit-overlay-card{
  width:min(520px, 92vw);
  background:linear-gradient(180deg, rgba(10,16,32,.98), rgba(14,21,42,.92));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:22px;
  text-align:center;
}

.submit-overlay-title{
  margin-top:12px;
  font-weight:950;
  font-size:1.15rem;
  color:#eaf2ff;
}

.submit-overlay-sub{
  margin-top:6px;
  color:rgba(231,236,243,.78);
  font-size:.98rem;
}

.spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  border-top-color: rgba(59,130,246,.95);
  margin:0 auto;
  animation: spin 0.9s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* Disable submit button visual state */
button:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none !important;
}

/* Form error summary */
.form-error-summary{
  margin-top:16px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  color:#fecaca;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.form-error-summary strong{ color:#fff; }
.form-error-summary ul{ margin:10px 0 0 18px; }
.form-error-summary li{ margin:6px 0; }

/* Invalid field highlighting */
.input-container.is-invalid input,
.input-container.is-invalid select,
.input-container.is-invalid textarea{
  border-color: rgba(239,68,68,.85) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important;
  background: rgba(239,68,68,.06) !important;
}

/* Invalid group (radio/checkbox) */
fieldset.is-invalid{
  border-color: rgba(239,68,68,.55) !important;
}

/* Subtle shake for first invalid field */
@keyframes qhc_shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-2px)}
  40%{transform:translateX(2px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}
.is-shake{ animation:qhc_shake .28s ease-in-out 2; }