/* ==========================================
   NEXORA CARELINK
   CREATE CAUSE
========================================== */

:root{

    --navy:#0B1F3A;
    --navy2:#163A70;
    --gold:#D4AF37;
    --white:#FFFFFF;
    --bg:#F5F7FB;
    --text:#1E2D40;
    --muted:#7A879A;

}

/* ==========================
RESET
========================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:"Poppins",sans-serif;

    background:

    radial-gradient(circle at top,#ffffff,#F4F7FB);

    color:var(--text);

    min-height:100vh;

    padding-bottom:120px;

}

/* ==========================
HEADER
========================== */

.page-header{

    position:sticky;

    top:0;

    z-index:100;

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(212,175,55,.18);

}

.page-header h2{

    font-size:22px;

    color:var(--navy);

    font-weight:700;

}

.back-btn{

    width:44px;

    height:44px;

    border-radius:14px;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--navy);

    font-size:22px;

    background:#fff;

    border:1px solid rgba(212,175,55,.25);

    box-shadow:

    0 8px 18px rgba(0,0,0,.06);

}

/* ==========================
PROGRESS
========================== */

.wizard-progress{

    padding:22px 18px;

}

.progress-bar{

    width:100%;

    height:9px;

    background:#E9EEF6;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:25%;

    height:100%;

    border-radius:999px;

    background:

    linear-gradient(

    90deg,

    var(--gold),

    #F8D870

    );

    transition:.35s;

}

.step-text{

    margin-top:10px;

    color:var(--muted);

    font-size:14px;

    font-weight:600;

}

/* ==========================
FORM
========================== */

form{

    padding:0 18px;

}

/* ==========================
STEPS
========================== */

.wizard-step{

    display:none;

    animation:fade .35s ease;

}

.wizard-step.active{

    display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateX(35px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* ==========================
CARD
========================== */

.form-card{

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.98),

    rgba(248,249,252,.98)

    );

    border-radius:24px;

    padding:22px;

    margin-bottom:20px;

    border:1px solid rgba(212,175,55,.18);

    box-shadow:

    0 14px 35px rgba(0,0,0,.05);

}

.form-card h3{

    color:var(--navy);

    font-size:18px;

    margin-bottom:18px;

    font-weight:700;

}

.form-card h3 span{

    color:var(--muted);

    font-size:13px;

    font-weight:500;

}

/* ==========================
INPUTS
========================== */

input,

textarea,

select{

    width:100%;

    border:none;

    outline:none;

    padding:17px;

    border-radius:16px;

    background:#F7F9FC;

    border:1px solid #E3E9F1;

    font-size:15px;

    font-family:inherit;

    color:var(--navy);

    transition:.25s;

}

input:focus,

textarea:focus,

select:focus{

    border-color:var(--gold);

    box-shadow:

    0 0 0 4px

    rgba(212,175,55,.12);

}

textarea{

    resize:none;

    line-height:1.7;

}

small{

    display:block;

    margin-top:12px;

    color:var(--muted);

    line-height:1.6;

}

/* ==========================
UPLOAD
========================== */

.upload-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px 18px;

    border:2px dashed rgba(212,175,55,.45);

    border-radius:22px;

    cursor:pointer;

    background:#FAFBFD;

}

.upload-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--gold);

    background:#fff;

    border:1px solid rgba(212,175,55,.25);

    margin-bottom:16px;

}

.upload-box p{

    color:var(--muted);

}

#coverPreview{

    display:none;

    width:100%;

    margin-top:20px;

    border-radius:18px;

}

/* ==========================
CHECKBOX
========================== */

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:14px;

    cursor:pointer;

}

.checkbox input{

    width:20px;

    height:20px;

    margin-top:4px;

}

.checkbox span{

    color:var(--muted);

    line-height:1.7;

}

/* ==========================
BUTTONS
========================== */

.wizard-buttons{

    display:flex;

    gap:12px;

    margin-top:10px;

}

.back-btn2,

.next-btn,

.publish-btn{

    flex:1;

    border:none;

    border-radius:18px;

    padding:17px;

    font-family:inherit;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.back-btn2{

    background:#fff;

    color:var(--navy);

    border:1px solid rgba(212,175,55,.25);

    box-shadow:

    0 8px 18px rgba(0,0,0,.05);

}

.next-btn,

.publish-btn{

    color:#fff;

    background:

    linear-gradient(

    135deg,

    var(--navy),

    var(--navy2)

    );

    border:1px solid var(--gold);

    box-shadow:

    0 14px 30px

    rgba(11,31,58,.18);

}

.next-btn:hover,

.publish-btn:hover{

    transform:translateY(-2px);

}

/* ==========================
BOTTOM SAFE AREA
========================== */

body::after{

    content:"";

    display:block;

    height:80px;

}
.toggle-members-btn{

    background:#F2F4F7 !important;
    color:#5F6672 !important;

    border:none;

    padding:7px 14px;

    height:34px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    box-shadow:none;

    cursor:pointer;

}

.toggle-members-btn:hover{

    background:#E6EAF0 !important;

    color:#1D2942 !important;

}
button#toggleMembersBtn{

    background:#F2F4F7 !important;
    color:#5F6672 !important;

    border:none !important;

    padding:7px 14px !important;

    height:34px !important;

    border-radius:999px !important;

    font-size:13px !important;

    font-weight:600 !important;

    box-shadow:none !important;

}
#toggleMembersBtn,
#toggleMembersBtn:hover,
#toggleMembersBtn:focus,
#toggleMembersBtn:active,
#toggleMembersBtn:visited{

    background:#F2F4F7 !important;
    color:#5F6672 !important;

    border:none !important;

    padding:7px 14px !important;

    border-radius:999px !important;

    height:34px !important;

    font-size:13px !important;

    font-weight:600 !important;

    box-shadow:none !important;

}