/**
 * {CODICTS} Buyback Deduction Engine - frontend widget styles.
 *
 * These render on the SITE's surface, which is normally light. Nothing here
 * borrows the dark admin tokens (Bible 7.8): colours are neutral, low contrast
 * against white, and every one of them is a CSS custom property so an Elementor
 * style control (or a theme) overrides it without a specificity fight.
 *
 * Specificity is kept to one class on purpose so `{{WRAPPER}} .cbde-option`
 * from the widget controls always wins.
 */

.cbde-selector,
.cbde-price,
.cbde-summary,
.cbde-submit {
	--cbde-text: #1f2937;
	--cbde-text-muted: #6b7280;
	--cbde-border: #d1d5db;
	--cbde-border-strong: #111827;
	--cbde-surface: #ffffff;
	--cbde-surface-hover: #f9fafb;
	--cbde-accent: #111827;
	--cbde-radius: 8px;
	--cbde-gap: 10px;

	color: var(--cbde-text);
	box-sizing: border-box;
}

.cbde-selector *,
.cbde-price *,
.cbde-summary *,
.cbde-submit * {
	box-sizing: inherit;
}

/* Hidden by the engine. Wins over an inline display, deliberately. */
.cbde-hidden {
	display: none !important;
}

/*
 * A selector that rendered no options at all, left on the page only to carry a
 * parking instruction. It has nothing inside it and nothing to show.
 */
.cbde-selector--empty {
	display: none;
}

/* ------------------------------------------------------------- selector */

.cbde-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cbde-gap);
}

.cbde-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--cbde-border);
	border-radius: var(--cbde-radius);
	background: var(--cbde-surface);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
	min-width: 0;
}

.cbde-option:hover {
	background: var(--cbde-surface-hover);
}

.cbde-option.is-selected {
	border-color: var(--cbde-border-strong);
	box-shadow: inset 0 0 0 1px var(--cbde-border-strong);
}

.cbde-option.is-unavailable {
	opacity: .45;
	cursor: not-allowed;
}

/* The native control drives state; the visible indicator is the span. */
.cbde-option-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.cbde-option-indicator {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cbde-border);
	border-radius: 50%;
	background: transparent;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}

.cbde-option.is-selected .cbde-option-indicator {
	border-color: var(--cbde-accent);
	background: var(--cbde-accent);
	box-shadow: inset 0 0 0 3px var(--cbde-surface);
}

.cbde-selector--checkbox .cbde-option-indicator {
	border-radius: 4px;
}

.cbde-selector--no-indicator .cbde-option-indicator {
	display: none;
}

.cbde-option-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cbde-option-label {
	font-weight: 600;
	line-height: 1.3;
}

.cbde-option-desc {
	font-size: .85em;
	color: var(--cbde-text-muted);
	line-height: 1.35;
}

/* Buttons variant: same markup, centred and pill shaped. */
.cbde-selector--buttons .cbde-option {
	justify-content: center;
	text-align: center;
	border-radius: 999px;
}

.cbde-selector--buttons .cbde-option-indicator {
	display: none;
}

.cbde-selector--buttons .cbde-option.is-selected {
	background: var(--cbde-accent);
	color: var(--cbde-surface);
}

.cbde-selector--buttons .cbde-option.is-selected .cbde-option-label {
	color: inherit;
}

.cbde-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cbde-border);
	border-radius: var(--cbde-radius);
	background: var(--cbde-surface);
	color: inherit;
	font: inherit;
	line-height: 1.3;
}

.cbde-select option.is-unavailable {
	color: var(--cbde-text-muted);
}

/* ---------------------------------------------------------------- price */

.cbde-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.cbde-price-value {
	display: inline-flex;
	align-items: baseline;
	font-weight: 700;
	font-size: 1.6em;
	line-height: 1.1;
}

.cbde-price-value .currency {
	font-size: .7em;
	margin-right: 2px;
}

/* Only while the number is counting. See count() in engine.js. */
.cbde-price-value.is-counting .amount {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.cbde-price-prefix,
.cbde-price-suffix {
	color: var(--cbde-text-muted);
	font-size: .9em;
}

.cbde-price-fallback {
	color: var(--cbde-text-muted);
	font-size: .95em;
}

/* Kept from 1.x: existing templates hook this class name. */
.codicts-price-animate,
.cbde-price.codicts-price-animate {
	animation: cbde-pop var(--cbde-price-anim, .35s) ease;
}

/*
 * The settled quote, for screen readers only.
 *
 * The counting / fading / sliding styles take the visible number out of the
 * accessibility tree while it moves and put the finished value in here instead,
 * so the quote is announced once per change rather than once per frame.
 */
.cbde-price-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes cbde-pop {
	0%   { transform: scale(.96); opacity: .6; }
	60%  { transform: scale(1.02); opacity: 1; }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.codicts-price-animate,
	.cbde-price.codicts-price-animate {
		animation: none;
	}
}

/* -------------------------------------------------------------- summary */

.cbde-summary-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cbde-summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.cbde-summary-label {
	min-width: 0;
}

.cbde-summary-value {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cbde-summary-row--deduction {
	color: var(--cbde-text-muted);
}

.cbde-summary-row--total {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--cbde-border);
	font-weight: 700;
}

.cbde-summary-note,
.cbde-summary-empty {
	font-size: .85em;
	color: var(--cbde-text-muted);
}

/* --------------------------------------------------------------- submit */

.cbde-submit {
	display: flex;
	flex-direction: column;
}

.cbde-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border: 1px solid var(--cbde-accent);
	border-radius: var(--cbde-radius);
	background: var(--cbde-accent);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.cbde-submit-btn:hover {
	color: #ffffff;
}

/*
 * Icon and label are siblings HERE, not inside the button - the button has this
 * one child. The Icon spacing control writes its gap onto this element, so it
 * has to be a flex container or the control silently does nothing.
 */
.cbde-submit-btn-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cbde-submit-btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.cbde-submit-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cbde-submit-btn.cbde-is-disabled,
.cbde-submit-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------------------------------------------------------- editor note */

.cbde-editor-note {
	padding: 8px 12px;
	font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	color: #6b7280;
	background: #ffffff;
}

.cbde-editor-note--warning {
	color: #b45309;
	border-color: #fcd34d;
}

.cbde-editor-note--ok {
	color: #047857;
	border-color: #6ee7b7;
}

/*
 * Two pricing rows carrying the same storage term: the option cannot resolve to
 * one row, so the lowest row id wins and the other price is unreachable. The
 * markup has always tagged that option, but nothing styled the class, so the
 * warning rendered invisibly. The Data Provider widget used to report it in the
 * editor; it was removed in 3.0.0, leaving this as the only signal.
 *
 * Editor only, deliberately. This is a data problem for whoever builds the page,
 * and a buyer should never see the calculator commenting on its own wiring.
 */
body.elementor-editor-active .cbde-option--shared-variant {
	outline: 2px dashed #f6ad3d;
	outline-offset: 2px;
	position: relative;
}

body.elementor-editor-active .cbde-option--shared-variant::after {
	content: "shares a pricing row";
	position: absolute;
	top: -0.65rem;
	right: 0.4rem;
	padding: 0 0.35rem;
	font-size: 10px;
	line-height: 1.4;
	white-space: nowrap;
	color: #7c4a03;
	background: #fcd34d;
	border-radius: 3px;
	pointer-events: none;
}

/* Text field source ------------------------------------------------------- */

/*
 * Deliberately almost nothing. Every visual choice here is an Elementor control,
 * and a default that looked "designed" would fight the theme on sites that style
 * their own inputs. Only the two things a bare input gets wrong inside a widget:
 * it does not fill its container, and its padding is added to its width.
 */
.cbde-selector--text {
	display: block;
}

input.cbde-text-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Rules widget ------------------------------------------------------------ */

/*
 * Same restraint as everything above: the stack is a flex column so the "Gap
 * between rules" control has something to act on, and the title and description
 * only get their browser margins cleared so the spacing controls start from
 * zero rather than from a heading default that differs per theme. Every colour,
 * size and weight is an Elementor control.
 */
.cbde-rules {
	display: flex;
	flex-direction: column;
}

.cbde-rule-title,
.cbde-rule-desc {
	margin-top: 0;
}