/* ══════════════════════════════════════════════════════════════════════════════
   Wolf IPTV — wolf-misc.css
   ──────────────────────────────────────────────────────────────────────────────
   Static and error pages styles:
     - 404.php (Encrypted Channel theme)
     - 500.php
     - page.php (static pages — terms, privacy, etc.)

   Loaded after wolf-core.css.

   Structure:
   1. Static page (.static-page, .sp-*)
   2. 404 — Encrypted Channel theme (.enc-*)
   3. @keyframes for the 404 animations

   Generated from wolf.css L1073-1351 (M7 — 2026-04-29)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── STATIC PAGE ────────────────────────────────────── */
/* ── STATIC PAGE ──────────────────────────────────────── */
.static-page { max-width: 820px; margin: 0 auto; padding: 100px 24px 60px; }

.sp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 24px; }
.sp-breadcrumb a { color: var(--wolf-sub); text-decoration: none; transition: color 0.2s; }
.sp-breadcrumb a:hover { color: var(--wolf-primary); }
.sp-breadcrumb-sep { color: var(--wolf-muted); font-size: 11px; }
.sp-breadcrumb-current { color: var(--wolf-text); font-weight: 700; }

.sp-title { font-size: 32px; font-weight: 900; margin-bottom: 32px; line-height: 1.3; }

.sp-content { font-size: 15px; line-height: 2; color: var(--wolf-sub); }
.sp-content h2 { font-size: 22px; font-weight: 900; color: var(--wolf-text); margin: 32px 0 12px; }
.sp-content h3 { font-size: 18px; font-weight: 700; color: var(--wolf-text); margin: 24px 0 8px; }
.sp-content p { margin-bottom: 16px; }
.sp-content ul, .sp-content ol { margin: 0 24px 16px; }
.sp-content li { margin-bottom: 6px; }
.sp-content a { color: var(--wolf-primary); text-decoration: underline; }
.sp-content a:hover { color: var(--wolf-primary-light); }
.sp-content strong { color: var(--wolf-text); }

/* ══════════════════════════════════════════════════════════════
   404 — ENCRYPTED CHANNEL (قناة مشفّرة)
══════════════════════════════════════════════════════════════ */
.enc-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 40px;
    position: relative;
    overflow: hidden;
    background: var(--wolf-bg);
}

/* Pixelated mosaic background */
.enc-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.12;
    background:
        linear-gradient(45deg, var(--wolf-primary) 25%, transparent 25%) -20px 0,
        linear-gradient(-45deg, var(--wolf-primary) 25%, transparent 25%) -20px 0,
        linear-gradient(45deg, transparent 75%, var(--wolf-red) 75%),
        linear-gradient(-45deg, transparent 75%, var(--wolf-red) 75%);
    background-size: 40px 40px;
    animation: encBgShift 2s steps(3) infinite;
}
@keyframes encBgShift {
    0% { transform: translate(0,0); }
    33% { transform: translate(10px, -10px); }
    66% { transform: translate(-10px, 5px); }
    100% { transform: translate(0,0); }
}

/* Scanlines */
.enc-404::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.08) 3px,
        rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Main card */
.enc-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    background: var(--wolf-surface);
    border: 1px solid var(--wolf-border2);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

/* Scrambled screen area */
.enc-screen {
    position: relative;
    padding: 48px 32px 32px;
    text-align: center;
    overflow: hidden;
}

/* Pixelated blocks animation */
.enc-pixels {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.enc-pixel {
    position: absolute;
    border-radius: 2px;
    animation: encPixelFlash 1.5s steps(1) infinite;
    opacity: 0.15;
}
.enc-pixel:nth-child(1)  { width:32px; height:24px; top:8%;  left:5%;  background:var(--wolf-primary); animation-delay:0s; }
.enc-pixel:nth-child(2)  { width:24px; height:32px; top:15%; left:25%; background:var(--wolf-red);     animation-delay:0.2s; }
.enc-pixel:nth-child(3)  { width:40px; height:20px; top:5%;  left:50%; background:#22c55e;             animation-delay:0.4s; }
.enc-pixel:nth-child(4)  { width:28px; height:28px; top:20%; left:75%; background:var(--wolf-primary); animation-delay:0.6s; }
.enc-pixel:nth-child(5)  { width:36px; height:16px; top:35%; left:10%; background:#f59e0b;             animation-delay:0.8s; }
.enc-pixel:nth-child(6)  { width:20px; height:36px; top:40%; left:40%; background:var(--wolf-red);     animation-delay:0.3s; }
.enc-pixel:nth-child(7)  { width:44px; height:20px; top:10%; left:85%; background:#3b82f6;             animation-delay:0.7s; }
.enc-pixel:nth-child(8)  { width:24px; height:24px; top:45%; left:70%; background:#22c55e;             animation-delay:0.1s; }
.enc-pixel:nth-child(9)  { width:32px; height:16px; top:55%; left:20%; background:var(--wolf-primary); animation-delay:0.5s; }
.enc-pixel:nth-child(10) { width:28px; height:32px; top:50%; left:55%; background:#f59e0b;             animation-delay:0.9s; }
.enc-pixel:nth-child(11) { width:20px; height:20px; top:60%; left:85%; background:var(--wolf-red);     animation-delay:0.15s; }
.enc-pixel:nth-child(12) { width:36px; height:24px; top:65%; left:35%; background:#3b82f6;             animation-delay:0.45s; }

@keyframes encPixelFlash {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.1); }
}

/* Lock icon */
.enc-lock {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: rgba(200,16,46,0.1);
    border: 2px solid rgba(200,16,46,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: encLockPulse 2.5s ease-in-out infinite;
}
.enc-lock i {
    font-size: 28px;
    color: var(--wolf-red);
}
@keyframes encLockPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.15); }
    50% { box-shadow: 0 0 0 16px rgba(200,16,46,0); }
}

/* Code */
.enc-code {
    position: relative;
    z-index: 2;
    font-size: 64px;
    font-weight: 900;
    color: var(--wolf-text);
    letter-spacing: 6px;
    line-height: 1;
    margin: 0 0 12px;
    text-shadow: 0 0 30px rgba(200,16,46,0.3);
    animation: encGlitch 4s infinite;
}
@keyframes encGlitch {
    0%, 90%, 100% { transform: translate(0); text-shadow: 0 0 30px rgba(200,16,46,0.3); }
    92% { transform: translate(-4px, 2px); text-shadow: 4px 0 rgba(124,77,255,0.6), -4px 0 rgba(200,16,46,0.6); }
    94% { transform: translate(4px, -2px); text-shadow: -4px 0 rgba(124,77,255,0.6), 4px 0 rgba(200,16,46,0.6); }
    96% { transform: translate(-2px, 0); text-shadow: 0 0 30px rgba(200,16,46,0.3); }
}

.enc-title {
    position: relative;
    z-index: 2;
    font-size: 22px;
    font-weight: 900;
    color: var(--wolf-text);
    margin: 0 0 6px;
}

.enc-desc {
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: var(--wolf-muted);
    margin: 0 0 6px;
    line-height: 1.8;
}

/* Status bar */
.enc-status {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200,16,46,0.08);
    border: 1px solid rgba(200,16,46,0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    font-family: monospace;
    color: var(--wolf-red);
    margin: 16px 0 0;
    letter-spacing: 0.5px;
}
.enc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wolf-red);
    animation: encDotBlink 1s infinite;
    flex-shrink: 0;
}
@keyframes encDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* CTA section */
.enc-cta {
    padding: 24px 32px 32px;
    text-align: center;
    border-top: 1px solid var(--wolf-border2);
    background: var(--wolf-surface2);
}

.enc-cta-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--wolf-sub);
    margin: 0 0 16px;
}

.enc-cta-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.enc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wolf-primary);
    color: #fff;
    padding: 12px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(124,77,255,0.3);
}
.enc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,77,255,0.4);
    filter: brightness(1.1);
}

.enc-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wolf-surface);
    color: var(--wolf-sub);
    padding: 12px 28px;
    border-radius: 12px;
    border: 1px solid var(--wolf-border2);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.2s;
}
.enc-btn-secondary:hover {
    color: var(--wolf-text);
    border-color: var(--wolf-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Misc page rules
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 640px — Encrypted Channel responsive ───────────────────── */
@media (max-width: 640px) {
    .enc-screen { padding: 36px 20px 24px; }
    .enc-code { font-size: 48px; letter-spacing: 4px; }
    .enc-title { font-size: 18px; }
    .enc-lock { width: 60px; height: 60px; }
    .enc-lock i { font-size: 22px; }
    .enc-cta { padding: 20px; }
    .enc-cta-buttons { flex-direction: column; }
    .enc-btn-primary, .enc-btn-secondary { justify-content: center; }
}