/* ===================================================================
   الهوية v2 — نفس ترتيب الشاشات، بس بتفاصيل شكل خاصة بالتطبيق:
   هيدر بحافة سفلية دائرية + شريط محافظة، شريط سفلي عائم كبسولة، تصنيفات دائرية،
   كروت بإطار خفيف، مؤشرات سلايدر كبسولة، كروت أقسام أفقية، وعجلة الحظ.
   =================================================================== */

/* الهيدر */
/* الهيدر الكبير (بحث + محافظة) يمشي ويا الصفحة حتى ما ياكل الشاشة — الشريط السفلي يبقى ثابت */
.hdr { position: relative; border-radius: 0 0 26px 26px; padding-bottom: 14px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55) }
.hdr .hrow { min-height: 54px; padding-block: 8px 6px }
.hdr .brand b { font-size: 20px; letter-spacing: -.01em }
.hsearch { background: var(--surface); color: var(--muted); border: 0; border-radius: 16px; margin: 4px 0 0; padding: 12px 14px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5) }
.hsearch svg.i { color: var(--accent) }
.govbar { display: flex; align-items: center; gap: 6px; margin-top: 10px }
.gov { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .2) }
.gov svg.i { width: 15px; height: 15px }
.gov svg.down { transform: rotate(90deg); width: 13px; height: 13px; opacity: .8 }
.gov.on { background: var(--accent-2); color: var(--primary-deep); border-color: var(--accent-2) }
.gov-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff }
.gov-x svg.i { width: 15px; height: 15px }

/* السلايدر: بطاقة بزوايا دائرية داخل الصفحة + مؤشرات كبسولة تحت */
.hero { margin: 14px 16px 0; border-radius: 24px; aspect-ratio: 4 / 3.6 }
.hero .cap { bottom: 46px; inset-inline: 18px }
.hero h2 { font-size: 25px }
.hero .eb { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .3) }
.hero .go { padding: 10px 16px; background: var(--accent-2); color: var(--primary-deep) }
.hero .go svg.i { color: var(--primary-deep) }
.hero .dots { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.hero .dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .5); overflow: hidden; position: relative; transition: width .35s var(--ease) }
.hero .dots i.run { width: 28px }
.hero .dots i b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: right }
[dir=ltr] .hero .dots i b { transform-origin: left }
.hero .dots i.run b { animation: fill var(--dur, 5s) linear both }
.hero.paused .dots i.run b { animation-play-state: paused }
.body { margin-top: 0; border-radius: 0 }

/* عناوين الأقسام: شريط لون صغير + زر "عرض الكل" كبسولة */
.sh h2 { display: flex; flex-direction: column; padding-inline-start: 12px; position: relative; font-size: 18px }
.sh h2::before { content: ''; position: absolute; inset-inline-start: 0; top: 4px; width: 4px; height: 20px; border-radius: 4px; background: var(--accent-2) }
.sh .more { background: var(--soft); color: var(--accent); padding: 6px 10px 6px 8px; border-radius: 999px; font-size: 12px }

/* كروت الأقسام: صف أفقي بأيقونة */
.secs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; grid-template-columns: none }
.secs::-webkit-scrollbar { display: none }
.secc { flex: 0 0 132px; aspect-ratio: 1 / 1.2; border-radius: 20px }
.secc .ic { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--primary); display: grid; place-items: center }
.secc .ic svg.i { width: 20px; height: 20px }
.secc b { 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 }

/* التصنيفات: دوائر بإطار متدرج (مثل القصص) */
.catc { flex: 0 0 86px; width: 86px }
.catc .im { width: 78px; height: 78px; aspect-ratio: auto; margin: 0 auto; border-radius: 50%; padding: 3px; background: linear-gradient(140deg, var(--accent-2), var(--primary)) }
.catc .im::after { display: none }
.catc .im img, .catc .im .ico { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--surface); object-fit: cover; background: var(--mist) }
.catc .im.hot { background: linear-gradient(140deg, #E4572E, #F2A541) }
.catc b { font-size: 12px; line-height: 1.35; margin-top: 7px }
.catc span { font-size: 10.5px }

/* كرت العنصر: إطار خفيف + السعر فوق الصورة */
.pc { border: 1px solid var(--line); border-radius: 20px; padding: 6px; box-shadow: 0 6px 18px -16px rgba(0, 0, 0, .5) }
.pc .im { border-radius: 15px }
.pc .bd { padding: 8px 4px 4px }
.pc .nm { min-height: 34px }
.pc .price b { font-size: 15px }
.row .pc, .marquee .pc { flex: 0 0 168px; width: 168px }
.grid { gap: 12px 10px }
.pc .off { border-radius: 999px; padding: 3px 9px }

/* بانر العروض */
.promo { border-radius: 24px; background: linear-gradient(120deg, var(--primary), var(--primary-deep)) }
.promo .ph { width: 52% }
.promo .ph img { border-start-start-radius: 0 }
.promo .cta { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-2); color: var(--primary-deep) }
.promo .cta svg.i { width: 14px; height: 14px }

/* "اعرض معنا": كرت فاتح بأيقونة */
.join { background: var(--soft); color: var(--ink); border: 1px dashed var(--accent-2) }
.join::before { display: none }
.join .ar { background: var(--primary); color: #fff; order: -1 }
.join span { color: var(--ink-2); opacity: 1 }
.join > svg.i { color: var(--accent); flex-shrink: 0 }

/* بانر الدعوات */
.invite-b { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .12), transparent 45%), linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 14px 30px -20px var(--primary) }
.invite-b b { font-family: var(--display); font-size: 16px; display: block }
.invite-b span { font-size: 12.5px; opacity: .88 }
.wheel-mini { flex: 0 0 62px; height: 62px; border-radius: 50%; border: 3px solid #fff; background: conic-gradient(#C9A55C 0 60deg, #4F6B4A 0 120deg, #8C8C8C 0 180deg, #1F3A5F 0 240deg, #9A452B 0 300deg, #7E5E1F 0 360deg); animation: rot 9s linear infinite; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18) }
@media (prefers-reduced-motion: reduce) { .wheel-mini { animation: none } }

/* الشريط السفلي: كبسولة عائمة */
.bnav { bottom: calc(10px + var(--sab)); width: min(500px, calc(100% - 24px)); border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .45); padding: 6px }
.bnav a { border-radius: 18px; padding: 6px 0; gap: 1px }
.bnav a.on { background: var(--soft); color: var(--accent) }
.bnav a.on::before { display: none }
.bnav svg.i { width: 22px; height: 22px }
#app { padding-bottom: calc(96px + var(--sab)) }
.fpill { bottom: calc(92px + var(--sab)) }

/* الفئات */
.cats .side { background: var(--surface) }
.cats .side button { border: 0; margin: 6px; width: calc(100% - 12px); border-radius: 16px; padding: 12px 4px }
.cats .side button.on { background: var(--soft); color: var(--accent) }
.cats .side button.on svg.i { color: var(--accent) }
.chero { border-radius: 22px }
.tile .im { border-radius: 50%; padding: 3px; background: linear-gradient(140deg, var(--accent-2), var(--primary)) }
.tile .im img { border-radius: 50%; border: 3px solid var(--surface) }
.tile .im svg.i { color: #fff }
.tile.all .im { background: var(--soft) }
.tile.all .im svg.i { color: var(--accent) }
.tile.hot .im { background: linear-gradient(140deg, #E4572E, #F2A541) }

/* القائمة */
.chip.gov { background: var(--soft); border-color: transparent; color: var(--accent) }
.chip.gov.on { background: var(--accent-2); color: var(--primary-deep) }
.chip.gov span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .12) }
.chip.gov span svg.i { width: 11px; height: 11px }
.fpill { border-radius: 18px }

/* التفاصيل */
.gal { margin: 0; border-radius: 0 0 28px 28px }
.codeline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px }
.codeline .pill svg.i { width: 12px; height: 12px }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; cursor: pointer }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85 }
.video iframe { width: 100%; height: 100%; border: 0 }
.video .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #d00; display: grid; place-items: center }
.video .play svg.i { width: 28px; height: 28px; fill: currentColor }
.sticky { bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 26px -20px rgba(0, 0, 0, .5) }

/* "اعرض معنا" */
.pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.pick button { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; font-weight: 700; font-size: 13.5px; text-align: start; background: var(--surface) }
.pick button svg.i { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0 }
.pick button.on { border-color: var(--primary); background: var(--tint) }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px }
.photos .ph, .photos .add { aspect-ratio: 1; border-radius: 16px; overflow: hidden; position: relative; background: var(--mist) }
.photos .ph img { width: 100%; height: 100%; object-fit: cover }
.photos .ph .x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center }
.photos .ph .x svg.i { width: 14px; height: 14px }
.photos .ph .cover { position: absolute; bottom: 6px; inset-inline-start: 6px; background: var(--accent-2); color: var(--primary-deep); border-radius: 8px; font-size: 11px; padding: 1px 6px; font-weight: 700 }
.photos .add { border: 1.5px dashed var(--mist-2); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer }
.photos .add svg.i { width: 26px; height: 26px; color: var(--accent) }
.sticky .obtn { flex: 0 0 auto; padding-inline: 18px }

/* عجلة الحظ */
.wheel-card { background: linear-gradient(180deg, var(--soft), var(--surface)); border: 1px solid var(--line); border-radius: 26px; padding: 18px 16px; text-align: center; margin: 14px 0 }
.wheel-box { position: relative; width: min(300px, 82vw); margin: 4px auto 12px }
.wheel { transition: transform 0s; will-change: transform }
.wheel-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25)) }
.pointer { position: absolute; z-index: 2; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-inline: 14px solid transparent; border-top: 26px solid var(--danger); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)) }
.spins { font-size: 13px; color: var(--ink-2); margin-bottom: 10px }
.spins b { font-family: var(--display); font-size: 26px; color: var(--accent); display: block; line-height: 1 }
.wheel-card .bbtn { width: 100% }
.prog-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 12px }
.codebox { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--mist); border-radius: 14px; padding: 10px 12px; margin-top: 8px }
.codebox b { font-family: var(--display); font-size: 24px; letter-spacing: 4px }
.mile { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line) }
.mile:last-child { border-bottom: 0 }
.mile > div { flex: 1; min-width: 0 }
.mile b { font-size: 13px; display: block; margin-bottom: 6px }
.mile .n { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font-weight: 700; font-family: var(--display) }
.mile.on .n { background: var(--success); color: #fff }
.mile .prog { margin: 0 }
.reward, .friend { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line) }
.reward:last-child, .friend:last-child { border-bottom: 0 }
.reward .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0 }
.reward .t { flex: 1; min-width: 0 }
.reward .t b { display: block; font-size: 13.5px }
.reward .t span { font-size: 12px; color: var(--muted) }
.friend b { flex: 1; font-size: 13.5px }
.av.sm { width: 36px; height: 36px; font-size: 15px }
.ok-ic { width: 70px; height: 70px; margin: 0 auto 8px; border-radius: 50%; background: var(--accent-2); color: var(--primary-deep); display: grid; place-items: center }
.ok-ic svg.i { width: 34px; height: 34px }
.mbtn { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; background: var(--surface); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.mbtn.wa { background: #1F8F4E; color: #fff; border-color: #1F8F4E }
.mbtn svg.i { width: 15px; height: 15px }

@media (min-width: 700px) {
  .hero { aspect-ratio: 16 / 8 }
}