/* ============================================================================
   Select2 theme — makes the vendored Select2 widget look and feel like the
   app's native `.input` control (see app.css). Applied everywhere a dropdown is
   upgraded to Select2 (class `js-ajax` / `js-select`), in BOTH the back office
   and the public marketing site.

   The back office defines the --re-* design tokens in app.css; the public site
   does not load app.css, so every token below carries a sensible fallback and
   this stylesheet renders correctly on its own.
   ========================================================================== */

/* The rendered box lines up with `.input`: same border, radius, focus ring. */
.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 2.7rem;
    background: #fff;
    border: 1px solid var(--re-border, #e3e7f0);
    border-radius: .75rem;
    padding: .3rem .35rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--re-ink, #151a2d);
    font-size: .95rem;
    line-height: 1.5;
    padding-left: .5rem;
    padding-right: 1.6rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--re-muted, #6b7392);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: .5rem;
}

/* Focus / open state mirrors `.input:focus`. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--re-primary, #4f46e5);
    box-shadow: 0 0 0 3px var(--re-ring, rgba(79, 70, 229, .3));
    outline: none;
}

/* Multi-select chips, for the rare multiple field. */
.select2-container--default .select2-selection--multiple {
    min-height: 2.7rem;
    background: #fff;
    border: 1px solid var(--re-border, #e3e7f0);
    border-radius: .75rem;
    padding: .15rem .3rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--re-primary-soft, #eef2ff);
    border: 1px solid var(--re-border, #e3e7f0);
    color: var(--re-primary-dark, #4338ca);
    border-radius: .5rem;
}

/* Clear (×) button. */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--re-muted, #6b7392);
    font-weight: 700;
    margin-right: .35rem;
    cursor: pointer;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #dc2626;
}

/* Dropdown panel. */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--re-border, #e3e7f0);
    border-radius: .75rem;
    box-shadow: 0 12px 30px rgba(21, 26, 45, .12);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--re-border, #e3e7f0);
    border-radius: .6rem;
    padding: .5rem .6rem;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--re-primary, #4f46e5);
    box-shadow: 0 0 0 3px var(--re-ring, rgba(79, 70, 229, .3));
}

.select2-container--default .select2-results__option {
    padding: .55rem .75rem;
    font-size: .9rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--re-primary, #4f46e5);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--re-primary-soft, #eef2ff);
    color: var(--re-primary-dark, #4338ca);
}

.select2-container--default .select2-results__message {
    color: var(--re-muted, #6b7392);
    font-size: .85rem;
}

/* Width is set per-instance in app-select2.js (full-width for `.input`,
   content-width for compact `!w-auto` controls); never let it overflow. */
.select2-container {
    max-width: 100%;
}

/* Avoid a layout flash before JS upgrades the raw <select>. */
select.js-ajax, select.js-select {
    min-height: 2.7rem;
}