/* =========================================================
   [BLOCK 01] SAJÁT SZAKÁCSKÖNYV – PULZÁLÓ BELÉPŐ
   VÉGLEGESEN ÚJRAÍRT, TISZTA ALAP
   ---------------------------------------------------------
   Cél:
   - teljesen háttér nélküli megjelenés
   - a teljes kompozíció valódi középre igazítása
   - cím → elhalványuló vonal + pulzáló pont → alcím
   - hoverkor csak a szöveg finom animációja
   - ikon és jobb oldali nyíl elrejtése
   - globális button-stílusok biztonságos felülírása
   ========================================================= */


/* ---------------------------------------------------------
   01/1 – Külső wrapper
   A wrapper maga végzi a valódi középre igazítást.
   --------------------------------------------------------- */
.myg-cookbook-entry {
  position: relative;
  top: -18px;

  width: 100%;

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

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

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

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


/* ---------------------------------------------------------
   01/2 – Teljes kattintható terület
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__btn {
  position: relative;

  width: min(100%, 900px);
  min-height: 124px;

  display: block;

  margin: 0 auto !important;
  padding: 22px 24px !important;

  appearance: none;
  -webkit-appearance: none;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

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

  color: inherit !important;
  text-align: center !important;

  cursor: pointer;
}


/* ---------------------------------------------------------
   01/3 – Minden gombállapot háttér nélkül marad
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__btn:hover,
.myg-cookbook-entry .myg-cookbook-entry__btn:focus,
.myg-cookbook-entry .myg-cookbook-entry__btn:focus-visible,
.myg-cookbook-entry .myg-cookbook-entry__btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;

  color: inherit !important;
  outline: none !important;
}


/* ---------------------------------------------------------
   01/4 – Régi ikon és nyíl elrejtése
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__icon,
.myg-cookbook-entry .myg-cookbook-entry__arrow {
  display: none !important;
}


/* ---------------------------------------------------------
   01/5 – Korábbi gomb-pseudoelemek tiltása
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__btn::before,
.myg-cookbook-entry .myg-cookbook-entry__btn::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   01/6 – Teljes szöveges kompozíció
   FONTOS: width:100%, ezért nem tud tartalomszélességre
   összezsugorodni és balra csúszni.
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__text {
  position: relative;

  width: 100%;
  max-width: 900px;

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

  margin: 0 auto;
  padding: 0 20px;

  text-align: center;

  transform: translateY(0) scale(1);

  transition:
    transform 0.28s ease;
}


/* ---------------------------------------------------------
   01/7 – Főcím
   A teljes rendelkezésre álló szélességet elfoglalja.
   Így a csík a blokk valódi közepéhez igazodik.
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__title {
  position: relative;

  width: 100%;

  display: block;

  margin: 0;
  padding: 0 0 32px;

  color: #3c3835;

  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.18px;

  text-align: center;

  transition:
    color 0.28s ease,
    letter-spacing 0.28s ease;
}


/* ---------------------------------------------------------
   01/8 – Elhalványuló elválasztó vonal
   A teljes címblokk közepéhez igazítva.
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__title::before {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 13px;

  width: min(720px, 72vw);
  height: 1.5px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(237, 117, 42, 0.08) 5%,
      rgba(237, 117, 42, 0.28) 18%,
      rgba(237, 117, 42, 0.62) 38%,
      rgba(237, 117, 42, 0.82) 47%,
      rgba(237, 117, 42, 0.82) 53%,
      rgba(237, 117, 42, 0.62) 62%,
      rgba(237, 117, 42, 0.28) 82%,
      rgba(237, 117, 42, 0.08) 95%,
      transparent 100%
    );

  border-radius: 999px;

  pointer-events: none;
}


/* ---------------------------------------------------------
   01/9 – Pulzáló középső pont
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__title::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 7.5px;

  width: 12px;
  height: 12px;

  transform: translateX(-50%);

  background: #ef762b;
  border-radius: 50%;

  box-shadow:
    0 0 0 0 rgba(239, 118, 43, 0.34);

  animation:
    myg-cookbook-entry-pulse 2.4s ease-out infinite;

  pointer-events: none;
}


/* ---------------------------------------------------------
   01/10 – Alcím
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__subtitle {
  display: block;

  width: 100%;
  max-width: 620px;

  margin: 0 auto;
  padding: 3px 0 0;

  color: #756c65;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;

  text-align: center;

  transition:
    color 0.28s ease;
}


/* ---------------------------------------------------------
   01/11 – Pulzáló animáció
   --------------------------------------------------------- */
@keyframes myg-cookbook-entry-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(239, 118, 43, 0.34);
  }

  55% {
    box-shadow:
      0 0 0 13px rgba(239, 118, 43, 0);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(239, 118, 43, 0);
  }
}


/* ---------------------------------------------------------
   01/12 – Hover: csak a szöveges rész animál
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__btn:hover
.myg-cookbook-entry__text {
  transform: translateY(-2px) scale(1.012);
}

.myg-cookbook-entry .myg-cookbook-entry__btn:hover
.myg-cookbook-entry__title {
  color: #df6f2c;
  letter-spacing: -0.05px;
}

.myg-cookbook-entry .myg-cookbook-entry__btn:hover
.myg-cookbook-entry__subtitle {
  color: #625b55;
}


/* ---------------------------------------------------------
   01/13 – Billentyűzetes fókusz
   --------------------------------------------------------- */
.myg-cookbook-entry .myg-cookbook-entry__btn:focus-visible
.myg-cookbook-entry__title {
  color: #df6f2c;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}


/* =========================================================
   [BLOCK 01 – TABLET]
   ========================================================= */

@media (max-width: 1024px) {

  .myg-cookbook-entry {
    top: -14px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__btn {
    width: min(100%, 760px);
    min-height: 116px;

    padding: 20px !important;
  }

  .myg-cookbook-entry .myg-cookbook-entry__text {
    max-width: 760px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title {
    padding-bottom: 30px;

    font-size: 21px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title::before {
    width: min(600px, 76vw);
  }

  .myg-cookbook-entry .myg-cookbook-entry__subtitle {
    font-size: 14px;
  }
}


/* =========================================================
   [BLOCK 01 – MOBIL]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-entry {
    top: -10px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__btn {
    width: 100%;
    min-height: 112px;

    padding: 18px 10px !important;
  }

  .myg-cookbook-entry .myg-cookbook-entry__text {
    width: 100%;
    max-width: 100%;

    padding: 0 6px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title {
    padding-bottom: 29px;

    font-size: 18px;
    line-height: 1.22;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title::before {
    bottom: 12px;

    width: min(320px, 88vw);
    height: 2px;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(237, 117, 42, 0.15) 7%,
        rgba(237, 117, 42, 0.42) 24%,
        rgba(237, 117, 42, 0.78) 43%,
        rgba(237, 117, 42, 0.88) 50%,
        rgba(237, 117, 42, 0.78) 57%,
        rgba(237, 117, 42, 0.42) 76%,
        rgba(237, 117, 42, 0.15) 93%,
        transparent 100%
      );
  }

  .myg-cookbook-entry .myg-cookbook-entry__title::after {
    bottom: 6.5px;

    width: 12px;
    height: 12px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__subtitle {
    max-width: 300px;

    padding-top: 4px;

    font-size: 13px;
    line-height: 1.4;
  }

  .myg-cookbook-entry .myg-cookbook-entry__btn:hover
  .myg-cookbook-entry__text {
    transform: none;
  }
}


/* =========================================================
   [BLOCK 01 – KIS MOBIL]
   ========================================================= */

@media (max-width: 390px) {

  .myg-cookbook-entry .myg-cookbook-entry__btn {
    min-height: 108px;

    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title {
    font-size: 17px;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title::before {
    width: min(270px, 86vw);
  }

  .myg-cookbook-entry .myg-cookbook-entry__subtitle {
    max-width: 270px;

    font-size: 12.5px;
  }
}


/* =========================================================
   [BLOCK 01 – MOZGÁSCSÖKKENTÉS]
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .myg-cookbook-entry .myg-cookbook-entry__text,
  .myg-cookbook-entry .myg-cookbook-entry__title,
  .myg-cookbook-entry .myg-cookbook-entry__subtitle {
    transition: none !important;
  }

  .myg-cookbook-entry .myg-cookbook-entry__title::after {
    animation: none !important;

    box-shadow:
      0 0 0 6px rgba(239, 118, 43, 0.12);
  }

  .myg-cookbook-entry .myg-cookbook-entry__btn:hover
  .myg-cookbook-entry__text {
    transform: none !important;
  }
}

/* =========================================================
   [BLOCK 02] SAJÁT SZAKÁCSKÖNYV – MODÁL + FORRÁSVÁLASZTÓ
   TISZTÍTOTT, VÉGLEGES VÁLTOZAT
   ---------------------------------------------------------
   Cél:
   - visszafogott, prémium modál
   - kulturált, stabil bezárógomb
   - levegős forrásválasztó kártyák
   - nyilak nélkül, egységes mobilos működéssel
   ========================================================= */


/* ---------------------------------------------------------
   02/1 – Modál alap
   --------------------------------------------------------- */
.myg-cookbook-modal__dialog {
  width: min(92vw, 660px);
  max-height: min(88vh, 820px);

  display: flex;
  flex-direction: column;

  margin: 0 auto;

  background: #fffdfb;
  border: 1px solid rgba(104, 82, 65, 0.11);
  border-radius: 20px;

  box-shadow:
    0 22px 55px rgba(45, 35, 27, 0.18),
    0 7px 18px rgba(45, 35, 27, 0.08);

  overflow: hidden;
}


/* ---------------------------------------------------------
   02/2 – Fejléc
   --------------------------------------------------------- */
.myg-cookbook-modal__header {
  position: relative;

  min-height: 68px;

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

  padding: 16px 68px;

  background: #fffdfb;
  border-bottom: 1px solid rgba(104, 82, 65, 0.09);
}


/* ---------------------------------------------------------
   02/3 – Modál főcím
   --------------------------------------------------------- */
.myg-cookbook-modal__title {
  margin: 0;

  color: #393532;

  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2px;

  text-align: center;
}


/* ---------------------------------------------------------
   02/4 – Bezárógomb
   --------------------------------------------------------- */
.myg-cookbook-modal__close {
  position: absolute;
  top: 16px !important;
  right: 18px !important;

  width: 36px;
  height: 36px;

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

  margin: 0;
  padding: 0;

  transform: none !important;

  appearance: none;
  -webkit-appearance: none;

  background: transparent !important;
  border: 1px solid rgba(104, 82, 65, 0.17) !important;
  border-radius: 50% !important;
  box-shadow: none !important;

  color: #746b64 !important;

  font-size: 0;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.myg-cookbook-modal__close::before,
.myg-cookbook-modal__close::after {
  content: "";

  position: absolute;

  width: 14px;
  height: 1.5px;

  background: currentColor;
  border-radius: 99px;
}

.myg-cookbook-modal__close::before {
  transform: rotate(45deg);
}

.myg-cookbook-modal__close::after {
  transform: rotate(-45deg);
}

.myg-cookbook-modal__close:hover {
  color: #e9722d !important;
  background: rgba(239, 118, 43, 0.055) !important;
  border-color: rgba(239, 118, 43, 0.30) !important;
  transform: none !important;
}

.myg-cookbook-modal__close:focus {
  outline: none;
}

.myg-cookbook-modal__close:focus-visible {
  outline: 3px solid rgba(239, 118, 43, 0.18);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   02/5 – Modál belső tartalom
   --------------------------------------------------------- */
.myg-cookbook-modal__body {
  min-height: 0;
  overflow-y: auto;

  padding: 28px 34px 32px;

  background: #fffdfb;
}


/* ---------------------------------------------------------
   02/6 – Forrásválasztó lépés
   --------------------------------------------------------- */
.myg-cookbook-step--source {
  width: 100%;
  max-width: 560px;

  margin: 0 auto;

  text-align: center;
}

.myg-cookbook-step--source .myg-cookbook-step__lead {
  margin: 0 0 25px !important;

  color: #403b37;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.1px;

  text-align: center;
}


/* ---------------------------------------------------------
   02/7 – Forrásválasztó kártyák
   --------------------------------------------------------- */
.myg-cookbook-source-options {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 16px !important;
}

.myg-cookbook-source-options .myg-cookbook-source-btn {
  position: relative;

  width: 100%;
  min-height: 96px !important;

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

  gap: 7px !important;

  margin: 0;
  padding: 21px 26px !important;

  appearance: none;
  -webkit-appearance: none;

  background: #fffdfb !important;
  border: 1px solid rgba(169, 126, 91, 0.18) !important;
  border-radius: 14px !important;

  box-shadow:
    0 5px 14px rgba(72, 52, 38, 0.045),
    0 1px 4px rgba(72, 52, 38, 0.025) !important;

  color: #393430 !important;
  line-height: normal !important;
  text-align: center;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

/* A forrásválasztó kártyákon nincs jobb oldali nyíl. */
.myg-cookbook-source-btn::after {
  content: none !important;
  display: none !important;
}

.myg-cookbook-source-btn:hover {
  transform: translateY(-1px);

  background: #fff9f3 !important;
  border-color: rgba(239, 118, 43, 0.30) !important;

  box-shadow:
    0 9px 21px rgba(72, 52, 38, 0.075),
    0 3px 7px rgba(72, 52, 38, 0.035) !important;
}

.myg-cookbook-source-btn:focus {
  outline: none;
}

.myg-cookbook-source-btn:focus-visible {
  outline: 3px solid rgba(239, 118, 43, 0.17);
  outline-offset: 2px;

  border-color: rgba(239, 118, 43, 0.38) !important;
}

.myg-cookbook-source-btn__title,
.myg-cookbook-source-btn__desc {
  width: 100%;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;
}

.myg-cookbook-source-btn__title {
  display: block;

  margin-top: 0;
  margin-bottom: 0;

  color: #393430;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.08px;
}

.myg-cookbook-source-btn__desc {
  display: block;

  max-width: 440px;

  margin-top: 0;
  margin-bottom: 0;

  color: #7a716a;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}


/* =========================================================
   [BLOCK 02 – TABLET]
   ========================================================= */

@media (max-width: 900px) {

  .myg-cookbook-modal__dialog {
    width: min(94vw, 640px);
    border-radius: 18px;
  }

  .myg-cookbook-modal__header {
    min-height: 64px;
    padding: 15px 62px;
  }

  .myg-cookbook-modal__title {
    font-size: 21px;
  }

  .myg-cookbook-modal__close {
    top: 15px !important;
    right: 15px !important;

    width: 34px;
    height: 34px;
  }

  .myg-cookbook-modal__body {
    padding: 25px 27px 29px;
  }

  .myg-cookbook-source-options {
    gap: 14px !important;
  }

  .myg-cookbook-source-options .myg-cookbook-source-btn {
    min-height: 92px !important;
    padding: 19px 23px !important;
    gap: 6px !important;
  }
}


/* =========================================================
   [BLOCK 02 – MOBIL]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-modal__dialog {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
    border-radius: 16px;
  }

  .myg-cookbook-modal__header {
    min-height: 60px;

    justify-content: flex-start;

    padding: 14px 52px 14px 17px;
  }

  .myg-cookbook-modal__title {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
  }

  .myg-cookbook-modal__close {
    top: 14px !important;
    right: 12px !important;

    width: 32px;
    height: 32px;
  }

  .myg-cookbook-modal__close::before,
  .myg-cookbook-modal__close::after {
    width: 12px;
  }

  .myg-cookbook-modal__body {
    padding: 23px 15px 25px;
  }

  .myg-cookbook-step--source .myg-cookbook-step__lead {
    margin-bottom: 20px !important;
    font-size: 16px;
  }

  .myg-cookbook-source-options {
    gap: 12px !important;
  }

  .myg-cookbook-source-options .myg-cookbook-source-btn {
    min-height: 88px !important;
    padding: 17px 16px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }

  .myg-cookbook-source-btn__title {
    font-size: 15px;
  }

  .myg-cookbook-source-btn__desc {
    max-width: 290px;
    font-size: 12.5px;
  }
}


/* =========================================================
   [BLOCK 02 – KIS MOBIL]
   ========================================================= */

@media (max-width: 390px) {

  .myg-cookbook-modal__dialog {
    width: calc(100vw - 14px);
  }

  .myg-cookbook-modal__header {
    padding-left: 15px;
  }

  .myg-cookbook-modal__body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .myg-cookbook-source-btn__title {
    font-size: 14.5px;
  }

  .myg-cookbook-source-btn__desc {
    font-size: 12px;
  }
}


/* =========================================================
   [BLOCK 02 – MOZGÁSCSÖKKENTÉS]
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .myg-cookbook-modal__close,
  .myg-cookbook-source-btn {
    transition: none !important;
  }

  .myg-cookbook-source-btn:hover {
    transform: none !important;
  }
}


/* =========================================================
   [BLOCK 03] TARTALOMJEGYZÉK – KATEGÓRIASOR
   TISZTÍTOTT, VÉGLEGES VÁLTOZAT
   ---------------------------------------------------------
   Cél:
   - egy soros, levegős kategóriafej
   - kompakt, balra igazított kategóriagomb
   - jól látható saját checkbox
   - szabályos 2 × 3 pontos fogantyú
   - egyetlen desktop/tablet/mobil/kis mobil szabálykészlet
   ========================================================= */


/* ---------------------------------------------------------
   03/1 – Lista alaphelyzetbe állítása
   --------------------------------------------------------- */
.myg-cookbook-toc__list,
.myg-cookbook-toc__item {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;

  list-style: none !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   03/2 – Kategóriasor szerkezete
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-header {
  position: relative;

  width: 100%;

  display: grid;
  grid-template-columns:
    24px
    minmax(0, 220px)
    minmax(130px, 1fr)
    44px;

  align-items: center;
  column-gap: 14px;

  min-height: 72px;

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

  background: rgba(255, 255, 255, 0.55);

  border: 0;
  border-bottom: 1px solid rgba(91, 76, 64, 0.12);

  box-sizing: border-box;
}

.myg-cookbook-toc__item:last-child >
.myg-cookbook-toc__cat-header {
  border-bottom: 0;
}


/* ---------------------------------------------------------
   03/3 – Saját kategória-checkbox
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-checkbox {
  position: relative;

  width: 22px;
  height: 22px;

  display: block;

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

  justify-self: start;

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

  background-color: #ffffff;
  background-image: none !important;

  border: 1.5px solid rgba(255, 126, 47, 0.65);
  border-radius: 6px;

  box-shadow: 0 2px 5px rgba(71, 52, 38, 0.06);

  cursor: pointer;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.myg-cookbook-toc__cat-checkbox::before,
.myg-cookbook-toc__cat-checkbox::after {
  content: none !important;
  display: none !important;
}

.myg-cookbook-toc__cat-checkbox:checked {
  background-color: #ff7e2f !important;
  border-color: #ff7e2f !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.3l3.1 3.1L15 6.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

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

  box-shadow: 0 3px 8px rgba(255, 126, 47, 0.22);
}

.myg-cookbook-toc__cat-checkbox:hover {
  border-color: #ff7e2f;
}

.myg-cookbook-toc__cat-checkbox:focus-visible {
  outline: 3px solid rgba(255, 126, 47, 0.20);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   03/4 – Kategória lenyitógomb
   --------------------------------------------------------- */
.myg-cookbook-toc__toggle {
  min-width: 0;
  width: 100%;
  max-width: 210px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;

  margin: 0 !important;
  padding: 11px 12px 11px 15px !important;

  appearance: none;
  -webkit-appearance: none;

  background: rgba(255, 255, 255, 0.92) !important;
  border: 0 !important;
  border-radius: 12px !important;

  box-shadow:
    0 4px 13px rgba(58, 43, 32, 0.055),
    0 1px 4px rgba(58, 43, 32, 0.025) !important;

  color: #38332f !important;
  text-align: left !important;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.myg-cookbook-toc__toggle:hover {
  background: #fff8f2 !important;

  box-shadow:
    0 7px 17px rgba(58, 43, 32, 0.075),
    0 2px 5px rgba(58, 43, 32, 0.035) !important;

  transform: translateY(-1px);
}

.myg-cookbook-toc__toggle:focus {
  outline: none;
}

.myg-cookbook-toc__toggle:focus-visible {
  outline: 3px solid rgba(255, 126, 47, 0.17);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   03/5 – Kategórianév, darabszám és nyíl
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-name {
  min-width: 0;
  flex: 1 1 auto;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #3a3531;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;

  text-align: left !important;
}

.myg-cookbook-toc__cat-count {
  flex: 0 0 auto;

  margin-left: auto;

  color: #ff7427;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.myg-cookbook-toc__chevron {
  flex: 0 0 auto;

  margin-left: 2px;

  color: #776f69;

  font-size: 9px;
  line-height: 1;

  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.myg-cookbook-toc__toggle[aria-expanded="true"]
.myg-cookbook-toc__chevron {
  color: #e9722d;
  transform: rotate(180deg);
}


/* ---------------------------------------------------------
   03/6 – Kiválasztottsági állapot
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-selected {
  min-width: 0;
  width: 100%;

  display: block;

  margin: 0;
  padding: 0 4px;

  color: #746c66;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.25;

  white-space: nowrap;
  text-align: left;
}


/* ---------------------------------------------------------
   03/7 – Fel/le mozgatógombok vizuális elrejtése
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-header >
.myg-cookbook-toc__move {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ---------------------------------------------------------
   03/8 – Kategória mozgatófogantyú
   --------------------------------------------------------- */
.myg-cookbook-toc__cat-drag {
  position: relative;

  width: 42px;
  height: 44px;

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

  justify-self: end;

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

  appearance: none;
  -webkit-appearance: none;

  background: rgba(255, 255, 255, 0.90) !important;
  border: 0 !important;
  border-radius: 11px !important;

  box-shadow:
    0 4px 12px rgba(58, 43, 32, 0.06),
    0 1px 4px rgba(58, 43, 32, 0.025) !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  cursor: grab;

  box-sizing: border-box;
  overflow: hidden;
}

.myg-cookbook-toc__cat-drag::before,
.myg-cookbook-toc__cat-drag::after {
  content: none !important;
  display: none !important;
}

.myg-cookbook-toc__cat-drag::before {
  content: "" !important;

  position: absolute;
  top: 50%;
  left: 50%;

  display: block !important;

  width: 3px;
  height: 3px;

  transform: translate(-5px, -8px);

  background: #968e88;
  border-radius: 50%;

  box-shadow:
    0 7px 0 #968e88,
    0 14px 0 #968e88,
    7px 0 0 #968e88,
    7px 7px 0 #968e88,
    7px 14px 0 #968e88;
}

.myg-cookbook-toc__cat-drag:hover {
  background: #fff8f2 !important;
}

.myg-cookbook-toc__cat-drag:active {
  cursor: grabbing;
}


/* =========================================================
   [BLOCK 03 – TABLET]
   ========================================================= */

@media (max-width: 900px) {

  .myg-cookbook-toc__cat-header {
    grid-template-columns:
      23px
      minmax(0, 202px)
      minmax(110px, 1fr)
      40px;

    column-gap: 11px;
    min-height: 70px;
    padding: 9px 10px !important;
  }

  .myg-cookbook-toc__toggle {
    max-width: 202px;
    padding-left: 13px !important;
    padding-right: 10px !important;
  }

  .myg-cookbook-toc__cat-name {
    font-size: 14.5px;
  }

  .myg-cookbook-toc__cat-count {
    font-size: 13.5px;
  }

  .myg-cookbook-toc__cat-selected {
    font-size: 11.5px;
  }

  .myg-cookbook-toc__cat-drag {
    width: 38px;
    height: 42px;
  }
}


/* =========================================================
   [BLOCK 03 – MOBIL]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-toc__cat-header {
    grid-template-columns:
      20px
      minmax(0, 156px)
      minmax(98px, 1fr)
      36px;

    column-gap: 7px;
    min-height: 66px;
    padding: 7px 6px !important;
  }

  .myg-cookbook-toc__cat-checkbox {
    width: 19px;
    height: 19px;
    border-radius: 5px;
  }

  .myg-cookbook-toc__cat-checkbox:checked {
    background-size: 15px 15px !important;
  }

  .myg-cookbook-toc__toggle {
    max-width: 156px;
    gap: 4px;
    padding: 9px 8px 9px 10px !important;
    border-radius: 10px !important;
  }

  .myg-cookbook-toc__cat-name {
    font-size: 13.5px;
  }

  .myg-cookbook-toc__cat-count {
    font-size: 13px;
  }

  .myg-cookbook-toc__chevron {
    font-size: 8px;
  }

  .myg-cookbook-toc__cat-selected {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10.5px;
  }

  .myg-cookbook-toc__cat-drag {
    width: 34px;
    height: 40px;
    border-radius: 9px !important;
  }

  .myg-cookbook-toc__cat-drag::before {
    width: 2.5px;
    height: 2.5px;

    transform: translate(-4px, -7px);

    box-shadow:
      0 6px 0 #968e88,
      0 12px 0 #968e88,
      6px 0 0 #968e88,
      6px 6px 0 #968e88,
      6px 12px 0 #968e88;
  }
}


/* =========================================================
   [BLOCK 03 – KIS MOBIL]
   ========================================================= */

@media (max-width: 390px) {

  .myg-cookbook-toc__cat-header {
    grid-template-columns:
      18px
      minmax(0, 150px)
      minmax(84px, 1fr)
      32px;

    column-gap: 5px;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .myg-cookbook-toc__cat-checkbox {
    width: 17px;
    height: 17px;
  }

  .myg-cookbook-toc__cat-checkbox:checked {
    background-size: 14px 14px !important;
  }

  .myg-cookbook-toc__toggle {
    max-width: 150px;
    padding-left: 8px !important;
    padding-right: 7px !important;
  }

  .myg-cookbook-toc__cat-name {
    font-size: 13px;
  }

  .myg-cookbook-toc__cat-count {
    font-size: 12.5px;
  }

  .myg-cookbook-toc__cat-selected {
    font-size: 10px;
  }

  .myg-cookbook-toc__cat-drag {
    width: 31px;
    height: 38px;
  }
}


/* =========================================================
   [BLOCK 03 – MOBIL FOOTER]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-modal__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 18px;

    text-align: center;
  }

  .myg-cookbook-modal__total {
    width: 100%;

    margin: 0 auto;

    text-align: center;
  }

  .myg-cookbook-modal__next {
    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center;
  }
}

@media (max-width: 390px) {

  .myg-cookbook-modal__footer {
    gap: 16px;
  }
}


/* =========================================================
   [BLOCK 03 – MOZGÁSCSÖKKENTÉS]
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .myg-cookbook-toc__cat-checkbox,
  .myg-cookbook-toc__toggle,
  .myg-cookbook-toc__chevron {
    transition: none !important;
  }

  .myg-cookbook-toc__toggle:hover {
    transform: none !important;
  }
}


/* =========================================================
   [BLOCK 04] TARTALOMJEGYZÉK – RECEPTSOR FINOMHANGOLÁSA
   ---------------------------------------------------------
   Cél:
   - a recept fogantyúja egyezzen a kategória fogantyújával
   - ne foglaljon indokolatlanul széles helyet
   - a receptnév kapja meg a fennmaradó szélességet
   - mobilon a receptnév legyen kissé kisebb, szolidabb
   - asztali recept-tipográfia változatlan maradjon
   ========================================================= */


/* ---------------------------------------------------------
   04/1 – Receptsor alapelrendezése
   Checkbox | receptnév | fogantyú
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe {
  width: 100%;

  display: grid;
  grid-template-columns:
    24px
    minmax(0, 1fr)
    44px;

  align-items: center;
  column-gap: 14px;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   04/2 – Receptnév
   A rendelkezésre álló helyet használja, hosszú címnél
   kulturáltan három ponttal rövidül.
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe-name {
  min-width: 0;
  width: 100%;

  display: block;

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


/* ---------------------------------------------------------
   04/3 – Fel/le mozgatógombok vizuális elrejtése
   A funkció és az akadálymentes vezérlés megmarad.
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe >
.myg-cookbook-toc__move {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ---------------------------------------------------------
   04/4 – Recept fogantyúdoboz
   Mérete és stílusa megegyezik a kategória fogantyújával.
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe-drag {
  position: relative;

  width: 42px !important;
  height: 44px !important;

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

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

  justify-self: end;

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

  appearance: none;
  -webkit-appearance: none;

  background: rgba(255, 255, 255, 0.90) !important;

  border: 0 !important;
  border-radius: 11px !important;

  box-shadow:
    0 4px 12px rgba(58, 43, 32, 0.06),
    0 1px 4px rgba(58, 43, 32, 0.025) !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  cursor: grab;

  box-sizing: border-box;
  overflow: hidden;
}


/* ---------------------------------------------------------
   04/5 – A HTML-ben lévő eredeti ⋮⋮ eltüntetése
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe-drag::before,
.myg-cookbook-toc__recipe-drag::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   04/6 – Szabályos 2 × 3 pontos recept-fogantyú
   --------------------------------------------------------- */
.myg-cookbook-toc__recipe-drag::before {
  content: "" !important;

  position: absolute;
  top: 50%;
  left: 50%;

  display: block !important;

  width: 3px;
  height: 3px;

  transform: translate(-5px, -8px);

  background: #968e88;
  border-radius: 50%;

  box-shadow:
    0 7px 0 #968e88,
    0 14px 0 #968e88,
    7px 0 0 #968e88,
    7px 7px 0 #968e88,
    7px 14px 0 #968e88;
}


.myg-cookbook-toc__recipe-drag:hover {
  background: #fff8f2 !important;
}


.myg-cookbook-toc__recipe-drag:active {
  cursor: grabbing;
}


/* =========================================================
   [BLOCK 04 – TABLET]
   ========================================================= */

@media (max-width: 900px) {

  .myg-cookbook-toc__recipe {
    grid-template-columns:
      23px
      minmax(0, 1fr)
      40px;

    column-gap: 11px;
  }

  .myg-cookbook-toc__recipe-drag {
    width: 38px !important;
    height: 42px !important;

    min-width: 38px !important;
    max-width: 38px !important;
  }
}


/* =========================================================
   [BLOCK 04 – MOBIL]
   ---------------------------------------------------------
   Mobilon a receptcím legyen finomabb és több helyet kapjon.
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-toc__recipe {
    grid-template-columns:
      20px
      minmax(0, 1fr)
      36px;

    column-gap: 8px;
  }

  .myg-cookbook-toc__recipe-name {
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.35;
  }

  .myg-cookbook-toc__recipe-drag {
    width: 34px !important;
    height: 40px !important;

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

    border-radius: 9px !important;
  }

  .myg-cookbook-toc__recipe-drag::before {
    width: 2.5px;
    height: 2.5px;

    transform: translate(-4px, -7px);

    box-shadow:
      0 6px 0 #968e88,
      0 12px 0 #968e88,
      6px 0 0 #968e88,
      6px 6px 0 #968e88,
      6px 12px 0 #968e88;
  }
}


/* =========================================================
   [BLOCK 04 – KIS MOBIL]
   ========================================================= */

@media (max-width: 390px) {

  .myg-cookbook-toc__recipe {
    grid-template-columns:
      18px
      minmax(0, 1fr)
      32px;

    column-gap: 7px;
  }

  .myg-cookbook-toc__recipe-name {
    font-size: 12.5px !important;
  }

  .myg-cookbook-toc__recipe-drag {
    width: 31px !important;
    height: 38px !important;

    min-width: 31px !important;
    max-width: 31px !important;
  }
}

/* =========================================================
   [BLOCK 05] BORÍTÓ-ELŐNÉZET – MÉRET ÉS IGAZÍTÁS
   ---------------------------------------------------------
   Cél:
   - nagyobb borító-előnézet asztali nézetben
   - A4-es álló oldalarány megtartása
   - a borító alatti szövegek és gombok ugyanahhoz
     a szélességhez igazodjanak
   - mobilon maradjon reszponzív
   ========================================================= */


/* ---------------------------------------------------------
   05/1 – A teljes borítós lépés középre rendezése
   --------------------------------------------------------- */
.myg-cookbook-step--cover {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   05/2 – Borító-előnézet
   Az új kép URL-jét a meglévő background-image szabályban
   kell majd lecserélni.
   --------------------------------------------------------- */
.myg-cookbook-cover {
  width: min(100%, 500px) !important;
  max-width: 500px !important;

  aspect-ratio: 2480 / 3508;

  margin-left: auto !important;
  margin-right: auto !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   05/3 – A borító alatti súgószöveg
   Ne nyúljon túl a borító szélességén.
   --------------------------------------------------------- */
.myg-cookbook-cover__hint {
  width: min(100%, 500px);
  max-width: 500px;

  margin:
    16px
    auto
    0;

  padding: 0 8px;

  box-sizing: border-box;

  text-align: center;
}


/* ---------------------------------------------------------
   05/4 – Kiválasztott receptek száma
   --------------------------------------------------------- */
.myg-cookbook-cover__text,
.myg-cookbook-cover__error {
  width: min(100%, 500px);
  max-width: 500px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 8px;
  padding-right: 8px;

  box-sizing: border-box;

  text-align: center;
}


/* ---------------------------------------------------------
   05/5 – Borító alatti műveleti gombok
   --------------------------------------------------------- */
.myg-cookbook-cover__actions {
  width: min(100%, 500px);
  max-width: 500px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* =========================================================
   [BLOCK 05 – TABLET]
   ========================================================= */

@media (max-width: 900px) {

  .myg-cookbook-cover {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
  }

  .myg-cookbook-cover__hint,
  .myg-cookbook-cover__text,
  .myg-cookbook-cover__error,
  .myg-cookbook-cover__actions {
    width: min(100%, 470px);
    max-width: 470px;
  }
}


/* =========================================================
   [BLOCK 05 – MOBIL]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-step--cover {
    padding-left: 12px;
    padding-right: 12px;
  }

  .myg-cookbook-cover {
    width: 100% !important;
    max-width: 390px !important;
  }

  .myg-cookbook-cover__hint,
  .myg-cookbook-cover__text,
  .myg-cookbook-cover__error,
  .myg-cookbook-cover__actions {
    width: 100%;
    max-width: 390px;
  }

  .myg-cookbook-cover__hint {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* =========================================================
   [BLOCK 06] BORÍTÓ-ELŐNÉZET – ÚJ HÁTTÉRKÉP
   ---------------------------------------------------------
   Az adminban beállított végleges borító megjelenítése
   a szakácskönyv webes előnézetében.
   ========================================================= */

.myg-cookbook-cover {
  background-image:
    url("https://mygasztro.hu/wp-content/uploads/szakacskonyv-borito.png")
    !important;

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

/* =========================================================
   [BLOCK 06] BORÍTÓ – MŰVELETI GOMBOK EGYSÉGESÍTÉSE
   ---------------------------------------------------------
   Cél:
   - a két gomb azonos méretű és szélességű legyen
   - az elsődleges gomb maradjon narancssárga
   - a vissza gomb fehér, finom narancssárga keretet kapjon
   - egységes tipográfia, lekerekítés és térköz
   - asztalon és mobilon is rendezett megjelenés
   ========================================================= */


/* ---------------------------------------------------------
   06/1 – A két gomb közös konténere
   --------------------------------------------------------- */
.myg-cookbook-cover__actions {
  width: min(100%, 500px);

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 12px;

  margin: 24px auto 0;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   06/2 – Közös gombalap
   --------------------------------------------------------- */
.myg-cookbook-cover__actions
.myg-btn {
  width: 100%;
  min-height: 54px;

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

  margin: 0 !important;
  padding: 13px 22px !important;

  border-radius: 12px !important;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;

  box-sizing: border-box;

  cursor: pointer;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* ---------------------------------------------------------
   06/3 – Elsődleges gomb
   Szakácskönyv létrehozása
   --------------------------------------------------------- */
.myg-cookbook-cover__create {
  background: #ff7e2f !important;

  border: 1px solid #ff7e2f !important;

  color: #ffffff !important;

  box-shadow:
    0 7px 16px rgba(255, 126, 47, 0.20),
    0 2px 5px rgba(72, 48, 31, 0.08) !important;
}


.myg-cookbook-cover__create:hover {
  background: #f57124 !important;
  border-color: #f57124 !important;

  color: #ffffff !important;

  box-shadow:
    0 9px 20px rgba(255, 126, 47, 0.26),
    0 3px 7px rgba(72, 48, 31, 0.10) !important;

  transform: translateY(-1px);
}


.myg-cookbook-cover__create:active {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   06/4 – Másodlagos gomb
   Vissza a tartalomjegyzékhez
   --------------------------------------------------------- */
.myg-cookbook-cover__back {
  background: #ffffff !important;

  border: 1px solid rgba(255, 126, 47, 0.58) !important;

  color: #e86f28 !important;

  box-shadow:
    0 5px 13px rgba(63, 47, 36, 0.06),
    0 1px 4px rgba(63, 47, 36, 0.03) !important;
}


.myg-cookbook-cover__back:hover {
  background: #fff8f2 !important;

  border-color: #ff7e2f !important;

  color: #d9611d !important;

  box-shadow:
    0 7px 16px rgba(255, 126, 47, 0.12),
    0 2px 5px rgba(63, 47, 36, 0.05) !important;

  transform: translateY(-1px);
}


.myg-cookbook-cover__back:active {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   06/5 – Billentyűzetes fókusz
   --------------------------------------------------------- */
.myg-cookbook-cover__actions
.myg-btn:focus {
  outline: none;
}


.myg-cookbook-cover__actions
.myg-btn:focus-visible {
  outline: 3px solid rgba(255, 126, 47, 0.22);
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   06/6 – Letiltott / betöltési állapot
   --------------------------------------------------------- */
.myg-cookbook-cover__actions
.myg-btn:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none !important;

  box-shadow: none !important;
}


/* =========================================================
   [BLOCK 06 – MOBIL]
   ========================================================= */

@media (max-width: 600px) {

  .myg-cookbook-cover__actions {
    width: 100%;
    max-width: 390px;

    gap: 10px;

    margin-top: 22px;
  }

  .myg-cookbook-cover__actions
  .myg-btn {
    min-height: 52px;

    padding: 12px 16px !important;

    font-size: 15px;

    border-radius: 11px !important;
  }
}


/* =========================================================
   [BLOCK 06 – KIS MOBIL]
   ========================================================= */

@media (max-width: 390px) {

  .myg-cookbook-cover__actions
  .myg-btn {
    min-height: 50px;

    font-size: 14.5px;
  }
}


/* =========================================================
   [BLOCK 06 – MOZGÁSCSÖKKENTÉS]
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .myg-cookbook-cover__actions
  .myg-btn {
    transition: none !important;
  }

  .myg-cookbook-cover__actions
  .myg-btn:hover {
    transform: none !important;
  }
}

/* ==========================================================
   Szakácskönyv – Borító előnézet igazítása a PDF-hez
   Csak az előnézeti címet mozgatja feljebb.
   ========================================================== */

.myg-cookbook-cover__title{
    position: relative;
    top: -24px;
}