/* Referral panel inside My Account, and the public explainer page.
   Deliberately matches the theme's navy/brand palette rather than inventing a
   second visual language inside the customer's own account. */

.tlt-ref-panel{--navy:#0b1a2d;--brand:#1b82f0;--ink:#334155;--muted:#64748b;--line:#e2e8f0}

/* SPECIFICITY MATTERS HERE, AND IT CAUGHT ME OUT.
   These panels sit inside .woocommerce-MyAccount-content, whose own paragraph
   colour beat a bare `.tlt-ref-hero p` — so the body text computed to
   rgb(51,65,85), dark slate on dark navy, about 1.6:1 against a 4.5:1 minimum.
   It looked washed out on screen and would have been unreadable for anyone
   with low vision. Measured with getComputedStyle rather than guessed from a
   screenshot. The parent selector below wins the cascade honestly, without
   reaching for !important. */
.tlt-ref-panel .tlt-ref-hero{background:linear-gradient(135deg,#0b1a2d,#14304f);color:#fff;border-radius:14px;padding:26px;margin-bottom:20px}
.tlt-ref-panel .tlt-ref-hero h2{color:#fff;margin:0 0 6px;font-size:23px;line-height:1.25}
.tlt-ref-panel .tlt-ref-hero p{color:#dbe4f0;margin:0 0 18px}
.tlt-ref-panel .tlt-ref-hero strong{color:#fff}
.tlt-ref-panel .tlt-ref-hero .tlt-ref-code{color:#dbe4f0}
.tlt-ref-panel .tlt-ref-hero a{color:#9ecbff}

/* 12px uppercase needs more than the minimum. */
.tlt-ref-panel .tlt-ref-linklabel{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#93c5fd;margin-bottom:6px;font-weight:700}
.tlt-ref-copy{display:flex;gap:8px;flex-wrap:wrap}
.tlt-ref-copy input{flex:1 1 280px;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px}
.tlt-ref-copybtn{flex:0 0 auto;padding:12px 22px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;font-size:15px}
.tlt-ref-copybtn:hover{filter:brightness(1.08)}
.tlt-ref-copybtn.is-done{background:#0b8459}
.tlt-ref-code{font-size:13.5px;margin:14px 0 0}
.tlt-ref-code code{background:rgba(255,255,255,.12);color:#fff;padding:3px 9px;border-radius:6px}

.tlt-ref-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tlt-ref-sharebtn{padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.tlt-ref-sharebtn:hover{background:rgba(255,255,255,.12);color:#fff}

.tlt-ref-tiles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.tlt-ref-tile{flex:1 1 180px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.tlt-ref-tile b{display:block;font-size:26px;color:var(--navy);line-height:1.1;margin-bottom:4px}
.tlt-ref-tile span{color:var(--muted);font-size:13px}

.tlt-ref-panel h3{color:var(--navy);margin:0 0 10px;font-size:18px}
.tlt-ref-table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:10px}
.tlt-ref-table th,.tlt-ref-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.tlt-ref-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tlt-ref-table code{background:#f1f5f9;padding:2px 7px;border-radius:5px;font-size:13px}

.tlt-ref-pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700}
.tlt-ref-pending{background:#fef3c7;color:#92400e}
.tlt-ref-earned{background:#dcfce7;color:#166534}
.tlt-ref-paid{background:#dbeafe;color:#1e40af}
.tlt-ref-void{background:#f1f5f9;color:#64748b}
.tlt-ref-review{background:#fee2e2;color:#991b1b}

.tlt-ref-empty{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:26px;text-align:center;margin-bottom:16px}
.tlt-ref-empty h3{margin-bottom:6px}
.tlt-ref-empty p{color:var(--muted);margin:0}
.tlt-ref-note{color:var(--muted);font-size:13.5px}

@media (max-width:600px){
	.tlt-ref-hero{padding:20px}
	.tlt-ref-hero h2{font-size:20px}
	.tlt-ref-copybtn{flex:1 1 100%}
}

/* ── The public /refer/ page ───────────────── */
.tlt-ref-landing{max-width:940px;margin:0 auto}
.tlt-ref-eyebrow{color:var(--brand);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.tlt-ref-lede{background:linear-gradient(135deg,#0b1a2d,#14304f);color:#fff;border-radius:16px;padding:34px;margin-bottom:34px}
/* Same cascade problem on the public page. */
.tlt-ref-landing .tlt-ref-lede h2{color:#fff;font-size:30px;line-height:1.2;margin:0 0 12px}
.tlt-ref-landing .tlt-ref-lede__sub{color:#dbe4f0;font-size:17px;margin:0 0 22px;max-width:640px}
.tlt-ref-landing .tlt-ref-lede .tlt-ref-note{color:#9ecbff}
.tlt-ref-landing .tlt-ref-lede p{color:#dbe4f0}
.tlt-ref-lede .tlt-ref-note a{color:#93c5fd;text-decoration:underline}
.tlt-ref-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tlt-ref-btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none}
.tlt-ref-btn:hover{filter:brightness(1.08);color:#fff}
.tlt-ref-btn--ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}
.tlt-ref-btn--ghost:hover{border-color:var(--brand);color:var(--brand);filter:none}

.tlt-ref-landing h3{color:var(--navy);font-size:22px;margin:0 0 16px}
.tlt-ref-steps,.tlt-ref-why,.tlt-ref-honest{margin-bottom:34px}

/* Explicit columns, not auto-fit: auto-fit gave three across and left step 4
   stranded on its own row, which read like something had gone wrong. */
.tlt-ref-steplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.tlt-ref-steplist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tlt-ref-steplist{grid-template-columns:1fr}}
.tlt-ref-steplist li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:0}
.tlt-ref-stepnum{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8f2fe;color:var(--brand);font-weight:800;margin-bottom:10px}
.tlt-ref-steplist strong{display:block;color:var(--navy);margin-bottom:6px}
.tlt-ref-steplist p{margin:0;color:var(--muted);font-size:14.5px}

.tlt-ref-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tlt-ref-card{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:20px}
.tlt-ref-card strong{display:block;color:var(--navy);margin-bottom:6px}
.tlt-ref-card p{margin:0;color:var(--muted);font-size:14.5px}

.tlt-ref-honest{background:#fffdf5;border:1px solid #fde68a;border-radius:12px;padding:24px}
.tlt-ref-honest ul{margin:12px 0 18px;padding-left:20px}
.tlt-ref-honest li{margin-bottom:10px}

.tlt-ref-copy--light input{background:rgba(255,255,255,.12)}

@media (max-width:640px){
	.tlt-ref-lede{padding:24px}
	.tlt-ref-lede h2{font-size:24px}
	.tlt-ref-lede__sub{font-size:15.5px}
}

/* Copy feedback that is announced, not just shown. */
.tlt-ref-panel .tlt-ref-status{min-height:1.3em;margin:8px 0 0;font-size:13.5px;color:#9ecbff}

/* Touch targets and visible focus — a referral panel is used on a phone. */
.tlt-ref-copybtn,.tlt-ref-sharebtn,.tlt-ref-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.tlt-ref-panel a:focus-visible,.tlt-ref-panel button:focus-visible,.tlt-ref-panel input:focus-visible{outline:3px solid #9ecbff;outline-offset:2px}
@media (max-width:600px){
	.tlt-ref-copy input{flex:1 1 100%}
	.tlt-ref-tiles{flex-direction:column}
	.tlt-ref-table{display:block;overflow-x:auto}
}