/* ============================================================
   HMC — Classic Skin v2.0
   Loaded AFTER main.css when skin=classic. Calm, corporate,
   Solis/LONGi-inspired: white space, flat surfaces, thin borders.
   ============================================================ */

:root {
	--radius: 8px;
	--grad: var(--c-primary);
	--shadow-sm: 0 2px 10px rgba(14, 47, 94, .06);
	--shadow-md: 0 8px 24px rgba(14, 47, 94, .09);
	--shadow-lg: 0 14px 38px rgba(14, 47, 94, .12);
	--c-line: #D9E5F2;
	--c-panel: #EAF2FA;
}
body.skin-classic { background: #fff; }

/* ---------- kill the flash ---------- */
.skin-classic #preloader, .skin-classic #progress-bar,
.skin-classic .hero-rays, .skin-classic .hero-orb, .skin-classic .hero-star,
.skin-classic .hero-grid-pat, .skin-classic .hero-wave, .skin-classic .hero-scroll,
.skin-classic .cta-rays, .skin-classic .cta-star,
.skin-classic .footer-pattern, .skin-classic .frame-deco,
.skin-classic .hero-img-glow { display: none !important; }

.skin-classic .btn::before { display: none; }
.skin-classic .pcard-media::after, .skin-classic .proj-media::after { display: none; }
.skin-classic .cert-card::before { animation: none; height: 3px; background: var(--c-primary); }
.skin-classic .cert-ring { animation: none; border-style: solid; border-color: var(--c-line); }
.skin-classic .hero-kicker .ic { animation: none; }
.skin-classic .wa-float { animation: none; box-shadow: 0 8px 22px rgba(35, 181, 88, .35); }
.skin-classic .video-play { animation: none; }
.skin-classic .float-card { animation: none; }
.skin-classic .hero-media { animation: fadeUp .7s .15s var(--ease) both; }
.skin-classic .svc-card:hover .svc-icon { transform: none; background: var(--c-primary); }
.skin-classic .brand:hover .brand-star { transform: none; }

/* gentler reveal */
.skin-classic .reveal { transform: translateY(16px); transition-duration: .55s; }

/* ---------- topbar: كحلي من الهوية ---------- */
.skin-classic .topbar { background: var(--c-navy); }
.skin-classic .topbar-social a,
.skin-classic .topbar-social a:hover {
	border-radius: 6px; width: 30px; height: 30px; transform: none;
	background: #FFFFFF; color: var(--c-primary) !important;
}
.skin-classic .topbar-social a svg { width: 16px; height: 16px; fill: var(--c-primary); }

/* ---------- header: أزرق من الهوية، لوغو وكتابة بيض ---------- */
.skin-classic .site-header { background: var(--c-primary); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.skin-classic .site-header.scrolled { background: var(--c-primary); box-shadow: 0 4px 16px rgba(14, 47, 94, .25); }
.skin-classic .nav-list a { border-radius: 0; font-weight: 600; color: #fff; }
.skin-classic .nav-list a:hover, .skin-classic .nav-list .current a { color: #fff; }
.skin-classic .nav-list a::after { background: #fff; height: 2px; bottom: 0; inset-inline: 15px; }
.skin-classic .brand-star svg path { fill: #fff; }
.skin-classic .brand-text b { color: #fff; }
.skin-classic .brand-text small { color: #D5E7F8; opacity: 1; }
.skin-classic .lang-switch { border-radius: 4px; border-color: rgba(255, 255, 255, .45); color: #fff; }
.skin-classic .lang-switch:hover { background: #fff; border-color: #fff; color: var(--c-primary); }
.skin-classic .site-header .header-cta.btn-solid { background: #fff; color: var(--c-primary); }
.skin-classic .site-header .header-cta.btn-solid:hover { background: var(--c-navy); color: #fff; }
.skin-classic .burger span { background: #fff; }

/* ---------- buttons: flat rectangles ---------- */
.skin-classic .btn { border-radius: 4px; padding: 12px 28px; font-weight: 600; box-shadow: none; }
.skin-classic .btn:hover { transform: none; box-shadow: none; }
.skin-classic .btn-solid { background: var(--c-primary); }
.skin-classic .btn-solid:hover { background: var(--c-navy); }
.skin-classic .btn-ghost { background: transparent; backdrop-filter: none; border-color: rgba(255,255,255,.55); }
.skin-classic .btn-ghost:hover { background: rgba(255,255,255,.12); }
/* على الخلفيات الفاتحة (هيرو/بانرات): الزر الشبح يصير أزرق واضحاً */
.skin-classic .hero .btn-ghost, .skin-classic .page-hero .btn-ghost, .skin-classic .cat-hero .btn-ghost {
	background: #fff; border: 1.5px solid var(--c-primary); color: var(--c-primary);
}
.skin-classic .hero .btn-ghost:hover, .skin-classic .page-hero .btn-ghost:hover, .skin-classic .cat-hero .btn-ghost:hover {
	background: var(--c-primary); color: #fff;
}
.skin-classic .btn-ghost-dark { border-color: var(--c-primary); }
.skin-classic .btn-ghost-dark:hover { background: var(--c-primary); }
.skin-classic .btn-wa { box-shadow: none; }
.skin-classic .btn-wa:hover { background: #1d9d55; box-shadow: none; }
.skin-classic .btn-white:hover { box-shadow: none; }

/* ---------- hero: white, editorial (Solis-style) ---------- */
.skin-classic .hero { background: #E2EEFA; min-height: 0; border-bottom: 1px solid var(--c-line); }
.skin-classic .hero-bg { background: linear-gradient(180deg, #F0F7FD 0%, #D5E7F8 100%); }
.skin-classic .hero-inner { padding: 56px 0 84px; gap: 48px; align-items: center; }
@media (min-width: 1025px) {
	.skin-classic .hero-inner { grid-template-columns: .85fr 1.15fr; }
}
.skin-classic .hero-copy { color: var(--c-ink); }
.skin-classic .hero-kicker {
	background: none; border: 0; backdrop-filter: none; padding: 0;
	color: var(--c-primary); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
	border-inline-start: 3px solid var(--c-accent); border-radius: 0; padding-inline-start: 12px;
}
.skin-classic .hero-title { color: var(--c-navy); font-weight: 700; }
.skin-classic .hero-title em { color: var(--c-primary); }
.skin-classic .hero-title em::after { display: none; }
.skin-classic .hero-sub { color: #51708e; }
.skin-classic .hero-img-wrap { transform: none !important; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.skin-classic .hero-title { font-size: clamp(1.9rem, 3.9vw, 3rem); }
.skin-classic .hero-title::after { content: ''; display: block; width: 120px; height: 3px; margin-top: 18px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 2px; }
.skin-classic .hero-chips { margin-top: 30px; }
.skin-classic .hchip {
	background: rgba(255,255,255,.85); border: 1px solid rgba(20,95,162,.18); backdrop-filter: none;
	border-radius: 4px; color: #35516e; font-weight: 600;
}
.skin-classic .hchip .ic { color: var(--c-accent); }
.skin-classic .hero-nav { bottom: 40px; }
.skin-classic .hero-dot { background: rgba(14, 47, 94, .16); height: 4px; }
.skin-classic .hero-dot i { background: var(--c-primary); }

/* ---------- sections ---------- */
.skin-classic .sec { padding: 84px 0; }
.skin-classic .bg-light { background: var(--c-panel); }
.skin-classic .bg-pattern { background: var(--c-panel); }
.skin-classic .bg-navy { background: var(--c-navy); }
.skin-classic .bg-gradient { background: var(--c-navy); }

/* section head: Solis-style start-aligned with accent bar */
.skin-classic .sec-head { text-align: start; margin: 0 0 44px; max-width: 780px; }
.skin-classic .kicker {
	background: none; padding: 0; border-radius: 0; margin-bottom: 8px;
	color: var(--c-accent); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
}
.skin-classic .kicker i { display: none; }
.skin-classic .sec-title { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.skin-classic .sec-title::before { content: ''; width: 5px; height: 1.05em; flex: 0 0 auto; background: var(--c-primary); border-radius: 2px; }
.skin-classic .sec-head.center, .skin-classic .sec-head.center .sec-title { text-align: center; justify-content: center; }
.skin-classic .sec-sub { font-size: .98rem; }
.skin-classic .bg-navy .kicker { background: none; color: #7be3df; }

/* ---------- cards: flat, thin borders ---------- */
.skin-classic .svc-card, .skin-classic .step, .skin-classic .cert-card,
.skin-classic .partner-card, .skin-classic .pcard, .skin-classic .proj-card,
.skin-classic .stat, .skin-classic .faq-item, .skin-classic .contact-info,
.skin-classic .contact-form, .skin-classic .specs-box {
	border-radius: var(--radius); border: 1px solid var(--c-line); box-shadow: none;
}
.skin-classic .svc-card:hover, .skin-classic .step:hover, .skin-classic .cert-card:hover,
.skin-classic .partner-card:hover, .skin-classic .pcard:hover, .skin-classic .proj-card:hover {
	transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(20, 95, 162, .25);
}
.skin-classic .svc-card::after { display: none; }
.skin-classic .svc-line { display: none; }
.skin-classic .svc-icon { border-radius: 6px; background: rgba(20, 95, 162, .07); }
.skin-classic .step-icon { border-radius: 6px; }
.skin-classic .step-num { background: none; color: #D7E3EE; -webkit-text-fill-color: currentColor; }
.skin-classic .stat { backdrop-filter: none; }
.skin-classic .stat:hover { transform: none; }

/* ---------- products: Solis-style cards ---------- */
.skin-classic .pcard { text-align: center; }
.skin-classic .pcard-media { background: #fff; border-bottom: 1px solid var(--c-panel); }
.skin-classic .pcard-media img { object-fit: contain; padding: 14px; transition: transform .45s var(--ease); }
.skin-classic .pcard:hover .pcard-media img { transform: scale(1.04); }
.skin-classic .pcard-badge { border-radius: 3px; background: var(--c-primary); color: #fff; font-weight: 700; box-shadow: none; }
.skin-classic .pcard-brand { color: #8aa2b8; }
.skin-classic .pcard-body h3 { font-size: 1.02rem; }
.skin-classic .pcard-body p {
	font-size: .84rem; color: #7b93aa;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.skin-classic .pcard-link { justify-content: center; font-size: .84rem; }

/* filter tabs: quiet rectangles */
.skin-classic .ptab { border-radius: 4px; border-color: var(--c-line); font-weight: 600; }
.skin-classic .ptab.active { background: var(--c-primary); box-shadow: none; }
.skin-classic .ptabs-brands .ptab { border-color: var(--c-line); }
.skin-classic .ptabs-brands .ptab.active { background: var(--c-navy); box-shadow: none; }
.skin-classic .ptabs-tag { background: none; border-inline-start: 3px solid var(--c-accent); border-radius: 0; padding: 2px 10px; }

/* ---------- marquee: quiet logo strip ---------- */
.skin-classic .sec-marquee { background: #fff; border-block: 1px solid var(--c-line); padding: 40px 0; }
.skin-classic .marquee-item { background: none; border: 0; box-shadow: none; padding: 0 10px; }
.skin-classic .marquee-item:hover { transform: none; box-shadow: none; }
.skin-classic .marquee-item img { max-height: 44px; filter: grayscale(1) opacity(.55); }
.skin-classic .marquee-item:hover img { filter: none; transform: none; }
.skin-classic .marquee-track { gap: 72px; animation-duration: 45s; }
.skin-classic .marquee-title { color: #7b93aa; font-size: .88rem; font-weight: 600; }

/* ---------- about / split ---------- */
.skin-classic .about-img-frame { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--c-line); }
.skin-classic .about-img-frame:hover img { transform: none; }
.skin-classic .float-card { border-radius: var(--radius); border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent); box-shadow: var(--shadow-md); }

/* ---------- CTA ---------- */
.skin-classic .cta-box { background: var(--c-navy); border-radius: var(--radius); box-shadow: none; padding: 52px 48px; }

/* ---------- page hero: light band ---------- */
.skin-classic .page-hero { background: #E2EEFA; border-bottom: 1px solid var(--c-line); padding: 64px 0 48px; }
.skin-classic .page-hero-bg { background: linear-gradient(180deg, #F0F7FD, #D5E7F8); }
.skin-classic .page-title { color: var(--c-navy); display: flex; align-items: center; gap: 14px; }
.skin-classic .page-title::before { content: ''; width: 5px; height: 1.05em; flex: 0 0 auto; background: var(--c-primary); border-radius: 2px; }
.skin-classic .page-sub { color: #51708e; }
.skin-classic .crumbs { color: #7b93aa; }
.skin-classic .crumbs a { color: #51708e; }
.skin-classic .crumbs a:hover { color: var(--c-primary); }
.skin-classic .crumbs b { color: var(--c-primary); }

/* ---------- product single ---------- */
.skin-classic .product-main-img { border-radius: var(--radius); border: 1px solid var(--c-line); box-shadow: none; }
.skin-classic .chip { border-radius: 4px; }
.skin-classic .pthumb { border-radius: 4px; border: 1px solid var(--c-line); }
.skin-classic .pthumb.active, .skin-classic .pthumb:hover { border-color: var(--c-primary); }

/* ---------- calculator: light panel ---------- */
.skin-classic .sec-calc { background: var(--c-panel); }
.skin-classic .sec-calc .sec-head .sec-title { color: var(--c-navy); }
.skin-classic .sec-calc .sec-head .sec-sub { color: #51708e; }
.skin-classic .sec-calc .kicker { background: none; color: var(--c-accent); }
.skin-classic .calc-card { background: #fff; border: 1px solid var(--c-line); backdrop-filter: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.skin-classic .cin-top label { color: var(--c-navy); }
.skin-classic .cin-val { background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-ink); border-radius: 4px; }
.skin-classic .cin-val b { color: var(--c-primary); }
.skin-classic .cin input[type=range] { background: #D7E3EE; }
.skin-classic .cin input[type=range]::-webkit-slider-thumb { border-color: var(--c-primary); box-shadow: 0 2px 8px rgba(14,47,94,.25); }
.skin-classic .cin-scale { color: #8aa2b8; }
.skin-classic .calc-note { color: #7b93aa; }
.skin-classic .cres { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 6px; }
.skin-classic .cres:hover { transform: none; }
.skin-classic .cres-save { background: #EDFAF6; border-color: #CDEBE2; }

/* ---------- forms ---------- */
.skin-classic .fgroup input, .skin-classic .fgroup textarea { border-radius: 4px; background: #fff; border-color: var(--c-line); }
.skin-classic .fgroup input:focus, .skin-classic .fgroup textarea:focus { box-shadow: 0 0 0 3px rgba(20,95,162,.08); }
.skin-classic .cinfo-row .ic { border-radius: 4px; }
.skin-classic .map-wrap { border-radius: var(--radius); border: 1px solid var(--c-line); box-shadow: none; }

/* ---------- gallery ---------- */
.skin-classic .gitem { border-radius: 6px; border: 1px solid var(--c-line); }
.skin-classic .gitem:hover img { transform: scale(1.03); }

/* الفوتر: كحلي مسطح من الهوية (ستايلات main.css الأصلية مع إخفاء النقشة) */

/* ---------- misc ---------- */
.skin-classic .to-top { border-radius: 4px; background: var(--c-navy); box-shadow: var(--shadow-md); }
.skin-classic .to-top:hover { transform: none; background: var(--c-primary); }
.skin-classic .tprev:hover, .skin-classic .tnext:hover { transform: none; }
.skin-classic .err-star { animation: none; }

/* ---------- category page banner (Solis inverter.html style) ---------- */
.cat-hero { background: linear-gradient(180deg, #F0F7FD 10%, #D5E7F8 100%); border-bottom: 1px solid var(--c-line); }
.cat-hero-in { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 40px; padding: 34px 0 26px; }
.cat-hero .crumbs { margin: 0 0 14px; color: #7b93aa; }
.cat-hero .crumbs a { color: #51708e; }
.cat-hero .crumbs b { color: var(--c-primary); }
.cat-hero .page-title { color: var(--c-navy); display: flex; align-items: center; gap: 14px; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.cat-hero .page-title::before { content: ''; width: 5px; height: 1.05em; flex: 0 0 auto; background: var(--c-primary); border-radius: 2px; }
.cat-hero .page-sub { color: #51708e; max-width: 460px; }
.cat-count { margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--c-accent); }
.cat-hero-media img { max-height: 330px; width: auto; margin-inline-start: auto; }
@media (max-width: 860px) {
	.cat-hero-in { grid-template-columns: 1fr; gap: 10px; padding: 26px 0 20px; }
	.cat-hero-media img { max-height: 200px; margin-inline: auto; }
}

/* ============================================================
   Product list — Solis-style: sidebar + grouped sections
   ============================================================ */
.plist-layout { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.plist-side { position: sticky; top: 96px; }
.plist-side h4 {
	font-size: .82rem; color: #8aa2b8; font-weight: 700; letter-spacing: .03em;
	margin: 22px 0 10px; padding-inline-start: 10px; border-inline-start: 3px solid var(--c-accent);
}
.plist-side h4:first-child { margin-top: 0; }
.plist-nav { display: flex; flex-direction: column; }
.plist-nav button, .plist-nav a {
	display: block; text-align: start; background: none; border: 0; border-inline-start: 2px solid var(--c-line);
	padding: 9px 14px; font-family: inherit; font-size: .9rem; font-weight: 600; color: #51708e;
	cursor: pointer; transition: .2s;
}
.plist-nav button:hover, .plist-nav a:hover { color: var(--c-primary); }
.plist-nav button.active, .plist-nav a.active { color: var(--c-primary); border-inline-start-color: var(--c-primary); background: rgba(20,95,162,.05); }
.pgroup { margin-bottom: 54px; scroll-margin-top: 110px; }
.pgroup.hide { display: none; }
.pgroup-title {
	display: flex; align-items: center; gap: 12px;
	font-size: 1.25rem; color: var(--c-navy); font-weight: 700; margin-bottom: 22px;
}
.pgroup-title::before { content: ''; width: 4px; height: 1.05em; background: var(--c-primary); border-radius: 2px; }
.pgroup-count { font-size: .8rem; font-weight: 600; color: #8aa2b8; }
@media (max-width: 1024px) {
	.plist-layout { grid-template-columns: 1fr; gap: 20px; }
	.plist-side { position: static; }
	.plist-side h4 { margin-top: 12px; }
	.plist-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.plist-nav button, .plist-nav a { border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 16px; font-size: .84rem; }
	.plist-nav button.active, .plist-nav a.active { border-color: var(--c-primary); background: rgba(20,95,162,.06); }
}
/* hero on tablets/phones: single column, image under the copy */
@media (max-width: 1024px) {
	.skin-classic .hero-inner { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 84px; }
	.skin-classic .hero-media { max-width: none; }
	.skin-classic .hero-img-wrap img { max-height: 300px; width: auto; max-width: 100%; margin-inline: auto; }
	.skin-classic .hero-title { font-size: clamp(1.6rem, 5.4vw, 2.2rem); }
	.skin-classic .hero-title::after { width: 90px; margin-top: 12px; }
	.skin-classic .hero-chips { margin-top: 18px; }
	.skin-classic .hero-nav { bottom: 30px; }
}
@media (max-width: 520px) {
	.skin-classic .hero-inner { padding: 30px 0 72px; gap: 20px; }
	.skin-classic .hero-img-wrap img { max-height: 210px; }
	.skin-classic .hero-sub { font-size: .9rem; margin-bottom: 18px; }
	.skin-classic .hero-kicker { font-size: .78rem; }
	.skin-classic .hchip { padding: 6px 11px; font-size: .7rem; }
	.skin-classic .sec { padding: 52px 0; }
	.skin-classic .sec-head { margin-bottom: 28px; }
	.pgroup { margin-bottom: 36px; }
	.pgroup-title { font-size: 1.05rem; margin-bottom: 14px; }
}