/* qjb = Quantum Job Board */

/* Job list */
.qjb-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}

/* Job card */
.qjb-card {
    background: #fff !important;
    border: 1px solid rgba(0, 45, 72, 0.08) !important;
    border-radius: 32px !important;
    padding: 32px !important;
    box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.qjb-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 4px 8px 24px 0 rgba(0, 0, 0, 0.12) !important;
}

.qjb-card__title {
    font-family: Mardoto-Bold, sans-serif !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    color: #002D48 !important;
    margin: 0 0 16px !important;
    text-decoration: none !important;
    display: block !important;
}

a.qjb-card__title:hover {
    color: #04A7A1 !important;
}

.qjb-card__desc {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, 0.7) !important;
    margin: 0 0 24px !important;
    flex: 1 !important;
}

.qjb-card__desc a {
    color: #04A7A1 !important;
    text-decoration: underline !important;
}

/* Apply button */
.qjb-apply-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    border: none !important;
    background: #D7F1F0 !important;
    color: #007470 !important;
    border-radius: 80px !important;
    cursor: pointer !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    align-self: flex-start !important;
}

.qjb-apply-btn:hover {
    background: #c4e8e7 !important;
    transform: translateY(-2px) !important;
}

.qjb-apply-btn svg {
    flex-shrink: 0 !important;
}

/* ===== POPUP ===== */
.qjb-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 45, 72, 0.5) !important;
    justify-content: center !important;
    align-items: flex-start !important;
    z-index: 9999 !important;
    backdrop-filter: blur(4px) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.qjb-popup__content {
    background: #fff !important;
    padding: 40px 48px !important;
    border-radius: 32px !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 20px auto !important;
    position: relative !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important;
}

.qjb-popup__close {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    font-size: 28px !important;
    cursor: pointer !important;
    color: #002D48 !important;
    line-height: 1 !important;
    transition: opacity 0.2s !important;
    z-index: 2 !important;
}

.qjb-popup__close:hover {
    opacity: 0.6 !important;
}

.qjb-popup__header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.qjb-popup__header h3 {
    font-family: Mardoto-Bold, sans-serif !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    color: #002D48 !important;
    margin: 0 0 8px !important;
}

.qjb-popup__position {
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 17px !important;
    color: #04A7A1 !important;
    margin: 0 !important;
}

/* Form sections */
.qjb-form__section {
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #eef1f4 !important;
}

.qjb-form__section:last-of-type {
    border-bottom: none !important;
}

.qjb-form__section-title {
    font-family: Mardoto-Bold, sans-serif !important;
    font-size: 17px !important;
    color: #002D48 !important;
    margin: 0 0 12px !important;
}

.qjb-form__hint {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 13px !important;
    color: #888 !important;
    margin: -8px 0 12px !important;
}

/* Form layout */
.qjb-form__row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.qjb-form__row--photo {
    gap: 24px !important;
}

.qjb-form__col {
    flex: 1 !important;
    min-width: 0 !important;
}

.qjb-form__col--grow {
    flex: 1 !important;
}

.qjb-form__field {
    margin-bottom: 12px !important;
}

/* Form inputs */
#jobApplyForm label {
    display: block !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}

#jobApplyForm input[type="text"],
#jobApplyForm input[type="tel"],
#jobApplyForm input[type="email"],
#jobApplyForm input[type="date"],
#jobApplyForm select,
#jobApplyForm textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 12px !important;
    background: #f8fafa !important;
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 14px !important;
    color: #002D48 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}

#jobApplyForm input:focus,
#jobApplyForm select:focus,
#jobApplyForm textarea:focus {
    border-color: #04A7A1 !important;
    box-shadow: 0 0 0 3px rgba(4, 167, 161, 0.1) !important;
}

#jobApplyForm textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

/* Photo upload */
.qjb-form__photo-wrap {
    flex-shrink: 0 !important;
}

.qjb-form__photo-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.qjb-form__photo-preview {
    width: 120px !important;
    height: 140px !important;
    border: 2px dashed #d0d5dd !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f8fafa !important;
    transition: border-color 0.2s !important;
}

.qjb-form__photo-preview:hover {
    border-color: #04A7A1 !important;
}

.qjb-form__photo-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.qjb-form__photo-text {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 12px !important;
    color: #888 !important;
}

/* Dynamic tables */
.qjb-form__table-wrap {
    overflow-x: auto !important;
}

.qjb-form__table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

.qjb-form__table th {
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 12px !important;
    color: #555 !important;
    text-align: left !important;
    padding: 6px 4px !important;
    border-bottom: 1px solid #e5e9ed !important;
    white-space: nowrap !important;
}

.qjb-form__table td {
    padding: 4px !important;
    vertical-align: top !important;
}

.qjb-form__table input[type="text"] {
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.qjb-form__row-remove {
    background: none !important;
    border: none !important;
    color: #c62828 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s !important;
}

.qjb-form__row-remove:hover {
    opacity: 1 !important;
}

.qjb-form__add-row {
    background: none !important;
    border: 1px dashed #04A7A1 !important;
    color: #04A7A1 !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: background 0.2s !important;
}

.qjb-form__add-row:hover {
    background: #f0faf9 !important;
}

/* Language table */
.qjb-form__table--lang td:first-child {
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 13px !important;
    color: #333 !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
}

.qjb-form__table--lang select {
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-width: 60px !important;
}

.qjb-form__lang-other {
    min-width: 100px !important;
}

/* File upload buttons */
.qjb-form__file-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.qjb-file-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    background: #D7F1F0 !important;
    border: 1px solid rgba(4, 167, 161, 0.2) !important;
    border-radius: 80px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 14px !important;
    color: #007470 !important;
    text-decoration: none !important;
}

.qjb-file-btn:hover {
    background: #c4e8e7 !important;
    text-decoration: none !important;
    color: #007470 !important;
}

.qjb-file-btn--secondary {
    background: #f0f3f6 !important;
    border-color: #d0d5dd !important;
    color: #002D48 !important;
}

.qjb-file-btn--secondary:hover {
    background: #e5e9ed !important;
    color: #002D48 !important;
}

/* Agreement */
.qjb-form__agree {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 24px 0 !important;
}

.qjb-checkbox {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.qjb-form__agree label {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(0, 0, 0, 0.7) !important;
    margin: 0 !important;
    display: inline !important;
}

/* Submit */
.qjb-form__submit {
    text-align: center !important;
}

.qjb-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 48px !important;
    background: #04A7A1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 80px !important;
    cursor: pointer !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 8px 16px rgba(4, 167, 161, 0.3) !important;
}

.qjb-submit-btn:hover {
    background: #039590 !important;
    transform: translateY(-2px) !important;
}

.qjb-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.qjb-form__success {
    text-align: center !important;
    color: #04A7A1 !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 16px !important;
    margin-top: 16px !important;
}

/* ===== EMAIL VERIFICATION STEP ===== */
.qjb-verify {
    text-align: center !important;
    padding: 20px 0 !important;
}

.qjb-verify__icon {
    margin-bottom: 16px !important;
}

.qjb-verify__desc {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 15px !important;
    color: #555 !important;
    margin: 0 0 20px !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.qjb-verify__field {
    display: flex !important;
    gap: 10px !important;
    max-width: 460px !important;
    margin: 0 auto 16px !important;
}

.qjb-verify__email {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 12px !important;
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.qjb-verify__email:focus {
    border-color: #04A7A1 !important;
    box-shadow: 0 0 0 3px rgba(4, 167, 161, 0.1) !important;
}

.qjb-verify__send-btn {
    padding: 12px 24px !important;
    background: #04A7A1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
}

.qjb-verify__send-btn:hover {
    background: #039590 !important;
}

.qjb-verify__send-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.qjb-verify__code-wrap {
    max-width: 360px !important;
    margin: 0 auto !important;
}

.qjb-verify__code-hint {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 14px !important;
    color: #04A7A1 !important;
    margin: 0 0 12px !important;
}

.qjb-verify__code-field {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.qjb-verify__code-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid #04A7A1 !important;
    border-radius: 12px !important;
    font-family: Mardoto-Bold, sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 6px !important;
    text-align: center !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.qjb-verify__check-btn {
    padding: 12px 20px !important;
    background: #002D48 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.qjb-verify__check-btn:hover {
    background: #004D7A !important;
}

.qjb-verify__resend {
    background: none !important;
    border: none !important;
    color: #04A7A1 !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

.qjb-verify__timer {
    font-family: Mardoto-Regular, sans-serif !important;
    font-size: 13px !important;
    color: #888 !important;
    margin-left: 8px !important;
}

.qjb-verify__error {
    color: #c62828 !important;
    font-family: Mardoto-Medium, sans-serif !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1023px) {
    .qjb-card__title { font-size: 22px !important; }
    .qjb-card__desc { font-size: 16px !important; }
    .qjb-popup__content { padding: 30px 24px !important; }
}

@media (max-width: 767px) {
    .qjb-list {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .qjb-card {
        padding: 24px !important;
        border-radius: 24px !important;
    }
    .qjb-card__title { font-size: 20px !important; margin-bottom: 12px !important; }
    .qjb-card__desc { font-size: 15px !important; margin-bottom: 16px !important; }
    .qjb-apply-btn { padding: 12px 24px !important; font-size: 15px !important; }
    .qjb-popup__content {
        padding: 20px 16px !important;
        border-radius: 24px !important;
        margin: 10px !important;
    }
    .qjb-popup__header h3 { font-size: 22px !important; }
    .qjb-form__row { flex-direction: column !important; }
    .qjb-form__row--photo { flex-direction: column-reverse !important; }
    .qjb-form__photo-wrap { align-self: center !important; }
    .qjb-form__file-row { flex-direction: column !important; }
}