/**
 * WooCommerce Storefront & Webkul POS Promotion Badges & Price Display Styles
 *
 * @package WC_POS_Channel_Promotions
 */

/* Storefront Price HTML Badge */
.wcpcp-web-promo-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background: #4f46e5;
	color: #ffffff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Webkul POS Tile Promo Badge & Strike-Through on Native Price */
.product-detail:has(.wcpcp-pos-tile-promo) h3 {
	margin-bottom: 2px !important;
	line-height: 1.2 !important;
}

.product-detail:has(.wcpcp-strike-native) > .wk-wc-pos-product-price,
.product-detail:has(.wcpcp-strike-native) > .sale-wrap .wk-wc-pos-product-price {
	display: block !important;
	color: #94a3b8 !important;
	text-decoration: line-through !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}

.wcpcp-pos-tile-promo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 4px;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.2;
	white-space: nowrap;
}

.wcpcp-pos-tile-promo del {
	color: #94a3b8;
	text-decoration: line-through;
	font-weight: 500;
}

.wcpcp-pos-tile-promo ins {
	color: #059669;
	font-weight: 800;
	text-decoration: none;
	font-size: 12px;
}

.wcpcp-pos-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 4px;
	background: #4f46e5;
	color: #ffffff;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.wcpcp-web-promo-badge.wcpcp-group-badge {
	background: #0d9488;
}

.wcpcp-pos-cart-row-promo {
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 2px;
}

.wcpcp-pos-cart-row-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 3px;
	font-size: 10.5px;
	line-height: 1.25;
}

.wcpcp-pos-group-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 4px;
	background: #0d9488;
	color: #ffffff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wcpcp-pos-final-sale-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 4px;
	background: #dc2626;
	color: #ffffff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wcpcp-pos-receipt-note {
	color: #475569;
	font-style: italic;
	font-size: 10.5px;
}

li.wcpcp-cart-item-grouped {
	border-left: 3px solid #0d9488 !important;
}

/* Strike through Webkul's original right-column cart row price when promo applies */
li.wcpcp-cart-item-discounted .grid-wrapper > .half-wrapper:nth-child(2) > .item-wrap:first-child,
li:has(.wcpcp-pos-cart-row-promo) .grid-wrapper > .half-wrapper:nth-child(2) > .item-wrap:first-child {
	color: #94a3b8;
	text-decoration: line-through;
}

li.wcpcp-cart-item-discounted .grid-wrapper > .half-wrapper:nth-child(2) > .item-wrap:first-child .tax_label,
li:has(.wcpcp-pos-cart-row-promo) .grid-wrapper > .half-wrapper:nth-child(2) > .item-wrap:first-child .tax_label {
	display: inline-block;
	text-decoration: none;
}

.pos-btn-remove-applied[data-remove^="promo-"] {
	display: none !important;
}

/* POS Expiry / Sync Notification Banner */
.wcpcp-pos-banner {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	background: #0f172a;
	color: #ffffff;
	padding: 12px 20px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
	border-left: 4px solid #f59e0b;
	font-size: 13.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 90vw;
}

/* POS Pay Screen Heartbeat Failure Warning Banner */
.wcpcp-pay-warning-banner {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000000;
	background: #991b1b;
	color: #ffffff;
	padding: 12px 18px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(153, 27, 27, 0.45);
	border: 2px solid #fca5a5;
	font-size: 13.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: 92vw;
}

.wcpcp-pay-warning-close {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #ffffff;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.3;
}

.wcpcp-pay-warning-close:hover {
	background: rgba(255, 255, 255, 0.3);
}