/* /css/cart.css
   Dark gray + light gold cart UI
   Responsive. Touch-friendly. No HTML changes required. */

/* palette (fallbacks if not defined in style.css) */
:root{
  --gold: var(--gold, #d4af37);
  --gold-2: #e2c67a;
  --black: var(--black, #0b0c0d);
  --charcoal: var(--charcoal, #121315);
  --surface: #141416;
  --surface-2: #1a1b1e;
  --border: #2a2b2e;
  --ink: var(--ivory, #f6f2e9);
  --muted: #cfcaba;
  --shadow: 0 16px 34px rgba(0,0,0,.35);
  --radius: 12px;
  --gap: 16px;
}

/* section */
.cart{
  padding: clamp(28px, 5vw, 56px) 0;
  color: var(--ink);
}

/* table base */
.cart-table{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
}

/* header */
.cart-table thead th{
  font-size: .9rem;
  font-weight: 700;
  text-align: left;
  padding: 14px 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  letter-spacing: .3px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

/* rows */
.cart-table tbody td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.cart-table tbody tr{
  transition: background .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .cart-table tbody tr:hover{
    background: rgba(255,255,255,.02);
  }
}

/* product cell: image + name */
.cart-table td a{
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}
.cart-table td a:hover{ color: var(--gold); }

/* 3D thumb / image */
.cart-thumb-3d,
.cart-table td img{
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: block;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.04);
}
.cart-thumb-3d canvas{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* price and line total */
.cell-price,
.line{
  font-weight: 700;
  color: var(--gold);
}

/* quantity control */
.qty{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: var(--surface-2);
}

.qminus,
.qplus{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  user-select: none;
}
.qminus:hover,
.qplus:hover{
  border-color: rgba(212,175,55,.25);
  background: rgba(212,175,55,.08);
  transform: translateY(-2px);
}

.qval{
  width: 56px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  -moz-appearance: textfield;
}
.qval:focus{
  outline: none;
  border-color: rgba(212,175,55,.8);
  box-shadow: 0 8px 18px rgba(212,175,55,.06);
}
.qval::-webkit-outer-spin-button,
.qval::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* remove button */
.qremove,
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #3b3b3d;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
  min-width: 110px;
}
.qremove:hover{
  border-color: rgba(212,175,55,.25);
  color: var(--gold);
  transform: translateY(-2px);
}

/* totals + coupon row */
.cart-bottom{
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* coupon */
.coupon-box{
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 420px;
  min-width: 260px;
  background: transparent;
}
.coupon-box input[type="text"]{
  flex: 1 1 auto;
  min-width: 180px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.coupon-box input[type="text"]::placeholder{ color: rgba(207,202,186,.55); }
.coupon-box input[type="text"]:focus{
  outline: none;
  border-color: rgba(212,175,55,.9);
  box-shadow: 0 8px 18px rgba(212,175,55,.06);
}

#applyCoupon,
#removeCoupon{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  min-width: 120px;
  white-space: nowrap;
}
#applyCoupon{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #07101a;
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(212,175,55,.20);
}
#applyCoupon:hover{ transform: translateY(-2px); filter: brightness(.98); }
#removeCoupon{
  background: transparent;
  color: var(--gold);
  border-color: rgba(212,175,55,.28);
}
#removeCoupon:hover{ background: rgba(212,175,55,.08); }

.coupon-msg{
  color: var(--muted);
  font-size: .95rem;
}

/* totals */
.totals-box{
  background: var(--surface);
  border: 1px solid rgba(212,175,55,.12);
  border-radius: var(--radius);
  padding: 16px 18px;
  min-width: 280px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  color: var(--ink);
}
.totals-box div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}
.totals-box strong{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.05rem;
  color: var(--ink);
}
.totals-box strong span{ color: var(--gold); }

/* totals actions */
.totals-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#clearCart{
  border-color: #3b3b3d;
  color: var(--ink);
}
#clearCart:hover{ border-color: rgba(212,175,55,.25); color: var(--gold); }
#checkoutBtn{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #07101a;
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(212,175,55,.20);
}
#checkoutBtn:hover{ transform: translateY(-2px); filter: brightness(.98); }

/* accessibility */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* responsive: make table usable on narrow screens without HTML changes */
@media (max-width: 860px){
  .cart-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .cart-table thead{ display: table-header-group; }
  .cart-table tbody{ display: table-row-group; }
  .cart-table tr{ display: table-row; }
  .cart-table th, .cart-table td{ white-space: nowrap; }
}

@media (max-width: 640px){
  .coupon-box{ flex: 1 1 100%; }
  .totals-box{ flex: 1 1 100%; min-width: 100%; }
  .totals-actions{ justify-content: stretch; }
  .totals-actions .btn,
  #checkoutBtn,
  #clearCart{ flex: 1 1 auto; min-width: 46%; }
}

/* RTL tweaks */
[dir="rtl"] .cart-table thead th,
[dir="rtl"] .cart-table tbody td{
  text-align: right;
}
[dir="rtl"] .totals-box div,
[dir="rtl"] .totals-box strong{
  flex-direction: row-reverse;
}

/* sweetalert buttons visual harmony */
.swal2-styled.swal2-confirm{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  color: #07101a !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(212,175,55,.20) !important;
}
.swal2-styled.swal2-cancel{
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid #3b3b3d !important;
  border-radius: 999px !important;
}


/* Receipt look */
.receipt-box{
  max-width:420px;margin-left:auto;background:#151618;
  border:1px dashed rgba(212,175,55,.35);border-radius:12px;padding:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.25)
}
.r-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.r-brand{font-weight:800;color:var(--gold)}
.r-meta{color:#cfcaba;font-size:.9rem}
.r-rule{height:1px;background:rgba(255,255,255,.06);margin:8px 0}
.r-rule.dotted{background:repeating-linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 6px, transparent 6px, transparent 12px)}
.r-lines{display:grid;gap:6px;margin:8px 0 10px}
.r-line{display:flex;justify-content:space-between;color:#ddd6c6}
.r-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.r-row span{flex:1;color:#e6e0d1;position:relative}
.r-row span::after{content:"";display:block;border-bottom:1px dotted rgba(255,255,255,.25);position:absolute;left:8px;right:8px;top:55%}
.r-row strong{min-width:140px;text-align:right;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.r-row.total strong{font-size:1.05rem;color:var(--gold)}
.r-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}