/* Slider (slick): strzalki, kropki, slajd pelnej szerokosci.
   Przeniesione z responsive.css. */

/* Responsive Design - Media Queries *//* Components that need specific media query handling *//* Sliders *//* Slider nie podciaga sie juz w gore - robil to, zeby wejsc pod przezroczysty
   naglowek, a tego wariantu nie ma. */
.slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 999;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1px solid rgb(var(--color-secondary-rgb) / 0.12);
    border-radius: 50%;
    box-shadow: var(--shadow-control);
    text-indent: 0;
    overflow: visible;
    /* Slick domyślnie wstawia tekst „Previous” / „Next” w <button> — ukrywamy, ikona jest na ::before */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transform: translateY(-50%)
}

.slick-slider .slick-arrow.slick-prev {
    left: 0;
}

.slick-slider .slick-arrow.slick-next {
    right: 0;
}

/*
 * Chevron arrows via SVG on :before.
 * slick-theme.css sets font-family: "slick" on :before — plain Unicode chevrons stay invisible.
 */
.slick-slider .slick-arrow.slick-prev,
.slick-slider .slick-arrow.slick-next {
    background-image: none !important;
}

.slick-slider .slick-arrow.slick-prev:before,
.slick-slider .slick-arrow.slick-next:before {
    content: "" !important;
    display: block !important;
    font-family: initial !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.35rem;
    height: 1.35rem;
    max-width: 90%;
    max-height: 90%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* Kolor strzalki bierze sie z tokenu, a nie z wnetrza data URI,
       do ktorego zmienna CSS nie siega. */
    background-color: var(--color-secondary);
    -webkit-font-smoothing: antialiased;
}

.slick-slider .slick-arrow.slick-prev:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}

.slick-slider .slick-arrow.slick-next:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* slick-theme zeruje tło na hover/focus — zostawiamy biały krąg */
.slick-slider .slick-arrow.slick-prev:hover,
.slick-slider .slick-arrow.slick-prev:focus,
.slick-slider .slick-arrow.slick-next:hover,
.slick-slider .slick-arrow.slick-next:focus {
    background-color: var(--color-white) !important;
    border: 1px solid rgb(var(--color-secondary-rgb) / 0.12) !important;
    box-shadow: var(--shadow-control) !important;
}

/* Homepage: ten sam biały krąg co globalnie (nie nadpisuj bg — odsłania tekst Next/Previous) */
.home .slick-slider .slick-arrow {
    color: transparent !important;
}

.slick-dots {
    list-style: none;
    margin-left: 0;
    width: 100%;
    text-align: center
}

.slick-dots li {
    margin-right: .5rem;
    display: inline-block;
    vertical-align: middle
}

.slick-dots button {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-grey);
    text-indent: -9999px;
    border-radius: 100%;
    padding: 0;
    background: 0 0
}

.slick-dots .slick-active button,
.slick-dots button:hover {
    border-color: var(--color-primary)
}

.box .slick-slider .slick-arrow.slick-prev {
    left: -6rem
}

.box .slick-slider .slick-arrow.slick-next {
    right: -6rem
}

.list--slider .slick-arrow.slick-prev {
    left: 0;
    background-image: url(../../../assets/images/arrow-left-slider.png)
}

.list--slider .slick-arrow.slick-next {
    right: 0;
    background-image: url(../../../assets/images/arrow-right-slider.png)
}


.slider-alignfull .slider-title {
    font: var(--text-5xl);
    padding: 0;
    margin: 0 0 1rem 0rem
}

.slider-alignfull span {
    font: var(--text-3xl);
    display: block;
    color: var(--color-white);
    margin-bottom: 1rem
}