:root {
	--main-color: #000;
}
/* chatbox dočasný kód */
:root {
    /* Skleněné barvy */
    --glass-bg: rgba(255, 255, 255, 0.4); /* Poloprůhledná bílá */
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(12px); /* Síla rozmazání pozadí */
    
    /* Barvy obsahu */
    --ai-text-main: #1e293b;
    --ai-bot-bubble: rgba(255, 255, 255, 0.5);
    --ai-user-bubble: rgba(37, 99, 235, 0.8); /* Trochu průhlednější modrá */
}

/* Pokud máš pod chatboxem pozadí, efekt skla vynikne */
.ai-chat-placeholder.glass-theme {
    width: 100%;
    max-width: 650px;
	margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); /* Podpora pro Safari */
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.chat-header {
    background: rgba(255, 255, 255, 0.2);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}

.bot-info h4 {
    margin: 0;
    font-size: 15px;
    color: var(--ai-text-main);
}

.bot-avatar {
    width: 38px;
    height: 38px;
    background: rgba(37, 99, 235, 0.9);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.chat-window {
    height: 320px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 255, 255, 0.1); /* Velmi jemné prosvětlení */
}

.message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
}

.message.bot {
    background: var(--ai-bot-bubble);
    color: var(--ai-text-main);
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom-left-radius: 4px;
}

.message.user {
    background: var(--ai-user-bubble);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.chat-input-area {
    padding: 16px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--glass-border);
}

.chat-input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--ai-text-main);
    outline: none;
}

.send-btn {
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    color: #475569;
}
/* chatbox dočasný kód konec*/

.bg-wrapper{
    position: relative;
    width: 100%;
    /* Tmavý základ, na kterém obrázek sedí */
    background-color: #cecece !important; 
    padding: 60px 0; /* Trochu vzduchu nahoře a dole */
    overflow: hidden;
}

.bg-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* CESTA K OBRÁZKU */
    background-image: url('/images/bikes/ap6185000ebs01-01-m.png.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    /* FIXACE (Parallax efekt) */
    /* Pokud chceš, aby obrázek stál a grid po něm klouzal, nech 'fixed'. 
       Pokud má scrollovat s webem, dej 'scroll' nebo to smaž. */
    background-attachment: fixed; 

    /* JEMNOST - Tady nastavíš, jak moc má obrázek prosvítat */
    opacity: 0.06; 
    
    z-index: 0;
    pointer-events: none;
}

/* Musíme zajistit, aby obsah (filtry a karty) byl nad obrázkem */
.bg-wrapper > * {
    position: relative;
    z-index: 1;
}
/* BENTO */
/* 1. CELÁ SEKCE - ROZTAŽENÍ A TMAVÝ PODKLAD */
#italky-bento-section {
    
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 60px 0 !important;
    overflow-x: hidden !important;
}

/* 2. GRID KONTEJNER */
/* Specifické nastavení pro čtyři sloupce vedle sebe */
.italky-bento-grid.top-modely {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Čtyři stejné sloupce */
    grid-template-rows: auto;               /* Výška se přizpůsobí obsahu */
    gap: 20px;
}

.italky-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 310px !important;
    gap: 20px !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
	/* MAGICKÁ ŘÁDKA PRO PŘESKLÁDÁNÍ */
    grid-auto-flow: dense !important;
}

/* Resetujeme bento chování pro položky uvnitř top-modely */
.italky-bento-grid.top-modely .bento-item {
    grid-column: span 1 !important; /* Každá karta zabere jen jeden sloupec */
    grid-row: span 1 !important;    /* Každá karta zabere jen jeden řádek */
    min-height: 350px;              /* Sjednotíme minimální výšku, aby to vypadalo dobře */
}

/* Responzivita: Na tabletech 2 a 2 */
@media (max-width: 1024px) {
    .italky-bento-grid.top-modely {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responzivita: Na mobilech vše pod sebou */
@media (max-width: 600px) {
    .italky-bento-grid.top-modely {
        grid-template-columns: 1fr;
    }
}

/* 3. KARTA (BOX) - Světlejší podklad a rohy */
.italky-card {
    /*background-color: #1e1e1e !important; /* Lehce světlejší box */
	transition: transform 0.6s ease, background-color 1s ease-in-out !important;
    border-radius: 25px !important;       /* Výrazné bento zaoblení */
    overflow: hidden !important;          /* Ořízne zoomovaný obrázek */
    /*border: 1px solid rgba(255,255,255,0.05) !important;*/
    position: relative !important;
    /*transition: background-color 0.3s ease !important;*/
	
	/* 1. PRŮHLEDNOST - barva pozadí s Alfou (0.8 = 80 % viditelnost) */
    background-color: rgba(30, 30, 30, 0.3) !important; 
    
    /* 2. BLUR EFEKT - klíč k efektu skla */
    /* Rozmaže to, co je ZA kartou (tvůj obrázek v podkladu) */
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important; /* Pro Safari */

    /* 3. HRANA SKLA - velmi jemný bílý okraj pro definici tvaru */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    
    /* 4. STÍN - aby karta "seděla" v prostoru */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;

    transition: all 0.4s ease-in-out !important;
}
.italky-card:hover {
    /* Jemné zesvětlení na antracitovou */
    background-color: rgba(255,255,255,0.2) !important; 
    /* Volitelně: jemný zářící okraj pro ještě lepší Bento feeling */
    border: 1px solid rgba(0,0,0,0.04) !important;
}
.italky-card.wide { grid-column: span 2 !important; }
.italky-card.tall { grid-row: span 2 !important; }
.italky-card.big  { grid-column: span 2 !important; grid-row: span 2 !important; }

/* 4. KONTEJNER OBRÁZKU */
.italky-image-box {
    height: 85% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* 5. OBRÁZEK - Menší velikost a zobrazení celé motorky */
.italky-image-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Motorka se vždy celá vejde */
    padding: 1px !important;       /* Větší prostor kolem motorky, aby byla menší */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tall .italky-image-box img,
.wide .italky-image-box img,
.big .italky-image-box img {
	width: 100% !important;
	height: 100% !important;
}

/* ZOOM EFEKT - Motorka se zvětší, ale padding ji udrží v boxu */
.italky-card:hover .italky-image-box img {
    transform: scale(1.06) !important;
}

/* 6. TEXTOVÁ ČÁST (POD OBRÁZKEM) */
.italky-info-box {
    height: 15% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 5px 15px !important;
}

/* 7. TEXTY - Bílá, bez linek a centrovaná */
.italky-info-box h3 {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
	transition: color 0.8s ease;
}
/* Změna barvy nadpisu při hoveru karty */
.italky-card:hover h3 {
    color: #111 !important;
    transition: color 0.8s ease; /* Plynulý přechod barvy */
}

/* Zrušení modrého podtržení u odkazu */
.italky-anchor {
    text-decoration: none !important;
    border: none !important;
    display: block !important;
    height: 100% !important;
}

/* Pojistka pro schovávání karet při filtraci */
.italky-card[style*="display: none"] {
    display: none !important;
}

/* ============================================================
   BENTO MODIFIKÁTORY (TALL, WIDE, BIG)
   ============================================================ */

/* 1. WIDE - Box přes 2 sloupce (šířka) */
.italky-card.wide {
    grid-column: span 2 !important;
}

/* 2. TALL - Box přes 2 řádky (výška) */
.italky-card.tall {
    grid-row: span 2 !important;
}

/* 3. BIG - Box přes 2 sloupce i 2 řádky (2x2) */
.italky-card.big {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
}

/* ÚPRAVA VNITŘKU PRO BIG/TALL VARIANTY */
/* U velkých boxů chceme, aby obrázek zabíral více prostoru */
.italky-card.tall .italky-image-box,
.italky-card.big .italky-image-box {
    height: 80% !important; /* Více místa pro fotku ve velkém boxu */
}

.italky-card.tall .italky-info-box,
.italky-card.big .italky-info-box {
    height: 20% !important;
}

/* ============================================================
   RESPONZIVITA PRO VARIANTY
   ============================================================ */

/* Na tabletech (2-3 sloupce) zrušíme Wide/Big, aby se to nerozbilo */
@media (max-width: 1100px) {
    .italky-card.wide, 
    .italky-card.big {
        grid-column: span 1 !important; /* Vrátíme na standardní šířku */
    }
}

/* Na mobilech (1 sloupec) zrušíme i Tall */
@media (max-width: 600px) {
    .italky-card.tall, 
    .italky-card.big {
        grid-row: span 1 !important;
        height: 320px !important; /* Fixní výška pro mobil */
    }
}

/* 8. RESPONZIVITA */
@media (max-width: 1500px) { .italky-bento-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 1100px) { .italky-bento-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 800px) { .italky-bento-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 500px) { .italky-bento-grid { grid-template-columns: 1fr !important; } }

#portfolio-filter li.active a {
    color: #e31e24 !important; /* Italská červená pro aktivní volbu */
    font-weight: 800 !important;
    border-bottom: 2px solid #e31e24 !important;
}
/* BENTO END */
/*
.form-control {
	background-color: #121212;
	color: #fff;
}
.form-control:disabled {
	background-color: #000;
}
.form-control:focus {
	background-color: #303030;
	color: #fff;
}
*/
.motoguzzi {
	--main-color: rgba(0,0,0,1);
	--main-bg: rgba(0,0,0,0.08);
}
.aprilia {
	--main-color: rgba(226,6,23,1);
	--main-bg: rgba(226,6,23,0.08);
}
.vespa {
	--main-color: rgba(117,194,172,1);
	--main-bg: rgba(117,194,172,0.3);
}
.piaggio {
	--main-color: rgba(10,134,200,1);
	--main-bg: rgba(10,134,200,0.3);
}
#choose .full-wrapper {
	margin: 0;
}
.subfilter {
	display: inline-block;
	margin-right: 0;
}
/*.subfilter:not(:last-child) {
	margin-right: 2rem;
	
}*/

/* modal opening fix */
#bikeModal {
	height: 100vh;
}
 .modal-fullscreen {
	 height: 100vh;

}
#bikeModal a.btn:hover {
	text-decoration: none;
}
.float-right {
	float: right;
}
.modal-open {
	overflow: hidden !important;
}
/*.modal-body form {
	height: 100vh;
}*/
.works-grid > li:nth-of-type(odd) { 
	background: rgba(0,0,0,.03);
}

.works-grid > li:nth-of-type(even) { 
	background: rgba(0,0,0,.06);
}

.modal-header {
	border-bottom: none;
}
.modal-header .btn-close {
  opacity: 0.8;
  background-color: #fff;
  border: 1px solid green;
}

.modalinside .bikebox {
	background: rgba(0,0,0,.05);
	height: calc(100vh - 1.8em);
	min-height: 100%;
	padding: 2rem;
	overflow: auto; 
	border-right: 2px solid rgba(255,255,255,.06);
}
.modalinside .row {
	margin-left: 0;
	margin-right: 0;
}
.modal-fullscreen .modal-header {
	position: fixed;
	top: 0.5em;
	right: 1em;
	z-index: 10000;
}
.modal-body {
	width: 100%;
	height: 100vh;
	padding: 0;
}

.modal-content {
	width: 100%;
	height: 100vh !important;
	position: absolute;
	display: block;
	background: transparent;
}

.modalinside {
  margin-top: 85px;
  width: 100%;
  position: relative;
  overflow: auto;
  border-radius: 4px;
  background: rgba(255,255,255,.95);
}
.modal-body .modalinside {
	border: 1rem solid var(--main-color);
	height: 100vh;
	margin-top: 0px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.modal-body .modalinside {
		height: 100dvh;
	}
}
@-moz-document url-prefix() {
	.modal-body .modalinside {
		height: 100dvh;
	}
}

.modalinside h3 span { border-bottom: 4px solid var(--main-color); }

.pr-20 {
	padding-right: 20px;
}
.height-30 {
	height: 30%;
}
.height-40 {
	height: 40%;
}
.height-50 {
	height: 50%;
}
.height-60 {
	height: 60%;
}
.height-70 {
	height: 70%;
}
.map {
	border-bottom: 1px dashed rgba(0,0,0,.1);
}
.height-100 {
	height: 100%;
}
.dealerlist h3 {
	font-size: 1.5rem;
	margin-bottom: 0;
}
.dolcedealers p {
	margin: 0 0 0 0;
	line-height: .8em;
}
.dolcedealers a {
	font-weight: bold;
	text-decoration: none;
}
p.dolce-text {
	margin: 0 2rem 2rem 2rem;
	padding: 0 0 2rem 0;
	border-bottom: 1px dashed rgba(0,0,0,.15);
	text-align: center;
	line-height: 1.4em;
	font-size: 1rem;
	color: rgba(0,0,0,.66);
}
.dealerlist h3 a {
	padding: 0;
	border-bottom: none !important;
	background: none !important;
}
.dealerlist p {
	margin-bottom: 0;
	font-size: 1rem;
}
.dealerlist .dealer {
	padding: .75rem;
	background: rgba(0,0,0,.02);
	border-bottom: 3px solid rgba(0,0,0,.04);
}
.dealerlist .dealer p {
	margin-left: .8rem;
}
section#akce .dealer {
	margin: .75rem;
	line-height: 2.1em;
}

.dealer a {
	border-bottom: 0;
	background: none;
}
.dealer.active {

}
.mp-responsive{
/*	overflow:hidden;*/
	position:relative;
	height:100%;
}

.overflow-y-scroll {
	overflow-y: scroll;
}
.pl-0 {
	padding-left: 0;
}
.pr-0 {
	padding-right: 0;
}

.works-filter.subfilter {
	background: rgba(255,255,255,.6);
	padding: .45rem .88rem;
	border-radius: 30px;
	display: inline-block;
	color: #171717;
}
.works-filter a {
	color: #313131;
}
.works-filter a.active:hover {
color: #fff;
}

.home-content {
	filter: drop-shadow(.35rem .25rem 13px rgba(0,0,0,.6));
}
.tpl-progress {
	background: white;
	margin-bottom: 25px;
}

/*.home-section { aspect-ratio: 1920 / 1200; }*/
.home-section {
	height: 100vh; /* Přesně 100 % výšky okna */
    min-height: 600px; /* Pojistka pro velmi nízké displeje, aby se text nepřekrýval */
    
    align-items: center; /* Vycentruje obsah vertikálně */
    justify-content: center; /* Vycentruje obsah horizontálně */
}

@media only screen and (max-width: 800px) {
  .main-nav .nav-logo-wrap { position: absolute; left: 50%; bottom: -80%; }
  .main-nav .nav-logo-wrap .logo { position: relative; left: -50%; }

  .main-nav.small-height .nav-logo-wrap { position: relative; left: 0; bottom: 0; }
  .main-nav.small-height .nav-logo-wrap .logo { left: 0; }
}

.login-screen { border: 2px solid rgba(255,255,255,0.6); padding: 9px 9px 6px 9px; background: rgba(255,255,255, 0.95); border-radius: 5px; }

.progress-bar { background-color: var(--main-color)!important; }
ul.nav li a.active { border-left: 5px solid var(--main-color); color: var(--main-color); }

div.dealer.active { border-right: 5px solid var(--main-color); background: var(--main-bg); }
div.dealer:hover { background: rgba(0,0,0, 0.04); cursor: pointer; }

div.dealer  { position: relative; }
div.dealer small.badge { font-size: 0.8em; position: absolute; bottom: 0.5rem; right: 0.5rem; }

.mapa { height: 100%; width: 100%; position: relative; }
.mapa img { max-width: none!important; }
.akcni-mapa { aspect-ratio: 3/2; }

.smap-defaults .zoom { top: 47px!important; }
.smap-defaults .compass-north { top: 90px!important; }

.required { color: red; }

.languages img { height: 1em; border: 1px solid #555;} 

.works-filter img {
	vertical-align: bottom;
}

.den { width: 14.2%; border: 1px solid #c0c0c0; font-size: 0.8em; float: left; min-height: 6em; }
.den.nazvy { border: 0; min-height: inherit; }
.den h5 { text-align: center; padding: 0.2em; margin: 0; border-bottom: 1px solid #c0c0c0; background: rgba(50,50,50,0.1); }
.den a.model { border-left: 3px solid var(--main-color); padding-left: 3px; }
.den_space_1 { display: none; }
.den_space_3 { width: 28.4%; border: none; }
.den_space_4 { width: 42.6%; border: none; }
.den_space_5 { width: 56.8%; border: none; }
.den_space_6 { width: 71%; border: none; }
.den_space_7 { width: 85.2%; border: none; }
.den .booking { padding: 4px; margin: 4px; background: #fbfbfb; border-radius: 4px; font-size: 0.9em; }
.den_7 { clear: right; }
.den_6,
.den_7 { background: rgba(0,0,0,0.05); }

.work-img { position: relative; }
/*.work-img .sale { background: red; position: absolute; bottom: 35px; right: -5px; padding: 5px; font-weight: bold; font-size: 1.1em; color: #fff; transform: rotate(-25deg); }*/
.work-img .sale {
	position: absolute;
bottom: 2em;
right: 2em;
background: red;
color: white;
padding: .24em .4em;
font-weight: bold;
text-transform: uppercase;
transform: rotate(-15deg);
text-align: center;
font-size: 1.1em;
}

.sale small { font-size: 0.7em; }

.modalinside .sale { background: red;  padding: 5px; font-weight: bold; font-size: 1.1em; color: #fff; margin: 0.5em auto; text-align: center; text-transform: uppercase; }

.sr-only {
	display: none;
}

.disabled-date { color: #f00!important; text-decoration: line-through; }

@media only screen and (max-width: 992px) {
	.modalinside .bikebox {
		height: auto;
	}
	.map-responsive {
		width: 100%;
		height: 30vh;
	}
	.height-30, .height-40, .height-50, .height-60, .height-70, .height-100 {
		height: auto;
		display: block;
	}
	.pr-0 {
		padding-left: 0;
		padding-right: 0;
	}
	.modalinside {
		margin-top: 70px;
	}
	.mobile-on .desktop-nav {
		position: relative;	
	}
}
@media only screen and (max-width: 480px) {
	.works-filter a {
		/*width: auto !important;*/
		width: 100px;
	}
	.full-wrapper {
		overflow: hidden;
	}
}