/* Contact Us — mockup frames betfans-contact-us-desktop [1:1433] / betfans-contact-us-mobile [74:819].
 *
 * The input stroke, the dark card and the 16px radius now come from tokens.css
 * (--color-border-soft, --color-card-dark, --radius-2xl). One number is still
 * page-local: --contact-card-edge #1b2530, the 1px inside stroke of that card [1:1547].
 */
.support-cta { --contact-card-edge: #1b2530; }

/* ── contact-hero [1:1461] ────────────────────────────────────────────── */
.contact-hero { padding-block: 56px; background: var(--color-bg); }
.contact-hero__copy { display: flex; flex-direction: column; gap: var(--space-16); max-width: 744px; }
.contact-hero__headline {
  display: flex; flex-direction: column; gap: var(--space-16);
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 91.2px;
  color: var(--color-ink);
}
.contact-hero__lead { font-size: var(--fs-body-sm); line-height: 23px; color: var(--color-muted); }
.contact-hero__email {
  align-self: flex-start;
  font-size: var(--fs-body-sm); font-weight: 600; line-height: 20.49px;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.contact-hero__email:hover { color: var(--color-brand); }

/* ── contact-guidance [47:20] ─────────────────────────────────────────── */
.contact-guidance { padding-block: var(--space-48); background: var(--color-surface); }
.contact-guidance__split {
  display: grid; grid-template-columns: minmax(0, 736fr) 520fr; gap: var(--space-24);
  align-items: start;
}
.contact-guidance__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.contact-guidance__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 52.8px; color: var(--color-ink);
}
.contact-guidance__lead { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }

/* preparation-rail [47:23] — three steps split by 1px brand rules */
.prep-rail { display: flex; align-items: stretch; gap: var(--space-24); }
.prep-step { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.prep-step__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 58px; color: var(--color-on-brand-dim);
}
.prep-step__label { font-size: var(--fs-base); font-weight: 700; line-height: 19px; color: var(--color-ink); }
.prep-rail__rule { flex: 0 0 1px; width: 1px; height: 80px; background: var(--color-brand); }

/* ── contact-form [47:31] ─────────────────────────────────────────────── */
.contact-form { padding-block: 56px; background: var(--color-bg); }
.contact-form__split {
  display: grid; grid-template-columns: minmax(0, 408fr) 848fr; gap: var(--space-24);
  align-items: start;
}
/* После отправки подводка слева уходит вместе с формой — колонка под неё
   тоже, иначе подтверждение остаётся в узком правом столбце. */
.contact-form__split:has(> .contact-form__aside[hidden]) { grid-template-columns: minmax(0, 1fr); }
.contact-form__aside { display: flex; flex-direction: column; gap: var(--space-16); }
.contact-form__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }
.contact-form__note a { color: var(--color-brand); }

/* contact-form-card [1:1501] — 848 wide, r12, 24 padding, 20 between blocks */
.contact-card {
  display: flex; flex-direction: column; gap: var(--space-20);
  padding: var(--space-24);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}
/* Шапка и форма — один блок: после отправки он скрывается целиком, чтобы на
   месте отправленной заявки не оставалось приглашение её заполнить. */
.contact-card__request { display: flex; flex-direction: column; gap: var(--space-20); }
.contact-card__head { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-card__title {
  font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 27.32px;
  color: var(--color-ink);
}
.contact-card__lead { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }

.contact-fields { display: flex; flex-direction: column; gap: var(--space-20); }
.contact-fields__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }

/* The mockup's own field metrics [47:38…47:58]: 11px label, 52px control, r4,
   1px inside stroke. `.field` in components.css is the site default — this is
   the page overriding it, not a second component. */
.contact-card .field { gap: var(--space-6); }
.contact-card .field__label {
  font-size: var(--fs-2xs); font-weight: 700; line-height: 15.03px;
  letter-spacing: var(--ls-wide); color: var(--color-faint);
  text-transform: none;                    /* the mockup types the label in caps itself */
}
.contact-card .field input,
.contact-card .field select,
.contact-card .field textarea {
  min-height: 52px; padding: 0 var(--space-16);
  border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
  background: var(--color-surface); color: var(--color-ink);
  font-size: var(--fs-base); line-height: 19.12px;
}
.contact-card .field textarea {
  min-height: 200px; padding: var(--space-16); line-height: 22px; resize: vertical;
}
.contact-card .field ::placeholder { color: var(--color-faint); opacity: 1; }
.contact-card .field input:hover,
.contact-card .field select:hover,
.contact-card .field textarea:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.contact-card .field input:focus,
.contact-card .field select:focus,
.contact-card .field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring); outline: none;
}
.contact-card .field.has-error input,
.contact-card .field.has-error select,
.contact-card .field.has-error textarea { box-shadow: inset 0 0 0 1px var(--color-error); }

/* chevron-down [47:54] — the mockup draws its own, so the native arrow steps aside.
   Kept as a real element rather than a background image: that is what the frame
   holds, and a background would report as the field's fill. */
.contact-select { position: relative; display: block; }
.contact-select select { appearance: none; padding-right: 44px; }
.contact-select__chevron {
  position: absolute; right: var(--space-16); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 16px; height: 16px;
  color: var(--color-ink); pointer-events: none;
}
.contact-select__chevron .icon { width: 8px; height: 4px; fill: currentColor; stroke: none; }

/* form-footer [47:59] */
.contact-fields__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.contact-fields__note { font-size: var(--fs-sm); line-height: 18px; color: var(--color-faint); }
.contact-fields__send { min-height: 48px; padding: 0 var(--space-32); line-height: 19.12px; }

/* What the mockup does not draw: the state after a message is accepted. */
.contact-done { display: flex; flex-direction: column; gap: var(--space-12); }
.contact-done__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-ink); }
.contact-done__text { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }
.contact-done__links { display: flex; flex-wrap: wrap; gap: var(--space-20); }

/* ── gambling-support-band [47:63] ────────────────────────────────────── */
.support-cta {
  position: relative; overflow: hidden;
  padding-block: 56px;
  background: var(--color-brand);
  color: var(--color-on-dark);
}
.support-cta__grain { position: absolute; inset: 0; background: var(--color-on-dark); opacity: .06; }
.support-cta__split {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 416fr) 840fr; gap: var(--space-24);
  align-items: start;
}
.support-cta__copy { display: flex; flex-direction: column; gap: var(--space-8); }
.support-cta__heading {
  display: flex; flex-direction: column;
  gap: var(--space-8);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 50.4px;
  color: var(--color-on-dark);
}
.support-cta__card {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-2xl);
  background: var(--color-card-dark);
  box-shadow: inset 0 0 0 1px var(--contact-card-edge);
}
.support-cta__service { font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-on-dark); }
.support-cta__phone {
  font-family: var(--font-display); font-weight: 700;
  font-size: 40px; line-height: 48px; color: var(--color-on-dark);
}
.support-cta__phone a { text-decoration: none; }
.support-cta__phone a:hover { text-decoration: underline; }
.support-cta__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-on-dark-70); }
.support-cta__link { font-size: var(--fs-sm); color: var(--color-on-dark); }

/* phone-symbol [47:68] — 120px disc at 8% white, vertically centred on the band */
.support-cta__phone-symbol {
  position: absolute; right: var(--container-pad); top: 50%; translate: 0 -50%;
  z-index: 2;
  display: grid; place-items: center;
  width: 120px; height: 120px;
  border-radius: var(--radius-pill);
  background: var(--color-on-dark);
  color: var(--color-on-dark);
  opacity: .08; pointer-events: none;
}
.support-cta__phone-symbol .icon { width: 46.67px; height: 46.67px; fill: currentColor; stroke: none; }

/* ── tablet: no frame in the mockup, derived from the splits ──────────── */
@media (max-width: 1199px) {
  .contact-hero__headline { font-size: 72px; line-height: 72px; }
  .contact-guidance__split,
  .contact-form__split,
  .support-cta__split { grid-template-columns: minmax(0, 1fr); }
  .support-cta__phone-symbol { display: none; }
}

/* ── mobile frame [74:819] ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* The shared .eyebrow drops to 9px on mobile [66:194]; every eyebrow in these two
     frames stays at the desktop 11px [74:839, 74:846, 74:872, 74:906]. */
  .contact-hero .eyebrow,
  .contact-guidance .eyebrow,
  .contact-form .eyebrow,
  .support-cta .eyebrow { font-size: var(--fs-2xs); line-height: 15.03px; }

  /* [74:838] */
  .contact-hero { padding-block: var(--space-48); }
  .contact-hero__headline { gap: var(--space-4); font-size: 56px; line-height: 53px; }
  .contact-hero__lead { font-size: var(--fs-base); line-height: 21px; }
  .contact-hero__email { font-size: var(--fs-base); line-height: 19px; }

  /* [74:844] — the rail becomes three rows, each led by a short rule */
  .contact-guidance { padding-block: var(--space-48); }
  .contact-guidance__split { gap: var(--space-32); }
  .contact-guidance__copy { gap: var(--space-12); }
  .contact-guidance__heading { font-size: var(--fs-h3); line-height: 40px; }
  /* [74:849] — each step keeps its own 40px rule on the left, on its own row */
  .prep-rail { flex-direction: column; gap: var(--space-20); }
  .prep-rail__rule { display: none; }
  .prep-step {
    display: grid; grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-16); row-gap: var(--space-4);
    align-items: start;
  }
  .prep-step::before {
    content: ""; grid-column: 1; grid-row: 1 / span 2;
    height: 1px; margin-top: 28px; background: var(--color-brand);
  }
  .prep-step__no { grid-column: 2; grid-row: 1; font-size: var(--fs-h4); line-height: 34px; }
  .prep-step__label { grid-column: 2; grid-row: 2; font-size: var(--fs-sm); line-height: 18px; }

  /* [74:870] — 16px card padding, one column of fields, full-width send */
  .contact-form { padding-block: 40px; }
  .contact-form__split { gap: var(--space-24); }
  .contact-form__aside { display: none; }        /* [74:870] has no "before you send" rail */
  /* [74:870] keeps the heading outside the white card; the DOM keeps one card, so
     the frame numbers are reproduced by the gaps: 16 card padding + 46 heading +
     24 to the first field puts the fields exactly where the frame puts them. */
  .contact-card { gap: var(--space-24); padding: var(--space-16); border-radius: var(--radius-lg); }
  .contact-card__request { gap: var(--space-24); }
  .contact-card__head { gap: var(--space-6); }
  .contact-card__title { font-size: var(--fs-md); line-height: 25px; }
  .contact-card__lead { display: none; }        /* the mobile frame drops it */
  .contact-fields { gap: var(--space-16); }
  .contact-fields__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .contact-card .field__label { font-size: var(--fs-3xs); line-height: 14px; color: var(--color-muted); }
  .contact-card .field input,
  .contact-card .field select,
  .contact-card .field textarea { min-height: 48px; padding-inline: var(--space-12); }
  .contact-select__chevron { right: var(--space-12); }
  .contact-card .field textarea { min-height: 0; height: 160px; padding: var(--space-12); }
  /* [74:900] — 8px above the note, nothing under the button */
  .contact-fields__foot { flex-direction: column; align-items: stretch; gap: var(--space-12); padding-top: var(--space-8); }
  .contact-fields__note { font-size: var(--fs-xs); line-height: 16px; }
  .contact-fields__send { width: 100%; min-height: 52px; }

  /* [74:904] */
  .support-cta { padding-block: var(--space-48); }
  .support-cta__split { gap: var(--space-24); }
  /* [74:907] sets the two desktop lines as one string; kept as flex items so a
     320px viewport wraps them instead of letting the inline boxes overlap. */
  .support-cta__heading {
    flex-direction: row; flex-wrap: wrap; column-gap: .28em; row-gap: 0;
    font-size: 40px; line-height: 42px;
  }
  .support-cta__card { gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-xl); }
  .support-cta__service { font-size: var(--fs-body); line-height: 22px; }
  .support-cta__phone { font-size: 32px; line-height: 38px; }
  .support-cta__note { font-size: var(--fs-sm); line-height: 20px; }
}

/* Тап-зона 24px по WCAG 2.2 AA (2.5.8) — псевдоэлементом, чтобы не двигать раскладку. */
.contact-hero__email { position: relative; }
.contact-hero__email::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 24px;
}