/* ============================================================
   SELECT2 THEME — select2-theme.css
   ============================================================
   Global select2 skin: rounded pill shell (matches the site's
   input fields), gold-accented focus/selected states, custom
   chevron. Split out of quotation/delivery-date-modal.css,
   where it was scoped to that one modal — link this file on any
   page that wants the same look and every select2 on it will
   pick it up (same convention as select2.css / select2_custom.css).

   Depends only on the tokens declared in variables.css
   (--color-*, --radius-*, --field-*, --transition-fast,
   --font-body), which is already loaded site-wide via base.html
   and by accounting/quote.html, plus the handful of one-off values
   below that variables.css doesn't define.

   The shell reads --field-h / --field-radius so a themed select2
   and every other field on the page stay one size and one shape.
   ============================================================ */
:root {
    --s2theme-placeholder: #A9A49C;
    --s2theme-selected-bg: #FAF7EF;
    --s2theme-accent-text: #7C6A3B;
}

/* ── the closed shell ────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: var(--field-h) !important;
    min-height: var(--field-h);
    padding: 0 42px 0 16px;
    background: var(--color-surface-inset) !important;
    border: none !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none;
    transition: box-shadow var(--transition-fast);
}

.select2-container--default .select2-dropdown.select2-dropdown--below,
.select2-container--default .select2-dropdown.select2-dropdown--above {
    border-radius: var(--radius-lg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--color-text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the empty option reads as a placeholder. select2 mirrors the option
   text into title=, which is the only hook available here — if the
   option's wording ever changes this simply stops applying, nothing
   breaks. */
.select2-container--default .select2-selection--single .select2-selection__rendered[title="Select Slot"] {
    color: var(--s2theme-placeholder) !important;
}

/* re-draw the chevron the page's own field styles may hide */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 13px !important;
    height: 13px !important;
    margin-top: -6.5px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
    transition: transform var(--transition-fast);
    pointer-events: none;
}

/* select2 draws a CSS triangle in <b> — the data-URI chevron replaces it */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    background: var(--color-surface-white) !important;
    box-shadow: 0 0 0 1.5px var(--color-brand-gold) !important;
    border-radius: var(--field-radius) !important;
}
/* Add box shadow when selection menu is open  */
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border-color: var(--color-brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(149, 128, 73, 0.1) !important;
    background: var(--color-surface-white) !important;
}

/* Add box shadow when selection menu is open or focused  */
.select2-selection.select2-container--open .select2-selection--single,
.select2-container.select2-container--open .select2-selection--single,
.select2-container.select2-container--focus .select2-selection--single {
    border-color: var(--color-brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(149,128,73,0.12) !important;
    outline: none !important;
    background: #fff !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23958049' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--color-surface-inset) !important;
    cursor: not-allowed;
}

/* ── the dropdown panel ──────────────────────────────────── */
.select2-container--default .select2-dropdown {
    padding: 6px;
    background: var(--color-surface-white);
    border: none !important;
    border-radius: var(--field-radius) !important;
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden;
}

.select2-container--default .select2-dropdown--below { margin-top: 8px; }
.select2-container--default .select2-dropdown--above  { margin-top: -8px; }

/* select2 always renders a search field on a single select. Skinned to
   look deliberate rather than hidden — hiding it breaks select2's
   keyboard handling, which focuses this input when the panel opens.
   To drop it properly, pass `minimumResultsForSearch: Infinity` to the
   select2() call instead of hiding it here. */
.select2-container--default .select2-search--dropdown {
    padding: 0 0 6px;
}

/* ───────────────────────────────── Search Field inside Dropdown ───────────────────────────────── */
.select2-container .select2-search--dropdown {
    padding: 4px 4px 8px;
}
.select2-container .select2-search--dropdown .select2-search__field {
    width: 100%;
    height: 36px;
    /* border: 1.5px solid var(--color-border); */
    border-radius: var(--radius-md);
    padding: 0 12px 0 36px !important;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-surface-inset) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%2371717a" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>') no-repeat 10px center !important;
    background-position: 12px center !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 38px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-primary);
    background: var(--color-surface-inset);
    border: none;
    border-radius: 10px;
    outline: none;
    transition: box-shadow var(--transition-fast);
    border: none !important;
    margin-bottom: 0;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 232px;   /* 5 rows + a hint of the sixth */
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
    padding-left: 0 !important;
    margin: 0 !important;
}

.select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text-primary);
}

/* Some pages wrap each result in an inline-styled <span> (e.g.
   select2's templateResult). Neutralise that styling so the row itself
   carries the look — any tooltip/title it also sets is left alone. */
.select2-container--default .select2-results__option > span {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    cursor: inherit !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-surface-inset) !important;
    color: var(--color-text-primary) !important;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--s2theme-selected-bg) !important;
    color: var(--s2theme-accent-text) !important;
    font-weight: 500;
}

.select2-container--default .select2-results__option--selected::after,
.select2-container--default .select2-results__option[aria-selected="true"]::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23958049' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

/* a slot/option whose window has already passed */
.select2-container--default .select2-results__option[aria-disabled="true"],
.select2-container--default .select2-results__option--disabled {
    background-color: var(--color-surface-inset) !important;
    color: var(--s2theme-placeholder) !important;
    cursor: not-allowed;
}

.select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: var(--radius-full);
}

/* ── Grouped results ("— Common —" / "— Other —") ────────── */
.select2-container--default .select2-results__option--group,
.select2-container--default .select2-results__option[role="group"] {
    display: block !important;
    min-height: 0;
    padding: 0 !important;
    border-radius: 0;
    background: none !important;
}

.select2-container--default .select2-results__group {
    display: block;
    padding: 10px 12px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    cursor: default;
}


/* ___________________ selected item ___________________ */
li.select2-selection__choice {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    height: 24px;
    gap: 6px;
    padding: 0 9px 0 6px !important;
    margin: 2px 8px 2px 0 !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-brand-gold) !important;
    border: 0 !important;
    color: white !important;
    width: fit-content;
    transition: all var(--transition-fast);
}

/* The Label (select2 4.0 markup) */
li.select2-selection__choice span[id*="-container-choice-"] {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1;
    padding: 0 !important;
}

/* The X (Remove button) */
li.select2-selection__choice .select2-selection__choice__remove {
    position: static !important;
    border: none !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    margin: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent;
    color: white !important;
    cursor: pointer !important;
    transition: opacity var(--transition-fast),
        background var(--transition-fast);
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
}

li.select2-selection__choice .select2-selection__choice__remove:hover {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* The Label */
li.select2-selection__choice span.select2-selection__choice__display {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1;
    padding: 0 !important;
}

/* X icon inside Remove button */
li.select2-selection__choice .select2-selection__choice__remove>span {
    font-size: 22px !important;
    font-weight: 300;
    margin-bottom: 1px;
}

/* selected item in single selection */
.select2-selection__rendered {
    color: var(--color-text-primary);
}

/* Search field inside multi selection field -not dropdown- */
.select2-container .select2-search--inline .select2-search__field {
    font-family: var(--font-body) !important;
    line-height: 1.1;
    border-radius: 0;
    margin: 0;
    color: var(--color-text-primary);
}

.select2-search__field::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

/* ── selected-item wrap, site-wide ───────────────────────────
   Keeps a multi-select's chips from stretching the shell full-bleed.
   Moved out of quote_page/footer.html, which used to own this alone. */
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    max-width: 70%;
    width: auto;
}

.select2-container .select2-results__options {
    list-style: none;
}

/* ============================================================
   QUOTE PAGE SERVICE FORMS
   ============================================================
   The closed shell as it sits inside a quote-page form: the same
   filled 48px pill quotation/form.css gives every other field.
   Only the shell — the dropdown panel above is shared with every
   other select2 on the site, and it is appended to <body>, outside
   the form, so it can't be scoped here anyway.

   Scoped to `.quote-form` (the class on each service <form>) on
   purpose. It keeps these off the pickers inside the upload
   modals, which keep their own look, and three classes out-rank
   the !important overrides those modals declare — interpretation's
   modal.html pins the multi-select at width:226px and paints its
   chips darkblue, unscoped.

   One thing is deliberately NOT declared here:

     • .select2-selection__choice__remove — interpretation's
       modal.html hides the chip "×" and that is the behaviour
       today; re-showing it here would be a change, not a merge.
       (.select2-selection__rendered width/max-width used to be
       footer.html's alone to declare; it's the global rule right
       above this section now, so every select2 on the page —
       inside .quote-form or not — picks it up from one place.)

   footer.html also id-scopes #form_panel multi-selects to a 46px
   min-height with !important, so the "others" and DTP forms keep
   that instead of --field-h. Left alone: footer.html is outside
   this refactor.
   ============================================================ */
.quote-form .select2-container {
    width: 100% !important;
}

.quote-form .select2-container--default .select2-selection--single,
.quote-form .select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--field-h) !important;
    background: var(--color-surface-inset) !important;
    border: 0 !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none;
    font-size: 16px;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* the right pad clears the chevron drawn above */
.quote-form .select2-container--default .select2-selection--single {
    height: var(--field-h) !important;
    padding: 0 42px 0 16px;
}

.quote-form .select2-container--default .select2-selection--multiple {
    padding: 6px 12px !important;
}

.quote-form .select2-container--default .select2-selection--single:hover,
.quote-form .select2-container--default .select2-selection--multiple:hover {
    background: var(--color-surface-subtle) !important;
}

.quote-form .select2-container--default.select2-container--open .select2-selection--single,
.quote-form .select2-container--default.select2-container--focus .select2-selection--single,
.quote-form .select2-container--default.select2-container--open .select2-selection--multiple,
.quote-form .select2-container--default.select2-container--focus .select2-selection--multiple {
    background: var(--color-surface-white) !important;
    border-radius: var(--field-radius) !important;
    box-shadow: var(--focus-ring-gold) !important;
}

.quote-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-placeholder) !important;
}

/* Interpretation's speakers step draws one card per target language on
   the inset fill, so the fields inside lift to white. Gender is a
   select2, so its shell isn't a .form-control and would otherwise keep
   the inset fill — which is that card's own colour. */
.quote-form #step4 .targetSpeakers .select2-container--default .select2-selection--single {
    background: var(--color-surface-white) !important;
}

.quote-form #step4 .targetSpeakers .select2-container--default .select2-selection--single:hover {
    background: var(--color-surface-subtle) !important;
}

/* Same story for the others form's reveal panels (courier, attestation):
   the well is --color-surface-page, so a select2 inside it lifts to white
   like the .form-control fields beside it. */
.quote-form .reveal-panel .select2-container--default .select2-selection--single,
.quote-form .reveal-panel .select2-container--default .select2-selection--multiple {
    background: var(--color-surface-white) !important;
}

.quote-form .reveal-panel .select2-container--default .select2-selection--single:hover,
.quote-form .reveal-panel .select2-container--default .select2-selection--multiple:hover {
    background: var(--color-surface-subtle) !important;
}

/* ── the chips ──────────────────────────────────────────── */
.quote-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    position: static;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quote-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    height: 24px !important;
    gap: 6px;
    margin: 2px 8px 2px 0 !important;
    padding: 0 9px 0 6px !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-brand-gold) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: background var(--transition-fast);
}

/* ── the inline search caret ────────────────────────────── */
.quote-form .select2-container--default .select2-selection--multiple .select2-search--inline {
    display: flex;
    align-items: center;
    margin: 0;
}

.quote-form .select2-container .select2-search--inline .select2-search__field {
    height: 24px !important;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    /* !important beats interpretation modal.html's 12px */
    font-size: 16px !important;
    resize: none !important;
}