/* ==========================================================================
   Group trips: the booking widget (js/groepsreis.js)

   Styles only what the script builds inside [data-groepsreis-widget] once it
   has mounted (class .grw on the mount). Before that the mount is empty and
   the page's own summary ([data-groepsreis-fallback]) is shown.
   Uses the site tokens from styles.css / theme-groen.css and, on the group
   trip pages, the place colour --gr-place (with a fallback elsewhere).
   Motion: transform and opacity only, off for reduced motion.
   ========================================================================== */

/* The page's summary is hidden by the script once the widget is built. */
[data-groepsreis-fallback][hidden] { display: none !important; }

.grw {
  --grw-place: var(--gr-place, var(--ink));
  --grw-line: var(--gr-line, var(--border));
  grid-column: 1 / -1; /* the widget replaces the summary: use the full row */
  max-width: 58rem;
  padding: 1.4rem 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--grw-line);
  border-radius: 1.25rem;
  color: var(--ink);
}

/* ---- Dates ------------------------------------------------------------- */
.grw__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-deep);
}
.grw__date {
  margin-top: 0.35rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem);
  line-height: 1.15;
  color: var(--grw-place);
  text-wrap: balance;
}
.grw__lane {
  display: block;
  width: min(15rem, 70%);
  height: 0.9rem;
  margin-top: 0.45rem;
}
.grw__lane path {
  fill: none;
  stroke: var(--warm-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.grw__meta {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---- Main part: persons, price, button ---------------------------------- */
.grw__main {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.grw__persons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.grw__persons-text { min-width: 0; flex: 1 1 11rem; }
.grw__label {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.grw__hint {
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.grw__stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.grw__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.grw__step:hover { border-color: var(--ink); }
.grw__step:active { transform: scale(0.92); }
.grw__step:focus-visible { outline: 3px solid var(--focus-ring, var(--warm-deep)); outline-offset: 2px; }
/* aria-disabled instead of disabled: the button keeps focus and a screen
   reader still hears that it is unavailable. */
.grw__step[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.grw__step[aria-disabled="true"]:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.grw__step[aria-disabled="true"]:active { transform: none; }
.grw__count {
  min-width: 2.4rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--warm-deep);
}

/* Price summary */
.grw__sum { margin: 0; }
.grw__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}
.grw__row dt { font-size: 0.92rem; color: var(--ink-soft); }
.grw__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.grw__row--total {
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}
.grw__row--total dt { color: var(--ink); font-weight: 600; }
.grw__total-for {
  display: block;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.grw__total {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}
.grw__total.is-tick { animation: grw-tick 0.28s ease-out; }
@keyframes grw-tick {
  from { opacity: 0.35; transform: translateY(0.3rem); }
  to { opacity: 1; transform: translateY(0); }
}

.grw__cta {
  width: 100%;
  justify-content: center;
  margin-top: 0.9rem;
}
.grw__cta[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.grw__cta[aria-disabled="true"]:hover { transform: none; }
.grw__note {
  margin-top: 0.6rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---- 1 person or an odd number ------------------------------------------ */
.grw__other {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.grw__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-block: 0.4rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--warm-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.grw__toggle::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.grw__toggle[aria-expanded="true"]::after { transform: translateY(0.2rem) rotate(-135deg); }
.grw__toggle:hover { text-decoration-thickness: 2px; }

.grw__contact {
  margin-top: 0.75rem;
  padding: 1.1rem 1rem 1.2rem;
  border-left: 3px solid var(--warm);
  background: var(--gr-ice-soft, var(--paper-soft));
  border-radius: 0 0.9rem 0.9rem 0;
}
.grw__contact:not([hidden]) { animation: grw-open 0.22s ease-out; }
@keyframes grw-open {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
.grw__contact-intro { font-size: 0.93rem; color: var(--ink); }

.grw__field { margin-top: 0.9rem; display: grid; gap: 0.35rem; }
.grw__select {
  width: 100%;
  max-width: 14rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 0.6rem;
  background: var(--paper);
  color: var(--ink);
}

.grw__line { margin-top: 0.9rem; }
.grw__line-label { font-size: 0.84rem; color: var(--ink-soft); }
.grw__line-text {
  margin-top: 0.2rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.grw__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.1rem;
}
.grw__links .btn { justify-content: center; }
.grw__links .link-arrow { color: var(--warm-deep); min-height: 2.75rem; }

/* ---- Trip no longer bookable --------------------------------------------- */
.grw__closed {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.grw__closed-text { font-weight: 600; }

/* ---- Small phones: buttons full width ------------------------------------ */
@media (max-width: 29.99rem) {
  .grw__links .btn { width: 100%; }
}

/* ---- Wider screens: dates and persons left, price and button right ------- */
@media (min-width: 48rem) {
  .grw { padding: 1.9rem 2rem 1.9rem; }
  .grw:not(.grw--closed) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    grid-template-areas:
      "head checkout"
      "info checkout"
      "other other";
    column-gap: 2.5rem;
  }
  .grw__head { grid-area: head; }
  .grw__main { display: contents; }
  .grw__info {
    grid-area: info;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
  }
  .grw__checkout {
    grid-area: checkout;
    align-self: center;
    padding-left: 2rem;
    border-left: 1px solid var(--border);
  }
  .grw__other { grid-area: other; }
}

@media (prefers-reduced-motion: reduce) {
  .grw__step,
  .grw__toggle::after { transition: none; }
  .grw__total.is-tick,
  .grw__contact:not([hidden]) { animation: none; }
}