/* =========================================================
   RECIPE MODAL — FINAL DESKTOP POSITION + STABLE SIZE
   ========================================================= */

/*
  Do NOT force display here — hidden/open state stays controlled
  by the application. Only control alignment.
*/
#recipeOverlay {
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;
  box-sizing: border-box !important;
}

/* Main floating recipe window */
#recipeOverlay > * {
  box-sizing: border-box !important;

  width: min(760px, calc(100vw - 48px)) !important;
  max-width: 760px !important;

  height: min(82dvh, 820px) !important;
  min-height: min(680px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;

  margin: 0 auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain !important;

  border-radius: 22px !important;

  /*
    Keep modal visually floating rather than attached
    to top or bottom of viewport.
  */
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* Same size regardless of active recipe tab */
#recipeOverlay.open > *,
#recipeOverlay:not(.hidden) > * {
  width: min(760px, calc(100vw - 48px)) !important;

  height: min(82dvh, 820px) !important;
  min-height: min(680px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;

  margin: auto !important;
}

/* Medium laptops */
@media (max-height: 850px) {
  #recipeOverlay {
    padding: 18px !important;
  }

  #recipeOverlay > *,
  #recipeOverlay.open > *,
  #recipeOverlay:not(.hidden) > * {
    height: calc(100dvh - 36px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
  }
}

/* Smaller desktop/tablet widths */
@media (max-width: 850px) {
  #recipeOverlay > *,
  #recipeOverlay.open > *,
  #recipeOverlay:not(.hidden) > * {
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  #recipeOverlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #recipeOverlay > *,
  #recipeOverlay.open > *,
  #recipeOverlay:not(.hidden) > * {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;

    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;

    border-radius: 18px !important;
  }
}


/* RECIPE READABILITY FINAL */

/* ---------------------------------------------------------
   HERO IMAGE — title must stay readable on every photograph
   --------------------------------------------------------- */

#recipeOverlay .recipeHero {
  position: relative !important;
  overflow: hidden !important;
}

/* Dark scrim only behind the lower part of the photo */
#recipeOverlay .recipeHero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      to bottom,
      rgba(20, 28, 33, 0) 42%,
      rgba(20, 28, 33, 0.10) 56%,
      rgba(20, 28, 33, 0.58) 78%,
      rgba(20, 28, 33, 0.82) 100%
    ) !important;
}

#recipeOverlay .recipeHero img {
  position: relative !important;
  z-index: 0 !important;
}

/* Keep title and controls above gradient */
#recipeOverlay .recipeTitle {
  position: absolute !important;
  z-index: 2 !important;
}

#recipeOverlay .sheetClose {
  z-index: 4 !important;
}

#recipeOverlay .recipeImageCredit {
  z-index: 3 !important;
}

/* Main recipe name */
#recipeOverlay #recipeName {
  color: #fff !important;
  font-size: clamp(27px, 2.5vw, 34px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.42),
    0 5px 18px rgba(0,0,0,.32) !important;
}

/* Portions / store / live calculation */
#recipeOverlay #recipeLiked {
  color: rgba(255,255,255,.96) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.55) !important;
}


/* ---------------------------------------------------------
   SUMMARY — easier to scan
   --------------------------------------------------------- */

#recipeOverlay .recipeStat small {
  color: #68737a !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

#recipeOverlay .recipeStat b {
  color: #26333d !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

#recipeOverlay .recipeTabs button {
  font-size: 13px !important;
  font-weight: 800 !important;
}


/* ---------------------------------------------------------
   INGREDIENTS — primary readability improvement
   --------------------------------------------------------- */

#recipeOverlay .ingredientRow {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  column-gap: 12px !important;
}

/* Ingredient name */
#recipeOverlay .ingredientRow > div:nth-child(2) > b {
  color: #26333d !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

/* Quantity */
#recipeOverlay .ingredientRow > div:nth-child(2) .small,
#recipeOverlay .ingredientRow > div:nth-child(2) .muted {
  color: #667279 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}

/* Exact product / price calculation on right */
#recipeOverlay .ingredientDeal {
  line-height: 1.35 !important;
}

#recipeOverlay .ingredientDeal b {
  color: #3d6f4b !important;
  font-size: 10.8px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}

#recipeOverlay .ingredientDeal span {
  color: #59656b !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}


/* ---------------------------------------------------------
   PREPARATION / PRICE / NUTRITION
   --------------------------------------------------------- */

#recipeOverlay #recipeSteps .step {
  color: #303c44 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

#recipeOverlay .recipePane h3 {
  color: #26333d !important;
  line-height: 1.2 !important;
}

#recipeOverlay .recipePane p,
#recipeOverlay .recipePane .small {
  line-height: 1.48 !important;
}

#recipeOverlay .recipePane .muted {
  color: #637077 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {
  #recipeOverlay #recipeName {
    font-size: 26px !important;
  }

  #recipeOverlay .ingredientDeal b {
    font-size: 10.5px !important;
  }

  #recipeOverlay .ingredientRow > div:nth-child(2) > b {
    font-size: 13.5px !important;
  }
}


/* RECIPE TYPOGRAPHY SCALE V2 */

/* Hero title */
#recipeOverlay #recipeName {
  font-size: clamp(34px, 3vw, 42px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
  font-weight: 900 !important;
}

#recipeOverlay #recipeLiked {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* Summary cards */
#recipeOverlay .recipeStat small {
  font-size: 11.5px !important;
}

#recipeOverlay .recipeStat b {
  font-size: 15.5px !important;
}

/* Tabs */
#recipeOverlay .recipeTabs button {
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* Ingredient name */
#recipeOverlay .ingredientRow > div:nth-child(2) > b {
  font-size: 15.5px !important;
  line-height: 1.25 !important;
}

/* Ingredient quantity */
#recipeOverlay .ingredientRow > div:nth-child(2) .small,
#recipeOverlay .ingredientRow > div:nth-child(2) .muted {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin-top: 3px !important;
}

/* Price / product calculation */
#recipeOverlay .ingredientDeal b {
  font-size: 11.8px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

#recipeOverlay .ingredientDeal span {
  font-size: 11.2px !important;
  line-height: 1.4 !important;
}

/* Preparation text */
#recipeOverlay #recipeSteps .step {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

/* Price / nutrition paragraphs */
#recipeOverlay .recipePane p,
#recipeOverlay .recipePane .small {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* Give ingredient rows a bit more breathing room */
#recipeOverlay .ingredientRow {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

/* Mobile */
@media (max-width: 700px) {
  #recipeOverlay #recipeName {
    font-size: 32px !important;
  }

  #recipeOverlay .ingredientRow > div:nth-child(2) > b {
    font-size: 15px !important;
  }

  #recipeOverlay .ingredientDeal b {
    font-size: 11px !important;
  }
}


/* =========================================================
   RECIPE MODAL DESKTOP WIDTH + TYPOGRAPHY V3
   ========================================================= */

@media (min-width: 851px) {

  /* Wider floating recipe window */
  #recipeOverlay > *,
  #recipeOverlay.open > *,
  #recipeOverlay:not(.hidden) > * {
    width: min(900px, calc(100vw - 64px)) !important;
    max-width: 900px !important;

    height: min(84dvh, 850px) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  /* Slightly larger hero title */
  #recipeOverlay #recipeName {
    font-size: clamp(38px, 3.2vw, 46px) !important;
    line-height: 0.94 !important;
  }

  #recipeOverlay #recipeLiked {
    font-size: 13.5px !important;
  }

  /* Summary */
  #recipeOverlay .recipeStat small {
    font-size: 12px !important;
  }

  #recipeOverlay .recipeStat b {
    font-size: 16px !important;
  }

  /* Tabs */
  #recipeOverlay .recipeTabs button {
    font-size: 14.5px !important;
  }

  /* Give ingredients real room */
  #recipeOverlay .ingredientRow {
    grid-template-columns:
      42px
      minmax(180px, 0.8fr)
      minmax(300px, 1.45fr) !important;

    gap: 14px !important;
    padding: 14px 0 !important;
    align-items: start !important;
  }

  #recipeOverlay .ingredientIcon {
    width: 38px !important;
    height: 38px !important;
  }

  /* Ingredient name */
  #recipeOverlay .ingredientRow > div:nth-child(2) > b {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  /* Quantity */
  #recipeOverlay .ingredientRow > div:nth-child(2) .small,
  #recipeOverlay .ingredientRow > div:nth-child(2) .muted {
    font-size: 13px !important;
  }

  /* Product / price explanation */
  #recipeOverlay .ingredientDeal {
    min-width: 0 !important;
    max-width: none !important;

    text-align: right !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #recipeOverlay .ingredientDeal b {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  #recipeOverlay .ingredientDeal span {
    font-size: 11.8px !important;
    line-height: 1.4 !important;
  }

  /* Preparation text */
  #recipeOverlay #recipeSteps .step {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* General tab body */
  #recipeOverlay .recipePane p,
  #recipeOverlay .recipePane .small {
    font-size: 13px !important;
  }
}

/* =========================================================
   GLOBAL RECIPE POPUP
   Applies to EVERY meal opened in #recipeOverlay
   ========================================================= */

@media (min-width: 851px) {

  /* Entire floating recipe window */
  #recipeOverlay > .sheet {
    width: min(920px, calc(100vw - 64px)) !important;
    max-width: 920px !important;

    height: min(84dvh, 850px) !important;
    max-height: calc(100dvh - 48px) !important;

    margin: auto !important;
  }

  /* Hero */
  #recipeOverlay .recipeHero img {
    height: 355px !important;
  }

  #recipeOverlay #recipeName {
    font-size: clamp(38px, 3vw, 46px) !important;
    line-height: .95 !important;
    font-weight: 900 !important;
  }

  #recipeOverlay #recipeLiked {
    font-size: 13.5px !important;
  }

  /* Four summary boxes */
  #recipeOverlay .recipeStat small {
    font-size: 12px !important;
  }

  #recipeOverlay .recipeStat b {
    font-size: 16px !important;
  }

  /* Sastojci / Priprema / Cena / Ishrana */
  #recipeOverlay .recipeTabs button {
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  /* All recipe tab content */
  #recipeOverlay .recipePane {
    font-size: 14px !important;
  }

  #recipeOverlay .recipePane p,
  #recipeOverlay .recipePane .small {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #recipeOverlay .recipePane h3 {
    font-size: 20px !important;
  }

  /* Ingredients */
  #recipeOverlay .ingredientRow {
    grid-template-columns:
      42px
      minmax(190px, .8fr)
      minmax(340px, 1.5fr) !important;

    gap: 16px !important;
    padding: 14px 0 !important;
  }

  #recipeOverlay .ingredientIcon {
    width: 38px !important;
    height: 38px !important;
  }

  #recipeOverlay .ingredientRow > div:nth-child(2) > b {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  #recipeOverlay .ingredientRow > div:nth-child(2) .small,
  #recipeOverlay .ingredientRow > div:nth-child(2) .muted {
    font-size: 13px !important;
  }

  #recipeOverlay .ingredientDeal {
    min-width: 0 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  #recipeOverlay .ingredientDeal b {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  #recipeOverlay .ingredientDeal span {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Preparation */
  #recipeOverlay .step {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Price comparison */
  #recipeOverlay .priceRow {
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* Nutrition */
  #recipeOverlay .nutri {
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* Bottom actions */
  #recipeOverlay .sheetFooter button {
    font-size: 15px !important;
  }
}

/* Tablet */
@media (min-width: 701px) and (max-width: 850px) {
  #recipeOverlay > .sheet {
    width: calc(100vw - 32px) !important;
    max-width: 780px !important;
  }
}

/* Mobile stays responsive instead of forcing desktop width */
@media (max-width: 700px) {
  #recipeOverlay > .sheet {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }

  #recipeOverlay #recipeName {
    font-size: 31px !important;
  }
}

/* INGREDIENT ICON CLARITY — global */
#recipeOverlay .ingredientIcon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

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

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif !important;

  font-size: 22px !important;
  line-height: 1 !important;

  overflow: hidden !important;
}