/*
* Form Styles
* Structure et styles pour tous les formulaires de l'application
*/

/*
* Variables globales reprises de main.css
*/
:root {
    /* Form specific variables */
    --form-transition: 0.3s;
    --form-label-color: #888;
    --form-label-focused-color: var(--color-secondary-hover);
    --form-error-color: #dc2626;
    --form-success-color: #059669;
}

/*
* Structure principale du formulaire
*/
.form {
    background-color: var(--color-light);
    padding: 0;
    border-radius: var(--radius-btn);
    margin: var(--spacing-section-y) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-form-input);
}

.form.form-nobackground {
    background-color: transparent;
    margin: 0;
}

.form.form-clean {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0;
}

.form.form-clean .form-group {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.form.form-padding {
    padding: var(--spacing-section);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-section) / 2);
    background-color: var(--color-white);
    padding: var(--spacing-section-x) var(--spacing-section-y);
    border-radius: var(--radius-btn);
}

.form-group .info-block:first-child h2 {
    margin-top: 0;
}

.form-group.form-group-subgroup {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing-section) / 3);
    padding: var(--spacing-form-item) !important;
    border-radius: var(--radius-btn);
    /* background: linear-gradient(to bottom, #f8f9fa, var(--color-white)) !important; */
    box-shadow: inset 0 8px 16px -8px rgba(0, 0, 0, 0.1);
}

/* Ajout PPE: style pour les sous-groupes de formulaire */
.form.form-clean .form-group-subgroup {
    background: var(--color-white) !important;
    padding: var(--spacing-section);
    border-radius: var(--radius-btn);
}

/*
* Form paragraph elements - regroupement des éléments textuels
*/
.form-group-paragraph {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.form-group-label {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--color-secondary);
}

.form-group-text {
    color: #6b7280;
    margin: 0 0 16px;
    font-size: var(--font-size-label);
    line-height: 1.4;
}

/*
* Structure des éléments de formulaire
*/
.form-group-items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-section) / 3);
    margin: 10px 0;
}

.form-group-item {
    position: relative;
    padding: var(--spacing-form-item);
    background-color: var(--color-form-item-bg);
    border-radius: var(--radius-btn);
}

.form-group-item-icon {
    position: absolute;
    left: calc(var(--spacing-form-item-left) + 10px);
    top: 33px;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 16px;
}

.form-group-item-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--color-secondary-hover);
}

.form-group-item-icon img {
    width: auto;
    height: 25px;
    filter: brightness(0) invert(0);
}

/*
* Styles pour les champs input
*/
.form-group-item input {
    width: 100%;
    padding: var(--spacing-input);
    padding-top: 15px;
    padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 6px);
    padding-bottom: 5px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    font-size: var(--font-size-label);
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    color: var(--color-secondary);
    /* Par défaut, décalage pour icône */
}

/* Formulaires sans icône - réduction du padding */
.form-group-item:not(:has(.form-group-item-icon)) input {
    padding-left: var(--spacing-input);
}

.form-group-item input[readonly] {
    color: #b9b9b9;
    cursor: default;
}

.form-group-item input[readonly]:focus {
    outline: none;
}

/*
* Styles pour les champs textarea
*/
.form-group-item textarea {
    width: 100%;
    padding: var(--spacing-input);
    padding-top: 15px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    font-size: var(--font-size-label);
    font-weight: normal;
    outline: none;
    box-sizing: border-box;
    color: var(--color-secondary);
    resize: vertical;
    min-height: 260px;
    font-family: "Funnel Display", sans-serif;
    /* Par défaut, décalage pour icône */
    padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 2px);
}

/* Formulaires sans icône - réduction du padding */
.form-group-item:not(:has(.form-group-item-icon)) textarea {
    padding-left: var(--spacing-input);
}

/*
* Styles pour les champs select
*/
.form-group-item select {
    width: 100%;
    padding: var(--spacing-input);
    padding-top: 25px;
    padding: var(--spacing-input);
    padding-top: 15px;
    padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 6px);
    padding-bottom: 5px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    font-size: var(--font-size-label);
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    color: var(--color-secondary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300473A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
    /* padding-right: 50px; */
    /* Par défaut, décalage pour icône */
    /* padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 0px); */
    /* Force la couleur verte foncée pour les états focus et sélection sur mobile */
    accent-color: var(--color-secondary);
}

/* Force la couleur verte foncée pour les select sur mobile */
@media (max-width: 768px) {
    .form-group-item select {
        accent-color: var(--color-secondary) !important;
        color-scheme: light;
    }

    .form-group-item select:focus {
        border-color: var(--color-secondary) !important;
        outline-color: var(--color-secondary) !important;
        box-shadow: 0 0 0 2px rgba(0, 71, 58, 0.2) !important;
    }

    .form-group-item select option:checked,
    .form-group-item select option:hover,
    .form-group-item select option:focus {
        background-color: var(--color-secondary) !important;
        color: white !important;
    }
}

/* Formulaires sans icône - réduction du padding */
.form-group-item:not(:has(.form-group-item-icon)) select {
    padding-left: var(--spacing-input);
}

.form-group-item select option {
    background-color: var(--color-white);
    color: var(--color-secondary);
    font-size: var(--font-size-label);
    padding: 10px;
    border: none;
}

.form-group-item select option:hover,
.form-group-item select option:focus {
    background-color: var(--color-bg);
}

.form-group-item select option[value=""] {
    color: #888;
    font-style: italic;
}

/*
* Labels - styles de base (compatibilité avec formulaires existants ET nouveaux)
*/
.form-label,
.form-group-item label:not(.checkbox-item label) {
    position: absolute;
    font-size: var(--font-size-label);
    color: var(--form-label-color);
    pointer-events: none;
    transition: all var(--form-transition) ease;
    background-color: var(--color-form-item-bg);
    /* padding: 0 4px; */
    z-index: 2;
}

/*
* Labels pour les champs input (alignement avec icône par défaut)
*/
.form-label-input,
.form-group-item input+label {
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 20px);
    top: 33px;
    transform: translateY(-50%);
}

/* Formulaires sans icône - repositionnement du label */
.form-group-item:not(:has(.form-group-item-icon)) .form-label-input,
.form-group-item:not(:has(.form-group-item-icon)) input+label {
    left: calc(var(--spacing-input) + 12px);
}

/* États focused/filled pour input (alignement avec icône par défaut) */
.form-group-item input:focus+.form-label-input,
.form-group-item input:not(:placeholder-shown)+.form-label-input,
.form-group-item.has-content .form-label-input,
.form-group-item input:focus+label,
.form-group-item input:not(:placeholder-shown)+label,
.form-group-item.has-content input+label {
    top: 0px;
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 20px);
    transform: translateY(100%);
    font-size: var(--font-site-small);
    color: var(--form-label-focused-color);
}

/* États focused pour formulaires sans icône */
.form-group-item:not(:has(.form-group-item-icon)) input:focus+.form-label-input,
.form-group-item:not(:has(.form-group-item-icon)) input:not(:placeholder-shown)+.form-label-input,
.form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-input,
.form-group-item:not(:has(.form-group-item-icon)) input:focus+label,
.form-group-item:not(:has(.form-group-item-icon)) input:not(:placeholder-shown)+label,
.form-group-item:not(:has(.form-group-item-icon)).has-content input+label {
    left: calc(var(--spacing-input) + 15px);
}

/*
* Labels pour les champs textarea (alignement avec icône par défaut)
*/
.form-label-textarea,
.form-group-item textarea+label {
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 17px);
    top: 33px;
    transform: translateY(-50%);
}

/* Formulaires sans icône - repositionnement du label */
.form-group-item:not(:has(.form-group-item-icon)) .form-label-textarea,
.form-group-item:not(:has(.form-group-item-icon)) textarea+label {
    left: calc(var(--spacing-input) + 12px);
}

/* États focused/filled pour textarea (alignement avec icône par défaut) */
.form-group-item textarea:focus+.form-label-textarea,
.form-group-item textarea:not(:placeholder-shown)+.form-label-textarea,
.form-group-item.has-content .form-label-textarea,
.form-group-item textarea:focus+label,
.form-group-item textarea:not(:placeholder-shown)+label,
.form-group-item.has-content textarea+label {
    top: 6px;
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 15px);
    transform: translateY(100%);
    font-size: var(--font-site-small);
    color: var(--form-label-focused-color);
}

/* États focused pour formulaires sans icône */
.form-group-item:not(:has(.form-group-item-icon)) textarea:focus+.form-label-textarea,
.form-group-item:not(:has(.form-group-item-icon)) textarea:not(:placeholder-shown)+.form-label-textarea,
.form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-textarea,
.form-group-item:not(:has(.form-group-item-icon)) textarea:focus+label,
.form-group-item:not(:has(.form-group-item-icon)) textarea:not(:placeholder-shown)+label,
.form-group-item:not(:has(.form-group-item-icon)).has-content textarea+label {
    left: calc(var(--spacing-input) + 15px);
}

/*
* Labels pour les champs select (alignement avec icône par défaut)
*/
.form-label-select,
.form-group-item select+label {
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 22px);
    top: 49px;
    transform: translateY(-50%);
}

/* Formulaires sans icône - repositionnement du label */
.form-group-item:not(:has(.form-group-item-icon)) .form-label-select,
.form-group-item:not(:has(.form-group-item-icon)) select+label {
    left: calc(var(--spacing-input) + 12px);
}

/* États focused/filled pour select (alignement avec icône par défaut) */
.form-group-item select:focus+.form-label-select,
.form-group-item select:valid+.form-label-select,
.form-group-item select:not([value=""])+.form-label-select,
.form-group-item.has-content .form-label-select,
.form-group-item select:focus+label,
.form-group-item select:valid+label,
.form-group-item select:not([value=""])+label,
.form-group-item.has-content select+label {
    top: 0;
    left: calc(var(--spacing-form-item-left) + var(--icon-size) + 20px);
    transform: translateY(100%);
    font-size: var(--font-site-small);
    color: var(--form-label-focused-color);
}

/* États focused pour formulaires sans icône */
.form-group-item:not(:has(.form-group-item-icon)) select:focus+.form-label-select,
.form-group-item:not(:has(.form-group-item-icon)) select:valid+.form-label-select,
.form-group-item:not(:has(.form-group-item-icon)) select:not([value=""])+.form-label-select,
.form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-select,
.form-group-item:not(:has(.form-group-item-icon)) select:focus+label,
.form-group-item:not(:has(.form-group-item-icon)) select:valid+label,
.form-group-item:not(:has(.form-group-item-icon)) select:not([value=""])+label,
.form-group-item:not(:has(.form-group-item-icon)).has-content select+label {
    left: calc(var(--spacing-input) + 10px);
}

.form-actions {
    margin-top: var(--spacing-form-item);
}

.form-actions-row {
    display: flex;
    gap: var(--spacing-form-item);
    flex-wrap: nowrap;
}

.form-actions-column {
    display: flex;
    gap: var(--spacing-form-item);
    flex-wrap: nowrap;
    flex-direction: row;
    /* Défaut explicite */
}

.form-actions-column.form-actions-column-2-1 {
    flex-direction: row;
    align-items: stretch;
}

.form-actions-column.form-actions-column-2-1>*:first-child {
    flex: 2;
    /* 2/3 de la largeur avec flex unitless */
}

.form-actions-column.form-actions-column-2-1>*:last-child {
    flex: 1;
    /* 1/3 de la largeur avec flex unitless */
}

/*
* Checkbox styles
*/
.checkbox-item {
    display: flex;
    align-items: center;
    height: 32px;
    /* margin-top: 10px; */
}

.checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-item label {
    padding-left: 38px;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-label);
    display: inline-block;
    color: var(--color-secondary);
}

.checkbox-item label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #abb6b2;
    border-radius: 4px;
    transition: all var(--form-transition);
}

.checkbox-item input[type="checkbox"]:checked+label:before {
    background-color: var(--color-secondary);
}

.checkbox-item input[type="checkbox"]:checked+label:after {
    content: '✓';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #fff;
}

/*
* Radiobox styles (même design que checkbox mais comportement radio)
*/
.radiobox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.radiobox-item {
    display: flex;
    align-items: center;
    height: 32px;
    background: var(--color-form-item-bg);
    padding: var(--spacing-form-item);
    border-radius: var(--radius-btn);
}

.radiobox-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radiobox-item label {
    padding-left: 40px;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-label);
    display: inline-block;
    color: var(--color-secondary);
}

.radiobox-item label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-light);
    border-radius: 4px;
    transition: all var(--form-transition);
}

.radiobox-item input[type="radio"]:checked+label:before {
    background-color: var(--color-secondary);
}

.radiobox-item input[type="radio"]:checked+label:after {
    content: '✓';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #fff;
}

/*
* Radiobox content styles
*/
.radiobox-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radiobox-title {
    font-weight: bold;
    color: var(--color-secondary);
    font-size: var(--font-size-label);
}

.radiobox-description {
    font-size: var(--font-size-label-sm);
    color: var(--form-label-color);
    line-height: 1.3;
}

/*
* Purchase summary styles
*/
.purchase-summary {
    margin-top: 0;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    padding-bottom: 0;
    font-size: var(--font-size-label);
}

.summary-line.summary-total {
    font-weight: bold;
}

.summary-label {
    color: var(--color-secondary);
}

.summary-value {
    color: var(--color-secondary);
    font-weight: 500;
}

.summary-total .summary-value {
    font-weight: bold;
}

/*
* Form buttons container
*/
.form-buttons {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-section) / 1.4);
    justify-content: center;
    padding: var(--spacing-section-x) var(--spacing-section-y);
    /* padding-top: 0; */
}

/*
* Form validation et erreurs
*/
.form-error {
    font-size: var(--font-size-label-sm);
    color: var(--form-error-color);
    margin-top: 5px;
    display: none;
}

.form-group-item.has-error .form-error {
    display: block;
}

.form-group-item.has-error input,
.form-group-item.has-error textarea,
.form-group-item.has-error select {
    border: 1px solid var(--form-error-color);
}

/*
* Textarea avec compteur
*/
.form-group-item.textarea-with-counter {
    position: relative;
}

.form-group-item.textarea-with-counter .character-counter {
    position: absolute;
    bottom: 24px;
    right: 32px;
    font-size: 11px;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

.form-group-item.textarea-with-counter .character-counter.warning {
    color: #f59e0b;
}

.form-group-item.textarea-with-counter .character-counter.error {
    color: var(--form-error-color);
}

/*
* Password toggle
*/
.password-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: color 0.2s ease;
    user-select: none;
    background-image: url('../images/icons/eye-open.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(52%) sepia(0%) saturate(0%) hue-rotate(233deg) brightness(95%) contrast(87%);
}

.password-toggle:hover {
    filter: brightness(0) saturate(100%) invert(17%) sepia(26%) saturate(1677%) hue-rotate(133deg) brightness(93%) contrast(99%);
}

.password-toggle.hidden {
    background-image: url('../images/icons/eye-close.svg');
}

.form-group-item.has-password-toggle input {
    padding-right: 60px;
}

/*
* Password criteria
*/
.password-criteria {
    list-style: none;
    padding: 0 10px;
    margin: 0;
    /* margin-top: -10px; */
    font-size: var(--font-size-label-sm);
}

.password-criteria li {
    color: var(--form-label-color);
    margin-bottom: 4px;
    transition: color 0.2s;
    position: relative;
    padding-left: 20px;
}

.password-criteria li.valid {
    color: #2e7d32;
    font-weight: bold;
}

.password-criteria li::before {
    content: "✗";
    position: absolute;
    left: 0;
    /* color: #b33a3a; */
    font-weight: bold;
}

.password-criteria li.valid::before {
    content: "✓";
    color: #2e7d32;
}

.password-match-message {
    padding: 0 10px;
    margin: 0px 0 0 0;
    font-size: var(--font-size-label-sm);
}

.password-match-message .match-valid,
.password-match-message .match-invalid {
    font-weight: 500;
    padding: 4px 0;
    display: block;
}

/*
* Responsive adaptations
*/
@media (max-width: 1399px) {

    .form-actions-row {
        flex-wrap: wrap;
    }

    .form-actions-column {
        flex-wrap: wrap;
    }

    .form-group-item-icon img {
        height: 24px;
    }

    .form-group-item-icon {
        left: calc(var(--spacing-form-item-left) - -10px);
        top: 33px;
    }

    /* Responsive - ajustements pour formulaires avec icônes (par défaut) */
    .form-group-item input {
        padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 15px);
        padding-top: 22px;
    }

    .form-group-item textarea {
        padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 15px);
        padding-top: 22px;
    }

    .form-group-item select {
        background-size: 14px;
        background-position: right 15px center;
        padding-left: calc(var(--spacing-form-item-left) + var(--icon-size) + 15px);
        padding-top: 22px;
    }

    /* Responsive - formulaires sans icône */
    .form-group-item:not(:has(.form-group-item-icon)) input {
        padding-left: var(--spacing-input);
        padding-top: 22px;
    }

    .form-group-item:not(:has(.form-group-item-icon)) textarea {
        padding-left: var(--spacing-input);
        padding-top: 33px;
    }

    .form-group-item:not(:has(.form-group-item-icon)) select {
        padding-left: var(--spacing-input);
        padding-top: 22px;
    }

    /* Labels responsive - input (alignement avec icône par défaut) */
    .form-label-input,
    .form-group-item input+label {
        top: 33px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 24px);
    }

    /* Labels responsive - formulaires sans icône */
    .form-group-item:not(:has(.form-group-item-icon)) .form-label-input,
    .form-group-item:not(:has(.form-group-item-icon)) input+label {
        left: calc(var(--spacing-input) + 12px);
        top: 33px;
    }

    .form-group-item input:focus+.form-label-input,
    .form-group-item input:not(:placeholder-shown)+.form-label-input,
    .form-group-item.has-content .form-label-input,
    .form-group-item input:focus+label,
    .form-group-item input:not(:placeholder-shown)+label,
    .form-group-item.has-content input+label {
        top: 1px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 24px);
        font-size: var(--font-size-label-sm);
    }

    /* Fallback focused pour formulaires sans icône (responsive) */
    .form-group-item:not(:has(.form-group-item-icon)) input:focus+.form-label-input,
    .form-group-item:not(:has(.form-group-item-icon)) input:not(:placeholder-shown)+.form-label-input,
    .form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-input,
    .form-group-item:not(:has(.form-group-item-icon)) input:focus+label,
    .form-group-item:not(:has(.form-group-item-icon)) input:not(:placeholder-shown)+label,
    .form-group-item:not(:has(.form-group-item-icon)).has-content input+label {
        left: calc(var(--spacing-input) + 4px);
    }

    /* Labels responsive - textarea (alignement avec icône par défaut) */
    .form-label-textarea,
    .form-group-item textarea+label {
        top: 33px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 24px);
    }

    /* Labels responsive - formulaires sans icône */
    .form-group-item:not(:has(.form-group-item-icon)) .form-label-textarea,
    .form-group-item:not(:has(.form-group-item-icon)) textarea+label {
        left: calc(var(--spacing-input) + 12px);
        top: 33px;
    }

    .form-group-item textarea:focus+.form-label-textarea,
    .form-group-item textarea:not(:placeholder-shown)+.form-label-textarea,
    .form-group-item.has-content .form-label-textarea,
    .form-group-item textarea:focus+label,
    .form-group-item textarea:not(:placeholder-shown)+label,
    .form-group-item.has-content textarea+label {
        top: 4px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 24px);
        font-size: var(--font-size-label-sm);
    }

    /* Fallback focused pour formulaires sans icône (responsive) */
    .form-group-item:not(:has(.form-group-item-icon)) textarea:focus+.form-label-textarea,
    .form-group-item:not(:has(.form-group-item-icon)) textarea:not(:placeholder-shown)+.form-label-textarea,
    .form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-textarea,
    .form-group-item:not(:has(.form-group-item-icon)) textarea:focus+label,
    .form-group-item:not(:has(.form-group-item-icon)) textarea:not(:placeholder-shown)+label,
    .form-group-item:not(:has(.form-group-item-icon)).has-content textarea+label {
        left: calc(var(--spacing-input) + 9px);
        font-size: var(--font-size-label-sm);
    }

    /* Labels responsive - select (alignement avec icône par défaut) */
    .form-label-select,
    .form-group-item select+label {
        top: 33px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 8px);
    }

    /* Labels responsive - formulaires sans icône */
    .form-group-item:not(:has(.form-group-item-icon)) .form-label-select,
    .form-group-item:not(:has(.form-group-item-icon)) select+label {
        left: calc(var(--spacing-input) + 12px);
        top: 33px;
    }

    .form-group-item select:focus+.form-label-select,
    .form-group-item select:valid+.form-label-select,
    .form-group-item select:not([value=""])+.form-label-select,
    .form-group-item.has-content .form-label-select,
    .form-group-item select:focus+label,
    .form-group-item select:valid+label,
    .form-group-item select:not([value=""])+label,
    .form-group-item.has-content select+label {
        top: 1px;
        left: calc(var(--spacing-form-item-left) + var(--icon-size) + 24px);
        font-size: var(--font-size-label-sm);
    }

    /* Fallback focused pour formulaires sans icône (responsive) */
    .form-group-item:not(:has(.form-group-item-icon)) select:focus+.form-label-select,
    .form-group-item:not(:has(.form-group-item-icon)) select:valid+.form-label-select,
    .form-group-item:not(:has(.form-group-item-icon)) select:not([value=""])+.form-label-select,
    .form-group-item:not(:has(.form-group-item-icon)).has-content .form-label-select,
    .form-group-item:not(:has(.form-group-item-icon)) select:focus+label,
    .form-group-item:not(:has(.form-group-item-icon)) select:valid+label,
    .form-group-item:not(:has(.form-group-item-icon)) select:not([value=""])+label,
    .form-group-item:not(:has(.form-group-item-icon)).has-content select+label {
        left: calc(var(--spacing-input) + 4px);
    }
}

/*
* Responsive mobile - colonnes en mode vertical
*/
@media (max-width: 768px) {
    .form-actions-column.form-actions-column-2-1 {
        flex-direction: column;
    }

    .form-actions-column.form-actions-column-2-1>*:first-child,
    .form-actions-column.form-actions-column-2-1>*:last-child {
        flex: 1 1 100%;
    }
}

/*
* Styles spécifiques pour Stripe Elements
* Masque les labels tout en gardant les placeholders visibles
*/

/* Masquer tous les labels dans les formulaires de paiement Stripe */
.StripeElement label,
#stripe-form label,
.stripe-payment-form label,
.payment-form label,
.billing-form label,
[data-stripe="true"] label,
.form-group-item:has(.StripeElement) label {
    display: none !important;
}

/* Masquer l'icône de carte de crédit dans les formulaires Stripe */
#stripe-payment-form .form-group-item-icon,
.stripe-payment-form .form-group-item-icon,
.payment-form .form-group-item-icon,
.billing-form .form-group-item-icon,
[data-stripe="true"] .form-group-item-icon,
.form-group-item:has(.StripeElement) .form-group-item-icon {
    display: none !important;
}

/* Masquer spécifiquement l'icône credit-card.svg */
.form-group-item-icon img[src*="credit-card.svg"],
.form-group-item-icon img[src*="credit-card"],
.form-group-item-icon[src*="credit-card"] {
    display: none !important;
}

/* S'assurer que les éléments Stripe ont assez d'espace sans les labels */
.StripeElement,
#stripe-form .form-group-item,
.stripe-payment-form .form-group-item,
.payment-form .form-group-item,
.billing-form .form-group-item,
[data-stripe="true"] .form-group-item {
    padding-top: var(--spacing-form-item);
    padding-bottom: var(--spacing-form-item);
}

/* Ajuster les éléments Stripe pour un meilleur rendu sans labels et sans icônes */
.StripeElement input,
.StripeElement iframe,
#stripe-form input,
.stripe-payment-form input,
.payment-form input,
.billing-form input,
[data-stripe="true"] input {
    padding-top: var(--spacing-input) !important;
    padding-bottom: var(--spacing-input) !important;
    padding-left: var(--spacing-input) !important;
}

/* Ajuster le padding des éléments Stripe sans icônes */
#stripe-card-number,
#stripe-card-expiry,
#stripe-card-cvc,
.StripeElement {
    padding-left: var(--spacing-input) !important;
}

/* Styles spécifiques pour les éléments Stripe intégrés */
.StripeElement {
    padding: var(--spacing-input);
    background-color: var(--color-form-item-bg);
    border-radius: var(--radius-btn);
    transition: box-shadow 0.3s ease;
}

.StripeElement--focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.StripeElement--invalid {
    box-shadow: 0 0 0 2px var(--form-error-color);
}

/* Container spécifique pour les champs de carte */
#card-element,
#card-number-element,
#card-expiry-element,
#card-cvc-element,
.stripe-card-element {
    min-height: 40px;
    padding: var(--spacing-input);
    background-color: var(--color-form-item-bg);
    border-radius: var(--radius-btn);
    border: none;
    font-size: var(--font-size-label);
}

/* Messages d'erreur Stripe */
#card-errors,
.stripe-errors,
.payment-errors {
    color: var(--form-error-color);
    font-size: var(--font-size-label-sm);
    margin-top: 8px;
    min-height: 20px;
}

/* Layout pour les champs Stripe - ligne avec expiry et CVC côte à côte */
.form-group-row {
    display: flex;
    gap: var(--spacing-form-item);
    width: 100%;
}

.form-group-item-half {
    flex: 1;
    min-width: 0;
    /* Permet la flexibilité */
}

/* Styles spécifiques pour les IDs Stripe */
#stripe-card-number,
#stripe-card-expiry,
#stripe-card-cvc {
    padding: var(--spacing-input);
    background-color: var(--color-form-item-bg);
    border-radius: var(--radius-btn);
    border: none;
    font-size: var(--font-size-label);
}

/* Responsive pour Stripe */
@media (max-width: 1399px) {

    .StripeElement,
    #card-element,
    #card-number-element,
    #card-expiry-element,
    #card-cvc-element,
    #stripe-card-number,
    #stripe-card-expiry,
    #stripe-card-cvc {
        padding: var(--spacing-input);
        min-height: 35px;
    }
}

@media (max-width: 768px) {
    .form-group-row {
        flex-direction: column;
        gap: calc(var(--spacing-form-item) / 2);
    }

    .form-group-item-half {
        flex: none;
        width: 100%;
    }
}