/* ============================================
   Progress Ring Button Animation
   Ein Button morpht zu Kreis mit fortschritts-Ring,
   bei Erfolg → grüner Kreis mit Checkmark,
   bei Fehler → roter Shake.
   ============================================ */

/* Wrapper for <input type="submit"> (void element, cannot host SVG/span children) */
.pr-input-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
}
.pr-input-wrap > input {
  line-height: normal;
}

.btn[data-pr-state] {
  position: relative;
  overflow: visible;
  transition:
    width .35s cubic-bezier(.6,.05,.5,1.6),
    min-width .35s cubic-bezier(.6,.05,.5,1.6),
    border-radius .35s,
    background .25s,
    color .15s,
    padding .25s;
}

/* Loading state: morph to circle */
.btn[data-pr-state="loading"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  cursor: wait;
  pointer-events: none;
}

/* Hide all icons/text inside button while loading */
.btn[data-pr-state="loading"] > *:not(.pr-ring) {
  opacity: 0;
}

/* The progress ring itself */
.pr-ring {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.btn[data-pr-state="loading"] .pr-ring,
.pr-input-wrap[data-pr-state="loading"] > .pr-ring {
  opacity: 1;
}
.pr-ring circle {
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset .15s linear;
}

/* Indeterminate (when no real progress data) */
.btn[data-pr-state="loading"][data-pr-mode="indeterminate"] .pr-ring,
.pr-input-wrap[data-pr-state="loading"][data-pr-mode="indeterminate"] > .pr-ring {
  animation: pr-spin 1s linear infinite;
}
.btn[data-pr-state="loading"][data-pr-mode="indeterminate"] .pr-ring circle,
.pr-input-wrap[data-pr-state="loading"][data-pr-mode="indeterminate"] > .pr-ring circle {
  stroke-dasharray: 90 126;
  stroke-dashoffset: 0;
}
@keyframes pr-spin {
  to { transform: rotate(270deg); }
}

/* Success state */
.btn[data-pr-state="success"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: transparent !important;
  cursor: default;
  pointer-events: none;
}
.btn[data-pr-state="success"] > *:not(.pr-check) {
  opacity: 0;
}
.pr-check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .3s cubic-bezier(.4,.05,.3,1.6);
}
.btn[data-pr-state="success"] .pr-check,
.pr-input-wrap[data-pr-state="success"] > .pr-check {
  opacity: 1;
  transform: scale(1);
}

/* Error state: shake + red */
.btn[data-pr-state="error"] {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  animation: pr-shake .4s ease-in-out;
}
@keyframes pr-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn[data-pr-state] { transition: background .15s, color .15s !important; }
  .btn[data-pr-state="loading"], .btn[data-pr-state="success"] { width: auto !important; min-width: auto !important; height: auto !important; border-radius: 6px !important; padding: 12px 16px !important; }
  .btn[data-pr-state="loading"] { color: rgba(255,255,255,.7) !important; }
  .btn[data-pr-state="loading"] > *:not(.pr-ring) { opacity: 1; }
  .btn[data-pr-state="success"] > *:not(.pr-check) { opacity: 1; }
  .pr-ring, .pr-check { display: none; }
  @keyframes pr-spin { to { transform: rotate(0deg); } }
  @keyframes pr-shake { 0%, 100% { transform: none; } }
}

/* ============================================
   Hover + Click Feedback für Page-Navigation Buttons
   (Jetzt anfragen, Weiter, Zur Kasse, etc.)
   Subtile Lift + Shadow on Hover, Press-Down on Click.
   ============================================ */
.btn-order,
.btn.checkout-next-step,
a.btn-primary,
a.btn-success {
  transition:
    transform .15s ease-out,
    box-shadow .15s ease-out,
    background-color .15s ease-out,
    opacity .15s ease-out;
  will-change: transform;
}

/* Hover: lift + shadow */
.btn-order:hover,
.btn.checkout-next-step:hover,
a.btn-primary:hover,
a.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Active (click): press down + dim */
.btn-order:active,
.btn.checkout-next-step:active,
a.btn-primary:active,
a.btn-success:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0.85;
  transition-duration: .05s;
}

/* Focus-visible for keyboard users */
.btn-order:focus-visible,
.btn.checkout-next-step:focus-visible,
a.btn-primary:focus-visible,
a.btn-success:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* During navigation: dim + cursor wait (set by JS) */
.btn-order.is-navigating,
.btn.checkout-next-step.is-navigating,
a.btn-primary.is-navigating,
a.btn-success.is-navigating {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-order, .btn.checkout-next-step, a.btn-primary, a.btn-success {
    transition: background-color .15s, opacity .15s !important;
  }
  .btn-order:hover, .btn.checkout-next-step:hover, a.btn-primary:hover, a.btn-success:hover,
  .btn-order:active, .btn.checkout-next-step:active, a.btn-primary:active, a.btn-success:active {
    transform: none !important;
    box-shadow: none !important;
  }
}