/* ==========================================================================
   IPTV Canada Officiel - Design System
   Palette pulled directly from the Filma Elementor kit (templates/global.json)
   ========================================================================== */

:root {
	--iptvco-primary: #F71A2C;
	--iptvco-primary-dark: #C21422;
	--iptvco-secondary: #000000;
	--iptvco-bg: #0C0C0C;
	--iptvco-surface: #151515;
	--iptvco-surface-2: #1C1C1C;
	--iptvco-text: #C6C6C6;
	--iptvco-white: #FFFFFF;
	--iptvco-border: #4F4F4F4D;
	--iptvco-success: #2ECC71;
	--iptvco-font-heading: 'Fira Sans Condensed', sans-serif;
	--iptvco-font-body: 'Open Sans', sans-serif;
	--iptvco-radius: 10px;
	--iptvco-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Force dark background everywhere so no grey Elementor section ever shows
   through, and repoint the Kit's own body background global. */
html,
body,
body.elementor-page,
.e-con,
.elementor-section {
	background-color: var(--iptvco-bg);
}

body {
	color: var(--iptvco-text);
	font-family: var(--iptvco-font-body);
}

h1, h2, h3, h4, h5, h6,
.iptvco-heading {
	font-family: var(--iptvco-font-heading);
	color: var(--iptvco-white);
}

a {
	color: var(--iptvco-primary);
}
a:hover,
a:focus {
	color: var(--iptvco-white);
}

::selection {
	background: var(--iptvco-primary);
	color: var(--iptvco-white);
}

/* ---- Buttons ---- */
.iptvco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--iptvco-font-body);
	font-weight: 600;
	border-radius: var(--iptvco-radius);
	padding: 16px 32px;
	border: 1px solid var(--iptvco-primary);
	background: var(--iptvco-primary);
	color: var(--iptvco-white);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .15s ease;
	cursor: pointer;
}
.iptvco-btn:hover,
.iptvco-btn:focus-visible {
	background: transparent;
	color: var(--iptvco-primary);
	transform: translateY(-1px);
}
.iptvco-btn--ghost {
	background: transparent;
	color: var(--iptvco-white);
	border-color: var(--iptvco-border);
}
.iptvco-btn--ghost:hover,
.iptvco-btn--ghost:focus-visible {
	border-color: var(--iptvco-primary);
	color: var(--iptvco-primary);
	background: transparent;
}

/* ---- Cards / surfaces ---- */
.iptvco-card {
	background: var(--iptvco-surface);
	border: 1px solid var(--iptvco-border);
	border-radius: var(--iptvco-radius);
	padding: 32px;
}
.iptvco-card--popular {
	border-color: var(--iptvco-primary);
	box-shadow: var(--iptvco-shadow);
	position: relative;
}
.iptvco-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--iptvco-primary);
	color: var(--iptvco-white);
	border-radius: 999px;
	padding: 6px 14px;
}

/* ---- Forms ---- */
.iptvco-field label,
.woocommerce form .form-row label {
	color: var(--iptvco-text);
	font-weight: 600;
}
.iptvco-field input,
.iptvco-field select,
.iptvco-field textarea,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	background: var(--iptvco-bg);
	border: 1px solid var(--iptvco-border);
	color: var(--iptvco-white);
	border-radius: var(--iptvco-radius);
	padding: 14px 16px;
	width: 100%;
}
.iptvco-field input:focus,
.iptvco-field select:focus,
.iptvco-field textarea:focus {
	border-color: var(--iptvco-primary);
	outline: none;
}

/* Device checkbox grid used on checkout */
.iptvco-device-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}
.iptvco-device-option {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--iptvco-border);
	border-radius: var(--iptvco-radius);
	padding: 14px 16px;
	background: var(--iptvco-surface);
	cursor: pointer;
	transition: border-color .15s ease;
}
.iptvco-device-option:has(input:checked) {
	border-color: var(--iptvco-primary);
}
.iptvco-device-option input {
	width: 18px;
	height: 18px;
	accent-color: var(--iptvco-primary);
}

/* ---- Responsive container ---- */
.iptvco-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 20px;
}

@media (max-width: 480px) {
	.iptvco-container { padding-inline: 16px; }
	.iptvco-device-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- iOS Safari safety ----
   iPhone Safari renders black squares from masked/filtered layers. Disable
   heavy mask/filter/backdrop effects on touch iOS specifically. */
@supports (-webkit-touch-callout: none) {
	.iptvco-hero,
	.iptvco-hero * {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}
	.iptvco-no-ios-filter {
		filter: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* Never blur/backdrop-filter the sticky header: it traps ElementsKit's fixed
   off-canvas mobile menu on some devices. */
.ekit-nav-menu--sticky,
header.site-header {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}