:root{
    --pi-border:#d7dbe0;
    --pi-border-hover:#b7bec7;
    --pi-focus:#2563eb;
    --pi-focus-ring: rgba(37,99,235,.15);
    --pi-bg:#fff;
    --pi-text:#1a1d23;
    --pi-muted:#6b7280;
    --pi-hover-bg:#f3f5f7;
    --pi-active-bg:#eaf1ff;
    --pi-radius:8px;
    --pi-shadow: 0 10px 25px -5px rgba(0,0,0,.12), 0 4px 6px -2px rgba(0,0,0,.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

.pi-wrap{
    position:relative;
    display:flex;
    align-items:stretch;
    border:1px solid var(--pi-border);
    border-radius:var(--pi-radius);
    background:var(--pi-bg);
    transition:border-color .15s ease, box-shadow .15s ease;
  }

  .pi-wrap:hover{
    border-color:var(--pi-border-hover);
  }

  /* focus-within highlights the whole control when either the
     trigger button or the number input has focus */
  .pi-wrap:focus-within{
    border-color:var(--pi-focus);
    box-shadow:0 0 0 3px var(--pi-focus-ring);
  }

  /* --- Country trigger button --- */
  .pi-trigger{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    border:none;
    border-right:1px solid var(--pi-border);
    background:#f6f8fa;
    cursor:pointer;
    border-radius:var(--pi-radius) 0 0 var(--pi-radius);
    font-size:14px;
    color:var(--pi-text);
  }

  .pi-trigger:hover{
    background:var(--pi-hover-bg);
  }

  .pi-trigger:focus-visible{
    outline:2px solid var(--pi-focus);
    outline-offset:-2px;
  }

  .pi-flag{
    font-size:18px;
    line-height:1;
  }

  .pi-code{
    font-weight:500;
    white-space:nowrap;
  }

  .pi-chevron{
    width:10px;
    height:7px;
    color:var(--pi-muted);
    transition:transform .15s ease;
    flex-shrink:0;
  }

  .pi-chevron.open{
    transform:rotate(180deg);
  }

  /* --- Number input --- */
  .pi-input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:#f6f8fa;
    padding:11px 12px;
    font-size:14px;
    color:var(--pi-text);
  }

  .pi-input::placeholder{
    color:#9aa1ab;
  }

  /* --- Dropdown panel --- */
  .pi-dropdown{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    width:300px;
    max-width:90vw;
    background:#f6f8fa;
    border:1px solid var(--pi-border);
    border-radius:10px;
    box-shadow:var(--pi-shadow);
    z-index:50;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
  }

  .pi-dropdown.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    background-color: #f6f8fa !important;

  }

  .pi-search-wrap{
    padding:10px;
    border-bottom:1px solid var(--pi-border);
  }

  .pi-search{
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    border:1px solid var(--pi-border);
    border-radius:6px;
    font-size:13px;
    outline:none;
  }

  .pi-search:focus{
    border-color:var(--pi-focus);
    box-shadow:0 0 0 3px var(--pi-focus-ring);
  }

  .pi-list{
    max-height:240px;
    overflow-y:auto;
    padding:6px;
  }

  .pi-option{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:13.5px;
  }

  .pi-option:hover{
    background:var(--pi-hover-bg);
  }

  .pi-option.pi-active{
    background:var(--pi-active-bg);
  }

  .pi-opt-flag{
    font-size:16px;
    flex-shrink:0;
  }

  .pi-opt-name{
    flex:1;
    color:var(--pi-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .pi-opt-code{
    color:var(--pi-muted);
    font-variant-numeric:tabular-nums;
  }

  .pi-no-results{
    padding:20px 10px;
    text-align:center;
    font-size:13px;
    color:var(--pi-muted);
  }

  /* scrollbar polish (optional) */
  .pi-list::-webkit-scrollbar{ width:8px; }
  .pi-list::-webkit-scrollbar-thumb{ background:#d7dbe0; border-radius:8px; }

  .pi-output{
    margin-top:16px;
    padding:12px;
    background:#f6f7f9;
    border-radius:8px;
    font-size:12px;
    color:var(--pi-muted);
    white-space:pre-wrap;
    word-break:break-all;
  }