/* =================================================================
   Keiraezo - Motyw "Mystic / Magic" [Wersja 4.0 - Fix Animation Artifacts]
   Poprawki: 
   - Ujednolicono selektory (body.theme-magic) z (body.theme-boho)
   - Naprawiono przerwę między navbarem a menu mobilnym
   - Usunięto backdrop-filter który powodował problemy z wysokością
   - Usunięto border-bottom z top bara który dodawał dodatkową wysokość
   - Dodano left: 0, margin-left: 0, padding-left: 0 żeby naprawić przesunięcie w prawo
   - 🔧 CRITICAL FIX: Usunięto backdrop-filter z menu mobilnego - powodował artefakty podczas animacji transform
   - Menu mobilne teraz używa tylko przezroczystości (95%) bez blur
   - Dodano hardware acceleration (translateZ) dla płynniejszych animacji
   
   UWAGA: Jeśli nadal widzisz przerwę między navbarem a menu mobilnym,
   możesz dostosować wartość offsetu w linii ~177 i ~204:
   - Zwiększ wartość (np. -7px, -10px) jeśli przerwa jest większa
   - Zmniejsz wartość (np. -3px, -1px) jeśli menu nachodzi na navbar
================================================================= */

/* --- Import czcionek (bez zmian) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap');

/* --- Paleta "Mystic" (bez zmian) --- */
:root {
    --color-obsidian: #0A090F;
    --color-midnight: #191724;
    --color-surface-dark: #1F1D2E;
    --color-amethyst-dark: #3a2d4e;
    --color-amethyst-glow: #9a7abc;
    --color-gold-antique: #C5A869;
    --color-gold-bright: #F8E7C4;
    --color-parchment: #EAE6E0;
    --color-parchment-muted: #9B9892;
    --shadow-amethyst: 0 0 20px rgba(154, 122, 188, 0.15);
    --shadow-gold: 0 0 15px rgba(197, 168, 105, 0.2);
}

/* =================================================================
   Globalne nadpisanie "Mystic"
================================================================= */

body.theme-magic {
    background-color: var(--color-obsidian);
    color: var(--color-parchment);
    background-image: linear-gradient(180deg, 
        var(--color-obsidian) 0%, 
        #0F0D1A 50%, 
        var(--color-obsidian) 100%
    );
    overflow-x: hidden;
}

/* --- Globalne nadpisania klas Tailwind (Dopracowane) --- */
/* === POCZĄTEK POPRAWKI (SPECIFICITY) === */
body.theme-magic .bg-\[\#FAF7F2\] {
    background-color: transparent !important;
}
body.theme-magic .text-\[\#3D2F2F\] {
    color: var(--color-parchment) !important;
}
body.theme-magic .text-gray-600 {
    color: var(--color-parchment-muted) !important;
}
body.theme-magic .text-gray-500 {
    color: var(--color-parchment-muted) !important;
    opacity: 0.8;
}
body.theme-magic .text-gray-400 {
    color: var(--color-amethyst-dark) !important;
}
body.theme-magic .border-b,
body.theme-magic .border-t,
body.theme-magic .border-x,
body.theme-magic .border {
    border-color: rgba(197, 168, 105, 0.15) !important;
}

/* --- Typografia "Mystic" (bez zmian) --- */
body.theme-magic h1,
body.theme-magic h2 {
    font-family: 'Cinzel', serif;
    color: var(--color-gold-bright);
    text-shadow: 0 2px 10px rgba(248, 231, 196, 0.2);
}
body.theme-magic h3,
body.theme-magic h4,
body.theme-magic .font-\[Amatic\ SC\],
body.theme-magic .boho-font {
    font-family: 'Cormorant Garamond', serif;
    color: var(--color-gold-antique);
    font-weight: 700;
}
body.theme-magic .font-\[Amatic\ SC\] {
     font-family: 'Cormorant Garamond', serif !important;
     font-size: 1.75rem !important;
     letter-spacing: 0.5px;
}
body.theme-magic body, body.theme-magic .font-\[Quicksand\] {
     font-family: 'Quicksand', sans-serif;
     color: var(--color-parchment);
}

/* =================================================================
   Nagłówki sekcji (NOWOŚĆ)
================================================================= */
body.theme-magic h2[style*="Amatic SC"] {
    font-family: 'Cinzel', serif !important;
    font-size: 2.25rem !important; /* Większy i bardziej majestatyczny */
    font-weight: 600;
    color: var(--color-gold-bright);
    position: relative;
    display: inline-block;
    padding: 0 1rem;
}
/* Magiczne linie po bokach tytułów */
body.theme-magic h2[style*="Amatic SC"]::before,
body.theme-magic h2[style*="Amatic SC"]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        var(--color-gold-antique), 
        transparent
    );
}
body.theme-magic h2[style*="Amatic SC"]::before {
    left: -50px;
    background: linear-gradient(to left, 
        transparent, 
        var(--color-gold-antique)
    );
}
body.theme-magic h2[style*="Amatic SC"]::after {
    right: -50px;
    background: linear-gradient(to right, 
        transparent, 
        var(--color-gold-antique)
    );
}

/* =================================================================
   Komponenty "Mystic"
================================================================= */

/* --- Nagłówek i Nawigacja --- */
body.theme-magic header.bg-white {
    background-color: rgba(31, 29, 46, 0.95) !important;
    /* backdrop-filter usunięty - może powodował problemy z wysokością */
    box-shadow: none !important;
}
body.theme-magic header a:hover, body.theme-magic header button:hover {
    color: var(--color-gold-bright) !important;
}
body.theme-magic .group-hover\:block {
    background-color: var(--color-surface-dark);
    border: 1px solid rgba(197, 168, 105, 0.3);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Używamy 'body.theme-magic' dla spójności i wyższej specyficzności */
body.theme-magic .mobile-nav {
    background: rgba(31, 29, 46, 0.95) !important; /* Mniej przezroczysty bez blur */
    /* backdrop-filter wyłączony - konfliktował z animacją transform */
    box-shadow: -5px 0 15px rgba(0,0,0,0.2), 0 0 30px rgba(154, 122, 188, 0.1); /* Shadow po lewej + glow */
    border-top-right-radius: 0;
    border-bottom-right-radius: 8px;
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    left: 0 !important; /* Wymuszam pozycję przy lewej krawędzi */
    /* Odejmujemy 5px od top żeby "przykleić" do headera */
    top: calc(var(--header-height, 104px) - 5px) !important;
    max-height: calc(100vh - var(--header-height, 104px) + 5px) !important;
    /* Hardware acceleration dla lepszej animacji */
    transform: translateZ(0);
    will-change: transform;
}

/* Overlay dla menu mobilnego - ABSOLUTNIE WYŁĄCZAM blur w każdy możliwy sposób */
body.theme-magic .fixed.bg-black.bg-opacity-50,
body.theme-magic div.fixed.bg-black.bg-opacity-50,
body.theme-magic .fixed.right-0.bottom-0.bg-black.bg-opacity-50,
body.theme-magic .fixed.bg-black.bg-opacity-50[style],
body.theme-magic div.fixed.right-0.bottom-0.bg-black[class*="opacity"],
body.theme-magic .fixed.z-40.bg-black.bg-opacity-50,
body.theme-magic .z-40.fixed.right-0.bottom-0.bg-black.bg-opacity-50 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Wymuszam zwykły kolor bez efektów */
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: none !important;
    isolation: isolate !important; /* Tworzę nowy stacking context */
    will-change: auto !important; /* Wyłączam optymalizacje które mogą powodować blur */
}

/* Specjalna reguła dla overlay po prawej stronie menu */
body.theme-magic .fixed.bg-black.bg-opacity-50 {
    /* Odejmujemy 5px od top żeby "przykleić" do headera */
    top: calc(var(--header-height, 104px) - 5px) !important;
}

/* Przycisk zamknięcia w menu mobilnym Magic */
body.theme-magic .mobile-nav > div:first-child {
    background: rgba(31, 29, 46, 0.98) !important; /* Prawie nieprzezroczysty */
    /* backdrop-filter wyłączony - konfliktował z animacją */
    border-bottom: 1px solid rgba(197, 168, 105, 0.3);
}

/* Scrollbar dla mobile-nav w motywie Magic */
body.theme-magic .mobile-nav::-webkit-scrollbar {
    width: 8px;
}
body.theme-magic .mobile-nav::-webkit-scrollbar-track {
    background: rgba(31, 29, 46, 0.5);
}
body.theme-magic .mobile-nav::-webkit-scrollbar-thumb {
    background: var(--color-gold-antique);
    border-radius: 4px;
}
body.theme-magic .mobile-nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-bright);
}

body.theme-magic .hover\:bg-\[\#FAF7F2\]:hover {
    background-color: var(--color-amethyst-dark) !important;
}

/* --- Top Bar (Gradient) --- */
body.theme-magic .bg-gradient-to-r {
    background: linear-gradient(90deg, var(--color-amethyst-dark), var(--color-obsidian)) !important;
    color: var(--color-parchment) !important;
    /* border-bottom usunięty - powodował dodatkową wysokość */
}

/* --- Przyciski (Wersja PRO) --- */
body.theme-magic .bg-\[\#8B7355\] {
    background: linear-gradient(145deg, var(--color-gold-antique), #a88d53) !important;
    color: var(--color-obsidian) !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 2px 10px rgba(197, 168, 105, 0.2), 0 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
body.theme-magic .bg-\[\#8B7355\]:hover {
    background: var(--color-gold-bright) !important;
    box-shadow: 0 4px 20px rgba(197, 168, 105, 0.4), 0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
body.theme-magic .border-\[\#8B7355\] {
    border-color: var(--color-gold-antique) !important;
    color: var(--color-gold-antique) !important;
    border-radius: 4px !important;
    background: transparent !important;
}
body.theme-magic .border-\[\#8B7355\]:hover {
    background-color: var(--color-gold-antique) !important;
    color: var(--color-obsidian) !important;
    font-weight: 700;
}

body.theme-magic .rounded-full {
    border-radius: 4px !important;
}

/* WYJĄTEK: Przełącznik motywu musi pozostać okrągły */
body.theme-magic button[aria-label="Zmień motyw"] {
    border-radius: 9999px !important;
    position: relative !important;
    overflow: visible !important;
}
body.theme-magic button[aria-label="Zmień motyw"] span {
    border-radius: 9999px !important;
    position: relative !important;
}
body.theme-magic button[aria-label="Zmień motyw"] span.translate-x-5 {
    transform: translateX(1.25rem) !important;
}
body.theme-magic button[aria-label="Zmień motyw"] span.translate-x-0 {
    transform: translateX(0) !important;
}

/* --- Sekcja Hero (Poprawka przycisków) --- */
body.theme-magic section[class*="h-\["] .rounded-full {
    border-radius: 4px !important;
}
body.theme-magic section[class*="h-\["] .bg-white { /* Przycisk główny Hero */
    background: var(--color-gold-bright) !important;
    color: var(--color-obsidian) !important;
    font-weight: 700;
    transition: all 0.3s ease;
}
body.theme-magic section[class*="h-\["] .bg-white:hover {
    background: var(--color-parchment) !important;
    transform: scale(1.05);
}
body.theme-magic section[class*="h-\["] .border-white { /* Przycisk dodatkowy Hero */
    border-color: var(--color-gold-bright) !important;
    color: var(--color-gold-bright) !important;
    transition: all 0.3s ease;
}
body.theme-magic section[class*="h-\["] .border-white:hover {
    background: var(--color-gold-bright) !important;
    color: var(--color-obsidian) !important;
    font-weight: 700;
    transform: scale(1.05);
}

/* --- Karty Produktów i Licytacji --- */
body.theme-magic .bg-white { 
    background-color: var(--color-midnight) !important;
    border: 1px solid transparent;
    border-radius: 6px !important;
    box-shadow: var(--shadow-amethyst), 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
body.theme-magic .bg-white:hover {
    border-color: rgba(197, 168, 105, 0.5);
    box-shadow: 0 0 30px rgba(154, 122, 188, 0.3), 0 4px 8px rgba(0,0,0,0.3) !important;
    transform: translateY(-5px) scale(1.01);
}
/* WYJĄTEK: Wyłączenie zoomu dla sekcji "Cech" */
body.theme-magic section.py-12.bg-white:hover {
    transform: none !important;
    box-shadow: var(--shadow-amethyst), 0 2px 4px rgba(0,0,0,0.2) !important;
    border-color: transparent !important;
}
/* Zwiększenie ikon i tekstu w sekcji "Cech" (Szybka Wysyłka) */
body.theme-magic section.py-12.bg-white i {
    font-size: 2.5rem !important; /* text-4xl (nieco mniejsze niż 3rem) */
}
body.theme-magic section.py-12.bg-white h3 {
    font-size: 1.25rem !important; /* text-xl */
    color: var(--color-parchment) !important; /* Jaśniejszy kolor */
    font-weight: 600 !important; /* Waga 'semibold' dla Quicksand */
}
body.theme-magic section.py-12.bg-white p {
    font-size: 1rem !important; /* text-base (było text-sm) */
}
body.theme-magic .shadow-md {
    box-shadow: var(--shadow-amethyst), 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.theme-magic .text-\[\#8B7355\] {
    color: var(--color-gold-antique) !important;
}

/* --- Koszyk (Flyout) --- */
body.theme-magic .fixed.right-0.bg-white {
    background-color: var(--color-surface-dark) !important;
    border-left: 1px solid rgba(197, 168, 105, 0.3);
    box-shadow: -10px 0 30px rgba(0,0,0,0.4) !important;
}

/* --- Strona Produktu (`produkt.html`) --- */
body.theme-magic .prose p, body.theme-magic .prose li {
    color: var(--color-parchment);
}
body.theme-magic .prose h3 {
    color: var(--color-gold-antique);
}
/* Magiczne Zakładki (Opis, Opinie) */
body.theme-magic .border-b-2.border-\[\#8B7355\] {
    border-width: 0 0 2px 0 !important;
    border-style: solid !important;
    border-image: linear-gradient(90deg, 
        var(--color-amethyst-glow) 0%, 
        var(--color-gold-antique) 100%
    ) 1 !important;
    color: var(--color-gold-bright) !important;
}
body.theme-magic .text-\[\#8B7355\] {
    color: var(--color-gold-bright) !important;
}
body.theme-magic table td {
    color: var(--color-parchment) !important;
}
body.theme-magic .bg-\[\#FAF7F2\] { /* Jasne tło w produkcie (np. info o wysyłce) */
    background-color: var(--color-midnight) !important;
    border: 1px solid rgba(154, 122, 188, 0.2);
}
/* Poprawka przycisków +/- na stronie produktu */
body.theme-magic .hover\:bg-gray-50:hover {
    background-color: var(--color-amethyst-dark) !important;
    color: var(--color-gold-bright);
}
/* Poprawka przycisków wyboru (np. Rozmiar) */
body.theme-magic button.border-2.rounded-lg {
    background: var(--color-midnight);
    border: 2px solid var(--color-amethyst-dark) !important;
    transition: all 0.3s ease;
}
body.theme-magic button.border-2.rounded-lg:hover {
    border-color: var(--color-amethyst-glow) !important;
}
body.theme-magic button.border-2.rounded-lg.bg-\[\#FAF7F2\] { /* Aktywny przycisk */
    border-color: var(--color-gold-antique) !important;
    background: var(--color-amethyst-dark) !important;
    color: var(--color-gold-bright);
    box-shadow: var(--shadow-gold);
}


/* --- Formularze (Input, Select) - Wersja PRO --- */
body.theme-magic input,
body.theme-magic select,
body.theme-magic textarea {
    background-color: var(--color-obsidian) !important;
    border: 1px solid var(--color-amethyst-dark) !important;
    color: var(--color-parchment) !important;
    border-radius: 4px !important;
}
body.theme-magic input:focus,
body.theme-magic select:focus,
body.theme-magic textarea:focus {
    border-color: var(--color-gold-antique) !important;
    box-shadow: var(--shadow-gold) !important;
    outline: none !important;
}
body.theme-magic input::placeholder {
    color: var(--color-parchment-muted);
    opacity: 0.7;
}
body.theme-magic input[type="checkbox"].rounded {
    border-color: var(--color-amethyst-dark);
}
body.theme-magic input[type="checkbox"].rounded:checked {
    background-color: var(--color-gold-antique);
}
/* Customowa strzałka dla <select> */
body.theme-magic select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23C5A869' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    padding-right: 2.5rem;
}

/* --- Poprawki "Innych Elementów" --- */

/* 1. Newsletter Section */
body.theme-magic section.bg-gradient-to-r {
    background: linear-gradient(135deg, var(--color-amethyst-dark), var(--color-obsidian)) !important;
    border-top: 1px solid rgba(197, 168, 105, 0.3);
    border-bottom: 1px solid rgba(197, 168, 105, 0.3);
}

/* 2. Breadcrumbs */
body.theme-magic nav[aria-label="Breadcrumb"] a {
    color: var(--color-parchment-muted);
    transition: color 0.3s ease;
}
body.theme-magic nav[aria-label="Breadcrumb"] a:hover {
    color: var(--color-gold-bright);
}
body.theme-magic nav[aria-label="Breadcrumb"] li.text-\[\#8B7355\] {
    color: var(--color-gold-antique) !important;
    font-weight: 600;
}
body.theme-magic nav[aria-label="Breadcrumb"] span.text-gray-400 {
    color: var(--color-amethyst-dark) !important;
}

/* 3. Paginacja (sklep.html) */
body.theme-magic div.flex.justify-center nav button {
    background: var(--color-midnight);
    border: 1px solid var(--color-amethyst-dark);
}
body.theme-magic div.flex.justify-center nav button:hover {
    border-color: var(--color-gold-antique);
    color: var(--color-gold-antique);
}
body.theme-magic div.flex.justify-center nav button.bg-\[\#8B7355\] {
    background: var(--color-gold-antique) !important;
    color: var(--color-obsidian) !important;
    border-color: var(--color-gold-antique) !important;
    font-weight: 700;
}

/* 4. Gwiazdki Ocen */
body.theme-magic .text-yellow-400 {
    color: var(--color-gold-antique) !important;
}
body.theme-magic .bg-yellow-400 { /* Paski postępu w opiniach */
    background-color: var(--color-gold-antique) !important;
}
body.theme-magic .bg-gray-200 { /* Tło pasków postępu */
    background-color: var(--color-amethyst-dark) !important;
}

/* 5. TikTok Mockup */
body.theme-magic .tiktok-phone-mockup {
    border: 1px solid rgba(154, 122, 188, 0.2);
    background-color: var(--color-midnight) !important;
    box-shadow: var(--shadow-amethyst), 0 5px 20px rgba(0,0,0,0.3) !important;
}

/* 6. Baner Cookie */
body.theme-magic .fixed.bottom-0.bg-white {
    background-color: var(--color-surface-dark) !important;
    border-top: 1px solid rgba(197, 168, 105, 0.3);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3) !important;
}


/* =================================================================
   STOPKA (Wersja 3.4 - Unifikacja Formy)
================================================================= */
body.theme-magic footer.bg-\[\#3D2F2F\] {
    background-color: var(--color-surface-dark) !important;
    border-top: 2px solid var(--color-gold-antique); /* Dopasowanie do formy Boho */
    position: relative;
    color: var(--color-parchment) !important; /* Ustawienie bazowego koloru tekstu */
}

/* Ozdobny wzór na górze stopki (dopasowany do formy Boho) */
body.theme-magic footer.bg-\[\#3D2F2F\]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px; /* Wysokość jak w Boho */
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(197, 168, 105, 0.1) 35px, rgba(197, 168, 105, 0.1) 70px);
    opacity: 0.7; 
}

/* Style typografii i linków */
body.theme-magic footer h4 {
    font-family: 'Cinzel', serif;
    color: var(--color-gold-antique); 
}
body.theme-magic footer a {
    color: var(--color-parchment-muted);
    transition: color 0.2s ease-out;
}
body.theme-magic footer a:hover {
    color: var(--color-gold-bright) !important;
    text-shadow: none;
    transform: none;
}
body.theme-magic footer .opacity-90, body.theme-magic footer .opacity-75 {
    color: var(--color-parchment-muted) !important;
}

/* --- Badge Koszyka (Poprawka v4.0 - Kwadracik) --- */
body.theme-magic button .fa-shopping-bag ~ span.absolute {
    /* Pozycja centralna */
    top: 62% !important; /* Wyśrodkowanie w "korpusie" ikony */
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important; 
    
    /* Wygląd - Kwadracik z obciętymi rogami */
    width: auto !important;
    min-width: 11px !important; /* Mały rozmiar */
    height: 11px !important; /* Mały rozmiar */
    padding: 0 2px !important; /* Mały padding */
    border-radius: 4px !important; /* KWADRACIK z obciętymi rogami */
    font-size: 0.5rem !important; /* Mały font */
    font-weight: 700 !important;
    line-height: 1 !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Kolory "jak wcześniej" (oryginalne kolory plakietki) */
    background-color: var(--color-gold-antique) !important;
    color: var(--color-obsidian) !important;
    box-shadow: none !important; 
}

/* Poprawka dla mobilnego nagłówka (ciemne tło) */
body.theme-magic .mobile-nav button .fa-shopping-bag ~ span.absolute {
     box-shadow: none !important;
}
/* === KONIEC POPRAWKI (SPECIFICITY) === */


/* =================================================================
   Scrollbar
================================================================= */
body.theme-magic ::-webkit-scrollbar {
    width: 10px;
}
body.theme-magic ::-webkit-scrollbar-track {
    background: var(--color-obsidian);
}
body.theme-magic ::-webkit-scrollbar-thumb {
    background: var(--color-amethyst-dark);
    border-radius: 5px;
    border: 2px solid var(--color-obsidian);
}
body.theme-magic ::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-antique);
}


/* ################################################################# */
/* ################################################################# */
/* =================================================================
   Keiraezo - Motyw "Boho" [Unifikacja Funkcjonalna v2.0]
   Cel: Zsynchronizowanie funkcji (hover, focus, etc.) z motywem "Magic"
================================================================= */
/* ################################################################# */
/* ################################################################# */


/* --- Import czcionek (wymagane dla spójności) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap');

/* =================================================================
   Typografia "Boho" (Wzorowana na Magic)
================================================================= */

/* Zastąpienie domyślnej 'Amatic SC' dla H1, H2 */
body.theme-boho h1,
body.theme-boho h2 {
    font-family: 'Cinzel', serif;
}

/* Zastąpienie domyjlnej 'Quicksand' / 'Amatic SC' dla H3, H4 */
body.theme-boho h3,
body.theme-boho h4,
body.theme-boho .font-\[Amatic\ SC\],
body.theme-boho .boho-font {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}

/* Dopasowanie rozmiaru 'Amatic SC' do stylu Cormorant */
body.theme-boho .font-\[Amatic\ SC\] {
     font-family: 'Cormorant Garamond', serif !important;
     font-size: 1.75rem !important; /* Ten sam rozmiar co w Magic */
     letter-spacing: 0.5px;
}

/* =================================================================
   Nagłówki sekcji (Wzorowane na Magic)
   (dla "Polecane Amulety", "Aktywne Licytacje" etc.)
================================================================= */
body.theme-boho h2[style*="Amatic SC"] {
    font-family: 'Cinzel', serif !important;
    font-size: 2.25rem !important; /* Ten sam rozmiar co w Magic */
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 1rem;
}

/* Ozdobne linie po bokach (kolor Boho: #8B7355) */
body.theme-boho h2[style*="Amatic SC"]::before,
body.theme-boho h2[style*="Amatic SC"]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        #8B7355, /* Główny kolor Boho */
        transparent
    );
}
body.theme-boho h2[style*="Amatic SC"]::before {
    left: -50px;
    background: linear-gradient(to left, 
        transparent, 
        #8B7355 /* Główny kolor Boho */
    );
}
body.theme-boho h2[style*="Amatic SC"]::after {
    right: -50px;
    background: linear-gradient(to right, 
        #8B7355, /* Główny kolor Boho */
        transparent
    );
}

/* =================================================================
   Globalne Kształty (Wzorowane na Magic)
================================================================= */

/* Zmiana `.rounded-full` na kwadratowe przyciski */
body.theme-boho .rounded-full {
    border-radius: 4px !important;
}

/* WYJĄTEK: Przełącznik motywu musi pozostać okrągły */
body.theme-boho button[aria-label="Zmień motyw"] {
    border-radius: 9999px !important;
    position: relative !important;
    overflow: visible !important;
}
body.theme-boho button[aria-label="Zmień motyw"] span {
    border-radius: 9999px !important;
    position: relative !important;
}
body.theme-boho button[aria-label="Zmień motyw"] span.translate-x-5 {
    transform: translateX(1.25rem) !important;
}
body.theme-boho button[aria-label="Zmień motyw"] span.translate-x-0 {
    transform: translateX(0) !important;
}

/* Przyciski Hero */
body.theme-boho section[class*="h-\["] .rounded-full {
    border-radius: 4px !important;
}

/* Karty Produktów, Licytacji etc. (klasa .bg-white w HTML) */
body.theme-boho .bg-white { 
    border-radius: 6px !important;
    border: 1px solid transparent; /* Dodane dla płynnego przejścia */
    transition: all 0.3s ease; /* DODANO dla spójności */
}

/* =================================================================
   EFEKT ZOOM (Hover) dla Kart Boho (NOWOŚĆ v2.0)
================================================================= */
body.theme-boho .bg-white:hover {
    border-color: rgba(139, 115, 85, 0.5); /* Brąz Boho */
    box-shadow: 0 0 25px rgba(139, 115, 85, 0.15), 0 4px 8px rgba(0,0,0,0.1) !important;
    transform: translateY(-5px) scale(1.01);
}

/* WYJĄTEK: Wyłączenie zoomu dla sekcji "Cech" (jak w Magic) */
body.theme-boho section.py-12.bg-white:hover {
    transform: none !important;
    /* Używamy domyślnego shadow-md z Tailwind dla Boho */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; 
    border-color: transparent !important;
}

/* =================================================================
   Formularze (Wzorowane na Magic) (NOWOŚĆ v2.0)
================================================================= */
body.theme-boho input,
body.theme-boho select,
body.theme-boho textarea {
    border-radius: 4px !important;
}

/* Style Focus dla formularzy (jak w Magic) */
body.theme-boho input:focus,
body.theme-boho select:focus,
body.theme-boho textarea:focus {
    border-color: #8B7355 !important;
    box-shadow: 0 0 10px rgba(139, 115, 85, 0.2) !important;
    outline: none !important;
}

/* Customowa strzałka <select> (jak w Magic) */
body.theme-boho select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B7355' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    padding-right: 2.5rem;
}

/* =================================================================
   Poprawki Rozmiarów (Wzorowane na Magic)
================================================================= */

/* Zwiększenie ikon i tekstu w sekcji "Cech" (Szybka Wysyłka) */
body.theme-boho section.py-12.bg-white i {
    font-size: 2.5rem !important;
}
body.theme-boho section.py-12.bg-white h3 {
    font-size: 1.25rem !important; 
    font-weight: 600 !important; /* Dopasowanie wagi dla Quicksand */
}
body.theme-boho section.py-12.bg-white p {
    font-size: 1rem !important; 
}


/* =================================================================
   Strona Produktu i Inne Elementy (Unifikacja v2.0)
================================================================= */

/* --- Strona Produktu --- */
/* Aktywna zakładka (już ostylowana przez .border-[#8B7355]) */
body.theme-boho .border-b-2.border-\[\#8B7355\] {
    color: #8B7355 !important;
    font-weight: 700;
}
/* Poprawka przycisków +/- na stronie produktu */
body.theme-boho .hover\:bg-gray-50:hover {
    background-color: #F4F0E9 !important; /* Ciemniejszy beż */
}
/* Poprawka przycisków wyboru (np. Rozmiar) */
body.theme-boho button.border-2.rounded-lg {
    /* Domyślne tło .bg-white jest OK */
    border: 2px solid #EAE6E0 !important; /* Jaśniejsza ramka */
    transition: all 0.3s ease;
}
body.theme-boho button.border-2.rounded-lg:hover {
    border-color: #C5A869 !important; /* Średni brąz */
}
/* Aktywny przycisk (selektor z Magic, dopasowany do Boho) */
body.theme-boho button.border-2.rounded-lg.bg-\[\#FAF7F2\] { 
    border-color: #8B7355 !important;
    background: #F4F0E9 !important; /* Ciemniejszy beż */
    box-shadow: 0 0 10px rgba(139, 115, 85, 0.2);
}

/* --- Breadcrumbs --- */
body.theme-boho nav[aria-label="Breadcrumb"] a {
    transition: color 0.3s ease;
}
body.theme-boho nav[aria-label="Breadcrumb"] a:hover {
    color: #3D2F2F; /* Ciemniejszy tekst przy hover */
}
body.theme-boho nav[aria-label="Breadcrumb"] li.text-\[\#8B7355\] {
    color: #8B7355 !important;
    font-weight: 600;
}

/* --- Paginacja (sklep.html) --- */
body.theme-boho div.flex.justify-center nav button {
    background: #FAF7F2; /* Domyślne tło */
    border: 1px solid #EAE6E0; /* Jasna ramka */
}
body.theme-boho div.flex.justify-center nav button:hover {
    border-color: #8B7355;
    color: #8B7355;
}
body.theme-boho div.flex.justify-center nav button.bg-\[\#8B7355\] {
    background: #8B7355 !important;
    color: #FFFFFF !important; /* Biały tekst na brązie */
    border-color: #8B7355 !important;
    font-weight: 700;
}

/* --- Gwiazdki Ocen --- */
body.theme-boho .text-yellow-400 {
    color: #8B7355 !important;
}
body.theme-boho .bg-yellow-400 { /* Paski postępu w opiniach */
    background-color: #8B7355 !important;
}
/* Tło pasków postępu (.bg-gray-200) jest OK w Boho */

/* =================================================================
   Sekcja Newslettera (Boho) (NOWOŚĆ v2.1)
================================================================= */
body.theme-boho section.bg-gradient-to-r {
    background: #3D2F2F !important; /* Ciemny brąz jak w stopce */
    color: #FAF7F2 !important; /* Jasny tekst boho */
    border-top: 1px solid rgba(139, 115, 85, 0.3);
    border-bottom: 1px solid rgba(139, 115, 85, 0.3);
}

/* Poprawka inputa w newsletterze boho */
body.theme-boho section.bg-gradient-to-r input[type="email"] {
    background-color: #FAF7F2 !important;
    color: #3D2F2F !important; /* Ciemny tekst na jasnym tle */
    border: 1px solid #8B7355 !important;
}
body.theme-boho section.bg-gradient-to-r input[type="email"]::placeholder {
    color: #8B7355;
    opacity: 0.7;
}
body.theme-boho section.bg-gradient-to-r input[type="email"]:focus {
     border-color: #8B7355 !important;
     box-shadow: 0 0 10px rgba(139, 115, 85, 0.2) !important;
}

/* Poprawka przycisku w newsletterze boho */
body.theme-boho section.bg-gradient-to-r button[type="submit"] {
    background-color: #8B7355 !important; /* Główny brąz */
    color: #FFFFFF !important; /* Biały tekst */
}
body.theme-boho section.bg-gradient-to-r button[type="submit"]:hover {
    background-color: #7A6248 !important; /* Ciemniejszy brąz */
}

/* Poprawka linku polityki prywatności */
body.theme-boho section.bg-gradient-to-r a {
    color: #C5A869 !important; /* Średni brąz dla linku */
}


/* =================================================================
   Stopka (Unifikacja Stylu)
================================================================= */
body.theme-boho footer a {
    color: var(--color-parchment-muted);
    transition: color 0.2s ease-out;
}
body.theme-boho footer a:hover {
    color: var(--color-gold-bright) !important;
    text-shadow: none;
    transform: none;
}

/* Dopasowanie fontu H4 w stopce do stylu "Magic" */
body.theme-boho footer h4 {
    font-family: 'Cinzel', serif;
}

/* Dodanie ozdobnej ramki i wzoru do stopki Boho */
body.theme-boho footer.bg-\[\#3D2F2F\] {
    border-top: 2px solid #8B7355; /* Główny kolor Boho */
    position: relative;
}

body.theme-boho footer.bg-\[\#3D2F2F\]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(139, 115, 85, 0.1) 35px, rgba(139, 115, 85, 0.1) 70px);
    opacity: 0.7;
}
/* =================================================================
   Poprawka Banera Cookies (Boho)
================================================================= */
body.theme-boho .fixed.bottom-0.bg-white {
    background-color: #FAF7F2 !important; /* Domyślny beż Boho */
    color: #3D2F2F !important; /* Ciemny tekst dla kontrastu */
    border-top: 1px solid rgba(139, 115, 85, 0.3) !important; /* Separator Boho */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1) !important;
}

/* Poprawka tekstu linku w banerze boho */
body.theme-boho .fixed.bottom-0.bg-white a {
    color: #8B7355 !important;
}

/* =================================================================
   Panel Koszyka - Style dla obu motywów
================================================================= */

/* Panel koszyka - motyw Magic */
body.theme-magic .fixed.right-0.top-0.h-full {
    background: rgba(31, 29, 46, 0.65) !important; /* Zwiększona przezroczystość 65% */
    backdrop-filter: blur(20px) !important; /* Silniejsze rozmycie */
    -webkit-backdrop-filter: blur(20px) !important;
    color: var(--color-parchment) !important;
    border-left: 1px solid rgba(197, 168, 105, 0.3);
    box-shadow: -10px 0 30px rgba(0,0,0,0.4) !important;
}

body.theme-magic .fixed.right-0.top-0.h-full h3 {
    color: var(--color-gold-bright) !important;
    font-family: 'Cinzel', serif;
}

body.theme-magic .fixed.right-0.top-0.h-full h4 {
    color: var(--color-gold-antique) !important;
}

body.theme-magic .fixed.right-0.top-0.h-full .text-gray-500 {
    color: var(--color-parchment-muted) !important;
}

body.theme-magic .fixed.right-0.top-0.h-full .border {
    border-color: rgba(197, 168, 105, 0.15) !important;
    background-color: rgba(31, 29, 46, 0.5) !important;
}

body.theme-magic .fixed.right-0.top-0.h-full .border-t,
body.theme-magic .fixed.right-0.top-0.h-full .border-b {
    border-color: rgba(197, 168, 105, 0.3) !important;
}

/* Scrollbar dla panelu koszyka w Magic */
body.theme-magic .fixed.right-0.top-0.h-full::-webkit-scrollbar {
    width: 8px;
}
body.theme-magic .fixed.right-0.top-0.h-full::-webkit-scrollbar-track {
    background: rgba(31, 29, 46, 0.5);
}
body.theme-magic .fixed.right-0.top-0.h-full::-webkit-scrollbar-thumb {
    background: var(--color-gold-antique);
    border-radius: 4px;
}
body.theme-magic .fixed.right-0.top-0.h-full::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-bright);
}

/* Panel koszyka - motyw Boho */
body.theme-boho .fixed.right-0.top-0.h-full {
    background: rgba(250, 247, 242, 0.92) !important; /* Przezroczystość 92% */
    backdrop-filter: blur(15px) !important; /* Efekt rozmycia */
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.15) !important;
}

/* --- Badge Koszyka (Boho) (Poprawka v4.0 - Kwadracik) --- */
body.theme-boho button .fa-shopping-bag ~ span.absolute {
    /* Pozycja centralna */
    top: 61% !important; /* Wyśrodkowanie w "korpusie" ikony */
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important; 
    
    /* Wygląd - Kwadracik z obciętymi rogami */
    width: auto !important;
    min-width: 11px !important; /* Mały rozmiar */
    height: 11px !important; /* Mały rozmiar */
    padding: 0 2px !important; /* Mały padding */
    border-radius: 4px !important; /* KWADRACIK z obciętymi rogami */
    font-size: 0.5rem !important; /* Mały font */
    font-weight: 700 !important;
    line-height: 1 !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Kolory "jak wcześniej" (oryginalne kolory plakietki) */
    background-color: #8B7355 !important;
    color: #FFFFFF !important;
    box-shadow: none !important; 
}

/* Poprawka dla mobilnego nagłówka (jasne tło) */
body.theme-boho .mobile-nav button .fa-shopping-bag ~ span.absolute {
     box-shadow: none !important;
}


/* =================================================================
   Scrollbar (Boho) (NOWOŚĆ v2.0)
================================================================= */
body.theme-boho ::-webkit-scrollbar {
    width: 10px;
}
body.theme-boho ::-webkit-scrollbar-track {
    background: #FAF7F2; /* Tło strony */
}
body.theme-boho ::-webkit-scrollbar-thumb {
    background: #C5A869; /* Średni brąz */
    border-radius: 5px;
    border: 2px solid #FAF7F2; /* Odsunięcie od krawędzi */
}
body.theme-boho ::-webkit-scrollbar-thumb:hover {
    background: #8B7355; /* Ciemny brąz */
}

/* Scrollbar dla mobile-nav w motywie Boho */
body.theme-boho .mobile-nav {
    background: rgba(250, 247, 242, 0.90) !important; /* Przezroczystość 90% */
    backdrop-filter: blur(15px) !important; /* Efekt rozmycia */
    -webkit-backdrop-filter: blur(15px) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 8px;
    box-shadow: 5px 0 20px rgba(0,0,0,0.15) !important;
}

/* Overlay dla menu mobilnego w boho - bez blur */
body.theme-boho .fixed.bg-black.bg-opacity-50 {
    backdrop-filter: none !important; /* Wymuszam brak blur */
    -webkit-backdrop-filter: none !important;
}

/* Przycisk zamknięcia w menu mobilnym Boho */
body.theme-boho .mobile-nav > div:first-child {
    background: rgba(250, 247, 242, 0.95) !important; /* Lekko mniej przezroczysty */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #EAE6E0;
}

body.theme-boho .mobile-nav::-webkit-scrollbar {
    width: 8px;
}
body.theme-boho .mobile-nav::-webkit-scrollbar-track {
    background: #FAF7F2;
}
body.theme-boho .mobile-nav::-webkit-scrollbar-thumb {
    background: #C5A869;
    border-radius: 4px;
    border: 2px solid #FAF7F2;
}
body.theme-boho .mobile-nav::-webkit-scrollbar-thumb:hover {
    background: #8B7355;
}