/**
 * Contact / support form page
 */

.mb-support-page .mb-page-content {
  max-width: 960px;
  margin: 0 auto;
}

.mb-card {
  padding: var(--mb-s5);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-card);
  background: rgba(255, 255, 255, 0.03);
}

.mb-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mb-radius-input);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mb-white);
  font-family: var(--mb-font-body);
  font-size: var(--mb-body-16);
  box-shadow: none;
}

.mb-input:focus {
  outline: none;
  border-color: rgba(255, 0, 187, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 0, 187, 0.15);
}

.mb-alert {
  padding: var(--mb-s4) var(--mb-s5);
  border-radius: var(--mb-radius-input);
  font-size: var(--mb-body-14);
  line-height: 1.5;
}

.mb-alert--success {
  border: 1px solid rgba(45, 212, 168, 0.35);
  background: rgba(45, 212, 168, 0.12);
  color: var(--mb-white);
}

.mb-alert--error {
  border: 1px solid rgba(255, 107, 122, 0.45);
  background: rgba(255, 107, 122, 0.12);
  color: var(--mb-white);
}

.mb-contact-layout {
  display: grid;
  gap: var(--mb-s6);
}

.mb-contact-layout__intro {
  display: flex;
  flex-direction: column;
  gap: var(--mb-s5);
}

.mb-contact-intro p {
  margin: 0 0 var(--mb-s3);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--mb-body-16);
  line-height: 1.65;
}

.mb-contact-intro p:last-child {
  margin-bottom: 0;
}

.mb-contact-details__title {
  margin: 0 0 var(--mb-s4);
  color: var(--mb-white);
  font-family: var(--mb-font-display, var(--mb-font-body));
  font-size: var(--mb-heading-20, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mb-contact-details__item {
  margin: 0 0 var(--mb-s4);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--mb-body-16);
  line-height: 1.5;
}

.mb-contact-details__label {
  display: block;
  margin-bottom: var(--mb-s1);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--mb-body-14);
  font-weight: 600;
}

.mb-contact-details__item a {
  color: var(--mb-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mb-contact-details__item a:hover {
  color: #ff00bb;
}

.mb-contact-details__social-lead {
  margin: 0 0 var(--mb-s3);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--mb-body-14);
  line-height: 1.5;
}

.mb-contact-details__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-s3);
}

.mb-contact-details__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--mb-s4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  color: var(--mb-white);
  font-size: var(--mb-body-14);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mb-contact-details__social-link:hover {
  border-color: rgba(255, 0, 187, 0.45);
  background: rgba(255, 0, 187, 0.08);
}

.mb-support-form {
  display: flex;
  flex-direction: column;
  gap: var(--mb-s4);
}

.mb-support-form__field {
  margin: 0;
}

.mb-support-form__field label {
  display: block;
  margin-bottom: var(--mb-s2);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--mb-body-14);
  font-weight: 600;
}

.mb-support-form__textarea {
  min-height: 160px;
  resize: vertical;
}

.mb-support-form__actions {
  margin: var(--mb-s2) 0 0;
  padding-top: var(--mb-s4);
  border-top: 1px solid var(--mb-border);
}

.mb-support-form__actions .mb-btn {
  width: 100%;
  justify-content: center;
}

.mb-support-page .mb-alert {
  margin: 0;
}

@media (min-width: 768px) {
  .mb-contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--mb-s7, 48px);
  }
}