body{

background:#0b0b0d;

color:white;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;

margin:0;

padding: 0;

}



header{

text-align:center;

}



.logo{

width:120px;

margin-bottom:10px;

}



h1{

font-size:48px;

letter-spacing:1px;

margin:10px 0;

}



.subtitle{

color:#888;

font-size:18px;

}



.offer{

max-width:900px;

margin:auto;

padding:20px;

}



.spider{

background:#151518;

border-radius:14px;

padding:22px;

margin:15px 0;

display:flex;

justify-content:space-between;

align-items:center;

transition:0.25s;

}



.spider:hover{

transform:translateY(-3px);

background:#1c1c21;

}



.spider a{

color:#7fb2ff;

font-size:18px;

font-weight:600;

text-decoration:none;

}



.info{

color:#9a9a9a;

}



.price{

color:#66ffa6;

font-weight:bold;

}



.species{

margin-top:80px;

text-align:center;

}



.speciesGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:20px;

max-width:900px;

margin:auto;

margin-top:30px;

}



.speciesGrid div{

background:#151518;

padding:18px;

border-radius:12px;

transition:0.2s;

}



.speciesGrid div:hover{

background:#1c1c21;

}



.contact{

margin-top:80px;

background:#121214;

text-align:center;

padding:60px;

}



footer{

text-align:center;

padding:30px;

color:#666;

}


.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:15px;

margin-top:30px;

}

.gallery img{

width:100%;

border-radius:12px;

transition:0.3s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.05);

}

.spiderAnimation{

font-size:40px;

margin-top:20px;

animation:spiderDrop 4s infinite ease-in-out;

}

@keyframes spiderDrop{

0%{

transform:translateY(-20px);

}

50%{

transform:translateY(10px);

}

100%{

transform:translateY(-20px);

}

}


.thumb{

width:60px;

height:60px;

object-fit:cover;

border-radius:8px;

margin-right:15px;

}


.brand{

display:flex;
gap:15px;

}

.logo{

height:200px;
width: 200px;

}

.brandText h1{

margin:0;
font-size:60px;

}

.brandText p{

margin:0;
opacity:0.7;
display:flex;
gap:15px;
}


.speciesDetail{

display:flex;
gap:40px;
align-items:flex-start;
margin-top:40px;

}

.speciesPhoto{
width:320px;
border-radius:12px;
margin-top:0;
}

.speciesInfo{



background:#151518;

padding:25px;

border-radius:14px;

box-shadow:0 8px 20px rgba(0,0,0,0.4);

height:fit-content;

font-size:16px;
line-height:1.7;


}

.speciesInfo h2{
color:#9ec5ff;
margin-top:0;
margin-bottom:15px;
}

.speciesPhoto{

width:320px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);

}


h3{
margin-top:30px;
margin-bottom:10px;
}

p{

margin-bottom:12px;
line-height:1.6;

}

/* Zarovnat celý blok vlevo, aby text byl vlevo stránky */
.offer {
    max-width: 900px;  /* můžeš ponechat, aby blok nebyl příliš široký */
    margin-left: 0 !important;   /* úplně vlevo */
    margin-right: auto !important;
    text-align: left !important; /* vše uvnitř vlevo */
    padding: 20px;
}

/* Nadpis a text popisu chovu */
.offer h3,
.offer .care {
    text-align: left !important;  /* zarovná text a nadpis vlevo */
    margin-left: 0 !important;    /* odstraní jakýkoli posun */
}


/* kontejner pavouků */
#spiderList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* řádek pavouka jako odkaz */
.spider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #ccc;
  text-decoration: none; /* odstraní podtržení odkazu */
  color: inherit;        /* text stejné barvy jako okolí */
  transition: background 0.2s;
}

.spider:hover {
  background: rgba(0,0,0,0.05); /* lehce šedý overlay, téměř neviditelný */
}

.spider .name {
  flex: 2;
}

.spider .info {
  flex: 1;
  text-align: center;
}

.spider .price {
  flex: 1;
  text-align: right;
}



/* DETAIL STRÁNKY DRUHU */

/* horní 3 sloupce */

.speciesDetailTop{
display:grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap:20px;

max-width:1200px;
margin:50px auto;
padding:0 20px;

align-items:start;
}


/* levý sloupec */


.speciesInfo h2{
margin-bottom:15px;
}


/* prostřední blok */

.characteristics{

background:#151518;

padding:25px;

border-radius:14px;

height:fit-content;

box-shadow:0 8px 20px rgba(0,0,0,0.4);

}

.characteristics h3{
margin-top:0;
color:#9ec5ff;
}


/* obrázek */

.speciesPhoto{

width:100%;

max-width:340px;

border-radius:14px;

box-shadow:0 15px 40px rgba(0,0,0,0.6);

align-self:start;
}



/* spodní text */

.speciesText{

max-width:1000px;

margin:40px auto;

padding:0 20px;

line-height:1.7;

}

.speciesText h3{

margin-top:35px;

color:#9ec5ff;

}


/* box textu */

.care{

background:#151518;

padding:18px;

border-radius:12px;

border-left:4px solid #7fb2ff;

margin-bottom:15px;

}


/* mobil */

@media (max-width:900px){

.speciesDetailTop{

grid-template-columns:1fr;

}

.speciesPhoto{

max-width:380px;

}

}


.rating{
position:relative;
margin-bottom:10px;
cursor:help;
}

.tooltip{
position:absolute;

left:240px;   /* vzdálenost od textu */
top:-5px;

background:#1c1c21;
padding:12px 14px;
border-radius:10px;

font-size:14px;
line-height:1.6;

box-shadow:0 10px 25px rgba(0,0,0,0.6);

opacity:0;
pointer-events:none;

transition:0.2s;

min-width:220px;

z-index:100;
}

.active{
color:#9ec5ff;
font-weight:600;

background:#2a2a35;
padding:2px 6px;
border-radius:6px;
}

.rating:hover .tooltip{
opacity:1;
}






/* kurzor nad obrázkem */
.speciesPhoto {
  cursor: zoom-in;
  transition: transform 0.2s;
}

.speciesPhoto:hover {
  transform: scale(1.02);
}

/* MODAL */
.modal {
  display: none; /* skryto defaultně */
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);

  justify-content: center;
  align-items: center;
}

/* MODAL OBSAH */
.modal-content {
  max-width: 95%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.9);

  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-content:hover {
  transform: scale(1.03); /* lehké zvětšení při hover */
}

/* close button */
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover {
  color: #ff6666;
}

/* caption skryto */
#caption {
  display: none;
}




/* záhlaví stránky */
header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
  overflow:hidden;
}

/* wrapper nadpisu */
.speciesHeader {
  margin: 0;   /* odstraní mezeru h1 */
  padding: 0;
  line-height: 0; /* odstraní i malou mezeru pod obrázkem */
}

/* banner obrázek */
.speciesHeader img {
  display: block;
width:100%;
max-width:900px;
margin-top:-70px;
margin-bottom:-100px;
}

/* odstraní mezeru mezi bannerem a prvním obsahem */
section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

section:first-of-type h2 {
  margin-top: 0;
}