/* Stile base */
body {
    font-size: 14px; /* Dimensione font base */
    padding-bottom: 60px; /* Spazio per il footer fisso */
    font-weight:500;
}

.offcanvas-body ul li a.nav-link {
    font-size: 1rem;
}

.navbar-brand img {
    height: 50px;
}

.user-icon i {
    height: 50px;
    font-size: 50px;
    line-height: 50px;
}

/* Stile per la navbar tabs */
.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    background-color: #f8f9fa; /* Sfondo grigetto per tutta la navbar */
    border-radius: 10px; /* Bordi arrotondati */
    overflow: hidden; /* Previene lo sporgere dei contenuti */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leggera ombra per profondit? */
}

.nav-item {
    flex: 1; /* Distribuzione uniforme dello spazio */
    text-align: center;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px 15px;
    color: #6c757d85; /* Colore per link non attivi */
}

/* Stili specifici per il link attivo */
.nav-link.active {
    color: #000000 !important; /* Testo nero */
    background-color: #ffffff !important; /* Sfondo bianco per elemento attivo */
    font-weight: bold;
    border: none !important;
}

/* Contenitore principale */
.main-container {
    max-width: 800px;
    margin: 0 auto;
    /* padding: 0 15px; */
}

/* Stile per le righe delle scommesse con bordi arrotondati */
.table-container {
    margin: 0 auto;
    padding-bottom: 40px;
}

.table-header, .table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    text-align: center;
    font-size: 0.75rem;
    align-items: center;
}

.date-icon, .date-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: span 4;
}

.details {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 5px;
    grid-column: span 4;
}

.date {
    flex: 1;
}

.status {
    font-weight: bold;
    margin-left: 10px;
}


.table-header {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.table-row {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    background-color: #f8f9fa;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.table-row .date {
    font-size: 0.65rem;
    text-align: left;
}

/* Media queries per schermi piccoli */
@media (max-width: 360px) {
    .table-header, .table-row {
        font-size: 0.65rem;
    }

    .table-row .date {
        font-size: 0.6rem;
    }
}

.navbar-toggler {
    border: none !important; /* Rimuove il bordo del bottone */
    padding: 0;              /* Rimuove il padding per non alterare l'altezza */
    background: none;        /* Rimuove qualsiasi sfondo preimpostato */
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(0, 0, 0, 0.5)" stroke-width="2" stroke-linecap="round" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E'); /* Icona hamburger */
}

.logo {
    height: 43px !important;
}



.icon-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #6c757d;
}

.icon-item i {
    font-size: 24px;
    color: #6c757d;
    margin-bottom: 5px;
}

 .offcanvas-nav-link {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            color: inherit;
            background-color: #f8f9fa;
        }
        .offcanvas-nav-link .link-content {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }
        .offcanvas-nav-link i:first-child {
            margin-right: 10px;
        }
        .offcanvas-nav-link .arrow-icon {
            margin-left: auto;
        }
        
        .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}



    .fixed-footer {
        /* margin-top: 56px; */ /* Altezza del blocco bonus-assistenza-container */
    }


  .fixed-bottom {
            position: fixed;
            width: 100%;
            bottom: 0;
        }
        .bonus-assistenza-container {
            /* border-top: 1px solid #ddd; */
            background-color: #fff;
            padding: 10px;
        }
        .fixed-footer {
            border-top: 1px solid #ddd;
            background-color: #f8f9fa;
            padding: 10px 0;
        }
        .icon-container {
            display: flex;
            justify-content: space-around;
        }
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon-item i {
            font-size: 24px;
        }
        .icon-item span {
            font-size: 12px;
        }
        
.hidden {
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1;
}

.bonus-assistenza-container {
    transition: transform 0.5s ease-in-out;
    position: relative; /* Assicurati che l'elemento abbia un contesto di posizionamento */
    z-index: 1; /* Livello pi? basso */
}

.fixed-footer {
    position: relative;
    z-index: 2; /* Livello pi? alto */
}

 .icon-item a {
            color: inherit; /* Mantiene il colore dell'icona */
            text-decoration: none; /* Rimuove la sottolineatura del link */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
.user-icon a {
    color: inherit; /* Mantiene il colore dell'icona */
    text-decoration: none; /* Rimuove la sottolineatura del link */
}


/* Stile base */
body {
    font-size: 14px; /* Dimensione font base */
    padding-bottom: 60px; /* Spazio per il footer fisso */
    font-weight:500;
    background-color: #e4e4e6 !important;
}

.offcanvas-body ul li a.nav-link {
    font-size: 1rem;
}

.navbar-brand img {
    height: 50px;
}

.user-icon i {
    height: 50px;
    font-size: 50px;
    line-height: 50px;
}

/* Stile per la navbar tabs */
.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    background-color: #f8f9fa; /* Sfondo grigetto per tutta la navbar */
    border-radius: 10px; /* Bordi arrotondati */
    overflow: hidden; /* Previene lo sporgere dei contenuti */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leggera ombra per profondit? */
}

.nav-item {
    flex: 1; /* Distribuzione uniforme dello spazio */
    text-align: center;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px 15px;
    color: #6c757d85; /* Colore per link non attivi */
}

/* Stili specifici per il link attivo */
.nav-link.active {
    color: #000000 !important; /* Testo nero */
    background-color: #ffffff !important; /* Sfondo bianco per elemento attivo */
    font-weight: bold;
    border: none !important;
}

/* Contenitore principale */
.main-container {
    max-width: 800px;
    margin: 0 auto;
    /* padding: 0 15px; */
}

/* Stile per le righe delle scommesse con bordi arrotondati */
.table-container {
    margin: 0 auto;
    padding-bottom: 60px;
}

.table-header, .table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    text-align: center;
    font-size: 0.75rem;
    align-items: center;
}

.date-icon, .date-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: span 4;
}

.details {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 5px;
    grid-column: span 4;
}

.date {
    flex: 1;
}

.status {
    font-weight: bold;
    margin-left: 10px;
}


.table-header {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.table-row {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    background-color: #f8f9fa;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.table-row .date {
    font-size: 0.65rem;
    text-align: left;
}

/* Media queries per schermi piccoli */
@media (max-width: 360px) {
    .table-header, .table-row {
        font-size: 0.65rem;
    }

    .table-row .date {
        font-size: 0.6rem;
    }
}

.navbar-toggler {
    border: none !important; /* Rimuove il bordo del bottone */
    padding: 0;              /* Rimuove il padding per non alterare l'altezza */
    background: none;        /* Rimuove qualsiasi sfondo preimpostato */
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(0, 0, 0, 0.5)" stroke-width="2" stroke-linecap="round" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E'); /* Icona hamburger */
}

.logo {
    height: 40px !important;
    margin: 5px;
}



.icon-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
     background-color: #ccccce !important;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #6c757d;
}

.icon-item i {
    font-size: 24px;
    color: #6c757d;
    margin-bottom: 5px;
}

 .offcanvas-nav-link {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            color: inherit;
            background-color: #f8f9fa;
        }
        .offcanvas-nav-link .link-content {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }
        .offcanvas-nav-link i:first-child {
            margin-right: 10px;
        }
        .offcanvas-nav-link .arrow-icon {
            margin-left: auto;
        }
        
        .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}



    .fixed-footer {
        /* margin-top: 56px; */ /* Altezza del blocco bonus-assistenza-container */
    }


  .fixed-bottom {
            position: fixed;
            width: 100%;
            bottom: 0;
        }
        .bonus-assistenza-container {
            /* border-top: 1px solid #ddd; */
            background-color: #fff;
            padding: 10px;
        }
        .fixed-footer {
            border-top: 1px solid #ddd;
            background-color: #f8f9fa;
            padding: 10px 0;
        }
        .icon-container {
            display: flex;
            justify-content: space-around;
        }
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .icon-item i {
            font-size: 24px;
        }
        .icon-item span {
            font-size: 12px;
        }
        
.hidden {
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1;
}

.bonus-assistenza-container {
    transition: transform 0.5s ease-in-out;
    position: relative; /* Assicurati che l'elemento abbia un contesto di posizionamento */
    z-index: 1; /* Livello pi? basso */
}

.fixed-footer {
    position: relative;
    z-index: 2; /* Livello pi? alto */
}

 .icon-item a {
            color: inherit; /* Mantiene il colore dell'icona */
            text-decoration: none; /* Rimuove la sottolineatura del link */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
.user-icon a {
    color: inherit; /* Mantiene il colore dell'icona */
    text-decoration: none; /* Rimuove la sottolineatura del link */
}

.testo_mg {
 background: #00BCD4;}

.h1_mg {
  text-align:center !important;
  color: #eef3a3;
  font-weight: bold;
  font-size: 16px;
  /* margin-bottom: 10px; */
  }

.h2_mg {
   color: #000000;
   font-size: 13px;
   margin-bottom: 10px;
   text-align: center;
   }

.squadra_mg {
   color: #000000;
   font-size: 1.3em  !important;
   font-weight: bold  !important;
   float:left;
   /* margin-top: 30px; */
   }

label#evento2 {}

.form-control {
   color: #000000;
   font-size: 16px;
   width: 27% !important;
   /* float: left; */
   }

.modal-dialog {
  
  margin-top: 8rem !Important;
}


.footer {

    line-height: 12px;
    /* Vertically center the text there */
}

 .ora {
      font-size: smaller;
    }
    .modal-header {
      background-color: #0456a4;
      color: white;
      font-size: 24px;
      font-weight: bold;
      display: block;
      text-align: center;
    }
     .modal-title {
      font-size: 30px;
      font-weight: 700;
      line-height: 1 !Important;
    }
    .form-group .ora {
      display: block;
    }
    .grigetto {
      background-color: #d3d3d3;
    }
    .inline-items {
      display: flex;
      align-items: center;
    }
    .inline-items > div {
      margin-right: 10px;
    }
    .form-group {
      margin-bottom: 0rem;
      padding: 10px;
      border-radius: 10px; /* Angoli arrotondati */
    }
    .explanation {
      margin-top: 20px;
      padding: 15px;
      border-radius: 12px;
      background-color: #f0f8ff;
      border: 1px solid #0456a4;
      color: #0456a4;
      font-size: 16px;
    }
    .explanation ul {
      list-style-type: none;
      padding-left: 0;
    }
    .explanation li {
      margin-bottom: 10px;
    }
    .explanation strong {
      font-size: 18px;
      color: #0456a4;
    }
    .explanation a {
      color: #0456a4;
      text-decoration: underline;
    }
    
    
.install-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.6); /* sfondo scuro */
  z-index: 9990; /* sotto al bottone (9999) */
}

/* il bottone grande centrato che avevamo fatto prima */
.ad2hs-prompt {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;

  width: 80vw;
  max-width: 500px;
  height: 150px;

  padding: 20px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 16px;

  font-size: 30px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s, box-shadow 0.3s;
}


.ad2hs-prompt:hover {
  background-color: #0062cc;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}




#notifiche {
    position: fixed; /* Assicurati che il contenitore sia posizionato correttamente */
    width: 100%; /* Personalizza le dimensioni del contenitore in base alle tue esigenze */
    bottom:80px;
/* Personalizza le dimensioni del contenitore in base alle tue esigenze */
}


#notifiche .wonderpush-bell {
    position: absolute; /* Puoi personalizzare questa posizione come desideri */
    bottom: 28px !important; /* Adatta la posizione secondo le tue necessità */
    left: 23px; /* Adatta la posizione secondo le tue necessità */
}


#notification-message {margin-top: 35px !Important;/* margin-left: 25px !Important; */}

.wonderpush-bell .wonderpush-icon-container {
  
    width: 30px !important;
    height: 30px !Important;
    margin-top: 10px;
 
}


.wonderpush-bell.wonderpush-discrete {
    height: 45px !Important;
}

.notifications-active {
    opacity: 1; /* Trasparenza per notifiche attive */
}

.notifications-inactive {
    opacity: 1; /* Trasparenza per notifiche disattivate */
}

.key-vincenti {
     color: #3ec24f; /* Colore del testo */
}

.nobet {
   margin-top:50px;
    text-align: center;
    font-size: 18px;
    color:#afb4b9
    
}

#matchgol_li{
    display: none; /* Colore del testo */
}


 /* Stili specifici per iPhone */
        @media only screen and (max-width: 480px) {
            body.iphone #notifiche {
                position: static;
                width: auto;
                height: auto;
            }

            body.iphone #notifiche .wonderpush-bell {
                position: static;
                bottom: auto !important;
                left: auto !important;
            }

            body.iphone #notification-message {
                margin-top: 0 !important;
            }

            body.iphone .wonderpush-bell .wonderpush-icon-container {
                width: auto !important;
                height: auto !important;
                margin-top: 0;
            }
        }
        
        
        
        /* Icona utente bianca */
.navbar .fa-light.fa-user-large {
  color: #fff !important;
}

/* Hamburger bianco */
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  
}


/* L’offcanvas a sinistra occupa al massimo il 90% dello schermo */
#offcanvasMenu{
  --bs-offcanvas-width: 80vw;  /* 90% della viewport width */
}


@media (min-width: 576px){
  #offcanvasMenu{
    --bs-offcanvas-width: min(90vw, 380px);
  }
}


/* Tab attiva in arancione #db6122 (resta in bold come ora) */
.nav-tabs .nav-link.active {
  color: #db6122 !important;
}

/* (Opzionale) stesso arancione al passaggio mouse sulle altre tab */
.nav-tabs .nav-link:hover {
  color: #db6122;
}


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

/* ====== HOME GRID ====== */
#home-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Card */
#home-grid .home-card{
  position: relative;
  background: linear-gradient(135deg, #DB6122 40%, #f47d3f 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 16px;
  padding: 16px;
  min-height: 130px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* (opzionale) un filo di “lift” su hover/active */
#home-grid .home-card:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
#home-grid .home-card .icon{ font-size: 28px; line-height: 1; opacity: .9; }
#home-grid .home-card .title{font-weight: 600;font-size: 36px;line-height: 1.1;}
#home-grid .home-card .subtitle{font-size: 20px;opacity: .9;margin-top: 2px;}
#home-grid .home-card .arrow{ position: absolute; right: 12px; top: 10px; font-size: 18px; opacity: .9; }
#home-grid .home-card-lg{ grid-column: 1 / span 2; }

/* ====== BANNER / CAROUSEL ====== */
/* Wrapper banner: prende tutta la riga della grid, ma resta max 500px e centrato */
#home-grid .hero{
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 500px;
  /* margin: 0 auto 14px; */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
 
  background: #000;         /* letterbox se necessario */
}

/* Treno di slide */
#home-grid .hero .slides{
  display: flex;
  height: 100%;             /* riempie l'altezza del wrapper (definita da aspect-ratio) */
  transition: transform .45s ease;
}

/* Ogni slide riempie il wrapper e centra l'immagine */
#home-grid .hero .slide{
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Immagine proporzionata e centrata, senza crop */
#home-grid .hero .slide img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* Dots */
#home-grid .hero .dots{
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; gap: 6px; justify-content: center; align-items: center;
}
#home-grid .hero .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 0; padding: 0; cursor: pointer;
}
#home-grid .hero .dot.active{
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
}


/* Griglia */
#home-grid{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
}

/* Card base */
.home-card{
  position:relative;
  background:#db6122;
  color:#fff;
  text-decoration:none;
  border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  min-height:120px /* più alta per far “respirare” l’icona grande */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

/* Testo al centro e in corsivo */
.home-card .label{
  z-index:2;
  font-style:italic;
  line-height:1.1;
}
.home-card .label .title{ font-weight:800; font-size:20px; }
.home-card .label .subtitle{ font-size:12px; opacity:.9; margin-top:4px; }

/* Icona grande in basso a destra */
.home-card .icon-bg{
  position:absolute;
  right:10px;
  bottom:6px;
  font-size:clamp(56px, 16vw, 90px);
  line-height:1;
  color:#fff;
  opacity: .45;
  pointer-events:none; /* non interferisce con i click */
}

/* Freccia in alto a destra per la card grande */
.home-card .arrow{
  position:absolute; right:12px; top:10px;
  font-size:18px; opacity:.9; z-index:2;
}

/* Card larga su due colonne */
.home-card-lg{ grid-column:1 / span 2; min-height:132px; }

/* Piccolo ritocco hover (facoltativo) */
.home-card:active{ filter:brightness(0.96); transform:translateY(1px); }



/* Altezza standard per tutti i bottoni */
.home-card{
  /* min-height:160px !important; */              /* <-- come richiesto */
}

/* Solo il bottone "Checkbet" (quello largo) più basso */
#open-checkbet.home-card-lg{
  min-height: 103px !important;               /* <-- 83 px */
}

/* (opzionale) icona di sfondo più piccola nel bottone basso,
   così non “spinge” il testo */
#open-checkbet .icon-bg{
  font-size:clamp(36px, 9vw, 56px);
}

/* freccia in alto resta visibile anche con card bassa */
#open-checkbet .arrow{
  right:12px; top:10px; font-size:18px;
}


.fixed-footer{
  background:#fff; border-top:1px solid #eee; padding:10px 0 12px;
  display:flex; justify-content:center;
}
.assist-whatsapp{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
.assist-whatsapp i{ font-size:30px; color:#25D366; line-height:1; }
.assist-whatsapp span{ font-size:12px; color:#333; font-weight:600; }



/* Barra home in basso */
.footer-home-bar{
  border-top:1px solid #ddd;
  height:60px;
  margin-top:20px; /* 20px di spazio sopra la barra */
  background-color: #ccccce !important;
}

/* Pulsanti Bonus e WhatsApp */
.footer-home-bar .icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:13px;
  text-align:center;
  text-decoration:none;
  color:#333;
}

/* Icone */
.footer-home-bar .icon-item i{
  font-size:24px;
  margin-bottom:2px;
  line-height:1;
}

/* Colori specifici */
.footer-home-bar .fa-gift{ color:#DC6831; }      /* arancio del brand */
.footer-home-bar .fa-whatsapp{ color:#25D366; }  /* verde WhatsApp */

/* Link dentro WhatsApp */
.footer-home-bar a{ color:inherit; text-decoration:none; }


/* SCROLLER orizzontale */
.top-events{
  display: flex;
  gap: 16px;                       /* fa vedere un pezzo della card successiva */
  overflow-x: auto;
  padding: 0 0 12px 0;             /* allineato coi bottoni sopra */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  grid-column: 1 / span 2;  <-- non serve, rimuovi */
  

}


/* Badge tickets */
.top-badge{
  position: absolute;
  top: 6px; right: 6px;
  background:#eef2ff;
  color:#0f172a;
  font-weight:700;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  z-index: 2;
}



/* Data sopra */
.match-date{
  text-align: center;
  font-size: 12px;
  /* font-style: italic; */
  font-weight: bold;
  color: #676565;
  margin-bottom: 6px;
}



.dash{ color:#6b7280; }

/* ====== GRIGLIA QUOTE 1-X-2 ====== */
.odds-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.odd-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  text-align:center;
}

.odd-label{
  background:#e5e7eb;
  color:#4b5563;
  font-weight:700;
  padding:6px 0;
  font-size:13px;
}

.odd-value{
  padding: 8px 0 10px;
  font-weight: 800;
  font-size: 14px;
  color:#111827;
  min-height:24px;
}


/* CENTRARE DAVVERO LA TESTATA + FONT PIÙ GRANDE */
.match-head{
  display: flex;                 /* da grid → flex per centraggio perfetto */
  align-items: center;
  justify-content: center;       /* centro orizzontale */
  gap: 12px;
  margin: 6px 0 12px;
  width: 100%;
  text-align: center;
}

.top-title.with-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;                   /* niente stretching */
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-names{
  font-weight: 900;
  font-size: 188px;               /* ↑ più grande */
  line-height: 1.25;
  color:#111827;
}

.team-logo{
  width: 34px;                   /* leggermente più grandi */
  height: 34px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* opzionale: su schermi larghi aumenta ancora un filo */
@media (min-width: 420px){
  .match-names{ font-size: 20px; }
  .team-logo{ width: 36px; height: 36px; }
}

.navbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
}


.offcanvas-start { width: 70%!Important;}


.miegiocate {
    
    margin-left:5px;

}


/* box delle quote 1-X-2 arancioni con font bianco */
.odd-card{
  background: #DB6122;
  /* border: 1px solid #DB6122; */
}

/* “1 / X / 2” in alto */
.odd-label{
  /* background: rgba(255,255,255,0.22); */ /* leggera fascia più chiara */
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  color: #000000;
}

/* valore quota */
.odd-value{
  color: #ffffff;
  font-weight: 800;
}
/* Contenitore generale (opzionale se vuoi più respiro) */
.bind-block {
  text-align: center;
  padding: 24px 16px 8px;
  color: aliceblue;
}

/* Logo Bgame sopra al testo */
.logo_bind {
  display: block;
  max-width: 160px;
  width: 55%;
  margin: 16px auto 10px;
}

/* Titolo "Ciao {{ user_id }}" */
.logo_bind + h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #dc6831;
  margin: 0 0 4px;
}

/* Sottotitolo */
.sub {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 18px;
}

/* Righe dei pulsanti */
.row {
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}

/* Pulsanti: mobile first, tutti a tutta larghezza e arrotondati */
.row .btn {
  width: 100%;
  border-radius: 999px;
  font-weight: 600;
  padding: 10px 16px;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

/* Primario: arancione Bgame */
.btn-primary.ad2hs-prompt {
  background-color: #db6122;
  border-color: #db6122;
  color: #fff;
  box-shadow: 0 4px 8px rgba(219, 97, 34, 0.25);
}

.btn-primary.ad2hs-prompt:hover,
.btn-primary.ad2hs-prompt:active {
  background-color: #c45216;
  border-color: #c45216;
}

/* Outline (Installa CheckBet / Login) */
.btn-outline {
  background-color: #fff;
  border: 1px solid #db6122;
  color: #db6122;
}

.btn-outline:hover,
.btn-outline:active {
  background-color: #db6122;
  color: #fff;
}
.bind-block{
background-color: #666666;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px;
}

/* Piccola rifinitura specifica mobile */
@media (max-width: 576px) {
  .logo_bind {
    max-width: 140px;
    margin-top: 24px;
  }
  
  .logo_bind + h1 {
    font-size: 1.3rem;
  }

  .sub {
    font-size: 0.9rem;
      color:#ffffff
      
  }
.bind-block{background-color: #333333;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;margin: 0;padding: 24px;/* color: antiquewhite; */border-radius: 20px;   /* ⬅️ arrotonda gli angoli */}


    
}


.btn-success
 {border-radius: 20px!Important;}

.modal-content {
  
    background-color: #E5F1FD!Important;
border-radius: 20px!Important;
  
}

.dammi5
 {
  
    background-color: #E5F1FD!Important;
border-radius: 20px!Important;
  
}
  #subbonusModalLabel{font-size:20px;
                       color:#5d666b!Important;
                       font-weight:500}
                       
                       
                       
                       
                       
 #cb-lock-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.cb-lock-box {
  text-align: center;
  padding: 24px;
  background: #222;
  border-radius: 20px;
  width: 80%;
  max-width: 320px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#cb-unlock-btn {
  margin-top: 20px;
  padding: 12px 20px;
  font-size: 17px;
  background: #ff7a00;
  border: none;
  border-radius: 999px;
  color: white;
  font-weight: 600;
}


.ios-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 200px/* <--- alza il box rispetto al bordo inferiore */
  z-index: 9999;
}



.ios-prompt {
  position: fixed;          /* lo stacchi dal flusso della pagina */
  left: 12px;
  right: 12px;
  bottom: 80px;             /* o top: 20px se lo vuoi in alto */
  z-index: 9999;            /* sopra tutto */
  background: #111;
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}


.ios-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 250px;
  bottom: auto;
  z-index: 9999;
  /* resto uguale */
}


/* ====== CARD CONTAINER (80% riga) ====== */
.top-card{
  flex: 0 0 80%;
  max-width: 80%;
  scroll-snap-align: start;
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* wrapper link: NON deve alterare layout */
.match-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ====== CORPO DELLA CARD (cornice soft) ====== */
.match-card{
  background:#f6f7f9;
  font-size:14px;
  border-radius:14px;
  padding:12px 14px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);

  /* bordo arancione finale (unico) */
  border:2px solid #DB6122;
}



/* ====== notifiche local*/
.icon-item .icon-link{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.icon-item .icon-link span{
  font-size: 12px;
}

#pushModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pushModal .btn-close{
  margin: 0;
}
#pushModal .btn-close{
  transform: scale(0.9);     /* prova 0.8 se ancora grande */
  opacity: .8;
}
#pushModal .btn-close:hover{
  opacity: 1;
}


/* topbar minimale per la X */
.push-modal-topbar{
  position: relative;
  height: 34px;              /* piccola fascia bianca, non "banda blu" */
  /* background: #a54242; */
}

/* X più piccola e in alto a destra */
.push-modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  transform: scale(0.8);
  opacity: .7;
}
.push-modal-close:hover{ opacity: 1; }

.push-info-link{
  font-size: .95em;
  text-decoration: none;
}
.push-info-link:hover{
  text-decoration: underline;
}



/* Stato OFF (default): bianco */
.push-floating-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  font-weight: 600;
  color: #111;
}

/* ✅ Stato ON: sfondo rosa, testo bianco */
.push-floating.is-on .push-floating-btn{
  background: #db6122;
  color: #fff;
}

/* icona sempre leggibile */
.push-floating-btn i{
  font-size: 20px;
}

/* icona bianca quando ON */
.push-floating.is-on .push-floating-btn i{
  color: #fff;
}

.push-floating{
  position: fixed;
  left: 14px;
  bottom: 100px;        /* altezza sopra footer-full: se serve alza/abbassa */
  z-index: 999999;
}
 
 /* Telegram flottante sopra footer-full */
.tg-floating{
  position: fixed;
  right: 14px;
  bottom: 104px;       /* uguale alla campanella */
  z-index: 999999;
}

.tg-floating-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  font-weight: 600;
  color: #111;
  text-decoration: none;
}

.tg-floating-btn i{
  font-size: 20px;
  color: #229ED9; /* telegram */
}

.tg-floating-btn:hover{
  text-decoration: none;
  transform: translateY(-1px);
}


 /* blocco attivazone notifiche */

.cb-softpush-inner{
  background: #f1f3f5;;   /* grigetto */
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* prima riga più a sinistra */
.cb-softpush-head{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;   /* ✅ sposta a sx */
  text-align: left;              /* ✅ testo a sx */
  gap: 12px;
  width: 100%;
}

.cb-softpush-copy{
  min-width: 0;
  flex: 1;
  text-align: left;              /* ✅ */
}

.cb-softpush-title{
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 4px;
  text-align: left;              /* ✅ */
}

.cb-softpush-sub{
  font-size: 14px;
  line-height: 1.35;
  color: #6b7280;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  text-align: left;              /* ✅ */
}

/* bottoni più larghi */
.cb-softpush-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;                   /* ✅ occupa tutta la riga */
}

.cb-softpush-actions .btn{
  width: 100%;                   /* ✅ ogni bottone riempie la sua colonna */
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 14px;
}

.cb-softpush-footer{
  display: flex;
  justify-content: space-between;  /* uno a sx, uno a dx */
  align-items: center;
  width: 100%;
  gap: 12px;
}

.cb-softpush-footer a:first-child{
  margin-right: auto;              /* resta a sinistra */
}

.cb-softpush-footer a:last-child{
  margin-left: auto;               /* va a destra */
  text-align: right;
}

/* popup di notifica “soft” (non modal, non bloccante) */
.cb-softpush{
  position: fixed;
  left: 12px; right: 12px;
  top: 350px;
  z-index: 99998;
}


.cb-softpush-inner{
  background: #f1f3f5;
  border: 1px solid #e5e7eb;
}


.home-attive-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.18);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  top: 50%;
  transform: translateY(-170%) translateX(10%); /* ← entrambi nella stessa riga */
}

.home-attive-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cde6f;
  flex-shrink: 0;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.3; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}