/* ==========================================================================
   IPTV Trial Popup — self-contained styles.
   Every value is scoped to .iptv-popup-overlay so the site theme's own
   CSS variables and styles are never affected.
   ========================================================================== */

.iptv-popup-overlay {
	--iptv-text: #e8ecf6;
	--iptv-muted: #98a2bd;
	--iptv-border: rgba(255, 255, 255, 0.08);
	--iptv-primary: #6c5ce7;
	--iptv-primary-2: #00d2ff;
	--iptv-grad: linear-gradient(135deg, #6c5ce7 0%, #00d2ff 100%);
	--iptv-wa: #25d366;
	--iptv-danger: #ff5c7a;

	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(5, 7, 14, 0.75);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.25s ease;
	font-family: inherit;
	line-height: 1.6;
	text-align: left;
}

.iptv-popup-overlay[hidden] { display: none; }
.iptv-popup-overlay.iptv-visible { opacity: 1; }

body.iptv-no-scroll { overflow: hidden; }

/* ---------------- Card ---------------- */
.iptv-popup-card {
	position: relative;
	width: min(480px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	/* Invisible scrollbar that KEEPS its space, so the card's size and text
	   wrapping stay exactly as originally designed (no scrollbar, no resize). */
	scrollbar-color: transparent transparent;
	overscroll-behavior: contain;
	background: linear-gradient(180deg, #171d33 0%, #12172a 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 38px 30px 30px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
	transform: translateY(22px) scale(0.96);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--iptv-text);
	box-sizing: border-box;
}

.iptv-popup-card * { box-sizing: border-box; }

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

.iptv-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--iptv-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: var(--iptv-muted);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, color 0.2s;
}
.iptv-popup-close:hover { background: rgba(255, 92, 122, 0.15); color: var(--iptv-danger); }

.iptv-popup-badge {
	display: inline-block;
	background: rgba(37, 211, 102, 0.12);
	border: 1px solid rgba(37, 211, 102, 0.4);
	color: #4ce68a;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.iptv-popup-title { font-size: 1.45rem; font-weight: 800; line-height: 1.25; margin: 0 0 8px; color: var(--iptv-text); }
.iptv-popup-sub { color: var(--iptv-muted); font-size: 0.92rem; margin: 0 0 24px; }

/* ---------------- Form ---------------- */
.iptv-form-group { margin-bottom: 18px; }
.iptv-form-label {
	display: block;
	font-size: 0.83rem;
	font-weight: 700;
	margin-bottom: 7px;
	color: #cbd3e6;
}
.iptv-form-label .req { color: var(--iptv-danger); }

.iptv-input {
	width: 100%;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--iptv-border);
	border-radius: 10px;
	color: var(--iptv-text);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 0.2s, box-shadow 0.2s;
	outline: none;
	height: auto;
	line-height: 1.4;
}
.iptv-input::placeholder { color: #808080; opacity: 1; }
.iptv-input:focus {
	border-color: var(--iptv-primary);
	box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.iptv-input.iptv-invalid { border-color: var(--iptv-danger); }
.iptv-input.iptv-invalid:focus { box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.2); }

.iptv-select,
.iptv-country-select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398a2bd' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}
.iptv-select option,
.iptv-country-select option { background: #161c30; color: var(--iptv-text); }

.iptv-phone-row { display: flex; gap: 10px; align-items: stretch; }
.iptv-country-select { flex: 0 0 45%; min-width: 0; }
.iptv-phone-input { flex: 1; min-width: 0; }

.iptv-error-msg {
	display: none;
	color: var(--iptv-danger);
	font-size: 0.78rem;
	font-weight: 600;
	margin-top: 6px;
}
.iptv-error-msg.iptv-show { display: block; }

/* ---------------- Sub-groups ---------------- */
.iptv-subgroup {
	background: rgba(108, 92, 231, 0.07);
	border: 1px dashed rgba(108, 92, 231, 0.35);
	border-radius: 12px;
	padding: 14px;
	margin-left: 6px;
}

/* ---------------- Chips ---------------- */
.iptv-chips-label {
	display: block;
	font-size: 0.83rem;
	font-weight: 700;
	margin-bottom: 9px;
	color: #cbd3e6;
}
.iptv-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.iptv-chip-btn {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--iptv-border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--iptv-muted);
	font: inherit;
	font-size: 0.83rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}
.iptv-chip-btn:hover { border-color: var(--iptv-primary); color: #fff; }
.iptv-chip-btn.iptv-chip-active {
	background: var(--iptv-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35);
}

/* ---------------- Submit ---------------- */
.iptv-submit-btn {
	width: 100%;
	padding: 14px;
	margin-top: 6px;
	border: none;
	border-radius: 12px;
	background: var(--iptv-grad);
	color: #fff;
	font: inherit;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
	transition: transform 0.2s, opacity 0.2s;
}
.iptv-submit-btn:hover { transform: translateY(-2px); }
.iptv-submit-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }

.iptv-submit-error {
	display: none;
	margin-top: 12px;
	padding: 11px 14px;
	background: rgba(255, 92, 122, 0.1);
	border: 1px solid rgba(255, 92, 122, 0.35);
	border-radius: 10px;
	color: var(--iptv-danger);
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
}
.iptv-submit-error.iptv-show { display: block; }
.iptv-submit-error a { color: #fff; text-decoration: underline; }

.iptv-privacy-note {
	text-align: center;
	color: #5d6784;
	font-size: 0.75rem;
	margin-top: 12px;
}

/* ---------------- Success box ---------------- */
.iptv-success-box {
	display: none;
	text-align: center;
	padding: 20px 6px 6px;
}
.iptv-success-box.iptv-show { display: block; animation: iptvFadeUp 0.45s ease both; }

@keyframes iptvFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.iptv-success-svg { width: 82px; height: 82px; margin: 0 auto 18px; display: block; }
.iptv-success-circle {
	fill: none;
	stroke: var(--iptv-wa);
	stroke-width: 2.5;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: iptvDash 0.7s ease forwards;
}
.iptv-success-check {
	fill: none;
	stroke: var(--iptv-wa);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: iptvDash 0.4s ease 0.5s forwards;
}
@keyframes iptvDash { to { stroke-dashoffset: 0; } }

.iptv-success-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; color: var(--iptv-text); }
.iptv-success-text { color: var(--iptv-muted); font-size: 0.92rem; margin: 0 0 22px; }

.iptv-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border-radius: 12px;
	background: var(--iptv-wa);
	color: #06281a;
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35);
	transition: transform 0.2s;
}
.iptv-wa-btn:hover { transform: translateY(-2px); }

/* ---------------- Responsive ---------------- */
@media (max-width: 520px) {
	.iptv-popup-card { padding: 32px 18px 22px; }
	.iptv-phone-row { flex-direction: column; }
	.iptv-country-select { flex-basis: auto; width: 100%; }
}

@media (max-width: 480px) {
	.iptv-phone-row { align-items: stretch; }
	.iptv-country-select,
	.iptv-phone-input {
		min-height: 44px;
		height: 44px;
		box-sizing: border-box;
	}
	.iptv-country-select { flex: 0 0 48%; }
}