/**
 * CNCT Signalement - Frontend Styles
 * Design basé sur la maquette MANU
 * @package WebStudios\CNCT_Signalement
 * @version 2.0.0
 */

/* Reset et annulation des contraintes WordPress */
body, html, main {
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.plugin_cnct_form_main) .entry-content,
body:has(.plugin_cnct_form_main) .wp-block-post-content,
body:has(.plugin_cnct_form_main) main {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container principal avec fond bleu dégradé - PLEINE LARGEUR */
.plugin_cnct_form_main {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    background: linear-gradient(180deg, #e0f4f8 0%, #f0f9fb 50%, #ffffff 100%) !important;
    background-image: url('/wp-content/plugins/webstudios-cnct-signalement/assets/images/signalement_bg_form.webp') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    padding: 30px !important;
    margin: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

/* Sidebar - Navigation des étapes */
.plugin_cnct_form_main_step {
    display: flex !important;
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    width: 229px !important;
    background: #FFFFFF 0% 0% no-repeat padding-box !important;
    border: 1px solid #0F738A !important;
    border-radius: 0px 36px 36px 36px !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden !important;
}

.plugin_cnct_form_main_step > .plugin_cnct_form_main_step_title,
.plugin_cnct_form_main_step > .plugin_cnct_form_main_step_n {
    width: calc(100% - 20px) !important;
    padding: 20px 10px !important;
    border-bottom: 1px solid #0F738A !important;
    box-sizing: content-box !important;
}

.plugin_cnct_form_main_step > .plugin_cnct_form_main_step_n:last-child {
    border-bottom: unset !important;
}

.plugin_cnct_form_main_step_title {
    display: flex !important;
}

.plugin_cnct_form_main_step_title_icon {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 50px !important;
}

.plugin_cnct_form_main_step_title_icon img {
    width: 20px !important;
}

.plugin_cnct_form_main_step_title_text {
    display: flex !important;
    width: calc(100% - 50px) !important;
    text-align: left !important;
    font: normal normal 600 16px/21px Segoe UI !important;
    letter-spacing: 0px !important;
    color: #0F738A !important;
    text-transform: uppercase !important;
}

.plugin_cnct_form_main_step_n {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.plugin_cnct_form_main_step_n.current .plugin_cnct_form_main_step_n_text {
    font: normal normal normal 18px/24px Segoe UI !important;
}

.plugin_cnct_form_main_step_n:not(.current) .plugin_cnct_form_main_step_n_text {
    font: normal normal normal 18px/24px Segoe UI !important;
}

.plugin_cnct_form_main_step_n:not(.current) {
    background: #D3EEF7 0% 0% no-repeat padding-box !important;
}

.plugin_cnct_form_main_step_n_label {
    background: #D52267 0% 0% no-repeat padding-box !important;
    border-radius: 13px !important;
    padding: 3px 10px !important;
    text-align: center !important;
    font: normal normal 600 14px/20px Segoe UI !important;
    letter-spacing: 0px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
}

.plugin_cnct_form_main_step_n_text {
    text-align: left !important;
    letter-spacing: 0px !important;
    color: #333344 !important;
    margin-top: 10px !important;
}

/* Zone formulaire */
.plugin_cnct_form_main_form {
    display: flex !important;
    width: calc(100% - 280px) !important;
    min-height: 100vh !important;
    justify-content: center !important;
    padding-left: 280px !important;
    box-sizing: border-box !important;
}

.plugin_cnct_form_main_form_sized {
    display: flex !important;
    width: calc(100% - 300px) !important;
    max-width: 1024px !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Badge étape */
.plugin_cnct_form_main_form_step {
    background: #D52267 0% 0% no-repeat padding-box !important;
    border-radius: 13px !important;
    padding: 3px 10px !important;
    text-align: center !important;
    font: normal normal 600 14px/20px Segoe UI !important;
    letter-spacing: 0px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
}

/* Titre du formulaire */
.plugin_cnct_form_main_form_title {
    display: block !important;
    text-align: center !important;
    font: normal normal bold 42px/60px Segoe UI !important;
    letter-spacing: 0px !important;
    color: #0F738A !important;
}

/* Container des champs */
.plugin_cnct_form_main_form_step_data {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
    gap: 20px !important;
}

/* Blocs pleine largeur */
.plugin_cnct_form_main_form_step_data_input_text_bloc[style*="width: 100%"],
.plugin_cnct_form_main_form_step_data_input_text_bloc.full-width {
    width: 100% !important;
}

/* Blocs normaux (2 colonnes) */
.plugin_cnct_form_main_form_step_data_input_text_bloc {
    display: flex !important;
    width: calc(50% - 40px) !important;
    flex-direction: column !important;
    padding: 15px !important;
}

.plugin_cnct_form_main_form_step_data_input_text_bloc_label {
    text-align: left !important;
    font: normal normal 600 18px/26px Segoe UI !important;
    letter-spacing: 0px !important;
    color: #000000 !important;
}

.plugin_cnct_form_main_form_step_data_input_text_bloc_input {
    background: #FFFFFF 0% 0% no-repeat padding-box !important;
    border: 1px solid #BCBCBC !important;
    border-radius: 33px !important;
    height: 60px !important;
    margin-top: 12px !important;
    text-indent: 20px !important;
}

/* Select */
select.plugin_cnct_form_main_form_step_data_input_text_bloc_input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10L6 8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Checkbox/Radio Grid */
.cnct-checkbox-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 1.5rem !important;
    margin-top: 12px !important;
}

.cnct-checkbox-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
}

.cnct-checkbox-item input[type="checkbox"],
.cnct-checkbox-item input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Checkbox style (carré) */
.cnct-checkbox-item input[type="checkbox"] + .cnct-checkbox-custom {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 2px solid #BCBCBC !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}

.cnct-checkbox-item input[type="checkbox"]:checked + .cnct-checkbox-custom {
    background: #0F738A !important;
    border-color: #0F738A !important;
}

.cnct-checkbox-item input[type="checkbox"]:checked + .cnct-checkbox-custom::after {
    content: '' !important;
    width: 6px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) translate(-1px, -1px) !important;
}

/* Radio style (rond) */
.cnct-checkbox-item input[type="radio"] + .cnct-checkbox-custom {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 2px solid #BCBCBC !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}

.cnct-checkbox-item input[type="radio"]:checked + .cnct-checkbox-custom {
    background: #0F738A !important;
    border-color: #0F738A !important;
}

.cnct-checkbox-item input[type="radio"]:checked + .cnct-checkbox-custom::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: 50% !important;
}

/* Champs conditionnels "Autre" - Cachés par défaut */
.cnct-autre-type-field,
.cnct-autre-field {
    display: none !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* Classe pour afficher les champs conditionnels */
.cnct-autre-type-field.visible,
.cnct-autre-field.visible {
    display: flex !important;
}

.cnct-autre-type-field input,
.cnct-autre-field textarea {
    height: 102px !important;
    background: #FFFFFF 0% 0% no-repeat padding-box !important;
    border: 1px solid #BCBCBC !important;
    border-radius: 33px !important;
    padding: 15px 20px !important;
    resize: vertical !important;
}

/* Upload Zone */
.cnct-upload-zone {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    cursor: pointer !important;
    margin-top: 12px !important;
}

.cnct-upload-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    background: #D3EEF7 !important;
    border: 2px solid #0F738A !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    color: #0F738A !important;
    transition: all 0.2s ease !important;
}

.cnct-upload-zone:hover .cnct-upload-icon {
    background: #0F738A !important;
    color: #FFFFFF !important;
}

.cnct-upload-text {
    font: normal normal 600 16px/24px Segoe UI !important;
    color: #333344 !important;
}

.cnct-file-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

/* Boutons */
.cnct-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 40px !important;
    font: normal normal 600 16px/24px Segoe UI !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 33px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 180px !important;
}

.cnct-btn-primary {
    background: #0F738A !important;
    color: #FFFFFF !important;
}

.cnct-btn-primary:hover {
    background: #0c5a6c !important;
}

.cnct-btn-secondary {
    background: transparent !important;
    color: #0F738A !important;
    border: 2px solid #0F738A !important;
}

.cnct-btn-secondary:hover {
    background: #D3EEF7 !important;
}

/* Étapes */
.cnct-step {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.cnct-step.active {
    display: flex !important;
}

.cnct-step:not(.active) {
    display: none !important;
}

/* Confirmation */
.plugin_cnct_confirmation {
    text-align: center !important;
    padding: 40px !important;
    background: #FFFFFF !important;
    border-radius: 36px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    margin-top: 40px !important;
    width: 100% !important;
    max-width: 600px !important;
}

.plugin_cnct_confirmation_icon {
    margin-bottom: 24px !important;
    font-size: 48px !important;
    color: #10b981 !important;
}

.plugin_cnct_confirmation_title {
    font: normal normal bold 32px/48px Segoe UI !important;
    color: #333344 !important;
    margin-bottom: 16px !important;
}

.plugin_cnct_confirmation_text {
    font: normal normal normal 18px/28px Segoe UI !important;
    color: #666666 !important;
    margin-bottom: 32px !important;
}

.plugin_cnct_reference {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    background: #D3EEF7 !important;
    border: 2px dashed #0F738A !important;
    border-radius: 20px !important;
    padding: 20px 40px !important;
    margin-bottom: 32px !important;
}

.plugin_cnct_reference_label {
    font: normal normal 600 14px/20px Segoe UI !important;
    text-transform: uppercase !important;
    color: #666666 !important;
    letter-spacing: 0.5px !important;
}

.plugin_cnct_reference_value {
    font: normal normal bold 28px/40px Segoe UI !important;
    color: #0F738A !important;
    font-family: monospace !important;
}

.plugin_cnct_confirmation_actions {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .plugin_cnct_form_main {
        padding: 20px !important;
    }

    .plugin_cnct_form_main_step {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    .plugin_cnct_form_main_form {
        width: 100% !important;
        padding-left: 0 !important;
        min-height: auto !important;
    }

    .plugin_cnct_form_main_form_sized {
        width: 100% !important;
        max-width: 100% !important;
    }

    .plugin_cnct_form_main_form_title {
        font-size: 32px !important;
        line-height: 48px !important;
    }

    .plugin_cnct_form_main_form_step_data {
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .plugin_cnct_form_main {
        padding: 15px !important;
    }

    .plugin_cnct_form_main_form_step_data_input_text_bloc {
        width: 100% !important;
        padding: 15px !important;
    }

    .plugin_cnct_form_main_form_step_data_input_text_bloc_input {
        height: 50px !important;
    }

    .cnct-checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    .cnct-btn {
        width: 100% !important;
        min-width: auto !important;
    }

    .cnct-upload-zone {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* Classe pour masquer les champs conditionnels */
.hidden {
    display: none !important;
}