/* forza il comportamento di hidden contro Bootstrap */
[hidden] { display: none !important; }


/* --- Header bar in flex (override del grid globale) --- */
.bar{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;            /* va su due righe su mobile */
  padding:12px 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.actions{
  margin-left:auto;          /* porta i bottoni a destra su desktop */
  display:flex;
  gap:8px;
}

/* --- Area contenuto centrata (solo flex) --- */
.ivr-wrap{
  min-height: 100dvh;        /* viewport dinamico mobile-friendly */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}

/* --- Card IVR (flex column) --- */
.ivr-card{
  width:100%;
  max-width:520px;
  background:#fff;           /* colori fissi, niente tema browser */
  color:#111;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.20);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.ivr-card h1{
  margin:0;
  font-size:20px;
  text-align:center;
}
.ivr-code{
  text-align:center;
  font-weight:800;
  letter-spacing:.04em;
  font-size:clamp(28px, 8vw, 56px);
}
.ivr-msg{
  text-align:center;
  font-size:14px;
  opacity:.85;
  min-height:20px;
}
.ivr-actions{
  display:flex;
  justify-content:center;
}

/* --- Logo header --- */
.brand .logo{
  max-height:75px;
  height:auto;
  width:auto;
  display:block;
}

/* --- Mobile tweaks --- */
@media (max-width: 640px){
  .bar{
    flex-direction:column;   /* brand sopra, azioni sotto */
    align-items:stretch;
  }
  .actions{
    margin-left:0;
    justify-content:flex-end;
    width:100%;
  }
  .ivr-card{
    padding:20px;
    border-radius:12px;
  }

  .brand-container{
    flex-direction: column;
  }

  #btnBackCal{
    width: 100%;
  }
}

/* Schermi molto piccoli */
@media (max-width:400px){
  .ivr-card{
    border-radius:10px;
    padding:18px;
  }
  .brand .logo{ max-height:64px; }

  
}