/* ============================================================
   Afranga · Active campaign (21.10.2026; renamed from "Cashback campaigns" the same day)
   Mirrors Figma DESIGN > "Active campaign - cashback" (40002515:97072),
   frames C1-C4 and the drawers C5 / C5a (L1 "One card").
   Shell = SaveSmart confirmation: 588 px column, Display S title,
   one card (pad 32, radius 16, gap 20, shadow/card).
   Badges, text links, drawer and icon button come from
   invest-concepts.css; the demo panel from settings.css.
   This file adds only the campaign parts.
   ============================================================ */

.main--campaign { padding: 2.25rem 2.5rem 2.5rem; min-width: 0; }

.campaign { display: flex; flex-direction: column; gap: 1.5rem; max-width: 36.75rem; margin: 0 auto; }
.campaign__title { font: var(--display-s); letter-spacing: -0.019rem; text-align: center; }

/* ---------- the card ---------- */
.campaign__card { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); }
.campaign__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.campaign__name { font: var(--inv-h2); letter-spacing: -0.0125rem; }

/* rate tiles = SaveSmart term option without the radio */
.campaign__rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.campaign__rate { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border: 0.0625rem solid var(--border); border-radius: 0.75rem; }
.campaign__rate-term { font: var(--inv-label-l); color: var(--text-primary); }

/* kv rows = SaveSmart confirmation recipe */
.campaign__kv-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--border); }
.campaign__kv-row:last-child { border-bottom: 0; }
.campaign__kv-label { font: var(--body-m); color: var(--inv-warm); }
.campaign__kv-value { font: var(--value); color: var(--text-primary); text-align: right; }
.campaign__kv-value--pos { color: var(--green); }

/* the investor's figure (bg-warm block) */
.campaign__figure { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: var(--ivory); border-radius: 0.75rem; }
.campaign__figure-label { font: var(--body-m); color: var(--inv-warm); }
.campaign__figure-amount { font: var(--number-l); letter-spacing: -0.03125rem; color: var(--green); }
.campaign__figure-empty { font: var(--inv-h3); color: var(--text-primary); }
.campaign__figure-text { font: var(--body-m); color: var(--text-primary); }

/* Button Primary Large */
.campaign__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 3rem; padding: 0 1.5rem; border-radius: 0.5rem; background: var(--coral); color: var(--white); font: var(--inv-label-l); transition: background var(--t-fast) var(--ease); }
.campaign__btn:hover { background: var(--coral-dark); }
.campaign__btn:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }

/* text links (Invest "Full Loan Details" recipe; the PDF one carries external-link) */
.campaign__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.campaign__link { text-align: left; }
/* inline, so the icon stays right after the last word when the text wraps on a phone */
.campaign__link svg { display: inline-block; width: 1rem; height: 1rem; margin-left: 0.5rem; vertical-align: -0.1875rem; }

.campaign__note { font: var(--body-m); color: var(--inv-warm); }
.campaign__ecspr { font: var(--caption-s); color: var(--text-muted); }

/* ---------- drawer: Your qualifying investments (Account statement S10 drawer) ---------- */
.campaign__drawer-body { gap: 1rem; }
.campaign__plan { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 0.0625rem solid var(--border); border-radius: 0.75rem; }
.campaign__plan-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.campaign__plan-name { font: var(--value); color: var(--text-primary); }
.campaign__plan-meta { font: var(--body-s); color: var(--inv-warm); }
.campaign__plan-amount { font: var(--value); color: var(--green); white-space: nowrap; }
.campaign__plan-reason { font: var(--body-s); color: var(--text-primary); }
.campaign__rule { font: var(--body-m); color: var(--inv-warm); }
.campaign__fine { font: var(--body-s); color: var(--inv-warm); }

/* demo panel (prototype only): the closed pill waits bottom right, clear of the drawer head;
   the open panel sits top right, so the column moves aside on wide screens */
.set-demo--bottom { top: auto; bottom: 1rem; }
@media (min-width: 75.0625rem) { .has-demo .main--campaign { padding-right: 22rem; } }

/* ---------- phone: same content, one column (Figma mobile not drawn yet) ---------- */
@media (max-width: 48rem) {
  .main--campaign { padding: 1.5rem 1rem 2rem; }
  .campaign__card { padding: 1.5rem 1rem; }
  .campaign__rates { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .campaign__rate { flex-direction: row; align-items: center; justify-content: space-between; }
}