/* Uniform form elements height and alignment */

/* Standard height for all form elements */
:root {
    --form-element-height: 32px;
    --form-element-padding: 5px;
    --form-element-font-size: 12px;
    --form-element-line-height: 22px;
}

/* Apply uniform height to all input types */
#informations input[type="text"],
#informations input[type="email"],
#informations input[type="tel"],
#informations input[type="numeric"],
#informations input[type="number"],
#informations input[type="password"],
#informations input[type="date"],
#informations select,
#rappel input[type="text"],
#rappel select {
    height: var(--form-element-height) !important;
    padding: var(--form-element-padding) !important;
    font-size: var(--form-element-font-size) !important;
    line-height: var(--form-element-line-height) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Select2 container alignment */
.select2-container {
    margin: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Specific alignment fix for allobut template */
#code_postal + .select2-container {
    vertical-align: top !important;
    margin-top: -2px !important;
}

/* Fix magasin field alignment in allobut template - more specific selector */
#informations input#magasin {
    margin-top: -2px !important;
    vertical-align: top !important;
}

/* Select2 single selection to match other inputs */
.select2-container--default .select2-selection--single {
    height: var(--form-element-height) !important;
    padding: var(--form-element-padding) !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-size: var(--form-element-font-size) !important;
    line-height: var(--form-element-line-height) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Select2 rendered text alignment */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: var(--form-element-line-height) !important;
    color: #000 !important;
}

/* Select2 arrow positioning */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--form-element-height) - 2px) !important;
    top: 1px !important;
}

/* Select2 dropdown width */
.select2-container--default .select2-selection--single {
    width: 100% !important;
}

/* Select2 dropdown options */
.select2-results__option {
    padding: 5px 10px !important;
    font-size: var(--form-element-font-size) !important;
}

/* Select2 hover state */
.select2-results__option--highlighted {
    background-color: #f12f2f !important;
}

/* Select2 focus state */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #ccc !important;
    outline: none !important;
}

/* Select2 placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999 !important;
    line-height: var(--form-element-line-height) !important;
}

/* Select2 clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 10px !important;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    :root {
        --form-element-height: 36px;
        --form-element-font-size: 15px;
        --form-element-line-height: 26px;
    }
    
    .select2-results__option {
        font-size: 15px !important;
        padding: 8px 10px !important;
    }
}