/* OULATASTORE — Modern Cart re-skin (brand colors + RTL). Additive & reversible.
   Edit the values in this :root block to change the cart colors.
   Revert everything by disabling wp-content/novamira-sandbox/oula-sidecart-skin.php */

:root{
  /* === BRAND COLORS (change these) === */
  --moderncart-primary-color:#15795B !important;        /* green: buttons, accents */
  --moderncart-primary-color-light:#1C8E6C !important;
  --moderncart-highlight-color:#15795B !important;      /* "you saved" / sale highlight */
  --moderncart-heading-color:#1A1A1A !important;         /* dark headings */
  --moderncart-body-color:#1A1A1A !important;            /* dark body text */
  --moderncart-background-color:#FFFFFF !important;       /* drawer background */
  --moderncart-button-font-color:#FFFFFF !important;      /* text on green buttons */
  --moderncart-header-background-color:#FFFFFF !important;
  --moderncart-header-font-color:#1A1A1A !important;
  --moderncart-quantity-font-color:#1A1A1A !important;
  --moderncart-quantity-background-color:#F1EFE8 !important;
  /* floating cart button */
  --moderncart-floating-icon-bg-color:#15795B !important;
  --moderncart-floating-icon-color:#FFFFFF !important;
  --moderncart-floating-count-bg-color:#C9A84C !important;   /* gold count badge */
  --moderncart-floating-count-text-color:#1A1A1A !important;
}

/* Checkout button — dark (brand dark = the reference's black button) */
#moderncart-slide-out .moderncart-slide-out-footer a[href*="checkout"],
#moderncart-slide-out .moderncart-slide-out-footer button[class*="checkout"],
#moderncart-slide-out .moderncart-slide-out-footer [class*="checkout-button"]{
  background-color:#1A1A1A !important;color:#FFFFFF !important;font-weight:700;border-radius:10px;
}
#moderncart-slide-out .moderncart-slide-out-footer a[href*="checkout"]:hover,
#moderncart-slide-out .moderncart-slide-out-footer button[class*="checkout"]:hover{background-color:#000000 !important;}

/* Brand line on each cart item (small uppercase, like the reference) */
.oula-mc-brand{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#1A1A1A;
  margin-block-end:2px;
}

/* Per-line "YOU SAVED {amount}" pill — neutral grey to match the reference */
.oula-saved-pill{
  display:inline-block;
  background:#EDEDED;
  color:#1A1A1A;
  font-weight:700;
  font-size:11px;
  letter-spacing:.3px;
  text-transform:uppercase;
  line-height:1;
  padding:5px 9px;
  border-radius:6px;
  margin-block-start:4px;
  white-space:nowrap;
}
.oula-saved-pill .woocommerce-Price-amount{color:inherit;font-weight:700;}

/* ===========================================================
   RIGHT-SIDE PANEL SIZING
   Keep the cart a narrow drawer pinned to the right so the page
   (and other products) stays visible beside it — never a full /
   "double" page. Change 420px below to make the drawer wider/narrower.
   =========================================================== */
#moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out{
  right:0 !important;
  left:auto !important;
  width:420px !important;
  max-width:92vw !important;
}
/* Tablet: still a side panel, not the whole screen */
@media (max-width:768px){
  #moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out{ width:380px !important; }
}
/* Phone: full width is the expected mobile pattern */
@media (max-width:480px){
  #moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out{ width:100% !important; max-width:100% !important; }
}

/* ===========================================================
   RTL (Arabic): drawer stays on the RIGHT (per requirement),
   but all inner content mirrors correctly to the inline-end.
   Logical properties + direction:rtl flip the flex layouts,
   text alignment, paddings and the heart/close positions.
   =========================================================== */
html[dir="rtl"] #moderncart-slide-out,
html[dir="rtl"] #moderncart-slide-out-modal{
  direction:rtl;
  text-align:start;
}
html[dir="rtl"] #moderncart-slide-out .moderncart-cart-total .moderncart-cart-line-items-item span{
  margin-left:0;
  margin-inline-start:2px;
}
html[dir="rtl"] #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total.moderncart-order-summary-style-style2 .moderncart-order-summary-items .moderncart-order-summary-item span{
  text-align:start;
}