/* Country picker with flags (country-picker.js). Dark surfaces; --product-rgb is the page accent. */
.cp{position:relative;--cp-accent:var(--product-rgb,198 255 61)}
.cp-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden;clip:rect(0 0 0 0)}

.cp-trigger{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer}
.cp-trigger .cp-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-placeholder{color:#fff}
.cp-chev{width:14px;height:14px;flex:none;color:#9c9ca8;transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s}
.cp.is-open .cp-chev{transform:rotate(180deg);color:#fff}

.cp-flag{display:block;flex:none;width:20px;height:15px;border-radius:3px;object-fit:cover;
  outline:1px solid #ffffff24;outline-offset:-1px;box-shadow:0 1px 2px #0006;background:#ffffff10}
.cp-globe{width:18px;height:18px;flex:none;margin:0 1px;color:rgb(var(--cp-accent))}

.cp-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:max(100%,300px);max-width:calc(100vw - 32px);
  background:#141418;border:1px solid #ffffff1c;border-radius:12px;
  box-shadow:0 22px 48px -18px #000d,0 4px 14px -6px #0009;overflow:hidden;
  animation:cp-in .16s cubic-bezier(.16,1,.3,1)}
@keyframes cp-in{from{opacity:0;transform:translateY(-4px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.cp-pop{animation:none}.cp-chev{transition:none}}

.cp-search{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #ffffff14}
.cp-search svg{width:15px;height:15px;flex:none;color:#fff}
.cp .cp-search input{flex:1;min-width:0;width:auto;height:40px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff;font:inherit;font-size:14px;outline:none;caret-color:rgb(var(--cp-accent))}
.cp-search input::placeholder{color:#fff}

.cp-list{list-style:none;margin:0;padding:4px;max-height:264px;overflow-y:auto;overscroll-behavior:contain;scroll-padding:4px}
.cp-list li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;font-size:14px;color:#d8d8e0;cursor:pointer;user-select:none}
.cp-list li.is-active{background:#ffffff10;color:#fff}
.cp-list li[aria-selected=true]{color:#fff}
.cp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-code{color:#9c9ca8;font-size:13px;font-variant-numeric:tabular-nums}
.cp-tick{width:14px;height:14px;flex:none;color:rgb(var(--cp-accent));visibility:hidden}
.cp-list li[aria-selected=true] .cp-tick{visibility:visible}
.cp-none{margin:0;padding:14px 14px 16px;font-size:13px;color:#9c9ca8}

/* Dialling code inside a phone field (.su-tel): no box of its own */
.cp-dial .cp-trigger{height:100%;gap:7px;padding:0 10px 0 12px;border:0;background:transparent;color:#fff;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;border-radius:10px 0 0 10px}
.cp-dial .cp-trigger:focus-visible{outline:2px solid rgb(var(--cp-accent)/.75);outline-offset:-2px}
.cp-dial .cp-pop{width:300px}

/* On other pages: the country button wears the page's own input look (matchLook) */
.cp-matched{padding-right:12px!important;margin:0;text-align:left}
.cp-matched .cp-label{line-height:inherit}
.cp-matched:focus-visible,.cp-matched[aria-expanded=true]{outline:2px solid rgb(var(--cp-accent)/.75);outline-offset:1px}
.cp-matched[aria-invalid=true]{border-color:#ff6b6b!important}

/* A phone field anywhere: dialling code and number in one box (SNCountryPicker.phone) */
.sn-tel{display:flex;align-items:stretch;box-sizing:border-box;--cp-accent:var(--product-rgb,198 255 61)}
.sn-tel:focus-within{border-color:rgb(var(--cp-accent)/.8)!important;box-shadow:0 0 0 3px rgb(var(--cp-accent)/.14)}
.sn-tel:has([aria-invalid=true]),.sn-tel:has(.invalid){border-color:#ff6b6b!important}
.sn-tel .cp{flex:none}
.sn-tel .cp-trigger{position:relative}
.sn-tel .cp-trigger::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:1px;background:#ffffff1c}
.sn-tel .sn-tel-num{flex:1;min-width:0;width:auto!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;font-variant-numeric:tabular-nums}