/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLORS OVERRIDE - 8 COLORS ONLY - ديناميكي من الداشبورد
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* استيراد الخطوط العربية الجميلة */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

:root {
  /* الـ 7 ألوان الأساسية فقط */
  --color-background: #F5F0EB;
  --color-primary: #FF6B35;
  --color-secondary: #000000;
  --color-text: #ffffff;
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  
  /* اختصارات للاستخدام السهل */
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary);
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --error-color: var(--color-error);
  --bg-main: var(--color-background);
  --text-color: var(--color-text);
  --border-color: var(--color-border);
}


/* color-background */
.productSheet,.bottomSheet,.ordersPage,.orderCardBtn.secondary
,.odSheet,.orderProgressLine,.odProgressLine
,.orderCardBtn.rate,.odSheet,.odBottom,.wishlistSheet
,.wishlistBottomBar,.profilePage,.cartSheet
,.cartBottomBarm,.orderPage,.orderBottomBar
,.addrPage,.addrCardIcon,.paymentPage,.paymentBottomBar
,.profileSheetBox,.profileFieldIcon{ background: var(--color-background); }
.orderProgressDot{ border: 3px solid var(--color-background);}
.odProgressDot.active-step{ box-shadow: 0 0 0 4px var(--color-background);}
.orderToggleWrap,.paymentMethodCard:hover,.ordersTabBar,.qtyBtn.minus {
  background: color-mix(in srgb, var(--color-background) 94%, black);
}
.orderBtn,.qtyBtn.plus{color: var(--color-background);}
.navbar { background: color-mix(in srgb, var(--color-background) 90%, black);
box-shadow: 0 0 0 4px var(--color-background);}
/* color-background */

/* color-primary */
.banner { background: var(--color-primary); }
.profilePic { border-color: var(--color-primary); }
.drawerLogoLine { background: var(--color-primary); }
.drawerItem.active { color: var(--color-primary); }
.drawerItem.active .drawerItemIcon svg { stroke: var(--color-primary); }
.drawerItem.active .drawerItemLabel { color: var(--color-primary); }
.drawerBadge { background: var(--color-primary); }
.wishBadgeNum { background: var(--color-primary); }
.price,.odItemPrice { color: var(--color-primary); }
.product-price { color: var(--color-primary); }
.add { background: var(--color-primary); }
.cardAutoPriceText { color: var(--color-primary); }
.orderProgressDot.done,.odProgressDot.done { background: var(--color-primary); border-color: var(--color-primary); }
.orderProgressStep.done .orderProgressLabel, .orderProgressStep.active-step .orderProgressLabel,.odProgressStep.done .odProgressLabel, .odProgressStep.active-step .odProgressLabel
{ color: var(--color-primary); }
.orderProgressDot.active-step,.odProgressDot.active-step{border-color: var(--color-primary);}
.orderProgressFill,.odProgressFill{background: var(--color-primary);}
.orderProgressDot.active-step svg,.odProgressDot.active-step svg{ stroke: var(--color-primary);}
.ordersTab.active .ordersTabBadge { background: var(--color-primary); }
.odBtn.primary,.orderCardBtn.primary { background: var(--color-primary); }
.odMetaLabel svg{ stroke: var(--color-primary); }
.odSumTotalValue{ color: var(--color-primary); }
.orderCardBtn.rate{color: var(--color-primary); border-color:1.5px solid var(--color-primary);}
.ratingStar.filled svg{ fill: var(--color-primary); stroke: var(--color-primary); }
.ratingItemNote:focus{border-color: var(--color-primary);}
.ratingSaveBtn { background: var(--color-primary); }
.wishCardAddBtn { background: var(--color-primary); }
.wishCardPrice { color: var(--color-primary); }
.wishlistAddAllBtn { background: var(--color-primary); }
.profileFieldIcon svg { stroke: var(--color-primary); }
.profileAvatarEditBtn { background: var(--color-primary); }
.profileAvatarCircle{background: var(--color-primary);}
.profileSheetSaveBtn { background: var(--color-primary); }
.profileSheetInput:focus { border-color: var(--color-primary);}
.logouts svg { stroke: var(--color-primary); }
#lgConfirmBtn,#pwaInstallBtn { background: var(--color-primary); }
.cartItemUnitPrice,#orderPaymentTotal{ color: var(--color-primary); }
.orderPromoLeft svg { stroke: var(--color-primary); }
#orderAddrSection div svg { stroke: var(--color-primary); }
.addrCardIcon svg { stroke: var(--color-primary); }
.addrCard.selected{border: 2px solid var(--color-primary);}
.adresss { color: var(--color-primary); }
#dlvLocBtn{ background: var(--color-primary);}
#dlvAddrIconWrap svg,.dlvFeeLabel svg { stroke: var(--color-primary); }
.dlvTypeBtn.active{border-color: var(--color-primary); color: var(--color-primary);}
.dlvDetailField:focus-within{border-color: var(--color-primary);}
#dlvConfirmBtn { background: var(--color-primary); }
.dlvSrIcon svg { stroke: var(--color-primary); }
.addrSelectBtn { background: var(--color-primary); }
.pm-search svg { stroke: var(--color-primary); }
.pm-loc-pill { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(var(--primary-color), 0.25); }
.pm-loc-icon svg { stroke: var(--color-primary); }
.pm-chip.pm-active{ background: var(--color-primary); border-color: var(--color-primary); color:}
.pm-bcard-ico svg { stroke: var(--color-primary); }
.pm-bcard.pm-selected .pm-bcard-check{ border-color: var(--color-primary); background: var(--color-primary); }
.pm-bcard.pm-selected::after{background:var(--color-primary);}
.pm-cs-ico svg { stroke: var(--color-primary); }
.pm-cs-change { color: var(--color-primary); }
.pm-confirm-btn,.pm-popup-btn{background: var(--color-primary);}
.pm-branch-marker.pm-selected {border-color: var(--color-primary); }
.pm-pill.pm-dist span { color: var(--color-primary); }
.paymentSumTotalValue { color: var(--color-primary); }
.paymentMethodCard.selected {
    border-color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(var(--primary-color), 0.35);
}
.paymentMethodCard.selected .paymentRadio{border-color: var(--color-primary);}
.paymentRadioDot { background: var(--color-primary); }
.paymentConfirmBtn { background: var(--color-primary); }
.visaField svg { stroke: var(--color-primary); }
.visaField:focus-within{border-color: var(--color-primary);}
.successMethod{color: var(--color-primary);}
.cartCheckoutBtn { background: var(--color-primary); }
.cartTotalValue,.actionPriceValue { color: var(--color-primary); }
.orderToggleBtn.active,.orderPlaceBtn,.orderBtn { background: var(--color-primary)}
/* color-primary */

/* color-secondary */

.desc {
  color: color-mix(in srgb, var(--color-secondary) 90%, white);
}
.productSheetDesc {
  color: color-mix(in srgb, var(--color-secondary) 65%, white);
}
.oldPrice { color: color-mix(in srgb, var(--color-secondary) 50%, white); }
.qtyBtn.plus{ background: var(--color-secondary); }
.cat,.sectionTitle,.title,.productSheetName
,.qtyNum,.qtyBtn.minu{ color: var(--color-secondary); }
.navItem svg { stroke: var(--color-secondary); }










/* color-secondary */




/*  */

.socialBtn {
  background: rgb(from var(--color-text) r g b / 0.22);
  border: 1px solid rgb(from var(--color-text) r g b / 0.30);
  color: var(--color-text);
}
.card{background: var(--color-text);}