/* Quantum Doors — Configurator (stil Pirnar: preview stânga, secțiuni derulante, meniu lateral, bară jos) */
:root {
	/* Tokeni de culoare — pe :root ca să fie vizibili și în modal (randat în afara .qd-conf) */
	--qd-red: #d71920;
	--qd-ink: #0b0b0c;
	--qd-grey: #55565a;
	--qd-line: #e4e4e6;
	--qd-bg: #f6f6f4;
	/* Înălțimea header-ului fix al temei — reglează dacă coloana sticky e acoperită/lasă gol.
	   Desktop: header Avada fix ~170px. Mobil: header mai mic. */
	--qd-header-h: 170px;
	--qd-mobile-header-h: 100px;
}
.qd-conf {
	font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
	color: var(--qd-ink);
	max-width: 1280px;
	margin: 0 auto;
}
.qd-conf * { box-sizing: border-box; }
.qd-conf__loading { padding: 80px 20px; text-align: center; color: var(--qd-grey); }
/* Rezervă cât un ecran: altfel footer-ul e vizibil sub spinner și, când se
   randează configuratorul (mult mai înalt), e împins brusc în jos — adică CLS.
   Configuratorul randat depășește oricând înălțimea asta, deci nu rămâne gol. */
.qd-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 90vh; color: var(--qd-grey); font-size: 15px; }
.qd-spinner { width: 44px; height: 44px; border: 4px solid var(--qd-line); border-top-color: var(--qd-red); border-radius: 50%; animation: qd-spin .8s linear infinite; }
@keyframes qd-spin { to { transform: rotate(360deg); } }

/* Grila: preview | nav pași | conținut */
.qd-layout { display: grid; grid-template-columns: 320px 190px 1fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .qd-layout { grid-template-columns: 260px 170px 1fr; gap: 20px; } }
/* Pe mobil: flex-column (nu grid) ca .qd-steps sticky să se poată mișca pe tot scroll-ul,
   nu doar în celula lui de grid (care ar fi înaltă cât bara). */
@media (max-width: 780px) { .qd-layout { display: flex; flex-direction: column; gap: 16px; } }

/* Preview sticky */
.qd-preview { position: sticky; top: calc(var(--qd-header-h) + 12px); background: var(--qd-bg); border-radius: 12px; padding: 24px; text-align: center; }
@media (max-width: 780px) { .qd-preview { position: static; } }
/* aspect-ratio rezervă spațiul înainte de încărcare (imaginile de ușă sunt pătrate),
   altfel cutia are înălțime 0 și tot ce urmează sare în jos. */
.qd-preview img { max-width: 100%; max-height: 440px; aspect-ratio: 1; object-fit: contain; }
.qd-preview__note { font-size: 12px; color: #9a9ba0; margin-top: 12px; }
.qd-preview__swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }

/* Meniu vertical numerotat (stil Pirnar), sticky */
.qd-steps { list-style: none; margin: 0; padding: 0; position: sticky; top: calc(var(--qd-header-h) + 12px); display: flex; flex-direction: column; gap: 2px; }
.qd-steps__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--qd-grey); cursor: pointer; padding: 10px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: background .15s, color .15s; }
.qd-steps__item:hover { background: var(--qd-bg); }
.qd-steps__item.is-active { color: var(--qd-ink); font-weight: 600; border-left-color: var(--qd-red); background: var(--qd-bg); }
.qd-steps__item.is-done { color: var(--qd-ink); }
.qd-steps__item.is-done .qd-steps__num { background: var(--qd-red); color: #fff; }
.qd-steps__item.is-active .qd-steps__num { background: var(--qd-ink); color: #fff; }
.qd-steps__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--qd-line); font-size: 12px; font-weight: 600; }

/* Pe mobil: nav orizontal sticky sus, cu scroll */
@media (max-width: 780px) {
	/* Avada pune overflow pe <body> (x:hidden + y:scroll) → scroll-container care strică
	   position:sticky. CSS-ul se încarcă doar pe pagina configuratorului, deci e sigur.
	   `clip` taie overflow-ul orizontal la fel, dar fără să creeze scroll-container. */
	body { overflow-x: clip !important; overflow-y: visible !important; }
	.qd-steps { position: sticky; top: var(--qd-mobile-header-h); z-index: 20; flex-direction: row; overflow-x: auto; gap: 4px; background: #fff; padding: 10px 0; border-bottom: 1px solid var(--qd-line); -webkit-overflow-scrolling: touch; }
	.qd-steps__item { flex: 0 0 auto; border-left: none; border-bottom: 2px solid transparent; padding: 6px 10px; font-size: 13px; }
	.qd-steps__item.is-active { border-left: none; border-bottom-color: var(--qd-red); }
	.qd-steps__label { display: none; }
	.qd-steps__item.is-active .qd-steps__label { display: inline; }
}

/* Secțiuni */
.qd-section { padding: 8px 0 32px; border-bottom: 1px solid var(--qd-line); scroll-margin-top: calc(var(--qd-header-h) + 12px); }
@media (max-width: 780px) { .qd-section { scroll-margin-top: 70px; } }
.qd-section__num { color: var(--qd-red); font-weight: 700; }
.qd-section h2 { font-size: 22px; margin: 0 0 6px; }
.qd-section__hint { font-size: 14px; color: var(--qd-grey); margin: 0 0 18px; }
.qd-section__hint-medium { font-size: 14px; font-weight: 500; color: var(--qd-grey); margin: 0 0 18px; }

/* Opțiuni sub formă de carduri */
.qd-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qd-opt { border: 1px solid var(--qd-line); border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color .15s; background: #fff; }
.qd-opt:hover { border-color: #bbb; }
.qd-opt.is-sel { border-color: var(--qd-red); box-shadow: inset 0 0 0 1px var(--qd-red); }
.qd-opt__name { display: block; font-weight: 600; font-size: 14px; }
.qd-opt__meta { display: block; font-size: 12px; color: var(--qd-grey); margin-top: 2px; }
.qd-opt__price { color: var(--qd-ink); font-weight: 600; }

/* Imagine pe card (modele, forme, mânere etc.) */
.qd-opt__imgwrap { position: relative; display: block; }
.qd-opt__img { display: block; width: 100%; height: 120px; object-fit: contain; margin-bottom: 8px; border-radius: 6px; background: #fff; }
.qd-opt--models .qd-opt__img { height: 150px; }
.qd-opt__ph { display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 8px; border: 1px dashed var(--qd-line); border-radius: 6px; background: var(--qd-bg); color: #9a9ba0; font-size: 12px; }
.qd-select { width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid var(--qd-line); border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.4; background: #fff; }

/* Buton lupă (mărire imagine) */
.qd-zoom { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); border: 1px solid var(--qd-line); border-radius: 6px; cursor: pointer; color: var(--qd-ink); z-index: 2; }
.qd-zoom:hover { background: #fff; color: var(--qd-red); }
.qd-zoom svg { width: 17px; height: 17px; }
.qd-preview__imgwrap { position: relative; display: block; }

/* Lightbox imagine */
.qd-modal--img .qd-lightbox { position: relative; max-width: 92vw; max-height: 92vh; }
.qd-modal--img img { display: block; max-width: 92vw; max-height: 86vh; object-fit: contain; background: #fff; border-radius: 8px; }
.qd-modal--img .qd-modal__close { top: -14px; right: -8px; background: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Culori: dreptunghi mare rotunjit + nume dedesubt */
.qd-opts--colors { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.qd-opt--color { padding: 8px; }
.qd-opt__dot { display: block; width: 100%; height: 52px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); margin-bottom: 8px; }
/* Lupa pe pastila de culoare: mai mică decât cea standard (pastila are doar 52px). */
.qd-opt--color .qd-zoom { width: 26px; height: 26px; top: 4px; right: 4px; }
.qd-opt--color .qd-zoom svg { width: 15px; height: 15px; }
.qd-opt--color .qd-opt__name { font-size: 13px; font-weight: 500; }

/* Icon info + modal */
.qd-info-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--qd-grey); padding: 0; margin-left: 6px; vertical-align: middle; }
.qd-info-btn:hover { color: var(--qd-red); }
.qd-info-btn svg { display: block; width: 18px; height: 18px; }
.qd-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.qd-modal__box { background: #fff; border-radius: 12px; max-width: 480px; width: 100%; padding: 28px; position: relative; }
.qd-modal__box h3 { margin: 0 0 12px; font-size: 20px; }
.qd-modal__box p { margin: 0 0 12px; color: var(--qd-grey); font-size: 15px; line-height: 1.6; }
.qd-info-box { max-width: 640px; max-height: 88vh; overflow-y: auto; }
.qd-modal__box a, .qd-info-content a { color: var(--qd-red); text-decoration: underline; }
.qd-modal__box a:hover, .qd-info-content a:hover { color: var(--qd-ink); }
.qd-info-content { font-size: 15px; line-height: 1.6; color: var(--qd-ink); }
.qd-info-content::after { content: ""; display: table; clear: both; }
.qd-info-content img { max-width: 100%; height: auto; border-radius: 6px; }
.qd-info-content iframe { max-width: 100%; }
.qd-info-content h1, .qd-info-content h2, .qd-info-content h3 { font-size: 18px; margin: 0 0 10px; }
/* Alinierile din editor (nu vin din temă în afara .entry-content) */
.qd-info-content .alignleft { float: left; max-width: 45%; margin: 0 18px 10px 0; }
.qd-info-content .alignright { float: right; max-width: 45%; margin: 0 0 10px 18px; }
.qd-info-content .aligncenter { display: block; margin: 0 auto 12px; }
.qd-info-content .alignnone { max-width: 100%; }
@media (max-width: 520px) {
	.qd-info-content .alignleft, .qd-info-content .alignright { float: none; max-width: 100%; margin: 0 0 12px; }
}
.qd-modal__close { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 24px; cursor: pointer; color: var(--qd-grey); line-height: 1; }

/* Câmpuri (dimensiuni, contact) */
.qd-field { margin-bottom: 18px; }
.qd-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.qd-field input[type=number], .qd-field input[type=text], .qd-field input[type=tel], .qd-field input[type=email], .qd-field textarea {
	width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid var(--qd-line); border-radius: 8px;
	font: inherit; font-size: 15px; line-height: 1.4;
}
.qd-field .qd-range-hint { font-size: 12px; color: #9a9ba0; margin-top: 4px; }
.qd-err { color: var(--qd-red); font-size: 13px; margin: 4px 0 0; display: none; }
.qd-err.is-on { display: block; }

/* Bara fixă jos: rezumat preț + CTA */
.qd-bar { position: sticky; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--qd-line); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
.qd-bar__price b { font-size: 22px; }
.qd-bar__price span { font-size: 12px; color: var(--qd-grey); display: block; }
.qd-bar__actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 780px) {
	/* Full-bleed: anulează padding-ul lateral al containerului temei, indiferent
	   cât e — 50% - 50vw = exact distanța de la marginea barei la marginea ecranului.
	   Overflow-ul orizontal e deja tăiat pe body (overflow-x: clip, mai sus). */
	.qd-bar { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 16px; padding-right: 16px; }
	/* Pill-ul „Cookies" (qd-consent-mode-v2) se suprapune peste CTA-ul din bară.
	   Îl ascundem doar aici, pe mobil — bannerul de consimțământ inițial nu e afectat,
	   iar butonul rămâne pe restul paginilor. !important: JS-ul îl setează inline (display:flex). */
	#qd-cookie-settings-link { display: none !important; }
}
@media (max-width: 600px) {
	.qd-bar { padding: 10px 16px; gap: 12px; }
	.qd-bar__price b { font-size: 20px; }
	.qd-bar__price span { font-size: 11px; line-height: 1.35; }
	/* Disclaimer lung: ascuns în bara sticky ca să rămână compactă.
	   Rămâne vizibil pe desktop și în modalul „Vezi configurația" (pret_obs). */
	.qd-bar__price span i, .qd-bar__price span br { display: none; }
	.qd-bar__actions { flex-direction: column; gap: 6px; flex: 0 0 auto; }
	.qd-bar__actions .qd-btn { width: 100%; }
}

/* Modal rezumat configurație */
.qd-modal{ z-index:10020; }
.qd-modal--summary .qd-modal__box { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.qd-sum__list { margin: 0 0 20px; padding: 0; }
.qd-sum__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--qd-line); font-size: 14px; }
.qd-sum__row dt { color: var(--qd-grey); margin: 0; flex: 0 0 auto; }
.qd-sum__row dd { margin: 0; text-align: right; font-weight: 500; }
.qd-sum__price { background: var(--qd-bg); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
.qd-sum__pline { display: flex; justify-content: space-between; font-size: 13px; color: var(--qd-grey); padding: 3px 0; }
.qd-sum__ptotal { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--qd-line); }
.qd-sum__obs { font-size: 12px; color: var(--qd-grey); margin: 10px 0 0; }
.qd-sum__cta { text-align: center; }
.qd-sum__cta .qd-btn { width: 100%; }
.qd-btn { border: none; border-radius: 8px; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.qd-btn--red { background: var(--qd-red); color: #fff; }
.qd-btn--ghost { background: transparent; border: 1px solid var(--qd-line); }
.qd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Rezumat + succes */
.qd-summary-lines { font-size: 13px; color: var(--qd-grey); }
.qd-summary-lines div { display: flex; justify-content: space-between; padding: 3px 0; }
.qd-done { text-align: center; padding: 60px 20px; }
.qd-gdpr { font-size: 13px; color: var(--qd-grey); margin-top: 12px; }

/* ===== Configurator: rezervarea spațiului pentru imaginea de previzualizare =====
 *
 * PROBLEMA
 * render() reconstruiește tot DOM-ul la fiecare schimbare de opțiune
 * (root.innerHTML = ...). La schimbarea CULORII nu se vede nimic, pentru că
 * imaginile sunt aceleași fișiere, deja în cache. La schimbarea MODELULUI se
 * cer imagini noi, iar .qd-preview__imgwrap nu are nicio dimensiune rezervată:
 * rămâne cu înălțime 0 până sosește imaginea, apoi sare la loc.
 *
 * Măsurat pe mobil (375px): layout shift 0,1049 la fiecare schimbare de model,
 * identic indiferent de perechea de modele — deci nu ține de conținut, ci de
 * colapsul containerului.
 *
 * Cardurile de opțiuni (.qd-opt__img) NU produc shift, pentru că au
 * width="400" height="400" în markup. Aici aplicăm același principiu.
 *
 * UNDE
 * De preferat în configurator.css (plugin qd-configurator), lângă restul
 * stilurilor de preview. Dacă nu ai acces la el, merge și în qd-native.css —
 * se încarcă pe toate paginile, inclusiv pe configurator.
 */

.qd-preview__imgwrap{
	display:block;
	width:100%;
	aspect-ratio:1/1;      /* randările de model sunt pătrate (375x375, 400x400) */
	background:var(--qd-paper,#f6f6f5);
	border-radius:8px;
	overflow:hidden;
}

.qd-preview__imgwrap img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;    /* păstrează proporțiile dacă vreo randare nu e pătrată */
}

/* Tranziție scurtă la schimbarea imaginii: fără ea, înlocuirea e bruscă.
   Nu ascunde nimic — doar face schimbul mai puțin abrupt vizual. */
.qd-preview__imgwrap img{
	transition:opacity .18s ease;
}

/* ===== Configurator: bara sticky de jos pe mobil =====
 *
 * PROBLEMA (măsurat pe 375x812)
 * .qd-bar are flex-direction:row + flex-wrap:nowrap. Blocul de acțiuni ocupă
 * 299px din cei 343px de conținut, iar .qd-bar__price rămâne cu 50px lățime:
 * "2.610" și subtitlul se rup pe câte patru rânduri. În paralel
 * .qd-bar__actions trece pe column, deci butoanele se stivuiesc.
 * Rezultat: 147px, 18% din viewport. Cu .qd-steps (59px) = 206px cromă fixă.
 *
 * SOLUȚIA - două rânduri, ~92px (-37%):
 *   rând 1: prețul, pe toată lățimea, cu iconiță de info la dreapta
 *   rând 2: cele două butoane, egale
 *
 * Disclaimerul de măsurători/transport/montaj apare DOAR în această bară pe
 * toată pagina (verificat în DOM), deci nu poate fi ștears - e o mențiune de
 * transparență a prețului. Pe mobil îl mutăm în spatele iconiței de info.
 *
 * Desktopul rămâne complet neatins: totul e închis în @media (max-width:780px).
 * Pragul de 780px e același folosit de updateActiveStep() în configurator.js.
 *
 * UNDE: configurator.css (plugin qd-configurator).
 * Necesită și fragmentul JS din qd-bar-info.js.
 */

@media (max-width:780px){

	/* ===== 1. Structura barei ===== */

	.qd-bar{
		flex-wrap:wrap;
		align-items:center;
		gap:6px;
		/* safe-area: pe iPhone bara de gesturi ar acoperi altfel butoanele */
		padding:6px 14px calc(6px + env(safe-area-inset-bottom,0px));
	}


	/* ===== 2. Rândul cu prețul ===== */

	.qd-bar__price{
		flex:1 1 100%;
		min-width:0;          /* fără asta flex-item-ul refuză să se îngusteze */
		display:flex;
		align-items:baseline;
		gap:6px;
		line-height:1.1;
		position:relative;    /* ancoră pentru popover-ul de info */
		cursor:pointer;
		/* zona de atingere: tot rândul deschide informația, nu doar iconița */
		padding:4px 0;
		-webkit-tap-highlight-color:transparent;
	}

	.qd-bar__price b{
		font-size:1.25rem;
		line-height:1.1;
		white-space:nowrap;   /* "2.610" nu se mai rupe niciodată */
	}

	.qd-bar__price span{
		font-size:.6875rem;   /* 11px */
		line-height:1.2;
	}

	.qd-bar__price span br{display:none}


	/* ===== 3. Iconița de info =====
	 * Pseudo-element, ca să nu fie nevoie de modificări în markup-ul generat
	 * de render(). margin-left:auto o împinge la capătul din dreapta al rândului.
	 * align-self:center pentru că părintele aliniază pe baseline. */

	.qd-bar__price::after{
		content:"i";
		flex:0 0 auto;
		margin-left:auto;
		align-self:center;
		width:20px;
		height:20px;
		border:1px solid currentColor;
		border-radius:50%;
		font-family:var(--font-body,inherit);
		font-size:11px;
		font-weight:700;
		font-style:normal;
		line-height:18px;
		text-align:center;
		opacity:.5;
		transition:opacity .18s ease,background-color .18s ease,color .18s ease;
	}

	.qd-bar__price.is-open::after{
		opacity:1;
		background:var(--red,#d71920);
		border-color:var(--red,#d71920);
		color:#fff;
	}


	/* ===== 4. Disclaimerul, ca popover =====
	 * În starea închisă NU folosim display:none: textul ar dispărea din arborele
	 * de accesibilitate, iar el e singura mențiune despre costurile de montaj de
	 * pe pagină. Îl ascundem vizual, dar rămâne citibil de cititoarele de ecran. */

	/* ATENȚIE la display: configurator.css are deja, la @media (max-width:600px):
	 *   .qd-bar__price span i, .qd-bar__price span br { display:none }
	 * Acela e motivul pentru care informația se vede pe desktop, dar nu pe
	 * mobil. Fără un `display` explicit aici, regula veche câștigă și
	 * popover-ul rămâne invizibil, oricâte alte proprietăți i-am da.
	 *
	 * Prefixăm cu .qd-bar ca să creștem specificitatea (0,3,1 față de 0,2,1)
	 * în loc de !important: astfel regulile câștigă indiferent de ordinea în
	 * care ajung fișierele în pagină. */

	.qd-bar .qd-bar__price span i{
		display:block;
		position:absolute;
		width:1px;
		height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap;
	}

	.qd-bar .qd-bar__price.is-open span i{
		display:block;
		width:auto;
		height:auto;
		overflow:visible;
		clip-path:none;
		white-space:normal;
		left:0;
		right:0;
		bottom:calc(100% + 10px);
		background:var(--ink,#0b0b0c);
		color:#fff;
		font-style:normal;
		font-size:.75rem;
		line-height:1.45;
		padding:10px 12px;
		border-radius:8px;
		box-shadow:0 8px 24px rgba(0,0,0,.22);
		z-index:2;
	}

	/* Vârful săgeții, aliniat sub iconiță */
	.qd-bar .qd-bar__price.is-open span i::after{
		content:"";
		position:absolute;
		top:100%;
		right:8px;
		border:6px solid transparent;
		border-top-color:var(--ink,#0b0b0c);
	}


	/* ===== 5. Rândul cu butoanele ===== */

	.qd-bar__actions{
		flex:1 1 100%;
		flex-direction:row;
		gap:8px;
	}

	.qd-bar__actions .qd-btn{
		flex:1 1 0;
		min-width:0;
		min-height:44px;      /* pragul uzual pentru ținte de atingere */
		/* La 13px, "Trimite cererea de ofertă" cerea 174px într-un buton de
		   169px și se tăia. La 12px cu padding 6 intră exact. Măsurat. */
		font-size:.75rem!important;
		padding:11px 6px!important;
		width:auto!important;
		white-space:nowrap;
	}
}


/* Ecrane foarte înguste: etichetele butoanelor nu mai încap la 13px. */
@media (max-width:360px){
	.qd-bar__actions .qd-btn{
		font-size:.6875rem!important;
		padding:11px 4px!important;
	}
}