/* Contact page — geometry from millennialbet-contact-us (1440) / -mobile (390) */

.contact-hero { background: var(--ink); }
.contact-hero__inner { display: flex; align-items: flex-start; gap: 64px; min-height: 465px; padding-block: 80px; }
.contact-hero__left { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.contact-hero__title {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 68px;
  letter-spacing: -.02em;
  color: var(--white);
}
.contact-hero__lede { font-size: 18px; line-height: 27px; color: var(--slate); }

.quick-help {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 440px;
  flex: none;
  padding: 32px;
  background: var(--surface);
  border-radius: var(--r-20);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.quick-help__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 1px;
  color: var(--white);
}
.quick-help__list { display: flex; flex-direction: column; gap: 16px; }
.quick-help__list li { padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--line-dark); }
.quick-help__list li:last-child { padding-bottom: 0; box-shadow: none; }
.quick-help__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 20px;
  font-size: 15px;
  color: var(--white);
  transition: color var(--t);
}
.quick-help__list a:hover { color: var(--red); }
.quick-help__sub { display: block; font-size: 13px; color: var(--slate); }
.quick-help__go { flex: none; font-size: 13px; font-weight: 700; color: var(--red-text); }

/* ============ form ============ */
.contact-main__inner { display: flex; align-items: flex-start; gap: 48px; padding-block: 96px; }
.contact-form-col { display: flex; flex-direction: column; gap: 32px; flex: 1; min-width: 0; }
.contact-form__head { display: flex; flex-direction: column; gap: 12px; }
.contact-form__kicker {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 15.23px;
  letter-spacing: 1.5px;
  color: var(--red-text);
}
.contact-form__title { font-family: var(--font-display); font-size: 56px; line-height: 58.8px; color: var(--ink-soft); }
.contact-form__lede { font-size: 16px; line-height: 24px; color: var(--grey); }
.contact-form__topics { font-size: 13px; font-weight: 700; line-height: 17px; color: var(--red-text); }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form textarea { min-height: 168px; }
.contact-form .field__label {
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: 0;
  color: var(--grey);
}
.contact-form .field__control {
  min-height: 54px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-light);
  border-radius: var(--r-8);
}
.contact-form .field__control:focus-within { box-shadow: inset 0 0 0 1px var(--red); border-color: transparent; }
.contact-form .field__control--area { min-height: 200px; align-items: stretch; padding: 16px; }
.contact-form .field__control input,
.contact-form .field__control select,
.contact-form .field__control textarea {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  resize: vertical;
}
.contact-form .field__control input::placeholder,
.contact-form .field__control textarea::placeholder { color: var(--grey-light); }
.contact-form .field__control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5'/%3E%3C/svg%3E");
}
.form-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 63px;
  padding: 16px;
  background: #fff1f2;
  border-radius: var(--r-8);
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .2);
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-soft);
}
.form-notice__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-weight: 800;
}
.contact-form__done {
  padding: 16px;
  border-radius: var(--r-8);
  background: rgba(16, 185, 129, .1);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35);
  font-size: 14px;
  line-height: 21px;
  color: #0f7a58;
}

/* ============ details sidebar ============ */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 400px;
  flex: none;
  padding: 32px;
  background: var(--white);
  border-radius: var(--r-20);
  box-shadow: inset 0 0 0 1px var(--line-light);
}
.contact-details__head { display: flex; flex-direction: column; gap: 8px; }
.contact-details__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; color: var(--ink-soft); }
.contact-details__sub { font-family: var(--font-display); font-size: 18px; line-height: 20px; color: var(--ink-soft); }
.contact-details__block { display: flex; flex-direction: column; gap: 12px; }
.contact-details__body { font-size: 14px; line-height: 21px; color: var(--grey); }
.contact-details .rule { background: var(--line-light); }
.contact-details__list { display: flex; flex-direction: column; gap: 16px; }
.contact-details__list dt {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 1px;
  color: var(--red-text);
  margin-bottom: 4px;
}
.contact-details__list dd { font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.contact-details__list a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.contact-support { display: flex; flex-direction: column; gap: 8px; }
.contact-support__title {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 1px;
  color: var(--grey);
}
.contact-support__name { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.contact-support__line { font-family: var(--font-display); font-size: 24px; line-height: 26px; color: var(--red); }
.contact-support__note { font-size: 13px; line-height: 17px; color: var(--grey); }
.contact-support__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.contact-support__actions .btn--ghost { color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-light); }
.contact-support__actions .btn--ghost:hover { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

@media (max-width: 1199px) {
  .contact-hero__inner { flex-direction: column; gap: 24px; min-height: 0; padding-block: 32px; }
  .contact-hero__title { font-size: 40px; line-height: 42px; }
  .contact-hero__lede { font-size: 15px; line-height: 24px; }
  .quick-help { width: auto; padding: 24px; }

  .contact-main__inner { flex-direction: column; gap: 24px; padding-block: 32px; }
  .contact-form__title { font-size: 32px; line-height: 35px; }
  .contact-details { width: auto; padding: 24px; }
}