/* ==========================================
INTERNATIONAL MARKET PAGE
========================================== */

.international-hero{
    background:linear-gradient(135deg,var(--primary),#0d4c9b);
    color:var(--white);
    padding:80px 0;
    text-align:center;
}

.international-hero .container{
    max-width:900px;
    margin:auto;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.15);
    padding:10px 18px;
    border-radius:40px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:600;
}

.international-hero h1{
    font-size:48px;
    margin-bottom:20px;
    font-weight:700;
}

.international-hero p{
    font-size:18px;
    line-height:1.8;
    opacity:.95;
}


/* ==========================================
MARKET TABS
========================================== */

.market-tabs{
    background:var(--white);
    border-bottom:1px solid var(--border);
    padding:20px 0;
    position:sticky;
    top:80px;
    z-index:50;
}

.market-tabs .container{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
}

.market-tab{
    border:none;
    background:var(--light);
    padding:12px 22px;
    border-radius:30px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.market-tab:hover{
    background:var(--primary);
    color:var(--white);
}

.market-tab.active{
    background:var(--secondary);
    color:var(--dark);
}


/* ==========================================
LIVE MARKET SECTION
========================================== */

.international-market-area{
    padding:60px 0;
    background:var(--light);
}

#market-content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}


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

.market-card{
    background:var(--white);
    border-radius:var(--radius);
    padding:25px;
    box-shadow:var(--shadow);
    transition:.3s;
}

.market-card:hover{
    transform:translateY(-6px);
}

.market-card h3{
    margin-bottom:20px;
    color:var(--primary);
}

.market-price{
    font-size:32px;
    font-weight:700;
    color:var(--dark);
}

.market-change{
    margin-top:12px;
    font-size:16px;
    font-weight:600;
}

.market-change.positive{
    color:var(--green);
}

.market-change.negative{
    color:#b42318;
}


/* ==========================================
NEWS SECTION
========================================== */

.international-news{
    padding:70px 0;
    background:var(--white);
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:34px;
    color:var(--primary);
    margin-bottom:10px;
}

.section-title p{
    color:var(--grey);
}

#news-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}


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

.news-card{
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.news-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.news-content{
    padding:25px;
}

.news-content h3{
    color:var(--primary);
    margin-bottom:15px;
    line-height:1.5;
}

.news-content p{
    color:var(--grey);
    line-height:1.8;
}

.news-content a{
    display:inline-block;
    margin-top:20px;
    text-decoration:none;
    color:var(--primary);
    font-weight:600;
}


/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:768px){

    .international-hero{
        padding:60px 20px;
    }

    .international-hero h1{
        font-size:34px;
    }

    .market-tabs{
        top:70px;
    }

    .market-tabs .container{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:10px;
    }

    .market-tab{
        white-space:nowrap;
    }

}