/*
Theme Name: E-Theme
Theme URI: https://esfirum.com
Author: Esfirum
Author URI: https://esfirum.com
Description: Кастомна PWA-тема для готельних проектів. PWA, розділи та тексти налаштовуються з адмінки.
Version: 3.1.4
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: e-theme
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}


ul[class],
ol[class] {
  padding: 0;
}


body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}


body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  
}


ul[class],
ol[class] {
  list-style: none;
}


a:not([class]) {
  text-decoration-skip-ink: auto;
}


img {
  max-width: 100%;
  display: block;
}


article > * + * {
  margin-top: 1em;
}


input,
button,
textarea,
select {
  font: inherit;
}


@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a{
   text-decoration: none;
   color: inherit;
}


/* */

body{
   font-family: 'Geometria', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   position: relative;
   
}

.home {padding:0 0 80px 0;}

#wpadminbar {display:none!important;}
body.active{
   overflow: hidden;
}
.header{
   z-index:10;
   position: fixed;
   top:0;left:0;right:0;
   display: flex;
   justify-content: space-between;
   padding: 6px 22px;
   align-items: center;
   background-color: var(--e-header-bg, #14100AEB);
}

.main{
   position: relative;
   padding-top: 132px;
   z-index: 2;
}
/* Перший екран: фото — тло секції, контент поверх нього.
   Без position:relative тут фото чіплялось до .main і розтягувалось на всю сторінку. */
.main-upper-section{
   position: relative;
   /* Витягуємо секцію під фіксовану шапку, щоб фото було на весь екран. */
   margin-top: -132px;
   padding-top: 132px;
   /* Панель «Рецепція / Ресторан» зафіксована знизу — лишаємо під неї місце,
      інакше контент першого екрана ховається за нею. */
   padding-bottom: var(--e-callbar);
   min-height: 100vh;
   min-height: 100svh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
/* Затемнення поверх фото, щоб логотип і кнопка читались. */
.main-upper-section::after{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.58) 100%);
   pointer-events: none;
}
.upper-section-content{
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   padding: 24px 20px;
}
.upper-section-image{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   -o-object-position: center bottom;
      object-position: center bottom;
   -webkit-animation: e-hero-zoom 28s ease-in-out infinite;
           animation: e-hero-zoom 28s ease-in-out infinite;
   -webkit-transform-origin: center center;
       -ms-transform-origin: center center;
           transform-origin: center center;
}

/* Ледь помітний рух фону: наближення і назад. */
@-webkit-keyframes e-hero-zoom{
   0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
   50%      { -webkit-transform: scale(1.07); transform: scale(1.07); }
}
@keyframes e-hero-zoom{
   0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
   50%      { -webkit-transform: scale(1.07); transform: scale(1.07); }
}

/* Якщо в системі вимкнена анімація — фон стоїть нерухомо. */
@media (prefers-reduced-motion: reduce){
   .upper-section-image{ -webkit-animation: none; animation: none; }
}
.upper-section-text{
   text-transform: uppercase;
   margin-left: 82px;
   margin-right: 91px;
   font-size: 20px;
   font-weight: 500;
   line-height: 24.38px;
   letter-spacing: 0.04em;
   text-align: center;
}

.main-middle-section{
   background-color: #F8F5F2;
   border-radius: 30px 30px 0 0;
   position: relative;
   z-index: 3;
   /* Заокруглений блок трохи наїжджає на фото — мʼякий стик замість порожнечі. */
   margin-top: -28px;
   padding: 20px;
   padding-bottom: 110px;
}

.middle-section-buttons{
   display: flex;
   justify-content: space-between;
}

.middle-button{
   width: 169px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border-radius: 32px;
   background-color: var(--e-button-bg, #F0C47A);
   border: none;
   padding-top: 12px;
   padding-bottom: 12px;
   cursor: pointer;
}

.button-text{
   text-transform: uppercase;
font-size: 12px;
font-weight: 600;
line-height: 12px;
letter-spacing: 0.04em;
text-align: center;
color: var(--e-button-text, #041C12);
text-decoration: none;
}

.middle-section-service{
   margin-top: 48px;
}
.section-service-text{
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.04em;
text-align: center;

}

/* Рівна сітка: дві однакові колонки, всі картки одного розміру. */
.section-service-content{
   display: -ms-grid;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
   margin-top: 20px;
}
.service-grid{
   position: relative;
   /* Однакова висота незалежно від довжини назви. */
   aspect-ratio: 4 / 5;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: end;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   overflow: hidden;
   border-radius: 16px;
}
.service-grid::before{
      content: " ";
      background: linear-gradient(180deg, rgba(0, 10, 6, 0) 30%, rgba(0, 10, 6, 0.75) 100%);
      width: 100%;
      height: 60%;
      z-index: 1;
      position: absolute;
      left: 0;
      bottom: 0;
}

/* «Широкі» картки більше не розтягуються — сітка лишається рівною. */
.service-grid-big{
   aspect-ratio: 4 / 5;
}

/* Непарна кількість: остання картка займає весь рядок, щоб не було порожнечі. */
.service-grid:last-child:nth-child(odd){
   grid-column: 1 / -1;
   aspect-ratio: 16 / 9;
}

.service-grid-img{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: 0;
}

.service-grid-text,
.service-grid-text-big{
   position: relative;
   z-index: 2;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: 0.04em;
   text-align: center;
   color: #F8F5F2;
   padding: 0 10px 18px;
   text-shadow: 0 1px 12px rgba(0, 10, 6, .5);
}

.middle-section-spa{
   margin-top: 56px;
}

.middle-section-additional{
   margin-top: 56px;
}
.shadow{
   position: absolute;
   width: 100%;
   border-radius: 12px;
}

.footer{
   background: #14130F;
   margin-top: -30px;
   padding-top: 70px;
   z-index: 1;
   position: relative;
}
.footer-image{
   position: absolute;
   margin-top: -70px;
   width: 100%;
   height: 100%;
}

.footer-content{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 32px;
   z-index: 5;
   position: relative;
}

.bron-number{
   
font-size: 18px;
font-weight: 600;
line-height: 18px;
letter-spacing: 0.04em;
text-align: center;
color: #F3F3F3;
display: block;
}

.bron-text{
font-size: 12px;
font-weight: 500;
line-height: 12px;
letter-spacing: 0.04em;
text-align: center;
color: #F3F3F3;
    opacity: 40%;
text-transform: uppercase;
margin-bottom: 9px;
}
.bron-number-small{
   font-size: 16px;
}
.number-container{
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.footer-socials{
   margin-top: 56px;
   padding-left: 35px;
   padding-right: 35px;
   z-index: 5;
   position: relative;
}

.socials-text{
font-size: 24px;
font-weight: 400;
line-height: 29.26px;
letter-spacing: 0.08em;
text-align: center;
color: #F3F3F3;
    opacity: 40%;
text-transform: uppercase;
}
.footer-down{
   display: flex;
   align-items: center;
   flex-direction: column;
   padding-left: 20px;
   padding-right: 20px;
   margin-top: 40px;
   gap: 12px;
   z-index: 5;
   position: relative;
}
.socials-icons{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 16px;
}

.footer-down-text{
font-family: 'Geometria', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 22.4px;
text-align: center;
color:  #F8F1EF;
}

.button-footer{
  padding-left: 20px;
  padding-right: 20px;
  display: block;
  margin-top: 20px;
  margin-bottom: 40px;
}

.btn-footer-inner{
   width: 100%;
   border: 1px solid #F8F5F233;
   background: none;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px 52px 12px 52px;
   gap: 16px;
   text-transform: uppercase;
   cursor: pointer;
}
.button-footer-text{
   font-size: 14px;
   font-weight: 300;
   line-height: 14px;
   letter-spacing: 0.12em;
   text-align: center;
   color: #F3F3F3;
}

.esfirium{
   width: 100%;
   background: #0F0E0C;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px 50px;
   flex-direction: column;
   gap: 12px;
}

.esfirium-text{

   font-size: 12px;
   font-weight: 300;
   line-height: 12px;
   letter-spacing: 0.04em;
   text-align: left;
   color: #F8F1EF;
   opacity: 60%;
   text-transform: uppercase;
}
.burger-menu-opened{
   top:74px;
   padding-top: 68px;
   padding-left: 40px;
   padding-right: 28px;
   background-color:#FFFFFF ;
   width: 100%;
   height: 100%;
   z-index: 100;
   position: fixed;
   transform: translateX(100%);
	transition: transform 0.5s ease-out; 
   overflow:auto;
}

.burger-menu-opened.active{
   transform: translateX(0);
   position: fixed;
   overflow-y: scroll;
}
.dropdown-btn{
   background: none;
   border: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 66px;
   padding: 0;
   width: 100%;
   cursor: pointer;
}
.burger-close{
   width: 100%;
   display: flex;
   justify-content: end;
   margin-bottom: 17px;
}

.dropdown-btn-text{
font-family: 'Geometria', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 21.94px;
letter-spacing: 0.04em;
text-align: left;
color: #041C12;
text-transform: uppercase;
}

.arrow-dropdown{
   border: solid black;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 3px;
   transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.burger-menu-list{
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 32px;
   margin-top: 24.5px !important;
   visibility: hidden;
   height: 0;
}

.burger-menu-list.active{
   visibility: visible;

   height: auto;
}

.list-element{
   font-family: 'Geometria', sans-serif;
   font-size: 14px;
   font-weight: 500;
   line-height: 17.07px;
   letter-spacing: 0.04em;
   text-align: left;
   color: #3D3C3A;
   text-transform: uppercase;
}

.burger-menu-content{
   display: flex;
   flex-direction: column;
   gap: 32.5px;
}
.header-menu{
   position: relative;
   width: 24px;
   -webkit-transition: 0.4s;
   -moz-transition: 0.4s;
   -o-transition: 0.4s;
   transition: 0.4s;
   z-index: 100;
}
.header-menu-lines::before,
.header-menu-lines::after,
.header-menu-lines {
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.header-menu-lines{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header-menu-lines::before {
  content: '';
  top: -8px;
}
.header-menu-lines::after {
  content: '';
  top: 8px;
}

.header-menu-active{

}

.header-menu-active .header-menu-lines {
   background-color: transparent;
}

.header-menu-active .header-menu-lines::before{
   top: 0;
  transform: rotate(45deg);
  background-color: #CC9D59;
}

.header-menu-active .header-menu-lines::after{
   top: 0;
  transform: rotate(-45deg);
  background-color: #CC9D59;
}



.header-menu{
   cursor: pointer;
}

.burger-cross{
   cursor: pointer;
}


.d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
 }
 
 .d-inline-flex {
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 .justify-content-start {
   -ms-flex-pack: start !important;
   justify-content: flex-start !important;
 }
 
 .justify-content-end {
   -ms-flex-pack: end !important;
   justify-content: flex-end !important;
 }
 
 .justify-content-center {
   -ms-flex-pack: center !important;
   justify-content: center !important;
 }
 
 .justify-content-between {
   -ms-flex-pack: justify !important;
   justify-content: space-between !important;
 }
 
 .justify-content-around {
   -ms-flex-pack: distribute !important;
   justify-content: space-around !important;
 }
 
 .align-items-start {
   -ms-flex-align: start !important;
   align-items: flex-start !important;
 }
 
 .align-items-end {
   -ms-flex-align: end !important;
   align-items: flex-end !important;
 }
 
 .align-items-center {
   -ms-flex-align: center !important;
   align-items: center !important;
 }
.wrapper {max-width: 450px;margin:0 auto; overflow:hidden;position:relative;}
.inner-section {margin:-26px 0 30px 0;position:relative;padding:0 20px;z-index:4;}
.back-link {margin:0 0 24px 0;color: var(--14100-a, #14100A);   font-size: 14px;   font-weight: 500;   line-height: 100%;   letter-spacing: 1.68px;   text-transform: uppercase;}
.back-link .icon {width:24px;min-width:24px;margin:0 16px 0 0;}
.inner-slider-container {position:relative;padding:0 0px 64px 0px;margin:0 0 32px 0;}
.inner-slider .slide {padding:0 6px;}
.inner-slider .item { width: 100%; height: 260px; overflow: hidden; border-radius:12px ; -webkit-border-radius:12px ; -moz-border-radius:12px ; -ms-border-radius:12px ; -o-border-radius:12px ; }
.inner-slider .item img  {-o-object-fit: cover; object-fit: cover; width: 100%; height: 100%;}
.inner-slider .slick-list {overflow:visible;}

.inner-section h1 {margin:0 0 16px 0;color: var(--Night-Green, #041C12);   font-size: 24px;   font-weight: 500;   line-height: 100%;   letter-spacing: 0.96px;   text-transform: uppercase;}
.inner-section p {margin:0 0 12px 0;color: var(--454545, #454545);   font-size: 16px;   font-style: normal;   font-weight: 400;   line-height: 180%; /* 25.2px */}
body {background:#F8F5F2;color: var(--e-text, inherit);}

.inner-section .inner-text {margin:0 0 50px 0;}

.inner-block {margin:0 0 40px 0;color: var(--454545, #454545);   font-size: 16px;   font-style: normal;   font-weight: 400;   line-height: 180%;}
.inner-block .block-name {margin:0 0 12px 0;color: var(--Black, #1A1A1A);   font-size: 16px;   font-weight: 600;   line-height: 140%;}
.inner-block .block-name .number { text-align:center;color: var(--Black, #1A1A1A);   font-size: 14px;   font-weight: 600;   line-height: 40px; margin:0 16px 0 0; width: 40px; min-width:40px; height: 40px; background:rgba(204,157,89,0.2); border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; }
.inner-block .block-image {height: 232px;margin:0 0 20px 0;overflow: hidden; border-radius:12px ;}
.inner-block .block-image img  {-o-object-fit: cover; object-fit: cover; width: 100%; height: 100%;}

.bottom-phone {margin:56px 0 0px 0;text-align:center;}
.bottom-phone .data {margin:0 0 20px 0;color: var(--Night-Green, #041C12);   font-size: 16px;   font-weight: 500;   line-height: 110%;   letter-spacing: 0.64px;   text-transform: uppercase;}
.bottom-phone .value {color: var(--Night-Green, #041C12);   font-size: 24px;   font-weight: 500;   line-height: 110%;   letter-spacing: 0.96px;   text-transform: uppercase;}
.bottom-phone .icon {width:32px;min-width:32px;margin:0 12px 0 0;}

.bottom-border { position:relative; z-index:10; bottom:-30px; margin:-30px -20px 0px -20px; height:60px; background:#F8F5F2; border-radius:60px; -webkit-border-radius:60px; -moz-border-radius:60px; -ms-border-radius:60px; -o-border-radius:60px; }

.inner-text h1{
	text-align: center;
}

.header-logo{
  max-width: 170px;
}
.upper-section-text{
  margin-left: 10px;
    margin-right: 10px;
}
.block-anons p a{
  width: 100%;
  border-radius: 10px;
  padding: 15px 20px;
  display: block;
  background: var(--e-button-bg, #23514c) !important;
  text-decoration: none !important;
  color: var(--e-button-text, #ffffff) !important;
  text-align: center;
}

/* Ціни в прайсах: жирні й нерозривні, щоб не ламались посеред числа. */
.block-anons .e-price{ font-weight: 600; white-space: nowrap; }

/* Виділений блок «Радимо скуштувати» та подібні акценти в тексті розділу. */
.e-recommend{
  margin: 20px 0;
  padding: 16px 18px 16px 20px;
  background: rgba(35, 81, 76, .06);
  border-left: 4px solid var(--e-main, #23514c);
  border-radius: 12px;
}
.e-recommend__title{
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--e-heading, #23514c);
  display: flex;
  align-items: center;
  gap: 8px;
}
.e-recommend__title::before{
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: var(--e-main, #23514c);
  -webkit-mask: url("img/utensils.svg") center / contain no-repeat;
          mask: url("img/utensils.svg") center / contain no-repeat;
}
.e-recommend ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.e-recommend li{
  position: relative;
  padding: 4px 0 4px 20px;
  line-height: 1.5;
}
.e-recommend li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--e-main, #23514c);
}



.main-vidguk {margin:36px 0 0 0;font-size: 16px;   font-style: normal;   font-weight: 400;   line-height: 180%; white-space: nowrap; width:unset; border-radius: 10px; padding: 15px 20px; display: inline-block; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }

.middle-section-buttons {z-index:20; position:fixed; bottom:0; left:0; right:0; background-color: #F8F5F2; border-radius: 30px 30px 0 0; padding: 20px; -webkit-border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0; -ms-border-radius: 30px 30px 0 0; -o-border-radius: 30px 30px 0 0;}

.chaty-i-trigger .chaty-channel {bottom:60px!important;}
.chaty-channel-list {bottom:60px!important;}


.home .main > div {position:relative;z-index:2;}
.shild {position:absolute;top:0;left:0;padding:5px 10px;font-size:14px;line-height:14px;z-index:3;  background-color: var(--e-button-bg, #F0C47A);color: var(--e-button-text, #041C12);}

/* --- Логотипи (замість зовнішнього SVG-спрайта) --- */
.header-logo-img { height: 58px; width: auto; aspect-ratio: 368.5 / 212.6; margin: 0 auto; }
/* На телефоні впирається в ширину екрана, на широких — до 600px (3x від старих 200px). */
.banner-logo { width: min(78vw, 460px); max-width: 100%; height: auto; aspect-ratio: 368.5 / 212.6; margin: 0 auto; }
.banner-sublogo { max-width: 200px; height: auto; margin: 16px auto 0; }

/* Колір іконок усередині кнопок дзвінка. */
.middle-button { color: var(--e-button-text, #041C12); text-decoration: none; }

/* Заголовок секції не має відрізнятись від колишнього div. */
.section-service-text { font-family: inherit; }

/* --- Кольори з адмінки --- */
.section-service-text,
.inner-text h1,
.inner-section h1 { color: var(--e-heading, #041C12); }
.header-logo-text { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }

/* --- Перший екран і нижня панель дзвінків --- */
:root{ --e-callbar: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* Панель завжди в полі зору, з відступом під «домашню смужку» iPhone. */
.middle-section-buttons{ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* Останній екран не має ховатись за панеллю. */
.home .footer{ padding-bottom: var(--e-callbar); }

/* Перша секція під першим екраном не потребує великого відступу. */
.main-middle-section .middle-section-service:first-of-type{ margin-top: 28px; }


/* =========================================================================
   ПОЛІРУВАННЯ ІНТЕРФЕЙСУ
   Тільки візуальні деталі: стани натискання, глибина, типографіка, фокус.
   Структура розмітки не змінюється.
   ========================================================================= */

:root{
   --e-ease: cubic-bezier(.2, .7, .3, 1);
   --e-fast: 180ms;
   --e-shadow-card: 0 6px 18px rgba(4, 28, 18, .14);
   --e-shadow-card-press: 0 2px 8px rgba(4, 28, 18, .18);
   --e-shadow-bar: 0 -8px 24px rgba(4, 28, 18, .12);
   --e-hairline: rgba(4, 28, 18, .10);
}

/* Прибираємо сіру плашку Android при тапі й затримку 300ms. */
a, button, .service-grid, .dropdown-btn{
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
}

/* Видимий фокус для клавіатури — без нього навігація сліпа. */
a:focus-visible,
button:focus-visible,
.service-grid:focus-visible{
   outline: 2px solid var(--e-button-bg, #F0C47A);
   outline-offset: 3px;
   border-radius: 12px;
}

/* --- Картки розділів --------------------------------------------------- */

.service-grid{
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--e-shadow-card);
   -webkit-transition: transform var(--e-fast) var(--e-ease), box-shadow var(--e-fast) var(--e-ease);
           transition: transform var(--e-fast) var(--e-ease), box-shadow var(--e-fast) var(--e-ease);
}

.service-grid:active{
   -webkit-transform: scale(.98);
           transform: scale(.98);
   box-shadow: var(--e-shadow-card-press);
}

.service-grid-img{
   border-radius: 16px;
   -webkit-transition: transform 420ms var(--e-ease);
           transition: transform 420ms var(--e-ease);
}

.service-grid:active .service-grid-img{
   -webkit-transform: scale(1.04);
           transform: scale(1.04);
}

/* Градієнт трохи глибший — назви читаються на будь-якому фото. */
.service-grid::before{
   background: linear-gradient(180deg, rgba(0,10,6,0) 12%, rgba(0,10,6,.45) 58%, rgba(0,10,6,.86) 100%);
   border-radius: 0 0 16px 16px;
}

.service-grid-text,
.service-grid-text-big{
   text-shadow: 0 1px 12px rgba(0, 10, 6, .5);
}

.service-grid-text{ line-height: 1.25; }
.service-grid-text-big{ line-height: 1.3; }

/* --- Плашка «Акція / Подія» -------------------------------------------- */

.shild{
   top: 10px;
   left: 10px;
   padding: 6px 12px;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
   letter-spacing: .08em;
   text-transform: uppercase;
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(4, 28, 18, .25);
}

/* --- Заголовки секцій --------------------------------------------------- */

.section-service-text{
   font-size: 22px;
   line-height: 1.15;
   letter-spacing: .08em;
   margin-bottom: 4px;
}

/* --- Панель дзвінків ---------------------------------------------------- */

.middle-section-buttons{
   box-shadow: var(--e-shadow-bar);
   gap: 12px;
}

/* 40px не дотягувало до мінімальних 44px для пальця. */
.middle-button{
   min-height: 48px;
   width: auto;
   flex: 1 1 0;
   -webkit-transition: transform var(--e-fast) var(--e-ease), filter var(--e-fast) var(--e-ease);
           transition: transform var(--e-fast) var(--e-ease), filter var(--e-fast) var(--e-ease);
}

.middle-button:active{
   -webkit-transform: scale(.97);
           transform: scale(.97);
   filter: brightness(.94);
}

.main-vidguk{ flex: 0 0 auto; }

/* --- Шапка -------------------------------------------------------------- */

.header{
   -webkit-backdrop-filter: saturate(140%) blur(10px);
           backdrop-filter: saturate(140%) blur(10px);
   box-shadow: 0 1px 0 rgba(248, 245, 242, .12);
}

/* --- Посилання «назад» і телефон ---------------------------------------- */

.back-link{
   -webkit-transition: opacity var(--e-fast) var(--e-ease);
           transition: opacity var(--e-fast) var(--e-ease);
}

.back-link .icon{
   -webkit-transition: transform var(--e-fast) var(--e-ease);
           transition: transform var(--e-fast) var(--e-ease);
}

.back-link:active{ opacity: .7; }

/* Посилання «назад» і телефон на сторінці запису — повна зона натискання. */
.back-link{
   min-height: 44px;
}

.bottom-phone .balue{
   min-height: 44px;
}
.back-link:active .icon{ -webkit-transform: translateX(-4px); transform: translateX(-4px); }

.bottom-phone .value{
   -webkit-transition: opacity var(--e-fast) var(--e-ease);
           transition: opacity var(--e-fast) var(--e-ease);
}
.bottom-phone .value:active{ opacity: .7; }

/* --- Меню --------------------------------------------------------------- */

.dropdown-btn{
   min-height: 48px;
   cursor: pointer;
   -webkit-transition: opacity var(--e-fast) var(--e-ease);
           transition: opacity var(--e-fast) var(--e-ease);
}
.dropdown-btn:active{ opacity: .7; }

.burger-menu-list .list-element a{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   min-height: 44px;
   padding: 8px 0;
}

/* --- Зона натискання для дрібних посилань -------------------------------
   Іконки та телефони лишаються візуально того ж розміру, але зона пальця
   розширюється невидимим псевдоелементом. Розкладка не змінюється. */

.header-phone,
.social-icon,
.bron-number,
.footer-down a{
   position: relative;
}

.header-phone::after,
.social-icon::after,
.bron-number::after,
.footer-down a::after{
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 44px;
   height: 44px;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
}

.button-footer .btn-footer-inner{
   min-height: 48px;
}

/* Логотип у шапці теж посилання — даємо йому повноцінну зону натискання. */
.header-logo a{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   min-height: 44px;
}

/* --- Галерея на сторінці запису ----------------------------------------- */

.inner-slider .item{
   box-shadow: var(--e-shadow-card);
}

.inner-slider .slick-dots li button:before{
   font-size: 8px;
   color: var(--e-heading, #041C12);
   opacity: .25;
}

.inner-slider .slick-dots li.slick-active button:before{
   opacity: 1;
   color: var(--e-button-bg, #F0C47A);
}

/* --- Соцмережі в підвалі ------------------------------------------------ */

.social-icon{
   -webkit-transition: transform var(--e-fast) var(--e-ease), opacity var(--e-fast) var(--e-ease);
           transition: transform var(--e-fast) var(--e-ease), opacity var(--e-fast) var(--e-ease);
}
.social-icon:active{
   -webkit-transform: scale(.9);
           transform: scale(.9);
   opacity: .8;
}

/* --- Вітальне вікно ------------------------------------------------------ */



/* --- Повага до системних налаштувань ------------------------------------ */

@media (prefers-reduced-motion: reduce){
   *,
   *::before,
   *::after{
      -webkit-animation-duration: .01ms !important;
              animation-duration: .01ms !important;
      -webkit-animation-iteration-count: 1 !important;
              animation-iteration-count: 1 !important;
      -webkit-transition-duration: .01ms !important;
              transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
}


/* =========================================================================
   ВІТАЛЬНЕ ВІКНО ПРИ ПЕРШОМУ ЗАХОДІ
   ========================================================================= */

.first-screen{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 400;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding: 20px;
   background: rgba(4, 28, 18, .55);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
   opacity: 0;
   -webkit-transition: opacity 260ms var(--e-ease);
           transition: opacity 260ms var(--e-ease);
}

.first-screen[hidden]{ display: none; }

.first-screen.active{ opacity: 1; }

.first-screen__card{
   position: relative;
   /* Картка отримує фокус програмно — власне кільце їй не потрібне. */
   outline: none;
   width: 100%;
   max-width: 380px;
   padding: 40px 24px 28px;
   text-align: center;
   background: #FFFFFF;
   border-radius: 24px;
   box-shadow: 0 24px 60px rgba(4, 28, 18, .35);
   -webkit-transform: translateY(16px) scale(.97);
       -ms-transform: translateY(16px) scale(.97);
           transform: translateY(16px) scale(.97);
   -webkit-transition: transform 320ms var(--e-ease);
           transition: transform 320ms var(--e-ease);
}

.first-screen.active .first-screen__card{
   -webkit-transform: translateY(0) scale(1);
       -ms-transform: translateY(0) scale(1);
           transform: translateY(0) scale(1);
}

/* Тонка золота риска зверху — акцент теми. */
.first-screen__card::before{
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   width: 56px;
   height: 3px;
   -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
           transform: translateX(-50%);
   background: var(--e-button-bg, #F0C47A);
   border-radius: 0 0 3px 3px;
}

/* Кольоровий логотип на білій картці — без додаткового оформлення. */
.first-screen__logo{
   width: 170px;
   max-width: 70%;
   height: auto;
   aspect-ratio: 368.5 / 212.6;
   margin: 0 auto 18px;
}

.first-screen .first-text{
   font-size: 16px;
   line-height: 1.55;
   letter-spacing: .01em;
   color: var(--e-text, #041C12);
}

.first-screen .first-text p{ margin: 0 0 14px; }
.first-screen .first-text p:last-child{ margin-bottom: 0; }

.first-screen__accept{
   width: 100%;
   min-height: 48px;
   margin-top: 24px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-button-text, #041C12);
}

.first-screen .first-close{
   position: absolute;
   top: 10px;
   right: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: none;
   color: rgba(4, 28, 18, .45);
   cursor: pointer;
   -webkit-transition: background-color var(--e-fast) var(--e-ease), color var(--e-fast) var(--e-ease);
           transition: background-color var(--e-fast) var(--e-ease), color var(--e-fast) var(--e-ease);
}

.first-screen .first-close:hover,
.first-screen .first-close:active{
   background: rgba(4, 28, 18, .07);
   color: var(--e-heading, #041C12);
}

/* Поки вікно відкрите, сторінка під ним не прокручується. */
body.e-modal-open{ overflow: hidden; }

@media (max-width: 360px){
   .first-screen__card{ padding: 36px 18px 24px; }
}


/* =========================================================================
   ФОРМА ВІДГУКУ
   ========================================================================= */

.e-review{
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: 400;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding: 20px;
   background: rgba(4, 28, 18, .55);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
   opacity: 0;
   overflow-y: auto;
   -webkit-transition: opacity 260ms var(--e-ease);
           transition: opacity 260ms var(--e-ease);
}

.e-review[hidden]{ display: none; }
.e-review.active{ opacity: 1; }

.e-review__card{
   position: relative;
   width: 100%;
   max-width: 380px;
   margin: auto;
   padding: 32px 24px 28px;
   background: #FFFFFF;
   border-radius: 24px;
   box-shadow: 0 24px 60px rgba(4, 28, 18, .35);
   outline: none;
   -webkit-transform: translateY(16px) scale(.97);
       -ms-transform: translateY(16px) scale(.97);
           transform: translateY(16px) scale(.97);
   -webkit-transition: transform 320ms var(--e-ease);
           transition: transform 320ms var(--e-ease);
}

.e-review.active .e-review__card{
   -webkit-transform: translateY(0) scale(1);
       -ms-transform: translateY(0) scale(1);
           transform: translateY(0) scale(1);
}

.e-review__title{
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-heading, #041C12);
}

.e-review__intro{
   margin: 0 0 20px;
   font-size: 14px;
   line-height: 1.5;
   color: rgba(4, 28, 18, .65);
}

.e-review__label{
   display: block;
   margin: 0 0 6px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: rgba(4, 28, 18, .6);
}

.e-review__input,
.e-review__textarea{
   width: 100%;
   margin: 0 0 16px;
   padding: 12px 14px;
   font-family: inherit;
   /* 16px, щоб iOS не збільшував сторінку під час набору. */
   font-size: 16px;
   line-height: 1.4;
   color: var(--e-text, #041C12);
   background: #F8F5F2;
   border: 1px solid transparent;
   border-radius: 12px;
   -webkit-appearance: none;
           appearance: none;
   -webkit-transition: border-color var(--e-fast) var(--e-ease), background-color var(--e-fast) var(--e-ease);
           transition: border-color var(--e-fast) var(--e-ease), background-color var(--e-fast) var(--e-ease);
}

.e-review__input{ min-height: 48px; }
.e-review__textarea{ min-height: 120px; resize: vertical; }

.e-review__input:focus,
.e-review__textarea:focus{
   outline: none;
   background: #FFFFFF;
   border-color: var(--e-button-bg, #F0C47A);
}

.e-review__trap{
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.e-review__error{
   margin: 0 0 12px;
   font-size: 13px;
   line-height: 1.4;
   color: #B32D2E;
}

.e-review__submit{
   width: 100%;
   min-height: 48px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-button-text, #041C12);
}

.e-review__submit[disabled]{
   opacity: .6;
   cursor: default;
}

.e-review__close{
   position: absolute;
   top: 10px;
   right: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: none;
   color: rgba(4, 28, 18, .45);
   cursor: pointer;
}

.e-review__close:hover,
.e-review__close:active{
   background: rgba(4, 28, 18, .07);
   color: var(--e-heading, #041C12);
}

/* --- Екран подяки --- */

.e-review__done{ text-align: center; padding: 8px 0 0; }

.e-review__done-icon{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 64px;
   height: 64px;
   margin: 0 auto 18px;
   color: #FFFFFF;
   background: var(--e-header-bg, #23514c);
   border-radius: 50%;
}

.e-review__done-text{
   margin: 0 0 20px;
   font-size: 16px;
   line-height: 1.5;
   color: var(--e-text, #041C12);
}

.e-review__google{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   min-height: 48px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--e-button-text, #041C12);
}

.e-review__google[hidden]{ display: none; }

/* Кнопка відгуку — це <button>, вирівнюємо її з іншими кнопками. */
.main-vidguk{
   font-family: inherit;
   cursor: pointer;
}


/* --- Зірки в формі відгуку ---------------------------------------------- */

.e-review__rating{
   margin: 0 0 18px;
   padding: 0;
   border: 0;
}

.e-review__stars{
   /* Порядок зірок обернений, щоб CSS-селектор ~ підсвічував ліві сусідні. */
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   gap: 6px;
}

.e-review__star-input{
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.e-review__star{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 48px;
   height: 48px;
   cursor: pointer;
   color: rgba(4, 28, 18, .16);
   -webkit-transition: color var(--e-fast) var(--e-ease), transform var(--e-fast) var(--e-ease);
           transition: color var(--e-fast) var(--e-ease), transform var(--e-fast) var(--e-ease);
}

.e-review__star svg{
   width: 34px;
   height: 34px;
   fill: currentColor;
}

.e-review__star:active{
   -webkit-transform: scale(.9);
           transform: scale(.9);
}

/* Обрана зірка і всі, що правіше в розмітці (тобто лівіше на екрані). */
.e-review__star-input:checked ~ .e-review__star,
.e-review__star-input:checked + .e-review__star{
   color: var(--e-button-bg, #F0C47A);
}


.e-review__star-input:focus-visible + .e-review__star{
   outline: 2px solid var(--e-button-bg, #F0C47A);
   outline-offset: 2px;
   border-radius: 8px;
}

/* Підпис під зірками: підказує, що означає обрана оцінка. */
.e-review__rating-hint{
   min-height: 18px;
   margin: 6px 0 0;
   font-size: 13px;
   line-height: 1.3;
   text-align: center;
   color: rgba(4, 28, 18, .6);
}

.screen-reader-text{
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
}

/* Банер згоди на сповіщення — той самий вигляд, що й банер встановлення. */
.e-install--push .e-install__button{
   background: var(--e-button-bg, #F0C47A);
}


/* =========================================================================
   БЛОК «СЬОГОДНІ» І СТАТУС ГОДИН РОБОТИ
   ========================================================================= */

.e-today{
   margin: 28px 0 0;
   padding: 18px 16px 8px;
   background: #FFFFFF;
   border-radius: 18px;
   box-shadow: var(--e-shadow-card);
}

.e-today__title{
   margin: 0 0 12px;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--e-heading, #041C12);
}

.e-today__list{
   margin: 0;
   padding: 0;
   list-style: none;
}

.e-today__item + .e-today__item{
   border-top: 1px solid var(--e-hairline, rgba(4,28,18,.10));
}

.e-today__link{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 12px;
   min-height: 52px;
   padding: 8px 0;
   text-decoration: none;
   color: var(--e-text, #041C12);
   -webkit-transition: opacity var(--e-fast) var(--e-ease);
           transition: opacity var(--e-fast) var(--e-ease);
}

.e-today__link:active{ opacity: .6; }

.e-today__time{
   -webkit-box-flex: 0;
       -ms-flex: 0 0 52px;
           flex: 0 0 52px;
   font-size: 15px;
   font-weight: 700;
   /* Моноцифри, щоб час не «стрибав» у стовпчику. */
   font-variant-numeric: tabular-nums;
   color: var(--e-heading, #041C12);
}

.e-today__name{
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   font-size: 15px;
   line-height: 1.3;
}

.e-today__arrow{
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
   color: rgba(4, 28, 18, .35);
}

/* --- Статус роботи ------------------------------------------------------- */

.e-hours{
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 7px;
   margin: 0 0 14px;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .02em;
   border-radius: 999px;
}

.e-hours__dot{
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: currentColor;
}

.e-hours--open{
   color: #1F7A4C;
   background: rgba(31, 122, 76, .10);
}

.e-hours--closed{
   color: #B32D2E;
   background: rgba(179, 45, 46, .09);
}

.e-hours--always{
   color: var(--e-heading, #041C12);
   background: rgba(4, 28, 18, .07);
}

/* --- Заголовки: Beatrix Antiqua, як на voevodyno.com --- */
h1, h2, h3,
.section-service-text,
.inner-text h1,
.inner-section h1,
.e-today__title,
.e-review__title,
.header-logo-text,
.bron-text,
.socials-text {
   font-family: 'Beatrix Antiqua', 'Geometria', serif;
}

/* Слоган на першому екрані (лого тепер лише в шапці). */
.banner-slogan{
   margin: 0;
   max-width: 360px;
   font-family: 'Beatrix Antiqua', 'Geometria', serif;
   font-size: 30px;
   font-weight: 400;
   line-height: 1.25;
   letter-spacing: .01em;
   text-align: center;
   color: #FFFFFF;
   text-shadow: 0 1px 16px rgba(0,10,6,.6);
}

@media (max-width: 380px){
   .banner-slogan{ font-size: 26px; }
}


/* =========================================================================
   ШТОРКА ДЗВІНКІВ
   ========================================================================= */

/* Одна кнопка на всю ширину нижньої панелі. */
.e-call-trigger{
   width: 100%;
   flex: 1 1 auto;
}

/* Якір блоку подій не має ховатись під фіксованою шапкою. */
#e-today{
   scroll-margin-top: 76px;
}

.e-today__empty{
   margin: 0 0 8px;
   padding: 4px 0 12px;
   font-size: 15px;
   line-height: 1.4;
   color: rgba(4, 28, 18, .6);
}

.e-call{
   position: fixed;
   inset: 0;
   z-index: 400;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
   background: rgba(4, 28, 18, .5);
   -webkit-backdrop-filter: blur(6px);
           backdrop-filter: blur(6px);
   opacity: 0;
   -webkit-transition: opacity 260ms var(--e-ease);
           transition: opacity 260ms var(--e-ease);
}

.e-call[hidden]{ display: none; }
.e-call.active{ opacity: 1; }

.e-call__sheet{
   width: 100%;
   max-height: 80vh;
   overflow-y: auto;
   padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
   background: #FFFFFF;
   border-radius: 22px 22px 0 0;
   outline: none;
   -webkit-transform: translateY(100%);
       -ms-transform: translateY(100%);
           transform: translateY(100%);
   -webkit-transition: transform 320ms var(--e-ease);
           transition: transform 320ms var(--e-ease);
}

.e-call.active .e-call__sheet{
   -webkit-transform: translateY(0);
       -ms-transform: translateY(0);
           transform: translateY(0);
}

.e-call__handle{
   width: 40px;
   height: 4px;
   margin: 4px auto 12px;
   border-radius: 999px;
   background: rgba(4, 28, 18, .18);
}

.e-call__head{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   margin: 0 0 8px;
}

.e-call__title{
   margin: 0;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: .03em;
   color: var(--e-heading, #041C12);
}

.e-call__close{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 50%;
   background: none;
   color: rgba(4, 28, 18, .45);
   cursor: pointer;
}

.e-call__list{
   margin: 0;
   padding: 0;
   list-style: none;
}

.e-call__item{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 14px;
   min-height: 60px;
   padding: 10px 4px;
   text-decoration: none;
   color: var(--e-text, #041C12);
   -webkit-transition: opacity var(--e-fast) var(--e-ease);
           transition: opacity var(--e-fast) var(--e-ease);
}

.e-call__item:active{ opacity: .6; }

.e-call__list li + li .e-call__item{
   border-top: 1px solid var(--e-hairline, rgba(4,28,18,.10));
}

.e-call__icon{
   -webkit-box-flex: 0;
       -ms-flex: 0 0 44px;
           flex: 0 0 44px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   /* Глиф контрастний до фону кружка (той самий контраст, що й у кнопках). */
   color: var(--e-button-text, #041C12);
   background: var(--e-button-bg, #F0C47A);
}

.e-call__label{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   gap: 2px;
}

.e-call__name{
   font-size: 15px;
   font-weight: 600;
}

.e-call__phone{
   font-size: 13px;
   font-variant-numeric: tabular-nums;
   color: rgba(4, 28, 18, .55);
}

/* Логотип у підвалі. */
.footer-signature{
   width: 190px;
   max-width: 60%;
   height: auto;
   aspect-ratio: 368.5 / 212.6;
   margin: 0 auto;
}


/* =========================================================================
   СТОРІНКА «ЧИМ ЗАЙНЯТИСЯ СЬОГОДНІ»
   ========================================================================= */

.e-program__head{
   margin: 8px 0 20px;
   text-align: center;
}

.e-program__date{
   display: inline-block;
   margin: 0 0 6px;
   padding: 4px 14px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--e-button-text, #041C12);
   background: var(--e-button-bg, #F0C47A);
   border-radius: 999px;
}

.e-program__title{
   margin: 0;
   font-size: 26px;
   line-height: 1.1;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-heading, #041C12);
}

.e-program__list{
   margin: 0;
   padding: 0;
   list-style: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   gap: 16px;
}

.e-program__card{
   display: block;
   overflow: hidden;
   text-decoration: none;
   color: var(--e-text, #041C12);
   background: #FFFFFF;
   border-radius: 18px;
   box-shadow: var(--e-shadow-card, 0 6px 18px rgba(4,28,18,.14));
   -webkit-transition: transform var(--e-fast, 180ms) var(--e-ease, ease), box-shadow var(--e-fast, 180ms) var(--e-ease, ease);
           transition: transform var(--e-fast, 180ms) var(--e-ease, ease), box-shadow var(--e-fast, 180ms) var(--e-ease, ease);
}

.e-program__card:active{
   -webkit-transform: scale(.99);
           transform: scale(.99);
   box-shadow: var(--e-shadow-card-press, 0 2px 8px rgba(4,28,18,.18));
}

.e-program__photo{
   position: relative;
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}

.e-program__photo img{
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
}

.e-program__time{
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 6px 12px;
   font-size: 15px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--e-button-text, #041C12);
   background: var(--e-button-bg, #F0C47A);
   border-radius: 999px;
   box-shadow: 0 2px 10px rgba(4,28,18,.3);
}

.e-program__body{
   display: block;
   padding: 14px 16px 16px;
}

.e-program__time--inline{
   position: static;
   display: inline-block;
   margin: 0 0 8px;
   box-shadow: none;
}

.e-program__name{
   display: block;
   font-family: 'Beatrix Antiqua', 'Geometria', serif;
   font-size: 18px;
   line-height: 1.25;
   color: var(--e-heading, #041C12);
}

.e-program__text{
   display: block;
   margin: 6px 0 0;
   font-size: 14px;
   line-height: 1.45;
   color: rgba(4, 28, 18, .65);
}

.e-program__empty{
   padding: 40px 16px;
   text-align: center;
   font-size: 16px;
   line-height: 1.5;
   color: rgba(4, 28, 18, .6);
}

/* Нижня кнопка «Чим зайнятися сьогодні». */
.e-today-trigger{
   width: 100%;
   flex: 1 1 auto;
   text-decoration: none;
}

/* =========================================================================
   СТОРІНКА «СЬОГОДНІ»: фільтри, мета подій, страва дня, чекліст
   ========================================================================= */

/* --- Фільтри --- */
.e-filters{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   gap: 8px;
   margin: 0 0 18px;
}
.e-filter{
   font: inherit;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .02em;
   cursor: pointer;
   padding: 9px 16px;
   min-height: 40px;
   border: 1px solid var(--e-hairline, rgba(4,28,18,.12));
   border-radius: 999px;
   background: #FFFFFF;
   color: var(--e-text, #041C12);
   -webkit-transition: background-color var(--e-fast,180ms) var(--e-ease,ease), color var(--e-fast,180ms) var(--e-ease,ease), border-color var(--e-fast,180ms) var(--e-ease,ease);
           transition: background-color var(--e-fast,180ms) var(--e-ease,ease), color var(--e-fast,180ms) var(--e-ease,ease), border-color var(--e-fast,180ms) var(--e-ease,ease);
}
.e-filter.is-active{
   background: var(--e-header-bg, #23514c);
   border-color: var(--e-header-bg, #23514c);
   color: #FFFFFF;
}

/* --- Мета події (локація, тривалість) --- */
.e-program__meta{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   gap: 6px 14px;
   margin: 8px 0 0;
}
.e-program__meta-item{
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 5px;
   font-size: 13px;
   color: rgba(4, 28, 18, .6);
}
.e-program__meta-item--time::before{
   content: "";
   width: 4px; height: 4px;
   border-radius: 50%;
   background: currentColor;
   opacity: .5;
}
.e-program__signup{
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   width: auto;
   min-height: 44px;
   margin: 14px 0 0;
   padding: 0 22px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-button-text, #041C12);
}

/* --- Страва дня --- */
.e-dish{ margin: 32px 0 0; }
.e-dish__label{
   margin: 0 0 12px;
   font-size: 20px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--e-heading, #041C12);
}
.e-dish__card{
   overflow: hidden;
   background: #FFFFFF;
   border-radius: 18px;
   box-shadow: var(--e-shadow-card, 0 6px 18px rgba(4,28,18,.14));
}
.e-dish__photo{ aspect-ratio: 16 / 10; overflow: hidden; }
.e-dish__photo img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.e-dish__body{ padding: 16px; }
.e-dish__name{
   margin: 0 0 6px;
   font-family: 'Beatrix Antiqua', 'Geometria', serif;
   font-size: 20px;
   color: var(--e-heading, #041C12);
}
.e-dish__text{ margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: rgba(4,28,18,.7); }
.e-dish__actions{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
.e-dish__actions .middle-button{
   -webkit-box-flex: 1; -ms-flex: 1 1 140px; flex: 1 1 140px;
   min-height: 46px;
   font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
   color: var(--e-button-text, #041C12);
}
.e-dish__call{
   background: var(--e-header-bg, #23514c) !important;
   color: #FFFFFF !important;
}

/* --- Чекліст --- */
.e-checklist{
   margin: 32px 0 0;
   padding: 20px 18px;
   background: #FFFFFF;
   border-radius: 18px;
   box-shadow: var(--e-shadow-card, 0 6px 18px rgba(4,28,18,.14));
}
.e-checklist__head{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   gap: 12px;
   margin: 0 0 14px;
}
.e-checklist__title{
   margin: 0;
   font-size: 18px;
   letter-spacing: .02em;
   color: var(--e-heading, #041C12);
}
.e-checklist__progress{
   -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
   font-size: 13px;
   font-weight: 600;
   color: var(--e-button-text, #041C12);
   background: var(--e-button-bg, #F0C47A);
   padding: 5px 12px;
   border-radius: 999px;
   white-space: nowrap;
}
.e-checklist__list{ margin: 0; padding: 0; list-style: none; }
.e-checklist__label{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   gap: 12px;
   min-height: 48px;
   cursor: pointer;
}
.e-checklist__item + .e-checklist__item .e-checklist__label{
   border-top: 1px solid var(--e-hairline, rgba(4,28,18,.08));
}
.e-checklist__box{ position: absolute; opacity: 0; width: 0; height: 0; }
.e-checklist__mark{
   -webkit-box-flex: 0; -ms-flex: 0 0 24px; flex: 0 0 24px;
   width: 24px; height: 24px;
   border: 2px solid rgba(4,28,18,.25);
   border-radius: 7px;
   position: relative;
   -webkit-transition: background-color var(--e-fast,180ms) var(--e-ease,ease), border-color var(--e-fast,180ms) var(--e-ease,ease);
           transition: background-color var(--e-fast,180ms) var(--e-ease,ease), border-color var(--e-fast,180ms) var(--e-ease,ease);
}
.e-checklist__mark::after{
   content: "";
   position: absolute;
   left: 7px; top: 3px;
   width: 6px; height: 11px;
   border: solid #FFFFFF;
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg) scale(0);
       -ms-transform: rotate(45deg) scale(0);
           transform: rotate(45deg) scale(0);
   -webkit-transition: transform var(--e-fast,180ms) var(--e-ease,ease);
           transition: transform var(--e-fast,180ms) var(--e-ease,ease);
}
.e-checklist__box:checked + .e-checklist__mark{
   background: var(--e-header-bg, #23514c);
   border-color: var(--e-header-bg, #23514c);
}
.e-checklist__box:checked + .e-checklist__mark::after{
   -webkit-transform: rotate(45deg) scale(1);
       -ms-transform: rotate(45deg) scale(1);
           transform: rotate(45deg) scale(1);
}
.e-checklist__box:focus-visible + .e-checklist__mark{
   outline: 2px solid var(--e-button-bg, #F0C47A);
   outline-offset: 2px;
}
.e-checklist__text{ font-size: 15px; line-height: 1.35; }
.e-checklist__item.is-done .e-checklist__text{
   color: rgba(4, 28, 18, .45);
   text-decoration: line-through;
}

/* Кнопка-телефон у шапці: прибираємо сірий фон і рамку браузерної кнопки. */
.header-phone{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 40px;
   height: 40px;
   padding: 0;
   margin: 0;
   border: 0;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   cursor: pointer;
}
.header-phone img{
   width: 24px;
   height: 24px;
}