/* public/assets/css/cart.css */

:root{
  --red:#ff0000;
  --orange:#ff6a00;
  --text:#111;
  --muted:#666;
  --line:#e9e9e9;
  --soft:#fafafa;
  --white:#fff;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
}

.cart-page{ padding: 16px 0 22px; }
.cart-shell{ max-width: 1100px; margin: 0 auto; padding: 0 14px; }

/* Top */
.cart-top{
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content: space-between;
}

.cart-titlewrap{ min-width: 0; }

.cart-titlewrap .title{
  font-size: 18px;
  font-weight: 700;     /* ✅ less bold */
  line-height:1.2;
}

.cart-titlewrap .sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;     /* ✅ less bold */
}

/* BACK button */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  background: var(--red);
  color: #fff;
  font-weight: 600;     /* ✅ less bold */
  white-space:nowrap;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.back-btn:hover{ opacity:.92; }

/* Empty state */
.empty{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--white);
}
.empty-title{ font-weight: 700; font-size: 16px; }  /* ✅ less bold */
.empty-text{
  margin-top: 6px;
  color: var(--muted);
  line-height:1.55;
  font-size: 13px;
  font-weight: 400;
}
.empty .btn{ margin-top: 14px; }

/* Grid layout */
.cart-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items:start;
}

/* Items */
.items{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: var(--white);
}

.items-head{
  display:grid;
  grid-template-columns: 1.7fr .55fr .65fr .7fr .55fr;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 600;     /* ✅ less bold */
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing:.35px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.h-total{ text-align:right; }
.h-price,.h-qty,.h-act{ text-align:center; }

.row{
  display:grid;
  grid-template-columns: 1.7fr .55fr .65fr .7fr .55fr;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  align-items:center;
}
.row:last-child{ border-bottom:0; }

.cell.price, .cell.qty, .cell.act{ text-align:center; }
.cell.total{ text-align:right; font-weight: 600; } /* ✅ less bold */

.cell.item{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width:0;
}

.thumb{
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--white);
  flex: 0 0 auto;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.namewrap{ min-width:0; }

.name{
  font-weight: 600;     /* ✅ less bold */
  font-size: 13.5px;
  line-height:1.2;
  word-break: break-word;
}

.mini{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

/* Qty */
.qtybox{
  display:flex;
  justify-content:center;
}
.qty input{
  width: 92px;
  padding: 10px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  outline:none;
  font-size: 14px;
  text-align:center;
  background:#fff;
}
.qty input:focus{
  border-color: rgba(255,106,0,.55);
}

.hint{
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
}

/* Summary */
.summary{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--white);
  height: fit-content;
}

.sum-title{
  font-weight: 700;     /* ✅ less bold */
  font-size: 15px;
  margin-bottom: 10px;
}

.sum-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.sum-line b{ font-weight: 600; }  /* ✅ less bold */
.sum-line .muted{ color: var(--muted); font-weight: 400; }

.sum-divider{
  height: 1px;
  background: var(--line);
  margin: 10px 0;
}

.sum-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0 12px;
  font-size: 14px;
}
.sum-total b{ font-size: 18px; font-weight: 700; }

.sum-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.sum-note{
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height:1.45;
  font-weight: 400;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;   /* ✅ less bold */
  text-decoration:none;
  cursor:pointer;
  border: 1px solid transparent;
  user-select:none;
}

.btn-primary{
  background: var(--red);
  color:#fff;
}
.btn-primary:hover{ opacity:.92; }

.btn-outline{
  background:#fff;
  color: var(--text);
  border-color: var(--line);
}
.btn-outline:hover{
  border-color: var(--orange);
  color: var(--orange);
}
.btn-outline.strong{
  border-color: rgba(255,106,0,.35);
}

/* Danger remove */
.btn-danger{
  background: #fff;
  color: var(--red);
  border: 1px solid rgba(255,0,0,.35);
}
.btn-danger:hover{
  border-color: var(--red);
  background: rgba(255,0,0,.06);
}

/* Small button */
.btn-sm{
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 600;     /* ✅ less bold */
  font-size: 12.5px;
  white-space: nowrap;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: green;
  color:#fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;     /* ✅ less bold */
  opacity: 0;
  pointer-events:none;
  transition: .22s;
  z-index: 9999;
  max-width: 92vw;
}
.toast.show{
  opacity: 1;
  bottom: 28px;
}

/* Responsive */
@media (max-width: 980px){
  .cart-grid{ grid-template-columns: 1fr; }
}

/* Header stack on small screens + smaller sizes */
@media (max-width: 640px){
  .cart-top{
    flex-direction: column;
    align-items: flex-start;
  }
  .back-btn{
    align-self: flex-end;
    padding: 9px 12px;
    font-size: 12.5px;
  }

  .cart-titlewrap .title{ font-size: 16px; }
  .cart-titlewrap .sub{ font-size: 12px; }
}

@media (max-width: 560px){
  .items-head{ display:none; }

  .row{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cell.price, .cell.qty, .cell.total, .cell.act{ text-align:left; }

  .cell.price::before{
    content:"Price: ";
    color: var(--muted);
    font-weight: 600; /* ✅ less bold */
  }
  .cell.total::before{
    content:"Line Total: ";
    color: var(--muted);
    font-weight: 600; /* ✅ less bold */
  }

  .qtybox{ justify-content:flex-start; }
  .qty input{
    width: 100%;
    text-align:left;
  }

  .btn-sm{ width: 100%; }
}