/* Coloreaza-ti fatada (include/v2/pagini/colorare.php) - editorul vechi in designul nou, fara Bootstrap.
   Clasele colouring_* si btn-warning / btn-secondary sunt cele folosite de js/my.colouring.js. */

/* ---------- tab-uri: Modele predefinite / Poza mea ---------- */
.colorare-taburi { display: flex; gap: 8px; margin: 0 0 24px; border-bottom: 1px solid var(--bordura); overflow-x: auto; }
.colorare-taburi a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 4px; margin-right: 24px; border-bottom: 4px solid transparent; color: var(--text-2); font-family: var(--font); font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.colorare-taburi a:hover { color: var(--negru); }
.colorare-taburi a[aria-current] { color: var(--negru); border-bottom-color: var(--galben); }
.colorare-taburi .insigna { margin: 0; }

/* ---------- asezare: scena (poza) + panoul cu pasii ---------- */
.colorare { display: grid; gap: 24px; margin-bottom: var(--sp-sectiune); }
@media (min-width: 1025px) {
    .colorare { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
    .colorare__scena { position: sticky; top: calc(var(--antet-h) + 16px); }
}

.colorare__poza { position: relative; display: flex; justify-content: center; background: var(--gri); }
.colorare__stage { position: relative; display: block; }
.colorare__stage > img { display: block; width: 100%; height: 100%; margin: 0; }
.colouring_strat_frame { position: absolute; inset: 0; background: transparent; z-index: 1; }
.colouring_loading_image { display: none; position: absolute; left: 50%; top: 45%; width: 50px; height: 50px; margin: -25px 0 0 -25px; z-index: 10; }
.colouring_punct_start_coordonate, .colouring_punct_coordonate { position: absolute; z-index: 100; }
.colouring_punct_start_coordonate { width: 10px; height: 10px; border: 1px solid #000; background: red; }
.colouring_punct_coordonate { width: 6px; height: 6px; border: 1px solid red; border-radius: 3px; background: yellow; }

.colorare__actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.btn--mic { min-height: 40px; padding: 6px 16px; font-size: 15px; }
.colorare__ajutor { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 0; border: 0; background: none; font-family: var(--font); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.colorare__ajutor:hover { text-decoration: none; }
.colorare__ajutor .icon { width: 20px; height: 20px; }
.colorare__nota { margin: 16px 0 0; font-size: 14px; }

/* ---------- panoul cu pasi ---------- */
.colorare__panou { background: var(--gri); padding: 8px 24px; }
.colorare__pas { padding: 20px 0; }
.colorare__pas + .colorare__pas { border-top: 1px solid var(--bordura); }
.colorare__titlu { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font); font-weight: 700; font-size: 19px; line-height: 1.3; }
.colorare__titlu label { cursor: default; }
.colorare__nr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--galben); font-size: 15px; }

/* 1. modele */
.colorare__modele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.colorare__modele a { display: block; aspect-ratio: 142 / 90; border: 3px solid transparent; background: var(--alb); }
.colorare__modele a:hover { border-color: var(--negru); }
.colorare__modele a[aria-current] { border-color: var(--galben); }
.colorare__modele img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 2. straturi (clasele btn-warning / btn-secondary le schimba my.colouring.js) */
.colorare__straturi { display: flex; flex-wrap: wrap; gap: 8px; }
.colorare__strat { min-height: 40px; padding: 6px 14px; border: 2px solid var(--negru); border-radius: 0; background: var(--alb); color: var(--negru); font-family: var(--font); font-weight: 700; font-size: 15px; cursor: pointer; transition: background var(--tranzitie), border-color var(--tranzitie); }
.colorare__strat:hover { background: var(--gri-2); }
.colorare__strat.btn-warning { background: var(--galben); border-color: var(--galben); }

/* 3. culori - JS-ul vechi pune pe paletare stiluri inline (bordura stanga, culoare): le neutralizam */
.colorare__paletare { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.colorare__paletar { padding: 7px 12px; border: 1px solid var(--bordura) !important; border-radius: 0; background: var(--alb); color: var(--text) !important; text-indent: 0 !important; font-family: var(--font-light); font-size: 15px; line-height: 1.25; text-align: left; cursor: pointer; }
.colorare__paletar:hover { border-color: var(--negru) !important; }
.colorare__paletar.is-activ { background: var(--negru); border-color: var(--negru) !important; color: var(--alb) !important; }

.colorare__selectata { display: flex; align-items: stretch; margin-bottom: 10px; background: var(--alb); border: 1px solid var(--bordura); }
.colorare__mostra { flex: 0 0 88px; min-height: 56px; background: var(--alb); }
#colouring_culoare_selectata { width: 100%; height: 100%; }
.colorare__cod { display: flex; align-items: center; padding: 8px 14px; font-family: var(--font); font-weight: 700; font-size: 16px; }

.colorare__nuante { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 2px; max-height: 268px; overflow-y: auto; padding: 2px; }
.colouring_cadru_culoare { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; }
.colouring_cadru_culoare:hover, .colouring_cadru_culoare:focus-visible { outline: 2px solid var(--negru); outline-offset: 1px; position: relative; z-index: 1; }

/* 4. transparenta */
.colorare__slider { width: 100%; accent-color: var(--negru); cursor: pointer; }
.colorare__slider-etichete { display: flex; justify-content: space-between; color: var(--text-2); font-size: 14px; }

/* ---------- panoul "Cum functioneaza" (JS-ul il afiseaza cu display:block) ---------- */
.colorare__info { position: fixed; inset: 0; z-index: 1000; padding: 24px var(--gutter); overflow-y: auto; background: rgba(0, 0, 0, .55); }
.colorare__info-cutie { max-width: 720px; margin: 4vh auto; padding: 28px 32px 32px; background: var(--alb); }
.colorare__info-antet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.colorare__info-antet h2 { margin: 0; }
.colorare__inchide { display: inline-flex; padding: 4px; border: 0; background: none; cursor: pointer; }
.colorare__info-pasi { margin: 0 0 20px; padding-left: 1.4em; }
.colorare__info-pasi li { margin-bottom: 10px; }
.colorare__info-butoane { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 16px 20px; background: var(--gri); font-size: 16px; }
.colorare__info-butoane dt { font-family: var(--font); font-weight: 700; }
.colorare__info-butoane dd { margin: 0; }

/* ---------- ecran complet (doar editorul) ---------- */
#cuprins:fullscreen { padding: 24px; overflow-y: auto; background: var(--alb); }
#cuprins:fullscreen .colorare__scena { position: static; }

/* mobil/tableta: poza ramane vizibila sus cat timp alegi culorile din panou */
@media (max-width: 1024px) {
    .colorare__scena { display: contents; }
    .colorare__poza { position: sticky; top: var(--antet-h); z-index: 5; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .35); }
    .colorare__actiuni { margin-top: 0; }
    .colorare__nota { margin: 0; }
}
@media (max-width: 575.98px) { .colorare-taburi__lung { display: none; } .colorare-taburi a { margin-right: 12px; } }