/* Diàleg «Enllaç copiat!» (alineat amb v4 programa.css). Per sobre del lightbox d’informació. */

.programa-link-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
}

.programa-link-backdrop[hidden] {
  display: none !important;
}

.programa-link-dialog {
  width: min(380px, 100%);
  background: var(--card);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-primary-rgb), var(--opacity-15));
  padding: var(--space-5) var(--space-4) var(--space-4);
  box-sizing: border-box;
  text-align: center;
  box-shadow:
    0 24px 48px rgba(var(--shadow-rgb), 0.22),
    0 2px 6px rgba(var(--shadow-rgb), 0.08);
  animation: programaLinkDialogPop 0.32s var(--ease-smooth) both;
}

@keyframes programaLinkDialogPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.programa-link-dialog-art {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--space-3);
}

.programa-link-dialog-badge {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-primary-rgb));
  background:
    radial-gradient(
      circle at 30% 28%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, #fff) 0%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, #fff) 55%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 4%, #fff) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(var(--color-primary-rgb), var(--opacity-20)),
    0 8px 22px rgba(var(--color-primary-rgb), 0.18);
  animation: programaLinkBadgePop 0.5s var(--ease-smooth) 0.05s both;
}

@keyframes programaLinkBadgePop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.programa-link-dialog-badge svg {
  filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.25));
}

.programa-link-dialog-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  box-shadow:
    0 0 0 3px var(--card),
    0 6px 14px rgba(21, 128, 61, 0.35);
  animation: programaLinkCheckStamp 0.45s var(--ease-smooth) 0.3s both;
}

@keyframes programaLinkCheckStamp {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.18) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.programa-link-dialog-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary-rgb));
  opacity: 0;
  animation: programaLinkSpark 0.8s var(--ease-smooth) 0.4s both;
}

.programa-link-dialog-spark--a {
  top: 6px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: rgb(var(--color-accent-rgb));
}

.programa-link-dialog-spark--b {
  top: -2px;
  right: 14px;
  background: #f59e0b;
  animation-delay: 0.5s;
}

.programa-link-dialog-spark--c {
  bottom: 14px;
  left: -6px;
  width: 5px;
  height: 5px;
  background: #22c55e;
  animation-delay: 0.6s;
}

@keyframes programaLinkSpark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
}

.programa-link-dialog-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 900;
  color: var(--color-primary-strong);
  letter-spacing: 0.2px;
}

.programa-link-dialog-text {
  margin: 0 0 var(--space-4);
  font-size: var(--font-md);
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.programa-link-backdrop .programa-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  min-height: var(--ctrl-min-height);
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  padding: var(--ctrl-pad-y) 14px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  border: 1px solid var(--ui-overlay-subtle);
  background: var(--color-primary-strong);
  color: var(--card);
  cursor: pointer;
  text-decoration: none;
  transition: var(--ctrl-transition);
}

.programa-link-backdrop .programa-footer-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.programa-link-backdrop .programa-footer-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), var(--opacity-40));
}

.programa-link-dialog .programa-link-dialog-confirm {
  min-width: 140px;
}

@media (prefers-reduced-motion: reduce) {
  .programa-link-dialog,
  .programa-link-dialog-badge,
  .programa-link-dialog-check,
  .programa-link-dialog-spark {
    animation: none;
  }

  .programa-link-dialog-spark {
    opacity: 0.85;
  }
}