@charset "utf-8";

.section-signup { padding: 140px 0 100px; background: var(--off-white); min-height: 100svh; }

.signup-header { text-align: center; margin-bottom: 40px; }
.page-title { font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: var(--dark-deeper); margin-bottom: 12px; }
.page-title span { color: var(--blue); }
.page-subtitle { font-size: 16px; color: var(--muted); max-width: 500px; margin: 0 auto; }

/* Notice Banner */
.approval-notice { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 16px; padding: 24px; margin-bottom: 30px; }
.notice-text { font-size: 15px; color: var(--dark); line-height: 1.6; }
.notice-text strong { color: var(--blue); font-weight: 800; }

/* Form Styling */
.signup-card { background: #fff; border-radius: 20px; padding: 50px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 40px rgba(0,0,0,0.02); }
.form-section { margin-bottom: 30px; }
.form-section-title { font-size: 18px; font-weight: 800; color: var(--dark-deeper); margin-bottom: 20px; }

.modern-form .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.modern-form label { font-size: 14px; font-weight: 700; color: var(--dark-deeper); }
.modern-form input, .modern-form textarea { width: 100%; background: var(--off-white); border: 1.5px solid transparent; padding: 16px; border-radius: 12px; font-family: var(--font); color: var(--dark-deeper); transition: var(--trans); outline: none; }
.modern-form input:focus, .modern-form textarea:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-glow); }


/* Interactive Category Pills */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.cat-pill {
    cursor: pointer;
    user-select: none;
}

.cat-pill input {
    display: none; /* Hide default checkbox */
}

.pill-content {
    display: inline-block;
    background: var(--off-white);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    transition: var(--trans);
}

/* Hover state */
.cat-pill:hover .pill-content {
    border-color: rgba(0, 111, 255, 0.3);
    background: rgba(0, 111, 255, 0.02);
}

/* Checked state */
.cat-pill input:checked + .pill-content {
    background: rgba(0, 111, 255, 0.1);
    border-color: var(--blue);
    color: var(--blue-dark);
    font-weight: 800;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 111, 255, 0.15);
}

hr.form-divider {
	margin-bottom: 30px;
}


/* Button */
.btn-submit { width: 100%; background: var(--blue); color: #fff; border: none; padding: 18px; font-weight: 800; border-radius: 100px; cursor: pointer; transition: var(--trans); }
.btn-submit:hover { background: var(--blue-dark); transform: translateY(-2px); }

.secure-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); }

/* Mobile Responsiveness */
@media (max-width: 700px) {
    .signup-card {
        padding: 30px 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .approval-notice {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .category-pills {
        justify-content: center;
    }
}