/**
 * Portaled country picker theme for signup flows only.
 * Load after phone-field.css so these rules win over generic picker chrome.
 *
 * Dashboard: html.signup-modal-open (set in showSignupModal).
 * Home auth: html:has(#signup-view:not(.hidden)).
 */

/* ── Dashboard signup modal (neutral tokens = #signup-email / #signup-password) ── */

html.signup-modal-open .phone-field-country-panel:not(.hidden) {
    border-radius: 0.5rem;
    border: 1px solid rgb(212 212 212);
    background-color: #ffffff;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 8px 20px rgb(0 0 0 / 0.1);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) {
    border-color: rgb(38 38 38);
    background-color: rgb(23 23 23);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.25),
        0 10px 24px rgb(0 0 0 / 0.35);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-search-wrap {
    border-bottom-color: rgb(212 212 212);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-search-wrap {
    border-bottom-color: rgb(38 38 38);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-search {
    border-radius: 0.5rem;
    border: 1px solid rgb(212 212 212);
    background-color: #ffffff;
    color: rgb(23 23 23);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-search {
    border-color: rgb(38 38 38);
    background-color: rgb(23 23 23);
    color: rgb(250 250 250);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-search:focus {
    border-color: rgb(16 185 129 / 0.6);
    box-shadow: 0 0 0 2px rgb(16 185 129 / 0.25);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option {
    color: rgb(64 64 64);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option {
    color: rgb(212 212 212);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option:hover,
html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-highlighted {
    background-color: rgb(245 245 245);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option:hover,
html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-highlighted {
    background-color: rgb(255 255 255 / 0.06);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-selected {
    background-color: rgb(236 253 245);
    color: rgb(23 23 23);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-selected {
    background-color: rgb(16 185 129 / 0.14);
    color: rgb(250 250 250);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option-dial {
    color: rgb(115 115 115);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-option-dial {
    color: rgb(163 163 163);
}

html.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-empty {
    color: rgb(115 115 115);
}

html.dark.signup-modal-open .phone-field-country-panel:not(.hidden) .phone-field-country-empty {
    color: rgb(163 163 163);
}

/* ── Home auth signup (#signup-view; wrapper uses slate-50 / dark-surface) ── */

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) {
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background-color: rgb(248 250 252);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 8px 20px rgb(0 0 0 / 0.1);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) {
    border-color: rgb(30 41 59);
    background-color: rgb(15 23 42);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.25),
        0 10px 24px rgb(0 0 0 / 0.35);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-search-wrap {
    border-bottom-color: rgb(226 232 240);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-search-wrap {
    border-bottom-color: rgb(30 41 59);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-search {
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background-color: rgb(248 250 252);
    color: rgb(15 23 42);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-search {
    border-color: rgb(30 41 59);
    background-color: rgb(15 23 42);
    color: rgb(248 250 252);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-search:focus {
    border-color: rgb(5 150 105);
    box-shadow: 0 0 0 4px rgb(5 150 105 / 0.12);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option {
    color: rgb(51 65 85);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option {
    color: rgb(226 232 240);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option:hover,
html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-highlighted {
    background-color: rgb(241 245 249);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option:hover,
html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-highlighted {
    background-color: rgb(255 255 255 / 0.06);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-selected {
    background-color: rgb(236 253 245);
    color: rgb(15 23 42);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option.is-selected {
    background-color: rgb(16 185 129 / 0.14);
    color: rgb(248 250 252);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option-dial {
    color: rgb(100 116 139);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-option-dial {
    color: rgb(148 163 184);
}

html:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-empty {
    color: rgb(100 116 139);
}

html.dark:has(#signup-view:not(.hidden)) .phone-field-country-panel:not(.hidden) .phone-field-country-empty {
    color: rgb(148 163 184);
}