/* ============================================================
   ROCK FOUNDATION FORCES — Registration
   Ivory & Gold luxury theme
   ============================================================ */

:root{
  --ink:#1c1a17;
  --ink-soft:#3a352c;
  --muted:#8a7c56;
  --gold:#c9a24b;
  --gold-deep:#a67c25;
  --gold-light:#e6cf95;
  --ivory:#f7f3ea;
  --ivory-2:#efe7d4;
  --paper:#fffdf8;
  --line:#e7ddc6;
  --green:#2f6f4f;
  --danger:#b23b3b;
  --shadow:0 18px 50px rgba(28,26,23,.12);
  --radius:18px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  color:var(--ink-soft);
  background:
    radial-gradient(1200px 500px at 50% -10%, #fff9ec 0%, rgba(255,249,236,0) 60%),
    linear-gradient(160deg,#f7f3ea 0%,#efe7d4 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* subtle ornamental frame */
.page{
  max-width:820px;
  margin:0 auto;
  padding:28px 16px 60px;
}

/* ---------- Header ---------- */
.brand{
  text-align:center;
  padding:12px 0 6px;
}
.brand img{width:118px;height:auto;filter:drop-shadow(0 8px 22px rgba(28,26,23,.22));}
.brand .name{
  font-family:var(--serif);
  font-weight:700;
  font-size:30px;
  letter-spacing:.5px;
  color:var(--ink);
  margin:12px 0 2px;
}
.brand .name span{color:var(--gold-deep);}
.brand .tag{
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:11px;
  color:var(--muted);
}
.rule{
  width:120px;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------- Card ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-top:26px;
  position:relative;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));
}

/* ---------- Progress ---------- */
.progress-wrap{padding:26px 30px 6px;}
.progress-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;
}
.progress-head .stepname{color:var(--gold-deep);font-weight:600;}
.progress-bar{
  height:6px;border-radius:20px;background:var(--ivory-2);overflow:hidden;
}
.progress-fill{
  height:100%;width:11%;border-radius:20px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.step-dots{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;
}
.dot{
  flex:1;min-width:14px;height:4px;border-radius:4px;background:var(--ivory-2);
  transition:background .3s;
}
.dot.done{background:var(--gold);}
.dot.active{background:var(--gold-deep);}

/* ---------- Steps ---------- */
.step{display:none;padding:14px 30px 30px;animation:fade .45s ease;}
.step.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.step-title{
  font-family:var(--serif);
  font-size:27px;font-weight:700;color:var(--ink);margin:6px 0 2px;
}
.step-sub{color:var(--muted);font-size:14px;margin:0 0 20px;}
.section-badge{
  display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:4px;
}

/* ---------- Fields ---------- */
.field{margin-bottom:20px;}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;
}
label .req{color:var(--danger);margin-left:2px;}
label .hint{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px;}

input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],select,textarea{
  width:100%;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#fffdf7;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:13px 15px;
  transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;
}
textarea{min-height:96px;resize:vertical;}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,75,.16);
  background:#fff;
}
input::placeholder,textarea::placeholder{color:#b7ad93;}
select{appearance:none;-webkit-appearance:none;background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a67c25' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;}

/* radios / choices */
.choices{display:flex;flex-direction:column;gap:10px;}
.choices.row{flex-direction:row;flex-wrap:wrap;}
.choice{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;
  background:#fffdf7;transition:all .18s;font-size:15px;color:var(--ink);
  flex:1;min-width:140px;
}
.choice:hover{border-color:var(--gold-light);background:#fff;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice .mark{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  flex-shrink:0;position:relative;transition:all .18s;
}
.choice input:checked ~ .mark{border-color:var(--gold-deep);}
.choice input:checked ~ .mark::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
}
.choice:has(input:checked){border-color:var(--gold);background:#fff7e7;box-shadow:0 0 0 3px rgba(201,162,75,.12);}

/* shirt size grid */
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.size-grid .choice{justify-content:center;min-width:0;padding:14px 6px;font-weight:600;}

/* file upload */
.upload{
  border:1.6px dashed var(--gold-light);border-radius:14px;
  padding:22px;text-align:center;background:#fffdf5;cursor:pointer;transition:all .2s;
}
.upload:hover{border-color:var(--gold);background:#fff8ea;}
.upload input{display:none;}
.upload .ico{font-size:26px;color:var(--gold-deep);}
.upload .u-main{font-weight:600;color:var(--ink);margin-top:6px;}
.upload .u-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.upload.has-file{border-style:solid;border-color:var(--green);background:#f2f8f4;}
.upload-preview{margin-top:12px;display:none;}
.upload-preview img{max-height:120px;border-radius:10px;border:1px solid var(--line);}
.upload .u-status{font-size:12px;margin-top:8px;color:var(--green);font-weight:600;}

/* consent block */
.consent{
  border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;background:#fffdf7;margin-bottom:14px;
}
.consent p{margin:0 0 12px;font-size:14.5px;color:var(--ink);}

/* ---------- Errors ---------- */
.err-msg{color:var(--danger);font-size:12.5px;margin-top:6px;display:none;}
.field.error input,.field.error select,.field.error textarea{border-color:var(--danger);background:#fdf5f5;}
.field.error .err-msg{display:block;}
.form-alert{
  display:none;margin:0 30px 6px;padding:12px 16px;border-radius:10px;
  font-size:14px;background:#fdf0f0;color:var(--danger);border:1px solid #f0cccc;
}
.form-alert.show{display:block;}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 30px 28px;border-top:1px solid var(--line);margin-top:6px;
}
.btn{
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.3px;
  border:none;border-radius:40px;padding:14px 30px;cursor:pointer;transition:all .2s;
}
.btn-primary{
  color:#241f14;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  box-shadow:0 8px 22px rgba(166,124,37,.32);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(166,124,37,.4);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-ghost{
  color:var(--gold-deep);background:transparent;border:1.5px solid var(--gold-light);
}
.btn-ghost:hover{background:#fff8ea;border-color:var(--gold);}
.btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(36,31,20,.35);
  border-top-color:#241f14;border-radius:50%;animation:rot .7s linear infinite;
  vertical-align:-3px;margin-right:8px;}
.btn.loading .spin{display:inline-block;}
@keyframes rot{to{transform:rotate(360deg);}}
.autosave{font-size:12px;color:var(--muted);text-align:center;padding:0 30px 18px;}
.autosave b{color:var(--green);}

/* ---------- Success ---------- */
.success{display:none;padding:50px 34px 46px;text-align:center;}
.success.show{display:block;animation:fade .5s ease;}
.success .seal{
  width:96px;height:96px;margin:0 auto 20px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(166,124,37,.4);
}
.success .seal svg{width:46px;height:46px;stroke:#fff;}
.success h2{font-family:var(--serif);font-size:32px;color:var(--ink);margin:0 0 10px;}
.success p{color:var(--ink-soft);font-size:15.5px;max-width:460px;margin:0 auto 6px;}
.success .quote{font-style:italic;color:var(--muted);margin-top:18px;}

/* ---------- Footer ---------- */
.foot{text-align:center;color:#a89f88;font-size:12px;margin-top:26px;line-height:1.6;}

/* ---------- Resume banner ---------- */
.resume-banner{
  display:none;margin:0 0 0;background:#fff7e7;border:1px solid var(--gold-light);
  border-radius:12px;padding:12px 16px;font-size:13.5px;color:var(--ink-soft);
  margin:18px 30px 0;
}
.resume-banner.show{display:block;}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .page{padding:18px 12px 48px;}
  .brand .name{font-size:25px;}
  .progress-wrap{padding:20px 18px 4px;}
  .step{padding:12px 18px 24px;}
  .field.two{grid-template-columns:1fr;gap:0;}
  .field.two .field{margin-bottom:20px;}
  .nav{padding:16px 18px 22px;}
  .btn{padding:13px 22px;font-size:14px;}
  .size-grid{grid-template-columns:repeat(3,1fr);}
  .step-title{font-size:23px;}
  .choices.row{flex-direction:column;}
}