/* ===== Candidate Registration Page Styles ===== */

/* ---------- Wrapper ---------- */
.reg-wrapper {
    background: #f0f4f8;
    padding: 40px 0 60px;
    min-height: calc(100vh - 120px);
}
.reg-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    overflow: hidden;
    max-width: 920px;
    margin: 0 auto;
}

/* ---------- Header ---------- */
.reg-header {
    background: linear-gradient(135deg, #196ddb 0%, #0c73f4 100%);
    padding: 34px 36px 28px;
    text-align: center;
}
.reg-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.reg-header-icon i {
    font-size: 24px;
    color: #fff;
}
.reg-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 4px;
}
.reg-header p {
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    margin: 0;
}
.reg-header .btn-company-link {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 20px;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 8px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.reg-header .btn-company-link:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

/* ---------- Body ---------- */
.reg-body {
    padding: 32px 36px 40px;
}

/* ---------- Section Divider ---------- */
.reg-section {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #196ddb;
    margin: 28px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8f0fe;
}
.reg-section:first-child,
.reg-body form > .reg-section:first-of-type {
    margin-top: 0;
}

/* ---------- Form Controls ---------- */
.reg-field {
    margin-bottom: 18px;
}
.reg-field label,
.reg-body label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    color: #2d3748;
    margin-bottom: 6px;
    display: block;
}
.reg-field .form-control,
.reg-body .form-control {
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    background: #f8fafc;
    color: #1a202c;
    height: auto;
}
.reg-field .form-control:focus,
.reg-body .form-control:focus {
    border-color: #196ddb;
    box-shadow: 0 0 0 3px rgba(25,109,219,.12);
    background: #fff;
    outline: none;
}
.reg-field .form-control.is-invalid {
    border-color: #e53e3e;
}
.reg-field select.form-control,
.reg-body select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7c93' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.reg-field .invalid-feedback {
    font-family: 'Poppins', sans-serif;
    font-size: .8rem;
}
.reg-field .form-text,
.reg-field .field-hint {
    font-family: 'Poppins', sans-serif;
    font-size: .8rem;
    color: #718096;
    margin-top: 4px;
}

/* ---------- Submit Area ---------- */
.reg-terms {
    font-family: 'Poppins', sans-serif;
    font-size: .85rem;
    color: #4a5568;
    margin-bottom: 20px;
}
.reg-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.reg-btn-submit {
    padding: 13px 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #196ddb 0%, #0c73f4 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .3px;
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease;
}
.reg-btn-submit:hover {
    opacity: .92;
    transform: translateY(-1px);
}
.reg-btn-login {
    padding: 13px 28px;
    border: 1.5px solid #196ddb;
    border-radius: 10px;
    background: transparent;
    color: #196ddb;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all .2s;
}
.reg-btn-login:hover {
    background: #196ddb;
    color: #fff;
    text-decoration: none;
}

/* ========== Component Styles ========== */

/* ---------- Pill Checkboxes / Radios ---------- */
.custom-check-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.custom-check-group .check-item{position:relative}
.custom-check-group .check-item input[type="checkbox"],
.custom-check-group .check-item input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.custom-check-group .check-item label{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1.5px solid #d0dae8;border-radius:8px;background:#f7fbff;color:#16355c;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;user-select:none;font-family:'Poppins',sans-serif}
.custom-check-group .check-item label:hover{border-color:#196ddb;background:#eef6ff}
.custom-check-group .check-item input:checked+label{background:#196ddb;color:#fff;border-color:#196ddb;box-shadow:0 2px 8px rgba(25,109,219,.25)}
.custom-check-group .check-item label .check-icon{width:18px;height:18px;border-radius:4px;border:2px solid #b6c7df;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}
.custom-check-group .check-item input[type="radio"]+label .check-icon{border-radius:50%}
.custom-check-group .check-item input:checked+label .check-icon{background:#fff;border-color:#fff}
.custom-check-group .check-item input[type="checkbox"]:checked+label .check-icon::after{content:'\2713';color:#196ddb;font-size:12px;font-weight:700;line-height:1}
.custom-check-group .check-item input[type="radio"]:checked+label .check-icon::after{content:'';width:8px;height:8px;background:#196ddb;border-radius:50%;display:block}

/* ---------- Resume Upload Box ---------- */
.resume-upload-box{border:1.5px dashed #b6c7df;border-radius:12px;padding:18px;background:#f7fbff;text-align:center;cursor:pointer;transition:.2s ease-in-out}
.resume-upload-box:hover{border-color:#196ddb;background:#eef6ff}
.resume-upload-box.drag-over{border-color:#196ddb;background:#eef6ff}
.resume-upload-icon{width:58px;height:58px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#196ddb;color:#fff;font-size:24px;margin-bottom:12px}
.resume-upload-title{font-weight:600;color:#16355c;font-family:'Poppins',sans-serif}
.resume-upload-subtitle{font-size:.9rem;color:#6b7c93;margin-bottom:0;font-family:'Poppins',sans-serif}
.resume-file-info{display:none;margin-top:12px;padding:10px 14px;background:#eef6ff;border:1px solid #d8e4f3;border-radius:10px;text-align:left;word-break:break-all}
.resume-file-info .resume-file-name{font-weight:600;color:#16355c;font-size:.9rem}
.resume-file-info .resume-file-remove{color:#dc3545;cursor:pointer;font-size:.85rem;float:right;border:none;background:transparent;font-weight:600}
.resume-file-info .resume-file-remove:hover{text-decoration:underline}

/* ---------- Technical Skills Dropdown ---------- */
.techskill-wrap{margin-top:8px}
.techskill-selected{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;min-height:28px}
.techskill-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#196ddb;color:#fff;border-radius:20px;font-size:.85rem;font-weight:500;animation:fadeIn .2s ease;font-family:'Poppins',sans-serif}
.techskill-tag .techskill-remove{background:rgba(255,255,255,.25);border:none;color:#fff;border-radius:50%;width:18px;height:18px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.techskill-tag .techskill-remove:hover{background:rgba(255,255,255,.45)}
.techskill-dropdown{position:relative}
.techskill-input{width:100%;padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:.92rem;outline:none;transition:border-color .2s;background:#f8fafc;font-family:'Poppins',sans-serif}
.techskill-input:focus{border-color:#196ddb;box-shadow:0 0 0 3px rgba(25,109,219,.12);background:#fff}
.techskill-options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d0dae8;border-top:none;border-radius:0 0 10px 10px;max-height:200px;overflow-y:auto;z-index:10;display:none;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.techskill-options.show{display:block}
.techskill-option{padding:8px 14px;cursor:pointer;font-size:.9rem;transition:background .15s;font-family:'Poppins',sans-serif}
.techskill-option:hover,.techskill-option.highlighted{background:#eef6ff;color:#196ddb}
.techskill-option.disabled{opacity:.4;cursor:default;background:transparent;color:#999}
.techskill-add-hint{padding:8px 14px;font-size:.85rem;color:#196ddb;cursor:pointer;font-weight:500;border-top:1px solid #e8eef5;font-family:'Poppins',sans-serif}
.techskill-add-hint:hover{background:#eef6ff}
@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ---------- Editor Textarea ---------- */
.editor-wrap{border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;transition:border-color .2s}
.editor-wrap:focus-within{border-color:#196ddb;box-shadow:0 0 0 3px rgba(25,109,219,.12)}
.editor-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#f0f4f9;border-bottom:1px solid #e2e8f0;font-size:.8rem;color:#6b7c93}
.editor-toolbar .toolbar-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:transparent;border:none;color:#6b7c93;cursor:default;font-size:14px}
.editor-toolbar .toolbar-label{margin-left:auto;font-weight:500;font-size:.78rem;color:#8d9bb5}
.editor-wrap textarea{border:none;outline:none;width:100%;padding:12px 14px;font-size:.92rem;line-height:1.6;resize:vertical;min-height:120px;background:#fff;font-family:'Poppins',sans-serif;color:#16355c}
.editor-wrap textarea::placeholder{color:#a8b8cf}
.editor-footer{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;background:#f8fafc;border-top:1px solid #e8eef5;font-size:.8rem}
.editor-word-count{color:#6b7c93;font-weight:500;font-family:'Poppins',sans-serif}
.editor-word-count .count-current{color:#16355c;font-weight:600}
.editor-word-count.over-limit .count-current{color:#dc3545}
.editor-word-count.over-limit{color:#dc3545}

/* ---------- Bootstrap Tags Input ---------- */
.bootstrap-tagsinput{background-color:#f8fafc;border:1.5px solid #e2e8f0;box-shadow:none;display:inline-block;padding:6px 10px;color:#1a202c;vertical-align:middle;border-radius:10px;width:100%;line-height:27px;cursor:text;transition:border-color .2s,box-shadow .2s;font-family:'Poppins',sans-serif}
.bootstrap-tagsinput:focus-within{border-color:#196ddb;box-shadow:0 0 0 3px rgba(25,109,219,.12);background:#fff}
.bootstrap-tagsinput input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit;font-family:'Poppins',sans-serif;font-size:.9rem}
.bootstrap-tagsinput .badge{margin-right:4px;color:#fff;background-color:#196ddb;padding:5px 10px;border-radius:20px;border:none;font-size:.82rem;font-weight:500}
.bootstrap-tagsinput .badge [data-role="remove"]{margin-left:8px;cursor:pointer}
.bootstrap-tagsinput .badge [data-role="remove"]:after{content:"×";padding:0 4px;background-color:rgba(255,255,255,.2);border-radius:50%;font-size:13px}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:after{background-color:rgba(255,255,255,.4)}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .reg-wrapper { padding: 24px 0 40px; }
    .reg-card { border-radius: 12px; margin: 0 10px; }
    .reg-header { padding: 28px 20px 22px; }
    .reg-body { padding: 24px 20px 30px; }
    .reg-actions { flex-direction: column; }
    .reg-btn-submit, .reg-btn-login { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
    .reg-header h2 { font-size: 1.2rem; }
    .reg-body { padding: 20px 16px 28px; }
}