/* vietnamese */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mavenpro/v33/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nijogp5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mavenpro/v33/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nmjogp5.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mavenpro/v33/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
	width: 100%;
	height: 100%;
}

body { 
	margin: 0px 0px;
	padding: 0px;
	background: #eee;
	text-align: center;
}


div {
/*	border: 1px dotted red;
	margin: -1px;*/
}

body, div, p, td, th { 
	color: #333333;
	font-family: 'Maven Pro',Calibri, 'Arial CE', sans-serif;

	font-size: 18px;
	line-height: 120%;
	z-index: 10;
}

@media (max-width: 768px){
	body, div, p, td, th { 
		font-size: 15px;
	}
}

p {
	margin: 0px;
}
#obsah p {
	text-align: justify;
	margin: 5px 0px;
}
@media (max-width: 768px){
	p, #obsah p {
		/*text-align: left;*/
	}
}


a {
	color: #2460a2;
	text-decoration: underline;
}
a:active,
a:hover {
	color: #237dc7; 
}
a img {
	border: none;
}

a.highlight {
	color: white !important;
	text-decoration: none;
	background: #237dc7; 	
}
#content a.highlight {
	font-size: 105%;
	padding: 20px 30px;
	display: inline-block;
	margin: 20px 0 0 0;
	width: auto;
	min-width: 50px;
	text-transform: uppercase;
}
a.highlight:hover {
	background: #237dc7;  
}

a.zajem.fixed {
	min-height: 60px;
	position: fixed;
	bottom: 0px;
	left: calc(50%-500px);
}
@media (max-width: 1000px){
	a.zajem.fixed {
		position: fixed;
		bottom: 0px;
		left: 0px;
	}
}


.eucookies {
	min-height:30px;
	padding: 16px 65px 10px 10px;
	font-size: 12px;
	color: white;
	position: fixed;
	text-align: center;
	right: 0px;
	bottom: 0;
	z-index: 900;	
}
.eucookies.expanded {
	width: calc(100% - 75px); /* viz padding */
	background: #333333; /*url(../images/back_black_80pct.png);*/
}
.eucookies div,
.eucookies a {
	color: white;
}
.eucookies-ico {
	width: 29px;
	height: 30px;
	background: url(../images/info.png) center center no-repeat;
}

.toTop, .toTop:hover {
	background: #fff url(inc/up.png) center center no-repeat;
	width: 24px;
	height: 30px;
	padding: 12px 15px;
	font-size: 0;
	color: #333333;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 910;
	display: none;
}



img {
	max-width: 100%;
}
#obsah img {
	margin: 25px; 
	max-width: 45%; 
	height: auto; 
	float: right;
}
#obsah .in img {
	max-width: 99%; 
}
@media (max-width: 650px){
	#obsah img {
		float: none; 
		max-width: 95%; 
	}
}
th, td {
	vertical-align: middle;
	text-align: left;
	padding: 5px;
}
th p, td p {
	/*text-align: left;*/
}


@media (max-width: 650px){
	table {
		width: 100%;
	}
	table td, table th {
		float: left;
		width: 100% !important;
	}
	table .spacer {
		display: none;
	}
}


table.table, 
table.notable { 
	width : 100%;
	border-collapse: collapse;
	margin-top : 10px; 
	margin-bottom : 10px;
}
table.table th, 
table.notable th {
	background-image: url('../images/back_semi_dark.png');
	border-top: 1px dotted #ccc;	
	border-bottom: 1px dotted #ccc;	
	padding : 7px 5px 5px 7px;
	font-weight : bold;
}
table.table th,
table.table th p {
	font-size: 14px;
}
table.table td, 
table.notable td {	
	border-bottom: 1px dotted #ccc;
	padding : 7px 5px 5px 7px;
	text-align : left;
}
table.notable,  
table.notable tr, 
table.notable th, 
table.notable td {
	border: 0px solid #ffffff; 
	border: none;
	background-color: transparent;
}



h3 {
	font-size: 28px;
	color: #333333;
	font-weight: normal;
	/*padding: 5px 0;*/
	line-height: 120%;
	text-align: left;
}
.url-_testpodpora h3, 
.url-podpora h3 {
	margin-left: 20px;
	padding: 0.1% 1%;
	color: #448e8c;
	border-bottom: 1px solid  #448e8c;
	font-size: 33px;
}

h4 {
	font-size: 23px;
	color: #333333;
	font-weight: normal;
	margin: 10px 0;
	line-height: 120%;
	text-align: left;
}

h5 {
	font-size: 19px;
	color: #000000;
	font-weight: normal;
	margin: 10px 0;
	line-height: 120%;
	text-align: left;
}

h6 {
	font-size: 15px;
	color: #000000;
	font-weight: normal;
}


h1,
h2 {
	font-size: 33px;
	font-weight: normal;
	line-height: 120%;
	text-align: left;
	display: block;
	clear: both;

	/*padding: 10px 0px 5px 0;	*/
	padding: 0 0 20px 0;
	padding-top: 10px;
	margin: 0px;
}

h2 a {
	text-decoration: none;
	cursor: default;
}


ul {	  
	margin: 10px 0;
	/*padding: 0px;*/
}

#obsah li {
	line-height: 120%;
	padding: 6px 0;
}
#obsah li li {
	padding: 0;
}
/*
@media (max-width: 768px){
	#obsah li,
	#zajem li {
		background: none;
		padding-left: 0;
	}
}
*/
hr {
	height: 5px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #ddd;
	margin-top: 10px;
	margin-bottom: 10px;
	clear: both;
}

.vertical-margins {
	margin: 30px 0;
}

.clearer, .clr, .clear {
	clear: both;
	height: 0px;
	border: none;
	margin: 0px;
	visibility: hidden;
}
.hide  { 
	display: none;
}



.fl {
	float: left;
	margin: 0px 20px 10px 0px;
}
.fr {
	float: right;
	margin: 0px 0px 10px 20px;
}
.fl img,
img.fr {
	margin: 0px 0px 5px 20px;
}
.fr img,
img.fl {
	margin: 0px 20px 5px 0px;
}


.fixWidth {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 8vw;
	text-align: left;
	position: relative;
}


#top {
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	min-height: 65px;
	background: white;
	
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}

.logo {
	float: left;
	margin: 8px 20px 2px -5px;
}
@media (min-width: 768px){
	.logo img {
		width: 25vw;
		max-width: 230px;
	}
}
@media (max-width: 768px){
	#top {
	}
	.logo img {
		width: 200px;
		max-width: 55vw;
		margin: 5px 0 0 0px; 
	}
}

.nav {
	float: right;
	margin: 5px 30px 0 0;
}

@media (max-width: 1000px){
	.isCollapsedMenu .nav {
		max-width: 55vw;
	}
}
@media (max-width: 768px){
	.nav {
		max-width: 90vw;
	}
}
.isNotHome .nav {
	display: none;
}

.nav li {	
	display: block;
	float: left;
	position:relative;
	padding: 0px;
}
.nav li a {	
	display: block;
	padding: 15px 15px 20px 15px;
	color: #333333;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: -0.5px;
}
.nav li a:hover:not(.highlight) {	
	background: #f9f9f9;
	color: #666;
}
.menuCtrl {
	width: 50px;
	height: 50px;
	margin: 10px 0 0 0;
	cursor: pointer;
	float: right;
	background:  url(../images/menuCtrl.png) center center no-repeat;

}


#content {
	z-index: 11;
	position: relative;
	margin: 70px auto 0 auto;
}

#promo {
	background:  #666; /*324F87;*/
}

#promo .nslider_ctch {
	margin: 0 auto;
	max-width: 1500px;
	height: 58.5vw;
	max-height: 900px;
	overflow: overflow; /* ellipsis; */
	position: relative;
}
@media (max-width: 768px){
	#promo {
		display: none;
	}
}
#promo #banner-data {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 700;
	margin: 0px;
}
#promo #banner-data ul,
#promo #banner-data > li > img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 850;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
#promo #banner-data > li > ul {
	display: block;
	margin: 6.1vw 0 0 0;
}
#promo #banner-data > li > ul li  {
	display: block;
	margin:  11vw 7vw;
	line-height: 110%;
	list-style: none;
	text-align: center;
	font-size: 3.5vw; /*4*/
	color: white;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
#promo #banner-data .r-text li  {
	margin-left: 50vw;
	text-align: left;
}
#promo #banner-data .l-text li {
	margin-right: 50vw;
	text-align: right;
}

@media (min-width: 1500px){
	#promo #banner-data > li > ul {
		display: block;
		margin: 225px 0;
	}
	#promo #banner-data > li > ul li  {
		margin:  30px 105px;
		font-size: 52px;
	}
	#promo #banner-data .r-text li {
		margin-left: 750px;
		text-align: left;
	}
	#promo #banner-data .l-text li {
		margin-right: 750px;
		text-align: right;
	}
}
@media (max-width: 768px){
	#promo #banner-data li > h3 {
		font-size: 25px;
	}
}


.banner-ctrl-buts {
	position: absolute;
	z-index: 900;
	bottom: 10px; 
	left: 50%;
	margin-left: -65px;
}
.banner-ctrl-buts .blur {
	opacity: 0.5; 
	filter:alpha (opacity=50);
}
.banner-ctrl-arr {
	position: absolute;
	z-index: 900;
	bottom: 23vw; 
	left: 10px;
	opacity: 0.8; 
	filter:alpha (opacity=80);
}
.banner-ctrl-arr.toNext {
	left: auto;
	right: 10px;
}


#intro  {
	background: #f9e68c; /*#f0e68c; /* url(../images/fade_rl.png) center center;*/
	background-size: contain;	
	border-top: 1px dotted silver;
	text-align: center;
	z-index: 900;
	position: relative;
}
#intro p {
	display: block;
	text-decoration: none;
	line-height: 120%;
	text-align: center;
	font-size: 2.5vw;
	padding: 2.75vw;
}
@media (max-width: 625px){
	#intro p {
		font-size: 15px;
		padding: 2.75vw 0px;
	}
}
@media (min-width: 1000px){
	#intro p {
		font-size: 26px;
	}
}

#fv-arrow {
	position: absolute;
	right: 2vw;
	top: 30px;
	max-width: 15vw;
}
@media (max-width: 768px){
	#fv-arrow img {
		display: none;
	}
}

#obsah-1  {
	background: #666; /*#303333;*/
	background-size: contain;
	text-align: center;
	z-index: 900;
}
#obsah-1 ul {
	padding: 0px;
	margin: 0px;
}
#obsah-1 li {
	display: inline-block;
	vertical-align: top;
	padding: 0px;
}
@media (min-width: 600px){
	#obsah-1 li {
		width: 48%;
	}
}
#obsah-1 li a {
	display: block;
	padding: 2vw;
	margin: 1vw;
	font-size: 3vw;
	color: white;
	text-decoration: none;
	line-height: 120%;
	text-align: center;
}
@media (max-width: 600px){
	#obsah-1 li {
		width: 100%;
	}
	#obsah-1 li a {
		font-size: 18px;
		padding: 10px;
		text-align: center;
	}
	#obsah-1 li a img {
		display: none;
	}
}
@media (min-width: 1000px){
	#obsah-1 li a {
		font-size: 30px;
	}
}

#nabidka  {
	padding: 5vw 0;
}
#nabidka h3 {
	margin-top: 0;
}


.ncol {
	float: left;
}
.ncols_2.type_rows .nitem { width: 50%; }
.ncols_3.type_rows .nitem { width: 33%; }
.ncols_4.type_rows .nitem { width: 25%; }

.nitem {
	float: left;
}
.nitem .in {
	margin: 25px 30px;	
	overflow: auto;
}
@media (max-width: 900px){
	.ncols_2 .nitem, 
	.ncols_3 .nitem, 
	.ncols_4 .nitem {
		width: 99%;		
	}
	.nitem {	height: auto !important; }
}

.nitem li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}


.nitem h3,
.nitem p,
.nitem li {
	text-align: left;
}



.ncols.type_list .nitem {
	clear: both;
	width: 100%;
	max-width: 900px;
}
.ncols.type_list .nitem img {
	float: right;
	width: 250px;
	max-width: 50%;
	margin: -10px 0 5px 1vw;
}

#nabidka .nitem {
	background: #eee;
	border-bottom: 20px #eee solid;
/*	padding: 20px 20px 0 20px;	*/
}
#nabidka .nitem.type_1 {
	background: #fff;	
	border-color: #fff;	
}
@media (min-width: 600px){
	#nabidka  {
		padding: 25px 0;
	}
}
/*
@media (min-width: 800px){
	#obsah-2 .nitem {
		height: 230px;
		overflow: auto;
	}
}*/
#nabidka .nitem li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#nabidka .nitem .in:not(li) {
	font-size: 22px;
}

#nabidka .nitem h3,
#nabidka .nitem p,
#nabidka .nitem li {
	text-align: left;
}

.nfoto_render {
	text-align: center;
}
.nfoto_render img {
	/*margin: 10px !important;*/
}

#ncols_reference {
	background: #eee;
}

/*
#reference  {
	background: #d0d7dd;  	
	background-size: cover; 
	padding: 25px 0 30px 0;
	position: relative;
	z-index: 888;
	text-align: center;
	
}

#reference .but {
	display: none;
}
#reference .banner-ctrl-arr {
	top: 200px; 
}
#reference .expand {
	background: url(../images/expand.png) center center;
	width: 25px;
	height: 25px;
	position: absolute;
	bottom: 14px;
	right: 10px;
	z-index: 999;
}

@media (max-width: 1200px){
	#reference table { 
		padding: 0 4vw;
	}
}
@media (max-width: 650px){
	#reference td img {
		width: 95%;
	}
}
#reference h2 {
	padding: 0 0 20px 0;
}

#ncols_reference .nitem {
	max-height: 300px;
	overflow: auto;
}
*/

.banner-ctrl-view {
	display: inline-block;
	width: 32px;
	height: 18px;
	margin: 5px 1%;
	cursor: pointer;
}
.view-slider {
	background: url(../images/viewr-ctrl-slider.png);
}
.view-grid {
	background: url(../images/viewr-ctrl-grid.png);
}

#obsah {
	padding: 30px 0;
}

#zajem {
	padding: 30px 0;
}
#zajem iframe {
	width: 100%;
	height: 550px;
	border: none;
	margin: 0 0 0 -20px;
}



#kontakt, #footer {
	background: #d2d8c5;  /* #f0e68c;*/
	padding: 50px 0; 
}
#kontakt .fixWidth {	
	color: #666666; 
	/*color: white;  */
	font-size: 16px;
  	text-align: center;
}

#kontakt .kontakt	 { 
  	width: 48%;
}
#kontakt .text	 { 
	font-size: 14px;
  	text-align: center;
}
#kontakt .logo-cll img {
	min-width: 120px;
}
	
@media (max-width: 1200px){
	#kontakt td,
	#kontakt .kontakt	 { 
	  	width: 95%;
	  	display: block;
	  	float: left;
	  	text-align: center;
	}
	#kontakt a[href] {
		display: inline-block;
		min-height: 30px;
	}
	#kontakt .kontakt img {
		display: none;
	}
	#kontakt .spacer {
		height: 5px;
		overflow: hidden;
	}
}

.small, .small p {
	font-size: 14px;
}



.alert {
	background: #ffd2ca;
	width: 96%;
	padding: 1.5% 2%;
	margin: 30px 0;
}
.alert .close {	
 	display: none; 
}
.ok {
	/*background: #c7f5c9;*/
	padding: 1.5% 2%;
	margin: 30px 0;
}

.login fieldset {
	padding: 2%;
}

form#login-form  {
	margin: 20px 0;
	/*
	padding: 15px 25px;
	background: #f6f6f6;
	width: auto;
	*/
}
form#login-form .control-group {
	margin: 10px 0;
}
form#login-form span.add-on {
	display: inline-block;
	width: 200px;
}
form.form-validate input, 
form#login-form input {
	border: 1px solid silver;
	padding: 3px 5px;
	font-family: Calibri, 'Arial CE', sans-serif;
	font-size: 18px;
}

.com_users-login-0 .nav-tabs {
	display: none;
}

.pranostiky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
}

.pranostika, .mesic {
    display: inline-block;
    background: #f4f4f4;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
}

.pranostika:hover {
    background: #e0f0ff;
}

.mesic {
    background: #dfe7ef;
    font-weight: bold;
}




/* ================================================================
   POČASÍ WIDGET — CSS proměnné a rozložení
   ================================================================ */


/* === HLAVNÍ PROMĚNNÉ — upravit zde pro celý widget === */
:root {
    --fs-lg: 22px;     /* nadpisy, teplota */
    --fs-md: 19px;     /* běžný text — zvětšeno */
    --fs-sm: 13px;     /* vítr, oblačnost, hodiny */
    --cols: 5;
    --card-pad: 14px;
    --section-mx: max(16px, 2.5vw);
    --c-primary: #ffffff;
    --c-secondary: #e8eff5;
    --c-muted: #6a7d8e;
}

/* === KONTEJNER === */
.weather-container{
    margin:3vw;
    background:#fff url(inc/up.png) center center no-repeat;
    background-size:cover;
    border-radius:12px;
    overflow:hidden;
}
#weatherApp{
    width:100%;
    background:rgba(75,85,99,0.95);
    padding:20px 0 0;
    color:var(--c-primary);
    box-sizing:border-box;
    overflow-x:hidden;
}
#weatherApp *, #weatherApp *::before, #weatherApp *::after{ box-sizing:border-box; }

/* === TYPOGRAFIE === */
.day-card strong, .day-card .temp, 
.day-card, .dnes-part, .hour-card{ font-size:var(--fs-md); color:var(--c-primary); }
.day-card .wind, .day-card .cloud, .card-date, .dnes-label, .dnes-wind{
    font-size:var(--fs-sm) !important; color:var(--c-secondary);
}
.feels-like{ color:var(--c-secondary); font-size:calc(var(--fs-lg) * 0.72); }

/* Mimo daycards: 25% menší */
.weather-main, .weather-desc, .hourly-top, #mapArea{
    --fs-lg: 17px; --fs-md: 15px; --fs-sm: 11px;
}

/* === DAYCARD GRID === */
.weather-grid{
    display:grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap:0;
}
.weather-grid.has-webcam{ --cols:6; }
/* S webcam: popozítří skrýt */
.weather-grid.has-webcam .day-hide-last{ display:none !important; }
.day-hide-last{ display:none; }

.day-card{
    padding:var(--card-pad);
    text-align:center;
    border-right:1px dotted #ffffff25;
    background:transparent;
    color:var(--c-primary);
    transition:all .25s ease;
    min-width:0; overflow:hidden; word-break:break-word;
}
.day-card strong{ font-size:var(--fs-lg) !important; display:block; }
.card-date{
    font-size:var(--fs-sm) !important; color:var(--c-secondary);
    font-weight:normal; display:block; margin-top:1px;
}
.weather-icon{ font-size:min(60px, 12vw); margin:4px 0; line-height:1.1; }
.temp{ font-size:var(--fs-lg) !important; }
.wind{ font-size:var(--fs-sm) !important; color:var(--c-secondary); }
.cloud{ font-size:var(--fs-sm) !important; color:var(--c-muted); }

/* === WEBCAM === */
.day-card-webcam{ padding:var(--card-pad); overflow:hidden; }
.webcam-img{
    width:100%; height:150px;
    background-size:cover; background-position:center;
    border-radius:6px; background-color:#333;
    cursor:pointer; position:relative; margin-top:10px;
}
.webcam-domain{
    position:absolute; bottom:3px; right:5px;
    font-size:9px; background:rgba(0,0,0,0.5);
    padding:1px 4px; border-radius:3px;
}
.webcam-domain a{color:#aaa !important;text-decoration:none;font-size:9px;}

/* === PANÁČEK === */
.day-card-panacek{ position:relative; display:flex; flex-direction:column; }
.day-card-panacek strong{ margin-bottom:5px; display:block; }
.panacek{
    height:100%; width:auto; max-height:170px; max-width:120px; margin:0 auto; display:block;
    cursor:pointer; transition:opacity 0.25s ease; object-fit:contain;
}
.panacek.big{ height:calc(100% - 40px); width:auto; max-height:220px; max-width:155px; }
.co-na-sebe{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    font-size:var(--fs-sm); color:var(--c-secondary); white-space:nowrap;
}

/* === BOX DNES === */
.day-card-dnes{ padding:var(--card-pad) 10px; }
.dnes-parts{ margin-top:29px !important; }
.dnes-parts{ display:flex; flex-direction:column; gap:3px; }
.dnes-part:hover{ background:rgba(255,255,255,0.12); }
.dnes-next .dnes-label{ color:var(--c-secondary); }
.dnes-label{ font-size:10px !important; color:var(--c-secondary); text-align:left; grid-row:1/3; white-space:nowrap; min-width:22px; }

.dnes-temp{ font-size:13px !important; color:var(--c-primary); font-weight:bold; white-space:nowrap; }



/* === LAYOUT: lokality + hlavní obsah === */
.weather-main{ display:flex; gap:0; align-items:stretch; }
.loc-panel{ max-height:none; }
.weather-right{ flex:1; min-width:0; }

/* ⑦ LOKALITY — šířka = 1 sloupec */
.loc-panel{ padding:10px 8px;
    width:calc(100% / var(--cols));
    flex-shrink:0; border-right:1px solid #ffffff12;
    font-size:var(--fs-sm); color:var(--c-secondary);
    overflow-y:auto; padding:8px 6px;
}
.loc-toggle{ display:none; }
.loc-body{ }
.loc-search-row{ padding:4px 0 8px; }
.loc-search-input{
    width:calc(100% - 6px); padding:4px 5px;
    border:1px solid #555; border-radius:4px;
    background:#1a2332; color:white; font-size:var(--fs-sm);
}
.loc-search-results{ display:block; max-height:100px; overflow-y:auto; }
.loc-group{ color:var(--c-muted); font-size:9px; display:inline; padding:6px 2px 2px; text-transform:uppercase; letter-spacing:0.5px; }
.loc-link{
    display:inline-block; padding:2px 5px; font-size:10px;
    cursor:pointer; color:var(--c-secondary);
    border:1px solid #ffffff0a; border-radius:6px;
    background:rgba(255,255,255,0.03); transition:all .15s;
    white-space:nowrap; margin:1px 0; text-decoration:none;
}
.loc-link:hover{ background:rgba(255,255,255,0.14); color:white; }
.loc-link.loc-active{ background:rgba(255,255,255,0.2); color:white; font-weight:600; border-color:#ffffff44; }

/* ⑧ GRAF + HODINOVÉ BOXY — 1 posuvný celek */
.chart-hourly-scroll{ scrollbar-width:none;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0 max(40px, 3vw) 0 var(--section-mx);
    -ms-overflow-style:none;
}
.chart-area{ height:200px; pointer-events:auto; overflow:visible; }
.chart-hourly-scroll{ min-height:350px; }
.chart-area .chart-wrap{ height:100%; }
.chart-area svg{ height:100%; display:block; }
.hourly-strip{ display:flex; gap:0; overflow:visible !important; overflow-x:visible !important; flex-shrink:0; pointer-events:auto; scrollbar-width:none !important; -ms-overflow-style:none !important; }
.hourly-strip::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }

/* HOUR CARD */
.hour-card{
    width:80px; min-width:80px; flex-shrink:0;
    border:1px dotted #ffffff20; border-radius:0;
    padding:3px 2px; text-align:center;
    background:rgba(255,255,255,0.02);
    font-size:var(--fs-sm); color:var(--c-primary);
}
.hour-card .time{ font-size:var(--fs-sm) !important; color:var(--c-secondary); }
.hour-card .weather-icon{ font-size:28px; margin:2px 0; }
.hour-card .t{ font-size:12px !important; color:var(--c-primary); }
.hour-card .feels-like{ font-size:10px; }
.hour-card .wind{ font-size:9px !important; color:var(--c-secondary); }
.hour-card .cloud{ font-size:10px !important; color:var(--c-primary); }
.hour-panacek{ height:55px; width:auto; display:block; margin:2px auto 0; }
.day-panacek{ height:50px; width:auto; display:block; margin:2px auto 0; }
.day-mode-card{ min-width:90px; }
.day-mode-card .day-panacek{ height:30px; }
.hour-emoji{ font-size:12px; position:relative; top:-2px; }
.ico-ncloud{ font-size:0.7em; letter-spacing:-0.15em; white-space:nowrap; display:inline-block; }

/* ⑨ PŘEPÍNAČE — s okrajem nahoře i dole */
.hourly-top{
    display:flex; gap:4px; justify-content:center;
    padding:12px var(--section-mx) 12px;
    flex-wrap:wrap; align-items:center;
}
.hourly-tab{
    padding:4px 11px; font-size:var(--fs-sm);
    cursor:pointer; border:1px solid #ffffff20;
    border-radius:12px; color:var(--c-secondary);
    background:rgba(255,255,255,0.05); transition:all .15s;
    white-space:nowrap;
}
.hourly-tab:hover{ background:rgba(255,255,255,0.12); color:white; }
.hourly-tab-active{
    background:rgba(255,255,255,0.18); color:white;
    font-weight:600; border-color:#ffffff55;
}

/* ⑩ MAPA */
#mapArea{
    padding:0 var(--section-mx);
    overflow:hidden;
    
    border-radius:8px; overflow:hidden;
}
#mapArea svg{ display:block; width:100%; height:auto; }

/* Mapa ČR: zelené pozadí kolem */
.map-cz-wrap{ background:#2a3038; border-radius:8px; padding:2px; overflow:hidden; max-width:100%; margin:0 auto; }
/* Mapa světa: modré moře */
.map-world-wrap{ background:#0a1830; border-radius:8px; }

/* === POPIS === */
.weather-desc{
    padding:14px 18px; color:var(--c-secondary);
    font-size:var(--fs-md); line-height:1.6;
}
.weather-desc strong{ color:var(--c-primary); }

/* === TOAST / LOG / MODAL === */
.pan-toast{
    position:absolute; top:4px; right:6px;
    background:rgba(0,0,0,0.7); color:white;
    font-size:9px; padding:2px 6px; border-radius:4px;
    opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap;
}
.pan-toast-show{ opacity:1; }
.log-link{
    cursor:pointer; color:#68a; font-size:var(--fs-sm);
    text-decoration:underline; margin-left:8px;
}
.log-link:hover{ color:#8bf; }
.modal{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.6);z-index:1000;
    display:flex;align-items:center;justify-content:center;
}
.modal-box{
    background:#1a2332;color:white;padding:20px;border-radius:12px;
    max-width:900px;width:90%;max-height:90vh;overflow-y:auto;
}

/* ================================================================
   RESPONSIVE — boxy vždy vyplní řádek
   ================================================================ */

/* >1200: 5 boxů (panák+nyní+brzy+zítra+pozítří) */
@media(min-width:1201px){
    :root{ --cols:5; }
}
/* >1400: 6 boxů (+popozítří) */
@media(min-width:1401px){
    :root{ --cols:6; }
    .day-hide-last{ display:block !important; }
}

/* 900-1200: 4 boxy (panák+nyní+brzy+zítra) */
@media(max-width:1200px){
    :root{ --cols:4; }
    .weather-grid.has-webcam{ --cols:5; }
    .day-hide-last{ display:none; }
    .day-hide-md{ display:none; }
}
@media(max-width:1000px){
    .weather-grid.has-webcam{ --cols:4; }
    .weather-grid.has-webcam .day-card-webcam{ display:none; }
}
@media(max-width:900px){
    :root{ --cols:4; --card-pad:10px; }
    .weather-grid.has-webcam{ --cols:4; }
    .day-card-webcam{ display:none; }
    .day-hide-md{ display:none; }
    .day-hide-last{ display:none; }
    /* panacek big sizing only by parent box */
    .weather-icon{ font-size:44px; }
    /* Sidebar kolaps na menších obrazovkách */
    .weather-main{ flex-direction:column; }
    .loc-panel{
        width:100% !important; max-height:none;
        border-right:none; border-bottom:1px solid #ffffff12;
        overflow:visible;
    }
    .loc-toggle{ display:inline; cursor:pointer; color:white; font-size:13px; }
    .loc-top-row{ padding:6px 10px; }
    .loc-body{ display:none; padding:4px 10px; }
    .loc-panel.loc-open .loc-body{ display:block; }
    .loc-panel.loc-open .loc-group{ display:inline; }
    .loc-panel.loc-open .loc-link{ margin:1px; }
    .loc-panel.loc-open .loc-search-input{ width:120px; display:inline-block; vertical-align:middle; }
    .loc-panel.loc-open .loc-search-results{ display:inline; }
    .loc-panel.loc-open .loc-search-row{ display:inline; padding:0; }
}

/* <700: 2 sloupce, brzy+zítra přes celou šířku */
@media(max-width:700px){
    :root{ --cols:2; --fs-lg:18px; --fs-md:13px; --fs-sm:10px; --card-pad:8px; }
    .weather-grid, .weather-grid.has-webcam{ --cols:2; }
    .day-card-webcam{ display:none; }
    .day-hide-md{ display:none; }
    .day-hide-md{ display:none; }
    .day-hide-last{ display:none; }
    /* panacek: sizing by parent box only */
    .weather-icon{ font-size:40px; }
    .weather-main{ flex-direction:column; }
    .loc-panel{
        width:100% !important; max-height:none;
        border-right:none; border-bottom:1px solid #ffffff12;
        overflow:visible;
    }
    .loc-toggle{ display:inline; cursor:pointer; color:white; font-size:13px; }
    .loc-top-row{ padding:6px 10px; }
    .loc-body{ display:none; padding:4px 10px; }
    .loc-panel.loc-open .loc-body{ display:block; }
    .loc-panel.loc-open .loc-group{ display:inline; }
    .loc-panel.loc-open .loc-link{ margin:1px; }
    .loc-panel.loc-open .loc-search-input{ width:110px; display:inline-block; vertical-align:middle; }
    .loc-panel.loc-open .loc-search-results{ display:inline; }
    .loc-panel.loc-open .loc-search-row{ display:inline; padding:0; }
}
@media(max-width:450px){
    :root{ --cols:2; --fs-lg:16px; --fs-md:12px; --fs-sm:9px; --card-pad:6px; }
    .weather-grid, .weather-grid.has-webcam{ --cols:2; }
    /* panacek: sizing by parent box only */
    .weather-icon{ font-size:34px; }
    .hour-card{ min-width:60px; width:60px; }
}

/* S webcam vždy skrýt popozítří */
.weather-grid.has-webcam .day-hide-last{ display:none !important; }

/* Google link in switcher row */
.hourly-top a.hourly-tab{ text-decoration:none; }

/* Google link u lokalit */
.loc-ext{
    font-size:9px; color:var(--c-muted); text-decoration:none;
    opacity:0.4; margin-left:-2px; margin-right:3px;
    vertical-align:middle;
}
.loc-ext:hover{ opacity:1; color:var(--c-secondary); }

/* Dnešní hodinové karty výraznější */
.hour-today{ background:rgba(255,255,255,0.08); }

.tab-pipe{ color:var(--c-muted); font-size:var(--fs-sm); line-height:1; padding:0 2px; user-select:none; }

/* Panáček 35°C+: lupa kurzor */
.panacek-hot{ cursor:zoom-in !important; }

/* Animace přepínání intervalů */
.chart-area, .hourly-strip{ transform-origin:left center; will-change:transform,opacity; }

/* Brzy box */
.dnes-part{ display:flex; align-items:center; gap:4px; padding:3px 6px; border-radius:4px; background:rgba(255,255,255,0.06); cursor:default; }
.dnes-part:hover{ background:rgba(255,255,255,0.12); }
.dnes-ico{ font-size:20px; width:28px; text-align:center; flex-shrink:0; }
.dnes-info{ flex:1; min-width:0; line-height:1.4; }
.dnes-info b{ color:var(--c-primary); font-size:14px; }
.dnes-info small{ color:var(--c-secondary); font-size:11px; }
.dnes-label{ color:var(--c-secondary); font-size:10px; }
.dnes-r2{ color:var(--c-secondary); font-size:10px; }
.dnes-next .dnes-label{ color:var(--c-secondary); }

.loc-top-row{ display:flex; align-items:center; gap:8px; padding:6px; justify-content:center; flex-wrap:wrap; }
.loc-moje{ font-size:11px; font-weight:600; white-space:nowrap; }

.chart-hourly-scroll::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }
.hourly-strip::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }

.map-cz-wrap svg{ background:transparent; }

/* Hint pro scroll/zoom */

/* Brzy: prevent wrapping on narrow screens */
.dnes-info{ white-space:normal; word-break:break-word; }
.dnes-r2{ white-space:normal; display:block; }

/* Webcam source under image */
.webcam-source{ font-size:12px; color:var(--c-primary); text-align:center; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.webcam-source a{ color:var(--c-primary); text-decoration:none; }
.webcam-source a:hover{ color:var(--c-secondary); text-decoration:underline; }

/* Scroll navigace pro mobil */
.scroll-nav{ display:none; justify-content:space-between; padding:0 var(--section-mx); }
.scroll-btn{ width:36px; height:28px; line-height:28px; text-align:center; background:rgba(255,255,255,0.1); border-radius:6px; cursor:pointer; color:var(--c-secondary); font-size:14px; z-index:10; user-select:none; }
.scroll-btn:hover{ background:rgba(255,255,255,0.2); color:white; }
@media(max-width:900px){ .scroll-nav{ display:flex; } }

/* Font size buttons */
.font-btns{ display:inline-flex; gap:2px; }
.font-btn{ display:inline-block; width:36px; height:28px; line-height:28px; text-align:center; font-size:13px; font-weight:bold; color:var(--c-secondary); background:rgba(255,255,255,0.08); border-radius:4px; cursor:pointer; user-select:none; }
.font-btn:hover{ background:rgba(255,255,255,0.2); color:white; }

.loc-current{ font-size:12px; font-weight:bold; color:white; white-space:nowrap; }

/* Time slider */
.time-slider-wrap{ padding:4px var(--section-mx) 2px; }
.time-slider-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.time-slider-label{ font-size:12px; font-weight:bold; color:white; min-width:35px; text-align:center; }
.time-slider{ flex:1; min-width:120px; max-width:300px; accent-color:#4488cc; cursor:pointer; }
.time-slider-btns{ display:flex; gap:3px; }

.time-slider-val{ font-size:11px; color:var(--c-secondary); min-width:80px; }

/* Malá obrazovka s webcam: webcam vidět, zítra schovat */
@media(max-width:700px){
    .weather-grid.has-webcam .day-card-zitra{ display:none !important; }
    .weather-grid.has-webcam .day-card-webcam{ display:block !important; }
}

/* Mobil: graf užší aby odpovídal hodinovkám */
@media(max-width:700px){
    .chart-area{ height:140px; }
    .chart-area svg{ height:140px; }
}

/* Mobilní přepínače: menší, zalamování */
@media(max-width:900px){
    .hourly-top{ flex-wrap:wrap; gap:3px 4px; }
    .hourly-tab{ padding:3px 7px; font-size:11px; }
    #timeLayerTabs{ display:inline; }
    #timeLayerTabs .hourly-tab{ padding:3px 6px; font-size:10px; }
}
@media(max-width:600px){
    .hourly-tab{ padding:2px 5px; font-size:10px; }
    #timeLayerTabs .hourly-tab{ padding:2px 4px; font-size:9px; }
}