/* ===== چون‌این — استایل ورود با کد پیامکی و پروفایل ===== */
/* پالت برند:
   #6b210f دیپ برند | #26678a آبی (دکمه‌ها) | #c28954 و #e8a276 اکسنت | #201e1e متن */
:root {
	--cn-primary: #26678a;       /* دکمه‌ها و لینک‌ها */
	--cn-primary-dark: #1d4f6b;  /* هاور دکمه */
	--cn-brand: #6b210f;         /* تیترها و اکسنت قوی */
	--cn-accent: #c28954;        /* خط اکسنت */
	--cn-accent-light: #e8a276;
	--cn-ink: #201e1e;           /* متن اصلی */
	--cn-muted: #7a7370;
	--cn-border: #E7E2DE;
	--cn-soft: #f5efe9;          /* پس‌زمینه‌ی نرم/حالت فعلی */
	--cn-soft-line: #ecd9c8;
}

.chonin-otp-box,
.chonin-account {
	direction: rtl;
	font-family: 'Dana', 'Vazirmatn', system-ui, -apple-system, sans-serif;
	max-width: 420px;
	margin: 2.5rem auto;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(32, 30, 30, 0.07);
	padding: 1.75rem 1.5rem;
	color: var(--cn-ink);
}

.chonin-account {
	max-width: 640px;
}

.otp-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--cn-brand);
	margin: 0 0 0.4rem;
	text-align: center;
}

.otp-sub {
	font-size: 0.92rem;
	color: var(--cn-muted);
	margin: 0 0 1.25rem;
	text-align: center;
	line-height: 1.7;
}

.chonin-otp-box label {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--cn-ink);
	margin: 0.85rem 0 0.4rem;
}

.chonin-otp-box input[type="text"],
.chonin-otp-box input[type="tel"],
.chonin-otp-box textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.85rem;
	border: 1.5px solid var(--cn-border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	background: #FAF8F6;
	color: var(--cn-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.chonin-otp-box input:focus,
.chonin-otp-box textarea:focus {
	outline: none;
	border-color: var(--cn-primary);
	background: #fff;
}

#otp-code {
	text-align: center;
	letter-spacing: 0.4em;
	font-size: 1.3rem;
	font-weight: 700;
}

.otp-row {
	display: flex;
	gap: 0.75rem;
}
.otp-row > div { flex: 1; }

.otp-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.1rem;
	padding: 0.8rem 1rem;
	background: var(--cn-primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.otp-btn:hover { background: var(--cn-primary-dark); }
.otp-btn:disabled { opacity: 0.6; cursor: default; }

.otp-btn-sm {
	display: inline-block;
	width: auto;
	margin-top: 0;
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	background: var(--cn-brand);
}
.otp-btn-sm:hover { background: #531a0c; }

.otp-link {
	display: inline-block;
	background: none;
	border: none;
	color: var(--cn-primary);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	padding: 0.3rem 0;
}
.otp-link:hover { text-decoration: underline; }
.otp-link:disabled { color: #B7AFAB; cursor: default; text-decoration: none; }

.otp-resend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.85rem;
}
.otp-timer { font-size: 0.82rem; color: var(--cn-muted); }
.otp-change { margin-top: 0.5rem; color: var(--cn-muted); }

.otp-msg {
	display: none;
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	font-size: 0.88rem;
	line-height: 1.6;
}
.otp-msg.show { display: block; }
.otp-msg.error { background: #FBEFEC; color: #8a2a17; border: 1px solid #f0cabf; }
.otp-msg.success { background: var(--cn-soft); color: var(--cn-brand); border: 1px solid var(--cn-soft-line); }
.otp-msg.info { background: #F1F0EF; color: #44403e; border: 1px solid var(--cn-border); }

.otp-already { text-align: center; color: var(--cn-brand); font-weight: 700; }

/* ===== پروفایل / حساب کاربری ===== */
.ca-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--cn-border);
	margin-bottom: 1.25rem;
}
.ca-avatar {
	width: 52px;
	height: 52px;
	border-radius: 9999px;
	background: var(--cn-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	flex-shrink: 0;
}
.ca-name { font-weight: 800; font-size: 1.1rem; color: var(--cn-brand); }
.ca-mobile { font-size: 0.85rem; color: var(--cn-muted); direction: ltr; text-align: right; }

.ca-section { margin-bottom: 1.5rem; }
.ca-title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--cn-ink);
	margin: 0 0 0.75rem;
	padding-right: 0.6rem;
	border-right: 3px solid var(--cn-accent);
}
.ca-empty { color: var(--cn-muted); font-size: 0.9rem; }

.ca-orders { display: flex; flex-direction: column; gap: 0.75rem; }

.ca-order {
	border: 1px solid var(--cn-border);
	border-radius: 12px;
	padding: 0.9rem 1rem;
	background: #fff;
}
.ca-order.is-current {
	border-color: var(--cn-primary);
	background: var(--cn-soft);
}
.ca-order-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.ca-order-no { font-weight: 800; color: var(--cn-primary); }
.ca-order-status {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	background: #F1F0EF;
	color: #44403e;
}
.ca-order-status.status-processing { background: #FBEAD6; color: #8a4b12; }
.ca-order-status.status-completed { background: #E3EEF3; color: #1d4f6b; }
.ca-order-status.status-pending,
.ca-order-status.status-on-hold { background: #FBEFEC; color: #8a2a17; }

.ca-order-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--cn-muted);
	margin-bottom: 0.5rem;
}
.ca-order-total { font-weight: 700; color: var(--cn-ink); }
.ca-order-items { font-size: 0.85rem; color: #4b4542; line-height: 1.6; margin-bottom: 0.6rem; }
.ca-order-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: flex-end;
}

.ca-actions {
	display: flex;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid var(--cn-border);
}

@media (max-width: 480px) {
	.chonin-otp-box, .chonin-account { margin: 1.25rem; padding: 1.25rem 1.1rem; }
}

/* فیلدهای اجباری/اختیاری و نقشه در فرم تکمیل مشخصات */
.otp-req { color: var(--cn-brand); }
.otp-opt { color: var(--cn-muted); font-weight: 400; font-size: 0.8rem; }

.otp-map {
	width: 100%;
	height: 220px;
	border: 1.5px solid var(--cn-border);
	border-radius: 12px;
	overflow: hidden;
	margin-top: 0.4rem;
	background: #f0ece8;
}
.otp-locate {
	margin-top: 0.5rem;
}
/* اطمینان از نمایش درست کنترل‌های Leaflet در RTL */
.otp-map .leaflet-control-attribution { font-size: 0.65rem; }