/*
 * DishyReferrals.com — referral card result-state enhancement
 * Load this AFTER the site's existing styles.css.
 */

/* Result state: remove the introductory copy so the useful result moves into
   the same viewport area previously occupied by the CTA. */
.primary-card.referral-result-active .referral-card-intro {
  display: none !important;
}

.primary-card.referral-result-active #result {
  margin-top: 0 !important;
  width: 100%;
}

/* Make the existing result label read more like the card's active heading. */
.primary-card.referral-result-active #result .label {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.7rem;
}

.primary-card.referral-result-active #referralLink {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Put the primary destination ahead of Copy even if the original DOM order
   is Copy -> Open. */
.primary-card.referral-result-active #result .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.primary-card.referral-result-active #open {
  order: 1;
}

.primary-card.referral-result-active #copy {
  order: 2;
}

/* The original CTA becomes a small, tertiary "another link" action. */
.primary-card.referral-result-active .referral-result-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.primary-card.referral-result-active .referral-again {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 0 !important;
  padding: 0 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  width: auto !important;
}

.primary-card.referral-result-active .referral-again:hover,
.primary-card.referral-result-active .referral-again:focus-visible {
  opacity: 0.72;
}

.primary-card.referral-result-active .referral-result-footer #getStatus {
  margin: 0 !important;
}

/* Phone/tablet behavior: the device already has the URL, so the QR code adds
   height without adding value. The useful actions get the entire card width. */
@media (max-width: 899px) {
  .primary-card.referral-result-active .qr-wrap,
  .primary-card.referral-result-active #qrcode {
    display: none !important;
  }

  .primary-card.referral-result-active #result,
  .primary-card.referral-result-active .result {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .primary-card.referral-result-active #result .actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .primary-card.referral-result-active #result .actions > * {
    box-sizing: border-box;
    width: 100% !important;
  }

  .primary-card.referral-result-active .referral-result-footer {
    align-items: center;
    text-align: center;
    width: 100%;
  }
}

/* Desktop behavior: retain the site's existing QR + link layout,
   while vertically centering the QR code with the referral details. */
@media (min-width: 900px) {
  .primary-card.referral-result-active #result,
  .primary-card.referral-result-active .result {
    align-items: center !important;
  }

  .primary-card.referral-result-active .qr-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }

  .primary-card.referral-result-active #qrcode {
    margin: 0 auto;
  }
}