/* Auto Car Detail frontend module — multi-social share.
   Facebook keeps the proven /car/{id} OG share path. */

.detail-loading{
  min-height:220px;
  display:grid;
  place-items:center;
  color:#6f7883
}

.detail-description{white-space:pre-line}

.share-panel{
  margin-top:16px;
  padding:14px;
  border:1px solid #dfe3e8;
  border-radius:13px;
  background:#fafbfc
}

.share-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px
}

.share-head strong{font-size:13px}

.share-status{
  min-height:18px;
  color:#6f7883;
  font-size:11px;
  text-align:right
}

.share-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.share-btn{
  min-height:40px;
  border:1px solid #dfe3e8;
  border-radius:10px;
  background:#fff;
  color:#303946;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:850;
  cursor:pointer
}

.share-btn:hover{
  border-color:#cbd2da;
  background:#f7f8fa
}

.share-icon{
  width:24px;
  height:24px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#eef1f5;
  font-size:14px;
  font-weight:950
}

.share-btn.facebook .share-icon{
  background:#eaf1ff;
  color:#1859b7
}

.share-btn.instagram .share-icon{
  background:#fff0f5;
  color:#b42365
}

.share-btn.line .share-icon{
  background:#ecfaef;
  color:#14833b
}

.share-btn.x .share-icon{
  background:#eef0f2;
  color:#111
}

.share-btn.copy .share-icon{
  background:#fff3e4;
  color:#9a5b00
}

.share-btn:focus-visible{
  outline:3px solid rgba(227,29,43,.18);
  outline-offset:2px
}

.detail-back{grid-column:1/-1}

@media(max-width:640px){
  .share-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .share-btn{
    justify-content:flex-start;
    min-height:44px
  }
  .share-head{
    align-items:flex-start;
    flex-direction:column
  }
  .share-status{text-align:left}
  .detail-back{grid-column:1/-1}
}