/* Coloreaza-ti fatada > Poza mea (include/v2/pagini/colorare-poza.php + js/colorare-editor.js), designul nou.
   Tab-urile, titlurile cu numar, .btn--mic, .colorare__ajutor / __inchide vin din css/v2/colorare.css.
   JS-ul editorului genereaza clase Bootstrap (btn-sm, btn-dark, btn-light border, btn-warning, form-control,
   custom-range, d-none) si iconite Font Awesome - sunt definite aici, doar in interiorul .cp-pagina. */

/* ---------- "Bootstrap" minim pentru markup-ul generat de JS ---------- */
.cp-pagina .d-none { display: none !important; }
.cp-pagina .btn.btn-sm { min-height: 36px; padding: 5px 12px; border: 1px solid var(--negru); background: var(--alb); color: var(--negru); font-size: 14px; font-weight: 700; white-space: nowrap; }
.cp-pagina .btn.btn-sm:hover { background: var(--gri-2); color: var(--negru); }
.cp-pagina .btn.btn-sm.btn-dark { background: var(--negru); border-color: var(--negru); color: var(--alb); }
.cp-pagina .btn.btn-sm.btn-dark:hover { background: var(--galben); border-color: var(--galben); color: var(--negru); }
.cp-pagina .btn.btn-sm.btn-light.border { border-color: var(--bordura); }
.cp-pagina .btn.btn-sm.btn-light.border:hover { border-color: var(--negru); }
.cp-pagina .btn.btn-sm.btn-warning { background: var(--galben); border-color: var(--galben); }
.cp-pagina .btn.btn-sm.btn-warning:hover { background: var(--negru); border-color: var(--negru); color: var(--galben); }
.cp-pagina .form-control { display: block; width: 100%; height: 40px; padding: 6px 12px; border: 1px solid var(--negru); border-radius: 0; background: var(--alb); font-family: var(--font-light); font-size: 15px; }
.cp-pagina .form-control:focus { outline: 2px solid var(--galben); outline-offset: 0; }
.cp-pagina .custom-range, .cp-pagina input[type=range] { width: 100%; accent-color: var(--negru); cursor: pointer; }
.cp-pagina .cp-gri { color: var(--text-2); }
/* iconitele Font Awesome folosite de editor (fara sa incarcam tot Font Awesome) */
.cp-pagina .fa { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--fa) center / contain no-repeat; mask: var(--fa) center / contain no-repeat; }
.cp-pagina .fa-rotate-left { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 4v6h6'/%3E%3Cpath d='M5 15a8 8 0 1 0 1.9-8.3L4 10'/%3E%3C/svg%3E"); }
.cp-pagina .fa-rotate-right { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M20 4v6h-6'/%3E%3Cpath d='M19 15a8 8 0 1 1-1.9-8.3L20 10'/%3E%3C/svg%3E"); }
.cp-pagina .fa-expand { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6'/%3E%3C/svg%3E"); }
.cp-pagina .fa-compress { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M9 3v6H3M15 3v6h6M9 21v-6H3M15 21v-6h6'/%3E%3C/svg%3E"); }

/* ---------- ecranul de start ---------- */
.cp-start { display: grid; gap: 32px; margin-bottom: var(--sp-sectiune); }
@media (min-width: 992px) { .cp-start { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; } }
.cp-zona-incarcare { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; padding: 28px; margin: 0; border: 2px dashed var(--text-3); background: var(--gri); text-align: center; font-size: 18px; cursor: pointer; transition: background var(--tranzitie), border-color var(--tranzitie); }
.cp-zona-incarcare small { display: block; margin-top: 6px; color: var(--text-2); font-size: 14px; }
.cp-zona-incarcare:hover, .cp-zona-incarcare.peste { border-color: var(--negru); background: #fff8cc; }
.cp-zona-incarcare.lucreaza { pointer-events: none; opacity: .75; border-style: solid; }
.cp-zona-incarcare__icon { width: 44px; height: 44px; background: var(--negru); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v5h16v-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v5h16v-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cp-acord { margin: 14px 0 16px; padding: 8px 12px; border-left: 4px solid transparent; color: var(--text-2); font-size: 15px; }
.cp-acord label { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; }
.cp-acord input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--negru); }
.cp-acord a { color: inherit; }
.cp-acord.cp-atentie { border-left-color: #c0392b; background: #fff0f0; }
.cp-start__pasi { padding: 24px; background: var(--gri); }
.cp-pasi { margin: 0; padding: 0; list-style: none; }
.cp-pasi li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 16px; }
.cp-pasi li + li { border-top: 1px solid var(--bordura); }
.cp-pozele-mele-bloc { margin-top: 32px; }
.cp-pozele-mele { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cp-poza-mea { border: 1px solid var(--bordura); background: var(--alb); }
.cp-poza-mea img { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--gri); cursor: pointer; }
.cp-poza-mea-info { padding: 6px 8px 0; color: var(--text-2); font-size: 13px; }
.cp-poza-mea-btn { display: flex; gap: 6px; padding: 6px 8px 8px; }
.cp-poza-mea-btn .btn { flex: 1; }

/* ---------- editorul ---------- */
.cp-editor { position: relative; display: flex; flex-direction: column; margin-bottom: 24px; border: 1px solid var(--bordura); background: var(--alb); scroll-margin-top: calc(var(--antet-h) + 8px); }
.cp-editor.d-none { display: none !important; }
.cp-cap { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--gri); border-bottom: 1px solid var(--bordura); }
.cp-cap-t { margin-right: auto; font-family: var(--font); font-weight: 700; font-size: 19px; }
.cp-btn-instr { margin-left: 0; }
.cp-btn-instr.on { text-decoration: none; }
.cp-bara { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--bordura); }
.cp-grup { display: flex; align-items: center; gap: 4px; }
.cp-grup.cp-dreapta { margin-left: auto; }
.cp-bara .cp-patrat { min-width: 36px; padding-left: 8px; padding-right: 8px; }
.cp-zoom { min-width: 48px; text-align: center; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-bag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 14px; background: #fff8cc; border-bottom: 1px solid #f0e4a0; font-size: 14px; }
.cp-bag.d-none { display: none !important; }
.cp-bag input[type=range] { width: 120px; vertical-align: middle; }
.cp-bag label { margin: 0; cursor: pointer; }
.cp-bag label input { margin-right: 4px; vertical-align: -1px; accent-color: var(--negru); }
.cp-bag small { min-width: 90px; color: var(--text-2); }
.cp-bag-btn { display: flex; gap: 4px; margin-left: auto; }
.cp-corp { display: flex; min-height: 0; }
.cp-stanga { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; background: var(--gri); }
.cp-scena { position: relative; overflow: hidden; height: calc(100vh - 330px); min-height: 440px; max-height: 820px; background: var(--gri); }
.cp-scena canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.cp-btn-mare { position: absolute; top: 10px; right: 10px; z-index: 5; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.cp-btn-mare .fa { margin-right: 4px; }
.cp-incarcare { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--gri); color: var(--text-2); font-size: 16px; }
.cp-incarcare.d-none { display: none !important; }
.cp-indiciu { min-height: 38px; padding: 8px 14px; border-top: 1px solid var(--bordura); background: var(--gri); font-size: 14px; line-height: 1.45; }

/* panoul din dreapta (zone, culori) */
.cp-panou { flex-shrink: 0; width: clamp(380px, 30vw, 460px); min-height: 476px; max-height: calc(100vh - 280px); overflow: auto; border-left: 1px solid var(--bordura); background: var(--gri); }
.cp-sectiune { padding: 16px 18px; }
.cp-sectiune + .cp-sectiune { border-top: 1px solid var(--bordura); }
.cp-titlu { margin-bottom: 10px; overflow: hidden; font-family: var(--font); font-weight: 700; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.cp-zona { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 6px 8px; border: 1px solid var(--bordura); background: var(--alb); cursor: pointer; }
.cp-zona:hover { border-color: var(--negru); }
.cp-zona.on { border-color: var(--negru); box-shadow: inset 5px 0 0 var(--galben); }
.cp-mostra { display: inline-block; flex-shrink: 0; width: 32px; height: 24px; border: 1px solid var(--bordura); }
.cp-mostra.mare { width: 56px; height: 40px; }
.cp-zona-t { min-width: 0; }
.cp-zona-t b { display: block; font-family: var(--font); font-size: 14px; }
.cp-zona-t small { color: var(--text-2); font-size: 12px; }
.cp-adauga { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; }
.cp-adauga span { margin-right: 2px; color: var(--text-2); }
.cp-adauga button, .cp-butoane-mici button { padding: 4px 10px; border: 1px solid var(--bordura); border-radius: 0; background: var(--alb); color: var(--negru); font-family: var(--font-light); font-size: 13px; cursor: pointer; }
.cp-adauga button:hover, .cp-butoane-mici button:hover { border-color: var(--negru); background: #fff8cc; }
.cp-culoare-aleasa { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-culoare-aleasa b { display: block; font-family: var(--font); font-size: 16px; }
.cp-culoare-aleasa small { color: var(--text-2); font-size: 12px; }
.cp-nota { margin-bottom: 10px; padding: 8px 12px; border-left: 4px solid var(--galben); background: var(--alb); font-size: 13px; }
.cp-paletare { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-paletare button { padding: 6px 10px; border: 1px solid var(--bordura); border-radius: 0; background: var(--alb); color: var(--negru); font-family: var(--font-light); font-size: 13px; cursor: pointer; }
.cp-paletare button:hover { border-color: var(--negru); }
.cp-paletare button.on { border-color: var(--negru); background: var(--negru); color: var(--alb); }
.cp-nuante { max-height: 260px; margin-top: 8px; padding: 4px 6px; overflow: auto; border: 1px solid var(--bordura); background: var(--alb); }
.cp-familie { margin: 8px 0 3px; color: var(--text-2); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.cp-grila { display: flex; flex-wrap: wrap; gap: 2px; }
.cp-grila button { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 0; cursor: pointer; }
.cp-grila button:hover { position: relative; z-index: 1; outline: 2px solid var(--negru); }
.cp-grila button.on { position: relative; z-index: 2; outline: 3px solid var(--galben); box-shadow: 0 0 0 5px var(--negru); }
.cp-cod-hover { min-height: 20px; margin: 4px 0 6px; color: var(--text-2); font-size: 13px; }
.cp-eticheta { display: block; margin: 8px 0 3px; color: var(--text-2); font-size: 13px; }
.cp-butoane-mici { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cp-butoane-mici button.rosu { border-color: #e6b0aa; color: #c0392b; }

.cp-jos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--bordura); background: var(--gri); }
.cp-stare { margin-right: auto; color: var(--text-2); font-size: 13px; }
.cp-actiuni { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-pagina .btn.cp-rosu { border-color: #c0392b; color: #c0392b; }
.cp-pagina .btn.cp-rosu:hover { background: #c0392b; color: var(--alb); }
.cp-nota-jos { margin: 0 0 var(--sp-sectiune); font-size: 14px; }

/* instructiunile: panou care intra din dreapta, peste editor */
.cp-instr { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; width: min(580px, 100%); background: var(--alb); box-shadow: -10px 0 30px rgba(0, 0, 0, .25); transform: translateX(105%); transition: transform .22s ease; visibility: hidden; }
.cp-instr.on { transform: none; visibility: visible; }
.cp-instr-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 4px solid var(--galben); }
.cp-instr-cap h2 { margin: 0; }
.cp-instr-corp { padding: 4px 24px 28px; overflow: auto; font-size: 16px; line-height: 1.55; }
.cp-instr-corp h3 { margin: 20px 0 6px; font-family: var(--font); font-weight: 700; font-size: 17px; }
.cp-instr-corp p { margin: 0; }
.cp-instr-corp ul { margin: 0; padding-left: 20px; }
.cp-instr-corp li { margin-bottom: 4px; }
.cp-taste { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-taste td { padding: 5px 8px; border-bottom: 1px solid var(--gri-2); vertical-align: top; }
.cp-taste td:first-child { width: 1%; font-family: var(--font); font-weight: 700; white-space: nowrap; }

/* MARIT: editorul pe tot ecranul */
.cp-editor.cp-mare { position: fixed; inset: 0; z-index: 2000; margin: 0; border: 0; }
.cp-editor.cp-mare .cp-corp { flex-grow: 1; }
.cp-editor.cp-mare .cp-scena { flex-grow: 1; height: auto; min-height: 0; max-height: none; }
.cp-editor.cp-mare .cp-panou { max-height: none; }
body.cp-fara-scroll { overflow: hidden; }

/* mesajele scurte */
.cp-mesaj { position: fixed; left: 50%; bottom: 24px; z-index: 2100; max-width: min(620px, 92vw); padding: 12px 20px; background: var(--negru); color: var(--alb); font-size: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; }
.cp-mesaj.on { opacity: 1; transform: translate(-50%, 0); }
.cp-mesaj.rau { background: #c0392b; }

/* telefon / tableta: panoul sub poza */
@media (max-width: 991.98px) {
    .cp-corp { flex-direction: column; }
    .cp-panou { width: auto; min-height: 0; max-height: none; border-left: 0; border-top: 1px solid var(--bordura); }
    .cp-scena { height: 62vh; min-height: 320px; }
    .cp-grup.cp-dreapta { margin-left: 0; }
    .cp-editor.cp-mare .cp-corp { overflow: auto; }
    .cp-editor.cp-mare .cp-scena { flex: 0 0 auto; height: 62vh; }
}
@media (max-width: 575.98px) {
    .cp-bara { gap: 6px; padding: 8px; }
    .cp-pagina .btn.btn-sm { padding: 4px 8px; font-size: 13px; }
    .cp-bag-btn { margin-left: 0; }
    .cp-start__pasi { padding: 16px; }
}