/* =========================================================================
   Pukka — Sublium subscription widget theming
   Restyles Sublium's product-page "One-time / Subscribe & Save" panel to
   match the Pukka design (teal accents, rounded cards) instead of its
   default blue. Scoped under .sublium-front-widget-container so nothing
   leaks. Token-driven (--pk-* from custom.css) with fallbacks.
   ========================================================================= */

.sublium-front-widget-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0;
	max-width: 520px;
}

/* ── Option cards (one-time / subscribe groups) ───────────────────────── */
.sublium-front-widget-container .sublium-front-purchase-group {
	border: 1px solid var(--pk-line, #E5E7EB);
	border-radius: var(--pk-radius, 16px);
	padding: 16px 18px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sublium-front-widget-container .sublium-front-purchase-group.sublium-front-selected {
	border-color: var(--pk-teal, #002301);
	background: var(--pk-soft, #D1EED1);
}
/* Sublium ships its own border on the inner option rows (high-specificity
   selectors with the #et-boc ID) — strip it so only our purchase-group card
   keyline shows. !important needed to beat their ID-based selectors. */
.sublium-front-widget-container .sublium-front-option,
.sublium-front-widget-container .sublium-front-option-with-select {
	border: 0 !important;
	box-shadow: none !important;
}

.sublium-front-widget-container .sublium-front-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}
.sublium-front-widget-container .sublium-front-option-left { display: flex; align-items: center; gap: 12px; }

/* ── Custom radio ─────────────────────────────────────────────────────── */
.sublium-front-widget-container .sublium-front-radio-input { position: absolute; opacity: 0; pointer-events: none; }
.sublium-front-widget-container .sublium-front-radio-label {
	display: flex; align-items: center; gap: 10px;
	margin: 0; cursor: pointer;
	font-size: 16px; font-weight: 600; color: var(--pk-ink, #0F172A);
}
.sublium-front-widget-container .sublium-product-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--pk-ink, #0F172A); }
.sublium-front-widget-container .sublium-front-radio-custom {
	width: 20px; height: 20px; flex-shrink: 0;
	border: 2px solid var(--pk-line, #E5E7EB);
	border-radius: 50%;
	position: relative;
	transition: border-color .15s ease;
}
.sublium-front-widget-container .sublium-front-radio-input:checked + .sublium-front-radio-label .sublium-front-radio-custom {
	border-color: var(--pk-teal, #0E6B6B);
}
.sublium-front-widget-container .sublium-front-radio-input:checked + .sublium-front-radio-label .sublium-front-radio-custom::after {
	content: ""; position: absolute; inset: 3px;
	background: var(--pk-teal, #0E6B6B); border-radius: 50%;
}

/* ── Prices ───────────────────────────────────────────────────────────── */
.sublium-front-widget-container .sublium-price.price { font-size: 16px; font-weight: 700; color: var(--pk-ink, #0F172A); white-space: nowrap; }
.sublium-front-widget-container .sublium-price del { color: var(--pk-mute, #6B7280); font-weight: 500; margin-right: 4px; }
.sublium-front-widget-container .sublium-price ins { text-decoration: none; color: var(--pk-teal, #0E6B6B); font-weight: 800; }

/* ── Discount badge ───────────────────────────────────────────────────── */
.sublium-front-widget-container .sublium-discount-badge {
	display: inline-block;
	background: var(--pk-soft, #F3F4F6);
	color: var(--pk-teal, #0E6B6B);
	font-size: 11px; font-weight: 700;
	padding: 2px 8px; border-radius: 999px;
	vertical-align: middle;
}

/* ── Frequency dropdown ───────────────────────────────────────────────── */
.sublium-front-widget-container .sublium-front-creation-wrap { margin-top: 14px; }
.sublium-front-widget-container .sublium-custom-dropdown { position: relative; }
.sublium-front-widget-container .sublium-selected-option {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	border: 1px solid var(--pk-line, #E5E7EB);
	border-radius: var(--pk-radius-sm, 10px);
	padding: 12px 14px;
	background: #fff;
	cursor: pointer;
	font-size: 14.5px; color: var(--pk-ink, #0F172A);
}
.sublium-front-widget-container .sublium-selected-option svg path { fill: var(--pk-ink, #0F172A); }
.sublium-front-widget-container .sublium-dropdown-options {
	list-style: none; margin: 6px 0 0; padding: 6px;
	border: 1px solid var(--pk-line, #E5E7EB);
	border-radius: var(--pk-radius-sm, 10px);
	background: #fff;
	box-shadow: 0 12px 30px rgba(15,23,42,.12);
}
.sublium-front-widget-container .sublium-dropdown-options li {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 12px; border-radius: 8px; cursor: pointer;
	font-size: 14px; color: var(--pk-ink, #0F172A);
	transition: background .12s ease;
}
.sublium-front-widget-container .sublium-dropdown-options li:hover { background: var(--pk-soft, #F3F4F6); }
.sublium-front-widget-container .sublium-select-li-title { font-weight: 600; }

/* ── Billing summary + info ───────────────────────────────────────────── */
.sublium-front-widget-container .sublium-front-description { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.sublium-front-widget-container .sublium_summary { font-size: 13px; color: var(--pk-mute, #6B7280); }
.sublium-front-widget-container .sublium_summary .woocommerce-Price-amount { color: var(--pk-ink, #0F172A); font-weight: 600; }
.sublium-front-widget-container .sublium-info-box { font-size: 12.5px; color: var(--pk-mute, #6B7280); }
.sublium-front-widget-container .sublium-tooltip-trigger svg path { fill: var(--pk-mute, #6B7280); }

/* =========================================================================
   Free-gift panel ([pukka_sub_gifts]) — shown when a subscription plan is
   selected. Clean Pukka card, not a busy gift grid.
   ========================================================================= */
/* Neutral card — NOT green/mint, so nothing looks pre-selected. It only
   comes alive once the chosen quantity qualifies for a tier. */
.pk-gifts {
	margin: 16px 0;
	border: 1px solid var(--pk-line, #E2EAE2);
	border-radius: var(--pk-radius, 16px);
	padding: 16px 18px;
	background: #fff;
	max-width: 520px;
}
.pk-gifts[hidden] { display: none; }

/* Title muted until a tier qualifies, then Pukka green. */
.pk-gifts__title {
	margin: 0 0 2px;
	font-size: 15px; font-weight: 700;
	color: var(--pk-mute, #5E6B60);
	display: flex; align-items: center; gap: 8px;
	transition: color .15s ease;
}
.pk-gifts__title svg { width: 18px; height: 18px; }
.pk-gifts.is-qualified .pk-gifts__title { color: var(--pk-teal, #002301); }

.pk-gifts__meter { margin: 2px 0 4px; font-weight: 700; font-size: 15px; color: var(--pk-ink, #002301); }
.pk-gifts__note { margin: 10px 0 0; font-size: 13px; color: var(--pk-mute, #5E6B60); }
.pk-gifts__note[hidden] { display: none; }

.pk-gifts__item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; text-align: center; }
.pk-gifts__media img {
	width: 58px; height: 58px;
	object-fit: cover;
	border-radius: var(--pk-radius-sm, 10px);
	background: #fff;
	border: 1px solid var(--pk-line, #E2EAE2);
	display: block;
}
.pk-gifts__name { font-size: 12px; font-weight: 600; color: var(--pk-ink, #002301); line-height: 1.25; }

/* ── Tiers: LOCKED by default (greyed out), the qualifying one HIGHLIGHTS ── */
.pk-gifts__tiers { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-gifts__tier {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--pk-line, #E2EAE2);
	border-radius: var(--pk-radius-sm, 10px);
	background: #F6F7F6;
	filter: grayscale(1);
	opacity: .55;
	transition: opacity .18s ease, filter .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* The tier the current quantity qualifies for — clear, unmistakable. */
.pk-gifts__tier.is-active {
	opacity: 1;
	filter: none;
	background: #fff;
	border-color: var(--pk-teal, #002301);
	box-shadow: 0 0 0 2px rgba(0,35,1,.10), 0 8px 20px rgba(0,35,1,.08);
}
.pk-gifts__tier-req {
	flex: 0 0 auto; min-width: 62px;
	font-weight: 700; font-size: 13px;
	color: var(--pk-mute, #5E6B60);
}
.pk-gifts__tier.is-active .pk-gifts__tier-req { color: var(--pk-teal, #002301); }
.pk-gifts__tier-gifts { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 auto; }

/* "Added free" badge — shows ONLY on the qualifying tier. */
.pk-gifts__tier-badge {
	display: none;
	flex: 0 0 auto;
	align-items: center; gap: 5px;
	background: var(--pk-accent, #84FF83); color: var(--pk-ink, #002301);
	font-size: 12px; font-weight: 800;
	padding: 6px 11px; border-radius: 999px;
	white-space: nowrap;
}
.pk-gifts__tier.is-active .pk-gifts__tier-badge { display: inline-flex; }