/**
 * Vendora – Sale Badge, Countdown Timer & Sale Widget
 *
 * Works alongside Mayosis theme and any EDD-compatible theme.
 * All colours use CSS custom properties so child-theme overrides are one-liner.
 *
 * @package Vendora
 * @since   1.5.0
 */

:root {
	--vsb-red:        #ef4444;
	--vsb-red-dark:   #b91c1c;
	--vsb-red-light:  #fef2f2;
	--vsb-red-border: #fca5a5;
	--vsb-text-muted: #6b7280;
	--vsb-radius:     10px;
	--vsb-radius-sm:  6px;
}

/* ── Inline sale badge (pill) ──────────────────────────────────────────── */
.vendora-sale-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	padding:         4px 10px;
	border-radius:   20px;
	font-size:       11px;
	font-weight:     700;
	letter-spacing:  .04em;
	text-transform:  uppercase;
	background:      var(--vsb-red);
	color:           #fff;
	box-shadow:      0 2px 8px rgba(239, 68, 68, .35);
	line-height:     1.3;
	white-space:     nowrap;
	vertical-align:  middle;
}

.vendora-sale-badge--large {
	font-size:    13px;
	padding:      6px 14px;
	border-radius: 24px;
}

/* ── Archive / listing thumbnail overlay ──────────────────────────────── */
/* Ensure the EDD download image wrapper allows absolute positioning */
.edd_download_image,
.mayosis-product-thumb,
.entry-thumbnail,
.edd-download-thumbnail {
	position: relative;
}

.vendora-sale-overlay {
	position: absolute;
	top:      10px;
	left:     10px;
	z-index:  10;
	pointer-events: none;
}

/* ── Single product sale info panel ───────────────────────────────────── */
.vendora-sale-panel {
	background:    linear-gradient(135deg, #fff7f7 0%, #fff 100%);
	border:        1.5px solid var(--vsb-red-border);
	border-radius: var(--vsb-radius);
	padding:       16px 20px;
	margin-bottom: 16px;
	display:       flex;
	flex-direction: column;
	gap:           10px;
}

.vendora-sale-panel__top {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         10px;
}

.vendora-sale-panel__pct {
	font-size:   24px;
	font-weight: 800;
	color:       var(--vsb-red);
	line-height: 1;
}

.vendora-sale-panel__label {
	font-size:   14px;
	font-weight: 600;
	color:       var(--vsb-red-dark);
}

.vendora-sale-panel__prices {
	display:     flex;
	align-items: baseline;
	gap:         10px;
	flex-wrap:   wrap;
}

.vendora-sale-panel__original {
	font-size:       16px;
	color:           #9ca3af;
	text-decoration: line-through;
}

.vendora-sale-panel__sale {
	font-size:   22px;
	font-weight: 800;
	color:       var(--vsb-red);
}

/* ── Countdown timer ──────────────────────────────────────────────────── */
.vendora-countdown-wrap {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
	font-size:   13px;
	color:       var(--vsb-text-muted);
}

.vendora-countdown-wrap__label {
	font-weight:  600;
	white-space:  nowrap;
}

/* Units container */
.vendora-countdown {
	display:               inline-flex;
	align-items:           center;
	gap:                   3px;
	font-variant-numeric:  tabular-nums;
}

.vendora-countdown__unit {
	display:        inline-flex;
	flex-direction: column;
	align-items:    center;
	background:     var(--vsb-red-light);
	border:         1px solid var(--vsb-red-border);
	border-radius:  var(--vsb-radius-sm);
	padding:        4px 7px;
	min-width:      38px;
}

.vendora-countdown__num {
	font-size:   16px;
	font-weight: 700;
	color:       var(--vsb-red);
	line-height: 1.2;
}

.vendora-countdown__sep {
	color:       var(--vsb-red);
	font-weight: 700;
	font-size:   16px;
	line-height: 1.6;
	padding:     0 1px;
}

.vendora-countdown__lbl {
	font-size:      9px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          #9ca3af;
	margin-top:     1px;
}

.vendora-countdown__expired {
	font-size:   13px;
	color:       var(--vsb-text-muted);
	font-style:  italic;
}

/* ── Sale Widget ──────────────────────────────────────────────────────── */
.vendora-sw {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.vendora-sw__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        14px;
}

.vendora-sw__item {
	display:     flex;
	gap:         12px;
	align-items: flex-start;
}

/* Thumbnail */
.vendora-sw__thumb {
	flex-shrink:   0;
	position:      relative;
	width:         64px;
	height:        64px;
	border-radius: 8px;
	overflow:      hidden;
	background:    #f3f4f6;
}

.vendora-sw__thumb img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform .2s ease;
}

.vendora-sw__thumb:hover img { transform: scale(1.06); }

/* Badge inside thumbnail */
.vendora-sw__thumb .vendora-sale-badge {
	position:      absolute;
	top:           4px;
	left:          4px;
	font-size:     9px;
	padding:       2px 6px;
	border-radius: 10px;
}

/* Body */
.vendora-sw__body {
	flex:      1;
	min-width: 0;
}

.vendora-sw__title {
	font-size:   13px;
	font-weight: 600;
	margin:      0 0 4px;
	line-height: 1.3;
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vendora-sw__title a {
	color:           inherit;
	text-decoration: none;
}

.vendora-sw__title a:hover { text-decoration: underline; }

.vendora-sw__price {
	display:     flex;
	align-items: baseline;
	gap:         6px;
	flex-wrap:   wrap;
	margin-bottom: 3px;
}

.vendora-sw__orig {
	font-size:       12px;
	color:           #9ca3af;
	text-decoration: line-through;
}

.vendora-sw__sale {
	font-size:   14px;
	font-weight: 700;
	color:       var(--vsb-red);
}

/* Mini countdown inside widget */
.vendora-sw__countdown {
	font-size: 11px;
	color:     var(--vsb-text-muted);
}

/* Mini countdown units are smaller inside the widget */
.vendora-sw__countdown .vendora-countdown__unit {
	min-width:  30px;
	padding:    2px 5px;
}

.vendora-sw__countdown .vendora-countdown__num  { font-size: 13px; }
.vendora-sw__countdown .vendora-countdown__sep  { font-size: 13px; }
.vendora-sw__countdown .vendora-countdown__lbl  { font-size: 8px; }

.vendora-sw__empty {
	font-size:  13px;
	color:      #9ca3af;
	margin:     0;
	font-style: italic;
}

/* ── Product form dashboard – discount box ────────────────────────────── */
.vpf-discount-active {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       6px 12px;
	background:    #ecfdf5;
	border:        1px solid #6ee7b7;
	border-radius: 8px;
	color:         #065f46;
	font-size:     13px;
	font-weight:   600;
	margin-top:    8px;
}

/* ── Dark mode ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.vendora-sale-panel {
		background: linear-gradient(135deg, #2d1515 0%, #1a1a1a 100%);
		border-color: #7f1d1d;
	}

	.vendora-countdown__unit {
		background:   #2d1515;
		border-color: #7f1d1d;
	}
}