@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
}

/* --- LOGO I NAWIGACJA --- */
.logo-container {
    height: 40px;
    width: auto;
}

@media (min-width: 768px) {
    .logo-container { height: 50px; }
}

#mobile-menu.active {
    display: flex;
}

section {
    scroll-margin-top: 100px;
}

/* --- KARTY PRODUKTÓW --- */
.product-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card:hover img { 
    transform: scale(1.05); 
    transition: 0.3s; 
}

/* --- SLIDER (SWIPER) --- */
.swiper-pagination-bullet-active {
    background: #d97706 !important;
}

/* --- FANCYBOX (MODAL PRODUKTU) --- */

/* Główny kontener okna */
.fancybox__content {
    padding: 0 !important;
    background: white !important;
    max-width: 95% !important;
    width: 1100px !important; /* Optymalna szerokość dla czytelności */
    border-radius: 24px;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

/* Zapobieganie wystawaniu treści */
.fancybox__content > div {
    max-width: 100%;
    width: 100%;
}

/* Przycisk zamknięcia - dostosowanie */
.fancybox__content > .f-button.is-close-btn {
    top: 15px;
    right: 15px;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 10;
}

/* --- RESPONSYWNOŚĆ MOBILNA (MODAL) --- */
@media (max-width: 768px) {
    .fancybox__content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100vh !important; /* Na telefonie zajmuje całą wysokość jeśli trzeba */
        border-radius: 0;
    }

    /* Kluczowa poprawka: Pozwalamy na przewijanie treści pod tytułem */
    /* Dzięki temu przycisk na dole nigdy nie zostanie ucięty */
    .fancybox__content .flex-col.md\:flex-row {
        overflow-y: auto !important;
        max-height: calc(100vh - 70px); /* Odejmujemy miejsce na pasek tytułowy */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem; /* Bezpieczny odstęp na dole */
    }

    /* Zmniejszenie paddingów dla odzyskania miejsca na ekranie */
    .md\:p-12, .p-8 {
        padding: 1.25rem !important;
    }

    .text-2xl, .text-3xl {
        font-size: 1.25rem !important;
    }
}
/* style.css */

/* Estetyczny scrollbar dla okna polityki */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

/* Tło Fancybox */
.fancybox__container {
    --fancybox-bg: rgba(0, 0, 0, 0.85);
}
/* Stylizacja strzałek Swipera */
.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.3); /* Półprzezroczyste białe tło */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    color: #000 !important; /* Kolor samej strzałki */
    transition: all 0.3s ease;
    backdrop-filter: blur(4px); /* Lekki efekt rozmycia pod strzałką - wygląda premium */
}

/* Ukrywamy je na bardzo małych ekranach, żeby nie zasłaniały znicza, 
   albo po prostu je zmniejszamy */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 18px !important; /* Rozmiar samej ikonki strzałki */
    }
}

/* Efekt po najechaniu myszką */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(217, 119, 6, 0.8); /* Zmienia się na bursztynowy (Twój kolor) */
    color: #fff !important;
}

/* Zmniejszenie rozmiaru samych strzałek wewnątrz okręgu */
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}