/* ==========================================================================
   elo_withdrawal_extended — Frontend-Styles
   Passt Select2 (v4) an den NOVA/clear Bootstrap-4-Look an.
   Referenzwerte aus: templates/NOVA/themes/clear/sass/_variables.scss
   ---------------------------------------------------------------------------
   --wrb-primary              : #F8BF00   ($primary)
   --wrb-primary-focus        : #fbdb66   (lighten($primary, 20))
   --wrb-input-color          : #525252   ($gray-700 / $gray-dark)
   --wrb-placeholder-color    : #707070   ($gray)
   --wrb-border-color         : #707070   ($input-border-color)
   --wrb-border-radius        : .125rem   ($border-radius)
   --wrb-gray-lighter         : #f5f7fa
   --wrb-gray-medium          : #ebebeb
   --wrb-font-size-base       : 14px
   --wrb-input-padding-y      : 10px
   --wrb-input-padding-x      : 15px
   ========================================================================== */

:root {
    --wrb-primary:           #F8BF00;
    --wrb-primary-focus:     #fbdb66;
    --wrb-input-color:       #525252;
    --wrb-placeholder-color: #707070;
    --wrb-border-color:      #707070;
    --wrb-border-radius:     .125rem;
    --wrb-gray-lighter:      #f5f7fa;
    --wrb-gray-medium:       #ebebeb;
}

/* ---------- Container + Single-Select (Feld selbst) ------------------------ */

.wrb-extended-container .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single.wrb-select2 {
    height:        calc(1.5em + 20px + 2px); /* line-height 1.5 + 2*10px padding + 2*1px border */
    padding:       10px 15px;
    font-size:     14px;
    font-weight:   400;
    line-height:   1.5;
    color:         var(--wrb-input-color);
    background-color: #fff;
    border:        1px solid var(--wrb-border-color);
    border-radius: var(--wrb-border-radius);
    transition:    border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding:     0;
    line-height: 1.5;
    color:       var(--wrb-input-color);
}

.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--wrb-placeholder-color);
}

/* Arrow-Position an NOVA-Custom-Select-Höhe anpassen */
.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top:    0;
    right:  10px;
    width:  20px;
}

.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wrb-border-color) transparent transparent transparent;
}

/* Clear-Button */
.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 20px;
    color:        var(--wrb-placeholder-color);
    font-weight:  400;
}

.wrb-extended-container .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--wrb-primary);
}

/* ---------- Button-Spinner ------------------------------------------------- */

.wrb-extended-container .wrb-btn-spinner {
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border: .14em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: text-bottom;
    animation: wrb-btn-spin .65s linear infinite;
}

@keyframes wrb-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Focus / Open (NOVA primary-Farbe) ----------------------------- */

.wrb-extended-container .select2-container--default.select2-container--focus .select2-selection--single,
.wrb-extended-container .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: var(--wrb-primary);
    outline:      0;
    box-shadow:   0 0 0 .2rem rgba(248, 191, 0, .25);
}

.wrb-extended-container .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--wrb-border-color) transparent;
}

/* ---------- Dropdown ------------------------------------------------------- */

.select2-container--default .select2-dropdown.wrb-select2-dropdown,
.wrb-extended-container + .select2-container--default .select2-dropdown,
body > .select2-container--default .select2-dropdown {
    border:        1px solid var(--wrb-primary);
    border-radius: var(--wrb-border-radius);
    box-shadow:    0 1px 12px rgba(0, 0, 0, .16);
    background-color: #fff;
}

.select2-container--default .select2-results__option {
    padding:     8px 15px;
    font-size:   14px;
    color:       var(--wrb-input-color);
    line-height: 1.5;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--wrb-gray-lighter);
    color:            #525252;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: var(--wrb-gray-medium);
    color:            #525252;
}

/* ---------- Suchfeld im Dropdown ------------------------------------------ */

.select2-container--default .select2-search--dropdown {
    padding: 8px;
    background-color: var(--wrb-gray-lighter);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding:       8px 12px;
    font-size:     14px;
    line-height:   1.5;
    color:         var(--wrb-input-color);
    background-color: #fff;
    border:        1px solid var(--wrb-border-color);
    border-radius: var(--wrb-border-radius);
    outline:       0;
    transition:    border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--wrb-primary);
    box-shadow:   0 0 0 .2rem rgba(248, 191, 0, .25);
}

/* ---------- "Keine Treffer" / "Suche…" ------------------------------------ */

.select2-container--default .select2-results__option.select2-results__message {
    color:      var(--wrb-placeholder-color);
    font-style: italic;
}

/* ---------- Validation (Bootstrap was-validated) -------------------------- */

.was-validated .wrb-bestellnr-select:invalid + .select2-container--default .select2-selection--single,
.wrb-bestellnr-select.is-invalid         + .select2-container--default .select2-selection--single {
    border-color: #b90000;
}

.was-validated .wrb-bestellnr-select:invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.wrb-bestellnr-select.is-invalid         + .select2-container--default.select2-container--focus .select2-selection--single {
    box-shadow: 0 0 0 .2rem rgba(185, 0, 0, .25);
}

/* ---------- Block-Layout (gleiche Breite wie .form-control) --------------- */

.wrb-extended-container .select2-container {
    width: 100% !important;
}

/* ---------- Option-Row + Badge (abgelaufene Bestellungen) ----------------- */

.wrb-select2-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .5rem;
    width:           100%;
}

.wrb-select2-row--disabled {
    color:   var(--wrb-placeholder-color);
    opacity: .85;
}

.wrb-select2-badge {
    display:          inline-block;
    flex-shrink:      0;
    padding:          .2em .5em;
    font-size:        75%;
    font-weight:      600;
    line-height:      1;
    color:            #fff;
    background-color: #b90000;
    border-radius:    var(--wrb-border-radius);
    white-space:      nowrap;
    vertical-align:   middle;
}

/* Disabled Options im Dropdown als nicht klickbar formatieren */
.select2-container--default .select2-results__option[aria-disabled=true],
.select2-container--default .select2-results__option--disabled {
    color:  var(--wrb-placeholder-color);
    cursor: not-allowed;
    background-color: transparent;
}

.select2-container--default .select2-results__option[aria-disabled=true].select2-results__option--highlighted {
    background-color: var(--wrb-gray-lighter);
    color:            var(--wrb-placeholder-color);
}