/*
 * Select2, in Minet's shapes and colours.
 *
 * A FILE OF ITS OWN, loaded after the vendor stylesheet, for the same reason
 * flatpickr-minet.css is: that order is the only thing that makes these win
 * without specificity tricks.
 *
 * The aim is that a dropdown is indistinguishable from the text field beside
 * it until it is opened — same height, same edge, same focus ring — so only
 * what would otherwise be Select2's own look is restated, all of it from the
 * tokens file.
 */

/* ---- The closed control: a field ---------------------------------------- */

.select2-container { font-family: var(--font-body); font-size: var(--fs-body); }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--minet-control-border);
    border-radius: var(--radius);
    background: var(--minet-white);
}
.select2-container--default .select2-selection--single { height: var(--control-height-form); }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* The control's height less its two edges, so the text sits on the same
       line as a neighbouring input's. */
    line-height: calc(var(--control-height-form) - 2px);
    padding-left: var(--space-3);
    padding-right: var(--space-12);
    color: var(--minet-text);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--minet-muted);
    opacity: 1;
}
/* Select2 draws a triangle; every select here already carries the site's own
   chevron (.control__icon), and two arrows is one too many. */
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

.select2-container--default:hover .select2-selection--single,
.select2-container--default:hover .select2-selection--multiple { border-color: var(--minet-ink); }

/* The brand's ring, on focus and while the list is open. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--minet-control-border);
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* ---- Several choices: the trip's countries ------------------------------- */

.select2-container--default .select2-selection--multiple {
    min-height: var(--control-height-form);
    padding: var(--space-1) var(--space-2);
    cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
}
/* A country already chosen: quiet grey on the white box, read back rather than
   asked for, with nothing red about it (the team's decision, 13 Oct 2026). */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: var(--minet-surface);
    color: var(--minet-ink);
    font-size: var(--fs-small);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    /* The only way to undo a choice with a pointer, so it is a real target and
       not the vendor's bare "×" a few pixels wide. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-6);
    min-height: var(--space-6);
    margin: 0;
    border-radius: var(--radius);
    color: var(--minet-muted);
    font-weight: 400;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: var(--minet-white);
    color: var(--minet-ink);
}
.select2-container--default .select2-search--inline { flex: 1 1 12ch; }
.select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;   /* Select2 sets an inline width from the text typed so far */
    min-width: 12ch;
    height: calc(var(--control-height-form) - var(--space-3));
    margin: 0;
    padding: 0 var(--space-1);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--minet-ink);
}

/* ---- The open list --------------------------------------------------------- */

.select2-dropdown {
    border: 1px solid var(--minet-line-strong);
    border-radius: var(--radius);
    background: var(--minet-white);
    z-index: 60;   /* over the phone's sticky action bar, under nothing that matters */
}
.select2-container--default .select2-search--dropdown { padding: var(--space-2); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    height: var(--tap-target-min);
    padding-inline: var(--space-3);
    border: 1px solid var(--minet-control-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--fs-body);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
    min-height: var(--tap-target-min);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-small);
    color: var(--minet-text);
}
/* Where the pointer or the arrow keys are: a grey wash with a red rule, never
   Select2's blue bar with white text. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--minet-surface);
    color: var(--minet-ink);
    box-shadow: inset 2px 0 0 var(--minet-red-action);
}
/* Already chosen is STATED — a tick — not only shaded. */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--minet-white);
    color: var(--minet-muted);
}
.select2-container--default .select2-results__option[aria-selected="true"]::after { content: "\2713"; margin-left: auto; }
.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--minet-line-strong);
    text-decoration: line-through;
}
.select2-container--default .select2-results__message { color: var(--minet-muted); }

/* ---- The landing page's filter row ---------------------------------------- */

/* Taller and on the surface grey, as Minet's landing mockup draws that row. */
.filters__control .select2-container--default .select2-selection--single {
    height: var(--control-height);
    border-color: transparent;
    background: var(--minet-surface);
}
.filters__control .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--control-height) - 2px);
    padding-left: var(--space-4);
}