/* =========================================================
   SA.repair - تصميم صفحة العزل (template-insulation.php)
   ملف مستقل: لا يعتمد على output.css أو template-style.css
   ========================================================= */

/* 1. الخطوط */
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-700.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-900.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; }

/* 2. المتغيرات */
:root {
    --ins-navy: #0B1320;
    --ins-navy-2: #12223a;
    --ins-teal: #2DD4BF;
    --ins-teal-dark: #14B8A6;
    --ins-bg: #F4F7FA;
    --ins-card: #FFFFFF;
    --ins-text: #0F1B2D;
    --ins-muted: #5B6B80;
    --ins-border: #E3E9F0;
    --ins-radius: 14px;
    --ins-shadow: 0 8px 28px rgba(11, 19, 32, 0.08);
}

/* 3. الأساسيات */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body.ins-page {
    font-family: 'Cairo', sans-serif;
    background: var(--ins-bg);
    color: var(--ins-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
.ins-page img { max-width: 100%; display: block; }
.ins-page a { color: inherit; text-decoration: none; }
.ins-page h1, .ins-page h2, .ins-page h3, .ins-page p { margin: 0; }
.ins-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.ins-teal { color: var(--ins-teal); }

/* 4. الأزرار */
.ins-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px; border-radius: 10px; font-weight: 800; font-size: 15px;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
    white-space: nowrap; cursor: pointer;
}
.ins-btn:hover { transform: translateY(-2px); }
.ins-btn-primary { background: var(--ins-teal); color: var(--ins-navy) !important; box-shadow: 0 8px 24px rgba(45, 212, 191, 0.35); }
.ins-btn-primary:hover { background: #5EEAD4; }
.ins-btn-outline { border: 1.5px solid rgba(255,255,255,.75); color: #fff !important; background: rgba(255,255,255,.04); }
.ins-btn-outline:hover { border-color: var(--ins-teal); color: var(--ins-teal) !important; }
.ins-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* 5. الهيدر */
.ins-header {
    position: absolute; top: 0; right: 0; left: 0; z-index: 50;
    background: linear-gradient(to bottom, rgba(11,19,32,.92), rgba(11,19,32,.55));
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ins-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.ins-logo { font-size: 24px; font-weight: 900; color: #fff !important; letter-spacing: -.3px; white-space: nowrap; }
.ins-logo span { color: var(--ins-teal); }
.ins-nav { display: none; gap: 26px; font-size: 14px; font-weight: 700; }
.ins-nav a { color: rgba(255,255,255,.85); transition: color .2s; }
.ins-nav a:hover { color: var(--ins-teal); }
.ins-header-phone {
    display: inline-flex; align-items: center; gap: 8px; background: var(--ins-teal); color: var(--ins-navy) !important;
    padding: 8px 16px; border-radius: 999px; font-weight: 900; font-size: 14px; white-space: nowrap;
}
.ins-header-phone svg { width: 16px; height: 16px; }

/* 6. الهيرو */
/* --- الجوال (الافتراضي): الصورة كاملة في الأعلى والنص تحتها --- */
.ins-hero { position: relative; display: flex; flex-direction: column; color: #fff; overflow: hidden; background: #071d38; padding-top: 68px; }
.ins-hero-picture { position: relative; display: block; width: 100%; }
.ins-hero-bg { display: block; width: 100%; height: auto; aspect-ratio: 880 / 700; object-fit: cover; object-position: left center; }
.ins-hero-picture.has-mobile .ins-hero-bg { aspect-ratio: auto; } /* صورة جوال مخصصة: تظهر كاملة بمقاسها الأصلي */
.ins-hero-picture::after { /* دمج أسفل الصورة مع لون الخلفية */
    content: ''; position: absolute; right: 0; left: 0; bottom: 0; height: 35%;
    background: linear-gradient(to bottom, rgba(7,29,56,0), #071d38);
}
.ins-hero-bg-fallback { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1e3a5f 0%, #071d38 100%); }
.ins-hero-content { position: relative; z-index: 2; margin-top: -40px; padding-bottom: 90px; max-width: 620px; }
.ins-hero h1 { font-size: 34px; font-weight: 900; line-height: 1.35; margin-bottom: 14px; }
.ins-hero h1 .ins-teal { display: block; }
.ins-hero p { font-size: 16px; color: rgba(255,255,255,.85); margin-bottom: 26px; max-width: 520px; }
.ins-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 7. شريط المميزات */
.ins-features { position: relative; z-index: 5; margin-top: -60px; }
.ins-features-card {
    background: var(--ins-card); border-radius: 18px; box-shadow: 0 14px 40px rgba(11,19,32,.12);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; padding: 22px 14px;
}
.ins-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ins-feature-icon {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(45,212,191,.1); color: var(--ins-navy);
}
.ins-feature-icon svg { width: 24px; height: 24px; }
.ins-feature span { font-size: 13px; font-weight: 800; color: var(--ins-text); line-height: 1.4; }

/* 8. عناوين الأقسام */
.ins-section { padding: 64px 0; }
.ins-section-head { text-align: center; margin-bottom: 34px; }
.ins-section-head h2 { font-size: 26px; font-weight: 900; color: var(--ins-text); margin-bottom: 6px; }
.ins-section-head p { font-size: 15px; color: var(--ins-muted); }
.ins-dark .ins-section-head h2 { color: #fff; }
.ins-dark .ins-section-head p { color: rgba(255,255,255,.7); }

/* 9. بطاقات الخدمات */
.ins-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ins-service {
    background: var(--ins-card); border-radius: var(--ins-radius); overflow: hidden; box-shadow: var(--ins-shadow);
    display: flex; flex-direction: column; border: 1px solid var(--ins-border);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ins-service:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,19,32,.14); }
.ins-media { position: relative; width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #dbe7f1, #b9cde0); overflow: hidden; }
.ins-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ins-service:hover .ins-media img, .ins-project:hover .ins-media img { transform: scale(1.06); }
.ins-service-body { padding: 14px 12px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.ins-service-body h3 { font-size: 15px; font-weight: 900; color: var(--ins-text); }
.ins-service-body p { font-size: 13px; color: var(--ins-muted); line-height: 1.6; }
.ins-service-arrow {
    margin-top: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--ins-navy); color: #fff !important;
    display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s;
}
.ins-service-arrow:hover { background: var(--ins-teal-dark); transform: translateX(-3px); }
.ins-service-arrow svg { width: 16px; height: 16px; }

/* 10. لماذا تختارنا */
.ins-dark { background: radial-gradient(circle at 50% 0%, #17304f 0%, var(--ins-navy) 70%); color: #fff; }
.ins-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
.ins-why-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ins-why-icon {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff;
    transition: border-color .3s, box-shadow .3s, color .3s;
}
.ins-why-item:hover .ins-why-icon { border-color: var(--ins-teal); color: var(--ins-teal); box-shadow: 0 0 22px rgba(45,212,191,.35); }
.ins-why-icon svg { width: 28px; height: 28px; }
.ins-why-item span { font-size: 14px; font-weight: 800; line-height: 1.5; }

/* 11. من أعمالنا */
.ins-project { background: var(--ins-card); border-radius: var(--ins-radius); overflow: hidden; box-shadow: var(--ins-shadow); border: 1px solid var(--ins-border); }
.ins-project figcaption { padding: 12px 10px; text-align: center; font-size: 14px; font-weight: 900; color: var(--ins-text); }

/* 12. الدعوة لاتخاذ إجراء */
.ins-cta-wrap { padding: 0 0 56px; }
.ins-cta { position: relative; border-radius: 20px; overflow: hidden; padding: 44px 20px; text-align: center; color: #fff; background: var(--ins-navy-2); }
.ins-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ins-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,19,32,.82), rgba(18,34,58,.9)); }
.ins-cta-inner { position: relative; z-index: 2; }
.ins-cta h2 { font-size: 24px; font-weight: 900; margin-bottom: 6px; }
.ins-cta p { font-size: 15px; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.ins-cta .ins-btn { font-size: 20px; padding: 12px 32px; letter-spacing: 1px; }

/* 13. آراء العملاء */
.ins-reviews { padding: 8px 0 64px; }
.ins-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ins-review { position: relative; background: var(--ins-card); border-radius: var(--ins-radius); box-shadow: var(--ins-shadow); border: 1px solid var(--ins-border); padding: 22px 18px 18px; text-align: center; }
.ins-review-quote { position: absolute; top: 10px; right: 14px; font-size: 44px; line-height: 1; color: #CBD5E1; font-family: Georgia, serif; }
.ins-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 10px; color: #F59E0B; }
.ins-stars svg { width: 16px; height: 16px; }
.ins-stars .is-off { color: #E2E8F0; }
.ins-review p { font-size: 14px; color: var(--ins-text); margin-bottom: 12px; line-height: 1.7; }
.ins-review-author { font-size: 13px; font-weight: 800; color: var(--ins-muted); }

/* 14. الفوتر */
.ins-footer { background: var(--ins-navy); color: rgba(255,255,255,.7); padding: 28px 0 90px; text-align: center; font-size: 13px; }
.ins-footer .ins-logo { display: inline-block; margin-bottom: 6px; }
.ins-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; font-weight: 700; }
.ins-footer-links a:hover { color: var(--ins-teal); }

/* 15. حركة الظهور عند التمرير */
.ins-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.ins-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ins-reveal { opacity: 1; transform: none; transition: none; }
    .ins-btn, .ins-service, .ins-media img { transition: none; }
}

/* 16. الشاشات الأكبر */
@media (min-width: 640px) {
    .ins-features-card { grid-template-columns: repeat(5, 1fr); padding: 24px 18px; }
    .ins-why-grid { grid-template-columns: repeat(3, 1fr); }
    .ins-reviews-grid { grid-template-columns: repeat(3, 1fr); }
    .ins-hero h1 { font-size: 42px; }
}
/* --- الكمبيوتر: الصورة خلفية كاملة والنص فوقها (الجوال والتابلت يبقون بالتصميم المكدّس) --- */
@media (min-width: 1024px) {
    .ins-hero { flex-direction: row; align-items: center; min-height: clamp(520px, 43.75vw, 760px); padding-top: 0; }
    .ins-hero-picture { position: absolute; inset: 0; }
    .ins-hero-bg, .ins-hero-picture.has-mobile .ins-hero-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: left center; }
    .ins-hero-picture::after { top: 0; height: auto; background: linear-gradient(to left, rgba(7,29,56,.85) 0%, rgba(7,29,56,.55) 40%, rgba(7,29,56,0) 70%); }
    .ins-hero-bg-fallback { aspect-ratio: auto; }
    .ins-hero-content { margin-top: 0; padding-top: 110px; padding-bottom: 120px; max-width: min(620px, 48%); }
}
@media (min-width: 900px) {
    .ins-nav { display: flex; }
    .ins-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .ins-why-grid { grid-template-columns: repeat(5, 1fr); }
    .ins-hero h1 { font-size: 52px; }
    .ins-hero p { font-size: 18px; }
    .ins-section-head h2 { font-size: 32px; }
    .ins-cta { padding: 56px 30px; }
    .ins-cta h2 { font-size: 30px; }
    .ins-service-body h3 { font-size: 17px; }
}

/* 17. زر الاتصال العائم (نفس زر الرئيسية) */
@keyframes livePing1 { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2.5); opacity: 0; } }
@keyframes phoneRing1 { 0%, 10% { transform: rotate(0); } 2%, 6% { transform: rotate(-15deg); } 4%, 8% { transform: rotate(15deg); } 100% { transform: rotate(0); } }
@keyframes ultimateGenieIn {
    0% { opacity: 0; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1) rotate(-30deg); }
    40% { opacity: 1; transform: translate3d(calc(-50% - 25px), -35px, 0) scale(1.1, 0.9) rotate(-10deg); }
    65% { transform: translate3d(-50%, 8px, 0) scale(0.95, 1.05) rotate(3deg); }
    85% { transform: translate3d(-50%, -4px, 0) scale(1.02, 0.98) rotate(-1deg); }
    100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1, 1) rotate(0deg); box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); }
}
@keyframes ultimateGenieOut {
    0% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1, 1) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1) rotate(-30deg); }
}
.live-dot-anim { animation: livePing1 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.phone-ring-anim { animation: phoneRing1 3s infinite; }
.smart-btn-wrapper { position: fixed; bottom: 30px; left: 0; width: 100%; height: 54px; z-index: 9999; pointer-events: none; }
.smart-popup-btn { position: absolute; top: 0; left: 50%; display: flex; direction: rtl; align-items: center; background: #0B1320; border: 1px solid #22c55e; border-radius: 50px; height: 54px; width: max-content; max-width: 90vw; padding: 0 18px 0 6px; opacity: 0; pointer-events: none; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1); }
.smart-popup-btn.is-visible { pointer-events: auto; animation: ultimateGenieIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.smart-popup-btn.is-hidden { pointer-events: none; animation: ultimateGenieOut 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.smart-dynamic-icon { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }