/* ==========================================================================
   Ghosty banner — A/B test (varianta „strip" a „call demo")
   Dočasná komponenta pro A/B test, viz kdotovolal_ghosty_ab_*() v pluginu.
   ========================================================================== */

.ktv-ghosty {
	--ktv-ghosty-brand: #DE56BC;
	--ktv-ghosty-brand-hover: #C847A8;
	--ktv-ghosty-dark: #0B0B0B;
	--ktv-ghosty-on-dark: #B3AFB4;
	--ktv-ghosty-on-dark-subtle: #9B959C;

	font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
	/* Hero i CTA sekce centrují text — banner si drží vlastní zarovnání. */
	text-align: start;
}

.ktv-ghosty *,
.ktv-ghosty *::before,
.ktv-ghosty *::after {
	box-sizing: inherit;
}

/*
 * Bílý text na #DE56BC má kontrast 3,4:1 — pod hranicí WCAG AA pro text do 19 px.
 * Vědomě akceptováno, brandová barva má přednost. Neztmavovat na #B83F9A.
 */
.ktv-ghosty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: var(--ktv-radius-pill);
	background: var(--ktv-ghosty-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--ktv-transition);
}

.ktv-ghosty__cta:hover,
.ktv-ghosty__cta:focus-visible {
	background: var(--ktv-ghosty-brand-hover);
	color: #fff;
	text-decoration: none;
}

.ktv-ghosty__mascot {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Varianta A — strip (pod sdílením čísla, přes celou šířku)

   Tmavé provedení záměrně shodné s variantou „ukázka hovoru", aby test
   porovnával jen umístění banneru, ne barevnost. Rozdíl v barvě by se
   od rozdílu v pozici nedal oddělit.
   -------------------------------------------------------------------------- */

.ktv-ghosty-strip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"logo body   action"
		"logo desc   action";
	align-items: center;
	gap: var(--ktv-space-6) var(--ktv-space-20);
	width: 100%;
	padding: 22px 26px;
	border-radius: 20px;
	background: var(--ktv-ghosty-dark);
}

.ktv-ghosty-strip__logo {
	grid-area: logo;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: var(--ktv-radius-xl);
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.ktv-ghosty-strip__logo .ktv-ghosty__mascot {
	width: 48px;
}

.ktv-ghosty-strip__body {
	grid-area: body;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ktv-space-4);
	align-self: end;
}

.ktv-ghosty-strip__pill {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5592FF;
}

.ktv-ghosty-strip__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #fff;
	text-wrap: balance;
}

.ktv-ghosty-strip__desc {
	grid-area: desc;
	align-self: start;
	margin: 0;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ktv-ghosty-on-dark);
	text-wrap: pretty;
}

/* Artefakt počítá s kratším popiskem na mobilu — v DOM jsou obě verze. */
.ktv-ghosty-strip__desc--mobile {
	display: none;
}

.ktv-ghosty-strip__action {
	grid-area: action;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ktv-space-8);
}

.ktv-ghosty-strip__proof {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ktv-ghosty-on-dark-subtle);
	text-align: center;
	white-space: nowrap;
}

/* Mobilní strip — maskot a titulek na jednom řádku, CTA přes celou šířku */
@media (max-width: 47.9375rem) {
	.ktv-ghosty-strip {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"logo   body"
			"desc   desc"
			"action action";
		gap: var(--ktv-space-12) 13px;
		padding: 18px;
		border-radius: var(--ktv-radius-lg);
	}

	.ktv-ghosty-strip__body {
		align-self: center;
		gap: var(--ktv-space-2);
	}

	.ktv-ghosty-strip__logo {
		width: 44px;
		height: 44px;
		border-radius: var(--ktv-radius-lg);
	}

	.ktv-ghosty-strip__logo .ktv-ghosty__mascot {
		width: 32px;
	}

	.ktv-ghosty-strip__title {
		font-size: 17px;
		line-height: 1.25;
	}

	.ktv-ghosty-strip__desc {
		font-size: 14px;
		line-height: 1.5;
	}

	.ktv-ghosty-strip__desc--desktop {
		display: none;
	}

	.ktv-ghosty-strip__desc--mobile {
		display: block;
	}

	.ktv-ghosty-strip__cta {
		height: 46px;
		padding-block: 0;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Varianta B — ukázka hovoru (sloupec vedle formuláře hodnocení)
   -------------------------------------------------------------------------- */

.ktv-ghosty-call {
	display: flex;
	flex-direction: column;
	gap: var(--ktv-space-16);
	width: 100%;
	padding: 24px;
	border-radius: 20px;
	background: var(--ktv-ghosty-dark);
}

.ktv-ghosty-call__head {
	display: flex;
	align-items: center;
	gap: var(--ktv-space-10);
}

.ktv-ghosty-call__head .ktv-ghosty__mascot {
	width: 34px;
	flex: 0 0 auto;
}

.ktv-ghosty-call__pill {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5592FF;
}

.ktv-ghosty-call__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

.ktv-ghosty-call__desc {
	margin: 0;
	max-width: 40ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ktv-ghosty-on-dark);
	text-wrap: pretty;
}

.ktv-ghosty-call__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px;
}

.ktv-ghosty-call__proof {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ktv-ghosty-on-dark-subtle);
}

/* Ukázka konverzace */

.ktv-ghosty-chat {
	display: flex;
	flex-direction: column;
	gap: var(--ktv-space-10);
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: var(--ktv-radius-xl);
	background: rgba(255, 255, 255, 0.05);
}

.ktv-ghosty-chat__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--ktv-ghosty-on-dark);
}

.ktv-ghosty-chat__time {
	display: flex;
	align-items: center;
	gap: var(--ktv-space-6);
}

.ktv-ghosty-chat__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--ktv-radius-pill);
	background: var(--ktv-ghosty-brand);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ktv-ghosty-chat[data-live="1"] .ktv-ghosty-chat__dot {
	opacity: 1;
	animation: ktvGhostyPulse 1.15s ease-in-out infinite;
}

.ktv-ghosty-chat__row {
	display: flex;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.ktv-ghosty-chat__row[data-visible="1"] {
	opacity: 1;
	transform: translateY(0);
}

.ktv-ghosty-chat__row--in {
	justify-content: flex-start;
}

.ktv-ghosty-chat__row--out {
	justify-content: flex-end;
}

.ktv-ghosty-chat__bubble {
	max-width: 88%;
	min-height: 19px;
	padding: 10px 13px;
	font-size: 13px;
	line-height: 1.45;
	color: #F7F2F5;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 13px 13px 13px 4px;
}

.ktv-ghosty-chat__row--out .ktv-ghosty-chat__bubble {
	border-radius: 13px 13px 4px 13px;
}

.ktv-ghosty-chat__end {
	display: flex;
	align-items: center;
	gap: var(--ktv-space-8);
	margin-top: var(--ktv-space-4);
}

.ktv-ghosty-chat__end-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FF9B9B;
}

.ktv-ghosty-chat__end-note {
	font-size: 12px;
	color: #CC9999;
}

@keyframes ktvGhostyPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.ktv-ghosty-chat__row {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ktv-ghosty-chat__dot {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Layout: dvousloupcová sekce formuláře hodnocení
   -------------------------------------------------------------------------- */

/*
 * Sekce se roztáhne na plnou šířku obsahu (1200 px), aby pravý okraj banneru
 * lícoval se statistikami, komentáři i AdSense stripem. Formulář proto
 * nedostává vlastní max-width a dobírá zbytek řádku.
 */
.ktv-detail-form-wrap--with-ghosty {
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--ktv-space-24);
}

.ktv-detail-form-wrap--with-ghosty .ktv-review-form {
	flex: 1 1 auto;
	max-width: none;
}

.ktv-detail-form-wrap__aside {
	flex: 0 0 360px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
}

/* Banner dorovná výšku formuláře, přebytek si vezme ukázka hovoru. */
.ktv-detail-form-wrap__aside .ktv-ghosty-call {
	flex: 1 1 auto;
}

.ktv-detail-form-wrap__aside .ktv-ghosty-chat {
	flex: 1 1 auto;
}

@media (max-width: 61.9375rem) {
	.ktv-detail-form-wrap--with-ghosty {
		flex-direction: column;
		align-items: center;
	}

	.ktv-detail-form-wrap__aside {
		flex: 0 0 auto;
		width: 100%;
		max-width: 720px;
	}
}

/* --------------------------------------------------------------------------
   Slot stripu pod sdílením čísla
   -------------------------------------------------------------------------- */

.ktv-ghosty-slot {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	margin-top: var(--ktv-space-24);
}