/* BonMaroc front — Red #C1272D · Green #0B6B3A · Gold #E3A72F · Ink #17140F · Sand #F7F2E8 · Readex Pro */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;600;700&display=swap');

.bm {
	--bm-red: #C1272D; --bm-green: #0B6B3A; --bm-gold: #E3A72F; --bm-ink: #17140F; --bm-sand: #F7F2E8;
	--bm-line: rgba(23, 20, 15, .12); --bm-muted: rgba(23, 20, 15, .62);
	font-family: 'Readex Pro', system-ui, sans-serif; color: var(--bm-ink);
	background: #fff; border: 1px solid var(--bm-line); border-radius: 16px; padding: 18px; margin: 0 0 20px;
}
.bm *, .bm *::before, .bm *::after { box-sizing: border-box; }
.bm-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; border-bottom: 3px solid var(--bm-red); padding-bottom: 10px; margin-bottom: 14px; }
.bm-h h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.bm-h-ar { font-size: 1.1rem; font-weight: 600; color: var(--bm-green); }
.bm-sub { margin: 18px 0 8px; font-size: 1.05rem; font-weight: 600; }
.bm-sub span { color: var(--bm-green); }
[dir="rtl"] { unicode-bidi: isolate; }

.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bm-city { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bm-sand); color: var(--bm-ink); text-decoration: none; border: 1px solid transparent; }
.bm-city.is-live { border-color: var(--bm-green); }
.bm-city em { font-style: normal; font-size: .75rem; color: var(--bm-muted); }
.bm-city:hover { border-color: var(--bm-red); }

.bm-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bm-tile { background: var(--bm-sand); border-radius: 12px; padding: 14px; }
.bm-tile h4 { margin: 0 0 8px; font-size: 1rem; }
.bm-tile h4 span { color: var(--bm-green); font-weight: 600; }
.bm-big { font-size: 2.2rem; font-weight: 700; color: var(--bm-red); margin: 0; line-height: 1; }

.bm-salat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bm-salat li { background: #fff; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; }
.bm-salat strong { font-size: 1.1rem; }

.bm-list { display: grid; gap: 10px; }
.bm-card { border: 1px solid var(--bm-line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.bm-card-t { font-size: 1.02rem; margin-bottom: 4px; }
.bm-card-t span { color: var(--bm-green); }
.bm-addr, .bm-when, .bm-dist { margin: 2px 0; color: var(--bm-muted); font-size: .92rem; }
.bm-when { color: var(--bm-ink); font-weight: 600; }
.bm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.bm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--bm-red); color: #fff !important; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; font-size: .95rem; }
.bm-btn.bm-map { background: var(--bm-green); }
.bm-btn:focus-visible { outline: 3px solid var(--bm-gold); outline-offset: 2px; }
.bm-src { display: block; color: var(--bm-muted); font-size: .78rem; margin-top: 6px; }
.bm-src a { color: inherit; }
.bm-pending { background: #FFF6E0; border-left: 4px solid var(--bm-gold); padding: 10px 12px; border-radius: 8px; margin: 0; }

.bm-table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.bm-table th, .bm-table td { padding: 8px; border-bottom: 1px solid var(--bm-line); text-align: start; white-space: nowrap; }
.bm-table th { background: var(--bm-sand); font-weight: 600; }

.bm-darija { background: var(--bm-sand); border-right: 4px solid var(--bm-green); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.bm-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.bm-facts dt { font-weight: 600; }
.bm-facts dd { margin: 0; }
.bm-steps li, .bm-check li { margin-bottom: 8px; }
.bm-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bm-links a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bm-sand); border-radius: 10px; color: var(--bm-ink); text-decoration: none; }

.bm-report { display: grid; gap: 10px; }
.bm-report label { display: grid; gap: 4px; font-weight: 600; }
.bm-report input, .bm-report select, .bm-report textarea { font: inherit; padding: 10px; border: 1px solid var(--bm-line); border-radius: 10px; width: 100%; }
.bm-hp { position: absolute !important; left: -9999px !important; }
.bm-msg { margin: 0; font-weight: 600; color: var(--bm-green); }

@media (max-width: 480px) {
	.bm { padding: 14px; border-radius: 12px; }
	.bm-salat { grid-template-columns: repeat(2, 1fr); }
}

/* Football */
.bm-match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0; }
.bm-team { font-weight: 600; }
.bm-team-away { text-align: end; }
.bm-score { background: var(--bm-ink); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 1.1rem; }
.bm-vs { background: var(--bm-sand); border-radius: 8px; padding: 4px 10px; font-weight: 600; }
.bm-news-ar { color: var(--bm-green); margin: 2px 0 6px; }

/* v0.3.0 — bilingual FR / AR (Darija) */
.bm-is-ar, .bm-is-ar * { font-family: 'Readex Pro', system-ui, sans-serif; }
.bm-is-ar { text-align: right; }
.bm-alt { font-size: .82em; font-weight: 400; color: var(--bm-muted, rgba(23,20,15,.62)); }
.bm-ar2 { color: var(--bm-green, #0B6B3A); font-weight: 600; }
.bm-city .bm-alt, .bm-city .bm-ar2 { font-size: .85rem; }
.bm-is-ar .bm-darija { border-right: 0; border-left: 4px solid var(--bm-green); }
.bm-is-ar .bm-pending { border-left: 0; border-right: 4px solid var(--bm-gold); }
.bm-cat { border: 1px solid var(--bm-line); border-radius: 12px; margin: 0 0 10px; background: #fff; }
.bm-cat > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.bm-cat > summary::-webkit-details-marker { display: none; }
.bm-cat[open] > summary { border-bottom: 1px solid var(--bm-line); }
.bm-cat > .bm-list, .bm-cat > .bm-addr { padding: 10px 14px; }
.bm-count { background: var(--bm-sand); border-radius: 999px; padding: 0 10px; font-size: .85rem; color: var(--bm-red); }
.bm-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-picker select { flex: 1 1 220px; min-height: 48px; border-radius: 12px; border: 2px solid var(--bm-green); padding: 0 12px; font: inherit; font-size: 1rem; background: #fff; }
.bm-switch { text-align: center; margin: 10px 0 24px; }
.bm-switch a { color: var(--bm-green); font-weight: 600; }
.bm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bm-stats div { background: var(--bm-sand); border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.bm-stats strong { font-size: 1.5rem; color: var(--bm-red); }