/* ============================================================================
   The Prop Guru — UI/UX & Animation Enhancements (Sections 7 & 8)
   Loaded after custom.css. Purely additive — does not override base layout.
   ============================================================================ */

:root{
  --tpg-primary:#eb6753;        /* matches existing accent */
  --tpg-dark:#181a20;
  --tpg-ease:cubic-bezier(.22,.61,.36,1);
}

/* Property and interior services call card */
.call-now-service-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.58));
  border: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

.call-now-service-card .list-title,
.call-now-service-card .list-title a,
.call-now-service-card .btn,
.call-now-service-card .btn i {
  color: #ffffff !important;
}

.call-now-service-card .list-title a:hover,
.call-now-service-card .btn:hover,
.call-now-service-card .btn:hover i {
  color: #ffffff;
}

/* ---------- Scroll reveal (JS adds .tpg-in when in viewport) ------------- */
[data-tpg].tpg-reveal{opacity:0;transition:opacity .7s var(--tpg-ease),transform .7s var(--tpg-ease);will-change:opacity,transform;}
[data-tpg="fade-up"].tpg-reveal{transform:translateY(40px);}
[data-tpg="fade-in"].tpg-reveal{transform:none;}
[data-tpg="fade-left"].tpg-reveal{transform:translateX(-40px);}
[data-tpg="fade-right"].tpg-reveal{transform:translateX(40px);}
[data-tpg="zoom-in"].tpg-reveal{transform:scale(.92);}
[data-tpg].tpg-reveal.tpg-in{opacity:1;transform:none;}
/* FALLBACK: if JS fails or IntersectionObserver never fires, reveal after 1.5s */
[data-tpg].tpg-reveal{animation:tpg-fallback-reveal 0s 1.5s forwards;}
@keyframes tpg-fallback-reveal{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  [data-tpg].tpg-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---------- Buttons: hover lift + ripple (Section 7) -------------------- */
.ud-btn,.btn-primary,.tpg-btn{position:relative;overflow:hidden;transition:transform .25s var(--tpg-ease),box-shadow .25s var(--tpg-ease),background-color .25s var(--tpg-ease);}
.ud-btn:hover,.tpg-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(235,103,83,.28);}
.tpg-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.5);animation:tpg-ripple .6s linear;pointer-events:none;}
@keyframes tpg-ripple{to{transform:scale(4);opacity:0;}}

/* ---------- Cards: hover elevation + scale (Section 7) ------------------ */
.tpg-card,.listing-style1,.feature-style,.blog-style1{transition:transform .3s var(--tpg-ease),box-shadow .3s var(--tpg-ease);}
.tpg-card:hover,.listing-style1:hover,.feature-style:hover,.blog-style1:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.12);}

/* ---------- Images: zoom on hover -------------------------------------- */
.tpg-zoom{overflow:hidden;border-radius:12px;}
.tpg-zoom img{transition:transform .6s var(--tpg-ease);display:block;width:100%;}
.tpg-zoom:hover img{transform:scale(1.08);}

/* ---------- Tabs active animation -------------------------------------- */
.nav-pills .nav-link,.nav-tabs .nav-link{transition:color .25s var(--tpg-ease),background-color .25s var(--tpg-ease),box-shadow .25s var(--tpg-ease);}
.nav-pills .nav-link.active{box-shadow:0 6px 16px rgba(235,103,83,.3);}

/* ---------- Sticky inquiry / contact options (Section 2 & 8) ----------- */
.tpg-sticky{position:sticky;top:110px;}
@media(max-width:991px){.tpg-sticky{position:static;}}

/* Floating mobile contact bar */
.tpg-float-contact{position:fixed;right:18px;bottom:22px;z-index:1040;display:flex;flex-direction:column;gap:12px;}
.tpg-float-contact a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .25s var(--tpg-ease);}
.tpg-float-contact a:hover{transform:scale(1.12);color:#fff;}
.tpg-float-contact .tpg-wa{background:#25d366;}
.tpg-float-contact .tpg-call{background:var(--tpg-primary);}

/* ---------- Property quick-view badge / card polish -------------------- */
.tpg-quickview{position:absolute;top:12px;right:12px;background:#fff;border:none;border-radius:50px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--tpg-dark);opacity:0;transform:translateY(-6px);transition:all .3s var(--tpg-ease);cursor:pointer;z-index:3;}
.listing-style1:hover .tpg-quickview,.tpg-card:hover .tpg-quickview{opacity:1;transform:translateY(0);}

/* ---------- Quick-view modal ------------------------------------------- */
.tpg-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1060;padding:20px;}
.tpg-modal.open{display:flex;}
.tpg-modal__box{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:90vh;overflow:auto;animation:tpg-pop .35s var(--tpg-ease);}
@keyframes tpg-pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
.tpg-modal__close{float:right;border:none;background:#f1f1f1;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;}

/* ---------- Call Now Modal Split Layout -------------------------------- */
.tpg-modal__content{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.tpg-modal__content .row{
  flex-direction:row;
  gap:0;
}
.tpg-modal__left,.tpg-modal__right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:24px;
}
@media (min-width:992px){
  .tpg-modal__left,.tpg-modal__right{flex:1 0 50%;}
}
.tpg-modal__left{
  order:1;
}
.tpg-modal__right{
  order:2;
}
.tpg-modal__heading{
  font-size:28px;
  font-weight:700;
  color:var(--tpg-dark);
  margin-bottom:16px;
  text-align:center;
}
@media (max-width:991px){
  .tpg-modal__content{flex-direction:column;}
  .tpg-modal__left,.tpg-modal__right{order:1;width:100%;}
}
.tpg-modal__services{
  list-style:none;
  padding:0;
  margin:0;
}
.tpg-modal__services li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid #f0f0f0;
}
.tpg-modal__services li:last-child{
  border-bottom:none;
}
.tpg-modal__services i{
  color:var(--tpg-primary);
  font-size:16px;
  min-width:20px;
}
.tpg-modal__btn{
  width:100%;
  padding:12px;
  background:var(--tpg-primary);
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  text-align:center;
  margin-top:auto;
}
.tpg-modal__btn:hover{
  background:#d4503e;
}
/* Fallback: if modal open class removed, hide scrollbar on body */
body.modal-open{overflow:hidden;}

/* ---------- Call Now split-design popup --------------------------------- */
.tpg-modal__box--split{max-width:640px;padding:0;overflow:hidden;position:relative;}
.tpg-modal__box--split .tpg-modal__close{
  position:absolute;top:12px;right:14px;z-index:5;background:rgba(255,255,255,.85);
  float:none;margin:0;
}
.tpg-callsplit{display:flex;flex-direction:row;align-items:stretch;min-height:420px;width:100%;}
.tpg-callsplit__left{
  flex:0 0 42%;
  max-width:42%;
  background:#ffffff;
  color:var(--tpg-dark);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 20px;
  gap:6px;
  box-sizing:border-box;
  border-right:1px solid #eee;
}
.tpg-callsplit__logo{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:14px;
  background:#fff;
  border-radius:50%;
  padding:10px;
  box-sizing:border-box;
}
.tpg-callsplit__left h3{font-size:20px;font-weight:700;margin:0;color:var(--tpg-dark);}
.tpg-callsplit__left p{font-size:13px;color:#6b7280;margin:0;}
.tpg-callsplit__right{
  flex:0 0 58%;
  max-width:58%;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}
.tpg-callsplit__right .tpg-modal__heading{text-align:left;font-size:24px;margin-bottom:8px;}
.tpg-callsplit__right .tpg-modal__sub{text-align:left;margin-bottom:20px;}
.tpg-callsplit__right form{display:flex;flex-direction:column;gap:14px;}
@media(max-width:640px){
  .tpg-callsplit{flex-direction:column;min-height:0;}
  .tpg-callsplit__left{padding:24px 16px;}
  .tpg-callsplit__right{padding:24px 20px;}
}

/* ---------- Shared lead field styling ------------------------------------ */
.tpg-lead-field{display:flex;flex-direction:column;gap:6px;}
.tpg-lead-field label{font-size:13px;font-weight:600;color:var(--tpg-dark);}
.tpg-lead-field input,
.tpg-lead-field select{
  width:100%;
  padding:10px 12px;
  border:1px solid #e2e2e2;
  border-radius:8px;
  font-size:14px;
  color:var(--tpg-dark);
  background:#fff;
}
.tpg-lead-field input:focus,
.tpg-lead-field select:focus{
  outline:none;
  border-color:var(--tpg-primary);
  box-shadow:0 0 0 3px rgba(235,103,83,.15);
}
.tpg-modal__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  font-size:15px;
}

/* ---------- Counter section -------------------------------------------- */
.tpg-counter{text-align:center;}
.tpg-counter .num{font-size:42px;font-weight:700;color:var(--tpg-primary);line-height:1;}
.tpg-counter .ttl{margin-top:8px;color:#525252;font-weight:500;}
.tpg-counter .ico{font-size:34px;color:var(--tpg-primary);margin-bottom:10px;}

/* ---------- Sticky header smoothing ------------------------------------ */
.header-nav.stricky{transition:box-shadow .3s var(--tpg-ease),background-color .3s var(--tpg-ease);}
.header-nav.stricky.tpg-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.08);}

/* ---------- Forms: nicer focus + validation ---------------------------- */
.form-control:focus{border-color:var(--tpg-primary);box-shadow:0 0 0 3px rgba(235,103,83,.15);}
.tpg-error{color:#e03131;font-size:13px;margin-top:4px;}
.tpg-field-invalid{border-color:#e03131!important;}

/* ---------- Section title helper --------------------------------------- */
.tpg-section-head{margin-bottom:32px;}
.tpg-section-head h2{font-weight:700;}
.tpg-section-head p{color:#6b7280;max-width:680px;}

/* ---------- Image skeleton / smooth load ------------------------------- */
img.tpg-lazy{opacity:0;transition:opacity .5s var(--tpg-ease);}
img.tpg-lazy.tpg-loaded{opacity:1;}

/* ---------- View Details button fix ------------------------------------ */
/* .list-meta2 a targets ALL anchors including View Details — override it  */
.listing-style1 .list-meta2 .for-what a,
.listing-style1 .list-meta2 a.ud-btn,
.listing-style1 .list-meta2 a.tpg-btn {
  height: auto !important;
  width: auto !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #eb6753 !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.listing-style1 .list-meta2 .for-what a:hover,
.listing-style1 .list-meta2 a.ud-btn:hover,
.listing-style1 .list-meta2 a.tpg-btn:hover {
  background: #d4503e !important;
  color: #ffffff !important;
}
/* WhatsApp icon link — keep it as a small square icon */
.listing-style1 .list-meta2 .icons a {
  height: 35px !important;
  width: 35px !important;
  line-height: 35px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #25d366 !important;
  border-radius: 6px !important;
  color: #fff !important;
}


/* ===== Homepage mobile layout correction ===== */
@media (max-width: 767.98px) {
  /* Remove the large blank space after the enquiry form. */
  .home-enquiry-section {
    padding-bottom: 18px !important;
  }
  .home-enquiry-section .advance-style4 {
    margin-bottom: 0 !important;
  }
  .home-enquiry-section .advance-style4 .tab-content {
    padding: 18px 14px !important;
  }
  .home-enquiry-section #prop_enquiry_form > [class*="col-"] {
    margin-bottom: 14px;
  }
  .home-enquiry-section #prop_enquiry_form > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
  .home-enquiry-section #prop_enquiry_form .ud-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
  }

  /* Keep video/card and text section compact and aligned on mobile. */
  .home-building-section {
    padding-top: 22px !important;
    padding-bottom: 35px !important;
    overflow: hidden;
  }
  .home-building-section .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .home-building-section .property_video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 68%;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
  }
  .home-building-section .property_video iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }
  .home-building-section .img-box-10 {
    margin-top: -2px;
  }
  .home-building-section .img-box-10 .listing-style1 {
    width: calc(100% - 28px);
    margin: 0 auto;
  }
  .home-building-section .about-box-1 {
    margin-top: 30px !important;
  }
  .home-building-section .about-box-1 .title {
    margin-bottom: 16px !important;
    font-size: 28px;
    line-height: 1.3;
  }
  .home-building-section .about-box-1 > .text {
    margin-bottom: 14px !important;
  }
  .home-building-section .funfact_one {
    margin-top: 4px;
  }
  .home-building-section .funfact_one .details {
    width: 50%;
    flex: 0 0 50%;
    margin-bottom: 22px !important;
    text-align: center;
  }
  .home-building-section .funfact_one .timer,
  .home-building-section .funfact_one span {
    font-size: 34px;
    line-height: 44px;
  }
  .home-building-section .funfact_one .text {
    font-size: 14px;
    line-height: 1.4;
  }

  /* One clean mobile contact group: WhatsApp + Call, no overlap. */
  .tpg-float-contact {
    right: 16px;
    bottom: 82px;
    flex-direction: row;
    gap: 10px;
    z-index: 1050;
  }
  .tpg-float-contact a {
    width: 52px;
    height: 52px;
    font-size: 21px;
  }

  /* Hide any third-party WhatsApp widget that may remain cached on mobile. */
  #whatsapp-chat-widget,
  .whatsapp-chat-widget,
  .wa-chat-box-poweredby,
  [class*="whatsapp-widget"],
  [id*="whatsapp-widget"] {
    display: none !important;
  }
}