/* ============================================
   Sun Stories — searchable dial-code dropdown
   Styles the selectWoo container so it matches
   the native .country-code select it replaces
   inside .phone-group (checkout/account/auth).
   ============================================ */

.phone-group .select2-container {
    width: 84px !important;
    min-width: 84px;
    height: var(--input-height);
    background: var(--color-white);
    border-right: 1px solid var(--color-primary);
}

.phone-group .select2-container .select2-selection--single {
    height: var(--input-height);
    border: none;
    border-radius: 0;
    background: transparent;
    outline: none;
}

.phone-group .select2-container .select2-selection__rendered {
    height: var(--input-height);
    line-height: var(--input-height);
    padding: 0 20px 0 14px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--black-text);
}

.phone-group .select2-container .select2-selection__arrow {
    height: var(--input-height);
}

/* The dropdown is attached to the field's .form-group (see dial-code.js), so
   it must be a positioned reference for selectWoo's coordinates. */
.ssc-dial-parent {
    position: relative;
}

/* Deterministic placement. selectWoo writes inline top/left it computed from
   page offsets, which transformed/animated ancestors throw off — override it
   entirely and let the browser anchor the open dropdown to the field. The
   direct-child selector only matches the dropdown wrapper appended to the
   form-group, never the closed widget (that one sits inside .phone-group). */
.ssc-dial-parent > .select2-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: auto !important;
}

/* When selectWoo decides to open upward (field near the viewport bottom),
   mirror the anchor above the field. */
.ssc-dial-parent > .select2-container:has(.select2-dropdown--above) {
    top: auto !important;
    bottom: 100% !important;
}

/* The open dropdown needs room for full "+44 — United Kingdom" entries.
   Font stack stays literal so it also holds if the dropdown ever renders
   outside the .ssc-* wrappers where the CSS variables are defined. */
.ssc-dial-dropdown {
    min-width: 280px;
    font-family: "Figtree", sans-serif;
    border: 1px solid var(--color-primary, #2D2420);
    border-radius: 0;
}

/* select2 strips the touching border to "fuse" the dropdown with the select
   box; our dropdown is wider than the code box, so restore a full frame
   whether it opens below or above. */
.ssc-dial-dropdown.select2-dropdown--below {
    border-top: 1px solid var(--color-primary, #2D2420);
    margin-top: 2px;
}

.ssc-dial-dropdown.select2-dropdown--above {
    border-bottom: 1px solid var(--color-primary, #2D2420);
    margin-bottom: 2px;
}

.ssc-dial-dropdown .select2-results__option,
.ssc-dial-dropdown .select2-search__field {
    font-family: "Figtree", sans-serif;
}

.ssc-dial-dropdown .select2-results__option {
    font-size: 0.875rem;
}

.ssc-dial-dropdown .select2-search__field {
    font-size: 0.875rem;
}