html, body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: Arial, Georgia, Verdana; 
  margin: 0px; 
  padding: 0px; 
  font-size:16px; 
}

* {
  box-sizing: border-box;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

nav a:link {
  color: #ffffff;
}

/* visited link */
nav a:visited {
  color: #ffffff;
}

/* mouse over link */
nav a:hover {
  color: green;
}

/* selected link */
nav a:active {
  color: green;
}

nav a.ex1:link {
  color: black;
}

nav a.ex1:hover {
  color: black;
}

nav a.ex1:visited {
  color: black;
}

nav a.ex1:active {
  color: black;
}

nav a.ex1 {
  color: black;
  text-decoration: none;
  font-size: 16px;
}

.title-menu {
  color: black;
  font-size: 16px;
} /* tekst na paskach bez rozwijania */

body a:hover { 
  color: green;
}

nav { 
  background-color: #f8f8f8; /* kolor górnego paska */
  position: relative;
  z-index: 9999; /* zapewnia najwyższą warstwę nad kartami i innymi elementami */
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

nav li,
nav .nav-toggle {
  text-align: left;
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

nav .dropdown > a:after {
  font-family: FontAwesome;	
  content: '\f078';
  position: absolute;
  right: 15px;
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

nav .dropdown.open,
.desktop nav li:hover { background-color: #e7e7e7; } /* kolor wiersza po otwarciu menu */

nav .dropdown.open > a:after,
.desktop nav li:hover > a:after {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

nav .dropdown1 > a:after {
  font-family: FontAwesome;
  content: "Menu  \f0c9";
  color: #000;
  background: url('https://www.fazi.pl/grafika/astrology2.png' ) no-repeat center center;
  padding-left: 210px;
  position: absolute;
  right: 15px;
  font-size: 30px;
}

nav .dropdown1.open > a:after,
.desktop nav li:hover > a:after {
  font-family: FontAwesome;
  content: "Menu  \f00d";
  color: #000; 
  background: url('https://www.fazi.pl/grafika/astrology2.png' ) no-repeat center center;
  padding-left: 212px;
  position: absolute;
  right: 15px;
  font-size: 30px;
}

nav .dropdown ul {
  position: relative;
  background-color: #f8f8f8;  /* kolor tlo po rozwinieciu podmenu*/
  display: none;
}

nav a {
  display: block;
  padding: 15px 15px;
}

#wrapper { 
  display: flex; 
  justify-content: center; /* center horizontally */ 
  align-items: center; /* center vertically */ 
}

/* ============================================================
   NOWE POPRAWKI: Blokada złotego podświetlenia dla menu
   ============================================================ */

nav a:hover, 
nav .dropdown.open > a {
  color: green !important;      /* Przywraca zielony kolor w menu */
  text-shadow: none !important;  /* Usuwa świecenie (glow) */
}

nav a.ex1:hover {
  color: black !important;      /* Przywraca czarny kolor dla klasy ex1 */
  text-shadow: none !important;
}


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:#9d50bb; text-decoration: none; font-size:16px;transition: color 0.3s ease;}

a:hover {
color: #ffdf91 !important;
  text-shadow: 0 0 10px rgba(255, 223, 145, 0.8);
  transition: 0.3s; /* Płynne przejście koloru */
}

a.menu {font-family: Arial, Georgia, Verdana; 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;}
h1 {font-size: 22px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}
h2 {font-size: 20px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}
h3 {font-size: 16px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}

/* --- STYLE BAZOWE PRZYCISKÓW --- */
.btn1, .btn2, .btn3 {
    font-family: 'Georgia', serif;
  /* ---  text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;*/
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px; /* Zaokrąglenie pasujące do Twoich ramek */
  /*   display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;*/
}

.btn1 {
    border: 1px solid #b8860b;
    background-color: rgba(30, 10, 50, 0.6);
    color: #e6be8a;
    padding: 10px 24px;
    font-size: 16px;
}

.btn2 {
    border: 1px solid #b8860b;
    background-color: rgba(30, 10, 50, 0.6);
    color: #e6be8a;
    padding: 14px 28px;
    font-size: 16px;
}

.btn3 {
    border: 2px solid #ffdf91;
    background: linear-gradient(135deg, rgba(55, 20, 90, 0.8) 0%, rgba(20, 10, 30, 1) 100%);
    color: #ffdf91;
    padding: 10px 24px;
    font-size: 15px;
    width: 100%; /* Responsywność */
    max-width: 480px;
    height: 160px;
    text-shadow: 0 0 10px rgba(255, 223, 145, 0.5);
}

/* --- WARIANT ZŁOTY (dawny Success) --- */
.success {
    border-color: #ffdf91 !important;
    color: #ffdf91 !important;
    background-color: rgba(184, 134, 11, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.success:hover {
    background-color: #b8860b !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

/* --- WARIANT FIOLETOWY (dawny Success3) --- */
.success3 {
    border-color: #9d50bb !important;
    color: #e0bbe4 !important;
    background-color: rgba(157, 80, 187, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.success3:hover {
    background-color: #9d50bb !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(157, 80, 187, 0.6);
    transform: translateY(-2px);
}

/* --- WARIANT DOMYŚLNY (dawny Default) --- */
.default {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.default:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- EFEKTY DLA WSZYSTKICH PRZYCISKÓW --- */
.btn1:hover, .btn2:hover, .btn3:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}


div{ font-family: Arial, Georgia, Verdana; font-size:16px; color:#F5F5F5;}
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: Arial, Georgia, Verdana; 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'); }


div.menuf				{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}



div.menuc			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuz			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menus { 
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
  
div.menun			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuf1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuc1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuz1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
div.menus1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menun7			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuf7			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuc7		{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
  
div.menuz7			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menus7			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menun7			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 33px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menub7{ width: 100%;height:1px;background: #FFFFFF; }

div.menub{ width: 980px;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menub1.gif');float:left; }
span.mini{ font-size:11px;}
span.szary{ color:#B9B9B9; }
span.dzial{ display:block; float:left; width:80px;font-weight:bold; }

span.menut { 

color: #1e0a32; /* Ciemny fioletowy tekst - najlepiej czytelny */
    font-family: 'Georgia', serif; /* Pasuje do Tarota */
    font-size: 16px;
    font-weight: bold;
 /*   text-transform: uppercase;
    letter-spacing: 1px; /* Rozstrzelenie liter dodaje elegancji */
    justify-content: center; /* Wyśrodkuje tytuł w poziomie (opcjonalnie) */
}
span.smskartka{ vertical-align:-2px; }
div.imieniny{ float:left;width:550px; }
div.sms{ float:right;width:200px;text-align:right;display:inline; }
div.marginesy{ padding:7px; }
div.marginesy1{ margin: 10px;padding:7px; }
div.marginesy15{ margin: 0px;padding:0px; }
ul{ list-style:none; }
hr {height: 0 !important;height: 1px; /* wysokosc pod ie */color: #E5E5E5; /* kolor pod ie */background: transparent;border-width: 1px 0 0 0;border-color: #efefef;border-style: solid;
} 
div.marginesy15ul{ float:left;width:160px;margin-top:15px;margin-left:10px;margin-bottom:0px;padding:0px; }
div.stopka{ width:750px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px; }
div.stopka0{ width:980px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px; }



div.teksta1{ 
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}

div.teksta5{
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}

div.teksta {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}
  
div.tekstb5 {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}


div.tekstb1 {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}



.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;
}


  



/* Styl tła, który nie wpływa na resztę strony */
#magiczne-tlo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    z-index: -9999;
    overflow: hidden;
    pointer-events: none;
}

/* Animacja migotania dla małych gwiazd */
@keyframes twinkling {
    0% { opacity: 0.2; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.2; transform: scale(0.7); }
}

/* Efekt spadającej gwiazdy (meteor) */
.meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: meteor-anim 5s infinite;
}

@keyframes meteor-anim {
    0% { transform: rotate(200deg) translateX(0); width: 0; opacity: 1; }
    10% { width: 100px; opacity: 1; }
    20% { transform: rotate(200deg) translateX(-600px); width: 0; opacity: 0; }
    100% { opacity: 0; }
}



.kolor15 {
    /* Identyczne tło jak w kolor16 - spójność góry strony */
    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%);
    
    width: 100%;
    height: 70px; /* Wysokość dopasowana do paska narzędzi */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    
    /* Złote linie identyczne jak w kolor16 */
    border-top: 1px solid rgba(184, 134, 11, 0.3);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    
    /* Cień wewnętrzny dla głębi */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.kolor15-inner {
    max-width: 1240px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-family: 'Georgia', serif;
}

/* Stylizacja tekstu z DATĄ */
.kolor15 .data {
    color: #e6be8a !important; /* Stare złoto */
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(157, 80, 187, 0.6);
    white-space: nowrap;
}

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

/* Pole INPUT wyszukiwarki */
.kolor15 input[type="text"] {
    padding: 10px 15px;
    width: 250px;
    background: rgba(0, 0, 0, 0.4); /* Bardzo ciemne, przejrzyste tło */
    border: 1px solid rgba(157, 80, 187, 0.5); /* Fioletowa obwódka */
    border-radius: 5px;
    color: #ffffff !important;
    font-family: 'Georgia', serif;
    outline: none;
    transition: all 0.3s ease;
}

.kolor15 input[type="text"]:focus {
    border-color: #ffdf91; /* Złoto przy aktywnym polu */
    box-shadow: 0 0 10px rgba(157, 80, 187, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

/* Przycisk wyszukiwania */
.kolor15 button {
    padding: 9px 18px;
    margin-left: 10px;
    background: linear-gradient(to bottom, #b8860b, #8b6508); /* Złoty gradient przycisku */
    border: 1px solid #ffdf91;
    border-radius: 5px;
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.kolor15 button:hover {
    background: linear-gradient(to bottom, #d4af37, #b8860b);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
}

/* Kolor znaku zapytania lub ikonki lupy jeśli ją masz */
.kolor15 input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}


.kolor16 {
    /* Zmieniamy zieleń na ciemny, magiczny fiolet (identyczny z Twoim menu i kolor15) */
    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%);
    
    height: 120px;
    width: 100%;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-family: 'Georgia', serif; /* Zmieniamy na szeryfową, pasującą do Tarota */
    box-sizing: border-box;
    text-align: center;
    
    /* Dodajemy złote linie obramowania, aby pasowało do reszty pasków */
    border-top: 1px solid rgba(184, 134, 11, 0.3);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    
    /* Efekt głębi tła */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.kolor16 .data {
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    /* Delikatna fioletowa poświata pod tekstem */
    text-shadow: 0 0 10px rgba(157, 80, 187, 0.6);
}

.kolor16 .bialy {
    color: #ffffff !important; /* Wymuszamy biały kolor dla tekstu */
    margin: 0;
    padding: 0;
}

.kolor16 .bialy p {
    margin: 6px 0;
    line-height: 1.6;
    color: #ffffff !important;
}

/* Styl dla linków - zmieniamy na złoto, które teraz steruje stroną */
.kolor16 .bialy a {
    color: #e6be8a !important; /* Stare złoto zamiast bieli */
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.kolor16 .bialy a:hover {
    /* Zamiast czerwonego (red), który nie pasuje, dajemy jasne złoto/biel */
    color: #ffffff !important;
    background-color: rgba(157, 80, 187, 0.4); /* Fioletowe podświetlenie tła linku */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Kontener dla nowej linii przycisku */
.theme-toggle-container {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    
    /* WYMUSZONE USUNIĘCIE LINII */
    border: none !important;            /* Usuwa wszystkie ramki */
    border-bottom: 0 !important;        /* Specyficznie usuwa dolną linię */
    outline: none !important;           /* Usuwa obrys */
    box-shadow: none !important;        /* Usuwa ewentualny cień, który może wyglądać jak linia */
    background: transparent !important; /* Upewnia się, że tło nie ma innego koloru */
}

/* Twój luksusowy przycisk */
.button-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 38px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #ffdf91;
    color: #ffdf91;
    border-radius: 5px;
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 5px rgba(255, 223, 145, 0.3);
    white-space: nowrap;
    
    /* Mały odstęp od lewej krawędzi, jeśli padding kontenera to za mało */
    margin-left: 5px; 
}

/* Efekt najechania i kliknięcia */
.button-toggle:hover {
    background: #ffdf91;
    color: #1e0a32;
    box-shadow: 0 0 15px rgba(255, 223, 145, 0.6);
}

.button-toggle:active {
    transform: scale(0.95);
    background: #d4af37;
}

/* Ta reguła sprawi, że wszystkie teksty oznaczone tą klasą będą białe */
.tekst-kolorowy {
    color: #ffffff !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: #ffffff !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: Arial, Georgia, Verdana;
    
    /* Tutaj ustawiasz kolor, który chcesz mieć domyślnie (np. biały dla trybu ciemnego) */
    color: #ffffff !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: #FFFFFF !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: #FFFFFF !important;
}



/* Kontener przycisku - czysty, bez linii */
.theme-toggle-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Odstępy: 15px od góry, 15px od lewej, 5px od dołu */
    padding: 15px 0 5px 15px; 
    box-sizing: border-box;
    
    /* Gwarancja braku linii i tła */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Przycisk w nowym stylu */
.button-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 38px;
    
    /* Tło pasujące do kosmosu/fioletu */
    background: rgba(30, 10, 50, 0.6) !important; 
    
    /* Złota ramka - cienka i elegancka */
    border: 1px solid #e6be8a !important;
    color: #e6be8a !important;
    
    border-radius: 8px; /* Lekko większe zaokrąglenie dla nowoczesnego wyglądu */
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    
    /* Delikatna poświata zamiast twardego cienia */
    box-shadow: 0 0 10px rgba(157, 80, 187, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Efekt najechania - rozświetlenie */
.button-toggle:hover {
    background: rgba(157, 80, 187, 0.4) !important; /* Fioletowy blask */
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(157, 80, 187, 0.6);
}

/* Efekt kliknięcia - "wciśnięcie" */
.button-toggle:active {
    transform: scale(0.92);
    background: #e6be8a !important;
    color: #1e0a32 !important;
}





.search-bar {
    width: 100%;
    box-sizing: border-box;
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    /* KOLORY Z KOLOR15 */
    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);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
  }

  .left-items {
    display: flex;
    align-items: center;
  }

  /* Blokujemy rozmiar flagi dokładnie tak jak w Twoim oryginale */
  .left-items img {
    height: 30px !important; 
    width: auto !important;
    margin-right: 5px;
  }

  .search-icon {
    cursor: pointer;
    font-size: 20px;
    margin-left: 5px;
    position: relative;
    top: -3px; 
    color: #e6be8a; /* Złoto dla lupy */
  }

  .date {
    font-weight: bold;
    white-space: nowrap;
    /* KOLOR Z DATY KOLOR15 */
    color: #e6be8a !important; 
    text-shadow: 0 0 8px rgba(157, 80, 187, 0.6);
  }

  /* KONTENER WYSZUKIWARKI - Ukryty domyślnie */
  #search-form-container {
    padding: 15px 20px;
    display: none; /* MUSI BYĆ NONE, aby nie pokazywało się od razu */
    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-top: 1px solid rgba(184, 134, 11, 0.3);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
  }

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

  #search-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  #search-form input[type="text"] {
    flex: 1;
    padding: 8px;
    font-size: 16px;
    margin-right: 10px;
    min-width: 200px;
    /* Styl inputa z kolor15 */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(157, 80, 187, 0.5);
    color: #ffffff;
    border-radius: 5px;
  }

  #search-form button[type="submit"] {
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    /* Styl przycisku z kolor15 */
    background: linear-gradient(to bottom, #b8860b, #8b6508);
    border: 1px solid #ffdf91;
    color: #ffffff;
    border-radius: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  }

  @media (max-width: 600px) {
    #search-form {
      flex-direction: column;
      align-items: stretch;
    }
    #search-form input[type="text"] {
      margin-bottom: 10px;
      margin-right: 0;
    }
    #search-form button[type="submit"] {
      width: 100%;
    }
  }