/* ---------- Layout basics ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
body { font-family: var(--font-body); }
[dir="rtl"] body { font-family: 'Tajawal', var(--font-body); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 1.25rem; padding: 16px 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--fg); padding: .3rem 0; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; font-weight: 700; font-family: var(--font-heading); }
.main-nav { display: flex; gap: 1.1rem; margin-inline-start: .5rem; flex: 1; }
.main-nav a { color: var(--fg); font-weight: 500; padding: .6rem .3rem; }
.main-nav a.muted-link { color: var(--muted); }
.nav-cta { white-space: nowrap; padding: .75rem 1.2rem; }
@media (max-width: 720px) { .main-nav { display: none; } .nav-cta { font-size: .85rem; padding: .65rem .9rem; } }

/* ---------- Hero / search ---------- */
.hero { padding: 48px 0 28px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: #0a6b60; border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 700; margin-bottom: 1rem; }
.hero h1 { max-width: 820px; }
.hero p.lead { max-width: 640px; color: var(--muted); font-size: 1.1rem; }

.search-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 20px; margin-top: 1.75rem; }
.search-grid { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .75rem; }
@media (max-width: 860px) { .search-grid { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: .68rem .85rem; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
textarea { resize: vertical; min-height: 120px; }

.poster-toggle { display: flex; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.poster-toggle a { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); font-weight: 600; font-size: .9rem; }
.poster-toggle a.active { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }

/* ---------- Stat strip ---------- */
.stat-strip { display: flex; gap: 2.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.stat-strip .stat b { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--brand); }
.stat-strip .stat span { color: var(--muted); font-size: .85rem; }

/* ---------- Ads grid ---------- */
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; margin: 2.5rem 0 1.1rem; gap: 1rem; flex-wrap: wrap; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.ad-card { padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ad-card .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ad-card h3 { font-size: 1.08rem; margin: 0; }
.ad-card h3 a { color: var(--fg); }
.ad-card p.desc { color: var(--muted); font-size: .92rem; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-card .meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.ad-card .salary { font-weight: 700; color: #0a6b60; }

.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.badge-employer { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.badge-seeker { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pill { font-size: .76rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem; }

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.empty-state .big { font-size: 2.6rem; margin-bottom: .5rem; }

/* ---------- Ad detail ---------- */
.ad-detail { max-width: 760px; margin: 2.5rem auto; padding: 2rem; }
.ad-detail .title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.contact-box { margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem; }
.contact-box .btn { flex: 1; justify-content: center; min-width: 160px; }
.btn-whatsapp { background: #128C4A; color: #fff; }
.breadcrumb { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; display: block; }
.breadcrumb a { color: var(--muted); }

/* ---------- Forms (post ad) ---------- */
.form-page { max-width: 680px; margin: 2.5rem auto; padding: 2.2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.alert { border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1.2rem; }
.alert-error { background: color-mix(in srgb, #dc2626 10%, transparent); color: #b91c1c; border: 1px solid color-mix(in srgb, #dc2626 25%, transparent); }
.alert-success { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.radio-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-card { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.radio-card:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.radio-card input { width: auto; }

/* ---------- Success page ---------- */
.success-page { max-width: 560px; margin: 4rem auto; text-align: center; padding: 2.5rem; }
.success-icon { font-size: 3rem; }

/* ---------- Admin ---------- */
.admin-shell { max-width: 1120px; margin: 2rem auto; padding: 0 20px; }
.admin-tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.admin-tabs a { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); font-size: .9rem; font-weight: 600; }
.admin-tabs a.active { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
table.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
table.admin-table th, table.admin-table td { padding: .75rem .9rem; text-align: right; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; }
table.admin-table th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: .8rem; }
table.admin-table tr:last-child td { border-bottom: none; }
.admin-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-actions button { border: 1px solid var(--line); background: var(--surface); padding: .3rem .7rem; border-radius: 8px; font-size: .78rem; cursor: pointer; font-weight: 600; }
.admin-actions .approve { color: #15803d; border-color: #86efac; }
.admin-actions .reject { color: #b45309; border-color: #fcd34d; }
.admin-actions .delete { color: #b91c1c; border-color: #fca5a5; }
.login-card { max-width: 380px; margin: 4.5rem auto; padding: 2.2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { margin-bottom: .6rem; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { color: var(--muted); font-size: .9rem; padding: .3rem 0; display: inline-block; }
.small { font-size: .85rem; }