/*
 * Mashin Irani — Returns page design (شرایط بازگشت و مرجوعی کالا).
 *
 * Charcoal/amber hero with an orange brand glow, pledge cards, a numbered refund flow, accept/reject
 * panels, a refund-routes table that stacks to cards on mobile, an FAQ accordion and a closing CTA band.
 * Own `mir-` namespace — it does not touch the shared .mip-* rules in mirani-pages.css or the .mit-*
 * rules in mirani-terms.css, and reuses only .container/.section/.eyebrow/.breadcrumb/.btn from mi.css.
 *
 * Colours bind to the short --* tokens (mirani-recolor.css re-declares them for the live orange/charcoal
 * palette); hex fallbacks are the LIVE values, not the retired navy ones. RTL-first: logical properties
 * only, so the layout mirrors correctly.
 */

/* ------------------------------------------------------------------- hero */
.mir-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-6, 24px);
	align-items: center;
	margin-block: var(--space-5, 20px) var(--space-8, 32px);
	padding: var(--space-8, 32px);
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy-900, #1A1D22) 0%, var(--n-700, #2A2F38) 58%, var(--navy-900, #1A1D22) 100%);
	color: var(--text-on-dark, #F4F5F6);
	box-shadow: 0 18px 40px rgba(20, 20, 30, .18);
}

.mir-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 140% at 100% 0%, rgba(214, 67, 26, .30), transparent 62%);
	pointer-events: none;
}

.mir-hero__b {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.mir-hero .eyebrow {
	margin: 0 0 var(--space-2, 8px);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gold-300, #DFAE45);
}

.mir-hero h1 {
	margin: 0 0 var(--space-3, 12px);
	font-size: clamp(1.7rem, 4.5vw, 2.4rem);
	line-height: 1.2;
	color: #fff;
}

.mir-hero__lede {
	margin: 0;
	max-width: 64ch;
	font-size: 1.02rem;
	line-height: 1.9;
	color: rgba(244, 245, 246, .82);
}

.mir-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, 8px) var(--space-3, 12px);
	margin-top: var(--space-5, 20px);
}

.mir-meta__i {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--radius-pill, 999px);
	background: rgba(244, 245, 246, .08);
	border: 1px solid rgba(223, 174, 69, .30);
	font-size: .78rem;
	font-weight: 600;
	color: rgba(244, 245, 246, .92);
}

.mir-meta__i svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--gold-300, #DFAE45);
	stroke-width: 1.8;
}

.mir-print {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 0;
	border-radius: var(--radius-pill, 999px);
	background: var(--gold-300, #DFAE45);
	color: var(--navy-900, #1A1D22);
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter .2s;
}

.mir-print:hover {
	filter: brightness(1.07);
}

.mir-print svg {
	width: 14px;
	height: 14px;
}

.mir-hero__seal {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: rgba(244, 245, 246, .06);
	border: 2px solid rgba(223, 174, 69, .45);
}

.mir-hero__seal svg {
	width: 46px;
	height: 46px;
	fill: none;
	stroke: var(--gold-300, #DFAE45);
	stroke-width: 1.4;
}

/* --------------------------------------------------------------- pledges */
.mir-pledge {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: var(--space-4, 16px);
	margin-bottom: var(--space-8, 32px);
}

.mir-pledge__c {
	position: relative;
	padding: var(--space-5, 20px);
	border: 1px solid var(--border, #E3E6EB);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-elevated, #fff);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(20, 20, 30, .05));
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.mir-pledge__c:hover {
	border-color: var(--gold-300, #DFAE45);
	box-shadow: var(--shadow-e2, 0 4px 12px rgba(20, 20, 30, .07));
	transform: translateY(-2px);
}

.mir-pledge__c .ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(184, 134, 11, .10);
	margin-bottom: var(--space-3, 12px);
}

.mir-pledge__c .ic svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--gold-500, #B8860B);
	stroke-width: 1.8;
}

.mir-pledge__c b {
	display: block;
	margin-bottom: 6px;
	font-size: .98rem;
	color: var(--navy-900, #1A1D22);
}

.mir-pledge__c p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.85;
	color: var(--text-secondary, #667085);
}

/* ------------------------------------------------------------ section head */
.mir-head {
	margin-bottom: var(--space-5, 20px);
}

.mir-head .eyebrow {
	margin: 0 0 6px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gold-text, #9C780B);
}

.mir-head h2 {
	margin: 0;
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	line-height: 1.4;
	color: var(--navy-900, #1A1D22);
}

/* ------------------------------------------------------------------ steps */
.mir-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-4, 16px);
}

.mir-step {
	position: relative;
	padding: var(--space-5, 20px);
	border: 1px solid var(--border, #E3E6EB);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-elevated, #fff);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(20, 20, 30, .05));
	overflow: hidden;
}

.mir-step::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(to left, var(--navy-800, #D6431A), rgba(223, 174, 69, 0));
}

.mir-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--navy-800, #D6431A);
	color: #fff;
	font-size: .95rem;
	font-weight: 800;
	box-shadow: 0 0 0 5px rgba(214, 67, 26, .10);
	margin-bottom: var(--space-4, 16px);
}

.mir-step b {
	display: block;
	margin-bottom: 6px;
	font-size: 1rem;
	color: var(--navy-900, #1A1D22);
}

.mir-step p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.85;
	color: var(--text-secondary, #667085);
}

/* -------------------------------------------------------- accept / reject */
.mir-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-4, 16px);
}

.mir-panel {
	padding: var(--space-6, 24px);
	border: 1px solid var(--border, #E3E6EB);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-elevated, #fff);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(20, 20, 30, .05));
}

.mir-panel__h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--space-4, 16px);
	padding-bottom: var(--space-3, 12px);
	border-bottom: 1px solid var(--border, #E3E6EB);
	font-size: 1.05rem;
	color: var(--navy-900, #1A1D22);
}

.mir-panel__h .ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.mir-panel__h .ic svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke-width: 2;
}

.mir-panel--ok .mir-panel__h .ic {
	background: rgba(31, 138, 92, .10);
}

.mir-panel--ok .mir-panel__h .ic svg {
	stroke: var(--success, #1F8A5C);
}

.mir-panel--no .mir-panel__h .ic {
	background: rgba(192, 57, 43, .10);
}

.mir-panel--no .mir-panel__h .ic svg {
	stroke: var(--clay-error, #C0392B);
}

.mir-panel ul {
	display: grid;
	gap: var(--space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mir-panel li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mir-panel li > svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	fill: none;
	stroke-width: 2;
}

.mir-panel--ok li > svg {
	stroke: var(--success, #1F8A5C);
}

.mir-panel--no li > svg {
	stroke: var(--clay-error, #C0392B);
}

.mir-panel li b {
	display: block;
	margin-bottom: 2px;
	font-size: .95rem;
	color: var(--navy-900, #1A1D22);
}

.mir-panel li span {
	display: block;
	font-size: .88rem;
	line-height: 1.85;
	color: var(--text-secondary, #667085);
}

/* --------------------------------------------------------- refund routes */
.mir-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--border, #E3E6EB);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-elevated, #fff);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(20, 20, 30, .05));
}

.mir-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}

.mir-table th,
.mir-table td {
	text-align: start;
	vertical-align: top;
}

.mir-table thead th {
	padding: 14px var(--space-5, 20px);
	background: var(--bg-sunken, #F1F2F5);
	color: var(--navy-900, #1A1D22);
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
}

.mir-table tbody td {
	padding: 16px var(--space-5, 20px);
	border-top: 1px solid var(--border, #E3E6EB);
	line-height: 1.9;
	color: var(--text-secondary, #667085);
}

.mir-table tbody td:first-child {
	font-weight: 700;
	color: var(--navy-900, #1A1D22);
	white-space: nowrap;
}

/* ------------------------------------------------------------------- note */
.mir-note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 12px);
	margin-top: var(--space-4, 16px);
	padding: var(--space-5, 20px);
	border: 1px dashed var(--border-strong, #D3D8DF);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-sunken, #F1F2F5);
	color: var(--text-secondary, #667085);
	line-height: 1.95;
}

.mir-note svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	fill: none;
	stroke: var(--gold-500, #B8860B);
	stroke-width: 1.8;
}

.mir-note b {
	color: var(--navy-900, #1A1D22);
}

.mir-note a {
	color: var(--link, #D6431A);
	font-weight: 700;
	text-decoration: none;
}

.mir-note a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------- FAQ */
.mir-faq {
	display: grid;
	gap: var(--space-3, 12px);
}

.mir-faq details {
	border: 1px solid var(--border, #E3E6EB);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-elevated, #fff);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(20, 20, 30, .05));
	overflow: hidden;
	transition: border-color .2s;
}

.mir-faq details[open] {
	border-color: var(--gold-300, #DFAE45);
}

.mir-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 16px);
	padding: var(--space-4, 16px) var(--space-5, 20px);
	list-style: none;
	cursor: pointer;
	text-align: start;
	font-weight: 700;
	font-size: .97rem;
	color: var(--navy-900, #1A1D22);
}

.mir-faq summary::-webkit-details-marker {
	display: none;
}

.mir-faq summary .ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill, 999px);
	background: var(--bg-sunken, #F1F2F5);
	transition: transform .2s, background .2s;
}

.mir-faq summary .ic svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--navy-800, #D6431A);
	stroke-width: 2;
}

.mir-faq details[open] summary .ic {
	transform: rotate(180deg);
	background: var(--navy-900, #1A1D22);
}

.mir-faq details[open] summary .ic svg {
	stroke: var(--gold-300, #DFAE45);
}

.mir-faq .ans {
	padding: 0 var(--space-5, 20px) var(--space-5, 20px);
	line-height: 1.95;
	color: var(--text-secondary, #667085);
}

/* -------------------------------------------------------------------- CTA */
.mir-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(28px, 5vw, 48px) var(--space-5, 20px);
	border-radius: var(--radius-2xl, 24px);
	background: linear-gradient(135deg, var(--navy-900, #1A1D22) 0%, var(--n-700, #2A2F38) 100%);
	color: var(--text-on-dark, #F4F5F6);
	box-shadow: var(--shadow-e3, 0 8px 24px rgba(20, 20, 30, .09));
}

.mir-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 120% at 0% 100%, rgba(214, 67, 26, .28), transparent 60%);
	pointer-events: none;
}

.mir-cta > * {
	position: relative;
	z-index: 1;
}

.mir-cta .eyebrow {
	margin: 0 0 var(--space-2, 8px);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gold-300, #DFAE45);
}

.mir-cta h2 {
	margin: 0 0 var(--space-3, 12px);
	font-size: clamp(1.3rem, 3.5vw, 1.8rem);
	color: #fff;
}

.mir-cta p {
	max-width: 54ch;
	margin: 0 auto var(--space-6, 24px);
	line-height: 1.9;
	color: rgba(244, 245, 246, .80);
}

.mir-cta__acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3, 12px);
}

/* The hello reset + mirani-home-fixes.css both re-assert .btn.btn-outline{color:var(--text-primary)}
 * at (0,2,0) and load later, which would render the outline label charcoal-on-charcoal in this dark
 * band. Re-assert the designed amber at (0,3,0). */
.mir-cta .btn.btn-outline {
	border: 1px solid var(--gold-300, #DFAE45);
	color: var(--gold-300, #DFAE45);
	background: transparent;
}

.mir-cta .btn.btn-outline:hover,
.mir-cta .btn.btn-outline:focus {
	background: rgba(223, 174, 69, .12);
	color: var(--gold-300, #DFAE45);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 640px) {
	.mir-hero {
		grid-template-columns: 1fr;
		padding: var(--space-6, 24px);
	}

	.mir-hero__seal {
		display: none;
	}

	.mir-panel {
		padding: var(--space-5, 20px);
	}

	/* Stacked-card table — same treatment as .mip-table in mirani-pages.css. */
	.mir-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.mir-table,
	.mir-table tbody,
	.mir-table tr,
	.mir-table td {
		display: block;
		width: 100%;
	}

	.mir-table tr {
		padding: var(--space-3, 12px) 0;
		border-top: 1px solid var(--border, #E3E6EB);
	}

	.mir-table tr:first-child {
		border-top: 0;
	}

	.mir-table tbody td {
		padding: 4px var(--space-4, 16px);
		border: 0;
	}

	.mir-table tbody td::before {
		content: attr(data-l);
		display: block;
		margin-bottom: 2px;
		font-size: .74rem;
		font-weight: 700;
		color: var(--text-tertiary, #8B93A1);
	}

	.mir-table tbody td:first-child {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------- print */
@media print {
	.site-header,
	.site-footer,
	.breadcrumb,
	.mir-print,
	.mir-cta,
	.gaftino,
	.mi-mfooter,
	.mi-mobile-nav,
	.mi-b2b-choice {
		display: none !important;
	}

	.mir-hero {
		background: none !important;
		box-shadow: none;
		border: 1px solid #ccc;
		color: #000;
	}

	.mir-hero::after {
		display: none;
	}

	.mir-hero h1,
	.mir-hero .eyebrow,
	.mir-hero__lede,
	.mir-meta__i {
		color: #000 !important;
	}

	.mir-step,
	.mir-panel,
	.mir-pledge__c,
	.mir-faq details {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.mir-faq .ans {
		display: block !important;
	}
}