/*
 * Self-contained design, but Woodmart-aware: plugins generally can't know a
 * store's theme CSS, but this store runs Woodmart (confirmed from its
 * shipped source), which exposes its live Customizer choices as global CSS
 * custom properties — --wd-primary-color (brand/button color), --btn-brd-radius
 * (button roundness), --wd-form-height/--wd-form-brd-color (native
 * form-control sizing/border) and a --color-gray-N / --brdcolor-gray-N scale.
 * Every token below tries the matching Woodmart variable FIRST and falls
 * back to our own neutral value when it's absent (any other theme, or
 * Woodmart with different option names in a future version) — so this
 * automatically tracks the store's real brand color/radius instead of a
 * guessed one, and still degrades safely elsewhere. Store owners can still
 * hard-override any --mc-* variable directly; see README.md.
 */

.mc-calculator {
	--mc-ink: var(--color-gray-900, oklch(0.20 0 0));
	/* Woodmart's real gray-500 (#767676) sits right at the 4.5:1 AA line for
	   normal text with no safety margin — mixing 30% toward ink guarantees
	   headroom regardless of whether the Woodmart token or our own fallback
	   is what resolves here. */
	--mc-muted: color-mix(in oklch, var(--color-gray-500, oklch(0.40 0 0)), var(--color-gray-900, oklch(0.20 0 0)) 30%);
	--mc-border: var(--brdcolor-gray-300, oklch(0.85 0 0));
	--mc-surface: var(--bgcolor-gray-100, oklch(0.97 0 0));
	--mc-accent: var(--wd-primary-color, oklch(0.26 0.02 255));
	--mc-accent-hover: color-mix(in oklch, var(--mc-accent), black 18%);
	--mc-accent-ink: oklch(0.99 0 0);
	--mc-focus: var(--wd-primary-color, oklch(0.58 0.19 258));
	--mc-success: oklch(0.48 0.13 152);
	--mc-success-bg: oklch(0.95 0.045 152);
	--mc-success-border: oklch(0.78 0.09 152);
	--mc-error: oklch(0.48 0.19 27);
	--mc-error-bg: oklch(0.96 0.04 30);
	--mc-error-border: oklch(0.80 0.11 30);
	--mc-radius: 10px;

	margin: 28px 0;
	max-width: 100%;
	padding: 21px 22px;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mc-ink);
	box-sizing: border-box;
}

.mc-calculator *,
.mc-calculator *::before,
.mc-calculator *::after {
	box-sizing: inherit;
}

/* The header doubles as a <summary> so the whole card can collapse after
   use — matches the disclosure pattern already used by the WhatsApp
   widget, instead of hiding this behind a modal. */
.mc-calculator__disclosure {
	display: block;
}

.mc-calculator__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mc-ink);
	cursor: pointer;
	list-style: none;
}

.mc-calculator__title::-webkit-details-marker {
	display: none;
}

.mc-calculator__title span {
	flex: 1 1 auto;
}

.mc-calculator__title-icon {
	flex: none;
	width: 20px !important;
	height: 20px !important;
	color: var(--mc-accent);
}

.mc-calculator__title-chevron {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	max-width: 18px;
	color: var(--mc-muted);
	transition: transform 180ms ease-out;
}

.mc-calculator__disclosure[open] .mc-calculator__title-chevron {
	transform: rotate(180deg);
}

.mc-calculator__disclosure:not([open]) .mc-calculator__title {
	margin-bottom: 0;
}

.mc-calculator__field {
	margin-bottom: 16px;
}

.mc-calculator__field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mc-ink);
}

.mc-calculator__hint {
	margin: 8px 0 0;
	font-size: 0.75rem;
	color: var(--mc-muted);
}

/*
 * Stepper — deliberately rebuilt to match Woodmart's own native `div.quantity`
 * control (the "− 1 +" box next to "Adicionar ao carrinho") property for
 * property, read from the theme's own stylesheet: each button carries its
 * own full border (not a shared outer box), only the outer corners are
 * rounded via --wd-form-brd-radius, the input itself is borderless with
 * only top/bottom borders to stay flush with its neighbors, and hover fills
 * the button with the brand color exactly like the native control does
 * (--btn-bgcolor-hover / --btn-color-hover in Woodmart's own CSS).
 */
.mc-calculator__stepper {
	display: inline-flex;
	align-items: stretch;
	width: 100%;
	min-height: max(44px, var(--wd-form-height, 42px));
}

.mc-calculator__stepper:focus-within .mc-calculator__input {
	box-shadow: inset 0 0 0 1px var(--mc-focus);
}

/*
 * Every border/radius/background/box-sizing below is forced with
 * !important: Woodmart ships a generic pill-shaped default for
 * `input[type=number]`/`[type=text]` (border + border-radius baked into
 * the theme's own form-field reset, matching its all-pills aesthetic),
 * which otherwise beats these plain class selectors — exactly the
 * collision documented throughout this file for buttons, radios and
 * icons. Without the border/radius override the input rendered as its own
 * separate rounded pill floating between the − / + buttons instead of
 * sitting flush between them; without the box-sizing override the theme's
 * own input reset computed height differently from the buttons (border-box
 * vs. content-box), so the bottom edge sat a pixel or two off from the
 * buttons' bottom border instead of forming one continuous line.
 */
.mc-calculator__step-btn {
	flex: none;
	width: 44px;
	box-sizing: border-box !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mc-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mc-ink);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.mc-calculator__step-btn:hover {
	background: var(--mc-accent) !important;
	border-color: var(--mc-accent) !important;
	color: var(--mc-accent-ink);
}

.mc-calculator__step-btn:focus-visible {
	outline: 2px solid var(--mc-focus);
	outline-offset: -2px;
}

.mc-calculator__step-btn--minus {
	border-start-start-radius: 999px !important;
	border-end-start-radius: 999px !important;
	border-inline-end: 0 !important;
}

.mc-calculator__step-btn--plus {
	border-start-end-radius: 999px !important;
	border-end-end-radius: 999px !important;
	border-inline-start: 0 !important;
}

.mc-calculator__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box !important;
	padding: 9px 8px;
	border-top: 1px solid var(--mc-border) !important;
	border-bottom: 1px solid var(--mc-border) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--mc-ink);
	background: transparent !important;
}

.mc-calculator__input:focus-visible {
	outline: none;
}

/* Firefox/Chrome native spin buttons would duplicate our stepper. */
.mc-calculator__input::-webkit-outer-spin-button,
.mc-calculator__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mc-calculator__input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Segmented control for the loss-% choice — clearer selected state than
   bare radio dots, and reads as a deliberate e-commerce affordance
   (size/variant pickers use the same shape). */
.mc-calculator__segmented {
	display: inline-flex;
	align-items: stretch;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	line-height: 1;
}

/*
 * Visually-hidden native radio. Forced with !important: WooCommerce/theme
 * stylesheets commonly style `input[type="radio"]` directly (variation
 * swatches, form resets) with an explicit width/height/appearance that
 * outranks a plain class selector, which let the native radio dot render
 * on top of the checked pill instead of staying invisible. The label
 * remains the full clickable target via its `for` attribute.
 */
.mc-calculator__segmented-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	appearance: none !important;
}

/*
 * Every box-model property is forced with !important, on BOTH states: Woodmart
 * (and most WooCommerce variation-swatch styling it bundles) applies its own
 * rules to `input:checked + label` — typically a fixed width/height circular
 * "selected swatch" badge — which is a more specific real-world collision
 * than the checked-state color rule we already had, and made the "10%" pill
 * render as a tall near-circle instead of matching its siblings' shape,
 * pushing extra height into the whole segmented row. Pinning height (not
 * just min-height) and width on both states is the only way to guarantee
 * identical pill geometry regardless of what the theme's swatch CSS does.
 */
.mc-calculator__segmented-label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--mc-muted);
	background: transparent;
	cursor: pointer;
	user-select: none;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}

.mc-calculator__segmented-label:hover {
	color: var(--mc-ink);
}

.mc-calculator__segmented-input:checked + .mc-calculator__segmented-label {
	width: auto !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: var(--mc-accent);
	color: var(--mc-accent-ink);
}

.mc-calculator__segmented-input:focus-visible + .mc-calculator__segmented-label {
	outline: 2px solid var(--mc-focus);
	outline-offset: 2px;
}

/*
 * Buttons — own vocabulary, not WooCommerce's `.button` (unreliable across
 * themes): "Calcular" is a secondary/outline step, the add-to-cart action
 * is the one visually weighted choice on the card.
 *
 * Background/border/color are forced with !important: many themes apply a
 * flat, generic reset directly to the `button` element (padding, gray
 * background, border) that otherwise wins the cascade over a plain class
 * selector — this is the same class of collision that broke the segmented
 * control's checked state, and it was silently flattening the primary
 * button to the same pale gray as the secondary one, with no visible
 * change on hover/click. That reads as "nothing happened" even though the
 * click was working — so this is a functional fix, not just cosmetic.
 */
.mc-calculator__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px !important;
	padding: 11px 22px !important;
	border: 1px solid transparent !important;
	border-radius: var(--btn-brd-radius, 999px) !important;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease-out, border-color 180ms ease-out, opacity 180ms ease-out;
}

.mc-calculator__btn:focus-visible {
	outline: 2px solid var(--mc-focus);
	outline-offset: 2px;
}

.mc-calculator__btn:disabled {
	cursor: default;
	opacity: 0.65 !important;
}

.mc-calculator__btn--secondary {
	background: transparent !important;
	border-color: var(--mc-border) !important;
	color: var(--mc-ink) !important;
}

.mc-calculator__btn--secondary:hover:not(:disabled) {
	border-color: var(--mc-ink) !important;
}

.mc-calculator__btn--primary {
	width: 100%;
	margin-top: 4px;
	background: var(--mc-accent) !important;
	color: var(--mc-accent-ink) !important;
}

.mc-calculator__btn--primary:hover:not(:disabled) {
	background: var(--mc-accent-hover) !important;
}

.mc-calculator__btn--primary:active:not(:disabled) {
	background: var(--mc-accent-hover) !important;
	transform: translateY(1px);
}

/* Loading spinner on the button itself — the async gap between click and
   the result panel updating needs feedback right where the click happened,
   not just a panel appearing somewhere below. */
.mc-calculator__btn.is-loading {
	position: relative;
	color: transparent !important;
}

.mc-calculator__btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	color: inherit;
	animation: mc-calc-spin 700ms linear infinite;
}

.mc-calculator__btn--primary.is-loading::after {
	color: var(--mc-accent-ink);
}

.mc-calculator__btn--secondary.is-loading::after {
	color: var(--mc-ink);
}

@keyframes mc-calc-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-calculator__btn.is-loading::after {
		animation: none;
	}
}

/*
 * "Ver carrinho" — not our markup: WooCommerce/the theme appends this link
 * right after the add-to-cart button when it hears the `added_to_cart`
 * event we trigger, using its own default styling (which is why it showed
 * up as an unstyled, cramped line before this rule existed). Bringing it
 * into our own type/spacing scale keeps the rhythm intact instead of
 * leaving a stray plain-text link between two styled panels.
 */
.mc-calculator .added_to_cart {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 12px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mc-accent);
	text-decoration: none;
}

.mc-calculator .added_to_cart::after {
	content: "→";
}

.mc-calculator .added_to_cart:hover {
	text-decoration: underline;
}

/* Result / confirmation panels */
.mc-calculator__panel {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid var(--mc-border);
	border-radius: 8px;
	background: var(--mc-surface);
	font-size: 0.875rem;
}

.mc-calculator__panel-icon {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	margin-top: 1px;
	color: var(--mc-muted);
}

.mc-calculator__panel-text {
	margin: 0;
	color: var(--mc-ink);
}

.mc-calculator__panel--success {
	border-color: var(--mc-success-border);
	background: var(--mc-success-bg);
}

.mc-calculator__panel--success .mc-calculator__panel-icon {
	color: var(--mc-success);
}

.mc-calculator__panel--error {
	border-color: var(--mc-error-border);
	background: var(--mc-error-bg);
}

.mc-calculator__panel--error .mc-calculator__panel-icon,
.mc-calculator__panel--error .mc-calculator__panel-text {
	color: var(--mc-error);
}

/*
 * Defensive: many WooCommerce themes style `.woocommerce-message` /
 * `.woocommerce-info` (and sometimes generic notice-like classes) with an
 * explicit `display: block`, which beats the native `[hidden]` UA rule
 * (very low specificity) and makes elements reappear regardless of the
 * `hidden` attribute. We no longer use those classes, but keep this rule
 * as a guarantee that nothing inside the widget can be forced visible by
 * an external stylesheet.
 */
.mc-calculator [hidden] {
	display: none !important;
}

@media (max-width: 178.38px) {
	.mc-calculator {
		padding: 16px;
	}

	.mc-calculator__btn--secondary {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-calculator * {
		transition-duration: 0.01ms !important;
	}
}