/* ============================================================
 *  DKZ Opinions Slider – Frontend
 * ============================================================ */

.dkz-opinions-slider {
    border-radius: 10px;
    position: relative;
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    color: #fff !important;
    text-align: left;
}

/* ---- Name ---- */
.dkz-opinions-slider__name {
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 500;
    line-height: 1.2em;
    font-size: 39px;
    color: #fff !important;
    margin-bottom: 5px;
}

/* ---- Salon ---- */
.dkz-opinions-slider__salon {
    color: #fb471f;
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 17px;
    margin-bottom: 15px;
}

/* ---- Opinion text ---- */
.dkz-opinions-slider__opinion {
    font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5em;
    color: #ececec !important;
    min-height: 130px;
    padding-right: 60px;
}

/* ============================================================
 *  NAVIGATION – Desktop (right side, vertical)
 * ============================================================ */

.dkz-opinions-slider__nav--desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.dkz-opinions-slider__nav--mobile {
    display: none;
}

/* ---- Arrows ---- */
.dkz-opinions-slider__arrow {
    cursor: pointer;
    font-size: 1.5em;
    color: #fff;
    margin: 10px 0;
    transition: color 0.3s ease;
    user-select: none;
}

.dkz-opinions-slider__arrow:hover {
    color: #fb471f;
}

/* ---- Dots (vertical, desktop) ---- */
.dkz-opinions-slider__dots {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dkz-opinions-slider__dot {
    width: 8px;
    height: 8px;
    background-color: #c1c1c1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dkz-opinions-slider__dot.active {
    background-color: #fb471f;
}

/* ---- Dots horizontal (mobile) ---- */
.dkz-opinions-slider__dots--horizontal {
    flex-direction: row;
}

/* ============================================================
 *  RESPONSIVE – Desktop (>= 1025px)
 * ============================================================ */

@media (min-width: 1025px) {
    .dkz-opinions-slider__opinion {
        font-size: 19px;
    }

    .dkz-opinions-slider__name {
        font-size: 39px;
        font-weight: 500;
    }

    .dkz-opinions-slider__nav--desktop {
        display: flex;
    }

    .dkz-opinions-slider__nav--mobile {
        display: none;
    }
}

/* ============================================================
 *  RESPONSIVE – Tablet (768px – 1024px)
 * ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .dkz-opinions-slider__opinion {
        font-size: 17px;
        padding-right: 0;
    }

    .dkz-opinions-slider__name {
        font-size: 35px;
        font-weight: 500;
    }

    .dkz-opinions-slider__nav--desktop {
        display: none;
    }

    .dkz-opinions-slider__nav--mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 25px;
    }
}

/* ============================================================
 *  RESPONSIVE – Mobile (<= 767px)
 * ============================================================ */

@media (max-width: 767px) {
    .dkz-opinions-slider__opinion {
        font-size: 17px;
        padding-right: 0;
    }

    .dkz-opinions-slider__name {
        font-size: 27px;
        font-weight: 500;
    }

    .dkz-opinions-slider__nav--desktop {
        display: none;
    }

    .dkz-opinions-slider__nav--mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 20px;
    }
}
