/* ============================================================
   VIPSCLUB Portal 2026 — Referral Submit Form Module
   Figma: Desktop 339:7856 | Mobile 380:3960
   ============================================================ */

/* ── Outer wrapper ── */
.referral-submit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Heading (above card) ── */
.referral-submit-form__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--vips-dark);
  margin: 0;
}

/* ── Card container ── */
.referral-submit-form__card {
  background: var(--vips-bg-card);
  border: 1px solid var(--vips-border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* ── Optional description ── */
.referral-submit-form__description {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--vips-text-secondary);
  margin-bottom: 20px;
}

.referral-submit-form__description p {
  margin: 0;
}

/* ── Editor placeholder ── */
.referral-submit-form__placeholder {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--vips-text-secondary);
  background: var(--vips-bg-input);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
}

.referral-submit-form__placeholder p {
  margin: 0;
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {

  .referral-submit-form--hide-mobile {
    display: none;
  }

  .referral-submit-form__card {
    border-radius: 10px;
    padding: 20px;
  }

}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {}

/* ── Per-instance style overrides ── */
{% if module.style_overrides.background_color.color %}
.referral-submit-form {
  background-color: ;
}
{% endif %}

{% if module.style_overrides.padding_top %}
.referral-submit-form {
  padding-top: px;
}
{% endif %}

{% if module.style_overrides.padding_bottom %}
.referral-submit-form {
  padding-bottom: px;
}
{% endif %}