/* Shared v2 form system for booking, feedback and join.
   Tokens only. Works on top of styles.css section 17 (Forms). */

/* ---------- Form card ---------- */
.fx{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-l);padding:0 clamp(18px,3.4vw,44px) clamp(24px,3.6vw,44px);box-shadow:var(--shadow)}
[data-theme="light"] .fx{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -40px rgba(74,32,96,.45)}

/* ---------- Progress (sticky, slim) ---------- */
.fprog{position:sticky;top:var(--nav-h);z-index:5;margin:0 calc(-1 * clamp(18px,3.4vw,44px)) 0;padding:16px clamp(18px,3.4vw,44px) 14px;border-radius:var(--radius-l) var(--radius-l) 0 0;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.fprog-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-xs);color:var(--text-muted)}
.fprog-count{font-weight:600;color:var(--text)}
.fprog-count b{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.25em;color:var(--accent-text)}
.fprog-track{margin-top:10px;height:4px;border-radius:4px;background:var(--tint-strong);overflow:hidden}
.fprog-fill{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--accent-strong));transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease-settle),background .4s}
.fprog.is-complete .fprog-fill{background:linear-gradient(90deg,var(--accent-strong),var(--gold))}
.fprog.is-complete .fprog-count{color:var(--accent-text)}
.fprog-done{display:none}
.fprog.is-complete .fprog-done{display:inline}
.fprog.is-complete .fprog-todo{display:none}

/* ---------- Sections ---------- */
.fsec{border:0;min-width:0;padding:clamp(26px,3.4vw,38px) 0 6px}
.fsec+.fsec{border-top:1px dashed var(--border-strong)}
.fsec-head{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;margin-bottom:22px}
.fsec-num{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--accent-text);position:relative;transition:background-color .45s,border-color .45s,color .45s,transform .6s var(--ease-spring)}
.fsec-num svg{position:absolute;width:18px;height:18px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--ease-spring)}
.fsec-num svg path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fsec.is-done .fsec-num{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;transform:scale(1.04)}
.fsec.is-done .fsec-num span{opacity:0}
.fsec.is-done .fsec-num svg{opacity:1;transform:none}
.fsec-num span{transition:opacity .2s}
.fsec-title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.fsec-sub{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}

/* ---------- Fields: refined states ---------- */
.fx .fg{margin-bottom:20px}
.fx .fg label,.fx .field-label{font-size:var(--fs-sm);font-weight:600;letter-spacing:.005em;transition:color var(--dur-2)}
.fx .fg:focus-within>label,.fx .fg:focus-within>.field-label{color:var(--accent-text)}
.fx .req,.fx .fg label .req{color:var(--accent-text);font-weight:700}
.fx .hint{font-size:var(--fs-xs)}
.fx .fg input,.fx .fg select,.fx .fg textarea{border-radius:14px;border-color:var(--border-strong);background-color:var(--field-bg);transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2)}
.fx .fg input:hover,.fx .fg select:hover,.fx .fg textarea:hover{border-color:var(--accent-strong)}
.fx .fg input:focus,.fx .fg select:focus,.fx .fg textarea:focus{border-color:var(--accent-strong);background-color:var(--surface);box-shadow:0 0 0 4px var(--tint-strong),0 10px 24px -16px var(--btn-shadow)}
.fx .fg input:user-invalid,.fx .fg select:user-invalid,.fx .fg textarea:user-invalid{border-color:rgba(214,98,98,.75)}
.fx .fg textarea{min-height:128px}
.field-help{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}
.field-help a{color:var(--accent-text);font-weight:600}

/* custom select: chevron in a soft circle. Both layers hang from the same point (--sel-inset from the right) and
   the chevron is centred inside the circle by arithmetic, not by matching two offsets, so they stay concentric at
   any font size (they drifted 2.8px apart at 16px when one offset was in em and the other in px). The chevron is
   drawn centred in its own 12 x 8 box. */
.fx .fg select{--sel-inset:.45em;--sel-ring:40px;--sel-chev-w:12px;cursor:pointer;padding-right:3.4em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='none' stroke='%23a078b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"),radial-gradient(circle,var(--tint-strong) 0 15px,transparent 15.5px);background-repeat:no-repeat;background-position:right calc(var(--sel-inset) + (var(--sel-ring) - var(--sel-chev-w)) / 2) center,right var(--sel-inset) center;background-size:var(--sel-chev-w) 8px,var(--sel-ring) var(--sel-ring)}
.fx .fg select:invalid{color:var(--text-faint)}
.fx .fg select option{color:var(--text);background:var(--surface)}

/* ---------- Chips v2 ---------- */
.fx .chip-group{gap:10px}
.fx .chip span{min-height:46px;padding:.6em 1.15em .6em .9em;background:var(--field-bg);border-color:var(--border-strong);color:var(--text);font-weight:500;transition:background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2),transform .45s var(--ease-spring),box-shadow var(--dur-2)}
.fx .chip span::before{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);background:transparent no-repeat center/11px 11px;flex-shrink:0}
.fx .chip:hover span{border-color:var(--accent-strong)}
.fx .chip input:checked+span{background:var(--tint-strong);border-color:var(--accent-strong);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-strong)}
.fx .chip input:checked+span::before{background-color:var(--accent-strong);border-color:var(--accent-strong);box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E")}
.fx .chip input:active+span{transform:scale(.96)}
.fx .chip input:focus-visible+span{outline:2px solid var(--accent-strong);outline-offset:3px}

/* ---------- Submit area ---------- */
.fx-foot{margin-top:10px;padding-top:26px;border-top:1px dashed var(--border-strong)}
.fx-agree{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;margin-bottom:18px}
.fx-agree a{color:var(--accent-text);font-weight:600}
.fx .form-submit{min-height:58px;font-size:var(--fs-base);letter-spacing:.01em}
.fx .form-note{margin-top:14px}

/* ---------- Confirmation (injected by script.js) ---------- */
.form-confirmation{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-l);border:1px solid var(--border-strong);padding:clamp(40px,6vw,72px) clamp(22px,5vw,56px);background:radial-gradient(90% 70% at 50% 0%,var(--tint-strong),transparent 70%),var(--card);box-shadow:var(--shadow)}
.form-confirmation::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(40px,6vw,72px);width:150px;height:150px;translate:-50% -43px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%)}
.form-confirmation .confirm-tick{width:76px;height:76px;color:var(--accent-strong);margin-bottom:22px}
.form-confirmation .confirm-message{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.3;letter-spacing:-.01em;max-width:30ch;color:var(--text);text-wrap:balance}
.form-confirmation .btn-row{margin-top:30px!important}
[data-theme="light"] .form-confirmation{background:radial-gradient(90% 70% at 50% 0%,var(--lilac),transparent 72%),var(--card)}
[data-theme="light"] .form-confirmation .confirm-tick{color:var(--plum)}
@media(max-width:480px){.form-confirmation .btn-row{flex-direction:column}.form-confirmation .btn{width:100%}}

/* ---------- Page head collage (shared) ---------- */
.ph-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:end}
@media(min-width:960px){.ph-grid{grid-template-columns:1.1fr .9fr}}
.ph-grid .sec-sub{max-width:52ch}
.ph-photos{position:relative;aspect-ratio:5/4;max-width:520px;width:100%;justify-self:end}
.ph-photos figure{position:absolute;margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:6px solid var(--surface)}
.ph-photos img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
@media(max-width:959px){.ph-photos{justify-self:start;max-width:440px}}

@media (prefers-reduced-motion: reduce){.fprog-fill,.fsec-num,.fsec-num svg{transition:none}}
.fprog{transition:top var(--dur-2) var(--ease-out)}
body:has(.site-nav.is-hidden) .fprog{top:0}
@media(min-width:560px){.form-row--wide{grid-template-columns:1.6fr 1fr}}
.form-row--end{align-items:end}