/* Constructor de module: meniu + structura + previzualizare live */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #232323;
  line-height: 1.55;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 750px at 88% -12%, rgba(46, 125, 50, 0.16), transparent 60%),
    radial-gradient(950px 680px at -12% 108%, rgba(23, 107, 135, 0.13), transparent 55%),
    linear-gradient(175deg, #F7F9F7 0%, #ECF1ED 55%, #E7EEE9 100%);
  background-attachment: fixed;
}

/* antet */
.constructor-antet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #dde5dd;
  position: sticky;
  top: 0;
  z-index: 30;
}
.constructor-antet__eticheta {
  margin: 0; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #6b7f71;
}
.constructor-antet__titlu {
  border: 0; background: transparent; font: 600 20px/1.3 'Open Sans', sans-serif;
  color: #1e2b22; padding: 2px 0; min-width: 280px; width: 100%;
}
.constructor-antet__titlu:focus-visible { outline: 2px solid #4d8a5c; outline-offset: 3px; border-radius: 4px; }
.constructor-antet__actiuni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.constructor-buton {
  display: inline-block; border: 0; border-radius: 999px;
  padding: 9px 16px; min-height: 38px;
  font: 600 13px/1.4 'Open Sans', sans-serif; cursor: pointer;
  background: #2e5b40; color: #fff; text-decoration: none;
}
.constructor-buton--contur { background: transparent; border: 1.5px solid #b9c9bc; color: #2e5b40; }
.constructor-buton:active { transform: scale(0.98); }
.constructor-buton:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; }

.constructor-device {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: #e5ece6;
}
.constructor-device button {
  border: 0; border-radius: 999px; padding: 7px 12px; min-height: 32px;
  font: 600 12px/1 'Open Sans', sans-serif; cursor: pointer;
  background: transparent; color: #4a5c50;
}
.constructor-device button.este-activ { background: #fff; color: #1e2b22; box-shadow: 0 1px 4px rgba(20, 40, 28, 0.15); }

/* layout principal */
.constructor {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  padding: 20px;
  max-width: 1500px;
  margin: 0 auto;
}
.constructor-panou {
  background: #fff;
  border: 1px solid #dde5dd;
  border-radius: 14px;
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 82px;
  max-height: calc(100dvh - 102px);
  overflow-y: auto;
}
.constructor-sectiune + .constructor-sectiune { margin-top: 20px; border-top: 1px solid #ecf1ec; padding-top: 16px; }
.constructor-sectiune h2 { margin: 0 0 10px; font-size: 13px; color: #2e5b40; }
.constructor-sectiune h3 { margin: 12px 0 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7b8b7f; }

.constructor-meniu__grup { display: flex; flex-wrap: wrap; gap: 6px; }
.constructor-meniu__element {
  border: 1.5px solid #d7e1d8; border-radius: 999px;
  background: #fbfdfb; padding: 7px 12px; min-height: 34px;
  font: 500 12.5px/1.3 'Open Sans', sans-serif; color: #2c3a30; cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.constructor-meniu__element:hover { border-color: #4d8a5c; background: #f2f8f2; }
.constructor-meniu__element:active { transform: scale(0.98); }
.constructor-meniu__element:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; }

/* structura */
.constructor-structura { list-style: none; margin: 0; padding: 0; }
.constructor-structura__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #e3eae3; border-radius: 10px;
  padding: 8px 10px; margin-bottom: 6px; background: #fbfdfb;
}
.constructor-structura__nume { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.constructor-structura__actiuni { display: flex; gap: 3px; flex: 0 0 auto; }
.constructor-structura__actiuni button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d7e1d8;
  background: #fff; cursor: pointer; font-size: 13px; color: #2c3a30;
}
.constructor-structura__actiuni button:hover { border-color: #4d8a5c; }
.constructor-structura__actiuni button:active { transform: scale(0.95); }
.constructor-gol { font-size: 12.5px; color: #7b8b7f; }

/* scena de previzualizare */
.constructor-scena { min-width: 0; }
.constructor-panza-invelis { margin: 0 auto; transition: max-width 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.constructor-panza-invelis[data-device="desktop"] { max-width: 960px; }
.constructor-panza-invelis[data-device="tableta"] { max-width: 760px; }
.constructor-panza-invelis[data-device="mobil"] { max-width: 390px; }
.constructor-panza {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 80px -32px rgba(23, 52, 38, 0.25), 0 2px 8px rgba(23, 52, 38, 0.05);
  min-height: 400px;
}
.constructor-panza-goala {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 350px; color: #8a998e; font-size: 14px; line-height: 1.7;
}

/* formularul de configurare (panou lateral) */
.constructor-formular {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 24, 18, 0.45);
  display: flex; justify-content: flex-end;
}
.constructor-formular[hidden] { display: none; }
.constructor-formular__panou {
  width: min(440px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: 20px;
  box-shadow: -18px 0 50px rgba(10, 20, 14, 0.25);
}
.constructor-formular__panou h3 { margin: 0 0 14px; font-size: 15px; color: #1e2b22; }
.constructor-formular__actiuni {
  display: flex; gap: 8px; margin-top: 16px;
  position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px;
}

/* formularul generic al elementelor, in contextul constructorului */
.constructor-formular .cog-editor fieldset { border: 1px solid #ddd; border-radius: 8px; margin: 0 0 14px; padding: 10px 12px; }
.constructor-formular .cog-editor legend { font-size: 12px; font-weight: 600; color: #2e5b40; padding: 0 6px; }
.constructor-formular .cog-editor__camp { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.constructor-formular .cog-editor__camp label { flex: 0 0 140px; color: #555; }
.constructor-formular .cog-editor__camp input,
.constructor-formular .cog-editor__camp select,
.constructor-formular .cog-editor__camp textarea {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px;
}
.constructor-formular .cog-editor__camp input[type="color"] { padding: 0; height: 32px; }
.constructor-formular .cog-editor__cauta { width: 100%; margin-bottom: 8px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; }
.constructor-formular .cog-editor__grila { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; }
.constructor-formular .cog-editor__simbol { width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #666; }
.constructor-formular .cog-editor__simbol svg { width: 18px; height: 18px; stroke: #444; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.constructor-formular .cog-editor__simbol.este-activ { border-color: #4d8a5c; box-shadow: 0 0 0 2px rgba(77, 138, 92, 0.35); }
.constructor-formular .cog-editor__nota { font-size: 12px; color: #777; }

/* responsive */
@media (max-width: 980px) {
  .constructor { grid-template-columns: 1fr; }
  .constructor-panou { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .constructor-panza-invelis { transition: none; }
  .constructor-buton:active, .constructor-meniu__element:active,
  .constructor-structura__actiuni button:active { transform: none; }
}
/* machetele de asezare */
.constructor-machete { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.constructor-macheta {
  border: 1.5px solid #d7e1d8; border-radius: 10px; background: #fbfdfb;
  padding: 8px; cursor: pointer; text-align: center;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.constructor-macheta:hover { border-color: #4d8a5c; background: #f2f8f2; }
.constructor-macheta:active { transform: scale(0.98); }
.constructor-macheta:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; }
.constructor-macheta__schita {
  display: flex; gap: 3px; height: 26px; margin-bottom: 6px;
}
.constructor-macheta__schita span {
  background: #cfe0d2; border-radius: 4px; min-width: 0;
}
.constructor-macheta__nume {
  display: block; font: 500 11.5px/1.3 'Open Sans', sans-serif; color: #2c3a30;
}
/* combinatia personalizata */
.constructor-combinatie { margin-top: 12px; }
.constructor-combinatie__titlu { margin: 0 0 8px; font-size: 12px; color: #4a5c50; font-weight: 600; }
.constructor-combinatie__rand { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.constructor-combinatie__rand span { color: #7b8b7f; font-size: 12px; }
.constructor-combinatie select {
  flex: 1 1 0; min-width: 0; min-height: 36px; font: 500 12.5px/1.3 'Open Sans', sans-serif;
  padding: 6px 8px; border: 1.5px solid #d7e1d8; border-radius: 8px; background: #fbfdfb; color: #2c3a30;
}
.constructor-combinatie .constructor-buton { flex: 0 0 auto; }
/* glisoarele de proportii */
.constructor-combinatie__glisor { margin-bottom: 10px; }
.constructor-combinatie__glisor label {
  display: block; font-size: 12px; color: #4a5c50; margin-bottom: 4px;
}
.constructor-combinatie__glisor output { font-weight: 700; color: #2e5b40; font-variant-numeric: tabular-nums; }
.constructor-combinatie__glisor input[type="range"] {
  width: 100%; accent-color: #4d8a5c; height: 28px; cursor: pointer;
}
.constructor-buton:disabled { opacity: 0.45; cursor: default; }
.constructor-buton:disabled:active { transform: none; }
/* click direct pe o piesa din previzualizare */
.constructor-panza [data-builder-index] {
  cursor: pointer; border-radius: 6px;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color 0.15s ease-out;
}
.constructor-panza [data-builder-index]:hover {
  outline-color: #4d8a5c;
}
.constructor-scena__ajutor {
  text-align: center; font-size: 12px; color: #5a6f60; margin: 0 0 10px;
}
@media (prefers-reduced-motion: reduce) {
  .constructor-panza [data-builder-index] { transition: none; }
}
/* blocuri reordonabile prin drag */
.constructor-bloc { position: relative; padding-left: 34px; }
.constructor-bloc__maner {
  position: absolute; top: 8px; left: 0; z-index: 6;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid #d7e1d8; background: #fff; color: #7b8b7f;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: grab;
  opacity: 0; transition: opacity 0.15s ease-out, border-color 0.15s ease-out;
  box-shadow: 0 2px 6px rgba(20, 40, 28, 0.12);
}
.constructor-bloc:hover .constructor-bloc__maner,
.constructor-bloc:focus-within .constructor-bloc__maner { opacity: 1; }
.constructor-bloc__maner:hover { border-color: #4d8a5c; color: #2e5b40; }
.constructor-bloc__maner:active { cursor: grabbing; }
.constructor-bloc__maner:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; opacity: 1; }
.constructor-bloc.se-trage { opacity: 0.45; }
.constructor-bloc.drop-inainte::before,
.constructor-bloc.drop-dupa::after {
  content: ''; position: absolute; left: 34px; right: 0; height: 3px;
  background: #4d8a5c; border-radius: 3px; box-shadow: 0 0 0 3px rgba(77, 138, 92, 0.18);
}
.constructor-bloc.drop-inainte::before { top: -7px; }
.constructor-bloc.drop-dupa::after { bottom: -7px; }
@media (prefers-reduced-motion: reduce) {
  .constructor-bloc__maner { transition: none; }
}
/* bara de unelte a fiecarui bloc */
.constructor-bloc__bara {
  position: absolute; top: 6px; right: 6px; z-index: 7;
  display: flex; gap: 3px; padding: 3px;
  background: rgba(255, 255, 255, 0.94); border-radius: 9px;
  box-shadow: 0 2px 10px rgba(20, 40, 28, 0.16);
  opacity: 0; transition: opacity 0.15s ease-out;
}
.constructor-bloc:hover .constructor-bloc__bara,
.constructor-bloc:focus-within .constructor-bloc__bara { opacity: 1; }
.constructor-bloc__unealta {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid #e0e7e0; background: #fff; color: #3a4a40;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.constructor-bloc__unealta:hover { border-color: #4d8a5c; background: #f2f8f2; }
.constructor-bloc__unealta:active { transform: scale(0.94); }
.constructor-bloc__unealta:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; }
.constructor-bloc__unealta--sterge:hover { border-color: #c0392b; color: #c0392b; background: #fdf5f4; }
@media (prefers-reduced-motion: reduce) {
  .constructor-bloc__bara { transition: none; }
  .constructor-bloc__unealta:active { transform: none; }
}
/* editor inline pe panza (text bogat + redimensionare) */
.cog-inline {
  position: fixed; z-index: 200;
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  max-width: 94vw; padding: 6px;
  background: #fff; border: 1px solid #d7e1d8; border-radius: 10px;
  box-shadow: 0 10px 34px rgba(20, 40, 28, 0.24);
}
.cog-inline button {
  min-width: 30px; height: 30px; padding: 0 7px;
  border: 1px solid #e0e7e0; border-radius: 6px; background: #fff;
  cursor: pointer; color: #2c3a30; font: 600 13px/1 'Open Sans', sans-serif;
}
.cog-inline button:hover { border-color: #4d8a5c; background: #f2f8f2; }
.cog-inline button:active { transform: scale(0.95); }
.cog-inline__gata { background: #2e5b40 !important; color: #fff !important; border-color: #2e5b40 !important; }
.cog-inline select {
  height: 30px; border: 1px solid #e0e7e0; border-radius: 6px; padding: 0 6px;
  background: #fff; font: 500 12px/1 'Open Sans', sans-serif; color: #2c3a30; max-width: 110px;
}
.cog-inline input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid #e0e7e0; border-radius: 6px; cursor: pointer; }
.cog-inline label { display: flex; align-items: center; gap: 6px; font: 500 12px/1 'Open Sans', sans-serif; color: #4a5c50; }
.cog-inline label output { font-weight: 700; color: #2e5b40; min-width: 40px; font-variant-numeric: tabular-nums; }
.cog-inline input[type="range"] { accent-color: #4d8a5c; width: 120px; height: 24px; cursor: pointer; }
.cog-inline__nota { font: 500 12px/1.3 'Open Sans', sans-serif; color: #667; padding: 0 4px; }
.constructor-panza [contenteditable="true"] {
  outline: 2px solid #4d8a5c; outline-offset: 3px; border-radius: 4px;
  background: rgba(77, 138, 92, 0.05); cursor: text; min-height: 1.4em;
}
.constructor-panza .cog-selectat { outline: 2px solid #4d8a5c; outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cog-inline button:active { transform: none; } }
/* campuri structurate in formular: liste de randuri, tabel, iconita */
.cog-editor__camp--bloc { display: block; }
.cog-editor__camp--bloc > label { display: block; margin-bottom: 6px; flex: none; }
.cog-rep__rand {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px; padding: 8px; border: 1px solid #eef1ee; border-radius: 8px; background: #fbfdfb;
}
.cog-rep__rand > input, .cog-rep__rand > textarea, .cog-rep__rand > select {
  flex: 1 1 130px; min-width: 110px; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px;
}
.cog-rep__rand > .cog-icon-btn { flex: 0 0 auto; }
.cog-rep__rand > textarea { min-height: 34px; }
.cog-rep__sterge {
  flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid #e0d5d5; border-radius: 6px;
  background: #fff; color: #c0392b; cursor: pointer; font-size: 12px;
}
.cog-rep__sterge:hover { background: #fdf3f2; border-color: #c0392b; }
.cog-rep__adauga, .cog-grid__actiuni button {
  border: 1.5px dashed #b9c9bc; border-radius: 8px; background: #fbfdfb; color: #2e5b40;
  padding: 7px 12px; cursor: pointer; font: 600 12.5px/1 'Open Sans', sans-serif; margin-top: 4px;
}
.cog-rep__adauga:hover, .cog-grid__actiuni button:hover { border-color: #4d8a5c; background: #f2f8f2; }
.cog-icon-btn {
  flex: 0 0 auto; width: 40px; height: 34px; border: 1px solid #ccc; border-radius: 6px;
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #667;
}
.cog-icon-btn:hover { border-color: #4d8a5c; }
.cog-icon-btn svg { width: 18px; height: 18px; stroke: #2e5b40; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cog-grid__rand { display: flex; gap: 6px; margin-bottom: 6px; }
.cog-grid__rand input { flex: 1 1 0; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; }
.cog-grid__actiuni { display: flex; gap: 6px; }
/* selector de iconite (popover) */
.cog-icon-pop {
  position: fixed; z-index: 300; display: none; width: 260px; padding: 8px;
  background: #fff; border: 1px solid #d7e1d8; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20,40,28,.24);
}
.cog-icon-pop__cauta { width: 100%; margin-bottom: 8px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; }
.cog-icon-pop__grila { display: flex; flex-wrap: wrap; gap: 5px; max-height: 200px; overflow-y: auto; }
.cog-icon-pop__grila button, .cog-icon-pop__fara {
  width: 36px; height: 36px; border: 1px solid #e0e7e0; border-radius: 7px; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cog-icon-pop__grila button:hover { border-color: #4d8a5c; background: #f2f8f2; }
.cog-icon-pop__grila button svg { width: 20px; height: 20px; stroke: #2c3a30; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cog-icon-pop__fara { width: 100%; height: auto; margin-top: 8px; padding: 7px; font: 600 12px/1 'Open Sans', sans-serif; color: #667; }
/* completeaza spatiul: chips */
.cog-goluri { display: flex; flex-wrap: wrap; gap: 5px; }
.cog-gol { border: 1px solid #d7e1d8; border-radius: 6px; background: #fff; padding: 5px 9px; cursor: pointer; font: 500 13px/1 'Open Sans', sans-serif; color: #2c3a30; }
.cog-gol:hover { border-color: #4d8a5c; }
.cog-gol.este-gol { background: var(--cog-accent, #2e5b40); border-color: #2e5b40; color: #fff; text-decoration: underline; }
/* upload + fade in panoul inline de imagine */
.cog-inline__incarca {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: #2e5b40; color: #fff; border-radius: 7px; padding: 0 12px; height: 30px;
  font: 600 12px/1 'Open Sans', sans-serif;
}
.cog-inline__incarca:hover { background: #26492f; }
.cog-inline__fade { font: 600 12px/1 'Open Sans', sans-serif; color: #4a5c50; margin-left: 4px; }
.cog-inline [data-fade].este-activ { background: #2e5b40; color: #fff; border-color: #2e5b40; }
/* paleta de culori a temei */
.cog-paleta { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.cog-paleta__pastila {
  width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--pastila); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(20, 40, 28, 0.18), 0 1px 3px rgba(20, 40, 28, 0.16);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.cog-paleta__pastila:hover { transform: scale(1.12); }
.cog-paleta__pastila:focus-visible { outline: 3px solid #4d8a5c; outline-offset: 2px; }
.cog-paleta__pastila.este-activ { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pastila); }
.cog-paleta__pastila.este-activ::after {
  content: "✓"; color: #fff; font: 700 15px/1 'Open Sans', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.cog-paleta__liber {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 12px/1 'Open Sans', sans-serif; color: #6b7f71;
}
.cog-paleta__liber input[type="color"] {
  width: 34px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid #cdd9ce; border-radius: 7px; background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .cog-paleta__pastila { transition: none; }
  .cog-paleta__pastila:hover { transform: none; }
}