/* cdesigner-front.css — CSS extern cachebil, mutat din cdesigner_footer.tpl (inline).
   Incarcat pe produsele personalizabile. {$main_color} -> var(--cd-main): cand
   --cd-main nu e setat (main_color gol), declaratiile cu var() se ignora -> ca inainte. */

/* ===== layout hide (din footer.tpl ~1819) ===== */
    .product-customization,.product-variants,.product-quantity,.product-add-to-cart .control-label,
    .product-add-to-cart .add-to-cart{
        display: none !important;
    }

/* ===== tema main_color (din footer.tpl ~2572) ===== */
        #lft-side .cp-btn-more-pic:hover,
        .cp-btn-more-pic:hover,
        #cp-content .cp-list-color .bleu,
        .alertify-button-ok:hover,
        #cdesigner .cp-info-dev .cp-title:after,
        .cp-h-v a,
        .cp-list-font a:hover,
        #cp-add-cart a:hover,
        .cp-list-color a span,
         #cp-add-cart-mobile .cp-btn-save,#cp-add-cart-mobile .finalpers,
         .add-txt:hover, .new-txt:hover{
          background-color: var(--cd-main) !important;
        }

        .ui-rotatable-handle,
        .ui-resizable-se,
        .btn-delete-img-cr,.order-by-slice,
        .add-txt:hover, .new-txt:hover,
        .btn-close-mobile,
        .delete-txt,
        #first-title,
        .spin-c,
        .navigation-btn li a{
            background-color: var(--cd-main);
        }

        .pre-design .current-txt,
        .cp-gridme-cover .cp-cibled-row,
        .pre-design .cp-cibled-row{
          outline-color: var(--cd-main) !important;
        }

        .lds-ring div{
            border-color: var(--cd-main) transparent transparent transparent;
        }

        #cp-sel-Photos li:hover,
        .cp-btn-help:hover samp,
        .lst-tags a:hover, .lst-tags a.active,
        #loader-start,
        .alertify-button-ok:hover,
        .switcher a.active,
        .switcher a:hover,
        .lst-tags a:hover,
        .lst-tags a.active,
        #cp-size-txt li a:hover,#cp-align-txt li a:hover, .cp-list-color > a:hover,
        .cp-model li a.active,
        .cp-device li a:hover,
        .cp-device li a:hover, #cp-sel-layout li a:hover,.cp-device li a.active, #cp-sel-layout li a.active,
        .alertify,
        #cp-link-step li a:hover samp,
        #cp-link-step .cp-current-step a samp,
        #cp-link-step .cp-current-step a,
        #cp-link-step .cp-current-step-force a samp,
        #cp-link-step .cp-current-step-force a,
        .navigation-mobile  .cp-current-step-force a samp,
        .navigation-mobile  .cp-current-step-force a,
        .list-combination-data .input-color:checked + span, 
        .list-combination-data .input-color:hover + span, 
        .list-combination-data .input-radio:checked + span, 
        .list-combination-data .input-radio:hover + span,
        .navigation-mobile  .active a samp,
        .done-combi:hover,.finalizare:hover,
        .navigation-mobile  .active a{
            border-color: var(--cd-main) !important;
        }
        .bleu,
        .extra,
        .spin-load,
        .cp-brand,
        .txt-load,
        .cp-brand samp,
        .cp-btn-action a:hover, .cp-btn-action a:hover i {
          color: var(--cd-main) !important;
        }
        .alertify-button:focus {
          squared-shadow: 0 0 15px var(--cd-main);
        }

/* ===== CSS general (din footer.tpl ~2651) ===== */


    .circleimage, .circleimage span{
        border-radius: 50%;

    }

    /* POLIGON: taie preview-ul cropper-ului pe forma poligonului, EXACT ca la cerc.
       La cerc, .circleimage span (= .wrap-img-drag) e rotunjit + overflow:hidden, deci
       containerul in care cropper.js randeaza preview-ul e taiat rotund. La poligon,
       clip-path-ul sta doar pe .sqr (parinte). Cu clip-path:inherit, span-ul .wrap-img-drag
       preia exact poligonul de pe .sqr.polyimage si taie preview-ul (sus in banda + zona mare),
       la fel ca cercul. getComputedStyle rezolva `inherit` la valoarea reala, deci si captura
       html2canvas-pro vede acelasi poligon (redundant cu .sqr -> fara efecte secundare). */
    .polyimage > .wrap-img-drag{
        clip-path: inherit;
        -webkit-clip-path: inherit;
    }

    /* Ghidajul de forma poligon din ZONA MARE de crop (vezi cdesigner.js, callback ready).
       Copil al .cropper-view-box, taiat de overflow:hidden-ul acesteia; urmeaza crop box-ul.
       FARA z-index: ramane PESTE imagine, dar SUB punctele/sageata portocalii si liniile
       (care sunt frati ulteriori ai .cropper-view-box) => nu le intuneca. */
    .cd-crop-poly-guide{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        display: block;
    }



        /* Buton ștergere imagine încărcată */
.delete-uploaded-img {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #e74c3c;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    z-index: 10;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.delete-uploaded-img:hover {
    background: #c0392b;
}

#cp-sel-Photos ul li.from-desktop {
    position: relative;
}

#cp-sel-Photos ul li.from-desktop:hover .delete-uploaded-img {
    opacity: 1;
}

/* Pe mobil, butonul e mereu vizibil */
@media (max-width: 979px) {
    .delete-uploaded-img {
        opacity: 1;
    }
}

/* ===== Esantioane de culoare (backgrounds) ===== */
#cp-sel-Photos ul li a.cd-color-a{ display:block; width:100%; height:100%; min-height:74px; border-radius:3px; }
.wrap-img-drag.cd-color-fill{ width:100%; height:100%; background-size:cover; background-repeat:no-repeat; }