/* ---- Small additive styles, kept inside the existing Phoenix/Propihunt token system ---- */

        .container-medium{
            max-width:1320px;
            margin-inline:auto;
            padding-inline:1.5rem;
        }
        @media (max-width:576px){
            .container-medium{padding-inline:1rem;}
        }
        .building-detail-row{
            --bs-gutter-x:2rem; /* 32px column gap — same density as the area/community detail page */
        }
        @media (max-width:1200px){
            .building-detail-row{--bs-gutter-x:1.5rem;}
        }

        .building-hero{position:relative;border-radius:1rem;overflow:hidden;height:420px;}
        .building-hero img{width:100%;height:100%;object-fit:cover;}
        .building-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.8) 100%);display:flex;align-items:flex-end;}
        .building-hero-content{padding:1.5rem 2rem;color:#fff;width:100%;}
        .building-quick-stat{border:1px solid var(--phoenix-border-color);border-radius:.75rem;padding:1rem;text-align:center;height:100%;}
        .sticky-sidebar{position:sticky;top:1.5rem;}
        .rating-stars .star{cursor:pointer;font-size:1.6rem;color:var(--phoenix-border-color);transition:color .15s ease;}
        .rating-stars .star.active{color:#f5a623;}
        .review-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;}
        .gallery-thumb{border-radius:.6rem;overflow:hidden;cursor:pointer;height:110px;position:relative;}
        .gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
        /* HOVER FIX: removed "transform:scale(1.06)" — was zooming the image on hover, which changes its shape/size; hover should not move/resize elements */
        .gallery-thumb .gallery-more-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;}
        .link-list-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px dashed var(--phoenix-border-color);}
        .link-list-item:last-child{border-bottom:none;}
        .broker-mini-card{display:flex;gap:.75rem;align-items:center;padding:.75rem 0;border-bottom:1px dashed var(--phoenix-border-color);}
        .broker-mini-card:last-child{border-bottom:none;}
        .broker-avatar-initial{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--phoenix-primary,#3874ff);color:#fff;font-weight:700;font-size:.9rem;}

        /* ---- Amenities / facilities grid — bordered table-style cells ---- */
        .amenity-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--phoenix-border-color);border-radius:.75rem;overflow:hidden;}
        .amenity-cell{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-right:1px solid var(--phoenix-border-color);border-bottom:1px solid var(--phoenix-border-color);}
        .amenity-cell i{color:var(--phoenix-primary,#3874ff);width:18px;text-align:center;font-size:.95rem;}
        .amenity-cell:nth-child(3n){border-right:none;}
        .amenity-grid .amenity-cell:nth-last-child(-n+3){border-bottom:none;}
        @media (max-width:576px){
            .amenity-grid{grid-template-columns:1fr;}
            .amenity-cell{border-right:none;}
            .amenity-grid .amenity-cell:last-child{border-bottom:none;}
        }

        /* ---- Building info — left key-value list + right photo ---- */
        .building-info-row{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;border-bottom:1px solid var(--phoenix-border-color);}
        .building-info-row:last-child{border-bottom:none;}
        .building-info-label{color:var(--phoenix-body-tertiary-color,#6c757d);font-size:.85rem;}
        .building-info-value{font-weight:700;font-size:.85rem;}
        .building-photo-box{width:100%;height:300px;object-fit:cover;border-radius:.85rem;display:block;}

        /* ---- Floor plan cards ---- */
        .floorplan-card{border:1px solid var(--phoenix-border-color);border-radius:.85rem;overflow:hidden;height:100%;}
        .floorplan-card img{width:100%;height:170px;object-fit:cover;background:var(--phoenix-tertiary-bg,#f6f7f9);}
        .floorplan-tab-btn{border:1px solid var(--phoenix-border-color);background:transparent;border-radius:2rem;padding:.4rem 1rem;font-size:.78rem;font-weight:700;color:var(--phoenix-body-tertiary-color,#6c757d);}
        .floorplan-tab-btn.active{background:var(--phoenix-primary,#3874ff);border-color:var(--phoenix-primary,#3874ff);color:#fff;}

        /* ---- Quick action buttons (Buy / Rent) ---- */
        .quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.75rem;border-radius:.65rem;border:none;width:100%;font-weight:700;font-size:.78rem;}

        /* ---- Reviews — verified badge + helpful action ---- */
        .review-verified-badge{font-size:.62rem;font-weight:700;padding:.15rem .5rem;border-radius:1rem;background:var(--phoenix-success-bg-subtle,#e6f7ee);color:var(--phoenix-success,#00a76f);}
        .review-helpful-btn{border:none;background:transparent;color:var(--phoenix-body-tertiary-color,#8a8f98);font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem;padding:0;}
        /* HOVER FIX: removed "color:var(--phoenix-primary,#3874ff)" — was changing text color on hover; original color must stay unchanged */

        /* ---- FAQ accordion — up / down chevron instead of the default plus icon ---- */
        .accordion-button::after{
            background-image:none !important;
            font-family:"Font Awesome 6 Free";
            font-weight:900;
            content:"\f078";
            font-size:.8rem;
            transition:transform .2s ease;
        }
        .accordion-button:not(.collapsed)::after{transform:rotate(180deg);}

        /* ---- About text — comfortable measure ---- */
        .about-text{line-height:1.75;letter-spacing:.1px;font-size:.875rem;}

        /* ---- Trust strip icons (developer / handover / service charge etc.) ---- */
        .trust-strip{display:flex;flex-wrap:wrap;gap:1.25rem;padding:1rem 0;}
        .trust-strip-item{display:flex;align-items:center;gap:.6rem;}
        .trust-strip-item i{width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;background:var(--phoenix-primary-bg-subtle,#eef2ff);color:var(--phoenix-primary,#3874ff);font-size:1rem;}

        /* ---- Nearby places mini-list ---- */
        .nearby-item{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px dashed var(--phoenix-border-color);}
        .nearby-item:last-child{border-bottom:none;}
        .nearby-item i{width:32px;height:32px;border-radius:50%;background:var(--phoenix-tertiary-bg,#f6f7f9);color:var(--phoenix-primary,#3874ff);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;}

        /* ---- Developer mini card ---- */
        .developer-card{display:flex;align-items:center;gap:.85rem;}
        .developer-logo{width:52px;height:52px;border-radius:.7rem;background:var(--phoenix-tertiary-bg,#f6f7f9);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:var(--phoenix-primary,#3874ff);flex-shrink:0;}

        /* ---- Highlight strip under hero (super short brag points) ---- */
        .highlight-pill{border:1px solid var(--phoenix-border-color);border-radius:2rem;padding:.4rem 1rem;font-size:.78rem;font-weight:700;color:var(--phoenix-body-tertiary-color,#6c757d);display:inline-flex;align-items:center;gap:.4rem;}
        .highlight-pill i{color:var(--phoenix-primary,#3874ff);}

        /* ---- Premium "Write a Review" modal ---- */
        #reviewModal .modal-dialog{max-height:88vh;display:flex;align-items:center;}
        #reviewModal .modal-content{border:none;border-radius:1.25rem;overflow:hidden;box-shadow:0 1.5rem 4rem rgba(0,0,0,.25);max-height:88vh;display:flex;flex-direction:column;}
        #reviewModal .modal-header{
            position:relative;
            flex:0 0 auto;
            padding:1.5rem 2rem 3.5rem;
            background:linear-gradient(135deg,var(--phoenix-primary,#3874ff) 0%,#1a2530 130%);
            border:none;
        }
        #reviewModal .modal-title{color:#fff;font-weight:800;margin-bottom:.2rem;}
        #reviewModal .modal-header .review-modal-subtitle{color:rgba(255,255,255,.75);font-size:.8rem;margin:0;}
        #reviewModal .btn-close{filter:invert(1) grayscale(100%) brightness(200%);opacity:.85;}
        #reviewModal .btn-close:hover{opacity:1;}

        /* form is the flex column that holds the (fixed) rating card + the
           (scrollable) fields area, so it needs to flex/shrink correctly
           inside modal-content just like header/footer do. */
        #reviewModal form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}

        #reviewModal .review-rating-card{
            flex:0 0 auto;
            background:#fff;
            border-radius:1rem;
            box-shadow:0 .75rem 2rem rgba(20,30,60,.12);
            padding:1.1rem 1.5rem;
            margin:-2.75rem 2rem 1.1rem;
            position:relative;
            text-align:center;
        }
        #reviewModal .rating-stars .star{font-size:2rem;margin:0 .15rem;color:#dfe3e8 !important;transition:color .12s ease;cursor:pointer;}
        #reviewModal .rating-stars .star.active{color:#f5a623 !important;}
        #reviewModal .rating-hint{font-size:.78rem;font-weight:700;color:var(--phoenix-body-tertiary-color,#8a8f98);min-height:1.1rem;margin-top:.35rem;letter-spacing:.2px;}

        #reviewModal .modal-body{padding:0 2rem 1.25rem;overflow-y:auto;flex:1 1 auto;min-height:0;}
        #reviewModal .modal-body::-webkit-scrollbar{width:5px;}
        #reviewModal .modal-body::-webkit-scrollbar-track{background:transparent;}
        #reviewModal .modal-body::-webkit-scrollbar-thumb{background:var(--phoenix-border-color,#d7dae0);border-radius:10px;}
        #reviewModal .review-field-icon{position:relative;}
        #reviewModal .review-field-icon > i{
            position:absolute;left:1rem;top:2.55rem;
            color:var(--phoenix-body-tertiary-color,#8a8f98);font-size:.85rem;
        }
        #reviewModal .review-field-icon .form-control,
        #reviewModal .review-field-icon .form-select{padding-left:2.4rem;}
        #reviewModal .form-control,#reviewModal .form-select{
            border-radius:.7rem;border-color:var(--phoenix-border-color);
            padding-top:.65rem;padding-bottom:.65rem;font-size:.85rem;
        }
        #reviewModal .form-control:focus,#reviewModal .form-select:focus{
            border-color:var(--phoenix-primary,#3874ff);
            box-shadow:0 0 0 .2rem rgba(56,116,255,.12);
        }
        #reviewModal .form-label{font-size:.8rem;font-weight:700;color:var(--phoenix-body-tertiary-color,#495057);}
        #reviewModal textarea.form-control{resize:none;}

        /* ---- Custom "You Are A" dropdown — replaces the native <select> so
             its option list stays visually contained inside the modal
             instead of escaping via the browser's own native popup layer. ---- */
        #reviewModal .review-role-select{position:relative;}
        #reviewModal .review-role-btn{
            display:flex;align-items:center;justify-content:space-between;
            width:100%;text-align:left;background:var(--phoenix-body-bg,#fff);
            cursor:pointer;
        }
        #reviewModal .review-role-btn i{position:static;transform:none;font-size:.72rem;color:var(--phoenix-body-tertiary-color,#8a8f98);transition:transform .15s ease;}
        #reviewModal .review-role-select.open .review-role-btn i{transform:rotate(180deg);}
        #reviewModal .review-role-menu{
            position:absolute;top:calc(100% + 6px);left:0;right:0;
            background:var(--phoenix-body-bg,#fff);
            border:1px solid var(--phoenix-border-color,#e9ecef);
            border-radius:.7rem;
            box-shadow:0 12px 28px -10px rgba(0,0,0,.25);
            max-height:180px;overflow-y:auto;
            z-index:20;display:none;
        }
        #reviewModal .review-role-select.open .review-role-menu{display:block;}
        #reviewModal .review-role-option{padding:.6rem .9rem;font-size:.85rem;cursor:pointer;color:var(--phoenix-body-color,#212529);}
        #reviewModal .review-role-option:hover{background:var(--phoenix-tertiary-bg,#f6f7f9);}
        #reviewModal .review-role-option.active{font-weight:700;color:var(--phoenix-primary,#3874ff);}
        #reviewModal .modal-footer{border-top:none;padding:1.25rem 2rem 1.75rem;gap:.6rem;flex:0 0 auto;}
        #reviewModal .modal-footer .btn{border-radius:2rem;font-weight:700;font-size:.85rem;padding:.6rem 1.5rem;}
        #reviewModal #submitReviewBtn{
            background:linear-gradient(135deg,var(--phoenix-primary,#3874ff),#2454d1);
            border:none;box-shadow:0 .5rem 1.2rem rgba(56,116,255,.35);
        }








/* =========================================
   TOUR HERO — dark, layered ambient glow,
   tight vertical rhythm (Upwork/Fiverr/
   Trustpilot-grade marketplace hero).
========================================= */
.tour-hero{
  position:relative;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:10;
  isolation:isolate;

  padding:52px 20px 46px;

  background:#06090a;
}

/* Dedicated background layer — THIS is what clips the glow +
   dotted texture to the hero's box. The hero itself stays
   overflow:visible so the suggestions dropdown (a descendant)
   is free to render past the hero's bottom edge, on top of
   whatever section comes after it. */
.tour-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* Layered glow + faint dotted texture, masked to the glow
   so the rest of the field stays a clean, calm black */
.tour-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(620px 460px at 10% 0%, rgba(31,174,99,.42), transparent 65%),
    radial-gradient(420px 360px at 4% 60%, rgba(13,92,52,.34), transparent 70%);
}
.tour-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(520px 400px at 10% 5%, #000 0%, transparent 75%);
          mask-image:radial-gradient(520px 400px at 10% 5%, #000 0%, transparent 75%);
}

/* =========================================
   INNER
========================================= */
.tour-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:640px;
  margin:0 auto;
}

/* =========================================
   EYEBROW (replaces old hero-badge visual)
========================================= */
.tour-hero .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:6px 14px 6px 10px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);

  color:#9fada7;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2px;

  margin:0 auto 20px;
}
.tour-hero .hero-badge i{
  color:#34d17c;
  font-size:11px;
}

/* =========================================
   TITLE
========================================= */
.tour-hero h3{
  color:#f6f8f7;
  font-size:clamp(28px, 4vw, 42px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:12px;
}

.tour-hero h3 .tour-hero-highlight{
  color:#34d17c;
}

/* =========================================
   TEXT
========================================= */
.tour-hero p{
  max-width:480px;
  margin:0 auto 26px;

  color:#96a29d;

  font-size:15.5px;
  line-height:1.6;
}

/* =========================================
   SEARCH BOX — glass card on the dark field
========================================= */
.tour-search-box{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  text-align:left;
}

/* =========================================
   INPUT
========================================= */
.tour-search-input{
  width:100%;
  height:58px;

  border:1px solid rgba(255,255,255,.12);
  outline:none;

  border-radius:999px;

  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);

  padding-left:50px;
  padding-right:120px !important;

  color:#f6f8f7;
  font-size:14.5px;
  font-weight:500;

  box-shadow:0 12px 30px rgba(0,0,0,.35);

  transition:.2s ease;
}

.tour-search-input::placeholder{
  color:#7c8a85;
  font-weight:400;
}

.tour-search-input:focus{
  border-color:#34d17c;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(52,209,124,.14), 0 12px 30px rgba(0,0,0,.35);
  color:#f6f8f7;
}

/* REMOVE BOOTSTRAP BLUE GLOW */
.tour-search-input.form-control:focus{
  border-color:#34d17c;
  color:#f6f8f7;
}

/* =========================================
   ICON
========================================= */
.tour-search-icon{
  position:absolute;
  top:50%;
  left:18px;

  transform:translateY(-50%);

  color:#34d17c;
  font-size:15px;

  z-index:5;
  pointer-events:none;
}

/* =========================================
   BUTTON
========================================= */
.tour-search-btn{
  position:absolute;
  top:50%;
  right:6px;

  transform:translateY(-50%);

  width:46px;
  height:46px;

  border:none;
  outline:none;

  border-radius:50%;

  background:#f6f8f7;
  color:#0a0f0d;

  font-size:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s ease;
}

.tour-search-btn:hover{
  background:#ffffff;
  /* HOVER FIX: removed "scale(1.04)" — was zooming the button on hover; kept "translateY(-50%)" since that's needed for vertical centering, not a hover effect */
  transform:translateY(-50%);
}

/* =========================================
   SUGGESTIONS
========================================= */
.tour-suggestions{
  position:absolute;
  top:calc(100% + 10px);
  left:0;

  width:100%;

  background:#0e1512;

  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;

  overflow:hidden;

  box-shadow:0 24px 50px rgba(0,0,0,.5);

  display:none;

  z-index:99999;

  max-height:360px;
  overflow-y:auto;

  text-align:left;
  position:absolute;
}

/* =========================================
   SCROLLBAR
========================================= */
.tour-suggestions::-webkit-scrollbar{
  width:4px;
}

.tour-suggestions::-webkit-scrollbar-track{
  background:transparent;
}

.tour-suggestions::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:20px;
}

.tour-suggestions{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

/* =========================================
   ITEM
========================================= */
.tour-suggestion-item{
  display:flex;
  align-items:center;
  gap:12px;

  padding:13px 16px;

  cursor:pointer;

  transition:.15s ease;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tour-suggestion-item:last-child{
  border-bottom:none;
}

.tour-suggestion-item:hover{
  background:rgba(255,255,255,.04);
}

/* =========================================
   IMAGE
========================================= */
.tour-suggestion-img{
  width:44px;
  height:44px;

  border-radius:10px;

  object-fit:cover;

  flex-shrink:0;
}

/* =========================================
   ICON BOX
========================================= */
.tour-suggestion-icon{
  width:44px;
  height:44px;

  border-radius:10px;

  background:rgba(52,209,124,.12);
  color:#34d17c;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:17px;

  flex-shrink:0;
}

/* =========================================
   CONTENT
========================================= */
.tour-suggestion-content{
  flex:1;
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* =========================================
   TITLE
========================================= */
.tour-suggestion-text{
  width:100%;

  font-size:14px;
  font-weight:600;

  color:#f6f8f7;

  margin-bottom:4px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================
   SUB
========================================= */
.tour-suggestion-sub{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;

  font-size:12px;
  color:#8a978f;

  line-height:1.6;
}

/* =========================================
   TAG
========================================= */
.tour-suggestion-tag{
  display:flex;
  align-items:center;
  gap:5px;
}

/* =========================================
   TRUST STRIP — quiet credibility line under
   the search box, real count where possible
========================================= */
.tour-hero-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;

  margin-top:26px;
  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.09);
}

.tour-hero-stats .tour-stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:#34d17c;
  font-size:13px;
  vertical-align:middle;
}

.tour-stat-card{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  padding:0 14px 0 0;
  border-right:1px solid rgba(255,255,255,.09);
}
.tour-stat-card:last-child{
  border-right:none;
  padding-right:0;
}

.tour-stat-number{
  color:#f6f8f7;
  font-size:18px;
  font-weight:800;
  display:inline;
}

.tour-stat-label{
  margin-left:0;
  font-size:12.5px;
  font-weight:500;
  color:#8a978f;
}

/* =========================================
   MOBILE
========================================= */
@media(max-width:768px){

  .tour-hero{
    min-height:auto;
    padding:44px 16px 38px;
    text-align:center;
  }

  .tour-hero p{
    font-size:14.5px;
    margin-bottom:22px;
  }

  .tour-search-input{
    height:54px;
    font-size:14px;
    padding-left:46px;
    padding-right:104px !important;
  }

  .tour-search-btn{
    width:40px;
    height:40px;
  }

  .tour-suggestion-img,
  .tour-suggestion-icon{
    width:40px;
    height:40px;
  }

  .tour-hero-stats{
    gap:10px;
  }
}

@media(max-width:480px){

  .tour-hero{
    padding:38px 14px 34px;
  }

  .tour-hero .hero-badge{
    font-size:12px;
    padding:5px 12px 5px 8px;
  }

  .tour-suggestion-item{
    padding:11px 14px;
  }
}

/* =========================================
   CLEAR BUTTON
========================================= */
.tour-clear-btn{
  position:absolute;
  top:50%;
  right:60px;

  transform:translateY(-50%);

  width:32px;
  height:32px;

  border:none;
  outline:none;

  border-radius:50%;

  background:rgba(255,255,255,.08);
  color:#9fada7;

  display:none;

  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:.2s ease;

  z-index:6;
}

.tour-clear-btn:hover{
  background:rgba(255,255,255,.16);
  /* HOVER FIX: removed "color:#f6f8f7" — was changing icon color on hover; original color must stay unchanged */
}

.tour-clear-btn:focus{
  outline:none;
  box-shadow:none;
}

.tour-clear-btn i{
  font-size:13px;
  pointer-events:none;
}

@media(max-width:768px){
  .tour-clear-btn{
    width:30px;
    height:30px;
    right:52px;
  }
  .tour-clear-btn i{ font-size:12px; }
}

@media(max-width:480px){
  .tour-clear-btn{
    width:28px;
    height:28px;
    right:48px;
  }
}

/* =========================================
   SUGGESTION TAGS — MOBILE FIX
========================================= */
@media(max-width:768px){
  .tour-suggestion-sub{
    flex-wrap:nowrap;
    gap:6px;
    width:100%;
    overflow:hidden;
  }
  .tour-suggestion-tag{
    gap:3px;
    font-size:10px;
    white-space:nowrap;
    flex-shrink:1;
  }
  .tour-suggestion-tag i{ font-size:9px; }
}


/* =========================================
   LOCATION
========================================= */
.tour-suggestion-location{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:12.5px;
  color:#8a978f;
}

.tour-suggestion-location i{
  color:#34d17c;
  font-size:11px;
}
 

.building-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(20,30,60,.04);
  transition:all .35s ease;
}

.building-card:hover{
  /* HOVER FIX: removed "transform:translateY(-6px)" — was lifting the card on hover; position must stay unchanged */
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.02);
}

.building-image{
  height:260px;
  object-fit:cover;
  transition:all .5s ease;
}

/* HOVER FIX: removed ".building-card:hover .building-image{transform:scale(1.06)}" — was zooming the image on hover; shape/size must stay unchanged */

.building-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.1),
    transparent
  );
}

.building-location{
  position:absolute;
  left:18px;
  bottom:18px;
  color:#fff;
  font-size:14px;
  font-weight:500;
  z-index:2;
}

.building-badge{
  position:absolute;
  top:16px;
  right:16px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  color:#fff;
  padding:8px 14px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  z-index:2;
  border:1px solid rgba(255,255,255,.2);
}

.broker-avatar,
.broker-avatar-more{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid #fff;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.broker-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.broker-avatar-more{
  background:#16a34a;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.requirement-pill{
  background:rgba(22,163,74,.1);
  color:#16a34a;
  padding:10px 14px;
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  transition:.3s;
  white-space:nowrap;
}

/* removed rule: .requirement-pill:hover { background:#16a34a; color:#fff; } — hover background+color invert. Removing only the color earlier left green text on a green background (invisible). Button now stays in its normal state on hover, as requested. */

/* =========================================
   EXPLORE BUILDINGS — heading CTA
   (Upwork/Fiverr style solid pill button)
========================================= */
.explore-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;

  padding:12px 22px;
  border-radius:999px;

  background:#0a0f0d;
  color:#fff;

  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none !important;

  box-shadow:0 10px 22px rgba(10,15,13,.18);
  transition:.25s ease;
}
.explore-cta-btn i{
  color:#34d17c;
  font-size:13px;
}
.explore-cta-btn:hover{
  background:#161f1b;
  color:#fff;
  /* HOVER FIX: removed "transform:translateY(-2px)" — was lifting the button on hover; position must stay unchanged */
  box-shadow:0 14px 28px rgba(10,15,13,.24);
}

@media(max-width:576px){
  .explore-cta-btn{
    padding:10px 16px;
    font-size:12.5px;
  }
}

/* =========================================
   LOAD MORE — centered pill button under the
   buildings grid (Upwork/Fiverr "show more"
   style: quiet outline, fills dark on hover)
========================================= */
.load-more-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:13px 30px;
  border-radius:999px;

  background:#fff;
  border:1.5px solid rgba(10,15,13,.14);
  color:#0a0f0d;

  font-size:14px;
  font-weight:700;

  box-shadow:0 2px 8px rgba(20,30,60,.05);
  transition:all .22s ease;
}
.load-more-btn i{
  font-size:12px;
  color:#16a34a;
  transition:transform .22s ease;
}
.load-more-btn:hover{
  /* removed: background:#0a0f0d hover background-change — paired with the original text color
     (#0a0f0d) this would invert to near-black-on-near-black (invisible), so the fill is left off;
     border-color + box-shadow below still give a visible hover cue without breaking readability */
  border-color:#0a0f0d;
  /* HOVER FIX: removed "color:#fff" — was changing text color on hover; original color (#0a0f0d) kept */
  /* HOVER FIX: removed "transform:translateY(-2px)" — was lifting the button on hover; position must stay unchanged */
  box-shadow:0 14px 26px rgba(10,15,13,.18);
}
.load-more-btn:hover i{
  /* HOVER FIX: removed "color:#34d17c" — was changing icon color on hover; original color kept */
  /* HOVER FIX: removed "transform:translateY(2px)" — was moving the icon on hover; position must stay unchanged */
}
.load-more-btn:active{
  transform:translateY(0);
}
.load-more-btn:disabled{
  opacity:.6;
  cursor:default;
  transform:none;
  box-shadow:0 2px 8px rgba(20,30,60,.05);
}

@media(max-width:576px){
  .load-more-btn{
    width:100%;
    justify-content:center;
    padding:12px 22px;
    font-size:13.5px;
  }
}

/* On mobile: heading + paragraph on top, CTA button breaks onto its
   own line below and goes full width. */
@media(max-width:768px){
  .explore-heading-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .explore-heading-row .explore-cta-btn{
    width: 100%;
    justify-content: center;
  }
}

@media(max-width:768px){

  .building-image{
    height:220px;
  }

}


/* FORCE REMOVE ALL UNDERLINES */
.building-card,
.building-card * {
    text-decoration: none !important;
}

a.building-card,
a.building-card:link,
a.building-card:visited,
a.building-card:hover,
a.building-card:active {
    text-decoration: none !important;
}

.community-card-meta,
.community-card-stats,
.community-stat-pill {
    text-decoration: none !important;
}

/* remove focus outline underline */
.building-card:focus {
    outline: none;
    text-decoration: none !important;
}


/* =========================================
   BOTTOM CTA — dark ambient-glow closing
   banner, same design language as tour-hero
   (Upwork/Fiverr/Trustpilot-grade close).
========================================= */

/* SECTION WRAPPER */
.cta-section {
  padding: 60px 20px 70px;
}

/* CTA BOX */
.cta-box {
  max-width: 900px;
  margin: auto;
  padding: 64px 40px;

  border-radius: 28px;
  background: #06090a;
  color: #fff;

  text-align: center;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* SOFT DUAL GLOW EFFECT — mirrors .tour-hero-bg */
.cta-box::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: rgba(31,174,99,.4);
  border-radius: 50%;
  top: -160px;
  right: -110px;
  filter: blur(110px);
  z-index: -1;
}
.cta-box::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background: rgba(13,92,52,.32);
  border-radius: 50%;
  bottom: -150px;
  left: -90px;
  filter: blur(110px);
  z-index: -1;
}

/* EYEBROW BADGE */
.cta-badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:6px 14px 6px 10px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);

  color:#9fada7;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2px;

  margin-bottom:22px;
}
.cta-badge-pill i{
  color:#34d17c;
  font-size:10px;
}

/* HEADING */
.cta-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
  color: #f6f8f7;
  margin-bottom: 14px;
}

/* SUBTITLE */
.cta-subtitle{
  max-width: 560px;
  margin: 0 auto 34px;

  color: #96a29d;
  font-size: 15.5px;
  line-height: 1.6;
}

/* BUTTON GROUP */
.cta-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;

  margin-bottom: 32px;
}

/* BUTTON — shared shape */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 14px 26px;
  border-radius: 999px;

  text-decoration: none !important;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;

  transition: all 0.25s ease;
}

/* PRIMARY BUTTON — solid brand green */
.cta-btn-primary{
  background: #34d17c;
  color: #06090a;
  box-shadow: 0 12px 26px rgba(52,209,124,.28);
}
.cta-btn-primary:hover{
  background: #3fe089;
  /* HOVER FIX: removed "transform: translateY(-2px)" — was lifting the button on hover; position must stay unchanged */
  box-shadow: 0 16px 32px rgba(52,209,124,.38);
}

/* OUTLINE BUTTON — glass, on dark bg */
.cta-btn-outline{
  background: rgba(255,255,255,.05);
  color: #f6f8f7;
  border: 1px solid rgba(255,255,255,.14);
}
.cta-btn-outline i{ color:#34d17c; }
.cta-btn-outline:hover{
  background: rgba(255,255,255,.1);
  /* HOVER FIX: removed "transform: translateY(-2px)" — was lifting the button on hover; position must stay unchanged */
}

/* TRUST ROW */
.cta-trust-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;

  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cta-trust-row span{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #8a978f;
  font-size: 13px;
  font-weight: 500;
}
.cta-trust-row i{
  color: #34d17c;
  font-size: 12px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .cta-box {
    padding: 44px 22px;
    border-radius: 22px;
  }

  .cta-title {
    font-size: 22px;
    line-height: 1.35;
  }

  .cta-subtitle{
    font-size: 14px;
    margin-bottom: 26px;
  }

  .cta-actions{
    flex-direction: column;
    width: 100%;
  }
  .cta-btn{
    width: 100%;
    justify-content: center;
  }

  .cta-trust-row{
    gap: 14px;
    row-gap: 10px;
  }
  .cta-trust-row span{
    font-size: 12px;
  }
}
 
  .swiper {
    overflow: visible !important;
}

.swiper-wrapper {
    overflow: visible;
}
html, body {
    overflow-x: clip;
}



/* =========================
   MOBILE HORIZONTAL TABS
========================= */

/* Parent Scroll Wrapper */
.scrollbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* Hide scrollbar */
.scrollbar::-webkit-scrollbar {
    display: none;
}

/* Tabs Row */
.scrollbar .nav {
    flex-wrap: nowrap !important;
    width: max-content;
    gap: 10px;
    padding-bottom: 2px;
    color: #000;
}

/* Each Tab */
.scrollbar .nav-item {
    flex: 0 0 auto;
}

/* Tab Button */
.scrollbar .nav-link {
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    transition: 0.2s ease;
}

/* Active tab */
.scrollbar .nav-link.active {
    font-weight: 600;
    color: #108a00;
}

/* =========================
   SALE / RENT TOP TABS
========================= */

#buyAndSellTab {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#buyAndSellTab::-webkit-scrollbar {
    display: none;
}

#buyAndSellTab .nav-item {
    flex: 0 0 auto;
    min-width: 140px;
}

#buyAndSellTab .nav-link {
    white-space: nowrap;
}

/* =========================
   BETTER MOBILE SPACING
========================= */

@media (max-width: 768px) {

    .scrollbar {
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .scrollbar .nav-link {
        font-size: 13px;
        padding: 7px 14px;
    }

    h2 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
    }
}

 
/* =========================
   SIDEBAR
========================= */

.custom-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* CARD */
.sidebar-card{
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:22px;
  padding:18px;
  box-shadow:0 8px 30px rgba(0,0,0,.04);
  transition:.25s ease;
}

.sidebar-card:hover{
  /* HOVER FIX: removed "transform:translateY(-2px)" — was lifting the card on hover; position must stay unchanged */
  box-shadow:0 12px 35px rgba(0,0,0,.06);
}

/* HEAD */
.sidebar-head h6,
.sidebar-card h6{
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
  color:#111;
}

.sidebar-head p,
.sidebar-card p{
  font-size:12px;
  color:#7d7d7d;
  margin:0;
  line-height:1.5;
}

/* =========================
   ACTION BUTTONS
========================= */

.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.action-btn{
  border:none;
  border-radius:16px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;

  font-size:12px;
  font-weight:600;

  cursor:pointer;
  transition:.2s ease;
}

.action-btn i{
  font-size:14px;
}

/* HOVER FIX: removed ".action-btn:hover{transform:translateY(-2px)}" — was lifting the button on hover; position must stay unchanged */

.action-primary{
  background:#f3f7ff;
  color:#0d6efd;
}

.action-success{
  background:#effaf4;
  color:#198754;
}

/* =========================
   POST CARD
========================= */

.post-card{
  padding-top:24px;
  padding-bottom:24px;
}

.post-icon{
  width:56px;
  height:56px;
  margin:auto;
  margin-bottom:14px;

  border-radius:18px;

  background:#f4f7ff;

  display:flex;
  align-items:center;
  justify-content:center;
}

.post-icon i{
  color:#0d6efd;
  font-size:20px;
}

.main-post-btn{
  width:100%;
  margin-top:18px;

  border:none;
  border-radius:14px;

  background:#111;
  color:#fff;

  height:48px;

  font-size:14px;
  font-weight:600;

  transition:.2s ease;
}

.main-post-btn:hover{
  /* HOVER FIX: removed "transform:translateY(-1px)" — was lifting the button on hover; position must stay unchanged */
  opacity:.95;
}

/* =========================
   TOP SEARCHES
========================= */
 

/* =========================
   MINI LINK
========================= */

.mini-link{
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  color:#0d6efd;
}

/* =========================
   BROKERS
========================= */

.broker-item{
  display:flex;
  align-items:center;
  gap:12px;

  padding-bottom:14px;
  margin-bottom:14px;

  border-bottom:1px solid #f2f2f2;
}

.broker-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.broker-content{
  flex:1;
  min-width:0;
}

.broker-name{
  font-size:13px;
  font-weight:700;
  color:#111;
}

.broker-meta{
  font-size:12px;
  color:#7c7c7c;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.broker-btn{
  border:none;

  background:#f4f4f4;
  color:#111;

  padding:8px 12px;

  border-radius:10px;

  font-size:11px;
  font-weight:600;

  transition:.2s ease;
}

/* removed rule: .broker-btn:hover { background:#111; color:#fff; } — hover background+color invert. Removing only the color earlier left dark text on a dark background (invisible). Button now stays in its normal state on hover. */

/* =========================
   RENT CARD
========================= */

.rent-card{
  text-align:center;
}

.rent-icon{
  width:58px;
  height:58px;

  border-radius:18px;

  background:#f5f5f5;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:auto;
  margin-bottom:14px;
}

.rent-icon i{
  font-size:20px;
  color:#111;
}

/* BUTTONS */
.bottom-btn{
  height:44px;

  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  font-size:13px;
  font-weight:600;

  transition:.2s ease;
}

/* HOVER FIX: removed ".bottom-btn:hover{transform:translateY(-1px)}" — was lifting the button on hover; position must stay unchanged */

.rental-btn{
  background:#f3f7ff;
  color:#0d6efd;
}

.sale-btn{
  background:#effaf4;
  color:#198754;
}
/* =========================
   PROPERTY LINKS
   SIMPLE CLEAN STYLE
========================= */

.property-links{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* SIMPLE TEXT LINKS */
.property-link{
    text-decoration:none !important;

    font-size:14px;
    font-weight:500;

    color:#5f6773;

    transition:.2s ease;

    display:flex;
    align-items:center;
    gap:10px;
}

/* SMALL DOT */
.property-link::before{
    content:"";
    width:6px;
    height:6px;

    border-radius:50%;

    background:#d3d7de;

    flex-shrink:0;

    transition:.2s ease;
}

/* HOVER */
.property-link:hover{
    /* HOVER FIX: removed "color:#000" — was changing text color on hover; original color kept */
    /* HOVER FIX: removed "transform:translateX(3px)" — was sliding the link on hover; position must stay unchanged */
    text-decoration:none !important;
}

/* DOT HOVER */
.property-link:hover::before{
    background:#111;
}

/* REMOVE TAG STYLE */
.property-link.extra{
    display:none;
}

/* MOBILE */
@media(max-width:768px){

    .property-link{
        font-size:13px;
    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:576px){

  .sidebar-card{
    padding:16px;
    border-radius:18px;
  }

 

  .broker-btn{
    padding:7px 10px;
  }

}