/*
 * Easy Realty Design System — Search page styles
 * Applies design26 token styles to the 3-column search layout.
 * Loaded only when VIEWS_FOLDER=demo or easyrealty.
 */

/* ─────────────────────────────────────────────────────────────────
   0.  Hide footer — search page uses full-viewport 3-column layout
   ───────────────────────────────────────────────────────────────── */
main ~ section,
main ~ footer,
.footer-section {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   1.  Listings column — sand background + fix height overflow
   ───────────────────────────────────────────────────────────────── */

/* map-search.css คำนวณสำหรับ navbar 80px แต่ demo navbar จริงสูง ~88px
   ปรับ calc ทุกส่วนให้ตรงกัน: 88px navbar + 25px margin-top = 113px */
.search-results-container {
  height: calc(100vh - 113px) !important;
}

.search-results-container > .container-fluid > .row,
.listings-container,
.map-container {
  height: calc(100vh - 113px) !important;
}

.listings-container {
  background: var(--color-bg-main, #F4F1E7) !important;
  border-right: 1px solid var(--color-border-soft, #EDE7D8) !important;
}

/* ─────────────────────────────────────────────────────────────────
   5.  Listings header → results-toolbar style
   ───────────────────────────────────────────────────────────────── */
.listings-header {
  background: var(--color-bg-main, #F4F1E7) !important;
  border-bottom: 1px solid var(--color-border-soft, #EDE7D8) !important;
  padding: 14px 16px !important;
  align-items: center !important;
}

.listings-title {
  display: none;
}

.listings-count {
  font-family: var(--font-family-title, 'Gentium Book Plus', serif);
  font-size: 1.35rem;
  color: var(--color-text-dark, #3B3934);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────
   6.  Sort selector
   ───────────────────────────────────────────────────────────────── */
.sort-selector-btn {
  background: #fff;
  border: 1px solid var(--color-border-soft, #EDE7D8);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.825rem;
  color: var(--color-text-dark, #3B3934);
  font-family: var(--font-family-body, 'Jost', sans-serif);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 180ms ease;
}

.sort-selector-btn:hover {
  border-color: var(--color-primary, #998873);
}

.sort-selector-dropdown {
  border: 1px solid var(--color-border-soft, #EDE7D8);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

.sort-option {
  font-size: 0.875rem;
  color: var(--color-text-dark, #3B3934);
  font-family: var(--font-family-body, 'Jost', sans-serif);
}

.sort-option.active,
.sort-option:hover {
  background: rgba(153, 136, 115, 0.08);
  color: var(--color-primary, #998873);
}

/* ─────────────────────────────────────────────────────────────────
   7.  View toggle buttons
   ───────────────────────────────────────────────────────────────── */
.view-btn {
  background: transparent;
  border: 1px solid var(--color-border-soft, #EDE7D8);
  color: var(--color-text-dark, #3B3934);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms ease;
}

.view-btn:hover,
.view-btn.active {
  background: var(--color-primary, #998873);
  color: #fff;
  border-color: var(--color-primary, #998873);
}

/* ─────────────────────────────────────────────────────────────────
   8.  Favourites / enquiry buttons
   ───────────────────────────────────────────────────────────────── */
.favorites-btn,
.enquiry-btn {
  background: #fff;
  border: 1px solid var(--color-border-soft, #EDE7D8) !important;
  border-radius: 8px;
  color: var(--color-text-muted, #8A7A66);
  transition: all 180ms ease;
}

.favorites-btn:hover,
.enquiry-btn:hover {
  border-color: var(--color-primary, #998873) !important;
  color: var(--color-primary, #998873);
}

.favorites-btn.active {
  background: var(--color-primary, #998873) !important;
  border-color: var(--color-primary, #998873) !important;
  color: #fff;
}

.favorites-count {
  background: var(--color-primary, #998873);
  color: #fff;
  border-radius: 500px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   9.  Filter sidebar (chat column)
   ───────────────────────────────────────────────────────────────── */
.search-interface {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--color-border-soft, #EDE7D8);
}

/* ─────────────────────────────────────────────────────────────────
   10. Search tabs — pill-style
   ───────────────────────────────────────────────────────────────── */
.search-tabs {
  background: var(--color-bg-light2, #E2DCCA);
  padding: 5px;
  border-radius: 10px !important;
  border: none !important;
  margin: 12px 12px 0;
  display: flex;
}

.search-tabs .nav-item {
  flex: 1;
}

.search-tabs .nav-link {
  border: none !important;
  border-radius: 8px !important;
  text-align: center;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--color-text-muted, #8A7A66) !important;
  transition: all 180ms ease !important;
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
}

.search-tabs .nav-link.active {
  background: #fff !important;
  color: var(--color-primary, #998873) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────
   11. Classic search filter panel
   ───────────────────────────────────────────────────────────────── */
.classic-search-container {
  padding: 16px 14px !important;
  background: transparent !important;
  overflow-y: auto;
  flex: 1;
}

.classic-search-container .form-group + .form-group {
  padding-top: 14px;
  border-top: 1px solid var(--color-border-soft, #EDE7D8);
}

.classic-search-container .form-label {
  font-family: var(--font-family-body, 'Jost', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--color-text-muted, #8A7A66);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.classic-search-container .form-select,
.classic-search-container .form-control {
  border: 1px solid var(--color-border-soft, #EDE7D8);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--color-text-dark, #3B3934);
  background: #fff;
  font-family: var(--font-family-body, 'Jost', sans-serif);
  transition: border-color 180ms ease;
}

.classic-search-container .form-select:focus,
.classic-search-container .form-control:focus {
  border-color: var(--color-primary, #998873);
  box-shadow: 0 0 0 3px rgba(153, 136, 115, 0.15);
}

/* Status buttons — pill toggles */
.status-buttons {
  display: flex;
  gap: 6px;
}

.status-buttons .btn-outline-primary {
  flex: 1;
  border-radius: 500px !important;
  padding: 7px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--color-border-soft, #E2DCCA);
  color: var(--color-text-dark, #3B3934);
  background: transparent;
  transition: all 180ms ease;
  font-family: var(--font-family-body, 'Jost', sans-serif);
}

.status-buttons .btn-check:checked + .btn-outline-primary {
  background: var(--color-primary, #998873);
  border-color: var(--color-primary, #998873);
  color: #fff;
  box-shadow: 0 2px 6px rgba(153, 136, 115, 0.30);
}

.status-buttons .btn-outline-primary:hover {
  border-color: var(--color-primary, #998873);
  color: var(--color-primary, #998873);
}

/* Search & Clear buttons */
.classic-search-container .btn-primary {
  background: var(--color-primary, #998873);
  border-color: var(--color-primary, #998873);
  border-radius: 8px;
  font-family: var(--font-family-body, 'Jost', sans-serif);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 2px 6px rgba(153, 136, 115, 0.30);
  transition: all 180ms ease;
}

.classic-search-container .btn-primary:hover {
  background: var(--color-secondary, #A4907C);
  border-color: var(--color-secondary, #A4907C);
  transform: translateY(-1px);
}

.classic-search-container .btn-outline-secondary {
  border: 1px solid var(--color-border-soft, #E2DCCA);
  color: var(--color-text-muted, #8A7A66);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: var(--font-family-body, 'Jost', sans-serif);
}

.classic-search-container .btn-outline-secondary:hover {
  border-color: var(--color-primary, #998873);
  color: var(--color-primary, #998873);
  background: transparent;
}

/* Advanced options toggle */
.advanced-options-toggle {
  background: var(--color-bg-light2, #E2DCCA) !important;
  color: var(--color-text-muted, #8A7A66) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
  font-weight: 600 !important;
}

.advanced-options-toggle:hover {
  background: var(--color-accent, #C8B6A6) !important;
  color: var(--color-text-dark, #3B3934) !important;
}

/* Ownership/rental-status btn-group */
.classic-search-container .btn-group .btn-outline-secondary {
  border-radius: 0;
  border-color: var(--color-border-soft, #E2DCCA);
  font-size: 0.78rem;
}

.classic-search-container .btn-group .btn-outline-secondary:first-child {
  border-radius: 500px 0 0 500px;
}

.classic-search-container .btn-group .btn-outline-secondary:last-child {
  border-radius: 0 500px 500px 0;
}

.classic-search-container .btn-check:checked + .btn-outline-secondary {
  background: var(--color-primary, #998873);
  border-color: var(--color-primary, #998873);
  color: #fff;
}

/* Tags/features checkboxes */
.tags-checkbox-container {
  border: 1px solid var(--color-border-soft, #EDE7D8) !important;
  border-radius: 8px !important;
  background: #fff;
}

.tags-checkbox-container .form-check-input:checked {
  background-color: var(--color-primary, #998873);
  border-color: var(--color-primary, #998873);
}

/* Search options badge */
.search-options-badge {
  background: var(--color-primary, #998873) !important;
}

.search-option {
  border-color: var(--color-accent, #C8B6A6) !important;
  color: var(--color-text-dark, #3B3934);
  background: #fff;
  font-family: var(--font-family-body, 'Jost', sans-serif);
  font-size: 0.78rem;
}

/* ─────────────────────────────────────────────────────────────────
   12. AI chat panel
   ───────────────────────────────────────────────────────────────── */
.ai-chat-container {
  padding: 12px 14px;
}

.ai-chat-input .input-group {
  background: #fff;
  border: 1px solid var(--color-border-soft, #EDE7D8);
  border-radius: 500px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-chat-input .input-group input.form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  padding: 4px !important;
  color: var(--color-text-dark, #3B3934) !important;
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
}

.ai-chat-input .input-group .voice-btn,
.ai-chat-input .input-group .image-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #8A7A66);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease;
  flex-shrink: 0;
  cursor: pointer;
}

.ai-chat-input .input-group .voice-btn:hover,
.ai-chat-input .input-group .image-btn:hover {
  background: rgba(153, 136, 115, 0.10);
  color: var(--color-primary, #998873);
}

.ai-chat-input .input-group .search-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--color-primary, #998873) !important;
  color: #fff !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(153, 136, 115, 0.30);
  transition: all 180ms ease;
}

.ai-chat-input .input-group .search-btn:hover {
  background: var(--color-secondary, #A4907C) !important;
  transform: translateY(-1px);
}

.suggestion-tag {
  background: #fff;
  border: 1px solid var(--color-border-soft, #E2DCCA);
  border-radius: 500px;
  padding: 5px 14px;
  font-size: 0.8rem;
  color: var(--color-text-dark, #3B3934);
  font-family: var(--font-family-body, 'Jost', sans-serif);
  cursor: pointer;
  transition: all 180ms ease;
}

.suggestion-tag:hover {
  border-color: var(--color-primary, #998873);
  color: var(--color-primary, #998873);
}

.ai-action-row .btn-outline-secondary {
  border-color: var(--color-border-soft, #E2DCCA);
  color: var(--color-text-muted, #8A7A66);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--font-family-body, 'Jost', sans-serif);
}

.ai-action-row .btn-outline-secondary:hover {
  border-color: var(--color-primary, #998873);
  color: var(--color-primary, #998873);
  background: transparent;
}

.ai-action-row .btn-outline-primary {
  border-color: var(--color-primary, #998873);
  color: var(--color-primary, #998873);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--font-family-body, 'Jost', sans-serif);
}

.ai-action-row .btn-outline-primary:hover {
  background: var(--color-primary, #998873);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   13. Listings content + property cards
   ───────────────────────────────────────────────────────────────── */
.listings-content {
  padding: 16px !important;
  gap: 20px !important;
}

.pty-card .pty-head {
  border-radius: 16px !important;
}

.pty-card .pty-image {
  border-radius: 16px !important;
}

.pty-card .pty-price {
  font-size: 1.15rem;
}

/* ─────────────────────────────────────────────────────────────────
   14. Property card v2 — design system style overrides
       (targets .property-card from property-card-v2.blade.php)
   ───────────────────────────────────────────────────────────────── */

/* Card wrapper — transparent, no shadow, no fixed height */
.property-card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.property-card:hover {
  box-shadow: none !important;
  transform: none;
}

/* Image — rounded corners, aspect-ratio based */
.property-image {
  height: auto !important;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-light2, #E2DCCA);
}

.property-image img {
  width: 100%;
  aspect-ratio: 1.33;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  transition: transform 300ms ease;
}

.property-card:hover .property-image img {
  transform: scale(1.04);
}

/* Badges container — spans full image for absolute positioning */
.property-badges {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10;
  display: block !important;
}

/* Type badge → top-left, organic bottom-right corner */
.type-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: var(--color-bg-dark, #3B3934) !important;
  color: #fff !important;
  border-radius: 0 0 20px 0 !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Status badge → top-right, organic bottom-left corner, split 2-color */
.status-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: inline-flex !important;
  overflow: hidden;
  border-radius: 0 0 0 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.status-part {
  padding: 6px 11px;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

.status-sale {
  background: var(--color-bg-dark, #3B3934);
}

.status-rent {
  background: #4F86C6;
}

/* ถ้ามีแค่ส่วนเดียว ให้ bottom-left โค้งเต็ม */
.status-badge:has(.status-sale:only-child),
.status-badge:has(.status-rent:only-child) {
  border-radius: 0 0 0 20px !important;
}

/* Favorite button — bottom-right to match design system pty-group-button */
.property-actions {
  top: auto !important;
  left: auto !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 20;
}

.favorite-btn {
  background: rgba(0, 0, 0, 0.65) !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 28px !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.favorite-btn:hover {
  background: #000 !important;
  transform: none !important;
}

.favorite-btn.active,
.favorite-btn.active i.fa-heart {
  color: var(--color-gold, #D4AF37) !important;
}

/* Details section */
.property-details {
  padding: 12px 0 0 !important;
  overflow-y: visible !important;
}

/* Price — design system: dark, bold, Roboto */
.property-price {
  margin-bottom: 4px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.sale-price {
  font-family: var(--font-family-mono, 'Roboto', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  color: var(--color-text-dark, #3B3934) !important;
  letter-spacing: -0.01em;
}

.rent-price {
  font-family: var(--font-family-mono, 'Roboto', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--color-text-muted, #8A7A66) !important;
}

/* Title — serif, light weight */
.property-title {
  font-family: var(--font-family-title, 'Gentium Book Plus', serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--color-text-dark, #3B3934) !important;
  margin-bottom: 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Location */
.property-location {
  font-size: 0.825rem !important;
  color: var(--color-text-muted, #8A7A66) !important;
  margin-bottom: 6px !important;
}

/* Features — bed/bath/area */
.property-features {
  display: flex !important;
  gap: 16px !important;
  font-size: 0.825rem !important;
  color: var(--color-text-body, #636363) !important;
  padding-top: 8px !important;
  border-top: none !important;
}

.property-features .feature {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.property-features .feature i {
  color: var(--color-text-muted, #8A7A66);
  font-size: 0.8rem;
}

/* ─────────────────────────────────────────────────────────────────
   15. Mobile nav bar
   ───────────────────────────────────────────────────────────────── */
.mobile-column-nav {
  background: var(--color-bg-dark, #3B3934);
}

.nav-column-btn {
  color: rgba(255, 255, 255, 0.65);
}

.nav-column-btn.active,
.nav-column-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

/* ─────────────────────────────────────────────────────────────────
   15. Infinite scroll loader
   ───────────────────────────────────────────────────────────────── */
.infinite-scroll-loading .loading-spinner {
  color: var(--color-primary, #998873);
}

/* ─────────────────────────────────────────────────────────────────
   16. Map column subtle shadow
   ───────────────────────────────────────────────────────────────── */
.map-column {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────────────────────────
   17. Map InfoWindow popup card — design system style
   ───────────────────────────────────────────────────────────────── */
.property-detail-card {
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14) !important;
  max-width: 380px !important;
}

.property-detail-image-container {
  width: 140px !important;
  border-radius: 16px 0 0 16px !important;
  background: var(--color-bg-light2, #E2DCCA);
}

.property-detail-image {
  border-radius: 16px 0 0 16px !important;
}

.property-detail-content {
  padding: 10px 12px !important;
}

/* Title — serif */
.property-detail-title {
  font-family: var(--font-family-title, 'Gentium Book Plus', serif) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--color-text-dark, #3B3934) !important;
  margin-bottom: 6px !important;
}

/* Prices */
.property-detail-price-value {
  font-family: var(--font-family-mono, 'Roboto', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

.property-detail-price-value.sale {
  color: var(--color-text-dark, #3B3934) !important;
  background: rgba(59, 57, 52, 0.08) !important;
  border: 1px solid rgba(59, 57, 52, 0.15) !important;
}

.property-detail-price-value.rent {
  color: #4F86C6 !important;
  background: rgba(79, 134, 198, 0.08) !important;
  border: 1px solid rgba(79, 134, 198, 0.20) !important;
}

.property-detail-price-label {
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--color-text-muted, #8A7A66) !important;
  text-transform: uppercase !important;
}

/* Specs grid */
.property-detail-spec-label {
  font-family: var(--font-family-body, 'Jost', sans-serif) !important;
  color: var(--color-text-muted, #8A7A66) !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
}

.property-detail-spec-value {
  font-family: var(--font-family-mono, 'Roboto', sans-serif) !important;
  color: var(--color-text-dark, #3B3934) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* Location */
.property-detail-location {
  color: var(--color-text-muted, #8A7A66) !important;
  font-size: 10px !important;
}

/* Status badge — top-left of image, split 2-color like property card */
.property-status-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: inline-flex !important;
  overflow: hidden !important;
  border-radius: 0 0 12px 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.property-status-badge .status-part {
  font-family: var(--font-family-body, 'Jost', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  color: #fff;
  display: inline-flex;
  align-items: center;
}