/* CTA « Ajouter au panier » du Studio.
   C'est l'aboutissement du configurateur : il doit se lire comme tel face aux
   actions secondaires (Aperçu, Partager) qui l'entourent dans la barre. */

:root {
  --cta-ink: #07111b;
  /* Le gris désactivé sur --paper-2 tient 6.2:1, là où --muted tombait à 4.2:1. */
  --cta-disabled-ink: #4a555f;
  --cta-disabled-bg: #ebe8e1;
  --cta-success: #1c7a54;
}

.studio-btn-primary#save-design,
.studio-btn-primary#pack-add-design {
  position: relative;
  min-height: 48px;
  padding: 0 14px 0 22px;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cta-ink);
  background: var(--orange);
  border-radius: 999px;
  /* Deux ombres : un contact court qui pose le bouton, une diffusion orange
     qui le fait rayonner sans le décoller de la barre. */
  box-shadow:
    0 1px 2px rgba(7, 17, 27, 0.18),
    0 8px 24px -6px rgba(255, 121, 0, 0.55);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}

.studio-btn-primary#save-design:hover:not(:disabled),
.studio-btn-primary#pack-add-design:hover:not(:disabled) {
  background: var(--orange-2);
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(7, 17, 27, 0.2),
    0 14px 30px -8px rgba(255, 121, 0, 0.62);
}

/* L'enfoncement confirme le clic avant même la réponse réseau. */
.studio-btn-primary#save-design:active:not(:disabled),
.studio-btn-primary#pack-add-design:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 1px 1px rgba(7, 17, 27, 0.22),
    0 4px 12px -6px rgba(255, 121, 0, 0.5);
}

/* L'anneau global est orange : invisible sur un bouton orange. On le remplace
   par un contour sombre doublé d'un liseré clair, lisible sur les deux fonds. */
.studio-btn-primary#save-design:focus-visible,
.studio-btn-primary#pack-add-design:focus-visible {
  outline: 3px solid var(--cta-ink);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px var(--white),
    0 8px 24px -6px rgba(255, 121, 0, 0.55);
}

.studio-btn-primary#save-design:disabled,
.studio-btn-primary#pack-add-design:disabled {
  /* opacity ferait passer le texte sous le seuil de lisibilité : on change
     les couleurs plutôt que de délaver l'ensemble. */
  opacity: 1;
  color: var(--cta-disabled-ink);
  background: var(--cta-disabled-bg);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.studio-btn-primary#save-design:disabled .studio-cart-badge,
.studio-btn-primary#pack-add-design:disabled .studio-cart-badge {
  background: transparent;
  color: var(--cta-disabled-ink);
  box-shadow: inset 0 0 0 1px currentColor;
}

.cta-label { white-space: nowrap; }

.studio-cart-badge {
  font-variant-numeric: tabular-nums;
}

/* --- Envoi en cours ------------------------------------------------------
   Les états portent l'identifiant : la règle de base et :disabled sont plus
   spécifiques qu'une simple classe et reprendraient sinon le dessus. Le bouton
   reste désactivé pendant l'envoi, sans pour autant prendre l'allure éteinte
   d'une action indisponible. */

#save-design.is-busy, #pack-add-design.is-busy,
#save-design.is-busy:disabled, #pack-add-design.is-busy:disabled {
  cursor: progress;
  color: var(--cta-ink);
  background: var(--orange);
  box-shadow: 0 1px 2px rgba(7, 17, 27, 0.18);
  transform: none;
}

.studio-btn-primary.is-busy .cta-icon,
.studio-btn-primary.is-busy .studio-cart-badge { display: none; }

.studio-btn-primary.is-busy .cta-spinner {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(7, 17, 27, 0.25);
  border-top-color: var(--cta-ink);
  border-radius: 50%;
  animation: cta-spin 0.7s linear infinite;
}

.cta-spinner { display: none; }

@keyframes cta-spin { to { transform: rotate(360deg); } }

/* --- Confirmation -------------------------------------------------------- */

#save-design.is-done, #pack-add-design.is-done,
#save-design.is-done:disabled, #pack-add-design.is-done:disabled {
  background: var(--cta-success);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(7, 17, 27, 0.18), 0 8px 24px -6px rgba(28, 122, 84, 0.5);
  cursor: default;
  transform: none;
}

.studio-btn-primary.is-done .cta-icon,
.studio-btn-primary.is-done .studio-cart-badge { display: none; }

.studio-btn-primary.is-done .cta-check {
  display: block;
  stroke: currentColor;
}

.studio-btn-primary.is-done .cta-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: cta-draw 260ms ease-out forwards;
}

.cta-check { display: none; }

@keyframes cta-draw { to { stroke-dashoffset: 0; } }

/* Le badge du header accuse réception : l'article a bien changé d'endroit. */
.cart-badge-pill.is-bumped { animation: cta-bump 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes cta-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (max-width: 900px) {
  .studio-btn-primary#save-design,
  .studio-btn-primary#pack-add-design {
    min-height: 44px;
    padding: 0 12px 0 16px;
    gap: 8px;
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-btn-primary#save-design,
  .studio-btn-primary#pack-add-design {
    transition: background-color 180ms ease, box-shadow 180ms ease;
  }
  .studio-btn-primary#save-design:hover:not(:disabled),
  .studio-btn-primary#pack-add-design:hover:not(:disabled),
  .studio-btn-primary#save-design:active:not(:disabled),
  .studio-btn-primary#pack-add-design:active:not(:disabled) { transform: none; }
  .studio-btn-primary.is-busy .cta-spinner { animation-duration: 1.4s; }
  .studio-btn-primary.is-done .cta-check path { animation: none; stroke-dashoffset: 0; }
  .cart-badge-pill.is-bumped { animation: none; }
}