/* ===================================================================
   Страница «צור קשר» (Контакты) для candymall.co.il.
   Все селекторы заскоуплены под .contacts-page — стили не утекают
   на остальной сайт. Кнопки/заголовки/сетка — из main-style.css
   (site-btn, site-title, container.min, section-padding).

   Палитра — только фирменные токены сайта и их оттенки:
   --ColorBlack #1D1D1F, --ColorRed3 #F30B32, --ColorGreen2 #00C2A6,
   --ColorYellow #FFC21F, --ColorPink #fca9cc.
   RTL: только логические свойства (inline-start/end).
=================================================================== */

.contacts-page {
    position: relative;
    overflow-x: clip;
    color: var(--ColorBlack, #1D1D1F);
    font-family: "Open Sans", sans-serif;
}

/* Кремово-розовые подложки секций — как у .i-discount на главной */
.contacts-page .c-bg-cream {
    background: rgba(252, 169, 204, 0.14);
}

/* Общий подзаголовок под site-title */
.contacts-page .c-sub {
    font-size: 17px;
    line-height: 1.5;
    opacity: 0.65;
    max-width: 640px;
    margin: -10px auto 0;
}
.contacts-page .tac { text-align: center; }

/* =====================================================================
   1. HERO — красно-розовый градиент, конфетный декор
===================================================================== */
.contacts-page .c-hero {
    padding-top: 10px;
}
.contacts-page .c-hero__plate {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 56px 48px 60px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #F30B32 0%, #fb4f74 55%, #fca9cc 130%);
    box-shadow: 0 18px 40px rgba(243, 11, 50, 0.28);
}
.contacts-page .c-hero__crumbs {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.85);
}
.contacts-page .c-hero__crumbs a { color: #fff; }
.contacts-page .c-hero__crumbs a:hover { color: var(--ColorYellow, #FFC21F); }
.contacts-page .c-hero__title {
    position: relative;
    z-index: 2;
    font-size: 54px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
}
.contacts-page .c-hero__text {
    position: relative;
    z-index: 2;
    font-size: 19px;
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.94);
}
.contacts-page .c-hero__btns {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* CTA-кнопки страницы — фирменный зелёный (как «קנה עכשיו» в каталоге);
   hover — только яркость, без смены оттенка (глушим жёлтый hover сайта) */
.contacts-page .site-btn.green:hover {
    border-color: var(--ColorGreen2, #00C2A6);
    background-color: var(--ColorGreen2, #00C2A6);
    color: #fff;
    filter: brightness(0.93);
}

/* конфетный декор в hero — полупрозрачные SVG, лёгкое «парение» */
.contacts-page .c-hero__candy {
    position: absolute;
    z-index: 1;
    opacity: 0.18;
    pointer-events: none;
    animation: c-float 7s ease-in-out infinite;
}
.contacts-page .c-hero__candy svg { display: block; width: 100%; height: 100%; }
.contacts-page .c-hero__candy--1 { width: 110px; height: 110px; inset-block-start: -20px; inset-inline-start: 6%; transform: rotate(-20deg); }
.contacts-page .c-hero__candy--2 { width: 80px;  height: 80px;  inset-block-end: -12px; inset-inline-start: 18%; animation-delay: 1.2s; }
.contacts-page .c-hero__candy--3 { width: 130px; height: 130px; inset-block-start: 12%;  inset-inline-end: 5%;  animation-delay: 2.1s; transform: rotate(25deg); }
.contacts-page .c-hero__candy--4 { width: 70px;  height: 70px;  inset-block-end: 8%;   inset-inline-end: 16%; animation-delay: 3s; }

@keyframes c-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}

/* =====================================================================
   2. КАРТОЧКИ КОНТАКТОВ — 4 белые плашки, вся карточка кликабельна
===================================================================== */
.contacts-page .c-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.contacts-page .c-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.07);
    border-radius: 20px;
    padding: 30px 22px 26px;
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    color: var(--ColorBlack, #1D1D1F);
}
.contacts-page .c-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(29, 29, 31, 0.14);
}
.contacts-page .c-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
}
.contacts-page .c-card__icon svg { display: block; width: 30px; height: 30px; }
.contacts-page .c-card--red    .c-card__icon { background: var(--ColorRed3, #F30B32); }
.contacts-page .c-card--green  .c-card__icon { background: var(--ColorGreen2, #00C2A6); }
.contacts-page .c-card--yellow .c-card__icon { background: var(--ColorYellow, #FFC21F); color: var(--ColorBlack, #1D1D1F); }
.contacts-page .c-card--pink   .c-card__icon { background: var(--ColorPink, #fca9cc); color: var(--ColorBlack, #1D1D1F); }

/* пульсация иконки WhatsApp */
.contacts-page .c-card--green .c-card__icon,
.contacts-page .c-pulse {
    animation: c-pulse 2.4s ease-out infinite;
}
@keyframes c-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 194, 166, 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(0, 194, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 194, 166, 0); }
}

.contacts-page .c-card__name {
    font-size: 20px;
    font-weight: 800;
}
.contacts-page .c-card__val {
    font-size: 16px;
    line-height: 1.4;
    opacity: 0.7;
    direction: ltr; /* телефон/email читаются слева направо */
    unicode-bidi: isolate;
}
.contacts-page .c-card__val.he { direction: rtl; }
.contacts-page .c-card__link {
    margin-top: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--ColorGreen2, #00C2A6);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.contacts-page .c-card:hover .c-card__link { text-decoration: underline; }

/* =====================================================================
   3. КАРТА + ЧАСЫ РАБОТЫ
===================================================================== */
.contacts-page .c-visit {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.contacts-page .c-map {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 420px;
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.08);
    background: rgba(252, 169, 204, 0.15);
}
.contacts-page .c-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.contacts-page .c-hours {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.07);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.07);
}
.contacts-page .c-hours__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contacts-page .c-hours__head svg {
    display: block;
    width: 28px;
    height: 28px;
    color: var(--ColorRed3, #F30B32);
    flex: none;
}
.contacts-page .c-hours__title {
    font-size: 22px;
    font-weight: 800;
}

/* бейдж «открыто/закрыто» — состояние ставит JS */
.contacts-page .c-open-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(29, 29, 31, 0.08);
    color: rgba(29, 29, 31, 0.6);
    white-space: nowrap;
}
.contacts-page .c-open-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.contacts-page .c-open-badge.is-open {
    background: rgba(0, 194, 166, 0.14);
    color: #00775f;
}
.contacts-page .c-open-badge.is-closed {
    background: rgba(243, 11, 50, 0.1);
    color: var(--ColorRed3, #F30B32);
}

.contacts-page .c-hours__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(29, 29, 31, 0.12);
    font-size: 16px;
}
.contacts-page .c-hours__list li:last-child { border-bottom: none; }
.contacts-page .c-hours__day { font-weight: 700; }
.contacts-page .c-hours__time {
    direction: ltr;
    unicode-bidi: isolate;
    opacity: 0.75;
}
.contacts-page .c-hours__time.he { direction: rtl; text-align: end; opacity: 0.75; }

/* плашка доступности */
.contacts-page .c-access {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 194, 166, 0.1);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #00775f;
}
.contacts-page .c-access svg { display: block; width: 24px; height: 24px; flex: none; }

.contacts-page .c-hours__addr {
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.75;
}
.contacts-page .c-hours .site-btn { margin-top: auto; }

/* =====================================================================
   4. ГАЛЕРЕЯ — «הצצה לחנות»
===================================================================== */
.contacts-page .c-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
}
.contacts-page .c-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 0;
    cursor: zoom-in;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(252, 169, 204, 0.2);
}
/* крупное фото — 2×2 */
.contacts-page .c-gallery__item--big {
    grid-column: span 2;
    grid-row: span 2;
}
/* широкое фото — 2×1 */
.contacts-page .c-gallery__item--wide {
    grid-column: span 2;
}
.contacts-page .c-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.contacts-page .c-gallery__item:hover img { transform: scale(1.07); }
.contacts-page .c-gallery__item:focus-visible {
    outline: 3px solid var(--ColorYellow, #FFC21F);
    outline-offset: 2px;
}

/* лайтбокс */
.contacts-page .c-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(29, 29, 31, 0.85);
}
.contacts-page .c-lightbox.is-open { display: flex; }
.contacts-page .c-lightbox img {
    max-width: min(1000px, 100%);
    max-height: 100%;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.contacts-page .c-lightbox__close {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--ColorBlack, #1D1D1F);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.contacts-page .c-lightbox__close:hover {
    background: var(--ColorYellow, #FFC21F);
}

/* =====================================================================
   5. РИЛСЫ — «הרילס שלנו»
===================================================================== */
.contacts-page .c-reels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.contacts-page .contact-reel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 9 / 16;
    background: rgba(252, 169, 204, 0.2);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contacts-page .contact-reel:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(29, 29, 31, 0.18);
}
.contacts-page .contact-reel img,
.contacts-page .contact-reel video,
.contacts-page .contact-reel iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.contacts-page .contact-reel__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ColorRed3, #F30B32);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.25s ease;
    z-index: 2;
}
/* в RTL translate по inline-оси не зеркалится сам — компенсируем */
[dir="rtl"] .contacts-page .contact-reel__play,
.lang-he .contacts-page .contact-reel__play { translate: 50% -50%; }
.contacts-page .contact-reel__play svg { display: block; width: 24px; height: 24px; margin-inline-start: 3px; }
.contacts-page .contact-reel:hover .contact-reel__play { transform: scale(1.12); }
.contacts-page .contact-reel__label {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 40px 16px 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(transparent, rgba(29, 29, 31, 0.75));
    z-index: 2;
}

/* =====================================================================
   6. ПРЕИМУЩЕСТВА — «למה CandyMall?»
===================================================================== */
.contacts-page .c-why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.contacts-page .c-why__item {
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.07);
    border-radius: 20px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contacts-page .c-why__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(29, 29, 31, 0.12);
}
.contacts-page .c-why__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    color: #fff;
}
.contacts-page .c-why__icon svg { display: block; width: 28px; height: 28px; }
/* лёгкое всплытие иконки при hover по плашке */
.contacts-page .c-why__icon {
    transition: transform 0.25s ease;
    will-change: transform;
}
.contacts-page .c-why__item:hover .c-why__icon { transform: translateY(-4px); }
.contacts-page .c-why__item:nth-child(1) .c-why__icon { background: var(--ColorRed3, #F30B32); }
.contacts-page .c-why__item:nth-child(2) .c-why__icon { background: var(--ColorGreen2, #00C2A6); }
.contacts-page .c-why__item:nth-child(3) .c-why__icon { background: var(--ColorYellow, #FFC21F); color: var(--ColorBlack, #1D1D1F); }
.contacts-page .c-why__item:nth-child(4) .c-why__icon { background: var(--ColorPink, #fca9cc); color: var(--ColorBlack, #1D1D1F); }
.contacts-page .c-why__title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}
.contacts-page .c-why__text {
    font-size: 15px;
    line-height: 1.45;
    opacity: 0.65;
}

/* =====================================================================
   7. ФОРМА — «שלחו לנו הודעה»
===================================================================== */
.contacts-page .c-form-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: start;
}

/* плашка быстрых контактов рядом с формой — спокойный бирюзовый градиент */
.contacts-page .c-form-aside {
    background: linear-gradient(160deg, #00C2A6 0%, #00A891 100%);
    color: #fff;
    border-radius: 22px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 14px 32px rgba(0, 168, 145, 0.28);
}
.contacts-page .c-form-aside__title {
    font-size: 22px;
    font-weight: 800;
}
.contacts-page .c-form-aside__text {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.contacts-page .c-form-aside__row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    padding: 12px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.2s ease;
}
.contacts-page a.c-form-aside__row:hover { background: rgba(255, 255, 255, 0.25); }
.contacts-page .c-form-aside__row svg { display: block; width: 22px; height: 22px; flex: none; }
.contacts-page .c-form-aside__row .num { direction: ltr; unicode-bidi: isolate; }
.contacts-page .c-form-aside__hours { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.92); }
.contacts-page .c-form-aside__hours b { font-weight: 800; }

/* сама форма */
.contacts-page .c-form-card {
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.07);
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 14px 36px rgba(29, 29, 31, 0.09);
}
.contacts-page .c-form__legend {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* табы-пилюли выбора темы */
.contacts-page .c-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}
.contacts-page .c-topic input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.contacts-page .c-topic span {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(29, 29, 31, 0.18);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
    user-select: none;
}
.contacts-page .c-topic span:hover {
    border-color: var(--ColorRed3, #F30B32);
    color: var(--ColorRed3, #F30B32);
}
.contacts-page .c-topic input:checked + span {
    background: var(--ColorRed3, #F30B32);
    border-color: var(--ColorRed3, #F30B32);
    color: #fff;
}
.contacts-page .c-topic input:focus-visible + span {
    outline: 3px solid var(--ColorYellow, #FFC21F);
    outline-offset: 2px;
}

/* поля */
.contacts-page .c-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.contacts-page .c-field { display: flex; flex-direction: column; gap: 6px; }
.contacts-page .c-field.wide { grid-column: 1 / -1; }
.contacts-page .c-field label {
    font-size: 14px;
    font-weight: 700;
}
.contacts-page .c-field label .req { color: var(--ColorRed3, #F30B32); }
.contacts-page .c-field input,
.contacts-page .c-field select,
.contacts-page .c-field textarea {
    width: 100%;
    border: 1.5px solid rgba(29, 29, 31, 0.16);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
    background: #fff;
    color: var(--ColorBlack, #1D1D1F);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contacts-page .c-field textarea { min-height: 110px; resize: vertical; }
.contacts-page .c-field select {
    -webkit-appearance: none;
    appearance: none;
    /* стрелка селекта — inline-SVG, позиция логическая под RTL */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231D1D1F' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-end: 14px;
}
.contacts-page .c-field input:focus,
.contacts-page .c-field select:focus,
.contacts-page .c-field textarea:focus {
    border-color: var(--ColorGreen2, #00C2A6);
    box-shadow: 0 0 0 3px rgba(0, 194, 166, 0.18);
}
/* невалидное поле */
.contacts-page .c-field.is-invalid input,
.contacts-page .c-field.is-invalid select,
.contacts-page .c-field.is-invalid textarea {
    border-color: var(--ColorRed3, #F30B32);
    box-shadow: 0 0 0 3px rgba(243, 11, 50, 0.12);
}
.contacts-page .c-field__error {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ColorRed3, #F30B32);
}
.contacts-page .c-field.is-invalid .c-field__error { display: block; }

/* группы полей по темам — прячем/показываем через JS + [hidden] */
.contacts-page .c-fields [data-topics][hidden] { display: none; }

/* чекбокс согласия */
.contacts-page .c-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.contacts-page .c-agree input {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid rgba(29, 29, 31, 0.3);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}
.contacts-page .c-agree input:checked {
    background: var(--ColorGreen2, #00C2A6);
    border-color: var(--ColorGreen2, #00C2A6);
}
.contacts-page .c-agree input:checked::after {
    content: "";
    width: 10px;
    height: 6px;
    border-inline-start: 2px solid #fff;
    border-block-end: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.contacts-page .c-agree input:focus-visible {
    outline: 3px solid var(--ColorYellow, #FFC21F);
    outline-offset: 2px;
}

.contacts-page .c-form__submit {
    margin-top: 24px;
}
.contacts-page .c-form__submit .site-btn {
    height: 52px;
    padding: 0 40px;
    font-size: 17px;
}

/* состояние успеха */
.contacts-page .c-form-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
}
.contacts-page .c-form-card.is-sent .c-form-success { display: block; }
.contacts-page .c-form-card.is-sent .c-form-body { display: none; }
.contacts-page .c-form-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(0, 194, 166, 0.14);
    color: var(--ColorGreen2, #00C2A6);
}
.contacts-page .c-form-success__icon svg { width: 36px; height: 36px; }
.contacts-page .c-form-success__title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}
.contacts-page .c-form-success__text { font-size: 16px; opacity: 0.65; }

/* =====================================================================
   8. ФИНАЛЬНЫЙ CTA
===================================================================== */
.contacts-page .c-cta {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 52px 40px;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, #00C2A6 0%, #00A891 100%);
    box-shadow: 0 18px 40px rgba(0, 168, 145, 0.25);
}
.contacts-page .c-cta__title {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}
.contacts-page .c-cta__text {
    font-size: 17px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    z-index: 2;
}
.contacts-page .c-cta__btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.contacts-page .c-cta .c-hero__candy { opacity: 0.16; }
/* на зелёном фоне кнопки — белые с зелёным текстом, hover только яркостью */
.contacts-page .c-cta__btns .site-btn.white {
    background: #fff;
    border-color: #fff;
    color: #00A891;
}
.contacts-page .c-cta__btns .site-btn.white:hover {
    background: #fff;
    border-color: #fff;
    color: #00A891;
    filter: brightness(0.94);
}

/* =====================================================================
   Reduced motion — глушим бесконечные анимации
===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .contacts-page *,
    .contacts-page *::before,
    .contacts-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   Адаптив: 1024–1240 / 768–1023 / 0–767 (брейкпоинты сайта)
===================================================================== */
@media only screen and (min-width: 1024px) and (max-width: 1240px) {
    .contacts-page .c-hero__title { font-size: 46px; }
    .contacts-page .c-gallery { grid-auto-rows: 170px; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .contacts-page .c-hero__plate { padding: 42px 28px 46px; }
    .contacts-page .c-hero__title { font-size: 38px; }
    .contacts-page .c-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    /* карта над часами работы */
    .contacts-page .c-visit { grid-template-columns: 1fr; }
    .contacts-page .c-map { min-height: 360px; }
    .contacts-page .c-gallery { grid-auto-rows: 160px; }
    .contacts-page .c-why { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .contacts-page .c-form-wrap { grid-template-columns: 1fr; }
    .contacts-page .c-cta__title { font-size: 28px; }
    /* рилсы — горизонтальный скролл */
    .contacts-page .c-reels {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .contacts-page .contact-reel {
        flex: 0 0 240px;
        scroll-snap-align: start;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .contacts-page .c-hero__plate { padding: 34px 20px 38px; border-radius: 18px; }
    .contacts-page .c-hero__title { font-size: 32px; }
    .contacts-page .c-hero__text { font-size: 16px; margin-bottom: 22px; }
    .contacts-page .c-hero__btns .site-btn { width: 100%; }
    .contacts-page .c-hero__candy { display: none; }
    .contacts-page .c-sub { font-size: 15px; }

    .contacts-page .c-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .contacts-page .c-card { padding: 20px 12px 18px; border-radius: 16px; gap: 10px; }
    .contacts-page .c-card__icon { width: 52px; height: 52px; }
    .contacts-page .c-card__icon svg { width: 24px; height: 24px; }
    .contacts-page .c-card__name { font-size: 16px; }
    .contacts-page .c-card__val { font-size: 13px; }

    .contacts-page .c-visit { grid-template-columns: 1fr; gap: 16px; }
    .contacts-page .c-map { min-height: 280px; border-radius: 16px; }
    .contacts-page .c-hours { padding: 20px; border-radius: 16px; }
    .contacts-page .c-hours__head { flex-wrap: wrap; }
    .contacts-page .c-open-badge { margin-inline-start: 0; }

    .contacts-page .c-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 130px;
        gap: 10px;
    }
    .contacts-page .c-gallery__item { border-radius: 12px; }
    .contacts-page .c-gallery__item--big { grid-column: span 2; grid-row: span 2; }

    .contacts-page .c-reels {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .contacts-page .contact-reel { flex: 0 0 200px; scroll-snap-align: start; border-radius: 14px; }

    .contacts-page .c-why { grid-template-columns: 1fr; gap: 12px; }

    .contacts-page .c-form-wrap { grid-template-columns: 1fr; gap: 16px; }
    .contacts-page .c-form-aside { padding: 22px; border-radius: 18px; }
    .contacts-page .c-form-card { padding: 22px 18px; border-radius: 18px; }
    .contacts-page .c-fields { grid-template-columns: 1fr; gap: 14px; }
    .contacts-page .c-topic span { height: 38px; padding: 0 14px; font-size: 14px; }
    .contacts-page .c-form__submit .site-btn { width: 100%; }

    .contacts-page .c-cta { padding: 36px 20px; border-radius: 18px; }
    .contacts-page .c-cta__title { font-size: 24px; }
    .contacts-page .c-cta__btns .site-btn { width: 100%; }
}

/* На узких экранах контейнер не должен вылезать (как на остальном сайте) */
@media only screen and (max-width: 1279px) {
    .contacts-page .container.min { max-width: calc(100% - 30px); }
}

/* FetchIt states */
.contacts-page .c-form-message{margin-top:16px;font-weight:700}.contacts-page .c-form-message.is-error{color:var(--ColorRed3,#F30B32)}.contacts-page .c-form__submit button[disabled]{opacity:.65;cursor:wait}.contacts-page .contact-reel .global-link{position:absolute;inset:0;z-index:3}.contacts-page .contact-reel video{pointer-events:none}