/* Select2-style popup pickers: the country dial-code picker (cp-*) and the
   province / city pickers (rp-*). Loaded by BOTH the public stylesheet's pages
   and the admin shell, because the admin's manual-entry screen reuses the very
   same widgets — keep it free of anything either side would not want.

   Colours come from --pick-* hooks, each with the public site's dark values
   as its fallback, so this file drops into a light shell (the admin) by
   redefining seven variables instead of overriding rules. */



.field .country-phone,
.field .remote-picker {
    position: relative;
    width: 100%;
}

/* The country "+62 ▾" badge sits inside the .phone-input row. */
.field .country-phone button.phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-right: 1px solid var(--pick-border-soft, rgba(184, 169, 152, 0.18));
    font: inherit;
    font-weight: 500;
    font-size: 16px;
    color: var(--pick-accent, #FFE2A8);
    line-height: 1;
    cursor: pointer;
}
.field .country-phone button.phone-prefix:hover,
.field .country-phone button.phone-prefix:focus {
    background: var(--pick-surface-strong, rgba(0, 0, 0, 0.32));
    outline: none;
}

/* The province / city trigger looks like a regular input row. */
.field .remote-picker > button.rp-trigger {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    background: var(--pick-surface, rgba(0, 0, 0, 0.22));
    color: var(--pick-text, #FFF9EE);
    border: 1px solid var(--pick-border, rgba(184, 169, 152, 0.3));
    border-radius: var(--radius-field);
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 450;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.field .remote-picker > button.rp-trigger:hover,
.field .remote-picker > button.rp-trigger:focus {
    border-color: var(--pick-accent, #FFE2A8);
    background: var(--pick-surface-strong, rgba(0, 0, 0, 0.32));
    outline: none;
}
.field .remote-picker .rp-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field .country-phone .cp-caret,
.field .remote-picker .rp-caret { font-size: 12px; opacity: 0.7; }

/* Popup panel (shared) ----------------------------------------------- */
.field .cp-popup,
.field .rp-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    background: var(--pick-popup-bg, #4a0503);
    border: 1px solid var(--pick-border, rgba(184, 169, 152, 0.3));
    border-radius: var(--radius-field);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.field .cp-popup[hidden],
.field .rp-popup[hidden] { display: none !important; }

.field .cp-popup-search,
.field .rp-popup-search {
    padding: 10px;
    border-bottom: 1px solid var(--pick-border-soft, rgba(184, 169, 152, 0.18));
    background: var(--pick-surface, rgba(0, 0, 0, 0.15));
}
.field .cp-popup-search input[type=text],
.field .rp-popup-search input[type=text] {
    box-sizing: border-box;
    width: 100%;
    background: var(--pick-surface, rgba(0, 0, 0, 0.28));
    color: var(--pick-text, #FFF9EE);
    border: 1px solid var(--pick-border, rgba(184, 169, 152, 0.25));
    border-radius: var(--radius-field);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.field .cp-popup-search input[type=text]:focus,
.field .rp-popup-search input[type=text]:focus {
    border-color: var(--pick-accent, #FFE2A8);
    background: var(--pick-surface-strong, rgba(0, 0, 0, 0.36));
}

/* Force a vertical list — defensive against default <button> inline-block. */
.field .cp-popup-list,
.field .rp-popup-list {
    display: block;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}

.field .cp-popup-list > button.cp-item,
.field .rp-popup-list > button.rp-item {
    -webkit-appearance: none;
    appearance: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pick-text, #FFF9EE);
    font-family: inherit;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.field .cp-popup-list > button.cp-item:hover,
.field .cp-popup-list > button.cp-item:focus,
.field .rp-popup-list > button.rp-item:hover,
.field .rp-popup-list > button.rp-item:focus {
    background: var(--pick-item-hover, rgba(184, 169, 152, 0.14));
    outline: none;
}
.field .cp-popup-list > button.cp-item[hidden],
.field .rp-popup-list > button.rp-item[hidden] { display: none !important; }

.field .cp-item-name,
.field .rp-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .cp-item-code {
    color: var(--pick-accent, #FFE2A8);
    font-weight: 500;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.field .cp-popup-empty,
.field .rp-popup-empty,
.field .rp-popup-hint,
.field .rp-popup-loading {
    padding: 16px;
    color: var(--pick-muted, #B8A998);
    font-size: 13px;
    text-align: center;
}
.field .rp-popup-hint { opacity: 0.8; }

/* The phone row itself: dial-code badge + local-number input. */
.field .phone-input {
    display: flex;
    align-items: stretch;
    background: var(--pick-surface, rgba(0, 0, 0, 0.22));
    color: var(--pick-text, #FFF9EE);
    border: 1px solid var(--pick-border, rgba(184, 169, 152, 0.3));
    border-radius: var(--radius-field);
    overflow: hidden;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.field .phone-input:focus-within {
    border: 1.5px solid var(--pick-accent, #FFE2A8);
    background: var(--pick-surface-strong, rgba(0, 0, 0, 0.32));
}
.field .phone-prefix {
    padding: 14px 16px;
    background: var(--pick-surface, rgba(0, 0, 0, 0.25));
    color: var(--pick-accent, #FFE2A8);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--pick-border-soft, rgba(184, 169, 152, 0.18));
    display: flex;
    align-items: center;
    user-select: none;
    flex-shrink: 0;
}
.field .phone-input input.phone-local {
    flex: 1;
    background: transparent !important;
    color: var(--pick-text, #FFF9EE);
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 450;
    outline: none;
    width: 100%;
    min-width: 0;
}
.field .phone-input input.phone-local:focus {
    border: 0 !important;
    background: transparent !important;
}