/* نماذج صلة المرحلية — على نمط «اعرض عقارك» في شيخ العقار */
@font-face{font-family:'Thmanyah Sans';src:url('fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('fonts/thmanyahsans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --brand:#3495BA; --brand-strong:#287896; --brand-hover:#226A85;
  --brand-soft:rgba(52,149,186,.1); --brand-focus:rgba(52,149,186,.2);
  --ink:#223636; --muted:#546471; --line:rgba(221,221,221,.753); --bg:#F3F6F8;
  --danger:#c0392b; --ok:#16a34a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Thmanyah Sans',Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.6;direction:rtl;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-feature-settings:"ss01" 1,"calt" 1,"liga" 1,"kern" 1;font-kerning:normal}
.wrap{width:600px;max-width:calc(100% - 32px);margin:0 auto;padding:40px 0 120px}
@media(min-width:700px){.wrap{padding-top:56px}}

.brand-head{text-align:center;margin-bottom:28px}
.brand-head img{height:64px;width:auto}
.brand-head span{display:block;font-size:13px;color:var(--muted);margin-top:4px}

/* شريط التقدّم المقسّم */
.progress{margin:0 0 28px}
.progress-row{display:flex;align-items:center;gap:12px}
.segbar{flex:1;display:flex;gap:6px}
.segbar span{flex:1;height:7px;border-radius:20px;background:var(--bg);position:relative;overflow:hidden}
.segbar span::after{content:"";position:absolute;inset:0;width:0;border-radius:20px;transition:width .4s ease;
  background:linear-gradient(to left,
    color-mix(in srgb, var(--brand), var(--brand-strong) calc((var(--i,1) - 1) / var(--n,1) * 100%)),
    color-mix(in srgb, var(--brand), var(--brand-strong) calc(var(--i,1) / var(--n,1) * 100%)))}
.segbar span.on::after{width:100%}
.pnext{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.3s ease}
.pnext.fin{border-color:var(--brand);background:var(--brand);color:#fff}
.pnext svg{width:20px;height:20px}
.progress .label{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.progress .cur{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.progress .cur svg{width:20px;height:20px;color:var(--brand)}
.progress #pstep{font-size:13px;color:var(--muted)}

h1.title{font-family:'Thmanyah Serif Display',Georgia,serif;font-size:24px;font-weight:700;text-align:center;margin-bottom:8px;line-height:1.5}
.subtitle{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:28px;line-height:1.7}
.step{display:none}
.step.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.field{margin-bottom:20px;position:relative}
.field>label.q,.field>.q{display:block;font-size:15px;font-weight:500;margin-bottom:8px}
.req{color:var(--danger);margin-inline-start:3px}
.note{font-size:12.5px;color:var(--muted);margin:-2px 0 8px}
.input-wrapper{position:relative}
.input-wrapper .icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.input-wrapper .icon svg{width:18px;height:18px}
input,select,textarea{width:100%;padding:12px 45px 12px 16px;border:1px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .3s,box-shadow .3s}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23546471' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:left 15px center;padding-left:42px}
textarea{padding:14px 16px;min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8f9a9a}
input:focus,select:focus,textarea:focus{border-color:var(--brand-strong);outline:none;box-shadow:0 0 0 3px var(--brand-focus)}
.phone{display:flex;gap:8px;direction:ltr}
.phone .cc{flex:none;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-weight:500}
.phone input{padding:12px 16px;text-align:left}
.field.err input,.field.err select,.field.err .combo-control,.field.err .chips{border-color:var(--danger)}
.field.err>.q{color:var(--danger)}
.field-error{display:flex;align-items:center;gap:5px;color:var(--danger);font-size:12.5px;font-weight:500;margin-top:7px}

/* الرقاقات متعددة الاختيار */
.chips{display:flex;flex-wrap:wrap;gap:8px;border:1px solid transparent;border-radius:14px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14.5px;cursor:pointer;transition:.2s ease;user-select:none}
.chip span:hover{border-color:var(--brand)}
.chip input:checked+span{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff;font-weight:700}
.chip input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-focus)}
.chip .mark{display:none}
.chip input:checked+span .mark{display:inline-flex}
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:520px){.days{grid-template-columns:repeat(6,minmax(0,1fr))}}
.days .chip span{width:100%;justify-content:center;border-radius:12px;padding:10px 4px}

/* الاختيار المقطّع */
.seg{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:15px;cursor:pointer;transition:.2s ease;text-align:center;user-select:none}
.seg span:hover{border-color:var(--brand)}
.seg input:checked+span{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff;font-weight:700}
.seg input:checked+span::before{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat}
.seg input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-focus)}
.field.err .seg span{border-color:var(--danger)}

/* المهارات المطلوبة عند الشركة: إلزامي / مفضّل */
.req-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.req-list:empty{display:none}
.req-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--brand);background:var(--brand-soft);border-radius:12px;font-weight:500}
.req-row button{border:none;font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer;min-height:34px}
.req-row button.must{background:var(--brand-strong);color:#fff}
.req-row button.pref{background:#fdf1e3;color:#9a5a12}

/* زر يفتح ورقة الاختيار */
.combo-control{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;color:var(--ink);text-align:right;min-height:48px}
.combo-control .icon{display:flex;color:var(--muted)}
.combo-control .icon svg{width:18px;height:18px}
.combo-control .val{flex:1}
.combo-control .val.placeholder{color:#8f9a9a}
.combo-control:focus-visible{outline:none;border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-focus)}

.sheet-overlay{position:fixed;inset:0;z-index:60;background:rgba(34,54,54,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.sheet-overlay.open{opacity:1;visibility:visible}
.sheet{width:100%;max-width:600px;background:#fff;border-radius:26px 26px 0 0;max-height:82vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.sheet-overlay.open .sheet{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px;border-bottom:1px solid #eef1f2}
.sheet-head h3{font-size:20px;font-weight:700}
.sheet-close{width:44px;height:44px;border:none;background:#f4f6f7;border-radius:50%;cursor:pointer;font-size:20px;color:var(--ink)}
.sheet-search{padding:14px 20px 6px}
.sheet-search input{padding:12px 16px;font-size:16px}
.sheet-list{overflow-y:auto;padding:8px 16px calc(env(safe-area-inset-bottom) + 20px)}
.opt{display:block;width:100%;border:none;background:none;font-family:inherit;text-align:center;padding:15px;font-size:18px;color:var(--ink);border-radius:16px;cursor:pointer}
.opt:hover{background:var(--brand-soft)}
.opt.selected{background:#f2f5f6;color:var(--brand-strong);font-weight:700}

/* رمز التحقق */
.otp{display:flex;gap:8px;justify-content:center;direction:ltr}
.otp input{width:46px;height:56px;padding:0;text-align:center;font-size:22px;font-weight:700}
@media(max-width:380px){.otp input{width:40px;height:50px}}
.otp-hint{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}
.otp-hint b{color:var(--brand-strong)}
.link-btn{border:none;background:none;color:var(--brand-strong);font-family:inherit;font-weight:700;cursor:pointer;font-size:13px}

.agree{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer}
.agree input{width:20px;height:20px;flex:none;margin-top:2px;padding:0;accent-color:var(--brand)}
.agree span{font-size:14.5px;line-height:1.7}
.tip{display:flex;gap:8px;align-items:flex-start;background:var(--brand-soft);border:1px solid var(--brand-focus);color:var(--brand-strong);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:500;line-height:1.7;margin-bottom:18px}
.tip svg{width:18px;height:18px;flex:none;margin-top:2px}

/* أزرار التنقّل: لاصقة أسفل الشاشة على الجوال */
.nav{position:sticky;bottom:0;display:flex;gap:12px;margin-top:28px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 75%,rgba(255,255,255,0))}
/* أثناء الكتابة على الجوال: لوحة المفاتيح ترفع الشريط اللاصق فيغطي الحقل،
   فيعود الشريط إلى مكانه الطبيعي حتى يُغلق المستخدم لوحة المفاتيح. */
body.typing .nav{position:static;background:none}
input,select,textarea,.combo-control{scroll-margin-top:90px;scroll-margin-bottom:140px}
.btn{flex:1;border:none;border-radius:12px;padding:14px;min-height:50px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--brand-strong);color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);flex:0 0 auto;padding:14px 20px}
.btn-ghost:hover{background:var(--bg)}

.done{text-align:center;padding:40px 22px;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.28);border-radius:18px}
.done svg{width:72px;height:72px;color:var(--ok)}
.done h2{font-family:'Thmanyah Serif Display',Georgia,serif;font-size:22px;margin:12px 0 8px;color:#15803d}
.done p{color:#3f5252;font-size:14.5px;line-height:1.8}
.done .btn{margin-top:20px;display:inline-flex;flex:none;padding:13px 24px}
.summary{margin-top:18px;text-align:right;background:#fff;border-radius:12px;padding:14px 16px;font-size:13.5px;color:#3f5252;line-height:1.9}