/* Hafiz Properties — Final UI, Interaction & Conversion Polish
   Isolated layer over the perfected baseline. */

:root{
  --focus-ring:0 0 0 4px rgba(24,76,55,.14);
  --interactive-shadow:0 12px 28px rgba(31,51,40,.11);
}

/* Accessibility + interaction */
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--green);outline-offset:3px
}
.btn:focus-visible,.filter-pill:focus-visible{box-shadow:var(--focus-ring)}
::selection{background:#dcebe2;color:var(--green-dark)}

/* Header polish */
.site-header{transition:box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.site-header.scrolled{background:rgba(255,253,248,.985);border-bottom-color:#ddd3c5}
.brand{transition:opacity .15s ease}.brand:hover{opacity:.9}
.main-nav>a:not(.btn){position:relative;transition:color .15s ease,background-color .15s ease}
.main-nav>a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:3px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.main-nav>a:not(.btn):hover::after,.main-nav>a.active::after{transform:scaleX(1)}
.main-nav>a.active{font-weight:850}
.nav-cta{margin-left:5px}

/* Buttons: clearer action hierarchy */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--interactive-shadow)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{box-shadow:0 10px 22px rgba(24,76,55,.16)}
.btn-ghost{box-shadow:0 6px 16px rgba(31,51,40,.04)}

/* Hero conversion polish without rescaling the approved layout */
.hero-actions{align-items:center}
.hero-call-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--green-dark);font-size:13px;font-weight:800}
.hero-call-link:hover{color:var(--gold-2)}
.hero-call-link svg{width:15px!important;height:15px!important;flex:0 0 15px;fill:currentColor}
.hero-photo-wrap{transition:box-shadow .2s ease,transform .2s ease}
.hero-photo-wrap:hover{box-shadow:0 32px 74px rgba(31,51,40,.19)}

/* Service/trust strip icons */
.trust-icon svg{display:block!important;width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust-item{transition:background-color .16s ease}.trust-item:hover{background:#fffdf8}

/* Cards */
.card,.process-card,.faq details{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.service-card:hover,.property-card:hover,.process-card:hover{border-color:#d7c7b0;box-shadow:0 16px 38px rgba(31,51,40,.09)}
.process-card:hover{transform:translateY(-2px)}
.service-link,.link-arrow{display:inline-flex;align-items:center;gap:4px;transition:color .15s ease,gap .15s ease}
.service-link:hover,.link-arrow:hover{gap:7px}
.property-card .btn{width:100%;min-height:46px}
.property-card .body{display:flex;flex-direction:column;min-height:310px}
.property-card .body .btn{margin-top:auto}
.property-card .small-note{margin-top:12px}
.property-grid-status{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-12px 0 22px;color:var(--muted);font-size:12px}
.property-grid-status strong{color:var(--green-dark)}
.filter-pill{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.filter-pill:hover{transform:translateY(-1px)}
.filter-empty{display:none;text-align:center;padding:34px;border:1px dashed #d7c9b5;border-radius:18px;background:#fff;color:var(--muted)}
.filter-empty.show{display:block}

/* Better anchor landing positions */
.service-row[id]{scroll-margin-top:116px}

/* FAQ polish */
.faq summary{min-height:56px;align-items:center;transition:color .15s ease}
.faq summary:hover{color:var(--green)}
.faq summary:after{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:50%;background:#f7efe1;transition:transform .18s ease,background-color .18s ease}
.faq details[open]{box-shadow:0 12px 28px rgba(31,51,40,.06)}
.faq details[open] summary:after{transform:rotate(180deg);background:#efe0c5}

/* Contact conversion */
.contact-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.contact-quick-actions .btn{min-height:44px;padding:0 13px;font-size:13px}
.field-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field-counter{color:#8a918c;font-size:11px;font-weight:700}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:#b64a32;box-shadow:0 0 0 3px rgba(182,74,50,.08)}
.form-inline-error{display:none;color:#a53d29;font-size:12px;font-weight:700;margin-top:2px}
.form-inline-error.show{display:block}
.form-submit-state{pointer-events:none;opacity:.78}
.form-card .btn[type="submit"]{width:100%}

/* CTA + footer hierarchy */
.cta-band .btn{min-width:160px}
.footer-grid a{width:max-content;max-width:100%}
.footer-contact-link{font-weight:800;color:var(--green-dark)}
.footer-map-link{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:13px;font-weight:800}

/* Mobile conversion bar */
.mobile-action-bar{display:none}
@media(max-width:640px){
  body{padding-bottom:68px}
  .floating-whatsapp{display:none}
  .mobile-action-bar{position:fixed;display:grid;grid-template-columns:1fr 1.25fr;gap:8px;left:0;right:0;bottom:0;z-index:120;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,253,248,.97);border-top:1px solid #dfd6c9;box-shadow:0 -10px 30px rgba(31,51,40,.10);backdrop-filter:blur(12px)}
  .mobile-action-bar a{min-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:850}
  .mobile-action-call{border:1px solid #cfc4b5;background:#fff;color:var(--green-dark)}
  .mobile-action-whatsapp{background:var(--green);color:#fff}
  .main-nav{max-height:calc(100vh - 100px);overflow:auto}
  .main-nav>a:not(.btn){padding:13px 14px}
  .main-nav>a:not(.btn)::after{bottom:8px}
  .contact-quick-actions{grid-template-columns:1fr}
  .property-card .body{min-height:0}
  .property-grid-status{align-items:flex-start;flex-direction:column;margin-top:-8px}
  .cta-band .btn{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}