/**
 * MAFAD — Card acquisto corso + sticky bar mobile
 * Override grafico di: views/templates/course/pay_course_bttn_woo.php
 *
 * @package MotusAnimiFAD
 * @since   2.1.0
 */

/* =============================================================================
   TOKEN — cambia qui i colori per tutta la card
   ========================================================================== */
.mafad-pay-card,
.mafad-pay-sticky,
.mafad-pay-guest {
	--mpc-plum:        #7B2D52;   /* colore primario card / bottone */
	--mpc-plum-dark:   #641F42;   /* hover */
	--mpc-plum-soft:   rgba(123, 45, 82, .08);
	--mpc-ink:         #1B1B3A;   /* titoli */
	--mpc-body:        #6B6B7B;   /* testo secondario */
	--mpc-muted:       #9A9AA8;   /* disclaimer */
	--mpc-surface:     #FFFFFF;
	--mpc-line:        #ECEAF0;
	--mpc-radius:      24px;
	--mpc-radius-btn:  12px;
	--mpc-shadow:      0 18px 50px -22px rgba(27, 27, 58, .28);
}

/* =============================================================================
   CARD
   ========================================================================== */
.mafad-pay-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	margin: 0 0 24px;
	padding: 34px 30px 30px;
	background: var(--mpc-surface);
	border: 2px solid var(--mpc-plum);
	border-radius: var(--mpc-radius);
	box-shadow: var(--mpc-shadow);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

.mafad-pay-card, .mafad-pay-card *,
.mafad-pay-sticky, .mafad-pay-sticky *,
.mafad-pay-guest, .mafad-pay-guest * { box-sizing: border-box; }

/* Badge opzionale */
.mafad-pay-card__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-block;
	padding: 6px 12px;
	background: var(--mpc-plum);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1;
}

/* Eyebrow */
.mafad-pay-card__eyebrow {
	margin: 0 0 10px;
	color: var(--mpc-plum);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Titolo */
.mafad-pay-card__title {
	margin: 0 0 18px;
	color: var(--mpc-ink);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.01em;
}

/* Prezzo */
.mafad-pay-card__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.mafad-pay-card__price-full {
	position: relative;
	color: var(--mpc-muted);
	font-size: 22px;
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.mafad-pay-card__price {
	display: inline-flex;
	align-items: baseline;
	color: var(--mpc-plum);
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.mafad-pay-card__currency {
	font-size: .8em;
	font-weight: 800;
	margin-right: 2px;
}

/* Nota scadenza */
.mafad-pay-card__note {
	margin: 0 0 22px;
	color: var(--mpc-body);
	font-size: 15px;
	line-height: 1.5;
}

/* Checklist */
.mafad-pay-card__features {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.mafad-pay-card__feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 14px;
	padding: 0;
	color: var(--mpc-body);
	font-size: 16px;
	line-height: 1.45;
}

.mafad-pay-card__feature:last-child { margin-bottom: 0; }
.mafad-pay-card__feature::before { content: none; }

.mafad-pay-card__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--mpc-plum);
}

/* CTA */
.mafad-pay-card__cta-wrapp { margin: 0; }

.mafad-pay-card .ulp-pay-bttn.mafad-pay-card__cta,
.mafad-pay-card__cta {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 62px;
	padding: 18px 22px;
	background: var(--mpc-plum) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--mpc-radius-btn) !important;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mafad-pay-card__cta:hover,
.mafad-pay-card__cta:focus {
	background: var(--mpc-plum-dark) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -14px rgba(123, 45, 82, .85);
}

.mafad-pay-card__cta:focus-visible {
	outline: 3px solid rgba(123, 45, 82, .35);
	outline-offset: 3px;
}

.mafad-pay-card__cta:active { transform: translateY(0); }

/* Disclaimer */
.mafad-pay-card__disclaimer {
	margin: 18px 0 0;
	color: var(--mpc-muted);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
}

/* =============================================================================
   COUPON
   ========================================================================== */
.mafad-pay-coupon {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--mpc-line);
}

.mafad-pay-coupon__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mpc-plum);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.mafad-pay-coupon__chevron { transition: transform .2s ease; }
.mafad-pay-coupon__toggle[aria-expanded="true"] .mafad-pay-coupon__chevron { transform: rotate(180deg); }

.mafad-pay-coupon__body { padding-top: 14px; }
.mafad-pay-coupon__body[hidden] { display: none; }

.mafad-pay-coupon__field { display: block; }

.mafad-pay-coupon__input.form-control {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	background: #FAFAFC;
	border: 1px solid var(--mpc-line);
	border-radius: 10px;
	color: var(--mpc-ink);
	font-size: 15px;
	box-shadow: none;
}

.mafad-pay-coupon__input.form-control:focus {
	border-color: var(--mpc-plum);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px var(--mpc-plum-soft);
}

.mafad-pay-coupon__input.form-control::placeholder { color: var(--mpc-muted); }

.ulp-coupon-bttn.mafad-pay-coupon__submit {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px !important;
	margin-top: 10px !important;
	padding: 0 18px;
	background: transparent !important;
	border: 2px solid var(--mpc-plum) !important;
	border-radius: 10px !important;
	color: var(--mpc-plum) !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.ulp-coupon-bttn.mafad-pay-coupon__submit:hover {
	background: var(--mpc-plum) !important;
	color: #fff !important;
}

.mafad-pay-coupon__error {
	margin-top: 10px;
	padding: 10px 12px;
	background: #FDECEF;
	border-radius: 8px;
	color: #B3123B;
	font-size: 14px;
	line-height: 1.4;
}

/* =============================================================================
   BOX REGISTRAZIONE RICHIESTA (guest)
   ========================================================================== */
.mafad-pay-guest { margin: 0 0 24px; }

.mafad-pay-guest__box.checkout-registration-required {
	max-width: 420px;
	margin: 0;
	padding: 26px 24px !important;
	background: var(--mpc-plum-soft) !important;
	border: 1px solid rgba(123, 45, 82, .18);
	border-radius: 18px !important;
	color: var(--mpc-ink) !important;
	text-align: center;
}

.mafad-pay-guest__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	background: #fff;
	border-radius: 50%;
	color: var(--mpc-plum);
}

.mafad-pay-guest__text {
	margin: 0 0 18px !important;
	color: var(--mpc-body);
	font-size: 15px !important;
	line-height: 1.55;
}

.mafad-pay-guest__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mafad-pay-guest__btn {
	flex: 1 1 140px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: var(--mpc-radius-btn);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color .18s ease, color .18s ease;
}

.mafad-pay-guest__btn--primary {
	background: var(--mpc-plum) !important;
	border: 2px solid var(--mpc-plum) !important;
	color: #fff !important;
}
.mafad-pay-guest__btn--primary:hover { background: var(--mpc-plum-dark) !important; border-color: var(--mpc-plum-dark) !important; }

.mafad-pay-guest__btn--ghost {
	background: #fff !important;
	border: 2px solid var(--mpc-plum) !important;
	color: var(--mpc-plum) !important;
}
.mafad-pay-guest__btn--ghost:hover { background: var(--mpc-plum) !important; color: #fff !important; }

/* =============================================================================
   STICKY BAR MOBILE
   ========================================================================== */
.mafad-pay-sticky {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: none;
	width: auto;
	padding: 12px 14px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid rgba(27, 27, 58, .07);
	border-radius: 18px;
	box-shadow:
		0 2px 6px rgba(27, 27, 58, .06),
		0 12px 32px -8px rgba(27, 27, 58, .22);

	/* Stato di riposo: fuori schermo, leggermente rimpicciolita */
	opacity: 0;
	transform: translate3d(0, calc(100% + 24px), 0) scale(.94);
	transition:
		transform .42s cubic-bezier(.34, 1.3, .64, 1),
		opacity   .22s ease-out;
	will-change: transform, opacity;
	pointer-events: none;
}

/* Entrata: risale con un piccolo overshoot elastico */
.mafad-pay-sticky.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	pointer-events: auto;
}

/* Uscita più rapida e senza rimbalzo */
.mafad-pay-sticky:not(.is-visible) {
	transition:
		transform .24s cubic-bezier(.4, 0, 1, 1),
		opacity   .18s ease-in;
}

.mafad-pay-sticky__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.mafad-pay-sticky__info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;          /* consente al testo di accorciarsi invece di sfondare */
	line-height: 1.2;
}

.mafad-pay-sticky__price {
	color: var(--mpc-plum);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.mafad-pay-sticky__label {
	margin-top: 2px;
	color: var(--mpc-body);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mafad-pay-sticky .ulp-pay-bttn.mafad-pay-sticky__cta,
.mafad-pay-sticky__cta {
	flex: 0 0 auto;
	margin-left: auto;        /* ancorato a destra */
	max-width: 55%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 20px !important;
	background: var(--mpc-plum) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.1;
	white-space: nowrap;
}

.mafad-pay-sticky__cta:hover,
.mafad-pay-sticky__cta:focus { background: var(--mpc-plum-dark) !important; color: #fff !important; }

/* Feedback tattile al tap */
.mafad-pay-sticky__cta:active { transform: scale(.96); }
.mafad-pay-sticky__cta { transition: background-color .18s ease, transform .12s ease; }

/* --- Micro-animazioni di comparsa ---------------------------------------- */

/* Il contenuto entra sfalsato rispetto alla card: dà profondità */
.mafad-pay-sticky.is-visible .mafad-pay-sticky__info,
.mafad-pay-sticky.is-visible .mafad-pay-sticky__cta {
	animation: mafad-pay-rise .45s cubic-bezier(.22, .9, .32, 1) backwards;
}
.mafad-pay-sticky.is-visible .mafad-pay-sticky__info { animation-delay: .08s; }
.mafad-pay-sticky.is-visible .mafad-pay-sticky__cta  { animation-delay: .14s; }

@keyframes mafad-pay-rise {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Alone che pulsa due volte quando la barra compare, poi si spegne */
.mafad-pay-sticky.is-visible .mafad-pay-sticky__cta {
	animation:
		mafad-pay-rise .45s cubic-bezier(.22, .9, .32, 1) .14s backwards,
		mafad-pay-glow 1.9s ease-out .7s 2;
}

@keyframes mafad-pay-glow {
	0%   { box-shadow: 0 0 0 0 rgba(123, 45, 82, .38); }
	70%  { box-shadow: 0 0 0 12px rgba(123, 45, 82, 0); }
	100% { box-shadow: 0 0 0 0 rgba(123, 45, 82, 0); }
}

/* Attiva la barra solo su mobile/tablet stretto */
@media (max-width: 782px) {
	.mafad-pay-sticky { display: block; }
	body.mafad-has-pay-sticky { padding-bottom: 96px; }
}

/* Schermi molto stretti: comprime la CTA invece di far sfondare la barra */
@media (max-width: 380px) {
	.mafad-pay-sticky { left: 8px; right: 8px; padding-left: 12px; padding-right: 12px; }
	.mafad-pay-sticky__cta { padding: 12px 14px !important; font-size: 13px; letter-spacing: .04em; }
	.mafad-pay-sticky__price { font-size: 20px; }
	.mafad-pay-sticky__label { font-size: 12px; }
}

/* =============================================================================
   DEDUPLICA — single-course-visitor.php
   -----------------------------------------------------------------------------
   Il template ULP stampa il prezzo in .price-box subito sopra allo shortcode
   [ulp-enroll-course]: con la card diventa un doppione. Lo nascondiamo solo
   quando la card è effettivamente in pagina.
   NB: "Crediti ECM" e "Scade il" in .ulp-right-details restano — sono la scheda
   tecnica del corso, non il blocco commerciale.
   ========================================================================== */
/* Specificità alta: public.css usa .ulp-course-wrapp .ulp-main-section
   .ulp-right-sidebar .price-box (0,4,0) e vincerebbe su un selettore corto. */
.ulp-course-wrapp .ulp-main-section .ulp-right-sidebar:has(.mafad-pay-card) > .price-box,
body .ulp-right-sidebar:has(.mafad-pay-card) > .price-box { display: none !important; }

/* Fallback per browser senza :has() */
@supports not selector(:has(*)) {
	.ulp-course-wrapp .ulp-main-section .ulp-right-sidebar > .price-box { display: none !important; }
}

/* La card prende tutto lo spazio della sidebar */
.ulp-right-sidebar .ulp-course-enroll-section { margin: 0; }
.ulp-right-sidebar .mafad-pay-card { max-width: 100%; }

/* =============================================================================
   SIDEBAR STICKY (desktop)
   -----------------------------------------------------------------------------
   .ulp-main-section è già `display:flex` e .ulp-right-sidebar è un suo figlio
   diretto: basta passare da position:relative a position:sticky.

   Nessun max-height, nessuno scroll interno: il box resta SEMPRE espanso.
   Due modalità, assegnate dal JS misurando l'altezza reale:

   .is-sticky-top    box più basso del viewport → si aggancia in alto e resta lì
   .is-sticky-bottom box più alto del viewport → scorre insieme alla pagina
                     finché non se ne vede la fine, poi si blocca

   In entrambi i casi lo sticky si ferma da solo al termine di .ulp-main-section,
   quindi la sidebar non supera mai il contenuto che affianca.
   ========================================================================== */
:root {
	--mpc-sticky-top:    24px;   /* alzalo all'altezza dell'header se è fisso */
	--mpc-sticky-bottom: 24px;
}

@media (min-width: 783px) {

	/* Lo sticky è attivo di default: se il JS non gira (cache, errore) il box
	   resta comunque agganciato. Il JS si limita a scegliere la modalità. */
	.ulp-course-wrapp .ulp-main-section > .ulp-right-sidebar {
		position: -webkit-sticky !important;
		position: sticky !important;
		align-self: flex-start;   /* senza questo il flex stira il box e lo sticky non scorre */
		margin-top: -24px;        /* eredita il top:-24px originale */
		top: var(--mpc-sticky-top);
		bottom: auto;
	}

	/* Box più alto del viewport: il JS regola `top` in base alla direzione dello
	   scroll (sticky bidirezionale). La transizione ammorbidisce il cambio. */
	.ulp-course-wrapp .ulp-main-section > .ulp-right-sidebar.is-sticky-bottom {
		bottom: auto;
		transition: top .28s cubic-bezier(.22, .61, .36, 1);
	}

	/* Finestre basse: card più compatta, così ha più probabilità di entrare
	   tutta nello schermo e restare semplicemente agganciata in alto. */
	@media (max-height: 900px) {
		.ulp-right-sidebar .mafad-pay-card { padding: 24px 24px 22px; }
		.ulp-right-sidebar .mafad-pay-card__title { font-size: 25px; margin-bottom: 14px; }
		.ulp-right-sidebar .mafad-pay-card__price { font-size: 42px; }
		.ulp-right-sidebar .mafad-pay-card__note { margin-bottom: 16px; }
		.ulp-right-sidebar .mafad-pay-card__features { margin-bottom: 20px; }
		.ulp-right-sidebar .mafad-pay-card__feature { margin-bottom: 10px; font-size: 15px; }
		.ulp-right-sidebar .mafad-pay-card__cta { min-height: 54px; font-size: 16px; }
		.ulp-right-sidebar .mafad-pay-card__disclaimer { margin-top: 12px; font-size: 13px; }
	}

	/* -------------------------------------------------------------------------
	   ANTENATI CHE ROMPONO LO STICKY
	   -------------------------------------------------------------------------
	   Qualunque antenato con overflow hidden/auto/scroll crea uno scroll
	   container e disattiva position:sticky, senza alcun errore.

	   `overflow: clip` è la sostituzione giusta di `overflow: hidden`: ritaglia
	   il contenuto esattamente allo stesso modo, ma NON crea uno scroll
	   container, quindi lo sticky continua a funzionare. Così non riesponiamo
	   lo scroll orizzontale che quelle regole volevano evitare.
	   ---------------------------------------------------------------------- */
	.ulp-course-wrapp,
	.ulp-course-wrapp .ulp-main-section { overflow: visible !important; }

	/* Wrapper di tema/page builder che tipicamente hanno overflow-x:hidden */
	body.single-ulp_course,
	body.single-ulp_course .site-wrapper,
	body.single-ulp_course .site-content,
	body.single-ulp_course #content,
	body.single-ulp_course .vc_row,
	body.single-ulp_course .wpb_row { overflow: clip !important; }

	html:has(body.single-ulp_course) { overflow-x: clip; }
}

/* ATTENZIONE: position:sticky smette di funzionare se un antenato ha
   `overflow:hidden` (tipico di .page-content o .site-wrapper per contenere
   elementi larghi). Se non si aggancia, scommenta questo blocco: */
/*
.site-wrapper,
.page-content,
.ulp-course-wrapp { overflow: clip; }
*/

/* =============================================================================
   RESPONSIVE CARD
   ========================================================================== */
@media (max-width: 600px) {
	.mafad-pay-card {
		max-width: 100%;
		padding: 26px 20px 24px;
		border-radius: 20px;
	}
	.mafad-pay-card__title { font-size: 25px; }
	.mafad-pay-card__price { font-size: 44px; }
	.mafad-pay-card__feature { font-size: 15px; }
	.mafad-pay-card__cta { min-height: 56px; font-size: 16px; }
	.mafad-pay-guest__box.checkout-registration-required { max-width: 100%; }
}

/* =============================================================================
   ACCESSIBILITÀ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mafad-pay-sticky,
	.mafad-pay-card__cta,
	.mafad-pay-coupon__chevron { transition: none !important; }

	.mafad-pay-sticky,
	.mafad-pay-sticky.is-visible .mafad-pay-sticky__info,
	.mafad-pay-sticky.is-visible .mafad-pay-sticky__cta { animation: none !important; }

	.mafad-pay-sticky { transform: translate3d(0, calc(100% + 24px), 0); }
	.mafad-pay-sticky.is-visible { transform: none; }
}