/* =============================================
   SKY BETS — BETSLIP DRAWER
   Black · White · Blue
   ============================================= */

.betslip-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.82);
  z-index:300; opacity:0; pointer-events:none;
  transition:opacity 0.28s ease; backdrop-filter:blur(4px);
}
.betslip-overlay.open { opacity:1; pointer-events:all; }

.betslip-drawer {
  position:fixed; bottom:0; left:0; right:0; z-index:310;
  background:rgba(14,14,14,0.92); border-top:1px solid var(--glass-border-bright); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92vh; display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
  box-shadow:0 -8px 48px rgba(0,0,0,0.9);
}
.betslip-drawer.open { transform:translateY(0); }

.betslip-drawer__handle {
  display:flex; justify-content:center; padding:10px 0 0; flex-shrink:0; cursor:grab;
}
.betslip-drawer__handle::after {
  content:''; width:36px; height:4px;
  background:var(--border-md); border-radius:var(--r-pill);
}

.betslip-drawer__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px 10px; flex-shrink:0; border-bottom:1px solid var(--border);
}
.betslip-drawer__title {
  font-size:0.95rem; font-weight:900; color:var(--t1);
  display:flex; align-items:center; gap:8px;
}
.betslip-drawer__title i { color:var(--accent-light); font-size:0.9rem; }
.betslip-sel-count {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  font-size:0.6rem; font-weight:900; width:18px; height:18px; border-radius:50%;
}
.betslip-header-right { display:flex; align-items:center; gap:10px; }
.betslip-clear-btn {
  font-size:0.72rem; font-weight:700; color:var(--live);
  background:rgba(239,68,68,0.07); border:1px solid rgba(239,68,68,0.18);
  border-radius:var(--r-pill); padding:4px 10px; font-family:inherit; cursor:pointer; transition:background var(--t);
}
.betslip-clear-btn:hover { background:rgba(239,68,68,0.14); }
.betslip-close-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border-md); border-radius:50%;
  color:var(--t2); font-size:0.78rem; cursor:pointer; transition:background var(--t);
}
.betslip-close-btn:hover { background:var(--surface-3); color:var(--t1); }

.betslip-type-tabs { display:flex; padding:10px 18px 0; gap:6px; flex-shrink:0; }
.betslip-type-tab {
  flex:1; padding:8px 6px; border-radius:var(--r-md);
  font-size:0.72rem; font-weight:700; color:var(--t3);
  background:var(--surface-2); border:1px solid var(--border);
  font-family:inherit; cursor:pointer; text-align:center; transition:all var(--t);
}
.betslip-type-tab:hover { color:var(--t2); }
.betslip-type-tab--active { background:var(--glass-bg-md); border-color:var(--glass-border-bright); color:var(--accent-light); box-shadow:0 0 16px rgba(37,99,235,0.20); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); }

.betslip-selections {
  flex:1; overflow-y:auto; padding:10px 0;
  scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent;
}
.betslip-selections::-webkit-scrollbar { width:3px; }
.betslip-selections::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:3px; }

.betslip-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:40px 24px; text-align:center;
}
.betslip-empty__icon {
  width:56px; height:56px; background:var(--surface-2);
  border:1px solid var(--border-md); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--t3);
}
.betslip-empty__title { font-size:0.9rem; font-weight:800; color:var(--t1); }
.betslip-empty__sub   { font-size:0.72rem; color:var(--t3); line-height:1.5; }

.bs-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border);
  position:relative; animation:bsItemIn 0.2s ease;
}
@keyframes bsItemIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }
.bs-item:last-child { border-bottom:none; }
.bs-item__sport-icon {
  width:30px; height:30px; background:var(--surface-3); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-light); font-size:0.72rem; flex-shrink:0; margin-top:2px;
}
.bs-item__info { flex:1; min-width:0; }
.bs-item__market    { font-size:0.62rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
.bs-item__selection { font-size:0.85rem; font-weight:800; color:var(--t1); margin-bottom:2px; }
.bs-item__match     { font-size:0.68rem; font-weight:600; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-item__odds      { font-size:0.88rem; font-weight:900; color:var(--accent-light); flex-shrink:0; margin-top:2px; }
.bs-item__remove {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  background:none; color:var(--t3); font-size:0.72rem; border-radius:50%;
  cursor:pointer; transition:all var(--t); margin-top:2px; flex-shrink:0;
}
.bs-item__remove:hover { background:rgba(239,68,68,0.1); color:var(--live); }

.bs-item__stake-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.bs-stake-label { font-size:0.65rem; font-weight:700; color:var(--t3); white-space:nowrap; }
.bs-stake-wrap  { position:relative; flex:1; }
.bs-stake-prefix { position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:0.78rem; font-weight:800; color:var(--t2); pointer-events:none; }
.bs-stake-input {
  flex:1; width:100%; background:var(--surface-3); border:1.5px solid var(--border-md);
  border-radius:var(--r-md); padding:7px 10px 7px 22px;
  font-size:0.8rem; font-weight:800; color:var(--t1); font-family:inherit; outline:none; transition:border-color var(--t);
}
.bs-stake-input:focus { border-color:var(--accent); }
.bs-item__win-est { font-size:0.65rem; font-weight:700; color:var(--green); white-space:nowrap; flex-shrink:0; }

.betslip-footer {
  padding:14px 18px; border-top:1px solid var(--border-md);
  background:var(--surface-2); flex-shrink:0; display:flex; flex-direction:column; gap:10px;
}
.bs-summary { display:flex; flex-direction:column; gap:7px; }
.bs-summary-row { display:flex; align-items:center; justify-content:space-between; }
.bs-summary-label { font-size:0.72rem; font-weight:700; color:var(--t3); }
.bs-summary-val   { font-size:0.78rem; font-weight:800; color:var(--t1); }
.bs-summary-val--accent { color:var(--accent-light); }
.bs-summary-val--green  { color:var(--green); font-size:0.9rem; }
.bs-divider { height:1px; background:var(--border); margin:2px 0; }

.bs-global-stake { display:flex; align-items:center; gap:10px; }
.bs-global-stake-label { font-size:0.72rem; font-weight:700; color:var(--t2); white-space:nowrap; }
.bs-global-stake-wrap  { position:relative; flex:1; }
.bs-global-prefix { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:0.85rem; font-weight:800; color:var(--t2); pointer-events:none; }
.bs-global-input {
  width:100%; background:var(--surface-3); border:1.5px solid var(--border-md);
  border-radius:var(--r-md); padding:10px 12px 10px 26px;
  font-size:0.88rem; font-weight:900; color:var(--t1); font-family:inherit; outline:none; transition:border-color var(--t);
}
.bs-global-input:focus { border-color:var(--accent); }

.bs-quick-stakes { display:flex; gap:6px; flex-wrap:wrap; }
.bs-quick-stake {
  padding:5px 12px; background:var(--surface-3); border:1px solid var(--border-md);
  border-radius:var(--r-pill); font-size:0.68rem; font-weight:800; color:var(--t2);
  cursor:pointer; font-family:inherit; transition:all var(--t);
}
.bs-quick-stake:hover { background:var(--glass-bg-md); border-color:var(--glass-border-bright); color:var(--accent-light); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); }

.bs-place-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--accent); color:#fff; border:none;
  border-radius:var(--r-xl); font-size:0.88rem; font-weight:800; font-family:inherit;
  cursor:pointer; box-shadow:0 4px 18px var(--accent-glow);
  transition:opacity var(--t), transform var(--t);
}
.bs-place-btn:hover  { opacity:0.88; transform:translateY(-1px); }
.bs-place-btn:active { transform:translateY(0); }
.bs-place-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }
.bs-place-btn__left  { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.bs-place-btn__label { font-size:0.65rem; font-weight:700; opacity:0.75; text-transform:uppercase; letter-spacing:0.05em; }
.bs-place-btn__text  { font-size:0.92rem; font-weight:900; }
.bs-place-btn__right { font-size:0.9rem; font-weight:900; }

.bs-bonus-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2);
  border-radius:var(--r-pill); padding:5px 12px;
  font-size:0.68rem; font-weight:700; color:var(--green);
}
.bs-bonus-tag i { font-size:0.62rem; }

/* Success icon (shared with auth) */
.success-icon {
  width:68px; height:68px;
  background:rgba(34,197,94,0.08);
  border:2px solid rgba(34,197,94,0.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--green); font-size:1.6rem;
  animation:pop 0.4s ease;
}
@keyframes pop {
  0%   { transform:scale(0.5); opacity:0; }
  70%  { transform:scale(1.1); }
  100% { transform:scale(1);   opacity:1; }
}

/* Booking code chip (shown after a bet is placed) */
.booking-code-chip {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:var(--surface-2); border:1px dashed var(--border-md);
  border-radius:var(--r-lg); padding:10px 10px 10px 16px;
}
.booking-code-chip__left { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.booking-code-chip__label {
  font-size:0.58rem; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.06em;
}
.booking-code-chip__value {
  font-size:1rem; font-weight:900; color:var(--t1); letter-spacing:0.08em;
}
.booking-code-chip__copy {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-mid)); color:#fff; font-size:0.75rem;
  transition:filter var(--t);
}
.booking-code-chip__copy:hover { filter:brightness(1.1); }