/* ═══════════════════════════════════════════
   Chanlify Moldova — guided contact funnel
   /contact/ (ro) · /ru/kontakty/ (ru)
   ═══════════════════════════════════════════

   Loaded per-page via `page.styles`, not from the global bundle: two pages on
   the site carry this and every other page would pay for it.

   ── WHAT THIS MIRRORS ─────────────────────────────────────────────────────
   The French written-contact funnel at app.chanlify.fr/acces: a stepped
   qualification flow where WE ask and the visitor mostly TAPS, with typing
   held back to the final contact step. Its component vocabulary is reproduced
   here in the .md design system's own tokens — progress bar, count tiles,
   selection chips, solid sky-700 submit, green-check confirmation panel, and
   the same 240ms slide-fade between screens (acces.module.css).

   ── WHERE IT DELIBERATELY DIVERGES ────────────────────────────────────────
   /acces is a single centred column (max-w-md). This page is two columns on
   desktop — context left, flow right — per the operator. Because /acces has no
   two-column arrangement to copy, the grid is taken from THIS site's existing
   idiom instead of invented: `.hero-inner` is `1fr 1fr`, `gap: 80px`,
   collapsing to one column at 930px. Those exact numbers are reused below so
   the page sits in the same rhythm as the homepage it links from.

   Mobile order is copy → flow → support, and it is the DOM order too, so the
   reading order a screen reader gets is the order the eye gets.

   NO INLINE <script> ANYWHERE ON THIS SITE (CSP: script-src 'self'). The one
   inline <style> sits inside a <noscript> in <head>, which style-src permits.
   ─────────────────────────────────────────────────────────────────────── */

/* ─── Page shell + two-column grid ──────────────────────────────────────── */
.contact-section {
  padding: 128px 40px 96px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 22% -140px, var(--accent-light), transparent 68%),
    var(--white);
}
.contact-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  align-items: start;
}
/* Left column stacks in two rows so the flow can sit beside BOTH of them:
   the headline block above, the supporting points below. */
.contact-copy    { grid-column: 1; grid-row: 1; }
.contact-support { grid-column: 1; grid-row: 2; margin-top: 36px; }
.contact-flow    { grid-column: 2; grid-row: 1 / span 2; }

/* ─── Left column: context ──────────────────────────────────────────────── */
.contact-copy h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 16px;
  max-width: 15ch;
}
.contact-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 46ch;
  margin: 0 0 12px;
}
.contact-lede strong { color: var(--text); font-weight: 700; }
.contact-fineprint {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 50ch;
  margin: 0;
}

/* Supporting points. Muted on purpose: the right column is the action, this
   column backs it up rather than competing with it. */
.cf-points { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; }
.cf-point { display: flex; gap: 12px; align-items: flex-start; }
.cf-point-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent-dark);
}
.cf-point h2 {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
  margin: 0 0 3px;
}
.cf-point p { font-size: .8125rem; line-height: 1.6; color: var(--muted); margin: 0; }

.cf-direct { font-size: .875rem; line-height: 1.6; color: var(--muted); margin: 0; }
.cf-direct a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* ≥40px tap target without breaking the sentence: 20px line + 2×11px. */
  display: inline-block;
  padding: 11px 4px;
}

/* ─── Right column: the card ────────────────────────────────────────────── */
.cf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 24px 20px;
}
@media (min-width: 560px) { .cf-card { padding: 30px 30px 26px; } }

/* ─── Progress ──────────────────────────────────────────────────────────── */
.cf-progress { margin: 0 0 26px; }
.cf-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cf-progress-label { color: var(--accent-dark); }
.cf-progress-count { color: var(--text-3); flex-shrink: 0; }
.cf-progress-track {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}
.cf-progress-fill {
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--accent-dark);
  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}

/* ─── Steps ─────────────────────────────────────────────────────────────── */
.cf-step[hidden] { display: none; }
.cf-step {
  animation: cfSlideIn 240ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cfSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.cf-q {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3.4vw, 25px);
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 7px;
}
.cf-q:focus { outline: none; }
.cf-q:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 4px; border-radius: 4px; }
.cf-q-sub {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}

/* The real inputs. Kept in the accessibility tree and focusable — only moved
   out of sight, so keyboard tabbing, arrow keys inside the radio group and
   screen-reader announcements all keep working. `display:none` would have
   destroyed every one of those. */
.cf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Honeypot ──────────────────────────────────────────────────────────── */
/* Moved off-screen rather than `display:none` or `hidden`: the crude bots this
   catches skip fields the browser would not render, and a visible-to-the-DOM
   field is what makes the trap work. Paired with tabindex="-1" and
   aria-hidden="true" in the markup, so no keyboard or screen-reader user can
   reach it and trip it by accident. */
.cf-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Count tiles (single choice) ───────────────────────────────────────── */
.cf-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 460px) { .cf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 76px;
  padding: 12px 8px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.cf-tile:hover { border-color: rgba(3, 105, 161, .4); background: rgba(224, 242, 254, .35); }
.cf-tile-value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--text);
}
.cf-tile-hint {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  line-height: 1.25;
}
.cf-sr:checked + .cf-tile {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 2px 10px rgba(3, 105, 161, .3);
}
.cf-sr:checked + .cf-tile .cf-tile-value { color: #fff; }
.cf-sr:checked + .cf-tile .cf-tile-hint  { color: rgba(255, 255, 255, .82); }
.cf-sr:focus-visible + .cf-tile { outline: 2px solid var(--accent-mid); outline-offset: 3px; }

/* Wider label, no big numeral — used by the city step. */
.cf-tiles--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 460px) { .cf-tiles--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-tiles--wide .cf-tile { min-height: 62px; }
.cf-tiles--wide .cf-tile-value { font-size: 1rem; font-weight: 700; letter-spacing: -.2px; }

/* ─── Platform chips (multi choice) ─────────────────────────────────────── */
.cf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 11px 17px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.cf-chip::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1.5px solid var(--border-2);
  background: var(--white) no-repeat center;
  background-size: 11px 11px;
  transition: border-color .18s, background-color .18s;
}
.cf-chip:hover { border-color: rgba(3, 105, 161, .45); background: rgba(224, 242, 254, .35); color: var(--text); }
.cf-sr:checked + .cf-chip {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: 0 2px 10px rgba(3, 105, 161, .28);
}
.cf-sr:checked + .cf-chip::before {
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cf-sr:focus-visible + .cf-chip { outline: 2px solid var(--accent-mid); outline-offset: 3px; }

/* ─── Final step fields ─────────────────────────────────────────────────── */
.cf-fields { display: flex; flex-direction: column; gap: 16px; margin: 0 0 18px; }
.cf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-2);
}
.cf-label .cf-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-3);
}
.cf-input,
.cf-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* 16px floor: anything smaller makes iOS Safari zoom on focus */
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}
.cf-textarea { min-height: 92px; resize: vertical; }
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--text-3); }
.cf-input:focus, .cf-textarea:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, .16);
}

/* ─── Messaging handle: country code + number ───────────────────────────── */
/* Two controls, one answer. The <select> is native — keyboard operable, opens
   as a platform control so nothing on the page shifts, and costs zero bytes of
   JS. `minmax(0, …)` on the number column stops a long placeholder from
   forcing the row wider than the card at 320px. */
.cf-telrow {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media (min-width: 420px) { .cf-telrow { grid-template-columns: 152px minmax(0, 1fr); } }

.cf-dial {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 32px 12px 12px;
  font-family: var(--font-body);
  font-size: 16px; /* 16px floor: below this iOS Safari zooms on focus */
  line-height: 1.5;
  color: var(--text);
  background: var(--white) no-repeat right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border: 1px solid var(--border-2);
  border-radius: 10px;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
  /* The list is long and the names are long; clip rather than stretch. */
  text-overflow: ellipsis;
}
.cf-dial:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, .16);
}
.cf-telnum { min-width: 0; }

/* Read-back of what the visitor selected, shown above the contact fields so
   nobody types their address without seeing what it is attached to. */
.cf-recap {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
}
.cf-recap-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin: 0 0 8px;
}
.cf-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cf-recap-list li { font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.cf-recap-list b { color: var(--text); font-weight: 700; }

/* ─── Actions ───────────────────────────────────────────────────────────── */
.cf-actions { margin-top: 22px; }
.cf-next,
.cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-dark); /* sky-700 — AA with white text */
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s, opacity .2s;
  box-shadow: 0 1px 3px rgba(3, 105, 161, .45), 0 4px 16px rgba(3, 105, 161, .26);
}
.cf-next:hover, .cf-submit:hover { background: #075985; transform: translateY(-1px); }
.cf-next:active, .cf-submit:active { transform: translateY(0); }
.cf-next:focus-visible, .cf-submit:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 3px; }
.cf-next:disabled {
  background: var(--border-2);
  color: var(--white);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.cf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 14px 0 0;
  padding: 10px 4px;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .18s;
}
.cf-back:hover { color: var(--accent-dark); }
.cf-back:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 2px; border-radius: 6px; }
.cf-hint { margin: 12px 0 0; font-size: .75rem; color: var(--text-3); }

.cf-notice { margin: 0 0 14px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.cf-notice a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.cf-howitworks { margin: 0 0 12px; font-size: .8125rem; line-height: 1.6; color: var(--text-3); }

.cf-error {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: .8125rem;
  line-height: 1.55;
  color: #991b1b;
}
.cf-error[hidden] { display: none; }
.cf-error svg { flex-shrink: 0; margin-top: 1px; }

/* ─── Confirmation panel ────────────────────────────────────────────────── */
.cf-done[hidden] { display: none; }
.cf-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: rgba(16, 185, 129, .12);
}
.cf-done h2 {
  font-family: var(--font-heading);
  font-size: clamp(21px, 3.2vw, 27px);
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 12px;
}
.cf-done h2:focus { outline: none; }
.cf-done h2:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 4px; border-radius: 4px; }
.cf-done p { font-size: .9375rem; line-height: 1.65; color: var(--text-2); margin: 0 0 12px; }
.cf-done .cf-done-next { color: var(--muted); font-size: .875rem; }

.cf-fallback {
  margin-top: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cf-fallback p { margin: 0 0 10px; font-size: .8125rem; color: var(--text-2); }
.cf-fallback-text {
  margin: 0 0 12px;
  padding: 12px;
  /* Tall enough that an ordinary enquiry is fully visible at 390px; scrolls
     rather than growing without limit when someone pastes an essay. */
  max-height: 300px;
  overflow: auto;
  scrollbar-gutter: stable;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.cf-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.cf-copy:hover { background: var(--bg); border-color: var(--muted); }
.cf-copy:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 3px; }
.cf-copy[data-state="done"] { color: #047857; border-color: rgba(16, 185, 129, .55); }

/* ─── No-JS fallback ────────────────────────────────────────────────────── */
/* Hidden by default; the <noscript><style> in <head> reveals it AND hides the
   flow, so nobody is ever handed a wizard that cannot run. It reprints the
   questions we would have asked so the visitor can still answer them. */
.contact-noscript { display: none; }
.contact-noscript-inner {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-2);
}
.contact-noscript-inner a { color: var(--accent-dark); font-weight: 700; }
.contact-noscript-inner ul { margin: 10px 0 0; padding-left: 20px; }
.contact-noscript-inner li { margin-bottom: 5px; font-size: .875rem; }

/* ─── Responsive ────────────────────────────────────────────────────────── */
/* 930px is the site's own collapse point (.hero-inner in styles.css) — the
   nav switches to the burger at exactly the same width. */
@media (max-width: 930px) {
  .contact-section { padding: 100px 24px 72px; }
  .contact-inner { grid-template-columns: 1fr; gap: 0; }
  .contact-copy    { grid-column: 1; grid-row: 1; margin-bottom: 28px; }
  .contact-flow    { grid-column: 1; grid-row: 2; }
  .contact-support { grid-column: 1; grid-row: 3; margin-top: 32px; }
}
@media (max-width: 380px) {
  .contact-section { padding: 96px 16px 64px; }
  .cf-card { padding: 20px 16px; }
  .cf-chip { padding: 11px 14px; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-step { animation: none; }
  .cf-progress-fill { transition: none; }
  .cf-next, .cf-submit, .cf-copy, .cf-tile, .cf-chip, .cf-input, .cf-textarea { transition: none; }
  .cf-next:hover, .cf-submit:hover { transform: none; }
}
