/* ==========================================
   HighPass Contact page — matches the store's
   gradient-hero + card design language.
   ========================================== */

.hp-contact-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding: 56px 0 80px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.hp-contact-form-card {
  background: #ffffff;
  border: 1px solid #e5e9f2;
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 12px 30px -18px rgba(18, 0, 40, 0.2);
}

.hp-contact-alert {
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 22px;
  font-weight: 500;
}

.hp-contact-alert--success { background: #e8f8ef; color: #146339; border: 1px solid #c7ecd7; }
.hp-contact-alert--error { background: #fdecec; color: #a3262b; border: 1px solid #f5cccc; }

.hp-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.hp-contact-field { margin-bottom: 22px; }

.hp-contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}

.hp-contact-field label span { font-weight: 400; color: #94a3b8; }

.hp-contact-field input {
  width: 100%;
  padding: 12px 5px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-contact-field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-contact-field input:focus, .hp-contact-field textarea:focus {
  outline: none;
  border-color: #0096d9;
  box-shadow: 0 0 0 3px rgba(0, 150, 217, 0.12);
}

.hp-contact-field textarea { resize: vertical; }

.hp-contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.hp-contact-submit { width: 100%; text-align: center; margin-top: 4px; }

.hp-contact-info { display: flex; flex-direction: column; gap: 20px; }

.hp-contact-info__card {
  background: #ffffff;
  border: 1px solid #e5e9f2;
  border-radius: 16px;
  padding: 26px;
}

.hp-contact-info__card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: #0f172a; }

.hp-contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hp-contact-info__list li { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.hp-contact-info__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.hp-contact-info__list a { color: #0096d9; text-decoration: none; font-weight: 600; }
.hp-contact-info__list a:hover { text-decoration: underline; }
.hp-contact-info__list span:not(.hp-contact-info__label) { color: #334155; }

.hp-contact-info__card--dark {
  background: linear-gradient(160deg, #120028 0%, #1a1050 55%, #0a3d5c 100%);
  border: none;
  color: #f1f5f9;
}

.hp-contact-info__card--dark h3 { color: #fff; }
.hp-contact-info__card--dark p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #cbd5e1; }

@media (max-width: 860px) {
  .hp-contact-wrap { grid-template-columns: 1fr; }
  .hp-contact-form__row { grid-template-columns: 1fr; }
  .hp-contact-form-card { padding: 26px 22px; }
}