/* Lucky Bets customer booking - shared dark skin.
 *
 * Loaded last by book.html, book_soccer.html and book_luckynumbers.html, so it
 * overrides the per-page styles those files still carry. One file rather than
 * three copies: the pages had drifted apart badly - soccer was built around
 * the cyan brand accent, Lucky Numbers around orange, and the landing page
 * used one of each, so a customer changed theme twice on the way to placing a
 * bet.
 *
 * Palette is the one already used by the cashier extension panel and its
 * chevron tab, so the customer app and the shop-side tooling look related.
 */

:root {
  --lb-bg: #1a1d23;
  --lb-surface: #20242b;
  --lb-raised: #282d36;
  --lb-line: #3a414d;
  --lb-text: #e6e9ee;
  --lb-muted: #98a2b3;
  --lb-accent: #00BCD4;
  --lb-accent-dim: rgba(0, 188, 212, 0.14);
  --lb-green: #35a35f;
  --lb-red: #e05a4d;
  --lb-amber: #f0a030;
}

body {
  background: var(--lb-bg) !important;
  color: var(--lb-text);
}

.booking-container,
.landing-container {
  background: var(--lb-surface) !important;
  border: 1px solid var(--lb-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

/* One accent for both games. The orange was only ever a Lucky Numbers thing. */
.header {
  background: var(--lb-raised) !important;
  border-bottom: 1px solid var(--lb-line);
  color: var(--lb-text) !important;
}

.header h1 {
  color: var(--lb-text) !important;
  font-size: 19px !important;
  margin: 0 !important;
}

/* Soccer had no back button at all and Lucky Numbers had a bare grey arrow
 * that did not read as tappable. Both pages now get the same control, sized to
 * a real thumb target - 40px - rather than an icon sitting in whitespace. */
.header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  text-align: left !important;
}

.back-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--lb-line);
  color: var(--lb-accent) !important;
  font-size: 20px !important;
  text-decoration: none !important;
  padding: 0 !important;
  transition: background 0.15s, border-color 0.15s;
}

.back-btn:hover,
.back-btn:active {
  background: var(--lb-accent-dim) !important;
  border-color: var(--lb-accent);
}

.content { color: var(--lb-text); }

.form-label,
.selection-label,
.ball-grid-title,
.slip-title,
.odds-label { color: var(--lb-muted) !important; }

/* Inputs: dark field, light text. A white input on a dark card is the single
 * most jarring thing to leave behind in a re-skin. */
.form-control,
.form-select,
input[type="tel"],
input[type="text"],
input[type="number"],
select,
textarea,
.bet-code-input,
.event-code-input,
.market-code-input {
  /* #14171c was DARKER than the page background, so the fields read as holes.
   * They now sit lighter than the surface they are on, which is what makes an
   * input look like something you can type in. */
  background: #2c323c !important;
  color: var(--lb-text) !important;
  border: 1px solid #4a5361 !important;
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus, .form-select:focus,
input[type="tel"]:focus, input[type="text"]:focus, input[type="number"]:focus,
select:focus, textarea:focus,
.bet-code-input:focus, .event-code-input:focus, .market-code-input:focus {
  background: #333a45 !important;
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 3px var(--lb-accent-dim) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: #8b95a5 !important; }

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 3px var(--lb-accent-dim) !important;
  outline: none !important;
}

select option { background: #14171c; color: var(--lb-text); }

/* Panels that were light grey cards on white */
.ball-grid-section,
.stake-section,
.slip-section,
.favorites-section,
.my-tickets-section,
.bet-codes-section,
.odds-display,
.empty-slip,
.ticket-card,
.slip-item,
.fav-item,
.bet-code-row {
  background: var(--lb-raised) !important;
  border-color: var(--lb-line) !important;
  color: var(--lb-text) !important;
}

.selection-display,
.my-tickets-toggle,
.favorites-toggle {
  background: var(--lb-raised) !important;
  border-color: var(--lb-line) !important;
  color: var(--lb-text) !important;
}

/* Ball grid. Unselected balls read as outlines; a picked ball is the accent,
 * a bonus ball keeps amber so the two are still distinguishable at a glance. */
.ball-grid button,
.bonus-grid button,
.ball,
.ball-btn {
  background: #14171c !important;
  color: var(--lb-text) !important;
  border: 1px solid var(--lb-line) !important;
}

.ball-grid button.selected,
.bonus-grid button.selected,
.ball.selected,
.ball-btn.selected,
.ball-grid button.active,
.bonus-grid button.active {
  background: var(--lb-accent) !important;
  border-color: var(--lb-accent) !important;
  color: #06222a !important;
  font-weight: 700;
}

.bonus-grid button.selected,
.bonus-grid button.active {
  background: var(--lb-amber) !important;
  border-color: var(--lb-amber) !important;
  color: #2a1a00 !important;
}

/* Add to Slip is step one and Submit is step two, but they were styled the
 * other way round - a thin outline next to a big green bar - so the obvious
 * thing to press was the one that does not work yet. Once a valid selection
 * exists this becomes the loudest control on the screen. */
.btn-add-slip:not(:disabled) {
  background: var(--lb-accent) !important;
  border: none !important;
  color: #06222a !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 18px rgba(0, 188, 212, 0.32) !important;
  flex: 1;
}

.btn-add-slip:disabled {
  background: #262b33 !important;
  border: 1px solid var(--lb-line) !important;
  color: #616b78 !important;
  box-shadow: none !important;
}

/* Buttons */
.stake-btn,
.ticket-btn,
.btn-save-fav,
.clear-btn,
.clear-all-btn,
.btn-link {
  background: transparent !important;
  color: var(--lb-accent) !important;
  border: 1px solid var(--lb-line) !important;
}

.stake-btn:hover,
.btn-save-fav:hover { border-color: var(--lb-accent) !important; }

.stake-btn.selected,
.stake-btn.active {
  background: var(--lb-accent) !important;
  border-color: var(--lb-accent) !important;
  color: #06222a !important;
  font-weight: 700;
}

/* The one commit action on each page. It has to answer "can I place this yet?"
 * from across the room: the page's own rule was opacity:0.5 when disabled,
 * which on a dark ground is barely a change at all. Enabled it lifts, glows and
 * goes full-contrast; disabled it is flat, borderless and clearly inert. */
.btn-submit {
  background: linear-gradient(135deg, #3fbf72 0%, #2e9457 100%) !important;
  border: none !important;
  color: #06210f !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 20px rgba(53, 163, 95, 0.35) !important;
  opacity: 1 !important;
  transform: translateY(0);
  transition: box-shadow 0.18s, transform 0.18s, background 0.18s;
}

.btn-submit:hover:not(:disabled) {
  box-shadow: 0 8px 26px rgba(53, 163, 95, 0.5) !important;
  transform: translateY(-1px);
}

.btn-submit:disabled {
  background: #262b33 !important;
  color: #616b78 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none;
  cursor: not-allowed;
}

/* Saved state on the favourite star */
.btn-save-fav.saved {
  background: rgba(240, 160, 48, 0.16) !important;
  border-color: var(--lb-amber) !important;
  color: var(--lb-amber) !important;
}

.btn-save-fav .bi-star-fill { color: var(--lb-amber) !important; }

.btn-cancel,
.slip-item-remove,
.fav-delete,
.delete-row-btn,
.cancel-ticket-btn {
  background: transparent !important;
  color: var(--lb-red) !important;
  border: 1px solid rgba(224, 90, 77, 0.35) !important;
}

.error-message {
  background: rgba(224, 90, 77, 0.12) !important;
  color: #f2a49b !important;
  border: 1px solid rgba(224, 90, 77, 0.35) !important;
}

/* This is the customer's receipt - the one screen they screenshot and bring to
 * the counter. It was rendering as a flat tinted strip indistinguishable from
 * the panels around it. */
.success-message {
  background: linear-gradient(135deg, rgba(53,163,95,0.20), rgba(53,163,95,0.08)) !important;
  color: var(--lb-text) !important;
  border: 1px solid rgba(63, 191, 114, 0.45) !important;
  border-left: 4px solid #3fbf72 !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4) !important;
}

.success-message h5 {
  color: #7ee2a6 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

.success-message p { margin: 3px 0 !important; color: var(--lb-text) !important; }
.success-message strong { color: var(--lb-muted) !important; font-weight: 600 !important; }

/* Pending tickets. Same problem: every card was the same grey as its container,
 * so a list of real bets read as empty scaffolding. */
.ticket-card {
  background: var(--lb-raised) !important;
  border: 1px solid var(--lb-line) !important;
  border-left: 4px solid var(--lb-accent) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.ticket-header { border-bottom: 1px solid var(--lb-line) !important; padding-bottom: 8px !important; }
.ticket-id { color: var(--lb-accent) !important; font-weight: 700 !important; }
.ticket-draw { color: var(--lb-text) !important; font-weight: 600 !important; }
.ticket-numbers {
  color: var(--lb-text) !important;
  font-family: 'Courier New', monospace !important;
  background: #14171c !important;
  border: 1px solid var(--lb-line) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
}

/* Slip rows and favourites get the same treatment, in their own accent. */
.slip-item {
  border-left: 3px solid var(--lb-accent) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

.fav-item {
  border-left: 3px solid var(--lb-amber) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  cursor: pointer;
}

.fav-item:hover { border-color: var(--lb-amber) !important; }

.odds-value,
.slip-count,
.ticket-id { color: var(--lb-accent) !important; }

.stake-total { color: var(--lb-muted) !important; }
.ticket-money { color: var(--lb-muted) !important; font-size: 13px; margin: 6px 0; }
.ticket-total { color: var(--lb-accent) !important; font-weight: 700; margin-left: 8px; }
.stake-total-amount { color: var(--lb-accent) !important; font-size: 17px; }

.help-text,
.code-counter,
.no-tickets-msg,
.footer-text,
.card-desc { color: var(--lb-muted) !important; }

hr { border-color: var(--lb-line) !important; }

/* Landing page cards */
.bet-card {
  background: var(--lb-raised) !important;
  border: 1px solid var(--lb-line) !important;
  color: var(--lb-text) !important;
}

.bet-card:hover { border-color: var(--lb-accent) !important; }

.card-title { color: var(--lb-text) !important; }
.card-icon, .card-arrow { color: var(--lb-accent) !important; }
.lucky-card .card-icon { color: var(--lb-amber) !important; }


/* ================================================================== brand ==
 * The customer app had no logo at all - the landing page showed a Bootstrap
 * ticket icon beside the words "Lucky Bets". The artwork is a 273x68 bold
 * wordmark, sharp to ~136px on a 2x phone, so it is capped at 132px.
 */
.brand-logo { width: 132px; max-width: 52vw; height: auto; display: block; }

/* The logo sits in its own bar above everything on every page, so the brand is
 * the first thing seen and is identical across the app. */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 14px;
  background: var(--lb-bg);
  border-bottom: 1px solid var(--lb-line);
}
.brand-bar-link { display: block; line-height: 0; }

/* ------------------------------------------------------------- SVG icons --
 * Bootstrap Icons has no football and no lottery ball, so the soccer card was
 * showing bi-dribbble (the Dribbble logo) and Lucky Numbers a plain grid.
 * These are inline SVG: sharp at any size and they take currentColor.
 */
.ic { width: 1em; height: 1em; display: block; }
.card-icon .ic { width: 34px; height: 34px; }
.header h1 .ic { width: 20px; height: 20px; display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* ============================================================== landing ====
 * The chevron was position:absolute and cut straight through the description
 * text on the Lucky Numbers card. The card is now a real 3-column flex row,
 * and min-width:0 on the middle column is what actually stops the overlap.
 */
.landing-container .header { display: block !important; text-align: center !important; }
.landing-container { padding: 28px 16px 40px !important; }

.landing-container .header p {
  color: var(--lb-dim) !important;
  font-size: 14px !important;
  margin: 10px 0 0 !important;
  letter-spacing: .1px;
}

.bet-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  border-radius: 16px !important;
  background: var(--lb-raised) !important;
  border: 1px solid var(--lb-line) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}

/* a hairline of the card's own colour, so the two cards read as distinct
 * products without shouting */
.bet-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.soccer-card::before { background: linear-gradient(180deg, #4CAF50, #2E7D32); }
.lucky-card::before  { background: linear-gradient(180deg, #FFB300, #F57C00); }

.bet-card:hover, .bet-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 32px rgba(0,0,0,.45);
}
.bet-card:active { transform: translateY(0); }

.card-icon {
  width: 56px !important; height: 56px !important;
  flex: 0 0 56px !important;
  margin-bottom: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.soccer-card .card-icon { background: linear-gradient(145deg,#4CAF50,#2E7D32) !important; }
.lucky-card  .card-icon { background: linear-gradient(145deg,#FFB300,#EF6C00) !important; }

.card-body { flex: 1 1 auto; min-width: 0; }

.card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  margin: 0 0 3px !important;
  color: var(--lb-text) !important;
}
.card-desc {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--lb-dim) !important;
  margin: 0 !important;
}

/* was absolutely positioned - now simply the third column */
.card-arrow {
  position: static !important;
  flex: 0 0 auto !important;
  top: auto !important; right: auto !important; transform: none !important;
  color: var(--lb-dim) !important;
  font-size: 18px !important;
  opacity: .7;
}
.bet-card:hover .card-arrow { opacity: 1; color: var(--lb-accent) !important; }

.footer-text {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--lb-line);
  color: var(--lb-dim) !important;
  font-size: 12.5px !important;
  text-align: center !important;
  line-height: 1.5;
}

/* the booking pages keep back-button / title / spacer; the brand now
 * lives in the bar above them. */
.landing-container, .booking-container { margin-top: 0 !important; }


/* ========================================================== page shell ====
 * book.html set body { display:flex; align-items:center; justify-content:center }
 * which vertically centred the whole page - that is where the big empty band
 * above and below the cards came from, and it also laid the new brand bar out
 * as a flex SIBLING beside the content instead of above it.
 */
body {
  display: block !important;
  padding: 0 !important;
  min-height: 100vh;
  background: var(--lb-bg) !important;
}

.landing-container {
  max-width: 500px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 26px 16px 40px !important;
}

.booking-container {
  max-width: 600px !important;
  margin: 0 auto !important;
}


/* The landing header now holds only the tagline, so it should not look like a
 * raised bar - that read as an empty card sitting above the real cards. */
.landing-container .header {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 2px 0 20px !important;
  margin-bottom: 0 !important;
}
.landing-container { background: transparent !important; border: 0 !important; }


/* body carries the dark background but stops at the content, so on a short
 * page the area below it showed the html canvas as a different shade - a
 * visible seam across the screen. Paint html too. */
html { background: var(--lb-bg); }


/* ------------------------------------------------- cell captured once ----
 * Entered on the landing page and written to the same localStorage key the
 * two booking pages already read, so neither of them asks for it again.
 */
.cell-capture {
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}
.cell-capture label {
  display: block;
  font-size: 13px;
  color: var(--lb-muted);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: .2px;
}
.cell-capture input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-size: 16px;          /* 16px stops iOS zooming the page on focus */
  letter-spacing: 1px;
}
.cell-capture input.ok {
  border-color: var(--lb-green) !important;
}
.cell-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--lb-muted);
  opacity: .85;
}

/* ---- Cell number, once we already have it -----------------------------
   The landing page asks for it once. Both booking pages read it back out
   of localStorage, so show it as a confirmation line rather than making
   the customer type the same ten digits again on every page.            */
.cell-known {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--lb-text);
  font-size: 14px;
}

.cell-known strong { letter-spacing: 0.5px; }

.cell-change-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  color: var(--lb-accent);
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}

.cell-change-btn:active { background: var(--lb-accent-dim); }

/* ---- Fixture picker: browse mode --------------------------------------
   An empty search box browses by country. Customers who do not already
   know what is playing had nothing to type.                             */
.browse-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 6px;
  color: var(--lb-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.browse-row:active { border-color: var(--lb-accent); }
.browse-row .n { color: var(--lb-muted); font-size: 12px; }

.browse-back {
  background: none;
  border: none;
  color: var(--lb-accent);
  font-size: 13px;
  padding: 2px 0 10px;
  cursor: pointer;
}

.browse-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--lb-muted);
  margin: 12px 2px 6px;
}

/* ---- Scrollbars inside the picker -------------------------------------
   Both scroll regions are hidden entirely. The browser default is a wide
   light bar that reads as damage on a dark panel, and both of these are
   swiped on a phone rather than dragged.                                */
.fixture-results {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.fixture-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---- Betslip ----------------------------------------------------------
   The picker builds this; the bet-code rows underneath are still what
   gets submitted, so this is a view over them rather than a second store. */
.bet-slip { display: flex; flex-direction: column; gap: 8px; }

.bet-slip-empty {
  background: var(--lb-raised);
  border: 1px dashed var(--lb-line);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--lb-muted);
}

.bet-slip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 10px 10px 10px 12px;
}

.bet-slip-main { flex: 1 1 auto; min-width: 0; }

.bet-slip-match {
  font-size: 14px;
  font-weight: 600;
  color: var(--lb-text);
}

.bet-slip-pick {
  margin-top: 2px;
  font-size: 12px;
  color: var(--lb-muted);
}

.bet-slip-pick strong { color: var(--lb-text); font-weight: 600; }

.bet-slip-code {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--lb-surface);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--lb-accent);
}

.bet-slip-when {
  margin-top: 2px;
  font-size: 11px;
  color: var(--lb-muted);
}

.bet-slip-odds {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--lb-accent);
}

.bet-slip-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: transparent;
  color: var(--lb-red);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.bet-slip-remove:active { background: rgba(224, 90, 77, 0.15); }

/* ---- Bet codes, now the alternate way in ------------------------------ */
.codes-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--lb-muted);
  font-size: 14px;
  cursor: pointer;
}

.codes-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.codes-toggle .bi-chevron-down { transition: transform 0.2s; }
.codes-toggle .bi-chevron-down.flipped { transform: rotate(180deg); }

.codes-panel { display: none; margin-top: 10px; }
.codes-panel.show { display: block; }

/* ---- 1x2 alongside the match name --------------------------------------
   The three prices sit on the same line as the teams rather than under
   them, which is roughly 30px a row saved across a long list.            */
.fixture-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fixture-info {
  flex: 1 1 auto;
  min-width: 0;
}

.fixture-item .fixture-teams {
  font-size: 14px;
  line-height: 1.25;
}

.fixture-item .fixture-meta { margin-top: 3px; }

.fixture-main-picks {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  margin-top: 0;
}

.fixture-pick.compact {
  flex: 0 0 auto;
  width: 56px;
  min-width: 0;
  padding: 6px 2px;
  font-size: 11px;
  text-align: center;
}

.fixture-pick.compact .pick-odds {
  margin-top: 1px;
  font-size: 12px;
}

/* ---- Betslip drawer ---------------------------------------------------- */
.slip-fab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--lb-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.slip-fab.has-picks {
  background: var(--lb-accent);
  border-color: var(--lb-accent);
  color: #06232a;
}

.slip-fab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 12px;
  text-align: center;
}

.slip-fab:not(.has-picks) .slip-fab-count {
  background: var(--lb-raised);
  color: var(--lb-muted);
}

.drawer-scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.slip-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 92vw;
  background: var(--lb-surface);
  border-left: 1px solid var(--lb-line);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.5);
  transform: translateX(105%);
  transition: transform 0.24s ease;
}

.slip-drawer.open { transform: translateX(0); }

.slip-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lb-line);
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 600;
}

.slip-drawer-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: transparent;
  color: var(--lb-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.slip-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slip-drawer-body::-webkit-scrollbar { width: 0; display: none; }

.slip-drawer-foot {
  flex: 0 0 auto;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lb-line);
}

.slip-drawer-foot .btn-submit { margin: 0; }

body.drawer-open { overflow: hidden; }

/* ---- Estimated return -------------------------------------------------- */
.slip-returns {
  margin-top: 14px;
  background: var(--lb-raised);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 12px 14px;
}

.slip-returns-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--lb-muted);
}

.slip-returns-row + .slip-returns-row { margin-top: 7px; }
.slip-returns-row strong { color: var(--lb-text); font-size: 14px; }

.slip-returns-row.total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lb-line);
}

.slip-returns-row.total strong {
  color: var(--lb-accent);
  font-size: 19px;
}

.slip-returns-note {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--lb-muted);
}

.slip-returns-note:empty { display: none; }

.slip-drawer-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slip-drawer-head-right .code-counter { font-size: 12px; font-weight: 400; }