/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.submission-hero {
    background: radial-gradient(circle at top right,rgba(195,139,77,.35),transparent 50%),
        linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 60%,var(--primary-lighter) 100%);
    color:#fff;
    padding:3rem 0 2.25rem;
}
.submission-hero h1 { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; line-height:1.25; }
.submission-hero .lead { font-size:1.02rem; color:rgba(255,255,255,.82); max-width:540px; }
.hero-checklist {
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    border-radius:16px; padding:1.15rem 1.4rem;
}
.hero-checklist h5 { font-weight:600; font-size:.92rem; margin-bottom:.6rem; }
.hero-checklist li  { font-size:.88rem; padding:.18rem 0; opacity:.88; }
.hero-pill {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .9rem; border-radius:999px; background:rgba(255,255,255,.12);
    font-weight:600; font-size:.83rem; margin-top:.65rem;
}

/* ═══════════════════════════════════════════
   WIZARD CARD
   ═══════════════════════════════════════════ */
.wizard-card {
    background:var(--bg-surface); border-radius:20px;
    border:none; box-shadow:var(--shadow-xl); overflow:hidden;
}

/* ─── Step progress bar ─── */
.step-progress {
    display:flex; align-items:center;
    padding:1.5rem 1.75rem 1.15rem;
    background:linear-gradient(135deg,rgba(15,61,86,.04),rgba(15,61,86,.01));
    border-bottom:1px solid var(--border-color);
    gap:0; overflow-x:auto;
}
.step-item {
    display:flex; align-items:center; gap:.55rem;
    flex-shrink:0; cursor:default;
}
.step-circle {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem;
    transition:all .4s cubic-bezier(.4,0,.2,1);
    border:2px solid var(--border-color);
    background:var(--bg-surface); color:var(--text-muted);
    flex-shrink:0;
}
.step-circle .check-icon { display:none; font-size:.75rem; }
.step-text {
    font-size:.8rem; font-weight:500; color:var(--text-muted);
    transition:color .3s ease; white-space:nowrap;
}
.step-line {
    flex:1; height:3px; background:var(--border-color);
    margin:0 .6rem; border-radius:2px;
    position:relative; overflow:hidden; min-width:28px;
}
.step-line::after {
    content:''; position:absolute; top:0; left:0; bottom:0;
    width:0%; background:var(--primary); border-radius:2px;
    transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* Active */
.step-item.active .step-circle {
    border-color:var(--primary); background:var(--primary);
    color:#fff; box-shadow:0 0 0 4px rgba(15,61,86,.15);
}
.step-item.active .step-text { color:var(--primary); font-weight:600; }

/* Done */
.step-item.done .step-circle {
    border-color:#28a745; background:#28a745; color:#fff; box-shadow:none;
}
.step-item.done .step-circle .step-number { display:none; }
.step-item.done .step-circle .check-icon  { display:inline; }
.step-item.done .step-text { color:#28a745; font-weight:600; }
.step-line.done::after { width:100%; }

/* Clickable completed steps */
.step-item.done { cursor:pointer; }
.step-item.done:hover .step-circle { box-shadow:0 0 0 3px rgba(40,167,69,.2); }

/* ═══════════════════════════════════════════
   FORM BODY
   ═══════════════════════════════════════════ */
.wizard-body { padding:1.6rem 1.75rem 1.75rem; }

.form-section {
    display:flex; align-items:center; gap:.55rem;
    font-size:.8rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; color:var(--primary);
    margin-bottom:.9rem; padding-bottom:.45rem;
    border-bottom:2px solid rgba(15,61,86,.08);
}
.form-section i { font-size:.85rem; opacity:.7; }

/* Panel animation */
.step-panel { animation:stepFadeIn .4s ease forwards; }
@keyframes stepFadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Step intro text */
.step-intro {
    font-size:.9rem; color:var(--text-muted);
    margin-bottom:1.25rem; line-height:1.55;
}

/* Photo upload */
.photo-upload-zone {
    border:2px dashed var(--border-color); border-radius:14px;
    padding:1.5rem; text-align:center; cursor:pointer;
    transition:border-color .25s ease,background .25s ease;
    position:relative; background:var(--bg-surface-alt);
}
.photo-upload-zone:hover,
.photo-upload-zone.dragover {
    border-color:var(--primary); background:rgba(15,61,86,.03);
}
.photo-upload-zone .upload-icon { font-size:2rem; color:var(--primary-lighter); margin-bottom:.5rem; }
.photo-upload-zone .upload-text { font-size:.86rem; color:var(--text-muted); }
.photo-upload-zone .upload-text strong { color:var(--primary); cursor:pointer; }
.photo-upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-preview-wrapper { display:none; text-align:center; }
.photo-preview-wrapper img {
    max-height:180px; border-radius:12px; object-fit:cover;
    box-shadow:0 4px 16px rgba(0,0,0,.12); margin-bottom:.5rem;
}
.photo-preview-wrapper .change-photo-btn {
    font-size:.8rem; cursor:pointer; color:var(--primary); font-weight:500;
}

/* Bio builder card */
.bio-builder-card {
    background:linear-gradient(135deg,rgba(15,61,86,.03),rgba(42,127,163,.04));
    border:1px solid rgba(15,61,86,.1); border-radius:14px;
    padding:1.15rem 1.35rem; margin-bottom:1.15rem;
}
.bio-builder-card h6 { font-weight:600; margin-bottom:.2rem; }

/* Sidebar */
.info-panel {
    background:var(--primary); color:#fff;
    border-radius:18px; border:1px solid rgba(255,255,255,.08);
    padding:1.6rem; position:sticky; top:20px;
}
.info-panel h5 {
    text-transform:uppercase; letter-spacing:.08em;
    font-size:.7rem; color:rgba(255,255,255,.6); margin-bottom:.7rem;
}
.info-panel ul { padding-left:1.1rem; margin-bottom:.7rem; font-size:.9rem; }
.info-panel li  { padding:.12rem 0; }
.info-panel .status-chip {
    display:inline-flex; gap:.3rem; align-items:center;
    padding:.3rem .75rem; border-radius:999px;
    background:rgba(255,255,255,.12); font-weight:600; font-size:.83rem;
}
.info-panel a { color:#fff; text-decoration:underline; }
.submission-footer-note { font-size:.83rem; color:var(--text-muted); }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-step-next {
    background:var(--primary); color:#fff; border:none;
    padding:.7rem 1.75rem; border-radius:12px;
    font-weight:600; font-size:.95rem;
    transition:all .25s ease;
    display:inline-flex; align-items:center; gap:.45rem;
}
.btn-step-next:hover {
    background:var(--primary-dark); color:#fff;
    transform:translateY(-1px); box-shadow:0 6px 20px rgba(15,61,86,.25);
}
.btn-step-back {
    background:transparent; color:var(--text-muted);
    border:1px solid var(--border-color);
    padding:.7rem 1.35rem; border-radius:12px;
    font-weight:500; font-size:.9rem;
    transition:all .25s ease;
    display:inline-flex; align-items:center; gap:.45rem;
}
.btn-step-back:hover { border-color:var(--primary-light); color:var(--primary); }
.btn-submit-profile {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff; border:none;
    padding:.8rem 2rem; border-radius:12px;
    font-weight:600; font-size:1rem;
    transition:all .3s ease;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-submit-profile:hover {
    color:#fff; transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(15,61,86,.3);
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */
@media(max-width:767.98px){
    .submission-hero { padding:2rem 0 1.25rem; }
    .submission-hero h1 { font-size:1.4rem; }
    .hero-checklist { display:none; }
    .step-progress { padding:1rem .75rem .85rem; }
    .step-circle { width:32px; height:32px; font-size:.8rem; }
    .step-text { font-size:.68rem; }
    .step-line { min-width:16px; margin:0 .3rem; }
    .wizard-body { padding:1.15rem .9rem 1.35rem; }
    .wizard-card { border-radius:14px; }
    .photo-upload-zone { padding:.9rem; }
    .photo-preview-wrapper img { max-height:130px; }
    .btn-step-next, .btn-step-back { padding:.6rem 1rem; font-size:.85rem; }
}
@media(max-width:991px){
    .info-panel { position:static; top:auto; margin-top:.5rem; }
}

/* ═══════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════ */
[data-theme="dark"] .wizard-card { border:1px solid var(--border-color); }
[data-theme="dark"] .step-progress { background:rgba(255,255,255,.02); }
[data-theme="dark"] .form-section { color:var(--primary-lighter); border-bottom-color:rgba(255,255,255,.06); }
[data-theme="dark"] .photo-upload-zone { background:rgba(255,255,255,.03); border-color:var(--border-color); }
[data-theme="dark"] .photo-upload-zone:hover { background:rgba(255,255,255,.05); border-color:var(--primary-light); }
[data-theme="dark"] .bio-builder-card { background:rgba(255,255,255,.03); border-color:var(--border-color); }
[data-theme="dark"] .info-panel { background:var(--bg-surface-alt); border-color:var(--border-color); }
[data-theme="dark"] .hero-checklist { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .btn-step-back { border-color:var(--border-color); color:var(--text-muted); }
[data-theme="dark"] .step-item.active .step-circle { box-shadow:0 0 0 4px rgba(42,127,163,.25); }
[data-theme="dark"] .preview-card { background:var(--bg-surface-alt); border-color:var(--border-color); }
[data-theme="dark"] .preview-bio-text { background:rgba(255,255,255,.03); border-color:var(--border-color); }

/* ═══════════════════════════════════════════
   PREVIEW CARD (Step 5)
   ═══════════════════════════════════════════ */
.preview-card {
    background:#fff; border:1px solid var(--border-color); border-radius:16px;
    overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.preview-cover {
    height:140px; position:relative;
    background:linear-gradient(135deg,var(--primary) 0%,#0d47a1 40%,#6a1b9a 100%);
}
.preview-cover-inner {
    width:100%; height:100%;
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 14px);
}
.preview-avatar-wrap {
    position:absolute; bottom:-42px; left:24px; z-index:10;
}
.preview-avatar {
    width:96px; height:96px; border-radius:50%;
    border:3px solid #fff; box-shadow:0 3px 14px rgba(0,0,0,.18);
    overflow:hidden; background:#e9eef4;
}
.preview-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-avatar .avatar-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:var(--text-muted); font-weight:700;
}
.preview-body { padding:56px 24px 20px; }
.preview-name { font-size:1.35rem; font-weight:800; margin:0 0 2px; color:var(--text-primary,#222); }
.preview-tagline { font-size:.88rem; color:var(--text-muted); margin-bottom:.6rem; }
.preview-meta {
    display:flex; flex-wrap:wrap; gap:.75rem; font-size:.82rem; color:var(--text-muted); margin-bottom:.9rem;
}
.preview-meta span { display:inline-flex; align-items:center; gap:.3rem; }
.preview-bio-text {
    background:rgba(15,61,86,.02); border:1px solid var(--border-color);
    border-radius:10px; padding:1rem 1.15rem;
    font-size:.9rem; line-height:1.65; color:var(--text-primary,#333);
    max-height:260px; overflow-y:auto;
}
.preview-edit-hint {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.78rem; color:var(--primary); cursor:pointer; font-weight:500;
    margin-top:.5rem;
}
.preview-edit-hint:hover { text-decoration:underline; }