/* ======================================================================
 * 4.12 — الجولة الثانية (التصورات المعتمدة 2.14)
 * ==================================================================== */

/* --- One size for every hint text inside a field (search, «احكي لفرحة», «نصيحة فرحة إلك»…):
       one step smaller than the button text. What you type stays 16px on phones (no iPhone zoom). --- */
:root{--f-hint:11.5px}
body.v3 input::placeholder,body.v3 textarea::placeholder{font-size:var(--f-hint)!important;font-weight:400;color:var(--mu);opacity:1}
body.v3 .nh-askrow span,body.v3 .n-askp input::placeholder{font-size:var(--f-hint)!important}

/* --- 1 · home: search card under the hero, nothing on top of anything --- */
.nh-hero>.nh-s:first-child .nh-hero-t>.n-pill{display:none}
.nh-find{margin:12px 0 0}
.nh-askrow{display:flex;align-items:center;gap:8px;width:100%;margin-top:9px;height:44px;padding:0 6px 0 8px;border-radius:14px;border:1px dashed rgba(201,162,74,.38);background:transparent;color:var(--mu);font:inherit;cursor:pointer;text-align:start}
.nh-askrow .n-av,.nh-askrow img{width:28px!important;height:28px!important;border-radius:50%;flex:none}
.nh-askrow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-askrow em{font-style:normal;flex:none}
.nh-askrow:hover{border-color:var(--gd)}
@media (min-width:900px){.nh-find{margin:0}.nh-askrow{display:none}}

/* --- 3 · halls strip: a real scroll row (the finger can drag it) --- */
.n-mq.n-mq2{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.n-mq.n-mq2::-webkit-scrollbar{display:none}
.n-mq.n-mq2 .n-mq-t{animation:none!important}

/* --- 4 · «شو بدك تعمل اليوم؟»: every label on one line --- */
.nh-tools a span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:-.1px}
@media (min-width:900px){.nh-tools a span{font-size:12.5px}}

/* --- 5 · 360: one small card, one button (same sizes as every pill) --- */
.nh-t3{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:20px;background:linear-gradient(135deg,#1d1710,#100d0a);border:1px solid var(--ln)}
.nh-t3 .nh-ic{width:84px;height:84px;object-fit:contain}
.nh-t3 em{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:var(--gd);color:#17140F;font:700 12px var(--fb);font-style:normal}
.nh-t3 h2,body.v3 .nh-t3 h2{margin:6px 0 2px;font:800 16px/1.35 var(--fh);color:var(--tx)}
.nh-t3 p{margin:0 0 10px;font-size:12px;line-height:1.6;color:var(--mu)}
@media (min-width:900px){.nh-t3{grid-template-columns:110px minmax(0,1fr);padding:20px 24px}.nh-t3 .nh-ic{width:110px;height:110px}.nh-t3 h2,body.v3 .nh-t3 h2{font-size:20px}}

/* --- 6 · feature cards: the icon beside the title, two short lines --- */
.nh-feats a{flex-direction:row!important;align-items:center;gap:9px;padding:11px}
.nh-feats .nh-ic{width:36px;height:36px;flex:none}
.nh-feats a>span{min-width:0}
.nh-feats b,.nh-feats small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- 7 · bottom bar: «you are here» = a soft gold glow behind the icon (no line) --- */
.n-bnav a.on::after{display:none!important}
.n-bnav a.on>svg{box-sizing:content-box;padding:3px 14px;border-radius:999px;background:rgba(201,162,74,.16)}
.n-bnav a.on{color:var(--gp,#E8CF8A)!important}

/* --- 8 · page head: a card with a soft gold glow, its own golden icon, numbers on one line --- */
.n-hero:not(.has-img){padding:10px 0 4px;border-bottom:0;background:none;overflow:visible}
.n-hero-p:not(.has-img){padding:12px 0 4px}
.n-hcard{position:relative;overflow:hidden;padding:14px 14px 16px;border-radius:20px;border:1px solid var(--ln);background:radial-gradient(circle at 12% 0%,rgba(201,162,74,.22),transparent 58%),linear-gradient(160deg,#1f1810,#0f0c09)}
.n-hero.has-img .n-hcard{padding:0;border:0;background:none;overflow:visible}
.n-hcard.has-ic{padding-inline-end:84px}
.n-hcard-ic{position:absolute;inset-inline-end:12px;top:14px;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.n-hcard .crumbs{font-size:11px}
.n-hcard h1{margin:4px 0 0!important;font-size:23px!important;line-height:1.3}
.n-hcard .n-lead{margin:4px 0 0;font-size:12.5px;color:var(--mu)}
.n-hcard .n-ist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin-top:10px}
.n-hcard .n-ist::-webkit-scrollbar{display:none}
.n-hcard .n-ist span{flex:none;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--ln);background:rgba(13,11,8,.55);font-size:11.5px}
@media (min-width:900px){.n-hcard{padding:22px 26px}.n-hcard.has-ic{padding-inline-end:130px}.n-hcard-ic{width:96px;height:96px;inset-inline-end:24px;top:50%;transform:translateY(-50%)}.n-hcard h1{font-size:32px!important}}
.hr .n-hero{margin-bottom:6px}

/* --- 9 · hall & supplier numbers: all the same height, icon + number, one line --- */
.n-pf-pl{gap:6px;align-items:center}
.n-pf-pl li{display:flex;align-items:center}
.n-pf-pl a,.n-pf-pl li>span,.n-pf-pl li>button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--ln);background:var(--s1);color:var(--mu)!important;font:inherit;font-size:12px;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.n-pf-pl li.m-farha a,.n-pf-pl li.m-farha>span,.n-pf-pl li.m-farha>button{height:30px;padding:0 10px 0 4px;font-size:12px;border-color:rgba(201,162,74,.5);background:rgba(201,162,74,.1);color:var(--gl)!important}
.n-pf-pl li.m-farha b{font-size:12px!important}
.n-pf-pl li.m-farha .n-av,.n-pf-pl li.m-farha img{width:22px!important;height:22px!important}
.n-pf-pl b{font-size:12px}
.n-pf-pl .n-i{width:15px;height:15px}

/* --- 10 · «لسه بتتعرّف» sheet --- */
.n-lrn{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.n-lrn-fh{width:64px;height:auto;flex:none}
.n-lrn>div{flex:1;min-width:0}
.n-lrn b{display:block;font-size:15px}
.n-lrn small{display:block;color:var(--mu);font-size:12px}
.n-lrn-m{display:block;height:7px;border-radius:9px;background:var(--ln);overflow:hidden;margin:7px 0 5px}
.n-lrn-m i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--gd),var(--gp,#E8CF8A))}

/* --- 12 · zaffeh, facts and features: one size (the facts card) --- */
.n-zf-l,.n-feat8{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
@media (min-width:640px){.n-zf-l,.n-feat8{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (min-width:1100px){.n-zf-l,.n-feat8{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.n-zf-i,.n-feat8 li{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;padding:10px 11px!important;border-radius:14px;background:var(--s1);border:1px solid var(--ln);min-width:0;min-height:56px;text-align:start!important;font:700 11.5px/1.45 var(--fb)!important;color:var(--tx)!important}
.n-zf-i img,.n-feat8 img{width:26px!important;height:26px!important;padding:4px!important;box-sizing:content-box;flex:none;border-radius:11px!important;object-fit:contain;background:linear-gradient(150deg,rgba(201,162,74,.22),rgba(201,162,74,.06))!important;border:1px solid rgba(201,162,74,.28)!important}
.n-zf-i b{font:inherit!important}
.n-zf-i i{width:34px;height:34px}
.n-feat8 li span{min-width:0}

/* --- 13 · «نصيحة فرحة إلك» and every ask line: hint one step under the button --- */
.n-askp input{font-size:16px}
@media (min-width:821px){.n-askp input{font-size:13px}}

/* --- 14 · supplier: WhatsApp as an icon beside the main button; socials as «تابعهم» --- */
.n-ib-wa img,.n-ib-wa svg{width:20px;height:20px}
.n-follow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:12px;padding-top:10px;border-top:1px solid var(--ln);font-size:12px;color:var(--mu)}
.n-follow::-webkit-scrollbar{display:none}
.n-follow>span{flex:none}
.n-follow a{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;min-width:30px;justify-content:center;padding:0 6px;border-radius:999px;border:1px solid var(--ln);background:var(--s1);color:var(--tx)!important;text-decoration:none!important;font-size:11.5px}
.n-follow a img,.n-follow a svg{width:18px;height:18px}
.n-follow a.txt{padding:0 10px}

/* --- 15–17 · supplier end: claim once, report as a small line --- */
.n-claim3{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px;border-radius:16px;border:1px solid rgba(201,162,74,.45);background:linear-gradient(135deg,#221a10,#120f0b)}
.n-claim3 .n-av,.n-claim3>img{width:40px!important;height:40px!important;border-radius:50%;flex:none}
.n-claim3>div{flex:1;min-width:0}
.n-claim3 b{display:block;font-size:14px}
.n-claim3 small{display:block;font-size:12px;color:var(--mu);line-height:1.5}
.n-claim3 .n-pill{flex:none}
.n-foot2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 0;padding-top:10px;border-top:1px solid var(--ln);font-size:11.5px;color:var(--mu)}
.n-foot2 .hall-report{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;color:var(--mu);font:inherit;font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.n-foot2 .n-i{width:13px;height:13px}

/* --- 18 · footer: short; groups fold on phones, open in columns on wide screens --- */
.n-f3-col details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.n-f3-col details>summary::-webkit-details-marker{display:none}
.n-f3-col details>summary h3{margin:0!important}
.n-f3-col details>summary .n-i{width:16px;height:16px;color:var(--mu);transition:transform .2s}
.n-f3-col details[open]>summary .n-i{transform:rotate(180deg)}
@media (max-width:899px){
	.n-f3-box{gap:8px!important}
	.n-f3-about{margin-bottom:10px}
	.n-f3-app{margin-top:6px}
	.n-f3-col{border:1px solid var(--ln);border-radius:14px;padding:0 14px!important;margin:0!important;background:rgba(13,11,8,.35)}
	.n-f3-col details>summary{min-height:46px}
	.n-f3-col details>summary h3{font-size:14px!important}
	.n-f3-col details>ul,.n-f3-col details>.menu{padding-bottom:12px!important;margin:0!important}
	.n-f3-app .n-f3-soon,.n-f3-app .n-stores,.n-f3-app [class*="stores"]{display:none!important}
	.n-f3-app{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px}
	.n-f3-app h3{margin:0!important;font-size:14px!important}
	.n-f3-app p{grid-column:1;margin:0!important;font-size:11.5px}
	.n-f3-app .n-pill{grid-column:2;grid-row:1/3}
}
@media (min-width:900px){.n-f3-col details>summary{pointer-events:none}.n-f3-col details>summary .n-i{display:none}}

/* 4.12.1 — the filter sheet on phones: a <fieldset> grows to its widest chip row (min-content) and the whole page zooms out. */
body.v3 fieldset{min-width:0;max-width:100%}
.n-sf,.n-sf-sheet{min-width:0;max-width:100%}

/* 4.12.1 — bell count: a small round badge on the bell's corner (it was stretched across the top: both sides were set). */
.v3 .afn-bell .afn-n,.afn-bell .afn-n{inset-inline-start:auto!important;left:auto;top:-2px!important;inset-inline-end:-2px!important;width:auto;min-width:17px;height:17px;padding:0 4px!important;border-radius:9px;font:800 10px/17px var(--fb,system-ui);box-shadow:0 0 0 2px #0B0907;display:inline-block;text-align:center}
.afn-bell .afn-n[hidden]{display:none!important}

/* 4.12.1 — halls toolbar: «قريب مني» lights up when it is on; map/list is last with its own colour (never the gold fill). */
html body .n-tools .n-tb.map-tgl,html body .n-tools .n-tb.map-tgl[aria-pressed="true"]{background:rgba(110,160,220,.12)!important;border-color:rgba(130,175,230,.55)!important;color:#cfe0f6!important}
html body .n-tools .n-tb.map-tgl .ui-ic,html body .n-tools .n-tb.map-tgl .n-i{color:#9fc2ee}
html body .n-tools .n-tb[data-near-go][aria-pressed="true"]{background:var(--gd)!important;border-color:var(--gd)!important;color:#17140F!important}

/* 4.12.1 — supplier card: the badges go to the top corner (they were sitting on the logo). */
.sup-card .ph .bdg-row{bottom:auto;top:10px;right:10px;left:auto}
.sup-card.is-plus .ph .bdg-row{top:38px}
.n-fb-stories{margin:2px 0 4px}
.n-fb-stories .n-rail{margin-inline:0;padding-inline:2px}
.n-fe .n-lrn-m{max-width:240px;margin:8px 0 4px}

/* 4.12.1 — profile head: the numbers beside the photo (Farha + Google up, photos · likes · contributions under). */
.n-pf-side2 .n-pf-row{align-items:flex-end}
.n-pf-sd{flex:1;min-width:0;display:grid;gap:6px;padding-bottom:4px}
.n-pf-sd1,.n-pf-sd2{display:flex;gap:6px;min-width:0}
.n-sd{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;border:1px solid var(--ln);background:var(--s1);color:var(--tx)!important;text-decoration:none!important;font:inherit;cursor:pointer;white-space:nowrap}
.n-sd-big{height:40px;border-radius:12px;padding:0 8px}
.n-sd-big .v{display:grid;line-height:1.15;text-align:start;min-width:0}
.n-sd-big b{font-size:15px;font-weight:800}
.n-sd-big small{font-size:10px;color:var(--mu);overflow:hidden;text-overflow:ellipsis}
.n-sd-big .n-av,.n-sd-big>img{width:24px!important;height:24px!important;border-radius:50%;flex:none}
.n-sd-big.is-farha{border-color:rgba(201,162,74,.55);background:rgba(201,162,74,.1)}
.n-sd-big.is-farha b{color:var(--gp,#E8CF8A)}
.n-sd-big .n-i{width:18px;height:18px;color:var(--gl)}
.n-sd-mini{height:32px;border-radius:999px;padding:0 8px;font-size:12.5px}
.n-sd-mini b{font-weight:800}
.n-sd-mini .n-i{width:15px;height:15px;color:var(--gl)}
.n-pf-side2 .n-pf-sub{margin-top:4px}
.n-pf-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--mu)}
.n-pf-meta>span+span::before,.n-pf-meta>*+span::before{content:"·";margin-inline-end:6px;color:var(--mu)}
@media (min-width:900px){
	.n-pf-side2 .n-pf-row{margin-bottom:0!important}
	.n-pf-side2 .n-pf-in>:not(.n-pf-row),.n-pf-side2 .n-pf-in>.n-pf-act{padding-inline-start:0!important}
	.n-pf-sd{max-width:520px}
	.n-sd-big{height:46px}
	.n-sd-big b{font-size:17px}
}

/* supplier facts as cards */
.n-fx-sup .w{grid-column:1/-1}
.n-fx-sup dt{font-size:10px;color:var(--mu);line-height:1.3;margin:0}
.n-fx-sup+.n-follow{margin-top:12px}
