/* -- Channel Page CSS — US Edition -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
 --bg-body: hsl(210, 20%, 96%);
 --bg-card: hsl(0, 0%, 100%);
 --text-primary: hsl(210, 20%, 15%);
 --text-secondary: hsl(210, 10%, 40%);
 --text-muted: hsl(210, 8%, 60%);
 --accent-red: hsl(0, 75%, 52%);
 --accent-yellow: #FFC107;
 --border-card: hsl(210, 15%, 88%);
 --radius: 12px;
 --shadow-card: 0 1px 4px rgba(0,0,0,0.07);
 --shadow-hover: 0 6px 20px rgba(0,0,0,0.11);
 --max-width: 860px;
 --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
 font-family: var(--font);
 background: var(--bg-body);
 color: var(--text-primary);
 line-height: 1.5;
 min-height: 100vh;
}

/* -- Header -- */
.site-header {
 background: #ffffff;
 padding: 4px 20px;
 text-align: center;
 border-bottom: 1px solid var(--border-card);
}

.site-header .logo-img {
 height: 16px;
 max-width: 100%;
 vertical-align: middle;
}

/* -- Container -- */
.container {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 20px;
}

/* -- Back nav -- */
.back-nav {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 18px 20px 0;
}

.back-btn {
 color: var(--text-secondary);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.9rem;
 transition: color 0.2s;
}

.back-btn:hover { color: var(--text-primary); }

/* -- Hero -- */
.channel-hero {
 text-align: center;
 padding: 48px 20px 40px;
 border-bottom: 1px solid var(--border-card);
}

.channel-logo-box {
 width: 110px;
 height: 110px;
 margin: 0 auto 20px;
 background: var(--bg-card);
 border-radius: var(--radius);
 border: 1px solid var(--border-card);
 box-shadow: var(--shadow-card);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

.channel-logo-box img {
 width: 80%;
 height: 80%;
 object-fit: contain;
}

.fallback-text {
 font-weight: 800;
 font-size: 1.8rem;
 color: var(--text-primary);
}

.channel-title {
 font-size: 2rem;
 font-weight: 800;
 margin-bottom: 14px;
}

.channel-desc {
 font-size: 1rem;
 color: var(--text-secondary);
 max-width: 580px;
 margin: 0 auto 28px;
 line-height: 1.65;
}

/* -- Action Buttons -- */
.action-buttons {
 display: flex;
 flex-direction: column;
 gap: 12px;
 width: 100%;
 max-width: 500px;
 margin: 0 auto 28px;
 align-items: stretch;
}

@media (min-width: 600px) {
 .action-buttons {
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 max-width: none;
 }
}

.btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 24px;
 border-radius: 8px;
 font-weight: 700;
 font-size: 0.95rem;
 text-decoration: none;
 white-space: nowrap;
 transition: all 0.2s ease;
}

@media (min-width: 600px) {
 .btn {
 flex: 1;
 max-width: 240px;
 }
}

.btn-browser {
 background: #2563EB;
 color: #fff;
 border: 1.5px solid #2563EB;
}

.btn-android {
 background: #fff;
 color: #DC2626;
 border: 1.5px solid #DC2626;
}

.btn-ios {
 background: #fff;
 color: #16A34A;
 border: 1.5px solid #16A34A;
}

.btn:hover {
 transform: translateY(-2px);
 filter: brightness(0.95);
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ad-note {
 font-size: 0.65rem;
 color: var(--text-muted);
 width: 100%;
 flex-basis: 100%;
 text-align: center;
 margin-top: 4px;
 display: block;
}

/* -- Content Blocks -- */
.content-section {
 padding: 32px 0;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.content-block {
 background: var(--bg-card);
 border: 1px solid var(--border-card);
 border-radius: var(--radius);
 padding: 28px 30px;
 box-shadow: var(--shadow-card);
}

.content-block h2 {
 font-size: 1.15rem;
 font-weight: 700;
 margin-bottom: 16px;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 border-left: 4px solid #2563EB;
 padding-left: 12px;
}

.content-list, .steps-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.content-list li {
 position: relative;
 padding-left: 22px;
 font-size: 0.93rem;
 color: var(--text-primary);
}

.content-list li::before {
 content: '\2713';
 position: absolute;
 left: 0;
 color: var(--accent-red);
 font-weight: 800;
}

.steps-list {
 counter-reset: steps;
}

.steps-list li {
 position: relative;
 padding-left: 28px;
 font-size: 0.93rem;
 color: var(--text-primary);
 counter-increment: steps;
}

.steps-list li::before {
 content: counter(steps);
 position: absolute;
 left: 0;
 width: 20px;
 height: 20px;
 background: var(--accent-red);
 color: #fff;
 border-radius: 50%;
 font-size: 0.7rem;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 top: 1px;
}

.history-text {
 font-size: 0.93rem;
 color: var(--text-secondary);
 line-height: 1.7;
}

/* -- Footer -- */
footer { padding: 0 0 32px; }

.warning-box {
 background: hsl(45, 90%, 95%);
 border: 1px solid hsl(45, 70%, 80%);
 border-radius: var(--radius);
 padding: 14px 18px;
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin: 30px 0 20px;
}

.warning-box p {
 font-size: 0.8rem;
 color: hsl(35, 40%, 35%);
 line-height: 1.6;
}

.footer-nav {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
 margin-bottom: 14px;
}

.footer-nav a {
 color: var(--text-secondary);
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 500;
 transition: color 0.2s;
}

.footer-nav a:hover { color: var(--text-primary); }

.footer-copy {
 text-align: center;
 font-size: 0.82rem;
 color: var(--text-muted);
}

@media (max-width: 600px) {
 .channel-title { font-size: 1.6rem; }
 .content-block { padding: 20px; }
 .btn { padding: 11px 20px; font-size: 0.88rem; }
}


/* --- Logo Box Refinement --- */
.channel-logo-box {
 width: 140px;
 height: 140px;
 margin: 0 auto 24px;
 background: #fff;
 border-radius: 20px;
 border: 2px solid #000;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 padding: 0;
}

.channel-logo-box img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}
/* --- Specific Channel Logo Scaling --- */
[data-channel="espn"] img, [data-channel="espn-nl"] img {
 transform: scale(1.3); /* Zoom in to fill the box and hide borders */
}

[data-channel="amazon prime"] img {
 transform: scale(1.15); /* Zoom in to fill the box */
}

[data-channel="tnt sports"] img {
 transform: scale(0.88); /* Slight shrink to avoid touching borders */
}

/* -- Global Preloader (igual /canais/) -- */
body.loading {
 overflow: hidden;
}

#av-loader {
 position: fixed;
 inset: 0;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 z-index: 9999;
}

.ripple-container {
 position: relative;
 width: 0;
 height: 0;
}

.ripple-container::before,
.ripple-container::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 30px;
 height: 30px;
 margin: -20px 0 0 -20px;
 border: 4px solid #000000;
 border-radius: 50%;
 opacity: 0;
 animation: ripple 1s linear infinite;
}

.ripple-container::after {
 animation-delay: 0.5s;
}

@keyframes ripple {
 0% { transform: scale(0.2); opacity: 1; }
 100% { transform: scale(1.8); opacity: 0; }
}

#av-loader.hide {
 animation: fadeout 0.5s forwards;
}

@keyframes fadeout {
 to { opacity: 0; visibility: hidden; }
}