/* Repair status - change these tokens to match your brand */
.mrs {
	--mrs-primary: #1f6feb;
	--mrs-primary-soft: #e8f0fe;
	--mrs-success: #16a34a;
	--mrs-success-soft: #e7f6ec;
	--mrs-warn: #b45309;
	--mrs-warn-soft: #fdf3e2;
	--mrs-danger: #dc2626;
	--mrs-text: #1f2937;
	--mrs-muted: #6b7280;
	--mrs-line: #e5e7eb;
	--mrs-bg: #ffffff;
	--mrs-radius: 16px;

	font-family: inherit;
	color: var(--mrs-text);
	max-width: 820px;
	margin: 0 auto;
	direction: rtl;
	text-align: right;
	line-height: 1.8;
}
.mrs *, .mrs *::before, .mrs *::after { box-sizing: border-box; }

.mrs-card {
	background: var(--mrs-bg);
	border: 1px solid var(--mrs-line);
	border-radius: var(--mrs-radius);
	padding: 24px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(15,23,42,.05);
	margin-bottom: 16px;
}

.mrs-title { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; }
.mrs-sub   { margin: 0 0 18px; color: var(--mrs-muted); font-size: .92rem; }

/* Tabs */
.mrs-tabs {
	display: flex; gap: 4px; padding: 4px;
	background: #f3f4f6; border-radius: 12px; margin-bottom: 18px;
}
.mrs-tab {
	flex: 1; border: 0; background: transparent; cursor: pointer;
	padding: 10px 12px; border-radius: 9px; font: inherit; font-size: .92rem;
	color: var(--mrs-muted); transition: background .15s, color .15s;
}
.mrs-tab.is-active { background: #fff; color: var(--mrs-text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Form */
.mrs-fields { display: grid; gap: 14px; grid-template-columns: 1fr; }
.mrs-fields[data-for="reception"] { grid-template-columns: 2fr 1fr; }
.mrs-fields[hidden] { display: none; }
.mrs-field { display: block; }
.mrs-field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.mrs-field input {
	width: 100%; font: inherit; font-size: 1.05rem; letter-spacing: .5px;
	padding: 12px 14px; border: 1.5px solid var(--mrs-line); border-radius: 10px;
	background: #fff; color: var(--mrs-text); text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
.mrs-field input:focus { outline: none; border-color: var(--mrs-primary); box-shadow: 0 0 0 4px var(--mrs-primary-soft); }
.mrs-field small { display: block; color: var(--mrs-muted); font-size: .8rem; margin-top: 6px; }
.mrs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mrs-btn {
	margin-top: 18px; width: 100%; border: 0; cursor: pointer;
	background: var(--mrs-primary); color: #fff; font: inherit; font-weight: 700; font-size: 1rem;
	padding: 13px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;
	transition: filter .15s, transform .05s;
}
.mrs-btn:hover { filter: brightness(1.07); }
.mrs-btn:active { transform: translateY(1px); }
.mrs-btn[disabled] { opacity: .75; cursor: progress; }
.mrs-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
	display: none; animation: mrs-spin .8s linear infinite;
}
.mrs-btn.is-loading .mrs-spinner { display: inline-block; }
@keyframes mrs-spin { to { transform: rotate(360deg); } }

.mrs-error {
	margin-top: 14px; padding: 12px 14px; border-radius: 10px;
	background: #fef2f2; color: var(--mrs-danger); font-size: .92rem;
}

/* Result: status hero */
.mrs-hero { display: flex; gap: 16px; align-items: flex-start; }
.mrs-hero-icon {
	flex: 0 0 52px; height: 52px; border-radius: 14px;
	display: grid; place-items: center;
	background: var(--mrs-primary-soft); color: var(--mrs-primary);
}
.mrs-hero-icon svg { width: 26px; height: 26px; }
.mrs.is-done .mrs-hero-icon { background: var(--mrs-success-soft); color: var(--mrs-success); }
.mrs-hero-label { font-size: .82rem; color: var(--mrs-muted); }
.mrs-hero-status { font-size: 1.3rem; font-weight: 800; margin: 2px 0 4px; }
.mrs-hero-msg { margin: 0; color: var(--mrs-text); font-size: .95rem; }

.mrs-progress { height: 8px; background: #f1f5f9; border-radius: 99px; overflow: hidden; margin: 20px 0 6px; }
.mrs-progress > i { display: block; height: 100%; width: 0; background: var(--mrs-primary); border-radius: 99px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.mrs.is-done .mrs-progress > i { background: var(--mrs-success); }
.mrs-progress-meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mrs-muted); }

/* Stepper */
.mrs-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.mrs-step { position: relative; text-align: center; padding-top: 42px; font-size: .8rem; color: var(--mrs-muted); }
.mrs-step::before {
	content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: var(--mrs-line);
}
.mrs-step:first-child::before { display: none; }
.mrs-step .mrs-dot {
	position: absolute; top: 0; right: 50%; transform: translateX(50%);
	width: 33px; height: 33px; border-radius: 50%;
	background: #fff; border: 2.5px solid var(--mrs-line);
	display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--mrs-muted);
	z-index: 1;
}
.mrs-step.is-done { color: var(--mrs-text); }
.mrs-step.is-done::before { background: var(--mrs-success); }
.mrs-step.is-done .mrs-dot { background: var(--mrs-success); border-color: var(--mrs-success); color: #fff; }
.mrs-step.is-current { color: var(--mrs-primary); font-weight: 700; }
.mrs-step.is-current::before { background: var(--mrs-success); }
.mrs-step.is-current .mrs-dot {
	border-color: var(--mrs-primary); color: var(--mrs-primary);
	box-shadow: 0 0 0 5px var(--mrs-primary-soft);
	animation: mrs-pulse 2s ease-in-out infinite;
}
.mrs.is-done .mrs-step.is-current .mrs-dot { background: var(--mrs-success); border-color: var(--mrs-success); color: #fff; box-shadow: 0 0 0 5px var(--mrs-success-soft); animation: none; }
@keyframes mrs-pulse { 50% { box-shadow: 0 0 0 9px var(--mrs-primary-soft); } }

/* Info grid */
.mrs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mrs-grid > .mrs-card { margin-bottom: 0; }
.mrs-section-title { font-size: .95rem; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.mrs-section-title svg { width: 18px; height: 18px; color: var(--mrs-primary); }
.mrs-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .9rem; }
.mrs-dl dt { color: var(--mrs-muted); }
.mrs-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
.mrs-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.mrs-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.mrs-badge.ok  { background: var(--mrs-success-soft); color: var(--mrs-success); }
.mrs-badge.no  { background: var(--mrs-warn-soft); color: var(--mrs-warn); }

/* Statements */
.mrs-stmt { border: 1px solid var(--mrs-line); border-radius: 12px; padding: 14px; margin-top: 10px; }
.mrs-stmt-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: .9rem; padding: 3px 0; }
.mrs-stmt-row b { color: var(--mrs-muted); font-weight: 500; }

.mrs-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mrs-link-btn {
	flex: 1; min-width: 150px; text-align: center; text-decoration: none;
	padding: 11px 14px; border-radius: 10px; font-weight: 700; font-size: .92rem;
	border: 1.5px solid var(--mrs-line); color: var(--mrs-text); background: #fff; cursor: pointer; font-family: inherit;
}
.mrs-link-btn.primary { background: var(--mrs-primary); border-color: var(--mrs-primary); color: #fff; }

.mrs-result[hidden] { display: none; }
.mrs-result { animation: mrs-in .35s ease-out; }
@keyframes mrs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Mobile */
@media (max-width: 640px) {
	.mrs-card { padding: 18px; border-radius: 14px; }
	.mrs-grid { grid-template-columns: 1fr; }
	.mrs-fields[data-for="reception"] { grid-template-columns: 1fr; }
	.mrs-stmt-row { grid-template-columns: 1fr; gap: 0; }

	/* Vertical stepper */
	.mrs-steps { grid-template-columns: 1fr; gap: 0; }
	.mrs-step { text-align: right; padding: 6px 46px 14px 0; min-height: 44px; font-size: .9rem; }
	.mrs-step::before { top: -14px; right: 15px; left: auto; width: 3px; height: 28px; }
	.mrs-step .mrs-dot { top: 2px; right: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mrs *, .mrs { animation: none !important; transition: none !important; }
}