/* === PRODUCT PAGE – FULL WIDTH DESCRIPTION (CLASSIC 8.2) === */

/* rodzic sekcji produktu */
#product .product-container {
  position: relative;
}

/* TABY – wyjscie z kolumny */
#product .product-container .tabs {
  width: 60vw;              /* pelna szerokosc ekranu */
  margin-left: calc(-50vw + 80%);
  margin-right: calc(-50vw + 50%);
  margin-top: 40px;
}

/* zawartosc opisu wraca do szerokosci kontenera */
#product .product-container .tabs > * {
  max-width: 1020px;         /* dopasuj do swojego theme */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.category-cover,
.category-thumbnail {
    max-width: 600px;   /* maksymalna szerokosc kontenera */
    width: 100%;         /* wypelnia dostepna szerokosc */
    margin: 0 auto;      /* centruje kontener na stronie */
}

.category-cover img,
.category-thumbnail img {
    object-fit: contain; /* zachowuje proporcje obrazka */
    width: 100%;         /* dopasowuje sie do szerokosci kontenera */
    height: auto;        /* wysokosc dopasowuje sie proporcjonalnie */
    display: block;      /* usuwa ewentualne przerwy pod obrazkiem */
}
/* Wymuszenie wyswietlania lewego menu kategorii */
.block-categories .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

/* Ukrycie kursorów wskazujacych na klikalnosc (opcjonalnie) */
.block-categories .navbar-toggler, 
.block-categories .arrows {
    display: none !important;
}

/* Poprawka wciec, aby menu bylo czytelne */
.block-categories .category-sub-menu {
    margin-left: 15px;
}
/* ==========================================================================
   WERSJA FINALNA: CZARNY, BIALY, CZERWONY, POMARANCZOWY
   CECHA: CZARNE H2, STALA WIELKOSC MODULU, PELNE ZAOKRAGLENIA
   ========================================================================== */

/* 1. TLO I STRUKTURA */
body, #wrapper {
    background-color: #000000 !important;
    background-image: url('/backimg/red.jpg') !important;
    background-repeat: repeat !important;
    color: #ffffff !important;
}

/* 2. NAGLÓWKI - ZMIANA NA CZARNE DLA CZYTELNOSCI */
/* Wszystkie h2 oraz pozostale naglówki ustawione na czarny */
h1, .h1, h2, .h2, h3, .h3, h4, .h5, .product-title a {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* 3. STALA WIELKOSC MODULU PRODUKTU (KAFELKA) */
.product-miniature.js-product-miniature {
    background: #ffffff !important; /* Biale tlo kafelka, aby czarne napisy byly widoczne */
    width: 100% !important;
    max-width: 280px !important; /* Stala szerokosc */
    height: 420px !important;    /* Stala wysokosc */
    margin: 10px auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 15px !important;
    border: 2px solid #ff0000 !important; /* Czerwona ramka kafelka */
    overflow: hidden !important;
}

/* Ujednolicenie zdjec w stalym module */
.product-miniature .thumbnail-top img {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important; /* Zdjecie nie wykroczy poza ramy */
}

/* 4. ZAOKRAGLENIE WSZYSTKICH RAMEK (Ostre krawedzie -> oble) */
*, 
.product-miniature, 
.thumbnail-container, 
.btn, 
.form-control, 
input, 
.card, 
.modal-content, 
.img-thumbnail, 
.atc_div button,
#header .blockcart {
    border-radius: 20px !important; /* Silne zaokraglenie */
}

/* 5. PRZYCISK "KUP" I KOSZYK (Pomaranczowy - uwaga) */
.btn-primary, 
.add-to-cart-button button, 
#ets_addToCart,
.blockcart {
    background-color: #ff8c00 !important; /* Pomaranczowy */
    border: none !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.btn-primary:hover {
    background-color: #e67e00 !important;
    transform: scale(1.02) !important;
}

/* 6. CENY (Czerwony) */
.product-price-and-shipping .price, 
.current-price {
    color: #ff0000 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

/* 7. NAGLÓWEK STRONY (Header) */
#header {
    background: #000000 !important;
    border-bottom: 4px solid #ff0000 !important;
}

.header-nav {
    background: #111111 !important;
}

/* 8. ETYKIETY (Np. "Nowy") */
.product-flags .product-flag.new {
    background: #ff0000 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

/* 9. FORMULARZE */
input.form-control {
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1px solid #ff0000 !important;
}

/* STYL DLA TYTULU SEKCJI NA CIEMNYM TLE */
h2.products-section-title.text-uppercase {
    color: #ff8c00 !important; /* Twój pomaranczowy */
    text-align: center;
    font-weight: 900 !important;
    font-size: 2.5rem; /* Mozesz dostosowac wielkosc */
    
    /* Czarna obwódka (efekt outline) */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         3px  3px 5px rgba(0,0,0,0.8); /* Dodatkowy delikatny cien dla glebi */
    
    margin-top: 2rem;
    margin-bottom: 2rem;
    letter-spacing: 2px;
}

/* OPCJONALNIE: Jesli chcesz, aby efekt dotyczyl wszystkich glównych naglówków sekcji */
.h2.products-section-title {
    color: #ff8c00 !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Styl dla naglówka sekcji: pomaranczowy tekst z czarna obwódka */
h2.products-section-title.text-uppercase {
    color: #ff8c00 !important; /* Pomaranczowy */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         2px  2px 4px rgba(0,0,0,0.7) !important; /* Czarna obwódka + delikatny cien */
    font-weight: 900 !important;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* Styl dla linku kontaktowego: bialy tekst, czerwona obwódka, lzejsza czcionka */
#contact-link, 
#contact-link a {
    color: #ffffff !important; /* Bialy tekst */
    font-weight: 500 !important; /* Mniej gruba czcionka (standardowa to 400, pogrubiona 700) */
    text-decoration: none;
    transition: all 0.3s ease; /* Plynne przejscie kolorów */
    
    /* Czerwona obwódka (delikatniejsza) */
    text-shadow: 
        -1px -1px 0 #ff0000,  
         1px -1px 0 #ff0000,
        -1px  1px 0 #ff0000,
         1px  1px 0 #ff0000 !important;
}

/* Podswietlenie na hover: zmiana obwódki z czerwonej na pomaranczowa */
#contact-link a:hover {
    color: #ffffff !important; /* Tekst zostaje bialy */
    text-shadow: 
        -1px -1px 0 #ff8c00,  
         1px -1px 0 #ff8c00,
        -1px  1px 0 #ff8c00,
         1px  1px 0 #ff8c00 !important; /* Pomaranczowa obwódka przy najechaniu */
}

/* --- NAWIGACJA GÓRNA: KONTAKT, LOGOWANIE, KOSZYK --- */

/* Stan spoczynkowy: Biala czcionka, lzejsza waga */
#contact-link, 
#contact-link a, 
.user-info a, 
.blockcart a {
    color: #ffffff !important;
    font-weight: 400 !important; /* Ciensza czcionka */
    text-decoration: none !important;
    transition: color 0.2s ease; /* Plynne przejscie koloru */
}

/* Ikony przy tekscie równiez biale */
#contact-link i, 
.user-info i, 
.blockcart i {
    color: #ffffff !important;
}

/* Stan po najechaniu (Hover): Zmiana na czerwony */
#contact-link a:hover, 
.user-info a:hover, 
.blockcart a:hover,
.user-info a:hover i,
.blockcart a:hover i {
    color: #ff0000 !important; /* Czerwony */
}

/* Specyficzne poprawki dla ikony koszyka i liczb w koszyku */
.blockcart a .cart-products-count {
    color: #ffffff !important;
}

.blockcart a:hover .cart-products-count {
    color: #ff0000 !important;
}

/* Styl dla ikony menu mobilnego dla spójnosci */
#menu-icon i {
    color: #ffffff !important;
}

#menu-icon:hover i {
    color: #ff0000 !important;
}

/*-----------------------------*/
/* DOPASOWANIE ROZMIARU I WYGLADU BANNERA (SLIDER) */
.carousel-inner {
    width: 100% !important;
    max-width: 1110px; /* Maksymalna szerokosc zgodna z grafika */
    margin: 0 auto !important;
    border-radius: 20px !important; /* Zaokraglenie rogów calego slidera */
    overflow: hidden !important;
    border: 2px solid #ff0000 !important; /* Czerwona obwódka pasujaca do kafelków */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Cien, by slider odstawal od tla */
}

.carousel-item img {
    width: 100% !important;
    height: auto !important; /* Zachowanie proporcji */
    display: block;
    object-fit: cover; /* Wypelnienie przestrzeni bez rozciagania */
}

/* Dostosowanie dla urzadzen mobilnych */
@media (max-width: 767px) {
    .carousel-inner {
        border-radius: 10px !important; /* Nieco mniejsze zaokraglenie na telefonach */
        border-width: 1px !important;
    }
}

/* Styl dla linku "Wszystkie nowe produkty" */
a.all-product-link {
    color: #ffffff !important; /* Bialy tekst */
    font-weight: 400 !important; /* Lzejsza czcionka, jak w nawigacji */
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 8px 20px;
    border: 1px solid #ff0000; /* Czerwona ramka pasujaca do reszty stylu */
    border-radius: 20px !important; /* Zaokraglenie 20px */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* Pólprzezroczyste czarne tlo dla czytelnosci */
}

/* Ikona strzalki wewnatrz linku */
a.all-product-link i.material-icons {
    color: #ffffff !important;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Efekt po najechaniu (Hover) */
a.all-product-link:hover {
    color: #ff0000 !important; /* Zmiana tekstu na czerwony */
    border-color: #ff8c00; /* Zmiana ramki na pomaranczowa przy najechaniu */
    background: #000000;
}

/* Animacja strzalki przy najechaniu */
a.all-product-link:hover i.material-icons {
    color: #ff0000 !important;
    transform: translateX(5px); /* Delikatne przesuniecie strzalki w prawo */
}

/* Styl dla linku "Wszystkie nowosci" */
a.all_new_products {
    color: #ffffff !important; /* Bialy tekst */
    font-weight: 400 !important; /* Lzejsza czcionka */
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 8px 20px;
    border: 1px solid #ff0000; /* Czerwona ramka */
    border-radius: 20px !important; /* Zaokraglenie 20px */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4); /* Subtelne tlo dla lepszej czytelnosci */
}

/* Ikona strzalki */
a.all_new_products i.material-icons {
    color: #ffffff !important;
    margin-left: 5px;
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Efekt po najechaniu (Hover) */
a.all_new_products:hover {
    color: #ff0000 !important; /* Tekst na czerwono */
    border-color: #ff8c00; /* Ramka zmienia sie na pomaranczowa */
    background: #000000; /* Ciemniejsze tlo */
}

/* Reakcja ikony na hover */
a.all_new_products:hover i.material-icons {
    color: #ff0000 !important;
    transform: translateX(5px); /* Strzalka wysuwa sie w prawo */
}

/* STYLIZACJA SEKCI NEWSLETTERA */

/* 1. Usuniecie bialego tla i ustawienie przezroczystego kontenera */
#footer .block_newsletter, 
.block_newsletter {
    background: rgba(0, 0, 0, 0.6) !important; /* Ciemne, pólprzezroczyste tlo */
    border: 2px solid #ff0000 !important;      /* Czerwona ramka pasujaca do kafelków */
    border-radius: 20px !important;            /* Zaokraglenie 20px */
    padding: 20px !important;
    color: #ffffff !important;                 /* Bialy tekst */
    margin-bottom: 20px;
}

/* 2. Tekst zachety (Otrzymuj informacje...) */
#block-newsletter-label {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 1.1rem;
}

/* 3. Pole wpisywania e-maila */
.block_newsletter form input[type="email"],
.block_newsletter .input-wrapper input {
    background: #1a1a1a !important;   /* Ciemne tlo wewnatrz pola */
    color: #ffffff !important;        /* Bialy tekst wpisywany */
    border: 1px solid #ff0000 !important; /* Czerwona ramka pola */
    border-radius: 20px !important;   /* Zaokraglone pole */
    padding: 10px 20px !important;
    height: auto !important;
}

/* 4. Przycisk "Subskrybuj" (Pomaranczowy - element akcji) */
.block_newsletter form input[type="submit"],
.block_newsletter .btn-primary {
    background: #ff8c00 !important;   /* Pomaranczowy */
    color: #000000 !important;        /* Czarny tekst na pomaranczu */
    border: none !important;
    border-radius: 20px !important;   /* Zaokraglony przycisk */
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 10px 25px !important;
    transition: background 0.3s ease;
    cursor: pointer;
}

.block_newsletter form input[type="submit"]:hover {
    background: #e67e00 !important;   /* Ciemniejszy pomarancz na hover */
}

/* 5. Maly druczek (Mozesz zrezygnowac...) */
.block_newsletter p:not(#block-newsletter-label) {
    color: #cccccc !important;        /* Szary, mniej rzucajacy sie w oczy kolor */
    font-size: 0.85rem;
    margin-top: 10px;
}
/* ROZSZERZENIE SEKCI NEWSLETTERA DO 80% */
#footer .block_newsletter, 
.block_newsletter {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid #ff0000 !important;
    border-radius: 20px !important;
    padding: 30px !important; /* Nieco wiekszy padding dla lepszego efektu */
    color: #ffffff !important;
    
    /* KLUCZOWE ZMIANY SZEROKOSCI: */
    width: 80% !important;      /* Zajmuje 80% kontenera nadrzednego */
    max-width: 1200px;          /* Opcjonalna blokada, by nie byl zbyt szeroki na ekranach UltraWide */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;     /* Usuwamy ewentualne oplywanie */
    clear: both;
}

/* Wysrodkowanie tresci wewnatrz dla lepszego balansu przy 80% szerokosci */
#block-newsletter-label {
    text-align: center;
    margin-bottom: 20px;
}

.block_newsletter form .row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Poprawka szerokosci inputów na szerokim banerze */
.block_newsletter .input-wrapper {
    min-width: 300px;
}

/* ==========================================================================
   STYLIZACJA STOPKI (FOOTER)
   Naglówki: Pomaranczowy | Linki: Bialy | Hover: Czerwony
   ========================================================================== */

/* 1. Naglówki kolumn w stopce (Produkty, Nasza firma, Informacja o sklepie) */
#footer .wrapper .h3, 
#footer .block-contact-title, 
#footer .title .h3 {
    color: #ff8c00 !important; /* Pomaranczowy */
    text-transform: uppercase;
    font-weight: 800 !important;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* 2. Lista linków w stopce */
#footer ul li a, 
#footer .cms-page-link {
    color: #ffffff !important; /* Bialy */
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-block;
    padding: 3px 0;
}

/* Efekt najechania na linki */
#footer ul li a:hover, 
#footer .cms-page-link:hover {
    color: #ff0000 !important; /* Czerwony */
    padding-left: 5px; /* Delikatne wysuniecie */
}

/* 3. Dane kontaktowe (Informacja o sklepie) */
#contact-infos {
    color: #ffffff !important; /* Bialy dla tekstu adresu */
    line-height: 1.6;
}

/* Linki wewnatrz danych kontaktowych (telefon, e-mail) */
#contact-infos a {
    color: #ff0000 !important; /* Czerwony dla wyróznienia danych */
    font-weight: 600 !important;
    text-decoration: none !important;
}

#contact-infos a:hover {
    color: #ff8c00 !important; /* Zmiana na pomaranczowy przy najechaniu */
}



/* 5. Ikony rozwijania na mobile (+ / -) */
.navbar-toggler .material-icons {
    color: #ff8c00 !important;
}

/* FINALNA POPRAWKA BANNERA KATEGORII */

/* 1. Usuniecie bialego tla i dodanie czerwonej obwódki */
.block-category.card {
    background-color: #000000 !important; /* Gleboka czern */
    border: 2px solid #ff0000 !important;   /* Czerwona obwódka */
    border-radius: 20px !important;         /* Zaokraglenie 20px */
    padding: 20px 0 !important;             /* Odstep góra/dól, boki na zero dla tla */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;         /* Centrowanie obrazka w poziomie */
}

/* 2. Wyczyszczenie wewnetrznych kontenerów Presty */
.card-block, 
.block-category-inner {
    background: transparent !important;      /* Usuwa biale tlo */
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 3. Wysrodkowanie samej grafiki */
.category-cover {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

.category-cover img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: inline-block !important;
}

/* 4. Ukrycie napisu kategorii (jesli jeszcze jest) */
.block-category h1 {
    display: none !important;
}

/* NAPRAWA SUBKATEGORII - WYSRODKOWANIE I ZWARTY UKLAD */

/* 1. Usuniecie naglówka "Podkategorie" */
.subcategory-heading {
    display: none !important;
}

/* 2. Kontener glówny - upewnienie sie, ze tlo jest czarne i ramka czerwona */
#subcategories.card.card-block {
    background-color: #000000 !important;
    border: 2px solid #ff0000 !important;
    border-radius: 20px !important;
    padding: 30px 15px !important;
}

/* 3. Lista ikon - zblizenie ich do siebie i wysrodkowanie */
.subcategories-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Srodkuje ikony w poziomie */
    gap: 15px !important;               /* Odstep miedzy ikonami - im mniejszy, tym blizej siebie */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 4. Pojedynczy kafelek subkategorii */
.subcategories-list li {
    width: auto !important;             /* Szerokosc zalezy od zawartosci */
    min-width: 150px !important;        /* Minimalna szerokosc, by napisy sie miescily */
    max-width: 180px !important;        /* Maksymalna szerokosc, by byly blisko siebie */
    background: transparent !important;
    margin: 0 !important;
    padding: 10px !important;
    text-align: center !important;
}

/* 5. Obrazki w subkategoriach - mniejsze i dopasowane */
.subcategory-image {
    margin-bottom: 8px !important;
}

.subcategory-image img {
    max-width: 140px !important;        /* Zmniejszamy ikony, by upakowac je blizej */
    height: auto !important;
    border: 1px solid #444;             /* Delikatna ramka wokól samej grafiki */
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.subcategories-list li:hover img {
    transform: scale(1.05);
    border-color: #ff0000;
}

/* 6. Napisy pod ikonami - mniejsze i biale */
.subcategory-name {
    color: #ffffff !important;
    font-size: 0.85rem !important;      /* Mniejsza czcionka pozwala na zwarty uklad */
    text-transform: uppercase;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 5px;
}

.subcategories-list li:hover .subcategory-name {
    color: #ff8c00 !important;
}

/* STYLIZACJA SCIEZKI POWROTNEJ (BREADCRUMBS) */

.breadcrumb {
    background: transparent !important; /* Usuwamy ewentualne tlo */
    padding: 10px 0 !important;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Styl dla wszystkich elementów listy */
.breadcrumb li {
    color: #ffffff !important; /* Bialy dla separatorów (ukosników) */
    font-size: 0.9rem;
    font-weight: 400;
}

/* Styl dla linków (np. Strona glówna) */
.breadcrumb li a {
    color: #ffffff !important; /* Bialy tekst */
    text-decoration: none !important;
    transition: color 0.2s ease;
}

/* Hover dla linków - zmiana na czerwony */
.breadcrumb li a:hover {
    color: #ff0000 !important;
}

/* Ostatni element (biezaca kategoria, np. Games Workshop) - Pomaranczowy */
.breadcrumb li:last-child span,
.breadcrumb li:last-child {
    color: #ff8c00 !important; /* Pomaranczowy dla aktualnej lokalizacji */
    font-weight: 600 !important;
}

/* Dodanie separatora, jesli Twoja Presta go nie generuje automatycznie */
.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
    color: #444; /* Ciemny separator, by nie odciagal uwagi */
}
/* RAMKA DLA ZDJEC NA STRONIE PRODUKTU */

/* 1. Ramka dla glównego zdjecia produktu */
.product-cover {
    background-color: #ffffff !important; /* Zachowanie bialego tla */
    border: 2px solid #ff0000 !important;   /* Czerwona ramka */
    border-radius: 20px !important;         /* Zaokraglenie 20px */
    overflow: hidden !important;            /* Przyciecie zdjecia do zaokraglen */
    padding: 10px !important;               /* Odstep zdjecia od czerwonej linii */
    margin-bottom: 15px !important;
}

.product-cover img {
    border-radius: 10px !important;         /* Lekkie zaokraglenie samego zdjecia */
}

/* 2. Ramki dla miniaturek (thumbnails) */
.thumb-container img {
    border: 1px solid #ff0000 !important;   /* Czerwona ramka dla malych zdjec */
    border-radius: 10px !important;         /* Zaokraglenie 10px */
    padding: 2px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease;
}

/* 3. Wyróznienie wybranej miniaturki */
.thumb-container img.selected,
.thumb-container img:hover {
    border-width: 2px !important;
    border-color: #ff8c00 !important;       /* Pomaranczowy dla zaznaczonej miniatury */
}

/* 4. Ikona lupy (zoom) - dopasowanie kolorystyczne */
.product-cover .layer .zoom-in {
    color: #ff0000 !important;
}

/* STYLIZACJA NAZWY PRODUKTU */

h1.h1[itemprop="name"], 
.product-container h1.h1 {
    color: #ff8c00 !important;      /* Nasz glówny pomaranczowy */
    text-transform: uppercase;      /* Wielkie litery dla mocniejszego efektu */
    font-weight: 800 !important;    /* Gruba czcionka */
    font-size: 2.2rem !important;   /* Duzy, czytelny rozmiar */
    letter-spacing: 1px;            /* Lekki odstep miedzy literami */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Delikatny cien dla glebi */
}
/* STYLIZACJA ETYKIET POD CENA */

.tax-shipping-delivery-label {
    color: #ffffff !important;         /* Bialy kolor dla napisu "Brutto" */
    font-size: 0.9rem;
    font-weight: 300;
    margin-top: 5px;
}

/* Wyróznienie informacji o dostawie (Wysylka w 24h) */
.tax-shipping-delivery-label .delivery-information {
    color: #ff0000 !important;         /* Czerwony kolor - sygnal szybkosci */
    font-weight: 700 !important;       /* Pogrubienie */
    text-transform: uppercase;         /* Wielkie litery */
    margin-left: 10px;
    background: rgba(255, 0, 0, 0.1);  /* Bardzo delikatna czerwona poswiata w tle */
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 0, 0, 0.3); /* Subtelna ramka */
}
/* 1. BANERY Z POMARANCZOWA OBWÓDKA */
.ets_baw_display_banner img {
    border: 2px solid #ff8c00 !important; /* Pomaranczowa obwódka */
    border-radius: 15px !important;
    margin: 10px 0 !important;
    transition: transform 0.3s ease;
}

.ets_baw_display_banner img:hover {
    transform: scale(1.02);
}

/* 2. WYBÓR ILOSCI (TOUCHSPIN) */
.product-add-to-cart .control-label {
    color: #ffffff !important; /* Bialy napis "Ilosc" */
}

#quantity_wanted {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ff0000 !important; /* Czerwona ramka pola */
    border-radius: 10px !important;
    height: 45px;
}

.btn-touchspin {
    background-color: #1a1a1a !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
}

/* 3. PRZYCISK DODAJ DO KOSZYKA */
.add-to-cart {
    background-color: #ff0000 !important; /* Czerwone tlo */
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.add-to-cart:hover {
    background-color: #ff8c00 !important; /* Zmiana na pomaranczowy przy najechaniu */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
}

/* 4. DOSTEPNOSC (OSTATNIE SZTUKI) */
#product-availability {
    color: #ff8c00 !important; /* Pomaranczowy ostrzegawczy */
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.product-last-items {
    color: #ff0000 !important; /* Czerwona ikonka wykrzyknika */
    margin-right: 5px;
}

/* 5. UDOSTEPNIANIE I OPINIE */
.social-sharing span, .product-comments-additional-info {
    color: #ffffff !important;
}

.btn-comment {
    background: transparent !important;
    border: 1px solid #ff8c00 !important; /* Pomaranczowa ramka dla opinii */
    color: #ff8c00 !important;
    border-radius: 10px !important;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-comment:hover {
    background: #ff8c00 !important;
    color: #000000 !important;
}

/* Ikona udostepniania Facebook */
.social-sharing li.facebook a {
    background-color: #1a1a1a !important;
    border: 1px solid #ff0000 !important;
    border-radius: 50%;
    color: #ff0000 !important;
    transition: 0.3s;
}

.social-sharing li.facebook a:hover {
    background-color: #ff0000 !important;
    color: #ffffff !important;
}
/* 1. CALKOWITE USUNIECIE SEKCJI KOMENTARZY / OPINII */
.product-comments-additional-info, 
.post-product-comment {
    display: none !important;
}

/* 2. STYLIZACJA IKONY UDOSTEPNIANIA FACEBOOK */
.social-sharing {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #333; /* Delikatna linia oddzielajaca */
}

.social-sharing span {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.social-sharing ul {
    padding: 0;
    list-style: none;
}

.social-sharing li.facebook a {
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a !important; /* Ciemne tlo przycisku */
    border: 2px solid #ff0000 !important;   /* Czerwona obwódka */
    border-radius: 50% !important;
    color: #ff0000 !important;             /* Czerwona ikona */
    transition: all 0.3s ease;
    text-indent: -9999px;                  /* Ukrycie tekstu "Udostepnij" */
    position: relative;
}

/* Dodanie widocznej litery "f" (ikony) jesli font-awesome nie lapie poprawnie */
.social-sharing li.facebook a::before {
    content: "f";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-indent: 0;
    position: absolute;
}

/* Efekt najechania na ikone Facebooka */
.social-sharing li.facebook a:hover {
    background-color: #ff0000 !important; /* Tlo zmienia sie na czerwone */
    color: #ffffff !important;             /* Ikona zmienia sie na biala */
    transform: scale(1.1) rotate(5deg);    /* Delikatne powiekszenie i obrót */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}
/* USUNIECIE BLOKU ZASAD DOSTAWY (REASSURANCE) */
.blockreassurance_product {
    display: none !important;
}

/* FINALNE WYSRODKOWANIE I ROZCIAGNIECIE */

.tabs {
    float: none !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    
    /* Uzywamy vw, ale z precyzyjnym wycentrowaniem */
    width: 90vw !important;           /* 90% szerokosci okna, by nie dotykalo brzegów */
    max-width: 1200px !important;     /* Ale nie szerszy niz 1200px */
    
    /* Magiczny fix na wycentrowanie bloku wyjetego z kolumny */
    margin-left: calc(50% - 45vw) !important; 
    
    margin-top: 80px !important;
    margin-bottom: 50px !important;
    left: auto !important;
    right: auto !important;
}

/* 1. ZAKLADKI - Twoje kolory i brak tla */
.nav-tabs {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: -3px !important;
    padding: 0 !important;
}

.nav-tabs .nav-link {
    background-color: #000000 !important; /* Czarne tlo */
    color: #ff0000 !important;            /* Czerwony tekst (nieaktywny) */
    border: 3px solid #ff0000 !important;  /* Czerwona ramka */
    border-bottom: none !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 12px 40px !important;
    font-weight: bold;
    text-transform: uppercase;
}

/* Aktywna zakladka - Pomaranczowa */
.nav-tabs .nav-link.active {
    background-color: #000000 !important;
    color: #ff8c00 !important;            /* Pomaranczowy tekst (aktywny) */
    border-color: #ff0000 !important;
}

/* 2. BLOK TRESCI - Biale tlo, czarny tekst */
.tab-content {
    background-color: #ffffff !important; 
    border: 3px solid #ff0000 !important; 
    border-radius: 25px !important;
    padding: 40px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8);
    width: 100% !important;
}

/* 3. TEKST - Czarny */
.product-description, 
.product-description p, 
#description,
#product-details {
    color: #000000 !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    text-align: left !important;
}

/* Fix dla mobilnych */
@media (max-width: 991px) {
    .tabs {
        width: 95vw !important;
        margin-left: calc(50% - 47.5vw) !important;
    }
}
/* 0. UKRYWANIE KOMENTARZY */
#product-comments-list-header, 
.comments-nb,
#product-comments-list-header + div {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* TYLKO KOLOR NAGLÓWKA */
.featured-products h2, 
.products-section-title, 
h2.h2 {
    color: #ff8c00 !important; /* Twój pomaranczowy */
    text-align: center !important;
}
/* POPRAWA CZYTELNOSCI I WYGLADU KOSZYKA */

/* Glówny kontener koszyka i podsumowania */
.cart-grid .card, 
.cart-container, 
.cart-summary {
    border-radius: 8px !important; /* Znacznie mniejszy, ostrzejszy promien */
    border: 2px solid #ff0000 !important; /* Czerwona ramka dla spójnosci */
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

/* Naglówek "Koszyk" */
.cart-grid-body h1.h1 {
    color: #000000 !important;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #ff0000;
    padding-bottom: 10px;
}

/* Nazwa produktu w koszyku */
.product-line-info a.label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 1.1rem;
}

/* Cena produktu */
.product-line-info.product-price .price,
.product-price strong {
    color: #ff0000 !important; /* Czerwona cena dla wyróznienia */
}

/* Przyciski ilosci i inputy */
.bootstrap-touchspin input.form-control {
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    background: #f8f8f8 !important;
}

/* Przycisk "Przejdz do zamówienia" */
.checkout .btn-primary {
    background-color: #ff8c00 !important; /* Twój pomaranczowy */
    border: none !important;
    border-radius: 5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #000000 !important;
    transition: background 0.3s;
}

.checkout .btn-primary:hover {
    background-color: #ff0000 !important; /* Zmiana na czerwony po najechaniu */
    color: #ffffff !important;
}

/* Link "Kontynuuj zakupy" */
a.label[href*="kowalczyka.mgc.com.pl"] {
    color: #ffffff !important; /* Bialy tekst na ciemnym tle */
    font-weight: bold;
    display: inline-block;
    margin-top: 15px;
}

a.label[href*="kowalczyka.mgc.com.pl"] i {
    color: #ff8c00 !important; /* Pomaranczowa strzalka */
}
/* STYLIZACJA KOSZYKA - FIX ZAKLADKI I RAMKI */

/* 1. KONTENER GLÓWNY */
.cart-grid .cart-container {
    background-color: #ffffff !important;
    border: 3px solid #ff0000 !important; /* Czerwona ramka */
    border-radius: 10px !important;
    overflow: hidden !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* 2. CZARNA ZAKLADKA (BELKA KOSZYKA) */
.cart-container .card-block:first-of-type {
    background-color: #000000 !important; /* Czarne tlo */
    padding: 15px 25px !important;
    margin: 0 !important;
    border-bottom: 2px solid #ff0000 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. NAPIS KOSZYK - WYRAZNY POMARANCZ */
.cart-container .h1, 
.cart-container h1.h1 {
    color: #ff8c00 !important; /* Twój pomaranczowy */
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 2px !important;
    display: inline-block !important;
    /* Gwarancja widocznosci */
    position: relative !important;
    z-index: 10 !important;
}

/* 4. TRESC POD ZAKLADKA */
.cart-overview.js-cart {
    background-color: #ffffff !important;
    padding: 20px !important;
}

/* 5. FIX DLA MOBILNYCH (RESPONSYWNOSC) */
@media (max-width: 768px) {
    .cart-container .card-block:first-of-type {
        padding: 10px 15px !important;
        justify-content: center !important;
    }
    
    .cart-container .h1 {
        font-size: 1.3rem !important;
    }

    /* Naprawa ucinania obrazków na telefonie */
    .product-line-grid-left {
        width: 80px !important;
        margin: 0 auto 10px !important;
    }
}

/* Ukrycie separatora HR, jesli psuje wyglad pod czarna belka */
.cart-container hr.separator {
    display: none !important;
}

/* ================================================================= */
/* RESET I KOLORYSTYKA MENU KATEGORII */

/* 1. KATEGORIA NAJWYZSZA (np. Games Workshop) - POMARANCZOWA */
.category-top-menu > li > a {
    color: #ff8c00 !important;
    text-transform: uppercase !important;
}

/* 2. WSZYSTKIE PODKATEGORIE (Warhammer 40k, Space Marines itd.) - CZARNE */
.category-sub-menu a,
.category-sub-menu .category-sub-link {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 3. NAJECHANIE MYSZKA (HOVER) - WSZYSTKIE SWIECA NA CZERWONO */
.category-top-menu a:hover,
.category-sub-menu a:hover,
.category-sub-menu .category-sub-link:hover {
    color: #ff0000 !important;
    transition: 0.1s color ease-in-out;
}

/* 4. AKTUALNA KATEGORIA (ACTIVE) - CZARNA Z POMARANCZOWA OBWÓDKA */
/* Selektor dla linku, który jest aktualnie otwarta strona */
.category-top-menu a.active,
.category-sub-menu a.active,
.category-sub-link.active,
/* Dodatkowe selektory dla specyficznych szablonów Presty */
.category-top-menu .current a {
    color: #000000 !important;
    font-weight: bold !important;
    /* Pomaranczowa poswiata wokól liter */
    text-shadow: 
        1px 1px 0px #ff8c00, 
       -1px -1px 0px #ff8c00, 
        1px -1px 0px #ff8c00, 
       -1px 1px 0px #ff8c00,
        0 0 5px #ff8c00 !important;
}

/* 5. FIX DLA IKON ROZWIJANIA (Plusy/Minusy) - zostawiamy czarne lub pomaranczowe */
.collapse-icons .material-icons {
    color: #000000 !important;
}
/* ================================================================= */
/* NAGLÓWEK LISTY PRODUKTÓW JAKO ZAKLADKA */

#js-product-list-header {
    background-color: #000000 !important; /* Czarne tlo zakladki */
    color: #ff8c00 !important;           /* Pomaranczowa czcionka */
    border: 3px solid #ff0000 !important; /* Czerwona ramka */
    padding: 15px 25px !important;       /* Odstep napisu od krawedzi */
    text-transform: uppercase !important; /* Wielkie litery */
    font-weight: 900 !important;          /* Gruba czcionka */
    letter-spacing: 2px !important;      /* Rozstrzelenie liter dla stylu gamingowego */
    display: block !important;
    width: 100% !important;
    border-radius: 8px !important;       /* Lekkie zaokraglenie pasujace do reszty */
    margin-bottom: 20px !important;
    
    /* Efekt delikatnej poswiaty dla napisu */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Fix dla responsywnosci na mniejszych ekranach */
@media (max-width: 767px) {
    #js-product-list-header {
        font-size: 1.2rem !important;
        padding: 10px 15px !important;
        text-align: center !important;
    }
}
/* ================================================================= */
/* KOMPLEKSOWE UPORZADKOWANIE PRAWEGO PANELU */

/* 1. Reset i mniejsza czcionka dla linii czastkowych */
.cart-summary .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 6px 15px !important; /* Oddech od krawedzi ramki */
    margin: 0 !important;
    float: none !important;
}

.cart-summary .cart-summary-line .label,
.cart-summary .cart-summary-line .value {
    font-size: 0.85rem !important; /* Mniejsza czcionka zgodnie z prosba */
    white-space: nowrap !important;
    float: none !important;
}

/* 2. Naprawa nakladania sie tekstu w rabatach i wysylce */
#cart-subtotal-products, 
#cart-subtotal-discount, 
#cart-subtotal-shipping {
    border-bottom: 1px solid #f2f2f2;
}

/* 3. Sekcja RAZEM (Suma) - zostawiamy wieksza i wyrazna */
.cart-summary-totals .cart-total {
    background-color: #000 !important;
    margin: 10px 0 0 0 !important;
    padding: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
}

.cart-summary-totals .cart-total .label {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.cart-summary-totals .cart-total .value {
    color: #ff8c00 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
}

/* 4. Sekcja ofert pod spodem - czytelna lista */
.promo-discounts .cart-summary-line {
    border: none !important;
    padding: 3px 15px !important;
}

.promo-discounts .label {
    font-size: 0.75rem !important;
    color: #666 !important;
}

/* 5. Przycisk realizacji - pelna szerokosc i oddech */
.cart-detailed-actions {
    padding: 15px !important;
}

.cart-detailed-actions .btn-primary {
    width: 100% !important;
    padding: 15px !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}
/*=======================================================*/
/* ROZCIAGNIECIE CALEGO BLOKU STRONY I FORMULARZA */

/* 1. Rozszerzenie glównego kontenera karty */
#content.page-content.card {
    width: 100% !important;
    max-width: 1200px !important; /* Mozesz zwiekszyc do 100%, jesli chcesz na cala szerokosc ekranu */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px !important; /* Wiecej oddechu wewnatrz */
}

/* 2. Usuniecie ograniczen Bootstrapa dla rzedów i kolumn w tym formularzu */
.renew-password .row.form-group {
    display: flex !important;
    justify-content: center !important; /* Centrowanie zawartosci */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. Drastyczne poszerzenie pól input i etykiet */
.renew-password .form-control-label {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    text-align: right !important;
    margin-left: 0 !important; /* Usuwamy offsety */
}

.renew-password .js-input-column,
.renew-password .col-md-4 {
    flex: 0 0 70% !important; /* Teraz pola zajmuja 70% szerokosci bloku */
    max-width: 70% !important;
    margin-left: 0 !important; /* Usuwamy offsety */
}

/* 4. Naprawa przycisku - centrowanie bez offsetów */
.renew-password .offset-md-5 {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    padding-top: 20px !important;
}

/* 5. Estetyka pól (wieksza wysokosc dla wygody) */
.renew-password input.form-control {
    font-size: 1.1rem !important;
    padding: 15px !important;
    border: 2px solid #000 !important;
}
/*=======================================================*/
/* KOLORYSTYKA GAMINGOWA: POMARANCZ I CZERWIEN */

/* 1. Glówne etykiety (Nowe haslo, Potwierdzenie) - POMARANCZOWE */
.renew-password .form-control-label {
    color: #ff8c00 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 4px #000000 !important;
}

/* 2. Adres e-mail - CZERWONY (jako staly element) */
.renew-password .email {
    color: #ff0000 !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #ff0000;
    display: inline-block;
    padding-bottom: 5px;
}

/* 3. Wymagania pod haslem - CZERWONE */
.password-requirements p, 
.password-requirements span,
.password-strength-text,
.js-hint-password {
    color: #ff0000 !important;
    font-weight: 600 !important;
}

/* Ikony przy wymaganiach - POMARANCZOWE */
.password-requirements i.material-icons {
    color: #ff8c00 !important;
}

/* 4. Pola wejsciowe (Input) - Ciemne z czerwonym tekstem */
.renew-password input.form-control {
    background-color: #000000 !important;
    color: #ff0000 !important;           /* Tekst, który wpisujesz, bedzie czerwony */
    border: 2px solid #ff8c00 !important; /* Ramka pomaranczowa */
    caret-color: #ff8c00 !important;     /* Kursor migajacy na pomaranczowo */
}

/* 5. Przycisk - Pomaranczowy z czerwonym efektem po najechaniu */
.renew-password .btn-primary {
    background-color: #ff8c00 !important;
    color: #000000 !important;
    border: 2px solid #ff0000 !important;
    transition: 0.3s all !important;
}

.renew-password .btn-primary:hover {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ff0000 !important;
}

/* Tlo calego bloku z czerwona ramka */
#content.page-content.card {
    background-color: #000000 !important;
    border: 3px solid #ff0000 !important;
}
/*===========================*/
/* OSTATECZNE I DEFINITYWNE USUNIECIE BIALEGO DYMKA */

/* Ukrycie po klasach i relacjach */
.password-strength-feedback, 
.password-requirements, 
.password-strength-text,
.field-password-policy .mt-1,
div[class*="password-strength"],
.js-hint-password {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

/* Blokada dla dymka, który pojawia sie jako "popover" lub "tooltip" */
.popover, 
.tooltip,
[role="tooltip"] {
    display: none !important;
}

/* Jesli dymek jest generowany wewnatrz kolumny inputa */
.js-input-column div:not(.password-strength-feedback) + div {
    /* To ukrywa dodatkowe divy wstrzykiwane pod polem */
}
/*===========================*/
/* STYLIZACJA NAGLÓWKA "ZMIEN SWOJE HASLO" */

header.page-header h1 {
    color: #ff8c00 !important;           /* Twój pomarancz */
    text-transform: uppercase !important; /* Wielkie litery dla agresywnego stylu */
    font-weight: 900 !important;          /* Bardzo gruba czcionka */
    text-align: center !important;        /* Wycentrowanie nad formularzem */
    text-shadow: 2px 2px 5px #000000 !important; /* Cien pod napisem, by "odbil" od tla */
    letter-spacing: 2px !important;      /* Lekkie rozstrzelenie liter */
    margin-bottom: 30px !important;      /* Odstep od e-maila i pól */
    font-size: 1.8rem !important;        /* Solidny rozmiar */
}

/* Opcjonalnie: Czerwona linia pod naglówkiem dla podkreslenia klimatu */
header.page-header {
    border-bottom: 2px solid #ff0000 !important;
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
}
/*===========================*/
/* STYLIZACJA FORMULARZA LOGOWANIA */

/* 1. Rozszerzenie glównego bloku (Karty) */
.login-form, #content.page-content.card {
    background-color: #000000 !important;
    border: 3px solid #ff0000 !important;
    padding: 40px !important;
    color: #ff8c00 !important;
}

/* 2. Etykiety pól (E-mail, Haslo) - POMARANCZOWE */
.login-form .form-control-label {
    color: #ff8c00 !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
}

/* 3. Pola wpisywania (Inputy) - Ciemne z czerwonym tekstem */
.login-form input.form-control {
    background-color: #1a1a1a !important;
    color: #ff0000 !important;
    border: 2px solid #ff8c00 !important;
    padding: 12px !important;
    height: auto !important;
}

/* 4. Przycisk "Pokaz" przy hasle */
.login-form .input-group-btn .btn {
    background-color: #333 !important;
    color: #ff8c00 !important;
    border: 2px solid #ff8c00 !important;
    border-left: none !important;
}

/* 5. Linki (Zapomniane haslo, Brak konta) - CZERWONE */
.login-form .forgot-password a,
.no-account a {
    color: #ff0000 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}

.login-form .forgot-password a:hover,
.no-account a:hover {
    color: #ff8c00 !important;
    text-shadow: 0 0 5px #ff8c00;
}

/* 6. Przycisk ZALOGUJ SIE */
#submit-login {
    background-color: #ff8c00 !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 15px 50px !important;
    border: 2px solid #ff0000 !important;
    width: auto !important;
    min-width: 200px;
}

#submit-login:hover {
    background-color: #ff0000 !important;
    color: #fff !important;
    box-shadow: 0 0 15px #ff0000 !important;
}

/* 7. Rozszerzenie szerokosci pól na desktopie */
@media (min-width: 768px) {
    .login-form .col-md-6 {
        flex: 0 0 75% !important; /* Rozszerzenie pola do 75% szerokosci */
        max-width: 75% !important;
    }
    .login-form .col-md-3 {
        flex: 0 0 25% !important; /* Etykieta zajmuje 25% */
        max-width: 25% !important;
    }
}

/* Linia oddzielajaca (HR) */
.login-form hr, #content hr {
    border-top: 1px solid #ff0000 !important;
    opacity: 0.5;
}
/*================================*/

/* PIONOWY UKLAD PODSUMOWANIA KOSZYKA */

/* 1. Wymuszenie nowej linii dla kazdego elementu */
.cart-detailed-subtotals .cart-summary-line,
.cart-summary-totals .cart-summary-line,
.promo-name .cart-summary-line {
    display: flex !important;
    flex-direction: column !important; /* UKLAD PIONOWY */
    align-items: center !important; /* Wyrównanie do lewej */
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #444 !important; /* Linia oddzielajaca sekcje */
    float: none !important;
    clear: both !important;
}

/* 2. Stylizacja etykiety (np. "3 sztuki", "Wysylka") */
.cart-summary-line .label {
    color: #ff8c00 !important; /* Pomarancz */
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important; /* Odstep od ceny ponizej */
    display: block !important;
}

/* 3. Stylizacja wartosci (Cena) pod etykieta */
.cart-summary-line .value {
    color: #ff0000 !important; /* Czerwony dla kwot */
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    display: block !important;
    margin-left: 0 !important;
}

/* 4. Specyficzny styl dla sekcji RAZEM (Suma koncowa) */
.cart-summary-totals .cart-total {
    background: #000 !important;
    border: 2px solid #ff0000 !important;
    padding: 15px !important;
    margin-top: 10px !important;
    align-items: center !important; /* Tutaj mozemy zostawic wysrodkowane */
}

.cart-summary-totals .cart-total .label {
    color: #fff !important;
    font-size: 1rem !important;
    margin-bottom: 8px !important;
}

.cart-summary-totals .cart-total .value {
    color: #ff8c00 !important;
    font-size: 1.5rem !important;
}

/* 5. Poprawka dla ofert pod spodem */
.promo-discounts .cart-summary-line {
    background: rgba(255, 0, 0, 0.05) !important;
    padding: 10px !important;
    margin-bottom: 5px !important;
}
/*================================*/
/* PIONOWY UKLAD LISTY OFERT RABATOWYCH */

/* 1. Ustawienie listy glównej */
ul.promo-discounts {
    display: block !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    background: #000 !important; /* Czarne tlo dla listy */
    border: 1px solid #ff0000 !important; /* Czerwona ramka */
}

/* 2. Kazdy element listy jako osobny blok */
ul.promo-discounts li.cart-summary-line {
    display: block !important; /* Wymuszenie nowej linii */
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed #444 !important; /* Przerywana linia miedzy ofertami */
}

/* 3. Usuniecie ostatniej linii oddzielajacej */
ul.promo-discounts li.cart-summary-line:last-child {
    border-bottom: none !important;
}

/* 4. Kolorystyka tekstów ofert */
ul.promo-discounts .label {
    display: block !important;
    color: #ff8c00 !important; /* Pomaranczowy dla tresci promocji */
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    white-space: normal !important; /* Pozwala na zawijanie tekstu, jesli jest za dlugi */
}

/* 5. Wyróznienie kodu (jesli sie pojawi) */
ul.promo-discounts .code {
    color: #ff0000 !important; /* Czerwony dla kodu */
    font-weight: bold !important;
}
/* CALKOWITE USUNIECIE BLOKU OFERT RABATOWYCH */
.promo-discounts, 
.promo-highlighted, 
.js-discount.promo-discounts {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/*================================*/
/* STALE ROZWINIECIE LISTY PRODUKTÓW W PODSUMOWANIU */

/* 1. Wymuszenie widocznosci listy i usuniecie animacji zwijania */
#cart-summary-product-list.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Ukrycie przycisku "pokaz szczególy" i licznika sztuk nad nim */
.cart-summary-products p,
.js-show-details {
    display: none !important;
}

/* 3. Stylizacja listy produktów (tlo i ramka) */
.cart-summary-products {
    background: #000000 !important;
    border: 1px solid #ff0000 !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}

/* 4. Nazwy produktów i ceny na liscie */
.cart-summary-products .product-name,
.cart-summary-products .product-name a {
    color: #ff8c00 !important; /* Pomaranczowy */
    font-size: 0.85rem !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.cart-summary-products .product-quantity {
    color: #fff !important; /* Bialy dla ilosci (np. x1) */
    font-weight: 900;
}

.cart-summary-products .product-price {
    color: #ff0000 !important; /* Czerwony dla ceny */
    font-weight: bold !important;
}

/* 5. Obrazki produktów na liscie - dodanie ramki */
.cart-summary-products .media-left img {
    border: 1px solid #ff8c00 !important;
    background: #1a1a1a !important;
}

/* 6. Usuniecie "Skorzystaj z naszych ofert" - zgodnie z Twoja poprzednia prosba */
.promo-discounts, .promo-highlighted {
    display: none !important;
}
/* ZMIANA KOLEJNOSCI: PRODUKTY NAD PODSUMOWANIEM */

/* 1. Ustawienie glównego kontenera jako Flexbox w pionie */
.card-block {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Produkty na sama góre */
.cart-summary-products {
    order: 1 !important;
    display: block !important;
    background: #000000 !important;
    border: 1px solid #ff0000 !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

/* 3. Podsumowanie (produkty, rabat, wysylka) pod lista produktów */
.cart-summary-subtotals-container {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important; /* Wszystko jedno pod drugim */
}

/* 4. Wymuszenie rozwiniecia listy produktów (bez klikania) */
#cart-summary-product-list.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 5. Ukrycie zbednych przycisków rozwijania */
.cart-summary-products p, 
.js-show-details {
    display: none !important;
}

/* 6. Stylizacja linii podsumowania (Etykieta nad Cena) */
.cart-summary-line.cart-summary-subtotals {
    display: flex !important;
    flex-direction: column !important; /* Napis nad kwota */
    align-items: flex-start !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #333 !important;
}

.cart-summary-line .label {
    color: #ff8c00 !important; /* Pomarancz */
    font-size: 0.8rem !important;
    text-transform: uppercase;
}

.cart-summary-line .value {
    color: #ff0000 !important; /* Czerwien */
    font-size: 1.1rem !important;
    font-weight: bold !important;
}
/* WYMUSZENIE OSTRYCH ROGÓW - BLOK PRODUKTÓW */

div.cart-summary-products.js-cart-summary-products, 
div.cart-summary-products.js-cart-summary-products * {
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    box-shadow: none !important; /* Usuwa cien, który moze zaokraglac optycznie */
}

/* Dodatkowo dla samej listy produktów wewnatrz */
#cart-summary-product-list, 
#cart-summary-product-list ul, 
#cart-summary-product-list li {
    border-radius: 0 !important;
}
/*================================*/
/* WYSRODKOWANIE ELEMENTÓW PODSUMOWANIA */

.cart-summary-subtotals-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Srodkuje bloki w poziomie */
    text-align: center !important;  /* Srodkuje tekst wewnatrz bloków */
    width: 100% !important;
}

.cart-summary-line.cart-summary-subtotals {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Srodkuje etykiete i cene wzgledem siebie */
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cart-summary-line.cart-summary-subtotals .label,
.cart-summary-line.cart-summary-subtotals .value {
    width: 100% !important;
    text-align: center !important; /* Wymuszenie srodka dla tekstu */
}
/*================================*/
/* POTWIERDZENIE ZAMÓWIENIA - JASNE TLO, CZARNE CZCIONKI */

/* 1. Glówny kontener sekcji - powrót do bieli */
#order-items {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 20px !important;
    border: 1px solid #eeeeee !important; /* Bardzo jasna, niemal niewidoczna ramka dla struktury */
    border-radius: 0 !important;
}

/* 2. Naglówki kolumn */
#order-items h3.card-title {
    color: #ff8c00 !important; /* Pozostawiamy pomaranczowy dla kluczowych naglówków */
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-bottom: 2px solid #333333 !important; /* Wyrazna czarna linia pod naglówkami */
    padding-bottom: 10px !important;
}

/* 3. Linie produktów */
.order-line {
    border-bottom: 1px solid #eeeeee !important;
    padding: 15px 0 !important;
    align-items: center !important;
}

.order-line .details a {
    color: #000000 !important; /* Nazwa produktu teraz czarna */
    text-decoration: none !important;
    font-weight: bold !important;
}

.order-line .qty .col-xs-4 {
    color: #333333 !important; /* Ceny i ilosci ciemnoszare/czarne */
    font-weight: bold !important;
}

/* 4. Obrazki produktów */
.order-line .image img {
    border: 1px solid #dddddd !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

/* 5. Tabela podsumowania na dole */
#order-items table {
    width: 100% !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

#order-items table td {
    padding: 12px 10px !important;
    border-top: 1px solid #eeeeee !important;
}

/* Etykiety: Produkty, Wysylka... */
#order-items table td:first-child {
    color: #555555 !important; /* Ciemnoszary dla etykiet bocznych */
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Wartosci pieniezne w tabeli */
#order-items table td:last-child {
    color: #000000 !important;
    text-align: right !important;
    font-weight: bold;
}

/* Sekcja RAZEM (Total) */
#order-items table tr.total-value {
    background: #f9f9f9 !important; /* Bardzo jasne szare tlo dla wyróznienia sumy */
}

#order-items table tr.total-value td {
    border-top: 2px solid #ff8c00 !important; /* Pomaranczowy akcent nad suma */
}

#order-items table tr.total-value td:first-child {
    color: #000000 !important;
    font-weight: bold;
}

#order-items table tr.total-value td:last-child {
    color: #ff8c00 !important; /* Suma koncowa pozostaje pomaranczowa dla kontrastu */
    font-size: 1.3rem !important;
    font-weight: 900 !important;
}

/* Ukrycie zbednych linii hr */
#order-items hr {
    display: none !important;
}

/*=============================*/
/* ZMNIEJSZENIE NAGLÓWKÓW W POTWIERDZENIU O 40% */

#order-items .row h3.card-title {
    font-size: 0.6rem !important; /* Zmniejszenie z domyslnego ok. 1rem/0.9rem */
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Zapobiega lamaniu tekstu przy malej czcionce */
}

/* Specyficzne poprawki dla poszczególnych kolumn naglówka */
#order-items ._desktop-title {
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    color: #555555 !important; /* Przygaszony kolor, zeby nie przytlaczaly produktów */
}
/* ZMIANA SZEROKOSCI KOLUMN W NAGLÓWKU POTWIERDZENIA */

/* 1. Zwezenie pierwszej kolumny (Zamówione produkty) */
#order-items .row h3.col-md-6 {
    flex: 0 0 25% !important; /* Zmniejszenie z 50-60% na 40% */
    max-width: 25% !important;
}

/* 2. Rozciagniecie pozostalych trzech kolumn */
#order-items .row h3.col-md-2 {
    flex: 0 0 30% !important; /* Zwiekszenie z ok. 16% na 20% kazda */
    max-width: 30% !important;
    text-align: center !important;
}

/* 3. Dopasowanie wierszy z produktami do nowego ukladu naglówka */
#order-items .order-line .col-sm-4.details {
    flex: 0 0 35% !important; /* Dopasowanie nazwy produktu */
    max-width: 35% !important;
}

#order-items .order-line .col-sm-6.qty {
    flex: 0 0 55% !important; /* Rozciagniecie sekcji z cenami i iloscia */
    max-width: 55% !important;
}

/* 4. Wyrównanie samych wartosci wewnatrz rozciagnietych kolumn */
#order-items .order-line .qty .row .col-xs-4 {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    text-align: center !important;
}
/* ROZCIAGNIECIE I WYSRODKOWANIE NAGLÓWKÓW */

/* 1. Kontener naglówków - zapewnienie pelnej szerokosci */
#order-items .row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}

/* 2. Pierwsza kolumna - zostaje waska (ok. 30%) */
#order-items .row h3.col-md-6 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    text-align: left !important;
}

/* 3. Pozostale 3 kolumny - rozciagamy je (kazda po ok. 23.3%) */
#order-items .row h3.col-md-2 {
    flex: 1 !important; /* Pozwala kolumnom rosnac i wypelniac luke */
    max-width: none !important;
    text-align: center !important; /* Wycentrowanie napisu w rozciagnietym polu */
    display: flex !important;
    justify-content: center !important;
}

/* 4. Poprawka dla samych danych pod spodem, zeby trzymaly sie srodka rozszerzonych kolumn */
.order-line .qty .row .col-xs-4 {
    flex: 1 !important;
    text-align: center !important;
}

/* 5. Usuniecie zbednych marginesów, które moga przesuwac tabele */
.order-confirmation-table {
    width: 100% !important;
    margin: 0 auto !important;
}
/*=============================*/
/* ZMIANA KOLORU TEKSTU ADRESÓW NA CZARNY */

.card-block {
    color: #000000 !important; /* Caly tekst wewnatrz bloku na czarno */
}

.addresshead {
    color: #000000 !important; /* Naglówki "Twój adres..." na czarno */
    font-weight: bold !important; /* Dodatkowe pogrubienie dla czytelnosci */
    margin-bottom: 10px !important;
}

/* Jesli same dane teleadresowe (tekst bez tagów) nadal bylyby jasne */
.card-block br + text, 
.card-block {
    font-weight: 500;
}
/*=============================*/
/* POPRAWA SEKCJI: SPOSÓB DOSTAWY */

/* 1. Naglówek sekcji "Sposób dostawy" */
#order-summary-content .h4, 
.step-to-delivery {
    color: #000000 !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 1.1rem;
}

/* Przycisk "edytuj" */
.js-edit-delivery {
    color: #ff8c00 !important; /* Pomaranczowy akcent dla akcji */
    font-size: 0.8rem !important;
    cursor: pointer;
}

/* 2. Kontener wybranego przewoznika */
.summary-selected-carrier {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 15px !important;
    border: 1px solid #eeeeee !important;
    border-radius: 0 !important; /* Ostre rogi */
    margin-top: 10px;
}

/* 3. Szczególy dostawy (Nazwa, Czas, Cena) */
.carrier-name, 
.carrier-delay, 
.carrier-price {
    color: #000000 !important;
    font-weight: 600 !important;
    display: block;
}

/* Cena wyrózniona na czarno/szaro */
.carrier-price {
    text-align: right;
    font-weight: bold !important;
}

/* 4. Logo przewoznika - usuniecie tla/zaokraglen */
.logo-container {
    background: #ffffff !important;
    border-radius: 0 !important;
}

.logo-container img {
    max-width: 80px;
    height: auto;
    border-radius: 0 !important;
}

/* 5. Wyrównanie wiersza dostawy */
.summary-selected-carrier .row {
    align-items: center !important;
    display: flex !important;
}
/*==================================*/
/* NOWOCZESNE WYRÓZNIENIE REGULAMINU - LIGHT & CLEAN */

#conditions-to-approve label {
    color: #ff9d00 !important; /* Jasniejszy, neonowy pomarancz */
    font-weight: 600 !important; /* Lzejsza czcionka (zamiast 900) */
    font-size: 0.95rem !important; /* Nieco mniejsza, by nie przytlaczala */
    letter-spacing: 0.5px;
    text-shadow: none !important; /* Usuwamy ciezkie cienie */
    -webkit-text-stroke: 0 !important; /* Usuwamy obwódke */
}

/* Link do regulaminu - podkreslenie zamiast obwódki */
#conditions-to-approve label a {
    color: #ff9d00 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    transition: color 0.3s ease;
}

#conditions-to-approve label a:hover {
    color: #000000 !important; /* Zmiana na czarny po najechaniu */
}

/* Stylizacja Checkboxa - ostry, czarny, techniczny */
.custom-checkbox input[type="checkbox"] + span {
    border: 2px solid #ff9d00 !important; /* Pomaranczowa ramka checkboxa */
    border-radius: 0 !important;
    background: #ffffff !important;
    width: 18px;
    height: 18px;
}

.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #000000 !important; /* Czarny ptaszek na pomaranczowym tle */
}

/* Delikatne tlo pod calym wierszem regulaminu dla wyróznienia */
#conditions-to-approve li {
    background: #fff9f0 !important; /* Bardzo delikatny pomaranczowy nalot */
    padding: 10px !important;
    border-left: 3px solid #ff9d00 !important; /* Pionowy pasek z boku */
    margin-bottom: 10px;
}
/*============================================*/
/* FORMULARZ REJESTRACJI - DARK & SHARP STYLE */

/* 1. Tlo glównego bloku i usuniecie zaokraglen */
#content.page-content.card.card-block {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 0 !important;
}

/* 2. Tekst i linki w naglówku */
.register-form p, 
.register-form {
    color: #ffffff !important;
}

.register-form a {
    color: #ff8c00 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* 3. Etykiety pól (Imie, Nazwisko, E-mail...) */
.form-control-label {
    color: #ff8c00 !important; /* Pomaranczowe naglówki pól */
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: bold;
}

/* 4. Pola wprowadzania (Inputy) */
.form-control {
    background-color: #1a1a1a !important; /* Ciemnoszare tlo inputa */
    border: 1px solid #444444 !important;
    color: #ffffff !important;
    border-radius: 0 !important; /* Ostre rogi */
}

.form-control:focus {
    border-color: #ff8c00 !important; /* Pomaranczowa ramka przy kliknieciu */
    outline: none;
}

/* 5. Checkboxy i Radio buttony */
.custom-checkbox input[type="checkbox"] + span,
.custom-radio span {
    border: 1px solid #ff8c00 !important;
    border-radius: 0 !important; /* Ostre rogi dla wszystkiego */
    background-color: #1a1a1a !important;
}

.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #ff8c00 !important;
}

/* 6. Pasek sily hasla */
.progress {
    background-color: #333333 !important;
    border-radius: 0 !important;
    height: 10px !important;
}

.progress-bar {
    background-color: #ff8c00 !important; /* Pomaranczowy postep */
}

.password-requirements, .form-control-comment {
    color: #999999 !important;
    font-size: 0.75rem;
}

/* 7. Przycisk Zapisz */
.form-footer .btn-primary {
    background-color: #ff8c00 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 10px 30px !important;
    transition: background 0.3s;
}

.form-footer .btn-primary:hover {
    background-color: #e67e00 !important;
}

/* Przycisk "Pokaz" haslo */
[data-action="show-password"] {
    background: #333333 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: 1px solid #444444 !important;
}
/* WYMUSZENIE BIALEGO KOLORU DLA WSZYSTKICH SZARYCH CZCIONEK */

/* Opisy pod polami (np. "Tylko litery...") */
.form-control-comment, 
.form-control-comment span,
#customer-form span.form-control-comment {
    color: #ffffff !important;
    opacity: 0.9 !important; /* Lekka przezroczystosc, by nie przytlaczaly, ale byly biale */
}

/* Teksty przy checkboxach i radio buttonach (np. "Pan/Pani", "Zapisz sie...") */
.radio-inline, 
.custom-checkbox label, 
.condition-label label,
#customer-form label {
    color: #ffffff !important;
}

/* Maly druk (tekst kursywa pod newsletterem/prywatnoscia) */
.custom-checkbox label em {
    color: #ffffff !important;
    font-style: italic;
    opacity: 0.8;
}

/* Teksty w wymaganiach hasla */
.password-requirements p,
.password-requirements p span,
.password-strength-text {
    color: #ffffff !important;
}

/* Ikony material-icons (np. ptaszki przy haslach) */
.password-requirements i.material-icons {
    color: #ff8c00 !important; /* Ikony zostawmy pomaranczowe dla kontrastu */
}
/* WYBIELANIE TEKSTÓW PRZY CHECKBOXACH (RODO, NEWSLETTER) */

/* Uderzamy bezposrednio w tekst wewnatrz labela przy checkboxie */
.custom-checkbox label {
    color: #ffffff !important;
    line-height: 1.5;
}

/* Uderzamy w tekst pisany kursywa (to co jest w <em>) */
.custom-checkbox label em {
    color: #ffffff !important;
    font-style: italic !important;
    opacity: 1 !important; /* Usuwamy ewentualne wyszarzenie przez opacity */
}

/* Na wypadek gdyby przegladarka nakladala wlasny kolor na linki wewnatrz tych tekstów */
.custom-checkbox label a {
    color: #ff8c00 !important; 
    text-decoration: underline;
}

/* Wyrównanie ikony checkboxa, zeby nie "plywala" przy dlugim bialym tekscie */
.custom-checkbox input[type="checkbox"] + span {
    margin-top: 3px;
}
/*================================*/
/* ZMIANA CZCIONEK NA CZARNE W EDYCJI DANYCH OSOBISTYCH */

/* 1. Glówne etykiety (Imie, Nazwisko, E-mail, Haslo) */
#customer-form .form-control-label {
    color: #000000 !important;
    font-weight: bold !important;
}

/* 2. Teksty przy checkboxach (RODO, Newsletter, Prywatnosc) */
#customer-form .custom-checkbox label,
#customer-form .custom-checkbox label em,
#customer-form .radio-inline {
    color: #000000 !important;
    font-style: normal; /* Mozesz usunac, jesli chcesz zostawic kursywe */
}

/* 3. Komentarze i podpowiedzi (np. "Tylko litery...", "Opcjonalne") */
#customer-form .form-control-comment,
#customer-form .form-control-comment span {
    color: #333333 !important; /* Ciemnoszary/czarny dla lepszej czytelnosci podpowiedzi */
}

/* 4. Sekcja wymagan hasla */
#customer-form .password-requirements,
#customer-form .password-requirements p,
#customer-form .password-requirements p span,
#customer-form .password-strength-text {
    color: #000000 !important;
}

/* 5. Ikony obok wymagan (jesli nie sa zielone/sukcesu) */
#customer-form .password-requirements i.material-icons:not(.text-success) {
    color: #000000 !important;
}

/* 6. Inputy (Pola do wpisywania) - biale tlo, czarny tekst */
#customer-form .form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
}
/*===================================*/
/* UKRYWANIE LINKU DO KOMENTARZY BLOGA W MENU KONTA */
#author-blog-comment-link, 
li:has(> #author-blog-comment-link) {
    display: none !important;
}
/*=========================================*/
/* STYLIZACJA LISTY BLOGA NA CIEMNYM TLE */

/* 1. Kontener glówny i ramki postów */
.ets-blog-list li {
    background-color: #111111 !important; /* Bardzo ciemnoszary dla lekkiego odciecia od czarnego tla */
    border: 1px solid #333333 !important;
    margin-bottom: 30px;
    padding: 0 !important;
    border-radius: 0 !important; /* Ostre rogi */
}

/* 2. Tytuly wpisów */
.ets_title_block {
    color: #ff8c00 !important; /* Pomaranczowy tytul */
    font-size: 1.4rem !important;
    font-weight: bold !important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    text-decoration: none !important;
}

.ets_title_block:hover {
    color: #ffffff !important; /* Bialy po najechaniu */
}

/* 3. Opisy (paragrafy) */
.blog_description, .blog_description p {
    color: #ffffff !important; /* Czysty bialy tekst */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 4. Metadane (Posted in, Kategorie) */
.be-label, .ets-blog-categories {
    color: #999999 !important; /* Delikatny szary dla mniejszych info */
}

.ets-blog-categories a {
    color: #ff8c00 !important;
    font-weight: bold;
}

/* 5. Przycisk "Dalej" (Read More) */
.read_more {
    display: inline-block !important;
    background-color: #ff8c00 !important;
    color: #000000 !important;
    padding: 8px 25px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    border-radius: 0 !important; /* Ostre rogi */
    margin-top: 15px;
    transition: 0.3s ease;
}

.read_more:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* 6. Obrazki - usuniecie ewentualnych zaokraglen i dodanie ramki */
.ets_item_img img {
    border-radius: 0 !important;
    border-bottom: 2px solid #ff8c00; /* Pomaranczowy akcent pod zdjeciem */
}

/* 7. Paginacja na dole */
.blog-paggination {
    border-top: 1px solid #333333;
    padding-top: 20px;
    color: #ffffff !important;
}
/*=========================================*/
/* WYRÓWNANIE KAFFELKÓW BLOGA I OBRAZKÓW */

/* 1. Wymuszenie równej wysokosci wszystkich kafelków w rzedzie */
.ets-blog-list.blog-main-page {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch; /* Rozciaga kafelki do wysokosci najwyzszego */
}

.ets-blog-list.blog-main-page li {
    display: flex;
    flex-direction: column;
    height: auto;
}

.post-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* Wypelnia cala dostepna wysokosc kafelka */
    background: #111111 !important;
    border: 1px solid #333333 !important;
}

/* 2. Standaryzacja obrazków - tworzymy sztywny "box" na zdjecie */
.ets_item_img {
    display: block;
    width: 100%;
    height: 220px; /* Sztywna wysokosc dla wszystkich zdjec */
    overflow: hidden; /* Przycina to, co wystaje */
    position: relative;
}

.ets_item_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Kluczowe: wypelnia box bez deformacji (kadruje srodek) */
    object-position: center;
    border-bottom: 2px solid #ff8c00 !important;
}

/* 3. Wyrównanie tresci pod obrazkiem */
.ets-blog-wrapper-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px !important;
}

.ets-blog-wrapper-content-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Wypchniecie przycisku "Dalej" zawsze na sam dól */
.read_more {
    margin-top: auto !important; 
    align-self: flex-start; /* Przycisk nie bedzie na cala szerokosc, chyba ze chcesz */
}

/* 4. Poprawka dla tytulów, zeby nie nachodzily na siebie przy róznych dlugosciach */
.ets_title_block {
    min-height: 3em; /* Rezerwuje miejsce na 2 linie tekstu */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* WYRÓWNANIE KAFFELKÓW BLOGA I OBRAZKÓW */

/* 1. Wymuszenie równej wysokosci wszystkich kafelków w rzedzie */
.ets-blog-list.blog-main-page {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch; /* Rozciaga kafelki do wysokosci najwyzszego */
}

.ets-blog-list.blog-main-page li {
    display: flex;
    flex-direction: column;
    height: auto;
}

.post-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* Wypelnia cala dostepna wysokosc kafelka */
    background: #111111 !important;
    border: 1px solid #333333 !important;
}

/* 2. Standaryzacja obrazków - tworzymy sztywny "box" na zdjecie */
.ets_item_img {
    display: block;
    width: 100%;
    height: 220px; /* Sztywna wysokosc dla wszystkich zdjec */
    overflow: hidden; /* Przycina to, co wystaje */
    position: relative;
}

.ets_item_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Kluczowe: wypelnia box bez deformacji (kadruje srodek) */
    object-position: center;
    border-bottom: 2px solid #ff8c00 !important;
}

/* 3. Wyrównanie tresci pod obrazkiem */
.ets-blog-wrapper-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px !important;
}

.ets-blog-wrapper-content-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Wypchniecie przycisku "Dalej" zawsze na sam dól */
.read_more {
    margin-top: auto !important; 
    align-self: flex-start; /* Przycisk nie bedzie na cala szerokosc, chyba ze chcesz */
}

/* 4. Poprawka dla tytulów, zeby nie nachodzily na siebie przy róznych dlugosciach */
.ets_title_block {
    min-height: 3em; /* Rezerwuje miejsce na 2 linie tekstu */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*------------------------------------*/
/* POPRAWKA KARUZELI BLOGA - BIALE TLO, CZARNE TEKSTY */

/* 1. Ustawienie bialego tla i równej wysokosci */
.owl-item .post-wrapper, 
.owl-item li,
.ets-blog-latest-post-content {
    background-color: #ffffff !important; /* Tlo zostaje biale */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border: 1px solid #e5e5e5 !important;
}

/* 2. Naprawa widocznosci tekstów (Czarne na bialym) */
.ets-blog-latest-post-content .ets_title_block {
    color: #333333 !important; /* Ciemny tytul */
    font-size: 1rem !important;
    font-weight: bold !important;
    min-height: 2.6em !important;
    display: block !important;
    text-decoration: none !important;
}

.ets-blog-latest-post-content .blog_description, 
.ets-blog-latest-post-content .blog_description p,
.ets-blog-sidear-post-meta .post-date {
    color: #555555 !important; /* Ciemnoszary tekst i data */
    font-size: 0.85rem !important;
}

/* 3. Standaryzacja obrazków w sliderze */
.owl-item .ets_item_img {
    display: block !important;
    width: 100% !important;
    height: 160px !important; /* Sztywna wysokosc zdjecia */
    overflow: hidden !important;
}

.owl-item .ets_item_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Kadrowanie bez rozciagania */
}

/* 4. Przycisk "Dalej" i wyrównanie do dolu */
.owl-item .read_more {
    margin-top: auto !important; /* Zawsze na dole boxa */
    margin-bottom: 5px !important;
    background: #ff8c00 !important; /* Twój pomaranczowy */
    color: #fff !important;
    padding: 5px 15px !important;
    display: inline-block !important;
    width: fit-content !important;
}

/* Usuniecie marginesów, które mogly rozwalac uklad */
.owl-item li {
    padding: 0 !important;
    margin: 0 !important;
}
/*----------------------------------*/
/* POPRAWKA DLA TYTULÓW W KARUZELI */

/* 1. Ustawienie koloru na czarny i wyrównanie */
.owl-item .ets_title_block {
    color: #000000 !important; /* Czarny kolor czcionki */
    font-size: 0.7rem !important; /* Rozmiar dopasowany do mniejszych boxów */
    font-weight: bold !important;
    text-transform: uppercase;
    display: block !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    
    /* 2. Wyrównanie wysokosci (zeby boxy byly równe) */
    min-height: 2.4em !important; 
    overflow: hidden;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

/* 3. Kolor po najechaniu myszka (opcjonalnie na Twój pomarancz) */
.owl-item .ets_title_block:hover {
    color: #ff8c00 !important;
}

/* 4. Upewnienie sie, ze kontener tresci ma biale tlo */
.ets-blog-latest-post-content {
    background-color: #ffffff !important;
    padding: 10px 15px !important;
}
/* FINALNA POPRAWKA TYTULU I BRAK ZAOKRAGLEN */

.owl-item .ets_title_block {
    color: #000000 !important;
    font-size: 0.9rem !important; /* Mniejsza, bardziej zwarta czcionka */
    font-weight: 700 !important;
    text-transform: uppercase;
    display: block !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    
    /* Usuniecie zaokraglen i nakladania sie */
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 10px 0 5px 0 !important;
    
    /* Blokada rozjezdzania sie */
    min-height: 2.2em !important;
    max-height: 2.4em !important;
    overflow: hidden !important;
}

/* Usuniecie zaokraglen z calego kafelka i obrazka w sliderze */
.owl-item .post-wrapper, 
.owl-item li,
.owl-item .ets_item_img,
.owl-item .ets_item_img img,
.owl-item .ets-blog-latest-post-content {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Naprawa kontenera tresci - czysty czarny tekst na bialym */
.owl-item .ets-blog-latest-post-content {
    background: #ffffff !important;
    padding: 12px !important;
    border: none !important; /* Usuwamy wewnetrzne ramki, jesli sa */
}
.ets_title_block {
    border-radius: 0 !important;
}
/*-----------------------------------*/
/* STYLIZACJA OPISU BLOGA - CZARNY TEKST NA BIALYM TLE */

/* 1. Glówny tekst wewnatrz opisu */
.blog_description, 
.blog_description p, 
.blog_description span {
    color: #232323 !important; /* Ciemnoszary/czarny dla czytelnosci */
    background-color: transparent !important; /* Usuwamy biale tlo z pojedynczych spanów */
    font-family: 'Manrope', sans-serif !important;
    line-height: 1.6 !important;
}

/* 2. Linki wewnatrz tekstu (np. e-mail) */
.blog_description a:not(.btn) {
    color: #ff8c00 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* 3. Przyciski REZERWACJA (klasa .btn-default) */
.blog_description .btn-default {
    background-color: #ff8c00 !important; /* Twój pomarancz */
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* Ostre rogi */
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    margin-left: 10px;
    display: inline-block;
    transition: 0.3s;
}

.blog_description .btn-default:hover {
    background-color: #000000 !important; /* Czarny hover */
    color: #ffffff !important;
}

/* 4. Obrazek (grafika z napisem 'oplaty za stól tutaj') */
.blog_description img {
    border-radius: 0 !important;
    max-width: 100%;
    height: auto;
    margin: 15px 0;
}
/*-------------------------------*/
/* DOSTOSOWANIE CZCIONEK NA CZARNYM TLE W SEKCJACH CONTENT */

/* 1. Tytul na pomaranczowo */
.ets-blog-wrapper-content .ets_title_block {
    color: #ff8c00 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: 0 !important;
}

/* 2. Etykieta "opublikowano" i kategorie */
.ets-blog-wrapper-content .be-label,
.ets-blog-wrapper-content .ets-blog-categories,
.ets-blog-wrapper-content .ets-blog-categories a {
    color: #cccccc !important; /* Jasnoszary */
    font-size: 0.85rem !important;
}

.ets-blog-wrapper-content .ets-blog-categories a:hover {
    color: #ff8c00 !important;
}

/* 3. Opis (paragrafy) na bialo */
.ets-blog-wrapper-content .blog_description p {
    color: #ffffff !important;
    font-size: 0.9rem !important;
}

/* 4. Przycisk "Dalej" - spójny z reszta */
.ets-blog-wrapper-content .read_more {
    background-color: #ff8c00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    padding: 6px 15px !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

.ets-blog-wrapper-content .read_more:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}
/* POPRAWKA NAGLÓWKA STRONY (AKTUALNOSCI) */
h1.page-heading.product-listing {
    color: #ffffff !important; /* Bialy tekst, zeby byl widoczny na ciemnym tle */
    text-transform: uppercase; /* Wielkie litery */
    font-weight: 800 !important;
    font-size: 2rem !important;
    border-left: 5px solid #ff8c00; /* Pomaranczowy pasek z boku */
    padding-left: 15px !important;
    margin-bottom: 30px !important;
    background: transparent !important; /* Upewniamy sie, ze nie ma bialego tla pod tekstem */
    border-radius: 0 !important; /* Brak zaokraglen */
}/* POPRAWKA NAGLÓWKA H2 (ALL CATEGORIES) */
h2.page-heading.product-listing {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    font-size: 1.6rem !important; /* Nieco mniejszy niz h1 */
    border-left: 5px solid #ff8c00;
    padding-left: 15px !important;
    margin-bottom: 25px !important;
    background: transparent !important;
    border-radius: 0 !important;
}
/*-----------------------------------*/
/* WYMUSZENIE CZARNEGO KOLORU DLA KONKRETNEGO TYTULU NA BIALYM TLE */

h1.page-heading.product-listing[itemprop="mainEntityOfPage"],
h1.page-heading.product-listing span.title_cat,
h1.page-heading.product-listing .title_cat {
    color: #000000 !important;
    background-color: transparent !important;
    display: inline-block !important;
}

/* Usuwamy pasek boczny i padding, jesli na tej podstronie tlo jest biale */
body#module-ets_blog-detail h1.page-heading.product-listing,
h1[itemprop="mainEntityOfPage"] {
    border-left: none !important;
    padding-left: 0 !important;
    background: #ffffff !important; /* Upewniamy sie, ze tlo pod napisem jest biale */
}
/*----------------------------*/
/* NAPRAWA TEKSTU W OPISIE POSTA - CZARNY NA BIALYM */

/* 1. Wymuszenie koloru dla wszystkich tekstów w opisie */
.ets-blog-wrapper-detail .blog_description,
.ets-blog-wrapper-detail .blog_description p,
.ets-blog-wrapper-detail .blog_description span,
.ets-blog-wrapper-detail .blog_description div {
    color: #000000 !important;
    background-color: transparent !important; /* Usuwa biale tlo pod literami ze spanów */
}

/* 2. Naprawa przycisków REZERWACJA, aby byly widoczne i kanciaste */
.blog_description a.btn.btn-default {
    background-color: #ff8c00 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 5px 15px !important;
    display: inline-block !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin: 5px 0 !important;
}

.blog_description a.btn.btn-default:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 3. Usuniecie zaokraglen z obrazka wewnatrz opisu */
.blog_description img {
    border-radius: 0 !important;
}
/* TOTALNY RESET KOLORÓW DLA TRESCI BLOGA */

/* 1. Wymuszenie czarnego tekstu w opisie i wszystkich jego elementach */
div.blog_description, 
div.blog_description p, 
div.blog_description span, 
div.blog_description strong {
    color: #000000 !important;
    background-color: transparent !important;
}

/* 2. Wymuszenie czarnego tytulu w naglówku strony */
h1.page-heading.product-listing,
h1.page-heading.product-listing span,
h1.page-heading.product-listing .title_cat {
    color: #000000 !important;
}

/* 3. Naprawa przycisków REZERWACJA - pomaranczowe tlo, bialy napis, ostre rogi */
.blog_description a.btn-default,
.blog_description a[class*="btn"] {
    background-color: #ff8c00 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    display: inline-block !important;
    padding: 8px 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Usuniecie wszelkich filtrów i tel, które moga zaslaniac tekst */
.ets-blog-wrapper-detail, .blog_description {
    background-color: #ffffff !important;
}
/************************************/
/* WYMUSZENIE BIALEGO TYTULU TYLKO W WIDOKU KATEGORII */
.blog-category h1.page-heading.product-listing {
    color: #ffffff !important;
    background: transparent !important;
}

/* Opcjonalnie: jesli tam tez jest ten boczny pasek, upewnijmy sie, ze jest kanciasty */
.blog-category h1.page-heading.product-listing {
    border-left: 5px solid #ff8c00 !important;
    border-radius: 0 !important;
    padding-left: 15px !important;
}
/*********************************/
/* NAPRAWA WIDOCZNOSCI TEKSTU W BRAMCE TPAY (BLIK) */
.tpay-wrapper.tpay-blik-wrapper {
    color: #000000 !important; /* Wymuszamy czarny tekst */
    background-color: #ffffff !important; /* Upewniamy sie, ze tlo jest biale, jesli bylo inaczej */
    padding: 15px !important;
    border-radius: 0 !important; /* Usuwamy zaokraglenia, zgodnie z Twoim stylem */
    font-weight: normal !important;
    line-height: 1.5 !important;
}

/* Na wypadek, gdyby tekst byl wewnatrz innych tagów w tym wrapperze */
.tpay-wrapper.tpay-blik-wrapper * {
    color: #000000 !important;
}
/* NAPRAWA WIDOCZNOSCI TEKSTU DLA WSZYSTKICH PLATNOSCI TPAY */

#pay-with-payment-option-5-form,
.tpay-wrapper,
.tpay-wrapper form,
.tpay-error {
    color: #000000 !important; /* Czarny tekst */
    background-color: transparent !important;
}

/* Specyficzne poprawki dla napisów wewnatrz formularza platnosci */
.js-payment-option-form, 
.tpay-wrapper .transferForm {
    color: #000000 !important;
    font-size: 14px !important;
    border-radius: 0 !important; /* Brak zaokraglen */
}

/* Komunikat o bledzie (np. nie wybranie banku) na czerwono, by byl czytelny */
.tpay-error {
    color: #d9534f !important; 
    font-weight: bold !important;
    display: block !important;
    margin-top: 10px !important;
}
/***********************************************************************************moblie*/
/* ABSOLUTNE WYMUSZENIE 1 PRODUKTU NA MOBILE I POWRÓT PRZYCISKÓW */

@media (max-width: 767px) {
    /* 1. Wymuszenie szerokosci na kazdym elemencie, który moze byc miniatura */
    #products .product-miniature, 
    .products .product-miniature, 
    .product-list .product-miniature,
    div[class*="col-mobile-"], 
    div[class*="col-xs-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        clear: both !important;
        display: block !important;
        margin-bottom: 30px !important;
    }

    /* 2. Przywrócenie widocznosci przycisków i opisów */
    .product-description, 
    .product-buttons, 
    .highlighted-informations,
    .add-to-cart-or-refresh {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* 3. Naprawa kontenera, który mógl ukrywac zawartosc */
    .thumbnail-container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
    }

    /* 4. Usuniecie wszelkich "plywajacych" elementów */
    .products.row {
        display: flex !important;
        flex-direction: column !important;
    }
}
/*****************************************/
/* WYRÓWNANIE BLOKÓW PRODUKTÓW I PRZYCISKÓW KUP */

/* 1. Ujednolicenie wysokosci kontenera opisu */
.product-description {
    min-height: 120px !important; /* Dostosuj te wartosc, jesli masz bardzo dlugie nazwy */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px !important;
}

/* 2. Wyrównanie nazwy produktu */
.product-title {
    height: 3em !important; /* Rezerwuje miejsce na dokladnie 2 linie tekstu */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 5px !important;
}

/* 3. Wymuszenie przycisku na samym dole */
.atc_div.add-to-cart-button {
    margin-top: auto !important;
    padding-top: 10px !important;
}

/* 4. Poprawka flag "NOWY" - ustawienie ich absolutnie, by nie spychaly zdjecia */
.product-flags {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.product-flag {
    border-radius: 0 !important; /* Twój styl bez zaokraglen */
    font-size: 10px !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
}

/* 5. Usuniecie bialych marginesów wewnatrz miniatury dla spójnosci */
.thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 0 !important;
}
/****************************************/
/* MODYFIKACJA WYLACZNIE SRODKA KAFELKA (OPIS I TYTUL) */

/* 1. Reset zaokraglen i masek dla samej sekcji opisu i tytulu */
.product-description, 
.product-description .product-title, 
.product-description .product-title a {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    /* Usuniecie maski, która zaokragla/rozmywa koncówki liter */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
}

/* 2. Tytul: Zmniejszenie czcionki o 10% i wyostrzenie krawedzi */
.h3.product-title, 
.h3.product-title a {
    font-size: 12.6px !important; /* Twoje zmniejszenie o 10% */
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    white-space: normal !important; /* Pozwala na zawijanie zamiast ucinania */
    display: block !important;
    text-align: center !important;
    /* Usuniecie efektu ellipsis (wielokropka), który bywa zaokraglony */
    text-overflow: clip !important; 
}

/* 3. Usuniecie "Szybkiego podgladu" (zgodnie z prosba o wyciecie) */
.quick-view, 
.js-quick-view, 
.highlighted-informations {
    display: none !important;
}

/* 4. Zapewnienie, ze blok opisu nie nachodzi na zdjecie */
.product-description {
    position: relative !important;
    background: #ffffff !important;
    padding: 10px 5px !important;
    z-index: 2 !important;
}

/*****************************************/
/* CALKOWITE WYCIECIE POLA KRÓTKIEGO OPISU Z KAFELKA */

div[id^="product-description-short-"], 
.product-description-short {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* UPEWNIENIE SIE, ZE TYTUL JEST OSTRY I BEZ ZAOKRAGLEN */
.product-description .h3.product-title, 
.product-description .product-title a {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    text-overflow: clip !important;
    font-size: 12.6px !important; /* Twoje -10% */
}
/**********************************/
/* STYLIZACJA NAGLÓWKA H1 (MARKA/KATEGORIA) */

h1, .h1 {
    color: #ff8c00 !important; /* Twój pomaranczowy kolor */
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    margin-bottom: 30px !important;
    
    /* Dodajemy lekki czarny obrys (cien), zeby napis "odcial sie" od tekstury tla */
    text-shadow: 2px 2px 0px #000000 !important;
    
    /* Reset zaokraglen (jesli szablon cos narzuca) */
    border-radius: 0 !important;
    
    /* Poprawa ostrosci */
    -webkit-font-smoothing: antialiased;
}

/* Opcjonalnie: biale podkreslenie pod tytulem w kanciastym stylu */
h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #ffffff;
    margin: 10px auto 0;
    border-radius: 0 !important; /* Bez zaokraglen */
}

/* ZMIANA KOLORU NAPISU OPCJONALNE NA CZARNY */

.form-control-comment,
div.col-md-3.form-control-comment {
    color: #000000 !important; /* Czysty czarny */
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important; /* Opcjonalnie: wielkie litery dla spójnosci stylu */
    border-radius: 0 !important; /* Brak zaokraglen kontenera */
    opacity: 1 !important; /* Upewniamy sie, ze nie jest poszarzale */
}
/* POPRAWA WIDOCZNOSCI SZCZEGÓLÓW ZAMÓWIENIA */

#order-details {
    background: rgba(0, 0, 0, 0.5) !important; /* Delikatne tlo dla lepszego kontrastu */
    padding: 20px !important;
    border: 1px solid #ff8c00 !important; /* Pomaranczowa, kanciasta ramka w naszym stylu */
    border-radius: 0 !important;
    color: #ffffff !important; /* Glówny tekst na bialo dla czytelnosci */
}

#order-details .card-title, 
#order-details h3 {
    color: #ff8c00 !important; /* Naglówek na pomaranczowo */
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-bottom: 2px solid #ff8c00 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

#order-details ul {
    list-style: none !important;
    padding-left: 0 !important;
}

#order-details ul li {
    padding: 5px 0 !important;
    font-size: 14px !important;
    color: #ffb366 !important; /* Jasniejszy pomarancz dla tresci listy */
}

#order-details ul li strong, 
#order-details ul li b {
    color: #ffffff !important;
}

#order-details em {
    color: #ffffff !important; /* Kursywa pod dostawa na bialo */
    font-style: italic !important;
    opacity: 0.8;
}
/* POPRAWA BLOKU POTWIERDZENIA PLATNOSCI TPAY */

#content-hook_payment_return.card, 
#content-hook_payment_return .card-block {
    background: rgba(0, 0, 0, 0.7) !important; /* Ciemne, pólprzezroczyste tlo */
    border: 1px solid #ff8c00 !important;   /* Pomaranczowa ramka */
    border-radius: 0 !important;            /* Bezwzgledny brak zaokraglen */
    box-shadow: none !important;
    color: #ffffff !important;               /* Bialy tekst bazowy */
}

/* Stylizacja naglówków H4 wewnatrz Tpay */
#tpay-success h4 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Stylizacja linków (zakupy, lista zamówien) */
#tpay-success a {
    color: #ff8c00 !important;              /* Pomaranczowe linki */
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

#tpay-success a:hover {
    color: #ffffff !important;               /* Bialy kolor po najechaniu */
    text-decoration: none !important;
}

/* Usuniecie marginesów z wierszy, jesli tworza biale paski */
#content-hook_payment_return .row {
    margin: 0 !important;
    border-radius: 0 !important;
}
/**********************************/
/* =========================================================
   STYLIZACJA STRONY SZCZEGÓLÓW ZAMÓWIENIA (PAGE-CONTENT)
   ========================================================= */

/* 1. GLÓWNE KONTENERY (BOX) - USUNIECIE BIELI I ZAOKRAGLEN */
#content.page-content .box,
#order-infos .box,
#order-history.box,
.addresses .box,
.order-message-form.box,
#order-products.table-bordered {
    background: rgba(0, 0, 0, 0.8) !important; /* Ciemne tlo */
    border: 1px solid #444 !important;      /* Delikatna ramka */
    border-radius: 0 !important;             /* Kanciaste rogi */
    color: #ffffff !important;               /* Bialy tekst */
    margin-bottom: 20px !important;
    padding: 20px !important;
}

/* 2. NAGLÓWKI (H3, H4, STRONG) */
#content.page-content h3, 
#content.page-content h4,
#order-infos strong,
.addresses h4 {
    color: #ff8c00 !important; /* Twój pomarancz */
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-bottom: 1px solid #ff8c00 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    display: block;
}

/* 3. TABELE (PRODUKTY I HISTORIA) */
.table, .table-striped, .table-bordered {
    background-color: transparent !important;
    color: #ffffff !important;
    border-collapse: collapse !important;
}

.table thead.thead-default th {
    background-color: #222 !important; /* Ciemne naglówki tabeli */
    color: #ff8c00 !important;
    border: 1px solid #444 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

.table td, .table th {
    border: 1px solid #333 !important;
    padding: 12px !important;
}

/* Usuniecie paska "zebra" (szarych co drugi rzad) */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 4. LINKI W TABELI (NAZWY PRODUKTÓW) */
#order-products a {
    color: #ff8c00 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

#order-products a:hover {
    color: #ffffff !important;
}

/* 5. PODSUMOWANIE (TFOOT) - CENY NA POMARANCZOWO */
#order-products tfoot tr {
    background: #111 !important;
    font-weight: bold !important;
}

#order-products tfoot tr.line-total {
    color: #ff8c00 !important;
    font-size: 1.2rem !important;
    border-top: 2px solid #ff8c00 !important;
}

/* 6. STATUSY (ETYKIETY) - POZOSTAWIAMY KOLORY SYSTEMOWE, ALE BEZ ZAOKRAGLEN */
.label.label-pill {
    border-radius: 0 !important;
    padding: 5px 10px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* 7. FORMULARZ WIADOMOSCI (TEXTAREA I SELECT) */
.order-message-form select,
.order-message-form textarea {
    background-color: #111 !important;
    border: 1px solid #ff8c00 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.order-message-form .form-control-label {
    color: #ffffff !important;
}

/* 8. PRZYCISK "WYSLIJ" */
.btn-primary.form-control-submit {
    background-color: #ff8c00 !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 10px 30px !important;
    transition: 0.3s;
}

.btn-primary.form-control-submit:hover {
    background-color: #ff3300 !important;
}

/* 9. WERSJA MOBILNA (HISTORY-LINES I SHIPPING-LINES) */
.history-line, .shipping-line, .order-item {
    background: #111 !important;
    border: 1px solid #333 !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
}
/************************/
/* =========================================================
   HISTORIA ZAMÓWIEN - STYLIZACJA TABELI I LISTY
   ========================================================= */

/* 1. TEKST WPROWADZAJACY (H6) */
#content.page-content h6 {
    color: #ffffff !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    opacity: 0.9;
}

/* 2. TABELA ZAMÓWIEN - WERSJA DESKTOP */
.table.table-labeled {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #444 !important;
    border-radius: 0 !important;
}

.table.table-labeled thead th {
    background-color: #222 !important;
    color: #ff8c00 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    border: 1px solid #444 !important;
    border-radius: 0 !important;
}

.table.table-labeled tbody td, 
.table.table-labeled tbody th {
    color: #ffffff !important;
    border: 1px solid #333 !important;
    vertical-align: middle !important;
}

/* Numer zamówienia w tabeli */
.table.table-labeled tbody th[scope="row"] {
    color: #ff8c00 !important;
    font-weight: bold !important;
}

/* 3. ETYKIETY STATUSÓW (LABEL-PILL) - RESET ROGÓW */
.label.label-pill {
    border-radius: 0 !important; /* Bezwzglednie usuwamy zaokraglenia */
    padding: 6px 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    display: inline-block !important;
}

/* 4. LINK "SZCZEGÓLY" */
.view-order-details-link {
    color: #ff8c00 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border: 1px solid #ff8c00 !important;
    padding: 5px 10px !important;
    transition: 0.3s;
}

.view-order-details-link:hover {
    background: #ff8c00 !important;
    color: #000 !important;
}

/* 5. WERSJA MOBILNA (KAFELKI ZAMÓWIEN) */
.orders .order {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #ff8c00 !important;
    border-radius: 0 !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    color: #ffffff !important;
}

.orders .order h3 {
    color: #ff8c00 !important;
    margin: 0 0 10px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.orders .order .date, 
.orders .order .total {
    margin-bottom: 5px !important;
    font-size: 14px !important;
}

.orders .order .total {
    font-weight: bold !important;
}

/* Ikona wyszukiwania (lupa) na mobile */
.orders .order i.material-icons {
    color: #ff8c00 !important;
    font-size: 30px !important;
}
/****************************************************/
/* UKRYCIE STAREGO NAPISU I WSTRZYKNIECIE NOWEJ NAZWY */
#content-order-confirmation .card-block p strong {
    font-size: 0 !important; /* Ukrywamy stary tekst */
}

#content-order-confirmation .card-block p strong::after {
    content: "MATISOFT GAMING CLUB"; /* Twoja nowa nazwa */
    font-size: 14px !important; /* Przywracamy czytelna wielkosc */
    color: #ff8c00 !important;   /* Nasz pomaranczowy */
    text-transform: uppercase;
}
/***********************************/
/* 1. USTAWIENIE KONTENERA FLAG NA ZDJECIU */
.product-flags {
    position: absolute !important;
    top: 10px !important;    /* Odstep od góry zdjecia */
    left: 0 !important;
    width: 100% !important;  /* Pelna szerokosc zdjecia */
    display: flex !important;
    justify-content: space-between !important; /* Rozrzuca flagi na boki */
    padding: 0 10px !important; /* Odstep od krawedzi bocznych */
    z-index: 3 !important;   /* Flagi zawsze na wierzchu */
    list-style: none !important;
    margin: 0 !important;
}

/* 2. STYLIZACJA DLA OBU FLAG (WSPÓLNA) */
.product-flags .product-flag {
    position: static !important; /* Wylacza domyslne pozycjonowanie */
    margin: 0 !important;
    padding: 5px 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    border-radius: 0 !important; /* Kanciaste rogi */
    border: 1px solid #ffffff !important; /* Biala obwódka dla kontrastu */
    box-shadow: 2px 2px 0px rgba(0,0,0,0.5) !important; /* Delikatny cien */
}

/* 3. KOLORYSTYKA FLAGI NOWY (LEWA SRODA) */
.product-flags .product-flag.new {
    background-color: #ff0000 !important; /* Czerwony */
    color: #ffffff !important;
}

/* 4. KOLORYSTYKA FLAGI PREORDER (PRAWA STRONA) */
.product-flags .product-flag.online-only {
    background-color: #00bcd4 !important; /* Turkusowy z Twojego obrazka */
    color: #ffffff !important;
    order: 2 !important; /* Upewnia sie, ze jest po prawej, jesli sa obie */
}
/***************************/
/* STYLIZACJA FLAGI PREORDER - GAMING STYLE */
.product-flags .product-flag.online-only {
    position: static !important;
    background: #00bcd4 !important; /* Turkusowy bazowy */
    color: #000000 !important;      /* Czarny tekst dla maksymalnego kontrastu */
    padding: 4px 15px !important;
    font-size: 13px !important;
    font-weight: 900 !important;    /* Bardzo gruby tekst */
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important; /* Rozstrzelone litery jak w grach */
    
    /* OSTRE CIECIA I RAMKI */
    border-radius: 0 !important;
    border-left: 4px solid #ffffff !important;  /* Bialy akcent z boku */
    border-right: 4px solid #ffffff !important; /* Bialy akcent z boku */
    
    /* EFEKT GLITCH / WARSTWY */
    box-shadow: 
        3px 3px 0px #000000,   /* Czarny gleboki cien */
        5px 5px 0px #ff8c00 !important; /* Pomaranczowy akcent pod spodem nawiazujacy do sklepu */
        
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* EFEKT PO NAJECHANIU NA PRODUKT */
.product-miniature:hover .product-flag.online-only {
    background: #ffffff !important;   /* Zmiana koloru na bialy */
    color: #00bcd4 !important;        /* Tekst turkusowy */
    box-shadow: 2px 2px 0px #000000 !important;
    transform: translate(-2px, -2px) !important;
}
/* NOWA STYLIZACJA FLAGI PREORDER - AGRESYWNY METAL STYLE */
.product-flags .product-flag.online-only {
    position: static !important;
    background: #222222 !important; /* Bardzo ciemny, grafitowy - jak metal */
    color: #ff0000 !important;      /* Jaskrawa, ostrzegawcza czerwien */
    padding: 6px 15px !important;
    font-size: 9px !important;     /* Nieco wiekszy, gruby tekst */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important; /* Mocno rozstrzelone litery */
    
    /* SUROWE KRAWEDZIE I RAMKA */
    border-radius: 0 !important;     /* Absolutnie brak zaokraglen */
    border: 3px solid #ff0000 !important; /* Gruba, czerwona ramka */
    
    /* EFEKT GLEBI I CIENIA */
    box-shadow: 4px 4px 0px #000000 !important; /* Twardy, czarny cien dajacy efekt 3D */
    
    display: inline-block !important;
    line-height: 1 !important;
    
    /* Dodatkowy efekt "niesmiertelnika" (opcjonalny) */
    text-shadow: 1px 1px 0px #000 !important;
}

/* EFEKT PO NAJECHANIU NA PRODUKT */
.product-miniature:hover .product-flag.online-only {
    background: #ff0000 !important;   /* Zamiana: tlo staje sie czerwone */
    color: #000000 !important;        /* Tekst staje sie czarny */
    box-shadow: 2px 2px 0px #000000 !important; /* Mniejszy cien przy "wcisnieciu" */
    transform: translate(2px, 2px) !important;   /* Efekt wcisniecia przycisku */
}
/* USUNIECIE IKONY PRZED NAPISEM PREORDER */
.product-flag.online-only i, 
.product-flag.online-only .material-icons,
.product-flag.online-only::before {
    display: none !important;
}

/* RESET MARGINESU (zeby napis nie byl przesuniety) */
.product-flag.online-only {
    padding-left: 15px !important; /* Wyrównaj lewy margines do prawego */
}
/*****************************/
/* ROZSZERZENIE I CENTROWANIE UKLADU */
@media (min-width: 1200px) {
    .container {
        max-width: 90% !important;
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Centrowanie naglówka i stopki jesli sa poza glównym kontenerem */
    #header .container, 
    #footer .container, 
    #wrapper .container {
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* CENTROWANIE SIATKI PRODUKTÓW */
#products .products, 
.featured-products .products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centruje produkty w rzedzie */
    margin: 0 auto !important;
}
/***************************/
/* NAPRAWA SLIDERA PO ROZSZERZENIU STRONY */
.carousel, 
.carousel-inner, 
.carousel-item, 
.carousel-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Pozwala zdjeciu zachowac proporcje */
}

/* Jesli slider jest w osobnym kontenerze, który nie chce sie rozciagnac */
#carousel, .slider-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
}

/* Usuniecie ograniczen szerokosci dla obrazów w sliderze */
.carousel .carousel-item img {
    object-fit: cover; /* Wypelni cala przestrzen bez deformacji */
    min-height: 300px; /* Opcjonalnie: minimalna wysokosc, by slider nie byl za waski */
}
/*************************************/
/* Wyrównanie wysokosci naglówka na stronie glównej */
#_desktop_logo h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* Usuwa dodatkowa przestrzen pod obrazkiem */
    display: inline-block;     /* Zapobiega rozciaganiu sie h1 na cala szerokosc */
}

#_desktop_logo img {
    vertical-align: middle;    /* Precyzyjne wycentrowanie obrazka */
}


/*******************************************/
/* WYMUSZENIE 1 PRODUKTU W RZEDZIE NA MOBILACH */
@media (max-width: 767px) {
    /* Nadpisujemy klasy modulu ETS */
    .new_products_list_wrapper.layout-gird,
    .featured-products .products {
        display: block !important;
        width: 100% !important;
    }

    .js-product.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
    }

    /* Wycentrowanie obrazka i opisów na mobilu dla lepszego wygladu */
    .product-miniature {
        margin: 0 auto 20px auto !important;
        display: block !important;
    }
}

/****************************/
@media (max-width: 767px) {
    #carousel {
        display: none !important;
    }
}

/*******************************/
@media (max-width: 767px) {
    #content.page-content {
        color: #ffffff !important; /* Zmienia kolor tekstu ogólnego */
    }

    #content.page-content label, 
    #content.page-content p, 
    #content.page-content span, 
    #content.page-content em {
        color: #ffffff !important; /* Wymusza bialy kolor dla etykiet i komunikatów */
    }

    #content.page-content a {
        color: #2fb5d2 !important; /* Opcjonalnie: jasniejszy kolor dla linków, by byly widoczne */
        text-decoration: underline;
    }

    /* Jesli tlo samej karty tez jest czarne, upewnijmy sie, ze pola tekstowe sa czytelne */
    #content.page-content .form-control {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}
/* Poprawki dla calego formularza (Desktop + Mobile) */

/* 1. Glówne etykiety i teksty */
#customer-form,
#customer-form .form-control-label,
#customer-form label,
#customer-form .radio-inline,
#customer-form .custom-checkbox label {
    color: #ffffff !important;
}

/* 2. Teksty pomocnicze (np. "Tylko litery...", "Mozesz zrezygnowac...") */
#customer-form .form-control-comment,
#customer-form .form-control-comment span,
#customer-form .password-requirements span,
#customer-form em {
    color: #cccccc !important; /* Jasnoszary dla lepszej czytelnosci podpowiedzi */
}

/* 3. Naprawa bialego tla dla pól wpisywania (zeby tekst byl widoczny) */
#customer-form .form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ced4da !important;
}

/* 4. Ikony "check_circle" przy hasle */
#customer-form .material-icons.text-success {
    color: #4cd137 !important; /* Wyrazny zielony */
}

/* 5. Przycisk "Pokaz" (haslo) - kontrast na czarnym tle */
#customer-form .input-group-btn .btn[data-action="show-password"] {
    background-color: #444444 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
}

/* 6. Fix dla linków (np. "Zaloguj sie!") jesli sa wewnatrz czarnej sekcji */
.register-form p, 
.register-form p a {
    color: #ffffff !important;
}

/* 7. Odstep dla pól radio (Pan/Pani) zeby nie byly przytulone do siebie */
#customer-form .radio-inline {
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
}
/* Poprawa sekcji Newslettera i Checkboxów (Desktop + Mobile) */

/* 1. Glówny tekst obok checkboxa */
#customer-form .custom-checkbox label {
    color: #ffffff !important;
    display: block;
    cursor: pointer;
}

/* 2. Tekst pisany kursywa (em) pod tytulem newslettera */
#customer-form .custom-checkbox label em {
    color: #bbbbbb !important; /* Jasniejszy szary dla lepszej czytelnosci */
    font-style: italic;
    font-size: 0.9rem;
    display: block;
    margin-top: 4px;
}

/* 3. Ikona "?" (ptaszek) wewnatrz zaznaczonego checkboxa */
#customer-form .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
    color: #ffffff !important; /* Kolor ikony po zaznaczeniu */
}

/* 4. Obramowanie samego kwadracika checkboxa (jesli jest niewidoczne) */
#customer-form .custom-checkbox span {
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
}

/* 5. Efekt po najechaniu myszka (tylko Desktop) */
@media (min-width: 768px) {
    #customer-form .custom-checkbox label:hover {
        color: #2fb5d2 !important; /* Kolor podswietlenia przy najechaniu */
    }
}
/*************************************/
/* Poprawka stopki w wersji mobilnej - biale napisy na bialym tle */
@media (max-width: 767px) {
    /* Ustawienie ciemnego tla dla rozwijanego menu w stopce */
    #footer_sub_menu_1, 
    #footer_sub_menu_1.collapse.in,
    .footer-container .collapse.in {
        background-color: #000000 !important;
        padding: 10px 0;
        margin: 0;
    }

    /* Ustawienie bialych linków wewnatrz tego menu */
    #footer_sub_menu_1 li a,
    .footer-container .cms-page-link {
        color: #ffffff !important;
        display: block;
        padding: 10px 15px;
        border-bottom: 1px solid #333333; /* Delikatna linia oddzielajaca linki */
        text-decoration: none !important;
    }

    /* Usuwamy obramowanie z ostatniego elementu listy */
    #footer_sub_menu_1 li:last-child a {
        border-bottom: none;
    }

    /* Efekt po dotknieciu (opcjonalnie) */
    #footer_sub_menu_1 li a:active {
        background-color: #222222;
    }
}
/**************************/
/* Poprawka dla stron CMS (np. Sposoby wysylki) w wersji mobilnej */
@media (max-width: 767px) {
    /* Wymuszenie czarnego tekstu dla naglówków i paragrafów wewnatrz strony CMS */
    section#content.page-cms,
    section#content.page-cms h1,
    section#content.page-cms h2,
    section#content.page-cms h3,
    section#content.page-cms p,
    section#content.page-cms strong,
    section#content.page-cms li {
        color: #000000 !important;
    }

    /* Upewnienie sie, ze tlo tej konkretnej sekcji pozostaje biale */
    section#content.page-cms {
        background-color: #ffffff !important;
        padding: 15px; /* Dodatkowy margines wewnetrzny dla lepszego wygladu na mobile */
    }
    
    /* Poprawa wyswietlania zdjec w tresci CMS na mobile (zeby nie wychodzily poza ekran) */
    section#content.page-cms img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/*****************************************/
/* STYL DLA RESPENSYWNEGO KALENDARZA */
.responsive-calendar-container {
    position: relative;
    padding-bottom: 60%; /* Proporcje na komputerze */
    height: 0;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 20px; /* Dopasowanie do Twoich zaokraglonych rogów */
}

.responsive-calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* POPRAWKA NA TELEFONY */
@media (max-width: 767px) {
    .responsive-calendar-container {
        padding-bottom: 120%; /* Kalendarz staje sie wyzszy na telefonie, zeby byl czytelniejszy */
    }
}