/* =====================================================================
   03 · COMPOSANTS — boutons, notices, quantité, fenêtres (modales)
   ---------------------------------------------------------------------
   À PROPOS DES !important
   WooCommerce, le thème parent et le plugin WooFood imposent beaucoup
   de couleurs en !important. Plutôt que d'empiler des sélecteurs à
   rallonge (html body …), les rares !important du thème sont regroupés
   dans des blocs « @layer overrides ».
   Règle CSS : un !important placé dans une couche (@layer) passe devant
   tous les !important hors couche, quel que soit le sélecteur.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BOUTONS
   ---------------------------------------------------------------------
   Un seul rendu pour tous les boutons (WooCommerce, WooFood, Bootstrap).
   Les variantes ne modifient que 3 variables locales :
     --_bg : fond     --_fg : texte     --_bd : bordure
   Les variantes utilisent :where() (spécificité nulle) : c'est l'ordre
   des blocs ci-dessous qui décide → secondaire, puis principal.
   --------------------------------------------------------------------- */

/* 1.1 Rendu commun — liste de TOUS les boutons stylés par le thème */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.btn,
.woofood-product-loop .product-button .button,
.woofood-address-wrapper .woofood-address-check-btn,
a.wf_start_order_btn,
button.wf_address_changer_btn,
.edit-address-icon,
.woofood-mini-cart__buttons.buttons a,
.modal__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 44px;
  margin: 0;
  padding: .55em 1.35em;
  font-family: var(--brand-font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  border: 2px solid var(--_bd);
  border-radius: var(--brand-radius-btn);
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--ui-speed), border-color var(--ui-speed), color var(--ui-speed), transform var(--ui-speed);
}

@layer overrides {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .btn,
  .woofood-product-loop .product-button .button,
  .woofood-address-wrapper .woofood-address-check-btn,
  a.wf_start_order_btn,
  button.wf_address_changer_btn,
  .edit-address-icon,
  .woofood-mini-cart__buttons.buttons a,
  .modal__btn-primary {
    color: var(--_fg) !important;
    background: var(--_bg) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* 1.2 Secondaire (contour) — rendu par défaut */
:where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
       .woocommerce #respond input#submit, .btn) {
  --_bg: transparent;
  --_fg: var(--ui-btn2-color);
  --_bd: currentColor;
}

:where(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
       .woocommerce #respond input#submit, .btn):hover {
  --_bg: var(--ui-btn2-color);
  --_fg: var(--brand-surface);
  --_bd: var(--ui-btn2-color);
}

/* 1.3 Principal (plein) — une action principale par écran */
:where(
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt,
  .woocommerce #respond input#submit.alt,
  .btn-primary,
  .btn-theme,
  .woocommerce .woocommerce-form-login__submit,
  .woocommerce .woocommerce-form-register__submit,
  .woocommerce button[name="save_account_details"],
  .woocommerce button[name="save_address"],
  .woocommerce-mini-cart__buttons a.checkout,
  .woocommerce .return-to-shop .button,
  .woofood-product-loop .product-button .button,
  .woofood-address-wrapper .woofood-address-check-btn,
  a.wf_start_order_btn,
  button.wf_address_changer_btn,
  .edit-address-icon,
  .woofood-mini-cart__buttons.buttons a,
  .modal__btn-primary
) {
  --_bg: var(--ui-btn-bg);
  --_fg: var(--ui-btn-text);
  --_bd: var(--ui-btn-bg);
}

:where(
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt,
  .woocommerce #respond input#submit.alt,
  .btn-primary,
  .btn-theme,
  .woocommerce .woocommerce-form-login__submit,
  .woocommerce .woocommerce-form-register__submit,
  .woocommerce button[name="save_account_details"],
  .woocommerce button[name="save_address"],
  .woocommerce-mini-cart__buttons a.checkout,
  .woocommerce .return-to-shop .button,
  .woofood-product-loop .product-button .button,
  .woofood-address-wrapper .woofood-address-check-btn,
  a.wf_start_order_btn,
  button.wf_address_changer_btn,
  .edit-address-icon,
  .woofood-mini-cart__buttons.buttons a,
  .modal__btn-primary
):hover {
  --_bg: var(--ui-btn-bg-hover);
  --_fg: var(--ui-btn-text);
  --_bd: var(--ui-btn-bg-hover);
}

/* 1.4 Effet d'appui + état désactivé */
.woocommerce .button:active,
.btn:active {
  transform: scale(.98);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button[disabled],
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ---------------------------------------------------------------------
   2. NOTICES WOOCOMMERCE ET NOTIFICATIONS
   --------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  --_accent: var(--brand-accent);
  position: relative;
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
  list-style: none;
  color: var(--ui-text);
  background: var(--ui-accent-soft);
  border: 0;
  border-left: 4px solid var(--_accent);
  border-radius: var(--brand-radius-sm);
}

.woocommerce-message { --_accent: var(--brand-success); background: var(--ui-success-soft); }
.woocommerce-error   { --_accent: var(--brand-danger);  background: var(--ui-danger-soft); }

.woocommerce-error li { margin: 0; list-style: none; }

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  min-height: 36px;
  margin: -.25rem 0 0 1rem;
  padding: .35em 1em;
}

/* Le lien « Vous avez un code promo ? » est inutile : le formulaire promo
   est toujours affiché au checkout (voir 06-shop.css). */
.woocommerce-form-coupon-toggle { display: none; }

/* Toast « Produit ajouté au panier » (WooFood) */
.wf_cart_notice {
  color: var(--brand-success);
  background: var(--brand-surface);
  border: 1px solid var(--brand-success);
  border-radius: var(--brand-radius-sm);
  box-shadow: var(--ui-shadow-md);
}

/* Montant minimum de commande (mini-panier WooFood) */
.woofood-mini-cart-min-message {
  color: var(--ui-text);
  background: var(--ui-accent-soft);
  border-radius: var(--brand-radius-sm);
}

/* ---------------------------------------------------------------------
   3. SÉLECTEUR DE QUANTITÉ ( − 1 + )
   Le thème parent ajoute les boutons .qty-change-button autour du champ.
   div.quantity uniquement : dans le mini-panier, span.quantity n'est que
   le texte « 1 × 45,90 € ».
   --------------------------------------------------------------------- */
div.quantity {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: var(--brand-surface);
  border: 1.5px solid var(--ui-border-strong);
  border-radius: var(--brand-radius-btn);
}

.quantity .qty-change-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  transition: background-color var(--ui-speed);
}

.quantity .qty-change-button i { margin: 0; }

.quantity input.qty {
  float: none;
  width: 44px;
  max-width: none;
  height: 40px;
  min-height: 0;
  padding: 0;
  font-weight: 600;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity input.qty:focus { box-shadow: none; }

.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

@layer overrides {
  .quantity .qty-change-button {
    color: var(--ui-text) !important;
    background: transparent !important;
  }

  .quantity .qty-change-button:hover {
    color: var(--brand-primary) !important;
    background: var(--ui-primary-soft) !important;
  }

  .quantity .qty-change-button i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ---------------------------------------------------------------------
   4. FENÊTRES (modales MicroModal de WooFood)
   Rendu commun. Les fenêtres spécifiques (produit, disponibilités)
   sont dans 05-menu.css.
   --------------------------------------------------------------------- */

/* La feuille d'exemple MicroModal impose une police système */
.modal { font-family: var(--brand-font-body); }

.modal__overlay {
  background: color-mix(in srgb, var(--brand-ink) 60%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal__header {
  border-bottom: 1px solid var(--brand-border);
  box-shadow: none;
}

.modal__title {
  margin: 0;
  font-family: var(--brand-font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ui-title);
}

.modal__close {
  color: var(--ui-text);
  background: transparent;
  border-radius: 50%;
  transition: background-color var(--ui-speed);
}

.modal__close:hover { background: var(--ui-primary-soft); }

/* Chargement (spinner) */
.wf_quickview_product_loader {
  border-color: var(--brand-border);
  border-top-color: var(--brand-primary);
}

/* ---------------------------------------------------------------------
   5. FENÊTRE CONNEXION / INSCRIPTION (thème parent)
   --------------------------------------------------------------------- */
.pt-user-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: var(--brand-radius);
  box-shadow: var(--ui-shadow-lg);
}

.pt-user-modal .modal-body { padding: 2rem 1.5rem; }

.pt-user-modal .modal-body h3 {
  font-family: var(--brand-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--ui-title);
  text-align: center;
}

.pt-user-modal .form-field { margin-bottom: .75rem; }
.pt-user-modal .form-control { width: 100%; }

.pt-user-modal .btn-theme {
  width: 100%;
  margin-top: .5rem;
}

.pt-user-modal .lost-password {
  display: inline-block;
  margin-top: .75rem;
  font-size: .875rem;
}

/* Voile sombre derrière la fenêtre (le thème parent le laisse transparent) */
.modal-backdrop.show {
  opacity: .6;
  background-color: var(--brand-ink);
}

/* left:auto — le parent charge la version RTL de cette feuille (croix à gauche) */
.pt-user-modal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 1;
  border: 0;
  border-radius: 50%;
}

.pt-user-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--brand-border);
}

.pt-user-modal .modal-footer a {
  display: inline-block;
  margin-left: .5rem;
  padding: .4em 1.1em;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid currentColor;
  border-radius: var(--brand-radius-btn);
  box-shadow: none;
}

@layer overrides {
  .pt-user-modal .close {
    color: var(--ui-text) !important;
    background: var(--brand-surface-alt) !important;
  }

  .pt-user-modal .modal-footer {
    color: var(--ui-text) !important;
    background: var(--brand-surface-alt) !important;
  }

  .pt-user-modal .modal-footer a {
    color: var(--brand-primary) !important;
    background: transparent !important;
  }

  .pt-user-modal .modal-footer a:hover {
    color: var(--brand-on-primary) !important;
    background: var(--brand-primary) !important;
  }
}