/*
 * components.css — مكوّنات GoalPress Pro الأساسية (G0).
 * توكنات فقط (لا hex). تستهلك --wp--preset--* فيتبدّل التلوين مع data-theme.
 */

/* ===== الشبكة المساعدة ===== */
.gp-grid { display: grid; gap: var(--wp--preset--spacing--40); }
.gp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 781px) {
	.gp-grid--2, .gp-grid--3, .gp-grid--4 { grid-template-columns: 1fr; }
}

/* ===== بطاقات المباريات (نتائج/قادمة/ذات صلة/آخر مباريات الفريق) =====
   مكوّن مشترك: يظهر في الرئيسية والمراكز وصفحات الكيانات (مباراة/فريق)، لذا يُعرَّف
   هنا في الورقة العامّة (تُحمَّل في كل الصفحات) لا في components-home.css المشروط. */
.gp-matches { margin-block: var(--wp--preset--spacing--30); }
.gp-match { position: relative; display: block; background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: var(--wp--preset--spacing--30); text-decoration: none; color: var(--wp--preset--color--text); transition: border-color .2s ease, transform .15s ease; }
/* Stretched link overlay: makes the whole card clickable without an <a> wrapping
   block children (which wpautop would split into a stray empty card). */
.gp-match__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.gp-match:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .gp-match { transition: none; } .gp-match:hover { transform: none; } }
.gp-match__head { display: flex; justify-content: flex-end; margin-block-end: var(--wp--preset--spacing--20); }
.gp-match__rows { display: grid; gap: 0.5rem; }
.gp-match__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; }
.gp-match__flag { width: 1.7em; height: 1.27em; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 3px; }
.gp-match__name { font-weight: 600; }
.gp-match__sc { font-weight: 900; font-variant-numeric: tabular-nums; }
.gp-match__meta { margin-block-start: var(--wp--preset--spacing--20); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-align: center; }

/* ===== الأزرار ===== */
.gp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: 0.7rem 1.4rem;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.gp-btn:hover { transform: translateY(-1px); }
.gp-btn--accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); }
.gp-btn--accent:hover { background: var(--wp--preset--color--accent-strong); }
.gp-btn--primary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.gp-btn--primary:hover { background: var(--wp--preset--color--primary-strong); }
.gp-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--border);
}
.gp-btn--outline:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
@media (prefers-reduced-motion: reduce) { .gp-btn { transition: none; } .gp-btn:hover { transform: none; } }

/* ===== البطاقات ===== */
.gp-card {
	background: var(--wp--preset--color--bg-elevated);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--scoreboard) 30%, transparent);
}
.gp-card__title { margin: 0 0 var(--wp--preset--spacing--20); color: var(--wp--preset--color--text); }
.gp-card__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ===== الشارات ===== */
.gp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
}
.gp-badge--accent { background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent); color: var(--wp--preset--color--accent); }
.gp-badge--primary { background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent); color: var(--wp--preset--color--primary); }
.gp-badge--live { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); }
.gp-badge--live::before {
	content: "";
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: currentColor;
}

/* ===== الجداول ===== */
.gp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gp-table caption { text-align: start; color: var(--wp--preset--color--muted); padding-bottom: var(--wp--preset--spacing--20); }
.gp-table th, .gp-table td {
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: start;
}
.gp-table thead th {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.gp-table tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent); }

/* ===== زر التبديل ===== */
.gp-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--bg-elevated);
	color: var(--wp--preset--color--text);
	cursor: pointer;
	font-weight: 600;
}
.gp-theme-toggle .gp-theme-toggle__moon { display: none; }
.gp-theme-toggle .gp-theme-toggle__sun { display: inline; }
html[data-theme="dark"] .gp-theme-toggle .gp-theme-toggle__sun { display: none; }
html[data-theme="dark"] .gp-theme-toggle .gp-theme-toggle__moon { display: inline; }

/* ===== معرض نظام التصميم ===== */
.gp-swatch {
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
	min-height: 4.236rem;
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--white);
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gp-swatch--bg { background: var(--wp--preset--color--bg); color: var(--wp--preset--color--text); text-shadow: none; }
.gp-swatch--surface { background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--text); text-shadow: none; }
.gp-swatch--deep { background: var(--wp--preset--color--bg-deep); }
.gp-swatch--primary { background: var(--wp--preset--color--primary); }
.gp-swatch--accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); text-shadow: none; }
.gp-swatch--scoreboard { background: var(--wp--preset--color--scoreboard); }
.gp-swatch--text { background: var(--wp--preset--color--text); color: var(--wp--preset--color--bg); text-shadow: none; }
.gp-swatch--muted { background: var(--wp--preset--color--muted); }
.gp-swatch--border { background: var(--wp--preset--color--border); color: var(--wp--preset--color--text); text-shadow: none; }

/* ===== G5 — options-driven chrome ===== */
/* الترويسة الملتصقة (تفعَّل من لوحة الخيارات → الترويسة) */
body.gp-sticky-header header.wp-block-template-part,
body.gp-sticky-header .wp-site-blocks > header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: var(--wp--preset--color--bg);
}

/* شريط حقوق التذييل (من لوحة الخيارات → التذييل) */
.gp-footer-credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--wp--preset--color--bg-deep);
	color: var(--wp--preset--color--muted);
	border-block-start: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}
.gp-footer-credit__social { display: inline-flex; gap: 0.75rem; }
.gp-footer-credit__lnk { color: var(--wp--preset--color--muted); text-decoration: none; }
.gp-footer-credit__lnk:hover { color: var(--wp--preset--color--accent); }

/* ===== G10 — breadcrumbs ===== */
.gp-breadcrumbs { margin-block: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.gp-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.gp-crumb { color: var(--wp--preset--color--muted); }
.gp-crumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.gp-crumb a:hover { color: var(--wp--preset--color--accent); }
.gp-crumb:not(:last-child)::after { content: "\2039"; margin-inline-start: 0.4rem; color: var(--wp--preset--color--border); }
.gp-crumb--current { color: var(--wp--preset--color--text); font-weight: 700; }

/* ===== G11 — premium 5-column footer (global) ===== */
.gp-pfooter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.2fr; gap: var(--wp--preset--spacing--40); inline-size: 100%; text-align: start; }
.gp-pfooter__col { min-inline-size: 0; }
.gp-pfooter__h { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--text); margin: 0 0 0.8rem; }
.gp-pfooter__brand { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--accent); }
.gp-pfooter__about { color: var(--wp--preset--color--text); opacity: 0.8; font-size: var(--wp--preset--font-size--small); margin-block-start: 0.5rem; }
.gp-pfooter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.gp-pfooter__list a { color: var(--wp--preset--color--text); opacity: 0.85; text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.gp-pfooter__list a:hover { color: var(--wp--preset--color--accent); opacity: 1; }
.gp-pfooter__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 0.8rem; }
.gp-pfooter__social a { padding: 0.4rem 0.8rem; border-radius: 99px; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.gp-pfooter__social a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.gp-pfooter .gp-wnl { display: flex; flex-direction: column; gap: 0.5rem; }
.gp-pfooter .gp-wnl__input { padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg-deep); color: var(--wp--preset--color--text); }
.gp-pfooter .gp-wnl__btn { padding: 0.55rem 1rem; border: none; border-radius: 10px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); font-weight: 800; cursor: pointer; }
.gp-pfooter-bar { grid-column: 1 / -1; margin-block-start: var(--wp--preset--spacing--40); padding-block-start: 1rem; border-block-start: 1px solid var(--wp--preset--color--border); text-align: center; color: var(--wp--preset--color--text); opacity: 0.7; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1024px) { .gp-pfooter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gp-pfooter { grid-template-columns: 1fr; } }

/* Footer social icons + app-store badges (footer pattern). Class-based — the
   pattern no longer carries repeated inline styles, and links render only when
   the owner sets their URL in settings. */
.gp-footer-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 1.5rem; }
.gp-footer-social a { inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--wp--preset--color--border); display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--text); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.gp-footer-social a:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); }
.gp-appbtns { display: flex; flex-direction: column; gap: 0.5rem; }
.gp-appbtn { background: var(--wp--preset--color--border); padding: 0.55rem 1rem; border-radius: 8px; text-align: center; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--text); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.gp-appbtn:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); }

/* Newsletter banner (dashboard) — token-only, replaces the old inline-style +
   raw-hex version. White text reads on the primary-green surface. */
.gp-nlbanner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--wp--preset--color--primary); border-radius: 12px; color: var(--wp--preset--color--white); }
.gp-nlbanner__title { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--2xl); color: var(--wp--preset--color--white); }
.gp-nlbanner__desc { margin: 0; opacity: 0.92; }
.gp-nlbanner__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gp-nlbanner__input { padding: 0.8rem 1rem; border-radius: 8px; border: none; min-inline-size: 240px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--scoreboard); }
.gp-nlbanner__btn { padding: 0.8rem 1.4rem; border: none; border-radius: 8px; background: var(--wp--preset--color--scoreboard); color: var(--wp--preset--color--white); font-weight: 800; cursor: pointer; }
.gp-nlbanner__btn:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--scoreboard); }

/* RTL hardening: isolate combined "home – away" score blocks from surrounding bidi
   and keep figures tabular so a digit never reorders unexpectedly (2–1 ≠ 1–2). */
.gp-lc-card__score, .gp-hero__score, [data-score] { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ===== جدول الترتيب المصغّر (.gp-mst) — مكوّن مشترك =====
   يظهر في الرئيسية/المراكز (dashboard) وفي صفحات الكيانات (entity)، فيُعرَّف هنا
   مرّةً واحدة في الورقة العامّة بدل تكراره في dashboard.css + entity.css. */
.gp-mst { inline-size: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.gp-mst th, .gp-mst td { padding: 0.55rem 0.6rem; text-align: center; border-block-end: 1px solid var(--wp--preset--color--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-mst thead th { color: var(--wp--preset--color--muted); font-weight: 700; font-size: var(--wp--preset--font-size--xs); background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent); border-block-end: 2px solid var(--wp--preset--color--border); }
.gp-mst tbody tr:last-child th, .gp-mst tbody tr:last-child td { border-block-end: 0; }
.gp-mst tbody tr { transition: background-color .12s ease; }
.gp-mst tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent); }
@media (prefers-reduced-motion: reduce) { .gp-mst tbody tr { transition: none; } }
.gp-mst__t { text-align: start; white-space: normal; font-weight: 700; }
.gp-mst__rank { color: var(--wp--preset--color--muted); }
.gp-mst__p { font-weight: 800; color: var(--wp--preset--color--accent); }
/* الحاوية بطاقة موحّدة (نفس لغة بطاقات الموقع) — تُوحّد مظهر الجداول في الرئيسية
   والمراكز وصفحات الكيانات، والتمرير الأفقي يبقى داخلها. */
.gp-mst-scroll { overflow-x: auto; overflow-y: hidden; background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; }
.gp-mst-scroll:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 12px; }
/* داخل حاويةٍ هي بطاقة أصلًا (كتلة البطولة .gp-comp أو .gp-card): يتسطّح غلاف
   الجدول — لا بطاقة داخل بطاقة. */
.gp-comp .gp-mst-scroll, .gp-card .gp-mst-scroll { background: transparent; border: 0; border-radius: 0; }
.gp-mst abbr[title] { text-decoration: none; cursor: help; }
.gp-mst__gd { color: var(--wp--preset--color--muted); }
/* Qualification zones: color + a text legend below (never color alone). */
.gp-mst__r--cont .gp-mst__rank { color: var(--wp--preset--color--primary); font-weight: 800; box-shadow: inset 0.2rem 0 0 var(--wp--preset--color--primary); }
.gp-mst__r--rel .gp-mst__rank { color: var(--wp--preset--color--danger); font-weight: 800; box-shadow: inset 0.2rem 0 0 var(--wp--preset--color--danger); }
.gp-mst__legend { display: flex; gap: 1rem; margin-block-start: 0.5rem; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.gp-mst__lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.gp-mst__lg::before { content: ""; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 2px; }
.gp-mst__lg--cont::before { background: var(--wp--preset--color--primary); }
.gp-mst__lg--rel::before { background: var(--wp--preset--color--danger); }
.gp-mst .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gp-mst__grp { font-weight: 800; color: var(--wp--preset--color--muted); margin: 0.6rem 0 0.3rem; }

/* ===== شارات الفورم آخر 5 مباريات (.gp-form) — مشترك (حرف + لون وظيفيّ) ===== */
.gp-form { display: inline-flex; gap: 2px; }
.gp-form__p { inline-size: 1.05rem; block-size: 1.05rem; border-radius: 3px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: var(--wp--preset--color--scoreboard); }
.gp-form__p--w { background: var(--wp--preset--color--success); }
.gp-form__p--d { background: var(--wp--preset--color--muted); }
.gp-form__p--l { background: var(--wp--preset--color--danger); }

/* ===== النشرة البريديّة (.gp-wnl) — قاعدة مشتركة (block + widget) =====
   تجاوز التذييل الخاصّ يبقى مُعرَّفاً أعلاه تحت .gp-pfooter. ===== */
.gp-wnl { display: flex; flex-direction: column; gap: 0.5rem; }
.gp-wnl__desc { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.gp-wnl__input { padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg-deep); color: var(--wp--preset--color--text); }
.gp-wnl__btn { padding: 0.6rem 1rem; border: none; border-radius: 10px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--bg-deep); font-weight: 800; cursor: pointer; }

/* ── Contact form ([goalpress_contact]) ─────────────────────────────── */
.gp-contact { max-width: 640px; }
.gp-contact__title { font-size: 1.4rem; font-weight: 800; margin: 0 0 1rem; }
.gp-contact__form { display: flex; flex-direction: column; gap: 1rem; }
.gp-contact__row { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.gp-contact__label { font-size: .9rem; font-weight: 700; color: var(--wp--preset--color--text); }
.gp-contact__input {
	width: 100%; padding: .7rem .9rem; font: inherit;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg-elevated, var(--wp--preset--color--bg));
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease;
}
.gp-contact__input:focus {
	outline: none; border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}
.gp-contact__textarea { resize: vertical; min-height: 140px; }
.gp-contact__actions { margin: 0; }
.gp-contact__btn {
	appearance: none; cursor: pointer; font: inherit; font-weight: 800;
	padding: .75rem 2rem; border: none; border-radius: 10px;
	color: var(--wp--preset--color--bg);
	background: var(--wp--preset--color--primary);
	transition: filter .15s ease, transform .05s ease;
}
.gp-contact__btn:hover { filter: brightness(1.08); }
.gp-contact__btn:active { transform: translateY(1px); }
.gp-contact__notice { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; }
.gp-contact__notice--ok  { background: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent); color: var(--wp--preset--color--primary); }
.gp-contact__notice--err { background: color-mix(in srgb, #d33 15%, transparent); color: #d33; }