/* ═══════════════════════════════════════════════════════════════
   AIRISMAP — Design System v2
   Liquid Glass · Functional Minimalism · Clean Tech Aesthetic
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg:        #000000;
  --bg2:       #0a0a0a;
  --surface:   rgba(255,255,255,0.04);
  --surface2:  rgba(255,255,255,0.07);
  --surface3:  rgba(255,255,255,0.10);
  --border:    rgba(255,255,255,0.09);
  --border2:   rgba(255,255,255,0.14);
  --accent:    #B4FF3C;
  --accent2:   #7CDD00;
  --green:     #B4FF3C;
  --text:      #f5f5f7;
  --muted:     #86868b;
  --muted2:    #a1a1a6;
  --danger:    #FF453A;

  --glass-bg:     rgba(10,10,10,0.72);
  --glass-blur:   blur(24px) saturate(160%);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 0.68, 0, 1.1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ─── GLOBAL RESET UPGRADES ───────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Animated background mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 20% -10%, rgba(180,255,60,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 110%, rgba(180,255,60,0.03) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,30,80,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ─── NAVIGATION ──────────────────────────────────────────────── */
nav {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.3) !important;
}

nav::after {
  background: linear-gradient(90deg, transparent, rgba(180,255,60,0.5), rgba(124,221,0,0.5), transparent) !important;
  opacity: 0.3 !important;
  height: 1px !important;
}

.logo {
  font-size: 19px !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(110deg, #fff 20%, var(--accent) 60%, #E8FF8A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn-nav, .btn-sm, .btn-action, .btn-clear, .btn-back, .btn-next {
  border-radius: var(--radius-xs) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  transition: all 0.2s var(--ease-out) !important;
}

.btn-nav:hover, .btn-sm:hover, .btn-action:hover {
  background: rgba(180,255,60,0.03) !important;
  border-color: rgba(180,255,60,0.35) !important;
  color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(180,255,60,0.12) !important;
}

.btn-cta, .btn-add, .btn-primary, .btn-action.primary {
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s var(--ease-out) !important;
  box-shadow: 0 4px 20px rgba(124,221,0,0.3) !important;
}

.btn-cta::before, .btn-add::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent) !important;
  pointer-events: none !important;
}

.btn-cta:hover, .btn-add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(124,221,0,0.45) !important;
}

/* ─── CARDS / SURFACES ────────────────────────────────────────── */
.card, .ordine-card, .sim-card, .gcp-section {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ordine-card:hover {
  border-color: rgba(180,255,60,0.2) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.ordine-card::before, .card::before, .sim-card::before, .tbl-wrap::before {
  background: linear-gradient(90deg, var(--accent2), rgba(180,255,60,0.8), var(--accent2)) !important;
  opacity: 0.6 !important;
  height: 1px !important;
}

/* ─── PRICE BOX ───────────────────────────────────────────────── */
.price-box {
  background: linear-gradient(135deg, rgba(124,221,0,0.08), rgba(180,255,60,0.04)) !important;
  border: 1px solid rgba(180,255,60,0.15) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: var(--glass-blur) !important;
  box-shadow: 0 4px 24px rgba(124,221,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.price-main {
  font-size: 42px !important;
  letter-spacing: -2.5px !important;
  background: linear-gradient(120deg, var(--accent2), var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── TABLES ──────────────────────────────────────────────────── */
.tbl-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  overflow: hidden !important;
}

th {
  background: rgba(255,255,255,0.02) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.9px !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}

tr:hover td {
  background: rgba(180,255,60,0.03) !important;
}

/* ─── INPUTS ──────────────────────────────────────────────────── */
.form-input, .sim-inp, .search-inp, .inp, input[type=text], input[type=email],
input[type=tel], input[type=password], textarea, select.inp {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Force dark background on ALL select elements — prevents browser white default */
select {
  background: #1a1a1a !important;
  color: #f5f5f7 !important;
  color-scheme: dark;
}
select option {
  background: #1a1a1a !important;
  color: #f5f5f7 !important;
}

.form-input:focus, .sim-inp:focus, .search-inp:focus,
input[type=text]:focus, input[type=email]:focus,
input[type=tel]:focus, input[type=password]:focus, textarea:focus {
  border-color: rgba(180,255,60,0.45) !important;
  box-shadow: 0 0 0 3px rgba(180,255,60,0.08) !important;
  outline: none !important;
  background: rgba(180,255,60,0.03) !important;
}

/* ─── BADGES / STATO ──────────────────────────────────────────── */
.badge, .stato-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  border-radius: 100px !important;
}

/* ─── STEP WIZARD ─────────────────────────────────────────────── */
.step-dot {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  backdrop-filter: var(--glass-blur) !important;
  transition: all 0.3s var(--ease-spring) !important;
}

.step-dot.active {
  background: rgba(180,255,60,0.1) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(180,255,60,0.1), 0 0 16px rgba(180,255,60,0.25) !important;
}

.step-dot.done {
  background: var(--green) !important;
  box-shadow: 0 0 12px rgba(180,255,60,0.35) !important;
}

.step-line {
  height: 1px !important;
  background: var(--border) !important;
}

.step-line.done {
  background: linear-gradient(90deg, var(--green), rgba(180,255,60,0.5)) !important;
}

/* ─── MAP CONTROLS ────────────────────────────────────────────── */
.ctrl-btn {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xs) !important;
  font-size: 11.5px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
  transition: all 0.2s !important;
}

.ctrl-btn:hover {
  border-color: rgba(180,255,60,0.35) !important;
  color: var(--accent) !important;
  transform: translateX(-1px) !important;
}

.ctrl-btn.on {
  background: rgba(180,255,60,0.08) !important;
  border-color: rgba(180,255,60,0.35) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(180,255,60,0.15) !important;
}

/* ─── MAP BAR ─────────────────────────────────────────────────── */
.map-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.map-foot {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-top: 1px solid var(--glass-border) !important;
}

.area-val {
  font-size: 26px !important;
  background: linear-gradient(120deg, var(--accent), #E8FF8A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -1px !important;
}

/* ─── HERO TEXT ───────────────────────────────────────────────── */
.hero {
  font-size: 23px !important;
  letter-spacing: -0.8px !important;
  line-height: 1.2 !important;
}

.hero em {
  background: linear-gradient(120deg, var(--accent), #a0f0ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── PAGE TITLES ─────────────────────────────────────────────── */
.page-title, .step-title, .sim-title, .sec-label {
  letter-spacing: -0.5px !important;
}

/* ─── RADIO / DELIVERY OPTIONS ────────────────────────────────── */
.radio-opt, .delivery-opt {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s var(--ease-out) !important;
}

.radio-opt:hover, .delivery-opt:hover {
  background: rgba(180,255,60,0.04) !important;
  border-color: rgba(180,255,60,0.25) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

.radio-opt.on, .delivery-opt.on {
  background: rgba(180,255,60,0.03) !important;
  border-color: rgba(180,255,60,0.4) !important;
  box-shadow: 0 0 0 1px rgba(180,255,60,0.15), 0 4px 16px rgba(124,221,0,0.15) !important;
}

/* ─── MODAL / OVERLAY ─────────────────────────────────────────── */
.overlay, #overlay {
  background: rgba(2,5,15,0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.modal {
  background: rgba(10,15,35,0.9) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ─── TOAST ───────────────────────────────────────────────────── */
.toast {
  background: rgba(10,15,35,0.92) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  font-size: 13px !important;
}

/* ─── USER DROPDOWN ───────────────────────────────────────────── */
.user-dropdown {
  background: rgba(10,10,10,0.96) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.user-dropdown-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}
.user-dropdown-name strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
}
.dropdown-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  letter-spacing: -0.1px !important;
  text-decoration: none !important;
}
.dropdown-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}
.dropdown-item.danger { color: var(--danger) !important; }
.dropdown-item.danger:hover { color: var(--danger) !important; }
.dropdown-divider { background: rgba(255,255,255,0.07) !important; }
.user-avatar {
  background: var(--accent2) !important;
  color: #0a0a0a !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}
.user-trigger {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes glassIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmerGlass {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.card, .ordine-card {
  animation: glassIn 0.35s var(--ease-smooth) both;
}

/* stagger for multiple cards */
.ordine-card:nth-child(1) { animation-delay: 0.04s; }
.ordine-card:nth-child(2) { animation-delay: 0.08s; }
.ordine-card:nth-child(3) { animation-delay: 0.12s; }
.ordine-card:nth-child(4) { animation-delay: 0.16s; }
.ordine-card:nth-child(5) { animation-delay: 0.20s; }

/* ─── BENTO GRID (admin/order info) ───────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.bento-cell {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.bento-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.bento-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.bento-val {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
}

.bento-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ─── INFO GRID (ordini.html) ─────────────────────────────────── */
.info-grid .info-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xs) !important;
  backdrop-filter: blur(12px) !important;
}

/* ─── SIDEBAR (admin) ─────────────────────────────────────────── */
.sidebar {
  background: rgba(5,8,18,0.5) !important;
  border-left: 1px solid var(--glass-border) !important;
}

/* ─── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(180,255,60,0.3); }

/* ─── SELECTION ───────────────────────────────────────────────── */
::selection { background: rgba(180,255,60,0.2); color: #fff; }

/* ─── TABS (admin) ────────────────────────────────────────────── */
.tabs {
  border-bottom: 1px solid var(--glass-border) !important;
}

.tab {
  font-size: 12.5px !important;
  letter-spacing: 0.1px !important;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important;
  transition: all 0.2s !important;
}

.tab:hover { background: rgba(255,255,255,0.03) !important; }

.tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  text-shadow: 0 0 20px rgba(180,255,60,0.4) !important;
}

/* ─── SEMAPHORE ───────────────────────────────────────────────── */
.sem-housing {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 100px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ─── NOTIF CHANNEL CARDS ─────────────────────────────────────── */
#notifEmailCard, #notifWaCard {
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s !important;
}

/* ─── LOGIN PAGE ──────────────────────────────────────────────── */
.card.login-card, .card {
  box-shadow: var(--glass-shadow) !important;
}

/* ─── EMPTY STATE ─────────────────────────────────────────────── */
.empty-icon { filter: drop-shadow(0 4px 16px rgba(180,255,60,0.2)); }
.empty-title { letter-spacing: -0.5px !important; }

/* ─── PROGRESS STEPS (ordini) ─────────────────────────────────── */
.progress-steps .step.done { text-shadow: 0 0 12px rgba(180,255,60,0.3); }
.progress-steps .step.active { text-shadow: 0 0 12px rgba(180,255,60,0.3); }

/* ─── APP PAGE (hidden until landing exit) ────────────────────── */
#appPage { display: none; }

/* ─── GLASS MAP BACKGROUND ────────────────────────────────────── */
.left {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* ─── SERVICE CARDS ────────────────────────────────────────────── */
.svc-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  transition: transform .2s, border-color .2s, box-shadow .2s !important;
}
.svc-card:hover {
  border-color: rgba(180,255,60,0.35) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}
.svc-card.on {
  border-color: rgba(180,255,60,0.5) !important;
  background: rgba(180,255,60,0.06) !important;
  box-shadow: 0 0 0 2px rgba(180,255,60,0.15), 0 6px 24px rgba(124,221,0,0.2) !important;
}
.svc-card-check { background: var(--accent) !important; }

/* ─── BUTTONS color update ─────────────────────────────────────── */
.btn-next, .btn-cta {
  background: linear-gradient(135deg, #7CDD00, #B4FF3C) !important; color: #0a0a0a !important;
}
.btn-search { background: var(--accent2) !important; }
.btn-pf-cerca { background: var(--accent2) !important; }

/* ─── LOGO (app nav) ───────────────────────────────────────────── */
nav .logo {
  background: linear-gradient(110deg, #fff 30%, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── BTN REGISTER (nav) ───────────────────────────────────────── */
#btnRegister {
  background: linear-gradient(135deg, #7CDD00, #B4FF3C) !important; color: #0a0a0a !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(180,255,60,0.25) !important;
}

/* ─── MOBILE GLOBAL ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Input più alti e font-size 16px per prevenire zoom automatico su iOS */
  input[type=text], input[type=email], input[type=tel],
  input[type=password], select, textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Modal — quasi full-width su mobile */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  /* Toast centrato */
  .toast {
    right: 12px !important;
    left: 12px !important;
    bottom: 16px !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  /* Griglia a 2 colonne → 1 colonna su schermi molto piccoli */
  .form-row,
  .fg-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
}