/* ============================================================
   Franklins £50 Challenge - Charity Application
   All styles namespaced under .fri- so nothing clashes with
   the theme. Brand tokens live in :root below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

.fri-wrap{
  --fri-ink:#0f1935;
  --fri-ink-70:rgba(15,25,53,.72);
  --fri-ink-45:rgba(15,25,53,.45);
  --fri-accent:#ff6418;
  --fri-accent-dark:#e5540c;
  --fri-off:#f2f2f2;
  --fri-line:#e2e4ea;
  --fri-white:#fff;
  --fri-error:#c02626;
  --fri-radius:14px;
  --fri-body:17px;

  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:var(--fri-body);
  line-height:1.6;
  color:var(--fri-ink);
  background:var(--fri-off);
  padding:48px 20px 56px;
  box-sizing:border-box;
}
.fri-wrap *,
.fri-wrap *::before,
.fri-wrap *::after{box-sizing:border-box;}

.fri-form,
.fri-success{width:100%;max-width:none;margin:0 auto;}
/* Some themes reset [hidden]; make sure ours always wins. */
.fri-wrap [hidden]{display:none !important;}

/* ---------- Progress ---------- */
.fri-progress{
  display:flex;flex-wrap:wrap;gap:4px 2px;list-style:none;margin:0 0 14px;padding:0;
}
.fri-progress-step{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:5px 11px 5px 5px;border-radius:999px;background:transparent;
  font-size:12.5px;font-weight:700;color:var(--fri-ink-45);white-space:nowrap;
  transition:color .25s ease,background .25s ease;
}
.fri-progress-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--fri-white);border:2px solid var(--fri-line);
  font-size:12px;font-weight:900;color:var(--fri-ink-45);
  transition:all .25s ease;
}
.fri-progress-step.is-current{color:var(--fri-ink);background:var(--fri-white);}
.fri-progress-step.is-current .fri-progress-dot{border-color:var(--fri-accent);color:var(--fri-accent);}
.fri-progress-step.is-done .fri-progress-dot{
  background:var(--fri-accent);border-color:var(--fri-accent);color:#fff;
  font-size:0;position:relative;
}
.fri-progress-step.is-done .fri-progress-dot::after{
  content:"";position:absolute;width:6px;height:11px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.fri-progress-bar{height:4px;border-radius:4px;background:var(--fri-line);overflow:hidden;margin:0 0 30px;}
.fri-progress-fill{
  display:block;height:100%;width:0;background:var(--fri-accent);
  border-radius:4px;transition:width .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Step ---------- */
.fri-step{
  background:var(--fri-white);border:1px solid rgba(15,25,53,.06);
  border-radius:var(--fri-radius);padding:38px 40px 34px;
  box-shadow:0 2px 4px rgba(15,25,53,.04),0 12px 28px rgba(15,25,53,.06);
  animation:fri-in .45s cubic-bezier(.22,.61,.36,1) both;
}
.fri-step[hidden]{display:none;}
@keyframes fri-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.fri-step-count{
  font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fri-accent);margin:0 0 10px;
}
.fri-step-title{
  font-size:28px;line-height:1.25;font-weight:900;letter-spacing:-.01em;
  color:var(--fri-ink);margin:0 0 14px;
}
.fri-step-intro{
  background:var(--fri-off);border-left:3px solid var(--fri-accent);
  border-radius:0 8px 8px 0;padding:16px 18px;margin:0 0 30px;
}
.fri-step-intro p{margin:0 0 8px;font-size:16px;color:var(--fri-ink-70);}
.fri-step-intro p:last-child{margin:0;}

/* ---------- Fields ---------- */
.fri-fields{display:block;}
.fri-field{margin:0 0 28px;}
.fri-field:last-child{margin-bottom:0;}
.fri-field[hidden]{display:none;}

.fri-label{
  display:block;font-size:17px;line-height:1.45;font-weight:700;
  color:var(--fri-ink);margin:0 0 6px;padding:0;
}
.fri-optional{
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fri-ink-45);background:var(--fri-off);
  border-radius:999px;padding:3px 8px;
}
.fri-help{font-size:15px;line-height:1.55;color:var(--fri-ink-70);margin:0 0 10px;}

.fri-wrap input[type="text"],
.fri-wrap input[type="email"],
.fri-wrap input[type="tel"],
.fri-wrap input[type="url"],
.fri-wrap textarea{
  width:100%;display:block;
  font-family:inherit;font-size:var(--fri-body);line-height:1.55;color:var(--fri-ink);
  background:var(--fri-white);border:1.5px solid var(--fri-line);border-radius:10px;
  padding:13px 15px;margin:0;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none;
}
.fri-wrap textarea{resize:vertical;min-height:110px;}
.fri-wrap input:hover,
.fri-wrap textarea:hover{border-color:#cfd3dd;}
.fri-wrap input:focus,
.fri-wrap textarea:focus{
  outline:none;border-color:var(--fri-accent);
  box-shadow:0 0 0 4px rgba(255,100,24,.14);
}

/* Choices */
.fri-group{border:0;margin:0;padding:0;min-width:0;}
.fri-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.fri-option{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px 12px 14px;border:1.5px solid var(--fri-line);border-radius:10px;
  background:var(--fri-white);cursor:pointer;font-size:16px;line-height:1.35;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.fri-option:hover{border-color:#cfd3dd;}
.fri-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.fri-option-mark{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid #c9cedb;background:var(--fri-white);position:relative;
  transition:border-color .2s ease,background .2s ease;
}
.fri-field-checkboxes .fri-option-mark{border-radius:6px;}
.fri-option-mark::after{
  content:"";position:absolute;opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.fri-field-radio .fri-option-mark::after{
  inset:3px;border-radius:50%;background:#fff;transform:scale(.4);
}
.fri-field-checkboxes .fri-option-mark::after{
  left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);
}
.fri-option input:checked ~ .fri-option-mark{background:var(--fri-accent);border-color:var(--fri-accent);}
.fri-option input:checked ~ .fri-option-mark::after{opacity:1;transform:none;}
.fri-field-radio .fri-option input:checked ~ .fri-option-mark::after{transform:scale(1);}
.fri-field-checkboxes .fri-option input:checked ~ .fri-option-mark::after{transform:rotate(45deg);}
.fri-option:has(input:checked){border-color:var(--fri-accent);background:rgba(255,100,24,.05);}
.fri-option input:focus-visible ~ .fri-option-mark{box-shadow:0 0 0 4px rgba(255,100,24,.18);}

/* Errors */
.fri-field.has-error input,
.fri-field.has-error textarea{border-color:var(--fri-error);background:#fff8f8;}
.fri-field.has-error .fri-option{border-color:var(--fri-error);}
.fri-error{
  font-size:14px;font-weight:700;color:var(--fri-error);margin:8px 0 0;
}
.fri-error[hidden]{display:none;}
.fri-step-error{
  font-size:15px;font-weight:700;color:var(--fri-error);
  background:#fff2f2;border-radius:8px;padding:12px 14px;margin:18px 0 0;
}
.fri-step-error[hidden]{display:none;}

/* ---------- Navigation ---------- */
.fri-nav{
  display:flex;gap:12px;align-items:center;justify-content:flex-end;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--fri-line);
}
.fri-btn{
  font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.01em;
  color:#fff;background:var(--fri-accent);border:2px solid var(--fri-accent);
  border-radius:999px;padding:13px 30px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.fri-btn:hover{background:var(--fri-accent-dark);border-color:var(--fri-accent-dark);transform:translateY(-1px);}
.fri-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,100,24,.25);}
.fri-btn[disabled]{opacity:.6;cursor:default;transform:none;}
.fri-btn-ghost{
  color:var(--fri-ink);background:transparent;border-color:var(--fri-line);margin-right:auto;
}
.fri-btn-ghost:hover{background:var(--fri-off);border-color:#cfd3dd;color:var(--fri-ink);}

.fri-recaptcha-note{
  font-size:13px;line-height:1.5;color:var(--fri-ink-45);text-align:center;margin:18px auto 0;max-width:620px;
}
.fri-recaptcha-note a{color:var(--fri-ink-70);}

/* ---------- Success ---------- */
.fri-success{
  background:var(--fri-white);border:1px solid rgba(15,25,53,.06);border-radius:var(--fri-radius);
  padding:52px 40px;text-align:center;
  box-shadow:0 2px 4px rgba(15,25,53,.04),0 12px 28px rgba(15,25,53,.06);
  animation:fri-in .5s cubic-bezier(.22,.61,.36,1) both;
}
.fri-success[hidden]{display:none;}
.fri-success-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,100,24,.12);color:var(--fri-accent);margin-bottom:20px;
}
.fri-success-heading{font-size:28px;line-height:1.25;font-weight:900;margin:0 0 12px;color:var(--fri-ink);}
.fri-success-message{font-size:var(--fri-body);color:var(--fri-ink-70);margin:0 auto;max-width:none;}
.fri-success-message a{color:var(--fri-accent);font-weight:700;text-decoration:underline;}

/* ---------- Mobile ---------- */
@media (max-width:782px){
  .fri-wrap{padding:32px 16px 40px;}
  .fri-step{padding:28px 22px 26px;border-radius:12px;}
  .fri-step-title{font-size:22px;}
  .fri-progress-label{display:none;}
  .fri-progress{gap:8px;justify-content:space-between;}
  .fri-progress-step{padding:0;}
  .fri-options{flex-direction:column;align-items:stretch;}
  .fri-nav{flex-wrap:wrap;}
  .fri-btn{flex:1 1 auto;text-align:center;padding:14px 20px;}
  .fri-success{padding:40px 22px;}
  .fri-success-heading{font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
  .fri-wrap *{animation:none!important;transition:none!important;}
}