/* ==========================================================================
   PLANQ Warranty Manager - ستايل الواجهة العامة + تبويبات "حسابي"

   الملف ده هو الستايل الوحيد لكل الشاشات اللي العميل بيشوفها:
   الشورت كودات الستة (تفعيل، فحص، طلب خدمة، الإصلاحات، مراكز الصيانة، قطع الغيار)
   وتبويبات حساب WooCommerce التلاتة (ضماناتي، مطالباتي، خدماتي).

   الترتيب: طبقة المتغيرات (tokens) الأول، وبعدها المكوّنات المشتركة، وبعدها الأجزاء
   الخاصة بكل شاشة. أي شاشة جديدة المفروض تتبني من المكوّنات المشتركة مش بستايل خاص
   بيها - ده اللي بيخلي الشاشات كلها تبان نظام واحد مش صفحات اتعملت في أوقات مختلفة.

   ملاحظة عن الاتجاه: الموقع RTL، فكل المسافات والحدود الجانبية مكتوبة بالخصائص
   المنطقية (inline-start / inline-end) مش left / right. كده نفس الملف يشتغل صح لو
   الصفحة اتحوّلت LTR (نسخة إنجليزية من الموقع) من غير ملف منفصل.
   ========================================================================== */

:root {
	/* --- هوية PLANQ ---
	   اللون الأساسي بيتغيّر من السطر ده بس: كل الأزرار والروابط والتركيز والعناوين
	   بتقرأ منه. لو الهوية اتغيّرت، --planq-brand و--planq-brand-strong كفاية. */
	--planq-brand: #d31e28;
	--planq-brand-strong: #a5141c;
	--planq-brand-dark: #7a0f16;
	--planq-brand-tint: #fef4f4;
	--planq-brand-tint-strong: #fde3e4;
	--planq-brand-ring: rgba(211, 30, 40, 0.18);

	/* --- النصوص --- */
	--planq-ink: #12161c;
	--planq-ink-soft: #4a5361;
	--planq-ink-muted: #78818f;
	--planq-ink-faint: #a4abb6;

	/* --- الأسطح والحدود --- */
	--planq-surface: #ffffff;
	--planq-surface-alt: #f7f8fa;
	--planq-surface-sunken: #f1f3f6;
	--planq-border: #e4e7ec;
	--planq-border-strong: #d0d5dd;

	/* --- الحالات ---
	   الأحمر الدلالي (خطأ) أغمق ومطفي عن أحمر الهوية عن قصد: الهوية أحمر، ولو رسالة
	   الخطأ بنفس اللون بالظبط بتبان كأنها عنصر تزييني من التصميم. وكمان كل تنبيه شايل
	   أيقونة، فالمعنى مش متوقف على اللون لوحده (مهم لضعاف تمييز الألوان). */
	--planq-ok: #0d7a45;
	--planq-ok-tint: #e9f7ef;
	--planq-ok-border: #b6e3c8;

	--planq-danger: #9f1811;
	--planq-danger-tint: #fdf0ee;
	--planq-danger-border: #f2c9c3;

	--planq-warn: #8a5a00;
	--planq-warn-tint: #fff8e8;
	--planq-warn-border: #f2dda2;

	--planq-info: #1b4f7d;
	--planq-info-tint: #ecf3fa;
	--planq-info-border: #c3dbf0;

	/* --- الشكل --- */
	--planq-radius-sm: 6px;
	--planq-radius: 10px;
	--planq-radius-lg: 16px;
	--planq-radius-pill: 999px;

	--planq-shadow-sm: 0 1px 2px rgba(18, 22, 28, 0.05);
	--planq-shadow: 0 2px 8px rgba(18, 22, 28, 0.06);
	--planq-shadow-lg: 0 12px 32px rgba(18, 22, 28, 0.1);

	--planq-transition: 0.16s ease;

	/* عرض الحاوية. الفورمات ضيقة (عمود واحد أسهل في القراية والتعبئة)، وشاشات القوائم
	   بتوسّع نفسها بـ .planq-wm-wide. */
	--planq-shell: 620px;
	--planq-shell-wide: 1160px;
}

/* ==========================================================================
   1. الحاوية والأساسيات
   ========================================================================== */

.planq-wm-public {
	max-width: var(--planq-shell);
	margin: 28px auto;
	color: var(--planq-ink);
	font-family: inherit;
	line-height: 1.65;
	text-align: start;
}

.planq-wm-public *,
.planq-wm-public *::before,
.planq-wm-public *::after {
	box-sizing: border-box;
}

/* شاشات القوائم (قطع الغيار، مراكز الصيانة، الإصلاحات): شبكة كروت محتاجة عرض الصفحة.
   .planq-parts-catalog مكتوب جنبه للتوافق مع النسخة القديمة من الكتالوج. */
.planq-wm-public.planq-wm-wide,
.planq-wm-public.planq-parts-catalog {
	max-width: var(--planq-shell-wide);
}

/* بديل .screen-reader-text: الكلاس ده من ووردبريس/ووكومرس ومش مضمون إنه محمّل في كل
   قالب، فالنص كان بيظهر مكشوف على الصفحة في بعض القوالب. */
.planq-wm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ==========================================================================
   2. رأس الشاشة (عنوان + سطر توضيحي)
   ========================================================================== */

.planq-wm-head {
	margin-bottom: 20px;
}

.planq-wm-head h1,
.planq-wm-head h2 {
	margin: 0 0 6px;
	color: var(--planq-ink);
	font-size: 1.7em;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* شريط الهوية تحت العنوان: عنصر بصري بسيط بيربط الشاشات الستة ببعضها. */
.planq-wm-head h1::after,
.planq-wm-head h2::after {
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 10px;
	border-radius: var(--planq-radius-pill);
	background: var(--planq-brand);
	content: "";
}

.planq-wm-head-sub {
	margin: 12px 0 0;
	color: var(--planq-ink-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* عدّاد النتايج جنب العنوان. */
.planq-wm-head-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	color: var(--planq-ink-soft);
	font-size: 14px;
}

.planq-wm-head-count strong {
	color: var(--planq-ink);
	font-weight: 700;
}

/* ==========================================================================
   3. اللوح (Panel) - الحاوية البيضاء اللي كل محتوى بيقعد جواها
   ========================================================================== */

.planq-wm-panel {
	padding: 26px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius-lg);
	box-shadow: var(--planq-shadow);
}

.planq-wm-panel + .planq-wm-panel {
	margin-top: 18px;
}

/* ==========================================================================
   4. الفورمات
   ========================================================================== */

/* عدّاد الخطوات: أرقام الأقسام (١، ٢، ٣) بتتولّد من CSS مش مكتوبة في الـ PHP - كده
   إضافة أو حذف قسم ما بتسيبش ترقيم غلط ورا. */
.planq-wm-form {
	counter-reset: planq-step;
}

.planq-wm-form-section {
	counter-increment: planq-step;
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid var(--planq-border);
}

.planq-wm-form-section:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.planq-wm-form-section > h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	border: none;
	color: var(--planq-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.planq-wm-form-section > h3::before {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--planq-radius-pill);
	background: var(--planq-brand-tint-strong);
	color: var(--planq-brand-dark);
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	content: counter(planq-step);
}

/*
 * قاعدة توافق: النسخة القديمة من الفورمات كانت بتحط <h3> مباشرة جوه <form> بعد الحقول
 * المخفية (nonce / action / redirect_to)، وكانت محتاجة الحيلة دي عشان أول عنوان ما
 * ياخدش مسافة فوقه. الفورمات الحالية بقت بتلف كل قسم في .planq-wm-form-section فالحيلة
 * مش مطلوبة، لكن سايبينها عشان أي قالب فرعي (child theme) نسخ الـ markup القديم يفضل
 * شكله سليم.
 */
.planq-wm-public form > input[type="hidden"] + h3 {
	margin-top: 0;
}

.planq-wm-field {
	margin-bottom: 16px;
}

.planq-wm-field:last-child {
	margin-bottom: 0;
}

/* صفّين جنب بعض على الشاشات الواسعة (الدولة/المدينة مثلاً). */
.planq-wm-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 16px;
}

.planq-wm-public label,
.planq-wm-label-text {
	display: block;
	margin: 0 0 7px;
	color: var(--planq-ink);
	font-size: 14px;
	font-weight: 600;
}

/* النجمة بلون الهوية وبعنوان وصفي: قارئ الشاشة بيقرا "مطلوب" بدل ما يقرا نجمة. */
.planq-wm-req {
	color: var(--planq-brand);
	font-weight: 700;
}

.planq-wm-optional {
	color: var(--planq-ink-faint);
	font-size: 12px;
	font-weight: 400;
}

.planq-wm-public input[type="text"],
.planq-wm-public input[type="tel"],
.planq-wm-public input[type="email"],
.planq-wm-public input[type="date"],
.planq-wm-public input[type="search"],
.planq-wm-public input[type="file"],
.planq-wm-public textarea,
.planq-wm-public select {
	display: block;
	width: 100%;
	padding: 11px 14px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border-strong);
	border-radius: var(--planq-radius-sm);
	color: var(--planq-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color var(--planq-transition), box-shadow var(--planq-transition);
	appearance: none;
}

.planq-wm-public input[type="text"]:hover,
.planq-wm-public input[type="tel"]:hover,
.planq-wm-public input[type="email"]:hover,
.planq-wm-public input[type="date"]:hover,
.planq-wm-public input[type="search"]:hover,
.planq-wm-public textarea:hover,
.planq-wm-public select:hover {
	border-color: var(--planq-ink-faint);
}

.planq-wm-public input[type="text"]:focus,
.planq-wm-public input[type="tel"]:focus,
.planq-wm-public input[type="email"]:focus,
.planq-wm-public input[type="date"]:focus,
.planq-wm-public input[type="search"]:focus,
.planq-wm-public input[type="file"]:focus,
.planq-wm-public textarea:focus,
.planq-wm-public select:focus {
	border-color: var(--planq-brand);
	box-shadow: 0 0 0 3px var(--planq-brand-ring);
	outline: none;
}

.planq-wm-public input::placeholder,
.planq-wm-public textarea::placeholder {
	color: var(--planq-ink-faint);
}

.planq-wm-public textarea {
	min-height: 120px;
	line-height: 1.75;
	resize: vertical;
}

/* السهم مرسوم في الخلفية لأن appearance: none بيشيل السهم الأصلي. مكانه بيتحدد
   بـ inline-end فبيقلب لوحده في RTL. */
.planq-wm-public select {
	padding-inline-end: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378818f' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* سهم القائمة هو الحاجة الوحيدة اللي مابتقلبش لوحدها: background-position مالهاش نسخة
   منطقية (مفيش inline-start فيها)، فمحتاجة قاعدة صريحة للإنجليزي.

   بالسمة [dir="ltr"] مش بـ :dir(ltr): الـ pseudo-class دي مش مدعومة في سفاري قبل 16.4،
   وكانت بتخلي السهم في الناحية الغلط على أجهزة آيفون قديمة. والسمة نفسها بتتكتب على
   العنصر الأب من Localization::dir_attribute() فالمطابقة مضمونة، وبنغطي كمان حالة إن
   القالب نفسه هو اللي محدد الاتجاه على <html>. */
[dir="ltr"] .planq-wm-public select,
.planq-wm-public[dir="ltr"] select {
	background-position: right 14px center;
}

/* حقل الملف: بيبان كمنطقة رفع مش كزرار متصفح خام. */
.planq-wm-public input[type="file"] {
	padding: 10px 12px;
	background: var(--planq-surface-alt);
	border-style: dashed;
	color: var(--planq-ink-soft);
	font-size: 14px;
	cursor: pointer;
}

.planq-wm-public input[type="file"]::file-selector-button {
	margin-inline-end: 12px;
	padding: 7px 14px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border-strong);
	border-radius: var(--planq-radius-sm);
	color: var(--planq-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--planq-transition), color var(--planq-transition);
}

.planq-wm-public input[type="file"]::file-selector-button:hover {
	border-color: var(--planq-brand);
	color: var(--planq-brand);
}

.planq-wm-hint {
	margin: 7px 0 0;
	color: var(--planq-ink-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   5. الأزرار
   ========================================================================== */

.planq-wm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--planq-brand);
	border: 1px solid var(--planq-brand);
	border-radius: var(--planq-radius-sm);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--planq-transition), border-color var(--planq-transition),
		box-shadow var(--planq-transition), transform var(--planq-transition);
}

.planq-wm-btn:hover,
.planq-wm-btn:focus {
	background: var(--planq-brand-strong);
	border-color: var(--planq-brand-strong);
	color: #fff;
	text-decoration: none;
}

.planq-wm-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--planq-brand-ring);
	outline: none;
}

.planq-wm-btn:active {
	transform: translateY(1px);
}

/* زرار إرسال الفورم: عرض كامل - هو الإجراء الوحيد في الشاشة، وتصغيره بيخليه يتوه
   تحت عمود حقول طويل. */
.planq-wm-btn-block {
	width: 100%;
	margin-top: 24px;
	padding: 14px 24px;
	font-size: 16px;
}

.planq-wm-btn-ghost {
	background: transparent;
	border-color: var(--planq-border-strong);
	color: var(--planq-ink-soft);
}

.planq-wm-btn-ghost:hover,
.planq-wm-btn-ghost:focus {
	background: var(--planq-brand-tint);
	border-color: var(--planq-brand);
	color: var(--planq-brand-dark);
}

.planq-wm-link {
	color: var(--planq-brand);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.planq-wm-link:hover,
.planq-wm-link:focus {
	color: var(--planq-brand-strong);
	text-decoration: underline;
}

/* ==========================================================================
   6. التنبيهات
   ========================================================================== */

.planq-wm-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid;
	border-inline-start-width: 4px;
	border-radius: var(--planq-radius-sm);
	font-size: 14px;
	line-height: 1.7;
}

.planq-wm-alert:last-child {
	margin-bottom: 0;
}

/* الأيقونة نص مش صورة: مفيش طلب شبكة إضافي، وبتورّث حجم الخط فبتفضل متناسبة. */
.planq-wm-alert::before {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: var(--planq-radius-pill);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.planq-wm-alert-success {
	background: var(--planq-ok-tint);
	border-color: var(--planq-ok-border);
	border-inline-start-color: var(--planq-ok);
	color: var(--planq-ok);
}

.planq-wm-alert-success::before {
	background: var(--planq-ok);
	content: "✓";
}

.planq-wm-alert-error {
	background: var(--planq-danger-tint);
	border-color: var(--planq-danger-border);
	border-inline-start-color: var(--planq-danger);
	color: var(--planq-danger);
}

.planq-wm-alert-error::before {
	background: var(--planq-danger);
	content: "!";
}

.planq-wm-alert-warning {
	background: var(--planq-warn-tint);
	border-color: var(--planq-warn-border);
	border-inline-start-color: var(--planq-warn);
	color: var(--planq-warn);
}

.planq-wm-alert-warning::before {
	background: var(--planq-warn);
	content: "!";
}

.planq-wm-alert-info {
	background: var(--planq-info-tint);
	border-color: var(--planq-info-border);
	border-inline-start-color: var(--planq-info);
	color: var(--planq-info);
}

.planq-wm-alert-info::before {
	background: var(--planq-info);
	content: "i";
}

/* لوح النجاح الكبير: بديل الفورم بعد الإرسال الناجح. */
.planq-wm-done {
	padding: 34px 26px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-ok-border);
	border-radius: var(--planq-radius-lg);
	box-shadow: var(--planq-shadow);
	text-align: center;
}

.planq-wm-done-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: var(--planq-radius-pill);
	background: var(--planq-ok-tint);
	color: var(--planq-ok);
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
}

.planq-wm-done h3 {
	margin: 0 0 8px;
	color: var(--planq-ink);
	font-size: 18px;
	font-weight: 700;
}

.planq-wm-done p {
	margin: 0;
	color: var(--planq-ink-soft);
	font-size: 15px;
	line-height: 1.75;
}

.planq-wm-done-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

/* ==========================================================================
   7. شريط البحث
   ========================================================================== */

.planq-wm-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 22px;
	padding: 18px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius-lg);
	box-shadow: var(--planq-shadow-sm);
}

.planq-wm-search-field {
	flex: 1 1 260px;
	min-width: 0;
}

.planq-wm-search .planq-wm-btn {
	flex: 0 0 auto;
	padding-block: 11px;
}

.planq-wm-search-reset {
	flex: 0 0 auto;
	align-self: center;
	color: var(--planq-ink-muted);
	font-size: 13px;
	text-decoration: underline;
}

.planq-wm-search-reset:hover {
	color: var(--planq-brand);
}

/* ==========================================================================
   8. الشرايط (chips) - حالة الضمان / المطالبة / الإصلاح / التوفّر
   ========================================================================== */

.planq-wm-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	background: var(--planq-surface-sunken);
	border-radius: var(--planq-radius-pill);
	color: var(--planq-ink-soft);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* حالات الضمان. الأخضر للتغطية القايمة، والأحمر للي خلص أو اتلغى، والأصفر للي محتاج
   متابعة أو مؤقت (المراجعة والاستبدال). transferred أخضر لأن التغطية لسه سارية. */
.planq-wm-chip-active,
.planq-wm-chip-transferred {
	background: var(--planq-ok-tint);
	color: var(--planq-ok);
}

.planq-wm-chip-expired,
.planq-wm-chip-cancelled,
.planq-wm-chip-rejected {
	background: var(--planq-danger-tint);
	color: var(--planq-danger);
}

.planq-wm-chip-pending,
.planq-wm-chip-replacement {
	background: var(--planq-warn-tint);
	color: var(--planq-warn);
}

/* حالات المطالبة. المفتوح والجاري أزرق (شغل ماشي)، والمكتمل أخضر، والمرفوض والملغي
   أحمر، وبانتظار القطع أصفر (متوقف على حاجة برّه إيدينا). */
.planq-wm-chip-claim-opened,
.planq-wm-chip-claim-assigned,
.planq-wm-chip-claim-repairing {
	background: var(--planq-info-tint);
	color: var(--planq-info);
}

.planq-wm-chip-claim-waiting_parts {
	background: var(--planq-warn-tint);
	color: var(--planq-warn);
}

.planq-wm-chip-claim-completed {
	background: var(--planq-ok-tint);
	color: var(--planq-ok);
}

.planq-wm-chip-claim-rejected,
.planq-wm-chip-claim-cancelled {
	background: var(--planq-danger-tint);
	color: var(--planq-danger);
}

/* نتايج الإصلاح. */
.planq-wm-chip-repair-pending {
	background: var(--planq-info-tint);
	color: var(--planq-info);
}

.planq-wm-chip-repair-repaired,
.planq-wm-chip-repair-under_warranty {
	background: var(--planq-ok-tint);
	color: var(--planq-ok);
}

.planq-wm-chip-repair-not_repaired,
.planq-wm-chip-repair-customer_cancelled {
	background: var(--planq-danger-tint);
	color: var(--planq-danger);
}

/* رقم تسلسلي / رقم مطالبة: خط أحادي المسافة عشان الأرقام والحروف المتشابهة تتفرق. */
.planq-wm-code {
	display: inline-block;
	padding: 2px 8px;
	background: var(--planq-surface-sunken);
	border-radius: var(--planq-radius-sm);
	color: var(--planq-ink-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	word-break: break-all;
}

.planq-wm-muted {
	color: var(--planq-ink-faint);
	font-weight: 400;
}

/* ==========================================================================
   9. شبكة البيانات (تفاصيل النتيجة)
   ========================================================================== */

.planq-wm-data {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--planq-border);
	border-radius: var(--planq-radius);
}

.planq-wm-data > div {
	min-width: 0;
	padding: 14px 16px;
	background: var(--planq-surface);
}

.planq-wm-data dt {
	margin: 0 0 4px;
	color: var(--planq-ink-muted);
	font-size: 12px;
	font-weight: 500;
}

.planq-wm-data dd {
	margin: 0;
	color: var(--planq-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	word-break: break-word;
}

.planq-wm-data-wide {
	grid-column: 1 / -1;
}

/* ==========================================================================
   10. الحالة الفاضية
   ========================================================================== */

.planq-wm-empty {
	margin: 0;
	padding: 40px 24px;
	background: var(--planq-surface-alt);
	border: 1px dashed var(--planq-border-strong);
	border-radius: var(--planq-radius-lg);
	text-align: center;
}

.planq-wm-empty-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	border-radius: var(--planq-radius-pill);
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	color: var(--planq-ink-faint);
	font-size: 22px;
	line-height: 1;
}

.planq-wm-empty h3 {
	margin: 0 0 6px;
	color: var(--planq-ink);
	font-size: 16px;
	font-weight: 700;
}

.planq-wm-empty p {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--planq-ink-muted);
	font-size: 14px;
	line-height: 1.75;
}

/* ==========================================================================
   11. الترقيم
   ========================================================================== */

.planq-wm-pagination,
.planq-parts-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.planq-wm-pagination .page-numbers,
.planq-parts-pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 9px 12px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border-strong);
	border-radius: var(--planq-radius-sm);
	color: var(--planq-ink-soft);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: border-color var(--planq-transition), color var(--planq-transition);
}

.planq-wm-pagination .page-numbers:hover,
.planq-parts-pagination .page-numbers:hover {
	border-color: var(--planq-brand);
	color: var(--planq-brand);
}

.planq-wm-pagination .page-numbers.current,
.planq-parts-pagination .page-numbers.current {
	background: var(--planq-brand);
	border-color: var(--planq-brand);
	color: #fff;
}

.planq-wm-pagination .page-numbers.dots,
.planq-parts-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* ==========================================================================
   12. كارت القائمة المشترك
   شاشات الإصلاحات ومراكز الصيانة وقطع الغيار كلها بتستخدم نفس الكارت الأساسي.
   ========================================================================== */

.planq-wm-grid {
	display: grid;
	gap: 16px;
}

/* auto-fill مش auto-fit: مع عنصر واحد بس، auto-fit بيمدّه على عرض الصفحة كله وشكله
   بيبقى غريب. auto-fill بيحافظ على عرض الكارت الطبيعي. */
.planq-wm-grid-cards {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.planq-wm-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius);
	box-shadow: var(--planq-shadow-sm);
	transition: border-color var(--planq-transition), box-shadow var(--planq-transition);
}

.planq-wm-card:hover {
	border-color: var(--planq-border-strong);
	box-shadow: var(--planq-shadow);
}

.planq-wm-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.planq-wm-card-head h3 {
	margin: 0 0 5px;
	color: var(--planq-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.planq-wm-card-title {
	min-width: 0;
}

.planq-wm-card-sub {
	display: block;
	color: var(--planq-ink-muted);
	font-size: 13px;
}

/* قائمة تفاصيل داخل الكارت (تليفون، عنوان، تاريخ...). */
.planq-wm-card-facts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--planq-border);
	list-style: none;
}

.planq-wm-card-facts li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	color: var(--planq-ink-soft);
	font-size: 14px;
	line-height: 1.6;
}

/* الأيقونة النصية بلون خفيف: بتساعد المسح السريع بالعين من غير ملف أيقونات. */
.planq-wm-card-facts li::before {
	flex: 0 0 auto;
	width: 18px;
	color: var(--planq-brand);
	font-size: 13px;
	text-align: center;
	content: attr(data-icon);
}

.planq-wm-card-facts a {
	color: var(--planq-ink-soft);
	text-decoration: none;
}

.planq-wm-card-facts a:hover {
	color: var(--planq-brand);
	text-decoration: underline;
}

.planq-wm-card-foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--planq-border);
}

/* ==========================================================================
   13. كتالوج قطع الغيار - [planq_warranty_parts]
   أسماء الكلاسات محفوظة زي ما هي عشان أي تخصيص خارجي على الكتالوج ما يتكسرش.
   ========================================================================== */

.planq-parts-head {
	margin-bottom: 20px;
}

.planq-parts-head h2 {
	margin: 0 0 6px;
	font-size: 1.7em;
	font-weight: 800;
	line-height: 1.25;
}

.planq-parts-head h2::after {
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 10px;
	border-radius: var(--planq-radius-pill);
	background: var(--planq-brand);
	content: "";
}

.planq-parts-count {
	margin: 12px 0 0;
	color: var(--planq-ink-muted);
	font-size: 14px;
}

.planq-parts-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 18px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius-lg);
	box-shadow: var(--planq-shadow-sm);
}

.planq-parts-search input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
}

.planq-parts-search .planq-wm-btn {
	flex: 0 0 auto;
	padding-block: 11px;
}

.planq-parts-reset {
	color: var(--planq-ink-muted);
	font-size: 13px;
	text-decoration: underline;
}

.planq-parts-reset:hover {
	color: var(--planq-brand);
}

.planq-parts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.planq-part-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius);
	box-shadow: var(--planq-shadow-sm);
	transition: border-color var(--planq-transition), box-shadow var(--planq-transition);
}

.planq-part-card:hover {
	border-color: var(--planq-border-strong);
	box-shadow: var(--planq-shadow);
}

.planq-part-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.planq-part-number {
	margin: 0;
	color: var(--planq-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.planq-part-stock {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: var(--planq-radius-pill);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* نقطة قبل النص: حالة التوفّر ما تكونش متوقفة على اللون لوحده. */
.planq-part-stock::before {
	width: 7px;
	height: 7px;
	border-radius: var(--planq-radius-pill);
	background: currentColor;
	content: "";
}

.planq-part-stock.is-in-stock {
	background: var(--planq-ok-tint);
	color: var(--planq-ok);
}

.planq-part-stock.is-out-of-stock {
	background: var(--planq-danger-tint);
	color: var(--planq-danger);
}

.planq-part-desc {
	margin: 0;
	color: var(--planq-ink-soft);
	font-size: 14px;
	line-height: 1.7;
}

.planq-part-models {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--planq-border);
}

.planq-part-models-label {
	width: 100%;
	margin-bottom: 3px;
	color: var(--planq-ink-muted);
	font-size: 12px;
}

.planq-part-model {
	padding: 3px 10px;
	background: var(--planq-surface-sunken);
	border-radius: var(--planq-radius-pill);
	color: var(--planq-ink-soft);
	font-size: 12px;
}

.planq-part-model-more {
	background: transparent;
	border: 1px dashed var(--planq-border-strong);
	color: var(--planq-ink-muted);
}

.planq-parts-empty {
	margin: 0;
	padding: 40px 24px;
	background: var(--planq-surface-alt);
	border: 1px dashed var(--planq-border-strong);
	border-radius: var(--planq-radius-lg);
	color: var(--planq-ink-muted);
	text-align: center;
}

/* ==========================================================================
   14. تبويبات حساب العميل - ضماناتي / مطالباتي / خدماتي

   مفيش .planq-wm-public هنا عن قصد: المحتوى ده جوه قالب "حسابي" في WooCommerce،
   والعرض بيتحدد من القالب نفسه - أي max-width من عندنا بيحصر المحتوى في نص العمود.
   ========================================================================== */

.planq-wm-account {
	color: var(--planq-ink);
	font-family: inherit;
}

.planq-wm-account *,
.planq-wm-account *::before,
.planq-wm-account *::after {
	box-sizing: border-box;
}

.planq-wm-account-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--planq-border);
}

.planq-wm-account-head-text {
	flex: 1 1 260px;
	min-width: 0;
}

.planq-wm-account-head h2 {
	margin: 0 0 6px;
	color: var(--planq-ink);
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.25;
}

.planq-wm-account-subtitle {
	margin: 0;
	color: var(--planq-ink-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* زرار الإضافة: flex: 0 0 auto عشان ما يتمددش على عرض السطر لما العنوان يقصر. */
.planq-wm-account-action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	background: var(--planq-brand);
	border: 1px solid var(--planq-brand);
	border-radius: var(--planq-radius-sm);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--planq-transition), border-color var(--planq-transition);
}

.planq-wm-account-action:hover,
.planq-wm-account-action:focus {
	background: var(--planq-brand-strong);
	border-color: var(--planq-brand-strong);
	color: #fff;
	text-decoration: none;
}

.planq-wm-account-action span {
	font-size: 17px;
	line-height: 1;
}

.planq-wm-account-empty {
	padding: 40px 24px;
	background: var(--planq-surface-alt);
	border: 1px dashed var(--planq-border-strong);
	border-radius: var(--planq-radius-lg);
	text-align: center;
}

.planq-wm-account-empty p {
	margin: 0;
	color: var(--planq-ink-soft);
	font-size: 15px;
	line-height: 1.7;
}

.planq-wm-account-empty-hint {
	max-width: 54ch;
	margin: 10px auto 0 !important;
	color: var(--planq-ink-muted) !important;
	font-size: 13px !important;
}

.planq-wm-account-section + .planq-wm-account-section {
	margin-top: 34px;
}

.planq-wm-account-section-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	color: var(--planq-ink);
	font-size: 1.1em;
	font-weight: 700;
}

.planq-wm-count {
	display: inline-block;
	min-width: 24px;
	padding: 2px 9px;
	background: var(--planq-brand-tint-strong);
	border-radius: var(--planq-radius-pill);
	color: var(--planq-brand-dark);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.planq-wm-account-section-empty {
	margin: 0;
	padding: 20px;
	background: var(--planq-surface-alt);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius);
	color: var(--planq-ink-muted);
	font-size: 14px;
}

/* --- شبكة الأجهزة (ضماناتي) --- */
.planq-wm-device-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.planq-wm-device-card,
.planq-wm-request-card {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 20px;
	background: var(--planq-surface);
	border: 1px solid var(--planq-border);
	border-radius: var(--planq-radius);
	box-shadow: var(--planq-shadow-sm);
	transition: border-color var(--planq-transition), box-shadow var(--planq-transition);
}

.planq-wm-device-card:hover,
.planq-wm-request-card:hover {
	border-color: var(--planq-border-strong);
	box-shadow: var(--planq-shadow);
}

.planq-wm-device-head,
.planq-wm-request-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.planq-wm-device-title,
.planq-wm-request-title {
	min-width: 0;
}

.planq-wm-device-head h3,
.planq-wm-request-head h3 {
	margin: 0 0 5px;
	color: var(--planq-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.planq-wm-device-serial,
.planq-wm-request-number {
	display: inline-block;
	color: var(--planq-ink-muted);
	font-size: 12.5px;
	word-break: break-all;
}

.planq-wm-device-serial {
	padding: 2px 8px;
	background: var(--planq-surface-sunken);
	border-radius: var(--planq-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.02em;
}

/* object-fit: contain مش cover: صور الأجهزة بتبقى على خلفية بيضا وبنسب مختلفة،
   و cover بيقص الجهاز نفسه من الجناب. */
.planq-wm-device-image {
	width: 100%;
	height: 140px;
	background: var(--planq-surface-alt);
	border-radius: var(--planq-radius-sm);
	object-fit: contain;
}

/* --- تفاصيل الكارت --- */
.planq-wm-device-meta,
.planq-wm-request-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 13px;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--planq-border);
}

.planq-wm-device-meta div,
.planq-wm-request-meta div {
	min-width: 0;
}

.planq-wm-request-meta-wide {
	grid-column: 1 / -1;
}

.planq-wm-device-meta dt,
.planq-wm-request-meta dt {
	margin: 0 0 4px;
	color: var(--planq-ink-muted);
	font-size: 12px;
	font-weight: 500;
}

.planq-wm-device-meta dd,
.planq-wm-request-meta dd {
	margin: 0;
	color: var(--planq-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	word-break: break-word;
}

.planq-wm-device-meta dd code,
.planq-wm-request-meta dd code {
	padding: 2px 7px;
	background: var(--planq-surface-sunken);
	border-radius: var(--planq-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 400;
}

.planq-wm-device-note,
.planq-wm-request-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 12px 14px;
	background: var(--planq-warn-tint);
	border-inline-start: 3px solid var(--planq-warn-border);
	border-radius: var(--planq-radius-sm);
	color: var(--planq-warn);
	font-size: 13px;
	line-height: 1.7;
}

.planq-wm-device-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--planq-border);
}

.planq-wm-account-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--planq-brand);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.planq-wm-account-link:hover,
.planq-wm-account-link:focus {
	color: var(--planq-brand-strong);
	text-decoration: underline;
}

/* --- قائمة الطلبات والخدمات --- */
.planq-wm-request-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* المغلق بيبقى أهدى بشريط رمادي على جنبه بدل شفافية: تخفيت الكارت كله بـ opacity
   بيخلي النص نفسه صعب القراية، وهو سجل العميل بيرجع له فعلاً. */
.planq-wm-request-card.is-closed {
	background: var(--planq-surface-alt);
	border-inline-start: 3px solid var(--planq-border-strong);
}

.planq-wm-request-desc {
	margin: 0;
	color: var(--planq-ink-soft);
	font-size: 14px;
	line-height: 1.75;
}

/* ==========================================================================
   15. الشاشات الصغيرة
   ========================================================================== */

@media screen and (max-width: 640px) {
	.planq-wm-public {
		margin: 18px auto;
	}

	.planq-wm-panel {
		padding: 20px 16px;
		border-radius: var(--planq-radius);
	}

	.planq-wm-search {
		padding: 14px;
	}

	.planq-wm-search .planq-wm-btn,
	.planq-parts-search .planq-wm-btn {
		flex: 1 1 auto;
	}

	.planq-wm-grid-cards,
	.planq-parts-grid,
	.planq-wm-device-grid {
		grid-template-columns: 1fr;
	}

	.planq-wm-account-action {
		flex: 1 1 auto;
		justify-content: center;
	}

	.planq-wm-card-head,
	.planq-wm-device-head,
	.planq-wm-request-head {
		flex-direction: column;
	}

	.planq-wm-head h1,
	.planq-wm-head h2,
	.planq-parts-head h2 {
		font-size: 1.45em;
	}
}

/* الحركة بتتوقف لمن طالب بتقليلها من إعدادات نظامه. */
@media (prefers-reduced-motion: reduce) {
	.planq-wm-public *,
	.planq-wm-account * {
		transition: none !important;
	}

	.planq-wm-btn:active {
		transform: none;
	}
}