/**
 * Medpaid — "HSA/FSA Eligible" product image overlay.
 *
 * Goal: land the badge in the corner of the product IMAGE across arbitrary themes.
 * Strategy: anchor to a container we control (classic loop wrapper) or to the
 * WooCommerce image containers that are stable across themes (galleries, block
 * image wrappers). The badge is inset from the corner so themes that clip the
 * thumbnail with overflow:hidden (zoom effects) don't cut it off. A few targeted
 * !important rules resist aggressive theme resets on color/size.
 */

/* Positioning context we add around classic loop/grid thumbnails. */
.medpaid-overlay-wrap {
	position: relative !important;
	display: block;
	line-height: 0;
}

.medpaid-overlay-wrap > img,
.medpaid-overlay-wrap > a > img,
.medpaid-overlay-wrap > picture img {
	max-width: 100%;
	height: auto;
}

/* Stable anchors for single galleries and block-grid image containers. */
.woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery,
.wc-block-components-product-image-gallery,
.wp-block-woocommerce-product-image,
.wc-block-components-product-image,
.wc-block-grid__product-image {
	position: relative;
}

/* Badge base. */
.medpaid-overlay-badge {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	max-width: calc(100% - 16px);
	line-height: 1.2;
	pointer-events: none;
	text-decoration: none;
}

/* Corners (inset so overflow:hidden thumbnails don't clip the badge). */
.medpaid-overlay-badge--top-left {
	top: 8px;
	left: 8px;
}

.medpaid-overlay-badge--top-right {
	top: 8px;
	right: 8px;
}

.medpaid-overlay-badge--bottom-left {
	bottom: 8px;
	left: 8px;
}

.medpaid-overlay-badge--bottom-right {
	bottom: 8px;
	right: 8px;
}

/* Text badge. Background + text color are applied inline (configurable, with
   auto-contrast); these are fallbacks only. Corner radius comes from the shape
   modifier below. */
.medpaid-overlay-badge--text {
	padding: 4px 10px;
	background: #0e7c86;
	color: #ffffff;
	font-family: inherit;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.2 !important;
	letter-spacing: 0.2px;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Text badge shapes. */
.medpaid-overlay-badge--shape-pill {
	border-radius: 999px;
}

.medpaid-overlay-badge--shape-rounded {
	border-radius: 6px;
}

.medpaid-overlay-badge--shape-square {
	border-radius: 0;
}

/* Icon image. */
.medpaid-overlay-badge--icon {
	padding: 0;
	background: none;
	box-shadow: none;
}

.medpaid-overlay-badge--icon img {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.medpaid-overlay-badge--icon.is-size-small img {
	height: 26px !important;
}

.medpaid-overlay-badge--icon.is-size-medium img {
	height: 40px !important;
}

.medpaid-overlay-badge--icon.is-size-large img {
	height: 56px !important;
}

/* Small screens: keep the pill from dominating tiny thumbnails. */
@media (max-width: 480px) {
	.medpaid-overlay-badge--text {
		padding: 3px 8px;
		font-size: 11px !important;
	}

	.medpaid-overlay-badge--icon.is-size-large img {
		height: 44px !important;
	}
}

/* ==========================================================================
   Cart & mini-cart thumbnail badge  (includes/cart-badge.php)

   One ::before rule serves every cart surface. The mode-specific values (short
   text pill vs wordless corner mark, colors, corner insets) arrive as custom
   properties printed per request by medpaid_cart_badge_inline_css(), so this
   stylesheet stays static and cacheable while remaining configurable.
   ========================================================================== */

/* Classic cart + mini-cart: the wrapper we add around the thumbnail. */
.medpaid-cart-thumb {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.medpaid-cart-thumb > img {
	max-width: 100%;
	height: auto;
}

/* Block cart, React mini-cart drawer, and Interactivity API mini-cart drawer all
   use this cell; the row class is added by assets/js/medpaid-cart-badge.js.

   The badge anchors to the image LINK, not the cell: the cell is a stretched
   table-cell whose box runs the full height of the row, so a bottom-corner badge
   anchored to it would float below the thumbnail. The link is given a block box
   so it wraps the image exactly, which also means the corner insets need no
   correction for the cell's 16px gutter.

   Consequence: a product hidden from the catalog renders in the cart without a
   link, and gets no badge. That is the only cart surface the badge misses. */
.medpaid-cart-item--eligible .wc-block-cart-item__image > a {
	position: relative;
	display: block;
	line-height: 0;
}

/* The badge itself. ::before is used rather than ::after because WooCommerce
   already occupies ::after on the block cart's image link (skeleton shimmer). */
.medpaid-cart-thumb::before,
.medpaid-cart-item--eligible .wc-block-cart-item__image > a::before {
	content: var(--medpaid-cbadge-content, "");
	position: absolute;
	z-index: 5;
	display: block;
	box-sizing: border-box;
	width: var(--medpaid-cbadge-w, auto);
	min-width: var(--medpaid-cbadge-minw, 0);
	max-width: var(--medpaid-cbadge-maxw, calc(100% - 8px));
	aspect-ratio: var(--medpaid-cbadge-ar, auto);
	padding: var(--medpaid-cbadge-pad, 2px 5px);
	border-radius: var(--medpaid-cbadge-radius, 999px);
	background-color: var(--medpaid-cbadge-bg, #0e7c86);
	background-image: var(--medpaid-cbadge-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: var(--medpaid-cbadge-shadow, 0 1px 2px rgba(0, 0, 0, 0.28));
	color: var(--medpaid-cbadge-fg, #ffffff);
	font-family: inherit;
	font-size: var(--medpaid-cbadge-fs, 9px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.2px;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* Corner. Both anchors are the image box itself, so one set of insets serves. */
.medpaid-cart-thumb::before,
.medpaid-cart-item--eligible .wc-block-cart-item__image > a::before {
	top: var(--medpaid-cbadge-top, auto);
	right: var(--medpaid-cbadge-right, auto);
	bottom: var(--medpaid-cbadge-bottom, 4px);
	left: var(--medpaid-cbadge-left, 4px);
}

/* Classic mini-cart widget: WooCommerce floats the 32px thumbnail
   (.cart_list li img { float: right; margin-left: 4px; width: 32px }). The
   wrapper has to take that float over, or the row layout collapses. Logical
   properties keep this correct in RTL. */
.woocommerce ul.cart_list li .medpaid-cart-thumb,
.woocommerce ul.product_list_widget li .medpaid-cart-thumb,
.woocommerce-mini-cart .medpaid-cart-thumb--mini {
	float: inline-end;
	width: 32px;
	margin-inline-start: 4px;
}

.woocommerce ul.cart_list li .medpaid-cart-thumb img,
.woocommerce ul.product_list_widget li .medpaid-cart-thumb img,
.woocommerce-mini-cart .medpaid-cart-thumb--mini img {
	float: none;
	width: 100%;
	margin: 0;
}

/* Below ~40px of thumbnail there is no room for a padded pill; tighten it so a
   short label still reads instead of being clipped to an ellipsis. */
.medpaid-cart-thumb--mini::before {
	--medpaid-cbadge-fs: 7px;
	--medpaid-cbadge-pad: 1px 3px;
	--medpaid-cbadge-minw: 12px;
	--medpaid-cbadge-maxw: calc(100% - 4px);
}