/* =========================================================
   Company Directory - HOME
   File: assets/css/home.css
   Notes:
   - This file is designed to load AFTER assets/css/frontend.css
   - HOME uses its own styling + small overrides for directory cards in HOME only
   - No cd-card2 / cd-cards legacy styles here
   ========================================================= */

/* تستخدم متغيرات التصميم العامة من frontend.css عبر body.cd-theme-*
   لذا لا نعيد تعريف الألوان هنا حتى تتوحّد جميع الصفحات. */

.cd-home .cd-hero{
  padding:28px 0 18px;
  background:linear-gradient(135deg,var(--cd-bg),#fff);
  border-bottom:1px solid var(--cd-border);
}
.cd-home .cd-hero__inner{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:14px;
  align-items:stretch;
}
.cd-home .cd-hero__copy{padding:14px}
.cd-home .cd-hero__title{margin:0;font-size:30px;line-height:1.2;font-weight:980}
.cd-home .cd-hero__sub{margin:10px 0 0;color:var(--cd-muted);font-size:15px;max-width:620px;line-height:1.7}
.cd-home .cd-hero__cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.cd-home .cd-hero__trust{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.cd-home .cd-hero__native{padding:14px}

/* Native Ad placeholder */
.cd-home .cd-nativead{
  height:100%;
  border-radius:18px;
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  box-shadow:var(--cd-shadow-soft);
  padding:14px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
}
.cd-home .cd-nativead--placeholder{border-style:dashed}
.cd-home .cd-nativead__tag{
  display:inline-flex;align-self:flex-start;
  padding:6px 10px;border-radius:999px;
  background:var(--cd-soft);
  font-size:12px;font-weight:950;
}
.cd-home .cd-nativead__title{font-size:16px;font-weight:950}
.cd-home .cd-nativead__text{color:var(--cd-muted);font-size:13px;font-weight:700;line-height:1.6}
.cd-home .cd-nativead__cta{
  align-self:flex-start;
  font-weight:950;font-size:13px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--cd-border);
  background:var(--cd-card);color:var(--cd-text);
}

/* =========================================================
   SEARCH
   ========================================================= */
.cd-home .cd-search{padding:14px 0}
.cd-home .cd-search__bar{
  display:grid;
  grid-template-columns:1.6fr 1fr auto;
  gap:10px;
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  border-radius:18px;
  padding:12px;
  box-shadow:var(--cd-shadow-soft);
}
.cd-home .cd-input,
.cd-home .cd-select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--cd-border);
  padding:12px 12px;
  font-size:14px;
  background:var(--cd-card);
}
.cd-home .cd-search__quick{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}

/* =========================================================
   STATS
   ========================================================= */
.cd-home .cd-stats{
  margin:18px 0;
  padding:18px 0;
  background:var(--cd-soft);
  border-top:1px solid var(--cd-border);
  border-bottom:1px solid var(--cd-border);
}
.cd-home .cd-stats__container{width:min(1120px,92vw);margin:0 auto}
.cd-home .cd-stats__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:14px
}
.cd-home .cd-stats__title{margin:0;font-size:22px;font-weight:950}
.cd-home .cd-stats__sub{margin:0;color:var(--cd-muted);font-size:14px;max-width:520px}

.cd-home .cd-stats__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.cd-home .cd-stat{
  display:flex;gap:12px;padding:14px;border-radius:16px;
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  box-shadow:var(--cd-shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cd-home .cd-stat:hover{transform:translateY(-2px);box-shadow:var(--cd-shadow-soft)}
.cd-home .cd-stat__icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--cd-soft);
  font-size:22px;flex:0 0 auto;
}
.cd-home .cd-stat__value{font-size:28px;font-weight:980;line-height:1.1}
.cd-home .cd-stat__label{margin-top:4px;font-size:14px;font-weight:900}
.cd-home .cd-stat__hint{margin-top:4px;color:var(--cd-muted);font-size:12px}

.cd-home .cd-stats__sponsor{
  margin-top:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.9);
  border:1px dashed var(--cd-border);
}
.cd-home .cd-sponsor__badge{
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  background:var(--cd-soft);
  flex:0 0 auto;
}
.cd-home .cd-sponsor__text{
  color:var(--cd-text);
  font-size:13px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cd-home .cd-sponsor__cta{
  flex:0 0 auto;
  font-size:13px;font-weight:950;
  padding:8px 12px;border-radius:12px;
  border:1px solid var(--cd-border);
  background:var(--cd-card);color:var(--cd-text);
}

/* =========================================================
   CATEGORIES (Industry tiles)
   ========================================================= */
.cd-home .cd-cats{padding:18px 0}
.cd-home .cd-cats__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.cd-home .cd-cat{
  text-decoration:none;color:inherit;
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--cd-shadow-soft);
  display:flex;flex-direction:column;gap:6px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cd-home .cd-cat:hover{transform:translateY(-2px);box-shadow:var(--cd-shadow-soft)}
.cd-home .cd-cat--ad{border-style:dashed}
.cd-home .cd-cat__icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:var(--cd-soft);
  overflow:hidden;
}
.cd-home .cd-cat__icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cd-home .cd-cat__name{font-weight:950;font-size:14px;line-height:1.3}
.cd-home .cd-cat__meta{color:var(--cd-muted);font-size:12px;font-weight:800}

/* =========================================================
   FEATURED section wrapper + Banner placeholder (HOME only)
   - Cards themselves are styled in frontend.css (cd-card)
   ========================================================= */
.cd-home .cd-featured{padding:18px 0}
.cd-home .cd-bannerad{margin-top:14px}
.cd-home .cd-bannerad__inner{
  border-radius:18px;
  border:1px dashed var(--cd-border);
  background:rgba(255,255,255,.85);
  padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.cd-home .cd-bannerad__title{font-weight:980}
.cd-home .cd-bannerad__text{color:var(--cd-muted);font-size:13px;font-weight:800}
.cd-home .cd-bannerad__cta{
  font-weight:950;font-size:13px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--cd-border);
  background:var(--cd-card);color:var(--cd-text);
}

/* ===== HOME ONLY: Featured cd-card logo fix (odd ratios) ===== */
.cd-home .cd-grid .cd-card__logo{
  width:76px;
  height:76px;
  border-radius:16px;
  overflow:hidden;
  background:var(--cd-soft);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.cd-home .cd-grid .cd-card__logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important; /* best for logos */
  display:block;
}

/* =========================================================
   OWNERS
   ========================================================= */
.cd-home .cd-owners{padding:18px 0}
.cd-home .cd-owners__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
  align-items:stretch;
}
.cd-home .cd-steps{
  margin:10px 0 0;
  padding:0 18px;
  color:var(--cd-text);
  font-weight:800;
}
.cd-home .cd-steps li{margin:8px 0}
.cd-home .cd-owners__card{
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--cd-shadow-soft);
}
.cd-home .cd-mini__k{font-size:12px;font-weight:950;color:var(--cd-muted)}
.cd-home .cd-mini__t{margin-top:6px;font-size:16px;font-weight:980}
.cd-home .cd-mini__p{margin-top:6px;color:var(--cd-muted);font-size:13px;font-weight:800}

/* =========================================================
   CITIES
   ========================================================= */
.cd-home .cd-cities{padding:18px 0}
.cd-home .cd-cities__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.cd-home .cd-city{
  text-decoration:none;color:inherit;
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--cd-shadow-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cd-home .cd-city:hover{transform:translateY(-2px);box-shadow:var(--cd-shadow-soft)}
.cd-home .cd-city__name{font-weight:950}
.cd-home .cd-city__count{color:var(--cd-muted);font-size:12px;font-weight:800}
.cd-home .cd-city--ad{border-style:dashed}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .cd-home .cd-hero__inner{grid-template-columns:1fr}
  .cd-home .cd-search__bar{grid-template-columns:1fr}
  .cd-home .cd-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-home .cd-cats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cd-home .cd-owners__grid{grid-template-columns:1fr}
  .cd-home .cd-cities__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-home .cd-stats__head{flex-direction:column;align-items:flex-start}
  .cd-home .cd-stats__sponsor{flex-direction:column;align-items:flex-start}
  .cd-home .cd-sponsor__text{white-space:normal}
}

@media (max-width: 520px){
  .cd-home .cd-hero__title{font-size:24px}
  .cd-home .cd-h2{font-size:22px}
  .cd-home .cd-p{font-size:15px}

  /* Categories bigger & easier tap */
  .cd-home .cd-cats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cd-home .cd-cat{padding:14px;border-radius:18px}
  .cd-home .cd-cat__icon{width:60px;height:60px;border-radius:18px}
  .cd-home .cd-cat__name{font-size:15px}

  /* Cities one column */
  .cd-home .cd-cities__grid{grid-template-columns:1fr}

  /* Featured logo bigger in HOME */
  .cd-home .cd-grid .cd-card__logo{width:92px;height:92px}
  .cd-home .cd-grid .cd-card__name a{font-size:16px;font-weight:950}
  .cd-home .cd-grid .cd-card__desc{font-size:14px;line-height:1.7}
}

/* =========================================================
   Optional: reveal animation helpers (if JS adds classes)
   ========================================================= */
.cd-home .cd-anim{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.cd-home .cd-anim.is-visible{
  opacity:1;
  transform:none;
}
/* ===== HOME Featured layout overrides (strong) ===== */
.cd-home .cd-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 520px){
  .cd-home .cd-grid{
    grid-template-columns: 1fr !important;
  }
  .cd-home .cd-card__link{
    padding: 16px !important;
  }
  .cd-home .cd-card__desc{
    -webkit-line-clamp: 2 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .cd-home .cd-card__name{
    font-size: 17px !important;
  }
}
/* =========================
   Ads in HOME - make cd-ad match home blocks
   ========================= */

.cd-home .cd-ad__card{
  border-radius:18px;
  border:1px solid var(--cd-border);
  box-shadow:var(--cd-shadow-soft);
}

.cd-home .cd-ad__badge{
  background: var(--cd-soft);
  border-color: var(--cd-border);
  font-weight:950;
}

/* لو عايز زر الإعلان نفس زرّ الهوم */
.cd-home .cd-ad__btn{
  border-color: var(--cd-border);
  background: var(--cd-card);
  color: var(--cd-text);
}
/* ===== FEATURED AD FIX (home override) ===== */
.cd-home .cd-card.cd-card--featured .cd-adlogo{
  margin: 10px 0 12px !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.cd-home .cd-card.cd-card--featured .cd-adlogo img{
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
}

.cd-home .cd-card.cd-card--featured .cd-adtitle{
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  margin: 6px 0 8px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* ==================================================
   HOME HERO – Isolated Layout (Fix grid/flex conflicts + RTL squeeze)
   Put at END of home.css
   ================================================== */

/* 1) منع أي تعريف عام (grid/flex) من التأثير على cd-hero داخل الهوم */
.cd.cd-home .cd-hero{
  display: block !important;
}

/* 2) اجبار inner يكون Grid عمودين على الديسكتوب */
.cd.cd-home .cd-hero .cd-wrap.cd-hero__inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important; /* عدّل 420 حسب رغبتك */
  gap: 18px !important;
  align-items: stretch !important;

  /* عزل مشاكل RTL/Theme Containers */
  width: min(1200px, 92vw) !important;
  margin-inline: auto !important;
}

/* 3) أهم سطرين لمنع “الحروف تحت بعض” */
.cd.cd-home .cd-hero .cd-hero__copy{
  min-width: 0 !important;
}
.cd.cd-home .cd-hero aside.cd-hero__native{
  min-width: 0 !important;
}

/* 4) منع الثيم من تحويل الإعلان لعمود رفيع */
.cd.cd-home .cd-hero aside.cd-hero__native{
  width: 420px !important;
  max-width: 420px !important;
  justify-self: stretch !important;

  position: static !important;
  float: none !important;
  inset: auto !important;
  display: block !important;
}

/* 5) الكارت داخل الإعلان يملأ العمود */
.cd.cd-home .cd-hero aside.cd-hero__native .cd-card,
.cd.cd-home .cd-hero aside.cd-hero__native > *{
  width: 100% !important;
  max-width: 100% !important;
}

/* 6) الصور لا تسبب ضغط عرض */
.cd.cd-home .cd-hero aside.cd-hero__native img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 7) موبايل/تابلت: Stack */
@media (max-width: 980px){
  .cd.cd-home .cd-hero .cd-wrap.cd-hero__inner{
    grid-template-columns: 1fr !important;
  }
  .cd.cd-home .cd-hero aside.cd-hero__native{
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================
   Fix: Hero Ad Logo size
   ========================================= */

.cd.cd-home .cd-hero .cd-adlogo{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px; /* يدي مساحة بصرية محترمة */
  padding: 12px;
}

.cd.cd-home .cd-hero .cd-adlogo img{
  max-height: 150px !important;  /* زوّد/قلّل حسب الذوق */
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
/* ==================================================
   HOME UI KIT – Typography/Hierarchy for entire home
   Scope: .cd.cd-home only
   ================================================== */

/* 1) قواعد عامة للنصوص داخل الصفحة الرئيسية */
.cd.cd-home{
  --cd-home-text: rgba(255,255,255,.92);
  --cd-home-muted: rgba(255,255,255,.70);
  --cd-home-soft: rgba(255,255,255,.10);
  --cd-home-line: rgba(255,255,255,.12);

  --cd-home-accent: rgba(59,130,246,.95);   /* أزرق */
  --cd-home-good: rgba(16,185,129,.95);     /* أخضر */
  --cd-home-warn: rgba(245,158,11,.95);     /* ذهبي */
}

.cd.cd-home .cd-card{
  border-radius: 18px;
}

/* 2) عناوين الكروت/الأقسام */
.cd.cd-home h1, 
.cd.cd-home h2,
.cd.cd-home h3{
  color: var(--cd-home-text);
}

/* 3) سطور الميتا: تمييز label/value */
.cd.cd-home .cd-meta{
  color: var(--cd-home-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cd.cd-home .cd-meta strong{
  color: var(--cd-home-text);
  font-weight: 1000;
  margin-inline-end: 6px;
}

/* 4) موقع/دولة: حوّله Badge لما يكون له class loc */
.cd.cd-home .cd-meta--loc{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: var(--cd-home-text);
  background: var(--cd-home-soft);
  border: 1px solid var(--cd-home-line);
}

/* 5) لو عندك تقييم Google في أي مكان داخل meta */
.cd.cd-home .cd-meta:has(strong){
  /* خط فاصل خفيف بين السطور داخل الكروت (لو الكود يسمح) */
}

/* تمييز سطر التقييم (نستهدف اللي يحتوي كلمة Google أو تقييم) */
.cd.cd-home .cd-meta{
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 7px;
  margin-top: 7px;
}
.cd.cd-home .cd-meta:first-of-type{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* لو السطر فيه "Google" */
.cd.cd-home .cd-meta:has(strong):is(:contains("Google")){
  color: var(--cd-home-warn);
}

/* بديل آمن لو :contains غير مدعوم (غالبًا غير مدعوم)
   سنميّز آخر سطر داخل الكارت كحل عام */
.cd.cd-home .cd-card .cd-meta:last-of-type{
  color: var(--cd-home-warn);
}
.cd.cd-home .cd-card .cd-meta:last-of-type strong{
  color: var(--cd-home-warn);
}

/* 6) أزرار الصفحة الرئيسية (شكل موحد) */
.cd.cd-home .cd-btn,
.cd.cd-home a.button,
.cd.cd-home .button{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 1000;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: var(--cd-home-text);
  text-decoration: none;
}

.cd.cd-home .cd-btn:hover,
.cd.cd-home a.button:hover,
.cd.cd-home .button:hover{
  transform: translateY(-1px);
}

/* 7) زر primary */
.cd.cd-home .cd-btn--primary{
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.35);
}

/* 8) زر واتساب لو class موجود (ولو مش موجود يبقى تخصيص داخل ad card كما فعلنا) */
.cd.cd-home .cd-btn--whatsapp,
.cd.cd-home .button--whatsapp{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.32);
}

/* 9) تحسين مظهر “Featured Ad Card” كحالة خاصة (اختياري) */
.cd.cd-home .cd-card--featured .cd-adbadge{
  font-weight: 900;
  font-size: 12px;
  padding: 8px 12px;
  color: rgba(17,24,39,.85);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(17,24,39,.08);
}
/* ==================================================
   HOME uses TOKENS
   ================================================== */

.cd.cd-home{
  color: var(--cd-text);
  font-family: var(--cd-font);
}

.cd.cd-home .cd-card{
  background: var(--cd-card-bg);
  border: 1px solid var(--cd-line);
}

.cd.cd-home .cd-meta{
  color: var(--cd-meta-text);
  border-top: 1px dashed var(--cd-dash);
}
.cd.cd-home .cd-meta strong{
  color: var(--cd-meta-label);
  font-weight: 1000;
}

.cd.cd-home .cd-meta--loc{
  background: var(--cd-pill-bg);
  border: 1px solid var(--cd-line);
  color: var(--cd-text);
}

/* Buttons */
.cd.cd-home .cd-btn,
.cd.cd-home .button,
.cd.cd-home a.button{
  background: var(--cd-btn-bg);
  border: 1px solid var(--cd-btn-border);
  color: var(--cd-btn-text);
  border-radius: 12px;
  font-weight: 1000;
}
.cd.cd-home .cd-btn--primary{
  background: color-mix(in srgb, var(--cd-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--cd-accent) 28%, transparent);
}
/* ==================================================
   Home Section Headings use TOKENS
   ================================================== */

.cd.cd-home .cd-sechead{
  color: var(--cd-text);
}

.cd.cd-home .cd-sechead .cd-h2{
  color: var(--cd-text) !important;
  font-weight: 1000;
  letter-spacing: .2px;
}

.cd.cd-home .cd-sechead .cd-p{
  color: var(--cd-muted) !important;
  font-weight: 700;
}
/* ==================================================
   STATS SECTION – Token Binding
   ================================================== */

/* اجعل قسم الإحصائيات يعتمد على المتغيرات */
.cd.cd-home .cd-stats{
  color: var(--cd-text);
}

/* عنوان القسم */
.cd.cd-home .cd-stats__title{
  color: var(--cd-text) !important;
  font-weight: 1000;
}

/* الوصف */
.cd.cd-home .cd-stats__sub{
  color: var(--cd-muted) !important;
  font-weight: 700;
}