/* Styles specific to listing detail page social links and small utilities */
:root{
  --btn-bg:#f3f4f6;
  --text-main:#0f172a;
  --text-muted:#6b7280;
  --primary-green:#059669;
}

.social-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--btn-bg);
  color:var(--text-main);
  text-decoration:none;
  font-size:16px;
  transition:transform .12s ease, background-color .12s;
  border: 1px solid rgba(2,6,23,0.04);
}

.social-btn:hover{transform:translateY(-2px);background:#fff;box-shadow:0 6px 18px rgba(2,6,23,0.06);}

/* Platform-specific icon colors (keeps subtle background but colored icon per brand) */
.social-btn i{font-size:16px}
.social-instagram i{color:#E4405F}
.social-facebook i{color:#1877F2}
.social-twitter i{color:#1DA1F2}
.social-tiktok i{color:#010101}
.social-website i{color:#0f172a}

/* New: color the inline SVG symbols (fill the circle) */
.social-btn svg{width:18px;height:18px;display:block}
.social-btn svg circle{fill:transparent}
.social-instagram svg circle{fill:#E4405F}
.social-facebook svg circle{fill:#1877F2}
.social-twitter svg circle{fill:#1DA1F2}
.social-tiktok svg circle{fill:#010101}
.social-whatsapp svg circle{fill:#25D366}
.social-website svg circle{fill:#0f172a}

.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Slight spacing for sidebar action group and social block */
.sidebar-card .action-group{display:flex;flex-direction:row;gap:8px}
@media (max-width:640px){
  .social-btn{width:44px;height:44px;font-size:18px}
  .sidebar-card .action-group{flex-direction:column}
}

/* --- New: desktop sidebar layout fixes --- */
.ldp-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:24px;
  align-items:start;
}

/* ensure main-content and sidebar align and sidebar doesn't overflow */
.main-content{min-width:0}
.sidebar{min-width:0}

.sidebar-card{
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  border: 1px solid rgba(15,23,42,0.04);
}

/* make the sidebar sticky on larger screens so it stays visible */
@media (min-width: 900px){
  .sidebar-card{position:sticky; top:88px}
}

/* action buttons: ensure they fit well in row with icons + label */
.btn-action{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:var(--btn-bg);color:var(--text-main);text-decoration:none;border:1px solid rgba(2,6,23,0.04);font-weight:600}
.btn-action i{font-size:16px}

/* social links section (legacy fields) */
.social-links-section h4{margin:0 0 8px 0}
.social-links-section a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid rgba(2,6,23,0.04);text-decoration:none}

/* smaller gallery spacing on narrow screens */
@media (max-width:900px){
  .ldp-grid{grid-template-columns: 1fr}
  .sidebar-card{position:relative; top:auto}
}