:root {
    --primary: #FF760D;
    --focus: #6f2cff;
    --ring: rgba(111, 44, 255, .25);
    --radius-lg: 22px;
}

.btn-cta {
    width: 100%;
    height: 54px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}

.btn-ghost {
    background: var(--primary-color);
    cursor: not-allowed;
}

.file-upload-wrapper{
  position:relative; display:flex; align-items:center; gap:8px;
  border:2px solid #ddd; border-radius:8px;
  background:#f2f2f2; padding:10px 12px; cursor:pointer;
}
.file-placeholder{
  flex:1; color:#8a8a8a; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-upload-icon{
  width:22px; height:22px; flex:0 0 22px; color:#3c0078;
}
.file-upload-wrapper input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.file-upload-wrapper:focus-within{ box-shadow:0 0 0 4px rgba(60,0,120,.15); outline:0; }

.signup-area {
    background-image: url('/assets/images/background_image_nfn.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    margin-top: 60px;
}

.form-wrapper {
    max-width: 1100px;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    padding: 40px;
}

.hero-title {
    text-align: center;
    font-weight: 800;
    font-size: clamp(22px, 3.4vw, 28px);
    margin-bottom: 8px;
}

.hero-sub {
    text-align: center;
    margin-bottom: 8px;
    font-size: 16px;
}

.hero-need {
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
}

.card-bio {
    background: linear-gradient(135deg, #4b0082, #cf0028);
    color: #fff;
    border: 0;
}

.bio-chip {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #ffffff22;
    border: 2px solid #ffffff33;
}

.bio-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 22px;
}

.card-flag,
.card-form {
    border-radius: var(--radius-lg);
}

.form-label {
    font-weight: 700;
    color: #111827;
}

.label-req::after {
    content: " *";
    color: #dc3545;
}

.form-control {
    height: 52px;
    border-radius: 14px;
    box-shadow: none;
}