/*
Theme Name: EK News
Theme URI: https://t.me/Europa_king1
Author: Hayder
Author URI: https://t.me/Europa_king1
Description: قالب ووردبريس احترافي لمواقع الأخبار والمقالات، بهوية بيضاء وزرقاء أنيقة، مع دعم كامل للنمطين الصباحي (فاتح) والداكن، تبويبات وتصنيفات مستطيلة الشكل، عناصر عائمة بحركة سلسة، وزر اشتراك مباشر بقناة تليجرام. متوافق تلقائيًا مع الصفحات والتصنيفات والقوائم الموجودة مسبقًا في الموقع.
Version: 6.5.2
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: ek-news
Tags: news, blog, custom-logo, custom-menu, featured-images, dark-mode, rtl
*/

/* =========================================================
   0. Design tokens — light ("صباحي") is the default, dark via [data-theme="dark"]
   ========================================================= */
:root{
  --bg:        #ffffff;
  --bg-elev:   #f4f7fb;
  --bg-elev-2: #eaf0f9;
  --line:      #e2e8f2;
  --text:      #0f1a2e;
  --text-dim:  #4b5a75;
  --text-mute: #8896ac;
  --accent:    #1d5fe0;   /* أزرق أساسي */
  --accent-2:  #0aa1e0;   /* أزرق فاتح ثانوي */
  --accent-ink:#ffffff;   /* لون النص فوق الأزرق */
  --danger:    #e0483a;
  --shadow:    0 10px 30px rgba(15,26,46,.08);
  --radius:    10px;
  --radius-lg: 18px;
  --font-display: "Cairo", "Tahoma", sans-serif;
  --font-body:    "Tajawal", "Tahoma", sans-serif;
  --container: 1200px;
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:        #0a1120;
  --bg-elev:   #10192c;
  --bg-elev-2: #152238;
  --line:      #22314e;
  --text:      #eef2fb;
  --text-dim:  #a9b6d1;
  --text-mute: #6c7ba0;
  --accent:    #3b82f6;
  --accent-2:  #38bdf8;
  --accent-ink:#06111f;
  --shadow:    0 10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* =========================================================
   1. Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; max-width:100%; position:relative; }
/* Hard containment: nothing may create horizontal scroll on small screens,
   even elements injected by plugins (popups, embeds, wide tables/iframes). */
@media (max-width:960px){
  html, body{ overflow-x:clip; }
  body > *, .site-header, .site-footer, .content-wrap, section, .container{ max-width:100%; }
  img, video, iframe, table, pre, figure, embed, object{ max-width:100% !important; }
}
.views-badge{ display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; color:var(--text-mute); }
.updated-badge{ display:inline-flex; align-items:center; gap:4px; font-size:.8rem; font-weight:700; color:var(--accent); background:rgba(29,95,224,.08); padding:3px 10px; border-radius:6px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.3; margin:0 0 .5em; font-weight:800; }
p{ margin:0 0 1em; color:var(--text-dim); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.screen-reader-text{ position:absolute; left:-9999px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   2. Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s, background .25s;
}
.site-header.is-scrolled{ box-shadow:var(--shadow); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 20px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img.custom-logo{
  width:44px; height:44px; max-height:none; max-width:none;
  object-fit:contain; border-radius:10px; display:block;
}
.site-title{ font-size:1.35rem; margin:0; font-weight:800; }
.site-title a{ color:var(--text); }
.site-description{ display:none; }

.primary-nav > ul{ display:flex; gap:6px; align-items:center; }
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  display:block; font-size:.95rem; font-weight:700; color:var(--text-dim);
  padding:10px 14px; border-radius:8px;
  transition:color .15s, background .15s;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > a:focus,
.primary-nav > ul > li.current-menu-item > a{
  color:var(--accent); background:var(--bg-elev);
}

/* dropdown submenus — floating, animated */
.primary-nav ul ul{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:200px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:8px; z-index:50;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.primary-nav li:hover > ul,
.primary-nav li.eks-open > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.primary-nav ul ul li a{ padding:9px 12px; border-radius:8px; font-size:.9rem; }
.primary-nav ul ul li a:hover{ background:var(--bg-elev); color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:10px; }

.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-elev); display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; flex:none;
  transition:background .2s, border-color .2s;
}
.theme-toggle:hover{ border-color:var(--accent); }
.theme-toggle svg{ width:19px; height:19px; position:absolute; transition:opacity .25s ease, transform .35s ease; color:var(--text-dim); }
.theme-toggle .icon-sun{ opacity:1; transform:rotate(0deg) scale(1); }
.theme-toggle .icon-moon{ opacity:0; transform:rotate(-60deg) scale(.5); }
[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform:rotate(60deg) scale(.5); }
[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform:rotate(0deg) scale(1); }

.telegram-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:.88rem;
  padding:9px 16px; border-radius:999px; white-space:nowrap; border:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.telegram-btn:hover{ background:var(--accent-2); transform:translateY(-1px); box-shadow:var(--shadow); }
.telegram-btn svg{ width:17px; height:17px; flex:none; }

.search-toggle, .menu-toggle{
  display:flex; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-elev); align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; color:var(--text);
}
.menu-toggle{ display:none; }

/* rule under header */
.header-rule{ height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* =========================================================
   3. Floating search overlay
   ========================================================= */
.search-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding-top:12vh; background:rgba(10,17,32,.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
}
.search-overlay.is-open{ opacity:1; visibility:visible; }
.search-overlay-box{
  background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  width:min(560px, 90vw); padding:22px; transform:translateY(-14px); transition:transform .25s ease;
  border:1px solid var(--line);
}
.search-overlay.is-open .search-overlay-box{ transform:translateY(0); }
.search-overlay-box form{ display:flex; gap:10px; }
.search-overlay-box input[type="search"]{
  flex:1; background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:1rem;
}
.search-overlay-box button{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; padding:0 18px; cursor:pointer; font-weight:700;
}
.search-overlay-close{
  position:absolute; top:14px; inset-inline-end:14px; width:30px; height:30px; border-radius:50%;
  background:var(--bg-elev); border:1px solid var(--line); cursor:pointer; color:var(--text-dim);
}

/* =========================================================
   4. Rectangular ribbon tag (signature element)
   ========================================================= */
.ribbon-tag{
  position:relative; display:inline-flex; align-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-size:.72rem; font-weight:800; letter-spacing:.2px;
  padding:5px 14px 5px 10px; font-family:var(--font-display);
  clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.card .ribbon-tag{ position:absolute; top:14px; inset-inline-start:0; z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.18); }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:800; color:var(--accent-ink);
  background:var(--accent); padding:6px 14px; margin-bottom:14px;
  font-family:var(--font-display);
  clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* =========================================================
   5. Hero
   ========================================================= */
.hero{ padding:36px 0 8px; }
.hero-grid{ display:grid; grid-template-columns:2fr 1fr; gap:22px; }
.hero-feature{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  min-height:380px; display:flex; align-items:flex-end;
  background:var(--bg-elev); border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-feature.has-image::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,17,32,0) 30%, rgba(10,17,32,.88) 100%);
}
.hero-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-feature .hero-content{ padding:28px; position:relative; z-index:2; }
.hero-feature h2{ font-size:1.9rem; max-width:26ch; color:var(--text); }
.hero-feature .excerpt{ max-width:60ch; color:var(--text-dim); }
.hero-feature.has-image h2{ color:#fff; }
.hero-feature.has-image .excerpt{ color:#e6ebf5; }

.hero-side{ display:flex; flex-direction:column; gap:16px; }
.hero-side .mini-card{
  display:flex; gap:14px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px; align-items:center; transition:border-color .15s, transform .15s;
}
.hero-side .mini-card:hover{ border-color:var(--accent); transform:translateX(-2px); }
html[dir="rtl"] .hero-side .mini-card:hover{ transform:translateX(2px); }
.hero-side .mini-card img{ width:88px; height:66px; object-fit:cover; border-radius:8px; flex:none; }
.hero-side .mini-card h3{ font-size:.95rem; margin:0 0 4px; }
.hero-side .mini-card time{ font-size:.75rem; color:var(--text-mute); }

/* =========================================================
   6. Content layout
   ========================================================= */
.content-wrap{ display:grid; grid-template-columns:2.2fr 1fr; gap:32px; padding:40px 0 60px; align-items:start; }
.section-heading{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.section-heading h2{ font-size:1.3rem; white-space:nowrap; }
.section-heading .rule{ flex:1; height:1px; background:var(--line); }

.article-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s, transform .18s, box-shadow .18s;
}
.card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow); }
.card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-elev); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.card:hover .thumb img{ transform:scale(1.05); }
.card .body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card h3{ font-size:1.05rem; }
.card h3 a:hover{ color:var(--accent); }
.card .meta{ display:flex; gap:12px; font-size:.78rem; color:var(--text-mute); margin-top:auto; }

.pagination{ display:flex; gap:8px; justify-content:center; margin-top:30px; }
.pagination a, .pagination span{ border:1px solid var(--line); border-radius:8px; padding:8px 14px; font-size:.85rem; }
.pagination .current{ background:var(--accent); color:var(--accent-ink); font-weight:800; border-color:var(--accent); }

/* Sidebar */
.sidebar .widget{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:20px;
}
.sidebar .widget h2, .sidebar .widget-title{
  font-size:1rem; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.most-read{ counter-reset:mr; }
.most-read li{ counter-increment:mr; display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--line); }
.most-read li:last-child{ border-bottom:none; }
.most-read li::before{
  content:counter(mr); font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  color:var(--accent); opacity:.45; line-height:1;
}
.most-read a{ font-size:.9rem; font-weight:700; }
.most-read a:hover{ color:var(--accent); }

.tag-cloud-widget a, .widget_tag_cloud a{
  display:inline-block; margin:0 4px 8px 0; padding:5px 12px;
  border:1px solid var(--line); border-radius:6px; font-size:.8rem; color:var(--text-dim);
}
.tag-cloud-widget a:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   7. Single post
   ========================================================= */
.single-article{ padding:40px 0 60px; }
.single-article .container{ max-width:820px; }
.article-header h1{ font-size:2rem; margin-bottom:14px; }
.article-meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--text-mute); font-size:.85rem; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.article-thumb{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; border:1px solid var(--line); }
.article-content{ font-size:1.05rem; }
.article-content h2{ font-size:1.4rem; margin-top:1.6em; }
.article-content h3{ font-size:1.15rem; margin-top:1.4em; }
.article-content a{ color:var(--accent); text-decoration:underline; }
.article-content blockquote{
  border-inline-start:4px solid var(--accent); margin:24px 0; padding:6px 20px;
  color:var(--text-dim); background:var(--bg-elev); border-radius:0 8px 8px 0;
}
.article-content img{ border-radius:var(--radius); }

/* Neutralize legacy inline colors pasted into old articles (e.g. from a
   previous dark-themed site) so text never goes invisible after a theme
   or mode switch. Links keep the accent color. */
.article-content, .article-content *:not(a){
  color:var(--text) !important;
  background-color:transparent !important;
}
.article-content a{ color:var(--accent) !important; }
.article-content blockquote, .article-content blockquote *{ color:var(--text-dim) !important; }
.article-content mark{ background-color:var(--accent) !important; color:var(--accent-ink) !important; }

/* Classic-editor alignment, captions and galleries */
.article-content .alignleft{ float:left; margin:.4em 1.5em 1em 0; }
.article-content .alignright{ float:right; margin:.4em 0 1em 1.5em; }
.article-content .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.article-content .wp-caption{ max-width:100%; background:var(--bg-elev) !important; border:1px solid var(--line); border-radius:8px; padding:8px; }
.article-content .wp-caption img{ display:block; margin:0 auto; border-radius:6px; }
.article-content .wp-caption-text{ font-size:.8rem; color:var(--text-mute) !important; text-align:center; padding-top:6px; margin:0; }
.article-content .gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin:20px 0; }
.article-content .gallery-item{ margin:0 !important; }
.article-content .gallery-icon img{ border-radius:8px; }
.article-content .gallery-caption{ font-size:.78rem; color:var(--text-mute) !important; text-align:center; }
.article-content::after{ content:""; display:table; clear:both; }
.article-source{
  display:flex; align-items:center; gap:8px; margin:26px 0 10px; padding:14px 18px;
  border-radius:var(--radius); border-inline-start:4px solid var(--accent);
  background:var(--bg-elev); font-size:.92rem;
}
.article-source-label{ font-weight:800; color:var(--text); white-space:nowrap; }
.article-source a{ color:var(--accent); font-weight:700; transition:color .15s; }
.article-source a:hover{ color:var(--accent-2); text-decoration:underline; }
.article-source span:not(.article-source-label){ color:var(--text-dim); font-weight:700; }
.article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; }
.article-tags a{ border:1px solid var(--line); border-radius:6px; padding:5px 14px; font-size:.8rem; color:var(--text-dim); }

.share-row{
  display:flex; gap:10px; align-items:center; margin:30px 0; padding:18px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.share-row span{ font-weight:700; font-size:.9rem; }
.share-row a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev); border:1px solid var(--line); transition:border-color .15s, transform .15s;
}
.share-row a:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* =========================================================
   8. Static pages (contact / terms)
   ========================================================= */
.page-hero{ padding:50px 0 20px; text-align:center; }
.page-hero h1{ font-size:2rem; }
.static-content{ padding:20px 0 60px; }
.static-content .container{ max-width:820px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:10px; }
.contact-info-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; }
.contact-info-card ul{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.contact-info-card li{ display:flex; gap:12px; align-items:center; }
.contact-info-card .icon{
  width:40px; height:40px; border-radius:10px; background:var(--bg-elev-2);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent);
}
.contact-form{ display:flex; flex-direction:column; gap:14px; }
.contact-form label{ font-size:.85rem; font-weight:700; color:var(--text-dim); }
.contact-form input, .contact-form textarea{
  background:var(--bg-elev); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:11px 14px; font-family:var(--font-body); font-size:.95rem; width:100%;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--accent); }
.contact-form button{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px;
  padding:12px 20px; font-weight:800; cursor:pointer; font-family:var(--font-body); font-size:.95rem;
  transition:background .15s;
}
.contact-form button:hover{ background:var(--accent-2); }
.form-notice{ padding:12px 16px; border-radius:8px; font-size:.9rem; margin-bottom:16px; }
.form-notice.success{ background:rgba(29,95,224,.1); border:1px solid var(--accent); color:var(--accent); }
.form-notice.error{ background:rgba(224,72,58,.1); border:1px solid var(--danger); color:var(--danger); }

.coverage-empty-state{ color:var(--text-mute); text-align:center; padding:40px 20px; font-size:.95rem; }

/* =========================================================
   9. Virtual Draw — Champions League draw simulator
   ========================================================= */
.draw-error{
  margin-top:20px; padding:12px 16px; border-radius:8px; font-size:.9rem;
  background:rgba(224,72,58,.1); border:1px solid var(--danger); color:var(--danger);
}

/* Team grid, grouped by pot */
.draw-teams-group{ margin-bottom:36px; }
.draw-teams-group-title{
  font-size:1.05rem; margin-bottom:16px; padding-bottom:8px;
  border-bottom:2px solid var(--line);
}
.draw-teams-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.draw-team-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 10px; cursor:pointer; font-family:var(--font-body); text-align:center;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.draw-team-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.draw-team-card-logo{
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
}
.draw-team-card-logo--empty{
  width:56px; height:56px; border-radius:50%; background:var(--bg-elev-2);
}
.draw-team-card-logo img{ max-width:100%; max-height:100%; }
.draw-team-card-name{ font-size:.85rem; font-weight:700; color:var(--text); line-height:1.3; }
.draw-team-card-country{ font-size:.72rem; color:var(--text-mute); }

/* Modal */
.draw-modal{ position:fixed; inset:0; z-index:200; }
.draw-modal-backdrop{
  position:absolute; inset:0; background:rgba(15,26,46,.6); backdrop-filter:blur(2px);
}
.draw-modal-box{
  position:relative; z-index:1; max-width:560px; width:92%; margin:8vh auto 0;
  background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:32px 28px; max-height:82vh; overflow-y:auto;
}
.draw-modal-close{
  position:absolute; top:14px; inset-inline-end:14px; background:var(--bg-elev);
  border:none; border-radius:50%; width:32px; height:32px; cursor:pointer;
  font-size:.95rem; color:var(--text-dim); line-height:1;
}
.draw-modal-close:hover{ background:var(--bg-elev-2); color:var(--text); }
.draw-modal-team{
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:24px;
}
.draw-modal-team img{ width:56px; height:56px; }
.draw-modal-team h2{ font-size:1.3rem; }

.draw-run-btn{
  display:block; width:100%; background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:999px; padding:14px 20px; font-weight:800; cursor:pointer;
  font-family:var(--font-body); font-size:1rem; transition:background .15s;
}
.draw-run-btn:hover{ background:var(--accent-2); }
.draw-run-btn:disabled{ opacity:.7; cursor:wait; }
.draw-run-btn--secondary{
  background:var(--bg-elev); color:var(--text); margin-top:20px;
}
.draw-run-btn--secondary:hover{ background:var(--bg-elev-2); }

.draw-fixtures-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.draw-result-team{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.draw-result-team img{ border-radius:6px; }
.draw-result-team span{ font-size:1.05rem; font-weight:800; color:var(--text); }
.draw-match-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; font-size:.9rem;
}
.draw-match-row img{ border-radius:4px; flex:none; }
.draw-match-row-name{ flex:1; font-weight:700; }
.draw-match-row-leg{ font-size:.8rem; color:var(--text-mute); }

/* Telegram CTA banner — base styles (homepage / default use).
   Without this block the icon and text render unstyled at native size,
   which is the bug that made the paper-plane fill the whole page. */
.tg-cta-section{ padding:14px 0; }
.tg-cta{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius:14px;
  padding:12px 18px;
  box-shadow:var(--shadow);
}
.tg-cta-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.25), transparent 55%);
}
.tg-cta-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.12);
}
.tg-cta-orb-1{ width:140px; height:140px; top:-60px; inset-inline-end:-40px; }
.tg-cta-orb-2{ width:90px; height:90px; bottom:-40px; inset-inline-start:10%; }

.tg-cta-icon{
  position:relative; flex:none;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.tg-cta-pulse{
  position:absolute; inset:0; border-radius:50%;
  background:rgba(255,255,255,.35);
}
.tg-cta-plane{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18);
}
.tg-cta-plane svg{ width:16px; height:16px; display:block; color:#fff; }

.tg-cta-body{ position:relative; flex:1 1 auto; min-width:0; color:#fff; }
.tg-cta-title{ margin:0 0 2px; font-size:.92rem; font-weight:800; color:#fff; line-height:1.3; }
.tg-cta-text{ margin:0; font-size:.76rem; color:rgba(255,255,255,.88); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tg-cta-handle{
  color:#fff; font-weight:700; text-decoration:none;
  background:rgba(255,255,255,.18); border-radius:999px; padding:2px 8px;
  font-size:.76rem;
}
.tg-cta-handle:hover{ background:rgba(255,255,255,.28); }

.tg-cta-btn{
  position:relative; flex:none; overflow:hidden;
  display:flex; align-items:center; gap:6px;
  background:#fff; color:var(--accent);
  border-radius:999px; padding:9px 18px;
  font-weight:800; font-size:.82rem; text-decoration:none;
  white-space:nowrap;
  transition:transform .15s, box-shadow .15s;
}
.tg-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.tg-cta-btn svg{ width:15px; height:15px; color:var(--accent); }

@media (max-width: 640px){
  .tg-cta{ flex-wrap:wrap; padding:14px; gap:10px; }
  .tg-cta-body{ flex:1 1 100%; order:2; }
  .tg-cta-btn{ order:3; flex:1 1 100%; justify-content:center; }
  .tg-cta-icon{ width:36px; height:36px; }
  .tg-cta-plane{ width:28px; height:28px; }
  .tg-cta-plane svg{ width:14px; height:14px; }
}

/* Compact Telegram CTA inside the draw modal — narrower box than a full page section */
.draw-modal-tg-cta{ margin-top:20px; }
.draw-modal-tg-cta .tg-cta-section{ padding:0; }
.draw-modal-tg-cta .tg-cta{
  padding:14px 16px; border-radius:14px; gap:10px;
}
.draw-modal-tg-cta .tg-cta-icon{ width:38px; height:38px; }
.draw-modal-tg-cta .tg-cta-plane{ width:30px; height:30px; }
.draw-modal-tg-cta .tg-cta-plane svg{ width:16px; height:16px; }
.draw-modal-tg-cta .tg-cta-title{ font-size:.88rem; margin-bottom:2px; line-height:1.3; }
.draw-modal-tg-cta .tg-cta-text{ font-size:.74rem; }
.draw-modal-tg-cta .tg-cta-handle{ padding:2px 8px; font-size:.74rem; }
.draw-modal-tg-cta .tg-cta-btn{ padding:7px 14px; font-size:.78rem; }
.draw-modal-tg-cta .tg-cta-orb-1,
.draw-modal-tg-cta .tg-cta-orb-2{ display:none; }

/* Compact Telegram CTA at the top of the draw page.
   Mobile (default): narrow, roughly square card — matches page width.
   Desktop (min-width:721px): reverts to the original wide horizontal
   banner layout, since the square card looked cramped on wide screens. */
.draw-page-tg-cta{ display:flex; justify-content:center; }
.draw-page-tg-cta .tg-cta-section{ padding:6px 0 22px; width:100%; max-width:340px; }
.draw-page-tg-cta .tg-cta{
  flex-direction:column; text-align:center; align-items:center;
  padding:24px 22px; border-radius:18px; gap:10px;
}
.draw-page-tg-cta .tg-cta-icon{ width:54px; height:54px; }
.draw-page-tg-cta .tg-cta-plane{ width:42px; height:42px; }
.draw-page-tg-cta .tg-cta-plane svg{ width:21px; height:21px; }
.draw-page-tg-cta .tg-cta-body{ flex:none; width:100%; }
.draw-page-tg-cta .tg-cta-title{ font-size:1.05rem; margin-bottom:5px; }
.draw-page-tg-cta .tg-cta-text{ font-size:.85rem; display:flex; flex-direction:column; align-items:center; gap:5px; }
.draw-page-tg-cta .tg-cta-handle{ margin-inline-start:0; }
.draw-page-tg-cta .tg-cta-btn{ padding:9px 22px; font-size:.9rem; width:auto; }
.draw-page-tg-cta .tg-cta-orb-1,
.draw-page-tg-cta .tg-cta-orb-2{ display:none; }

@media (min-width:721px){
  .draw-page-tg-cta .tg-cta-section{ max-width:none; }
  .draw-page-tg-cta .tg-cta{
    flex-direction:row; text-align:right; align-items:center;
    padding:30px 32px; border-radius:22px; gap:22px;
  }
  .draw-page-tg-cta .tg-cta-icon{ width:74px; height:74px; }
  .draw-page-tg-cta .tg-cta-plane{ width:60px; height:60px; }
  .draw-page-tg-cta .tg-cta-plane svg{ width:30px; height:30px; }
  .draw-page-tg-cta .tg-cta-body{ flex:1 1 260px; text-align:right; }
  .draw-page-tg-cta .tg-cta-title{ font-size:1.32rem; margin-bottom:6px; }
  .draw-page-tg-cta .tg-cta-text{ flex-direction:row; font-size:1rem; }
  .draw-page-tg-cta .tg-cta-handle{ margin-inline-start:6px; }
  .draw-page-tg-cta .tg-cta-btn{ padding:14px 26px; font-size:1rem; }
  .draw-page-tg-cta .tg-cta-orb-1,
  .draw-page-tg-cta .tg-cta-orb-2{ display:block; }
}

body.ekn-modal-open{ overflow:hidden; }

@media (max-width:720px){
  .draw-modal-box{ padding:24px 18px; margin-top:4vh; max-height:90vh; }
  .draw-page-tg-cta .tg-cta-section{ max-width:220px; }
  .draw-page-tg-cta .tg-cta{ padding:14px 12px; gap:6px; }
  .draw-page-tg-cta .tg-cta-icon{ width:36px; height:36px; }
  .draw-page-tg-cta .tg-cta-plane{ width:28px; height:28px; }
  .draw-page-tg-cta .tg-cta-plane svg{ width:14px; height:14px; }
  .draw-page-tg-cta .tg-cta-title{ font-size:.8rem; }
  .draw-page-tg-cta .tg-cta-text{ font-size:.68rem; }
  .draw-page-tg-cta .tg-cta-btn{ padding:6px 14px; font-size:.72rem; }
}
@media (max-width:480px){
  .draw-teams-grid{ gap:10px; }
  .draw-team-card{ padding:14px 6px; }
}

/* =========================================================
   9. Floating elements
   ========================================================= */
.telegram-float{
  position:fixed; bottom:22px; inset-inline-end:22px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:transform .15s, background .15s;
}
.telegram-float:hover{ transform:scale(1.08); background:var(--accent-2); }
.telegram-float svg{ width:26px; height:26px; color:var(--accent-ink); }

.scroll-top{
  position:fixed; bottom:22px; inset-inline-start:22px; z-index:60;
  width:46px; height:46px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); color:var(--text);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, border-color .15s;
  cursor:pointer;
}
.scroll-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   10. Mobile nav drawer
   ========================================================= */
@media (max-width:960px){
  .primary-nav{
    position:fixed; inset-inline-end:0; top:0; bottom:0; width:82%; max-width:340px;
    background:var(--bg); border-inline-start:1px solid var(--line);
    transform:none; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s ease, visibility .28s; padding:90px 24px 24px; z-index:90;
    box-shadow:var(--shadow); overflow-y:auto;
  }
  .primary-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none !important; }
  .primary-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; }
  .primary-nav > ul > li > a{ display:block; padding:13px 12px; }
  .primary-nav ul ul{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding-inline-start:14px; margin-top:2px; background:transparent;
  }
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(10,17,32,.5); z-index:85;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
  }
  .nav-backdrop.is-open{ opacity:1; visibility:visible; }
  .menu-toggle{ display:flex; }
  .header-actions .telegram-btn span{ display:none; }
}

/* =========================================================
   11. Footer
   ========================================================= */
.site-footer{ background:var(--bg-elev); border-top:1px solid var(--line); margin-top:20px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px 48px; padding:48px 0 32px;
}
.footer-title{
  font-size:1.05rem; font-weight:800; margin-bottom:18px; padding-bottom:10px;
  font-family:var(--font-display); position:relative;
}
.footer-title::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:38px; height:3px; border-radius:3px; background:var(--accent);
}
.footer-tagline{ font-size:.9rem; color:var(--text-dim); line-height:1.7; margin-bottom:18px; max-width:340px; }

.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links li{ position:relative; padding-inline-start:16px; }
.footer-links li::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.footer-links a{ font-size:.9rem; color:var(--text-dim); transition:color .15s, padding .15s; }
.footer-links a:hover{ color:var(--accent); padding-inline-start:3px; }

.footer-social{ display:flex; gap:10px; margin-bottom:16px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
  color:var(--text-dim); transition:border-color .15s, color .15s, transform .15s;
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.footer-email{ display:inline-block; font-size:.9rem; font-weight:700; color:var(--accent); }
.footer-email:hover{ text-decoration:underline; }

.footer-bottom{
  border-top:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--text-mute);
}
.footer-bottom a{ color:var(--text-dim); }
.footer-nav ul{ display:flex; gap:18px; flex-wrap:wrap; }

/* Tablet: 3 columns → 2 columns (about spans full width) */
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 32px; padding:40px 0 26px; }
  .footer-about-col{ grid-column:1 / -1; }
}
/* Phone: single column, comfortably stacked */
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; gap:26px; padding:34px 0 22px; text-align:start; }
  .footer-about-col{ grid-column:auto; }
  .footer-tagline{ max-width:none; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:12px; }
  .footer-nav ul{ justify-content:center; }
}

/* =========================================================
   13. Accessibility / SEO helper components
   ========================================================= */
.skip-link{
  position:absolute; top:-60px; inset-inline-start:12px; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:10px 18px;
  border-radius:0 0 8px 8px; font-weight:700; font-size:.9rem; transition:top .2s ease;
}
.skip-link:focus{ top:0; }

.breadcrumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.82rem; color:var(--text-mute); margin-bottom:18px; }
.page-hero .breadcrumbs{ justify-content:center; }
.breadcrumbs a{ color:var(--text-mute); }
.breadcrumbs a:hover{ color:var(--accent); }
.breadcrumbs .sep{ color:var(--text-mute); opacity:.5; }
.breadcrumbs [aria-current="page"]{ color:var(--text-dim); }

.reading-time{ display:inline-flex; align-items:center; gap:6px; }
.reading-time::before{ content:"⏱"; }

.related-posts{ margin-top:44px; padding-top:30px; border-top:1px solid var(--line); }
.related-posts h2{ font-size:1.15rem; margin-bottom:16px; }
.related-posts .article-grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:720px){ .related-posts .article-grid{ grid-template-columns:1fr; } }

/* =========================================================
   15. Responsive (sitewide)
   ========================================================= */

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .content-wrap{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .article-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .hero-feature h2{ font-size:1.5rem; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   16. Mobile navigation, transfer crests and refreshed footer
   ========================================================= */
.menu-close{ display:none; }
.transfer-route-with-crests{ gap:14px; align-items:center; }
.transfer-club{ min-width:0; display:flex; flex:1; align-items:center; gap:8px; }
.transfer-club-from{ justify-content:flex-end; text-align:end; }
.transfer-club-to{ justify-content:flex-start; text-align:start; }
.club-crest{
  width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--bg-elev);
  box-shadow:0 5px 13px rgba(15,26,46,.08);
}
.club-crest img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.club-crest > span{ font-size:1.05rem; }
.club-name{ min-width:0; font-size:.82rem; font-weight:800; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.transfer-club-from .club-name{ color:var(--text-dim); }
.transfer-club-to .club-name{ color:var(--accent); }
.transfer-arrow{
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius:50%; font-size:1.1rem; font-weight:800;
}
.transfer-route.large .club-crest{ width:58px; height:58px; border-radius:18px; }
.transfer-route.large .club-name{ font-size:1.05rem; }
.transfer-route.large .transfer-arrow{ width:40px; height:40px; font-size:1.35rem; }

/* Mobile: give each club its own stacked column so names never get cramped/cut */
@media (max-width:600px){
  .transfer-route-with-crests{ gap:8px; }
  .transfer-club{ flex-direction:column; gap:6px; text-align:center; justify-content:flex-start; }
  .transfer-club-from, .transfer-club-to{ justify-content:flex-start; text-align:center; }
  .club-name{ font-size:.9rem; -webkit-line-clamp:3; white-space:normal; }
  .transfer-arrow{ align-self:center; }
  .transfer-route.large .transfer-arrow{ transform:rotate(-90deg); }
}
.site-footer{
  position:relative; overflow:hidden; margin-top:50px; border-top:0;
  background:linear-gradient(135deg, var(--bg-elev), var(--bg));
}
.site-footer::before{
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.footer-grid{ position:relative; padding-top:54px; }
.footer-col h2{ display:flex; align-items:center; gap:8px; color:var(--text); }
.footer-col h2::before{ content:""; width:6px; height:22px; border-radius:999px; background:var(--accent); }
.footer-col ul{ gap:5px; }
.footer-col li a{ display:inline-flex; padding:5px 0; transition:color .15s, transform .15s; }
.footer-col li a:hover{ transform:translateX(-4px); }
.footer-bottom{ position:relative; padding:20px 0; }
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:12px; }
.footer-nav a{ color:var(--text-mute); font-size:.8rem; }
.footer-nav a:hover{ color:var(--accent); }

@media (max-width:960px){
  body.nav-is-open{ overflow:hidden; touch-action:none; }
  .site-header{ z-index:100; }
  .primary-nav{
    width:min(88vw, 360px); transform:none; z-index:110;
    padding:76px 18px 28px; border-inline-start:1px solid var(--line);
    visibility:hidden; transition:opacity .28s ease, visibility .28s;
  }
  .primary-nav.is-open{ transform:none !important; visibility:visible; }
  .nav-backdrop{ z-index:90; background:rgba(10,17,32,.58); backdrop-filter:blur(2px); }
  .menu-close{
    display:flex; position:absolute; top:16px; inset-inline-end:16px; width:42px; height:42px;
    align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%;
    color:var(--text); background:var(--bg-elev); font-size:1.65rem; line-height:1; cursor:pointer;
  }
  .primary-nav > ul > li{ border-bottom:1px solid var(--line); }
  .primary-nav > ul > li:last-child{ border-bottom:0; }
  .primary-nav > ul > li > a{ padding:14px 10px; font-size:1rem; }
  .primary-nav ul ul{ display:none; padding:2px 12px 10px; }
  .primary-nav li.eks-open > ul{ display:block; }
  .header-inner{ min-height:68px; gap:8px; padding:10px 14px; }
  .site-branding img.custom-logo{ width:40px; height:40px; max-height:none; max-width:none; border-radius:9px; }
  .header-actions{ gap:7px; }
  .search-toggle, .menu-toggle, .theme-toggle{ width:40px; height:40px; }
  .telegram-btn{ width:40px; height:40px; padding:0; justify-content:center; }
  .header-rule{ height:2px; }
}

@media (max-width:560px){
  .container{ padding-inline:15px; }
  .page-hero{ padding:34px 0 12px; }
  .page-hero h1{ font-size:1.65rem; }
  .transfer-filters{ flex-wrap:nowrap; overflow-x:auto; margin:18px 0 20px; padding-bottom:4px; }
  .transfer-filter{ flex:none; }
  .transfer-card{ border-radius:16px; }
  .transfer-photo{ max-width:102px; margin-top:30px; }
  .transfer-body{ padding:14px; }
  .club-crest{ width:38px; height:38px; border-radius:12px; }
  .club-name{ font-size:.78rem; }
  .footer-grid{ gap:24px; padding:40px 0 24px; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .footer-nav ul{ justify-content:center; }
}

/* Phone menu: a complete, touch-friendly screen instead of a clipped drawer. */
@media (max-width:960px){
  .primary-nav{
    inset:0; width:100%; max-width:none; min-height:100dvh;
    padding:96px 22px max(30px, env(safe-area-inset-bottom));
    background:var(--bg); border:0; box-shadow:none;
    /* Hidden state stays INSIDE the viewport (no off-screen transform) so it
       can never create horizontal overflow / white space on swipe. */
    opacity:0; visibility:hidden; pointer-events:none; transform:none;
    transition:opacity .28s ease, visibility .28s;
  }
  .primary-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none !important; }
  .primary-nav > ul{ width:min(100%, 560px); margin:0 auto; gap:9px; }
  .primary-nav > ul > li{ border:1px solid var(--line); border-radius:14px; background:var(--bg-elev); overflow:hidden; }
  .primary-nav > ul > li > a{ padding:15px 17px; color:var(--text); font-size:1.05rem; }
  .primary-nav > ul > li.current-menu-item > a,
  .primary-nav > ul > li > a:hover{ color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg)); }
  .primary-nav ul ul{ padding:2px 12px 12px; background:transparent; }
  .primary-nav ul ul li a{ display:block; padding:10px 8px; color:var(--text-dim); }
  .menu-close{ top:max(16px, env(safe-area-inset-top)); inset-inline-end:22px; width:46px; height:46px; background:var(--bg-elev); }
  .nav-backdrop{ display:none; }
  .site-header{ z-index:100; }
  /* backdrop-filter on the header creates a containing block that traps the
     fixed nav at the header instead of the viewport (menu wouldn't show when
     scrolled). Drop it on phones so the full-screen nav anchors to the viewport. */
  .site-header{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:var(--bg); }
  .primary-nav{ z-index:120; }
}

/* Compact mobile transfer cards: keeps 2.5–3 cards visible without empty height. */
@media (max-width:720px){
  .transfer-strip{ grid-auto-columns:minmax(126px, 35vw); gap:10px; padding-bottom:8px; }
  .transfer-strip .transfer-card{ height:auto; min-height:0; border-radius:14px; }
  .transfer-strip .transfer-photo{ width:72px; height:72px; max-width:none; margin:26px auto 0; border-width:2px; }
  .transfer-strip .transfer-body{ padding:9px 8px 11px; gap:0; }
  .transfer-strip .transfer-body h3{ margin-bottom:7px; font-size:.83rem; line-height:1.35; }
  .transfer-strip .transfer-route-with-crests{ gap:4px; margin-bottom:7px; }
  .transfer-strip .transfer-club{ gap:4px; }
  .transfer-strip .club-crest{ width:32px; height:32px; border-radius:10px; }
  .transfer-strip .club-name{ font-size:.66rem; -webkit-line-clamp:2; }
  .transfer-strip .transfer-arrow{ width:23px; height:23px; margin-top:3px; font-size:.85rem; }
  .transfer-strip .transfer-meta{ gap:3px 5px; font-size:.64rem; line-height:1.4; }

  /* Smaller status badge that sits in the top corner and never covers the photo. */
  .transfer-strip .transfer-card .ribbon-tag{
    top:8px; font-size:.6rem; padding:3px 9px 3px 7px; letter-spacing:0;
  }

  /* Match strip: narrower content-sized columns, no trailing gaps. */
  .match-strip{ grid-auto-columns:minmax(240px, 78vw); gap:10px; padding-bottom:8px; }
}

/* Search panel: close button has its own space and never overlaps the form. */
.search-overlay{ align-items:center; padding:20px; }
.search-overlay-box{ position:relative; padding:66px 20px 20px; }
.search-overlay-box form{ align-items:stretch; }
.search-overlay-box input[type="search"]{ min-width:0; min-height:50px; }
.search-overlay-box form button[type="submit"]{ min-height:50px; }
.search-overlay-close{
  top:16px; inset-inline-end:16px; z-index:2; width:38px; height:38px; padding:0 !important;
  display:flex; align-items:center; justify-content:center; border-radius:50% !important;
  color:var(--text-dim) !important; background:var(--bg-elev) !important; border:1px solid var(--line) !important;
}
.search-overlay-close:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }

/* A clearer channel button in the header, especially on touch screens. */
.telegram-btn{ box-shadow:0 4px 12px rgba(29,95,224,.16); }
@media (max-width:720px){
  .search-overlay{ align-items:flex-start; padding-top:max(88px, 15vh); }
  .search-overlay-box{ width:min(100%, 520px); padding:64px 14px 14px; border-radius:20px; }
  .search-overlay-box form{ gap:8px; }
  .search-overlay-box form button[type="submit"]{ padding-inline:14px; }
  .search-overlay-close{ inset-inline-end:14px; }
  .header-actions .telegram-btn{ border-radius:12px; box-shadow:0 5px 14px rgba(29,95,224,.24); }
  .header-actions .telegram-btn svg{ width:20px; height:20px; }
}

/* ==========================================================================
   Transfer Notification Bell + iOS Guide
   ========================================================================== */
.ekn-bell-row {
	display: flex; flex-direction: column;
	align-items: center; gap: 8px; margin-top: 16px;
}
.ekn-push-bell {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 24px;
	border: 2px solid var(--clr-accent, #2563eb);
	background: transparent; color: var(--clr-accent, #2563eb);
	border-radius: 999px; font-family: inherit;
	font-size: 14px; font-weight: 700; cursor: pointer;
	transition: all .25s ease; -webkit-tap-highlight-color: transparent;
}
.ekn-push-bell:hover, .ekn-push-bell:active {
	background: var(--clr-accent, #2563eb); color: #fff;
}
.ekn-push-bell.is-active {
	background: var(--clr-accent, #2563eb); color: #fff;
}
.ekn-push-bell.is-active:hover { opacity: .85; }
.ekn-push-bell:hover .ekn-bell-icon,
.ekn-push-bell.is-active .ekn-bell-icon {
	animation: ekn-ring .5s ease;
}
@keyframes ekn-ring {
	0%,100%{transform:rotate(0)}
	20%{transform:rotate(14deg)}
	40%{transform:rotate(-14deg)}
	60%{transform:rotate(8deg)}
	80%{transform:rotate(-4deg)}
}
.ekn-bell-status {
	color: var(--clr-muted, #888); font-size: 12px; min-height: 1.2em;
}

/* iOS install guide */
.ekn-ios-guide {
	margin-top: 12px;
	padding: 16px 20px;
	background: var(--clr-card, #fff);
	border: 1px solid var(--clr-border, #e0e0e0);
	border-radius: 12px;
	max-width: 440px;
	font-size: 14px;
	line-height: 1.7;
}
.ekn-ios-guide p { margin: 0 0 8px; }
.ekn-ios-guide ol {
	margin: 0; padding-inline-start: 20px;
}
.ekn-ios-guide li { margin-bottom: 4px; }
[data-theme="dark"] .ekn-ios-guide {
	background: var(--clr-card, #1a1a2e);
}
.ekn-ios-hint {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--clr-border, #e0e0e0);
	font-size: 12px;
	color: var(--clr-muted, #888);
	line-height: 1.8;
}

/* ==========================================================================
   Notification Filter Chips
   ========================================================================== */
.ekn-notif-filters {
	margin-top: 14px;
	text-align: center;
}
.ekn-filters-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--clr-muted, #888);
	margin: 0 0 10px;
}
.ekn-filter-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ekn-chip {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ekn-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ekn-chip-label {
	display: inline-block;
	padding: 6px 14px;
	border: 1.5px solid var(--clr-border, #ddd);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text-dim, #666);
	background: transparent;
	transition: all .2s ease;
	user-select: none;
}
.ekn-chip input:checked + .ekn-chip-label {
	background: var(--clr-accent, #2563eb);
	border-color: var(--clr-accent, #2563eb);
	color: #fff;
}
.ekn-chip-label:hover {
	border-color: var(--clr-accent, #2563eb);
	color: var(--clr-accent, #2563eb);
}

/* ==========================================================================
   Player Career Strip
   ========================================================================== */
.player-career-box {
	margin-top: 24px;
	padding: 20px;
	background: var(--bg-elev, #f8f9fa);
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 14px;
}
.player-career-title {
	margin: 0 0 16px;
	font-size: 1.1rem;
	color: var(--text, #111);
	text-align: center;
}
.player-career-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	direction: rtl;
}
.player-career-club {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 90px;
	text-align: center;
}
.player-career-club img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	background: var(--bg, #fff);
	border-radius: 50%;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	transition: transform .2s ease;
}
.player-career-club:hover img {
	transform: scale(1.1);
}
.player-career-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bg, #fff);
	font-size: 1.4rem;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.player-career-name {
	font-size: .75rem;
	color: var(--text-dim, #666);
	line-height: 1.3;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}
.player-career-arrow {
	color: var(--accent, #2563eb);
	font-size: 1.2rem;
	font-weight: 700;
	opacity: .6;
}

/* Dark mode */
[data-theme="dark"] .player-career-box {
	background: var(--bg-elev, #1a1a2e);
	border-color: var(--border, #2a2a3e);
}
[data-theme="dark"] .player-career-club img,
[data-theme="dark"] .player-career-placeholder {
	background: var(--bg, #0f0f1e);
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Mobile */
@media (max-width: 600px) {
	.player-career-box { padding: 14px; }
	.player-career-strip { gap: 8px; }
	.player-career-club { max-width: 70px; }
	.player-career-club img,
	.player-career-placeholder { width: 42px; height: 42px; }
	.player-career-name { font-size: .7rem; max-width: 70px; }
	.player-career-arrow { font-size: 1rem; }
}

/* ==========================================================================
   Related Transfers
   ========================================================================== */
.related-transfers {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid var(--border, #e5e7eb);
}
.related-transfers-title {
	margin: 0 0 20px;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
	color: var(--text, #111);
	position: relative;
}
.related-transfers-title::before,
.related-transfers-title::after {
	content: '';
	display: inline-block;
	width: 40px;
	height: 2px;
	background: var(--accent, #2563eb);
	vertical-align: middle;
	margin: 0 12px;
	opacity: .5;
}
.related-transfers .transfer-grid {
	margin-top: 0;
}

/* =========================================================
   Sidebar widget: آخر الانتقالات (compact transfer list)
   ========================================================= */
.ekn-mini-transfers{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ekn-mini-transfer + .ekn-mini-transfer{
  border-top: 1px solid var(--line);
}
.ekn-mini-transfer-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-radius: var(--radius);
  transition: background-color .15s;
}
.ekn-mini-transfer-row:hover{
  background-color: var(--bg-elev);
}
.ekn-mini-transfer-row:hover .ekn-mini-name{
  color: var(--accent);
}
.ekn-mini-transfer-link{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.ekn-mini-photo{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ekn-mini-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ekn-mini-photo-fallback{
  font-size: 1.1rem;
  opacity: .5;
}

.ekn-mini-info{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ekn-mini-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

/* =========================================================
   Sidebar widget: آخر خبر من القناة (نفس نمط ekn-mini-transfer
   أعلاه، بنفس القياس 40px الدائري)
   ========================================================= */
.tg-mini-post{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s;
}
.tg-mini-post:hover{ background-color: var(--bg-elev-2); }
.tg-mini-post:hover .tg-mini-text{ color: var(--accent); }
.tg-mini-photo{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-mini-photo img{ width: 100%; height: 100%; object-fit: cover; }
.tg-mini-photo-fallback{ font-size: 1.1rem; opacity: .5; }
.tg-mini-info{ flex: 1 1 auto; min-width: 0; }
.tg-mini-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
@media (max-width: 480px){
  .tg-mini-photo{ width: 36px; height: 36px; }
}

.ekn-mini-clubs{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ekn-mini-crest{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  text-decoration: none;
}
.ekn-mini-crest img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.ekn-mini-crest-to{
  position: relative;
  overflow: visible;
}
.ekn-mini-status-label{
  position: absolute;
  bottom: calc(100% + 4px);
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  max-width: 90px;
  white-space: nowrap;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--text-mute); /* fallback for unknown/unset status */
  box-shadow: 0 2px 6px rgba(15,26,46,.18);
  pointer-events: none;
}
.ekn-mini-status-label::after{
  content: "";
  position: absolute;
  top: 100%;
  inset-inline: 0;
  margin-inline: auto;
  width: 0;
  border: 4px solid transparent;
  border-top-color: inherit;
}
.ekn-mini-crest-to[data-status="official"]  .ekn-mini-status-label{ background: #1d8f4e; }
.ekn-mini-crest-to[data-status="completed"] .ekn-mini-status-label{ background: #e8482f; }
.ekn-mini-crest-to[data-status="renewal"]   .ekn-mini-status-label{ background: #7c3aed; }
.ekn-mini-crest-to[data-status="talks"]     .ekn-mini-status-label{ background: #d98a1f; }
.ekn-mini-crest-to[data-status="failed"]    .ekn-mini-status-label{ background: var(--danger); }
.ekn-mini-crest-to[data-status="rumor"]     .ekn-mini-status-label{ background: var(--text-mute); }
.ekn-mini-arrow{
  color: var(--text-mute);
  font-size: .8rem;
  flex: 0 0 auto;
}

@media (max-width: 640px){
  .ekn-mini-name{ font-size: .84rem; }
  .ekn-mini-photo{ width: 36px; height: 36px; }
  .ekn-mini-crest{ width: 22px; height: 22px; }
}

/* Divider between the two "most viewed" sidebar widgets */
.ekn-widget-divider{
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 0 18px;
}

/* Club name links — used inside .club-name on the full transfer card,
   and standalone wherever a club name appears as clickable text. */
.ekn-club-link{
  color: inherit;
  text-decoration: none;
}
.ekn-club-link:hover{
  text-decoration: underline;
}

/* =========================================================
   Lineup Builder — أداة بناء التشكيلات التفاعلية
   ========================================================= */
.lineup-app{ padding: 8px 0 40px; }

.lineup-shell{ max-width: 1180px; }

/* --- شريط الأدوات العلوي --- */
.lineup-toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:22px;
}
.lineup-toolbar-group{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.lineup-toolbar-actions{ margin-inline-start:auto; }

.lineup-field{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; color:var(--text-dim); font-weight:700; }
.lineup-field select,
.lineup-field input[type="text"]{
  font-family:var(--font-body); font-size:.92rem; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; min-width:160px; outline:none; transition:border-color .15s;
}
.lineup-field select:focus,
.lineup-field input[type="text"]:focus{ border-color:var(--accent); }

.lineup-pitch-size-chips{ display:flex; gap:6px; }
.lineup-pitch-size-chip{
  font-family:var(--font-body); font-weight:800; font-size:.8rem;
  background:var(--bg); color:var(--text-dim); border:1px solid var(--line);
  border-radius:999px; padding:9px 14px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.lineup-pitch-size-chip:hover{ border-color:var(--accent); color:var(--accent); }
.lineup-pitch-size-chip.is-active{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; border-color:transparent;
}

.lineup-swatches{ display:flex; flex-wrap:wrap; gap:8px; max-width:250px; }
.lineup-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--bg);
  box-shadow:0 0 0 1.5px var(--line); cursor:pointer; padding:0;
  transition:transform .12s, box-shadow .12s;
}
.lineup-swatch:hover{ transform:translateY(-2px); }
.lineup-swatch.is-active{ box-shadow:0 0 0 2px var(--accent); }

.lineup-swatch--picker{
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  color:#fff;
}
.lineup-swatch--picker svg{
  width:14px; height:14px; filter:drop-shadow(0 0 1.5px rgba(0,0,0,.7));
  pointer-events:none;
}
.lineup-swatch--picker input[type="color"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:none; padding:0;
}

.lineup-logo-upload{ display:flex; align-items:center; gap:8px; }
.lineup-logo-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:700; font-size:.82rem; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; cursor:pointer; transition:border-color .15s, background .15s;
  white-space:nowrap;
}
.lineup-logo-btn:hover{ background:var(--bg-elev-2); }
.lineup-logo-btn svg{ width:15px; height:15px; flex:none; }
.lineup-logo-remove{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg); color:var(--text-mute);
  font-size:.8rem; cursor:pointer; transition:.15s;
}
.lineup-logo-remove:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

.lineup-toolbar--theme{ margin-top:-8px; gap:20px; }
.lineup-theme-swatches{ max-width:none; }
.lineup-theme-swatch{
  width:30px; height:30px; border-radius:8px; border:2px solid var(--bg);
  box-shadow:0 0 0 1.5px var(--line); cursor:pointer; padding:0;
  transition:transform .12s, box-shadow .12s;
}
.lineup-theme-swatch:hover{ transform:translateY(-2px); }
.lineup-theme-swatch.is-active{ box-shadow:0 0 0 2px var(--accent); }

.lineup-bg-position-field{ min-width:0; }
.lineup-bg-position-pad{ display:flex; align-items:center; gap:14px; }
.lineup-bg-nudge-grid{
  display:grid; grid-template-columns:repeat(3, 26px); grid-template-rows:repeat(3, 26px);
  gap:2px;
}
.lineup-bg-nudge{
  grid-row:2; grid-column:2;
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:6px;
  background:var(--bg); border:1px solid var(--line); color:var(--text-dim);
  cursor:pointer; padding:0; transition:.12s;
}
.lineup-bg-nudge svg{ width:13px; height:13px; }
.lineup-bg-nudge:hover{ background:var(--bg-elev-2); color:var(--accent); }
.lineup-bg-nudge[data-dy="-1"]{ grid-row:1; grid-column:2; }
.lineup-bg-nudge[data-dx="-1"]{ grid-row:2; grid-column:1; }
.lineup-bg-nudge[data-dx="1"]{ grid-row:2; grid-column:3; }
.lineup-bg-nudge[data-dy="1"]{ grid-row:3; grid-column:2; }
.lineup-bg-nudge--center{ border-radius:50%; color:var(--text-mute); }
.lineup-bg-zoom{ display:flex; flex-direction:column; gap:4px; font-size:.72rem; color:var(--text-mute); font-weight:700; }
.lineup-bg-zoom input[type="range"]{ width:110px; accent-color:var(--accent); }

.lineup-toggle-field{ flex-direction:row; align-items:center; gap:10px; }
.lineup-toggle{ position:relative; display:inline-flex; }
.lineup-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.lineup-toggle-track{
  display:inline-flex; align-items:center;
  width:42px; height:24px; border-radius:999px;
  background:var(--line); padding:3px; transition:background .15s;
}
.lineup-toggle-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .15s;
}
.lineup-toggle input:checked ~ .lineup-toggle-track{ background:var(--accent); }
.lineup-toggle input:checked ~ .lineup-toggle-track .lineup-toggle-thumb{ transform:translateX(-18px); }
.lineup-toggle input:focus-visible ~ .lineup-toggle-track{ outline:2px solid var(--accent); outline-offset:2px; }

.lineup-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:800; font-size:.86rem;
  border-radius:999px; padding:10px 18px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .12s, background .15s, box-shadow .15s;
}
.lineup-btn svg{ width:16px; height:16px; flex:none; }
.lineup-btn:hover{ transform:translateY(-1px); }
.lineup-btn--ghost{ background:var(--bg); color:var(--text); border-color:var(--line); }
.lineup-btn--ghost:hover{ background:var(--bg-elev-2); }
.lineup-btn--primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; box-shadow:0 8px 20px rgba(29,95,224,.28);
}
.lineup-btn--primary:hover{ box-shadow:0 10px 24px rgba(29,95,224,.36); }

/* --- تخطيط رئيسي: ملعب + لوحة جانبية --- */
.lineup-main{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:24px; align-items:start; }

.lineup-pitch-wrap{ display:flex; flex-direction:column; gap:10px; }
.lineup-hint{ text-align:center; font-size:.8rem; color:var(--text-mute); margin:0; }

/* --- الملعب --- */
.lineup-pitch{
  position:relative; width:100%; aspect-ratio: 600 / 900; max-width:520px; margin:0 auto;
  border-radius:18px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, #1c8a4c 0%, #0f6b39 100%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:var(--shadow);
  --kit-shirt:#1d5fe0; --kit-text:#ffffff;
  --pitch-line-color: rgba(255,255,255,.55);
}
.lineup-pitch.is-transparent{
  background:
    repeating-conic-gradient(#e7ebf2 0% 25%, #f7f9fc 0% 50%) 50% / 24px 24px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow);
}
/* طبقة صورة الخلفية المرفوعة — عنصر منفصل تمامًا عن محتوى الملعب،
   حتى يبقى أي تعتيم اختياري (يتحكم به المستخدم) محصورًا بالصورة نفسها
   فقط ولا يؤثر على الخطوط أو بطاقات اللاعبين أو الهيدر فوقها. */
.lineup-pitch-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:none;
}
.lineup-pitch.has-bg-image .lineup-pitch-bg{ display:block; }
.lineup-pitch.has-bg-image::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* تعتيم اختياري بالكامل — صفر افتراضيًا (الصورة بإضاءتها الطبيعية
     الكاملة)، ويتحكم فيه المستخدم بشريط "تعتيم الصورة". */
  background:rgba(6,17,10, var(--pitch-dim, 0));
}
.lineup-pitch.hide-mow-stripes::before{ display:none; }
.lineup-pitch::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 10%,
    transparent 10%, transparent 20%
  );
}
.lineup-pitch-header{
  position:absolute; inset-inline:0; top:0; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:linear-gradient(180deg, rgba(6,17,10,.65), rgba(6,17,10,0));
}
.lineup-pitch-badge{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--kit-shirt); color:var(--kit-text);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.78rem; overflow:hidden;
}
.lineup-pitch-badge.has-logo{ background:#fff; }
.lineup-pitch-badge img{ width:100%; height:100%; object-fit:cover; }
.lineup-pitch-title{ display:flex; flex-direction:column; line-height:1.25; }
.lineup-pitch-title strong{ color:#fff; font-size:.98rem; font-weight:800; }
.lineup-pitch-title span{ color:rgba(255,255,255,.75); font-size:.74rem; font-weight:700; }

.lineup-pitch-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.lineup-pitch-svg--futsal{ display:none; }
.lineup-pitch.is-futsal .lineup-pitch-svg--full{ display:none; }
.lineup-pitch.is-futsal .lineup-pitch-svg--futsal{ display:block; }
.pitch-line{ fill:none; stroke:var(--pitch-line-color, rgba(255,255,255,.55)); stroke-width:2; }
.pitch-dot{ fill:var(--pitch-line-color, rgba(255,255,255,.55)); }

.lineup-slots{ position:absolute; inset:0; z-index:3; }

/* --- بطاقة اللاعب --- */
.lineup-slot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:grab; user-select:none; touch-action:none;
  width:min(22vw, 96px);
}
.lineup-slot.is-dragging{ cursor:grabbing; z-index:10; }
.lineup-slot:focus-visible .lineup-shirt{ outline:2px solid #fff; outline-offset:2px; }

.lineup-shirt{
  position:relative; width:38px; height:38px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.lineup-shirt svg{ width:100%; height:100%; fill:var(--kit-shirt); }
.lineup-shirt-number{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding-top:4px; color:var(--kit-text); font-weight:800; font-size:.78rem;
  transition:opacity .12s; pointer-events:none;
}
.lineup-pitch.hide-shirt-numbers .lineup-shirt-number{ opacity:0; }

.lineup-name{
  max-width:100%; text-align:center; font-size:.68rem; font-weight:800; color:#fff;
  background:rgba(6,17,10,.55); border-radius:999px; padding:2px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:34px; pointer-events:none;
}

/* --- اللوحة الجانبية --- */
.lineup-side{ display:flex; flex-direction:column; gap:16px; }
.lineup-panel{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px;
}
.lineup-panel h2{ margin:0 0 4px; font-size:1rem; font-weight:800; color:var(--text); }
.lineup-panel-desc{ margin:0 0 14px; font-size:.78rem; color:var(--text-mute); line-height:1.5; }

.lineup-formation-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.lineup-formation-chip{
  font-family:var(--font-body); font-weight:800; font-size:.82rem;
  background:var(--bg); color:var(--text-dim); border:1px solid var(--line);
  border-radius:10px; padding:9px 4px; cursor:pointer; transition:.15s;
}
.lineup-formation-chip:hover{ border-color:var(--accent); color:var(--accent); }
.lineup-formation-chip.is-active{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; border-color:transparent;
}

.lineup-roster{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; }
.lineup-roster-row{ display:flex; align-items:center; gap:8px; }
.lineup-roster-row input{
  flex:1; min-width:0; font-family:var(--font-body); font-size:.82rem; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 10px; outline:none;
}
.lineup-roster-row input:focus{ border-color:var(--accent); }
.lineup-roster-number{
  flex:none; width:26px; height:26px; padding:0;
  border-radius:50%; text-align:center; border:1px solid var(--line);
  background:var(--bg-elev-2); color:var(--text-dim); font-size:.72rem; font-weight:800;
}
.lineup-roster-number:focus{ border-color:var(--accent); }
.lineup-roster-role{ flex:none; font-size:.68rem; color:var(--text-mute); font-weight:700; max-width:70px; text-align:left; }

/* --- استجابة الشاشات الصغيرة --- */
@media (max-width: 980px){
  .lineup-main{ grid-template-columns: 1fr; }
  .lineup-side{ order:2; }
}

@media (max-width: 640px){
  .lineup-toolbar{ flex-direction:column; align-items:stretch; }
  .lineup-toolbar-actions{ margin-inline-start:0; justify-content:stretch; }
  .lineup-toolbar-actions .lineup-btn{ flex:1; justify-content:center; }
  .lineup-field select,
  .lineup-field input[type="text"]{ min-width:0; width:100%; }
  .lineup-formation-grid{ grid-template-columns:repeat(2, 1fr); }
  .lineup-name{ font-size:.6rem; }
  .lineup-toolbar--theme{ margin-top:0; }
}


/* =========================================================
   EK Liquid Sports UI — visual refresh layer (v6.2.0)
   Keeps the original templates and WordPress functionality intact.
   ========================================================= */
:root{
  --bg:#f3f7fc;
  --bg-elev:rgba(255,255,255,.76);
  --bg-elev-2:rgba(232,241,253,.82);
  --line:rgba(148,169,201,.24);
  --text:#101d35;
  --text-dim:#53647e;
  --text-mute:#8494ad;
  --accent:#1764e8;
  --accent-2:#08a9dc;
  --accent-ink:#fff;
  --shadow:0 18px 48px rgba(24,55,102,.10);
  --radius:16px;
  --radius-lg:24px;
  --container:1280px;
}
[data-theme="dark"]{
  --bg:#07111f;
  --bg-elev:rgba(17,31,53,.78);
  --bg-elev-2:rgba(24,45,73,.82);
  --line:rgba(132,164,207,.19);
  --text:#f2f7ff;
  --text-dim:#b5c5dc;
  --text-mute:#8196b5;
  --accent:#4b91ff;
  --accent-2:#25c4ef;
  --accent-ink:#061324;
  --shadow:0 20px 55px rgba(0,0,0,.32);
}
html{background:var(--bg);}
body{
  background:
    radial-gradient(ellipse at 8% 12%,rgba(22,115,232,.10),transparent 34%),
    radial-gradient(ellipse at 92% 34%,rgba(0,177,220,.10),transparent 32%),
    linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--bg) 88%,#d9eaff));
  background-attachment:fixed;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.container{max-width:var(--container);}
.site-header{
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(20,54,100,.045);
}
.header-inner{min-height:82px;gap:clamp(10px,1.6vw,24px);}
.site-branding img.custom-logo{width:48px;height:48px;border-radius:15px;filter:drop-shadow(0 5px 12px rgba(20,90,190,.12));}
.primary-nav>ul{gap:4px;flex-wrap:wrap;justify-content:center;}
.primary-nav>ul>li>a{
  padding:10px 13px;border:1px solid transparent;border-radius:13px;
  font-size:.92rem;transition:all .22s ease;
}
.primary-nav>ul>li>a:hover,.primary-nav>ul>li.current-menu-item>a{
  background:linear-gradient(135deg,rgba(38,112,235,.13),rgba(0,178,222,.09));
  border-color:rgba(55,132,230,.16);box-shadow:inset 0 1px rgba(255,255,255,.65);
}
.header-actions{gap:8px;}
.theme-toggle,.search-toggle,.menu-toggle{
  background:var(--bg-elev);border-color:var(--line);box-shadow:0 5px 18px rgba(26,64,116,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.telegram-btn{box-shadow:0 8px 20px rgba(29,95,224,.20);padding:10px 17px;}
.header-rule{height:3px;background:linear-gradient(90deg,#175fe5 0%,#08b5df 52%,#65d7f3 100%);}
.nav-backdrop{background:rgba(4,14,29,.48);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.hero{padding:38px 0 12px;}
.hero-grid{grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);gap:22px;}
.hero-feature{
  min-height:420px;border:1px solid rgba(255,255,255,.24);border-radius:28px;
  box-shadow:0 24px 65px rgba(12,39,78,.18);isolation:isolate;
}
.hero-feature.has-image:before{
  background:linear-gradient(180deg,rgba(4,13,29,.02) 12%,rgba(4,13,29,.25) 42%,rgba(4,13,29,.91) 100%);
}
.hero-feature img{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.hero-feature:hover img{transform:scale(1.035);}
.hero-feature .hero-content{padding:clamp(22px,3vw,38px);}
.hero-feature h2{font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.35;text-wrap:balance;}
.hero-feature .excerpt{font-size:1rem;line-height:1.9;}
.hero-feature .eyebrow{border-radius:8px;clip-path:none;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.hero-side{gap:13px;}
.hero-side .mini-card{
  min-height:104px;padding:13px;border-radius:19px;
  background:var(--bg-elev);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 9px 28px rgba(22,57,105,.055);transition:transform .24s,border-color .24s,box-shadow .24s;
}
.hero-side .mini-card:hover{transform:translateY(-3px);border-color:rgba(36,119,234,.4);box-shadow:var(--shadow);}
html[dir="rtl"] .hero-side .mini-card:hover{transform:translateY(-3px);}
.hero-side .mini-card img{width:100px;height:76px;border-radius:13px;}
.hero-side .mini-card h3{font-size:1rem;line-height:1.5;}
.matches-section{margin-top:18px;}
.coverage-strip,.match-strip,.transfer-strip{scrollbar-width:thin;}
.section-heading{gap:16px;margin-bottom:22px;}
.section-heading h2{font-size:1.35rem;letter-spacing:-.3px;}
.section-heading .rule{background:linear-gradient(90deg,var(--line),rgba(24,111,226,.35));}
.content-wrap{grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr);gap:28px;padding-top:42px;}
.article-grid{gap:20px;}
.card,.sidebar .widget{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:21px;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 32px rgba(20,53,100,.055);
}
.card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(20,62,120,.13);border-color:rgba(31,117,231,.4);}
.card .thumb{background:var(--bg-elev-2);}
.card .thumb img{transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.card .body{padding:18px;}
.card h3{font-size:1.06rem;line-height:1.55;}
.card .ribbon-tag{border-radius:0 0 10px 0;clip-path:none;box-shadow:0 5px 16px rgba(0,0,0,.18);}
.sidebar .widget{padding:21px;margin-bottom:18px;}
.site-footer{
  background:linear-gradient(135deg,rgba(8,24,48,.97),rgba(10,49,88,.96));
  border-top:1px solid rgba(255,255,255,.12);color:#edf5ff;
}
.site-footer p,.site-footer .footer-tagline,.site-footer .footer-email{color:#b8c9df;}
.site-footer .footer-links a{color:#d9e8fa;}
.site-footer .footer-links a:hover{color:#70d8f6;}
.telegram-float{box-shadow:0 12px 30px rgba(29,95,224,.28);border:1px solid rgba(255,255,255,.35);}
.search-overlay{background:rgba(4,14,29,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.search-overlay-box{background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);}
.page-hero{background:linear-gradient(135deg,rgba(20,93,201,.10),rgba(0,178,220,.07));}
.static-content .article-content,.single-article .article-content{background:var(--bg-elev);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,38px);}
/* Give interactive modules the same glass surface without changing their data or behavior. */
.transfer-card,.match-card,.coverage-card,.lineup-panel,.draw-panel{border-radius:18px;}
button,a{ -webkit-tap-highlight-color:transparent; }

@media(max-width:1100px){
  .header-inner{gap:10px;}
  .primary-nav>ul>li>a{padding:9px 10px;font-size:.86rem;}
  .hero-grid{grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);}
}
@media(max-width:960px){
  .header-inner{min-height:72px;padding:10px 18px;}
  .site-header{background:color-mix(in srgb,var(--bg) 82%,transparent);}
  .primary-nav{background:var(--bg);border-inline-start:1px solid var(--line);box-shadow:var(--shadow);}
  .primary-nav>ul{display:flex;align-items:stretch;gap:5px;}
  .primary-nav>ul>li>a{border-radius:12px;padding:12px 14px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-feature{min-height:390px;}
  .hero-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .content-wrap{grid-template-columns:1fr;gap:28px;}
  .sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .sidebar .widget{margin:0;}
}
@media(max-width:640px){
  .container{padding-left:15px;padding-right:15px;}
  .header-inner{padding:9px 14px;min-height:66px;}
  .site-branding img.custom-logo{width:42px;height:42px;}
  .header-actions{gap:6px;}
  .header-actions .telegram-btn{padding:9px 11px;font-size:.76rem;}
  .theme-toggle,.search-toggle,.menu-toggle{width:38px;height:38px;}
  .hero{padding:22px 0 6px;}
  .hero-feature{min-height:350px;border-radius:22px;}
  .hero-feature .hero-content{padding:21px;}
  .hero-feature h2{font-size:1.48rem;}
  .hero-feature .excerpt{font-size:.88rem;line-height:1.75;}
  .hero-side{grid-template-columns:1fr;gap:10px;}
  .hero-side .mini-card{min-height:88px;padding:10px;}
  .hero-side .mini-card img{width:88px;height:66px;}
  .content-wrap{padding-top:28px;padding-bottom:40px;}
  .section-heading{margin-bottom:15px;gap:10px;}
  .section-heading h2{font-size:1.16rem;}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  .card{border-radius:16px;}
  .card .thumb{aspect-ratio:4/3;}
  .card .body{padding:11px;gap:6px;}
  .card h3{font-size:.88rem;line-height:1.5;}
  .card .meta{font-size:.7rem;}
  .card .ribbon-tag{font-size:.64rem;padding:4px 9px;}
  .sidebar{grid-template-columns:1fr;}
  .static-content .article-content,.single-article .article-content{padding:19px;border-radius:17px;}
}
@media(max-width:380px){
  .header-actions .telegram-btn span{display:none;}
  .article-grid{grid-template-columns:1fr;}
  .hero-feature{min-height:320px;}
}


/* =========================================================
   17. EK Liquid Football refresh — v6.3.0
   Premium glass surfaces, subtle football geometry and a
   high-contrast light footer across desktop and mobile.
   ========================================================= */
:root{
  --ekn-glass:rgba(255,255,255,.68);
  --ekn-glass-strong:rgba(255,255,255,.84);
  --ekn-glass-line:rgba(255,255,255,.78);
  --ekn-glass-shadow:0 18px 48px rgba(24,68,125,.10);
  --ekn-navy:#102b4d;
  --ekn-sky:#18a9e8;
}

/* A quiet stadium-light atmosphere; content remains crisp and readable. */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse at 8% 8%, rgba(67,153,238,.10), transparent 32%),
    radial-gradient(ellipse at 94% 26%, rgba(14,177,218,.08), transparent 28%),
    linear-gradient(135deg, rgba(239,247,255,.42), transparent 48%);
  background-attachment:fixed;
}

.site-header{
  background:rgba(248,252,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border-bottom:1px solid rgba(89,151,212,.20);
  box-shadow:0 5px 24px rgba(25,69,122,.045);
}
.site-header.is-scrolled{
  background:rgba(248,252,255,.91);
  box-shadow:0 12px 34px rgba(22,61,110,.10);
}
.header-inner{min-height:76px;}
.primary-nav > ul > li > a{
  border:1px solid transparent;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a{
  background:rgba(255,255,255,.76);
  border-color:rgba(62,139,216,.18);
  box-shadow:0 5px 18px rgba(37,91,151,.07);
  transform:translateY(-1px);
}
.theme-toggle,.search-toggle,.menu-toggle{
  background:rgba(255,255,255,.78);
  border-color:rgba(78,139,199,.22);
  box-shadow:0 5px 16px rgba(35,76,127,.07);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.telegram-btn{
  box-shadow:0 9px 22px rgba(29,95,224,.20);
  transition:transform .2s ease,box-shadow .2s ease;
}
.telegram-btn:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(29,95,224,.25);}

/* Football-pitch geometry and a restrained ball motif in the lead area. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:40px;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 8px;
  pointer-events:none;
  opacity:.52;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 74px, rgba(61,143,218,.10) 75px 76px, transparent 77px),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(61,143,218,.08) 50%, transparent calc(50% + .5px)),
    linear-gradient(rgba(61,143,218,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,143,218,.045) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,44px 44px,44px 44px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(88px,13vw,168px);
  aspect-ratio:1;
  inset-inline-end:3%;
  top:9%;
  border-radius:50%;
  opacity:.17;
  pointer-events:none;
  background:
    radial-gradient(circle at 32% 27%,rgba(255,255,255,.98),rgba(255,255,255,.18) 32%,transparent 58%),
    repeating-conic-gradient(from 8deg,#174d88 0 10deg,#eaf6ff 10deg 20deg);
  border:5px solid rgba(255,255,255,.72);
  box-shadow:inset -12px -14px 22px rgba(7,38,78,.38),0 18px 42px rgba(24,87,151,.18);
  transform:rotate(-18deg);
}
.hero-feature,.hero-side .mini-card,.card,.sidebar .widget,.coverage-card{
  border:1px solid rgba(112,164,218,.22);
  box-shadow:var(--ekn-glass-shadow);
}
.hero-feature,.hero-side .mini-card,.card,.sidebar .widget{
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
}
.hero-feature{border-radius:26px;}
.hero-side .mini-card{
  background:rgba(255,255,255,.70);
  border-radius:19px;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.hero-side .mini-card:hover{transform:translateY(-3px);border-color:rgba(36,133,219,.38);box-shadow:0 18px 38px rgba(27,83,142,.13);}
.card{
  background:rgba(255,255,255,.76);
  border-radius:21px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);border-color:rgba(31,139,219,.42);box-shadow:0 20px 42px rgba(24,78,139,.14);}
.section-heading .rule{background:linear-gradient(90deg,rgba(45,117,194,.10),rgba(20,157,218,.48));}

/* Telegram CTA: layered glass over the existing brand gradient. */
.tg-cta{
  border:1px solid rgba(255,255,255,.42);
  border-radius:25px;
  padding:20px 24px;
  box-shadow:0 20px 48px rgba(19,104,197,.20),inset 0 1px 0 rgba(255,255,255,.30);
  background:linear-gradient(118deg,#397be3 0%,#168fe0 54%,#08a9d5 100%);
}
.tg-cta::after{
  content:"";
  position:absolute;
  inset:1px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:inherit;
  pointer-events:none;
}
.tg-cta-glow{background:radial-gradient(circle at 16% 8%,rgba(255,255,255,.34),transparent 42%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08),transparent 68%);}
.tg-cta-icon{width:48px;height:48px;}
.tg-cta-plane{width:38px;height:38px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.38);}
.tg-cta-title{font-size:1.08rem;}
.tg-cta-text{font-size:.9rem;}
.tg-cta-btn{padding:12px 22px;box-shadow:0 8px 22px rgba(5,44,100,.12);}
.tg-cta-btn:active{transform:scale(.98);}
.tg-cta-pulse{animation:ekn-pulse 3.2s ease-out infinite;}
.tg-cta-pulse-2{animation-delay:1.6s;}
@keyframes ekn-pulse{0%{transform:scale(.78);opacity:.55}75%,100%{transform:scale(1.55);opacity:0}}

/* Footer intentionally remains light in both colour modes for legibility. */
.site-footer,
[data-theme="dark"] .site-footer{
  position:relative;
  overflow:hidden;
  color:#183451;
  background:
    radial-gradient(circle at 88% 12%,rgba(69,168,232,.12),transparent 28%),
    linear-gradient(135deg,#f7fbff 0%,#edf5fc 52%,#f9fcff 100%);
  border-top:1px solid rgba(67,132,192,.20);
  box-shadow:0 -12px 42px rgba(30,75,123,.055);
}
.site-footer::before{
  height:3px;
  background:linear-gradient(90deg,#2368df,#16a8d9,#8bd8f0,#2368df);
}
.site-footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.30;
  background:
    radial-gradient(circle at 12% 78%,transparent 0 62px,rgba(51,126,191,.12) 63px 64px,transparent 65px),
    linear-gradient(115deg,transparent 0 48%,rgba(77,145,202,.07) 48.1% 48.3%,transparent 48.4%);
}
.site-footer .footer-grid,.site-footer .footer-bottom{position:relative;z-index:1;}
.site-footer .footer-grid{padding-top:48px;padding-bottom:34px;gap:34px 54px;}
.site-footer .footer-title,
[data-theme="dark"] .site-footer .footer-title{
  color:#102d4d;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.2px;
  margin-bottom:20px;
  padding-bottom:13px;
}
.site-footer .footer-title::after{width:48px;height:3px;background:linear-gradient(90deg,#2168df,#16a8d9);}
.site-footer .footer-col h2::before{background:linear-gradient(180deg,#2168df,#16a8d9);}
.site-footer p,.site-footer .footer-tagline,
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer .footer-tagline{
  color:#425d79;
  font-size:1rem;
  line-height:1.95;
}
.site-footer .footer-links a,
[data-theme="dark"] .site-footer .footer-links a{
  color:#294968;
  font-size:1rem;
  font-weight:600;
  line-height:1.9;
  transition:color .2s ease,transform .2s ease;
}
.site-footer .footer-links a:hover{color:#145ed0;}
.site-footer .footer-col li::before{background:#2583dc;}
.site-footer .footer-email,
[data-theme="dark"] .site-footer .footer-email{
  display:inline-block;
  color:#174f91;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.15px;
  overflow-wrap:anywhere;
  padding:5px 0;
}
.site-footer .footer-social{display:flex;align-items:center;gap:12px;margin:18px 0 8px;}
.site-footer .footer-social a{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:#1d62c5;background:rgba(255,255,255,.82);
  border:1px solid rgba(72,139,201,.22);box-shadow:0 8px 20px rgba(26,75,128,.08);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.site-footer .footer-social a:hover{transform:translateY(-3px);background:#fff;box-shadow:0 12px 24px rgba(26,75,128,.14);}
.site-footer .footer-bottom{
  border-top:1px solid rgba(70,126,179,.18);
  color:#526d87;
  font-size:.9rem;
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
}
.site-footer .footer-bottom a{color:#315879;}
.site-footer .footer-nav ul{gap:12px 20px;}

/* Mobile: larger readable footer type, touch targets and clean stacking. */
@media(max-width:820px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:30px 28px;padding-top:42px;}
  .site-footer .footer-about-col{grid-column:1/-1;padding-bottom:8px;}
}
@media(max-width:640px){
  .hero{padding-top:24px;}
  .hero::after{width:92px;inset-inline-end:-22px;top:3%;opacity:.12;}
  .tg-cta{border-radius:22px;padding:19px 17px;gap:12px;}
  .tg-cta-body{flex:1 1 calc(100% - 54px);}
  .tg-cta-title{font-size:1.02rem;line-height:1.55;}
  .tg-cta-text{font-size:.88rem;line-height:1.8;}
  .tg-cta-btn{min-height:48px;font-size:.95rem;}
  .site-footer{margin-top:34px;}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:26px;padding:36px 20px 26px;text-align:right;}
  .site-footer .footer-about-col{grid-column:auto;padding-bottom:12px;border-bottom:1px solid rgba(70,126,179,.17);}
  .site-footer .footer-col:not(.footer-about-col){padding-bottom:18px;border-bottom:1px solid rgba(70,126,179,.14);}
  .site-footer .footer-title{font-size:1.12rem;margin-bottom:14px;padding-bottom:11px;}
  .site-footer .footer-tagline{font-size:1rem;line-height:1.95;max-width:38ch;}
  .site-footer .footer-links{gap:9px;}
  .site-footer .footer-links a{display:inline-flex;min-height:40px;align-items:center;font-size:1rem;}
  .site-footer .footer-email{font-size:1rem;}
  .site-footer .footer-social a{width:50px;height:50px;}
  .site-footer .footer-bottom{padding:18px 20px calc(22px + env(safe-area-inset-bottom));gap:12px;text-align:center;line-height:1.9;}
  .site-footer .footer-nav ul{justify-content:center;gap:10px 16px;}
}

/* Keyboard focus and reduced-motion support. */
.site-footer a:focus-visible,.tg-cta a:focus-visible,.site-header button:focus-visible{outline:3px solid #159bd7;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .tg-cta-pulse{animation:none;opacity:0;}
}

.ekn-reveal-enabled .ekn-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
.ekn-reveal-enabled .ekn-reveal.ekn-revealed{opacity:1;transform:translateY(0);}
.card,.mini-card,.tg-cta{background-image:radial-gradient(180px circle at var(--ekn-pointer-x,50%) var(--ekn-pointer-y,50%),rgba(80,174,239,.10),transparent 72%);}
@media(prefers-reduced-motion:reduce){.ekn-reveal-enabled .ekn-reveal{opacity:1;transform:none;}}


/* =========================================================
   18. v6.3.1 — Contrast correction for the light appearance
   Keep the Telegram CTA saturated; never let glass overlays
   wash out the background or reduce text contrast.
   ========================================================= */
.tg-cta,
[data-theme="dark"] .tg-cta{
  position:relative;
  isolation:isolate;
  background-color:#1764e8 !important;
  background-image:linear-gradient(118deg,#2868dc 0%,#087fda 52%,#079fc9 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 18px 42px rgba(20,91,190,.22),inset 0 1px 0 rgba(255,255,255,.26);
}
.tg-cta-glow{
  z-index:0;
  opacity:.48;
  background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.30),transparent 43%),
             linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08),transparent 68%) !important;
}
.tg-cta-orb{z-index:0;background:rgba(255,255,255,.12);}
.tg-cta-icon,.tg-cta-body,.tg-cta-btn{
  position:relative;
  z-index:1;
}
.tg-cta-body,
.tg-cta-title,
.tg-cta-text,
.tg-cta-handle{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(5,35,85,.16);
}
.tg-cta-handle{
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.18);
}
.tg-cta-btn{
  background:#fff !important;
  color:#1458c5 !important;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(5,35,90,.16);
}
.tg-cta-btn svg{color:#1458c5 !important;fill:currentColor;}
.tg-cta-btn span{color:#1458c5 !important;}
.tg-cta-plane{
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(255,255,255,.42);
}
.tg-cta-plane svg{color:#fff !important;fill:currentColor;}

/* General light-mode text contrast outside image-backed headlines. */
html:not([data-theme="dark"]) body{
  color:#10233f;
}
html:not([data-theme="dark"]) .section-heading h2,
html:not([data-theme="dark"]) .widget-title,
html:not([data-theme="dark"]) .card h3 a,
html:not([data-theme="dark"]) .mini-card h3 a,
html:not([data-theme="dark"]) .static-content,
html:not([data-theme="dark"]) .article-content{
  color:#10233f;
}
html:not([data-theme="dark"]) .card .meta,
html:not([data-theme="dark"]) .mini-card .meta,
html:not([data-theme="dark"]) .article-excerpt{
  color:#526782;
}


/* v6.3.3: Make the Telegram mark explicit and visible in the footer on mobile. */
.site-footer .footer-social a.footer-telegram{
  color:#1d62c5 !important;
}
.site-footer .footer-social a.footer-telegram svg{
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:24px;
  min-height:24px;
  flex:0 0 24px;
  fill:currentColor !important;
  color:#1d62c5 !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media(max-width:820px){
  .site-footer .footer-social a.footer-telegram{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .site-footer .footer-social a.footer-telegram svg{
    width:25px !important;
    height:25px !important;
  }
}


/* =========================================================
   EK v6.4.1 — Interactive football newsroom vision hero
   ========================================================= */
.ek-vision{position:relative;margin:26px auto 36px;}
.ek-vision .container{max-width:1440px;}
.ek-vision-scene{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,45vw,700px);
  border:1px solid rgba(91,174,255,.48);border-radius:30px;
  background:#061632 url("assets/img/ek-vision-control-room-v644.webp") center center/cover no-repeat;
  box-shadow:0 24px 70px rgba(5,28,67,.24),inset 0 1px 0 rgba(255,255,255,.24);
  --vision-x:50%;--vision-y:42%;
}
.ek-vision-scene:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,12,31,.12),rgba(2,12,31,.02) 48%,rgba(2,12,31,.18));
}
.ek-vision-scene:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.7;mix-blend-mode:screen;
  background:radial-gradient(430px circle at var(--vision-x) var(--vision-y),rgba(35,190,255,.22),transparent 72%);
  transition:opacity .35s ease;
}
.ek-vision-copy{
  position:absolute;z-index:3;top:5%;left:7%;right:7%;max-width:1180px;margin-inline:auto;
  padding:clamp(22px,2.8vw,38px) clamp(22px,4vw,58px);
  text-align:center;color:#fff;
  background:linear-gradient(135deg,rgba(3,18,46,.97),rgba(5,34,76,.96));
  border:1px solid rgba(105,190,255,.76);border-radius:26px;
  box-shadow:0 18px 55px rgba(0,10,35,.34),inset 0 1px 0 rgba(255,255,255,.2),0 0 34px rgba(0,151,255,.18);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transform:perspective(1200px) rotateX(var(--vision-tilt-y,0deg)) rotateY(var(--vision-tilt-x,0deg));
  transition:transform .22s ease,box-shadow .3s ease,border-color .3s ease;
  will-change:transform;
}
.ek-vision-copy:after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(103,203,255,.12);
  border-radius:19px;pointer-events:none;
}
.ek-vision-kicker{
  position:relative;display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;
  padding:6px 14px;border:1px solid rgba(67,178,255,.5);border-radius:999px;
  background:rgba(28,121,220,.2);color:#9be0ff;font-size:.86rem;font-weight:800;letter-spacing:.04em;
}
.ek-vision-kicker:before{
  content:"";width:7px;height:7px;border-radius:50%;background:#25c7ff;
  box-shadow:0 0 12px #25c7ff;animation:ek-vision-pulse 1.8s ease-in-out infinite;
}
.ek-vision-copy h2{
  position:relative;margin:0 0 14px!important;color:#fff!important;
  font-size:clamp(1.65rem,3vw,2.65rem)!important;line-height:1.4!important;
  font-weight:900!important;text-shadow:0 3px 18px rgba(0,0,0,.3);
}
.ek-vision-copy p{
  position:relative;max-width:990px;margin:0 auto!important;color:#eaf5ff!important;
  font-size:clamp(1rem,1.48vw,1.28rem)!important;line-height:1.9!important;
  font-weight:600!important;text-wrap:pretty;
}
.ek-vision-mobile-image{display:none;}
.ek-vision-effects{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.ek-vision-orb{position:absolute;display:block;border-radius:50%;filter:blur(2px);opacity:.28;}
.ek-vision-orb-one{
  width:180px;height:180px;left:3%;top:48%;
  background:radial-gradient(circle,rgba(27,178,255,.3),rgba(27,178,255,0) 70%);
  animation:ek-vision-float 8s ease-in-out infinite;
}
.ek-vision-orb-two{
  width:230px;height:230px;right:5%;bottom:1%;
  background:radial-gradient(circle,rgba(56,110,255,.26),rgba(56,110,255,0) 70%);
  animation:ek-vision-float 10s ease-in-out -3s infinite reverse;
}
.ek-vision-scanline{
  position:absolute;left:0;right:0;top:-25%;height:2px;opacity:.0;
  background:linear-gradient(90deg,transparent,rgba(75,210,255,.7),transparent);
  box-shadow:0 0 18px rgba(28,180,255,.5);
  animation:ek-vision-scan 8s linear infinite;
}
.ek-vision-scene.is-interacting .ek-vision-copy{
  border-color:rgba(95,218,255,.95);
  box-shadow:0 20px 60px rgba(0,10,35,.4),inset 0 1px 0 rgba(255,255,255,.24),0 0 42px rgba(0,174,255,.24);
}
.ek-vision-scene.is-pressed .ek-vision-copy{box-shadow:0 12px 34px rgba(0,10,35,.34),inset 0 1px 0 rgba(255,255,255,.2),0 0 28px rgba(0,174,255,.22);}
@keyframes ek-vision-pulse{0%,100%{opacity:1;box-shadow:0 0 12px #25c7ff}50%{opacity:.55;box-shadow:0 0 4px #25c7ff}}
@keyframes ek-vision-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12px,-16px,0) scale(1.08)}}
@keyframes ek-vision-scan{0%{top:-25%;opacity:0}8%{opacity:.55}88%{opacity:.35}100%{top:115%;opacity:0}}
@media(max-width:820px){
  .ek-vision{margin:18px auto 26px;}
  .ek-vision .container{padding-inline:14px;}
  .ek-vision-scene{
    min-height:0;overflow:hidden;display:flex;flex-direction:column;
    border-radius:22px;background:none;border:1px solid rgba(52,143,226,.3);
    box-shadow:0 16px 38px rgba(19,75,135,.14);
  }
  .ek-vision-scene:before{display:none;}
  .ek-vision-scene:after{opacity:.34;}
  .ek-vision-mobile-image{
    position:relative;z-index:0;display:block;width:100%;
    height:clamp(205px,60vw,300px);flex:0 0 auto;
    background:#061632 url("assets/img/ek-vision-control-room-mobile-v644.webp") 60% center/cover no-repeat;
    border-bottom:1px solid rgba(75,174,255,.42);
  }
  .ek-vision-effects{z-index:1;}
  .ek-vision-copy{
    position:relative;z-index:3;inset:auto;max-width:none;width:100%;
    padding:24px 21px 27px;border:0;border-radius:0;
    background:linear-gradient(145deg,#071a38 0%,#0a2b59 58%,#073b70 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);text-align:right;
    transform:none;will-change:auto;
  }
  .ek-vision-copy:after{inset:7px;border-radius:0;}
  .ek-vision-kicker{margin-bottom:9px;font-size:.78rem;}
  .ek-vision-copy h2{font-size:1.42rem!important;line-height:1.5!important;margin-bottom:10px!important;}
  .ek-vision-copy p{font-size:1rem!important;line-height:1.95!important;font-weight:500!important;}
  .ek-vision-scanline{animation-duration:10s;opacity:.3;}
}
@media(max-width:380px){
  .ek-vision .container{padding-inline:10px;}
  .ek-vision-mobile-image{height:198px;background-position:62% center;}
  .ek-vision-copy{padding:21px 16px 23px;}
  .ek-vision-copy h2{font-size:1.28rem!important;}
  .ek-vision-copy p{font-size:.94rem!important;}
}
@media(prefers-reduced-motion:no-preference){
  .ek-vision-scene{animation:ek-vision-arrive .75s cubic-bezier(.2,.75,.25,1) both;}
  @keyframes ek-vision-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
  .ek-vision-scene,.ek-vision-kicker:before,.ek-vision-orb,.ek-vision-scanline{animation:none!important;}
  .ek-vision-copy{transform:none!important;transition:none!important;}
}


/* =========================================================
   EK v6.4.5 — Mobile-first Telegram identity screen
   Keep the complete six-monitor room visible on phones and
   add a readable, tappable WFN / Telegram channel display.
   ========================================================= */
@media(max-width:820px){
  .ek-vision-mobile-image{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1020 / 560;
    flex:0 0 auto !important;
    background-color:#041a3b !important;
    background-image:url("assets/img/ek-vision-control-room-mobile-v645.webp") !important;
    background-position:center center !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    overflow:hidden;
  }
  .ek-vision-mobile-telegram{
    position:absolute;
    z-index:5;
    left:12px;
    bottom:12px;
    display:flex !important;
    align-items:center;
    gap:9px;
    width:min(286px,calc(100% - 24px));
    min-height:76px;
    box-sizing:border-box;
    padding:9px 11px;
    color:#fff !important;
    text-decoration:none !important;
    direction:rtl;
    text-align:right;
    border:1px solid rgba(111,203,255,.72);
    border-radius:16px;
    background:linear-gradient(120deg,rgba(4,20,48,.94),rgba(5,56,105,.91));
    box-shadow:0 10px 28px rgba(0,8,28,.42),inset 0 1px 0 rgba(255,255,255,.2),0 0 22px rgba(0,163,255,.18);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .ek-vision-mobile-telegram:active{
    transform:scale(.98);
    border-color:#7bdcff;
  }
  .ek-vision-mobile-telegram img{
    display:block !important;
    width:48px !important;
    height:48px !important;
    min-width:48px;
    max-width:48px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
    border:2px solid rgba(80,190,255,.9);
    box-shadow:0 0 15px rgba(35,175,255,.28);
  }
  .ek-vision-mobile-telegram-info{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.2;
  }
  .ek-vision-mobile-telegram-top{
    display:flex;
    align-items:center;
    gap:5px;
    color:#83d8ff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
  }
  .ek-vision-mobile-telegram-dot{
    width:6px;height:6px;border-radius:50%;
    background:#2bc7ff;box-shadow:0 0 9px #2bc7ff;
  }
  .ek-vision-mobile-telegram-info strong{
    display:block;
    max-width:100%;
    overflow:hidden;
    color:#fff !important;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .ek-vision-mobile-telegram-info small{
    color:#b8d8f4 !important;
    font-size:10px;
    font-weight:700;
    direction:ltr;
    unicode-bidi:embed;
  }
  .ek-vision-mobile-telegram-count{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:47px;
    padding:7px 6px;
    border:1px solid rgba(89,190,255,.5);
    border-radius:11px;
    background:rgba(22,115,203,.28);
    color:#fff !important;
    font-size:13px;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap;
  }
  .ek-vision-mobile-telegram-count small{
    margin-top:3px;
    color:#b9e7ff !important;
    font-size:9px;
    font-weight:700;
  }
  .ek-vision-effects{z-index:1 !important;}
}
@media(max-width:380px){
  .ek-vision-mobile-telegram{
    left:9px;bottom:9px;
    width:min(270px,calc(100% - 18px));
    gap:7px;padding:8px 9px;min-height:70px;
  }
  .ek-vision-mobile-telegram img{width:43px!important;height:43px!important;min-width:43px;max-width:43px;}
  .ek-vision-mobile-telegram-count{min-width:43px;padding:6px 5px;}
}
@media(prefers-reduced-motion:reduce){
  .ek-vision-mobile-telegram{transition:none!important;}
}


/* =========================================================
   EK v6.4.6 — Telegram subscribe action inside the vision card
   Replaces the old standalone rectangular homepage banner.
   ========================================================= */
.ek-vision-subscribe{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;margin:22px auto 0;padding:10px 23px;
  max-width:100%;box-sizing:border-box;
  color:#073b78!important;text-decoration:none!important;
  border:1px solid rgba(255,255,255,.88);border-radius:18px;
  background:linear-gradient(135deg,#fff 0%,#e8f6ff 55%,#d9efff 100%);
  box-shadow:0 10px 28px rgba(0,8,28,.24),inset 0 1px 0 rgba(255,255,255,.98),0 0 0 4px rgba(76,180,255,.12);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
  direction:rtl;text-align:right;
}
.ek-vision-subscribe:hover{
  color:#052e62!important;text-decoration:none!important;
  transform:translateY(-3px);
  background:linear-gradient(135deg,#fff 0%,#f0faff 55%,#cceaff 100%);
  box-shadow:0 15px 34px rgba(0,8,28,.3),inset 0 1px 0 #fff,0 0 0 5px rgba(76,180,255,.18);
}
.ek-vision-subscribe:focus-visible{
  outline:3px solid #5bd7ff;outline-offset:4px;
}
.ek-vision-subscribe-icon{
  display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;
  color:#fff;border-radius:50%;
  background:linear-gradient(145deg,#2789ed,#0753bd);
  box-shadow:0 4px 12px rgba(0,84,190,.28);
}
.ek-vision-subscribe-label{display:flex;flex-direction:column;gap:2px;line-height:1.25;}
.ek-vision-subscribe-label strong{font-size:1rem;font-weight:900;color:#073b78;}
.ek-vision-subscribe-label small{font-size:.78rem;font-weight:700;direction:ltr;unicode-bidi:embed;color:#52799f;}
.ek-vision-subscribe-arrow{font-size:1.35rem;font-weight:900;color:#1687d8;margin-inline-start:5px;transition:transform .22s ease;}
.ek-vision-subscribe:hover .ek-vision-subscribe-arrow{transform:translateX(-4px);}
@media(max-width:820px){
  .ek-vision-subscribe{
    display:flex;width:100%;max-width:420px;min-height:58px;
    margin:20px 0 0;padding:9px 16px;border-radius:15px;
    justify-content:center;
  }
  .ek-vision-subscribe-label strong{font-size:.96rem;}
  .ek-vision-subscribe-label small{font-size:.76rem;}
}
@media(max-width:380px){
  .ek-vision-subscribe{gap:9px;min-height:54px;padding:8px 11px;}
  .ek-vision-subscribe-icon{width:34px;height:34px;flex-basis:34px;}
  .ek-vision-subscribe-label strong{font-size:.88rem;}
  .ek-vision-subscribe-arrow{font-size:1.15rem;}
}
@media(prefers-reduced-motion:reduce){
  .ek-vision-subscribe,.ek-vision-subscribe-arrow{transition:none!important;}
  .ek-vision-subscribe:hover{transform:none;}
}


/* =========================================================
   EK v6.4.7 — Desktop-only vision panel refinement
   Preserve the approved mobile layout exactly as it is.
   ========================================================= */
@media (min-width:821px){
  .ek-vision-scene{
    min-height:clamp(560px,45vw,700px);
  }
  .ek-vision-copy{
    top:4%;
    left:13%;
    right:13%;
    max-width:980px;
    padding:18px 34px 20px;
    border-radius:23px;
  }
  .ek-vision-copy:after{
    inset:6px;
    border-radius:17px;
  }
  .ek-vision-kicker{
    margin-bottom:6px;
    padding:5px 12px;
    font-size:.78rem;
  }
  .ek-vision-copy h2{
    margin:0 0 8px!important;
    font-size:clamp(1.55rem,2.25vw,2.05rem)!important;
    line-height:1.28!important;
  }
  .ek-vision-copy p{
    max-width:850px;
    font-size:clamp(.91rem,1.12vw,1.05rem)!important;
    line-height:1.65!important;
  }
  .ek-vision-subscribe{
    min-height:48px;
    margin-top:13px;
    padding:7px 18px;
    gap:9px;
    border-radius:15px;
  }
  .ek-vision-subscribe-icon{
    width:33px;height:33px;flex-basis:33px;
  }
  .ek-vision-subscribe-label strong{font-size:.9rem;}
  .ek-vision-subscribe-label small{font-size:.7rem;}
  .ek-vision-subscribe-arrow{font-size:1.15rem;}
}


/* =========================================================
   EK v6.4.8 — Featured competitions logo wall
   Placed immediately below the interactive vision section.
   ========================================================= */
.ek-competitions{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:clamp(28px,4vw,54px) 0 clamp(34px,4vw,58px);
  padding:clamp(26px,3.5vw,46px) 0;
}
.ek-competitions:before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 8%,rgba(35,151,235,.10),transparent 38%),
    radial-gradient(ellipse at 88% 92%,rgba(27,190,224,.10),transparent 40%);
}
.ek-competitions-heading{
  margin:0 auto 24px;
  text-align:center;
}
.ek-competitions-kicker{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:8px;
  color:#1688c9;font-size:.72rem;font-weight:900;
  letter-spacing:.16em;direction:ltr;
}
.ek-competitions-kicker span{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#20c3ee;box-shadow:0 0 12px rgba(32,195,238,.8);
}
.ek-competitions-heading h2{
  margin:0!important;
  color:#092b52!important;
  font-size:clamp(1.35rem,2.4vw,2rem)!important;
  line-height:1.45!important;
  font-weight:900!important;
}
.ek-competitions-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:15px;
  align-items:stretch;
}
.ek-competition-logo,
.ek-competition-more{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:142px;
  padding:18px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(102,166,220,.22);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(235,246,255,.67));
  box-shadow:0 10px 28px rgba(16,67,116,.07),inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.ek-competition-logo:before,
.ek-competition-more:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.42),transparent 48%);
  opacity:.7;
}
.ek-competition-logo:hover,
.ek-competition-more:hover{
  transform:translateY(-5px);
  border-color:rgba(31,151,225,.48);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(226,244,255,.88));
  box-shadow:0 17px 34px rgba(16,90,151,.13),inset 0 1px 0 #fff,0 0 0 3px rgba(35,166,229,.06);
}
.ek-competition-logo img{
  position:relative;z-index:1;
  display:block;width:100%;height:100px;max-width:150px;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 5px 8px rgba(13,42,79,.08));
}
.ek-competition-more{
  flex-direction:column;gap:8px;
  color:#0d4b7e;text-align:center;
  font-size:.88rem;font-weight:800;line-height:1.65;
}
.ek-competition-more svg{
  position:relative;z-index:1;
  width:65px;height:52px;color:#176eb6;
  filter:drop-shadow(0 5px 8px rgba(13,42,79,.12));
}
.ek-competition-more span{position:relative;z-index:1;max-width:220px;}
@media(max-width:1024px){
  .ek-competitions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
  .ek-competition-logo,.ek-competition-more{min-height:132px;padding:15px;}
}
@media(max-width:600px){
  .ek-competitions{margin:24px 0 34px;padding:24px 0;}
  .ek-competitions-heading{margin-bottom:17px;}
  .ek-competitions-heading h2{font-size:1.22rem!important;}
  .ek-competitions-kicker{font-size:.64rem;margin-bottom:5px;}
  .ek-competitions-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .ek-competition-logo,.ek-competition-more{
    min-height:112px;padding:12px;border-radius:17px;
  }
  .ek-competition-logo img{height:78px;max-width:125px;}
  .ek-competition-more{font-size:.78rem;line-height:1.55;gap:5px;}
  .ek-competition-more svg{width:52px;height:42px;}
}
@media(prefers-reduced-motion:reduce){
  .ek-competition-logo,.ek-competition-more{transition:none!important;}
  .ek-competition-logo:hover,.ek-competition-more:hover{transform:none;}
}


/* EK v6.4.9 — Refined FIFA World Cup trophy mark */
.ek-competition-logo[aria-label="كأس العالم"] img{
  width:100%;
  max-width:132px;
  height:112px;
  object-fit:contain;
  filter:drop-shadow(0 7px 10px rgba(155,112,28,.18));
}
@media(max-width:600px){
  .ek-competition-logo[aria-label="كأس العالم"] img{
    max-width:112px;
    height:86px;
  }
}


/* EK v6.5.0 — use the authentic FIFA World Cup trophy reference supplied by the site owner */
.ek-competition-logo[aria-label="كأس العالم"] img{
  width:auto;
  height:116px;
  max-width:132px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(113,79,13,.20));
}
@media(max-width:600px){
  .ek-competition-logo[aria-label="كأس العالم"] img{
    height:88px;
    max-width:112px;
  }
}