/* =========================
YEDOY PREMIUM UI
========================= */

:root{
--bg:#0B0B0B;
--card:#171717;
--card2:#1E1E1E;
--yellow:#FFB800;
--yellow2:#FFD54A;
--white:#FFFFFF;
--text:#666;
--muted:#A0A0A0;
--border:rgba(255,255,255,.08);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
padding-bottom:95px;
}

a{
text-decoration:none;
color:inherit;
}



/* =========================
referral invited
========================= */
.invite-page{
padding:16px;
}

.invite-card{
background:#fff;
border-radius:20px;
padding:24px;
text-align:center;
margin-bottom:16px;
}

.invite-icon{
font-size:54px;
margin-bottom:12px;
}

.referral-card{
background:#fff;
border-radius:18px;
padding:16px;
margin-bottom:14px;
}

.ref-label{
font-size:13px;
color:#777;
margin-bottom:8px;
}

.ref-code,
.ref-link{
background:#f5f7fa;
padding:14px;
border-radius:14px;
font-weight:700;
cursor:pointer;
word-break:break-all;
}

.invite-info{
background:#fff;
border-radius:18px;
padding:18px;
margin-bottom:16px;
}

.invite-step{
padding:10px 0;
border-bottom:1px solid #eee;
}

.invite-step:last-child{
border:none;
}

.share-btn{
width:100%;
height:52px;
border:none;
border-radius:16px;
background:#009E8E;
color:#fff;
font-weight:700;
font-size:16px;
}

/* =========================
coin history
========================= */


.history-page{
    padding:16px;
}

.history-page h1{
    font-size:24px;
    margin-bottom:20px;
}

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

.history-card{
    background:#fff;
    border-radius:18px;
    padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.history-title{
    font-weight:600;
    color:#666;
}

.history-date{
    font-size:12px;
    color:#888;
    margin-top:4px;
}

.coin-plus{
    color:#22c55e;
    font-weight:700;
    font-size:18px;
}

.coin-minus{
    color:#ef4444;
    font-weight:700;
    font-size:18px;
}

/* =========================
restaurants
========================= */
.restaurant-detail-card{
background:#fff;
border-radius:28px;
padding:22px;
margin-bottom:18px;
}

.restaurant-detail-top{
display:flex;
align-items:center;
gap:16px;
margin-bottom:16px;
}

.restaurant-detail-logo{
width:90px;
height:90px;
border-radius:20px;
object-fit:cover;
}

.restaurant-detail-card h1{
font-size:28px;
font-weight:700;
margin:0;
color:#666;
}

.restaurant-city,
.restaurant-address,
.restaurant-phone,
.restaurant-hours{
margin-top:8px;
color:#666;
font-size:15px;
}

.promo-date{
margin-top:12px;
font-size:13px;
color:#999;
}

.restaurant-list{
display:flex;
flex-direction:column;
gap:14px;
}

.restaurant-card{
display:block;
background:#fff;
border-radius:22px;
padding:16px;
box-shadow:0 6px 20px rgba(0,0,0,.05);
text-decoration:none;
color:#111;
}

.restaurant-card-top{
display:flex;
justify-content:space-between;
align-items:center;
}

.restaurant-left{
display:flex;
gap:12px;
align-items:center;
}

.restaurant-logo{
width:60px;
height:60px;
border-radius:16px;
object-fit:cover;
background:#f5f5f5;
}

.restaurant-name{
font-size:17px;
font-weight:700;
}

.restaurant-promos{
font-size:13px;
color:#009E8E;
margin-top:4px;
font-weight:600;
}

.restaurant-address,
.restaurant-hours,
.restaurant-type{
margin-top:10px;
font-size:14px;
color:#666;
}

.featured-badge{
background:#FFF7E6;
color:#FF9500;
padding:4px 8px;
border-radius:999px;
font-size:11px;
margin-left:6px;
}

.fav-icon{
font-size:20px;
color:#999;
}

.restaurant-about{
margin-top:14px;
color:#666;
line-height:1.6;
}

.restaurant-info-list{
margin-top:16px;
display:flex;
flex-direction:column;
gap:9px;
color:#666;
font-size:14px;
}

.restaurant-info-list a{
color:#FFB800;
font-weight:700;
}

.cuisine-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}

.cuisine-tags span{
background:#242424;
color:#FFB800;
padding:8px 12px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

.detail-section-title{
margin-top:20px;
font-weight:900;
color:#666;
font-size:17px;
}

.working-list{
margin-top:10px;
background:#111;
border-radius:18px;
padding:12px;
}

.working-row{
display:flex;
justify-content:space-between;
padding:9px 4px;
font-size:14px;
border-bottom:1px solid rgba(255,255,255,.06);
}

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

.working-row span{
color:#aaa;
}

.working-row b{
color:#fff;
}

.gallery-open-btn{
width:100%;
margin-top:18px;
height:52px;
border:none;
border-radius:16px;
background:#FFB800;
color:#000;
font-weight:900;
font-size:15px;
}

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

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

.gallery-box{
width:100%;
max-width:520px;
background:#171717;
border-radius:24px;
padding:18px;
position:relative;
}

.gallery-box h3{
margin:0 0 14px;
text-align:center;
}

.gallery-close{
position:absolute;
top:12px;
right:12px;
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#ff3b30;
color:#fff;
font-weight:900;
}

.gallery-view{
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:8px;
}

.gallery-view img{
width:280px;
height:220px;
object-fit:cover;
border-radius:18px;
flex:0 0 auto;
scroll-snap-align:center;
}

/* =========================
copy code
========================= */



.copy-code{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:#F8FAFC;
    border:2px dashed #009E8E;

    border-radius:16px;

    padding:16px;

    font-size:22px;
    font-weight:800;
    letter-spacing:2px;

    color:#009E8E;

    cursor:pointer;

    transition:.2s;
}

.copy-code:hover{
    transform:scale(1.02);
}

.copy-code i{
    font-size:18px;
}


/* =========================
error coin
========================= */




.coin-error{
background:#3b1414;
color:#ff8f8f;
border:1px solid #ff4d4d;
padding:14px;
border-radius:14px;
margin-bottom:16px;
font-weight:600;
text-align:center;
}

/* =========================
statistika promom 
========================= */



.wallet-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
padding:20px;
}

.wallet-item{
background:#171717;
padding:18px;
border-radius:20px;
text-align:center;
}

.wallet-number{
font-size:24px;
font-weight:900;
color:#FFB800;
}


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



.drawer{
position:fixed;
top:0;
left:-300px;
width:280px;
height:100%;
background:#111;
z-index:2000;
transition:.25s;
padding-top:20px;
border-right:1px solid rgba(255,255,255,.08);
}

.drawer.open{
left:0;
}

.drawer{
    display:flex;
    flex-direction:column;
}

.drawer-header{
    flex-shrink:0;
}

.drawer-menu{
    flex:1;
    overflow-y:auto;
    padding-bottom:80px;
}
.drawer-menu{
    max-height: calc(100vh - 180px);
}

.drawer-menu::-webkit-scrollbar{
    width:4px;
}

.drawer-menu::-webkit-scrollbar-thumb{
    background:#dcdcdc;
    border-radius:10px;
}

.drawer-header{
padding:20px;
text-align:center;
border-bottom:1px solid rgba(255,255,255,.08);
}

.drawer-header img{
width:140px;
}

.drawer a{
display:flex;
align-items:center;
gap:14px;
padding:18px 22px;
color:#fff;
font-weight:600;
border-bottom:1px solid rgba(255,255,255,.05);
}

.drawer a i{
color:#FFB800;
width:20px;
}

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
opacity:0;
visibility:hidden;
transition:.25s;
z-index:1999;
}

.overlay.show{
opacity:1;
visibility:visible;
}



.topbar{
height:68px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
background:#111;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:999;
}

.icon-btn{
width:42px;
height:42px;
border:none;
background:#1A1A1A;
color:#fff;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}

.logo{
height:120px;
width:auto;
}




/* my codes */

.page-title{
padding:20px;
text-align:center;
}

.page-title h1{
margin:0;
font-size:30px;
}

.page-title p{
color:#9CA3AF;
}

.empty-codes{
padding:50px 20px;
text-align:center;
}

.empty-icon{
font-size:70px;
margin-bottom:10px;
}

.go-home-btn{
display:inline-block;
background:#FFB800;
color:#000;
padding:14px 24px;
border-radius:16px;
font-weight:800;
}

.my-codes-list{
padding:20px;
}

.my-code-card{
background:#171717;
border-radius:24px;
padding:18px;
margin-bottom:16px;
}

.code-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
}

.restaurant-row{
display:flex;
align-items:center;
gap:12px;
}

.restaurant-logo{
width:52px;
height:52px;
border-radius:14px;
object-fit:cover;
}

.restaurant{
color:#FFB800;
font-weight:700;
}

.promo-name{
margin-top:4px;
font-size:15px;
color:#fff;
}

.status{
font-size:12px;
padding:8px 12px;
border-radius:999px;
background:#1f2937;
}

.my-code{
font-size:28px;
font-weight:900;
letter-spacing:3px;
text-align:center;
padding:18px;
border:2px dashed #FFB800;
border-radius:18px;
margin-bottom:14px;
}

.my-code-footer{
display:flex;
justify-content:space-between;
color:#9CA3AF;
margin-bottom:14px;
}

.view-code-btn{
display:block;
background:#FFB800;
color:#000;
text-align:center;
padding:14px;
border-radius:16px;
font-weight:900;
}

.status.active{
background:#0f5132;
color:#4ade80;
}

.status.used{
background:#1f2937;
color:#d1d5db;
}

.status.expired{
background:#4c0519;
color:#fb7185;
}


/* login sistemi. */


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

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

.auth-box{
width:100%;
max-width:380px;
background:#171717;
border-radius:28px;
padding:26px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.auth-logo{
text-align:center;
margin-bottom:20px;
}

.auth-logo img{
height:70px;
}

.auth-box h3{
margin:0;
text-align:center;
font-size:24px;
font-weight:800;
color:#fff;
}

.auth-text{
text-align:center;
color:#9ca3af;
font-size:14px;
margin:10px 0 20px;
line-height:1.5;
}

.auth-box input{
width:100%;
height:54px;
border:none;
border-radius:16px;
background:#242424;
color:#fff;
font-size:16px;
padding:0 16px;
margin-bottom:14px;
outline:none;
}

.auth-box input:focus{
box-shadow:0 0 0 2px #FFB800;
}

.auth-btn{
width:100%;
height:54px;
border:none;
border-radius:16px;
background:#FFB800;
color:#000;
font-size:16px;
font-weight:800;
cursor:pointer;
transition:.2s;
}

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

.auth-btn:disabled{
opacity:.6;
cursor:not-allowed;
}

#otpPhone{
color:#FFB800;
font-weight:700;
}

/* =========================
promo kod alma kodu
========================= */


.promo-status{
display:inline-block;
padding:10px 18px;
border-radius:999px;
font-weight:700;
margin-bottom:16px;
}

.promo-status.active{
background:#052e16;
color:#4ade80;
}

.promo-status.used{
background:#1f2937;
color:#d1d5db;
}

.promo-status.expired{
background:#450a0a;
color:#f87171;
}

.promo-status.not_started{
background:#78350f;
color:#fbbf24;
}

.promo-dates{
background:#171717;
border-radius:18px;
padding:16px;
margin-top:20px;
text-align:left;
}

.date-item{
padding:8px 0;
color:#d1d5db;
}

.promo-success-card{
padding:24px;
text-align:center;
}

.success-icon{
width:90px;
height:90px;
margin:0 auto 18px;
border-radius:50%;
background:#22c55e;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
font-weight:900;
color:#fff;
}

.promo-success-card h1{
font-size:30px;
margin:0 0 10px;
}

.restaurant-title{
color:#FFB800;
font-weight:700;
margin-bottom:8px;
}

.promo-name{
color:#9CA3AF;
margin-bottom:20px;
}

.promo-code-box{
background:#171717;
border:2px dashed #FFB800;
border-radius:22px;
padding:22px;
font-size:32px;
font-weight:900;
letter-spacing:4px;
margin-bottom:20px;
}

.promo-qr{
width:240px;
height:240px;
background:#fff;
padding:12px;
border-radius:24px;
margin-bottom:20px;
}

.promo-info{
background:#171717;
border-radius:22px;
padding:18px;
text-align:left;
margin-bottom:20px;
}

.info-row{
padding:8px 0;
}

.promo-note{
color:#9CA3AF;
line-height:1.6;
margin-bottom:20px;
}

.my-codes-btn{
display:block;
background:#FFB800;
color:#000;
padding:18px;
border-radius:18px;
font-weight:900;
}

.promo-dates{
margin-top:12px;
font-size:13px;
color:#9CA3AF;
line-height:1.8;
}

.expires{
margin-top:10px;
font-weight:700;
color:#FFB800;
}


/* =========================
promo kod yoxla
========================= */


.claim-page{
padding:20px;
}

.promo-detail-card{
background:#171717;
border-radius:28px;
padding:24px;
text-align:center;
margin-bottom:18px;
}

.promo-restaurant{
color:#FFB800;
font-weight:700;
margin-bottom:12px;
}

.promo-detail-card h1{
font-size:28px;
font-weight:900;
margin:0;
}

.promo-discount-circle{
width:120px;
height:120px;
border-radius:50%;
background:#FFB800;
color:#000;
font-size:34px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
margin:20px auto;
}

.promo-description{
color:#9CA3AF;
line-height:1.6;
}

.coin-box{
background:#171717;
border-radius:22px;
padding:20px;
text-align:center;
margin-bottom:18px;
}

.coin-balance{
font-size:22px;
font-weight:800;
}

.coin-price{
margin-top:10px;
color:#9CA3AF;
}

.unlock-btn{
width:100%;
height:58px;
border:none;
border-radius:18px;
background:#FFB800;
color:#000;
font-size:17px;
font-weight:900;
cursor:pointer;
}

.earn-coins-box{
margin-top:24px;
}

.earn-coins-box h3{
text-align:center;
margin-bottom:12px;
}

.earn-item{
display:flex;
justify-content:space-between;
align-items:center;
background:#171717;
padding:18px;
border-radius:18px;
margin-bottom:12px;
}

.buy-coins-btn{
display:block;
background:#FFB800;
color:#000;
padding:18px;
border-radius:18px;
text-align:center;
font-weight:900;
margin-top:12px;
}


/* =========================
Profile
========================= */
 .profile-page{
padding:20px;
}

.profile-card{
background:#171717;
border-radius:26px;
padding:24px;
text-align:center;
margin-bottom:18px;
}

.profile-avatar{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:#222;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#FFB800;
}

.profile-phone{
font-size:20px;
font-weight:800;
margin-top:15px;
}

.profile-id{
color:#999;
margin-top:5px;
}

.balance-card{
background:#FFB800;
color:#000;
border-radius:24px;
padding:22px;
margin-bottom:18px;
text-align:center;
}

.balance-title{
font-size:15px;
font-weight:600;
}

.balance-value{
font-size:34px;
font-weight:900;
margin-top:8px;
}

.stats-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:18px;
}

.stat-card{
background:#171717;
border-radius:20px;
padding:18px;
text-align:center;
}

.stat-number{
font-size:22px;
font-weight:800;
}

.stat-label{
font-size:13px;
color:#999;
margin-top:5px;
}

.profile-menu{
display:flex;
flex-direction:column;
gap:12px;
}

.profile-menu a{
background:#171717;
padding:16px;
border-radius:18px;
display:flex;
align-items:center;
gap:14px;
font-weight:600;
}

.profile-menu i{
color:#FFB800;
width:22px;
}

.logout-link{
background:#3A1111 !important;
color:#ff6b6b;
}

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

.hero{
text-align:center;
padding:30px 20px;
}

.hero-logo{
width:220px;
max-width:90%;
margin-bottom:20px;
}

.hero h1{
font-size:44px;
font-weight:900;
line-height:1.1;
}

.hero h1 span{
color:var(--yellow);
}

.hero p{
margin-top:16px;
color:var(--muted);
font-size:16px;
line-height:1.6;
}

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

.search-box{
height:58px;
margin:0 20px 24px;
background:#181818;
border:1px solid var(--border);
border-radius:18px;
display:flex;
align-items:center;
padding:0 16px;
}

.search-box i{
color:var(--yellow);
}

.search-box input{
flex:1;
border:none;
background:none;
outline:none;
color:#fff;
margin-left:12px;
font-size:15px;
}

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

/* =========================
CATEGORY
========================= */

.categories{
display:flex;
overflow-x:auto;
gap:12px;
padding:0 20px;
margin-bottom:28px;
}

.categories::-webkit-scrollbar{
display:none;
}

.cat{
min-width:95px;
height:90px;
background:#181818;
border:1px solid var(--border);
border-radius:22px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
font-size:14px;
}

.cat:hover{
border-color:var(--yellow);
}

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

.section-title{
font-size:24px;
font-weight:800;
padding:0 20px;
margin-bottom:18px;
}

/* =========================
PROMO CARD
========================= */

.promo-list{
padding:0 20px;
}

.promo-card{
background:var(--card);
border:1px solid var(--border);
border-radius:28px;
padding:18px;
margin-bottom:18px;
}

.promo-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.restaurant-name{
font-size:18px;
font-weight:700;
}

.promo-city{
color:#9f9f9f;
margin-top:4px;
}

.discount-badge{
background:var(--yellow);
color:#000;
font-weight:900;
padding:10px 16px;
border-radius:14px;
}

.promo-title{
font-size:22px;
font-weight:800;
margin-top:18px;
}

.promo-desc{
color:#b5b5b5;
margin-top:8px;
line-height:1.5;
}

.claim-btn{
margin-top:18px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:var(--yellow);
color:#000;
font-weight:800;
}

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

.footer{

    margin-top:40px;
    padding:30px 20px 100px;

    background:var(--bg);

    border-top:1px solid #ececec;

    text-align:center;
}

.footer-logo img{

    height:42px;
    margin-bottom:10px;
}

.footer-text{

    font-size:14px;
    color:#666;

    margin-bottom:16px;
}

.footer-contact{

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;

    margin-bottom:16px;
}

.footer-contact a{

    color:#009E8E;

    text-decoration:none;

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

.footer-contact i{

    margin-right:6px;
}

.footer-copy{

    color:#999;
    font-size:12px;
}

/* =========================
BOTTOM NAV
========================= */

.bottom-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:74px;
background:#111;
border-top:1px solid var(--border);
display:flex;
justify-content:space-around;
align-items:center;
z-index:999;
}

.bottom-nav a{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
color:#8e8e8e;
font-size:12px;
}

.bottom-nav a i{
font-size:20px;
}

.bottom-nav .active{
color:var(--yellow);
}

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

@media(max-width:700px){

.hero{
padding:24px 18px;
}

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

.hero-logo{
width:180px;
}

.section-title{
font-size:22px;
}

.promo-title{
font-size:19px;
}

}