/*
 * 1001 ЗАМОК — обновление дизайна (2026)
 * Подключается ПОСЛЕ css/style.css и не зависит от сборки gulp/less,
 * поэтому не затирается при пересборке основного стиля.
 */

/* ============ Общее: свежесть и лёгкость ============ */
body {
  background: #f3f6f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #0096f0;
  outline-offset: 3px;
}

.section-header {
  height: auto;
  min-height: 731px;
}

/* ============ Форма обратного звонка ============ */

/* Ссылка «Политика конфиденциальности» в жёлтой форме была жёлтой — не видно. */
.modal-body .underline-link,
.modal-body .underline-link:visited {
  color: #a82222;
}
.modal-body .underline-link:hover,
.modal-body .underline-link:focus {
  color: #7a1212;
}
/* отступ, чтобы ссылка не прилипала к кнопке «Вызвать мастера» */
.modal-body .underline-link {
  display: inline-block;
  margin-top: 18px;
  padding: 4px 0;
}

.modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.modal-body .form-control {
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.modal-body .form-control:focus {
  border-color: #cc3333;
  box-shadow: 0 0 0 4px rgba(204, 51, 51, .22);
}

/* ============ Кнопки ============ */
.btn {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
/* Жёлтые кнопки с полосатой «предупреждающей» рамкой (фон-картинка из основных стилей) —
   оставляем как есть, добавляем только мягкую подсветку и отклик на наведение. */
.btn-primary {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px);
  filter: brightness(1.07) drop-shadow(0 10px 14px rgba(0, 0, 0, .3));
}
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(.96) drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}
.btn-danger {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(204, 51, 51, .35);
}
.btn-danger:hover,
.btn-danger:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(204, 51, 51, .45);
}

/* ============ Раздел «Наши услуги»: блоки со скруглением 10px ============ */
.section-services {
  text-align: left; /* выравнивание «по ширине» давало рваные пробелы в узких колонках */
}
.section-services .service {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 60, 120, .08);
  transition: box-shadow .3s ease, transform .7s ease, opacity .7s ease;
}
.section-services .service.is-visible:hover,
.section-services .service:not(.reveal):hover {
  box-shadow: 0 14px 40px rgba(0, 60, 120, .16);
  transform: translateY(-4px);
}
.section-services .text > .price {
  color: #cc3333;
}
.section-services .img-wrapper > img {
  display: block;
}

/* ============ Преимущества, иконки, логотипы ============ */
.section-benefits .benefit img,
.section-methods .icon,
.section-troubles .story-item {
  transition: transform .3s ease;
}
.section-benefits .benefit:hover img,
.section-methods .icons-row > div:hover .icon,
.section-troubles .story-wrapper:hover .story-item {
  transform: translateY(-5px) scale(1.04);
}
.section-description .trade-mark img {
  border-radius: 10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.section-description .trade-mark img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

/* ============ Таблицы цен ============ */
.section-price .price-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 60, 120, .10);
}
.section-price .price-table > tbody > tr > td {
  padding: 14px 18px;
  transition: background-color .2s ease;
}
.section-price .price-table > tbody > tr:nth-child(even) > td {
  background: #f6faff;
}
.section-price .price-table > tbody > tr:hover > td {
  background: #fff4c2;
}
.section-price .price-table > tbody > tr > td:nth-child(2) {
  font-weight: 700;
  color: #cc3333;
}

/* ============ Верхняя панель ============ */
.site-navbar {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}
.site-navbar .navbar-nav > li > a {
  transition: background-color .2s ease, color .2s ease;
}

/* ============ Появление блоков при прокрутке ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============ АНИМАЦИИ ВЫЗОВА ============ */

/* --- Зелёная круглая кнопка вызова (мобильные и планшеты) --- */
.fly-btn {
  background: #2dc149;
  box-shadow: 0 6px 20px rgba(45, 193, 73, .55);
  will-change: transform, box-shadow;
  -webkit-animation: fly-pulse 2s ease-out infinite, fly-jump 2.6s ease-in-out infinite;
  animation: fly-pulse 2s ease-out infinite, fly-jump 2.6s ease-in-out infinite;
}
/* трубка вынесена в псевдоэлемент, чтобы трясти её отдельно от кнопки */
.fly-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../img/call-now.png) no-repeat 50% 50%;
  background-size: 45%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: fly-ring 2.6s ease-in-out infinite;
  animation: fly-ring 2.6s ease-in-out infinite;
}

@-webkit-keyframes fly-pulse {
  0%   { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 0 rgba(45, 193, 73, .55); }
  70%  { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 24px rgba(45, 193, 73, 0); }
  100% { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 0 rgba(45, 193, 73, 0); }
}
@keyframes fly-pulse {
  0%   { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 0 rgba(45, 193, 73, .55); }
  70%  { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 24px rgba(45, 193, 73, 0); }
  100% { box-shadow: 0 6px 20px rgba(45, 193, 73, .55), 0 0 0 0 rgba(45, 193, 73, 0); }
}

/* кнопка подпрыгивает, потом пауза */
@-webkit-keyframes fly-jump {
  0%, 40%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  8%  { -webkit-transform: translateY(-14px); transform: translateY(-14px); }
  16% { -webkit-transform: translateY(0); transform: translateY(0); }
  24% { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
  32% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fly-jump {
  0%, 40%, 100% { transform: translateY(0); }
  8%  { transform: translateY(-14px); }
  16% { transform: translateY(0); }
  24% { transform: translateY(-7px); }
  32% { transform: translateY(0); }
}

/* трубка трясётся как при звонке */
@-webkit-keyframes fly-ring {
  0%, 45%, 100% { -webkit-transform: rotate(0); transform: rotate(0); }
  5%, 15%, 25%  { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
  10%, 20%, 30% { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
  38%           { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }
}
@keyframes fly-ring {
  0%, 45%, 100% { transform: rotate(0); }
  5%, 15%, 25%  { transform: rotate(-20deg); }
  10%, 20%, 30% { transform: rotate(20deg); }
  38%           { transform: rotate(-8deg); }
}

/* --- Номера телефонов: короткая тряска раз в несколько секунд --- */
.request,
.site-header .contacts .phone,
.section-call .phone,
.site-navbar .btn-primary,
.phone-footer {
  display: inline-block;
}
.site-header .contacts .phone,
.section-call .phone {
  display: block; /* как было в основных стилях */
}
.phone-footer {
  margin: 0;
}

.request,
.site-header .contacts .phone,
.section-call .phone,
.phone-footer {
  -webkit-animation: number-shake 5s ease-in-out infinite;
  animation: number-shake 5s ease-in-out infinite;
}
.section-call .phone { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.phone-footer        { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.site-header .contacts .phone { -webkit-animation-delay: .6s; animation-delay: .6s; }

@-webkit-keyframes number-shake {
  0%, 68%, 100% { -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); }
  71%, 77%, 83% { -webkit-transform: translateX(-4px) rotate(-1.2deg); transform: translateX(-4px) rotate(-1.2deg); }
  74%, 80%, 86% { -webkit-transform: translateX(4px) rotate(1.2deg); transform: translateX(4px) rotate(1.2deg); }
  89%           { -webkit-transform: translateX(-2px) rotate(0); transform: translateX(-2px) rotate(0); }
}
@keyframes number-shake {
  0%, 68%, 100% { transform: translateX(0) rotate(0); }
  71%, 77%, 83% { transform: translateX(-4px) rotate(-1.2deg); }
  74%, 80%, 86% { transform: translateX(4px) rotate(1.2deg); }
  89%           { transform: translateX(-2px) rotate(0); }
}

/* «1001» мягко пульсирует свечением */
.phone strong,
.request strong,
.phone-footer strong {
  -webkit-animation: digits-glow 2.4s ease-in-out infinite;
  animation: digits-glow 2.4s ease-in-out infinite;
}
@-webkit-keyframes digits-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 200, 0, 0); }
  50%      { text-shadow: 0 0 14px rgba(255, 200, 0, .95); }
}
@keyframes digits-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 200, 0, 0); }
  50%      { text-shadow: 0 0 14px rgba(255, 200, 0, .95); }
}
.section-call .phone strong {
  -webkit-animation-name: digits-glow-red;
  animation-name: digits-glow-red;
}
@-webkit-keyframes digits-glow-red {
  0%, 100% { text-shadow: 0 0 0 rgba(204, 51, 51, 0); }
  50%      { text-shadow: 0 0 12px rgba(204, 51, 51, .55); }
}
@keyframes digits-glow-red {
  0%, 100% { text-shadow: 0 0 0 rgba(204, 51, 51, 0); }
  50%      { text-shadow: 0 0 12px rgba(204, 51, 51, .55); }
}

/* большая жёлтая кнопка с номером в шапке: мягкое свечение по форме кнопки */
.request {
  -webkit-animation: number-shake 5s ease-in-out infinite, request-glow 2.4s ease-in-out infinite;
  animation: number-shake 5s ease-in-out infinite, request-glow 2.4s ease-in-out infinite;
}
@-webkit-keyframes request-glow {
  0%, 100% { -webkit-filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
  50%      { -webkit-filter: drop-shadow(0 0 16px rgba(255, 215, 0, .95)); filter: drop-shadow(0 0 16px rgba(255, 215, 0, .95)); }
}
@keyframes request-glow {
  0%, 100% { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 215, 0, .95)); }
}

/* баннер с телефоном в шапке (мобильные): лёгкое покачивание */
.phone-bl-1 img.phone {
  -webkit-animation: banner-float 3s ease-in-out infinite;
  animation: banner-float 3s ease-in-out infinite;
}
@-webkit-keyframes banner-float {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%      { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@keyframes banner-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* заголовок в шапке: мягкое «дыхание» свечения */
.section-header h1.glowing-text {
  -webkit-animation: title-glow 4s ease-in-out infinite;
  animation: title-glow 4s ease-in-out infinite;
}
@-webkit-keyframes title-glow {
  0%, 100% { text-shadow: 0 0 32px #ffcc00, 0 0 18px #ffcc00, 0 0 6px #ffcc00; }
  50%      { text-shadow: 0 0 44px #ffdc4d, 0 0 26px #ffdc4d, 0 0 10px #ffcc00; }
}
@keyframes title-glow {
  0%, 100% { text-shadow: 0 0 32px #ffcc00, 0 0 18px #ffcc00, 0 0 6px #ffcc00; }
  50%      { text-shadow: 0 0 44px #ffdc4d, 0 0 26px #ffdc4d, 0 0 10px #ffcc00; }
}

/* при наведении/нажатии тряску останавливаем */
.request:hover,
.section-call .phone:hover,
.phone-footer:hover,
.fly-btn:active {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation: none !important;
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}