/*
File: assets/jta-referral.css
Creator: Mark Kiessling
Created: July 26th, 2026
Purpose: The "send this to somebody" control in the bottom right corner, and the thank you
         card that appears after it. Colours and radii come from the tokens already in
         jta.css, so both themes work with no extra rules.
Related files: assets/jta-referral.js, referral.aspx
Revision history:
  July 26th, 2026 - Created for the send-to-a-friend link.
*/
.refLaunch{position:fixed;right:18px;bottom:18px;z-index:50;display:inline-flex;align-items:center;
  gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--gold);border-radius:24px;
  background:var(--panel);color:var(--gold);font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.4px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.refLaunch:hover{background:var(--gold);color:#0a1220}
@media print{.refLaunch{display:none}}

.refPanel{position:fixed;right:18px;bottom:74px;z-index:51;width:min(340px,calc(100% - 36px));
  border:1px solid var(--gold);border-radius:10px;background:var(--panel);padding:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);display:none}
.refPanel.open{display:block}
.refPanel h3{font-size:16px;font-weight:700;margin-bottom:4px}
.refPanel p.refLead{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:13px}
.refPanel label{display:block;color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px}
.refPanel input{width:100%;min-height:44px;padding:10px 12px;border-radius:6px;margin-bottom:11px;
  border:1px solid color-mix(in srgb,var(--gold) 62%,transparent);
  background:var(--bg2);color:var(--ink);font-family:inherit;font-size:14px}
.refPanel input:focus{outline:none;border-color:var(--gold);border-width:2px;padding:9px 11px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 26%,transparent)}
.refPanel .button{width:100%}
.refPanel .refNote{color:var(--muted);font-size:11px;line-height:1.6;margin-top:11px}
.refClose{position:absolute;top:9px;right:11px;border:0;background:transparent;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;padding:4px 6px}
.refClose:hover{color:var(--gold)}
.refMsg{margin-top:11px;padding:9px 11px;border-radius:6px;font-size:12px;line-height:1.6;
  border:1px solid var(--danger);color:var(--danger);
  background:color-mix(in srgb,var(--danger) 12%,transparent);display:none}
.refMsg.show{display:block}

/* Thank you card - clicking anywhere at all dismisses it. */
.refThanks{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,#000 66%,transparent);backdrop-filter:blur(3px);cursor:pointer}
.refThanks.open{display:flex}
.refThanksCard{max-width:380px;margin:20px;padding:30px 32px;text-align:center;border-radius:12px;
  border:1px solid var(--gold);background:var(--panel);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.refThanksCard .eyebrow{margin-bottom:10px}
.refThanksCard h3{font-size:22px;font-weight:700;margin-bottom:10px}
.refThanksCard p{color:var(--muted);font-size:13px;line-height:1.7}
.refThanksCard .refDismiss{margin-top:16px;color:var(--gold);font-size:12px;font-weight:700;
  letter-spacing:.4px}

/* Sponsor line in the footer. */
.footerPartner{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 0 0 0;color:var(--muted);font-size:11.5px;letter-spacing:.3px;text-align:center;
  flex-wrap:wrap}
.footerPartner a{color:var(--gold);text-decoration:none;font-weight:700}
.footerPartner a:hover{text-decoration:underline}
.footerPartner svg{flex:0 0 auto}