*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:linear-gradient(
        135deg,
        #111418 0%,
        #171c22 20%,
        #1d232b 45%,
        #162235 70%,
        #0c1420 100%
    );
    color:#ffffff;
}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:90px 0 40px;

}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
    padding:70px 80px;
}

.hero-text{
    flex:1;
}

.hero-image{
    flex:1;
    display:flex;
    justify-content:flex-end;
}

.hero-image img{
    width:100%;
    max-width:580px;
    height:auto;
    display:block;
}
/* COINS */

.coins {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.coin {
    width: 180px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    text-align: center;
    padding: 25px;
    transition: .3s;
}
.coin-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.coin:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,180,255,.25);
}

.coin i{

    font-size:55px;

    color:#38bdf8;

    margin-bottom:18px;

}
.coin:nth-child(1) i{
    color:#f7931a;
}

.coin:nth-child(2) i{
    color:#627eea;
}

.coin:nth-child(3) i{
    color:#26a17b;
}

.coin h3{

    margin-bottom:8px;

    font-size:24px;

}

.coin p{

    color:#9ecfff;

    font-size:18px;

    font-weight:600;

}

/* LOGIN */

.wallet-options{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    margin:70px 0;
}

.wallet-card{
    width:420px;
    text-decoration:none;
    color:white;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:25px;
    padding:35px;
    transition:.3s;
}

.wallet-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,170,255,.30);
}

.wallet-card small{
    color:#6fd6ff;
    letter-spacing:3px;
}

.wallet-card h2{
    margin-top:15px;
    font-size:32px;
}

/* MINI FEATURES */

.mini-features{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin:80px 0;
}

.mini-features div{
    width:260px;
    background:rgba(255,255,255,.07);
    padding:30px;
    text-align:center;
    border-radius:20px;
}

.mini-features i{
    font-size:40px;
    color:#43d8ff;
    margin-bottom:15px;
}

.mini-features p{
    color:#cfd8e8;
    line-height:1.7;
}

/* WHY */

.why{
    text-align:center;
    margin:90px auto 60px;
    max-width:850px;
}

.why h2{
    font-size:42px;
    margin-bottom:20px;
}

.why p{
    color:#c7d2e8;
    line-height:1.9;
}

/* FEATURE BOXES */

/* ===== Feature Cards ===== */

.feature-boxes{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:wrap;

    margin:60px auto;

    width:100%;

}

.feature{

    flex:1;

    min-width:300px;

    max-width:350px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:35px 30px;

    text-align:center;

    transition:.3s;

}

.feature:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,170,255,.25);

}

.feature i{

    font-size:50px;

    color:#38bdf8;

    margin-bottom:20px;

}

.feature h3{

    font-size:28px;

    margin-bottom:18px;

    color:white;

}

.feature p{

    color:#d3d8e5;

    line-height:1.9;

    font-size:17px;

}


/* ASSETS */

.assets{
    text-align:center;
    margin-bottom:100px;
}

.assets h2{
    font-size:40px;
    margin-bottom:20px;
}

.assets p{
    color:#cfd8e8;
    margin-bottom:40px;
}

.asset-list{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.asset-list div{
    padding:18px 35px;
    border-radius:15px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    font-size:20px;
    transition:.3s;
}

.asset-list div:hover{
    background:#0f63ff;
}

/* MOBILE */

@media(max-width:768px){

.hero h1{
    font-size:40px;
}

.logo{
    justify-content:center;
    text-align:center;
    flex-direction:column;
}

.wallet-card{
    width:100%;
}

.coin{
    width:150px;
}

.feature{
    width:100%;
}

}
.action-card{
    transition:0.4s;
    cursor:pointer;
}

.action-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,170,255,.35);
}
.stats-section{
    width:90%;
    max-width:1200px;
    margin:80px auto;
    text-align:center;
}

.stats-section h2{
    color:white;
    font-size:42px;
    margin-bottom:50px;
}

.stats{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.stat-box{
    width:220px;
    padding:35px 20px;
    background:rgba(255,255,255,.06);
    border-radius:20px;
    transition:.4s;
}

.stat-box:hover{
    transform:translateY(-8px);
    box-shadow:0 0 30px rgba(0,170,255,.35);
}

.stat-box h3{
    font-size:40px;
    color:#38bdf8;
    margin-bottom:10px;
}

.stat-box p{
    color:#d0d8e8;
    font-size:18px;
}
/* ==========================
        FOOTER
========================== */

.footer{

background:#0b0f16;

margin-top:120px;

padding:70px 8% 25px;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:50px;

}

.footer-logo{

width:60px;

margin-bottom:15px;

border-radius:12px;

}

.footer-column h2{

font-size:30px;

margin-bottom:15px;

color:#fff;

}

.footer-column h3{

color:#38bdf8;

margin-bottom:20px;

font-size:24px;

}

.footer-column p{

color:#b8c5d9;

line-height:1.9;

margin-bottom:10px;

}

.footer-column a{

display:block;

text-decoration:none;

color:#b8c5d9;

margin:12px 0;

transition:.3s;

}

.footer-column a:hover{

color:#38bdf8;

padding-left:8px;

}

.social-icons{

display:flex;

gap:15px;

margin-top:25px;

}

.social-icons a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.06);

border-radius:50%;

color:#fff;

font-size:18px;

transition:.3s;

}

.social-icons a:hover{

background:#2563eb;

transform:translateY(-5px);

}

.footer-bottom{

margin-top:50px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

}

.footer-bottom p{

color:#9fb0c6;

font-size:15px;

}
/* ===========================
   SIGNUP PAGE
=========================== */

.signup-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px 20px;

    background:linear-gradient(135deg,#0f1117,#1b1f2a,#0b0f16);

}

.signup-container{

    width:1100px;

    max-width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

/* LEFT SIDE */

 .signup-left{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:linear-gradient(135deg,#181c24,#11151d,#0b0f16);

}

.signup-logo{
    width:90px;
    margin-bottom:30px;
}

.signup-left h1{
    font-size:42px;
    margin-bottom:20px;
}

.signup-left p{
    color:#d7e2f2;
    line-height:1.9;
    font-size:17px;
}

/* RIGHT SIDE */

.signup-right{
    padding:60px;
}

.signup-right h2{
    text-align:center;
    margin-bottom:35px;
    font-size:34px;
}

.input-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
    padding:15px 18px;
    margin-bottom:18px;
}

.input-box i{
    color:#38bdf8;
    font-size:18px;
    width:20px;
}

.input-box input{
    width:100%;
    background:none;
    border:none;
    outline:none;
    color:#fff;
    font-size:16px;
}

.input-box input::placeholder{
    color:#b8c5d9;
}

.terms{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    margin:15px 0 25px;
    color:#d6e1f0;
}


    .signup-btn{
        padding:18px 25px;
font-size:18px;

    background:linear-gradient(90deg,#2563eb,#38bdf8);
    }

.signup-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(56,189,248,.35);
}

.login-link{
    text-align:center;
    margin-top:25px;
    color:#c9d5e8;
}

.login-link a{
    color:#38bdf8;
    text-decoration:none;
    font-weight:bold;
}

.login-link a:hover{
    text-decoration:underline;
}

/* MOBILE */

@media(max-width:900px){

.signup-container{
    grid-template-columns:1fr;
}

.signup-left,
.signup-right{
    padding:40px 30px;
}

.signup-left{
    text-align:center;
    align-items:center;
}

.signup-left h1{
    font-size:34px;
}

}
/* OTP PAGE */

.otp-page{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.otp-box{

width:500px;

background:rgba(255,255,255,.07);

padding:50px;

border-radius:25px;

text-align:center;

backdrop-filter:blur(20px);

}

.otp-icon{

font-size:70px;

color:#38bdf8;

margin-bottom:25px;

}

.otp-box h2{

margin-bottom:20px;

}

.otp-box p{

color:#c8d4e5;

line-height:1.8;

margin-bottom:35px;

}

.otp-input{

width:100%;

padding:18px;

border:none;

border-radius:15px;

background:rgba(255,255,255,.08);

color:white;

font-size:20px;

text-align:center;

margin-bottom:25px;

}

.resend-link{

display:block;

margin-top:20px;

color:#38bdf8;

text-decoration:none;

}
/* ===========================
        LOGIN PAGE
=========================== */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px 20px;

    background:linear-gradient(135deg,#0f1117,#1b1f2a,#0b0f16);

}

.login-container{

    width:1100px;

    max-width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

/* LEFT */

.login-left{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:linear-gradient(135deg,#181c24,#11151d,#0b0f16);

}

.login-logo{
    width:90px;
    margin-bottom:25px;
}

.login-left h1{
    font-size:42px;
    margin-bottom:18px;
    color:#fff;
}

.login-left p{
    color:#d8e5f5;
    line-height:1.9;
    font-size:17px;
}

/* RIGHT */

.login-right{
    padding:60px;
}

.login-right h2{
    text-align:center;
    color:#fff;
    margin-bottom:35px;
    font-size:34px;
}

.login-input{
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;
    padding:15px 18px;
    margin-bottom:20px;
}

.login-input i{
    color:#38bdf8;
    font-size:18px;
    margin-right:12px;
}

.login-input input{
    width:100%;
    border:none;
    outline:none;
    background:none;
    color:#fff;
    font-size:16px;
}

.login-input input::placeholder{
    color:#b8c5d9;
}

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0 30px;
    color:#d8e5f5;
    font-size:15px;
}

.login-options a{
    color:#38bdf8;
    text-decoration:none;
}

.login-options a:hover{
    text-decoration:underline;
}

.login-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:15px;

    background:linear-gradient(90deg,#2563eb,#38bdf8);

    color:#fff;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(56,189,248,.35);

}
.login-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(56,189,248,.35);
}

.signup-link{
    text-align:center;
    margin-top:25px;
    color:#d8e5f5;
}

.signup-link a{
    color:#38bdf8;
    text-decoration:none;
    font-weight:bold;
}

.signup-link a:hover{
    text-decoration:underline;
}

/* Responsive */

@media(max-width:900px){

.login-container{
    grid-template-columns:1fr;
}

.login-left,
.login-right{
    padding:40px 30px;
}

.login-left{
    text-align:center;
    align-items:center;
}

.login-left h1{
    font-size:34px;
}

.login-options{
    flex-direction:column;
    gap:12px;
}

}
/* BUY SECTION */

.buy-crypto{

display:flex;

justify-content:space-between;

align-items:center;

gap:60px;

margin:120px auto;

width:90%;

max-width:1200px;

flex-wrap:wrap;

}

.buy-left{

flex:1;

}

.buy-left span{

color:#38bdf8;

font-weight:bold;

letter-spacing:2px;

}

.buy-left h2{

font-size:46px;

margin:20px 0;

line-height:1.2;

}

.buy-left p{

color:#d0d8e8;

line-height:1.9;

}

.buy-right{

flex:1;

display:flex;

flex-direction:column;

gap:25px;

}

.buy-card{

background:rgba(255,255,255,.05);

padding:30px;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.buy-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,170,255,.2);

}

.buy-card i{

font-size:45px;

color:#38bdf8;

margin-bottom:20px;

}

.buy-card h3{

margin-bottom:15px;

}

.buy-card p{

color:#d6deed;

line-height:1.8;

}
/* SEND & RECEIVE */

.transfer-section{
    width:90%;
    max-width:1200px;
    margin:120px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.transfer-cards{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.transfer-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:30px;
    transition:.4s;
}

.transfer-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,170,255,.20);
}

.transfer-card i{
    font-size:45px;
    color:#38bdf8;
    margin-bottom:18px;
}

.transfer-card h3{
    margin-bottom:15px;
    font-size:28px;
}

.transfer-card p{
    color:#d4dce8;
    line-height:1.8;
}

.transfer-content{
    flex:1;
}

.transfer-content span{
    color:#38bdf8;
    font-weight:bold;
    letter-spacing:2px;
}

.transfer-content h2{
    font-size:46px;
    margin:20px 0;
    line-height:1.2;
}

.transfer-content p{
    color:#d2dae7;
    line-height:1.9;
    margin-bottom:25px;
}

.transfer-content ul{
    list-style:none;
}

.transfer-content li{
    margin:15px 0;
    color:#ffffff;
    font-size:17px;
}
/* STAKING */

.staking-section{

width:90%;

max-width:1200px;

margin:120px auto;

display:flex;

justify-content:space-between;

align-items:center;

gap:60px;

flex-wrap:wrap;

}

.staking-content{

flex:1;

}

.staking-content span{

color:#38bdf8;

font-weight:bold;

letter-spacing:2px;

}

.staking-content h2{

font-size:46px;

margin:20px 0;

line-height:1.2;

}

.staking-content p{

color:#d4dce8;

line-height:1.9;

margin-bottom:30px;

}

.staking-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.staking-list div{

background:rgba(255,255,255,.04);

padding:18px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

}

.staking-list i{

color:#38bdf8;

margin-right:8px;

}

.staking-cards{

flex:1;

display:flex;

flex-direction:column;

gap:25px;

}

.stake-card{

background:rgba(255,255,255,.04);

padding:35px;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.stake-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,170,255,.20);

}

.stake-card i{

font-size:45px;

color:#38bdf8;

margin-bottom:20px;

}

.stake-card h3{

margin-bottom:15px;

font-size:28px;

}

.stake-card p{

color:#d5dce8;

line-height:1.8;

}
/* ADVANCED SECURITY */

.security-section{
    width:90%;
    max-width:1200px;
    margin:120px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.security-left{
    flex:1;
}

.security-left span{
    color:#38bdf8;
    font-weight:bold;
    letter-spacing:2px;
}

.security-left h2{
    font-size:46px;
    margin:20px 0;
    line-height:1.2;
}

.security-left p{
    color:#d5dce8;
    line-height:1.9;
    margin-bottom:35px;
}

.security-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.security-item{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.security-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(56,189,248,.2);
}

.security-item i{
    font-size:38px;
    color:#38bdf8;
    margin-bottom:15px;
}

.security-right{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.security-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:35px;
    transition:.3s;
}

.security-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(56,189,248,.20);
}

.security-card i{
    font-size:45px;
    color:#38bdf8;
    margin-bottom:20px;
}

.security-card h3{
    margin-bottom:15px;
}

.security-card p{
    color:#d5dce8;
    line-height:1.8;
}
/* WHY MILLIONS TRUST US */

.trust-section{

width:90%;

max-width:1200px;

margin:120px auto;

text-align:center;

}

.trust-heading span{

color:#38bdf8;

font-weight:bold;

letter-spacing:2px;

}

.trust-heading h2{

font-size:46px;

margin:20px 0;

}

.trust-heading p{

max-width:850px;

margin:auto;

line-height:1.9;

color:#d5dce8;

}

.trust-boxes{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:60px;

}

.trust-box{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:35px;

border-radius:22px;

transition:.3s;

}

.trust-box:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(56,189,248,.20);

}

.trust-box i{

font-size:45px;

color:#38bdf8;

margin-bottom:20px;

}

.trust-box h3{

margin-bottom:15px;

font-size:24px;

}

.trust-box p{

color:#d4dce8;

line-height:1.8;

}
/* FAQ */

.faq-section{

width:90%;

max-width:1200px;

margin:120px auto;

}

.faq-heading{

text-align:center;

margin-bottom:50px;

}

.faq-heading span{

color:#38bdf8;

font-weight:bold;

letter-spacing:2px;

}

.faq-heading h2{

font-size:46px;

margin:20px 0;

}

.faq-heading p{

color:#d5dce8;

max-width:750px;

margin:auto;

line-height:1.8;

}

.faq-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.faq-box{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:30px;

border-radius:20px;

transition:.3s;

}

.faq-box:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(56,189,248,.20);

}

.faq-box h3{

margin-bottom:15px;

color:#fff;

}

.faq-box p{

color:#d5dce8;

line-height:1.8;

}
/* CALL TO ACTION */

.cta-section{

width:90%;

max-width:1200px;

margin:120px auto 80px;

padding:70px;

text-align:center;

background:linear-gradient(135deg,#1c2430,#0e1728);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.cta-section span{

color:#38bdf8;

font-weight:bold;

letter-spacing:2px;

}

.cta-section h2{

font-size:50px;

margin:20px 0;

line-height:1.2;

}

.cta-section p{

max-width:800px;

margin:0 auto 40px;

color:#d5dce8;

line-height:1.9;

font-size:18px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-btn{

padding:18px 35px;

border-radius:15px;

text-decoration:none;

font-weight:bold;

font-size:18px;

transition:.3s;

}

.primary-btn{

background:#2563eb;

color:#fff;

}

.primary-btn:hover{

background:#1d4ed8;

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.secondary-btn{

border:2px solid #38bdf8;

color:#38bdf8;

}

.secondary-btn:hover{

background:#38bdf8;

color:#fff;

transform:translateY(-5px);

}

.cta-btn i{

margin-right:8px;

}

/* ==========================
        NAVBAR
========================== */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 7%;

    background:rgba(20,20,25,.85);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.nav-logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.nav-logo img{

    width:52px;

    height:52px;

    border-radius:14px;

}

.nav-logo span{

    color:white;

    font-size:28px;

    font-weight:bold;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    color:#d7dce8;

    font-size:17px;

    transition:.3s;

    position:relative;

}

.nav-links a:hover{

    color:#38bdf8;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#38bdf8;

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.login-nav{

    text-decoration:none;

    color:white;

    font-weight:600;

    transition:.3s;

}

.login-nav:hover{

    color:#38bdf8;

}

.signup-nav{

    text-decoration:none;

    background:#2563eb;

    color:white;

    padding:12px 24px;

    border-radius:12px;

    font-weight:bold;

    transition:.3s;

}

.signup-nav:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(37,99,235,.35);

}

/* MOBILE */

@media(max-width:1000px){

.nav-links{

display:none;

}

.navbar{

padding:18px 5%;

}

.nav-logo span{

font-size:22px;

}

.signup-nav{

padding:10px 18px;

}

}
.flash-message{

    background: rgba(56,189,248,.15);

    border:1px solid rgba(56,189,248,.3);

    color:#38bdf8;

    padding:12px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

}
/*======================================
      Premium Images
======================================*/

.showcase-image{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 0;

}

.showcase-image img{

    width:100%;

    max-width:680px;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 18px 55px rgba(0,0,0,.55);

    transition:.4s ease;

}

.showcase-image img:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 60px rgba(45,140,255,.35);

}
/*=====================================
      Mobile Gallery
======================================*/

.image-row{
    width:90%;
    max-width:1200px;
    margin:80px auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    flex-wrap:wrap;
}


.image-row img{
    width:280px;
    border-radius:25px;
    background:transparent;
    padding:0;
    border:none;
    box-shadow:none;
    transition:.35s ease;
}


.image-row img:nth-child(2){
    transform:translateY(-25px);
}


.image-row img:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 20px 50px rgba(59,130,246,.20);
}


.image-row img:nth-child(2):hover{
    transform:translateY(-35px) scale(1.03);
}
@media(max-width:900px){

    .image-row img{
        width:220px;
    }

    .image-row img:nth-child(2){
        transform:none;
    }

}
.coin-logo{
    width:55px;
    height:55px;
    object-fit:contain;
    margin-bottom:15px;
    transition:0.3s ease;
}

.coin:hover .coin-logo{
    transform:scale(1.1);
}
.welcome{
    display:inline-block;
    color:#38BDF8;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
    text-shadow:0 0 10px rgba(56,189,248,.4);
}
.wallet-showcase{
    width:90%;
    margin:90px auto;
    background:#151a23;
    border-radius:25px;
    padding:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    overflow:hidden;
}

.wallet-showcase-text{
    flex:1;
}

.wallet-showcase-text span{
    color:#3b82f6;
    font-size:14px;
    letter-spacing:2px;
    font-weight:600;
}

.wallet-showcase-text h2{
    color:#fff;
    font-size:50px;
    margin:18px 0;
    line-height:1.2;
}

.wallet-showcase-text p{
    color:#b9c2d0;
    line-height:1.8;
    font-size:17px;
    margin-bottom:35px;
}

.wallet-btn{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:15px 35px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.wallet-btn:hover{
    background:#1d4ed8;
}

.wallet-showcase-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.wallet-showcase-image img{
    width:100%;
    max-width:600px;
    border-radius:20px;
    animation:floatImage 5s ease-in-out infinite;
}
.future-banner{
    width:90%;
    margin:80px auto;
    background:transparent;
}

.future-banner img{
    width:100%;
    border-radius:20px;
    display:block;
    background:transparent;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
/* ===========================
   MOBILE NAVBAR + HERO
=========================== */

.menu-toggle{
    display:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

@media (max-width:992px){

.navbar{
    padding:16px 20px;
}

.nav-logo span{
    font-size:22px;
}

.menu-toggle{
    display:block;
}

.nav-links{
    display:none;
}

.hero{
    flex-direction:column;
    gap:40px;
    padding:40px 20px;
    text-align:center;
}

.hero-text{
    width:100%;
}

.hero-image{
    width:100%;
    justify-content:center;
}

.hero-image img{
    width:100%;
    max-width:350px;
    margin:auto;
}

.hero h1{
    font-size:36px;
    line-height:1.3;
}

.hero p{
    font-size:16px;
}

.nav-buttons{
    display:none;
}

}
@media (max-width:992px){

.nav-links{

    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#0f172a;

    display:none;
    flex-direction:column;
    align-items:center;
    gap:25px;

    padding:30px 0;

    z-index:999;

}

.nav-links.active{

    display:flex;

}
.container{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
}
.navbar{
    padding:16px 15px;
}
.hero{
    padding:40px 20px;
    flex-direction:column;
    gap:40px;
    text-align:center;
}
.container{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
}
}
/* =========================
   MOBILE RESPONSIVE
========================= */

.menu-toggle{
    display:none;
}

@media (max-width:1000px){

    html,
    body{
        overflow-x:hidden;
    }

    .container{
        width:100%;
        max-width:100%;
        padding:40px 20px;
    }

    .navbar{
        padding:15px 20px;
    }

    .menu-toggle{
        display:block;
        font-size:28px;
        color:#fff;
        cursor:pointer;
    }

    .nav-buttons{
        display:none;
    }

    .nav-links{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#14181f;
        flex-direction:column;
        align-items:center;
        padding:25px 0;
        gap:20px;
    }

    .nav-links.active{
        display:flex;
    }

    .hero{
        flex-direction:column;
        gap:35px;
        padding:20px;
        text-align:center;
    }

    .hero-text{
        width:100%;
    }

    .hero-image{
        width:100%;
        justify-content:center;
    }

    .hero-image img{
        width:100%;
        max-width:340px;
        height:auto;
    }
}
@media (max-width:768px){

    .faq-section{
        width:100%;
        padding:0 20px;
        margin:70px auto;
    }

    .faq-container{
        grid-template-columns:1fr;
    }

    .faq-heading h2{
        font-size:32px;
    }

    .faq-box{
        padding:20px;
    }

    .cta-section{
        width:100%;
        margin:70px auto;
        padding:40px 20px;
    }

    .cta-section h2{
        font-size:32px;
    }

    .cta-section p{
        font-size:16px;
    }
}
@media (max-width:768px){

    .wallet-showcase{
        width:100%;
        margin:70px auto;
        padding:35px 20px;

        flex-direction:column;
        text-align:center;
        gap:35px;
    }

    .wallet-showcase-text{
        width:100%;
    }

    .wallet-showcase-text h2{
        font-size:32px;
        line-height:1.3;
    }

    .wallet-showcase-text p{
        font-size:16px;
    }

    .wallet-showcase-image{
        width:100%;
        justify-content:center;
    }

    .wallet-showcase-image img{
        width:100%;
        max-width:320px;
        height:auto;
    }

}
.iti{
    width:100%;
}

.iti input{
    width:100%;
    background:none;
    border:none;
    outline:none;
    color:#fff;
    font-size:16px;
}

.iti__selected-country{
    background:transparent !important;
}

.iti__country-list{
    background:#1a1f2a;
    color:white;
}

.iti__country:hover{
    background:#2563eb;
}

.iti__search-input{
    background:#111827;
    color:white;
    border:none;
    outline:none;
}
.ts-wrapper{
    width:100%;
}

.ts-control{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#fff !important;
    padding:0 !important;
}

.ts-control input{
    color:#fff !important;
}

.ts-dropdown{
    background:#1a1f2a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
}

.ts-dropdown .option{
    color:#fff;
}

.ts-dropdown .option:hover,
.ts-dropdown .active{
    background:#2563eb;
    color:#fff;
}
/* Country & Phone Dropdown */

.input-box select{
    width:100%;
    background:#1b2433;
    color:#ffffff;
    border:none;
    outline:none;
    font-size:16px;
    padding:6px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
}

.input-box select option{
    background:#1b2433;
    color:#ffffff;
    padding:10px;
}

.input-box select:focus{
    background:#1b2433;
    color:#ffffff;
}
/* =========================
   MOBILE - NAVBAR
========================= */

@media (max-width: 768px) {

    .navbar {
        width: 100%;
        padding: 14px 16px;
        min-height: 70px;
    }

    .nav-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-logo img {
        width: 42px;
        height: 42px;
    }

    .nav-logo span {
        font-size: 20px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;
        background: #14181f;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-buttons {
        display: none;
    }

    .menu-toggle {
        display: block;
        font-size: 26px;
        color: #fff;
        cursor: pointer;
    }
}
/* =========================
   MOBILE - HERO
========================= */

@media (max-width: 768px) {

    .hero {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 45px 20px;
        text-align: center;
    }

    .hero-text {
        width: 100%;
        flex: none;
    }

    .welcome {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .hero h1 {
        font-size: 32px;
        line-height: 1.25;
        margin: 15px 0;
    }

    .hero h1 br {
        display: none;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.8;
    }

    .hero p br {
        display: none;
    }

    .hero-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-image img {
        width: 100%;
        max-width: 340px;
        height: auto;
        display: block;
    }
}
/* =========================
   MOBILE - COINS
========================= */

@media (max-width: 768px) {

    .coins {
        width: 100%;
        padding: 0 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .coin {
        width: 100%;
        padding: 20px 10px;
        border-radius: 18px;
    }

    .coin-logo {
        width: 45px;
        height: 45px;
    }

    .coin h3 {
        font-size: 18px;
    }

    .coin p {
        font-size: 14px;
    }
}
/* =========================
   MOBILE - WALLET OPTIONS
========================= */

@media (max-width: 768px) {

    .wallet-options {
        width: 100%;
        padding: 0 20px;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .wallet-card {
        width: 100%;
        padding: 28px 22px;
    }

    .wallet-card h2 {
        font-size: 25px;
    }
}
/* =========================
   MOBILE - WHY
========================= */

@media (max-width: 768px) {

    .why {
        width: 100%;
        padding: 0 20px;
        margin: 70px auto 45px;
    }

    .why h2 {
        font-size: 32px;
        line-height: 1.25;
    }

    .why p {
        font-size: 15px;
        line-height: 1.8;
    }
}
/* =========================
   MOBILE - FEATURES
========================= */

@media (max-width: 768px) {

    .assets {
        width: 100%;
        padding: 0 20px;
    }

    .assets h2 {
        font-size: 32px;
    }

    .assets p {
        font-size: 15px;
        line-height: 1.8;
    }

    .assets p br {
        display: none;
    }

    .feature-boxes {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin: 40px auto;
    }

    .feature {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 28px 20px;
    }

    .feature h3 {
        font-size: 23px;
    }

    .feature p {
        font-size: 15px;
    }

    .stats-section {
        width: 100%;
        padding: 0 20px;
        margin: 70px auto;
    }

    .stats-section h2 {
        font-size: 32px;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-box {
        width: 100%;
        padding: 25px 10px;
    }

    .stat-box h3 {
        font-size: 30px;
    }

    .stat-box p {
        font-size: 14px;
    }
}
/* =========================
   MOBILE - BUY CRYPTO
========================= */

@media (max-width: 768px) {

    .buy-crypto {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .buy-left,
    .buy-right {
        width: 100%;
        flex: none;
    }

    .buy-left h2 {
        font-size: 32px;
    }

    .buy-left p {
        font-size: 15px;
        line-height: 1.8;
    }

    .buy-right {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .buy-card {
        width: 100%;
        padding: 25px 20px;
    }
}
/* =========================
   MOBILE - TRANSFER
========================= */

@media (max-width: 768px) {

    .transfer-section {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .transfer-cards,
    .transfer-content {
        width: 100%;
        flex: none;
    }

    .transfer-card {
        padding: 25px 20px;
    }

    .transfer-card h3 {
        font-size: 24px;
    }

    .transfer-content h2 {
        font-size: 32px;
    }

    .transfer-content p {
        font-size: 15px;
    }

    .transfer-content li {
        font-size: 15px;
        line-height: 1.7;
    }
}
/* =========================
   MOBILE - STAKING
========================= */

@media (max-width: 768px) {

    .staking-section {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .staking-content,
    .staking-cards {
        width: 100%;
        flex: none;
    }

    .staking-content h2 {
        font-size: 32px;
    }

    .staking-content p {
        font-size: 15px;
    }

    .staking-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .staking-list div {
        padding: 16px;
    }

    .stake-card {
        padding: 25px 20px;
    }

    .stake-card h3 {
        font-size: 24px;
    }
}
/* =========================
   MOBILE - SECURITY
========================= */

@media (max-width: 768px) {

    .security-section {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .security-left,
    .security-right {
        width: 100%;
        flex: none;
    }

    .security-left h2 {
        font-size: 32px;
    }

    .security-left p {
        font-size: 15px;
    }

    .security-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .security-item {
        padding: 20px 10px;
    }

    .security-item h4 {
        font-size: 14px;
    }

    .security-card {
        padding: 25px 20px;
    }
}
/* =========================
   MOBILE - WALLET SHOWCASE
========================= */

@media (max-width: 768px) {

    .wallet-showcase {
        width: calc(100% - 40px);
        margin: 70px auto;
        padding: 35px 20px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .wallet-showcase-text,
    .wallet-showcase-image {
        width: 100%;
        flex: none;
    }

    .wallet-showcase-text h2 {
        font-size: 32px;
    }

    .wallet-showcase-text p {
        font-size: 15px;
    }

    .wallet-showcase-image {
        display: flex;
        justify-content: center;
    }

    .wallet-showcase-image img {
        width: 100%;
        max-width: 320px;
        height: auto;
    }
}
/* =========================
   MOBILE - TRUST
========================= */

@media (max-width: 768px) {

    .trust-section {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
    }

    .trust-heading h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .trust-heading p {
        font-size: 15px;
    }

    .trust-boxes {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }

    .trust-box {
        padding: 28px 20px;
    }
}
/* =========================
   MOBILE - IMAGE GALLERY
========================= */

@media (max-width: 768px) {

    .image-row {
        width: 100%;
        padding: 0 20px;
        margin: 70px auto;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .image-row img {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: auto;
    }

    .image-row img:nth-child(2) {
        transform: none;
    }

    .image-row img:hover,
    .image-row img:nth-child(2):hover {
        transform: none;
    }
}
/* =========================
   MOBILE - FAQ
========================= */

@media (max-width: 768px) {

    .faq-section {
        width: 100%;
        padding: 0 20px;
        margin: 80px auto;
    }

    .faq-heading {
        margin-bottom: 35px;
    }

    .faq-heading h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .faq-heading p {
        font-size: 15px;
        line-height: 1.8;
    }

    .faq-container {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .faq-box {
        width: 100%;
        padding: 22px 18px;
    }

    .faq-box h3 {
        font-size: 19px;
        line-height: 1.4;
    }

    .faq-box p {
        font-size: 15px;
        line-height: 1.8;
    }
}
/* =========================
   MOBILE - FUTURE BANNER
========================= */

@media (max-width: 768px) {

    .future-banner {
        width: calc(100% - 40px);
        margin: 60px auto;
    }

    .future-banner img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 15px;
    }
}
/* =========================
   MOBILE - CTA
========================= */

@media (max-width: 768px) {

    .cta-section {
        width: calc(100% - 40px);
        margin: 70px auto;
        padding: 40px 20px;
    }

    .cta-section h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .cta-section p {
        font-size: 15px;
        line-height: 1.8;
    }

    .cta-buttons {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }

    .cta-btn {
        width: 100%;
        padding: 15px 20px;
    }
}
/* =========================
   MOBILE - FOOTER
========================= */

@media (max-width: 768px) {

    .footer {
        margin-top: 80px;
        padding: 50px 20px 20px;
    }

    .footer-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }

    .footer-logo {
        width: 60px;
    }

    .footer-column h2 {
        font-size: 26px;
    }

    .footer-column h3 {
        font-size: 20px;
    }

    .footer-column p,
    .footer-column a {
        font-size: 15px;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 35px;
    }
}
/* =========================
   FINAL MOBILE SAFETY FIX
========================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    p {
        overflow-wrap: break-word;
    }
}
/* =========================
   FINAL MOBILE FIX
   WALLET SHOWCASE + FOOTER
========================= */

@media (max-width: 768px) {

    /* WALLET SHOWCASE */
    .wallet-showcase {
        width: calc(100% - 30px);
        max-width: 100%;
        margin: 60px auto;
        padding: 30px 18px;
        border-radius: 20px;

        display: flex;
        flex-direction: column;
        gap: 25px;

        overflow: hidden;
        box-sizing: border-box;
    }

    .wallet-showcase-text {
        width: 100%;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .wallet-showcase-text h2 {
        font-size: 30px;
        line-height: 1.25;
        word-break: normal;
    }

    .wallet-showcase-text p {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
    }

    .wallet-showcase-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

    .wallet-showcase-image img {
        width: 100%;
        max-width: 290px;
        height: auto;
        display: block;
        box-sizing: border-box;
    }


    /* FOOTER */
    .footer {
        width: 100%;
        max-width: 100%;
        margin-top: 70px;
        padding: 45px 18px 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .footer-container {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
        box-sizing: border-box;
    }

    .footer-column {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .footer-column p,
    .footer-column a {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }

    .footer-logo {
        width: 55px;
        height: auto;
        max-width: 100%;
    }

    .social-icons {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-bottom {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .footer-bottom p {
        font-size: 13px;
        line-height: 1.6;
        overflow-wrap: break-word;
    }
}
/* =========================
   MOBILE WALLET SHOWCASE FIX
========================= */

@media (max-width: 768px) {

    .wallet-showcase {
        width: calc(100% - 30px);
        margin: 50px auto;
        padding: 25px 18px;
        border-radius: 18px;
        gap: 20px;
    }

    .wallet-showcase-text {
        width: 100%;
    }

    .wallet-showcase-text span {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .wallet-showcase-text h2 {
        font-size: 27px;
        line-height: 1.2;
        margin: 12px 0;
    }

    .wallet-showcase-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 22px;
    }

    .wallet-btn {
        padding: 12px 25px;
        font-size: 15px;
    }

    .wallet-showcase-image img {
        max-width: 250px;
    }
}
.coin span {
    color: #72b7ff !important;
    font-weight: bold;
    font-size: 17px;
    display: block;
    margin-top: 5px;
}
/* =====================================================
   RECEIVE PAGE
===================================================== */

.receive-page {
    margin: 0;
    padding: 0;
    background: #070b14;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
}


/* ================= HEADER ================= */

.receive-header {
    height: 72px;
    background: #0d1422;
    border-bottom: 1px solid #1d293b;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 35px;
    box-sizing: border-box;
}

.receive-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.header-space {
    width: 44px;
}


/* ================= BACK BUTTON ================= */

.back-button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #111b2c;
    border: 1px solid #26364d;

    color: #ffffff;
    text-decoration: none;

    transition: 0.2s;
}

.back-button:hover {
    background: #17263c;
    border-color: #38bdf8;
    color: #38bdf8;
}


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

.receive-container {
    width: min(760px, 92%);
    margin: 0 auto;

    padding: 45px 0 80px;
}


/* ================= TITLE ================= */

.receive-heading {
    text-align: center;
    margin-bottom: 30px;
}

.receive-heading h2 {
    margin: 0 0 8px;
    font-size: 30px;
}

.receive-heading p {
    margin: 0;
    color: #8fa1bb;
    font-size: 15px;
}


/* ================= SEARCH ================= */

.asset-search {
    width: 100%;
    height: 54px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 0 18px;

    margin-bottom: 25px;

    background: #111a2a;

    border: 1px solid #26364d;

    border-radius: 15px;

    transition: 0.2s;
}

.asset-search:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08);
}

.asset-search i {
    color: #6f87a5;
    font-size: 17px;
    margin-right: 13px;
}

.asset-search input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 15px;
}

.asset-search input::placeholder {
    color: #71839c;
}


/* ================= ASSET LIST ================= */

.asset-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ================= ASSET CARD ================= */
.asset-card {
    width: 100%;
    min-height: 78px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 14px 18px;

    background: #0d1625;

    border: 1px solid #1e3048;

    border-radius: 16px;

    text-decoration: none;
    color: #ffffff;

    transition: all 0.2s ease;
}
.asset-card:hover {
transform: translateY(-2px);

border-color: #38bdf8;

background: #111d30;

box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.25);


}
/* ================= LOGO ================= */

.asset-logo {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: transparent;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;
}
.asset-logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}


/* ================= DETAILS ================= */

.asset-details {
    margin-left: 15px;
    background: transparent;
    border: none;
}

.asset-details h3 {
    margin: 0 0 5px;

    font-size: 16px;
    font-weight: 700;
}

.asset-details p {
    margin: 0;

    color: #8da0bb;

    font-size: 13px;
}


/* ================= ARROW ================= */
.asset-arrow {
    margin-left: auto;

    color: #6f87a5;
    font-size: 14px;

    background: transparent;
    border: none;
    padding: 0;
}

.asset-card:hover .asset-arrow {
    color: #38bdf8;
}


/* ================= NO ASSETS ================= */

.no-assets {
    display: none;

    text-align: center;

    padding: 30px;

    color: #8192aa;

    font-size: 14px;
}


/* ================= FOOTER ================= */

.receive-footer {
    text-align: center;

    padding: 25px;

    color: #65758d;

    font-size: 13px;
}

.receive-footer i {
    margin-right: 6px;
    color: #38bdf8;
}


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

@media (max-width: 600px) {

    .receive-header {
        padding: 0 18px;
        height: 65px;
    }

    .receive-header h1 {
        font-size: 20px;
    }

    .receive-container {
        width: 92%;
        padding-top: 30px;
    }

    .receive-heading h2 {
        font-size: 25px;
    }

    .asset-card {
        min-height: 72px;
    }

}
/* =====================================================
   NETWORK PAGE
===================================================== */

.network-asset {
    display: flex;
    align-items: center;

    padding: 20px;

    margin-bottom: 30px;

    background: #0d1625;

    border: 1px solid #1e3048;

    border-radius: 18px;
}

.network-asset-logo {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #172338;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 16px;
}

.network-asset-logo img {
    width: 36px;
    height: 36px;

    object-fit: contain;
}

.network-asset h2 {
    margin: 0 0 5px;
    font-size: 20px;
}

.network-asset p {
    margin: 0;
    color: #8193ad;
}


.network-heading {
    margin-bottom: 20px;
}

.network-heading h2 {
    margin: 0 0 7px;
    font-size: 22px;
}

.network-heading p {
    margin: 0;
    color: #7f91aa;
    font-size: 14px;
}


/* ================= NETWORK LIST ================= */

.network-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.network-card {
    display: flex;
    align-items: center;

    min-height: 78px;

    padding: 15px 18px;

    box-sizing: border-box;

    background: #0d1625;

    border: 1px solid #1e3048;

    border-radius: 16px;

    color: white;
    text-decoration: none;

    transition: 0.2s;
}

.network-card:hover {
    transform: translateY(-2px);

    background: #111d30;

    border-color: #38bdf8;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}

.network-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #13243a;

    color: #38bdf8;

    margin-right: 15px;
}

.network-info h3 {
    margin: 0 0 5px;

    font-size: 15px;
}

.network-info p {
    margin: 0;

    color: #8193ad;

    font-size: 12px;
}

.network-arrow {
    margin-left: auto;

    color: #6e849f;
}

.network-card:hover .network-arrow {
    color: #38bdf8;
}
/* ===== RECEIVE ASSET BOX FIX ===== */

.asset-card {
    width: 100%;
    min-height: 78px;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 14px 18px;

    background: #0d1625 !important;
    border: 1px solid #1e3048 !important;
    border-radius: 16px !important;

    text-decoration: none;
    color: #ffffff;
}

/* Remove box around logo */
.asset-logo {
    width: 48px !important;
    height: 48px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    box-shadow: none !important;
}

/* Remove box around asset name */
.asset-details {
    margin-left: 15px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    box-shadow: none !important;
}

/* Remove box around arrow */
.asset-arrow {
    margin-left: auto !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    box-shadow: none !important;
}
.network-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.network-details span {
    font-size: 12px;
    color: #8f8f9d;
}

.network-details i {
    width: 16px;
    margin-right: 4px;
}

.network-details strong {
    color: #dcdce5;
    font-weight: 500;
}
/* =========================================================
   COMING SOON PAGE
========================================================= */

.coming-soon-container {
    width: 90%;
    max-width: 760px;
    margin: 40px auto 60px;
}


/* Asset header */

.coming-soon-asset {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px 22px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);

    margin-bottom: 30px;
}


.coming-soon-logo {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}


.coming-soon-logo img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}


.coming-soon-asset h2 {
    margin: 0 0 4px;

    font-size: 20px;
}


.coming-soon-asset p {
    margin: 0;

    color: #8d8d99;

    font-size: 13px;
}


/* Main card */

.coming-soon-card {
    padding: 45px 35px;

    text-align: center;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);
}


/* Icon */

.coming-soon-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 27px;
}


/* Badge */

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 12px;

    margin-bottom: 16px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.05);

    color: #a7a7b2;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
}


.coming-soon-badge i {
    font-size: 6px;
}


/* Heading */

.coming-soon-card h2 {
    margin: 0 0 12px;

    font-size: 25px;
    font-weight: 700;

    color: #ffffff;
}


/* Description */

.coming-soon-card > p {
    max-width: 500px;

    margin: 0 auto 28px;

    line-height: 1.7;

    color: #9696a3;

    font-size: 14px;
}


.coming-soon-card > p strong {
    color: #e8e8ee;
}


/* Status */

.coming-soon-status {
    display: flex;
    align-items: center;

    gap: 13px;

    max-width: 500px;

    margin: 0 auto 28px;

    padding: 15px 17px;

    text-align: left;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.07);
}


.status-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.06);

    font-size: 14px;
}


.coming-soon-status strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    color: #e5e5eb;
}


.coming-soon-status span {
    display: block;

    color: #858591;

    font-size: 11px;
}


/* Back button */

.coming-soon-back {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 20px;

    border-radius: 11px;

    text-decoration: none;

    color: #e8e8ee;

    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.09);

    font-size: 13px;
    font-weight: 600;

    transition: 0.2s ease;
}


.coming-soon-back:hover {
    background: rgba(255, 255, 255, 0.11);

    transform: translateY(-1px);
}


/* Mobile */

@media (max-width: 600px) {

    .coming-soon-container {
        width: 92%;
        margin-top: 25px;
    }

    .coming-soon-card {
        padding: 35px 20px;
    }

    .coming-soon-card h2 {
        font-size: 21px;
    }

    .coming-soon-card > p {
        font-size: 13px;
    }

}
.send-search-box {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 24px;

    padding: 14px 17px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.08);
}


.send-search-box i {
    color: #858591;

    font-size: 14px;
}


.send-search-box input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 14px;
}


.send-search-box input::placeholder {
    color: #858591;
}


#noSendAsset {
    width: 100%;

    padding: 45px 20px;

    box-sizing: border-box;

    text-align: center;

    color: #858591;
}


#noSendAsset i {
    font-size: 25px;

    margin-bottom: 12px;
}


#noSendAsset h3 {
    margin: 0 0 7px;

    color: #e5e5eb;

    font-size: 16px;
}


#noSendAsset p {
    margin: 0;

    font-size: 13px;
}
/* =========================================================
   SEND PAGE
========================================================= */

.send-empty-state {
    width: 100%;
    padding: 45px 20px;

    box-sizing: border-box;

    text-align: center;
}

.send-empty-state i {
    font-size: 28px;
    color: #858591;

    margin-bottom: 14px;
}

.send-empty-state h3 {
    margin: 0 0 7px;

    color: #e5e5eb;

    font-size: 16px;
}

.send-empty-state p {
    margin: 0;

    color: #858591;

    font-size: 13px;
}


.send-view-all-wrapper {
    width: 100%;

    margin-top: 25px;

    display: flex;
    justify-content: center;
}


.send-view-all-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 22px;

    border-radius: 12px;

    text-decoration: none;

    color: #e8e8ee;

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.09);

    font-size: 13px;
    font-weight: 600;

    transition: 0.2s ease;
}


.send-view-all-btn:hover {
    background: rgba(255,255,255,0.10);

    transform: translateY(-1px);
}
/* =========================================================
   SEND DETAILS PAGE
========================================================= */

.send-details-form {
    width: 100%;
}


.send-field {
    width: 100%;
    margin-bottom: 22px;
}


.send-field label {
    display: block;

    margin-bottom: 9px;

    color: #dcdce4;

    font-size: 13px;
    font-weight: 600;
}


.send-input-wrapper {
    width: 100%;

    min-height: 52px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 0 15px;

    border-radius: 14px;

    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.09);
}


.send-input-wrapper i {
    color: #858591;

    font-size: 14px;
}


.send-input-wrapper input {
    flex: 1;

    min-width: 0;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 14px;
}


.send-input-wrapper input::placeholder {
    color: #777783;
}


.amount-wrapper {
    padding-right: 8px;
}


.max-btn {
    border: none;

    background: transparent;

    color: #8f8fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    padding: 8px;
}


.selected-network {
    width: 100%;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px 15px;

    border-radius: 14px;

    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.09);
}


.selected-network > div:first-child {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);
}


.selected-network i {
    color: #aaaab5;
}


.selected-network strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
}


.selected-network span {
    display: block;

    margin-top: 3px;

    color: #777783;

    font-size: 11px;
}


.available-balance {
    margin-top: 8px;

    color: #777783;

    font-size: 11px;
}


.available-balance span {
    color: #a6a6b1;
}


.send-continue-btn {
    width: 100%;

    height: 52px;

    margin-top: 5px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
}


.send-continue-btn:hover {
    background: rgba(255,255,255,0.12);
}


.network-security-note {
    width: 100%;

    box-sizing: border-box;

    display: flex;

    gap: 12px;

    margin-top: 25px;

    padding: 15px;

    border-radius: 14px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.06);
}


.network-security-note > i {
    margin-top: 2px;

    color: #858591;

    font-size: 15px;
}


.network-security-note strong {
    display: block;

    margin-bottom: 5px;

    color: #dcdce4;

    font-size: 12px;
}


.network-security-note p {
    margin: 0;

    color: #777783;

    font-size: 11px;

    line-height: 1.5;
}
/* =========================================================
   SEND REQUEST SUCCESS
========================================================= */

.send-success-page {
    text-align: center;
}


.send-success-icon {
    width: 72px;
    height: 72px;

    margin: 15px auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.07);

    border: 1px solid rgba(255,255,255,0.10);
}


.send-success-icon i {
    font-size: 28px;

    color: #ffffff;
}


.send-success-heading h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 22px;
}


.send-success-heading p {
    max-width: 500px;

    margin: 0 auto 25px;

    color: #858591;

    font-size: 13px;

    line-height: 1.6;
}


.send-request-card {
    width: 100%;

    box-sizing: border-box;

    padding: 5px 17px;

    border-radius: 16px;

    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.08);

    text-align: left;
}


.send-request-row {
    min-height: 52px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid rgba(255,255,255,0.06);
}


.send-request-row:last-child {
    border-bottom: none;
}


.send-request-row span {
    color: #858591;

    font-size: 12px;
}


.send-request-row strong {
    max-width: 65%;

    color: #e8e8ee;

    font-size: 13px;

    text-align: right;

    word-break: break-word;
}


.pending-status {
    color: #d8d8df !important;
}


.address-row {
    min-height: 70px;
}


.send-success-info {
    width: 100%;

    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding: 14px;

    border-radius: 13px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.06);

    text-align: left;
}


.send-success-info i {
    margin-top: 2px;

    color: #858591;

    font-size: 14px;
}


.send-success-info p {
    margin: 0;

    color: #858591;

    font-size: 11px;

    line-height: 1.5;
}


.send-success-btn {
    width: 100%;

    min-height: 52px;

    margin-top: 22px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 14px;

    text-decoration: none;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;
}


.send-success-btn:hover {
    background: rgba(255,255,255,0.12);
}
/* =========================================================
   SWAP PAGE
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body.swap-page{

    min-height:100vh;

    background:
        linear-gradient(
            135deg,
            #070b14 0%,
            #0b1220 45%,
            #0c1420 70%,
            #070b14 100%
        );

    color:#ffffff;

    overflow-x:hidden;
}


/* =========================================================
   HEADER
========================================================= */

.swap-header{

    width:100%;
    height:72px;

    background:#0d1422;

    border-bottom:1px solid #1d293b;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:0 35px;

}


.swap-header h1{

    margin:0;

    font-size:23px;

    font-weight:700;

}


.header-space{

    width:42px;

}


/* =========================================================
   BACK BUTTON
========================================================= */

.swap-back{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#111b2c;

    border:1px solid #26364d;

    color:#ffffff;

    text-decoration:none;

    transition:.2s ease;

}


.swap-back:hover{

    background:#17263c;

    border-color:#38bdf8;

    color:#38bdf8;

}


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

.swap-container{

    width:min(560px,92%);

    margin:0 auto;

    padding:45px 0 80px;

}


/* =========================================================
   HEADING
========================================================= */

.swap-heading{

    text-align:center;

    margin-bottom:30px;

}


.swap-heading span{

    color:#38bdf8;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}


.swap-heading h2{

    margin:12px 0 8px;

    font-size:31px;

}


.swap-heading p{

    color:#8fa1bb;

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   MAIN SWAP CARD
========================================================= */

.swap-card{

    width:100%;

    padding:25px;

    background:#0d1625;

    border:1px solid #1e3048;

    border-radius:22px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

}


/* =========================================================
   SWAP SECTION
========================================================= */

.swap-section{

    width:100%;

}


.swap-label-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:9px;

}


.swap-label-row label{

    color:#dfe7f2;

    font-size:13px;

    font-weight:600;

}


.balance-text{

    color:#71839c;

    font-size:11px;

}


.balance-text strong{

    color:#9baec5;

    font-weight:500;

}


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

.swap-input-box{

    width:100%;

    min-height:82px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 14px;

    background:#111a2a;

    border:1px solid #26364d;

    border-radius:16px;

    transition:.2s ease;

}


.swap-input-box:focus-within{

    border-color:#38bdf8;

    box-shadow:
        0 0 0 3px rgba(56,189,248,.07);

}


.swap-input-box input{

    flex:1;

    min-width:0;

    border:none;

    outline:none;

    background:transparent;

    color:#ffffff;

    font-size:27px;

    font-weight:600;

}


.swap-input-box input::placeholder{

    color:#53647a;

}


.swap-input-box input::-webkit-outer-spin-button,
.swap-input-box input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}


/* =========================================================
   ASSET SELECTOR
========================================================= */

.asset-selector{

    min-width:155px;

    height:54px;

    padding:0 13px;

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    border-radius:13px;

    background:#172338;

    color:#ffffff;

    cursor:pointer;

    transition:.2s ease;

}


.asset-selector:hover{

    background:#1b2b43;

}


.asset-symbol{

    font-size:13px;

    font-weight:700;

    color:#ffffff;

}


.asset-name{

    flex:1;

    text-align:left;

    color:#9eb0c7;

    font-size:12px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.asset-selector i{

    color:#71839c;

    font-size:11px;

}


/* =========================================================
   SWITCH BUTTON
========================================================= */

.swap-switch-wrapper{

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.swap-switch{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    border:1px solid #26364d;

    background:#111b2c;

    color:#38bdf8;

    cursor:pointer;

    transition:.25s ease;

}


.swap-switch:hover{

    background:#17263c;

    border-color:#38bdf8;

    transform:rotate(180deg);

}


/* =========================================================
   FEE INFORMATION
========================================================= */

.swap-info{

    width:100%;

    margin-top:22px;

    padding:15px 16px;

    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.06);

    border-radius:14px;

}


.swap-info-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.swap-info-row span{

    color:#8d9db2;

    font-size:13px;

}


.swap-info-row strong{

    color:#38bdf8;

    font-size:14px;

    font-weight:600;

}


/* =========================================================
   REVIEW BUTTON
========================================================= */

.review-swap-btn{

    width:100%;

    height:54px;

    margin-top:18px;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #38bdf8
    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

}


.review-swap-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(56,189,248,.25);

}


.review-swap-btn i{

    font-size:15px;

}


/* =========================================================
   ASSET MODAL
========================================================= */

.asset-modal{

    position:fixed;

    inset:0;

    z-index:2000;

    display:none;

}


.asset-modal.active{

    display:block;

}


.asset-modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(6px);

}


/* =========================================================
   MODAL BOX
========================================================= */

.asset-modal-box{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:min(470px,92%);

    max-height:85vh;

    overflow:hidden;

    background:#0d1625;

    border:1px solid #26364d;

    border-radius:22px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.55);

}


/* =========================================================
   MODAL HEADER
========================================================= */

.asset-modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 22px 17px;

    border-bottom:1px solid rgba(255,255,255,.06);

}


.asset-modal-header span{

    color:#71839c;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1.5px;

}


.asset-modal-header h3{

    margin-top:5px;

    font-size:18px;

}


.close-modal{

    width:36px;

    height:36px;

    border-radius:10px;

    border:1px solid #26364d;

    background:#111b2c;

    color:#9aabc0;

    cursor:pointer;

    transition:.2s;

}


.close-modal:hover{

    color:#38bdf8;

    border-color:#38bdf8;

}


/* =========================================================
   SEARCH
========================================================= */

.swap-search{

    margin:16px;

    height:48px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 15px;

    background:#111a2a;

    border:1px solid #26364d;

    border-radius:13px;

}


.swap-search i{

    color:#71839c;

    font-size:14px;

}


.swap-search input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#ffffff;

    font-size:13px;

}


.swap-search input::placeholder{

    color:#71839c;

}


/* =========================================================
   ASSET LIST
========================================================= */

.swap-asset-list{

    max-height:55vh;

    overflow-y:auto;

    padding:0 16px 16px;

}


.swap-asset-list::-webkit-scrollbar{

    width:5px;

}


.swap-asset-list::-webkit-scrollbar-track{

    background:transparent;

}


.swap-asset-list::-webkit-scrollbar-thumb{

    background:#26364d;

    border-radius:10px;

}


/* =========================================================
   ASSET OPTION
========================================================= */

.swap-asset-option{

    width:100%;

    min-height:65px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:10px 12px;

    margin-bottom:7px;

    border:1px solid transparent;

    border-radius:14px;

    background:transparent;

    color:#ffffff;

    cursor:pointer;

    text-align:left;

    transition:.2s ease;

}


.swap-asset-option:hover{

    background:#111d30;

    border-color:#26364d;

}


.option-icon{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:18px;

    font-weight:700;

}


.btc-icon{

    background:rgba(247,147,26,.14);

    color:#f7931a;

}


.eth-icon{

    background:rgba(98,126,234,.14);

    color:#627eea;

}


.sol-icon{

    background:rgba(120,100,255,.14);

    color:#8c7cff;

}


.bnb-icon{

    background:rgba(243,186,47,.14);

    color:#f3ba2f;

}


.usdt-icon{

    background:rgba(38,161,123,.14);

    color:#26a17b;

}


.usdc-icon{

    background:rgba(39,117,202,.14);

    color:#2775ca;

}


.pyusd-icon{

    background:rgba(0,120,212,.14);

    color:#38bdf8;

}


.ethmeta-icon{

    background:rgba(56,189,248,.14);

    color:#38bdf8;

}


.musd-icon{

    background:rgba(56,189,248,.14);

    color:#38bdf8;

}


.option-details{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.option-details strong{

    color:#ffffff;

    font-size:13px;

}


.option-details small{

    color:#71839c;

    font-size:11px;

}


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

@media(max-width:600px){

    .swap-header{

        height:65px;

        padding:0 18px;

    }


    .swap-header h1{

        font-size:20px;

    }


    .swap-container{

        width:92%;

        padding-top:30px;

    }


    .swap-heading h2{

        font-size:27px;

    }


    .swap-heading p{

        font-size:13px;

    }


    .swap-card{

        padding:18px;

        border-radius:19px;

    }


    .swap-input-box{

        min-height:76px;

        padding:10px;

        gap:7px;

    }


    .swap-input-box input{

        font-size:21px;

        min-width:0;

    }


    .asset-selector{

        min-width:112px;

        height:50px;

        padding:0 9px;

        gap:6px;

    }


    .asset-name{

        font-size:10px;

    }


    .asset-symbol{

        font-size:11px;

    }


    .swap-switch-wrapper{

        height:52px;

    }


    .swap-switch{

        width:38px;

        height:38px;

    }


    .swap-info{

        margin-top:18px;

    }


    .review-swap-btn{

        height:52px;

    }

}


@media(max-width:380px){

    .swap-input-box input{

        font-size:18px;

    }


    .asset-selector{

        min-width:100px;

    }


    .asset-name{

        display:none;

    }

}
/* =========================
   SWAP ASSET MODAL
========================= */

.asset-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: 0.25s ease;

    z-index: 9999;
}

.asset-modal.active {
    opacity: 1;
    visibility: visible;
}

.asset-modal-content {
    width: 100%;
    max-width: 430px;

    background: #10151d;
    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 22px;

    padding: 22px;

    box-shadow: 0 25px 70px rgba(0,0,0,0.5);
}

.asset-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.asset-modal-header h3 {
    margin: 0;
    color: white;
    font-size: 20px;
}

.asset-modal-header button {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.07);
    color: #fff;

    cursor: pointer;
}

.asset-search {
    display: flex;
    align-items: center;
    gap: 10px;

    background: rgba(255,255,255,0.06);

    border-radius: 12px;

    padding: 12px 14px;

    margin-bottom: 15px;
}

.asset-search i {
    color: #8b93a1;
}

.asset-search input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: white;
    font-size: 14px;
}

.asset-search input::placeholder {
    color: #7f8794;
}

.swap-assets-list {
    max-height: 380px;
    overflow-y: auto;
}

.swap-asset-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 10px;

    border: none;
    background: transparent;

    color: white;

    text-align: left;

    cursor: pointer;

    border-radius: 12px;

    transition: 0.2s ease;
}

.swap-asset-option:hover {
    background: rgba(255,255,255,0.07);
}

.swap-asset-option > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.swap-asset-option strong {
    font-size: 14px;
}

.swap-asset-option small {
    color: #8b93a1;
    font-size: 12px;
}
.review-swap-btn {
    background: #374151 !important;
    color: #ffffff !important;
    border: none;
}

.review-swap-btn:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
}

.review-swap-btn i {
    color: #ffffff !important;
}
/* =====================================================
   REVIEW SWAP MODAL
===================================================== */

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.review-modal.active {
    display: flex;
}


/* OVERLAY */

.review-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(7px);
}


/* MODAL BOX */

.review-modal-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 470px;

    background: #111827;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 22px;

    padding: 28px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55);

    animation: reviewModalIn 0.25s ease;
}


@keyframes reviewModalIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* HEADER */

.review-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 25px;
}


.review-modal-header span {
    display: block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: #9ca3af;

    margin-bottom: 5px;
}


.review-modal-header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
}


.review-close-btn {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 10px;

    background: #1f2937;

    color: #d1d5db;

    cursor: pointer;

    font-size: 17px;

    transition: 0.2s ease;
}


.review-close-btn:hover {
    background: #374151;
    color: #ffffff;
}


/* ASSET ROW */

.review-asset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px;

    margin-bottom: 10px;

    background: #1f2937;

    border-radius: 15px;

    border: 1px solid rgba(255,255,255,0.05);
}


.review-asset-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.review-label {
    color: #9ca3af;

    font-size: 12px;
}


.review-asset-info strong {
    color: #ffffff;

    font-size: 21px;

    font-weight: 700;
}


.review-asset-info small {
    color: #9ca3af;

    font-size: 12px;

    font-weight: 600;
}


.review-asset-row > i {
    color: #9ca3af;

    font-size: 16px;
}


/* DETAILS */

.review-details {
    margin-top: 20px;

    padding: 5px 0;
}


.review-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 2px;

    color: #9ca3af;

    font-size: 13px;
}


.review-detail-row strong {
    color: #ffffff;

    font-weight: 600;

    text-align: right;
}


.total-row {
    margin-top: 4px;

    padding-top: 15px;

    border-top: 1px solid rgba(255,255,255,0.08);
}


.total-row strong {
    color: #ffffff;
}


/* NOTICE */

.review-notice {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 15px;

    padding: 13px 14px;

    border-radius: 12px;

    background: rgba(107, 114, 128, 0.12);

    border: 1px solid rgba(107, 114, 128, 0.18);

    color: #9ca3af;

    font-size: 12px;

    line-height: 1.5;
}


.review-notice i {
    color: #d1d5db;

    margin-top: 2px;
}


/* ACTIONS */

.review-actions {
    display: flex;

    gap: 12px;

    margin-top: 22px;
}


.review-cancel-btn,
.confirm-swap-btn {
    flex: 1;

    height: 48px;

    border-radius: 12px;

    border: none;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}


/* CANCEL */

.review-cancel-btn {
    background: #374151;

    color: #ffffff;
}


.review-cancel-btn:hover {
    background: #4b5563;
}


/* CONFIRM */

.confirm-swap-btn {
    background: #374151;

    color: #ffffff;
}


.confirm-swap-btn:hover {
    background: #1f2937;

    transform: translateY(-1px);
}


.confirm-swap-btn i {
    margin-right: 6px;
}


/* MOBILE */

@media (max-width: 520px) {

    .review-modal-box {
        padding: 22px;

        border-radius: 18px;
    }

    .review-modal-header h3 {
        font-size: 19px;
    }

    .review-actions {
        flex-direction: column;
    }

    .review-cancel-btn,
    .confirm-swap-btn {
        width: 100%;
    }

}
/* =====================================================
   BUY PAGE
===================================================== */

.buy-page {
    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.14),
            transparent 35%
        ),
        #07111f;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ================= HEADER ================= */

.buy-header {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(7,17,31,0.88);

    backdrop-filter: blur(12px);
}


.buy-header h1 {
    margin: 0;

    font-size: 21px;

    font-weight: 700;
}


.buy-back {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #ffffff;

    background: #172235;

    text-decoration: none;

    transition: 0.2s ease;
}


.buy-back:hover {
    background: #26344a;
}


.header-space {
    width: 40px;
}


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

.buy-container {
    width: min(100% - 30px, 950px);

    margin: 0 auto;

    padding: 55px 0 70px;
}


.buy-heading {
    text-align: center;

    max-width: 650px;

    margin: 0 auto 35px;
}


.buy-heading > span {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #8f9caf;
}


.buy-heading h2 {
    margin: 0 0 12px;

    font-size: 32px;
}


.buy-heading p {
    margin: 0;

    color: #8f9caf;

    font-size: 14px;

    line-height: 1.7;
}


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

.buy-assets-card {
    padding: 25px;

    border-radius: 22px;

    background:
        rgba(17, 29, 48, 0.82);

    border:
        1px solid rgba(255,255,255,0.07);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.25);
}


.buy-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;

    padding: 0 4px;
}


.buy-section-title span {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.3px;

    color: #8995a8;
}


.buy-section-title i {
    color: #7f8b9d;

    font-size: 14px;
}


/* ================= GRID ================= */

.buy-assets-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* ================= ASSET BUTTON ================= */

.buy-asset {
    width: 100%;

    min-height: 78px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 13px 15px;

    border: 1px solid
        rgba(255,255,255,0.06);

    border-radius: 15px;

    background: #111d30;

    color: #ffffff;

    cursor: pointer;

    text-align: left;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.buy-asset:hover {
    transform: translateY(-2px);

    background: #17253a;

    border-color:
        rgba(255,255,255,0.14);
}


.buy-asset-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    font-size: 21px;

    font-weight: 700;

    background: #202d40;
}


.buy-asset-info {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.buy-asset-info strong {
    font-size: 14px;

    font-weight: 650;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.buy-asset-info small {
    font-size: 11px;

    color: #8793a5;

    font-weight: 600;

    letter-spacing: 0.5px;
}


.buy-asset > i {
    color: #6f7c8f;

    font-size: 12px;
}


/* ================= ASSET ICONS ================= */

.buy-asset-icon.btc {
    color: #ffffff;
}

.buy-asset-icon.eth {
    color: #ffffff;
}

.buy-asset-icon.usdt {
    color: #ffffff;
}

.buy-asset-icon.sol {
    color: #ffffff;
}

.buy-asset-icon.bnb {
    color: #ffffff;
}

.buy-asset-icon.usdc {
    color: #ffffff;
}

.buy-asset-icon.pyusd {
    color: #ffffff;
}

.buy-asset-icon.ethm {
    color: #ffffff;
}

.buy-asset-icon.musd {
    color: #ffffff;
}


/* ================= SECURITY ================= */

.buy-security {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 18px;

    padding: 16px 18px;

    border-radius: 15px;

    background:
        rgba(31, 41, 55, 0.55);

    border:
        1px solid rgba(255,255,255,0.05);
}


.buy-security > i {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #202b3c;

    color: #c4ccd7;

    font-size: 14px;
}


.buy-security div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.buy-security strong {
    font-size: 12px;
}


.buy-security span {
    color: #7f8b9d;

    font-size: 11px;
}


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

@media (max-width: 700px) {

    .buy-header {
        padding: 0 18px;
    }

    .buy-container {
        width: min(100% - 22px, 600px);

        padding-top: 35px;
    }

    .buy-heading h2 {
        font-size: 26px;
    }

    .buy-assets-card {
        padding: 17px;
    }

    .buy-assets-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 420px) {

    .buy-heading p {
        font-size: 13px;
    }

    .buy-asset {
        min-height: 72px;
    }

    .buy-asset-icon {
        width: 42px;
        height: 42px;
    }

}

/* ================================
   BUY PAYMENT PAGE
================================ */

.buy-payment-container {
    width: 92%;
    max-width: 650px;
    margin: 45px auto 80px;
}

.buy-header {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(5,15,35,0.75);
}

.buy-back {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}

.buy-header-title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.buy-header-title span {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.buy-header-title small {
    color: #7f91aa;
    font-size: 11px;
    margin-top: 3px;
}

.buy-security {
    color: #8da1ba;
    font-size: 18px;
}


/* Progress */

.buy-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.progress-step span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #172235;
    color: #718198;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.progress-step small {
    color: #718198;
    font-size: 11px;
}

.progress-step.active span {
    background: #34445b;
    color: #fff;
}

.progress-step.active small {
    color: #aebbd0;
}

.progress-line {
    width: 75px;
    height: 1px;
    background: #263247;
    margin: 0 10px 20px;
}

.progress-line.active {
    background: #5d6c82;
}


/* Card */

.buy-payment-card {
    background: linear-gradient(
        145deg,
        rgba(18,31,54,0.96),
        rgba(8,19,38,0.98)
    );

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}


/* Selected Asset */

.selected-buy-asset {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.selected-asset-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #1b2a40;
    color: #d8e1ed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.selected-buy-asset span {
    color: #7d8da4;
    font-size: 12px;
}

.selected-buy-asset h2 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 21px;
}


/* Heading */

.payment-heading {
    margin-bottom: 22px;
}

.payment-heading h1 {
    color: #fff;
    font-size: 23px;
    margin-bottom: 7px;
}

.payment-heading p {
    color: #8191a8;
    font-size: 13px;
}


/* Payment Methods */

.payment-method {
    width: 100%;
    min-height: 76px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 15px;
    background: rgba(255,255,255,0.025);
    margin-bottom: 13px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s ease;
}

.payment-method.available:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.payment-method.disabled {
    cursor: pointer;
    opacity: 0.55;
}

.payment-method-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #18283d;
    color: #aebdd0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.payment-method-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.payment-method-info strong {
    color: #e9eef5;
    font-size: 14px;
}

.payment-method-info span {
    color: #74849a;
    font-size: 11px;
}

.payment-method-arrow {
    color: #708096;
}

.coming-soon-badge {
    color: #8796aa;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}


/* Security */

.secure-payment-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
}

.secure-payment-note > i {
    color: #8798ad;
}

.secure-payment-note div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.secure-payment-note strong {
    color: #c7d1de;
    font-size: 11px;
}

.secure-payment-note span {
    color: #718198;
    font-size: 10px;
}


/* Coming Soon Modal */

.coming-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.coming-modal.show {
    display: flex;
}

.coming-modal-box {
    width: 100%;
    max-width: 370px;
    background: #101d31;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.coming-modal-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #1d2b40;
    color: #a9b6c7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
}

.coming-modal-box h2 {
    color: #fff;
    margin-bottom: 10px;
}

.coming-modal-box p {
    color: #8190a5;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.coming-modal-box button {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: #27364a;
    color: #fff;
    cursor: pointer;
}


/* Mobile */

@media (max-width: 600px) {

    .buy-payment-container {
        margin-top: 30px;
    }

    .buy-payment-card {
        padding: 20px;
        border-radius: 18px;
    }

    .progress-line {
        width: 35px;
    }

    .payment-heading h1 {
        font-size: 20px;
    }

    .coming-soon-badge {
        font-size: 8px;
        padding: 5px 7px;
    }

}


/* =========================================
   BUY CARD PAYMENT PAGE
========================================= */

.buy-card-container {
    width: 92%;
    max-width: 650px;
    margin: 40px auto 80px;
}


/* Card Payment Box */

.card-payment-box {
    background: linear-gradient(
        145deg,
        rgba(18,31,54,0.97),
        rgba(8,19,38,0.99)
    );

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 30px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);
}


/* Heading */

.card-payment-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.card-heading-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;

    background: #1a2a40;
    color: #b8c5d5;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.card-payment-heading h1 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 5px;
}

.card-payment-heading p {
    color: #7d8da4;
    font-size: 12px;
    margin: 0;
}


/* Buying Summary */

.buying-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 13px;

    margin-bottom: 27px;
}

.buying-summary > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.buying-summary span {
    color: #718198;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.buying-summary strong {
    color: #e9eef5;
    font-size: 15px;
}

.buying-summary > i {
    color: #64758b;
    font-size: 13px;
}


/* Form */

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

.form-group label {
    display: block;
    color: #aebbd0;
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 600;
}

.input-wrapper {
    height: 50px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 11px;

    transition: .2s ease;
}

.input-wrapper:focus-within {
    border-color: rgba(150,165,185,0.35);
    background: rgba(255,255,255,0.04);
}

.input-wrapper i {
    color: #6f8198;
    margin-right: 11px;
    font-size: 14px;
}

.input-wrapper input {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #fff;

    font-size: 13px;
}

.input-wrapper input::placeholder {
    color: #53647a;
}

.currency-symbol {
    color: #9aa9bc;
    font-size: 14px;
    margin-right: 9px;
}


/* Two columns */

.card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


/* Security */

.card-security-note {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    margin: 5px 0 22px;

    border-radius: 12px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.05);
}

.card-security-note > i {
    color: #8798ad;
    font-size: 17px;
}

.card-security-note div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-security-note strong {
    color: #c6d0dd;
    font-size: 11px;
}

.card-security-note span {
    color: #6f8097;
    font-size: 10px;
    line-height: 1.5;
}


/* Confirm Button */

.confirm-buy-btn {
    width: 100%;

    height: 52px;

    border: none;
    border-radius: 12px;

    background: #27364a;

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.confirm-buy-btn:hover {
    background: #34445b;
    transform: translateY(-1px);
}

.confirm-buy-btn i {
    font-size: 12px;
}


/* Mobile */

@media (max-width: 600px) {

    .buy-card-container {
        margin-top: 25px;
    }

    .card-payment-box {
        padding: 20px;
        border-radius: 18px;
    }

    .card-payment-heading h1 {
        font-size: 19px;
    }

    .card-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .buying-summary {
        padding: 13px;
    }

}
/* =========================================
   BUY CONFIRMATION PAGE
========================================= */

.confirmation-container {
    width: 92%;
    max-width: 600px;
    margin: 55px auto 80px;
}


.confirmation-box {
    text-align: center;

    padding: 42px 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(18,31,54,0.97),
            rgba(8,19,38,0.99)
        );

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);
}


/* Success Icon */

.confirmation-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(95,125,105,0.18);

    border: 1px solid rgba(150,180,160,0.25);

    color: #b9d4c0;

    font-size: 28px;
}


/* Label */

.confirmation-label {
    display: inline-block;

    color: #91a7ba;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;

    margin-bottom: 13px;
}


/* Heading */

.confirmation-box h1 {
    color: #ffffff;

    font-size: 27px;

    line-height: 1.3;

    margin: 0 0 16px;
}


/* Message */

.confirmation-message {
    max-width: 470px;

    margin: 0 auto 27px;

    color: #8291a5;

    font-size: 13px;

    line-height: 1.8;
}

.confirmation-message strong {
    color: #d7e0ea;
}


/* Information Box */

.confirmation-info {
    text-align: left;

    padding: 6px 18px;

    margin-bottom: 18px;

    border-radius: 14px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.06);
}


.confirmation-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 16px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}

.confirmation-info-row:last-child {
    border-bottom: none;
}


.confirmation-info-row span {
    color: #8292a7;

    font-size: 12px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.confirmation-info-row span i {
    width: 15px;

    color: #74869b;
}


.confirmation-info-row strong {
    color: #d5dde7;

    font-size: 11px;
}


.pending-status {
    padding: 5px 10px;

    border-radius: 20px;

    background: rgba(180,160,95,0.12);

    color: #c6b98b !important;
}


/* Note */

.confirmation-note {
    display: flex;
    align-items: flex-start;

    text-align: left;

    gap: 10px;

    padding: 13px 15px;

    margin-bottom: 22px;

    border-radius: 12px;

    background: rgba(255,255,255,0.02);
}


.confirmation-note i {
    color: #8193a8;

    margin-top: 2px;

    font-size: 14px;
}


.confirmation-note p {
    margin: 0;

    color: #718197;

    font-size: 11px;

    line-height: 1.6;
}


/* Dashboard Button */

.confirmation-dashboard-btn {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    background: #27364a;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: .2s ease;
}


.confirmation-dashboard-btn:hover {
    background: #34445b;

    transform: translateY(-1px);
}


.confirmation-dashboard-btn i {
    font-size: 12px;
}


/* Mobile */

@media (max-width: 600px) {

    .confirmation-container {
        margin-top: 30px;
    }

    .confirmation-box {
        padding: 30px 20px;
        border-radius: 19px;
    }

    .confirmation-box h1 {
        font-size: 22px;
    }

    .confirmation-info {
        padding: 5px 13px;
    }

}
/* =========================================
   MODERN BUY CURRENCY PAGE
========================================= */

.modern-buy-container {
    width: 92%;
    max-width: 1100px;
    margin: 45px auto 80px;
}


/* HEADER */

.buy-modern-header {
    height: 82px;
    padding: 0 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(255,255,255,0.07);

    background: rgba(3,12,27,0.82);

    backdrop-filter: blur(18px);
}


.modern-back-btn {
    width: 50px;
    height: 50px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #dce6f2;
    text-decoration: none;

    background: rgba(255,255,255,0.055);

    border: 1px solid rgba(255,255,255,0.09);

    font-size: 19px;

    transition: .2s ease;
}


.modern-back-btn:hover {
    background: rgba(255,255,255,0.09);
    transform: translateX(-2px);
}


.modern-buy-title {
    display: flex;
    align-items: center;
    gap: 13px;
}


.buy-cart-icon {
    color: #3fe7a4;
    font-size: 28px;
}


.modern-buy-title h2 {
    color: #fff;
    margin: 0;
    font-size: 24px;
}


.modern-buy-title span {
    display: block;
    color: #71849b;
    font-size: 10px;
    margin-top: 2px;
}


.modern-secure {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #48e8bb;

    font-size: 13px;
}


.modern-secure i {
    font-size: 21px;
}


/* INTRO */

.buy-intro {
    text-align: center;
    margin-bottom: 28px;
}


.buy-intro h1 {
    color: #f5f8fc;
    font-size: 46px;
    margin: 15px 0 7px;
    letter-spacing: -1.5px;
}


.buy-intro h1 span {
    background: linear-gradient(
        90deg,
        #4bb5ff,
        #35e2bd
    );
     background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.buy-intro p {
    color: #8999ad;
    font-size: 15px;
    margin: 0;
}


.buy-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 17px;

    border-radius: 30px;

    color: #65dfff;
    font-size: 11px;
    font-weight: 600;

    background: rgba(36,113,190,0.13);

    border: 1px solid rgba(60,155,230,0.18);
}


.buy-intro-badge i {
    color: #bce78e;
}


/* SEARCH */

.buy-search-box {
    height: 64px;

    display: flex;
    align-items: center;

    padding-left: 20px;

    border-radius: 17px;

    background: rgba(13,28,51,0.72);

    border: 1px solid rgba(75,125,190,0.22);

    margin-bottom: 30px;

    box-shadow:
        0 15px 45px rgba(0,0,0,0.18);
}


.buy-search-box > i {
    color: #8ea0b7;
    font-size: 20px;
}


.buy-search-box input {
    flex: 1;

    height: 100%;

    padding: 0 15px;

    background: transparent;
    border: none;
    outline: none;

    color: #fff;

    font-size: 14px;
}


.buy-search-box input::placeholder {
    color: #687b92;
}


.filter-btn {
    width: 64px;
    height: 100%;

    border: none;
    border-left: 1px solid rgba(255,255,255,0.06);

    background: transparent;

    color: #a9b7c9;

    font-size: 18px;

    cursor: pointer;
}


/* PROMO */

.buy-promo {
    min-height: 210px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 30px 38px;

    margin-bottom: 30px;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0,173,150,0.20),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            rgba(22,31,103,0.95),
            rgba(8,38,72,0.95)
        );

    border: 1px solid rgba(66,130,230,0.27);
}


.buy-promo::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(50,130,255,0.12);

    filter: blur(45px);

    right: 180px;
    top: -100px;
}


.promo-content {
    position: relative;
    z-index: 2;
}


.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    border-radius: 20px;

    color: #63dcff;
    background: rgba(13,91,170,0.32);

    font-size: 11px;
}


.promo-badge i {
    color: #d5ed9e;
}


.promo-content h2 {
    color: #fff;

    font-size: 28px;

    margin: 18px 0 10px;
}


.promo-content p {
    color: #aebbd0;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


.promo-visual {
    position: relative;

    width: 330px;
    height: 160px;
}


.promo-coin {
    position: absolute;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
    font-size: 28px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}


.btc-visual {
    background: #f6a623;
    color: #fff;

    top: 8px;
    right: 115px;

    font-size: 35px;
}


.eth-visual {
    background: #7358e8;
    color: #fff;

    left: 50px;
    top: 50px;

    font-size: 31px;
}


.usdt-visual {
    background: #22ad83;
    color: #fff;

    right: 35px;
    top: 62px;

    font-size: 27px;
}


.promo-cart {
    position: absolute;

    right: 105px;
    bottom: 3px;

    color: #43e6a9;

    font-size: 70px;

    filter:
        drop-shadow(
            0 0 18px
            rgba(50,230,170,0.28)
        );
}


/* ASSET GRID */

.buy-assets-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


.modern-buy-asset {
    min-height: 142px;

    display: flex;
    align-items: center;

    text-align: left;

    padding: 20px 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(20,37,64,0.83),
            rgba(10,25,47,0.92)
        );

    border: 1px solid rgba(83,128,180,0.25);

    color: white;

    cursor: pointer;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.modern-buy-asset:hover {
    transform: translateY(-3px);

    border-color: rgba(73,170,230,0.48);

    background:
        linear-gradient(
            145deg,
            rgba(25,45,76,0.95),
            rgba(10,28,51,0.98)
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,0.24);
}


.modern-asset-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 17px;

    font-size: 28px;
    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(0,0,0,0.25);
}


/* ICONS */

.btc-icon {
    background: #f7931a;
    color: #fff;
}


.eth-icon {
    background: #536dfe;
    color: #fff;
}


.usdt-icon {
    background: #20a879;
    color: #fff;
}


.bnb-icon {
    background: #f3ba2f;
    color: #fff;
}


.usdc-icon {
    background: #2775ca;
    color: #fff;
}


.sol-icon {
    background: linear-gradient(
        135deg,
        #9945ff,
        #14f195
    );

    color: #fff;
}


.pyusd-icon {
    background: #0070ba;
    color: #fff;
}


.ethm-icon {
    background: #654ee4;
    color: #fff;
}


.musd-icon {
    background: #344b69;
    color: #fff;
}


/* ASSET TEXT */

.modern-asset-info {
    min-width: 0;
    flex: 1;
}


.modern-asset-info strong {
    display: block;

    color: #edf3fa;

    font-size: 16px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.modern-asset-info > span {
    display: block;

    color: #718299;

    font-size: 12px;

    margin-top: 4px;
}


.asset-market {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 10px;
}


.asset-market b {
    color: #e7edf5;

    font-size: 13px;
}


.asset-market em {
    color: #39e39a;

    font-size: 11px;

    font-style: normal;
}


.asset-market em.negative {
    color: #ef7f8a;
}


.asset-arrow {
    width: 46px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 10px;

    border-radius: 13px;

    background: rgba(255,255,255,0.025);

    color: #aab7c8;

    font-size: 14px;
}


/* SECURITY */

.buy-security-banner {
    min-height: 100px;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 30px;

    padding: 18px 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            rgba(11,37,56,0.72),
            rgba(10,28,49,0.85)
        );

    border: 1px solid rgba(29,179,160,0.27);
}


.security-shield {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: rgba(44,180,145,0.12);

    color: #3fe0a6;

    font-size: 23px;
}


.buy-security-banner > div:nth-child(2) {
    flex: 1;
}


.buy-security-banner strong {
    display: block;

    color: #48e5a9;

    font-size: 14px;

    margin-bottom: 5px;
}


.buy-security-banner span {
    color: #77899f;

    font-size: 11px;
}


.security-lock {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    border: 1px solid rgba(70,154,245,0.5);

    background: rgba(30,89,160,0.12);

    color: #55aaff;

    font-size: 21px;
}


/* MOBILE */

@media (max-width: 750px) {

    .buy-modern-header {
        padding: 0 18px;
    }

    .modern-buy-title h2 {
        font-size: 18px;
    }

    .modern-secure span {
        display: none;
    }

    .modern-secure i {
        font-size: 20px;
    }

    .modern-buy-container {
        width: 94%;
        margin-top: 30px;
    }

    .buy-intro h1 {
        font-size: 35px;
    }

    .buy-intro p {
        font-size: 13px;
    }

    .buy-promo {
        padding: 25px;
    }

    .promo-content h2 {
        font-size: 23px;
    }

    .promo-visual {
        display: none;
    }

    .buy-assets-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .modern-back-btn {
        width: 43px;
        height: 43px;
    }

    .buy-cart-icon {
        font-size: 22px;
    }

    .modern-buy-title span {
        display: none;
    }

    .buy-intro h1 {
        font-size: 30px;
    }

    .buy-search-box {
        height: 57px;
    }

    .modern-buy-asset {
        min-height: 125px;
        padding: 15px;
    }

    .modern-asset-icon {
        width: 53px;
        height: 53px;

        margin-right: 13px;

        font-size: 24px;
    }
    /* =========================================
   BUY PAGE - REAL ASSET LOGOS
========================================= */

.modern-asset-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 17px;

    overflow: hidden;

    background: rgba(255,255,255,0.035);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.25);
}


.modern-asset-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

    .modern-asset-info strong {
        font-size: 14px;
    }

    .buy-security-banner {
        padding: 15px;
    }

    .security-lock {
        display: none;
    }

}
/* =========================================
   BUY PAGE - MATCH MAIN WEBSITE THEME
   REMOVE GREEN / TEAL
========================================= */

/* Header */

.buy-cart-icon {
    color: #9aa9bc !important;
}

.modern-secure {
    color: #9aa9bc !important;
}

.modern-secure i {
    color: #aab8c9 !important;
}


/* Intro */

.buy-intro h1 span {
    background: linear-gradient(
        90deg,
        #8fa7c2,
        #d5deea
    ) !important;
      background-clip: text;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.buy-intro-badge {
    color: #aebed0 !important;

    background: rgba(255,255,255,0.045) !important;

    border-color: rgba(255,255,255,0.09) !important;
}

.buy-intro-badge i {
    color: #9aaabd !important;
}


/* Promo Banner */

.buy-promo {
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(55,105,170,0.16),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            rgba(22,31,75,0.96),
            rgba(8,28,55,0.97)
        ) !important;

    border-color: rgba(75,125,190,0.28) !important;
}

.buy-promo::before {
    background: rgba(55,115,190,0.12) !important;
}

.promo-badge {
    color: #a9c1da !important;

    background: rgba(50,90,145,0.22) !important;
}

.promo-badge i {
    color: #aebdd0 !important;
}

.promo-cart {
    color: #7e9fca !important;

    filter:
        drop-shadow(
            0 0 18px
            rgba(70,120,190,0.22)
        ) !important;
}


/* Promo Coins */

.btc-visual {
    box-shadow:
        0 10px 30px rgba(0,0,0,0.35) !important;
}

.usdt-visual {
    background: #3c8f7c !important;
}


/* Asset Cards */

.modern-buy-asset:hover {
    border-color: rgba(105,145,190,0.42) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.28) !important;
}


/* Asset Market */

.asset-market em {
    color: #8fa6bf !important;
}

.asset-market em.negative {
    color: #a9828a !important;
}


/* Security Banner */

.buy-security-banner {
    background:
        linear-gradient(
            100deg,
            rgba(15,31,52,0.78),
            rgba(9,24,44,0.90)
        ) !important;

    border-color: rgba(75,125,180,0.22) !important;
}

.security-shield {
    background: rgba(80,110,145,0.12) !important;

    color: #9cafc4 !important;
}

.buy-security-banner strong {
    color: #aebed0 !important;
}

.security-lock {
    border-color: rgba(75,130,200,0.38) !important;

    background: rgba(35,75,125,0.13) !important;

    color: #8db0d8 !important;
}
/* =========================================
   BUY PAGE - FIX REAL ASSET LOGOS
========================================= */

.modern-buy-asset {
    text-decoration: none !important;
    color: #fff !important;
}

.modern-asset-icon {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    flex-shrink: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    overflow: hidden !important;

    margin-right: 17px !important;

    background: rgba(255,255,255,0.035) !important;
}

.modern-asset-icon img {
    width: 46px !important;
    height: 46px !important;

    max-width: 46px !important;
    max-height: 46px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    display: block !important;
}


/* Keep asset text normal */

.modern-asset-info {
    min-width: 0 !important;
    flex: 1 !important;
}

.modern-asset-info strong {
    display: block !important;
    color: #edf3fa !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

.modern-asset-info > span {
    display: block !important;
    color: #718299 !important;
    font-size: 12px !important;
    margin-top: 4px !important;

    text-decoration: none !important;
}

.modern-asset-info * {
    text-decoration: none !important;
}
.swap-rate-box {
    width: 100%;
    margin: 14px 0 16px;
    padding: 14px 16px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(114, 183, 255, 0.16);
    border-radius: 14px;
}

.swap-rate-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
}

.swap-rate-label i {
    color: #72b7ff;
    font-size: 13px;
}

.swap-rate-box strong {
    color: #72b7ff;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}


@media (max-width: 600px) {

    .swap-rate-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .swap-rate-box strong {
        text-align: left;
    }

}
/* =========================================================
   CHANGE DESTINATION NETWORK BUTTON
========================================================= */

.selected-network {
    position: relative;
}

.selected-network-info {
    flex: 1;
    min-width: 0;
}


.change-network-btn {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    text-decoration: none;

    background: rgba(255,255,255,0.055);

    border: 1px solid rgba(255,255,255,0.09);

    color: #a6a6b1;

    font-size: 14px;

    transition: all 0.2s ease;
}


.change-network-btn:hover {
    background: rgba(255,255,255,0.10);

    color: #ffffff;

    transform: rotate(180deg);
}


.change-network-btn:active {
    transform: scale(0.94);
}
/* =====================================================
   REVIEW MODAL - COMPACT & SCROLLABLE FIX
===================================================== */
.review-modal-box {
    width: min(92%, 560px);
    max-height: 85vh;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
    padding: 22px;

    /* Scrollbar box ke andar rahe */
    scrollbar-gutter: stable;
}

/* Scrollbar size */
.review-modal-box::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.review-modal-box::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 2px;
}

/* Scrollbar line */
.review-modal-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.20);
    border-radius: 10px;
}

.review-modal-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.35);
}
/* Keep header compact */
.review-modal-header {
    margin-bottom: 16px;
}

/* Reduce asset rows */
.review-asset-row {
    padding: 12px 14px;
    margin-bottom: 8px;
}

/* Make summary smaller */
.review-smart-summary {
    margin: 12px 0;
    padding: 13px;
    border-radius: 14px;
}

.smart-summary-title {
    margin-bottom: 10px;
}

.smart-summary-grid {
    gap: 8px;
}

.smart-summary-item {
    padding: 9px 10px;
}

.smart-summary-item span {
    font-size: 11px;
    margin-bottom: 3px;
}

.smart-summary-item strong {
    font-size: 13px;
}

.review-live-rate {
    margin-top: 8px;
    padding: 10px 12px;
}

/* Notice smaller */
.review-notice {
    margin: 12px 0;
    padding: 10px 12px;
}

/* Buttons stay visible */
.review-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 4px;
}

/* Slightly smaller than current 54px */
.review-cancel-btn,
.confirm-swap-btn {
    min-height: 48px;
    padding: 11px 18px;
    font-size: 14px;
    border-radius: 12px;
}

/* Scrollbar */
.review-modal-box::-webkit-scrollbar {
    width: 5px;
}

.review-modal-box::-webkit-scrollbar-track {
    background: transparent;
}

.review-modal-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 10px;
}


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

@media (max-width: 600px) {

    .review-modal-box {
        width: 94%;
        max-height: 86vh;
        padding: 18px;
    }

    .review-actions {
        flex-direction: column;
    }

    .review-cancel-btn,
    .confirm-swap-btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

}
/* ================================
   RECEIVE QR CODE
================================ */
/* =========================================================
   RECEIVE PAGE QR CODE
========================================================= */

.qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 24px 0 30px;
}


/* QR outer card */

.qr-wrapper {
    position: relative;

    width: 248px;
    height: 248px;

    padding: 18px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(57, 135, 255, 0.05);
}


/* Actual QR */

.qr-code {
    width: 212px;
    height: 212px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    overflow: visible;

    box-sizing: border-box;
}


.qr-code canvas,
.qr-code img {

    display: block;

    width: 212px !important;
    height: 212px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain;

    image-rendering: pixelated;
}


/* =========================================================
   CENTER COIN LOGO
========================================================= */

.qr-logo {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 48px;
    height: 48px;

    padding: 5px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 13px;

    border: 3px solid #ffffff;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.22);

    z-index: 5;

    pointer-events: none;
}


.qr-logo img {

    width: 34px;
    height: 34px;

    display: block;

    object-fit: contain;

    border-radius: 50%;
}


/* =========================================================
   QR LABEL
========================================================= */

.qr-label {

    margin-top: 14px;

    color: #8f9caf;

    font-size: 13px;

    font-weight: 500;

    text-align: center;
}


/* =========================================================
   QR FALLBACK
========================================================= */

.qr-unavailable {

    width: 212px;
    height: 212px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #8f9caf;

    background: #ffffff;

    border-radius: 10px;

    font-size: 12px;
}


.qr-unavailable i {

    font-size: 34px;

    color: #65748a;
}


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

@media (max-width: 480px) {

    .qr-wrapper {

        width: 228px;
        height: 228px;

        padding: 16px;

        border-radius: 20px;
    }


    .qr-code,
    .qr-code canvas,
    .qr-code img {

        width: 196px !important;
        height: 196px !important;
    }


    .qr-logo {

        width: 44px;
        height: 44px;

        border-radius: 12px;
    }


    .qr-logo img {

        width: 31px;
        height: 31px;
    }
}
/* =========================================
   PREMIUM WALLET ADDRESS
========================================= */

.wallet-address {
    width: 100%;
    margin-top: 28px;
}


/* Title */

.wallet-address-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}


.wallet-title-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);

    color: #4da3ff;

    font-size: 17px;

    flex-shrink: 0;
}


.wallet-address-title h3 {
    margin: 0;

    font-size: 16px;
    font-weight: 600;

    color: #ffffff;

    letter-spacing: 0.2px;
}


.wallet-address-title p {
    margin: 3px 0 0;

    font-size: 12px;

    color: rgba(255, 255, 255, 0.45);
}


/* Address Box */

.address-box {
    width: 100%;

    min-height: 66px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 12px 12px 17px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 30px rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.address-box:hover {
    border-color: rgba(77, 163, 255, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(77, 163, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.22),
        0 0 20px rgba(77, 163, 255, 0.05);
}


/* Actual Address */

.address-box span {
    flex: 1;

    min-width: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* Copy Button */

#copy-address {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);

    color: rgba(255, 255, 255, 0.75);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 15px;

    transition:
        all 0.25s ease;
}


#copy-address:hover {
    background: rgba(77, 163, 255, 0.14);

    border-color: rgba(77, 163, 255, 0.35);

    color: #4da3ff;

    transform: translateY(-1px);
}


#copy-address:active {
    transform: scale(0.94);
}


/* Mobile */

@media (max-width: 600px) {

    .wallet-address {
        margin-top: 22px;
    }

    .wallet-address-title h3 {
        font-size: 15px;
    }

    .wallet-address-title p {
        font-size: 11px;
    }

    .wallet-title-icon {
        width: 37px;
        height: 37px;

        border-radius: 10px;
    }

    .address-box {
        min-height: 62px;

        padding: 10px 10px 10px 14px;

        border-radius: 14px;
    }

    .address-box span {
        font-size: 11px;
    }

    #copy-address {
        width: 39px;
        height: 39px;

        flex-basis: 39px;

        border-radius: 10px;
    }

}
/* =====================================================
   LOGIN FIELD ERROR
===================================================== */

.login-field-error {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: -8px;
    margin-bottom: 14px;

    color: #ff5c6c;
    font-size: 12px;
    font-weight: 500;
}

.login-field-error i {
    font-size: 11px;
}
.login-alert {
    display: flex;
    align-items: center;
    gap: 9px;

    width: 100%;
    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 11px 13px;

    border: 1px solid rgba(255, 82, 100, 0.25);
    border-radius: 9px;

    background: rgba(255, 82, 100, 0.08);
    color: #ff6675;

    font-size: 13px;
    line-height: 1.4;
}

.login-alert i {
    font-size: 13px;
    flex-shrink: 0;
}
.login-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 82, 100, 0.25);
    border-radius: 9px;
    background: rgba(255, 82, 100, 0.08);
    color: #ff6675;
    font-size: 13px;
    line-height: 1.4;
}

.login-alert i {
    font-size: 13px;
    flex-shrink: 0;
}
/* =========================================================
   MOBILE LOGIN - PREVENT INPUT ZOOM
========================================================= */

@media (max-width: 768px) {

    .login-container input,
    .login-container select,
    .login-container textarea {
        font-size: 16px !important;
    }

    .login-container input:focus,
    .login-container select:focus,
    .login-container textarea:focus {
        font-size: 16px !important;
    }
}