/* =========================
  CopyRight For Cosmos Store
   ========================= */
   
body{background:#0d1117;color:#e6edf3;font-family:system-ui,Segoe UI,Roboto}

/* ===== NAVBAR (glass) ===== */
* { box-sizing: border-box; }
:root {
  --bg:#000000;
  --card:#12161b;
  --txt:#eaeef5;
  --muted:#a9b1bb;
  --accent:#4f8cff;
}

.navbar{
  position:fixed; top:12px; right:12px; left:auto;
  z-index:30;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0; background:transparent; border:0;
}
.brand{ display:none; }

.nav-links{
  list-style:none; margin:0; padding:6px 8px;
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:18px;
  transform: translateY(-12px);
  opacity:0;
  animation: navIconsIn .5s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
@keyframes navIconsIn{ to{ transform:translateY(0); opacity:1; } }
.nav-links li{ display:flex; }
.nav-links li a{ position:relative; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.nav-links li:first-child a{
  width:56px; height:40px; border-radius:12px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-links li:first-child a:hover{ transform: translateY(-1px); background:rgba(0,0,0,.45); }
.nav-links li:last-child a{
  width:40px; height:40px; border-radius:999px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-links li:last-child a:hover{ transform: translateY(-1px); background:rgba(0,0,0,.45); }
.nav-links li a i{ font-size:18px; line-height:1; }
#cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; background:var(--accent);
  border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Back (top-left) */
.back-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: #fff;
  transition: transform .15s ease, background-color .15s ease;
}
.back-btn:hover { transform: translateY(-1px); background: rgba(0,0,0,.45); }
.back-btn i { font-size: 18px; }

/* ===== Page layout ===== */
.cart-wrap{max-width:1100px;margin:26px auto;padding:0 16px}
.card{background:#12161b;border:1px solid #2a303d;border-radius:16px;padding:16px;margin-bottom:16px}

.rows{display:flex;flex-direction:column;gap:10px}
.row{
  display:grid;
  grid-template-columns:1.6fr 180px 120px 120px 40px;
  align-items:center;gap:10px;padding:10px;
  border:1px solid #1e2734;border-radius:12px;background:#0f141a
}

.prod{display:flex;align-items:center;gap:10px}
.thumb{width:56px;height:56px;border-radius:10px;background:#0b0f14;display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{width:100%;height:100%;border-radius:10px;background:#0b0f14}

.qty{display:inline-flex;align-items:center;gap:6px}
.qty input{width:56px;text-align:center;border:1px solid #2a303d;border-radius:8px;background:#11161d;color:#e6edf3;height:36px}
.qty button{background:#1a2230;border:1px solid #2a303d;color:#e6edf3;cursor:pointer;border-radius:8px;height:36px;width:36px}
.rm{background:#1f252e;border:1px solid #2a303d;color:#d66b6b;border-radius:8px;height:36px;width:36px;cursor:pointer}

.aside{min-width:280px}
.summary{display:grid;gap:8px}
.summary .line{display:flex;justify-content:space-between}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#143224;color:#7ce7a2;border:1px solid #29523e}
.link{background:none;border:none;color:#8ab4ff;cursor:pointer;padding:0 0 0 6px}
.actions{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid #2a303d;background:#1a2230;color:#e6edf3;cursor:pointer}
.btn-primary{background:#4f8cff;border-color:#4f8cff;color:#fff}
.grid{display:grid;grid-template-columns:1.8fr 1fr;gap:16px}
@media (max-width:960px){
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr 1fr 100px 100px 36px}
}

/* Step 2 form */
.form-narrow{max-width:420px;margin:6px auto 0}
.form-narrow .field{display:flex;flex-direction:column;margin-bottom:12px}
.label{font-size:14px;margin-bottom:6px;color:#cbd6e5}
.ctrl{background:#0f141a;border:1px solid #273245;border-radius:10px;color:#e6edf3;padding:10px}
textarea.ctrl{min-height:88px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.otp-row{display:none}
.msg{font-size:12px;margin-top:6px;color:#b7c4dd}
.danger{color:#ff9b9b}
.success{color:#7bd88f}

/* === Toasts (your design) === */












/* =========================
   Responsive additions only
   ========================= */

/* Tablet (<=1024px) */
@media (max-width: 1024px){
  .cart-wrap{max-width:100%;padding:0 12px}
  .card{padding:14px}
  .grid{grid-template-columns:1fr} /* summary under list sooner on tablets */
  .aside{min-width:auto}
  .row{gap:10px;padding:10px;grid-template-columns:1.2fr 160px 112px 112px 36px}
  .qty input{width:52px;height:34px}
  .qty button{width:34px;height:34px}
}

/* Small tablet / large phones (<=820px) */
@media (max-width: 820px){
  body{overflow-x:hidden}
  .navbar{top:8px;right:8px}
  .back-btn{top:8px;left:8px;width:38px;height:38px;border-radius:10px}
  .nav-links{gap:8px;padding:6px 8px;max-width:calc(100vw - 80px)}
  .nav-links li:first-child a{width:52px;height:38px;border-radius:12px}
  .nav-links li:last-child a{width:38px;height:38px}
  #cart-count{min-width:16px;height:16px;font-size:10px}

  .row{
    gap:8px;padding:10px;
    grid-template-columns:1fr 140px 100px 100px 34px;
  }
  .thumb{width:52px;height:52px;border-radius:9px}
  .qty input{width:50px;height:34px}
  .qty button,.rm{width:34px;height:34px}
  .actions{flex-wrap:wrap}
}

/* Phones (<=600px) */
@media (max-width: 600px){
  .cart-wrap{margin:20px auto;padding:0 10px}
  .card{padding:12px;border-radius:14px}
  .prod{gap:8px}
  .thumb{width:48px;height:48px;border-radius:8px}

  /* Keep 5 columns but tighten widths for small screens */
  .row{
    padding:8px;
    grid-template-columns:1fr 118px 92px 86px 32px;
  }

  .qty input{width:46px;height:32px;font-size:14px}
  .qty button,.rm{width:32px;height:32px}
  .btn{padding:9px 12px}
  .aside{min-width:auto}
  .summary .line{gap:8px}
}

/* Small phones (<=420px) */
@media (max-width: 420px){
  .navbar{top:8px;right:8px}
  .nav-links{gap:6px;padding:5px 6px}
  .nav-links li a i{font-size:16px}
  .nav-links li:first-child a{width:48px;height:36px}
  .nav-links li:last-child a{width:36px;height:36px}
  .back-btn{width:36px;height:36px}

  .row{
    padding:8px;
    grid-template-columns:1fr 104px 82px 74px 30px;
    gap:8px;
  }
  .thumb{width:44px;height:44px}
  .qty input{width:44px;height:30px}
  .qty button,.rm{width:30px;height:30px}
  .link{padding-left:4px}
  .form-narrow{max-width:100%;padding:0 4px}
  .form-actions{justify-content:space-between}
}

/* Extra-small phones (<=360px) */
@media (max-width: 360px){
  .row{
    grid-template-columns:1fr 96px 74px 68px 28px;
  }
  .qty input{width:42px}
  .thumb{width:42px;height:42px}
  #cart-count{top:-5px;right:-5px}
}
/* ============================================
   Mobile reflow so all details are visible
   (no markup changes needed)
   ============================================ */

/* Phones (<=560px): 2-line row layout with areas */
@media (max-width: 560px){
  .row{
    padding:10px;
    gap:10px;
    /* two columns, three rows */
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prod  total"   /* top: product + line total (bold) */
      "qty   price"   /* bottom: quantity controls + unit price */
      "rm    rm";     /* remove button right-aligned full width */
  }

  /* map children to areas */
  .row > .prod{ grid-area: prod; min-width:0; }    /* product cell (image + name) */
  .row > .qty { grid-area: qty; }
  .row > :nth-child(3){        /* unit price cell */
    grid-area: price;
    justify-self: end;
    text-align: end;
    white-space: nowrap;
  }
  .row > :nth-child(4){        /* line total cell */
    grid-area: total;
    justify-self: end;
    text-align: end;
    white-space: nowrap;
    font-weight: 800;
  }
  .row > .rm{
    grid-area: rm;
    justify-self: end;
  }

  /* compact controls/thumbs so everything fits comfortably */
  .thumb{ width:46px; height:46px; border-radius:8px; }
  .qty input{ width:46px; height:32px; font-size:14px; }
  .qty button, .rm{ width:32px; height:32px; }
}

/* Extra-small phones (<=400px): a touch tighter */
@media (max-width: 400px){
  .row{
    gap:8px;
  }
  .thumb{ width:42px; height:42px; }
  .qty input{ width:42px; }
  .qty button, .rm{ width:30px; height:30px; }
}