/*
Theme Name: BrokerSouq
Theme URI: https://brokersouq.com
Description: Bilingual (English / Arabic) catalog of forex brokers by country: country hubs, criterion lists shown as broker cards, side-by-side comparisons. No ratings or rankings.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: brokersouq
*/

:root {
	--ink: #131a24;
	--ink-2: #1d2733;
	--paper: #f2f1ec;
	--card: #ffffff;
	--line: #dedcd3;
	--line-2: #ebe9e2;
	--text: #1d232b;
	--muted: #5f6670;
	--copper: #e8590c;
	--copper-d: #b8440a;
	--copper-bg: #fdf0e7;
	--t1: #0b6e5f;
	--t1-bg: #e3f3ef;
	--mix: #8a5a00;
	--mix-bg: #fbf1dc;
	--off: #55606e;
	--off-bg: #eceef1;
	--diff: #fff6db;
	--radius: 10px;
	--wrap: 1220px;
	--font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
	html:focus-within { scroll-behavior: smooth; }
}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	overflow-wrap: anywhere;
}

a { color: var(--copper-d); text-underline-offset: 2px; }
a:hover { color: var(--copper); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.bs-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.bs-skip {
	position: absolute;
	inset-inline-start: 12px;
	top: -60px;
	background: var(--copper);
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	z-index: 100;
}
.bs-skip:focus { top: 10px; color: #fff; }

/* Header ---------------------------------------------------------------- */

.bs-top {
	background: var(--ink);
	color: #f4f2ec;
	border-bottom: 3px solid var(--copper);
}
.bs-top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
}
.bs-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #f4f2ec;
	text-decoration: none;
	min-width: 0;
}
.bs-logo:hover { color: #fff; }
.bs-mark { width: 34px; height: 34px; flex: none; color: #f4f2ec; }
.bs-logo-img { max-height: 40px; width: auto; }
.bs-word { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; direction: ltr; unicode-bidi: isolate; }
.bs-word b { color: #ff8a3d; font-weight: 700; }
.bs-tag {
	font-size: 0.78rem;
	color: #aab3bf;
	border-inline-start: 1px solid #3a4553;
	padding-inline-start: 10px;
	white-space: nowrap;
}
.bs-langswitch {
	flex: none;
	color: #f4f2ec;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid #47525f;
	border-radius: 999px;
	padding: 5px 14px;
}
.bs-langswitch:hover { border-color: var(--copper); color: #fff; }

.bs-countries { background: var(--ink-2); }
.bs-countries ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.bs-countries ul::-webkit-scrollbar { display: none; }
.bs-countries a {
	display: block;
	padding: 11px 14px;
	color: #c7ced8;
	text-decoration: none;
	font-size: 0.92rem;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
}
.bs-countries a:hover { color: #fff; }
.bs-countries a.is-on { color: #fff; border-bottom-color: var(--copper); font-weight: 500; }

/* Page frame ------------------------------------------------------------ */

.bs-main { min-height: 60vh; }
.bs-page { padding-block: 22px 48px; }
html.bs-loading .bs-page { opacity: 0.55; transition: opacity 0.15s; }

.bs-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 0.84rem;
	color: var(--muted);
}
.bs-crumbs li + li::before { content: "/"; margin-inline-end: 4px; color: #b3b0a5; }
.bs-crumbs a { color: var(--muted); text-decoration: none; }
.bs-crumbs a:hover { color: var(--copper-d); text-decoration: underline; }

.bs-title {
	margin: 0 0 12px;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	max-width: 900px;
}
.bs-lang-ar .bs-title { letter-spacing: 0; }

.bs-notice {
	margin: 0 0 22px;
	padding: 10px 14px;
	background: var(--copper-bg);
	border-inline-start: 4px solid var(--copper);
	border-radius: 0 6px 6px 0;
	font-size: 0.9rem;
	color: #5a3a24;
	max-width: 900px;
}
.bs-lang-ar .bs-notice { border-radius: 6px 0 0 6px; }

.bs-content > * { max-width: 860px; }
.bs-content > .bs-catalog,
.bs-content > .bs-vs,
.bs-content > .wp-block-table { max-width: none; }
.bs-content h2 {
	font-size: 1.28rem;
	font-weight: 600;
	margin: 34px 0 12px;
	line-height: 1.35;
}
.bs-content h3 { font-size: 1.08rem; font-weight: 600; margin: 24px 0 8px; }
.bs-content p,
.bs-content ul,
.bs-content ol { margin: 0 0 14px; }
.bs-content ul,
.bs-content ol { padding-inline-start: 22px; }
.bs-content li { margin-bottom: 6px; }

.bs-lead { font-size: 1.04rem; color: #333a43; }
.bs-content p.bs-disclaimer {
	font-size: 0.86rem;
	color: var(--muted);
	border-top: 1px solid var(--line);
	padding-top: 14px;
	margin-top: 30px;
}
.bs-content p.bs-sources { font-size: 0.82rem; color: var(--muted); }
.bs-content p.bs-back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--line);
	background: var(--card);
	padding: 7px 14px;
	border-radius: 999px;
	color: var(--text);
}
.bs-content p.bs-back a::before { content: "←"; color: var(--copper); }
.bs-lang-ar .bs-content p.bs-back a::before { content: "→"; }
.bs-content p.bs-back a:hover { border-color: var(--copper); }

/* Hub link lists */
.bs-content ul.bs-links {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	max-width: none;
}
.bs-content ul.bs-links-lists { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bs-content ul.bs-links-vs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.bs-content ul.bs-links li {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.92rem;
	color: var(--muted);
}
.bs-content ul.bs-links a { color: var(--text); text-decoration: none; font-weight: 500; }
.bs-content ul.bs-links li:hover { border-color: var(--copper); }
.bs-content ul.bs-links a:hover { color: var(--copper-d); }
.bs-content ul.bs-where { list-style: none; padding: 0; }
.bs-content ul.bs-where a::after { content: " ↗"; font-size: 0.85em; }

/* Filter chips ---------------------------------------------------------- */

.bs-catalog { margin: 8px 0 26px; }
.bs-chips {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	scroll-margin-top: 12px;
}
.bs-chips-lbl { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.bs-chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.bs-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--text);
	text-decoration: none;
	font-size: 0.86rem;
	white-space: nowrap;
	line-height: 1.4;
}
.bs-chip:hover { border-color: var(--ink); color: var(--ink); }
.bs-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-chip-n {
	font-size: 0.74rem;
	background: var(--line-2);
	color: var(--muted);
	border-radius: 999px;
	padding: 0 7px;
}
.bs-chip.is-on .bs-chip-n { background: var(--copper); color: #fff; }

.bs-count { font-size: 0.86rem; color: var(--muted); margin: 0 0 12px; }
.bs-count strong { color: var(--text); font-weight: 600; }

/* Broker cards ---------------------------------------------------------- */

.bk-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.bk {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.88rem;
	min-width: 0;
}
.bk:hover { border-color: #c9c5b8; box-shadow: 0 2px 10px rgba(19, 26, 36, 0.06); }
.bk-top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-2);
}
.bk-av {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	color: hsl(var(--h) 45% 26%);
	background: hsl(var(--h) 40% 90%);
	border: 1px solid hsl(var(--h) 30% 80%);
	direction: ltr;
}
.bk-id { min-width: 0; }
.bk-name {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	direction: ltr;
	unicode-bidi: isolate;
}
.bs-lang-ar .bk-name { text-align: right; }
.bk-type { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.bk-tier {
	font-size: 0.72rem;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 6px;
	max-width: 120px;
	text-align: center;
	line-height: 1.3;
}
.bk[data-tier="t1"] .bk-tier { background: var(--t1-bg); color: var(--t1); }
.bk[data-tier="mix"] .bk-tier { background: var(--mix-bg); color: var(--mix); }
.bk[data-tier="off"] .bk-tier { background: var(--off-bg); color: var(--off); }

.bk-lbl {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin-bottom: 2px;
}
.bs-lang-ar .bk-lbl { text-transform: none; letter-spacing: 0; font-size: 0.76rem; }
.bk-reg { margin: 0; line-height: 1.45; }
.bk-facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
}
.bk-fact { min-width: 0; }
.bk-fact dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bs-lang-ar .bk-fact dt { text-transform: none; letter-spacing: 0; font-size: 0.76rem; }
.bk-fact dd { margin: 0; font-weight: 500; line-height: 1.4; }
.bk-lic { grid-column: 1 / -1; }
.bk-lic dd { color: var(--off); font-weight: 400; }
.bk-lic.is-yes dd { color: var(--t1); font-weight: 600; }
.bk-lic.is-yes dd::before { content: "● "; }
.bk-check {
	margin: 0;
	background: #f7f6f1;
	border-radius: 7px;
	padding: 8px 10px;
	line-height: 1.45;
}
.bk-vs { margin: auto 0 0; font-size: 0.82rem; line-height: 1.7; }
.bk-vs a { white-space: nowrap; }

/* Comparison ------------------------------------------------------------ */

.bs-vs {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 6px 0 8px;
}
.vs-head,
.vs-row {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}
.vs-head { background: var(--ink); color: #fff; }
.vs-b {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	font-size: 1.06rem;
	direction: ltr;
}
.bs-lang-ar .vs-b { direction: rtl; }
.vs-b strong { font-weight: 600; unicode-bidi: isolate; }
.vs-head .bk-av { border-color: transparent; }
.vs-row { border-top: 1px solid var(--line-2); font-size: 0.9rem; }
.vs-row > div { padding: 10px 14px; min-width: 0; }
.vs-l { color: var(--muted); font-weight: 500; background: #faf9f6; }
.vs-row .vs-v + .vs-v { border-inline-start: 1px solid var(--line-2); }
.vs-row.is-diff .vs-v { background: var(--diff); }
.vs-row.is-diff .vs-l { box-shadow: inset 3px 0 0 var(--copper); }
.bs-lang-ar .vs-row.is-diff .vs-l { box-shadow: inset -3px 0 0 var(--copper); }
.vs-who { display: none; }
.vs-legend { font-size: 0.8rem; color: var(--muted); margin: 0 0 18px; }
.vs-legend::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--diff);
	border: 1px solid #ecd9a0;
	border-radius: 3px;
	vertical-align: -1px;
	margin-inline-end: 6px;
}

.bs-content ul.bs-diffs,
.bs-content ul.bs-checks {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
}
.bs-content ul.bs-diffs li,
.bs-content ul.bs-checks li {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--copper);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.93rem;
}
.bs-content ul.bs-checks li { border-inline-start-color: var(--ink); }

/* Plain tables (if any appear outside the catalog) */
.bs-content .wp-block-table { overflow-x: auto; margin: 0 0 18px; }
.bs-content .wp-block-table table { border-collapse: collapse; width: 100%; background: var(--card); font-size: 0.9rem; }
.bs-content .wp-block-table th,
.bs-content .wp-block-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }

/* Home tiles ------------------------------------------------------------ */

.bs-tiles-wrap { margin: 4px 0 30px; }
.bs-tiles-h { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
.bs-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.bs-tile {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	min-width: 0;
}
.bs-tile:hover { border-color: var(--copper); }
.bs-tile h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; }
.bs-tile h3 a { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.bs-tile h3 a:hover { color: var(--copper-d); }
.bs-tile-code {
	font-size: 0.74rem;
	font-weight: 700;
	background: var(--ink);
	color: #fff;
	border-radius: 6px;
	padding: 3px 7px;
	letter-spacing: 0.06em;
	direction: ltr;
}
.bs-tile-meta { margin: 0 0 10px; font-size: 0.84rem; color: var(--muted); }
.bs-tile-links { display: flex; flex-wrap: wrap; gap: 5px; }
.bs-tile-links a {
	font-size: 0.78rem;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--line-2);
	color: var(--text);
	text-decoration: none;
}
.bs-tile-links a:hover { background: var(--ink); color: #fff; }

/* Bottom navigation ----------------------------------------------------- */

.bs-nav {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 2px solid var(--ink);
}
.bs-nav-title { margin: 0 0 14px; font-weight: 600; font-size: 1.05rem; }
.bs-nav-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 24px;
}
.bs-nav-g.is-wide { grid-column: 1 / -1; }
.bs-nav-g h2 {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}
.bs-lang-ar .bs-nav-g h2 { text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
.bs-nav-g ul { margin: 0; padding: 0; list-style: none; }
.bs-nav-g li { margin: 0 0 5px; font-size: 0.9rem; }
.bs-nav-g a { color: var(--text); text-decoration: none; }
.bs-nav-g a:hover { color: var(--copper-d); text-decoration: underline; }
.bs-nav-g.is-wide ul { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-nav-g.is-wide li { margin: 0; }
.bs-nav-g.is-wide a {
	display: inline-block;
	font-size: 0.84rem;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
}
.bs-nav-g.is-wide a:hover { border-color: var(--copper); text-decoration: none; }

/* Language chooser ------------------------------------------------------ */

.bs-choose { max-width: 1000px; margin: 0 auto; padding: 46px 20px 56px; }
.bs-choose-h { text-align: center; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); font-weight: 600; margin: 0 0 28px; }
.bs-choose-sep { color: var(--copper); margin: 0 6px; }
.bs-choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bs-side {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--copper);
	border-radius: var(--radius);
	padding: 24px;
}
.bs-side[lang="en"] { border-top-color: var(--ink); }
.bs-side-k { margin: 0; font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.bs-side h2 { margin: 4px 0 8px; font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.bs-side p { color: #3d444d; }
.bs-side-cta {
	display: inline-block;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 500;
	margin: 6px 0 16px;
}
.bs-side-cta:hover { background: var(--copper); color: #fff; }
.bs-side-countries { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bs-side-countries a {
	display: inline-block;
	font-size: 0.84rem;
	padding: 4px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text);
	text-decoration: none;
}
.bs-side-countries a:hover { border-color: var(--copper); }
.bs-choose-note { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 24px; }
.bs-choose-note span { display: block; }

/* Footer ---------------------------------------------------------------- */

.bs-foot { background: var(--ink); color: #aab3bf; padding: 28px 0; font-size: 0.86rem; }
.bs-foot-note { max-width: 860px; margin: 0 0 14px; }
.bs-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; }
.bs-foot a { color: #f4f2ec; }
.bs-foot a:hover { color: #ff8a3d; }
.bs-copy { margin: 0; font-size: 0.8rem; color: #7d8794; }

.bs-plain { padding-inline-start: 20px; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1020px) {
	.bk-grid,
	.bs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bs-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.bs-wrap { padding-inline: 16px; }
	.bs-tag { display: none; }
	.bk-grid,
	.bs-tiles,
	.bs-choose-grid { grid-template-columns: minmax(0, 1fr); }
	.bs-chips { flex-direction: column; align-items: flex-start; gap: 6px; }
	.bs-chips-row { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; }
	.vs-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vs-head .vs-l { display: none; }
	.vs-b { padding: 12px; font-size: 0.96rem; }
	.vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vs-row .vs-l { grid-column: 1 / -1; padding-block: 7px; font-size: 0.82rem; }
	.vs-row .vs-v:first-of-type { border-inline-start: 0; }
	.bs-nav-grid { grid-template-columns: minmax(0, 1fr); }
	.bs-side { padding: 18px; }
}