/* الكريم للسيارات — خط النظام العربي (بلا تحميل خطوط)، أزرار كبيرة، هوامش مريحة */
:root {
  --bg: #f6f7f4; --card: #ffffff; --ink: #1a2420; --muted: #5b6862; --line: #d9dfd9;
  --brand: #14532d; --brand-ink: #ffffff; --accent: #0f766e; --warn: #92400e; --warn-bg: #fef3c7;
  --err: #991b1b; --err-bg: #fee2e2; --ok: #166534; --ok-bg: #dcfce7;
}
* { box-sizing: border-box; }
/* خاصية hidden يجب أن تغلب أي display نضبطه (زر الصوت يبقى مخفياً ما لم يدعمه المتصفح) */
[hidden] { display: none !important; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); line-height: 1.75;
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Droid Arabic Naskh", Arial, sans-serif;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #f59e0b; outline-offset: 2px;
}
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 10; }
.skip:focus { inset-inline-start: .5rem; }
.top { background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.top a { color: var(--brand-ink); text-decoration: none; }
.top .brand { font-weight: 700; font-size: 1.15rem; }
.top nav { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.top nav a { padding: .35rem .2rem; }
.top .muted { color: #d1fae5; }
main { max-width: 46rem; margin: 0 auto; padding: 1rem; }
body.staff main { max-width: 68rem; }
h1 { font-size: 1.45rem; margin: .6rem 0 1rem; line-height: 1.4; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.unknown { color: var(--muted); font-style: normal; }
.foot { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--muted); font-size: .9rem; }
.demo-banner { background: var(--warn-bg); color: var(--warn); text-align: center; padding: .5rem 1rem; font-weight: 600; border-bottom: 2px solid #f59e0b; }
.offline { background: #1f2937; color: #fff; text-align: center; padding: .5rem 1rem; }
.flash { padding: .7rem 1rem; border-radius: .5rem; margin: .5rem 0 1rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--err-bg); color: var(--err); }

.btn, button.btn {
  display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: .6rem; padding: .75rem 1.2rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 48px; text-align: center;
}
.btn.secondary { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.btn.danger { background: var(--err); }
.btn.small { padding: .35rem .8rem; min-height: 38px; font-size: .9rem; }
.btn.big { display: block; width: 100%; font-size: 1.2rem; padding: 1.1rem; margin: .8rem 0; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; padding: .3rem; }
form.inline { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; margin: .8rem 0; }
.card.car { padding: 0; overflow: hidden; }
.card.car img, .card.car .noimg { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e5e7eb; }
.card.car .noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); aspect-ratio: 4 / 1; }
.car-body { padding: .8rem 1rem 1rem; }
.price { font-size: 1.25rem; font-weight: 700; color: var(--brand); margin: .2rem 0; }
.tag { display: inline-block; font-size: .8rem; padding: .05rem .5rem; border-radius: 1rem; background: #e5e7eb; }
.tag.sponsored { background: #fde68a; }
.tag.demo { background: var(--warn-bg); color: var(--warn); }
.badge { background: #f59e0b; color: #111; border-radius: 1rem; padding: 0 .45rem; font-size: .8rem; white-space: nowrap; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; margin: .5rem 0; }
.facts div { display: flex; gap: .4rem; }
.facts dt { color: var(--muted); }
.facts dt::after { content: ":"; }
.facts dd { margin: 0; font-weight: 600; }
dl.detail { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .35rem .8rem; margin: .5rem 0; }
dl.detail dt { color: var(--muted); }
dl.detail dd { margin: 0; }
.fit { color: var(--ok); } .miss { color: var(--err); } .unk { color: var(--warn); }
.notice { background: #eef6f4; border-inline-start: 4px solid var(--accent); padding: .6rem .9rem; border-radius: .3rem; margin: .8rem 0; }
.notice.warn { background: var(--warn-bg); border-color: #f59e0b; }
.claim { border-top: 1px solid var(--line); padding: .5rem 0; }
.claim .src { color: var(--muted); font-size: .9rem; }
.gallery { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
.gallery img { height: 14rem; width: auto; border-radius: .5rem; scroll-snap-align: start; }

.field { margin: .8rem 0; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
input[type=text], input[type=search], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=time], input[type=month], input[type=file], select, textarea {
  width: 100%; font: inherit; padding: .7rem .8rem; border: 1.5px solid #9aa7a0; border-radius: .5rem; background: #fff; color: var(--ink); min-height: 48px;
}
textarea { min-height: 5rem; }
.hint { color: var(--muted); font-size: .88rem; margin: .2rem 0 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.check input { width: 1.5rem; height: 1.5rem; margin-top: .25rem; flex: none; }
fieldset { border: 1px solid var(--line); border-radius: .6rem; margin: 1rem 0; padding: .5rem 1rem 1rem; }
legend { font-weight: 700; padding: 0 .4rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
details.filters { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .6rem 1rem; margin: .8rem 0; }
details.filters summary { font-weight: 600; cursor: pointer; min-height: 2.2rem; }

/* المحادثة */
.chatlog { display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0; }
.msg { max-width: 92%; padding: .65rem .9rem; border-radius: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-start; background: #d1fae5; border-end-start-radius: .2rem; }
.msg.assistant { align-self: flex-end; background: var(--card); border: 1px solid var(--line); border-end-end-radius: .2rem; }
.msg-blocks { align-self: stretch; }
/* النموذج بعد السجل في مكانه الطبيعي (لم يعد ثابتاً أسفل الشاشة): كان يغطي نصف شاشة الهاتف فوق الرد الأحدث وأزراره */
.chatform { background: var(--bg); padding: .6rem 0 .8rem; border-top: 1px solid var(--line); scroll-margin-bottom: 1rem; }
#last { scroll-margin-top: .5rem; }
/* لمسة على رابط: إشارة فورية بأن الصفحة التالية تُحمَّل (الشبكة قد تتأخر ثوانيَ) */
html.navigating::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); z-index: 2000; animation: navbar 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes navbar { 0% { transform: scaleX(.1); transform-origin: right; } 50% { transform: scaleX(.7); } 100% { transform: scaleX(.1); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) { html.navigating::before { animation: none; } }
.top a:active, .btn:active { opacity: .7; }
.chatform .row { display: flex; gap: .5rem; align-items: flex-end; }
.chatform textarea { flex: 1; min-height: 3.2rem; }
.voice-status { font-size: .9rem; color: var(--warn); min-height: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chips button { background: #fff; border: 1px solid var(--accent); color: var(--accent); border-radius: 1.2rem; padding: .35rem .9rem; font: inherit; cursor: pointer; min-height: 40px; }

/* الجداول: تتحول إلى بطاقات على الهاتف */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: start; vertical-align: top; }
th { background: #eef2ee; }
.staffnav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; background: #e6ede7; padding: .5rem 1rem; }
.staffnav a { padding: .3rem .1rem; color: var(--brand); font-weight: 600; text-decoration: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .7rem; }
.stat b { display: block; font-size: 1.5rem; }
.compare { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  body.staff table thead { position: absolute; inset-inline-start: -9999px; }
  body.staff table, body.staff tbody, body.staff tr, body.staff td { display: block; width: 100%; }
  body.staff tr { margin-bottom: .7rem; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
  body.staff td { border: 0; border-bottom: 1px solid var(--line); }
  body.staff td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* نص طلب العميل الأصلي في اختيار العرض: كاملاً، يلتف ولا يسبب تمريراً أفقياً */
.orig { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0; padding: .5rem .75rem; border-inline-start: 3px solid #8a8a8a; background: rgba(0,0,0,.04); }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: .5rem 0; }
dl.kv dt { font-weight: 600; } dl.kv dd { margin: 0; overflow-wrap: anywhere; }

ol.terms { margin: .25rem 0 .5rem; padding-inline-start: 1.5rem; }
ol.terms li { margin: .35rem 0; }
ol.terms .orig, dd .orig { display: block; margin: 0; }
form.stack { display: grid; gap: .35rem; margin: .5rem 0; }
form.stack textarea { width: 100%; box-sizing: border-box; }

/* بوابة المعرض: للهاتف أولاً */
.tabs { display: flex; gap: .3rem; margin: .5rem 0 1rem; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tabs a { padding: .7rem 1rem; text-decoration: none; font-weight: 700; color: var(--muted); white-space: nowrap; min-height: 48px; }
.tabs a[aria-current=page] { color: var(--brand); border-bottom: 3px solid var(--brand); }
.chips-row a[aria-current=page] { font-weight: 700; color: var(--ink); }
.pcards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.pcard img, .pcard .noimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #e5e7eb; }
.pcard .noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.pcard .pbody { padding: .6rem .9rem .8rem; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard .actions { gap: .4rem; }
.pick { display: flex; align-items: center; gap: .4rem; width: 100%; font-size: .9rem; }
.pick input { width: 1.4rem; height: 1.4rem; }
.st { font-weight: 700; } .st-published { color: var(--ok); } .st-rejected, .st-stale { color: var(--err); } .st-pending_review, .st-draft { color: var(--warn); }
fieldset.private { border: 2px dashed var(--warn); background: #fffbeb; }

/* المزاد: بيانات قد تكون قديمة عند انقطاع الاتصال */
[data-auction-state].stale { opacity: .6; border-color: #f59e0b; }
[data-auction-state] .price { font-size: 1.2rem; }

/* عارض صور السيارات (تحسين تدريجي؛ دونه تفتح الصورة الكبيرة برابطها) */
.gallery a.gl { flex: 0 0 auto; display: block; scroll-snap-align: start; cursor: zoom-in; }
.gallery a.gl img { display: block; height: 14rem; width: auto; max-width: 80vw; object-fit: cover; }
.gallery a.gl:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: .5rem; }
html.lb-lock, html.lb-lock body { overflow: hidden; overscroll-behavior: none; }
/* الطبقة ثابتة فوق الصفحة؛ مساحة العرض محددة بحوافها (لا بنسبة مئوية داخل عنصر مرن) فتتمركز الصورة وتلائمها في كل المتصفحات */
.lb { position: fixed; inset: 0; z-index: 1000; background: #0b0b0b; color: #fff; touch-action: none; overscroll-behavior: contain; }
.lb[hidden] { display: none; }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; height: 3.6rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .6rem; }
.lb-count { font-size: 1rem; direction: rtl; }
.lb-stage { position: absolute; top: 3.6rem; bottom: 2.4rem; left: 0; right: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lb-img { display: block; flex: 0 0 auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: auto; user-select: none; -webkit-user-drag: none; transform-origin: center center; transition: transform .12s ease-out; }
.lb-img.dragging { transition: none; }
.lb-img.loading { visibility: hidden; }
.lb button { font: inherit; color: #fff; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; min-width: 2.9rem; min-height: 2.9rem; padding: 0 .9rem; cursor: pointer; }
.lb button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb .lb-close { background: #fff; color: #111; font-weight: 700; border-color: #fff; }
/* سهمان على حافتي الشاشة، بمساحة ضغط مريحة للهاتف */
.lb .lb-nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .8); }
.lb-nav svg { display: block; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.lb-prev { right: .35rem; }
.lb-next { left: .35rem; }
.lb-hint { position: absolute; bottom: 0; left: 0; right: 0; height: 2.4rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .85rem; opacity: .75; padding: 0 .6rem; }
.lb-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .95rem; opacity: .85; pointer-events: none; }

/* الرسائل الصوتية */
.voice { margin-top: .4rem; }
.voice-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0; }
.voice .rec { display: inline-flex; align-items: center; gap: .35rem; color: var(--err); font-weight: 600; }
.voice .rec-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--err); animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .voice .rec-dot { animation: none; } }
.voice audio { width: 100%; max-width: 28rem; margin: .3rem 0; }
.voice textarea { width: 100%; }
.voice-status.err { color: var(--err); }

/* بطاقة السيارة داخل رد المحادثة: صورة أقصر فيبقى زر الإجراء داخل شاشة الهاتف */
.msg-blocks .card.car img, .msg-blocks .card.car .noimg { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }

/* ---- تطبيق الهاتف (PWA): شريط تنقل سفلي، مساحات آمنة، ولمس مريح ---- */
.tabbar { display: none; }
.photo-pick { display: grid; gap: .3rem; }
.photo-pick .field { position: relative; overflow: hidden; }
.fileinput { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.filebtn { display: block; text-align: center; min-height: 48px; }
.fileinput:focus-visible + .filebtn, .filebtn:focus-within { outline: 3px solid var(--accent); }
.linkcode { font-size: 2rem; font-weight: 700; letter-spacing: .2em; text-align: center; background: var(--card); border: 2px dashed var(--brand); border-radius: .6rem; padding: .6rem; font-family: ui-monospace, monospace; }
.top { padding-top: max(.6rem, env(safe-area-inset-top)); }
@media (max-width: 760px) {
  body.buyer .top > nav { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .2rem .15rem; text-align: center;
    font-size: .85rem; font-weight: 700; line-height: 1.25; color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: rgba(20,83,45,.15); }
  .tabbar a[aria-current=page] { color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
  .tabbar a:active { background: #eef3ef; }
  body:has(.tabbar) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* التمرير إلى حقل أو زر لا يتركه تحت الشريط السفلي */
  html:has(.tabbar) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.tabbar) #last { scroll-margin-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* لوحة المفاتيح مفتوحة: الشريط يختفي كي لا يغطي خانة الكتابة */
  html.kbd .tabbar { display: none; }
}
@media (display-mode: standalone) { .foot { padding-bottom: 1rem; } }

/* ---- قائمة السيارات: شبكة متجاوبة (3 ثم 2 ثم 1)، وبحث وترتيب وترقيم ---- */
main.wide { max-width: 1400px; padding-inline: clamp(1rem, 2.5vw, 2rem); }
.tag.ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.listing-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.listing-head h1 { margin-bottom: .3rem; }
.listing-head .count { margin: 0; }
.searchbar { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; padding: .8rem 1rem; margin: .6rem 0 1rem; }
.searchrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.searchrow .field { margin: 0; }
.searchrow .grow { flex: 1 1 18rem; min-width: 0; }
.searchrow .btn { flex: 0 0 auto; }
.searchbar details.filters { border: 0; padding: 0; margin: .6rem 0 0; background: none; }
.searchbar details.filters summary { cursor: pointer; font-weight: 700; color: var(--brand); min-height: 44px; display: flex; align-items: center; }
.filtergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; }
.cargrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.cargrid > .card.car { margin: 0; display: flex; flex-direction: column; }
.cargrid .card.car img, .cargrid .card.car .noimg { aspect-ratio: 16 / 10; }
.cargrid .car-body { display: flex; flex-direction: column; flex: 1; }
.cargrid .car-body h3 { margin: 0 0 .2rem; font-size: 1.1rem; line-height: 1.45; }
.cargrid .car-body h3 a { color: var(--ink); text-decoration: none; }
.cargrid .car-body .actions { margin-top: auto; padding-top: .6rem; }
.cargrid .car-body .actions .btn { flex: 1 1 0; padding-inline: .6rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.btn.disabled { opacity: .45; pointer-events: none; }
@media (max-width: 1099px) { .cargrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .cargrid { grid-template-columns: 1fr; gap: .9rem; }
  .cargrid .card.car img, .cargrid .card.car .noimg { aspect-ratio: 16 / 9; }
  .cargrid .car-body { padding: .7rem .85rem .85rem; }
  .searchbar { padding: .6rem .7rem; margin-top: .3rem; }
  /* الهاتف: البحث بعرض كامل، ثم الترتيب وزر البحث في سطر واحد */
  .searchrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "q q" "sort btn"; gap: .5rem; }
  .searchrow .grow { grid-area: q; }
  .searchrow .field:not(.grow) { grid-area: sort; }
  .searchrow > .btn { grid-area: btn; }
  .searchrow .field:not(.grow) label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .searchrow .grow label { margin-bottom: .15rem; }
  .listing-head h1 { font-size: 1.3rem; margin: .3rem 0 .1rem; }
  .filtergrid { grid-template-columns: 1fr 1fr; }
}

/* ---- قائمة الهاتف (☰): details تعمل دون JavaScript ---- */
.top .menu { display: none; position: relative; }
.top .menu summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: .5rem; font-weight: 700; }
.top .menu summary::-webkit-details-marker { display: none; }
.top .menu[open] summary { background: rgba(255,255,255,.15); }
.top .menu nav { position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 1000; display: flex; flex-direction: column; min-width: 14rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .3rem 0; }
.top .menu nav a { color: var(--ink); padding: .7rem 1rem; min-height: 44px; display: flex; align-items: center; }
.top .menu nav a:active, .top .menu nav a:hover { background: #eef3ef; }
@media (max-width: 760px) {
  body.buyer .top .menu { display: block; }
  body.buyer .top { flex-wrap: nowrap; }
}

/* ---- دعوة التثبيت: في مجرى الصفحة تحت الشريط العلوي، لا تغطي شيئاً ---- */
.installbar { background: #eaf2ec; border-bottom: 1px solid var(--line); padding: .35rem 1rem; }
.installrow { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; max-width: 1400px; margin: 0 auto; }
.installbtn { min-height: 40px; display: inline-flex; align-items: center; }
.install-help { max-width: 1400px; margin: .35rem auto .15rem; font-size: .92rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .75rem; }
.install-help[hidden] { display: none; }
.appicon { border-radius: 22%; vertical-align: middle; margin-inline-end: .5rem; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* هوية المشغّل في التذييل: ثانوية، الشعار بحجمه الطبيعي المصغّر دون قص */
.poweredby { display: inline-flex; align-items: center; gap: .55rem; margin: .4rem 0 0; color: var(--muted); font-size: .88rem; }
.poweredby img { width: 36px; height: 36px; display: block; }