/* Guest apply flow popups — Figma "Font dev_PeopleHays Website" (wOjCoagn8nH5Mqk94nSxt8). Scoped to #applyFlowModal. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap&subset=vietnamese');

#applyFlowModal .modal-dialog { max-width: 576px; }
#applyFlowModal .modal-content {
    border: 0.5px solid #aaa3a3;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito Sans', 'Nunito', sans-serif;
    color: #000;
}
#applyFlowModal .af-step { position: relative; }
#applyFlowModal .af-step--narrow { padding: 50px 76px 60px 72px; }
#applyFlowModal .af-step--otp { padding: 38px 72px 48px 72px; }
#applyFlowModal .af-step--apply { padding: 40px 26px 28px 28px; }
#applyFlowModal .af-step--success { padding: 33px 28px 28px 28px; text-align: center; }

/* close "x" */
#applyFlowModal .af-close {
    position: absolute; top: 13px; right: 26px;
    background: none; border: 0; padding: 0;
    color: #f68920; font-size: 18px; line-height: 1; cursor: pointer;
}
#applyFlowModal .af-close--lg { top: 5px; right: 22px; font-size: 26px; font-weight: 700; }

/* typography */
#applyFlowModal .af-title { margin: 0; font-size: 26px; font-weight: 700; line-height: normal; color: #000; }
#applyFlowModal .af-subtitle { margin: 4px 0 0; font-size: 18px; line-height: normal; color: #757575; }
#applyFlowModal .af-subtitle strong { color: #000; }
#applyFlowModal .af-subtitle--sm { margin-top: 2px; padding-left: 4px; font-size: 15px; font-weight: 500; }
#applyFlowModal .af-label { display: block; margin: 22px 0 4px; font-size: 16px; font-weight: 400; color: #000; }
#applyFlowModal .af-muted { font-weight: 500; color: #757575; }
#applyFlowModal .af-req { color: #fd1313; }
#applyFlowModal .af-help { margin: 6px 0 0; font-size: 13px; color: #757575; }

/* inputs */
#applyFlowModal .af-input {
    display: block; width: 100%; height: 46px; padding: 0 17px;
    border: 0.5px solid #f68920; border-radius: 5px; background: #fff;
    font-size: 16px; color: #000; outline: none;
}
#applyFlowModal .af-input::placeholder { color: #898989; }
#applyFlowModal .af-input:focus { box-shadow: 0 0 0 2px rgba(246, 137, 32, 0.2); }
#applyFlowModal .af-password { position: relative; }
#applyFlowModal .af-password .af-input { padding-right: 46px; }
#applyFlowModal .af-eye {
    position: absolute; top: 0; right: 0; width: 46px; height: 46px;
    background: none; border: 0; color: #898989; cursor: pointer;
}
#applyFlowModal .af-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }

/* primary button: Figma gradient */
#applyFlowModal .af-btn {
    display: block; width: 100%; height: 46px; margin-top: 7px;
    border: 1px solid #fff; border-radius: 5px;
    background-image: linear-gradient(180deg, rgba(246, 137, 32, 0.7) 11.068%, rgba(246, 200, 32, 0.7) 100%),
                      linear-gradient(90deg, #f68920 0%, #f68920 100%);
    color: #fff; font-size: 16px; font-weight: 600; line-height: normal; cursor: pointer;
}
#applyFlowModal .af-btn:disabled { opacity: 0.6; cursor: wait; }
#applyFlowModal .af-btn--apply { height: 40px; border-radius: 8px; margin-top: 17px; }

#applyFlowModal .af-link {
    background: none; border: 0; padding: 0;
    color: #f68920; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
}
#applyFlowModal .af-link:hover { text-decoration: underline; }
#applyFlowModal .af-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
#applyFlowModal .af-dot { color: #898989; }
#applyFlowModal .af-recaptcha { margin-top: 12px; }
#applyFlowModal .af-row .af-recaptcha { width: 100%; margin-top: 0; }

/* errors (October data-validate-for) */
#applyFlowModal .af-error { margin-top: 4px; font-size: 13px; color: #fd1313; }
/* framework.extras toggles .visible on [data-validate-for]; apply-flow.js does the same for client-side errors */
#applyFlowModal .af-error:not(.visible) { display: none; }

/* OTP (Figma 3733:10015; 6 boxes per D9) */
#applyFlowModal .af-otp-desc { margin: 13px 0 0; font-size: 18px; line-height: normal; color: #757575; max-width: 434px; }
#applyFlowModal .af-otp-desc strong { color: #000; font-weight: 700; }
#applyFlowModal .af-otp { display: flex; gap: 10px; margin-top: 25px; }
#applyFlowModal .af-otp-box {
    width: 60px; height: 60px; padding: 0;
    border: 0.5px solid #f68920; border-radius: 5px; background: #fff;
    text-align: center; font-size: 24px; font-weight: 700; color: #000; outline: none;
}
#applyFlowModal .af-otp-box:focus { box-shadow: 0 0 0 2px rgba(246, 137, 32, 0.25); }
#applyFlowModal .af-otp.is-invalid .af-otp-box { border-color: #fd1313; }
#applyFlowModal .af-otp-timer { margin: 17px 0 0; font-size: 18px; color: #757575; }
#applyFlowModal .af-otp-countdown { color: #fd1313; font-weight: 700; }
#applyFlowModal .af-otp-resend { margin-top: 12px; }

/* apply step (Figma 3743:8952 / 3744:9002) */
#applyFlowModal .af-head { padding-left: 17px; }
#applyFlowModal .af-section-title { margin: 19px 0 0; font-size: 18px; font-weight: 700; color: #000; }
#applyFlowModal .af-info {
    margin-top: 9px; padding: 8px 21px 13px;
    background: rgba(217, 217, 217, 0.27); border-radius: 5px;
}
#applyFlowModal .af-info-name { font-size: 18px; font-weight: 700; line-height: 24px; }
#applyFlowModal .af-info-list { margin: 7px 0 0; padding-left: 24px; list-style: disc; font-size: 16px; line-height: normal; }
#applyFlowModal .af-info-list strong { font-weight: 600; }
#applyFlowModal .af-banner {
    margin-top: 19px; padding: 17px 21px;
    background: rgba(246, 137, 32, 0.1); border-radius: 5px;
}
#applyFlowModal .af-banner--with-btn { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#applyFlowModal .af-banner-title { font-size: 15px; font-weight: 700; line-height: 24px; }
#applyFlowModal .af-banner-text { font-size: 13px; line-height: normal; max-width: 273px; }
#applyFlowModal .af-banner-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 106px; height: 33px; border: 1px solid #f68920; border-radius: 8px; background: #fff;
    color: #f68920; font-size: 15px; font-weight: 500; text-decoration: none;
}
#applyFlowModal .af-upload-label { margin-top: 16px; padding-left: 21px; font-size: 15px; font-weight: 700; }
#applyFlowModal .af-upload-help { margin: 2px 0 0; padding-left: 17px; font-size: 15px; font-weight: 500; color: #757575; }
#applyFlowModal .af-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#applyFlowModal .af-dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center;
    width: 100%; height: 193px; margin: 7px 0 0; padding-top: 32px;
    border: 0.5px solid #f68920; border-radius: 5px; background: #fff; cursor: pointer;
}
#applyFlowModal .af-dropzone.is-dragover { background: rgba(246, 137, 32, 0.05); }
#applyFlowModal .af-dropzone.has-file { display: none; }
#applyFlowModal .af-dropzone-icon { font-size: 50px; line-height: 50px; color: #f68920; }
#applyFlowModal .af-dropzone-title { margin-top: 4px; font-size: 15px; font-weight: 700; color: #000; }
#applyFlowModal .af-dropzone-text { margin-top: 3px; font-size: 13px; color: #757575; }
#applyFlowModal .af-file-card {
    display: flex; align-items: center; gap: 16px;
    min-height: 63px; margin-top: 24px; padding: 0 16px;
    border: 0.5px solid #898989; border-radius: 5px; background: #fff;
}
#applyFlowModal .af-file-icon { font-size: 34px; color: #fd1313; }
#applyFlowModal .af-file-meta { flex: 1 1 auto; min-width: 0; }
#applyFlowModal .af-file-name { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#applyFlowModal .af-file-info { font-size: 16px; font-weight: 600; color: #757575; }
#applyFlowModal .af-file-remove {
    flex: 0 0 auto; height: 46px; padding: 0 0 0 16px;
    border: 0; border-left: 1px solid #898989; background: none;
    font-size: 16px; font-weight: 600; color: #757575; cursor: pointer;
}
#applyFlowModal .af-change-card {
    position: relative; display: flex; align-items: center; gap: 16px;
    width: 100%; height: 63px; margin: 7px 0 0; padding: 0 22px;
    border: 0.5px solid #f68920; border-radius: 5px; background: #fff; cursor: pointer;
}
#applyFlowModal .af-change-icon { font-size: 32px; color: #f68920; }
#applyFlowModal .af-change-title { display: block; font-size: 15px; font-weight: 700; color: #000; }
#applyFlowModal .af-change-text { display: block; font-size: 13px; color: #757575; }
#applyFlowModal .af-cover {
    display: block; width: 100%; margin-top: 7px; padding: 10px 17px; min-height: 110px;
    border: 0.5px solid #f68920; border-radius: 5px; font-size: 15px; resize: vertical; outline: none;
}

/* success (Figma 3743:8951) */
#applyFlowModal .af-success-icon { position: relative; display: inline-block; width: 60px; height: 60px; }
#applyFlowModal .af-success-icon .fa-shield { font-size: 60px; line-height: 60px; color: #34c759; }
#applyFlowModal .af-success-icon .fa-check {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    font-size: 22px; color: #fff;
}
#applyFlowModal .af-success-title { margin: 17px 0 0; font-size: 26px; font-weight: 700; color: #f68920; }
#applyFlowModal .af-success-text { margin: 17px 0 0; font-size: 15px; font-weight: 500; line-height: normal; }
#applyFlowModal .af-success-note {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px;
    min-height: 39px; margin-top: 33px; padding: 0 12px;
    background: rgba(246, 137, 32, 0.1); border-radius: 5px; font-size: 13px;
}

/* phones */
@media (max-width: 575.98px) {
    #applyFlowModal .modal-dialog { margin: 16px; }
    #applyFlowModal .af-step--narrow,
    #applyFlowModal .af-step--otp { padding: 40px 16px 24px; }
    #applyFlowModal .af-step--apply,
    #applyFlowModal .af-step--success { padding: 36px 16px 20px; }
    #applyFlowModal .af-title, #applyFlowModal .af-success-title { font-size: 22px; }
    #applyFlowModal .af-subtitle, #applyFlowModal .af-otp-desc, #applyFlowModal .af-otp-timer { font-size: 16px; }
    #applyFlowModal .af-otp { gap: 8px; }
    #applyFlowModal .af-otp-box { width: auto; flex: 1 1 0; max-width: 60px; height: 52px; }
    #applyFlowModal .af-grid { grid-template-columns: 1fr; }
    #applyFlowModal .af-banner--with-btn { flex-direction: column; }
    #applyFlowModal .af-file-info { font-size: 13px; }
}