:root{
    --bg: #EEF1F5;
    --card: #FFFFFF;
    --text: #101828;
    --text-secondary: #667085;
    --text-faint: #98A2B3;
    --border: #D8DCE3;
    --border-hover: #B4BBC6;
    --accent: #1D5D74;
    --accent-strong: #164A5D;
    --accent-tint: #E7F1F4;
    --error: #D92D20;
    --error-tint: #FDEDEC;
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px -8px rgba(16,24,40,0.10);
    --shadow-focus: 0 0 0 4px rgba(29,93,116,0.14);
  }
 
 
 .card{
    width:100%;
    max-width:420px;
  }

  .card-eyebrow{
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 6px;
  }

  .card-title{
    font-size:19px;
    font-weight:700;
    margin:0 0 20px;
    letter-spacing:-0.01em;
  }

  .phone-field{
    position:relative;
  }

  .phone-label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    margin-bottom:8px;
  }

  .phone-label .req{
    color:var(--accent);
    margin-left:2px;
  }

  .phone-input-group{
    display:flex;
    align-items:stretch;
    background:#fff;
    border:1.5px solid #333;
  }
	
	.phone-input-group:has(#phoneNumber:focus) {
    border-color: transparent;
    outline: none;
    box-shadow: none;
}
	
  .phone-input-group.is-error{
    border-color:var(--error);
  }
  .phone-input-group.is-error.is-focused{
    box-shadow:0 0 0 4px rgba(217,45,32,0.12);
  }

  .country-select{
    display:flex;
    align-items:center;
    gap:7px;
    background:transparent;
    border:none;
    padding:0 10px 0 14px;
    cursor:pointer;
    border-radius:var(--radius-md) 0 0 var(--radius-md);
    color:var(--text);
    font-family:inherit;
  }

  .country-select:hover{
    background:#F7F8FA;
  }

  .country-select:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:-2px;
  }

  .flag-img{
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(16,24,40,0.10);
    display:block;
    flex-shrink:0;
    background:#F2F4F7;
  }

  .country-option .flag-img{
    width:20px;
    height:15px;
  }

  .dial-code{
    font-size:14.5px;
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
  }

  .chevron{
    width:14px;
    height:14px;
    color:var(--text-faint);
    transition:transform .15s ease;
    margin-left:1px;
  }

  .country-select[aria-expanded="true"] .chevron{
    transform:rotate(180deg);
  }

  .divider{
    width:1px;
    margin:9px 0;
    background:var(--border);
  }

  .phone-number-input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    color:var(--text);
    padding:12px 14px 12px 12px;
    letter-spacing:0.02em;
  }

  .phone-number-input::placeholder{
    color:var(--text-faint);
    font-weight:400;
    letter-spacing:normal;
  }

  .hint{
    margin:8px 2px 0;
    font-size:12.5px;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:6px;
    min-height:16px;
  }

  .hint.error{
    color:var(--error);
    font-weight:500;
  }

  /* Dropdown */
  .country-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:0 12px 32px -8px rgba(16,24,40,0.18), 0 2px 8px rgba(16,24,40,0.06);
    z-index:20;
    opacity:0;
    transform:translateY(-6px) scale(.98);
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
    overflow:hidden;
  }
  
  

  .country-dropdown.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  .search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    background:#FAFBFC;
  }

  .search-icon{
    width:16px;
    height:16px;
    color:var(--text-faint);
    flex-shrink:0;
  }

  #countrySearch{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    min-width:0;
  }

  #countrySearch::placeholder{
    color:var(--text-faint);
  }

  .country-list{
    max-height:272px;
    overflow-y:auto;
    padding:6px;
  }

  .country-list::-webkit-scrollbar{ width:8px; }
  .country-list::-webkit-scrollbar-thumb{ background:#E1E4EA; border-radius:8px; }
  .country-list::-webkit-scrollbar-track{ background:transparent; }

  .country-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
  }

  .country-option .c-name{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-weight:500;
  }

  .country-option .c-dial{
    color:var(--text-secondary);
    font-size:13px;
    font-weight:500;
    flex-shrink:0;
  }

  .country-option:hover,
  .country-option.active{
    background:var(--accent-tint);
  }

  .country-option.selected .c-name{
    color:var(--accent-strong);
    font-weight:600;
  }

  .country-option .check{
    width:15px;
    height:15px;
    color:var(--accent);
    flex-shrink:0;
    visibility:hidden;
  }
  .country-option.selected .check{ visibility:visible; }

  .no-results{
    padding:24px 12px;
    text-align:center;
    font-size:13.5px;
    color:var(--text-faint);
  }

  @media (max-width:480px){
    .card{ padding:22px 18px 20px; border-radius:14px; }
    .country-list{ max-height:44vh; }
  }
  
  /* New start CSS Added*/
  
  /*
    ==========================================================================
    STYLES — every selector below is scoped under .ipn-widget (the wrapper
    class already on your markup), so nothing here touches .card, .hint,
    .divider, etc. anywhere else on your site. Classes your site already
    defines — .wrap-input100, .input100, .focus-input100 — are intentionally
    left alone; only the pieces that had no existing styling are filled in.
    No bare * or body selectors are used.
    ==========================================================================
  */

  .ipn-widget{
    --ipn-text: #101828;
    --ipn-text-secondary: #667085;
    --ipn-text-faint: #98A2B3;
    --ipn-border: #D8DCE3;
    --ipn-border-hover: #B4BBC6;
    --ipn-accent: #1D5D74;
    --ipn-accent-strong: #164A5D;
    --ipn-accent-tint: #E7F1F4;
    --ipn-error: #D92D20;
    font-family: inherit;
  }

  /* .card is generic/reused elsewhere on the site, so this rule is scoped
     tightly to .ipn-widget .card and won't affect other cards on the page. */

  .ipn-widget .phone-field{
    position:relative;
    box-sizing:border-box;
  }

  .ipn-widget .phone-input-group{
    display:flex;
    align-items:stretch;
    position:relative; /* anchors .focus-input100's absolute overlay to this row */
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
    box-sizing:border-box;
  }

  .ipn-widget .phone-input-group:hover{
    border-color:var(--ipn-border-hover);
  }

  .ipn-widget .phone-input-group.is-focused{
    border-color:var(--ipn-accent);
    box-shadow:0 0 0 4px rgba(29,93,116,0.14);
  }

  .ipn-widget .phone-input-group.is-error{
    border-color:var(--ipn-error);
  }
  .ipn-widget .phone-input-group.is-error.is-focused{
    box-shadow:0 0 0 4px rgba(217,45,32,0.12);
  }

  .ipn-widget .country-select{
    display:flex;
    align-items:center;
    gap:7px;
    background:transparent;
    border:none;
    padding:0 10px 0 14px;
    cursor:pointer;
    border-radius:10px 0 0 10px;
    color:var(--ipn-text);
    font-family:inherit;
    box-sizing:border-box;
  }

  .ipn-widget .country-select:focus-visible{
    outline:2px solid var(--ipn-accent);
    outline-offset:-2px;
  }

  .ipn-widget .flag-img{
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(16,24,40,0.10);
    display:block;
    flex-shrink:0;
    background:#F2F4F7;
  }

  .ipn-widget .country-option .flag-img{
    width:20px;
    height:15px;
  }

  .ipn-widget .dial-code{
    font-size:14.5px;
    font-weight:600;
    color:var(--ipn-text);
    white-space:nowrap;
  }

  .ipn-widget .chevron{
    width:14px;
    height:14px;
    color:var(--ipn-text-faint);
    transition:transform .15s ease;
    margin-left:1px;
  }

  .ipn-widget .country-select[aria-expanded="true"] .chevron{
    transform:rotate(180deg);
  }

  .ipn-widget .divider{
    width:1px;
    margin:9px 0;
    background:var(--ipn-border);
    flex-shrink:0;
  }

  /* input100 keeps your site's own look; just make sure it fills the row */
  .ipn-widget .phone-input-group .input100{
    flex:1;
    min-width:0;
  }

  .ipn-widget .hint{
    margin:8px 2px 0;
    font-size:12.5px;
    color:var(--ipn-text-secondary);
    display:flex;
    align-items:center;
    gap:6px;
    min-height:16px;
  }

  .ipn-widget .hint.error{
    color:var(--ipn-error);
    font-weight:500;
  }
  
.second-Phone-Input:has(.secondInput:focus) {
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6)!important;
}

/* Applies to all phone-input-group instances at once */
.phone-input-group:not(.ready) .chevron,
.phone-input-group:not(.ready) .search-icon {
    visibility: hidden;
}

  /* Dropdown */
  .ipn-widget .country-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:#fff;
    border:1px solid var(--ipn-border);
    border-radius:10px;
    box-shadow:0 12px 32px -8px rgba(16,24,40,0.18), 0 2px 8px rgba(16,24,40,0.06);
    z-index:20;
    opacity:0;
    transform:translateY(-6px) scale(.98);
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
    overflow:hidden;
    box-sizing:border-box;
  }

  .ipn-widget .country-dropdown.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  .ipn-widget .search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-bottom:1px solid var(--ipn-border);
    background:#FAFBFC;
    box-sizing:border-box;
  }

  .ipn-widget .search-icon{
    width:16px;
    height:16px;
    color:var(--ipn-text-faint);
    flex-shrink:0;
  }

  .ipn-widget .search-wrap input[type="text"]{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:14px;
    color:var(--ipn-text);
    min-width:0;
    box-sizing:border-box;
  }

  .ipn-widget .country-list{
    max-height:272px;
    overflow-y:auto;
    padding:6px;
    margin:0;
    box-sizing:border-box;
  }

  .ipn-widget .country-list::-webkit-scrollbar{ width:8px; }
  .ipn-widget .country-list::-webkit-scrollbar-thumb{ background:#E1E4EA; border-radius:8px; }
  .ipn-widget .country-list::-webkit-scrollbar-track{ background:transparent; }

  .ipn-widget .country-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    list-style:none;
    box-sizing:border-box;
  }

  .ipn-widget .c-name{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--ipn-text);
    font-weight:500;
  }

  .ipn-widget .c-dial{
    color:var(--ipn-text-secondary);
    font-size:13px;
    font-weight:500;
    flex-shrink:0;
  }

  .ipn-widget .country-option:hover,
  .ipn-widget .country-option.active{
    background:var(--ipn-accent-tint);
  }

  .ipn-widget .country-option.selected .c-name{
    color:var(--ipn-accent-strong);
    font-weight:600;
  }

  .ipn-widget .check{
    width:15px;
    height:15px;
    color:var(--ipn-accent);
    flex-shrink:0;
    visibility:hidden;
  }
  .ipn-widget .country-option.selected .check{ visibility:visible; }

  .ipn-widget .no-results{
    padding:24px 12px;
    text-align:center;
    font-size:13.5px;
    color:var(--ipn-text-faint);
  }

  @media (max-width:480px){
    .ipn-widget .card{ padding:18px 14px; }
    .ipn-widget .country-list{ max-height:44vh; }
  }
    /* New end CSS Added*/