/* Phone Country Code Selector */
.phone-country-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.phone-country-wrapper input.phone {
    flex: 1;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
    min-width: 0;
}

.phone-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid #000;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    min-width: 85px;
    position: relative;
    font-size: 13px;
    line-height: 1;
}

.phone-country-btn .flag-icon {
    display: inline-block;
    width: 16px;
    height: 11px;
    background-image: url('/Content/Images/flags.png');
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.phone-country-btn .dial-code {
    font-weight: 600;
    color: #333;
}

.phone-country-btn .arrow {
    font-size: 8px;
    color: #666;
    margin-left: 2px;
}

.phone-country-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    width: 300px;
    max-height: 250px;
    overflow: hidden;
    flex-direction: column;
}

.phone-country-dropdown.open {
    display: flex;
}

.phone-country-dropdown .pcc-search {
    padding: 8px;
    border: none;
    border-bottom: 1px solid #eee;
    outline: none;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.phone-country-dropdown .pcc-list {
    overflow-y: auto;
    flex: 1;
}

.phone-country-dropdown .pcc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.phone-country-dropdown .pcc-item:hover {
    background: #f0f4ff;
}

.phone-country-dropdown .pcc-item.active {
    background: #e8f0fe;
    font-weight: 600;
}

.phone-country-dropdown .pcc-item .flag-icon {
    display: inline-block;
    width: 16px;
    height: 11px;
    background-image: url('/Content/Images/flags.png');
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.phone-country-dropdown .pcc-item .pcc-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-country-dropdown .pcc-item .pcc-dial {
    color: #888;
    font-size: 12px;
}

/* Flag background positions */
.flag-icon.ad { background-position: -16px 0 }
.flag-icon.ae { background-position: -32px 0 }
.flag-icon.af { background-position: -48px 0 }
.flag-icon.ag { background-position: -64px 0 }
.flag-icon.ai { background-position: -80px 0 }
.flag-icon.al { background-position: -96px 0 }
.flag-icon.am { background-position: -112px 0 }
.flag-icon.ao { background-position: -128px 0 }
.flag-icon.ar { background-position: -144px 0 }
.flag-icon.as { background-position: -160px 0 }
.flag-icon.at { background-position: -176px 0 }
.flag-icon.au { background-position: -192px 0 }
.flag-icon.aw { background-position: -208px 0 }
.flag-icon.az { background-position: -224px 0 }
.flag-icon.ba { background-position: -240px 0 }
.flag-icon.bb { background-position: 0 -11px }
.flag-icon.bd { background-position: -16px -11px }
.flag-icon.be { background-position: -32px -11px }
.flag-icon.bf { background-position: -48px -11px }
.flag-icon.bg { background-position: -64px -11px }
.flag-icon.bh { background-position: -80px -11px }
.flag-icon.bi { background-position: -96px -11px }
.flag-icon.bj { background-position: -112px -11px }
.flag-icon.bm { background-position: -128px -11px }
.flag-icon.bn { background-position: -144px -11px }
.flag-icon.bo { background-position: -160px -11px }
.flag-icon.br { background-position: -176px -11px }
.flag-icon.bs { background-position: -192px -11px }
.flag-icon.bt { background-position: -208px -11px }
.flag-icon.bw { background-position: -224px -11px }
.flag-icon.by { background-position: -240px -11px }
.flag-icon.bz { background-position: 0 -22px }
.flag-icon.ca { background-position: -16px -22px }
.flag-icon.cd { background-position: -32px -22px }
.flag-icon.cf { background-position: -48px -22px }
.flag-icon.cg { background-position: -64px -22px }
.flag-icon.ch { background-position: -80px -22px }
.flag-icon.ci { background-position: -96px -22px }
.flag-icon.ck { background-position: -112px -22px }
.flag-icon.cl { background-position: -128px -22px }
.flag-icon.cm { background-position: -144px -22px }
.flag-icon.cn { background-position: -160px -22px }
.flag-icon.co { background-position: -176px -22px }
.flag-icon.cr { background-position: -192px -22px }
.flag-icon.cu { background-position: -208px -22px }
.flag-icon.cv { background-position: -224px -22px }
.flag-icon.cw { background-position: -240px -22px }
.flag-icon.cy { background-position: 0 -33px }
.flag-icon.cz { background-position: -16px -33px }
.flag-icon.de { background-position: -32px -33px }
.flag-icon.dj { background-position: -48px -33px }
.flag-icon.dk { background-position: -64px -33px }
.flag-icon.dm { background-position: -80px -33px }
.flag-icon.do { background-position: -96px -33px }
.flag-icon.dz { background-position: -112px -33px }
.flag-icon.ec { background-position: -128px -33px }
.flag-icon.ee { background-position: -144px -33px }
.flag-icon.eg { background-position: -160px -33px }
.flag-icon.er { background-position: -176px -33px }
.flag-icon.es { background-position: -192px -33px }
.flag-icon.et { background-position: -208px -33px }
.flag-icon.fi { background-position: -224px -33px }
.flag-icon.fj { background-position: -240px -33px }
.flag-icon.fk { background-position: 0 -44px }
.flag-icon.fm { background-position: -16px -44px }
.flag-icon.fo { background-position: -32px -44px }
.flag-icon.fr { background-position: -48px -44px }
.flag-icon.ga { background-position: -64px -44px }
.flag-icon.gb { background-position: -80px -44px }
.flag-icon.gd { background-position: -96px -44px }
.flag-icon.ge { background-position: -112px -44px }
.flag-icon.gf { background-position: -128px -44px }
.flag-icon.gh { background-position: -144px -44px }
.flag-icon.gi { background-position: -160px -44px }
.flag-icon.gl { background-position: -176px -44px }
.flag-icon.gm { background-position: -192px -44px }
.flag-icon.gn { background-position: -208px -44px }
.flag-icon.gp { background-position: -224px -44px }
.flag-icon.gq { background-position: -240px -44px }
.flag-icon.gr { background-position: 0 -55px }
.flag-icon.gt { background-position: -16px -55px }
.flag-icon.gu { background-position: -32px -55px }
.flag-icon.gw { background-position: -48px -55px }
.flag-icon.gy { background-position: -64px -55px }
.flag-icon.hk { background-position: -80px -55px }
.flag-icon.hn { background-position: -96px -55px }
.flag-icon.hr { background-position: -112px -55px }
.flag-icon.ht { background-position: -128px -55px }
.flag-icon.hu { background-position: -144px -55px }
.flag-icon.id { background-position: -160px -55px }
.flag-icon.ie { background-position: -176px -55px }
.flag-icon.il { background-position: -192px -55px }
.flag-icon.in { background-position: -208px -55px }
.flag-icon.io { background-position: -224px -55px }
.flag-icon.iq { background-position: -240px -55px }
.flag-icon.ir { background-position: 0 -66px }
.flag-icon.is { background-position: -16px -66px }
.flag-icon.it { background-position: -32px -66px }
.flag-icon.je { background-position: -144px -154px }
.flag-icon.jm { background-position: -48px -66px }
.flag-icon.jo { background-position: -64px -66px }
.flag-icon.jp { background-position: -80px -66px }
.flag-icon.ke { background-position: -96px -66px }
.flag-icon.kg { background-position: -112px -66px }
.flag-icon.kh { background-position: -128px -66px }
.flag-icon.ki { background-position: -144px -66px }
.flag-icon.xk { background-position: -128px -154px }
.flag-icon.km { background-position: -160px -66px }
.flag-icon.kn { background-position: -176px -66px }
.flag-icon.kp { background-position: -192px -66px }
.flag-icon.kr { background-position: -208px -66px }
.flag-icon.kw { background-position: -224px -66px }
.flag-icon.ky { background-position: -240px -66px }
.flag-icon.kz { background-position: 0 -77px }
.flag-icon.la { background-position: -16px -77px }
.flag-icon.lb { background-position: -32px -77px }
.flag-icon.lc { background-position: -48px -77px }
.flag-icon.li { background-position: -64px -77px }
.flag-icon.lk { background-position: -80px -77px }
.flag-icon.lr { background-position: -96px -77px }
.flag-icon.ls { background-position: -112px -77px }
.flag-icon.lt { background-position: -128px -77px }
.flag-icon.lu { background-position: -144px -77px }
.flag-icon.lv { background-position: -160px -77px }
.flag-icon.ly { background-position: -176px -77px }
.flag-icon.ma { background-position: -192px -77px }
.flag-icon.mc { background-position: -208px -77px }
.flag-icon.md { background-position: -224px -77px }
.flag-icon.me { background-position: -112px -154px }
.flag-icon.mg { background-position: 0 -88px }
.flag-icon.mh { background-position: -16px -88px }
.flag-icon.mk { background-position: -32px -88px }
.flag-icon.ml { background-position: -48px -88px }
.flag-icon.mm { background-position: -64px -88px }
.flag-icon.mn { background-position: -80px -88px }
.flag-icon.mo { background-position: -96px -88px }
.flag-icon.mp { background-position: -112px -88px }
.flag-icon.mq { background-position: -128px -88px }
.flag-icon.mr { background-position: -144px -88px }
.flag-icon.ms { background-position: -160px -88px }
.flag-icon.mt { background-position: -176px -88px }
.flag-icon.mu { background-position: -192px -88px }
.flag-icon.mv { background-position: -208px -88px }
.flag-icon.mw { background-position: -224px -88px }
.flag-icon.mx { background-position: -240px -88px }
.flag-icon.my { background-position: 0 -99px }
.flag-icon.mz { background-position: -16px -99px }
.flag-icon.na { background-position: -32px -99px }
.flag-icon.nc { background-position: -48px -99px }
.flag-icon.ne { background-position: -64px -99px }
.flag-icon.nf { background-position: -80px -99px }
.flag-icon.ng { background-position: -96px -99px }
.flag-icon.ni { background-position: -112px -99px }
.flag-icon.nl { background-position: -128px -99px }
.flag-icon.no { background-position: -144px -99px }
.flag-icon.np { background-position: -160px -99px }
.flag-icon.nr { background-position: -176px -99px }
.flag-icon.nu { background-position: -192px -99px }
.flag-icon.nz { background-position: -208px -99px }
.flag-icon.om { background-position: -224px -99px }
.flag-icon.pa { background-position: -240px -99px }
.flag-icon.pe { background-position: 0 -110px }
.flag-icon.pf { background-position: -16px -110px }
.flag-icon.pg { background-position: -32px -110px }
.flag-icon.ph { background-position: -48px -110px }
.flag-icon.pk { background-position: -64px -110px }
.flag-icon.pl { background-position: -80px -110px }
.flag-icon.pm { background-position: -96px -110px }
.flag-icon.pr { background-position: -112px -110px }
.flag-icon.ps { background-position: -128px -110px }
.flag-icon.pt { background-position: -144px -110px }
.flag-icon.pw { background-position: -160px -110px }
.flag-icon.py { background-position: -176px -110px }
.flag-icon.qa { background-position: -192px -110px }
.flag-icon.re { background-position: -208px -110px }
.flag-icon.ro { background-position: -224px -110px }
.flag-icon.rs { background-position: -240px -110px }
.flag-icon.ru { background-position: 0 -121px }
.flag-icon.rw { background-position: -16px -121px }
.flag-icon.sa { background-position: -32px -121px }
.flag-icon.sb { background-position: -48px -121px }
.flag-icon.sc { background-position: -64px -121px }
.flag-icon.sd { background-position: -80px -121px }
.flag-icon.se { background-position: -96px -121px }
.flag-icon.sg { background-position: -112px -121px }
.flag-icon.sh { background-position: -128px -121px }
.flag-icon.si { background-position: -144px -121px }
.flag-icon.sk { background-position: -160px -121px }
.flag-icon.sl { background-position: -176px -121px }
.flag-icon.sm { background-position: -192px -121px }
.flag-icon.sn { background-position: -208px -121px }
.flag-icon.so { background-position: -224px -121px }
.flag-icon.sr { background-position: -240px -121px }
.flag-icon.ss { background-position: 0 -132px }
.flag-icon.st { background-position: -16px -132px }
.flag-icon.sv { background-position: -32px -132px }
.flag-icon.sx { background-position: -48px -132px }
.flag-icon.sy { background-position: -64px -132px }
.flag-icon.sz { background-position: -80px -132px }
.flag-icon.tc { background-position: -96px -132px }
.flag-icon.td { background-position: -112px -132px }
.flag-icon.tg { background-position: -128px -132px }
.flag-icon.th { background-position: -144px -132px }
.flag-icon.tj { background-position: -160px -132px }
.flag-icon.tk { background-position: -176px -132px }
.flag-icon.tl { background-position: -192px -132px }
.flag-icon.tm { background-position: -208px -132px }
.flag-icon.tn { background-position: -224px -132px }
.flag-icon.to { background-position: -240px -132px }
.flag-icon.tr { background-position: 0 -143px }
.flag-icon.tt { background-position: -16px -143px }
.flag-icon.tv { background-position: -32px -143px }
.flag-icon.tw { background-position: -48px -143px }
.flag-icon.tz { background-position: -64px -143px }
.flag-icon.ua { background-position: -80px -143px }
.flag-icon.ug { background-position: -96px -143px }
.flag-icon.us { background-position: -112px -143px }
.flag-icon.uy { background-position: -128px -143px }
.flag-icon.uz { background-position: -144px -143px }
.flag-icon.va { background-position: -160px -143px }
.flag-icon.vc { background-position: -176px -143px }
.flag-icon.ve { background-position: -192px -143px }
.flag-icon.vg { background-position: -208px -143px }
.flag-icon.vi { background-position: -224px -143px }
.flag-icon.vn { background-position: -240px -143px }
.flag-icon.vu { background-position: 0 -154px }
.flag-icon.wf { background-position: -16px -154px }
.flag-icon.ws { background-position: -32px -154px }
.flag-icon.ye { background-position: -48px -154px }
.flag-icon.za { background-position: -64px -154px }
.flag-icon.zm { background-position: -80px -154px }
.flag-icon.zw { background-position: -96px -154px }