/* ============================================================
   assets/css/main.css
   آسمان املاک فیروزآباد — Makaan Design System (RTL/Persian)
   ============================================================

   TABLE OF CONTENTS
   1.  CSS Variables
   2.  Base & Typography
   3.  Layout Utilities
   4.  Topbar
   5.  Navbar
   6.  Hero Section
   7.  Search Box
   8.  Stats Bar
   9.  Section Headers
   10. Property Cards
   11. Category (Type) Cards
   12. Engineering Section
   13. CTA Banner
   14. Footer
   15. Buttons
   16. Badges
   17. Forms
   18. Pagination
   19. Admin / Drop-Zone / Image Grid
   20. Responsive
   21. Print
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. CSS VARIABLES  (change here → entire site updates)
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('../fonts/Vazirmatn-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'MyNewFont';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'),
         url('Vazirmatn-Medium.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {

  /* Brand — Makaan palette */
  --primary:        #00B98E;
  --primary-dark:   #009A77;
  --primary-light:  #EFFDF5;
  --primary-rgb:    0, 185, 142;

  /* تغییر رنگ طلایی به نارنجی اصلی مکان برای دکمه‌ها و المان‌های خاص */
  --gold:           #FF6922;
  --gold-dark:      #E05313;
  --gold-light:     #FFF3ED;
  --gold-rgb:       255, 105, 34;

  /* Dark navy */
  --dark:           #0E2E50;
  --dark-rgb:       14, 46, 80;

  /* Neutral grays */
  --gray-50:        #F8FAFC;
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-400:       #94A3B8;
  --gray-600:       #475569;
  --gray-800:       #1E293B;

}

  /* Gold accent (engineering / CTA) */
  --gold:           #E6A817;
  --gold-dark:      #C88D0A;
  --gold-light:     #FEF9EC;
  --gold-rgb:       230, 168, 23;

  /* Dark navy */
  --dark:           #0E2E50;
  --dark-rgb:       14, 46, 80;

  /* Neutral grays */
  --gray-50:        #F8FAFC;
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-400:       #94A3B8;
  --gray-600:       #475569;
  --gray-800:       #1E293B;

  /* Semantic */
  --success:        #198754;
  --danger:         #DC3545;
  --warning:        #FFC107;
  --info:           #0DCAF0;

  /* Spacing & shape */
  --radius:         12px;
  --radius-sm:      8px;
  --radius-pill:    100px;

  /* Shadows */
  --shadow-sm:      0 2px 10px rgba(var(--dark-rgb), .06);
  --shadow:         0 4px 20px rgba(var(--dark-rgb), .09);
  --shadow-lg:      0 10px 36px rgba(var(--dark-rgb), .15);
  --shadow-primary: 0 4px 14px rgba(var(--primary-rgb), .35);

  /* Transitions */
  --transition:     all .25s ease;
}


/* ─────────────────────────────────────────────────────────────
   2. BASE & TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', sans-serif;
  font-size: 14px; /* سایز را از ۱۴ به ۱۵ یا ۱۶ تغییر دادیم تا خواناتر شو
  color: var(--gray-800);
  background: var(--gray-50);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}


.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Vazirmatn', sans-serif;
    color: #1A1A1A;
}
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }


/* ─────────────────────────────────────────────────────────────
   3. LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────── */
/* Generic section backgrounds */
.section-white  { background: #fff; }
.section-light  { background: var(--gray-50); }
.section-dark   { background: var(--dark); }
.section-primary{ background: var(--primary); }

/* Standard section vertical padding */
.section-pad    { padding: 80px 0; }
.section-pad-sm { padding: 56px 0; }

/* Hover lift — applied on cards */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }
.hover-shadow:hover { box-shadow: var(--shadow-lg) !important; }

/* Object fit */
.object-fit-cover { object-fit: cover; }


/* ─────────────────────────────────────────────────────────────
   4. TOPBAR
   ───────────────────────────────────────────────────────────── */
.topbar {
  background: var(--dark);
  color: rgba(255, 255, 255, .75);
  font-size: .8rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.topbar a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  transition: color .2s;
}
.topbar a:hover { color: var(--primary); }

.topbar__contact { display: flex; gap: 20px; align-items: center; }
.topbar__contact span,
.topbar__contact a { display: flex; align-items: center; gap: 5px; }

.topbar__social { display: flex; gap: 6px; align-items: center; }

/* Small icon buttons in topbar / footer */
.social-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  text-decoration: none;
  transition: var(--transition);
}
.social-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   5. NAVBAR
   ───────────────────────────────────────────────────────────── */
/* ============================================================
   NAVBAR REDESIGNED (Makaan Style)
   ============================================================ */
   .navbar {
    background: #ffffff !important; /* کاملاً سفید و شفاف بدون حالت کدر قبلی */
    box-shadow: 0 2px 15px rgba(0, 0, 0, .05) !important; /* یک سایه بسیار ملایم و مدرن زیر هدر */
    border-bottom: 1px solid #f1f1f1;
    padding: .50rem 0; 
  }
  
  /* Brand */
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--primary) !important;
    text-decoration: none;
  }
  
  .navbar-brand__icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 4px; /* تغییر به لبه‌های شیک و مدرن الگو */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 3px 10px rgba(0, 185, 142, .2);
    flex-shrink: 0;
  }
  
  .navbar-brand__sub {
    font-size: .5rem;
    font-weight: 600;
    color: #888888;
    line-height: 1.2;
    display: block;
  }
  
  /* Nav links */
  .nav-link {
    font-weight: 300;
    font-size: .77rem; 
    padding: .4rem .7rem !important; /* بازگرداندن فواصل استاندارد برای خوانایی بهتر */
    border-radius: 4px;
    color: var(--navy) !important; /* تغییر رنگ فونت منو به سرمه‌ای شیک آژانس شما به جای خاکستری */
    transition: var(--transition);
    white-space: nowrap; 
  }
  
  .nav-link:hover,
  .nav-link.active {
    background: transparent; /* حذف پس‌زمینه رنگی هنگام هاور به سبک الگو */
    color: var(--primary) !important; /* تغییر رنگ متن به سبز اصلی هنگام هاور */
  }
  
  /* Dropdown */
  .dropdown-menu {
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    border-radius: 4px;
    padding: .5rem;
  }
  .dropdown-item {
    border-radius: 4px;
    font-size: .87rem;
    padding: .45rem .9rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--navy);
  }
  .dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary);
  }
  
  /* Navbar search */
  .navbar-search .form-control {
    width: 150px; 
    border-radius: 4px;
    font-size: .8rem;
    border: 1px solid #e1e1e1;
  }
  .navbar-search .btn { 
    border-radius: 4px; 
  }
  
  /* دکمه تماس جدید در هدر - کاملاً سبزرنگ و مدرن مطابق الگو */
  .btn-nav-cta {
    background: var(--primary) !important; /* تبدیل رنگ نارنجی/گلد به سبز اصلی */
    color: #FFFFFF !important; 
    font-weight: 700;
    border-radius: 4px; /* لبه‌های تیزتر و هماهنگ با دکمه Buy Pro Version الگو */
    padding: 10px 24px; /* پدینگ عریض‌تر و جذاب‌تر */
    font-size: .88rem;
    border: none;
    box-shadow: 0 3px 12px rgba(0, 185, 142, .25); 
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  
  .btn-nav-cta:hover {
    background: var(--primary-dark) !important; /* تیره شدن ملایم سبز در حالت هاور */
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(0, 185, 142, .4);
    color: #FFFFFF !important;
  }


/* ─────────────────────────────────────────────────────────────
   6. HERO SECTION
   ───────────────────────────────────────────────────────────── */
/* ============================================================
   HERO SECTION REDESIGNED (Makaan Style - Two Partition)
   ============================================================ */
   .hero-section {
    position: relative;
    min-height: auto; /* حذف مقدار ثابت قبلی برای هماهنگی با تصویر */
    padding: 80px 0 120px 0; /* ایجاد فضای پدینگ مناسب برای تمیز شدن ظاهر */
    overflow: hidden;
    background: #ffffff !important; /* تبدیل پس‌زمینه تیره به کاملاً سفید */
  }
  
  /* حذف اورلی (لایه تیره روی عکس) */
  .hero-section__overlay {
    display: none; 
  }
  
  .hero-section__inner {
    position: relative;
    z-index: 2;
    text-align: right; /* راست‌چین کردن متون برای زبان فارسی */
    color: var(--navy); /* تغییر رنگ متن‌ها به سرمه‌ای شیک آژانس */
  }
  
  /* هیرو بج (نشان کوچک بالای تیتر) */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light) !important; /* پس‌زمینه سبز خیلی ملایم */
    border: 1px solid rgba(0, 185, 142, 0.15) !important;
    color: var(--primary) !important; /* تغییر رنگ متن به سبز اصلی املاک آسمان */
    font-size: .88rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 4px; /* لبه‌های مدرن تیزتر هماهنگ با طرح جدید */
    margin-bottom: 24px;
  }
  .hero-badge i { font-size: 11px; }
  
  /* تیتر اصلی بزرگ */
  .hero-headline {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.3;
    text-shadow: none; /* حذف سایه متن قدیمی برای حفظ استایل مینیمال */
    margin-bottom: 20px;
    color: var(--navy) !important; /* رنگ سرمه‌ای تیره */
  }
  .hero-headline__accent { 
    color: var(--primary) !important; /* رنگ سبز کلمه شاخص */
  }
  
  /* توضیحات زیر تیتر */
  .hero-subtext {
    font-size: 1.05rem;
    color: var(--gray-600) !important; /* رنگ خاکستری تیره و خوانا روی پس‌زمینه سفید */
    max-width: 520px;
    margin: 0 0 36px 0; /* تراز کردن حاشیه به سمت راست */
    line-height: 1.9;
  }
  
  /* ── باکس اختصاصی تصویر هیرو (سمت چپ) ── */
  .hero-image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .hero-img-main {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 4px; /* لبه‌های مدرن و شیک کات‌دار */
    box-shadow: 0 15px 30px rgba(0,0,0,0.04); /* یک سایه بسیار نرم زیر عکس */
  }

/* ─────────────────────────────────────────────────────────────
   7. SEARCH BOX
   ───────────────────────────────────────────────────────────── */
.search-box {
  background: #fff;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 860px;
  margin: 0 auto;
}

/* Deal-type tabs inside search box */
.deal-tabs { display: flex; gap: 6px; margin-bottom: 10px; }

.deal-tab {
  border-radius: var(--radius-sm) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  padding: 6px 18px !important;
  transition: var(--transition);
}
.deal-tab.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(var(--primary-rgb), .3);
}
.deal-tab.btn-outline-secondary {
  color: var(--gray-600) !important;
  border-color: var(--gray-200) !important;
}
.deal-tab.btn-outline-secondary:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Inputs inside search box */
.search-box .form-select,
.search-box .form-control {
  border-radius: var(--radius-sm) !important;
  font-size: .88rem;
  border-color: var(--gray-200);
  background: var(--gray-50);
}
.search-box .form-select:focus,
.search-box .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
  background: #fff;
}

/* Search submit button */
.search-box .btn-search {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm) !important;
  width: 100%;
  box-shadow: 0 3px 10px rgba(var(--primary-rgb), .3);
  transition: var(--transition);
}
.search-box .btn-search:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────
   8. STATS BAR
   ───────────────────────────────────────────────────────────── */
.stats-bar {
  background: linear-gradient(135deg, var(--dark) 0%, #163264 100%);
  border-bottom: 3px solid var(--primary);
  color: #fff;
  padding: 12px 0;
}

.stats-bar__item { padding: 10px 0; }

.stats-bar__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 6px;
  color: var(--primary);
}

.stats-bar__num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.stats-bar__label {
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px;
}


/* ─────────────────────────────────────────────────────────────
   9. SECTION HEADERS
   ───────────────────────────────────────────────────────────── */
.section-head { margin-bottom: 40px; }
.section-head--center { text-align: center; }

/* Eyebrow label above title */
.section-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.section-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}

/* Decorative underline */
.section-line {
  height: 4px;
  width: 56px;
  border-radius: 2px;
  background: var(--primary);
}
.section-head--center .section-line { margin: 0 auto; }


/* ─────────────────────────────────────────────────────────────
   10. PROPERTY CARDS
   ───────────────────────────────────────────────────────────── */
.property-card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff;
  overflow: hidden;
  transition: var(--transition);
}
.property-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg) !important;
  border-color: transparent !important;
}

/* Image wrapper */
.property-card .card-img-top { overflow: hidden; }
.property-card .property-thumb {
  transition: transform .4s ease;
  object-fit: cover;
}
.property-card:hover .property-thumb { transform: scale(1.06); }

/* Card body */
.property-card .card-body { padding: 14px 16px; }
.property-card .card-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

/* Price */
.property-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}
.property-price__unit {
  font-size: .75rem;
  font-weight: 500;
  color: var(--gray-400);
}

/* Meta row (location, area etc.) */
.property-meta {
  font-size: .8rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Feature chips */
.property-features {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  margin-top: 10px;
  flex-wrap: wrap;
}
.property-feat {
  font-size: .78rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Favourite heart */
.property-fav {
  position: absolute;
  top: 10px;
  left: 10px;           /* left in RTL = visual right */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
.property-fav:hover { color: #EF4444; transform: scale(1.1); }


/* ─────────────────────────────────────────────────────────────
   11. CATEGORY / TYPE CARDS
   ───────────────────────────────────────────────────────────── */
.type-card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff !important;
  transition: var(--transition);
  text-decoration: none !important;
  color: var(--dark) !important;
  display: block;
}
.type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  color: var(--dark) !important;
}
.type-card i { transition: transform .25s; color: var(--primary); }
.type-card:hover i { transform: scale(1.15); }

.type-card__name { font-size: .9rem; font-weight: 700; margin-bottom: 2px; }
.type-card__count { font-size: .78rem; color: var(--gray-400); }


/* ─────────────────────────────────────────────────────────────
   12. ENGINEERING SECTION
   ───────────────────────────────────────────────────────────── */
.engineering-section {
  background: linear-gradient(135deg, var(--dark) 0%, #1a3a6e 60%, #163264 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative circles */
.engineering-section::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .1);
  pointer-events: none;
}
.engineering-section::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .07);
  pointer-events: none;
}

.engineering-section__inner { position: relative; z-index: 2; }

/* Eyebrow badge */
.eng-badge {
  display: inline-block;
  background: rgba(var(--gold-rgb), .18);
  border: 1px solid rgba(var(--gold-rgb), .35);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  letter-spacing: .5px;
  margin-bottom: 16px;
}

/* Headline */
.eng-headline {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 14px;
}
.eng-headline__accent { color: var(--gold); }

/* Body text */
.eng-body {
  font-size: .95rem;
  color: rgba(255, 255, 255, .65);
  line-height: 2;
  margin-bottom: 28px;
}

/* Stat pills */
.eng-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}
.eng-stat__num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.eng-stat__label {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 4px;
}

/* Service cards */
.eng-service-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.eng-service-card:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(var(--primary-rgb), .4);
  transform: translateY(-3px);
}

.eng-service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 21px;
  /* background & color set via modifier classes below */
}

/* Six icon color modifiers */
.eng-icon--blue   { background: rgba(96,165,250,.18);  color: #60a5fa; }
.eng-icon--green  { background: rgba(52,211,153,.18);  color: #34d399; }
.eng-icon--gold   { background: rgba(251,191,36,.18);  color: #fbbf24; }
.eng-icon--red    { background: rgba(248,113,113,.18); color: #f87171; }
.eng-icon--purple { background: rgba(167,139,250,.18); color: #a78bfa; }
.eng-icon--sky    { background: rgba(56,189,248,.18);  color: #38bdf8; }

.eng-service-card__title {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.eng-service-card__desc {
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.75;
}

/* Buttons inside engineering section */
.btn-eng-primary {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  padding: 10px 28px;
  box-shadow: 0 4px 14px rgba(var(--gold-rgb), .35);
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-eng-primary:hover {
  background: var(--gold-dark);
  color: var(--dark);
  transform: translateY(-1px);
}

.btn-eng-ghost {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  padding: 10px 28px;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-eng-ghost:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   13. CTA BANNER
   ───────────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 0;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.cta-section__inner { position: relative; z-index: 1; }

.cta-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.cta-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.cta-body {
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 28px;
}

.btn-cta-light {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 10px 28px;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.btn-cta-light:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.btn-cta-outline {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 10px 28px;
  border: 2px solid rgba(255, 255, 255, .45);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.btn-cta-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark) !important;
  border-top: 3px solid var(--primary);
  color: rgba(255, 255, 255, .7);
  padding-top: 56px;
  padding-bottom: 0;
}

.site-footer h5,
.site-footer h6 { color: #fff; font-weight: 700; }

.site-footer a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .2s;
}
.site-footer a:hover { color: var(--primary) !important; }

/* Brand block */
.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-brand__icon {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  flex-shrink: 0;
}
.footer-brand__name { font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.15; }
.footer-brand__sub  { font-size: .7rem; color: rgba(255,255,255,.4); }
.footer-brand__desc { font-size: .82rem; line-height: 1.85; color: rgba(255,255,255,.5); margin-bottom: 16px; }

/* Contact list */
.footer-contact { list-style: none; padding: 0; margin: 0 0 16px; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .83rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.footer-contact li i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* Column title */
.footer-col-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Link list */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  font-size: .83rem;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .2s;
}
.footer-links a:hover { color: var(--primary) !important; }
.footer-links a i { font-size: 9px; color: var(--gold); }

/* Neighborhood badges */
.footer-hood-badge {
  display: inline-block;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.6);
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  transition: var(--transition);
  margin: 2px;
}
.footer-hood-badge:hover {
  background: rgba(var(--primary-rgb), .35) !important;
  border-color: var(--primary);
  color: #fff !important;
}

/* Working hours box */
.footer-hours {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  line-height: 1.9;
}
.footer-hours__title { font-weight: 600; color: #fff; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }

/* Divider & bottom bar */
.footer-divider { border-color: rgba(255,255,255,.09) !important; margin: 32px 0 16px; }
.footer-bottom {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
}


/* ─────────────────────────────────────────────────────────────
   15. BUTTONS  (global overrides on top of Bootstrap)
   ───────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--primary) !important;
  border-color:     var(--primary) !important;
  font-weight: 600;
}
.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color:     var(--primary-dark) !important;
}

.btn-outline-primary {
  color:        var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Rounded pill variants */
.btn-pill { border-radius: var(--radius-pill) !important; }

/* View-all small button */
.btn-view-all {
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  background: transparent;
  text-decoration: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-view-all:hover {
  background: var(--primary);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────────
   16. BADGES
   ───────────────────────────────────────────────────────────── */
.badge-available  { background: var(--success);  color: #fff; }
.badge-sold       { background: var(--danger);   color: #fff; }
.badge-rented     { background: var(--info);     color: var(--dark); }
.badge-pending    { background: var(--warning);  color: var(--dark); }
.badge-inactive   { background: var(--gray-400); color: #fff; }

/* Deal-type badges on cards */
.badge-sale     { background: rgba(var(--primary-rgb), .85); color: #fff; }
.badge-rent     { background: rgba(25,135,84,.85);           color: #fff; }
.badge-mortgage { background: rgba(var(--gold-rgb), .85);    color: var(--dark); }


/* ─────────────────────────────────────────────────────────────
   17. FORMS
   ───────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}

/* Admin drop-zone */
.drop-zone {
  border: 2px dashed var(--primary) !important;
  border-radius: var(--radius);
  transition: var(--transition);
}
.drop-zone:hover,
.drop-zone.drag-over { background: rgba(var(--primary-rgb), .05) !important; }

.filter-deal { border-radius: var(--radius-pill) !important; }


/* ─────────────────────────────────────────────────────────────
   18. PAGINATION
   ───────────────────────────────────────────────────────────── */
.pagination .page-link {
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  font-size: .88rem;
  min-width: 36px;
  text-align: center;
  color: var(--primary);
}
.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pagination .page-link:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}


/* ─────────────────────────────────────────────────────────────
   19. ADMIN / DROP-ZONE / IMAGE GRID
   ───────────────────────────────────────────────────────────── */
.img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.img-item {
  position: relative;
  width: 120px; height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: grab;
  border: 2px solid var(--gray-200);
  transition: border-color .2s;
}
.img-item.featured { border-color: var(--primary) !important; }
.img-item:active { cursor: grabbing; }
.img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-item .img-actions {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; gap: 5px;
}
.img-item:hover .img-actions { display: flex; }
.btn-xs { padding: 2px 6px !important; font-size: .72rem !important; }


/* ─────────────────────────────────────────────────────────────
   20. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .engineering-section .col-lg-5 { margin-bottom: 32px; }
}

@media (max-width: 768px) {
  .hero-section { padding: 80px 0 56px; min-height: auto; }
  .section-title { font-size: 1.25rem; }
  .stats-bar__item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .property-card .card-img-top { height: 180px !important; }
  .section-pad { padding: 52px 0; }
}

@media (max-width: 576px) {
  .topbar .topbar__contact { font-size: .72rem; }
  .search-box { padding: 12px !important; }
  .hero-headline { font-size: 1.7rem; }
}


/* ─────────────────────────────────────────────────────────────
   21. PRINT
   ───────────────────────────────────────────────────────────── */
@media print {
  .navbar, .topbar, footer, .btn,
  .admin-sidebar, .admin-topbar, #filterForm { display: none !important; }
  .admin-main { margin: 0 !important; }
  body { background: #fff; }
}