/* =============================================================
   pages/contact.css — Contact page (Figma: 675-3501 / 679-3804)
   ============================================================= */

/* ── Page wrapper ────────────────────────────────────────────*/
.contact-page {
  position:        relative;
  min-height:      calc(100vh - var(--topbar-h));
  padding:         74px 118px 60px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             60px;
  /* Figma background: dark purple radial gradient */
  background:
    radial-gradient(ellipse 65% 55% at 92% 5%, rgba(42, 0, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 90% 80% at 55% 45%, rgba(51, 6, 47, 1) 0%, rgba(13, 1, 12, 1) 55%, #000 100%);
}

/* ── Page header ─────────────────────────────────────────────*/
.contact-page__header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  text-align:     center;
  max-width:      526px;
}

.contact-page__title {
  font-family:   var(--font-headings);
  font-size:     var(--fs-40);
  font-weight:   600;
  line-height:   48px;
  color:         var(--white);
}

.contact-page__sub {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

/* ── Two-column content ──────────────────────────────────────*/
.contact-page__content {
  display:     flex;
  gap:         48px;
  align-items: flex-start;
  justify-content: center;
  width:       100%;
  max-width:   960px;
}

/* ── Left: direct contact options ───────────────────────────*/
.contact-page__direct {
  display:        flex;
  flex-direction: column;
  gap:            48px;
  flex-shrink:    0;
}

/* Each contact method group */
.contact-group {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.contact-group__label {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.contact-group__desc {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

.contact-group__number {
  font-family: var(--font-mono);
  font-size:   var(--fs-16);
  font-weight: 400;
  line-height: 24px;
  color:       #c97fff;
  /* mono tokens: 16px <= 20px */
  letter-spacing: var(--mono-ls-lte20);
}

/* Glass action buttons */
.contact-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             16px;
  height:          48px;
  width:           282px;
  padding:         0 12px;
  background:      rgba(255, 254, 254, 0.08);
  border:          1px solid rgba(255, 255, 255, 0.64);
  border-radius:   8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family:     var(--font-text);
  font-size:       var(--fs-16);
  font-weight:     600;
  line-height:     24px;
  color:           var(--white);
  text-decoration: none;
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s;
  flex-shrink:     0;
  overflow:        hidden;
}
.contact-btn:hover {
  background:    rgba(255, 254, 254, 0.14);
  border-color:  rgba(255, 255, 255, 0.9);
}
.contact-btn svg {
  flex-shrink: 0;
  opacity:     0.9;
}

/* ── Vertical divider ────────────────────────────────────────*/
.contact-page__divider {
  align-self:  stretch;
  width:       1px;
  background:  rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Right: form column ──────────────────────────────────────*/
.contact-page__form-col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  flex:           1;
  min-width:      0;
  max-width:      400px;
}

.contact-page__form-title {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color:       #eaeaea;
}

/* ── Form fields ─────────────────────────────────────────────*/
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.form-field label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-14);
  font-weight:    400;
  line-height:    20px;
  color:          var(--purple-900);   /* #e8c6fd */
  letter-spacing: var(--mono-ls-lte20);
}

.form-field__optional {
  font-family: var(--font-mono);
  font-size:   var(--fs-14);
  color:       rgba(232, 198, 253, 0.55);
  font-weight: 400;
}

.form-field__required {
  color: #c97fff;
}

.form-field input,
.form-field textarea {
  background:    rgba(170, 172, 241, 0.07);
  border:        1px solid rgba(170, 172, 241, 0.3);
  border-radius: 8px;
  padding:       12px;
  height:        48px;
  font-family:   var(--font-text);
  font-size:     var(--fs-14);
  font-weight:   400;
  line-height:   20px;
  color:         var(--white);
  outline:       none;
  transition:    border-color 0.2s, background 0.2s;
  width:         100%;
}

.form-field textarea {
  height:     120px;
  resize:     vertical;
  min-height: 80px;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(170, 172, 241, 0.7);
  background:   rgba(170, 172, 241, 0.11);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #8e8394;
}

/* Status messages */
.contact-form__status {
  font-family:  var(--font-text);
  font-size:    var(--fs-14);
  padding:      10px 12px;
  border-radius: 8px;
  display:      none;
  line-height:  20px;
}
.contact-form__status.is-success {
  display:    block;
  background: rgba(0, 200, 100, 0.1);
  border:     1px solid rgba(0, 200, 100, 0.3);
  color:      #6effa5;
}
.contact-form__status.is-error {
  display:    block;
  background: rgba(216, 0, 60, 0.1);
  border:     1px solid rgba(216, 0, 60, 0.3);
  color:      #ff7a9a;
}

/* Submit button — same glass style */
.contact-form__submit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  height:          48px;
  width:           100%;
  padding:         0 12px;
  background:      rgba(255, 254, 254, 0.08);
  border:          1px solid rgba(255, 255, 255, 0.64);
  border-radius:   8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family:     var(--font-text);
  font-size:       var(--fs-16);
  font-weight:     600;
  line-height:     24px;
  color:           var(--white);
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s, opacity 0.2s;
  overflow:        hidden;
}
.contact-form__submit:hover    { background: rgba(255, 254, 254, 0.14); border-color: rgba(255, 255, 255, 0.9); }
.contact-form__submit:disabled { opacity: 0.4; pointer-events: none; }

/* ── Social icons ────────────────────────────────────────────*/
.contact-page__social {
  display:     flex;
  gap:         16px;
  align-items: center;
  align-self:  flex-end;
}

.contact-social-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   6px;
  background:      rgba(255,255,255,0.08);
  border:          1px solid rgba(255,255,255,0.18);
  font-size:       18px;
  color:           #E8C6FD;
  transition:      opacity 0.2s, transform 0.2s;
  text-decoration: none;
}
.contact-social-btn:hover {
  opacity:   0.8;
  transform: translateY(-2px);
}

/* ── Responsive: 900px ───────────────────────────────────────*/
@media (max-width: 900px) {
  .contact-page {
    padding:     60px 48px 48px;
    gap:         48px;
  }
  .contact-page__content {
    gap: 32px;
  }
  .contact-page__form-col {
    max-width: none;
  }
}

/* ── Responsive: 768px — stack to single column ─────────────*/
@media (max-width: 768px) {
  .contact-page {
    padding:    48px 32px 48px;
    align-items: flex-start;
    gap:         40px;
  }
  .contact-page__header {
    align-items: flex-start;
    text-align:  left;
    max-width:   none;
  }
  .contact-page__sub-br { display: none; }
  .contact-page__title {
    font-size:   32px;
    line-height: 40px;
  }
  .contact-page__content {
    flex-direction: column;
    gap:            0;
    width:          100%;
  }
  /* Horizontal divider on mobile */
  .contact-page__divider {
    width:        100%;
    height:       1px;
    align-self:   auto;
    margin:       32px 0;
  }
  .contact-page__form-col {
    width: 100%;
  }
  .contact-page__form-title::before {
    content: 'Or ';
  }
  .contact-btn {
    width: 100%;
  }
  .contact-page__social {
    align-self: flex-start;
  }
}

/* ── Responsive: 640px ───────────────────────────────────────*/
@media (max-width: 640px) {
  .contact-page {
    padding: 28px 20px 48px;
    gap:     32px;
  }
  .contact-page__direct {
    gap: 32px;
    width: 100%;
  }
}