.social-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.social-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  flex-wrap:wrap;
}

.social-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.social-tabs button{
  border:1px solid var(--border,#ddd);
  background:var(--card,#fff);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.social-tabs button.active{
  font-weight:700;
}

.social-card{
  border:1px solid var(--border,#ddd);
  border-radius:14px;
  padding:16px;
  background:var(--card,#fff);
}

.social-form{
  display:grid;
  gap:12px;
}

.social-form input,
.social-form textarea,
.social-form select{
  width:100%;
  box-sizing:border-box;
}

.social-form textarea{
  min-height:160px;
  resize:vertical;
}

.social-platforms{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

.social-platform{
  border:1px solid var(--border,#ddd);
  padding:10px;
  border-radius:10px;
}

.social-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.social-post-row{
  border-bottom:1px solid var(--border,#ddd);
  padding:12px 0;
}

.social-post-row:last-child{
  border-bottom:none;
}

.social-status{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background:#eee;
}

/* SOCIAL BUTTON COLOR FIX */

#social .social-tabs button{
  background:#fff;
  color:#374151;
  border:1px solid var(--line,#e5e7eb);
}

#social .social-tabs button:hover{
  background:#f3f4f6;
  color:#111827;
}

#social .social-tabs button.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

#social .social-head button,
#social .social-actions button{
  background:#111827;
  color:#fff;
}

#social .social-platform{
  color:#374151;
  background:#fff;
}

#social .social-platform input{
  width:auto;
}


/* SOCIAL MEDIA UPLOAD */

#social #socialMediaFiles{
  padding:10px;
  background:#fff;
  color:#374151;
  border:1px solid var(--line,#e5e7eb);
  border-radius:10px;
}

.social-media-preview{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(150px,1fr)
    );
  gap:12px;
  margin-top:12px;
}

.social-media-preview-item{
  border:
    1px solid
    var(--line,#e5e7eb);
  border-radius:12px;
  padding:8px;
  background:#fff;
  overflow:hidden;
}

.social-media-preview-item img,
.social-media-preview-item video{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
  border-radius:8px;
  background:#f3f4f6;
}

.social-media-preview-item small{
  display:block;
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#4b5563;
}


/* SOCIAL EDITOR */

.social-post-clickable{
  cursor:pointer;
  border-radius:10px;
  padding-left:8px;
  padding-right:8px;
}

.social-post-clickable:hover{
  background:#f9fafb;
}

.social-editor-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.social-editor-head h3{
  margin:0;
}

.social-media-delete{
  width:100%;
  margin-top:8px;
  padding:7px 9px !important;
  font-size:12px !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  color:#b91c1c !important;
}

.social-media-delete:hover{
  background:#fef2f2 !important;
}

#social .secondary{
  background:#fff;
  color:#374151;
  border:1px solid var(--line,#e5e7eb);
}