:root {
  --black:#000000; --white:#FFFFFF;
  --gray-50:#FAFAFA; --gray-100:#f5f5f5; --gray-200:#E8E8E8;
  --gray-300:#D0D0D0; --gray-400:#A0A0A0; --gray-500:#6B6B6B;
  --gray-700:#333333; --gray-900:#1D3557;
  --f:'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --primary: #1B2A4A; --secondary: #457B9D; --accent: #A8DADC;
  --navy: #1D3557; --cream: #f5f5f5;
  --ink: #1D3557; --muted: #6B6B6B; --border: #E8E8E8;
  --fd: 'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --fb: 'Inter',-apple-system,'Helvetica Neue',sans-serif;
}
/* ── assets/css/listing.css ── Sidiboat */
.detail-gallery { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:320px; gap:6px; padding:28px 72px 0; }
.gal-main { border-radius:2px 0 0 12px; overflow:hidden; }
.gal-main img { width:100%; height:100%; object-fit:cover; }
.gal-side { display:flex; flex-direction:column; gap:6px; }
.gal-side img { width:100%; height:157px; object-fit:cover; }
.gal-side img:last-child { border-radius:0 12px 12px 0; }

.detail-layout { display:grid; grid-template-columns:1fr 360px; gap:52px; padding:36px 72px 60px; }
.detail-title { font-family:var(--f,var(--fd)); font-size:32px; font-weight:700; letter-spacing:-.8px; margin-bottom:10px; color:#1D3557; }
.detail-meta { font-size:14px; color:var(--muted); margin-bottom:24px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

.dtabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:28px; }
.dtab { padding:12px 22px; font-size:13px; font-weight:500; color:var(--muted); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:all .2s; }
.dtab.active { color:#1D3557; border-bottom-color:#E63946; }
.dtab-panel { display:none; }
.dtab-panel.active { display:block; }

.dsec-title { font-family:var(--f,var(--fd)); font-size:19px; font-weight:600; margin-bottom:14px; color:#1D3557; }
.detail-desc { font-size:15px; color:var(--muted); line-height:1.7; }
.detail-divider { height:1px; background:var(--border); margin:28px 0; }

.rules-list { display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--muted); }

/* ── Boat specs / amenities ── */
.amen-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.amen-item { display:flex; align-items:center; gap:10px; font-size:14px; color:#1D3557; }
.amen-icon { width:32px; height:32px; border-radius:2px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* ── Boat specs section ── */
.boat-specs { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; margin-bottom:24px; }
.boat-spec { background:#f5f5f5; border:1px solid #e0e0e0; border-radius:10px; padding:14px 16px; text-align:center; }
.boat-spec-val { font-family:var(--fd); font-size:20px; font-weight:700; color:#1D3557; margin-bottom:2px; }
.boat-spec-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* ── Owner/captain card ── */
.owner-card { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--white); }
.owner-avatar { width:50px; height:50px; border-radius:50%; background:#457B9D; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f,var(--fd)); font-size:18px; font-weight:700; flex-shrink:0; }
.owner-name { font-weight:500; margin-bottom:3px; color:#1D3557; }
.owner-meta { font-size:12px; color:var(--muted); }
.owner-info { flex:1; }

/* ── Reviews ── */
.reviews-list { display:flex; flex-direction:column; gap:20px; }
.review-card { padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--white); }
.review-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.review-avatar { width:36px; height:36px; border-radius:50%; background:#f5f5f5; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }
.review-name { font-size:14px; font-weight:500; color:#1D3557; }
.review-date { font-size:11px; color:var(--muted); }
.review-stars { color:#E63946; font-size:14px; letter-spacing:1px; }
.review-text { font-size:14px; color:var(--muted); line-height:1.6; }
.review-reply { margin-top:12px; padding:12px; background:#f5f5f5; border-radius:8px; font-size:13px; color:var(--muted); border-left:3px solid #457B9D; }

/* ── Booking card ── */
.booking-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:26px; position:sticky; top:84px; box-shadow:0 8px 28px rgba(29,53,87,.08); }
.book-price { font-family:var(--f,var(--fd)); font-size:30px; font-weight:700; color:#1D3557; margin-bottom:4px; }
.book-price span { font-size:13px; font-weight:400; color:var(--muted); }
.book-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.book-field { border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:8px; }
.book-field label { display:block; font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px; }
.book-field input, .book-field select, .book-field textarea { background:none; border:none; outline:none; font-family:var(--fb); font-size:14px; font-weight:500; color:var(--ink); width:100%; }
.book-field input:focus, .book-field select:focus { outline:none; }

/* ── Booking CTA button ── */
.book-btn { width:100%; padding:14px; background:#1B2A4A; color:#fff; border:none; border-radius:8px; font-family:var(--fd); font-size:16px; font-weight:600; cursor:pointer; transition:background .2s; margin-top:8px; }
.book-btn:hover { background:#E63946; }

.breakdown { margin:16px 0; }
.bd-row { display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--border); color:var(--muted); }
.bd-row.total { color:#1D3557; font-weight:500; border:none; padding-top:10px; }

@media(max-width:1024px){
  .detail-gallery { padding:16px 20px 0; grid-template-columns:1fr; grid-template-rows:auto; }
  .gal-main { border-radius:12px 12px 0 0; }
  .gal-main img { height:280px; }
  .gal-side { flex-direction:row; }
  .gal-side img { height:120px; flex:1; min-width:0; }
  .gal-side img:first-child { border-radius:0; }
  .gal-side img:last-child { border-radius:0 0 12px 12px; }
  .detail-layout { grid-template-columns:1fr; padding:24px 20px; }
  .detail-right { order:-1; }
  .booking-card { position:static; }
}
@media(max-width:768px){
  .detail-layout { padding:20px 16px; gap:28px; }
  .detail-title { font-size:24px; }
  .amen-grid { grid-template-columns:1fr; }
  .equip-grid { grid-template-columns:1fr !important; }
  .book-price { font-size:24px; }
  .booking-card { padding:18px; }
}
@media(max-width:480px){
  .gal-main img { height:200px; }
  .gal-side img { height:90px; }
  .detail-gallery { padding:8px 12px 0; }
  .detail-layout { padding:16px 12px; gap:20px; }
  .detail-title { font-size:22px; }
  .boat-specs { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .boat-spec { padding:10px 8px; }
  .boat-spec-val { font-size:16px; }
  .dtab { padding:10px 14px; font-size:12px; }
}