/* ==============================
MAIN CONTAINER
============================== */

.pro-converter{
max-width:520px;
margin:0 auto;
font-family:'Inter',Arial;
position:relative;
z-index:10;
}

/* ==============================
CARD
============================== */

.card{
background:#fff;
padding:40px;
border-radius:24px;
box-shadow:0 25px 60px rgba(0,0,0,.08);
position:relative;
overflow:visible;
}

/* ==============================
INPUT
============================== */

.currency-input{
position:relative;
margin-bottom:32px;
}

.currency-input input{
width:100%;
padding:20px 130px 20px 20px;
font-size:24px;
border-radius:18px;
border:1px solid #ddd;
outline:none;
}

/* ==============================
SELECT BOX
============================== */

.currency-select{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:110px;
z-index:20;
}

/* ==============================
SELECTED
============================== */

.selected{
display:flex;
align-items:center;
gap:8px;
background:#f5f5f5;
padding:7px 12px;
border-radius:12px;
cursor:pointer;
font-weight:600;
}

.selected img{
width:22px;
pointer-events:none;
}

/* ==============================
DROPDOWN (IMPORTANT)
============================== */

.dropdown{
display:none;
position:absolute;
top:calc(100% + 10px);
right:0;
width:300px;
background:#fff;
border-radius:14px;
border:1px solid #e6e6e6;
box-shadow:0 20px 45px rgba(0,0,0,.15);
max-height:320px;
overflow-y:auto;
z-index:99999;
}

/* ==============================
ITEMS
============================== */

.currency-item{
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
cursor:pointer;
font-size:14px;
transition:0.2s;
}

.currency-item img{
width:22px;
}

.currency-item:hover{
background:#f5f7f9;
}

/* ==============================
SWAP BUTTON
============================== */

.swap-wrapper{
display:flex;
justify-content:center;
margin-bottom:25px;
}

#swapBtn{
background:#00b386;
color:#fff;
border:none;
width:55px;
height:55px;
border-radius:50%;
font-size:22px;
cursor:pointer;
transition:0.3s;
}

#swapBtn:hover{
background:#009973;
transform:rotate(180deg);
}

/* ==============================
TEXT
============================== */

.rate-line{
text-align:center;
margin-top:10px;
font-size:15px;
}

.seo-rate-line{
text-align:center;
font-size:16px;
margin-bottom:20px;
}

/* ==============================
Currency Search
============================== */
.currency-search{
width:100%;
padding:10px 12px;
border:none;
border-bottom:1px solid #eee;
outline:none;
font-size:14px;
}

.currency-list{
max-height:250px;
overflow-y:auto;
}

/* ==============================
MOBILE
============================== */

@media(max-width:480px){

.card{
padding:28px;
}

.currency-input input{
font-size:20px;
padding-right:110px;
}

.dropdown{
width:260px;
}

}