/* ASHES — basket drawer
   Deploy to assets/css/basket.css and link it wherever basket.js is loaded.
   Every value comes from tokens already defined in theme.css. */

.bk-root{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.bk-root.is-open{ pointer-events:auto; }
body.bk-locked{ overflow:hidden; }

.bk-scrim{
  position:absolute; inset:0;
  background:rgba(4,2,2,.68);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .32s var(--ease);
}
.bk-root.is-open .bk-scrim{ opacity:1; }

.bk-drawer{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 100%);
  display:flex; flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:var(--shadow);
  transform:translateX(100%);
  transition:transform .42s var(--ease);
}
.bk-root.is-open .bk-drawer{ transform:none; }

.bk-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:20px 22px;
  border-bottom:1px solid var(--line);
}
.bk-head h2{
  font-family:var(--font-display);
  font-size:1.15rem; margin:0; color:var(--fg);
}
.bk-x{
  background:none; border:0; cursor:pointer;
  font-size:1.6rem; line-height:1;
  color:var(--fg-3); padding:0 4px;
  transition:color .25s var(--ease);
}
.bk-x:hover{ color:var(--fg); }

.bk-items{ flex:1 1 auto; overflow-y:auto; padding:14px 22px; }
.bk-empty{ color:var(--fg-3); font-size:.94rem; margin:22px 0; text-align:center; }

/* --- discount code ---------------------------------------------------
   The field is hidden by JS once a code is on, so the two states never
   show together. */
.bk-coupon{ display:flex; gap:8px; margin-bottom:14px; }
.bk-coupon-input{
  flex:1 1 auto; min-width:0;
  padding:9px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--fg);
  font-size:.9rem;
}
.bk-coupon-input::placeholder{ color:var(--fg-3); }
.bk-coupon-input:focus-visible{ outline:none; border-color:var(--ac); }
.bk-coupon-go{
  flex:0 0 auto;
  padding:9px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:none; color:var(--fg-2);
  font-size:.85rem; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.bk-coupon-go:hover{ color:var(--ac); border-color:var(--ac); }
.bk-coupon-on{ align-items:center; }
.bk-coupon-x{
  background:none; border:0; cursor:pointer;
  color:var(--fg-3); font-size:1.05rem; line-height:1; padding:0 2px;
}
.bk-coupon-x:hover{ color:var(--ac); }
.bk-coupon-note{ font-size:.78rem; }

/* Shown when a package the player added has since been removed or hidden in
   Tebex. Deliberately NOT styled as an error -- nothing has gone wrong for
   them, the item simply stopped existing, and an alarming red block over a
   sold-out coin pack reads as a broken site. */
.bk-gone{
  margin:0 0 14px; padding:10px 12px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  background:rgba(249,115,22,.07);
  color:var(--fg-2); font-size:.86rem; line-height:1.45;
}

.bk-item{
  display:grid;
  grid-template-columns:44px 1fr auto auto;
  align-items:center; gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.bk-item:last-child{ border-bottom:0; }

.bk-thumb{
  width:44px; height:44px; border-radius:var(--r-sm);
  object-fit:cover; display:block;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.bk-item-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bk-item-name{
  color:var(--fg); font-size:.94rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bk-item-qty,
.bk-item-sub{ font-size:.76rem; color:var(--fg-3); }
.bk-item-sub{ text-transform:uppercase; letter-spacing:.07em; }
.bk-item-price{ color:var(--fg-2); font-size:.92rem; white-space:nowrap; }

.bk-rm{
  background:none; border:0; cursor:pointer;
  color:var(--fg-3); font-size:1.15rem; line-height:1; padding:2px 4px;
  transition:color .25s var(--ease);
}
.bk-rm:hover{ color:var(--ac); }

.bk-foot{ padding:18px 22px 22px; border-top:1px solid var(--line); }
.bk-sums{ margin-bottom:14px; }
.bk-row{
  display:flex; justify-content:space-between;
  font-size:.92rem; color:var(--fg-2); padding:3px 0;
}
.bk-row-dim{ color:var(--fg-3); }
.bk-row-total{
  color:var(--fg); font-weight:600; font-size:1.02rem;
  margin-top:7px; padding-top:9px;
  border-top:1px solid var(--line);
}
.bk-note{
  margin:10px 0 0; text-align:center;
  font-size:.78rem; line-height:1.45; color:var(--fg-3);
}

/* header button */
.bk-btn{ position:relative; }
.bk-count{
  display:inline-grid; place-items:center;
  min-width:19px; height:19px; padding:0 5px; margin-left:6px;
  border-radius:999px;
  background:var(--ac); color:#1a0c04;
  font-size:.72rem; font-weight:700; line-height:1;
}
.bk-count.is-empty{ display:none; }

@media (prefers-reduced-motion: reduce){
  .bk-scrim, .bk-drawer{ transition:none; }
}

/* Touch sizing. The drawer goes full width on a phone (width:min(420px,100%))
   and is otherwise fine there, but its two controls are mouse-sized: the close
   button measures 20x26 and each remove button about 22x22. The negative
   margins keep the larger hit areas from changing the layout around them. */
@media (pointer: coarse){
  .bk-x{
    display:inline-grid; place-items:center;
    width:40px; height:40px; padding:0; margin:-7px -8px -7px 0;
  }
  .bk-rm{
    display:inline-grid; place-items:center;
    width:38px; height:38px; padding:0; margin:0 -6px 0 0;
  }
}

/* The tax note is a sentence, not a value: without this it stretches across the
   row like a figure that failed to load. */
.bk-tax-note{
  justify-content:flex-start;
  font-size:.82rem;
  padding-top:6px;
}