/* ======================================================================
   MU Online /events — Polished UI (realm-colored, fast overview)
   Scope: .event-details (safe overrides)
   Goals:
   - Professional, readable typography (less “heavy/bold”)
   - Clear realm separation (neutral for All-realms, distinct per realm)
   - Distinct, compact filter controls (event type vs realm)
   - Avoid “everything is gold/red”
   - Fix previous CSS syntax issues + missing realm-all tokens
   ====================================================================== */

/* ----------------------------------------------------------------------
   Design tokens (aligned with account.css palette)
   ---------------------------------------------------------------------- */
.event-details{
  /* Base surfaces */
  --ev-bg:              var(--primary-bg, #f6f7f9);
  --ev-bg-weak:         var(--secondary-bg, #ebedef);
  --ev-surface:         #ffffff;

  /* Text */
  --ev-ink:             var(--text-main, #26292c);
  --ev-ink-soft:        var(--text-muted, #57595b);
  --ev-accent:          var(--accent, #383838);

  /* Borders / radius / shadow */
  --ev-border:          var(--border-light, #d3d4d6);
  --ev-shadow:          var(--box-shadow, 0 6px 24px rgba(50,50,50,.08), 0 1.5px 8px rgba(30,30,30,.07));
  --ev-radius:          var(--box-radius, 13px);
  --ev-radius-sm:       12px;
  --ev-pill:            999px;

  /* Brand accents */
  --ev-brand:           #a20707;
  --ev-brand-2:         #c02c2c;
  --ev-gold:            var(--gold, #f5c950);
  --ev-blue:            var(--accent-blue, #2483d6);
  --ev-success:         var(--success, #3b6b3d);
  --ev-danger:          var(--danger, #c23a2b);

  /* Typography weights (reduce “chaos”) */
  --ev-fw-regular:  500;
  --ev-fw-medium:   600;
  --ev-fw-semibold: 700;
  --ev-fw-bold:     800;

  /* Neutral (All realms / All servers) */
  --realm-all:        #232323;
  --realm-all-soft:   rgba(0,0,0,.06);
  --realm-all-strong: #111111;

  /* Realm accents (from account.css) */
  --realm-muonline-ai:        var(--ev-gold);
  --realm-muonline-ai-soft:   rgba(245,201,80,.14);
  --realm-muonline-ai-strong: #b28416;

  --realm-silvermu:           #9ea8c4;
  --realm-silvermu-soft:      rgba(158,168,196,.16);
  --realm-silvermu-strong:    #5c6784;

  --realm-voltmu:             #46c97a;
  --realm-voltmu-soft:        rgba(70,201,122,.16);
  --realm-voltmu-strong:      #22804a;

  --realm-furymu:             #f27a4b;
  --realm-furymu-soft:        rgba(242,122,75,.18);
  --realm-furymu-strong:      #b6431c;

  --realm-richmu:             #a472f2;
  --realm-richmu-soft:        rgba(164,114,242,.18);
  --realm-richmu-strong:      #6b3bc0;

  color: var(--ev-ink);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.event-details *,
.event-details *::before,
.event-details *::after{ box-sizing:border-box; }

/* Reset global container skin for /events; we use our own boxes */
.event-details.container{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ----------------------------------------------------------------------
   "White box" wrapper (subtle — not “all gold”)
   ---------------------------------------------------------------------- */
.event-details .white-box{
  background:
    radial-gradient(circle at top left, rgba(245,201,80,.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);

  border:1.5px solid var(--ev-border);
  border-radius:calc(var(--ev-radius) + 6px);
  box-shadow:var(--ev-shadow);
}

/* ----------------------------------------------------------------------
   Header + timezone
   ---------------------------------------------------------------------- */
.event-details .event-header-box{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:1.1rem;
  padding:1.2rem;
  margin-bottom:1.1rem;
}
@media (max-width: 980px){
  .event-details .event-header-box{ grid-template-columns:1fr; }
}

.event-details .event-header-main h1{
  margin:.2rem 0 .45rem;
  font-size:1.85rem;
  font-weight:var(--ev-fw-bold);
  color:#111;
  letter-spacing:.01em;
}
.event-details .event-header-main p{
  margin:0 0 .6rem;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.5;
}
.event-details .event-header-main ul{
  margin:.55rem 0 0;
  padding-left:1.1rem;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.5;
}
.event-details .event-header-main li{ margin:.25rem 0; }

.event-details .timezone-box{
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:calc(var(--ev-radius) + 4px);
  box-shadow:0 2px 10px rgba(30,30,30,.06);
  padding:1rem;
}

.event-details .tz-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
@media (max-width: 720px){
  .event-details .tz-header-row{ flex-direction:column; }
}

.event-details .timezone-box h2{
  margin:0;
  font-size:1.05rem;
  font-weight:var(--ev-fw-semibold);
  color:var(--ev-accent);
}
.event-details .timezone-desc{
  margin:.35rem 0 0;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.45;
}

.event-details .tz-summary-top{
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(90deg, rgba(245,201,80,.12) 0%, rgba(255,255,255,.92) 85%);
  padding:.55rem .75rem;
  min-width:260px;
}
@media (max-width: 720px){
  .event-details .tz-summary-top{ min-width:unset; width:100%; }
}

.event-details .tz-summary-label{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(0,0,0,.55);
  font-weight:var(--ev-fw-semibold);
}
.event-details .tz-summary-value{
  margin-top:.22rem;
  font-weight:var(--ev-fw-semibold);
  color:#111;
  line-height:1.25;
}

.event-details .tz-controls{
  margin-top:.85rem;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:.75rem;
}
@media (max-width: 720px){
  .event-details .tz-controls{ grid-template-columns:1fr; }
}

.event-details .tz-select-group{ display:flex; flex-direction:column; gap:.35rem; }
.event-details .tz-select-group-wide{ grid-column:1 / -1; }

.event-details .tz-select-group label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:var(--ev-fw-semibold);
  color:rgba(0,0,0,.62);
}

.event-details .tz-controls select{
  appearance:none;
  width:100%;
  height:44px;
  padding:.55rem .75rem;

  border-radius:12px;
  border:1.4px solid var(--ev-border);
  background:#fff;
  color:#111;

  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.event-details .tz-controls select:focus{
  outline:0;
  border-color:var(--ev-brand);
  box-shadow:0 0 0 3px rgba(162,7,7,.10), inset 0 1px 2px rgba(0,0,0,.04);
}

.event-details .tz-hint{
  margin:.65rem 0 0;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  font-size:.92rem;
}

/* ----------------------------------------------------------------------
   Upcoming events overview + filters
   ---------------------------------------------------------------------- */
.event-details .event-overview{
  padding:1.1rem;
  margin-bottom:1.1rem;
}
.event-details .event-overview h2{
  margin:.1rem 0 .35rem;
  font-size:1.45rem;
  font-weight:var(--ev-fw-bold);
  color:#111;
}
.event-details .event-overview-intro{
  margin:0 0 .75rem;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.5;
}

/* Hide empty bar (fixes the blank grey strip) */
.event-details .active-events-bar{
  display:none;
  margin:.6rem 0 .7rem;
  padding:.6rem .8rem;

  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);

  background:linear-gradient(90deg, rgba(36,131,214,.10) 0%, rgba(255,255,255,.95) 70%);
  color:#1f2937;
  font-weight:var(--ev-fw-medium);
}
.event-details .active-events-bar strong{ font-weight:var(--ev-fw-semibold); }
.event-details .active-events-bar.has-active{ display:block; }

/* Filter container */
.event-details .event-filters{
  border:1px solid rgba(0,0,0,.08);
  border-radius:calc(var(--ev-radius) + 6px);
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(30,30,30,.06);

  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;

  margin:.6rem 0 1rem;
}

/* Each filter row gets its own subtle panel so "Type" and "Realm" are clearly separated */
.event-details .event-filter-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .5rem;

  padding:.55rem .6rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);

  background:linear-gradient(90deg, rgba(0,0,0,.02) 0%, rgba(255,255,255,0) 72%);
}

/* If you added these helper classes in events.php, they enhance distinction. */
.event-details .event-filter-group--type{
  background:linear-gradient(90deg, rgba(0,0,0,.02) 0%, rgba(255,255,255,0) 72%);
}
.event-details .event-filter-group--realm{
  background:linear-gradient(90deg, rgba(36,131,214,.06) 0%, rgba(255,255,255,0) 72%);
}

.event-details .event-filter-group-label{
  min-width:84px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;

  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:var(--ev-fw-semibold);
  color:rgba(0,0,0,.65);
}

/* Shared chip button base */
.event-details .event-filter-btn{
  --chip-bg: #ffffff;
  --chip-border: rgba(0,0,0,.14);
  --chip-text: #111;
  --chip-dot: rgba(0,0,0,.38);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  padding:.42rem .78rem;
  min-height:34px;

  border-radius:var(--ev-pill);
  border:1.6px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-text);

  font-weight:var(--ev-fw-medium);
  font-size:.95rem;
  line-height:1.05;
  text-decoration:none;

  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:transform .12s, box-shadow .12s, border-color .12s, background .12s, color .12s;
}

.event-details .event-filter-btn::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--chip-dot);
  box-shadow:0 0 0 2px rgba(255,255,255,.92);
}

.event-details .event-filter-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.24);
}

.event-details .event-filter-btn:focus-visible{
  outline:3px solid rgba(245,201,80,.22);
  outline-offset:2px;
}

/* --------------------------
   Event type buttons = compact "tabs" (no dot)
   -------------------------- */
.event-details .event-filter-btn[data-type-filter]{
  border-radius:12px;
  padding:.40rem .72rem;
}

.event-details .event-filter-btn[data-type-filter]::before{ display:none; }

.event-details .event-filter-btn[data-type-filter].is-active{
  --chip-bg: linear-gradient(90deg,#232323 0%,#404040 100%);
  --chip-border: transparent;
  --chip-text: #fff;

  font-weight:var(--ev-fw-semibold);
  box-shadow:0 10px 18px rgba(0,0,0,.14), inset 0 -3px 0 rgba(245,201,80,.85);
}

/* --------------------------
   Realm buttons = chips with colored dot, active = tinted (NOT dark)
   -------------------------- */
.event-details .event-filter-btn[data-realm-filter]{
  /* dot uses realm accent (JS also sets these per realm) */
  --chip-dot: var(--realm-accent, rgba(0,0,0,.38));
}

/* CSS fallback realm theme (if JS hasn't applied styles yet) */
.event-details .event-filter-btn[data-realm-filter="muonline-ai" i]{ --realm-accent: var(--realm-muonline-ai); --realm-soft: var(--realm-muonline-ai-soft); --realm-strong: var(--realm-muonline-ai-strong); }
.event-details .event-filter-btn[data-realm-filter="silvermu" i]{   --realm-accent: var(--realm-silvermu);    --realm-soft: var(--realm-silvermu-soft);    --realm-strong: var(--realm-silvermu-strong); }
.event-details .event-filter-btn[data-realm-filter="voltmu" i]{     --realm-accent: var(--realm-voltmu);      --realm-soft: var(--realm-voltmu-soft);      --realm-strong: var(--realm-voltmu-strong); }
.event-details .event-filter-btn[data-realm-filter="furymu" i]{     --realm-accent: var(--realm-furymu);      --realm-soft: var(--realm-furymu-soft);      --realm-strong: var(--realm-furymu-strong); }
.event-details .event-filter-btn[data-realm-filter="richmu" i]{     --realm-accent: var(--realm-richmu);      --realm-soft: var(--realm-richmu-soft);      --realm-strong: var(--realm-richmu-strong); }
.event-details .event-filter-btn[data-realm-filter="all" i]{        --realm-accent: var(--realm-all);         --realm-soft: var(--realm-all-soft);         --realm-strong: var(--realm-all-strong); }

/* Active realm: tinted background + accent border (more distinct vs type tabs) */
.event-details .event-filter-btn[data-realm-filter].is-active:not([data-realm-filter="all"]){
  --chip-border: var(--realm-accent, rgba(0,0,0,.22));
  --chip-text: #111;

  background:linear-gradient(90deg, var(--realm-soft, rgba(0,0,0,.05)) 0%, #fff 70%);
  box-shadow:0 0 0 2px rgba(0,0,0,.03), 0 6px 14px rgba(0,0,0,.10);
}

/* "All servers" active (realm) = neutral, not dark */
.event-details .event-filter-btn[data-realm-filter="all"].is-active{
  --chip-bg: rgba(0,0,0,.06);
  --chip-border: rgba(0,0,0,.22);
  --chip-text: #111;
  --chip-dot: #111;

  font-weight:var(--ev-fw-semibold);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}

/* ----------------------------------------------------------------------
   Event cards grid
   ---------------------------------------------------------------------- */
.event-details .event-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  align-items:stretch;
}
@media (max-width: 520px){
  .event-details .event-grid{ grid-template-columns:1fr; }
}

/* Base card + realm stripe */
.event-details .event-card{
  --realm-accent: var(--realm-all);
  --realm-soft:   var(--realm-all-soft);
  --realm-strong: var(--realm-all-strong);

  position:relative;
  overflow:hidden;

  border-radius:calc(var(--ev-radius) + 2px);
  border:1.5px solid var(--ev-border);

  background:
    radial-gradient(circle at top left, var(--realm-soft) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(0,0,0,.02) 140%);

  box-shadow:var(--ev-shadow);
}

.event-details .event-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:calc(var(--ev-radius) + 2px) 0 0 calc(var(--ev-radius) + 2px);
  background:linear-gradient(180deg, var(--realm-accent) 0%, var(--realm-strong) 140%);
  opacity:.95;
}

/* Realm color mapping (cards) */
.event-details .event-card[data-realm="muonline-ai" i]{ --realm-accent: var(--realm-muonline-ai); --realm-soft: var(--realm-muonline-ai-soft); --realm-strong: var(--realm-muonline-ai-strong); }
.event-details .event-card[data-realm="silvermu" i]{   --realm-accent: var(--realm-silvermu);    --realm-soft: var(--realm-silvermu-soft);    --realm-strong: var(--realm-silvermu-strong); }
.event-details .event-card[data-realm="voltmu" i]{     --realm-accent: var(--realm-voltmu);      --realm-soft: var(--realm-voltmu-soft);      --realm-strong: var(--realm-voltmu-strong); }
.event-details .event-card[data-realm="furymu" i]{     --realm-accent: var(--realm-furymu);      --realm-soft: var(--realm-furymu-soft);      --realm-strong: var(--realm-furymu-strong); }
.event-details .event-card[data-realm="richmu" i]{     --realm-accent: var(--realm-richmu);      --realm-soft: var(--realm-richmu-soft);      --realm-strong: var(--realm-richmu-strong); }

/* Card header */
.event-details .event-card-header{
  padding:1rem 1rem .85rem;
  padding-left:1.1rem; /* slight offset because of stripe */
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.event-details .event-title{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
}

.event-details .event-title > span:first-child{
  font-size:1.12rem;
  font-weight:var(--ev-fw-semibold);
  color:#111;
  line-height:1.2;
  letter-spacing:.01em;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.event-details .event-scope-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  width:max-content;
  max-width:100%;
  padding:.3rem .62rem;
  border-radius:999px;

  background:linear-gradient(90deg, var(--realm-soft) 0%, rgba(255,255,255,.92) 90%);
  border:1px solid rgba(0,0,0,.08);

  color:var(--realm-strong);
  font-weight:var(--ev-fw-medium);
  font-size:.88rem;

  white-space:nowrap;
}

.event-details .event-scope-pill .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--realm-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}

/* Countdown */
.event-details .event-countdown{
  text-align:right;
  flex:0 0 auto;
}
.event-details .event-countdown-label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:var(--ev-fw-medium);
  color:rgba(0,0,0,.55);
  margin-bottom:.22rem;
}
.event-details .event-countdown-output{
  font-size:1.06rem;
  font-weight:var(--ev-fw-semibold);
  color:#111;
  font-variant-numeric:tabular-nums;
}

/* Card body */
.event-details .event-body{ padding:.9rem 1rem 1rem; padding-left:1.1rem; }

.event-details .event-meta{
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.event-details .event-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;

  padding:.55rem .7rem;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);

  background:linear-gradient(90deg, rgba(0,0,0,.015) 0%, rgba(255,255,255,.92) 70%);
}

.event-details .event-meta-row b{
  font-size:.80rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(0,0,0,.60);
  font-weight:var(--ev-fw-medium);
}

.event-details .event-meta-row span{
  font-weight:var(--ev-fw-semibold);
  color:#111;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Subtle semantic tint */
.event-details .event-meta-row--reg{
  background:linear-gradient(90deg, rgba(36,131,214,.10) 0%, rgba(255,255,255,.92) 75%);
  border-color:rgba(36,131,214,.20);
}
.event-details .event-meta-row--start{
  background:linear-gradient(90deg, rgba(245,201,80,.14) 0%, rgba(255,255,255,.92) 75%);
  border-color:rgba(245,201,80,.28);
}
.event-details .event-meta-row--end{
  background:linear-gradient(90deg, rgba(0,0,0,.02) 0%, rgba(255,255,255,.92) 75%);
}

/* Full schedule details */
.event-details .event-schedule-details{ margin-top:.8rem; }
.event-details .event-schedule-details summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:.55rem;

  padding:.44rem .72rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#1f2937;
  font-weight:var(--ev-fw-semibold);

  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.event-details .event-schedule-details summary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.18);
}

.event-details .event-meta--schedule{ margin-top:.7rem; }
.event-details .event-meta--schedule li{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.5rem .6rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.event-details .event-meta--schedule li:last-child{ border-bottom:none; }

.event-details .event-meta--schedule b{
  font-size:.86rem;
  font-weight:var(--ev-fw-medium);
  color:#1f2937;
}

.event-details .event-meta--schedule .event-sched-local{
  font-weight:var(--ev-fw-semibold);
  color:#111;
  margin-left:auto;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.event-details .event-meta--schedule .event-sched-countdown{
  margin-left:.7rem;
  font-weight:var(--ev-fw-medium);
  color:var(--ev-ink-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.event-details .event-meta-note{
  margin-top:.35rem;
  padding-top:.55rem;
  border-top:1px dashed rgba(0,0,0,.18);
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.5;
}

.event-details .event-guide-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.4rem;
  text-decoration:none;
  color:var(--ev-blue);
  font-weight:var(--ev-fw-semibold);
}
.event-details .event-guide-link:hover{ color:var(--ev-brand); text-decoration:underline; }

/* ----------------------------------------------------------------------
   Card states: registration open / live / finished
   ---------------------------------------------------------------------- */
.event-details .event-card.event-registration-open{
  border-color:rgba(36,131,214,.32);
  box-shadow:0 0 0 3px rgba(36,131,214,.12), var(--ev-shadow);
}
.event-details .event-card.event-registration-open .event-countdown-output{ color:var(--ev-blue); }

.event-details .event-card.event-live{
  border-color:rgba(59,107,61,.30);
  box-shadow:0 0 0 3px rgba(59,107,61,.12), var(--ev-shadow);
}
.event-details .event-card.event-live .event-countdown-output{ color:var(--ev-success); }

.event-details .event-card.event-finished{
  opacity:.80;
  filter:saturate(.92);
}
.event-details .event-card.event-finished .event-countdown-output{ color:rgba(0,0,0,.55); }

/* ----------------------------------------------------------------------
   Registration overview table
   ---------------------------------------------------------------------- */
.event-details .event-registration-table-wrapper{
  overflow:auto;
  border-radius:calc(var(--ev-radius) + 4px);
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.event-details .event-registration-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}

.event-details .event-registration-table thead th{
  position:sticky;
  top:0;
  z-index:2;

  background:linear-gradient(90deg,#232323 0%,#393939 100%);
  color:#fff;
  text-align:left;
  padding:.72rem .85rem;
  font-weight:var(--ev-fw-semibold);
  letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}

.event-details .event-registration-table tbody th,
.event-details .event-registration-table tbody td{
  padding:.70rem .85rem;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#f7f7f7;
}

.event-details .event-registration-table tbody tr:nth-child(even) th,
.event-details .event-registration-table tbody tr:nth-child(even) td{ background:#ededed; }

.event-details .event-registration-table tbody tr:last-child th,
.event-details .event-registration-table tbody tr:last-child td{ border-bottom:none; }

.event-details .event-registration-table tbody th{
  font-weight:var(--ev-fw-semibold);
  color:#111;
}

/* Per-realm color tokens for table columns (data-realm on th/td) */
.event-details .event-registration-table [data-realm="muonline-ai" i]{ --col-accent: var(--realm-muonline-ai); --col-soft: var(--realm-muonline-ai-soft); }
.event-details .event-registration-table [data-realm="silvermu" i]{   --col-accent: var(--realm-silvermu);    --col-soft: var(--realm-silvermu-soft); }
.event-details .event-registration-table [data-realm="voltmu" i]{     --col-accent: var(--realm-voltmu);      --col-soft: var(--realm-voltmu-soft); }
.event-details .event-registration-table [data-realm="furymu" i]{     --col-accent: var(--realm-furymu);      --col-soft: var(--realm-furymu-soft); }
.event-details .event-registration-table [data-realm="richmu" i]{     --col-accent: var(--realm-richmu);      --col-soft: var(--realm-richmu-soft); }

.event-details .reg-cell{
  text-align:center;
  font-weight:var(--ev-fw-semibold);
  font-variant-numeric:tabular-nums;
}
.event-details .reg-cell .reg-countdown{ white-space:nowrap; }

.event-details .reg-cell--open{
  background:linear-gradient(90deg, rgba(245,201,80,.18) 0%, rgba(255,255,255,.92) 75%) !important;
  color:#513c10;
}

.event-details .reg-cell--none{ color:rgba(0,0,0,.50); }

.event-details .event-small-note{
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.45;
}

/* Optional: highlight selected realm column (JS toggles .is-selected-realm) */
.event-details .event-registration-table thead th.is-selected-realm{
  box-shadow: inset 0 -4px 0 var(--col-accent, var(--ev-blue));
}
.event-details .event-registration-table td.is-selected-realm{
  background:linear-gradient(90deg, var(--col-soft, rgba(36,131,214,.10)) 0%, rgba(255,255,255,.92) 75%) !important;
  border-bottom-color: rgba(0,0,0,.06);
}

/* ----------------------------------------------------------------------
   Next event banner
   ---------------------------------------------------------------------- */
.event-details .next-event-banner{
  margin-top:1rem;
  border-radius:calc(var(--ev-radius) + 6px);
  border:1.5px solid rgba(0,0,0,.10);
  background:
    radial-gradient(circle at top left, rgba(245,201,80,.10) 0%, transparent 60%),
    linear-gradient(90deg,#ffffff 0%, #ffffff 45%, rgba(0,0,0,.03) 100%);

  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:.95rem 1rem;
}

.event-details .next-event-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:var(--ev-fw-semibold);
  color:rgba(0,0,0,.60);
}

.event-details .next-event-main{
  margin-top:.45rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
@media (max-width: 720px){
  .event-details .next-event-main{ flex-direction:column; align-items:flex-start; }
}

.event-details .next-event-name{
  font-weight:var(--ev-fw-bold);
  font-size:1.12rem;
  color:#111;
}

.event-details .next-event-realm-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-left:.6rem;

  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:var(--ev-fw-medium);
  color:#1f2937;
}

.event-details .next-event-main-right{
  text-align:right;
}
@media (max-width: 720px){
  .event-details .next-event-main-right{ text-align:left; }
}

.event-details .next-event-text{
  display:block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:var(--ev-fw-semibold);
  color:rgba(0,0,0,.60);
}

.event-details .next-event-countdown{
  font-size:1.22rem;
  font-weight:var(--ev-fw-bold);
  color:#111;
  font-variant-numeric:tabular-nums;
}

.event-details .next-event-sub{
  margin-top:.5rem;
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
}

.event-details .next-event-banner.next-live{
  border-color:rgba(59,107,61,.30);
  box-shadow:0 0 0 3px rgba(59,107,61,.12), 0 10px 26px rgba(0,0,0,.10);
}
.event-details .next-event-banner.next-live .next-event-countdown{ color:var(--ev-success); }

.event-details .next-event-banner.next-finished{
  opacity:.84;
}

/* ----------------------------------------------------------------------
   SEO + FAQ boxes
   ---------------------------------------------------------------------- */
.event-details .event-seo-content,
.event-details .guild-faq-box{
  padding:1.1rem;
  margin-top:1.1rem;
}

.event-details .event-seo-content h2,
.event-details .guild-faq-box h2{
  margin:0 0 .6rem;
  font-size:1.18rem;
  font-weight:var(--ev-fw-bold);
  color:var(--ev-accent);
}

.event-details .event-seo-content h3{
  margin:.9rem 0 .45rem;
  font-size:1.05rem;
  font-weight:var(--ev-fw-semibold);
  color:#111;
}

.event-details .event-seo-content p,
.event-details .event-seo-content li,
.event-details .guild-faq-box dd{
  color:var(--ev-ink-soft);
  font-weight:var(--ev-fw-regular);
  line-height:1.55;
}

.event-details .event-seo-content ul{ margin:.45rem 0 .85rem; padding-left:1.1rem; }

.event-details .faq-list dt{
  font-weight:var(--ev-fw-semibold);
  color:#111;
  margin-top:.7rem;
}
.event-details .faq-list dd{ margin:.25rem 0 0; }

/* ----------------------------------------------------------------------
   Small responsiveness tweaks
   ---------------------------------------------------------------------- */
@media (max-width: 560px){
  .event-details .event-overview{ padding:1rem; }
  .event-details .event-filter-group-label{ min-width:100%; justify-content:flex-start; }
  .event-details .event-filter-btn{ width:max-content; }
}

/* ----------------------------------------------------------------------
   Reduced motion respect
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .event-details .event-filter-btn,
  .event-details .event-schedule-details summary{
    transition:none !important;
  }
}