/* detail.css — the listing page.
   Tokens from theme.css. This is the page that converts, so the hierarchy is
   deliberate: photograph, then identity and rating, then the two ways to make
   contact, then everything else. Previously every block was an identical
   bordered card, which flattened the request form into the same visual weight
   as the tag list. */

.detail { max-width: var(--bm-container); margin: 0 auto; padding: var(--bm-4) var(--bm-pad) var(--bm-16); }

/* ==========================================================================
   Gallery
   ========================================================================== */
.d-gallery {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--bm-2);
  border-radius: var(--bm-r-lg); overflow: hidden; background: var(--bm-surface-3);
  box-shadow: var(--bm-shadow-sm);
}
.d-gallery.single { grid-template-columns: 1fr; }
.d-gallery > img { width: 100%; height: 380px; object-fit: cover; display: block; }
.d-gallery.single > img { height: clamp(240px, 34vw, 420px); }
.d-thumbs { display: grid; grid-template-rows: 1fr 1fr; gap: var(--bm-2); }
.d-thumbs img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .d-gallery { grid-template-columns: 1fr; }
  .d-gallery > img { height: 240px; }
  .d-thumbs { display: none; }
}
.d-credit { font-size: var(--bm-text-xs); color: var(--bm-faint); margin: 8px 2px 0; text-align: right; }
.d-credit a { color: var(--bm-faint); }

/* ==========================================================================
   Header
   ========================================================================== */
.d-header { padding: var(--bm-6) 0 var(--bm-5); border-bottom: 1px solid var(--bm-line); }
.d-titlewrap { display: flex; align-items: center; gap: var(--bm-4); }
.d-logo {
  flex: none; width: 60px; height: 60px; object-fit: contain;
  border-radius: var(--bm-r); border: 1px solid var(--bm-line);
  background: #fff; padding: 6px; box-shadow: var(--bm-shadow-xs);
}
.d-title {
  font-family: var(--bm-font-display); font-size: var(--bm-text-3xl);
  color: var(--bm-navy-900); margin: 0; line-height: 1.1; letter-spacing: -.022em;
}

.d-rowline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--bm-4); color: var(--bm-muted); font-size: var(--bm-text-base);
}
/* Rating as a gold merit chip — the same language as the cards, and it reads
   as an award rather than as a UI control. */
.d-rating-badge {
  display: inline-flex; align-items: baseline; gap: 2px;
  background: var(--bm-gold-500); color: var(--bm-navy-900);
  font-family: var(--bm-font-body); font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 5px 11px; border-radius: var(--bm-r-sm);
  box-shadow: var(--bm-shadow-xs);
}
.d-rating-badge small { font-weight: 600; font-size: .7rem; opacity: .7; }
.d-featured { font-size: var(--bm-text-xs); font-weight: 700; color: var(--bm-gold-700); background: var(--bm-gold-050); border: 1px solid #EBD9A6; padding: 4px 10px; border-radius: var(--bm-r-pill); }
.d-verified { font-size: var(--bm-text-xs); font-weight: 700; color: var(--bm-teal-700); background: var(--bm-teal-050); border: 1px solid #B9E0E8; padding: 4px 10px; border-radius: var(--bm-r-pill); }
.d-rating-soft { font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-muted); border: 1px solid var(--bm-line); border-radius: var(--bm-r-pill); padding: 4px 10px; background: var(--bm-surface); }
.d-price { font-weight: 700; color: var(--bm-ink-soft); }

.d-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--bm-3); }
.d-pills a {
  font-size: var(--bm-text-sm); font-weight: 500; text-decoration: none;
  background: var(--bm-surface-3); color: var(--bm-ink-soft);
  padding: 5px 12px; border-radius: var(--bm-r-pill);
  transition: background var(--bm-fast), color var(--bm-fast);
}
.d-pills a:hover { background: var(--bm-teal-050); color: var(--bm-teal-700); }

/* ---- Action bar ----
   Two primary ways to make contact, then quieter secondary actions. The old
   bar gave nine links identical weight, so nothing was actually the call to
   action. */
.d-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: var(--bm-5); }
.d-actions a, .d-actions button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--bm-r-sm);
  font-family: var(--bm-font-body); font-size: var(--bm-text-base); font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--bm-line); background: var(--bm-surface); color: var(--bm-ink-soft);
  transition: border-color var(--bm-fast), background var(--bm-fast), color var(--bm-fast), box-shadow var(--bm-fast), transform var(--bm-fast);
}
.d-actions a:hover, .d-actions button:hover { border-color: var(--bm-navy-600); color: var(--bm-navy-800); background: var(--bm-navy-050); }
.d-actions a:active, .d-actions button:active { transform: translateY(1px); }

.d-actions .d-cta-request {
  order: -2; background: var(--bm-navy-700); color: #fff; border-color: var(--bm-navy-700);
  padding: 11px 22px; box-shadow: var(--bm-shadow-sm);
}
.d-actions .d-cta-request:hover { background: var(--bm-navy-800); border-color: var(--bm-navy-800); color: #fff; box-shadow: var(--bm-shadow); }

.d-actions .d-cta-wa {
  order: -1; background: var(--bm-whatsapp); border-color: #1FBA5A; color: #06341C;
  font-weight: 700; box-shadow: var(--bm-shadow-xs);
}
.d-actions .d-cta-wa:hover { background: #1FBA5A; border-color: #1FBA5A; color: #fff; box-shadow: var(--bm-shadow-sm); }
.d-actions .d-cta-wa svg { flex: none; }

.d-actions .fav-btn.d-save {
  position: static; width: auto; height: auto; border-radius: var(--bm-r-sm);
  box-shadow: none; background: var(--bm-surface); color: var(--bm-ink-soft);
  gap: 7px; backdrop-filter: none; border: 1px solid var(--bm-line); padding: 10px 15px;
}
.d-actions .fav-btn.d-save:hover { transform: none; }
.d-actions .fav-btn.d-save svg { fill: none; stroke: currentColor; stroke-width: 2; }
.d-actions .fav-btn.d-save.on { color: #D6336C; border-color: #F0AEC6; background: #FDF2F6; }
.d-actions .fav-btn.d-save.on svg { fill: #D6336C; stroke: #D6336C; }
#d-claim { margin-left: auto; color: var(--bm-teal-700); border-style: dashed; }
#d-claim:hover { border-style: solid; border-color: var(--bm-teal-600); background: var(--bm-teal-050); color: var(--bm-teal-700); }
@media (max-width: 620px) {
  .d-actions .d-cta-request, .d-actions .d-cta-wa { flex: 1 1 46%; justify-content: center; }
  #d-claim { margin-left: 0; }
}

/* ==========================================================================
   Body layout
   ========================================================================== */
.d-body { display: grid; grid-template-columns: 1fr 372px; gap: var(--bm-10); margin-top: var(--bm-8); align-items: start; }
@media (max-width: 980px) { .d-body { grid-template-columns: 1fr; gap: var(--bm-6); } }
.d-main { display: flex; flex-direction: column; gap: var(--bm-6); min-width: 0; }
.d-aside { display: flex; flex-direction: column; gap: var(--bm-4); }
/* Deliberately NOT sticky. The sidebar stacks the request form, hours, facts
   and a map — around 1,600px, more than twice a laptop viewport. A sticky
   element taller than the viewport pins its top and makes its lower half
   unreachable, which would have hidden the map and half the form. The
   conversion path is covered instead by the header CTA (which jumps here) and,
   on mobile, by the fixed action bar below. */
#enquiry { scroll-margin-top: calc(var(--site-header-h) + 20px); }

/* Content sections read as prose blocks separated by rules, not as a stack of
   boxes. The sidebar keeps real cards, so the contrast marks them as actions. */
.d-main .d-card { background: none; border: 0; border-radius: 0; padding: 0 0 var(--bm-6); border-bottom: 1px solid var(--bm-line-soft); box-shadow: none; }
.d-main .d-card:last-child { border-bottom: 0; padding-bottom: 0; }
.d-main .d-card h2 {
  font-family: var(--bm-font-display); font-size: var(--bm-text-xl);
  color: var(--bm-navy-900); margin: 0 0 var(--bm-4);
}
.d-main .d-card p { color: var(--bm-ink-soft); line-height: 1.75; margin: 0 0 var(--bm-3); font-size: var(--bm-text-md); }
.d-main .d-card p:last-child { margin-bottom: 0; }

.d-aside .d-card {
  background: var(--bm-surface); border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-lg); padding: var(--bm-5); box-shadow: var(--bm-shadow-xs);
}
.d-aside .d-card h3 {
  font-family: var(--bm-font-display); font-size: var(--bm-text-lg);
  color: var(--bm-navy-900); margin: 0 0 var(--bm-3);
}

/* Language toggle */
.lang-toggle { display: inline-flex; gap: 3px; background: var(--bm-surface-3); border-radius: var(--bm-r-pill); padding: 3px; align-self: flex-start; }
.lang-toggle button {
  border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: var(--bm-r-pill);
  font: inherit; font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-muted);
  transition: background var(--bm-fast), color var(--bm-fast);
}
.lang-toggle button[aria-pressed="true"] { background: var(--bm-surface); color: var(--bm-navy-800); box-shadow: var(--bm-shadow-xs); }

/* Highlights */
.d-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.d-highlights li { position: relative; padding-left: 27px; color: var(--bm-ink-soft); line-height: 1.55; font-size: var(--bm-text-md); }
.d-highlights li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  background: var(--bm-teal-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
[dir="rtl"].d-highlights li { padding-left: 0; padding-right: 27px; }
[dir="rtl"].d-highlights li::before { left: auto; right: 0; }

/* Photo grid + lightbox */
.d-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--bm-2); }
.d-photo { display: block; aspect-ratio: 4/3; border-radius: var(--bm-r); overflow: hidden; background: var(--bm-surface-3); }
.d-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--bm-ease); }
.d-photo:hover img { transform: scale(1.06); }
.d-lb { position: fixed; inset: 0; z-index: 999; background: rgba(11,39,57,.94); display: flex; align-items: center; justify-content: center; }
.d-lb-frame { max-width: 92vw; max-height: 84vh; }
.d-lb-frame img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: var(--bm-r); }
.d-lb-cap { color: rgba(255,255,255,.7); text-align: center; font-size: var(--bm-text-sm); margin-top: 10px; }
.d-lb-close, .d-lb-prev, .d-lb-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.d-lb-close:hover, .d-lb-prev:hover, .d-lb-next:hover { background: rgba(255,255,255,.24); }
.d-lb-close { top: 20px; right: 20px; }
.d-lb-prev { left: 20px; }
.d-lb-next { right: 20px; }

/* Rating breakdown */
.score-overall { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--bm-4); }
.score-overall b { font-family: var(--bm-font-display); font-size: 2.4rem; color: var(--bm-navy-800); line-height: 1; font-variant-numeric: tabular-nums; }
.score-overall span { color: var(--bm-muted); font-size: var(--bm-text-base); }
.score-grid { display: grid; gap: 11px; }
.score-row { display: grid; grid-template-columns: 130px 1fr 38px; align-items: center; gap: var(--bm-3); font-size: var(--bm-text-base); color: var(--bm-ink-soft); }
.score-track { height: 7px; background: var(--bm-surface-3); border-radius: var(--bm-r-pill); overflow: hidden; }
.score-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--bm-teal-600), var(--bm-teal-500)); border-radius: var(--bm-r-pill); }
.score-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--bm-navy-800); }
@media (max-width: 520px) { .score-row { grid-template-columns: 100px 1fr 34px; } }

/* Chip rows */
.chip-row { display: grid; grid-template-columns: 108px 1fr; gap: var(--bm-3); align-items: start; margin-bottom: var(--bm-3); }
.chip-row:last-child { margin-bottom: 0; }
.chip-row .lbl { font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-muted); padding-top: 5px; }
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-set span, .chip-set a {
  font-size: var(--bm-text-sm); background: var(--bm-surface-3); color: var(--bm-ink-soft);
  border-radius: var(--bm-r-pill); padding: 4px 12px; text-decoration: none;
}
@media (max-width: 520px) { .chip-row { grid-template-columns: 1fr; gap: 6px; } }

/* Reviews */
.review-summary { font-size: var(--bm-text-lg) !important; color: var(--bm-ink) !important; line-height: 1.65 !important; }
.review-meta { font-size: var(--bm-text-sm) !important; color: var(--bm-muted) !important; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--bm-line-soft);
}
.faq details:first-of-type { border-top: 1px solid var(--bm-line-soft); }
.faq summary {
  cursor: pointer; padding: 15px 30px 15px 0; position: relative; list-style: none;
  font-weight: 600; color: var(--bm-navy-900); font-size: var(--bm-text-md); line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  margin-top: -6px; border-right: 2px solid var(--bm-faint); border-bottom: 2px solid var(--bm-faint);
  transform: rotate(45deg); transition: transform var(--bm-fast);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--bm-teal-700); }
.faq details p { margin: 0 0 16px !important; color: var(--bm-ink-soft) !important; }

/* ==========================================================================
   Sidebar — request form
   ========================================================================== */
/* The one card on the page that must not look like the others: navy rule on
   top, slight lift, so it reads as the action. */
.enquiry-card {
  border-color: #D9D3C6 !important;
  box-shadow: var(--bm-shadow) !important;
  position: relative; overflow: hidden;
}
.enquiry-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--bm-navy-700), var(--bm-teal-500), var(--bm-gold-500));
}
.enquiry-intro { font-size: var(--bm-text-sm); color: var(--bm-muted); line-height: 1.55; margin: -4px 0 var(--bm-4); }

.booking-form { display: flex; flex-direction: column; gap: var(--bm-3); }
.booking-form input, .booking-form textarea, .booking-form select {
  width: 100%; padding: 10px 13px; border: 1px solid var(--bm-line); border-radius: var(--bm-r-sm);
  font: inherit; font-size: var(--bm-text-base); color: var(--bm-ink); background: var(--bm-surface);
  transition: border-color var(--bm-fast), box-shadow var(--bm-fast);
  -webkit-appearance: none; appearance: none;
}
.booking-form select {
  /* Native select arrow is suppressed by appearance:none, so draw one. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
  padding-right: 34px;
}
.booking-form input::placeholder, .booking-form textarea::placeholder { color: var(--bm-faint); }
.booking-form input:focus, .booking-form textarea:focus, .booking-form select:focus {
  outline: none; border-color: var(--bm-teal-500); box-shadow: 0 0 0 3px rgba(18,125,145,.13);
}
.booking-form textarea { resize: vertical; min-height: 74px; }
.booking-form .btn.primary {
  width: 100%; text-align: center; justify-content: center; margin-top: var(--bm-2);
  background: var(--bm-navy-700); color: #fff; border: 0; border-radius: var(--bm-r-sm);
  padding: 13px 20px; font: inherit; font-weight: 700; font-size: var(--bm-text-md);
  cursor: pointer; box-shadow: var(--bm-shadow-sm);
  transition: background var(--bm-fast), box-shadow var(--bm-fast);
}
.booking-form .btn.primary:hover { background: var(--bm-navy-800); box-shadow: var(--bm-shadow); }
.booking-form .btn.primary:disabled { opacity: .6; cursor: default; }
.booking-msg { font-size: var(--bm-text-sm); margin: 6px 0 0; min-height: 1em; line-height: 1.45; }
.booking-msg.err { color: var(--bm-danger); }
.booking-msg.ok { color: var(--bm-success); font-weight: 600; }

.bf-field { display: block; }
.bf-field > span { display: block; font-size: var(--bm-text-xs); font-weight: 700; color: var(--bm-ink-soft); margin: 0 0 5px; letter-spacing: .01em; }
.bf-field > span em { font-style: normal; font-weight: 500; color: var(--bm-faint); }
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bm-2); }
.bf-alt { font-size: var(--bm-text-sm); color: var(--bm-muted); margin: var(--bm-3) 0 0; text-align: center; }
.bf-alt a { color: var(--bm-teal-700); font-weight: 600; }
@media (max-width: 400px) { .bf-row { grid-template-columns: 1fr; } }

/* Hours */
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--bm-text-base); }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--bm-line-soft); color: var(--bm-ink-soft); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--bm-ink); }
.hours-table tr.today td { font-weight: 700; color: var(--bm-navy-800); }
.hours-table tr.today td:first-child::after { content: " · today"; font-weight: 500; color: var(--bm-teal-700); font-size: var(--bm-text-xs); }
.d-open { color: var(--bm-success); font-weight: 700; }

/* Facts */
.d-facts { margin: 0; display: grid; gap: var(--bm-3); }
.d-facts dt { font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-muted); }
.d-facts dd { margin: 3px 0 0; color: var(--bm-ink-soft); font-size: var(--bm-text-base); line-height: 1.5; }
.d-social { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--bm-4); padding-top: var(--bm-4); border-top: 1px solid var(--bm-line-soft); }
.d-social a {
  font-size: var(--bm-text-sm); font-weight: 600; text-decoration: none;
  color: var(--bm-teal-700); background: var(--bm-teal-050);
  padding: 5px 12px; border-radius: var(--bm-r-pill);
}
.d-social a:hover { background: #D3EDF3; }

/* Map */
.d-map { border-radius: var(--bm-r); overflow: hidden; border: 1px solid var(--bm-line); }
.d-map iframe { display: block; width: 100%; height: 230px; border: 0; }

/* ==========================================================================
   Related
   ========================================================================== */
.related { margin-top: var(--bm-16); padding-top: var(--bm-10); border-top: 1px solid var(--bm-line); }
.related h2 { font-family: var(--bm-font-display); font-size: var(--bm-text-2xl); margin: 0 0 var(--bm-6); }

/* ==========================================================================
   Mobile action bar
   ==========================================================================
   On a phone the two ways to make contact are otherwise a full screen-height
   of scrolling away. This pins them to the bottom edge, which is where the
   conversion actually happens on mobile. Desktop keeps the header action bar. */
.d-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 10px; padding: 10px var(--bm-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--bm-line);
  box-shadow: 0 -4px 16px rgba(18,59,94,.08);
}
.d-mobilebar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 14px; border-radius: var(--bm-r-sm); text-decoration: none;
  font-family: var(--bm-font-body); font-weight: 700; font-size: var(--bm-text-base);
}
.d-mobilebar .mb-primary { background: var(--bm-navy-700); color: #fff; }
.d-mobilebar .mb-wa { background: var(--bm-whatsapp); color: #06341C; }
.d-mobilebar .mb-call { background: var(--bm-surface); color: var(--bm-navy-800); border: 1px solid var(--bm-line); }
@media (max-width: 980px) {
  .d-mobilebar { display: flex; }
  /* Keep the footer clear of the fixed bar (measured ~95px tall). */
  .bm-footer { padding-bottom: 104px; }
}