/**
 * Styles CSS pour le plugin Defibril Ecommerce
 * 
 * Ce fichier contient les styles pour les fonctionnalités front-end du plugin
 */

/**
 * Classe pour masquer un champ par défaut
 * 
 * Cette classe est utilisée pour masquer les champs conditionnels
 * qui doivent être affichés uniquement dans certaines conditions
 */
/* #info-maintenance masqué par défaut ; affiché uniquement si connecté ET sous maintenance (body.user_maintenance) */
.page #popup-maintenance,
.page  #info-maintenance,
.def_hidden {
  display: none !important;
}

/* SIRET optionnel pour association : masquer l’astérisque obligatoire sur le label */
.def_siret.def-siret-optional label > span.required,
.def-siret-optional label > span.required {
  display: none !important;
}

/* Popup maintenance : uniquement quand le body a la classe user_maintenance (ajoutée par le plugin si connecté + sous maintenance) */

body.def-maintenance-blocked #info-maintenance {
  display: block !important;
}

/* Ne pas afficher la popup maintenance sur la page mon-compte */

body.user_maintenance.woocommerce-account #info-maintenance {
  display: block !important;
}

body.user_maintenance.woocommerce-account #popup-maintenance ,
body.def-maintenance-blocked #popup-maintenance{
  display: flex !important;
}

/* Masquer toute la modal Elementor (overlay + cadre) quand pas sous maintenance (sélecteur :has() = navigateurs récents) */
body:not(.user_maintenance):not(.def-maintenance-blocked) .elementor-popup-modal:has(#popup-maintenance),
body:not(.user_maintenance):not(.def-maintenance-blocked) .elementor-popup-modal:has(#info-maintenance) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Afficher la modal Elementor maintenance quand connecté + sous maintenance (body.user_maintenance ou def-maintenance-blocked) */
body.user_maintenance .elementor-popup-modal:has(#popup-maintenance),
body.user_maintenance .elementor-popup-modal:has(#info-maintenance),
body.def-maintenance-blocked .elementor-popup-modal:has(#popup-maintenance),
body.def-maintenance-blocked .elementor-popup-modal:has(#info-maintenance) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Classe appliquée directement sur la modal par JS : garantit display flex !important même si :has() non supporté ou cache */
.elementor-popup-modal.def-maintenance-modal-visible,
[id^="elementor-popup-modal-"].def-maintenance-modal-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}





/**
 * Classe pour afficher un champ
 * 
 * Cette classe est utilisée pour afficher les champs conditionnels
 * Elle surcharge la classe def_hidden grâce à !important
 * lorsque les conditions sont remplies
 */
.def_visible {
  display: block !important;
  animation: def_fadeIn 0.3s ease-in;
}

@keyframes def_fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Masquer le bouton "Commander" sur le checkout si l'utilisateur est sous maintenance */
.def-maintenance-blocked.woocommerce-checkout
  .wc-block-components-checkout-place-order-button,
.def-maintenance-blocked.woocommerce-checkout #place_order,
.def-maintenance-blocked.woocommerce-checkout
  button[type="submit"][name="woocommerce_checkout_place_order"],
.def-maintenance-blocked.woocommerce-checkout button[type="submit"].button.alt,
.def-maintenance-blocked.woocommerce-checkout
  input[type="submit"][name="woocommerce_checkout_place_order"],
.def-maintenance-blocked.woocommerce-checkout
  .woocommerce-checkout-place-order
  button,
.def-maintenance-blocked.woocommerce-checkout
  .woocommerce-checkout-place-order
  input[type="submit"],
.def-maintenance-blocked .btn-qty.qty-add,
.def-maintenance-blocked .btn-qty.qty-sub,
.def-maintenance-blocked form.checkout button[type="submit"],
.def-maintenance-blocked form.checkout input[type="submit"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* ============================================
   AFFICHAGE PERSONNALISÉ DES PRIX AVEC RÉDUCTION
   ============================================ */

/* Conteneur principal du prix avec réduction */
.def-price-with-discount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0;
}

/* Prix réduit (nouveau prix) en haut */
.def-price-with-discount .def-price-sale {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: block;
  order: 1;
}

/* Prix régulier barré (ancien prix) en dessous */
.def-price-with-discount .def-price-regular {
  font-size: 1.2em;
  color: #999;
  text-decoration: line-through;
  display: block;
  order: 2;
}

/* Badge de réduction % (en dessous) */
.def-price-with-discount .def-discount-badge {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.3em;
  padding: 6px 24px;
  border-radius: 8px 0 0 8px;
  display:flex;
  align-items:center;
  width: fit-content;
  order: 1;
}

/* Différence en argent (en dessous) */
.def-price-with-discount .def-savings-text {
  font-size: 0.95em;
  color: #666;
  display: block;
  order: 4;
}

/* Masquer le TTC si l'utilisateur est pro ou customer */
.def-user-pro .woocommerce-price-suffix,
.def-user-pro .def-price-with-discount .woocommerce-price-suffix,
.def-user-customer .woocommerce-price-suffix,
.def-user-customer .def-price-with-discount .woocommerce-price-suffix {
  display: none !important;
}

.def-user-customer .price,
.def-user-pro .price {
  display: flex;
}

.def-user-customer .price .highlight,
.def-user-pro .price .highlight {
  order: 1;
}
.def-user-customer .price .strike,
.def-user-pro .price .strike {
  order: 2;
}

.def-price-top {
  display: flex;
}

.def-price-top .def-price-sale {
  font-size: 2.5em;
}

.def-price-top .def-price-regular {
  font-size: 1.5em;
  font-style: italic;
  display: flex;
  align-items: center;
}

.def-price-inside {
  background-color: #dff4ee;
  border-radius: 10px;
  padding:0;
  border: 1px solid var(--e-global-color-fd3a9ff);
  align-content: center;
  gap: 30px;
  display: flex;
}

.def-discount-badge {
  background-color: var(--e-global-color-fd3a9ff);
  color: #ffffff;
  font-weight: bold;
  font-size: 1em;
  padding: 6px 10px;
  border-radius: 4px;
}

.def-price-regular {
  margin-left: 10px;
}

.def-discount-badge-bottom {
  order: 2;
  padding:7px;
  margin-top: -3px;
}

.def-price-sale {
  color: var(--e-global-color-text) !important;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}

.def-savings-text.top {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.def-price-with-discount .price-end {
  margin-left: 8px !important;
}

.def-maintenance-notice-product {
  display: block !important;
  max-width: 1220px;
  margin: 0 auto !important;
}

.def-maintenance-notice-product::before{
  content: "";
  display: none !important;
}

.single-product .elementor-loop-container .def-price-inside {
  display: none !important;
}

.single-product .elementor-loop-container .def-price-top .def-price-sale,
.single-product .elementor-loop-container .def-price-top .def-price-regular
 {
  color: #ffba00 !important;
  font-family: "Poppins", Sans-serif;
  font-size: 17px;
  font-weight: 600;
}