/* 
 * Tour guidato - Stili personalizzati per Shepherd.js
 * Creato per Musica Collaborativa
 */

/* Stile per il pulsante di avvio del tour */
#startTourButton {
  background: #ff9800;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10000;
  transition: background 0.2s, box-shadow 0.2s;
}
#startTourButton:hover {
  background: #e65100;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

/* Classe per posizionare il pulsante del tour inline invece che fisso */
.tour-button-inline {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  margin: 20px auto !important;
  display: inline-block !important;
}

/* Stili per la finestra di dialogo iniziale */
.tour-initial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.tour-initial-dialog {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.tour-initial-dialog h2 {
  color: #524be3;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 20px;
}

.tour-initial-dialog p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #333;
}

.tour-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.tour-btn {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tour-btn-primary {
  background-color: #524be3;
  color: white;
}

.tour-btn-primary:hover {
  background-color: #3f39c9;
}

.tour-btn-secondary {
  background-color: #6c757d;
  color: white;
}

.tour-btn-secondary:hover {
  background-color: #5a6268;
}

/* RESET COMPLETO STILE SHEPHERD */
/* Stile base per tutti i tooltip */
.shepherd-element {
  max-width: 320px !important;
  z-index: 10000 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  background: white !important;
}

/* Header più compatta */
.shepherd-header {
  padding: 8px 16px !important;
  background: #f8f9fa !important;
  border-bottom: 1px solid #eee !important;
  min-height: auto !important;
}

.shepherd-title {
  font-size: 16px !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* Contenuto più compatto */
.shepherd-text {
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Footer più compatto */
.shepherd-footer {
  padding: 8px 16px !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Bottoni più compatti */
.shepherd-button {
  padding: 6px 12px !important;
  margin-left: 8px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  font-weight: normal !important;
}

/* Freccia più visibile */
.shepherd-arrow {
  border-width: 8px !important;
}

/* Rimuovi animazioni e transizioni */
.shepherd-element, .shepherd-arrow {
  transition: none !important;
}

/* Posizionamento fisso per tutti i tooltip */
.shepherd-element {
  position: fixed !important;
}

/* Bottone di chiusura più piccolo */
.shepherd-cancel-icon {
  margin: 0 !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Evidenziazione elementi */
.tour-highlighted-button {
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.8) !important;
  border: 2px solid #ff9800 !important;
  position: relative !important;
  z-index: 9999 !important;
}

/* Overlay di sfondo */
.shepherd-modal-overlay-container {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

/* Assicurati che il tooltip sia sempre visibile */
.shepherd-element {
  z-index: 10000 !important;
  max-width: 400px !important;
  font-size: 16px !important;
}

/* Migliora la visibilità della freccia del tooltip */
.shepherd-arrow {
  border-width: 8px !important;
}

/* Migliora l'overlay per focalizzare meglio l'elemento evidenziato */
.shepherd-modal-overlay-container {
  opacity: 0.7 !important;
}
/* Assicurati che i tooltip siano sempre in primo piano */
.shepherd-element {
  z-index: 10000 !important;
  max-width: 350px !important;
  font-size: 16px !important;
  position: fixed !important;  /* Forza posizione fixed */
}

/* Aumenta la visibilità del tooltip */
.shepherd-text {
  padding: 15px !important;
  background-color: white !important;
  color: #333 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
  border-radius: 5px !important;
}

/* Migliora il posizionamento dei tooltip */
.shepherd-element {
  z-index: 10000 !important;
  font-size: 16px !important;
  max-width: 450px !important;  /* Larghezza predefinita aumentata */
}

/* Classi per controllare la larghezza dei tooltip */
.shepherd-element.shepherd-step-wide {
  width: 600px !important;
  max-width: 600px !important;
}

.shepherd-element.shepherd-step-extra-wide {
  width: 700px !important;
  max-width: 700px !important;
}

/* Previene il centraggio automatico solo per lo step 7b */
.shepherd-element[data-shepherd-step-id="step-gruppo-test-extra"] {
  position: fixed !important;
  left: auto !important;
  top: 120px !important;
  right: 20px !important;
  margin: 0 !important;
  transform: none !important;
  max-width: 300px !important;
}

/* Previene il centraggio automatico solo per lo step 7tris */
.shepherd-element[data-shepherd-step-id="step-gruppo-test-tris"] {
  position: fixed !important;
  left: auto !important;
  top: 120px !important;
  right: 20px !important;
  margin: 0 !important;
  transform: none !important;
  max-width: 300px !important;
}

/* Box informativo extra-largo per il welcome step */
.shepherd-element[data-shepherd-step-id="welcome"] {
  max-width: 800px !important;
  width: 80% !important;
}

/* Assicura che il tooltip sia sempre visibile e non tagliato */
.shepherd-element[data-popper-placement="top"] {
  margin-bottom: 10px !important;
}

.shepherd-element[data-popper-placement="bottom"] {
  margin-top: 10px !important;
}

.shepherd-element[data-popper-placement="left"] {
  margin-right: 10px !important;
}

.shepherd-element[data-popper-placement="right"] {
  margin-left: 10px !important;
}

/* Migliora la visibilità del contenuto del tooltip */
.shepherd-text {
  padding: 15px !important;
}

/* Forza il posizionamento assoluto per i tooltip */
.shepherd-element.shepherd-step-fixed-width {
  position: fixed !important;
}

/* Stile per i pulsanti primari e secondari */
.shepherd-button-primary {
  background-color: #007bff !important;
  color: white !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  border-radius: 3px !important;
  border: none !important;
  margin-left: 5px !important;
  height: 28px !important;
  line-height: 20px !important;
}

.shepherd-button-primary:hover {
  background-color: #0069d9 !important;
}

.shepherd-button-secondary {
  background-color: #6c757d !important;
  color: white !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  border-radius: 3px !important;
  border: none !important;
  margin-left: 5px !important;
  height: 28px !important;
  line-height: 20px !important;
}

.shepherd-button-secondary:hover {
  background-color: #5a6268 !important;
}

/* Footer più compatto per i pulsanti */
.shepherd-footer {
  padding: 6px 10px !important;
  min-height: 50px !important;
}