/* ────────────────────────────────────────────────────────
   JOB APPLICATION FORM  (/careers/apply/)
   The header, shell and back link come from single-career.css
   and the fields from contact.css, so the form reads as part
   of the job posting it was opened from. This file only lays
   out the form, its sections and the side note.
   ──────────────────────────────────────────────────────── */

/* A sand band instead of the job posting's white header with a rule: the
   form below is the white surface, and the band frames it. No eyebrow; the
   title says what the page is. */
.mbx-apply .mbx-career-detail__header {
    background: var(--mbx-sand);
    border-bottom: 0;
    padding: 140px 0 56px;
}

.mbx-apply .mbx-career-detail__back {
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .mbx-apply .mbx-career-detail__header {
        padding: 116px 0 40px;
    }
}

.mbx-apply__nowrap {
    white-space: nowrap;
}

.mbx-apply__lede {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-body);
    line-height: 1.7;
    margin: 20px 0 0;
    max-width: 40rem;
}

/* The form at its reading width with the note right beside it. A flexible
   first column pushed the note to the far edge and left a gap between. */
.mbx-apply__body {
    align-items: start;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, 46rem) 300px;
    padding-bottom: 112px;
    padding-top: 48px;
}

@media (max-width: 1024px) {
    .mbx-apply__body {
        gap: 48px;
        grid-template-columns: minmax(0, 1fr);
    }
}

.mbx-apply__main {
    min-width: 0;
}

.mbx-apply__panel .mbx-contact-required-note {
    margin-top: 0;
}

.mbx-apply__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Hidden from people, filled in only by bots. */
.mbx-apply__trap {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* ── SECTIONS ─────────────────────────────────────────── */
.mbx-apply__section {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.mbx-apply__section + .mbx-apply__section {
    border-top: 1px solid var(--mbx-line);
    padding-top: 28px;
}

/* Floated so the browser lays it out as an ordinary heading. Left alone, a
   legend is drawn across the fieldset's top border, and the divider above
   each section ran through its title. */
.mbx-apply__section legend {
    float: left;
    width: 100%;
    color: var(--mbx-ink);
    font-size: var(--mbx-type-label);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    padding: 0;
}

.mbx-apply__section > .mbx-field,
.mbx-apply__section > .mbx-field-row {
    clear: both;
    margin-top: 20px;
}

/* Clearance would swallow this margin; the legend's own margin spaces it. */
.mbx-apply__section > legend + * {
    margin-top: 0;
}

.mbx-field-hint {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-meta-sm);
    line-height: 1.5;
    margin: 0;
}

/* iOS centres the value of a date field and drops its height. */
.mbx-apply input[type="date"] {
    min-height: 52px;
    text-align: left;
}

.mbx-apply input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* ── CV ───────────────────────────────────────────────── */
.mbx-apply__file {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: var(--mbx-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mbx-type-body-sm);
    padding: 12px;
    width: 100%;
}

.mbx-apply__file::file-selector-button {
    background: var(--mbx-ink);
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mbx-type-meta);
    font-weight: 600;
    margin-right: 14px;
    padding: 10px 16px;
}

.mbx-apply__file:hover {
    border-color: var(--mbx-orange);
}

.mbx-apply__file:focus-visible {
    border-color: var(--mbx-orange);
    box-shadow: 0 0 0 3px rgba(240, 144, 5, 0.28);
    outline: 2px solid transparent;
}

.mbx-apply__file[aria-invalid="true"] {
    border-color: #dc2626;
    border-style: solid;
}

/* A tick-box question: the box beside its sentence, like the consent box. */
.mbx-apply__check {
    align-items: flex-start;
    color: var(--mbx-ink);
    cursor: pointer;
    display: flex;
    font-size: var(--mbx-type-meta);
    gap: 12px;
    line-height: 1.6;
}

.mbx-apply__check input {
    accent-color: var(--mbx-ink);
    flex: 0 0 auto;
    height: 20px;
    margin: 1px 0 0;
    width: 20px;
}

.mbx-apply__check input[aria-invalid="true"] {
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

/* ── SIDE NOTE ────────────────────────────────────────── */
/* A card, like the form panel beside it. */
.mbx-apply__aside {
    border: 1px solid var(--mbx-line);
    border-radius: 14px;
    padding: 28px;
}

@media (max-width: 1024px) {
    .mbx-apply__aside {
        max-width: 46rem;
    }
}

@media (max-width: 480px) {
    .mbx-apply__aside {
        padding: 20px;
    }
}

.mbx-apply__aside h2 {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-label);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.mbx-apply__steps {
    counter-reset: mbx-apply-step;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.mbx-apply__steps li {
    color: var(--mbx-muted);
    counter-increment: mbx-apply-step;
    font-size: var(--mbx-type-body-sm);
    line-height: 1.6;
    padding: 12px 0 12px 36px;
    position: relative;
}

.mbx-apply__steps li + li {
    border-top: 1px solid var(--mbx-line);
}

.mbx-apply__steps li::before {
    color: #a36309;
    content: counter(mbx-apply-step, decimal-leading-zero);
    font-size: var(--mbx-type-meta-sm);
    font-weight: 600;
    left: 0;
    position: absolute;
    top: 14px;
}

.mbx-apply__privacy {
    background: var(--mbx-sand, #f8f5ef);
    border-radius: 10px;
    color: var(--mbx-muted);
    font-size: var(--mbx-type-meta-sm);
    line-height: 1.6;
    margin: 18px 0 0;
    padding: 14px 16px;
}

/* ── DONE / NO OPENINGS ───────────────────────────────── */
.mbx-apply__done {
    border: 1px solid var(--mbx-line);
    border-radius: 14px;
    padding: 40px;
}

.mbx-apply__done:focus {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .mbx-apply__done {
        padding: 24px;
    }
}

.mbx-apply__done h2 {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-label);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.mbx-apply__done p {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-body);
    line-height: 1.7;
    margin: 14px 0 0;
}

.mbx-apply__done-link {
    border-bottom: 1px solid rgba(240, 144, 5, 0.5);
    color: var(--mbx-ink);
    display: inline-block;
    font-size: var(--mbx-type-body-sm);
    font-weight: 600;
    margin-top: 22px;
    padding-bottom: 3px;
    text-decoration: none;
}

.mbx-apply__done-link:hover {
    border-bottom-color: var(--mbx-orange);
    color: #a36309;
}

/* ── Rupiah amounts ───────────────────────────────────────
   "Rp" sits inside the field, before the number, and is not
   part of what is typed or sent. */
.mbx-money {
    position: relative;
}

.mbx-money__prefix {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-body-sm);
    left: 15px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mbx-money .mbx-input {
    font-variant-numeric: tabular-nums;
    padding-left: 40px;
}