/* =========================================================
   Ортодонт — кнопка дзвінка та мобільне меню
   ========================================================= */

/* ---------- Плаваюча кнопка дзвінка ---------- */
.call-fab {
  position: fixed; right: 28px; bottom: 28px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none;
}
.call-btn {
  position: relative; width: 68px; height: 68px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: linear-gradient(145deg, #74a08b, #4b6a5e);
  color: #fff;
  box-shadow: 0 16px 34px -12px rgba(47, 66, 59, .65), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(40px) scale(0) rotate(-120deg);
  opacity: 0;
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s, box-shadow .3s, background .3s;
  -webkit-tap-highlight-color: transparent;
}
.call-fab.is-visible .call-btn { transform: none; opacity: 1; }
.call-btn:hover { box-shadow: 0 20px 40px -12px rgba(47, 66, 59, .8), inset 0 1px 0 rgba(255,255,255,.25); }
.call-btn:active { transform: scale(.92); }
.call-btn:focus-visible { outline: 3px solid #f0d9cf; outline-offset: 4px; }

/* хвилі, що розходяться від кнопки */
.call-btn__wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(116, 160, 139, .7);
  opacity: 0; pointer-events: none;
}
.call-fab.is-visible .call-btn__wave { animation: callWave 3s cubic-bezier(.2, .6, .3, 1) infinite; }
.call-fab.is-visible .call-btn__wave.w2 { animation-delay: .5s; }
.call-fab.is-visible .call-btn__wave.w3 { animation-delay: 1s; }
@keyframes callWave {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

/* слухавка «дзвонить»: серія швидких поштовхів кожні кілька секунд */
.call-btn__icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.call-btn__icon svg { width: 30px; height: 30px; fill: currentColor; }
.call-btn__icon--close svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.call-fab.is-visible .call-btn__icon--phone svg { animation: ring 3s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ring {
  0%, 52%, 100% { transform: rotate(0) scale(1); }
  4% { transform: rotate(-22deg) scale(1.12); }
  8% { transform: rotate(20deg) scale(1.12); }
  12% { transform: rotate(-18deg) scale(1.12); }
  16% { transform: rotate(16deg) scale(1.12); }
  20% { transform: rotate(-12deg) scale(1.08); }
  24% { transform: rotate(8deg) scale(1.04); }
  28% { transform: rotate(0) scale(1); }
}
.call-btn__icon--close { opacity: 0; transform: rotate(-90deg) scale(.4); }
.call-fab.is-open .call-btn__icon--phone { opacity: 0; transform: rotate(90deg) scale(.4); }
.call-fab.is-open .call-btn__icon--close { opacity: 1; transform: none; }
.call-fab.is-open .call-btn__wave { animation: none; opacity: 0; }
.call-fab.is-open .call-btn { background: linear-gradient(145deg, #5f8574, #3e5a4f); }

/* підказка біля кнопки */
.call-tip {
  position: absolute; right: 84px; bottom: 18px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; color: var(--sage-deep, #4b6a5e);
  font: 600 14px/1.2 var(--sans, Inter, sans-serif); white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(47, 66, 59, .45);
  opacity: 0; transform: translateX(14px); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.call-tip::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
  background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
@media (hover: hover) {
  .call-fab.is-visible:not(.is-open) .call-btn:hover ~ .call-tip,
  .call-fab.is-visible:not(.is-open):hover .call-tip { opacity: 1; transform: none; animation: none; }
}
/* одноразова підказка, коли кнопка вперше з'являється */
.call-fab.is-visible .call-tip { animation: tipOnce 4s 1s both; }
@keyframes tipOnce {
  0% { opacity: 0; transform: translateX(14px); }
  12%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(14px); }
}
.call-fab.is-open .call-tip { animation: none; opacity: 0; }

/* список номерів */
.call-panel {
  position: absolute; right: 0; bottom: 86px; min-width: 250px;
  padding: 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(47, 66, 59, .5), 0 0 0 1px rgba(231, 225, 216, .9);
  transform-origin: 100% 100%;
  transform: translateY(16px) scale(.6); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s, visibility 0s .45s;
  pointer-events: auto;
}
.call-fab.is-open .call-panel { transform: none; opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.call-panel__title { font: 600 13px/1.3 var(--sans, Inter, sans-serif); color: var(--muted, #7b8782); padding: 4px 8px 10px; }
.call-panel__num {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  font: 600 17px/1.2 var(--sans, Inter, sans-serif); color: var(--text, #34413c); letter-spacing: .01em;
  opacity: 0; transform: translateX(16px);
  transition: background .25s, color .25s, opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.call-fab.is-open .call-panel__num { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 80ms), calc(var(--i) * 70ms + 80ms), calc(var(--i) * 70ms + 80ms), calc(var(--i) * 70ms + 80ms); }
.call-panel__num:hover, .call-panel__num:focus { background: var(--sage-soft, #e8f0eb); color: var(--sage-deep, #4b6a5e); }
.call-panel__ico {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-soft, #e8f0eb); color: var(--sage-dark, #5f8574);
  transition: background .25s, color .25s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.call-panel__ico svg { width: 17px; height: 17px; fill: currentColor; }
.call-panel__num:hover .call-panel__ico { background: var(--sage-dark, #5f8574); color: #fff; transform: rotate(-14deg) scale(1.08); }

/* ---------- Мобільне меню ---------- */
.m-panel { display: none; }
@media (max-width: 767px) {
  .header-section > .container { flex-wrap: nowrap; }
  .main-menu { display: none !important; }

  .nav-switch {
    position: relative; top: auto; right: auto; height: auto;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sage-soft, #e8f0eb); cursor: pointer; z-index: 1002;
    -webkit-tap-highlight-color: transparent;
    transition: background .3s;
  }
  .burger { position: relative; width: 20px; height: 14px; display: block; }
  .burger i {
    position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px;
    background: var(--sage-deep, #4b6a5e);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s, width .3s, top .3s;
  }
  .burger i:nth-child(1) { top: 0; }
  .burger i:nth-child(2) { top: 6px; width: 70%; }
  .burger i:nth-child(3) { top: 12px; }
  .menu-open .nav-switch { background: var(--sage-dark, #5f8574); }
  .menu-open .burger i { background: #fff; }
  .menu-open .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .menu-open .burger i:nth-child(2) { opacity: 0; width: 0; }
  .menu-open .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .m-panel {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 99;
    padding: 110px 24px 32px; overflow-y: auto;
    background:
      radial-gradient(420px 320px at 100% 0%, var(--sage-soft, #e8f0eb), transparent 70%),
      radial-gradient(380px 300px at 0% 100%, var(--blush, #f6e9e2), transparent 70%),
      var(--bg, #faf7f3);
    clip-path: circle(0 at calc(100% - 43px) 43px);
    visibility: hidden;
    transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s;
  }
  .menu-open .m-panel { clip-path: circle(150% at calc(100% - 43px) 43px); visibility: visible; transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
  .menu-open, .menu-open body { overflow: hidden; }

  .m-nav { display: flex; flex-direction: column; gap: 4px; }
  .m-link {
    display: flex; align-items: baseline; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--line, #e7e1d8);
    font-family: var(--serif, Georgia, serif); font-size: 34px; line-height: 1.2; color: var(--text, #34413c);
    opacity: 0; transform: translateY(30px);
    transition: opacity .4s, transform .6s cubic-bezier(.2, .7, .2, 1), color .25s;
  }
  .m-link__num { font: 600 12px/1 var(--sans, Inter, sans-serif); color: var(--sage, #8fae9f); letter-spacing: .1em; }
  .m-link.is-active { color: var(--sage-dark, #5f8574); }
  .m-link.is-active::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage, #8fae9f); margin-left: auto; align-self: center; }
  .m-link:active { color: var(--sage-dark, #5f8574); }
  .menu-open .m-link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + .25s); }

  .m-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  .m-info .hi-item {
    display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px; max-width: none; flex: none;
    border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px var(--line, #e7e1d8);
    opacity: 0; transform: translateY(24px);
    transition: opacity .4s, transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .menu-open .m-info .hi-item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + .2s); }
  .m-info .hi-item .hs-icon { width: 34px; height: 34px; flex: none; }
  .m-info .hi-item .hi-content h6 { font-size: 14px; }
  .m-info .hi-item .hi-content a h6 { font-size: 15px; padding: 2px 0; color: var(--sage-deep, #4b6a5e); }
  .m-info .hi-item .hi-content p { font-size: 12px; }

  /* кнопка дзвінка на телефоні */
  .call-fab { right: 18px; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .call-btn { width: 62px; height: 62px; }
  .call-tip { right: 76px; bottom: 15px; font-size: 13px; }
  .call-panel { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); min-width: 0; transform-origin: calc(100% - 40px) 100%; }
  .call-panel__num { font-size: 19px; padding: 14px 12px; }
  .call-panel__ico { flex-basis: 42px; height: 42px; }
  .menu-open .call-fab { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .call-btn, .call-btn__icon svg, .call-btn__wave, .m-panel, .m-link, .m-info .hi-item { animation: none !important; transition: none !important; }
}

/* =========================================================
   Мобільна версія — доопрацювання
   ========================================================= */
@media (max-width: 767px) {
  /* шаблон ховав на телефонах «Послуги» і «Відгуки» (.ba-bg) — повертаємо */
  .ba-bg { display: block !important; }

  .container { padding-left: 20px; padding-right: 20px; }
  .row { margin-left: -10px; margin-right: -10px; }
  .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }

  /* типографіка */
  .section-title { margin-bottom: 36px; }
  .section-title h2, .about-text h2, .servis-title, .heading-bottom { font-size: 28px !important; line-height: 1.2; }
  .hs-item h2 { font-size: 34px; }
  .hs-item p { font-size: 16px; }
  p { font-size: 15px; }

  /* «Ми піклуємося»: відступи від країв */
  .about-section .about-text, .about-text__paddingleft { padding-left: 10px !important; padding-right: 10px !important; }
  .scale::before { left: -8px; top: -8px; }

  /* цифри — по дві в ряд */
  .facts-section { padding: 70px 0; }
  .facts-section .row > .fact { flex: 0 0 50%; max-width: 50%; }
  .facts-section .fact { padding: 22px 6px 16px; }
  .facts-section .fact::before { inset: 0 5px; }
  .facts-section .fact h2 { font-size: 34px; }
  .facts-section .fact p { font-size: 12px; line-height: 1.4; }
  .fact i, .fact i::before { font-size: 30px; }
  .ba-title { padding-bottom: 28px; }

  /* послуги — компактні картки з іконкою зліва */
  .services-section .row { row-gap: 14px; }
  .services-section .service { display: flex; align-items: flex-start; }
  .services-section .service::before { inset: 0 10px; }
  .services-section .service .service-icon { margin: 22px 0 22px 22px; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 15px; }
  .services-section .service .service-content { padding: 20px 20px 22px 16px; }
  .service-content h4 { font-size: 19px; margin-bottom: 6px; }
  .service-content p { font-size: 14px; line-height: 1.6; }

  /* галерея — сітка 2×2 */
  .gallery-section { padding: 10px 0 70px; }
  .gallery-section .container-fluid { padding: 0 20px; }
  .gallery-section .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
  .gallery-section .card__inner { max-width: none; padding: 0 !important; margin: 0; }
  .card__inner .work__item { aspect-ratio: 1 / 1; border-radius: 16px; }
  .text-img { font-size: 15px; opacity: 1; transform: none; top: auto; bottom: 0; padding: 26px 10px 10px; text-align: left;
    background: linear-gradient(0deg, rgba(47,66,59,.75), transparent); border-radius: 0 0 16px 16px; }
  .card__inner .work__item img { opacity: 1 !important; }

  /* відгуки */
  .testimonials-section { padding: 64px 0 56px; }
  .testimonial-item .ts-content, .owl-item.center .testimonial-item .ts-content { padding: 30px 24px 24px; transform: none; margin: 0 4px; }
  .owl-item.center .testimonial-item .ts-content p, .testimonial-item .ts-content p { font-size: 15px; }
  .testimonials-slider .owl-nav { margin-top: 20px; }

  /* банери */
  .banner-section .akciy, .newsletter-section .akciy { padding: 28px 22px; border-radius: 22px; }
  .banner-text h4 { font-size: 23px; }
  .newsletter-section { padding-bottom: 64px; }

  /* внутрішні сторінки */
  .page-info-section { min-height: 0; padding: 56px 0 46px; }
  .page-info-section h2 { font-size: 36px; }
  .services-section .section-title > h3 { font-size: 19px; line-height: 1.5; margin-bottom: 24px; }
  .sf-box { padding: 36px 26px 30px; }
  .about-section, .intro-section { padding: 56px 0; }
  .intro-text p, .paragraph { text-align: left !important; }
  .left { padding: 0 10px 40px !important; text-align: left !important; }
  .carusel-borrom { padding-left: 0 !important; }
  .team-track { grid-auto-columns: 72%; gap: 14px; }

  /* футер */
  .footer-top-section { padding: 70px 0 30px; }
  .footer-widget { margin-bottom: 34px; }
  .footer-widget .fw-timetable { padding: 26px 22px 16px; }
  .footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 0; }
  .footer-menu li { margin: 0 !important; }
  /* місце під кнопку дзвінка внизу */
  .footer-section { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* зручні для пальця зони натискання */
  .acc-summary { min-height: 60px; }
  .site-btn { padding: 15px 26px; }
}

/* вступ до розділу «Хірургія» — спокійніший розмір */
.services-section .section-title > h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 23px; line-height: 1.55; color: var(--muted); max-width: 820px; margin: 0 auto 32px; }

/* =========================================================
   Закріплена шапка (працює разом з js/ui.js)
   ========================================================= */
.has-fixed-header .header-section {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: box-shadow .4s ease, background .4s ease;
}
.header-spacer { display: none; }
.has-fixed-header .header-spacer { display: block; }
/* інфо-смуга плавно згортається, коли сторінку прокрутили */
.has-fixed-header .header-info {
  max-height: 240px; overflow: hidden;
  transition: max-height .5s cubic-bezier(.2,.7,.2,1), padding .5s cubic-bezier(.2,.7,.2,1), opacity .3s, border-color .3s;
}
.has-fixed-header .header-section.is-scrolled .header-info { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-color: transparent; }
.header-section.no-anim, .header-section.no-anim * { transition: none !important; }
/* щоб якорі не ховались під шапкою */
html { scroll-padding-top: 100px; }