/* ============================================================================
   alkabos — قواعد مجموعة «الطلبات» (new-order · mass-order · orders)

   هذا الملف ملكُ هذه المجموعة وحدها؛ الغلاف يحمّل pages/*.css آليًّا بعد
   alkabos.css. لذلك كل قاعدة هنا مسنودة إلى حاوية صفحتها:
     • ‎.orders‎     — من $os_main_class ومن ‎div.orders‎ الداخلية (قالب orders.html)
     • ‎.new-order‎  — من $os_main_class ومن ‎div.new-order‎ الداخلية (قالب index.html)
     • ‎.massorder‎  — وسم الصفحة نفسها (قالب massorder.html)
   بلا هذا السند تتسرّب القاعدة إلى صفحات المجموعات الست الأخرى في هذا الثيم.

   الجزء الأكبر من شكل هذه الصفحات موجود سلفًا في ورقة القالب المرآة
   (‎assets/tpl/storage.perfectcdn.com/9ogllo/0c9xqm521s184lbn.css‎): ‎.massorder‎
   كاملة، و‎.main-boxes‎ و‎.support-boxs‎ و‎.filter-row‎ و‎.instructions‎ و‎.order‎
   و‎.pagination‎ و‎.modal‎. فلا يُعاد هنا تعريف شيء منها.
   ما يُنقل هنا فعلًا هو كتلة ‎<style>‎ الخاصّة بصفحة الطلبات في القالب
   (‎_tpl/member/orders.html‎): تصميم بطاقات الطلب كلّه لا وجود له في أي ورقة،
   فبدونه تُطبع الصفحة بلا شكل.
   ========================================================================== */

/* ---------------------------------------------------------------- المتغيّرات
   بادئة ‎--ord-‎ تجعلها آمنة على ‎:root‎: لا اسم منها يصطدم بمتغيّرات الورقة
   (‎--main-color‎ · ‎--text-main‎ · ‎--border-color‎ …) ولا بمتغيّرات مجموعة أخرى.
   القالب كان يقلبها بـ‎body.dark‎ و‎[data-theme=dark]‎، وهذا الثيم يقلب بـ
   ‎html.dark‎ وحدها — فهي وحدها المستعملة هنا. */
:root {
	--ord-bg-page: #f8fafc;
	--ord-card-bg: #ffffff;
	--ord-card-hover: #ffffff;
	--ord-inner-box: #f1f5f9;
	--ord-border: #e2e8f0;
	--ord-text-main: #0f172a;
	--ord-text-muted: #64748b;
	--ord-primary: #e50914;
	--ord-primary-glow: rgba(229, 9, 20, 0.2);
	--ord-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04);
}

html.dark {
	--ord-bg-page: #0a0b0e;
	--ord-card-bg: #12141a;
	--ord-card-hover: #161922;
	--ord-inner-box: #181c26;
	--ord-border: #202636;
	--ord-text-main: #f8fafc;
	--ord-text-muted: #8a94a6;
	--ord-primary: #e50914;
	--ord-primary-glow: rgba(229, 9, 20, 0.35);
	--ord-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================================
   (١) صفحة الطلبات — ‎.orders‎
   ========================================================================== */

.orders,
.orders > .orders {
	width: 100% !important;
	max-width: 100% !important;
}

/* النسخ من البطاقة يحتاج تحديد النصّ؛ القالب كان يفرضه بقاعدة ‎*‎ عامّة. */
.orders .order-box-card,
.orders .order-box-card * {
	-webkit-user-select: text;
	user-select: text;
}

/* --- شريط البحث العلوي --- */
.orders .orders-top-control-bar {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	width: 100%;
}

.orders .search-form-block {
	flex: 1;
	width: 100%;
	margin: 0 !important;
}

.orders .search-form-block .input-group {
	width: 100%;
	display: flex;
	align-items: center;
	background: var(--ord-card-bg);
	border: 1px solid var(--ord-border);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.orders .search-form-block .input-group:focus-within {
	border-color: var(--ord-primary);
	box-shadow: 0 0 12px var(--ord-primary-glow);
}

.orders .search-input-field {
	height: 44px;
	border: none !important;
	padding: 0 16px;
	font-size: 13.5px;
	background: transparent !important;
	color: var(--ord-text-main) !important;
	width: 100%;
	outline: none !important;
}

.orders .btn-search-trigger {
	height: 44px;
	border: none !important;
	background: transparent !important;
	color: var(--ord-text-muted) !important;
	padding: 0 16px;
	cursor: pointer;
	transition: color 0.15s ease;
}

.orders .btn-search-trigger:hover {
	color: var(--ord-primary) !important;
}

/* --- تبويبات الحالات --- */
.orders > .orders-filter-pills {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
	gap: 6px !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	list-style: none !important;
	width: 100% !important;
}

.orders > .orders-filter-pills > li > a {
	width: 100% !important;
	padding: 9px 8px !important;
	border-radius: 10px !important;
	text-align: center !important;
	white-space: nowrap !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	background: var(--ord-card-bg) !important;
	color: var(--ord-text-muted) !important;
	border: 1px solid var(--ord-border) !important;
	transition: all 0.2s ease;
}

.orders > .orders-filter-pills > li > a:hover {
	color: var(--ord-text-main) !important;
	border-color: rgba(125, 125, 125, 0.35) !important;
}

.orders > .orders-filter-pills > li.active > a {
	background: var(--ord-primary) !important;
	color: #ffffff !important;
	border-color: var(--ord-primary) !important;
	box-shadow: 0 4px 14px var(--ord-primary-glow) !important;
}

.orders .orders-filter-pills .pill-all i { color: #f43f5e; }
.orders .orders-filter-pills .pill-pending i { color: #ffab00; }
.orders .orders-filter-pills .pill-inprogress i { color: #2979ff; }
.orders .orders-filter-pills .pill-completed i { color: #00e676; }
.orders .orders-filter-pills .pill-partial i { color: #06b6d4; }
.orders .orders-filter-pills .pill-processing i { color: #a855f7; }
.orders .orders-filter-pills .pill-canceled i { color: #ff1744; }
/* «مسترجع» تبويبٌ عندنا ولا وجود له في القالب — يأخذ لون العائلة نفسها. */
.orders .orders-filter-pills .pill-refunded i { color: #94a3b8; }

.orders > .orders-filter-pills > li.active > a i {
	color: #ffffff !important;
}

/* --- شريط الإجراءات --- */
.orders .orders-bottom-action-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ord-card-bg);
	border: 1px solid var(--ord-border);
	padding: 10px 16px;
	border-radius: 14px;
	margin-bottom: 16px;
	box-shadow: var(--ord-shadow-card);
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.orders .orders-action-buttons-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.orders .bulk-select-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--ord-text-main) !important;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.orders .btn-action-custom {
	height: 38px;
	padding: 0 16px !important;
	border-radius: 10px !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	background: var(--ord-primary) !important;
	border: 1px solid var(--ord-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 3px 12px var(--ord-primary-glow);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s ease;
}

.orders .btn-action-custom.is-ghost {
	background: transparent !important;
	color: var(--ord-text-muted) !important;
	border-color: var(--ord-border) !important;
	box-shadow: none;
}

.orders .btn-action-custom:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
}

/* عدّاد التحديد: القالب يعرض رقمًا في حبّة، والسكربت يكتب جملة كاملة —
   فالحبّة للرقم والجملة بجانبها. */
.orders .selected-orders-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 50px;
	background: #ffffff;
	color: var(--ord-primary);
	font-size: 11px;
	font-weight: 800;
}

.orders .selection-count {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ord-text-muted);
}

.orders .selection-count strong { color: var(--ord-text-main); }

/* --- شبكة بطاقات الطلبات --- */
.orders .orders-cards-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
	gap: 14px !important;
	margin: 8px 0 24px 0 !important;
	width: 100% !important;
}

.orders .order-box-card {
	background: var(--ord-card-bg) !important;
	border-radius: 16px !important;
	padding: 15px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	width: 100% !important;
	border: 1px solid var(--ord-border) !important;
	box-shadow: var(--ord-shadow-card);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.orders .order-box-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3.5px;
}

.orders .order-box-card:hover {
	transform: translateY(-2px);
	background: var(--ord-card-hover) !important;
}

.orders .order-box-card.card-status-completed::before { background: #00e676; }
.orders .order-box-card.card-status-inprogress::before { background: #2979ff; }
.orders .order-box-card.card-status-pending::before { background: #ffab00; }
.orders .order-box-card.card-status-processing::before { background: #d500f9; }
.orders .order-box-card.card-status-partial::before { background: #00e5ff; }
.orders .order-box-card.card-status-canceled::before { background: #ff1744; }

.orders .order-box-card.card-status-completed { border-color: rgba(0, 230, 118, 0.35) !important; }
.orders .order-box-card.card-status-inprogress { border-color: rgba(41, 121, 255, 0.35) !important; }
.orders .order-box-card.card-status-processing { border-color: rgba(213, 0, 249, 0.35) !important; }
.orders .order-box-card.card-status-pending { border-color: rgba(255, 171, 0, 0.35) !important; }
.orders .order-box-card.card-status-partial { border-color: rgba(0, 229, 255, 0.35) !important; }
.orders .order-box-card.card-status-canceled { border-color: rgba(255, 23, 68, 0.35) !important; }

/* --- رأس البطاقة --- */
.orders .order-card-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	flex-wrap: wrap;
}

.orders .order-id-group {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap;
}

.orders .btn-copy-id {
	background: rgba(229, 9, 20, 0.08) !important;
	border: 1px solid rgba(229, 9, 20, 0.25) !important;
	color: var(--ord-primary) !important;
	border-radius: 8px !important;
	padding: 4px 9px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: all 0.15s ease;
}

.orders .btn-copy-id:hover {
	background: var(--ord-primary) !important;
	color: #ffffff !important;
}

.orders .actions-quick-icons {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap;
}

.orders .act-btn {
	display: inline-grid !important;
	place-items: center !important;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--ord-inner-box);
	border: 1px solid var(--ord-border);
	font-size: 13.5px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

.orders .act-btn:hover {
	transform: scale(1.1);
	border-color: rgba(125, 125, 125, 0.4);
}

.orders .reorder-act { color: #fbbf24 !important; }
.orders .detail-act  { color: #38bdf8 !important; }
.orders .link-act    { color: #4ade80 !important; }

/* --- شارة الحالة ---
   الورقة تعرّف ‎.orders .status-badge‎ (حبّة بلون العلامة التجارية) وتعرّف
   ألوان الحالات تحت ‎.table-wrapper‎ وحدها — ولا جدول في هذا التصميم. فالألوان
   هنا، مسنودةً إلى البطاقة، لا إلى ‎.status-badge‎ عمومًا. */
.orders .order-box-card .status-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 30px !important;
	padding: 4px 14px !important;
	border-radius: 50px !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	white-space: nowrap !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	background: var(--ord-inner-box);
	border-color: var(--ord-border);
	color: var(--ord-text-main);
}

.orders .order-box-card .status-badge i { margin: 0; font-size: 14px; }

.orders .order-box-card .badge-completed  { background: rgba(0, 230, 118, .12);  border-color: rgba(0, 230, 118, .45);  color: #00e676; }
.orders .order-box-card .badge-pending    { background: rgba(255, 171, 0, .12);  border-color: rgba(255, 171, 0, .45);  color: #ffab00; }
.orders .order-box-card .badge-processing { background: rgba(213, 0, 249, .12);  border-color: rgba(213, 0, 249, .45);  color: #d500f9; }
.orders .order-box-card .badge-partial    { background: rgba(0, 229, 255, .12);  border-color: rgba(0, 229, 255, .45);  color: #00b8d4; }
.orders .order-box-card .badge-canceled   { background: rgba(255, 23, 68, .12);  border-color: rgba(255, 23, 68, .45);  color: #ff334b; }

/* --- اسم الخدمة --- */
.orders .order-card-service { width: 100% !important; }

.orders .service-title {
	margin: 0 !important;
	color: var(--ord-text-main) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- التكلفة والتاريخ --- */
.orders .order-card-row-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	width: 100%;
}

.orders .meta-pill-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	background: var(--ord-inner-box);
	border: 1px solid var(--ord-border);
	border-radius: 8px;
	padding: 6px 10px;
	min-height: 36px;
	min-width: 0;
}

.orders .meta-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--ord-text-muted);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
}

.orders .meta-val {
	font-size: 11.5px;
	font-weight: 800;
	color: var(--ord-text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.orders .meta-val.price-val { color: #10b981; }
.orders .meta-val.date-val { direction: ltr !important; unicode-bidi: embed !important; font-size: 10.5px; }

/* --- خانة الرابط --- */
.orders .order-card-link-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ord-inner-box);
	border: 1px solid var(--ord-border);
	border-radius: 8px;
	padding: 6px 10px;
	gap: 8px;
	width: 100%;
	min-height: 36px;
}

.orders .link-label-tag {
	font-size: 11px;
	font-weight: 700;
	color: var(--ord-text-muted);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.orders .link-url-text {
	color: #38bdf8 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	direction: ltr !important;
	text-align: left !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	flex: 1 !important;
	min-width: 0 !important;
	text-decoration: none !important;
}

.orders .link-url-text:hover { text-decoration: underline !important; }

.orders .link-copy-icon {
	background: transparent;
	border: none;
	color: var(--ord-text-muted);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	transition: color 0.15s ease;
}

.orders .link-copy-icon:hover { color: var(--ord-primary); }

/* --- العدّادات --- */
.orders .order-card-metrics-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 6px !important;
	width: 100% !important;
}

.orders .metric-col {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--ord-inner-box) !important;
	border: 1px solid var(--ord-border) !important;
	border-radius: 8px !important;
	padding: 6px 2px !important;
	text-align: center !important;
}

.orders .col-title {
	font-size: 10px !important;
	font-weight: 700 !important;
	color: var(--ord-text-muted) !important;
	margin-bottom: 2px !important;
}

.orders .col-number {
	color: var(--ord-text-main) !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}

/* --- شريط التقدّم --- */
.orders .order-progress-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.orders .order-progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 9.5px;
	font-weight: 800;
	color: var(--ord-text-muted);
}

.orders .order-progress-track {
	width: 100%;
	height: 4px;
	background: var(--ord-inner-box);
	border-radius: 20px;
	overflow: hidden;
}

.orders .order-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #e50914, #ff5757);
	border-radius: 20px;
	transition: width 0.4s ease;
}

.orders .order-progress-fill.fill-completed { background: #00e676 !important; }
.orders .order-progress-fill.fill-inprogress { background: linear-gradient(90deg, #2979ff, #00e5ff) !important; }

/* --- مربّع الاختيار المخصّص --- */
.orders .id-r .order-checkbox,
.orders .bulk-select-all .select-all-checkbox {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
}

.orders .id-r {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin: 0;
	cursor: pointer;
}

.orders .id-r .order-checkbox + .custom-checkbox,
.orders .bulk-select-all .select-all-checkbox + .custom-checkbox {
	position: relative !important;
	display: inline-grid !important;
	place-items: center !important;
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid var(--ord-border) !important;
	border-radius: 4px !important;
	background: var(--ord-inner-box) !important;
	cursor: pointer !important;
	transition: all 0.15s ease;
}

.orders .id-r .order-checkbox:checked + .custom-checkbox,
.orders .bulk-select-all .select-all-checkbox:checked + .custom-checkbox {
	background: var(--ord-primary) !important;
	border-color: var(--ord-primary) !important;
}

.orders .id-r .order-checkbox:checked + .custom-checkbox::after,
.orders .bulk-select-all .select-all-checkbox:checked + .custom-checkbox::after {
	content: "" !important;
	position: absolute !important;
	width: 4px !important;
	height: 7px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) scale(1) !important;
	margin-top: -2px !important;
}

/* --- حالة الفراغ --- */
.orders .orders-empty {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 48px 20px;
	text-align: center;
	background: var(--ord-card-bg);
	border: 1px solid var(--ord-border);
	border-radius: 16px;
	box-shadow: var(--ord-shadow-card);
}

.orders .orders-empty i { font-size: 40px; color: var(--ord-primary); }
.orders .orders-empty p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--ord-text-muted); }
.orders .orders-empty .empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- نافذة التفاصيل ---
   ورقة القالب تعرّف ‎.modal{display:none}‎ و‎.modal.active{display:flex}‎، بينما
   سكربت الغلاف يفتح النافذة بإضافة الصنف ‎open‎ ورفع ‎hidden‎. القاعدتان أدناه
   تصلان الاثنين لنافذة هذه الصفحة وحدها. */
.orders .modal.open {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.orders .modal[hidden] { display: none !important; }

.orders .modal-body .detail-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--ord-inner-box);
	border: 1px solid var(--ord-border);
}

.orders .modal-body .detail-row .label {
	font-size: 12px;
	font-weight: 700;
	color: var(--ord-text-muted);
	white-space: nowrap;
}

.orders .modal-body .detail-row .value {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ord-text-main);
	text-align: end;
	overflow-wrap: anywhere;
	min-width: 0;
}

.orders .orders-count {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ord-text-muted);
}

@media (max-width: 768px) {
	.orders .orders-cards-container { grid-template-columns: 1fr !important; }
	.orders > .orders-filter-pills { grid-template-columns: repeat(3, 1fr) !important; }
	.orders .orders-bottom-action-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
	.orders .orders-action-buttons-group { justify-content: flex-end; }
}

/* ============================================================================
   (٢) صفحة الطلب الجديد — ‎.new-order‎
   الشكل كلّه من ورقة القالب (‎.main-boxes‎ · ‎.support-boxs‎ · ‎.filter-row‎ ·
   ‎.instructions‎ · ‎.order‎). ما يلي هو ما تفتقده فعلًا، وقد نُقل من كتلة
   ‎<style>‎ في ‎_tpl/member/index.html‎ بعد سنده إلى حاوية الصفحة: القالب كتبها
   عامّةً (‎.balance-amount‎ · ‎.quick-action-btn‎ · ‎html.dark .stat-card‎) وهي
   بهذا الشكل تُعيد تلوين لوحة المعلومات وكرت المستخدم في الشريط الجانبي.
   ========================================================================== */

html.dark .new-order { background: #050505; }

/* عمود النموذج: التبويبات والبحث ومنتقي القسم خارج ‎form.order-content‎ (وهي
   وحدها التي تعطيها الورقة تباعدًا)، فالتباعد على ‎.order‎ نفسها. */
.new-order .order {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.new-order .order > .order-nav { margin-bottom: 0; }


html.dark .new-order .stat-card,
html.dark .new-order .support-boxs .card,
html.dark .new-order .filter-row,
html.dark .new-order .order,
html.dark .new-order .order-info {
	background: #141414 !important;
	border-bottom: 3px solid #e50914 !important;
	box-shadow: 0 0 8px rgba(229, 9, 20, .08);
}

.new-order .stat-card,
.new-order .support-boxs .card,
.new-order .filter-row,
.new-order .order,
.new-order .order-info {
	border-bottom: 3px solid #e50914 !important;
}

html.dark .new-order .stat-card:hover,
html.dark .new-order .support-boxs .card:hover,
html.dark .new-order .filter-row:hover,
html.dark .new-order .order:hover,
html.dark .new-order .order-info:hover {
	border-color: rgba(229, 9, 20, .55) !important;
	box-shadow: 0 0 10px rgba(229, 9, 20, .20);
}

html.dark .new-order .brand-category {
	background: #0A0A0A !important;
	border-color: #2B2D31 !important;
}

html.dark .new-order .brand-category.active,
html.dark .new-order .brand-category:hover {
	background: #A91017 !important;
	border-color: #C51B23 !important;
	box-shadow: 0 0 5px rgba(197, 27, 35, .15) !important;
}

html.dark .new-order .form-control,
html.dark .new-order .form-select,
html.dark .new-order .input-group-text,
html.dark .new-order .input-group .search {
	background: #0A0A0A !important;
	border-bottom: 3px solid #e50914;
}

html.dark .new-order .form-control:focus,
html.dark .new-order .form-select:focus,
html.dark .new-order .input-group .search:focus {
	border-color: rgba(197, 27, 35, .48) !important;
	box-shadow: 0 0 4px rgba(197, 27, 35, .08) !important;
}

html.dark .new-order .main-btn,
html.dark .new-order .quick-action-btn {
	background: #B3121A !important;
	color: #fff !important;
	box-shadow: 0 0 4px rgba(197, 27, 35, .12) !important;
}

html.dark .new-order .main-btn:hover,
html.dark .new-order .quick-action-btn:hover {
	background: #981017 !important;
	box-shadow: 0 0 6px rgba(197, 27, 35, .16) !important;
}

html.dark .new-order .main-boxes,
html.dark .new-order .support-boxs,
html.dark .new-order .filter-row,
html.dark .new-order .instructions {
	border-bottom-color: rgba(229, 9, 20, .45) !important;
}

.new-order .username-copy-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.new-order .quick-action-btn {
	border: 0;
	border-radius: 7px;
	padding: 5px 10px;
	background: #E50914;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: .2s ease;
}

.new-order .quick-action-btn:hover {
	background: #b80710;
	transform: translateY(-1px);
}

.new-order .stat-card.balance .add-balance-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #ff1e27 0%, #b80710 100%) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45) !important;
	transition: all 0.25s ease !important;
	width: 100% !important;
}

.new-order .stat-card.balance .add-balance-btn:hover {
	background: linear-gradient(135deg, #ff3b44 0%, #d60b15 100%) !important;
	box-shadow: 0 6px 20px rgba(229, 9, 20, 0.65) !important;
	transform: translateY(-2px) !important;
	color: #ffffff !important;
}

.new-order .stat-card.balance .icon-btn-sm {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-size: 14px !important;
}

.new-order .stat-card.balance .icon-btn-sm:hover {
	background: #E50914 !important;
	border-color: #E50914 !important;
	color: #ffffff !important;
	transform: scale(1.08) !important;
}

.new-order .filter-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

.new-order .filter-icon img {
	width: 20px !important;
	height: 20px !important;
	object-fit: contain !important;
	vertical-align: middle !important;
	display: inline-block !important;
}

/* شريط تقدّم المستوى داخل البطاقة الأولى — لا نظير له في القالب. */
.new-order .lvl-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	opacity: .85;
	margin-top: 8px;
}

.new-order .lvl-track {
	width: 100%;
	height: 5px;
	margin-top: 4px;
	border-radius: 20px;
	background: rgba(125, 125, 125, .25);
	overflow: hidden;
}

.new-order .lvl-fill {
	display: block;
	height: 100%;
	border-radius: 20px;
	background: linear-gradient(90deg, #e50914, #ff5757);
}

/* طيّ مرشّح الشبكات: القالب يطويها بـ‎.filter-list.open‎، والسكربت يبدّل
   ‎sx-collapsed‎ — نفس المقاسات لا نسخة ثانية منها. */
.new-order .filter-list.sx-collapsed {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
}

/* نجمة المفضّلة بجانب تسمية «الخدمة» */
.new-order .sx-fav {
	margin-inline-start: auto;
	background: none;
	border: 0;
	padding: 0;
	line-height: 1;
	font-size: 17px;
	cursor: pointer;
	color: var(--ord-text-muted);
}

.new-order .sx-fav.on,
.new-order .sx-fav:hover { color: var(--ord-primary); }

/* ‎.form-group[hidden]‎ — الورقة تُعلن display على ‎.form-group‎ فيغلب
   ‎[hidden]‎ الافتراضية، فتظهر حقول كل الأنواع رغم أن applyFields() أخفتها. */
.new-order .form-group[hidden],
.new-order #service_description[hidden],
.new-order .sd-item[hidden],
.new-order #gf-sd[hidden] { display: none !important; }

.new-order .help-block {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ord-text-muted);
}

.new-order #gf-range.bad { color: #ff334b; }
.new-order #gf-fav-empty { color: var(--ord-primary); }

/* الوصف: الورقة تجعل ‎#service_description>div‎ حرّ الارتفاع، ويبقى أن يلتفّ
   النصّ الطويل ويحفظ أسطر المزوّد. */
.new-order #gf-desc {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.9;
	max-height: 320px;
	overflow-y: auto;
}

/* لوحة حقائق الخدمة في العمود المقابل — لا نظير لها في القالب. */
.new-order .sd-title {
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin: 0 0 10px;
	color: var(--ord-text-main);
}

.new-order .sd-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 10px;
	color: var(--ord-text-main);
	overflow-wrap: anywhere;
}

.new-order .sd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.new-order .sd-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 40px;
	padding: 7px 11px;
	border-radius: 10px;
	background: var(--ord-inner-box);
	border: 1px solid var(--ord-border);
	min-width: 0;
}

.new-order .sd-item .sd-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ord-text-muted);
	white-space: nowrap;
}

.new-order .sd-item .sd-val {
	font-size: 12px;
	font-weight: 800;
	color: var(--ord-text-main);
	text-align: end;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.new-order .service-features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.new-order .service-features-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 800;
	border: 1px solid var(--ord-border);
	background: var(--ord-inner-box);
	color: var(--ord-text-muted);
}

.new-order .service-features-item.guaranteed { color: #00e676; border-color: rgba(0, 230, 118, .45); }
.new-order .service-features-item.canceled   { color: #ff334b; border-color: rgba(255, 23, 68, .45); }
.new-order .service-features-item.discounted { color: #ffab00; border-color: rgba(255, 171, 0, .45); }

.new-order .sx-tips p {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.9;
}

.new-order .sx-tips p:last-child { margin-bottom: 0; }

.new-order .sx-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 52px 22px;
	text-align: center;
	color: var(--ord-text-muted);
}

.new-order .sx-empty i { font-size: 38px; color: var(--ord-primary); }

/* «اقرأ قبل الطلب» — منقولة من كتلة القالب ومسنودة إلى الصفحة. */
.new-order .order-notice-box {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.new-order .order-banner { width: 100%; }

.new-order .order-banner img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.new-order .order-notice-content { padding-top: 14px; }

.new-order .order-notice-title {
	font-size: 17px;
	font-weight: 900;
	margin: 0 0 8px;
	color: var(--ord-text-main);
}

.new-order .order-notice-line {
	height: 3px;
	width: 64px;
	border-radius: 20px;
	background: linear-gradient(90deg, #e50914, #ff5757);
	margin-bottom: 12px;
}

.new-order .order-notice-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.new-order .order-notice-list li {
	position: relative;
	padding-inline-start: 20px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ord-text-muted);
}

.new-order .order-notice-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ord-primary);
}

@media (max-width: 768px) {
	.new-order .order-notice-title { font-size: 15px; }
	.new-order .order-notice-list li { font-size: 12px; }
	.new-order .sd-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   (٣) صفحة الطلبات المجمّعة — ‎.massorder‎
   الورقة تعرّف ‎.massorder‎ كاملةً (mode-switch · massorder-card · help-text ·
   checkbox · submit-btn)، فلا يبقى إلا ما لا تعرّفه: خلفية الحقول في الوضع
   الداكن، وشبكة الوضع المتقدّم، وشريط النتيجة.
   ========================================================================== */

.massorder .form-control {
	background: rgba(128, 128, 128, 0.08);
	color: inherit;
	box-sizing: border-box;
}

.massorder textarea.form-control {
	resize: vertical;
	min-height: 220px;
	line-height: 1.8;
	direction: ltr;
	unicode-bidi: plaintext;
	text-align: left;
}

.massorder .help-text code {
	background: rgba(128, 128, 128, 0.15);
	color: #e50914;
	border: 1px solid rgba(128, 128, 128, 0.2);
	padding: 3px 8px;
	border-radius: 6px;
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	direction: ltr;
}

.massorder .checkbox input { accent-color: #e50914; width: 16px; height: 16px; margin: 0; }
.massorder .checkbox { cursor: pointer; }

/* شبكة الوضع المتقدّم — أعمدة القالب (‎grid-container‎/‎col-span-*‎) لا وجود
   لها في هذه الورقة، فالشبكة من عندنا ومسنودة إلى الصفحة. */
.massorder .mo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.massorder .mo-grid.one { grid-template-columns: 1fr; }

.massorder .mo-field { min-width: 0; }

.massorder .mo-sep { margin-top: 16px; }

/* شريط النتيجة: الورقة تعرّف ‎alert-danger‎ و‎alert-success‎ وتضع أيقونتهما
   في ‎::before‎، ولا تعرّف ‎alert-warning‎ — والنجاح الجزئيّ ليس نجاحًا. */
.massorder .alert {
	width: 100%;
	margin-bottom: 18px;
	display: flex;
	align-items: flex-start;
	text-align: start;
}

.massorder .alert.alert-warning {
	position: relative;
	background: linear-gradient(135deg, #f59e0b, #fbbf24);
	color: #fff;
	border: none;
	border-radius: 16px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.6;
	box-shadow: 0 16px 40px rgba(245, 158, 11, .35);
}

.massorder .alert.alert-warning::before {
	content: "⚠";
	font-size: 18px;
	margin-inline-end: 10px;
}

.massorder .alert .alert-body { flex: 1; min-width: 0; }
.massorder .alert .mass-bal { margin-top: 6px; font-size: 13px; opacity: .92; }

.massorder .alert ul {
	margin: 8px 0 0;
	padding-inline-start: 18px;
	max-height: 230px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.9;
}

@media (max-width: 768px) {
	.massorder .mo-grid { grid-template-columns: 1fr; }
}

/* مبدّل الوضع صار ‎<label>‎ (فالنقر يبدّل الراديو بلا سكربت)، وقاعدة
   ‎.massorder label{margin-bottom:10px}‎ في الورقة تصيبه — فتُلغى عليه وحده. */
.massorder .mode-switch .mode-item { margin-bottom: 0; }
.massorder .page-title i { color: #e50914; }

/* الأزرار الرابطة في حالة الفراغ: نفس شكل ‎btn-action-custom‎ بلا خطّ تحته. */
.orders a.btn-action-custom {
	justify-content: center;
	text-decoration: none !important;
}

/* ذيل نافذة التفاصيل يبقى فارغًا (السكربت لا يملؤه) فلا يترك فراغًا. */
.orders #popupbutton:empty { display: none; }

/* مبدّل الوضع بشكله في صفحة القالب: الورقة تكتفي بتغيير اللون، وصفحة القالب
   تجعل المختار حبّةً حمراء داخل شريط واحد — وهو ما يميّزه فعلًا. */
.massorder .mode-switch {
	display: inline-flex;
	background: rgba(128, 128, 128, 0.12);
	padding: 4px;
	border-radius: 10px;
	border: 1px solid rgba(128, 128, 128, 0.2);
	gap: 4px;
}

.massorder .mode-switch .mode-item {
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.massorder .mode-switch .mode-item span {
	display: inline-block;
	padding: 8px 20px;
	opacity: .7;
	font-size: 13.5px;
	border-radius: 7px;
	transition: all .2s ease;
}

.massorder .mode-switch .mode-item input:checked + span {
	background: #e50914;
	color: #ffffff !important;
	opacity: 1;
	box-shadow: 0 3px 10px rgba(229, 9, 20, .35);
}