/* ============================================================
   CONTACT — "Есть вопросы?" callback form block
   Figma node 4:17847 (Advantages block)
   ============================================================ */
.contact {
  display: flex;
  justify-content: center;
}

/* tinted rounded panel inside the container */
.contact__panel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-16);
  overflow: hidden;            /* clips the oversized 3D arrow */
}

/* ---- left column: heading + subtext + illustration ---- */
.contact__intro {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact__title {
  margin: 0;
  font: 500 24px/1.1 'Geologica', sans-serif;
  letter-spacing: -0.18px;
  color: var(--bg-primary);
}
.contact__subtext {
  margin: 0;
  max-width: 280px;
  font: 400 18px/1.21 'Geologica', sans-serif;
  letter-spacing: -0.18px;
  color: var(--text-secondary);
}

/* 3D arrow / fan illustration — square PNG sized by height so the
   centred arrow fills the panel vertically and is clipped top/bottom
   (mirrors Figma's oversized placement) */
.contact__illustration {
  position: absolute;
  top: 50%;
  left: clamp(150px, 17vw, 230px);
  width: auto;
  height: clamp(260px, 24vw, 340px);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

/* ---- right column: form ---- */
.contact__form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* reserve space on the left so the form clears the illustration */
  padding-left: clamp(0px, 14vw, 190px);
}
.contact__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact__field {
  display: block;
  width: 100%;
}
.contact__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(17, 30, 63, 0.04);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  font: 400 14px/1.15 'Geologica', sans-serif;
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s ease;
}
.contact__input::placeholder { color: var(--text-tertiary); }
.contact__input:focus { border-color: var(--border-accent); }

.contact__submit {
  width: 100%;
  padding: 12px 20px;
  background: var(--teal);
  color: var(--text-primary-inverse);
  border-radius: var(--radius-pill);
  font: 400 16px/1.25 'Geologica', sans-serif;
  text-align: center;
  transition: filter .15s ease;
}
.contact__submit:hover { filter: brightness(1.05); }

/* ---- consent toggle (switch styled checkbox) ---- */
.contact__consent {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.contact__consent-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.contact__switch {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  transition: background .15s ease;
}
.contact__switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-s);
  transition: transform .15s ease, background .15s ease;
}
.contact__consent-input:checked + .contact__switch {
  background: var(--bg-accent);
}
.contact__consent-input:checked + .contact__switch::before {
  transform: translateX(16px);
  background: var(--bg-primary-bg);
}
.contact__consent-input:focus-visible + .contact__switch {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}
.contact__consent-text {
  font: 400 14px/1.15 'Geologica', sans-serif;
  color: var(--text-secondary);
}

.contact__visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .contact__panel { gap: 20px; padding: 32px; }
  .contact__form { padding-left: clamp(0px, 10vw, 120px); }
}

/* stack to single column */
@media (max-width: 768px) {
  .contact__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px;
  }
  .contact__intro { align-self: auto; }
  .contact__subtext { max-width: none; }
  /* illustration becomes a centred decorative element above the form */
  .contact__illustration {
    position: static;
    transform: none;
    display: block;
    width: 200px;
    max-width: 55%;
    height: auto;
    margin: 4px auto 0;
  }
  .contact__form { padding-left: 0; }
}

@media (max-width: 480px) {
  .contact__panel { padding: 20px; }
  .contact__title { font-size: 20px; }
  .contact__subtext { font-size: 16px; }
  .contact__illustration { width: 170px; }
}