* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #2d2d2d url('background.jpg') center center/cover no-repeat;
    min-height: 100vh;
    overflow-x: hidden;
}

.background-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.form-container {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #e53e3e;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    position: relative;
    box-shadow: 0 0 30px rgba(229, 62, 62, 0.3);
    margin: auto;
}

.form-header {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    height: 50px;
    width: auto;
}

.form-description {
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #fff;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #555;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #e53e3e;
    box-shadow: 0 0 10px rgba(229, 62, 62, 0.3);
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #555;
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    transition: border-color 0.3s ease;
    position: relative;
}

.phone-input-wrapper:focus-within {
    border-color: #e53e3e;
    box-shadow: 0 0 10px rgba(229, 62, 62, 0.3);
}

.country-selector {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-right: 1px solid #ddd;
    cursor: pointer;
    padding: 12px 10px;
    position: relative;
    min-width: 75px;
    transition: background-color 0.3s ease;
    user-select: none;
}

.country-selector:hover {
    background: #e9ecef;
}

.country-selector .flag-icon {
    width: 16px;
    height: 11px;
    margin-right: 8px;
    border-radius: 2px;
}

.country-code {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-right: 5px;
}

.dropdown-arrow {
    font-size: 10px;
    color: #666;
    transition: transform 0.3s ease;
}

.country-selector.active .dropdown-arrow {
    transform: rotate(180deg);
}

.country-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    width: 300px;
    min-width: 280px;
    background: white;
    border: 2px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 1px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.country-selector.active .country-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.country-list {
    max-height: 400px;
    overflow-y: auto;
}

.country-list::-webkit-scrollbar {
    width: 6px;
}

.country-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.country-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.country-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.country-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    white-space: nowrap;
}

.country-item:hover {
    background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(2px);
    border-left: 3px solid #e53e3e;
    padding-left: 12px;
}

.country-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.country-item .flag-icon {
    width: 20px;
    height: 14px;
    margin-right: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.country-item .country-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-right: 10px;
}

.country-item .country-code {
    font-size: 13px;
    color: #999;
    font-weight: 400;
    margin-left: auto;
    padding-left: 10px;
}

.phone-input-wrapper input[type="tel"] {
    flex: 1;
    padding: 12px 15px;
    border: none;
    font-size: 14px;
    background: transparent;
    color: #333;
}

.phone-input-wrapper input[type="tel"]:focus {
    outline: none;
}

.phone-input-wrapper input[type="tel"]::placeholder {
    color: #999;
}

.flag-icon {
    display: inline-block;
    width: 16px;
    height: 11px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
}

.flag-icon.ad { background-image: url('svg/ad.svg'); }
.flag-icon.ae { background-image: url('svg/ae.svg'); }
.flag-icon.af { background-image: url('svg/af.svg'); }
.flag-icon.ag { background-image: url('svg/ag.svg'); }
.flag-icon.ai { background-image: url('svg/ai.svg'); }
.flag-icon.al { background-image: url('svg/al.svg'); }
.flag-icon.am { background-image: url('svg/am.svg'); }
.flag-icon.ao { background-image: url('svg/ao.svg'); }
.flag-icon.aq { background-image: url('svg/aq.svg'); }
.flag-icon.ar { background-image: url('svg/ar.svg'); }
.flag-icon.as { background-image: url('svg/as.svg'); }
.flag-icon.at { background-image: url('svg/at.svg'); }
.flag-icon.au { background-image: url('svg/au.svg'); }
.flag-icon.aw { background-image: url('svg/aw.svg'); }
.flag-icon.ax { background-image: url('svg/ax.svg'); }
.flag-icon.az { background-image: url('svg/az.svg'); }
.flag-icon.ba { background-image: url('svg/ba.svg'); }
.flag-icon.bb { background-image: url('svg/bb.svg'); }
.flag-icon.bd { background-image: url('svg/bd.svg'); }
.flag-icon.be { background-image: url('svg/be.svg'); }
.flag-icon.bf { background-image: url('svg/bf.svg'); }
.flag-icon.bg { background-image: url('svg/bg.svg'); }
.flag-icon.bh { background-image: url('svg/bh.svg'); }
.flag-icon.bi { background-image: url('svg/bi.svg'); }
.flag-icon.bj { background-image: url('svg/bj.svg'); }
.flag-icon.bl { background-image: url('svg/bl.svg'); }
.flag-icon.bm { background-image: url('svg/bm.svg'); }
.flag-icon.bn { background-image: url('svg/bn.svg'); }
.flag-icon.bo { background-image: url('svg/bo.svg'); }
.flag-icon.bq { background-image: url('svg/bq.svg'); }
.flag-icon.br { background-image: url('svg/br.svg'); }
.flag-icon.bs { background-image: url('svg/bs.svg'); }
.flag-icon.bt { background-image: url('svg/bt.svg'); }
.flag-icon.bv { background-image: url('svg/bv.svg'); }
.flag-icon.bw { background-image: url('svg/bw.svg'); }
.flag-icon.by { background-image: url('svg/by.svg'); }
.flag-icon.bz { background-image: url('svg/bz.svg'); }
.flag-icon.ca { background-image: url('svg/ca.svg'); }
.flag-icon.cc { background-image: url('svg/cc.svg'); }
.flag-icon.cd { background-image: url('svg/cd.svg'); }
.flag-icon.cf { background-image: url('svg/cf.svg'); }
.flag-icon.cg { background-image: url('svg/cg.svg'); }
.flag-icon.ch { background-image: url('svg/ch.svg'); }
.flag-icon.ci { background-image: url('svg/ci.svg'); }
.flag-icon.ck { background-image: url('svg/ck.svg'); }
.flag-icon.cl { background-image: url('svg/cl.svg'); }
.flag-icon.cm { background-image: url('svg/cm.svg'); }
.flag-icon.cn { background-image: url('svg/cn.svg'); }
.flag-icon.co { background-image: url('svg/co.svg'); }
.flag-icon.cr { background-image: url('svg/cr.svg'); }
.flag-icon.cu { background-image: url('svg/cu.svg'); }
.flag-icon.cv { background-image: url('svg/cv.svg'); }
.flag-icon.cw { background-image: url('svg/cw.svg'); }
.flag-icon.cx { background-image: url('svg/cx.svg'); }
.flag-icon.cy { background-image: url('svg/cy.svg'); }
.flag-icon.cz { background-image: url('svg/cz.svg'); }
.flag-icon.de { background-image: url('svg/de.svg'); }
.flag-icon.dj { background-image: url('svg/dj.svg'); }
.flag-icon.dk { background-image: url('svg/dk.svg'); }
.flag-icon.dm { background-image: url('svg/dm.svg'); }
.flag-icon.do { background-image: url('svg/do.svg'); }
.flag-icon.dz { background-image: url('svg/dz.svg'); }
.flag-icon.ec { background-image: url('svg/ec.svg'); }
.flag-icon.ee { background-image: url('svg/ee.svg'); }
.flag-icon.eg { background-image: url('svg/eg.svg'); }
.flag-icon.eh { background-image: url('svg/eh.svg'); }
.flag-icon.er { background-image: url('svg/er.svg'); }
.flag-icon.es { background-image: url('svg/es.svg'); }
.flag-icon.et { background-image: url('svg/et.svg'); }
.flag-icon.eu { background-image: url('svg/eu.svg'); }
.flag-icon.fi { background-image: url('svg/fi.svg'); }
.flag-icon.fj { background-image: url('svg/fj.svg'); }
.flag-icon.fk { background-image: url('svg/fk.svg'); }
.flag-icon.fm { background-image: url('svg/fm.svg'); }
.flag-icon.fo { background-image: url('svg/fo.svg'); }
.flag-icon.fr { background-image: url('svg/fr.svg'); }
.flag-icon.ga { background-image: url('svg/ga.svg'); }
.flag-icon.gb { background-image: url('svg/gb.svg'); }
.flag-icon.gd { background-image: url('svg/gd.svg'); }
.flag-icon.ge { background-image: url('svg/ge.svg'); }
.flag-icon.gf { background-image: url('svg/gf.svg'); }
.flag-icon.gg { background-image: url('svg/gg.svg'); }
.flag-icon.gh { background-image: url('svg/gh.svg'); }
.flag-icon.gi { background-image: url('svg/gi.svg'); }
.flag-icon.gl { background-image: url('svg/gl.svg'); }
.flag-icon.gm { background-image: url('svg/gm.svg'); }
.flag-icon.gn { background-image: url('svg/gn.svg'); }
.flag-icon.gp { background-image: url('svg/gp.svg'); }
.flag-icon.gq { background-image: url('svg/gq.svg'); }
.flag-icon.gr { background-image: url('svg/gr.svg'); }
.flag-icon.gs { background-image: url('svg/gs.svg'); }
.flag-icon.gt { background-image: url('svg/gt.svg'); }
.flag-icon.gu { background-image: url('svg/gu.svg'); }
.flag-icon.gw { background-image: url('svg/gw.svg'); }
.flag-icon.gy { background-image: url('svg/gy.svg'); }
.flag-icon.hk { background-image: url('svg/hk.svg'); }
.flag-icon.hm { background-image: url('svg/hm.svg'); }
.flag-icon.hn { background-image: url('svg/hn.svg'); }
.flag-icon.hr { background-image: url('svg/hr.svg'); }
.flag-icon.ht { background-image: url('svg/ht.svg'); }
.flag-icon.hu { background-image: url('svg/hu.svg'); }
.flag-icon.id { background-image: url('svg/id.svg'); }
.flag-icon.ie { background-image: url('svg/ie.svg'); }
.flag-icon.il { background-image: url('svg/il.svg'); }
.flag-icon.im { background-image: url('svg/im.svg'); }
.flag-icon.in { background-image: url('svg/in.svg'); }
.flag-icon.io { background-image: url('svg/io.svg'); }
.flag-icon.iq { background-image: url('svg/iq.svg'); }
.flag-icon.ir { background-image: url('svg/ir.svg'); }
.flag-icon.is { background-image: url('svg/is.svg'); }
.flag-icon.it { background-image: url('svg/it.svg'); }
.flag-icon.je { background-image: url('svg/je.svg'); }
.flag-icon.jm { background-image: url('svg/jm.svg'); }
.flag-icon.jo { background-image: url('svg/jo.svg'); }
.flag-icon.jp { background-image: url('svg/jp.svg'); }
.flag-icon.ke { background-image: url('svg/ke.svg'); }
.flag-icon.kg { background-image: url('svg/kg.svg'); }
.flag-icon.kh { background-image: url('svg/kh.svg'); }
.flag-icon.ki { background-image: url('svg/ki.svg'); }
.flag-icon.km { background-image: url('svg/km.svg'); }
.flag-icon.kn { background-image: url('svg/kn.svg'); }
.flag-icon.kp { background-image: url('svg/kp.svg'); }
.flag-icon.kr { background-image: url('svg/kr.svg'); }
.flag-icon.kw { background-image: url('svg/kw.svg'); }
.flag-icon.ky { background-image: url('svg/ky.svg'); }
.flag-icon.kz { background-image: url('svg/kz.svg'); }
.flag-icon.la { background-image: url('svg/la.svg'); }
.flag-icon.lb { background-image: url('svg/lb.svg'); }
.flag-icon.lc { background-image: url('svg/lc.svg'); }
.flag-icon.li { background-image: url('svg/li.svg'); }
.flag-icon.lk { background-image: url('svg/lk.svg'); }
.flag-icon.lr { background-image: url('svg/lr.svg'); }
.flag-icon.ls { background-image: url('svg/ls.svg'); }
.flag-icon.lt { background-image: url('svg/lt.svg'); }
.flag-icon.lu { background-image: url('svg/lu.svg'); }
.flag-icon.lv { background-image: url('svg/lv.svg'); }
.flag-icon.ly { background-image: url('svg/ly.svg'); }
.flag-icon.ma { background-image: url('svg/ma.svg'); }
.flag-icon.mc { background-image: url('svg/mc.svg'); }
.flag-icon.md { background-image: url('svg/md.svg'); }
.flag-icon.me { background-image: url('svg/me.svg'); }
.flag-icon.mf { background-image: url('svg/mf.svg'); }
.flag-icon.mg { background-image: url('svg/mg.svg'); }
.flag-icon.mh { background-image: url('svg/mh.svg'); }
.flag-icon.mk { background-image: url('svg/mk.svg'); }
.flag-icon.ml { background-image: url('svg/ml.svg'); }
.flag-icon.mm { background-image: url('svg/mm.svg'); }
.flag-icon.mn { background-image: url('svg/mn.svg'); }
.flag-icon.mo { background-image: url('svg/mo.svg'); }
.flag-icon.mp { background-image: url('svg/mp.svg'); }
.flag-icon.mq { background-image: url('svg/mq.svg'); }
.flag-icon.mr { background-image: url('svg/mr.svg'); }
.flag-icon.ms { background-image: url('svg/ms.svg'); }
.flag-icon.mt { background-image: url('svg/mt.svg'); }
.flag-icon.mu { background-image: url('svg/mu.svg'); }
.flag-icon.mv { background-image: url('svg/mv.svg'); }
.flag-icon.mw { background-image: url('svg/mw.svg'); }
.flag-icon.mx { background-image: url('svg/mx.svg'); }
.flag-icon.my { background-image: url('svg/my.svg'); }
.flag-icon.mz { background-image: url('svg/mz.svg'); }
.flag-icon.na { background-image: url('svg/na.svg'); }
.flag-icon.nc { background-image: url('svg/nc.svg'); }
.flag-icon.ne { background-image: url('svg/ne.svg'); }
.flag-icon.nf { background-image: url('svg/nf.svg'); }
.flag-icon.ng { background-image: url('svg/ng.svg'); }
.flag-icon.ni { background-image: url('svg/ni.svg'); }
.flag-icon.nl { background-image: url('svg/nl.svg'); }
.flag-icon.no { background-image: url('svg/no.svg'); }
.flag-icon.np { background-image: url('svg/np.svg'); }
.flag-icon.nr { background-image: url('svg/nr.svg'); }
.flag-icon.nu { background-image: url('svg/nu.svg'); }
.flag-icon.nz { background-image: url('svg/nz.svg'); }
.flag-icon.om { background-image: url('svg/om.svg'); }
.flag-icon.pa { background-image: url('svg/pa.svg'); }
.flag-icon.pe { background-image: url('svg/pe.svg'); }
.flag-icon.pf { background-image: url('svg/pf.svg'); }
.flag-icon.pg { background-image: url('svg/pg.svg'); }
.flag-icon.ph { background-image: url('svg/ph.svg'); }
.flag-icon.pk { background-image: url('svg/pk.svg'); }
.flag-icon.pl { background-image: url('svg/pl.svg'); }
.flag-icon.pm { background-image: url('svg/pm.svg'); }
.flag-icon.pn { background-image: url('svg/pn.svg'); }
.flag-icon.pr { background-image: url('svg/pr.svg'); }
.flag-icon.ps { background-image: url('svg/ps.svg'); }
.flag-icon.pt { background-image: url('svg/pt.svg'); }
.flag-icon.pw { background-image: url('svg/pw.svg'); }
.flag-icon.py { background-image: url('svg/py.svg'); }
.flag-icon.qa { background-image: url('svg/qa.svg'); }
.flag-icon.re { background-image: url('svg/re.svg'); }
.flag-icon.ro { background-image: url('svg/ro.svg'); }
.flag-icon.rs { background-image: url('svg/rs.svg'); }
.flag-icon.ru { background-image: url('svg/ru.svg'); }
.flag-icon.rw { background-image: url('svg/rw.svg'); }
.flag-icon.sa { background-image: url('svg/sa.svg'); }
.flag-icon.sb { background-image: url('svg/sb.svg'); }
.flag-icon.sc { background-image: url('svg/sc.svg'); }
.flag-icon.sd { background-image: url('svg/sd.svg'); }
.flag-icon.se { background-image: url('svg/se.svg'); }
.flag-icon.sg { background-image: url('svg/sg.svg'); }
.flag-icon.sh { background-image: url('svg/sh.svg'); }
.flag-icon.si { background-image: url('svg/si.svg'); }
.flag-icon.sj { background-image: url('svg/sj.svg'); }
.flag-icon.sk { background-image: url('svg/sk.svg'); }
.flag-icon.sl { background-image: url('svg/sl.svg'); }
.flag-icon.sm { background-image: url('svg/sm.svg'); }
.flag-icon.sn { background-image: url('svg/sn.svg'); }
.flag-icon.so { background-image: url('svg/so.svg'); }
.flag-icon.sr { background-image: url('svg/sr.svg'); }
.flag-icon.ss { background-image: url('svg/ss.svg'); }
.flag-icon.st { background-image: url('svg/st.svg'); }
.flag-icon.sv { background-image: url('svg/sv.svg'); }
.flag-icon.sx { background-image: url('svg/sx.svg'); }
.flag-icon.sy { background-image: url('svg/sy.svg'); }
.flag-icon.sz { background-image: url('svg/sz.svg'); }
.flag-icon.tc { background-image: url('svg/tc.svg'); }
.flag-icon.td { background-image: url('svg/td.svg'); }
.flag-icon.tf { background-image: url('svg/tf.svg'); }
.flag-icon.tg { background-image: url('svg/tg.svg'); }
.flag-icon.th { background-image: url('svg/th.svg'); }
.flag-icon.tj { background-image: url('svg/tj.svg'); }
.flag-icon.tk { background-image: url('svg/tk.svg'); }
.flag-icon.tl { background-image: url('svg/tl.svg'); }
.flag-icon.tm { background-image: url('svg/tm.svg'); }
.flag-icon.tn { background-image: url('svg/tn.svg'); }
.flag-icon.to { background-image: url('svg/to.svg'); }
.flag-icon.tr { background-image: url('svg/tr.svg'); }
.flag-icon.tt { background-image: url('svg/tt.svg'); }
.flag-icon.tv { background-image: url('svg/tv.svg'); }
.flag-icon.tw { background-image: url('svg/tw.svg'); }
.flag-icon.tz { background-image: url('svg/tz.svg'); }
.flag-icon.ua { background-image: url('svg/ua.svg'); }
.flag-icon.ug { background-image: url('svg/ug.svg'); }
.flag-icon.um { background-image: url('svg/um.svg'); }
.flag-icon.us { background-image: url('svg/us.svg'); }
.flag-icon.uy { background-image: url('svg/uy.svg'); }
.flag-icon.uz { background-image: url('svg/uz.svg'); }
.flag-icon.va { background-image: url('svg/va.svg'); }
.flag-icon.vc { background-image: url('svg/vc.svg'); }
.flag-icon.ve { background-image: url('svg/ve.svg'); }
.flag-icon.vg { background-image: url('svg/vg.svg'); }
.flag-icon.vi { background-image: url('svg/vi.svg'); }
.flag-icon.vn { background-image: url('svg/vn.svg'); }
.flag-icon.vu { background-image: url('svg/vu.svg'); }
.flag-icon.wf { background-image: url('svg/wf.svg'); }
.flag-icon.ws { background-image: url('svg/ws.svg'); }
.flag-icon.xk { background-image: url('svg/xk.svg'); }
.flag-icon.ye { background-image: url('svg/ye.svg'); }
.flag-icon.yt { background-image: url('svg/yt.svg'); }
.flag-icon.za { background-image: url('svg/za.svg'); }
.flag-icon.zm { background-image: url('svg/zm.svg'); }
.flag-icon.zw { background-image: url('svg/zw.svg'); }

.phone-input input {
    border: none;
    flex: 1;
    padding: 12px;
    font-size: 14px;
}

.phone-input input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
    font-family: inherit;
}

.form-group select {
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #c53030, #e53e3e);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(229, 62, 62, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .form-container {
        margin: 20px;
        padding: 20px;
    }
    
    .phone-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .country-selector {
        border-right: none;
        border-bottom: 1px solid #ddd;
        justify-content: center;
        min-width: auto;
        position: relative;
    }
    
    .country-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 350px !important;
        max-height: 60vh !important;
        border-radius: 8px !important;
        z-index: 10000 !important;
        border: 2px solid #e53e3e !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        border-top: 2px solid #e53e3e !important;
        margin-top: 0 !important;
    }
    
    .country-selector.active .country-dropdown {
        display: block !important;
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .country-selector.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    
    .country-list {
        max-height: 50vh !important;
        overflow-y: auto;
    }
    
    .country-item {
        padding: 15px;
        font-size: 16px;
    }
    
    .country-item .flag-icon {
        width: 24px;
        height: 16px;
        margin-right: 12px;
    }
    
    .country-item .country-name {
        font-size: 16px;
    }
    
    .country-item .country-code {
        font-size: 14px;
    }
}

.loading {
    opacity: 0.7;
    pointer-events: none;
}

.success-message {
    background: #4caf50;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    display: none;
}

.error-message {
    background: #f44336;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    display: none;
}