.se-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.se-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.se-icon {
  color: #e67e22;
  color: var(--accent-orange, #e67e22);
  margin-bottom: 16px;
}

.se-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
  font-family: 'Proxima Nova', sans-serif;
}

.se-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.se-warning {
  font-size: 13px;
  color: #e67e22;
  color: var(--accent-orange, #e67e22);
  line-height: 1.5;
  margin: 0 0 24px;
  padding: 10px 14px;
  background: rgba(230, 126, 34, 0.08);
  border-radius: 8px;
}

.se-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Proxima Nova', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.se-btn-danger {
  background: var(--accent-red);
  color: #fff;
}

.se-btn-danger:hover {
  filter: brightness(1.1);
}

.se-btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.se-btn-cancel {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--separator);
}

.se-btn-cancel:hover {
  background: var(--bg-tertiary);
}

/* SearchPage.css */

/* Overlay backdrop */
.search-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  z-index: 999999;
  overflow-y: auto;
  animation: searchOverlayFadeIn 0.2s ease-out;
}

@keyframes searchOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.search-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5px 5px; 
  min-height: calc(100vh - 200px);
}

/* Overlay mode styles */
.search-page-overlay {
  padding-top: 60px;
  min-height: 100vh;
}

.search-header {
  text-align: center;
  margin-bottom: 20px;
}

.search-title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.search-input-container {
  position: sticky;
  top: 0; /* Below header */
  z-index: 100;
  padding: 12px 14px;
  margin-top: 0; /* Position directly under header */
  margin-bottom: 24px;
  margin-left: -10px;
  margin-right: -10px;
}

/* Removed - keeping sticky in overlay mode */

/* Close button for overlay mode */
.search-close-btn {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--white-70);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 10;
}

.search-close-btn:hover {
  color: var(--text-primary);
}

.search-input-icon {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-45);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 6px 16px 6px 40px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px; /* Prevents zoom on iOS */
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 2px solid var(--white-12);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: var(--white-45);
}

.search-input:focus {
  background: var(--white-10);
  border-color: var(--white-20);
}

.search-loading {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  color: var(--white-60);
}

.search-hint {
  text-align: center;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  color: var(--white-50);
  margin-top: 12px;
}

.search-results {
  margin-top: 24px;
}

.search-no-results {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 18px;
  color: var(--white-50);
}

.search-section {
  margin-bottom: 32px;
}

.search-section-title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-badge {
  display: inline-block;
  background: var(--accent-red);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 5px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-result-card {
  background-color: var(--bg-elevated);
  border-radius: 4px;
  padding: 5px 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-card);
}

.search-result-header {
  gap: 0;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* When there's no subheader (live events), add border */
.search-result-header:not(:has(+ .search-result-subheader)) {
  border-bottom: 1px solid var(--white-5);
}

/* When there's a subheader (upcoming events), change layout */
.search-result-header:has(+ .search-result-subheader) {
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 4px;
  justify-content: space-between;
}

.search-result-subheader {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--white-5);
  margin-bottom: 0;
}

.search-result-sport {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--accent-green-muted);
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-result-league {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  color: var(--white-80);
  flex: 1 1;
}

/* When league is in subheader, take full width */
.search-result-subheader .search-result-league {
  flex: initial;
  display: block;
  width: 100%;
}

.search-result-time {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--white-60);
  white-space: nowrap;
}

.search-result-teams {
  margin-bottom: 0;
}

.search-result-team {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-green);
  margin-left: 8px;
}

.search-result-odds {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--white-5);
}

.search-result-odd {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--white-5);
  padding: 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.odd-label {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--white-50);
  text-transform: uppercase;
}

.odd-value {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.search-error {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  color: var(--accent-red);
  background: var(--accent-red-muted);
  border: 1px solid var(--accent-red-muted);
  border-radius: 12px;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .search-page {
    padding: 0 5px 5px 5px; /* No top padding on mobile */
  }

  .search-input-container {
    top: 0px; /* Adjusted for mobile header */
    margin-top: 0; /* Position directly under header */
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--bg-body);
    border-bottom: 1px solid var(--separator);
  }

  .search-input-icon {
    left: 34px; /* Adjusted for mobile padding */
  }

  .search-input {
    font-size: 16px; /* Keep 16px to prevent zoom on iOS */
    padding: 12px 16px 12px 40px;
  }

  .search-result-card {
    padding: 8px 10px;
  }

  .search-result-team {
    font-size: 13px;
  }

  .search-result-score {
    font-size: 14px;
  }

  .search-result-header {
    gap: 0;
  }

  .search-result-time {
    margin-left: 0;
  }
}

/* ============================================
   Shockwave Double Bonus Poker — visual effects
   ============================================ */

/* Reuse double-bonus modal override (we kept the .double-bonus-game class) */
.vp-container.shockwave-double-bonus-game.vp-in-modal {
  max-width: 100%;
  margin: 0;
}

/* Lock status-bar height to 40px and vertically center its content always —
   prevents layout shift when entering/leaving Shockwave Mode. Shockwave-mode
   overrides display:grid below to add the 3-column counter/text/badge layout. */
.vp-container.shockwave-double-bonus-game .vp-status-bar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ============ BACKGROUND COLOR CYCLE ============ */
/* Synchronously cycles .vp-main-area + .vp-info-row through 10 solid vivid hues,
   ~1 second per color, total 10s loop. Same animation on both elements keeps
   them in lock-step. */

.vp-container.shockwave-mode-active .vp-main-area,
.vp-container.shockwave-mode-active .vp-info-row {
  animation: sdbBgCycle 10s linear infinite;
  background: #00a050;
}

@keyframes sdbBgCycle {
  0%   { background: #00a050; } /* emerald */
  10%  { background: #cc1030; } /* crimson */
  20%  { background: #ff5500; } /* sunset orange */
  30%  { background: #6020d0; } /* ultraviolet */
  40%  { background: #cc20a0; } /* magenta */
  50%  { background: #00b0a0; } /* turquoise */
  60%  { background: #d09000; } /* amber */
  70%  { background: #1040d0; } /* sapphire */
  80%  { background: #ff3080; } /* hot pink */
  90%  { background: #50c020; } /* lime */
  100% { background: #00a050; } /* loop */
}

/* Smooth restoration of original gradients when mode ends */
.vp-container:not(.shockwave-mode-active) .vp-main-area,
.vp-container:not(.shockwave-mode-active) .vp-info-row {
  transition: background 800ms ease-out;
}

/* ============ STATUS BAR LAYOUT (Shockwave Mode) ============ */
/* 3-column grid (1fr auto 1fr) — equal-sized side columns guarantee the center
   column is geometrically centered regardless of side widths. Counter sticks to
   the left edge, status text in the true middle, badge to the right edge. */
.vp-container.shockwave-double-bonus-game .vp-status-bar.sdb-status-bar {
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
  width: 100%;
  align-self: stretch;
  justify-content: initial;
}

.vp-status-bar.sdb-status-bar .status-text {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
}

.sdb-status-counter {
  grid-column: 1;
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffd84d;
  line-height: 1;
  text-shadow: 0 0 4px #ff8040, 1px 1px 2px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  font-family: 'Arial Black', 'Helvetica', sans-serif;
  pointer-events: none;
}

.sdb-status-counter strong {
  font-size: 14px;
  color: #fff;
  /* text-shadow: 0 0 6px #ffd84d, 0 0 4px #ff6080, 1px 1px 2px #000; */
}

.sdb-status-badge {
  grid-column: 3;
  justify-self: end;
  height: 10px;
  width: auto;
  display: block;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
  pointer-events: none;
}

/* ============ ACTIVATION OVERLAY: drop-in badge ============ */
.sdb-activation-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15px;
  pointer-events: none;
}

.sdb-activation-badge {
  max-height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  animation: sdbBadgeDropIn 2500ms ease-out forwards;
}

@keyframes sdbBadgeDropIn {
  0%   { width: 200px; transform: translateY(-100%); opacity: 0; }
  15%  { width: 200px; transform: translateY(0); opacity: 1; }
  40%  { width: 100%; transform: translateY(8px); opacity: 1; }
  55%  { width: 100%; transform: translateY(4px); opacity: 1; }
  85%  { width: 100%; transform: translateY(6px); opacity: 1; }
  100% { width: 100%; transform: translateY(6px); opacity: 0; }
}

/* Shockwave Hit uses the same .royal-flush-celebration classes from VideoPoker.css —
   no additional styles needed. */

/* ============ PAYTABLE: text-only highlight (no fill / no border) ============ */
/* Goal: keep the existing .winner round-yellow highlight intact, only add a
   shimmer to the hand-name label and the strikethrough+250 payout text. */

.vp-paytable-row.shockwave-row .hand-name {
  /* animation: sdbPayoutShimmer 1s ease-in-out infinite alternate; */
  color: #fb2c2c;
  font-weight: 900;
}

.vp-paytable-row.shockwave-row .payout {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.vp-paytable-row.shockwave-row .payout-strike {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 80, 80, 0.95);
  text-decoration-thickness: 2px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9em;
}

.vp-paytable-row.shockwave-row .payout-shockwave {
  color: #fb2c2c;
  font-weight: 900;
  /* animation: sdbPayoutShimmer 1s ease-in-out infinite alternate; */
}

@keyframes sdbPayoutShimmer {
  0%   { text-shadow: 0 0 4px #ff8040, 0 0 8px #ffaa20, 0 0 2px #000; }
  100% { text-shadow: 0 0 10px #ffaa20, 0 0 18px #ff6020, 0 0 4px #fff, 0 0 2px #000; }
}

/* SettingsPage.css */

.sp-page {
  background-color: var(--bg-primary);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Header — reuse ap-header pattern */
.sp-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--bg-body);
  border-bottom: 1px solid var(--separator);
  z-index: 90;
  height: 44px;
  box-sizing: border-box;
}

.sp-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .sp-back-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
  }
}

.sp-back-btn:active {
  background-color: var(--bg-tertiary);
}

.sp-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

@media (max-width: 1024px) {
  .sp-header {
    top: 38px;
  }
}

/* Container */
.sp-container {
  padding: 16px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .sp-back-btn {
    display: none;
  }
}

/* Section */
.sp-section {
  margin-bottom: 24px;
}

.sp-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-family: 'Proxima Nova', sans-serif;
}

/* Grid */
.sp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Card base */
.sp-card {
  background: var(--bg-secondary);
  background: var(--gradient-fixture, var(--bg-secondary));
  border-radius: 12px;
  padding: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  box-shadow: var(--shadow-card);
}

.sp-card.active {
  border-color: var(--accent-blue);
}

/* Half-width cards (2 per row) */
.sp-card-half {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(33.333% - 7px);
  max-width: calc(50% - 5px);
}

/* Third-width cards (3 per row) */
.sp-card-third {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(33.333% - 7px);
  min-width: 100px;
}

/* Full-width cards */
.sp-card-full {
  width: 100%;
}

/* Check icon on active cards */
.sp-check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--accent-blue);
}

/* ====== THEME SECTION ====== */

.sp-theme-preview {
  border-radius: 8px;
  height: 56px;
  padding: 8px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.sp-shimmer-bar {
  height: 8px;
  border-radius: 4px;
}

.sp-theme-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Proxima Nova', sans-serif;
}

.sp-theme-info svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ====== ODDS FORMAT SECTION ====== */

.sp-odds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--accent-blue);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 4px;
  font-family: 'Proxima Nova', sans-serif;
}

.sp-odds-name {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-family: 'Proxima Nova', sans-serif;
}

.sp-odds-sample {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  font-family: 'Proxima Nova', sans-serif;
}

/* ====== ODDS ACCEPTANCE SECTION ====== */

.sp-accept-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-accept-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sp-card.active .sp-accept-icon {
  color: var(--accent-blue);
}

.sp-accept-text {
  flex: 1 1;
  min-width: 0;
}

.sp-accept-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

.sp-accept-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: 'Proxima Nova', sans-serif;
}

/* ====== LANGUAGE SECTION ====== */

.sp-lang-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-lang-flag {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp-lang-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Push notification hints */
.sp-push-hint {
  font-size: 12px;
  color: var(--white-50);
  text-align: center;
  padding: 0 8px;
  line-height: 1.4;
}

.sp-push-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 4px;
}

.sp-push-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--white-70);
  line-height: 1.3;
}

.sp-push-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white-8);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}