/* ═══════════════════════════════════════════════════════════════
   FOOTER — Prime IPTV
   Dark cinematic identity — visually unified with the hero system
   Same color palette, glow language, and grid overlay as hp-hero
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Background: exact hero atmosphere (override Tailwind) ── */
footer,
.footer,
.site-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #05010b !important;
  background:
    radial-gradient(ellipse 80% 65% at 50% 35%,  rgba(123,47,255,0.28) 0%, rgba(123,47,255,0.08) 40%, transparent 66%),
    radial-gradient(ellipse 55% 50% at 92% 15%,  rgba(176,38,255,0.14) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 8%  68%,  rgba(99,102,241,0.11) 0%, transparent 50%),
    radial-gradient(120% 90% at 50% -5%,         rgba(123,47,255,0.16) 0%, transparent 55%),
    radial-gradient(90%  80% at 50% 115%,        rgba(176,38,255,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0a0418 0%, #05010F 55%, #04010c 100%) !important;
  position: relative !important;
  isolation: isolate;
  height: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ── 2 · Grid overlay ── */
footer::before,
.footer::before,
.site-footer::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.35;
  filter: blur(90px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, rgba(0,0,0,0.7) 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, rgba(0,0,0,0.7) 0%, transparent 82%);
}

/* ── 3 · Top cinematic fade — disabled (was causing white gap at footer start) ── */
footer::after,
.footer::after,
.site-footer::after {
  display: none !important;
  content: none !important;
}

/* ── 4 · Content above ambient layer ── */
footer .container,
footer > .container {
  position: relative;
  z-index: 3;
  padding-bottom: 0;
}

footer .container > *:last-child,
footer > .container > *:last-child {
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   Direction + alignment
   ═══════════════════════════════════════════════════════════════ */
footer { direction: rtl; }

footer h3, footer h4, footer p, footer ul, footer li {
  text-align: right;
}

/* LTR text alignment for non-Arabic pages — keep footer grid RTL for column order */
html[lang="en"] footer h3, html[lang="en"] footer h4,
html[lang="en"] footer p,  html[lang="en"] footer ul, html[lang="en"] footer li, html[lang="en"] footer a,
html[lang="fr"] footer h3, html[lang="fr"] footer h4,
html[lang="fr"] footer p,  html[lang="fr"] footer ul, html[lang="fr"] footer li, html[lang="fr"] footer a,
html[lang="es"] footer h3, html[lang="es"] footer h4,
html[lang="es"] footer p,  html[lang="es"] footer ul, html[lang="es"] footer li, html[lang="es"] footer a,
html[lang="nl"] footer h3, html[lang="nl"] footer h4,
html[lang="nl"] footer p,  html[lang="nl"] footer ul, html[lang="nl"] footer li, html[lang="nl"] footer a,
html[lang="pt"] footer h3, html[lang="pt"] footer h4,
html[lang="pt"] footer p,  html[lang="pt"] footer ul, html[lang="pt"] footer li, html[lang="pt"] footer a,
html[lang="de"] footer h3, html[lang="de"] footer h4,
html[lang="de"] footer p,  html[lang="de"] footer ul, html[lang="de"] footer li, html[lang="de"] footer a,
html[lang="tr"] footer h3, html[lang="tr"] footer h4,
html[lang="tr"] footer p,  html[lang="tr"] footer ul, html[lang="tr"] footer li, html[lang="tr"] footer a,
html[lang="it"] footer h3, html[lang="it"] footer h4,
html[lang="it"] footer p,  html[lang="it"] footer ul, html[lang="it"] footer li, html[lang="it"] footer a {
  text-align: left;
  direction: ltr;
}

/* ═══════════════════════════════════════════════════════════════
   Typography — Premium bright
   ═══════════════════════════════════════════════════════════════ */
footer h3,
footer h4 {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(180,90,255,0.45);
  letter-spacing: 0.01em;
}

footer p,
footer ul li,
footer .text-gray-200 {
  color: rgba(255,255,255,0.82) !important;
  text-shadow: 0 0 8px rgba(180,90,255,0.18);
}

footer .text-gray-300 {
  color: rgba(255,255,255,0.70) !important;
}

/* ── Links ── */
footer a:not([href*="wa.me"]):not(.inline-flex):not(.flex) {
  color: rgba(255,255,255,0.88);
  transition: color 0.22s ease, text-shadow 0.22s ease;
  text-decoration: none;
}
footer a:not([href*="wa.me"]):not(.inline-flex):not(.flex):hover {
  color: #c86bff;
  text-shadow: 0 0 10px rgba(200,107,255,0.70);
}

/* ═══════════════════════════════════════════════════════════════
   Country grid — Global Coverage
   ═══════════════════════════════════════════════════════════════ */
.ft-country-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  max-width: 860px;
  margin: 16px auto 0;
  margin-bottom: 0;
}

.ft-country-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid rgba(180,80,255,0.18) !important;
  background: linear-gradient(180deg, rgba(70,0,120,0.55), rgba(20,0,40,0.95)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
  box-shadow: 0 0 14px rgba(120,0,255,0.10) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
}

.ft-country-grid a span,
.ft-country-grid a * {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
  overflow: hidden !important;
}

.ft-country-grid a .emoji,
.ft-country-grid a *:first-child {
  flex-shrink: 0 !important;
}

.ft-country-grid a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(140,0,255,0.18) !important;
  color: #f0d6ff !important;
}

/* Global Coverage title spacing */
footer .uppercase {
  margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════
   Country pills — non-grid (legacy selector, keep styled)
   ═══════════════════════════════════════════════════════════════ */
footer a.flex:not(.ft-country-grid a),
footer .bg-white\/10 {
  background: rgba(80,20,120,0.18) !important;
  border: 1px solid rgba(168,85,247,0.22) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(168,85,247,0.12) !important;
  transition: background 0.24s ease, border-color 0.24s ease,
              box-shadow 0.24s ease !important;
}
footer a.flex:not(.ft-country-grid a):hover,
footer .bg-white\/10:hover {
  background: rgba(100,30,160,0.26) !important;
  border-color: rgba(200,107,255,0.45) !important;
  box-shadow: 0 0 22px rgba(200,107,255,0.22) !important;
  color: #f0d6ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   Borders — purple-tinted
   ═══════════════════════════════════════════════════════════════ */
footer .border-t,
footer .border-gray-400 {
  border-color: rgba(180,90,255,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Logo
   ═══════════════════════════════════════════════════════════════ */
.ft-player-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.footer-logo {
  max-width: 200px;
  width: 100%;
  filter:
    drop-shadow(0 0 28px rgba(168,85,247,0.75))
    drop-shadow(0 0 60px rgba(123,47,255,0.40));
}

/* ═══════════════════════════════════════════════════════════════
   Links grid — single col on mobile (default), 2 cols on tablet+
   ═══════════════════════════════════════════════════════════════ */
.ft-links-grid {
  display: block; /* mobile: stacked */
}

/* mobile: show single heading, hide per-col headings */
.ft-links-col-h4 { display: none; }

/* mobile: uniform gap between stacked columns = same as space-y-3 */
.ft-links-col + .ft-links-col { margin-top: 0.75rem; }

/* ═══════════════════════════════════════════════════════════════
   Tablet (641px+) — 2-col links grid + logo 25% larger
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  .ft-links-main-h4 { display: none; }
  .ft-links-col-h4  { display: block; }
  .ft-links-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 40px;
    align-items: start;
    justify-content: start;
  }
  .footer-logo {
    max-width: 250px;
  }
  .ft-player-logo-wrap {
    justify-content: center;
    align-items: center;
    padding-inline-start: 10px;
  }
  /* Reduce bottom gap between footer content and copyright */
  footer {
    padding-bottom: 1.25rem !important;
  }
  footer .container > *:last-child,
  footer > .container > *:last-child {
    margin-bottom: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop (1024px+) — logo 35% larger + enhanced glow
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .footer-logo {
    max-width: 270px;
    filter:
      drop-shadow(0 0 36px rgba(168,85,247,0.88))
      drop-shadow(0 0 72px rgba(123,47,255,0.52));
  }
  .ft-player-logo-wrap {
    min-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WhatsApp button — keep green
   ═══════════════════════════════════════════════════════════════ */
footer a[href*="wa.me"] {
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 10px 20px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 22px rgba(34,197,94,0.32) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  white-space: nowrap !important;
}
footer a[href*="wa.me"]:hover {
  box-shadow: 0 6px 30px rgba(34,197,94,0.48) !important;
}

/* ── Floating WhatsApp icon ── */
.whatsapp-float {
  position: fixed !important;
  bottom: 90px !important;
  right: 18px !important;
  left: auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  z-index: 2147483647 !important;
  transform: none !important;
  isolation: isolate;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  transition: transform 0.3s ease !important;
}

.whatsapp-float:hover {
  transform: scale(1.08) !important;
}

.whatsapp-float img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(37,211,102,0.22) !important;
  display: block;
}

.ft-country-grid {
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Social icons
   ═══════════════════════════════════════════════════════════════ */
footer .fab {
  opacity: 0.85;
  transition: all 0.25s ease;
}
footer a:hover .fab {
  opacity: 1;
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   Global Coverage label — Premium
   ═══════════════════════════════════════════════════════════════ */
footer .uppercase {
  position: relative;
  display: inline-block;
  color: #f3e9ff !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 18px rgba(168,85,247,0.45);
}

footer .uppercase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 60px;
  background: rgba(168,85,247,0.18);
  filter: blur(45px);
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════
   Global Coverage — standalone section before footer
   ═══════════════════════════════════════════════════════════════ */
.global-coverage {
  position: relative;
  padding: 70px 0 40px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(123,47,255,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0a0418 0%, #0d0420 100%);
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.ft-country-grid {
  overflow: visible !important;
}

.global-coverage .gc-title {
  text-align: center;
  color: #f3e9ff;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin: 0 0 30px;
  text-shadow: 0 0 18px rgba(168,85,247,0.40);
}

.global-coverage .ft-country-grid {
  margin-top: 0;
}

/* ── Footer bottom bar ── */
.footer-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  padding: 24px 10px;
  border-top: 1px solid rgba(168,85,247,.12);
}

.copyright-text {
  display: block !important;
  margin: 0;
  color: #d8d2ff;
  font-size: 14px;
  font-weight: 500;
  opacity: .9;
  letter-spacing: .5px;
  text-shadow: 0 0 10px rgba(168,85,247,.18);
}

/* ═══════════════════════════════════════════════════════════════
   Footer particles — cinematic floating atmosphere
   ═══════════════════════════════════════════════════════════════ */

@keyframes floatParticle {
  0%   { transform: translateY(0)      translateX(0);    opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.40; }
  100% { transform: translateY(-120vh) translateX(30px); opacity: 0; }
}

.footer-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(176, 38, 255, 0.75);
  filter: blur(1px);
  animation: floatParticle linear infinite;
  opacity: 0;
}

.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8 { animation-duration: 16s; }

/* bottom = starting height — distributed across full footer */
.p1 { width:  8px; height:  8px; left:  8%; bottom:  5%; animation-duration: 14s; animation-delay:  0s; }
.p2 { width: 12px; height: 12px; left: 22%; bottom: 20%; animation-duration: 18s; animation-delay:  3s; }
.p3 { width:  5px; height:  5px; left: 38%; bottom: 55%; animation-duration: 11s; animation-delay:  1s; }
.p4 { width: 10px; height: 10px; left: 54%; bottom: 35%; animation-duration: 16s; animation-delay:  5s; }
.p5 { width:  7px; height:  7px; left: 68%; bottom: 70%; animation-duration: 13s; animation-delay:  2s; }
.p6 { width: 11px; height: 11px; left: 80%; bottom: 10%; animation-duration: 20s; animation-delay:  7s; }
.p7 { width:  6px; height:  6px; left: 46%; bottom: 80%; animation-duration: 12s; animation-delay:  4s; }
.p8 { width:  9px; height:  9px; left: 15%; bottom: 45%; animation-duration: 15s; animation-delay:  6s; }

/* ═══════════════════════════════════════════════════════════════
   الأكثر بحثًا عن IPTV — premium integrated dark section
   ═══════════════════════════════════════════════════════════════ */
.iptv-searches-section {
  position: relative;
  background: linear-gradient(180deg, #0b0120 0%, #080016 55%, #05000f 100%);
  text-align: center;
  padding: 40px 20px 58px;
  margin: 0;
  overflow: hidden;
}

/* Radial purple ambient glow */
.iptv-searches-section::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.22) 0%, transparent 68%);
  pointer-events: none;
}

.iptv-searches-title {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #ddb4fe;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow:
    0 0 18px rgba(216,180,254,0.99),
    0 0 40px rgba(168,85,247,0.61),
    0 0 70px rgba(139,92,246,0.28);
  margin: 0 0 10px;
}

.iptv-searches-title::before,
.iptv-searches-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.85));
}
.iptv-searches-title::after {
  background: linear-gradient(90deg, rgba(192,132,252,0.85), transparent);
}

.iptv-searches-subtitle {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.58);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 1px;
  margin: -10px 0 26px;
}

.iptv-searches-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}

.iptv-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid rgba(139,92,246,0.48);
  border-radius: 999px;
  background: rgba(88,28,220,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.88);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: default;
  box-shadow:
    0 0 12px rgba(123,47,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.07);
  transition:
    transform 0.24s cubic-bezier(0.34,1.56,0.64,1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
  white-space: nowrap;
}

.iptv-tag:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(216,180,254,0.88);
  background: rgba(123,47,255,0.30);
  color: #ffffff;
  box-shadow:
    0 0 22px rgba(168,85,247,0.55),
    0 6px 20px rgba(123,47,255,0.30),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* ═══════════════════════════════════════════════════════════════
   Mobile — disable heavy GPU effects for smooth scroll
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  footer::before {
    filter: none !important;
    opacity: 0.15 !important;
  }
  .ft-country-grid a {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  footer a.flex,
  footer .bg-white\/10 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .whatsapp-float {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .footer-particles,
  .ft-particles,
  .ft-ambient {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile compact footer
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  footer {
    padding-top: 0.6rem !important;
    padding-bottom: 0.8rem !important;
  }
  footer .grid          { gap: 0.5rem !important; }
  footer p:first-of-type { display: none !important; }
  footer h3             { font-size: 0.95rem !important; margin-bottom: 0.3rem !important; }
  footer h4             { font-size: 0.85rem !important; margin-bottom: 0.3rem !important; }
  footer ul             { margin-bottom: 0.5rem !important; }
  footer ul li          { margin-bottom: 0.2rem !important; font-size: 0.82rem !important; }
  .ft-links-col + .ft-links-col { margin-top: 0.5rem !important; }
  .ft-player-logo-wrap  { align-self: auto !important; min-height: auto !important; padding-inline-start: 8px !important; }
  .footer-logo          { max-width: 110px !important; filter: drop-shadow(0 0 14px rgba(168,85,247,0.50)) !important; }
  footer a[href*="wa.me"] { padding: 0.3rem 0.8rem !important; font-size: 0.72rem !important; line-height: 1.4 !important; white-space: nowrap !important; }
  footer .fab           { font-size: 1rem !important; }
  footer .flex.justify-center.mt-10 { margin-top: 0.5rem !important; }
  footer h6             { font-size: 0.65rem !important; }
  footer .flex.gap-7    { gap: 0.5rem !important; }
  .ft-country-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 12px;
    padding: 0 4px;
  }
  .ft-country-grid a {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 4px 3px !important;
    font-size: 11px !important;
    border-radius: 16px !important;
    line-height: 1.2 !important;
  }
  .ft-country-grid a span,
  .ft-country-grid a h3,
  .ft-country-grid a * {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .ft-country-grid a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(140,0,255,.18) !important;
  }
  .global-coverage {
    padding-top: 18px !important;
    padding-bottom: 16px !important;
    margin-top: 0 !important;
  }
  .global-coverage .gc-title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 22px !important;
  }
  /* IPTV Searches — mobile */
  .iptv-searches-section {
    padding: 28px 14px 24px !important;
  }
  .iptv-searches-section::before {
    width: 280px !important;
    height: 100px !important;
  }
  .iptv-searches-title {
    font-size: 0.85rem !important;
    gap: 12px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 16px !important;
  }
  .iptv-searches-title::before,
  .iptv-searches-title::after {
    width: 36px !important;
  }
  .iptv-searches-tags {
    gap: 8px !important;
  }
  .iptv-tag {
    padding: 6px 15px !important;
    font-size: 0.78rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .iptv-tag:hover {
    transform: none !important;
  }
}