/* Site-wide design layer v2: clean, tinted page, white bordered cards, photo-led. Same font (Cairo), same navy + orange. Loads after every other stylesheet. */
:root{--bg:#f1f4f8;--surface:#fff;--card:#fff;--band2:#e6ecf3;--line:#cfd7e1;--field:#9eacbc;--muted:#3f5165;--tint:#ffe0cb;--shadow:0 1px 2px rgba(20,40,60,.10),0 10px 26px rgba(20,40,60,.10);
--page-ink:#14283c;--page-muted:#3f5165;--page-surface:#fff;--page-line:#cfd7e1;--page-accent:#c2410c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--card:#172637;--band2:#0c1723;--field:#3a5068;--tint:rgba(255,122,46,.14);--shadow:none;--page-ink:#f1efe9;--page-muted:#a3b2c2;--page-surface:#172637;--page-line:#2a3d52;--page-accent:#ff7a2e}}
:root[data-theme="dark"]{--card:#172637;--band2:#0c1723;--field:#3a5068;--tint:rgba(255,122,46,.14);--shadow:none;--page-ink:#f1efe9;--page-muted:#a3b2c2;--page-surface:#172637;--page-line:#2a3d52;--page-accent:#ff7a2e}

header{background:var(--card);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.tape{display:none}
.btn{border-radius:14px}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn.wa,.hero .cta .btn.wa{background:#168a3f;color:#fff;border-color:#168a3f}

/* titles */
h2.t::before{content:"";display:block;width:34px;height:4px;border-radius:4px;background:var(--accent);margin-bottom:14px}
.sub{font-size:18px;line-height:1.8;color:var(--muted)}
.crumb{color:var(--muted);font-size:14px}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--accent-text)}

/* hero (light) */
.hero{background:var(--bg);color:var(--page-ink);--ink:var(--page-ink);--muted:var(--page-muted);--surface:var(--page-surface);--line:var(--page-line);--accent-text:var(--page-accent)}
.hero .lead2,.hero .lead{color:var(--muted)}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:15px;font-weight:700;color:var(--accent-text)}
.hero .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hero .svcline{color:var(--ink);font-weight:700}
.hero .btn:not(.wa):not(.ghost){background:var(--accent);color:#14283c;border-color:var(--accent)}
.hero h1{letter-spacing:-.3px}
.hero .ticks li{font-weight:700}

/* panels and cards */
.band{background:var(--band2);color:var(--ink)}
.band .sub{color:var(--muted)}
.band .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}
#contact.band{background:var(--band);color:var(--band-ink)}
#contact.band .sub{color:color-mix(in srgb,var(--band-ink) 72%,transparent)}
#contact.band .btn.ghost,.band.dark .btn.ghost{background:transparent;color:var(--band-ink);border-color:var(--band-ink)}
.card,.rv{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.grid .card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint);color:var(--accent-text);font-size:24px;margin-bottom:16px}
.grid .card h3{font-size:19px}
.grid .card p{font-size:15.5px}
.card.quote{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px}
.card.warranty{border:1px solid var(--line);border-inline-start:5px solid var(--accent)}
.photo,.af img{border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}

/* forms */
input,select,textarea{background:var(--card);border:1px solid var(--field);border-radius:12px;padding:13px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--tint)}
.quote .btn{min-height:54px;font-size:18px}

/* lists, faq, chips */
.why{gap:8px 56px}
.why div{border-bottom:0;border-top:1px solid var(--field);padding:20px 0 14px}
.why b{font-size:19px;margin-bottom:2px}
details{background:transparent;border:0;border-bottom:1px solid var(--field);border-radius:0;margin:0}
summary{padding:20px 4px;font-size:18px}
summary::after{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);flex:none;font-size:20px}
details p{padding:0 4px 20px;color:var(--muted)}
.chips li{background:var(--card);border:1px solid var(--line);padding:8px 20px;box-shadow:0 1px 2px rgba(20,40,60,.06)}
.chips li.all{background:var(--accent);border-color:var(--accent)}

/* guide articles */
.art p,.art li{line-height:1.95}
.art a:not(.btn){color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:3px}
.af{margin-inline:0}
.af figcaption{color:var(--muted);font-size:14px;margin-top:8px}



@media (min-width:861px){
.hero{padding:64px 0 56px}
.hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.2}
section{padding:80px 0}
section[style*="padding-top:0"]{padding-top:0!important}
}
@media (max-width:860px){.card.quote{padding:22px;border-radius:22px}}
/* light band on inner pages: inline band-ink (white) made the call button invisible */
.band:not(#contact):not(.dark) .btn.ghost[style]{color:var(--ink)!important;border-color:var(--ink)!important}
/* dark contact band: readable orange on hover (dark orange failed contrast on navy) */
#contact.band a[href^="tel:"]:not(.btn):hover,#contact.band a[href^="mailto:"]:hover,#contact.band a[href^="https://wa.me"]:not(.btn):hover{color:var(--accent)}

/* quote form on phones: one field per row (the two floors stay side by side), consistent heights, no clipped text */
@media (max-width:560px){
#qf .two{grid-template-columns:1fr;gap:0}
#qf .two:nth-of-type(3){grid-template-columns:1fr 1fr;gap:10px}
#qf .two>div{margin-bottom:12px;min-width:0}
#qf label{display:block;margin-bottom:6px;font-size:14px;line-height:1.4}
#qf input:not([type=checkbox]),#qf select{width:100%;min-height:48px;font-size:16px;padding:10px 12px;box-sizing:border-box;text-overflow:ellipsis}
#qf input[type=date]{font-size:16px;-webkit-appearance:none;appearance:none;text-align:start;display:block}
#qf fieldset{margin:4px 0 14px}
#qf .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#qf .checks label{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
}

/* ===== توحيد الفوتر والأزرار والهيدر مع الصفحة الرئيسية (فوتر غامق) ===== */
footer{background:#08101d;color:#a9b7d0;border-top:0;padding-top:48px}
footer .fcols h4,
footer .fcols h3{color:#fff}
footer .fcols a,footer .copy a{color:#a9b7d0;padding-block:8px}
footer .fcols a:hover,footer .fcols a:focus-visible,footer .copy a:hover{color:#ff9a4d}
footer .copy{border-top-color:#1f3250}
footer .flogo span{color:#a9b7d0}
html .btn:not(.wa):not(.ghost),html header .btn.hcall,html header .btn.hcall:hover{background:#ff7a2e;border-color:#ff7a2e;color:#14283c}
html .btn.wa,html .hero .cta .btn.wa,html .hero .btn.wa{background:#168a3f;border-color:#168a3f;color:#fff}
@media (max-width:560px){#qf .two:nth-of-type(3){grid-template-columns:1fr}}

/* ===== v3: مشترك للصفحات الداخلية (أيقونات مرسومة، أيقونات التواصل، زر واتساب في القسم الداكن، الفورم المطوي) ===== */
:root{--flat-bg:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--flat-bg:#fff}}
:root[data-theme="dark"]{--flat-bg:#fff}
.ic.flat{display:grid;place-items:center;width:fit-content!important;height:auto!important;min-width:62px;background:var(--flat-bg)!important;border-radius:12px;padding:4px 8px;margin:0 0 14px}
.ic.flat img{display:block;height:54px;width:auto;max-width:96px;object-fit:contain}
.ic.flat svg.il{display:block;width:80px;height:67px;margin-block:-6px}
.ci{flex:none;width:34px;height:34px;border-radius:50%;background:#ff7a2e;display:inline-grid;place-items:center;vertical-align:middle}
.ci svg{width:18px;height:18px;fill:none;stroke:#14283c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
li:has(>.ci){display:flex;align-items:center;gap:10px}
.band .contact li:has(>.ci){margin:0 0 10px}
#qf .qmore{margin:4px 0 16px;border:1px solid var(--line);border-radius:12px}
#qf .qmore summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;min-height:48px;font-weight:700;color:var(--ink)}
#qf .qmore summary::-webkit-details-marker{display:none}
#qf .qmore summary::after{content:"+";flex:none;font-size:24px;line-height:1;font-weight:700;color:var(--accent-text)}
#qf .qmore[open] summary::after{content:"\2212"}
#qf .qmore[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
#qf .qmore>:not(summary){margin-inline:16px}
#qf .qmore>fieldset{margin-bottom:16px}
#qf .qmore .two:first-of-type{grid-template-columns:1fr}
@media (max-width:860px){#qf .qmore .two:nth-of-type(3){grid-template-columns:1fr}}
#qf .checks label{min-height:44px;cursor:pointer}
#qf .checks input{width:22px;height:22px}

/* لوجو الفوتر: أكبر وأوضح (الفوتر غامق دائمًا) */
html .flogo .hlogo{width:220px;height:auto;max-width:100%}
html .flogo span{color:#c9d4e6!important}

/* صفحة اتصل بنا: منع تمدد العمود بسبب الإيميل الطويل */
.ct{min-width:0;overflow-wrap:anywhere}
.hero .wrap>*{min-width:0}
@media (max-width:560px){.hero ul li:has(>.ci){font-size:16px!important;align-items:flex-start}.hero ul li:has(>.ci) .ci{margin-top:-2px}}

/* زر اتصل الآن في الهيدر: هادئ كي لا ينافس زر الطلب الأساسي */
html:root:root:root header .bar .btn.hcall{background:transparent;border-color:var(--ink);color:var(--ink)}
html:root:root:root header .bar .btn.hcall:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* زر عايم واحد فقط (واتساب) */
.fl .fl-call{display:none}

.fcols h3{font-size:16px;font-weight:700;margin:0 0 8px;line-height:inherit}

/* نص للقارئات فقط (يحافظ على ترتيب العناوين دون تغيير الشكل) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* الفوتر: كحلي البراند بدل الأسود تقريبًا، وحد فاصل في الوضع الداكن، وحشو سفلي أقل */
html footer{background:#0a1f3d;padding-bottom:40px}
@media (max-width:860px){html footer{padding-bottom:80px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{border-top:1px solid #2a4468}}
:root[data-theme="dark"] footer{border-top:1px solid #2a4468}