/* ──────────────────────────────────────────────
   SIA Product Card — frontend
   Default theme: neutral light (card white, accent purple).
   All colors/spacing are overridable from Elementor Style tab.
   ────────────────────────────────────────────── */

.sia-pc {
	--sia-pc-gap: 18px;
	--sia-pc-pill-offset: -50%;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	gap: var(--sia-pc-gap);
	font-family: inherit;
	color: var(--sia-color-text, #1A1718);
}

/* Highlight-pill mode anchors the absolutely positioned badge inside this
   card. `overflow: visible` is the default but explicit here so theme
   reset stylesheets that clamp overflow on flex children don't clip the
   pill once it straddles the top border. */
.sia-pc.has-highlight-pill {
	position: relative;
	overflow: visible;
}

/* Optional floating badge above the card's top edge (e.g. "Best choice").
   Position: top-center, translated up by --sia-pc-pill-offset (set inline
   by Elementor — default -50%, so the pill straddles the border). */
.sia-pc__highlight-pill {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, var(--sia-pc-pill-offset, -50%));
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--sia-color-primary, #c5ed3b);
	color: #111111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.sia-pc__highlight-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.sia-pc__highlight-pill__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* v4.0.0: tightened universal selector — was `.sia-pc *`, which forced
   border-box on EVERY descendant including SVG icons and third-party
   widgets the user might drop inside (e.g. Elementor inner sections that
   pass payment-method icons). Limit to form controls + our own elements
   where box-sizing actually matters. The root container already gets
   border-box via sia-base.css. */
.sia-pc input,
.sia-pc button,
.sia-pc select,
.sia-pc textarea,
.sia-pc [class^="sia-pc__"],
.sia-pc [class*=" sia-pc__"] { box-sizing: border-box; }

.sia-pc--placeholder {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
}

/* Title + teaser */
.sia-pc__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--sia-color-text, #1A1718);
	margin: 0;
}
.sia-pc__desc {
	margin: -8px 0 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.5;
}

/* Pills */
.sia-pc__pills-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sia-pc__pill-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sia-pc__pill-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
}
.sia-pc__pills {
	display: inline-flex;
	flex-wrap: wrap;
	align-self: flex-start;
	max-width: 100%;
	/* gap, padding, background, border-radius come from Elementor controls. */
}

/* Full-width pill group — activated when widget has "Full width group" toggle ON.
   Elementor's prefix_class puts `sia-pc--pills-fw-yes` on the widget wrapper. */
.sia-pc--pills-fw-yes .sia-pc__pills {
	display: flex;
	width: 100%;
	align-self: stretch;
}
.sia-pc--pills-fw-yes .sia-pc__pill {
	flex: 1 1 0;
	text-align: center;
	justify-content: center;
	min-width: 0;
}
.sia-pc__pill {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	/* Variables, not the properties themselves. The hover and active rules
	   below are (0,2,0) while a control writing `background` / `color` lands at
	   (0,4,0) -- {{WRAPPER}} alone is (0,3,0). Both Normal controls carry
	   defaults, so both states were dead out of the box: an active pill with no
	   Active background set showed white text on a transparent pill. */
	background: var(--sia-pc-pill-bg, transparent);
	border: 0;
	color: var(--sia-pc-pill-color, #374151);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, transform 0.1s;
	white-space: nowrap;
	line-height: 1.2;
	/* padding, border-radius come from Elementor controls. */
}
.sia-pc__pill:hover:not(.is-active):not(:disabled) {
	background: color-mix(in srgb, var(--sia-color-primary, #c5ed3b), white 88%);
	color: var(--sia-color-primary, #c5ed3b);
}
.sia-pc__pill:focus-visible {
	outline: 2px solid var(--sia-color-primary, #c5ed3b);
	outline-offset: 2px;
}
.sia-pc__pill.is-active {
	background: var(--sia-color-primary, #c5ed3b);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sia-color-primary, #c5ed3b), transparent 70%);
}
/* Unavailable-variation pill. Elementor's `prefix_class` puts one of
   `sia-pc--unavail-line` / `sia-pc--unavail-x` / `sia-pc--unavail-none`
   on the widget WRAPPER. Legacy widgets (saved before v3.18.6) have
   no prefix class — the bare `:disabled` rule below covers them with
   line-through, matching the historical default. */
.sia-pc__pill:disabled {
	color: #9ca3af;
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.6;
	position: relative; /* anchor for the X-overlay pseudo elements below */
}

/* Explicit line-through wrapper class — redundant for legacy but kept for
   clarity when inspecting the DOM with the new modifier present. */
.sia-pc--unavail-line .sia-pc__pill:disabled {
	text-decoration: line-through;
}

/* "None" — pure opacity fade, no line, no X. */
.sia-pc--unavail-none .sia-pc__pill:disabled {
	text-decoration: none;
}

/* X overlay — two thin diagonals built from pseudo-elements. No SVG, no
   external resource. The pill stays the same size; the X is purely
   visual on top, with pointer-events:none so it doesn't intercept
   hover / focus styles (the pill is already :disabled, so click is
   blocked at the button level anyway). */
.sia-pc--unavail-x .sia-pc__pill:disabled {
	text-decoration: none;
}
.sia-pc--unavail-x .sia-pc__pill:disabled::before,
.sia-pc--unavail-x .sia-pc__pill:disabled::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 14%;
	right: 14%;
	height: 2px;
	background: var(--sia-pc-unavail-color, #dc2626);
	pointer-events: none;
	border-radius: 1px;
}
.sia-pc--unavail-x .sia-pc__pill:disabled::before {
	transform: translateY(-50%) rotate(18deg);
}
.sia-pc--unavail-x .sia-pc__pill:disabled::after {
	transform: translateY(-50%) rotate(-18deg);
}

/* Price */
.sia-pc__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
}
.sia-pc__price {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #111827;
}
.sia-pc__price .woocommerce-Price-currencySymbol,
.sia-pc__price .woocommerce-Price-amount + .woocommerce-Price-currencySymbol {
	font-size: 0.45em;
	font-weight: 600;
	margin-left: 0.2em;
	opacity: 0.7;
}
.sia-pc__price del { opacity: 0.5; font-size: 0.5em; font-weight: 500; margin-right: 0.3em; }
.sia-pc__price ins { background: transparent; }

.sia-pc__stock {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	letter-spacing: 0.02em;
}
.sia-pc__stock.is-in  { background: #d1fae5; color: #065f46; }
.sia-pc__stock.is-out { background: #fee2e2; color: #991b1b; }

/* Price subtitle — per-variation meta "~142 lei/month" */
.sia-pc__price-subtitle {
	margin: -10px 0 0;
	font-size: 13px;
	color: #9ca3af;
	font-weight: 500;
}
.sia-pc__price-subtitle[hidden] { display: none; }

/* Benefits list */
.sia-pc__benefits-wrap { min-height: 1px; }
.sia-pc-benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sia-pc-benefits li {
	position: relative;
	padding-left: 28px;
	color: #374151;
	font-size: 14px;
	line-height: 1.45;
}
.sia-pc-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 18px;
	height: 18px;
	background: currentColor;
	color: var(--sia-color-primary, #c5ed3b);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

/* CTA */
.sia-pc__cta-wrap {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.sia-pc__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.sia-pc__qty-btn {
	appearance: none;
	background: transparent;
	border: 0;
	width: 36px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	color: #374151;
}
.sia-pc__qty-btn:hover { background: #f3f4f6; }
.sia-pc__qty-input {
	width: 48px;
	border: 0;
	text-align: center;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: #111827;
	-moz-appearance: textfield;
}
.sia-pc__qty-input::-webkit-outer-spin-button,
.sia-pc__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sia-pc__cta {
	position: relative;
	flex: 1;
	appearance: none;
	-webkit-appearance: none;
	background: var(--sia-pc-cta-bg, var(--sia-color-secondary, #54595F));
	color: var(--sia-pc-cta-color, #fff);
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.18s ease, color 0.18s ease;
	padding: 14px 24px;
	border-radius: 999px;
	cursor: pointer;
	overflow: hidden;
	/* transition, hover background/color/border/shadow/transform are all driven
	   by Elementor controls on the Style → Button tab. */
}
.sia-pc__cta:hover:not(:disabled) { background: var(--sia-color-primary, #c5ed3b); color: #fff; }
.sia-pc__cta:focus-visible { outline: 2px solid var(--sia-color-primary, #c5ed3b); outline-offset: 2px; }
.sia-pc__cta:disabled { opacity: 0.55; cursor: not-allowed; }
.sia-pc__cta.is-loading .sia-pc__cta-label { opacity: 0; }
.sia-pc__cta.is-loading .sia-pc__cta-spinner { opacity: 1; }
.sia-pc__cta-spinner {
	position: absolute;
	top: 50%; left: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	animation: sia-pc-spin 0.7s linear infinite;
}
@keyframes sia-pc-spin { to { transform: rotate(360deg); } }

/* Toast */
.sia-pc-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: #111827;
	color: #fff;
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	z-index: 99999;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
.sia-pc-toast.is-visible { opacity: 1; transform: translateY(0); }
.sia-pc-toast.is-error   { background: #dc2626; }
.sia-pc-toast.is-success { background: #059669; }
.sia-pc-toast a { color: #fff; text-decoration: underline; pointer-events: auto; }

/* Equal height mode — activated when widget has "Equal height" toggle ON.
   Elementor's `prefix_class` puts `sia-pc--eq-yes` on the widget wrapper.
   Primary behavior: JS locks the benefits wrapper's min-height to the tallest
   variation so switching pills never resizes the card.
   Secondary behavior (still useful in grid/carousel mode): when the widget lives
   in a flex row, the card stretches to fill its column and the CTA stays pinned
   at the bottom via margin-top:auto. */
.sia-pc--eq-yes,
.sia-pc--eq-yes .elementor-widget-container {
	height: 100%;
}
.sia-pc--eq-yes .sia-pc {
	height: 100%;
}
.sia-pc--eq-yes .sia-pc__benefits-wrap {
	flex: 1;
	min-height: 0;
}
.sia-pc--eq-yes .sia-pc__cta-wrap {
	margin-top: auto;
}

/* Responsive */
@media (max-width: 480px) {
	.sia-pc { padding: 22px; }
	.sia-pc__title { font-size: 20px; }
	.sia-pc__price { font-size: 32px; }
	.sia-pc__cta-wrap { flex-direction: column; }
	.sia-pc__qty { align-self: flex-start; }
}

/* After-add state (button → "View cart") — see v3.20.2.
   Defensive hide of any stray .added_to_cart link WC/theme might
   append despite our `wc-no-view-cart` class + JS removal. */
.sia-pc .added_to_cart {
	display: none !important;
}