:root {
   --primary-blue: #2563eb;
   --primary-red: #ff0000;
   --dark-red: #cc0000;
   --text-main: #334155;
   --text-muted: #94a3b8;
   --bg-light: #f8fafc;
   --border-color: #eef0f2;
   --status-completed: #00875a;
   --status-processing: #0052cc;
   --status-on-hold: #ff991f;
   --status-pending: #92400e;
}

.k87-search-query-highlight {
   color: #2563eb;
}

/* 2. تنسيق صندوق الكمية (الكبسولة) - ليعمل في السلة والمنتج */

.quantity {
   display: inline-flex !important;
   align-items: center !important;
   background: #f8fafc !important;
   border: 1px solid #e2e8f0 !important;
   border-radius: 50px !important;
   padding: 4px !important;
   height: 52px !important;
   min-width: 125px !important;
}

.quantity .minus,
.quantity .plus {
   width: 38px !important;
   height: 38px !important;
   background: #fff !important;
   border-radius: 50% !important;
   color: #2563eb !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 18px !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
   cursor: pointer !important;
   transition: 0.2s !important;
}

.quantity .minus:hover,
.quantity .plus:hover {
   background: #2563eb !important;
   color: #fff !important;
}

.quantity input.qty {
   background: transparent !important;
   border: none !important;
   font-weight: 800 !important;
   font-size: 16px !important;
   width: 35px !important;
   padding: 0 !important;
   text-align: center !important;
}

.quantity {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   border: 1px solid #e2e8f0 !important;
   border-radius: 99px !important;
   padding: 3px !important;
   background: #fff !important;
   min-width: 120px !important;
   height: 35px !important;
   direction: ltr !important;
   box-sizing: border-box !important;
   margin: 5px 0 !important;
}

.quantity input.qty {
   width: 40px !important;
   min-width: 40px !important;
   height: 100% !important;
   border: none !important;
   background: transparent !important;
   font-weight: 800 !important;
   font-size: 16px !important;
   color: #1e293b !important;
   text-align: center !important;
   padding: 0 !important;
   margin: 0 !important;
   flex-grow: 1 !important;
   opacity: 1 !important;
   -moz-appearance: textfield !important;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.quantity .minus,
.quantity .plus {
   width: 32px !important;
   height: 32px !important;
   background: #f1f5f9 !important;
   border: none !important;
   border-radius: 50% !important;
   color: #2563eb !important;
   font-size: 18px !important;
   font-weight: bold !important;
   cursor: pointer !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-shrink: 0 !important;
   padding-bottom: 3px !important;
   line-height: 0 !important;
   text-decoration: none !important;
}

.quantity .minus:hover,
.quantity .plus:hover {
   background: #2563eb !important;
   color: #fff !important;
}

.woocommerce-js .quantity .minus {
   border-left-width: 0;
   margin-left: 0px !important;
}



/* تنسيق أيقونة السلة الجديدة في الترويسة (Header) */
.ast-header-woo-cart .ast-icon svg {
   width: 22px !important;
   height: 22px !important;
   display: inline-block;
   vertical-align: middle;
   transition: transform 0.3s ease;
}

/* لون الأيقونة عند الوقوف عليها */
.ast-header-woo-cart:hover .ast-icon svg {
   color: var(--primary-blue);
   transform: translateY(-2px);
}

/* ---------------------------------------------------------
   [2] اللودر (شاشة التحميل) - يعمل في كل الموقع
--------------------------------------------------------- */
/* 1. إخفاء اللودر الافتراضي */
.woocommerce .blockUI.blockOverlay::before,
.processing::before {
   display: none !important;
   content: none !important;
}

/* 2. تنسيق الخلفية (تأثير زجاجي) - مع تقليل الشفافية */
.woocommerce .blockUI.blockOverlay {
   background: rgba(255, 255, 255, 0.6) !important;
   backdrop-filter: blur(5px) !important;
   opacity: 1 !important;
}

/* 3. هام جداً: إجبار الإخفاء عند انتهاء التحميل (هذا السطر الناقص) */
.woocommerce .blockUI.blockOverlay[style*="display: none"] {
   display: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
}

/* 4. رسم اللودر الدائري الجديد (K87 Spinner) */
.woocommerce .blockUI.blockOverlay::after {
   content: "" !important;
   display: block !important;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 35px;
   height: 35px;
   margin-top: -17px;
   margin-left: -17px;
   border: 3px solid #f1f5f9;
   border-top: 3px solid #2563eb;
   border-radius: 50%;
   animation: k87-global-spin 0.6s linear infinite;
   z-index: 9999;
}

@keyframes k87-global-spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}


/* ---------------------------------------------------------
   [تنسيق مسار التتبع الموحد - Global Breadcrumbs]
--------------------------------------------------------- */

/* استهداف الكلاس المخصص وكلاس ووكومرس الافتراضي وكلاس قالب Astra */
.hc-cart-breadcrumbs,
.woocommerce-breadcrumb,
.ast-breadcrumbs {
   font-size: 13px !important;
   color: #94a3b8 !important;
   margin: 15px 0 25px 0 !important;
   display: block !important;
   line-height: 1.5 !important;
   text-align: right !important;
   direction: rtl !important;
   text-decoration: none !important;
   background: #fff !important;
   padding: 10px 15px !important;
   border-radius: 8px !important;
}

/* تنسيق الروابط داخل المسار */
.hc-cart-breadcrumbs a,
.woocommerce-breadcrumb a,
.ast-breadcrumbs a {
   text-decoration: none !important;
   color: #2563eb !important;
   font-weight: 600 !important;
   transition: all 0.2s ease !important;
}

/* تأثير التمرير على الروابط */
.hc-cart-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover,
.ast-breadcrumbs a:hover {
   color: #1d4ed8 !important;
   text-decoration: underline !important;
}

/* تنسيق الفواصل (السهم أو الشرطة) */
.hc-cart-breadcrumbs span,
.woocommerce-breadcrumb .breadcrumb-separator,
.ast-breadcrumbs .separator {
   margin: 0 8px !important;
   color: #cbd5e1 !important;
   font-weight: normal !important;
}

/* تنسيق الصفحة الحالية (النص الأخير غير القابل للضغط) */
.hc-cart-breadcrumbs strong,
.woocommerce-breadcrumb span:last-child,
.ast-breadcrumbs .current-item {
   color: #64748b !important;
   font-weight: 500 !important;
}


.ast-builder-footer-grid-columns {
   grid-column-gap: 10px !important;
}

/* Unified currency display: amount first, then currency symbol. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
   direction: ltr !important;
   unicode-bidi: isolate !important;
   white-space: nowrap !important;
}

.woocommerce-Price-currencySymbol,
.k87-currency-icon {
   margin-left: 4px !important;
   margin-right: 0 !important;
}

.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
   max-width: 100%;
   padding-left: 10px;
   padding-right: 10px;
}




/* ---------------------------------------------------------
   [7] تنسيق شبكة المنتجات والكاتلوج (Updated with Flex Grow)
   تم دمج كود إنزال الزر هنا ليكون جزءاً من الهيكلية الأساسية
--------------------------------------------------------- */

/* 1. الحاوية الرئيسية (تفعيل Flexbox) */
.woocommerce ul.products li.product,
.s-product-card-entry {
   background: #fff !important;
   border: 1px solid #f1f5f9 !important;
   border-radius: 16px !important;
   overflow: hidden !important;
   padding: 0 !important;
   margin-bottom: 20px !important;
   transition: transform 0.3s !important;
   /* التعديل الجديد: لضمان تساوي الطول ودفع الزر */
   display: flex !important;
   flex-direction: column !important;
   height: 100% !important;
}

.woocommerce ul.products li.product:hover,
.s-product-card-entry:hover {
   transform: translateY(-5px) !important;
}

/* 2. الصور */
.woocommerce ul.products li.product img,
.s-product-card-image img {
   width: 100% !important;
   object-fit: cover !important;
   margin: 0 !important;
}

/* 3. حاوية المحتوى (تتمدد لتدفع الزر) */
.s-product-card-content,
.astra-shop-summary-wrap {
   flex-grow: 1 !important;
   display: flex !important;
   flex-direction: column !important;
   padding: 0 !important;
   /* إضافة مسافة داخلية */
}

/* النصوص */
.woocommerce-loop-product__title,
.s-product-card-content-title a {
   font-size: 14px !important;
   font-weight: 800 !important;
   color: #1e293b !important;
   min-height: 40px !important;
   margin: 0 !important;
   display: block !important;
   text-align: center !important;
}

/* السعر */
.price {
   color: #2563eb !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   display: block !important;
   text-align: center !important;
   margin-bottom: 10px !important;
}

/* 4. الزر (دائماً في الأسفل) */
.woocommerce ul.products li.product .button,
.s-product-card-content-footer,
.s-product-card-content-footer .button {
   background: #0055d4 !important;
   color: #fff !important;
   width: 100% !important;
   border-radius: 0 0 12px 12px !important;
   display: block !important;
   text-align: center !important;
   margin-top: auto !important;
   /* هذا ما يدفعه للأسفل */
}

/* --- تنسيق الشبكة في الجوال (Mobile Grid 2 cols) --- */
@media (max-width: 767px) {

   .woocommerce ul.products,
   .ast-woocommerce-container ul.products {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
      padding: 0 5px !important;
   }

   .woocommerce-loop-product__title {
      font-size: 12px !important;
      min-height: 35px !important;
   }

   .button {
      font-size: 12px !important;
      padding: 8px !important;
   }
}

/* --- تنسيق الكمبيوتر (Auto Grid) --- */
@media (min-width: 768px) {

   .woocommerce ul.products,
   .ast-woocommerce-container ul.products {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
      gap: 20px !important;
   }
}



/* =========================================================
   K87 Design System - المتغيرات الأساسية
   ========================================================= */
:root {
   /* الألوان */
   --k-primary: #3b82f6;
   /* أزرق */
   --k-primary-dark: #2563eb;
   --k-success: #10b981;
   /* أخضر */
   --k-success-bg: #d1fae5;
   --k-error: #ef4444;
   /* أحمر */
   --k-error-bg: #fee2e2;
   --k-text: #1f2937;
   --k-border: #e5e7eb;
   --k-bg-light: #f9fafb;

   /* القياسات */
   --k-radius: 8px;
   /* تدوير الزوايا الموحد */
   --k-height: 48px;
   /* ارتفاع الحقول والأزرار */
   --k-space: 20px;
   --k-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- المكونات الموحدة (Components) --- */

/* 1. الصناديق (Cards/Containers) */
.k87-box,
.woocommerce-checkout-review-order-table,
.salla-card-section {
   background: #fff;
   border: 1px solid var(--k-border);
   border-radius: var(--k-radius);
   box-shadow: var(--k-shadow);
   overflow: hidden;
   margin-bottom: var(--k-space);
}

/* 2. الأزرار (Buttons) */
.k87-btn,
button.button,
.button,
input[type="submit"] {
   background-color: var(--k-primary) !important;
   color: #fff !important;
   height: var(--k-height) !important;
   border-radius: var(--k-radius) !important;
   border: none !important;
   font-weight: 600 !important;
   padding: 0 24px !important;
   cursor: pointer;
   transition: 0.2s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.k87-btn:hover,
button.button:hover {
   background-color: var(--k-primary-dark) !important;
   transform: translateY(-1px);
}

.k87-btn-danger {
   background-color: var(--k-error) !important;
}

.k87-btn-success {
   background-color: var(--k-success) !important;
}

/* 3. الحقول (Inputs) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select,
.k87-input {
   height: var(--k-height);
   border: 1px solid var(--k-border) !important;
   border-radius: var(--k-radius) !important;
   padding: 0 16px !important;
   width: 100%;
   box-sizing: border-box;
   font-family: inherit;
}

input:focus,
textarea:focus {
   border-color: var(--k-primary) !important;
   outline: none;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 4. الرسائل والإشعارات */
.k87-alert {
   padding: 12px;
   border-radius: var(--k-radius);
   font-size: 13px;
   margin-top: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.k87-alert.success {
   background: var(--k-success-bg);
   color: #065f46;
   border: 1px solid var(--k-success);
}

.k87-alert.error {
   background: var(--k-error-bg);
   color: #991b1b;
   border: 1px solid var(--k-error);
}

.k87-icon{
  display:inline-block;
  vertical-align:middle;
  width:24px;
  height:24px;
  color:inherit; /* اللون من العنصر الأب */
}
/* =========================================================
   K87 Core Templates (Page/Single/Archive/Home)
   ========================================================= */
.k87-content-wrap {
   width: min(100%, 1200px);
   margin: 22px auto 42px;
}

.k87-shell-card {
   background: #fff;
   border: 1px solid #e6edf5;
   border-radius: 18px;
   box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.k87-template-hero {
   padding: clamp(18px, 3vw, 34px);
   margin-bottom: 16px;
}

.k87-hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: #2563eb;
   font-weight: 800;
   background: #eff6ff;
   border: 1px solid #dbeafe;
   border-radius: 999px;
   padding: 6px 12px;
}

.k87-hero-title {
   margin: 12px 0 10px;
   color: #0f172a;
   font-weight: 900;
   line-height: 1.3;
}

.k87-hero-description {
   margin: 0;
   color: #64748b;
   line-height: 1.75;
   font-size: 14px;
}

.k87-page-wrap article,
.k87-single-wrap article,
.k87-archive-wrap article,
.k87-home-wrap article {
   background: #fff;
   border: 1px solid #edf2f7;
   border-radius: 18px;
   padding: clamp(18px, 2.3vw, 30px);
   margin-bottom: 16px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
}

.k87-page-wrap article .entry-header,
.k87-single-wrap article .entry-header,
.k87-archive-wrap article .entry-header,
.k87-home-wrap article .entry-header {
   margin-bottom: 12px;
}

.k87-page-wrap article .entry-title,
.k87-single-wrap article .entry-title,
.k87-archive-wrap article .entry-title,
.k87-home-wrap article .entry-title {
   margin: 0;
   color: #0f172a;
   line-height: 1.35;
}

.k87-archive-wrap article .entry-title a,
.k87-home-wrap article .entry-title a {
   color: #0f172a !important;
   text-decoration: none !important;
}

.k87-archive-wrap article .entry-title a:hover,
.k87-home-wrap article .entry-title a:hover {
   color: #2563eb !important;
}

.k87-page-wrap article .entry-content,
.k87-single-wrap article .entry-content,
.k87-archive-wrap article .entry-content,
.k87-home-wrap article .entry-content {
   color: #334155;
}

.k87-page-wrap article .entry-meta,
.k87-single-wrap article .entry-meta,
.k87-archive-wrap article .entry-meta,
.k87-home-wrap article .entry-meta {
   color: #94a3b8;
   font-size: 13px;
}

.k87-page-wrap .navigation,
.k87-single-wrap .navigation,
.k87-archive-wrap .navigation,
.k87-home-wrap .navigation {
   margin-top: 16px;
}

.k87-shop-loop-wrap,
.k87-shop-single-wrap {
   margin-top: 10px;
}

@media (max-width: 991px) {
   .k87-content-wrap {
      width: calc(100% - 1rem);
      margin-top: 14px;
      margin-bottom: 28px;
   }

   .k87-page-wrap article,
   .k87-single-wrap article,
   .k87-archive-wrap article,
   .k87-home-wrap article {
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 12px;
   }

   .k87-template-hero {
      border-radius: 14px;
      margin-bottom: 12px;
   }
}