/*
Theme Name: ورشة باب السنديان للنجارة
Theme URI: https://babalsndyanworkshop.online
Author: Bab Alsndyan Carpentry Workshop
Author URI: https://babalsndyanworkshop.online
Description: قالب WordPress مخصص لورشة باب السنديان للنجارة - تصميم وتصنيع المطابخ وغرف النوم والدريسنج روم والمكاتب والأثاث حسب الطلب.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bab-alsndyan
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready
*/

/* ==========================================================================
   1. المتغيرات (Custom Properties) - هوية ورشة باب السنديان
   ========================================================================== */
:root{
    --color-primary: #6b4226;      /* بني خشبي غامق */
    --color-primary-dark: #4a2d18; /* بني غامق جداً */
    --color-accent: #b07d4f;       /* برونزي/خشبي فاتح - من اللوجو */
    --color-accent-light: #d9b48f; /* برونزي فاتح */
    --color-gold: #c9a063;         /* لمسة ذهبية من اللوجو */
    --color-cream: #f8f5f0;        /* خلفية كريمي فاتحة */
    --color-cream-2: #f1ebe2;
    --color-dark: #2b2420;         /* نص غامق دافئ */
    --color-text: #4a4038;
    --color-text-light: #7a6f63;
    --color-white: #ffffff;
    --color-border: #e3d9cb;
    --font-heading: 'Tajawal', 'Cairo', sans-serif;
    --font-body: 'Tajawal', 'Cairo', sans-serif;
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 10px rgba(43,36,32,0.06);
    --shadow-md: 0 8px 30px rgba(43,36,32,0.10);
    --shadow-lg: 0 20px 50px rgba(43,36,32,0.16);
    --container-width: 1200px;
}

/* ==========================================================================
   2. إعادة الضبط الأساسية (Reset)
   ========================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family: var(--font-body);
    color: var(--color-text);
    background:var(--color-white);
    line-height:1.8;
    direction: rtl;
    overflow-x:hidden;
    font-size:16px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:.25s ease; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; }
.screen-reader-text{ position:absolute; left:-9999px; }

h1,h2,h3,h4,h5,h6{
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-weight:700;
    line-height:1.35;
}

.container{
    width:100%;
    max-width: var(--container-width);
    margin:0 auto;
    padding:0 24px;
}

section{ position:relative; }

/* ==========================================================================
   3. الأزرار
   ========================================================================== */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 32px;
    border-radius: var(--radius-sm);
    font-weight:700;
    font-size:15px;
    letter-spacing:.3px;
    transition: all .3s ease;
    white-space:nowrap;
}
.btn-primary{
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color:var(--color-white);
    box-shadow:0 6px 18px rgba(107,66,38,.28);
}
.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(107,66,38,.38);
}
.btn-outline{
    background:transparent;
    color:var(--color-white);
    border:2px solid rgba(255,255,255,.7);
}
.btn-outline:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;
}
.btn-outline-dark{
    background:transparent;
    color:var(--color-primary);
    border:2px solid var(--color-primary);
}
.btn-outline-dark:hover{
    background:var(--color-primary);
    color:#fff;
}
.btn-sm{ padding:10px 22px; font-size:14px; }

/* ==========================================================================
   4. الهيدر
   ========================================================================== */
.site-header{
    position: sticky;
    top:0;
    z-index:999;
    background: rgba(248,245,240,.92);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--color-border);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
}
.site-branding{
    display:flex;
    align-items:center;
    gap:12px;
}
.site-branding img.custom-logo{
    max-height:58px;
    width:auto;
    border-radius:8px;
}
.site-branding .site-title{
    font-size:20px;
    font-weight:800;
    color:var(--color-primary-dark);
    line-height:1.2;
}
.site-branding .site-title span{
    display:block;
    font-size:12px;
    font-weight:400;
    color:var(--color-text-light);
    letter-spacing:1px;
}

.main-navigation{ display:flex; align-items:center; gap:8px; }
.main-navigation ul{
    display:flex;
    align-items:center;
    gap:6px;
}
.main-navigation a{
    display:block;
    padding:10px 18px;
    font-weight:600;
    font-size:15.5px;
    color: var(--color-dark);
    border-radius: var(--radius-sm);
}
.main-navigation a:hover,
.main-navigation li.current-menu-item > a{
    color: var(--color-accent);
    background: rgba(176,125,79,.1);
}
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-phone{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:var(--color-primary-dark);
    font-size:15px;
}
.header-phone svg{ flex-shrink:0; color:var(--color-accent); }

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
}
.menu-toggle span{
    width:26px; height:3px; background:var(--color-primary-dark); border-radius:3px;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
    position:relative;
    background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-accent) 100%);
    color:#fff;
    padding:110px 0 100px;
    overflow:hidden;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(circle at 85% 20%, rgba(201,160,99,.35), transparent 45%),
                       radial-gradient(circle at 10% 90%, rgba(0,0,0,.25), transparent 50%);
    pointer-events:none;
}
.hero-grid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:50px;
    align-items:center;
    position:relative;
    z-index:2;
}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    padding:8px 18px;
    border-radius:50px;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:22px;
}
.hero h1{
    color:#fff;
    font-size:44px;
    margin-bottom:20px;
}
.hero h1 strong{ color:var(--color-gold); display:block; }
.hero p.lead{
    font-size:18px;
    color:rgba(255,255,255,.88);
    max-width:560px;
    margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{
    display:flex;
    gap:36px;
    margin-top:46px;
    flex-wrap:wrap;
}
.hero-stat strong{
    display:block;
    font-size:30px;
    color:var(--color-gold);
    font-family: var(--font-heading);
}
.hero-stat span{ font-size:13.5px; color:rgba(255,255,255,.75); }

.hero-visual{
    position:relative;
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/5;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(43,36,32,.55) 100%);
}
.hero-badge{
    position:absolute;
    bottom:24px; right:24px; left:24px;
    z-index:3;
    background:rgba(255,255,255,.95);
    border-radius: var(--radius-md);
    padding:16px 20px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow: var(--shadow-md);
}
.hero-badge .icon{
    width:46px; height:46px; border-radius:50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0;
}
.hero-badge strong{ display:block; color:var(--color-dark); font-size:14.5px; }
.hero-badge span{ font-size:12.5px; color:var(--color-text-light); }

/* ==========================================================================
   6. عام: عنوان قسم
   ========================================================================== */
.section{ padding:90px 0; }
.section-cream{ background:var(--color-cream); }
.section-dark{ background:var(--color-primary-dark); color:#fff; }
.section-header{
    text-align:center;
    max-width:680px;
    margin:0 auto 56px;
}
.eyebrow{
    display:inline-block;
    color:var(--color-accent);
    font-weight:800;
    letter-spacing:2px;
    font-size:13.5px;
    margin-bottom:12px;
    text-transform:uppercase;
}
.section-header h2{ font-size:34px; margin-bottom:14px; }
.section-header p{ color:var(--color-text-light); font-size:16.5px; }
.section-dark .section-header p{ color:rgba(255,255,255,.75); }
.section-dark .section-header h2{ color:#fff; }

/* ==========================================================================
   7. شبكات / كروت عامة
   ========================================================================== */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
    background:#fff;
    border-radius: var(--radius-md);
    padding:34px 28px;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--color-border);
    transition:.3s ease;
    height:100%;
}
.card:hover{
    transform:translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color:transparent;
}
.card .icon{
    width:58px; height:58px;
    border-radius:16px;
    background: linear-gradient(135deg, rgba(176,125,79,.15), rgba(107,66,38,.12));
    color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--color-text-light); font-size:15px; }
.card .more{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:16px; font-weight:700; color:var(--color-accent); font-size:14.5px;
}

/* خدمات */
.service-card{ position:relative; overflow:hidden; }
.service-card .num{
    position:absolute; top:18px; left:18px;
    font-family:var(--font-heading);
    font-size:34px; font-weight:800;
    color:var(--color-border);
    z-index:0;
}
.service-card .icon,
.service-card h3,
.service-card p,
.service-card .more{ position:relative; z-index:1; }

/* لماذا نحن */
.why-list{ display:flex; flex-direction:column; gap:22px; }
.why-item{ display:flex; gap:18px; align-items:flex-start; }
.why-item .icon{
    flex-shrink:0;
    width:50px; height:50px; border-radius:14px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color:#fff; display:flex; align-items:center; justify-content:center;
}
.why-item h4{ font-size:17px; margin-bottom:4px; }
.why-item p{ color:var(--color-text-light); font-size:14.5px; }

/* صور + نص (about teaser) */
.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.split-media{ position:relative; }
.split-media img{
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width:100%;
    aspect-ratio:4/3.4;
    object-fit:cover;
}
.split-media .deco-frame{
    position:absolute;
    inset:-16px -16px auto auto;
    width:55%; height:55%;
    border:3px solid var(--color-accent-light);
    border-radius: var(--radius-lg);
    z-index:-1;
    top:auto; bottom:-16px; right:-16px;
}
.split-text .eyebrow{ margin-bottom:14px; }
.split-text h2{ font-size:32px; margin-bottom:18px; }
.split-text p{ color:var(--color-text-light); margin-bottom:16px; }
.checklist{ display:flex; flex-direction:column; gap:12px; margin:22px 0; }
.checklist li{ display:flex; gap:10px; align-items:flex-start; color:var(--color-text); font-weight:600; font-size:15px;}
.checklist li svg{ color:var(--color-accent); flex-shrink:0; margin-top:3px; }

/* ==========================================================================
   8. معرض الأعمال (Gallery)
   ========================================================================== */
.gallery-filters{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:40px;
    flex-wrap:wrap;
}
.gallery-filters button{
    padding:10px 22px;
    border-radius:50px;
    border:1.5px solid var(--color-border);
    font-weight:700;
    font-size:14px;
    color:var(--color-text);
    transition:.25s;
}
.gallery-filters button.active,
.gallery-filters button:hover{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.gallery-item{
    position:relative;
    border-radius: var(--radius-md);
    overflow:hidden;
    aspect-ratio:1/1;
    box-shadow: var(--shadow-sm);
}
.gallery-item img{
    width:100%; height:100%; object-fit:cover;
    transition: transform .5s ease;
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(43,36,32,.85) 100%);
    opacity:0; transition:.3s;
    display:flex; align-items:flex-end; padding:20px;
}
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay span{ color:#fff; font-weight:700; font-size:15px; }

/* ==========================================================================
   9. عملية العمل (Process steps)
   ========================================================================== */
.process-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
}
.process-step{ text-align:center; position:relative; }
.process-step .step-num{
    width:64px; height:64px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--color-accent-light);
    color:var(--color-primary);
    font-family:var(--font-heading);
    font-weight:800; font-size:22px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
    position:relative; z-index:2;
}
.process-step h4{ font-size:16.5px; margin-bottom:8px; }
.process-step p{ font-size:14px; color:var(--color-text-light); }

/* ==========================================================================
   10. آراء العملاء (Testimonials)
   ========================================================================== */
.testimonial-card{
    background:#fff;
    border-radius: var(--radius-md);
    padding:32px 28px;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--color-border);
}
.testimonial-stars{ color:var(--color-gold); margin-bottom:14px; font-size:16px; letter-spacing:2px; }
.testimonial-card p.quote{ color:var(--color-text); font-size:15.5px; margin-bottom:20px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-author .avatar{
    width:46px; height:46px; border-radius:50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800;
}
.testimonial-author strong{ display:block; font-size:14.5px; }
.testimonial-author span{ font-size:13px; color:var(--color-text-light); }

/* ==========================================================================
   11. CTA banner
   ========================================================================== */
.cta-banner{
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-accent));
    border-radius: var(--radius-lg);
    padding:64px 50px;
    color:#fff;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-banner::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,.12), transparent 40%);
}
.cta-banner h2{ color:#fff; font-size:30px; margin-bottom:14px; position:relative; }
.cta-banner p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 30px; position:relative; }
.cta-banner .hero-actions{ justify-content:center; position:relative; }

/* ==========================================================================
   12. الفوتر
   ========================================================================== */
.site-footer{
    background: var(--color-primary-dark);
    color: rgba(255,255,255,.78);
    padding-top:80px;
}
.footer-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-col h4{
    color:#fff; font-size:16.5px; margin-bottom:20px; position:relative; padding-bottom:12px;
}
.footer-col h4::after{
    content:""; position:absolute; bottom:0; right:0; width:34px; height:3px;
    background:var(--color-gold); border-radius:3px;
}
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo img{ max-height:48px; border-radius:6px; }
.footer-logo strong{ color:#fff; font-size:17px; }
.footer-col p{ font-size:14.5px; line-height:1.9; }
.footer-links li{ margin-bottom:11px; }
.footer-links a{ font-size:14.5px; color:rgba(255,255,255,.75); }
.footer-links a:hover{ color:var(--color-gold); padding-right:4px; }
.footer-contact li{
    display:flex; gap:10px; align-items:flex-start;
    margin-bottom:16px; font-size:14.5px;
}
.footer-contact svg{ color:var(--color-gold); flex-shrink:0; margin-top:2px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.footer-social a:hover{ background:var(--color-gold); color:var(--color-primary-dark); }
.footer-bottom{
    padding:22px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13.5px;
    flex-wrap:wrap;
    gap:10px;
}
.footer-bottom a:hover{ color:var(--color-gold); }

/* واتساب زر عائم */
.whatsapp-float{
    position:fixed;
    bottom:26px; left:26px;
    z-index:1000;
    width:60px; height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow:0 10px 25px rgba(37,211,102,.45);
    animation: pulse-wa 2.4s infinite;
}
@keyframes pulse-wa{
    0%{ box-shadow:0 10px 25px rgba(37,211,102,.45); }
    50%{ box-shadow:0 10px 25px rgba(37,211,102,.7), 0 0 0 10px rgba(37,211,102,.12); }
    100%{ box-shadow:0 10px 25px rgba(37,211,102,.45); }
}

/* ==========================================================================
   13. صفحات داخلية (Page header / breadcrumb)
   ========================================================================== */
.page-header-banner{
    background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
    color:#fff;
    padding:70px 0 60px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.page-header-banner::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle at 80% 20%, rgba(201,160,99,.3), transparent 45%);
}
.page-header-banner h1{ color:#fff; font-size:38px; position:relative; }
.breadcrumb{
    display:flex; justify-content:center; gap:8px;
    margin-top:14px; font-size:14px; color:rgba(255,255,255,.75); position:relative;
}
.breadcrumb a{ color:rgba(255,255,255,.9); font-weight:600; }
.breadcrumb a:hover{ color:var(--color-gold); }

/* محتوى صفحة/تدوينة عام */
.entry-content{ font-size:16px; color:var(--color-text); }
.entry-content h2{ font-size:26px; margin:34px 0 16px; }
.entry-content h3{ font-size:21px; margin:26px 0 12px; }
.entry-content p{ margin-bottom:18px; }
.entry-content ul, .entry-content ol{ margin:0 0 18px 0; padding-right:22px; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content img{ border-radius:var(--radius-md); margin:24px 0; }
.entry-content blockquote{
    border-right:4px solid var(--color-accent);
    background:var(--color-cream);
    padding:18px 24px;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    margin:24px 0;
    font-style:italic;
    color:var(--color-text);
}

/* مدونة / أرشيف */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.post-card{
    background:#fff; border-radius:var(--radius-md); overflow:hidden;
    box-shadow:var(--shadow-sm); border:1px solid var(--color-border);
    transition:.3s;
}
.post-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .post-body{ padding:24px; }
.post-card .meta{ font-size:13px; color:var(--color-accent); font-weight:700; margin-bottom:10px; }
.post-card h3{ font-size:18.5px; margin-bottom:10px; }
.post-card h3 a:hover{ color:var(--color-accent); }
.post-card p{ color:var(--color-text-light); font-size:14.5px; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; }
.pagination a, .pagination span{
    width:42px; height:42px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--color-border);
    font-weight:700; font-size:14px;
}
.pagination .current{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.pagination a:hover{ border-color:var(--color-accent); color:var(--color-accent); }

/* الشريط الجانبي */
.with-sidebar{ display:grid; grid-template-columns:2.2fr 1fr; gap:50px; }
.widget{
    background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:26px; margin-bottom:26px; box-shadow:var(--shadow-sm);
}
.widget h3{ font-size:17px; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--color-cream-2); }
.widget ul li{ padding:9px 0; border-bottom:1px solid var(--color-cream-2); font-size:14.5px; }
.widget ul li:last-child{ border-bottom:none; }
.widget ul li a:hover{ color:var(--color-accent); }

/* ==========================================================================
   14. فورم تواصل
   ========================================================================== */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.2fr; gap:46px; }
.contact-info-card{
    background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
    color:#fff; border-radius: var(--radius-lg); padding:42px 34px;
}
.contact-info-card h3{ color:#fff; font-size:22px; margin-bottom:8px; }
.contact-info-card > p{ color:rgba(255,255,255,.78); margin-bottom:30px; font-size:14.5px; }
.contact-info-item{ display:flex; gap:14px; margin-bottom:24px; align-items:flex-start; }
.contact-info-item .icon{
    width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-item strong{ display:block; font-size:14.5px; margin-bottom:3px; }
.contact-info-item span, .contact-info-item a{ font-size:14px; color:rgba(255,255,255,.78); }
.contact-map{ margin-top:28px; border-radius:var(--radius-md); overflow:hidden; height:160px; }
.contact-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.2); }

.contact-form-card{
    background:#fff; border-radius:var(--radius-lg); padding:42px;
    border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-group label{ font-size:14px; font-weight:700; color:var(--color-dark); }
.form-group input, .form-group select, .form-group textarea{
    padding:13px 16px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:14.5px; color:var(--color-text); background:var(--color-cream);
    transition:.25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    outline:none; border-color:var(--color-accent); background:#fff;
}
.form-group textarea{ resize:vertical; min-height:130px; }

/* FAQ */
.faq-item{
    background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
    margin-bottom:14px; overflow:hidden;
}
.faq-question{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; cursor:pointer; font-weight:700; font-size:15.5px;
}
.faq-question .plus{ transition:.3s; color:var(--color-accent); flex-shrink:0; }
.faq-item.active .faq-question .plus{ transform:rotate(45deg); }
.faq-answer{
    padding:0 24px; max-height:0; overflow:hidden; transition:.3s ease;
    color:var(--color-text-light); font-size:14.5px;
}
.faq-item.active .faq-answer{ padding:0 24px 22px; max-height:400px; }

/* تذييل واتساب CTA صغير */
.mini-cta{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--color-cream); border-radius:var(--radius-md);
    padding:22px 28px; margin-top:18px; flex-wrap:wrap; gap:14px;
}
.mini-cta p{ font-weight:700; color:var(--color-dark); margin:0; }

/* ==========================================================================
   15. استجابة (Responsive)
   ========================================================================== */
@media (max-width: 991px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; aspect-ratio:16/10; }
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .grid-3{ grid-template-columns:repeat(2,1fr); }
    .split{ grid-template-columns:1fr; gap:36px; }
    .split-media{ order:-1; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .process-steps{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
    .with-sidebar{ grid-template-columns:1fr; }
    .contact-wrap{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){
    .main-navigation{ display:none; }
    .menu-toggle{ display:flex; }
    .header-phone span{ display:none; }
    .hero{ padding:70px 0 60px; }
    .hero h1{ font-size:30px; }
    .section{ padding:60px 0; }
    .section-header h2{ font-size:26px; }
    .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
    .cta-banner{ padding:42px 24px; }
    .cta-banner h2{ font-size:24px; }
    .footer-grid{ grid-template-columns:1fr; gap:34px; }
    .process-steps{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:1fr; }
    .blog-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; text-align:center; }
    .contact-form-card{ padding:28px 22px; }
}

/* قائمة الموبايل المنبثقة */
.mobile-nav{
    position:fixed; inset:0; background:var(--color-primary-dark);
    z-index:1100; transform:translateX(100%); transition:.35s ease;
    padding:30px 24px; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav .close-mobile{ color:#fff; font-size:28px; margin-bottom:30px; display:block; width:fit-content; }
.mobile-nav ul li{ border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav ul li a{ display:block; padding:16px 4px; color:#fff; font-weight:700; font-size:17px; }

/* ==========================================================================
   16. قسم مناطق الخدمة (Service Areas)
   ========================================================================== */
.areas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-bottom:28px;
}

.area-card{
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.3s ease;
}
.area-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:transparent;
}

.area-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 20px;
    background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));
    color:#fff;
}
.area-card-header .area-icon{
    width:44px;height:44px;border-radius:12px;
    background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.area-card-header h3{
    color:#fff;font-size:18px;margin-bottom:2px;
}
.area-sub{
    font-size:12px;color:rgba(255,255,255,.75);display:block;
}
.area-count{
    margin-right:auto;
    font-size:12px;font-weight:700;
    background:rgba(255,255,255,.18);
    padding:4px 10px;border-radius:20px;
    color:#fff;white-space:nowrap;flex-shrink:0;
}

.area-neighborhoods{
    padding:18px 20px;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.area-neighborhoods span{
    display:inline-block;
    background:var(--color-cream);
    color:var(--color-text);
    font-size:13px;
    padding:5px 12px;
    border-radius:50px;
    border:1px solid var(--color-border);
    transition:.2s;
    cursor:default;
}
.area-neighborhoods span:hover{
    background:var(--color-primary);
    color:#fff;
    border-color:var(--color-primary);
}
.area-neighborhoods span:last-child{
    background:linear-gradient(135deg,rgba(176,125,79,.15),rgba(107,66,38,.1));
    border-color:var(--color-accent-light);
    color:var(--color-primary);
    font-weight:700;
}

/* شريط CTA المناطق */
.areas-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:18px 26px;
    flex-wrap:wrap;
}
.areas-cta-text{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:15px;
    color:var(--color-dark);
}
.areas-cta-text svg{ color:var(--color-accent);flex-shrink:0; }

/* استجابة مناطق الخدمة */
@media(max-width:991px){
    .areas-grid{ grid-template-columns:1fr; }
}
@media(max-width:768px){
    .areas-cta{ flex-direction:column;text-align:center; }
    .areas-cta-text{ justify-content:center; }
    .area-neighborhoods span{ font-size:12px; }
}