/* =========================================================
   PRICEHACK_PHOTO_BADGES_CANONICAL_V1

   This file is the FINAL authority only for badges placed
   inside .photo-badge-overlay.

   Used by:
   - public offer cards
   - product detail photo
   - admin live preview
   ========================================================= */

.photo-badge-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  pointer-events:none!important;
}


/* ---------- STACK ---------- */

.photo-badge-overlay .photo-badge-stack{
  position:absolute!important;

  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;

  width:auto!important;
  max-width:calc(
    100% - (var(--photo-badge-edge) * 2)
  )!important;

  gap:var(--photo-badge-gap)!important;

  margin:0!important;
  padding:0!important;

  pointer-events:none!important;
}


/* ---------- POSITIONS ---------- */

.photo-badge-overlay .photo-badge-stack-top-left{
  left:var(--photo-badge-edge)!important;
  top:var(--photo-badge-edge)!important;
  right:auto!important;
  bottom:auto!important;

  align-items:flex-start!important;
}

.photo-badge-overlay .photo-badge-stack-top-right{
  right:var(--photo-badge-edge)!important;
  top:var(--photo-badge-edge)!important;
  left:auto!important;
  bottom:auto!important;

  align-items:flex-end!important;
}

.photo-badge-overlay .photo-badge-stack-bottom-left{
  left:var(--photo-badge-edge)!important;
  bottom:var(--photo-badge-edge)!important;
  right:auto!important;
  top:auto!important;

  align-items:flex-start!important;
}

.photo-badge-overlay .photo-badge-stack-bottom-right{
  right:var(--photo-badge-edge)!important;
  bottom:var(--photo-badge-edge)!important;
  left:auto!important;
  top:auto!important;

  align-items:flex-end!important;
}


/* ---------- EXACT GEOMETRY ---------- */

.photo-badge-overlay .photo-badge-stack > *{
  position:static!important;

  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;

  order:var(--badge-order)!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 auto!important;

  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;

  height:var(--photo-badge-height)!important;
  min-height:var(--photo-badge-height)!important;
  max-height:var(--photo-badge-height)!important;

  padding:
    0
    var(--photo-badge-padding-x)
    !important;

  margin:0!important;

  border:0!important;

  border-radius:
    var(--photo-badge-radius)
    !important;

  font-family:
    var(--font-accent)
    !important;

  font-size:
    var(--photo-badge-font-size)
    !important;

  font-weight:900!important;
  line-height:1!important;
  letter-spacing:normal!important;

  white-space:nowrap!important;

  box-sizing:border-box!important;

  transform:none!important;

  box-shadow:
    0 5px 12px rgba(0,0,0,.13)
    !important;
}


/* ---------- COLORS ---------- */

.photo-badge-overlay .top-badge{
  background:var(--photo-badge-top-bg)!important;
  color:var(--photo-badge-top-text)!important;
}

.photo-badge-overlay .combo-corner-badge{
  background:var(--photo-badge-combo-bg)!important;
  color:var(--photo-badge-combo-text)!important;
}

.photo-badge-overlay .discount-badge{
  background:
    var(--photo-badge-discount-percent-bg)
    !important;

  color:
    var(--photo-badge-discount-percent-text)
    !important;
}

.photo-badge-overlay .rub-badge{
  background:
    var(--photo-badge-discount-rub-bg)
    !important;

  color:
    var(--photo-badge-discount-rub-text)
    !important;
}

.photo-badge-overlay .points-badge{
  background:
    var(--photo-badge-review-points-bg)
    !important;

  color:
    var(--photo-badge-review-points-text)
    !important;
}

.photo-badge-overlay .combo-benefit-badge{
  background:
    var(--photo-badge-combo-benefit-bg)
    !important;

  color:
    var(--photo-badge-combo-benefit-text)
    !important;
}