@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&family=Oswald:wght@500;700&family=Pacifico&family=Poppins:wght@400;500;600;700&display=swap');

#tshirt-custom-module {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 25px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    font-family: 'Poppins', sans-serif !important; /* Police principale propre pour tout le module */
}
#tshirt-custom-module * { box-sizing: border-box !important; }
.custom-module-title { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 25px !important; color: #1e293b !important; font-family: 'Montserrat', sans-serif !important; }

/* EVITE LE CHEVAUCHEMENT DES COLONNES */
.customizer-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Force le passage à la ligne si l'écran est trop petit au lieu de chevaucher */
    gap: 30px !important;
    width: 100% !important;
    align-items: flex-start !important;
}

.config-column {
    flex: 1.1 !important;
    min-width: 320px !important;
}

.preview-column {
    flex: 0.9 !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 390px !important; /* Empêche le t-shirt de rétrécir ou de sortir du cadre */
}

/* ENCART BLANC AJUSTÉ SANS AUCUN DÉBORDEMENT */
.preview-sticky-box {
    background: #ffffff !important;
    padding: 20px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    width: 392px !important; /* Largeur exacte pour contenir le canvas de 350px et ses marges */
    height: 490px !important; /* Hauteur fixe pour verrouiller le t-shirt à l'intérieur */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
}

.canvas-container {
    width: 352px !important;
    height: 422px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
}

#tshirt-canvas {
    display: block !important;
    width: 350px !important;
    height: 420px !important;
}

/* Elements de formulaires standards */
.step-box { position: relative !important; background: #f8fafc !important; padding: 15px 15px 15px 50px !important; border-radius: 8px !important; margin-bottom: 15px !important; border: 1px solid #e2e8f0 !important; }
.step-badge { position: absolute !important; left: 15px !important; top: 15px !important; width: 24px !important; height: 24px !important; background: #0f172a !important; color: #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: bold !important; font-size: 12px !important; }
.step-title { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: #1e293b !important; margin-bottom: 12px !important; font-family: 'Montserrat', sans-serif !important; }
.size-grid-modern { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; }
.size-item { flex: 1 !important; background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 8px !important; text-align: center; }
.size-item label { display: block !important; font-weight: bold !important; font-size: 13px !important; margin-bottom: 5px !important; color: #64748b !important; }
.size-input { width: 100% !important; border: none !important; text-align: center !important; font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; outline: none !important; background: transparent !important; padding: 0 !important; }
.color-picker-grid { display: flex !important; flex-direction: row !important; gap: 12px !important; margin-top: 10px !important; }
.tshirt-color-btn { width: 42px !important; height: 42px !important; border-radius: 8px !important; border: 2px solid #cbd5e1 !important; cursor: pointer !important; padding: 0 !important; }
.tshirt-color-btn.active { border-color: #0f172a !important; transform: scale(1.05) !important; }
.modern-input { width: 100% !important; padding: 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; font-size: 14px !important; font-family: 'Poppins', sans-serif !important; }
.tools-row { display: flex !important; gap: 10px !important; margin-top: 10px !important; }
.modern-select { flex: 1 !important; padding: 10px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; font-size: 14px !important; font-family: 'Poppins', sans-serif !important; }
.modern-color { width: 50px !important; height: 44px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; cursor: pointer !important; }
.btn-modern-secondary { width: 100% !important; padding: 12px !important; background: #0f172a !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-weight: 600 !important; cursor: pointer; font-size: 14px !important; font-family: 'Montserrat', sans-serif !important; }
.status-alert { margin-top: 10px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 12px !important; border-radius: 4px !important; }
.status-alert.error { color: #b91c1c; background: #fef2f2; }
.status-alert.success { color: #15803d; background: #f0fdf4; }

/* Responsive Mobile tactile */
@media (max-width: 991px) {
    .customizer-layout { flex-direction: column !important; }
    .config-column, .preview-column { width: 100% !important; min-width: 100% !important; }
    .preview-column { order: -1 !important; margin-bottom: 20px !important; }
    .preview-sticky-box { width: 100% !important; max-width: 100% !important; height: auto !important; padding: 10px !important; }
    .canvas-container { transform: scale(0.9); transform-origin: top center; margin-bottom: -40px; }
}
/* FORCE LE STYLE DU BOUTON ENREGISTRER SANS CHEVAUCHEMENT */
#btn-save-customization {
    display: block !important;
    width: 100% !important;
    margin: 15px 0 10px 0 !important;
    padding: 12px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    background: #2563eb !important; /* Un beau bleu royal */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    clear: both !important;
    font-family: 'Montserrat', sans-serif !important;
}

#btn-save-customization:hover {
    background: #1d4ed8 !important;
}

#save-status-msg {
    display: block !important;
    color: #16a34a !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
    font-size: 13px !important;
}

/* Correctifs mobile : évite le débordement du texte du bouton vert et
   le décalage du bouton violet "Appliquer le texte" sur petit écran */
@media (max-width: 480px) {
    #btn-validate-custom {
        font-size: 13px !important;
        padding: 12px 6px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
    }

    #btn-apply-text {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        padding: 12px 6px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
    }

    #tshirt-custom-block .custom-form-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Les boutons recto/verso/manches sont en flex:1 avec du texte plus ou
       moins long ("VERSO" vs "MANCHE DROITE") ; sans min-width:0 un flex-item
       ne peut jamais devenir plus petit que son texte non coupe, ce qui pousse
       tout le groupe de boutons hors de l'ecran sur mobile. */
    #side-switch-container .side-btn,
    #sleeve-switch-container .side-btn {
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 10px 4px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
    }
}