@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700&display=swap');

#smp-jobs, #smp-jobs * { font-family: 'Tajawal', sans-serif; }

#smp-jobs :root { --smp-gold:#C1A24A; --smp-dark:#1E1E1E; --smp-mid:#3A3A3A; --bg:#F6F7F9; --light:#fffdfa; --border:#e9e9e9; }
#smp-jobs { background:var(--bg); color:var(--smp-dark); }
#smp-jobs .smp-wrap{ max-width:1024px; margin:38px auto; padding:0 16px; }

#smp-jobs .smp-status{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:0 0 22px 0; }
#smp-jobs .smp-dot{ width:10px; height:10px; border-radius:50%; background:var(--smp-gold); }
#smp-jobs .smp-label{ font-weight:700; color:var(--smp-mid); }
#smp-jobs .smp-countdown{ margin-inline-start:auto; display:flex; gap:8px; align-items:center; font-weight:700; background:linear-gradient(90deg,#fff,#fff5da); border:1px dashed var(--smp-gold); padding:8px 10px; border-radius:8px; color:#2b2b2b; }
#smp-jobs .smp-badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:var(--smp-gold); color:#111; font-weight:700; font-size:12px; }
#smp-jobs .smp-status.closed{ background:#1E1E1E; color:#fff; border-color:#000; }
#smp-jobs .smp-status.closed .smp-label{ color:#fff }
#smp-jobs .smp-status.closed .smp-countdown{ display:none; }

#smp-jobs .smp-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ #smp-jobs .smp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

#smp-jobs .smp-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:14px; min-height:210px; }
#smp-jobs .smp-title{ font-weight:700; font-size:18px; line-height:1.4; color:var(--smp-dark); border-inline-start:4px solid var(--smp-gold); padding-inline-start:10px; min-height:52px; display:flex; align-items:center; }
#smp-jobs .smp-meta{ color:#555; font-size:14px; }

#smp-jobs .smp-btn{ appearance:none; border-radius:10px; cursor:pointer; font-weight:700; padding:11px 14px; transition:transform .08s ease, opacity .2s ease, background .2s; width:100%; text-align:center; border:1px solid transparent; }
#smp-jobs .smp-btn:focus{ outline:2px solid rgba(193,162,74,.35); outline-offset:2px }
#smp-jobs .smp-btn[disabled]{ cursor:not-allowed; opacity:.55 }
#smp-jobs .smp-btn-primary{ background:var(--smp-gold); color:#111; border-color:var(--smp-gold); }
#smp-jobs .smp-btn-primary:hover{ filter:brightness(0.97) }
#smp-jobs .smp-btn-light{ background:var(--light); color:var(--smp-dark); border:1px solid #e6d9a8; }
#smp-jobs .smp-btn-light:hover{ background:#fffef3 }
#smp-jobs .smp-actions{ display:flex; gap:10px; flex-direction:column }
@media (min-width:420px){ #smp-jobs .smp-actions{ flex-direction:row } }

#smp-jobs .smp-modal{ position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.45); z-index:10000; padding:20px; }
#smp-jobs .smp-modal.show{ display:flex }
#smp-jobs .smp-modal__dialog{ width:min(880px,100%); background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.2); transform:translateY(20px); }
#smp-jobs .smp-modal__hd{ background:linear-gradient(90deg,#fff,#fff5da); padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
#smp-jobs .smp-bar{ width:4px; height:20px; background:var(--smp-gold); border-radius:2px }
#smp-jobs .smp-modal__title{ font-weight:700 }
#smp-jobs .smp-modal__close{ margin-inline-start:auto; border:none; background:transparent; cursor:pointer; font-weight:700; color:#555; }
#smp-jobs .smp-modal__bd{ padding:16px 16px 6px; line-height:1.9; color:#333 }
#smp-jobs .smp-modal__grid{ display:grid; gap:10px; grid-template-columns:1fr }
@media (min-width:680px){ #smp-jobs .smp-modal__grid{ grid-template-columns:1fr 1fr } }
#smp-jobs .smp-kv{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px }
#smp-jobs .smp-ul{ margin:8px 0 0 0; padding:0 18px }