/*─────────────────────────────────────────────────────*/
/* Root variables for colors, fonts, sizes, spacing */
/*─────────────────────────────────────────────────────*/

:root {
    /* Colors */
    --color-bg: #000000;
    --color-card-bg: #FFFFFF;
    --color-text-primary: #000000;
    --color-text-secondary: #ACACAC;
    --color-placeholder: #A0A0A0;
    /* hover gradient pulled from attached screenshot (#D9D9D9) */
    --hover-bg: linear-gradient(90deg, #FFFFFF 0%, #D9D9D9 100%);
  
    /* Typography */
    --font-base: 'Space Grotesk', sans-serif;
    --h1-size: 57.68px;
    --h2-size: 40px;
    --h3-size: 20px;
    --btn-text-size: 20px;
  
    /* Border radii */
    --radius-header-btn: 10px;
    --radius-card: 20px;
    --radius-input: 30px;
  
    /* Header padding */
    --header-pad-vert: 62px;
    --header-pad-horiz: 45px;
  
    /* Vertical gaps */
    --gap-h1-h3: 14px;
    --gap-h3-row1: 79px;
    --gap-row1-search: 30px;
    --gap-searchbars: 20px;
    --gap-search2-row2:  var(--gap-row1-search);
    --gap-row2-footer: 79px;
  
    /* Button border states */
    --btn-border-default: transparent;
    --btn-border-hover-color: #D9D9D9;
    --btn-border-hover-width: 4px;
    --btn-border-active-color: #FFFFFF;
    --btn-border-active-width: 3px;
  
    /* Content top offset */
    --content-pt: 100px;
  }
  
  /*───────────────────────────────────────*/
  /*  Reset & Base Styles */
  /*───────────────────────────────────────*/
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    
    background-color: var(--color-bg);
    background-image: url('img/8m44OJaQZacoxjF34H8lk3UVzUk.avif');     
    background-repeat: no-repeat;
    background-position: center 15%;
    background-size: contain;
    background-attachment: fixed;
    color: var(--color-text-secondary);
    font-family: var(--font-base);
    line-height: 1.4;
  }
  
  /*───────────────────────────────────────*/
  /*  Header & Navigation */
  /*───────────────────────────────────────*/
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--header-pad-vert) var(--header-pad-horiz);
    position: relative;
  }
  .logo img {
    width: 206px;
    height: 69px;
  }
  .header-buttons {
    display: flex;
    gap: 1rem;
  }
  .header-buttons button {
    width: 128px;
    height: 36px;
    border: none;
    border-radius: var(--radius-header-btn);
    background: var(--color-card-bg);
    color: var(--color-text-primary);
    font: 500 var(--btn-text-size)/1 var(--font-base);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .header-buttons button:hover {
    background: var(--btn-border-hover-color);
  }
  
  /* Hamburger */
  .hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .hamburger svg {
    display: block;
    fill: #FFFFFF;
  }
  
  /*───────────────────────────────────────*/
  /*  Hero Titles */
  /*───────────────────────────────────────*/
  .main-content {
    max-width: 1440px;
    margin: var(--content-pt) auto 0;
    text-align: center;
    padding: 0 var(--header-pad-horiz);
  }
  .main-content h1 {
    width: 1027px;
    height: 74px;
    margin: 0 auto var(--gap-h1-h3);
    font: 500 var(--h1-size)/1 var(--font-base);
    background: linear-gradient(90deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .main-content h3 {
    width: 755px;
    height: 26px;
    margin: 0 auto var(--gap-h3-row1);
    font: 500 var(--h3-size)/1 var(--font-base);
    color: var(--color-text-secondary);
  }
  
  .results-hint {
    font-color: linear-gradient(90deg, #FFFFFF 0%, #999999 100%);
    font-size: var(--h2-size);
  }

  /*───────────────────────────────────────*/
  /*  Option Buttons (both rows) */
  /*───────────────────────────────────────*/
  .options-grid,
  .options-grid-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 14px;   /* 24px × 0.6 ≈ 14px */
    row-gap: 14px;
    width: 703px;       /* 225px×3 + 14px×2 = 703px */
    margin: 0 auto;
  }
  .options-grid {
    margin-bottom: var(--gap-row1-search);
  }
  .options-grid-bottom {
    margin: var(--gap-search2-row2) auto var(--gap-row2-footer);
  }
  
  /* Shared button styles */
  .option-btn {
    width: 225px;
    height: 159px;
    background: var(--color-card-bg);
    border: var(--btn-border-default) solid var(--btn-border-default);
    border-radius: var(--radius-card);
    font: 500 var(--btn-text-size)/1 var(--font-base);
    font-size: 16px;
    color: var(--color-text-primary);
    cursor: pointer;
    position: relative;
    transition:
      border var(--btn-border-hover-width) ease 0.2s,
      background 0.2s;
  }
  
/*————————————————————————————————————————————————————*/
/* Blue hover & selected states for option-btn          */
/*————————————————————————————————————————————————————*/
.option-btn:hover {
    /* border thick & bright blue */
    border: 8px solid #1156C7;
    /* light → primary blue gradient */
    background: linear-gradient(90deg, #4A8CFF 0%, #1156C7 100%);
    color: #FFFFFF;  /* always white on colored bg */
    box-shadow: 0 4px 12px rgba(17, 86, 199, 0.6);
  }
  
  .option-btn.selected {
    /* thinner, darker border */
    border: 6px solid #0D2F6A;
    /* dark → primary blue gradient */
    background: linear-gradient(90deg, #0D2F6A 0%, #1156C7 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(17, 86, 199, 0.6);
    box-shadow: 
    0 0 8px rgba(17,86,199,0.7),   /* inner glow */
    0 4px 12px rgba(17,86,199,0.6); /* outer shadow */

  /* 4) slight pop-out */
  transform: scale(1.03);
  transform-origin: center;
  }
  
  /* white checkmark remains the same */
  .option-btn.selected::after {
    content: '✔';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 2.5rem;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  
  
  /*───────────────────────────────────────*/
  /*  Search Bars */
  /*───────────────────────────────────────*/
  .searchbars {
    display: flex;
    flex-direction: column;
    gap: var(--gap-searchbars);
  }
  .searchbar {
    position: relative;
    width: 703px;    /* match the 6-button container */
    height: 68px;    /* 91px × 0.75 ≈ 68px */
    margin: 0 auto var(--gap-search2-row2);
  }
  .searchbar input {
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    border: none;
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    font: 500 var(--btn-text-size)/1 var(--font-base);
    font-size: 16px;  /* down from 20px to fit the smaller box */
    color: var(--color-text-primary);
  }
  .searchbar input::placeholder {
    color: var(--color-placeholder);
  }
  .searchbar .search-btn {
    position: absolute;
    top: 5px;   /* centers 79px icon */
    right: 5px;
    width: 68px;
    height: 59px;
    border: none;
    border-radius: var(--radius-input);
    background: #010101;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .searchbar .search-btn img {
    width: 32px;
    height: 30px;
  }
  
  /*───────────────────────────────────────*/
  /*  Result Container & Footer */
  /*───────────────────────────────────────*/
  #result {
    max-width: 100%;   
    width: auto;       
    margin: 2rem auto;
  }
  .site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
  }
  .site-footer img {
    width: 150px;
    margin-bottom: 1rem;
  }
  
/*————————————————————————————————————————————————————*/
/*  Big, obvious result container and tooltips        */
/*————————————————————————————————————————————————————*/
.result-box {
    display: inline-block;
    position: relative;
    width: auto;
    max-width: 100%;
    margin: 2rem auto;
    padding: 1.5rem;
    border: 4px solid #1156C7;                     /* primary blue */
    border-radius: 20px;                           /* same as option-btn */
    background: #1a1a1a;
    color: #ffffff;
    text-align: left;
    box-shadow: 0 4px 12px rgba(17, 86, 199, 0.6); /* blue shadow */
  }
  
  .result-box h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  
  .result-box p {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
  }
  
  .result-box.error {
    border-color: #FF0000;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.6);
  }
  
  /* make any canvas inside result-box full-width and taller */
  .result-box canvas {
    display: block;
    width: 100% !important;
    height: 400px !important;
  }
  
  /* Tooltips for search icons */
  .search-btn {
    position: relative;
  }
  .search-btn[title] {
    cursor: help;
  }
  
  
  
/* Table of token balances */

.table-wrap {
    overflow: visible;
    margin-top: 1rem;
  }

  .token-table {
    width: auto;       
    border-collapse: collapse;
    margin: 0 auto;
  }
  .token-table th,
  .token-table td {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 1rem;
    color: #000;
  }
.token-table thead {
  background: #f5f5f5;
}

.token-table td {
    color: #ffffff;
}

.animate__fadeInDown {
    --animate-duration: 0.8s;
    --animate-delay: 0.2s;
  }

/*————————————————————————————————————————————————————*/
/* Add space between top-selection message and first searchbar */
/*————————————————————————————————————————————————————*/
#selection-top {
    /* use the same gap as between buttons₁₋₃ and the first searchbar */
    margin-bottom: var(--gap-row1-search);
  }
  
  /* If you want extra breathing room above the searchbars wrapper as well: */
  .searchbars.desktop-only {
    margin-top: var(--gap-row1-search);
  }

/*───────────────────────────────────────*/
/*  RESPONSIVE BREAKPOINTS              */
/*───────────────────────────────────────*/

/* Basis: hamburger & mobile-menu immer verstecken */
.hamburger      { display: none; }
#mobile-menu    { display: none; }

/* ─── Mobile: bis 575.98px ──────────── */
@media (max-width: 575.98px) {
  /* Header: Desktop-Buttons verstecken, Hamburger zeigen */
  .header-buttons.desktop-only { display: none !important; }
  .hamburger {
    display: block !important;
    position: absolute;
    top: var(--header-pad-vert);
    right: var(--header-pad-horiz);
    z-index: 1001;
    background: none;
    border: none;
  }

  /* Mobile-Menü (nur Top-Buttons) als Fullscreen-Overlay */
  #mobile-menu {
    display: none;
    position: fixed;
    inset: 0; /* top:0;right:0;bottom:0;left:0 */
    background: rgba(0,0,0,0.95);
    padding-top: calc(var(--header-pad-vert) + 1rem);
    flex-direction: column;
    align-items: center;
    gap: var(--gap-searchbars);
    overflow-y: auto;
    z-index: 1000;
  }
  #mobile-menu.open {
    display: flex;
  }
  /* Top-Buttons zentrieren */
  #mobile-menu .header-buttons {
    display: flex !important;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  /* Suchfelder immer sichtbar lassen (nicht hinter Menü verstecken) */
  .searchbars.desktop-only {
    display: flex !important;
    flex-direction: column;
    gap: var(--gap-searchbars);
    width: 100%;
    padding: 0 var(--header-pad-horiz);
  }

  /* Hero: Breite/Height reset, font-size & center */
  .main-content h1 {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: 2rem !important;
    margin: 1rem auto 0.5rem !important;
    text-align: center !important;
  }
  .main-content h3 {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: 1rem !important;
    margin: 0.5rem auto 1.5rem !important;
    text-align: center !important;
  }

  /* Suchfelder: full width */
  .searchbar {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: var(--gap-searchbars) !important;
  }
  .searchbar input {
    font-size: 14px !important;
  }

  /* Option Buttons: 1-Spalte, mittig, nicht abgeschnitten */
  .options-grid,
  .options-grid-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: var(--gap-searchbars) !important;
    margin: var(--gap-searchbars) auto !important;
  }
  .option-btn {
    width: 100% !important;
    max-width: none !important;
  }
  /* Ausreichend Abstand unten, damit nichts clipt */
  .options-grid {
    margin-top: var(--gap-searchbars) !important;
  }
  .options-grid-bottom {
    margin-bottom: var(--gap-row2-footer) !important;
  }

  /* Resultate & Tabellen: full width & scrollbar */
  #result {
    width: 100% !important;
    padding: 0 var(--header-pad-horiz) !important;
    box-sizing: border-box;
  }
  .token-table.auto-width {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .token-table.auto-width table {
    width: 100% !important;
    white-space: nowrap !important;
  }
}

/* ─── Tablet: 576px–991.98px ─────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Hamburger verstecken, Desktop-Buttons wieder zeigen */
  .header-buttons.desktop-only { display: flex !important; }
  .hamburger                   { display: none !important; }
  #mobile-menu                 { display: none !important; }

  /* Hero etwas größer, mittig */
  .main-content h1 { font-size: 2.5rem !important; text-align: center; }
  .main-content h3 { font-size: 1.25rem !important; text-align: center; }

  /* Suchfelder: full width, max-600px */
  .searchbar {
    width: 100% !important;
    max-width: 600px !important;
    margin: var(--gap-searchbars) auto !important;
  }
  .searchbar input { font-size: 16px !important; }

  /* 2-Spalten Buttons */
  .options-grid,
  .options-grid-bottom {
    grid-template-columns: repeat(2,1fr) !important;
    width: 100% !important;
    gap: var(--gap-searchbars) !important;
    margin: var(--gap-searchbars) auto !important;
  }
  .option-btn {
    width: 100% !important;
    max-width: none !important;
  }

  /* Resultate weiter full width */
  #result { width: 100% !important; padding: 0 var(--header-pad-horiz) !important; }
}

/* ─── Desktop: ≥992px ─────────────────── */
@media (min-width: 992px) {
  /* Desktop-Buttons zeigen, Hamburger verstecken */
  .header-buttons.desktop-only { display: flex !important; }
  .hamburger                   { display: none !important; }
  #mobile-menu                 { display: none !important; }

  /* Hero zurück auf Designwerte */
  .main-content h1 { font-size: var(--h1-size) !important; }
  .main-content h3 { font-size: var(--h3-size) !important; }

  /* Suchfelder fixed-width */
  .searchbar {
    width: 703px !important;
    margin: 0 auto var(--gap-search2-row2) !important;
  }

  /* 3-Spalten Buttons */
  .options-grid,
  .options-grid-bottom {
    grid-template-columns: repeat(3,1fr) !important;
    width: 703px !important;
    margin: 0 auto !important;
    gap: var(--gap-row1-search) !important;
  }

  /* Resultate auto width */
  #result { width: auto !important; padding: 0 !important; }
}