/* Job application form on every job page (inc/job-apply.php). */
.sanam-apply {
    margin-top: clamp(36px, 5vw, 56px);
    padding: clamp(22px, 3.4vw, 40px);
    border: 1px solid #e3caab;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 40px rgb(41 31 30 / .06);
    scroll-margin-top: 100px;
}
.sanam-apply__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #662627; font: 400 18px/1.6 var(--sanam-font-accent); }
.sanam-apply__eyebrow::before { content: ""; width: 26px; height: 2px; background: #e4aa58; }
.sanam-apply h2 { margin: 4px 0 6px; color: #662627; font: 600 clamp(24px, 2.4vw, 30px)/1.4 var(--sanam-font-heading); }
.sanam-apply__lead { margin: 0 0 22px; color: #61524a; font-size: 15.5px; line-height: 1.9; }

.sanam-apply__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sanam-apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.sanam-apply__field { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.sanam-apply__field.is-wide { grid-column: 1 / -1; }
.sanam-apply__field > label:not(.sanam-apply__file),
.sanam-apply__label { color: #291f1e; font: 600 14.5px/1.5 var(--sanam-font-ui); }
.sanam-apply__field > label:not(.sanam-apply__file)::after,
.sanam-apply__label::after { content: " *"; color: #662627; }

.sanam-apply input[type="text"],
.sanam-apply input:not([type]),
.sanam-apply input[type="tel"],
.sanam-apply input[type="email"],
.sanam-apply input[type="url"] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid #e3caab;
    border-radius: 14px;
    background: #fcf8f3;
    color: #291f1e;
    font: 500 15px/1 var(--sanam-font-ui);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sanam-apply input::placeholder { color: #a69486; }
html[dir="rtl"] .sanam-apply input[dir="ltr"]:placeholder-shown { text-align: right; }
.sanam-apply input:focus { outline: none; border-color: #662627; background: #fff; box-shadow: 0 0 0 4px rgb(102 38 39 / .12); }
.sanam-apply input:user-invalid { border-color: #b32d2e; }

/* File boxes */
.sanam-apply__file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 14px 18px;
    border: 1.5px dashed #d9bd98;
    border-radius: 16px;
    background: #fcf8f3;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.sanam-apply__file::before {
    content: "";
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f3e6d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23662627' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0-4 4m4-4 4 4'/%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.sanam-apply__file:hover,
.sanam-apply__file.is-drag { border-color: #662627; background: #f8efe3; }
.sanam-apply__file:focus-within { border-color: #662627; box-shadow: 0 0 0 4px rgb(102 38 39 / .12); }
.sanam-apply__file.has-file { border-style: solid; border-color: #275e4c; background: #f1f6f3; }
.sanam-apply__file.has-file::before {
    background-color: #dcebe3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23275e4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.sanam-apply__file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sanam-apply__file-ui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sanam-apply__file-ui b { overflow: hidden; color: #291f1e; font: 600 15px/1.5 var(--sanam-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.sanam-apply__file-ui small { color: #86756a; font-size: 13px; }

.sanam-apply__or { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; color: #86756a; font-size: 13.5px; }
.sanam-apply__or::before,
.sanam-apply__or::after { content: ""; flex: 1; height: 1px; background: #eadbc8; }

.sanam-apply__msg { margin: 18px 0 0; min-height: 1.5em; font: 600 14.5px/1.7 var(--sanam-font-ui); }
.sanam-apply__msg:empty { display: none; }
.sanam-apply__msg.is-ok { color: #275e4c; }
.sanam-apply__msg.is-error { color: #b32d2e; }

.sanam-apply__progress { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: #f2e7d9; }
.sanam-apply__progress[hidden] { display: none; }
.sanam-apply__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #662627, #e4aa58); transition: width .2s ease; }
html[dir="rtl"] .sanam-apply__progress span { margin-inline-start: 0; }

.sanam-apply__btn { margin-top: 20px; border: 0; cursor: pointer; font-family: var(--sanam-font-ui); }
.sanam-apply__btn[disabled] { opacity: .7; cursor: progress; }
.sanam-apply__privacy { margin: 12px 0 0; color: #86756a; font-size: 13px; }

/* Sent */
.sanam-apply.is-done { text-align: center; }
.sanam-apply__done { padding: clamp(10px, 2vw, 20px) 0; }
.sanam-apply__done p { max-width: 520px; margin: 0 auto 8px; color: #61524a; line-height: 1.9; }
.sanam-apply__check {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #e5efe9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23275e4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.sanam-apply__no b { color: #662627; }

@media (max-width: 640px) {
    .sanam-apply { border-radius: 20px; }
    .sanam-apply__grid { grid-template-columns: 1fr; }
    .sanam-apply__btn { width: 100%; justify-content: center; }
}

/* General CV modal («أرسل سيرتك الذاتية» on /careers/). */
.sanam-cv-modal {
    width: min(680px, calc(100% - 24px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    overflow: visible;
}
.sanam-cv-modal::backdrop { background: rgb(41 31 30 / .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sanam-cv-modal[open] { animation: sanam-cv-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes sanam-cv-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
html.sanam-cv-open { overflow: hidden; }
.sanam-apply--modal {
    position: relative;
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 30px 70px rgb(20 6 8 / .35);
}
.sanam-cv-modal__close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e3caab;
    border-radius: 50%;
    background: #fcf8f3;
    color: #662627;
    font: 400 24px/1 sans-serif;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.sanam-cv-modal__close:hover, .sanam-cv-modal__close:focus-visible { background: #662627; color: #fff; outline: none; }
.sanam-apply--modal h2 { padding-inline-end: 48px; }
.sanam-apply__label.is-optional::after { content: none; }
.sanam-apply--modal.is-done { padding-top: clamp(40px, 6vw, 56px); }
@media (prefers-reduced-motion: reduce) { .sanam-cv-modal[open] { animation: none; } }
@media (max-width: 640px) {
    .sanam-cv-modal { width: calc(100% - 16px); }
    .sanam-apply--modal { padding: 22px 16px; }
}

.sanam-cv-modal, .sanam-cv-modal *, .sanam-cv-modal *::before, .sanam-cv-modal *::after { box-sizing: border-box; }
/* Modal: more room between the fields. */
.sanam-apply--modal .sanam-apply__grid { gap: 22px 18px; }
.sanam-apply--modal .sanam-apply__field { gap: 9px; }
.sanam-apply--modal .sanam-apply__lead { margin-bottom: 26px; }
.sanam-apply--modal .sanam-apply__or { margin-top: 8px; }
.sanam-apply--modal .sanam-apply__or + input { margin-top: 4px; }