/* ============================================================
   frontend.css — Keledò frontend pubblico  v1.0
   
   CSS custom properties --fe-* definite qui con valori default.
   Ogni pagina sede inietta un <style nonce="..."> (da PHP) che
   sovrascrive le --fe-* con i colori configurati dal gestore.
   
   Dipendenza esterna: Bootstrap 5.3 (grid + utilities)
   Icone: Bootstrap Icons
   Font: System UI stack — zero dipendenze font esterne
   
   CSP compliant: zero stili inline nel markup HTML.
   ============================================================ */


/* ── 0. Custom properties — valori default ────────────────── */
:root {
  /* Colori brand (sovrascritti per-sede da PHP via <style nonce>) */
  --fe-primary:       #2d8a00;
  --fe-secondary:     #1f6400;
  --fe-accent:        #ff6b35;
  --fe-bg:            #f8f9fa;
  --fe-surface:       #ffffff;
  --fe-text:          #212529;
  --fe-text-muted:    #6c757d;
  --fe-border:        #dee2e6;
  --fe-header-bg:     #ffffff;
  --fe-header-text:   #212529;
  --fe-footer-bg:     #1a2332;
  --fe-footer-text:   #c8d3e0;

  /* Costanti strutturali (non sovrascritte) */
  --fe-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                      Oxygen, Ubuntu, Cantarell, sans-serif;
  --fe-font-mono:     'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --fe-radius:        12px;
  --fe-radius-sm:     8px;
  --fe-radius-xs:     6px;
  --fe-shadow:        0 2px 8px rgba(0,0,0,.07);
  --fe-shadow-md:     0 4px 20px rgba(0,0,0,.11);
  --fe-shadow-lg:     0 8px 32px rgba(0,0,0,.15);
  --fe-transition:    .2s ease;
  --fe-header-h:      64px;
  --fe-cart-w:        380px;
}


/* ── 1. Reset & base ──────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  font-family: var(--fe-font);
  font-size:   16px;
  line-height: 1.6;
  color:       var(--fe-text);
  background:  var(--fe-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block }

a {
  color:           var(--fe-primary);
  text-decoration: none;
}
a:hover {
  color:           var(--fe-secondary);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  margin-top:  0;
  line-height: 1.25;
}

button { cursor: pointer; font-family: inherit }

ul, ol { padding-left: 1.25rem }


/* ── 2. Layout base ───────────────────────────────────────── */
.fe-page { min-height: calc(100vh - var(--fe-header-h)) }

.fe-container {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 20px;
}

.fe-section    { padding: 48px 0 }
.fe-section-sm { padding: 28px 0 }

.fe-section-title {
  font-size:     1.45rem;
  font-weight:   700;
  margin-bottom: 6px;
  color:         var(--fe-text);
}

.fe-section-sub {
  font-size:     .95rem;
  color:         var(--fe-text-muted);
  margin-bottom: 28px;
}

.fe-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   24px;
  flex-wrap:       wrap;
}
.fe-section-header--center {
  justify-content: center;
  text-align:      center;
  display:         block;
  margin-bottom:   40px;
}


/* ── 3. Header / Navbar ───────────────────────────────────── */
.fe-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  height:        var(--fe-header-h);
  background:    var(--fe-header-bg);
  border-bottom: 1px solid var(--fe-border);
  box-shadow:    var(--fe-shadow);
}

.fe-header-inner {
  display:     flex;
  align-items: center;
  gap:         16px;
  height:      100%;
  max-width:   1280px;
  margin:      0 auto;
  padding:     0 20px;
}

/* Logo (generico o sede) */
.fe-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
  text-decoration: none;
}
.fe-logo img {
  width:         36px;
  height:        36px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
}
.fe-logo-name {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--fe-header-text);
  line-height: 1;
}
.fe-logo-name span { color: var(--fe-primary) }
.fe-logo:hover .fe-logo-name { text-decoration: none }

/* Brand sede nell'header */
.fe-sede-brand {
  display:   flex;
  align-items: center;
  gap:       10px;
  overflow:  hidden;
}
.fe-sede-brand img {
  width:         32px;
  height:        32px;
  border-radius: var(--fe-radius-xs);
  object-fit:    cover;
  flex-shrink:   0;
}
.fe-sede-brand-name {
  font-weight:   600;
  font-size:     .95rem;
  color:         var(--fe-header-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Barra ricerca header */
.fe-header-search {
  flex:      1;
  max-width: 480px;
  position:  relative;
}
.fe-header-search .fe-search-input {
  width:       100%;
  height:      40px;
  padding:     0 42px 0 16px;
  border:      1.5px solid var(--fe-border);
  border-radius: 20px;
  font-size:   .9rem;
  background:  var(--fe-bg);
  color:       var(--fe-text);
  font-family: var(--fe-font);
  transition:  border-color var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-header-search .fe-search-input:focus {
  outline:      none;
  border-color: var(--fe-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--fe-primary) 15%, transparent);
}
.fe-header-search .fe-search-icon {
  position:        absolute;
  right:           14px;
  top:             50%;
  transform:       translateY(-50%);
  color:           var(--fe-text-muted);
  pointer-events:  none;
  font-size:       1rem;
}

/* Nav pulsanti destra */
.fe-header-nav {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: auto;
}
.fe-header-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     7px 14px;
  border-radius: 20px;
  font-size:   .875rem;
  font-weight: 500;
  color:       var(--fe-header-text);
  background:  transparent;
  border:      1.5px solid var(--fe-border);
  transition:  all var(--fe-transition);
  text-decoration: none;
}
.fe-header-btn:hover {
  background:      var(--fe-primary);
  color:           #fff;
  border-color:    var(--fe-primary);
  text-decoration: none;
}


/* ── 4. Breadcrumb ────────────────────────────────────────── */
.fe-breadcrumb-wrap {
  border-bottom: 1px solid var(--fe-border);
  background:    var(--fe-surface);
}
.fe-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
  padding:     10px 0;
  font-size:   .83rem;
  color:       var(--fe-text-muted);
  list-style:  none;
  margin:      0;
}
.fe-breadcrumb a {
  color:           var(--fe-text-muted);
  text-decoration: none;
  transition:      color var(--fe-transition);
}
.fe-breadcrumb a:hover { color: var(--fe-primary) }
.fe-breadcrumb-sep  { opacity: .5; font-size: .65rem }
.fe-breadcrumb-current { color: var(--fe-text); font-weight: 500 }


/* ── 5. Hero search (homepage) ────────────────────────────── */
.fe-hero {
  background: linear-gradient(135deg, var(--fe-primary) 0%, var(--fe-secondary) 100%);
  padding:    80px 20px;
  text-align: center;
  color:      #fff;
}
.fe-hero-title {
  font-size:     clamp(1.8rem, 4vw, 2.8rem);
  font-weight:   800;
  margin-bottom: 12px;
  color:         #fff;
}
.fe-hero-sub {
  font-size:     1.1rem;
  opacity:       .88;
  margin-bottom: 36px;
}

/* Search box grande */
.fe-search-box {
  position:  relative;
  max-width: 600px;
  margin:    0 auto;
}
.fe-search-field {
  width:         100%;
  height:        58px;
  padding:       0 60px 0 24px;
  border:        none;
  border-radius: 29px;
  font-size:     1.05rem;
  background:    #fff;
  color:         var(--fe-text);
  font-family:   var(--fe-font);
  box-shadow:    var(--fe-shadow-lg);
  transition:    box-shadow var(--fe-transition);
}
.fe-search-field:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.45), var(--fe-shadow-lg);
}
.fe-search-field::placeholder { color: var(--fe-text-muted) }
.fe-search-btn {
  position:        absolute;
  right:           7px;
  top:             50%;
  transform:       translateY(-50%);
  width:           44px;
  height:          44px;
  border:          none;
  border-radius:   22px;
  background:      var(--fe-primary);
  color:           #fff;
  font-size:       1.1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--fe-transition);
}
.fe-search-btn:hover { background: var(--fe-secondary) }

/* Dropdown risultati ricerca live */
.fe-search-results {
  position:    absolute;
  top:         calc(100% + 10px);
  left:        0;
  right:       0;
  background:  #fff;
  border-radius: var(--fe-radius);
  box-shadow:  var(--fe-shadow-lg);
  z-index:     200;
  max-height:  440px;
  overflow-y:  auto;
  text-align:  left;
  display:     none;
}
.fe-search-results.is-open { display: block }

.fe-search-result-item {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         12px 16px;
  text-decoration: none;
  color:           var(--fe-text);
  transition:      background var(--fe-transition);
  border-bottom:   1px solid var(--fe-border);
}
.fe-search-result-item:last-child { border-bottom: none }
.fe-search-result-item:hover      { background: var(--fe-bg); text-decoration: none }

.fe-search-result-img {
  width:         50px;
  height:        50px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--fe-bg);
}
.fe-search-result-info  { flex: 1; min-width: 0 }
.fe-search-result-name  { font-weight: 600; font-size: .95rem; line-height: 1.3 }
.fe-search-result-sub   { font-size: .8rem; color: var(--fe-text-muted); margin-top: 2px }
.fe-search-result-img-ph {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  background:      var(--fe-bg);
  color:           var(--fe-primary);
}
.fe-search-result-more  { justify-content: center; font-weight: 600; color: var(--fe-primary) }
.fe-search-loading,
.fe-search-empty        { padding: 20px; text-align: center; color: var(--fe-text-muted); font-size: .9rem }


/* ── 6. Sede card (homepage + risultati ricerca) ──────────── */
.fe-sedi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   20px;
}

.fe-sede-card {
  background:      var(--fe-surface);
  border:          1px solid var(--fe-border);
  border-radius:   var(--fe-radius);
  overflow:        hidden;
  box-shadow:      var(--fe-shadow);
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  transition:      transform var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-sede-card:hover {
  transform:       translateY(-3px);
  box-shadow:      var(--fe-shadow-md);
  text-decoration: none;
  color:           inherit;
}

.fe-sede-card-cover {
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   var(--fe-bg);
  flex-shrink:  0;
}
.fe-sede-card-cover img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.fe-sede-card:hover .fe-sede-card-cover img { transform: scale(1.04) }

.fe-sede-card-cover-ph {
  width:           100%;
  height:          100%;
  background:      linear-gradient(135deg,
                     color-mix(in srgb, var(--fe-primary) 20%, #fff) 0%,
                     var(--fe-bg) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2.5rem;
  color:           var(--fe-primary);
  opacity:         .5;
}

.fe-sede-card-body {
  padding:     16px;
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  flex:        1;
}

.fe-sede-card-logo {
  width:         48px;
  height:        48px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  border:        2px solid var(--fe-border);
  background:    var(--fe-bg);
}
.fe-sede-card-logo-ph {
  width:           48px;
  height:          48px;
  border-radius:   var(--fe-radius-sm);
  background:      var(--fe-primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  font-weight:     700;
  flex-shrink:     0;
}

.fe-sede-card-info { flex: 1; min-width: 0 }

.fe-sede-card-name {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--fe-text);
  margin-bottom: 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.fe-sede-card-type {
  font-size:      .76rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--fe-primary);
  margin-bottom:  4px;
}
.fe-sede-card-addr {
  font-size:   .82rem;
  color:       var(--fe-text-muted);
  display:     flex;
  align-items: center;
  gap:         4px;
}
.fe-sede-card-slogan {
  font-size:   .83rem;
  color:       var(--fe-text-muted);
  padding:     0 16px 14px;
  font-style:  italic;
  line-height: 1.4;
}


/* ── 7. Sede hero (pagina sede) ───────────────────────────── */
.fe-sede-hero {
  background: var(--fe-surface);
  border-bottom: 1px solid var(--fe-border);
}
.fe-sede-hero-cover {
  width:      100%;
  height:     260px;
  object-fit: cover;
  display:    block;
}
.fe-sede-hero-cover-ph {
  width:      100%;
  height:     260px;
  background: linear-gradient(135deg, var(--fe-primary) 0%, var(--fe-secondary) 100%);
}
.fe-sede-hero-body {
  display:       flex;
  align-items:   flex-end;
  gap:           20px;
  padding-bottom: 24px;
  margin-top:    -44px;
  position:      relative;
  z-index:       2;
}
.fe-sede-hero-logo {
  width:         80px;
  height:        80px;
  border-radius: var(--fe-radius);
  border:        3px solid var(--fe-surface);
  object-fit:    cover;
  background:    var(--fe-surface);
  box-shadow:    var(--fe-shadow-md);
  flex-shrink:   0;
}
.fe-sede-hero-logo-ph {
  width:           80px;
  height:          80px;
  border-radius:   var(--fe-radius);
  border:          3px solid var(--fe-surface);
  background:      var(--fe-primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  font-weight:     800;
  flex-shrink:     0;
  box-shadow:      var(--fe-shadow-md);
}
.fe-sede-hero-info {
  flex:      1;
  min-width: 0;
  display:   flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.fe-sede-hero-info-main { flex: 1; min-width: 0 }
.fe-sede-hero-cta       { flex-shrink: 0 }
.fe-sede-hero-prenota   { white-space: nowrap }
@media (max-width: 600px) {
  .fe-sede-hero-info    { flex-direction: column; align-items: flex-start }
  .fe-sede-hero-cta     { width: 100% }
  .fe-sede-hero-prenota { width: 100%; justify-content: center }
}
.fe-sede-hero-name {
  font-size:     clamp(1.3rem, 3vw, 1.9rem);
  font-weight:   800;
  color:         var(--fe-text);
  margin-bottom: 4px;
}
.fe-sede-hero-type {
  font-size:      .78rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--fe-primary);
  margin-bottom:  8px;
}
.fe-sede-hero-contacts {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
  font-size: .85rem;
  color:     var(--fe-text-muted);
}
.fe-sede-hero-contact {
  display:         flex;
  align-items:     center;
  gap:             5px;
  color:           var(--fe-text-muted);
  text-decoration: none;
  transition:      color var(--fe-transition);
}
.fe-sede-hero-contact:hover { color: var(--fe-primary); text-decoration: none }


/* ── 8. Tab navigazione (menu / portate / info) ───────────── */
.fe-tabs {
  display:       flex;
  gap:           0;
  border-bottom: 2px solid var(--fe-border);
  flex-wrap:     wrap;
  margin-bottom: 28px;
}
.fe-tab {
  display:          flex;
  align-items:      center;
  gap:              6px;
  padding:          11px 20px;
  font-size:        .9rem;
  font-weight:      500;
  color:            var(--fe-text-muted);
  border:           none;
  background:       transparent;
  border-bottom:    2px solid transparent;
  margin-bottom:    -2px;
  text-decoration:  none;
  transition:       color var(--fe-transition), border-color var(--fe-transition);
  cursor:           pointer;
  font-family:      inherit;
}
.fe-tab:hover      { color: var(--fe-primary); text-decoration: none }
.fe-tab.is-active  {
  color:            var(--fe-primary);
  border-bottom-color: var(--fe-primary);
  font-weight:      600;
}


/* ── 9. Menu card ─────────────────────────────────────────── */
.fe-menu-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   20px;
}

.fe-menu-card {
  background:     var(--fe-surface);
  border:         1px solid var(--fe-border);
  border-radius:  var(--fe-radius);
  overflow:       hidden;
  box-shadow:     var(--fe-shadow);
  display:        flex;
  flex-direction: column;
  transition:     transform var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-menu-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--fe-shadow-md);
}

.fe-menu-card-cover {
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   var(--fe-bg);
  position:     relative;
}
.fe-menu-card-cover img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.fe-menu-card-cover-ph {
  width:           100%;
  height:          100%;
  background:      color-mix(in srgb, var(--fe-primary) 10%, var(--fe-bg));
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2.8rem;
  color:           var(--fe-primary);
  opacity:         .4;
}

.fe-menu-card-badges {
  position: absolute;
  top:      10px;
  left:     10px;
  display:  flex;
  gap:      6px;
}

.fe-menu-card-body {
  padding:        18px;
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.fe-menu-card-tipo {
  font-size:      .74rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--fe-primary);
  margin-bottom:  5px;
}
.fe-menu-card-name {
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--fe-text);
  margin-bottom: 8px;
}
.fe-menu-card-descr {
  font-size:               .875rem;
  color:                   var(--fe-text-muted);
  line-height:             1.5;
  flex:                    1;
  margin-bottom:           16px;
  display:                 -webkit-box;
  -webkit-line-clamp:      3;
  -webkit-box-orient:      vertical;
  overflow:                hidden;
}
.fe-menu-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding-top:     14px;
  border-top:      1px solid var(--fe-border);
}
.fe-menu-card-price {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--fe-text);
}

/* ── v2.1.0 — Menù in evidenza (sede.php tab menù) ──────── */
.fe-menu-evidenza-section {
  margin-bottom: var(--fe-space-lg, 32px);
}
.fe-menu-evidenza-label {
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  font-size:      .78rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--fe-primary);
  margin-bottom:  12px;
}
.fe-menu-card--evidenza {
  border:     2px solid var(--fe-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fe-primary) 12%, transparent),
              var(--fe-shadow);
}
.fe-menu-card--evidenza:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fe-primary) 18%, transparent),
              var(--fe-shadow-md);
}
.fe-menu-altri-title {
  display:        flex;
  align-items:    center;
  gap:            .5rem;
  font-size:      .75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--fe-text-muted);
  margin:         28px 0 14px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--fe-border);
}


/* ── 10. Pulsanti ─────────────────────────────────────────── */
.fe-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         9px 20px;
  border-radius:   24px;
  font-size:       .9rem;
  font-weight:     600;
  line-height:     1;
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      all var(--fe-transition);
  text-decoration: none;
  white-space:     nowrap;
  font-family:     inherit;
}
.fe-btn:hover { text-decoration: none }

.fe-btn-primary {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
}
.fe-btn-primary:hover {
  background:   var(--fe-secondary);
  border-color: var(--fe-secondary);
  color:        #fff;
}
.fe-btn-outline {
  background:   transparent;
  color:        var(--fe-primary);
  border-color: var(--fe-primary);
}
.fe-btn-outline:hover { background: var(--fe-primary); color: #fff }

.fe-btn-accent {
  background:   var(--fe-accent);
  color:        #fff;
  border-color: var(--fe-accent);
}
.fe-btn-ghost {
  background:   transparent;
  color:        var(--fe-text-muted);
  border-color: var(--fe-border);
}
.fe-btn-ghost:hover {
  background:   var(--fe-bg);
  color:        var(--fe-text);
  border-color: var(--fe-text-muted);
}

.fe-btn-sm  { padding: 6px 14px; font-size: .82rem }
.fe-btn-lg  { padding: 13px 28px; font-size: 1rem }
.fe-btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none }


/* ── 11. Badge / chip ─────────────────────────────────────── */
.fe-badge {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  padding:     3px 10px;
  border-radius: 20px;
  font-size:   .74rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.fe-badge-primary { background: var(--fe-primary); color: #fff }
.fe-badge-accent  { background: var(--fe-accent);  color: #fff }
.fe-badge-surface {
  background: var(--fe-surface);
  color:      var(--fe-text);
  border:     1px solid var(--fe-border);
}
.fe-badge-privato { background: #6366f1; color: #fff }
.fe-badge-promo   { background: var(--fe-accent); color: #fff }
.fe-badge--xs     { font-size: .68rem; padding: 2px 7px }
.fe-badge-evidenza {
  background: #fef3c7;
  color:      #92400e;
  border:     1px solid #fcd34d;
}

/* Badge dietetici */
.fe-diet {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 9px;
  border-radius: 12px;
  font-size:     .72rem;
  font-weight:   600;
  white-space:   nowrap;
}
.fe-diet-vegan  { background: #d1fae5; color: #065f46 }
.fe-diet-veggie { background: #dcfce7; color: #166534 }
.fe-diet-gluten { background: #fef9c3; color: #713f12 }


/* ── 12. Toolbar + toggle griglia/lista ───────────────────── */
.fe-portate-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   20px;
  flex-wrap:       wrap;
}

.fe-portate-filters {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  flex:      1;
}
.fe-portate-filter-btn {
  padding:       6px 14px;
  border-radius: 20px;
  border:        1.5px solid var(--fe-border);
  background:    var(--fe-surface);
  color:         var(--fe-text-muted);
  font-size:     .83rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--fe-transition);
  font-family:   inherit;
}
.fe-portate-filter-btn:hover,
.fe-portate-filter-btn.is-active {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
}

.fe-view-toggle {
  display:      flex;
  gap:          2px;
  background:   var(--fe-bg);
  padding:      3px;
  border-radius: var(--fe-radius-sm);
  border:       1px solid var(--fe-border);
}
.fe-view-btn {
  width:           34px;
  height:          34px;
  border:          none;
  border-radius:   6px;
  background:      transparent;
  color:           var(--fe-text-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  transition:      all var(--fe-transition);
}
.fe-view-btn.is-active {
  background: var(--fe-surface);
  color:      var(--fe-primary);
  box-shadow: var(--fe-shadow);
}


/* ── 13. Portate — vista griglia ──────────────────────────── */
.fe-portate-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   18px;
}

.fe-portata-card {
  background:     var(--fe-surface);
  border:         1px solid var(--fe-border);
  border-radius:  var(--fe-radius);
  overflow:       hidden;
  box-shadow:     var(--fe-shadow);
  display:        flex;
  flex-direction: column;
  transition:     transform var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-portata-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--fe-shadow-md);
}
.fe-portata-card-img {
  aspect-ratio: 4/3;
  overflow:     hidden;
  background:   var(--fe-bg);
}
.fe-portata-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.fe-portata-card:hover .fe-portata-card-img img { transform: scale(1.05) }

.fe-portata-card-img-ph {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2.2rem;
  color:           var(--fe-border);
  background:      var(--fe-bg);
}
.fe-portata-card-body {
  padding:        14px;
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.fe-portata-card-tipo {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--fe-primary);
  margin-bottom:  4px;
}
.fe-portata-card-name {
  font-size:     .975rem;
  font-weight:   700;
  color:         var(--fe-text);
  margin-bottom: 4px;
  line-height:   1.3;
}
.fe-portata-card-descr {
  font-size:               .82rem;
  color:                   var(--fe-text-muted);
  line-height:             1.45;
  flex:                    1;
  margin-bottom:           10px;
  display:                 -webkit-box;
  -webkit-line-clamp:      2;
  -webkit-box-orient:      vertical;
  overflow:                hidden;
}
.fe-portata-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding-top:     10px;
  border-top:      1px solid var(--fe-border);
  margin-top:      auto;
}
.fe-portata-price {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--fe-text);
}
.fe-portata-badges {
  display:   flex;
  gap:       4px;
  flex-wrap: wrap;
  margin-top: 8px;
}


/* ── 14. Portate — vista lista ────────────────────────────── */
.fe-portate-list { display: flex; flex-direction: column; gap: 10px }

.fe-portata-row {
  background:  var(--fe-surface);
  border:      1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding:     14px 16px;
  display:     flex;
  align-items: center;
  gap:         16px;
  box-shadow:  var(--fe-shadow);
  transition:  box-shadow var(--fe-transition);
}
.fe-portata-row:hover { box-shadow: var(--fe-shadow-md) }

.fe-portata-row-img {
  width:         70px;
  height:        70px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--fe-bg);
}
.fe-portata-row-img-ph {
  width:           70px;
  height:          70px;
  border-radius:   var(--fe-radius-sm);
  background:      var(--fe-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
  color:           var(--fe-border);
  flex-shrink:     0;
}
.fe-portata-row-info  { flex: 1; min-width: 0 }
.fe-portata-row-tipo  {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--fe-primary);
  margin-bottom:  2px;
}
.fe-portata-row-name  { font-size: 1rem; font-weight: 700; color: var(--fe-text) }
.fe-portata-row-descr {
  font-size:     .83rem;
  color:         var(--fe-text-muted);
  margin-top:    3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.fe-portata-row-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
  flex-shrink:    0;
}


/* ── 15. Portata — dettaglio ──────────────────────────────── */
.fe-portata-detail {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         44px;
  align-items: start;
}
.fe-portata-detail-img {
  border-radius: var(--fe-radius);
  overflow:      hidden;
  box-shadow:    var(--fe-shadow-md);
}
.fe-portata-detail-img img {
  width:        100%;
  aspect-ratio: 4/3;
  object-fit:   cover;
  display:      block;
}
.fe-portata-detail-img-ph {
  width:           100%;
  aspect-ratio:    4/3;
  background:      var(--fe-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       4rem;
  color:           var(--fe-border);
}
.fe-portata-detail-tipo {
  font-size:      .76rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--fe-primary);
  margin-bottom:  8px;
}
.fe-portata-detail-name {
  font-size:     clamp(1.4rem, 3vw, 2rem);
  font-weight:   800;
  margin-bottom: 8px;
}
.fe-portata-detail-price {
  font-size:     1.7rem;
  font-weight:   800;
  color:         var(--fe-primary);
  margin-bottom: 16px;
}
.fe-portata-detail-descr {
  font-size:     1rem;
  color:         var(--fe-text-muted);
  line-height:   1.65;
  margin-bottom: 20px;
}
.fe-portata-detail-meta {
  font-size: .85rem;
  color:     var(--fe-text-muted);
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Sezione allergeni */
.fe-allergeni {
  background:    var(--fe-bg);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  padding:       14px 16px;
  margin-top:    20px;
}
.fe-allergeni-title {
  font-size:      .78rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--fe-text-muted);
  margin-bottom:  10px;
}
.fe-allergeni-list { display: flex; flex-wrap: wrap; gap: 6px }
.fe-allergene {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  border-radius: 12px;
  font-size:     .77rem;
  font-weight:   500;
  background:    #fff3cd;
  color:         #664d03;
  border:        1px solid #ffd966;
}


/* ── 16. Menu riservato — form password ───────────────────── */
.fe-menu-lock {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  box-shadow:    var(--fe-shadow-md);
  padding:       48px 40px;
  max-width:     440px;
  margin:        40px auto;
  text-align:    center;
}
.fe-menu-lock-icon  { font-size: 3rem; color: var(--fe-text-muted); margin-bottom: 16px }
.fe-menu-lock-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px }
.fe-menu-lock-sub   {
  font-size:     .9rem;
  color:         var(--fe-text-muted);
  margin-bottom: 28px;
}

/* Input generici */
.fe-input {
  width:         100%;
  height:        46px;
  padding:       0 16px;
  border:        1.5px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  font-size:     .95rem;
  background:    var(--fe-bg);
  color:         var(--fe-text);
  font-family:   var(--fe-font);
  transition:    border-color var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-input:focus {
  outline:      none;
  border-color: var(--fe-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--fe-primary) 15%, transparent);
}
.fe-input-group { position: relative }
.fe-input-group .fe-input { padding-right: 44px }
.fe-input-toggle {
  position:   absolute;
  right:      12px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--fe-text-muted);
  cursor:     pointer;
  padding:    4px;
  font-size:  1rem;
  transition: color var(--fe-transition);
}
.fe-input-toggle:hover { color: var(--fe-text) }

.fe-form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  text-align:     left;
}
.fe-form-label {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--fe-text);
}
.fe-input-error {
  font-size: .82rem;
  color:     #dc2626;
  display:   none;
}
.fe-input-error.is-visible { display: block }


/* ── 17. Carrello FAB ─────────────────────────────────────── */
.fe-cart-fab {
  position:    fixed;
  bottom:      24px;
  right:       24px;
  z-index:     300;
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 20px;
  background:  var(--fe-primary);
  color:       #fff;
  border:      none;
  border-radius: 28px;
  box-shadow:  var(--fe-shadow-lg);
  font-size:   .95rem;
  font-weight: 700;
  font-family: var(--fe-font);
  cursor:      pointer;
  transition:  all var(--fe-transition);
  transform:   translateY(80px);
  opacity:     0;
}
.fe-cart-fab.is-visible { transform: translateY(0); opacity: 1 }
.fe-cart-fab:hover {
  background:  var(--fe-secondary);
  transform:   translateY(-2px);
  box-shadow:  0 8px 24px rgba(0,0,0,.2);
}

.fe-cart-fab-count {
  background:      var(--fe-accent);
  color:           #fff;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  font-size:       .76rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
}
.fe-cart-fab-total { font-size: .85rem; opacity: .9 }


/* ── 18. Cart drawer ──────────────────────────────────────── */
.fe-cart-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,.45);
  z-index:        400;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--fe-transition);
}
.fe-cart-overlay.is-open { opacity: 1; pointer-events: all }

.fe-cart-drawer {
  position:   fixed;
  right:      0;
  top:        0;
  bottom:     0;
  width:      var(--fe-cart-w);
  max-width:  100vw;
  background: var(--fe-surface);
  z-index:    401;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.fe-cart-drawer.is-open { transform: translateX(0) }

.fe-cart-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 20px;
  border-bottom:   1px solid var(--fe-border);
  flex-shrink:     0;
}
.fe-cart-title { font-size: 1.1rem; font-weight: 700 }
.fe-cart-close {
  background: none;
  border:     none;
  font-size:  1.2rem;
  color:      var(--fe-text-muted);
  cursor:     pointer;
  padding:    4px;
  transition: color var(--fe-transition);
}
.fe-cart-close:hover { color: var(--fe-text) }

.fe-cart-body    { flex: 1; overflow-y: auto; padding: 16px }
.fe-cart-empty   { text-align: center; padding: 40px 20px; color: var(--fe-text-muted) }
.fe-cart-empty-icon { font-size: 3rem; opacity: .35; margin-bottom: 12px }

.fe-cart-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     12px 0;
  border-bottom: 1px solid var(--fe-border);
}
.fe-cart-item:last-child { border-bottom: none }

.fe-cart-item-img {
  width:         52px;
  height:        52px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--fe-bg);
}
.fe-cart-item-info  { flex: 1; min-width: 0 }
.fe-cart-item-name  { font-size: .9rem; font-weight: 600; line-height: 1.3 }
.fe-cart-item-note  { font-size: .78rem; color: var(--fe-text-muted); margin-top: 2px }
.fe-cart-item-price { font-size: .9rem; font-weight: 700 }
.fe-cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }

.fe-cart-qty {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.fe-cart-qty-btn {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          1.5px solid var(--fe-border);
  background:      var(--fe-surface);
  color:           var(--fe-text);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       .9rem;
  transition:      all var(--fe-transition);
}
.fe-cart-qty-btn:hover {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
}
.fe-cart-qty-val { font-weight: 700; min-width: 20px; text-align: center; font-size: .9rem }

.fe-cart-footer {
  padding:      16px 20px;
  border-top:   1px solid var(--fe-border);
  flex-shrink:  0;
}
.fe-cart-total {
  display:         flex;
  justify-content: space-between;
  font-size:       1rem;
  font-weight:     700;
  margin-bottom:   14px;
  align-items:     center;
}
.fe-cart-total-amount { color: var(--fe-primary); font-size: 1.2rem }

/* Riquadro tavolo nel drawer */
.fe-table-select {
  background:    var(--fe-bg);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  padding:       10px 14px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 14px;
  font-size:     .88rem;
}
.fe-table-select i             { color: var(--fe-primary) }
.fe-table-select-val           { font-weight: 600; flex: 1 }
.fe-table-select-change {
  font-size:       .8rem;
  color:           var(--fe-primary);
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
  font-family:     var(--fe-font);
  font-weight:     600;
}
.fe-table-select-change:hover { text-decoration: underline }


/* ── 19. Modal (tavolo) ───────────────────────────────────── */
.fe-modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,.5);
  z-index:        500;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        20px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--fe-transition);
}
.fe-modal-overlay.is-open { opacity: 1; pointer-events: all }

.fe-modal {
  background:  var(--fe-surface);
  border-radius: var(--fe-radius);
  box-shadow:  var(--fe-shadow-lg);
  padding:     28px;
  width:       100%;
  max-width:   440px;
  max-height:  80vh;
  overflow-y:  auto;
  transform:   scale(.96);
  transition:  transform var(--fe-transition);
}
.fe-modal-overlay.is-open .fe-modal { transform: scale(1) }
.fe-modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px }

.fe-table-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap:                   8px;
  margin-bottom:         20px;
}
.fe-table-btn {
  aspect-ratio:    1;
  border-radius:   var(--fe-radius-sm);
  border:          2px solid var(--fe-border);
  background:      var(--fe-bg);
  color:           var(--fe-text);
  font-size:       .85rem;
  font-weight:     600;
  cursor:          pointer;
  transition:      all var(--fe-transition);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             2px;
  font-family:     var(--fe-font);
}
.fe-table-btn:hover,
.fe-table-btn.is-selected {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
}
.fe-table-btn.is-occupied {
  background:   #fee2e2;
  color:        #dc2626;
  border-color: #fecaca;
  opacity:      .65;
  cursor:       not-allowed;
}
.fe-table-manual-label { font-size: .85rem; color: var(--fe-text-muted); margin-bottom: 8px }


/* ── 20. Promo banner ─────────────────────────────────────── */
.fe-promo-banner {
  background:    linear-gradient(135deg, var(--fe-accent) 0%, #e55a2b 100%);
  color:         #fff;
  border-radius: var(--fe-radius);
  padding:       16px 20px;
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-bottom: 20px;
}
.fe-promo-banner-icon  { font-size: 1.5rem; flex-shrink: 0 }
.fe-promo-banner-body  { flex: 1 }
.fe-promo-banner-title { font-weight: 700; font-size: 1rem }
.fe-promo-banner-sub   { font-size: .85rem; opacity: .9; margin-top: 2px }
.fe-promo-banner-price { font-size: 1.2rem; font-weight: 800; flex-shrink: 0; text-align: right }
.fe-promo-banner-old   { font-size: .8rem; text-decoration: line-through; opacity: .8; display: block }


/* ── 21. Empty state / spinner ────────────────────────────── */
.fe-empty {
  text-align: center;
  padding:    60px 20px;
  color:      var(--fe-text-muted);
}
.fe-empty-icon  { font-size: 3.5rem; opacity: .3; margin-bottom: 16px }
.fe-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--fe-text); margin-bottom: 6px }
.fe-empty-sub   { font-size: .9rem }

.fe-spinner {
  width:         32px;
  height:        32px;
  border:        3px solid var(--fe-border);
  border-top-color: var(--fe-primary);
  border-radius: 50%;
  animation:     fe-spin .65s linear infinite;
  margin:        20px auto;
}
.fe-spinner-sm { width: 20px; height: 20px; margin: 4px auto; }
@keyframes fe-spin { to { transform: rotate(360deg) } }
.fe-loading-center { display: flex; justify-content: center; padding: 32px }


/* ── 22. Alert / flash ────────────────────────────────────── */
#fe-alerts {
  position:        fixed;
  top:             80px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         600;
  width:           min(90vw, 440px);
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  pointer-events:  none;
}
#fe-alerts > * { pointer-events: auto }

.fe-alert {
  padding:       12px 16px;
  border-radius: var(--fe-radius-sm);
  font-size:     .9rem;
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 16px;
}
.fe-alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0 }
.fe-alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca }
.fe-alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a }
.fe-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe }


/* ── 23. Footer ───────────────────────────────────────────── */
.fe-footer {
  background:  var(--fe-footer-bg);
  color:       var(--fe-footer-text);
  padding:     44px 0 24px;
  margin-top:  60px;
}
.fe-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px }

.fe-footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   40px;
  margin-bottom:         32px;
}
.fe-footer-brand {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 12px;
}
.fe-footer-brand-name { font-size: 1.1rem; font-weight: 700; color: #fff }
.fe-footer-brand-name span { color: var(--fe-primary) }

.fe-footer-tagline { font-size: .875rem; opacity: .72; line-height: 1.6; max-width: 280px }

.fe-footer-heading {
  font-size:      .76rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--fe-footer-text);
  opacity:        .55;
  margin-bottom:  12px;
}
.fe-footer-links    { list-style: none; padding: 0; margin: 0 }
.fe-footer-links li { margin-bottom: 8px }
.fe-footer-links a  {
  font-size:       .875rem;
  color:           var(--fe-footer-text);
  opacity:         .78;
  text-decoration: none;
  transition:      opacity var(--fe-transition);
}
.fe-footer-links a:hover { opacity: 1; text-decoration: none }

.fe-footer-bottom {
  border-top:  1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         12px;
  flex-wrap:   wrap;
  font-size:   .8rem;
  opacity:     .6;
}
.fe-footer-credit       { color: #4caf50; opacity: 1 }
.fe-footer-heart        { color: #e53935 }
.fe-footer-credit-link  { color: #4caf50; text-decoration: underline }
.fe-footer-credit-link:hover { color: #81c784; text-decoration: none }

/* ── 24. Pagina 404 ──────────────────────────────────────── */
.fe-404 {
  min-height: 60vh;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.fe-404-inner {
  max-width: 480px;
}
.fe-404-code {
  font-size:   7rem;
  font-weight: 900;
  line-height: 1;
  color:       var(--fe-primary, #2d8a00);
  opacity:     .15;
  margin-bottom: -20px;
  user-select: none;
}
.fe-404-icon {
  font-size: 4rem;
  color:     var(--fe-primary, #2d8a00);
  display:   block;
  margin-bottom: 16px;
}
.fe-404-title {
  font-size:   1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  color:       var(--fe-text, #212529);
}
.fe-404-desc {
  color:         var(--fe-text-muted, #6c757d);
  margin-bottom: 32px;
  line-height:   1.6;
}
.fe-404-actions {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ── 24. Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .fe-portata-detail  { grid-template-columns: 1fr }
  .fe-footer-grid     { grid-template-columns: 1fr 1fr }
}

@media (max-width: 768px) {
  :root {
    --fe-header-h: 56px;
    --fe-cart-w:   100vw;
  }
  /* La ricerca nell'header è nascosta su mobile — c'è quella in hero */
  .fe-header-search { display: none }
  .fe-hero          { padding: 52px 20px }
  .fe-sedi-grid     { grid-template-columns: 1fr }
  .fe-menu-grid     { grid-template-columns: 1fr }
  .fe-portate-grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) }
  .fe-footer-grid   { grid-template-columns: 1fr }
  .fe-menu-lock     { padding: 32px 24px; margin: 24px 16px }
  .fe-cart-fab      { bottom: 16px; right: 16px }
  .fe-section       { padding: 32px 0 }
  .fe-sede-hero-cover,
  .fe-sede-hero-cover-ph { height: 200px }
}

@media (max-width: 480px) {
  .fe-portate-grid       { grid-template-columns: 1fr }
  .fe-portata-detail-price { font-size: 1.3rem }
  .fe-hero-title         { font-size: 1.5rem }
  .fe-search-field       { font-size: .95rem }
  .fe-portata-row-descr  { display: none }
}


/* ── 25. Accessibilità ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  .01ms !important;
    transition-duration: .01ms !important;
  }
}

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

/* Skip-link accessibilità */
.fe-skip-link {
  position:    absolute;
  top:         -40px;
  left:        20px;
  background:  var(--fe-primary);
  color:       #fff;
  padding:     8px 16px;
  border-radius: var(--fe-radius-sm);
  font-size:   .9rem;
  font-weight: 600;
  z-index:     9999;
  transition:  top var(--fe-transition);
}
.fe-skip-link:focus { top: 8px }


/* ── 26. Print (stampa menù) ──────────────────────────────── */
@media print {
  .fe-header,
  .fe-footer,
  .fe-cart-fab,
  .fe-cart-overlay,
  .fe-cart-drawer,
  .fe-view-toggle,
  .fe-portate-toolbar,
  .fe-modal-overlay { display: none !important }

  .fe-portate-grid       { grid-template-columns: repeat(3, 1fr) }
  .fe-portata-card       { break-inside: avoid; box-shadow: none; border: 1px solid #ccc }
  .fe-portata-detail     { grid-template-columns: 1fr }
}


/* ── 27. Hero variante ridotta (pagina cerca) ─────────────── */
.fe-hero-sm {
  padding: 32px 20px;
}
.fe-hero-sm .fe-search-field {
  height: 52px;
  font-size: 1rem;
}
.fe-hero-sm .fe-search-btn {
  width:  38px;
  height: 38px;
}

/* ── 28. Paginazione ──────────────────────────────────────── */
.fe-pagination {
  margin-top: 44px;
  display:    flex;
  justify-content: center;
}
.fe-pagination-inner {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
  justify-content: center;
}
.fe-page-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       38px;
  height:          38px;
  padding:         0 10px;
  border-radius:   var(--fe-radius-sm);
  border:          1.5px solid var(--fe-border);
  background:      var(--fe-surface);
  color:           var(--fe-text);
  font-size:       .875rem;
  font-weight:     500;
  text-decoration: none;
  transition:      all var(--fe-transition);
  cursor:          pointer;
}
.fe-page-btn:hover:not([aria-disabled]) {
  border-color: var(--fe-primary);
  color:        var(--fe-primary);
  background:   color-mix(in srgb, var(--fe-primary) 6%, #fff);
  text-decoration: none;
}
.fe-page-btn.is-current {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
  font-weight:  700;
}
.fe-page-btn[aria-disabled] {
  opacity:        .35;
  cursor:         not-allowed;
  pointer-events: none;
}
.fe-page-ellipsis {
  color:       var(--fe-text-muted);
  font-size:   .875rem;
  padding:     0 4px;
  line-height: 38px;
  user-select: none;
}


/* ── 29. Sede hero — slogan ───────────────────────────────── */
.fe-sede-hero-slogan {
  font-size:   .9rem;
  color:       var(--fe-text-muted);
  margin:      4px 0 10px;
  font-style:  italic;
}

/* ── 30. Promo strip (sopra le tab) ───────────────────────── */
.fe-promo-strip {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        20px 0 0;
}

/* ── 31. Tab count badge ──────────────────────────────────── */
.fe-tab-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       20px;
  height:          20px;
  padding:         0 6px;
  border-radius:   10px;
  font-size:       .72rem;
  font-weight:     700;
  background:      var(--fe-border);
  color:           var(--fe-text-muted);
  line-height:     1;
}
.fe-tab.is-active .fe-tab-count {
  background: color-mix(in srgb, var(--fe-primary) 18%, transparent);
  color:      var(--fe-primary);
}

/* ── 32. Portata card — link wrapper ──────────────────────── */
.fe-portata-card-link,
.fe-portata-card-name-link {
  text-decoration: none;
  color:           inherit;
  display:         block;
}
.fe-portata-card-name-link:hover .fe-portata-card-name {
  color:           var(--fe-primary);
  text-decoration: none;
}

/* ── 33. Testo muted small ────────────────────────────────── */
.fe-text-muted-sm {
  font-size:  .82rem;
  color:      var(--fe-text-muted);
  font-weight: 400;
}

/* ── 34. Tab info: griglia info sede ──────────────────────── */
.fe-sede-info-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   28px;
  padding:               28px 0 48px;
}

.fe-sede-info-card {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding:       24px;
  box-shadow:    var(--fe-shadow);
}

.fe-sede-info-title {
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 16px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  color:         var(--fe-text);
}

.fe-sede-info-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        14px;
}

.fe-sede-info-list li {
  display:   flex;
  gap:       12px;
  font-size: .9rem;
  align-items: flex-start;
}

.fe-sede-info-label {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-weight: 600;
  color:       var(--fe-text-muted);
  min-width:   110px;
  flex-shrink: 0;
  font-size:   .85rem;
}

.fe-sede-info-list a {
  color:      var(--fe-primary);
  word-break: break-all;
}

/* Placeholder mappa (link Google Maps) */
.fe-maps-link { text-decoration: none }
.fe-maps-placeholder {
  background:      color-mix(in srgb, var(--fe-primary) 8%, var(--fe-bg));
  border:          2px dashed var(--fe-border);
  border-radius:   var(--fe-radius-sm);
  height:          180px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  color:           var(--fe-primary);
  font-size:       .9rem;
  font-weight:     600;
  transition:      background var(--fe-transition);
}
.fe-maps-placeholder i       { font-size: 2rem }
.fe-maps-link:hover .fe-maps-placeholder {
  background: color-mix(in srgb, var(--fe-primary) 15%, var(--fe-bg));
}

/* ── Responsive tab info ───────────────────────────────── */
@media (max-width: 768px) {
  .fe-sede-info-grid { grid-template-columns: 1fr }
}


/* ── 35. Menu header (menu-view.php) ──────────────────────── */
.fe-menu-header {
  background:    var(--fe-surface);
  border-bottom: 1px solid var(--fe-border);
  padding:       28px 0;
}
.fe-menu-header-inner {
  display:     flex;
  align-items: flex-start;
  gap:         24px;
  flex-wrap:   wrap;
}
.fe-menu-header-cover {
  width:         120px;
  height:        120px;
  border-radius: var(--fe-radius);
  overflow:      hidden;
  flex-shrink:   0;
  box-shadow:    var(--fe-shadow-md);
  background:    var(--fe-bg);
}
.fe-menu-header-cover img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.fe-menu-header-info  { flex: 1; min-width: 0 }
.fe-menu-header-tipo  {
  font-size:      .75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--fe-primary);
  margin-bottom:  6px;
}
.fe-menu-header-title {
  font-size:     clamp(1.3rem, 3vw, 1.9rem);
  font-weight:   800;
  margin-bottom: 6px;
  color:         var(--fe-text);
}
.fe-menu-header-sede {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       .87rem;
  color:           var(--fe-text-muted);
  text-decoration: none;
  margin-bottom:   8px;
  transition:      color var(--fe-transition);
}
.fe-menu-header-sede:hover   { color: var(--fe-primary); text-decoration: none }
.fe-menu-header-city         { opacity: .7 }
.fe-menu-header-descr {
  font-size:     .9rem;
  color:         var(--fe-text-muted);
  line-height:   1.55;
  margin-bottom: 12px;
}
.fe-menu-header-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         10px;
}
.fe-menu-header-price {
  font-size:   1.2rem;
  font-weight: 800;
  color:       var(--fe-text);
}
.fe-menu-header-price.has-promo {
  text-decoration: line-through;
  opacity:         .5;
  font-size:       1rem;
}
.fe-menu-header-count {
  font-size:   .82rem;
  color:       var(--fe-text-muted);
  display:     flex;
  align-items: center;
  gap:         4px;
}

/* QR code menù */
.fe-menu-qr {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  flex-shrink:    0;
}
.fe-menu-qr img {
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  padding:       4px;
  background:    #fff;
}
.fe-menu-qr-label {
  font-size:  .72rem;
  color:      var(--fe-text-muted);
  text-align: center;
}

/* Disclaimer */
.fe-menu-disclaimer {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    #fffbeb;
  border:        1px solid #fde68a;
  border-radius: var(--fe-radius-sm);
  padding:       12px 16px;
  font-size:     .875rem;
  color:         #92400e;
  margin-top:    16px;
  line-height:   1.5;
}
.fe-menu-disclaimer i { margin-top: 2px; flex-shrink: 0 }

/* Body del menù */
.fe-menu-body { padding-bottom: 60px }

/* Sezione tipo portata */
.fe-menu-section          { margin-top: 36px }
.fe-menu-section-title {
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--fe-text);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fe-border);
  margin-bottom: 14px;
  display:       flex;
  align-items:   center;
  gap:           10px;
}
.fe-menu-section-count {
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--fe-text-muted);
  background:  var(--fe-bg);
  border:      1px solid var(--fe-border);
  border-radius: 12px;
  padding:     2px 8px;
}

/* Portata row variante menù (più alta, note allergeni) */
.fe-portata-row--menu {
  align-items: flex-start;
  padding:     14px 16px;
  gap:         16px;
}
.fe-portata-row--menu .fe-portata-row-img {
  width:         80px;
  height:        80px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--fe-bg);
}
.fe-portata-row--menu .fe-portata-row-img-ph {
  width:         80px;
  height:        80px;
  flex-shrink:   0;
}
.fe-portata-row-img-link { flex-shrink: 0 }

.fe-portata-row-name-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  margin-bottom: 3px;
}
.fe-portata-row-name-link { text-decoration: none; color: inherit }
.fe-portata-row-name-link:hover .fe-portata-row-name { color: var(--fe-primary) }

.fe-portata-row-note {
  font-size:   .8rem;
  color:       var(--fe-text-muted);
  font-style:  italic;
  margin:      4px 0 0;
  display:     flex;
  align-items: flex-start;
  gap:         5px;
  line-height: 1.4;
}
.fe-portata-row-badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  margin-top:  6px;
}

/* Allergeni espandibili (details/summary) */
.fe-portata-allergeni-details { margin-top: 8px }
.fe-portata-allergeni-toggle {
  font-size:   .8rem;
  color:       var(--fe-text-muted);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         5px;
  list-style:  none;
  user-select: none;
  transition:  color var(--fe-transition);
}
.fe-portata-allergeni-toggle:hover         { color: var(--fe-text) }
.fe-portata-allergeni-toggle::-webkit-details-marker { display: none }
.fe-portata-allergeni-toggle::marker       { display: none }
.fe-portata-allergeni-details[open] .fe-portata-allergeni-toggle {
  color: var(--fe-text);
}
.fe-portata-allergeni-details .fe-allergeni-list { margin-top: 6px }

/* ── 36. Menu auth (menu-auth.php) ────────────────────────── */
.fe-menu-lock-cover {
  width:         80px;
  height:        80px;
  border-radius: var(--fe-radius);
  object-fit:    cover;
  margin:        0 auto 16px;
  display:       block;
  border:        2px solid var(--fe-border);
  box-shadow:    var(--fe-shadow);
}
.fe-menu-lock-sede {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       .85rem;
  color:           var(--fe-text-muted);
  text-decoration: none;
  margin-bottom:   20px;
  transition:      color var(--fe-transition);
}
.fe-menu-lock-sede:hover { color: var(--fe-primary); text-decoration: none }

.fe-menu-lock-form {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  margin-top:     20px;
  text-align:     left;
}
.fe-form-hint {
  font-size: .78rem;
  color:     var(--fe-text-muted);
  margin-top: 3px;
}

/* ── Responsive menu-view ─────────────────────────────────── */
@media (max-width: 640px) {
  .fe-menu-header-inner { flex-direction: column }
  .fe-menu-qr           { display: none }
  .fe-menu-header-cover { width: 80px; height: 80px }
  .fe-portata-row--menu .fe-portata-row-img,
  .fe-portata-row--menu .fe-portata-row-img-ph { width: 60px; height: 60px }
}


/* ── 37. Portate page header ──────────────────────────────── */
.fe-portate-page-header {
  background:    var(--fe-surface);
  border-bottom: 1px solid var(--fe-border);
  padding:       20px 0 0;
}
.fe-portate-page-header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   16px;
  flex-wrap:       wrap;
}

/* Sede info compatta */
.fe-portate-sede-info {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.fe-portate-sede-logo {
  width:         40px;
  height:        40px;
  border-radius: var(--fe-radius-sm);
  object-fit:    cover;
  border:        1px solid var(--fe-border);
}
.fe-portate-sede-logo-ph {
  width:           40px;
  height:          40px;
  border-radius:   var(--fe-radius-sm);
  background:      var(--fe-primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1rem;
  flex-shrink:     0;
}
.fe-portate-sede-name {
  font-size:       .95rem;
  font-weight:     700;
  color:           var(--fe-text);
  text-decoration: none;
  display:         block;
  line-height:     1.25;
}
.fe-portate-sede-name:hover  { color: var(--fe-primary); text-decoration: none }
.fe-portate-sede-sub         { font-size: .78rem; color: var(--fe-text-muted); margin-top: 2px }

/* Barra filtri con contatori */
.fe-portate-filters-wrap {
  display:       flex;
  gap:           6px;
  flex-wrap:     wrap;
  padding-bottom: 14px;
  overflow-x:    auto;
  scrollbar-width: none;
}
.fe-portate-filters-wrap::-webkit-scrollbar { display: none }

.fe-filter-count {
  font-size:   .72rem;
  font-weight: 700;
  opacity:     .75;
  margin-left: 3px;
}

/* Griglia portate ridotta (correlate) */
.fe-portate-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Sezione correlate */
.fe-correlate-section {
  background:    var(--fe-bg);
  border-top:    1px solid var(--fe-border);
  margin-top:    0;
  padding-top:   36px;
}


/* ── 38. Portata dettaglio — componenti aggiuntivi ────────── */
.fe-portata-detail-badges {
  margin-bottom: 20px;
}
.fe-portata-detail-cta {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  margin:      24px 0;
}

/* Griglia allergeni completa */
.fe-allergeni-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   6px;
  margin-top:            8px;
}
.fe-allergene-item {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       7px 10px;
  border-radius: var(--fe-radius-xs);
  border:        1px solid var(--fe-border);
  background:    var(--fe-bg);
  font-size:     .8rem;
  color:         var(--fe-text-muted);
  transition:    all var(--fe-transition);
}
.fe-allergene-item.is-present {
  background:   #fff3cd;
  border-color: #ffc107;
  color:        #664d03;
  font-weight:  600;
}
.fe-allergene-icon        { font-size: .9rem; flex-shrink: 0 }
.fe-allergene-item .bi-check-circle           { color: #adb5bd }
.fe-allergene-item.is-present .bi-exclamation-triangle-fill { color: #e6a817 }
.fe-allergeni-nessuno {
  font-size:   .875rem;
  color:       var(--fe-text-muted);
  margin:      8px 0 0;
}

/* Lista menù in cui compare */
.fe-portata-menu-list {
  margin-top:  20px;
  padding-top: 20px;
  border-top:  1px solid var(--fe-border);
}
.fe-portata-menu-list-title {
  font-size:   .82rem;
  font-weight: 700;
  color:       var(--fe-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
  display:     flex;
  align-items: center;
  gap:         6px;
}
.fe-portata-menu-list ul {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.fe-portata-menu-list li {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px;
}
.fe-portata-menu-link {
  display:         flex;
  align-items:     center;
  gap:             7px;
  font-size:       .875rem;
  font-weight:     500;
  color:           var(--fe-primary);
  text-decoration: none;
  transition:      color var(--fe-transition);
}
.fe-portata-menu-link:hover { color: var(--fe-secondary); text-decoration: underline }
.fe-portata-menu-priv {
  color:  var(--fe-text-muted);
  cursor: default;
}
.fe-portata-menu-nota {
  font-size:  .8rem;
  color:      var(--fe-text-muted);
  font-style: italic;
}

/* QR portata */
.fe-portata-qr {
  margin-top:  20px;
  padding-top: 20px;
  border-top:  1px solid var(--fe-border);
  display:     flex;
  align-items: center;
  gap:         14px;
}
.fe-portata-qr img {
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  padding:       4px;
  background:    #fff;
  flex-shrink:   0;
}
.fe-portata-qr-label {
  font-size:  .8rem;
  color:      var(--fe-text-muted);
  line-height: 1.4;
}

/* Responsive dettaglio portata */
@media (max-width: 768px) {
  .fe-portata-detail-cta { flex-direction: column }
  .fe-portata-detail-cta .fe-btn { justify-content: center }
  .fe-allergeni-grid { grid-template-columns: repeat(2, 1fr) }
  .fe-portata-qr { flex-direction: column; align-items: flex-start }
}
@media (max-width: 480px) {
  .fe-allergeni-grid { grid-template-columns: 1fr }
}


/* ── 39. Features page ────────────────────────────────────── */

/* Hero */
.fe-feat-hero {
  background:    linear-gradient(135deg,
                   color-mix(in srgb, var(--fe-primary) 8%, var(--fe-bg)) 0%,
                   var(--fe-bg) 100%);
  border-bottom: 1px solid var(--fe-border);
  padding:       72px 0 80px;
}
.fe-feat-hero-inner {
  display:     grid;
  grid-template-columns: 1fr 420px;
  gap:         60px;
  align-items: center;
}
.fe-feat-hero-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         5px 14px;
  border-radius:   20px;
  background:      color-mix(in srgb, var(--fe-primary) 12%, transparent);
  color:           var(--fe-primary);
  font-size:       .8rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .06em;
  margin-bottom:   18px;
}
.fe-feat-hero-title {
  font-size:     clamp(1.9rem, 4vw, 2.9rem);
  font-weight:   900;
  line-height:   1.15;
  margin-bottom: 16px;
  color:         var(--fe-text);
}
.fe-feat-hero-accent { color: var(--fe-primary) }
.fe-feat-hero-sub {
  font-size:     1.05rem;
  color:         var(--fe-text-muted);
  line-height:   1.65;
  margin-bottom: 32px;
  max-width:     520px;
}
.fe-feat-hero-ctas {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fe-feat-hero-note {
  font-size:   .82rem;
  color:       var(--fe-text-muted);
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

/* Mock telefono */
.fe-feat-hero-preview {
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.fe-feat-mock-phone {
  width:         220px;
  height:        400px;
  border-radius: 28px;
  background:    var(--fe-surface);
  border:        8px solid var(--fe-text);
  box-shadow:    var(--fe-shadow-lg);
  overflow:      hidden;
  position:      relative;
}
.fe-feat-mock-screen { padding: 14px 12px; display: flex; flex-direction: column; gap: 10px }
.fe-feat-mock-bar {
  height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--fe-primary) 80%, transparent);
  margin-bottom: 4px;
}
.fe-feat-mock-item {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
}
.fe-feat-mock-img {
  width:         52px; height: 52px;
  border-radius: 8px; flex-shrink: 0;
  background:    color-mix(in srgb, var(--fe-primary) 18%, var(--fe-bg));
}
.fe-feat-mock-img--2 { background: color-mix(in srgb, var(--fe-accent) 18%, var(--fe-bg)) }
.fe-feat-mock-img--3 { background: color-mix(in srgb, var(--fe-secondary) 18%, var(--fe-bg)) }
.fe-feat-mock-info   { flex: 1; display: flex; flex-direction: column; gap: 5px }
.fe-feat-mock-title  { height: 9px; border-radius: 4px; background: var(--fe-border); width: 80% }
.fe-feat-mock-sub    { height: 7px; border-radius: 4px; background: var(--fe-border); width: 60%; opacity: .6 }
.fe-feat-mock-sub--short { width: 40% }
.fe-feat-mock-price {
  height: 9px; border-radius: 4px; width: 30%;
  background: color-mix(in srgb, var(--fe-primary) 40%, transparent);
}
.fe-feat-mock-btn {
  height:        36px;
  border-radius: 18px;
  background:    var(--fe-primary);
  margin-top:    4px;
  opacity:       .85;
}

/* Griglia feature */
.fe-features-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   24px;
}
.fe-feature-card {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding:       28px 24px;
  box-shadow:    var(--fe-shadow);
  transition:    transform var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-feature-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--fe-shadow-md);
}
.fe-feature-icon {
  width:           48px;
  height:          48px;
  border-radius:   var(--fe-radius-sm);
  background:      color-mix(in srgb, var(--fe-primary) 12%, transparent);
  color:           var(--fe-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.35rem;
  margin-bottom:   14px;
}
.fe-feature-title  { font-size: .975rem; font-weight: 700; margin-bottom: 7px; color: var(--fe-text) }
.fe-feature-descr  { font-size: .875rem; color: var(--fe-text-muted); line-height: 1.5 }

/* Sezione prezzi */
.fe-pricing-section { background: var(--fe-bg) }
.fe-pricing-header  { text-align: center; margin-bottom: 44px }
.fe-pricing-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
  align-items:           stretch;
}

.fe-pricing-card {
  background:     var(--fe-surface);
  border:         2px solid var(--fe-border);
  border-radius:  var(--fe-radius);
  box-shadow:     var(--fe-shadow);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  position:       relative;
  transition:     transform var(--fe-transition), box-shadow var(--fe-transition);
}
.fe-pricing-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--fe-shadow-lg);
}
.fe-pricing-card--popular {
  border-color: var(--pricing-accent, var(--fe-primary));
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--pricing-accent, var(--fe-primary)) 18%, transparent),
                var(--fe-shadow-md);
  transform:    translateY(-6px);
}
.fe-pricing-badge-popular {
  background:  var(--pricing-accent, var(--fe-primary));
  color:       #fff;
  font-size:   .72rem;
  font-weight: 700;
  text-align:  center;
  padding:     5px 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fe-pricing-head {
  padding:    24px 20px 20px;
  text-align: center;
}
.fe-pricing-icon {
  font-size:      1.6rem;
  color:          var(--pricing-accent, var(--fe-primary));
  margin-bottom:  8px;
}
.fe-pricing-name {
  font-size:     1rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--fe-text);
  margin-bottom:  14px;
}
.fe-pricing-price  { display: flex; flex-direction: column; align-items: center; gap: 2px }
.fe-pricing-amount {
  display:     block;
  font-size:   2rem;
  font-weight: 900;
  color:       var(--pricing-accent, var(--fe-primary));
  line-height: 1;
}
.fe-pricing-period {
  font-size:  .8rem;
  color:      var(--fe-text-muted);
  margin-top: 3px;
  display:    block;
}
.fe-pricing-sconto-badge {
  margin-top:   6px;
  font-size:    .72rem;
  font-weight:  600;
  color:        var(--pricing-accent, var(--fe-primary));
  background:   color-mix(in srgb, var(--pricing-accent, var(--fe-primary)) 10%, transparent);
  border:       1px solid color-mix(in srgb, var(--pricing-accent, var(--fe-primary)) 30%, transparent);
  border-radius: 999px;
  padding:      2px 10px;
}

/* Limiti — nuova struttura label/val */
.fe-pricing-limits {
  list-style: none;
  padding:    0 20px;
  margin:     0 0 20px;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}
.fe-pricing-limit-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-size:       .875rem;
  color:           var(--fe-text);
}
.fe-pricing-limit-label {
  display:     flex;
  align-items: center;
  gap:         6px;
  color:       var(--fe-text-muted);
}
.fe-pricing-limit-label i { font-size: .9rem; width: 16px; flex-shrink: 0 }
.fe-pricing-limit-val  { font-weight: 600; color: var(--fe-text) }
.fe-pricing-limit-inf  { font-weight: 700; color: var(--pricing-accent, var(--fe-primary)) }
.fe-feat-check { color: var(--fe-primary) }
.fe-feat-cross { color: var(--fe-text-muted) }

/* Footer card */
.fe-pricing-foot { margin-top: auto; padding: 0 20px 20px }
.fe-pricing-cta  { width: 100%; justify-content: center; margin-bottom: 8px }
.fe-pricing-note {
  text-align:  center;
  font-size:   .75rem;
  color:       var(--fe-text-muted);
  margin:      0;
}

/* Card "esigenze particolari" */
.fe-pricing-custom-card {
  margin-top:    28px;
  background:    var(--fe-surface);
  border:        2px dashed var(--fe-border);
  border-radius: var(--fe-radius);
  padding:       24px 28px;
  display:       flex;
  align-items:   center;
  gap:           20px;
  flex-wrap:     wrap;
}
.fe-pricing-custom-icon {
  font-size:   2rem;
  color:       var(--fe-primary);
  flex-shrink: 0;
}
.fe-pricing-custom-body { flex: 1; min-width: 200px }
.fe-pricing-custom-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--fe-text);
  margin:      0 0 6px;
}
.fe-pricing-custom-text {
  font-size: .875rem;
  color:     var(--fe-text-muted);
  margin:    0;
}
.fe-pricing-custom-cta { flex-shrink: 0 }

.fe-pricing-upgrade-note {
  text-align:  center;
  font-size:   .875rem;
  color:       var(--fe-text-muted);
  margin-top:  24px;
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         8px;
}

/* Tabella confronto */
.fe-compare-section { background: var(--fe-surface); border-top: 1px solid var(--fe-border) }
.fe-compare-title   { margin-bottom: 28px }
.fe-compare-wrap    { overflow-x: auto; border-radius: var(--fe-radius); border: 1px solid var(--fe-border) }
.fe-compare-table   { width: 100%; border-collapse: collapse; font-size: .875rem }
.fe-compare-table thead tr { background: var(--fe-bg) }
.fe-compare-table th,
.fe-compare-table td        { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--fe-border) }
.fe-compare-feat-col        { text-align: left; min-width: 200px }
.fe-compare-plan-col {
  min-width:   100px;
  font-weight: 700;
  font-size:   .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:       var(--pricing-accent, var(--fe-primary));
}
.fe-compare-feat-name {
  text-align:  left;
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       var(--fe-text);
  font-weight: 500;
}
.fe-compare-feat-name i { color: var(--fe-text-muted); font-size: .85rem }
.fe-compare-cell.is-yes { color: var(--fe-primary) }
.fe-compare-cell.is-no  { color: var(--fe-border) }
.fe-compare-table tbody tr:hover { background: var(--fe-bg) }
.fe-compare-table tbody tr:last-child td { border-bottom: none }
.fe-compare-cta-row td { padding: 14px 16px }
.fe-compare-cta-btn    { width: 100%; justify-content: center }

/* FAQ */
.fe-faq-section   { background: var(--fe-bg) }
.fe-faq-inner {
  display:               grid;
  grid-template-columns: 280px 1fr;
  gap:                   48px;
  align-items:           start;
}
.fe-faq-list { display: flex; flex-direction: column; gap: 4px }
.fe-faq-item {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  overflow:      hidden;
}
.fe-faq-question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 18px;
  cursor:          pointer;
  font-size:       .9rem;
  font-weight:     600;
  color:           var(--fe-text);
  list-style:      none;
  gap:             12px;
  user-select:     none;
  transition:      background var(--fe-transition);
}
.fe-faq-question::-webkit-details-marker { display: none }
.fe-faq-question::marker                 { display: none }
.fe-faq-question:hover                   { background: var(--fe-bg) }
.fe-faq-icon { flex-shrink: 0; transition: transform .2s ease }
details[open] .fe-faq-icon { transform: rotate(45deg) }
.fe-faq-answer {
  padding:     0 18px 16px;
  font-size:   .875rem;
  color:       var(--fe-text-muted);
  line-height: 1.6;
  margin:      0;
}

/* CTA bottom */
.fe-feat-cta-bottom {
  background:  linear-gradient(135deg, var(--fe-primary) 0%, var(--fe-secondary) 100%);
  color:       #fff;
  padding:     80px 20px;
}
.fe-feat-cta-inner {
  text-align: center;
}
.fe-feat-cta-title {
  font-size:     clamp(1.5rem, 3vw, 2rem);
  font-weight:   800;
  color:         #fff;
  margin-bottom: 12px;
}
.fe-feat-cta-sub {
  font-size:     1rem;
  opacity:       .88;
  margin-bottom: 32px;
}
.fe-feat-cta-login-note {
  margin-top: 14px;
  font-size:  .85rem;
  opacity:    .7;
}
.fe-feat-cta-login-note a {
  color:       inherit;
  font-weight: 600;
}

/* Responsive features */
@media (max-width: 1024px) {
  .fe-feat-hero-inner { grid-template-columns: 1fr; }
  .fe-feat-hero-preview { display: none }
  .fe-faq-inner { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .fe-feat-hero { padding: 44px 0 52px }
  .fe-pricing-grid { grid-template-columns: 1fr 1fr; align-items: stretch }
  .fe-pricing-card--popular { transform: none }
}
@media (max-width: 480px) {
  .fe-pricing-grid { grid-template-columns: 1fr }
}


/* ── 40. Registrazione ────────────────────────────────────── */
.fe-register-wrap {
  display:               grid;
  grid-template-columns: 1fr 380px;
  gap:                   48px;
  align-items:           start;
  padding:               48px 0 72px;
  max-width:             960px;
  margin:                0 auto;
}

.fe-register-card {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  box-shadow:    var(--fe-shadow-md);
  padding:       40px 36px;
}

.fe-register-head  { text-align: center; margin-bottom: 28px }
.fe-register-icon  { font-size: 2.2rem; color: var(--fe-primary); margin-bottom: 12px }
.fe-register-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px }
.fe-register-sub   { font-size: .9rem; color: var(--fe-text-muted) }

/* Due colonne nome/cognome */
.fe-register-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

.fe-form-required { color: var(--fe-accent); margin-left: 2px }

/* Honeypot — visivamente nascosto ma non con display:none (che i bot ignorano) */
.fe-register-honeypot {
  position:   absolute;
  left:       -9999px;
  top:        -9999px;
  opacity:    0;
  height:     0;
  overflow:   hidden;
  tabindex:   -1;
}

/* Password strength */
.fe-pwd-strength { margin-top: 7px }
.fe-pwd-strength-bar {
  height:        5px;
  border-radius: 3px;
  background:    var(--fe-border);
  overflow:      hidden;
  margin-bottom: 5px;
}
.fe-pwd-strength-fill {
  height:     100%;
  width:      var(--pwd-fill-w, 0%);
  border-radius: 3px;
  transition: width .3s ease, background-color .3s ease;
}
/* Colori strength via classi — nessun inline style */
.fe-pwd-s-weak   { background-color: #dc2626 }
.fe-pwd-s-poor   { background-color: #f97316 }
.fe-pwd-s-fair   { background-color: #eab308 }
.fe-pwd-s-good   { background-color: #22c55e }
.fe-pwd-s-strong { background-color: #16a34a }

.fe-pwd-strength-label              { font-size: .78rem; font-weight: 600 }
.fe-pwd-strength-label[data-level="fe-pwd-s-weak"]   { color: #dc2626 }
.fe-pwd-strength-label[data-level="fe-pwd-s-poor"]   { color: #f97316 }
.fe-pwd-strength-label[data-level="fe-pwd-s-fair"]   { color: #eab308 }
.fe-pwd-strength-label[data-level="fe-pwd-s-good"]   { color: #22c55e }
.fe-pwd-strength-label[data-level="fe-pwd-s-strong"] { color: #16a34a }

/* Checklist requisiti password */
.fe-pwd-requirements {
  list-style:    none;
  padding:       0;
  margin:        8px 0 0;
  display:       none;
  flex-direction: column;
  gap:           3px;
}
.fe-pwd-requirements--visible,
#password:focus ~ .fe-pwd-requirements,
.fe-pwd-requirements:has(.fe-pwd-req[data-ok="0"]) { display: flex }
.fe-pwd-req {
  font-size:   .76rem;
  color:       var(--fe-text-muted, #6b7280);
  display:     flex;
  align-items: center;
  gap:         5px;
  transition:  color .2s;
}
.fe-pwd-req[data-ok="1"]    { color: #16a34a }
.fe-pwd-req[data-ok="0"] i  { color: #dc2626 }
.fe-pwd-req[data-ok="1"] i  { color: #16a34a }

/* Match hint — colori via data-state (nessun inline style) */
.fe-pwd-match-hint                   { font-size: .8rem; font-weight: 600; margin-top: 4px; display: block }
.fe-pwd-match-hint[data-state="ok"]  { color: #16a34a }
.fe-pwd-match-hint[data-state="err"] { color: #dc2626 }

/* Button full-width */
.fe-btn-full { width: 100%; margin-top: 8px }

/* Pannello conferma registrazione (dopo invio email verifica) */
.fe-register-confirm {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         32px 16px 24px;
  gap:             12px;
}
.fe-register-confirm-icon {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      color-mix(in srgb, var(--fe-primary, #2d8a00) 12%, transparent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  color:           var(--fe-primary, #2d8a00);
}
.fe-register-confirm-title {
  font-size:    1.25rem;
  font-weight:  700;
  color:        var(--fe-text, #212529);
  margin:       0;
}
.fe-register-confirm-body {
  font-size:    .92rem;
  color:        var(--fe-text-muted, #6c757d);
  line-height:  1.6;
  margin:       0;
  max-width:    380px;
}
.fe-register-confirm-body strong { color: var(--fe-text, #212529) }




/* GDPR checkbox */
.fe-register-gdpr   { margin: 20px 0 }
.fe-register-check-label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   .875rem;
  color:       var(--fe-text);
  cursor:      pointer;
  line-height: 1.5;
}
.fe-register-check-label input[type="checkbox"] {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  margin-top:  2px;
  accent-color: var(--fe-primary);
  cursor:      pointer;
}
.fe-register-errors {
  list-style:  none;
  padding:     0;
  margin:      4px 0 0;
}
.fe-register-errors li { margin-bottom: 3px }
.fe-register-errors a  { color: inherit; text-decoration: underline }

.fe-register-footer {
  text-align:  center;
  font-size:   .82rem;
  color:       var(--fe-text-muted);
  margin-top:  20px;
}
.fe-register-footer a          { color: var(--fe-primary); font-weight: 600 }
.fe-register-footer-sep        { margin: 0 6px; opacity: .5 }

/* Colonna vantaggi (aside) */
.fe-register-aside       { padding-top: 8px }
.fe-register-aside-title { font-size: .95rem; font-weight: 700; margin-bottom: 20px; color: var(--fe-text-muted); text-transform: uppercase; letter-spacing: .05em }
.fe-register-benefits    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px }
.fe-register-benefit {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
}
.fe-register-benefit-icon {
  width:           38px;
  height:          38px;
  border-radius:   var(--fe-radius-sm);
  background:      color-mix(in srgb, var(--fe-primary) 10%, transparent);
  color:           var(--fe-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  flex-shrink:     0;
}
.fe-register-benefit strong { display: block; font-size: .875rem; color: var(--fe-text) }
.fe-register-benefit span   { font-size: .8rem; color: var(--fe-text-muted) }

.fe-register-plan-note {
  margin-top:    28px;
  background:    color-mix(in srgb, var(--fe-primary) 8%, var(--fe-bg));
  border:        1px solid color-mix(in srgb, var(--fe-primary) 20%, transparent);
  border-radius: var(--fe-radius-sm);
  padding:       16px 18px;
  text-align:    center;
}
.fe-register-plan-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fe-text-muted); margin-bottom: 4px }
.fe-register-plan-name  { font-size: 1.1rem; font-weight: 800; color: var(--fe-text) }
.fe-register-plan-price { font-size: .875rem; color: var(--fe-primary); font-weight: 600 }

/* Responsive registrazione */
@media (max-width: 860px) {
  .fe-register-wrap  { grid-template-columns: 1fr }
  .fe-register-aside { display: none }
  .fe-register-card  { padding: 28px 24px }
}
@media (max-width: 480px) {
  .fe-register-row { grid-template-columns: 1fr }
}

/* Nota nel login dopo registrazione */
.fe-reg-success-banner {
  background:    #d1fae5;
  border:        1px solid #a7f3d0;
  border-radius: var(--fe-radius-sm);
  padding:       12px 16px;
  font-size:     .9rem;
  color:         #065f46;
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 20px;
}

/* ── Verifica email (verifica-email.php) ──────────────────── */
.fe-verify-wrap {
  min-height:      60vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         40px 16px;
}

.fe-verify-card {
  background:    var(--fe-surface);
  border:        1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding:       48px 40px;
  max-width:     480px;
  width:         100%;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           16px;
  box-shadow:    0 4px 24px rgba(0,0,0,.07);
}

/* Icona centrale — colore varia per stato */
.fe-verify-icon {
  width:           72px;
  height:          72px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       32px;
  flex-shrink:     0;
}

/* Stato: invalido / generico */
.fe-verify--invalid .fe-verify-icon {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color:      #dc2626;
}

/* Stato: scaduto */
.fe-verify--expired .fe-verify-icon {
  background: color-mix(in srgb, #f97316 10%, transparent);
  color:      #f97316;
}

/* Stato: già verificato */
.fe-verify--already .fe-verify-icon {
  background: color-mix(in srgb, var(--fe-primary, #2d8a00) 12%, transparent);
  color:      var(--fe-primary, #2d8a00);
}

.fe-verify-title {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--fe-text);
  margin:      0;
  line-height: 1.3;
}

.fe-verify-body {
  font-size:  .92rem;
  color:      var(--fe-text-muted);
  line-height: 1.65;
  margin:     0;
}

.fe-verify-email {
  font-size:   .85rem;
  color:       var(--fe-text-muted);
  background:  color-mix(in srgb, var(--fe-border) 60%, transparent);
  border:      1px solid var(--fe-border);
  border-radius: var(--fe-radius-sm);
  padding:     6px 14px;
  margin:      0;
  display:     flex;
  align-items: center;
  gap:         6px;
}

@media (max-width: 520px) {
  .fe-verify-card { padding: 36px 24px; }
}



/* ═══════════════════════════════════════════════════════════════
   AGGIUNTE — Menù fissi con prezzo (menu-view.php)
   Aggiungere in fondo al frontend.css esistente
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottone secondario (Extra) ───────────────────────────── */
.fe-btn-secondary {
  background:   transparent;
  color:        var(--fe-primary);
  border-color: var(--fe-primary);
}
.fe-btn-secondary:hover {
  background:   var(--fe-primary);
  color:        #fff;
}

/* ── CTA "Aggiungi menù completo" ─────────────────────────── */
.fe-menu-cta {
  margin-top: 18px;
  display:    flex;
  flex-direction: column;
  align-items: flex-start;
  gap:         8px;
}

/* Il bottone usa fe-btn-primary + questa classe per dimensionarlo */
.fe-btn-menu-add {
  padding:     11px 22px;
  font-size:   .95rem;
  font-weight: 700;
  gap:         10px;
  display:     inline-flex;
  align-items: center;
  flex-wrap:   wrap;
}

/* Prezzo dentro il bottone "Aggiungi menù" */
.fe-menu-cta-price {
  background:    rgba(255,255,255,.22);
  border-radius: 20px;
  padding:       2px 10px;
  font-size:     .88rem;
  font-weight:   800;
  letter-spacing: .01em;
}

/* Hint testuale sotto il bottone menù */
.fe-menu-cta-hint {
  font-size:  .78rem;
  color:      var(--fe-text-muted);
  display:    flex;
  align-items: flex-start;
  gap:        6px;
  margin:     0;
  line-height: 1.45;
}
.fe-menu-cta-hint i { margin-top: 1px; flex-shrink: 0 }

/* ── Banner informativo portate incluse ───────────────────── */
.fe-menu-section-hint {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    color-mix(in srgb, var(--fe-primary) 8%, transparent);
  border:        1px solid color-mix(in srgb, var(--fe-primary) 25%, transparent);
  border-radius: var(--fe-radius-sm);
  padding:       10px 14px;
  font-size:     .82rem;
  color:         var(--fe-text);
  margin-bottom: 8px;
  line-height:   1.5;
}
.fe-menu-section-hint i { margin-top: 2px; flex-shrink: 0; color: var(--fe-primary) }

/* ── Badge "Incluso" (portate nel menù fisso) ─────────────── */
.fe-badge-incluso {
  background: color-mix(in srgb, var(--fe-primary) 12%, transparent);
  color:      var(--fe-primary);
  border:     1px solid color-mix(in srgb, var(--fe-primary) 30%, transparent);
  font-size:  .68rem;
  padding:    2px 8px;
}

/* ── Prezzo portata "extra" (barrato, tono ridotto) ───────── */
.fe-portata-price--extra {
  font-size:       .82rem;
  font-weight:     500;
  color:           var(--fe-text-muted);
  text-decoration: line-through;
  opacity:         .7;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .fe-btn-menu-add {
    width:           100%;
    justify-content: center;
  }
  .fe-menu-cta { align-items: stretch }
}

/* ═══════════════════════════════════════════════════════════════
   AGGIUNTE — Menù fissi con prezzo (menu-view.php)
   Aggiungere in fondo al frontend.css esistente
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottone secondario (Extra) ───────────────────────────── */
.fe-btn-secondary {
  background:   transparent;
  color:        var(--fe-primary);
  border-color: var(--fe-primary);
}
.fe-btn-secondary:hover {
  background:   var(--fe-primary);
  color:        #fff;
}

/* ── CTA "Aggiungi menù completo" ─────────────────────────── */
.fe-menu-cta {
  margin-top: 18px;
  display:    flex;
  flex-direction: column;
  align-items: flex-start;
  gap:         8px;
}

/* Il bottone usa fe-btn-primary + questa classe per dimensionarlo */
.fe-btn-menu-add {
  padding:     11px 22px;
  font-size:   .95rem;
  font-weight: 700;
  gap:         10px;
  display:     inline-flex;
  align-items: center;
  flex-wrap:   wrap;
}

/* Prezzo dentro il bottone "Aggiungi menù" */
.fe-menu-cta-price {
  background:    rgba(255,255,255,.22);
  border-radius: 20px;
  padding:       2px 10px;
  font-size:     .88rem;
  font-weight:   800;
  letter-spacing: .01em;
}

/* Hint testuale sotto il bottone menù */
.fe-menu-cta-hint {
  font-size:  .78rem;
  color:      var(--fe-text-muted);
  display:    flex;
  align-items: flex-start;
  gap:        6px;
  margin:     0;
  line-height: 1.45;
}
.fe-menu-cta-hint i { margin-top: 1px; flex-shrink: 0 }

/* ── Banner informativo portate incluse ───────────────────── */
.fe-menu-section-hint {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    color-mix(in srgb, var(--fe-primary) 8%, transparent);
  border:        1px solid color-mix(in srgb, var(--fe-primary) 25%, transparent);
  border-radius: var(--fe-radius-sm);
  padding:       10px 14px;
  font-size:     .82rem;
  color:         var(--fe-text);
  margin-bottom: 8px;
  line-height:   1.5;
}
.fe-menu-section-hint i { margin-top: 2px; flex-shrink: 0; color: var(--fe-primary) }

/* ── Badge "Incluso" (portate nel menù fisso) ─────────────── */
.fe-badge-incluso {
  background: color-mix(in srgb, var(--fe-primary) 12%, transparent);
  color:      var(--fe-primary);
  border:     1px solid color-mix(in srgb, var(--fe-primary) 30%, transparent);
  font-size:  .68rem;
  padding:    2px 8px;
}

/* ── Prezzo portata "extra" (barrato, tono ridotto) ───────── */
.fe-portata-price--extra {
  font-size:       .82rem;
  font-weight:     500;
  color:           var(--fe-text-muted);
  text-decoration: line-through;
  opacity:         .7;
}

/* ── Warning: nessun tavolo selezionato ───────────────────── */
.fe-cart-table-warn {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    #fffbeb;
  border:        1px solid #fde68a;
  border-radius: var(--fe-radius-sm);
  color:         #92400e;
  font-size:     .82rem;
  font-weight:   500;
  padding:       9px 12px;
  margin-bottom: 10px;
  transition:    opacity .2s;
}
.fe-cart-table-warn:hover {
  background:    #fef3c7;
  border-color:  #f59e0b;
}
.fe-cart-table-warn i {
  color:       #d97706;
  flex-shrink: 0;
}

/* Selettore tavolo in evidenza quando mancante */
.fe-table-select.is-no-table {
  border-color: #f59e0b !important;
  background:   #fffbeb;
}

/* ── Blocco menù nel drawer carrello ──────────────────────── */

/* Contenitore principale del blocco menù */
.fe-cart-menu-block {
  border:        1px solid color-mix(in srgb, var(--fe-primary) 30%, transparent);
  border-radius: var(--fe-radius-sm);
  overflow:      hidden;
  background:    color-mix(in srgb, var(--fe-primary) 5%, var(--fe-bg));
  margin-bottom: 2px;
}

/* Header: icona + nome + qty + prezzo */
.fe-cart-menu-header {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     12px 14px 10px;
  background:  color-mix(in srgb, var(--fe-primary) 10%, transparent);
}

/* Icona menù (giornale) */
.fe-cart-menu-icon {
  font-size:  1.1rem;
  color:      var(--fe-primary);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Contatore "N portate incluse" sotto il nome */
.fe-cart-menu-count {
  font-size:  .72rem;
  color:      var(--fe-text-muted);
  margin-top: 2px;
}

/* Lista portate incluse */
.fe-cart-menu-portate {
  list-style: none;
  margin:     0;
  padding:    8px 14px 10px 14px;
  display:    flex;
  flex-direction: column;
  gap:        4px;
  border-top: 1px solid color-mix(in srgb, var(--fe-primary) 20%, transparent);
}

/* Singola portata inclusa */
.fe-cart-menu-portata {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   .8rem;
  color:       var(--fe-text);
}

/* Check icon (verde o primary) */
.fe-cart-menu-check {
  color:       var(--fe-primary);
  font-size:   .85rem;
  flex-shrink: 0;
}

/* Nome portata (cresce) */
.fe-cart-menu-portata-nome {
  flex:       1;
  min-width:  0;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge "incluso" */
.fe-cart-menu-incluso {
  font-size:   .68rem;
  font-weight: 600;
  color:       var(--fe-primary);
  background:  color-mix(in srgb, var(--fe-primary) 12%, transparent);
  border:      1px solid color-mix(in srgb, var(--fe-primary) 25%, transparent);
  border-radius: 10px;
  padding:     1px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .fe-btn-menu-add {
    width:           100%;
    justify-content: center;
  }
  .fe-menu-cta { align-items: stretch }
}

/* ============================================================
   PRENOTA — Form prenotazione pubblica
   ============================================================ */

.fe-prenota-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0 64px;
}

/* Intestazione */
.fe-prenota-head {
  text-align: center;
  margin-bottom: 32px;
}
.fe-prenota-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--fe-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.fe-prenota-icon--ok {
  background: #16a34a;
}
.fe-prenota-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fe-text);
  margin: 0 0 8px;
}
.fe-prenota-sub {
  font-size: .95rem;
  color: var(--fe-text-muted);
  margin: 0;
}

/* Errori lista */
.fe-prenota-errors {
  margin: 6px 0 0 16px;
  padding: 0;
}
.fe-prenota-errors li { margin-bottom: 4px }

/* Honeypot */
.fe-prenota-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  tabindex: -1;
}

/* Riga doppia (nome+cognome, data+ora) */
.fe-prenota-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .fe-prenota-row { grid-template-columns: 1fr }
}

/* Select e textarea con stile fe-input */
.fe-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.fe-textarea { resize: vertical; min-height: 80px }

/* Privacy checkbox */
.fe-prenota-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--fe-text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.fe-prenota-privacy input { margin-top: 3px; accent-color: var(--fe-primary) }
.fe-prenota-privacy a { color: var(--fe-primary) }

/* Submit */
.fe-prenota-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Nota informativa sotto submit */
.fe-prenota-note {
  text-align: center;
  font-size: .83rem;
  color: var(--fe-text-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.fe-prenota-note i { margin-right: 4px }

/* Label opzionale */
.fe-form-label-opt {
  font-size: .8rem;
  color: var(--fe-text-muted);
  font-weight: 400;
}

/* ── prenota-ok.php ─────────────────────────────────────────── */
.fe-prenota-head--ok { padding: 8px 0 }

.fe-prenota-summary {
  background: var(--fe-surface);
  border: 1px solid var(--fe-border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.fe-prenota-summary-title {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fe-text-muted);
  margin: 0 0 14px;
}
.fe-prenota-summary-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fe-prenota-summary-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; color: var(--fe-text);
}
.fe-prenota-summary-list i {
  color: var(--fe-primary);
  font-size: 1.1rem;
  width: 20px; text-align: center;
}

.fe-prenota-ok-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
}
.fe-prenota-ok-actions .fe-btn { flex: 1; justify-content: center }

/* ── prenota-annulla.php — icone colorate CSP-safe ─────────── */
.fe-prenota-icon--danger  { background: #dc2626 }
.fe-prenota-icon--gray    { background: #64748b }
.fe-prenota-icon--warning { background: #d97706 }

/* Pulsante conferma annullamento (rosso) */
.fe-btn-annulla-confirm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px;
  font-size: 1rem; font-weight: 600;
  background: #dc2626; color: #fff;
  border: none; cursor: pointer; text-decoration: none;
}
.fe-btn-annulla-confirm:hover  { background: #b91c1c; color: #fff; text-decoration: none }
.fe-btn-annulla-confirm:active { transform: scale(.98) }
.fe-btn-annulla-confirm:disabled { opacity: .6; cursor: not-allowed }
/* ══════════════════════════════════════════════════════════════
   Dark mode frontend — v1.1
   Vars neutrali sovrascritte; colori brand del gestore
   (--fe-primary, --fe-accent) rimangono invariati.
   ══════════════════════════════════════════════════════════════ */

/* Auto: segue OS, ignorato se l'utente ha scelto manualmente */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --fe-bg:            #0f111a;
    --fe-surface:       #1a1d2e;
    --fe-text:          #e2e8f0;
    --fe-text-muted:    #94a3b8;
    --fe-border:        #2d3352;
    --fe-header-bg:     #1a1d2e;
    --fe-header-text:   #e2e8f0;
    --fe-footer-bg:     #0a0c14;
    --fe-footer-text:   #94a3b8;
  }
}

/* Dark manuale (pulsante toggle) */
[data-theme="dark"] {
  --fe-bg:            #0f111a;
  --fe-surface:       #1a1d2e;
  --fe-text:          #e2e8f0;
  --fe-text-muted:    #94a3b8;
  --fe-border:        #2d3352;
  --fe-header-bg:     #1a1d2e;
  --fe-header-text:   #e2e8f0;
  --fe-footer-bg:     #0a0c14;
  --fe-footer-text:   #94a3b8;
}

/* Light manuale — override quando l'OS è dark ma l'utente vuole chiaro */
[data-theme="light"] {
  --fe-bg:            #f8f9fa;
  --fe-surface:       #ffffff;
  --fe-text:          #212529;
  --fe-text-muted:    #6c757d;
  --fe-border:        #dee2e6;
  --fe-header-bg:     #ffffff;
  --fe-header-text:   #212529;
  --fe-footer-bg:     #1a2332;
  --fe-footer-text:   #c8d3e0;
}
/* ── Theme toggle button (navbar) ──────────────────────────── */
.fe-theme-btn {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:        38px;
  height:       38px;
  border:       1.5px solid var(--fe-border);
  border-radius: 50%;
  background:   transparent;
  color:        var(--fe-header-text);
  cursor:       pointer;
  transition:   background var(--fe-transition),
                color var(--fe-transition),
                border-color var(--fe-transition);
  flex-shrink:  0;
  padding:      0;
}
.fe-theme-btn:hover {
  background:   var(--fe-primary);
  color:        #fff;
  border-color: var(--fe-primary);
}
/* Icone interne: solo quella del modo corrente visibile */
.fe-theme-btn .fe-ti       { display: none; font-size: 17px; }
.fe-theme-btn[data-mode="auto"]  .fe-ti-auto  { display: block; }
.fe-theme-btn[data-mode="light"] .fe-ti-light { display: block; }
.fe-theme-btn[data-mode="dark"]  .fe-ti-dark  { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   REGISTRATI — Sezione pricing con toggle mese/anno
══════════════════════════════════════════════════════════════════════ */

/* Wrapper sezione */
.fe-reg-pricing-section {
  margin-top:   28px;
  border-top:   1px solid var(--fe-border, #e5e7eb);
  padding-top:  20px;
}

/* Toggle mese/anno */
.fe-reg-pricing-toggle-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 16px;
}
.fe-reg-pricing-toggle-label {
  font-size:   .88rem;
  font-weight: 600;
  color:       var(--fe-text, #1f2937);
}
.fe-reg-pricing-toggle {
  position:    relative;
  display:     inline-block;
  width:       44px;
  height:      24px;
  cursor:      pointer;
  flex-shrink: 0;
}
.fe-reg-pricing-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.fe-reg-pricing-toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: 24px;
  background:    var(--fe-border, #d1d5db);
  transition:    background .2s;
}
.fe-reg-pricing-toggle-track::after {
  content:       '';
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    #fff;
  transition:    transform .2s;
  box-shadow:    0 1px 3px rgba(0,0,0,.2);
}
.fe-reg-pricing-toggle input:checked + .fe-reg-pricing-toggle-track {
  background: var(--fe-primary, #16a34a);
}
.fe-reg-pricing-toggle input:checked + .fe-reg-pricing-toggle-track::after {
  transform: translateX(20px);
}
.fe-reg-pricing-toggle input:focus-visible + .fe-reg-pricing-toggle-track {
  outline: 2px solid var(--fe-primary, #16a34a);
  outline-offset: 2px;
}

/* Badge "fino a -X%" */
.fe-reg-pricing-save-badge {
  display:       inline-block;
  padding:       1px 7px;
  border-radius: 20px;
  font-size:     .72rem;
  font-weight:   700;
  background:    var(--fe-primary, #16a34a);
  color:         #fff;
  margin-left:   4px;
  vertical-align: middle;
}

/* Lista piani */
.fe-reg-pricing-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap: 8px;
}

/* Riga singolo piano */
.fe-reg-pricing-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         10px 14px;
  border-radius:   10px;
  border:          1px solid var(--fe-border, #e5e7eb);
  background:      var(--fe-surface, #fff);
  transition:      border-color .2s, box-shadow .2s;
}
.fe-reg-pricing-row--highlight {
  border-color: var(--fe-primary, #16a34a);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--fe-primary, #16a34a) 12%, transparent);
}
.fe-reg-pricing-plan-name {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-weight: 600;
  font-size:   .9rem;
  color:       var(--fe-text, #1f2937);
}
.fe-reg-pricing-plan-name i { color: var(--fe-primary, #16a34a); }

.fe-reg-pricing-price {
  display:     flex;
  align-items: baseline;
  gap:         3px;
  flex-shrink: 0;
}
.fe-reg-pricing-amount {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--fe-text, #1f2937);
}
.fe-reg-pricing-period {
  font-size: .75rem;
  color:     var(--fe-text-muted, #6b7280);
}
.fe-reg-pricing-discount-badge {
  display:       inline-block;
  padding:       2px 7px;
  border-radius: 20px;
  font-size:     .7rem;
  font-weight:   700;
  background:    var(--fe-primary, #16a34a);
  color:         #fff;
  flex-shrink:   0;
  transition:    opacity .2s;
}
.fe-reg-pricing-discount-badge--hidden { display: none; }

.fe-reg-pricing-note {
  margin-top: 10px;
  font-size:  .78rem;
  color:      var(--fe-text-muted, #6b7280);
  min-height: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════
   Note legali — frontend.css
   Sezione collassabile in fondo a sede.php, sopra il footer
   ═══════════════════════════════════════════════════════════════ */

.fe-note-legali {
  background:  color-mix(in srgb, var(--fe-footer-bg) 6%, var(--fe-bg));
  border-top:  1px solid var(--fe-border);
  padding:     20px 0;
  margin-top:  40px;
}

.fe-note-legali-details {
  max-width: 900px;
}

.fe-note-legali-summary {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  user-select: none;
  list-style:  none;
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--fe-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:     6px 0;
  transition:  color var(--fe-transition);
}
.fe-note-legali-summary::-webkit-details-marker { display: none }
.fe-note-legali-summary:hover { color: var(--fe-text) }

.fe-note-legali-chevron {
  margin-left:     auto;
  transition:      transform .2s ease;
}
details.fe-note-legali-details[open] .fe-note-legali-chevron {
  transform: rotate(180deg);
}

.fe-note-legali-list {
  list-style:    none;
  padding:       0;
  margin:        14px 0 0;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

.fe-note-legali-item {
  font-size:   .78rem;
  color:       var(--fe-text-muted);
  line-height: 1.55;
  padding-left: 14px;
  border-left:  2px solid var(--fe-border);
}

.fe-note-legali-titolo {
  color:       var(--fe-text);
  font-weight: 600;
  margin-right: 4px;
}