/*
Theme Name: IPTV Pro
Theme URI: https://iptvuk-iptv.com/
Description: Premium dark-mode streaming theme for IPTV providers. Hello Elementor child theme with Hero Sliders, Channels and Movies custom post types, and a fully coded front-page demo that works before a single Elementor widget is placed.
Author: iptvuk-iptv.com
Author URI: https://iptvuk-iptv.com/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iptv-pro
Tags: elementor, dark, streaming, iptv, full-width-template, custom-colors, responsive-layout
Requires PHP: 7.4
Tested up to: 6.6
*/

/* =========================================================================
   BASE — design tokens, reset and typography.
   Section layout lives in assets/css/main.css.
   ========================================================================= */

:root {
	/* Core palette */
	--ip-bg: #0a0a0a;
	--ip-text: #ffffff;
	--ip-accent: #e50914;
	--ip-accent-rgb: 229, 9, 20;

	/* Derived surfaces */
	--ip-surface: #141414;
	--ip-surface-2: #1c1c1c;
	--ip-surface-3: #242424;
	--ip-muted: #a1a1aa;
	--ip-dim: #71717a;
	--ip-border: rgba(255, 255, 255, .09);
	--ip-border-strong: rgba(255, 255, 255, .18);

	/* Accents */
	--ip-gold: #f5b301;
	--ip-green: #22c55e;

	/* Shape */
	--ip-radius: 14px;
	--ip-radius-lg: 20px;
	--ip-radius-pill: 999px;

	/* Depth */
	--ip-shadow: 0 16px 40px rgba(0, 0, 0, .5);
	--ip-shadow-lg: 0 28px 70px rgba(0, 0, 0, .65);
	--ip-glow: 0 12px 36px rgba(var(--ip-accent-rgb), .38);

	/* Motion */
	--ip-ease: cubic-bezier(.22, .61, .36, 1);
	--ip-speed: .3s;

	/* Rhythm */
	--ip-container: 1280px;
	--ip-gutter: 20px;
	--ip-section-y: 96px;
}

/* ------------------------------ Reset ---------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ip-bg);
	color: var(--ip-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Images awaiting an upload render as a neutral wireframe block rather than a
   broken-image icon. Never use src="" — browsers resolve it to the page URL
   and re-download the whole document. */
.ip-img-empty {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px),
		var(--ip-surface-2);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------ Typography ----------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--ip-text);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p {
	margin: 0 0 1rem;
}

::selection {
	background: var(--ip-accent);
	color: #fff;
}

/* ------------------------------ Layout helpers ------------------------- */
.ip-container {
	width: 100%;
	max-width: var(--ip-container);
	margin-inline: auto;
	padding-inline: var(--ip-gutter);
}

.ip-container--wide {
	max-width: 1440px;
}

.ip-section {
	padding-block: var(--ip-section-y);
}

.ip-section--tight {
	padding-block: calc(var(--ip-section-y) * .6);
}

.ip-section--alt {
	background: #0d0d0d;
}

/* Section heading block */
.ip-head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.ip-head--left {
	margin-inline: 0;
	text-align: left;
}

.ip-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--ip-accent);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.ip-head p {
	margin: 0;
	color: var(--ip-muted);
	font-size: 17px;
}

/* ------------------------------ Buttons -------------------------------- */
.ip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 32px;
	border: 1px solid transparent;
	border-radius: var(--ip-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform var(--ip-speed) var(--ip-ease),
		box-shadow var(--ip-speed) var(--ip-ease),
		background-color var(--ip-speed) var(--ip-ease),
		border-color var(--ip-speed) var(--ip-ease);
}

.ip-btn--primary {
	background: var(--ip-accent);
	border-color: var(--ip-accent);
	color: #fff;
	box-shadow: 0 10px 26px rgba(var(--ip-accent-rgb), .3);
}

.ip-btn--primary:hover,
.ip-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--ip-glow);
	color: #fff;
}

.ip-btn--ghost {
	background: rgba(255, 255, 255, .08);
	border-color: var(--ip-border-strong);
	color: var(--ip-text);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ip-btn--ghost:hover,
.ip-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .16);
	transform: translateY(-2px);
}

.ip-btn--outline {
	background: transparent;
	border-color: var(--ip-border-strong);
	color: var(--ip-muted);
	padding: 10px 20px;
	font-size: 13px;
}

.ip-btn--outline:hover,
.ip-btn--outline:focus-visible {
	border-color: var(--ip-accent);
	color: var(--ip-text);
}

.ip-btn--block {
	display: flex;
	width: 100%;
}

/* ------------------------------ Chips / badges ------------------------- */
.ip-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border: 1px solid var(--ip-border-strong);
	border-radius: 7px;
	background: rgba(10, 10, 10, .8);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ip-chip--accent {
	background: var(--ip-accent);
	border-color: transparent;
}

.ip-chip--rating {
	color: var(--ip-gold);
}

/* ------------------------------ Accessibility -------------------------- */
.ip-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--ip-gold);
	outline-offset: 3px;
}

/* ------------------------------ Responsive base ------------------------ */
@media (max-width: 1024px) {
	:root {
		--ip-section-y: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--ip-section-y: 56px;
		--ip-gutter: 16px;
	}

	body {
		font-size: 15px;
	}

	.ip-head {
		margin-bottom: 32px;
	}

	.ip-head p {
		font-size: 15.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}