/* Coloreaza-ti casa > Poza mea (2026-09-30) - pagina colouring-poza.php + editorul js/colorare-editor.js.
   Stilul site-ului: fundal alb / gri deschis, butoane Bootstrap drepte (rounded-0), accent galben STO #FFD700. */
.cp-pagina{font-family:FrutigerLight,Arial,sans-serif;color:#1d1f22}
.cp-pagina b,.cp-pagina h2,.cp-pagina h3,.cp-pagina h4{font-family:FrutigerBold,FrutigerLight,Arial,sans-serif;font-weight:normal}
.cp-gri{color:#6c757d}
/* style.css pune tuturor butoanelor / campurilor height:24px, font 12px si colturi rotunjite - aici nu */
.cp-pagina button,.cp-pagina input[type=text],.cp-pagina input[type=search]{height:auto;font-size:inherit;border-radius:0;outline:none}
.cp-pagina .btn{font-size:14px;line-height:1.5}
.cp-pagina .btn:not(.btn-sm){padding:6px 18px;font-size:16px}
.cp-pagina input[type=range]{height:auto;border:0}
.cp-pagina input[type=checkbox]{height:auto}
.cp-editor{scroll-margin-top:110px}

/* tab-uri: modele predefinite / poza mea */
.cp-taburi{display:flex;border-bottom:1px solid #DADADA;margin:8px 0 0;background:#fff}
.cp-taburi a{display:inline-flex;flex-direction:column;align-items:center;padding:10px 22px;color:#6c757d;font-size:17px;text-decoration:none;border-bottom:4px solid transparent;margin-bottom:-1px}
.cp-taburi a:hover{color:#1d1f22;background:#F6F6F6;font-family:FrutigerBold,FrutigerLight,Arial,sans-serif}
/* textul ingrosat ocupa deja locul (invizibil), ca tab-urile sa nu se miste la mouse over */
.cp-taburi a::after{content:attr(data-t);font-family:FrutigerBold,FrutigerLight,Arial,sans-serif;height:0;visibility:hidden;overflow:hidden;pointer-events:none}
/* tab-ul nou "Poza mea": text inchis + eticheta NOU in coltul tab-ului (nu ii schimba latimea) */
.cp-taburi a.cp-nou{position:relative;color:#1d1f22;padding-right:34px}
.cp-nou-eticheta{position:absolute;top:3px;right:2px;background:#FFD700;color:#1d1f22;font-family:FrutigerBold,FrutigerLight,Arial,sans-serif;font-size:10px;line-height:1;letter-spacing:.06em;padding:3px 5px;animation:cp-nou 1.6s ease-in-out 3}
@keyframes cp-nou{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.cp-nou-eticheta{animation:none}}
/* pe pagina modelelor (colouring.php) continutul e float:left - bara de tab-uri la fel, altfel urca peste antet */
.cp-taburi-model{float:left;position:relative;width:100%;z-index:15}
.cp-taburi a.on{color:#1d1f22;border-bottom-color:#FFD700;font-family:FrutigerBold,FrutigerLight,Arial,sans-serif}

/* ---------- ecranul de start ---------- */
.cp-start{padding:18px 16px 8px;background:#fff}
.cp-h2{font-size:24px;margin:0 0 12px}
.cp-h3{font-size:18px;margin:0 0 10px}
.cp-zona-incarcare{display:flex;align-items:center;justify-content:center;text-align:center;min-height:190px;border:2px dashed #9AA0A6;background:#F6F6F6;cursor:pointer;padding:20px;margin:0;font-size:18px;transition:background .15s,border-color .15s}
.cp-zona-incarcare small{display:block;font-size:14px;color:#6c757d;margin-top:6px}
.cp-zona-incarcare:hover,.cp-zona-incarcare.peste{border-color:#1d1f22;background:#FFF8CC}
.cp-zona-incarcare.lucreaza{pointer-events:none;opacity:.75;border-style:solid}
.cp-acord{margin-top:10px;font-size:14px;color:#495057;padding:6px 8px;border-left:4px solid transparent}
.cp-acord label{margin:0;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.cp-acord input{margin-top:4px;flex-shrink:0}
.cp-acord.cp-atentie{border-left-color:#D64541;background:#FFF0F0}
.cp-pasi{background:#F6F6F6;padding:16px 18px;border-top:4px solid #FFD700}
.cp-pasi ol{padding-left:20px;margin:0 0 10px}
.cp-pasi li{margin-bottom:8px}
.cp-pozele-mele-bloc{margin-top:24px}
.cp-pozele-mele{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.cp-poza-mea{border:1px solid #DADADA;background:#fff}
.cp-poza-mea img{width:100%;height:120px;object-fit:cover;display:block;cursor:pointer;background:#E9E9E7}
.cp-poza-mea-info{font-size:13px;color:#6c757d;padding:6px 8px 0}
.cp-poza-mea-btn{display:flex;gap:6px;padding:6px 8px 8px}
.cp-poza-mea-btn .btn{flex:1}

/* ---------- editorul ---------- */
.cp-editor{position:relative;background:#fff;border:1px solid #DADADA;margin-top:10px;display:flex;flex-direction:column}
.cp-editor.d-none{display:none!important}
.cp-cap{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#F6F6F6;border-bottom:1px solid #DADADA}
.cp-cap-t{font-family:FrutigerBold,FrutigerLight,Arial,sans-serif;font-size:18px;margin-right:auto}
.cp-bara{display:flex;flex-wrap:wrap;gap:8px;padding:8px 10px;border-bottom:1px solid #E3E3E3;align-items:center}
.cp-grup{display:flex;gap:3px;align-items:center}
.cp-grup.cp-dreapta{margin-left:auto}
.cp-bara .btn,.cp-bag .btn,.cp-cap .btn,.cp-jos .btn{font-size:14px;white-space:nowrap}
.cp-bara .cp-patrat{min-width:32px;font-size:16px;line-height:1.2}
.cp-zoom{min-width:48px;text-align:center;font-size:13px;color:#495057;font-variant-numeric:tabular-nums}
.cp-bag{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:7px 10px;background:#FFF8CC;border-bottom:1px solid #F0E4A0;font-size:14px}
.cp-bag.d-none{display:none!important}
.cp-bag input[type=range]{width:110px;vertical-align:middle}
.cp-bag label{margin:0;cursor:pointer}
.cp-bag label input{margin-right:4px;vertical-align:-1px}
.cp-bag small{color:#6c757d;min-width:90px}
.cp-bag-btn{display:flex;gap:4px;margin-left:auto}
.cp-corp{display:flex;min-height:0}
.cp-stanga{flex-grow:1;min-width:0;display:flex;flex-direction:column}
.cp-scena{position:relative;overflow:hidden;background:#E9E9E7;height:calc(100vh - 290px);min-height:440px;max-height:820px}
.cp-scena canvas{position:absolute;left:0;top:0;display:block;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
/* Mareste / Micsoreaza: in coltul din dreapta-sus al pozei */
.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:3px}
/* Instructiuni: evidentiat cu galbenul STO */
.cp-pagina .cp-btn-instr{background:#FFD700;border:1px solid #FFD700;color:#1d1f22}
.cp-pagina .cp-btn-instr:hover,.cp-pagina .cp-btn-instr.on{background:#F2C800;border-color:#1d1f22;color:#1d1f22}
.cp-incarcare{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6c757d;font-size:16px;background:#E9E9E7}
.cp-incarcare.d-none{display:none!important}
.cp-indiciu{padding:7px 12px;font-size:14px;color:#343A40;background:#F6F6F6;border-top:1px solid #E3E3E3;min-height:36px;line-height:1.45}
.cp-panou{width:clamp(400px,30vw,540px);flex-shrink:0;border-left:1px solid #E3E3E3;overflow:auto;max-height:calc(100vh - 254px);min-height:476px}
.cp-sectiune{padding:12px 14px;border-bottom:1px solid #E3E3E3}
.cp-titlu{font-family:FrutigerBold,FrutigerLight,Arial,sans-serif;font-size:15px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-zona{display:flex;align-items:center;gap:9px;border:1px solid #E3E3E3;padding:5px 7px;margin-bottom:4px;cursor:pointer;background:#fff}
.cp-zona:hover{background:#FAFAFA}
.cp-zona.on{box-shadow:inset 4px 0 0 #FFD700;border-color:#343A40}
.cp-mostra{width:32px;height:24px;border:1px solid #C8C8C8;flex-shrink:0;display:inline-block}
.cp-mostra.mare{width:52px;height:36px}
.cp-zona-t{min-width:0}
.cp-zona-t b{display:block;font-size:14px}
.cp-zona-t small{color:#6c757d;font-size:12px}
.cp-adauga{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px;font-size:13px}
.cp-adauga span{color:#495057;margin-right:2px}
.cp-adauga button,.cp-butoane-mici button{border:1px solid #C8C8C8;background:#fff;padding:3px 9px;font-size:13px;color:#343A40}
.cp-adauga button:hover,.cp-butoane-mici button:hover{background:#FFF8CC;border-color:#343A40}
.cp-culoare-aleasa{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cp-culoare-aleasa b{display:block;font-size:16px}
.cp-culoare-aleasa small{color:#6c757d;font-size:12px}
.cp-nota{background:#FFF8CC;border-left:4px solid #FFD700;padding:6px 10px;font-size:13px;margin-bottom:8px}
.cp-paletare{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.cp-paletare button{border:1px solid #C8C8C8;background:#fff;font-size:12px;padding:3px 8px;color:#343A40}
.cp-paletare button.on{background:#343A40;color:#fff;border-color:#343A40}
.cp-nuante{max-height:250px;overflow:auto;margin-top:6px;border:1px solid #E3E3E3;padding:4px 6px;background:#FAFAFA}
.cp-familie{font-size:11px;letter-spacing:.05em;color:#6c757d;margin:6px 0 2px;text-transform:uppercase}
.cp-grila{display:flex;flex-wrap:wrap;gap:2px}
.cp-grila button{width:28px;height:28px;border:1px solid rgba(0,0,0,.12);padding:0;cursor:pointer}
.cp-grila button:hover{outline:2px solid #343A40;outline-offset:0;position:relative;z-index:1}
.cp-grila button.on{outline:3px solid #FFD700;box-shadow:0 0 0 4px #343A40;position:relative;z-index:2}
.cp-cod-hover{font-size:13px;color:#495057;min-height:20px;margin:4px 0 6px}
.cp-eticheta{font-size:13px;color:#495057;margin:6px 0 2px;display:block}
.cp-butoane-mici{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cp-butoane-mici button.rosu{color:#C0392B;border-color:#E6B0AA}
.cp-jos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid #DADADA;background:#F6F6F6}
.cp-stare{font-size:13px;color:#6c757d;margin-right:auto}
.cp-actiuni{display:flex;flex-wrap:wrap;gap:4px}

/* instructiunile: panou care intra din dreapta, peste editor */
.cp-instr{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;z-index:30;box-shadow:-10px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;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;padding:10px 16px;background:#343A40;color:#fff;font-size:17px}
.cp-instr-corp{overflow:auto;padding:6px 20px 24px;font-size:15px;line-height:1.55}
.cp-instr-corp h4{font-size:16px;margin:18px 0 6px;padding-bottom:3px;border-bottom:2px solid #FFD700}
.cp-instr-corp ul{padding-left:20px;margin:0}
.cp-instr-corp li{margin-bottom:4px}
.cp-taste{width:100%;font-size:14px;border-collapse:collapse}
.cp-taste td{padding:4px 6px;border-bottom:1px solid #EEE;vertical-align:top}
.cp-taste td:first-child{white-space:nowrap;width:1%;font-family:FrutigerBold,FrutigerLight,Arial,sans-serif}

/* 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{height:auto;flex-grow:1;max-height:none;min-height:0}
.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;transform:translate(-50%,20px);max-width:min(620px,92vw);background:#343A40;color:#fff;padding:10px 18px;font-size:15px;z-index:2100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.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;border-left:0;border-top:1px solid #E3E3E3;max-height:none;min-height:0}
	.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-start{padding:12px 10px}
	.cp-bara{gap:6px;padding:6px}
	.cp-bara .btn,.cp-bag .btn{font-size:13px;padding:4px 8px}
	.cp-taburi a{padding:9px 10px;font-size:14px;flex:1 1 0;text-align:center}
	.cp-taburi a.cp-nou{padding-right:30px}
	.cp-bag-btn{margin-left:0}
}