/* ===============================
   Страница услуги — с анимациями и блеском
=============================== */

/* Верх */
.single-service__top {
    padding: 32px 0 24px;
}

.single-service__top .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Контентная область */
.single-service__content-wrapper {
    padding-bottom: 80px;
}

/* Плавное появление карточки */
.single-service__inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: #fff;
    padding: 40px 40px 56px;
    border-radius: 24px;
    box-shadow: var(--shadow-light);

    opacity: 0;
    transform: translateY(12px);
    animation: single-service-fadeIn 0.5s ease-out forwards;
}

/* ===============================
   Главное изображение
=============================== */

.single-service__image {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.single-service__image img {
    width: 100%;
    max-width: 1100px;
    max-height: 420px;           /* уменьшенная высота */
    object-fit: cover;
    object-position: center;

    border-radius: 20px;
    box-shadow: var(--shadow-light);

    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

/* Лёгкий “дыхательный” эффект при ховере */
.single-service__image img:hover {
    transform: scale(1.015);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    filter: saturate(1.03);
}

/* ===============================
   Типографика текста
=============================== */

.single-service__content {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--color-dark);
    margin-bottom: 40px;

    animation: single-service-fadeIn 0.6s ease-out 0.1s forwards;
    opacity: 0;
    transform: translateY(8px);
}

.single-service__content p {
    margin-bottom: 16px;
}

/* Заголовки внутри контента */
.single-service__content h2,
.single-service__content h3 {
    margin: 28px 0 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
}

.single-service__content h2 { font-size: 28px; }
.single-service__content h3 { font-size: 22px; }

/* Списки */
.single-service__content ul,
.single-service__content ol {
    margin: 16px 0 20px 0;
    padding-left: 0;
    list-style: none;
}

.single-service__content li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
}

/* маркеры для UL */
.single-service__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* нумерация для OL */
.single-service__content ol {
    counter-reset: cnt;
}

.single-service__content ol li::before {
    counter-increment: cnt;
    content: counter(cnt) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 700;
}

/* Ссылки */
.single-service__content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: 0.25s;
}

.single-service__content a:hover {
    opacity: .8;
}




.back-btn {
    position: relative;
    overflow: hidden; /* для блика */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 28px;
    background-color: var(--color-accent);
    border-radius: var(--radius-small);

    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;

    box-shadow: 0 6px 18px rgba(255, 180, 40, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Блик как на баннере: бегущая полоска */
.back-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -30%;
    width: 45%;
    height: 200%;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.7) 45%,
        rgba(255,255,255,0) 100%
    );

    transform: translateX(-120%) skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}

/* при ховере запускаем блик и усиливаем тень */
.back-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(255, 180, 40, 0.45);
}

.back-btn:hover::before {
    opacity: 1;
    animation: back-btn-shine 0.8s ease-out forwards;
}

.back-btn__icon {
    font-size: 18px;
    font-weight: 700;
}

/* ===============================
   Адаптив
=============================== */

@media (max-width: 992px) {
    .single-service__inner {
        padding: 28px 24px 40px;
        border-radius: 20px;
    }

    .single-service__image img {
        max-height: 340px;
    }

    .single-service__content h2 { font-size: 24px; }
    .single-service__content h3 { font-size: 20px; }
}

@media (max-width: 576px) {
    .single-service__inner {
        padding: 24px 18px 32px;
        border-radius: 16px;
    }

    .single-service__image img {
        max-height: 260px;
    }

    .single-service__content {
        font-size: 15px;
        line-height: 1.6;
    }

    .back-btn {
        width: 100%;
        padding: 14px;
    }
}

/* ===============================
   Анимации
=============================== */

@keyframes single-service-fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Блик по кнопке */
@keyframes back-btn-shine {
    0% {
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateX(220%) skewX(-20deg);
        opacity: 0;
    }
}


/* ===============================
   TABLES IN SINGLE SERVICE (как в прайсе)
   область действия: только внутри .single-service__content
=============================== */

.single-service__content .price-table-wrap{
  width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0 22px;
}

/* приятный скролл */
.single-service__content .price-table-wrap::-webkit-scrollbar{ height: 10px; }
.single-service__content .price-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.single-service__content .price-table-wrap::-webkit-scrollbar-track{
  background: rgba(0,0,0,.04);
  border-radius: 999px;
}

.single-service__content table.price-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  min-width: 720px;
}

/* Шапка */
.single-service__content table.price-table thead th{
  text-align: left;
  background: #f3f3f3;
  color: #222;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #e9e9e9;
  white-space: nowrap;
}

/* Липкая шапка на десктопе */
@media (min-width: 992px){
  .single-service__content table.price-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

.single-service__content table.price-table tbody td{
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-dark);
  border-bottom: 1px solid #efefef;
  background: #fff;
}

/* зебра */
.single-service__content table.price-table tbody tr:nth-child(even) td{
  background: #fafafa;
}

/* подсветка строки */
.single-service__content table.price-table tbody tr{
  transition: transform .15s ease, box-shadow .15s ease;
}
.single-service__content table.price-table tbody tr:hover td{
  background: #fff7e5;
}
.single-service__content table.price-table tbody tr:hover{
  transform: translateY(-1px);
}

/* первая колонка чуть контрастнее */
.single-service__content table.price-table td:first-child{
  color: #222;
}

/* 3 колонки: справа выравниваем "цены" */
.single-service__content table.price-table.price-table--3col{
  table-layout: fixed;
}
.single-service__content table.price-table.price-table--3col th:nth-child(1),
.single-service__content table.price-table.price-table--3col td:nth-child(1){
  width: 58%;
}
.single-service__content table.price-table.price-table--3col th:nth-child(2),
.single-service__content table.price-table.price-table--3col td:nth-child(2),
.single-service__content table.price-table.price-table--3col th:nth-child(3),
.single-service__content table.price-table.price-table--3col td:nth-child(3){
  width: 21%;
  text-align: right;
  white-space: nowrap;
}

/* адаптив */
@media (max-width: 992px){
  .single-service__content table.price-table{ min-width: 680px; }
}
@media (max-width: 768px){
  .single-service__content table.price-table{ min-width: 640px; }
  .single-service__content table.price-table thead th,
  .single-service__content table.price-table tbody td{
    padding: 12px 12px;
  }
}
@media (max-width: 576px){
  .single-service__content table.price-table thead th,
  .single-service__content table.price-table tbody td{
    font-size: 13px;
  }
}


/* ===============================
   SINGLE SERVICE — unify shadows + buttons + table hover (homepage style)
=============================== */

/* 1) Карточка страницы — тень как на главной */
.single-service__inner{
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 0 0 1px rgba(var(--color-accent-rgb), .08) !important;
}

/* 2) Главная картинка — тень как на главной */
.single-service__image img{
  box-shadow:
    0 12px 30px rgba(0,0,0,.10),
    0 0 0 1px rgba(var(--color-accent-rgb), .08) !important;
}

.single-service__image img:hover{
  box-shadow:
    0 22px 55px rgba(0,0,0,.16),
    0 0 0 1px rgba(var(--color-accent-rgb), .14) !important;
}

/* 3) Кнопка "назад" — как на главной (градиент + shine через ::after) */
.back-btn{
  background: var(--background-btns) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.10) !important;
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1) !important;
}

/* выключаем старый "блик" (который через ::before и keyframes) */
.back-btn::before{ display:none !important; }
.back-btn:hover::before{ animation:none !important; }

.back-btn:hover{
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.20) !important;
}

/* shine как на главной */
.back-btn::after{
  content:"";
  position:absolute;
  inset:0;
  left:-120%;
  width:120%;
  height:100%;
  pointer-events:none;

  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.18),
    rgba(255,255,255,.38),
    rgba(255,255,255,.18),
    transparent
  );
  transform: skewX(-20deg);
  transition: left .85s cubic-bezier(.4,0,.2,1);
}

.back-btn:hover::after{ left:120%; }

.back-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .25), 0 8px 25px rgba(0,0,0,.18) !important;
}

/* 4) Таблица — hover как на главной: акцентный фон + лёгкий glow */
.single-service__content table.price-table tbody tr{
  transition: transform .2s ease, box-shadow .2s ease;
}

.single-service__content table.price-table tbody tr:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.single-service__content table.price-table tbody tr:hover td{
  background: rgba(var(--color-accent-rgb), .14) !important; /* вместо чистого #fff7e5 */
  color: var(--color-dark);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .back-btn,
  .single-service__content table.price-table tbody tr{
    transition: none !important;
  }
  .back-btn::after{ display:none !important; }
}