/*
 * App-specific styles. Layout, spacing, typography, and tints come from Web
 * Awesome native styles, `wa-*` utility classes, design tokens, and inline
 * styles in the components themselves. Only what those can't express lives
 * here.
 */

/* Body font comes from awesome_web/styles/native.css. */

/* The photo behind the card, blurred and dimmed so the card reads on top.
 * Scaled up a little so the blur never shows the edge of the viewport. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/imagery/background.webp") center / cover no-repeat;
  filter: blur(10px) brightness(0.85) saturate(1.1);
  transform: scale(1.06);
}

/* The card: frosted, so the photo shows through and the two read as one.
 * Its own brand colour is discgolfbane.dk's orange. */
.card {
  position: relative;
  inline-size: min(36rem, 100%);
  min-inline-size: 0;
  padding: var(--wa-space-xl);
  border-radius: var(--wa-border-radius-l);
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.28);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  --wa-color-brand-fill-loud: #ff7800;
  --wa-color-brand-on-loud: #fff;
}
.card wa-input::part(base),
.card wa-select::part(combobox) {
  background: rgb(255 255 255 / 0.85);
}

/* The thank-you, laid over the card for a moment: the card keeps its size,
 * the overlay fades in and the check pops. */
.thanks {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--wa-space-m);
  text-align: center;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.97);
  animation: thanks-in 320ms ease-out both;
}
/* The form stays in place under the thank-you, only hidden, so the card
 * keeps its height. */
.card:has(.thanks) form {
  visibility: hidden;
}
.thanks-icon {
  font-size: 5rem;
  color: #ff7800;
  animation: thanks-pop 480ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.thanks-text {
  animation: thanks-rise 420ms ease-out 120ms both;
}
@keyframes thanks-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes thanks-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes thanks-rise {
  from {
    transform: translateY(0.75rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thanks, .thanks-icon, .thanks-text {
    animation-duration: 1ms;
  }
}

/* The logo in the corner: white on the photo, sized by width. */
.brand {
  position: fixed;
  inset-block-start: var(--wa-space-l);
  inset-inline-end: var(--wa-space-l);
  inline-size: clamp(9rem, 26vw, 13rem);
  color: #fff;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.4));
}
.brand svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The dial-code prefix beside the phone number: a flag and a code, no more.
 * Web Awesome's select padding is made for a label-wide field; trimmed so the
 * prefix stays narrow on a phone. */
.phone-country::part(combobox) {
  padding-inline-start: var(--wa-space-xs);
  padding-inline-end: var(--wa-space-2xs);
  gap: var(--wa-space-2xs);
}
.phone-country::part(display-input) {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.phone-country::part(expand-icon) {
  margin-inline-start: var(--wa-space-2xs);
}