/*
 * Kora OnLive — footer-v2.css
 * تصميم كامل من الصفر للفوتر (footer.php V2 REBUILD). فئات kol-ftr-* فريدة
 * كليًا، صفر تقاطع مع .site-footer/.ko-footer-v126 القديمة. يُستخدم أيضًا
 * .kol-hdr-shell (من header-v2.css) لمحاذاة عرض الفوتر مع الهيدر تمامًا.
 */

.kol-ftr{
  position:relative; overflow:hidden; margin-top:40px;
  background:linear-gradient(145deg,#03101f 0%,#061a31 55%,#092946 100%);
  color:#dce8f5;
  border-top:1px solid rgba(255,255,255,.09);
  font-family:Tajawal,"Noto Sans Arabic",Arial,sans-serif;
}
.kol-ftr-glow{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(40px); }
.kol-ftr-glow-a{ width:360px; height:360px; top:-120px; left:-80px; background:rgba(25,118,210,.14); }
.kol-ftr-glow-b{ width:300px; height:300px; bottom:-100px; right:-60px; background:rgba(24,232,117,.10); }

.kol-ftr-main{ position:relative; z-index:1; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding:48px 18px 38px; }
@media(max-width:980px){ .kol-ftr-main{ grid-template-columns:1.4fr 1fr 1fr; gap:28px; } .kol-ftr-info{ grid-column:2; } .kol-ftr-brand{ grid-row:span 2; } }
@media(max-width:680px){ .kol-ftr-main{ grid-template-columns:1fr 1fr; gap:26px 18px; padding:34px 16px 28px; } .kol-ftr-brand{ grid-column:1/-1; grid-row:auto; } .kol-ftr-info{ grid-column:auto; } }

.kol-ftr-logo img{ display:block; width:min(280px,100%); height:auto; }
.kol-ftr-brand p{ max-width:400px; margin:12px 0 16px; color:#94a9bf; font-size:11px; line-height:1.95; }
.kol-ftr-meta{ display:flex; align-items:center; gap:8px; color:#d7e5f3; font-size:9px; }
.kol-ftr-meta i{ width:7px; height:7px; border-radius:50%; background:#18e875; box-shadow:0 0 0 5px rgba(24,232,117,.09); }
.kol-ftr-meta small{ color:#93a9bf; font-size:8px; }
.kol-ftr-fb{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:9px 13px; border-radius:11px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#dce8f5; font-size:9.5px; font-weight:900; }
.kol-ftr-fb:hover{ border-color:rgba(24,232,117,.4); color:#fff; }
.kol-ftr-fb svg{ width:16px; height:16px; fill:#fff; }

.kol-ftr-col{ display:flex; flex-direction:column; gap:9px; }
.kol-ftr-col h3{ display:flex; align-items:center; gap:8px; margin:0 0 6px; color:#fff; font-size:12px; font-weight:950; }
.kol-ftr-col h3 span{ display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:rgba(24,232,117,.09); border:1px solid rgba(24,232,117,.18); color:#18e875; font-size:8px; font-weight:1000; }
.kol-ftr-col>a{ display:flex; justify-content:space-between; align-items:center; color:#92a8bd; font-size:10px; font-weight:700; line-height:1.7; }
.kol-ftr-col>a i{ font-style:normal; color:#58728b; transition:transform .18s ease, color .18s ease; }
.kol-ftr-col>a:hover{ color:#fff; }
.kol-ftr-col>a:hover i{ color:#18e875; transform:translateX(-3px); }
.kol-ftr-note{ display:flex; align-items:center; gap:7px; margin-top:7px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08); }
.kol-ftr-note p{ margin:0; color:#93a9bf; font-size:8.5px; line-height:1.7; }

.kol-ftr-bottom{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.09); background:rgba(0,7,17,.4); }
.kol-ftr-bottom-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; min-height:60px; color:#728ba4; font-size:9px; }
.kol-ftr-bottom-center{ text-align:center; }
.kol-ftr-bottom-center b{ color:#18e875; margin:0 6px; }
.kol-ftr-top{ justify-self:end; width:38px; height:38px; border-radius:11px; border:1px solid rgba(24,232,117,.35); background:rgba(24,232,117,.07); color:#18e875; display:grid; place-items:center; cursor:pointer; }
.kol-ftr-top svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kol-ftr-top:hover{ background:rgba(24,232,117,.14); }
@media(max-width:680px){
  .kol-ftr-bottom-inner{ grid-template-columns:1fr auto; min-height:64px; font-size:8px; }
  .kol-ftr-bottom-center{ display:none; }
}

/* ---------- Social popup (kol-ftr-fb-*) ---------- */
.ko-fb-popup{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.ko-fb-popup.is-visible{ opacity:1; visibility:visible; }
.ko-fb-popup-backdrop{ position:absolute; inset:0; background:rgba(2,10,20,.62); backdrop-filter:blur(3px); }
.kol-ftr-fb-card{
  position:relative; z-index:1; width:min(380px,100%); padding:30px 26px 26px; text-align:center;
  background:linear-gradient(160deg,#0d2238,#071526); border:1px solid rgba(53,161,255,.22);
  border-radius:22px; box-shadow:0 30px 70px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.97); transition:transform .25s ease;
}
.ko-fb-popup.is-visible .kol-ftr-fb-card{ transform:translateY(0) scale(1); }
.kol-ftr-fb-close{ position:absolute; top:12px; left:12px; width:30px; height:30px; border:0; border-radius:9px; background:rgba(255,255,255,.08); color:#cfe0ef; font-size:17px; cursor:pointer; }
.kol-ftr-fb-icon{ width:52px; height:52px; margin:0 auto 14px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(135deg,#1877f2,#0c4ea8); box-shadow:0 10px 24px rgba(24,119,242,.35); }
.kol-ftr-fb-icon svg{ width:26px; height:26px; fill:#fff; }
.kol-ftr-fb-kicker{ display:block; font-size:9px; font-weight:1000; letter-spacing:.1em; color:#35a1ff; }
.kol-ftr-fb-card h2{ margin:9px 0 8px; color:#fff; font-size:17px; font-weight:950; }
.kol-ftr-fb-card p{ margin:0 0 18px; color:#9fb6cc; font-size:11px; line-height:1.8; }
.kol-ftr-fb-follow{ display:inline-flex; align-items:center; gap:7px; padding:11px 22px; border-radius:11px; background:linear-gradient(135deg,#1877f2,#145fc0); color:#fff; font-size:11px; font-weight:950; }
.kol-ftr-fb-later{ display:block; margin:12px auto 0; border:0; background:none; color:#93a9bf; font-size:9.5px; font-weight:800; cursor:pointer; text-decoration:underline; }
html.ko-fb-popup-open{ overflow:hidden; }

/* ---------- Unified bottom nav (replaces the old duplicated pair) ---------- */
.kol-ftr-bottom-nav{
  position:fixed; z-index:130; right:10px; left:10px; bottom:10px; height:60px;
  display:flex; align-items:stretch; justify-content:space-between; padding:0 4px;
  background:rgba(6,22,45,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10); border-radius:19px;
  box-shadow:0 16px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  display:none;
}
.kol-ftr-bottom-nav a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; color:#8fa5bc; font-size:8px; font-weight:900; border-radius:14px; margin:6px 2px;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.kol-ftr-bottom-nav a svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kol-ftr-bottom-nav a span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.kol-ftr-bottom-nav a.is-active{
  color:#fff; background:linear-gradient(135deg,#1565c0,#1976d2);
  box-shadow:0 8px 18px rgba(25,118,210,.28); transform:translateY(-2px);
}
.kol-ftr-bottom-nav a:not(.is-active):hover{ color:#fff; background:rgba(255,255,255,.06); }

@media(max-width:820px){
  .kol-ftr-bottom-nav{ display:flex; }
  body{ padding-bottom:78px; }
}
@media(max-width:420px){
  .kol-ftr-bottom-nav{ height:56px; right:7px; left:7px; bottom:7px; }
  .kol-ftr-bottom-nav a{ font-size:7px; }
  .kol-ftr-bottom-nav a svg{ width:17px; height:17px; }
}

/* The theme paints every h1-h4 dark in light mode with html[data-theme=light] h3{color:#0a1b2f!important}.
   Headings inside these always-dark surfaces must opt out with !important AND a selector more specific than (0,1,2) (hence html:root) or they vanish by day. */
html:root .kol-ftr-col h3{ color:#fff !important; }
html:root .kol-ftr-fb-card h2{ color:#fff !important; }

/* The legacy quick-actions bar carries the `hidden` attribute (footer.php), but the theme's own
   .bottom-nav{display:grid} (mobile) beats the user-agent [hidden] rule, so it was still rendered, stacked
   exactly under .kol-ftr-bottom-nav and only masked by z-index. Make `hidden` mean hidden. */
html:root .bottom-nav[hidden]{ display:none !important; }

/* Touch targets: footer link rows were 17px tall on phones (finger needs ~40). Same look, bigger hit area. */
.kol-ftr-col>a{ min-height:32px; align-items:center; }
@media(max-width:820px){ .kol-ftr-col{ gap:0; } .kol-ftr-col>a{ min-height:40px; } .kol-ftr-fb{ min-height:44px; } }