/* =========================
   SELLPUNT V2 MASTER CSS
========================= */

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

html,
body{
margin:0;
padding:0;
min-height:100vh;
}

/* =========================
   BACKGROUND
========================= */

body{
background:
url('../hero-bg-desktop.webp')
center center
no-repeat;

background-size:cover;
background-attachment:fixed;

min-height:100vh;

position:relative;

overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
inset:0;
background:rgba(255,255,255,.12);
pointer-events:none;
z-index:-1;
}

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

.logo{
position:fixed;
top:15px;
left:50%;
transform:translateX(-50%);
z-index:1000;
}

.logo img{
height:55px;
width:auto;
}

/* =========================
   MENU BUTTON
========================= */

.menu{
position:fixed;
top:25px;
left:25px;

font-size:38px;

color:white;

text-decoration:none;

z-index:1000;

cursor:pointer;

text-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* =========================
   SIDE MENU
========================= */

.side-menu{

position:fixed;

top:0;
left:-320px;

width:300px;
height:100vh;

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

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

padding-top:100px;

display:flex;
flex-direction:column;

gap:16px;

transition:.35s;

z-index:9999;

overflow-y:auto;

}

.side-menu.active{
left:0;
}

.side-menu a{

padding:8px 30px;

text-decoration:none;

font-weight:700;

font-size:14px;

color:#111;

transition:.2s;
}

.side-menu a:hover{
padding-left:40px;
}

/* =========================
   MENU OVERLAY
========================= */

.menu-overlay{

position:fixed;

inset:0;

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

opacity:0;

pointer-events:none;

transition:.3s;

z-index:9998;

}

.menu-overlay.active{

opacity:1;

pointer-events:auto;

}

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

.page-container{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:

120px 20px 40px;

}

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

.card{

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

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border-radius:25px;

padding:25px;

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

margin-bottom:20px;


backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}

/* =========================
   HEADINGS
========================= */

.card h1{

color:#fff;

text-shadow:
0 4px 15px rgba(0,0,0,.25);

}

h2{
font-size:24px;
margin-bottom:15px;
}

h3{
font-size:20px;
margin-bottom:10px;
}

/* =========================
   BUTTONS
========================= */

.btn{

display:inline-block;

padding:14px 28px;

border:none;

border-radius:15px;

cursor:pointer;

font-size:16px;

font-weight:700;

text-decoration:none;

transition:.25s;
}

.btn:hover{
transform:translateY(-2px);
}

.btn-primary{

background:#d40000;

color:white;

}

.btn-secondary{

background:white;

color:black;

}

/* =========================
   FORMS
========================= */

input,
select,
textarea{

width:100%;

padding:15px;

border:none;

border-radius:15px;

margin-bottom:15px;

font-size:16px;

outline:none;

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

}

textarea{
resize:vertical;
}

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

.search-wrapper{

width:min(700px,90%);

margin:0 auto;

}

.search-bar{

display:flex;
flex-direction:column;

align-items:center;

gap:15px;

}

.search-bar input{

width:100%;

height:70px;

border-radius:35px;

padding:0 30px;

font-size:18px;

}

/* =========================
   HOMEPAGE LAYOUT
========================= */

.search-wrapper{
    position:relative;
    width:100%;
    max-width:700px;
    margin:20px auto;
}

.search-wrapper input{
    width:100%;
    height:60px;
    border:none;
    border-radius:30px;
    padding:0 70px 0 20px;
    font-size:18px;
    background:#fff;
}

.search-icon-btn{
    position:absolute;
    right:0;
    top:0;
    width:60px;
    height:60px;
    border:none;
    border-radius:30px;
    background:#e60000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
}
.search-icon-btn:hover{
    background:#c40000;
}

.auth-box{

position:absolute;

top:75%;

left:48%;

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

width:420px;

max-width:90%;

padding:30px;

border-radius:25px;

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

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

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

text-align:center;

z-index:100;

}

.auth-box h2{

color:white;

margin-bottom:20px;

text-shadow:
0 2px 10px rgba(0,0,0,.35);

}

.auth-box .btn{

display:block;

width:100%;

margin-bottom:15px;

}

.auth-box p{

color:white;

font-size:14px;

margin-bottom:20px;

word-break:break-word;

}

/* =========================
   TABLES
========================= */

table{

width:100%;

border-collapse:collapse;

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

border-radius:15px;

overflow:hidden;

}

th,
td{

padding:15px;

text-align:left;

}

th{
background:#f0f0f0;
}

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

.list-item{

background:white;

padding:20px;

border-radius:15px;

margin-bottom:15px;

cursor:pointer;

transition:.25s;

}

.list-item:hover{
transform:translateY(-2px);
}

.marketplace-grid{

display:grid;

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

gap:20px;

}

.countries-grid{

display:grid;

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

gap:20px;

}

/* =========================
   MOBILE
========================= */
@media (max-width:768px){

html,body{
background-image:url('../hero-bg-mobile.webp') !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
background-attachment:scroll !important;
min-height:100vh;
overflow-x:hidden;
}

body::before{display:none !important;}

.logo img{height:60px;}
.menu{font-size:32px;top:18px;left:18px;}

.page-container{
margin-top:0;
padding:100px 15px 20px;
align-items:flex-start;
background:transparent !important;
}

.card{
padding:20px;
background:rgba(255,255,255,.95) !important;
}

.search-bar input{height:60px;font-size:16px;}
.search-bar button{width:100%;height:55px;}

.side-menu{width:260px;}

.marketplace-grid,
.countries-grid{
grid-template-columns:1fr;
}

.search-wrapper{
top:180px;
left:50%;
width:92%;
}

.auth-box{
top:470px;
left:50%;
width:92%;
transform:translateX(-50%);
}

/* prevent duplicated header background */
header,
.mobile-header,
.page-header,
.hero,
.hero-section{
background:none !important;
background-image:none !important;
}
}
/* ===== MOBILE REBUILD FIX ===== */
@media (max-width:768px){

body{
background-attachment:scroll!important;
}

.logo{
top:12px!important;
}
.logo img{
height:60px!important;
}

.menu{
top:14px!important;
left:16px!important;
font-size:30px!important;
color:#222!important;
text-shadow:none!important;
}

.page-container{
padding:80px 14px 20px!important;
align-items:flex-start!important;
}

.card{
padding:20px!important;
border-radius:22px!important;
margin:0!important;
}

.card h1{
color:#111!important;
text-shadow:none!important;
font-size:32px!important;
margin-bottom:20px!important;
}

.auth-box{
position:relative!important;
top:auto!important;
left:auto!important;
transform:none!important;
width:92%!important;
margin:360px auto 30px auto!important;
padding:22px!important;
}

.search-wrapper{
top:140px!important;
width:92%!important;
}

.search-bar{
display:flex!important;
flex-direction:column!important;
gap:12px!important;
}

.search-bar input,
.search-bar button{
width:100%!important;
height:56px!important;
}

.list-item{
margin-bottom:18px!important;
}

.marketplace-grid,
.country-grid{
grid-template-columns:1fr!important;
}

}


/* FORCE BACKGROUND ON ALL MOBILE PAGES */
@media (max-width:768px){

html,body{
background-image:url('../hero-bg-mobile.webp') !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
background-color:#e9edf2 !important;
min-height:100vh !important;
}

body::before{
display:none !important;
}

.page-container{
background:transparent !important;
padding-top:400px !important;
}

.card{
background:rgba(255,255,255,0.55) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
margin:0 auto !important;
}

.card[style]{
margin:0 !important;
}

}




/* ===== CLEAN SEARCH SYSTEM ===== */

@media (min-width:769px){

.search-wrapper{
position:absolute !important;
top:44% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
width:580px !important;
max-width:580px !important;
z-index:200 !important;
}

.search-wrapper input{
height:64px !important;
border-radius:32px !important;
padding:0 78px 0 24px !important;
font-size:18px !important;
box-shadow:0 8px 25px rgba(0,0,0,.15) !important;
}

.search-icon-btn{
position:absolute !important;
top:8px !important;
right:8px !important;
width:48px !important;
height:48px !important;
border:none !important;
border-radius:24px !important;
background:#e00000 !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
transition:.25s !important;
}

.search-icon-btn:hover{
background:#ff1a1a !important;
transform:scale(1.06) !important;
}

.auth-box{
top:76% !important;
}
}

@media (max-width:768px){

.search-wrapper{
position:relative !important;
top:auto !important;
left:auto !important;
transform:none !important;
width:calc(100vw - 32px) !important;
max-width:none !important;
margin:120px auto 20px auto !important;
}

.search-wrapper input{
height:58px !important;
border-radius:29px !important;
padding:0 70px 0 18px !important;
}

.search-icon-btn{
position:absolute !important;
top:7px !important;
right:7px !important;
width:44px !important;
height:44px !important;
border-radius:22px !important;
}

.auth-box{
position:relative !important;
top:auto !important;
left:auto !important;
transform:none !important;
width:92% !important;
margin:220px auto 20px auto !important;
}
}