/* Mr AIO — checkout / thank-you / account shell. --mraio-brand is set inline from MRAIO_BRAND_COLOR. */
@font-face {
	font-family: "Vazirmatn";
	src: url("vazirmatn.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
:root {
	--mraio-brand: #0b5cad;
	--mraio-ink: #1f2933;
	--mraio-muted: #616e7c;
	--mraio-line: #e4e7eb;
	--mraio-bg: #f7f8fa;
	--mraio-radius: 10px;
}
html, body.mraio-shell { margin: 0; background: var(--mraio-bg); }
body.mraio-shell, body.mraio-shell input, body.mraio-shell select, body.mraio-shell textarea, body.mraio-shell button {
	font-family: "Vazirmatn", Tahoma, sans-serif;
	color: var(--mraio-ink);
	font-size: 15px;
	line-height: 1.8;
	direction: rtl;
}
.mraio-shell a { color: var(--mraio-brand); }
.mraio-wrap { max-width: 1040px; margin: 0 auto; padding-inline: 16px; box-sizing: border-box; }

.mraio-header { background: #fff; border-bottom: 1px solid var(--mraio-line); }
.mraio-header .mraio-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.mraio-logo { text-decoration: none; display: inline-flex; align-items: center; }
.mraio-logo img { height: 40px; width: auto; }
.mraio-wordmark { font-weight: 800; font-size: 20px; color: var(--mraio-ink); }
.mraio-wordmark small { font-weight: 500; font-size: 13px; color: var(--mraio-muted); margin-inline-start: 4px; }
.mraio-back { text-decoration: none; font-weight: 600; font-size: 14px; }

.mraio-main { padding-block: 24px 48px; }
.mraio-title { font-size: 22px; margin: 0 0 16px; }

.mraio-footer { border-top: 1px solid var(--mraio-line); background: #fff; font-size: 13px; color: var(--mraio-muted); }
.mraio-footer .mraio-wrap { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-block: 16px; }

/* WooCommerce classic checkout */
.mraio-shell .woocommerce form.checkout,
.mraio-shell .woocommerce-order,
.mraio-shell .woocommerce-MyAccount-content,
.mraio-shell .woocommerce form.login,
.mraio-shell .woocommerce form.register { background: #fff; border: 1px solid var(--mraio-line); border-radius: var(--mraio-radius); padding: 20px; box-sizing: border-box; }
.mraio-shell .woocommerce .col2-set .col-1, .mraio-shell .woocommerce .col2-set .col-2 { float: right; }
.mraio-shell .woocommerce form .form-row input.input-text,
.mraio-shell .woocommerce form .form-row textarea,
.mraio-shell .woocommerce form .form-row select { border: 1px solid #cbd2d9; border-radius: 8px; padding: 10px 12px; width: 100%; box-sizing: border-box; background: #fff; }
.mraio-shell .woocommerce form .form-row input.input-text:focus,
.mraio-shell .woocommerce form .form-row textarea:focus { outline: 2px solid var(--mraio-brand); outline-offset: 0; border-color: transparent; }
.mraio-shell .woocommerce #payment { background: var(--mraio-bg); border-radius: var(--mraio-radius); }
.mraio-shell .woocommerce #payment div.payment_box { background: #fff; color: var(--mraio-ink); }
.mraio-shell .woocommerce #payment div.payment_box::before { display: none; }
.mraio-shell .woocommerce button.button,
.mraio-shell .woocommerce a.button,
.mraio-shell .woocommerce #payment #place_order {
	background: var(--mraio-brand); color: #fff; border: 0; border-radius: 8px;
	padding: 12px 24px; font-weight: 700; font-size: 16px;
}
.mraio-shell .woocommerce #payment #place_order { width: 100%; float: none; }
.mraio-shell .woocommerce button.button:hover, .mraio-shell .woocommerce a.button:hover { filter: brightness(1.08); color: #fff; }
.mraio-shell .woocommerce table.shop_table { border-radius: var(--mraio-radius); border-color: var(--mraio-line); }
.mraio-shell .woocommerce table.shop_table th, .mraio-shell .woocommerce table.shop_table td { text-align: right; }
.mraio-shell .woocommerce-order-overview { padding: 0; }
.mraio-shell .woocommerce-notice--success { background: #e8f5ee; border-radius: var(--mraio-radius); padding: 12px 16px; font-weight: 600; }

@media (max-width: 768px) {
	.mraio-shell .woocommerce .col2-set .col-1, .mraio-shell .woocommerce .col2-set .col-2,
	.mraio-shell .woocommerce form .form-row-first, .mraio-shell .woocommerce form .form-row-last { float: none; width: 100%; }
	.mraio-shell .woocommerce form.checkout, .mraio-shell .woocommerce-order { padding: 14px; }
}