/* Arovelo booking and purchase flow: Book a consultation, Checkout, Confirmation,
   Questionnaire and the policy pages. Loaded after style.css and pages.css. */

/* Short hero for task pages: same photo, shade and intro, less height */
.hero--compact { min-height: 54vh; min-height: 54svh; }
.hero--compact .hero__content { padding-bottom: clamp(7.5rem, 13vh, 9.5rem); }
.hero--compact .hero__title { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }

/* The task card rises over the bottom of the hero, like a panel laid on the photo */
.flow { position: relative; z-index: 3; margin-top: -6rem; padding: 0 0 var(--sec-gap); }

/* Step indicator shared by booking, checkout, confirmation and questionnaire */
.steps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem 0.45rem 0.45rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--grey);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
}
.steps li.is-done::before { content: ""; background: var(--teal) var(--tick) 50% / 0.8rem no-repeat; }
.steps li.is-current { background: var(--navy); color: var(--white); }
.steps li.is-current::before { background: var(--teal); color: var(--white); }

:root {
  --tick: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 12 4 4 8-8%22/%3E%3C/svg%3E");
  --error: #C23B3B;
}

/* ---------- Book a consultation: info panel + calendar ---------- */
.booker {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  border-radius: 1.75rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
  box-shadow: 0 40px 80px -50px rgba(5, 44, 83, 0.45);
  overflow: hidden;
}
.booker__info { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--grey-line); }
.booker__expert { display: flex; align-items: center; }
.booker__avatars { display: flex; }
.booker__avatars img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--white); margin-right: -0.7rem; }
.booker__expert-text { margin-left: 1.5rem; font-size: 0.85rem; line-height: 1.35; color: var(--muted); }
.booker__expert-text b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--navy); }
.booker__title { margin: 1.75rem 0 0; font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--navy); }
.booker__lead { margin: 0.8rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.booker__facts { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid var(--grey-line); }
.booker__facts li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; color: var(--navy); }
.booker__facts svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--teal); }
.booker__facts small { color: var(--muted); font-size: 0.85rem; }
.booker__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.booker__tags span { padding: 0.4rem 0.8rem; border-radius: var(--pill); background: rgba(214, 180, 106, 0.18); font-size: 0.82rem; font-weight: 600; color: #8A6D2C; }
.booker__tags span[hidden] { display: none; }
.booker__note { margin-top: auto; padding-top: 1.75rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted-2); }

.booker__pick { padding: clamp(1.5rem, 3vw, 2.5rem); }
.booker__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.booker__head h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.tz { font-size: 0.8rem; color: var(--muted); }
.tz b { color: var(--navy); font-weight: 600; }

.cal { margin-top: 1.25rem; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.cal__month { font-size: 1rem; font-weight: 600; color: var(--navy); }
.cal__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--grey);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}
.cal__btn svg { width: 1rem; height: 1rem; }
.cal__btn:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.cal__btn:disabled { opacity: 0.35; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cal__dow { padding-bottom: 0.4rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.cal__day {
  aspect-ratio: 1.35;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  font-size: 0.92rem;
  color: #B7C1CB;
  cursor: default;
}
.cal__day.is-open { background: var(--grey); color: var(--navy); font-weight: 500; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.cal__day.is-open:hover { background: rgba(7, 121, 186, 0.14); }
.cal__day.is-today { box-shadow: inset 0 0 0 1px rgba(5, 44, 83, 0.25); }
.cal__day[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.cal__day:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.slots { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--grey-line); }
.slots__label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.8rem; font-size: 0.95rem; font-weight: 600; color: var(--navy); }
.slots__label small { font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.45rem; }
.slot {
  padding: 0.75rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  background: var(--grey);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.slot:hover:not(:disabled) { border-color: var(--teal); }
.slot[aria-pressed="true"] { background: var(--teal); color: var(--white); }
.slot:disabled { background: transparent; border-color: var(--grey-line); color: #C5CDD5; text-decoration: line-through; cursor: not-allowed; }
.slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.slots__empty { margin: 0; padding: 1.25rem; border-radius: 0.9rem; background: var(--grey); font-size: 0.9rem; color: var(--muted); }

.pickbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-radius: 1.1rem;
  background: var(--grey);
}
.pickbar__text { font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.pickbar__text b { display: block; font-size: 1rem; font-weight: 600; color: var(--navy); }
.btn.is-off { opacity: 0.45; pointer-events: none; }

/* Three small reassurance cards under a task card */
.mini-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.875rem 0 0; padding: 0; list-style: none; }
.mini-cards li { display: flex; gap: 0.9rem; padding: 1.25rem; border-radius: 1.25rem; background: var(--grey); }
.mini-cards svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--teal); }
.mini-cards b { display: block; font-size: 0.98rem; font-weight: 600; color: var(--navy); }
.mini-cards span { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }

/* ---------- Checkout (classic WooCommerce structure, restyled) ---------- */
.checkout-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: 1.9rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
  box-shadow: 0 40px 80px -50px rgba(5, 44, 83, 0.45);
}
.co-main { padding: clamp(1.25rem, 3vw, 2.25rem); }
.co-block + .co-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--grey-line); }
.co-block__head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.co-block__title { margin: 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }
.co-block__sub { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--muted); }
.co-fields { display: grid; gap: 0.9rem; }
.co-fields .field-row { gap: 0.9rem; }
.field__label abbr { color: var(--teal); text-decoration: none; }
.field.has-error input, .field.has-error .picker__trigger { border-color: #D64545; background: #FFF7F7; }
.field__error { display: none; font-size: 0.8rem; color: var(--error); }
.field.has-error .field__error { display: block; }

/* Hold timer for a reserved consultation slot */
.hold { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.hold[hidden] { display: none; }
.hold__clock { display: inline-flex; gap: 0.2rem; }
.hold__clock span { display: grid; place-items: center; min-width: 1.6rem; height: 2rem; padding: 0 0.3rem; border-radius: 0.45rem; background: var(--navy); font-size: 0.95rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
.hold__clock i { align-self: center; font-style: normal; font-weight: 600; color: var(--navy); }
.hold.is-low .hold__clock span { background: var(--error); }

/* Express pay + card fields (stand-in for Stripe's Payment Element) */
.express { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.express button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 3rem;
  border: 0;
  border-radius: 0.9rem;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s;
}
.express button:hover { opacity: 0.85; }
.express svg { width: 1.2rem; height: 1.2rem; }
.or-line { display: flex; align-items: center; gap: 0.9rem; margin: 1.25rem 0; font-size: 0.8rem; color: var(--muted-2); }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--grey-line); }
.card-input { position: relative; }
.card-input input { padding-right: 7rem; letter-spacing: 0.04em; }
.card-brands { position: absolute; right: 0.75rem; bottom: 0.72rem; display: flex; gap: 0.3rem; pointer-events: none; }
.card-brands span { display: grid; place-items: center; height: 1.4rem; padding: 0 0.4rem; border-radius: 0.3rem; background: var(--white); border: 1px solid var(--grey-line); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; color: var(--navy); }
.stripe-note { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); }
.stripe-note svg { width: 0.95rem; height: 0.95rem; color: var(--teal); }

.co-terms { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.5rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.co-terms input { width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: var(--teal); flex: none; }
.co-terms a { color: var(--teal); font-weight: 500; }
.co-terms.has-error { color: var(--error); }

.place-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 3.6rem;
  margin-top: 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: var(--teal);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.place-order:hover { background: var(--navy); }
.place-order svg { width: 1.1rem; height: 1.1rem; }
.place-order.is-busy { pointer-events: none; background: var(--navy); }
.place-order:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* WooCommerce notice group, restyled */
.wc-notice { display: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: 1rem; background: #FFF4F4; border: 1px solid rgba(214, 69, 69, 0.25); font-size: 0.9rem; color: #A93232; }
.wc-notice.is-on { display: block; }
.wc-notice ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.wc-notice--info { background: rgba(214, 180, 106, 0.14); border-color: rgba(214, 180, 106, 0.45); color: #7A5A12; }
.wc-notice--info a { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* Order review: a "ticket" with punched notches between the items and the total */
.co-side { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: 1.4rem; background: var(--grey); }
.co-side__title { margin: 0 0 1.25rem; font-size: 1.1rem; font-weight: 600; color: var(--navy); }
.co-item { display: flex; gap: 0.9rem; padding: 1rem; border-radius: 1.1rem; background: var(--white); }
.co-item .icon-tile { background: var(--teal); }
.co-item__name { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.co-item__desc { margin-top: 0.15rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.co-item__price { margin-left: auto; font-size: 1rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.shop_table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: 0.9rem; }
.shop_table th { padding: 0.5rem 0; text-align: left; font-weight: 400; color: var(--muted); }
.shop_table td { padding: 0.5rem 0; text-align: right; font-weight: 500; color: var(--navy); }
.shop_table tr[hidden] { display: none; }
.coupon-toggle { margin-top: 0.75rem; padding: 0; border: 0; background: none; font-size: 0.86rem; font-weight: 500; color: var(--teal); cursor: pointer; text-align: left; }
.coupon { display: none; gap: 0.5rem; margin-top: 0.6rem; }
.coupon.is-on { display: flex; }
.coupon input { flex: 1; min-width: 0; padding: 0.7rem 0.9rem; border: 1px solid transparent; border-radius: 0.8rem; background: var(--white); font-size: 0.9rem; text-transform: uppercase; color: var(--navy); outline: none; }
.coupon input:focus { border-color: var(--teal); }
.coupon button { padding: 0 1rem; border: 0; border-radius: 0.8rem; background: var(--navy); color: var(--white); font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.coupon__msg { margin-top: 0.4rem; font-size: 0.8rem; }
.coupon__msg.is-ok { color: var(--teal-dark); }
.coupon__msg.is-bad { color: var(--error); }
.ticket-cut { position: relative; margin: 1.25rem calc(-1 * clamp(1.25rem, 2.5vw, 1.75rem)); border-top: 2px dashed rgba(5, 44, 83, 0.15); }
.ticket-cut::before, .ticket-cut::after { content: ""; position: absolute; top: -0.85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--white); }
.ticket-cut::before { left: -0.8rem; }
.ticket-cut::after { right: -0.8rem; }
.co-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.co-total small { display: block; font-size: 0.85rem; color: var(--muted); }
.co-total strong { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.04em; color: var(--navy); white-space: nowrap; }
.co-total strong span { font-size: 0.45em; letter-spacing: 0; color: var(--muted); margin-left: 0.2rem; }
.co-side__foot { margin-top: auto; padding-top: 1.5rem; }
.co-side__foot ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.co-side__foot li { display: flex; gap: 0.55rem; align-items: center; }
.co-side__foot svg { width: 1rem; height: 1rem; color: var(--teal); flex: none; }

/* ---------- Confirmation / thank you ---------- */
.done {
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: 1.9rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
  box-shadow: 0 40px 80px -50px rgba(5, 44, 83, 0.45);
  text-align: center;
}
.done__art { display: block; width: min(100%, 22rem); height: auto; margin: -0.5rem auto 0; overflow: visible; }
.done__title { margin: 0.75rem 0 0; font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--navy); }
.done__lead { margin: 1rem auto 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }
.done__lead b { color: var(--navy); font-weight: 600; }
.recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; padding: 0.4rem; border-radius: 1.3rem; background: var(--grey); list-style: none; text-align: left; }
.recap li { display: flex; gap: 0.8rem; align-items: center; padding: 1rem 1.1rem; }
.recap li + li { border-left: 1px solid rgba(5, 44, 83, 0.08); }
.recap li[hidden] { display: none; }
.recap .icon-tile { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--teal); }
.recap .icon-tile svg { width: 1.1rem; height: 1.1rem; }
.recap b { display: block; font-size: 0.98rem; font-weight: 600; color: var(--navy); }
.recap span { font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.done__actions { display: flex; justify-content: center; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-top: 2rem; }
.ghost-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 3.25rem; padding: 0 1.4rem; border: 1px solid rgba(5, 44, 83, 0.15); border-radius: var(--pill); background: var(--white); font-size: 0.95rem; font-weight: 500; color: var(--navy); cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
.ghost-btn[hidden] { display: none; }
.ghost-btn svg { width: 1.05rem; height: 1.05rem; color: var(--teal); }
.ghost-btn:hover { background: var(--grey); border-color: var(--grey); }
.done__order { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--grey-line); list-style: none; font-size: 0.85rem; color: var(--muted); }
.done__order b { color: var(--navy); font-weight: 600; }
.done__help { margin: 1.25rem 0 0; font-size: 0.88rem; color: var(--muted); }
.done__help a { color: var(--teal); font-weight: 500; }

/* ---------- Questionnaire: one question per screen on a stacked card ---------- */
.quiz { position: relative; max-width: 44rem; margin: 0 auto; }
.quiz::before {
  content: "";
  position: absolute;
  inset: 1.25rem -0.75rem -0.75rem 1.25rem;
  border-radius: 2rem;
  background: var(--grey);
  transform: rotate(3deg);
  z-index: -1;
}
.quiz__card {
  position: relative;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 2rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
  box-shadow: 0 40px 80px -50px rgba(5, 44, 83, 0.45);
  overflow: hidden;
}
.quiz__top { display: flex; align-items: center; gap: 1.25rem; }
.quiz__bars { display: flex; flex: 1; gap: 0.35rem; }
.quiz__bars span { flex: 1; height: 0.3rem; border-radius: var(--pill); background: var(--grey); overflow: hidden; }
.quiz__bars span i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--navy); transition: width 0.5s var(--ease); }
.quiz__bars span.is-done i { width: 100%; }
.quiz__bars span.is-current i { width: 45%; background: var(--teal); }
.quiz__close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--grey); color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.quiz__close svg { width: 0.95rem; height: 0.95rem; }
.quiz__close:hover { background: var(--navy); color: var(--white); }
.quiz__stage { position: relative; flex: 1; margin-top: 2.5rem; }
.q[hidden] { display: none; }
.q__num { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.q__title { margin: 0.9rem 0 0; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--navy); }
.q__hint { display: block; margin-top: 1.75rem; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.q__options { display: grid; gap: 0.5rem; margin-top: 1rem; }
.q__options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--grey-line);
  border-radius: 1rem;
  font-size: 1.02rem;
  color: var(--navy);
  transition: border-color 0.25s, background-color 0.25s;
}
.opt span::before { content: ""; width: 1.2rem; height: 1.2rem; flex: none; border: 1.5px solid rgba(5, 44, 83, 0.5); border-radius: 50%; transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s; }
.opt input[type="checkbox"] + span::before { border-radius: 0.35rem; }
.opt:hover span { border-color: rgba(7, 121, 186, 0.5); }
.opt input:checked + span { border-color: var(--teal); background: rgba(7, 121, 186, 0.06); }
.opt input[type="radio"]:checked + span::before { border-color: var(--teal); box-shadow: inset 0 0 0 0.25rem var(--white); background: var(--teal); }
.opt input[type="checkbox"]:checked + span::before { border-color: var(--teal); background: var(--teal) var(--tick) 50% / 0.8rem no-repeat; }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.q textarea { width: 100%; min-height: 8rem; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--grey-line); border-radius: 1rem; background: var(--white); font: inherit; font-size: 1rem; color: var(--navy); resize: vertical; outline: none; }
.q textarea:focus { border-color: var(--teal); }
.quiz__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.quiz__count { font-size: 0.85rem; color: var(--muted); }
.quiz__nav { display: flex; align-items: center; gap: 0.5rem; }
.quiz__back { height: 3.25rem; padding: 0 1.3rem; border: 0; border-radius: 1rem; background: transparent; font-size: 1rem; font-weight: 500; color: var(--navy); cursor: pointer; transition: background-color 0.3s; }
.quiz__back:hover { background: var(--grey); }
.quiz__back:disabled { visibility: hidden; }
.quiz__next { min-width: 8.5rem; height: 3.25rem; padding: 0 1.6rem; border: 0; border-radius: 1rem; background: var(--teal); font-size: 1rem; font-weight: 600; color: var(--white); cursor: pointer; transition: background-color 0.3s; }
.quiz__next:hover { background: var(--navy); }
.quiz__error { min-height: 1.2rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--error); }
.quiz__end { text-align: center; padding-top: 0.5rem; }
.quiz__end[hidden] { display: none; }
.quiz__end .done__art { width: 14rem; }
.quiz__summary { display: grid; gap: 0.4rem; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-radius: 1.1rem; background: var(--grey); list-style: none; text-align: left; font-size: 0.88rem; color: var(--muted); }
.quiz__summary b { color: var(--navy); font-weight: 600; }

/* ---------- Policy pages ---------- */
.legal-note { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 2rem; padding: 1rem 1.25rem; border-radius: 1rem; background: rgba(214, 180, 106, 0.14); border: 1px solid rgba(214, 180, 106, 0.4); font-size: 0.9rem; line-height: 1.5; color: #7A5A12; }
.legal-note svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.1rem; }
.legal { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: 1.9rem; background: var(--white); border: 1px solid var(--grey-line); box-shadow: 0 40px 80px -50px rgba(5, 44, 83, 0.35); }
.legal__toc { position: sticky; top: 2rem; align-self: start; }
.legal__toc p { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.legal__toc ol { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc a { display: flex; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem; font-size: 0.9rem; color: var(--muted); transition: background-color 0.3s, color 0.3s; counter-increment: toc; }
.legal__toc a::before { content: counter(toc, decimal-leading-zero); font-size: 0.78rem; color: var(--muted-2); }
.legal__toc a:hover, .legal__toc a.is-on { background: var(--grey); color: var(--navy); }
.legal__others { display: grid; gap: 0.4rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--grey-line); }
.legal__others a { font-size: 0.88rem; font-weight: 500; color: var(--teal); }
.legal__others a[aria-current] { color: var(--navy); }
.legal__body h2 { margin: 2.5rem 0 0; font-size: 1.45rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); scroll-margin-top: 2rem; }
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body p, .legal__body li { font-size: 0.98rem; line-height: 1.7; color: var(--muted); }
.legal__body p { margin: 0.75rem 0 0; }
.legal__body ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.legal__body a { color: var(--teal); font-weight: 500; }
.legal__updated { margin: 0 0 1.5rem; font-size: 0.85rem; color: var(--muted-2); }

/* Inline "sent" state for visual-only forms (contact, newsletter) */
.form-sent { display: none; margin-top: 0.75rem; padding: 0.8rem 1rem; border-radius: 0.9rem; background: rgba(7, 121, 186, 0.1); font-size: 0.88rem; font-weight: 500; color: var(--teal-dark); text-align: center; }
.form-sent.is-on { display: block; }

@media (max-width: 991px) {
  .booker { grid-template-columns: minmax(0, 1fr); }
  .booker__info { border-right: 0; border-bottom: 1px solid var(--grey-line); }
  .booker__note { margin-top: 1.5rem; padding-top: 0; }
  .mini-cards { grid-template-columns: minmax(0, 1fr); }
  .checkout-card { grid-template-columns: minmax(0, 1fr); }
  .co-side { order: -1; }
  .recap { grid-template-columns: minmax(0, 1fr); }
  .recap li + li { border-left: 0; border-top: 1px solid rgba(5, 44, 83, 0.08); }
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
}
@media (max-width: 767px) {
  .hero--compact { min-height: 62svh; }
  .flow { margin-top: -4.5rem; }
  .steps li { font-size: 0.78rem; padding-right: 0.45rem; }
  .steps li span { display: none; }
  .steps li.is-current { padding-right: 0.9rem; }
  .steps li.is-current span { display: inline; }
  .cal__day { aspect-ratio: 1; border-radius: 0.6rem; font-size: 0.86rem; }
  .express { grid-template-columns: minmax(0, 1fr); }
  .q__options--2 { grid-template-columns: minmax(0, 1fr); }
  .quiz__card { min-height: 30rem; border-radius: 1.5rem; }
  .quiz::before { display: none; }
  .done { padding: 1.5rem 1.1rem; border-radius: 1.5rem; }
}

/* Screen-reader-only text */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Review fixes */
.quiz__foot[hidden] { display: none; }
.q__hint { margin-top: 0; padding-top: 1.5rem; }
.legal__others a { counter-increment: none; padding: 0.35rem 0.75rem; }
.legal__others a::before { content: none; }
.recap .icon-tile { color: var(--white); font-size: inherit; }
[data-plan-icon][hidden] { display: none; }
@media (max-width: 767px) { .co-item { flex-wrap: wrap; } .co-item__price { width: 100%; margin-left: 3.65rem; } }

/* Payment method choice (WooCommerce gateways): Stripe and, for testing, cash on delivery */
.pay-methods { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pay-methods > li { border: 1px solid var(--grey-line); border-radius: 1.1rem; transition: border-color 0.3s, background-color 0.3s; }
.pay-methods > li:has(input[name="payment_method"]:checked) { border-color: var(--teal); background: rgba(7, 121, 186, 0.03); }
.pay-method { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.1rem; cursor: pointer; }
.pay-method input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--teal); flex: none; }
.pay-method__text { display: grid; font-size: 0.98rem; font-weight: 600; color: var(--navy); }
.pay-method__text small { font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.pay-method__brands { position: static; margin-left: auto; }
.pay-box { padding: 0.25rem 1.1rem 1.1rem; }
.pay-box[hidden] { display: none; }
.pay-box__note { margin: 0; padding: 0.9rem 1rem; border-radius: 0.9rem; background: var(--grey); font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.pay-box__note b { color: var(--navy); font-weight: 600; }
@media (max-width: 767px) { .pay-method__brands { display: none; } }
.flow { background: var(--white); }


/* ---------- Cookie consent banner ---------- */
.consent {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  width: min(26rem, calc(100% - 2.5rem));
  padding: 1.25rem;
  border-radius: 1.4rem;
  background: var(--white);
  border: 1px solid var(--grey-line);
  box-shadow: 0 30px 70px -20px rgba(5, 44, 83, 0.4);
  color: var(--navy);
}
.consent[hidden] { display: none; }
.consent__title { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.consent__text { margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.consent__text a { color: var(--teal); font-weight: 500; }
.consent__prefs { display: grid; gap: 0.4rem; margin-top: 1rem; overflow: hidden; }
.consent__prefs[hidden] { display: none; }
.consent__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.9rem; background: var(--grey); font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.consent__opt b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.consent__opt input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal); flex: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.consent__btn { flex: 1; min-width: 6.5rem; height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 0.8rem; background: var(--teal); font-size: 0.88rem; font-weight: 600; color: var(--white); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.consent__btn:hover { background: var(--navy); }
.consent__btn--ghost { background: var(--grey); color: var(--navy); }
.consent__btn--ghost:hover { background: var(--navy); color: var(--white); }
.consent__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 767px) { .consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; } }

/* Task pages: content starts below the hero with the normal section gap (no overlap) */
.hero--compact .hero__content { padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.flow { margin-top: 0; padding-top: var(--sec-gap); }
@media (max-width: 767px) { .flow { margin-top: 0; } .hero--compact { min-height: 56svh; } }

/* Banner sits bottom-right above the WhatsApp button, clear of the hero form on the left */
@media (min-width: 768px) { .consent { left: auto; right: 1.25rem; bottom: 5.75rem; } }