/* =========================
BACKGROUND (UPGRADED)
========================= */

body{
background:
radial-gradient(circle at 20% 20%, rgba(59,130,246,0.25), transparent 45%),
radial-gradient(circle at 80% 0%, rgba(37,99,235,0.35), transparent 50%),
radial-gradient(circle at 50% 100%, rgba(14,165,233,0.15), transparent 60%),
#020617;
}

/* =========================
WRAPPER
========================= */

.wrapper{
max-width:1200px;
margin:auto;
padding:120px 20px 80px;
}

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

.hero-buttons{
margin-top:30px;
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

.btn{
padding:12px 24px;
border-radius:10px;
font-size:14px;
text-decoration:none;
transition:.25s;
cursor:pointer;
border:none;
}

/* 🔥 BUTTON UPGRADE */
.btn-primary{
background:linear-gradient(90deg,#2563eb,#3b82f6);
color:white;
box-shadow:0 6px 20px rgba(37,99,235,0.4);
}

.btn-primary:hover{
background:linear-gradient(90deg,#1d4ed8,#2563eb);
}

.btn-outline{
border:1px solid #334155;
color:#94a3b8;
}

.btn-outline:hover{
border-color:#2563eb;
color:white;
}

/* =========================
CARD EFFECT (UPGRADED)
========================= */

.card{
position:relative;
overflow:visible;
z-index:1;

/* 🔥 NEW PREMIUM LOOK */
background:linear-gradient(180deg,#1e293b,#0f172a);
border:1px solid rgba(148,163,184,0.15);
box-shadow:
0 10px 30px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.03) inset;
}

.card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:
radial-gradient(
circle 200px at var(--x) var(--y),
rgba(37,99,235,.15),
transparent 40%
);
opacity:0;
transition:.25s;
}

.card:hover::before{
opacity:1;
}

/* =========================
NAV SHADOW
========================= */

.nav{
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* =========================
HERO TEXT (ENHANCED)
========================= */

.hero h1{
background:linear-gradient(90deg,#ffffff,#94a3b8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* 🔥 TEXT CLARITY */
h1, h2{
letter-spacing:0.3px;
text-shadow:0 2px 10px rgba(0,0,0,0.5);
}

/* =========================
REGISTRATION FORM (FINAL)
========================= */

#registration .card{
max-width:520px;
margin:auto;
padding:20px;
border-radius:16px;
}

/* STACK */
#registration .form-group{
display:flex;
flex-direction:column;
gap:14px;
}

/* 🔥 FIELD UPGRADE */
#registration .field{
padding:4px;
border-radius:12px;
background:linear-gradient(180deg,#1e293b,#020617);
border:1px solid rgba(148,163,184,0.3);
box-shadow:
0 0 0 1px rgba(255,255,255,0.03) inset,
0 4px 12px rgba(0,0,0,0.4);
}

/* INPUT + SELECT */
#registration input,
#registration select{
width:100%;
height:40px;
padding:0 12px;
border:none;
outline:none;
background:transparent;
color:white;
border-radius:10px;
font-size:14px;
}

#registration .field{
position:relative;
z-index:1;
}

/* PLACEHOLDER */
#registration input::placeholder{
color:#64748b;
}

/* SELECT FIX */
#registration select{
appearance:none;
}

/* DROPDOWN OPTIONS FIX */
#registration select option{
color:black;
background:white;
}

/* 🔥 FOCUS GLOW */
#registration input:focus,
#registration select:focus{
box-shadow:
0 0 0 1px #2563eb,
0 0 12px rgba(37,99,235,0.6);
}

/* BUTTON */
#registration .btn{
margin-top:14px;
height:48px;
border-radius:12px;
font-size:15px;
}

#registration input{
background-clip:padding-box;
}

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

@media (max-width:768px){

.wrapper{
padding:100px 16px 60px;
}

.hero-buttons{
gap:10px;
}

.btn{
padding:10px 16px;
font-size:13px;
}

#registration .card{
padding:18px;
}

}

/* =========================
SLIDER (FINAL PREMIUM)
========================= */

.slider{
position:relative;
overflow:hidden;
border-radius:12px;
}

.slides{
  display:flex;
  transition:transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}




.slide{
  min-width:100%;
  aspect-ratio:16/9;
  max-height:420px;
  position:relative;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
border-radius:12px;
}

.empty-slide{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.03);
color:#64748b;
font-size:12px;
text-align:center;
padding:10px;
}

.dots{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:6px;
}

.dots div{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,0.4);
opacity:.6;
cursor:pointer;
backdrop-filter:blur(4px);
}

.dots .active{
background:white;
opacity:1;
box-shadow:0 0 6px rgba(255,255,255,0.8);
}


.slider::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.1),
transparent 30%,
transparent 70%,
rgba(0,0,0,0.2)
);
}

/* =========================
BUSINESS PAGE (FINAL)
========================= */

/* CATEGORY SCROLL */
#categoryScroll{
  scrollbar-width:none;
}

#categoryScroll::-webkit-scrollbar{
  display:none;
}

.category-item{
  opacity:0.6;
  transition:0.25s;
}

.category-item:hover{
  opacity:1;
  transform:scale(1.05);
}

/* ACTIVE CATEGORY */
.category-item.active{
  opacity:1;
}

/* GRID */


/* ITEM CARD */
.grid .card{
  transition:0.25s;
}

.grid .card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 25px rgba(0,0,0,0.4);
}

/* BUTTONS */
.inc, .dec{
  width:28px;
  height:28px;
  border-radius:6px;
  border:none;
  background:#1e293b;
  color:white;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.inc:hover{
  background:#22c55e;
}

.dec:hover{
  background:#ef4444;
}

/* CART BAR */
#cartBar{
  backdrop-filter:blur(10px);
}

/* SEARCH */
#businessSearch:focus{
  border-color:#2563eb;
  box-shadow:0 0 10px rgba(37,99,235,0.5);
}

/* =========================
   RENDER STABILITY FIX
========================= */

#itemsContainer{
  transform: translateZ(0);
  will-change: contents;
}

/* =========================
   IMAGE LOAD SMOOTH
========================= */

.item-card img{
  transition: opacity .4s ease;
}

/* =========================
   SKELETON LOADER
========================= */

.skeleton{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius:8px;
}

@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}


/* =========================
   ITEM ANIMATION
========================= */

.item-card{
  opacity:1;
  transform:none;
  transition: all .35s ease;
}


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

.category-item{
  transition: all .25s ease;
}

.category-item.active{
  transform: scale(1.08);
}

.category-item.active div:first-child{
  border:2px solid #3b82f6;
  box-shadow:0 0 12px rgba(59,130,246,0.5);
}

/* =========================
   CATEGORY SCROLL SNAP
========================= */

#categoryScroll{
  scroll-snap-type: x mandatory;
}

.category-item{
  scroll-snap-align: start;
}


/* =========================
   CART BAR
========================= */

#cartBar{
  backdrop-filter: blur(10px);
}

#cartProceed{
  transition: all .2s ease;
}

#cartProceed:active{
  transform: scale(0.95);
}

/* =========================
   GRID IMPROVEMENT
========================= */




/* =========================
   MODAL FIX (CRITICAL)
========================= */

/* =========================
   MODAL (FINAL CLEAN)
========================= */

/* hidden state (CRITICAL FIX) */
.hidden{
  display:none !important;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);

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

  z-index:9999;
  padding:20px;

  animation:fadeIn .2s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* =========================
   MODAL CARD (PREMIUM)
========================= */



/* =========================
   INPUT + SELECT (FIXED)
========================= */

.modal input,
.modal select{
  width:100%;
  height:44px;
  margin-top:12px;
  padding:0 12px;

  border-radius:12px;
  border:1px solid rgba(148,163,184,0.25);

  background:#020617;
  color:white;

  font-size:14px;
  outline:none;
  transition:.2s;
}

/* dropdown styling */
.modal select{
  appearance:none;
}

/* dropdown options visible */
.modal select option{
  background:white;
  color:black;
}

/* focus */
.modal input:focus,
.modal select:focus{
  border-color:#2563eb;
  box-shadow:0 0 10px rgba(37,99,235,0.5);
}

/* file input */
.modal input[type="file"]{
  padding:6px;
}

/* =========================
   BUTTONS (PROPER ALIGN)
========================= */

/* REMOVE full width buttons */
.modal button{
  width:auto;
}

/* action row */
.modal .actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

/* buttons */
.modal .actions button{
  flex:1;
  padding:10px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

/* primary */
.modal .actions button:first-child{
  background:#2563eb;
  color:white;
}

.modal .actions button:first-child:hover{
  background:#1d4ed8;
}

/* secondary */
.modal .actions button:last-child{
  background:#1e293b;
  color:#94a3b8;
}

.modal .actions button:last-child:hover{
  background:#334155;
  color:white;
}

/* =========================
   CATEGORY HOVER (KEEP)
========================= */

.cat{
  transition:all .25s ease;
}

.cat:hover{
  transform:scale(1.05);
}

/* =========================
   ITEM IMAGE FIX
========================= */






/* =========================
   FINAL APP UI FIX (DO NOT MODIFY ABOVE CSS)
========================= */




/* =========================================================
   FINAL OVERRIDE LAYER
   APPEND THIS AT THE VERY BOTTOM OF main.css
   DO NOT REMOVE OLD CSS
========================================================= */

/* =========================
   ROOT
========================= */

:root{

--bg:#020617;
--card:#0f172a;
--card2:#1e293b;

--text:#ffffff;
--muted:#94a3b8;

--blue:#2563eb;
--blue2:#3b82f6;

--green:#22c55e;
--red:#ef4444;
--orange:#f59e0b;

--radius:18px;

--shadow:
0 12px 35px rgba(0,0,0,.45);

}

/* =========================
   RESET
========================= */

*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
padding:0;

font-family:
Inter,
system-ui,
sans-serif;

background:
radial-gradient(circle at top left,
rgba(37,99,235,.25),
transparent 35%),

radial-gradient(circle at top right,
rgba(14,165,233,.15),
transparent 35%),

linear-gradient(
180deg,
#020617,
#020617
);

color:var(--text);

overflow-x:hidden;
}

/* =========================
   APP
========================= */

#app{
min-height:100vh;
}

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

.nav{
position:fixed;
top:0;
left:0;
right:0;

z-index:1000;

backdrop-filter:blur(14px);

background:
rgba(2,6,23,.78);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.nav-inner{
max-width:1200px;
margin:auto;

height:72px;

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

padding:0 16px;
}

/* =========================
   BRAND
========================= */

.brand-wrap{
display:flex;
align-items:center;
gap:12px;
}

.brand-icon{
width:44px;
height:44px;

border-radius:14px;

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

font-size:20px;

background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
);

box-shadow:
0 8px 20px rgba(37,99,235,.4);
}

.brand{
margin:0;
font-size:17px;
font-weight:700;
}

.brand-sub{
margin:2px 0 0;
font-size:12px;
color:var(--muted);
}

/* =========================
   NAV ACTIONS
========================= */

.nav-actions{
display:flex;
align-items:center;
gap:10px;
}

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

button{
all:unset;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:12px 16px;

border-radius:14px;

cursor:pointer;

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

transition:.22s ease;

user-select:none;
}

.btn:active{
transform:scale(.96);
}

.btn-primary{

background:
linear-gradient(
135deg,
var(--blue),
var(--blue2)
);

color:white;

box-shadow:
0 10px 24px rgba(37,99,235,.35);
}

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

.btn-secondary{

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

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

color:white;
}

.btn-glass{

width:42px;
height:42px;

border-radius:14px;

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

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

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

font-size:18px;
}

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

.container{
max-width:1200px;
margin:auto;

padding:
92px 16px 90px;
}

/* =========================
   SLIDER
========================= */

.slider{
position:relative;

overflow:hidden;

border-radius:24px;

margin-top:8px;

box-shadow:
0 20px 60px rgba(0,0,0,.45);
}

.slides{
display:flex;

transition:
transform 1s cubic-bezier(.22,1,.36,1);
}

.slide{
position:relative;

min-width:100%;

aspect-ratio:16/8;
}

.slide img{
width:100%;
height:100%;

object-fit:cover;

display:block;
}

.slide-overlay{
position:absolute;
left:0;
right:0;
bottom:0;

padding:28px 20px;

background:
linear-gradient(
to top,
rgba(0,0,0,.7),
transparent
);
}

.slide-overlay h2{
margin:0;
font-size:28px;
font-weight:800;
}

.slide-overlay p{
margin:6px 0 0;
font-size:14px;
color:#e2e8f0;
}

/* =========================
   DOTS
========================= */

.dots{
position:absolute;

bottom:12px;
left:50%;

transform:translateX(-50%);

display:flex;
gap:8px;
}

.dots div{
width:8px;
height:8px;

border-radius:50%;

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

transition:.25s;
}

.dots .active{
width:24px;

border-radius:20px;

background:white;
}

/* =========================
   LIVE STRIP
========================= */

.live-strip{
display:flex;
align-items:center;
gap:12px;

margin:18px 0 10px;
}

.live-badge{
padding:8px 12px;

border-radius:999px;

background:
rgba(34,197,94,.12);

color:#4ade80;

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

border:
1px solid rgba(34,197,94,.22);
}

.live-text{
font-size:13px;
color:var(--muted);
}

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

.search-wrap{
margin-top:14px;
}

.search-box{
display:flex;
align-items:center;
gap:10px;

height:54px;

padding:0 16px;

border-radius:18px;

background:
linear-gradient(
180deg,
#0f172a,
#020617
);

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

box-shadow:
0 8px 20px rgba(0,0,0,.35);
}

.search-icon{
font-size:18px;
opacity:.7;
}

#search{
flex:1;

height:100%;

border:none;
outline:none;

background:transparent;

color:white;

font-size:15px;
}

#search::placeholder{
color:#64748b;
}

/* =========================
   CATEGORIES
========================= */

.categories{
display:flex;
gap:12px;

overflow-x:auto;

padding:18px 0 8px;

scrollbar-width:none;
}

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

.cat{
padding:10px 18px;

border-radius:999px;

white-space:nowrap;

font-size:13px;
font-weight:600;

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

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

transition:.22s;
}

.cat.active{

background:
linear-gradient(
135deg,
var(--blue),
var(--blue2)
);

box-shadow:
0 8px 20px rgba(37,99,235,.35);
}

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

/* =========================
   GRID
========================= */
/* =========================
   FINAL GRID SYSTEM
========================= */

.grid{

display:grid;

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

gap:16px;

margin-top:18px;
}

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

@media screen and (max-width:768px){

.grid{

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

gap:12px;
}

.item-card{
padding:10px;
}

.item-card img{

aspect-ratio:16/9;

object-fit:cover;
}

.item-card h3{
font-size:13px;
line-height:1.3;
}

.item-card p{
font-size:14px;
}

.meta{
font-size:11px;
gap:6px;
flex-wrap:wrap;
}

}




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

.card{
position:relative;

overflow:hidden;

background:
linear-gradient(
180deg,
#1e293b,
#0f172a
);

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

border-radius:22px;

box-shadow:
0 12px 30px rgba(0,0,0,.4);

transition:
transform .22s ease,
box-shadow .22s ease;
}

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

/* =========================
   ITEM CARD
========================= */

.item-card{
padding:12px;
}

.item-card img{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

border-radius:16px;

display:block;

margin-bottom:10px;

background:#000;
}

.item-card h3{
margin:0;

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

line-height:1.3;
}

.item-card p{
margin:6px 0;

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

color:#4ade80;
}

/* =========================
   META
========================= */

.meta{
display:flex;
justify-content:space-between;
align-items:center;

margin:10px 0 12px;

font-size:12px;
color:var(--muted);
}

/* =========================
   TIMER
========================= */

.timer{
padding:6px 10px;

border-radius:999px;

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

color:#93c5fd;

font-size:11px;
font-weight:700;
}

/* =========================
   LOW STOCK
========================= */

.low-stock{
margin-bottom:12px;

padding:8px 10px;

border-radius:12px;

background:
rgba(245,158,11,.12);

border:
1px solid rgba(245,158,11,.22);

color:#fbbf24;

font-size:12px;
font-weight:700;
}

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

.hidden{
display:none !important;
}

.modal{
position:fixed;
inset:0;

z-index:5000;

padding:18px;

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

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

animation:fadeIn .22s ease;
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}



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

.modal-card{

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

max-height:92vh;

overflow-y:auto;

padding:22px;

border-radius:24px;

background:
linear-gradient(
180deg,
#1e293b,
#0f172a
);

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

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

-webkit-overflow-scrolling:touch;
}

.modal-card::-webkit-scrollbar{
width:4px;
}

.modal-card::-webkit-scrollbar-thumb{
background:#334155;
border-radius:20px;
}

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

.modal-header{
display:flex;
justify-content:space-between;
align-items:flex-start;

margin-bottom:18px;
}

.modal-header h3{
margin:0;
font-size:22px;
}

.modal-header p{
margin:4px 0 0;
font-size:13px;
color:var(--muted);
}

.icon-btn{
width:40px;
height:40px;

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

border-radius:12px;

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

font-size:16px;
}


/* =========================
   MOBILE MODAL FIX
========================= */
@media(max-width:640px){

.modal{
padding:12px;
}

.modal-card{
padding:18px;
border-radius:20px;
}

.modal-header{
margin-bottom:14px;
}

.form-group{
gap:12px;
}

.actions{
gap:10px;
}

.actions .btn{
flex:1;
}

.field select{
font-size:16px;
}

.order-preview{
gap:12px;
}

.order-image{
width:90px;
height:90px;
border-radius:16px;
}

}

/* =========================
   VIDEO PLAYER
========================= */

.video-wrap{

width:100%;

aspect-ratio:16/9;

background:#000;

overflow:hidden;

border-radius:
24px 24px 0 0;
}

.video-wrap iframe{

width:100%;
height:100%;

border:none;

display:block;
}

.video-actions{
padding:16px;
}

/* =========================
   FORM
========================= */

.form-group{
display:flex;
flex-direction:column;
gap:14px;
}

.field{
display:flex;
flex-direction:column;
gap:8px;
}

.field label{
font-size:13px;
font-weight:600;

color:#cbd5e1;
}

.field input,
.field select{

width:100%;
height:48px;

padding:0 14px;

border-radius:14px;

background:
rgba(2,6,23,.96);

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

outline:none;

color:white;

font-size:16px;

transition:.22s;
}


.field textarea{

width:100%;

min-height:110px;

padding:14px;

border-radius:14px;

background:
rgba(2,6,23,.96);

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

outline:none;

color:white;

font-size:16px;

resize:vertical;

transition:.22s;
}

.field textarea:focus{

border-color:#2563eb;

box-shadow:
0 0 0 3px rgba(37,99,235,.15);
}


/* SELECT ONLY */

.field select{

cursor:pointer;

appearance:auto;
-webkit-appearance:auto;
-moz-appearance:auto;

padding-right:14px;
}



/* =========================
   ACTIONS
========================= */

.actions{
display:flex;
gap:12px;

margin-top:20px;
}

.actions .btn{
flex:1;
}

/* =========================
   TOAST
========================= */

#toast{
position:fixed;

left:50%;
bottom:92px;

transform:
translateX(-50%)
translateY(20px);

padding:12px 18px;

border-radius:999px;

background:
rgba(15,23,42,.95);

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

color:white;

font-size:13px;
font-weight:600;

opacity:0;
pointer-events:none;

transition:.25s;

z-index:9000;

backdrop-filter:blur(10px);
}

#toast.show{
opacity:1;

transform:
translateX(-50%)
translateY(0);
}

/* =========================
   INSTALL BUTTON
========================= */

.install-float{
position:fixed;

left:16px;
bottom:18px;

z-index:4000;

display:none;
align-items:center;
gap:8px;

padding:12px 16px;

border-radius:999px;

background:
linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:white;

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

box-shadow:
0 14px 30px rgba(0,0,0,.4);
}


/* =========================
   FLOATING REFRESH
========================= */

.floating-refresh{

position:fixed;

right:14px;
bottom:18px;

z-index:4000;

width:44px !important;
height:44px !important;

min-width:44px;
min-height:44px;

padding:0 !important;

border-radius:50% !important;

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

background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
) !important;

color:white;

font-size:18px;
font-weight:700;
line-height:1;

box-shadow:
0 10px 24px rgba(37,99,235,.32);

cursor:pointer;

flex-shrink:0;

transition:
transform .2s ease,
box-shadow .2s ease;
}


/* =========================
   LOADER
========================= */

.global-loader{
position:fixed;
inset:0;

z-index:9999;

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

background:
rgba(2,6,23,.7);

backdrop-filter:blur(6px);
}

.loader-ring{
width:58px;
height:58px;

border-radius:50%;

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

border-top:
4px solid #2563eb;

animation:spin .8s linear infinite;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}

/* =========================
   SKELETON
========================= */

.skeleton{
border-radius:14px;

background:
linear-gradient(
90deg,
rgba(255,255,255,.03) 25%,
rgba(255,255,255,.08) 50%,
rgba(255,255,255,.03) 75%
);

background-size:200% 100%;

animation:shimmer 1.4s infinite;
}

@keyframes shimmer{
0%{
background-position:200% 0;
}
100%{
background-position:-200% 0;
}
}

/* =========================
   OFFLINE
========================= */

.offline-bar{
position:fixed;

top:72px;
left:0;
right:0;

z-index:4500;

padding:12px;

text-align:center;

background:#ef4444;
color:white;

font-size:13px;
font-weight:700;
}

/* =========================
   PULL INDICATOR
========================= */

.pull-indicator{
position:fixed;

top:82px;
left:50%;

transform:translateX(-50%);

padding:10px 16px;

border-radius:999px;

background:
rgba(15,23,42,.92);

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

font-size:12px;

opacity:0;

pointer-events:none;

transition:.22s;

z-index:6000;
}

/* =========================
   BODY LOCK
========================= */

body.modal-open{
overflow:hidden;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-thumb{
background:#334155;
border-radius:20px;
}

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

@media (max-width:768px){

.nav-inner{
height:66px;
}

.brand{
font-size:15px;
}

.brand-sub{
font-size:11px;
}

.container{
padding:
82px 14px 90px;
}

.slide{
aspect-ratio:16/10;
}

.slide-overlay h2{
font-size:20px;
}

.slide-overlay p{
font-size:12px;
}






.install-float{
bottom:14px;
left:12px;

padding:10px 14px;
}

.floating-refresh{
right:12px;
bottom:14px;

width:42px;
height:42px;

font-size:17px;
}
}

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

@media (max-width:420px){

.grid{
gap:12px;
}

.slide-overlay{
padding:18px 14px;
}

.slide-overlay h2{
font-size:18px;
}

.search-box{
height:50px;
}

.btn{
padding:11px 14px;
font-size:13px;
}

}

/* =========================
   SAFE AREA
========================= */

@supports(padding:max(0px)){

.install-float{
bottom:max(18px,env(safe-area-inset-bottom));
}
.floating-refresh{
bottom:max(18px,env(safe-area-inset-bottom));
}

}


/* =========================================================
   PREMIUM FOOTER FINAL
========================================================= */

.footer{

margin-top:80px;

padding:50px 16px 120px;

border-top:
1px solid rgba(255,255,255,.06);

background:
linear-gradient(
180deg,
rgba(15,23,42,.4),
rgba(2,6,23,.96)
);
}

/* TOP */

.footer-top{

max-width:1200px;
margin:auto;
}

.footer-brand{

display:flex;
align-items:flex-start;
gap:18px;
}

.footer-logo{

width:72px;
height:72px;

border-radius:24px;

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

font-size:34px;

background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
);

box-shadow:
0 14px 40px rgba(37,99,235,.4);
}

.footer-brand h2{
margin:0 0 10px;
font-size:28px;
}

.footer-brand p{

margin:0;

max-width:720px;

line-height:1.7;

font-size:15px;

color:#94a3b8;
}

/* LINKS */

.footer-links{

max-width:1200px;

margin:40px auto 0;

display:grid;

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

gap:16px;
}

.footer-link{

height:68px;

border-radius:22px;

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

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

background:
linear-gradient(
180deg,
#1e293b,
#0f172a
);

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

box-shadow:
0 10px 30px rgba(0,0,0,.3);

cursor:pointer;

transition:.22s ease;
}

.footer-link:hover{

transform:
translateY(-2px);

box-shadow:
0 16px 40px rgba(0,0,0,.4);
}

/* BOTTOM */

.footer-bottom{

max-width:1200px;

margin:40px auto 0;

padding-top:20px;

border-top:
1px solid rgba(255,255,255,.06);

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

flex-wrap:wrap;
}

.footer-bottom p,
.footer-bottom span{

margin:0;

font-size:13px;

color:#94a3b8;
}

/* FOOTER MODAL */

.footer-modal{

max-width:700px;
}

.footer-content{

margin-top:10px;
}

.footer-content p{

line-height:1.7;

font-size:15px;

color:#cbd5e1;
}

.footer-content ul{

padding-left:18px;

margin-top:18px;
}

.footer-content li{

margin-bottom:14px;

line-height:1.7;

font-size:14px;

color:#cbd5e1;
}

.footer-wa{

margin-top:24px;

width:100%;

height:54px;

border-radius:18px;

font-size:15px;

text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.footer{
padding-bottom:120px;
}

.footer-brand{
flex-direction:column;
}

.footer-brand h2{
font-size:22px;
}

.footer-links{
grid-template-columns:1fr;
}

.footer-link{
height:60px;
font-size:14px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
}

.footer-modal{
padding:18px;
}

}


/* =========================================================
   FOOTER VIDEO MODAL
========================================================= */

.footer-video-modal{

max-width:900px;

padding:20px;
}

.footer-video{

margin-top:14px;

border-radius:22px;

overflow:hidden;

background:#000;
}

.footer-video iframe{

width:100%;

aspect-ratio:16/9;

border:none;

display:block;
}

/* MOBILE */

@media(max-width:768px){

.footer-video-modal{
padding:14px;
border-radius:20px;
}

.footer-video{
border-radius:16px;
}

/* =========================================
   FINAL WORLD CLASS FOOD CARD
========================================= */

.item-card{

  overflow:hidden;

  padding:0;

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #111827,
      #0f172a
    );

  border:
    1px solid rgba(255,255,255,0.05);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.42);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.item-card:hover{

  transform:translateY(-3px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.5);
}

/* IMAGE */

.food-image-wrap{

  position:relative;

  overflow:hidden;

  background:#000;
}

.food-image-wrap img{

  width:100%;

  aspect-ratio:16/10;

  object-fit:cover;

  display:block;
}

/* TRENDING */

.food-trending{

  position:absolute;

  top:10px;
  right:10px;

  width:34px;
  height:34px;

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

  border-radius:50%;

  background:
    rgba(239,68,68,0.9);

  backdrop-filter:blur(10px);

  font-size:15px;

  box-shadow:
    0 8px 18px rgba(239,68,68,0.28);
}

/* BODY */

.food-body{

  padding:12px;
}

/* TOP */

.food-top-row{

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

  gap:10px;
}

.food-info{

  flex:1;

  min-width:0;
}

/* TITLE */

.food-title{

  margin:0;

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

  line-height:1.35;

  color:#fff;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}

/* SUB ROW */

.food-sub-row{

  display:flex;
  align-items:center;

  gap:8px;

  margin-top:8px;

  flex-wrap:wrap;
}

.food-unit{

  padding:5px 10px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:#dbe4f0;

  font-size:11px;
  font-weight:700;
}

.food-left{

  color:#93c5fd;

  font-size:11px;
  font-weight:800;
}

/* PRICE */

.food-price{

  flex-shrink:0;

  font-size:28px;
  font-weight:900;

  line-height:1;

  letter-spacing:-1px;

  color:#4ade80;
}

/* META */

.food-meta{

  margin-top:12px;

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

  gap:8px;
}

/* TIME */

.food-time{

  color:#cbd5e1;

  font-size:12px;
  font-weight:700;
}

/* TIMER */

.food-timer{

  min-width:70px;
  height:32px;

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

  padding:0 10px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(34,197,94,0.14),
      rgba(16,185,129,0.12)
    );

  border:
    1px solid rgba(34,197,94,0.18);

  color:#86efac;

  font-size:11px;
  font-weight:900;

  white-space:nowrap;
}

/* BUTTON */

.premium-order-btn{

  width:100%;

  height:40px;

  margin-top:12px;

  border:none;

  border-radius:14px;

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

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );

  color:#fff;

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

  letter-spacing:.2px;

  box-shadow:
    0 10px 22px rgba(37,99,235,0.28);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.premium-order-btn:hover{

  transform:translateY(-1px);

  box-shadow:
    0 14px 28px rgba(37,99,235,0.34);
}

.premium-order-btn:active{
  transform:scale(.98);
}

/* MOBILE */

@media(max-width:768px){

  .food-title{
    font-size:14px;
  }

  .food-price{
    font-size:24px;
  }

  .food-time{
    font-size:11px;
  }

  .food-timer{

    min-width:64px;
    height:30px;

    font-size:10px;
  }

  .premium-order-btn{

    height:38px;

    font-size:12px;
  }

}

}





/* =========================================================
   FINAL SIMPLE PREMIUM FOOD CARD
========================================================= */

.item-card{

contain:layout paint style;

display:flex;
flex-direction:column;

overflow:hidden;

padding:10px;

border-radius:18px;

background:
linear-gradient(
180deg,
#172033,
#0f172a
);

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

box-shadow:
0 10px 24px rgba(0,0,0,.35);

gap:10px;
}

/* IMAGE */

.food-image-wrap{

overflow:hidden;

border-radius:14px;

background:#000;
}

.food-image-wrap img{

width:100%;

height:auto;

aspect-ratio:16/10;

object-fit:cover;

display:block;
}

/* BODY */

.food-body{

display:flex;
flex-direction:column;

gap:8px;
}

/* TITLE */

.food-title{

margin:0;

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

line-height:1.3;

color:#fff;

word-break:break-word;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;

min-height:38px;
}

/* PRICE + UNIT + LEFT */

.food-sub-row{

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

gap:8px;

font-size:13px;
font-weight:600;

color:#e2e8f0;
}

.food-left{

color:#4ade80;

font-weight:700;

white-space:nowrap;
}

/* META */

.food-meta{

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

gap:8px;

font-size:12px;

color:#cbd5e1;
}

/* TIMER */

.food-timer{

padding:4px 8px;

border-radius:999px;

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

color:#93c5fd;

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

white-space:nowrap;
}

/* BUTTON */

.premium-order-btn{

width:100%;

height:34px;

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

border:none;

border-radius:10px;

background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
);

color:white;

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

cursor:pointer;

margin-top:2px;

text-align:center;

padding:0 12px;

box-sizing:border-box;
}

/* MOBILE + DESKTOP SAME */

@media(max-width:768px){

.item-card{
padding:8px;
gap:8px;
}

.food-title{
font-size:13px;
min-height:34px;
}

.food-sub-row{
font-size:12px;
}

.food-meta{
font-size:11px;
}

.food-timer{
font-size:10px;
padding:3px 6px;
}

.premium-order-btn{
height:32px;
font-size:11px;
}

}


/* =========================================================
   PROMO ADS
========================================================= */

.promo-ad-modal{

position:fixed;
inset:0;

z-index:999999;

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

padding:20px;

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

backdrop-filter:
blur(12px);

animation:
promoFade .25s ease;
}

@keyframes promoFade{

from{
opacity:0;
}

to{
opacity:1;
}
}

.promo-ad-card{

position:relative;

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

padding:28px 22px;

border-radius:28px;

background:
linear-gradient(
135deg,
#ea580c,
#dc2626
);

box-shadow:
0 25px 60px rgba(0,0,0,.45);

overflow:hidden;

text-align:center;

color:white;
}

.promo-badge{

display:inline-flex;

padding:6px 12px;

border-radius:999px;

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

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

letter-spacing:.08em;

margin-bottom:16px;
}

.promo-title{

margin:0;

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

line-height:1.15;
}

.promo-subtitle{

margin-top:12px;

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

opacity:.95;
}

.promo-description{

margin-top:14px;

font-size:14px;

line-height:1.6;

opacity:.92;
}

.promo-order-btn{

margin-top:22px;

width:100%;
height:48px;

border:none;

border-radius:16px;

background:white;

color:#dc2626;

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

cursor:pointer;
}

.promo-close{

position:absolute;

top:14px;
right:14px;

width:34px;
height:34px;

border:none;

border-radius:50%;

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

color:white;

font-size:16px;

cursor:pointer;
}

@media(max-width:768px){

.promo-ad-card{

padding:24px 18px;

border-radius:24px;
}

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

.promo-subtitle{
font-size:16px;
}

}


/* =========================================================
   SIMPLE SHORT VIDEO MODAL
========================================================= */

#videoModal{

position:fixed;

inset:0;

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

padding:16px;

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

z-index:999999;

animation:
fadeVideo .18s ease;
}

#videoModal.hidden{

opacity:0;

visibility:hidden;

pointer-events:none;
}

@keyframes fadeVideo{

from{
opacity:0;
}

to{
opacity:1;
}
}

/* =========================================================
   VIDEO CARD
========================================================= */

.video-modal-card{

position:relative;

width:min(92vw,420px);

height:min(90vh,760px);

background:#000;

border-radius:24px;

overflow:hidden;

box-shadow:
0 20px 60px rgba(0,0,0,.5);
}

/* =========================================================
   VIDEO
========================================================= */

.video-modal-card iframe{

width:100%;
height:100%;

border:none;

display:block;

background:#000;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.video-close{

position:absolute;

top:10px;
right:10px;

z-index:99999;

width:72px;
height:72px;

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

border:none;

border-radius:50%;

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

backdrop-filter:
blur(10px);

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

color:white;

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

cursor:pointer;

touch-action:manipulation;

-webkit-tap-highlight-color:
transparent;
}

.video-close:active{

transform:scale(.94);
}

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

@media(max-width:768px){

#videoModal{

padding:0;
}

.video-modal-card{

width:100vw;

height:100vh;

max-width:none;

border-radius:0;
}

.video-close{

top:max(
10px,
env(safe-area-inset-top)
);

right:max(
10px,
env(safe-area-inset-right)
);

width:78px;
height:78px;

font-size:34px;
}

}





/* =========================================================
   ORDER SUCCESS POPUP
========================================================= */

.order-success-overlay{

  position:fixed;
  inset:0;

  z-index:999999;

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

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

  padding:18px;

  animation:
    fadePopup .25s ease;
}

.order-success-popup{

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

  max-height:90vh;

  overflow:auto;

  background:#ffffff;

  border-radius:24px;

  padding:22px;

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

  animation:
    popupScale .25s ease;
}

.order-success-popup h2{

  margin:0 0 18px;

  font-size:24px;

  font-weight:800;

  color:#111827;

  text-align:center;
}

.order-success-popup pre{

  margin:0;

  white-space:pre-wrap;
  word-break:break-word;

  background:#f8fafc;

  border-radius:18px;

  padding:18px;

  font-size:14px;

  line-height:1.7;

  color:#111827;

  overflow:auto;
}

.order-success-actions{

  display:flex;

  gap:12px;

  margin-top:20px;
}

.order-success-actions a,
.order-success-actions button{

  flex:1;

  border:none;

  border-radius:16px;

  padding:15px 16px;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  text-decoration:none;

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

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.order-success-actions a:active,
.order-success-actions button:active{

  transform:scale(.97);
}

.success-wa-btn{

  background:#25D366;

  color:#fff;
}

.success-close-btn{

  background:#111827;

  color:#fff;
}

@keyframes fadePopup{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes popupScale{

  from{

    opacity:0;

    transform:
      scale(.92);
  }

  to{

    opacity:1;

    transform:
      scale(1);
  }
}

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

@media (max-width:640px){

  .order-success-popup{

    border-radius:22px;

    padding:18px;
  }

  .order-success-popup h2{

    font-size:21px;
  }

  .order-success-popup pre{

    font-size:13px;

    padding:15px;
  }

  .order-success-actions{

    flex-direction:column;
  }
}