/* ============================================================================
   pricing.css — Styles toggle pricing nav + blocs prix article (étape 4C.3)
   ============================================================================
   À inclure depuis layout.css ou theme.css avec :
     @import url('/assets/css/pricing.css');
   OU à concaténer manuellement à la fin de components.css
   ============================================================================ */

/* ─── Bloc nav : dropdown niveau + checkbox masquer ─── */
.ep-nav-pricing {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ep-pricing-select {
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--ep-border, #e0ddd6);
  border-radius: 6px;
  background: var(--ep-white, #fff);
  color: var(--ep-text, #1a1a2e);
  cursor: pointer;
  max-width: 130px;
}
.ep-pricing-select:hover { border-color: var(--ep-text, #1a1a2e); }
.ep-pricing-select:focus {
  outline: none;
  border-color: var(--ep-red, #CD212A);
}

.ep-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-text, #1a1a2e);
  cursor: pointer;
  padding: 4px 8px;
  background: var(--ep-white, #fff);
  border: 1px solid var(--ep-border, #e0ddd6);
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
}
.ep-pricing-toggle:hover { border-color: var(--ep-text, #1a1a2e); }
.ep-pricing-toggle input {
  cursor: pointer;
  accent-color: var(--ep-red, #CD212A);
  width: 13px;
  height: 13px;
  margin: 0;
}

/* ─── Bloc prix sur fiche article (buybox) ─── */
.ep-pricing-block {
  margin: 16px 0;
}

/* Bloc remise + PA — masqué par défaut, visible si .ep-pricing-pro */
.ep-pricing-pro {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fffdf5;
  border: 1px solid #f0e8cc;
  border-left: 3px solid #c8a44a;
  border-radius: 6px;
  font-size: 13px;
}
/* Affichage si user pro/admin */
.ep-pricing-block.is-pro .ep-pricing-pro { display: block; }

/* MAIS si masqué globalement via la nav, on cache à nouveau (spécificité forte) */
html.ep-hide-discounts .ep-pricing-block.is-pro .ep-pricing-pro,
html.ep-hide-discounts .ep-pricing-pro { display: none !important; }

.ep-pricing-pro-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
}
.ep-pricing-pro-label {
  color: #6b6b6b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ep-pricing-pro-value {
  font-weight: 700;
  color: #1a1a2e;
  font-size: 14px;
}
.ep-pricing-pro-value.is-discount {
  color: #c8a44a;
}

/* ─── Bloc prix carte article (article_grid.php) ─── */
.ep-card-price-block {
  margin-top: 6px;
}
.ep-card-price-client {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
}
.ep-card-price-pro {
  display: none;
  margin-top: 4px;
  font-size: 11px;
  color: #c8a44a;
  font-weight: 600;
}
.ep-card-price-block.is-pro .ep-card-price-pro { display: block; }
html.ep-hide-discounts .ep-card-price-pro { display: none !important; }

/* ─── Responsive : sur mobile, le toggle nav passe en bouton compact ─── */
@media (max-width: 1100px) {
  .ep-pricing-toggle span { display: none; }
  .ep-pricing-select { max-width: 90px; }
}

/* ─── Toggle dans menu burger mobile (étape 4C.3) ─── */

/* Fix scroll menu mobile (sinon les derniers items sont masqués) */
.ep-mobile-menu {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ep-mobile-pricing-row {
  padding: 12px 16px;
  background: #fffdf5;
}
.ep-mobile-pricing-row label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}
.ep-pricing-select-mobile {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #e0ddd6;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
}
.ep-pricing-toggle-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.ep-pricing-toggle-mobile input {
  cursor: pointer;
  accent-color: #CD212A;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
.ep-pricing-toggle-mobile span { font-size: 13px; line-height: 1.4; }