/* ===== SWP Coupon Premium — frontend — Tema MiFactory ===== */

:root {
	--swp-lime: #aee800;
	--swp-lime-dark: #8fc400;
	--swp-black: #0c0c0c;
	--swp-dark: #161616;
	--swp-red: #e62e2e;
	--swp-white: #ffffff;
	--swp-font-impact: 'Anton', 'Arial Black', Impact, sans-serif;
}

/* ---------- Overlay + modal (popup) ---------- */
.swp-cp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .78);
	backdrop-filter: blur(3px);
	z-index: 99999;
	display: none !important;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: swpFadeIn .25s ease;
}
.swp-cp-overlay.swp-cp-open { display: flex !important; }

.swp-cp-modal {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 90% 60% at 50% -10%, rgba(174, 232, 0, .28), transparent 60%),
		radial-gradient(ellipse 70% 50% at 50% 115%, rgba(174, 232, 0, .12), transparent 60%),
		var(--swp-black);
	border: 3px solid var(--swp-lime);
	border-radius: 18px;
	max-width: 440px;
	width: 100%;
	padding: 44px 32px 30px;
	text-align: center;
	color: var(--swp-white);
	box-shadow: 0 0 0 6px rgba(174, 232, 0, .15), 0 0 60px rgba(174, 232, 0, .35), 0 30px 80px rgba(0, 0, 0, .6);
	animation: swpPopIn .35s cubic-bezier(.2, 1.4, .4, 1);
}

/* Rayos de energía tras el badge */
.swp-cp-modal::before,
.swp-cp-landing-card::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: repeating-conic-gradient(from 0deg, rgba(174, 232, 0, .10) 0deg 6deg, transparent 6deg 18deg);
	animation: swpSpin 40s linear infinite;
	pointer-events: none;
}
.swp-cp-modal > *:not(.swp-cp-close), .swp-cp-landing-card > * { position: relative; z-index: 1; }

.swp-cp-close {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 7px 16px !important;
	z-index: 10;
	background: var(--swp-white) !important;
	color: var(--swp-black) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background .2s, transform .15s;
}
.swp-cp-close:hover { background: #e8e8e8 !important; transform: translateY(-1px); }

/* ---------- Logo ---------- */
.swp-cp-logo-wrap {
	display: inline-block;
	background: var(--swp-white);
	border-radius: 12px;
	padding: 10px 22px;
	margin-bottom: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.swp-cp-logo {
	display: block;
	max-width: 170px;
	max-height: 56px;
	width: auto;
	height: auto;
}

/* ---------- Badge de descuento ---------- */
.swp-cp-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--swp-lime);
	color: var(--swp-black);
	font-family: var(--swp-font-impact);
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 16px;
	transform: rotate(-8deg);
	border: 4px solid var(--swp-black);
	box-shadow: 0 0 0 3px var(--swp-lime), 0 8px 30px rgba(174, 232, 0, .55);
	animation: swpPulse 2s ease-in-out infinite;
}
.swp-cp-badge span { font-size: 14px; letter-spacing: 4px; font-weight: 700; }
.swp-cp-badge-lg { width: 136px; height: 136px; font-size: 46px; }

/* ---------- Titulares estilo póster ---------- */
.swp-cp-modal h2,
.swp-cp-landing-card h1 {
	margin: 0 0 10px;
	font-family: var(--swp-font-impact);
	font-size: 34px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--swp-white);
	text-shadow: 3px 3px 0 #000, 0 0 24px rgba(0, 0, 0, .6);
}
.swp-cp-landing-card h1 { font-size: 44px; }
.swp-cp-hl {
	color: var(--swp-lime);
	text-shadow: 3px 3px 0 #000, 0 0 30px rgba(174, 232, 0, .5);
}
.swp-cp-modal p { margin: 0 0 18px; color: #cfcfcf; font-size: 15px; }
.swp-cp-landing-text { color: #d6d6d6; font-size: 17px; margin: 0 0 22px; }

/* ---------- Formulario ---------- */
.swp-cp-form input[type="email"],
.swp-cp-form input[type="text"]:not(.swp-cp-hp) {
	width: 100%;
	padding: 14px 16px;
	background: #1d1d1d;
	border: 2px solid #3a3a3a;
	border-radius: 10px;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--swp-white);
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
.swp-cp-form input:focus {
	outline: none;
	border-color: var(--swp-lime);
	box-shadow: 0 0 0 3px rgba(174, 232, 0, .25);
}
.swp-cp-form input::placeholder { color: #8a8a8a; }
.swp-cp-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* ---------- Botones ---------- */
.swp-cp-btn {
	display: inline-block;
	width: 100%;
	padding: 16px 20px;
	background: var(--swp-lime);
	color: var(--swp-black) !important;
	border: 0;
	border-radius: 10px;
	font-family: var(--swp-font-impact);
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none !important;
	box-sizing: border-box;
	box-shadow: 0 6px 0 var(--swp-lime-dark), 0 12px 30px rgba(174, 232, 0, .35);
	transition: transform .15s, box-shadow .15s, background .2s;
}
.swp-cp-btn:hover {
	background: #c3ff17;
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--swp-lime-dark), 0 16px 40px rgba(174, 232, 0, .5);
}
.swp-cp-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--swp-lime-dark); }
.swp-cp-btn[disabled] { opacity: .6; cursor: wait; }

.swp-cp-btn-secondary {
	display: inline-block;
	margin-bottom: 12px;
	padding: 11px 20px;
	background: transparent;
	color: var(--swp-lime);
	border: 2px solid var(--swp-lime);
	border-radius: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.swp-cp-btn-secondary:hover { background: var(--swp-lime); color: var(--swp-black); }

.swp-cp-error { color: #ff6b6b; font-size: 14px; margin: 10px 0 0; font-weight: 600; }
.swp-cp-legal { font-size: 11px; color: #777; margin-top: 12px; }
.swp-cp-legal a { color: #999; }
.swp-cp-note { font-size: 13px; color: #9a9a9a; margin-top: 14px; }

/* ---------- Cupón conseguido ---------- */
.swp-cp-success h3 {
	font-family: var(--swp-font-impact);
	text-transform: uppercase;
	font-size: 26px;
	color: var(--swp-white);
	text-shadow: 2px 2px 0 #000;
	margin: 0 0 6px;
}
.swp-cp-code {
	font-family: var(--swp-font-impact);
	font-size: 30px;
	letter-spacing: 4px;
	color: var(--swp-lime);
	background: rgba(174, 232, 0, .08);
	border: 3px dashed var(--swp-lime);
	border-radius: 12px;
	padding: 18px 10px;
	margin: 16px 0 8px;
	user-select: all;
	text-shadow: 0 0 18px rgba(174, 232, 0, .6);
	animation: swpGlow 1.6s ease-in-out infinite alternate;
}
.swp-cp-expiry {
	display: inline-block;
	background: var(--swp-red);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 4px 0 14px;
	transform: rotate(-2deg);
}

/* ---------- Landing ---------- */
.swp-cp-landing { display: flex; justify-content: center; padding: 30px 12px; }
.swp-cp-landing-card {
	position: relative;
	overflow: hidden;
	max-width: 560px;
	width: 100%;
	background:
		radial-gradient(ellipse 100% 55% at 50% -8%, rgba(174, 232, 0, .30), transparent 62%),
		radial-gradient(ellipse 80% 50% at 50% 115%, rgba(174, 232, 0, .12), transparent 60%),
		var(--swp-black);
	border: 3px solid var(--swp-lime);
	border-radius: 22px;
	padding: 56px 40px 40px;
	text-align: center;
	color: var(--swp-white);
	box-shadow: 0 0 0 8px rgba(174, 232, 0, .12), 0 0 80px rgba(174, 232, 0, .3), 0 30px 80px rgba(0, 0, 0, .55);
}
.swp-cp-eyebrow {
	display: inline-block;
	background: var(--swp-red);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 7px 18px;
	border-radius: 6px;
	transform: rotate(-2deg);
	margin-bottom: 18px;
	box-shadow: 0 4px 16px rgba(230, 46, 46, .5);
}
.swp-cp-bases {
	margin-top: 26px;
	text-align: left;
	border-top: 1px solid #2a2a2a;
	padding-top: 14px;
}
.swp-cp-bases summary {
	cursor: pointer;
	color: #9a9a9a;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	list-style: none;
	text-align: center;
	transition: color .2s;
}
.swp-cp-bases summary::-webkit-details-marker { display: none; }
.swp-cp-bases summary:hover { color: var(--swp-lime); }
.swp-cp-bases-body { padding-top: 12px; }
.swp-cp-bases-body p { font-size: 12px; color: #8a8a8a; line-height: 1.6; margin: 0 0 10px; }
.swp-cp-bases-body strong { color: #b5b5b5; }
.swp-cp-bases-body a { color: var(--swp-lime); }

.swp-cp-landing-off {
	text-align: center;
	color: #999;
	background: var(--swp-black);
	border-radius: 16px;
	padding: 40px;
}

/* ---------- Animaciones ---------- */
@keyframes swpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes swpPopIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes swpSpin { to { transform: rotate(360deg); } }
@keyframes swpPulse {
	0%, 100% { transform: rotate(-8deg) scale(1); }
	50% { transform: rotate(-8deg) scale(1.06); }
}
@keyframes swpGlow {
	from { box-shadow: 0 0 12px rgba(174, 232, 0, .25); }
	to { box-shadow: 0 0 34px rgba(174, 232, 0, .6); }
}

@media (max-width: 480px) {
	.swp-cp-modal { padding: 36px 20px 24px; }
	.swp-cp-modal h2 { font-size: 27px; }
	.swp-cp-landing-card { padding: 40px 22px 30px; }
	.swp-cp-landing-card h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.swp-cp-modal::before, .swp-cp-landing-card::before,
	.swp-cp-badge, .swp-cp-code { animation: none; }
}