.kardan-wrap, .kardan-wrap * { box-sizing: border-box; }
.kardan-wrap {
	direction: rtl;
	text-align: right;
	font-family: 'Vazirmatn', Tahoma, sans-serif;
	--kardan-blue: #175cd6;
	--kardan-blue-deep: #0d3e9e;
	--kardan-ink: #101828;
	--kardan-gray: #667085;
	--kardan-line: #e4e9f2;
	--kardan-bg: #f7f9fc;
	max-width: 780px;
	margin: 0 auto;
}
.kardan-box {
	background: #fff;
	border: 1px solid var(--kardan-line);
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 16px;
	color: var(--kardan-ink);
}
.kardan-muted { color: var(--kardan-gray); font-size: 13px; }
.kardan-banner { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.kardan-banner-success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.kardan-banner-error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }

.kardan-form-title, .kardan-section-title { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--kardan-ink); }
.kardan-field-row { display: flex; gap: 14px; }
.kardan-field { flex: 1; margin-bottom: 14px; }
.kardan-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--kardan-ink); }
.kardan-field input, .kardan-field select, .kardan-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--kardan-line); border-radius: 9px;
	font-family: inherit; font-size: 14px; background: var(--kardan-bg); color: var(--kardan-ink);
}
.kardan-field textarea { resize: vertical; }

.kardan-btn {
	display: inline-block; border: none; border-radius: 9px; padding: 11px 20px; font-size: 14px;
	font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit;
}
.kardan-btn-primary { background: var(--kardan-blue); color: #fff; }
.kardan-btn-primary:hover { background: var(--kardan-blue-deep); color: #fff; }
.kardan-btn-ghost { background: #fff; color: var(--kardan-ink); border: 1px solid var(--kardan-line); }

.kardan-login-prompt p { margin-bottom: 12px; }

.kardan-profile-head { display: flex; align-items: center; gap: 14px; }
.kardan-avatar {
	width: 48px; height: 48px; border-radius: 50%; background: var(--kardan-blue); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex: 0 0 48px;
}
.kardan-profile-head h3 { margin: 0 0 4px; font-size: 16px; }

.kardan-booking-card { }
.kardan-booking-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kardan-tag { display: inline-block; background: #eef4ff; color: var(--kardan-blue); font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-right: 8px; }
.kardan-issue { font-size: 13.5px; color: var(--kardan-ink); background: var(--kardan-bg); padding: 10px 12px; border-radius: 9px; margin: 10px 0; }

.kardan-stage-badge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #eef4ff; color: var(--kardan-blue); }
.kardan-stage-pending { background: #fff7e6; color: #b54708; }
.kardan-stage-accepted { background: #eef4ff; color: #175cd6; }
.kardan-stage-in_progress { background: #fff0e6; color: #c4320a; }
.kardan-stage-testing { background: #f3e8ff; color: #6941c6; }
.kardan-stage-ready { background: #ecfdf3; color: #067647; }
.kardan-stage-delivered { background: #eafff2; color: #067647; }

.kardan-deposit-paid { color: #067647; font-weight: 700; font-size: 13.5px; margin-top: 8px; }

.kardan-timeline { margin-top: 14px; border-top: 1px dashed var(--kardan-line); padding-top: 10px; }
.kardan-timeline summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--kardan-blue); }
.kardan-timeline ul { list-style: none; margin: 10px 0 0; padding: 0; }
.kardan-timeline li { border-right: 3px solid var(--kardan-blue); padding: 6px 12px; margin-bottom: 10px; }
.kardan-log-stage { font-weight: 700; font-size: 13px; }
.kardan-log-date { font-size: 11.5px; color: var(--kardan-gray); margin-right: 10px; }
.kardan-log-note { font-size: 12.5px; color: var(--kardan-ink); margin: 4px 0 0; }

.kardan-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kardan-inline-form select, .kardan-inline-form input[type="text"], .kardan-inline-form input[type="number"] {
	padding: 8px 10px; border: 1px solid var(--kardan-line); border-radius: 8px; font-family: inherit; font-size: 13px;
}
.kardan-inline-form input[type="text"] { flex: 1; min-width: 160px; }
.kardan-filter-form { margin-bottom: 16px; font-size: 13px; }
.kardan-filter-form select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kardan-line); font-family: inherit; }

/* تقویم شمسی */
.kardan-jalali-popup {
	position: absolute; z-index: 9999; background: #fff; border: 1px solid var(--kardan-line);
	border-radius: 12px; box-shadow: 0 12px 28px rgba(16,24,40,.14); padding: 12px; width: 280px;
	font-family: inherit; direction: rtl;
}
.kardan-jalali-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.kardan-jalali-head button { background: var(--kardan-bg); border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; }
.kardan-jalali-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12.5px; }
.kardan-jalali-grid .kardan-dow { color: var(--kardan-gray); font-weight: 700; padding-bottom: 4px; }
.kardan-jalali-grid button {
	background: none; border: none; border-radius: 8px; padding: 8px 0; cursor: pointer; font-family: inherit; font-size: 12.5px;
}
.kardan-jalali-grid button:hover { background: var(--kardan-bg); }
.kardan-jalali-grid button.kardan-today { border: 1px solid var(--kardan-blue); }
.kardan-jalali-grid button.kardan-selected { background: var(--kardan-blue); color: #fff; }
.kardan-jalali-grid button:disabled { color: #ccc; cursor: not-allowed; }

.kardan-car-card { }
.kardan-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.kardan-photo-grid img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--kardan-line); }
.kardan-box summary { outline: none; }

@media (max-width: 640px) {
	.kardan-field-row { flex-direction: column; gap: 0; }
	.kardan-photo-grid { grid-template-columns: repeat(3, 1fr); }
}