/* ============================================================
   EQUESTRIAN HUB — Liquid Glass Design System
   Palette: Bianco / Nero / Grigi
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --white:        #ffffff;
  --off-white:    #f5f5f7;
  --gray-50:      #fafafa;
  --gray-100:     #f0f0f0;
  --gray-200:     #e0e0e0;
  --gray-300:     #c8c8c8;
  --gray-400:     #a0a0a0;
  --gray-500:     #787878;
  --gray-600:     #585858;
  --gray-700:     #383838;
  --gray-800:     #202020;
  --gray-900:     #141414;
  --black:        #0f0f0f;

  /* Oro/ocra dal logo del cavallo — colore d'accento */
  --gold:         #c8a35d;
  --gold-light:   #e2c98a;
  --gold-dark:    #9c7c3f;
  --gold-bg:      rgba(200,163,93,0.14);
  --gold-bg-strong: rgba(200,163,93,0.22);
  --gold-border:  rgba(200,163,93,0.45);

  /* Verde bosco — accento secondario, esperienza natura */
  --forest:       #6f8f5a;
  --forest-bg:    rgba(111,143,90,0.14);
  --forest-border: rgba(111,143,90,0.4);

  --surface-1:    #1a1a1a;
  --surface-2:    #232323;

  --glass-bg:           rgba(255,255,255,0.08);
  --glass-bg-strong:    rgba(255,255,255,0.14);
  --glass-border:       rgba(255,255,255,0.18);
  --glass-highlight:    rgba(255,255,255,0.28);
  --glass-shadow-1:     rgba(0,0,0,0.55);
  --glass-shadow-2:     rgba(0,0,0,0.30);
  --glass-shadow-3:     rgba(255,255,255,0.04);

  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  28px;
  --radius-xl:  36px;

  --font-system: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;

  --transition: 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-system);
  background: var(--black);
  color: var(--white);
  min-height: 100dvh;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%,  rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(255,255,255,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-700); border-radius: 3px; }

/* ── Liquid Glass Card ───────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 0 inset var(--glass-highlight),
    0 32px 64px var(--glass-shadow-1),
    0 8px 24px var(--glass-shadow-2),
    0 1px 0 var(--glass-shadow-3);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
  pointer-events: none;
}

.glass-card-inner {
  padding: 28px 32px;
}

/* Variante più scura */
.glass-card-dark {
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.10);
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 16px 10px;
  height: calc(58px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  gap: 8px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo immagine reale al posto del SVG cavallino */
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-text {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Pulsante Indietro ───────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-system);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-300);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 20px;
}

.btn-back:hover {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  transform: translateX(-2px);
}

.btn-back svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-system);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  color: var(--white);
  text-decoration: none;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(160deg, #585858 0%, #202020 100%);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 inset rgba(255,255,255,0.12);
}

.btn-primary:hover {
  background: linear-gradient(160deg, var(--gray-500) 0%, var(--gray-700) 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 1px 0 inset rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-glass {
  background: linear-gradient(160deg, #585858 0%, #202020 100%);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 inset rgba(255,255,255,0.12);
}

.btn-glass:hover {
  background: linear-gradient(160deg, #686868 0%, #303030 100%);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-glass:active { background: linear-gradient(160deg, #484848 0%, #181818 100%); }

/* Safari iOS: i <label class="btn"> non ereditano appearance:none — forza colore testo */
label.btn { color: var(--white); }
label.btn-glass { color: var(--white); }

.btn-danger {
  background: linear-gradient(160deg, #6b2020 0%, #3d1010 100%);
  color: #ffaaaa;
  border: 1px solid rgba(255,100,100,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.btn-danger:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-sm { padding: 7px 14px; font-size: 0.8rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 9px; border-radius: var(--radius-sm); }

/* Pulsante biometrico speciale */
.btn-biometric {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  color: var(--gray-200);
  border: 1px solid rgba(160,160,200,0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 0 inset rgba(200,200,255,0.08);
  font-size: 0.9rem;
  padding: 12px 24px;
}

.btn-biometric:hover {
  background: linear-gradient(160deg, #1e1e38 0%, #1a2540 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

/* ── Forms ───────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-system);
  font-size: 0.9rem;
  padding: 11px 14px;
  transition: var(--transition);
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--gray-600); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

.form-select option { background: var(--gray-900); color: var(--white); }

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Checkbox personalizzata */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}

.form-check-input {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--gray-500);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--gray-400);
}

.form-check-label {
  font-size: 0.875rem;
  color: var(--gray-300);
  line-height: 1.4;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-error {
  font-size: 0.78rem;
  color: #ff8080;
  margin-top: 4px;
}

/* ── Tab Switcher ────────────────────────────────────────── */
.tab-switcher {
  display: flex;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--gray-400);
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn.active {
  background: var(--glass-bg-strong);
  color: var(--white);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--gray-600);
  font-size: 0.78rem;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Main Layout ─────────────────────────────────────────── */
.main-content {
  padding-top: calc(60px + env(safe-area-inset-top));
  min-height: 100dvh;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.page-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* ── Section Headers ─────────────────────────────────────── */
.section-header {
  margin-bottom: 28px;
}

.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 6px;
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--gray-400);
}

/* ── Info Box Struttura ──────────────────────────────────── */
.info-box {
  padding: 24px 28px;
  margin-bottom: 36px;
}

.info-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.info-item-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.info-item-value {
  font-size: 0.9rem;
  color: var(--gray-200);
  font-weight: 500;
}

/* ── Cards Grid ──────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.route-card {
  padding: 20px 22px;
  cursor: pointer;
  transition: var(--transition);
}

.route-card:hover { transform: translateY(-2px); }
.route-card.selected { border-color: rgba(255,255,255,0.4); }

.route-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.route-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
  background: rgba(255,255,255,0.08);
  color: var(--gray-300);
  border: 1px solid rgba(255,255,255,0.10);
}

.badge-principiante { background: var(--success-2-soft); color: var(--success-2); border-color: var(--success-2-line); }
.badge-intermedio   { background: var(--gold-bg);         color: var(--gold);      border-color: var(--gold-border); }
.badge-esperto       { background: rgba(192,57,43,0.14);   color: #e08888;          border-color: rgba(192,57,43,0.35); }

.route-card-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-top: 10px;
}

/* ── Table ───────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--gray-200);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ── Status Badges ────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.status-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status-confermato  { background: rgba(80,180,80,0.12);  color: #80d880; }
.status-annullato   { background: rgba(200,80,80,0.12);  color: #e08080; }
.status-completato  { background: rgba(80,120,200,0.12); color: #80a8e0; }
.status-disponibile { background: rgba(80,180,80,0.12);  color: #80d880; }
.status-riposo      { background: rgba(200,160,80,0.12); color: #e0c878; }
.status-non_disponibile { background: rgba(200,80,80,0.12); color: #e08080; }

/* ── Flag alerts ─────────────────────────────────────────── */
.flag-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 2px;
}

.flag-minori   { background: rgba(200,150,80,0.15); color: #e0b870; border: 1px solid rgba(200,150,80,0.25); }
.flag-esigenze { background: rgba(200,80,80,0.15);  color: #e08080; border: 1px solid rgba(200,80,80,0.25); }
.flag-inglese  { background: rgba(80,120,200,0.15); color: #80a8e0; border: 1px solid rgba(80,120,200,0.25); }

/* ── Admin Panel Grid ─────────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.panel-card {
  padding: 24px;
}

.panel-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-300);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-card-title svg {
  width: 16px; height: 16px;
  color: var(--gray-500);
}

/* ── Club House: card-title, stats grid, admin table ───────── */
.card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-300);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.stat-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th, .admin-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.admin-table th {
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Toast Notifications ─────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
  max-width: 320px;
}

.toast-success { background: rgba(40,80,40,0.85); color: #90d890; border-color: rgba(80,180,80,0.25); }
.toast-error   { background: rgba(80,30,30,0.90); color: #e08080; border-color: rgba(200,80,80,0.25); }
.toast-info    { background: rgba(20,40,70,0.90); color: #80b0e0; border-color: rgba(80,140,200,0.25); }

@keyframes toastIn {
  from { opacity:0; transform: translateY(12px) scale(0.95); }
  to   { opacity:1; transform: translateY(0)    scale(1);    }
}

@keyframes toastOut {
  from { opacity:1; transform: translateY(0)    scale(1);    }
  to   { opacity:0; transform: translateY(12px) scale(0.95); }
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

.modal-box {
  width: 100%;
  max-width: 500px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 32px;
}

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: var(--transition);
}

.modal-close:hover { background: rgba(255,255,255,0.14); }
.modal-close svg { width: 14px; height: 14px; }

/* ── iOS Install Banner ──────────────────────────────────── */
.ios-banner {
  position: fixed;
  bottom: 20px; left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: 500;
  width: calc(100% - 40px);
  max-width: 400px;
  background: rgba(20,20,20,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  gap: 12px;
}

.ios-banner.hidden { display: none; }

.ios-banner-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.ios-banner-text {
  font-size: 0.8rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.inline-icon {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: middle;
  color: var(--gray-300);
}

.ios-banner-close {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ios-banner-close svg { width: 12px; height: 12px; }

/* ── Login / Register Panel ──────────────────────────────── */
.auth-wrap {
  min-height: calc(100dvh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 36px 32px;
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 28px;
}

/* ── Slot Grid ───────────────────────────────────────────── */
.slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.slot-chip {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: var(--transition);
  color: var(--gray-300);
}

.slot-chip:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.slot-chip.selected { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: var(--white); }
.slot-chip.full { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── Summary Box (prezzo) ────────────────────────────────── */
.summary-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 20px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--gray-400);
  padding: 4px 0;
}

.summary-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 8px;
}

/* ── Loading Spinner ─────────────────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(255,255,255,0.1);
  border-top-color: var(--gray-300);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 32px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  color: var(--gray-500);
  font-size: 0.85rem;
}

/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-500);
}

.empty-state svg {
  width: 40px; height: 40px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state p { font-size: 0.875rem; }

/* ── Empty State "Elegante" (box card centrato, con icona + CTA) ─── */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 0 inset var(--glass-highlight),
    0 24px 48px rgba(0,0,0,0.4);
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--gold-light);
}

.empty-state-icon svg {
  width: 28px;
  height: 28px;
}

.empty-state-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 6px;
}

.empty-state-card p {
  font-size: 0.85rem;
  color: var(--gray-300);
  margin: 0 0 24px;
  max-width: 340px;
}

.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-border);
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #1a1305;
  font-family: var(--font-system);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 20px var(--gold-bg-strong);
}

.empty-state-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--gold-bg-strong);
  filter: brightness(1.05);
}

.empty-state-cta:active { transform: translateY(0); }

.empty-state-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Segmented Control (filtri tipo "Da fare / Passate") ─────────── */
.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.segmented-item {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 9px 20px;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--gray-300);
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.segmented-item:hover { color: var(--white); }

.segmented-item.active {
  background: var(--gold);
  color: #1a1305;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(201,164,92,0.35);
}

@media (max-width: 480px) {
  .segmented-control { width: 100%; }
  .segmented-item { flex: 1; text-align: center; padding: 9px 12px; }
}

/* ── Code Display ────────────────────────────────────────── */
.code-display {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.95rem;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  letter-spacing: 0.08em;
  word-break: break-all;
  color: var(--gray-100);
  margin: 8px 0;
}

/* ── Availability Timeline ───────────────────────────────── */
.avail-list { display: flex; flex-direction: column; gap: 8px; }

.avail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.avail-time { font-weight: 600; color: var(--gray-100); }
.avail-date { color: var(--gray-400); font-size: 0.8rem; }

/* ── QR Code wrapper ─────────────────────────────────────── */
.qr-wrap {
  text-align: center;
  padding: 20px;
}

.qr-wrap img {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.10);
  max-width: 200px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .glass-card-inner { padding: 20px; }
  .auth-card { padding: 24px 20px; }
  .modal-box { padding: 24px; }
  .page, .page-wide { padding: 24px 16px 60px; }
  .navbar { padding: 0 16px; }
  .data-table th, .data-table td { padding: 10px 12px; }
}

@media (max-width: 380px) {
  .brand-text { font-size: 0.85rem; }
  .btn-sm { padding: 5px 10px; font-size: 0.75rem; }
}
/* ── Esigenze badge cliccabile ─────────────────────────── */
.flag-clickable {
  cursor: pointer;
  user-select: none;
  transition: opacity .15s, transform .15s;
}
.flag-clickable:hover { opacity: .82; transform: translateY(-1px); }

/* ── Popover esigenze ──────────────────────────────────── */
.esigenze-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  min-width: 220px;
  max-width: 300px;
  background: #1e1a14;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 0.82rem;
  color: var(--gray-300);
  white-space: normal;
  line-height: 1.5;
  animation: _popIn .15s ease;
}
@keyframes _popIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.esigenze-popover-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.esigenze-popover-body {
  color: var(--gray-200);
  font-size: 0.84rem;
}
.esigenze-popover-close {
  position: absolute;
  top: 7px; right: 9px;
  background: none; border: none;
  color: var(--gray-600);
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.esigenze-popover-close:hover { color: var(--gray-300); background: rgba(255,255,255,0.06); }

/* spinner (se non già definito) */
@keyframes _iuSpin { to { transform:rotate(360deg); } }
.ius { display:inline-block; width:11px; height:11px; border:1.5px solid rgba(255,255,255,0.18); border-top-color:var(--gray-400); border-radius:50%; animation:_iuSpin .65s linear infinite; vertical-align:middle; margin-right:4px; }

/* ── Upload widget (iuw/iuc/ium/iuo/ius) ── */
.iuw{display:flex;align-items:center;gap:14px;padding:12px 14px;background:rgba(255,255,255,0.03);border:1px dashed rgba(255,255,255,0.15);border-radius:12px}
.iuw:hover{background:rgba(255,255,255,0.055);border-color:rgba(255,255,255,0.24)}
.iuc{position:relative;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.13);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;cursor:pointer}
.iuc--sm{width:48px;height:48px}
.iuo{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .17s;pointer-events:none}
.iuc:hover .iuo{opacity:1}
.ium{flex:1;min-width:0}
@keyframes _iuSpin{to{transform:rotate(360deg)}}
.ius{display:inline-block;width:11px;height:11px;border:1.5px solid rgba(255,255,255,0.18);border-top-color:var(--gray-400);border-radius:50%;animation:_iuSpin .65s linear infinite;vertical-align:middle;margin-right:4px}
/* avatar tabella */
.h-av{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center top;border:1.5px solid rgba(255,255,255,0.12);display:block}
.h-av-ph{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.11);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--gray-500);user-select:none}
/* esigenze popover */
.flag-clickable{cursor:pointer;user-select:none;transition:opacity .15s,transform .15s}
.flag-clickable:hover{opacity:.82;transform:translateY(-1px)}
.esigenze-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:999;min-width:220px;max-width:300px;background:#1e1a14;border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:12px 14px;box-shadow:0 8px 32px rgba(0,0,0,0.55);font-size:0.82rem;color:var(--gray-300);white-space:normal;line-height:1.5;animation:_popIn .15s ease}
@keyframes _popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.esigenze-popover-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin-bottom:6px}
.esigenze-popover-body{color:var(--gray-200);font-size:0.84rem}
.esigenze-popover-close{position:absolute;top:7px;right:9px;background:none;border:none;color:var(--gray-600);font-size:0.8rem;cursor:pointer;padding:2px 4px;border-radius:4px}
.esigenze-popover-close:hover{color:var(--gray-300);background:rgba(255,255,255,0.06)}

/* ── Galleria pubblica ───────────────────────────────────────
   Desktop: griglia auto-fill
   Mobile ≤600px: slider orizzontale con scroll-snap
   ─────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

@media (max-width: 600px) {
  .gallery-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }
}

/* ── Galleria admin ──────────────────────────────────────────
   Griglia miniature con bottone elimina on-hover
   ─────────────────────────────────────────────────────────── */
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.gallery-admin-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.gallery-admin-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-admin-item {
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-admin-item:hover {
  transform: scale(1.03);
}

/* Checkmark di selezione — visibile solo quando selezionato o on hover */
.gallery-admin-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}

.gallery-admin-check svg {
  width: 10px;
  height: 10px;
  display: block;
}

.gallery-admin-item:hover .gallery-admin-check {
  opacity: 1;
}

/* Stato selezionato */
.gallery-admin-item.selected .gallery-admin-check {
  opacity: 1;
  background: rgba(255,255,255,0.9);
  border-color: var(--white);
}

.gallery-admin-item.selected .gallery-admin-check svg polyline {
  stroke: var(--black);
}

.gallery-admin-item.selected {
  box-shadow: 0 0 0 3px var(--white);
  transform: scale(1.03);
}

/* Su touch il checkmark è sempre visibile */
@media (hover: none) {
  .gallery-admin-check { opacity: 1; }
}

/* ── Galleria admin — drag & drop riordino ───────────────────── */
.gallery-admin-drag-handle {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 6px;
  padding: 4px 5px;
  cursor: grab;
  z-index: 3;
  line-height: 0;
  backdrop-filter: blur(4px);
  transition: opacity 0.15s;
}
.gallery-admin-drag-handle:active { cursor: grabbing; }

.gallery-admin-order-badge {
  display: none;
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 5px;
  padding: 2px 6px;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* Modalità riordino attiva */
#galAdminGrid.reorder-mode .gallery-admin-drag-handle  { display: flex; }
#galAdminGrid.reorder-mode .gallery-admin-order-badge  { display: block; }
#galAdminGrid.reorder-mode .gallery-admin-check        { display: none !important; }
#galAdminGrid.reorder-mode .gallery-admin-item         { cursor: grab; user-select: none; }
#galAdminGrid.reorder-mode .gallery-admin-item:active  { cursor: grabbing; }

/* Stato durante il drag */
.gallery-admin-item.dragging   { opacity: 0.3; }
.gallery-admin-item.drag-over  { outline: 2px solid var(--white); outline-offset: 2px; transform: scale(1.03); }

/* Hint riordino */
.gal-reorder-hint {
  font-size: 0.79rem;
  color: var(--gray-400);
  margin-bottom: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* ── Admin Nav Dropdown ──────────────────────────────────────── */
.admin-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 5px;
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.admin-nav-item {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 4px);
  background: transparent;
  color: var(--gray-100);
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-nav-item:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.admin-nav-item.active {
  background: var(--gold-bg-strong);
  color: var(--gold-light);
  border: 1px solid var(--gold-border);
  box-shadow: 0 2px 10px rgba(201,164,92,0.15);
}

.admin-nav-trigger.active {
  background: var(--gold-bg-strong);
  color: var(--gold-light);
  border: 1px solid var(--gold-border);
  box-shadow: 0 2px 10px rgba(201,164,92,0.15);
}

.dropdown-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s;
}

.admin-nav-dropdown {
  position: relative;
  flex-shrink: 0;
}

.admin-nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.admin-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: rgba(20,20,20,0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  padding: 4px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}

/* Variante usata su mobile/quando la nav è scrollabile: position:fixed
   invece di absolute, con top/left calcolati via JS (toggleAdminDropdown).
   Necessaria perché un antenato con overflow-x:auto forza il clipping
   anche sull'asse verticale anche se overflow-y è "visible" — quindi un
   menu absolute dentro quel contenitore verrebbe tagliato. position:fixed
   esce completamente dal flusso e non dipende più dall'overflow del
   genitore, lasciando lo scroll orizzontale della nav sempre funzionante. */
.admin-nav-menu.admin-nav-menu--fixed {
  position: fixed;
  top: var(--dropdown-top, auto);
  left: var(--dropdown-left, auto);
}

.admin-nav-dropdown.open .admin-nav-menu,
#_adminFloatingMenu {
  display: flex;
}

.admin-nav-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: calc(var(--radius-sm) - 4px);
  background: transparent;
  color: var(--gray-100);
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.admin-nav-menu-item:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

.admin-nav-menu-item.active {
  background: var(--gold-bg-strong);
  color: var(--gold-light);
}

/* indicatore di scroll: piccola sfumatura ai bordi quando la nav è scrollabile */
.admin-nav::-webkit-scrollbar { height: 4px; }
.admin-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

@media (max-width: 600px) {
  .admin-nav {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
  }
  .admin-nav-item {
    font-size: 0.80rem;
    padding: 8px 12px;
  }
  .admin-nav-menu {
    min-width: 150px;
  }
  /* Su mobile il menu usa position:fixed via JS — z-index alto per stare
     sopra qualsiasi contenuto scrollabile */
  .admin-nav-menu.admin-nav-menu--fixed {
    z-index: 9999;
  }
}
/* ── Hamburger Menu ──────────────────────────────────────────── */
.hamburger-wrap {
  position: relative;
  flex-shrink: 0;
}

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.12); }

.hamburger-btn span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--gray-300);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s, width 0.22s;
  transform-origin: center;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.hamburger-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(14,14,14,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  padding: 6px;
  z-index: 300;
  gap: 2px;
}
.hamburger-menu.open { display: flex; }

.hamburger-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 4px);
  background: transparent;
  color: var(--gray-300);
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.hamburger-item:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.hamburger-item.hamburger-danger { color: #ff6b6b; }
.hamburger-item.hamburger-danger:hover { background: rgba(255,80,80,0.1); }

.hamburger-switch { position: relative; padding-left: 12px; }
.hamburger-switch.active {
  background: var(--glass-bg-strong);
  color: var(--white);
}
.hamburger-switch.active::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--white);
  border-radius: 2px;
}

.hamburger-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 4px 0;
}
.hamburger-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding: 4px 12px 2px;
}
.hamburger-user {
  font-size: 0.82rem;
  color: var(--gray-400);
  padding: 2px 12px 6px;
}

/* ── Dual-role banner ────────────────────────────────────────── */
.dual-role-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--gray-300);
  flex-wrap: wrap;
}

/* ── WhatsApp link ───────────────────────────────────────────── */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #25d366;
  text-decoration: none;
  font-family: monospace;
  font-size: 0.85em;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.wa-link:hover { opacity: 0.75; }
.wa-icon { flex-shrink: 0; }
/* ── Mappa struttura (Leaflet / OpenStreetMap) ───────────────
   Nascosta di default; JS la mostra solo se lat/lng sono nel DB
   ─────────────────────────────────────────────────────────── */
.structure-map {
  display: none;
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--glass-border);
}

@media (min-width: 600px) {
  .structure-map { height: 340px; }
}

/* Leaflet z-index sotto la navbar */
.leaflet-top { z-index: 400 !important; }

/* Popup tema scuro — !important necessario perché leaflet.css viene
   iniettato dinamicamente DOPO questo file (solo quando la mappa viene
   inizializzata), quindi vincerebbe altrimenti per ordine di cascata
   anche a parità di specificità, sovrascrivendo questo tema scuro con
   lo stile bianco di default di Leaflet. */
.leaflet-popup-content-wrapper {
  background: #1a1a1a !important;
  color: #e5e5e5 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
  border-radius: 10px !important;
}
.leaflet-popup-tip { background: #1a1a1a !important; }
.leaflet-popup-content { font-size: 0.88rem; margin: 10px 14px; }
.leaflet-popup-content a { color: var(--gold) !important; }
.leaflet-popup-close-button { color: #e5e5e5 !important; }

/* ── Bottone CTA "Prenota Ora" ───────────────────────────────── */
.route-card {
  display: flex;
  flex-direction: column;
}

.btn-prenota {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0.62rem 1rem;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-prenota:hover,
.btn-prenota:focus-visible {
  background: var(--gold-bg-strong);
  border-color: var(--gold-border);
  outline: none;
  transform: translateY(-1px);
}

.btn-prenota:active { transform: scale(0.98); }

/* ── Recensioni ──────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.review-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-300);
  flex-shrink: 0;
}

.review-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
}

.review-stars {
  font-size: 0.82rem;
  letter-spacing: 2px;
  color: var(--gold);
}

.review-text {
  font-size: 0.82rem;
  color: var(--gray-400);
  line-height: 1.65;
  margin: 0;
}

/* ── FAQ Accordion ───────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq-item.open {
  border-color: var(--glass-highlight);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: var(--font-system);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.faq-question:hover { color: var(--gray-100); }

.faq-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-500);
  transition: transform var(--transition), color var(--transition);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--gray-300);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1);
}

.faq-answer-inner {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 0.9rem;
  font-size: 0.83rem;
  color: var(--gray-400);
  line-height: 1.7;
}

/* ── Gallery Slider ──────────────────────────────────────────── */
.gallery-slider-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gallery-track {
  display: flex;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

.gallery-slide {
  min-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--transition);
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  z-index: 2;
  transition: background var(--transition);
}

.gallery-btn:hover { background: rgba(0,0,0,0.78); }
.gallery-btn-prev  { left: 12px; }
.gallery-btn-next  { right: 12px; }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.gallery-dot.active {
  background: var(--white);
  transform: scale(1.35);
}

@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   FIX MAPPA MOBILE — overlay tap-to-unlock
   ============================================================ */
.map-touch-overlay {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}

.map-touch-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  padding: 10px 18px;
  background: rgba(20,20,20,0.78);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* ============================================================
   FORM RECENSIONE
   ============================================================ */
.review-form-wrap {
  max-width: 520px;
}

/* Star picker */
.star-picker {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--gray-600, #444);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
}

.star-btn.active,
.star-btn.hover {
  color: var(--gold);
}

.star-btn:active { transform: scale(0.9); }

/* Feedback messaggi form */
.form-feedback {
  font-size: 0.84rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.form-feedback-ok {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.25);
}

.form-feedback-err {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.22);
}

/* ── Fix mappa mobile: overlay tap-to-unlock (vedi anche la versione
   consolidata sopra, ".map-touch-overlay" — questa era una seconda
   definizione duplicata, rimossa per evitare il doppio strato scuro) ── */

/* ── Star picker recensioni ──────────────────────────────────── */
.star-picker {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.star-btn {
  background: none;
  border: none;
  font-size: 1.7rem;
  color: var(--gray-600, #555);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.12s, transform 0.1s;
}
.star-btn.active,
.star-btn.hover { color: var(--gold); }
.star-btn:active { transform: scale(0.88); }

/* ── Feedback form ───────────────────────────────────────────── */
.form-feedback {
  font-size: 0.83rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.form-feedback-ok {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.25);
}
.form-feedback-err {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.22);
}

/* ============================================================
   HOME PAGE — BOX COMPATTI
   ============================================================ */

/* Box contenitore generico con bordo e padding */
.home-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}

.home-box-header {
  margin-bottom: 16px;
}

.home-box-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.home-box-subtitle {
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* Due colonne affiancate su desktop (recensione + newsletter) */
.home-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .home-two-col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PERCORSI — layout compatto a lista
   ============================================================ */
.routes-compact-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-compact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--glass-bg-strong, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.route-compact-card:hover {
  border-color: var(--glass-highlight, rgba(255,255,255,0.18));
  background: rgba(255,255,255,0.07);
}

.route-compact-card.selected {
  border-color: var(--accent, var(--gold));
  background: rgba(201,169,110,0.07);
}

.route-compact-left {
  flex: 1;
  min-width: 0;
}

.route-compact-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 5px;
}

.route-compact-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.route-compact-desc {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.route-compact-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Adatta btn-prenota al layout compatto */
.route-compact-right .btn-prenota {
  width: auto;
  margin-top: 0;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .route-compact-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .route-compact-right {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
  .route-compact-desc {
    max-width: 100%;
    white-space: normal;
  }
}

/* ============================================================
   SICUREZZA ACCOUNT — stili aggiuntivi
   Riusa le variabili e classi già esistenti (--glass-*, --gray-*,
   --radius-sm, .form-input, .glass-card, .panel-card-title) per
   restare coerente col resto dell'app; qui sotto solo le poche
   cose nuove: campo password con occhio, barra di forza, messaggio
   di mismatch.
   ============================================================ */

.security-card-title {
  margin-bottom: 6px;
}

.security-card-hint {
  font-size: 0.82rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Campo password con bottone "occhio" per mostrare/nascondere */
.pw-field {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-field .form-input { padding-right: 44px; }

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: var(--transition, 0.2s ease);
}

.pw-toggle:hover  { color: var(--gray-300); background: rgba(255,255,255,0.06); }
.pw-toggle-active { color: var(--white); }

/* Barra forza password */
.pw-strength {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  margin-top: 8px;
  overflow: hidden;
}

.pw-strength span {
  display: block;
  height: 100%;
  width: 0%;
  background: transparent;
  transition: width 0.25s ease, background 0.25s ease;
  border-radius: 4px;
}

.pw-hint {
  font-size: 0.74rem;
  color: var(--gray-500);
  margin-top: 5px;
  min-height: 1em;
}

/* Nota: .form-error è già definita più sopra nel file (stessa
   funzione: messaggio di errore inline sotto un campo form),
   quindi qui non viene ridefinita. */

/* Responsive: la card si comporta già come .glass-card-inner,
   qui solo piccoli aggiustamenti per schermi molto piccoli */
@media (max-width: 480px) {
  .security-card-hint { font-size: 0.78rem; }
}

/* ============================================================
   HOME — HERO BENTO (Info Struttura + Mappa + Foto)
   Estende il design system esistente (var(--gold), var(--gray-*),
   var(--radius-*)) con i nuovi accenti semantici oliva/successo.
   ============================================================ */
:root {
  --olive:        #5c6b3c;
  --olive-soft:   rgba(92,107,60,0.16);
  --olive-line:   rgba(92,107,60,0.55);
  --success-2:    #4a8a55;
  --success-2-soft: rgba(74,138,85,0.14);
  --success-2-line: rgba(74,138,85,0.42);
}

.hero-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-cell {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-cell--identity {
  border-top: 2px solid var(--olive);
  position: relative;
  isolation: isolate; /* contiene lo z-index dello sfondo dentro questa cella */
}
.hero-cell--identity.has-bg-photo {
  min-height: 240px;
}
@media (max-width: 600px) {
  .hero-cell--identity.has-bg-photo { min-height: 300px; }
}

/* Foto hero come sfondo a piena cella (opzionale). Se l'admin non ha
   caricato nulla, .hero-bg-photo non viene renderizzata e la cella
   resta sul background glass standard, senza spazio vuoto. */
.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Overlay scuro sfumato: necessario per la leggibilità del testo
   chiaro sopra la foto, non decorativo — più scuro in basso dove
   si concentra il testo, quasi trasparente in alto */
.hero-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0.62) 35%, rgba(6,6,6,0.96) 100%);
}

/* Quando la cella ha foto di sfondo, il contenuto testuale sta sopra
   l'overlay ed è sempre chiaro, indipendentemente dal tema */
.hero-cell--identity.has-bg-photo {
  color: var(--white);
}
.hero-cell--identity.has-bg-photo .hero-eyebrow,
.hero-cell--identity.has-bg-photo .hero-info-label {
  color: rgba(255,255,255,0.65);
}
.hero-cell--identity.has-bg-photo .hero-info-value {
  color: rgba(255,255,255,0.92);
}
.hero-cell--identity.has-bg-photo .hero-name {
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.hero-cell--identity.has-bg-photo .hero-info-value {
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-cell--identity .hero-eyebrow,
.hero-cell--identity .hero-identity-row,
.hero-cell--identity .hero-info-grid,
.hero-cell--identity .hero-hours-row {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.hero-identity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.hero-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-border);
  flex-shrink: 0;
}

.hero-logo-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--olive-soft);
  border: 2px solid var(--olive-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--olive);
  flex-shrink: 0;
}
.hero-cell--identity.has-bg-photo .hero-logo-fallback,
.hero-cell--identity.has-bg-photo .hero-logo {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.hero-name {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.25;
}

.hero-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-top: auto;
}

.hero-info-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.hero-info-value {
  font-size: 0.88rem;
  color: var(--gray-200);
  font-weight: 500;
  line-height: 1.4;
}

.hero-info-grid--main {
  margin-top: auto;
  margin-bottom: 0;
}

/* Orari: riga propria a piena larghezza, separata dal resto dei
   contatti — evita che una stringa lunga si schiacci in colonna */
.hero-hours-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-cell--identity.has-bg-photo .hero-hours-row {
  border-top-color: rgba(255,255,255,0.18);
}
.hero-hours-row .hero-info-label { margin-bottom: 0; white-space: nowrap; }
.hero-hours-row .hero-info-value { flex: 1; min-width: 0; }

/* ── Cella mappa ─────────────────────────────────────────── */
.hero-cell--map {
  padding: 0;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

.hero-map-canvas {
  width: 100%;
  height: 220px;
  flex: none;
}

.hero-map-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-map-coords {
  font-size: 0.74rem;
  color: var(--gray-500);
}

.btn-hero-maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.btn-hero-maps:hover {
  background: var(--gold-bg-strong);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .hero-cell:not(.hero-cell--map) { padding: 20px 20px; }
  .hero-map-canvas { height: 180px; }
}

/* ============================================================
   HOME BOX — varianti a bordo tematico (stesso linguaggio
   della hero bento: un filo di colore, mai sfondo pieno)
   ============================================================ */
.home-box--olive   { border-top: 2px solid var(--olive); }
.home-box--success { border-top: 2px solid var(--success-2); }
.home-box--gold     { border-top: 2px solid var(--gold); }

.btn-gold {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-bg-strong);
  color: var(--gold);
}

/* ============================================================
   ADMIN — uploader foto hero (rettangolare, stile coerente
   con l'uploader circolare del logo)
   ============================================================ */
.hero-uploader {
  width: 100%;
  max-width: 420px;
  height: 140px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--glass-border);
  background: var(--glass-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.hero-uploader:hover { border-color: var(--gold-border); }
.hero-uploader img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-uploader .iuo {
  position: absolute; inset: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: var(--transition);
}
.hero-uploader:hover .iuo { opacity: 1; }

/* ============================================================
   BANNER CODA OFFLINE — recensioni/newsletter in attesa di rete
   ============================================================ */
.offline-queue-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 30px;
  background: var(--gold-bg-strong);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: opacity var(--transition), transform var(--transition);
  max-width: calc(100vw - 32px);
}
.offline-queue-banner.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}
.offline-queue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: offline-queue-pulse 1.8s ease-in-out infinite;
}
@keyframes offline-queue-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Fix iOS Safari: backdrop-filter non funziona dentro overflow:auto ──
   Le .glass-card dentro il modale ricevono uno sfondo solido scuro
   invece del blur (che Safari ignora o rende bianco in quel contesto). */
.modal-box .glass-card,
.modal-box .panel-card {
  background: var(--gray-900) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-box .form-input,
.modal-box .form-select,
.modal-box .form-textarea {
  background: var(--gray-800) !important;
  -webkit-backdrop-filter: none !important;
}
/* ============================================================
   REDESIGN PREMIUM — Hero fullscreen, trust badges, experience
   card, footer, animazioni scroll-reveal.
   Non tocca logica/dati: solo markup visuale + CSS.
   ============================================================ */

/* ── Hero fullscreen ─────────────────────────────────────── */
.hero-premium {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--black) 100%);
}
.hero-premium-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-premium-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-premium-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.35) 0%, rgba(15,15,15,0.55) 45%, rgba(15,15,15,0.96) 100%);
}
.hero-premium-content {
  position: relative;
  z-index: 1;
  padding: 48px 40px;
  max-width: 640px;
}
.hero-premium-title {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.hero-premium-subtitle {
  font-size: 1.02rem;
  color: var(--gray-300);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 480px;
}
.hero-premium-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--gray-300);
  margin-bottom: 28px;
}
.hero-premium-rating .stars-inline { color: var(--gold); display: inline-flex; gap: 1px; }
.hero-premium-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  background: var(--gold);
  color: #1a1406;
  font-weight: 700;
  font-size: 0.94rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(200,163,93,0.28);
  transition: var(--transition);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,163,93,0.36); }
.btn-hero-primary:active { transform: translateY(0) scale(0.97); }
.btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: var(--transition);
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }

@media (max-width: 700px) {
  .hero-premium { min-height: 64vh; }
  .hero-premium-content { padding: 32px 22px; }
}

/* ── Trust badges ─────────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.trust-badge-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-bg);
  color: var(--gold);
}
.trust-badge-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-200);
  line-height: 1.3;
}
@media (max-width: 760px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Info struttura compatta ──────────────────────────────── */
.info-compact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 40px;
  flex-wrap: wrap;
}
/* Logo + nome sempre insieme: non deve mai succedere che il nome finisca
   su una riga sotto il logo invece che affiancato, nemmeno su mobile. */
.info-compact-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.info-compact-logo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-border);
  flex-shrink: 0;
}
.info-compact-name {
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.info-compact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  flex: 1;
  min-width: 0;
}
.info-compact-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.82rem;
  color: var(--gray-400);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.info-compact-item svg { color: var(--gold); flex-shrink: 0; }

@media (max-width: 560px) {
  .info-compact-card { padding: 14px 16px; gap: 12px; }
  .info-compact-list { width: 100%; gap: 8px 14px; }
}

/* ── Experience card (percorsi/passeggiate) ───────────────── */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.experience-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}
.experience-card-body { padding: 22px; }
.experience-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--forest));
  opacity: 0;
  transition: var(--transition);
  z-index: 2;
}
.experience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  border-color: var(--gold-border);
}
.experience-card:hover::before { opacity: 1; }
.experience-card.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
}

/* Variante con foto: immagine 16:9 + gradient overlay, badge/titolo sovrapposti */
.experience-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.experience-card-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.experience-card:hover .experience-card-photo img { transform: scale(1.06); }
.experience-card.has-photo .experience-card-body { padding-top: 16px; }
.experience-card-badges {
  display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.experience-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.experience-card-desc {
  font-size: 0.84rem;
  color: var(--gray-400);
  line-height: 1.55;
  margin-bottom: 18px;
}
.experience-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.experience-card-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
}
.experience-card-price span {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray-500);
}

/* ── Footer premium ───────────────────────────────────────── */
.site-footer-premium {
  margin-top: 48px;
  padding: 36px 28px 24px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.site-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.site-footer-brand {
  display: flex; align-items: center; gap: 10px;
}
.site-footer-brand img { width: 32px; height: 32px; border-radius: 50%; }
.site-footer-brand-name { font-weight: 700; color: var(--white); font-size: 0.98rem; }
.site-footer-desc { font-size: 0.8rem; color: var(--gray-500); margin-top: 4px; max-width: 320px; }
.site-footer-social { display: flex; gap: 10px; }
.site-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: var(--gray-300);
  border: 1px solid var(--glass-border);
  transition: var(--transition);
}
.site-footer-social a:hover { background: var(--gold-bg); color: var(--gold); border-color: var(--gold-border); }
.site-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-size: 0.76rem; color: var(--gray-600);
}
.site-footer-bottom a { color: var(--gray-500); text-decoration: none; margin-left: 16px; }
.site-footer-bottom a:hover { color: var(--gold); }

/* ── Scroll reveal (equivalente vanilla di fade + slide-up) ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}