/* ===== Shared CSS for country-picker + intl-phone partials ===== */

/* --- Country picker (region/country dropdown) --- */
.cpkr { position: relative; display: block; width: 100%; }
.cpkr-trigger {
    display: flex; align-items: center; gap: .55rem;
    width: 100%; padding: .65rem .9rem; min-height: 44px;
    background: var(--surface, #fff); border: 1.5px solid var(--line, #e9ebf3); border-radius: 12px;
    font-family: inherit; font-size: 14px; color: var(--ink, #0f1424); text-align: left; cursor: pointer;
    transition: border-color .15s;
}
.cpkr-trigger:hover, .cpkr-trigger:focus { border-color: var(--acc, #7a4dff); outline: none; }
.cpkr-trigger.is-open { border-color: var(--acc, #7a4dff); box-shadow: 0 0 0 4px var(--acc-soft, rgba(122,77,255,.08)); }
.cpkr-trigger .cpkr-flag { font-size: 1.15rem; line-height: 1; }
.cpkr-trigger .cpkr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cpkr-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
    background: var(--surface, #fff); border: 1px solid var(--line, #e9ebf3); border-radius: 12px;
    box-shadow: 0 16px 36px -10px rgba(16,20,36,.18); overflow: hidden;
    max-height: 320px; display: flex; flex-direction: column;
}
.cpkr-panel[hidden] { display: none !important; }
.cpkr-search { position: relative; padding: 8px; border-bottom: 1px solid var(--line, #e9ebf3); }
.cpkr-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #98a0ad; font-size: .85rem; pointer-events: none; }
.cpkr-search input {
    width: 100%; padding: 8px 10px 8px 30px; border: 1px solid var(--line, #e9ebf3); border-radius: 8px;
    font-family: inherit; font-size: 13.5px; outline: none;
}
.cpkr-search input:focus { border-color: var(--acc, #7a4dff); box-shadow: 0 0 0 3px var(--acc-soft, rgba(122,77,255,.08)); }

.cpkr-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; max-height: 240px; }
.cpkr-opt {
    display: flex; align-items: center; gap: .65rem; padding: 8px 14px; cursor: pointer; font-size: 13.5px;
    color: var(--ink, #0f1424); transition: background .12s;
}
.cpkr-opt[hidden] { display: none; }
.cpkr-opt:hover { background: var(--acc-soft, rgba(122,77,255,.08)); }
.cpkr-opt.on { background: rgba(122,77,255,.12); color: var(--acc-ink, #6c4dff); font-weight: 700; }
.cpkr-opt .cpkr-flag { font-size: 1.05rem; line-height: 1; }
.cpkr-opt .cpkr-name { flex: 1; }
.cpkr-opt .cpkr-code { font-size: .7rem; color: #98a0ad; font-weight: 700; letter-spacing: .04em; }

/* --- WhatsApp-style intl-phone input --- */
.iphone {
    position: relative; display: flex; align-items: stretch;
    background: var(--surface, #fff); border: 1.5px solid var(--line, #e9ebf3); border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
    min-height: 44px;
}
.iphone:focus-within { border-color: var(--acc, #7a4dff); box-shadow: 0 0 0 4px var(--acc-soft, rgba(122,77,255,.08)); }
.iphone-trigger {
    display: flex; align-items: center; gap: .35rem; padding: 0 .65rem 0 .85rem;
    background: transparent; border: 0; border-right: 1px solid var(--line, #e9ebf3); cursor: pointer;
    font-family: inherit; color: var(--ink, #0f1424); font-size: 14px; white-space: nowrap;
}
.iphone-trigger:hover { background: rgba(122,77,255,.04); }
.iphone-trigger.is-open { background: rgba(122,77,255,.06); }
.iphone-trigger .iphone-flag { font-size: 1.15rem; line-height: 1; }
.iphone-trigger .iphone-dial { font-weight: 700; font-size: 13.5px; }

.iphone-number {
    flex: 1; min-width: 0; padding: .6rem .9rem;
    background: transparent; border: 0; outline: none;
    font-family: inherit; font-size: 14px; color: var(--ink, #0f1424);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.iphone-number::placeholder { color: #9aa1b2; }

.iphone-panel {
    position: absolute; left: 0; top: calc(100% + 6px); width: 320px; max-width: 100vw; z-index: 50;
    background: var(--surface, #fff); border: 1px solid var(--line, #e9ebf3); border-radius: 12px;
    box-shadow: 0 16px 36px -10px rgba(16,20,36,.18); overflow: hidden;
    display: flex; flex-direction: column; max-height: 360px;
}
.iphone-panel[hidden] { display: none !important; }
.iphone-search { position: relative; padding: 8px; border-bottom: 1px solid var(--line, #e9ebf3); }
.iphone-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #98a0ad; font-size: .85rem; pointer-events: none; }
.iphone-search input {
    width: 100%; padding: 8px 10px 8px 30px; border: 1px solid var(--line, #e9ebf3); border-radius: 8px;
    font-family: inherit; font-size: 13.5px; outline: none;
}
.iphone-search input:focus { border-color: var(--acc, #7a4dff); box-shadow: 0 0 0 3px var(--acc-soft, rgba(122,77,255,.08)); }
.iphone-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; max-height: 280px; }
.iphone-opt {
    display: flex; align-items: center; gap: .55rem; padding: 8px 14px; cursor: pointer; font-size: 13.5px;
    color: var(--ink, #0f1424); transition: background .12s;
}
.iphone-opt[hidden] { display: none; }
.iphone-opt:hover { background: var(--acc-soft, rgba(122,77,255,.08)); }
.iphone-opt.on { background: rgba(122,77,255,.12); color: var(--acc-ink, #6c4dff); font-weight: 700; }
.iphone-opt .iphone-flag { font-size: 1.05rem; line-height: 1; }
.iphone-opt .iphone-name { flex: 1; }
.iphone-opt .iphone-dial-num { font-size: .78rem; color: #6b7385; font-weight: 700; letter-spacing: .02em; }