/* 1. De HoofdkleurenKleurHEX-codeGebruik op F1.comF1 
F1 Red #E10600 Het officiële logo, knoppen, actieve links en accentstrepen.
F1 Black #15151E De donkere achtergrond van de navigatie en koppen (bijna zwart, maar met een blauwe tint).
F1 Carbon #38383FSecundaire achtergronden en minder belangrijke tekst.
F1 Silver #949498Lijntjes (borders) en metaal-achtige accenten.
Pure White #FFFFFFAchtergrond van de content-boxen en hoofdtekst op donkere vlakken.
*/

/* 1. Definieer de Regular variant */
@font-face {
    font-family: 'Formula1';
    src: url('../fonts/Formula1-Display-Regular.woff2') format('woff2'), /* Voeg woff2 toe indien beschikbaar */
         url('../fonts/Formula1-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Zorgt dat tekst direct zichtbaar is met fallback */
}

/* 2. Definieer de Bold variant (Gebruik dezelfde font-family naam!) */
@font-face {
    font-family: 'Formula1';
    src: url('../fonts/Formula1-Display-Bold.woff2') format('woff2'),
         url('../fonts/Formula1-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal; /* Fix: 'bold' is geen style, maar een weight */
    font-display: swap;
}

/* 3. Stel de fallback in op je body of globale container */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ========================================
     
    . ROOT VARIABLES

   ======================================== */

:root {
  --primary: #15151E; /* F1 Black ipv black */
  --primary-dark: #010102;
  --text-color: #15151E;
  --header-color: white;
  --background: #17170d;
  --background-box: white;
  --box-color-color: #E10600;
  --white: white;
  --gray-dark: #333333;
  --gray-light: #dddddd;
  --accent-green: #00c853;
  --accent-red: #E10600;
  --accent-orange: #ff7f50;
  --accent-secondary: gold;
  --color-secondary: #E10600;
  --font-body: "Montserrat", sans-serif;

  --text-color-btn-sec: white;
  --border-color-btn-alt: white;
  --tab-button-color: white;

  --fieldset: white;
  --session-block: white;
  --match-card: white;
  --joker-block: white;
  --selected_round: white;

  /* Info boxes */
  --info-box-gray: #cccccc39;
  --info-box-green: #dff0d8;
  --info-box-red: #f2dede;
  --info-box-yellow: #f5dd27;
  --info-box-border: 4px solid #777;
  --info-box-border-green: 4px solid green;
  --info-box-border-red: 4px solid #E10600;
  --info-box-border-yellow: 4px solid #eed511;
  --info-box-background: white;

  --table-border: rgba(176, 170, 170, 0.692);
  --table-row-even: rgba(151, 151, 151, 0.14);
  --table-divider: white;

    /* F1 Team Kleuren 2025/2026 */
    --f1-redbull: #1E5BC6;
    --f1-mercedes: #00A19C;
    --f1-ferrari: #DC0000;
    --f1-mclaren: #FF8000;
    --f1-astonmartin: #04745F;
    --f1-alpine: #0093CC;
    --f1-williams: #000681;
    --f1-racingbulls: #6692FF;
    --f1-haas: #66696B;
    --f1-audi: #FF003C;      /* Audi/Sauber branding */
    --f1-cadillac: #6A0115;  /* Cadillac instroom branding */

    /* Algemene F1 Kleuren */
    --f1-black: #15151e;
    --f1-white: #FFFFFF;
    --f1-red: #E10600;
    --f1-purple: #6C1DFF;

  --border-gradient-country: linear-gradient(
      to right,
      #E10600,
      gray,
      white,
      white,
      white,
    )
    1;

  --border-image-country-header: linear-gradient(
      to right,
      #E10600,
      #E10600,
      grey,
      white
    )
    100% 1;
}

/* ========================================
     
    . GLOBAL STYLES & RESETS

   ======================================== */

html,
body {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--text-color);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  max-height: 100rem;
}

h1,h2,h5 {
  font-family: "Formula1", sans-serif;
}

h2,h5 {
  font-variant: small-caps;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.4rem;
  color: var(--primary-dark);
}

h4 {
  font-size: 0.9rem;
}

h5 {
  font-size: 1.2rem;
  color: var(--f1-red);
  margin-top: 1.25em;
}

p {
  margin-top: 0;
}

/* ------------------ */

.hidden {
  display: none !important;
}
/* ------------------ 

.text-align_l {
  text-align: left;
}
.text-align_r {
  text-align: right;
}
.text-align_c {
  text-align: center;
  color: var(--header-color);
}
--------------------- */

/* ========================================
     
    . LAY OUT BASICS

   ======================================== */

.wrapper {
  flex: 1;
  width: 100%;
  padding: 0 0.625rem;
  box-sizing: border-box;
  max-width: 100rem;
  margin: 1rem auto 0;
}

.columns {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ========================================
     
    . BOXES & INFO BOXES

   ======================================== */

.box,
.box_color {
  padding: 1rem;
  border: 1px solid var(--box-color-color);
  border-radius: 12px;
  background: var(--background-box);
    scroll-margin-top: 20px;

}

.box_color {
  background: var(--primary);
  color: var(--box-color-color);
}

.info-box,
.info-box_main,
.info-box_green,
.info-box_red {
  padding: 1rem;
  margin-bottom: 1rem;
}

.info-box {
  background: var(--info-box-background);
  border-left: var(--info-box-border);
}

.info-box_green {
  background: var(--info-box-green);
  border-left: var(--info-box-border-green);
  color: black;
}

.info-box_red {
  background: var(--info-box-red);
  border-left: var(--info-box-border-red);
}

.info-box-success {
  color: var(--f1-white);
}

.feedback {
  color: var(--text-color);
}

/* ===========================================
    
    DRIVER STYLING

  =========================================== */

.driver-logo { 
    height: 14px; 
    width: auto; 
    display: inline-block; 
    border-radius: 20px; 
    padding: 2px; 
    margin-left: 4px; 
}

.driver-abbr { 
    font-weight: bold; 
    font-family: Formula1, monospace; 
    font-size: 1rem; 
    line-height: 1; 
    display: inline-block; 
}


/* ===========================================
    
    CREST

  =========================================== */

.crest-regular {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  object-fit: cover;
  transform: scale(1.02);
  vertical-align: middle;
}

.crest-20 {
  width: 20px;
  height: 20px;
}

.crest-medium {
    width: 30px; 
    height: 30px;
}


/* ========================================
     
    TABLES

   ======================================== */
  table {
      width: 100%;
      /* Verplicht op 'separate' voor border-radius op de tabel zelf */
      border-collapse: separate; 
      border-spacing: 0;
      text-align: center;
      font-family: var(--font-body);
      margin: 1.25rem 0;
      font-size: 1rem;
      
      /* De rode F1 rand & Ronding */
      border-top: 5px solid var(--f1-red); 
      border-radius: 16px 16px 0 0; 
      overflow: hidden; 
      background: var(--background-box);
      
      /* Optioneel: subtiele border om de rest van de tabel */
      border-left: 1px solid rgba(176, 170, 170, 0.3);
      border-right: 1px solid rgba(176, 170, 170, 0.3);
      border-bottom: 1px solid rgba(176, 170, 170, 0.3);
  }

  /* Headers styling */
  table th {
      background-color: var(--primary);
      color: var(--header-color);
      padding: 10px 0.5rem; /* Iets meer ademruimte bovenin */
      font-family: var(--font-header); /* Formula1 font voor koppen! */
      text-transform: uppercase;
      font-size: 0.85rem;
      border: none; /* Geen borders tussen headers voor strakke look */
  }

  /* De hoekjes van de headers moeten de tabel-ronding volgen */
  table th:first-child { border-top-left-radius: 11px; }
  table th:last-child { border-top-right-radius: 11px; }

  /* Cellen styling */
  table td {
      padding: 8px 4px; /* Iets ruimer voor betere leesbaarheid */
      border-bottom: 1px solid rgba(176, 170, 170, 0.2);
      border-right: 1px solid rgba(176, 170, 170, 0.1);
  }

  /* Verwijder de rechter border bij de laatste kolom */
  table td:last-child {
      border-right: none;
  }

  /* Zebra-strepen */
  table tr:nth-child(even) {
      background-color: rgba(151, 151, 151, 0.08);
  }

  /* Divider voor tussen groepen */
  .table-divider {
      height: 1rem;
      background-color: var(--gray-light);
      border: none;
  }
  table tr:nth-child(even) {
    background-color: rgba(151, 151, 151, 0.14);
  }

  .standings-table th:nth-child(2),
  .standings-table td:nth-child(2)
  /*.club-table th:first-child,
  .club-table td:first-child */{
    text-align: center;
    padding-left: 0.5rem;
  }

  .f1-jolpi-table th:nth-child(2),
  .f1-jolpi-table td:nth-child(2) {
    text-align: left;
    padding-left: 0.5rem;
  }

 .f1-jolpi-table td:nth-child(3) {
    font-weight: normal;
  }

  .highlight-row {
      background-color: rgba(0, 0, 0, 0.3) !important; 
      font-weight: bold;
  }

/* ========================================
     
    OTHER COMPONENTS

   ======================================== */

.joker-block {
  display: inline-flex; /* Verander dit van flex naar inline-flex */
  align-items: center;
  gap: 0.375rem;
  color: var(--box-color-color);
  margin-top: 1.875rem;
  margin-bottom: 1rem;
  cursor: pointer;
  font-weight: bold;
  padding: 6px 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 24px; /* Optioneel: maakt de hoeken wat zachter */
  border: 1px solid var(--f1-red);
}

.highlight-red {
    color: var(--f1-red);
    font-weight: bold;
}

label img,
.result img {
  height: 24px;
  vertical-align: middle;
  margin: 0 6px;
}


label:has(input[type="radio"]:checked) .team-name,
.chosen-team-highlight,
.highlighted-choice {
  border-bottom: 2px solid var(--accent-red);
  font-weight: bold;
}

/*--------------------------------------------------------------
  8. Forms & Inputs
--------------------------------------------------------------*/

.selected_round {
  min-width: 160px;
  margin: 0 40px 15px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-body);
  padding: 10px 32px 10px 12px;
  appearance: none;
  background: var(--selected_round)
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'><path fill='%23333' d='M0 0l5 5 5-5z'/></svg>")
    no-repeat right 10px center/10px 5px;
  outline: none;
}

.arrow {
  margin-left:auto;
  transition:0.2s;
  font-size:12px;
}

.arrow.open { transform:rotate(180deg); }


/*--------------------------------------------------------------
  9. Buttons & Links
--------------------------------------------------------------*/
.btn-submit,
.btn-submit_alt,
.btn-submit_ann,
.btn-submit_sec {
  padding: 10px 20px;
  color: var(--header-color);
  font-family: var(--font-body);
  border-radius: 24px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}

.btn-submit {
  background: var(--primary);
  border: 2px solid white;
}
.btn-submit_alt {
  background: var(--primary);
  border: 2px solid var(--border-color-btn-alt); /* CHECK : color zetten als color btn-submit alt  */
    font-family: var(--font-body);

}

.btn-submit_ann {
  background: black;
  border: 2px solid var(--f1-red);
}

.btn-submit_sec {
  background: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  color: var(--text-color-btn-sec);
    font-family: var(--font-body);

}

.confirm-actions {  /* buttons by pre-season picks */
    display: flex; 
    gap: 10px; 
    margin-top: 20px; 
    padding-top: 15px; 
}

/*--------------------------------------------------------------
  10. Spinner & Modal
--------------------------------------------------------------*/
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  padding: 2rem;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.spinner-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 8px solid #ccc;
  border-top: 8px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 1rem auto 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.loading-text {
    color: #666;
    font-style: italic;
    padding: 20px 0;
    text-align: center;
}

/* ============================================================

  11. Responsive

 ============================================================== */

.mobile {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.desktop {          
  display: flex;
}

@media (max-width: 499px) {
    h2 {
      font-size: 1.3rem;
      font-variant: small-caps;
      text-transform: uppercase;
      margin-bottom: 0.625rem;
    }
    .columns {
      flex-direction: column;
    }

    .rotate-icon {
      display: inline-block;
    }

    .mobile {
      display: flex;
    }

    .desktop {
      display: none;
    }
  }
  
/*--------------------------------------------------------------
  12. Stand (ranking.php)
--------------------------------------------------------------*/
.rotate-icon {
  max-height: 1.2rem;
  height: 1em;
  vertical-align: middle;
  margin-left: 8px;
}

.update-info {
  font-style: italic;
}

hr {
  border: none;
  height: 1px;
  background-color: color-mix(in srgb, var(--primary) 40%, transparent);
  margin: 0rem 0 0 0;
}


small[data-utc-time] {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
  margin-left: 0.5rem;
}

/* ========================================
     
    PRE-SEASON

   ======================================== */

    #confirmBox ol { 
        list-style: none; 
        counter-reset: 
        preview-rank; 
        padding-left: 0; 
    }

    #confirmBox li { 
        margin-bottom: 12px; 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        font-weight: bold; 
        color: white; 
    }

    #confirmBox li::before { 
        counter-increment: preview-rank; 
        content: counter(preview-rank) "."; 
        color: var(--f1-red); 
        width: 20px; 
    }

    #pStats b { 
        color: var(--f1-red); 
        font-size: 1.2rem; }

    #confirmBox h2, #confirmBox h4 { 
        color: #fff; 
        text-transform: uppercase; 
      }

    #confirmBox h4 { 
        border-bottom: 2px solid var(--f1-red); 
        padding-bottom: 5px; 
        margin-bottom: 15px; 
    }

    #confirmBox .driver-pick img, 
    #confirmBox li img { 
        height: 14px; 
        width: auto; 
        display: inline-block; 
        border-radius: 20px; 
        padding: 2px; 
        margin-left: 4px; 
    }
    .preview-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
        margin-bottom: 15px; 
    }
    .preview-grid h4 { 
        margin: 0 0 10px 0; 
        color: var(--f1-red); 
        text-transform: uppercase; 
        font-size: 0.9rem; 
    }

    .h4max { 
        width: 48%; 
        border-bottom: 2px solid var(--f1-red); 
        padding-bottom: 5px;
    }
    .preview-grid ol { 
        padding-left: 20px; 
        margin: 0; 
    }
    .more-link { 
        display: inline-block; 
        margin: 10px 0; 
        color: #000; 
        cursor: pointer; 
        text-decoration: underline; 
    }

    .more-link:hover { 
        color: var(--f1-red); 
    }

    .item img { 
        height: 16px; 
        width: auto; 
        display: block; 
        border-radius: 20px; 
        padding: 2px; 
    }

    .pre-season_confirm {
    background: rgba(255,255,255,0.4); 
    border-left: 4px solid var(--f1-red); 
    padding: 10px; 
    font-size: 1rem; 
    color: #fff; 
    border-radius: 12px; 
    margin-bottom: 0px;
    }

    @media (max-width: 768px) {
        .preview-grid { 
            grid-template-columns: 1fr !important; 
            gap: 20px; 
        }
        .h4max {
            width:100%;
        }
        .max-stats-container { 
            width: 100%; 
        }
    }

    /*

/* ===========================================
    
    . STARTING LIGHTS 

  =========================================== */

.lights-active .cd-number,
.lights-active .cd-label {
    display: none;
}

.lights-active .cd-item {
    background: radial-gradient(circle, #1a1a1a 0%, #050505 100%) !important;
    border: 2px solid #222;
    box-shadow: inset 0 0 15px #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f1-lamp {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #220000;
    box-shadow: inset 0 0 12px #000;
    position: relative;
    transition: all 0.1s ease;
}

.f1-lamp::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 30%;
    height: 20%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.f1-lamp.on {
    background-color: #ff0000;
    border: 2px solid #ffcccc;
    box-shadow: 0 0 12px 4px #fff, 0 0 30px 10px #ff0000, 0 0 60px 18px rgba(255, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.6);
    animation: lampFlash 0.1s ease-out;
}

/* ===========================================
    
    . RACE STARTED 

  =========================================== */

  .race-started-banner {
      width: 100%;
      box-sizing: border-box;
      background: #000;
      color: var(--f1-red);
      border-top: 4px solid var(--f1-red);
      border-bottom: 4px solid var(--f1-red);
      padding: 30px 0;
      text-align: center;
      font-weight: 900;
      text-transform: uppercase;
      margin: 15px 0;
      font-family: 'Formula1', sans-serif;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: scaleX(0);
      animation: expandBanner 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  }

  .banner-content {
      white-space: nowrap;
      animation: fadeInText 0.5s ease-out 0.6s forwards;
      opacity: 0;
  }

  .banner-content-subtitle {
      font-size: 1rem;
      color: #fff;
      margin-top: 8px;
      font-style: italic;
      opacity: 0.85;
      text-transform: none;
  }

  .banner-content-title {
      font-size: 2rem;
      line-height: 1;
  }

  .pulse-dot {
      height: 14px;
      width: 14px;
      background-color: #e10600;
      border-radius: 50%;
      display: inline-block;
      margin: 0 10px;
      vertical-align: middle;
      animation: pulse-red 1s infinite;
  }

  @media (max-width: 480px) {
      .f1-lamp {
          width: 35px;
          height: 35px;
      }
      .f1-lamp.on {
          box-shadow: 0 0 8px 3px #fff, 0 0 20px 6px #ff0000, 0 0 40px 12px rgba(255, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.6);
      }
      .banner-content-title {
          font-size: 1.4rem;
      }
      .banner-content-subtitle {
          font-size: 0.95rem;
          margin-top: 4px;
          padding: 0 10px;
          white-space: normal;
          font-family: 'Montserrat';
      }
  }

  .animate-grayscale {
      animation: fadeToGrey 4s ease-in-out forwards;
  }

/* ===========================================
    
    . DRIVER CONFIRMATION CARDS

  =========================================== */

.card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e10600;
}

.driver-card-confirmed {
    background: linear-gradient(135deg, #15151e 0%, #252532 100%);
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    border: 0px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

.card-content {
    display: flex;
    flex: 0;
    padding: 15px 20px 10px 20px;
    z-index: 1;
}

.driver-image-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    margin: 0;
    filter: drop-shadow(-5px 0 15px rgba(0, 0, 0, 0.5));
    z-index: 0;
    display: flex;
    align-items: flex-end;
}

.driver-photo {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}

.driver-details {
    position: relative;
    z-index: 2;
    max-width: 40%;
    pointer-events: none;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.status-badge .dot {
    height: 8px;
    width: 8px;
    background-color: #2ecc71;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #2ecc71;
}

.driver-mapping-display .driver-pick {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 0px;
    padding: 0;
}

.driver-mapping-display .driver-logo {
    height: 86px;
    width: auto;
    border-radius: 50%;
    grid-row: 1;
    padding: 4px;
    margin-bottom: 10px;
}

.driver-mapping-display .driver-abbr {
    font-family: 'Formula1';
    font-weight: 800;
    font-size: 7rem;
    font-style: italic;
    color: #fff;
    grid-row: 1;
}

.action-footer {
    text-align: right;
    margin-top: 15px;
}

.joker-tag {
    background: #f1c40f;
    color: #000;
    display: inline-block;
    padding: 3px 10px;
    font-weight: 900;
    font-size: 0.75rem;
    border-radius: 2px;
    margin-top: 15px;
    transform: skew(-10deg);
}

.card-footer-f1 {
    background: #e10600;
    color: #fff;
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.card-animation-entry {
    animation: slideIn 0.5s ease-out;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
   
/*    .driver-photo {
        object-position: bottom right;
        height: 100%;
        width: auto;
    }
  */
    .driver-mapping-display .driver-logo {
        height: 42px;
        width: 42px;
        border-radius: 50%;
        grid-row: 1;
        padding: 4px;
        margin-bottom: 4px;

    }

    .status-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }


  
    .driver-mapping-display .driver-abbr {
        font-size: 60px !important;
        line-height: 1;
    }

    .driver-details {
        padding-bottom: 15px;
/*        max-width: 45% !important;
        z-index: 5;
        */
    }

/*    .driver-image-container {
        width: 55% !important;
        right: -1px !important;
    }

    */
}

/* ===========================================
    
    . COUNTDOWN AND RACE TITLE

  =========================================== */

  #countdown {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 20px 0;
      text-align: center;
  }

  .cd-item {
      background: #15151e;
      padding: 15px 5px;
      border-radius: 8px;
      border-bottom: 3px solid #e10600;
      display: flex;
      flex-direction: column;
  }

  .cd-number {
      font-size: 2rem;
      font-weight: 800;
      color: #fff;
      font-family: 'Formula1', sans-serif;
  }

  .cd-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      color: #999;
      margin-top: 5px;
  }

  .crestio {
      height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);

  }

  .already-picked-box {
      background: rgba(46, 204, 113, 0.1);
      border: 2px solid #2ecc71;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      margin-top: 10px;
  }

  .driver-name-display {
      font-weight: bold;
      font-size: 1.4rem;
      color: #2ecc71;
      display: block;
      margin: 10px 0;
  }

  .joker-badge {
      color: #f1c40f;
      font-weight: bold;
      font-size: 0.9rem;
      margin-top: 5px;
      display: block;
  }

  @media (max-width: 480px) {
      .cd-number {
          font-size: 1.5rem;
      }
  /*---    
  .desktop {display: none;}
  --- */        
  }

  .next-race-title {
      display: flex;
      align-items: center;
      margin-top: 15px;
      gap: 6px;
  }

  .next-race-mobile {
      font-size: 0.75rem;
  }

  .next-race-name {
      font-size: 1.75rem;
  }

  .next-race-info {
      margin-top: 8px;
      font-size: 0.9rem;
      color: #808080;
  }

  .joker-block.joker-used {
      padding: 0;
      background: none;
      border: none;
  }

  .joker-used-text {
      padding: 6px 10px;
      color: #969696;
      cursor: not-allowed;
      display: inline-block;
      border: 1px solid #ADADAD;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.1);
      font-weight: 100;
  }


/* ===========================================
    
    . DROPDOWN GENERAL

  =========================================== */
/*
    .....
*/

/* ===========================================
    
    . DROPDOWN RACES

  =========================================== */

.race-dropdown .dropdown-item,
.race-dropdown .dropdown-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
}

.race-dropdown .race-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.race-dropdown .race-crest {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    object-fit: cover;
    transform: scale(1.02);
}

/*.race-dropdown .race-name {
    font-size: 14px;
}
*/


.race-date {
    font-size: 11px;
    color: #888;
    font-family: 'Formula1';
    white-space: nowrap;
}

/*
.race-dropdown .race-date {
    font-size: 11px;
    color: #888;
    font-family: 'Formula1';
    white-space: nowrap;
}
*/


.race-dropdown .dropdown-selected .race-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.race-dropdown .dropdown-selected .arrow {
    margin-left: 0 !important;
}




/* ===========================================
    
    . BREAKING JOKER RESET BOX (RANKING)

  =========================================== */

.breaking_ranking {
    display: flex;
    align-items: center;   /* verticaal centreren - */
    gap: 10px;
    margin-top: 0.8em;
    margin-bottom: 1rem;
}

.breaking_ranking h2 {
    margin: 0;             /* haalt  standaard H2 marges weg */
}

.breaking-label {
    background: var(--f1-red);
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    border-radius: 6px;
    font-size: 1.1rem;
    font-family: 'Formula1', sans-serif;
}

.align-crest-name {
    display: inline-flex;
    align-items: center;    /* Zorgt dat crest en racenaam intern gelijk staan */
    vertical-align: middle;  /* Zorgt dat de hele groep gelijk staat met de tekst 'en de' */
    gap: 4px;               
    line-height: 1;         /* Voorkomt dat teksthoogte de uitlijning verstoort */
}

.joker-reset-user-box {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-top: 15px;
}

.joker-reset-user-label {
    display: flex; 
    align-items: center; 
    padding: 4px 10px; 
    border-radius: 6px; 
    background: var(--f1-purple); 
    color: var(--f1-white); 
    font-size: 0.8rem; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===========================================
    
    . RANKING

  =========================================== */

.table_rankings th:nth-child(2), td:nth-child(2) {
    text-align: left;
}

.table_rankings th:nth-child(3), td:nth-child(3) {
    font-weight: bold;
}

.filter-input {
    width: 100%; 
    max-width: 300px; 
    padding: 10px; 
    margin-bottom: 15px;
    border: 1px solid #ccc; 
    border-left: 4px solid var(--f1-red);
    border-radius: 6px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.period-nav { 
    display: flex; 
    gap: 4px; 
    margin: 10px 0; 
    overflow-x: auto; 
    padding-bottom: 8px; 
}

.p-btn { 
    display: inline-block; 
    padding: 10px 16px; 
    border: none;
    background: var(--f1-black); 
    color: #fff;
    cursor: pointer; 
    border-radius: 24px; 
    font-variant: small-caps; 
    text-transform: uppercase; 
    font-size: 0.75rem;
    white-space: nowrap; 
    font-family: var(--font-body);
}

.p-btn.active { 
    background: #e10600; color: var(--f1-white); 
}

.toggle-bar { 
    display: none; 
    gap: 5px; 
    margin-bottom: 10px; 
    justify-content: flex-end; 
    align-items: center; 
}

.t-btn {
    background: #f0f0f0; 
    border: 1px solid #ccc; 
    padding: 4px 6px; 
    border-radius: 20px; 
    cursor: pointer;
    filter: grayscale(1); 
    opacity: 0.5; 
    transition: 0.2s; 
    font-size: 1rem;
}

.t-btn.active { 
    filter: grayscale(0); 
    opacity: 1; 
    background: #fff; border: 1px solid var(--f1-red); 
}

.joker-cell, .medal-col { 
    width: 40px; 
    text-align: center; 
}

.medal { 
    font-weight: bold; 
    padding: 2px 6px; 
    border-radius: 4px; 
    color: #fff; 
    font-size: 0.75rem; 
}

.gold { 
    background: #e2b007; 
} 
.silver { 
    background: #9ea7b8; 

} 

.bronze { 
    background: #cd7f32; 
}

.stand-update-box {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 6px 12px; 
    border-radius: 8px; 
    margin-top: 20px;
    font-size: 0.9rem
}

.btn-admin { 
    background: var(--f1-red);
    color: white; 
    text-decoration: none; 
    padding: 10px 15px; 
    border-radius: 5px; 
    font-weight: bold; 
    display: inline-block; 
    font-size: 0.85rem; 
}
    
    .header-with-button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-with-button h2 {
        margin: 0;
    }

    .btn-submit_sl {
        background-color: var(--background);
        color: white !important;
        padding: 4px 8px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 0.8rem;
        transition: background 0.2s ease;
        white-space: nowrap;
    }

    .btn-submit_sl:hover {
        opacity: 0.8;
        color: white !important;
    }

    /* Prijzenpot Styling */
    .table-prizes th {
        background-color: hsla(0, 2%, 88%, 0.83);
        color: black;
        border-bottom: 3px solid black;
    }

    .table-prizes th:first-child,
    .table-prizes td:first-child {
        text-align: left;
        padding-left: 15px;
    }

    .table-prizes .amount {
        text-align: right;
        font-weight: bold;
    }

@media screen and (max-width: 600px) {
    .toggle-bar { display: flex; }

    .pts { 
        width: 45px; 
    } 

      
    .joker-cell, .medal-col-p1, .medal-col-p2, .medal-col-p3 { 
        display: none !important; 
    }
        
    .show-joker .joker-cell, 
    .show-p1 .medal-col-p1, 
    .show-p2 .medal-col-p2, 
    .show-p3 .medal-col-p3 { 
        display: table-cell !important; 
        width: 45px !important; 
        }       
    }

@media screen and (min-width: 601px) {
    .joker-cell, 
    .medal-col-p1, 
    .medal-col-p2, 
    .medal-col-p3 { 
        display: table-cell !important; }
    }


/* ===========================================
    
    . RANKING RECHTERKOLOM

  =========================================== */

.h3_underline {
    border-bottom: 2px solid var(--f1-red);
    width: fit-content;
}

.points-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 15px 0 25px 0;
    max-width: 500px;
}

.point-card {
    background: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    border-top: 3px solid var(--f1-red); 
    text-align: center;
}

.point-card .label {
    font-size: 0.7rem;
    color: #999;
}

.point-card .value {
    font-weight: bold;
    color: #000;
    display: block;
}

.point-pill {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.point-pill .label {
    color: #999;
}

.point-pill .value {
    color: #000;
    font-weight: bold;
}

.period-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.period-badge {
    background: var(--f1-black);
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px; 
}

.period-badge strong {
    color: var(--f1-red); 
    font-family: 'Formula1', sans-serif; 
}


/* ===========================================
    
    STATS EN MY PICKS

  =========================================== */

.table_stats th:nth-child(2),
.table_stats td:nth-child(2) {
  text-align: left;
}

.table_stats th:nth-child(3),
.table_stats td:nth-child(3) {
  text-align: left;
}

.table_stats td:nth-last-child(-n + 2),
.table_stats th:nth-last-child(-n + 2) {
  text-align: center; /* voorbeeld */
}

.stats_per_race th:nth-child(1),
.stats_per_race td:nth-child(1) {
  text-align: left;
  padding-left: 10px;
}

#compareBox .table_stats th,
#compareBox .table_stats td {
  text-align: left;
  padding-left: 10px;
  text-transform: none;
}

.stats_joker-count {
  margin-top: 10px;
  font-weight: bold;
  margin-left: 10px;
}

.pts {
  width: 45px;
  font-weight: bold;
} 

.td-alias {
  font-weight: 400; /* regular */
}

.td-alias.maxed {
  color: #888;
  opacity: 0.6;
}

.td-pts {
  width: 45px;
  font-weight: bold;
} /* Punten kolom blijft smal */


.td-pts.maxed {
  opacity: 0.6;
} 


.td-count.maxed {
  color: var(--f1-red);
  font-weight: bold;
  opacity: 0.6;
}


    /*--------------------------------------------------------------
      13. Profielpage
    --------------------------------------------------------------*/
    input {
      width: 100%;
      max-width: 300px;
      padding: 10px;
      margin-bottom: 5px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      font-family: "Montserrat", sans-serif;
    }


    /* Game list */
    ul.game-list {
      list-style: none;
      padding: 0;
      color: var(--text-color); /* geldt voor de hele lijst */
    }

    ul.game-list li {
      margin-bottom: 0.5rem;
      border-radius: 6px;
      transition: background-color 0.3s ease;
    }

    ul.game-list a {
      display: block;
      padding: 0.6rem 1rem;
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0.04);
      text-decoration: none;
      font-weight: 500;
      color: var(--text-color); /* 1x hier is genoeg */
      transition: background-color 0.3s ease;
    }

    ul.game-list a:hover {
      background-color: rgba(0, 0, 0, 0.12);
      font-weight: bold;
      color: var(--primary);
    }

    ul.game-list a:visited {
      color: var(--text-color);
    }

    ul.game-list .game-link {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    ul.game-list .game-logo {
      width: 1.2rem;
      height: 1.2rem;
    }

    /* Action list */
    ul.action-list {
      list-style: none;
      padding: 0;
      color: var(--text-color); /* standaard tekstkleur */
    }

    ul.action-list li {
      margin-bottom: 0.5rem;
      border-radius: 6px;
      transition: background-color 0.3s ease;
    }

    ul.action-list a {
      display: block;
      padding: 0.6rem 1rem;
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0.04);
      text-decoration: none;
      font-weight: 500;
      color: var(--text-color);
      transition: background-color 0.3s ease;
    }

    ul.action-list a:hover {
      background-color: rgba(0, 0, 0, 0.12);
      font-weight: bold;
    }

    /* Active state for password link */
    #toggle-password-link.active {
      font-weight: bold;
      color: var(--f1-white);
      background-color: var(--primary);
    }

/* ===========================================
    
    SUBLEAGUE RANKING

  =========================================== */

.subleague-header-name {
    color: var(--f1-red);
}


  /*--------------------------------------------------------------
  . SUBLEAGUE PAGE
--------------------------------------------------------------*/

.subleague-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subleague-list li {
  margin-bottom: 0.5rem;
}

.subleague-list a {
  text-decoration: none;
  color: var(--text-color);
  display: block;
  padding: 1rem;
  background-color: #f0f0f0;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subleague-list h3 {
  margin: 0.5rem;
  font-size: 1.2rem;
}

.subleague-list a.active,
.subleague-list li.active a {
  background-color: #e0e0e0;
}

.subleague-list a:hover {
  background-color: #dcdcdc;
}
.subleague-list li.open a {
  background-color: var(--primary);
  color: var(--f1-white);
}

.form-box-subleague {
  border: 1px solid var(--primary);
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.form-box-subleague_sec {
  border: 1px solid #ccc;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-box-subleague input[type="text"] {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  font-family: var(--font-body);
  margin-top: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.btn-icon-delete {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.2rem;
}

.form-container {
  display: none;
}

.form-box-invite {
  margin-left: 0rem;
}

.invite_friends {
  margin-left: 1.5rem;
}

.invite-input {
  font-family: var(--font-body);
  font-size: 1em;
  width: 80%;
  padding: 0.6em 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  resize: none;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: hidden;
  margin-top: 0.5rem;
}

.share-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1em;
}

.share-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 1em;
  text-decoration: none;
  padding: 0.6em 0.5em;
  border-radius: 6px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
  color: var(--text-color);
  width: fit-content;
}

.share-link:hover {
  background-color: #e0e0e0;
}

.share-link:visited {
  color: var(--text-color);
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 0.2em;
}

.invite-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-left: 0.5rem;
  color: var(--f1-white);
}

.button-row {
  display: flex;
  gap: 1.5rem;
}

#temp-info-box {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  border: 1px solid var(--primary);
  background: var(--primary);
  border-radius: 8px;
  z-index: 10000;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  animation: fadeInOut 3s forwards;
  text-align: center;
  display: none;
  color: var(--f1-white);
}

.link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
  gap: 1.4em;
  margin-left: 0.5rem;
}

.nav-left a,
.nav-right a {
  text-decoration: none;
  font-weight: bold;
}

.whatsapp-icon {
  font-size: 1.2em; /* maakt het groter */
  color: #25d366; /* officiële WhatsApp-groen */
  margin-left: 0.3em; /* optioneel: ruimte tussen tekst en icoon */
  vertical-align: middle; /* uitlijning met tekst */
}

/* Standaard (Desktop): Toon de lange tekst, verberg de korte tekst */
.desktop-only-text {
  display: inline;
}

.mobile-only-text {
  display: none;
}

/* ===========================================
    
    STATS

  =========================================== */

.summary-bar {
    cursor: pointer;
    position: relative;
    padding-left: 20px; /* ruimte voor het driehoekje links */
}

.summary-bar::before {
    content: "▶"; /* gesloten driehoek */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}


.summary-bar.open::before {
    transform: translateY(-50%) rotate(90deg); /* open naar beneden */
}

.summary-bar-table {
    width: 100%;
    cursor: pointer;
    border-collapse: collapse; /* GEEN ruimte tussen rijen */
    margin: 0; /* geen marge tussen de bars */
}

.summary-bar-table td {
    padding: 4px 8px; /* optioneel, kleine padding */
    text-align: left;
}

.triangle-cell {
    width: 20px;
    text-align: center;
    transition: transform 0.2s ease;
}

.summary-bar-table.open .triangle-cell {
    transform: rotate(90deg);
}


/* ===============================
   HEADER / CONTROLS
================================ */

.box-header {
    margin-bottom: 15px;
}

.controls-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

/* ===============================
   TABLE BASIS
================================ */

.stats-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    display:none; 
    margin-bottom:1rem;
}

/* Vaste kolommen */
.col-fixed,
.stats-table th:first-child,
.stats-table td:first-child,
.col-joker,
.col-score {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 2px;
}

.col-pts {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 2px;
}

/* Flexibele kolommen */
.col-match {
    width: auto;
    text-align: center;
    overflow: hidden;
}

.col-team-name {
    width: auto;
    text-align: left;
    overflow: hidden;
    padding-left: 5px;
}

/* ===============================
   PUNTEN BADGES
================================ */
.pts-badge {
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 4px;
    display: inline-block;
}

.pts-win {
    background-color: rgba(46, 204, 113, 0.2);
    color: #27ae60;
}

.pts-zero {
    background-color: rgba(231, 76, 60, 0.1);
    color: #c0392b;
}

/* ===============================
   MOBILE TOGGLE BUTTONS
================================ */
.table-controls {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    margin-top: 5px;
}

.btn-toggle {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.2s;
}

.btn-toggle.active {
    background: #c1cf4c;
    border-color: #c1cf4c;
    font-weight: bold;
}

/* Code genereren box */
.generate-code-box {
  background: rgba(0, 0, 0, 0.05);
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0 15px 20px;
}

.generate-code-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.input-code-edit {
  text-transform: uppercase;
  width: 160px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-body);
}

.btn-generate {
  margin: 0;
  background-color: #6c757d;
}

.flash-border {
  animation: codeFlash 1.5s ease-in-out;
}


/* ===============================
   RESPONSIVE
================================ */
@media (min-width: 769px) {
    .mobile-only-text {
        display: none !important;
    }

    .col-joker,
    .col-score,
    .col-pts {
        display: table-cell !important;
    }

    .table-controls {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-only-text {
        display: none !important;
    }

    .col-joker,
    .col-score,
    .col-pts {
        display: none;
    }

    .active-col {
        display: table-cell !important;
    }

    .stats-table td {
        font-size: 0.95rem;
    }
}

.table-controls {
    display: none; /* standaard verborgen */
    gap: 5px;
    margin: 5px 0;
}

@media (max-width: 768px) {
    .table-controls.mobile-visible {
        display: flex !important;
    }
}
/* ========================================
     FIXES (NOG CONTROLEREN)
   ======================================== */


.highlight-red { /*staat ook rond regel 380 */
    color: var(--f1-red);
    font-weight: bold;
}
/* ===========================================
    
    . ANIMATIONS 

  =========================================== */

@keyframes slideIn {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}
@keyframes pulse-gold {0% {box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.4);}70% {box-shadow: 0 0 0 10px rgba(241, 196, 15, 0);}100% {box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);}}
@keyframes rc-audio {0%, 100% {height: 8px;}50% {height: 35px;}}
@keyframes slideInModal {from {opacity: 0;transform: translateY(-20px);}to {opacity: 1;transform: translateY(0);}}
@keyframes lampFlash {0% {transform: scale(0.9);opacity: 0.8;}100% {transform: scale(1);opacity: 1;}}
@keyframes expandBanner {0% {transform: scaleX(0);opacity: 0;}100% {transform: scaleX(1);opacity: 1;}}
@keyframes fadeInText {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}}
@keyframes pulse-red {0% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.7);}70% {transform: scale(1.1);box-shadow: 0 0 0 10px rgba(225, 6, 0, 0);}100% {transform: scale(0.95);box-shadow: 0 0 0 0 rgba(225, 6, 0, 0);}}
@keyframes fadeToGrey {0% {filter: grayscale(0);opacity: 1;}100% {filter: grayscale(1);opacity: 0.5;}}
@keyframes codeFlash {
  0% {
    border: 4px solid var(--primary);
    font-weight: bold;
    transform: scale(1.1);
  }
  100% {
    border: 1px solid #ccc;
    font-weight: normal;
    transform: scale(1);
  }
}

/* ===========================================
    
    . CHAT 

  =========================================== 
  
/* Floating Button */
#chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

#chat-button:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Chat Window */
#chat-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 90%;
  max-width: 380px;
  height: 85%;
  background: #121212;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: none;
  overflow: hidden;
  z-index: 10000;
  transition: all 0.2s ease-in-out;
}

#chat-window iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.0); /* volledig transparant */
  display: none;
  z-index: 9998;
}

/* Desktop layout */
@media (min-width: 769px) {
  #chat-window {
    bottom: 80px;
    right: 20px;
    width: 380px;
    height: 85vh;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  }
}

/* Mobiel layout (De Fake Fullscreen) */
@media (max-width: 768px) {

/* Als de chat open is, verbergen we de losse knop op de achtergrond */
  body.chat-open #chat-button {
    display: none !important;
  }
      
  #chat-window {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* vw zorgt voor de volledige breedte van het scherm, ongeacht parent containers */
    width: 100vw !important; 
    height: 100% !important; 
    max-width: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Verberg de overlay op mobiel aangezien de chat 100% vult */
  #chat-overlay {
    display: none !important;
  }
}

/* ===========================================
    
    . SCAN ACTION 

  =========================================== */

   .status-badge {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .status-paid {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .status-unpaid {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }

    .status-none {
        background-color: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }

    .status-other {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .beer-box {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        color: #000;
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border: 2px solid #fff;
    }

    .qr-frame {
        background: #fff;
        padding: 10px;
        display: inline-block;
        border-radius: 10px;
        margin: 10px 0;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .qr-frame img {
        display: block;
        width: 180px;
        height: 180px;
    }

    .live-clock {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.6);
        padding: 5px 12px;
        border-radius: 5px;
        font-size: 0.9rem;
    }

    .announcement-box {
        background-color: #e3f2fd;
        color: #0d47a1;
        border: 1px solid #bbdefb;
        border-radius: 10px;
        padding: 15px;
    }

    /* De hoofdlijst */
    #action-pubs {
        list-style-type: disc;
        /* De standaard bullet */
        list-style-position: inside;
        padding: 0;
        margin: 10px;
        width: 95%;
        text-align: left;
    }

    /* Het item (de balk) */
    #action-pubs li {
        background: rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        /* Zorgt dat de bullet netjes binnen de padding valt */
        transition: background 0.2s;
    }

    /* De klikbare link */
    #action-pubs li a {
        align-items: center;
        width: calc(100% - 20px);
        /* Ruimte voor de bullet aan de linkerkant */
        text-decoration: none;
        color: inherit;
    }

    /* De Location Arrow aan de rechterkant */
    #action-pubs li a::after {
        content: '\f124';
        /* FontAwesome location-arrow */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        opacity: 0.7;
        font-size: 1rem;
    }
  
      .terms-details {
        margin: 15px 0;
        padding: 10px;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.85rem;
        text-align: left;
    }

    .terms-details summary {
        font-weight: bold;
        color: var(--primary-color); /* Gebruik je eigen theme kleur */
        outline: none;
        list-style: none; /* Verbergt standaard pijltje in sommige browsers */
    }

    .terms-details summary::-webkit-details-marker {
        display: none; /* Verbergt standaard pijltje in Safari/Chrome */
    }

    .terms-details summary::before {
        content: "ⓘ "; /* Voegt een informatie-icoontje toe */
    }

    .terms-content {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #ddd;
        line-height: 1.4;
    }

    .terms-content ul {
        margin: 0;
        padding-left: 20px;
    }

    .terms-content li {
        margin-bottom: 5px;
    }