/* ---------------- modern (minimal) ---------------- */
/*
Primární zelená: #2F5D3A
Tmavá zelená: #1B3323
Přírodní hnědá: #6B4A2B
Světlé pozadí: #F6F5F1
Akcent (např. tlačítka): tlumená modrá vody #4FA3A5
*/
    :root{
      --bg:#8d5a29; --card:#fff; --text:#222; --muted:#F6F5F1; --accent:#1f8f6b; --radius:14px;
      --maxw:1100px;
	background-image: linear-gradient(rgba(27, 51, 35, 0.2), rgba(59, 44, 31, 0.2))
		, url('../images/terasa.jpg');	/* Cesta k obrázku */
	background-attachment: fixed; 			/* Obrázek se při rolování nepohne */
	background-size: contain;               	/* Obrázek pokryje celou plochu */
	background-repeat: no-repeat; 			/* Obrázek se nebude opakovat */
	background-position: center top;  		/* Vycentrování ve fixním okně */
	background-color: var(--bg);       		/* Barva pro vyplnění prázdných míst */

    }
    *{box-sizing:border-box}
    body{
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0;
	}
    .container{
	max-width:var(--maxw);
	margin:0 auto;
	padding:12px
	}
    header{
	display:flex;
	flex-wrap: wrap; 
	--align-items:flex-start;		/* Zarovná všechny položky nahoru */
	--justify-content:space-between;
	--grid-template-columns: 2fr 380px;
	--display:grid;
	grid-template-columns:1fr;	
	}
@media (min-width: 900px) {
    header {
        grid-template-columns: 2fr 380px;
    }
}

    .brand{
	align-items:center;
	margin-right: 18px;
	margin-bottom: 24px;
	}
    .logo{
	width:270px;
	min-height:222px;
	max-height:222px;
	border-radius:var(--radius);
	--background:linear-gradient(135deg,var(--accent),#2fb07a);
	background-image: url('../images/logo.png');	/* Cesta k obrázku */
   	background-repeat: no-repeat;         		/* Obrázek se nebude opakovat */
	background-size: contain;               	/* Obrázek pokryje celou plochu */
	background-position: center top;          		/* Vycentrování obrázku */
	padding:24px;
	}
    nav a{
	margin-left:18px;
	text-decoration:none;
	color:var(--muted);
	}
    .hero{
	min-height:222px;
	max-height:222px;
	width: 100%;
	display:grid;
	grid-template-columns:1fr;
	--gap:18px;
	background-image:url('../images/2.jpg');
	background-size:cover;
	background-position:center;
	border-radius:var(--radius);
	padding:24px;
	color:white;
	flex: 1 1 300px; 
	margin-bottom: 24px;
	}
    .hero .overlay{
	background:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0.5));
	padding:12px;
	border-radius:12px
	}
    h1{
	margin:0;
	font-size:28px
	}
    h2{
	margin:10px;
	}
    .lead{
	margin-top:8px;
	color:rgba(255,255,255,0.9)
	}
    .btn{
	display:inline-block;
	padding:10px 16px;
	border-radius:10px;
	background:var(--accent);
	color:#fff;
	text-decoration:none;
	margin-top:12px;
	opacity: 1;		/*nastavení průhlednosti divu*/
	}
    main{
	display:grid;
	grid-template-columns:1fr;
	gap:24px;
	}
    .grid-2{
	display:grid;
	grid-template-columns:1fr;
	gap:18px;
	}
    @media(min-width:900px){.grid-2{grid-template-columns:2fr 380px}}
    .card{
	--background:var(--card);
	background-color: rgba(255,255,255,0.9);	/*bílá s průhledností 90%*/
	border-radius:var(--radius);
	padding:18px;
	box-shadow:0 6px 18px rgba(20,20,30,0.06);
	--opacity: 0.90;		/*nastavení průhlednosti divu*/
	}
    .features{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
    .feature{flex:1 1 140px}
/* Gallery */
    .gallery{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:15px
	}
    @media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
    .gallery img{
	width:100%;
	height:160px;
	object-fit:cover;
	border-radius:10px
	}
    .gallery img:hover {
    	transform: scale(1.05);
	}
/* Lightbox */
   .lightbox {
   	display: none;
   	position: fixed;
    	inset: 0;
	background-color: var(--bg); 
	background-image: linear-gradient(rgba(27, 51, 35, 0.2), rgba(59, 44, 31, 0.2));
    	justify-content: center;
    	align-items: center;
	}
    .lightbox img {
    	max-width: 95%;
    	max-height: 95%;
	}
    .nav {
     	position: absolute;
     	top: 50%;
     	font-size: 50px;
     	color: #fff;
     	cursor: pointer;
     	padding: 10px;
     	user-select: none;
	}
    .prev { left: 20px; }
    .next { right: 20px; }
    .counter {
    	position: absolute;
    	bottom: 20px;
    	color: #fff;
    	font-size: 16px;
    	background: rgba(0,0,0,0.5);
    	padding: 6px 12px;
    	border-radius: 20px;
	}
    .caption {
	position: absolute;
    	top: 20px;
    	color: #fff;
    	font-size: 16px;
    	background: rgba(0,0,0,0.5);
    	padding: 6px 12px;
	border-radius: 20px;
	}
.top-controls {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.top-controls button {
    position: relative;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* Tooltip */

.tooltip {
    position: absolute;
    bottom: -32px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

button:hover .tooltip {
    opacity: 1;
}

    form input, form select, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e6e6}
    form label{font-size:13px;color:var(--muted)}
    .row{display:grid;grid-template-columns:1fr;gap:8px}
    @media(min-width:700px){.row.cols-2{grid-template-columns:1fr 1fr}}
    .map-wrap{
	margin-top:12px;
	}
    .map{
	height: 400px;
	width: 100%;
	}
    footer{
	margin-top:18px;
	padding:18px 0;
	color:var(--muted);
	font-size:14px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	}

    .lang-btn{
	visibility: hidden;
	position: absolute;
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	padding:6px 10px;
	border-radius:8px;
	cursor:pointer;
	color: White;
	}
    .lang-opt{
	color: Black;
	}
    .small-muted{
	font-size:13px;
	color: #222;
	}



/* OVLÁDACÍ PRVKY – moderní design */
.calendar-controls {
    text-align: center;
    margin-bottom: 10px;
}

.calendar-controls button {
    padding: 8px 16px;
    font-size: 14px;
    margin: 0 8px;
    cursor: pointer;
    border-radius: 8px;
    border: none;
    background: #1f8f6b;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: all 0.2s ease-in-out;
    font-weight: 600;
}

.calendar-controls button:hover {
    background: #1f8f6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.calendar-controls button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* GRID 12 MĚSÍCŮ */
.calendar-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    max-width: 1600px;
    margin: 0 auto;
}

/* TABLET */
@media (max-width: 1200px) {
    .calendar-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* MOBIL */
@media (max-width: 768px) {
    .calendar-wrapper {
        grid-template-columns: 1fr;
    }
}

/* MĚSÍC */
.month {
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.month-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 4px;
    text-transform: capitalize;
}

/* GRID DNŮ */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day-name {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
}

/* DEN */
.day {
    height: 26px;
    font-size: 12px;
    text-align: center;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* STAVY */
.free {
    background-color: #a9dd60;
}

.booked {
    background-color: #ff4f4f;
}

/* PŮLDNY */
.half-day {
    background: linear-gradient(
        135deg,
        #ff4f4f 50%,
        #a9dd60 50%
    );
}

.half-day-reverse {
    background: linear-gradient(
        135deg,
        #a9dd60 50%,
        #ff4f4f 50%
    );
}

.empty {
    border: none;
    background: transparent;
}

/* LEGENDA */
.legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px auto 0;
    font-size: 13px;
}

.legend div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#booking{
	visibility:hidden;;
	position: absolute
}