/**
 * Espace client en pop-up (inc/customer-account.php, js/customer-account.js).
 *
 * Reprend le style du configurateur (config.verre-image.com) : Helvetica
 * Neue, titres gras à icône, groupes arrondis à libellé gris en capitales,
 * cartes à bordure grise, boutons de marque à flèche, barre d'étapes.
 * Valeurs relevées dans ses composants Tailwind (FormatStep, Header,
 * ActionButton, SummaryStep).
 *
 * --vi-accent est posé en ligne depuis VERRE_IMAGE_BRAND_COLOR
 * (inc/environment.php). Les sélecteurs des éléments interactifs sont
 * volontairement appuyés : le thème Hello et le kit Elementor stylent
 * globalement button, input et leurs états :hover / :focus.
 */

@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.vi-account {
  --vi-brand: var(--vi-accent, #277fba);
  --vi-brand-dark: color-mix(in oklab, var(--vi-brand) 85%, black);
  --vi-brand-soft: color-mix(in oklab, var(--vi-brand) 10%, white);
  --vi-ink: #090909;
  --vi-dark: #292d32;
  --vi-muted: #7f7d7e;
  --vi-line: #7f7d7e;
  --vi-rule: #e5e7eb;
  --vi-cream: #fefaf7;
  --vi-danger: #b91c1c;
  --vi-danger-soft: #fef2f2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--vi-ink);
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.vi-account *,
.vi-account *::before,
.vi-account *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.vi-account p,
.vi-account h2,
.vi-account dl,
.vi-account dd,
.vi-account ul {
  margin: 0;
}

.vi-account .vi-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.vi-account .vi-muted {
  color: var(--vi-muted);
}

.vi-account .vi-loading {
  padding: 40px 0;
  color: var(--vi-muted);
  text-align: center;
}

/* ---------- En-tête : titre à icône + aide grise ---------- */

.vi-account .vi-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vi-account .vi-head__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

.vi-account .vi-title {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 32px; /* croix de fermeture de la pop-up */
  color: var(--vi-ink);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.vi-account .vi-title .vi-icon {
  width: 28px;
  height: 28px;
}

.vi-account .vi-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--vi-muted);
  font-size: 14px;
}

.vi-account .vi-hint strong {
  color: var(--vi-ink);
  font-weight: 700;
}

/* ---------- Onglets : barre d'étapes du configurateur ---------- */

.vi-account .vi-steps {
  display: flex;
  gap: 8px;
}

.vi-account .vi-steps .vi-step,
.vi-account .vi-steps .vi-step:hover,
.vi-account .vi-steps .vi-step:focus {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.vi-account .vi-step__bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--vi-rule);
  transition: background-color 0.3s;
}

.vi-account .vi-steps .vi-step[aria-selected='true'] {
  color: #000;
}

.vi-account .vi-step[aria-selected='true'] .vi-step__bar {
  background: var(--vi-brand);
}

.vi-account .vi-steps .vi-step:hover .vi-step__bar {
  background: color-mix(in oklab, var(--vi-brand) 40%, white);
}

.vi-account .vi-steps .vi-step[aria-selected='true']:hover .vi-step__bar {
  background: var(--vi-brand);
}

.vi-account .vi-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vi-account [aria-busy='true'] {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ---------- Groupe arrondi à libellé gris (rounded-3xl border) ---------- */

.vi-account .vi-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 18px 14px;
  border: 1px solid currentColor;
  border-radius: 24px;
  background: #fff;
}

.vi-account .vi-group__label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--vi-muted);
  font-size: 14px;
  text-transform: uppercase;
}

.vi-account .vi-group__label .vi-icon {
  width: 20px;
  height: 20px;
}

.vi-account .vi-note {
  color: var(--vi-muted);
  font-size: 12px;
}

.vi-account a:not(.vi-btn) {
  color: var(--vi-brand);
  text-decoration: underline;
}

.vi-account .vi-empty {
  padding: 16px 0;
  color: var(--vi-muted);
  font-size: 14px;
  text-align: center;
}

/* ---------- Formulaires (rounded-xl border-[#7F7D7E]) ---------- */

.vi-account .vi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vi-account .vi-field label {
  color: var(--vi-dark);
  font-size: 14px;
}

.vi-account .vi-form .vi-field input:not([type='checkbox']),
.vi-account .vi-form .vi-field select,
.vi-account .vi-search .vi-search__field input[type='search'] {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--vi-line);
  border-radius: 12px;
  outline: none;
  background: #fff;
  box-shadow: none;
  color: var(--vi-ink);
  font-size: 14px;
  transition: border-color 0.15s;
}

.vi-account .vi-form .vi-field input:not([type='checkbox']):focus,
.vi-account .vi-form .vi-field select:focus,
.vi-account .vi-search .vi-search__field input[type='search']:focus {
  border-color: var(--vi-brand);
  outline: none;
  box-shadow: none;
}

.vi-account .vi-form .vi-field select {
  cursor: pointer;
}

/* Champ refusé par le serveur, y compris quand il a le focus. */
.vi-account .vi-form .vi-field input[aria-invalid='true']:not([type='checkbox']),
.vi-account .vi-form .vi-field input[aria-invalid='true']:not([type='checkbox']):focus,
.vi-account .vi-form .vi-field select[aria-invalid='true'],
.vi-account .vi-form .vi-field select[aria-invalid='true']:focus {
  border-color: var(--vi-danger);
}

.vi-account .vi-field small {
  font-size: 12px;
}

/* Coordonnées : plusieurs groupes dans un même formulaire. */
.vi-account .vi-form--stack,
.vi-account .vi-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.vi-account .vi-fields[hidden] {
  display: none;
}

/* Deux champs côte à côte : prénom et nom, code postal et ville. */
.vi-account .vi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

.vi-account .vi-check {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--vi-dark);
  font-size: 14px;
  cursor: pointer;
}

.vi-account .vi-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--vi-brand);
}

.vi-account .vi-message {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: var(--vi-danger-soft);
  color: var(--vi-danger);
  font-size: 14px;
}

.vi-account .vi-message[hidden] {
  display: none;
}

.vi-account .vi-message--ok {
  border-color: color-mix(in oklab, var(--vi-brand) 40%, white);
  background: var(--vi-brand-soft);
  color: var(--vi-brand-dark);
}

/* ---------- Boutons (ActionButton du configurateur) ---------- */

.vi-account .vi-btn,
.vi-account .vi-btn:hover,
.vi-account .vi-btn:focus,
.vi-account .vi-btn:visited {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--vi-brand);
  border-radius: 8px;
  background: var(--vi-brand);
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.vi-account .vi-btn:hover {
  opacity: 0.85;
}

.vi-account .vi-btn .vi-icon {
  width: 16px;
  height: 16px;
}

.vi-account .vi-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vi-account .vi-btn.vi-btn--secondary,
.vi-account .vi-btn.vi-btn--secondary:hover,
.vi-account .vi-btn.vi-btn--secondary:focus,
.vi-account .vi-btn.vi-btn--secondary:visited {
  border-color: var(--vi-dark);
  background: #fff;
  color: var(--vi-dark);
}

.vi-account .vi-btn.vi-btn--full {
  width: 100%;
}

.vi-account .vi-btn.vi-btn--small {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
}

.vi-account .vi-btn:focus-visible,
.vi-account .vi-link:focus-visible,
.vi-account .vi-step:focus-visible,
.vi-account summary:focus-visible {
  outline: 2px solid var(--vi-brand);
  outline-offset: 2px;
}

/* Lien discret : text-sm text-[#7F7D7E] hover:text-[#292D32] */
.vi-account .vi-link,
.vi-account .vi-link:hover,
.vi-account .vi-link:focus,
.vi-account a.vi-link:not(.vi-btn) {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vi-muted);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.vi-account .vi-link:hover,
.vi-account a.vi-link:not(.vi-btn):hover {
  color: var(--vi-dark);
}

.vi-account .vi-form .vi-link {
  align-self: center;
}

.vi-account a.vi-link.vi-link--brand:not(.vi-btn),
.vi-account a.vi-link.vi-link--brand:not(.vi-btn):hover {
  color: var(--vi-brand);
}

.vi-account .vi-link .vi-icon {
  width: 16px;
  height: 16px;
}

/* ---------- Recherche ---------- */

.vi-account .vi-search {
  display: flex;
  gap: 8px;
  margin: 0;
}

.vi-account .vi-search__field {
  position: relative;
  flex: 1;
}

.vi-account .vi-search__field .vi-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--vi-muted);
  transform: translateY(-50%);
}

.vi-account .vi-search .vi-search__field input[type='search'] {
  padding-left: 36px;
}

/* ---------- Cartes : commandes et factures (rounded-lg border) ---------- */

.vi-account .vi-orders,
.vi-account .vi-invoices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vi-account .vi-card {
  border: 1px solid var(--vi-line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s;
}

.vi-account .vi-order[open] {
  border-color: var(--vi-brand);
}

.vi-account .vi-order__summary,
.vi-account .vi-invoice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
}

.vi-account .vi-order__summary {
  cursor: pointer;
  list-style: none;
}

.vi-account .vi-order__summary::-webkit-details-marker {
  display: none;
}

.vi-account .vi-order__main {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
}

.vi-account .vi-order__number {
  color: var(--vi-ink);
  font-size: 14px;
  font-weight: 700;
}

.vi-account .vi-order__meta {
  overflow: hidden;
  color: var(--vi-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vi-account .vi-order__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  white-space: nowrap;
}

.vi-account .vi-amount__ttc {
  font-size: 11px;
}

.vi-account .vi-order__summary .vi-icon--chevron {
  width: 18px;
  height: 18px;
  color: var(--vi-muted);
  transition: transform 0.2s;
}

.vi-account .vi-order[open] .vi-icon--chevron {
  transform: rotate(180deg);
}

.vi-account .vi-order__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--vi-cream);
}

.vi-account .vi-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.vi-account .vi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vi-account .vi-item__name {
  font-size: 14px;
  font-weight: 700;
}

.vi-account .vi-item .wc-item-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--vi-dark);
  font-size: 13px;
}

.vi-account .vi-item .wc-item-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
}

.vi-account .vi-item .wc-item-meta .wc-item-meta-label {
  color: var(--vi-muted);
  font-weight: 400;
}

.vi-account .vi-item .wc-item-meta p {
  display: inline;
  margin: 0;
}

.vi-account .vi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.vi-account .vi-actions .vi-muted {
  font-size: 13px;
}

/* ---------- Pastilles de statut ---------- */

.vi-account .vi-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  color: var(--vi-dark);
  font-size: 12px;
  white-space: nowrap;
}

.vi-account .vi-badge--processing,
.vi-account .vi-badge--production,
.vi-account .vi-badge--on-hold,
.vi-account .vi-badge--due {
  background: var(--vi-brand-soft);
  box-shadow: none;
  color: var(--vi-brand-dark);
}

.vi-account .vi-badge--completed,
.vi-account .vi-badge--paid {
  background: var(--vi-brand);
  box-shadow: none;
  color: #fff;
}

.vi-account .vi-badge--late,
.vi-account .vi-badge--failed,
.vi-account .vi-badge--cancelled {
  background: var(--vi-danger-soft);
  box-shadow: none;
  color: var(--vi-danger);
}

.vi-account .vi-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ---------- Mon compte ---------- */

.vi-account .vi-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  font-size: 14px;
}

.vi-account .vi-list dt {
  color: var(--vi-muted);
}

/* ---------- Boîte de la pop-up Elementor ---------- */

/*
 * Taille gérée ici, par breakpoint, plutôt que dans les réglages Elementor
 * (qui fixaient 640 px pour tous les écrans) :
 *   ordinateur  ≥ 1025 px : 760 px de large
 *   tablette    768–1024  : 720 px, marge de 24 px autour
 *   mobile      < 768     : toute la largeur moins 12 px de chaque côté
 * min-width l'emporte sur la width qu'Elementor pose sous l'ID de la pop-up,
 * et max-width sur les deux : aucun !important nécessaire. La hauteur est
 * bornée à l'écran visible (dvh : barre d'adresse mobile déduite) et le
 * contenu défile au-delà.
 *
 * v3.8.1 - Un seul défilement, sans barre visible. La boîte et son
 * .dialog-message (Elementor : max-height 100vh, overflow auto) défilaient
 * chacune, d'où deux barres côte à côte. Seul .dialog-message défile
 * désormais, borné à la hauteur de la boîte : la croix de fermeture, posée
 * dans la boîte, reste en place. La barre est masquée ; molette, doigt et
 * clavier font toujours défiler, sans entraîner la page derrière.
 */
.elementor-popup-modal:has(.vi-account) {
  --vi-popup-width: 760px;
  --vi-popup-gutter: 24px;
}

.elementor-popup-modal:has(.vi-account) .dialog-widget-content,
.elementor-popup-modal:has(.vi-account) .dialog-message {
  max-width: calc(100vw - 2 * var(--vi-popup-gutter));
  max-height: calc(100vh - 2 * var(--vi-popup-gutter));
  max-height: calc(100dvh - 2 * var(--vi-popup-gutter));
}

.elementor-popup-modal:has(.vi-account) .dialog-widget-content {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.elementor-popup-modal:has(.vi-account) .dialog-message {
  min-width: min(var(--vi-popup-width), calc(100vw - 2 * var(--vi-popup-gutter)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.elementor-popup-modal:has(.vi-account) .dialog-message::-webkit-scrollbar {
  display: none;
}

/* Halo blanc : le contenu défile sous la croix. */
.elementor-popup-modal:has(.vi-account) .dialog-close-button {
  z-index: 1;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 6px #fff;
  color: var(--vi-muted, #7f7d7e);
}

.vi-account {
  padding: 18px;
}

/* ---------- Tablette ---------- */

@media (max-width: 1024px) {
  .elementor-popup-modal:has(.vi-account) {
    --vi-popup-width: 720px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .elementor-popup-modal:has(.vi-account) {
    --vi-popup-gutter: 12px;
  }

  .elementor-popup-modal:has(.vi-account) .dialog-widget-content {
    border-radius: 12px;
  }

  .vi-account {
    gap: 16px;
    padding: 8px;
  }

  .vi-account .vi-title {
    font-size: 24px;
    line-height: 30px;
  }

  .vi-account .vi-title .vi-icon {
    width: 22px;
    height: 22px;
  }

  .vi-account .vi-steps .vi-step,
  .vi-account .vi-steps .vi-step:hover,
  .vi-account .vi-steps .vi-step:focus {
    font-size: 12px;
  }

  .vi-account .vi-group {
    padding: 14px 12px;
    border-radius: 20px;
  }

  .vi-account .vi-list {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .vi-account .vi-list dd {
    margin-bottom: 8px;
  }

  .vi-account .vi-row {
    grid-template-columns: 1fr;
  }

  .vi-account .vi-order__body {
    margin: 0 8px 8px;
    padding: 12px;
  }
}

/* Petits téléphones : numéro et référence sur toute la largeur, statut et
   montant sur la ligne suivante ; recherche empilée. */
@media (max-width: 480px) {
  .vi-account .vi-order__main {
    flex-basis: 100%;
  }

  .vi-account .vi-order__total {
    margin-left: auto;
  }

  .vi-account .vi-search {
    flex-direction: column;
  }

  .vi-account .vi-search .vi-btn {
    width: 100%;
  }
}