/* Graduation for LearnDash — Overlay de celebración premium */

.gfl-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	z-index: 2147483647 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba( 6, 10, 20, 0.55 );
	backdrop-filter: blur( 3px );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
	clip-path: none !important;
	font-family: Arial, Helvetica, sans-serif;
}

.gfl-overlay.gfl-visible {
	opacity: 1;
	visibility: visible;
}

.gfl-card {
	position: relative;
	z-index: 2;
	max-width: 390px;
	width: 100%;
	text-align: center;
	color: #ffffff;
	border-radius: 28px;
	padding: 28px;
	padding-top: 56px;
	box-shadow: 0 25px 70px rgba( 0, 0, 0, 0.35 );
	transform: scale( 0.85 ) translateY( 20px );
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	background: linear-gradient( 180deg, #6ea8ff 0%, #4f82d7 45%, #3f6fc0 100% );
}

.gfl-overlay.gfl-visible .gfl-card {
	transform: scale( 1 ) translateY( 0 );
}

.gfl-close-x {
	position: absolute;
	right: 18px;
	top: 12px;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: rgba( 255, 255, 255, 0.85 );
	user-select: none;
}

.gfl-close-x:hover {
	color: #ffffff;
}

.gfl-medal-wrap {
	width: 110px;
	height: 110px;
	margin: -70px auto 8px;
	filter: drop-shadow( 0 0 20px rgba( 255, 215, 0, 0.5 ) );
	animation: gfl-medal-bounce 2.5s infinite;
}

.gfl-medal {
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes gfl-medal-bounce {
	50% {
		transform: translateY( -8px ) rotate( 4deg );
	}
}

.gfl-title {
	margin: 8px 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
}

.gfl-subtitle {
	margin: 10px 0 24px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.92 );
}

.gfl-btn-cert {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	background: #ff3158;
	color: #ffffff;
	padding: 15px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba( 255, 49, 88, 0.4 );
	animation: gfl-pulse 2s infinite;
	margin-top: 12px;
}

.gfl-medal-wrap + .gfl-title + .gfl-subtitle + .gfl-btn-cert {
	margin-top: 4px;
}

@keyframes gfl-pulse {
	50% {
		transform: scale( 1.04 );
	}
}

/* Tema: Classic — claro, estilo macOS (blanco/gris perla, acento azul sistema). */
.gfl-theme-classic .gfl-card {
	background: linear-gradient( 180deg, #ffffff 0%, #f5f5f7 100% );
	box-shadow: 0 25px 70px rgba( 0, 0, 0, 0.18 ), 0 0 0 1px rgba( 0, 0, 0, 0.06 );
}

.gfl-theme-classic .gfl-close-x {
	color: rgba( 0, 0, 0, 0.35 );
}

.gfl-theme-classic .gfl-close-x:hover {
	color: rgba( 0, 0, 0, 0.65 );
}

.gfl-theme-classic .gfl-medal-wrap {
	filter: drop-shadow( 0 4px 14px rgba( 0, 0, 0, 0.18 ) );
}

.gfl-theme-classic .gfl-title {
	color: #1d1d1f;
}

.gfl-theme-classic .gfl-subtitle {
	color: #6e6e73;
}

.gfl-theme-classic .gfl-btn-cert {
	background: #0071e3;
	color: #ffffff;
	box-shadow: 0 10px 25px rgba( 0, 113, 227, 0.3 );
}

/* Tema: Premium Blue — el degradado azul por defecto (idéntico al diseño base). */
.gfl-theme-premium-blue .gfl-card {
	background: linear-gradient( 180deg, #6ea8ff 0%, #4f82d7 45%, #3f6fc0 100% );
}

/* Tema: Epic Graduation — morado/dorado. */
.gfl-theme-epic .gfl-card {
	background: linear-gradient( 180deg, #4c2a8f 0%, #2d1b4e 100% );
	box-shadow: 0 25px 70px rgba( 124, 58, 237, 0.45 );
}

.gfl-theme-epic .gfl-title {
	color: #fbbf24;
}

.gfl-theme-epic .gfl-btn-cert {
	background: linear-gradient( 135deg, #fbbf24, #f59e0b );
	color: #1a1033;
	box-shadow: 0 10px 25px rgba( 251, 191, 36, 0.4 );
}

/* Partículas (lluvia, subida, explosión, cohetes) */
.gfl-particula {
	position: fixed !important;
	z-index: 2147483647 !important;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow( 0 0 8px rgba( 255, 255, 255, 0.7 ) );
}

@keyframes gfl-bajar {
	from {
		transform: translateY( -120px ) rotate( 0deg );
		opacity: 1;
	}
	to {
		transform: translateY( 120vh ) rotate( 720deg );
		opacity: 0;
	}
}

@keyframes gfl-subir {
	from {
		transform: translateY( 120px ) rotate( 0deg );
		opacity: 1;
	}
	to {
		transform: translateY( -120vh ) rotate( 720deg );
		opacity: 0;
	}
}

@keyframes gfl-explotar {
	from {
		transform: translate( 0, 0 ) scale( 0.3 );
		opacity: 1;
	}
	to {
		transform: translate( var( --gfl-x ), var( --gfl-y ) ) scale( 1.2 );
		opacity: 0;
	}
}

@keyframes gfl-rocket {
	0% {
		transform: translateY( 0 ) rotate( -10deg );
		opacity: 1;
	}
	100% {
		transform: translateY( -130vh ) translateX( var( --gfl-drift ) ) rotate( 15deg );
		opacity: 0;
	}
}

/* Confeti premium: rectángulos, cuadrados y círculos, con deriva opcional */
.gfl-confetti-piece {
	position: fixed !important;
	top: -20px;
	z-index: 2147483647 !important;
	opacity: 0.95;
	pointer-events: none;
	--gfl-drift: 0px;
}

.gfl-shape-rect {
	width: 8px;
	height: 16px;
}

.gfl-shape-square {
	width: 10px;
	height: 10px;
}

.gfl-shape-circle {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

@keyframes gfl-confetti-fall {
	0% {
		transform: translateY( -20px ) translateX( 0 ) rotate( 0deg );
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: translateY( 110vh ) translateX( var( --gfl-drift ) ) rotate( 720deg );
		opacity: 0.35;
	}
}

@media ( max-width: 480px ) {

	.gfl-card {
		padding: 24px;
		padding-top: 52px;
		max-width: 88vw;
	}

	.gfl-title {
		font-size: 30px;
	}

	.gfl-medal-wrap {
		width: 90px;
		height: 90px;
		margin: -60px auto 8px;
	}
}