/**
 * CC Popup Maker Pro - Frontend
 */

/* ============ Base ============ */

.ccpm-wrap {
	position: fixed;
	inset: 0;
	display: none;
	pointer-events: none;
}

.ccpm-wrap.ccpm-visible {
	display: block;
}

.ccpm-overlay {
	position: absolute;
	inset: 0;
	pointer-events: auto;
}

.ccpm-popup {
	position: absolute;
	pointer-events: auto;
	overflow-y: auto;
	box-sizing: border-box;
	outline: none;
	-webkit-overflow-scrolling: touch;
}

.ccpm-content > *:first-child { margin-top: 0; }
.ccpm-content > *:last-child { margin-bottom: 0; }

html.ccpm-no-scroll,
html.ccpm-no-scroll body {
	overflow: hidden !important;
}

/* ============ Layout: Modal ============ */

.ccpm-layout-modal .ccpm-popup {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100vw - 32px);
}

/* ============ Layout: Fullscreen ============ */

.ccpm-layout-fullscreen .ccpm-popup {
	inset: 0;
	width: 100% !important;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* ============ Layout: Slide-in / Toast ============ */

.ccpm-layout-slidein .ccpm-popup,
.ccpm-layout-toast .ccpm-popup {
	max-width: calc(100vw - 32px);
}

.ccpm-pos-bottom-right .ccpm-popup { bottom: 24px; right: 24px; }
.ccpm-pos-bottom-left  .ccpm-popup { bottom: 24px; left: 24px; }
.ccpm-pos-top-right    .ccpm-popup { top: 24px; right: 24px; }
.ccpm-pos-top-left     .ccpm-popup { top: 24px; left: 24px; }

.ccpm-layout-slidein.ccpm-pos-center .ccpm-popup,
.ccpm-layout-toast.ccpm-pos-center .ccpm-popup {
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
}

/* ============ Layout: Barra ============ */

.ccpm-layout-bar .ccpm-popup {
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: 100%;
}

.ccpm-layout-bar.ccpm-pos-top .ccpm-popup,
.ccpm-layout-bar.ccpm-pos-top-left .ccpm-popup,
.ccpm-layout-bar.ccpm-pos-top-right .ccpm-popup,
.ccpm-layout-bar.ccpm-pos-center .ccpm-popup { top: 0; }

.ccpm-layout-bar.ccpm-pos-bottom .ccpm-popup,
.ccpm-layout-bar.ccpm-pos-bottom-left .ccpm-popup,
.ccpm-layout-bar.ccpm-pos-bottom-right .ccpm-popup { bottom: 0; }

/* ============ Bottone chiusura ============ */

.ccpm-close {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, opacity 0.3s ease;
	z-index: 5;
	font-family: inherit;
	font-weight: 600;
}

.ccpm-close:hover { transform: scale(1.08); }
.ccpm-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ccpm-close-circle { border-radius: 50%; }
.ccpm-close-square { border-radius: 6px; }
.ccpm-close-icon { border-radius: 50%; }

.ccpm-close-pos-inside-tr  { top: 12px; right: 12px; }
.ccpm-close-pos-inside-tl  { top: 12px; left: 12px; }
.ccpm-close-pos-outside-tr { top: -14px; right: -14px; }
.ccpm-close-pos-outside-tl { top: -14px; left: -14px; }
.ccpm-close-pos-outside-top { top: -48px; left: 50%; transform: translateX(-50%); }
.ccpm-close-pos-outside-top:hover { transform: translateX(-50%) scale(1.08); }

/* Nelle barre il bottone sta dentro, centrato verticalmente */
.ccpm-layout-bar .ccpm-close {
	top: 50% !important;
	right: 16px !important;
	left: auto !important;
	transform: translateY(-50%);
}
.ccpm-layout-bar .ccpm-close:hover { transform: translateY(-50%) scale(1.08); }

/* Fullscreen: chiusura sempre dentro */
.ccpm-layout-fullscreen .ccpm-close-pos-outside-tr { top: 20px; right: 20px; }
.ccpm-layout-fullscreen .ccpm-close-pos-outside-tl { top: 20px; left: 20px; }
.ccpm-layout-fullscreen .ccpm-close-pos-outside-top { top: 20px; }

.ccpm-close-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ============ Animazioni ingresso ============ */

.ccpm-anim-in-fade        { animation: ccpmFadeIn var(--ccpm-anim-ms, 400ms) ease both; }
.ccpm-anim-in-fade-up     { animation: ccpmFadeUp var(--ccpm-anim-ms, 400ms) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ccpm-anim-in-fade-down   { animation: ccpmFadeDown var(--ccpm-anim-ms, 400ms) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ccpm-anim-in-slide-left  { animation: ccpmSlideLeft var(--ccpm-anim-ms, 400ms) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ccpm-anim-in-slide-right { animation: ccpmSlideRight var(--ccpm-anim-ms, 400ms) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ccpm-anim-in-zoom        { animation: ccpmZoomIn var(--ccpm-anim-ms, 400ms) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ccpm-anim-in-bounce      { animation: ccpmBounce calc(var(--ccpm-anim-ms, 400ms) * 1.5) cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ============ Animazioni uscita ============ */

.ccpm-anim-out-fade      { animation: ccpmFadeOut var(--ccpm-anim-ms, 400ms) ease both; }
.ccpm-anim-out-fade-down { animation: ccpmFadeOutDown var(--ccpm-anim-ms, 400ms) ease both; }
.ccpm-anim-out-zoom      { animation: ccpmZoomOut var(--ccpm-anim-ms, 400ms) ease both; }

@keyframes ccpmFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccpmFadeOut  { from { opacity: 1; } to { opacity: 0; } }
@keyframes ccpmFadeUp   { from { opacity: 0; margin-top: 28px; } to { opacity: 1; margin-top: 0; } }
@keyframes ccpmFadeDown { from { opacity: 0; margin-top: -28px; } to { opacity: 1; margin-top: 0; } }
@keyframes ccpmFadeOutDown { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: 28px; } }
@keyframes ccpmSlideLeft  { from { opacity: 0; margin-left: 60px; } to { opacity: 1; margin-left: 0; } }
@keyframes ccpmSlideRight { from { opacity: 0; margin-left: -60px; } to { opacity: 1; margin-left: 0; } }
@keyframes ccpmZoomIn  { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
@keyframes ccpmZoomOut { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.85; } }
@keyframes ccpmBounce {
	0%   { opacity: 0; scale: 0.7; }
	60%  { opacity: 1; scale: 1.04; }
	100% { opacity: 1; scale: 1; }
}

/* Overlay fade: keyframe con solo "from" così l'opacità finale
   resta quella configurata nel CSS dinamico (non forzata a 1) */
@keyframes ccpmOverlayIn { from { opacity: 0; } }
.ccpm-visible .ccpm-overlay { animation: ccpmOverlayIn 0.3s ease; }

/* ============ Accessibilità: reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
	.ccpm-popup,
	.ccpm-overlay {
		animation-duration: 0.01ms !important;
	}
}

/* ============ Responsive ============ */

@media (max-width: 767px) {
	.ccpm-layout-modal .ccpm-popup {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px);
	}

	/* Slide-in e toast: NON forzare la larghezza piena, solo un tetto
	   massimo, così restano ancorati all'angolo scelto anche su mobile */
	.ccpm-layout-slidein .ccpm-popup,
	.ccpm-layout-toast .ccpm-popup {
		max-width: calc(100vw - 24px);
	}

	.ccpm-pos-bottom-right .ccpm-popup { bottom: 12px; right: 12px; }
	.ccpm-pos-bottom-left  .ccpm-popup { bottom: 12px; left: 12px; }
	.ccpm-pos-top-right    .ccpm-popup { top: 12px; right: 12px; }
	.ccpm-pos-top-left     .ccpm-popup { top: 12px; left: 12px; }

	/* I bottoni "fuori" rientrano nei bordi su mobile per non uscire dallo schermo */
	.ccpm-close-pos-outside-tr { top: 8px; right: 8px; }
	.ccpm-close-pos-outside-tl { top: 8px; left: 8px; }
	.ccpm-close-pos-outside-top { top: 8px; }
}