/* ==========================================================
   Presento Pop – Frontend Styles (v2, multi-button)
   ========================================================== */

/* ── Pulzující tlačítko ──────────────────────────────────── */

.ppop-btn-wrap {
	position: fixed;
	z-index: 99998;
}

.ppop-btn {
	border-radius:  50%;
	border:  none;
	cursor:  pointer;
	display: flex;
	align-items:     center;
	justify-content: center;
	color:       #fff;
	padding:     0;
	box-shadow:  0 4px 15px rgba(0, 0, 0, 0.25);
	transition:  transform 0.2s ease, box-shadow 0.2s ease;
	outline:     none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.ppop-btn:hover,
.ppop-btn:focus-visible {
	transform:              scale(1.12);
	animation-play-state:   paused;
	box-shadow:             0 6px 22px rgba(0, 0, 0, 0.35) !important;
	outline:                3px solid rgba(255, 255, 255, 0.55);
	outline-offset:         2px;
}

.ppop-btn svg {
	width:          44%;
	height:         44%;
	pointer-events: none;
	display:        block;
}

/* ── Overlay ─────────────────────────────────────────────── */

.ppop-overlay {
	position:   fixed;
	inset:      0;
	background: rgba(0, 0, 0, 0.52);
	z-index:    99999;
	display:    flex;
	align-items:      center;
	justify-content:  center;
	padding:    16px;
	opacity:    0;
	visibility: hidden;
	cursor:     pointer;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
}

.ppop-overlay.ppop-visible {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

/* ── Popup karta ─────────────────────────────────────────── */

.ppop-popup {
	border-radius: 18px;
	max-width:     480px;
	width:         100%;
	overflow:      hidden;
	box-shadow:    0 24px 64px rgba(0, 0, 0, 0.28);
	transform:     translateY(32px) scale(0.96);
	transition:    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
	outline:       none;
	cursor:        default;
}

.ppop-overlay.ppop-visible .ppop-popup {
	transform: translateY(0) scale(1);
}

/* ── Záhlaví ─────────────────────────────────────────────── */

.ppop-header {
	color:      #fff;
	padding:    20px 22px 18px;
	display:    flex;
	align-items: center;
	gap:        14px;
}

.ppop-header-icon {
	flex-shrink: 0;
	width:  42px;
	height: 42px;
	background:      rgba(255, 255, 255, 0.18);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.ppop-header-icon svg {
	width:  22px;
	height: 22px;
}

.ppop-popup-title {
	margin:      0;
	font-weight: 700;
	flex:        1;
	line-height: 1.2;
	color:       #fff;
}

.ppop-close {
	flex-shrink:     0;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      rgba(255, 255, 255, 0.18);
	border:          none;
	cursor:          pointer;
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	margin-left:     auto;
	transition:      background 0.2s;
	outline:         none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.ppop-close:hover,
.ppop-close:focus-visible {
	background: rgba(255, 255, 255, 0.32);
}

.ppop-close svg {
	width:  18px;
	height: 18px;
}

/* ── Tělo ────────────────────────────────────────────────── */

.ppop-body {
	padding: 22px 24px 18px;
}

/* Formátovaný obsah z TinyMCE */
.ppop-body-content {
	line-height: 1.7;
}

.ppop-body-content p {
	margin: 0 0 0.75em;
}

.ppop-body-content p:last-child {
	margin-bottom: 0;
}

.ppop-body-content h2,
.ppop-body-content h3,
.ppop-body-content h4 {
	margin:        0 0 0.45em;
	font-weight:   700;
	line-height:   1.25;
}

.ppop-body-content h2 { font-size: 1.22em; }
.ppop-body-content h3 { font-size: 1.08em; }
.ppop-body-content h4 { font-size: 0.97em; }

.ppop-body-content ul,
.ppop-body-content ol {
	margin:         0 0 0.75em 1.25em;
	padding-left:   0.25em;
}

.ppop-body-content ul { list-style: disc; }
.ppop-body-content ol { list-style: decimal; }

.ppop-body-content li {
	margin-bottom: 0.25em;
}

.ppop-body-content strong,
.ppop-body-content b {
	font-weight: 700;
}

.ppop-body-content em,
.ppop-body-content i {
	font-style: italic;
}

.ppop-body-content a {
	text-decoration: underline;
}

.ppop-body-content a:hover {
	text-decoration: none;
}

/* ── CTA ─────────────────────────────────────────────────── */

.ppop-footer {
	padding: 0 24px 22px;
}

.ppop-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	color:           #fff;
	text-decoration: none;
	border:          none;
	padding:         11px 22px;
	border-radius:   8px;
	font-weight:     600;
	font-size:       0.88rem;
	font-family:     inherit;
	letter-spacing:  0.02em;
	cursor:          pointer;
	transition:      filter 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow:      0 3px 10px rgba(0, 0, 0, 0.15);
	outline:         none;
	touch-action:    manipulation;
	-webkit-tap-highlight-color: transparent;
}

.ppop-cta:hover,
.ppop-cta:focus-visible {
	filter:    brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}

/* ── Responzivita ────────────────────────────────────────── */

@media (max-width: 520px) {
	.ppop-popup {
		border-radius: 14px;
	}

	.ppop-header {
		padding: 16px 18px 14px;
		gap: 10px;
	}

	.ppop-header-icon {
		width:  36px;
		height: 36px;
	}

	.ppop-body {
		padding: 18px 18px 14px;
	}

	.ppop-footer {
		padding: 0 18px 18px;
	}
}