/* =====================================================================
   ref.css  -  the look of the "Earn some money" page and the partner cabinet.
   ALL styling of those two pages is in this file. Header, menu and footer
   come from site.css, not from here.

   HOW TO CHANGE COLORS
   - Change a value in the first block (:root). Every band that uses it changes.
   - Each band in the page is written like:  <div class="ref-card grey">
     The class WORD picks the colors: dark, grey or base.
       dark  = dark background, light text
       grey  = grey background, light text
       base  = the main page color (--ref-base), dark text
     Type the word (dark / grey / base), not a --variable name.
   - More classes you can add to a band (separate with a space):
       ctitle = the title is centred          center = title and all text centred
       tight  = smaller line height           gap    = 30px strip of main color ABOVE the band
       gap-s  = 10px strip of main color ABOVE the band
   ===================================================================== */
:root{
  --ref-base:#dfcaa2;         /* MAIN page color (the whole page + "base" bands + the strips between bands) */
  --ref-dark:#1d1712;         /* "dark" bands */
  --ref-grey:#504b46;         /* "grey" bands */
  --ref-white:#ffffff;        /* text on dark and grey bands */
  --ref-gold:#f3d9b0;         /* titles and links on dark and grey bands */
  --ref-ink:#2b2118;          /* text on base bands */
  --ref-red:#800000;          /* titles and links on base bands */
  --ref-brown:#944b2b;        /* buttons */
  --ref-brown-hover:#a8573a;  /* buttons when the mouse is over them */

  --ref-width:860px;          /* width of the text column */
  --ref-band-pad:26px;        /* space above and below the text in every band */
  --ref-gap:30px;             /* strip of main color for class "gap" */
  --ref-gap-s:10px;           /* strip of main color for class "gap-s" */
  --ref-line-tight:1.3;       /* line height for class "tight" */

  --ref-form-w:560px;         /* width of forms (same as the contact form on the index page) */
  --ref-field-pad:12px 14px;  /* space inside the fields (same as index) */
  --ref-field-font:.95rem;    /* text size in fields, labels and buttons (same as index) */
  --ref-field-bg:rgba(255,255,255,.07);        /* field color in dark and grey bands */
  --ref-field-border:rgba(243,234,217,.28);    /* field border in dark and grey bands */
  --ref-field-text:#f3ead9;                    /* text you type in dark and grey bands */

  --ref-font-head:'Fraunces',Georgia,serif;                /* titles, labels, buttons, links, fields (as on index) */
  --ref-font-text:Georgia,'Times New Roman',serif;         /* paragraphs and lists (as on index) */
  --ref-font-ui:Georgia,'Times New Roman',serif;                  /* small notes and number labels */
}

/* ---------- page ---------- */
body.ref-body{margin:0;background:var(--ref-base)}
.ref-wrap,.ref-wrap *{box-sizing:border-box}
.ref-wrap{width:100%;background:var(--ref-base);color:var(--ref-ink);font-family:var(--ref-font-text);font-size:16px;line-height:1.55;text-align:left;padding-bottom:var(--ref-gap)}   /* padding-bottom = the strip of main color before the footer */
.ref-wrap a{font-family:inherit}

/* breadcrumbs (the line "Home > ...") and the line under them */
.ref-crumbs{max-width:var(--ref-width);margin:0 auto 14px;padding:0px 16px 0px;font-size:.9rem;color:#4a3a28;text-align:center;border-bottom:1.4px solid black}   /* the line under the breadcrumbs is this border */
.ref-crumbs a{color:var(--ref-red);text-decoration:underline}

.ref-wrap>h1,.ref-wrap>.ref-lead{max-width:var(--ref-width);margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.ref-wrap h1{text-align:center;color:var(--ref-red);font-family:var(--ref-font-head);font-weight:600;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.1;margin-top:10px;margin-bottom:6px}
.ref-lead{text-align:center;font-size:1rem;margin-top:0;margin-bottom:24px;color:var(--ref-ink);line-height:1.3}
.ref-wrap>.ref-msg{max-width:calc(var(--ref-width) - 32px);margin:12px auto}

/* ---------- bands: full width, no borders. Add the class dark, grey or base to each .ref-card ---------- */
.ref-card{margin:0;border:0;border-radius:0;box-shadow:none;padding:var(--ref-band-pad) max(20px,calc((100% - var(--ref-width)) / 2));background:var(--ref-grey);color:var(--ref-white)}
.ref-card.dark{background:var(--ref-dark);color:var(--ref-white)}
.ref-card.grey{background:var(--ref-grey);color:var(--ref-white)}
.ref-card.base,.ref-card.light{background:var(--ref-base);color:var(--ref-ink)}
.ref-card.gap{margin-top:var(--ref-gap)}
.ref-card.gap-s{margin-top:var(--ref-gap-s)}
.ref-card.tight,.ref-card.tight p,.ref-card.tight li{line-height:var(--ref-line-tight)}
.ref-card.ctitle h2,.ref-card.center h2{text-align:center}
.ref-card.center{text-align:center}
.ref-card.center ul{list-style:none;margin:8px 0;padding:0}

.ref-card h2{margin:0 0 12px;font-family:var(--ref-font-head);font-weight:600;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2;color:var(--ref-gold);text-align:left}
.ref-card.base h2,.ref-card.light h2{color:var(--ref-red)}
.ref-card a{color:var(--ref-gold);text-decoration:underline}
.ref-card.base a,.ref-card.light a{color:var(--ref-red)}
.ref-card p{margin:8px 0}
.ref-card ul{margin:8px 0 8px 22px;padding:0}.ref-card li{margin:6px 0}
.ref-note{font-family:var(--ref-font-ui);font-size:14px;color:#f1e7d6}
.ref-card.base .ref-note,.ref-card.light .ref-note{color:#5a4a38}

/* ---------- steps and numbers ---------- */
.ref-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ref-step,.ref-stat{background:rgba(255,255,255,.1);border-radius:6px;padding:10px 13px}
.ref-card.base .ref-step,.ref-card.base .ref-stat,.ref-card.light .ref-step,.ref-card.light .ref-stat{background:rgba(255,255,255,.45);border:1px solid rgba(43,33,24,.15)}
.ref-step .n{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:var(--ref-brown);color:#fff;font-weight:bold;margin-right:8px}
.ref-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ref-stat b{display:block;font-family:var(--ref-font-head);font-size:1.5rem;color:#fff}
.ref-stat span{font-family:var(--ref-font-ui);font-size:.85rem;color:#f1e7d6}
.ref-card.base .ref-stat b{color:var(--ref-red)}.ref-card.base .ref-stat span{color:#5a4a38}

/* ---------- tables ---------- */
.ref-table{width:100%;border-collapse:collapse;margin:8px 0}
.ref-table th,.ref-table td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.25);text-align:left;vertical-align:top}
.ref-table th{font-family:var(--ref-font-head);color:var(--ref-gold);font-weight:bold}
.ref-card.base .ref-table th,.ref-card.light .ref-table th{color:var(--ref-red)}
.ref-card.base .ref-table th,.ref-card.base .ref-table td,.ref-card.light .ref-table th,.ref-card.light .ref-table td{border-bottom-color:rgba(43,33,24,.25)}
.ref-table .r{text-align:right;white-space:nowrap}
.ref-table .muted{opacity:.6;text-decoration:line-through}
/* the small "you earn" table on the earn page: 600px wide, centred */
.ref-ex{max-width:600px;margin:12px auto;white-space:nowrap}
.ref-ex th,.ref-ex td,.ref-ex .r{text-align:center}

/* ---------- forms: same size as the contact form on the index page ---------- */
.ref-form,.ref-narrow{width:100%;max-width:var(--ref-form-w);margin-left:auto;margin-right:auto}
.ref-form{display:flex;flex-direction:column;gap:14px}
.ref-f label{display:block;font-family:var(--ref-font-head);font-weight:600;font-size:var(--ref-field-font);margin:0 0 4px}
.ref-f small,.ref-form small{font-weight:normal;font-size:.85em;opacity:.9}
.ref-f input,.ref-linkbox input{display:block;width:100%;padding:var(--ref-field-pad);font-family:var(--ref-font-head);font-size:var(--ref-field-font);line-height:normal;color:var(--ref-field-text);background:var(--ref-field-bg);border:1px solid var(--ref-field-border);border-radius:6px}
.ref-f input:focus,.ref-linkbox input:focus{outline:none;border-color:#d4af37;box-shadow:0 0 0 2px rgba(212,175,55,.25)}
.ref-f input::placeholder,.ref-linkbox input::placeholder{color:#b9a995;opacity:1}
.ref-card.base .ref-f input,.ref-card.base .ref-linkbox input,.ref-card.light .ref-f input,.ref-card.light .ref-linkbox input{color:#111;background:rgba(255,255,255,.75);border-color:rgba(43,33,24,.35)}
.ref-form p{margin:0}
.ref-form .ref-note{font-size:14px}
/* a field with a small button at its end (Copy, Save, Open) */
.ref-linkbox{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.ref-linkbox input{flex:1 1 200px;width:auto;min-width:0}
.ref-linkbox .ref-btn{flex:none;display:inline-flex;align-items:center;justify-content:center}
.ref-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- buttons and messages ---------- */
.ref-btn{display:inline-block;background:var(--ref-brown);color:#fff;border:0;padding:11px 26px;border-radius:6px;font-family:var(--ref-font-head);font-weight:600;font-size:var(--ref-field-font);cursor:pointer;text-decoration:none;transition:background-color .15s ease}
.ref-btn:hover{background:var(--ref-brown-hover)}.ref-btn:disabled{opacity:.6;cursor:wait}
.ref-btn.sm{padding:9px 16px;font-size:.9rem}
.ref-wrap a.ref-btn,.ref-card a.ref-btn{color:#fff;text-decoration:none}
.ref-msg{padding:8px 12px;border-radius:5px;margin:10px 0;text-align:left}
.ref-msg.err{background:#5a1a1a;border:1px solid #c66;color:#fff}.ref-msg.ok{background:#1d4a24;border:1px solid #6c6;color:#fff}
.ref-card.base .ref-msg.err,.ref-card.light .ref-msg.err{background:#f8e0dc;border-color:#cf8e86;color:#7a1a10}
.ref-card.base .ref-msg.ok,.ref-card.light .ref-msg.ok{background:#e3f1dc;border-color:#8fbf7f;color:#1f4a14}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .ref-card{padding:20px 16px}
}
@media (max-width:600px){
  .ref-form p{text-align:center}
  .ref-form .ref-btn{display:block;margin:0 auto}
}