/* floating-buttons.css
   ИЗМЕНЁННАЯ ВЕРСИЯ:
   круги 46px вместо 50/56px,
   иконки 18px,
   зелёные цвета точно как на странице «Бурение».
*/

:root {
  --floating-button-size: 50px;
  --floating-button-icon-size: 20px;

  /* Нижняя кнопка */
  --floating-green: #117f8c;
  --floating-green-dark: #0d6e79;
  --floating-green-hover: #1694a2;

  /* Верхняя кнопка */
  --floating-ring-fill: #b9dddd;
  --floating-ring-fill-soft: rgba(185, 221, 221, 0.28);
  --floating-ring-border: rgba(17, 127, 140, 0.16);
  --floating-arrow: #27344b;
}

/* =========================
   КОМПЬЮТЕР
   ========================= */
@media (min-width: 769px) {

  /* Нижняя кнопка «Контакты» */
  html body .site-header__desktop-floating-contact {
    position: fixed !important;
    right: 20px !important;
    bottom: 18px !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    z-index: 1495 !important;
    display: block !important;
    pointer-events: none !important;
  }

  html body .site-header__desktop-floating-contact .site-header__floating-contact {
    position: static !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    display: block !important;
    pointer-events: auto !important;
  }

  html body .site-header__desktop-floating-contact .site-header__icon-button {
    box-sizing: border-box !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;
    min-width: var(--floating-button-size) !important;
    min-height: var(--floating-button-size) !important;
    max-width: var(--floating-button-size) !important;
    max-height: var(--floating-button-size) !important;

    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid var(--floating-green) !important;
    border-radius: 50% !important;

    background: linear-gradient(
      180deg,
      var(--floating-green) 0%,
      var(--floating-green-dark) 100%
    ) !important;

    color: #ffffff !important;

    box-shadow:
      0 10px 24px rgba(22, 130, 58, 0.32) !important;

    transform: none !important;
  }

  html body .site-header__desktop-floating-contact .site-header__icon-button:hover,
  html body .site-header__desktop-floating-contact .site-header__icon-button:focus-visible {
    border-color: var(--floating-green-hover) !important;

    background: linear-gradient(
      180deg,
      var(--floating-green-hover) 0%,
      var(--floating-green-dark) 100%
    ) !important;

    color: #ffffff !important;
    transform: translateY(-2px) !important;
  }

  html body .site-header__desktop-floating-contact .site-header__icon-button svg {
    width: var(--floating-button-icon-size) !important;
    height: var(--floating-button-icon-size) !important;
    min-width: var(--floating-button-icon-size) !important;
    min-height: var(--floating-button-icon-size) !important;

    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  html body .site-header__desktop-floating-contact .site-header__icon-button svg path {
    stroke: #ffffff !important;
  }

  /* Верхняя кнопка «Наверх» */
  html body .back-to-top {
  box-sizing: border-box !important;

  right: 20px !important;
  bottom: 76px !important;

  width: var(--floating-button-size) !important;
  height: var(--floating-button-size) !important;
  min-width: var(--floating-button-size) !important;
  min-height: var(--floating-button-size) !important;
  max-width: var(--floating-button-size) !important;
  max-height: var(--floating-button-size) !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;

  color: var(--floating-arrow) !important;

  background:
    radial-gradient(
      circle at center,
      var(--floating-ring-fill-soft) 0 38%,
      transparent 62%
    ),
    conic-gradient(
      #0f7f8b var(--scroll-progress),
      rgba(185, 221, 221, 0.55) 0deg
    ) !important;

  box-shadow:
    0 10px 24px rgba(31, 41, 55, 0.10),
    inset 0 0 0 1px rgba(17, 127, 140, 0.08) !important;
}

  html body .back-to-top::before {
  inset: 6px !important;

  border: 1px solid var(--floating-ring-border) !important;
  border-radius: 50% !important;

  background: #fdfefe !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(17, 127, 140, 0.10) !important;
}

html body .back-to-top svg {
  width: var(--floating-button-icon-size) !important;
  height: var(--floating-button-icon-size) !important;
  min-width: var(--floating-button-icon-size) !important;
  min-height: var(--floating-button-icon-size) !important;

  color: var(--floating-arrow) !important;
  stroke: var(--floating-arrow) !important;
}

 html body .back-to-top svg path {
  stroke: var(--floating-arrow) !important;
}

} /* Закрываем стили компьютерной версии */


/* =========================
   ТЕЛЕФОН
   ========================= */
@media (max-width: 768px) {

  :root {
    --floating-button-size: 50px;
    --floating-button-icon-size: 20px;
  }


  /* Кнопка сообщений */
  html body .site-header__desktop-floating-contact {
    position: fixed !important;

    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    z-index: 1495 !important;
    display: block !important;
    pointer-events: none !important;
  }

  html body
  .site-header__desktop-floating-contact
  .site-header__floating-contact {
    position: static !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    display: block !important;
    pointer-events: auto !important;
  }

  html body
  .site-header__desktop-floating-contact
  .site-header__icon-button {
    box-sizing: border-box !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    min-width: var(--floating-button-size) !important;
    min-height: var(--floating-button-size) !important;

    max-width: var(--floating-button-size) !important;
    max-height: var(--floating-button-size) !important;

    padding: 0 !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid #117f8c !important;
    border-radius: 50% !important;

    background: linear-gradient(
      180deg,
      #117f8c 0%,
      #0d6e79 100%
    ) !important;

    color: #ffffff !important;

    box-shadow:
      0 10px 24px rgba(17, 127, 140, 0.30) !important;
  }

  html body
  .site-header__desktop-floating-contact
  .site-header__icon-button svg {
    width: var(--floating-button-icon-size) !important;
    height: var(--floating-button-icon-size) !important;

    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  html body
  .site-header__desktop-floating-contact
  .site-header__icon-button svg path {
    stroke: #ffffff !important;
  }


  /* Кнопка «Наверх» */
  html body .back-to-top {
    box-sizing: border-box !important;

    right: calc(12px + env(safe-area-inset-right, 0px)) !important;

    /* Кнопка находится прямо над кнопкой сообщений */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;

    width: var(--floating-button-size) !important;
    height: var(--floating-button-size) !important;

    min-width: var(--floating-button-size) !important;
    min-height: var(--floating-button-size) !important;

    max-width: var(--floating-button-size) !important;
    max-height: var(--floating-button-size) !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;

    color: #27344b !important;

    /* Светло-синий цвет */
    background:
      radial-gradient(
        circle at center,
        rgba(185, 221, 221, 0.28) 0 38%,
        transparent 62%
      ),
      conic-gradient(
        #0f7f8b var(--scroll-progress),
        rgba(185, 221, 221, 0.58) 0deg
      ) !important;

    box-shadow:
      0 10px 24px rgba(31, 41, 55, 0.10),
      inset 0 0 0 1px rgba(17, 127, 140, 0.08) !important;
  }

  html body .back-to-top::before {
    content: "" !important;
    position: absolute !important;

    inset: 6px !important;

    border: 1px solid rgba(17, 127, 140, 0.16) !important;
    border-radius: 50% !important;

    background: #fdfefe !important;

    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.85),
      0 0 10px rgba(17, 127, 140, 0.10) !important;
  }

  html body .back-to-top svg {
    position: relative !important;
    z-index: 2 !important;

    width: var(--floating-button-icon-size) !important;
    height: var(--floating-button-icon-size) !important;

    color: #27344b !important;
    stroke: #27344b !important;

    animation:
      mobileBackArrowMove 0.8s ease-in-out infinite !important;
  }

  html body .back-to-top svg path {
    color: #27344b !important;
    stroke: #27344b !important;
  }


  /* Прыжок всей кнопки */
  html body .back-to-top.is-visible {
    animation:
      mobileBackButtonJump 1.55s ease-in-out infinite !important;
  }

}


/* Анимация всей кнопки */
@keyframes mobileBackButtonJump {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.015);
  }
}


/* Анимация стрелки внутри */
@keyframes mobileBackArrowMove {
  0%,
  100% {
    transform: translateY(2px);
    opacity: 0.82;
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
/* =====================================================
   КНОПКА "НАВЕРХ" — ОДИН ЦВЕТ ВО ВСЕХ СОСТОЯНИЯХ
   ПК + ТЕЛЕФОН
   ===================================================== */

html body .back-to-top,
html body .back-to-top:hover,
html body .back-to-top:focus,
html body .back-to-top:focus-visible,
html body .back-to-top:active {

}


/* Внутренний белый круг тоже всегда одинаковый */
html body .back-to-top::before,
html body .back-to-top:hover::before,
html body .back-to-top:focus::before,
html body .back-to-top:focus-visible::before,
html body .back-to-top:active::before {

  border: 1px solid rgba(17, 127, 140, 0.16) !important;
  background: #fdfefe !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(17, 127, 140, 0.10) !important;
}


/* Стрелка не меняет цвет */
html body .back-to-top svg,
html body .back-to-top svg path,
html body .back-to-top:hover svg,
html body .back-to-top:hover svg path,
html body .back-to-top:focus svg,
html body .back-to-top:focus svg path,
html body .back-to-top:active svg,
html body .back-to-top:active svg path {

  color: #27344b !important;
  stroke: #27344b !important;
}
/* =====================================================
   КНОПКА "НАВЕРХ"
   Сохраняем прогресс прокрутки,
   но после клика цвет НЕ меняется
   ===================================================== */

html body .back-to-top:hover,
html body .back-to-top:focus,
html body .back-to-top:focus-visible,
html body .back-to-top:active {
  background:
    radial-gradient(
      circle at center,
      rgba(185, 221, 221, 0.28) 0 38%,
      transparent 62%
    ),
    conic-gradient(
      #0f7f8b var(--scroll-progress),
      rgba(185, 221, 221, 0.58) 0deg
    ) !important;

  color: #27344b !important;

  outline: none !important;
}


/* Внутренний белый круг тоже не меняется после клика */
html body .back-to-top:hover::before,
html body .back-to-top:focus::before,
html body .back-to-top:focus-visible::before,
html body .back-to-top:active::before {
  background: #fdfefe !important;
  border: 1px solid rgba(17, 127, 140, 0.16) !important;
}


/* Стрелка всегда одного цвета */
html body .back-to-top:hover svg,
html body .back-to-top:focus svg,
html body .back-to-top:focus-visible svg,
html body .back-to-top:active svg,
html body .back-to-top:hover svg path,
html body .back-to-top:focus svg path,
html body .back-to-top:focus-visible svg path,
html body .back-to-top:active svg path {
  color: #27344b !important;
  stroke: #27344b !important;
}