/* Shop referrals on the Start page (referral-invite.js): "You've been
   invited by {shop}: you both get a month free." Hidden unless the app
   confirms the code, which it only does while referrals are switched on. */

.referral-invite {
  display: grid;
  gap: 0.2rem;
  max-width: 34rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--rl-color-orange-500, #F4AB4B) 62%, transparent);
  border-left-width: 0.32rem;
  border-radius: var(--rl-radius-md, 0.875rem);
  background: color-mix(in srgb, var(--rl-color-orange-500, #F4AB4B) 12%, white);
  color: var(--rl-text-strong, #0F2D32);
}

.referral-invite[hidden] {
  display: none;
}

.referral-invite__line {
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
}

.referral-invite__detail {
  margin: 0;
  color: var(--rl-text-muted, #4C5A5F);
  font-size: 0.94rem;
  line-height: 1.5;
}