/* assets/social-likes.css */

html.clb-likes-lock { overflow: hidden; }

.clb-likes{
  position: fixed;
  inset: 0;
      z-index: 99999999;
  display: none;
  font-family: inherit;
}
.clb-likes[data-open="1"]{ display:block; }

.clb-likes__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.clb-likes__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

.clb-likes__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  gap: 10px;
}
.clb-likes__title{
  font-weight: 700;
  font-size: 14px;
}
.clb-likes__close{
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.clb-likes__close:hover{ background: rgba(0,0,0,.06); }

.clb-likes__body{
  overflow: auto;
  padding: 6px 0;
}

.clb-likes__item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
}
.clb-likes__item:hover{
  background: rgba(0,0,0,.03);
}

/* clickable area (avatar + name) */
.clb-likes__link{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.clb-likes__avaWrap{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0,0,0,.06);
}
.clb-likes__ava{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.clb-likes__meta{
  flex: 1 1 auto;
  min-width: 0;
}
.clb-likes__name{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clb-likes__sub{
  font-size: 12px;
  opacity: .72;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clb-likes__spacer{ width: 90px; flex:0 0 auto; }

.clb-likes__follow{
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.18);
  background: #7247ee;
  color: #fff;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 92px;
}
.clb-likes__follow[data-following="1"]{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.85);
  border-color: rgba(0,0,0,.16);
}
.clb-likes__follow[disabled]{
  opacity: .6;
  cursor: default;
}
.clb-likes__follow[data-loading="1"]{
  opacity: .75;
}

/* skeleton */
.clb-likes__row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
}
.clb-likes__avaSk{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
}
.clb-likes__txtSk{ flex: 1 1 auto; }
.clb-likes__lineSk{
  height: 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.08);
  margin-bottom: 8px;
}
.clb-likes__lineSk.is-short{ width: 55%; margin-bottom: 0; }
.clb-likes__btnSk{
  width: 92px;
  height: 30px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.clb-likes__empty{
  padding: 22px 14px;
  text-align: center;
  opacity: .75;
  font-size: 13px;
}
.clb-likes__more{
  padding: 12px 14px;
  text-align:center;
  opacity: .7;
  font-size: 12px;
}

@media (max-width: 520px){
  .clb-likes__panel{
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    max-height: calc(100vh - 24px);
  }
}
/* keep modal size stable (no shrink after skeleton) */
.clb-likes__panel{
  min-height: 370px;
}

.clb-likes__body{
  min-height: 170px;
  max-height: min(55vh, 420px);
  overflow: auto;
}
/* === Likes modal: visible close button + nicer dark-theme look === */
.clb-likes__close{
  color: #4c1d95 !important;
  background: rgba(111,87,255,.10) !important;
  border: 1px solid rgba(111,87,255,.20) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
}

.clb-likes__close:hover{
  color: #3b146f !important;
  background: rgba(111,87,255,.16) !important;
}

.clb-likes__close:active{
  transform: scale(.98);
}

html[data-clb-theme="dark"] .clb-likes__panel{
  box-shadow: 0 18px 50px rgba(0,0,0,.42) !important;
}

html[data-clb-theme="dark"] .clb-likes__head{
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}



/* === Colibri likes modal: dark theme final override === */

html[data-clb-theme="dark"] .clb-likes__panel,
body.color-scheme.color-scheme-1 .clb-likes__panel {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
}

html[data-clb-theme="dark"] .clb-likes__head,
body.color-scheme.color-scheme-1 .clb-likes__head {
  background: #151f2f !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

html[data-clb-theme="dark"] .clb-likes__title,
body.color-scheme.color-scheme-1 .clb-likes__title {
  color: #ffffff !important;
}

html[data-clb-theme="dark"] .clb-likes__body,
body.color-scheme.color-scheme-1 .clb-likes__body {
  background: #111827 !important;
  color: #f8fafc !important;
}

html[data-clb-theme="dark"] .clb-likes__item,
body.color-scheme.color-scheme-1 .clb-likes__item {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-clb-theme="dark"] .clb-likes__item:hover,
body.color-scheme.color-scheme-1 .clb-likes__item:hover {
  background: rgba(255,255,255,.06) !important;
}

html[data-clb-theme="dark"] .clb-likes__link,
body.color-scheme.color-scheme-1 .clb-likes__link {
  color: #f8fafc !important;
}

html[data-clb-theme="dark"] .clb-likes__name,
body.color-scheme.color-scheme-1 .clb-likes__name {
  color: #ffffff !important;
}

html[data-clb-theme="dark"] .clb-likes__sub,
html[data-clb-theme="dark"] .clb-likes__meta,
body.color-scheme.color-scheme-1 .clb-likes__sub,
body.color-scheme.color-scheme-1 .clb-likes__meta {
  color: rgba(248,250,252,.72) !important;
  opacity: 1 !important;
}

html[data-clb-theme="dark"] .clb-likes__avaWrap,
body.color-scheme.color-scheme-1 .clb-likes__avaWrap {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

html[data-clb-theme="dark"] .clb-likes__follow,
body.color-scheme.color-scheme-1 .clb-likes__follow {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

html[data-clb-theme="dark"] .clb-likes__follow[data-following="1"],
body.color-scheme.color-scheme-1 .clb-likes__follow[data-following="1"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.16) !important;
}

html[data-clb-theme="dark"] .clb-likes__close,
body.color-scheme.color-scheme-1 .clb-likes__close {
  background: rgba(124,58,237,.16) !important;
  color: #ddd6fe !important;
  border: 1px solid rgba(196,181,253,.22) !important;
}

html[data-clb-theme="dark"] .clb-likes__close:hover,
body.color-scheme.color-scheme-1 .clb-likes__close:hover {
  background: rgba(124,58,237,.26) !important;
  color: #ffffff !important;
}

html[data-clb-theme="dark"] .clb-likes__empty,
html[data-clb-theme="dark"] .clb-likes__more,
body.color-scheme.color-scheme-1 .clb-likes__empty,
body.color-scheme.color-scheme-1 .clb-likes__more {
  color: rgba(248,250,252,.72) !important;
}

html[data-clb-theme="dark"] .clb-likes__avaSk,
html[data-clb-theme="dark"] .clb-likes__lineSk,
html[data-clb-theme="dark"] .clb-likes__btnSk,
body.color-scheme.color-scheme-1 .clb-likes__avaSk,
body.color-scheme.color-scheme-1 .clb-likes__lineSk,
body.color-scheme.color-scheme-1 .clb-likes__btnSk {
  background: rgba(255,255,255,.10) !important;
}