/* Aggiungi qui gli stili CSS per il tuo biglietto */
body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  background-color: #f0f0f0;
  font-size: 18px;  
  min-height: 100vh; 
  margin-top: 5px; /* Aggiunto margine superiore */
}




.card {
    background-color: #fff;
    padding: 10px 10px; /* Riduciamo il padding */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

button {
    padding: 8px 0px; /* Riduciamo il padding */
    border: none; 
    border-radius: 5px;
    background-color: #FFFFFF; 
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.card_WA {
    background-color: #fff;
    padding: 2px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center; 
    width: 90%; /* Riduciamo la larghezza */
    margin: 0 auto; 
}

.card img {
    width: 100%; /* Immagine responsive */
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
}

body .esterno { 
    display: block;
    width: 90%; /* Riduciamo la larghezza */
    margin: 5px auto; /* Riduciamo il margine */
    padding: 8px; /* Riduciamo il padding */
    font-size: 14px; /* Riduciamo la dimensione del font */
    color: white;
    background-color: #28a745; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.card button {
    display: block; 
    width: 90%; /* Riduciamo la larghezza */
    margin: 10px auto; /* Riduciamo il margine */
    padding: 10px 15px; /* Riduciamo il padding */
    font-size: 16px; 
    font-weight: bold; 
    color: white; 
    background-color: #C60606; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

#pulsanti-esterni .esterno { 
    display: block;
    width: 90%; /* Riduciamo la larghezza */
    margin: 5px auto; /* Riduciamo il margine */
    padding: 10px; /* Riduciamo il padding */
    font-size: 18px; /* Riduciamo la dimensione del font */
    color: white;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
    
}

#pulsanti-esterni .esternoB { 
    display: block;
    width: 90%; /* Riduciamo la larghezza */
    margin: 5px auto; /* Riduciamo il margine */
    padding: 8px; /* Riduciamo il padding */
    font-size: 14px; /* Riduciamo la dimensione del font */
    color: white;
    background-color: #FFFFFF; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#iosInstructions {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 100; 
}

/* Media query per schermi piccoli */
@media (max-width: 400px) {
/* Aumenta la dimensione del font */
body {
  font-size: 18px;  /* Aumentato a 18px */
}


.card h1 {
  margin-top: -10px;
  margin-bottom: -10px;  /* Aggiusta il valore negativo in base alle tue esigenze */
}

/* Riduci il padding per compattare il layout */
.card {
  padding: 10px 10px; /* Ridotto a 15px */
}

.card p {
  font-size: 22px; /* Riduci leggermente la dimensione del font */
   margin-bottom: 5px;
 margin-top: 5px;
    
}


/* Riduci la dimensione dell'immagine */
.card img {
  width: 90%; /* Ridotto al 90% */
  margin-bottom: 1px;
}

/* Riduci la dimensione dei pulsanti */

  
.card button {
  padding: 15px 0px; /* Aumenta il padding verticale */
  font-size: 18px;  /* Aumenta la dimensione del font */
  
}


.esterno {
    padding: 8px 8px; /* Aumenta il padding verticale e orizzontale */
    font-size: 22px; /* Questo valore sembra eccessivo, forse intendevi 20px? */ 
  }

}