/* ============================================================
   EventWindows - Shared Design System Stylesheet
   Mirrors the approved homepage design system exactly.
   All named values reference the design tokens in
   assets/css/tokens.css (loaded first) — output is unchanged.
   ============================================================ */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ew-slate-50);
}
::-webkit-scrollbar-thumb {
  background: var(--ew-slate-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ew-slate-400);
}

/* Header brand gradient (matches homepage header) */
.header-gradient {
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
}

/* Brush stroke header divider (self-contained data URI) */
.header-divider {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
}
.header-divider::before {
  content: '';
  display: block;
  height: 60px;
  width: 100%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABlgAAABQCAMAAABCrYgoAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////k5OT////////////////////////////09PT////8/Pz+/v7u7u7y8vLz8/OMm7pZAAAAN3RSTlMAPJxw7x/cr1fP54f//sD7t/D891L95dKMzvbricL44Oqy2vSBsO3h8vr5zN7/f+TL87X1s//db9HQHwAADgpJREFUeAHswQVhBEEQALBZPAb/ZgsGyn1MEl8HpBwAAADA50rNAQB/pvXa4jcAAAAAAAAYaq29xbsWvwYA41TrHO+mGgDwd9oSt6UEAHevlRI3Ylm3PQC4c+OxHiVuQypjAHD3xjEeEgAAcL62d58LbTPN28Av2ZZt8LVmd7Sr2ZD7Dcn7tDtP7/X8z+sv4yZXDMhgk/l9SaWDZsuUIJypcHUKGGOMuSwxcCFEXJuRm8IYY8yFCI4rqVb7hBhjTIOURxU+qP4NANWMFsfKYymrerxEzSVXfYIxxlylG96jYzG49THOR+U5EzAXOOe4VuN5VLgSYIwxVzlKYzACetMSZxE/C2eS6CdVjfhoAmdcvX2AtfYTThUD2yKMMeZ6FNPp9P9NAEym/fH5M4G0SlxxohEfiK/4KGQ0cnDcVmWcIvB648qkjx+cMeZmcNNDp8ZoFKPBAAfEL2xJdcTH4TiXPGYCdySNOCKreuGaSIiYmQzv6MqLr24sOCjRJWOM6Tm6UTlgo8ScV31Qvf9KyoMG4S5RXJHkIvYI4gHHFckAIvdJ8bStCrHUuyPd9J3jym0Px/z07VpKVvq3Y3TOGHMzxQsNCxxVTKbT/8+ZAoiq6niSKuNK1GykjC3cIznu9xNWJpjxjntkoD8cDAaJvO2VuGiB/AWuw3QwRpeMMWWvAMrzFlEX/X6/AOD5HKnGRYmVeOwT9h3i8XncclPTiBX3qoEbknfTX/bxzm76OKpio8JHUUzveTfswxjzjn7FlLWBbapf+RxVvrhy9xQ8WiLb1vkHmS8gANTxAKAY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') bottom no-repeat;
  background-size: cover;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 7;
}
@media (max-width: 768px) {
  .header-divider { height: 45px; }
  .header-divider::before { height: 45px; }
}
@media (max-width: 576px) {
  .header-divider { height: 30px; }
  .header-divider::before { height: 30px; }
}

/* Brand helpers */
.bg-brand-gradient {
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
}
.text-gradient {
  background: linear-gradient(135deg, var(--ew-brand-dark) 0%, var(--ew-brand-emerald) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glow-brand {
  box-shadow: 0 0 25px rgba(210, 224, 66, 0.4);
}

/* Host CTA card */
.host-cta {
  position: relative;
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
  border-radius: var(--ew-radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.25);
}
.host-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.14) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ew-brand-dark);
  color: #ffffff;
  font-weight: 800;
  border-radius: var(--ew-radius-full);
  padding: 0.875rem 1.75rem;
  font-size: 0.9rem;
  transition: all var(--ew-duration-base) var(--ew-ease-out);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35);
}
.btn-white:hover {
  background: var(--ew-brand-slate);
  transform: translateY(-2px);
}

/* ============================================================
   Reusable component classes used across public pages
   ============================================================ */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ew-brand-dark);
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
  border-radius: var(--ew-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(101, 188, 76, 0.3);
  transition: all var(--ew-duration-base) var(--ew-ease-out);
  white-space: nowrap;
}
.btn-primary:hover {
  opacity: 0.95;
  box-shadow: 0 15px 30px -5px rgba(101, 188, 76, 0.4);
  transform: translateY(-1px);
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--ew-brand-dark);
  border-radius: var(--ew-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
  transition: all var(--ew-duration-base) var(--ew-ease-out);
  white-space: nowrap;
}
.btn-dark:hover {
  background: var(--ew-brand-slate);
  transform: translateY(-1px);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ew-brand-slate);
  background: #ffffff;
  border: 1px solid var(--ew-slate-200);
  border-radius: var(--ew-radius-lg);
  transition: all var(--ew-duration-base) var(--ew-ease-out);
  white-space: nowrap;
}
.btn-outline:hover {
  background: var(--ew-slate-50);
  border-color: var(--ew-slate-300);
}

/* Form fields */
.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ew-slate-700);
  background: var(--ew-slate-50);
  border: 1px solid var(--ew-slate-200);
  border-radius: var(--ew-radius-lg);
  transition: all var(--ew-duration-base) var(--ew-ease-out);
}
.input-field:focus {
  background: #ffffff;
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--ew-brand-green);
}
.input-field::placeholder {
  color: var(--ew-slate-400);
}
.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ew-slate-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

/* Cards */
.ew-card {
  background: #ffffff;
  border: 1px solid var(--ew-slate-100);
  border-radius: var(--ew-radius-xl);
  box-shadow: var(--ew-shadow-card);
  transition: all var(--ew-duration-slow) var(--ew-ease-out);
}
.ew-card:hover {
  box-shadow: var(--ew-shadow-hover);
  transform: translateY(-4px);
}

/* Section headings with vertical accent bar */
.section-bar {
  width: 0.4rem;
  border-radius: var(--ew-radius-full);
  background: linear-gradient(180deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
  flex-shrink: 0;
}

/* Chips / badges */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--ew-slate-100);
  color: var(--ew-slate-700);
  border-radius: var(--ew-radius-sm);
  white-space: nowrap;
}
.chip-green {
  background: #ECFDF3;
  color: var(--ew-brand-emerald);
  border: 1px solid #D1FAE5;
}
.chip-amber {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}
.chip-blue {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
.chip-red {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

/* Accordion panel */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ew-duration-slow) var(--ew-ease-out);
}
.accordion-body.open {
  max-height: 600px;
}

/* OTP input */
.otp-box {
  width: 3.25rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ew-brand-dark);
  background: var(--ew-slate-50);
  border: 1px solid var(--ew-slate-200);
  border-radius: var(--ew-radius-lg);
  outline: none;
  transition: all var(--ew-duration-base) var(--ew-ease-out);
}
.otp-box:focus {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--ew-brand-green);
}

/* Table */
.ew-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ew-slate-500);
  font-weight: 800;
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--ew-slate-50);
}
.ew-table td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--ew-slate-700);
  border-top: 1px solid var(--ew-slate-100);
}

/* Stepper */
.step-dot.active {
  background: linear-gradient(90deg, var(--ew-gradient-start) 0%, var(--ew-gradient-end) 100%);
  color: var(--ew-brand-dark);
}
.step-line.active {
  background: var(--ew-gradient-end);
}

/* Custom scrollbar-none helper (horizontal scroll areas) */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}