/* ONEPIDESIGN – Smart Product Badges v1.8.0
 * Badge Zone độc lập + tự co giãn theo box + chống title bị CSS ngoài kéo lên đè nhãn.
 */

/* Nguồn nhãn PHP luôn ẩn cho tới khi JS đặt đúng Badge Zone. */
.onepi-badge-source{display:none!important;visibility:hidden!important}

/* Zone luôn là một hàng layout thật, không absolute, không float. */
.onepi-inline-badges.onepi-badge-zone{
  --opb-card-scale:1;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:flex-start!important;
  justify-content:flex-start!important;
  column-gap:calc(var(--opb-gap,4px) * var(--opb-card-scale,1))!important;
  row-gap:calc(var(--opb-row-gap,4px) * var(--opb-card-scale,1))!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  flex:0 0 100%!important;
  position:static!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  inset:auto!important;
  float:none!important;
  clear:both!important;
  z-index:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  padding:0!important;
  line-height:1!important;
  overflow:visible!important;
  visibility:visible!important;
}

/* Flatsome: box-text -> Badge Zone -> title-wrapper -> price-wrapper. */
.product-small .box-text.onepi-has-before-badges,
li.product .box-text.onepi-has-before-badges,
.type-product .box-text.onepi-has-before-badges{
  padding-top:calc(var(--opb-image-gap,3px) * var(--opb-card-scale,1))!important;
}

.product-small .box-text.onepi-has-badge-zone > .onepi-badge-zone,
li.product .box-text.onepi-has-badge-zone > .onepi-badge-zone,
.type-product .box-text.onepi-has-badge-zone > .onepi-badge-zone,
.box-text.onepi-has-badge-zone > .onepi-badge-zone{
  display:flex!important;
  position:static!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.onepi-inline-before-title.onepi-badge-zone{margin:0 0 calc(var(--opb-title-gap,3px) * var(--opb-card-scale,1))!important}
.onepi-inline-after-title.onepi-badge-zone{margin:calc(var(--opb-title-gap,3px) * var(--opb-card-scale,1)) 0 0!important}
.onepi-inline-after-price.onepi-badge-zone{margin:calc(var(--opb-title-gap,3px) * var(--opb-card-scale,1)) 0 0!important}

/*
 * FIX XUNG ĐỘT THỰC TẾ TRÊN ONEPIDESIGN:
 * CSS ngoài site có:
 *   .shop-container .box-text p { margin-top:-1.5em!important; }
 *   .product-section .box-text p { margin-top:-.6em!important; }
 * Nó kéo title lên trên Badge Zone. Chỉ reset ở SHOP/RELATED; HOME giữ nguyên vì user xác nhận đang đẹp.
 */
body .shop-container .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper,
body .shop-container .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper > p,
body .woocommerce .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper,
body .woocommerce .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper > p,
body .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper,
body .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper > p.name.product-title,
body .box-text.onepi-badge-host-shop.onepi-has-before-badges > .title-wrapper > p.woocommerce-loop-product__title,
body .product-section .box-text.onepi-badge-host-related.onepi-has-before-badges > .title-wrapper,
body .product-section .box-text.onepi-badge-host-related.onepi-has-before-badges > .title-wrapper > p,
body .related-products-wrapper .box-text.onepi-badge-host-related.onepi-has-before-badges > .title-wrapper,
body .related-products-wrapper .box-text.onepi-badge-host-related.onepi-has-before-badges > .title-wrapper > p{
  margin-top:0!important;
  padding-top:0!important;
  transform:none!important;
  position:relative!important;
  float:none!important;
  clear:both!important;
}

/* Title wrapper sau badge phải chiếm hàng riêng. */
.product-small .box-text.onepi-has-badge-zone > .title-wrapper,
li.product .box-text.onepi-has-badge-zone > .title-wrapper,
.type-product .box-text.onepi-has-badge-zone > .title-wrapper,
.box-text.onepi-has-badge-zone > .title-wrapper{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  transform:none!important;
}

.single-product .summary .onepi-badge-zone,
.single-product .product-info .onepi-badge-zone{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  position:static!important;
  float:none!important;
  clear:both!important;
}
.single-product .onepi-inline-before-title.onepi-badge-zone{margin:0 0 calc(var(--opb-title-gap,3px) * var(--opb-card-scale,1))!important}

.onepi-product-badge{
  position:relative!important;
  inset:auto!important;
  display:inline-flex!important;
  flex:0 1 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:calc(4px * var(--opb-card-scale,1))!important;
  margin:0!important;
  padding:calc(var(--opb-py,4px) * var(--opb-card-scale,1)) calc(var(--opb-px,9px) * var(--opb-card-scale,1))!important;
  background:var(--opb-bg,#147bd9);
  color:var(--opb-text,#fff)!important;
  border:calc(var(--opb-bw,0px) * var(--opb-card-scale,1)) solid var(--opb-border,#147bd9)!important;
  border-radius:calc(var(--opb-radius,6px) * var(--opb-card-scale,1))!important;
  font-family:var(--opb-font,inherit)!important;
  font-size:calc(var(--opb-fs,11px) * var(--opb-card-scale,1))!important;
  font-weight:var(--opb-fw,700)!important;
  letter-spacing:calc(var(--opb-ls,.2px) * var(--opb-card-scale,1))!important;
  line-height:var(--opb-lh,1.05)!important;
  text-transform:var(--opb-transform,uppercase)!important;
  text-decoration:none!important;
  text-align:center!important;
  box-shadow:var(--opb-shadow,0 3px 10px rgba(15,23,42,.12));
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
  animation-duration:var(--opb-anim-duration,2.2s);
  animation-delay:var(--opb-anim-delay,0s);
  animation-iteration-count:var(--opb-anim-repeat,infinite);
  animation-fill-mode:both;
}
.onepi-product-badge:hover{color:var(--opb-text,#fff)!important;text-decoration:none!important;filter:brightness(1.04)}
.onepi-style-square{border-radius:2px!important}
.onepi-style-outline{background:#fff!important;color:var(--opb-bg1,#147bd9)!important;border-width:max(1px,var(--opb-bw,1px))!important}
.onepi-style-glass{background:color-mix(in srgb,var(--opb-bg1,#147bd9) 82%,white 18%)!important}
.onepi-style-ribbon{border-radius:2px 8px 8px 2px!important}

.onepi-anim-pulse{animation-name:onepiBadgePulse;animation-timing-function:ease-in-out}
.onepi-anim-float{animation-name:onepiBadgeFloat;animation-timing-function:ease-in-out}
.onepi-anim-glow{animation-name:onepiBadgeGlow;animation-timing-function:ease-in-out}
.onepi-anim-bounce{animation-name:onepiBadgeBounce;animation-timing-function:ease-in-out}
.onepi-anim-none{animation:none!important}
@keyframes onepiBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes onepiBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes onepiBadgeGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes onepiBadgeBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.onepi-product-badge{animation:none!important}}

/* Trang nhãn dùng đúng archive-product.php của Flatsome; chỉ bổ sung mô tả nhãn. */
.onepi-badge-archive-description{margin:8px 0 12px}

@media(max-width:549px){
  .onepi-inline-badges.onepi-badge-zone{
    column-gap:calc(var(--opb-mobile-gap,3px) * var(--opb-card-scale,1))!important;
    row-gap:calc(var(--opb-mobile-gap,3px) * var(--opb-card-scale,1))!important;
  }
}