/*
 * Halloween — сезонний вигляд сайту. Підключається лише коли в «Nastavení šablony» увімкнено
 * Halloween design (body.is-halloween), див. wssEnqueueHalloweenStyles() у functions.php.
 * Макет: Figma UEFurmtoGa7FrVskXib3dI, головна 2217:5611, елементи 2261:1403.
 *
 * Блоки головної вибрано за Elementor ID: у cs (103) і en (1213) вони здебільшого спільні,
 * де різні — вказано обидва.
 */

/*------------------ кнопки (весь сайт) -------------------*/

.is-halloween .elementor-widget-button .elementor-button,
.is-halloween .wpcf7-submit {
    background-color: #FB8E28 !important;
    background-image: none !important;
    border-color: #FB8E28 !important;
    color: #FFFFFF !important;
}

.is-halloween .elementor-widget-button .elementor-button:hover,
.is-halloween .elementor-widget-button .elementor-button:focus,
.is-halloween .wpcf7-submit:hover {
    background-color: #E07816 !important;
    border-color: #E07816 !important;
}

/* службове посилання у футері лишається як є */
.is-halloween .hidden-topranker-link .elementor-button {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* у CTA та блоці інтер'єру кнопка з білою рамкою */
.is-halloween .elementor-element-26475759 .elementor-button,
.is-halloween .elementor-element-d73e6ae .elementor-button,
.is-halloween .elementor-element-3cb1f228 .elementor-button {
    border-color: #FFFFFF !important;
}

/*------------------ хедер: павук під логотипом (весь сайт) -------------------*/

.is-halloween .elementor-location-header .elementor-widget-image {
    position: relative;
}

.is-halloween .elementor-location-header .elementor-widget-image::after {
    content: '';
    position: absolute;
    left: 49px;
    top: 50px;
    width: 55px;
    height: 100px;
    background: url('../img/halloween/header-spider.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* контейнери шапки мають z-index: 99, тож павук завжди над вмістом сторінки —
   хлібні крихти піднімаємо над ним, щоб павук їх не перекривав */
.is-halloween .rank-math-breadcrumb {
    position: relative;
    z-index: 100;
}

/*------------------ головна: фонове фото замість відео -------------------*/
/* Як у макеті: фото — фіксований фон на весь екран під усією сторінкою, контент іде одразу під шапкою
   і прокручується поверх фото. Блок відео (.video-banner-wrapper) місця в потоці не займає. */

.is-halloween .video-banner-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* оверлеї відео з wss.css (затемнення при скролі, мобільний) не потрібні */
.is-halloween .video-banner-wrapper::after {
    display: none;
}

.is-halloween .video-banner-wrapper .elementor-widget-video,
.is-halloween .video-banner-wrapper .elementor-widget-container {
    width: 100%;
    height: 100%;
}

.is-halloween .halloween-banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.is-halloween .halloween-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.is-halloween .halloween-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.55);
    pointer-events: none;
}

/* шапка головної прозора — фото видно під нею, як у макеті */
.is-halloween.home .elementor-location-header .e-con {
    background-color: transparent !important;
    background-image: none !important;
}

/*------------------ головна: hero -------------------*/

/* ID у різних БД різні (на dev інші) — запасний селектор: контейнер з єдиним h1 головної */
.is-halloween .elementor-element-b5fdd2b,
.is-halloween .elementor-element-60774bd,
.is-halloween.home .e-con:has(> .elementor-widget-heading h1.elementor-heading-title) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), url('../img/halloween/hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/*------------------ головна: картки цін (гарбуз / павук / кажан) -------------------*/

.is-halloween .discount-block {
    overflow: hidden;
    isolation: isolate;
}

.is-halloween .discount-block::before {
    content: '';
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.is-halloween .discount-block:nth-child(3n+1)::before {
    right: -36px;
    top: 53px;
    width: 145px;
    height: 130px;
    background-image: url('../img/halloween/price-pumpkin.webp');
    mix-blend-mode: screen;
    opacity: 0.6;
}

.is-halloween .discount-block:nth-child(3n+2)::before {
    right: -65px;
    top: 41px;
    width: 239px;
    height: 157px;
    background-image: url('../img/halloween/price-spider.webp');
    mix-blend-mode: lighten;
    opacity: 0.8;
}

.is-halloween .discount-block:nth-child(3n)::before {
    right: -131px;
    top: 50px;
    width: 324px;
    height: 139px;
    background-image: url('../img/halloween/price-bat.webp');
    mix-blend-mode: difference;
    opacity: 0.6;
}

/*------------------ головна: кнопка «Všechny masérky» з павуками -------------------*/

.is-halloween .elementor-element-86b9f0a .elementor-button {
    position: relative;
    overflow: visible;
    padding-left: 44px;
    padding-right: 44px;
    white-space: nowrap;
}

.is-halloween .elementor-element-86b9f0a .elementor-button::before,
.is-halloween .elementor-element-86b9f0a .elementor-button::after {
    content: '';
    position: absolute;
    width: 29px;
    height: 32px;
    background: no-repeat center / contain;
    pointer-events: none;
}

.is-halloween .elementor-element-86b9f0a .elementor-button::before {
    left: 7px;
    top: 5.5px;
    background-image: url('../img/halloween/button-spider-left.svg');
    transform: rotate(132.93deg);
}

.is-halloween .elementor-element-86b9f0a .elementor-button::after {
    right: 5px;
    top: 4.5px;
    background-image: url('../img/halloween/button-spider-right.svg');
    transform: rotate(-157.25deg);
}

/*------------------ головна: «Proč přijít…» — гарбузи в картках 1, 3, 5 -------------------*/

.is-halloween .my-icon-sec > .e-con-inner > .e-con:nth-child(odd) > .e-con {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.is-halloween .my-icon-sec > .e-con-inner > .e-con:nth-child(odd) > .e-con::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 121px;
    height: 107px;
    background: url('../img/halloween/why-pumpkin.webp') no-repeat right bottom / contain;
    mix-blend-mode: lighten;
    pointer-events: none;
}

/*------------------ головна: картки масажів — павуки в нижніх кутах -------------------*/

.is-halloween .elementor-element-4f68bbbe .elementor-post__card {
    position: relative;
    overflow: hidden;
}

.is-halloween .elementor-element-4f68bbbe .elementor-post__card::before,
.is-halloween .elementor-element-4f68bbbe .elementor-post__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 68px;
    height: 73px;
    background: url('../img/halloween/card-spider.svg') no-repeat left bottom / contain;
    pointer-events: none;
    z-index: 0;
}

.is-halloween .elementor-element-4f68bbbe .elementor-post__text {
    position: relative;
    z-index: 1;
}

.is-halloween .elementor-element-4f68bbbe .elementor-post__card::before {
    left: 0;
}

.is-halloween .elementor-element-4f68bbbe .elementor-post__card::after {
    right: 0;
    transform: scaleX(-1);
}

/*------------------ головна: CTA з хелловінськими фото -------------------*/

.is-halloween .elementor-element-5f0af99,
.is-halloween .elementor-element-45c7424f {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.is-halloween .elementor-element-5f0af99 {
    background-image: url('../img/halloween/cta-care.webp') !important;
}

.is-halloween .elementor-element-45c7424f {
    background-image: url('../img/halloween/cta-pamper.webp') !important;
}

/* замість фірмового оверлею — затемнення з макета */
.is-halloween .elementor-element-5f0af99::before,
.is-halloween .elementor-element-45c7424f::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: none !important;
    opacity: 1 !important;
    pointer-events: none;
}

.is-halloween .elementor-element-5f0af99::before {
    background-color: rgba(26, 26, 26, 0.57) !important;
}

.is-halloween .elementor-element-45c7424f::before {
    background-color: rgba(26, 26, 26, 0.49) !important;
}

/*------------------ головна: інтер'єр — павук і привид у картці тексту -------------------*/

.is-halloween .elementor-element-4dc36f8a {
    overflow: hidden;
    isolation: isolate;
}

.is-halloween .elementor-element-4dc36f8a::before,
.is-halloween .elementor-element-4dc36f8a::after {
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.is-halloween .elementor-element-4dc36f8a::before {
    left: 0;
    width: 310px;
    height: 270px;
    background-image: url('../img/halloween/interior-spider.webp');
    background-position: left bottom;
}

.is-halloween .elementor-element-4dc36f8a::after {
    right: 34px;
    width: 370px;
    height: 160px;
    background-image: url('../img/halloween/interior-ghost.webp');
    background-position: right bottom;
}

/*------------------ адаптив -------------------*/

@media (max-width: 767px) {
    .is-halloween .elementor-location-header .elementor-widget-image::after {
        left: 30px;
        top: 34px;
        width: 33px;
        height: 60px;
    }

    .is-halloween .elementor-element-4dc36f8a::before {
        width: 186px;
        height: 162px;
    }

    .is-halloween .elementor-element-4dc36f8a::after {
        right: 10px;
        width: 222px;
        height: 96px;
    }

    .is-halloween .elementor-element-4f68bbbe .elementor-post__card::before,
    .is-halloween .elementor-element-4f68bbbe .elementor-post__card::after {
        width: 41px;
        height: 44px;
    }
}

/*------------------ головна: блок-оголошення про акцію (template-parts/halloween/promo.php) -------------------*/
/* вигляд як у «Naše narozeniny» (6a7e7ce2): ширина 1050, картка #1A1A1A, радіус 20; заголовок трохи менший — 583e54c (48/37/30), текст b2ce6af */

.hw-promo {
    box-sizing: border-box;
    width: 100%;
    max-width: 1050px;
    margin: 48px auto 36px;
}

.hw-promo__card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 240px 40px 40px;
    border-radius: 20px;
    background-color: #1A1A1A;
    animation: hw-promo-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hw-promo h2.hw-promo__title {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--e-global-typography-583e54c-font-family), Sans-serif;
    font-size: var(--e-global-typography-583e54c-font-size);
    font-weight: var(--e-global-typography-583e54c-font-weight);
    line-height: var(--e-global-typography-583e54c-line-height);
    letter-spacing: var(--e-global-typography-a435f28-letter-spacing);
}

.hw-promo__text {
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-b2ce6af-font-family), Sans-serif;
    font-size: var(--e-global-typography-b2ce6af-font-size);
    font-weight: var(--e-global-typography-b2ce6af-font-weight);
    line-height: var(--e-global-typography-b2ce6af-line-height);
}

.hw-promo__text > * {
    margin: 0;
}

.hw-promo__text > * + * {
    margin-top: 1.4em;
}

.hw-promo__text ul,
.hw-promo__text ol {
    padding-left: 1.4em;
}

/* легкий виїзд догори: картка, потім по черзі заголовок і абзаци (після 5-го — разом) */
.hw-promo__title,
.hw-promo__text > * {
    animation: hw-promo-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hw-promo__title { animation-delay: 0.35s; }
.hw-promo__text > :nth-child(1) { animation-delay: 0.45s; }
.hw-promo__text > :nth-child(2) { animation-delay: 0.53s; }
.hw-promo__text > :nth-child(3) { animation-delay: 0.61s; }
.hw-promo__text > :nth-child(4) { animation-delay: 0.69s; }
.hw-promo__text > :nth-child(n+5) { animation-delay: 0.77s; }

@keyframes hw-promo-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-promo__card,
    .hw-promo__title,
    .hw-promo__text > * {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .hw-promo {
        padding: 0 30px;
    }

    .hw-promo__card {
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .hw-promo {
        margin-top: 28px;
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .hw-promo__card {
        padding: 20px;
    }
}
