/* MyFoodly – náhled jídelníčku, embed pro myfoodly.cz. Servírováno staticky,
   ať to na WP straně nemusí procházet WYSIWYG/minifikačním pluginem. */
.mf-week {
  font-family: inherit; max-width: 1140px; margin: 0 auto;
  background: linear-gradient(180deg, #faf8f3 0%, #f3f0e8 100%);
  border-radius: 28px; padding: 32px 24px 36px;
}

.mf-variant-wrap { text-align: center; margin-bottom: 18px; }
.mf-variant-toggle {
  display: inline-flex; padding: 4px; background: #fff; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 6px 14px rgba(30, 30, 20, 0.04);
}
.mf-variant-btn {
  padding: 9px 20px; border-radius: 999px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #6b6255; transition: background-color 0.15s ease, color 0.15s ease;
}
.mf-variant-btn.is-active { background: #2f8a4e; color: #fff; }

.mf-programs-wrap { margin-bottom: 28px; }
.mf-programs-hint {
  text-align: center; font-size: 12px; font-weight: 600; color: #9a9284;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.mf-week__programs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
/* mobilní náhrada za řádek tlačítek – jedna volba místo řady dlaždic, Slim
   je předvyplněný (server ho posílá jako výchozí program). Schovaný na
   širší obrazovce, řádek tlačítek naopak schovaný na úzké – viz media query níž. */
.mf-program-select {
  display: none; width: 100%; max-width: 420px; margin: 0 auto;
  background: #fff; border: 1.5px solid #2f8a4e; border-radius: 14px;
  padding: 13px 16px; font: inherit; font-size: 14.5px; font-weight: 700; color: #1f6b39;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 6px 14px rgba(30, 30, 20, 0.05);
}
@media (max-width: 640px) {
  .mf-week__programs { display: none; }
  .mf-program-select { display: block; }
}
.mf-program {
  min-width: 128px; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent;
  background: #fff; text-align: center; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 6px 16px rgba(30, 30, 20, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mf-program:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(30, 30, 20, 0.08); }
.mf-program__name { font-size: 14px; font-weight: 700; color: #2a2a24; }
.mf-program__kcal { font-size: 13px; color: #9a9284; }
.mf-program.is-active {
  background: #2f8a4e; border-color: #2f8a4e;
  box-shadow: 0 4px 14px rgba(47, 138, 78, 0.35);
}
.mf-program.is-active .mf-program__name { color: #fff; }
.mf-program.is-active .mf-program__kcal { color: rgba(255, 255, 255, 0.85); }

.mf-week__nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; }
.mf-week__arrow {
  width: 38px; height: 38px; border-radius: 999px; border: none;
  background: #fff; cursor: pointer; font-size: 16px; color: #2f8a4e;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.06), 0 6px 14px rgba(30, 30, 20, 0.05);
  transition: transform 0.15s ease;
}
.mf-week__arrow:hover { transform: scale(1.06); }
.mf-week__arrow:disabled { opacity: 0.35; cursor: default; transform: none; }
.mf-week__days { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mf-day {
  min-width: 66px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent;
  background: #fff; text-align: center; cursor: pointer; font-size: 13px; color: #6b6255;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 4px 10px rgba(30, 30, 20, 0.03);
}
.mf-day strong { display: block; font-size: 14px; color: #2a2a24; }
.mf-day.is-active { background: #eaf6ee; border-color: #2f8a4e; color: #1f6b39; }
.mf-day.is-active strong { color: #1f6b39; }
.mf-day.is-empty { opacity: 0.4; cursor: default; box-shadow: none; }
/* "dnes" – tečka nad datem, viditelná i když je vybraný jiný den */
.mf-day.is-today { position: relative; }
.mf-day.is-today::before {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 999px; background: #2f8a4e;
}
.mf-day.is-today.is-active::before { background: #1f6b39; }

.mf-week__total { display: flex; justify-content: center; margin-top: 22px; }
.mf-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px;
  background: #fff; border-radius: 999px; padding: 10px 22px;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 6px 16px rgba(30, 30, 20, 0.05);
}
.mf-total__kcal { font-size: 17px; font-weight: 800; color: #1f6b39; }
.mf-total__label { font-size: 12px; color: #9a9284; }
.mf-total__macros { display: flex; gap: 12px; }
.mf-total__macros b { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #2a2a24; }

/* flex místo grid schválně – s grid by kratší den (např. Slim Extra bez
   svačin, jen 3 jídla) nechal karty přilepené vlevo; flex + justify-content:
   center je vystředí jako skupinu, ať jídel je 3, nebo 5. */
.mf-week__cards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.mf-card {
  flex: 0 1 calc(50% - 8px);
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.05), 0 10px 24px rgba(30, 30, 20, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (max-width: 480px) {
  /* pokryje i běžné iPhony na šířku (375–430px), ne jen ty nejmenší telefony */
  .mf-card { flex-basis: 100%; }
}
@media (min-width: 640px) {
  .mf-week__cards { gap: 18px; }
  .mf-card { flex-basis: calc(33.333% - 12px); }
}
@media (min-width: 1000px) {
  .mf-week__cards { gap: 20px; }
  .mf-card { flex-basis: calc(20% - 16px); }
}
.mf-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30, 30, 20, 0.12); }
.mf-card__label {
  text-align: center; padding: 12px 8px 0; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: #2f8a4e;
}
.mf-card__img {
  margin: 10px 12px 0; aspect-ratio: 1 / 1; border-radius: 14px; background: #f1efe6;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  overflow: hidden;
}
.mf-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mf-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.mf-card__name {
  /* celý název vždy vidět – žádné ořezávání na 2 řádky, karta je radši o kousek vyšší */
  font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #2a2a24;
  line-height: 1.3;
}
.mf-card__kcal {
  /* podřízené názvu jídla – dřív bylo kcal graficky nápadnější než samo jídlo.
     margin-top: auto – kcal (a s ním makra i alergeny, jdou hned za ním)
     se přilepí ke spodku karty, ať délka názvu neposune, kde jídla v řadě
     "začínají" – karty v jedné řadě mají stejnou výšku (flex stretch), takže
     se to zarovná napříč celou řadou. */
  display: inline-flex; align-self: flex-start; align-items: baseline; font-size: 13px; font-weight: 700; color: #1f6b39;
  background: #eaf6ee; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  margin-top: auto;
}
.mf-card__kcal small { font-size: 11px; font-weight: 600; color: #4f9c6c; margin-left: 3px; }
/* flex + wrap místo pevných 3 sloupců – na užší kartě (2 sloupce na mobilu)
   se "Sacharidy" nevejde vedle ostatních dvou; ať se celé makro i s popiskem
   přesune na další řádek vcelku, ne aby se slovo lámalo uprostřed nebo
   přetékalo do sousedního sloupce. */
.mf-card__macros { display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 8px; margin-top: 12px; }
.mf-card__macro { font-size: 13px; font-weight: 700; color: #2a2a24; }
.mf-card__macro b {
  display: flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap;
}
.mf-card__macro span {
  display: block; margin-top: 2px; padding-left: 10px; font-size: 9.5px; font-weight: 500; color: #9a9284;
  white-space: nowrap;
}
.mf-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }
.mf-dot--b { background: #4c8bf5; }
.mf-dot--s { background: #f5a623; }
.mf-dot--t { background: #f55c5c; }
.mf-card__allergens { margin-top: 12px; display: flex; gap: 6px; }
.mf-card__allergen {
  width: 20px; height: 20px; border-radius: 999px; background: #f1efe6; color: #9a9284;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.mf-week__empty { text-align: center; color: #9a9284; padding: 40px 0; }
.mf-note { text-align: center; color: #9a9284; font-size: 12.5px; margin-top: 14px; }