/* ═══════════════════════════════════════════════════════
   Propeazy WordPress Theme — Main Stylesheet
   Mirrors the original static site design exactly.
═══════════════════════════════════════════════════════ */

/* ─── CSS Variables ───────────────────────────────────── */
:root {
  --primary-color: #0d47a1;
  --primary-light: #5472d3;
  --primary-dark:  #002171;
  --accent-color:  #f59e0b;

  --text-dark:  #1e293b;
  --text-body:  #475569;
  --text-light: #94a3b8;

  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-gray:  #f1f5f9;

  --border-color: #e2e8f0;

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  --transition-fast:   .15s ease-in-out;
  --transition-normal: .3s ease-in-out;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --container-width:  1200px;
  --section-padding:  5rem 1.5rem;
}

/* ─── Reset ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { font-size:16px; scroll-behavior:smooth; }
body  { font-family:var(--font-family); color:var(--text-body); background:var(--bg-light);
        line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh; }
main  { flex:1 0 auto; }
img   { max-width:100%; height:auto; display:block; }
a     { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
ul    { list-style:none; }
h1,h2,h3,h4,h5,h6 { color:var(--text-dark); font-weight:700; line-height:1.2; margin-bottom:1rem; }
h1 { font-size:2.5rem; } h2 { font-size:2rem; } h3 { font-size:1.5rem; } h4 { font-size:1.25rem; }
p  { margin-bottom:1rem; }

/* ─── Layout ──────────────────────────────────────────── */
.container { width:100%; max-width:var(--container-width); margin:0 auto; padding:0 1.5rem; }
.section   { padding:var(--section-padding); }
.text-center { text-align:center; }

/* ─── Utilities ───────────────────────────────────────── */
.bg-white  { background:var(--bg-white); }
.bg-light  { background:var(--bg-light); }
.bg-gray   { background:var(--bg-gray); }
.bg-primary { background:var(--primary-color); color:white; }

/* ─── Buttons ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.5rem;
       font-weight:600; border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition-normal);
       border:none; font-size:1rem; font-family:inherit; }
.btn-primary { background:var(--primary-color); color:white; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); color:white; }
.btn-accent  { background:var(--accent-color); color:white; }
.btn-accent:hover  { background:#d97706; transform:translateY(-2px); box-shadow:var(--shadow-md); color:white; }
.btn-outline { background:transparent; border:2px solid var(--primary-color); color:var(--primary-color); }
.btn-outline:hover { background:var(--primary-color); color:white; }
.btn-block   { display:block; width:100%; }

/* ─── Header & Nav ────────────────────────────────────── */
.header { position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,.95);
          backdrop-filter:blur(10px); z-index:1000; transition:all var(--transition-normal);
          border-bottom:1px solid transparent; }
.header.scrolled { box-shadow:var(--shadow-sm); border-bottom-color:var(--border-color); padding:.5rem 0; }
.nav-container  { display:flex; justify-content:space-between; align-items:center; height:80px; transition:height var(--transition-normal); }
.header.scrolled .nav-container { height:60px; }
.logo           { font-size:1.5rem; font-weight:800; color:var(--primary-color); display:flex; align-items:center; gap:.5rem; }
.logo-img       { height:42px; width:auto; object-fit:contain; }
/* WordPress custom logo fix */
.logo .custom-logo-link img,
.footer-logo .custom-logo-link img { display:block; }
.logo .custom-logo-link { display:flex; }
.nav-menu       { display:flex; gap:2rem; align-items:center; }
.nav-link       { font-weight:500; color:var(--text-dark); position:relative; padding:.25rem 0; }
.nav-link::after { content:''; position:absolute; width:0; height:2px; bottom:-4px; left:0;
                   background:var(--primary-color); transition:width var(--transition-normal); }
.nav-link:hover  { color:var(--primary-color); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active  { color:var(--primary-color); }
.nav-item.dropdown { position:relative; }
.dropdown-menu  { position:absolute; top:100%; left:0; min-width:200px; background:white; border-radius:var(--radius-md);
                  box-shadow:var(--shadow-md); padding:.5rem 0; opacity:0; visibility:hidden;
                  transform:translateY(10px); transition:all var(--transition-fast); z-index:100; }
.nav-item.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-item  { display:block; padding:.75rem 1.5rem; color:var(--text-dark); font-weight:500;
                  transition:background-color var(--transition-fast), color var(--transition-fast); }
.dropdown-item:hover { background:var(--bg-light); color:var(--primary-color); }
.nav-contact    { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--primary-color); }
.mobile-toggle  { display:none; background:none; border:none; font-size:1.5rem; color:var(--text-dark); cursor:pointer; }

/* ─── Hero ────────────────────────────────────────────── */
.hero { position:relative; min-height:80vh; display:flex; align-items:center; margin-top:80px;
        background-color:var(--primary-dark);
        background-image:linear-gradient(rgba(0,33,113,.7),rgba(0,33,113,.7)), url('../images/hero-bg.jpg');
        background-size:cover; background-position:center; color:white; }
.hero-content   { max-width:800px; text-align:center; margin:0 auto; padding-bottom:4rem; }
.hero-title     { color:white; font-size:3.5rem; margin-bottom:1rem; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.hero-subtitle  { font-size:1.25rem; margin-bottom:2rem; opacity:.9; font-weight:400; }

/* Search Bar */
.search-wrapper { position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
                  width:90%; max-width:1000px; background:white; border-radius:var(--radius-lg);
                  box-shadow:var(--shadow-lg); padding:1rem; z-index:10; }
.search-form    { display:flex; gap:1rem; }
.search-group   { flex:1; display:flex; flex-direction:column; border-right:1px solid var(--border-color); padding-right:1rem; }
.search-group:last-of-type { border-right:none; }
.search-label   { font-size:.8rem; font-weight:600; color:var(--text-light); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.5px; }
.search-input,.search-select { border:none; outline:none; font-size:1rem; color:var(--text-dark);
                                font-family:inherit; background:transparent; width:100%; }
.search-select  { appearance:none; -webkit-appearance:none; cursor:pointer; }
.search-btn-wrapper { display:flex; align-items:center; }
.btn-search     { height:100%; padding:0 2rem; font-size:1.1rem; white-space:nowrap; }

/* ─── Section Headers ─────────────────────────────────── */
.section-header   { text-align:center; margin-bottom:3rem; }
.section-subtitle { color:var(--primary-color); font-weight:600; text-transform:uppercase;
                    letter-spacing:1px; font-size:.875rem; margin-bottom:.5rem; display:block; }

/* ─── Property Cards ──────────────────────────────────── */
.property-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2rem; }
.property-card { background:white; border-radius:var(--radius-lg); overflow:hidden;
                 box-shadow:var(--shadow-sm); transition:transform var(--transition-normal), box-shadow var(--transition-normal);
                 border:1px solid var(--border-color); display:flex; flex-direction:column; }
.property-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.property-img-wrap { position:relative; height:220px; overflow:hidden; }
.property-img      { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.property-card:hover .property-img { transform:scale(1.05); }
.property-img-placeholder { width:100%; height:100%; background:var(--bg-gray); display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--border-color); }
.property-badge { position:absolute; top:1rem; left:1rem; padding:.3rem .7rem; border-radius:var(--radius-sm);
                  color:white; font-size:.75rem; font-weight:600; z-index:2; display:inline-flex; align-items:center; gap:.3rem; }
.property-content  { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.property-price    { font-size:1.5rem; font-weight:700; color:var(--primary-color); margin-bottom:.5rem; display:flex; align-items:center; }
.property-price span { font-size:.875rem; color:var(--text-light); font-weight:400; margin-left:.25rem; }
.property-title    { font-size:1.125rem; margin-bottom:.5rem; }
.property-title a:hover { color:var(--primary-color); }
.property-location { color:var(--text-light); font-size:.9rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.property-features { display:flex; justify-content:space-between; padding:1rem 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); margin-bottom:1.5rem; flex-wrap:wrap; gap:.5rem; }
.feature   { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--text-body); font-weight:500; }
.feature i { color:var(--primary-light); }
.property-desc   { font-size:.9rem; color:var(--text-body); margin-bottom:1.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.property-footer { margin-top:auto; }

/* Filter Tabs */
.filters-section { background:white; padding:1.5rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
                   margin-top:-30px; position:relative; z-index:10; margin-bottom:3rem; }
.filters-form    { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.filter-tabs     { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.filter-tab      { padding:.5rem 1rem; border-radius:var(--radius-full); font-weight:500; font-size:.875rem;
                   border:1px solid var(--border-color); color:var(--text-dark); transition:all var(--transition-fast); }
.filter-tab:hover, .filter-tab.active { background:var(--primary-color); color:white; border-color:var(--primary-color); }
.tab-count       { display:inline-block; background:rgba(255,255,255,.25); border-radius:var(--radius-full);
                   padding:0 .4rem; font-size:.75rem; margin-left:.3rem; }
.filter-tab:not(.active) .tab-count { background:var(--bg-gray); color:var(--text-light); }
.results-count   { font-size:.875rem; color:var(--text-light); font-weight:500; }

/* No Results */
.no-results { text-align:center; padding:5rem 2rem; }
.no-results i { font-size:4rem; color:var(--border-color); margin-bottom:1.5rem; display:block; }
.no-results h3  { margin-bottom:.5rem; }
.no-results p   { color:var(--text-light); margin-bottom:2rem; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:3rem; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
                            border-radius:var(--radius-md); border:1px solid var(--border-color);
                            background:white; color:var(--text-dark); font-weight:600; transition:all var(--transition-fast); }
.pagination .page-numbers:hover, .pagination .current { background:var(--primary-color); color:white; border-color:var(--primary-color); }
.pagination .prev, .pagination .next { width:auto; padding:0 1rem; }

/* ─── Services / Why Us ───────────────────────────────── */
.services-section { background:var(--bg-white); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.service-card  { text-align:center; padding:2rem; border-radius:var(--radius-lg); background:var(--bg-light); transition:transform var(--transition-normal); }
.service-card:hover { transform:translateY(-5px); background:white; box-shadow:var(--shadow-md); }
.service-icon  { width:70px; height:70px; background:rgba(13,71,161,.1); color:var(--primary-color);
                 border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
                 font-size:2rem; margin:0 auto 1.5rem; }

/* ─── Category Grid ───────────────────────────────────── */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.5rem; }
.category-card   { display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.5rem;
                   border-radius:var(--radius-lg); background:var(--bg-light); border:1px solid var(--border-color);
                   transition:all var(--transition-normal); }
.category-card:hover { background:var(--primary-color); color:white; transform:translateY(-5px); box-shadow:var(--shadow-md); }
.category-card:hover h3, .category-card:hover .category-count { color:white; }
.category-icon   { width:60px; height:60px; background:rgba(13,71,161,.1); color:var(--primary-color);
                   border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
                   font-size:1.5rem; margin-bottom:1rem; transition:all var(--transition-normal); }
.category-card:hover .category-icon { background:rgba(255,255,255,.2); color:white; }
.category-card h3 { font-size:1.1rem; margin-bottom:.25rem; }
.category-count  { font-size:.85rem; color:var(--text-light); }

/* ─── CTA ─────────────────────────────────────────────── */
.cta-section { background:var(--primary-color); color:white; text-align:center; padding:4rem 1.5rem;
               border-radius:var(--radius-xl); margin:4rem auto; max-width:var(--container-width); }
.cta-section h2, .cta-section p { color:white; }
.cta-section p { color:rgba(255,255,255,.9); max-width:600px; margin:0 auto 2rem; font-size:1.1rem; }

/* ─── Page Header (inner pages) ───────────────────────── */
.page-header    { margin-top:80px; background:var(--primary-dark); color:white; padding:4rem 1.5rem; text-align:center;
                  background-image:linear-gradient(rgba(0,33,113,.85),rgba(0,33,113,.85)), url('../images/hero-bg.jpg');
                  background-size:cover; background-position:center; }
.page-title     { color:white; font-size:2.5rem; margin-bottom:.5rem; }
.page-subtitle  { color:rgba(255,255,255,.9); font-size:1.1rem; }

/* ─── Page Content ────────────────────────────────────── */
.page-content-wrap { max-width:860px; margin:0 auto; }
.page-content   { background:white; border-radius:var(--radius-lg); padding:3rem; box-shadow:var(--shadow-sm); border:1px solid var(--border-color); }
.page-content h2 { margin-top:2rem; font-size:1.5rem; }
.page-content h3 { margin-top:1.5rem; font-size:1.2rem; }
.page-content p  { color:var(--text-body); line-height:1.8; }
.page-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:1rem; }
.page-content ul li { margin-bottom:.5rem; color:var(--text-body); }

/* ─── Footer ──────────────────────────────────────────── */
.footer       { background:var(--text-dark); color:var(--bg-light); padding:4rem 0 2rem; margin-top:auto; }
.footer-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:3rem; margin-bottom:3rem; }
.footer-col h3 { color:white; margin-bottom:1.5rem; font-size:1.25rem; }
.footer-logo  { font-size:1.75rem; font-weight:800; color:white; margin-bottom:1rem; display:inline-block; }
.footer-logo-img, .footer-logo .custom-logo-link img { height:54px; width:auto; object-fit:contain; margin-bottom:.5rem; filter:brightness(0) invert(1); }
.footer-text  { color:var(--text-light); margin-bottom:1.5rem; }
.footer-links li { margin-bottom:.75rem; }
.footer-links a  { color:var(--text-light); transition:all var(--transition-fast); display:inline-block; }
.footer-links a:hover { color:white; padding-left:5px; }
.footer-contact li { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; color:var(--text-light); }
.footer-contact i  { color:var(--accent-color); margin-top:3px; }
.footer-contact a  { color:var(--text-light); }
.footer-contact a:hover { color:white; }
.footer-bottom { text-align:center; padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); color:var(--text-light); font-size:.875rem; }
.footer-bottom a { color:var(--text-light); }
.footer-bottom a:hover { color:white; }

/* ─── Floating WhatsApp ───────────────────────────────── */
.floating-whatsapp { position:fixed; bottom:30px; right:30px; background:#25d366; color:white;
                     width:60px; height:60px; border-radius:50%; display:flex; justify-content:center;
                     align-items:center; font-size:35px; box-shadow:var(--shadow-lg); z-index:9999;
                     transition:transform var(--transition-fast), background var(--transition-fast); }
.floating-whatsapp:hover { transform:scale(1.1); background:#128c7e; color:white; }

/* ─── Lightbox ────────────────────────────────────────── */
.lightbox-modal { display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,.92);
                  align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox-modal.active { display:flex; }
.lightbox-content { margin:auto; max-width:92%; max-height:90vh; object-fit:contain;
                    border-radius:var(--radius-md); animation:zoomIn .3s; cursor:default; }
@keyframes zoomIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-close { position:absolute; top:20px; right:35px; color:#f1f1f1; font-size:40px; font-weight:bold; cursor:pointer; transition:.3s; }
.lightbox-close:hover { color:#bbb; }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5);
                                   color:white; border:none; font-size:2rem; padding:1rem; cursor:pointer;
                                   transition:.3s; border-radius:var(--radius-sm); z-index:10000; display:flex;
                                   align-items:center; justify-content:center; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(0,0,0,.8); }
.lightbox-prev { left:20px; } .lightbox-next { right:20px; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width:992px) {
  .hero-title { font-size:2.5rem; }
}

@media (max-width:768px) {
  h1 { font-size:2rem; } h2 { font-size:1.75rem; }
  .section { padding:3rem 1rem; }
  .mobile-toggle { display:block; }
  .nav-menu { position:absolute; top:100%; left:0; width:100%; background:white; flex-direction:column;
              padding:2rem; gap:1.5rem; box-shadow:var(--shadow-md); transform:translateY(-10px);
              opacity:0; pointer-events:none; transition:all var(--transition-normal); border-top:1px solid var(--border-color); }
  .nav-menu.active { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-contact-wrapper { display:none; }
  .hero { margin-top:60px; min-height:70vh; }
  .hero-title { font-size:1.75rem; padding:0 .5rem; }
  .hero-content { padding-bottom:2rem; }
  .search-wrapper { position:relative; bottom:0; transform:none; left:0; width:100%; margin-top:2rem; padding:1.5rem; }
  .search-form    { flex-direction:column; }
  .search-group   { border-right:none; border-bottom:1px solid var(--border-color); padding-right:0; padding-bottom:1rem; }
  .btn-search     { width:100%; padding:1rem; }
  .filter-tabs    { gap:.4rem; }
  .page-content   { padding:2rem 1.25rem; }
  .dropdown-menu  { position:static; box-shadow:none; padding:.5rem 0 .5rem 1rem; opacity:1; visibility:visible; transform:none; }
  .cta-section { margin:2rem 1rem; }
}

@media (max-width:480px) {
  .property-grid { grid-template-columns:1fr; }
  .categories-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:1fr; }
}