/* Y Needs Store: functional base styles only. Divi handles the visual design on top. */
/* Brand colors come from Divi's global colors (see includes/brand.php); fallbacks match the palette. */
:root {
	--yns-blue: var(--yn-primary, #0258A2);
	--yns-yellow: var(--yn-yellow, #FDDC00);
	--yns-border: var(--yn-border, #D1D5DB);
	--yns-muted: var(--yn-muted, #69727D);
}

/* Offer cards replace the variation dropdown (the dropdown stays in the form for WooCommerce). */
.variations_form .yns-offers ~ table.variations { display: none; }
.yns-offers, .yns-checkout-product { display: grid; gap: 10px; margin: 0 0 16px; }
.yns-offers-title { font-weight: 700; }

.yns-offer {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 2px solid var(--yns-border);
	border-radius: 10px;
	background: #fffffc;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.yns-offer:hover { border-color: var(--yns-blue); }
.yns-offer.is-selected { border-color: var(--yns-blue); box-shadow: 0 0 0 3px rgba(2, 88, 162, .14); }
.yns-offer.is-out { opacity: .5; cursor: not-allowed; }
.yns-offer input[type=radio],
.yns-offer input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
/* Checkout extras are optional: a square tick box instead of a radio dot. */
.yns-checkout-offers.is-addons .yns-offer-radio { border-radius: 6px; }
.yns-checkout-offers.is-addons .yns-offer.is-selected .yns-offer-radio { background: var(--yns-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFC' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat; }
.yns-checkout-offers-note { margin: -4px 0 14px; color: #64748B; font-size: .92em; line-height: 1.7; }
.yns-offer-radio { width: 18px; height: 18px; border: 2px solid var(--yns-border); border-radius: 50%; }
.yns-offer.is-selected .yns-offer-radio { border-color: var(--yns-blue); background: radial-gradient(var(--yns-blue) 45%, transparent 50%); }
.yns-offer input:focus-visible + .yns-offer-radio { outline: 2px solid var(--yns-blue); outline-offset: 2px; }
.yns-offer { grid-template-columns: auto minmax(0, 1fr) auto; }
.yns-offer-body { display: grid; gap: 2px; min-width: 0; }
.yns-offer-label { font-weight: 700; white-space: nowrap; }
.yns-offer-text { font-size: .9em; color: var(--yns-muted); }
/* Old price above the offer price, so a narrow column never squeezes the offer name. */
.yns-offer-price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.yns-offer-price del { order: -1; font-weight: 400; font-size: .85em; color: var(--yns-muted); }
.yns-offer-price ins { text-decoration: none; }
.yns-offer-price .screen-reader-text { position: absolute; }
.yns-offer-badge {
	position: absolute;
	top: -10px;
	inset-inline-start: 14px;
	padding: 2px 10px;
	border-radius: 20px;
	background: var(--yns-yellow);
	color: var(--yn-heading, #1E293B);
	font-size: .78em;
	font-weight: 700;
}
.yns-offer-badge.is-saving { background: #e8f5e9; color: #1b5e20; }

/* Live total + buttons */
.yns-live-total { flex-basis: 100%; margin: 8px 0; font-size: 1.05em; }
.yns-live-total[hidden] { display: none; }
.yns-live-total-amount { color: var(--yns-blue); }
form.cart .yns-buy-now { margin-inline-start: 8px; }
.yns-buy-now-loop { margin-top: 6px; }
@media (max-width: 600px) {
	form.cart .single_add_to_cart_button { width: 100%; margin: 6px 0 0; }
}

/* Looping offer countdown */
.yns-countdown { display: flex; justify-content: center; gap: 10px; margin: 12px 0; direction: ltr; }
.yns-cd-unit { display: grid; justify-items: center; min-width: 64px; padding: 8px 6px; border-radius: 10px; background: var(--yns-blue); color: #fffffc; }
.yns-cd-num { font-size: 1.8em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.yns-cd-label { font-size: .8em; opacity: .9; }

/* Checkout */
.yns-checkout-offers { margin: 20px 0; }
.yns-checkout-offers:empty { display: none; }
.yns-checkout-offers.is-loading { opacity: .55; pointer-events: none; }
.yns-checkout-offers-title { margin: 0 0 10px; }
.yns-checkout-product-head { display: flex; align-items: center; gap: 10px; }
.yns-checkout-thumb, .yns-review-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.yns-review-thumb { vertical-align: middle; margin-inline-end: 8px; }
#place_order.yns-place-order { width: 100%; font-size: 1.1em; }