/* ── WC Personnalisation — front-end ── */

.wcp-personnalisation {
    margin: 1.5em 0;
    padding: 1.2em 1.4em;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}
.wcp-section-title {
    margin: 0 0 1.2em;
    font-size: 1.05em;
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: .5em;
}

/* Neutraliser les styles globaux du thème à l'intérieur du bloc */
.wcp-personnalisation label {
    display: block !important;
    margin: 0 0 .5em 0 !important;
    font-size: inherit !important;
    cursor: default !important;
}

/* Chaque champ */
.wcp-field-wrap {
    margin-bottom: 1.5em !important;
    padding-bottom: 1.4em;
    border-bottom: 1px solid #ececec;
}
.wcp-field-wrap:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
}

.wcp-label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: .5em !important;
    color: #333 !important;
    font-size: .95em !important;
    cursor: default !important;
}
.wcp-required-mark { color: #c00; margin-left: 2px; }

.wcp-input {
    width: 100%;
    padding: .55em .8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color .2s;
    background: #fff;
}
.wcp-input:focus {
    border-color: var(--wcp-accent, #96588a);
    outline: none;
    box-shadow: 0 0 0 2px var(--wcp-accent-light, rgba(150,88,138,.15));
}

/* Compteur de caractères */
.wcp-input-wrapper {
    position: relative;
    margin-top: .5em;
}
.wcp-char-count {
    position: absolute;
    bottom: .4em;
    right: .6em;
    font-size: .75em;
    color: #aaa;
    pointer-events: none;
}
.wcp-char-count.wcp-limit-near  { color: #e67e00; }
.wcp-char-count.wcp-limit-reach { color: #c00; font-weight: 700; }

/* ── Sélecteur de police ── */
.wcp-font-selector {
    margin-top: 1em !important;
}
.wcp-font-selector-label {
    display: block !important;
    font-size: .85em !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin: 0 0 .7em 0 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: default !important;
}
.wcp-font-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5em !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Boutons rectangulaires harmonisés avec les inputs */
.wcp-font-options .wcp-font-option {
    display: inline-flex !important;
    align-items: center !important;
    padding: .5em .8em !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1.05em !important;
    line-height: 1.4 !important;
    background: #fff !important;
    margin: 0 !important;
    transition: border-color .2s, background .2s;
}
.wcp-font-options .wcp-font-option:hover {
    border-color: var(--wcp-accent, #96588a) !important;
    background: #fafafa !important;
}
.wcp-font-options .wcp-font-option input[type="radio"] {
    display: none !important;
    margin: 0 !important;
    width: auto !important;
}
.wcp-font-options .wcp-font-option.wcp-font-selected {
    border-color: var(--wcp-accent, #96588a) !important;
    border-width: 2px !important;
    background: #fff !important;
}
.wcp-font-option-label { pointer-events: none; }

/* ── Champ contenteditable typo ── */
.wcp-typo-editor {
    display: block !important;
    min-height: 1.8em !important;
    padding: .4em .8em !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
    color: #222 !important;
    background: #fff !important;
    word-break: break-word !important;
    cursor: text !important;
    outline: none !important;
    transition: border-color .2s, font-family .15s;
    white-space: nowrap;
    overflow: hidden;
}
/* Sur mobile : légèrement réduit */
@media (max-width: 600px) {
    .wcp-typo-editor {
        font-size: 1.8rem !important;
    }
}
.wcp-typo-editor:focus {
    border-color: var(--wcp-accent, #96588a) !important;
    box-shadow: 0 0 0 2px var(--wcp-accent-light, rgba(150,88,138,.15)) !important;
}
/* Placeholder via CSS quand le div est vide */
.wcp-typo-editor:empty::before {
    content: attr(data-placeholder);
    color: #bbb !important;
    font-style: italic !important;
    font-size: .65em !important;
    pointer-events: none;
}

/* ── Upload ── */
.wcp-upload-input {
    padding: .3em;
    cursor: pointer;
    width: auto !important;
    max-width: 100%;
}
.wcp-upload-hint {
    display: block !important;
    margin: .5em 0 0 !important;
    font-size: .82em !important;
    color: #999 !important;
    line-height: 1.4;
}
.wcp-upload-preview { margin-top: .8em; max-width: 200px; }
.wcp-upload-preview img {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.wcp-upload-preview .wcp-file-name {
    font-size: .82em;
    color: #555;
    background: #f0f0f0;
    padding: .3em .6em;
    border-radius: 3px;
    display: inline-block !important;
}

/* ── Couleur ── */
.wcp-color-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: .9em !important;
    margin-top: .1em;
}
.wcp-color-input {
    width: 52px !important;
    height: 42px !important;
    padding: 2px !important;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #ccc !important;
}
.wcp-color-value {
    font-family: monospace;
    font-size: .9em;
    color: #555;
}

/* ── Nombre / Date ── */
.wcp-number-input { max-width: 130px !important; }
.wcp-date-input   { max-width: 220px !important; }

/* ── Supplément personnalisation ── */
#wcp-supplement {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1em 1.2em;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f9f9f9;
    font-size: .95em;
}
.wcp-supp-title {
    display: block !important;
    margin: 0 0 .6em 0 !important;
    font-size: .9em !important;
    color: #555 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wcp-supp-lines {
    list-style: none !important;
    margin: 0 0 .4em 0 !important;
    padding: 0 !important;
}
.wcp-supp-lines li {
    display: flex !important;
    justify-content: space-between !important;
    padding: .2em 0 !important;
    border-bottom: 1px dotted #e0e0e0 !important;
    color: #444 !important;
}
.wcp-supp-lines li:last-child { border-bottom: none !important; }
.wcp-supp-price {
    font-weight: 600;
    white-space: nowrap;
    margin-left: 1em;
}
.wcp-supp-total {
    display: flex !important;
    justify-content: space-between !important;
    padding-top: .5em !important;
    font-weight: 700 !important;
    border-top: 2px solid #e0e0e0 !important;
    margin-top: .3em !important;
    color: #222 !important;
}

/* Prix "à partir de" */
.wcp-price-from {
    font-size: .8em;
    color: #888;
    font-weight: 400;
    display: block;
    margin-bottom: .1em;
}

/* ── Boutons choix unique ── */
.wcp-btn-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5em !important;
    margin-top: .3em;
}
.wcp-btn-choice {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: .5em .9em !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 1em !important;
    line-height: 1.3 !important;
    transition: border-color .2s, background .2s !important;
    color: #333 !important;
}
.wcp-btn-choice:hover {
    border-color: var(--wcp-accent, #96588a) !important;
    background: #fafafa !important;
}
.wcp-btn-choice.wcp-btn-active {
    border-color: var(--wcp-accent, #96588a) !important;
    border-width: 2px !important;
    background: #fff !important;
}
.wcp-btn-price {
    font-size: .8em !important;
    color: var(--wcp-accent, #96588a) !important;
    font-weight: 600 !important;
    margin-top: .15em !important;
}

/* ── Panier : masquer description courte, structurer les prix ── */
.wcp-price-base  { display: block; color: #555; font-size: .9em; }
.wcp-price-perso { display: block; color: #888; font-size: .85em; }
.wcp-price-total { display: block; font-size: 1em; }

/* ── Prix overlay (remplace le prix du theme quand perso active) ── */
/* Taille, graisse, couleur, interligne : captures depuis le theme via style inline JS */
.wcp-price-overlay {
    display: block !important;
    margin-bottom: .1em !important;
    position: relative !important;
    z-index: 2 !important;
}
/* Mention sans gras (les deux emplacements) */
#wcp-price-mention,
#wcp-price-mention-float {
    font-weight: 400 !important;
}
/* Masquer TOUT le contenu original du .price quand overlay actif */
.wcp-has-overlay > :not(#wcp-price-overlay):not(#wcp-price-mention):not(#wcp-price-overlay-float):not(#wcp-price-mention-float) {
    display: none !important;
}
.wcp-has-overlay #wcp-price-mention,
.wcp-has-overlay #wcp-price-mention-float {
    display: block !important;
    margin-top: .2em !important;
}
/* ── Mention "dont X€ de personnalisation" sous le prix produit ── */
.wcp-price-mention {
    font-size: .85em !important;
    color: #888 !important;
    margin: .2em 0 .5em 0 !important;
    font-style: italic !important;
    display: block !important;
}

/* ── Masquer description courte dans le panier pour produits personnalisés ── */
.woocommerce-cart-form .cart_item .wcp-hide-desc ~ .product-description,
.woocommerce-cart-form .cart_item .wcp-hide-desc + p {
    display: none !important;
}

/* ── Bouton reset upload ── */
.wcp-upload-reset {
    display: block !important;
    margin-top: .4em !important;
    padding: .3em .7em !important;
    font-size: .8em !important;
    color: #c00 !important;
    background: none !important;
    border: 1px solid #c00 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}
.wcp-upload-reset:hover {
    background: #fff0f0 !important;
}
/* Aperçu image cliquable */
.wcp-upload-preview img {
    cursor: pointer !important;
}
.wcp-upload-preview img:hover {
    opacity: .85 !important;
}

/* ── Barre flottante Blocksy : adapter la taille ── */
.ct-floating-bar-content .wcp-price-overlay {
    font-size: inherit !important;
    margin-bottom: 0 !important;
}
.ct-floating-bar-content .wcp-price-mention {
    font-size: .75em !important;
}

/* ── Forcer la hauteur du .price lorsque l'overlay est actif ── */
.wcp-has-overlay {
    height: auto !important;
    min-height: 1.5em !important;
    overflow: visible !important;
}