/* Binaaline market — Figma "03 · بناء لاين / نظام التصميم" (V3).
   Tokens and components taken from the V3 design system: V3/Header, V3/Footer, V3/ArticleCard, V3/Button (Default,
   Hover, Disabled), page intro and section pattern of V3/Search/Results and V3/Join. Fonts come from the site's own
   /assets/css/fonts.css (Readex Pro, self-hosted). Logical properties keep RTL and LTR correct. */
:root{
  --paper:#f8f7f3;--forest:#153b32;--sand:#e3d8bd;--soft:#eeeee7;--muted:#69736c;--white:#fff;
  --line:#dcd9cf;--danger:#9b2c2c;--ok:#256b45;--warn:#7a5a12;
  --space-12:12px;--space-16:16px;--space-24:24px;--space-32:32px;--space-56:56px;--space-80:80px;
  --ff:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --gutter:var(--space-80);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff);font-size:16px;line-height:1.65;color:var(--forest);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--forest);color:var(--white);padding:8px 14px;z-index:99}
.skip:focus{top:8px}
.wrap{width:100%;max-width:calc(1280px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* Type scale: Binaaline/V3 H1 38 · H2 28 · H3 21 · Body 16 · Small 13 · Label 11 (Readex Pro, 1.65) */
h1,h2,h3{font-weight:500;line-height:1.65;color:var(--forest)}
h1{font-size:38px}
h2{font-size:28px;margin-block:var(--space-32) var(--space-16)}
h3,.mk-h3{font-size:21px;font-weight:500;margin-block:0 var(--space-12)}
.small,small{font-size:13px}
.label{font-size:11px;color:var(--muted)}
.muted{color:var(--muted)}
p+p{margin-top:var(--space-12)}

/* Test banner (not part of the design: marks the trial copy) */
.mk-envbar{background:var(--sand);color:var(--forest);text-align:center;font-size:13px;padding:6px 12px}

/* V3/Header */
.v3-header{background:var(--paper)}
.v3-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);padding-block:var(--space-24)}
.v3-brand{font-size:21px;font-weight:500;text-decoration:none;white-space:nowrap}
.v3-brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.2}
.v3-nav{display:flex;align-items:center;gap:var(--space-24);font-size:13px;flex-wrap:wrap}
.v3-nav a{text-decoration:none}
.v3-nav a:hover,.v3-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.v3-actions{display:flex;align-items:center;gap:var(--space-12);font-size:13px}
.v3-actions form{display:inline}
.v3-menu{display:none}
.v3-menu>summary{list-style:none;cursor:pointer;font-size:13px;padding:6px 0}
.v3-menu>summary::-webkit-details-marker{display:none}

/* Page intro (paper) and content section (white) — V3/Search/Results, V3/Join */
.v3-intro .wrap{display:flex;flex-direction:column;gap:var(--space-24);padding-block:var(--space-56)}
.v3-crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--muted)}
.v3-crumbs li+li::before{content:"/";margin-inline-end:6px}
.v3-crumbs a{text-decoration:none}
.v3-crumbs a:hover{text-decoration:underline}
.v3-eyebrow{font-size:11px;color:var(--muted)}
.v3-lead{font-size:16px;color:var(--muted);max-width:860px}
.v3-sec{background:var(--white)}
.v3-sec>.wrap{display:flex;flex-direction:column;gap:var(--space-32);padding-block:var(--space-56)}
.v3-sec>.wrap>*{margin-block:0}

/* V3/Button: Default / Hover (same) / Disabled. Secondary buttons use the filter-chip colours. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);padding:var(--space-16) var(--space-24);min-width:160px;
  background:var(--forest);color:var(--white);border:0;font-size:13px;line-height:1.65;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--forest)}
.btn[disabled],.btn.is-disabled{background:var(--soft);color:var(--muted);cursor:not-allowed}
.btn-soft{background:var(--soft);color:var(--forest)}
.btn-soft:hover{background:var(--sand)}
.btn-small{padding:8px 14px;min-width:0}
.mk-link{background:none;border:0;padding:0;color:var(--forest);text-decoration:underline;cursor:pointer;font-size:13px}
.mk-link.danger{color:var(--danger)}

/* Filter chips (Topic filters) */
.v3-chips{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.v3-chip{display:inline-block;background:var(--soft);padding:var(--space-12);font-size:13px;text-decoration:none;text-align:center;min-width:88px}
.v3-chip[aria-current],.v3-chip.is-on{background:var(--forest);color:var(--white)}

/* V3/ArticleCard used for products: photograph, label, title, description, link line */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-24)}
.v3-card{background:var(--white);display:flex;flex-direction:column;text-decoration:none}
.v3-card-photo{aspect-ratio:410/245;background:var(--soft);overflow:hidden}
.v3-card-photo img{width:100%;height:100%;object-fit:cover}
.v3-card-photo .mk-noimg{display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;color:var(--muted)}
.v3-card-body{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-24)}
.v3-card-body h3{margin:0;font-size:21px}
.v3-card-body h3 a{text-decoration:none}
.v3-card-desc{font-size:13px;color:var(--muted)}
.v3-card-more{font-size:13px;text-decoration:none}
.v3-card-more:hover,.v3-card-body h3 a:hover{text-decoration:underline}
.mk-price{font-weight:500;color:var(--forest)}
.mk-price small{font-weight:400;color:var(--muted);white-space:nowrap}
.mk-bigprice{font-size:28px}

/* Market pages */
.mk-search{display:flex;flex-wrap:wrap;gap:var(--space-12);max-width:900px}
.mk-search input{flex:1 1 280px}
.mk-search select{flex:0 1 220px}
.mk-note{background:var(--paper);border-inline-start:3px solid var(--sand);padding:var(--space-12) var(--space-16);font-size:13px;color:var(--muted)}
.mk-secs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-24)}
.mk-sec{background:var(--paper);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-12)}
.mk-sec-h{font-size:21px;font-weight:500;text-decoration:none}
.mk-sec span{font-size:13px;color:var(--muted)}
.mk-sec span a{text-decoration:none}
.mk-sec span a:hover,.mk-sec-h:hover{text-decoration:underline}
.mk-guide,.mk-guide-line{font-size:13px}
.mk-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-32);align-items:start}
.mk-fbox>summary{cursor:pointer;background:var(--soft);padding:var(--space-12) var(--space-16);font-size:13px;list-style:none}
.mk-fbox>summary::-webkit-details-marker{display:none}
.mk-filters{display:flex;flex-direction:column;gap:6px;background:var(--paper);padding:var(--space-24)}
.mk-filters label{font-size:13px;color:var(--muted);margin-top:6px}
.mk-filters .btn{margin-top:var(--space-16)}
.mk-product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-32);align-items:start}
.mk-product h2{margin-top:0}
.mk-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-12)}
.mk-gallery a:first-child{grid-column:1/-1}
.mk-gallery img{width:100%;height:auto}
.mk-contacts{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.mk-panel{background:var(--paper);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-16)}
.mk-branches{padding-inline-start:20px;font-size:13px}
.mk-meta{font-size:13px;color:var(--muted)}
.mk-meta .ok{color:var(--ok)}
.mk-meta .no{color:var(--danger)}
.tag{display:inline-block;background:var(--soft);font-size:11px;padding:2px 10px;color:var(--forest)}
.tag.ok{background:#e1eee5;color:var(--ok)}
.tag.red{background:#f4e1df;color:var(--danger)}
.tag.warn{background:#f3ecd7;color:var(--warn)}
.tag.gray{color:var(--muted)}
.mk-text{max-width:860px}

/* Forms */
.mk-form{display:flex;flex-direction:column;gap:6px;max-width:620px}
.mk-form.mk-wide{max-width:960px}
.mk-form label,.mk-form legend{font-size:13px;color:var(--muted)}
.mk-form label{margin-top:var(--space-12)}
.mk-form .btn{margin-top:var(--space-24);align-self:flex-start}
.mk-form fieldset{border:0;border-top:1px solid var(--line);padding:var(--space-16) 0 0;margin-top:var(--space-16);min-width:0}
.mk-form legend{font-size:21px;font-weight:500;color:var(--forest);padding:0}
.mk input:not([type=checkbox]):not([type=radio]):not([type=file]),.mk select,.mk textarea{width:100%;background:var(--white);border:1px solid var(--line);padding:var(--space-12);font-size:16px;line-height:1.5;border-radius:0}
.mk .v3-sec input:not([type=checkbox]),.mk .v3-sec select,.mk .v3-sec textarea{background:var(--paper)}
.mk input:focus,.mk select:focus,.mk textarea:focus{outline:3px solid var(--sand);outline-offset:0}
.mk-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--forest)!important}
.mk-check input{margin-top:5px}
.mk-hint{font-size:13px;color:var(--muted)}
.mk-err{font-size:13px;color:var(--danger)}
.mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-24)}
.mk-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-24)}
.mk-two>div,.mk-three>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.mk input[type=file]{max-width:100%;min-width:0;font-size:13px}
.form-msg{padding:var(--space-12) var(--space-16);font-size:13px}
.form-msg.ok{background:#e1eee5;color:var(--ok)}
.form-msg.err{background:#f4e1df;color:var(--danger)}
.form-msg.warn{background:#f3ecd7;color:var(--warn)}
.mk-inline-form{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:flex-end}
.mk-inline-form>div{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.mk-inline-form input,.mk-inline-form select{width:auto!important;min-width:150px}
.mk-actions-bar{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.mk-actions-bar form{display:inline}
.mk-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-32)}

/* Tables (dashboards) */
.table-wrap{overflow-x:auto}
.mk-table{width:100%;border-collapse:collapse;font-size:13px}
.mk-table th,.mk-table td{border-bottom:1px solid var(--line);padding:var(--space-12);text-align:start;vertical-align:top}
.mk-table thead th{font-size:11px;color:var(--muted);font-weight:400}
.mk-table tbody th{font-weight:400;color:var(--muted);width:35%}
.mk-actions{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:center}
.mk-actions form{display:inline}

/* Dashboard menu and stats */
.mk-dnav{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.mk-dnav a{background:var(--soft);padding:var(--space-12);font-size:13px;text-decoration:none}
.mk-dnav a[aria-current]{background:var(--forest);color:var(--white)}
.mk-stats{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-24)}
.mk-stats li{background:var(--paper);padding:var(--space-24);font-size:13px;color:var(--muted)}
.mk-stats b{display:block;font-size:28px;font-weight:500;color:var(--forest)}
.mk-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.mk-thumbs figure{display:flex;flex-direction:column;gap:6px;align-items:center}
.mk-thumbs img{width:160px;height:120px;object-fit:cover}
.mk-perms{display:flex;flex-direction:column;gap:2px}
.mk-list{padding-inline-start:20px;font-size:13px}
.mk-pager{display:flex;gap:var(--space-12);align-items:center;justify-content:center;font-size:13px}
.mk-pager a{background:var(--soft);padding:8px 16px;text-decoration:none}
.mk-check-ok{color:var(--ok)}.mk-check-warn{color:var(--warn)}.mk-check-fail{color:var(--danger)}

/* V3/Footer */
.v3-footer{background:var(--forest);color:var(--paper)}
.v3-footer .wrap{display:flex;flex-direction:column;gap:var(--space-24);padding-block:36px}
.v3-footer-brand{font-size:28px;font-weight:500;color:var(--paper)}
.v3-footer-tag{font-size:16px;color:var(--sand)}
.v3-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-24);font-size:13px}
.v3-footer nav a{text-decoration:none;color:var(--paper)}
.v3-footer nav a:hover{text-decoration:underline}
.v3-footer-note{font-size:13px;color:var(--sand)}

/* Two entry points on the market home (visitors / businesses): V3 section cards on paper */
.mk-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)}
.mk-entry{background:var(--paper);padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-16)}
.mk-entry h2{margin:0;font-size:28px}
.mk-entry-biz{background:var(--forest);color:var(--white)}
.mk-entry-biz h2,.mk-entry-biz .label,.mk-entry-biz .mk-entry-text{color:var(--white)}
.mk-entry-biz .label{color:var(--sand)}
.mk-entry-biz .btn{background:var(--sand);color:var(--forest)}
.mk-entry-biz .btn-soft{background:transparent;color:var(--white);outline:1px solid var(--sand)}
.mk-entry-text{font-size:16px;color:var(--muted);max-width:620px}
.mk-who{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mk-who li{font-size:13px;padding:4px 10px;border:1px solid var(--sand)}

/* Directory cards, badges and actions */
.mk-results{display:flex;flex-direction:column;gap:var(--space-16)}
.mk-badges{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.mk-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.mk-org-card .v3-card-body{flex:1}
.mk-verif{list-style:none;display:flex;flex-direction:column;gap:var(--space-12)}
.mk-verif li{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:center}
.mk-branch-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-12);font-size:13px}
.mk-branch-list .mk-actions{margin-inline-start:var(--space-12)}

/* Join page: requirements table, steps, plans */
.mk-req td{font-size:13px;white-space:nowrap}
.mk-req td.lvl-required{color:var(--forest);font-weight:500}
.mk-req td.lvl-premises,.mk-req td.lvl-declared{color:var(--warn)}
.mk-req td.lvl-optional{color:var(--muted)}
.mk-steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-24)}
.mk-steps li{counter-increment:st;background:var(--paper);padding:var(--space-24);display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.mk-steps li::before{content:counter(st);font-size:28px;font-weight:500;color:var(--forest)}
.mk-steps b{font-size:16px;font-weight:500;color:var(--forest)}
.mk-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.mk-plan{background:var(--paper);padding:var(--space-24);display:flex;flex-direction:column;gap:6px}
.mk-plan-price{font-size:28px;font-weight:500}
.mk-plan-open .mk-plan-price{font-size:16px;color:var(--muted)}

/* Application and review */
.mk-status{display:flex;flex-direction:column;gap:var(--space-12)}
.mk-missing{padding-inline-start:20px;font-size:13px;color:var(--warn)}
.mk-act-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-12)}
.mk-act{background:var(--paper);padding:var(--space-12) var(--space-16);display:flex;flex-direction:column;gap:4px}
.mk-act.mk-check{flex-direction:row}
.mk-act-docs{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.mk-q{font-size:13px;color:var(--muted);margin-top:var(--space-12)}
.mk-doc{border-top:1px solid var(--line);padding-block:var(--space-12);display:flex;flex-direction:column;gap:6px;font-size:13px}
.mk-doc:first-child{border-top:0;padding-top:0}
.mk-form fieldset[disabled]{opacity:.75}

@media (max-width:1100px){:root{--gutter:var(--space-32)}}
@media (max-width:900px){
  .mk-layout,.mk-product,.mk-cols,.mk-entries{grid-template-columns:1fr}
  .mk-steps,.mk-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* V3/Header/Mobile and V3/Footer/Mobile: 24 px gutters, menu behind "القائمة ☰" */
@media (max-width:760px){
  :root{--gutter:var(--space-24)}
  h1{font-size:28px}
  h2{font-size:21px}
  .v3-nav-wide{display:none}
  .v3-header .wrap{flex-wrap:wrap;gap:var(--space-12)}
  .v3-actions{flex-wrap:wrap;gap:8px var(--space-12)}
  .v3-menu{display:block;position:relative}
  .v3-menu[open] .v3-menu-panel{position:absolute;inset-inline-end:0;top:100%;z-index:20;background:var(--paper);border:1px solid var(--line);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-12);min-width:220px;font-size:13px}
  .v3-menu-panel a{text-decoration:none}
  .v3-intro .wrap,.v3-sec>.wrap{padding-block:var(--space-32)}
  .mk-two,.mk-three{grid-template-columns:1fr}
  .mk-grid{grid-template-columns:1fr}
  .v3-footer nav{flex-direction:column;gap:var(--space-12)}
  .btn{min-width:0}
  .mk-search select,.mk-search .btn{flex:1 1 100%}
  .mk-steps,.mk-plans{grid-template-columns:1fr}
  .mk-entry{padding:var(--space-24)}
  .mk-entry h2{font-size:21px}
}