/*==========================================
MARKETPLACE
==========================================*/

:root{

    --bg:#050B18;
    --card:#0F172A;
    --primary:#2563EB;
    --primary-light:#60A5FA;
    --border:rgba(255,255,255,.08);
    --text:#FFFFFF;
    --muted:#94A3B8;

}

body{

    background:var(--bg);
    color:var(--text);

}

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



/*==========================================
HERO
==========================================*/



/*==========================================
TOOLBAR
==========================================*/

.toolbar-section{

    padding:35px 0;

}

.market-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.toolbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.filter-button{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.filter-button:hover{

    transform:translateY(-3px);

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

}

.product-counter{

    color:var(--muted);

    font-size:15px;

}

.product-counter strong{

    color:#fff;

}

.toolbar-right select{

    width:220px;

    height:52px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:14px;

    color:#fff;

    padding:0 16px;

    outline:none;

    cursor:pointer;

}

/*==========================================
MARKET LAYOUT
==========================================*/

.marketplace-section{

    padding-bottom:80px;

}

.market-layout{

    display:grid;

    grid-template-columns:290px 1fr;

    gap:30px;

    align-items:start;

}

/*==========================================
FILTER SIDEBAR
==========================================*/

.filter-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:24px;

    position:sticky;

    top:100px;

}

.filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.filter-header h3{

    font-size:22px;

}

.filter-header button{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#111827;

    color:#fff;

    cursor:pointer;

}

.filter-group{

    margin-bottom:22px;

}

.filter-group label{

    display:block;

    margin-bottom:10px;

    color:var(--muted);

    font-size:14px;

}

.filter-group select{

    width:100%;

    height:50px;

    background:#111827;

    border:1px solid var(--border);

    border-radius:12px;

    color:#fff;

    padding:0 14px;

    outline:none;

}

.filter-group input[type="range"]{

    width:100%;

}

#priceValue{

    display:block;

    margin-top:10px;

    color:var(--primary-light);

    font-weight:600;

}

.checkbox{

    display:flex !important;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.checkbox input{

    width:18px;

    height:18px;

}

.reset-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    background:#111827;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.reset-btn:hover{

    background:#1F2937;

}

/*==========================================
FILTER OVERLAY
==========================================*/

.filter-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.filter-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.products-wrapper{

    width:100%;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:16px;

}

@media(max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

    }

}

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

.product-card{

    background:#111827;

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

    border-radius:18px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    max-width:280px;

    margin:auto;

}

.product-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}

.product-image{

    height:80px;

    padding:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b1220;

}

.product-image img{

    width:50px;

    height:50px;

    object-fit:contain;

}

.product-card:hover .product-image img{

    transform:scale(1.06);

}

.product-image i{

    font-size:70px;

    color:#334155;

}

.product-body{

    padding:14px;

}

.product-category{

    display:inline-flex;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(37,99,235,.12);

    color:var(--primary-light);

    font-size:13px;

    font-weight:600;

    margin-bottom:16px;

}

.product-body h3{

    font-size:23px;

    margin-bottom:12px;

    color:#fff;

    line-height:1.3;

}

.product-country{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--muted);

    margin-bottom:20px;

}

.product-badges{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;

}

.product-badges span{

    padding:8px 14px;

    border-radius:999px;

    background:#111827;

    color:#CBD5E1;

    font-size:13px;

}

.product-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.price{

    font-size:22px;

    font-weight:700;

    color:#22d3ee;

}

.buy-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.buy-btn:hover{

    transform:translateY(-2px);

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

}

/*==========================================
EMPTY STATE
==========================================*/

.empty-state{

    grid-column:1/-1;

    text-align:center;

    padding:100px 20px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

}

.empty-state h2{

    margin-bottom:15px;

}

.empty-state p{

    color:var(--muted);

}

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



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



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

@media(max-width:992px){

    .desktop-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .market-layout{

        grid-template-columns:1fr;

    }

    .filter-sidebar{

        position:fixed;

        left:-340px;

        top:0;

        width:320px;

        max-width:90%;

        height:100vh;

        background:#08111F;

        padding:25px;

        z-index:9999;

        transition:.35s;

        overflow-y:auto;

    }

    .filter-sidebar.active{

        left:0;

    }

    .filter-card{

        position:static;

        padding:0;

        border:none;

        background:transparent;

    }

}

@media(max-width:768px){

    .market-hero{

        padding:70px 0;

    }

    .market-hero h1{

        font-size:36px;

    }

    .market-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .toolbar-left{

        justify-content:space-between;

    }

    .toolbar-right select{

        width:100%;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

    .product-bottom{

        flex-direction:column;

        align-items:stretch;

    }

    .buy-btn{

        width:100%;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand p{

        margin-inline:auto;

    }

    .social-links{

        justify-content:center;

    }

}

@media(max-width:480px){

    .logo-content small{

        display:none;

    }

    .market-hero h1{

        font-size:30px;

    }

    .hero-search{

        height:58px;

    }

    .hero-categories{

        gap:10px;

    }

    .chip{

        font-size:13px;

        padding:10px 16px;

    }

}

/*==========================================
PRODUCT CARD MOBILE FIX
==========================================*/

@media (max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .product-card{

        border-radius:18px;

    }

    .product-image{

        height:170px;

    }

    .product-body{

        padding:16px;

    }

    .product-body h3{

    font-size:18px;

    margin:8px 0;

}

    .product-category{

        font-size:12px;

        padding:6px 12px;

    }

    .product-country{

        font-size:14px;

        margin-bottom:14px;

    }

    .product-badges{

        gap:8px;

        margin-bottom:18px;

    }

    .product-badges span{

        font-size:11px;

        padding:6px 10px;

    }

    .price{

        font-size:22px;

    }

    .buy-btn{

    height:42px;

    font-size:14px;

    border-radius:10px;

}

}

/*==========================================
DASHBOARD MARKETPLACE
==========================================*/

.market-stats{

    display:grid;

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

    gap:20px;

    margin:30px 0;

}

.market-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.search-box{

    flex:1;

    position:relative;

}

.search-box i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94A3B8;

}

.search-box input{

    width:100%;

    height:58px;

    padding-left:50px;

    border-radius:14px;

    border:1px solid var(--border);

    background:#0F172A;

    color:white;

    font-size:15px;

}

.toolbar-actions{

    display:flex;

    gap:15px;

}

.toolbar-actions select{

    height:58px;

    padding:0 18px;

    border-radius:14px;

    background:#0F172A;

    color:white;

    border:1px solid var(--border);

}

.market-content{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:25px;

}

@media(max-width:768px){

    .market-content{

        grid-template-columns:1fr;

    }

    .filter-sidebar{

        display:none;

    }

    .products-area{

        width:100%;

    }

}

.products-area{

    width:100%;

}

.section-title{

    margin-bottom:25px;

}

.section-title h2{

    font-size:26px;

    margin-bottom:6px;

}

.section-title p{

    color:#94A3B8;

}

@media(max-width:992px){

.market-content{

grid-template-columns:1fr;

}

.market-stats{

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

}

}

@media(max-width:768px){

.market-toolbar{

flex-direction:column;

align-items:stretch;

}

.toolbar-actions{

flex-direction:column;

}

.market-stats{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

    .products-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

        gap:16px;

    }

    .product-card{

    width:100%;

    max-width:none;

}
}

/* ==========================================
   COMMUNITY WELCOME MODAL
========================================== */

.community-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

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

    backdrop-filter: blur(5px);
}

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

.community-modal-content {
    position: relative;

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

    padding: 32px 25px;

    text-align: center;

    background: #ffffff;

    border-radius: 20px;

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

    animation: communityModalIn 0.25s ease;
}

@keyframes communityModalIn {

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

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

}

.community-close {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #f3f4f6;

    color: #6b7280;

    font-size: 24px;

    cursor: pointer;
}

.community-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: #f3f4f6;

    font-size: 25px;
}

.community-modal-content h2 {
    margin: 0 0 10px;

    color: #111827;

    font-size: 24px;
}

.community-modal-content p {
    margin: 0 auto 25px;

    max-width: 350px;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.6;
}

.community-modal-buttons {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.community-modal-btn {
    display: flex;

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

    gap: 10px;

    width: 100%;

    padding: 14px;

    border-radius: 10px;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: transform 0.2s ease,
                opacity 0.2s ease;
}

.community-modal-btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.community-modal-btn.whatsapp {
    background: #25D366;
}

.community-modal-btn.telegram {
    background: #229ED9;
}

.community-continue {
    width: 100%;

    margin-top: 18px;

    padding: 13px;

    border: none;

    border-radius: 10px;

    background: #111827;

    color: #ffffff;

    font-weight: 600;

    cursor: pointer;
}

.community-continue:hover {
    opacity: 0.9;
}