/* ===================================
   Fading animations (from your code)
=================================== */
@keyframes fadeInAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  .fade-in {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeOutAnimation {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  .fade-out {
    animation: fadeOutAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
  /* ===================================
     Layout / Utility Classes
  =================================== */
  
  /* Header and main containers */
  .header-container {
    max-width: 48rem;
    padding: 1rem;
  }
  .main-container {
    max-width: 48rem;
    padding: 0.75rem;
  }
  .footer-container {
    max-width: 48rem;
    padding: 0.75rem;
  }
  .sub-container {
    max-width: 36rem;
    padding: 0.75rem;
  }
  
  /* Margins and padding */
  .mb-1 {
    margin-bottom: 1rem;
  }
  .mb-0 {
    margin-bottom: 0 !important;
  }
  .mt-1 {
    margin-top: 1rem;
  }
  .pt-1 {
    padding-top: 1rem;
  }
  .pb-1 {
    padding-bottom: 1rem;
  }
  .p-1 {
    padding: 1rem;
  }
  
  /* Border & color styles */
  .bordered-2-dark {
    border-style: solid;
    border-width: 2px;
    border-color: #2D3138;
  }
  .bordered-2-blue {
    border-style: solid;
    border-width: 2px;
    border-color: #72AFEF;
  }
  .bordered-1-dark {
    border-style: solid;
    border-width: 1px;
    border-color: #2D3138;
  }
  .bordered-2-orange {
    border-style: solid;
    border-width: 2px;
    border-color: #ff930f;
  }
  
  /* Centering, zero margins */
  .text-center {
    text-align: center;
  }
  .m-0 {
    margin: 0 !important;
  }
  
  /* Misc. utility */
  .cursor-pointer {
    cursor: pointer;
  }
  .hidden {
    display: none;
  }
  .no-row-gap {
    grid-row-gap: 0;
  }
  
  /* ===================================
     Specific Elements
  =================================== */
  
  /* Bet add/remove button style overrides */
  .add-bet-button {
    margin-bottom: 0px;
  }

  .remove-bet-button {
    margin-bottom: 0px;
  }
  
  /* Bet Title + Stake (left & right) */
  .bet-title {
    background-color: #525f7a;
    white-space: nowrap;
    text-align: center;
    color: white;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  }
  .rounded-left {
    border-top-left-radius: var(--pico-border-radius);
    border-bottom-left-radius: var(--pico-border-radius);
  }
  
  .bet-stake {
    background-color: #525f7a;
    white-space: nowrap;
    text-align: center;
    color: white;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  }
  .rounded-right {
    border-top-right-radius: var(--pico-border-radius);
    border-bottom-right-radius: var(--pico-border-radius);
  }
  
  /* Min-width from your original code for bet titles/stakes */
  p[id^="bet-title"] {
    min-width: 90px; 
  }
  p[id^="bet-stake"] {
    min-width: 110px;
  }
  
  /* Icon Image Example */
  .icon-img {
    height: 3rem;
  }
  
  /* Extra container for your logo link */
  .header-logo {
    all: unset;
    cursor: pointer;
  }
  .header-logo-container {
    display: flex;
    align-items: center;
    column-gap: 1rem;
  }
  .light-dark-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  /* Centered flex container for your ad icon, etc. */
  .centered-flex {
    display: flex;
    justify-content: center;
  }