.career-page{--career-ink:#192c34;--career-gold:#92743e;color:var(--career-ink);font-family:Tajawal,sans-serif}
.career-hero{background:linear-gradient(90deg,rgba(255,249,237,.23),transparent 65%),url('../assets/career-hero.jpg') center/cover no-repeat;min-height:750px}
.career-hero-inner{max-width:1536px;margin:auto;padding:70px 38px 40px;display:grid;grid-template-columns:minmax(380px,560px) minmax(0,1fr);gap:clamp(40px,8vw,130px);align-items:start}
.career-card{background:rgba(250,247,242,.94);border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:32px 26px 22px;box-shadow:0 12px 40px #14232b16;text-align:center;backdrop-filter:blur(8px)}
.career-card h1{font-weight:800;font-size:42px;margin:0}.career-rule{display:block;width:58px;height:5px;background:var(--career-gold);border-radius:4px;margin:18px auto}.career-card h2{font-size:25px;margin:0 0 10px}.career-card>p{font-size:17px;margin-bottom:28px}
.career-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;text-align:start}.career-fields label,.career-file-title{display:block;font-size:17px;margin-bottom:5px}.career-input{position:relative}.career-input input{width:100%;min-width:0;border:1px solid #c8c2b9;border-radius:12px;background:#ffffffb8;height:50px;padding:10px 15px;padding-inline-end:42px;color:var(--career-ink);text-align:start;font:inherit}.career-input i{position:absolute;inset-inline-end:15px;top:13px;color:#867345;pointer-events:none}.career-fields small{color:#6d675e;font-size:12px}.career-fields .text-danger{display:block;font-size:13px}.career-input input:focus{outline:2px solid var(--career-gold);outline-offset:2px}
.career-file-title{text-align:start;margin-top:18px}.career-drop{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:1px dashed #c5bcb0;outline:4px solid #ffffff70;border-radius:12px;min-height:94px;padding:10px;color:#76716a;background:#ffffff50}.career-drop>i{font-size:23px;color:var(--career-ink)}.career-drop small{font-size:13px}.career-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.career-drop:focus-within,.career-drop.dragging{outline:2px solid var(--career-gold);background:#fff8e9}#selected-file{overflow-wrap:anywhere;max-width:100%;font-size:13px;color:var(--career-ink)}
.career-card #submit-btn{width:100%;border:0;border-radius:14px;background:linear-gradient(100deg,#896b37,#a38750);color:white;min-height:58px;margin-top:20px;font:700 21px Tajawal,sans-serif;display:flex;align-items:center;justify-content:center;gap:12px}.career-card #submit-btn:hover{filter:brightness(.94)}.career-card #submit-btn:focus-visible{outline:3px solid var(--career-ink);outline-offset:3px}.career-card .loading-btn{pointer-events:none;opacity:.7}.career-card .loading-spinner{width:20px;height:20px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:career-spin .8s linear infinite}@keyframes career-spin{to{transform:rotate(360deg)}}
.career-intro{text-align:center;padding-top:0;text-shadow:0 1px 12px #fff8}.career-intro h2{font-size:clamp(40px,4.8vw,72px);font-weight:800;line-height:1.3;margin:0 0 22px}.career-intro h2 span{display:block;color:#826333;font-size:.72em;margin-top:8px}.career-intro p{font-size:23px;line-height:1.65;max-width:590px;margin:auto;background:radial-gradient(ellipse,#fff8,transparent 72%)}
.career-benefits{background:#f4f0e9;display:grid;grid-template-columns:repeat(4,1fr);padding:25px 30px 30px}.career-benefits>div{text-align:center;padding:0 15px;position:relative}.career-benefits>div+div:before{content:'';position:absolute;inset-inline-start:0;top:20px;bottom:12px;width:1px;background:#c8beae}.career-benefits i{font-size:42px;color:var(--career-gold)}.career-benefits h3{font-size:22px;font-weight:700;margin:8px 0}.career-benefits p{font-size:17px;color:#807b72;margin:0}
@media(min-width:1600px){.career-hero-inner{padding-top:85px;padding-bottom:60px}.career-hero{min-height:800px}}
@media(max-width:991px){.career-hero-inner{padding:32px 24px;gap:24px;grid-template-columns:1fr}.career-intro{grid-row:1;background:#fff9;border-radius:16px;padding:20px}.career-intro h2{font-size:42px}.career-intro p{font-size:19px}.career-card{width:100%;max-width:600px;margin:auto}.career-benefits{grid-template-columns:1fr 1fr;gap:25px}.career-benefits>div:before{display:none}.career-hero{background-position:60% center}}
@media(max-width:480px){.career-hero-inner{padding:20px 14px}.career-card{padding:24px 18px}.career-card h1{font-size:34px}.career-fields{grid-template-columns:1fr;gap:14px}.career-intro h2{font-size:34px}.career-intro p{font-size:17px}.career-benefits{padding:24px 12px}.career-benefits h3{font-size:18px}.career-benefits p{font-size:15px}.career-drop small{font-size:11px}}

.career-extra-fields{text-align:start;margin-top:8px}.career-card fieldset{min-width:0}.career-extra-fields label{margin-bottom:5px}.career-extra-fields .form-control,.career-extra-fields .form-select{min-height:50px;border-radius:12px;border-color:#c8c2b9;background-color:#ffffffb8}.career-card fieldset:disabled{opacity:.6}

/* Keep Arabic contact placeholders clear of the icons on the left. */
html[dir="rtl"] .career-page .career-input input:is([type="email"],[type="tel"]) { direction:rtl; text-align:right; padding-right:15px; padding-left:46px; }
html[dir="rtl"] .career-page .career-input input:is([type="email"],[type="tel"])::placeholder { direction:rtl; text-align:right; }
html[dir="rtl"] .career-page .career-input:has(input:is([type="email"],[type="tel"])) > i { left:15px; right:auto; }
/* Compact desktop layout keeps the image and benefits closer to the form. */
@media (min-width:992px) {
    .career-hero { min-height:0; }
    .career-hero-inner { padding:24px 38px; grid-template-columns:minmax(380px,520px) minmax(0,1fr); }
    .career-card { padding:20px 24px 18px; }
    .career-card h1 { font-size:34px; }
    .career-rule { height:4px; margin:10px auto; }
    .career-card h2 { font-size:21px; margin-bottom:6px; }
    .career-card>p { font-size:15px; margin-bottom:14px; }
    .career-fields { gap:10px 16px; }
    .career-fields label,.career-file-title,.career-extra-fields label { font-size:15px; margin-bottom:4px; }
    .career-input input { height:42px; font-size:15px; }
    .career-input i { top:10px; }
    .career-extra-fields { --bs-gutter-y:10px; margin-top:0; }
    .career-extra-fields .form-control,.career-extra-fields .form-select { min-height:42px; font-size:15px; }
    .career-file-title { margin-top:12px; }
    .career-drop { min-height:76px; padding:6px 10px; gap:1px; }
    .career-drop>i { font-size:20px; }
    .career-card #submit-btn { min-height:46px; margin-top:12px; font-size:18px; }
    .career-intro { padding-top:22px; }
    .career-intro h2 { font-size:clamp(38px,4.2vw,62px); margin-bottom:16px; }
    .career-intro p { font-size:20px; }
    .career-benefits { padding:16px 30px 18px; }
    .career-benefits i { font-size:32px; }
    .career-benefits h3 { font-size:20px; margin:5px 0; }
    .career-benefits p { font-size:15px; }
}