/* =============================
   [BLOCK A] DAILY – ROW 1 (DÁTUM NAV + IKONOK + TIPOGRÁFIA)
   CSEREHATÁR: a blokk elejétől a következő [BLOCK B]-ig
   ============================= */

/* =========================================================
   myGasztro – NAPLÓ (DAILY) – CUSTOM CSS
   Scope: csak #myg-diary-app alatt
   BLOCK A: felső sor (naptár + bal/jobb + dátum + MA)
   Cél: dátum kisebb + nyilak közelebb a dátumhoz (VALÓBAN)
   ========================================================= */

:root{
  /* --- GOMB "KOCKA" MÉRET --- */
  --myg-daily-btn: 50px;

  /* --- HÉZAGOK --- */
  --myg-daily-gap: 10px;

  /* --- DÁTUM MÉRET (EZT TEKERD) --- */
  --myg-daily-date-size: 20px;      /* <<< Szeptember 30. mérete (desktop/alap) */
  --myg-daily-day-size: 14px;       /* <<< “kedd” mérete */

  /* --- NYILAK “BEHÚZÁSA” A DÁTUMHOZ (EZT TEKERD) --- */
  --myg-daily-arrow-pull: 26px;     /* <<< minél nagyobb, annál közelebb jön (pl. 14–26) */
}

/* Mobil: kisebb minden */
@media (max-width: 480px){
  :root{
    --myg-daily-btn: 48px;
    --myg-daily-gap: 8px;

    --myg-daily-date-size: 16px;
    --myg-daily-day-size: 12px;

    --myg-daily-arrow-pull: 14px;
  }
}

/* =========================================================
   ROW 1 – DÁTUM NAV: marad a plugin elrendezés, de mi “középre húzzuk” a nyilakat
   Trükk:
   - a dátum középre kerül (flex:1 + text-align:center)
   - a nyilakat finoman befelé toljuk transformmal (biztos működés)
   ========================================================= */

#myg-diary-app .myg-diary-daily__date-nav{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* a szélek maradnak szélen */
  gap: var(--myg-daily-gap) !important;
  position: relative !important;
}

/* Középen a dátum kapjon helyet */
#myg-diary-app .myg-diary-daily__date-center{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* =========================================================
   EGYSÉGES GOMB ALAP (ikonos, doboz nélkül)
   ========================================================= */
#myg-diary-app .myg-diary-daily__calendar-btn,
#myg-diary-app .myg-diary-daily__date-nav-btn,
#myg-diary-app .myg-diary-daily__today-btn{
  width: var(--myg-daily-btn) !important;
  height: var(--myg-daily-btn) !important;
  min-width: var(--myg-daily-btn) !important;
  min-height: var(--myg-daily-btn) !important;

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

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

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

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 76% 76% !important;

  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* plugin pseudo réteg OFF */
#myg-diary-app .myg-diary-daily__calendar-btn::before,
#myg-diary-app .myg-diary-daily__calendar-btn::after,
#myg-diary-app .myg-diary-daily__date-nav-btn::before,
#myg-diary-app .myg-diary-daily__date-nav-btn::after,
#myg-diary-app .myg-diary-daily__today-btn::before,
#myg-diary-app .myg-diary-daily__today-btn::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   IKONOK (PNG)
   ========================================================= */
#myg-diary-app .myg-diary-daily__calendar-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/naptar.png") !important;
}
#myg-diary-app .myg-diary-daily__icon-calendar,
#myg-diary-app .myg-diary-daily__icon-calendar img.emoji{
  display: none !important;
}

/* Prev/Next gombok PNG + belső ikon OFF */
#myg-diary-app .myg-diary-daily__date-nav button:nth-of-type(2).myg-diary-daily__date-nav-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/balra.png") !important;
}
#myg-diary-app .myg-diary-daily__date-nav button:nth-of-type(3).myg-diary-daily__date-nav-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/jobbra.png") !important;
}
#myg-diary-app .myg-diary-daily__date-nav-btn img.emoji,
#myg-diary-app .myg-diary-daily__date-nav-btn svg{
  display: none !important;
}

/* >>> EZ A LÉNYEG: a nyilakat befelé húzzuk a dátum irányába */
#myg-diary-app .myg-diary-daily__date-nav button:nth-of-type(2).myg-diary-daily__date-nav-btn{
  transform: translateX(var(--myg-daily-arrow-pull)) !important;
}
#myg-diary-app .myg-diary-daily__date-nav button:nth-of-type(3).myg-diary-daily__date-nav-btn{
  transform: translateX(calc(var(--myg-daily-arrow-pull) * -1)) !important;
}

/* MA gomb */
#myg-diary-app .myg-diary-daily__today-btn{
  background-image: url("https://mygasztro.hu/wp-content/uploads/ma.png") !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
#myg-diary-app .myg-diary-daily__today-btn span{
  display: none !important;
}

/* =========================================================
   DÁTUM TIPOGRÁFIA – kisebb “Szeptember 30.”
   ========================================================= */
#myg-diary-app .myg-diary-daily__date-main{
  font-weight: 600 !important;
  font-size: var(--myg-daily-date-size) !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#myg-diary-app .myg-diary-daily__date-day{
  font-weight: 600 !important;
  font-size: var(--myg-daily-day-size) !important;
  opacity: .70 !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
}

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


/* =============================
   [BLOCK B] DAILY – ROW 2 (KPI SOR: MOOD KÖR + TESTSÚLY + KALÓRIACÉL + BÖJT)
   CSEREHATÁR: a blokk elejétől a következő [BLOCK C]-ig
   ============================= */

/* =========================================================
   ROW 2 – KPI SOR (feszesített v7)
   Célok:
   - teljes sor alacsonyabb / kevésbé “durva”
   - címke–érték közelebb egymáshoz
   - körök és kártyák magasságban szinkronban
   - kicsit feljebb a felső sorhoz
   ========================================================= */


/* =========================
   0) ÁLLÍTHATÓ VÁLTOZÓK – EZT TEKERD (konyhanyelven)
   ========================= */
:root{
  /* fő narancs */
  --myg-kpi-accent: #ff8a00;

  /* sor feljebb/lejjebb (kisebb = feljebb) */
  --myg-kpi-top: 6px;                 /* <<< eddig ~10 volt, most feljebb húztam */

  /* teljes sor oldalsó “tapadás” */
  --myg-kpi-row-pad-x: 2px;

  /* középső 2 kártya közti távolság */
  --myg-kpi-center-gap: 10px;

  /* >>> KÖZÖS SOR-MAGASSÁG (EZ A FŐ CSAVAR) */
  --myg-kpi-row-h: 44px;              /* <<< ettől lesz alacsonyabb minden (próbálj 44–50 között) */

  /* kör keret */
  --myg-kpi-circle-border: 2px;
  --myg-kpi-circle-bg: #ffffff;

  /* kártya stílus */
  --myg-kpi-box-radius: 14px;
  --myg-kpi-box-border: 1px;
  --myg-kpi-box-border-color: rgba(0,0,0,.10);
  --myg-kpi-box-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* kártya belső padding (ez is magasságot ad) */
  --myg-kpi-box-pad-x: 10px;
  --myg-kpi-box-pad-y: 4px;           /* <<< kisebb = alacsonyabb kártya */

  /* címke + érték tipó (szelídítjük) */
  --myg-kpi-label-size: 12px;         /* <<< Testsúly / Kalóriacél */
  --myg-kpi-label-weight: 600;
  --myg-kpi-label-color: rgba(0,0,0,.55);

  --myg-kpi-value-size: 18px;         /* <<< 59,90 / 1200 */
  --myg-kpi-value-weight: 700;
  --myg-kpi-value-color: rgba(0,0,0,.78);

  /* címke–érték közti rés (EZT KERESD, ha “pufók”) */
  --myg-kpi-label-gap: 1px;           /* <<< eddig 3–4 körül volt, most összenyomtam */

  /* kg / kcal */
  --myg-kpi-unit-size: 12px;
  --myg-kpi-unit-weight: 600;
  --myg-kpi-unit-color: rgba(0,0,0,.55);
  --myg-kpi-unit-gap: 2px;

  /* böjt idő a körben */
  --myg-kpi-fasting-size: 13px;
  --myg-kpi-fasting-weight: 800;

  /* smiley méret a körben */
  --myg-kpi-mood-size: 32px;
}

/* Mobil: kicsit még feszesebb */
@media (max-width: 480px){
  :root{
    --myg-kpi-top: 6px;
    --myg-kpi-row-h: 44px;          /* ha kell: 44 */
    --myg-kpi-box-pad-y: 4px;

    --myg-kpi-label-size: 12px;
    --myg-kpi-value-size: 18px;
    --myg-kpi-unit-size: 12px;

    --myg-kpi-fasting-size: 13px;
    --myg-kpi-mood-size: 32px;
  }
}


/* =========================
   1) KPI SOR – konténer
   ========================= */
#myg-diary-app .myg-diary-daily__meta-row{
  margin: var(--myg-kpi-top) auto 0 auto !important;
  padding: 0 var(--myg-kpi-row-pad-x) !important;

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

  column-gap: var(--myg-kpi-center-gap) !important;
}


/* =========================
   2) FIX SORREND
   ========================= */
#myg-diary-app .myg-diary-daily__mood-select{ order: 0 !important; }
#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"]{  order: 1 !important; }
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]{    order: 2 !important; }
#myg-diary-app .myg-diary-daily__meta-item[data-field="fasting"]{ order: 3 !important; }


/* =========================
   3) BAL KÖR – HANGULAT (a sor-magassághoz igazítva)
   ========================= */
#myg-diary-app .myg-diary-daily__mood-select{
  flex: 0 0 var(--myg-kpi-row-h) !important;
  width: var(--myg-kpi-row-h) !important;
  height: var(--myg-kpi-row-h) !important;

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

  border: var(--myg-kpi-circle-border) solid var(--myg-kpi-accent) !important;
  border-radius: 999px !important;
  background: var(--myg-kpi-circle-bg) !important;

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

#myg-diary-app .myg-diary-daily__mood-select::before,
#myg-diary-app .myg-diary-daily__mood-select::after{
  content: none !important;
}

#myg-diary-app .myg-diary-daily__mood-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer !important;

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

#myg-diary-app .myg-diary-daily__mood-select img.emoji{
  width: var(--myg-kpi-mood-size) !important;
  height: var(--myg-kpi-mood-size) !important;
  display: block !important;
}


/* =========================
   4) JOBB KÖR – BÖJT / IDŐ (a sor-magassághoz igazítva)
   ========================= */
#myg-diary-app .myg-diary-daily__meta-item[data-field="fasting"]{
  flex: 0 0 var(--myg-kpi-row-h) !important;
  width: var(--myg-kpi-row-h) !important;
  height: var(--myg-kpi-row-h) !important;

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

  border: var(--myg-kpi-circle-border) solid var(--myg-kpi-accent) !important;
  border-radius: 999px !important;
  background: var(--myg-kpi-circle-bg) !important;

  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#myg-diary-app .myg-diary-daily__meta-item[data-field="fasting"]::before{
  content: none !important;
}

#myg-diary-app .myg-diary-daily__icon-fasting{
  display: none !important;
}

#myg-diary-app .myg-diary-daily__fasting-display{
  font-size: var(--myg-kpi-fasting-size) !important;
  font-weight: var(--myg-kpi-fasting-weight) !important;
  color: var(--myg-kpi-accent) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}


/* =========================
   5) KÖZÉPSŐ 2 KÁRTYA – TESTSÚLY + KALÓRIACÉL
   - alacsonyabb (min-height = sor-magasság)
   - címke–érték rés minimális
   ========================= */
#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"],
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  min-height: var(--myg-kpi-row-h) !important;
  height: var(--myg-kpi-row-h) !important;

  /* TISZTA, NEUTRÁLIS SOFT CARD – narancs akcentus nélkül */
  background: rgba(252,252,251,0.92) !important; /* <<< leheletnyivel elválik a háttértől */
  border: 1px solid rgba(20,34,56,0.05) !important; /* <<< halvány, de már érzékelhetőbb kontúr */
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 4px 10px rgba(20,34,56,0.025) !important; /* <<< nagyon finom card érzet */

  padding: var(--myg-kpi-box-pad-y) var(--myg-kpi-box-pad-x) !important;
  box-sizing: border-box !important;

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

  text-align: center !important;
  cursor: pointer !important;

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

  -webkit-tap-highlight-color: transparent !important;
}

#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"]:hover,
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]: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-app .myg-diary-daily__meta-item[data-field="weight"]:active,
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]: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;
}
/* címkék (Testsúly / Kalóriacél) */
#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"]::before,
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]::before{
  display: block !important;
  font-size: var(--myg-kpi-label-size) !important;
  font-weight: var(--myg-kpi-label-weight) !important;
  color: var(--myg-kpi-label-color) !important;
  line-height: 1.05 !important;
  margin-bottom: var(--myg-kpi-label-gap) !important; /* <<< CÍMKE–ÉRTÉK TÁV */
}

#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"]::before{ content: "Testsúly:" !important; }
#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"]::before{   content: "Kalóriacél:" !important; }

/* ikonok OFF */
#myg-diary-app .myg-diary-daily__icon-weight,
#myg-diary-app .myg-diary-daily__icon-goal{
  display: none !important;
}

/* értékek */
#myg-diary-app .myg-diary-daily__weight-display,
#myg-diary-app .myg-diary-daily__goal-display{
  font-size: var(--myg-kpi-value-size) !important;
  font-weight: var(--myg-kpi-value-weight) !important;
  color: var(--myg-kpi-value-color) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

/* meta-unit span OFF (ha van) */
#myg-diary-app .myg-diary-daily__meta-unit{
  display: none !important;
}

/* kg/kcal kisebben, közelebb */
#myg-diary-app .myg-diary-daily__meta-item[data-field="weight"] .myg-diary-daily__weight-display::after{
  content: " kg";
  font-size: var(--myg-kpi-unit-size);
  font-weight: var(--myg-kpi-unit-weight);
  color: var(--myg-kpi-unit-color);
  margin-left: var(--myg-kpi-unit-gap);
}

#myg-diary-app .myg-diary-daily__meta-item[data-field="goal"] .myg-diary-daily__goal-display::after{
  content: " kcal";
  font-size: var(--myg-kpi-unit-size);
  font-weight: var(--myg-kpi-unit-weight);
  color: var(--myg-kpi-unit-color);
  margin-left: var(--myg-kpi-unit-gap);
}

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


/* =============================
   [BLOCK C] DAILY – MOOD PANEL (EMOJI GRID POPUP / DROPDOWN)
   CSEREHATÁR: a blokk elejétől a fájl végéig
   ============================= */

/* =========================================================
   MOOD PANEL – FIX v4 (EGY DARAB PANEL + ÖSSZEÉRŐ RÁCS)
   - Desktop: jobbra nyíló panel
   - Mobil: szintén a smiley mellett (jobbra), ha nem fér -> balra
   - Panel takarja a hátteret (nem üt át semmi)
   - Nincs “dupla kártya”: egy panel, benne cellák rácsvonallal
   - Nem kényszerítjük nyitva: display:none marad zárva
   ========================================================= */

#myg-diary-app .myg-diary-daily__mood-select{
  position: relative;
}

/* ZÁRT állapot: hagyjuk zárva */
#myg-diary-app .myg-diary-daily__mood-grid[style*="display: none"]{
  display: none !important;
}

/* PANEL + GRID (alap: smiley mellett jobbra) */
#myg-diary-app .myg-diary-daily__mood-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* összeérő cellák */

  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 9999;

  /* EGY darab panel */
  width: 260px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);

  overflow: hidden; /* hogy a belső rács ne lógjon ki */
}

/* Cellák: nincs külön kártya, csak rács */
#myg-diary-app .myg-diary-daily__mood-option{
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;

  /* tap target */
  min-width: 56px;
  min-height: 56px;

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

  cursor: pointer;
}

/* belső rácsvonalak: minden cella kap “jobb+alsó” vonalat */
#myg-diary-app .myg-diary-daily__mood-option{
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* utolsó oszlop: ne legyen jobb oldali vonal */
#myg-diary-app .myg-diary-daily__mood-option:nth-child(4n){
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* utolsó sor (9-12): ne legyen alsó vonal */
#myg-diary-app .myg-diary-daily__mood-option:nth-last-child(-n+4){
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.08);
}

/* utolsó sor + utolsó oszlop metszet: se jobb, se alsó */
#myg-diary-app .myg-diary-daily__mood-option:nth-child(12){
  box-shadow: none;
}

/* hover/active: finom háttér a cellán (nem külön kártya) */
#myg-diary-app .myg-diary-daily__mood-option:hover{
  background: rgba(0,0,0,0.03);
}
#myg-diary-app .myg-diary-daily__mood-option:active{
  background: rgba(0,0,0,0.06);
}

/* Emoji méret */
#myg-diary-app .myg-diary-daily__mood-option .emoji{
  width: 30px;
  height: 30px;
}

/* MOBIL finomhangolás – ugyanott nyíljon, csak legyen nagyobb + stabil */
@media (max-width: 560px){
  #myg-diary-app .myg-diary-daily__mood-grid{
    width: 300px;                 /* mobilon kicsit nagyobb */
    max-width: calc(100vw - 16px);
    left: calc(100% + 8px);
  }

  #myg-diary-app .myg-diary-daily__mood-option{
    min-width: 62px;
    min-height: 62px;
  }

  #myg-diary-app .myg-diary-daily__mood-option .emoji{
    width: 32px;
    height: 32px;
  }
}

/* FALLBACK: ha a panel kilógna jobbra, próbáljuk balra nyitni (CSS-only közelítés)
   Ez nem tud “valódi” viewport mérést, de mobilon gyakran segít: */
@media (max-width: 560px){
  #myg-diary-app .myg-diary-daily__mood-grid{
    right: auto;
  }
  /* Ha a layout miatt jobbra kilógna, kézzel átváltható:
     - Ezt a 3 sort ideiglenesen uncommenteld, ha kell BALRA nyitás mobilon.
     left: auto;
     right: calc(100% + 8px);
     transform: translateY(-50%);
  */
}

/* =============================
   [BLOCK D] DAILY – ROW 3 (KALÓRIA ÖSSZEGZÉS: Elfogyasztott | % kör | Fennmaradt)
   CSEREHATÁR: a blokk elejétől a blokk végéig
   ============================= */

:root{
  /* >>> 2. és 3. sor távolsága (KPI sor ↔ kcal sáv) */
  --myg-summary-top-gap: 10px;       /* <<< ezt tekerd (pl. 8–14) */

  /* >>> oldalak “széjjel húzása” a körhöz képest */
  --myg-summary-gap: 30px;           /* <<< ezt tekerd (pl. 26–38) */

  /* >>> kör mérete (magasság = szélesség) */
  --myg-summary-ring-size: 78px;     /* <<< a kör “magassága” / mérete */

  /* >>> % jelzés a kör közepén */
  --myg-summary-percent-size: 15px;
  --myg-summary-percent-weight: 600;
  --myg-summary-percent-color: rgba(0,0,0,.70);
}

/* Mobil fókusz */
@media (max-width: 480px){
  :root{
    --myg-summary-top-gap: 6px;
    --myg-summary-gap: 32px;
    --myg-summary-ring-size: 70px;
    --myg-summary-percent-size: 14px;
  }
}

/* =========================================================
   1) Teljes sáv: 3 elem (bal | kör | jobb)
   - Itt állítod a 2. és 3. sor közti távolságot: margin-top
   ========================================================= */
#myg-diary-app .myg-diary-daily__summary{
  margin-top: var(--myg-summary-top-gap) !important; /* <<< KPI sor ↔ kcal sáv */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--myg-summary-gap) !important;            /* <<< oldalak levegője */
}

/* Bal/jobb blokk: középre zárt */
#myg-diary-app .myg-diary-daily__summary-side{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

/* =========================================================
   2) KÖZÉPSŐ KÖR: stabil rétegek
   - SVG: abszolút “háttér”
   - Text: abszolút “fedőréteg” középen
   - z-index: hogy semmi ne tolja el / ne takarja ki
   ========================================================= */
#myg-diary-app .myg-diary-daily__ring{
  width: var(--myg-summary-ring-size) !important;    /* <<< kör mérete */
  height: var(--myg-summary-ring-size) !important;
  flex: 0 0 var(--myg-summary-ring-size) !important;

  position: relative !important;
  display: grid !important;
  place-items: center !important;

  /* fontos: nehogy valami belső elem “kilógva” feljebb kerüljön */
  overflow: visible !important;
}

/* SVG töltse ki a dobozt és legyen “háttér” */
#myg-diary-app .myg-diary-daily__ring-svg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 1 !important;
}

/* TEXT réteg: KÉNYSZERÍTETT közép a körben */
#myg-diary-app .myg-diary-daily__ring-text{
  position: absolute !important;
  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  z-index: 2 !important;           /* <<< a kulcs: mindig az SVG felett */
  pointer-events: none !important;

  /* ha a plugin adott rá bármi offsetet/transformot, ezt lenullázzuk */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* % a körben */
#myg-diary-app .myg-diary-daily__ring-percent{
  font-size: var(--myg-summary-percent-size) !important;
  font-weight: var(--myg-summary-percent-weight) !important;
  color: var(--myg-summary-percent-color) !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* optikai közép – ha 1px-et kell igazítani */
  transform: translateY(0px) !important;  /* <<< ha kell: -1px vagy +1px */
}

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

/* =============================
   [BLOCK E] DAILY – MEAL CARD – ACTION BUTTONS (ÓRA + KUKA)
   CSEREHATÁR: a blokk elejétől a blokk végéig

   Célok:
   - a két gomb KÖZT legyen levegő (ne legyen szűk)
   - a fehér “kocka” legyen KISEBB (helynyerés)
   - az ikon NE nőjön meg (maradjon “eredeti” jellegű)
   - a spacing akkor is működjön, ha a gap nem fog (fallback margin)
   ============================= */

:root{
  /* >>> ÁLLÍTHATÓ: gombok közti távolság (levegő) */
  --myg-meal-action-gap: 8px;

  /* >>> ÁLLÍTHATÓ: kocka méret (desktop) */
  --myg-meal-action-box: 40px;

  /* >>> ÁLLÍTHATÓ: kocka kerekítés */
  --myg-meal-action-radius: 12px;

  /* >>> ÁLLÍTHATÓ: ikon max méret (NE nőjön el) */
  --myg-meal-action-icon: 18px;
}

/* Mobilon még kisebb kocka (több fér ki) – de marad kényelmes */
@media (max-width: 520px){
  :root{
    --myg-meal-action-gap: 8px;     /* NEM szűkítjük */
    --myg-meal-action-box: 33px;     /* kisebb alap */
    --myg-meal-action-radius: 11px;
    --myg-meal-action-icon: 18px;   /* ikon ne nőjön */
  }
}

/* =========================================================
   1) Actions konténer – kényszerített flex + GAP
   (ha eddig nem flex volt, ezért nem működött a gap)
   ========================================================= */
#myg-diary-app .myg-diary-meal__actions{
  display: flex !important;
  align-items: center !important;

  gap: var(--myg-meal-action-gap) !important;        /* modern */
  column-gap: var(--myg-meal-action-gap) !important; /* biztos ami biztos */
}

/* Fallback: ha valamiért a gap mégsem érvényesül, legyen margin a 2. gombon */
#myg-diary-app .myg-diary-meal__actions > .myg-diary-meal__action + .myg-diary-meal__action{
  margin-left: var(--myg-meal-action-gap) !important;
}

/* =========================================================
   2) Maga a gomb-kocka (fehér alap) – KISEBB + KOCKA
   ========================================================= */
#myg-diary-app .myg-diary-meal__action{
  width: var(--myg-meal-action-box) !important;
  height: var(--myg-meal-action-box) !important;

  min-width: var(--myg-meal-action-box) !important;
  min-height: var(--myg-meal-action-box) !important;

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

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

  border: 0 !important;
  border-radius: var(--myg-meal-action-radius) !important;

  background: #fff !important;

  /* finomabb árnyék (kisebb dobozhoz) */
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;

  /* mobil tap */
  -webkit-tap-highlight-color: transparent !important;
}

/* =========================================================
   3) Ikon: NE nőjön meg
   - Nem “felnagyítjuk”, csak MAX méretet adunk, hogy biztos maradjon az eredeti jelleg
   ========================================================= */
#myg-diary-app .myg-diary-meal__action img.emoji,
#myg-diary-app .myg-diary-meal__action svg{
  width: auto !important;
  height: auto !important;

  max-width: var(--myg-meal-action-icon) !important;
  max-height: var(--myg-meal-action-icon) !important;

  display: block !important;
}

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

/* =============================
   [BLOCK F] DAILY – MEAL SIDEBAR + PLANNED CHECK (sáv keskenyebb + pipa vissza)
   CSEREHATÁR: a blokk elejétől a blokk végéig
   ============================= */

:root{
  /* >>> Sidebar szélesség (bal sáv) */
  --myg-meal-sidebar-w: 68px;          /* elfogyasztott (idősáv) – ha kell */
  --myg-meal-sidebar-w-planned: 68px;  /* tervezett (szám+drag) – EZT KERESD */

  /* >>> Tervezett pipa stílus */
  --myg-planned-check-color: #ff8a00;  /* narancs pipa */
  --myg-planned-check-size: 22px;     /* ✓ mérete */
}

@media (max-width: 520px){
  :root{
    --myg-meal-sidebar-w: 40px;
    --myg-meal-sidebar-w-planned: 40px;
    --myg-planned-check-size: 22px;
  }
}

/* =========================================================
   1) BAL SIDEBAR – általános: fix szélesség, középre rendezés
   ========================================================= */
#myg-diary-app .myg-diary-meal__sidebar{
  width: var(--myg-meal-sidebar-w) !important;
  flex: 0 0 var(--myg-meal-sidebar-w) !important;

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

  /* ne legyen “felesleges” belső tér, ami szélesíti */
  padding: 0 !important;
}

/* Tervezett: ugyanolyan keskeny legyen, mint az elfogyasztott */
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__sidebar{
  width: var(--myg-meal-sidebar-w-planned) !important;
  flex: 0 0 var(--myg-meal-sidebar-w-planned) !important;
}

/* Tervezett sorszám (2) – marad középen, ne tolja szét a sávot */
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__order{
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Drag fogantyú (⋮⋮) – kisebb és középre */
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__drag{
  margin-top: 10px !important;   /* ha túl lent/fent: itt állítod */
  line-height: 1 !important;
  font-size: 18px !important;    /* ha túl nagy: 16 */
  opacity: .75 !important;
}

/* =========================================================
   2) TERVEZETT “MEGETTEM” PIPA – visszahozás + narancs (vastagabb ✓)
   HTML: <button class="myg-diary-meal__action myg-diary-meal__action--primary" ...>✓</button>
   ========================================================= */
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__action--primary[data-action="mark-consumed"]{
  /* a kockát az E blokk már kezeli (méret, radius, shadow),
     itt csak a ✓ karaktert tesszük rendbe */
  color: var(--myg-planned-check-color) !important;
  font-size: var(--myg-planned-check-size) !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  /* ✓ vastagítás (optikai “kövérítés” ikoncsere nélkül) */
  text-shadow:
    0 0 0 currentColor,
    0.6px 0 currentColor,
    -0.6px 0 currentColor !important;

  /* biztos középre */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* nehogy valami “eltüntesse” */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ha valami pseudo-element takarná, kilőjük */
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__action--primary[data-action="mark-consumed"]::before,
#myg-diary-app .myg-diary-meal--planned .myg-diary-meal__action--primary[data-action="mark-consumed"]::after{
  content: none !important;
}

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

/* =============================
   [BLOCK G] DAILY – MEAL CARD 3 RÉSZES TÖRDELÉS / SZŰKÍTETT VERZIÓ
   Cél:
   - a header magasságát gyakorlatilag az ikonok adják
   - az ikonok és a cím teljesen felzárkóznak a felső élhez
   - az elválasztóvonal az ikonok aljához közel kerül
   - a footer lejjebb húzva, minimális alsó margóval
   ============================= */

:root{
  --myg-meal-section-line: rgba(20, 34, 56, 0.08);

  --myg-meal-header-pad-top: 0px;
  --myg-meal-header-pad-right: 14px;
  --myg-meal-header-pad-bottom: 0px;
  --myg-meal-header-pad-left: 14px;

  --myg-meal-items-pad-top: 12px;
  --myg-meal-items-pad-right: 14px;
  --myg-meal-items-pad-bottom: 10px;
  --myg-meal-items-pad-left: 14px;

  --myg-meal-footer-pad-top: 10px;
  --myg-meal-footer-pad-right: 14px;
  --myg-meal-footer-pad-bottom: 6px;
  --myg-meal-footer-pad-left: 14px;
}

@media (max-width: 520px){
  :root{
    --myg-meal-header-pad-right: 12px;
    --myg-meal-header-pad-left: 12px;

    --myg-meal-items-pad-top: 11px;
    --myg-meal-items-pad-right: 12px;
    --myg-meal-items-pad-bottom: 9px;
    --myg-meal-items-pad-left: 12px;

    --myg-meal-footer-pad-top: 10px;
    --myg-meal-footer-pad-right: 12px;
    --myg-meal-footer-pad-bottom: 5px;
    --myg-meal-footer-pad-left: 12px;
  }
}

/* 1) A belső kártyatartalom osztott legyen */
#myg-diary-app .myg-diary-meal__content{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* 2) HEADER – gyakorlatilag az ikonok magassága határozza meg */
#myg-diary-app .myg-diary-meal__header{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;

  padding:
    0
    var(--myg-meal-header-pad-right)
    0
    var(--myg-meal-header-pad-left) !important;

  margin: 0 !important;
  border-bottom: 1px solid transparent !important;
}

#myg-diary-app .myg-diary-meal__name{
  margin: 0 !important;
  min-width: 0 !important;
  line-height: 1.1 !important;

  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;

  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

#myg-diary-app .myg-diary-meal__actions{
  flex: 0 0 auto !important;
  margin: 0 !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  transform: translateY(-5px) !important;
}

#myg-diary-app .myg-diary-meal__action{
  margin: 0 !important;
  align-self: flex-start !important;
}

/* 3) KÖZÉPSŐ RÉSZ
   MIT HOL ÁLLÍTS:
   - padding-top:    felső belső tér a felsorolás fölött
   - padding-bottom: EZ HÚZZA FEL/LE A FELETTE LÉVŐ CSÍKOT
                     kisebb érték = a csík LEJJEBB kerül
*/
#myg-diary-app .myg-diary-meal__items{
  padding:
    12px
    var(--myg-meal-items-pad-right)
    3px
    var(--myg-meal-items-pad-left) !important;

  margin: 0 !important;
  border-bottom: 1px solid var(--myg-meal-section-line) !important;
  line-height: 1.4 !important;
  min-width: 0 !important;
}

/* 4) FOOTER – valódi keskeny lábléc
   MIT HOL ÁLLÍTS:
   - padding-top:    ettől kerül LEJJEBB a szöveg
   - padding-bottom: alsó minimális tér
   - font-size:      betűméret
   - font-weight:    400 = normál, 700 = félkövér
*/
#myg-diary-app .myg-diary-meal__footer{
  padding:
    15px
    var(--myg-meal-footer-pad-right)
    0px
    var(--myg-meal-footer-pad-left) !important;

  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  white-space: normal !important;

  display: flex !important;
  align-items: flex-end !important;
}

@media (max-width: 520px){
 #myg-diary-app .myg-diary-meal__items{
  padding:
    8px
    12px
    6px
    12px !important;

  margin: 0 !important;
  border-bottom: 1px solid var(--myg-meal-section-line) !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  min-width: 0 !important;
}

  #myg-diary-app .myg-diary-meal__footer{
    padding:
      10px
      12px
      0px
      12px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
}

/* 5) Biztonsági takarítás */
#myg-diary-app .myg-diary-meal__header > *,
#myg-diary-app .myg-diary-meal__items > *,
#myg-diary-app .myg-diary-meal__footer > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

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

/* =============================
   [BLOCK H] DAILY – FELSŐ LEVEGŐ AZ ELSŐ BLOKK ELŐTT + BLOKKOK KÖZTI TÁVOLSÁG
   Cél:
   - legyen kis levegő a felső rögzített sáv / makró sor és az első étkezéskártya között
   - a kártyák KÖZTI hézag maradjon külön szabályozva
   - ne nyúljunk bele a belső kártyatávolságokba

   MIT HOL ÁLLÍTS:
   - --myg-daily-first-meal-top-gap:
     ez adja a LEGFELSŐ plusz levegőt az első blokk fölé
   - --myg-daily-meal-gap:
     ez marad a blokkok KÖZTI távolság
   ============================= */

:root{
  --myg-daily-first-meal-top-gap: 14px; /* <<< EZT TEKERD: pl. 10–18 */
  --myg-daily-meal-gap: 8px;            /* <<< blokkok közti hézag */
}

#myg-diary-app .myg-diary-meals{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--myg-daily-meal-gap) !important;
  margin-top: var(--myg-daily-first-meal-top-gap) !important; /* <<< csak FELÜL ad levegőt */
}

/* Biztonsági nullázás, hogy ne duplázódjon a tér
   ha valamelyik kártyán saját alsó margó ül */
#myg-diary-app .myg-diary-meal{
  margin-bottom: 0 !important;
}

@media (max-width: 520px){
  :root{
    --myg-daily-first-meal-top-gap: 12px; /* mobilon picit kisebb */
    --myg-daily-meal-gap: 10px;
  }
}

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

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

/* =============================
   [BLOCK I] DAILY – KCAL KIEMELÉS A FOOTERBEN
   Cél:
   - csak a "169 kcal" / "250 kcal" rész legyen narancssárga
   - a többi makró maradjon jelenlegi színén

   MIT HOL ÁLLÍTS:
   - color: a kcal színe
   - font-weight: a kcal vastagsága
   ============================= */

#myg-diary-app .myg-diary-meal__kcal-highlight{
  color: #f28c28 !important;
  font-weight: 700 !important;
  margin-right: 4px !important;   /* <<< ettől kerül el a pötty az "l" betűtől */
  display: inline-block !important;
}

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

/* =============================
   [BLOCK J] DAILY – FELSŐ RÖGZÍTETT SÁV ALSÓ ELVÁLASZTÓVONAL
   Cél:
   - a felső fix rész alján is legyen ugyanúgy finom elválasztás,
     mint az alsó rögzített gombsornál
   - a korábban berakott felső levegő emiatt vizuálisan is látszódjon

   MIT HOL ÁLLÍTS:
   - border-bottom: a halvány elválasztó csík erőssége
   - box-shadow: nagyon finom rásegítés, ha kell
   ============================= */

#myg-diary-app .myg-diary-daily__top{
  border-bottom: 1px solid rgba(44, 62, 80, 0.12) !important;
  box-shadow: 0 1px 0 rgba(44, 62, 80, 0.04) !important;
}

/* =============================
   [BLOCK K] DAILY – ALSÓ 4 GOMB ÚJRADIZÁJN (IKON + FELIRAT, 1 SORBAN)
   Cél:
   - 4 gomb 1 sorban
   - felül ikon, alul felirat
   - mobilon KÖZVETLENÜL a gombra írjuk a magasságot,
     hogy tényleg reagáljon a módosításra

   MIT HOL ÁLLÍTS:
   --------------------------------
   DESKTOP / ALAP:
   - height: 86px;                ← gomb magasság
   - width/height az ikonhoz: 36px;
   - font-size a felirathoz: 13px;
   - font-weight a felirathoz: 600;

   MOBIL:
   - height: 68px;                ← EZ A MOBIL GOMB MAGASSÁG
   - width/height az ikonhoz: 38px;
   - font-size a felirathoz: 12px;
   - gap: 5px;                    ← ikon és felirat közti levegő

   FONTOS:
   - itt már NEM változókból vezéreljük a mobil magasságot,
     hanem direkt selectorral, hogy biztosan működjön
   ============================= */

/* 1) Konténer – 4 egyenlő oszlop */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-buttons{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Alap gomb – desktop / általános */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab{
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;

  height: 86px !important;         /* <<< DESKTOP/ALAP GOMB MAGASSÁG */
  min-height: 86px !important;     /* <<< DESKTOP/ALAP GOMB MAGASSÁG */

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;             /* <<< ikon és felirat közti rés */

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

  border-radius: 18px !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;

  color: transparent !important;   /* eredeti szöveg elrejtése */
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;

  -webkit-tap-highlight-color: transparent !important;
}

/* Ha a plugin / theme belső elemet tenne bele, ne zavarjon */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab > *{
  display: none !important;
}

/* 3) Ikon */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::before{
  content: "" !important;
  display: block !important;
  width: 36px !important;          /* <<< DESKTOP/ALAP IKON MÉRET */
  height: 36px !important;         /* <<< DESKTOP/ALAP IKON MÉRET */
  flex: 0 0 36px !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 4) Felirat
   MIT HOL ÁLLÍTS:
   - color: a felirat színe
     #1f2d3d = sötétebb
     #3f4a56 = elegáns sötétszürke
     #56606b = még lágyabb szürke
*/
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::after{
  display: block !important;
  font-size: 14px !important;      /* <<< DESKTOP/ALAP FELIRAT MÉRET */
  line-height: 1.1 !important;
  font-weight: 600 !important;     /* <<< DESKTOP/ALAP FELIRAT VASTAGSÁG */
  color: #56606b !important;       /* <<< FELIRAT SZÍN – elegáns sötétszürke */
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* 5) Gombonként ikon + felirat */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="food"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/kaloria.png") !important;
}
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="food"]::after{
  content: "Étel" !important;
}

#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="saved-meal"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/etkezes.png") !important;
}
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="saved-meal"]::after{
  content: "Étkezés" !important;
}

#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="recipe"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/myreceptek.png") !important;
}
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="recipe"]::after{
  content: "Recept" !important;
}

#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="custom"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/egyedi.png") !important;
}
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn[data-tab="custom"]::after{
  content: "Egyedi" !important;
}

/* 6) Finom interakció */
#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab:hover{
  transform: translateY(-1px) !important;
}

#myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab:active{
  transform: translateY(1px) scale(0.985) !important;
}

/* 7) MOBIL – DIREKT FELÜLÍRÁS
   Itt már nem változót tekerünk, hanem magát a gombot.
   Ezért ennek MUSZÁJ látszania.
*/
@media (max-width: 520px){

  /* konténer hézag mobilon */
  #myg-diary-app .myg-diary-daily__bottom .myg-diary-buttons{
    gap: 8px !important;           /* <<< MOBIL GOMBOK KÖZTI RÉS */
  }

  /* maga a gomb mobilon */
  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab{
    height: 68px !important;       /* <<< EZT ÁLLÍTSD, ha kisebb/nagyobb kell */
    min-height: 68px !important;   /* <<< EZT ÁLLÍTSD, hogy biztos hasson */

    padding: 7px 4px 6px !important;
    gap: 5px !important;           /* <<< ikon és felirat közti távolság */
    border-radius: 16px !important;
  }

  /* ikon mobilon */
  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::before{
    width: 38px !important;        /* <<< MOBIL IKON MÉRET */
    height: 38px !important;       /* <<< MOBIL IKON MÉRET */
    flex: 0 0 38px !important;
  }

    /* felirat mobilon
     MIT HOL ÁLLÍTS:
     - color: a mobil felirat színe
  */
  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::after{
    font-size: 13px !important;    /* <<< MOBIL FELIRAT MÉRET */
    font-weight: 600 !important;   /* <<< MOBIL FELIRAT VASTAGSÁG */
    line-height: 1.05 !important;
    color: #56606b !important;     /* <<< MOBIL FELIRAT SZÍN – elegáns sötétszürke */
  }
}

/* 8) Extra szűk mobil */
@media (max-width: 380px){
  #myg-diary-app .myg-diary-daily__bottom .myg-diary-buttons{
    gap: 6px !important;
  }

  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab{
    height: 64px !important;       /* <<< EXTRA SZŰK MOBIL MAGASSÁG */
    min-height: 64px !important;
    padding: 6px 3px 5px !important;
    gap: 4px !important;
  }

  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::before{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  #myg-diary-app .myg-diary-daily__bottom .myg-diary-btn.myg-diary-btn--tab::after{
    font-size: 11px !important;
    font-weight: 600 !important;
  }
}

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

/* =============================
   [BLOCK L] DAILY – ÜRES NAP / INFORMÁCIÓS SZÖVEG (CSS-ONLY VIZUÁLIS CSERE)
   FONTOS:
   - HTML-hez NEM nyúlunk
   - a meglévő 2 db <p> szöveget vizuálisan elrejtjük
   - az új szöveget pseudo-elemekkel rajzoljuk ki
   - NEM :has()-t használunk
   - csak akkor jelenjen meg, ha maga az empty blokk nincs inline display:none állapotban

   MIT HOL ÁLLÍTS:
   - --myg-empty-pad-top: milyen magasan induljon a szöveg
   - --myg-empty-font-size: betűméret
   - --myg-empty-text-color: szöveg színe
   - ::before margin-bottom: blokkok közti nagyobb rés
   ============================= */

:root{
  --myg-empty-text-color: #a3a3a3;   /* <<< világos szürke */
  --myg-empty-font-size: 16px;       /* <<< alap betűméret */
  --myg-empty-line-height: 1.5;
  --myg-empty-max-width: 520px;
  --myg-empty-pad-top: 42px;         /* <<< FELJEBBRE HOZVA */
  --myg-empty-pad-bottom: 24px;
  --myg-empty-pad-x: 20px;
}

/* 1) Alapból rejtjük */
#myg-diary-app .myg-diary-meals__empty{
  display: none !important;
}

/* 2) Csak akkor mutassuk,
   ha NINCS rajta inline display:none */
#myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"]){
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;

  padding:
    var(--myg-empty-pad-top)
    var(--myg-empty-pad-x)
    var(--myg-empty-pad-bottom)
    var(--myg-empty-pad-x) !important;

  text-align: center !important;
}

/* 3) Az eredeti 2 db <p> vizuális elrejtése */
#myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"]) > p{
  display: none !important;
}

/* 4) Fő infóblokk */
#myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"])::before{
  content:
    "Itt beállíthatod az aktuális testsúlyodat és a napi kalóriacélt.\A"
    "Ezek az értékek automatikusan öröklődnek az előző napról, de szabadon módosíthatod.\A\A"
    "Kattints a smileyra, és add meg a napod hangulatát.\A\A"
    "A myLiveFast rendszer valós időben számolja a böjtidőt."
  !important;

  display: block !important;
  width: 100% !important;
  max-width: var(--myg-empty-max-width) !important;
  margin: 0 auto 18px auto !important;

  color: var(--myg-empty-text-color) !important;
  font-size: var(--myg-empty-font-size) !important;
  line-height: var(--myg-empty-line-height) !important;
  font-weight: 400 !important;
  text-align: center !important;
  white-space: pre-line !important;
}

/* 5) Akciósor */
#myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"])::after{
  content: "Az első étkezés hozzáadásához válassz az alábbi gombok közül." !important;

  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;

  color: var(--myg-empty-text-color) !important;
  font-size: var(--myg-empty-font-size) !important;
  line-height: var(--myg-empty-line-height) !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* Mobil finomhangolás */
@media (max-width: 520px){
  :root{
    --myg-empty-font-size: 13px;
    --myg-empty-line-height: 1.48;
    --myg-empty-max-width: 100%;
    --myg-empty-pad-top: 20px;     /* <<< mobilon még feljebb */
    --myg-empty-pad-bottom: 20px;
    --myg-empty-pad-x: 18px;
  }

  #myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"])::before{
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  #myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"])::after{
    max-width: 100% !important;
  }
}

/* Extra szűk mobil
   MIT HOL ÁLLÍTS:
   - --myg-empty-font-size: ha túl kicsi a szöveg nagyon keskeny mobilon
*/
@media (max-width: 380px){
  :root{
    --myg-empty-font-size: 13px;   /* <<< ez írta felül eddig a nagyobbra állítást */
    --myg-empty-pad-top: 14px;
    --myg-empty-pad-x: 14px;
  }

  #myg-diary-app .myg-diary-meals__empty:not([style*="display:none"]):not([style*="display: none"])::before{
    margin-bottom: 14px !important;
  }
}

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