/* ── Listing Detail Page ───────────────────────────── */

/* Gallery */
.gallery-sec { padding: 24px 0 0; }
.gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px 160px; gap: 8px; border-radius: 14px; overflow: hidden;
}
.g-main { grid-row: 1/3; position: relative; cursor: pointer; overflow: hidden; }
.g-main img { width: 100%; height: 100%; transition: transform .4s ease; }
.g-main:hover img { transform: scale(1.04); }
.g-thumb { position: relative; overflow: hidden; cursor: pointer; }
.g-thumb img { width: 100%; height: 100%; transition: transform .4s ease; }
.g-thumb:hover img { transform: scale(1.06); }
.g-more {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700; gap: 8px; cursor: pointer;
}
.g-more svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; }
.g-main .g-badge {
  position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: 50px;
  padding: 5px 14px; color: #fff; font-size: 12px; font-weight: 600;
}
.g-main .g-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Detail layout */
.detail-page { padding: 28px 0 60px; }
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }

/* Listing header card */
.lst-header {
  background: var(--bgw); border: 1px solid var(--br); border-radius: 12px;
  padding: 28px 28px 24px; margin-bottom: 20px;
}
.lst-header-top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.lst-logo {
  width: 72px; height: 72px; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--br); flex-shrink: 0; background: #eee;
}
.lst-logo img { width: 100%; height: 100%; }
.lst-title-wrap { flex: 1; }
.lst-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(21,138,221,.09); color: var(--p);
  font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 50px; margin-bottom: 8px;
}
.lst-title {
  font-family: var(--fh); font-size: clamp(20px,3vw,28px);
  font-weight: 800; color: var(--td); margin-bottom: 8px; line-height: 1.2;
}
.lst-rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { display: flex; gap: 2px; color: var(--orange); font-size: 17px; }
.star-dim { opacity: .25; }
.rating-num { font-size: 15px; font-weight: 700; color: var(--td); }
.rating-cnt { font-size: 13px; color: var(--mu); }
.lst-verified {
  display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: var(--green); background: rgba(16,185,129,.1); padding: 3px 10px; border-radius: 50px;
}
.lst-status { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px; }
.status-open { background: rgba(16,185,129,.1); color: var(--green); }
.status-closed { background: rgba(239,68,68,.1); color: var(--red); }

/* Quick info bar */
.lst-info-bar {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid var(--br); padding-top: 20px; margin-top: 4px;
}
.lib { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; border-right: 1px solid var(--br); }
.lib:first-child { padding-left: 0; }
.lib:last-child { border-right: none; }
.lib-label { font-size: 11.5px; color: var(--mu); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.lib-val { font-size: 13.5px; font-weight: 700; color: var(--td); display: flex; align-items: center; gap: 5px; }
.lib-val svg { width: 14px; height: 14px; stroke: var(--p); stroke-width: 2; fill: none; flex-shrink: 0; }
.lib-val a { color: var(--p); text-decoration: underline; text-underline-offset: 2px; }

/* Section boxes (content) */
.s-box { background: var(--bgw); border: 1px solid var(--br); border-radius: 12px; padding: 24px 28px; margin-bottom: 20px; }
.s-box-title {
  font-size: 17px; font-weight: 800; color: var(--td); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.s-box-title svg { width: 20px; height: 20px; stroke: var(--p); stroke-width: 2; fill: none; }
.s-divider { height: 1px; background: var(--br); margin: 16px 0; }

/* About */
.about-text { font-size: 14.5px; color: var(--tm); line-height: 1.82; }
.about-text p { margin-bottom: 14px; }
.about-text p:last-child { margin-bottom: 0; }
.read-more-btn { color: var(--p); font-weight: 600; font-size: 14px; background: none; border: none; cursor: pointer; padding: 0; margin-top: 4px; }

/* Tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  font-size: 13px; font-weight: 500; color: var(--tm); background: var(--bg);
  border: 1.5px solid var(--br); padding: 6px 14px; border-radius: 50px; transition: var(--tr);
}
.tag-pill:hover { color: var(--p); border-color: var(--p); }

/* Hours */
.hours-table { display: flex; flex-direction: column; gap: 0; }
.hours-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--br); font-size: 14px;
}
.hours-row:last-child { border-bottom: none; }
.hours-day { font-weight: 600; color: var(--td); min-width: 100px; }
.hours-time { color: var(--mu); }
.hours-today .hours-day, .hours-today .hours-time { color: var(--p); font-weight: 700; }
.hours-closed .hours-time { color: var(--red); }

/* Amenities */
.amenities-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.amen-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tm); }
.amen-item svg { width: 15px; height: 15px; stroke: var(--green); stroke-width: 2.5; fill: none; flex-shrink: 0; }

/* Reviews */
.review-summary {
  display: flex; gap: 28px; align-items: center; margin-bottom: 24px;
  padding: 20px; background: var(--bg); border-radius: 10px;
}
.rs-big { text-align: center; flex-shrink: 0; }
.rs-num { font-family: var(--fh); font-size: 52px; font-weight: 800; color: var(--td); line-height: 1; }
.rs-stars { color: var(--orange); font-size: 20px; margin: 4px 0; }
.rs-cnt { font-size: 13px; color: var(--mu); }
.rs-bars { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rb { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rb-label { min-width: 40px; color: var(--tm); font-weight: 600; }
.rb-track { flex: 1; height: 6px; background: var(--br); border-radius: 3px; overflow: hidden; }
.rb-fill { height: 100%; background: var(--orange); border-radius: 3px; }
.rb-pct { min-width: 28px; text-align: right; color: var(--mu); }

/* Review items */
.review-list { display: flex; flex-direction: column; gap: 20px; }
.review-item { border-bottom: 1px solid var(--br); padding-bottom: 20px; }
.review-item:last-child { border-bottom: none; padding-bottom: 0; }
.rev-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.rev-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #ddd; flex-shrink: 0; }
.rev-avatar img { width: 100%; height: 100%; }
.rev-meta { flex: 1; }
.rev-name { font-size: 14.5px; font-weight: 700; color: var(--td); }
.rev-date { font-size: 12px; color: var(--mu); margin-top: 2px; }
.rev-stars { color: var(--orange); font-size: 14px; }
.rev-text { font-size: 13.5px; color: var(--tm); line-height: 1.72; }

/* Write a review form */
.rev-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.rev-star-pick { display: flex; gap: 6px; font-size: 28px; color: #ddd; cursor: pointer; }
.rev-star-pick .s { transition: var(--tr); }
.rev-star-pick .s.on { color: var(--orange); }
.rev-input {
  border: 1.5px solid var(--br); border-radius: 8px; padding: 11px 14px; font-size: 14px;
  color: var(--td); outline: none; transition: var(--tr); font-family: var(--ff);
  width: 100%; background: var(--bgw);
}
.rev-input:focus { border-color: var(--p); }
.rev-textarea { resize: vertical; min-height: 100px; }
.rev-submit {
  background: var(--p); color: #fff; font-size: 14.5px; font-weight: 700;
  padding: 13px; border-radius: 8px; border: none; cursor: pointer; transition: var(--tr);
}
.rev-submit:hover { background: var(--pd); }

/* Map placeholder */
.map-placeholder {
  height: 240px; background: var(--bg); border-radius: 10px; overflow: hidden;
  position: relative; border: 1px solid var(--br);
  background: linear-gradient(135deg, #e8f4fd, #d0e9f7);
}
.map-pin-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  background: var(--p); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 50px; white-space: nowrap; box-shadow: var(--fm);
  display: flex; align-items: center; gap: 6px;
}
.map-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 12px; border: 1.5px solid var(--p); border-radius: 8px;
  color: var(--p); font-size: 14px; font-weight: 700; margin-top: 12px;
  cursor: pointer; transition: var(--tr); background: var(--bgw); font-family: var(--ff);
}
.map-btn:hover { background: var(--p); color: #fff; }

/* Sidebar: contact card */
.listing-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.contact-card { background: var(--bgw); border: 1px solid var(--br); border-radius: 12px; overflow: hidden; }
.cc-header { background: linear-gradient(135deg,var(--p),var(--pd)); padding: 22px 22px 18px; text-align: center; }
.cc-logo {
  width: 60px; height: 60px; border-radius: 12px; background: rgba(255,255,255,.15);
  margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.cc-name { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cc-cat { font-size: 12px; color: rgba(255,255,255,.7); }
.cc-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.cc-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--tm); }
.cc-item svg { width: 16px; height: 16px; stroke: var(--p); stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 2px; }
.cc-item a { color: var(--p); font-weight: 600; }
.cc-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px;
  background: var(--p); color: #fff; font-size: 14.5px; font-weight: 700; border-radius: 8px;
  border: none; cursor: pointer; transition: var(--tr); font-family: var(--ff);
}
.cc-cta-btn:hover { background: var(--pd); }
.cc-outline-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px;
  background: var(--bgw); color: var(--p); font-size: 14px; font-weight: 700; border-radius: 8px;
  border: 2px solid var(--p); cursor: pointer; transition: var(--tr); font-family: var(--ff);
}
.cc-outline-btn:hover { background: rgba(21,138,221,.07); }

/* Inquiry form */
.inq-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.inq-input {
  border: 1.5px solid var(--br); border-radius: 8px; padding: 10px 13px; font-size: 13.5px;
  color: var(--td); outline: none; width: 100%; font-family: var(--ff); transition: var(--tr);
}
.inq-input:focus { border-color: var(--p); }
.inq-textarea { resize: vertical; min-height: 90px; }
.inq-submit {
  background: var(--blk); color: #fff; font-size: 14px; font-weight: 700;
  padding: 12px; border-radius: 8px; border: none; cursor: pointer; transition: var(--tr);
  font-family: var(--ff);
}
.inq-submit:hover { background: #333; }

/* Quick stats */
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qs { background: var(--bg); border-radius: 10px; padding: 14px; text-align: center; }
.qs-num { font-family: var(--fh); font-size: 24px; font-weight: 800; color: var(--td); }
.qs-lbl { font-size: 11.5px; color: var(--mu); margin-top: 2px; }

/* Nearby listings */
.nearby-list { display: flex; flex-direction: column; gap: 14px; }
.nb-item { display: flex; gap: 12px; cursor: pointer; transition: var(--tr); border-radius: 8px; padding: 6px; }
.nb-item:hover { background: var(--bg); }
.nb-img { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: #eee; }
.nb-img img { width: 100%; height: 100%; }
.nb-name { font-size: 13.5px; font-weight: 700; color: var(--td); margin-bottom: 3px; transition: var(--tr); }
.nb-item:hover .nb-name { color: var(--p); }
.nb-cat { font-size: 12px; color: var(--mu); }
.nb-stars { color: var(--orange); font-size: 12px; margin-top: 2px; }

/* Nearby card wrapper */
.nearby-card {
  background: var(--bgw); border: 1px solid var(--br); border-radius: 12px; padding: 20px 22px;
}
.nearby-title { font-size: 15px; font-weight: 800; color: var(--td); margin-bottom: 16px; }

/* Generic sidebar widget card */
.s-card { background: var(--bgw); border: 1px solid var(--br); border-radius: 12px; padding: 20px 22px; }
.s-card-title { font-size: 15px; font-weight: 800; color: var(--td); margin-bottom: 14px; }

/* Review header inner row */
.rev-inner-row { display: flex; gap: 12px; align-items: flex-start; }

/* Write a review section wrapper */
.rev-write { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--br); }
.rev-write-title { font-size: 15px; font-weight: 800; color: var(--td); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }

/* Rating label inside review form */
.rating-lbl { font-size: 13px; font-weight: 600; color: var(--td); margin-bottom: 8px; }

/* Inquiry select */
.inq-select { appearance: none; cursor: pointer; background: var(--bgw); }

/* Responsive */
@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: 1fr; }
  .listing-sidebar { position: static; }
  .gallery-grid { grid-template-rows: 240px 130px; }
  .lst-info-bar { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lib { border-right: none; padding-left: 0; }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 220px 120px 120px; }
  .g-main { grid-row: 1; }
  .lst-header-top { flex-direction: column; }
  .lst-info-bar { grid-template-columns: 1fr 1fr; }
  .amenities-grid { grid-template-columns: 1fr; }
}