/**
 * CustomSelect Component - Base Styles
 *
 * Ces styles ne s'appliquent qu'aux éléments custom-select créés par JS.
 * Ils ne doivent PAS affecter les selects natifs.
 *
 * @package Disposeo
 */

/* ==========================================================================
   CSS Variables (defaults, can be overridden per context)
   ========================================================================== */
:root {
    --cs-height: 59px;
    --cs-padding-x: 20px;
    --cs-padding-left: 16px;
    --cs-border-color: #E9E9E9;
    --cs-border-color-hover: #aaa;
    --cs-border-color-focus: #E75A0D;
    --cs-border-color-invalid: #E75A0D;
    --cs-border-radius: 10px;
    --cs-bg: #fff;
    --cs-text-color: #140003;
    --cs-placeholder-color: #6C6C6C;
    --cs-font-size: 16px;
    --cs-font-family: 'Poppins', sans-serif;
    --cs-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --cs-dropdown-max-height: 250px;
    --cs-option-padding: 12px 16px;
    --cs-option-hover-bg: #f5f5f5;
    --cs-focus-shadow: 0 0 0 3px rgba(231, 90, 13, 0.1);
    --cs-z-index: 1000;
}

/* ==========================================================================
   Native Select Hidden (only when wrapped by custom-select)
   ========================================================================== */
.gf-custom-select > select.custom-select-native,
.custom-select > select.custom-select-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
}