/*
Theme Name: اوردرات
Theme URI: https://orderat.me
Author: Orderat
Description: قالب ووردبريس مبني خصيصًا لمتاجر المطاعم على اوردرات، متوافق بالكامل مع ووكومرس وإضافة لوحة تحكم المطعم. يدعم العربية (RTL) والإنجليزية (LTR) بشكل أصلي، ومصمم من الأساس ليعمل بسلاسة على الجوال.
Version: 1.72.14
Text Domain: orderat-theme
*/

:root {
	--orderat-primary: #0E7A5C;
	--orderat-primary-dark: #0B654C;
	--orderat-tint-bg: #E6F4EF;
	--orderat-tint-border: #bfe3d3;
	--orderat-tint-text: #0B654C;
	--orderat-danger: #EF4444;
	--orderat-danger-dark: #DC2626;
	--orderat-danger-bg: #FEF2F2;
	--orderat-danger-border: #FECACA;
	--orderat-whatsapp: #25D366;
	--orderat-dark: #12211d;
	--orderat-neutral-bg: #fafbfb;
	--orderat-overlay: rgba(10, 20, 17, 0.55);
	--orderat-bg: #F8FAF9;
	--orderat-text: #1E293B;
	--orderat-muted: #74847e;
	--orderat-border: #e9ebea;
	--orderat-border-dark: #dfe3e1;
	--orderat-header-h: 64px;
	--orderat-transition: 0.15s ease;
	--orderat-focus-ring: 0 0 0 3px rgba(14, 122, 92, 0.25);
}

* { box-sizing: border-box; }

:focus-visible {
	outline: 2px solid var(--orderat-primary);
	outline-offset: 2px;
}

/* overflow-x:hidden هنا لا على body تحديدًا — ضبطه على body كان يُعطِّل
   position: sticky بصمت لكل عنصر لاصق في الصفحة (الشريط الجانبي لملخّص
   الطلب في صفحة الدفع تحديدًا، راجع .orderat-checkout-side أدناه) لأن
   overflow-x الصريح على عنصر ما يفرض overflow-y: auto ضمنيًا عليه أيضًا
   (نصّ مواصفة CSS نفسها) — أي body كان يصبح سياق تمرير (scroll container)
   مستقلًا بذاته، فيحسب أي عنصر لاصق داخله موضعه بالنسبة لذلك السياق
   الخاطئ بدل تمرير الصفحة الفعلي، فيبدو "غير لاصق" كليًا رغم أن كل CSS
   الخاص به صحيح ومكتمل. النقل إلى html يمنع تمرير أفقي غير مرغوب بنفس
   الفعالية دون هذا الأثر الجانبي. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0;
	background: var(--orderat-bg);
	color: var(--orderat-text);
	font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
	line-height: 1.6;
}

body.rtl { direction: rtl; }
body:not(.rtl) { direction: ltr; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.orderat-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* الرأس (Header)                                                      */
/* ------------------------------------------------------------------ */

.orderat-header {
	background: var(--orderat-header-bg, #fff);
	border-bottom: 1px solid var(--orderat-header-border, var(--orderat-border));
	position: sticky;
	top: 0;
	z-index: 500;
	overflow: hidden; /* شبكة أمان: يمنع أي عنصر (كصورة شعار كبيرة الحجم) من تكسير ارتفاع الرأس */
	height: var(--orderat-header-h);
}

.orderat-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--orderat-header-h);
}

.orderat-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 800;
	color: var(--orderat-primary) !important;
	flex-shrink: 0;
	max-height: var(--orderat-header-h);
	overflow: hidden;
}
.orderat-logo img,
.orderat-logo .custom-logo {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
	max-width: 160px !important;
}

.orderat-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* مبدِّل/مؤشّر طريقة الطلب في الرأس — راجع header.php. إعادة ضبط صريحة
   (all: unset)‎ ثم بناء المظهر من جديد بالكامل — لا اعتماد على override
   لأي نمط زر افتراضي من المتصفح أو الثيم قد يتسلّل خلاف القصد (وهذا فعليًا
   ما كان يحدث: كل الأزرار تظهر بحدود/خلفية كأنها أزرار عادية منفصلة، بدل
   نص بسيط للخيار غير النشط وشريحة مملوءة واحدة فقط للنشط). */
.orderat-header-order-type {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}
.orderat-header-order-type-pill {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
	color: var(--orderat-muted, #7a7a7a);
	cursor: pointer;
	white-space: nowrap;
}
.orderat-header-order-type-pill:hover:not(.is-active) {
	color: var(--orderat-text, #222);
}
.orderat-header-order-type-pill.is-active {
	background: var(--orderat-primary, #0E7A5C);
	color: #fff;
}
.orderat-header-order-type-pill.is-locked {
	cursor: default;
}
@media (max-width: 782px) {
	.orderat-header-order-type-pill { padding: 7px 12px; font-size: 12px; }
}

.orderat-lang-switcher-header {
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--orderat-header-icon-bg, var(--orderat-bg));
	border-radius: 999px;
	padding: 4px;
	flex-shrink: 0;
}
.orderat-lang-switcher-header a {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--orderat-header-icon-text, var(--orderat-text)) !important;
	text-decoration: none !important;
}
.orderat-lang-switcher-header a.is-active {
	background: var(--orderat-primary);
	color: #fff !important;
}

/* المبدّل العائم (position:fixed أسفل الشاشة) كان يُستخدَم للجوال فقط،
   لكنه يُغطّي عناصر واجهة حقيقية (صفحة الدفع تحديدًا — راجع لقطة الشاشة
   التي وصلتنا). انتقل مكانه إلى القائمة الجانبية بدل ذلك
   (.orderat-mobile-nav-lang في header.php)، فيبقى ORDERAT_Language::render_switcher()‎
   (المُتَّصل بـwp_footer)‎ يطبع نفس العنصر كما هو دون أي تعديل PHP — فقط
   إخفاؤه هنا بالكامل على كل الشاشات، لا تحت سطح المكتب فقط كما كان. */
.orderat-lang-switcher-floating { display: none !important; }
@media (max-width: 899px) {
	.orderat-lang-switcher-header { display: none !important; }
}

.orderat-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--orderat-header-icon-bg, var(--orderat-bg));
	color: var(--orderat-header-icon-text, var(--orderat-text)) !important;
	position: relative;
	font-size: 18px;
	border: none;
	cursor: pointer;
}
.orderat-icon-btn:hover { background: var(--orderat-header-icon-bg, #eef1f0); filter: brightness(0.95); }

.orderat-cart-count {
	position: absolute;
	top: -3px;
	inset-inline-end: -3px;
	background: var(--orderat-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	min-width: 17px;
	height: 17px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.orderat-nav-desktop {
	display: none;
}
.orderat-nav-desktop ul { display: flex; gap: 22px; }
.orderat-nav-desktop a { font-weight: 700; font-size: 14px; }

.orderat-menu-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--orderat-header-icon-bg, var(--orderat-bg));
	color: var(--orderat-header-icon-text, var(--orderat-text));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
}

.orderat-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 999;
	padding: 20px;
	overflow-y: auto;
}
.orderat-mobile-nav.open { display: block; }
.orderat-mobile-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.orderat-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.orderat-mobile-nav a { display: block; padding: 14px 6px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--orderat-border); }
.orderat-mobile-nav-account { margin-top: 20px; }
.orderat-mobile-nav-account-link {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--orderat-dark);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 13px 20px;
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	justify-content: center;
}

/* روابط صفحات المحتوى (من نحن/السياسة/الشروط/التوصيل) داخل القائمة
   الجانبية للجوال — راجع header.php. نمط أخف/أصغر من روابط التنقّل
   الرئيسية عمدًا (هذه معلومات ثانوية مساعدة، لا فئات القائمة الأساسية)
   حتى لا تُنافس بصريًا روابط التنقّل الأهم فوقها. */
.orderat-mobile-nav-info {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--orderat-border);
}
.orderat-mobile-nav-info h4 {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--orderat-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.orderat-mobile-nav-info ul { display: flex; flex-direction: column; gap: 0; }
.orderat-mobile-nav-info a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--orderat-muted);
	border-bottom: 1px solid var(--orderat-border);
}
.orderat-mobile-nav-info a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-inline-start: 1.5px solid var(--orderat-border-dark, var(--orderat-muted));
	border-bottom: 1.5px solid var(--orderat-border-dark, var(--orderat-muted));
	transform: rotate(135deg);
	flex-shrink: 0;
}
.orderat-mobile-nav-info a:hover { color: var(--orderat-text); }

.orderat-mobile-nav-lang {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--orderat-border);
}
.orderat-mobile-nav-lang h4 {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--orderat-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* نفس مبدّل رأس سطح المكتب تمامًا (render_header_switcher())‎، فقط مُتاح
   هنا رغم أن القاعدة العامة أدناه تُخفيه تحت 900px — التخصيص هنا أعلى
   أولوية (سياق .orderat-mobile-nav) فيكسر تلك القاعدة العامة لهذا الموضع
   تحديدًا بلا أي تعديل على القاعدة نفسها. */
.orderat-mobile-nav-lang .orderat-lang-switcher-header { display: flex !important; }

@media (min-width: 900px) {
	.orderat-nav-desktop { display: block; }
	.orderat-menu-toggle { display: none; }
}

/* ------------------------------------------------------------------ */
/* المحتوى العام                                                       */
/* ------------------------------------------------------------------ */

.orderat-main { min-height: 60vh; padding: 24px 0 60px; }
.orderat-page-title { font-size: 24px; font-weight: 800; margin: 0 0 20px; }

/* بانر رأس الصفحة الرئيسية الاختياري — راجع front-page.php لمنطق العرض
   الشرطي (لا يُخرَج هذا العنصر من PHP أصلًا إن لم تُرفَع صورة). */
.orderat-home-header {
	width: 100%;
	height: 280px;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: flex-end;
	margin-bottom: 8px;
}
.orderat-home-header-overlay {
	width: 100%;
	padding: 32px 24px;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
	box-sizing: border-box;
	text-align: center;
}
.orderat-home-header-name {
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	margin: 0;
	text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
@media (max-width: 600px) {
	.orderat-home-header { height: 190px; }
	.orderat-home-header-name { font-size: 24px; }
}

/* شبكة منتجات ووكومرس الافتراضية */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0 0 30px;
}
ul.products li.product {
	list-style: none;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
	text-align: start !important;
	display: flex;
	flex-direction: column;
}
ul.products li.product img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-size: 14.5px;
	font-weight: 700;
	margin: 10px 14px 4px;
}
ul.products li.product .price { font-weight: 800; color: var(--orderat-primary); margin: 0 14px 12px; display: block; }
/* السعر يشمل الضريبة فعليًا من إعدادات المتجر، لكن عبارة "متضمن قيمة
   الضريبة" التي يُضيفها ووكومرس تلقائيًا بجانب كل سعر غير مطلوبة بصريًا
   هنا — نُخفيها في كل مكان (المتجر، صفحة الصنف، السلة...) بدل تكرار
   نفس القاعدة في كل قالب على حدة. */
.woocommerce-price-suffix { display: none !important; }
ul.products li.product a.button,
ul.products li.product button.button,
ul.products li.product .orderat-quickbuy-btn {
	margin: 0 14px 14px;
	/* لون العلامة صراحةً هنا، لا الاعتماد على وراثته من القاعدة العامة
	   .button أدناه فقط — ورقة أنماط ووكومرس الأساسية (woocommerce.css)‎
	   تتضمّن عادةً قاعدة أكثر تحديدًا لأزرار داخل قوائم المنتجات (product
	   loop) تفوز بالأولوية على .button وحدها بصرف النظر عن ترتيب تحميل
	   الملفات، وهو السبب الفعلي وراء ظهور الزر بلون افتراضي (أسود عادةً)
	   رغم أن .button نفسها مضبوطة بلون العلامة بشكل صحيح تمامًا. ملاحظة:
	   .orderat-quickbuy وما بداخلها (العدّاد/الزر) لها ورقة أنماط كاملة
	   ومنفصلة خاصة بها فعلًا (ORDERAT_Quick_Buy::output_assets())‎ — لا تُضَف
	   قواعد لها هنا لتفادي تعريفين متضاربين لنفس الأصناف في مصدرين
	   مختلفين. */
	background: var(--orderat-primary) !important;
	color: #fff !important;
	border-color: var(--orderat-primary) !important;
}
ul.products li.product a.button:hover,
ul.products li.product button.button:hover,
ul.products li.product .orderat-quickbuy-btn:hover {
	background: var(--orderat-primary-dark) !important;
	color: #fff !important;
}

.button, button[type="submit"], input[type="submit"] {
	background: var(--orderat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 20px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	transition: background 0.15s;
}
.button:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--orderat-primary-dark); color: #fff; }
.button:disabled, button[type="submit"]:disabled, input[type="submit"]:disabled,
.button.disabled, .button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="time"], select, textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--orderat-border);
	border-radius: 8px;
	font-family: inherit;
	/* 16px تحديدًا وليس أقل: أي حجم خط أصغر من هذا في حقول الإدخال يجعل
	   سفاري iOS يُكبّر الشاشة تلقائيًا عند لمس الحقل — هذا كان السبب
	   الفعلي وراء تكبّر الشاشة عند الضغط على حقل أو قائمة منسدلة، وليس
	   سلوك تكبير/تصغير عام يحتاج تعطيلًا من إعدادات الصفحة نفسها. */
	font-size: 16px;
	box-sizing: border-box;
	transition: border-color var(--orderat-transition), box-shadow var(--orderat-transition);
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="tel"]:focus-visible, input[type="number"]:focus-visible,
input[type="password"]:focus-visible, input[type="date"]:focus-visible, input[type="time"]:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--orderat-primary);
	box-shadow: var(--orderat-focus-ring);
}

/* صفحة السلة/الدفع: تحسين بسيط للمسافات */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-cart table.shop_table td,
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
	padding: 12px 10px;
	border-bottom: 1px solid var(--orderat-border);
	text-align: start;
}

/* ------------------------------------------------------------------ */
/* الفوتر                                                              */
/* ------------------------------------------------------------------ */

.orderat-footer {
	background: var(--orderat-primary-dark);
	color: #b9c9c3;
	padding: 40px 0 24px;
	margin-top: 40px;
	font-size: 13.5px;
}
.orderat-footer a { color: #b9c9c3 !important; }
.orderat-footer a:hover { color: #fff !important; }
.orderat-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.orderat-footer-col h4 { color: #fff; font-size: 14px; margin: 0 0 12px; }
.orderat-footer-col ul li { margin-bottom: 8px; }
.orderat-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.orderat-footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	text-decoration: none !important;
	transition: background 0.15s;
}
.orderat-footer-social a:hover { background: rgba(255, 255, 255, 0.16); }
.orderat-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 18px;
	text-align: center;
	font-size: 12px;
	color: #7c8d87;
}

.orderat-powered-by {
	display: inline-block;
	margin-inline-start: 8px;
	padding-inline-start: 8px;
	border-inline-start: 1px solid rgba(255,255,255,0.15);
}

.orderat-powered-by a {
	color: #7c8d87;
	text-decoration: none;
}

.orderat-powered-by a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (min-width: 700px) {
	.orderat-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* الفوتر مخفي بالكامل على الجوال (900px فما دون — نفس حد "جوال/سطح مكتب"
   المستخدَم في بقية القالب: راجع .orderat-mobile-search-bar وتبديل
   .orderat-nav-desktop/.orderat-menu-toggle أدناه). روابط صفحات المحتوى التي
   كانت تظهر هنا فقط أصبحت تظهر بدلًا من ذلك داخل القائمة الجانبية المنسدلة
   للجوال (.orderat-mobile-nav-info في header.php) بدل فقدانها كليًا. */
@media (max-width: 899px) {
	.orderat-footer { display: none; }
}

/* ------------------------------------------------------------------ */
/* استجابة عامة للجوال                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.orderat-container { padding: 0 14px; }
	ul.products { grid-template-columns: 1fr 1fr; gap: 10px; }
	.orderat-logo { font-size: 16px; }
	.orderat-home-search { padding: 0 12px; height: 40px; }
	.orderat-home-search-input { font-size: 13.5px; }
}

/* ------------------------------------------------------------------ */
/* صفحة الصنف المفردة                                                  */
/* ------------------------------------------------------------------ */

.woocommerce div.product {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 30px;
}
.woocommerce div.product div.images { flex: 1 1 340px; min-width: 0; }
.woocommerce div.product div.images img { border-radius: 12px; }
.woocommerce div.product div.summary { flex: 1 1 340px; min-width: 0; }

.woocommerce div.product .product_title { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.woocommerce div.product p.price {
	font-size: 20px;
	font-weight: 800;
	color: var(--orderat-primary);
	margin: 0 0 16px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--orderat-muted);
	font-size: 14px;
	margin-bottom: 20px;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.woocommerce div.product .quantity { display: inline-flex; }
.woocommerce div.product .quantity input.qty {
	width: 70px;
	text-align: center;
}
.woocommerce div.product button.single_add_to_cart_button {
	padding: 13px 30px;
	font-size: 14px;
}

.woocommerce-tabs { margin-top: 10px; }
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--orderat-border);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 13.5px;
	border-radius: 999px 999px 0 0;
	color: var(--orderat-muted) !important;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--orderat-primary) !important;
	background: var(--orderat-tint-bg);
}
.woocommerce-tabs .panel { font-size: 14px; color: var(--orderat-text); line-height: 1.8; }

.related.products {
	margin-top: 40px;
}
.related.products > h2 {
	font-size: 19px;
	font-weight: 800;
	margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* شريط التحميل العلوي + التحميل التلقائي عند التمرير + بحث الرئيسية    */
/* ------------------------------------------------------------------ */

#orderat-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
#orderat-loading-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}
.orderat-loading-spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 4px solid var(--orderat-border);
	border-top-color: var(--orderat-primary);
	animation: orderat-spin 0.7s linear infinite;
}

#orderat-infinite-sentinel {
	display: flex;
	justify-content: center;
	padding: 30px 0;
	grid-column: 1 / -1;
}
.orderat-infinite-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--orderat-border);
	border-top-color: var(--orderat-primary);
	animation: orderat-spin 0.7s linear infinite;
}
@keyframes orderat-spin {
	to { transform: rotate(360deg); }
}

.orderat-header-search {
	flex: 1;
	min-width: 0;
	position: relative;
}
.orderat-home-search-wrap {
	position: relative;
	width: 100%;
}
.orderat-home-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--orderat-bg);
	border: 1px solid var(--orderat-border);
	border-radius: 999px;
	padding: 0 14px;
	margin: 0;
	width: 100%;
	max-width: none;
	height: 40px;
	box-sizing: border-box;
	transition: border-color var(--orderat-transition), box-shadow var(--orderat-transition);
}
.orderat-home-search:focus-within {
	border-color: var(--orderat-primary);
	box-shadow: 0 0 0 3px var(--orderat-tint-bg);
}
.orderat-home-search-icon {
	flex-shrink: 0;
	color: var(--orderat-primary);
}
.orderat-home-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	font-size: 14px;
	font-family: inherit;
	color: var(--orderat-text);
}
.orderat-home-search-clear {
	background: none;
	border: none;
	color: var(--orderat-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0 2px;
}

.orderat-mobile-search-bar {
	display: none;
	position: sticky;
	top: var(--orderat-header-h);
	z-index: 499;
	background: #fff;
	border-bottom: 1px solid var(--orderat-border);
	padding: 10px 14px;
}

@media (max-width: 899px) {
	.orderat-header-search { display: none; }
	.orderat-mobile-search-bar { display: block; }
}

/* ------------------------------------------------------------------ */
/* السلة                                                              */
/* ------------------------------------------------------------------ */

.woocommerce-cart .orderat-main .orderat-container,
.woocommerce-checkout .orderat-main .orderat-container {
	display: block;
}

table.cart, table.shop_table.cart {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	overflow: hidden;
}
table.cart img { width: 64px; border-radius: 8px; }
table.cart td.product-remove a {
	color: var(--orderat-danger) !important;
	font-weight: 800;
	font-size: 18px;
	transition: color var(--orderat-transition);
}
table.cart td.product-remove a:hover { color: var(--orderat-danger-dark) !important; }
table.cart .quantity input.qty { width: 60px; }

.cart-collaterals { margin-top: 24px; }
.cart_totals {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 22px;
	max-width: 420px;
	margin-inline-start: auto;
}
.cart_totals h2 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.cart_totals table { width: 100%; }
.cart_totals table td, .cart_totals table th {
	padding: 10px 0;
	border-bottom: 1px solid var(--orderat-border);
	text-align: start;
}
.cart_totals .order-total .amount { color: var(--orderat-primary); font-weight: 800; font-size: 17px; }

.wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	font-size: 14.5px;
}

.coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.coupon input#coupon_code { flex: 1; min-width: 160px; }

/* ------------------------------------------------------------------ */
/* الدفع (Checkout)                                                    */
/* ------------------------------------------------------------------ */

.orderat-checkout-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.orderat-checkout-main { flex: 1.3 1 380px; min-width: 0; }
.orderat-checkout-side { flex: 1 1 320px; min-width: 0; position: sticky; top: 84px; }

.orderat-checkout-card {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 20px 22px;
}
.orderat-checkout-card-title { font-size: 16.5px; font-weight: 800; margin: 0 0 18px; }

/* ================================================================ */
/* إعادة تصميم صفحة الدفع — واجهة "طلب سريع"                          */
/* ================================================================ */

/* ---------- الرأس المُصغَّر الخاص بصفحة الدفع فقط ---------- */
.orderat-header-checkout .orderat-header-inner { justify-content: space-between; }
.orderat-header-back-to-cart {
	font-size: 13.5px; font-weight: 700; color: var(--orderat-muted); text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--orderat-neutral-bg); padding: 8px 14px; border-radius: 999px;
}
.orderat-header-back-to-cart:hover { color: var(--orderat-text); background: var(--orderat-border); }
.orderat-header-checkout-name { font-size: 15px; font-weight: 800; color: var(--orderat-text); }

/* ---------- مقدّمة "جاهز نطلب؟" ---------- */
.orderat-checkout-intro { max-width: 1360px; margin: 18px auto 6px; padding: 0 24px; box-sizing: border-box; }
.orderat-checkout-intro h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--orderat-text); }
.orderat-checkout-intro p { font-size: 14px; color: var(--orderat-muted); margin: 0 0 12px; }
.orderat-checkout-badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--orderat-tint-bg); color: var(--orderat-tint-text);
	font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
	margin-bottom: 10px;
}

/* شريط سياق الطلب أعلى صفحة الدفع — يعكس طريقة الاستلام والفرع اللذين
   اختارهما العميل (راجع ORDERAT_Checkout_Customization::render_order_context_banner()‎
   في إضافة لوحة التحكم). إعلامي بحت بتصميم هادئ، لا يتنافس بصريًا مع عنوان
   الصفحة نفسه فوقه مباشرة. */
.orderat-checkout-context-banner {
	max-width: 1360px;
	margin: 0 auto 14px;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--orderat-text);
}
.orderat-checkout-context-icon { font-size: 16px; }
.orderat-checkout-context-sub { color: var(--orderat-muted); font-weight: 600; }

/* لا يزال يُستخدَم لعنوان قسم "طريقة الدفع" وحده (عنصر DOM حقيقي تُدرِجه
   mrdAddPaymentSectionTitle())‎ — آمن من نفس مشكلة الأقسام ١-٣ لأنه يعيش
   في #order_review بالعمود الجانبي، لا في الحاوية المرنة المُعاد ترتيبها
   بالعمود الرئيسي. */
.orderat-checkout-section-title {
	font-size: 14.5px; font-weight: 800; color: var(--orderat-text);
	margin: 18px 0 8px;
}

/* ---------- عناوين الأقسام ١/٢/٣ المُرقَّمة (محتوى CSS مولَّد، لا عنصر
   DOM منفصل تُدرِجه JS) ---------- */
/* المحاولتان السابقتان (عنصر h3 منفصل بقيمة order مطابقة يدويًا لحقل
   الهدف، مرّتين بطريقتين مختلفتين) انحرفتا فعليًا مرّتين (لقطتا شاشة
   منفصلتان من المستخدم) رغم حسابات دقيقة كل مرة — أي عنصر منفصل داخل
   حاوية مرنة مُعاد ترتيبها بالكامل (.woocommerce-billing-fields__field-wrapper)‎
   يبقى هشًّا بطبيعته: يحتاج قيمة order مطابقة يدويًا لحقل آخر، وأي تعديل
   مستقبلي على ترتيب حقل واحد يُخاطر بتكرار نفس الانحراف من جديد. الحل هنا
   مختلف جوهريًا: النص يُولَّد **داخل صندوق الحقل نفسه** (::before)‎ عبر
   خاصية data-orderat-label التي تضبطها JS مرة على العنصر (راجع
   mrdSetSectionLabels())‎ — لا عنصر شقيق منفصل يحتاج تنسيقًا مع جيرانه
   إطلاقًا، فيبقى ملتصقًا بحقله دومًا مهما تغيّر ترتيب أي حقل آخر مستقبلًا.
   عنوان القسم ٤ (الدفع) وحده يبقى عنصرًا مُحقَنًا فعليًا (JS) لأنه يعيش في
   حاوية بسيطة مُلحَقة تسلسليًا بعد النقل، لا في هذه الحاوية المرنة تحديدًا،
   فلا يواجه هذا الخطر أصلًا. */
#orderat_order_type_field[data-orderat-label]::before,
#billing_city_field[data-orderat-label]::before,
#billing_email_field[data-orderat-label]::before,
#billing_first_name_field[data-orderat-label]::before,
#billing_phone_field[data-orderat-label]::before,
#orderat_delivery_timing_field[data-orderat-label]::before {
	content: attr(data-orderat-label);
	display: block;
	font-size: 14.5px; font-weight: 800; color: var(--orderat-text);
	margin: 18px 0 8px;
}
#orderat_order_type_field[data-orderat-label]::before { margin-top: 0; }

/* ---------- بطاقات الاختيار الكبيرة (طريقة الاستلام / الموعد) ---------- */
/* تحلّ محل تصميم "الأزرار المجزّأة" (segmented control) السابق بأزرار
   أكبر بأيقونة وسطرَي نص، مطابقةً لمواصفة التصميم الجديدة صراحة —
   العناصر نفسها (input[type=radio] + label.radio) بلا أي تغيير، فقط
   بنية داخلية أغنى يُنشئها mrdCardify()‎ في class-orderat-checkout.php. */
#orderat_order_type_field .woocommerce-input-wrapper,
#orderat_delivery_timing_field .woocommerce-input-wrapper {
	display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px;
}
#orderat_order_type_field label.radio,
#orderat_delivery_timing_field label.radio {
	flex: 1 1 150px;
	display: flex; align-items: center; gap: 10px;
	text-align: start; padding: 12px 14px;
	border: 1.5px solid var(--orderat-border);
	border-radius: 12px; background: #fff;
	cursor: pointer; margin: 0;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#orderat_order_type_field input[type="radio"]:checked + label.radio,
#orderat_delivery_timing_field input[type="radio"]:checked + label.radio {
	border-color: var(--orderat-primary);
	background: var(--orderat-tint-bg);
	box-shadow: 0 0 0 1px var(--orderat-primary);
}
#orderat_order_type_field input[type="radio"]:focus-visible + label.radio,
#orderat_delivery_timing_field input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--orderat-primary-dark); outline-offset: 2px;
}
.orderat-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.orderat-card-title { font-size: 13.5px; font-weight: 800; color: var(--orderat-text); }
/* دائرة راديو مرئية داخل البطاقة نفسها (لا زر راديو أصلي مخفي بلا بديل
   مرئي، ولا شارة ✓ في زاوية البطاقة) — مجوَّفة حين غير مُختارة، مملوءة
   بلون العلامة حين مُختارة، مطابقةً لمرجع التصميم المُعتمَد. */
.orderat-card-radio {
	width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
	border: 2px solid var(--orderat-border); background: #fff;
	position: relative; transition: border-color .15s ease, background .15s ease;
}
#orderat_order_type_field input[type="radio"]:checked + label.radio .orderat-card-radio,
#orderat_delivery_timing_field input[type="radio"]:checked + label.radio .orderat-card-radio {
	border-color: var(--orderat-primary);
}
#orderat_order_type_field input[type="radio"]:checked + label.radio .orderat-card-radio::after,
#orderat_delivery_timing_field input[type="radio"]:checked + label.radio .orderat-card-radio::after {
	content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--orderat-primary);
}

/* ---------- بطاقة العنوان المختصرة (عميل عائد بعنوان محفوظ) ---------- */
.orderat-address-compact {
	display: flex; align-items: flex-start; gap: 10px;
	background: var(--orderat-neutral-bg); border: 1px solid var(--orderat-border);
	border-radius: 12px; padding: 14px 16px; margin: 10px 0;
	order: -29;
}
.orderat-address-compact-pin { font-size: 18px; flex-shrink: 0; }
.orderat-address-compact-text { flex: 1; min-width: 0; }
.orderat-address-compact-city { font-weight: 800; font-size: 14px; color: var(--orderat-text); }
.orderat-address-compact-line { font-size: 12.5px; color: var(--orderat-muted); margin-top: 2px; }
.orderat-address-compact-change {
	background: none; border: none; color: var(--orderat-primary); font-weight: 700;
	font-size: 13px; cursor: pointer; padding: 0; flex-shrink: 0; align-self: center;
}
.orderat-address-compact-change:hover { text-decoration: underline; }
/* الحقول الفعلية تبقى في DOM (تُرسَل مع النموذج كما هي دومًا) — نُخفيها
   بصريًا فقط، لا display:none على كل حقل فرديًا (قد يُعطّل عناصر JS
   تعتمد على :visible)، بل بتقليص الحاوية وإخفاء الفائض. */
.orderat-address-fields-collapsed { max-height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; opacity: 0; }

/* ---------- طرق الدفع كبطاقات (نفس لغة بطاقات القسم 1/3) ---------- */
ul.wc_payment_methods li.wc_payment_method {
	border-radius: 12px; padding: 11px 13px;
}
ul.wc_payment_methods li.wc_payment_method label { font-size: 13.5px; }
ul.wc_payment_methods li.wc_payment_method label::before { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
.orderat-pm-sub { display: block; font-size: 11px; font-weight: 400; color: var(--orderat-muted); margin-top: 1px; }

/* طريقة دفع واحدة فقط — صف مؤكَّد موجَز بدل بطاقة اختيار كبيرة (راجع
   mrdCardifyPayments()‎). زر الراديو الأصلي يبقى مُختارًا تلقائيًا
   (checked)‎ وما زال يُرسَل مع النموذج بلا أي تغيير — مخفيّ بصريًا فقط هنا
   تحديدًا لأن لا بديل آخر يُختار بينه وبينه أصلًا. */
ul.wc_payment_methods.orderat-pm-solo li.wc_payment_method {
	background: var(--orderat-neutral-bg); border: 1px solid var(--orderat-border);
	border-radius: 10px; padding: 11px 13px;
}
ul.wc_payment_methods.orderat-pm-solo input.input-radio { display: none; }
ul.wc_payment_methods.orderat-pm-solo li.wc_payment_method label::before { width: 28px; height: 28px; font-size: 13px; }

/* ---------- حماية ضد تكرار عناصر ملخّص الطلب (#order_review) ---------- */

/* حماية فورية على مستوى CSS ضد تكرار #payment/جدول الإجماليات داخل
   #order_review — راجع orderatCleanupDuplicateReviewOrder()‎ في footer.php
   لتفصيل سبب حدوث هذا التكرار أصلاً (ووكومرس يترك نسخة "يتيمة" من القسم
   بدل استبدالها). ذلك التنظيف يعمل بجافاسكربت بعد جاهزية المستند — أي وقت
   لتحميل/تنفيذ السكربتات (jQuery وما يتبعها محمَّلة بـdefer‎) يعني ظهور
   النسختين معًا لحظيًا قبل أن يُزيل الجافاسكربت الزائدة، وهذا بالضبط ما
   بدا "تكرارًا فوريًا" للمستخدم. محدِّد الشقيق العام (~) هنا يُخفي أي نسخة
   ثانية أو لاحقة فورًا من طبقة العرض (CSS تُطبَّق قبل أي جافاسكربت مهما
   كان التوقيت)، بصرف النظر عن السبب الجذري الدقيق لتكرارها من ووردبريس/
   ووكومرس. تُبقي على أول نسخة فقط (تصميمنا المخصّص البسيط)، تمامًا كما
   يفعل التنظيف بجافاسكربت أدناه بعد إصلاحه. */
#order_review #payment ~ #payment,
#order_review table.woocommerce-checkout-review-order-table ~ table.woocommerce-checkout-review-order-table {
	display: none !important;
}

/* ---------- تنويه/شريط تقدّم التوصيل المجاني ---------- */
.orderat-free-delivery-hint td { padding: 10px 4px; }
.orderat-fd-message { font-size: 12.5px; font-weight: 600; color: var(--orderat-primary-dark); margin-bottom: 6px; }
.orderat-free-delivery-hint.is-qualified .orderat-fd-message { color: var(--orderat-primary-dark); }
.orderat-fd-track { height: 6px; border-radius: 999px; background: var(--orderat-tint-border, #cfe9df); overflow: hidden; }
.orderat-fd-fill { height: 100%; border-radius: 999px; background: var(--orderat-primary); transition: width .25s ease; }

.orderat-checkout-trust-note { text-align: center; font-size: 11.5px; color: var(--orderat-muted); margin-top: 12px; }

/* شبكة أمان — إخفاء نص "الخصوصية" الافتراضي لووكومرس (صنفه القياسي، بصرف
   النظر عن أي حقيقة دقيقة حول أي خطاف بالضبط يُخرجه) بجانب تفريغ محتواه
   فعليًا عبر فلتر woocommerce_checkout_privacy_policy_text في
   class-orderat-checkout.php (checkout_privacy_policy_text()‎) — طلب صريح
   بإزالته كليًا من صفحة الدفع، لا ترجمته فقط كما كان القرار السابق. */
.woocommerce-privacy-policy-text { display: none !important; }

/* ---------- زر التأكيد: النص + المبلغ الحي (يُلحَق بجافاسكربت) ---------- */
#place_order { font-size: 15.5px; font-weight: 800; }

@media (max-width: 782px) {
	.orderat-checkout-intro { margin: 18px auto 4px; }
	.orderat-checkout-intro h1 { font-size: 21px; }
	#orderat_order_type_field label.radio,
	#orderat_delivery_timing_field label.radio { flex: 1 1 120px; padding: 11px 12px; }
}

/* أمان 320px — لا التفاف أفقي، لا عناصر تحكّم مصغَّرة، لا نص مقصوص */
@media (max-width: 340px) {
	.orderat-checkout-intro { padding: 0 14px; }
	#orderat_order_type_field .woocommerce-input-wrapper,
	#orderat_delivery_timing_field .woocommerce-input-wrapper { flex-direction: column; }
	#orderat_order_type_field label.radio,
	#orderat_delivery_timing_field label.radio { flex: 1 1 auto; }
}

@media (max-width: 782px) {
	.orderat-checkout-side { position: static; }
	.orderat-checkout-card { padding: 18px; }
}

/* القالب الافتراضي لووكومرس لا يزال يطبع عنوانه الخاص ("Billing
   details") ضمن woocommerce_checkout_billing — نُخفيه لأن بطاقتنا توفّر
   عنوانها الخاص أعلاه بدلًا منه. أي عنصر h3 وارِث (لا > فقط) عمدًا — تبيّن
   أن الافتراض بأنه ابن مباشر تحديدًا كان يفشل صمتًا في التقاطه أحيانًا،
   فيظهر العنوانان معًا (الخلل المُبلَّغ عنه في لقطة شاشة فعلية: "بياناتك"
   مكرَّرة مرّتين على الصفحة نفسها). */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 { display: none; }

/* الحقول "طريقة الاستلام" و"موعد الطلب" لهما عنوان مجموعة خاص بووكومرس
   (label غير .radio، يشير لأول خيار) بالإضافة لعنوان قسمنا المُولَّد
   بـCSS (::before، راجع data-orderat-label أعلاه) — نفس المعنى بالضبط
   مكرَّرًا مرّتين ("طريقة الاستلام" ثم "كيف تود استلام طلبك؟" مثلًا). عنوان
   ووكومرس الأصلي هو الزائد هنا (عنوان قسمنا أوضح وأنسب للتصميم)، فيُخفى. */
#orderat_order_type_field > label:not(.radio),
#orderat_delivery_timing_field > label:not(.radio) { display: none; }

/* حقول "بياناتك" مرتّبة منطقيًا بصريًا عبر flexbox (دون تغيير ترتيبها
   الفعلي في الكود أو تعطيل أي منطق JS مبني على الفئات الموجودة أصلًا).
   الاسم قبل الهاتف تحديدًا (لا بعده كما كان) — يطابق مرجع التصميم الأحدث
   (الاسم الكامل يمينًا/أولًا، الهاتف يسارًا/ثانيًا في تخطيط RTL). */
.woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-direction: column;
}
#billing_email_field {
	order: -20;
	border-top: 1px solid var(--orderat-border);
	padding-top: 18px;
	margin-top: 6px;
}
#billing_first_name_field,
#billing_last_name_field { order: -16; }
/* حاوية "جنبًا إلى جنب" الجديدة (mrdWrapNamePhone())‎ — أصبحت هي الطفل
   المباشر لحاوية الحقول الأم الآن (لا الحقلين منفردَين)، فتحتاج قيمة order
   خاصة بها بدل قيمتَي الحقلين الفرديتين (تصبحان بلا أثر بمجرد تداخلهما،
   لا حاجة لحذفهما — order لا يعمل إلا على أطفال flex مباشرين). -16 نفس
   موضع "الاسم الكامل" السابق تمامًا — لا تغيير في الترتيب العام، فقط
   الحقلان أصبحا يتقاسمان صفًّا واحدًا بدل التكديس. */
.orderat-name-phone-row { order: -16; display: flex; gap: 10px; flex-wrap: nowrap; }
.orderat-name-phone-row > .form-row { flex: 1 1 0; min-width: 0; margin-bottom: 0 !important; }
/* billing_last_name أصبح حقلًا داخليًا بحتًا الآن — قيمته تُعبَّأ بجافاسكربت
   من تقسيم "الاسم الكامل" (mrdSplitFullName)‎، لا يراه العميل أو يتفاعل
   معه إطلاقًا. display:none لا visibility:hidden عمدًا — لا يأخذ أي حيّز
   تخطيطي متبقٍّ (فراغ فارغ) في تسلسل الحقول. */
.orderat-field-lastname-hidden { display: none !important; }
#billing_phone_field { order: -15; }

/* طريقة الاستلام أولًا، قبل حتى بيانات الاسم/البريد — نفس أسلوب إعادة
   الترتيب البصري بالكامل عبر order (flexbox)‎ فقط، بلا لمس القالب أو
   الخطافات إطلاقًا (راجع توثيق هذا الملف أعلى form-checkout.php)‎. */
#orderat_order_type_field { order: -30; border-top: none; padding-top: 0; margin-top: 0; }

/* "وقت التوصيل" انتقل هنا (كان order:5، أي بعد العنوان وقبل الملاحظات) —
   طلب صريح لاحق: يظهر مباشرة بعد "طريقة الاستلام" وقبل أي حقل بيانات
   عميل (بريد/اسم/هاتف/عنوان)، حتى يعرف العميل موعد وصول طلبه مبكرًا لا
   بعد تعبئة كل تفاصيل عنوانه. القيمة (-25) تقع عمدًا بين طريقة الاستلام
   (-30) والبريد (-20) — أول شيء بعد طريقة الاستلام مباشرة. */
#orderat_delivery_timing_field,
.orderat-schedule-inline { order: -25; }

/* المدينة والمنطقة/الفرع انتقلا هنا (كانا order:-29.5/-29، أي داخل نطاق
   "طريقة الاستلام" مباشرة بعد بطاقتَي التوصيل/الاستلام) — مرجع التصميم
   الأحدث يضعهما ضمن تسلسل "بياناتك" نفسه (بعد الاسم/الهاتف، قبل عنوان
   الشارع مباشرة)، لا قرب بطاقات طريقة الاستلام. يبقيان متجاورين معًا
   (المدينة أولًا) للسبب المنطقي نفسه كما كان: مناطق الشحن مرتبطة بمدينة
   محدَّدة (zone_matches_city)‎، فاختيار المدينة هو ما يُحدِّد أصلًا أي
   مناطق ستظهر بعده — فقط موضعهما المشترك تغيّر، لا ترتيبهما النسبي. */
#billing_city_field { order: -5 !important; border-top: none; padding-top: 0; margin-top: 0; }
/* حاوية "موقعك" (الزر الأساسي + البحث + الخريطة) — أُدرِجَت بجافاسكربت
   مباشرة قبل حقل المدينة في DOM (راجع output_map_pin_script())‎، لكن
   الترتيب البصري الفعلي محكوم بالكامل عبر order هنا لا بموضع الإدراج في
   DOM نفسه (نفس السبب الموثَّق أعلاه لكل حقل آخر في هذه الحاوية المرنة) —
   بلا هذا السطر، تسقط الحاوية لموضعها الافتراضي (order:0)‎ فتظهر *بعد*
   المدينة (-5) رغم إدراجها قبلها في DOM حرفيًا. القيمة (-5.5) تضعها قبل
   المدينة مباشرة بفارق بسيط، لا في أي موضع آخر بعيد. */
.orderat-map-pin-container { order: -5.5 !important; }
#orderat_shipping_zone_field,
#orderat_pickup_branch_field { order: -4.5 !important; }

#billing_address_1_field { order: -3 !important; }

.woocommerce-additional-fields,
#order_comments_field {
	order: 10;
	border-top: 1px solid var(--orderat-border);
	padding-top: 18px;
	margin-top: 6px;
}

/* حقل الدولة مثبَّت داخليًا على دولة المتجر ولا يجب أن يظهر للعميل إطلاقًا
   — احتياط إضافي بجانب تفريغ عنوانه من PHP (class-orderat-checkout.php)،
   تحسّبًا لأي اختلاف في سلوك ووكومرس بين النسخ. */
#billing_country_field,
#shipping_country_field { display: none !important; }

/* "إنشاء حساب؟" — قالب ووكومرس الافتراضي (woocommerce/checkout/form-billing.php،
   غير مُعاد كتابته هنا عمدًا، كل بقية هذا الملف يعتمد فقط على إعادة تنسيق
   القالب الافتراضي بصريًا) يطبعها كخانة اختيار عادية وسط حقول الفوترة —
   نمنحها صندوقًا مميّزًا بصريًا بدل خانة مفقودة قد يتجاهلها العميل. تبديل
   إظهار/إخفاء الحقول المكشوفة (اسم مستخدم/كلمة مرور) يبقى بجافاسكريبت
   ووكومرس الأصلي، بلا أي كود جديد هنا — فقط تنسيق بصري. */
/* "هل تودّ إنشاء حساب جديد؟" — طلب صريح لإزالتها من صفحة الدفع. إخفاء بصري
   فقط (لا تعطيل لإعداد ووكومرس الأعم "تفعيل إنشاء حساب من صفحة الدفع"،
   ذاك إعداد متجر عام منفصل تمامًا) — العميل يُكمل كضيف دومًا كما لو كان
   هذا الخيار غير موجود إطلاقًا. */
.woocommerce-checkout .create-account { display: none !important; }

.woocommerce-checkout .form-row { margin-bottom: 10px; }

/* ستة حقول من class-orderat-checkout.php لا تحمل أي محتوى مرئي للعميل
   إطلاقًا — ثلاثة لدبّوس الخريطة (orderat_pin_lat/lng/address، مدخلات
   hidden تُملأ بجافاسكربت فقط عند وضع الدبّوس فعليًا)، اثنان للجدولة
   (orderat_scheduled_date/time، hidden أيضًا — واجهتهما الفعلية عنصر
   منفصل تمامًا هو .orderat-schedule-inline)، وواحد لرقم الطاولة المُقفَلة
   عبر QR (orderat_table_id، مسار الأكل-في-الموقع فقط). تأكّد فعليًا عبر
   أدوات مطوّر المتصفح (فحص DOM حي) أن الحقول الخمسة الأولى — رغم صندوق
   محتوى ارتفاعه صفر تمامًا (لا <label> يُطبَع لها، ولا واجهة إدخال مرئية)
   — لا تزال تحمل هامش/حشوة .form-row العامة أعلاه، فتترك مساحة فارغة
   حقيقية متراكمة بين خريطة الموقع وبقية حقول الصفحة. حقل الطاولة لم
   يُفحَص حيًّا (مسار مختلف)، لكن نفس السبب الجذري ينطبق عليه بالضبط.
   مقصود وضع هذا هنا (style.css) لا داخل output_map_pin_script()‎ في
   الإضافة — ذاك مشروط بـenable_map_pin فقط، فيغيب تمامًا عن أي موقع
   يُفعِّل الجدولة بلا الخريطة، بينما هذا الملف يُحمَّل دومًا بصرف النظر
   عن أي إعداد. */
#orderat_pin_lat_field, #orderat_pin_lng_field, #orderat_pin_address_field,
#orderat_scheduled_date_field, #orderat_scheduled_time_field, #orderat_table_id_field {
	margin: 0 !important; padding: 0 !important; height: 0; overflow: hidden;
}
.woocommerce-checkout .form-row label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 5px;
}

/* طريقة الاستلام: أزرار مجزّأة (segmented control) بدل أزرار راديو عادية */
#orderat_order_type_field .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
#orderat_order_type_field input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
#orderat_order_type_field label.radio {
	flex: 1 1 110px;
	text-align: center;
	padding: 12px 14px;
	border: 1.5px solid var(--orderat-border);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--orderat-text);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	margin: 0;
}
#orderat_order_type_field input[type="radio"]:checked + label.radio {
	background: var(--orderat-primary);
	border-color: var(--orderat-primary);
	color: #fff;
}
#orderat_order_type_field input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--orderat-primary-dark);
	outline-offset: 2px;
}
/* ووكومرس تطبع <abbr class="required">*</abbr> لتمييز حقل إلزامي — منطقي
   لحقل نصي عادي، لكن هذين الحقلين أزرار مجزّأة كبيرة ومُلوَّنة (segmented
   control)؛ زر مُختار مُلوَّن أصلًا يُغني تمامًا عن أي علامة "إلزامي"
   إضافية، وظهورها هنا (كما في لقطة الشاشة التي وصلتنا) يبدو كخطأ طباعي
   داخل نص الزر نفسه لا كتلميح مفيد. إخفاء شامل داخل حدود الحقلين معًا،
   أيًّا كان العنصر الدقيق الذي تطبعه فيه ووكومرس تحديدًا. */
#orderat_order_type_field abbr.required,
#orderat_delivery_timing_field abbr.required {
	display: none;
}

/* "(اختياري)" التي تطبعها ووكومرس تلقائيًا بجانب أي حقل غير إلزامي (span
   class="optional")‎ — طلب صريح لإخفائها تحديدًا بجانب "المنطقة". الحقل
   يبقى غير إلزامي فعليًا للاستلام (يُصبح إلزاميًا للتوصيل فقط، راجع
   mrdToggleFulfillmentFields في class-orderat-checkout.php) — هذا إخفاء
   بصري للنص فقط، لا تغيير في متى يكون الحقل مطلوبًا فعليًا. */
#orderat_shipping_zone_field label .optional {
	display: none;
}

/* موعد الطلب (الآن/جدولة لاحقًا) — نفس أسلوب الأزرار المجزّأة (segmented
   control) المُستخدَم أعلاه لطريقة الاستلام تمامًا، لا صفّي راديو عاديَّين
   مكدَّسين رأسيًا كما كانا. */
#orderat_delivery_timing_field .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
#orderat_delivery_timing_field input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
#orderat_delivery_timing_field label.radio {
	flex: 1 1 160px;
	text-align: center;
	padding: 12px 14px;
	border: 1.5px solid var(--orderat-border);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--orderat-text);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	margin: 0;
}
#orderat_delivery_timing_field input[type="radio"]:checked + label.radio {
	background: var(--orderat-primary);
	border-color: var(--orderat-primary);
	color: #fff;
}
#orderat_delivery_timing_field input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--orderat-primary-dark);
	outline-offset: 2px;
}

/* ملخص الطلب */
table.woocommerce-checkout-review-order-table { width: 100%; margin-bottom: 4px; border-collapse: collapse; }
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--orderat-border);
	text-align: start;
	font-size: 13.5px;
}
table.woocommerce-checkout-review-order-table td { text-align: end; font-weight: 600; color: var(--orderat-text); }

/* الضريبة ورسوم التوصيل — سطران ثانويان بين المجموع والإجمالي، وزن بصري
   أخف من كليهما عمدًا (لا يتنافسان مع الرقمين الأهمّ في القائمة). */
table.woocommerce-checkout-review-order-table .tax-total th,
table.woocommerce-checkout-review-order-table .tax-total td,
table.woocommerce-checkout-review-order-table .tax-rate th,
table.woocommerce-checkout-review-order-table .tax-rate td,
table.woocommerce-checkout-review-order-table .fee th,
table.woocommerce-checkout-review-order-table .fee td {
	font-size: 12.5px;
	color: var(--orderat-muted);
	font-weight: 500;
}

/* صندوق الإجمالي — شريط واحد متّصل بصريًا (لا صندوقان منفصلان بفجوة
   بينهما كما كان سابقًا: th/td خليتا جدول حقيقيتان منفصلتان، كل واحدة
   بخلفية/تدوير زوايا خاصّين بها على حدة — نصف تدوير فقط من الجهة
   الخارجية لكل خلية، بلا تدوير على الجهة المشتركة بينهما، فتبدوان معًا
   شريطًا واحدًا متّصلًا لا صندوقين). خاصّيات منطقية (start/end) لا
   يمين/يسار صريحة، لتبقى صحيحة في الوضعَين العربي والإنجليزي معًا. */
table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	padding: 14px 16px;
	margin-top: 6px;
	background: var(--orderat-tint-bg);
}
table.woocommerce-checkout-review-order-table .order-total th {
	font-size: 14.5px; font-weight: 800; color: var(--orderat-text);
	border-start-start-radius: 10px; border-end-start-radius: 10px;
}
table.woocommerce-checkout-review-order-table .order-total td {
	border-start-end-radius: 10px; border-end-end-radius: 10px;
}
table.woocommerce-checkout-review-order-table .order-total .amount {
	color: var(--orderat-primary); font-weight: 800; font-size: 19px;
}

/* كود القسيمة */
.woocommerce-form-coupon-toggle { margin-bottom: 14px; }
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-notice {
	background: var(--orderat-tint-bg);
	border: 1px solid var(--orderat-tint-border);
	color: var(--orderat-tint-text);
	border-radius: 10px;
	padding: 11px 15px;
	font-size: 13px;
	list-style: none;
}
.woocommerce-form-coupon-toggle a.showcoupon { font-weight: 700; text-decoration: underline; color: var(--orderat-tint-text); }
.checkout_coupon.woocommerce-form-coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	background: var(--orderat-neutral-bg);
	border: 1px solid var(--orderat-border);
	border-radius: 10px;
	padding: 14px;
}
.checkout_coupon.woocommerce-form-coupon .form-row { flex: 1 1 160px; margin-bottom: 0; }
.checkout_coupon.woocommerce-form-coupon input#coupon_code { width: 100%; }

/* طرق الدفع */
#payment { background: var(--orderat-neutral-bg); border-radius: 10px; padding: 4px; margin-top: 16px; }
ul.wc_payment_methods { padding: 8px; margin: 0; }
ul.wc_payment_methods li.wc_payment_method {
	list-style: none;
	background: #fff;
	border: 1.5px solid var(--orderat-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 6px;
	transition: border-color 0.15s, background 0.15s;
}
ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--orderat-primary);
	background: var(--orderat-tint-bg);
}
ul.wc_payment_methods li.wc_payment_method label { font-weight: 700; font-size: 13px; cursor: pointer; }
ul.wc_payment_methods .payment_box {
	font-size: 12.5px;
	color: var(--orderat-muted);
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--orderat-border);
}

/* أيقونة صغيرة قبل كل طريقة دفع — cod (المدفوعة عند الاستلام نقدًا،
   بوابة ووكومرس القياسية بمعرّف ثابت) وorderat_card_on_delivery (بوابتنا
   الخاصة، معرّف ثابت أيضًا) معروفتان مسبقًا فتُخصَّص لهما أيقونة دقيقة؛
   أما طرق الدفع اليدوية التي يُضيفها المدير (orderat_manual_*)‎ فأسماؤها
   حرة تمامًا (قد تكون أي شيء: تحويل بنكي، محفظة إلكترونية...)، فتحصل على
   أيقونة عامة واحدة بدل تخمين اسم كل واحدة تحديدًا. */
ul.wc_payment_methods li.wc_payment_method label { display: flex; align-items: center; gap: 8px; }
ul.wc_payment_methods li.wc_payment_method label::before {
	content: '💰';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: var(--orderat-neutral-bg);
	border-radius: 7px;
	font-size: 13px;
}
li.wc_payment_method.payment_method_cod label::before { content: '💵'; }
li.wc_payment_method.payment_method_orderat_card_on_delivery label::before { content: '💳'; }

/* علامة اختيار خضراء لطريقة الدفع المُختارة — نفس لغة الدائرة المُعبَّأة في
   بطاقات طريقة الاستلام/موعد الطلب، لكن بعلامة ✓ صريحة هنا تحديدًا (تطابق
   مرجع التصميم بدقّة لهذا العنصر). تظهر فقط حين تكون تلك الطريقة هي
   المُختارة فعليًا (:has(input:checked))‎، مدفوعة لأقصى الصف عبر
   margin-inline-start:auto — لا تخطيط جديد، عنصر واحد إضافي فقط. */
ul.wc_payment_methods li.wc_payment_method label::after {
	content: '✓';
	display: none;
	width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
	background: var(--orderat-primary); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 1;
	align-items: center; justify-content: center;
	margin-inline-start: auto;
}
ul.wc_payment_methods li.wc_payment_method:has(input:checked) label::after { display: flex; }

#place_order {
	width: 100%;
	padding: 15px;
	font-size: 15px;
	margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* تبسيط صفحة الدفع على الجوال — "طريقة استلام، الآن أو جدولة، بياناتك،   */
/* الدفع، وانتهينا" بلا أي شعور بخطوات متعدّدة منفصلة.                    */
/* ------------------------------------------------------------------ */
@media (max-width: 782px) {
	/* "المنطقة (اختياري)" أصغر بصريًا من بقية الحقول الإلزامية عمدًا — حقل
	   اختياري فعليًا (راجع class-orderat-checkout.php: required=>false)
	   لكنه كان يبدو بنفس وزن "طريقة الاستلام"/"موعد الطلب" الإلزاميين
	   تمامًا، فيوهم العميل بخطوة إضافية لا بد منها. */
	#orderat_shipping_zone_field label {
		font-size: 12px;
		font-weight: 600;
		color: var(--orderat-muted);
	}
	#orderat_shipping_zone_field select { padding: 10px 12px; font-size: 13px; }
	#orderat_shipping_zone_field { margin-bottom: 10px; }

	/* زر "إتمام الطلب" ثابت أسفل الشاشة دومًا — لا حاجة للتمرير حتى نهاية
	   الصفحة لإيجاده؛ الدفع خطوة أخيرة واحدة واضحة، لا مطلبًا مخفيًا آخر
	   الصفحة. حشوة أسفل الصفحة تمنع الزر الثابت من تغطية آخر عنصر (طرق
	   الدفع نفسها) بشكل دائم. نفس تقاليد شريط .orderat-sticky-checkout
	   الموجود أصلًا (السلة/القائمة) تحديدًا — نفس صيغة safe-area وz-index
	   وظل الصندوق، لا أسلوب منفصل جديد لعنصر "ثابت أسفل الشاشة" آخر.
	   شريط واحد موحَّد (نص + مبلغ معًا داخل الزر نفسه) — يُلغي تقسيم
	   "الإجمالي + الزر" لعنصرَين منفصلَين من الجولة السابقة (راجع
	   mrdSyncButtonTotal في class-orderat-checkout.php لسبب التراجع). */
	body.woocommerce-checkout { padding-bottom: 86px; }
	#place_order {
		position: fixed;
		bottom: 0;
		inset-inline: 0;
		z-index: 300;
		border-radius: 0;
		margin: 0;
		padding: 14px 16px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	}
	/* الحاوية الأصلية للزر (#payment) لا تعود بحاجة لحشوتها/حدودها
	   السفلية المعتادة بما أن الزر نفسه انتقل بصريًا خارجها بالكامل. */
	.woocommerce-checkout-payment { margin-bottom: 0; }
}

@media (max-width: 782px) {
	.woocommerce div.product { flex-direction: column; padding: 16px; }
	.cart_totals { max-width: 100%; }
}


/* ------------------------------------------------------------------ */
/* صفحة "تم استلام الطلب"                                              */
/* ------------------------------------------------------------------ */

.orderat-tk-wrap {
	max-width: 640px;
	margin: 0 auto;
	padding: 10px 4px 60px;
}

.orderat-tk-header { text-align: center; margin-bottom: 28px; }
.orderat-tk-check {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	background: var(--orderat-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.orderat-tk-check svg { width: 30px; height: 30px; color: #fff; }
.orderat-tk-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.orderat-tk-sub { color: var(--orderat-muted); font-size: 14.5px; margin: 0; }

.orderat-tk-card {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 16px;
}
.orderat-tk-card-title { font-size: 15px; font-weight: 800; margin: 0 0 14px; }

.orderat-tk-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	font-size: 14px;
	color: var(--orderat-text);
	border-bottom: 1px solid var(--orderat-border);
}
.orderat-tk-row:last-child { border-bottom: none; }
.orderat-tk-row span { color: var(--orderat-muted); }
.orderat-tk-row strong { font-weight: 700; text-align: end; }
.orderat-tk-row.orderat-tk-total {
	border-top: 2px solid var(--orderat-border);
	border-bottom: none;
	margin-top: 4px;
	padding-top: 14px;
	font-size: 16px;
}
.orderat-tk-row.orderat-tk-total strong { color: var(--orderat-primary); font-size: 17px; }

.orderat-tk-fulfillment-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--orderat-tint-bg);
	color: var(--orderat-primary-dark);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}
.orderat-tk-fulfillment-detail { font-size: 14px; line-height: 1.8; color: var(--orderat-text); }
.orderat-tk-fulfillment-detail strong { display: block; margin-bottom: 2px; }
.orderat-tk-note {
	background: #fbf7e9;
	border: 1px solid #eee0b0;
	color: #8a6d1d;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-top: 10px;
}

.orderat-tk-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--orderat-border);
	font-size: 14px;
}
.orderat-tk-item:last-of-type { border-bottom: none; }
.orderat-tk-item-qty { color: var(--orderat-muted); font-size: 12.5px; margin-inline-start: 4px; }
.orderat-tk-divider { height: 1px; background: var(--orderat-border); margin: 6px 0 10px; }

.orderat-tk-failed p { color: var(--orderat-danger); margin: 0 0 14px; }
.orderat-tk-not-found { text-align: center; color: var(--orderat-muted); padding: 40px 20px; }

.orderat-tk-actions { text-align: center; margin-top: 24px; }
.orderat-tk-btn {
	display: inline-block;
	background: var(--orderat-dark);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 13px 32px;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.2s;
}
.orderat-tk-btn:hover { background: var(--orderat-primary); color: #fff !important; }
/* .orderat-tk-btn صُمِّم أصلًا لعنصر <a> فقط — هذه الإضافة تجعله يعمل بصريًا
   بنفس الشكل تمامًا حين يُستخدَم على <button> حقيقي أيضًا (زر إرسال
   التقييم أدناه)، بإزالة تنسيقات المتصفح الافتراضية للأزرار. */
button.orderat-tk-btn { border: none; cursor: pointer; font-family: inherit; }
button.orderat-tk-btn:disabled { opacity: 0.6; cursor: default; }

.orderat-tk-eta-label { font-size: 13px; color: var(--orderat-muted); margin-bottom: 6px; }
.orderat-tk-eta-countdown { font-size: 28px; font-weight: 800; color: var(--orderat-primary); font-variant-numeric: tabular-nums; }

.orderat-tk-stars { display: flex; gap: 6px; margin-bottom: 14px; direction: ltr; justify-content: flex-end; }
.orderat-tk-star {
	font-size: 32px;
	line-height: 1;
	color: var(--orderat-border-dark);
	cursor: pointer;
	transition: color 0.15s;
}
.orderat-tk-star.is-selected { color: #f5a623; }
#orderat-tk-rating-comment {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--orderat-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	resize: vertical;
	margin-bottom: 14px;
}
#orderat-tk-rating-thanks { text-align: center; color: var(--orderat-primary); font-weight: 700; padding: 8px 0; }

@media (max-width: 480px) {
	.orderat-tk-card { padding: 16px; }
	.orderat-tk-title { font-size: 19px; }
}

/* ------------------------------------------------------------------ */
/* تسجيل الدخول/إنشاء حساب على صفحة الدفع                              */
/* تظهر بشكل بارز عند تفعيل "إجبار تسجيل الدخول" من الإعدادات، لكنها    */
/* تبقى موجودة (كخيار عائد للعميل) حتى في وضع الضيف الافتراضي.         */
/* ------------------------------------------------------------------ */

.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-register,
.woocommerce-checkout .woocommerce-account-fields {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	background: var(--orderat-tint-bg);
	border: 1px solid var(--orderat-tint-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 13.5px;
	color: var(--orderat-primary-dark);
}
.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--orderat-primary-dark) !important;
	font-weight: 700;
	text-decoration: underline;
}

.woocommerce-checkout .woocommerce-form-login .form-row label,
.woocommerce-checkout .woocommerce-form-register .form-row label,
.woocommerce-checkout .woocommerce-account-fields .form-row label,
.woocommerce-checkout .create-account p {
	font-weight: 700;
	font-size: 13.5px;
	margin-bottom: 6px;
	display: block;
	color: var(--orderat-text);
}

.woocommerce-checkout .woocommerce-form-login .button,
.woocommerce-checkout .woocommerce-form-register .button {
	margin-top: 8px;
}

.woocommerce-checkout .lost_password { font-size: 13px; margin-top: 10px; }
.woocommerce-checkout .lost_password a { color: var(--orderat-primary) !important; }

/* ------------------------------------------------------------------ */
/* متتبّع حالة الطلب المباشر — صفحة "تم استلام الطلب"                   */
/* ------------------------------------------------------------------ */

.orderat-tk-steps {
	display: flex;
	align-items: flex-start;
	padding-top: 6px;
}

.orderat-tk-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.orderat-tk-step:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 7px;
	inset-inline-start: -50%;
	width: 100%;
	height: 2px;
	background: var(--orderat-border);
	z-index: 0;
}
.orderat-tk-step.is-done:not(:first-child)::before,
.orderat-tk-step.is-active:not(:first-child)::before {
	background: var(--orderat-primary);
}

.orderat-tk-step-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--orderat-border);
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.orderat-tk-step.is-done .orderat-tk-step-dot,
.orderat-tk-step.is-active .orderat-tk-step-dot {
	background: var(--orderat-primary);
	border-color: var(--orderat-primary);
}
.orderat-tk-step.is-active .orderat-tk-step-dot {
	animation: orderat-tk-step-pulse 1.6s infinite;
}
@keyframes orderat-tk-step-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(15, 122, 92, 0.18); }
	50% { box-shadow: 0 0 0 6px rgba(15, 122, 92, 0.08); }
}

/* شاشة "بانتظار تأكيد المطعم" — راجع thankyou.php، خاصة بالطلبات المجدوَلة
   لا تزال بحالة processing. */
.orderat-tk-awaiting-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--orderat-primary-tint, #fce8e8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
.orderat-tk-awaiting-order-num {
	display: inline-block;
	background: var(--orderat-tint-neutral-bg, #f0f0f0);
	color: var(--orderat-muted);
	font-weight: 700;
	font-size: 12.5px;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.orderat-tk-awaiting-countdown {
	font-size: 34px;
	font-weight: 800;
	color: var(--orderat-primary);
	letter-spacing: 0.02em;
}

.orderat-tk-step-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--orderat-muted);
	line-height: 1.3;
	padding: 0 2px;
}
.orderat-tk-step.is-done .orderat-tk-step-label,
.orderat-tk-step.is-active .orderat-tk-step-label {
	color: var(--orderat-text);
}

.orderat-tk-status-cancelled {
	background: var(--orderat-danger-bg);
	border: 1px solid var(--orderat-danger-border);
	color: var(--orderat-danger);
	border-radius: 10px;
	padding: 12px 16px;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 480px) {
	.orderat-tk-step-label { font-size: 9.5px; }
}

/* ------------------------------------------------------------------ */
/* شريط "إتمام الطلب" الثابت أسفل الشاشة على الجوال                     */
/* ------------------------------------------------------------------ */

.orderat-sticky-checkout {
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: var(--orderat-dark);
	color: #fff;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}
.orderat-sticky-checkout-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orderat-sticky-checkout-count { font-size: 11.5px; color: #b9c9c3; }
.orderat-sticky-checkout-total { font-size: 16px; font-weight: 800; }
.orderat-sticky-checkout-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	background: var(--orderat-primary);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
	transition: background 0.15s;
}
.orderat-sticky-checkout-btn:hover { background: var(--orderat-primary-dark); color: #fff !important; }

/* الشريط خاص بالجوال فقط، ويحجز له مساحة أسفل الصفحة حتى لا يغطّي محتوى
   الفوتر عند ظهوره — الحجز مشروط بفئة تُضاف عبر جافاسكريبت فقط عند
   الظهور الفعلي، تفاديًا لفراغ غير ضروري حين تكون السلة فارغة. */
/* على الجوال: شريط كامل العرض أسفل الشاشة. على الشاشات الأوسع: بطاقة
   عائمة صغيرة في الزاوية بدل شريط يمتد لعرض الشاشة بالكامل (يبدو غير
   مناسب على شاشة واسعة) — لكنها تبقى ظاهرة في الحالتين، فهي المسار
   الوحيد المضمون للوصول لصفحة الدفع بعد إلغاء صفحة السلة المنفصلة. */
@media (min-width: 783px) {
	.orderat-sticky-checkout {
		inset-inline: auto;
		inset-inline-end: 24px;
		bottom: 24px;
		border-radius: 14px;
		max-width: 340px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	}
}
@media (max-width: 782px) {
	body.has-sticky-checkout { padding-bottom: 74px; }
}

/* ------------------------------------------------------------------ */
/* تعديل الكمية/الحذف مباشرة ضمن جدول "طلبك" بصفحة الدفع                */
/* ------------------------------------------------------------------ */

.orderat-checkout-qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.orderat-checkout-qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--orderat-bg);
	border-radius: 999px;
	padding: 4px 12px;
}
.orderat-checkout-qty-btn {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 0 0 1px var(--orderat-border);
	color: var(--orderat-text);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.orderat-checkout-qty-btn:hover { background: var(--orderat-primary); color: #fff; box-shadow: 0 0 0 1px var(--orderat-primary); }
.orderat-checkout-qty-value { min-width: 14px; text-align: center; font-size: 12.5px; font-weight: 700; }
.orderat-checkout-remove-btn {
	background: none;
	border: none;
	color: var(--orderat-danger);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	transition: color var(--orderat-transition);
}
.orderat-checkout-remove-btn:hover { color: var(--orderat-danger-dark); }
table.woocommerce-checkout-review-order-table { transition: opacity 0.15s; }

/* ------------------------------------------------------------------ */
/* تسجيل الدخول / إنشاء حساب                                          */
/* ------------------------------------------------------------------ */

.orderat-auth-wrap { max-width: 440px; margin: 0 auto; }
.orderat-auth-card {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 16px;
	padding: 26px 24px;
}
/* أنواع إشعارات ووكومرس الثلاثة (error/success/notice) — راجع التوثيق في
   form-login.php لسبب وجودها هنا أصلًا (القالب المخصَّص لم يكن يطبع أي
   إشعار ووكومرس إطلاقًا من قبل). ul/li لأن wc_get_notices()‎ قد تُعيد
   إشعارًا واحدًا يحوي HTML بسيطًا (وسم <a>‎ داخل رسالة كوبون مثلًا) —
   wp_kses_post()‎ في القالب يسمح به، فالتنسيق هنا يحتاج التعامل معه بأمان.
*/
.orderat-auth-notice {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 16px;
}
.orderat-auth-notice a { text-decoration: underline; color: inherit; }
.orderat-auth-notice-error { background: #FEF2F2; color: #B91C1C; }
.orderat-auth-notice-success { background: var(--orderat-tint-bg); color: var(--orderat-primary-dark); }
.orderat-auth-notice-notice { background: #FEF3E2; color: #92400E; }
.orderat-auth-tabs {
	display: flex;
	background: var(--orderat-bg);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 22px;
}
.orderat-auth-tab {
	flex: 1;
	background: none;
	border: none;
	border-radius: 999px;
	padding: 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--orderat-muted);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.orderat-auth-tab.is-active { background: var(--orderat-dark); color: #fff; }

.orderat-auth-panel { display: none; }
.orderat-auth-panel.is-active { display: block; }

/* مفتاح "البريد/الهاتف" الداخلي — أخفّ بصريًا عمدًا من مفتاح "تسجيل
   الدخول/حساب جديد" الخارجي (بلا خلفية كتلة، حدّ سفلي فقط)، حتى لا يبدو
   بنفس ثقل المستوى الأول ويُربِك أيّ من المفتاحين هو الأساسي. */
.orderat-auth-subtabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--orderat-border);
	margin-bottom: 18px;
}
.orderat-auth-subtab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 8px 4px 10px;
	margin-inline-end: 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--orderat-muted);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.orderat-auth-subtab.is-active { color: var(--orderat-primary); border-bottom-color: var(--orderat-primary); }

.orderat-auth-subpanel { display: none; }
.orderat-auth-subpanel.is-active { display: block; }

.orderat-auth-optional { font-weight: 400; color: var(--orderat-muted); font-size: 12px; }

.orderat-auth-field { margin-bottom: 14px; }
.orderat-auth-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.orderat-auth-field input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--orderat-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	box-sizing: border-box;
}
.orderat-auth-field-hint { display: block; font-size: 11.5px; color: var(--orderat-muted); margin-top: 4px; }

.orderat-auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 12.5px; }
.orderat-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.orderat-auth-forgot { color: var(--orderat-primary); text-decoration: underline; }

.orderat-auth-submit {
	width: 100%;
	background: var(--orderat-primary);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 13px;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
}
.orderat-auth-submit:hover { background: var(--orderat-primary-dark); }

@media (max-width: 480px) {
	.orderat-auth-card { padding: 20px 18px; }
}

/* ------------------------------------------------------------------ */
/* السلة                                                              */
/* ------------------------------------------------------------------ */

.orderat-cart-wrap { max-width: 640px; margin: 0 auto; padding-bottom: 90px; }

.orderat-cart-head { margin-bottom: 18px; }
.orderat-cart-head .orderat-page-title { margin-bottom: 2px; }
.orderat-cart-head-store { font-size: 13.5px; color: var(--orderat-muted); }

.orderat-cart-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }

.orderat-cart-item {
	display: flex;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 14px;
	transition: opacity 0.15s;
}
.orderat-cart-item-thumb { width: 68px; height: 68px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.orderat-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orderat-cart-item-body { flex: 1; min-width: 0; }
.orderat-cart-item-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.orderat-cart-item-name { font-weight: 800; font-size: 14.5px; }
.orderat-cart-item-meta { font-size: 12px; color: var(--orderat-muted); line-height: 1.6; margin: 4px 0 8px; }
.orderat-cart-item-meta p { margin: 0; }
/* wc_get_formatted_cart_item_data()‎ (ووكومرس الأصلية) تُخرج كل تسمية/قيمة
   (الحجم/عادي، بدون/بدون ثلج، إلخ) كزوج <dt>‎/<dd> منفصل بلا أي تنسيق
   افتراضي منّا — كانا يظهران متراكمَين كل على سطر بسبب العرض الافتراضي
   للمتصفح (block) بلا هذا. dt يُعوَّم لبداية السطر ويُنهي تعويم الزوج
   السابق (سطر جديد لكل زوج)، وdd يحصل على سياق تنسيق كتلي جديد (overflow:
   hidden) فيجلس بجانب dt المُعوَّم بدل الانتقال تحته — يعمل بشكل صحيح في
   الوضعَين العربي (RTL) والإنجليزي (LTR) لاستخدام خاصيات منطقية
   (inline-start) بدل يمين/يسار صريحة. */
.orderat-cart-item-meta dl.variation { overflow: hidden; }
.orderat-cart-item-meta dl.variation dt {
	float: inline-start;
	clear: inline-start;
	font-weight: 700;
	margin-inline-end: 4px;
}
.orderat-cart-item-meta dl.variation dd {
	overflow: hidden;
	margin: 0 0 2px;
}
.orderat-cart-item-price { font-weight: 800; font-size: 14px; }

.orderat-cart-item-top-row .orderat-cart-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orderat-cart-qty-stepper {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--orderat-bg);
	border-radius: 999px;
	padding: 6px 14px;
	flex-shrink: 0;
}
.orderat-cart-qty-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--orderat-primary);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.orderat-cart-qty-num { font-weight: 800; font-size: 14px; min-width: 14px; text-align: center; }

.orderat-cart-section-title { font-size: 16px; font-weight: 800; margin: 0 0 14px; }

.orderat-cart-upsell { margin-bottom: 28px; }
.orderat-cart-upsell-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.orderat-cart-upsell-item { flex-shrink: 0; width: 108px; text-decoration: none !important; color: var(--orderat-text) !important; display: flex; flex-direction: column; }
.orderat-cart-upsell-thumb { position: relative; width: 108px; height: 108px; border-radius: 12px; overflow: hidden; background: var(--orderat-bg); margin-bottom: 6px; flex-shrink: 0; }
.orderat-cart-upsell-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orderat-cart-upsell-add {
	position: absolute;
	bottom: 6px;
	inset-inline-end: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	color: var(--orderat-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 800;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	transition: opacity 0.15s ease;
}
.orderat-cart-upsell-item.is-adding { pointer-events: none; }
.orderat-cart-upsell-item.is-adding .orderat-cart-upsell-thumb { opacity: 0.6; }
.orderat-cart-upsell-name {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.4em * 2);
}
.orderat-cart-upsell-price { font-size: 12px; color: var(--orderat-muted); }

.orderat-cart-special { margin-bottom: 28px; }
.orderat-cart-cutlery-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 14px;
}
.orderat-cart-cutlery-icon { font-size: 20px; flex-shrink: 0; }
.orderat-cart-cutlery-text { flex: 1; }
.orderat-cart-cutlery-title { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.orderat-cart-cutlery-hint { font-size: 12px; color: var(--orderat-muted); line-height: 1.5; }

.orderat-cart-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.orderat-cart-switch input { opacity: 0; width: 0; height: 0; }
.orderat-cart-switch-track {
	position: absolute;
	inset: 0;
	background: #d6dade;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s;
}
.orderat-cart-switch-track::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	inset-inline-start: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.orderat-cart-switch input:checked + .orderat-cart-switch-track { background: var(--orderat-primary); }
.orderat-cart-switch input:checked + .orderat-cart-switch-track::before { transform: translateX(18px); }
html[dir="rtl"] .orderat-cart-switch input:checked + .orderat-cart-switch-track::before { transform: translateX(-18px); }

.orderat-cart-note-row label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.orderat-cart-note-row textarea {
	width: 100%;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 13.5px;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}

.orderat-cart-voucher { margin-bottom: 28px; }
.orderat-cart-voucher-form {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 6px 6px 6px 16px;
}
.orderat-cart-voucher-form input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 13.5px;
	background: none;
}
.orderat-cart-voucher-form button {
	background: none;
	border: none;
	color: var(--orderat-primary);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	padding: 10px 14px;
	text-decoration: underline;
}
.orderat-cart-voucher-form button:disabled { opacity: 0.5; cursor: default; }

#orderat-cart-coupons-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.orderat-cart-coupon-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--orderat-tint-bg);
	border: 1px solid var(--orderat-tint-border);
	border-radius: 10px;
	padding: 8px 12px;
	transition: opacity 0.15s;
}
.orderat-cart-coupon-chip-code { font-weight: 800; font-size: 13px; color: var(--orderat-tint-text); text-transform: uppercase; }
.orderat-cart-coupon-chip-amount { font-size: 12.5px; color: var(--orderat-tint-text); margin-inline-start: auto; }
.orderat-cart-coupon-chip-remove {
	background: none;
	border: none;
	color: var(--orderat-tint-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.orderat-cart-coupon-message { font-size: 12.5px; margin-top: 8px; }

.orderat-cart-summary { margin-bottom: 20px; }
.orderat-cart-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--orderat-text); padding: 7px 0; }
.orderat-cart-summary-note { font-size: 11.5px; color: var(--orderat-muted); padding: 4px 0 8px; }
.orderat-cart-summary-total { border-top: 1px solid var(--orderat-border); margin-top: 6px; padding-top: 12px; font-weight: 800; font-size: 15.5px; }

.orderat-cart-bottom-bar {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 12px;
	padding: 14px 0;
	background: var(--orderat-bg);
}
.orderat-cart-btn {
	flex: 1;
	text-align: center;
	border-radius: 999px;
	padding: 14px;
	font-size: 14.5px;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
}
.orderat-cart-btn-outline { border: 1.5px solid var(--orderat-border); color: var(--orderat-text) !important; }
.orderat-cart-btn-outline:hover { border-color: var(--orderat-primary); }
.orderat-cart-btn-primary { background: var(--orderat-primary); color: #fff !important; border: 1.5px solid var(--orderat-primary); }
.orderat-cart-btn-primary:hover { background: var(--orderat-primary-dark); }

@media (max-width: 480px) {
	.orderat-cart-item-thumb { width: 56px; height: 56px; }
	.orderat-cart-upsell-item { width: 90px; }
	.orderat-cart-upsell-thumb { width: 90px; height: 90px; }
}

/* ------------------------------------------------------------------ */
/* حسابي — لوحة التحكم                                                */
/* ------------------------------------------------------------------ */

/* الحاوية الافتراضية لكل تبويبات "حسابي" ضيّقة عمدًا (640px أعلاه) —
   مناسبة لنماذج نصّية بسيطة (تسجيل الدخول، تفاصيل الحساب). لوحة التحكم
   وقائمة الطلبات مختلفتان: بطاقات تستفيد من مساحة أوسع بدل الانحشار في
   عمود ضيّق يترك أغلب الصفحة فارغًا — نُستثنى هنا تحديدًا (لا كل
   التبويبات) عبر :has() على العنصر المميّز لكل منهما، لا تعديل الحاوية
   العامة نفسها. */
.woocommerce-account .woocommerce-MyAccount-content:has(.orderat-acct-wrap),
.woocommerce-account .woocommerce-MyAccount-content:has(.orderat-acct-orders-list) {
	max-width: 900px;
}

.orderat-acct-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }

.orderat-acct-card {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 20px 22px;
}
.orderat-acct-card-title { font-weight: 800; font-size: 14.5px; margin-bottom: 12px; }

.orderat-acct-welcome { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.orderat-acct-welcome-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.orderat-acct-welcome-phone { font-size: 13px; color: var(--orderat-muted); }
.orderat-acct-welcome-count { text-align: center; background: var(--orderat-tint-bg); border-radius: 12px; padding: 10px 16px; flex-shrink: 0; }
.orderat-acct-welcome-count-num { font-size: 20px; font-weight: 800; color: var(--orderat-tint-text); line-height: 1; }
.orderat-acct-welcome-count-label { font-size: 11px; color: var(--orderat-tint-text); margin-top: 2px; }

.orderat-acct-loyalty-bar-track { width: 100%; height: 9px; background: var(--orderat-bg); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.orderat-acct-loyalty-bar { display: block; height: 100%; background: var(--orderat-primary); border-radius: 999px; }
.orderat-acct-loyalty-caption { font-size: 12.5px; color: var(--orderat-muted); }
.orderat-acct-loyalty-earned { font-size: 12.5px; color: var(--orderat-primary); font-weight: 700; margin-top: 8px; }

.orderat-acct-loyalty-balance-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--orderat-border);
	flex-wrap: wrap;
}
.orderat-acct-loyalty-balance-chip { display: flex; align-items: baseline; gap: 6px; }
.orderat-acct-loyalty-balance-num { font-size: 20px; font-weight: 800; color: var(--orderat-text); }
.orderat-acct-loyalty-balance-label { font-size: 12.5px; color: var(--orderat-muted); }

.orderat-acct-latest-order { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.orderat-acct-latest-order-num { font-weight: 800; font-size: 14px; }
.orderat-acct-latest-order-date { font-size: 12px; color: var(--orderat-muted); }
.orderat-acct-link { color: var(--orderat-primary); font-size: 13px; font-weight: 700; text-decoration: underline; }

.orderat-acct-status-badge {
	display: inline-block;
	background: var(--orderat-tint-bg);
	color: var(--orderat-tint-text);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.orderat-acct-status-cancelled, .orderat-acct-status-failed, .orderat-acct-status-refunded { background: #fbe7e9; color: var(--orderat-danger); }
.orderat-acct-status-completed, .orderat-acct-status-odr-delivered { background: var(--orderat-tint-bg); color: var(--orderat-tint-text); }

.orderat-acct-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.orderat-acct-quicklink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 16px 10px;
	text-decoration: none !important;
	color: var(--orderat-text) !important;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}
.orderat-acct-quicklink:hover { border-color: var(--orderat-primary); }
.orderat-acct-quicklink-icon { font-size: 22px; }
/* لم تعد حمراء (لون "خطر") عمدًا — تسجيل الخروج إجراء محايد عادي، لا
   إجراء تحذيري/مدمِّر يستحق لفت انتباه بلون الخطر، وكان يبدو ناشزًا بصريًا
   وسط بقية البطاقات الهادئة. */
.orderat-acct-quicklink-logout { color: var(--orderat-text) !important; }

/* ------------------------------------------------------------------ */
/* حسابي — طلباتي                                                     */
/* ------------------------------------------------------------------ */

.orderat-acct-orders-list { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.orderat-acct-order-card {
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 14px;
	padding: 18px 20px;
}
.orderat-acct-order-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.orderat-acct-order-card-num { font-weight: 800; font-size: 15px; }
.orderat-acct-order-card-date { font-size: 12px; color: var(--orderat-muted); margin-top: 2px; }
.orderat-acct-order-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--orderat-muted); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--orderat-border); }
.orderat-acct-order-card-total { font-weight: 800; color: var(--orderat-text); font-size: 14px; }
.orderat-acct-order-card-actions { display: flex; gap: 10px; }

.orderat-acct-order-btn {
	flex: 1;
	text-align: center;
	border-radius: 999px;
	padding: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
.orderat-acct-order-btn-outline { border: 1.5px solid var(--orderat-border); color: var(--orderat-text) !important; }
.orderat-acct-order-btn-outline:hover { border-color: var(--orderat-primary); }
.orderat-acct-order-btn-primary { background: var(--orderat-primary); color: #fff !important; border: 1.5px solid var(--orderat-primary); }
.orderat-acct-order-btn-primary:hover { background: var(--orderat-primary-dark); }

.orderat-acct-pagination { display: flex; gap: 10px; margin-top: 14px; max-width: 100%; }

.orderat-acct-empty { text-align: center; padding: 50px 20px; max-width: 400px; margin: 0 auto; }
.orderat-acct-empty-icon { font-size: 40px; margin-bottom: 12px; }
.orderat-acct-empty p { color: var(--orderat-muted); margin-bottom: 18px; }

@media (max-width: 700px) {
	.orderat-acct-quicklinks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.orderat-acct-welcome { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* التنقّل داخل "حسابي" (لوحة التحكم | طلباتي | تفاصيل الحساب...)      */
/* ------------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--orderat-border);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--orderat-text);
	text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--orderat-dark);
	border-color: var(--orderat-dark);
	color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--orderat-danger);
	border-color: #f0bcc2;
}

.woocommerce-account .woocommerce-MyAccount-content { max-width: 640px; }
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row { margin-bottom: 14px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 16px;
	margin: 16px 0;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
	background: var(--orderat-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover { background: var(--orderat-primary-dark); }

/* ------------------------------------------------------------------ */
/* محفظة نقاط الولاء — تبويب "حسابي" الجديد (raw orderat_loyalty_wallet_endpoint_content()‎ في functions.php) */
/* ------------------------------------------------------------------ */

.orderat-loyalty-balance-card {
	background: linear-gradient(135deg, var(--orderat-primary) 0%, var(--orderat-primary-dark) 100%);
	color: #fff;
	border-radius: 14px;
	padding: 28px 24px;
	text-align: center;
	margin-bottom: 24px;
}
.orderat-loyalty-balance-value { font-size: 40px; font-weight: 800; line-height: 1; }
.orderat-loyalty-balance-label { font-size: 13px; opacity: 0.85; margin-top: 8px; }

.orderat-loyalty-wallet h3 { font-size: 15px; font-weight: 700; margin: 28px 0 14px; }

.orderat-loyalty-rewards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.orderat-loyalty-reward-card {
	background: var(--orderat-neutral-bg);
	border: 1px solid var(--orderat-border);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
}
.orderat-loyalty-reward-card.is-locked { opacity: 0.55; }
.orderat-loyalty-reward-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.orderat-loyalty-reward-value { font-size: 20px; font-weight: 800; color: var(--orderat-primary); margin-bottom: 14px; }
.orderat-loyalty-reward-card form { margin: 0; }
.orderat-loyalty-reward-card button[disabled] { opacity: 0.5; cursor: not-allowed; }

.orderat-loyalty-history-table { width: 100%; border-collapse: collapse; }
.orderat-loyalty-history-table tr { border-bottom: 1px solid var(--orderat-border); }
.orderat-loyalty-history-table td { padding: 10px 6px; font-size: 13px; }

@media (max-width: 600px) {
	.orderat-loyalty-rewards-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================ جدولة الطلب (قائمتان مضمَّنتان) ============================ */
/* راجع ORDERAT_Checkout::output_toggle_script()‎ — قائمتان منسدلتان (اليوم،
   الوقت) تظهران مباشرة عند اختيار "جدولة" بدل زر + نافذة منبثقة سابقين
   (طلب تصميم أحدث يطابق مرجع صورة جديد). */
.orderat-schedule-inline {
	display: flex;
	gap: 12px;
	margin: 4px 0 18px;
	flex-wrap: wrap;
}
.orderat-schedule-inline-col {
	flex: 1 1 160px;
	min-width: 0;
}
.orderat-schedule-inline-col label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--orderat-muted, #6c7d76);
	margin-bottom: 6px;
}
.orderat-schedule-inline-col select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--orderat-border, #e0e0e0);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--orderat-text, #1E293B);
}
.orderat-schedule-inline-col select:disabled { color: var(--orderat-muted, #6c7d76); background: var(--orderat-neutral-bg, #f2f2f2); }