/* =========================
   CLD Minimal Styles (deduped)
   ========================= */

/* Like/Dislike wrap & buttons */









/* ===== Text Wrapping Fix ===== */
li.comment .comment-content,
li.comment .comment-content p,
li.comment .comment-body p,
li.comment .comment-text {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ===== Replying Indicator (form) ===== */
#respond .cld-replying{
  display:none; align-items:center; justify-content:space-between;
  gap:10px; margin:8px 0; padding:8px 12px; border-radius:8px;
  background:#F7D04A; border:2px solid #8a3c14; font-weight:600; 
}
#respond .cld-replying.show{ display:flex; }
#respond .cld-cancel-reply{
  --accent: var(--cld-accent, #8a3c14);
  display:inline-block; padding:6px 12px; border-radius:9999px;
  border:2px solid var(--accent); background:transparent; color:var(--accent);
  font-weight:700; cursor:pointer;
}
#respond .cld-cancel-reply:hover{ background:var(--accent); color:#fff; }



/* Sembunyikan catatan dan label di atas field */
:is(#respond, .comment-respond) .comment-notes,
:is(#respond, .comment-respond) .comment-reply-title,
:is(#respond, .comment-respond) .comment-form-comment > label,
:is(#respond, .comment-respond) .comment-form-author > label,
:is(#respond, .comment-respond) .comment-form-email  > label,
:is(#respond, .comment-respond) .comment-form-url    > label{
  display:none !important;
}


/* Sembunyikan seluruh baris "Situs Web" */
:is(#respond, .comment-respond) .comment-form-url{ display:none !important; }

:is(#respond, .comment-respond) ::placeholder{ color:#9aa0a6; }

/* Focus ring */
:is(#respond, .comment-respond) :is(input, textarea):focus{
  border-color:#8a3c13;
  box-shadow:0 0 0 3px rgba(138, 60, 19, 0.35);
}




/* Bikin baris tombol membentang penuh */
:is(#respond, .comment-respond) p.form-submit{ 
  width:100%;
  grid-column: 1 / -1;   /* kalau parent-nya grid, span penuh */
  clear: both;           /* kalau parent-nya float, bersihkan */
}

/* Tombolnya full width */
:is(#respond, .comment-respond) .form-submit .submit,
:is(#respond, .comment-respond) #submit{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px 16px;
  border-radius:6px;
  /* tidak set warna → biarkan tema yang menentukan */
}




/* ===== Emoji Reactions (48px) ===== */
.cld-reactions{
  --cld-bg:#fff; --cld-panel:transparent; --cld-text:--cld-accent; --cld-muted:--cld-accent; --cld-ring:rgba(0,0,0,.06);
  margin:12px 0 18px; padding:12px; border-radius:12px; background:transparent; color:inherit;
}

@media (prefers-color-scheme:dark){
  .cld-theme-auto{ --cld-bg:#0f172a; --cld-panel:#111827; --cld-text:#e5e7eb; --cld-muted:#9ca3af; --cld-ring:rgba(255,255,255,.08); }
}
.cld-theme-light{ --cld-bg:#fff; --cld-panel:#f3f4f6; --cld-text:#111827; --cld-muted:#6b7280; --cld-ring:rgba(255, 0, 0, 0.06); }
.cld-theme-dark{ --cld-bg:#0f172a; --cld-panel:#111827; --cld-text:#e5e7eb; --cld-muted:#9ca3af; --cld-ring:rgba(255,255,255,.08); }

.cld-reactions__title{ color:var(--cld-muted); text-align:center; font-weight:700; margin:6px 0 18px; font-size:18px; }
.cld-reactions__bar{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:8px 0 6px; padding:0; }
.cld-reactions__item{ display:grid; grid-template-rows:auto auto; justify-items:center; gap:6px; min-width:60px; }
.cld-reactions__btn{
  width:48px; height:48px; border:none; border-radius:50%;
  background:var(--cld-panel) center/48px 48px no-repeat;
  box-shadow:0 0 0 2px var(--cld-ring) inset;
  cursor:pointer; transition: transform .1s ease, box-shadow .2s ease;
}
.cld-reactions__btn:hover{ transform:translateY(-2px); }
.cld-reactions__btn:active{ transform:scale(.97); }
.cld-reactions__btn.is-selected{ box-shadow:0 0 0 2px rgba(138, 60, 19,.5) inset; }
.cld-reactions__meta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cld-muted); }
.cld-reactions__label{ font-weight:600; }
.cld-reactions__count{ padding:2px 6px; border-radius:999px; background:var(--cld-panel); min-width:1.5em; display:inline-block; text-align:center; }
.cld-reactions__total{ text-align:center; margin-top:10px; font-size:14px; line-height:1.4; color:var(--cld-muted); font-weight:600; }

/* Icon mapping */
.cld-reactions__btn[data-reaction="upvote"]{ background-image:url("./emoji/up.png"); }
.cld-reactions__btn[data-reaction="funny"]{ background-image:url("./emoji/fun.png"); }
.cld-reactions__btn[data-reaction="love"]{ background-image:url("./emoji/love.png"); }
.cld-reactions__btn[data-reaction="surprised"]{ background-image:url("./emoji/wow.png"); }
.cld-reactions__btn[data-reaction="angry"]{ background-image:url("./emoji/ang.png"); }
.cld-reactions__btn[data-reaction="sad"]{ background-image:url("./emoji/sad.png"); }

@media (max-width:420px){
  .cld-reactions__bar{ gap:16px; }
  .cld-reactions__item{ min-width:auto; }
}

/* spacing/clear to keep form in right place */
.cld-reactions{ margin-bottom:14px; clear:both; }
.comment-respond{ margin-top:12px; }



/* ---- HILANGKAN Balas bawaan WP ---- */
#comments a.comment-reply-link,
.comment-list a.comment-reply-link { display: none !important; }

/* ---- VARIABEL WARNA ---- */





/* ---- BAR AKSI (JS kamu bikin .cld-actions & .cld-reply) ---- */
.cld-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.cld-actions-left{ display:flex; align-items:center; gap:10px; }
.cld-actions-right{ display:flex; align-items:center; }

/* ---- TOMBOL BALAS KUSTOM (.cld-reply) ---- */
.cld-actions-right .cld-reply{
  --_py: 6px; --_px: 12px;
  display:inline-flex; align-items:center; gap:8px;
  padding: var(--_py) var(--_px);
  min-height: 32px;
  border:1px solid var(--cld-bg)!important;
  border-radius:9999px;
  background: transparent !important;
  color: var(--cld-bg) !important;
  font: 600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}

/* ikon kecil otomatis (tidak perlu ubah HTML) */
.cld-actions-right .cld-reply::before{
  content:"↩";
  font-size:16px; line-height:1; translate:0 -1px; opacity:.9;
}

/* HOVER/FOCUS → TEKS PUTIH, tanpa kapsul coklat dari tema */
.cld-actions-right .cld-reply:hover,
.cld-actions-right .cld-reply:focus{
  color:floralwhite !important;
  background: var(--cld-accent) !important;
  border-color: var(--reply-border) !important;
  text-decoration:none;
}
.cld-actions-right .cld-reply:focus-visible{
  outline:0; box-shadow:0 0 0 3px var(--reply-ring);
}
.cld-actions-right .cld-reply:active{ transform: translateY(1px); }

/* NETRALKAN gaya tema yang memaksakan kapsul/bayangan */
.cld-actions-right .cld-reply{
  background-clip: padding-box !important;
  box-shadow: none !important;
}

/* Like/Dislike tetap ramping */
.cld-wrap{ display:inline-flex; align-items:center; gap:8px; }
.cld-btn, .cld-btn *{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.cld-btn{ display:inline-flex; align-items:center; gap:6px; padding:0; margin:0; color:var(--reply-fg); font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; cursor:pointer; }
.cld-btn:hover,.cld-btn:focus{ color:var(--reply-fg-hover); }
.cld-btn .cld-count{ font-size:13px; line-height:1; opacity:.8; }







/* ===== Variabel dasar (default = terang) ===== */
:root{
  --comment-card-bg: #fff;
  --comment-card-fg: #222;
  --comment-card-border: rgba(138, 60, 19, 0.1);
}

/* ===== Mode Gelap (berdasarkan kelas pada <html> / <body>) ===== */
:is(html.dark, html.theme-dark, html[data-theme="dark"],
    body.is-dark-theme, body.dark, body.theme-dark, body[data-theme="dark"], body.lightmode.black, body.black){
  --comment-card-bg:#343434 !important;
  --comment-card-fg:#E4E4E7 !important;
  --comment-card-border:rgba(138, 60, 19, 0.1) !important;
}

/* ===== Terapkan ke kartu komentar ===== */
:is(#comments, .comments-area)
:is(.comment-list>li.comment, .commentlist>li.comment, li.comment){
  background:var(--comment-card-bg) !important;
  color:var(--comment-card-fg) !important;
  border:1px solid var(--comment-card-border) !important;
  border-radius:8px;
}

/* Anak & wrapper ikut warna induknya */
:is(.comment-list>li.comment, .commentlist>li.comment, li.comment)
:is(.comment-body, .children>li.comment){
  background:inherit !important;
  color:inherit !important;
  border-color:inherit !important;
}






/* Reset tampilan field */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{
  appearance: none;
  width: 100%;
  background: var(--cf-bg);
  color: var(--cf-bd);
  border: 1px solid var(--comment-card-border);
  border-radius: 25px;
  padding: 15px 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

/* Tinggi textarea nyaman */
.comment-form textarea{ min-height: 120px; resize: vertical; }

/* Placeholder */
.comment-form ::placeholder{ color: var(--cf-ph); opacity: 1; }


/* Label minimalis */
.comment-form label{
  display: block;
  margin: 8px 0 6px;
  font: 600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--cf-fg);
  opacity: .85;
}

/* Grid 2 kolom utk Nama & Email pada layar >= 640px */
.comment-form-author, .comment-form-email{ width:100%; }
@media (min-width: 640px){
  .comment-form-author, .comment-form-email{
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }
  .comment-form-email{ margin-left: 16px; }
}

/* Spasi antar blok */
.comment-form > p{ margin: 12px 0; }




/* ===== Emoji picker (kolom komentar) ===== */
.cld-emoji{ position:relative; margin-top:8px; }
.cld-emoji__toggle{
  --accent: var(--cld-accent, #8a3c14);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:9999px;
  border:1px solid var(--cf-bd); background:var(--cf-bg); color:var(--cf-fg);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.cld-emoji__toggle:hover{ border-color: var(--cf-bd-hover); }
.cld-emoji__panel{
  position:absolute; z-index:100; inset-inline-start:0; margin-top:8px;
  padding:8px; border-radius:12px; min-width:220px;
  background:#343434; border:1px solid var(--cf-bd);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:grid; grid-template-columns: repeat(10, 28px); gap:6px;
}
@media (max-width:480px){
  .cld-emoji__panel{ grid-template-columns: repeat(8, 28px); }
}
.cld-emoji__item{
  width:28px; height:28px; line-height:28px; text-align:center;
  border:0; border-radius:6px; background:transparent; cursor:pointer;
  transition: background .1s ease, transform .06s ease;
}
.cld-emoji__item:hover{ background:rgba(0,0,0,.05); }
body.darkmode .cld-emoji__item:hover{ background:rgba(255,255,255,.08); }
.cld-emoji__item:active{ transform: translateY(1px); }
.cld-emoji__panel[hidden]{
  display: none !important;
}




/* Toolbar sejajar */
.cld-tools{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* Bikin .cld-emoji dan .cld-upload tampil inline */
.cld-emoji{ position:relative; }
.cld-upload{ position:relative; }

/* Tombol emoji sudah ada; cukup kecilkan padding agar serasi */
.cld-emoji__toggle{
  padding:6px 10px;
}

/* Ikon upload (tanpa teks) */
.cld-upload--icon .cld-upload__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9999px; cursor:pointer;
  border:1px solid var(--cf-bd); background:var(--cf-bg); color:var(--cf-fg);
  font-size:16px; line-height:1;
}
.cld-upload--icon .cld-upload__icon:hover{ border-color: var(--cf-bd-hover); }
.cld-upload--icon .cld-upload__icon:focus-visible{
  outline:0; box-shadow:0 0 0 3px var(--reply-ring);
}

/* Preview */
.cld-upload__preview{ position:relative; display:inline-block; margin-top:8px; }
.cld-upload__preview img{
  max-width: 180px; height:auto; border-radius:10px; border:1px solid var(--cf-bd); display:block;
}
.cld-upload__clear{
  position:absolute; top:4px; right:4px;
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; line-height:26px; font-weight:700;
}

/* Tetap sembunyikan panel emoji sebelum diklik */
.cld-emoji__panel[hidden]{ display:none !important; }




/* 1) Bikin emoji & upload sejajar rapi */
.cld-tools{ display:flex; align-items:center; gap:8px; margin-top:8px; }
/* buang margin atas khusus saat di toolbar */
.cld-tools .cld-emoji{ margin-top:0; }

/* 2) Sembunyikan preview (dan tombol X di dalamnya) sampai ada file */
.cld-upload__preview[hidden]{ display:none !important; }

/* (opsional) Kalau masih meleset di tema tertentu, paksa tinggi tombol sama */
.cld-emoji__toggle,
.cld-upload--icon .cld-upload__icon{ min-width:34px; height:30px; padding:0 10px; }




/* Bar tools: top-align biar emoji tak turun saat preview tinggi */
.cld-tools{ display:flex; align-items:flex-start; gap:8px; margin-top:8px; }

/* Hapus margin atas bawaan emoji saat dipakai di toolbar */
.cld-tools .cld-emoji{ margin-top:0; }

/* Preview disembunyikan sampai ada file */
.cld-upload__preview[hidden]{ display:none !important; }

/* Bikin preview turun ke BARIS BAWAH ikon */
.cld-upload__preview{ display:block; margin-top:8px; }

/* (opsional) Batasi ukuran preview supaya tidak menonjol terlalu besar) */
.cld-upload__preview img{ max-width:260px; max-height:260px; object-fit:contain; }



/* ===== Comment Sort Bar ===== */
.cld-sortbar{
  display:flex; align-items:center; gap:8px;
  margin:10px 0 14px; padding:8px 10px;
  border:2px solid var(--comment-card-border); border-radius:18px;
  background:var(--comment-card-bg); color:var(--cf-bd);
}
.cld-sort__select{
  appearance:none; padding:8px 12px; border-radius:9999px;
  border:1px solid var(--cld-accent); background:var(--cf-bd); color:var(--cf-bd);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}
.cld-sort__select:focus{ outline:0; box-shadow:0 0 0 3px var(--cld-ring, rgba(0,0,0,.06)); }









/* Container: lebar fleksibel, ada batas maksimal */
.cld-comment-image-wrap{
  width: 100%;
  max-width: 300px;   /* ubah sesuai selera */
  margin-top: 8px;
  overflow: visible;  /* boleh visible karena kita tidak membatasi tinggi */
}

/* Kalau dibungkus <a>, buat block agar ikut lebar container */
.cld-comment-image-wrap a{ display: block; }

/* Gambar: lebar responsif, tinggi otomatis mengikuti rasio */
#comments .cld-comment-image{
  display: block;
  width: 100%;
  height: auto;
  max-height: none;   /* penting: meniadakan batas tinggi sebelumnya */
  border-radius: 10px;
}







/* === Posisi tombol dalam textarea + gaya tombol proxy === */
.comment-form .cld-inputwrap{
  position: relative;
  --cld-space-x: 2px;    /* geser lebih ke kiri (ruang kanan lebih besar) */
  --cld-space-y: 8px;   /* geser lebih ke atas (ruang bawah lebih besar) */
}
.comment-form .cld-inputwrap > textarea#comment{
  padding-right: var(--cld-space-x);
  padding-bottom: var(--cld-space-y);
}

/* wadah tombol di pojok kanan-bawah */
.comment-form .cld-inputwrap > .cld-infield{
  position: absolute;
  right: 22px;    /* geser mendekati/menjauhi tepi kanan */
  bottom: 2px;    /* geser mendekati/menjauhi tepi bawah */
  display: flex;
  align-items: center;
  gap: 1px;
  z-index: 1;
}

/* ukuran tombol biar sejajar */
.comment-form .cld-infield .cld-emoji__toggle,
.comment-form .cld-infield .cld-infield__upload{
  width: 34px; height: 34px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cf-bd); background: var(--cf-bg); color: var(--cf-fg);
  padding: 0 10px; line-height: 1; cursor: pointer;
}

/* panel emoji muncul ke atas dari tombolnya */
.comment-form .cld-infield .cld-emoji{ position: relative; }
.comment-form .cld-infield .cld-emoji__panel{
  position: absolute; right: 0; bottom: calc(100% + 8px);
}

/* preview gambar: tetap di BAWAH toolbar asli */
.cld-tools .cld-upload__preview{ display:block; margin-top:8px; }
.cld-tools .cld-upload__preview[hidden]{ display:none !important; }
.cld-tools .cld-upload.is-proxied .cld-upload__icon{
  display: none !important;
}








/* Panel emoji dipindah ke <body> ketika terbuka */
.cld-emoji-portal{
  position: fixed !important;
  z-index: 999999 !important;
  /* biar tampilan tetap konsisten */
  transform: none !important;
}






/* Posisi tombol dalam textarea (bisa geser X/Y terpisah) */
.comment-form .cld-inputwrap{
  position: relative;
  --cld-offset-x: 12px;   /* jarak dari tepi kanan (X) */
  --cld-offset-y: 10px;   /* jarak dari tepi bawah (Y)  */
  --cld-space-x: 88px;    /* ruang kosong di kanan isi textarea */
  --cld-space-y: 44px;    /* ruang kosong di bawah isi textarea */
}

.comment-form .cld-inputwrap > textarea#comment{
  padding-right: var(--cld-space-x);
  padding-bottom: var(--cld-space-y);
}

.comment-form .cld-inputwrap > .cld-infield{
  position: absolute;
  right: var(--cld-offset-x);   /* ← geser kanan–kiri di sini */
  bottom: var(--cld-offset-y);  /* ← geser atas–bawah di sini */
  display: flex;
  align-items: center;
  gap: 6px;                     /* jarak antar tombol */
  z-index: 5;
}


/* Ratakan & rapatkan tombol dalam .cld-infield */
.comment-form .cld-infield .cld-emoji,
.comment-form .cld-infield .cld-emoji__toggle,
.comment-form .cld-infield .cld-upload--icon,
.comment-form .cld-infield .cld-infield__upload{
  margin: 0 !important;               /* hapus margin bawaan tema */
}

/* Samakan ukuran kedua tombol */
.comment-form .cld-infield .cld-emoji__toggle,
.comment-form .cld-infield .cld-infield__upload,
.comment-form .cld-infield .cld-upload--icon .cld-upload__icon{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; border-radius: 9999px;
}

/* Pastikan jarak antar tombol benar-benar pakai gap (bukan margin tersembunyi) */
.comment-form .cld-infield{ gap: 1px !important; }  /* ubah 1–6px sesuai selera */






/* Pastikan banner reply nyaman tepat di bawah textarea */
#respond .cld-replying{
  margin-top: 8px;
  display: none;                 /* default hidden */
}
#respond .cld-replying.show{
  display: flex;                 /* saat JS menambahkan .show */
}