/* الفرص التطوعية — واجهة الزائر. كل نمط تحت .svol، والألوان من القالب إن وُجدت */
.svol {
	--v-ink: var(--wp--preset--color--contrast, #12161c);
	--v-muted: var(--wp--preset--color--muted, #5b6472);
	--v-line: var(--wp--preset--color--border, #e2e6ec);
	--v-soft: var(--wp--preset--color--surface, #f3f5f8);
	--v-pri: var(--wp--preset--color--primary, #0b7d5a);
	--v-sec: var(--wp--preset--color--secondary, #134e8f);
	--v-acc: var(--wp--preset--color--accent, #d97706);
	--v-tile: color-mix(in srgb, var(--v-sec) 7%, #fff);
	--v-r: 14px;
	color: var(--v-ink);
	/* إطار الموقع نفسه: عرض القالب الواسع وحاشيته */
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px) !important;
	margin-inline: auto !important;
	padding: 18px 22px 40px;
	box-sizing: border-box;
	line-height: 1.7;
}
.svol *, .svol *::before, .svol *::after { box-sizing: border-box; }
.svol a { color: var(--v-sec); }
.svol h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.3; margin: 0 0 8px; }
.svol h2 { font-size: 1.3rem; margin: 0 0 14px; line-height: 1.4; }
.svol h3 { font-size: 1.05rem; margin: 0 0 6px; line-height: 1.5; }
.svol p { margin: 0 0 10px; }
.svol .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.svol-crumbs { font-size: .85rem; color: var(--v-muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.svol-crumbs a { color: var(--v-muted); text-decoration: none; }
.svol-crumbs a:hover { color: var(--v-sec); text-decoration: underline; }

.svol-hero { margin-bottom: 18px; }
.svol-lead { color: var(--v-muted); font-size: 1.02rem; }
.svol-intro { color: var(--v-muted); margin-top: 12px; }
.svol-pill { display: inline-block; background: var(--v-soft); border: 1px solid var(--v-line); color: var(--v-muted); border-radius: 999px; padding: 2px 12px; font-size: .82rem; white-space: nowrap; }

.svol-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; max-width: 640px; }
.svol-stats > div { background: var(--v-tile); border-radius: var(--v-r); padding: 14px 16px; }
.svol-stats b { display: block; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: var(--v-sec); font-variant-numeric: tabular-nums; line-height: 1.3; }
.svol-stats span { color: var(--v-muted); font-size: .88rem; }

.svol-goals { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.svol-chip { border: 1px solid var(--v-line); background: #fff; color: var(--v-ink) !important; border-radius: 999px; padding: 8px 16px; text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .15s, color .15s, border-color .15s; }
.svol-chip:hover { border-color: var(--v-sec); }
.svol-chip.on { background: var(--v-sec); border-color: var(--v-sec); color: #fff !important; }

.svol-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.svol-filters select, .svol-planform select, .svol-planform input {
	font: inherit; color: var(--v-ink); background: #fff; border: 1px solid var(--v-line); border-radius: 10px; padding: 9px 12px; min-height: 44px; max-width: 100%;
}
.svol-filters label { flex: 0 1 auto; }
.js .svol-filters [type=submit], .svol.js .svol-filters [type=submit] { display: none; }

.svol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--v-sec); color: #fff !important; border: 1px solid var(--v-sec); border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 44px; transition: filter .15s, background .15s; }
.svol-btn:hover { filter: brightness(1.1); }
.svol-btn.sm { padding: 8px 14px; }
.svol-btn.ghost { background: #fff; color: var(--v-sec) !important; }
.svol-btn.ghost:hover { background: var(--v-tile); filter: none; }
.svol-btn.wide { width: 100%; }
.svol-btn.saved { background: var(--v-tile); border-color: var(--v-tile); color: var(--v-pri) !important; }

.svol-sec { margin: 26px 0; }
.svol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.svol-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svol-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.svol-row > * { scroll-snap-align: start; }

.svol-card { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r); padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .2s, transform .2s; }
.svol-card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .08); transform: translateY(-2px); }
.svol-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.svol-where { color: var(--v-muted); font-size: .85rem; }
.svol-card h3 a { color: var(--v-ink); text-decoration: none; }
.svol-card h3 a:hover { color: var(--v-sec); }
.svol-card h3 a::after { content: ""; position: absolute; inset: 0; }
.svol-card { position: relative; }
.svol-org { color: var(--v-muted); font-size: .85rem; margin: 0 !important; }

.svol-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.svol-tiles > div { background: var(--v-soft); border-radius: 10px; padding: 8px 6px; text-align: center; }
.svol-tiles b { display: block; font-size: 1.25rem; color: var(--v-sec); line-height: 1.3; font-variant-numeric: tabular-nums; }
.svol-tiles b.sm { font-size: .82rem; color: var(--v-ink); line-height: 1.5; padding-top: 3px; }
.svol-tiles span { font-size: .75rem; color: var(--v-muted); }

.svol-meter span { font-size: .82rem; color: var(--v-ink); }
.svol-meter i { display: block; height: 6px; background: var(--v-line); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.svol-meter em { display: block; height: 100%; background: var(--v-pri); border-radius: 99px; }
.svol-meter.low em { background: var(--v-acc); }

.svol-badge { display: inline-block; background: var(--v-soft); color: var(--v-muted); border-radius: 999px; padding: 2px 11px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.svol-badge.hot { background: color-mix(in srgb, var(--v-acc) 14%, #fff); color: color-mix(in srgb, var(--v-acc) 80%, #000); }
.svol-badge.soon { background: color-mix(in srgb, var(--v-sec) 10%, #fff); color: var(--v-sec); }
.svol-badge.done { background: color-mix(in srgb, #b42318 10%, #fff); color: #b42318; }

.svol-browse .svol-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.svol-links { display: flex; flex-wrap: wrap; gap: 8px; }
.svol-links a { background: var(--v-soft); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--v-ink); font-size: .9rem; }
.svol-links a:hover { background: var(--v-tile); color: var(--v-sec); }
.svol-links small { color: var(--v-muted); font-variant-numeric: tabular-nums; }

.svol-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svol-tool { display: block; background: var(--v-tile); border-radius: var(--v-r); padding: 18px 20px; text-decoration: none; color: var(--v-ink) !important; transition: background .15s; }
.svol-tool:hover { background: color-mix(in srgb, var(--v-sec) 12%, #fff); }
.svol-tool b { display: block; font-size: 1.1rem; color: var(--v-sec); margin-bottom: 4px; }
.svol-tool span { color: var(--v-muted); font-size: .92rem; }

.svol-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; color: var(--v-muted); }
.svol-empty { background: var(--v-soft); border-radius: var(--v-r); padding: 28px; text-align: center; }

.svol-note { margin-top: 30px !important; background: var(--v-soft); border-radius: 12px; padding: 12px 16px; color: var(--v-muted); font-size: .88rem; }

/* صفحة الفرصة */
.svol-opp { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.svol-opp-main section { margin: 22px 0; }
.svol-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.svol-desc { font-size: 1.02rem; }
.svol-checks { list-style: none; margin: 0; padding: 0; }
.svol-checks li { position: relative; padding-inline-start: 26px; margin-bottom: 6px; }
.svol-checks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--v-pri); font-weight: 700; }
.svol-shifts { display: grid; gap: 10px; }
.svol-shift { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: .88rem; }
.svol-shift .bar { position: relative; display: block; height: 22px; background: var(--v-soft); border-radius: 8px; }
.svol-shift .bar em { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--v-sec) 65%, #fff); border-radius: 8px; }
.svol-shift .tm, .svol-shift .n { color: var(--v-muted); white-space: nowrap; }
.svol-hint { color: var(--v-muted); font-size: .82rem; }
.svol-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 22px 0; }
.svol-boxes > div { background: var(--v-soft); border-radius: var(--v-r); padding: 14px 16px; }
.svol-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.svol-steps li { counter-increment: s; position: relative; padding-inline-start: 40px; margin-bottom: 10px; min-height: 28px; }
.svol-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--v-sec); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.svol-side { background: var(--v-tile); border-radius: 18px; padding: 18px; position: sticky; top: 90px; display: grid; gap: 12px; }
.svol-side .svol-tiles > div { background: #fff; }
.svol-when { font-weight: 600; margin: 0 !important; }
/* رادار المقاعد */
.svol-fast { font-weight: 700; color: color-mix(in srgb, var(--v-acc) 72%, var(--v-ink)); }
.svol-radar { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; font-weight: 600; color: color-mix(in srgb, var(--v-acc) 80%, var(--v-ink)); background: color-mix(in srgb, var(--v-acc) 9%, #fff); border-radius: 10px; padding: 8px 12px; margin: 0 !important; cursor: help; }
.svol-radar span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-acc); position: relative; top: -1px; animation: svol-ping 2s ease-out infinite; }
@keyframes svol-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v-acc) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.svol-closed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, #b42318 6%, #fff); border-radius: var(--v-r); padding: 14px 18px; margin-bottom: 18px; }
.svol-closed p { margin: 0; font-weight: 600; }
.svol-closed + .svol-grid { margin-bottom: 26px; }
.svol-opp.is-closed { opacity: .72; }

/* مخطط ساعاتي */
.svol-plan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.svol-planform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 24px; }
.svol-planform label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.svol-planform .svol-btn { grid-column: 1 / -1; justify-self: start; }
.svol-basket { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.svol-basket a { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--v-soft); border-radius: 12px; padding: 12px 16px; text-decoration: none; color: var(--v-ink); }
.svol-basket a:hover { background: var(--v-tile); }
.svol-basket b { display: block; font-weight: 600; }
.svol-basket small { color: var(--v-muted); }
.svol-basket em { font-style: normal; font-weight: 700; color: var(--v-sec); white-space: nowrap; }
.svol-ring-box { justify-items: center; text-align: center; position: sticky; }
.svol-ring { width: 190px; height: 190px; transform: rotate(-90deg); }
.svol-ring circle { fill: none; stroke-width: 11; }
.svol-ring .bg { stroke: #fff; }
.svol-ring .fg { stroke: var(--v-pri); stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.svol-ring-n { margin-top: -132px; margin-bottom: 52px; }
.svol-ring-n b { display: block; font-size: 2.2rem; line-height: 1.1; }
.svol-ring-n span { color: var(--v-muted); font-size: .88rem; }

/* لماذا تتطوع */
.svol-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svol-why article { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.svol-why h2 { margin: 8px 0 4px; }
.svol-why .svol-badge { align-self: flex-start; }
.svol-planform input[name=need] { text-align: right; font-variant-numeric: tabular-nums; }
.svol-why .svol-btn { margin-top: auto; align-self: flex-start; }
.svol-src { color: var(--v-muted); font-size: .85rem; }
.svol-cta { background: var(--v-tile); border-radius: 18px; padding: 24px; text-align: center; }

@media (max-width: 900px) {
	.svol-opp, .svol-plan { grid-template-columns: minmax(0, 1fr); }
	.svol-side { position: static; }
	.svol-why, .svol-tools, .svol-browse .svol-cols { grid-template-columns: minmax(0, 1fr); }
	.svol-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.svol-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.svol-stats > div { padding: 10px; }
	.svol-stats span { font-size: .76rem; }
	.svol-filters label { flex: 1 1 140px; }
	.svol-filters select { width: 100%; }
	.svol-planform { grid-template-columns: minmax(0, 1fr); }
	.svol-shift { grid-template-columns: minmax(0, 1fr) auto; }
	.svol-shift .bar { grid-column: 1 / -1; grid-row: 2; }
	.svol-shift .n { display: none; }
	.svol-grid, .svol-grid.g3 { grid-template-columns: minmax(0, 1fr); }
	.svol { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.svol-card, .svol-ring .fg { transition: none; }
	.svol-radar span { animation: none; }
	.svol-card:hover { transform: none; }
}