/* ============================================================
   Divani — Cash Price Patch (מחיר מזומן)
   Pixel-mapped from Figma node 2728-274 (mezuman, 630×156).
   Self-contained, RTL, scoped under .dcb. Injected above .secure-info.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800;900&display=swap');

.dcb,
.dcb * { box-sizing: border-box; }

.dcb {
  /* ---- design tokens (from Figma) ---- */
  --dcb-black: #000;
  --dcb-gold: #FEC602;
  --dcb-pill: #383838;
  --dcb-gray: #aeaeae;
  --dcb-line: #575757;
  --dcb-white: #fff;

  position: relative;
  direction: rtl;
  width: 100%;
  max-width: 617px;          /* Figma black box width */
  margin: 18px auto;
  min-height: 129px;
  background: var(--dcb-black);
  border-radius: 18px;
  padding: 14px 16px 16px;
  font-family: 'Heebo', 'Almoni Neue', 'Assistant', system-ui, sans-serif;
  color: var(--dcb-white);
  overflow: hidden;
}

/* ---- gold badge (left, vertically centred) ---- */
.dcb__badge {
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--dcb-gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  line-height: 1;
}
.dcb__badge::after {                 /* thin inner ring = Figma Ellipse 3 */
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.55);
  pointer-events: none;
}
.dcb__badge-inner {
  transform: rotate(-18.58deg);       /* Figma tilt */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dcb__badge-pct {
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.5px;
  transform: scaleX(.9);              /* emulate Almoni Tzar condensed */
  white-space: nowrap;
  direction: ltr;                     /* keep "-20%" sign on the left */
}
.dcb__badge-tag {
  font-weight: 500;
  font-size: 15px;
  margin-top: 1px;
}

/* ---- main content (right side; cleared of the badge) ---- */
.dcb__main {
  margin-inline-end: 110px;           /* RTL: inline-end = LEFT → clears the badge */
  text-align: right;
}

/* header: title + credit-card icon */
.dcb__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;        /* RTL → starts at right */
  gap: 8px;
}
.dcb__head-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: .27px;
  color: var(--dcb-white);
}
.dcb__head-icon {
  width: 18px;
  height: 18px;
  flex: none;
  order: 2;                            /* icon to the left of the title */
}
.dcb__head-icon svg { display: block; width: 100%; height: 100%; }

/* divider line */
.dcb__divider {
  height: 1px;
  background: var(--dcb-line);
  border: 0;
  margin: 11px 0 11px;
}

/* price row: big cash price (right) + savings pill (left of it) */
.dcb__pricerow {
  display: flex;
  align-items: center;
  justify-content: flex-start;        /* RTL → price at right */
  gap: 14px;
  flex-wrap: wrap;
}
.dcb__price {
  font-weight: 700;
  font-size: 30px;
  line-height: 22px;
  letter-spacing: .45px;
  color: var(--dcb-white);
  white-space: nowrap;
}
.dcb__pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  height: 24px;
  padding: 0 10px;
  border-radius: 30px;
  background: var(--dcb-pill);
  white-space: nowrap;
  line-height: 22px;
}
.dcb__pill-l1 { display: inline-flex; align-items: baseline; gap: .28em; }
.dcb__pill-save { color: var(--dcb-gold); font-weight: 700; font-size: 18px; }
.dcb__pill-amt  { color: var(--dcb-white); font-weight: 700; font-size: 18px; }
.dcb__pill-txt  { color: var(--dcb-white); font-weight: 400; font-size: 15px; }

/* disclaimer */
.dcb__note {
  margin-top: 14px;
  color: var(--dcb-gray);
  font-weight: 400;
  font-size: 14px !important;   /* !important beats theme's #product-info p {font-size:19px!important} */
  line-height: 1.5 !important;
}

/* ============================================================
   Product-image badge ("שלם וקנה") — replaces the theme's existing
   corner patches when a cash price is set. This stylesheet only loads
   on products WITH a cash price, so the override is automatically scoped.
   ============================================================ */
.slider-for1::before,
.slider-for1::after,
.product-image-gallery-wrap::before,
.product-image-gallery-wrap::after {
  display: none !important;
  content: none !important;
}
.dcb-img-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 96px;
  height: auto;
  z-index: 100;
  pointer-events: none;
}

/* ============================================================
   Responsive — product summary column is fluid (~360–600px)
   ============================================================ */
@media (max-width: 560px) {
  .dcb {
    padding: 13px 13px 14px;
    border-radius: 14px;
  }
  .dcb__badge { width: 64px; height: 64px; left: 12px; }
  .dcb__badge-pct { font-size: 21px; }
  .dcb__badge-tag { font-size: 12px; }
  .dcb__main { margin-inline-end: 80px; }
  .dcb__head-title { font-size: 15px; }
  .dcb__price { font-size: 22px; }
  /* pill becomes a 2-line rounded rect: "חיסכון ₪X" / "הנחה נוספת לרכישה במזומן" */
  .dcb__pill {
    flex-direction: column;
    align-items: flex-start;       /* RTL → right-aligned */
    gap: 1px;
    height: auto;
    padding: 5px 11px;
    border-radius: 6px;
    white-space: normal;
    line-height: 1.25;
    text-align: right;
  }
  .dcb__pill-save, .dcb__pill-amt { font-size: 13.5px; }
  .dcb__pill-txt { font-size: 11px; }
  .dcb__note { font-size: 12px !important; line-height: 1.5 !important; }
  .dcb-img-badge { width: 64px; top: 6px; left: 6px; }
}

@media (max-width: 380px) {
  .dcb__main { margin-inline-end: 78px; }
  .dcb__price { font-size: 23px; }
}