/* RESET I PODSTAWY */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
  
}

* {
    box-sizing: border-box;
}

/* GŁÓWNY KONTENER NAWIGACJI */
nav {
    background-color: #ffffff;
    position: relative;
    z-index: 9999;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(80, 40, 120, 0.1); /* Delikatna fioletowa poświata cienia */
}

/* PASEK TOGGLE (Logo i Menu) */
nav .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    background: #ffffff;
    cursor: pointer;
    min-height: 60px;
}

.menu-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Styl napisu "Menu" w toggle */
nav .dropdown1 > a:after {
    font-family: FontAwesome;
    content: "\f0c9  MENU"; 
    font-size: 17px;
    font-weight: 700;
    color: #4b2a6d; /* Głęboki fiolet */
    letter-spacing: 0.5px;
}

nav .dropdown1.open > a:after {
    content: "\f00d  ZAMKNIJ"; 
    color: #8e44ad; /* Jaśniejszy fiolet przy otwarciu */
}

/* LISTA GŁÓWNA */
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none; 
    background: #fff;
}

nav li {
    width: 100%;
    display: block;
    border-bottom: 1px solid #f8f5fa; /* Bardzo jasny fioletowy odcień linii */
}

/* LINKI W MENU */
nav a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    color: #333 !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Ikony FontAwesome w menu */
nav a i.fa {
    width: 25px;
    margin-right: 12px;
    color: #6a5acd; /* Kolor SlateBlue - elegancki fiolet */
    text-align: center;
    font-size: 17px;
}

/* EFEKTY HOVER I AKTYWNOŚCI */
nav a:hover, 
nav .dropdown.open > a {
    background-color: #f6f0ff; /* Bardzo jasna lawenda */
    color: #5d34a5 !important; /* Wyrazisty fiolet */
}

nav a:hover i.fa {
    color: #5d34a5;
}

/* PODMENU (Level Two) */
nav .dropdown ul {
    background-color: #fdfbff;
    border-left: 4px solid #6a5acd; /* Fioletowy pasek boczny */
}

nav .dropdown ul li a {
    padding-left: 45px; 
    font-size: 15px;
    font-weight: 400;
    color: #444 !important;
}

/* Strzałka rozwijania przy kategoriach */
nav .dropdown > a:after {
    font-family: FontAwesome;
    content: '\f107'; 
    position: absolute;
    right: 20px;
    color: #ccc;
    transition: transform 0.3s ease;
}

nav .dropdown.open > a:after {
    transform: rotate(180deg);
    color: #6a5acd;
}

/* Ikony chevronów wewnątrz podmenu */
nav .dropdown ul li i.fa-chevron-right {
    font-size: 12px;
    color: #9b59b6 !important; /* Odcień Amethyst */
}

/* DODATKOWE KLASY */
.title-menu {
    vertical-align: middle;
}

.last {
    border-bottom: none;
}



i {text-decoration: none; font-size:16px;}
li {text-decoration: none; font-size:16px;}
ul {text-decoration: none; font-size:16px;}
.j {text-align: left; font-size:16px; line-height: 140%;}
a {
    color: #003366; /* Twój ciemny granat - bardzo czytelny na białym tle */
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease; /* Zmienione na 'all', żeby płynnie zmieniało też np. cień */
}

a:hover {
    color: #9d50bb; /* Twój fioletowy kolor */
    text-shadow: 0 0 5px rgba(157, 80, 187, 0.1); /* Subtelna poświata */
}
a.menu {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-decoration:none; font-size: 16px;transition: color 0.3s ease;}
a.menu:hover {color:#339966;text-decoration: none;}
.czerwony {font-size: 16px;color: red;}
.niebieski {color: blue;}
.bialy {color: white;}
/* Kolor: #1a0a2e (Bardzo ciemny fioletowy granat) */
h1, h2, h3 {
	color: #4a148c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700; /* Mocniejsze podkreślenie hierarchii */
    letter-spacing: -0.5px; /* Nowoczesny wygląd */
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

/* --- NOWOCZESNE PRZYCISKI (WERSJA JASNA - KOMPLETNA) --- */

/* Wspólna baza dla wszystkich przycisków */
.btn1, .btn2, .btn3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    text-align: center;
}

/* Przycisk mały */
.btn1 {
    padding: 10px 24px;
    font-size: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    color: #444;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Przycisk średni */
.btn2 {
    padding: 14px 28px;
    font-size: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    color: #444;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Przycisk duży wyboru - Pełne centrowanie pionowe i poziome */
.btn3 {
    padding: 20px 15px;
    font-size: 17px;
    width: 95%;
    min-height: 120px;
    text-transform: none; 
    letter-spacing: normal;
    margin: 10px auto;
    
    /* KLUCZOWE USTAWIENIA */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* Centruje dzieci (obrazek i tekst) w poziomie */
    justify-content: center !important; /* Centruje dzieci w pionie */
    text-align: center !important;      /* Wymusza środek dla tekstu bezpośredniego */
    box-sizing: border-box;
}

/* WYMUSZENIE ŚRODKA DLA KAŻDEGO ELEMENTU WEWNĄTRZ (nawet jeśli to p, span lub div) */
.btn3 * {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* Obrazek - musi zostać zablokowany jako block do centrowania marginesem */
.btn3 img {
    max-height: 55px;
    width: auto;
    display: block !important;
    margin: 0 auto 10px auto !important;
    flex-shrink: 0; /* Zapobiega spłaszczaniu obrazka */
}

/* --- WARIANTY KOLORYSTYCZNE JASNE --- */

.success {
    border: 1px solid #9d50bb !important;
    background: #ffffff !important;
    color: #9d50bb !important;
    padding: 10px 20px; /* Przykładowy padding, jeśli to przycisk */
    border-radius: 8px; /* Subtelne zaokrąglenie pasujące do nowoczesnego stylu */
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(157, 80, 187, 0.1);
    
    /* KLUCZOWY DODATEK: Płynność animacji dla wszystkich zmian */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block; /* Aby transform działał poprawnie */
}

.success:hover {
    background: #9d50bb !important;
    color: #ffffff !important;
    transform: translateY(-3px); /* Nieco wyraźniejszy ruch w górę */
    box-shadow: 0 10px 25px rgba(157, 80, 187, 0.3); /* Głębszy cień przy uniesieniu */
}

.success:active {
    transform: translateY(-1px); /* Efekt wciśnięcia po kliknięciu */
}

.default {
    border: 1px solid rgba(157, 80, 187, 0.3) !important;
    color: #9d50bb !important;
    background-color: #ffffff;
}

.default:hover {
    background-color: #fdfaff;
    border-color: #9d50bb !important;
    transform: translateY(-2px);
}

.success3 {
    /* Delikatne, bardzo jasne fioletowe obramowanie zamiast kremowego */
    border: 2px solid #f8f5fa !important;
    /* Twój główny fiolet */
    color: #9d50bb !important; 
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.05);
    transition: all 0.3s ease; /* Płynne przejście dla efektu hover */
}

.success3:hover {
    background-color: #ffffff;
    /* Obramowanie zmienia się na intensywny fiolet */
    border-color: #9d50bb !important;
    transform: scale(1.01);
    /* Cień w kolorze fioletowym zamiast złotym */
    box-shadow: 0 8px 20px rgba(157, 80, 187, 0.15);
}

.btn1:active, .btn2:active, .btn3:active {
    transform: translateY(0) scale(0.97);
}

div{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:16px; color:#000000;line-height: 1.6 !important;
    letter-spacing: 0.5px;
    text-align: left; /* Justowanie na telefonach często tworzy brzydkie dziury */

  }
div#glowny { width:100%;margin: 0px auto 0px auto;text-align:left;}
div.pelny{ width: 100%;margin:0px;padding:4px 0px 0px 0px;text-align:left;}
img{ border:0px; }
div.lewy{ width: 100%;float:left;margin: 5px;}
div.srodek{ width: 100%;float:left;margin: 5px;}
div.prawy{ width: 100%;float:left;margin: 5px;}
div.top7{ padding-top:7px; }
div.adsense{ width:370px;float:right;text-align:center;background-color:#FBFBFB;margin-top:5px;border: 1px solid #F5F5F5;}
div.menu1{ width: 370px;height:78px;background-image: url('https://horoskopy.fazi.pl/grafika/menu1.gif'); }
div.menu2{ width: 370px;height:78px;background-image: url('https://horoskopy.fazi.pl/grafika/menu2.gif'); }
div.tabs{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:12px; color:#BBBBBB; padding: 8px 15px; }
select,input.pole{ border-style: solid; border-color: #DDDDDD; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; font-size: 12px; font-family: Arial; color: black;}
div.menuc1{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuc.gif');}
div.menuc{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuc.gif'); }
div.menuz{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuz.gif'); }
div.menuz1{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuz.gif'); }
div.menun{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menun.gif'); }
div.menun1{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menun.gif'); }
div.menus{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menus.gif'); }
div.menus1{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menus.gif'); }
div.menuf{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuf.gif'); }
div.menuf1{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuf.gif'); }
div.menuf4{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuf4.gif'); }
div.menuc4{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuc4.gif'); }
div.menuz4{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuz4.gif'); }
div.menuf6{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuf6.gif'); }
div.menuc6{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuc6.gif'); }
div.menuz6{ width: 100%;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menuz6.gif'); }

/* --- NOWOCZESNE NAGŁÓWKI MOBILE (KLASY Z KOŃCÓWKĄ 7) --- */
div.menuf7, div.menuc7, div.menuz7, div.menus7, div.menun7 {
    width: 100% !important;
    height: 38px !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* Spójne z desktopem */
    
    /* ZMINIMALIZOWANY ODSTĘP: 5px zamiast 12px */
    margin-bottom: 5px !important; 
    
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
    padding-left: 0 !important; /* Reset, by span.menut kontrolował odstęp */
    box-sizing: border-box;
}

/* Kolorowy pasek po lewej stronie (Mobile) */
div.menuf7::before, div.menuc7::before, div.menuz7::before, div.menus7::before, div.menun7::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 2;
}

/* --- KOLORY DLA MOBILE (DOPASOWANE DO DESKTOPA) --- */
div.menuf7::before { background: linear-gradient(to bottom, #D1B1DA, #B8A4BF); }
div.menuc7::before { background: linear-gradient(to bottom, #F5ABB1, #EE8F95); }
div.menuz7::before { background: linear-gradient(to bottom, #BBE4C2, #ACD2B2); }
div.menus7::before { background: linear-gradient(to bottom, #DBD5D5, #CAC4C4); }
div.menun7::before { background: linear-gradient(to bottom, #ACAEF2, #999BCA); }

/* --- TEKST NAGŁÓWKA W BELCE (span.menut) --- */
span.menut {
    color: #1e0a32 !important; /* Ciemny fiolet */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-left: 15px !important;
    /* POPRAWKA: inline-block zamiast block */
    display: inline-block !important;
    white-space: nowrap;
}

/* --- SEPARATOR (menub7) --- */
div.menub7 { 
    width: 100% !important; 
    height: 1px !important; 
    background: rgba(0, 0, 0, 0.05) !important; 
    margin: 15px 0 !important; 
}

div.teksta1 { 
  width: 100%;
  margin-top: -3px !important;
  clear: both;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
  text-shadow: none;
}

div.teksta5 {
  width: 100%;
  margin-top: -3px !important;
  clear: both;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
  text-shadow: none;
}

div.teksta {
  width: 100%;
  margin-top: -3px !important;
  clear: both;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
  text-shadow: none;
}
  
div.tekstb5 {
  width: 100%;
  margin-top: -3px !important;
  clear: both;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
  text-shadow: none;
}

div.tekstb1 {
  width: 100%;
  margin-top: -3px !important;
  clear: both;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  color: #333333;
  box-sizing: border-box;
  text-shadow: none;
}

/* Reszta stylów pomocniczych */
span.mini { font-size:11px; }
span.szary { color:#B9B9B9; }
div.stopka, div.stopka0 { 
    width: 100% !important; 
    border-top: 1px solid #d5dade; 
    background-color: #fff; 
    padding: 10px 0; 
    margin-top: 10px; 
    text-align: center;
}



.galeria {
    display: flex;
  justify-content: center; /* ✅ centrowanie poziome */
  align-items: center;     /* opcjonalnie: centrowanie pionowe */
  gap: 15px;               /* odstęp między obrazkami */
  flex-wrap: wrap;         /* zawijaj, jeśli brak miejsca */
  padding: 20px 0;
  
}


.obrazek
{
height: auto;display: block;max-width: 100%;
-webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease;
}
.obrazek:hover
{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
overflow: hidden;
}
.obrazek1
{
height: auto;display: block;max-width: 100%;
-webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease;
}
.obrazek1:hover
{
-webkit-filter:
grayscale(100%);
}
/* Accordion Menu Styles
----------------------------------------*/
ul[data-menu-style="accordion"] {
width: 100%;
}
ul[data-menu-style="accordion"] > li {
display: block;
margin: 0;
padding: 0;
border: 0px;
float: none !important;
}
ul[data-menu-style="accordion"] > li:first-child {
border-top: 2px solid #3b39b4; /* kolor podkreslenia pod głownym menu */
}
ul[data-menu-style="accordion"] li ul.sub-menu > li {
width: 100%;
}
ul[data-menu-style="accordion"] > li > a > .arrow:before {
float: right;
content: "\f105";
}
ul[data-menu-style="accordion"] li.menu-active > a > .arrow:before {
content: "\f107" !important;
}
ul[data-menu-style="accordion"] > li > ul.sub-menu {
position: static;
}
ul[data-menu-style="accordion"] > li > a i {
padding-right: 10px;
color: #3b39b4; /* kolor ikonek w menu */
}
ul[data-menu-style="accordion"] > li > ul.sub-menu > li ul.sub-menu {
position: static;
}
ul[data-menu-style="accordion"] > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu {
position: static;
}
ul[data-menu-style="accordion"] > li {
border-bottom: 1px solid #e7e7e7; /* kolor linijek po rozwinieciu menu */
}
ul[data-menu-style="accordion"] li a:hover {
background: #e7e7e7 !important; /* kolor linijek po najechaniu myszka po rozwinieciu menu */
}
ul[data-menu-style="accordion"] ul.sub-menu li.menu-active > a > .arrow:before {
content: "\f107" !important;
}





.kolor15 {
  background-color: rgba(239, 239, 239, 1);
  background-image: linear-gradient(90deg, rgba(239, 239, 239, 1) 0%, rgba(221, 218, 218, 1) 50%);
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.kolor15-inner {
  max-width: 1400px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.kolor15 .search-wrapper {
  display: flex;
  align-items: center;
}

.kolor15 form {
  margin: 0;
}

.kolor15 input[type="text"] {
  padding: 10px;
  width: 320px;
  font-size: 1rem;
}

.kolor15 button {
  padding: 10px 16px;
  font-size: 1rem;
  margin-left: 5px;
}


/* STOPKA DOLNA - WERSJA JASNA (PEŁNE CENTROWANIE) */
.kolor16 {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Kontener bezpośrednio nad Twoim tekstem */
.kolor16 .data {
    width: 100%;
    max-width: 100%;
    text-align: center !important; /* Wymuszenie środka dla tekstów */
    margin: 0 auto !important;
    display: block !important; /* Reset ewentualnego flexa */
}

.kolor16 .bialy {
    color: #666666;
    font-size: 14px;
    display: block;
}

.kolor16 .bialy p {
    margin: 10px 0;
    line-height: 1.8;
    text-align: center !important;
}

/* Linki - trzymają się obok siebie */
.kolor16 a.bialy {
    color: #1e0a32;
    text-decoration: none;
    font-weight: 600;
    padding: 0 5px;
    transition: color 0.3s ease;
    display: inline-block; /* Kluczowe, by stały w linii */
}

.kolor16 a.bialy:hover {
    color: #9d50bb;
}

/* --- POPRAWKA SPECJALNIE POD MOBILE --- */
@media (max-width: 768px) {
    .kolor16 {
        padding: 40px 15px; /* Więcej miejsca na małych ekranach */
    }

    .kolor16 .data, 
    .kolor16 .bialy, 
    .kolor16 .bialy p {
        text-align: center !important;
        float: none !important; /* Usuwa ewentualne opływanie */
    }

    /* Linki na mobile - dodajemy im nieco większy odstęp boczny, by łatwiej było klikać */
    .kolor16 a.bialy {
        margin: 5px 2px;
        font-size: 13px;
    }
}


/* TWOJA ORYGINALNA SEKCA TOP-BAR (Bez zmian koloru) */
.top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background-color: rgba(30, 10, 50, 1);
    background-image: linear-gradient(90deg, rgba(20, 10, 30, 1) 0%, rgba(55, 20, 90, 1) 50%, rgba(20, 10, 30, 1) 100%);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

/* PRZYCISK - baza */
.button-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 38px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    gap: 5px;
}

/* WERSJA DLA NAPISU "Tryb Ciemny" (Gdy strona jest biała) */
/* Używamy mocniejszego złota i wyraźnej poświaty, by napis nie był wyblakły */
.light-theme .button-toggle {
    background: #1e0a32 !important; /* Ciemny przycisk na jasnym pasku */
    color: #ffdf91 !important;      /* Jasne, nasycone złoto */
    border: 1px solid #e6be8a !important;
    text-shadow: 0 0 10px rgba(255, 223, 145, 0.8); /* Silna poświata napisu */
    box-shadow: 0 0 12px rgba(157, 80, 187, 0.5);
}

/* WERSJA DLA NAPISU "Tryb Jasny" (Gdy strona jest ciemna) */
/* Dodajemy poświatę do Twojego oryginalnego stylu */
.dark-theme .button-toggle {
    background: rgba(30, 10, 50, 0.6) !important;
    color: #e6be8a !important;
    border: 1px solid #e6be8a !important;
    text-shadow: 0 0 10px rgba(255, 223, 145, 0.8); /* Silna poświata napisu */
    box-shadow: 0 0 10px rgba(157, 80, 187, 0.3);
}

.button-toggle:active {
    transform: scale(0.92);
}


/* Ta reguła sprawi, że wszystkie teksty oznaczone tą klasą będą białe */
.tekst-kolorowy {
    color: #000000 !important;
    /* Możesz tu dodać coś jeszcze, np. delikatny cień, by lepiej było widać na fiolecie 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

/* Ta reguła sprawi, że wszystkie teksty oznaczone tą klasą będą białe */
.tekst-kolor1 {
    color: #000000 !important;
    /* Możesz tu dodać coś jeszcze, np. delikatny cień, by lepiej było widać na fiolecie 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}


.tekst-odliczanie {
    /* Twoje parametry z tagu style */
    font-size: 18px;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Tutaj ustawiasz kolor, który chcesz mieć domyślnie (np. biały dla trybu ciemnego) */
    color: #00008B !important; 
    
    /* Opcjonalnie: dodaj lekki cień, by napisy były wyraźniejsze na fioletowym tle */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

	

/* Dodanie 'body' i 'div' przed '#' drastycznie zwiększa moc selektora */
body div#remaining {
    color: #00008B !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

/* To samo dla spana w środku, jeśli on też jest uparty */
body div#remaining span#left {
    color: #00008B !important;
}




.search-bar {
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #ffffff; /* Czysta biel */
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.left-items {
    display: flex;
    align-items: center;
    gap: 18px; /* Odpowiedni odstęp na palec */
}

.left-items img {
    height: 24px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.search-icon {
    cursor: pointer;
    font-size: 22px;
    color: #444;
    padding: 5px; /* Większe pole do kliknięcia */
    transition: transform 0.2s ease;
}

.search-icon:active {
    transform: scale(1.2);
}

/* Przycisk zmiany trybu - mniejszy i subtelniejszy na mobile */
.button-toggle {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Kontener wyszukiwarki po rozwinięciu */
#search-form-container {
    padding: 15px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #eee;
    display: none;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#search-form-container.show {
    display: block;
}

/* Formularz jako spójna "kapsułka" */
#search-form {
    display: flex;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 50px;
    padding: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

#search-form input[type="text"] {
    flex: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px; /* Zapobiega auto-zoomowi na iPhone */
    outline: none;
    background: transparent;
}

#search-form button[type="submit"] {
    background: #ff4d6d; /* Twój kolor przewodniczy */
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
}

/* Responsywność dla bardzo małych ekranów */
@media (max-width: 400px) {
    .button-toggle {
        font-size: 11px;
        padding: 5px 8px;
    }
}
  
  
  
  
  h1.astro-main-header {
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #2c3e50 !important; /* Ciemny kolor dla jasnego tła */
    margin: 20px 0 !important;
    display: block !important;
}

@media screen and (max-width: 480px) {
    h1.astro-main-header {
        font-size: 17px !important;
    }
}




/* --- KONTENER GŁÓWNY --- */
.astro-vertical-container {
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* --- KARTY (ENERGIA, SERCE, PORTFEL) --- */
.astro-v-card {
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff !important; 
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.v-spirit { border-left: 5px solid #C9A431 !important; }
.v-love   { border-left: 5px solid #ff4d6d !important; }
.v-money  { border-left: 5px solid #00c896 !important; }

.astro-v-icon {
    font-size: 32px;
    margin-right: 20px;
    flex-shrink: 0;
}

.astro-v-content { flex-grow: 1; }

.astro-v-content h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    text-align: center; 
    display: block;
}

.astro-v-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    text-align: left; 
}

/* --- PASEK KOLORU Z KROPKĄ (NAPRAWIONY) --- */
.astro-color-footer {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrowanie zawartości paska */
    gap: 12px;
    padding: 15px 22px;
    font-size: 14px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* Styl kropki/wskaźnika koloru */
.color-indicator {
    width: 20px;       /* Wielkość kropki */
    height: 20px;
    border-radius: 50%; /* Koło */
    border: 2px solid #ffffff; /* Biała obwódka dla kontrastu */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Delikatny cień wokół kropki */
    display: inline-block;
    flex-shrink: 0;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 500px) {
    .astro-v-card {
        flex-direction: column;
        align-items: center;
        border-left: none !important;
        border-top: 5px solid !important;
    }
    .v-spirit { border-top-color: #C9A431 !important; }
    .v-love   { border-top-color: #ff4d6d !important; }
    .v-money  { border-top-color: #00c896 !important; }
    
    .astro-v-icon { margin-right: 0; margin-bottom: 10px; }
}





.numbers-fazi-container {
    text-align: center;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    width: 100%; /* Zapewnia wyśrodkowanie w ramce */
}

.numbers-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    display: block; /* Ułatwia środkowanie */
}

.numbers-flex {
    display: flex;
    justify-content: center; /* Środkuje kule w poziomie */
    gap: 12px;
    flex-wrap: wrap; /* Pozwala przechodzić do nowej linii na mobile */
    max-width: 100%;
}

.number-sphere {
    width: 42px; /* Nieco mniejsze, by lepiej pasowały obok siebie */
    height: 42px;
    background: radial-gradient(circle at 30% 30%, #f1d37e, #C9A431 60%, #a6841f);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    animation: float-ball 3s infinite ease-in-out;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Różne czasy animacji dla efektu naturalności */
.number-sphere:nth-child(2n) { animation-delay: 0.4s; }
.number-sphere:nth-child(3n) { animation-delay: 0.8s; }
.number-sphere:nth-child(4n) { animation-delay: 1.2s; }
.number-sphere:nth-child(5n) { animation-delay: 1.6s; }

@keyframes float-ball {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.numbers-footer {
    font-size: 11px;
    margin-top: 15px;
    font-style: italic;
    opacity: 0.6;
}


/* Kontener główny - Pełne Centrowanie */
.astro-section-wrapper {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-align: center; 
    margin: 20px auto;
}

/* Nagłówek pory dnia - WERSJA JASNA */
.daytime-header {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: block; /* Zapewnia pełną szerokość i poprawne centrowanie */
    width: 100%;
    text-align: center; /* Wymusza środek na mobile */
    color: #333;
    font-weight: 800;
}

.daytime-value {
    color: #C9A431; /* Twoje złoto w wersji jasnej */
    font-weight: 900;
    margin-left: 5px;
}

/* Obrazek pory dnia - czysty styl */
.img-daytime-responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 15px auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
}

/* Nagłówek dopasowania - Pogrubiony i ciemny */
.match-header-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin: 35px 0 20px 0;
    color: #1e0a32; 
}

/* Karty dopasowania - CZYSTA BIEL */
.astro-match-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px auto;
    max-width: 650px;
}

.match-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 10px;
    border-radius: 20px;
    background: #ffffff !important; 
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.match-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.match-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 800;
    margin-bottom: 15px;
}

/* Kolory etykiet */
.label-love { color: #ff4d6d; }
.label-friend { color: #9370db; }
.label-work { color: #00c896; }

.img-sign-match {
    width: 85px; 
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.1));
}

.match-sign-name {
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

/* RESPONSIVE - Mobilne urządzenia */
@media (max-width: 500px) {
    .astro-match-wrapper {
        gap: 8px;
    }

    .match-card {
        padding: 15px 5px;
    }

    .daytime-header {
        font-size: 13px;
    }

    .daytime-value {
        font-size: 15px;
        display: block;
        margin-top: 5px;
    }
    
    .img-daytime-responsive {
        max-width: 280px;
    }

    .img-sign-match {
        width: 60px;
    }
    
    .match-sign-name {
        font-size: 14px;
    }

    .match-header-title {
        font-size: 13px;
    }
}

/* Wersja JASNA (style_gora_desktop.css) */
.chart-only-container {
    background-color: rgb(255, 255, 255) !important;
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

/* GŁÓWNY KONTENER TAROTA - JASNY */
.tarot-daily-wrapper {
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* KARTA TAROTA */
.tarot-daily-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.tarot-daily-icon {
    font-size: 32px;
    margin-right: 20px;
    flex-shrink: 0;
    margin-top: 5px;
}

.tarot-daily-info {
    flex-grow: 1;
    text-align: left;
}

.tarot-daily-info h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    text-align: center; 
    display: block;
}

.tarot-card-title-bold {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #9370db;
    margin-bottom: 8px;
    line-height: 1.2;
    text-align: center; 
}

.tarot-daily-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    text-align: left; /* Zawsze do lewej na desktopie */
}

.tarot-type-main { border-left: 5px solid #9370db; }
.tarot-type-advice { border-left: 5px solid #C9A431; }

/* --- POPRAWKA MOBILNA (HYBRYDOWA) --- */
@media (max-width: 480px) {
    .tarot-daily-card {
        flex-direction: column;
        align-items: center !important; 
        padding: 20px;
        border-left: none !important;
        border-top: 5px solid;
    }
    
    .tarot-daily-icon {
        margin: 0 0 12px 0 !important;
        font-size: 40px;
        text-align: center;
    }

    .tarot-daily-info {
        width: 100%;
    }

    /* Wycentrowane tylko te dwa elementy */
    .tarot-daily-info h3, 
    .tarot-card-title-bold {
        text-align: center !important;
        width: 100%;
    }

    /* TEKST HOROSKOPU WRACA DO LEWEJ NA MOBILE */
    .tarot-daily-info p {
        text-align: left !important; 
        width: 100%;
    }

    .tarot-card-title-bold {
        font-size: 20px;
    }

    .tarot-type-main { border-top-color: #9370db !important; }
    .tarot-type-advice { border-top-color: #C9A431 !important; }
}


/* GŁÓWNY KONTENER MIŁOSNY - JASNY */
.love-astro-wrapper {
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    box-sizing: border-box;
}

/* KARTA MIŁOSNA - STYL JASNY */
.love-astro-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff !important; /* Białe tło */
    border: 1px solid #e0e0e0 !important; /* Wyraźna szara ramka */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* Delikatny cień */
    box-sizing: border-box;
}

.love-astro-icon {
    font-size: 30px;
    margin-right: 18px;
    flex-shrink: 0;
}

.love-astro-info h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    text-align: center;
}

.love-astro-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333333 !important; /* Ciemny tekst dla czytelności */
    text-align: left;
}

/* Kolorowe paski boczne - JASNE */
.love-type-heart { border-left: 5px solid #ff4d6d !important; }
.love-type-single { border-left: 5px solid #ff85a1 !important; }
.love-type-couple { border-left: 6px solid #c9184a !important; }

/* MOBILE */
@media (max-width: 480px) {
    .love-astro-card {
        flex-direction: column;
        align-items: center !important;
        border-left: 1px solid #e0e0e0 !important;
        border-top: 5px solid !important;
    }
    .love-type-heart { border-top-color: #ff4d6d !important; }
    .love-type-single { border-top-color: #ff85a1 !important; }
    .love-type-couple { border-top-color: #c9184a !important; }
}


/* GŁÓWNY KONTENER CHIŃSKI - JASNY */
.china-astro-wrapper {
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* KARTA CHIŃSKA - CZYSTA BIEL */
.china-astro-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.china-astro-icon {
    font-size: 30px;
    margin-right: 18px;
    flex-shrink: 0;
    margin-top: 5px;
}

.china-astro-info {
    flex-grow: 1;
    text-align: left;
}

/* NAGŁÓWKI WYCENTROWANE */
.china-astro-info h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    text-align: center;
    display: block;
    width: 100%;
}

/* TEKST DO LEWEJ */
.china-astro-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    text-align: left;
}

/* KOLORY KRAWĘDZI */
.china-type-general { border-left: 5px solid #d42121; }
.china-type-love { border-left: 5px solid #ff4d6d; }
.china-type-money { border-left: 5px solid #daa520; }

/* MOBILE - HYBRYDOWE CENTROWANIE */
@media (max-width: 480px) {
    .china-astro-card {
        flex-direction: column;
        align-items: center !important;
        padding: 20px;
        border-left: none !important;
        border-top: 5px solid;
    }
    .china-astro-icon { margin: 0 0 10px 0 !important; font-size: 36px; }
    .china-astro-info { width: 100%; }
    .china-astro-info h3 { text-align: center !important; }
    .china-astro-info p { text-align: left !important; } /* Tekst do lewej na mobile */
    
    .china-type-general { border-top-color: #d42121 !important; }
    .china-type-love { border-top-color: #ff4d6d !important; }
    .china-type-money { border-top-color: #daa520 !important; }
}

/* --- UNIKALNY UKŁAD GRID JASNY (BEZ TŁA) --- */
.sekcja-horoskop-linki {
    text-align: center;
    margin: 30px 0;
}

.grid-horoskop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 0; /* Odstęp pionowy między rzędami */
    max-width: 1000px;
    margin: 0 auto;
}

.grid-horoskop a {
    flex: 0 0 25%; /* 4 kolumny na desktopie */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    background: transparent; /* Brak tła */
    border: none; /* Brak obramowania */
}

.grid-horoskop a:hover {
    transform: translateY(-5px); /* Efekt uniesienia identyczny jak w innych menu */
}

.obrazek-znak {
    width: 75px;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    border: 0;
}

.grid-horoskop span {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #222222;
    font-weight: 600;
    transition: color 0.3s ease;
}

.grid-horoskop a:hover span {
    color: #000000;
}

/* Responsywność: 3 kolumny na telefonie */
@media (max-width: 600px) {
    .grid-horoskop a {
        flex: 0 0 33.333%;
    }
    .grid-horoskop span {
        font-size: 13px;
    }
    .obrazek-znak {
        width: 65px;
    }
}


/* Unikalna siatka 3 kolumny - WERSJA JASNA */
.zodiac-triple-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 0;
    /* Zmieniono margin: auto na konkretne ustawienie przesuwające w lewo */
    margin: 20px 0 20px -10px; 
    max-width: 1000px;
}

.zodiac-triple-item {
    flex: 0 0 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.zodiac-triple-item:hover {
    transform: translateY(-5px);
}

.zodiac-triple-img {
    width: 80px;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    border: 0;
}

.zodiac-triple-name {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #222222; /* Ciemny tekst dla jasnego tła */
    font-weight: 600;
    transition: color 0.3s ease;
}

.zodiac-triple-item:hover .zodiac-triple-name {
    color: #000000;
}


/* Układ siatki 6 kolumn - WERSJA JASNA */
.grid-6-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 0;
    margin: 20px auto;
    max-width: 1150px;
}

.item-6-col {
    flex: 0 0 16.666%; /* 100% podzielone na 6 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.item-6-col:hover {
    transform: scale(1.08);
}

.img-6-col {
    width: 75px; 
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    border: 0;
}

.text-6-col {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

/* Responsywność: na tabletach 3 w rzędzie, na telefonach 2 w rzędzie */
@media (max-width: 900px) {
    .item-6-col { flex: 0 0 33.333%; }
}
@media (max-width: 480px) {
    .item-6-col { flex: 0 0 50%; }
}

/* Układ siatki 4 kolumny - WERSJA JASNA */
.grid-4-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 0; /* Odstęp między rzędami */
    margin: 20px auto;
    max-width: 1000px;
}

.item-4-col {
    flex: 0 0 25%; /* 4 kolumny na desktopie */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    background: transparent;
}

.item-4-col:hover {
    transform: translateY(-5px);
}

.img-4-col {
    width: 75px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    border: 0;
}

.text-4-col {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease;
}

.item-4-col:hover .text-4-col {
    color: #000;
}

/* --- DOSTOSOWANIE DO TELEFONU --- */
@media (max-width: 600px) {
    .item-4-col { 
        flex: 0 0 33.333%; /* WYMUSZA 3 ZNAKI W RZĘDZIE */
    }

    .text-4-col {
        font-size: 13px; /* Mniejszy tekst na telefonie */
    }

    .img-4-col {
        width: 80px;
    }
}