/* ==========================================================================
   free.css — the free CV generator (free.php) only.

   Loaded after app.css everywhere, and after admin.css on the gate and locked
   screens (which are ordinary scrolling documents rather than the pinned
   editor shell).
   ========================================================================== */

/* The gate reuses .gate from app.css, but its phone field is a number to read
   back rather than a password to obscure — so no wide letter-spacing. */
.free-gate-page .gate-card input{ letter-spacing:.5px; }

/* Terms & Conditions checkbox on the phone-number gate. Left-aligned and
   small, unlike the phone input above it, since this is a confirmation, not
   a field to fill in. */
.gate-terms{
  display:flex; align-items:flex-start; gap:8px; margin:2px 0 14px;
  font-size:12.5px; line-height:1.4; color:var(--txt-dim); text-align:left;
  cursor:pointer;
}
.gate-terms input{
  width:auto; margin:2px 0 0; flex:none; letter-spacing:0; accent-color:var(--accent);
}
.gate-terms a{ color:var(--accent); }

/* ------------------------------ Terms page ------------------------------- */
.terms-list{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:12px; font-size:13px; line-height:1.55; }
.terms-list li::marker{ color:var(--txt-faint); font-weight:700; }

/* ------------------------------ Editor chrome ---------------------------- */
/* The serial is the number the customer quotes at the counter, so it reads as
   a durable label rather than another button. */
.serial-badge{
  font-size:12px; font-weight:800; letter-spacing:.6px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--txt-dim);
  border-radius:6px; padding:4px 9px; white-space:nowrap;
}
.topbar-leave{ display:flex; }

/* One-shot warning above the editor: this is the only pass at the CV. */
.free-warnbar{
  margin:0; padding:9px 16px; font-size:12.5px; line-height:1.4;
  background:rgba(217,119,6,.12); color:#8a5108;
  border-bottom:1px solid rgba(217,119,6,.28);
}
.free-warnbar b{ font-weight:800; }

/* ------------------------------ Locked screen ---------------------------- */
.free-wrap{ max-width:900px; }

.free-hero{ text-align:center; }
.free-hero-title{
  margin:0 0 8px; font-size:20px; font-weight:700; letter-spacing:-.2px; color:var(--txt);
}
.free-hero .muted{ max-width:620px; margin:0 auto; line-height:1.55; }

/* Two cards side by side on desktop: where to pay, and how to send the slip. */
.free-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.free-cols .card{ margin-bottom:0; }

.bank-list{
  display:grid; grid-template-columns:auto 1fr; gap:8px 14px;
  margin:0 0 12px; font-size:13px;
}
.bank-list dt{ color:var(--txt-faint); font-size:11.5px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; align-self:center; }
.bank-list dd{ margin:0; color:var(--txt); }
/* Account numbers get copied by hand off the screen — tabular figures stop
   6s and 8s blurring together. */
.bank-no{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:14px; font-weight:700; letter-spacing:1px;
}

.slip-form .field{ margin-bottom:12px; }
.slip-form input[type="file"]{
  width:100%; font:inherit; font-size:12.5px; color:var(--txt-dim);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 10px;
}

@media (max-width: 760px){
  .free-cols{ grid-template-columns:1fr; }
}