*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#0e0e0e;color:#fff}

/* ================= HERO ================= */
.hero{
    position:relative;
    height:480px;
    background:url('/assets/bgimage.jpg') center/cover no-repeat;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
}
.top-lang{
    position:absolute;
    top:20px;
    right:30px;
}
.top-lang span{
    margin-left:10px;
    opacity:.6;
    cursor:pointer;
}
.top-lang .active{opacity:1;font-weight:bold}

.hero-content{
    position:relative;
    padding:60px;
}
.hero h1{
    font-size:56px;
    margin-bottom:30px;
}

.brand{
    display:flex;
    gap:20px;
    align-items:center;
}
.brand img{
    width:90px;
    border-radius:20px;
}
.socials span{
    margin-right:10px;
    opacity:.7;
}

.hero-boxes{
    margin-top:40px;
    display:flex;
    gap:20px;
}
.box{
    background:rgba(0,128,0,.35);
    padding:20px;
    border-radius:15px;
}

/* ================= CATEGORIES ================= */
.categories{
    padding:20px;
    display:flex;
    gap:10px;
    overflow-x:auto;
}
.cat{
    background:#1e1e1e;
    border:none;
    color:#fff;
    padding:10px 18px;
    border-radius:20px;
    cursor:pointer;
    white-space:nowrap;
}
.cat.active{
    background:#fff;
    color:#000;
}

/* ================= PRODUCTS ================= */
.products{
    padding:30px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
}
.card{
    background:#1b1b1b;
    border-radius:22px;
    padding:15px;
}
.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:18px;
}
.card h3{margin:12px 0 6px}
.card p{opacity:.7;font-size:14px}
.price{
    margin-top:10px;
    font-size:18px;
    font-weight:bold;
}

.btn-buy{
    display:block;
    margin-top:14px;
    padding:14px;
    background:#f04444;
    color:#fff;
    text-align:center;
    border-radius:14px;
    text-decoration:none;
    font-weight:bold;
    transition:.2s;
}
.btn-buy:hover{background:#ff5c5c}

.delivery{
    margin-top:6px;
    font-size:14px;
    color:#3bd671;
}

/* ================= MODAL ================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

/* modal box */
.modal-box{
  background:#0b0f14;
  border-radius:28px;
  max-width:920px;          /* juda keng emas */
  width:94%;
  padding:26px;
  position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
}


/* close */
.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#ef4444; /* qizil */
  color:#fff;
  font-size:26px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  box-shadow:0 6px 20px rgba(239,68,68,.5);
}

.modal-close:hover{color:#fff}

/* content */
.modal-content{
  display:grid;
  grid-template-columns: 1fr 1fr; /* teng balans */
  gap:28px;
  align-items:center;
}


/* IMAGE — MUAMMO SHU YERDA EDI */
.modal-content img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:24px;
}


/* INFO */
.modal-info h2{
  font-size:30px;
  margin-bottom:10px;
}

.modal-info p{
  opacity:.7;
  margin-bottom:16px;
  line-height:1.5;
}

.modal-price{
  font-size:34px;
  font-weight:800;
  margin-bottom:12px;
}

.modal-meta{
  display:flex;
  gap:18px;
  opacity:.7;
  margin-bottom:22px;
}

/* OPTIONS */
.opt{
  margin-bottom:22px;
}
.opt label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
}

/* QTY */
.qty{
  display:flex;
  align-items:center;
  gap:12px;
}
.qty button{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:#1f2937;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.qty button:hover{background:#374151}

.qty input{
  width:70px;
  height:42px;
  text-align:center;
  background:#0f172a;
  border:1px solid #1f2937;
  color:#fff;
  border-radius:12px;
  font-size:16px;
}

/* RADIO */
.choices{
  display:flex;
  gap:22px;
}
.choices label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.choices input{
  accent-color:#22c55e;
}

/* ORDER BUTTON */
.order-btn{
  margin-top:26px;
  width:100%;
  padding:18px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#021d0c;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
}
.order-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(34,197,94,.35);
}

.modal-socials{
  margin-top:18px;
  display:flex;
  gap:18px;
  opacity:.7;
}






/* ===== MODERN CARD ZOOM (image + column together) ===== */
.card{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

/* RASM — HECH QANDAY SCALE YO‘Q */
.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:18px;
}

/* HOVER — BUTUN USTUN ZOOM */
.card:hover{
    transform: scale(1.04);           /* rasm + ustun birga */
    box-shadow: 0 30px 60px rgba(0,0,0,.6);
    background:#202020;               /* ozgina zamonaviy effekt */
}



@media(max-width:768px){

  /* 2 ta karta yonma-yon */
  .products{
    padding:16px;
    gap:14px;
    grid-template-columns: repeat(2, 1fr);
  }

  .card{
    padding:10px;
    border-radius:18px;
    transform:none !important; /* zoom o‘chadi */
  }

  .card img{
    height:150px;
    border-radius:14px;
  }

  .card h3{
    font-size:15px;
    margin:10px 0 4px;
  }

  .price{
    font-size:15px;
  }

  .btn-buy{
    padding:10px;
    font-size:14px;
    border-radius:12px;
  }

  .delivery{
    font-size:12px;
  }
}


@media (max-width: 768px){

  .modal{
    align-items: flex-end; /* pastdan chiqadi */
  }

  .modal-box{
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    padding: 16px;
    animation: slideUp .25s ease;
  }

  @keyframes slideUp{
    from{
      transform: translateY(100%);
    }
    to{
      transform: translateY(0);
    }
  }
}


@media (max-width: 768px){

  .modal-content{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modal-content img{
    height: 220px;
    border-radius: 18px;
  }

  .modal-info h2{
    font-size: 22px;
  }

  .modal-price{
    font-size: 26px;
  }
}


@media (max-width: 768px){

  .modal-box{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ===== MODERN PILL OPTIONS ===== */
.pill-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill-group input{
  display:none; /* radio ko‘rinmaydi */
}

.pill-group label{
  padding:10px 16px;
  border-radius:999px;
  background:#1f2937;
  color:#d1d5db;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
  user-select:none;
  border:1px solid transparent;
}

/* tanlangan holat */
.pill-group input:checked + label{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#022c12;
  font-weight:600;
  border-color:#22c55e;
  box-shadow:0 6px 18px rgba(34,197,94,.35);
}

/* hover */
.pill-group label:hover{
  background:#374151;
}


/* ===== REMOVE NUMBER INPUT SPINNERS ===== */

/* Chrome, Edge, Safari */
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.qty input[type=number] {
  -moz-appearance: textfield;
}


/* ===== MODAL SOCIAL BUTTONS ===== */
.modal-socials{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.soc{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  transition:.2s;
}

/* Instagram */
.soc.insta{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
}
.soc.insta:hover{
  box-shadow:0 6px 20px rgba(221,42,123,.5);
}

/* Telegram */
.soc.tg{
  background:#229ED9;
}
.soc.tg:hover{
  box-shadow:0 6px 20px rgba(34,158,217,.5);
}


/* ===== MODAL INPUTS ===== */
.input{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  background:#0f172a;
  border:1px solid #1f2937;
  color:#fff;
  font-size:15px;
}

.input::placeholder{
  color:#9ca3af;
}

.input:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}

.textarea{
  min-height:90px;
  resize:none;
}

/* ===== INLINE PILL GROUP (4 options in one row) ===== */
.pill-inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap; /* kichik ekranlarda pastga tushadi */
}

.pill-inline label{
  padding:8px 14px;
  font-size:13px;
  white-space:nowrap;
}


@media (max-width:360px){
  .pill-inline{
    gap:8px;
  }
  .pill-inline label{
    font-size:12px;
    padding:7px 12px;
  }
}

/* ===== REAL SVG SOCIAL ICONS ===== */
.modal-socials{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:18px;
}

.modal-socials .soc{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
  text-decoration:none;
}

/* SVG icon */
.modal-socials .icon{
  width:24px;
  height:24px;
  fill:#fff;
}

/* Instagram */
.modal-socials .insta{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
}

/* Telegram */
.modal-socials .tg{
  background:#229ED9;
}

/* hover */
.modal-socials .soc:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

/* ===== REAL SVG SOCIAL ICONS ===== */
.modal-socials{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:18px;
}

.modal-socials .soc{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
  text-decoration:none;
}

/* SVG icon */
.modal-socials .icon{
  width:24px;
  height:24px;
  fill:#fff;
}

/* Instagram */
.modal-socials .insta{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
}

/* Telegram */
.modal-socials .tg{
  background:#229ED9;
}

/* hover */
.modal-socials .soc:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}


/* ===== SUCCESS MODAL STYLE ===== */
.success-box{
  max-width:420px;
  padding:40px 28px;
  text-align:center;
  border-radius:28px;
  background:linear-gradient(180deg,#0f172a,#020617);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation: popIn .45s ease;
}

@keyframes popIn{
  from{
    transform:scale(.8);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

/* ===== CHECK ICON ===== */
.success-icon{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.checkmark{
  width:72px;
  height:72px;
  stroke:#22c55e;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.checkmark-circle{
  stroke-dasharray:166;
  stroke-dashoffset:166;
  animation: drawCircle .6s ease-out forwards;
}

.checkmark-check{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation: drawCheck .4s .6s ease-out forwards;
}

@keyframes drawCircle{
  to{ stroke-dashoffset:0; }
}

@keyframes drawCheck{
  to{ stroke-dashoffset:0; }
}

/* ===== SUCCESS TEXT ===== */
#successModal h2{
  font-size:26px;
  margin-bottom:10px;
}

#successModal p{
  opacity:.8;
  font-size:15px;
  margin-bottom:22px;
}

/* ================= HERO BIGJOY STYLE ================= */
/* ================= HERO (YALLA / BIGJOY STYLE) ================= */

.hero-modern{
  position: relative;
  min-height: 520px;
  background: url('/assets/bgimage.jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* GRADIENT QOPLAMA */
.hero-modern::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.75),
    rgba(0,0,0,.45),
    rgba(0,0,0,.75)
  );
}
/* DESKTOP: TITLE NI YON TOMONGA SILJITISH */
.hero-modern .hero-center{
  transform: translate(50px, 15px);
}
/* LANG */
.modern-lang{
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 5;
}

.modern-lang span{
  margin-left: 12px;
  opacity: .7;
  cursor: pointer;
  font-size: 14px;
}

.modern-lang .active{
  background: #fff;
  color: #000;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  opacity: 1;
}

/* ICHKI GRID */
.hero-inner{
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 60px 70px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
}

/* LEFT */
.hero-left{
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ===== HERO LOGO GLOW CIRCLE ===== */
.hero-logo{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  padding:6px;
  background:
    linear-gradient(135deg,#D8FF00,#D8FF00,#D8FF00);
  box-shadow:
    0 0 20px rgba(34,197,94,.6),
    0 0 45px rgba(34,197,94,.4);
  animation: logoGlow 3s infinite linear;
}

/* ichki rasmni doira qilish */
.hero-logo{
  background-clip: padding-box;
}

/* yonib turish animatsiyasi */
@keyframes logoGlow{
  0%{
    box-shadow:
      0 0 15px rgba(34,197,94,.5),
      0 0 30px rgba(34,197,94,.3);
  }
  50%{
    box-shadow:
      0 0 28px rgba(34,197,94,.9),
      0 0 60px rgba(34,197,94,.6);
  }
  100%{
    box-shadow:
      0 0 15px rgba(34,197,94,.5),
      0 0 30px rgba(34,197,94,.3);
  }
}


.hero-brand h2{
  font-size: 26px;
  margin-bottom: 6px;
}

.hero-socials span{
  margin-right: 10px;
  opacity: .7;
}

/* CENTER */
.hero-center{
  text-align: center;
}

.hero-center h1{
  font-size: 56px;
  font-weight: 700;
}

/* RIGHT */
.hero-right{
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}

.hero-pill{
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  min-width: 240px;
}

.hero-pill small{
  display: block;
  font-size: 12px;
  opacity: .75;
}

.hero-pill b{
  font-size: 14px;
}

.hero-pill.green{
  background: rgba(25,110,55,.6);
}

.hero-pill.olive{
  background: rgba(85,110,40,.6);
}

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

@media (max-width: 768px){

  .hero-modern{
    min-height: 560px;
    text-align: center;
  }
  
  @media (max-width:768px){
  .hero-modern .hero-logo{
    width: auto;
  }
}

@media (max-width:768px){
  .hero-modern .hero-center{
    transform: none;
  }
}



  .hero-inner{
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 26px;
    justify-items: center;
  }

  /* LOGO */
  .hero-left{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-logo{
    width: 80px;
  }

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

  /* TITLE */
  .hero-center h1{
    font-size: 36px;
    line-height: 1.2;
  }

  /* INFO */
  .hero-right{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .hero-pill{
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: left;
  }

  /* LANG */
  .modern-lang{
    top: 14px;
    right: 14px;
  }
}


/* ===== CATEGORY BIG & MODERN ===== */
.categories{
  padding:22px 20px;
  display:flex;
  gap:14px;
  overflow-x:auto;
  scrollbar-width:none;
}
.categories::-webkit-scrollbar{
  display:none;
}

.cat{
  background:#1f2937;
  color:#fff;
  padding:14px 24px;          /* KATTALASHTIRILDI */
  border-radius:999px;
  font-size:16px;             /* KATTAROQ TEXT */
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid transparent;
  transition:.25s;
}

.cat:hover{
  background:#374151;
}

.cat.active{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#022c12;
  border-color:#22c55e;
  box-shadow:0 6px 18px rgba(34,197,94,.35);
}


@media (max-width:768px){
  .categories{
    padding:18px 14px;
    gap:12px;
  }

  .cat{
    padding:12px 20px;
    font-size:15px;
  }
}

.cart-top{
  position:absolute;
  top:20px;
  left:20px;
  z-index:5;          /* 🔥 MUHIM */
  cursor:pointer;
  background:rgba(0,0,0,.6);
  padding:8px 14px;
  border-radius:20px;
  font-weight:600;
}

.cart-top span{
  background:#22c55e;
  color:#000;
  padding:2px 8px;
  border-radius:12px;
  margin-left:6px;
}


#cartCount{
  background:#22c55e;
  color:#022c12;
  padding:2px 8px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}


.order-btn.ghost{
  background:#1f2937;
  color:#fff;
  margin-top:10px;
}
.order-btn.ghost:hover{
  background:#374151;
}
.cart-table{
  width:100%;
  margin:20px 0;
  border-collapse:collapse;
  font-size:15px;
}
.cart-table th,
.cart-table td{
  padding:10px;
  border-bottom:1px solid #1f2937;
  text-align:left;
}
.cart-table th{
  opacity:.7;
}

.cart-total{
  text-align:right;
  font-size:20px;
  font-weight:800;
  margin:14px 0;
}

.card{
  position:relative;
}

.card-cart{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
}

.cart-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:#22c55e;
  color:#000;
  font-size:18px;
  cursor:pointer;
}

.qty-mini{
  display:none;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:6px 10px;
  border-radius:20px;
  margin-top:6px;
}

.qty-mini button{
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  background:#22c55e;
  font-size:18px;
  cursor:pointer;
}

.qty-mini span{
  min-width:20px;
  text-align:center;
  font-weight:bold;
  color:#000;
}

/* ===== CART LIST ===== */
.cart-item{
  display:grid;
  grid-template-columns: 1.6fr 1fr; /* chap: mahsulot | o‘ng: actions */
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:#020617;
  align-items:center;
}

/* LEFT */
.cart-info b{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.cart-info small{
  opacity:.65;
  font-size:13px;
}

/* RIGHT — 3 ustun */
.cart-actions{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  align-items:center;
  gap:14px;
}

/* SONI — O‘RTADA */
.cart-qty{
  display:flex;
  justify-content:center;   /* ⬅️ ENG MUHIM */
  align-items:center;
  gap:10px;
}


.cart-qty button{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:#1f2937;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}


.cart-qty span{
  min-width:22px;
  text-align:center;
  font-weight:600;
}


/* NARXI — O‘NGDA */
.cart-sum{
  text-align:right;
  font-weight:700;
  white-space:nowrap;
  padding-left:80px;   /* ⬅️ chapdan suradi */
}


/* DELETE */
.cart-remove{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:16px;
  cursor:pointer;
}

.cart-head{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding:0 16px 10px;
  margin-bottom:10px;
  font-size:13px;
  opacity:.7;
}

.cart-head span:nth-child(2){
  text-align:center;
}

.cart-head span:nth-child(3){
  text-align:right;
}


.cart-item{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items:center;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(180deg,#0f172a,#020617);
}


.cart-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}