/* ======================================================================
   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, #070a12);
  --ev-bg-weak:         var(--secondary-bg, #0b1220);
  --ev-surface:         var(--surface-0);

  /* Text */
  --ev-ink:             var(--text-main, #d5ddef);
  --ev-ink-soft:        var(--text-muted, #8a94ad);
  --ev-accent:          var(--accent, #eaf0ff);

  /* Borders / radius / shadow */
  --ev-border:          var(--border-light, rgba(146,166,214,.16));
  --ev-shadow:          var(--box-shadow, 0 6px 24px rgba(0,0,0,.35), 0 1.5px 8px rgba(0,0,0,.30));
  --ev-radius:          var(--box-radius, 13px);
  --ev-radius-sm:       12px;
  --ev-pill:            999px;

  /* Brand accents */
  --ev-brand:           var(--brand-1, #d61f2b);
  --ev-brand-2:         var(--brand-2, #ff4a57);
  --ev-gold:            var(--gold, #f5c24b);
  --ev-blue:            var(--rift, #3a6bff);
  --ev-success:         var(--success, #39d98a);
  --ev-danger:          var(--danger, #ff5b4d);

  /* 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:        #aab4cc;
  --realm-all-soft:   rgba(146,166,214,.14);
  --realm-all-strong: #d5ddef;

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

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

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

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

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

  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; }

/* Match the standard white card used on every other page (no gold tint). */
.event-details .white-box{
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}

/* ----------------------------------------------------------------------
   Header + timezone
   ---------------------------------------------------------------------- */

.event-details .event-header-main h1{
  margin:.2rem 0 .45rem;
  font-size:clamp(1.8rem, 2.2vw + 1.1rem, 2.5rem);
  font-weight:var(--ev-fw-bold);
  color:var(--accent);
  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:var(--surface-0);
  border:1.5px solid var(--border);
  border-radius:calc(var(--ev-radius) + 4px);
  box-shadow:0 2px 10px rgba(0,0,0,.30);
  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 var(--border);
  background:var(--surface-1);
  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:var(--text-muted);
  font-weight:var(--ev-fw-semibold);
}
.event-details .tz-summary-value{
  margin-top:.22rem;
  font-weight:var(--ev-fw-semibold);
  color:var(--text-strong);
  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:var(--text-muted);
}

.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:var(--surface-2);
  color:var(--text);

  box-shadow:inset 0 1px 2px rgba(0,0,0,.20);
}
.event-details .tz-controls select:focus{
  outline:0;
  border-color:var(--ev-brand);
  box-shadow:0 0 0 3px rgba(214,31,43,.20), inset 0 1px 2px rgba(0,0,0,.20);
}

.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:var(--text-strong);
}
.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 var(--border);

  background:linear-gradient(90deg, rgba(58,107,255,.14) 0%, var(--surface-0) 70%);
  color:var(--text);
  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 var(--border);
  border-radius:calc(var(--ev-radius) + 6px);
  background:var(--surface-0);
  box-shadow:0 2px 10px rgba(0,0,0,.30);

  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 var(--border);

  background:linear-gradient(90deg, rgba(146,166,214,.06) 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(146,166,214,.06) 0%, rgba(255,255,255,0) 72%);
}
.event-details .event-filter-group--realm{
  background:linear-gradient(90deg, rgba(58,107,255,.10) 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 var(--border);
  background:var(--surface-2);

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

/* Shared chip button base */
.event-details .event-filter-btn{
  --chip-bg: var(--surface-2);
  --chip-border: rgba(146,166,214,.26);
  --chip-text: var(--text);
  --chip-dot: rgba(146,166,214,.5);

  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,.30);
  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(0,0,0,.45);
}

.event-details .event-filter-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.40);
  border-color:rgba(146,166,214,.34);
}

.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,var(--brand-1) 0%,var(--brand-2) 100%);
  --chip-border: transparent;
  --chip-text: #fff;

  font-weight:var(--ev-fw-semibold);
  box-shadow:0 10px 18px rgba(0,0,0,.35), 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(146,166,214,.5));
}

/* CSS fallback realm theme (if JS hasn't applied styles yet) */
.event-details .event-filter-btn[data-realm-filter="riftmu" i]{ --realm-accent: var(--realm-riftmu); --realm-soft: var(--realm-riftmu-soft); --realm-strong: var(--realm-riftmu-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(146,166,214,.26));
  --chip-text: var(--text-strong);

  background:linear-gradient(90deg, var(--realm-soft, rgba(146,166,214,.10)) 0%, var(--surface-0) 70%);
  box-shadow:0 0 0 2px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.35);
}

/* "All servers" active (realm) = neutral, not dark */
.event-details .event-filter-btn[data-realm-filter="all"].is-active{
  --chip-bg: var(--surface-2);
  --chip-border: rgba(146,166,214,.26);
  --chip-text: var(--text-strong);
  --chip-dot: var(--text-muted);

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

/* ----------------------------------------------------------------------
   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, var(--surface-0) 0%, var(--surface-0) 55%, rgba(0,0,0,.25) 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="riftmu" i]{ --realm-accent: var(--realm-riftmu); --realm-soft: var(--realm-riftmu-soft); --realm-strong: var(--realm-riftmu-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 var(--border);
  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:var(--text-strong);
  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%, var(--surface-0) 90%);
  border:1px solid var(--border);

  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(0,0,0,.45);
}

/* 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:var(--text-muted);
  margin-bottom:.22rem;
}
.event-details .event-countdown-output{
  font-size:1.06rem;
  font-weight:var(--ev-fw-semibold);
  color:var(--text-strong);
  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 var(--border);

  background:linear-gradient(90deg, rgba(146,166,214,.05) 0%, var(--surface-1) 70%);
}

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

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

/* Subtle semantic tint */
.event-details .event-meta-row--reg{
  background:linear-gradient(90deg, rgba(58,107,255,.14) 0%, var(--surface-1) 75%);
  border-color:rgba(58,107,255,.24);
}
.event-details .event-meta-row--start{
  background:linear-gradient(90deg, rgba(245,201,80,.14) 0%, var(--surface-1) 75%);
  border-color:rgba(245,201,80,.28);
}
.event-details .event-meta-row--end{
  background:linear-gradient(90deg, rgba(146,166,214,.05) 0%, var(--surface-1) 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 var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-weight:var(--ev-fw-semibold);

  box-shadow:0 2px 10px rgba(0,0,0,.30);
  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,.40);
  border-color:rgba(146,166,214,.26);
}

.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 var(--border);
}
.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:var(--text);
}

.event-details .event-meta--schedule .event-sched-local{
  font-weight:var(--ev-fw-semibold);
  color:var(--text-strong);
  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(146,166,214,.26);
  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(58,107,255,.40);
  box-shadow:0 0 0 3px rgba(58,107,255,.16), 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(57,217,138,.34);
  box-shadow:0 0 0 3px rgba(57,217,138,.14), 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:var(--text-muted); }

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

.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,var(--surface-2) 0%,var(--surface-0) 100%);
  color:var(--text-strong);
  text-align:left;
  padding:.72rem .85rem;
  font-weight:var(--ev-fw-semibold);
  letter-spacing:.01em;
  border-bottom:1px solid rgba(146,166,214,.26);
  white-space:nowrap;
}

.event-details .event-registration-table tbody th,
.event-details .event-registration-table tbody td{
  padding:.70rem .85rem;
  border-bottom:1px solid var(--border);
  background:var(--surface-1);
}

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

.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:var(--text-strong);
}

/* Per-realm color tokens for table columns (data-realm on th/td) */
.event-details .event-registration-table [data-realm="riftmu" i]{ --col-accent: var(--realm-riftmu); --col-soft: var(--realm-riftmu-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%, var(--surface-1) 75%) !important;
  color:var(--gold);
}

.event-details .reg-cell--none{ color:var(--text-muted); }

.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(58,107,255,.14)) 0%, var(--surface-1) 75%) !important;
  border-bottom-color: var(--border);
}

/* ----------------------------------------------------------------------
   Next event banner
   ---------------------------------------------------------------------- */
.event-details .next-event-banner{
  margin-top:1rem;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background:var(--surface-0);
  box-shadow:var(--shadow-md);
  padding:.95rem 1rem;
}

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

.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:var(--text-strong);
}

.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 var(--border);
  background:var(--surface-2);
  font-weight:var(--ev-fw-medium);
  color:var(--text);
}

.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:var(--text-muted);
}

.event-details .next-event-countdown{
  font-size:1.22rem;
  font-weight:var(--ev-fw-bold);
  color:var(--text-strong);
  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(57,217,138,.34);
  box-shadow:0 0 0 3px rgba(57,217,138,.14), 0 10px 26px rgba(0,0,0,.35);
}
.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:var(--text-strong);
}

.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:var(--text-strong);
  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;
  }
}

/* ===== Events layout polish v20: horizontal card headers ===== */
.event-details .event-card-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem 1rem;
  padding:.9rem 1rem .8rem 1.15rem;
}
.event-details .event-title{
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem .65rem;
}
.event-details .event-title > span:first-child{
  min-width:0;
  max-width:100%;
}
.event-details .event-countdown{
  min-width:112px;
  text-align:right;
  padding:.35rem .55rem;
  border-radius:12px;
  background:var(--surface-1);
  border:1px solid var(--border);
}
@media (max-width:560px){
  .event-details .event-card-header{grid-template-columns:1fr;}
  .event-details .event-countdown{text-align:left;min-width:0;width:100%;}
}