/*
 * [arzcredit_rates] — ArzCredit brand styling.
 *
 * Round 3 T5. The previous sheet used a green/teal palette that belongs to no
 * part of this brand, flat bordered boxes with no elevation, and a list view
 * that was a plain stack rather than the approved six-column table.
 *
 * Every colour below is SAMPLED from the Owner-approved reference
 * (inputs/2026-09-10-ui-reference/rate-list-target-design.png), not invented:
 *
 *     hero gradient   #0e89d4 -> #057ac5
 *     primary         #008cea
 *     selected tint   #eef8fe
 *     panel tint      #f2fafe
 *     table header    #f3f5f9
 *     positive/green  #138d27
 *
 * Everything is scoped under .arz-rates. This is a shortcode embedded in an
 * existing page: it must never restyle body, headings, Elementor, WooCommerce,
 * Gravity Forms or anything else, and it must not touch the browser edge.
 */

.arz-rates {
	--arz-blue: #057ac5;
	--arz-blue-light: #0e89d4;
	--arz-primary: #008cea;
	--arz-tint: #eef8fe;
	--arz-panel: #f2fafe;
	--arz-head: #f3f5f9;
	--arz-up: #138d27;
	--arz-down: #d93025;
	--arz-ink: #12263f;
	--arz-muted: #6b7a90;
	--arz-line: #e3ebf3;
	--arz-radius: 16px;
	--arz-shadow: 0 2px 4px rgba(16, 42, 67, .04), 0 10px 26px rgba(16, 42, 67, .07);

	box-sizing: border-box;
	direction: rtl;
	color: var(--arz-ink);
	font-size: 15px;
	line-height: 1.7;
	/* The component lives inside the page's own container and must breathe
	   rather than run to the viewport edge. */
	max-width: 100%;
	margin: 0;
}

.arz-rates *,
.arz-rates *::before,
.arz-rates *::after { box-sizing: inherit; }

.arz-rates img { max-width: 100%; height: auto; display: block; }

/* -- toolbar ------------------------------------------------------------- */

.arz-rates__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.arz-rates__toggle {
	display: inline-flex;
	gap: 8px;
	background: #fff;
	padding: 6px;
	border-radius: 12px;
	box-shadow: var(--arz-shadow);
}

.arz-rates__toggle-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--arz-muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 9px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.arz-rates__toggle-btn:hover { background: var(--arz-tint); color: var(--arz-blue); }

.arz-rates__toggle-btn.is-active {
	background: var(--arz-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 140, 234, .32);
}

.arz-rates__toggle-btn:focus-visible {
	outline: 2px solid var(--arz-primary);
	outline-offset: 2px;
}

/* -- currency cards (grid view) ------------------------------------------ */

.arz-rates__items {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

.arz-rates__item {
	background: #fff;
	border: 1.5px solid transparent;
	border-radius: var(--arz-radius);
	box-shadow: var(--arz-shadow);
	padding: 16px;
	cursor: pointer;
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-areas:
		"logo name"
		"rate rate"
		"meta meta";
	align-items: center;
	gap: 6px 12px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.arz-rates__item:hover {
	transform: translateY(-2px);
	border-color: #cfe8fa;
}

.arz-rates__item[aria-pressed="true"] {
	border-color: var(--arz-primary);
	background: var(--arz-tint);
}

.arz-rates__item:focus-visible { outline: 2px solid var(--arz-primary); outline-offset: 2px; }

.arz-rates__logo { grid-area: logo; }

.arz-rates__logo img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(16, 42, 67, .08);
}

.arz-rates__name {
	grid-area: name;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.arz-rates__iso {
	font-size: 12px;
	font-weight: 600;
	color: var(--arz-muted);
	letter-spacing: .04em;
}

.arz-rates__rate {
	grid-area: rate;
	font-size: 19px;
	font-weight: 800;
	color: var(--arz-ink);
}

.arz-rates__updated { grid-area: meta; font-size: 12px; color: var(--arz-muted); }

.arz-rates__change { font-size: 12px; font-weight: 700; }
.arz-rates__change--up { color: var(--arz-up); }
.arz-rates__change--down { color: var(--arz-down); }

/* The table-only cells never show in card view. */
.arz-rates__cell { display: none; }

/* -- list view: the approved six-column table ---------------------------- */

.arz-rates[data-view="list"] .arz-rates__items {
	display: block;
	background: #fff;
	border-radius: var(--arz-radius);
	box-shadow: var(--arz-shadow);
	overflow: hidden;
}

.arz-rates[data-view="list"] .arz-rates__item {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.1fr;
	grid-template-areas: "name rate hawala low high mini";
	align-items: center;
	gap: 0 12px;
	border: 0;
	border-bottom: 1px solid var(--arz-line);
	border-radius: 0;
	box-shadow: none;
	padding: 14px 18px;
	transform: none;
}

.arz-rates[data-view="list"] .arz-rates__item:last-child { border-bottom: 0; }
.arz-rates[data-view="list"] .arz-rates__item:hover { background: var(--arz-panel); }
.arz-rates[data-view="list"] .arz-rates__item[aria-pressed="true"] { background: var(--arz-tint); }

.arz-rates[data-view="list"] .arz-rates__logo {
	grid-area: name;
	justify-self: start;
}

.arz-rates[data-view="list"] .arz-rates__name {
	grid-area: name;
	padding-inline-start: 50px;
}

.arz-rates[data-view="list"] .arz-rates__rate { grid-area: rate; font-size: 15px; font-weight: 700; }
.arz-rates[data-view="list"] .arz-rates__updated,
.arz-rates[data-view="list"] .arz-rates__change { display: none; }

.arz-rates[data-view="list"] .arz-rates__cell {
	display: block;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.arz-rates[data-view="list"] .arz-rates__cell--hawala { grid-area: hawala; color: var(--arz-ink); }
.arz-rates[data-view="list"] .arz-rates__cell--low { grid-area: low; color: var(--arz-down); }
.arz-rates[data-view="list"] .arz-rates__cell--high { grid-area: high; color: var(--arz-up); }
.arz-rates[data-view="list"] .arz-rates__cell--mini { grid-area: mini; color: var(--arz-up); }

.arz-rates__mini-chart { width: 100%; height: 34px; display: block; }
.arz-rates__mini-fill { fill: rgba(19, 141, 39, .12); }
.arz-rates__mini-empty { color: var(--arz-muted); font-weight: 600; }

/* -- selected-currency detail panel -------------------------------------- */

.arz-rates__detail { margin-bottom: 18px; }

.arz-rates__detail-card {
	background: var(--arz-panel);
	border: 1.5px solid #cfe8fa;
	border-radius: var(--arz-radius);
	padding: 22px;
	display: grid;
	grid-template-columns: minmax(190px, 1fr) minmax(150px, auto) minmax(200px, 1.3fr);
	grid-template-areas:
		"price ident chart"
		"note  note  note"
		"rows  rows  rows";
	gap: 18px 24px;
	align-items: center;
}

.arz-rates__detail-head {
	grid-area: ident;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}

.arz-rates__detail-logo img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(16, 42, 67, .08);
}

.arz-rates__detail-name {
	font-size: 19px;
	font-weight: 800;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.arz-rates__detail-symbol { font-size: 13px; font-weight: 600; color: var(--arz-muted); }

.arz-rates__detail-rate {
	grid-area: price;
	font-size: 34px;
	font-weight: 800;
	color: var(--arz-ink);
	letter-spacing: -.01em;
	line-height: 1.15;
}

.arz-rates__unit { font-size: 14px; font-weight: 600; color: var(--arz-muted); display: block; }

.arz-rates__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid #dbeaf6;
	font-size: 14px;
}

.arz-rates__row--muted { color: var(--arz-muted); }
.arz-rates__row:first-of-type { border-top: 0; }

/* The detail rows are a single stacked block, not overlapping grid items:
   giving every .arz-rates__row the same grid-area painted them all on top of
   one another, and the stale banner landed on top of the text too. */
.arz-rates__detail-card > .arz-rates__row {
	grid-area: rows;
	align-self: start;
}
.arz-rates__detail-card > .arz-rates__row:nth-of-type(1) { grid-row: 3; }
.arz-rates__detail-card > .arz-rates__row:nth-of-type(2) { grid-row: 4; }
.arz-rates__detail-card > .arz-rates__row:nth-of-type(3) { grid-row: 5; }
.arz-rates__detail-card > .arz-rates__row:nth-of-type(4) { grid-row: 6; }
.arz-rates__detail-card > .arz-rates__row:nth-of-type(n) { grid-column: 1 / -1; }

.arz-rates__stale {
	grid-area: note;
	background: #fff8e6;
	border: 1px solid #f4dfa6;
	border-radius: 10px;
	padding: 9px 13px;
	font-size: 13px;
	color: #7a5c12;
}

/* -- chart --------------------------------------------------------------- */

.arz-rates__chart { grid-area: chart; color: var(--arz-up); }

.arz-rates__chart-tabs { display: flex; gap: 6px; justify-content: flex-start; margin-bottom: 8px; }

.arz-rates__chart-tab {
	appearance: none;
	border: 1px solid var(--arz-line);
	background: #fff;
	color: var(--arz-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 999px;
	cursor: pointer;
}

.arz-rates__chart-tab.is-active {
	background: var(--arz-primary);
	border-color: var(--arz-primary);
	color: #fff;
}

.arz-rates__chart-tab:focus-visible { outline: 2px solid var(--arz-primary); outline-offset: 2px; }

.arz-rates__chart-body { min-height: 64px; }
.arz-rates__sparkline { width: 100%; height: 78px; display: block; }
.arz-rates__spark-fill { fill: rgba(19, 141, 39, .13); }
.arz-rates__chart-empty { font-size: 13px; color: var(--arz-muted); margin: 0; }

/* -- optional API disclosure --------------------------------------------- */

.arz-rates__api {
	background: #fff;
	border: 1px solid var(--arz-line);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13px;
}

.arz-rates__api summary { cursor: pointer; font-weight: 700; color: var(--arz-blue); }
.arz-rates__api-body code {
	display: block;
	background: var(--arz-head);
	border-radius: 8px;
	padding: 8px 10px;
	margin-top: 8px;
	direction: ltr;
	text-align: left;
	word-break: break-all;
	font-size: 12px;
}

/* -- single-currency mode ------------------------------------------------ */

.arz-rates--single .arz-rates__items,
.arz-rates--single .arz-rates__toolbar { display: none; }

/* -- responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
	.arz-rates__detail-card {
		grid-template-columns: 1fr;
		grid-template-areas: "ident" "price" "chart" "note" "rows";
		text-align: center;
		padding: 18px;
	}
	.arz-rates__detail-head { justify-content: center; }
	.arz-rates__chart-tabs { justify-content: center; }
	.arz-rates__row { text-align: start; }

	/* The six-column table cannot survive a phone. Each row becomes a labelled
	   stack instead of forcing a horizontal scroll on the whole page. */
	.arz-rates[data-view="list"] .arz-rates__item {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"name name"
			"rate hawala"
			"low  high"
			"mini mini";
		gap: 8px 12px;
		padding: 16px;
	}
	.arz-rates[data-view="list"] .arz-rates__cell { text-align: start; }
	.arz-rates[data-view="list"] .arz-rates__cell::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--arz-muted);
	}
}

@media (max-width: 560px) {
	.arz-rates__items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.arz-rates__detail-rate { font-size: 28px; }
	.arz-rates__toolbar { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.arz-rates__item { transition: none; }
	.arz-rates__item:hover { transform: none; }
}