/* ============================================================
   Єдиний стиль стрілок гортання каруселей.

   На сайті було вісім різних наборів контролів (відгуки, статті,
   процедури, магазин, команда, результати, академія, сертифікати) —
   кожен зі своїм розміром, шрифтом лічильника, кольором і ховером.
   Тут вони зводяться до одного вигляду.

   Стрілка — одна на весь сайт: SVG-маска, пофарбована в currentColor.
   Тому колір задається однією змінною, а не фільтрами й хардкодом
   у розмітці (раніше було inline stroke="#050409"/"#FDC667" та
   filter: invert(1) sepia(1) ... для підробки золотого).

   Файл підключається ОСТАННІМ — попередні стилі рясніють !important,
   тож перебиваємо їх тим самим інструментом.
   ============================================================ */

:root {
    --cnav-btn-w: 56px;
    --cnav-btn-h: 28px;
    --cnav-arrow-w: 44px;
    --cnav-arrow-h: 22px;
    --cnav-gap: 14px;
    --cnav-font-size: 20px;

    /* Світлі секції — за замовчуванням. */
    --cnav-color: #050409;
    --cnav-accent: #D1B88B;

    --cnav-arrow-img: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2030'%3E%3Cpath%20d='M48%2015H14M22%208L14%2015L22%2022'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Секції на темному тлі. */
.home-blog-navigation,
.results-nav,
.academy-nav,
.cert-nav {
    --cnav-color: var(--text-light, #FFF8EA);
    --cnav-accent: var(--accent-gold, #FDC667);
}

/* --- Контейнер --- */

/* ВАЖЛИВО: тут навмисно НЕ задається display.
   Частина цих навігацій ховається на широких екранах, коли всі картки
   й так вміщаються (.shop-nav ≥769px, .academy-nav ≥1160px,
   .team-nav ≥1300px, .results-nav ≥1320px, .cert-nav ≥1360px).
   Безумовний display тут вмикав би стрілки там, де гортати нічого. */
.reviews-navigation,
.home-blog-navigation,
.procedures__nav,
.shop-nav,
.team-nav,
.results-nav,
.academy-nav,
.cert-nav {
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cnav-gap) !important;
}

/* --- Кнопка --- */

.reviews-btn,
.home-blog-btn,
.procedures__arrow,
.shop-arrow,
.team-arrow,
.results-arrow,
.academy-arrow,
.cert-arrow {
    width: var(--cnav-btn-w) !important;
    height: var(--cnav-btn-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--cnav-color);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.2s ease, opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Ховаємо оригінальні стрілки — і <img>, і inline <svg>. */
.reviews-btn img,
.home-blog-btn img,
.procedures__arrow svg,
.shop-arrow svg,
.team-arrow svg,
.results-arrow svg,
.academy-arrow svg,
.cert-arrow svg {
    display: none !important;
}

/* ...і малюємо одну спільну. Базова дивиться вліво. */
.reviews-btn::before,
.home-blog-btn::before,
.procedures__arrow::before,
.shop-arrow::before,
.team-arrow::before,
.results-arrow::before,
.academy-arrow::before,
.cert-arrow::before {
    content: '';
    display: block;
    width: var(--cnav-arrow-w);
    height: var(--cnav-arrow-h);
    background-color: currentColor;
    -webkit-mask: var(--cnav-arrow-img) center / contain no-repeat;
    mask: var(--cnav-arrow-img) center / contain no-repeat;
    transition: transform 0.2s ease;
}

.reviews-btn-right::before,
.home-blog-btn-right::before,
.procedures__arrow--next::before,
.shop-arrow--next::before,
.team-arrow--next::before,
.results-arrow--next::before,
.academy-arrow--next::before,
.cert-arrow--next::before {
    transform: scaleX(-1);
}

/* --- Стани --- */

.reviews-btn:hover,
.home-blog-btn:hover,
.procedures__arrow:hover,
.shop-arrow:hover,
.team-arrow:hover,
.results-arrow:hover,
.academy-arrow:hover,
.cert-arrow:hover {
    color: var(--cnav-accent);
    background: none !important;
    opacity: 1 !important;
}

.reviews-btn:hover::before,
.home-blog-btn:hover::before,
.procedures__arrow:hover::before,
.shop-arrow:hover::before,
.team-arrow:hover::before,
.results-arrow:hover::before,
.academy-arrow:hover::before,
.cert-arrow:hover::before {
    transform: translateX(-3px);
}

.reviews-btn-right:hover::before,
.home-blog-btn-right:hover::before,
.procedures__arrow--next:hover::before,
.shop-arrow--next:hover::before,
.team-arrow--next:hover::before,
.results-arrow--next:hover::before,
.academy-arrow--next:hover::before,
.cert-arrow--next:hover::before {
    /* після дзеркалення від'ємний зсув читається як рух управо */
    transform: scaleX(-1) translateX(-3px);
}

.reviews-btn:focus-visible,
.home-blog-btn:focus-visible,
.procedures__arrow:focus-visible,
.shop-arrow:focus-visible,
.team-arrow:focus-visible,
.results-arrow:focus-visible,
.academy-arrow:focus-visible,
.cert-arrow:focus-visible {
    outline: 2px solid var(--cnav-accent);
    outline-offset: 3px;
}

.reviews-btn[disabled],
.home-blog-btn[disabled],
.procedures__arrow[disabled],
.shop-arrow[disabled],
.team-arrow[disabled],
.results-arrow[disabled],
.academy-arrow[disabled],
.cert-arrow[disabled] {
    opacity: 0.35 !important;
    cursor: default;
}

/* --- Лічильник «1 / 6» --- */

.reviews-pagination,
.home-blog-pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
}

.reviews-current,
.reviews-slash,
.reviews-total,
.home-blog-current,
.home-blog-slash,
.home-blog-total {
    /* Раніше тут стояли розміри з Figma — 20.39px, 12.23px, 37.95px —
       через них цифри стрибали. Розмір має задавати сам текст. */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    font-family: var(--font-main, 'Noto Sans', sans-serif) !important;
    font-size: var(--cnav-font-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    color: var(--cnav-color) !important;
    text-align: center;
}

.reviews-current,
.home-blog-current {
    font-weight: 600 !important;
}

.reviews-slash,
.home-blog-slash {
    color: var(--cnav-accent) !important;
}

@media (max-width: 768px) {
    :root {
        --cnav-btn-w: 48px;
        --cnav-btn-h: 24px;
        --cnav-arrow-w: 38px;
        --cnav-arrow-h: 19px;
        --cnav-gap: 10px;
        --cnav-font-size: 18px;
    }
}