/* =================================================================
   kz-price-fix.css
   Targeted fixes for price overlap, z-index stacking, and layout
   issues found across all product / program pages.
   Loads AFTER kz-redesign.css.
   ================================================================= */


/* ── 1. "RON" currency label — switch absolute → inline ────────────
   Root cause: kz.css sets position:absolute; top:5px on
   .currency-programe-workout. Inline style adds right:-33px or
   right:-58px. When the font changed from ANTONIO-LIGHT to
   Arquitecta the glyph metrics differ, so "RON" drifts outside
   its container and overlaps adjacent cards or text.
   Fix: make it flow inline immediately after the price number.
   The inline right:-33px / right:-58px have no effect on
   position:relative elements, so no phtml changes needed.
   ─────────────────────────────────────────────────────────────── */
.currency-programe-workout {
  position: relative   !important;
  display: inline-block !important;
  top: auto            !important;
  right: auto          !important;
  left: auto           !important;
  font-size: 1rem      !important;
  vertical-align: top  !important;
  margin-left: 4px     !important;
  margin-top: 5px      !important;
  font-family: "Arquitecta", sans-serif !important;
  color: inherit       !important;
}


/* ── 2. Price inner wrapper — make it inline-flex ──────────────────
   The <div style="position:relative"> inside every
   .price-programe-workout is unnecessary now that .currency is
   position:relative. Switching it to inline-flex keeps the number
   and "RON" on the same baseline row.
   ─────────────────────────────────────────────────────────────── */
.price-programe-workout > div {
  position:    static       !important;
  display:     inline-flex  !important;
  align-items: flex-start   !important;
}


/* ── 3. Price in card grid (.programe-workout-background) ──────────
   .col-4.programe-workout-background has no position:relative,
   so kz.css "position:absolute; right:99px; bottom:24px" anchors
   to the nearest positioned ancestor (the whole section), causing
   the price to float over an unrelated card.
   Fix: revert to normal document flow inside these cards.
   ─────────────────────────────────────────────────────────────── */
.programe-workout-background .price-programe-workout {
  position:   static !important;
  display:    block  !important;
  right:      auto   !important;
  left:       auto   !important;
  bottom:     auto   !important;
  top:        auto   !important;
  font-size:  1.8rem !important;
  margin-top: 8px    !important;
}


/* ── 4. Price in row/col slider cards (_alimentar, _combos, _workouts)
   Same problem: price placed in .col-4 without a positioned parent.
   Inline style "left:15px; bottom:0; top:0" stretches the absolute
   element to full card height, overlapping the buy button column.
   ─────────────────────────────────────────────────────────────── */
.col-4 > .price-programe-workout,
.col-4 > h4.price-programe-workout {
  position: static !important;
  display:  block  !important;
  right:    auto   !important;
  left:     auto   !important;
  bottom:   auto   !important;
  top:      auto   !important;
}


/* ── 5. Prices overlaid on image banners (keep absolute, fix stack) ─
   Wide product cards (style="width:560px; position:relative") use
   .price-programe-workout intentionally over an image. These are
   fine — just ensure they sit above the image z-stack.
   ─────────────────────────────────────────────────────────────── */
[style*="width: 560px"] .price-programe-workout,
[style*="width:560px"]  .price-programe-workout,
.price-programe-workout-banner {
  z-index: 5 !important;
}


/* ── 6. Price font & color — update to new design system ───────────
   Old: ANTONIO-LIGHT, #D32C8A (old purple-pink)
   New: Arquitecta, #a8757f (new dusty rose)
   ─────────────────────────────────────────────────────────────── */
.price-programe-workout,
.price-programe-workout-banner {
  font-family: "Arquitecta", sans-serif !important;
  color: #a8757f !important;
}


/* ── 7. z-index:-1 on product hero image columns ───────────────────
   Pattern: <div class="col-6 fade-in-section"
                  style="position:relative; z-index:-1">
   z-index:-1 sends the product hero image behind the page
   background, making it invisible. CSS !important overrides the
   inline style.
   ─────────────────────────────────────────────────────────────── */
.fade-in-section {
  z-index: auto !important;
}


/* ── 8. line-delete strikethrough — stop overflow ──────────────────
   Inline style in _alimentar.phtml / _lecture.phtml defines:
     width:190%; transform:rotate(161deg); position:absolute;
   The 190% width makes the bar extend 90% beyond its container,
   overlapping the adjacent buy-button column.
   Fix: clip to 100% and use a gentler angle that stays in bounds.
   ─────────────────────────────────────────────────────────────── */
.line-delete {
  width:     100% !important;
  left:      0    !important;
  transform: rotate(-6deg) !important;
  pointer-events: none;
  overflow: hidden;
}


/* ── 9. alege-button — remove excessive fixed right margin ─────────
   kz.css: margin-right:201px; margin-left:32px — fixed px values
   cause the button to overflow its container on layouts narrower
   than ~400px and mis-align on large screens.
   ─────────────────────────────────────────────────────────────── */
.alege-button {
  margin-right: auto    !important;
  margin-left:  auto    !important;
  display:      inline-block !important;
}


/* ── 10. alege-button color — old purple → new pink ────────────────
   Old: border #882678, color #882678
   New: border #a8757f, color #a8757f
   ─────────────────────────────────────────────────────────────── */
.alege-button,
.alege-button-big,
.alege-button-mobile,
.alege-button-green {
  border-color: #a8757f !important;
  color:        #a8757f !important;
  font-family:  "Arquitecta", sans-serif !important;
  letter-spacing: 0.08em !important;
}

.alege-button:hover,
.alege-button-big:hover,
.alege-button-mobile:hover {
  border-color: #8a5d66 !important;
  color:        #8a5d66 !important;
}


/* ── 11. Asset 1.png badge — fix stacking over content ─────────────
   Multiple phtml files use:
     <img src="/img/frontend/Asset 1.png"
          style="position:absolute; top:0; right:0; margin-top:-7px">
   This badge floats at z-index:auto which can land above modal
   overlays or nav. Cap it.
   ─────────────────────────────────────────────────────────────── */
img[src*="Asset 1.png"] {
  z-index: 2 !important;
}


/* ── 12. gradient-text price — old purple gradient → new pink ───────
   .gradient-text.price uses #3B0737 → #882678 linear gradient.
   Swap to new design palette.
   ─────────────────────────────────────────────────────────────── */
.gradient-text {
  background: -webkit-linear-gradient(left, #8a5d66, #a8757f) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* ── 13. Abonament page — line-delete inside inline price ───────────
   In _abonament.phtml the old price ("249 RON/LUNĂ") sits inside
   a display:inline-block wrapper. A diagonal line-delete inside
   display:inline-block with 190% width spills into the sibling
   col. Rule 8 above handles this globally, but scoped here as
   a safety net with tighter horizontal control.
   ─────────────────────────────────────────────────────────────── */
#abonament-types [style*="display: inline-block"] {
  overflow: hidden !important;
}

#abonament-types .line-delete {
  width:     120% !important;
  left:      -10% !important;
  top:       50%  !important;
  transform: rotate(-3deg) !important;
}