/* Double Opt-in Voting — HornBach Prkno frontend
 *
 * Branding přes CSS custom props — můžeš snadno přepsat v Elementor Custom CSS:
 *   .dovote-panel, .dovote-modal { --dovote-accent-magenta: #e91e63; }
 *
 * Max-width 1165px wrapper se předpokládá v Elementor Section / Container.
 * Tento CSS jen styluje obsah uvnitř, nikoli wrapper.
 */

:root {
	/* Hex hodnoty extrahované přímo z Figmy "PRKNO WEB (Copy)" */
	--dovote-bg-page: #181818;
	--dovote-bg-panel: #212121;
	--dovote-bg-input: #3c3c3c;
	--dovote-text: #ffffff;
	--dovote-text-muted: rgba(255, 255, 255, .7);
	--dovote-accent-orange: #f7911a;
	--dovote-accent-magenta: #c40070;
	--dovote-card-bg: #c40070;
	--dovote-border: rgba(255, 255, 255, .2);
	--dovote-font: 'Trade Gothic Hornbach', 'Trade Gothic', 'Oswald', 'Roboto Condensed', sans-serif;
}

.dovote-panel,
.dovote-panel *,
.dovote-modal,
.dovote-modal *,
.dovote-vote-btn {
	box-sizing: border-box;
}

.dovote-panel,
.dovote-modal,
.dovote-vote-btn,
.dovote-panel-title,
.dovote-modal-title,
.dovote-modal-text,
.dovote-modal-close,
.dovote-email,
.dovote-submit,
.dovote-gdpr {
	font-family: var(--dovote-font);
}

/* ----- HLASOVAT tlačítko v kartách (Elementor) ----- */

.dovote-vote-btn {
	/* display:block + margin:auto + fit-content = horizontally centered button
	 * jehož šířka drží content (HLASOVAT + padding), ne plné šířky parenta. */
	display: block;
	margin: 0 auto;
	width: fit-content;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dovote-text);
	background: transparent;
	border: 2px solid var(--dovote-text);
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.dovote-vote-btn:hover {
	background: var(--dovote-text);
	color: var(--dovote-card-bg);
}

.dovote-vote-btn.is-dovote-selected {
	background: var(--dovote-accent-orange);
	border-color: var(--dovote-accent-orange);
	color: #ffffff;
}

/* ----- Equal-height cards: HLASOVAT vždy přilepený na spodek karty -----
 * Při různě dlouhých popisech roste magenta footer, ale tlačítko HLASOVAT
 * zůstává vždy na spodním okraji karty. Funguje pro desktop i mobile.
 */
.dovote-card {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
}

.dovote-card > .elementor-element:last-child {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
}

/* HLASOVAT button HTML widget — push to bottom */
.dovote-card .elementor-widget:has(.dovote-vote-btn) {
	margin-top: auto !important;
}

/* Hosted video poster fallback — iOS Safari shows black bez poster atributu.
 * Magenta brand bg místo pure black, dokud user nekliknul play.
 * Pro proper fix nastav Image Overlay v ELE Video widget Style tabu (poster image). */
.dovote-card video {
	background-color: var(--dovote-accent-magenta);
	object-fit: cover;
}

/* Highlight POUZE konkrétní karty — pseudo-overlay přístup.
 * Pseudo ::after s inset:0 vždy pokryje content-box rodiče, takže outline
 * sedí kolem viditelné karty i kdyby ELE strukturoval container divně.
 * Plus min-height/min-width ochrana, kdyby class sedělo na zero-size wrapperu. */
.dovote-card {
	position: relative;
}

.dovote-card.is-dovote-selected {
	z-index: 2;
}

.dovote-card.is-dovote-selected::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	outline: 3px solid var(--dovote-accent-orange);
	outline-offset: -3px;
	box-shadow: 0 0 32px rgba(247, 145, 26, .45);
	pointer-events: none;
	z-index: 2;
	transition: box-shadow .2s ease, outline-color .15s ease;
}

/* ----- Sdílený panel: email + Potvrdit hlas + GDPR ----- */

.dovote-panel {
	width: 100%;
	max-width: 1165px;
	margin: 32px auto 0;
	padding: 32px 20px 24px;
	background: var(--dovote-bg-panel);
	color: var(--dovote-text);
	border-radius: 4px;
}

.dovote-panel-title {
	margin: 0 0 20px;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	text-align: center;
	color: var(--dovote-accent-orange);
}

.dovote-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.dovote-row {
	display: flex;
	gap: 0;
	align-items: stretch;
	width: 100%;
}

.dovote-email {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 16px; /* 16px brání iOS zoom při focusu */
	color: var(--dovote-text);
	background: var(--dovote-bg-input);
	border: 1px solid var(--dovote-border);
	border-right: 0;
	border-radius: 0;
	transition: border-color .15s ease;
}

.dovote-email::placeholder {
	color: var(--dovote-text-muted);
}

.dovote-email:focus {
	outline: none;
	border-color: var(--dovote-accent-orange);
}

.dovote-submit {
	flex: 0 0 auto;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--dovote-text);
	background: transparent;
	border: 1px solid var(--dovote-text);
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.dovote-submit:hover:not(:disabled) {
	background: var(--dovote-accent-magenta);
	border-color: var(--dovote-accent-magenta);
}

.dovote-submit:disabled {
	opacity: .6;
	cursor: progress;
}

.dovote-gdpr {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--dovote-text-muted);
	text-align: center;
}

.dovote-gdpr a {
	color: var(--dovote-text-muted);
	text-decoration: underline;
}

.dovote-gdpr a:hover {
	color: var(--dovote-accent-orange);
}

.dovote-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ----- Language switcher CZ | SK -----
 * Inline by default; add CSS class .is-floating v ELE Advanced pro fixed top-right.
 */
.dovote-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dovote-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dovote-lang-link {
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	padding: 4px 6px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.dovote-lang-link:hover,
.dovote-lang-link:focus {
	color: var(--dovote-accent-orange);
	outline: none;
}

.dovote-lang-link.is-active {
	color: var(--dovote-accent-orange);
	border-bottom-color: var(--dovote-accent-orange);
	pointer-events: none; /* už jsi tady, neklikej */
}

.dovote-lang-sep {
	color: rgba(255, 255, 255, .25);
}

/* Inline SVG vlajka — border + hover scale pro feedback */
.dovote-flag {
	display: block;
	width: 32px;
	height: 22px;
	border: 1px solid rgba(255, 255, 255, .3);
	transition: transform .15s ease, border-color .15s ease;
}

.dovote-lang-link:hover .dovote-flag,
.dovote-lang-link:focus .dovote-flag {
	transform: scale(1.08);
	border-color: var(--dovote-accent-orange);
}

.dovote-lang-link.is-active .dovote-flag {
	border-color: var(--dovote-accent-orange);
	box-shadow: 0 0 0 2px var(--dovote-accent-orange);
}

/* Mode "other" — single language link, větší klikatelnost */
.dovote-lang-switch--single .dovote-lang-link {
	border-bottom: 0;
	padding: 0;
}

.dovote-lang-switch--single .dovote-flag {
	width: 40px;
	height: 28px;
}

/* Floating top-right varianta — přidej class is-floating v ELE Advanced */
.dovote-lang-switch.is-floating {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
	background: rgba(24, 24, 24, .85);
	padding: 10px 16px;
	border-radius: 24px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

/* ----- Thank-you page fallback hero (direct visit bez ?dovote_status= URL) ----- */

.dovote-status-fallback {
	max-width: 760px;
	margin: 0 auto;
	padding: 60px 24px;
	text-align: center;
	color: var(--dovote-text);
	font-family: var(--dovote-font);
}

.dovote-status-fallback__title {
	margin: 0 0 20px;
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--dovote-accent-orange);
	letter-spacing: .5px;
}

.dovote-status-fallback__text {
	margin: 0 0 32px;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
}

.dovote-status-fallback__btn {
	display: inline-block;
	padding: 16px 36px;
	background: var(--dovote-accent-magenta);
	color: var(--dovote-text);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}

.dovote-status-fallback__btn:hover,
.dovote-status-fallback__btn:focus {
	background: var(--dovote-accent-orange);
	transform: translateY(-1px);
	outline: none;
}

/* ----- Modaly (native <dialog>) ----- */

.dovote-modal {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dovote-text);
	max-width: 760px;
	width: calc(100% - 32px);
}

.dovote-modal::backdrop {
	background: rgba(0, 0, 0, .75);
}

.dovote-modal-inner {
	padding: 48px 32px;
	background: #1a1a1a;
	border: 2px solid var(--dovote-text);
	text-align: center;
}

.dovote-modal-title {
	margin: 0 0 16px;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.2;
}

.dovote-modal-text {
	margin: 0 0 28px;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.5;
	color: var(--dovote-text);
}

.dovote-modal-close {
	display: inline-block;
	padding: 10px 24px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dovote-text);
	background: transparent;
	border: 1px solid var(--dovote-text);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.dovote-modal-close:hover {
	background: var(--dovote-text);
	color: #1a1a1a;
}

/* Variant: orange (pre-mail "Děkujeme!") */
.dovote-modal--orange .dovote-modal-title {
	color: var(--dovote-accent-orange);
}

/* Variant: magenta (post-mail "Super!") */
.dovote-modal--magenta .dovote-modal-title {
	color: var(--dovote-accent-magenta);
}

/* ===== Email panel — stack inputu + tlačítka jen na mobilu < 640 ===== */
@media (max-width: 640px) {
	.dovote-panel {
		padding: 24px 16px 20px;
	}
	.dovote-row {
		flex-direction: column;
		gap: 12px;
	}
	.dovote-email,
	.dovote-submit {
		width: 100%;
		border: 1px solid var(--dovote-border);
	}
	.dovote-submit {
		border-color: var(--dovote-text);
	}
	.dovote-modal-inner {
		padding: 32px 20px;
	}
}

/* ===== Carousel pro karty: tablet + mobile (do 1024px) =====
 * 2 karty viditelné na jakémkoli viewportu, swipe + click arrows.
 * flex-basis: calc(50% - 6px) → responsive width per device:
 *   400px viewport → karta ~194px (2 visible)
 *   768px tablet   → karta ~378px (2 visible)
 *   1024px tablet  → karta ~506px (2 visible)
 */
@media (max-width: 1024px) {
	.dovote-card-grid,
	.e-con-inner:has(> .dovote-card),
	.e-con-inner:has(> .elementor-element.dovote-card) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px !important;
		scrollbar-width: none;
		padding: 0 !important;
		max-width: 100% !important;
	}

	.dovote-card-grid::-webkit-scrollbar,
	.e-con-inner:has(> .dovote-card)::-webkit-scrollbar,
	.e-con-inner:has(> .elementor-element.dovote-card)::-webkit-scrollbar {
		display: none;
	}

	/* Karty obecné carousel chování — fixní px pro garantovaný overflow.
	 * Per-breakpoint width override níže (mobile 160 / tablet 320). */
	.dovote-card-grid > .dovote-card,
	.dovote-card-grid > .elementor-element.dovote-card,
	.e-con-inner > .dovote-card,
	.e-con-inner > .elementor-element.dovote-card {
		scroll-snap-align: start;
	}

	/* Wrapper kolem carouselu — drží absolute kontext pro šipku */
	.dovote-carousel-wrapper {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		overflow: visible !important;
	}

	/* Šipky — bidirectional navigace, autohide na okrajích, 46px.
	 * Anti-passthrough: z-index 999, pointer-events !important, touch-action manipulation,
	 * tap-highlight transparent — kombinace bulletproof proti iOS touch quirks
	 * a ELE z-index conflicts. */
	.dovote-carousel-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 46px;
		height: 46px;
		padding: 0;
		background: #ffffff;
		border: 0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #181818;
		cursor: pointer;
		pointer-events: auto !important;
		z-index: 999;
		box-shadow: 0 2px 14px rgba(0, 0, 0, .4);
		opacity: 1;
		visibility: visible;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		-webkit-user-select: none;
		transition: opacity .25s ease, visibility .25s ease, transform .15s ease, background .15s ease;
	}

	/* SVG uvnitř arrow nesmí zachytávat click — vše musí jít na <button> */
	.dovote-carousel-arrow svg {
		pointer-events: none;
	}

	.dovote-carousel-arrow--right { right: 10px; }
	.dovote-carousel-arrow--left  { left: 10px; }
	.dovote-carousel-arrow--left svg { transform: scaleX(-1); }

	.dovote-carousel-arrow.is-hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.dovote-carousel-arrow:hover,
	.dovote-carousel-arrow:focus {
		background: var(--dovote-accent-orange);
		color: #ffffff;
		transform: translateY(-50%) scale(1.05);
		outline: none;
	}

	.dovote-carousel-arrow:active {
		transform: translateY(-50%) scale(0.95);
	}
}

/* Mobile karty — 1-up s peek další karty (~15 % viditelné jako scroll hint).
 * Na 400px viewport = karta ~334px, peek ~60px next card.
 * Pokud klient chce 2-up zpět, change calc(85% - 6px) na pevných 160px. */
@media (max-width: 640px) {
	.dovote-card-grid > .dovote-card,
	.dovote-card-grid > .elementor-element.dovote-card,
	.e-con-inner > .dovote-card,
	.e-con-inner > .elementor-element.dovote-card {
		flex: 0 0 calc(85% - 6px) !important;
		width: calc(85% - 6px) !important;
		min-width: 260px !important;
		max-width: 380px !important;
	}
}

/* Tablet karty 320px — 4 × 320 + 3 × 12 = 1316px content → overflow i na iPad Pro 1024 */
@media (min-width: 641px) and (max-width: 1024px) {
	.dovote-card-grid > .dovote-card,
	.dovote-card-grid > .elementor-element.dovote-card,
	.e-con-inner > .dovote-card,
	.e-con-inner > .elementor-element.dovote-card {
		flex: 0 0 320px !important;
		width: 320px !important;
		min-width: 320px !important;
		max-width: 320px !important;
	}
}

/* Desktop 1025+ — žádné šipky, žádný carousel; klasický 4-up grid */
@media (min-width: 1025px) {
	.dovote-carousel-arrow {
		display: none;
	}
}