/* =========================================================
   [BLOCK A] KIJELÖLT TÉTELEK FELNYÍLÓ PANEL – JAVÍTOTT V4
   Cél:
   - a wrapper ne kapjon fehér hátteret
   - a backdrop maradjon kulturált fátyol
   - a fehér dizájn csak a panel-contentre menjen
   - a név felül fusson, meta + ikonok alul legyenek
   ========================================================= */

/* 1) Teljes overlay-wrapper – ÁTTETSZŐ marad */
#myg-diary-app .myg-diary-input__selected-panel{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) Backdrop – maradjon finom fátyol */
#myg-diary-app .myg-diary-input__selected-panel-backdrop{
  background: rgba(20,34,56,0.34) !important;
  background-color: rgba(20,34,56,0.34) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
}

/* 3) Maga a fehér panel */
#myg-diary-app .myg-diary-input__selected-panel-content{
  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 18px 18px 16px 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 6px 18px rgba(20,34,56,0.04) !important;
  overflow: hidden !important;
}

/* 4) Fejléc */
#myg-diary-app .myg-diary-input__selected-panel-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 18px 18px 16px 18px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(20,34,56,0.08) !important;
}

/* 5) Cím */
#myg-diary-app .myg-diary-input__selected-panel-title{
  display: block !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #253142 !important;
}

/* 6) Bezáró gomb */
#myg-diary-app .myg-diary-input__selected-panel-close{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* 7) Saját X */
#myg-diary-app .myg-diary-input__selected-panel-close::before{
  content: "×" !important;
  display: block !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #9aa1a8 !important;
  transform: translateY(-1px) !important;
}

/* 8) Lista wrapper */
#myg-diary-app .myg-diary-input__selected-panel-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

/* 9) Egy kijelölt tétel sora */
#myg-diary-app .myg-diary-input__selected-item{
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 16px 118px 14px 18px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(20,34,56,0.06) !important;
  box-sizing: border-box !important;
  min-height: 92px !important;
}

/* 10) Utolsó elem */
#myg-diary-app .myg-diary-input__selected-item:last-child{
  border-bottom: 0 !important;
}

/* 11) Név */
#myg-diary-app .myg-diary-input__selected-item-name{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f353d !important;
}

/* 12) Meta – alul balra */
#myg-diary-app .myg-diary-input__selected-item-detail{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  left: 18px !important;
  right: 118px !important;
  bottom: 14px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #8a9098 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 13) Közös mikro-akciógomb alap */
#myg-diary-app .myg-diary-input__selected-item-edit,
#myg-diary-app .myg-diary-input__selected-item-remove{
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* 14) Szerkesztés */
#myg-diary-app .myg-diary-input__selected-item-edit{
  right: 70px !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/szerkeszt.png") !important;
}

/* 15) Törlés */
#myg-diary-app .myg-diary-input__selected-item-remove{
  right: 18px !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/delete.png") !important;
}

/* 16) Plugin belső tartalom OFF */
#myg-diary-app .myg-diary-input__selected-item-edit > *,
#myg-diary-app .myg-diary-input__selected-item-remove > *{
  display: none !important;
  pointer-events: none !important;
}

/* 17) Hover */
#myg-diary-app .myg-diary-input__selected-item-edit:hover,
#myg-diary-app .myg-diary-input__selected-item-remove:hover,
#myg-diary-app .myg-diary-input__selected-panel-close:hover{
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(20,34,56,0.065) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 5px 12px rgba(20,34,56,0.03) !important;
}

/* 18) Active */
#myg-diary-app .myg-diary-input__selected-item-edit:active,
#myg-diary-app .myg-diary-input__selected-item-remove:active,
#myg-diary-app .myg-diary-input__selected-panel-close:active{
  transform: translateY(1px) scale(0.992) !important;
}

/* 19) Mobil */
@media (max-width: 520px){
  #myg-diary-app .myg-diary-input__selected-panel-content{
    border-radius: 18px 18px 16px 16px !important;
  }

  #myg-diary-app .myg-diary-input__selected-panel-header{
    padding: 18px 18px 16px 18px !important;
  }

  #myg-diary-app .myg-diary-input__selected-panel-title{
    font-size: 18px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item{
    min-height: 82px !important;
    padding: 15px 118px 13px 18px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-name{
    font-size: 15px !important;
    margin-bottom: 9px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-detail{
    font-size: 12px !important;
    left: 18px !important;
    right: 118px !important;
    bottom: 13px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-edit{
    right: 70px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-remove{
    right: 18px !important;
  }
}

/* 20) Extra szűk mobil */
@media (max-width: 380px){
  #myg-diary-app .myg-diary-input__selected-panel-header{
    padding: 16px 16px 14px 16px !important;
  }

  #myg-diary-app .myg-diary-input__selected-panel-title{
    font-size: 17px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item{
    min-height: 78px !important;
    padding: 13px 108px 12px 16px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-name{
    font-size: 14px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-detail{
    font-size: 11px !important;
    left: 16px !important;
    right: 108px !important;
    bottom: 12px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-edit{
    right: 58px !important;
  }

  #myg-diary-app .myg-diary-input__selected-item-remove{
    right: 16px !important;
  }
}

/* =========================================================
   [BLOCK A] vége
   ========================================================= */

/* =========================================================
   [BLOCK B] ÉTEL ADATLAP / PRODUCT DETAIL PANEL – MOBIL-FIRST V4
   Cél:
   - normális mobilos megjelenés már nagyobb telefonon is
   - minden elem kisebb, feszesebb, arányosabb
   - mennyiség + egység normál mobilon egymás mellett marad
   - alsó gombok kiférjenek
   - aktív kedvenc: saját PNG
   - inaktív kedvenc: üres szív
   ========================================================= */

/* 1) A teljes dialog panel
   ITT állítható a panel teljes szélessége / kerekítése
*/
dialog.myg-product-detail{
  width: min(92vw, 620px) !important;
  max-width: min(92vw, 620px) !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;
  overflow: hidden !important;
  max-height: min(86vh, 820px) !important;
}

/* 2) Alap belső levegő */
.myg-product-detail__header,
.myg-product-detail__macros,
.myg-product-detail__quantity,
.myg-product-detail__correction,
.myg-product-detail__actions{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 3) Fejléc */
.myg-product-detail__header{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 18px !important;
  padding-bottom: 8px !important;
}

/* 4) Cím
   ITT állítható:
   - méret
   - félkövérség
*/
.myg-product-detail__name{
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #253142 !important;
}

/* 5) Kedvenc gomb – közös gombtest
   ITT állítható:
   - méret
   - ikon háttérméret
*/
.myg-product-detail__fav-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  flex: 0 0 auto !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background-color: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 6) Inaktív kedvenc – üres szív */
.myg-product-detail__fav-btn:not(.myg-product-detail__fav-btn--active)::before{
  content: "♡" !important;
  display: block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #9aa1a8 !important;
  transform: translateY(1px) !important;
}

/* 7) Aktív kedvenc – saját PNG ikon */
.myg-product-detail__fav-btn.myg-product-detail__fav-btn--active{
  background-image: url("https://mygasztro.hu/wp-content/uploads/kedvenc.png") !important;
}

.myg-product-detail__fav-btn.myg-product-detail__fav-btn--active::before{
  content: none !important;
  display: none !important;
}

/* 8) Eredeti SVG OFF */
.myg-product-detail__heart-icon,
.myg-product-detail__fav-btn svg{
  display: none !important;
}

/* 9) Márka */
.myg-product-detail__brand:empty{
  display: none !important;
}

/* 10) Makrósor */
.myg-product-detail__macros{
  padding-top: 2px !important;
  padding-bottom: 14px !important;
  font-size: 11.5px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
  color: #5f6670 !important;
}

/* 11) Mennyiség + egység blokk
   Normál mobilon MARADJON 2 oszlop
*/
.myg-product-detail__quantity{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  padding-top: 2px !important;
  padding-bottom: 14px !important;
}

/* 12) Label */
.myg-product-detail__quantity label,
.myg-product-detail__unit-field label{
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #6f7680 !important;
}

/* 13) Input + select egységesítés
   ITT állítható:
   - magasság
   - betűméret
   - lekerekítés
*/
.myg-product-detail__qty-input,
.myg-product-detail__unit-select{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #3a4450 !important;
}

/* 14) Select nyíl */
.myg-product-detail__unit-select{
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #5f6670 50%),
    linear-gradient(135deg, #5f6670 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* 15) Focus */
.myg-product-detail__qty-input:focus,
.myg-product-detail__unit-select:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.42) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* 16) Javítás blokk */
.myg-product-detail__correction{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  text-align: center !important;
  border-top: 1px solid rgba(20,34,56,0.08) !important;
}

/* 17) Javítás szövegek */
.myg-product-detail__correction-hint{
  margin: 0 0 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #666d76 !important;
}

.myg-product-detail__correction-note{
  margin: 12px 0 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #a0a5ac !important;
}

/* 18) Javítom gomb
   ITT állítható:
   - méret
   - keretvastagság / szín
*/
.myg-product-detail__correction-btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 136px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #f2c08f !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #f28c28 !important;
}

/* 19) Alsó gombsor */
.myg-product-detail__actions{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  padding-top: 6px !important;
  padding-bottom: 18px !important;
}

/* 20) Közös alsó gomb alap
   ITT állítható:
   - magasság
   - betűméret
*/
.myg-product-detail__add-btn,
.myg-product-detail__cancel-btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* 21) Mégse – balra */
.myg-product-detail__cancel-btn{
  order: 1 !important;
  border: 1px solid rgba(20,34,56,0.10) !important;
  background: #ffffff !important;
  color: #243040 !important;
  box-shadow: none !important;
}

/* 22) Hozzáadom – jobbra */
.myg-product-detail__add-btn{
  order: 2 !important;
  border: 1px solid #f28c28 !important;
  background: #f28c28 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 23) Tablet / nagyobb mobil finomhangolás */
@media (min-width: 521px){
  dialog.myg-product-detail{
    width: min(86vw, 620px) !important;
    max-width: min(86vw, 620px) !important;
  }

  .myg-product-detail__name{
    font-size: 20px !important;
  }

  .myg-product-detail__macros{
    font-size: 12.5px !important;
  }
}

/* 24) Extra szűk mobil
   CSAK itt essen egymás alá a 2 mező
*/
@media (max-width: 360px){
  dialog.myg-product-detail{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 18px !important;
  }

  .myg-product-detail__header,
  .myg-product-detail__macros,
  .myg-product-detail__quantity,
  .myg-product-detail__correction,
  .myg-product-detail__actions{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .myg-product-detail__name{
    font-size: 17px !important;
  }

  .myg-product-detail__fav-btn{
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background-size: 20px 20px !important;
  }

  .myg-product-detail__fav-btn:not(.myg-product-detail__fav-btn--active)::before{
    font-size: 20px !important;
  }

  .myg-product-detail__macros{
    font-size: 11px !important;
  }

  .myg-product-detail__quantity{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .myg-product-detail__qty-input,
  .myg-product-detail__unit-select{
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .myg-product-detail__correction-btn{
    min-width: 128px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .myg-product-detail__actions{
    gap: 10px !important;
  }

  .myg-product-detail__add-btn,
  .myg-product-detail__cancel-btn{
    min-height: 46px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK B] vége
   ========================================================= */

/* =========================================================
   [BLOCK C] TERMÉKADAT JAVÍTÁS PANEL – MOBIL-FIRST V1
   Cél:
   - név teljes szélesség
   - 6 tápérték mező 2 oszlopban
   - adag/db, EAN, megjegyzés teljes szélesség
   - alsó CTA-k a myGasztro szabály szerint
   - normál mobilon 2 oszlop maradjon
   ========================================================= */

/* 1) A javítási panel fő konténer */
.myg-correction-modal__content{
  width: min(92vw, 620px) !important;
  max-width: min(92vw, 620px) !important;
  max-height: min(86vh, 820px) !important;
  overflow: auto !important;

  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;

  padding: 18px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 14px !important;
}

/* 2) Cím */
.myg-correction-modal__title{
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #253142 !important;
}

/* 3) Alcím */
.myg-correction-modal__subtitle{
  grid-column: 1 / -1 !important;
  margin: -4px 0 4px 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

/* 4) Minden mező alap */
.myg-correction-modal__field{
  min-width: 0 !important;
  margin: 0 !important;
}

/* 5) Név mező teljes szélesség */
.myg-correction-modal__field:has(#myg-corr-name){
  grid-column: 1 / -1 !important;
}

/* 6) A 6 tápérték mező maradjon 2 oszlopban
   Ezek alapból a grid normál elemei, nem kell külön 1 / -1 */
.myg-correction-modal__field:has(#myg-corr-kcal),
.myg-correction-modal__field:has(#myg-corr-protein),
.myg-correction-modal__field:has(#myg-corr-carbs),
.myg-correction-modal__field:has(#myg-corr-sugar),
.myg-correction-modal__field:has(#myg-corr-fat),
.myg-correction-modal__field:has(#myg-corr-fiber){
  grid-column: auto !important;
}

/* 7) Teljes szélességű mezők alul */
.myg-correction-modal__field:has(#myg-corr-package),
.myg-correction-modal__field:has(#myg-corr-ean),
.myg-correction-modal__field:has(#myg-corr-comment){
  grid-column: 1 / -1 !important;
}

/* 8) Label */
.myg-correction-modal__field label{
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #6f7680 !important;
}

/* 9) Input mezők
   ITT állítható:
   - magasság
   - betűméret
   - lekerekítés
*/
.myg-correction-modal__input{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #3a4450 !important;
  box-sizing: border-box !important;
}

/* 10) Textarea */
.myg-correction-modal__textarea{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 12px 14px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  resize: vertical !important;

  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #3a4450 !important;
  box-sizing: border-box !important;
}

/* 11) Focus */
.myg-correction-modal__input:focus,
.myg-correction-modal__textarea:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.42) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* 12) Elválasztó */
.myg-correction-modal__section-divider{
  grid-column: 1 / -1 !important;
  height: 1px !important;
  margin: 2px 0 0 0 !important;
  background: rgba(20,34,56,0.08) !important;
}

/* 13) Szekciócím */
.myg-correction-modal__section-label{
  grid-column: 1 / -1 !important;
  margin: -2px 0 0 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #4f5966 !important;
}

/* 14) Gombsor */
.myg-correction-modal__actions{
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  margin: 4px 0 0 0 !important;
}

/* 15) Közös gomb alap
   ITT állítható:
   - gombmagasság
   - betűméret
*/
.myg-correction-modal__btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  margin: 0 !important;

  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

/* 16) Mégse – bal oldalt */
.myg-correction-modal__btn--cancel{
  order: 1 !important;
  border: 1px solid rgba(20,34,56,0.10) !important;
  background: #ffffff !important;
  color: #243040 !important;
}

/* 17) Beküldés – jobb oldalt */
.myg-correction-modal__btn--submit{
  order: 2 !important;
  border: 1px solid #f28c28 !important;
  background: #f28c28 !important;
  color: #ffffff !important;
}

/* 18) Tablet / nagyobb mobil */
@media (min-width: 521px){
  .myg-correction-modal__content{
    width: min(86vw, 620px) !important;
    max-width: min(86vw, 620px) !important;
  }

  .myg-correction-modal__title{
    font-size: 20px !important;
  }

  .myg-correction-modal__subtitle{
    font-size: 13px !important;
  }
}

/* 19) Extra szűk mobil
   CSAK itt essen 1 oszlopra minden
*/
@media (max-width: 360px){
  .myg-correction-modal__content{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .myg-correction-modal__title{
    font-size: 17px !important;
  }

  .myg-correction-modal__subtitle{
    font-size: 11px !important;
  }

  .myg-correction-modal__field:has(#myg-corr-kcal),
  .myg-correction-modal__field:has(#myg-corr-protein),
  .myg-correction-modal__field:has(#myg-corr-carbs),
  .myg-correction-modal__field:has(#myg-corr-sugar),
  .myg-correction-modal__field:has(#myg-corr-fat),
  .myg-correction-modal__field:has(#myg-corr-fiber){
    grid-column: 1 / -1 !important;
  }

  .myg-correction-modal__input{
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .myg-correction-modal__textarea{
    min-height: 84px !important;
    font-size: 14px !important;
  }

  .myg-correction-modal__actions{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .myg-correction-modal__btn{
    min-height: 46px !important;
    font-size: 14px !important;
  }
}

/* 20) Adag/db mennyiség – ismétlődő label helyett magyarázó szöveg */
.myg-correction-modal__field:has(#myg-corr-package) label{
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 8px 0 !important;
}

.myg-correction-modal__field:has(#myg-corr-package) label::after{
  content: "Itt megadhatod, hogy mennyi 1 adag vagy 1 db tömege gramm / milliliterben. Ha kitöltöd, a rendszer ezt fogja alap mennyiségként felkínálni.";
  display: block !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #76808b !important;
}

/* =========================================================
   [BLOCK C] vége
   ========================================================= */

/* =========================================================
   [BLOCK D] ÚJ ALAPANYAG HOZZÁADÁSA PANEL – MOBIL-FIRST V1
   Cél:
   - egységes, kulturált modal
   - makró mezők 2 oszlopban normál mobilon is
   - adag/db szekció tagolva, magyarázó szöveggel
   - vonalkód külön szekció
   - alsó CTA-k teljes szélességben egymás mellett
   - csak extrém szűk mobilon törjön 1 oszlopra
   ========================================================= */

/* 1) Teljes panel */
.myg-modal-content{
  width: min(92vw, 720px) !important;
  max-width: min(92vw, 720px) !important;
  max-height: min(88vh, 860px) !important;
  overflow: auto !important;

  position: relative !important;
  box-sizing: border-box !important;

  padding: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;
}

/* 2) Bezáró gomb – ugyanabban a családban maradjon */
.myg-modal-close{
  appearance: none !important;
  -webkit-appearance: none !important;

  position: absolute !important;
  top: 16px !important;
  right: 16px !important;

  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.myg-modal-close::before{
  content: "×" !important;
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #9aa1a8 !important;
  transform: translateY(-1px) !important;
}

/* 3) Cím */
.myg-modal-content > h2{
  margin: 0 64px 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #253142 !important;
}

/* 4) Leírás */
.myg-modal-description{
  margin: 0 0 16px 0 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

/* 5) Form alap */
.myg-modal-form{
  display: block !important;
  margin: 0 !important;
}

/* 6) Általános mezőcsoport */
.myg-modal-form-group{
  margin: 0 0 14px 0 !important;
  min-width: 0 !important;
}

/* 7) Label */
.myg-modal-form-group label{
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #6f7680 !important;
}

/* 8) Input / select alap
   ITT állítható:
   - magasság
   - betűméret
   - lekerekítés
*/
.myg-input,
.myg-select{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  margin: 0 !important;

  box-sizing: border-box !important;
  border-radius: 14px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #3a4450 !important;
}

/* 9) Select nyíl */
.myg-select{
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #5f6670 50%),
    linear-gradient(135deg, #5f6670 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* 10) Focus */
.myg-input:focus,
.myg-select:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.42) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* 11) Makró lenyitó gomb sávja */
.myg-modal-macro-toggle{
  display: flex !important;
  justify-content: center !important;
  margin: 6px 0 14px 0 !important;
}

/* 12) Makró lenyitó gomb – narancs keretes másodlagos CTA */
#toggle-macro-fields.myg-btn.myg-btn-secondary{
  appearance: none !important;
  -webkit-appearance: none !important;

  min-width: 220px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  border: 1px solid #f2c08f !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #f28c28 !important;
}

/* 13) Makró blokk */
.myg-modal-macro-fields{
  margin: 0 0 14px 0 !important;
}

/* 14) Makró segédszöveg */
.myg-macro-note{
  margin: 0 0 12px 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

/* 15) Kétoszlopos makró sorok
   Normál mobilon is maradjanak 2 oszlopban
*/
.myg-modal-form-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  margin: 0 0 12px 0 !important;
}

/* 16) Makró blokk alatti adag/db szekció */
.myg-modal-portion-section{
  margin: 2px 0 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(20,34,56,0.08) !important;
}

/* 17) Adag/db szekció cím */
.myg-modal-section-label{
  margin: 0 0 8px 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #4f5966 !important;
}

/* 18) Adag/db szekció magyarázó szöveg */
.myg-modal-portion-section::after{
  content: "Itt megadhatod, hogy mennyi 1 adag vagy 1 db tömege gramm / milliliterben. Ha kitöltöd, a rendszer ezt fogja alap mennyiségként felkínálni.";
  display: block !important;
  margin: -2px 0 10px 0 !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

/* 19) Vonalkód mező külön elválasztása */
.myg-modal-form-group:has(#new-ingredient-barcode){
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(20,34,56,0.08) !important;
}

/* 20) Alsó gombsor */
.myg-modal-actions{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  margin: 16px 0 0 0 !important;
}

/* 21) Közös alsó gomb alap
   ITT állítható:
   - magasság
   - betűméret
*/
.myg-modal-actions .myg-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  margin: 0 !important;

  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* 22) Mégsem – bal oldalt */
.myg-modal-cancel,
.myg-modal-actions .myg-btn-secondary{
  order: 1 !important;
  border: 1px solid rgba(20,34,56,0.10) !important;
  background: #ffffff !important;
  color: #243040 !important;
  box-shadow: none !important;
}

/* 23) Hozzáadás – jobb oldalt */
#save-new-ingredient,
.myg-modal-actions .myg-btn-primary{
  order: 2 !important;
  border: 1px solid #f28c28 !important;
  background: #f28c28 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 24) Nagyobb mobil / tablet */
@media (min-width: 521px){
  .myg-modal-content{
    width: min(88vw, 760px) !important;
    max-width: min(88vw, 760px) !important;
  }

  .myg-modal-content > h2{
    font-size: 20px !important;
  }

  .myg-modal-description{
    font-size: 13px !important;
  }
}

/* 25) Extra szűk mobil
   CSAK itt törjenek az eddig kétoszlopos sorok 1 oszlopra
*/
@media (max-width: 360px){
  .myg-modal-content{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .myg-modal-content > h2{
    font-size: 17px !important;
    margin-right: 54px !important;
  }

  .myg-modal-description{
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }

  .myg-input,
  .myg-select{
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .myg-modal-form-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .myg-modal-actions{
    gap: 10px !important;
  }

  .myg-modal-actions .myg-btn{
    min-height: 46px !important;
    font-size: 14px !important;
  }

  #toggle-macro-fields.myg-btn.myg-btn-secondary{
    min-width: 200px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   [BLOCK D] vége
   ========================================================= */

/* =========================================================
   [BLOCK E] ÚJ ALAPANYAG PANEL – POZÍCIONÁLÁS JAVÍTÁS V2
   Cél:
   - a panel valóban középre kerüljön
   - ne ugorjon le a képernyő aljára
   - mobilon is tesztelhető maradjon
   ========================================================= */

/* 1) A teljes panel fix, viewport-közép pozíciót kap */
.myg-modal-content{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  width: min(92vw, 720px) !important;
  max-width: min(92vw, 720px) !important;
  max-height: min(88vh, 860px) !important;
  overflow: auto !important;
}

/* 2) Cím kisebb, szolidabb */
.myg-modal-content > h2{
  margin: 0 56px 8px 0 !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
}

/* 3) Bezáró gomb kisebb és szabványosabb */
.myg-modal-close{
  top: 12px !important;
  right: 12px !important;

  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;

  border-radius: 10px !important;
}

.myg-modal-close::before{
  font-size: 20px !important;
}

/* 4) Felső leírás kapjon helyet a close gomb miatt */
.myg-modal-description{
  margin: 0 44px 14px 0 !important;
}

/* 5) Adag/db cím alatt legyen a magyarázó szöveg */
.myg-modal-section-label{
  margin: 0 0 6px 0 !important;
}

.myg-modal-portion-section::after{
  content: none !important;
  display: none !important;
}

.myg-modal-portion-section::before{
  content: "Ha megadod 1 adag vagy 1 db tömegét gramm / milliliterben, a rendszer ezt fogja alap mennyiségként felkínálni.";
  display: block !important;
  margin: 0 0 10px 0 !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

/* 6) Mobil */
@media (max-width: 520px){

  .myg-modal-content{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  .myg-modal-content > h2{
    margin: 0 50px 8px 0 !important;
    font-size: 15px !important;
  }

  .myg-modal-close{
    top: 10px !important;
    right: 10px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .myg-modal-close::before{
    font-size: 18px !important;
  }

  .myg-modal-description{
    margin: 0 38px 12px 0 !important;
  }

  .myg-modal-portion-section::before{
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }
}

/* 7) Extra szűk mobil */
@media (max-width: 360px){

  .myg-modal-content{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }

  .myg-modal-content > h2{
    margin: 0 46px 8px 0 !important;
    font-size: 15px !important;
  }

  .myg-modal-description{
    margin: 0 32px 12px 0 !important;
  }

  .myg-modal-close{
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  .myg-modal-close::before{
    font-size: 17px !important;
  }

  .myg-modal-portion-section::before{
    font-size: 11px !important;
  }
}

/* =========================================================
   [BLOCK E] vége
   ========================================================= */

/* =========================================================
   [BLOCK F] ÚJ ALAPANYAG PANEL – SCROLL JAVÍTÁS V2
   Cél:
   - ne legyen felesleges üres hely a CTA-k alatt
   - a panel belül rendesen scrollozható legyen
   - Edge mobilon is lehessen felfelé és lefelé scrollozni
   - az adag/db cím + magyarázó sorrend maradjon jó
   ========================================================= */

/* 1) Adag/db blokk sorrendje */
.myg-modal-portion-section{
  display: flex !important;
  flex-direction: column !important;
  margin: 2px 0 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(20,34,56,0.08) !important;
}

.myg-modal-portion-section > .myg-modal-section-label{
  order: 1 !important;
  margin: 0 0 8px 0 !important;
}

.myg-modal-portion-section::before{
  content: "Ha megadod 1 adag vagy 1 db tömegét gramm / milliliterben, a rendszer ezt fogja alap mennyiségként felkínálni.";
  display: block !important;
  order: 2 !important;
  margin: 0 0 12px 0 !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #76808b !important;
}

.myg-modal-portion-section > .myg-modal-form-row{
  order: 3 !important;
  margin-top: 0 !important;
}

/* 2) Vonalkód blokk ritmusa */
.myg-modal-form-group:has(#new-ingredient-barcode){
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(20,34,56,0.08) !important;
}

/* 3) A modal maga legyen valódi scroll-konténer */
.myg-modal-content{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4) A form ne nyomja meg feleslegesen az alját */
.myg-modal-form{
  padding-bottom: 0 !important;
}

/* 5) CTA sáv normál, nem túl nagy alsó térrel */
.myg-modal-actions{
  margin: 16px 0 0 0 !important;
  padding-bottom: 0 !important;
}

/* 6) Mobilon a panel magasságát a viewporthoz igazítjuk,
   és BELÜL scrollozunk */
@media (max-width: 520px){
  .myg-modal-content{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    height: auto !important;
    max-height: calc(100dvh - 24px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .myg-modal-form{
    padding-bottom: 0 !important;
  }

  .myg-modal-actions{
    margin: 16px 0 0 0 !important;
    padding-bottom: 0 !important;
  }

  .myg-modal-portion-section::before{
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }
}

/* 7) Extra szűk mobil */
@media (max-width: 360px){
  .myg-modal-content{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  .myg-modal-portion-section::before{
    font-size: 11px !important;
  }
}

/* =========================================================
   [BLOCK F] vége
   ========================================================= */

/* =========================================================
   [BLOCK G] ÉTKEZÉS MENNYISÉGVÁLASZTÓ PANEL – ALAP DIZÁJN V1
   Cél:
   - kulturált saved meal modal
   - narancs checkbox-logika
   - kompakt, olvasható lista
   - rendezett mennyiségválasztó
   - alsó CTA-k a szabályrendszer szerint
   ========================================================= */

/* 1) A panel fő konténere */
.myg-diary-modal__content{
  width: min(92vw, 720px) !important;
  max-width: min(92vw, 720px) !important;
  max-height: min(86vh, 820px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;

  box-sizing: border-box !important;
  padding: 18px !important;

  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;
}

/* 2) Cím */
.myg-diary-modal__saved-meal-name{
  margin: 0 0 10px 0 !important;
  font-size: 18px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #253142 !important;
  text-align: center !important;
}

/* 3) Makrósor */
.myg-diary-modal__saved-meal-macros{
  margin: 0 0 18px 0 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #6b7380 !important;
  text-align: center !important;
}

/* 4) Mennyiség sor */
.myg-diary-modal__saved-meal-multiplier{
  display: grid !important;
  grid-template-columns: auto 42px 72px 42px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 18px 0 !important;
}

/* 5) Mennyiség label */
.myg-diary-modal__saved-meal-multiplier > label{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #4d5663 !important;
}

/* 6) Mennyiség -/+ gombok */
.myg-diary-modal__saved-meal-multiplier .myg-diary-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;

  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #3c4450 !important;
}

/* 7) Mennyiség input */
.myg-diary-modal__saved-meal-mult-value{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 10px !important;

  box-sizing: border-box !important;
  border-radius: 12px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #3a4450 !important;
  text-align: center !important;
}

/* 8) Focus */
.myg-diary-modal__saved-meal-mult-value:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.42) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* 9) Mind kijelölése sor */
.myg-diary-modal__copy-select-all{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid rgba(20,34,56,0.08) !important;

  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #3a4450 !important;
  cursor: pointer !important;
}

/* 10) Saját checkbox logika – narancs */
.myg-diary-modal__copy-select-all input[type="checkbox"],
.myg-diary-modal__copy-item input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;

  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(242,140,40,0.55) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  position: relative !important;
  cursor: pointer !important;
}

.myg-diary-modal__copy-select-all input[type="checkbox"]:checked,
.myg-diary-modal__copy-item input[type="checkbox"]:checked{
  background: #f28c28 !important;
  border-color: #f28c28 !important;
}

.myg-diary-modal__copy-select-all input[type="checkbox"]:checked::after,
.myg-diary-modal__copy-item input[type="checkbox"]:checked::after{
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -56%) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* 11) Lista wrapper */
.myg-diary-modal__copy-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 0 18px 0 !important;
}

/* 12) Egy tétel */
.myg-diary-modal__copy-item{
  display: grid !important;
  grid-template-columns: 20px minmax(0,1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  cursor: pointer !important;
}

/* 13) Tétel név */
.myg-diary-modal__copy-item-name{
  display: block !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #343b45 !important;
}

/* 14) Tétel kcal */
.myg-diary-modal__copy-item-kcal{
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #f28c28 !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
}

/* 15) Alsó gombsor */
.myg-diary-modal__actions{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* 16) Közös alsó gomb alap */
.myg-diary-modal__actions .myg-diary-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  margin: 0 !important;

  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* 17) Mégsem */
.myg-diary-modal__actions .myg-diary-btn:not(.myg-diary-btn--primary){
  border: 1px solid rgba(20,34,56,0.10) !important;
  background: #ffffff !important;
  color: #243040 !important;
  box-shadow: none !important;
}

/* 18) Hozzáadás */
.myg-diary-modal__actions .myg-diary-btn--primary{
  border: 1px solid #f28c28 !important;
  background: #f28c28 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 19) Nagyobb mobil / tablet */
@media (min-width: 521px){
  .myg-diary-modal__content{
    width: min(86vw, 720px) !important;
    max-width: min(86vw, 720px) !important;
  }

  .myg-diary-modal__saved-meal-name{
    font-size: 20px !important;
  }

  .myg-diary-modal__saved-meal-macros{
    font-size: 13px !important;
  }
}

/* 20) Extra szűk mobil */
@media (max-width: 360px){
  .myg-diary-modal__content{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .myg-diary-modal__saved-meal-name{
    font-size: 17px !important;
  }

  .myg-diary-modal__saved-meal-macros{
    font-size: 11.5px !important;
  }

  .myg-diary-modal__saved-meal-multiplier{
    grid-template-columns: 1fr 38px 64px 38px !important;
    gap: 8px !important;
  }

  .myg-diary-modal__saved-meal-multiplier .myg-diary-btn{
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 22px !important;
  }

  .myg-diary-modal__saved-meal-mult-value{
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__copy-item{
    gap: 10px !important;
  }

  .myg-diary-modal__copy-item-name{
    font-size: 14px !important;
  }

  .myg-diary-modal__copy-item-kcal{
    font-size: 13px !important;
  }

  .myg-diary-modal__actions .myg-diary-btn{
    min-height: 46px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK G] vége
   ========================================================= */

/* =========================================================
   [BLOCK H] ÉTKEZÉS MENNYISÉGVÁLASZTÓ – FINOMHANGOLÁS V2
   Cél:
   - név kisebb legyen
   - max 2 sor + ...
   - kcal beljebb jöjjön
   - scroll ne lógjon rá vizuálisan
   ========================================================= */

/* 1) A görgethető lista jobb oldalán legyen több belső hely */
.myg-diary-modal__copy-items{
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* 2) Egy tétel oszlopai finomítása */
.myg-diary-modal__copy-item{
  grid-template-columns: 20px minmax(0,1fr) 86px !important;
  gap: 10px !important;
  padding: 7px 0 !important;
}

/* 3) Név – kisebb, max 2 sor, utána ... */
.myg-diary-modal__copy-item-name{
  font-size: 14px !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 4) Kcal – beljebb és jobbra rendezve */
.myg-diary-modal__copy-item-kcal{
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: right !important;
  align-self: start !important;
  padding-left: 6px !important;
  padding-right: 4px !important;
}

/* 5) Mind kijelölése sor is legyen picit szolidabb */
.myg-diary-modal__copy-select-all{
  font-size: 13px !important;
  gap: 9px !important;
}

/* 6) Mobil finomhangolás */
@media (max-width: 520px){
  .myg-diary-modal__copy-items{
    padding-right: 16px !important;
  }

  .myg-diary-modal__copy-item{
    grid-template-columns: 20px minmax(0,1fr) 78px !important;
    gap: 9px !important;
  }

  .myg-diary-modal__copy-item-name{
    font-size: 13.5px !important;
    line-height: 1.32 !important;
  }

  .myg-diary-modal__copy-item-kcal{
    font-size: 12.5px !important;
    padding-right: 2px !important;
  }
}

/* 7) Extra szűk mobil */
@media (max-width: 360px){
  .myg-diary-modal__copy-item{
    grid-template-columns: 18px minmax(0,1fr) 72px !important;
  }

  .myg-diary-modal__copy-item-name{
    font-size: 13px !important;
  }

  .myg-diary-modal__copy-item-kcal{
    font-size: 12px !important;
  }
}

/* =========================================================
   [BLOCK H] vége
   ========================================================= */

/* =========================================================
   [BLOCK I START] ÉTKEZÉS SZERKESZTÉSE – TÉTELSOROK V7
   Cél:
   - 1. sor: név balra, ikonok jobbra
   - 2. sor: mennyiség + egység + makrók
   - a név max. 2 sorban törjön
   - a mennyiség és az egység együtt maradjon
   - a makrók használják ki a teljes rendelkezésre álló szélességet
   ========================================================= */

/* ---------------------------------------------------------
   I/1 – Fő lista wrapper
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-items{
  --i-scroll-safe-right: 16px; /* ITT állítod a jobb oldali scroll miatti belső levegőt. */
  --i-row-gap: 8px; /* ITT állítod a felső és alsó sor közti távolságot. */
  --i-col-gap: 8px; /* ITT állítod az oszlopközt. */
  --i-action-gap: 12px; /* ITT állítod a két ikon közti távolságot. */
  --i-icon-size: 34px; /* ITT állítod az ikonméretet. */
  --i-name-size: 15px; /* ITT állítod a név méretét. */
  --i-meta-size: 12.5px; /* ITT állítod a meta sor méretét. */
  --i-qty-gap: 4px; /* ITT állítod a szám és egység közti távolságot. */
  --i-unit-macro-gap: 10px; /* ITT állítod az egység és makrók közti távolságot. */

  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 0 14px 0 !important;
  padding-right: var(--i-scroll-safe-right) !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   I/2 – Egy tételsor fő gridje
   5 oszlop:
   1 = qty
   2 = unit
   3 = tartalom
   4 = edit
   5 = remove
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item{
  display: grid !important;
  grid-template-columns:
    auto
    auto
    minmax(0, 1fr)
    var(--i-icon-size)
    var(--i-icon-size) !important;
  grid-template-rows: auto auto !important;
  column-gap: var(--i-col-gap) !important;
  row-gap: var(--i-row-gap) !important;
  align-items: start !important;

  padding: 10px 0 !important; /* ITT állítod a sor függőleges levegőjét. */
  border-bottom: 1px solid rgba(20,34,56,0.08) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* A belső wrapper-ek ne zavarjanak */
.myg-diary-modal__edit-sm-item-info,
.myg-diary-modal__edit-sm-item-controls{
  display: contents !important;
}

/* ---------------------------------------------------------
   I/3 – NÉV
   Felső sor bal oldala, max 2 sor
   FONTOS:
   - most már tényleg törhet 2 sorba
   - nem white-space: nowrap logika
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-name{
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 6px 0 0 !important; /* ITT állítod, mennyi levegő legyen a név és az ikonok zónája között. */

  white-space: normal !important; /* EZ a lényeg: ne maradjon egysoros logikán. */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;

  font-size: var(--i-name-size) !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  color: #343b45 !important;
  letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------
   I/4 – MENNYISÉG
   Alsó sor eleje
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-qty{
  grid-column: 1 !important;
  grid-row: 2 !important;

  display: block !important;
  justify-self: start !important;
  align-self: start !important;
  width: auto !important; /* Ezzel nem fog felesleges szélességet tartani. */
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: var(--i-meta-size) !important;
  line-height: 1.24 !important;
  font-weight: 600 !important;
  color: #6f7883 !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   I/5 – MÉRTÉKEGYSÉG
   Közvetlenül a mennyiség mellé húzva
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-unit{
  grid-column: 2 !important;
  grid-row: 2 !important;

  display: block !important;
  justify-self: start !important;
  align-self: start !important;
  width: auto !important; /* Ezzel nem fog indokolatlan helyet foglalni. */
  min-width: 0 !important;
  margin: 0 0 0 1px !important; /* ITT húzod közelebb a számhoz. Ha még közelebb kell, mehet 0px-re. */
  padding: 0 !important;

  font-size: var(--i-meta-size) !important;
  line-height: 1.24 !important;
  font-weight: 600 !important;
  color: #6f7883 !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   I/6 – EGYSÉG UTÁNI PONT
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-unit::after{
  content: " ·" !important;
  margin-left: 4px !important; /* ITT állítod a pont bal oldali közét. */
  margin-right: 8px !important; /* ITT állítod a pont és a makrók közti távolságot. */
  color: #b0b6bd !important;
}

/* ---------------------------------------------------------
   I/7 – MAKRÓK
   A második sor maradék teljes szélessége
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-macros{
  grid-column: 3 / 6 !important;
  grid-row: 2 !important;

  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  justify-self: stretch !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: var(--i-meta-size) !important;
  line-height: 1.24 !important;
  font-weight: 500 !important;
  color: #747c86 !important;

  white-space: nowrap !important; /* Ezt hagyd így, így marad egy szép meta sor. */
  overflow: hidden !important;
  text-overflow: clip !important; /* Nincs ... */
  word-break: normal !important;
}

/* ---------------------------------------------------------
   I/8 – Közös ikon gomb alap
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-edit,
.myg-diary-modal__edit-sm-item-remove{
  appearance: none !important;
  -webkit-appearance: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: var(--i-icon-size) !important;
  min-width: var(--i-icon-size) !important;
  max-width: var(--i-icon-size) !important;
  height: var(--i-icon-size) !important;
  min-height: var(--i-icon-size) !important;
  max-height: var(--i-icon-size) !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 10px !important;
  border: 1px solid rgba(20,34,56,0.05) !important;
  background: rgba(252,252,251,0.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;

  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   I/9 – Szerkesztés ikon
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-edit{
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/szerkeszt.png") !important;
}

/* ---------------------------------------------------------
   I/10 – Kuka ikon
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-remove{
  grid-column: 5 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/delete.png") !important;
}

/* ---------------------------------------------------------
   I/11 – Plugin belső tartalom OFF
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-edit > *,
.myg-diary-modal__edit-sm-item-remove > *{
  display: none !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   I/12 – Hover / active
   --------------------------------------------------------- */
.myg-diary-modal__edit-sm-item-edit:hover,
.myg-diary-modal__edit-sm-item-remove:hover{
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(20,34,56,0.065) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 5px 12px rgba(20,34,56,0.03) !important;
}

.myg-diary-modal__edit-sm-item-edit:active,
.myg-diary-modal__edit-sm-item-remove:active{
  transform: translateY(1px) scale(0.992) !important;
}

/* ---------------------------------------------------------
   I/13 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__edit-sm-items{
    --i-scroll-safe-right: 14px;
    --i-row-gap: 7px;
    --i-col-gap: 7px;
    --i-action-gap: 10px;
    --i-icon-size: 32px;
    --i-name-size: 14px;
    --i-meta-size: 12px;
    --i-qty-gap: 3px;
    --i-unit-macro-gap: 8px;

    padding-right: var(--i-scroll-safe-right) !important;
  }

  .myg-diary-modal__edit-sm-item{
    padding: 9px 0 !important;
  }

  .myg-diary-modal__edit-sm-item-edit,
  .myg-diary-modal__edit-sm-item-remove{
    background-size: 18px 18px !important;
  }
}

/* ---------------------------------------------------------
   I/14 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 380px){
  .myg-diary-modal__edit-sm-items{
    --i-scroll-safe-right: 12px;
    --i-row-gap: 6px;
    --i-col-gap: 6px;
    --i-action-gap: 8px;
    --i-icon-size: 30px;
    --i-name-size: 13px;
    --i-meta-size: 11px;
    --i-qty-gap: 2px;
    --i-unit-macro-gap: 6px;

    padding-right: var(--i-scroll-safe-right) !important;
  }

  .myg-diary-modal__edit-sm-item-edit,
  .myg-diary-modal__edit-sm-item-remove{
    background-size: 17px 17px !important;
  }
}

/* =========================================================
   [BLOCK I END] ÉTKEZÉS SZERKESZTÉSE – TÉTELSOROK V7
   ========================================================= */

/* =========================================================
   [BLOCK K START] ÉTKEZÉS SZERKESZTÉSE – FELSŐ NÉV SOR FINOMHANGOLÁS
   Cél:
   - a "Név:" sor legyen feszesebb
   - a felső input ne legyen bumfordi
   - a név kényelmesen kiférjen
   - minden állítható sor mellett ott legyen a komment
   ========================================================= */

/* ---------------------------------------------------------
   K/1 – A teljes felső név sor
   --------------------------------------------------------- */
.myg-diary-modal__field{
  display: grid !important;
  grid-template-columns: 60px minmax(0,1fr) !important; /* ITT állítod a bal oldali "Név:" oszlop szélességét. Ha a "Név:" túl közel van a mezőhöz, növeld pl. 64px-re. Ha túl nagy a helye, csökkentsd pl. 56px-re. */
  gap: 6px !important; /* ITT állítod a "Név:" és az input közti távolságot. Nagyobb réshez növeld, kisebbhez csökkentsd. */
  align-items: center !important; /* Ezt ne bántsd, ez tartja szépen egy vonalban a feliratot és a mezőt. */
  margin: 0 0 14px 0 !important; /* ITT állítod a teljes név sor alatti távolságot. Ha túl sok a levegő alatta, csökkentsd pl. 10px-re. */
}

/* ---------------------------------------------------------
   K/2 – A "Név:" felirat
   --------------------------------------------------------- */
.myg-diary-modal__field > label{
  margin: 0 !important; /* Ezt ne bántsd. */
  padding: 0 !important; /* Ezt se bántsd. */
  font-size: 15px !important; /* ITT állítod a "Név:" felirat méretét. Ha túl nagy, csökkentsd 14px-re. */
  line-height: 1.2 !important; /* ITT állítod a "Név:" felirat sormagasságát. Általában nem kell piszkálni. */
  font-weight: 700 !important; /* ITT állítod a "Név:" felirat vastagságát. 700 = erősebb félkövér. */
  color: #343b45 !important; /* ITT állítod a "Név:" felirat színét. */
}

/* ---------------------------------------------------------
   K/3 – Maga a felső név input
   FONTOS:
   Ha a mező magasságát állítod, és "nem történik semmi",
   akkor általában a min-height / max-height is fogja.
   Ezért itt MINDHÁRMAT együtt kell ugyanarra az értékre írni.
   --------------------------------------------------------- */
.myg-diary-modal__field input.myg-diary-modal__edit-sm-name{
  appearance: none !important; /* Ezt ne bántsd. */
  -webkit-appearance: none !important; /* Ezt se bántsd. */

  width: 100% !important; /* Ezt ne bántsd, ettől tölti ki rendesen a helyét. */
  height: 40px !important; /* ITT állítod az input látható magasságát. Ha alacsonyabb kell, próbáld 42px vagy 40px értékre. */
  min-height: 40px !important; /* ITT UGYANAZT az értéket állítsd, mint a height-nál, különben nem mindig látszik a változás. */
  max-height: 40px !important; /* ITT is UGYANAZT az értéket állítsd, mint a height-nál, különben a mező beragadhat magasabbra. */

  margin: 0 !important; /* Ezt ne bántsd. */
  padding: 0 16px !important; /* ITT állítod a belső oldalsó levegőt. Ha a szöveg túl bent van, csökkentsd pl. 14px-re. Ha több levegő kell, növeld. */
  box-sizing: border-box !important; /* Ezt ne bántsd, ettől számol jól a mező. */

  border-radius: 12px !important; /* ITT állítod a lekerekítést. Ha kevésbé kerek kell, csökkentsd pl. 12px-re. */
  border: 1px solid rgba(20,34,56,0.12) !important; /* ITT állítod a keretet. Az 1px a vastagság. */
  background: #ffffff !important; /* ITT állítod a mező háttérszínét. */
  box-shadow: none !important; /* Ezt hagyd így, hogy ne legyen puffadt hatása. */

  font-size: 17px !important; /* ITT állítod a beírt név betűméretét. Ha túl nagy, csökkentsd 16px-re. */
  line-height: 1.2 !important; /* ITT állítod a mezőben lévő szöveg sormagasságát. Ha a szöveg túl magasan vagy mélyen ül, finoman piszkálható. */
  font-weight: 500 !important; /* ITT állítod a név vastagságát a mezőben. */
  color: #5f6b78 !important; /* ITT állítod a beírt név színét. */
}

/* ---------------------------------------------------------
   K/4 – Focus állapot
   --------------------------------------------------------- */
.myg-diary-modal__field input.myg-diary-modal__edit-sm-name:focus{
  outline: none !important; /* Ezt ne bántsd. */
  border-color: rgba(242,140,40,0.42) !important; /* ITT állítod a fókusz keretszínt. */
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important; /* ITT állítod a fókusz körüli halvány glóriát. */
}

/* ---------------------------------------------------------
   K/5 – Mobil finomhangolás
   FONTOS:
   Ha mobilon nem változik a mező magassága,
   akkor valószínűleg EZ a rész írja felül a fenti desktop értéket.
   Ilyenkor ITT kell állítanod, nem fent.
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__field{
    grid-template-columns: 60px minmax(0,1fr) !important; /* ITT állítod mobilon a "Név:" oszlop szélességét. */
    gap: 6px !important; /* ITT állítod mobilon a "Név:" és az input közti távolságot. */
    margin: 0 0 12px 0 !important; /* ITT állítod mobilon a sor alatti levegőt. */
  }

  .myg-diary-modal__field > label{
    font-size: 14px !important; /* ITT állítod mobilon a "Név:" felirat méretét. */
  }

  .myg-diary-modal__field input.myg-diary-modal__edit-sm-name{
    height: 38px !important; /* ITT állítod MOBILON a mező magasságát. Ha alacsonyabb kell, csökkentsd pl. 40px-re. */
    min-height: 38px !important; /* ITT ugyanaz legyen, mint a height. */
    max-height: 38px !important; /* ITT is ugyanaz legyen, mint a height. */
    padding: 0 14px !important; /* ITT állítod MOBILON a belső oldalsó levegőt. */
    font-size: 16px !important; /* ITT állítod MOBILON a beírt név betűméretét. */
    border-radius: 12px !important; /* ITT állítod MOBILON a lekerekítést. */
  }
}

/* ---------------------------------------------------------
   K/6 – Extra szűk mobil
   FONTOS:
   Ha nagyon keskeny képernyőn nézed, EZ a rész írja felül a fenti mobil blokkot is.
   Ha itt nem változtatod meg, lehet úgy tűnik, hogy "nem reagál".
   --------------------------------------------------------- */
@media (max-width: 380px){
  .myg-diary-modal__field{
    grid-template-columns: 56px minmax(0,1fr) !important; /* ITT állítod extra szűk mobilon a "Név:" oszlop szélességét. */
    gap: 8px !important; /* ITT állítod extra szűk mobilon a távolságot. */
    margin: 0 0 10px 0 !important; /* ITT állítod extra szűk mobilon a sor alatti levegőt. */
  }

  .myg-diary-modal__field > label{
    font-size: 13px !important; /* ITT állítod extra szűk mobilon a "Név:" méretét. */
  }

  .myg-diary-modal__field input.myg-diary-modal__edit-sm-name{
    height: 38px !important; /* ITT állítod extra szűk mobilon a mező magasságát. */
    min-height: 38px !important; /* ITT ugyanaz legyen, mint a height. */
    max-height: 38px !important; /* ITT is ugyanaz legyen, mint a height. */
    padding: 0 12px !important; /* ITT állítod extra szűk mobilon a belső oldalsó levegőt. */
    font-size: 15px !important; /* ITT állítod extra szűk mobilon a beírt név méretét. */
    border-radius: 12px !important; /* ITT állítod extra szűk mobilon a lekerekítést. */
  }
}

/* =========================================================
   [BLOCK K END] ÉTKEZÉS SZERKESZTÉSE – FELSŐ NÉV SOR FINOMHANGOLÁS
   ========================================================= */

/* =========================================================
   [BLOCK L START] KERESŐ TALÁLATI KÁRTYA – HOZZÁADÁS IKON JAVÍTÁS
   Cél:
   - a .myg-search-card__add gomb a saját ikonrendszert használja
   - a plugin belső img ne látszódjon
   - a gombtest a myGasztro mikro-akciógomb szabályait kövesse
   - a többi kártyarészhez nem nyúlunk
   ========================================================= */

/* ---------------------------------------------------------
   L/1 – A jobb oldali hozzáadás gomb alapja
   --------------------------------------------------------- */
.myg-search-card__add{
  appearance: none !important; /* Ezt ne bántsd. */
  -webkit-appearance: none !important; /* Ezt se bántsd. */

  display: flex !important; /* Ezt ne bántsd, ettől lesz rendesen középre rakva az ikon. */
  align-items: center !important; /* Ezt ne bántsd. */
  justify-content: center !important; /* Ezt ne bántsd. */

  width: 34px !important; /* ITT állítod a gomb szélességét. A design szabály szerint 34px. */
  min-width: 34px !important; /* ITT ugyanaz legyen, mint a width. */
  max-width: 34px !important; /* ITT ugyanaz legyen, mint a width. */

  height: 34px !important; /* ITT állítod a gomb magasságát. A design szabály szerint 34px. */
  min-height: 34px !important; /* ITT ugyanaz legyen, mint a height. */
  max-height: 34px !important; /* ITT ugyanaz legyen, mint a height. */

  margin: 0 !important; /* Ezt ne bántsd. */
  padding: 0 !important; /* Ezt ne bántsd. */

  border-radius: 10px !important; /* ITT állítod a lekerekítést. A design szabály szerint 10px. */
  border: 1px solid rgba(20,34,56,0.05) !important; /* ITT állítod a finom keretet. */
  background-color: rgba(252,252,251,0.92) !important; /* ITT állítod a gombtest háttérszínét. */

  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important; /* ITT állítod az árnyékot. Ha még halkabb kell, ezt lehet később gyengíteni. */

  background-image: url("https://mygasztro.hu/wp-content/uploads/hozzaad.png") !important; /* ITT van a saját hozzáadás ikon. Ha valaha másik fájlra cseréled, ezt az URL-t kell átírni. */
  background-repeat: no-repeat !important; /* Ezt ne bántsd. */
  background-position: center !important; /* Ezt ne bántsd. */
  background-size: 24px 24px !important; /* ITT állítod az ikon méretét a gombon belül. A design szabály szerint 24px. */

  color: transparent !important; /* Ezt ne bántsd. */
  font-size: 0 !important; /* Ezt ne bántsd. */
  line-height: 0 !important; /* Ezt ne bántsd. */
  overflow: hidden !important; /* Ezt ne bántsd. */

  -webkit-tap-highlight-color: transparent !important; /* Ezt ne bántsd. */
  cursor: pointer !important; /* Ezt ne bántsd. */
}

/* ---------------------------------------------------------
   L/2 – A plugin belső img eltüntetése
   FONTOS:
   A HTML-ben most ez van:
   .myg-search-card__add > img
   Ezt azért kell lelőni, hogy ne az eredeti ikon vagy üres kép látszódjon.
   --------------------------------------------------------- */
.myg-search-card__add img{
  display: none !important; /* Ezt ne bántsd. Ettől tűnik el a belső plugin-kép. */
  width: 0 !important; /* Ezt ne bántsd. */
  height: 0 !important; /* Ezt ne bántsd. */
  opacity: 0 !important; /* Ezt ne bántsd. */
  pointer-events: none !important; /* Ezt ne bántsd. */
}

/* ---------------------------------------------------------
   L/3 – Hover állapot
   --------------------------------------------------------- */
.myg-search-card__add:hover{
  background-color: rgba(255,255,255,0.97) !important; /* ITT állítod hoveren a háttérszínt. */
  border-color: rgba(20,34,56,0.065) !important; /* ITT állítod hoveren a keretszínt. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 5px 12px rgba(20,34,56,0.03) !important; /* ITT állítod hoveren az árnyékot. */
}

/* ---------------------------------------------------------
   L/4 – Aktív / lenyomott állapot
   --------------------------------------------------------- */
.myg-search-card__add:active{
  transform: translateY(1px) scale(0.992) !important; /* ITT állítod a lenyomási érzetet. Ezt ne nagyon piszkáld. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.68) inset,
    0 2px 6px rgba(20,34,56,0.02) !important; /* ITT állítod lenyomáskor az árnyékot. */
}

/* ---------------------------------------------------------
   L/5 – Focus-visible
   --------------------------------------------------------- */
.myg-search-card__add:focus-visible{
  outline: none !important; /* Ezt ne bántsd. */
  border-color: rgba(242,140,40,0.42) !important; /* ITT állítod a fókusz keretszínt. */
  box-shadow:
    0 0 0 2px rgba(242,140,40,0.10),
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important; /* ITT állítod a fókusz glóriát. */
}

/* ---------------------------------------------------------
   L/6 – Biztonsági sor
   Ha a gombon belül bármi más child jelenne meg később,
   az ne zavarjon be az ikon megjelenésébe.
   --------------------------------------------------------- */
.myg-search-card__add > *{
  pointer-events: none !important; /* Ezt ne bántsd. */
}

/* =========================================================
   [BLOCK L END] KERESŐ TALÁLATI KÁRTYA – HOZZÁADÁS IKON JAVÍTÁS
   ========================================================= */

/* =========================================================
   [BLOCK M START] RECEPT / EGYEDI VÁLASZTÓ – ADAG MODAL FINOMÍTÁS V2
   Cél:
   - finom, halk, prémium belső megjelenés
   - nem újratervezni a modalt, csak szépen rendbe tenni
   - a 29 kcal narancs keretes, fehér hátterű összesítő dobozba kerüljön
   - a teljes panel NE legyen átlátszó
   - a CTA-k alaplogikája maradjon
   ========================================================= */

/* ---------------------------------------------------------
   M/1 – A valódi modal content réteg
   FONTOS:
   ezt nem tesszük átlátszóvá
   --------------------------------------------------------- */
.myg-diary-modal__content{
  background: #ffffff !important; /* ITT állítod a panel valódi hátterét. Ez maradjon fehér. */
  border-radius: 24px !important; /* ITT állítod a panel lekerekítését. */
  padding: 18px !important; /* ITT állítod a teljes belső paddingot. Ha szűkebb kell, csökkentsd 16px-re. */
  box-sizing: border-box !important; /* Ezt ne bántsd. */
  box-shadow: none !important; /* Ezt hagyd így, ne legyen túltolva az árnyék. */
}

/* ---------------------------------------------------------
   M/2 – Cím
   --------------------------------------------------------- */
.myg-diary-modal__servings-title{
  margin: 0 0 14px 0 !important; /* ITT állítod a cím alatti távolságot. */
  font-size: 18px !important; /* ITT állítod a cím méretét. */
  line-height: 1.15 !important; /* ITT állítod a cím sormagasságát. */
  font-weight: 600 !important; /* ITT állítod a cím vastagságát. */
  color: #343b45 !important; /* ITT állítod a cím színét. */
  letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------
   M/3 – Név + összes adag blokk
   --------------------------------------------------------- */
.myg-diary-modal__servings-info{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important; /* ITT állítod a név és az összes adag közti távolságot. */
  margin: 0 0 16px 0 !important; /* ITT állítod az info blokk alatti távolságot. */
}

.myg-diary-modal__servings-name{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* ITT állítod, max hány sor lehet a név. */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 100% !important;
  font-size: 16px !important; /* ITT állítod a recept / egyedi név méretét. */
  line-height: 1.24 !important; /* ITT állítod a név sormagasságát. */
  font-weight: 600 !important; /* ITT állítod a név vastagságát. */
  color: #343b45 !important; /* ITT állítod a név színét. */
  text-wrap: balance !important;
}

.myg-diary-modal__servings-total{
  font-size: 13px !important; /* ITT állítod az "Össz: 4 adag" méretét. */
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #9aa1aa !important; /* ITT állítod a másodlagos szöveg színét. */
}

/* ---------------------------------------------------------
   M/4 – Mínusz / érték / plusz sor
   Csak finoman igazítjuk, nem csinálunk belőle külön design-showt
   --------------------------------------------------------- */
.myg-diary-modal__servings-input{
  display: grid !important;
  grid-template-columns: 56px minmax(0, 84px) 56px !important; /* ITT állítod a mínusz / input / plusz szélességét. */
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important; /* ITT állítod a három elem közti távolságot. */
  margin: 0 0 16px 0 !important; /* ITT állítod az adagválasztó sor alatti távolságot. */
}

.myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-down"],
.myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-up"]{
  width: 56px !important; /* ITT állítod a plusz/mínusz gomb szélességét. */
  min-width: 56px !important;
  max-width: 56px !important;
  height: 48px !important; /* ITT állítod a plusz/mínusz gomb magasságát. */
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 !important;
  border-radius: 14px !important; /* ITT állítod a gombok lekerekítését. */
  font-size: 20px !important; /* ITT állítod a + / - méretét. */
  font-weight: 700 !important;
}

.myg-diary-modal__servings-value{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  height: 48px !important; /* ITT állítod a középső számmező magasságát. */
  min-height: 48px !important;
  max-height: 48px !important;

  margin: 0 !important;
  padding: 0 10px !important; /* ITT állítod a számmező belső paddingját. */
  box-sizing: border-box !important;

  border-radius: 14px !important; /* ITT állítod a számmező lekerekítését. */
  border: 1px solid rgba(20,34,56,0.12) !important; /* ITT állítod a számmező keretét. */
  background: #ffffff !important; /* ITT állítod a számmező hátterét. */
  box-shadow: none !important;

  text-align: center !important;
  font-size: 20px !important; /* ITT állítod a szám méretét. */
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #4f5d6c !important;
}

/* ---------------------------------------------------------
   M/5 – Kcal előnézet
   Itt kapja meg a halk, fehér hátterű, narancs keretes gyűjtő stílust
   --------------------------------------------------------- */
.myg-diary-modal__servings-preview{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 54px !important; /* ITT állítod a kcal doboz magasságát. */
  margin: 0 0 16px 0 !important; /* ITT állítod a kcal doboz alatti távolságot. */
  padding: 0 14px !important; /* ITT állítod a kcal doboz belső oldalsó paddingját. */

  border-radius: 16px !important; /* ITT állítod a kcal doboz lekerekítését. */
  border: 1px solid rgba(242,140,40,0.42) !important; /* ITT állítod a narancs keret erősségét. */
  background: #ffffff !important; /* ITT állítod a kcal doboz hátterét. FEHÉR maradjon. */
  box-shadow: none !important; /* Ezt hagyd így, ne legyen túldizájnolva. */
}

.myg-diary-modal__servings-kcal{
  font-size: 18px !important; /* ITT állítod a "29 kcal" méretét. */
  line-height: 1.1 !important;
  font-weight: 800 !important; /* ITT állítod a "29 kcal" vastagságát. */
  color: #f28c28 !important; /* ITT állítod a narancs színét. */
  letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------
   M/6 – CTA sor
   A gombok alapból jók, csak a spacinget fogjuk össze
   --------------------------------------------------------- */
.myg-diary-modal__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important; /* ITT állítod a Mégsem és Hozzáadás gomb közti távolságot. */
  align-items: stretch !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   M/7 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__content{
    padding: 16px !important; /* ITT állítod mobilon a teljes belső paddingot. */
    border-radius: 22px !important; /* ITT állítod mobilon a panel lekerekítését. */
  }

  .myg-diary-modal__servings-title{
    margin: 0 0 12px 0 !important;
    font-size: 17px !important; /* ITT állítod mobilon a cím méretét. */
  }

  .myg-diary-modal__servings-info{
    gap: 5px !important;
    margin: 0 0 14px 0 !important;
  }

  .myg-diary-modal__servings-name{
    font-size: 15px !important; /* ITT állítod mobilon a név méretét. */
  }

  .myg-diary-modal__servings-total{
    font-size: 12.5px !important;
  }

  .myg-diary-modal__servings-input{
    grid-template-columns: 54px minmax(0, 80px) 54px !important; /* ITT állítod mobilon a három mező szélességét. */
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
  }

  .myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-down"],
  .myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-up"]{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 46px !important; /* ITT állítod mobilon a plusz/mínusz magasságát. */
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 19px !important;
  }

  .myg-diary-modal__servings-value{
    height: 46px !important; /* ITT állítod mobilon a számmező magasságát. */
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 19px !important;
  }

  .myg-diary-modal__servings-preview{
    min-height: 50px !important; /* ITT állítod mobilon a kcal doboz magasságát. */
    margin: 0 0 14px 0 !important;
    border-radius: 15px !important;
  }

  .myg-diary-modal__servings-kcal{
    font-size: 17px !important; /* ITT állítod mobilon a kcal méretét. */
  }

  .myg-diary-modal__actions{
    gap: 12px !important;
  }
}

/* ---------------------------------------------------------
   M/8 – Extra szűk mobil
   Csak tényleg szűk helyen lépjen életbe
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-modal__content{
    padding: 14px !important;
  }

  .myg-diary-modal__servings-title{
    font-size: 16px !important;
  }

  .myg-diary-modal__servings-name{
    font-size: 14px !important;
  }

  .myg-diary-modal__servings-input{
    grid-template-columns: 50px minmax(0, 74px) 50px !important;
    gap: 8px !important;
  }

  .myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-down"],
  .myg-diary-modal__servings-input .myg-diary-btn[data-action="servings-up"]{
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 18px !important;
  }

  .myg-diary-modal__servings-value{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 18px !important;
  }

  .myg-diary-modal__servings-preview{
    min-height: 48px !important;
  }

  .myg-diary-modal__servings-kcal{
    font-size: 16px !important;
  }
}

/* =========================================================
   [BLOCK M END] RECEPT / EGYEDI VÁLASZTÓ – ADAG MODAL FINOMÍTÁS V2
   ========================================================= */