/* Flag + label dropdown used by the mobile-number control.

   Deliberately named after the picker rather than after the mobile number: the same markup is meant
   to carry country, nationality and currency pickers later, so nothing here mentions phones. */

.x-picker {
    /* Light theme */
    --xp-bg:            #ffffff;
    --xp-color:         #16191f;
    --xp-color-muted:   #5f6b7a;
    --xp-border:        #e3e8ef;
    --xp-item-hover:    #f4f6f8;
    --xp-selected:      #E7FBF1;
    --xp-accent:        #0C9157;
    --xp-shadow:        0 8px 24px rgba(0, 0, 0, 0.16);

    --xp-toggle-bg:         #ffffff;
    --xp-toggle-bg-hover:   #f4f6f8;
    --xp-toggle-bg-active:  #e9edf2;
    --xp-toggle-color:      #16191f;
}

[data-bs-theme=dark] .x-picker {
    --xp-bg:            #1a2232;
    --xp-color:         #cdd5df;
    --xp-color-muted:   #7d90a4;
    --xp-border:        #2b3a4d;
    --xp-item-hover:    #243346;
    --xp-selected:      #0A7044;
    --xp-accent:        #55E29E;
    --xp-shadow:        0 8px 24px rgba(0, 0, 0, 0.45);

    --xp-toggle-bg:         #1a2232;
    --xp-toggle-bg-hover:   #243346;
    --xp-toggle-bg-active:  #2b3a4d;
    --xp-toggle-color:      #cdd5df;
}

/* The panel is positioned against this, not against the input-group, so it opens under the flag
   button rather than under the whole field. */
.x-picker__anchor {
    position: relative;
    display: flex;
}

/* Styled from its own tokens rather than from .btn-outline-secondary.
   override.css repaints that variant's background on :hover and :focus but leaves `color` at the
   same dark navy, so the dial code went invisible the moment the button was touched. Owning every
   state here keeps the control readable whatever the button theme does next. */
.x-picker .x-picker__toggle,
.x-picker .x-picker__toggle:disabled {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    border: 1px solid var(--xp-border);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--xp-toggle-bg);
    color: var(--xp-toggle-color);
    box-shadow: none;
}

.x-picker .x-picker__toggle:hover,
.x-picker .x-picker__toggle:focus {
    background-color: var(--xp-toggle-bg-hover);
    color: var(--xp-toggle-color);
    border-color: var(--xp-border);
    box-shadow: none;
}

.x-picker .x-picker__toggle:active,
.x-picker .x-picker__toggle[aria-expanded="true"] {
    background-color: var(--xp-toggle-bg-active);
    color: var(--xp-toggle-color);
    border-color: var(--xp-border);
}

/* Keyboard focus stays visible without relying on a background change. */
.x-picker .x-picker__toggle:focus-visible {
    outline: 2px solid var(--xp-accent);
    outline-offset: -2px;
}

.x-picker .x-picker__toggle:disabled {
    opacity: .65;
}

.x-picker__flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
}

.x-picker__dial {
    font-variant-numeric: tabular-nums;
}

.x-picker__dial--empty {
    color: var(--xp-color-muted);
}

.x-picker__caret {
    font-size: .7em;
    opacity: .7;
}

.x-picker__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1060;
    width: 20rem;
    max-width: 80vw;
    background: var(--xp-bg);
    color: var(--xp-color);
    border: 1px solid var(--xp-border);
    border-radius: .5rem;
    box-shadow: var(--xp-shadow);
    overflow: hidden;
}

.x-picker__search {
    padding: .5rem;
    border-bottom: 1px solid var(--xp-border);
}

.x-picker__list {
    max-height: 16rem;
    overflow-y: auto;
}

.x-picker__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .65rem;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    font-size: .875rem;
}

.x-picker__item:hover,
.x-picker__item:focus-visible {
    background: var(--xp-item-hover);
}

.x-picker__item--active {
    background: var(--xp-selected);
    color: var(--xp-accent);
}

.x-picker__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-picker__item .x-picker__dial {
    color: var(--xp-color-muted);
    flex: 0 0 auto;
}

.x-picker__empty {
    padding: .75rem;
    font-size: .875rem;
    color: var(--xp-color-muted);
}

.x-picker__number {
    font-variant-numeric: tabular-nums;
}