/* Selr AI — 2-step event lead form. Field, button, validation and success
   treatments are ported from the live site's selr-contact-form.css (itself
   verbatim from selr-forms-staging/assets/forms.css). Custom properties carry
   an sef- prefix so nothing collides with the host page. Values match
   selr-design-language/tokens.css: fields 20px, cards 30px, pills 40px, one
   accent, error #C25D5D, motion cubic-bezier(.4,0,.2,1). */

.selr-event-form {
  --sef-ground:      #f5f5e9;
  --sef-surface:     #fcfcfa;
  --sef-surface-hi:  #fffffa;
  --sef-alt:         #fafaf7;

  --sef-ink-max:     #0d0d0d;
  --sef-display:     #1f1f1f;
  --sef-body:        #242424;
  --sef-ink-2:       #3d3d3d;
  --sef-muted:       #616161;

  --sef-accent:      #6736E2;
  --sef-signal-bad:  #c25d5d;

  --sef-hair:        rgba(227, 227, 227, 0.45);
  --sef-field:       rgba(255, 255, 255, 0.35);
  --sef-field-focus: #fafaf7;

  --sef-r-field: 20px;
  --sef-r-card:  30px;
  --sef-r-btn:   40px;

  --sef-spring: cubic-bezier(0.4, 0, 0.2, 1);

  /* Manrope does everything. The brand system is explicit that nothing else
     appears, and this file was carrying Inter for body text, which is most of
     what made the form read as generic next to the page around it. */
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: var(--sef-body);
}

.selr-event-form *, .selr-event-form *::before, .selr-event-form *::after { box-sizing: border-box; }

/* Everything is Manrope now, so this only exists to be explicit about it. */
.selr-event-form h2, .selr-event-form label, .selr-event-form .btn {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
}

.selr-event-form a { color: var(--sef-accent); }

/* ------------------------------------------------------------ card
   Transparent by default, same as the live contact form: the mount usually
   sits inside a page card that already carries the glass fill, and stacking
   two translucent layers renders visibly darker. The overlay panel supplies
   its own solid card instead. */
.selr-event-form .card {
  background: none;
  border-radius: 0;
  padding: 4px 27px 27px;
}

/* ------------------------------------------------------------ header */
.selr-event-form .head { padding: 18px 0 22px; }

/* which city and which day this form is for. A pill, not a heading: it is a
   standing marker that stays on screen through every step, so the person can
   see at the moment they hand over a number that they are booking the right
   day. Pill radius, one accent, no uppercase. */
.selr-event-form .where {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 6px 14px 6px 11px;
  border: 1px solid var(--sef-hair); border-radius: var(--sef-r-btn);
  background: var(--sef-surface-hi);
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: -0.02em; color: var(--sef-ink-2); white-space: nowrap;
}
.selr-event-form .where-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sef-accent);
}
/* read out by a screen reader, never drawn */
.selr-event-form .where-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.selr-event-form .head h2 {
  font-weight: 600; font-size: 26px; letter-spacing: -0.03em;
  color: var(--sef-display); margin: 0 0 8px;
}
.selr-event-form .head .support {
  margin: 0; font-size: 15px; color: var(--sef-muted); letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ fields */
.selr-event-form .fields { display: flex; flex-direction: column; gap: 16px; }
.selr-event-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.selr-event-form label { display: block; }
.selr-event-form .label {
  display: block;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em;
  color: #242424; margin-bottom: 7px;
}

/* the wrapper carries the padding and the surface, the control itself is bare */
.selr-event-form .field {
  background: var(--sef-field);
  border: 1px solid var(--sef-hair);
  border-radius: var(--sef-r-field);
  padding: 12px 16px;
  transition: background .3s var(--sef-spring), border-color .3s var(--sef-spring);
}
/* Focus solidifies the glass AND turns the border purple, which is the site's
   own behaviour and the whole indicator. There used to be a 2px purple outline
   on top of this, so a focused field wore two purple rings at slightly
   different radii and read as a mistake. The border is the indicator. */
.selr-event-form .field:focus-within {
  background: var(--sef-field-focus);
  border-color: var(--sef-accent);
}

.selr-event-form .field input,
.selr-event-form .field textarea {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font-family: Manrope, sans-serif;
  font-size: 16px; font-weight: 500; letter-spacing: -0.03em;
  color: #242424; line-height: 1.2;
}
.selr-event-form .field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.selr-event-form ::placeholder { color: var(--sef-muted); opacity: 1; }

.selr-event-form .field.invalid { border-color: var(--sef-signal-bad); }
.selr-event-form .err {
  display: none; margin: 6px 0 0;
  font-size: 13px; color: var(--sef-signal-bad); letter-spacing: -0.01em;
}
.selr-event-form .invalid + .err { display: block; }
.selr-event-form .consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  padding: 2px 1px; color: var(--sef-muted); font-size: 12px; line-height: 1.45;
  letter-spacing: -0.01em; cursor: pointer;
}
.selr-event-form .consent input {
  width: 18px; height: 18px; margin: 0; accent-color: var(--sef-accent);
}
.selr-event-form .consent.invalid { color: var(--sef-signal-bad); }
.selr-event-form .consent:has(input:focus-visible) {
  outline: 2px solid var(--sef-accent); outline-offset: 3px; border-radius: 4px;
}

/* honeypot. a real person never sees it, a bot fills it in */
.selr-event-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ steps
   Fade/rise on entry, quick fade on exit. 400ms on the standard curve,
   consistent with the site's structural motion. */
.selr-event-form .step.entering { animation: sef-step-in 280ms var(--sef-spring) both; }
.selr-event-form .step.leaving  { animation: sef-step-out 120ms var(--sef-spring) both; }

@keyframes sef-step-in {
  from { opacity: 0.001; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sef-step-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0.001; transform: translateY(-8px); }
}

/* ------------------------------------------------------------ click-through
   One question per step. Segmented progress up top, the question in Manrope
   display weight, answer tiles in a two-up grid: field surface, field radius,
   hairline; the picked tile takes the accent border and the soft lavender
   fill. Number keys 1 to 4 answer from the keyboard, the small key chip on
   each tile says so without shouting. */
.selr-event-form .progress {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
}
/* sentence case: selrai.com.au has no uppercase strings anywhere, and this
   counter had the only ones on the form */
.selr-event-form .progress-label {
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: -0.01em; color: var(--sef-muted); white-space: nowrap;
}
.selr-event-form .progress-segs { flex: 1; display: flex; gap: 6px; }
.selr-event-form .progress-segs i {
  flex: 1; height: 3px; border-radius: 3px; background: rgba(36,36,36,.10);
  transition: background .3s var(--sef-spring);
}
.selr-event-form .progress-segs i.is-done { background: var(--sef-accent); }
.selr-event-form .progress-segs i.is-now { background: var(--sef-accent); opacity: .45; }
.selr-event-form .q {
  margin: 0 0 16px;
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 26px;
  letter-spacing: -0.035em; line-height: 1.12; color: var(--sef-display);
  text-wrap: balance;
}
/* the one support line spec the site uses, at the form's scale */
.selr-event-form .q-note {
  margin: -8px 0 16px; font-size: 14px; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.01em; color: var(--sef-muted); max-width: 46ch;
}
.selr-event-form .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selr-event-form .opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 14px 12px 12px; cursor: pointer;
  background: var(--sef-field);
  border: 1px solid var(--sef-hair);
  border-radius: var(--sef-r-field);
  transition: background .2s var(--sef-spring), border-color .2s var(--sef-spring), transform .2s var(--sef-spring);
}
.selr-event-form .opt:hover { border-color: rgba(103,54,226,.45); background: var(--sef-surface-hi); transform: translateY(-1px); }
.selr-event-form .opt:active { transform: scale(.99); }
.selr-event-form .opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.selr-event-form .opt-key {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 12px;
  color: var(--sef-muted); background: rgba(36,36,36,.06);
  transition: background .2s var(--sef-spring), color .2s var(--sef-spring);
}
.selr-event-form .opt-label {
  flex: 1; font-family: Manrope, sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: -0.02em; color: var(--sef-body); line-height: 1.25;
}
/* Nothing until it is chosen. An empty circle on every tile reads as four
   controls waiting to be filled in, when there is only one answer to give. */
.selr-event-form .opt-mark {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 0; background: transparent; opacity: 0;
  transition: opacity .2s var(--sef-spring);
}
.selr-event-form .opt:has(input:checked) .opt-mark { opacity: 1; }
/* A CHOSEN TILE FLIPS SOLID PURPLE. This is the locked rule for every choice
   control on the site, and this form was not following it: picking an answer
   turned the tile the palest lilac, which on a warm ground is nearly the same
   value as not picking it. Four steps of that and the form feels like nothing
   is happening, which is most of why it read as boring. Solid purple with white
   type is unmistakable, and it is what the rest of the estate already does. */
.selr-event-form .opt:has(input:checked) {
  background: var(--sef-accent);
  border-color: var(--sef-accent);
}
.selr-event-form .opt:has(input:checked) .opt-label { color: #FFFFFA; }
.selr-event-form .opt:has(input:checked) .opt-key {
  background: rgba(255,255,250,.22); color: #FFFFFA;
}
/* The hollow circle was doing the job a colour change does better, and it sat
   there empty on every unpicked tile looking like something to fill in. It is a
   tick now, and it only exists once the tile is chosen. */
.selr-event-form .opt:has(input:checked) .opt-mark {
  border-color: transparent; background: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 6' fill='none' stroke='%23FFFFFA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-repeat: no-repeat; background-position: center;
}
.selr-event-form .opt:hover:has(input:checked) { background: var(--sef-accent); }
/* Keyboard focus keeps its ring HERE, unlike the text fields. A tile has no
   border colour left to change once it is purple, so the ring is the only
   thing a keyboard user would have. */
.selr-event-form .opt:has(input:focus-visible) { outline: 2px solid var(--sef-accent); outline-offset: 2px; }
.selr-event-form .q-err { margin-top: 10px; }
.selr-event-form .step-q.invalid .q-err { display: block; }
.selr-event-form .step-details .fields { margin-top: 2px; }
@media (max-width: 560px) {
  .selr-event-form .opts { grid-template-columns: 1fr; }
  .selr-event-form .opt { min-height: 52px; }
  .selr-event-form .opt-key { display: none; }
  .selr-event-form .q { font-size: 23px; }
}

/* ------------------------------------------------------------ actions */
.selr-event-form .actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.selr-event-form .btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 26px;
  border-radius: var(--sef-r-btn);
  background: var(--sef-ink-max); color: var(--sef-surface-hi);
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  transition: background .3s var(--sef-spring), transform .3s var(--sef-spring);
}
.selr-event-form .btn:hover { background: var(--sef-accent); }
.selr-event-form .btn:active { transform: scale(0.98); }
.selr-event-form .btn[disabled] { opacity: .5; cursor: default; }
/* dot removed 2026-08-18, same call as the pill buttons: it is a Kora template
   pattern, not a Selr one. Hidden rather than cut from the JS so the component
   markup stays as captured. Gap goes with it so the label sits centred. */
.selr-event-form .btn .dot { display: none; }
.selr-event-form .btn { gap: 0; }

/* the back link: small and quiet */
.selr-event-form .back {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: Manrope, sans-serif;
  font-size: 13px; color: var(--sef-muted); letter-spacing: -0.01em;
  transition: color .2s var(--sef-spring);
}
.selr-event-form .back:hover { color: var(--sef-body); }

/* ------------------------------------------------------------ success + error
   Success replaces the form in place, no redirect. Same swap as the live form. */
.selr-event-form .done { display: none; text-align: left; padding: 18px 0 8px; }
.selr-event-form .done h2 {
  font-weight: 600; font-size: 26px; letter-spacing: -0.03em;
  color: var(--sef-display); margin: 0 0 10px;
}
.selr-event-form .done p { margin: 0; color: var(--sef-ink-2); }
.selr-event-form .done .done-follow { margin-top: 8px; }

/* ---------------------------------------------------------------- checkout
   THE SUCCESS SCREEN IS THE CHECKOUT (2026-08-21). It used to be a thank you
   with a small button under it, and it read as a footnote: the two sites had
   drifted into two different treatments of the same moment, and neither of
   them looked like the point of the page. This is one treatment, in both.
   The card names the city, the day and the price, and carries one full-width
   button. Everything below it is deliberately quiet, because a person who
   would rather wait should feel invited to, not pressured. */
.selr-event-form .pay {
  margin: 22px 0 0; padding: 22px;
  background: var(--sef-surface-hi);
  border: 1px solid var(--sef-hair);
  border-radius: var(--sef-r-field);
}
.selr-event-form .pay[hidden] { display: none; }
.selr-event-form .done .pay-label {
  margin: 0 0 4px;
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: -0.025em; color: var(--sef-muted);
}
/* Their own city and day, repeated on the card that takes the money. Somebody
   about to pay two thousand dollars should be able to see what for without
   scrolling back up, and on the all-cities page this is the only place the
   choice they made is confirmed to them. */
.selr-event-form .done .pay-where {
  margin: 0 0 12px;
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: -0.02em; color: var(--sef-body);
}
.selr-event-form .done .pay-price {
  margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px;
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 34px;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--sef-display);
}
.selr-event-form .pay-note {
  font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--sef-muted);
}
/* The unscheduled variant. Same card, no price, no button, because there is
   nothing to buy yet. Deliberately quiet: this is information, not an offer. */
.selr-event-form .pay-soon { background: var(--sef-alt); }
.selr-event-form .done .pay-soon-line {
  margin: 0; font-size: 15px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--sef-ink-2); max-width: 46ch;
}

/* Full width at every size, not just on a phone. This is the one thing the
   screen is asking for, and a button sized to its own label reads as one
   option among several when it is the only one. */
.selr-event-form .pay-btn {
  width: 100%; justify-content: center;
  text-decoration: none;
  background: var(--sef-accent); color: var(--sef-surface-hi);
}
.selr-event-form .pay-btn:hover { background: var(--sef-ink-max); }
.selr-event-form .done .pay-alt {
  margin: 14px 0 0; font-size: 13px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--sef-muted);
}

/* The checkout, unfolding in place. It grows from nothing to a real height so
   the page does not jump a thousand pixels the instant the button is pressed,
   and the frame fades in behind it once it has actually loaded. */
.selr-event-form .pay-frame {
  margin: 18px 0 0;
  height: 0;
  overflow: hidden;
  transition: height .45s var(--sef-spring);
}
.selr-event-form .pay-frame[hidden] { display: none; }
.selr-event-form .pay-frame.is-loaded { height: 940px; }
.selr-event-form .pay-iframe {
  width: 100%; height: 940px; border: 0;
  border-radius: var(--sef-r-field);
  background: var(--sef-alt);
  opacity: 0;
  transition: opacity .4s var(--sef-spring);
}
.selr-event-form .pay-frame.is-loaded .pay-iframe { opacity: 1; }
.selr-event-form .done .pay-bail {
  margin: 12px 0 0; font-size: 13px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--sef-muted);
}
.selr-event-form .pay-bail[hidden] { display: none; }
.selr-event-form .pay-bail a { color: var(--sef-accent); }
/* Taller on a phone, because the checkout stacks its summary above its fields
   there instead of sitting beside them. */
@media (max-width: 810px) {
  .selr-event-form .pay-frame.is-loaded,
  .selr-event-form .pay-iframe { height: 1180px; }
}
@media (max-width: 560px) {
  .selr-event-form .pay { padding: 18px; }
  .selr-event-form .done .pay-price { font-size: 30px; }
}

.selr-event-form form.sent { display: none; }
.selr-event-form form.sent + .done { display: block; animation: sef-step-in 400ms var(--sef-spring) both; }

.selr-event-form .form-error {
  display: none; margin: 14px 0 0;
  font-size: 14px; color: var(--sef-signal-bad); letter-spacing: -0.01em;
}
.selr-event-form .form-error.show { display: block; }

/* ------------------------------------------------------------ keyboard focus
   Ported from selr-focus.css: 2px purple ring, offset 2, on the .field shell
   rather than the raw input. Text-entry controls match :focus-visible on
   click as well — that is the spec, and it is kept. */
/* Buttons only. A text field shows focus by turning its border purple, which
   is the site's rule, and adding a ring on top of it drew two rings. */
.selr-event-form .btn:focus-visible,
.selr-event-form .back:focus-visible {
  outline: 2px solid var(--sef-accent);
  outline-offset: 2px;
}
.selr-event-form .field:has(:focus-visible) input:focus-visible,
.selr-event-form .field:has(:focus-visible) textarea:focus-visible {
  outline: none;
}

/* Framer's own breakpoint, 810. Not Tailwind's. */
@media (max-width: 810px) {
  .selr-event-form .row { grid-template-columns: 1fr; }
  .selr-event-form .card { padding: 4px 26px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .selr-event-form .step.entering, .selr-event-form .step.leaving,
  .selr-event-form form.sent + .done { animation: none; }
}

/* ------------------------------------------------------------ ABN lookup
   Same overrides as the live form so the widget matches the field system. */
.selr-event-form .abnw-dropdown {
  background: var(--sef-surface-hi);
  border: 1px solid var(--sef-hair);
  border-radius: var(--sef-r-field);
  box-shadow: none;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  overflow: hidden;
}
.selr-event-form .abnw-item { color: var(--sef-body); border-bottom: 1px solid var(--sef-hair); padding: 11px 16px; }
.selr-event-form .abnw-item:hover, .selr-event-form .abnw-item.abnw-active { background: var(--sef-alt); }
.selr-event-form .abnw-item .abnw-n { font-family: Manrope, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
.selr-event-form .abnw-item .abnw-m { color: var(--sef-muted); font-size: 12px; }
.selr-event-form .abnw-badge {
  background: var(--sef-field); color: var(--sef-ink-2);
  border: 1px solid var(--sef-hair); border-radius: var(--sef-r-btn);
  padding: 1px 8px; font-size: 11px;
}
.selr-event-form .abnw-badge.ok { background: var(--sef-accent); border-color: var(--sef-accent); color: #fff; }
.selr-event-form .abnw-empty { color: var(--sef-muted); padding: 12px 16px; }
.selr-event-form .abnw-verified {
  background: var(--sef-field);
  border: 1px solid var(--sef-hair);
  border-radius: var(--sef-r-field);
  padding: 12px 16px;
}
.selr-event-form .abnw-verified.warn { border-color: var(--sef-signal-bad); }
.selr-event-form .abnw-chk { background: var(--sef-accent); }
.selr-event-form .abnw-verified.warn .abnw-chk { background: var(--sef-signal-bad); }
.selr-event-form .abnw-verified.unv .abnw-chk  { background: var(--sef-muted); }
.selr-event-form .abnw-vlabel { color: var(--sef-accent); font-family: Manrope, sans-serif; }
.selr-event-form .abnw-vname { font-family: Manrope, sans-serif; color: var(--sef-display); }
.selr-event-form .abnw-vdet  { color: var(--sef-ink-2); }
.selr-event-form .abnw-change { color: var(--sef-accent); }

/* ============================================================ overlay panel
   The site's lightbox treatment: dark scrim + blur, one solid card centered.
   Opened by SelrEventForm.openPanel(). */
.selr-event-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.selr-event-overlay.open { opacity: 1; }
.selr-event-overlay.closing { opacity: 0; }

.selr-event-panel {
  position: relative;
  width: 100%; max-width: 620px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #F7F5EF;                       /* the site's canvas, not pure white */
  border-radius: 30px;                       /* THE card radius */
  padding: 22px 8px 8px;
  transform: translateY(14px);
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.selr-event-overlay.open .selr-event-panel { transform: none; }

.selr-event-panel .panel-close {
  position: absolute; top: 18px; right: 22px; z-index: 1;
  appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  color: #242424; font-size: 20px; line-height: 1;
  transition: background .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.selr-event-panel .panel-close:hover { background: #fffffa; }
.selr-event-panel .panel-close:focus-visible { outline: 2px solid #6736E2; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .selr-event-overlay, .selr-event-panel { transition: none; }
}