/**
 * Fast'nPrint – Configurateur produit
 * Palette : #1A1F3A navy · #E6196A magenta · #F5D020 yellow
 */

/* ── Variables ── */
.fnp-cfg {
    --fnp-navy:    #1A1F3A;
    --fnp-mid:     #242B48;
    --fnp-dark:    #0F1220;
    --fnp-yellow:  #F5D020;
    --fnp-magenta: #E6196A;
    --fnp-white:   #FFFFFF;
    --fnp-muted:   #8B95B5;
    --fnp-border:  rgba(255,255,255,.1);
    --fnp-grad:    linear-gradient(135deg, #F5D020, #FF6B35, #E6196A, #7B2FBE);
}

/* ── Card principale ── */
.fnp-cfg {
    background: var(--fnp-navy);
    border: 1px solid var(--fnp-border);
    border-radius: 14px;
    padding: 28px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    color: var(--fnp-white);
    font-family: 'Inter', 'Open Sans', sans-serif;
}

/* Trait gradient en haut */
.fnp-cfg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--fnp-grad);
}

/* ── Titre ── */
.fnp-cfg-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fnp-white);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fnp-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.fnp-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--fnp-yellow);
    background: rgba(245,208,32,.12);
    border: 1px solid rgba(245,208,32,.3);
    border-radius: 4px;
    padding: 3px 7px;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Sections ── */
.fnp-cfg-section {
    margin-bottom: 20px;
}

/* ── Labels ── */
.fnp-field-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--fnp-muted);
    margin-bottom: 8px;
}

/* ── Grille 2 colonnes ── */
.fnp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.fnp-field {
    display: flex;
    flex-direction: column;
}

/* ── Selects ── */
.fnp-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B95B5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--fnp-border);
    border-radius: 8px;
    padding: 11px 36px 11px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fnp-white);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    width: 100%;
    box-sizing: border-box;
}

.fnp-select option,
.fnp-select optgroup {
    background: #1A1F3A;
    color: #fff;
}

.fnp-select:focus {
    outline: none;
    border-color: var(--fnp-yellow);
    background-color: rgba(245,208,32,.05);
    box-shadow: 0 0 0 3px rgba(245,208,32,.15);
}

.fnp-select:hover {
    border-color: rgba(255,255,255,.25);
}

/* ── Inputs numériques ── */
.fnp-dim-input {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--fnp-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--fnp-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, background .2s;
}

.fnp-dim-input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.2);
}

.fnp-dim-input:focus {
    outline: none;
    border-color: var(--fnp-yellow);
    background: rgba(245,208,32,.05);
    box-shadow: 0 0 0 3px rgba(245,208,32,.12);
}

/* Input lés (readonly) */
.fnp-les-input {
    font-size: 14px;
    font-weight: 700;
    background: rgba(255,255,255,.04);
    color: var(--fnp-muted);
    cursor: default;
}

/* ── Orientation lés ── */
.fnp-orient-row {
    display: flex;
    gap: 14px;
    align-items: center;
}

.fnp-orient-row .fnp-select {
    flex: 1;
}

#fnp-lesSchema {
    flex: 0 0 auto;
}

/* ── Avertissement ── */
.fnp-warn-box {
    background: rgba(230,25,106,.1);
    border: 1px solid rgba(230,25,106,.35);
    color: rgba(255,150,180,.9);
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ── Prix ── */
.fnp-price-box {
    background: var(--fnp-dark);
    border: 1px solid rgba(245,208,32,.2);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.fnp-price-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--fnp-grad);
}

.fnp-price-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--fnp-muted);
    margin-bottom: 10px;
}

.fnp-price-amount-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fnp-price-amount {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--fnp-yellow);
    line-height: 1;
}

.fnp-price-note {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-top: 8px;
}

/* ── Upload ── */
.fnp-upload {
    margin-bottom: 20px;
}

.fnp-upload-zone {
    border: 2px dashed rgba(255,255,255,.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
}

.fnp-upload-zone:hover,
.fnp-upload-zone.dragover {
    border-color: var(--fnp-yellow);
    background: rgba(245,208,32,.04);
}

.fnp-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.fnp-upload-ico {
    display: block;
    margin: 0 auto 10px;
    stroke: var(--fnp-muted);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fnp-upload-hint {
    font-size: 13px;
    color: rgba(255,255,255,.9);
    margin: 0 0 4px;
}

.fnp-upload-hint strong {
    color: var(--fnp-yellow);
}

.fnp-upload-specs {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin: 0;
}

.fnp-upload-later {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin: 8px 0 0;
    text-align: center;
}

/* ── Barre de progression ── */
.fnp-progress {
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    margin-top: 8px;
    display: none;
}

.fnp-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--fnp-grad);
    border-radius: 2px;
    transition: width .3s;
}

/* ── Bouton CTA ── */
.fnp-add-btn {
    width: 100% !important;
    padding: 16px 32px !important;
    background: var(--fnp-magenta) !important;
    color: var(--fnp-white) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .2s, box-shadow .2s, background .2s;
    margin-top: 4px;
}

.fnp-add-btn:hover {
    background: #ff2a7a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(230,25,106,.45) !important;
}

.fnp-add-btn:active {
    transform: translateY(0);
}

.fnp-add-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

/* ── Icône inline SVG ── */
.fnp-cfg .fnp-ico {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ── Correctifs lisibilité (priorité sur le thème Blocksy) ── */
/* Blocksy impose une couleur de texte sombre + une hauteur fixe aux champs de
   formulaire, ce qui rend le texte illisible sur fond marine et rogne le bas
   des lettres. On force le texte clair et une hauteur souple. */
.fnp-cfg .fnp-dim-input,
.fnp-cfg .fnp-select,
.fnp-cfg input.fnp-dim-input,
.fnp-cfg select.fnp-select {
    color: var(--fnp-white) !important;
    -webkit-text-fill-color: var(--fnp-white) !important;
    background-color: rgba(255,255,255,.06) !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
}

.fnp-cfg .fnp-dim-input { padding: 12px 14px !important; }
.fnp-cfg .fnp-select    { padding: 12px 38px 12px 14px !important; }

/* Champ « lés » en lecture seule : reste volontairement atténué */
.fnp-cfg .fnp-les-input {
    color: var(--fnp-muted) !important;
    -webkit-text-fill-color: var(--fnp-muted) !important;
}

/* Options des listes déroulantes (menu ouvert) */
.fnp-cfg .fnp-select option,
.fnp-cfg .fnp-select optgroup {
    background: #1A1F3A !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Placeholders des dimensions : plus lisibles qu'avant */
.fnp-cfg .fnp-dim-input::placeholder {
    color: rgba(255,255,255,.45) !important;
    -webkit-text-fill-color: rgba(255,255,255,.45) !important;
    opacity: 1;
}

/* Libellés de champ un peu plus clairs */
.fnp-cfg .fnp-field-label,
.fnp-cfg .fnp-price-label {
    color: #AEB6D4 !important;
}

/* ── Liste des fichiers chargés ── */
.fnp-file-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fnp-file-list:empty {
    margin: 0;
}

.fnp-file-list li {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--fnp-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fnp-white);
    overflow-wrap: anywhere;
}

/* ── Bloc BAT (Bon à Tirer) ── */
.fnp-bat {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--fnp-border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
}

.fnp-bat-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--fnp-white);
    margin: 0 0 6px;
}

.fnp-bat-status {
    font-size: 12px;
    font-weight: 500;
    color: var(--fnp-muted);
    margin: 0 0 12px;
}

.fnp-bat-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 360px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.fnp-bat-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fnp-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fnp-bat-link:hover {
    color: #ff2a7a;
}

.fnp-bat-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fnp-white);
    cursor: pointer;
}

.fnp-bat-check input {
    width: 18px;
    height: 18px;
    margin: 0 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--fnp-magenta);
}

.fnp-bat-regen {
    display: inline-block;
    margin-top: 8px;
    background: transparent;
    color: var(--fnp-white);
    border: 1px solid var(--fnp-border);
    border-radius: 8px;
    padding: 9px 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.fnp-bat-regen:hover {
    border-color: var(--fnp-yellow);
    background: rgba(245,208,32,.06);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .fnp-cfg {
        padding: 20px 16px;
    }

    .fnp-grid2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fnp-price-amount {
        font-size: 2rem;
    }

    .fnp-orient-row {
        flex-direction: column;
        align-items: stretch;
    }

    #fnp-lesSchema {
        text-align: center;
    }

    .fnp-bat {
        padding: 16px;
    }

    .fnp-bat-frame {
        height: 260px;
    }
}

/* ── BAT : alerte format + note homothétie ── */
.fnp-bat-warn {
    background: rgba(230,25,106,.12);
    border: 1px solid rgba(230,25,106,.5);
    color: #ffd0e0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    margin: 6px 0 10px;
}
.fnp-bat-note {
    font-size: 12px;
    color: #B9C2DC;
    margin: 8px 0 12px;
    line-height: 1.45;
}

/* ── Option : utiliser les dimensions du fichier ── */
.fnp-usedims {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    background: rgba(245,208,32,.08);
    border: 1px solid rgba(245,208,32,.3);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--fnp-white, #fff);
    cursor: pointer;
}
.fnp-usedims input { margin: 0; flex: 0 0 auto; }
.fnp-usedims em { color: var(--fnp-yellow, #F5D020); font-style: normal; font-weight: 700; }
.fnp-usedims-note {
    font-size: 12px;
    color: #B9C2DC;
    margin: 6px 0 4px;
}

/* Message d'aide sous le bouton d'ajout au panier (raison du blocage) */
.fnp-add-hint {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--fnp-yellow, #F5D020);
    background: rgba(245,208,32,.10);
    border: 1px solid rgba(245,208,32,.30);
    border-radius: 8px;
    padding: 9px 12px;
    text-align: center;
}