/* ======================================================================
   JAGWA – COMPAGNON DESIGNER
   ----------------------------------------------------------------------
   Version : UX canonisée octobre 2025
   Auteur  : JAGWA
   Fichier : /wp-content/plugins/jagwa-compagnon/assets/css/frontend.css
   Objectif : uniformiser, corriger et maintenir le style du configurateur
   sans modifier le code du plugin Product Designer.
   ======================================================================

   SOMMAIRE :
   ----------------------------------------------------------------------
   1. Masquages et nettoyages généraux
   2. Bloc prix (haut du designer)
   3. Boutons “Ajouter au panier” / “Retour”
   4. Undo / Redo
   5. Prix dans l’onglet “Quantité”
   6. Affinage mobile
   7. Apparence des modèles (templates)
   8. Ajustements d’interface (sticky, retour boutique, save)
   9. Comportement viewport / scroll mobile
   10. Bouton Tools + ergonomie mobile / desktop
   ====================================================================== */


/* ======================================================================
   1. MASQUAGES ET NETTOYAGES GÉNÉRAUX
   ====================================================================== */

/* Supprime le menu “Fichier” */
div.ui.simple.dropdown.item:has(> i.file.icon) { display: none !important; }

/* Supprime les boutons “Copier” et “Filtres” */
#pdr-object-copy-selected,
#pdr-object-filters { display: none !important; }



/* ======================================================================
   2. BLOC PRIX (EN HAUT, À CÔTÉ DU PANIER)
   ====================================================================== */

/* Masque le bouton vert avec icône “billet” */
.ui.labeled.button > .ui.basic.green.button {
  display: none !important;
}

/* Supprime le badge vert + son chevron */
.ui.basic.left.pointing.green.label {
  all: unset !important;
  display: block !important;
  text-align: center !important;
  margin: 0 0 8px 0 !important;
}
.ui.basic.left.pointing.green.label::before { content: none !important; }

/* Style du prix + ajout du suffixe “HT” */
.pdr-product-total-price {
  display: block !important;
  text-align: center !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.pdr-product-total-price::after {
  content: " HT";                   /* ✅ version valide */
  margin-left: 4px;                 /* espacement UX réel */
  font-size: 0.9em;
  color: #000 !important;
}

/* Supprime les icônes vertes répétées autour du prix */
.ui.labeled.button .ui.basic.green.button,
.right.item .ui.basic.green.button,
.pdr-top-actions .ui.basic.green.button {
  display: none !important;
}



/* ======================================================================
   3. BOUTONS “AJOUTER / RETOUR”
   ====================================================================== */

/* Aligne prix + boutons verticalement et centre le tout */
.right.item .button,
.pdr-top-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}

/* Boutons uniformisés (noirs, centrés, arrondis) */
.pdr-cart-button.ui.button,
.right.item .ui.animated.secondary.button,
.pdr-return-button.ui.button {
  display: inline-block !important;
  width: auto !important;
  min-width: 160px;
  background: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  margin: 0 auto !important;
  text-align: center !important;
}



/* ======================================================================
   4. UNDO / REDO
   ====================================================================== */

.pdr-canvas-area { text-align: center !important; }

.pdr-button-undo,
.pdr-button-redo {
  display: inline-block !important;
  margin: 0 8px 12px !important;
  vertical-align: middle !important;
}

/* Centre aussi la zone de dessin */
#pdr-drawing-area { margin: 0 auto !important; }



/* ======================================================================
   5. PRIX DANS ONGLET “QUANTITÉ”
   ====================================================================== */

/* Supprime le badge vert du titre */
.pdr-product-details-form a.ui.large.green.tag.label { display: none !important; }



/* ======================================================================
   6. AFFINAGE MOBILE
   ====================================================================== */

@media (max-width: 767px) {
  /* garde l’empilement et le centrage */
  .right.item .button,
  .pdr-top-actions { align-items: center !important; }

  /* légère largeur mini sur mobile */
  .pdr-cart-button.ui.button,
  .right.item .ui.animated.secondary.button,
  .pdr-return-button.ui.button { min-width: 170px; }
}



/* ======================================================================
   7. APPARENCE DES MODÈLES (TEMPLATES)
   ====================================================================== */

/* Supprime les effets rouges d’origine */
.pdr-templates-container .pdr-template,
.pdr-templates-container .pdr-template img,
.pdr-clipart-item,
.pdr-clipart-item img {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
}

/* Supprime les pseudo-cadres */
.pdr-templates-container .pdr-template::before,
.pdr-clipart-item::before { content: none !important; }

/* Ajoute un fin contour noir au survol ou à la sélection */
.pdr-templates-container .pdr-template:hover,
.pdr-templates-container .pdr-template.active,
.pdr-templates-container .pdr-template.selected,
.pdr-clipart-item:hover,
.pdr-clipart-item.active,
.pdr-clipart-item.selected {
  border: 1px solid #000 !important;
  outline: 1px solid #000 !important;
  box-shadow: none !important;
}

/* Sécurité : si le plugin ajoute “.red” */
.pdr-templates-container .pdr-template.red,
.pdr-clipart-item.red {
  border-color: #000 !important;
  outline-color: #000 !important;
  box-shadow: none !important;
}



/* ======================================================================
   8. AJUSTEMENTS D’INTERFACE
   ====================================================================== */

/* Supprime le sticky du header du designer */
.ui.sticky.menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Masque “Retour à la boutique” */
.pdr-back-to-shop { display: none !important; }

/* Centre le bouton “Enregistrer le stencil” */
.pdr-switch-section .pdr-float-right {
  float: none !important;
  text-align: center !important;
}
.pdr-switch-section .pdr-save-design {
  display: inline-block !important;
  margin: 15px auto !important;
}



/* ======================================================================
   9. COMPORTEMENT VIEWPORT / SCROLL MOBILE
   ====================================================================== */

/* Empêche le scroll élastique mobile de recalculer le viewport */
html, body {
  overscroll-behavior: none;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

@supports (height: 100dvh) {
  .pdr-container.section__height,
  #canvas,
  .pdr-drawing-area,
  .canvas-container {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
}



/* ======================================================================
   10. BOUTON TOOLS + ERGONOMIE MOBILE / DESKTOP
   ====================================================================== */

/* === MOBILE === */
@media (max-width: 768px) {
  /* Centre le bouton Tools */
  .pdr-object-tools {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto 16px auto !important;
  }

  .pdr-object-tools .pdr-object-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 6px 10px;
  }

  /* Rétablit la visibilité du menu Tools (flèches/supprimer calque) */
  .pdr-container.section__height,
  #canvas,
  .pdr-drawing-area,
  .canvas-container,
  .pdr-toolbar { overflow: visible !important; }

  /* S’assure que la popup Tools passe au-dessus du canvas */
  .ui.fluid.popup.pdr-object-tools-popup,
  .ui.dropdown .menu {
    z-index: 10010 !important;
    overflow: visible !important;
  }

  /* Espacement sous la barre Tools */
  .pdr-toolbar { margin-bottom: 16px !important; }

  /* Centrage Tools + Undo/Redo */
  #pdr-drawing-area .ui.grid .row,
  #pdr-drawing-area .pdr-object-tools { text-align: center; }

  #pdr-drawing-area .pdr-object-tools .pdr-object-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  #pdr-drawing-area .ui.grid { margin-bottom: 16px; }
  #pdr-drawing-area, #pdr-drawing-area .canvas-container { overflow: visible; }
  .pdr-object-tools-popup { z-index: 10010; }

  #canvas { text-align: center; }
  #canvas .pdr-button-undo,
  #canvas .pdr-button-redo {
    display: inline-flex;
    margin: 0 6px 12px;
    float: none;
  }

  /* Supprime la bande blanche (footer vide) */
  body.pdr-designer-body.dimmable > main + .ui.footer.segment,
  body.pdr-designer-body.dimmable > .ui.footer.segment,
  body.pdr-designer-body.dimmable .ui.footer.segment.ui.footer.segment {
    display: none !important;
  }
}

/* === DESKTOP === */
@media (min-width: 769px) {
  [class*="pdr-toolbar"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pdr-object-tools { margin-bottom: 12px !important; }
}

/* Fallback global */
.pdr-object-tools .pdr-object-btn { margin-bottom: 12px !important; }

/* ======================================================================
   FIN DU FICHIER
   ====================================================================== */