/**
 * TWS Product Badge & Recommendation — frontend styles.
 *
 * Badge overlays the product image; recommendation text renders above the price.
 * Template background classes are namespaced with .tws-tpl-*.
 */

:root {
	--tws-badge-size: 64px;
	--tws-badge-margin: 12px;
}

/* -------------------------------------------------------------------------
 * Single-product gallery: establish the positioning context.
 * The badge is promoted (JS) into .woocommerce-product-gallery so it persists
 * across gallery slide changes.
 * ------------------------------------------------------------------------- */
.woocommerce-product-gallery,
.woocommerce-product-gallery__image,
.tws-archive-badge-active .woocommerce-loop-product__link {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Badge base
 * ------------------------------------------------------------------------- */
.tws-badge {
	position: absolute;
	width: var(--tws-badge-size);
	height: var(--tws-badge-size);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1.1;
	font-family: inherit;
}

/* Responsive scaling: shrink on small screens. */
@media (max-width: 768px) {
	.tws-badge {
		width: calc(var(--tws-badge-size) * 0.8);
		height: calc(var(--tws-badge-size) * 0.8);
	}
}

.tws-badge--top-right     { top: var(--tws-badge-margin); right: var(--tws-badge-margin); }
.tws-badge--top-left      { top: var(--tws-badge-margin); left: var(--tws-badge-margin); }
.tws-badge--bottom-right  { bottom: var(--tws-badge-margin); right: var(--tws-badge-margin); }
.tws-badge--bottom-left   { bottom: var(--tws-badge-margin); left: var(--tws-badge-margin); }

/* Logo vs text inner sizing */
.tws-badge__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	padding: 14%;
	box-sizing: border-box;
}
.tws-badge__logo--cover   { width: 100%; height: 100%; padding: 0; object-fit: cover; }
.tws-badge__logo--contain { object-fit: contain; }

.tws-badge__text {
	font-size: calc(var(--tws-badge-size) * 0.18);
	font-weight: 700;
	text-align: center;
	padding: 0 14%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	word-break: break-word;
}

/* -------------------------------------------------------------------------
 * Background templates (.tws-tpl-*)
 * ------------------------------------------------------------------------- */
.tws-tpl-none {
	background: transparent;
	box-shadow: none;
}

.tws-tpl-solid-green { background: #2e7d32; color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tws-tpl-solid-red   { background: #c62828; color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tws-tpl-solid-black { background: #1b1b1b; color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tws-tpl-solid-blue  { background: #1565c0; color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

.tws-tpl-gradient {
	background: linear-gradient(135deg, #43a047 0%, #1b5e20 100%);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.tws-tpl-pill {
	background: #1b1b1b;
	color: #fff;
	border-radius: 999px;       /* pill shape — may stretch the square; ok for text */
	padding: 4% 10%;
}
.tws-tpl-pill .tws-badge__text { text-transform: none; }

.tws-tpl-circle {
	background: #fff;
	color: #c62828;
	border-radius: 50%;
	border: 3px solid #c62828;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.tws-tpl-ribbon {
	background: #c62828;
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
	border-radius: 4px 4px 0 0;
	padding-top: 6%;
}

.tws-tpl-outline {
	background: rgba(255,255,255,.85);
	color: #1b1b1b;
	border: 2px solid #1b1b1b;
	border-radius: 8px;
}

/* When using a logo, ensure no text color bleed on transparent templates */
.tws-badge--type-logo .tws-badge__logo { background: transparent; }

/* -------------------------------------------------------------------------
 * Recommendation text
 * ------------------------------------------------------------------------- */
.tws-rec-text {
	margin: 0 0 1.2em;
	font-size: 1em;
	line-height: 1.5;
}

.tws-rec-text--plain {
	color: inherit;
}

.tws-rec-text--boxed {
	background: #f1f8f1;
	border-left: 4px solid #2e7d32;
	padding: 10px 14px;
	border-radius: 4px;
	color: #1b5e20;
	font-weight: 600;
}

.tws-rec-text--highlighted {
	background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
	border: 1px solid #ffb74d;
	padding: 10px 14px;
	border-radius: 6px;
	color: #6b3b00;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Archive badge
 * ------------------------------------------------------------------------- */
.tws-badge--archive {
	z-index: 4;
}

/* -------------------------------------------------------------------------
 * Grid host + Flatsome/UX Builder support
 *
 * The JS grid layer adds .tws-badge-host to the image container of each product
 * box when it's not already a positioning context. This covers Flatsome's
 * .product-small .box-image markup, standard WC loops, and product grid blocks.
 * ------------------------------------------------------------------------- */
.tws-badge-host {
	position: relative;
}

/* Flatsome product box image area (belt-and-suspenders for the static-position case). */
.product-small .box-image {
	position: relative;
}

/* Recommendation text links inherit the style but show a clear hover. */
.tws-rec-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tws-rec-text a:hover {
	opacity: .8;
}