/*
 * OgledalaLED Configurator — styled with the theme's design tokens
 * (falls back to sensible defaults when a token is missing).
 */

.oled-cfg {
	font-family: var(--font-body, inherit);
	margin-bottom: var(--space-5, 24px);
}

/* ---- Discounted-products limit popup ---- */
.oled-limit[hidden] {
	display: none;
}
.oled-limit {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.oled-limit__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 15, 0.55);
}
.oled-limit__box {
	position: relative;
	background: var(--surface-card, #fff);
	border-radius: var(--radius-lg, 12px);
	max-width: 460px;
	width: 100%;
	padding: 26px 28px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	text-align: center;
}
.oled-limit__x {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var(--text-muted, #999);
	cursor: pointer;
}
.oled-limit__title {
	font-weight: var(--fw-bold, 700);
	font-size: var(--fs-lg, 18px);
	color: var(--text-strong, #111);
	margin: 0 0 10px;
}
.oled-limit__body {
	font-size: var(--fs-sm, 14px);
	color: var(--text-strong, #444);
	line-height: 1.6;
}
.oled-limit__links {
	margin-top: 10px !important;
	font-weight: var(--fw-semibold, 600);
}
.oled-limit__links a {
	color: var(--brand-deep, #d9990a);
	text-decoration: none;
}
.oled-limit__links a:hover {
	text-decoration: underline;
}
.oled-limit__actions {
	margin-top: 18px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.oled-limit__cta,
.oled-limit__ok {
	border: 0;
	border-radius: var(--radius-pill, 999px);
	padding: 11px 24px;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-sm, 14px);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.oled-limit__cta {
	background: var(--brand, #fec227);
	color: var(--on-brand, #1c1b17);
}
.oled-limit__cta:hover {
	background: var(--brand-strong, #f0b400);
}
.oled-limit__ok {
	background: transparent;
	color: var(--text-strong, #444);
	border: 1px solid var(--border-default, #ddd);
}

/* The theme renders form.cart as a flexbox and our configurator is a flex child
   (injected before the quantity + add-to-cart button). Force it onto its own
   full-width row so align-items:stretch can't blow the button up to the
   configurator's height. */
form.cart .oled-cfg {
	flex: 0 0 100%;
	max-width: 100%;
	align-self: stretch;
}

/* Strike (original) price */
.oled-cfg-strike {
	display: inline-block;
	color: var(--text-muted, #888);
	font-size: var(--fs-lg, 18px);
	margin-bottom: var(--space-3, 12px);
}

/* The hidden attribute must always win over our display rules. */
.oled-cfg-strike[hidden],
.oled-main-strike[hidden],
.oled-cfg-float[hidden],
.oled-cfg-float del[hidden] {
	display: none !important;
}

/* Strike inside the theme's main price (p.price under the title) */
.oled-main-strike {
	color: var(--text-muted, #999);
	font-size: 0.65em;
	font-weight: 400;
	margin-right: 8px;
}

/* Live main price in the brand accent color */
.single-product div.product p.price [data-oled-main-price] {
	color: var(--brand-deep, #d9990a);
}

/* Sale badge over the gallery image (replaces WC's default span.onsale).
   calculator.js moves the badge inside .woocommerce-product-gallery (which is
   position:relative per WC core); the div.product rule is the no-JS fallback. */
.single-product div.product {
	position: relative;
}
.single-product .oled-single-sale-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 20;
	background: var(--danger-500, #d9534f);
	color: #fff;
	font-weight: var(--fw-bold, 700);
	font-size: var(--fs-xs, 13px);
	padding: 6px 14px;
	border-radius: var(--radius-pill, 999px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}
.single-product .woocommerce-product-gallery .oled-single-sale-badge {
	top: 14px;
	left: 14px;
}

/* Info tooltip */
.oled-cfg-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	vertical-align: -0.28em;
	margin-left: 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: #545a61;
	font: 600 11px/1 system-ui, -apple-system, sans-serif;
	opacity: .7;
	cursor: help;
	outline: none;
	transition: opacity .15s ease;
}
/* Match the equipment info icon: CSS circle + "i" instead of the inline SVG. */
.oled-cfg-tip::before { content: "i"; }
.oled-cfg-tip > svg { display: none; }
.oled-cfg-tip:hover,
.oled-cfg-tip:focus-visible {
	opacity: 1;
}
.oled-cfg-tip-bubble {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ink-950, #1c1b17);
	color: #fff;
	font-size: var(--fs-xs, 12.5px);
	font-weight: 400;
	line-height: 1.45;
	padding: 8px 12px;
	border-radius: var(--radius-md, 8px);
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
	z-index: 30;
}
.oled-cfg-tip-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--ink-950, #1c1b17);
}
.oled-cfg-tip:hover .oled-cfg-tip-bubble,
.oled-cfg-tip:focus-visible .oled-cfg-tip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Floating always-visible total — bottom-RIGHT on desktop (mobile override
   docks it bottom-left and lifts it level with the chat launcher). */
.oled-cfg-float {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 9990;
	background: var(--surface-card, #fff);
	color: var(--text-strong, #111);
	border: 1px solid var(--border-default, #e5e2da);
	border-radius: var(--radius-lg, 16px);
	padding: 9px 18px;
	font-size: var(--fs-sm, 14px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	white-space: nowrap;
	/* Stacked: label + current price on top, original crossed out underneath. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
	max-width: calc(100vw - 32px);
}
.oled-cfg-float__main {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.oled-cfg-float strong {
	font-size: var(--fs-lg, 18px);
	color: var(--brand-deep, #d9990a);
}
.oled-cfg-float del {
	margin-top: 1px;
	color: var(--text-muted, #999);
	font-size: var(--fs-2xs, 11px);
	font-weight: 400;
}
@media (max-width: 560px) {
	/* Phones: dock left (chat launcher lives bottom-right) and lift it up so
	   the pill sits level with the chat bubble instead of the screen edge. */
	.oled-cfg-float {
		left: 16px;
		right: auto;
		bottom: calc(26px + env(safe-area-inset-bottom, 0px));
	}
}
/* Hide the floating total while the side-cart drawer is open (it sits above
   the drawer otherwise). Body class toggled by the theme's cart drawer. */
body.oled-cart-open .oled-cfg-float {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

/* Info box: area + discount messages */
.oled-cfg-info {
	background: var(--surface-sunken, #f4f3f0);
	border-radius: var(--radius-lg, 8px);
	padding: var(--space-4, 15px) var(--space-5, 20px);
	margin-bottom: var(--space-5, 24px);
	font-size: var(--fs-sm, 14px);
	color: var(--text-strong, #333);
	line-height: 1.6;
}
.oled-cfg-info p {
	margin: 0 0 6px;
}
.oled-cfg-info p:last-child {
	margin-bottom: 0;
}

/* ---- Discount progress bar (renderDisc in calculator.js) ---- */
.oled-disc__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
	flex-wrap: wrap;
	font-size: var(--fs-sm, 14px);
	color: var(--text-strong, #333);
}
.oled-disc__head svg {
	width: 1em;
	height: 1em;
	vertical-align: -2px;
	margin-right: 5px;
	color: var(--brand-deep, #d9990a);
}
.oled-disc__pct {
	color: var(--brand-deep, #d9990a);
	font-weight: var(--fw-semibold, 600);
	white-space: nowrap;
}
.oled-disc__track {
	position: relative;
	height: 8px;
	margin: 16px 8px 30px;
	background: var(--border-default, #e0e0e0);
	border-radius: var(--radius-pill, 999px);
}
.oled-disc__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-radius: var(--radius-pill, 999px);
	background: var(--grad-gold, linear-gradient(90deg, var(--brand, #fec227), var(--brand-deep, #d9990a)));
	transition: width 0.45s var(--ease-out, ease);
}
.oled-disc__mark {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--surface-card, #fff);
	border: 2px solid var(--border-default, #ccc);
	transition: border-color 0.3s ease, background 0.3s ease;
}
.oled-disc__mark.is-on {
	border-color: var(--brand-deep, #d9990a);
	background: var(--brand-deep, #d9990a);
}
.oled-disc__mark-label {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--fs-xs, 11px);
	color: var(--text-muted, #999);
	white-space: nowrap;
}
.oled-disc__mark:last-of-type .oled-disc__mark-label {
	transform: translateX(-85%);
}
.oled-disc__mark.is-on .oled-disc__mark-label {
	color: var(--brand-deep, #d9990a);
	font-weight: var(--fw-semibold, 600);
}
.oled-disc__msg {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: var(--fs-sm, 13px);
	color: var(--text-strong, #444);
	line-height: 1.4;
}
.oled-disc__msg svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	color: var(--brand-deep, #d9990a);
}

/* ---- Fixed-configuration product: spec sheet + cross-links ---- */
.oled-fixed {
	margin-bottom: var(--space-5, 24px);
}
.oled-fixed__specs {
	background: var(--surface-sunken, #f4f3f0);
	border-radius: var(--radius-lg, 8px);
	padding: var(--space-4, 15px) var(--space-5, 20px);
}
.oled-fixed__title {
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-sm, 14px);
	margin: 0 0 8px;
	color: var(--text-strong, #222);
}
.oled-fixed__specs table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm, 14px);
}
.oled-fixed__specs th {
	text-align: left;
	font-weight: 400;
	color: var(--text-muted, #777);
	padding: 6px 12px 6px 0;
	width: 42%;
	vertical-align: top;
}
.oled-fixed__specs td {
	padding: 6px 0;
	color: var(--text-strong, #333);
}
.oled-fixed__specs tr + tr th,
.oled-fixed__specs tr + tr td {
	border-top: 1px solid var(--border-subtle, #eae7e0);
}
.oled-fixed__crosslink {
	margin: var(--space-3, 12px) 0 0;
	font-size: var(--fs-sm, 14px);
	color: var(--text-muted, #777);
}
.oled-fixed__crosslink a {
	color: var(--brand-deep, #d9990a);
	font-weight: var(--fw-semibold, 600);
	text-decoration: none;
}
.oled-fixed__crosslink a:hover {
	text-decoration: underline;
}

/* "Available now" fixed variants on a configurable product */
.oled-variants {
	flex: 0 0 100%;
	margin: var(--space-4, 16px) 0 var(--space-5, 24px);
}
.oled-variants__title {
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-sm, 14px);
	color: var(--text-strong, #222);
	margin: 0 0 8px;
}
.oled-variants__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oled-variants__item {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 14px;
	border: 1px solid var(--border-default, #e0ddd6);
	border-radius: var(--radius-md, 8px);
	background: var(--surface-card, #fff);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oled-variants__item:hover {
	border-color: var(--brand, #fec227);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.oled-variants__name {
	font-size: var(--fs-xs, 12.5px);
	color: var(--text-strong, #333);
	font-weight: var(--fw-semibold, 600);
}
.oled-variants__price {
	font-size: var(--fs-xs, 12px);
	color: var(--brand-deep, #d9990a);
}
.oled-variants__price del {
	color: var(--text-muted, #999);
	margin-right: 4px;
}

/* Fields */
.oled-cfg-field {
	margin-bottom: var(--space-4, 20px);
}

/* Širina/Visina side by side */
.oled-cfg-dims {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-4, 16px);
	align-items: start;
}
@media (max-width: 560px) {
	.oled-cfg-dims {
		grid-template-columns: 1fr;
	}
}
.oled-cfg-field__inner {
	min-height: 0;
}

/* Collapsible fields (those with a hide_when rule) animate open/closed via the
   grid 1fr->0fr trick — smooth height collapse without measuring pixels. */
.oled-cfg-field--collapsible {
	display: grid;
	grid-template-rows: 1fr;
}
.oled-cfg-field--collapsible > .oled-cfg-field__inner {
	overflow: hidden;
}
.oled-anim-ready .oled-cfg-field--collapsible {
	transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}
.oled-cfg-field--collapsible.oled-cfg-hidden {
	grid-template-rows: 0fr;
	opacity: 0;
	margin-bottom: 0;
	pointer-events: none;
}

/* Non-collapsible fields (and the no-JS fallback) hide outright. */
.oled-cfg-hidden:not(.oled-cfg-field--collapsible) {
	display: none;
}

.oled-cfg-label {
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-sm, 14px);
	margin-bottom: var(--space-2, 8px);
	display: inline-flex;   /* center the info tip with the label text */
	align-items: center;
	color: var(--text-strong, #222);
}
.oled-cfg-req {
	color: var(--danger, #d33);
}

.oled-cfg input[type="number"],
.oled-cfg select {
	width: 100%;
	height: 48px;
	padding: 10px 15px;
	border: var(--border-thin, 1px) solid var(--border-default, #e0e0e0);
	border-radius: var(--radius-md, 8px);
	background-color: var(--surface-card, #fff);
	color: var(--text-strong, #333);
	font-size: var(--fs-base, 15px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.oled-cfg input[type="number"]:focus,
.oled-cfg select:focus {
	border-color: var(--brand, #fec227);
	outline: none;
	box-shadow: var(--ring-gold, 0 0 0 3px rgba(254, 194, 39, 0.2));
}

.oled-cfg-subtext {
	font-size: var(--fs-xs, 12px);
	color: var(--text-muted, #777);
	margin-top: var(--space-1, 4px);
	display: block;
	min-height: 1em;
}

/* ---- Number steppers (steppers.js) ---- */

/* Hide the native (hover-only / mobile-absent) spinner. */
.oled-cfg-field--number input[type="number"]::-webkit-outer-spin-button,
.oled-cfg-field--number input[type="number"]::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.oled-cfg-field--number input[type="number"],
.single-product form.cart .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

.oled-step {
	display: flex;
	align-items: stretch;
	width: 100%;
}
.oled-step__btns {
	display: flex;
	flex-direction: column;
	flex: 0 0 40px;
}
.oled-step__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: var(--border-thin, 1px) solid var(--border-default, #e0e0e0);
	background: var(--surface-sunken, #f4f3f0);
	color: var(--text-strong, #555);
	cursor: pointer;
	line-height: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.oled-step__btn:hover,
.oled-step__btn:active {
	background: var(--brand-tint, #fff9e6);
	border-color: var(--brand, #fec227);
	color: var(--brand-deep, #d9990a);
	z-index: 1;
}
.oled-step__btn:active {
	transform: scale(0.9);
}

/* Dimension fields: buttons attach to the right edge of a full-width input. */
.oled-cfg-field--number .oled-step > input {
	flex: 1 1 auto;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-right: 0 !important;
}
.oled-cfg-field--number .oled-step__up {
	border-top-right-radius: var(--radius-md, 8px);
}
.oled-cfg-field--number .oled-step__down {
	border-top: 0;
	border-bottom-right-radius: var(--radius-md, 8px);
}

/* Quantity: compact buttons living inside the theme's pill. */
.single-product form.cart .quantity .oled-step {
	width: auto;
	align-items: center;
}
.single-product form.cart .quantity .oled-step__btns {
	flex-basis: 24px;
	height: 40px;
}
.single-product form.cart .quantity .oled-step__btn {
	border: 0;
	background: transparent;
	color: var(--text-muted, #999);
	border-radius: 5px;
}

@media (max-width: 560px) {
	.oled-step__btns {
		flex-basis: 46px;
	}
}

/* Radio group */
.oled-cfg-radios {
	list-style: none;
	padding: 5px;
	margin: 0;
	border: var(--border-thin, 1px) solid var(--border-default, #e0e0e0);
	border-radius: var(--radius-lg, 8px);
	background-color: var(--surface-card, #fff);
}
.oled-cfg-radios li {
	margin: 0;
	padding: 0;
	border-bottom: var(--border-hairline, 1px) solid var(--border-subtle, #f0f0f0);
}
.oled-cfg-radios li:last-child {
	border-bottom: none;
}
.oled-cfg-radios label {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	margin: 0;
	cursor: pointer;
	font-size: var(--fs-sm, 14px);
	color: var(--text-strong, #333);
	transition: background-color 0.15s;
}
.oled-cfg-radios input[type="radio"] {
	margin-right: 12px;
	accent-color: var(--brand, #fec227);
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}
.oled-cfg-radios label:has(input:checked) {
	background-color: var(--brand-tint, #fff9e6);
	font-weight: var(--fw-medium, 500);
	border-radius: var(--radius-sm, 6px);
}

/* Select arrow */
.oled-cfg-select-wrap {
	position: relative;
	display: block;
}
.oled-cfg-select-wrap::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--text-muted, #777);
	pointer-events: none;
}
.oled-cfg select {
	appearance: none;
	-webkit-appearance: none;
}

/* Validation */
.oled-cfg-error {
	display: block;
	color: var(--danger, #c0392b);
	font-size: var(--fs-xs, 12px);
	margin-top: 3px;
	line-height: 1.2;
	/* Reserve one line so showing/clearing an error never shifts the layout. */
	min-height: 1.2em;
}
.oled-cfg-invalid input,
.oled-cfg-invalid select {
	border-color: var(--danger, #c0392b);
}

/* Total price */
.oled-cfg-price {
	font-size: var(--fs-lg, 18px);
	color: var(--text-strong, #111);
	margin: var(--space-5, 24px) 0;
}
.oled-cfg-price strong {
	font-size: var(--fs-xl, 24px);
	font-weight: var(--fw-bold, 700);
}