/* -- Order Confirmation (website · Shop) ----------------------------------
   Confirms a completed purchase and provides its reference - a check that draws itself, the order number, what happens next and where to go. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(
    .mk-order-confirmation,
    .mk-order-confirmation *,
    .mk-order-confirmation ::before,
    .mk-order-confirmation ::after
  ) {
    box-sizing: border-box;
  }

  .mk-order-confirmation {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    max-width: 40rem;
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .mk-order-confirmation-check {
    width: 4.5rem;
    height: 4.5rem;
    color: #16a34a;

    & circle {
      fill: color-mix(in oklch, #16a34a 12%, transparent);
      stroke: currentColor;
      stroke-width: 2;
    }
    & path {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 30;
      stroke-dashoffset: 0;
      animation: mk-order-check 600ms 200ms cubic-bezier(0.65, 0, 0.35, 1) both;
    }
  }
  @keyframes mk-order-check {
    from {
      stroke-dashoffset: 30;
    }
  }
  .mk-order-confirmation-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .mk-order-confirmation-lead {
    margin: -0.5rem 0 0;
    color: var(--muted-foreground);
    text-wrap: pretty;
    & code {
      padding: 0.125rem 0.375rem;
      border-radius: var(--radius-sm);
      background: var(--muted);
      color: var(--foreground);
      font-family: var(--font-mono);
      font-weight: 700;
      user-select: all;
    }
  }
  .mk-order-confirmation-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1px;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--border);
    text-align: start;

    & div {
      display: grid;
      gap: 0.25rem;
      padding: 1rem 1.25rem;
      background: var(--card);
    }
    & dt {
      color: var(--muted-foreground);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    & dd {
      margin: 0;
      font-size: 0.9375rem;
    }
    & address {
      font-style: normal;
    }
  }
  .mk-order-confirmation-steps {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mk-oc;
    text-align: start;
    & li {
      counter-increment: mk-oc;
      display: grid;
      grid-template-columns: 1.75rem minmax(0, 1fr);
      gap: 0.75rem;
      align-items: start;
      font-size: 0.9375rem;
    }
    & li::before {
      content: counter(mk-oc);
      display: grid;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 50%;
      background: var(--muted);
      font-size: 0.8125rem;
      font-weight: 700;
    }
    & span {
      color: var(--muted-foreground);
    }
  }
  .mk-order-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-order-confirmation-check path {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .mk-order-confirmation-check {
      color: CanvasText;
    }
    .mk-order-confirmation-details {
      border-color: CanvasText;
    }
  }
}