.body {margin: 0; padding: 0; color: black; background-color: white; font-family: 'Poppins', sans-serif;}

.horni_lista {width: 100%; height: 60px; overflow-x: hidden; position: sticky; top: 0; background: linear-gradient(to bottom, #ffb84f 90%, #EEEEEE 100%); font-family: tahoma; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.horni_lista img {height: 60px; cursor: pointer; }
.horni_lista .mezera {flex-grow: 1;}
.horni_lista .menu_buttons {display: flex; align-items: center;}
.horni_lista .menu_button {height: 60px; padding: 0 20px; transform: skew(-15deg); transition: background-color 1s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; border-left: 1px white solid;}
.horni_lista .menu_button:hover, .active { background-color: white; transition: background-color 0.0s ease;}

.spodni_lista {width: 100%; background: linear-gradient(to top, #ffb84f 90%, #ffffff 100%); display: grid; grid-template-columns: 100px 100px repeat(3, 1fr); grid-template-rows: repeat(2);}
.spodni_lista .cell {box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 5px;}
.spodni_lista .merged {width: 100%; grid-row: span 2;}
.spodni_lista .stav {width: 100px;}
.spodni_lista .cell img {width: 40px; height: 40px; margin: 0 20px 0 20px;}

/* OBECNÉ */
.odkaz_text:link , a:active , a:visited { color: black; text-decoration: none;}
.odkaz_text:hover { color : coral;}

.nadpis {text-align: center; font-size: 2.2em; color: #0d1f3f; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; margin: 40px 0; padding: 10px 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1)); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

.pruh {width: 100%; height: auto; background-color: #ffefd5; margin: 100px auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.pruh a {text-decoration: none; color: inherit; background-color: white; padding: 15px 25px; margin: 10px 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; text-align: center; font-size: 1.0em; transition: background-color 1.0s;}
.pruh a:hover {background-color: #ffcc80; transition: background-color 0.0s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}

.prouzky {margin: 70px auto; width: 80%;}
.prouzky div {padding: 15px 20px; margin: 15px 0; background: linear-gradient(to right, #ffb84f 20%, #EEEEEE 50%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; font-size: 1.1em; line-height: 1.6; color: #333;}

.aktualita {width: 90%; display: flex; align-items: center; margin: 50px auto; padding: 30px; background: linear-gradient(to right, rgba(255, 204, 102, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); border-radius: 10px;}
.aktualita img {width: 250px; height: auto; margin-right: 20px;}
.aktualita-content {flex-grow: 1;}
.aktualita h1 {margin: 0 0 10px 0;}
.aktualita .cena {font-size: 1.5em; font-weight: bold; color: #ff0000;}
.aktualita_big {width: 90%; display: flex; align-items: center; margin: 50px auto; padding: 30px; background: linear-gradient(to right, rgba(255, 204, 102, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); border-radius: 10px;}
.aktualita_big img {width: 90%; height: auto; margin: 5px auto;}
.aktuality {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 90%; margin: 50px auto;}

.menu_linka { width: 100%; border-collapse: collapse; table-layout: fixed; }
.menu_linka td { border-bottom: 3px solid #ccc; text-align: center; padding: 10px; transition: border-color 0.3s; }
.menu_linka td.left, .menu_linka td.right { width: 120px; text-align: center;}
.menu_linka td.middle { font-size: 2em; width: 1px; white-space: nowrap; font-weight: bolder; }
.menu_linka td.spacer { width: 100%; }
.menu_linka td.left:hover, .menu_linka td.right:hover { border-bottom: 3px solid orange; cursor: pointer;}
.menu_linka a { text-decoration: none; color: inherit; }
.menu_linka td.aktivni {border-bottom: 3px solid orange;}

.prazdny_pruh {width: 100%; height: 500px;}

/* HOME PAGE */
.zavreno {width: 100%; height: 2em; margin: 10px auto; text-align: center; color: orangered;}

.slider { position: relative; width: 100%; overflow: hidden; height: 520px; }
.slider-images { display: flex; transition: transform 1s ease-in-out; width: 100%; height: auto;}
.slider img { width: 100%; height: auto;}
.slider-images a { width: 100%; height: 100%; flex-shrink: 0; }

.uvod {display: flex; width: 90%; margin: 0 auto;}
.uvod_left {flex: 1; padding: 20px;}
.uvod_right {flex: 1; padding: 20px; text-align: center;}
.uvod_right img {width: 60%; height: auto;}
.uvod .odstavec {font-size:1.4em; text-align: justify; text-indent:50px;}

.cedule {margin: 100px auto; display: flex; justify-content: center; gap: 20px;}
.cedule div {background-color: #f7f7f7; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); padding: 20px 30px; text-align: center; font-family: 'Poiret One', cursive; font-size: 1.5em; display: flex; align-items: center; justify-content: center;}
.cedule span {color: #0032a5; font-size: 2em; padding-right: 20px;}

.oteviracka {margin:30px auto; padding: 50px 0; display: flex; justify-content: center; width:100%; text-align:center; background-color: rgb(250,253,242); border-bottom: 1px solid rgb(221, 221, 221); border-top: 1px solid rgb(221, 221, 221);}

/*SLUŽBY a DOPLŇKY*/
.sluzby-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px auto; width: 100%; }
.sluzby-card { display: flex; width: 75%; height: 350px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 25px; }
.sluzby-container .klikaci {cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;}
.sluzby-container .klikaci:hover {background-color: #f0f0f0; transform: scale(1.05);}
.sluzby-card-left { flex: 1; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sluzby-card-left img { width: 90%; height: auto; max-width: 350px; object-fit: contain; }
.sluzby-card-right { flex: 2; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.sluzby-card-right img {width: auto; height: 72px;}
.sluzby-card-right .repliky img {cursor: pointer;}
.sluzby-card-right h2 { font-size: 1.5em; font-weight: bold; color: #333; margin: 0 0 10px; align-self: center; text-align: center; }
.sluzby-card-right p { margin: 0; margin-bottom: 1em; text-align: justify; }
.sluzby-card-right .cenovka { font-weight: bold; color: #d80000; font-size: 1.2em; }
.sluzby-card-right .zvyrazneni {font-weight: bold; color: #540505; align-self: center;}
.sluzby-card-right ul {list-style-type: none; padding: 0; margin: 10px 0;}
.sluzby-card-right ul li {padding: 2px 0; color: #0d1f3f;}
.sluzby-card-right ul li::before {content: '•'; color: #ff4500; font-size: 1.3em; font-weight: bold; display: inline-block; margin-right: 0.5em; }
#modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; cursor: pointer; z-index: 1000; }
#modal img { max-width: 80%; max-height: 80%; border-radius: 10px; }
.sluzby_clanek {margin: 50px 0; padding: 50px 10px; background-color: whitesmoke; text-align: center;}
.sluzby_clanek p {text-align: justify; padding: 10px 20%;}
.sluzby_kontakt {margin: 50px auto; display: flex; width: 90%; gap: 20px;}
.sluzby_kontakt a {width: 400px; display: flex; text-align: center; align-items: center; padding: 15px; border-radius: 10px; background-color: cornsilk; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-decoration: none; color: black; transition: background-color 0.3s ease;}
.sluzby_kontakt a:hover {background-color: #ffe4ad;}
.sluzby_kontakt .icon {font-size: 3em; margin-right: 25px;}

/*KARTY SKÚTRU, MOTOREK, atd*/
.product {display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; padding: 20px; max-width: 80%; margin: 0 auto;}
.product_card {width: 320px; border-radius: 12px; overflow: hidden; background: #f9f9f9; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;}
.product_card:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(231, 151, 0, 0.5);}
.product_card .name {font-family: 'Helvetica Neue', sans-serif; font-size: 1.3em; font-weight: 600; color: #333; margin: 15px 15px 5px; text-align: center;}
.product_card .picture {width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s ease;}
.product_card:hover .picture {transform: scale(1.05);}
.product_card .price {font-size: 1.4em; font-weight: bold; color: #e67e22; text-align: center; margin: 15px 0;}
.product_card .sale {text-decoration: line-through; color: #bbb; margin-right: 8px;}
.product_card .spec {display: flex; justify-content: space-between; font-size: 0.9em; color: #666; padding: 0 15px; margin-bottom: 15px;}
.product_card .spec span {background: #f1f1f1; border-radius: 8px; padding: 6px 10px;}
.product_card .stav {display: flex; justify-content: center; gap: 8px; padding: 10px 0; background-color: #fafafa; border-top: 1px solid #eee;}
.product_card .stav div {font-size: 0.8em; font-weight: 600; color: white; border-radius: 20px; padding: 4px 12px;}
.product_card .stav .skladem {background-color: rgba(76, 175, 80, 0.5);}
.product_card .stav .sleva {background-color: rgba(255, 87, 34, 0.5);}
.product_card .stav .vystaveno {background-color: rgba(33, 150, 243, 0.5);}
.product_card .stav .novinka {background-color: rgba(255, 193, 7, 0.5);}

.porovnavaci_tabulka {width: 100%; border-collapse: collapse; margin: 20px auto; background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.porovnavaci_tabulka th {background-color: #f0f0f0; font-weight: bold; padding: 10px; text-align: left; color: #333; font-size: 0.9em;}
.porovnavaci_tabulka th:hover {cursor: pointer; color: coral;}
.porovnavaci_tabulka td {padding: 10px; text-align: left; border-bottom: 1px solid #ddd; color: #555;}
.porovnavaci_tabulka tbody tr:nth-child(even) {background-color: #f3f3f3;}
.porovnavaci_tabulka tbody tr:hover {background-color: #eaeaea; cursor: pointer;}
.porovnavaci_tabulka .porovnani_model {font-weight: bold;}
.porovnavaci_tabulka .porovnani_cena {font-weight: bold; color: #ff0000;}

/*KONTAKTY*/
.kontakty-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px auto; width: 95%; }
.kontakty-card { display: flex; width: 550px; height: 200px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 25px; }
.kontakty-container .klikaci {cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;}
.kontakty-container .klikaci:hover {background-color: #f0f0f0; transform: scale(1.05);}
.kontakty-card-left { flex: 1; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kontakty-card-left img { width: 80%; height: auto; max-width: 150px; object-fit: contain; }
.kontakty-card-right { flex: 2; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.kontakty-card-right img {width: auto; height: 72px;}
.kontakty-card-right h2 { font-size: 1.3em; margin: 0 0 10px; font-weight: bold; color: #333; }
.kontakty-card-right p { margin: 0; font-size: 1em; color: #555; line-height: 1.6; text-align: center; }

/*KARTA*/
.horni_lista_karty {width: 100%; height: 70px; background-color: rgba(255, 255, 255, 0.8);  display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 0 10px;}
.horni_lista_karty .left-content {display: flex; gap: 10px;}
.horni_lista_karty a {text-decoration: none; color:inherit; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-size: 1em; cursor: pointer; transition: background-color 1.0s}
.horni_lista_karty a:hover {background-color: rgb(255, 204, 102); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.horni_lista_karty .zpet {margin-right: 50px;}
.horni_lista_karty .right-content {display: flex; align-items: center; margin: 0 50px;}
.horni_lista_karty .price {font-size: 2.3em; padding-right: 20px;}
.horni_lista_karty .price_old {font-size: 2.3em; padding-right: 20px; color: darkgrey; text-decoration: line-through;}
.horni_lista_karty .stav {display: flex; flex-direction: column; height: 60px; justify-content: center;}
.horni_lista_karty .stav div {background-color: rgba(255, 204, 102, 0.7); color: black; border-radius: 5px;padding: 5px 10px;margin: 2px 0; text-align: center; font-size: 0.5em; font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.horni_lista_karty .stav .skladem { background-color: rgba(76, 175, 80, 0.7);}
.horni_lista_karty .stav .sleva { background-color: rgba(255, 87, 34, 0.7);}
.horni_lista_karty .stav .vystaveno { background-color: rgba(33, 150, 243, 0.7);}
.horni_lista_karty .stav .novinka { background-color: rgba(243, 252, 53, 0.7);}

.karta {margin:30px auto; width:100%; height:300px; text-align:center; background: linear-gradient(to left, #e8e8e8 0%, #ffffff 50%); box-shadow: 0 4px 8px 0 rgb(0, 0, 0), 0 6px 20px 0 rgb(0, 0, 0);}
.karta_nazev {font-size: 3em; font-weight: bolder; font-family: 'Codystar';}
.karta_nazev_model {color: red;}
.karta img {width: auto; height: 300px;}

.parametr {margin:30px auto; width:100%; height:150px; text-align:center; background-color: white;}
.parametr div {background-color: rgb(255, 239, 204); border: 2px dashed rgb(255, 207, 102); border-radius: 10px; padding: 25px 15px; color: black; text-align: center; text-decoration: none; font-weight: bolder; display: inline-block; font-size: 16px; margin: 10px; transform: skew(-20deg);}

.prednosti {background-color: rgb(250, 253, 242); padding: 20px 0; width: 100%; text-align: center; border-bottom: 1px solid rgb(221, 221, 221); border-top: 1px solid rgb(221, 221, 221);}
.prednosti h2 {margin-bottom: 20px;}
.prednosti ul {list-style-type: circle; padding-left: 0; display: inline-block; text-align: left;}
.prednosti li {font-size: 1.5em; margin: 10px 0;}

.barva_modelu {margin:30px auto; width:100%; text-align:center; background-color:white;}
.barva_modelu h2 {margin-bottom:40px;}
.barva_modelu .barvy {display:flex; justify-content:center; flex-wrap:wrap; gap:15px;}
.barva_modelu .barvy div {width:100px; height:50px; display:flex; justify-content:center; align-items:center; font-size:1em; color:black; font-weight:bold; border-radius:5px; box-shadow:0 4px 8px rgba(0, 0, 0, 0.55); position:relative;}

.popis {margin:30px auto; width:100%; height:350px; text-align:center; background-color: rgb(250,253,242); border-bottom: 1px solid rgb(221, 221, 221); border-top: 1px solid rgb(221, 221, 221);}
.popis p {padding:10px 10%; font-size:1.3em; text-align:justify; text-indent:50px;}

.fotky {margin:30px auto; width:100%; text-align:center; background-color: white;}
.fotky img {margin:5px; width:300px; height:225px; box-shadow: 0 4px 8px 0 rgb(0, 0, 0), 0 6px 20px 0 rgb(0, 0, 0); transition: 0.4s; border-radius: 10px; transform: skew(-10deg);}
.fotky img:hover {box-shadow: 0 4px 8px 0 rgb(255, 204, 102), 0 6px 20px 0 rgb(20, 50, 60);}

.video_modelu {display: block; width: 800px; height: auto; margin: 50px auto;}

/* VYŘAZENÉ */