/* ═══════════════════════════════════════════════════════════════════
   Recently Viewed — card-tag styles.

   Styles for the on-card "Recently viewed" indicator that marks
   products the customer has already looked at. Two on-card render
   modes (driven by recently_viewed_position_mode):
     - absolute_outside : tag hangs above the card top edge, anchored
                          to a corner via body class iwa-rv-card-pos-*
     - inline_inside    : tag sits as a banner attached to the bottom
                          of the product image (modifier class
                          .iwa-recently-viewed-card-tag--inline)

   Enqueued by class-recently-viewed.php::enqueue_assets() on every
   frontend page, gated by plugin_enabled + recently_viewed_indicator_enabled
   + WooCommerce availability. Global enqueue (not narrowed to is_shop /
   is_product) because the tag markup ships anywhere WC renders a
   product loop — home page, Elementor product widgets, [products]
   shortcode, theme product sliders, related/upsell sections.

   The QV drawer's "Recently viewed" PILL (rendered inside the QV
   drawer body next to the product title) lives in quick-view.css —
   it only renders inside the drawer, so no need to ship its styles
   globally.
   ═══════════════════════════════════════════════════════════════════ */

/* Defensive: if the theme sets overflow:hidden on li.product, override
   so the hanging tag isn't clipped. Some themes wrap product cards in
   additional containers (product-grid wrappers, hover-effect divs,
   Gutenberg block grids) and put overflow:hidden on THOSE — this rule
   only covers li.product / .product. Themes with deeper wrapper overflow
   will still clip the tag in the "above card" position. The "below image"
   position option (in feature settings) avoids the issue entirely by
   placing the tag inside the card's content flow. */
body.iwa-recently-viewed-active li.product,
body.iwa-recently-viewed-active .product {
    overflow: visible !important;
}

.iwa-recently-viewed-card-tag {
    position: absolute;
    /* Anchor to the TOP of the card via bottom:100%. The tag's bottom
       edge then sits flush at the card's top edge by default. The
       --iwa-rv-tag-mb variable adds an optional gap (positive value
       pushes the tag up away from the card) or overlap (negative). */
    bottom: 100%;
    margin-bottom: var(--iwa-rv-tag-mb, 0px);

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--iwa-rv-tag-pv, 3px) var(--iwa-rv-tag-ph, 10px);
    background: var(--iwa-rv-bg, #14130F);
    color:      var(--iwa-rv-fg, #FFFFFF);
    border-radius: 6px 6px 0 0;  /* only top corners rounded */
    font-size: var(--iwa-rv-tag-fs, 11px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 4;  /* below QV trigger (z-index 5) so they don't fight */
    pointer-events: none;  /* don't intercept clicks on the card */
}
.iwa-recently-viewed-card-tag svg { flex: 0 0 auto; }
.iwa-recently-viewed-card-tag__label { display: inline; }

/* Position variants — driven by body class */
body.iwa-rv-card-pos-top-left   li.product .iwa-recently-viewed-card-tag,
body.iwa-rv-card-pos-top-left   .product   .iwa-recently-viewed-card-tag {
    left: 10px;
    right: auto;
}
body.iwa-rv-card-pos-top-right  li.product .iwa-recently-viewed-card-tag,
body.iwa-rv-card-pos-top-right  .product   .iwa-recently-viewed-card-tag {
    right: 10px;
    left: auto;
}
body.iwa-rv-card-pos-top-center li.product .iwa-recently-viewed-card-tag,
body.iwa-rv-card-pos-top-center .product   .iwa-recently-viewed-card-tag {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
/* Full width — spans the entire top edge */
/* ─── Inline mode (position_mode = inline_inside) ─────────────────
   When the position mode is inline_inside the tag is injected by a
   filter on woocommerce_product_get_image and rendered AS A SIBLING
   of the image inside the theme's image container (.product-image
   in Frick's theme, or directly inside the link wrap in stock WC).
   It looks like a banner attached to the bottom of the image: full
   width, bottom-only rounded corners, content centered. CSS unsets
   all absolute-mode geometry the base rule and corner-position
   rules apply. Sizes come from inline-specific CSS variables
   (--iwa-rv-tag-inline-*) so the inline subcard can tune them
   independently of the absolute subcard's variables. */

/* Fallback wrap created by class-recently-viewed.php when no other
   recognized image wrap exists (QV off + Brand Badge off + Wishlist
   card off but inline mode is on). Mirrors the shape of QV's wrap
   and Brand Badge's fallback wrap so the inline tag has a sized
   positioned ancestor matching image dimensions. */
.iwa-recently-viewed-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.iwa-recently-viewed-card-tag--inline {
    position: relative;
    top: 0;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;

    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;

    border-radius: 0 0 6px 6px;
    padding: var(--iwa-rv-tag-inline-pv, 5px) var(--iwa-rv-tag-inline-ph, 5px);
    font-size: var(--iwa-rv-tag-inline-fs, 11px);
    margin: 0;
}

/* When the inline tag has been relocated into the opacity-escape
   frame (sibling of the theme card wrapper at li.product level), it
   no longer has the image sitting above it to flow against — the
   frame is an empty positioned box matching the image's bounding
   rect. Switch the tag to position: absolute anchored to the frame's
   bottom edge so the banner visually attaches to the bottom of the
   image just like it did inside the image wrap, but escapes the
   theme's opacity-fade-on-hover rule. */
.iwa-relocated-frame .iwa-recently-viewed-card-tag--inline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    margin: 0;
}