/* ==========================================================================
   path: /assets/css/majidiya-light.css
   ملف CSS لصفحة سوق المجيدية المركزي - وضع فاتح فقط (بدون دارك مود)
   لوحة ألوان: أبيض، أسود، ذهبي — متجاوب للهاتف والآيباد
   ========================================================================== */

/* ========================== 1) المتغيرات العامة ========================== */
:root {
  /* ألوان أساسية للوضع الفاتح */
  --primary-gold: #cca300;            /* ذهبي أساسي */
  --secondary-gold: #ffd700;          /* ذهبي فاتح */
  --accent-gold: #d6b41c;             /* ذهبي بلمعة */
  --bg: #ffffff;                      /* خلفية رئيسية */
  --bg-muted: #f8f8f8;                /* خلفية ثانوية فاتحة */
  --text-dark: #1a1a1a;               /* نص أساسي */
  --text-light: #666666;              /* نص ثانوي */
  --border-light: rgba(0,0,0,0.12);   /* حدود */
  --glass-bg: rgba(0,0,0,0.05);       /* خلفية زجاجية خفيفة */

  /* تدرجات وتأثيرات */
  --gold-gradient: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);

  /* سرعات */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 600ms ease;

  /* أوزان خطوط */
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

/* ========================== 2) الخطوط و Reset ========================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
  padding-top: 70px;
  padding-bottom: 100px;
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* توهج ذهبي لطيف في الزوايا (وضع فاتح فقط) */
body::before,
body::after {
  content: '';
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}
body::before {
  top: -80px; right: -80px;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0) 70%);
  animation: glowA 10s infinite alternate ease-in-out;
}
body::after {
  bottom: -80px; left: -80px;
  background: radial-gradient(circle, rgba(204,163,0,0.12) 0%, rgba(204,163,0,0) 70%);
  animation: glowB 10s infinite alternate ease-in-out;
}

@keyframes glowA { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10px,10px) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }
@keyframes glowB { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(10px,-10px) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }

/* ========================== 3) حاوية عامة ========================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ========================== 4) الهيدر الرئيسي (Hero) ========================== */
.majidiya-hero {
  text-align: center;
  padding: 80px 20px 60px;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-image: url('/image/alwa/IMG_8411.JPG');  /* وضع فاتح */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 620px;
  overflow: hidden;
  /* ماسك انسيابي للأسفل */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}
.majidiya-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.75)
  ); /* تراكب أبيض شفاف للوضع الفاتح */
  z-index: -1;
}

/* شعار الشركة */
.company-logo-majidiya {
  width: 220px; height: 220px; object-fit: contain;
  animation: spin 10s linear infinite;
  border-radius: 50%;
  border: 3px solid var(--primary-gold);
  padding: 10px;
  background-color: var(--glass-bg);
  box-shadow: 0 0 0 6px rgba(204,163,0,0.08);
}
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* عنوان الصفحة */
.majidiya-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin-top: 24px; margin-bottom: 12px; letter-spacing: 1px;
  background: var(--gold-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(212,175,55,0.25);
}

/* وصف قصير */
.majidiya-tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #333;
  max-width: 820px; margin: 0 auto;
  line-height: 1.8; opacity: 0;
  animation: fadeInUp 1.2s ease-out forwards; animation-delay: 0.5s;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ========================== 5) الأقسام العامة ========================== */
section {
  padding: 56px 0;
  text-align: center;
  margin: 36px auto;
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: sectionFade 0.9s ease-out forwards; animation-delay: 0.4s;
}
@keyframes sectionFade { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

/* عناوين الأقسام */
.section-heading {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: var(--font-weight-black);
  margin-bottom: 16px; line-height: 1.2;
  background: var(--gold-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: pulse 2.5s infinite alternate;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

/* ===================== 6) About / Features / Stats ===================== */
.section-header{ text-align:center; margin-bottom:3rem; }
.section-badge{
  display:inline-block; background:var(--gold-gradient); color:#fff;
  padding:.5rem 1.25rem; border-radius:50px; font-weight:var(--font-weight-medium);
  font-size:.9rem; margin-bottom:.75rem;
}
.section-header h2{ font-size:2.2rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.75rem; }
.section-header p{ font-size:1.05rem; color:var(--text-light); max-width:680px; margin:0 auto; line-height:1.7; }

.about{ padding:5rem 0; background:var(--bg-muted); }
.about-content{ display:flex; flex-direction:column; gap:3rem; }
.about-main{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }

.about-text h3{ font-size:1.8rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:1.25rem; }
.about-text p{ font-size:1.05rem; color:var(--text-light); line-height:1.9; margin-bottom:1.5rem; }

.vision-mission{ display:flex; flex-direction:column; gap:1.25rem; }
.vision,.mission{ display:flex; align-items:flex-start; gap:1rem; }
.icon-wrapper{
  width:50px;height:50px;border-radius:50%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:1.2rem;
}
.vision .content h4,.mission .content h4{ font-size:1.15rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.4rem; }
.vision .content p,.mission .content p{ color:var(--text-light); line-height:1.6; }

.about-image{ position:relative; max-width:90%; margin-inline:auto; }
.image-wrapper{ position:relative; border-radius:20px; overflow:hidden; }
.about-image img{ width:100%; height:520px; object-fit:cover; transition:transform var(--transition-slow); }
.image-overlay{ position:absolute; inset:0; background:rgba(224,164,35,0.25); opacity:0; transition:opacity var(--transition-normal); }
.about-image:hover img{ transform:scale(1.035); }
.about-image:hover .image-overlay{ opacity:.18; }

.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.feature-card{
  background:#fff; padding:1.75rem; border-radius:20px; text-align:center;
  box-shadow:var(--shadow-lg); transition:transform var(--transition-normal), box-shadow var(--transition-normal);
}
.feature-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.feature-icon{
  width:74px;height:74px;border-radius:50%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.9rem;color:#fff;transition:transform var(--transition-normal);
}
.feature-card:hover .feature-icon{ transform:scale(1.06); }
.feature-card h4{ font-size:1.2rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.75rem; }
.feature-card p{ color:var(--text-light); line-height:1.6; }

.stats{ padding:3.5rem 0; background:var(--gold-gradient); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; }
.stat-card{ text-align:center; padding:1.75rem; }
.stat-icon{ font-size:2.4rem; margin-bottom:.6rem; opacity:.9; }
.stat-number{ font-size:2.4rem; font-weight:var(--font-weight-black); margin-bottom:.35rem; }
.stat-label{ font-size:1rem; font-weight:var(--font-weight-medium); opacity:.95; }

/* ===================== 7) Projects ===================== */
.projects{ padding:5rem 0; background:#fff; }
.projects-filter{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-bottom:3rem;
}
.filter-btn{
  background:transparent; border:2px solid var(--border-light); color:var(--text-dark);
  padding:.7rem 1.6rem; border-radius:50px; cursor:pointer; font-weight:var(--font-weight-medium);
  transition:all var(--transition-normal);
}
.filter-btn:hover,.filter-btn.active{ background:var(--gold-gradient); color:#fff; border-color:var(--primary-gold); }

.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.project-card{
  background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg);
  transition:transform var(--transition-normal), box-shadow var(--transition-normal);
}
.project-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.project-image{ position:relative; overflow:hidden; }
.project-image img{ width:100%; height:230px; object-fit:cover; transition:transform var(--transition-slow); }
.project-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--transition-normal);
}
.project-card:hover .project-overlay{ opacity:1; }
.project-card:hover .project-image img{ transform:scale(1.08); }
.project-actions{ display:flex; gap:.8rem; }
.action-btn{
  width:48px;height:48px;border-radius:50%;background:var(--gold-gradient);border:none;color:#fff;
  cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:1.1rem; transition:transform var(--transition-normal);
}
.action-btn:hover{ transform:scale(1.08); }
.project-info{ padding:1.6rem; text-align:start; }
.project-category{
  display:inline-block; background:rgba(212,175,55,0.12); color:var(--primary-gold);
  padding:.28rem .9rem; border-radius:18px; font-size:.8rem; font-weight:var(--font-weight-medium); margin-bottom:.8rem;
}
.project-info h3{ font-size:1.2rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.6rem; }
.project-info p{ color:var(--text-light); line-height:1.6; margin-bottom:1rem; }
.project-meta{
  display:flex; justify-content:space-between; align-items:center; padding-top:.8rem; border-top:1px solid var(--border-light);
}
.status{ padding:.25rem .9rem; border-radius:18px; font-size:.8rem; font-weight:var(--font-weight-medium); }
.status.completed{ background:rgba(34,197,94,0.12); color:#22c55e; }
.status.in-progress{ background:rgba(251,191,36,0.12); color:#f59e0b; }
.status.planning{ background:rgba(59,130,246,0.12); color:#3b82f6; }
.location{ color:var(--text-light); font-size:.92rem; }

/* ===================== 8) Contact ===================== */
.contact{ padding:5rem 0; background:var(--bg-muted); }
.contact-content{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-info h3{ font-size:1.8rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:1.5rem; }
.contact-items{ display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2rem; }
.contact-item{ display:flex; align-items:flex-start; gap:1rem; }
.contact-icon{
  width:50px;height:50px;border-radius:50%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:1.2rem;
}
.contact-details h4{ font-size:1.05rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.4rem; }
.contact-details p{ color:var(--text-light); line-height:1.6; }

.social-links h4{ font-size:1.05rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:.6rem; }
.social-icons{ display:flex; gap:.8rem; }
.social-icon{
  width:44px;height:44px;border-radius:50%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:1.15rem;transition:transform var(--transition-normal), box-shadow var(--transition-normal);
}
.social-icon:hover{ transform:translateY(-2px); box-shadow:0 5px 15px rgba(212,175,55,0.3); }

.contact-form{
  background:#fff; padding:2.25rem; border-radius:20px; box-shadow:var(--shadow-lg);
}
.contact-form h3{ font-size:1.35rem; font-weight:var(--font-weight-bold); color:var(--text-dark); margin-bottom:1.5rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group{ margin-bottom:1.2rem; }
.form-group input,.form-group select,.form-group textarea{
  width:100%; padding:1rem; border:2px solid var(--border-light); border-radius:10px; font-size:1rem; transition:border var(--transition-normal), box-shadow var(--transition-normal);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none; border-color:var(--primary-gold); box-shadow:0 0 0 3px rgba(212,175,55,0.16);
}
.form-group textarea{ resize:vertical; min-height:120px; }
.submit-btn{
  width:100%; background:var(--gold-gradient); color:#fff; border:none; padding:1rem 1.5rem; border-radius:50px;
  font-size:1.05rem; font-weight:var(--font-weight-medium); cursor:pointer; transition:transform var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow:0 5px 15px rgba(212,175,55,0.28);
}
.submit-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(212,175,55,0.38); }

/* ===================== 9) Footer ===================== */
.footer{ background:#111; color:#eaeaea; padding:3.5rem 0 2rem; }
.footer-content{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:1rem; margin-bottom:2.25rem; }
.footer-section h4{ font-size:1.1rem; font-weight:var(--font-weight-bold); margin-bottom:1.1rem; color:var(--secondary-gold); }
.footer-logo{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.footer-logo .logo-frame{ width:50px; height:50px; }
.footer-logo .logo-text h3{ font-size:1.15rem; font-weight:var(--font-weight-bold); color:#fff; }
.footer-logo .logo-text span{ font-size:.9rem; color:#cfcfcf; }
.footer-section p{ color:#cfcfcf; line-height:1.6; margin-bottom:1.2rem; }
.footer-social{ display:flex; gap:.8rem; }
.social-link{
  width:40px;height:40px;border-radius:50%;background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;color:#222;text-decoration:none;font-size:1.05rem;transition:transform var(--transition-normal), box-shadow var(--transition-normal);
}
.social-link:hover{ transform:translateY(-2px); box-shadow:0 5px 15px rgba(212,175,55,0.3); }
.footer-section ul{ list-style:none; }
.footer-section ul li{ margin-bottom:.7rem; }
.footer-section ul li a{ color:#cfcfcf; text-decoration:none; transition:color var(--transition-normal); }
.footer-section ul li a:hover{ color:var(--secondary-gold); }
.footer-section .contact-info{ display:flex; flex-direction:column; gap:.8rem; }
.footer-section .contact-item{ display:flex; align-items:center; gap:.6rem; color:#cfcfcf; }
.footer-section .contact-item i{ color:var(--secondary-gold); font-size:.95rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:1.4rem; }
.footer-bottom-content{ display:flex; justify-content:space-between; align-items:center; color:#cfcfcf; }
.footer-links{ display:flex; gap:1.2rem; }
.footer-links a{ color:#cfcfcf; text-decoration:none; transition:color var(--transition-normal); }
.footer-links a:hover{ color:var(--secondary-gold); }

/* ===================== 10) Back to Top ===================== */
.back-to-top{
  position:fixed; bottom:2rem; left:2rem; width:50px; height:50px; border-radius:50%;
  background:var(--gold-gradient); border:none; color:#fff; cursor:pointer; font-size:1.2rem;
  opacity:0; visibility:hidden; transition:transform var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
  z-index:100;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-2px); box-shadow:0 5px 15px rgba(212,175,55,0.3); }

/* ===================== 11) استجابة الشاشات (الهاتف والآيباد) ===================== */
/* شاشات كبيرة أقل من 1200px (آيباد أفقي وما حوله) */
@media (max-width: 1200px) {
  .majidiya-hero{ min-height:560px; padding:70px 20px 50px; }
  .about-main{ gap:2.5rem; }
  .projects-grid{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .contact-content{ grid-template-columns:1fr; gap:2.25rem; }
  .footer-content{ grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* أقل من 992px (آيباد عمودي / تابلت) */
@media (max-width: 992px) {
  .majidiya-title{ font-size: clamp(2rem, 6.5vw, 3.2rem); }
  .majidiya-tagline{ font-size: 1rem; }
  .about-main{ grid-template-columns:1fr; gap:2rem; }
  .about-image img{ height:440px; }
  .features-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .projects-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .footer-content{ grid-template-columns: 1fr 1fr; gap:1.5rem; }
}

/* أقل من 768px (هواتف كبيرة) */
@media (max-width: 768px) {
  .majidiya-hero{ min-height:520px; padding:60px 16px 44px; }
  .company-logo-majidiya{ width:180px; height:180px; }
  .majidiya-title{ font-size: clamp(1.8rem, 8vw, 2.6rem); }
  section{ padding:44px 0; margin:26px auto; border-radius:16px; }
  .features-grid, .stats-grid, .projects-grid{ grid-template-columns:1fr; }
  .project-image img{ height:200px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-bottom-content{ flex-direction:column; gap:.8rem; text-align:center; }
}

/* أقل من 576px (هواتف متوسطة وصغيرة) */
@media (max-width: 576px) {
  .company-logo-majidiya{ width:150px; height:150px; padding:8px; }
  .majidiya-title{ letter-spacing:.5px; }
  .majidiya-tagline{ padding: 0 6px; }
  .about-image img{ height:360px; }
  .contact-form{ padding:1.6rem; }
  .back-to-top{ left:1rem; bottom:1rem; width:46px; height:46px; }
}

/* ===================== 12) طباعة ===================== */
@media print {
  .back-to-top,
  .project-overlay { display:none !important; }
  .majidiya-hero{
    height:auto; min-height:auto; padding:1.25rem 0; background:none !important;
    -webkit-mask-image:none; mask-image:none;
  }
  .majidiya-hero::before{ display:none !important; }
  .majidiya-title, .majidiya-tagline{
    color:#000 !important; background:none !important; -webkit-text-fill-color:#000 !important; text-shadow:none !important;
  }
  section, .contact-form, .feature-card, .project-card{
    box-shadow:none !important; background:#fff !important;
  }
  .project-image img{ height:auto; object-fit:contain; }
}