/*
Theme Name: EK News
Theme URI: https://t.me/Europa_king1
Author: Hayder
Author URI: https://t.me/Europa_king1
Description: قالب ووردبريس احترافي لمواقع الأخبار والمقالات، بهوية بيضاء وزرقاء أنيقة، مع دعم كامل للنمطين الصباحي (فاتح) والداكن، تبويبات وتصنيفات مستطيلة الشكل، عناصر عائمة بحركة سلسة، وزر اشتراك مباشر بقناة تليجرام. متوافق تلقائيًا مع الصفحات والتصنيفات والقوائم الموجودة مسبقًا في الموقع.
Version: 6.1.1
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); }

/* 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; } }

/* =========================================================
   14. Player Transfers Center
   ========================================================= */
.transfer-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 26px;
}
.transfer-filter{
  border:1px solid var(--line); background:var(--bg-elev); color:var(--text-dim);
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  padding:8px 16px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.transfer-filter:hover{ border-color:var(--accent); color:var(--accent); }
.transfer-filter.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.transfer-filter-empty{ text-align:center; color:var(--text-dim); padding:40px 20px; font-size:1rem; }

/* Toolbar row: filters on one side, the columns-per-row chooser on the other */
.transfer-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:24px 0 26px;
}
.transfer-toolbar .transfer-filters{ margin:0; flex:1 1 auto; }
.transfer-layout{
  display:none; /* only useful on phones; shown via media query below */
  gap:6px; flex:none; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:12px; padding:4px;
}
.transfer-layout-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 6px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--text-mute); font-weight:800; font-size:.92rem;
  font-family:var(--font-display); transition:background .15s, color .15s;
}
.transfer-layout-btn.is-active{ background:var(--accent); color:#fff; }

.transfer-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
/* Homepage horizontal strip for latest transfers */
.transfer-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 300px); justify-content:start;
  gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory;
  align-items:stretch;
}
.transfer-strip .transfer-card{ scroll-snap-align:start; height:100%; }
.transfer-strip::-webkit-scrollbar{ height:8px; }
.transfer-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.transfers-strip-section .transfers-icon{ font-size:1.1rem; }

/* Inside the strip, stack each club (crest over name) so long names get the
   full column width and every card stays the same height and aligned. */
.transfer-strip .transfer-route-with-crests{ gap:10px; align-items:flex-start; }
.transfer-strip .transfer-club{ flex-direction:column; gap:6px; text-align:center; justify-content:flex-start; flex:1; }
.transfer-strip .transfer-club-from,
.transfer-strip .transfer-club-to{ justify-content:flex-start; text-align:center; }
.transfer-strip .club-name{ white-space:normal; -webkit-line-clamp:2; font-size:.8rem; }
.transfer-strip .transfer-arrow{ align-self:center; margin-top:6px; }
.transfer-strip .transfer-body{ display:flex; flex-direction:column; flex:0; }
.transfer-strip .transfer-meta{ margin-top:0; padding-top:0; }
.transfer-card{
  position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .18s, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.transfer-card:hover{ border-color:var(--accent); transform:translateY(-6px); box-shadow:0 14px 30px rgba(29,95,224,.16); }
.transfer-card.is-hidden{ display:none; }
.transfer-card .ribbon-tag{ position:absolute; top:14px; inset-inline-start:0; z-index:3; transition:transform .18s; }
.transfer-card:hover .ribbon-tag{ transform:translateX(0) scale(1.05); }

/* Light sweep across the card on hover */
.transfer-card::after{
  content:""; position:absolute; top:0; bottom:0; width:55%; z-index:2; pointer-events:none;
  inset-inline-start:-70%; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(29,95,224,.10), transparent);
  transition:inset-inline-start .65s ease, opacity .2s;
}
.transfer-card:hover::after{ inset-inline-start:115%; opacity:1; }

.transfer-photo{
  display:block; aspect-ratio:1/1; max-width:120px; margin:34px auto 0; border-radius:50%;
  overflow:hidden; background:var(--bg-elev); border:3px solid var(--bg-elev);
  transition:border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.transfer-card:hover .transfer-photo{
  border-color:var(--accent); transform:scale(1.06);
  box-shadow:0 6px 18px rgba(29,95,224,.22);
}
.transfer-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.transfer-card:hover .transfer-photo img{ transform:scale(1.09); }
.transfer-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; }
.transfer-body{ padding:16px; text-align:center; }
.transfer-body h3{ font-size:1.02rem; margin-bottom:10px; transition:color .18s; }
.transfer-card:hover .transfer-body h3 a{ color:var(--accent); }
.transfer-route{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
.transfer-route .club{ font-size:.88rem; font-weight:700; }
.transfer-route .club.from{ color:var(--text-mute); }
.transfer-route .club.to{ color:var(--accent); }
.transfer-route .arrow{ color:var(--text-mute); font-size:1.1rem; }

/* Club crests lift, arrow slides along the route on hover */
.transfer-card .club-crest{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.transfer-card:hover .transfer-club-from .club-crest{ transform:translateY(-3px) scale(1.06); }
.transfer-card:hover .transfer-club-to .club-crest{ transform:translateY(-3px) scale(1.12); box-shadow:0 5px 14px rgba(29,95,224,.25); }
.transfer-arrow{ transition:transform .28s cubic-bezier(.2,.8,.2,1), color .2s; }
.transfer-card:hover .transfer-arrow{ color:var(--accent); animation:tfArrow 1.1s ease-in-out infinite; }
@keyframes tfArrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5px); } }

.transfer-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:.78rem; color:var(--text-mute); }
.transfer-meta .fee{ font-weight:700; color:var(--text-dim); transition:color .18s, transform .18s; }
.transfer-card:hover .transfer-meta .fee{ color:var(--accent); transform:scale(1.05); }

/* Deal progress bar */
.transfer-progress{ margin-top:14px; }
.transfer-progress-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.transfer-progress-label{ font-size:.74rem; font-weight:700; color:var(--text-mute); }
.transfer-progress-pct{ font-size:.8rem; font-weight:800; color:var(--accent); font-family:var(--font-display); }
.transfer-progress-track{
  height:8px; border-radius:999px; background:var(--bg-elev-2, var(--bg-elev)); overflow:hidden;
  border:1px solid var(--line);
}
.transfer-progress-fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .6s cubic-bezier(.2,.8,.2,1);
  position:relative; overflow:hidden;
}
/* subtle moving sheen on the fill */
.transfer-progress-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size:200% 100%; animation:tfProg 2.4s linear infinite;
}
@keyframes tfProg{ 0%{ background-position:120% 0; } 100%{ background-position:-40% 0; } }
/* Colour the fill to match the deal status */
.transfer-card[data-status="official"] .transfer-progress-fill{ background:linear-gradient(90deg,#1d8f4e,#37c46f); }
.transfer-card[data-status="completed"] .transfer-progress-fill{ background:linear-gradient(90deg,#e8482f,#ff7a5c); }
.transfer-card[data-status="talks"] .transfer-progress-fill{ background:linear-gradient(90deg,#d98a1f,#f4bd4f); }
@media (prefers-reduced-motion: reduce){
  .transfer-progress-fill::after{ animation:none; }
  .transfer-progress-fill{ transition:none; }
}

/* Hover tint matches the deal status */
.transfer-card[data-status="official"]:hover{ border-color:#1d8f4e; box-shadow:0 14px 30px rgba(29,143,78,.18); }
.transfer-card[data-status="completed"]:hover{ border-color:#e8482f; box-shadow:0 14px 30px rgba(232,72,47,.18); }
.transfer-card[data-status="renewal"]:hover{ border-color:#7c3aed; box-shadow:0 14px 30px rgba(124,58,237,.18); }
.transfer-card[data-status="talks"]:hover{ border-color:#d98a1f; box-shadow:0 14px 30px rgba(217,138,31,.18); }
.transfer-card[data-status="failed"]:hover{ border-color:var(--danger); }

/* Touch devices: no hover, so keep a gentle press feedback instead */
@media (hover:none){
  .transfer-card::after{ display:none; }
  .transfer-card:active{ transform:scale(.985); }
}
@media (prefers-reduced-motion: reduce){
  .transfer-card, .transfer-photo, .transfer-photo img, .club-crest, .transfer-arrow{ transition:none; }
  .transfer-card:hover .transfer-arrow{ animation:none; }
  .transfer-card::after{ display:none; }
}

/* Status badge colors — reuses the rectangular ribbon-tag shape sitewide */
.ribbon-tag.status-official{ background:#1d8f4e; }
.ribbon-tag.status-completed{ background:#e8482f; }
.ribbon-tag.status-renewal{ background:#7c3aed; }
.ribbon-tag.status-rumor{ background:#8896ac; }
.ribbon-tag.status-talks{ background:#d98a1f; }
.ribbon-tag.status-failed{ background:var(--danger); }

/* Contract renewal — single club, no from→to arrow */
.transfer-route-renewal{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:10px; }
.transfer-route-renewal .transfer-club{ flex-direction:column; gap:6px; text-align:center; flex:none; }
.transfer-renewal-badge{
  font-size:.75rem; font-weight:800; color:#7c3aed;
  background:color-mix(in srgb, #7c3aed 12%, transparent);
  padding:4px 12px; border-radius:999px; font-family:var(--font-display);
}

.transfer-detail-box{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; margin:24px 0;
}
.transfer-route.large{ gap:18px; margin-bottom:18px; }
.transfer-route.large .club{ font-size:1.2rem; }
.transfer-facts{ display:flex; flex-direction:column; gap:8px; font-size:.92rem; color:var(--text-dim); }
.transfer-facts strong{ color:var(--text); }

@media (max-width:960px){
  .transfer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .transfer-grid{ grid-template-columns:1fr; }
  .transfer-route.large{ flex-direction:column; gap:6px; }
  /* Show the columns chooser on phones and honour the visitor's pick. */
  .transfer-layout{ display:flex; }

  .transfer-grid[data-cols="2"]{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .transfer-grid[data-cols="3"]{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .transfer-grid[data-cols="4"]{ grid-template-columns:repeat(4,1fr); gap:8px; }

  /* 2-per-row: gentle compaction */
  .transfer-grid[data-cols="2"] .transfer-photo{ max-width:88px; margin-top:26px; }
  .transfer-grid[data-cols="2"] .transfer-body{ padding:12px 10px; }
  .transfer-grid[data-cols="2"] .transfer-body h3{ font-size:.9rem; }
  .transfer-grid[data-cols="2"] .club-name{ font-size:.72rem; }
  .transfer-grid[data-cols="2"] .transfer-meta{ font-size:.68rem; }

  /* 3-per-row: moderate compaction */
  .transfer-grid[data-cols="3"] .ribbon-tag{ font-size:.55rem; padding:2px 7px 2px 5px; top:8px; }
  .transfer-grid[data-cols="3"] .transfer-photo{ max-width:68px; margin-top:20px; border-width:2px; }
  .transfer-grid[data-cols="3"] .transfer-photo-fallback{ font-size:1.3rem; }
  .transfer-grid[data-cols="3"] .transfer-body{ padding:10px 7px; }
  .transfer-grid[data-cols="3"] .transfer-body h3{ font-size:.8rem; margin-bottom:7px; }
  .transfer-grid[data-cols="3"] .transfer-route-with-crests{ gap:5px; }
  .transfer-grid[data-cols="3"] .transfer-arrow{ font-size:.7rem; }
  .transfer-grid[data-cols="3"] .club-crest{ width:24px; height:24px; flex:none; }
  .transfer-grid[data-cols="3"] .club-crest span{ font-size:.6rem; }
  .transfer-grid[data-cols="3"] .club-name{ font-size:.64rem; }
  .transfer-grid[data-cols="3"] .transfer-meta{ font-size:.62rem; gap:4px; }
  .transfer-grid[data-cols="3"] .transfer-progress-label{ display:none; }
  .transfer-grid[data-cols="3"] .transfer-progress-pct{ font-size:.62rem; }
  .transfer-grid[data-cols="3"] .transfer-progress-head{ justify-content:center; margin-bottom:3px; }
  .transfer-grid[data-cols="3"] .transfer-progress-track{ height:6px; }
  .transfer-grid[data-cols="3"] .transfer-progress{ margin-top:9px; }

  /* 4-per-row: keep the SAME horizontal route as 1 & 2 (from ← to side by side),
     just shrink type, crests and spacing so everything stays readable. */
  .transfer-grid[data-cols="4"] .ribbon-tag{ font-size:.5rem; padding:2px 6px 2px 5px; top:6px; }
  .transfer-grid[data-cols="4"] .transfer-photo{ max-width:52px; margin-top:16px; border-width:2px; }
  .transfer-grid[data-cols="4"] .transfer-photo-fallback{ font-size:1.1rem; }
  .transfer-grid[data-cols="4"] .transfer-body{ padding:8px 5px; }
  .transfer-grid[data-cols="4"] .transfer-body h3{ font-size:.7rem; margin-bottom:6px; line-height:1.3; }
  .transfer-grid[data-cols="4"] .transfer-route-with-crests{ gap:4px; }
  .transfer-grid[data-cols="4"] .transfer-arrow{ font-size:.65rem; }
  .transfer-grid[data-cols="4"] .club-crest{ width:20px; height:20px; flex:none; }
  .transfer-grid[data-cols="4"] .club-crest span{ font-size:.55rem; }
  .transfer-grid[data-cols="4"] .club-name{ font-size:.56rem; line-height:1.25; }
  .transfer-grid[data-cols="4"] .transfer-meta{ font-size:.55rem; gap:3px; margin-top:6px; flex-direction:column; }

  /* Progress bar stays visible, just slimmer */
  .transfer-grid[data-cols="4"] .transfer-progress-label{ display:none; }
  .transfer-grid[data-cols="4"] .transfer-progress-pct{ font-size:.6rem; }
  .transfer-grid[data-cols="4"] .transfer-progress-head{ justify-content:center; margin-bottom:3px; }
  .transfer-grid[data-cols="4"] .transfer-progress-track{ height:5px; }
  .transfer-grid[data-cols="4"] .transfer-progress{ margin-top:8px; }
}

/* =========================================================
   14b. Homepage strips (transfers / coverage) — shared heading style
   ========================================================= */
.matches-section{ padding:34px 0 6px; }
.matches-section.top-strip{ padding-top:26px; }
.matches-section .section-heading h2{ display:flex; align-items:center; gap:10px; }
@keyframes ekn-pulse{
  0%{ box-shadow:0 0 0 0 rgba(224,72,58,.5); }
  70%{ box-shadow:0 0 0 8px rgba(224,72,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,72,58,0); }
}
.matches-all-link{ font-size:.85rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.matches-all-link:hover{ color:var(--accent-2); }

/* =========================================================
   14c. Coverage Center — one live-blog page per match
   ========================================================= */
.coverage-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 300px);
  gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px;
}
.coverage-strip::-webkit-scrollbar{ height:8px; }
.coverage-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.coverage-strip .coverage-card{ scroll-snap-align:start; height:100%; }

.coverage-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }

.coverage-card{
  position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--bg-elev); transition:transform .22s, box-shadow .22s, border-color .22s;
}
.coverage-card:hover{ border-color:var(--accent); transform:translateY(-6px); box-shadow:0 14px 30px rgba(29,95,224,.16); }

.coverage-photo{ position:relative; display:block; aspect-ratio:16/10; background:var(--crest-bg,#15223a); overflow:hidden; }
.coverage-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.coverage-card:hover .coverage-photo img{ transform:scale(1.08); }
.coverage-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; }
.coverage-live-badge{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(10,10,10,.72); color:#fff; font-size:.72rem; font-weight:800;
  padding:5px 12px; border-radius:999px; backdrop-filter:blur(3px);
}
.coverage-live-badge::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#e0483a;
  animation:ekn-pulse 1.6s ease-in-out infinite;
}
.coverage-crests-overlay{
  position:absolute; bottom:12px; inset-inline-start:12px; inset-inline-end:12px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.coverage-crest-circle{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.72); backdrop-filter:blur(3px);
  border:2px solid rgba(255,255,255,.85); overflow:hidden; font-size:1.2rem;
}
.coverage-crest-circle img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.coverage-crests-vs{
  color:#fff; font-weight:800; font-size:.78rem; text-transform:uppercase;
  background:rgba(10,10,10,.72); border-radius:999px; padding:3px 9px; backdrop-filter:blur(3px);
}

.coverage-body{ padding:16px; text-align:center; }
.coverage-body h3{ font-size:1.02rem; margin:10px 0; transition:color .18s; }
.coverage-card:hover .coverage-body h3 a{ color:var(--accent); }
.coverage-body .date{ font-size:.8rem; color:var(--text-mute); }
.coverage-teams{ display:flex; align-items:center; justify-content:center; gap:10px; }
.coverage-teams .transfer-club{ flex-direction:column; gap:6px; text-align:center; flex:1; }
.coverage-teams .club-name{ white-space:normal; -webkit-line-clamp:2; font-size:.8rem; }

/* Single coverage page */
.coverage-detail-teams{ margin-bottom:24px; }

/* Coverage / Lineup tabs */
.coverage-tabs{
  display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:22px;
}
.coverage-tab{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.95rem; color:var(--text-mute);
  padding:10px 18px; border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color .15s, border-color .15s;
}
.coverage-tab:hover{ color:var(--text); }
.coverage-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent); }
.coverage-tab-panel[hidden]{ display:none; }

/* Tactical pitch */
.coverage-pitch-wrap{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-bottom:28px; background:var(--bg-elev);
}
.coverage-pitch-formations{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; background:var(--bg-elev); font-weight:800; font-size:.9rem;
}
.coverage-pitch{
  position:relative; aspect-ratio:4/5; width:100%; max-width:600px; margin:0 auto;
  background:#3a9c4f;
}
.coverage-pitch::before{
  /* outer touchline + center line */
  content:''; position:absolute; inset:4% 3%; border:2px solid rgba(255,255,255,.6); border-radius:1px;
}
.coverage-pitch::after{
  content:''; position:absolute; top:50%; inset-inline:3%; height:2px; background:rgba(255,255,255,.6); transform:translateY(-50%);
}
.coverage-pitch-centercircle{
  position:absolute; top:50%; left:50%; width:15%; aspect-ratio:1;
  border:2px solid rgba(255,255,255,.6); border-radius:50%; transform:translate(-50%,-50%);
}
.coverage-pitch-centerdot{
  position:absolute; top:50%; left:50%; width:6px; height:6px;
  background:rgba(255,255,255,.6); border-radius:50%; transform:translate(-50%,-50%);
}
.coverage-pitch-half{ position:absolute; inset-inline:0; height:50%; z-index:1; }
.coverage-pitch-home{ top:0; }
.coverage-pitch-away{ bottom:0; }
/* The away half is laid out with the same top:X% coordinates as home
   (goalkeeper nearest its own goal, attack nearest the halfway line) —
   we simply anchor slots from the bottom of the half instead of the top,
   so nothing needs visually flipping/mirroring and text stays readable. */
.coverage-pitch-away .ekn-pitch-slot{ top:auto !important; }

.coverage-pitch-crest{
  position:absolute; width:34%; max-width:130px;
  opacity:.16; pointer-events:none; z-index:0;
}
.coverage-pitch-crest-home{ top:6%; left:50%; transform:translateX(-50%); }
.coverage-pitch-crest-away{ bottom:6%; left:50%; transform:translateX(-50%); }

.ekn-pitch-slot{
  position:absolute; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:2px; width:80px;
}
.ekn-pitch-jersey-wrap{ position:relative; width:36px; height:36px; }
.ekn-pitch-jersey-wrap .ekn-jersey{ width:36px; height:36px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.ekn-pitch-badge{
  position:absolute; top:-4px; inset-inline-end:-6px; font-size:.68rem; line-height:1;
  background:#fff; border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.ekn-pitch-badge-out{ background:#dc2626; color:#fff; font-weight:900; }
.ekn-pitch-name{
  font-size:.68rem; font-weight:700; color:#fff; text-align:center; line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.7); max-width:80px; background:rgba(0,0,0,.25);
  border-radius:5px; padding:1px 4px; overflow-wrap:break-word; word-break:break-word;
  overflow:hidden;
}

/* The mini pitch shown inside the "starting lineup" timeline event uses a
   narrower container but the SAME internal jersey/name pixel sizes as the
   full-size pitch above — which is what caused the crowding/overlap seen
   in testing. Scale every internal element down together so spacing stays
   proportional at the smaller size. */
.coverage-event-lineup .coverage-pitch{
  max-width:380px; aspect-ratio:3/5;
}
.coverage-event-lineup .ekn-pitch-slot{ width:48px; gap:1px; }
.coverage-event-lineup .ekn-pitch-jersey-wrap{ width:26px; height:26px; }
.coverage-event-lineup .ekn-pitch-jersey-wrap .ekn-jersey{ width:26px; height:26px; }
.coverage-event-lineup .ekn-pitch-badge{ width:11px; height:11px; font-size:.55rem; top:-3px; }
.coverage-event-lineup .ekn-pitch-name{
  font-size:.52rem; line-height:1.1; max-width:48px; padding:0 2px;
  overflow-wrap:break-word; word-break:break-word; overflow:hidden;
}

/* Substitutions summary list */
.coverage-subs{ margin:24px 0 34px; }
.coverage-subs-title{ font-size:1.1rem; font-weight:800; margin-bottom:12px; }
.coverage-subs-list{ display:flex; flex-direction:column; }
.coverage-subs-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.coverage-subs-row:first-child{ border-top:1px solid var(--line); }
.coverage-subs-players{ display:flex; flex-direction:column; gap:8px; }
.coverage-subs-player{ display:flex; align-items:center; gap:8px; }
.coverage-subs-arrow{
  flex:none; width:18px; height:18px; border-radius:50%; color:#fff; font-weight:900;
  font-size:.8rem; display:flex; align-items:center; justify-content:center;
}
.coverage-subs-arrow-out{ background:#dc2626; }
.coverage-subs-arrow-in{ background:#16a34a; }
.coverage-subs-tag{ font-weight:800; font-size:.88rem; color:var(--text-mute); }
.coverage-subs-name{ font-weight:700; font-size:.92rem; }
.coverage-subs-time{ flex:none; font-weight:800; font-size:.88rem; color:var(--text-mute); }

.coverage-timeline{ margin:34px 0; }
.coverage-timeline-title{ font-size:1.2rem; font-weight:800; margin-bottom:16px; }
.coverage-timeline-list{ display:flex; flex-direction:column; gap:14px; }

.coverage-event{

  border:1px solid var(--line); border-radius:14px; padding:16px;
  background:var(--bg-elev);
}
.coverage-event-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.coverage-event-time{
  font-weight:800; font-size:.82rem; color:var(--accent);
  background:rgba(29,95,224,.12); border-radius:8px; padding:3px 9px; flex:none;
}
.coverage-event-icon{ font-size:1.15rem; line-height:1; }
.coverage-event-label{ font-weight:700; font-size:.92rem; color:var(--text-mute); }

.coverage-event-text-body{ margin:0; font-size:.96rem; line-height:1.7; }

.coverage-event-player{ display:flex; align-items:center; gap:14px; }
.ekn-jersey{ width:46px; height:46px; flex:none; }
.coverage-event-player-info{ display:flex; flex-direction:column; gap:2px; }
.coverage-event-player-name{ font-weight:800; font-size:.98rem; }
.coverage-event-detail{ font-size:.85rem; color:var(--text-mute); }

.coverage-event-yellow .coverage-event-time{ color:#b45309; background:rgba(217,158,10,.14); }
.coverage-event-red .coverage-event-time{ color:#b91c1c; background:rgba(220,38,38,.14); }
.coverage-event-penalty .coverage-event-time{ color:#7c3aed; background:rgba(124,58,237,.14); }
.coverage-event-penalty_missed .coverage-event-time{ color:#991b1b; background:rgba(153,27,27,.14); }
.coverage-event-offside .coverage-event-time{ color:#0369a1; background:rgba(3,105,161,.14); }
.coverage-event-var{ background:rgba(0,0,0,.03); }
.coverage-event-var .coverage-event-text-body{ margin-top:2px; }

.coverage-event-embed .coverage-event-embed-body{
  margin-top:6px; max-width:100%; overflow:hidden;
}
.coverage-event-embed .coverage-event-embed-body iframe,
.coverage-event-embed .coverage-event-embed-body twitter-widget{
  max-width:100% !important;
}

.coverage-score{
  display:flex; align-items:center; gap:8px; font-size:1.9rem; font-weight:900;
  font-family:'Cairo', sans-serif; flex:none; padding:0 6px;
}
.coverage-score-sep{ color:var(--text-mute); font-weight:700; font-size:1.3rem; }

.coverage-sub-players{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  background:rgba(0,0,0,.03); border-radius:10px; padding:12px;
}
.coverage-sub-player{ display:flex; align-items:center; gap:10px; position:relative; }
.coverage-sub-arrow{
  position:absolute; top:-4px; inset-inline-start:30px; font-size:.9rem; font-weight:900;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
}
.coverage-sub-arrow-in{ background:#16a34a; }
.coverage-sub-arrow-out{ background:#dc2626; }
.coverage-sub-name{ font-weight:700; font-size:.9rem; }

@media (max-width:600px){
  .coverage-strip{ grid-auto-columns:minmax(220px, 78vw); }
  .coverage-sub-players{ grid-template-columns:1fr; }

  /* Tactical pitch: on narrow screens each half has less absolute height
     to work with, so names and shirt badges were overlapping the row
     above/below. Taller pitch ratio + smaller jersey/text/badge fixes it
     without touching desktop at all. */
  .coverage-pitch{ aspect-ratio:3/5; }
  .ekn-pitch-slot{ width:56px; gap:1px; }
  .ekn-pitch-jersey-wrap{ width:28px; height:28px; }
  .ekn-pitch-jersey-wrap .ekn-jersey{ width:28px; height:28px; }
  .ekn-pitch-badge{ width:12px; height:12px; font-size:.58rem; top:-3px; }
  .ekn-pitch-name{
    font-size:.56rem; line-height:1.15; max-width:56px; padding:0 2px;
    overflow-wrap:break-word; word-break:break-word; overflow:hidden;
  }
}

/* =========================================================
   14g. Telegram CTA banner
   ========================================================= */
.tg-cta-section{ padding:8px 0 34px; }
.tg-cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:30px 32px; border-radius:22px;
  background:linear-gradient(125deg, var(--accent) 0%, #2b7ce8 45%, var(--accent-2) 100%);
  box-shadow:0 14px 34px rgba(29,95,224,.28);
}
/* Soft moving sheen across the banner */
.tg-cta-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  background-size:260% 100%; animation:tgSheen 6s ease-in-out infinite;
}
@keyframes tgSheen{ 0%{ background-position:120% 0; } 60%,100%{ background-position:-40% 0; } }

/* Floating decorative bubbles */
.tg-cta-orb{
  position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.13);
}
.tg-cta-orb-1{ width:150px; height:150px; top:-52px; inset-inline-start:12%; animation:tgFloat 7s ease-in-out infinite; }
.tg-cta-orb-2{ width:92px; height:92px; bottom:-38px; inset-inline-end:16%; animation:tgFloat 9s ease-in-out infinite reverse; }
@keyframes tgFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* Icon with radar pulse */
.tg-cta-icon{
  position:relative; flex:none; width:74px; height:74px;
  display:flex; align-items:center; justify-content:center;
}
.tg-cta-pulse{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); animation:tgPulse 2.6s ease-out infinite;
}
.tg-cta-pulse-2{ animation-delay:1.3s; }
@keyframes tgPulse{
  0%{ transform:scale(.72); opacity:.9; }
  100%{ transform:scale(1.42); opacity:0; }
}
.tg-cta-plane{
  width:60px; height:60px; border-radius:50%; background:#fff; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  animation:tgBob 3.2s ease-in-out infinite;
}
.tg-cta-plane svg{ width:30px; height:30px; }
@keyframes tgBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-6px) rotate(-8deg); } }

.tg-cta-body{ flex:1 1 260px; min-width:0; color:#fff; }
.tg-cta-title{
  margin:0 0 6px; color:#fff; font-family:var(--font-display);
  font-size:1.32rem; font-weight:800; line-height:1.45;
}
.tg-cta-text{ margin:0; font-size:1rem; font-weight:600; color:rgba(255,255,255,.92); }
.tg-cta-handle{
  display:inline-block; margin-inline-start:6px; padding:3px 12px; border-radius:999px;
  background:rgba(255,255,255,.18); color:#fff; font-weight:800; direction:ltr;
  border:1px solid rgba(255,255,255,.35); transition:background .18s, transform .18s;
}
.tg-cta-handle:hover{ background:#fff; color:var(--accent); transform:translateY(-2px); }

.tg-cta-btn{
  position:relative; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border-radius:999px;
  background:#fff; color:var(--accent); font-weight:800; font-size:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  transition:transform .18s, box-shadow .18s;
  animation:tgNudge 3.6s ease-in-out infinite;
}
.tg-cta-btn svg{ width:19px; height:19px; }
.tg-cta-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 12px 26px rgba(0,0,0,.22); color:var(--accent); }
@keyframes tgNudge{ 0%,88%,100%{ transform:translateY(0); } 94%{ transform:translateY(-4px); } }
/* Shine sweep across the button */
.tg-cta-btn-shine{
  position:absolute; top:0; bottom:0; width:42px; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(29,95,224,.22), transparent);
  animation:tgShine 3.4s ease-in-out infinite;
}
@keyframes tgShine{ 0%{ inset-inline-start:-60px; } 55%,100%{ inset-inline-start:115%; } }

@media (max-width:760px){
  .tg-cta{ gap:16px; padding:26px 20px; text-align:center; justify-content:center; }
  .tg-cta-body{ flex-basis:100%; }
  .tg-cta-title{ font-size:1.12rem; }
  .tg-cta-text{ font-size:.94rem; }
  .tg-cta-btn{ width:100%; justify-content:center; }
  .tg-cta-orb-1{ width:110px; height:110px; }
  .tg-cta-orb-2{ width:70px; height:70px; }
}
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .tg-cta-glow, .tg-cta-orb, .tg-cta-pulse, .tg-cta-plane, .tg-cta-btn, .tg-cta-btn-shine{ animation:none; }
}

/* =========================================================
   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;
}