/*
 * STYLES mSport - CSS per form iscrizioni
 * by M.SOFT Srl (http://www.msoftsrl.it)
 * Copyright (c) 2025 M.SOFT Srl
 * File: www/assets/css/styles.css
 */

/* ============================================
   HEADER COMUNE
   ============================================ */
.evento-header {
   background: linear-gradient(135deg, #000 0%, #333 100%);
   color: white;
   padding: 1rem 0;
}


/* ============================================
   CARD EVENTI
   ============================================ */

.evento-card {
   transition: transform 0.2s, box-shadow 0.2s;
   cursor: pointer;
   height: 100%;
   border: 1px solid #dee2e6;
}

.evento-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.evento-card-header {
   min-height: 160px;
   overflow: hidden;
   padding: 20px;
   position: relative;
}
.evento-img {
   max-width: 80%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   /* Centratura verticale */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.badge-sport {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 0.85rem;
   padding: 0.5rem 0.75rem;
   z-index: 10;
}

/* ============================================
   HEADER EVENTI
   ============================================ */
.posti-badge {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 500;
}
.no-eventi {
   text-align: center;
   padding: 4rem 2rem;
}

.no-eventi i {
   font-size: 4rem;
   color: #6c757d;
   margin-bottom: 1rem;
}



/* ============================================
   PAGINA INDEX - SELEZIONE PERCORSI
   ============================================ */
.percorso-card {
   cursor: pointer;
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.percorso-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.percorso-card.selected {
   border-color: #007bff;
   background-color: #f8f9ff;
}

.carrello-floating {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1050;
}

.quota-info {
   background: #e3f2fd;
   border-left: 4px solid #2196f3;
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0 5px 5px 0;
}

.prezzo-evidenziato {
   font-size: 1.5rem;
   font-weight: bold;
   color: #28a745;
}

.form-label {
   font-size: 14px;
}

.prodotti-section {
   background: #f8f9fa;
   border-radius: 10px;
   padding: 1.5rem;
   margin-top: 2rem;
}

.prodotto-card {
   background: white;
   border: 2px solid #e9ecef;
   border-radius: 8px;
   padding: 1rem;
   margin-bottom: 1rem;
   transition: all 0.3s ease;
}

.prodotto-card:hover {
   border-color: #007bff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.prodotto-card.selected {
   border-color: #28a745;
   background-color: #f8fff8;
}

.prodotto-img {
   width: 60px;
   height: 60px;
   object-fit: cover;
   border-radius: 8px;
}

.prezzo-calcolato {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 8px;
   padding: 1rem;
   margin-top: 1rem;
}

.badge-nosconti {
   background: #6c757d;
   color: white;
}

/* ============================================
   PAGINA CARRELLO - GESTIONE ISCRIZIONI
   ============================================ */
.iscrizione-card {
   transition: all 0.3s ease;
   border-left: 4px solid #28a745;
}

.iscrizione-card:hover {
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.coupon-applied {
   background: linear-gradient(45deg, #28a745, #20c997);
   color: white;
}

.prezzo-originale {
   text-decoration: line-through;
   color: #6c757d;
   font-size: 0.9rem;
}

.prezzo-scontato {
   color: #28a745;
   font-weight: bold;
   font-size: 1.1rem;
}

.totali-box {
   background: #f8f9fa;
   border: 2px solid #e9ecef;
   border-radius: 10px;
   position: sticky;
   top: 20px;
}

.btn-checkout {
   background: linear-gradient(45deg, #007bff, #0056b3);
   border: none;
   font-size: 1.1rem;
   font-weight: bold;
   padding: 12px 24px;
   color: white;
}

.btn-checkout:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
   color: white;
}

.coupon-form {
   background: #e3f2fd;
   /* border-left: 4px solid #2196f3; */
   border-radius: 5px;
}

.empty-cart {
   text-align: center;
   padding: 4rem 2rem;
   color: #6c757d;
}

.empty-cart i {
   font-size: 4rem;
   margin-bottom: 1rem;
   opacity: 0.5;
}


/* ============================================
   PAGINA PAGAMENTO
   ============================================ */
.payment-container {
   max-width: 800px;
   margin: 0 auto;
}

.metodo-pagamento {
   cursor: pointer;
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.metodo-pagamento:hover {
   border-color: #007bff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.metodo-pagamento input:checked+label {
   color: #007bff;
   font-weight: bold;
}

.metodo-pagamento:has(input:checked) {
   border-color: #007bff;
   background-color: #f8f9ff;
}

.commissioni-info {
   background-color: #e7f3ff;
   border-left: 4px solid #007bff;
}

.riepilogo-carrello {
   background-color: #f8f9fa;
   border-radius: 8px;
   padding: 20px;
}

.payment-secure {
   background: linear-gradient(45deg, #28a745, #20c997);
   color: white;
   padding: 10px;
   border-radius: 5px;
   text-align: center;
   margin-bottom: 20px;
}

.step-indicator {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
}

.step {
   padding: 8px 16px;
   border-radius: 20px;
   margin: 0 5px;
   background-color: #e9ecef;
   color: #6c757d;
}

.step.active {
   background-color: #007bff;
   color: white;
}

.step.completed {
   background-color: #28a745;
   color: white;
}


/* ============================================
   COMPONENTI COMUNI
   ============================================ */
.loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
   .evento-header {
      padding: 1.5rem 0;
   }

   .evento-header h1 {
      font-size: 1.8rem;
   }

   .evento-img {
      max-width: 100%;
   }

   .badge-sport {
      font-size: 0.75rem;
      padding: 0.35rem 0.6rem;
   }

   .carrello-floating {
      bottom: 15px;
      right: 15px;
   }

   .prodotto-card {
      padding: 0.75rem;
   }

   .prodotto-img {
      width: 45px;
      height: 45px;
   }

   .quota-info {
      margin: 0.5rem 0;
      padding: 0.75rem;
   }

   .prezzo-evidenziato {
      font-size: 1.25rem;
   }

   .empty-cart {
      padding: 2rem 1rem;
   }

   .empty-cart i {
      font-size: 3rem;
   }

   .totali-box {
      position: static;
      margin-top: 2rem;
   }
}
@media (max-width: 576px) {
   .evento-header h1 {
      font-size: 1.5rem;
   }

   .evento-img {
      height: 150px;
   }

   .no-eventi {
      padding: 2rem 1rem;
   }

   .no-eventi i {
      font-size: 3rem;
   }
}