/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Cool off-white + barely-visible brand-tinted dot grid */
body {
  background-color: #fafbfc;
}

html.dark body,
.dark body {
  background-color: #171717;
}

/*
 * HTMX swap settle animation
 *
 * HTMX adds `.htmx-added` to new content after the swap, then removes it after
 * the settle delay (see htmx.config.defaultSettleDelay / hx-swap settle:…).
 * Start invisible while `.htmx-added` is present; when it is removed, the
 * transition below fades/slides the content in so the user sees what changed.
 */
.htmx-added {
  opacity: 0;
  transform: translateY(6px);
}

main [id] {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Active (owned) / selected pricing cards — soft brand glow */
@keyframes pricing-owned-glow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}

.pricing-plan-card-owned,
.pricing-addon-card-owned,
.pricing-addon-card:has(.pricing-price-input:checked),
.pricing-subscriptions-card {
  border-color: #03a9f4 !important;
  background-image: linear-gradient(
    165deg,
    rgba(239, 249, 255, 0.95) 0%,
    rgba(255, 255, 255, 1) 42%,
    rgba(255, 255, 255, 1) 100%
  );
}

.pricing-plan-card-owned::before,
.pricing-addon-card-owned::before,
.pricing-addon-card:has(.pricing-price-input:checked)::before,
.pricing-subscriptions-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0.875rem; /* matches rounded-xl + bleed */
  pointer-events: none;
  z-index: -1;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(3, 169, 244, 0.45),
    0 0 22px rgba(0, 135, 209, 0.38),
    0 0 48px rgba(46, 193, 255, 0.22),
    0 10px 28px rgba(0, 135, 209, 0.12);
  animation: pricing-owned-glow 2.8s ease-in-out infinite;
}

html.dark .pricing-plan-card-owned,
.dark .pricing-plan-card-owned,
html.dark .pricing-addon-card-owned,
.dark .pricing-addon-card-owned,
html.dark .pricing-addon-card:has(.pricing-price-input:checked),
.dark .pricing-addon-card:has(.pricing-price-input:checked),
html.dark .pricing-subscriptions-card,
.dark .pricing-subscriptions-card {
  border-color: #03a9f4 !important;
  background-image: linear-gradient(
    165deg,
    rgba(5, 48, 76, 0.55) 0%,
    rgba(23, 23, 23, 1) 48%,
    rgba(23, 23, 23, 1) 100%
  );
}

html.dark .pricing-plan-card-owned::before,
.dark .pricing-plan-card-owned::before,
html.dark .pricing-addon-card-owned::before,
.dark .pricing-addon-card-owned::before,
html.dark .pricing-addon-card:has(.pricing-price-input:checked)::before,
.dark .pricing-addon-card:has(.pricing-price-input:checked)::before,
html.dark .pricing-subscriptions-card::before,
.dark .pricing-subscriptions-card::before {
  box-shadow:
    0 0 0 1px rgba(3, 169, 244, 0.55),
    0 0 26px rgba(3, 169, 244, 0.42),
    0 0 56px rgba(46, 193, 255, 0.24),
    0 10px 28px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-plan-card-owned::before,
  .pricing-addon-card-owned::before,
  .pricing-addon-card:has(.pricing-price-input:checked)::before,
  .pricing-subscriptions-card::before {
    animation: none;
  }
}

/* Addon checkbox: green when checked */
.pricing-addon-checkbox:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

.pricing-addon-checkbox:focus {
  --tw-ring-color: rgba(22, 163, 74, 0.45);
}

html.dark .pricing-addon-checkbox:checked,
.dark .pricing-addon-checkbox:checked {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

/* Pricing CTA: idle / selected / owned */
.pricing-cta-owned {
  background-color: #16a34a; /* green-600 */
  border-color: #16a34a;
}

.pricing-cta-selectable {
  background-color: #0087d1; /* normify-600 */
  border-color: #0087d1;
}

.pricing-cta-selected {
  display: none;
}

.pricing-plan-card:has(.pricing-price-input:checked) .pricing-cta-selectable {
  background-color: #015b8b; /* normify-800 */
  border-color: #015b8b;
  box-shadow: 0 4px 16px rgba(1, 91, 139, 0.45);
}

.pricing-plan-card:has(.pricing-price-input:checked) .pricing-cta-idle {
  display: none;
}

.pricing-plan-card:has(.pricing-price-input:checked) .pricing-cta-selected {
  display: inline;
}

html.dark .pricing-cta-owned,
.dark .pricing-cta-owned {
  background-color: #15803d; /* green-700 */
  border-color: #15803d;
}

html.dark .pricing-plan-card:has(.pricing-price-input:checked) .pricing-cta-selectable,
.dark .pricing-plan-card:has(.pricing-price-input:checked) .pricing-cta-selectable {
  background-color: #03a9f4; /* normify-500 */
  border-color: #03a9f4;
}

/* Checkout success modal — animated checkmark */
.checkout-success-svg {
  color: #16a34a; /* green-600 */
}

html.dark .checkout-success-svg,
.dark .checkout-success-svg {
  color: #4ade80; /* green-400 */
}

.checkout-success-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform-origin: 50% 50%;
}

.checkout-success-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

#hs-vertically-centered-modal-checkout-success.open .checkout-success-circle {
  animation: checkout-success-circle 0.55s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

#hs-vertically-centered-modal-checkout-success.open .checkout-success-check {
  animation: checkout-success-check 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

#hs-vertically-centered-modal-checkout-success.open .checkout-success-animation {
  animation: checkout-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes checkout-success-circle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkout-success-check {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkout-success-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}