/* ===== VSH25 Reviews (light theme; использует те же токены, что в HAT) ===== */

.reviews,
.reviews-form {
   --card: var(--vsh-card, #fff);
   --text: var(--vsh-text, #1a1c1f);
   --muted: var(--vsh-muted, #64748b);
   --border: var(--vsh-border, #e6eef8);
   --accent: var(--vsh-primary-500, #2b7eeb);
   --accent-600: var(--vsh-primary-600, #003fe1);
   --accent-100: var(--vsh-primary-100, #e7f1ff);
   --radius-md: var(--hat-radius-md, 14px);
   --radius-lg: var(--hat-radius-lg, 20px);
   --shadow: var(--hat-shadow, 0 14px 32px rgba(20, 44, 90, 0.08));
   --trans: var(--hat-trans, 180ms ease);
}

.reviews {
   margin-bottom: 96px;
}

.reviews-form {
   margin-bottom: -24px;
   padding: 64px 0 130px;
   background: radial-gradient(40% 50% at 15% 10%, rgba(43, 126, 235, 0.08) 0%, rgba(43, 126, 235, 0) 60%),
      radial-gradient(35% 45% at 85% 25%, rgba(120, 144, 156, 0.1) 0%, rgba(120, 144, 156, 0) 60%), -webkit-gradient(linear, left top, left bottom, from(#f8fbff), to(#f5f8fc));
   background: radial-gradient(40% 50% at 15% 10%, rgba(43, 126, 235, 0.08) 0%, rgba(43, 126, 235, 0) 60%),
      radial-gradient(35% 45% at 85% 25%, rgba(120, 144, 156, 0.1) 0%, rgba(120, 144, 156, 0) 60%), linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%);
}

.reviews-section {
   padding-top: 96px;
   margin-bottom: 48px;
}

.reviews-section__content {
   max-width: 1246px;
   margin: 0 auto;
}

.reviews-section__content h1 {
   font-size: 56px;
   line-height: 140%;
   font-weight: 400;
   margin-bottom: 28px;
   color: #1a1c1f;
}

.reviews-section__content-text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 20px;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.reviews-section__content-text p {
   font-size: 20px;
   line-height: 130%;
}

.reviews-section__content-text .btn {
   padding: 16px;
}

.reviews--inner {
   max-width: 1246px;
   margin: 0 auto;
}

.reviews__title {
   margin-bottom: 20px;
}

/* Список отзывов */
.reviews__list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}
@media (min-width: 768px) {
   .reviews__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
   }
}

/* Карточка отзыва — как hat-card */
.review-card {
   background: #fff;
   border: 1px solid #e6eef8;
   border-radius: 20px;
   padding: 24px;
   -webkit-transition: border-color 180ms ease, -webkit-box-shadow 180ms ease, -webkit-transform 180ms ease;
   transition: border-color 180ms ease, -webkit-box-shadow 180ms ease, -webkit-transform 180ms ease;
   transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
   transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease, -webkit-box-shadow 180ms ease, -webkit-transform 180ms ease;
}

.page-template-template-reviews .review-card {
   -webkit-box-shadow: 0 14px 32px rgba(20, 44, 90, 0.08);
   box-shadow: 0 14px 32px rgba(20, 44, 90, 0.08);
}

.review-card:hover {
   -webkit-transform: translateY(-1px);
   transform: translateY(-1px);
   border-color: #d7e7ff;
}

.review-card__name {
   font-size: 20px;
   line-height: 100%;
   margin-bottom: 8px;
}
.review-card__text {
   color: #334155;
   font-size: 17px;
}
.review-card[hidden] {
   display: none !important;
}

/* Кнопка «Показать ещё» — в стиле hat-btn--indigo */
.reviews__actions {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-top: 32px;
}
.reviews__more-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 1px solid transparent;
   cursor: pointer;
   padding: 10px 16px;
   border-radius: 12px;
   font-weight: 500;
   font-size: 15px;
   background: var(--accent);
   color: #fff;
   -webkit-box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
   box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
   -webkit-transition: background var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
   transition: background var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
   transition: background var(--trans), transform 80ms ease, box-shadow var(--trans);
   transition: background var(--trans), transform 80ms ease, box-shadow var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
}
.reviews__more-btn:hover {
   background: var(--vsh-primary-400, #003fe1);
}
.reviews__more-btn:active {
   -webkit-transform: translateY(1px);
   transform: translateY(1px);
   background: var(--accent-600);
}
.reviews__more-btn[hidden] {
   display: none !important;
}

/* ===== Форма ===== */
.vsh25-review-form {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   -webkit-box-shadow: var(--shadow);
   box-shadow: var(--shadow);
   padding: 28px;
}

/* Кнопка формы переиспользует .reviews__more-btn */
.vsh25-submit {
   width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 1px solid transparent;
   cursor: pointer;
   padding: 12px 18px;
   border-radius: 12px;
   font-weight: 500;
   font-size: 15px;
   background: var(--accent);
   color: #fff;
   -webkit-box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
   box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
   -webkit-transition: background var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
   transition: background var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
   transition: background var(--trans), transform 80ms ease, box-shadow var(--trans);
   transition: background var(--trans), transform 80ms ease, box-shadow var(--trans), -webkit-transform 80ms ease, -webkit-box-shadow var(--trans);
   width: auto;
}

/* Поп-ап благодарности */
.vsh25-popup[hidden] {
   display: none !important;
}
.vsh25-popup {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
   background: rgba(17, 24, 39, 0.35);
   z-index: 1000;
   padding-inline: 12px;
}
.vsh25-popup__inner {
   width: 100%;
   max-width: 560px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   -webkit-box-shadow: var(--shadow);
   box-shadow: var(--shadow);
   padding: 20px;
   text-align: center;
}
.vsh25-popup__title {
   font-weight: 500;
   font-size: 20px;
   margin-bottom: 12px;
   color: var(--text);
}
.vsh25-popup__text {
   color: var(--muted);
   margin-bottom: 20px;
}
.vsh25-popup__close {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 1px solid transparent;
   cursor: pointer;
   padding: 10px 16px;
   border-radius: 12px;
   font-weight: 700;
   font-size: 14px;
   background: var(--accent);
   color: #fff;
   -webkit-box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
   box-shadow: 0 6px 18px rgba(43, 126, 235, 0.24);
}
.vsh25-popup__close:hover {
   background: var(--vsh-primary-400, #003fe1);
}

.review-card__header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
}
.review-card__avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   color: #fff;
   font-weight: 500;
   letter-spacing: 0.2px;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   font-size: 15px;
   line-height: 100%;
}
.review-card__date {
   font-size: 12px;
   color: var(--vsh-muted, #64748b);
   line-height: 100%;
}

.review-card__toggle {
   text-align: start;
   padding: 0px;
   background: none;
   border: none;
   color: var(--vsh-primary-600, #2b7eeb);
   cursor: pointer;
   font-weight: 700;
   font-size: 14px;
   line-height: 120%;
}

.reviews-form__wrap {
   position: relative;
   z-index: 1;
}

.reviews-form__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
}
@media (min-width: 1024px) {
   .reviews-form__grid {
      grid-template-columns: 1fr 1.1fr; /* слева текст, справа форма */
      gap: 32px;
   }
}

/* Заголовок/описание слева */
.reviews-form__intro .reviews__title {
   margin-bottom: 12px;
}
.reviews-form__intro .reviews-form__desc {
   color: var(--muted);
}

/* Сетка полей: имя/фамилия рядом на ≥640px */
.vsh25-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px 16px;
}
@media (min-width: 640px) {
   .vsh25-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
.vsh25-field--full {
   grid-column: 1 / -1;
}

/* Подписи и поля */
.vsh25-field {
   display: grid;
   gap: 8px;
   margin-bottom: 14px;
}
.vsh25-field label {
   color: var(--muted);
   font-size: 14px;
}

.vsh25-field input[type="text"],
.vsh25-field input[type="email"],
.vsh25-field textarea {
   width: 100%;
   font: inherit;
   color: var(--text);
   background: #fff;
   border: 1px solid #e3ecf6;
   border-radius: 12px;
   padding: 12px 14px;
   outline: none;
   -webkit-transition: border-color var(--trans), background var(--trans), -webkit-box-shadow var(--trans);
   transition: border-color var(--trans), background var(--trans), -webkit-box-shadow var(--trans);
   transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
   transition: border-color var(--trans), box-shadow var(--trans), background var(--trans), -webkit-box-shadow var(--trans);
   font-size: 18px;
   line-height: 130%;
}
.vsh25-field textarea {
   resize: none;
   min-height: 120px;
}

.vsh25-field input:focus,
.vsh25-field textarea:focus {
   border-color: var(--accent);
   -webkit-box-shadow: 0 0 0 4px rgba(43, 126, 235, 0.16);
   box-shadow: 0 0 0 4px rgba(43, 126, 235, 0.16);
   background: #fff;
}
.vsh25-field input::-webkit-input-placeholder,
.vsh25-field textarea::-webkit-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-moz-placeholder,
.vsh25-field textarea::-moz-placeholder {
   color: #94a3b8;
}
.vsh25-field input:-ms-input-placeholder,
.vsh25-field textarea:-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-ms-input-placeholder,
.vsh25-field textarea::-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-webkit-input-placeholder,
.vsh25-field textarea::-webkit-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-moz-placeholder,
.vsh25-field textarea::-moz-placeholder {
   color: #94a3b8;
}
.vsh25-field input:-ms-input-placeholder,
.vsh25-field textarea:-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-ms-input-placeholder,
.vsh25-field textarea::-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-webkit-input-placeholder,
.vsh25-field textarea::-webkit-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-moz-placeholder,
.vsh25-field textarea::-moz-placeholder {
   color: #94a3b8;
}
.vsh25-field input:-ms-input-placeholder,
.vsh25-field textarea:-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::-ms-input-placeholder,
.vsh25-field textarea::-ms-input-placeholder {
   color: #94a3b8;
}
.vsh25-field input::placeholder,
.vsh25-field textarea::placeholder {
   color: #94a3b8;
}
.vsh25-submit:hover {
   background: var(--vsh-primary-400, #003fe1);
}
.vsh25-submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

.reviews-form__actions {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   gap: 16px;
   margin-top: 12px;
}

.vsh25-anon {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   position: relative;
   gap: 12px;
   color: var(--muted);
   font-size: 14px;
   line-height: 120%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
}

/* Скрываем нативный чекбокс, оставляя фокусируемым и кликабельным через label */
.vsh25-anon input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   width: 40px;
   height: 24px;
   margin: 0;
   /* Располагаем поверх трека для доступности клавиатурой */
   left: 0;
}

/* Трек */
.vsh25-anon .anon-slider {
   position: relative;
   width: 40px;
   height: 24px;
   background-color: #d9dbe2;
   border-radius: 24px;
   -webkit-transition: background-color 0.3s ease;
   transition: background-color 0.3s ease;
}

/* Ручка */
.vsh25-anon .anon-slider::before {
   content: "";
   position: absolute;
   height: 20px;
   width: 20px;
   left: 2px;
   bottom: 2px;
   background-color: #fff;
   border-radius: 50%;
   -webkit-transition: -webkit-transform 0.3s ease;
   transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
   transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* Активное состояние */
.vsh25-anon input[type="checkbox"]:checked + .anon-slider {
   background-color: var(--accent, #2b7eeb);
}
.vsh25-anon input[type="checkbox"]:checked + .anon-slider::before {
   -webkit-transform: translateX(16px);
   transform: translateX(16px);
}

/* Подпись справа от переключателя */
.vsh25-anon__text {
   color: var(--muted);
   font-size: 14px;
   line-height: 1.2;
}

@media (max-width: 1600px) {
   .reviews-section__content h1 {
      font-size: 48px;
   }
}

@media (max-width: 1400px) {
   .vsh25-field input[type="text"],
   .vsh25-field input[type="email"],
   .vsh25-field textarea {
      font-size: 17px;
   }
}

@media (max-width: 1024px) {
   .reviews-section {
      padding-top: 76px;
   }
   .reviews-section__content h1 {
      font-size: 40px;
   }
}

@media (max-width: 768px) {
   .reviews-section {
      padding-top: 64px;
   }
   .reviews-section__content h1 {
      font-size: 36px;
   }
   .reviews-section__content-text {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
   }
   .reviews-section__content-text p {
      font-size: 18px;
   }
   .reviews {
      margin-bottom: 64px;
   }
   .reviews-form {
      padding: 48px 0 112px;
   }
}

@media (max-width: 640px) {
   .reviews-form__actions {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
   }
   .vsh25-submit {
      width: 100%;
   }
   .vsh25-anon {
      -ms-flex-item-align: start;
      align-self: flex-start;
   }
}

@media (max-width: 448px) {
   .reviews-section {
      padding-top: 48px;
      margin-bottom: 32px;
   }
   .reviews-section__content h1 {
      font-size: 28px;
   }
   .reviews-section__content-text .btn {
      width: 100%;
   }
   .vsh25-field input[type="text"],
   .vsh25-field input[type="email"],
   .vsh25-field textarea {
      font-size: 16px;
   }
   .reviews__title {
      font-size: 24px;
   }
   .vsh25-submit {
      width: 100%;
   }
   .review-card__text {
      font-size: 16px;
   }
}