@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');


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


body{

background:#F8F7F2;

color:#0B1F44;

min-height:100vh;

overflow-x:hidden;

padding-bottom:40px;

}


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


.spins-header{

padding:40px 20px 25px;

text-align:center;

}


.casino-glow{

display:none;

}


.spins-header h1{

font-size:42px;

font-weight:900;

color:#0B1F44;

margin-bottom:12px;

letter-spacing:-1px;

}


.hero-subtitle{

font-size:17px;

color:#64748B;

line-height:1.7;

}



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


.spin-info{

max-width:850px;

margin:20px auto;

padding:28px;

background:white;

border-radius:30px;

border:1px solid #eee6c8;

box-shadow:

0 15px 40px rgba(11,31,68,.08);

color:#475569;

line-height:1.8;

}



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


.create-spin-btn,
.featured-spin-btn,
.create-spin-campaign-btn{


display:flex;

align-items:center;

justify-content:center;

margin:25px auto;

height:58px;

padding:0 35px;

width:fit-content;

border-radius:18px;

background:#0B1F44;

color:white;

text-decoration:none;

font-weight:800;

font-size:16px;

transition:.3s;

}



.create-spin-btn:hover,
.featured-spin-btn:hover,
.create-spin-campaign-btn:hover{

background:#D4AF37;

color:#0B1F44;

transform:translateY(-3px);

}



/* ==========================
SECTION TITLES
========================== */


.section-title{

font-size:28px;

font-weight:900;

color:#0B1F44;

margin:35px 20px 20px;

position:relative;

padding-bottom:12px;

}


.section-title::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:70px;

height:4px;

background:#D4AF37;

border-radius:20px;

}



/* ==========================
EMPTY + LOADING
========================== */


.empty-state,
.loading-card{


margin:20px;

padding:35px;

background:white;

border-radius:28px;

text-align:center;

border:1px solid #eee6c8;

box-shadow:

0 15px 35px rgba(11,31,68,.06);

}



.empty-state h3{

color:#0B1F44;

font-size:22px;

margin-top:15px;

}


.empty-state p{

color:#64748B;

margin-top:10px;

}



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


.winner-card{


margin:20px;

padding:22px;

background:white;

border-radius:26px;

border:1px solid #eee6c8;

box-shadow:

0 15px 35px rgba(11,31,68,.06);

}


.winner-card h3{

color:#D4AF37;

margin-bottom:10px;

}


.winner-card p{

color:#64748B;

line-height:1.7;

}



/* ==========================
SPIN CARDS
========================== */


.spin-card{


margin:20px;

padding:25px;

background:white;

border-radius:32px;

border:1px solid #eee6c8;

box-shadow:

0 18px 45px rgba(11,31,68,.08);

position:relative;

}



.spin-card::before{

display:none;

}



.spin-card h3{

font-size:25px;

font-weight:900;

color:#0B1F44;

margin-bottom:12px;

}



.spin-card p{

color:#64748B;

line-height:1.8;

}



/* ==========================
STATS
========================== */


.spin-stats{

display:flex;

gap:12px;

margin-top:20px;

}



.spin-stat{


flex:1;

background:#F8F7F2;

border-radius:18px;

padding:15px;

text-align:center;

border:1px solid #eee6c8;

font-weight:700;

color:#0B1F44;

}



/* ==========================
ENTER SPIN BUTTON
========================== */


.spin-btn{


display:flex;

align-items:center;

justify-content:center;

height:55px;

border-radius:18px;

background:#D4AF37;

color:#0B1F44;

font-weight:900;

text-decoration:none;

margin-top:20px;

}



/* ==========================
DELETE BUTTON
========================== */


.delete-spin-btn{


height:55px;

border-radius:18px;

background:#fee2e2;

color:#dc2626;

border:1px solid #fecaca;

font-weight:800;

}



/* ACTIONS */


.spin-actions{

display:flex;

gap:12px;

margin-top:20px;

}



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


.spin-modal{

background:rgba(11,31,68,.55);

backdrop-filter:blur(12px);

}



.spin-modal-content{


background:white;

border-radius:32px;

border:1px solid #eee6c8;

box-shadow:

0 20px 60px rgba(0,0,0,.15);

padding:30px;

}



.spin-modal-content h2{

color:#0B1F44;

}



.spin-modal-content input{


background:#F8F7F2;

border:1px solid #ddd;

color:#0B1F44;

}



/* SUBMIT */


#submitSpinCampaign{


background:#0B1F44;

color:white;

border-radius:18px;

}



#closeSpinCampaign{


background:#F1F5F9;

color:#0B1F44;

border-radius:18px;

}



/* MOBILE */


@media(max-width:700px){


.spins-header h1{

font-size:34px;

}


.spin-info{

padding:22px;

}


.spin-stats{

flex-direction:column;

}


.spin-actions{

flex-direction:column;

}


}
/* ==========================================
   NEXORA SPIN & WIN ADDITIONAL STYLES
========================================== */

/* Winner Card */

.winner-card{
display:flex;
align-items:flex-start;
gap:18px;
background:#ffffff;
border:1px solid #EEE6C8;
border-radius:26px;
padding:22px;
box-shadow:0 12px 35px rgba(11,31,68,.06);
margin:20px;
}

.winner-icon{
width:64px;
height:64px;
border-radius:18px;
background:#FFF8E1;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
flex-shrink:0;
}

.winner-details{
flex:1;
}

.winner-details strong{
display:block;
font-size:19px;
font-weight:800;
color:#0B1F44;
margin-bottom:6px;
}

.winner-details b{
color:#D4AF37;
font-weight:800;
}

.winner-details span{
display:block;
margin-top:8px;
font-size:14px;
color:#64748B;
}

/* Seller */

.seller-row{
display:flex;
align-items:center;
gap:14px;
margin:18px 0;
}

.seller-avatar{
width:54px;
height:54px;
border-radius:18px;
background:#0B1F44;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:800;
flex-shrink:0;
}

.seller-label{
font-size:12px;
color:#94A3B8;
margin-bottom:3px;
}

.seller-name{
font-size:16px;
font-weight:700;
color:#0B1F44;
}

/* Reward Badge */

.reward-pill{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:999px;
background:#FFF8E1;
border:1px solid #F4D36A;
color:#8A6500;
font-size:14px;
font-weight:700;
margin-top:12px;
}

/* Campaign Title */

.spin-title{
font-size:28px;
font-weight:900;
color:#0B1F44;
line-height:1.3;
margin-bottom:18px;
}

/* Modal */

.spin-modal{
display:none;
position:fixed;
inset:0;
background:rgba(11,31,68,.55);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
padding:20px;
overflow-y:auto;
z-index:99999;
}

.spin-modal-content{
max-width:560px;
margin:40px auto;
background:#ffffff;
border-radius:30px;
padding:30px;
border:1px solid #EEE6C8;
box-shadow:0 25px 70px rgba(0,0,0,.18);
}

.spin-modal-content h2{
font-size:30px;
font-weight:900;
color:#0B1F44;
margin-bottom:25px;
text-align:center;
}

.spin-modal-content input{
width:100%;
height:58px;
padding:0 18px;
margin-bottom:15px;
background:#F8F7F2;
border:1px solid #E5E7EB;
border-radius:16px;
font-size:15px;
color:#0B1F44;
outline:none;
transition:.3s;
}

.spin-modal-content input::placeholder{
color:#94A3B8;
}

.spin-modal-content input:focus{
border-color:#D4AF37;
box-shadow:0 0 0 4px rgba(212,175,55,.15);
}

/* Modal Buttons */

.modal-actions{
display:flex;
gap:12px;
margin-top:18px;
}

#submitSpinCampaign{
flex:1;
height:56px;
border:none;
border-radius:18px;
background:#0B1F44;
color:#ffffff;
font-size:16px;
font-weight:800;
cursor:pointer;
transition:.3s;
}

#submitSpinCampaign:hover{
background:#D4AF37;
color:#0B1F44;
}

#closeSpinCampaign{
flex:1;
height:56px;
border:none;
border-radius:18px;
background:#F1F5F9;
color:#0B1F44;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

#closeSpinCampaign:hover{
background:#E2E8F0;
}

/* Empty State */

.empty-state{
background:#ffffff;
border:1px solid #EEE6C8;
border-radius:28px;
padding:40px 25px;
text-align:center;
box-shadow:0 12px 35px rgba(11,31,68,.06);
margin:20px;
}

.empty-icon{
width:90px;
height:90px;
margin:0 auto 20px;
border-radius:24px;
background:#FFF8E1;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
}

.empty-state h3{
font-size:24px;
font-weight:800;
color:#0B1F44;
margin-bottom:10px;
}

.empty-state p{
font-size:15px;
line-height:1.8;
color:#64748B;
}

/* Loading */

.loading-card{
background:#ffffff;
border:1px solid #EEE6C8;
border-radius:24px;
padding:30px;
text-align:center;
font-weight:700;
color:#64748B;
box-shadow:0 12px 35px rgba(11,31,68,.06);
margin:20px;
}

/* Buttons */

.spin-btn,
.create-spin-btn,
.featured-spin-btn,
.create-spin-campaign-btn{
transition:.3s;
}

.spin-btn:hover,
.create-spin-btn:hover,
.featured-spin-btn:hover,
.create-spin-campaign-btn:hover{
transform:translateY(-2px);
}

.delete-spin-btn{
transition:.3s;
}

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

/* Mobile */

@media(max-width:600px){

.winner-card{
flex-direction:column;
}

.seller-row{
align-items:flex-start;
}

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

.spin-modal-content{
padding:22px;
}

.spin-modal-content h2{
font-size:25px;
}

}
/* ==========================================
   BACK TO MARKETPLACE BUTTON
========================================== */

.back-home,
.back-marketplace{

display:flex;
align-items:center;
justify-content:center;
gap:12px;

width:calc(100% - 40px);
max-width:650px;

margin:35px auto;

padding:18px 24px;

background:#0B1F44;

color:#ffffff;

text-decoration:none;

font-size:17px;
font-weight:800;

border-radius:22px;

border:2px solid #D4AF37;

box-shadow:
0 12px 35px rgba(11,31,68,.15);

transition:.3s;
}

.back-home:hover,
.back-marketplace:hover{

background:#D4AF37;
color:#0B1F44;

transform:translateY(-2px);

box-shadow:
0 18px 45px rgba(212,175,55,.30);

}

.back-home i,
.back-marketplace i{

font-size:18px;

color:inherit;

}
/* ==========================================
   NEXORA CREATE CAMPAIGN MODAL
========================================== */

.spin-modal{

display:none;
position:fixed;
inset:0;

background:rgba(11,31,68,.55);

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

padding:20px;

z-index:99999;

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

}

.spin-modal-content{

width:100%;
max-width:560px;
max-height:90vh;

display:flex;
flex-direction:column;

background:#ffffff;

border-radius:32px;

overflow:hidden;

border:1px solid rgba(212,175,55,.25);

box-shadow:
0 30px 80px rgba(11,31,68,.18);

}

/* HEADER */

.spin-modal-header{

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

padding:28px;

background:#ffffff;

border-bottom:1px solid #ececec;

}

.spin-modal-header h2{

font-size:32px;
font-weight:800;
line-height:1.2;

color:#0B1F44;

margin-bottom:12px;

}

.spin-modal-header p{

font-size:15px;
line-height:1.8;

color:#64748b;

max-width:380px;

}

.modal-close-btn{

width:48px;
height:48px;

border:none;

border-radius:50%;

background:#f5f5f5;

color:#0B1F44;

font-size:20px;

cursor:pointer;

transition:.3s;

}

.modal-close-btn:hover{

background:#D4AF37;

color:white;

}

/* FORM */

.spin-form{

flex:1;

overflow-y:auto;

padding:28px;

}

.form-section{

margin-bottom:30px;

}

.form-section h3{

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

color:#0B1F44;

margin-bottom:8px;

}

.section-description{

font-size:14px;

color:#64748b;

margin-bottom:18px;

line-height:1.6;

}

.spin-form input{

width:100%;

height:58px;

margin-bottom:14px;

padding:0 20px;

border:1px solid #e4e4e7;

border-radius:18px;

background:#fafafa;

font-size:15px;

color:#0B1F44;

outline:none;

transition:.3s;

}

.spin-form input::placeholder{

color:#94a3b8;

}

.spin-form input:focus{

border-color:#D4AF37;

background:white;

box-shadow:
0 0 0 4px rgba(212,175,55,.15);

}

/* FOOTER */

.spin-modal-actions{

display:flex;

gap:14px;

padding:22px 28px;

background:white;

border-top:1px solid #ececec;

}

#submitSpinCampaign{

flex:1;

height:58px;

border:none;

border-radius:18px;

background:#0B1F44;

color:white;

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

cursor:pointer;

transition:.3s;

}

#submitSpinCampaign:hover{

background:#102c62;

transform:translateY(-2px);

}

.secondary-btn{

width:150px;
height:58px;

border:2px solid #D4AF37;

background:white;

color:#0B1F44;

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

border-radius:18px;

cursor:pointer;

transition:.3s;

}

.secondary-btn:hover{

background:#D4AF37;

color:white;

}

/* SCROLLBAR */

.spin-form::-webkit-scrollbar{

width:8px;

}

.spin-form::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:20px;

}

/* MOBILE */

@media(max-width:600px){

.spin-modal{

padding:14px;

}

.spin-modal-content{

max-height:95vh;

border-radius:26px;

}

.spin-modal-header{

padding:22px;

}

.spin-modal-header h2{

font-size:26px;

}

.spin-form{

padding:22px;

}

.spin-modal-actions{

flex-direction:column;

padding:20px;

}

.secondary-btn{

width:100%;

}

}
/* ==========================================
   MODAL ACTION BUTTONS
========================================== */

.spin-modal-actions{

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

padding:24px 30px 30px;

background:#fff;

border-top:1px solid #ececec;

}

/* Launch Campaign */

#submitSpinCampaign{

width:100%;
height:62px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
#0B1F44,
#16346F
);

color:#D4AF37;

font-size:18px;
font-weight:800;
letter-spacing:.4px;

cursor:pointer;

box-shadow:
0 12px 30px rgba(11,31,68,.25);

transition:.3s;

}

#submitSpinCampaign:hover{

transform:translateY(-3px);

box-shadow:
0 20px 40px rgba(11,31,68,.35);

background:linear-gradient(
135deg,
#16346F,
#214A93
);

}

/* Cancel */

.secondary-btn{

width:100%;
height:58px;

border:2px solid #D4AF37;

border-radius:18px;

background:#FFFDF5;

color:#D4AF37;

font-size:17px;
font-weight:800;

cursor:pointer;

transition:.3s;

box-shadow:
0 8px 20px rgba(212,175,55,.12);

}

.secondary-btn:hover{

background:#D4AF37;

color:#0B1F44;

transform:translateY(-2px);

box-shadow:
0 14px 30px rgba(212,175,55,.25);

}

#submitSpinCampaign i,
.secondary-btn i{

margin-right:8px;

}
.load-more-btn{

display:block;

margin:25px auto;

padding:16px 32px;

border:none;

border-radius:18px;

background:#0B1F44;

color:#D4AF37;

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

cursor:pointer;

transition:.3s;

box-shadow:
0 10px 30px rgba(11,31,68,.18);

}

.load-more-btn:hover{

transform:translateY(-2px);

background:#16346F;

}

.load-more-btn:disabled{

opacity:.5;

cursor:not-allowed;

}
/* ==========================================
   VIEW MORE WINNERS BUTTON
========================================== */

.load-more-btn{

display:block;

width:260px;

margin:25px auto 10px;

padding:16px 24px;

border:none;

border-radius:999px;

background:linear-gradient(
135deg,
#162a5c,
#0f1d46
);

color:#FFD54A;

font-size:15px;

font-weight:800;

letter-spacing:.3px;

cursor:pointer;

box-shadow:
0 12px 30px rgba(15,29,70,.25);

transition:.3s;

}

.load-more-btn:hover{

transform:translateY(-2px);

background:linear-gradient(
135deg,
#1c3470,
#132657
);

box-shadow:
0 18px 35px rgba(15,29,70,.35);

}

.load-more-btn:active{

transform:scale(.98);

}
.spins-header{
    padding:70px 24px 45px;
    text-align:center;
}

.hero-badge{
    display:inline-block;
    padding:10px 20px;
    margin-bottom:24px;
    border-radius:999px;
    background:rgba(212,175,55,.12);
    border:1px solid rgba(212,175,55,.35);
    color:#d4af37;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero-title{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    line-height:1;
}

.hero-title span:first-child{
    font-size:58px;
}

.hero-title span:nth-child(2){
    font-size:52px;
    font-weight:900;
    color:#12285c;
    letter-spacing:-2px;
}

.hero-title span:nth-child(3){
    font-size:52px;
    font-weight:900;
    color:#12285c;
    letter-spacing:-2px;
}

.hero-subtitle{
    margin:28px auto 35px;
    max-width:520px;
    font-size:22px;
    line-height:1.7;
    color:#6b7280;
}

@media(max-width:768px){

.hero-title span:first-child{
    font-size:46px;
}

.hero-title span:nth-child(2),
.hero-title span:nth-child(3){
    font-size:42px;
}

.hero-subtitle{
    font-size:18px;
}

}