/**
 * Pet Presence POD - Preview Thumbnail Styles
 *
 * Applied to:
 *   - WooCommerce cart line-item thumbnail (filter: woocommerce_cart_item_thumbnail)
 *   - WooCommerce order-item thumbnail       (filter: woocommerce_order_item_thumbnail)
 *   - The "Custom Preview" meta row          (filter: woocommerce_get_item_data)
 *
 * Both thumbnails are emitted as <img class="attachment-woocommerce_thumbnail"
 * alt="Custom preview"> by class-preview-handler.php, so we hook into that
 * selector plus an opt-in helper class .pet-presence-cart-thumb.
 */

@import url('./tokens.css');

/* Thumbnail (cart row + order row) */
img.attachment-woocommerce_thumbnail[alt="Custom preview"],
.pet-presence-cart-thumb {
    border-radius: var(--pp-radius-sm);
    box-shadow: var(--pp-shadow-xs);
    border: 2px solid var(--pp-primary-container);
    background: var(--pp-surface-low);
    object-fit: cover;
    display: block;
    width: 80px;
    height: 80px;
    transition: transform var(--pp-dur-sm) var(--pp-ease);
    text-indent: -9999px;     /* hide broken alt text from showing inline */
    overflow: hidden;
}

img.attachment-woocommerce_thumbnail[alt="Custom preview"]:hover,
.pet-presence-cart-thumb:hover {
    transform: scale(1.04);
    box-shadow: var(--pp-shadow-sm);
}

/* "Custom Preview" meta value container — when the inline <img> is wrapped,
 * we want a small chip-style badge alongside it. */
.woocommerce-cart .pet-presence-preview-chip,
.woocommerce-checkout .pet-presence-preview-chip,
.widget_shopping_cart .pet-presence-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pp-space-2);
    padding: var(--pp-space-1) var(--pp-space-3) var(--pp-space-1) var(--pp-space-1);
    background: var(--pp-primary-soft);
    color: var(--pp-primary);
    border-radius: var(--pp-radius-pill);
    font-family: var(--pp-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.woocommerce-cart .pet-presence-preview-chip img,
.woocommerce-checkout .pet-presence-preview-chip img,
.widget_shopping_cart .pet-presence-preview-chip img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: 2px solid var(--pp-primary-container);
    object-fit: cover;
    text-indent: -9999px;
    overflow: hidden;
}