/* =========================================================
   [BLOCK A ELEJE] NAPLÓ ELŐSZOBA – FELSŐ FEJLÉC ÉS 3 IKONOS SÁV
   Cél:
   - havi nézetes NAGY ikonlogika az előszoba tetején
   - bal oldalon: vissza
   - jobb oldalon: másolás + sablon
   - alatta külön sorban teljes szélességben a név input
   - nincs fehér ikonháttér, nincs dobozhatás
   - a havi nézet felső/alsó PNG ikonos világát visszük tovább
   ========================================================= */

/* ---------------------------------------------------------
   A/1 – A teljes felső top blokk
   --------------------------------------------------------- */
.myg-diary-anteroom__top{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important; /* ITT állítod a felső részek közti függőleges távolságot. */
  margin: 0 0 18px 0 !important; /* ITT állítod a teljes top blokk alatti távolságot. */
}

/* ---------------------------------------------------------
   A/2 – A header teljes elrendezése
   JAVÍTOTT VERZIÓ:
   - 48px-es ikonmérethez igazítva
   --------------------------------------------------------- */
.myg-diary-anteroom__header{
  display: grid !important;
  grid-template-columns: 48px 1fr auto auto !important; /* ITT az oszlopok szélessége. */
  grid-template-rows: auto auto !important;
  column-gap: 0 !important;
  row-gap: 14px !important; /* ITT állítod az ikonsor és input közti távolságot. */
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------
   A/3 – Ikonok pozicionálása
   JAVÍTOTT VERZIÓ:
   - bal oldalon: vissza
   - jobb oldalon: másolás + sablon
   - nagyobb ikonokhoz igazított távolság
   --------------------------------------------------------- */
.myg-diary-anteroom__back-btn{
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important; /* Ezt hagyd így. */
}

.myg-diary-anteroom__copy-btn{
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 20px 0 0 !important; /* ITT állítod a másolás és sablon ikon közti távolságot. Nagyobb ikonhoz nagyobb rés. */
}

.myg-diary-anteroom__save-template{
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important; /* Ezt hagyd így. */
}

/* ---------------------------------------------------------
   A/4 – Nagy ikon-gomb alap
   JAVÍTOTT VERZIÓ:
   - nagyobb kattintható felület
   - nagyobb ikonméret
   - havi / napi nézethez közelítve
   --------------------------------------------------------- */
.myg-diary-anteroom__back-btn,
.myg-diary-anteroom__copy-btn,
.myg-diary-anteroom__save-template{
  appearance: none !important; /* Ezt ne bántsd. */
  -webkit-appearance: none !important; /* Ezt se bántsd. */

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

  width: 48px !important; /* ITT állítod a gomb szélességét. Most nagyobbra vettük. */
  min-width: 48px !important;
  max-width: 48px !important;

  height: 48px !important; /* ITT állítod a gomb magasságát. Most nagyobbra vettük. */
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 !important;
  box-sizing: border-box !important;

  background-color: transparent !important; /* Ezt hagyd így. */
  background: transparent !important; /* Ezt hagyd így. */
  border: 0 !important; /* Ezt hagyd így. */
  box-shadow: none !important; /* Ezt hagyd így. */

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 36px 36px !important; /* ITT állítod az ikon méretét. Direkt nagyobbra húzva. */

  border-radius: 0 !important; /* Ezt hagyd így. */

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

  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;

  transition: transform 120ms ease, filter 120ms ease !important;
  transform: translateZ(0) !important;
}

/* ---------------------------------------------------------
   A/5 – Saját ikonok URL-jei
   --------------------------------------------------------- */
.myg-diary-anteroom__back-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/balra.png") !important; /* ITT van a vissza ikon URL-je. */
}

.myg-diary-anteroom__copy-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/masolas.png") !important; /* ITT van a másolás ikon URL-je. */
}

.myg-diary-anteroom__save-template{
  background-image: url("https://mygasztro.hu/wp-content/uploads/sablon.png") !important; /* ITT van a sablon ikon URL-je. */
}

/* ---------------------------------------------------------
   A/6 – Eredeti belső ikonok OFF
   FONTOS:
   - a vissza gombban most emoji img van
   - a másik kettőben span ikon van
   Ezeket le kell tiltani, hogy csak a saját PNG látszódjon.
   --------------------------------------------------------- */
.myg-diary-anteroom__back-btn img,
.myg-diary-anteroom__copy-btn .myg-icon,
.myg-diary-anteroom__save-template .myg-icon,
.myg-diary-anteroom__back-btn svg,
.myg-diary-anteroom__copy-btn svg,
.myg-diary-anteroom__save-template svg,
.myg-diary-anteroom__back-btn::before,
.myg-diary-anteroom__back-btn::after,
.myg-diary-anteroom__copy-btn::before,
.myg-diary-anteroom__copy-btn::after,
.myg-diary-anteroom__save-template::before,
.myg-diary-anteroom__save-template::after,
.myg-diary-anteroom__back-btn > *,
.myg-diary-anteroom__copy-btn > *,
.myg-diary-anteroom__save-template > *{
  display: none !important; /* Ezt ne bántsd. Ettől tűnnek el a belső eredeti ikonok. */
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content: none !important;
  background: none !important;
}

/* ---------------------------------------------------------
   A/7 – Hover / active / focus
   Havi nézetes logika: nincs doboz, csak finom mozgás
   --------------------------------------------------------- */
.myg-diary-anteroom__back-btn:hover,
.myg-diary-anteroom__copy-btn:hover,
.myg-diary-anteroom__save-template:hover{
  filter: none !important; /* Ezt hagyd így. Ne legyen túldizájnolva. */
}

.myg-diary-anteroom__back-btn:active,
.myg-diary-anteroom__copy-btn:active,
.myg-diary-anteroom__save-template:active{
  transform: translateY(2px) scale(0.96) !important; /* ITT állítod a lenyomási érzetet. Havi nézetes logika. */
  filter: brightness(0.98) !important; /* Ezt hagyd így. */
}

.myg-diary-anteroom__back-btn:focus,
.myg-diary-anteroom__back-btn:focus-visible,
.myg-diary-anteroom__copy-btn:focus,
.myg-diary-anteroom__copy-btn:focus-visible,
.myg-diary-anteroom__save-template:focus,
.myg-diary-anteroom__save-template:focus-visible{
  outline: none !important; /* Ezt hagyd így. */
  box-shadow: none !important; /* Ezt hagyd így. */
  background-color: transparent !important; /* Ezt hagyd így. */
}

/* ---------------------------------------------------------
   A/8 – Név input külön teljes sorban
   --------------------------------------------------------- */
.myg-diary-anteroom__name-input{
  grid-column: 1 / 5 !important; /* Ezt ne bántsd. Ettől fut végig a teljes szélességen az ikonok alatt. */
  grid-row: 2 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 44px !important; /* ITT állítod az input magasságát. */
  min-height: 44px !important; /* ITT ugyanaz legyen, mint a height. */
  max-height: 44px !important; /* ITT is ugyanaz legyen, mint a height. */

  margin: 0 !important;
  padding: 0 16px !important; /* ITT állítod a belső oldalsó levegőt. */

  box-sizing: border-box !important;
  border-radius: 16px !important; /* ITT állítod az input lekerekítését. */
  border: 1px solid rgba(20,34,56,0.12) !important; /* ITT állítod a finom keretet. */
  background: #ffffff !important;
  box-shadow: none !important;

  font-size: 16px !important; /* ITT állítod a beírt szöveg méretét. */
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #5f6b78 !important;
}

/* ---------------------------------------------------------
   A/9 – Placeholder
   --------------------------------------------------------- */
.myg-diary-anteroom__name-input::placeholder{
  color: #8a96a4 !important; /* ITT állítod a placeholder színét. */
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   A/10 – Focus az inputon
   --------------------------------------------------------- */
.myg-diary-anteroom__name-input:focus{
  outline: none !important;
  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 glóriát. */
}

/* ---------------------------------------------------------
   A/11 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-anteroom__top{
    gap: 14px !important;
    margin: 0 0 16px 0 !important;
  }

  .myg-diary-anteroom__header{
    grid-template-columns: 48px 1fr auto auto !important; /* Ezt hagyd így mobilon is. */
    row-gap: 12px !important;
  }

  .myg-diary-anteroom__copy-btn{
    margin: 0 20px 0 0 !important; /* ITT állítod mobilon a másolás és sablon ikon közti távolságot. */
  }

  .myg-diary-anteroom__name-input{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }
}

/* ---------------------------------------------------------
   A/12 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-anteroom__header{
    grid-template-columns: 42px 1fr auto auto !important; /* ITT állítod extra szűk mobilon a bal ikonoszlopot. */
    row-gap: 10px !important;
  }

  .myg-diary-anteroom__back-btn,
  .myg-diary-anteroom__copy-btn,
  .myg-diary-anteroom__save-template{
    width: 42px !important; /* ITT állítod extra szűk mobilon a gomb szélességét. */
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important; /* ITT állítod extra szűk mobilon a gomb magasságát. */
    min-height: 42px !important;
    max-height: 42px !important;
    background-size: 32px 32px !important; /* ITT állítod extra szűk mobilon az ikon méretét. */
  }

  .myg-diary-anteroom__copy-btn{
    margin: 0 22px 0 0 !important; /* ITT állítod extra szűk mobilon a másolás és sablon ikon közti távolságot. */
  }

  .myg-diary-anteroom__name-input{
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK A VÉGE] NAPLÓ ELŐSZOBA – FELSŐ FEJLÉC ÉS 3 IKONOS SÁV
   ========================================================= */

/* =========================================================
   [BLOCK B ELEJE] NAPLÓ ELŐSZOBA – MAKRÓSÁV + ÁLLAPOTKAPCSOLÓ + TERVEZETT CÍMKE
   JAVÍTOTT VERZIÓ:
   - az ELFOGYASZTOTT / TERVEZETT mérete, lekerekítése, ritmusa
     az alsó HOZZÁAD / KÉSZ VAGYOK gombokhoz igazítva
   - nem nagyobb, nem bumfordibb
   ========================================================= */

/* ---------------------------------------------------------
   B/1 – A makrós összesítő sáv
   --------------------------------------------------------- */
.myg-diary-anteroom__macros{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;

  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: 12px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  text-align: center !important;
}

.myg-diary-anteroom__macro{
  font-size: 15px !important; /* ITT tudod állítani */
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: #243244 !important;
  white-space: nowrap !important;
}

.myg-diary-anteroom__macro[data-macro="kcal"]{
  color: #243244 !important;
}

.myg-diary-anteroom__macro-separator{
  margin: 0 12px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: rgba(36,50,68,0.34) !important;
}

/* ---------------------------------------------------------
   B/2 – Állapotkapcsoló külső wrap
   --------------------------------------------------------- */
.myg-diary-anteroom__toggle{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  gap: 10px !important; /* ugyanaz a ritmus, mint az alsó CTA-knál */

  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------
   B/3 – Két gomb közös alapja
   AZ ALSÓ GOMBSOR ARÁNYAIHOZ IGAZÍTVA
   --------------------------------------------------------- */
.myg-diary-anteroom__toggle-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

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

  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important; /* ugyanaz, mint lent desktopon */
  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 10px !important; /* ugyanaz, mint lent */
  border: 1px solid rgba(20,34,56,0.08) !important;
  box-sizing: border-box !important;

  font-size: 15px !important; /* ugyanaz a vizuális család */
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 120ms ease !important;
}

/* ---------------------------------------------------------
   B/4 – Inaktív állapot
   Mint a HOZZÁAD
   --------------------------------------------------------- */
.myg-diary-anteroom__toggle-btn:not(.myg-diary-anteroom__toggle-btn--active){
  background: #ffffff !important;
  color: #f28c28 !important;
  border-color: rgba(242,140,40,0.82) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   B/5 – Aktív állapot
   Mint a KÉSZ VAGYOK
   --------------------------------------------------------- */
.myg-diary-anteroom__toggle-btn--active{
  background: #ff8a2d !important;
  color: #ffffff !important;
  border-color: rgba(242,140,40,0.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 8px 14px rgba(242,140,40,0.12) !important;
}

/* ---------------------------------------------------------
   B/6 – Hover / active / focus
   --------------------------------------------------------- */
.myg-diary-anteroom__toggle-btn:hover{
  box-shadow: none !important;
}

.myg-diary-anteroom__toggle-btn:active{
  transform: translateY(1px) scale(0.992) !important;
}

.myg-diary-anteroom__toggle-btn:focus,
.myg-diary-anteroom__toggle-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   B/7 – Tervezett címke / információs sáv
   --------------------------------------------------------- */
.myg-diary-anteroom__planned-label{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #8e99a6 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   B/8 – Tervezett ikon a címkében
   --------------------------------------------------------- */
.myg-diary-anteroom__planned-label .myg-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;

  background-image: url("https://mygasztro.hu/wp-content/uploads/sablon.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;

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

.myg-diary-anteroom__planned-label .myg-icon::before,
.myg-diary-anteroom__planned-label .myg-icon::after{
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   B/9 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-anteroom__macros{
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
  }

  .myg-diary-anteroom__macro{
    font-size: 13px !important;
  }

  .myg-diary-anteroom__macro-separator{
    margin: 0 8px !important;
    font-size: 13px !important;
  }

  .myg-diary-anteroom__toggle{
    gap: 8px !important; /* ugyanaz a ritmus, mint lent mobilon */
  }

  .myg-diary-anteroom__toggle-btn{
    min-height: 46px !important; /* ugyanaz, mint lent mobilon */
    padding: 0 14px !important;
    border-radius: 10px !important; /* ugyanaz, mint lent mobilon */
    font-size: 14px !important; /* ugyanaz a család */
  }

  .myg-diary-anteroom__planned-label{
    min-height: 34px !important;
    font-size: 15px !important;
  }
}

/* ---------------------------------------------------------
   B/10 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-anteroom__macros{
    min-height: 42px !important;
  }

  .myg-diary-anteroom__macro{
    font-size: 12px !important;
  }

  .myg-diary-anteroom__macro-separator{
    margin: 0 6px !important;
    font-size: 12px !important;
  }

  .myg-diary-anteroom__toggle{
    gap: 8px !important;
  }

  .myg-diary-anteroom__toggle-btn{
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  .myg-diary-anteroom__planned-label{
    min-height: 32px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK B VÉGE] NAPLÓ ELŐSZOBA – MAKRÓSÁV + ÁLLAPOTKAPCSOLÓ + TERVEZETT CÍMKE
   ========================================================= */


/* =========================================================
   [BLOCK C ELEJE] NAPLÓ ELŐSZOBA – IDŐPONT SOR ÉS TERVEZETT ÉTKEZÉS SOR
   Cél:
   - az aktív kapcsoló szerint váltakozva jelenjen meg
     az időpont sor vagy a tervezett étkezés sor
   - ne látszódjon egyszerre mindkettő
   - az időpont sor legyen középre húzott, egy sorba rendezett
   - a tervezett sor maradjon egyszerű, középre igazított
   - a tervezett ikon később külön PNG-re cserélhető legyen
   ========================================================= */

/* ---------------------------------------------------------
   C/1 – Megjelenítési logika a kapcsoló alapján
   FONTOS:
   - ha ELFOGYASZTOTT aktív -> időpont látszik
   - ha TERVEZETT aktív -> tervezett étkezés sor látszik
   --------------------------------------------------------- */

/* Alapból mindkettőt elrejtjük */
.myg-diary-anteroom__time,
.myg-diary-anteroom__planned-label{
  display: none !important; /* Ezt ne bántsd. A láthatóságot lent az aktív kapcsoló dönti el. */
}

/* ELFOGYASZTOTT aktív eset */
.myg-diary-anteroom__top:has(.myg-diary-anteroom__toggle-btn[data-status="consumed"].myg-diary-anteroom__toggle-btn--active) .myg-diary-anteroom__time{
  display: flex !important;
}

.myg-diary-anteroom__top:has(.myg-diary-anteroom__toggle-btn[data-status="consumed"].myg-diary-anteroom__toggle-btn--active) .myg-diary-anteroom__planned-label{
  display: none !important;
}

/* TERVEZETT aktív eset */
.myg-diary-anteroom__top:has(.myg-diary-anteroom__toggle-btn[data-status="planned"].myg-diary-anteroom__toggle-btn--active) .myg-diary-anteroom__planned-label{
  display: flex !important;
}

.myg-diary-anteroom__top:has(.myg-diary-anteroom__toggle-btn[data-status="planned"].myg-diary-anteroom__toggle-btn--active) .myg-diary-anteroom__time{
  display: none !important;
}

/* ---------------------------------------------------------
   C/2 – IDŐPONT sor
   Egy sorban, középre rendezve:
   ikon + felirat + kompakt időmező
   --------------------------------------------------------- */
.myg-diary-anteroom__time{
  align-items: center !important;
  justify-content: center !important; /* Ezt hagyd így. Egyben középre húzza az egész sort. */
  gap: 12px !important; /* ITT állítod az ikon / felirat / mező közti távolságot. */

  min-height: 40px !important; /* ITT állítod a sor minimális magasságát. */
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   C/3 – Óra ikon
   --------------------------------------------------------- */
.myg-diary-anteroom__time-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important; /* ITT állítod az óra ikon helyét. */
  height: 22px !important;
  flex: 0 0 22px !important;

  background-image: url("https://mygasztro.hu/wp-content/uploads/ora-2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important; /* ITT állítod az ikon méretét. */

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

.myg-diary-anteroom__time-icon::before,
.myg-diary-anteroom__time-icon::after{
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   C/4 – Időpont felirat
   --------------------------------------------------------- */
.myg-diary-anteroom__time > label{
  margin: 0 !important;
  padding: 0 !important;

  font-size: 16px !important; /* ITT állítod az "Időpont:" méretét. */
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #8e99a6 !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   C/5 – Időmező
   Napi nézetes testsúly / kalóriacél logikára húzva
   --------------------------------------------------------- */
.myg-diary-anteroom__time-input{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 108px !important; /* ITT állítod a mező szélességét. Csak akkora legyen, amekkora az időponthoz kell. */
  min-width: 108px !important;
  max-width: 108px !important;

  height: 38px !important; /* ITT állítod a mező magasságát. Kicsit laposabb, elegánsabb. */
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 !important;
  padding: 0 14px !important; /* ITT állítod a belső oldalsó levegőt. */

  box-sizing: border-box !important;
  border-radius: 14px !important; /* ITT állítod a lekerekítést. */
  border: 1px solid rgba(20,34,56,0.12) !important; /* ITT állítod a finom keretet. */
  background: #ffffff !important;
  box-shadow: none !important; /* Ezt hagyd így. Ne legyen puffadt. */

  font-size: 16px !important; /* ITT állítod az időpont méretét. */
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #5f6b78 !important;
  text-align: center !important; /* ITT állítod az időpont igazítását. Középre rendezett elegánsabb. */
}

/* ---------------------------------------------------------
   C/6 – TERVEZETT étkezés sor
   --------------------------------------------------------- */
.myg-diary-anteroom__planned-label{
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important; /* ITT állítod az ikon és a szöveg közti távolságot. */

  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-size: 16px !important; /* ITT állítod a "Tervezett étkezés" méretét. */
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #8e99a6 !important;
  text-align: center !important;
}

/* ---------------------------------------------------------
   C/7 – TERVEZETT ikon
   FONTOS:
   ha meglesz a végleges PNG, csak ezt az URL-t kell cserélni
   --------------------------------------------------------- */
.myg-diary-anteroom__planned-label .myg-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important; /* ITT állítod az ikon helyét. */
  height: 22px !important;
  flex: 0 0 22px !important;

  background-image: url("https://mygasztro.hu/wp-content/uploads/tervezett.png") !important; /* ITT lesz a végleges tervezett ikon URL-je. */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important; /* ITT állítod az ikon tényleges méretét. */

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

.myg-diary-anteroom__planned-label .myg-icon::before,
.myg-diary-anteroom__planned-label .myg-icon::after{
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   C/8 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-anteroom__time{
    gap: 10px !important; /* ITT állítod mobilon a belső távolságokat. */
    min-height: 38px !important;
  }

  .myg-diary-anteroom__time-icon{
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    background-size: 20px 20px !important;
  }

  .myg-diary-anteroom__time > label{
    font-size: 15px !important;
  }

  .myg-diary-anteroom__time-input{
    width: 98px !important; /* ITT állítod mobilon a mező szélességét. */
    min-width: 98px !important;
    max-width: 98px !important;

    height: 32px !important; /* ITT állítod mobilon a mező magasságát. */
    min-height: 32px !important;
    max-height: 32px !important;

    font-size: 15px !important;
    border-radius: 13px !important;
  }

  .myg-diary-anteroom__planned-label{
    min-height: 34px !important;
    font-size: 15px !important;
  }

  .myg-diary-anteroom__planned-label .myg-icon{
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    background-size: 18px 18px !important;
  }
}

/* ---------------------------------------------------------
   C/9 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-anteroom__time{
    gap: 8px !important;
  }

  .myg-diary-anteroom__time > label{
    font-size: 14px !important;
  }

  .myg-diary-anteroom__time-input{
    width: 92px !important; /* ITT állítod extra szűk mobilon a mező szélességét. */
    min-width: 92px !important;
    max-width: 92px !important;

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

    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .myg-diary-anteroom__planned-label{
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK C VÉGE] NAPLÓ ELŐSZOBA – IDŐPONT SOR ÉS TERVEZETT ÉTKEZÉS SOR
   ========================================================= */

/* =========================================================
   [BLOCK TP ELEJE] IDŐVÁLASZTÓ MODAL – ALSÓ CTA GOMBSOR
   Cél:
   - a Mégsem és OK gomb egy sorban legyen
   - bal oldalon semleges gomb, jobb oldalon fő CTA
   - egységes, tiszta, app-szerű megjelenés
   - normál mobilon egymás mellett maradjanak
   ========================================================= */

/* ---------------------------------------------------------
   TP/1 – Az alsó gombsor elrendezése
   --------------------------------------------------------- */
.myg-tp-actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* ITT van a két egyforma szélességű gomboszlop. */
  gap: 14px !important; /* ITT állítod a két gomb közti távolságot. Ha szűkebb kell, csökkentsd. */
  align-items: stretch !important;
  margin: 0 !important;
  padding: 18px 22px 22px 22px !important; /* ITT állítod a gombsor külső levegőjét. */
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   TP/2 – Közös gombalap
   --------------------------------------------------------- */
.myg-tp-actions > button{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important; /* ITT állítod a gomb magasságát. Ha laposabb kell, csökkentsd 50-52-re. */
  padding: 0 18px !important; /* ITT állítod a gombon belüli oldalsó levegőt. */

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

  border-radius: 16px !important; /* ITT állítod a gombok lekerekítését. */
  border: 1px solid rgba(20,34,56,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important; /* Ezt hagyd így. Finom, halk árnyék. */

  font-size: 17px !important; /* ITT állítod a felirat méretét. */
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease,
    box-shadow 140ms ease !important;
}

/* ---------------------------------------------------------
   TP/3 – Bal oldali semleges gomb: Mégsem
   --------------------------------------------------------- */
.myg-tp-actions__cancel{
  background: #ffffff !important; /* Ezt hagyd így. Semleges gomb = fehér háttér. */
  color: #243244 !important; /* ITT állítod a szöveg színét. */
  border-color: rgba(20,34,56,0.10) !important; /* ITT állítod a finom keretszínt. */
}

/* ---------------------------------------------------------
   TP/4 – Jobb oldali fő CTA: OK
   --------------------------------------------------------- */
.myg-tp-actions__ok{
  background: #ff8a2b !important; /* ITT állítod a fő CTA narancsát. */
  color: #ffffff !important; /* Ezt hagyd így. */
  border-color: #ff8a2b !important;
  box-shadow: none !important; /* Ezt hagyd így. Fő CTA maradjon tiszta, ne koszos. */
}

/* ---------------------------------------------------------
   TP/5 – Hover állapotok
   --------------------------------------------------------- */
.myg-tp-actions__cancel:hover{
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(20,34,56,0.13) !important;
}

.myg-tp-actions__ok:hover{
  background: #f58222 !important; /* ITT finoman sötétedik hoverre a fő CTA. */
  border-color: #f58222 !important;
}

/* ---------------------------------------------------------
   TP/6 – Active / lenyomás
   --------------------------------------------------------- */
.myg-tp-actions__cancel:active,
.myg-tp-actions__ok:active{
  transform: translateY(1px) scale(0.992) !important; /* ITT állítod a lenyomási érzetet. */
}

/* ---------------------------------------------------------
   TP/7 – Focus
   --------------------------------------------------------- */
.myg-tp-actions__cancel:focus,
.myg-tp-actions__cancel:focus-visible,
.myg-tp-actions__ok:focus,
.myg-tp-actions__ok:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   TP/8 – Normál mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-tp-actions{
    gap: 12px !important; /* ITT állítod mobilon a két gomb közti távolságot. */
    padding: 18px 18px 20px 18px !important; /* ITT állítod mobilon a külső levegőt. */
  }

  .myg-tp-actions > button{
    min-height: 52px !important; /* ITT állítod mobilon a gombmagasságot. */
    border-radius: 15px !important;
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   TP/9 – Extrém keskeny mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-tp-actions{
    grid-template-columns: 1fr !important; /* Ezt hagyd így. Csak extrém keskeny mobilon törjön egymás alá. */
  }
}

/* =========================================================
   [BLOCK TP VÉGE] IDŐVÁLASZTÓ MODAL – ALSÓ CTA GOMBSOR
   ========================================================= */

/* =========================================================
   [BLOCK D ELEJE] NAPLÓ ELŐSZOBA – TÉTELKÁRTYÁK BELSŐ ELRENDEZÉSE V2
   Cél:
   - az előszoba tételkártyái igazodjanak az ÉTEL fül jól működő kártyalogikájához
   - név max. 2 sor
   - jobb felső sarokban szerkesztés + kuka
   - nagyobb hézag a két ikon között
   - külön alsó meta sor: mennyiség + kcal
   - mobil-first, normál mobilon is kulturált maradjon
   ========================================================= */

/* ---------------------------------------------------------
   D/1 – Maga a tételkártya
   --------------------------------------------------------- */
.myg-diary-anteroom__item{
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 0 !important;
  row-gap: 8px !important; /* ITT állítod a név és a meta sor közti távolságot. */

  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  min-height: 96px !important; /* ITT állítod a kártya minimum magasságát. */
  padding: 16px 16px 14px 18px !important; /* ITT állítod a kártya belső terét. */
  padding-right: 110px !important; /* ITT hagyunk helyet a jobb felső ikonoknak. */

  border-radius: 18px !important; /* ITT állítod a kártya lekerekítését. */
  border: 1px solid rgba(20,34,56,0.10) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   D/2 – A belső wrapper-ek áttetszők maradnak
   --------------------------------------------------------- */
.myg-diary-anteroom__item-header{
  display: contents !important;
}

.myg-diary-anteroom__item-details{
  display: contents !important;
}

/* ---------------------------------------------------------
   D/3 – Név: max. 2 sor, kisebb méret
   --------------------------------------------------------- */
.myg-diary-anteroom__item-name{
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
  min-width: 0 !important;

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

  margin: 0 !important;
  padding-right: 0 !important;

  font-size: 16px !important; /* ITT állítod a név méretét. */
  line-height: 1.22 !important; /* ITT állítod a név sorközét. */
  font-weight: 600 !important; /* ITT állítod a név vastagságát. */
  letter-spacing: -0.01em !important;
  color: #2f353d !important;
}

/* ---------------------------------------------------------
   D/4 – Mennyiség: alsó meta sor első eleme
   --------------------------------------------------------- */
.myg-diary-anteroom__item-details span{
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;

  margin: 0 !important;
  white-space: nowrap !important;

  font-size: 16px !important; /* ITT állítod a mennyiség méretét. */
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #7b838c !important;
}

/* ---------------------------------------------------------
   D/5 – Mennyiség utáni pont
   --------------------------------------------------------- */
.myg-diary-anteroom__item-details span::after{
  content: " ·" !important;
  margin-left: 5px !important; /* ITT állítod a pont bal oldali közét. */
  margin-right: 7px !important; /* ITT állítod a pont jobb oldali közét. */
  color: #b0b6bd !important;
}

/* ---------------------------------------------------------
   D/6 – Kcal: alsó meta sor második eleme
   --------------------------------------------------------- */
.myg-diary-anteroom__item-kcal{
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: start !important;

  margin: 0 !important;
  white-space: nowrap !important;

  font-size: 16px !important; /* ITT állítod a kcal méretét. */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #f28c28 !important;
}

/* ---------------------------------------------------------
   D/7 – A meta sor finom közös hangolása
   --------------------------------------------------------- */
.myg-diary-anteroom__item-details span,
.myg-diary-anteroom__item-kcal{
  transform: translateY(2px) !important; /* ITT tudod a teljes meta sort lejjebb/feljebb tolni. */
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------
   D/8 – Akciógomb konténer
   --------------------------------------------------------- */
.myg-diary-anteroom__item-actions{
  position: absolute !important;
  top: 16px !important; /* ITT tudod együtt feljebb/lejjebb tenni a jobb felső ikonokat. */
  right: 16px !important; /* ITT tudod a teljes ikonzónát balra/jobbra tolni. */
  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important; /* ITT állítod a két ikon közti távolságot. */
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   D/9 – Közös mikro-akciógomb szabvány
   --------------------------------------------------------- */
.myg-diary-anteroom__item-edit,
.myg-diary-anteroom__item-remove{
  appearance: none !important;
  -webkit-appearance: 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;
  text-shadow: none !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;
}

/* ---------------------------------------------------------
   D/10 – Saját ikonok
   --------------------------------------------------------- */
.myg-diary-anteroom__item-edit{
  background-image: url("https://mygasztro.hu/wp-content/uploads/szerkeszt.png") !important;
}

.myg-diary-anteroom__item-remove{
  background-image: url("https://mygasztro.hu/wp-content/uploads/delete.png") !important;
}

/* ---------------------------------------------------------
   D/11 – Eredeti plugin karakterek / belső tartalom OFF
   --------------------------------------------------------- */
.myg-diary-anteroom__item-edit > *,
.myg-diary-anteroom__item-remove > *{
  display: none !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   D/12 – Hover / active
   --------------------------------------------------------- */
.myg-diary-anteroom__item-edit:hover,
.myg-diary-anteroom__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-anteroom__item-edit:active,
.myg-diary-anteroom__item-remove:active{
  transform: translateY(1px) scale(0.992) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.68) inset,
    0 2px 6px rgba(20,34,56,0.02) !important;
}

.myg-diary-anteroom__item-edit:focus,
.myg-diary-anteroom__item-edit:focus-visible,
.myg-diary-anteroom__item-remove:focus,
.myg-diary-anteroom__item-remove:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   D/13 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){

  .myg-diary-anteroom__item{
    min-height: 94px !important;
    padding: 16px 16px 14px 18px !important;
    padding-right: 110px !important;
    row-gap: 7px !important;
  }

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

  .myg-diary-anteroom__item-details span,
  .myg-diary-anteroom__item-kcal{
    font-size: 14px !important; /* ITT állítod mobilon a meta sor méretét. */
    transform: translateY(2px) !important;
  }

  .myg-diary-anteroom__item-actions{
    top: 16px !important;
    right: 16px !important;
    gap: 14px !important;
  }
}

/* ---------------------------------------------------------
   D/14 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 380px){

  .myg-diary-anteroom__item{
    min-height: 90px !important;
    padding: 14px 14px 12px 16px !important;
    padding-right: 102px !important;
    row-gap: 6px !important;
  }

  .myg-diary-anteroom__item-name{
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  .myg-diary-anteroom__item-details span,
  .myg-diary-anteroom__item-kcal{
    font-size: 13px !important;
  }

  .myg-diary-anteroom__item-actions{
    top: 14px !important;
    right: 14px !important;
    gap: 12px !important;
  }
}

/* =========================================================
   [BLOCK D VÉGE] NAPLÓ ELŐSZOBA – TÉTELKÁRTYÁK BELSŐ ELRENDEZÉSE V2
   ========================================================= */

/* =========================================================
   [BLOCK E ELEJE] NAPLÓ ELŐSZOBA – KILÉPÉS MEGERŐSÍTÉSE MODAL
   Cél:
   - csak a kilépés megerősítése kis ablakot styloljuk
   - felül narancssárga fejléc, benne fehér cím
   - jobb oldalon a biztonságos fő CTA: Maradok
   - bal oldalon a másodlagos kilépés: Kilépek
   - HTML módosítás nélkül
   ========================================================= */

/* ---------------------------------------------------------
   E/1 – Scope: csak a kilépés megerősítő modal
   FONTOS:
   - a :has() itt azért kell, hogy ne minden .myg-diary-modal__content
     kapja meg ezt a stílust
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]){
  width: min(92vw, 560px) !important; /* ITT állítod a modal szélességét. */
  max-width: min(92vw, 560px) !important;
  padding: 0 !important; /* Ezt hagyd így. A fejléc és body külön kap paddingot. */
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 24px !important; /* ITT állítod a teljes modal lekerekítését. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   E/2 – Fejléc
   A h3-ból narancssárga fejlécet csinálunk
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > h3{
  display: flex !important;
  align-items: center !important;

  min-height: 72px !important; /* ITT állítod a fejléc magasságát. */
  margin: 0 !important;
  padding: 0 24px !important; /* ITT állítod a fejléc oldalsó levegőjét. */

  background: #ff8a2b !important; /* ITT állítod a fejléc narancsát. */
  color: #ffffff !important; /* Ezt hagyd így. */
  border: 0 !important;

  font-size: 19px !important; /* ITT állítod a fejléc cím méretét. */
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   E/3 – Szövegtörzs
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > p{
  margin: 0 !important;
  padding: 22px 24px 20px 24px !important; /* ITT állítod a szövegblokk belső terét. */

  font-size: 17px !important; /* ITT állítod a szöveg méretét. */
  line-height: 1.45 !important; /* ITT állítod a sorközt. */
  font-weight: 500 !important;
  color: #66707c !important;
  text-align: left !important;
}

/* ---------------------------------------------------------
   E/4 – Alsó gombsor
   Két gomb egymás mellett, vizuális sorrend CSS-ből
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important; /* ITT állítod a két gomb közti távolságot. */

  margin: 0 !important;
  padding: 0 24px 24px 24px !important; /* ITT állítod a gombsor külső levegőjét. */
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   E/5 – Közös gombalap
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions > button{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important; /* ITT állítod a gombmagasságot. */
  padding: 0 16px !important;

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

  border-radius: 16px !important; /* ITT állítod a gombok lekerekítését. */
  border: 1px solid rgba(20,34,56,0.10) !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: 17px !important; /* ITT állítod a felirat méretét. */
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-align: center !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease,
    box-shadow 140ms ease !important;
}

/* ---------------------------------------------------------
   E/6 – Bal oldali másodlagos gomb: Kilépek
   CSS-ből bal oldalra tesszük
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-confirm-exit"]{
  order: 1 !important;
  background: #ffffff !important;
  color: #243244 !important;
  border-color: rgba(20,34,56,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;
}

/* ---------------------------------------------------------
   E/7 – Jobb oldali fő CTA: Maradok
   CSS-ből jobbra tesszük és narancssárgára húzzuk
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-cancel"]{
  order: 2 !important;
  background: #ff8a2b !important; /* ITT állítod a fő CTA narancsát. */
  color: #ffffff !important;
  border-color: #ff8a2b !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   E/8 – Hover
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-confirm-exit"]:hover{
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(20,34,56,0.13) !important;
}

.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-cancel"]:hover{
  background: #f58222 !important; /* ITT állítod a fő CTA hover narancsát. */
  border-color: #f58222 !important;
}

/* ---------------------------------------------------------
   E/9 – Active / lenyomás
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-confirm-exit"]:active,
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-cancel"]:active{
  transform: translateY(1px) scale(0.992) !important;
}

/* ---------------------------------------------------------
   E/10 – Focus
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-confirm-exit"]:focus,
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-confirm-exit"]:focus-visible,
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-cancel"]:focus,
.myg-diary-modal__content:has([data-action="modal-confirm-exit"]) [data-action="modal-cancel"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   E/11 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]){
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    border-radius: 22px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > h3{
    min-height: 66px !important;
    padding: 0 20px !important;
    font-size: 18px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > p{
    padding: 20px 20px 18px 20px !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions{
    gap: 12px !important;
    padding: 0 20px 20px 20px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions > button{
    min-height: 52px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   E/12 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]){
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > h3{
    min-height: 62px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) > p{
    padding: 18px 18px 16px 18px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions{
    gap: 10px !important;
    padding: 0 18px 18px 18px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm-exit"]) .myg-diary-modal__actions > button{
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   [BLOCK E VÉGE] NAPLÓ ELŐSZOBA – KILÉPÉS MEGERŐSÍTÉSE MODAL
   ========================================================= */


/* =========================================================
   [BLOCK F ELEJE] NAPLÓ ELŐSZOBA – MENNYISÉG MÓDOSÍTÁSA MODAL V2
   Cél:
   - a "Mennyiség módosítása" modal középső része legyen kompakt, tiszta, középre rendezett
   - input + egység + kcal egy vizuális egységet alkosson
   - az input csak finoman jelezze, hogy szerkeszthető
   - ne legyen túl nagy, túl vastag, túl harsány
   - a CTA gombsor maradjon változatlan
   ========================================================= */

/* ---------------------------------------------------------
   F/1 – Scope: csak az edit-qty modal
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]){
  width: min(92vw, 560px) !important; /* ITT állítod a modal szélességét. */
  max-width: min(92vw, 560px) !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   F/2 – Cím
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) > h3{
  margin: 0 !important;
  padding: 22px 24px 10px 24px !important; /* ITT állítod a cím körüli belső teret. */

  font-size: 19px !important; /* ITT állítod a címméretet. */
  line-height: 1.1 !important;
  font-weight: 600 !important; /* FONTOS: nincs 700/800. */
  letter-spacing: -0.02em !important;
  color: #2f353d !important;
  text-align: left !important;
}

/* ---------------------------------------------------------
   F/3 – Terméknév
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-name{
  margin: 0 !important;
  padding: 0 24px 14px 24px !important; /* ITT állítod a terméknév blokk belső terét. */

  font-size: 16px !important; /* ITT állítod a terméknév méretét. */
  line-height: 1.28 !important;
  font-weight: 500 !important; /* FONTOS: nincs 700. */
  color: #68717c !important;
  text-align: left !important;
}

/* ---------------------------------------------------------
   F/4 – Középső mezősor
   ÚJ IRÁNY:
   - minden középre rendezve
   - input + egység + kcal folyatatólagosan
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Ezt hagyd így. Középre húzza az egész egységet. */
  gap: 10px !important; /* ITT állítod az input / egység / kcal közti távolságot. */

  margin: 0 !important;
  padding: 0 24px 20px 24px !important; /* ITT állítod a középső sor külső levegőjét. */
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
}

/* ---------------------------------------------------------
   F/5 – Input
   Szolid, kis szerkeszthető mező
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 86px !important; /* ITT állítod az input szélességét. */
  min-width: 86px !important;
  max-width: 86px !important;

  height: 40px !important; /* ITT állítod az input magasságát. Ez már jóval laposabb. */
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;

  border-radius: 12px !important; /* ITT állítod a lekerekítést. */
  border: 1px solid rgba(242,140,40,0.85) !important; /* ITT állítod a finom narancs keretet. */
  background: #ffffff !important;
  box-shadow: none !important;

  text-align: center !important;
  font-size: 17px !important; /* ITT állítod a szám méretét. */
  line-height: 1 !important;
  font-weight: 500 !important; /* FONTOS: nincs 700. */
  color: #4f5d6c !important; /* Sötét, szolid szín. */
}

/* ---------------------------------------------------------
   F/6 – Egység
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-unit{
  display: inline-flex !important;
  align-items: center !important;

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

  font-size: 16px !important; /* ITT állítod az egység méretét. */
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: #6d747d !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   F/7 – Kcal
   Középső sor része marad, nem toljuk ki jobbra
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-preview{
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 0 0 8px !important; /* ITT állítod, mennyi kis levegő legyen az egység és a kcal között. */
  padding: 0 !important;

  font-size: 16px !important; /* ITT állítod a kcal méretét. */
  line-height: 1.1 !important;
  font-weight: 500 !important; /* FONTOS: nincs 700. */
  color: #f28c28 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* ---------------------------------------------------------
   F/8 – Focus
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.95) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* ---------------------------------------------------------
   F/9 – Inline style-ok felülírása
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field[style]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input[style]{
  width: 86px !important;
  padding: 0 10px !important;
  text-align: center !important;
  border-radius: 12px !important;
  font-size: 17px !important;
}

.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-unit[style],
.myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-preview[style]{
  margin: 0 !important;
}

/* ---------------------------------------------------------
   F/10 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]){
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) > h3{
    padding: 20px 20px 10px 20px !important;
    font-size: 18px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-name{
    padding: 0 20px 14px 20px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field{
    gap: 8px !important; /* ITT állítod mobilon a középső sor távolságait. */
    padding: 0 20px 18px 20px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input{
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    font-size: 16px !important;
    border-radius: 11px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-unit{
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-preview{
    margin-left: 6px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field[style]{
    gap: 8px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input[style]{
    width: 78px !important;
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   F/11 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]){
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) > h3{
    padding: 18px 18px 10px 18px !important;
    font-size: 17px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-name{
    padding: 0 18px 12px 18px !important;
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field{
    gap: 7px !important;
    padding: 0 18px 16px 18px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input{
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

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

    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-unit{
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-preview{
    margin-left: 4px !important;
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__field[style]{
    gap: 7px !important;
  }

  .myg-diary-modal__content:has([data-action="edit-qty-confirm"]) .myg-diary-modal__edit-qty-input[style]{
    width: 72px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   [BLOCK F VÉGE] NAPLÓ ELŐSZOBA – MENNYISÉG MÓDOSÍTÁSA MODAL V2
   ========================================================= */

/* =========================================================
   [BLOCK G ELEJE] NAPLÓ ELŐSZOBA – ALSÓ STICKY CTA ZÓNA V2
   Cél:
   - az előszoba alja vizuálisan illeszkedjen a 4 füles kereső sticky alsó sávjához
   - ne legyen "odahúzott vonal" érzet
   - a két gomb egy közös, tiszta alsó zónában üljön
   - bal: HOZZÁAD (narancs keretes)
   - jobb: KÉSZ VAGYOK (narancssárga fő CTA)
   - HTML módosítás nélkül
   ========================================================= */

/* ---------------------------------------------------------
   G/1 – Az alsó sticky wrapper
   Ugyanabba a családba húzzuk, mint a 4 füles kereső alsó sávját
   --------------------------------------------------------- */
.myg-diary-anteroom__bottom{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;

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

  background: rgba(255,255,255,0.96) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;

  border-top: 1px solid rgba(20,34,56,0.06) !important;
  box-shadow: 0 -2px 8px rgba(20,34,56,0.025) !important;
}

/* ---------------------------------------------------------
   G/2 – A footer belső zónája
   Ez adja a rendes "dobozolt" alsó sáv érzetét
   --------------------------------------------------------- */
.myg-diary-anteroom__footer{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important; /* ITT állítod a két gomb közti távolságot. */

  padding: 12px 16px 14px 16px !important; /* ITT állítod a teljes alsó zóna belső terét. */
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   G/3 – Közös gombalap
   A 4 füles sticky gombjainak ritmusát követi
   --------------------------------------------------------- */
.myg-diary-anteroom__footer > .myg-diary-btn{
  appearance: none !important;
  -webkit-appearance: none !important;

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

  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important; /* ITT állítod a gombmagasságot. */
  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 10px !important; /* ITT állítod a sarkok lekerekítését. */
  border: 1px solid rgba(20,34,56,0.08) !important;

  font-size: 0 !important; /* Eredeti szöveg elrejtése. */
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* ---------------------------------------------------------
   G/4 – Új feliratok CSS-ből
   HTML-t nem piszkáljuk
   --------------------------------------------------------- */
.myg-diary-anteroom__footer > .myg-diary-btn::before{
  display: block !important;
  font-size: 15px !important; /* ITT állítod a felirat méretét. */
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.myg-diary-anteroom__footer [data-action="add-more"]::before{
  content: "HOZZÁAD" !important;
}

.myg-diary-anteroom__footer [data-action="done"]::before{
  content: "KÉSZ VAGYOK" !important;
}

/* ---------------------------------------------------------
   G/5 – Bal oldali CTA: HOZZÁAD
   Nem mégse/logika, hanem aktív másodlagos gomb
   --------------------------------------------------------- */
.myg-diary-anteroom__footer [data-action="add-more"]{
  order: 1 !important;
  background: #ffffff !important;
  color: transparent !important;
  border: 1px solid rgba(242,140,40,0.82) !important; /* ITT állítod a narancs keretet. */
  box-shadow: none !important;
}

.myg-diary-anteroom__footer [data-action="add-more"]::before{
  color: #f28c28 !important;
}

/* ---------------------------------------------------------
   G/6 – Jobb oldali fő CTA: KÉSZ VAGYOK
   --------------------------------------------------------- */
.myg-diary-anteroom__footer [data-action="done"]{
  order: 2 !important;
  background: #ff8a2d !important; /* ITT állítod a fő CTA narancsát. */
  color: transparent !important;
  border: 1px solid rgba(242,140,40,0.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 8px 14px rgba(242,140,40,0.12) !important;
}

.myg-diary-anteroom__footer [data-action="done"]::before{
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   G/7 – Hover
   --------------------------------------------------------- */
.myg-diary-anteroom__footer [data-action="add-more"]:hover{
  background: rgba(255,248,241,0.82) !important;
  border-color: #f28c28 !important;
}

.myg-diary-anteroom__footer [data-action="done"]:hover{
  background: #f58222 !important;
}

/* ---------------------------------------------------------
   G/8 – Active
   --------------------------------------------------------- */
.myg-diary-anteroom__footer [data-action="add-more"]:active,
.myg-diary-anteroom__footer [data-action="done"]:active{
  transform: translateY(1px) scale(0.992) !important;
}

/* ---------------------------------------------------------
   G/9 – Focus
   --------------------------------------------------------- */
.myg-diary-anteroom__footer [data-action="add-more"]:focus,
.myg-diary-anteroom__footer [data-action="add-more"]:focus-visible,
.myg-diary-anteroom__footer [data-action="done"]:focus,
.myg-diary-anteroom__footer [data-action="done"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   G/10 – Mobil
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-anteroom__footer{
    gap: 8px !important;
    padding: 10px 14px 14px 14px !important;
  }

  .myg-diary-anteroom__footer > .myg-diary-btn{
    min-height: 46px !important; /* ITT állítod mobilon a gombmagasságot. */
    border-radius: 10px !important; /* ITT állítod mobilon a lekerekítést. */
  }

  .myg-diary-anteroom__footer > .myg-diary-btn::before{
    font-size: 14px !important; /* ITT állítod mobilon a felirat méretét. */
  }
}

/* ---------------------------------------------------------
   G/11 – Extra szűk mobil
   CSAK itt törhet egymás alá
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-anteroom__footer{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px 12px 12px !important;
  }

  .myg-diary-anteroom__footer > .myg-diary-btn{
    min-height: 44px !important;
    border-radius: 9px !important;
  }

  .myg-diary-anteroom__footer > .myg-diary-btn::before{
    font-size: 13px !important;
  }
}

/* =========================================================
   [BLOCK G VÉGE] NAPLÓ ELŐSZOBA – ALSÓ STICKY CTA ZÓNA V2
   ========================================================= */

/* =========================================================
   [BLOCK H ELEJE] NAPLÓ – ÉTKEZÉS TÖRLÉSE MEGERŐSÍTŐ MODAL
   Cél:
   - a "Törlés megerősítése" modal ugyanabba a vizuális családba kerüljön,
     mint a kilépés megerősítése ablak
   - narancssárga fejléc + fehér cím
   - bal oldalon: Mégsem
   - jobb oldalon: Törlés
   ========================================================= */

/* ---------------------------------------------------------
   H/1 – Scope: csak a sima törlés megerősítő modal
   FONTOS:
   - csak a [data-action="modal-confirm"]-os ablakot célozzuk
   - az exit modalhoz nem nyúlunk hozzá
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])){
  width: min(92vw, 560px) !important; /* ITT állítod a modal szélességét. */
  max-width: min(92vw, 560px) !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  border-radius: 24px !important; /* ITT állítod a teljes modal lekerekítését. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 16px 42px rgba(20,34,56,0.12) !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   H/2 – Fejléc
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > h3{
  display: flex !important;
  align-items: center !important;

  min-height: 72px !important; /* ITT állítod a fejléc magasságát. */
  margin: 0 !important;
  padding: 0 24px !important; /* ITT állítod a fejléc oldalsó levegőjét. */

  background: #ff8a2b !important; /* ITT állítod a fejléc narancsát. */
  color: #ffffff !important;
  border: 0 !important;

  font-size: 19px !important; /* ITT állítod a címméretet. */
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   H/3 – Szövegtörzs
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > p{
  margin: 0 !important;
  padding: 22px 24px 20px 24px !important; /* ITT állítod a szövegblokk belső terét. */

  font-size: 17px !important; /* ITT állítod a szöveg méretét. */
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #66707c !important;
  text-align: left !important;
}

/* ---------------------------------------------------------
   H/4 – Alsó gombsor
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important; /* ITT állítod a két gomb közti távolságot. */

  margin: 0 !important;
  padding: 0 24px 24px 24px !important; /* ITT állítod a gombsor külső levegőjét. */
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   H/5 – Közös gombalap
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions > button{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important; /* ITT állítod a gombmagasságot. */
  padding: 0 16px !important;

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

  border-radius: 16px !important; /* ITT állítod a gombok lekerekítését. */
  border: 1px solid rgba(20,34,56,0.10) !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: 17px !important; /* ITT állítod a felirat méretét. */
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-align: center !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease,
    box-shadow 140ms ease !important;
}

/* ---------------------------------------------------------
   H/6 – Bal oldali gomb: Mégsem
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-cancel"]{
  order: 1 !important;
  background: #ffffff !important;
  color: #243244 !important;
  border-color: rgba(20,34,56,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important;
}

/* ---------------------------------------------------------
   H/7 – Jobb oldali gomb: Törlés
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-confirm"]{
  order: 2 !important;
  background: #ff8a2b !important; /* ITT állítod a fő CTA narancsát. */
  color: #ffffff !important;
  border-color: #ff8a2b !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   H/8 – Hover
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-cancel"]:hover{
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(20,34,56,0.13) !important;
}

.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-confirm"]:hover{
  background: #f58222 !important;
  border-color: #f58222 !important;
}

/* ---------------------------------------------------------
   H/9 – Active
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-cancel"]:active,
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-confirm"]:active{
  transform: translateY(1px) scale(0.992) !important;
}

/* ---------------------------------------------------------
   H/10 – Focus
   --------------------------------------------------------- */
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-cancel"]:focus,
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-cancel"]:focus-visible,
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-confirm"]:focus,
.myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) [data-action="modal-confirm"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   H/11 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])){
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    border-radius: 22px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > h3{
    min-height: 66px !important;
    padding: 0 20px !important;
    font-size: 18px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > p{
    padding: 20px 20px 18px 20px !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions{
    gap: 12px !important;
    padding: 0 20px 20px 20px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions > button{
    min-height: 52px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   H/12 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])){
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > h3{
    min-height: 62px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) > p{
    padding: 18px 18px 16px 18px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions{
    gap: 10px !important;
    padding: 0 18px 18px 18px !important;
  }

  .myg-diary-modal__content:has([data-action="modal-confirm"]):not(:has([data-action="modal-confirm-exit"])) .myg-diary-modal__actions > button{
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   [BLOCK H VÉGE] NAPLÓ – ÉTKEZÉS TÖRLÉSE MEGERŐSÍTŐ MODAL
   ========================================================= */

/* =========================================================
   [BLOCK I ELEJE] NAPLÓ ELŐSZOBA – ÉTKEZÉS MÁSOLÁSA / 2. LÉPÉS V2
   Cél:
   - a "Cél nap kiválasztása" valóban külön, önálló stepként viselkedjen
   - az 1. lépés ne látszódjon alatta / fölötte
   - a Tegnap / Ma / Holnap finom fehér + narancs keretes gomb legyen
   - az Elfogyasztott / Tervezett kapcsoló pontosan felezett legyen
   - elfogyasztottnál középre rendezett időpont sor
   - tervezettnél ikon + "Tervezett étkezés" sor a gombok FÖLÖTT jelenjen meg
   ========================================================= */

/* ---------------------------------------------------------
   I/1 – AKTÍV 2. LÉPÉS DETEKTÁLÁSA
   FONTOS:
   - csak akkor dolgozunk, ha a step 2 tényleg aktív
   - a step 1-et ilyenkor erőből elrejtjük
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="1"]{
  display: none !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important; /* ITT állítod a belső blokkok közti távolságot. */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------
   I/2 – Elemek sorrendje a 2. lépésen belül
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] > h3{
  order: 1 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #243244 !important;
  text-align: left !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts{
  order: 2 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date{
  order: 3 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-status{
  order: 4 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time{
  order: 5 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]::after{
  order: 6 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions{
  order: 7 !important;
}

/* ---------------------------------------------------------
   I/3 – Tegnap / Ma / Holnap
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(242,140,40,0.42) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #5f6b78 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn:hover{
  background: #fff9f2 !important;
  border-color: rgba(242,140,40,0.58) !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn:active{
  transform: translateY(1px) scale(0.992) !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn:focus,
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   I/4 – Dátum mező
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: calc(100% - 48px) !important;
  height: 48px !important;
  margin: 0 24px !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  border: 1px solid rgba(20,34,56,0.14) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #5f6b78 !important;
  text-align: left !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date:focus{
  outline: none !important;
  border-color: rgba(242,140,40,0.58) !important;
  box-shadow: 0 0 0 2px rgba(242,140,40,0.10) !important;
}

/* ---------------------------------------------------------
   I/5 – Elfogyasztott / Tervezett kapcsoló
   PONTOS FELEZÉS
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-status{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 52px !important;
  margin: 0 24px !important;
  padding: 3px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(20,34,56,0.12) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 120ms ease !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn:not(.myg-diary-modal__copy-toggle-btn--active){
  background: #ffffff !important;
  color: #7b8794 !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn--active{
  background: #ff8a2b !important;
  color: #ffffff !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn:active{
  transform: translateY(1px) !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn:focus,
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   I/6 – Időpont sor (elfogyasztott)
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/ora-2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > span img,
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > span svg{
  display: none !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > label{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #8e99a6 !important;
  white-space: nowrap !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time-input{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 14px !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: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #5f6b78 !important;
  text-align: center !important;
}

/* ---------------------------------------------------------
   I/7 – Tervezett információs sor
   FONTOS:
   - a gombok FÖLÖTT jelenjen meg
   - kis levegő az ikon és a szöveg között
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]::after{
  content: "";
  display: none !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]:has(.myg-diary-modal__copy-toggle-btn[data-copy-status="planned"].myg-diary-modal__copy-toggle-btn--active)::after{
  content: "Tervezett étkezés" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #8e99a6 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  background-image: url("https://mygasztro.hu/wp-content/uploads/tervezett.png") !important;
  background-repeat: no-repeat !important;
  background-position: calc(50% - 88px) center !important; /* ITT állítod az ikon helyét. */
  background-size: 20px 20px !important;
}

/* ---------------------------------------------------------
   I/8 – Állapotfüggő megjelenítés
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]:has(.myg-diary-modal__copy-toggle-btn[data-copy-status="consumed"].myg-diary-modal__copy-toggle-btn--active) .myg-diary-modal__copy-time{
  display: flex !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]:has(.myg-diary-modal__copy-toggle-btn[data-copy-status="planned"].myg-diary-modal__copy-toggle-btn--active) .myg-diary-modal__copy-time{
  display: none !important;
}

/* ---------------------------------------------------------
   I/9 – CSAK A 2. LÉPÉS ALSÓ GOMBSORA
   FONTOS:
   - ezzel megszűnik, hogy az 1. lépés gombsora is beleszóljon
   --------------------------------------------------------- */
.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 24px 24px 24px !important;
  box-sizing: border-box !important;
}

.myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions > button{
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}

/* ---------------------------------------------------------
   I/10 – Mobil finomhangolás
   --------------------------------------------------------- */
@media (max-width: 520px){
  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]{
    gap: 12px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] > h3{
    padding: 0 20px !important;
    font-size: 17px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts{
    gap: 10px !important;
    padding: 0 20px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn{
    min-height: 44px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date{
    width: calc(100% - 40px) !important;
    height: 46px !important;
    margin: 0 20px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    border-radius: 13px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-status{
    min-height: 50px !important;
    margin: 0 20px !important;
    border-radius: 17px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn{
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 0 8px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time{
    gap: 10px !important;
    padding: 0 20px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > label{
    font-size: 15px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time-input{
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 15px !important;
    border-radius: 13px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]:has(.myg-diary-modal__copy-toggle-btn[data-copy-status="planned"].myg-diary-modal__copy-toggle-btn--active)::after{
    min-height: 34px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    background-position: calc(50% - 80px) center !important;
    background-size: 18px 18px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions{
    gap: 12px !important;
    padding: 0 20px 20px 20px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions > button{
    min-height: 50px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
  }
}

/* ---------------------------------------------------------
   I/11 – Extra szűk mobil
   --------------------------------------------------------- */
@media (max-width: 360px){
  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts{
    gap: 8px !important;
    padding: 0 18px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date-shortcuts .myg-diary-btn{
    min-height: 42px !important;
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-date{
    width: calc(100% - 36px) !important;
    height: 44px !important;
    margin: 0 18px !important;
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-status{
    min-height: 48px !important;
    margin: 0 18px !important;
    border-radius: 16px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-toggle-btn{
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 0 6px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time{
    gap: 8px !important;
    padding: 0 18px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time > label{
    font-size: 14px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-time-input{
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"]:has(.myg-diary-modal__copy-toggle-btn[data-copy-status="planned"].myg-diary-modal__copy-toggle-btn--active)::after{
    padding: 0 18px !important;
    font-size: 14px !important;
    background-position: calc(50% - 74px) center !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions{
    gap: 10px !important;
    padding: 0 18px 18px 18px !important;
  }

  .myg-diary-modal__content:has(.myg-diary-modal__copy-step[data-step="2"]:not([style*="display: none"])) .myg-diary-modal__copy-step[data-step="2"] .myg-diary-modal__actions > button{
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   [BLOCK I VÉGE] NAPLÓ ELŐSZOBA – ÉTKEZÉS MÁSOLÁSA / 2. LÉPÉS V2
   ========================================================= */