/**
 * bet365 betslip drawer styles.
 * Brand palette matches the Betting Village theme (#920101 primary).
 */

.bv-b365-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-left: 1px solid #e4e4e4;
  box-shadow: -4px 0 24px rgba(0,0,0,.10);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #1d1e20;
}
.bv-b365-drawer.is-open { transform: translateX(0); }

.bv-b365-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.bv-b365-drawer__title { font-size: 16px; font-weight: 700; margin: 0; }
.bv-b365-drawer__age { font-size: 11px; color: #888; }
.bv-b365-drawer__close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: #888; cursor: pointer; padding: 0 4px;
}
/* Must restate background, not just colour: the cascade resolves per
   property, so omitting it lets the theme's button:hover paint maroon
   behind the icon even though this rule out-specifies it overall. */
.bv-b365-drawer__close:hover,
.bv-b365-drawer__close:focus-visible { background: none; color: #1d1e20; }

.bv-b365-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.bv-b365-drawer__foot { flex-shrink: 0; border-top: 1px solid #eee; padding: 10px 16px 14px; }

/* Empty / login states */
.bv-b365-empty { text-align: center; padding: 28px 8px; color: #888; }
.bv-b365-empty p { margin: 0 0 6px; }
.bv-b365-empty__hint { font-size: 12px; color: #aaa; }

.bv-b365-login {
  background: #fafafa; border: 1px solid #eee; border-radius: 12px;
  padding: 14px; margin-bottom: 14px; text-align: center;
}
.bv-b365-login__lead { margin: 0 0 10px; font-size: 13px; color: #555; }

/* Balance */
.bv-b365-balance {
  font-size: 12px; color: #555; background: #f7f7f7;
  border-radius: 8px; padding: 7px 10px; margin-bottom: 12px;
}
.bv-b365-balance__bonus { color: #888; }

/* Groups */
.bv-b365-group { margin-bottom: 14px; }
.bv-b365-group__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #999; margin: 0 0 7px; font-weight: 700;
}

/* Bookmaker panel — who holds the bet, and the account actions */
.bv-b365-book {
  border-bottom: 1px solid #ececec; padding: 0 0 14px; margin: 0 0 14px;
}
.bv-b365-book__lead { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #111; }
.bv-b365-book__price { color: #c2109c; }
.bv-b365-book__label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.bv-b365-book__row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #dcdcdc; border-radius: 10px; padding: 10px 12px; background: #fff;
}
.bv-b365-book__logo {
  background: #027b5b; color: #ffe500; font-weight: 800; font-size: 11px;
  padding: 5px 7px; border-radius: 5px; line-height: 1; flex-shrink: 0;
}
.bv-b365-book__name { font-size: 15px; font-weight: 600; color: #111; }
.bv-b365-book__acct {
  display: flex; align-items: center; justify-content: space-around;
  gap: 12px; margin-top: 12px;
}
.bv-b365-book__bal { font-size: 14px; color: #555; }
/*
 * The theme styles bare `button` at base level, including a dark maroon
 * button:hover. That selector is (0,1,1) — an element plus a pseudo-class —
 * so it outranks a plain (0,1,0) class and repaints these controls on
 * hover. Every button here therefore states its own :hover explicitly,
 * which at (0,2,0) wins.
 */
.bv-b365-link {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-size: 15px; color: #111; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.2;
}
.bv-b365-link:hover,
.bv-b365-link:focus-visible {
  background: none; color: #920101; text-decoration: underline;
}
.bv-b365-link svg { flex-shrink: 0; }

.bv-b365-count { margin: 0 0 10px; font-size: 13px; color: #777; }

/* Selection rows */
.bv-b365-row {
  border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #f4f4f4;
}
.bv-b365-row.has-error { background: #fff3f3; box-shadow: inset 0 0 0 1px #f0b4b4; }
.bv-b365-row--mult { background: #eef1f4; }

.bv-b365-row__head { display: flex; align-items: center; gap: 10px; }
.bv-b365-row__sel { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15px; color: #111; }
.bv-b365-row__odds { font-weight: 700; font-size: 15px; color: #111; flex-shrink: 0; }
.bv-b365-row__rm {
  background: none; border: 0; color: #555; line-height: 0;
  cursor: pointer; padding: 2px; flex-shrink: 0;
}
.bv-b365-row__rm:hover,
.bv-b365-row__rm:focus-visible { background: none; color: #b70000; }
.bv-b365-row__ctx { margin: 4px 0 0; font-size: 13px; color: #555; line-height: 1.35; }

.bv-b365-row__controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.bv-b365-stake {
  display: inline-flex; align-items: center;
  border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff;
}
.bv-b365-stake__sym { padding: 0 4px 0 10px; color: #777; font-size: 14px; }
.bv-b365-stake__input {
  width: 74px; border: 0; padding: 9px 10px 9px 2px; font-size: 15px;
  font-weight: 600; outline: none; background: transparent;
  -moz-appearance: textfield;
}
.bv-b365-stake__input::-webkit-outer-spin-button,
.bv-b365-stake__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Per-line returns, right-aligned opposite the stake */
.bv-b365-row__ret { text-align: right; margin-left: auto; }
.bv-b365-row__ret-label { display: block; font-size: 13px; color: #555; }
.bv-b365-row__ret-val { display: block; font-size: 15px; font-weight: 700; color: #111; }

.bv-b365-ew {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #555; cursor: pointer; margin-top: 8px;
}
.bv-b365-row__ewnote { margin: 6px 0 0; font-size: 11px; color: #777; }
.bv-b365-row__err { margin: 7px 0 0; font-size: 12px; color: #b70000; }

.bv-b365-validating { font-size: 12px; color: #999; margin: 0 0 10px; }
.bv-b365-err {
  background: #fdecec; border: 1px solid #f5c6cb; color: #8a1f1f;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; margin: 0 0 12px;
}

/* Totals + actions */
.bv-b365-foot { border-top: 1px solid #ececec; padding-top: 14px; margin-top: 4px; }

.bv-b365-foot__bar { display: flex; align-items: stretch; gap: 10px; }

/*
 * Clear-all. Red outline marks it destructive without shouting.
 *
 * padding must be stated: the theme's base `button` rule applies 40px of
 * horizontal padding, which on a 56px-wide button collapses the content
 * box and makes the icon disappear entirely.
 */
.bv-b365-clear {
  flex: 0 0 auto; width: 56px; padding: 0;
  border: 1px solid #d81b1b; border-radius: 10px;
  background: #fff; color: #333; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bv-b365-clear:hover,
.bv-b365-clear:focus-visible { background: #fff5f5; color: #b70000; }
.bv-b365-clear svg { flex-shrink: 0; }

/* Primary action. Two lines: what it does, and what it could return. */
.bv-b365-cta {
  flex: 1 1 auto; border: 0; border-radius: 10px; padding: 12px 16px;
  background: #111; color: #fff; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 3px; transition: background .15s;
}
.bv-b365-cta:hover:not(:disabled) { background: #000; }
.bv-b365-cta:disabled { background: #9a9a9a; cursor: not-allowed; }
.bv-b365-cta__main { font-size: 16px; font-weight: 700; line-height: 1.2; }
.bv-b365-cta__sub { font-size: 13px; font-weight: 400; opacity: .92; line-height: 1.2; }

/* Escape hatch to finish on bet365 itself. */
.bv-b365-away {
  display: block; text-align: center; margin: 14px 0 0;
  font-size: 15px; color: #111; text-decoration: underline;
}

.bv-b365-total {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #666; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid #f0f0f0;
}
.bv-b365-total strong { font-size: 15px; color: #111; }
.bv-b365-actions { display: flex; gap: 8px; }

.bv-b365-btn {
  flex: 1 1 auto; border: 0; border-radius: 999px; padding: 10px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
/* Baseline hover, so an unmodified .bv-b365-btn can't inherit the
   theme's maroon button:hover. Variants override below. */
.bv-b365-btn:hover { background: #f2f2f2; color: #111; }

.bv-b365-btn--primary { background: #920101; color: #fff; }
.bv-b365-btn--primary:hover,
.bv-b365-btn--primary:hover:not(:disabled) { background: #b70000; color: #fff; }
.bv-b365-btn--primary:disabled { background: #d9a5a5; cursor: not-allowed; }

.bv-b365-btn--ghost { background: #f2f2f2; color: #555; flex: 0 0 auto; }
.bv-b365-btn--ghost:hover { background: #e6e6e6; color: #111; }
.bv-b365-btn--ghost:hover { background: #e6e6e6; }

/* Receipt (§9.2) */
.bv-b365-receipt { text-align: left; }
.bv-b365-receipt__head { text-align: center; padding: 6px 0 14px; }
.bv-b365-receipt__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #e8f5e8; color: #2d7a2d; font-size: 20px; font-weight: 700;
  margin-bottom: 8px;
}
.bv-b365-receipt__head h3 { margin: 0 0 4px; font-size: 17px; }
.bv-b365-receipt__lead { margin: 0; font-size: 13px; color: #666; }

.bv-b365-receipt__ref {
  display: flex; align-items: center; justify-content: space-between;
  background: #f7f7f7; border-radius: 8px; padding: 9px 11px;
  font-size: 12px; margin-bottom: 12px;
}
.bv-b365-receipt__ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.bv-b365-receipt__lines { list-style: none; margin: 0 0 12px; padding: 0; }
.bv-b365-receipt__lines li {
  border-bottom: 1px solid #f0f0f0; padding: 9px 0;
}
.bv-b365-receipt__lines li:last-child { border-bottom: 0; }
.bv-b365-receipt__sel { font-weight: 700; font-size: 13px; }
.bv-b365-receipt__sel em { font-style: normal; color: #777; font-weight: 400; font-size: 11px; }
.bv-b365-receipt__ctx { font-size: 11px; color: #999; margin-top: 1px; }
.bv-b365-receipt__nums {
  display: flex; gap: 12px; font-size: 12px; color: #555; margin-top: 4px;
}
.bv-b365-receipt__totals {
  background: #fafafa; border-radius: 8px; padding: 10px 11px; margin-bottom: 12px;
}
.bv-b365-receipt__totals div {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 2px 0;
}
.bv-b365-receipt__note { font-size: 11px; color: #999; margin: 0 0 12px; text-align: center; }

/* Regulatory footer (§9.3) — must always be visible with the betslip */
.bv-b365-reg { font-size: 10px; color: #999; line-height: 1.45; }
.bv-b365-reg__text { margin: 0 0 6px; }
.bv-b365-reg__links { margin: 0 0 6px; }
.bv-b365-reg__links a { color: #777; text-decoration: underline; }
.bv-b365-reg__links a:hover { color: #920101; }
.bv-b365-reg__icons {
  margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bv-b365-reg__badge {
  display: inline-block; font-size: 9px; color: #888;
  border: 1px solid #ddd; border-radius: 4px; padding: 2px 5px;
}
.bv-b365-reg__icons a:hover .bv-b365-reg__badge { border-color: #920101; color: #920101; }
.bv-b365-reg__age { font-weight: 700; color: #920101; font-size: 11px; }

/* Floating open button */
.bv-b365-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 99998;
  background: #920101; color: #fff; border: 0; border-radius: 999px;
  padding: 11px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  display: inline-flex; align-items: center; gap: 7px;
}
.bv-b365-fab:hover { background: #b70000; }
.bv-b365-fab__count {
  background: #fff; color: #920101; border-radius: 999px;
  min-width: 18px; height: 18px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

@media (max-width: 420px) {
  .bv-b365-drawer { max-width: 100%; }
}