/* Fa's Roses: bezorgcheck (sections/fas-bezorging.liquid), minimalistisch met micro-interacties.
   Creme, dunne lijnen, Instrument Sans voor titel en steden; het antwoord in gewone letters (goed leesbaar). */
.fas-bez { display: grid; grid-template-columns: 1fr minmax(28rem, 44rem); gap: clamp(3.2rem, 8vw, 12rem); align-items: end; padding-block: clamp(6.4rem, 9vw, 11rem); border-top: 1px solid var(--fas-line); }
.fas-bez__copy { display: grid; gap: 1.6rem; }
.fas .fas-bez__title, .fas-bez .fas-bez__title { margin: 0; font-family: var(--fas-display); font-weight: 500; font-size: clamp(4rem, 5vw, 6.4rem); line-height: 1; color: var(--fas-red); }
.fas-bez__text { margin: 0; max-width: 46ch; color: var(--fas-muted); line-height: 1.55; }

/* Steden: onderstreping tekent zich bij hover en bij een match */
.fas-bez__route { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; }
.fas-bez__city {
  font-family: var(--fas-display); font-weight: 500; font-size: clamp(2rem, 1.8vw, 2.6rem); color: var(--fas-ink); padding-bottom: 0.2rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 0.3s ease, background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease, translate 0.3s ease;
}
.fas-bez__city:hover { background-size: 100% 1px; }
.fas-bez.is-yes .fas-bez__city { opacity: 0.4; }
.fas-bez .fas-bez__city.is-match { opacity: 1; color: var(--fas-red); background-size: 100% 1px; translate: 0 -0.2rem; }

/* Veld: de lijn tekent zich in rood bij focus */
.fas-bez__form { display: grid; gap: 0.8rem; }
.fas-bez__label { color: var(--fas-muted); letter-spacing: 0.02em; transition: color 0.2s ease; }
.fas-bez__form:focus-within .fas-bez__label { color: var(--fas-red); }
.fas-bez__field { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--fas-line); }
.fas-bez__field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fas-red); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.fas-bez__field:focus-within::after, .fas-bez.is-ready .fas-bez__field::after { transform: scaleX(1); }
.fas-bez__field input { flex: 1; min-width: 0; height: 5.2rem; padding: 0; border: 0; background: transparent; color: var(--fas-ink); font-family: var(--fas-display); font-weight: 500; font-size: 2.8rem; letter-spacing: 0.02em; }
.fas-bez__field input::placeholder { color: rgba(26, 20, 20, 0.25); }
.fas-bez__field input:focus { outline: none; }

/* Knop: vaag tot er vier cijfers staan, pijl schuift bij hover */
.fas-bez__btn { display: inline-flex; align-items: center; gap: 0.8rem; border: 0; background: none; padding: 0 0 0 1.6rem; cursor: pointer; color: var(--fas-muted); font: var(--fas-label); font-size: 1.3rem; letter-spacing: 0.02em; text-transform: uppercase; transition: color 0.3s ease; }
.fas-bez.is-ready .fas-bez__btn, .fas-bez__btn:hover { color: var(--fas-red); }
.fas-bez__arrow { display: inline-block; transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fas-bez__btn:hover .fas-bez__arrow, .fas-bez.is-ready .fas-bez__arrow { translate: 0.4rem 0; }
.fas-bez__btn:active .fas-bez__arrow { translate: 0.8rem 0; }

/* Antwoord: gewone letters, met stipjes tijdens het checken en een getekend icoon */
.fas-bez__result { display: flex; align-items: flex-start; gap: 1rem; min-height: 4.8rem; margin-top: 0.8rem; font-size: 1.6rem; line-height: 1.5; color: var(--fas-ink); }
.fas-bez__msg { opacity: 0; translate: 0 0.4rem; transition: opacity 0.35s ease, translate 0.35s ease; }
.fas-bez.is-yes .fas-bez__msg, .fas-bez.is-no .fas-bez__msg, .fas-bez.is-invalid .fas-bez__msg { opacity: 1; translate: 0 0; }
.fas-bez__msg b { font-family: var(--fas-display); font-weight: 400; font-size: 1.15em; color: var(--fas-red); }
.fas-bez.is-invalid .fas-bez__msg { color: var(--fas-muted); }

.fas-bez__dots { display: none; gap: 0.5rem; align-items: center; height: 2.4rem; }
.fas-bez.is-checking .fas-bez__dots { display: inline-flex; }
.fas-bez__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fas-red); animation: fas-bez-dot 0.9s ease-in-out infinite; }
.fas-bez__dots i:nth-child(2) { animation-delay: 0.15s; }
.fas-bez__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fas-bez-dot { 0%, 100% { opacity: 0.25; translate: 0 0; } 50% { opacity: 1; translate: 0 -0.3rem; } }

.fas-bez__icon { display: none; flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fas-bez__icon--yes { stroke: var(--fas-red); }
.fas-bez__icon--no { stroke: var(--fas-muted); }
.fas-bez.is-yes .fas-bez__icon--yes, .fas-bez.is-no .fas-bez__icon--no { display: block; }
.fas-bez__icon circle, .fas-bez__icon path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fas-bez.is-yes .fas-bez__icon--yes circle, .fas-bez.is-no .fas-bez__icon--no circle { animation: fas-bez-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.fas-bez.is-yes .fas-bez__icon--yes path, .fas-bez.is-no .fas-bez__icon--no path { animation: fas-bez-draw 0.35s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes fas-bez-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 749px) { .fas-bez { grid-template-columns: 1fr; align-items: start; } }
@media (prefers-reduced-motion: reduce) {
  .fas-bez *, .fas-bez *::after { transition: none !important; animation: none !important; }
  .fas-bez__icon circle, .fas-bez__icon path { stroke-dashoffset: 0; }
}