/* in cima a style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap');

/* =========================
   BASE / RESET
========================= */
html, body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  background-color: #111111;
  color: #ebebeb;
  font-weight: 100;
  margin: 0;
  padding: 0;
}

p, input, button {
  font-size: 14px;
  line-height: 1.6;
}

label, .auth-links .forgot {
  font-size: 12px;
}

/* =========================
   FORM ELEMENTS
========================= */
input[type="text"],
input[type="email"],
input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: #010101;
  border: 1px solid #ebebeb;
  color: #ebebeb;
  font-size: 14px;
  border-radius: 2px;
  box-sizing: border-box;
  caret-color: #ebebeb;
  font-weight: 100;
}

input::placeholder { color: #ebebeb; text-decoration: underline; font-weight: 100;  }

input:focus {
  background-color: #010101;
  color: #ebebeb;
  border: 1px solid #ebebeb;
  outline: none;
  caret-color: #ebebeb;
  font-weight: 100; 
}

button {
  width: 100%;
  background-color: #ebebeb;
  color: #010101;
  padding: 12px;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 16px;
  font-weight: 100; 
}
button:hover { background-color: #ccc; }

/* =========================
   DESKTOP WARNING (BLOCK DESKTOP)
========================= */
#desktop-warning { display: none; }

@media (min-width: 1024px) {
  #desktop-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: #111111;
    color: #ebebeb;
    z-index: 9999;
    padding: 24px;
    text-align: center;
  }
  body > *:not(#desktop-warning) { display: none !important; }
}

/* =========================
   HEADER (TOP BAR)
========================= */
.header {
  height: 64px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #111111;
}

.header .logo {
  max-height: 40px;
  height: auto;
  width: auto;
  display: block;
}

.menu-icon {
  width: 2rem;    /* 32px */
  height: 1rem;   /* 16px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.menu-icon span {
  display: block;
  height: 0.094rem; /* ~1.5px */
  background-color: #ebebeb;
  border-radius: 2px;
}

/* =========================
   BOTTOM SECTION(BOTTOM BAR)
========================= */
.link-home {
      width: 1.875rem; /* Larghezza delle immagini (puoi modificarla) */
      height: 1.875rem; /* Altezza (opzionale: o lascia auto se preferisci) */
      margin-top: 2rem;
    }

.icon-label {
      margin-top: 0.313rem;
      margin-bottom: 2rem;
      text-decoration: none; 
    }
.icon-label a {
  text-decoration: none;
  color: inherit; /* opzionale: mantiene il colore del testo genitore */
}

.icon-label a:hover {
  text-decoration: none; /* assicura che non ricompaia al passaggio */
}

/* =========================
   LANDING PAGE
========================= */
.landing-title {
  display: block;
  color: #EBEBEB;
  font-size: 36px;
  font-weight: 500;
  padding: 0 16px;
  line-height: 1.2;
  text-align: center;
}

.landing-subtitle {
  margin-top:-15px;
  display: block;
  color: #b0b0b0;
  font-size: 16px;
  font-weight: 100;
  padding: 0 16px;
  line-height: 1.6;
  text-align: center;
}

  /* ===== HORIZONTAL SCROLL PANELS ===== */
   .panel-scroll {
 display: flex;
 gap: 12px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 padding-left: 16px;
 padding-right: 16px;
 scroll-padding-left: 16px;
 margin-top: 30px;
}


 .panel-scroll::-webkit-scrollbar {
   display: none;
 }

 /* FOOTER DELLA CARD: testo + pulsante */
.panel-footer-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 16px 4px 10px; /* <- aumentato spazio sopra (prima 10px) */
}


/* CARD STILE LINEAR */
.panel-card {
 flex: 0 0 76%;
 max-width: 340px;
 background: #1a1a1a;
 border-radius: 10px;
 padding: 20px 12px 10px; /* ← aumentato sopra e sotto */
 scroll-snap-align: start;
 box-shadow: 0 5px 5px rgba(0,0,0,0.6);
 border: 1px solid #161617;
 display: flex;
 flex-direction: column;
}


/* card tappabile tutta */
.panel-clickable {
 cursor: pointer;
}



/* Titolo */
.panel-title {
 font-size: 20px;
 font-weight: 500;
 line-height: 1.4;
 margin: 0;
}

/* Testo helper in basso */
.panel-helper {
 font-size: 12px;
 color: #b0b0b0;
 margin: 0px 4px 0;
 line-height: 1.5;
}


/* Pulsante tondo + in basso a destra */
.panel-plus-btn {
 all: unset;
 cursor: pointer;
 width: 32px;
 height: 32px;
 border-radius: 999px;
 border: 1px solid rgba(235,235,235,0.18);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 font-weight: 200;
 color: #ebebeb;
 margin-left: 12px;
 box-sizing: border-box;
}


.panel-plus-btn:hover {
 background: rgba(255,255,255,0.04);
}



.panel-plus-btn:hover {
 background: rgba(255,255,255,0.04);
}

.panel-illustration {
  display: flex;
  justify-content: center;   /* centra orizzontalmente */
  align-items: center;       /* opzionale: centra anche verticalmente */
}


/* =========================
   TOTAL BALANCE CARD
========================= */
.balance-section {
  background-color: #1a1a1a;
  border-radius: 2px;
  padding: 12px 16px;
  margin: 12px;
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center; /* centrato rispetto a label+cifra */
}

.balance-text p {
  line-height: 1.2;
  margin: 5px 0;
}

.balance-label {
  font-size: 0.875rem;
  color: #B0B0B0;
  font-weight: 300;
  margin: 0;
}

.balance-amount {
  color: #ebebeb;
  margin: 4px 0 0 0;
  font-size: 24px;
  font-weight: 300;
}

.deposit-button {
  background-color: #ebebeb;
  color: #111111;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  padding: 0.375rem 1.25rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

/* =========================
   ICON ROW (MISSION / REFERRAL / CHAT)
========================= */
.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;        /* 50px */
  padding: 24px 0;
}

.icon-box {
  width: 3.125rem;      /* 50px */
  height: 3.125rem;     /* 50px */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  border: 1px solid #ebebeb;
}

.icon-box a {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%;
}

.icon1, .icon2 { width: 1.563rem; height: 1.563rem; } /* 25x25 */
.icon3 { width: 2rem; height: 3rem; }                  /* 32x48 */

.icon-container {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.313rem; text-decoration: none;
}

.icon-label {
  color: #ebebeb;
  margin: 0;
  text-align: center;
  text-decoration: none !important;
}

/* =========================
   TABS (ROLE SWITCHER)
========================= */
.tab-header {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin: 0;
}

.tab-button {
  background-color: #010101;
  color: #4c4c4c;
  margin: 0.313rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 200;
  cursor: pointer;
  border: 0;
}

.tab-button.active {
  background-color: transparent;
  color: #ebebeb;
  font-size: 0.75rem;
  font-weight: 200;
  position: relative;
  padding-bottom: 4px;
}
.tab-button.active::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 40%;
  border-bottom: 0.031rem solid #ebebeb;
  position: absolute;
  left: 30%;
  bottom: 0;
}

/* =========================
   TEAMS LIST HEADER (Team/League — Price/Var)
========================= */
.teams-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  padding: 0;
  margin: 0px;              /* nessuno spazio sotto */
}

.team-card-header-row {
  display: flex;
  justify-content: space-between; /* uno a sx, uno a dx */
  align-items: center;            /* centra verticalmente */
  padding: 4px 15px;              /* spazio orizzontale interno */
  background-color: #111111;
  border: none;
  height: 23px;                   /* altezza compatta */
  margin-bottom: -10px;
}

.header-text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 100;
  color: #b0b0b0;
}

.teams-header p,
.teams-header div {
  margin: 0;
  line-height: 1.1;
  font-size: 12px;
  font-weight: 100;
  color: #B0B0B0;
 
}
.team-name-header { /* opzionale, se la usi in HTML */
  font-size: 12px; font-weight: 100; color: #B0B0B0;
}
.team-price-variation-header {
  text-align: right;
  font-size: 12px; font-weight: 100; color: #B0B0B0; 
}

.teams-list { margin: -15px 0px; padding: 0 15px; }

/* =========================
   TEAM CARD (RIGHE ELENCO)
========================= */
.team-card {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* sinistra info, destra prezzo */
  align-items: center;               /* allinea in alto: prima riga combacia */
  padding: 6px 10px;                   /* più compatto per “attaccare” alla header */
  margin: 5px 0;                    /* spazio verticale minimo tra righe */
  border: 1px solid #232323; /* separatore leggero */
  color: #ebebeb;
  font-family: 'Inter', sans-serif;
  background-color: #1a1a1a;
  border-radius: 2px;
  min-height: 55px;
}
/* Colonna sinistra: logo + testi */
.team-info { display: flex; align-items: center; gap: 10px;}

.team-logo { width: 40px; height: 40px; flex-shrink: 0; }
.team-logo img { width: 100%; height: 100%; object-fit: contain; display: block;}

.team-text { display: flex; flex-direction: column; }
.team-name  { margin: 0; font-size: 20px; font-weight: 300; color: #ebebeb; line-height: 1.2; }
.team-league{ margin: 2px 0 0 0; font-size: 0.875rem; color: #B0B0B0; line-height: 1.2; }

/* Colonna destra: prezzo + variation */
.team-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.team-price p { margin: 0; line-height: 1.2; }

/* Prezzo = come team-name */
.team-price p:first-child {
  font-size: 20px;
  font-weight: 300;
  color: #ebebeb;
}

/* Variation = come league (colore dinamico JS se vuoi verde/rosso) */
.team-price p:last-child {
  font-size: 0.875rem;
  color: #B0B0B0;
}

/* =========================
   PAGINA MARKETS
========================= */
.sticky-top-block {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: #010101;
}

#searchInput::placeholder {
  font-size: 16px;   /* placeholder stesso valore */
  color: #b0b0b0;
}


/* =========================
   TEAM PAGE
========================= */

.team-name-line {
  font-size: 14px;
  font-weight: 600;
  color: #ebebeb;
  padding: 0 16px;
}

.team-price-line {
  font-size: 24px;
  font-weight: 600;
  color: #ebebeb;
  padding: 0 16px;
  margin-top: -16px;
}

.team-variation-line {
  font-size: 14px;
  font-weight: 300;
  color: #ebebeb; /* neutro / 0 */
  padding: 0 16px;
  margin-top: -28px;
}
.team-variation-line.up { color: #26A17B; }   /* verde */
.team-variation-line.down { color: #E53935; } /* rosso */

#fancyChart {
    width: 100%;
    height: 360px;
    display: block;
    background-color: #111111;
    border-radius: 0px;
  }

 .divider {
  height: 2px;
  background: #232323;
  width: 100%;
  margin: 8px 0; /* spazio sopra/sotto */
} 
.odds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-header{
  display: flex;
  align-items: baseline;      /* allinea testi sulla linea di base */
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
}

.odds-box{
  padding: 8px 16px;
  margin-top:8px;
}

.odds-table{
  display: grid;
  grid-template-columns: 1fr auto; /* etichetta | valore */
  row-gap: 10px;
  column-gap: 12px;
  align-items: center;
}

.odd-label{
  color: #ebebeb;
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.odd-value{
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  font-variant-numeric: tabular-nums; /* numeri più leggibili */
}

.odd-value.good{ color: #26A17B; }  /* verde */
.odd-value.draw{ color: #ebebeb; }  /* verde */
.odd-value.bad{  color: #E53935; }  /* rosso */

.input-box{
  margin: 16px 16px 0;            /* 16px dx/sx come volevi */
  height: 44px;
  border: 1px solid #4c4c4c;
  border-radius: 2px;
  background: #111111;            /* rettangolo */
  display: flex;
  align-items: center;             /* centro verticale perfetto */
  padding: 0 12px;
  gap: 8px;
}

.input-field{
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;         /* lo sfondo è del box, non dell'input */
  color: #ebebeb;
  font-size: 14px;
  height: 44px;                    /* stessa altezza del box */
  line-height: 44px;               /* testo/placeholder centrati */
  padding: 0 0 0 8px;              /* no padding verticale */
  box-sizing: border-box;
  /* -webkit-appearance: none;        iOS fix */
}
.input-field::placeholder{ color:#b0b0b0; opacity:1; }

.input-suffix{
  color: #ebebeb;
  font-size: 14px;
  line-height: 44px;               /* centra il testo rispetto al box */
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* SOLO dentro la tua input-box */
/* INPUT: trasparente, senza bordo/ombra, niente highlight */
.input-box .input-field{
  flex: 1 1 auto;
  background: transparent !important;
  color: #ebebeb;
  font-size: 14px;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0; margin: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.input-box .input-field::placeholder{
  color: #b0b0b0;                      /* placeholder */
  opacity: 1;
}
.input-box .input-field,
.input-box .input-field::placeholder{
  text-decoration: none !important;
}

.buy-button-container {
        margin: 5px 16px 0 16px;
      }

      .buy-button {
        width: 100%;
        height: 45px;
        padding: 8px;
        background-color: #1e5631;
        color: #ebebeb;
        border: 0px solid #4c4c4c;
        font-size: 14px;
        font-weight: 300;
        border-radius: 2px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        margin-top: 4px;
        margin-bottom: 25px;
      }

      .buy-button:hover {
        background-color: #246c3e;
      }

      /* Canvas: dimensioni in CSS px (poi lo scaleremo per DPR) */
#fancyChart{
  width: 100%;
  height: 300px;      /* puoi portarlo a 240/260 se vuoi più dettaglio */
  display: block;
  margin-top: 8px;
}

/* =========================
   WALLET PAGE
========================= */

:root{
  --bg:#010101; --fg:#ebebeb; --fg-dim:#b0b0b0; --muted:#4c4c4c;
  --panel:#0c0c0c; --panel-outline:#121212;
  --danger:#B23A48; --success:#1E5631;
}

.balance-label {
  font-size: 14px;
  color: #b0b0b0b0;
  font-weight: 400;
  margin: 0;
}

.balance-label-bis {
  font-size: 14px;
  color: #b0b0b0b0;
  font-weight: 400;
  margin: 0;
  margin-top:0.5rem;
}

.balance-amount-wallet {
  color: #ebebeb;
  font-size: 20px;
  font-weight: 400;
  margin: 0px 0 0 0;
}

/* ✅ Riga con label a sinistra e valore a destra */
.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.button-row {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.button-row a {
    flex: 1;                  /* ogni bottone prende spazio uguale */
  }
/* Bottoni */
button.wallet-button, a.wallet-button{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  height:40px; padding:0 12px; border-radius:2px; border:1px solid var(--panel-outline);
  font-family:'Inter',sans-serif; font-weight:300; font-size:12px; line-height:1; text-decoration:none; cursor:pointer; flex:1 1 0%;
}
.wallet-button.dark{ background:#121212; color:#ebebeb; }
.wallet-button.light{ background:#ebebeb; color:#121212; border-color:#ebebeb; }

/* Tabs League */
.tabs{ display:flex; gap:8px; padding:8px 16px; overflow-x:auto; }
.tab-button{ background:#121212; color:#ebebeb; border:1px solid var(--panel-outline); border-radius:2px; padding:6px 10px; font-size:14px; cursor:pointer; white-space:nowrap; }
.tab-button.active{ background:#ebebeb; color:#121212; font-size:14px; }

/* Lista posizioni (vecchio layout 3 colonne) */
#positions-container{ padding: 0 0px 64px 0px; } /* 64px per non far coprire da eventuale bottom bar */

.player-card {
  width: calc(100% - 32px); /* per lasciare spazio laterale senza sforare */
  margin: 0 16px;           /* 16px a dx e sx */
  box-sizing: border-box;
  border-bottom: 1px solid var(--panel-outline);
  border-radius: 2px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  background-color: #1a1a1a;
}
.position-columns{
  display:flex; justify-content:space-between; gap:16px; padding:12px 16px;
}
.position-column{ display:flex; flex-direction:column; gap:2px; }

/* Old Antivist: label 10px, value 12px */
.position-label{ font-size:12px; color:var(--muted); margin:0; }
.position-value{ font-size:14px; color:var(--fg); margin:0 0 8px 0; font-weight:400; }

.profit{ color:var(--success); } .loss{ color:var(--danger); }

/* Riga bottoni sotto la card */
.action-row{ display:flex; gap:10px; padding:0 15px; align-items:stretch; margin-top:0px; }
.sell-btn{ background:var(--danger) !important; color:#ebebeb !important; border-color:var(--danger) !important; }

/* Responsive max width su desktop */
@media (min-width:768px){
  .wallet-box{ margin:16px auto; max-width:900px; }
  #positions-container{ max-width:900px; margin:0 auto; }
}

/* =========================
   ORDERS PAGE
========================= */
.orders-header-top {
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--panel-outline, #2a2a2a);
  background-color: #111111;
}

.header-row {
  display: flex;
  justify-content: space-between; /* sinistra ↔ destra */
  align-items: center;            /* allineamento verticale */
}

.left-info {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: #b0b0b0;
  text-align: left;
}

.right-info {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: #b0b0b0;
  text-align: right;
}

.orders-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0px;
}

/* Colonna sinistra (team e size) */
.orders-left-info {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #ebebeb;
  flex: 1;
}

/* Colonna destra (order type e data/ora) */
.orders-right-info {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
}

/* Tipologia ordine BUY/SELL */
.orders-right-info.buy {
  color: #1e5631; /* verde per BUY */
  font-weight: 100;
}
.orders-right-info.sell {
  color: #B23A48; /* rosso per SELL */
  font-weight: 100;
}

/* Valore size (importo in $) */
.orders-left-info.size {
  color: #b0b0b0;
  font-size: 14px;
}

/* Data e ora */
.orders-right-info.datetime {
  color: #b0b0b0;
  font-size: 14px;
}

/* Card generale (opzionale, per spacing) */
.order-card {
  border-bottom: 1px solid var(--panel-outline, #2a2a2a);
  padding: 12px 0px;
  border-radius: 2px;
}

.buy-text { color: #1E5631; font-weight: 100; }
.sell-text { color: #B23A48; font-weight: 100; }
.order-card {  border-bottom:1px solid #232323; padding:12px 16px; }
.orders-header-row { display:flex; justify-content:space-between; margin-bottom:5px; }
.orders-left-info, .orders-right-info { font-family: Inter, sans-serif; font-size: 14px; }