/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/


body {
  background: linear-gradient(135deg, #8896ab 0%, #a3a1c9 100%);
  color: #fff; /* Assurez-vous que la couleur du texte est lisible sur ce fond */
  font-family: 'auto'; /* Optionnel: définissez une police globale */
  margin: 0; /* Élimine la marge par défaut pour utiliser pleinement le fond */
  padding: 0; /* Élimine le padding par défaut */

}
.navbar{
  height: 60px;
}

/* Assurez-vous que le contenu de chaque page est enveloppé d'une manière qui ne cache pas le fond, par exemple: */
.content-wrapper {
  background: rgba(255, 255, 255, 0.8); /* Pour les contenus, utilisez un fond légèrement transparent pour maintenir la lisibilité */
  border-radius: 10px; /* Optionnel: ajoute des bords arrondis pour un look moderne */
  padding: 15px; /* Ajoute un peu d'espace autour du contenu */
  margin: 15px; /* Ajoute de l'espace autour du wrapper pour ne pas coller aux bords de la fenêtre du navigateur */
}


select.wsf-field ~ .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #fbfb0b !important; /* Modern green color */
  color: rgb(0, 0, 0); /* White text for better contrast */
  border: 1px solid #388E3C; /* Slightly darker green border for depth */
  border-radius: 50%; /* Keeping the circular shape */
  font-size: 14px;
  font-weight: bold; /* Bolder font for the numbers */
  margin: 5px;
  -webkit-margin-end: 5px;
  margin-inline-end: 5px;
  width: 35px; /* Slightly larger for better visibility */
  height: 35px;
  line-height: 35px; /* Adjusted for the new size */
  text-align: center;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Adding a subtle shadow for a modern look */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    width: 100%;
    float: none;
    margin: 0 auto;
}

.woocommerce-checkout #order_review {
    text-align: center;
}


/* Product Catalog Grid Styles */

/* Base grid container */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjusts spacing between products */
  margin: 0 auto;
  padding: 0;
}

/* Individual product styling */
.woocommerce ul.products li.product {
  flex: 0 1 calc(25% - 10px); /* 4 products per row */
  box-sizing: border-box;
  margin-bottom: 20px; /* Space below each product */
}

/* Product image and details styling */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  display: block;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  text-align: center;
  margin-top: 10px; /* Space above the product title */
}

/* Adjustments for medium screens */
@media only screen and (max-width: 768px) {
  .woocommerce ul.products li.product {
      flex: 0 1 calc(33.333% - 10px); /* 3 products per row on medium screens */
  }
}

/* Adjustments for larger screens */
@media only screen and (min-width: 769px) {
  .woocommerce ul.products li.product {
      flex: 0 1 calc(20% - 10px); /* 5 products per row on larger screens */
  }
}

/* Style de base pour la section eloto */
.eloto-section {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Exemple de police */
  color: #333; /* Couleur du texte */
  background-color: #f4f4f4; /* Couleur de fond de la section */
  padding: 20px; /* Padding autour du contenu de la section */
  border-radius: 5px; /* Bords arrondis */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre portée légère */
}


/* Autres styles */


.eloto-home {
    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    color: #fff;
}

.header-content h1 {
    font-size: 2.5rem;
    color: #fff;
}

.header-content .lead {
    font-size: 1.25rem;
    color: #dcdcdc;
}

.woocommerce button.button  {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 10px 30px;
  width: 80%;
  max-width: 250px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 10px; /* Ajout d'une marge autour de chaque bouton */
}

.woocommerce input.button {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 10px 30px;
  width: 80%;
  max-width: 250px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 10px; /* Ajout d'une marge autour de chaque bouton */
}



.woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td
{
  background: linear-gradient(135deg, #8896ab 0%, #a3a1c9 100%);
}
.woocommerce-checkout #payment{
  color: #333;
  font-weight: bold;
}

.action-buttons .action-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  text-decoration: none;
  border-radius: 25px;
  padding: 10px 30px;
  width: 80%;
  max-width: 250px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 10px; /* Ajout d'une marge autour de chaque bouton */
}

.action-buttons .action-btn .icon {
  margin-right: 10px;
  font-size: 1.5rem;
}

.action-buttons .action-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.3);
}

.action-buttons .action-btn:active {
  transform: translateY(-1px);
}


@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2rem;
    }

    .header-content .lead {
        font-size: 1rem;
    }
}
<script>
document.querySelectorAll('.action-btn').forEach(button => {
    button.onmouseover = () => {
        button.classList.add('pulse');
    };
    button.onmouseleave = () => {
        button.classList.remove('pulse');
    };
});
</script>
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 1s infinite;
}

.pion-rectangle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7em;
  color: white;
  border-radius: 4px;
  padding: 2px 5px;
  min-width: 28px;
  text-align: center;
  margin: 1px;
}

.badge-danger {
  background-color: #dc3545;
}

.badge-primary {
  background-color: #007bff;
}

.points-total {
  display: inline-block;
  padding: 2px 5px;
  font-size: 0.7em;
  color: #ffffff;
  background-color: #17a2b8;
  border-radius: 4px;
}

/* Ajustement pour l'affichage réduit */
.table {
  font-size: 0.75em;
}

.table-responsive-sm {
  width: 100%;
  overflow-x: hidden;
}

@media (max-width: 576px) {
  .table {
      font-size: 0.65em;
  }
  .pion-rectangle {
      font-size: 0.6em;
      min-width: 22px;
  }
}