/* ==========================================================================
   FitnessBlackBelt — contact.css
   Sections: Hero · Form · Booking card · Info card · What happens next · Trust
   Also defines the shared form-control kit reused by checkout.css.
   ========================================================================== */

/* ==========================================================================
   1. BREADCRUMBS
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
}
.crumbs a { color: var(--brand-300); transition: color var(--dur); }
.crumbs a:hover { color: var(--brand-200); }
.crumbs span[aria-current] { color: var(--text-soft); }

/* ==========================================================================
   2. HERO — page variant
   The hero component lives in base.css; this page only realigns the
   breadcrumb, which sits above the eyebrow inside the copy column.
   ========================================================================== */
.hero .crumbs { justify-content: flex-start; margin-bottom: 1.25rem; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.contact__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
@media (min-width: 1000px) { .contact__grid { grid-template-columns: 1.35fr .65fr; } }

.contact__form-wrap {
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(124,58,237,.12), transparent 60%),
    linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  box-shadow: var(--shadow-lg);
}
.contact__form-head { margin-bottom: 2.25rem; }
.contact__form-head h2 { font-size: var(--fs-2xl); }

.contact__aside { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 1000px) { .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ==========================================================================
   4. FORM CONTROL KIT  (shared with checkout)
   ========================================================================== */
.cform { display: grid; gap: 1.35rem; }
.cform__row { display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .cform__row--split { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .5rem; min-width: 0; }

.field > label,
.field legend {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-soft);
  padding: 0;
}
.field__req { color: var(--brand-400); }
.field__opt {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  font-size: var(--fs-sm);
  color: var(--text);
  background: rgba(255,255,255,.028);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255,255,255,.22); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(139,92,246,.65);
  background: rgba(139,92,246,.05);
  box-shadow: 0 0 0 4px rgba(139,92,246,.13);
}

/* Select with a custom chevron */
.field__select { position: relative; }
.field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}
.field__select select option { background: var(--surface-2); color: var(--text); }
.field__select svg {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--muted);
  pointer-events: none;
  transition: transform var(--dur) var(--ease-out), color var(--dur);
}
.field__select:focus-within svg { color: var(--brand-300); transform: translateY(-50%) rotate(180deg); }

/* Error state */
.field__error {
  font-size: var(--fs-xs);
  color: #FCA5A5;
  min-height: 0;
  display: none;
}
.field.has-error .field__error,
.field__error.is-shown { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: rgba(248,113,113,.65);
  background: rgba(248,113,113,.05);
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 4px rgba(248,113,113,.13); }

/* Valid state */
.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea { border-color: rgba(52,211,153,.4); }

.field__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.field__count { font-size: 11px; color: var(--dim); flex: none; margin-left: auto; }

/* --- Radio choice cards --- */
.field--choice { border: 0; padding: 0; margin: 0; }
.field--choice legend { margin-bottom: .5rem; }

.choices {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice__box {
  display: grid;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.022);
  transition: all var(--dur) var(--ease-out);
}
.choice__box strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
}
.choice__box em { font-style: normal; font-size: 11px; color: var(--dim); }

.choice:hover .choice__box { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); }
.choice input:checked + .choice__box {
  border-color: rgba(139,92,246,.65);
  background: rgba(124,58,237,.16);
  box-shadow: 0 0 0 1px rgba(139,92,246,.35), 0 12px 30px -18px rgba(124,58,237,1);
}
.choice input:checked + .choice__box strong { color: #fff; }
.choice input:checked + .choice__box em { color: var(--brand-200); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--brand-300); outline-offset: 2px; }

/* Shown only when a tier was carried over from the programs page */
.choices__carried {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .7rem;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--brand-200);
}
.choices__carried::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- Consent checkbox --- */
.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .85rem;
  align-items: start;
  cursor: pointer;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.018);
  transition: border-color var(--dur), background-color var(--dur);
}
.consent:hover { border-color: var(--line-strong); }
.consent input { position: absolute; opacity: 0; pointer-events: none; }

.consent__box {
  position: relative;
  width: 22px; height: 22px;
  margin-top: .1rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  transition: all var(--dur) var(--ease-out);
}
.consent__box::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px; height: 11px;
  background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: scale(0);
  transition: transform var(--dur) var(--ease-spring);
}
.consent input:checked + .consent__box {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(124,58,237,1);
}
.consent input:checked + .consent__box::after { transform: scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.consent__text { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }

/* --- Submit + footnote --- */
.cform__submit { margin-top: .5rem; }
.cform__submit.is-sending { pointer-events: none; opacity: .78; }

.cform__foot {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-xs);
  color: var(--dim);
}
.cform__foot svg { width: 15px; height: 15px; flex: none; color: var(--brand-400); }

/* --- Success panel --- */
.cform__success {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  border: 1px solid rgba(52,211,153,.32);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(52,211,153,.09), rgba(255,255,255,.01));
}
.cform__success-icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  color: var(--ok);
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.32);
  animation: pop-in 620ms var(--ease-spring);
}
.cform__success-icon svg { width: 26px; height: 26px; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.cform__success h3 { font-size: var(--fs-xl); margin-bottom: .75rem; }
.cform__success p { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ==========================================================================
   5. BOOKING CARD
   ========================================================================== */
.book-card {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  border: 1px solid rgba(139,92,246,.32);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(124,58,237,.28), transparent 62%),
    linear-gradient(170deg, var(--surface-2), var(--bg-2));
  box-shadow: 0 40px 90px -50px rgba(109,40,217,1);
}
.book-card__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0deg, rgba(167,139,250,.7) 90deg, transparent 200deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spin-ring 7s linear infinite;   /* keyframes live in base.css */
  pointer-events: none;
}

.book-card h2 { font-size: var(--fs-lg); margin: 1rem 0 .75rem; }
.book-card > p { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 1.5rem; }

.book-card__list { display: grid; gap: .7rem; margin-bottom: 1.75rem; }
.book-card__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .65rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.book-card__list svg { width: 15px; height: 15px; margin-top: .3rem; color: var(--brand-300); }

.book-card__note {
  margin-top: 1rem;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}

/* ==========================================================================
   6. INFO CARD
   ========================================================================== */
.info-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
}
.info-card h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.35rem;
}
.info-card__list { display: grid; gap: 1.1rem; }
.info-card__list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .9rem;
  align-items: center;
}
.info-card__list svg {
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--brand-300);
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.2);
}
.info-card__list strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 650; }
.info-card__list span { display: block; font-size: var(--fs-xs); color: var(--muted); }

.info-card__socials {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.info-card__socials > span {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .85rem;
}
.info-card__socials .socials { margin-top: 0; }

/* ==========================================================================
   7. WHAT HAPPENS NEXT
   ========================================================================== */
.next__flow { display: grid; gap: clamp(1rem, 2vw, 1.35rem); }
@media (min-width: 700px)  { .next__flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .next__flow { grid-template-columns: repeat(4, 1fr); } }

.next__flow li {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.next__flow li:hover { border-color: rgba(139,92,246,.3); transform: translateY(-5px); }

.next__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(167,139,250,.34);
  margin-bottom: 1.15rem;
}
.next__flow h3 { font-size: var(--fs-base); font-weight: 650; margin-bottom: .5rem; }
.next__flow p { font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   8. TRUST PANEL
   ========================================================================== */
.trust__panel {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
}
@media (min-width: 860px) { .trust__panel { grid-template-columns: .8fr 1.2fr; } }

.trust__photo { position: relative; min-height: 240px; }
.trust__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: contrast(1.06) saturate(.9);
}
.trust__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(91,33,182,.32), transparent 65%);
}

.trust__copy { padding: clamp(2rem, 4vw, 3rem); }
.trust__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}
.trust__who { margin-top: 1.5rem; }
.trust__who strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 650; }
.trust__who span { font-size: var(--fs-xs); color: var(--gold); }

.trust__creds {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.trust__creds span {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .28rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}