/* =========================================================
   LISTING DETAIL – FULL PAGE REDESIGN (DESKTOP + MOBILE)
   Scope: body.site.listing-detail.template27
   ========================================================= */

/* ---------- Theme tokens ---------- */

body.site.listing-detail.template27 {
  --ld-bg: #f5f6f8;
  --ld-surface: #ffffff;
  --ld-surface-soft: #fbfbfd;
  --ld-border-soft: #e5e7eb;
  --ld-border-strong: #d1d5db;
  --ld-text-main: #111827;
  --ld-text-muted: #6b7280;
  --ld-accent: #dbae77;
  --ld-accent-soft: #fce0ae;
  --ld-shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.15);
  --ld-radius-lg: 24px;
  --ld-radius-md: 18px;
}

body.site.listing-detail.template27 {
  background: var(--ld-bg);
  color: var(--ld-text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body.site.listing-detail.template27 .page-content {
  background: transparent;
}

/* ---------- Header & breadcrumb ---------- */

body.site.listing-detail.template27 .md-header.layout6 .header-container {
  background: #ffffff;
  color: var(--ld-text-main) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

body.site.listing-detail.template27 .md-header.layout6 .head-menu a.uppercase {
  color: var(--ld-text-main) !important;
}

body.site.listing-detail.template27 .md-header.layout6 .head-account .menu-item {
  color: var(--ld-text-main) !important;
}

body.site.listing-detail.template27 .breadcrumb-container.classic {
  max-width: 1200px;
  margin: 12px auto 0;
  padding: 0 24px;
}

body.site.listing-detail.template27 .breadcrumb-container .fack-link,
body.site.listing-detail.template27 .breadcrumb-container .link,
body.site.listing-detail.template27 .breadcrumb-container .arrow {
  font-size: 13px;
  color: var(--ld-text-muted);
}

/* =========================================================
   HERO AREA – ADDRESS, PREV/NEXT + IMAGE CAROUSEL
   ========================================================= */

body.site.listing-detail.template27 .listing-detail-banner.classic {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(245, 246, 248, 1) 60%,
      rgba(245, 246, 248, 0.6) 100%
    );
  padding: 18px 0 32px;
  border-bottom: 1px solid rgba(209, 213, 219, 0.6);
}

/* Top address + prev/next layout */

body.site.listing-detail.template27 .listing-detail-banner .banner-top.mg-container {
  max-width: 1200px;
  margin: 0 auto 12px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body.site.listing-detail.template27 .listing-detail-banner .house-info {
  flex: 1 1 auto;
}

body.site.listing-detail.template27
  .listing-detail-banner
  .address
  .address-container.big-font {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ld-text-main);
}

body.site.listing-detail.template27
  .listing-detail-banner
  .address
  .address-container
  .city {
  margin-left: 8px;
  font-weight: 400;
  color: var(--ld-text-muted);
}

body.site.listing-detail.template27 .listing-detail-banner .time-info {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ld-text-muted);
}

/* Prev / Next listing buttons on sides */

body.site.listing-detail.template27 .listing-detail-banner .banner-left,
body.site.listing-detail.template27 .listing-detail-banner .banner-right {
  position: relative;
  flex: 0 0 auto;
}

body.site.listing-detail.template27 .listing-detail-banner .banner-left .bg-img-box,
body.site.listing-detail.template27 .listing-detail-banner .banner-right .bg-img-box {
  display: none;
}

body.site.listing-detail.template27 .listing-detail-banner .banner-left .btn,
body.site.listing-detail.template27 .listing-detail-banner .banner-right .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ld-border-soft);
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.site.listing-detail.template27 .listing-detail-banner .banner-left .text,
body.site.listing-detail.template27 .listing-detail-banner .banner-right .text {
  color: var(--ld-text-main);
}

/* ---------- Hero image carousel ---------- */

body.site.listing-detail.template27
  .listing-detail-banner
  .detail-info-imgs.swiper {
  max-width: 1200px;
  margin: 12px auto 8px;
  border-radius: var(--ld-radius-lg);
  overflow: hidden;
  box-shadow: var(--ld-shadow-soft);
  background: #000;
}

/* Show 1 large slide, full cover */

body.site.listing-detail.template27 .detail-info-imgs .swiper-img {
  height: 420px;
}

body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-img
  .img-content,
body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-img
  img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Swiper arrows as main Next/Prev */

body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-button-prev,
body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 14px;
}

body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-button-prev::after,
body.site.listing-detail.template27
  .detail-info-imgs
  .swiper-button-next::after {
  font-size: 18px;
}

body.site.listing-detail.template27
  .listing-detail-banner
  .pagination.pc {
  text-align: center;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ld-text-muted);
  cursor: pointer;
}

/* =========================================================
   MAIN CONTENT – TWO COLUMN LAYOUT
   Left: Details, Right: Request Tour (sticky)
   ========================================================= */

body.site.listing-detail.template27 .md-detail-info.classic {
  margin-bottom: 72px;
}

body.site.listing-detail.template27 .md-detail-info.classic > .mg-container {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px 0;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Left column */

body.site.listing-detail.template27 .detail-info-container.detail-info-left {
  flex: 1 1 0;
}

body.site.listing-detail.template27 .detail-info {
  background: var(--ld-surface);
  border-radius: var(--ld-radius-lg);
  box-shadow: var(--ld-shadow-soft);
  padding: 24px 24px 28px;
  border: 1px solid rgba(229, 231, 235, 0.8);
}

/* Price, stats & buttons card */

body.site.listing-detail.template27 .detail-info-header.pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ld-border-soft);
  margin-bottom: 20px;
}

body.site.listing-detail.template27 .detail-info-header .price-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--ld-text-main);
}

body.site.listing-detail.template27
  .detail-info-header
  .caculator-container.classic.caculator {
  margin-left: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f4ff;
  font-size: 12px;
  color: #4b5563;
}

body.site.listing-detail.template27 .detail-info-header .count-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

body.site.listing-detail.template27 .detail-info-header .count-container .item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
}

/* Save button */

body.site.listing-detail.template27
  .detail-info-header
  .tour-btn-container.classic
  .btn-item.save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ld-border-soft);
  background: #f9fafb;
  font-size: 13px;
  color: #374151;
}

/* Key details grid */

body.site.listing-detail.template27 .detail-info-group-container {
  margin-top: 10px;
}

body.site.listing-detail.template27 .detail-info-group .detail-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ld-text-muted);
  margin-bottom: 6px;
}

body.site.listing-detail.template27
  .detail-info-group
  .key-info
  .two-columns.content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
}

body.site.listing-detail.template27
  .detail-info-group
  .key-info
  .info-content {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(209, 213, 219, 0.7);
}

body.site.listing-detail.template27
  .detail-info-group
  .key-info
  .info-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ld-text-muted);
  margin-bottom: 2px;
}

body.site.listing-detail.template27
  .detail-info-group
  .key-info
  .info-data {
  color: var(--ld-text-main);
}

/* Description */

body.site.listing-detail.template27
  .detail-info-group
  .last.key-info
  .detail-title {
  margin-top: 18px;
  margin-bottom: 6px;
}

body.site.listing-detail.template27
  .detail-info-group
  .last.key-info
  .info-des {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ld-text-muted);
}

/* Read more bar */

body.site.listing-detail.template27 .md-mls.classic {
  margin-top: 18px;
}

body.site.listing-detail.template27 .md-mls.classic .line {
  border-color: rgba(229, 231, 235, 0.9);
}

body.site.listing-detail.template27 .md-mls.classic .readmore {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ld-text-muted);
}

/* ---------- Right column – sticky tour card ---------- */

body.site.listing-detail.template27 .detail-info-right {
  flex: 0 0 320px;
  align-self: flex-start;
  position: sticky !important;
  top: 132px;
}

body.site.listing-detail.template27 .detail-schedule-container.classic {
  background: var(--ld-surface);
  border-radius: var(--ld-radius-lg);
  box-shadow: var(--ld-shadow-soft);
  border: 1px solid rgba(229, 231, 235, 0.9);
  padding: 18px 18px 20px;
}

/* Tour header */

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .schedule-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-tab {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px;
  background: #f3f4f6;
  margin-bottom: 10px;
}

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-tab
  .tab-item {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ld-text-muted);
}

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-tab
  .tab-item.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* Date slider */

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-date-wrap {
  margin: 6px 0 12px;
}

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-date-wrap
  .date {
  border-radius: 16px;
  background: #f9fafb;
  border: 1px solid rgba(229, 231, 235, 0.9);
}

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .booking-date-wrap
  .date.selected {
  background: #111827;
  color: #f9fafb;
}

/* Tour button */

body.site.listing-detail.template27
  .detail-schedule-container.classic
  .btn-wrap
  .schedule-button {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #111827, #374151);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* Agent info under card */

body.site.listing-detail.template27 .schedule-agent-info {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(209, 213, 219, 0.9);
  display: flex;
  align-items: center;
  gap: 10px;
}

body.site.listing-detail.template27 .schedule-agent-info .agent-headshot {
  flex: 0 0 48px;
}

body.site.listing-detail.template27 .schedule-agent-info .agent-headshot .img-box {
  border-radius: 999px;
  overflow: hidden;
}

body.site.listing-detail.template27 .schedule-agent-info .info h3.agent-name {
  font-size: 14px;
  margin-bottom: 2px;
}

body.site.listing-detail.template27 .schedule-agent-info .info .company {
  font-size: 12px;
  color: var(--ld-text-muted);
}

/* =========================================================
   STICKY PRICE BAR ON SCROLL (existing .fixed-banner)
   ========================================================= */

body.site.listing-detail.template27 .fixed-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 10px 16px 12px;
  pointer-events: none;
}

body.site.listing-detail.template27 .fixed-banner .banner-box.mg-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(229, 231, 235, 0.95);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
}

/* Hide sticky bar at very top (Lofty usually toggles via JS; this is safeguard) */
body.site.listing-detail.template27 .fixed-banner[style*="opacity: 0"],
body.site.listing-detail.template27 .fixed-banner[style*="display: none"] {
  pointer-events: none;
}

/* Center content (price + save + tour) */

body.site.listing-detail.template27 .fixed-banner .center .price-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.site.listing-detail.template27 .fixed-banner .price-value {
  font-size: 18px;
  font-weight: 700;
}

body.site.listing-detail.template27 .fixed-banner .address-container {
  font-size: 12px;
  color: var(--ld-text-muted);
}

/* Sticky save & tour buttons */

body.site.listing-detail.template27 .fixed-banner .save-share-tour {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

body.site.listing-detail.template27 .fixed-banner .save-share-tour .item.save,
body.site.listing-detail.template27 .fixed-banner .save-share-tour .item.tour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

body.site.listing-detail.template27 .fixed-banner .save-share-tour .item.save {
  border: 1px solid var(--ld-border-soft);
  background: #f9fafb;
}

body.site.listing-detail.template27 .fixed-banner .save-share-tour .item.tour {
  background: #111827;
  color: #ffffff;
}

/* Prev / next inside sticky bar */

body.site.listing-detail.template27 .fixed-banner .banner-left .btn,
body.site.listing-detail.template27 .fixed-banner .banner-right .btn {
  padding: 6px 10px;
  font-size: 11px;
}

/* =========================================================
   MAP, MARKET TRENDS, CONTACT FORM – CARD STYLE
   ========================================================= */

body.site.listing-detail.template27 .md-map.broker,
body.site.listing-detail.template27 .md-market-trends.broker,
body.site.listing-detail.template27 .md-form.layout2 {
  margin-bottom: 72px;
}

body.site.listing-detail.template27 .md-map.broker .mg-container.mobile-no-margin,
body.site.listing-detail.template27 .md-market-trends.broker .mg-container,
body.site.listing-detail.template27 .md-form.layout2 .md-form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 28px;
  background: var(--ld-surface);
  border-radius: var(--ld-radius-lg);
  box-shadow: var(--ld-shadow-soft);
  border: 1px solid rgba(229, 231, 235, 0.9);
}

/* Map title */

body.site.listing-detail.template27 .md-map .mg-title h2,
body.site.listing-detail.template27 .md-market-trends .mg-title h2,
body.site.listing-detail.template27 .md-form.layout2 .site-title h2 {
  font-size: 18px;
  font-weight: 600;
}

/* Market chart container */

body.site.listing-detail.template27
  .md-market-trends.broker
  .filter-chart-container.module_box {
  border-radius: 18px;
  overflow: hidden;
}

/* Contact form */

body.site.listing-detail.template27 .md-form.layout2 .info-agent {
  border-right: 1px solid var(--ld-border-soft);
  padding-right: 20px;
}

body.site.listing-detail.template27 .md-form.layout2 .info-right {
  padding-left: 24px;
}

body.site.listing-detail.template27 .md-form.layout2 .info-form2 .input-box {
  margin-bottom: 12px;
}

body.site.listing-detail.template27
  .md-form.layout2
  .info-form2
  .input-container
  .label-top {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ld-text-muted);
}

/* =========================================================
   RESPONSIVE (Tablet & Mobile)
   ========================================================= */

@media (max-width: 1024px) {
  body.site.listing-detail.template27 .listing-detail-banner .banner-top.mg-container {
    flex-direction: column;
    align-items: flex-start;
  }

  body.site.listing-detail.template27
    .listing-detail-banner
    .banner-left,
  body.site.listing-detail.template27
    .listing-detail-banner
    .banner-right {
    display: none;
  }

  body.site.listing-detail.template27 .detail-info-imgs .swiper-img {
    height: 320px;
  }

  body.site.listing-detail.template27 .md-detail-info.classic > .mg-container {
    flex-direction: column;
  }

  body.site.listing-detail.template27 .detail-info-right {
    position: static !important;
    width: 100%;
  }
}

@media (max-width: 640px) {
  body.site.listing-detail.template27 .listing-detail-banner .banner-top.mg-container,
  body.site.listing-detail.template27 .breadcrumb-container.classic,
  body.site.listing-detail.template27 .md-detail-info.classic > .mg-container,
  body.site.listing-detail.template27 .md-map.broker .mg-container.mobile-no-margin,
  body.site.listing-detail.template27 .md-market-trends.broker .mg-container,
  body.site.listing-detail.template27 .md-form.layout2 .md-form-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.site.listing-detail.template27 .detail-info-imgs .swiper-img {
    height: 240px;
  }

  body.site.listing-detail.template27 .detail-info-header.pc {
    flex-direction: column;
    align-items: flex-start;
  }

  body.site.listing-detail.template27 .fixed-banner .banner-box.mg-container {
    border-radius: 18px;
  }
}
/* ===========================================
   LISTING DETAIL – STICKY "REQUEST A TOUR"
   Scope: .site.listing-detail.template27
   =========================================== */

@media (min-width: 1024px) {

  /* JS যেসব inline position বসাচ্ছে – সব reset */
  body.site.listing-detail.template27
  .md-detail-info.classic
  .detail-info-right {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    transform: none !important;
  }

  /* আসল card (REQUEST A TOUR) – এটাকেই sticky করি */
  body.site.listing-detail.template27
  .md-detail-info.classic
  .detail-info-right > .detail-schedule-container.classic {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 140px !important;   /* price bar-এর নিচে কত gap থাকবে */
    z-index: 60 !important;
  }
}