/* ============================================================
   JD Product Price Widget — Frontend Styles v2
   File: widgets/jd-product-price/css/jd-product-price.css
   ============================================================ */


/* ── Outer wrapper ───────────────────────────────────────── */

.jd-pp-wrap {
  display: flex;
  flex-direction: column;   /* badge on top, price row below */
  gap: 6px;
  margin: 0;
  padding: 0;
}


/* ── Price row — holds pre-text + prices + post-text ─────── */

.jd-pp-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;   /* spacing between pre/post and prices via margin in style tab */
}


/* ── Price inner — holds regular + sale price ────────────── */

.jd-pp-price-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;  /* overridden by slider control */
}


/* ════════════════════════════════════════════════════════════
   LAYOUT MODES
   The block layout fix: force column direction on the inner
   price container itself, not on WooCommerce's span.price
   which is unreliable cross-theme.
   ════════════════════════════════════════════════════════════ */

/* INLINE — side by side (default) */
.jd-pp-wrap.jd-pp-inline .jd-pp-price-inner {
  flex-direction: row;
}

/* BLOCK — stacked vertically */
.jd-pp-wrap.jd-pp-block .jd-pp-price-inner {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.jd-pp-wrap.jd-pp-block .jd-pp-price-row {
  flex-direction: column;
  align-items: flex-start;
}


/* ── Regular price span ──────────────────────────────────── */

.jd-pp-regular {
  display: inline-flex;
  align-items: baseline;
  text-decoration: line-through;
  opacity: 0.6;
  color: #999;
  background: transparent !important;  /* override WooCommerce */
}

.jd-pp-regular .amount {
  color: inherit;
}


/* ── Sale price span ─────────────────────────────────────── */

.jd-pp-sale {
  display: inline-flex;
  align-items: baseline;
  color: #3D4FD6;
  background: transparent !important;  /* override WooCommerce */
  text-decoration: none !important;
}

.jd-pp-sale .amount {
  color: inherit;
}


/* ── WooCommerce override — neutralise their price span ───── */

/* WooCommerce outputs span.price or p.price wrapping del+ins.
   We bypass these entirely since we re-parse the HTML into
   our own .jd-pp-regular and .jd-pp-sale spans.
   These rules prevent leftover WC styles leaking through.    */

.jd-pp-wrap span.price,
.jd-pp-wrap p.price {
  display: contents !important;  /* invisible in layout, children flow directly */
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Prevent WooCommerce del/ins from interfering
   (our parser strips these — safety fallback)               */
.jd-pp-wrap del,
.jd-pp-wrap ins {
  background: transparent !important;
  text-decoration: none !important;
}


/* ── Pre text ────────────────────────────────────────────── */

.jd-pp-pre {
  display: inline-flex;
  align-items: baseline;
  color: #64748B;
  font-size: 0.875em;
  margin-right: 6px;  /* overridden by spacing slider */
  white-space: nowrap;
}


/* ── Post text ───────────────────────────────────────────── */

.jd-pp-post {
  display: inline-flex;
  align-items: baseline;
  color: #64748B;
  font-size: 0.875em;
  margin-left: 6px;  /* overridden by spacing slider */
  white-space: nowrap;
}

/* In block mode, post text drops below */
.jd-pp-wrap.jd-pp-block .jd-pp-post {
  margin-left: 0;
  margin-top: 2px;
}


/* ── Sale badge ──────────────────────────────────────────── */

.jd-pp-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: #3D4FD6;
  border-radius: 4px;
  line-height: 1.6;
  align-self: flex-start;
}


/* ── Alignment — controlled via Elementor responsive control
   align-items on .jd-pp-wrap controls the cross-axis of the
   flex column, effectively aligning content left/center/right */

.jd-pp-wrap {
  align-items: flex-start;  /* default — overridden by control */
}