/* =========================================================
   MOBIL FEJLÉC – „B” VÁLTOZAT
   Görgetéskor a logóból csak a „CD” monogram marad, a naptár ikon
   pedig „Időpontfoglalás” feliratú gombbá nyílik.

   2026. 10. 01-től ez a végleges mobil fejléc. Csak akkor töltődik be, ha a
   Testreszabóban be van kapcsolva (Egyedi fejléc → Mobil fejléc: B változat).
   Minden szabály a body.hc-mobile-header-b osztályhoz kötött, és csak
   620 px alatt hat (tableten a felirat eleve kiírva látszik).
   Az állapotot a mobile-header-b.js kapcsolja (.hc-b-scrolled).
   Vészkikapcsoló: a kapcsoló kikapcsolása – ez a fájl be sem töltődik.
   ========================================================= */

@media (max-width: 620px) {
    body.hc-mobile-header-b {
        /* Logó magassága; a logókép arányai 877 × 200, a „CD” kör az első ~200 px. */
        --hc-b-logo-h: 40px;
        --hc-b-ease: cubic-bezier(0.4, 0, 0.2, 1);
        --hc-b-dur: 0.45s;
    }

    /* ---------- Logó: teljes → „CD” monogram ---------- */
    body.hc-mobile-header-b .custom-header-inner .custom-header-logo a {
        overflow: hidden;
        max-width: calc(var(--hc-b-logo-h) * 4.4);
        transition: max-width var(--hc-b-dur) var(--hc-b-ease);
    }

    body.hc-mobile-header-b .custom-header-inner .custom-header-logo img {
        height: var(--hc-b-logo-h) !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
    }

    body.hc-mobile-header-b .custom-header-wrapper.hc-b-scrolled .custom-header-logo a {
        max-width: calc(var(--hc-b-logo-h) * 1.04);
    }

    /* ---------- Naptár ikon → „Időpontfoglalás” gomb ---------- */
    body.hc-mobile-header-b .custom-header-wrapper .custom-header-mobile-cta {
        width: auto !important;
        min-width: 46px;
        gap: 0 !important;
        padding: 0 13px !important;
        border-radius: 23px !important;
        transition:
            gap var(--hc-b-dur) var(--hc-b-ease),
            padding var(--hc-b-dur) var(--hc-b-ease),
            transform 0.2s ease;
    }

    body.hc-mobile-header-b .custom-header-wrapper .custom-header-mobile-cta-label {
        display: inline-block !important;
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        white-space: nowrap;
        transition:
            max-width var(--hc-b-dur) var(--hc-b-ease),
            opacity 0.25s ease;
    }

    /* Rövid felirat (a JS teszi be) – alapból rejtve. */
    body.hc-mobile-header-b .custom-header-mobile-cta .hc-b-label-short {
        display: none !important;
    }

    body.hc-mobile-header-b .custom-header-wrapper.hc-b-scrolled .custom-header-mobile-cta {
        gap: 8px !important;
        padding: 0 18px 0 14px !important;
    }

    body.hc-mobile-header-b .custom-header-wrapper.hc-b-scrolled .custom-header-mobile-cta-label {
        max-width: 200px;
        opacity: 1;
        transition:
            max-width var(--hc-b-dur) var(--hc-b-ease),
            opacity 0.3s ease 0.12s;
    }
}

@media (max-width: 380px) {
    body.hc-mobile-header-b {
        --hc-b-logo-h: 36px;
    }
}

@media (max-width: 340px) {
    body.hc-mobile-header-b {
        --hc-b-logo-h: 32px;
    }
}

/* Keskeny kijelzőn a hosszú felirat helyett a rövid („Foglalás” / „Book now”). */
@media (max-width: 374px) {
    body.hc-mobile-header-b .custom-header-mobile-cta.hc-b-has-short .hc-b-label-long {
        display: none !important;
    }

    body.hc-mobile-header-b .custom-header-mobile-cta.hc-b-has-short .hc-b-label-short {
        display: inline-block !important;
    }
}

/* Angolul a hosszú felirat szélesebb, ott előbb vált rövidre. */
@media (max-width: 400px) {
    html[lang^="en"] body.hc-mobile-header-b .custom-header-mobile-cta.hc-b-has-short .hc-b-label-long {
        display: none !important;
    }

    html[lang^="en"] body.hc-mobile-header-b .custom-header-mobile-cta.hc-b-has-short .hc-b-label-short {
        display: inline-block !important;
    }
}

/* Aki csökkentett mozgást kért: váltás animáció nélkül. */
@media (prefers-reduced-motion: reduce) {
    body.hc-mobile-header-b .custom-header-inner .custom-header-logo a,
    body.hc-mobile-header-b .custom-header-wrapper .custom-header-mobile-cta,
    body.hc-mobile-header-b .custom-header-wrapper .custom-header-mobile-cta-label {
        transition: none !important;
    }
}