:root {
  --dark: rgba(4, 2, 15, 1);
  --purple: rgba(118, 34, 240, 1);
  --white: rgba(255, 255, 255, 1);
  --neon-green: rgba(200, 255, 0, 1);
  --grey: rgba(137, 144, 174, 1);
  --medium-grey: rgba(229, 231, 230, 1);
  --ligh-grey: rgba(243, 246, 246, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background: #c8ff00;
  color: #000;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/FiraSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/FiraSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/FiraSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
 * Header layering for the /prediction wrapper.
 *
 * The page renders TWO headers:
 *   1. partials/top-nav-desktop  — the site-wide main nav (Home,
 *      Games, Predicts, Chat, Magazine) + Join-now CTA.
 *   2. <header class="header">  — the compact utility bar
 *      (logo, wallet, betslip).
 *
 * We want only one of them visible per breakpoint so we don't stack
 * two logos. On desktop the main nav carries branding + navigation,
 * so the compact bar is hidden. On mobile the compact bar carries
 * wallet/betslip, so the desktop nav is hidden (the bottom-nav
 * partial + side-menu partial cover navigation on mobile).
 * --------------------------------------------------------------- */
.page-prediction .top-nav-desktop {
  padding: 16px 24px 0;
}

.page-prediction #header-action-area {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 20;
  gap: 10px;
}

.page-prediction #header-action-area > a {
  display: inline-flex;
  text-decoration: none;
}

.page-prediction .secondary-cta {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 7px 22px;
  border: 3px solid var(--purple);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 0 rgba(118, 34, 240, 0.18);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.page-prediction .secondary-cta:hover,
.page-prediction .secondary-cta:focus-visible {
  background: var(--purple);
  box-shadow: 0 8px 18px rgba(118, 34, 240, 0.28);
  transform: translateY(-2px);
}

.page-prediction .secondary-cta:active {
  box-shadow: 0 2px 0 rgba(118, 34, 240, 0.2);
  transform: translateY(1px);
}

.page-prediction .secondary-cta .text-wrapper-2 {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.page-prediction .secondary-cta:hover .text-wrapper-2,
.page-prediction .secondary-cta:focus-visible .text-wrapper-2 {
  color: var(--white);
}

@media (max-width: 1024px) {
  .page-prediction #header-action-area {
    top: 16px;
    right: 18px;
  }

  .page-prediction .secondary-cta {
    min-height: 38px;
    padding: 6px 18px;
    border-width: 2px;
  }

  .page-prediction .secondary-cta .text-wrapper-2 {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .page-prediction .top-nav-desktop {
    display: none;
  }

  .page-prediction #header-action-area {
    position: static;
    width: calc(100% - 32px);
    margin: 8px auto 10px;
    justify-content: center;
  }

  .page-prediction .secondary-cta {
    width: 100%;
    max-width: 360px;
    min-height: 44px;
    padding: 9px 20px;
    background: var(--purple);
  }

  .page-prediction .secondary-cta .text-wrapper-2 {
    color: var(--white);
    font-size: 16px;
  }
}
@media (min-width: 769px) {
  .page-prediction > header.header {
    display: none;
  }
}

@media (max-width: 480px) {
  .page-prediction #header-action-area {
    width: calc(100% - 24px);
    margin-top: 6px;
  }

  .page-prediction .secondary-cta {
    min-height: 42px;
    padding: 8px 16px;
  }

  .page-prediction .secondary-cta .text-wrapper-2 {
    font-size: 15px;
  }
}

/* Main Content */
.main-content {
  padding: 0 20px 20px;
  max-width: 450px;
  margin: 0 auto;
  margin-bottom: 60px;
  min-height: calc(100vh - 140px); /* Account for header and nav */
  display: flex;
  flex-direction: column;
}

/* Back Section */
.back-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.back-link {
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7622f0;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}

.back-link:hover {
  transform: translateX(-5px);
}

.back-arrow {
  font-size: 20px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 3;
}

.action-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #c8ff00;
  border: 1px solid #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s;
}

.action-btn:hover {
  background: var(--white);
  transform: scale(1.1);
}

/* Carousel */
.carousel-container {
  position: relative;
  margin: 0px 0 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  border: none;
  background-color: transparent;
  font-size: 50px;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.carousel-arrow:hover {
  transform: translateY(-80%) scale(1.1);
}

.carousel-prev {
  left: -56px;
}

.carousel-next {
  right: -56px;
}

.bet-card-wrapper {
  position: relative;
  height: calc(100vh - 380px); /* Dynamic height based on viewport */
  min-height: 300px;
  overflow: hidden;
  z-index: 10;
}

.bet-card {
  position: absolute;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
  scale: 0.85;
  z-index: -1;
  transform: scale(1);
  box-shadow: 0 12px 10px rgba(0, 0, 0, 0.1);
  height: 80%;
  width: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

.icon-text {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.bet-card.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  margin: 0px 10px;
  border-radius: 16px;
  overflow: hidden;
  scale: 1;
  z-index: 1;
  box-shadow: 0 12px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.bet-card .ab-flip--carousel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.bet-card.prev {
  transform: translateX(-100%);
  opacity: 0;
}

.bet-image {
  width: 100%;
  flex: 1;
  min-height: 200px;
  overflow: hidden;
  background: #e5e7eb;
}

.bet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bet-content {
  border-radius: 30% 30% 0% 0%;
  z-index: 1;
  margin-top: -40px;
  position: relative;
  text-align: center;
  background: var(--white);
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  /*min-height: 100px;*/
}

.bet-date {
  color: #9ca3af;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 500;
}

.bet-question {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}

/* Bet Amount Section */
.bet-amount-section {
  padding: 10px 30px;
  overflow: hidden;
  flex-shrink: 0;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid #000;
}

.currency-symbol {
  font-size: 20px;
  margin-right: 8px;
  color: #000;
}

.amount-input {
  flex: 1;
  font-size: 24px;
  width: 10px;
  border: none;
  background: transparent;
  padding: 5px 0 0 0;
  color: #333;
  outline: none;
  transition: color 0.3s ease;
  font-family: var(--font-family);
}

.amount-input:focus {
  color: #000;
}

.amount-input::placeholder {
  color: #999;
  font-size: 18px;
}

.quick-amounts {
  display: flex;
  margin-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-amount-btn {
  flex: 1;
  padding: 12px;
  background: var(--white);
  border: 3px solid #7622f0;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  color: #7622f0;
}

.quick-amount-btn:hover {
  background: #7622f0;
  color: var(--white);
  transform: translateY(-2px);
}

/* Odds Display */
.odds-display {
  display: flex;
  justify-content: space-around;
  border-radius: 15px;
  flex-shrink: 0;
}

.odds-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.odds-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.yes-icon {
  background: #10b981;
  color: var(--white);
}

.no-icon {
  background: #ef4444;
  color: var(--white);
}

.participants-icon {
  background: #6b7280;
  color: var(--white);
  font-size: 16px;
}

.odds-value {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* Bet Buttons */
.bet-buttons {
  display: flex;
  gap: 10px;
}

.bet-btn {
  padding: 8px 36px;
  border-radius: 15px;
  border-style: solid;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* YES and NO share the same primary purple per client feedback
 * (Sérgio 23 Apr). Previously NO was an outlined / ghost variant which
 * confused users into thinking NO was inactive. Keeping identical visual
 * weight — the outcome is carried by the label, not the colour. */
/* Sérgio 5.e — disabled state for the "Alternative" CTA. We keep the
   button visible (so its affordance is discoverable) but mute the
   colour and disable interaction when the current event has no
   alternatives linked in Strapi. Scoped to the action row so it
   doesn't affect other .more-btn instances elsewhere in the app. */
.more-btn.is-disabled,
.more-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Sérgio 5.a — basic legibility for the Strapi-sourced richtext
   rendered inside the info modal. Inherits font from the modal,
   constrains max-width so long paragraphs don't stretch the modal. */
.info-richtext {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark);
}

.info-richtext p {
  margin: 0 0 8px 0;
}

.info-richtext p:last-child {
  margin-bottom: 0;
}

.info-richtext ul,
.info-richtext ol {
  margin: 0 0 8px 20px;
}

.info-richtext a {
  color: var(--purple);
  text-decoration: underline;
}

.yes-btn,
.no-btn {
  background-color: #7622f0;
  color: var(--white);
  border-color: rgb(59 19 117);
  border-bottom-width: 4px;
  border-width: 2px 2px 4px 2px;
}

.yes-btn:hover,
.no-btn:hover {
  background-color: #5a1ab8;
  border-color: #5a1ab8;
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(118, 34, 240, 0.4);
}

/* Fixed-padding CTA. `width: 131` (no unit) was invalid CSS and was
 * ignored by the browser, so the button stretched with its flex parent.
 * Replaced with explicit min-width so it sizes to its content + padding
 * instead of growing to 100%. */
.select-bet-btn {
  background-color: var(--white);
  color: #7622f0;
  border-color: #7622f0;
  border-bottom-width: 4px;
  border-width: 2px 2px 4px 2px;
  min-width: 131px;
  padding: 12px 24px;
}

/* Disabled button styling */
.bet-btn.disabled,
.bet-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}

.yes-btn.disabled {
  background-color: #9ca3af !important;
  border-color: #6b7280 !important;
  color: var(--white) !important;
}

.no-btn.disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  border-color: #9ca3af !important;
}

/* Ensure bet amount text is visible on disabled buttons */
.bet-btn.disabled small {
  opacity: 1;
  font-weight: 600;
}

/* Previous-bet indicators intentionally removed per client feedback
 * (Sérgio 23 Apr — "remove from the betting engine the declaration of
 * previous bets"). We keep the class selectors as no-ops so any legacy
 * JS that still adds them doesn't accidentally pick up inherited styles
 * from elsewhere. */
.yes-btn.user-has-bet,
.no-btn.user-has-bet,
.yes-btn.user-opposite-bet,
.no-btn.user-opposite-bet {
  /* Explicit reset to the default purple look, overriding any stale
     rule that might still be cached from a prior build. No visual
     decoration (glow, checkmark, amount) — all handled in ::after. */
  box-shadow: none;
}

.yes-btn.user-has-bet::after,
.no-btn.user-has-bet::after,
.yes-btn.user-opposite-bet::after,
.no-btn.user-opposite-bet::after {
  content: none;
}

.bet-btn small {
  display: none;
}

.bet-btn {
  white-space: nowrap;
  text-align: center;
}

.more-btn {
  background-color: var(--white);
  color: #7622f0;
  border-color: black;
  border-bottom-width: 4px;
  border-width: 2px 2px 4px 2px;
  display: flex;
  align-items: center;
  padding: 10px 36px !important;
}

.select-bet {
  padding: 7px 15px;
  background-color: var(--white);
  color: black;
  border-color: black;
  background-color: transparent;
  border-bottom-width: 4px;
  border-width: 2px 2px 4px 2px;
}

.more-btn:hover {
  background-color: #7622f0;
  color: var(--white);
}

.arrow-icon {
  font-size: 24px;
}

/* Info Modal */
.info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.info-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.info-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 24px 24px 0 0;
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.info-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.info-modal-header h3 {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 600;
  color: #7622f0;
  margin: 0;
}

.info-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  color: #7622f0;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.info-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: #7622f0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin: 0;
  line-height: 1.5;
}

.info-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 12px;
}

.info-rules {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-family);
  font-size: 14px;
  color: #666;
  line-height: 1.8;
}

.info-rules li {
  margin-bottom: 8px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: #7622f0;
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  pointer-events: auto;
  animation: toastSlideIn 0.3s ease;
  min-width: 250px;
  max-width: 400px;
}

.toast.success {
  background: #10b981;
}

.toast.error {
  background: #ef4444;
}

.toast.info {
  background: #3b82f6;
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast.hiding {
  animation: toastSlideOut 0.3s ease forwards;
}

/* ---------------------------------------------------------------------------
 * Custom paragraph (Strapi richtext, rendered via marked.js)
 * Sits below the odds display when an event has copy; hidden entirely when
 * the field is empty, so entries without a paragraph don't leave a ghost
 * card in the layout.
 * ------------------------------------------------------------------------ */
.bet-paragraph {
  margin: 16px 30px 24px;
  padding: 18px 20px;
  background: var(--ligh-grey);
  border-radius: 15px;
  color: var(--dark);
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.bet-paragraph .bet-paragraph-inner > *:first-child {
  margin-top: 0;
}

.bet-paragraph .bet-paragraph-inner > *:last-child {
  margin-bottom: 0;
}

.bet-paragraph h1,
.bet-paragraph h2,
.bet-paragraph h3,
.bet-paragraph h4 {
  font-weight: 700;
  margin: 14px 0 8px;
  line-height: 1.3;
  color: var(--dark);
}

.bet-paragraph h1 { font-size: 20px; }
.bet-paragraph h2 { font-size: 18px; }
.bet-paragraph h3 { font-size: 16px; }
.bet-paragraph h4 { font-size: 15px; }

.bet-paragraph p {
  margin: 0 0 10px;
}

.bet-paragraph ul,
.bet-paragraph ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.bet-paragraph li {
  margin-bottom: 4px;
}

.bet-paragraph a {
  color: var(--purple);
  text-decoration: underline;
  word-break: break-word;
}

.bet-paragraph a:hover,
.bet-paragraph a:focus-visible {
  color: #5b18c0;
}

.bet-paragraph strong {
  font-weight: 700;
}

.bet-paragraph em {
  font-style: italic;
}

.bet-paragraph blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--purple);
  background: rgba(118, 34, 240, 0.05);
  border-radius: 0 8px 8px 0;
  color: var(--dark);
}

.bet-paragraph code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(4, 2, 15, 0.06);
  padding: 2px 5px;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .bet-paragraph {
    margin: 12px 16px 20px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .bet-paragraph h1 { font-size: 18px; }
  .bet-paragraph h2 { font-size: 17px; }
  .bet-paragraph h3 { font-size: 16px; }
}

@media (max-width: 480px) {
  .toast-container {
    right: 10px;
    left: 10px;
    top: 10px;
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .logo h1 {
    font-size: 20px;
  }

  .wallet-balance,
  .betslip-btn {
    padding: 8px 15px;
    font-size: 12px;
  }

  .action-buttons {
    right: 10px;
    top: 100px;
  }

  .bet-card {
    height: 90%;
    margin-top: 32px;
  }

  .carousel-prev {
    left: -15px;
  }

  .carousel-next {
    right: -15px;
  }
}

/* Empty State Styling */
.empty-state-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: 40px 20px;
  animation: fadeIn 0.5s ease-in;
  position: relative;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 420px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  padding: 56px 40px 48px;
  border-radius: 32px;
  box-shadow:
    0 20px 60px rgba(118, 34, 240, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(118, 34, 240, 0.1);
  animation: slideUp 0.6s ease-out;
}

.empty-state-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7622f0 0%, #93b80b 100%);
}

.empty-state-content::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(200, 255, 0, 0.05) 0%,
    transparent 70%
  );
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

.empty-state-icon-wrapper {
  position: relative;
  margin-bottom: 28px;
  z-index: 1;
}

.empty-state-icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(118, 34, 240, 0.1) 0%,
    rgba(200, 255, 0, 0.1) 100%
  );
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.empty-state-icon {
  font-size: 88px;
  position: relative;
  z-index: 2;
  animation:
    bounceIn 0.8s ease-out,
    float 3s ease-in-out infinite 1s;
  filter: drop-shadow(0 6px 12px rgba(118, 34, 240, 0.25));
  cursor: default;
  transition: transform 0.3s ease;
}

.empty-state-icon:hover {
  transform: scale(1.1) rotate(5deg);
}

.empty-state-title {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin: 0 0 16px 0;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #000 0%, #333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-state-message {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: #666;
  line-height: 1.7;
  margin: 0 0 36px 0;
  max-width: 340px;
  position: relative;
  z-index: 1;
}

.empty-state-cta {
  background: linear-gradient(135deg, #7622f0 0%, #5a1ab8 100%);
  color: var(--white);
  padding: 16px 36px;
  border-radius: 16px;
  border: none;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 6px 20px rgba(118, 34, 240, 0.35),
    0 2px 8px rgba(118, 34, 240, 0.2);
  border-bottom: 4px solid #4a1590;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.empty-state-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.empty-state-cta:hover::before {
  left: 100%;
}

.empty-state-cta:hover {
  background: linear-gradient(135deg, #5a1ab8 0%, #4a1590 100%);
  transform: translateY(-4px);
  box-shadow:
    0 10px 30px rgba(118, 34, 240, 0.45),
    0 4px 12px rgba(118, 34, 240, 0.3);
}

.empty-state-cta:active {
  transform: translateY(-1px);
  border-bottom-width: 2px;
}

.empty-state-cta svg {
  transition: transform 0.3s ease;
}

.empty-state-cta:hover svg {
  transform: translateX(4px);
}

.empty-state-hint {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(118, 34, 240, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(118, 34, 240, 0.1);
  position: relative;
  z-index: 1;
  animation: fadeIn 0.8s ease-in 0.3s both;
}

.empty-state-hint span {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: #7622f0;
}

.empty-state-hint svg {
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* Animations */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-40px);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive empty state */
@media (max-width: 480px) {
  .empty-state-container {
    min-height: 400px;
    padding: 20px 16px;
  }

  .empty-state-content {
    padding: 44px 28px 40px;
    border-radius: 28px;
    max-width: 100%;
  }

  .empty-state-icon-wrapper {
    margin-bottom: 24px;
  }

  .empty-state-icon-bg {
    width: 100px;
    height: 100px;
  }

  .empty-state-icon {
    font-size: 72px;
  }

  .empty-state-title {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .empty-state-message {
    font-size: 15px;
    margin-bottom: 32px;
    max-width: 100%;
  }

  .empty-state-cta {
    padding: 14px 32px;
    font-size: 15px;
    width: 100%;
    justify-content: center;
  }

  .empty-state-hint {
    margin-top: 20px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Loading Skeleton Styles */
.loading-skeleton {
  padding: 0 20px 20px;
  max-width: 450px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-in;
}

.skeleton-back-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
}

.skeleton-back-link {
  width: 120px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 8px;
}

.skeleton-action-buttons {
  display: flex;
  gap: 10px;
}

.skeleton-action-btn {
  width: 45px;
  height: 45px;
  background: #e5e7eb;
  border-radius: 50%;
}

.skeleton-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 10px 20px;
  box-shadow: 0 12px 10px rgba(0, 0, 0, 0.1);
}

.skeleton-image {
  width: 100%;
  height: 340px;
  background: #e5e7eb;
}

.skeleton-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-date {
  width: 150px;
  height: 16px;
  background: #e5e7eb;
  border-radius: 4px;
}

.skeleton-title {
  width: 100%;
  height: 22px;
  background: #e5e7eb;
  border-radius: 4px;
}

.skeleton-title-short {
  width: 70%;
  height: 22px;
  background: #e5e7eb;
  border-radius: 4px;
}

.skeleton-controls {
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.skeleton-input {
  width: 100%;
  height: 40px;
  background: #e5e7eb;
  border-radius: 8px;
}

.skeleton-buttons {
  display: flex;
  gap: 10px;
}

.skeleton-button {
  flex: 1;
  height: 45px;
  background: #e5e7eb;
  border-radius: 15px;
}

.skeleton-odds {
  display: flex;
  justify-content: space-around;
  padding: 0 30px;
  gap: 10px;
}

.skeleton-odd-item {
  width: 100px;
  height: 80px;
  background: #e5e7eb;
  border-radius: 12px;
}

/* Shimmer Animation */
.shimmer {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive skeleton */
@media (max-width: 480px) {
  .loading-skeleton {
    padding: 0 10px 10px;
  }

  .skeleton-back-section {
    margin-bottom: 15px;
  }

  .skeleton-back-link {
    width: 100px;
    height: 20px;
  }

  .skeleton-action-btn {
    width: 40px;
    height: 40px;
  }

  .skeleton-card {
    margin: 0 0 20px;
  }

  .skeleton-image {
    height: 280px;
  }

  .skeleton-content {
    padding: 20px;
  }

  .skeleton-controls {
    padding: 10px 20px;
  }

  .skeleton-odds {
    padding: 0 20px;
  }

  .skeleton-odd-item {
    width: 80px;
    height: 70px;
  }
}

/* Responsive viewport adjustments */
@media (max-height: 700px) {
  .bet-card-wrapper {
    height: calc(100vh - 350px);
    min-height: 250px;
  }

  .bet-image {
    height: calc(100% - 100px);
    min-height: 150px;
  }

  .bet-content {
    padding: 16px;
  }

  .bet-question {
    font-size: 20px;
    line-height: 1.2;
  }
}

@media (max-height: 600px) {
  .bet-card-wrapper {
    height: calc(100vh - 320px);
    min-height: 200px;
  }

  .bet-image {
    min-height: 120px;
  }

  .bet-content {
    padding: 15px;
    min-height: 80px;
  }

  .bet-question {
    font-size: 18px;
  }

  .bet-date {
    font-size: 14px;
  }
}

@media (min-height: 900px) {
  .bet-card-wrapper {
    height: calc(100vh - 450px);
    max-height: 600px;
  }

  .bet-image {
    max-height: 400px;
  }

  .bet-content {
    min-height: 140px;
  }
}

/* Alternate Bets Sidebar */
.alternate-bets-sidebar {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  right: -100%;
  height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(248, 249, 255, 0.9) 100%
  );
  z-index: 4;
  overflow-y: auto;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.alternate-bets-sidebar.open {
  right: 0;
}

.alternate-bets-sidebar.closing {
  right: -100%;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 20px;
  color: white;
  position: sticky;
  top: 0;
  justify-content: end;
  z-index: 10;
}

.sidebar-title {
  font-family: "Fira Sans", Helvetica;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-close {
  background: #f3f6f6;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: black;
  font-size: 20px;
  font-weight: bold;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 24px;
  margin-bottom: 72px;
}

.sidebar-section-title {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f3f6f6;
  border: 2px solid rgba(118, 34, 240, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.sidebar-option:hover {
  background: rgba(118, 34, 240, 0.05);
  border-color: rgba(118, 34, 240, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(118, 34, 240, 0.15);
}

.home-icon {
  width: 24px;
  height: 24px;
}

.radio-button {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: transparent;
  border-color: #000e08;
}

.sidebar-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7622f0 0%, #93b80b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.sidebar-option-content {
  flex: 1;
}

.sidebar-option-title {
  font-family: "Fira Sans", Helvetica;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 3px 0;
}

.sidebar-option-description {
  font-family: "Fira Sans", Helvetica;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.sidebar-option-arrow {
  color: #7622f0;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.sidebar-option:hover .sidebar-option-arrow {
  transform: translateX(4px);
}

.sidebar-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(118, 34, 240, 0.2) 50%,
    transparent 100%
  );
  margin: 24px 0;
}

.sidebar-bet-info {
  background: linear-gradient(
    135deg,
    rgba(200, 255, 0, 0.1) 0%,
    rgba(118, 34, 240, 0.05) 100%
  );
  border: 2px solid rgba(200, 255, 0, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.sidebar-bet-question {
  font-family: "Fira Sans", Helvetica;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.sidebar-bet-date {
  font-family: "Fira Sans", Helvetica;
  font-size: 14px;
  font-weight: 500;
  color: #7622f0;
  margin: 0;
}

/* Sidebar shimmer loading states */
.sidebar-shimmer-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.sidebar-shimmer-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: white;
  border: 2px solid rgba(118, 34, 240, 0.1);
  border-radius: 12px;
}

.shimmer-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5e7eb;
  margin-top: 4px;
  flex-shrink: 0;
}

.shimmer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shimmer-title {
  height: 20px;
  background: #e5e7eb;
  border-radius: 4px;
  width: 100%;
}

.shimmer-subtitle {
  height: 16px;
  background: #e5e7eb;
  border-radius: 4px;
  width: 70%;
}

.no-similar-bets {
  padding: 40px 20px;
  text-align: center;
  color: #666;
}

.no-similar-bets p {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.no-similar-bets p:last-child {
  font-size: 14px;
  opacity: 0.8;
}

.sidebar-option input[type="radio"] {
  margin: 4px 0 0 0;
  accent-color: #7622f0;
}

.sidebar-option label {
  flex: 1;
  cursor: pointer;
}

.sidebar-option-title {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.option-price {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: #7622f0;
  margin: 0;
}

/* Select bet button states */
.select-bet-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.select-bet-btn:not(:disabled) {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Responsive sidebar */
@media (max-width: 480px) {
  .alternate-bets-sidebar {
    width: 100%;
  }

  .sidebar-header {
    padding: 20px 16px;
  }

  .sidebar-title {
    font-size: 18px;
  }

  .sidebar-content {
    padding: 20px 24px;
  }

  .sidebar-option {
    padding: 14px;
    gap: 12px;
  }

  .sidebar-option-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .sidebar-option-title {
    font-size: 15px;
  }

  .sidebar-option-description {
    font-size: 13px;
  }

  .sidebar-bet-info {
    padding: 16px;
    margin-bottom: 20px;
  }

  .sidebar-bet-question {
    font-size: 15px;
  }

  .sidebar-bet-date {
    font-size: 13px;
  }
}

/* Animation for sidebar opening */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.alternate-bets-sidebar.open {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive adjustments */
@media (max-width: 480px) and (max-height: 700px) {
  .main-content {
    padding: 0 16px 16px;
    min-height: calc(100vh - 120px);
  }

  .bet-card-wrapper {
    height: calc(96vh - 340px);
    min-height: 200px;
    margin: 0 8px;
  }

  .bet-amount-section {
    padding: 8px 20px;
  }

  .odds-display {
    padding: 8px 0;
  }
}