/**
 * Module: Reviews Page Styles
 * Purpose: Стили страницы «Kundenbewertungen» — hero, trust, grid, form, features.
 * Inputs: design-tokens.css, base.css, components.css, city-hub.css.
 * Outputs: BEM-классы .vc-reviews-page, .vc-reviews-hero*, .vc-reviews-trust*, .vc-reviews-grid*, .vc-reviews-form*, .vc-reviews-features*.
 * Notes: Переиспользует .vc-btn без дублирования; namespace vc-reviews-*.
 *        Блоки .vc-video-reviews и .vc-reviews-cta вынесены в отдельные файлы блоков.
 *        Фото-ассет: assets/img/reviews/reviews-hero.webp (Figma node ae0bcd0b).
 */

/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */

.vc-reviews-page {
    background-color: var(--vc-color-bg-primary);
    color: var(--vc-color-text-primary);
    font-family: var(--vc-font-family);
    margin-top: -30px;
    padding-top: 30px;
}

/* ==========================================================================
   HERO SURFACE — full-width section with bg image + gradient overlay
   ========================================================================== */

.vc-reviews-hero-surface {
    position: relative;
    overflow: hidden;
    background-color: var(--vc-color-bg-primary);
    height: 560px;
    min-height: 560px;
}

.vc-reviews-hero-surface > .vc-container {
    height: 100%;
}

/* Background photo — full-width, same approach as .vc-hero__img in general hero */
.vc-reviews-hero-surface__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.vc-reviews-hero-surface__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 30%;   /* правая часть фото, чуть выше центра — головы видны */
    opacity: 0.25;
}

/* Gradient overlay: точно по Figma node 1009:5824 — диагональный, белый снизу-слева */
.vc-reviews-hero-surface__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(62.1568deg, rgb(255, 255, 255) 23.932%, rgba(255, 255, 255, 0) 51.745%);
}

/* ==========================================================================
   HERO INNER — container-scoped wrapper, sits above the bg
   ========================================================================== */

.vc-reviews-hero-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 100%;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.vc-reviews-breadcrumbs {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    margin-bottom: 0;
    font-size: var(--vc-font-size-body-sm);
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-primary);
}

.vc-reviews-breadcrumbs a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    transition: opacity var(--vc-transition-fast);
}

.vc-reviews-breadcrumbs a:hover {
    opacity: 0.75;
}

.vc-reviews-breadcrumbs__sep {
    width: 14.5px;
    height: 12px;
    flex: 0 0 auto;
    background: url('../img/icon/2026-03-04_17-33-03.png') center / contain no-repeat;
    opacity: 0.6;
}

.vc-reviews-breadcrumbs__current {
    color: var(--vc-color-text-muted);
    font-weight: var(--vc-font-weight-medium);
}

/* ==========================================================================
   HERO CONTENT — left column, 760px wide per Figma (node 994:4334, w=760px)
   ========================================================================== */

.vc-reviews-hero {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 760px;
}

/* --- H1 --- */

.vc-reviews-hero__title {
    margin: 0;
    font-size: var(--vc-font-size-h2);   /* 32px — matches Figma spec */
    line-height: 40px;
    font-weight: var(--vc-font-weight-bold);
    color: var(--vc-color-text-primary);
}

/* --- Lead paragraph --- */

.vc-reviews-hero__lead {
    margin: 0;
    font-size: var(--vc-font-size-body);  /* 16px */
    font-weight: var(--vc-font-weight-medium);
    line-height: var(--vc-line-height-relaxed);  /* 1.5 */
    color: var(--vc-color-text-muted);
}

/* --- CTA buttons row --- */

.vc-reviews-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
}

/* Secondary CTA: rgba(33,92,162,0.1) bg, no border, min-width 220px per Figma */
.vc-reviews-hero__btn-secondary {
    background: var(--vc-color-primary-light);
    border-color: transparent;
    color: var(--vc-color-primary);
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
}

.vc-reviews-hero__btn-secondary:hover {
    background: rgba(33, 92, 162, 0.16);
    color: var(--vc-color-primary);
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .vc-reviews-hero {
        max-width: 580px;
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Скрыть хлебные крошки на мобильном */
    .vc-reviews-breadcrumbs {
        display: none;
    }

    /* Запрет горизонтального переполнения hero-секции */
    .vc-reviews-hero-surface {
        height: 700px;
        min-height: 700px;
        overflow-x: hidden;
    }

    .vc-reviews-hero-surface__img {
        object-fit: cover;
        object-position: center 30%;
        opacity: 0.12;
    }

    .vc-reviews-hero-surface__gradient {
        background: linear-gradient(62.1568deg, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 65%);
    }

    .vc-reviews-hero-inner {
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 40px;
        overflow: hidden;
    }

    .vc-reviews-hero {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .vc-reviews-hero__title {
        font-size: 26px;
        line-height: 34px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .vc-reviews-hero__lead {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .vc-reviews-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--vc-space-3);
    }

    .vc-reviews-hero__actions .vc-btn,
    .vc-reviews-hero__btn-secondary {
        min-width: unset;
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   TRUST / SOURCES BLOCK — Figma node 994:9740
   ========================================================================== */

.vc-reviews-trust {
    background: var(--vc-color-bg-secondary);   /* #f4f7fa */
    padding: var(--vc-space-20) 0;              /* 80px top/bottom */
}

/* Two-column grid: both columns equal width, 32px gap, 400px total height per Figma */
.vc-reviews-trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* Shared card shell */
.vc-reviews-trust__card {
    background: var(--vc-color-bg-primary);
    border: 1px solid var(--vc-color-border);
    border-radius: var(--vc-radius-lg);          /* 15px */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Right card: vertically centered content */
.vc-reviews-trust__card--policy {
    justify-content: center;
    gap: 14px;
}

/* Card H2 title */
.vc-reviews-trust__card-title {
    margin: 0;
    font-size: var(--vc-font-size-h2);          /* 32px */
    font-weight: var(--vc-font-weight-bold);
    line-height: 1.2;
    color: var(--vc-color-text-primary);
}

/* -------------------------------------------------------
   Left card: source sub-cards row
------------------------------------------------------- */

.vc-reviews-trust__sources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    flex: 1;
}

/* Individual source card */
.vc-reviews-trust__source {
    background: var(--vc-color-bg-primary);
    border: 1px solid var(--vc-color-border);
    border-radius: var(--vc-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Platform name (Google / Trustpilot / Website) */
.vc-reviews-trust__source-name {
    margin: 0;
    font-size: 20px;
    font-weight: var(--vc-font-weight-bold);
    line-height: 20px;
    color: var(--vc-color-text-primary);
}

/* Rating + count wrapper */
.vc-reviews-trust__source-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 4,9/5 */
.vc-reviews-trust__source-rating {
    margin: 0;
    font-size: 20px;
    font-weight: var(--vc-font-weight-bold);
    line-height: 20px;
    color: var(--vc-color-text-primary);
}

/* aus 187 Bewertungen */
.vc-reviews-trust__source-count {
    margin: 0;
    font-size: var(--vc-font-size-body-sm);     /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-text-muted);
}

/* Description line */
.vc-reviews-trust__source-desc {
    margin: 0;
    font-size: var(--vc-font-size-body-sm);     /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-text-muted);
}

/* -------------------------------------------------------
   Right card: policy list
------------------------------------------------------- */

.vc-reviews-trust__policy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-reviews-trust__policy-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vc-reviews-trust__policy-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
}

.vc-reviews-trust__policy-item span {
    font-size: var(--vc-font-size-body);        /* 16px */
    font-weight: var(--vc-font-weight-medium);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-muted);
}

/* ==========================================================================
   RESPONSIVE — Trust block tablet (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .vc-reviews-trust__card-title {
        font-size: 26px;
    }

    .vc-reviews-trust__sources {
        gap: 10px;
    }
}

/* ==========================================================================
   RESPONSIVE — Trust block mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .vc-reviews-trust {
        padding: var(--vc-space-12) 0;
    }

    .vc-reviews-trust__grid {
        grid-template-columns: 1fr;
        gap: var(--vc-space-5);
    }

    .vc-reviews-trust__sources {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vc-reviews-trust__card--policy {
        justify-content: flex-start;
    }

    .vc-reviews-trust__card-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   REVIEWS GRID — Figma node 1009:5975
   «Echte Bewertungen von Google & weiteren Quellen»
   ========================================================================== */

.vc-reviews-grid {
    background: var(--vc-color-bg-secondary);   /* #f4f7fa */
    padding: var(--vc-space-20) 0;              /* 80px */
}

/* -------------------------------------------------------
   Header: two-colour title + subtitle
------------------------------------------------------- */

.vc-reviews-grid__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.vc-reviews-grid__title {
    margin: 0;
    font-size: var(--vc-font-size-h2);          /* 32px bold */
    font-weight: var(--vc-font-weight-bold);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-primary);
}

.vc-reviews-grid__title-accent {
    color: var(--vc-color-primary);             /* #215CA2 */
}

.vc-reviews-grid__subtitle {
    margin: 0;
    font-size: var(--vc-font-size-body);        /* 16px */
    font-weight: var(--vc-font-weight-medium);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-muted);
}

/* -------------------------------------------------------
   Filter chips row
------------------------------------------------------- */

.vc-reviews-grid__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.vc-reviews-grid__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-font-size-body-xxs);    /* 12px */
    font-weight: var(--vc-font-weight-medium);
    font-family: var(--vc-font-family);
    cursor: pointer;
    transition: background var(--vc-transition-fast), color var(--vc-transition-fast), border-color var(--vc-transition-fast);
    /* Inactive: white bg, blue border */
    background: var(--vc-color-bg-primary);
    border: 1px solid rgba(33, 92, 162, 0.1);
    color: var(--vc-color-primary);
}

.vc-reviews-grid__filter:hover {
    background: var(--vc-color-primary-light);
}

/* Active chip: gradient blue */
.vc-reviews-grid__filter--active {
    background: var(--vc-gradient-primary);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--vc-color-text-inverse);
    box-shadow: var(--vc-shadow-btn);
}

.vc-reviews-grid__filter--active:hover {
    background: var(--vc-gradient-primary-hover);
    color: var(--vc-color-text-inverse);
}

/* -------------------------------------------------------
   Cards: 3-column grid, 2 rows = 6 cards
------------------------------------------------------- */

.vc-reviews-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Individual card */
.vc-reviews-grid__card {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: var(--vc-color-bg-primary);
    border: 1px solid rgba(18, 18, 18, 0.05);
    border-radius: 16px;
    padding: 35px;
}

/* --- User row --- */

.vc-reviews-grid__user {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-2);
}

.vc-reviews-grid__user-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vc-reviews-grid__user-name {
    font-size: var(--vc-font-size-body);        /* 16px semibold */
    font-weight: var(--vc-font-weight-semibold);
    line-height: 20px;
    color: var(--vc-color-text-primary);
}

.vc-reviews-grid__user-city {
    font-size: var(--vc-font-size-body);        /* 16px medium, 50% opacity */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-text-primary);
    opacity: 0.5;
}

.vc-reviews-grid__date {
    font-size: var(--vc-font-size-body-xxs);    /* 12px, muted */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.5;
}

/* --- Stars --- */

.vc-reviews-grid__stars {
    display: block;
    line-height: 0;
}

.vc-reviews-grid__stars img {
    display: block;
    width: 120px;
    height: 20px;
}

/* --- Content: topic + review text --- */

.vc-reviews-grid__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vc-reviews-grid__topic {
    margin: 0;
    font-size: var(--vc-font-size-body);        /* 16px semibold */
    font-weight: var(--vc-font-weight-semibold);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-primary);
}

.vc-reviews-grid__text {
    margin: 0;
    font-size: var(--vc-font-size-body-sm);     /* 14px medium */
    font-weight: var(--vc-font-weight-medium);
    line-height: var(--vc-line-height-relaxed);
    color: var(--vc-color-text-muted);
}

/* --- Tag pills at bottom --- */

.vc-reviews-grid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.vc-reviews-grid__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: var(--vc-radius-full);
    background: var(--vc-color-primary-light);  /* rgba(33,92,162,0.1) */
    color: var(--vc-color-primary);
    font-size: var(--vc-font-size-body-xxs);    /* 12px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
}

/* -------------------------------------------------------
   Responsive — tablet ≤ 1024px
------------------------------------------------------- */

@media (max-width: 1024px) {
    .vc-reviews-grid__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .vc-reviews-grid__card {
        padding: 24px;
    }
}

/* -------------------------------------------------------
   Responsive — mobile ≤ 768px
------------------------------------------------------- */

@media (max-width: 768px) {
    .vc-reviews-grid {
        padding: var(--vc-space-12) 0;
    }

    .vc-reviews-grid__title {
        font-size: 24px;
    }

    /* Горизонтальная полоска с прокруткой — как у других каруселей */
    .vc-reviews-grid__cards {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 12px;
        /* Убираем обрезку по правому краю контейнера */
        margin-left: calc(-1 * var(--vc-container-padding, 20px));
        margin-right: calc(-1 * var(--vc-container-padding, 20px));
        padding-left: var(--vc-container-padding, 20px);
        padding-right: var(--vc-container-padding, 20px);
    }

    /* Фиксированная ширина карточки в горизонтальном скролле */
    .vc-reviews-grid__card {
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    /* Показывать все карточки на мобильном (scroll = нет смысла скрывать) */
    .vc-reviews-grid__card--hidden {
        display: flex !important;
    }

    /* Скрыть кнопку «Mehr/Weniger anzeigen» на мобильном */
    .vc-reviews-grid__toggle-wrap {
        display: none;
    }

    .vc-reviews-grid__filters {
        gap: var(--vc-space-2);
    }
}

/* ==========================================================================
   REVIEW SUBMISSION FORM — Figma node 1009:11944
   Форма для отправки отзыва. Располагается внутри .vc-reviews-grid,
   после сетки карточек отзывов.
   ========================================================================== */

/* Outer wrapper — отступ от карточек */
.vc-reviews-form-wrap {
    margin-top: 48px;
}

/* White card container */
.vc-reviews-form__card {
    background: var(--vc-color-bg-primary);
    border: 1px solid var(--vc-color-border);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 680px;
}

/* -------------------------------------------------------
   Header: "Bewertung" title + star rating
------------------------------------------------------- */

.vc-reviews-form__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "Bewertung" — 21px bold, blue */
.vc-reviews-form__title {
    margin: 0;
    font-size: 21px;
    font-weight: var(--vc-font-weight-bold);
    line-height: normal;
    color: var(--vc-color-primary);
}

.vc-reviews-form__stars {
    line-height: 0;
}

.vc-reviews-form__stars img {
    display: block;
    width: 120px;
    height: 20px;
}

/* -------------------------------------------------------
   Form layout — vertical stack
------------------------------------------------------- */

.vc-reviews-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Each field group: label + control */
.vc-reviews-form__field {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Label — 14px medium, blue */
.vc-reviews-form__label {
    display: block;
    font-size: var(--vc-font-size-body-sm);     /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-primary);
}

/* -------------------------------------------------------
   Shared input / select / textarea base
------------------------------------------------------- */

.vc-reviews-form__input,
.vc-reviews-form__select,
.vc-reviews-form__textarea {
    width: 100%;
    font-family: var(--vc-font-family);
    font-size: var(--vc-font-size-body-sm);     /* 14px */
    font-weight: var(--vc-font-weight-medium);
    color: var(--vc-color-text-primary);
    background: var(--vc-color-bg-primary);
    border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--vc-transition-fast);
}

.vc-reviews-form__input:focus,
.vc-reviews-form__select:focus,
.vc-reviews-form__textarea:focus {
    border-color: var(--vc-color-primary);
}

/* -------------------------------------------------------
   Text input — 50px height
------------------------------------------------------- */

.vc-reviews-form__input {
    height: 50px;
    padding: 0 15px;
}

/* -------------------------------------------------------
   Select dropdown with custom chevron
------------------------------------------------------- */

.vc-reviews-form__select-wrap {
    position: relative;
}

.vc-reviews-form__select {
    height: 50px;
    padding: 0 40px 0 15px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* CSS chevron arrow — matches Figma Vector8 */
.vc-reviews-form__select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 14px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7' fill='none'%3E%3Cpath d='M1 1l6 5 6-5' stroke='%23121212' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* -------------------------------------------------------
   Textarea — 118px height per Figma
------------------------------------------------------- */

.vc-reviews-form__textarea {
    padding: 15px;
    height: 118px;
    resize: vertical;
    line-height: var(--vc-line-height-relaxed);
}

/* -------------------------------------------------------
   File upload row
------------------------------------------------------- */

.vc-reviews-form__file-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Hidden native input */
.vc-reviews-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* "Choose file" styled button label */
.vc-reviews-form__file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-size: 12px;
    font-weight: var(--vc-font-weight-medium);
    font-family: var(--vc-font-family);
    color: var(--vc-color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--vc-transition-fast);
}

.vc-reviews-form__file-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* "No file chosen" / selected filename */
.vc-reviews-form__file-name {
    font-size: 12px;
    font-weight: var(--vc-font-weight-medium);
    line-height: 15px;
    color: rgba(18, 18, 18, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------
   Privacy note
------------------------------------------------------- */

.vc-reviews-form__privacy {
    margin: 0;
    font-size: 12px;
    font-weight: var(--vc-font-weight-medium);
    line-height: 15px;
    color: rgba(18, 18, 18, 0.35);
}

.vc-reviews-form__privacy-link {
    color: var(--vc-color-primary);
    text-decoration: none;
    transition: opacity var(--vc-transition-fast);
}

.vc-reviews-form__privacy-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* -------------------------------------------------------
   Submit button — full width, gradient pill
------------------------------------------------------- */

.vc-reviews-form__submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    border-radius: 1000px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(153.569deg, rgb(52, 124, 208) 0%, rgb(33, 92, 162) 100%);
    box-shadow: 0 0 50px 0 rgba(33, 92, 162, 0.25);
    font-family: var(--vc-font-family);
    font-size: var(--vc-font-size-body-sm);     /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: opacity var(--vc-transition-fast);
}

.vc-reviews-form__submit:hover {
    opacity: 0.9;
}

/* -------------------------------------------------------
   Responsive — tablet ≤ 1024px
------------------------------------------------------- */

@media (max-width: 1024px) {
    .vc-reviews-form__card {
        max-width: 100%;
    }
}

/* -------------------------------------------------------
   Responsive — mobile ≤ 768px
------------------------------------------------------- */

@media (max-width: 768px) {
    .vc-reviews-form-wrap {
        margin-top: 32px;
    }

    .vc-reviews-form__card {
        padding: 24px;
    }

    .vc-reviews-form__file-row {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   REVIEWS FEATURES — Figma node 1009:11969
   «Wo Sie unsere Bewertungen prüfen können» (5 feature tiles)
   ========================================================================== */

.vc-reviews-features {
    background: var(--vc-color-bg-secondary);
    padding: 0 0 var(--vc-space-20);            /* no top pad — continues the gray section */
}

.vc-reviews-features__card {
    background: var(--vc-color-bg-primary);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vc-reviews-features__title {
    margin: 0;
    font-size: var(--vc-font-size-h2);          /* 32px bold */
    font-weight: var(--vc-font-weight-bold);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-primary);
}

/* 5 feature items in one flex row */
.vc-reviews-features__list {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.vc-reviews-features__item {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 24px;
    background: var(--vc-color-bg-primary);
    border: 1px solid var(--vc-color-border);   /* rgba(18,18,18,0.1) */
    border-radius: var(--vc-radius-lg);         /* 15px */
    min-height: 78px;
}

.vc-reviews-features__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.vc-reviews-features__label {
    font-size: var(--vc-font-size-body-xs);     /* 13px bold */
    font-weight: var(--vc-font-weight-bold);
    line-height: var(--vc-line-height-normal);
    color: var(--vc-color-text-primary);
}

/* -------------------------------------------------------
   Responsive — tablet ≤ 1024px
------------------------------------------------------- */

@media (max-width: 1024px) {
    .vc-reviews-features__list {
        flex-wrap: wrap;
    }

    .vc-reviews-features__item {
        flex: 0 0 calc(50% - 8px);
    }
}

/* -------------------------------------------------------
   Responsive — mobile ≤ 768px
------------------------------------------------------- */

@media (max-width: 768px) {
    .vc-reviews-features {
        padding-bottom: var(--vc-space-12);
    }

    .vc-reviews-features__title {
        font-size: 22px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Карточка не должна вылезать за контейнер */
    .vc-reviews-features__card {
        overflow: hidden;
        box-sizing: border-box;
    }

    .vc-reviews-features__list {
        flex-direction: column;
        gap: var(--vc-space-3);
        overflow: hidden;
    }

    .vc-reviews-features__item {
        flex: none;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .vc-reviews-features__label {
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   GOOGLE REVIEWS BLOCK — [grw id=4658]
   ========================================================================== */

.vc-google-reviews {
    background: var(--vc-color-bg-secondary);
    padding: 80px 0;
}

.vc-google-reviews__title {
    margin: 0 0 40px;
    font-size: var(--vc-font-size-h2);
    font-weight: var(--vc-font-weight-bold);
    line-height: 1.2;
    color: var(--vc-color-text-primary);
    text-align: center;
}

@media (max-width: 768px) {
    .vc-google-reviews {
        padding: 48px 0;
    }

    .vc-google-reviews__title {
        font-size: 24px;
    }
}

/* ==========================================================================
   TRUSTPILOT REVIEWS CAROUSEL — Figma node 1009:6330
   «Bewertungen auf Trustpilot» — Splide slider, 4 cards visible desktop.
   ========================================================================== */

.vc-tp-reviews {
    background: var(--vc-color-bg-primary);
    padding: 100px 0;
}

/* -------------------------------------------------------
   Header: заголовок слева, кнопки справа — одна строка
------------------------------------------------------- */

.vc-tp-reviews__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 50px;
}

/* Заголовок: текст + логотип в одну строку */
.vc-tp-reviews__title {
    margin: 0;
    font-size: var(--vc-font-size-h2);       /* 32px bold */
    font-weight: var(--vc-font-weight-bold);
    line-height: 1;
    color: var(--vc-color-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

/* Логотип TrustPilot в заголовке */
.vc-tp-reviews__logo {
    display: block;
    height: 30px;
    width: auto;
    flex-shrink: 0;
}

/* Controls: CTA + стрелки — прижаты к правому краю */
.vc-tp-reviews__controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    gap: 16px;
}

.vc-tp-reviews__arrows {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* CTA button — gradient pill (mirrors Figma "Feedback hinzufügen") */
.vc-tp-reviews__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 0 30px;
    border-radius: 1000px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(116.541deg, rgb(52, 124, 208) 0%, rgb(33, 92, 162) 100%);
    box-shadow: 0 0 50px 0 rgba(33, 92, 162, 0.25);
    font-family: var(--vc-font-family);
    font-size: var(--vc-font-size-body-sm);   /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--vc-transition-fast);
}

.vc-tp-reviews__cta:hover {
    opacity: 0.9;
    color: #fff;
}

/* Arrow buttons — circular, white, border */
.vc-tp-reviews__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    border: 1px solid rgba(18, 18, 18, 0.05);
    background: var(--vc-color-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--vc-transition-fast), opacity var(--vc-transition-fast);
}

.vc-tp-reviews__arrow:hover {
    background: var(--vc-color-bg-secondary);
}

.vc-tp-reviews__arrow img {
    display: block;
    width: 20px;
    height: 20px;
}

/* -------------------------------------------------------
   Splide slider track — clipped to container width
------------------------------------------------------- */

.vc-tp-reviews__splide .splide__track {
    overflow: hidden;
}

/* -------------------------------------------------------
   Review card — white, border, rounded 16px, 360px
------------------------------------------------------- */

.vc-tp-reviews__card {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: var(--vc-color-bg-primary);
    border: 1px solid rgba(18, 18, 18, 0.05);
    border-radius: 16px;
    padding: 35px;
    height: 100%;
    box-sizing: border-box;
}

/* User row: avatar + name/date + platform icon */
.vc-tp-reviews__user {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vc-tp-reviews__avatar-wrap {
    flex-shrink: 0;
}

.vc-tp-reviews__avatar {
    display: block;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--vc-color-bg-secondary);
}

.vc-tp-reviews__user-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 0 0;
    min-width: 0;
}

.vc-tp-reviews__user-name {
    display: block;
    font-size: var(--vc-font-size-body);      /* 16px semibold */
    font-weight: var(--vc-font-weight-semibold);
    line-height: 20px;
    color: var(--vc-color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-tp-reviews__user-date {
    display: block;
    font-size: var(--vc-font-size-body);      /* 16px medium, 50% opacity */
    font-weight: var(--vc-font-weight-medium);
    line-height: 20px;
    color: var(--vc-color-text-primary);
    opacity: 0.5;
}

.vc-tp-reviews__platform-icon {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

/* Stars */
.vc-tp-reviews__stars {
    line-height: 0;
}

.vc-tp-reviews__stars img {
    display: block;
    width: 120px;
    height: 20px;
}

/* Review text */
.vc-tp-reviews__text {
    margin: 0;
    font-size: var(--vc-font-size-body-sm);   /* 14px */
    font-weight: var(--vc-font-weight-medium);
    line-height: var(--vc-line-height-relaxed);
    color: rgba(18, 18, 18, 0.35);
}

/* -------------------------------------------------------
   Responsive — tablet ≤ 1024px
------------------------------------------------------- */

@media (max-width: 1024px) {
    .vc-tp-reviews {
        padding: 64px 0;
    }

    .vc-tp-reviews__header {
        gap: 16px;
        margin-bottom: 32px;
    }

    .vc-tp-reviews__title {
        font-size: 26px;
    }

    .vc-tp-reviews__card {
        padding: 24px;
    }
}

/* -------------------------------------------------------
   Responsive — mobile ≤ 768px
------------------------------------------------------- */

@media (max-width: 768px) {
    .vc-tp-reviews {
        padding: 48px 0;
    }

    /* Заголовок: «Bewertungen auf» + логотип — столбцом, по центру */
    .vc-tp-reviews__title {
        font-size: 22px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        white-space: normal;
        gap: 8px;
    }

    .vc-tp-reviews__logo {
        height: 28px;
    }

    /* Хедер: всё по центру */
    .vc-tp-reviews__header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 32px;
    }

    /* Controls: CTA кнопка по центру, стрелки скрыты */
    .vc-tp-reviews__controls {
        margin-left: 0;
        justify-content: center;
    }

    .vc-tp-reviews__arrows {
        justify-content: center;
    }

    /* Скрыть кнопки прокрутки на мобильном */
    .vc-tp-reviews__arrow {
        display: none;
    }
}