@charset "utf-8";
/* ===================================================================
   Vorrei Menu � BASE CSS (stylemd.css)
   - Compatibile con guided_css_editor_pro (hydrate dei controlli)
   - Tema di default: CHIARO (come l�attuale)
   - NESSUN override globale invasivo (.btn base intatta)
   - Selettori con #menu presenti per il parser, + fallback senza wrapper
=================================================================== */

/* ------------------------------
   0) Variabili e densit� UI
   (editor keys: brand, accent, density)
------------------------------ */
:root{
  --brand: #b30028;
  --accent: #FFDF6E;
  --density: 0.8;
}

/* ------------------------------
   1) Body / tipografia globale
   (editor keys: bg, text, fontBase, baseSize, baseLine)
------------------------------ */
body{
  background-color: #f1f1f1;        /* bg */
  color: #2c2c2c;                   /* text */
  font-family: Arial, sans-serif;   /* fontBase */
  font-size: 15px;                  /* baseSize */
  line-height: 1.4;                 /* baseLine */
  padding: 20px;
}

/* Titolo principale (fuori editor) */
h1#pageTitle{
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ------------------------------
   1b) Stati interattivi — reset uniforme
   Hover, active, focus e tap devono essere coerenti col tema, non lasciati al browser.
------------------------------ */
#menu .categoria,
.toggle-section,
.cart-toggle-btn,
#close-all-btn,
.vm-nav-node-btn,
.vm-nav-back-btn,
.btn,
.card,
.dropdown-item {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#menu .categoria:focus-visible,
.toggle-section:focus-visible,
.cart-toggle-btn:focus-visible,
#close-all-btn:focus-visible,
.vm-nav-node-btn:focus-visible,
.vm-nav-back-btn:focus-visible,
.btn:focus-visible,
.card:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#menu .categoria:active,
.toggle-section:active,
.cart-toggle-btn:active,
#close-all-btn:active,
.vm-nav-node-btn:active,
.vm-nav-back-btn:active {
  opacity: 0.85;
  transition: opacity 0.08s ease;
}
.btn:focus,
.btn:active {
  box-shadow: none;
  outline: none;
}

/* ------------------------------
   2) Gutter righe compresse
   (editor key: rowG0Gap)
------------------------------ */
.row.g-0{
  --bs-gutter-x: 0.4rem;
  --bs-gutter-y: 0.4rem;
}

/* ------------------------------
   3) Immagini nel #menu
   (editor key: imgMaxW)
------------------------------ */
#menu img{ max-width: 100%; }

/* ------------------------------
   4) Selettore lingua
   (editor keys: ddBg, ddHover, ddBorder, ddRadius)
------------------------------ */
#languageSelector button{
  background-color: #ffffff;
  border: none;
  padding: 5px;
}
#languageSelector img{
  width: 20px;
  margin-right: 5px;
}
#languageSelector .dropdown-menu{
  background: #1c1c1c;       /* ddBg */
  border: 1px solid #333;    /* ddBorder */
  border-radius: 8px;        /* ddRadius */
  box-shadow: 0 4px 8px rgba(0,0,0,.10);
}
#languageSelector .dropdown-item img{
  width: 20px;
  margin-right: 8px;
}
#languageSelector .dropdown-item:hover{
    
}

/* ------------------------------
   5) Categoria
   (editor keys: catBg, catText, catBorder, catRadius, catPad, catTransform, catFont, catSize)
   NB: includo sia #menu .categoria (parser) sia fallback .categoria
------------------------------ */
#menu .categoria,
.categoria{
  background: #4a4a4a;                 /* catBg */
  color: #ffffff;                      /* catText */
  border-left: 4px solid transparent;  /* catBorder (neutro di default) */
  border-radius: 8px;                  /* catRadius */
  padding: .45rem .7rem;               /* catPad (.45rem Y, .7rem X) */
  text-transform: uppercase;           /* catTransform */
  font-family: Arial, sans-serif;      /* catFont */
  font-size: 0.95rem;                  /* catSize */
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  margin: calc(.7rem * var(--density)) 0 calc(.35rem * var(--density));
  letter-spacing: .3px;
  transition: background-color .3s ease;
}
#menu .categoria:hover,
.categoria:hover{ background-color: #333; }

/* ------------------------------
   6) Card prodotto
   (editor keys: cardBg, cardText, cardBorder, cardRadius, cardShadow, cardMb)
------------------------------ */
.card{
  background: #f7f7f7;                   /* cardBg (chiaro) */
  color: #555;                           /* cardText */
  border: 1px solid rgba(0,0,0,0.06);    /* cardBorder */
  border-radius: 10px;                   /* cardRadius */
  box-shadow: 0 3px 6px rgba(0,0,0,.10); /* cardShadow (light) */
  margin-bottom: .5rem;                  /* cardMb */
  transition: box-shadow .3s ease;
}
.card:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.20); }

/* ------------------------------
   7) Card body + spacing interno
   (editor keys: cardPad, cardGap)
------------------------------ */
.card .card-body{
  padding: .6rem;   /* cardPad */
  gap: .4rem;       /* cardGap */
  display: flex;
  flex-direction: column;
}

/* ------------------------------
   8) Tipografia elementi card
   (editor keys:
     title: titleFont, titleSize, titleWeight, titleColor
     desc : descFont,  descSize,  descLine,   descColor, descClamp
     price: priceFont, priceSize, priceWeight,priceColor)
------------------------------ */
.card .card-title{
  font-family: Arial, sans-serif; /* titleFont */
  font-size: 1.05rem;             /* titleSize */
  font-weight: 700;               /* titleWeight */
  color: #2c2c2c;                 /* titleColor (chiaro) */
}
.card .card-text{
  font-family: Arial, sans-serif; /* descFont */
  font-size: .92rem;              /* descSize */
  line-height: 1.35;              /* descLine */
  color: #555;                    /* descColor */
}
/* descClamp = 0 (nessun taglio) di base */

.card .prezzoscheda{
  font-family: Arial, sans-serif; /* priceFont */
  font-size: 1rem;                /* priceSize */
  font-weight: 700;               /* priceWeight */
  color: #414141;                 /* priceColor (chiaro; l�editor pu� portarlo a --accent) */
}

/* ------------------------------
   9) Immagini nelle card
   (editor keys: imgH, imgFit, imgRadius)
------------------------------ */
.card-img-container img{
  width: 100%;
  height: 180px;            /* imgH */
  object-fit: cover;        /* imgFit */
  border-radius: 10px 0 0 10px; /* imgRadius */
  cursor: pointer;
}

/* ------------------------------
   10) Margini utility
   (editor key: cardMargin, applicato a .mb-3)
------------------------------ */
.mb-3{ margin-bottom: .5rem !important; }

/* ------------------------------
   11) Bottoni (stile coerente, NO override base .btn)
   (editor keys: btnRadius, btnPad, btnSize, btnTransform)
------------------------------ */
.btn{
  border-radius: 8px;       /* btnRadius */
  padding: .35rem .6rem;    /* btnPad */
  font-size: 1rem;          /* base minima leggibile */
  text-transform: uppercase;/* btnTransform */
}

/* Soglia tipografica comune: preserva palette/tema e impedisce ai comandi
   operativi delle card (Ingredienti, Allergeni, carrello) di diventare minuti. */
.card .btn.btn-sm,
.card .toggle-section,
.card .vm-btn-cart-add,
.prodotti .btn.btn-sm,
.prodotti .toggle-section,
.prodotti .vm-btn-cart-add {
  font-size: 1rem !important;
  line-height: 1.25;
  min-height: 42px;
  padding: .5rem .75rem;
}

/* Outline primary (grigio �bootstrap-like�)
   (editor keys: btnOutBorder, btnOutText, btnHoverBg, btnHoverText)
------------------------------------------------ */
.btn-outline-primary{
  border-color: #6c757d; /* btnOutBorder */
  color: #6c757d;        /* btnOutText  */
  background: transparent;
}
.btn-outline-primary:hover{
  background: #6c757d;   /* btnHoverBg */
  color: #fff;           /* btnHoverText */
}

/* Allineo anche la variante secondary */
.btn-outline-secondary{
  border-color: #6c757d;
  color: #6c757d;
}
.btn-outline-secondary:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Danger (rosso) */
.btn-outline-danger{
  border-color: #dc3545;
  color: #dc3545;
}
.btn-outline-danger:hover{
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* Hover generico leggero */
.btn:hover{ border: 1px solid currentColor; }

/* btn-check: nessun outline rosso imprevisto */
.btn-check:active{ outline: none; }

/* ------------------------------
   12) Carrello
   (editor toggler: showCart -> display:block !important)
------------------------------ */
.cart-container{
  position: fixed;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
  width: min(300px, calc(100vw - 40px));
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,.20);
  padding: 10px;
  max-height: min(70vh, calc(100dvh - 106px - env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  display: none; /* default OFF � l�editor pu� forzare ON */
}
.cart-header{
  font-weight: bold;
  text-align: center;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.cart-item{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:5px;
  border-bottom:1px solid #ddd;
}
.cart-total{
  text-align: right;
  font-weight: bold;
  padding-top: 10px;
}

/* Toggle / Chiudi tutto (fuori editor) */
.cart-toggle-btn,
#close-all-btn{
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 50px;
  height: 50px;
  background-color: #070707;
  color: #ffffff;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size: 22px;
}
.cart-toggle-btn{ left: calc(20px + env(safe-area-inset-left, 0px)); }
#close-all-btn{ right: calc(20px + env(safe-area-inset-right, 0px)); background-color: #333; }


/* ------------------------------
   13) Modale immagini (fuori editor)
------------------------------ */
.modal-content{ border-radius: 10px; }
.modal-body img{ max-width: 100%; border-radius: 8px; }

/* ------------------------------
   14) Stato schede
   (editor togglers: openProducts, openInfos)
------------------------------ */
#menu .prodotti{ display: none; }  /* l�editor pu� forzare display:block !important */
#menu .prodotti .collapse{
  /* l�editor pu� forzare display:block;height:auto !important */
}

/* compat: blocco �NON globale� */
.prodotti.is-collapsed{ display: none; }

/* ------------------------------
   15) Collapse border/padding
   (editor keys: collapseGap, collapseBorder, collapsePad)
------------------------------ */
.collapse{ margin-top: .25rem; }                 /* collapseGap */
.collapse > *{
  border: 1px dashed #333;                       /* collapseBorder */
  border-radius: 8px;
  padding: .35rem;                               /* collapsePad */
}

/* ------------------------------
   16) Label info traduzione
   (editor key: labelWeight)
------------------------------ */
.info-translate-label{ font-weight: 700; }

/* ------------------------------
   17) Densit� generale per compattezza
------------------------------ */
/* (gi� impostati baseSize / line-height sopra) */