/* ===== Ford grille header v2 ===== */
.fh{direction:ltr;width:100%;position:relative;z-index:99980;--fh-blue:#2f8cff;--fh-snow:#f4faff}
.fh *{box-sizing:border-box}
.fh a{text-decoration:none!important}

/* ---------- صحنه اصلی (جلوپنجره) ---------- */
.fh-hero{
	position:relative;padding:26px 3% 0;
	background:radial-gradient(ellipse at 50% 30%,#4d545a 0%,#21262b 46%,#07090b 100%);
	border-bottom:3px solid #8b97a3;
	box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 -1px 0 #e9eef3;
	overflow:hidden;
}
.fh-stage{position:relative;width:min(100%,940px);margin:0 auto;aspect-ratio:1000/340;filter:drop-shadow(0 14px 18px rgba(0,0,0,.65))}
.fh-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* هاله نور روی بدنه */
.fh-halo{opacity:0;transition:opacity .35s ease}
.fh-stage[data-lit~="l"] .fh-halo-l,.fh-stage[data-lit~="r"] .fh-halo-r{opacity:1}
.fh-led{opacity:.42;transition:opacity .3s,stroke .3s,filter .3s}
.fh-stage[data-lit~="l"] .fh-led-l,.fh-stage[data-lit~="r"] .fh-led-r{
	opacity:1;stroke:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #2f8cff)
}
/* نور خوشامدگویی هنگام بارگذاری */
.fh-hero .fh-led{animation:fh-welcome 1.6s ease-out .3s 1 both}
@keyframes fh-welcome{
	0%{opacity:.05}
	18%{opacity:1;stroke:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #2f8cff)}
	34%{opacity:.15}
	52%{opacity:1;stroke:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #2f8cff)}
	100%{opacity:.42}
}

/* ---------- پلاک لوگو روی نوار کروم ---------- */
.fh-plate{
	position:absolute;left:50%;top:46.2%;width:21%;aspect-ratio:2.5/1;transform:translate(-50%,-50%);z-index:4;
	border-radius:50%;
	background:linear-gradient(145deg,#ffffff,#8d99a5 26%,#f1f4f7 50%,#59636d 76%,#f7fafc);
	box-shadow:0 5px 12px rgba(0,0,0,.8),0 0 0 2px #1f242a,inset 0 0 5px rgba(0,0,0,.4);
}
.fh-plate-in{
	position:absolute;inset:clamp(3px,.65vw,8px);border-radius:50%;overflow:hidden;
	background:radial-gradient(ellipse at 50% 18%,#3a4350 0%,#12171d 55%,#06080b 100%);
	box-shadow:inset 0 3px 8px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.2);
	display:flex;align-items:center;justify-content:center;padding:0 12%;
}
.fh-plate-in::after{
	content:"";position:absolute;left:8%;right:8%;top:5%;height:42%;border-radius:50%;
	background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none;
}
.fh-plate a{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.fh-plate img,.fh-plate .custom-logo{max-height:clamp(18px,3.6vw,44px);width:auto;max-width:100%;height:auto;display:block;filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}
.fh-name{color:#fff!important;font-weight:800;font-size:clamp(.6rem,1.7vw,1.1rem);text-align:center;line-height:1.2;direction:rtl;text-shadow:0 0 10px #6e9bb9,0 1px 2px #000;letter-spacing:.3px}

/* ---------- چراغ‌ها = دکمه‌های هدر ---------- */
.fh-light{position:absolute;display:block;z-index:5;color:#9fb4c9;transition:filter .25s ease}
.fh-svg{display:block;width:100%;height:auto;overflow:visible}
.fh-side-r.fh-head .fh-svg{transform:scaleX(-1)}
.fh-s-l1{left:2.8%;top:15.3%;width:18.6%}
.fh-s-r2{left:78.6%;top:15.3%;width:18.6%}
.fh-s-l2{left:23.8%;top:23.4%;width:6.4%}
.fh-s-r1{left:69.8%;top:23.4%;width:6.4%}

.fh-on{opacity:0;transition:opacity .25s ease}
.fh-ico{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;color:#7f97b2;transition:color .25s;pointer-events:none}
.fh-ico svg{width:100%;height:100%}
.fh-fog .fh-ico{left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%)}
.fh-head .fh-ico{top:57%;width:11%;aspect-ratio:1;transform:translate(-50%,-50%)}
.fh-side-l.fh-head .fh-ico{left:73%}
.fh-side-r.fh-head .fh-ico{left:27%}

.fh-label{
	position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);z-index:3;white-space:nowrap;
	font-size:clamp(.5rem,1.15vw,.78rem);font-weight:700;color:#cfe0f2;direction:rtl;
	padding:2px 10px;border-radius:999px;background:rgba(3,5,8,.82);border:1px solid rgba(160,180,200,.35);
	text-shadow:0 1px 2px #000;transition:color .25s,border-color .25s,box-shadow .25s;
}
.fh-count{
	position:absolute;z-index:6;top:-8px;right:4%;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
	background:#e11d2e;color:#fff;font-size:.68rem;line-height:18px;text-align:center;font-weight:700;box-shadow:0 0 0 2px #05070a;
}
.fh-count[data-n="0"]{display:none}

/* ---------- هاور: نور سفید برفی + آبی ---------- */
.fh-light:hover,.fh-light:focus-visible,.fh-light.is-current{
	filter:drop-shadow(0 0 7px rgba(244,250,255,.95)) drop-shadow(0 0 20px rgba(47,140,255,.9));
}
.fh-light:focus-visible{outline:none}
.fh-light:hover .fh-on,.fh-light:focus-visible .fh-on{opacity:1}
.fh-light:hover .fh-ico,.fh-light:focus-visible .fh-ico{color:#0a2f6b}
.fh-light:hover .fh-led,.fh-light:focus-visible .fh-led,.fh-light.is-current .fh-led{
	opacity:1;stroke:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #2f8cff);animation:none
}
.fh-light:hover .fh-label,.fh-light:focus-visible .fh-label{color:#fff;border-color:#9fd0ff;box-shadow:0 0 10px rgba(47,140,255,.7)}
.fh-light:hover .fh-svg{animation:fh-flash .35s ease-out}
@keyframes fh-flash{0%{filter:brightness(.55)}40%{filter:brightness(1.7)}100%{filter:brightness(1)}}

/* ---------- نوار پایین ---------- */
.fh-strip{
	display:flex;justify-content:space-around;align-items:center;gap:10px;flex-wrap:wrap;
	margin:0 -3.5%;padding:12px 5%;direction:rtl;
	background:linear-gradient(180deg,#2b3035,#07090b);border-top:2px solid #858c91;
}
.fh-strip span{color:#d2d7db;font-size:.78rem;display:flex;align-items:center;gap:8px}
.fh-strip span::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,#6b747b);box-shadow:0 0 6px #7adfff}

/* ---------- نوار فشرده (چسبان) ---------- */
.fh-bar{
	position:fixed;top:0;left:0;right:0;z-index:99991;height:60px;padding:0 14px;
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	background:linear-gradient(180deg,#2d3237,#0b0d10);border-bottom:2px solid #8b97a3;
	box-shadow:0 6px 20px rgba(0,0,0,.6);
	transform:translateY(-115%);transition:transform .3s ease;
}
.admin-bar .fh-bar{top:32px}
@media (max-width:782px){.admin-bar .fh-bar{top:46px}}
body.fh-scrolled .fh-bar{transform:none}
.fh-bar-group{display:flex;gap:10px;align-items:center}
.fh-dot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;color:#9fb4c9;font-size:.62rem;font-weight:700;direction:rtl}
.fh-dot i{
	position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	border:2px solid #b4bec7;background:radial-gradient(circle at 35% 28%,#44505e,#0b0f14);box-shadow:inset 0 0 6px #000;
	transition:background .25s,box-shadow .25s,color .25s;color:#7f97b2;
}
.fh-dot i svg{width:18px;height:18px}
.fh-dot:hover,.fh-dot:focus-visible,.fh-dot.is-current{color:#fff}
.fh-dot:hover i,.fh-dot:focus-visible i{
	background:radial-gradient(circle at 50% 45%,#fff,#f4faff 35%,#bfe0ff 72%,#6fb0ff);color:#0a2f6b;border-color:#e1f1ff;
	box-shadow:0 0 8px 2px #fff,0 0 22px 7px rgba(47,140,255,.85)
}
.fh-dot.is-current i{box-shadow:0 0 8px 1px rgba(120,185,255,.7)}
.fh-dot .fh-count{top:-6px;right:6px}
.fh-bar-logo{
	flex:0 1 auto;max-width:42vw;padding:5px 22px;border-radius:999px;display:flex;align-items:center;justify-content:center;
	background:linear-gradient(145deg,#f4f7fa,#8d99a5 40%,#e9eef2 60%,#59636d);box-shadow:0 2px 8px #000;
}
.fh-bar-logo>*{background:radial-gradient(ellipse at 50% 20%,#3a4350,#0a0d11);border-radius:999px;padding:4px 18px;display:flex;align-items:center}
.fh-bar-logo img{max-height:28px;width:auto;display:block}
.fh-bar-logo .fh-name{font-size:.85rem}

@media (prefers-reduced-motion:reduce){
	.fh-hero .fh-led,.fh-light:hover .fh-svg{animation:none}
}
@media (max-width:900px){.fh-strip{justify-content:center}}
@media (max-width:700px){
	body .fh-bar{transform:none}
	.fh-hero{padding:72px 6px 0}
	.fh-strip{margin:0 -2%;padding:9px 4%}
	.fh-strip span{font-size:.68rem}
	.fh-hero .fh-ico,.fh-hero .fh-label,.fh-hero .fh-count{display:none}
	.fh-bar-logo{padding:4px 12px}
	.fh-bar-logo>*{padding:3px 10px}
	.fh-bar-group{gap:4px}
	.fh-dot{min-width:46px}
}
