.mainPosBg{
    background-image: url('../images/pos-bg.jpg'); 
    background-size: cover;
}

/* ✅ Boutons tactiles */
button, .btn {
  font-size: 1.2rem;
  padding: 0.75rem 1.2rem;
  border-radius: 8px;
}

/* ✅ Input & select plus grands */
input, select {
  font-size: 1.1rem;
  padding: 0.6rem;
}

/* ✅ Cart items: texte lehibe */
#cartItems td {
  font-size: 1.1rem;
}

/* ✅ Modal: largeur max sur tablette */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: 95%;
  }
}

/* ✅ Plein écran bouton */
#fullscreenBtn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

/* ✅ Boutons tactiles */
.btn, .btn-primary, .btn-danger, .btn-warning {
  font-size: 1.2rem;
  padding: 0.75rem 1.2rem;
  border-radius: 8px;
}

/* ✅ Input & select plus grands */
input, select {
  font-size: 1.1rem;
  padding: 0.6rem;
}

/* ✅ Table texte lehibe */
table td, table th {
  font-size: 1.1rem;
}

/* ✅ Modal largeur max sur tablette */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: 95%;
  }
}

/* ✅ Animation douce */
.card, .btn, .modal-content {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.03);
}

/* ✅ Plein écran bouton */
#fullscreenBtn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

body.dark-mode {
  background-color: #1e1e2f;
  color: #fff;
}

body.dark-mode .card {
  background-color: #2c2c3c;
  border-color: #444;
}

body.dark-mode .btn {
  background-color: #444;
  color: #fff;
}

#finalPaymentModal input {
  font-size: 1.2rem;
  padding: 0.75rem;
}

#btnClientSuivant {
  font-size: 1.2rem;
  padding: 0.75rem 1.5rem;
}