@charset "UTF-8";
/* =========================================================
   الإبداع للديكور — Al-Abdaa Decor
   نظام التصميم: هوية خشب الجوز الدافئ والنحاس المصقول
   (الألوان والخلفية والطابع البصري مستخرجة من هوية "الابداع"
   الأصلية، مطبّقة هنا على بنية ومحتوى ومنطق "الإبداع للديكور"
   كما هي دون أي تعديل على النصوص أو الربط البرمجي)
   ========================================================= */

/* ---------- 1. الرموز اللونية والمقاسات ---------- */
:root{
  /* ألوان الهوية — خشب الجوز الدافئ والنحاس */
  --brand:#5c3a24;        /* بني الجوز الغامق — عناوين وهوية */
  --brand-700:#1c140f;    /* الخشب المحروق — أسطح داكنة */
  --brand-600:#b6905a;    /* النحاس — تفاعل وتمييز أساسي */
  --brand-300:#ddb478;    /* النحاس الفاتح — تمييز ثانوي وhover */
  --brand-100:#ecdfc4;    /* توهج نحاسي فاتح جدًا — حلقات وهالات */
  --brand-50:#f7efdf;     /* خلفية دافئة هادئة جدًا */

  --ink:#221810;
  --ink-soft:#4a3b2e;
  --muted:#6b5b4a;

  --canvas:#f4eee3;       /* خلفية الصفحة — حجر كريمي دافئ */
  --panel:#fffaf3;        /* سطح البطاقات — أبيض دافئ */
  --line:#e4d8c5;
  --line-soft:#ede3d3;

  --wa:#22b957;
  --wa-dark:#178a43;

  --wood:#8a5a3a;
  --wood-grain:#5c3a24;

  /* أسطح داكنة للأقسام المتبادلة (الواجهة، الخدمات، المعرض، الفوتر) */
  --surface-dark:#1c140f;
  --surface-dark-alt:#241a13;
  --cream:#f3ece1;
  --cream-dim:#c9bba7;
  --line-on-dark:rgba(221,180,120,.22);

  --r-sm:6px;
  --r:10px;
  --r-lg:16px;

  --sh-1:0 1px 2px rgba(28,20,15,.06);
  --sh-2:0 2px 6px rgba(28,20,15,.08), 0 1px 2px rgba(28,20,15,.06);
  --sh-3:0 14px 34px rgba(28,20,15,.16), 0 2px 8px rgba(28,20,15,.08);

  --wrap:1180px;
  --pad:clamp(18px,4vw,40px);
  --bar:68px;

  --sans:"Tajawal",system-ui,"Segoe UI",sans-serif;
  --display:"Amiri","Traditional Arabic",serif;
  --mono:"Tajawal",system-ui,"Segoe UI",sans-serif;
}

/* ---------- 2. أساسيات ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--bar) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--canvas);
}

img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.015em;font-weight:800}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--brand-600);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip-link{
  position:fixed;inset-block-start:-100px;inset-inline-start:12px;z-index:200;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
}
.skip-link:focus{inset-block-start:12px}

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(23px,3.1vw,33px);
  letter-spacing:-.01em;
  margin-block-end:14px;
}

/* ---------- 3. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;
  border:1px solid transparent;border-radius:var(--r);
  font-weight:700;font-size:15px;line-height:1;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .2s ease;
}
.btn--primary{
  background:linear-gradient(180deg,var(--brand-300),var(--brand-600));
  color:#241505;
  box-shadow:0 12px 28px -12px rgba(182,144,90,.55);
}
.btn--primary:hover{
  box-shadow:0 16px 32px -10px rgba(182,144,90,.7);
  transform:translateY(-2px);
}
.btn--ghost {
    display: none !important;
}

.btn--wa{background:var(--wa);color:#fff;box-shadow:var(--sh-2)}
.btn--wa:hover{background:var(--wa-dark)}

.btn--sm{padding:9px 15px;font-size:14px}
.btn--lg{padding:16px 28px;font-size:17px;border-radius:var(--r-lg)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.ico-wa{width:20px;height:20px;flex:none}
.btn--lg .ico-wa{width:24px;height:24px}

/* ---------- 4. شريط الأدوات العلوي ---------- */
.toolbar{
  position:sticky;inset-block-start:0;z-index:100;
  background:rgba(28,20,15,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-block-end:1px solid var(--line-on-dark);
  padding-block-start:env(safe-area-inset-top,0px);
}

.toolbar__inner{
  direction:ltr;                 /* الشعار يبقى بالزاوية العلوية اليسرى */
  display:flex;align-items:center;gap:20px;
  height:var(--bar);
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--pad);
}

.brand{display:flex;align-items:center;gap:11px;flex:none;padding-inline-end:6px}
.brand__mark{width:34px;height:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__ar{
  direction:rtl;font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.01em;
  background:linear-gradient(180deg,var(--brand-300),var(--brand-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand__en{font-family:var(--sans);font-size:9.5px;color:var(--cream-dim);letter-spacing:.14em}

.nav{direction:rtl;display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  padding:8px 13px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;color:var(--cream-dim);
  transition:background-color .15s ease,color .15s ease;
}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--brand-300)}
.nav__link.is-current{color:var(--brand-300);background:rgba(255,255,255,.08);font-weight:700}

.toolbar__actions{display:flex;align-items:center;gap:10px}

.burger{
  display:none;
  width:40px;height:40px;padding:0;
  background:rgba(255,255,255,.06);border:1px solid var(--line-on-dark);border-radius:var(--r-sm);
  cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.burger span{display:block;width:17px;height:1.8px;background:var(--cream);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* ---------- 5. الواجهة الرئيسية ---------- */
.hero {
  padding-block: clamp(44px,7vw,84px) clamp(40px,6vw,72px);
  position: relative;
  overflow: hidden;
  color: var(--cream);
  min-height: 85vh; /* تمت إضافته لزيادة ارتفاع الواجهة لتبرز الصورة */
  display: flex;
  align-items: center;
  /* تم حذف الـ background القديم لأن الصورة ستأخذ مكانه */
}

/* --- الكلاسات الجديدة الخاصة بالصورة وطبقة التظليل --- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* استخدمت نفس ألوانك لعمل تدرج لوني يدمج الصورة مع الموقع */
  background: linear-gradient(
    0deg,
    var(--surface-dark) 0%,
    rgba(44, 32, 25, 0.75) 55%,
    rgba(44, 32, 25, 0.4) 100%
  );
}

/* --- شبكة المحتوى --- */
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px,5vw,64px);
  align-items: center;
  position: relative;
  z-index: 1; /* 👈 مهم جداً: يرفع النصوص والأزرار لتكون فوق الصورة */
}

/* --- باقي التنسيقات الخاصة بك كما هي --- */
.hero__place {
  font-size: 13.5px;
  color: var(--brand-300);
  font-weight: 700;
  margin-block-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__place::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-300);
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(31px,4.6vw,50px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.22;
  color: var(--cream);
}

.hero__lede {
  margin-block: 20px 26px;
  max-width: 48ch;
  font-size: clamp(15.5px,1.6vw,17.5px);
  color: var(--cream-dim);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.stats{
  display:flex;flex-wrap:wrap;gap:0;
  margin-block-start:36px;
  border:1px solid var(--line-on-dark);border-radius:var(--r);
  background:var(--surface-dark-alt);overflow:hidden;
}
.stat{flex:1 1 110px;padding:14px 18px;border-inline-start:1px solid var(--line-on-dark)}
.stat:first-child{border-inline-start:0}
.stat dt{font-size:12.5px;color:var(--cream-dim);margin-block-end:2px}
.stat dd{margin:0;font-family:var(--display);font-size:24px;font-weight:700;color:var(--brand-300);letter-spacing:0}

/* لوحة العرض */
.hero__stage{position:relative;display:flex;justify-content:center;padding-block:14px}
.hero__stage img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}

/* ---------- 6. الإطارات (الأقسام) ---------- */
.frame{padding-block:clamp(40px,6vw,74px)}

.frame__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-block-end:10px;
  padding-block-end:9px;border-block-end:1px solid var(--line);
}
.frame__name{font-size:15px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.frame__name::before{
  content:"";display:inline-block;width:6px;height:6px;margin-inline-end:8px;
  background:var(--brand-600);transform:rotate(45deg);vertical-align:middle;
}
.frame__dim{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  white-space:nowrap;
}
.frame__hint{font-size:14.5px;color:var(--muted);margin-block-end:22px}

/* أقسام داكنة (الخدمات + المعرض المختار) — تكسر إيقاع الصفحة الفاتحة */
#services,#gallery{background:var(--surface-dark);color:var(--cream)}
#services .frame__label,#gallery .frame__label{border-block-end-color:var(--line-on-dark)}
#services .frame__name,#gallery .frame__name{color:var(--brand-300)}
#services .frame__dim,#gallery .frame__dim{color:var(--cream-dim)}
#services .frame__hint,#gallery .frame__hint{color:var(--cream-dim)}
#gallery .gallery-header h2{color:var(--cream)}
#gallery .gallery-header span{color:var(--brand-300)}
#gallery .empty-state{color:var(--cream-dim);border-color:var(--line-on-dark)}

/* ---------- 7. من نحن ---------- */
.about{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);
  margin-block-start:26px;align-items:start;
}
.about__text p{color:var(--ink-soft);max-width:52ch;margin-block-end:14px;font-size:16.5px}

.about__list{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.about__list li{background:var(--panel);padding:16px 18px}
.about__list strong{display:block;font-size:15.5px;color:var(--brand);margin-block-end:3px}
.about__list span{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- 8. الخدمات ---------- */
.services{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:16px;
}

.svc{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:22px 20px 20px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  text-align:start;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.svc:hover{border-color:var(--brand-300);box-shadow:var(--sh-2);transform:translateY(-2px)}
.svc[aria-pressed="true"]{
  border-color:var(--brand-600);
  box-shadow:0 0 0 2px var(--brand-100),var(--sh-2);
}

.svc__diamond{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;
  width:9px;height:9px;background:var(--brand-300);
  transform:rotate(45deg);border-radius:1.5px;
  transition:background-color .16s ease;
}
.svc[aria-pressed="true"] .svc__diamond{background:var(--brand)}

.svc__icon{
  display:grid;place-items:center;
  width:52px;height:52px;margin-block-end:10px;
  border-radius:12px;background:var(--brand-50);color:var(--brand);
  transition:background-color .16s ease;
}
.svc[aria-pressed="true"] .svc__icon{background:var(--brand);color:#fff}
.svc__icon svg{width:30px;height:30px}

.svc__title{font-weight:700;font-size:16px;color:var(--ink)}
.svc__sub{font-size:13.5px;color:var(--muted)}

/* ---------- 9. المعرض ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block:22px 18px}
.chip{
  padding:7px 15px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{border-color:var(--brand-300);color:var(--brand)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

.carousel{position:relative}

.carousel__viewport{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-2);
}

.carousel__track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,.05,.2,1);
}

.carousel__empty{padding:56px 24px;text-align:center;color:var(--muted);font-size:15px}

.arrow{
  position:absolute;inset-block-start:38%;
  display:grid;place-items:center;
  width:42px;height:42px;padding:0;
  background:rgba(255,255,255,.94);color:var(--brand);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:var(--sh-2);cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.arrow svg{width:20px;height:20px;transform:scaleX(-1)}   /* عكس الاتجاه ليناسب RTL */
.arrow--prev{inset-inline-start:14px}
.arrow--next{inset-inline-end:14px}

.dots{display:flex;justify-content:center;gap:7px;margin-block-start:16px}
.dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--brand-100);cursor:pointer;transition:width .25s ease,background-color .2s ease}
.dot.is-on{width:24px;background:var(--brand)}

/* ---------- 10. التواصل ---------- */
.contact{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);margin-block-start:26px;align-items:start}
.contact__lede{color:var(--ink-soft);margin-block-end:22px;max-width:44ch}

.contact__list{margin-block-start:26px;display:grid;gap:14px}
.contact__list li{
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding-block-end:14px;border-block-end:1px solid var(--line);
}
.contact__list li:last-child{border-block-end:0;padding-block-end:0}
.contact__k{font-size:12.5px;color:var(--muted);min-width:82px}
.contact__v{font-size:16px;font-weight:500;color:var(--ink)}
a.contact__v{color:var(--brand);font-weight:700}
a.contact__v:hover{text-decoration:underline}


/* ---------- 11. التذييل ---------- */
.footer{background:var(--surface-dark);color:var(--cream-dim);padding-block:clamp(38px,5vw,58px) 0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.footer__brand img{width:104px;margin-block-end:18px}
.footer__brand p{font-size:14.5px;line-height:1.7;max-width:34ch;color:var(--cream-dim)}

.footer__head{display:block;font-size:13px;font-weight:700;color:var(--brand-300);margin-block-end:12px}
.footer__nav{display:flex;flex-direction:column;gap:9px;font-size:15px}
.footer__nav a{color:var(--cream-dim);width:fit-content}
.footer__nav a:hover{color:var(--cream);text-decoration:underline}

.footer__base{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  margin-block-start:36px;padding-block:18px;
  border-block-start:1px solid var(--line-on-dark);
  font-size:13px;color:var(--cream-dim);
  padding-block-end:calc(18px + env(safe-area-inset-bottom,0px));
}
.footer__mono{font-family:var(--mono);font-size:11px;letter-spacing:.05em;direction:ltr}

/* ---------- 12. التجاوب ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero__stage{order:-1;max-width:420px;margin-inline:auto}
  .services{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:760px){
  :root{--bar:60px}
  .burger{display:flex}
  .toolbar__actions .btn--wa span{display:none}
  .toolbar__actions .btn--wa{padding:9px 11px}

  .nav{
    position:absolute;inset-block-start:100%;inset-inline:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface-dark-alt);
    border-block-end:1px solid var(--line-on-dark);
    box-shadow:var(--sh-3);
    padding:10px var(--pad) 16px;
    margin:0;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav__link{padding:12px 14px;font-size:16px}

  .hero__title{letter-spacing:0}
  .stat{flex:1 1 50%;border-inline-start:0;border-block-start:1px solid var(--line-on-dark)}
  .stat:first-child,.stat:nth-child(2){border-block-start:0}

  .arrow{inset-block-start:31%;width:36px;height:36px}
  .arrow--prev{inset-inline-start:8px}
  .arrow--next{inset-inline-end:8px}

  .footer__grid{grid-template-columns:1fr}
}

@media (max-width:460px){
  /* الخدمات تصير صفوف أفقية حتى ما تطول الصفحة */
  .services{grid-template-columns:1fr;gap:10px}
  .svc{
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:15px;align-items:center;padding:15px 18px;
  }
  .svc__icon{grid-row:1/3;width:46px;height:46px;margin-block-end:0}
  .svc__icon svg{width:26px;height:26px}
  .svc__title{align-self:end}
  .svc__sub{align-self:start}
  .svc__diamond{display:none}
  .svc:hover{transform:none}
}

/* ---------- 13. تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .carousel__track{transition:none}
}

/* ---------- 14. الطباعة ---------- */
@media print{
  .toolbar,.arrow,.dots,.chips,.burger{display:none}
  .canvas{background:#fff}
  .panel,.svc,.carousel__viewport{box-shadow:none}
}
@media (max-width: 768px) {
    /* إخفاء القائمة الافتراضي في الجوال */
    .nav {
        display: none;
        position: absolute;
        top: 100%; /* لكي تظهر مباشرة أسفل شريط التنقل */
        left: 0;
        width: 100%;
        background-color: var(--panel, #fffaf3);
        flex-direction: column;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    /* إظهار القائمة عند الضغط على الزر (إضافة كلاس is-open من الجافاسكربت) */
    .nav.is-open {
        display: flex;
    }
    
    /* تنسيق الروابط داخل القائمة */
    .nav__link {
        padding: 15px 20px;
        text-align: center;
        border-bottom: 1px solid var(--line-soft, #ede3d3);
        font-size: 16px;
    }
    
    .nav__link:last-child {
        border-bottom: none;
    }
}

/* ---------- 15. مساحات إعلانات جوجل (AdSense) ---------- */
/* حاوية محايدة تمامًا: بدون خلفية أو حدود أو ارتفاع ثابت،
   فلا تأخذ أي مساحة أو تغيّر شكل الصفحة قبل أن يصل إعلان فعلي. */
/* ---------- 15. مساحات إعلانات جوجل (إخفاء تام) ---------- */
.ad-slot {
  display: none !important;
}