/* Global site-wide scale — makes all text and spacing slightly smaller
   and more compact across every page, without needing to edit every
   individual font-size declaration in every file. */
html {
  zoom: 0.9;
}

/* Extra shrink on top of the base scale specifically for phone-sized
   screens, where the desktop-sized cards/boxes/text feel oversized. */
@media (max-width: 600px) {
  html {
    zoom: 0.78;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  html {
    zoom: 0.85;
  }
}

/* Every scrollable list/panel in the app should scroll smoothly without a
   visible scrollbar track/thumb — keeps things looking clean instead of
   obviously "boxed in a scroll area". */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, new Edge */
}

/* Elegant glowing violet badge for Premium tier tickets, used everywhere
   a ticket tier is shown (Ticket Management, Buy Tickets, My Tickets...). */
.premium-badge {
  background: linear-gradient(135deg, #a855f7, #6d28d9);
  color: #f3e8ff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
  animation: premium-glow 2s ease-in-out infinite;
}
@keyframes premium-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.5); }
  50% { box-shadow: 0 0 14px rgba(168, 85, 247, 0.9); }
}

/* ============================================================
   Collectible ticket cards — replaces the old QR-code ticket
   layout everywhere a ticket is shown (Buy Tickets, Shop, My
   Tickets, staff Ticket Management). Normal is plain and
   functional; Gold has a metallic glowing finish; Premium has a
   glowing purple-and-gold finish with sparkle accents.
   ============================================================ */
.ecp-ticket {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 170;
  border-radius: 12px;
  display: flex;
  padding: 5% 6%;
  overflow: hidden;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.ecp-ticket::before, .ecp-ticket::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--bg-main, #0b0f17);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.ecp-ticket::before { left: -10px; }
.ecp-ticket::after { right: -10px; }
.ecp-ticket-notch-line {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 74%;
  border-left: 2px dashed rgba(255,255,255,0.35);
}
.ecp-ticket-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-right: 8%; min-width: 0; }
.ecp-ticket-tier-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 4%; font-family: Arial, sans-serif; }
.ecp-ticket-code { font-size: 17px; font-weight: 900; font-family: 'Courier New', monospace; letter-spacing: 0.5px; margin-bottom: 4%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecp-ticket-sub { font-size: 8.5px; font-weight: 700; letter-spacing: 1px; font-family: Arial, sans-serif; opacity: 0.85; }
.ecp-ticket-meta { font-size: 7.5px; margin-top: 6%; opacity: 0.65; font-family: Arial, sans-serif; }
.ecp-ticket-side { width: 20%; display: flex; align-items: center; justify-content: center; }
.ecp-ticket-logo { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

.ecp-ticket-normal {
  background: linear-gradient(135deg, #4a7ba6, #3a6088);
  color: #0a1826;
  border: 2px solid #2c4a68;
}
.ecp-ticket-normal .ecp-ticket-tier-label { color: #0a1826; }
.ecp-ticket-normal .ecp-ticket-logo { background: rgba(255,255,255,0.25); color: #fff; }

.ecp-ticket-gold {
  background: linear-gradient(135deg, #fff4c9 0%, #f2c94c 25%, #d4a017 50%, #f2c94c 75%, #fff4c9 100%);
  color: #4a3200;
  border: 2px solid #a97c0a;
  box-shadow: 0 0 18px rgba(242, 201, 76, 0.5), inset 0 0 16px rgba(255,255,255,0.3);
}
.ecp-ticket-gold .ecp-ticket-notch-line { border-left-color: rgba(74,50,0,0.35); }
.ecp-ticket-gold .ecp-ticket-tier-label { color: #6b4a00; }
.ecp-ticket-gold .ecp-ticket-logo { background: rgba(74,50,0,0.15); color: #4a3200; }
.ecp-ticket-corner { position: absolute; font-size: 12px; opacity: 0.5; color: #4a3200; }
.ecp-ticket-gold .tc-tl { top: 6%; left: 5%; }
.ecp-ticket-gold .tc-br { bottom: 6%; right: 24%; }

.ecp-ticket-premium {
  background: linear-gradient(135deg, #2d1b4e 0%, #4a2c7a 35%, #6b3fa0 60%, #2d1b4e 100%);
  color: #f3e8ff;
  border: 2px solid #c9a636;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.5), 0 0 12px rgba(201, 166, 54, 0.4), inset 0 0 20px rgba(201,166,54,0.15);
  animation: ecp-premium-pulse 2.5s ease-in-out infinite;
}
.ecp-ticket-premium .ecp-ticket-notch-line { border-left-color: rgba(243,232,255,0.3); }
.ecp-ticket-premium .ecp-ticket-tier-label { color: #e9c968; letter-spacing: 2px; }
.ecp-ticket-premium .ecp-ticket-code { background: linear-gradient(90deg, #f3e8ff, #e9c968); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ecp-ticket-premium .ecp-ticket-logo { background: rgba(233,201,104,0.2); color: #e9c968; border: 1px solid rgba(233,201,104,0.5); }
.ecp-sparkle { position: absolute; color: #e9c968; font-size: 9px; opacity: 0.85; }
.ecp-sparkle.sp1 { top: 8%; left: 5%; }
.ecp-sparkle.sp2 { top: 14%; right: 22%; }
.ecp-sparkle.sp3 { bottom: 10%; left: 8%; font-size: 7px; }
@keyframes ecp-premium-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.45), 0 0 10px rgba(201, 166, 54, 0.35), inset 0 0 20px rgba(201,166,54,0.12); }
  50% { box-shadow: 0 0 28px rgba(168, 85, 247, 0.65), 0 0 16px rgba(201, 166, 54, 0.55), inset 0 0 24px rgba(201,166,54,0.2); }
}

/* ============================================================
   Site-wide animated background — a slow-drifting aurora of
   soft color washes behind every page, on every role. Lives
   entirely in this shared stylesheet so it applies everywhere
   automatically without touching individual pages. Sits fixed
   and far behind all real content (z-index:-1), so it never
   interferes with readability or interaction — just quiet,
   premium atmosphere in the dark UI.
   ============================================================ */
body {
  background-color: #04060f !important;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 12% 8%, rgba(16, 185, 129, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 900px at 88% 15%, rgba(168, 85, 247, 0.14), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 50% 95%, rgba(201, 166, 54, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 700px at 92% 88%, rgba(37, 99, 235, 0.13), transparent 60%),
    #04060f;
  background-size: 200% 200%;
  animation: ecp-aurora-drift 26s ease-in-out infinite;
  animation-delay: var(--ecp-aurora-delay, 0s);
}
@keyframes ecp-aurora-drift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 60% 30%; }
  50%  { background-position: 100% 70%; }
  75%  { background-position: 30% 100%; }
  100% { background-position: 0% 0%; }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 40%, #000 30%, transparent 85%);
  animation: ecp-grid-drift 32s linear infinite;
  animation-delay: var(--ecp-grid-delay, 0s);
}
@keyframes ecp-grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 44px 44px, 44px 44px; }
}
@media (max-width: 600px) {
  body::before {
    background:
      radial-gradient(ellipse 600px 500px at 15% 5%, rgba(16, 185, 129, 0.15), transparent 60%),
      radial-gradient(ellipse 550px 600px at 90% 20%, rgba(168, 85, 247, 0.13), transparent 60%),
      radial-gradient(ellipse 650px 550px at 50% 100%, rgba(201, 166, 54, 0.10), transparent 60%),
      #04060f;
    background-size: 220% 220%;
  }
  body::after {
    background-size: 34px 34px;
    animation-name: ecp-grid-drift-mobile;
  }
}
@keyframes ecp-grid-drift-mobile {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 34px 34px, 34px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ============================================================
   Seasonal Theme — Phase 1: Winter
   ------------------------------------------------------------
   A cold-toned overlay and frost-style accents applied whenever
   [data-theme="winter"] is set on <html> by the theme engine.
   Kept additive/non-destructive so it layers over each page's
   own styling instead of overriding it.
   ============================================================ */
html[data-theme="winter"] body {
  background-color: #0a1420 !important;
}
html[data-theme="winter"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(147, 197, 253, 0.14), transparent 60%),
    radial-gradient(ellipse 800px 900px at 85% 20%, rgba(191, 219, 254, 0.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 50% 95%, rgba(96, 165, 250, 0.08), transparent 60%),
    #0a1420 !important;
}
html[data-theme="winter"] .card,
html[data-theme="winter"] .panel,
html[data-theme="winter"] .wallet-section,
html[data-theme="winter"] [class*="-card"] {
  border-color: rgba(147, 197, 253, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.08), 0 8px 24px rgba(10, 20, 32, 0.4);
}
html[data-theme="winter"] .btn:not(.danger):not(.btn-danger),
html[data-theme="winter"] button[class*="btn-"]:not([class*="danger"]) {
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.25);
}

html[data-theme="spring"] body { background-color: #0f1a12 !important; }
html[data-theme="spring"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(134, 239, 172, 0.14), transparent 60%),
    radial-gradient(ellipse 800px 900px at 85% 20%, rgba(253, 164, 175, 0.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 50% 95%, rgba(74, 222, 128, 0.08), transparent 60%),
    #0f1a12 !important;
}
html[data-theme="spring"] .card,
html[data-theme="spring"] .panel,
html[data-theme="spring"] .wallet-section,
html[data-theme="spring"] [class*="-card"] {
  border-color: rgba(134, 239, 172, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.08), 0 8px 24px rgba(15, 26, 18, 0.4);
}
html[data-theme="spring"] .btn:not(.danger):not(.btn-danger),
html[data-theme="spring"] button[class*="btn-"]:not([class*="danger"]) {
  box-shadow: 0 0 10px rgba(134, 239, 172, 0.25);
}

html[data-theme="summer"] body { background-color: #1a1508 !important; }
html[data-theme="summer"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(253, 224, 71, 0.14), transparent 60%),
    radial-gradient(ellipse 800px 900px at 85% 20%, rgba(96, 165, 250, 0.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 50% 95%, rgba(251, 191, 36, 0.08), transparent 60%),
    #1a1508 !important;
}
html[data-theme="summer"] .card,
html[data-theme="summer"] .panel,
html[data-theme="summer"] .wallet-section,
html[data-theme="summer"] [class*="-card"] {
  border-color: rgba(253, 224, 71, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.08), 0 8px 24px rgba(26, 21, 8, 0.4);
}
html[data-theme="summer"] .btn:not(.danger):not(.btn-danger),
html[data-theme="summer"] button[class*="btn-"]:not([class*="danger"]) {
  box-shadow: 0 0 10px rgba(253, 224, 71, 0.25);
}

html[data-theme="autumn"] body { background-color: #1a0f08 !important; }
html[data-theme="autumn"] body::before {
  background:
    radial-gradient(ellipse 900px 700px at 15% 10%, rgba(245, 158, 11, 0.14), transparent 60%),
    radial-gradient(ellipse 800px 900px at 85% 20%, rgba(194, 65, 12, 0.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 50% 95%, rgba(161, 98, 7, 0.08), transparent 60%),
    #1a0f08 !important;
}
html[data-theme="autumn"] .card,
html[data-theme="autumn"] .panel,
html[data-theme="autumn"] .wallet-section,
html[data-theme="autumn"] [class*="-card"] {
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 8px 24px rgba(26, 15, 8, 0.4);
}
html[data-theme="autumn"] .btn:not(.danger):not(.btn-danger),
html[data-theme="autumn"] button[class*="btn-"]:not([class*="danger"]) {
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

/* ---- Time-of-day overlay: combines with the active season for
   16 total moods (4 seasons x morning/afternoon/sunset/night). ---- */
html[data-time-period="night"] body::before {
  filter: brightness(0.75) saturate(0.85);
}
html[data-time-period="sunset"] body::before {
  filter: brightness(0.95) sepia(0.12) saturate(1.15);
}
html[data-time-period="morning"] body::before {
  filter: brightness(1.05) saturate(1.05);
}

@keyframes ecp-splash-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Broader component coverage: forms, tables, modals, toasts ---- */
html[data-theme="winter"] input, html[data-theme="winter"] select, html[data-theme="winter"] textarea,
html[data-theme="winter"] table, html[data-theme="winter"] .m-table,
html[data-theme="winter"] #toastBox, html[data-theme="winter"] [class*="modal"] > div {
  border-color: rgba(147, 197, 253, 0.2) !important;
}
html[data-theme="spring"] input, html[data-theme="spring"] select, html[data-theme="spring"] textarea,
html[data-theme="spring"] table, html[data-theme="spring"] .m-table,
html[data-theme="spring"] #toastBox, html[data-theme="spring"] [class*="modal"] > div {
  border-color: rgba(134, 239, 172, 0.2) !important;
}
html[data-theme="summer"] input, html[data-theme="summer"] select, html[data-theme="summer"] textarea,
html[data-theme="summer"] table, html[data-theme="summer"] .m-table,
html[data-theme="summer"] #toastBox, html[data-theme="summer"] [class*="modal"] > div {
  border-color: rgba(253, 224, 71, 0.2) !important;
}
html[data-theme="autumn"] input, html[data-theme="autumn"] select, html[data-theme="autumn"] textarea,
html[data-theme="autumn"] table, html[data-theme="autumn"] .m-table,
html[data-theme="autumn"] #toastBox, html[data-theme="autumn"] [class*="modal"] > div {
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* ---- Unified content tint: a subtle color-grade filter applied to
   the page's main content wrapper for each season. This is the closest
   feasible approximation of "every component reflects the active
   theme" without rewriting each page's own hardcoded colors — it
   nudges hue/saturation/warmth across everything inside the wrapper,
   including elements not individually targeted above. ---- */
html[data-theme="winter"] body > div:not(#ecp-season-canvas),
html[data-theme="winter"] .container, html[data-theme="winter"] .wrap, html[data-theme="winter"] main {
  filter: hue-rotate(6deg) saturate(0.94);
}
html[data-theme="spring"] body > div:not(#ecp-season-canvas),
html[data-theme="spring"] .container, html[data-theme="spring"] .wrap, html[data-theme="spring"] main {
  filter: hue-rotate(-4deg) saturate(1.04);
}
html[data-theme="summer"] body > div:not(#ecp-season-canvas),
html[data-theme="summer"] .container, html[data-theme="summer"] .wrap, html[data-theme="summer"] main {
  filter: hue-rotate(-8deg) saturate(1.08) brightness(1.02);
}
html[data-theme="autumn"] body > div:not(#ecp-season-canvas),
html[data-theme="autumn"] .container, html[data-theme="autumn"] .wrap, html[data-theme="autumn"] main {
  filter: sepia(0.06) saturate(1.05);
}
#ecp-season-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}