/* =============================================================
   CONTACT PAGE - shared across EBL + OWB + Val
   /contact-us/

   Styles the [boosting_contact_form] shortcode (boosting/inc/shortcodes.php).
   Lives in the EBL theme and is enqueued by all three sites, each adding the
   same `ebl-contact-page` body class via its `body_class` filter:

     EBL  ebl_is_contact_page()  in eloboostleague/functions.php
     OWB  owb_is_contact_page()  in owboost/functions.php
     Val  vb_is_contact_page()   in valboosting/functions.php

   Every selector is scoped under body.ebl-contact-page. Palette and type
   follow refund-policy-page.css so the support pages read as one set.
   ============================================================= */

body.ebl-contact-page {
  --ct-bg-soft: #f6fafd;
  --ct-ink: #0c1a2b;
  --ct-ink-soft: #4a5a6e;
  --ct-ink-muted: #8a98a8;
  --ct-line: #e4ecf3;
  --ct-blue: #38a6e8;
  --ct-blue-deep: #1d7ab8;
  --ct-blue-tint: #eaf6fd;
  --ct-orange: #ff7a2a;
  --ct-orange-deep: #d65a10;
  --ct-green: #22b358;
  --ct-red: #d93b3b;
  --ct-shadow: 0 1px 2px rgba(15, 60, 100, 0.04), 0 8px 24px rgba(15, 60, 100, 0.06);
  --ct-shadow-orange: 0 8px 30px -8px rgba(255, 122, 42, 0.45);
  --ct-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.ebl-contact-page .bt-contact,
body.ebl-contact-page .bt-contact * { box-sizing: border-box; }

body.ebl-contact-page .bt-contact {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  font-family: Roboto, system-ui, -apple-system, sans-serif;
  color: #252525;
}

body.ebl-contact-page .bt-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---------- Channel cards ---------- */
body.ebl-contact-page .bt-contact__channels {
  display: grid;
  gap: 16px;
}
body.ebl-contact-page .bt-contact__card {
  background: #fff;
  border: 1px solid var(--ct-line);
  border-radius: 12px;
  padding: 22px 22px 24px;
  box-shadow: var(--ct-shadow);
}
body.ebl-contact-page .bt-contact__card--chat {
  background: linear-gradient(160deg, #fff 0%, var(--ct-blue-tint) 100%);
  border-color: #cfe7f6;
}
body.ebl-contact-page .bt-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: 'avenirnextcyr-medium', 'AvenirNextCyr-Medium', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ct-ink-muted);
}
body.ebl-contact-page .bt-contact__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ct-green);
  box-shadow: 0 0 0 0 rgba(34, 179, 88, 0.5);
  animation: bt-contact-pulse 2s infinite;
}
@keyframes bt-contact-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 179, 88, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34, 179, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 179, 88, 0); }
}
body.ebl-contact-page .bt-contact__card-title,
body.ebl-contact-page .bt-contact__panel-title {
  font-family: 'League', 'avenirnextcyr-bold', 'AvenirNextCyr-Bold', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ct-ink) !important;
  margin: 0 0 8px !important;
}
body.ebl-contact-page .bt-contact__card-title { font-size: 22px !important; }
body.ebl-contact-page .bt-contact__panel-title { font-size: clamp(24px, 3vw, 32px) !important; }
body.ebl-contact-page .bt-contact__card p:not(.bt-contact__eyebrow),
body.ebl-contact-page .bt-contact__panel-sub,
body.ebl-contact-page .bt-contact__done p {
  margin: 0 0 16px;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ct-ink-soft);
}

body.ebl-contact-page .bt-contact__btn,
body.ebl-contact-page .bt-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--ct-orange);
  color: #fff !important;
  font-family: 'avenirnextcyr-medium', 'AvenirNextCyr-Medium', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: var(--ct-shadow-orange);
  transition: transform 200ms var(--ct-ease), background 200ms ease;
}
body.ebl-contact-page .bt-contact__btn:hover,
body.ebl-contact-page .bt-contact__submit:hover { background: var(--ct-orange-deep); transform: translateY(-1px); }
body.ebl-contact-page .bt-contact__btn:focus-visible,
body.ebl-contact-page .bt-contact__submit:focus-visible,
body.ebl-contact-page .bt-contact__mail:focus-visible {
  outline: 2px solid var(--ct-blue-deep);
  outline-offset: 3px;
}
body.ebl-contact-page .bt-contact__mail {
  font-weight: 500;
  font-size: 15px;
  color: var(--ct-blue-deep) !important;
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid rgba(29, 122, 184, 0.3);
}
body.ebl-contact-page .bt-contact__mail:hover { border-bottom-color: var(--ct-blue-deep); }

/* ---------- Form panel ---------- */
body.ebl-contact-page .bt-contact__panel {
  background: #fff;
  border: 1px solid var(--ct-line);
  border-radius: 12px;
  padding: 30px 30px 32px;
  box-shadow: var(--ct-shadow);
  scroll-margin-top: 110px;
}
body.ebl-contact-page .bt-contact__form {
  display: grid;
  gap: 16px;
}
body.ebl-contact-page .bt-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.ebl-contact-page .bt-contact__field {
  display: grid;
  gap: 6px;
  margin: 0;
}
body.ebl-contact-page .bt-contact__field > span {
  font-family: 'avenirnextcyr-medium', 'AvenirNextCyr-Medium', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ct-ink-soft);
}
body.ebl-contact-page .bt-contact__field em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ct-ink-muted);
}
body.ebl-contact-page .bt-contact__field input,
body.ebl-contact-page .bt-contact__field select,
body.ebl-contact-page .bt-contact__field textarea {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d3dee8;
  border-radius: 8px;
  background: var(--ct-bg-soft);
  color: var(--ct-ink);
  font: 400 15px/1.4 Roboto, system-ui, -apple-system, sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.ebl-contact-page .bt-contact__field textarea { min-height: 150px; resize: vertical; }
body.ebl-contact-page .bt-contact__field input:focus,
body.ebl-contact-page .bt-contact__field select:focus,
body.ebl-contact-page .bt-contact__field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--ct-blue);
  box-shadow: 0 0 0 3px rgba(56, 166, 232, 0.18);
}
body.ebl-contact-page .bt-contact__submit { justify-self: start; min-width: 200px; }
body.ebl-contact-page .bt-contact__submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

body.ebl-contact-page .bt-contact__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.ebl-contact-page .bt-contact__error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(217, 59, 59, 0.3);
  background: #fdf0f0;
  color: var(--ct-red);
  font-size: 14px;
  line-height: 1.45;
}
body.ebl-contact-page .bt-contact__done {
  padding: 8px 0 0 52px;
  position: relative;
}
body.ebl-contact-page .bt-contact__done::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ct-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 18px no-repeat;
}

@media (max-width: 860px) {
  body.ebl-contact-page .bt-contact__grid { grid-template-columns: minmax(0, 1fr); }
  body.ebl-contact-page .bt-contact__channels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body.ebl-contact-page .bt-contact { padding: 32px 16px 56px; }
  body.ebl-contact-page .bt-contact__channels,
  body.ebl-contact-page .bt-contact__row { grid-template-columns: minmax(0, 1fr); }
  body.ebl-contact-page .bt-contact__panel { padding: 22px 18px 24px; }
  /* 16px stops iOS Safari zooming the page when a field gets focus. */
  body.ebl-contact-page .bt-contact__field input,
  body.ebl-contact-page .bt-contact__field select,
  body.ebl-contact-page .bt-contact__field textarea { font-size: 16px; }
  body.ebl-contact-page .bt-contact__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.ebl-contact-page .bt-contact__pulse { animation: none; }
  body.ebl-contact-page .bt-contact__btn,
  body.ebl-contact-page .bt-contact__submit { transition: none; }
}