/* Page backdrop */
html, body { min-height: 100%; }  /* was height:100% */
body{
  margin:0; color:#f3f4f6;
  font:500 16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  background:
    radial-gradient(1200px 700px at 10% -10%, #2b2f39 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 20%, #1e2531 0%, transparent 60%),
    linear-gradient(180deg, #0b0c10, #0f1116);
  background-attachment: fixed;   /* ensure it fills long pages */
}


/* Theme tokens */
:root{
  --gw-glass: rgba(255,255,255,0.06);
  --gw-glass-strong: rgba(255,255,255,0.10);
  --gw-text:#f3f4f6; --gw-muted:#c6cad4; --gw-subtle:#9aa0ab;
  --gw-card-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --gw-pill-shadow: 0 8px 20px rgba(0,0,0,.35);

  /* Vivid base set */
  --gw-red:#ff1744;    --gw-blue:#2979ff;   --gw-green:#00e676;
  --gw-purple:#d500f9; --gw-orange:#ff9100; --gw-gold:#ffd600;
  --gw-yellow:#fee505; --gw-black:#000000;
  --gw-bkb:#726760;    --gw-esc2:#7c12a6;    --gw-esc5:#930108;

  /* Extra options */
  --gw-cyan:#00e5ff; --gw-pink:#ff4081; --gw-lime:#c6ff00;
  --gw-turquoise:#1de9b6; --gw-indigo:#651fff;

  /* Christmas palette */
  --gw-holly:#00c853; --gw-pine:#1b5e20; --gw-evergreen:#0f7a2f;
  --gw-cranberry:#e53935; --gw-snow:#ffffff; --gw-silver:#c0c7d1;
  --gw-candycane:#ff1744; --gw-mistletoe:#2ecc71; --gw-ornament:#00bcd4;
  --gw-xmasgold:#ffb300; --gw-gingerbread:#a0522d; --gw-nutcracker:#9c27b0;
  --gw-festivepink:#ec407a; --gw-frost:#80deea;

  --gw-month-min:360px; --gw-month-max:360px; --gw-gap:18px; --gw-cell-radius:14px;
  --gw-card-pad: clamp(10px, 1.6vw, 14px);
  --gw-day-gap: clamp(4px, 0.9vw, 8px);

  /* Header colors for iOS/overscroll */
  --gw-header-tint: rgba(11,13,18,.55);
  --gw-header-solid: #0d1117;
}

/* Layout */
.gwcal-wrap{
  max-width:1200px;
  margin:0 auto 64px;         /* was 32px auto 64px (top gap removed) */
  padding:0 18px;
  color:var(--gw-text)
}
.gwcal-title{margin:0 0 6px; text-align:center; font-weight:800; letter-spacing:.2px; font-size:clamp(22px,4vw,36px)}
.gwcal-sub{margin:0 0 12px; text-align:center; color:var(--gw-subtle)}

/* Legend */
.gwcal-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; margin:0 0 22px;
}
.gwcal-chip{
  display:flex; align-items:center; gap:6px;
  color:var(--gw-muted); background:var(--gw-glass);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 8px; border-radius:8px; backdrop-filter:blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size:13px; font-weight:600;
}
.gwcal-swatch{display:inline-block; flex:0 0 14px; width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* legend colors */
.gwcal-swatch.red{background:var(--gw-red)} .gwcal-swatch.blue{background:var(--gw-blue)}
.gwcal-swatch.green{background:var(--gw-green)} .gwcal-swatch.purple{background:var(--gw-purple)}
.gwcal-swatch.orange{background:var(--gw-orange)} .gwcal-swatch.gold{background:var(--gw-gold)}
.gwcal-swatch.yellow{background:var(--gw-yellow)} .gwcal-swatch.black{background:var(--gw-black)}
.gwcal-swatch.cyan{background:var(--gw-cyan)} .gwcal-swatch.pink{background:var(--gw-pink)}
.gwcal-swatch.lime{background:var(--gw-lime)} .gwcal-swatch.turquoise{background:var(--gw-turquoise)}
.gwcal-swatch.indigo{background:var(--gw-indigo)}
.gwcal-swatch.holly{background:var(--gw-holly)} .gwcal-swatch.pine{background:var(--gw-pine)}
.gwcal-swatch.evergreen{background:var(--gw-evergreen)} .gwcal-swatch.cranberry{background:var(--gw-cranberry)}
.gwcal-swatch.snow{background:var(--gw-snow)} .gwcal-swatch.silver{background:var(--gw-silver)}
.gwcal-swatch.candycane{background:var(--gw-candycane)} .gwcal-swatch.mistletoe{background:var(--gw-mistletoe)}
.gwcal-swatch.ornament{background:var(--gw-ornament)} .gwcal-swatch.xmasgold{background:var(--gw-xmasgold)}
.gwcal-swatch.gingerbread{background:var(--gw-gingerbread)} .gwcal-swatch.nutcracker{background:var(--gw-nutcracker)}
.gwcal-swatch.festivepink{background:var(--gw-festivepink)} .gwcal-swatch.frost{background:var(--gw-frost)}
.gwcal-swatch.bkb{background:var(--gw-bkb)}  .gwcal-swatch.esc2{background:var(--gw-esc2)}
.gwcal-swatch.esc5{background:var(--gw-esc5)}

/* Phones: single-row legend (always start at left) */
@media (max-width:560px){
  .gwcal-legend{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;           /* <-- start at the first pill */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overflow-anchor:none;                 /* stop scroll anchoring from shifting */
    padding:0 12px 6px;
    gap:10px;
    scroll-snap-type:x proximity;
  }
  .gwcal-legend::-webkit-scrollbar{display:none}
  .gwcal-chip{
    flex:0 0 auto; min-height:32px; padding:6px 10px;
    scroll-snap-align:start;
  }
  /* allow temporary snap disable if JS ever adds .no-snap */
  .gwcal-legend.no-snap{ scroll-snap-type:none !important; }
}
/* Legend helper text */
.gwcal-legend-hint-text{
  display:none; font-size:12px; line-height:1.2; font-weight:600;
  color:rgba(255,255,255,.7); margin:0 0 8px; text-align:center;
}
@media (max-width:560px){ .gwcal-legend-hint-text{display:block;} }

/* Month grid */
.gwcal{display:grid; gap:var(--gw-gap); grid-template-columns:repeat(auto-fit, minmax(var(--gw-month-min),1fr))}
.gwcal-month{
  background: var(--gw-glass); border:1px solid var(--gw-glass-strong);
  border-radius:18px; padding: var(--gw-card-pad); backdrop-filter: blur(12px);
  width: clamp(var(--gw-month-min), 30vw, var(--gw-month-max));
  margin-inline:auto; box-shadow: var(--gw-card-shadow); overflow:hidden;
}
.gwcal-month h3{margin:0 0 10px; text-align:center; font-weight:800; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:#fff}

/* Day grid */
.gwcal-grid{display:grid; gap:var(--gw-day-gap); grid-template-columns:repeat(7, minmax(0,1fr)); box-sizing:border-box}
.gwcal-dow{color:var(--gw-subtle); font-weight:800; font-size:11px; letter-spacing:.3px; text-align:center; padding:6px 0 8px}

/* Day cells */
.gwcal-cell{position:relative; aspect-ratio:1/1; border-radius:var(--gw-cell-radius); display:flex; align-items:center; justify-content:center; color:var(--gw-muted)}
.gwcal-cell:hover{background:rgba(255,255,255,.045); transition:.15s ease}
.gwcal-num{font-weight:800; font-size:13px; position:relative; z-index:1}
.gwcal-cell[data-color]{color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)); box-shadow:var(--gw-pill-shadow)}
.gwcal-cell[data-color]::before{content:""; position:absolute; inset:0; border-radius:var(--gw-cell-radius); opacity:.95}

/* Day colors */
.gwcal-cell[data-color="red"]::before{background:var(--gw-red)}
.gwcal-cell[data-color="blue"]::before{background:var(--gw-blue)}
.gwcal-cell[data-color="green"]::before{background:var(--gw-green)}
.gwcal-cell[data-color="purple"]::before{background:var(--gw-purple)}
.gwcal-cell[data-color="orange"]::before{background:var(--gw-orange)}
.gwcal-cell[data-color="gold"]::before{background:var(--gw-gold)}
.gwcal-cell[data-color="yellow"]::before{background:var(--gw-yellow)}
.gwcal-cell[data-color="black"]::before{background:var(--gw-black)}
.gwcal-cell[data-color="cyan"]::before{background:var(--gw-cyan)}
.gwcal-cell[data-color="pink"]::before{background:var(--gw-pink)}
.gwcal-cell[data-color="lime"]::before{background:var(--gw-lime)}
.gwcal-cell[data-color="turquoise"]::before{background:var(--gw-turquoise)}
.gwcal-cell[data-color="indigo"]::before{background:var(--gw-indigo)}
/* Christmas */
.gwcal-cell[data-color="holly"]::before{background:var(--gw-holly)}
.gwcal-cell[data-color="pine"]::before{background:var(--gw-pine)}
.gwcal-cell[data-color="evergreen"]::before{background:var(--gw-evergreen)}
.gwcal-cell[data-color="cranberry"]::before{background:var(--gw-cranberry)}
.gwcal-cell[data-color="snow"]::before{background:var(--gw-snow)}
.gwcal-cell[data-color="silver"]::before{background:var(--gw-silver)}
.gwcal-cell[data-color="candycane"]::before{background:var(--gw-candycane)}
.gwcal-cell[data-color="mistletoe"]::before{background:var(--gw-mistletoe)}
.gwcal-cell[data-color="ornament"]::before{background:var(--gw-ornament)}
.gwcal-cell[data-color="xmasgold"]::before{background:var(--gw-xmasgold)}
.gwcal-cell[data-color="gingerbread"]::before{background:var(--gw-gingerbread)}
.gwcal-cell[data-color="nutcracker"]::before{background:var(--gw-nutcracker)}
.gwcal-cell[data-color="festivepink"]::before{background:var(--gw-festivepink)}
.gwcal-cell[data-color="frost"]::before{background:var(--gw-frost)}
.gwcal-cell[data-color="esc2"]::before{background:var(--gw-esc2)}
.gwcal-cell[data-color="esc5"]::before{background:var(--gw-esc5)}


/* Clickable + time badge */
.gwcal-cell[data-url]{cursor:pointer}
.gwcal-cell[data-url]:hover{transform:translateY(-1px); filter:brightness(1.05)}
.gwcal-time{position:absolute; bottom:4px; right:6px; font-size:10px; font-weight:800; color:#0b0d12; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.9); pointer-events:none}

/* Tooltip (desktop only) */
@media (hover:hover) and (pointer:fine){
  .gwcal-tip{
    position: fixed; z-index: 9999;
    background: rgba(28,30,38,.92);
    color: #e5e7eb; font-weight: 700; font-size: 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; padding: 6px 9px;
    box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
    pointer-events: none; transform: translate(-50%, -8px); white-space: nowrap;
  }
  .gwcal-tip::after{
    content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
    border: 6px solid transparent; border-top-color: rgba(28,30,38,.92);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
  }
}

/* ===== Modal ===== */
.gwmodal{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:16px }
.gwmodal.is-open{ display:flex }
.gwmodal-card{
  width:min(720px,100%); max-height:92vh; overflow:auto;
  background:rgba(28,30,38,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px; backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  color:#e5e7eb; position:relative;
}
.gwmodal-body{ padding:18px 18px 20px }
.gwmodal-head{ display:flex; align-items:center; gap:12px; padding:14px 18px 0 }
.gwmodal-logo{ height:150px; width:auto; object-fit:contain }
.gwmodal-title{ margin:6px 0 0; font-size:22px; font-weight:800 }
/* Close button in modal */
.gwmodal-x{
  position:absolute;
  top:12px; right:12px;
  width:28px; height:28px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600;
  line-height:1; padding:0;
}
.gwmodal-x:hover{ background:rgba(255,255,255,.15); }

/* shared modal card section */
.gwmodal-section{ margin-top:14px; border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px; background:rgba(255,255,255,.03) }
.gwmodal-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between }
.gwmodal-showtitle{ font-size:20px; font-weight:800 }
.gwmodal-time{ color:#cbd5e1; font-weight:700 }
.gwbtn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:#ef4444; color:#fff; font-weight:800; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12) }
.gwbtn svg{ width:16px; height:16px }
.gwmodal-muted{ color:#a7aebd; font-size:14px; margin-top:6px }

/* Venue block */
.gwmodal-venue h4{ margin:16px 0 4px; font-size:20px }
.gwmodal-venue p{ margin:4px 0; color:#cbd5e1 }
.gwmodal-venue a{ color:#ef4444; font-weight:800; text-decoration:none }

/* ====== GROUP SALES CARD (restyled) ====== */
.gwmodal-group{padding:0; background:transparent; border:none; margin-top:14px}
.gwmodal-group .gwgroup-link{
  display:block; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.gwmodal-group .gwgroup-link:focus-visible{outline:2px solid #ef4444; outline-offset:2px; border-color:#ef4444}
.gwmodal-group .gwmodal-row{gap:14px}
.gwmodal-group .gwmodal-row > div:first-child{flex:1; min-width:200px}

/* Title + icon */
.gs-title{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px}
.gs-icon{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.gs-icon svg{width:20px; height:20px; color:#e5e7eb}
.gs-title-text{display:inline-block}

/* Subtitle */
.gs-sub{color:#cfd5df; font-size:14px; margin-top:6px}

/* Arrow button on the right */
.gs-arrow{
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900; font-size:18px; line-height:1; color:#fff;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.gwmodal-group .gwgroup-link:hover .gs-arrow{ transform:translateX(2px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18) }
.gwmodal-group .gwgroup-link:hover .gs-title-text{ text-decoration:underline }

/* Small screens spacing */
@media (max-width:520px){
  .gs-sub{font-size:13px}
  .gs-title{font-size:17px}
}

/* Sleek sticky header — safe-area aware */
.gwcal-header{
  position: sticky;
  top: 0;                                /* sit flush to the very top */
  z-index: 60;
  padding: calc(32px + 8px) 18px 10px;   /* default spacing */
  padding-top: calc(env(safe-area-inset-top) + 32px + 8px); /* fill notch on iOS */
  margin: 0 -18px;
  background: var(--gw-header-tint);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  transition: padding .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* tiny fade under header */
.gwcal-header::after{
  content:"";
  display:block;
  height:8px;
  margin-top:6px;
  background: linear-gradient(to bottom, rgba(0,0,0,.13), transparent);
  border-radius: 0 0 10px 10px;
}

/* tighter typography & spacing inside header */
.gwcal-header .gwcal-title{ margin:0 0 2px; font-size:clamp(22px,3.6vw,34px); }
.gwcal-header .gwcal-sub{ margin:0 0 6px; }
.gwcal-header .gwcal-legend{ margin:0; }

/* slimmer legend chips */
.gwcal-header .gwcal-chip{
  padding:3px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}

/* comfortable anchor offset below sticky header */
.gwcal-month{ scroll-margin-top: 84px; }

/* Compact-on-scroll state — also safe-area aware */
.gwcal-header.is-compact{
  padding: calc(32px + 6px) 18px 8px;
  padding-top: calc(env(safe-area-inset-top) + 32px + 6px);
  background: rgba(11,13,18,.48);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.gwcal-header.is-compact .gwcal-title{ font-size:clamp(21px,3.2vw,30px); }
.gwcal-header.is-compact .gwcal-chip{ padding:2px 7px; }

/* --- iOS notch & overscroll fixes --- */
html { background-color: #0b0c10; } /* fallback color behind overscroll */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; } /* override the fixed attachment */
  .gwcal-header{
    top: 0;
    padding-top: calc(env(safe-area-inset-top) + 32px + 8px);
  }
  .gwcal-header.is-compact{
    padding-top: calc(env(safe-area-inset-top) + 32px + 6px);
  }
}

/* === Desktop overrides: kill the top black strip and sticky effects === */
@media (min-width: 768px){
  html { background: transparent !important; background-color: transparent !important; }
  body { background-attachment: fixed !important; }
  .gwcal-wrap{ margin: 32px auto 64px !important; }
  .gwcal-header{
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 8px 0 10px !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .gwcal-header::after{ display:none !important; }
  .gwcal-month{ scroll-margin-top: 0 !important; }
}

/* === iOS mobile only: keep the notch/overscroll fix === */
@supports (-webkit-touch-callout: none){
  @media (pointer: coarse){
    html { background-color: var(--gw-header-solid) !important; }
    body { background-attachment: scroll !important; }
    .gwcal-header{
      top: 0 !important;
      padding-top: calc(env(safe-area-inset-top) + 32px + 8px) !important;
      background: var(--gw-header-tint) !important;
    }
    .gwcal-header.is-compact{
      padding-top: calc(env(safe-area-inset-top) + 32px + 6px) !important;
    }
  }
}
@media (max-width:560px){
  .gwcal-legend--centered{
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-left: 0;
    padding-right: 0;
  }
}