/*
 * EVOLUX — configurator.css
 * Configurator de pret live (brief 5.2 + prompt-configurator.md). Mobile-first:
 * lista de functionalitati sus, bara de total fixa jos. Layout desktop
 * (lista stanga / panou sticky dreapta) in responsive.css.
 */

.configurator {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding-bottom: 5.5rem; /* spatiu pentru bara fixa de jos pe mobile */
}

/* Latime maxima mai mare pe pagina de configurator (fata de restul site-ului) */
.container.configurator-page {
	max-width: 1440px;
}

.configurator__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Breadcrumb-ul e definit in main.css (component reutilizabil sitewide) */

/* =========================================================
 * PACHET DE BAZA — readonly
 * ========================================================= */
.configurator__base-package {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius);
	padding: var(--space-md);
}

.configurator__base-package-price {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: 1.375rem;
	color: var(--color-trust);
}

.configurator__base-package-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.configurator__base-package h3 {
	font-size: 0.9375rem;
	margin-bottom: var(--space-xs);
}

.configurator__base-package ul {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.configurator__base-package li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.configurator__base-package li svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-focus);
}

/* =========================================================
 * PACHETE RAPIDE — Basic / Plus / Evo Plus
 * ========================================================= */
.configurator__packages {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.configurator__packages-title {
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}

.configurator__packages-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.configurator__package-pill {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	width: 100%;
	min-height: var(--touch-target);
	padding: var(--space-sm);
	background-color: var(--color-white);
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	text-align: left;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.configurator__package-pill:hover,
.configurator__package-pill:focus-visible {
	border-color: var(--color-focus);
}

.configurator__package-pill[data-active="true"] {
	border-color: var(--color-action);
	background-color: #FFF4EC;
}

.configurator__package-pill-label {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
}

.configurator__package-pill-desc {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.configurator__package-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
}

.configurator__package-view-link {
	background: none;
	border: none;
	color: var(--color-focus);
	font-weight: var(--fw-medium);
	text-decoration: underline;
	min-height: var(--touch-target);
	padding-inline: 0.25rem;
}

/* =========================================================
 * GRUPURI DE FUNCTIONALITATI
 * ========================================================= */
.configurator__group {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-white);
	/* FARA overflow:hidden — altfel tooltip-ul ultimei functionalitati din grup
	   se taie la marginea containerului. Rotunjirea colturilor de sus se face
	   direct pe header (mai jos), nu prin clipping. */
}

.configurator__group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	width: 100%;
	padding: var(--space-sm);
	background-color: var(--color-bg-alt);
	border: none;
	border-radius: var(--radius) var(--radius) 0 0;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: 1.0625rem;
	color: var(--color-trust);
	min-height: var(--touch-target);
}

.configurator__group-icon {
	transition: transform var(--transition-fast);
}

.configurator__group[data-open="true"] .configurator__group-icon {
	transform: rotate(180deg);
}

.configurator__group-body {
	padding: var(--space-xs) var(--space-sm) var(--space-sm);
}

.configurator__group[data-open="false"] .configurator__group-body {
	display: none;
}

.configurator__group-note {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-xs);
}

/* =========================================================
 * FIECARE FUNCTIONALITATE
 * ========================================================= */
.configurator__feature {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-sm);
	position: relative;
}

.configurator__feature:first-child {
	border-top: none;
}

.configurator__feature-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.configurator__feature-checkbox {
	width: 24px;
	height: 24px;
	min-width: 24px;
	accent-color: var(--color-focus);
}

.configurator__feature-label {
	flex: 1;
	font-weight: var(--fw-medium);
	min-height: var(--touch-target);
	display: flex;
	align-items: center;
}

.configurator__feature-price {
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
	white-space: nowrap;
}

/* Stare dezactivata — feature-ul depinde de un parinte nebifat */
.configurator__feature.is-disabled .configurator__feature-label,
.configurator__feature.is-disabled .configurator__feature-price {
	opacity: 0.4;
}

.configurator__feature-checkbox:disabled,
.configurator__stepper-btn:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* ---- Iconita info + tooltip (hover desktop / tap mobil) ---- */
.configurator__info-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	min-width: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	background-color: var(--color-white);
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-family: Georgia, serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.configurator__info-icon:hover,
.configurator__info-icon:focus-visible,
.configurator__info-icon[aria-expanded="true"] {
	border-color: var(--color-focus);
	color: var(--color-focus);
}

.configurator__tooltip {
	display: none;
	position: absolute;
	z-index: 40;
	right: var(--space-xs);
	left: var(--space-xs);
	margin-top: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-trust);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	line-height: 1.5;
	box-shadow: 0 6px 20px rgba(15, 42, 74, 0.25);
}

.configurator__tooltip::before {
	content: '';
	position: absolute;
	top: -5px;
	right: 1.25rem;
	width: 10px;
	height: 10px;
	background-color: var(--color-trust);
	transform: rotate(45deg);
}

.configurator__tooltip[data-open="true"] {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	.configurator__feature:has(.configurator__info-icon:hover) .configurator__tooltip,
	.configurator__info-icon:focus-visible + .configurator__tooltip {
		display: block;
	}
}

/* ---- Stepper numeric (+/-), inlocuieste input type=number ---- */
.configurator__stepper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.25rem;
}

.configurator__stepper-btn {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border: none;
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-alt);
	color: var(--color-trust);
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.configurator__stepper-btn:hover:not(:disabled),
.configurator__stepper-btn:focus-visible:not(:disabled) {
	background-color: var(--color-focus);
	color: var(--color-white);
}

.configurator__stepper-value {
	min-width: 1.5rem;
	text-align: center;
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
}

/* ---- Multilingv — selectie multipla de limbi + camp text custom ---- */
.configurator__feature--multilang .configurator__feature-row {
	align-items: flex-start;
}

.configurator__multilang-hint {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin: 0.25rem 0 var(--space-xs);
}

.configurator__multilang-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.configurator__multilang-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--touch-target);
	font-weight: var(--fw-medium);
}

.configurator__multilang-option input {
	width: 22px;
	height: 22px;
	min-width: 22px;
	accent-color: var(--color-focus);
}

.configurator__multilang-custom {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--color-border);
}

.configurator__multilang-custom .configurator__custom-list:empty {
	display: none;
}

.configurator__multilang-custom .configurator__multilang-hint {
	margin-top: var(--space-xs);
	margin-bottom: 0;
}

/* ---- Camp "Altele" — randuri dinamice ---- */
.configurator__custom-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
}

.configurator__custom-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.configurator__custom-row input[type="text"] {
	flex: 1;
	min-height: var(--touch-target);
	padding: 0.5rem var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.configurator__custom-row-price {
	white-space: nowrap;
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
	font-size: 0.9375rem;
}

.configurator__custom-row-remove {
	width: var(--touch-target);
	height: var(--touch-target);
	border: none;
	background: none;
	color: #B91C1C;
	font-size: 1.125rem;
}

.configurator__custom-add-btn {
	align-self: flex-start;
	margin-top: var(--space-xs);
}

.configurator__custom-note {
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--color-text-secondary);
	margin-top: var(--space-xs);
}

/* =========================================================
 * PANOU DE PRET — mobil: bara fixa jos; desktop: sticky (responsive.css)
 * ========================================================= */
.configurator__panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background-color: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(15, 42, 74, 0.12);
	padding: var(--space-sm);
}

.configurator__panel-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
}

.configurator__panel-total-label {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.configurator__panel-total-value {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: 1.5rem;
	color: var(--color-trust);
}

.configurator__panel-submit-btn {
	width: 100%;
}

/* Detaliul complet (linie pachet, lista, tva, contact) — doar desktop */
.configurator__panel-details {
	display: none;
}

.configurator__panel-base-line {
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.configurator__panel-items {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-top: var(--space-xs);
}

.configurator__panel-items li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xs);
	font-size: 0.875rem;
}

.configurator__panel-items-empty {
	color: var(--color-text-secondary);
	font-style: italic;
}

.configurator__panel-separator {
	height: 1px;
	background-color: var(--color-border);
	margin-block: var(--space-sm);
}

.configurator__panel-vat-note {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--color-text-secondary);
}

.configurator__panel-contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-weight: var(--fw-medium);
}

.configurator__panel-contact a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-trust);
}

.configurator__panel-contact a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-focus);
}

.configurator__panel-more {
	display: block;
	width: 100%;
	margin-top: var(--space-sm);
	text-align: center;
	font-size: 0.875rem;
}

.configurator__more-info-link {
	display: inline-block;
	margin-bottom: var(--space-sm);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	color: var(--color-focus);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.configurator__more-info-link:hover,
.configurator__more-info-link:focus-visible {
	color: var(--color-action);
}

/* =========================================================
 * MODAL — "Vezi ce include" pachet + Submit configuratie
 * ========================================================= */
.configurator-modal,
.configurator-package-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.configurator-modal[hidden],
.configurator-package-modal[hidden] {
	display: none;
}

.configurator-modal__overlay,
.configurator-package-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 42, 74, 0.55);
}

.configurator-modal__dialog,
.configurator-package-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	background-color: var(--color-white);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: var(--space-md);
}

.configurator-modal__close,
.configurator-package-modal__close {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
	width: var(--touch-target);
	height: var(--touch-target);
	border: none;
	background: none;
	font-size: 1.5rem;
	color: var(--color-text-secondary);
}

.configurator-modal__summary {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
	margin-block: var(--space-sm);
	font-size: 0.9375rem;
}

.configurator-modal__summary ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.375rem;
}

.configurator-modal__summary-total {
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
	margin-top: var(--space-xs);
	padding-top: var(--space-xs);
	border-top: 1px solid var(--color-border);
}

.configurator-modal__next-steps-intro {
	font-weight: var(--fw-semibold);
	color: var(--color-trust);
	margin-bottom: var(--space-sm);
}

.configurator-modal__next-steps-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding-left: 1.25rem;
	margin-bottom: var(--space-md);
}

.configurator-modal__next-steps-guarantee {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
	font-size: 0.9375rem;
}

.configurator__contact-methods {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.configurator__contact-methods legend {
	font-weight: var(--fw-medium);
	padding-inline: 0.25rem;
}

.configurator__contact-method {
	padding-block: var(--space-xs);
}

.configurator__contact-method-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--touch-target);
	font-weight: var(--fw-medium);
}

.configurator__contact-method-field {
	margin-top: 0.375rem;
	margin-left: 2rem;
}

.configurator__contact-method-field input {
	width: 100%;
	min-height: var(--touch-target);
	padding: 0.5rem var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.configurator__contact-methods-error {
	color: #B91C1C;
	font-size: 0.875rem;
	margin-top: var(--space-xs);
}

.configurator__terms {
	font-size: 0.9375rem;
}

.configurator__terms label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: var(--fw-regular);
}

.configurator__terms a {
	color: var(--color-focus);
	text-decoration: underline;
}

/* =========================================================
 * FORMULAR (camp-uri generice, folosite si in modal)
 * ========================================================= */
.configurator__form-field {
	margin-bottom: var(--space-sm);
}

.configurator__form-field label {
	display: block;
	font-weight: var(--fw-medium);
	margin-bottom: 0.25rem;
}

.configurator__form-field input,
.configurator__form-field textarea {
	width: 100%;
	min-height: var(--touch-target);
	padding: 0.625rem var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
}

.configurator__form-submit {
	width: 100%;
	margin-top: var(--space-xs);
}

.configurator__form-status {
	margin-top: var(--space-xs);
	font-weight: var(--fw-medium);
}

.configurator__form-status[data-state="success"] {
	color: var(--color-focus);
}

.configurator__form-status[data-state="error"] {
	color: #B91C1C;
}

/* Honeypot anti-spam — invizibil pentru oameni, vizibil pentru boti */
.configurator__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.configurator__form-field.configurator__terms label input {
    width: 15px;
    height: 15px;
}

.configurator__form-field.configurator__terms label {
    display: flex;
    align-items: center;
}

li.configurator__panel-item span:last-child {
    min-width: 37px;
}