/*
 * Module localisation (plugin ATS) : champ « emplacement + rayon ».
 * Styles de base, neutres : chaque thème surcharge les variables ci-dessous
 * (couleur d'accent, bordure, police) et, au besoin, quelques règles.
 */
.atsloc-ou {
    --atsloc-accent: #333;
    --atsloc-border: #d1d4d4;
    --atsloc-bg: #fff;
    --atsloc-text: #000;
    --atsloc-muted: #757575;
    --atsloc-hover: #f2f2f2;
    --atsloc-font: inherit;
    --atsloc-height: 47px;
    --atsloc-radius: 4px;
    --atsloc-icon: "\e0c8";
    display: inline-flex; align-items: stretch; font-family: var(--atsloc-font);
}
.atsloc-ou-field { position: relative; }
.atsloc-ou-input {
    display: block; box-sizing: border-box; width: 300px; height: var(--atsloc-height); min-height: var(--atsloc-height); max-height: var(--atsloc-height);
    margin: 0; padding: 0 64px 0 8px; line-height: calc(var(--atsloc-height) - 4px); vertical-align: middle;
    border: 2px solid var(--atsloc-border); border-radius: var(--atsloc-radius) 0 0 var(--atsloc-radius); border-right-width: 1px; background: var(--atsloc-bg);
    font-size: 1.2rem; font-weight: 600; font-family: var(--atsloc-font); color: var(--atsloc-text);
}
.atsloc-ou-input:hover, .atsloc-ou-input:focus { border-color: var(--atsloc-accent); outline: none; }
.atsloc-ou-input::placeholder { color: var(--atsloc-muted); opacity: 1; }
.atsloc-ou-input.has-value { color: var(--atsloc-accent); }
.atsloc-ou-field::after {
    content: var(--atsloc-icon); font-family: 'Material Symbols Outlined'; position: absolute; right: 8px; top: calc(var(--atsloc-height) / 2); transform: translateY(-50%);
    color: var(--atsloc-accent); font-size: 1.5rem; pointer-events: none; line-height: 1;
}
.atsloc-ou-clear {
    position: absolute; right: 36px; top: calc(var(--atsloc-height) / 2); transform: translateY(-50%); border: 0; background: transparent;
    color: var(--atsloc-muted); font-size: 1.4rem; line-height: 1; padding: 0 4px; cursor: pointer;
}
.atsloc-ou-clear:hover { color: var(--atsloc-accent); }

/* liste de suggestions, rattachée au body par le script (jamais coupée par un cadre) */
.atsloc-ou-list {
    --atsloc-accent: #333; --atsloc-border: #d1d4d4; --atsloc-muted: #757575; --atsloc-hover: #f2f2f2; --atsloc-font: inherit;
    position: absolute; z-index: 1080; margin: 0; padding: 4px 0; list-style: none;
    background: #fff; border: 2px solid var(--atsloc-border); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto;
    font-family: var(--atsloc-font); text-align: left; color: #000;
}
.atsloc-ou-list li.group { padding: 8px 12px 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--atsloc-muted); }
.atsloc-ou-list li[role="option"] { padding: 8px 12px; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; }
.atsloc-ou-list li[role="option"] small { color: var(--atsloc-muted); font-size: .8rem; }
.atsloc-ou-list li[role="option"].active, .atsloc-ou-list li[role="option"]:hover { background: var(--atsloc-hover); }
.atsloc-ou-list li.empty { padding: 8px 12px; color: var(--atsloc-muted); font-size: .95rem; }

/* rayon accolé à droite de l'emplacement (select2 si présent, select natif sinon) */
.atsloc-rayon { display: flex; align-items: stretch; position: relative; }
/* ancre du menu déroulant du rayon (select2 dropdownParent) : sous le champ, au-dessus du contenu suivant */
.atsloc-rayon-drop { position: absolute; left: 0; right: 0; top: 100%; height: 0; z-index: 1052; }
.atsloc-rayon-drop > .select2-container { width: 100% !important; }
.atsloc-rayon select { min-height: var(--atsloc-height); border: 2px solid var(--atsloc-border); border-left-width: 1px; border-radius: 0 var(--atsloc-radius) var(--atsloc-radius) 0; background: var(--atsloc-bg); font-family: var(--atsloc-font); }
.atsloc-rayon .select2-container--default .select2-selection--single {
    min-height: var(--atsloc-height); height: var(--atsloc-height); border: 2px solid var(--atsloc-border); border-left-width: 1px; border-radius: 0 var(--atsloc-radius) var(--atsloc-radius) 0; padding: 2px 8px; background: var(--atsloc-bg);
}
.atsloc-rayon .select2-container--default .select2-selection--single:hover { border-color: var(--atsloc-accent); }
.atsloc-rayon .select2-container--default.select2-container--disabled .select2-selection--single { background: #f4f4f4; }
.atsloc-rayon .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--atsloc-height) - 6px); padding-left: 0; font-size: 1.1rem; font-weight: 600; font-family: var(--atsloc-font); color: var(--atsloc-text); }
.atsloc-rayon .select2-container--default.select2-container--disabled .select2-selection__rendered { color: #9a9a9a; }
.atsloc-rayon .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--atsloc-height) - 4px); }
.atsloc-rayon .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--atsloc-accent) transparent transparent transparent; }

/* liste insérée dans un conteneur du thème (cfg.listParent) : dans le flux, pleine largeur */
.atsloc-ou-list--inline { position: relative; z-index: auto; left: auto; top: auto; width: 100%; box-shadow: none; }

@media (max-width: 767.98px) {
    .atsloc-ou { display: flex; flex-wrap: wrap; }
    .atsloc-ou-field { flex: 1 1 100%; }
    .atsloc-ou-input { width: 100%; border-radius: var(--atsloc-radius) var(--atsloc-radius) 0 0; border-right-width: 2px; border-bottom-width: 1px; }
    .atsloc-rayon { flex: 1 1 100%; }
    .atsloc-rayon > .select2-container { width: 100% !important; }
    .atsloc-rayon .select2-container--default .select2-selection--single { border-radius: 0 0 var(--atsloc-radius) var(--atsloc-radius); border-left-width: 2px; border-top-width: 1px; }
}