/*
 * [arzcredit_calculator] — ArzCredit brand styling.
 *
 * Round 3 T6, against the Owner-approved reference
 * (inputs/2026-09-10-ui-reference/calc-taregt-design.png, "طرح ۲"): two
 * soft-shadowed cards side by side — the input card on the right, the estimate
 * on the left — on the same blue/white palette sampled for the rates list.
 *
 * The previous sheet rendered an unstyled stack of native controls with a
 * green button, which is what bad-final-in-arzcredit-calc.png shows.
 *
 * Per-service customisation is NOT a styling concern and is not done here:
 * `.arz-calc__dynamic` is populated from Calculator\FormMap::build() (O07), so
 * each service already renders only its own real fields. This sheet just has
 * to present them well.
 *
 * Scoped entirely under .arz-calc.
 */

.arz-calc {
	--arz-blue: #057ac5;
	--arz-primary: #008cea;
	--arz-tint: #eef8fe;
	--arz-panel: #f2fafe;
	--arz-row: #f5f7fa;
	--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;
	max-width: 100%;
}

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

/* -- two-card layout ------------------------------------------------------ */

.arz-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}

.arz-calc__card {
	background: #fff;
	border-radius: var(--arz-radius);
	box-shadow: var(--arz-shadow);
	padding: 24px;
}

.arz-calc__card--result { background: #fff; }

/* -- card heads ----------------------------------------------------------- */

.arz-calc__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.arz-calc__head-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--arz-tint);
	color: var(--arz-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.arz-calc__head-text { display: flex; flex-direction: column; }

.arz-calc__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--arz-blue);
	line-height: 1.4;
}

.arz-calc__sub { font-size: 13px; color: var(--arz-muted); }

/* -- form controls -------------------------------------------------------- */

.arz-calc__row { margin-bottom: 16px; }

.arz-calc__row > label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 7px;
	color: var(--arz-ink);
}

.arz-calc__select,
.arz-calc__row input[type="text"],
.arz-calc__row input[type="number"],
.arz-calc__dynamic input,
.arz-calc__dynamic select,
.arz-calc__advanced input,
.arz-calc__advanced select {
	width: 100%;
	appearance: none;
	background: #fff;
	border: 1.5px solid var(--arz-line);
	border-radius: 11px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--arz-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.arz-calc__select,
.arz-calc__dynamic select,
.arz-calc__advanced select {
	/* Chevron on the LEFT: this is an RTL control. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	padding-left: 38px;
}

.arz-calc__select:focus,
.arz-calc__dynamic input:focus,
.arz-calc__dynamic select:focus,
.arz-calc__advanced input:focus,
.arz-calc__advanced select:focus {
	outline: none;
	border-color: var(--arz-primary);
	box-shadow: 0 0 0 3px rgba(0, 140, 234, .14);
}

/* The currency select carries its flag, per KNOWN-LIMITATIONS #3. The image is
   set inline by the JS from the shared logo map, so the sheet only reserves
   the space and positions it. */
.arz-calc__select--currency {
	background-position: left 14px center, right 12px center;
	background-repeat: no-repeat, no-repeat;
	background-size: 14px, 22px 22px;
	padding-right: 44px;
}

.arz-calc__dynamic[hidden] { display: none; }
.arz-calc__dynamic { margin-bottom: 4px; }
.arz-calc__group { margin-bottom: 16px; }

.arz-calc__choice { display: block; }

/* -- optional settings ---------------------------------------------------- */

.arz-calc__advanced {
	background: var(--arz-panel);
	border: 1px solid #dceefb;
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 18px;
}

.arz-calc__advanced > summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: var(--arz-blue);
	list-style: none;
}

.arz-calc__advanced > summary::-webkit-details-marker { display: none; }
.arz-calc__advanced > summary::after {
	content: "⌄";
	float: left;
	color: var(--arz-muted);
	font-size: 16px;
	line-height: 1;
}
.arz-calc__advanced[open] > summary::after { content: "⌃"; }
.arz-calc__advanced > div { margin-top: 12px; }

/* -- the CTA -------------------------------------------------------------- */

.arz-calc__submit {
	appearance: none;
	width: 100%;
	border: 0;
	border-radius: 12px;
	background: var(--arz-primary);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	padding: 14px 18px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 140, 234, .3);
	transition: background .15s ease, transform .12s ease;
}

.arz-calc__submit:hover:not(:disabled) { background: #0079cc; transform: translateY(-1px); }
.arz-calc__submit:disabled { background: #b9d7ea; box-shadow: none; cursor: not-allowed; }
.arz-calc__submit:focus-visible { outline: 2px solid var(--arz-blue); outline-offset: 3px; }

/* -- result rows ---------------------------------------------------------- */

.arz-calc__result[hidden] { display: none; }
.arz-calc__result[hidden] + .arz-calc__placeholder { display: block; }
.arz-calc__result:not([hidden]) + .arz-calc__placeholder { display: none; }

.arz-calc__placeholder {
	margin: 0 0 14px;
	padding: 26px 16px;
	text-align: center;
	color: var(--arz-muted);
	font-size: 14px;
	background: var(--arz-row);
	border-radius: 12px;
}

.arz-calc__result .arz-calc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--arz-row);
	border-radius: 11px;
	padding: 13px 15px;
	margin-bottom: 10px;
	font-size: 15px;
}

.arz-calc__result .arz-calc__row > span:first-child { font-weight: 700; }
.arz-calc__result .arz-calc__row--muted { color: var(--arz-muted); font-size: 13px; }

.arz-calc__result .arz-calc__row--total {
	background: #eaf7ee;
	border: 1px solid #c7e9d2;
	padding: 16px;
	margin-top: 14px;
	font-size: 17px;
}

.arz-calc__result .arz-calc__row--total > span { color: var(--arz-up); font-weight: 800; }

.arz-calc__estimate-note,
.arz-calc__notice {
	display: flex;
	gap: 8px;
	background: var(--arz-tint);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 13px;
	color: #35566f;
	margin: 14px 0 0;
}

.arz-calc__cta {
	display: inline-block;
	margin-top: 14px;
	background: var(--arz-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	padding: 12px 20px;
	border-radius: 12px;
}

.arz-calc__error {
	background: #fdecea;
	border: 1px solid #f5c2bd;
	color: #a4302a;
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 14px;
	margin-top: 12px;
}

.arz-calc__error[hidden] { display: none; }

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

@media (max-width: 900px) {
	.arz-calc__grid { grid-template-columns: 1fr; gap: 16px; }
	.arz-calc__card { padding: 18px; }
}

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