/* cart.css  */

:root{
  --cart-bg: #fff;
  --cart-ink: #111;
  --cart-muted:#6b7280;
  --cart-brand: var(--brand, #2c6e91);
  --cart-shadow: 0 24px 48px rgba(0,0,0,.18);
  --cart-radius: 18px;
}

.cart-btn{
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .5rem;
  border: 0;
  background: #fff;
  color: var(--cart-ink);
  padding: .55rem .8rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  cursor: pointer;
}
.cart-btn .cart-ico{font-size: 1.1rem; line-height: 1;}
.cart-badge{
  position: absolute; top: -6px; right: -6px;
  background: var(--cart-brand); color:#fff;
  font-weight: 800; font-size: .75rem; line-height: 1;
  padding: .3rem .42rem; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transition: .18s ease;
}

#cartDrawer{ position: fixed; inset: 0; pointer-events: none; z-index: 1200; }
#cartDrawer.open{ pointer-events: auto; }
#cartDrawer .cart-overlay{
  position:absolute; inset:0; background: rgba(17,24,39,.45);
  opacity:0; transition: opacity .22s ease;
}
#cartDrawer.open .cart-overlay{ opacity: 1; }

.cart-panel{
  position:absolute; right:0; top:0; bottom:0;
  width: min(460px, 92vw);
  background: var(--cart-bg); color: var(--cart-ink);
  border-radius: 16px 0 0 16px;
  box-shadow: var(--cart-shadow);
  transform: translateX(110%);
  transition: transform .26s cubic-bezier(.22,.98,.3,1.02);
  display: grid; grid-template-rows: auto 1fr auto;
}
#cartDrawer.open .cart-panel{ transform: translateX(0); }

.cart-head{
  padding: 16px 18px; display:flex; align-items:center; justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cart-head h3{ margin:0; font-size: 1.1rem; }
.cart-x{ border:0; background:transparent; font-size: 1.1rem; cursor:pointer; }

.cart-body{ padding: 12px 16px; overflow: auto; }
.cart-empty{ text-align:center; color: var(--cart-muted); padding: 28px 12px; }
.cart-empty .big{ font-size: 40px; margin-bottom: 8px; }

.cart-item{
  display:grid; grid-template-columns: 92px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.06);
}
.ci-thumb{
  width: 92px; height: 92px; object-fit: cover; border-radius: 12px;
  background: #f4f6fb;
}
.ci-main{ display:flex; flex-direction: column; gap: 8px; }
.ci-top{ display:flex; justify-content: space-between; gap: 10px; }
.ci-title{ font-weight: 800; }
.ci-variant{ color: var(--cart-muted); font-size: .9rem; margin-top: 2px; }
.ci-remove{
  border:0; background:transparent; color: #ef4444; cursor:pointer; font-weight:700;
}

.ci-bot{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.qty{ display:inline-flex; align-items:center; border:1px solid #e5e7eb; border-radius: 999px; }
.qty .q{ width: 34px; height: 34px; border:0; background:#fff; cursor:pointer; font-weight:800; }
.qty .qv{
  width: 48px; height: 34px; border:0; border-left:1px solid #e5e7eb; border-right:1px solid #e5e7eb;
  text-align:center; font-weight:800;
}
.ci-price{ font-weight: 800; }

.cart-foot{
  padding: 14px 16px; border-top: 1px solid rgba(0,0,0,.06);
}
.row{ display:flex; align-items:center; gap: 10px; }
.row.between{ justify-content: space-between; }
.row.gap{ gap: 8px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 12px; padding: .7rem 1rem; font-weight: 800; cursor:pointer; text-decoration: none;
  border: 2px solid transparent;
}
.btn.primary{ background: var(--cart-brand); color:#fff; }
.btn.ghost{ background: #fff; color: var(--cart-ink); border-color: #e5e7eb; }
.btn.link{ background: #fff; border:1px solid #e5e7eb; }
.btn:hover{ filter: brightness(.98); }

.muted{ color: var(--cart-muted); }
.tiny{ font-size: .85rem; }

/* 1) chặn scroll ngang */
.cart-panel{ 
  overflow: hidden;        /* NEW */
}

.cart-body{
  overflow-y: auto;        /* thay vì overflow: auto;  */
  overflow-x: hidden;      /* NEW */
}

/* 2) cho cột content được co, tránh đẩy tràn ngang */
.ci-main{
  display:flex; 
  flex-direction: column; 
  gap: 8px; 
  min-width: 0;            /* NEW — quan trọng nhất */
}

/* 3) hàng tiêu đề: phần wrapper của title được co */
.ci-top > div:first-child{
  min-width: 0;            /* NEW */
}

/* 4) title ngắt dòng khi hẹp */
.ci-title{
  font-weight: 800;
  word-break: break-word;  /* NEW (an toàn) */
}


/* Ẩn nếu còn render ở đâu đó */
#cartDrawer .ci-variant,
#cartDrawer .qty { display: none !important; }

/* Nút Customize */
#cartDrawer .ci-actions { margin-top: .35rem; }
#cartDrawer .btn-customize{
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: .5rem .9rem;
  font-weight: 700;
  line-height: 1;
  background: #6646cf;
  color: #fff;
  box-shadow: 0 4px 10px rgba(102,70,207,.18);
  cursor: pointer;
}
#cartDrawer .btn-customize:hover { filter: brightness(1.03); }
#cartDrawer .btn-customize:active { transform: translateY(1px); }


/* Badge bump (nảy) */
@keyframes cart-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-badge.bump { animation: cart-bump .45s ease; }

/* Ping nút giỏ */
.cart-btn { position: relative; overflow: visible; }
.cart-btn.ping::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 999px; border: 2px solid rgba(102,70,207,.45);
  opacity: 0; animation: cart-ping .5s ease;
}
@keyframes cart-ping {
  0% { transform: scale(.8); opacity: .8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Cho mượt */
.fly-item { will-change: transform, opacity; }


/* ===== Floating Cart FAB ===== */
#cartFloat{
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 1201;
  display: none;                 /* show khi cuộn */
  align-items: center; justify-content: center;
  gap: .5rem;
  border: 0; border-radius: 999px;
  padding: .7rem .9rem;
  background: #fff; color: var(--cart-ink);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
}
#cartFloat .cart-badge{
  position: absolute; top: -6px; right: -6px;
  background: var(--cart-brand); color: #fff;
  font-weight: 800; font-size: .75rem; line-height: 1;
  padding: .3rem .42rem; border-radius: 999px;
}

/* Bump + Ping đã có – dùng lại cho FAB */
.cart-badge.bump { animation: cart-bump .45s ease; }
@keyframes cart-bump{
  0%{transform:scale(1)} 30%{transform:scale(1.25)}
  60%{transform:scale(.9)} 100%{transform:scale(1)}
}
#cartFloat.ping::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  border:2px solid rgba(102,70,207,.45); opacity:0;
  animation: cart-ping .5s ease;
}
@keyframes cart-ping{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.3);opacity:0}}

.fly-item{ will-change: transform, opacity; }  /* ảnh bay */



/* cho hiện trạng thái Ready/Needs customization */
#cartDrawer .ci-variant { display:block !important; }
#cartDrawer .ci-variant.ok   { color:#059669; }  /* xanh */
#cartDrawer .ci-variant.warn { color:#d97706; }  /* cam */
#cartCheckout[disabled] { cursor:not-allowed; }


/* Subtitle: label đậm, value thường */
.muted-sub{font-size:.95rem;color:var(--muted);margin-top:2px;display:flex;gap:.35rem;flex-wrap:wrap}
.muted-sub .sub-block{display:inline-flex;gap:.35rem;align-items:center}
.muted-sub .sub-label{font-weight:800;color:#374151}  /* "Book size", "Page", "Your Book" */
.muted-sub .value{font-weight:400;color:inherit}      /* số liệu hiển thị bình thường */
.muted-dot::before{content:"•";margin:0 .35rem;color:#9ca3af}

/* Chip dropdown nhỏ gọn – KHÔNG đậm */
.chip-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font:inherit;font-weight:400;          /* <- không đậm */
  color:#374151;background:transparent;
  border:1px solid #e5e7eb;border-radius:999px;
  padding:.2rem 1.4rem .2rem .6rem;line-height:1.2;cursor:pointer;
  transition:.15s ease;position:relative;
}
.chip-select:hover{background:#f9fafb}
.chip-select:focus{outline:none;box-shadow:var(--ring)}
.chip-select::after{content:"";position:absolute;right:.55rem;top:50%;
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #6b7280;transform:translateY(-40%);}




  /* Item có checkbox overlay */
.cart-item{ position:relative; grid-template-columns:92px 1fr; }

/* Ẩn chữ Remove cũ nếu còn */
#cartDrawer .ci-remove{ display:none !important; }

/* Checkbox chọn xoá – đặt ở góc trên phải của row */
.ci-select{
  position:absolute; top:8px; right:10px; z-index:2;
}
.ci-select input{
  appearance:none; width:18px; height:18px; border:2px solid #d1d5db;
  border-radius:6px; background:#fff; cursor:pointer; transition:.15s ease;
}
.ci-select input:hover{ border-color:#9ca3af; }
.ci-select input:checked{
  background:#ef4444; border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
.ci-select input:checked::after{
  content:""; position:absolute; left:4px; top:0px; width:5px; height:10px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg);
}

/* Nút Remove to (đỏ) */
.btn.danger{ background:#ef4444; color:#fff; }
.btn.danger[disabled]{ opacity:.5; cursor:not-allowed; }

/* Mini note trong panel (nếu chưa có) */
.mini-note{
  margin-top:10px; font-weight:700; font-size:.9rem; color:#065f46;
  background:#ecfdf5; border:1px solid #a7f3d0; padding:8px 10px; border-radius:10px;
  opacity:0; transform:translateY(6px); transition:.2s ease;
}
.mini-note.show{ opacity:1; transform:translateY(0); }