/* تطبيق الزبون — كل الألوان من themes.css */
:root {
  --display: 'Alexandria', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --body: 'IBM Plex Sans Arabic', 'Alexandria', 'Segoe UI', Tahoma, sans-serif;
  --r: 16px; --ease: cubic-bezier(.22, .8, .2, 1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--ink) }
body { font-family: var(--body); font-size: 14px; line-height: 1.55; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-align: inherit }
button:disabled { cursor: default }
input, select, textarea { font: inherit; color: var(--ink) }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
svg.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.num { font-variant-numeric: tabular-nums }
[dir=ltr] .flip { transform: scaleX(-1) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.pad { padding-inline: max(16px, env(safe-area-inset-left, 0px)) }
.hidden { display: none !important }

#app { max-width: 520px; margin: 0 auto; background: var(--surface); min-height: 100vh; min-height: 100dvh; position: relative; padding-bottom: calc(76px + var(--sab)); box-shadow: 0 0 40px -24px rgba(0, 0, 0, .3) }
#app.no-nav { padding-bottom: 0 }
#app.has-sticky { padding-bottom: calc(150px + var(--sab)) }

/* شريط "غير متصل" */
.offline { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: calc(6px + var(--sat)) 12px 6px }

/* الهيدر */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--primary); color: #fff; padding-top: var(--sat) }
.hrow { display: flex; align-items: center; gap: 6px; padding-block: 10px; min-height: 58px }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0 }
.brand img { height: 32px; width: auto }
.brand b { font-family: var(--display); font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hrow .sp { flex: 1 }
.hbtn { height: 40px; min-width: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff }
.hbtn:active { background: rgba(255, 255, 255, .14) }
.hbtn svg.i { width: 22px; height: 22px }
.lang { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); font-size: 12px; font-weight: 700; letter-spacing: .02em }
.lang svg.i { width: 15px; height: 15px }
.hsearch { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); border-radius: 14px; padding: 10px 14px; width: 100%; font-size: 13px; margin-bottom: 12px }
.hsearch svg.i { width: 18px; height: 18px }

/* السلايدر */
.hero { position: relative; overflow: hidden; aspect-ratio: 4 / 4.2; background: var(--primary-deep) }
.hero .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease) }
.hero .sl.on { opacity: 1; z-index: 1 }
.hero .sl img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04) }
.hero .sl.on img { animation: kbh 7s linear both }
.hero.paused .sl.on img, .hero.paused .bars i.run b { animation-play-state: paused }
@keyframes kbh { from { transform: scale(1.04) } to { transform: scale(1.15) translate(-2%, -1.5%) } }
.hero .sl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 6, .86) 0%, rgba(10, 8, 6, .25) 46%, rgba(10, 8, 6, 0) 62%), linear-gradient(180deg, rgba(10, 8, 6, .4) 0%, rgba(10, 8, 6, 0) 22%) }
.hero .cap { position: absolute; inset-inline: 20px; bottom: 44px; z-index: 2; color: #fff }
.hero .sl.on .cap > * { animation: cup .9s var(--ease) both }
.hero .sl.on .cap > :nth-child(2) { animation-delay: .08s } .hero .sl.on .cap > :nth-child(3) { animation-delay: .16s } .hero .sl.on .cap > :nth-child(4) { animation-delay: .24s }
@keyframes cup { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.hero .eb { display: inline-flex; background: var(--accent-2); color: var(--primary-deep); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px }
.hero h2 { font-family: var(--display); font-size: 29px; line-height: 1.2; margin: 10px 0 6px; font-weight: 700; text-wrap: balance }
.hero p { margin: 0; font-size: 13.5px; opacity: .9; max-width: 34ch }
.hero .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 999px }
.hero .go svg.i { width: 16px; height: 16px; color: var(--accent) }
.bars { position: absolute; top: 14px; inset-inline: 16px; z-index: 3; display: flex; gap: 5px }
.bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative }
.bars i b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: right }
[dir=ltr] .bars i b { transform-origin: left }
.bars i.done b { transform: scaleX(1) }
.bars i.run b { animation: fill var(--dur, 5s) linear both }
@keyframes fill { to { transform: scaleX(1) } }
.cnt { position: absolute; top: 28px; inset-inline-end: 18px; z-index: 3; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; opacity: .85 }
.cnt b { font-size: 15px }
.body { position: relative; z-index: 2; background: var(--surface); border-radius: 24px 24px 0 0; margin-top: -22px }
.body.flat { margin-top: 0; border-radius: 0 }

/* عناوين الأقسام */
.sec { padding-block: 22px 2px }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px }
.sh h2 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0; text-wrap: balance }
.sh h2 small { display: block; font-family: var(--body); font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px }
.sh .more { font-size: 12.5px; color: var(--accent); font-weight: 700; display: flex; align-items: center; gap: 2px; white-space: nowrap }
.sh .more svg.i { width: 15px; height: 15px }

/* كروت الأقسام الرئيسية */
.secs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.secc { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1.25; background: var(--mist); color: #fff; display: block }
.secc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.secc:active img { transform: scale(1.05) }
.secc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 6, .82), rgba(10, 8, 6, 0) 60%) }
.secc span { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 13.5px; line-height: 1.3 }
.secc small { display: block; font-family: var(--body); font-weight: 500; font-size: 11px; opacity: .85 }

/* بانر */
.promo { border-radius: 20px; overflow: hidden; position: relative; display: block; width: 100%; background: var(--primary); color: #fff; min-height: 150px; isolation: isolate }
.promo .ph { position: absolute; inset-block: 0; inset-inline-end: 0; width: 48% }
.promo .ph img { width: 100%; height: 100%; object-fit: cover }
.promo .ph::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--primary) 0%, transparent 50%) }
[dir=ltr] .promo .ph::before { background: linear-gradient(270deg, var(--primary) 0%, transparent 50%) }
.promo .in { position: relative; z-index: 2; padding: 20px; max-width: 60% }
.promo .t { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.35 }
.promo .s { font-size: 12.5px; opacity: .85; margin-top: 4px }
.promo .cta { display: inline-flex; margin-top: 12px; font-size: 12px; font-weight: 700; background: #fff; color: var(--primary); padding: 7px 14px; border-radius: 999px }
.promo .ring { position: absolute; z-index: 1; inset-inline-start: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .07) }

/* صفوف أفقية + المتحركة */
.row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px }
.row::-webkit-scrollbar { display: none }
.row > * { scroll-snap-align: start }
.marquee { overflow: hidden; margin-inline: -16px }
.marquee .track { display: flex; gap: 12px; width: max-content; padding-inline: 16px; animation: mq var(--mqd, 40s) linear infinite }
.marquee.stop .track, .marquee:hover .track { animation-play-state: paused }
@keyframes mq { to { transform: translateX(calc(-50% - 6px)) } }
[dir=rtl] .marquee .track { animation-name: mqr }
@keyframes mqr { to { transform: translateX(calc(50% + 6px)) } }
.catc { flex: 0 0 128px; text-align: center }
.catc .im { aspect-ratio: 1 / 1.1; border-radius: 18px; overflow: hidden; background: var(--mist); position: relative }
.catc .im::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--accent) }
.catc img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease) }
.catc:active img { transform: scale(1.05) }
.catc b { display: block; font-size: 13px; margin-top: 8px; font-weight: 600 }
.catc span { display: block; font-size: 11.5px; color: var(--muted) }
.catc span em { font-style: normal; color: var(--accent); font-weight: 700 }
.catc .ico { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent) }
.catc .ico svg.i { width: 40px; height: 40px; stroke-width: 1.4 }

/* كرت العنصر */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px }
.pc { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); cursor: pointer; text-align: start }
.row .pc, .marquee .pc { flex: 0 0 164px; width: 164px }
.pc .im { position: relative; aspect-ratio: 1 / 1.05; background: var(--mist); overflow: hidden; border-radius: 16px }
.pc .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s }
.pc .im img[data-src] { opacity: 0 }
.pc:active .im img { transform: scale(1.04) }
.pc .fav { position: absolute; top: 8px; inset-inline-end: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .1) }
.pc .fav svg.i { width: 17px; height: 17px; color: var(--ink-2) }
.fav.on svg.i, .fl .on svg.i { color: var(--danger); fill: var(--danger) }
.pc .off { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; z-index: 2 }
.pc .tag { position: absolute; bottom: 8px; inset-inline-start: 8px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px; z-index: 2 }
.pc .bd { padding: 9px 2px 4px; display: flex; flex-direction: column; gap: 2px; flex: 1 }
.pc .loc { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); min-width: 0 }
.pc .loc svg.i { width: 13px; height: 13px }
.pc .loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pc .nm { font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px }
.pc .meta { display: flex; gap: 8px; font-size: 11px; color: var(--ink-2); flex-wrap: wrap }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 2px }
.price b { color: var(--accent); font-weight: 700; font-size: 15.5px }
.price s { color: var(--muted); font-size: 12px }
.price .ask { color: var(--ink-2); font-size: 13px; font-weight: 600 }

/* بانر "اعرض معنا" */
.join { border-radius: 20px; background: var(--primary); color: #fff; padding: 18px; display: flex; align-items: center; gap: 14px; width: 100%; position: relative; overflow: hidden; text-align: start }
.join::before { content: ''; position: absolute; inset-inline-end: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--accent-2); opacity: .35 }
.join > div { position: relative; flex: 1 }
.join b { font-family: var(--display); font-size: 16px; display: block }
.join span { font-size: 12.5px; opacity: .82 }
.join .ar { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--primary); display: grid; place-items: center; flex-shrink: 0 }

/* الفوتر */
.foot { margin-top: 30px; background: var(--primary); color: #fff; padding-block: 28px 34px; text-align: center }
.foot .fb { font-family: var(--display); font-size: 20px; font-weight: 700 }
.foot img { height: 34px; margin: 0 auto 10px }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 12.5px; margin: 16px 0 }
.foot nav a { opacity: .92; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45) }
.foot .soc { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px }
.foot .soc a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center }
.foot .cr { font-size: 11.5px; opacity: .8; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 14px }

/* الشريط السفلي */
.bnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(520px, 100%); z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; padding: 6px 8px calc(6px + var(--sab)) }
.bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px 0; position: relative; font-weight: 500 }
.bnav svg.i { width: 23px; height: 23px }
.bnav a.on { color: var(--primary); font-weight: 700 }
.bnav a.on::before { content: ''; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent) }
.badge { position: absolute; top: 0; inset-inline-start: calc(50% + 4px); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff }

/* شريط الرجوع */
.backbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding-block: calc(8px + var(--sat)) 8px }
.backbar h1 { font-family: var(--display); font-size: 16px; margin: 0; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.backbar small { display: block; color: var(--muted); font-size: 11px; font-family: var(--body); font-weight: 500 }
.ibtn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: inherit; flex-shrink: 0 }
.ibtn:active { background: var(--mist) }
.ibtn svg.i { width: 22px; height: 22px }

/* الفئات */
.cats { display: grid; grid-template-columns: 96px 1fr; min-height: calc(100vh - 140px) }
.cats .side { background: var(--mist); border-inline-end: 1px solid var(--line) }
.cats .side button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; padding: 14px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); line-height: 1.3 }
.cats .side button svg.i { width: 24px; height: 24px; color: var(--muted) }
.cats .side button.on { background: var(--primary); color: #fff; border-color: var(--primary) }
.cats .side button.on svg.i { color: #fff }
.cats .main { padding: 14px 12px; min-width: 0 }
.chero { border-radius: 18px; overflow: hidden; position: relative; height: 150px; display: block; width: 100%; margin-bottom: 16px; color: #fff; background: var(--primary) }
.chero img { width: 100%; height: 100%; object-fit: cover }
.chero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--primary-deep) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, 0) 100%) }
.chero .tx { position: absolute; inset-inline: 14px; bottom: 12px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; text-align: start }
.chero small { display: block; font-size: 11px; opacity: .9; font-weight: 600 }
.chero b { font-family: var(--display); font-size: 21px; line-height: 1.2 }
.chero .go { background: #fff; color: var(--primary); font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap }
.subh { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin: 4px 0 10px }
.subh::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin-bottom: 18px }
.tile { text-align: center; font-size: 12px; font-weight: 600; line-height: 1.35 }
.tile .im { aspect-ratio: 1; border-radius: 14px; overflow: hidden; margin-bottom: 6px; background: var(--mist); position: relative; display: grid; place-items: center; color: var(--accent) }
.tile img { width: 100%; height: 100%; object-fit: cover }
.tile .im svg.i { width: 30px; height: 30px; stroke-width: 1.5 }
.tile .n { display: block; font-size: 10.5px; color: var(--accent); font-weight: 700 }
.tile.all .im { background: var(--soft) }

/* القائمة */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px 4px; margin-inline: -16px; padding-inline: 16px }
.chips::-webkit-scrollbar { display: none }
.chip { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary) }
.chip svg.i { width: 14px; height: 14px }
.chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15) }
.count { font-size: 12px; color: var(--muted); margin: 10px 0 12px }
.fpill { position: fixed; z-index: 39; bottom: calc(80px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; background: var(--ink); color: #fff; border-radius: 999px; overflow: hidden; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55) }
.fpill button { display: flex; align-items: center; gap: 7px; padding: 12px 18px; font-weight: 600; font-size: 13px; color: #fff }
.fpill button + button { border-inline-start: 1px solid rgba(255, 255, 255, .18) }
.fpill svg.i { width: 16px; height: 16px }
.fpill .dot { min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent-2); color: var(--primary-deep); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px }
.more-loader { display: grid; place-items: center; padding: 20px }
.empty { text-align: center; color: var(--muted); padding: 46px 16px; font-size: 13px }
.empty svg.i { width: 46px; height: 46px; color: var(--mist-2); stroke-width: 1.3; margin: 0 auto 10px }
.empty b { display: block; font-family: var(--display); color: var(--ink); font-size: 16px; margin-bottom: 4px }
.empty .bbtn { display: inline-flex; margin-top: 16px; flex: none; padding-inline: 22px }

/* الهيكل أثناء التحميل */
.skel { background: linear-gradient(90deg, var(--mist) 25%, var(--mist-2) 50%, var(--mist) 75%); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: 12px }
@keyframes sk { to { background-position: -200% 0 } }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--mist-2); border-top-color: var(--primary); animation: rot .8s linear infinite }
@keyframes rot { to { transform: rotate(360deg) } }

/* صفحة التفاصيل */
.gal { position: relative; background: var(--mist); aspect-ratio: 1 / 1.02; overflow: hidden }
.gal .track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
.gal .track::-webkit-scrollbar { display: none }
.gal .track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center }
.gal .top { position: absolute; top: calc(10px + var(--sat)); inset-inline: 10px; display: flex; justify-content: space-between; z-index: 2 }
.gal .rb { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .12) }
.gal .fl { display: flex; gap: 8px }
.gal .dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2 }
.gal .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); transition: width .3s }
.gal .dots i.on { width: 18px; background: #fff }
.gal .bdg { position: absolute; bottom: 16px; inset-inline-start: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2 }
.gal .bdg span { background: var(--surface); font-size: 12px; font-weight: 600; padding: 5px 12px; border-start-end-radius: 8px; border-end-end-radius: 8px }
.gal .bdg .r { background: var(--danger); color: #fff }
.gal .bdg .g { background: var(--accent-2); color: var(--primary-deep) }
.pinfo { padding-block: 16px }
.crumb { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap }
.pinfo h1 { font-family: var(--display); font-size: 21px; line-height: 1.35; margin: 8px 0; font-weight: 600; text-wrap: balance }
.pinfo .price b { font-size: 26px }
.pinfo .price s { font-size: 15px }
.saved { display: inline-block; margin-top: 6px; color: var(--success); background: var(--success-soft); font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px }
.locrow { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; margin: 14px 0; width: 100%; text-align: start }
.locrow .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0 }
.locrow .t { flex: 1; min-width: 0 }
.locrow b { display: block; font-size: 13.5px }
.locrow span { font-size: 12px; color: var(--muted) }
.locrow .go { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap }
.keyf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 }
.keyf div { background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center }
.keyf b { display: block; font-family: var(--display); font-size: 15px }
.keyf span { font-size: 11px; color: var(--muted) }
.h3 { font-family: var(--display); font-size: 16px; font-weight: 700; margin: 20px 0 10px }
.specs { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 12px }
.specs div { display: grid; grid-template-columns: 42% 1fr; border-bottom: 1px solid var(--line); font-size: 13px }
.specs div:last-child { border-bottom: 0 }
.specs dt { background: var(--mist); padding: 11px 12px; color: var(--ink-2) }
.specs dd { margin: 0; padding: 11px 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.specs dd i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15) }
.desc { font-size: 13.5px; color: var(--ink-2); white-space: pre-line }
.desc.clip { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden }
.linkbtn { color: var(--accent); font-weight: 700; font-size: 13px; margin-top: 6px }
.sticky { position: fixed; z-index: 42; bottom: 0; left: 50%; transform: translateX(-50%); width: min(520px, 100%); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 10px 16px calc(10px + var(--sab)) }
.sticky.col { flex-direction: column }
.sticky .rowb { display: flex; gap: 10px }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 14px }
.qty button { width: 40px; height: 48px; font-size: 18px; text-align: center; display: grid; place-items: center }
.qty button svg.i { width: 16px; height: 16px }
.qty span { min-width: 24px; text-align: center; font-weight: 700 }
.bbtn { flex: 1; background: var(--primary); color: #fff; border-radius: 14px; font-weight: 700; padding: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 48px }
.bbtn.wa { background: #1F8F4E }
.bbtn.dark { background: var(--ink) }
.bbtn:disabled { opacity: .45 }
.obtn { flex: 1; border: 1.5px solid var(--primary); color: var(--primary); border-radius: 14px; padding: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 48px; background: var(--surface) }

/* البحث */
.sbox { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 12px; flex: 1; background: var(--surface) }
.sbox:focus-within { border-color: var(--primary) }
.sbox input { border: 0; outline: 0; flex: 1; padding: 11px 0; background: transparent; min-width: 0 }
.sbox svg.i { width: 18px; height: 18px; color: var(--muted) }
.recent { display: flex; flex-wrap: wrap; gap: 8px }
.recent button, .recent a { display: flex; align-items: center; gap: 6px; background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600 }
.recent svg.i { width: 15px; height: 15px; color: var(--accent) }

/* السلة */
.citem { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.citem img, .citem .ph { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--mist) }
.citem .t { flex: 1; min-width: 0 }
.citem .t b { font-size: 13px; font-weight: 600; display: block; line-height: 1.4 }
.citem .acts { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-2) }
.citem .acts .rm { display: inline-flex; align-items: center; gap: 4px; color: var(--danger) }
.citem .acts svg.i { width: 15px; height: 15px }
.citem .qty button { width: 32px; height: 34px }
.sum { border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 14px 0 12px }
.sum div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px }
.sum .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 700 }
.pay { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px }
.pay label { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; font-weight: 600; font-size: 13px; cursor: pointer }
.pay label.on { border-color: var(--primary); background: var(--tint) }
.pay small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px }
.pay input { accent-color: var(--primary); width: 18px; height: 18px }
.steps { display: flex; gap: 6px; margin: 14px 0 4px }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--mist-2) }
.steps i.on { background: var(--primary) }
.done { text-align: center; padding: 40px 10px }
.done .ok { width: 76px; height: 76px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 16px }
.done .ok svg.i { width: 38px; height: 38px; stroke-width: 2.4 }
.done h2 { font-family: var(--display); margin: 0 0 6px }

/* النوافذ السفلية */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 12, 10, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease both }
.scrim.out { animation: fade .18s ease reverse both }
@keyframes fade { from { opacity: 0 } }
.sheet { background: var(--surface); width: min(520px, 100%); max-height: 88vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 8px 16px calc(18px + var(--sab)); animation: up .32s var(--ease) }
@keyframes up { from { transform: translateY(60px); opacity: .4 } to { transform: none; opacity: 1 } }
.sheet .grab { width: 40px; height: 4px; background: var(--line); border-radius: 4px; margin: 6px auto 12px }
.sheet h3 { font-family: var(--display); font-size: 18px; margin: 0 0 4px }
.sheet .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 12px }
.sheet .foot-btns { position: sticky; bottom: calc(-18px - var(--sab)); background: var(--surface); padding: 12px 0 calc(4px + var(--sab)); margin-top: 8px; display: flex; gap: 10px; border-top: 1px solid var(--line) }
.fl-h { font-weight: 700; font-size: 13px; margin: 18px 0 8px; display: flex; justify-content: space-between }
.fl-h small { color: var(--muted); font-weight: 500 }
.sw { display: flex; flex-wrap: wrap; gap: 8px }
.sw button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 12.5px }
.sw button.on { border-color: var(--primary); background: var(--primary); color: #fff }
.sw i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15) }
.rng { display: flex; gap: 10px; align-items: center }
.rng span { color: var(--muted) }
.field { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); outline: 0; min-height: 46px }
.field:focus { border-color: var(--primary) }
.field.err { border-color: var(--danger); background: var(--danger-soft) }
textarea.field { min-height: 100px; resize: vertical }
.lbl { display: block; font-size: 12.5px; font-weight: 600; margin: 14px 0 6px }
.lbl em { color: var(--danger); font-style: normal }
.errm { color: var(--danger); font-size: 12px; margin-top: 6px }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px }
.btns { display: flex; gap: 10px; margin-top: 18px }
.radio { display: flex; flex-direction: column }
.radio label { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer }
.radio input { accent-color: var(--primary); width: 18px; height: 18px }
.otp { display: flex; gap: 8px; direction: ltr; justify-content: center }
.otp input { width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 12px; outline: 0 }
.otp input:focus { border-color: var(--primary) }

/* السبلاش والدخول */
.splash { position: fixed; inset: 0; z-index: 100; background: var(--primary); display: grid; place-items: center; transition: opacity .6s, visibility .6s }
.splash .mark { animation: spl 1.1s var(--ease) both; color: #fff; text-align: center }
.splash .mark img { width: 140px; margin: 0 auto }
.splash .mark b { font-family: var(--display); font-size: 34px; display: block }
.splash.out { opacity: 0; visibility: hidden }
@keyframes spl { from { opacity: 0; transform: scale(.86); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
.entry { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface) }
.entry .top { background: var(--primary); color: #fff; padding: calc(56px + var(--sat)) 16px 70px; text-align: center; position: relative; overflow: hidden; border-radius: 0 0 36px 36px }
.entry .top::before, .entry .top::after { content: ''; position: absolute; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .06) }
.entry .top::before { width: 260px; height: 260px; top: -120px; inset-inline-start: -90px }
.entry .top::after { width: 200px; height: 200px; bottom: -110px; inset-inline-end: -60px }
.entry .top img { height: 74px; margin: 0 auto 18px; position: relative }
.entry .top .wm { font-family: var(--display); font-size: 40px; font-weight: 700; position: relative; margin-bottom: 8px }
.entry .top h1 { font-family: var(--display); font-size: 22px; margin: 0; position: relative }
.entry .top p { margin: 6px 0 0; opacity: .88; font-size: 13px; position: relative }
.entry .top .lang { position: relative; display: inline-flex; margin-top: 18px }
.entry .bot { padding-block: 26px; display: flex; flex-direction: column; gap: 12px }
.lbtn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px; font-weight: 700; background: var(--surface); width: 100%; min-height: 50px }
.lbtn svg { width: 20px; height: 20px }
.lbtn.dark { background: #000; color: #fff; border-color: #000 }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.legal { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px }
.legal a { text-decoration: underline; color: var(--ink-2) }

/* حسابي */
.acard { border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px }
.who { display: flex; align-items: center; gap: 12px }
.who .t { flex: 1; min-width: 0 }
.who b { display: block; font-size: 15px }
.who span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.av { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px; flex-shrink: 0 }
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center }
.svc a, .svc button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-align: center }
.svc i { width: 52px; height: 52px; border-radius: 50%; background: var(--soft); color: var(--accent); display: grid; place-items: center }
.svc svg.i { width: 22px; height: 22px }
.links a, .links button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600 }
.links a:last-child, .links button:last-child { border-bottom: 0 }
.links svg.i { width: 16px; height: 16px; color: var(--muted) }
.links .danger { color: var(--danger) }
.lsw { display: flex; background: var(--mist); border-radius: 999px; padding: 3px }
.lsw button { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2) }
.lsw button.on { background: var(--primary); color: #fff }
.ver { text-align: center; color: var(--muted); font-size: 11.5px; padding: 18px 0 6px }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--mist-2); color: var(--ink-2) }
.pill.ok { background: var(--success-soft); color: var(--success) }
.pill.wait { background: var(--warn-soft); color: var(--warn) }
.pill.no { background: var(--danger-soft); color: var(--danger) }
.ocard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px }
.ocard .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px }
.ocard .imgs { display: flex; gap: 6px; margin-top: 10px }
.ocard .imgs img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--mist) }

/* صفحات نصية */
.doc { padding-block: 16px 30px; font-size: 13.5px; color: var(--ink-2) }
.doc h2 { font-family: var(--display); font-size: 15px; color: var(--ink); margin: 20px 0 6px }
.doc p, .doc li { max-width: 62ch }

.toast { position: fixed; z-index: 120; top: calc(14px + var(--sat)); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); animation: tin .25s ease both; max-width: calc(100% - 32px); text-align: center }
.toast.err { background: var(--danger) }
@keyframes tin { from { opacity: 0; transform: translate(-50%, -8px) } to { opacity: 1; transform: translate(-50%, 0) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, 1fr) }
}