/* =============================================
   Pinterest Pin Button Pro – ppbp.css  v1.2
   ============================================= */

/* ── CONTAINER ── */
.ppbp-container {
  position: relative !important;
}

.ppbp-wrap {
  display:    inline-block;
  line-height: 0;
  overflow:    visible !important;
}

.ppbp-wrap > img {
  display:   block;
  max-width: 100%;
}

/* ── OVERLAY ── */
.ppbp-overlay {
  position:       absolute !important;
  top:            0        !important;
  left:           0        !important;
  right:          0        !important;
  bottom:         0        !important;
  width:          auto     !important;   /* avoid theme: width:100px etc */
  height:         auto     !important;
  background:     var(--ppbp-overlay-bg, rgba(0,0,0,0.15)) !important;
  opacity:        0;
  transition:     opacity var(--ppbp-trans, 200ms) ease;
  pointer-events: none !important;
  border-radius:  0        !important;   /* overlay is always rectangle */
  z-index:        calc(var(--ppbp-z, 9999) - 1);

  /* Hard-reset anything a theme might inject */
  transform:   none !important;
  box-shadow:  none !important;
  border:      none !important;
  padding:     0    !important;
  margin:      0    !important;
}

.ppbp-hovered .ppbp-overlay,
.ppbp-always  .ppbp-overlay {
  opacity: 1;
}

/* ── BUTTON – full reset to prevent any theme bleed ── */
.ppbp-btn {
  /* Layout – must NOT stretch */
  position:    absolute        !important;
  display:     inline-flex     !important;
  align-items: center          !important;
  gap:         5px             !important;

  /* Size – shrink-wrap the content */
  width:       max-content     !important;   /* KEY FIX: never expand beyond content */
  min-width:   0               !important;
  height:      auto            !important;
  min-height:  0               !important;
  max-width:   calc(100% - 16px) !important; /* don't overflow container */

  /* Prevent theme from setting inset:0 / right:0 / bottom:0 */
  right:       auto            !important;
  bottom:      auto            !important;

  /* Visual */
  background:      var(--ppbp-bg, #e60023)  !important;
  color:           var(--ppbp-color, #fff)  !important;
  border:          none                     !important;
  border-radius:   var(--ppbp-radius, 4px)  !important;
  padding:         var(--ppbp-pv, 6px) var(--ppbp-ph, 10px) !important;
  font-size:       var(--ppbp-font-size, 13px) !important;
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight:     600       !important;
  line-height:     1         !important;
  white-space:     nowrap    !important;
  text-decoration: none      !important;
  cursor:          pointer   !important;
  box-sizing:      border-box !important;

  /* Visibility */
  opacity:         0;
  z-index:         var(--ppbp-z, 9999);
  box-shadow:      0 2px 8px rgba(0,0,0,.30) !important;

  /* Transition */
  transition:
    opacity    var(--ppbp-trans, 200ms) ease,
    transform  var(--ppbp-trans, 200ms) ease,
    background var(--ppbp-trans, 200ms) ease;

  /* No theme text effects */
  text-shadow:         none  !important;
  letter-spacing:      normal !important;
  text-transform:      none  !important;

  user-select:         none;
  -webkit-user-select: none;
}

/* Show on hover / always */
.ppbp-hovered .ppbp-btn,
.ppbp-always  .ppbp-btn {
  opacity: var(--ppbp-opacity, 0.95);
}

/* Hover on the button itself */
.ppbp-btn:hover,
.ppbp-btn:focus {
  background: var(--ppbp-bg-hover, #ad081b) !important;
  transform:  scale(1.05) !important;
  opacity:    1           !important;
  outline:    none        !important;
}

/* ── POSITIONS ── */
.ppbp-pos-top-left {
  top:    8px !important;
  left:   8px !important;
  right:  auto !important;
  bottom: auto !important;
  transform: none;
}
.ppbp-pos-top-right {
  top:    8px !important;
  right:  8px !important;
  left:   auto !important;
  bottom: auto !important;
  transform: none;
}
.ppbp-pos-bottom-left {
  bottom: 8px !important;
  left:   8px !important;
  top:    auto !important;
  right:  auto !important;
  transform: none;
}
.ppbp-pos-bottom-right {
  bottom: 8px !important;
  right:  8px !important;
  top:    auto !important;
  left:   auto !important;
  transform: none;
}
.ppbp-pos-center {
  top:       50%  !important;
  left:      50%  !important;
  right:     auto !important;
  bottom:    auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Center: hover overrides */
.ppbp-hovered .ppbp-pos-center,
.ppbp-always  .ppbp-pos-center {
  opacity:   var(--ppbp-opacity, 0.95);
  transform: translate(-50%, -50%) scale(1) !important;
}
.ppbp-pos-center.ppbp-btn:hover {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

/* ── ICON ── */
.ppbp-btn svg {
  display:        block      !important;
  width:          var(--ppbp-icon-size, 16px) !important;
  height:         var(--ppbp-icon-size, 16px) !important;
  min-width:      var(--ppbp-icon-size, 16px) !important;
  fill:           var(--ppbp-color, #fff)     !important;
  flex-shrink:    0          !important;
  pointer-events: none;
  background:     none       !important;
  border-radius:  0          !important;
  border:         none       !important;
  box-shadow:     none       !important;
}

.ppbp-btn-text {
  display:     inline     !important;
  white-space: nowrap     !important;
  color:       inherit    !important;
  font-size:   inherit    !important;
  line-height: 1          !important;
  background:  none       !important;
  padding:     0          !important;
  margin:      0          !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .ppbp-btn {
    font-size: max(10px, calc(var(--ppbp-font-size, 13px) * 0.85)) !important;
    padding:   calc(var(--ppbp-pv, 6px) * 0.8) calc(var(--ppbp-ph, 10px) * 0.8) !important;
  }
}

/* Touch: always show */
@media (hover: none) {
  .ppbp-btn     { opacity: var(--ppbp-opacity, 0.95) !important; }
  .ppbp-overlay { opacity: 0.12 !important; }
}

/* ── WORDPRESS GALLERY BLOCK OVERRIDES ──
   wp-block-gallery.is-cropped sets:
     a { width:100%; height:100%; object-fit:cover }
   on ALL <a> inside gallery figures.
   Our button is now a <span> so this doesn't apply,
   but we still add these guards for safety. */

.wp-block-gallery .ppbp-btn,
.wp-block-gallery.is-cropped .ppbp-btn,
.wp-block-gallery .wp-block-image .ppbp-btn,
[class*="wp-block-gallery"] .ppbp-btn {
  width:       max-content !important;
  height:      auto        !important;
  min-height:  0           !important;
  object-fit:  unset       !important;
  align-self:  auto        !important;
  flex:        none        !important;
  right:       auto        !important;
  bottom:      auto        !important;
}

/* Gallery containers already have position:relative from WP, don't double-set */
.wp-block-gallery .wp-block-image.ppbp-container,
.wp-block-gallery figure.ppbp-container {
  overflow: visible !important; /* allow button to render outside cropped bounds */
}

/* ══════════════════════════════════════════════
   PORTAL BUTTON (body-level, position:fixed)
   Hoàn toàn nằm ngoài DOM gallery
   ══════════════════════════════════════════════ */

/* Portal button uses same visual as .ppbp-btn */
.ppbp-portal-btn {
  background:    var(--ppbp-bg, #e60023)  !important;
  color:         var(--ppbp-color, #fff)  !important;
  border-radius: var(--ppbp-radius, 4px)  !important;
  padding:       var(--ppbp-pv, 6px) var(--ppbp-ph, 10px) !important;
  font-size:     var(--ppbp-font-size, 13px) !important;
  box-shadow:    0 2px 8px rgba(0,0,0,.30) !important;
  opacity:       var(--ppbp-opacity, 0.95) !important;
  transition:    background var(--ppbp-trans,200ms) ease,
                 transform  var(--ppbp-trans,200ms) ease !important;
}
.ppbp-portal-btn:hover {
  background: var(--ppbp-bg-hover, #ad081b) !important;
  transform:  scale(1.05) !important;
  opacity:    1 !important;
}
.ppbp-portal-btn svg {
  width:       var(--ppbp-icon-size, 16px) !important;
  height:      var(--ppbp-icon-size, 16px) !important;
  fill:        var(--ppbp-color, #fff) !important;
  display:     block !important;
  flex-shrink: 0 !important;
  background:  none !important;
  border:      none !important;
  border-radius: 0 !important;
}