/* =================================================================
   WildOut Portal — Design System
   -----------------------------------------------------------------
   1. TOKENS         — variabili CSS --wo-* + override --bs-*
   2. BASE           — reset minimi, body, tipografia, link
   3. COMPONENTS     — .wo-* (button, card, alert, input, modal, ...)
   4. UTILITIES      — micro-classi che Bootstrap non copre
   5. LEGACY BRIDGE  — riskinatura delle vecchie classi (.card-custom,
                       .bg-glass, .cart-icon-rotate, .hover-warning,
                       .table-mobile-cards) per non rompere i template
                       finché non vengono migrati ai .wo-*.
   ================================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* --- Brand --- */
  --wo-bg:        #1e1e1e;
  --wo-bg-soft:   #141414;
  --wo-bg-elev:   #262626;
  --wo-primary:   #eb5f38;     /* arancione di sistema */
  --wo-primary-hi:#f47650;     /* hover/lighter */
  --wo-event:     #fbbe51;     /* giallo "esperienza evento" */
  --wo-event-hi:  #fcc96d;
  --wo-cream:     #f8ebcb;
  --wo-gray:      #a0a0a0;
  --wo-gray-soft: #3a3a3a;
  --wo-white:     #ffffff;

  /* --- Stati funzionali --- */
  --wo-success:   #4a8f5b;
  --wo-success-fg:#6ab37b;
  --wo-danger:    #d04a3a;
  --wo-danger-fg: #e57161;
  --wo-warning:   #c89940;
  --wo-warning-fg:#d6ad5e;
  --wo-info:      #5a8aa8;
  --wo-info-fg:   #7ba3bf;

  /* --- Tipografia --- */
  --wo-font-display: 'Cabinet Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wo-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wo-text-display-xl: 48px;
  --wo-text-display-lg: 36px;
  --wo-text-display:    28px;
  --wo-text-display-sm: 22px;

  --wo-text-lg: 18px;
  --wo-text-md: 16px;
  --wo-text-sm: 14px;
  --wo-text-xs: 12px;

  /* --- Spaziatura (scala 4px) --- */
  --wo-space-1: 4px;
  --wo-space-2: 8px;
  --wo-space-3: 12px;
  --wo-space-4: 16px;
  --wo-space-5: 24px;
  --wo-space-6: 32px;
  --wo-space-7: 48px;
  --wo-space-8: 64px;

  --wo-page-padding: 16px;

  /* --- Radius --- */
  --wo-radius-sm:   6px;
  --wo-radius-md:  12px;
  --wo-radius-lg:  18px;
  --wo-radius-xl:  24px;
  --wo-radius-pill: 999px;

  /* --- Shadow --- */
  --wo-shadow-card: 0 6px 20px rgba(0,0,0,0.35);
  --wo-shadow-pop:  0 12px 30px rgba(0,0,0,0.5);
  --wo-shadow-cta:  0 8px 22px rgba(235,95,56,0.40);
  --wo-shadow-cta-event: 0 8px 22px rgba(251,190,81,0.40);

  /* --- Motion --- */
  --wo-ease:        cubic-bezier(0.25, 1, 0.5, 1);
  --wo-duration-1:  120ms;
  --wo-duration-2:  240ms;
  --wo-duration-3:  400ms;

  /* --- Layout --- */
  --wo-navbar-h-desktop: 90px;
  --wo-navbar-h-mobile:  70px;

  /* =========================================================
     Override Bootstrap — vivono qui per cascade priority
     ========================================================= */
  --bs-primary:           var(--wo-primary);
  --bs-primary-rgb:       235, 95, 56;
  --bs-secondary:         var(--wo-gray);
  --bs-secondary-rgb:     103, 103, 103;
  --bs-success:           var(--wo-success);
  --bs-success-rgb:       74, 143, 91;
  --bs-danger:            var(--wo-danger);
  --bs-danger-rgb:        208, 74, 58;
  --bs-warning:           var(--wo-warning);
  --bs-warning-rgb:       200, 153, 64;
  --bs-info:              var(--wo-info);
  --bs-info-rgb:          90, 138, 168;
  --bs-light:             var(--wo-cream);
  --bs-dark:              var(--wo-bg);
  --bs-body-bg:           var(--wo-bg);
  --bs-body-bg-rgb:       30, 30, 30;
  --bs-body-color:           var(--wo-white);
  --bs-body-color-rgb:       255, 255, 255;
  --bs-secondary-color:      #e0e0e0;
  --bs-secondary-color-rgb:  224, 224, 224;
  --bs-tertiary-color:       #d0d0d0;
  --bs-tertiary-color-rgb:   208, 208, 208;
  --bs-border-color:         var(--wo-gray-soft);
  --bs-link-color:        var(--wo-primary);
  --bs-link-color-rgb:    235, 95, 56;
  --bs-link-hover-color:  var(--wo-primary-hi);
}

/* Compressione tipografica su mobile */
@media (max-width: 767.98px) {
  :root {
    --wo-text-display-xl: 40px;
    --wo-text-display-lg: 28px;
    --wo-text-display:    24px;
    --wo-text-display-sm: 20px;
  }
}

/* Aumento tipografico desktop (solo frontend, escluso admin) */
@media (min-width: 768px) {
  body.wo-site {
    --wo-text-display-xl: 50px;
    --wo-text-display-lg: 38px;
    --wo-text-display:    30px;
    --wo-text-display-sm: 24px;
    --wo-text-lg: 20px;
    --wo-text-md: 18px;
    --wo-text-sm: 16px;
    --wo-text-xs: 14px;
  }
}

@media (min-width: 576px) {
  :root { --wo-page-padding: 24px; }
}
@media (min-width: 992px) {
  :root { --wo-page-padding: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wo-duration-1: 0ms;
    --wo-duration-2: 0ms;
    --wo-duration-3: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: var(--wo-bg);
  color: var(--wo-white);
}

body {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-md);
  line-height: 1.55;
  min-height: 100vh;
  padding-top: 110px;     /* spazio per navbar fissa */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 991px) {
  body { padding-top: 90px; }
}

h1, h2, h3, h4, h5, h6, .wo-display {
  font-family: var(--wo-font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wo-white);
  margin: 0 0 var(--wo-space-3);
}

h1 { font-size: var(--wo-text-display-lg); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--wo-text-display); }
h3 { font-size: var(--wo-text-display-sm); }
h4 { font-size: var(--wo-text-lg); }

p { margin: 0 0 var(--wo-space-3); }

a {
  color: var(--wo-primary);
  text-decoration: none;
  transition: color var(--wo-duration-1) var(--wo-ease);
}
a:hover { color: var(--wo-primary-hi); }

::selection { background: var(--wo-primary); color: var(--wo-white); }

:focus-visible {
  outline: 2px solid var(--wo-primary);
  outline-offset: 2px;
  border-radius: var(--wo-radius-sm);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wo-bg-soft); }
::-webkit-scrollbar-thumb {
  background: var(--wo-gray-soft);
  border-radius: var(--wo-radius-pill);
  border: 2px solid var(--wo-bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--wo-gray); }

/* Container */
.main-content {
  position: relative;
  z-index: 1;
  min-height: 60vh;
  padding-left: var(--wo-page-padding);
  padding-right: var(--wo-page-padding);
}

/* =========================================================
   3. COMPONENTS
   ========================================================= */

/* ---- Buttons ---- */
.wo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wo-space-2);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--wo-font-body);
  font-weight: 700;
  font-size: var(--wo-text-sm);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--wo-radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--wo-duration-1) var(--wo-ease),
              box-shadow var(--wo-duration-1) var(--wo-ease),
              background-color var(--wo-duration-1) var(--wo-ease),
              border-color var(--wo-duration-1) var(--wo-ease),
              color var(--wo-duration-1) var(--wo-ease);
  min-height: 44px; /* touch target */
}

.wo-btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.wo-btn:active:not(:disabled):not(.disabled) { transform: translateY(0); }
.wo-btn:disabled, .wo-btn.disabled { opacity: 0.45; cursor: not-allowed; }

.wo-btn-primary {
  background: var(--wo-primary);
  color: var(--wo-white);
  border-color: var(--wo-primary);
}
.wo-btn-primary:hover:not(:disabled):not(.disabled) {
  background: var(--wo-primary-hi);
  border-color: var(--wo-primary-hi);
  color: var(--wo-white);
  box-shadow: var(--wo-shadow-cta);
}

.wo-btn-event {
  background: var(--wo-event);
  color: var(--wo-bg);
  border-color: var(--wo-event);
}
.wo-btn-event:hover:not(:disabled):not(.disabled) {
  background: var(--wo-event-hi);
  border-color: var(--wo-event-hi);
  color: var(--wo-bg);
  box-shadow: var(--wo-shadow-cta-event);
}

.wo-btn-ghost {
  background: transparent;
  color: var(--wo-primary);
  border-color: var(--wo-primary);
}
.wo-btn-ghost:hover:not(:disabled):not(.disabled) {
  background: rgba(235, 95, 56, 0.10);
  color: var(--wo-primary-hi);
  border-color: var(--wo-primary-hi);
}

.wo-btn-ghost-event {
  background: transparent;
  color: var(--wo-event);
  border-color: var(--wo-event);
}
.wo-btn-ghost-event:hover:not(:disabled):not(.disabled) {
  background: rgba(251, 190, 81, 0.10);
  color: var(--wo-event-hi);
  border-color: var(--wo-event-hi);
}

.wo-btn-subtle {
  background: var(--wo-bg-elev);
  color: var(--wo-white);
  border-color: var(--wo-gray-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.wo-btn-subtle:hover:not(:disabled):not(.disabled) {
  border-color: var(--wo-gray);
  background: var(--wo-bg-elev);
}

.wo-btn-danger {
  background: var(--wo-danger);
  color: var(--wo-white);
  border-color: var(--wo-danger);
}
.wo-btn-danger:hover:not(:disabled):not(.disabled) {
  background: var(--wo-danger-fg);
  border-color: var(--wo-danger-fg);
  box-shadow: 0 8px 22px rgba(208, 74, 58, 0.40);
}

/* Sizes */
.wo-btn-sm { padding: 8px 16px; font-size: var(--wo-text-xs); min-height: 32px; }
.wo-btn-lg { padding: 16px 28px; font-size: var(--wo-text-md); min-height: 52px; }

/* Block */
.wo-btn-block { width: 100%; }

/* Spinner */
.wo-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wo-spin 0.7s linear infinite;
}
@keyframes wo-spin { to { transform: rotate(360deg); } }

/* ---- Form controls ---- */
.wo-form-label {
  display: block;
  font-family: var(--wo-font-body);
  font-weight: 600;
  font-size: var(--wo-text-sm);
  color: var(--wo-cream);
  margin-bottom: var(--wo-space-2);
  letter-spacing: 0;
}

.wo-input,
.wo-select,
.wo-textarea {
  width: 100%;
  background: #303030;
  border: 1px solid #505050;
  color: #ffffff;
  border-radius: var(--wo-radius-sm);
  padding: 12px 14px;
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-md); /* 16px no-zoom on iOS */
  line-height: 1.4;
  min-height: 48px;
  transition: border-color var(--wo-duration-1) var(--wo-ease),
              box-shadow var(--wo-duration-1) var(--wo-ease),
              background-color var(--wo-duration-1) var(--wo-ease);
}

.wo-input::placeholder,
.wo-textarea::placeholder { color: var(--wo-gray); }

.wo-input:focus,
.wo-select:focus,
.wo-textarea:focus {
  outline: none;
  border-color: var(--wo-primary);
  background: #303030;
  box-shadow: 0 0 0 3px rgba(235, 95, 56, 0.20);
  color: #ffffff;
}

.wo-input.is-invalid,
.wo-select.is-invalid,
.wo-textarea.is-invalid {
  border-color: var(--wo-danger);
}
.wo-input.is-invalid:focus,
.wo-select.is-invalid:focus,
.wo-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(208, 74, 58, 0.25);
}

.wo-input:disabled,
.wo-input[readonly],
.wo-select:disabled,
.wo-textarea:disabled,
.wo-textarea[readonly] {
  background: var(--wo-bg-soft);
  color: var(--wo-gray);
  cursor: not-allowed;
}

.wo-textarea { min-height: 96px; resize: vertical; }

.wo-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676767'%3E%3Cpath d='M3.2 5.6a.8.8 0 0 1 1.13 0L8 9.27l3.67-3.67a.8.8 0 1 1 1.13 1.13l-4.23 4.24a.8.8 0 0 1-1.13 0L3.2 6.73a.8.8 0 0 1 0-1.13z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.wo-form-help {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-xs);
  color: var(--wo-gray);
  margin-top: var(--wo-space-2);
  line-height: 1.4;
}

.wo-form-error {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-xs);
  font-weight: 600;
  color: var(--wo-danger-fg);
  margin-top: var(--wo-space-2);
  display: flex;
  align-items: center;
  gap: var(--wo-space-2);
}
.wo-form-error::before { content: "⚠"; }

/* Custom checkbox */
.wo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--wo-space-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--wo-font-body);
}
.wo-check input { position: absolute; opacity: 0; pointer-events: none; }
.wo-check .wo-check-box {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--wo-gray);
  border-radius: 4px;
  background: var(--wo-bg-elev);
  display: grid; place-items: center;
  transition: all var(--wo-duration-1) var(--wo-ease);
}
.wo-check input:checked + .wo-check-box {
  background: var(--wo-primary);
  border-color: var(--wo-primary);
}
.wo-check input:checked + .wo-check-box::after {
  content: '✓';
  color: var(--wo-white);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.wo-check input:focus-visible + .wo-check-box {
  box-shadow: 0 0 0 3px rgba(235, 95, 56, 0.25);
}
.wo-check .wo-check-label {
  font-size: var(--wo-text-sm);
  color: var(--wo-white);
  line-height: 1.4;
}

/* Custom switch */
.wo-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--wo-space-3);
  cursor: pointer;
  user-select: none;
}
.wo-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wo-switch .wo-switch-track {
  width: 38px; height: 22px; flex-shrink: 0;
  border-radius: var(--wo-radius-pill);
  background: var(--wo-gray-soft);
  border: 1px solid var(--wo-gray-soft);
  position: relative;
  transition: background var(--wo-duration-1) var(--wo-ease);
}
.wo-switch .wo-switch-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--wo-cream);
  transition: transform var(--wo-duration-2) var(--wo-ease);
}
.wo-switch input:checked + .wo-switch-track {
  background: var(--wo-primary);
  border-color: var(--wo-primary);
}
.wo-switch input:checked + .wo-switch-track::after {
  transform: translateX(16px);
  background: var(--wo-white);
}
.wo-switch input:focus-visible + .wo-switch-track {
  box-shadow: 0 0 0 3px rgba(235, 95, 56, 0.25);
}

/* Password strength bar */
.wo-pass-strength {
  display: flex;
  gap: 4px;
  margin-top: var(--wo-space-2);
}
.wo-pass-strength .wo-pass-seg {
  flex: 1; height: 4px;
  background: var(--wo-gray-soft);
  border-radius: var(--wo-radius-pill);
}
.wo-pass-strength .wo-pass-seg.is-on { background: var(--wo-warning); }
.wo-pass-strength .wo-pass-seg.is-strong { background: var(--wo-success); }

/* ---- Cards ---- */
.wo-card {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  padding: var(--wo-space-5);
}

.wo-card-flush {
  padding: 0;
  overflow: hidden;
}

/* Card evento */
.wo-card-event {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-event);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  overflow: hidden;
  transition: transform var(--wo-duration-2) var(--wo-ease),
              box-shadow var(--wo-duration-2) var(--wo-ease);
}
.wo-card-event:hover { transform: translateY(-2px); box-shadow: var(--wo-shadow-pop); }

.wo-card-event-banner {
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(251, 190, 81, 0.30), transparent 60%),
    linear-gradient(135deg, #2a2a2a, var(--wo-bg));
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--wo-space-3);
  overflow: hidden;
}
.wo-card-event-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.wo-card-event-tag {
  position: relative;
  z-index: 2;
  background: var(--wo-event);
  color: var(--wo-bg);
  font-family: var(--wo-font-body);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--wo-radius-pill);
}

.wo-card-event-body { padding: var(--wo-space-5); }

.wo-card-event-title {
  font-family: var(--wo-font-display);
  font-weight: 800;
  font-size: var(--wo-text-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wo-event);
  margin: 0 0 var(--wo-space-3);
}

.wo-card-event-meta {
  font-family: var(--wo-font-body);
  font-weight: 600;
  font-size: var(--wo-text-xs);
  color: var(--wo-cream);
  margin-bottom: var(--wo-space-3);
}
.wo-card-event-meta .wo-pipe { color: var(--wo-gray); margin: 0 6px; }

.wo-card-event-desc {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-sm);
  line-height: 1.55;
  color: #cfcfcf;
  margin: 0 0 var(--wo-space-4);
}

/* Card stanza (orizzontale) */
.wo-card-room {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  overflow: hidden;
}
@media (min-width: 576px) { .wo-card-room { grid-template-columns: 160px 1fr; } }

.wo-card-room-img {
  background: linear-gradient(135deg, #2c2520, var(--wo-bg));
  background-size: cover;
  background-position: center;
}
.wo-card-room-body {
  padding: var(--wo-space-3) var(--wo-space-4);
  display: flex; flex-direction: column;
  gap: var(--wo-space-1);
}
.wo-card-room-title {
  font-family: var(--wo-font-display);
  font-weight: 800;
  font-size: var(--wo-text-lg);
  line-height: 1.1;
  color: var(--wo-white);
  margin: 0;
}
.wo-card-room-meta {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-xs);
  color: var(--wo-gray);
  line-height: 1.4;
}
.wo-card-room-price {
  font-family: var(--wo-font-display);
  font-weight: 800;
  font-size: var(--wo-text-display-sm);
  color: var(--wo-primary);
  margin-top: auto;
}
.wo-card-room-price .wo-price-unit {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-xs);
  color: var(--wo-gray);
  font-weight: 500;
}

/* Card biglietto (con effetto perforazione) */
.wo-card-ticket {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  position: relative;
  padding: var(--wo-space-5);
}
.wo-card-ticket::before,
.wo-card-ticket::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--wo-bg);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.wo-card-ticket::before { left: -9px; }
.wo-card-ticket::after  { right: -9px; }

/* ---- Alerts (flash messages) ---- */
.wo-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--wo-space-3);
  padding: var(--wo-space-3) var(--wo-space-4);
  border-radius: var(--wo-radius-md);
  border: 1px solid;
  background: var(--wo-bg);
  margin-bottom: var(--wo-space-3);
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-sm);
  line-height: 1.45;
  position: relative;
}
.wo-alert-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: var(--wo-radius-sm);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--wo-white);
}
.wo-alert-body { flex: 1; padding-right: var(--wo-space-5); }
.wo-alert-title {
  display: block;
  font-weight: 700;
  font-size: var(--wo-text-sm);
  margin-bottom: 2px;
}
.wo-alert-msg { margin: 0; opacity: 0.9; color: var(--wo-white); }
.wo-alert .btn-close,
.wo-alert .wo-alert-close {
  position: absolute;
  top: var(--wo-space-3);
  right: var(--wo-space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
  color: var(--wo-white);
  padding: 4px;
  transition: opacity var(--wo-duration-1);
}
.wo-alert .btn-close:hover,
.wo-alert .wo-alert-close:hover { opacity: 1; }

.wo-alert-success { border-color: rgba(74, 143, 91, 0.6); }
.wo-alert-success .wo-alert-icon { background: var(--wo-success); }
.wo-alert-success .wo-alert-title { color: var(--wo-success-fg); }

.wo-alert-danger,
.wo-alert-error { border-color: rgba(208, 74, 58, 0.6); }
.wo-alert-danger .wo-alert-icon,
.wo-alert-error  .wo-alert-icon { background: var(--wo-danger); }
.wo-alert-danger .wo-alert-title,
.wo-alert-error  .wo-alert-title { color: var(--wo-danger-fg); }

.wo-alert-warning { border-color: rgba(200, 153, 64, 0.6); }
.wo-alert-warning .wo-alert-icon {
  background: var(--wo-warning);
  color: var(--wo-bg);
}
.wo-alert-warning .wo-alert-title { color: var(--wo-warning-fg); }

.wo-alert-info { border-color: rgba(90, 138, 168, 0.6); }
.wo-alert-info .wo-alert-icon { background: var(--wo-info); }
.wo-alert-info .wo-alert-title { color: var(--wo-info-fg); }

/* ---- Badges ---- */
.wo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wo-space-1);
  padding: 5px 10px;
  border-radius: var(--wo-radius-sm);
  font-family: var(--wo-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid;
  background: transparent;
}

.wo-badge-paid    { background: rgba(74, 143, 91, 0.15);  color: var(--wo-success-fg); border-color: rgba(74, 143, 91, 0.4); }
.wo-badge-pending { background: rgba(200, 153, 64, 0.15); color: var(--wo-warning-fg); border-color: rgba(200, 153, 64, 0.4); }
.wo-badge-cancel,
.wo-badge-rejected{ background: rgba(208, 74, 58, 0.15);  color: var(--wo-danger-fg);  border-color: rgba(208, 74, 58, 0.4); }
.wo-badge-wait    { background: rgba(90, 138, 168, 0.15); color: var(--wo-info-fg);    border-color: rgba(90, 138, 168, 0.4); }

.wo-badge-event   { background: rgba(251, 190, 81, 0.15); color: var(--wo-event);      border-color: rgba(251, 190, 81, 0.4); }
.wo-badge-system  { background: rgba(235, 95, 56, 0.15);  color: var(--wo-primary);    border-color: rgba(235, 95, 56, 0.4); }
.wo-badge-soldout { background: var(--wo-gray-soft);      color: var(--wo-gray);       border-color: var(--wo-gray-soft); }

.wo-badge-pill { border-radius: var(--wo-radius-pill); }

/* ---- Hero ---- */
.wo-hero {
  padding: var(--wo-space-8) var(--wo-page-padding) var(--wo-space-7);
  background:
    radial-gradient(ellipse at 70% 20%, rgba(251, 190, 81, 0.18), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(235, 95, 56, 0.15), transparent 60%),
    var(--wo-bg);
  position: relative;
  overflow: hidden;
  border-radius: var(--wo-radius-xl);
  margin-bottom: var(--wo-space-6);
}
.wo-hero-inner { max-width: 720px; }
.wo-hero h1 {
  font-family: var(--wo-font-display);
  font-weight: 800;
  font-size: var(--wo-text-display-xl);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wo-white);
  margin: 0 0 var(--wo-space-4);
}
.wo-hero h1 .wo-hero-accent { color: var(--wo-event); }
.wo-hero p {
  font-size: var(--wo-text-md);
  line-height: 1.55;
  color: var(--wo-cream);
  margin: 0 auto var(--wo-space-5);
  max-width: 540px;
}
.wo-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wo-space-3);
}

@media (max-width: 575.98px) {
  .wo-hero { padding: var(--wo-space-6) var(--wo-space-4) var(--wo-space-5); border-radius: var(--wo-radius-lg); }
}

/* ---- Sidebar sticky / sticky CTA ---- */
.wo-sidebar-cta {
  position: sticky;
  top: 110px;
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  padding: var(--wo-space-4);
}
@media (max-width: 767.98px) {
  .wo-sidebar-cta {
    position: sticky;
    top: auto;
    bottom: 0;
    margin: var(--wo-space-4) calc(var(--wo-page-padding) * -1) 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 50;
  }
}

/* ---- Tabs ---- */
.wo-tabs {
  display: flex;
  gap: var(--wo-space-5);
  border-bottom: 1px solid var(--wo-gray-soft);
  margin-bottom: var(--wo-space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wo-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--wo-font-body);
  font-weight: 600;
  font-size: var(--wo-text-sm);
  color: var(--wo-gray);
  padding: var(--wo-space-3) 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--wo-duration-1);
}
.wo-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--wo-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--wo-duration-2) var(--wo-ease);
}
.wo-tab:hover { color: var(--wo-cream); }
.wo-tab.is-active { color: var(--wo-primary); }
.wo-tab.is-active::after { transform: scaleX(1); }

/* ---- Empty state ---- */
.wo-empty {
  text-align: center;
  padding: var(--wo-space-7) var(--wo-space-4);
  color: var(--wo-gray);
}
.wo-empty-icon {
  font-size: 48px;
  color: var(--wo-gray);
  opacity: 0.5;
  margin-bottom: var(--wo-space-4);
}
.wo-empty-title {
  font-family: var(--wo-font-display);
  font-weight: 700;
  font-size: var(--wo-text-display-sm);
  color: var(--wo-cream);
  margin: 0 0 var(--wo-space-2);
}
.wo-empty-msg {
  font-family: var(--wo-font-body);
  font-size: var(--wo-text-sm);
  color: var(--wo-gray);
  margin-bottom: var(--wo-space-5);
  line-height: 1.55;
}

/* ---- Skeleton ---- */
.wo-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--wo-bg-elev) 0%,
    rgba(248, 235, 203, 0.05) 50%,
    var(--wo-bg-elev) 100%);
  background-size: 200% 100%;
  border-radius: var(--wo-radius-sm);
  animation: wo-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes wo-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   4. UTILITIES
   ========================================================= */
.wo-text-primary { color: var(--wo-primary) !important; }
.wo-text-event   { color: var(--wo-event) !important; }
.wo-text-cream   { color: var(--wo-cream) !important; }
.wo-text-gray    { color: var(--wo-gray) !important; }
.wo-text-success { color: var(--wo-success-fg) !important; }
.wo-text-danger  { color: var(--wo-danger-fg) !important; }
.wo-text-warning { color: var(--wo-warning-fg) !important; }

/* Override classi Bootstrap gray/muted — sfondo scuro richiede testo chiaro */
.text-muted,
.text-body-secondary,
.text-secondary { color: #e0e0e0 !important; }
.text-body-tertiary { color: #d0d0d0 !important; }
small, .small { color: inherit; }

.wo-bg-elev { background-color: var(--wo-bg-elev) !important; }
.wo-bg-soft { background-color: var(--wo-bg-soft) !important; }

.wo-display-font { font-family: var(--wo-font-display) !important; }

.wo-fs-display-xl { font-size: var(--wo-text-display-xl); }
.wo-fs-display-lg { font-size: var(--wo-text-display-lg); }
.wo-fs-display    { font-size: var(--wo-text-display); }
.wo-fs-display-sm { font-size: var(--wo-text-display-sm); }

.wo-tracking-tight { letter-spacing: -0.02em; }
.wo-tracking-wide  { letter-spacing: 0.08em; }

.wo-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

.wo-divider {
  height: 1px;
  background: var(--wo-gray-soft);
  border: none;
  margin: var(--wo-space-5) 0;
}

/* =========================================================
   5. RIDIPINTURA BOOTSTRAP
   Sovrascritture mirate dei componenti BS che continuiamo a usare.
   ========================================================= */

/* Modal */
.modal-content {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-xl);
  box-shadow: var(--wo-shadow-pop);
  color: var(--wo-white);
}
.modal-header {
  border-bottom: none;
  padding: var(--wo-space-5) var(--wo-space-5) var(--wo-space-2);
}
.modal-header .modal-title {
  font-family: var(--wo-font-display);
  font-weight: 800;
  font-size: var(--wo-text-display-sm);
  color: var(--wo-white);
}
.modal-body { padding: var(--wo-space-2) var(--wo-space-5); color: #cfcfcf; }
.modal-footer {
  border-top: none;
  padding: var(--wo-space-4) var(--wo-space-5) var(--wo-space-5);
  gap: var(--wo-space-2);
}
.btn-close {
  filter: invert(1) brightness(0.8);
  opacity: 0.6;
}
.btn-close:hover { opacity: 1; }

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content {
    border-radius: var(--wo-radius-xl) var(--wo-radius-xl) 0 0;
  }
}

/* Dropdown */
.dropdown-menu {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-md);
  box-shadow: var(--wo-shadow-pop);
  z-index: 1050;
  min-width: max-content;
  padding: var(--wo-space-2);
}
.dropdown-item {
  color: var(--wo-white);
  border-radius: var(--wo-radius-sm);
  padding: 8px 12px;
  font-size: var(--wo-text-sm);
  transition: background var(--wo-duration-1);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--wo-gray-soft);
  color: var(--wo-cream);
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--wo-primary);
  color: var(--wo-white);
}
.dropdown-divider {
  border-top: 1px solid var(--wo-gray-soft);
  margin: var(--wo-space-2) 0;
}

/* Bootstrap form validation feedback */
.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback,
.invalid-feedback {
  color: var(--wo-danger-fg);
  font-size: var(--wo-text-xs);
  font-weight: 600;
  margin-top: var(--wo-space-2);
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--wo-danger);
  background-image: none;
}

/* Bootstrap forms (per i form ancora in form-control) */
.form-control,
.form-select {
  background-color: #303030;
  border: 1px solid #505050;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-radius: var(--wo-radius-sm);
  min-height: 48px;
  font-size: var(--wo-text-md);
  padding: 12px 14px;
}
.form-control:focus,
.form-select:focus {
  background-color: #303030;
  border-color: var(--wo-primary);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(235, 95, 56, 0.20);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--wo-bg-soft);
  color: var(--wo-gray);
  -webkit-text-fill-color: var(--wo-gray);
}
.form-control::placeholder { color: var(--wo-gray) !important; -webkit-text-fill-color: var(--wo-gray); }

/* Forza colore testo su tutti gli input/select/textarea — sovrascrive qualsiasi reset Bootstrap */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]),
select,
textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #303030;
}
input:not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder {
  color: #a0a0a0 !important;
  -webkit-text-fill-color: #a0a0a0 !important;
}

/* Fix autofill browser (Chrome/Safari sovrascrivono bg con bianco) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wo-white);
  -webkit-box-shadow: 0 0 0px 1000px var(--wo-bg-elev) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--wo-white);
}
.form-label {
  font-weight: 600;
  font-size: var(--wo-text-sm);
  color: var(--wo-cream);
}
.form-text { color: var(--wo-gray); font-size: var(--wo-text-xs); }

/* Bootstrap buttons (riskinati). I .wo-btn sono preferibili */
.btn {
  border-radius: var(--wo-radius-pill);
  font-weight: 600;
  font-size: var(--wo-text-sm);
  min-height: 44px;
  padding: 10px 20px;
  transition: transform var(--wo-duration-1) var(--wo-ease),
              box-shadow var(--wo-duration-1) var(--wo-ease);
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn-primary { background: var(--wo-primary); border-color: var(--wo-primary); }
.btn-primary:hover { background: var(--wo-primary-hi); border-color: var(--wo-primary-hi); }
.btn-warning { background: var(--wo-event); border-color: var(--wo-event); color: var(--wo-bg); }
.btn-warning:hover { background: var(--wo-event-hi); border-color: var(--wo-event-hi); color: var(--wo-bg); }
.btn-success { background: var(--wo-success); border-color: var(--wo-success); }
.btn-danger  { background: var(--wo-danger);  border-color: var(--wo-danger); }
.btn-info    { background: var(--wo-info);    border-color: var(--wo-info);    color: var(--wo-white); }
.btn-secondary {
  background: var(--wo-bg-elev);
  border-color: var(--wo-gray-soft);
  color: var(--wo-white);
}
.btn-secondary:hover { background: var(--wo-bg-elev); border-color: var(--wo-gray); color: var(--wo-white); }
.btn-outline-primary { color: var(--wo-primary); border-color: var(--wo-primary); }
.btn-outline-primary:hover { background: var(--wo-primary); border-color: var(--wo-primary); }

/* Bootstrap alerts (cosmetic — i nuovi flash useranno .wo-alert) */
.alert {
  background: var(--wo-bg);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-md);
  color: var(--wo-white);
  padding: var(--wo-space-3) var(--wo-space-4);
}
.alert-success { border-color: rgba(74, 143, 91, 0.6); color: var(--wo-success-fg); }
.alert-danger,
.alert-error   { border-color: rgba(208, 74, 58, 0.6); color: var(--wo-danger-fg); }
.alert-warning { border-color: rgba(200, 153, 64, 0.6); color: var(--wo-warning-fg); }
.alert-info    { border-color: rgba(90, 138, 168, 0.6); color: var(--wo-info-fg); }

/* Tabelle generiche */
.table { color: var(--wo-white); }
.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--wo-white);
  border-bottom-color: var(--wo-gray-soft);
}
.table-dark { --bs-table-bg: var(--wo-bg-elev); --bs-table-color: var(--wo-white); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--wo-white);
}

/* =========================================================
   6. LEGACY BRIDGE
   Queste classi sono ancora referenziate dai template HTML
   esistenti. Le ridipingiamo coi token nuovi così la transizione
   è graduale: nessun template si rompe, ma tutti respirano subito
   la nuova palette.
   ========================================================= */

/* Card vecchio stile (manteniamo, era ovunque) */
.card-custom {
  background: var(--wo-bg-elev);
  border: 1px solid var(--wo-gray-soft);
  border-radius: var(--wo-radius-lg);
  box-shadow: var(--wo-shadow-card);
  overflow: hidden;
}

/* Glassmorphism navbar — tolto effetto blur (lento Safari iOS),
   rimane fondo solido. Ritocchi cromatici. */
.bg-glass {
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wo-gray-soft);
}
@media (max-width: 991.98px) {
  .bg-glass {
    background: var(--wo-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Navbar comportamento + dimensioni */
nav.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1030;
  transition: background-color var(--wo-duration-3) var(--wo-ease),
              min-height var(--wo-duration-3) var(--wo-ease),
              padding var(--wo-duration-3) var(--wo-ease);
}
#mainNavbar {
  min-height: var(--wo-navbar-h-desktop);
  padding-top: 5px;
  padding-bottom: 5px;
}
#mainNavbar.navbar-scrolled {
  min-height: var(--wo-navbar-h-mobile);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: rgba(20, 20, 20, 0.96);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.transition-logo { transition: height var(--wo-duration-3) var(--wo-ease); object-fit: contain; }

@media (max-width: 991.98px) {
  #mainNavbar { min-height: var(--wo-navbar-h-mobile); }
  .navbar-brand img { height: 45px; width: auto; }
  .navbar-brand span { font-size: var(--wo-text-md); }
  .navbar-collapse {
    background-color: var(--wo-bg-elev);
    margin-top: 10px;
    padding: var(--wo-space-3) var(--wo-space-4);
    border-radius: var(--wo-radius-lg);
    border: 1px solid var(--wo-gray-soft);
    box-shadow: var(--wo-shadow-pop);
    max-height: 80vh;
    overflow-y: auto;
  }
  .navbar-nav .dropdown-menu {
    display: block !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0;
    padding: 0 0 var(--wo-space-2);
  }
  .navbar-nav .nav-link.dropdown-toggle {
    cursor: default;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--wo-text-xs);
    letter-spacing: 0.1em;
    color: var(--wo-gray) !important;
    pointer-events: none;
    padding-bottom: 3px;
    margin-top: var(--wo-space-2);
  }
  .navbar-nav .dropdown-toggle::after { display: none !important; }
  .navbar-nav .dropdown-item {
    padding: 6px 0;
    color: var(--wo-white) !important;
    font-size: var(--wo-text-sm);
    border-radius: 0;
  }
  .navbar-nav .dropdown-item:hover {
    background: transparent;
    color: var(--wo-event) !important;
  }
  .wo-nav-tickets { order: -1; }
  .wo-nav-tickets .nav-link { padding: 6px 0 !important; }
}
@media (max-width: 400px) {
  .navbar-brand span { display: none; }
}

.navbar-nav .dropdown-toggle::after { display: none !important; content: none !important; }

.custom-nav-link {
  transition: color var(--wo-duration-1) var(--wo-ease);
  font-size: var(--wo-text-md) !important;
  font-weight: 500 !important;
  color: var(--wo-white) !important;
}
.custom-nav-link:hover { color: var(--wo-event) !important; }

.cart-icon-rotate {
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform var(--wo-duration-2) var(--wo-ease),
              color var(--wo-duration-2) var(--wo-ease);
  color: var(--wo-primary);
}
.nav-link:hover .cart-icon-rotate {
  transform: rotate(-20deg) scale(1.1);
  color: var(--wo-event) !important;
}

.hover-warning { transition: color var(--wo-duration-1); }
.hover-warning:hover { color: var(--wo-event) !important; text-decoration: underline !important; }
.hover-white { transition: color var(--wo-duration-1); }
.hover-white:hover { color: var(--wo-white) !important; }

/* Map overlay già presente, lo manteniamo */
.map-container {
  min-height: 200px;
  background-color: var(--wo-bg-elev);
}
.map-overlay-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  transition: background var(--wo-duration-2);
}
.map-overlay-link:hover { background: rgba(0, 0, 0, 0.1); }

@media (min-width: 992px) {
  .map-container,
  .map-container iframe {
    height: 100% !important;
    min-height: 100%;
  }
}

/* Cookie banner */
#gdpr-cookie-banner {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 2000;
  transition: transform 0.5s var(--wo-ease), opacity 0.5s var(--wo-ease);
}
.cookie-banner-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.cookie-banner-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* =========================================================
   Tabella responsive "card-style" su mobile (< 768 px)
   Manteniamo l'utility esistente, riskinata.
   ========================================================= */
@media (max-width: 767.98px) {
  .table-mobile-cards { border: none !important; }
  .table-mobile-cards thead { display: none; }
  .table-mobile-cards tr {
    display: block;
    margin-bottom: var(--wo-space-4);
    background-color: var(--wo-bg-elev) !important;
    border: 1px solid var(--wo-gray-soft) !important;
    border-radius: var(--wo-radius-md);
    padding: var(--wo-space-1);
    box-shadow: var(--wo-shadow-card);
  }
  .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--wo-gray-soft) !important;
    padding: var(--wo-space-3) var(--wo-space-3) !important;
    text-align: right !important;
    background: transparent !important;
    color: var(--wo-white) !important;
  }
  .table-mobile-cards td:last-child {
    border-bottom: none !important;
    justify-content: flex-end;
  }
  .table-mobile-cards td::before {
    content: attr(data-label);
    font-family: var(--wo-font-body);
    font-weight: 700;
    color: var(--wo-gray);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: left;
    padding-right: var(--wo-space-4);
    flex-shrink: 0;
  }
  .table-mobile-cards td.text-start-mobile {
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important;
  }
  .table-mobile-cards td.text-start-mobile::before { margin-bottom: var(--wo-space-1); }
}

/* Country picker library compat */
.iti__country-list {
  background: var(--wo-bg-elev) !important;
  color: var(--wo-white) !important;
}
@media (max-width: 991px) {
  .iti__country-list {
    max-width: 300px;
    white-space: normal;
  }
}
.iti__country:hover { background: var(--wo-gray-soft) !important; }

/* Card evento homepage */
.event-card {
  border: 1px solid var(--wo-gray-soft);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--wo-primary);
}