/* =========================================================================
   Tmavé téma „Hlubina" pro soutěžní mikrosite.
   Portováno z design projektu ui_kits/soutez/home-dark.html, přizpůsobeno
   reálným třídám/Bootstrapu. Načítá se AŽ ZA main.css (přebíjí), takže řada
   pravidel nese !important (main.css používá !important hojně).
   Fonty Fira Sans / Fira Mono jsou už načtené přes web/fonts/fira.css.
   ========================================================================= */

:root {
	--d-abyss:  #0a1228;
	--d-page:   #0e1733;
	--d-raise:  #16224a;
	--d-surf:   #1b2a55;
	--d-surf-2: #213466;
	--d-line:   rgba(146, 212, 214, 0.16);
	--d-line-2: rgba(255, 255, 255, 0.08);
	--aqua:     #92d4d6;
	--turq:     #2bb0b1;
	--turq-br:  #34c8c9;
	--blue-br:  #3a93d8;
	--green:    #2ab183;
	--txt:      #eaf3f5;
	--txt-dim:  #9fb2c9;
	--txt-mut:  #6f819a;

	--font-sans: 'Fira Sans', sans-serif;
	--font-mono: 'Fira Mono', monospace;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-heavy: 900;
}

/* ---------- globální plocha ---------- */
body {
	background:
		radial-gradient(1200px 600px at 82% -5%, rgba(43,176,177,0.16), transparent 60%),
		radial-gradient(1000px 700px at 4% 30%, rgba(58,147,216,0.12), transparent 55%),
		linear-gradient(180deg, var(--d-page) 0%, var(--d-abyss) 60%, #07101f 100%) !important;
	background-attachment: fixed !important;
	color: var(--txt);
	min-height: 100vh;
}
.container {
	background: transparent !important;
	max-width: 900px;
}
#wrapper { padding-top: 4px; }
hr { display: none; }
a { color: var(--aqua); }
a:hover { color: var(--txt); }

h1, h2, h3 { color: #fff !important; font-weight: var(--fw-regular) !important; }

/* flash zprávy */
.alert { border-radius: 10px !important; border: 1px solid var(--d-line) !important; }
.alert-info    { background: rgba(58,147,216,0.12) !important; color: var(--aqua) !important; }
.alert-success { background: rgba(42,177,131,0.14) !important; color: #7fe3bd !important; }
.alert-warning { background: rgba(219,151,70,0.16) !important; color: #e7b07a !important; }
.alert-danger  { background: rgba(237,131,100,0.16) !important; color: #ff9b7d !important; }
.alert .close { color: var(--txt) !important; opacity: .8; text-shadow: none; }

/* ---------- hlavička / navigace ---------- */
.site-header { padding: 6px 0 0; }
.site-nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 0px 0px;
}
.site-brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-brand-logo { height: 60px; width: auto; display: block; }
.site-brand-text { font: var(--fw-heavy) 24px/1 var(--font-sans); color: #fff; letter-spacing: -0.01em; }
.site-brand:hover { text-decoration: none; }

.nav-menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
	display: inline-block; padding: 10px 14px; text-decoration: none;
	font: var(--fw-medium) 13px/1 var(--font-sans);
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--txt-dim); border-radius: 6px;
	transition: color 140ms ease, background 140ms ease;
}
.nav-menu a:hover { color: var(--txt); background: rgba(255,255,255,0.05); text-decoration: none; }
.nav-menu a.active { color: var(--aqua); }

.nav-burger {
	display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
	align-items: center; justify-content: center; background: rgba(255,255,255,0.05);
	border: 1px solid var(--d-line); border-radius: 9px; cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--txt); border-radius: 2px; }

/* tenký vlnitý oddělovač pod navigací */
.wave-sep {
	height: 20px; margin: 0 0 8px;
	background: url('../images/wave-divider.svg') repeat-x;
	background-size: 20px 20px;
}

/* H1 hero (slogan z grafiky) — pod vlnkou, nad webout panelem */
.hero-title {
	margin: 14px 0 22px;
	font: var(--fw-medium) clamp(28px, 5vw, 44px)/1.1 var(--font-sans) !important;
	color: #fff !important; letter-spacing: -0.01em;
}

/* desktop: menu vždy viditelné (přebít Bootstrap .collapse{display:none}) */
@media (min-width: 768px) {
	.nav-menu.collapse { display: block !important; height: auto !important; }
	.nav-burger { display: none !important; }
}
/* mobil: hamburger + rozbalovací panel (Bootstrap collapse toggluje .in) */
@media (max-width: 767px) {
	.site-nav { flex-wrap: wrap; position: relative; }
	.nav-burger { display: flex; }
	.nav-menu { flex-basis: 100%; }
	.nav-menu ul {
		flex-direction: column; gap: 2px; margin-top: 8px; padding: 8px;
		background: var(--d-raise); border: 1px solid var(--d-line); border-radius: 11px;
		box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	}
	.nav-menu a { display: block; padding: 13px 14px; }
}

/* ---------- Webout: ovládací panel + video ---------- */
.webout-plugin { margin-top: 8px; }
.webout-panel {
	position: relative; z-index: 100; /* drží otevřený dropdown selectu NAD <webout-player> níže */
	background: linear-gradient(180deg, rgba(33,52,102,0.55), rgba(22,34,74,0.55));
	border: 1px solid var(--d-line); border-radius: 14px; padding: 16px;
	backdrop-filter: blur(6px);
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; text-align: left;
}
.webout-name-group { flex: 1 1 100%; min-width: 240px; }      /* select na vlastním řádku (celá šířka) */
.webout-panel .cta { flex: 1 1 auto; min-width: 200px; height: 52px; } /* CTA vyplní zbytek řádku */

/* segmentový přepínač (pohlaví, Trénink/Závod) z nativních radií — bez labelu, úzký */
.seg {
	display: flex; border: 1px solid var(--d-line); border-radius: 9px;
	overflow: hidden; background: rgba(255,255,255,0.04);
}
.webout-panel .seg { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; } /* úzké, stejně široké poloviny napříč jazyky */
.seg .radio-inline {
	flex: 1; margin: 0; padding: 0; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--txt-dim); cursor: pointer;
	font: var(--fw-semibold) 13px/1 var(--font-sans);
	letter-spacing: 0.05em; text-transform: uppercase;
	transition: color 140ms ease, background 140ms ease;
}
.webout-panel .seg .radio-inline { padding: 0 18px; }
.seg .radio-inline + .radio-inline { border-left: 1px solid var(--d-line); }
.seg .radio-inline input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0 !important; }
.seg .radio-inline:has(input:checked) {
	color: #06210f; background: linear-gradient(180deg, var(--aqua), var(--turq));
}

/* CTA „Chci hrát o paddleboard" (a primární tlačítka obecně) */
.cta {
	display: inline-flex; align-items: center; justify-content: center;
	border: none; cursor: pointer; border-radius: 10px; color: #06210f;
	font: var(--fw-bold) 15px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
	padding: 0 24px; height: 54px;
	background: linear-gradient(120deg, var(--aqua), var(--turq-br) 60%, var(--blue-br));
	box-shadow: 0 14px 34px rgba(43,176,177,0.34);
	transition: filter 140ms ease, transform 140ms ease;
}
.cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #06210f; text-decoration: none; }
.cta-block { width: 100%; }

/* rámeček videa (skutečný <webout-player> ho vyplní) */
#webout-player {
	display: block; margin-top: 18px; min-height: 360px;
	border-radius: 14px; overflow: hidden; border: 1px solid var(--d-line);
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(146,212,214,0.30), transparent 55%),
		linear-gradient(180deg, #18406b 0%, #143a78 38%, #16224a 72%, #0e1733 100%);
}

/* bootstrap-select (našeptávač jména) v tmavém */
.bootstrap-select > .btn.dropdown-toggle {
	background: rgba(255,255,255,0.04) !important; color: var(--txt) !important;
	border: 1px solid var(--d-line) !important; border-radius: 9px !important;
	height: 52px; display: flex; align-items: center; box-shadow: none !important;
	padding: 0 16px !important; line-height: 1.2; /* symetrický padding místo .btn-default .5em/.4em z main.css */
}
/* placeholder/hodnota svisle na střed boxu (filter-option jinak vyplní výšku a text je nahoře) */
.bootstrap-select > .btn.dropdown-toggle .filter-option { display: flex; align-items: center; height: 100%; }
.bootstrap-select > .btn.dropdown-toggle:hover,
.bootstrap-select > .btn.dropdown-toggle:focus { border-color: var(--turq-br) !important; outline: none !important; }
.bootstrap-select .filter-option { color: var(--txt); }
.bootstrap-select .dropdown-toggle .caret { border-top-color: var(--aqua); }
.bootstrap-select .dropdown-menu {
	background: var(--d-raise) !important; border: 1px solid var(--d-line) !important; border-radius: 10px !important;
}
.bootstrap-select .dropdown-menu li a { color: var(--txt-dim) !important; }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a { background: rgba(255,255,255,0.06) !important; color: var(--txt) !important; }
/* zvýrazněný řádek (live-search „active" / klávesnice) — tyrkys + tmavý text místo defaultní málo
   kontrastní zelené (světlé písmo na zeleném pozadí); ladí s vybranými segmenty MUŽ/TRÉNINK */
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.active a:hover,
.bootstrap-select .dropdown-menu li.active.selected a { background: var(--turq) !important; color: var(--d-abyss) !important; }
.bootstrap-select .bs-searchbox input {
	background: rgba(255,255,255,0.04) !important; color: var(--txt) !important; border: 1px solid var(--d-line) !important;
}
.bootstrap-select .no-results { color: var(--txt-mut); }

/* ---------- losování: nejbližší (panel) + proběhlá (karty) ---------- */
.section-title {
	margin: 44px 0 18px;
	font: var(--fw-regular) 26px/1.2 var(--font-sans) !important;
	color: #fff !important;
}
.next-draw {
	position: relative; display: flex; gap: 24px; align-items: center; padding: 24px;
	border: 1px solid var(--d-line); border-radius: 14px;
	background:
		radial-gradient(700px 300px at 90% 0%, rgba(43,176,177,0.16), transparent 60%),
		linear-gradient(180deg, rgba(27,42,85,0.6), rgba(14,23,51,0.6));
}
.next-draw-photo {
	flex: 0 0 160px; width: 160px; height: 160px; background: #fff; border-radius: 12px;
	padding: 10px; display: flex; align-items: center; justify-content: center;
}
.next-draw-photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* odkaz na e-shop (draw.url_prize) kolem fotky — klikatelná celá bílá plocha + jemný hover */
.next-draw-photo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 0.15s; }
.next-draw-photo a:hover { opacity: 0.85; }
.next-draw-body { flex: 1; }
.next-draw-date {
	font: var(--fw-semibold) 14px/1 var(--font-sans); letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--aqua); margin-bottom: 10px;
}
.next-draw-name { margin: 0 0 6px !important; font: var(--fw-regular) 22px/1.2 var(--font-sans) !important; color: #fff !important; }
.next-draw-prize { margin: 0; font: var(--fw-light) 15px/1.5 var(--font-sans); color: var(--txt-dim); }
.next-draw-cta { height: 46px; padding: 0 26px; margin-top: 18px; }

.past-draws { display: flex; flex-direction: column; gap: 12px; }
.draw-card {
	background: rgba(27,42,85,0.45); border: 1px solid var(--d-line-2);
	border-left: 4px solid #b8b8b8; border-radius: 11px; padding: 18px 20px;
}
.draw-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.draw-badge {
	display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px;
	font: var(--fw-semibold) 11px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
	background: rgba(255,255,255,0.08); color: var(--txt-dim);
}
.draw-card-date { font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--txt-mut); }
.draw-card-name { margin: 0 0 5px !important; font: var(--fw-regular) 20px/1.2 var(--font-sans) !important; color: #fff !important; }
.draw-card-info { margin: 0; font: var(--fw-light) 14px/1.5 var(--font-sans); color: var(--txt-dim); }
.draw-card-info .lbl-prize { color: var(--aqua); font-weight: 600; }

/* ---------- patička: pobřeží + tmavá lišta + odkazy ---------- */
.site-footer { margin-top: 44px; }
.footer-coast { display: block; width: 100%; height: auto; opacity: 0.6; margin-bottom: -6px; }
.footer-bar {
	background: #0a1228; border-top: 1px solid var(--d-line-2);
	padding: 24px 18px; display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; border-radius: 0 0 12px 12px;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--txt-dim); text-decoration: none; font: var(--fw-regular) 13px/1 var(--font-sans); }
.footer-links a:hover { color: var(--txt); text-decoration: none; }
.footer-copy { color: var(--txt-mut); font: var(--fw-light) 13px/1 var(--font-sans); }

/* ---------- modaly (registrace + cookies) v tmavém ---------- */
.modal-content {
	background: linear-gradient(180deg, var(--d-surf-2), var(--d-raise)) !important;
	border: 1px solid var(--d-line) !important; border-radius: 14px !important;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6) !important; color: var(--txt);
}
.modal-header { border-bottom: 1px solid var(--d-line-2) !important; }
.modal-title { color: #fff !important; font-weight: var(--fw-regular) !important; }
.modal-header .close { color: var(--txt-dim) !important; opacity: 1; text-shadow: none; }
.modal-body { color: var(--txt-dim); }
.modal-footer { border-top: 1px solid var(--d-line-2) !important; }
.modal .control-label {
	color: var(--aqua) !important;
	font: var(--fw-semibold) 11px/1.6 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
}
.modal .form-control {
	background: rgba(255,255,255,0.04) !important; color: var(--txt) !important;
	border: 1px solid var(--d-line) !important; border-radius: 9px !important;
	height: 46px; box-shadow: none !important;
}
.modal .form-control:focus { border-color: var(--turq-br) !important; }
.modal .help-block { color: var(--txt-mut); }
.modal .checkbox label, .modal .consent { color: var(--txt-dim); }
.modal .checkbox a, .modal-body a { color: var(--aqua); }
.modal .has-error .form-control { border-color: #ed8364 !important; }
.modal .has-error .help-block, .modal .text-danger { color: #ff9b7d !important; }
.modal .reg-success-text { color: #7fe3bd; }

/* primární tlačítka → CTA gradient (přebíjí main.css !important) */
.btn-primary, .modal .btn-primary {
	background: linear-gradient(120deg, var(--aqua), var(--turq-br) 60%, var(--blue-br)) !important;
	border: none !important; color: #06210f !important; border-radius: 10px !important;
}
.btn-primary:hover, .modal .btn-primary:hover {
	background: linear-gradient(120deg, var(--aqua), var(--turq-br) 60%, var(--blue-br)) !important;
	color: #06210f !important; filter: brightness(1.06);
}

/* cookie modal: tmavé varianty tlačítek necháváme (success/ default), jen plochy řeší .modal-content výše */

/* ---------- tabulky v obsahu statických stránek (.page-body) ----------
   main.css dává řádkům světlý hover (#d3eeef) a zvýraznění (.lastid #e3fccb) —
   na tmavém pozadí je pak světlé písmo na světlém řádku nečitelné. Přebíjíme. */
.page-body .mgt tr:hover, .page-body table tr:hover {
	background-color: rgba(146,212,214,0.10) !important;
}
.page-body .lastid, .page-body .mgt .lastid {
	background-color: rgba(42,177,131,0.16) !important;
}

/* ---------- responsivní doladění ---------- */
@media (max-width: 880px) {
	.next-draw { flex-direction: column; align-items: stretch; }
	.next-draw-photo { width: 100%; height: 200px; flex-basis: auto; }
	/* na užším okně se ovládací prvky roztáhnou na celou šířku (každý segment 100 %, poloviny 50/50) */
	.webout-panel .seg { flex: 1 1 100%; }
	.webout-panel .cta { flex: 1 1 100%; min-width: 0; }
}