/*
 * fd_catalog.css 1.0.0 - fieraruldumbravei.ro, pachetul p08_calculator.
 * Incarcat pe toate paginile din common/header.twig (vqmod fd_p08_product.xml). Bump ?v= la fiecare schimbare.
 */
:root {
	--fd-cat-accent: #0f3a8d;
	--fd-cat-accent-hover: #0d52d6;
	--fd-cat-ok: #50ad55;
	--fd-cat-danger: #dd0e1c;
	--fd-cat-muted: rgba(0, 0, 0, 0.65);
	--fd-cat-radius: 4px;
	--fd-cat-fast: 150ms;
}

/* ------------------------------------------------ unitatea pretului: „650 lei/m²” */
.fd-price-unit {
	white-space: nowrap;
}
.price-group:has(.fd-price-unit) {
	align-items: baseline;
}
.price-group .fd-price-unit {
	font-size: max(12px, 0.7em);
	margin-left: 2px;
	opacity: 0.85;
}

/* ------------------------------------------------ calculator de suprafata */
/* Journal pune butoanele input-group pe rand separat sub 350px (flex-basis calc * 999) si .form-group > div cu wrap:
   calculatorul ramane pe un singur rand: [-] [valoare] [+] */
.product-options .form-group > .fd-calc {
	flex-wrap: nowrap;
	width: 100%;
}
.product-options .form-group .fd-calc > .input-group-btn {
	flex: 0 0 auto;
	width: auto;
}
.fd-calc .form-control {
	flex: 1 1 auto;
	text-align: center;
	min-width: 0;
}
.fd-calc .fd-calc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 100%;
	padding: 0 12px;
	border: 0;
	border-radius: var(--fd-cat-radius);
	background: var(--fd-cat-accent);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--fd-cat-fast) ease-out, transform var(--fd-cat-fast) ease-out;
}
.fd-calc .fd-calc-btn:hover {
	background: var(--fd-cat-accent-hover);
}
.fd-calc .fd-calc-btn:active {
	transform: scale(0.94);
}
.fd-calc .fd-calc-btn:focus-visible {
	outline: 2px solid var(--fd-cat-accent-hover);
	outline-offset: 2px;
}
.fd-calc-limits,
.fd-calc-note,
.product-options .form-group > .fd-calc-limits,
.product-options .form-group > .fd-calc-note {
	display: block;
	width: 100%;
	padding: 5px 0 0;
	font-size: max(12px, 85%);
	text-align: center;
	color: var(--fd-cat-muted);
}
.fd-calc-note {
	font-weight: 700;
	color: inherit;
}
@media (min-width: 501px) {
	.product-options .fd-calc-group {
		display: inline-block;
		width: calc(50% - 6px);
		vertical-align: top;
	}
	.product-options .fd-calc-group + .fd-calc-group {
		margin-left: 8px;
	}
}

/* ------------------------------------------------ valorile optiunilor radio: lista + informatii + anulare */
.fd-ov-list .radio {
	position: relative;
	display: flex !important;
	align-items: center;
	width: 100% !important;
	margin-bottom: 7px !important;
}
.fd-ov-list .radio > label {
	flex: 1 1 auto;
}
.fd-ov-um {
	font-style: italic;
	font-size: max(12px, 85%);
}
.fd-ov-tools {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
}
.fd-ov-info,
.fd-ov-clear {
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	cursor: pointer;
}
.fd-ov-info {
	font-size: 150%;
	color: var(--fd-cat-accent);
	transition: color var(--fd-cat-fast) ease-out;
}
.fd-ov-info:hover {
	color: var(--fd-cat-accent-hover);
}
.fd-ov-clear {
	font-size: 150%;
	color: var(--fd-cat-danger);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease-out;
}
.fd-ov-list .radio.fd-ov-checked .fd-ov-clear {
	opacity: 1;
	pointer-events: auto;
}
.fd-ov-info:focus-visible,
.fd-ov-clear:focus-visible {
	outline: 2px solid var(--fd-cat-accent-hover);
	outline-offset: 2px;
}

/* fereastra de informatii (<dialog> nativ) */
.fd-ov-dialog {
	width: min(480px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.fd-ov-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.fd-ov-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.fd-ov-dialog-close {
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.fd-ov-dialog-body {
	padding: 16px;
}
.fd-ov-dialog-image {
	display: block;
	max-width: 100%;
	margin: 0 auto 12px;
}
.fd-ov-dialog-subtitle {
	margin-bottom: 12px;
	font-size: 110%;
	font-weight: 700;
	text-align: center;
}
.fd-ov-dialog-subtitle:empty {
	display: none;
}
.fd-ov-dialog-description {
	white-space: pre-line;
	text-align: justify;
}

@media (prefers-reduced-motion: reduce) {
	.fd-calc .fd-calc-btn,
	.fd-ov-info,
	.fd-ov-clear {
		transition: none;
	}
}