/* Kontener główny - pancerna wysokość */
.fhs-hero-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

/* Wymuszenie 100% wysokości dla Splide */
.fhs-splide,
.fhs-splide .splide__track,
.fhs-splide .splide__list,
.fhs-splide .splide__slide {
    /* !important jest tu konieczny, bo Twój stary slider.js
       wstrzykuje style inline (height: ...px) i psuje efekt 100vh */
    height: 100vh !important; 
    height: 100dvh !important;
    min-height: 100vh !important;
}

/* Obrazek na pełny ekran */
.fhs-splide .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

/* Warstwa przycisku */
.fhs-content {
    position: absolute;
    z-index: 10;
    top: var(--fhs-top-d, 50%);
    left: var(--fhs-left-d, 20%);
    transform: translate(-50%, -50%);
    width: auto;
}

/* Styl przycisku */
.fhs-btn {
    display: inline-block;
    padding: 5px 30px;
    background-color: #0058DDBF;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    font-size: 1.5rem;
    border-radius: 2px;
    transition: background 0.3s;
    white-space: nowrap;
}

.fhs-btn:hover {
    background-color: #c99321;
    color: #fff;
}

/* --- STRZAŁKI --- */
.fhs-splide .splide__arrow {
    /* Domyślny wygląd (ciemniejszy/przezroczysty) */
    background: rgba(255, 255, 255, 0.2) !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    opacity: 1 !important;
    z-index: 99 !important;
    border-radius: 50%;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    visibility: visible !important;
    transition: background 0.2s ease;
    
    /* Wyłączenie domyślnych ramek przeglądarki po kliknięciu */
    outline: none !important; 
    -webkit-tap-highlight-color: transparent !important;
}

/* !!! FIX: Podświetlenie TYLKO dla urządzeń z myszką !!! */
/* To sprawia, że na telefonie kolor się nie zmienia, więc nie ma co "zostać" */
@media (hover: hover) {
    .fhs-splide .splide__arrow:hover {
        background: rgba(255, 255, 255, 0.4) !important;
    }
}

/* Reset stanu :focus (żeby po kliknięciu wracało do normy) */
.fhs-splide .splide__arrow:focus {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Pozycjonowanie przycisków */
.fhs-splide .splide__arrow--prev {
    left: 2rem !important;
    right: auto !important;
}
.fhs-splide .splide__arrow--next {
    right: 2rem !important;
    left: auto !important;
}

/* Ikona SVG */
.fhs-splide .splide__arrow svg {
    fill: #fff !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: block;
}

/* Obrót lewej strzałki */
.fhs-splide .splide__arrow--prev svg {
    transform: rotate(180deg) !important;
}


/* --- MOBILE (Dotyk) --- */
@media (max-width: 768px) {
    .fhs-content {
        top: var(--fhs-top-m, 50%);
        left: var(--fhs-left-m, 50%);
        width: 90%;
        text-align: center;
    }
    
    .fhs-btn {
        padding: 12px 24px;
        font-size: 1.1rem;
    }

    /* Strzałki mobile - stały wygląd */
    .fhs-splide .splide__arrow {
        width: 3rem !important;
        height: 3rem !important;
        /* Na mobile używamy ciemniejszego tła */
        background: rgba(0, 0, 0, 0.4) !important; 
    }
    
    /* Na mobile hover i focus ma być taki sam jak zwykły stan (brak reakcji kolorem) */
    .fhs-splide .splide__arrow:hover,
    .fhs-splide .splide__arrow:focus,
    .fhs-splide .splide__arrow:active {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    .fhs-splide .splide__arrow--prev { left: 5px !important; }
    .fhs-splide .splide__arrow--next { right: 5px !important; }
    
    .fhs-splide .splide__arrow svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}