/*
 * The mobile-number box with a country flag + dial-code picker (partials/phone-input.blade.php, geo-phone.js).
 * Matches the shop's own sp-input boxes (colours fall back to the storefront's palette when --sp-* is not set).
 */
.gp.sp-phone-gp {
    position: relative; display: flex; align-items: stretch;
    border: 1.5px solid var(--sp-line, #e6eaf0); border-radius: 12px; background: #fff;
    transition: border-color .16s, box-shadow .16s;
}
.gp.sp-phone-gp:focus-within {
    border-color: var(--sp-brand, #ff5722);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, .14);
}
.gp-btn {
    display: flex; align-items: center; gap: 6px; padding: 0 12px; flex: 0 0 auto;
    border: 0; border-right: 1.5px solid var(--sp-line, #e6eaf0); border-radius: 12px 0 0 12px;
    background: var(--sp-soft, #f8fafc); color: var(--sp-ink, #0f172a); font: inherit; font-size: 14px; cursor: pointer;
}
.gp-btn:hover { filter: brightness(.98); }
.gp-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); flex: none; }
.gp-dial { font-weight: 600; white-space: nowrap; }
.gp-btn i { font-size: 10px; opacity: .6; }
.gp-input {
    flex: 1; min-width: 0; border: 0 !important; border-radius: 0 12px 12px 0 !important;
    padding: 13px 14px !important; font-size: 15px; color: var(--sp-ink, #0f172a); background: transparent; outline: none;
}
.gp-pop {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(320px, 92vw);
    background: #fff; border: 1px solid var(--sp-line, #e6eaf0); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18); overflow: hidden;
}
.gp-pop[hidden] { display: none; }
.gp-search {
    width: 100%; border: 0; border-bottom: 1px solid var(--sp-line, #e6eaf0); border-radius: 0;
    padding: 11px 14px; font-size: 14px; outline: none;
}
.gp-list { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; }
.gp-list li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.gp-list li:hover, .gp-list li.is-on { background: var(--sp-soft, #f8fafc); }
.gp-list li img { flex: 0 0 20px; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }
.gp-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-ink, #0f172a); }
.gp-list li em { font-style: normal; color: #6b7280; font-size: 13px; }
.gp-list .gp-group { cursor: default; padding: 8px 14px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.gp-list .gp-none { cursor: default; color: #6b7280; }

.gp.is-locked .gp-btn { pointer-events: none; cursor: not-allowed; opacity: .8; }
.gp.is-locked .gp-btn i { display: none; }
.gp-lock-note { display: block; margin-top: 5px; font-size: 11.5px; color: #94a3b8; }