/* The international phone field: flag + dial-code button, country list, input.
 *
 * SHARED. It lived in login-page.css, which only the login page loads, so the checkout could
 * not use the widget without pulling in the whole auth stylesheet. Both pages load this file
 * and nothing else changes hands.
 *
 * Paired with static/js/country-phone.js — the markup, the styles and the behaviour are three
 * halves of one component; changing one without the others is how it breaks.
 */
  .phone-group{position:relative;display:flex;align-items:center;border:1.5px solid #E2E8F0;border-radius:10px;background:#fff;transition:border-color .15s}
.phone-group:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(234,88,12,.13)}
.phone-cc{display:flex;align-items:center;gap:6px;padding:12px 10px 12px 14px;background:none;border:none;border-right:1.5px solid #E2E8F0;border-radius:10px 0 0 10px;font-size:15px;font-weight:600;color:#1E293B;cursor:pointer;white-space:nowrap;font-family:inherit}
.phone-input{flex:1;min-width:0;padding:12px 16px 12px 12px;border:none;border-radius:0 10px 10px 0;font-size:16px;outline:none;background:transparent}
.cc-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid #E2E8F0;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);max-height:280px;overflow-y:auto;z-index:60;-webkit-overflow-scrolling:touch}
.cc-list.open{display:block}
.cc-item{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;color:#1E293B;cursor:pointer}
.cc-item:hover{background:#FFF7ED}
.cc-item img,#cc-flag{box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.cc-item img{width:22px;height:15px;border-radius:2.5px;flex-shrink:0}
.cc-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cc-item b{color:#64748B;font-weight:600}