/* ============================================
   section-8-komentar.css — Section 09_Komentar
   Based on Figma frame: 09_Komentar (393 x 782)
   ============================================ */

/* --- Section Wrapper --- */
#section-8-komentar {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--s8-bg-color);
  overflow-x: hidden;
  overflow-y: visible;
}

/* --- Scale Box Container --- */
.section-8-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Mobile Preview Container --- */
.section-8-wrapper {
  position: relative;
  width: var(--s8-width);
  height: var(--s8-height);
  background-color: var(--s8-bg-color);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ============================================
   ELEMENTS
   ============================================ */

/* Judul */
.s8-judul {
  position: absolute;
  left: var(--s8-judul-x);
  top: var(--s8-judul-y);
  width: var(--s8-judul-width);
  height: var(--s8-judul-height);
  font-family: var(--s8-judul-font-family);
  font-size: var(--s8-judul-font-size);
  color: var(--s8-judul-color);
  z-index: var(--s8-judul-z);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon 8 */
.s8-icon-8 {
  position: absolute;
  left: var(--s8-icon-8-x);
  top: var(--s8-icon-8-y);
  width: var(--s8-icon-8-width);
  height: var(--s8-icon-8-height);
  opacity: var(--s8-icon-8-opacity);
  z-index: var(--s8-icon-8-z);
  pointer-events: none;
}
.s8-icon-8 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Textarea ucapan */
.s8-comment-textarea {
  position: absolute;
  left: var(--s8-textarea-x);
  top: var(--s8-textarea-y);
  width: var(--s8-textarea-width);
  height: var(--s8-textarea-height);
  border-radius: var(--s8-textarea-border-radius);
  font-family: var(--s8-textarea-font-family);
  font-size: var(--s8-textarea-font-size);
  color: #4a3010;
  z-index: var(--s8-textarea-z);
  background-color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid #c5a46e;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  line-height: 1.5;
}
.s8-comment-textarea::placeholder {
  color: var(--s8-textarea-placeholder-color);
  font-family: var(--s8-textarea-font-family);
  font-size: var(--s8-textarea-font-size);
}
.s8-comment-textarea:focus {
  border-color: #865816;
  background-color: rgba(255, 255, 255, 0.92);
}

/* Input nama */
.s8-name-input {
  position: absolute;
  left: var(--s8-input-name-x);
  top: var(--s8-input-name-y);
  width: var(--s8-input-name-width);
  height: var(--s8-input-name-height);
  border-radius: var(--s8-input-name-border-radius);
  font-family: var(--s8-input-name-font-family);
  font-size: var(--s8-input-name-font-size);
  color: #4a3010;
  z-index: var(--s8-input-name-z);
  background-color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid #c5a46e;
  padding: 0 12px;
  box-sizing: border-box;
  outline: none;
}
.s8-name-input::placeholder {
  color: var(--s8-input-name-placeholder-color);
  font-family: var(--s8-input-name-font-family);
  font-size: var(--s8-input-name-font-size);
}
.s8-name-input:focus {
  border-color: #865816;
  background-color: rgba(255, 255, 255, 0.92);
}

/* Tombol Kirim */
.s8-btn-kirim {
  position: absolute;
  left: var(--s8-btn-kirim-x);
  top: var(--s8-btn-kirim-y);
  width: var(--s8-btn-kirim-width);
  height: var(--s8-btn-kirim-height);
  border-radius: var(--s8-btn-kirim-border-radius);
  background-color: var(--s8-btn-kirim-bg);
  color: var(--s8-btn-kirim-color);
  font-family: var(--s8-btn-kirim-font-family);
  font-size: var(--s8-btn-kirim-font-size);
  z-index: var(--s8-btn-kirim-z);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.s8-btn-kirim:hover {
  opacity: 0.85;
}
.s8-btn-kirim:active {
  opacity: 0.7;
}

/* Tombol Hadir */
.s8-btn-hadir {
  position: absolute;
  left: var(--s8-btn-hadir-x);
  top: var(--s8-btn-hadir-y);
  width: var(--s8-btn-hadir-width);
  height: var(--s8-btn-hadir-height);
  border-radius: var(--s8-btn-hadir-border-radius);
  background-color: var(--s8-btn-hadir-bg);
  color: var(--s8-btn-hadir-color);
  font-family: var(--s8-btn-hadir-font-family);
  font-size: var(--s8-btn-hadir-font-size);
  z-index: var(--s8-btn-hadir-z);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.s8-btn-hadir:hover {
  opacity: 0.85;
}
.s8-btn-hadir.is-selected {
  box-shadow: 0 0 0 2px #865816;
  font-weight: 700;
}

/* Tombol Tidak Hadir */
.s8-btn-tidak-hadir {
  position: absolute;
  left: var(--s8-btn-tidak-hadir-x);
  top: var(--s8-btn-tidak-hadir-y);
  width: var(--s8-btn-tidak-hadir-width);
  height: var(--s8-btn-tidak-hadir-height);
  border-radius: var(--s8-btn-tidak-hadir-border-radius);
  background-color: var(--s8-btn-tidak-hadir-bg);
  color: var(--s8-btn-tidak-hadir-color);
  font-family: var(--s8-btn-tidak-hadir-font-family);
  font-size: var(--s8-btn-tidak-hadir-font-size);
  z-index: var(--s8-btn-tidak-hadir-z);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.s8-btn-tidak-hadir:hover {
  opacity: 0.85;
}
.s8-btn-tidak-hadir.is-selected {
  box-shadow: 0 0 0 2px #865816;
  font-weight: 700;
}

/* Comments Wrapper — area scrollable daftar komentar */
.s8-comments-wrapper {
  position: absolute;
  left: var(--s8-comments-wrapper-x);
  top: var(--s8-comments-wrapper-y);
  width: var(--s8-comments-wrapper-width);
  max-height: var(--s8-comments-wrapper-height);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--s8-comment-card-gap);
  z-index: 2;
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #c5a46e transparent;
}
.s8-comments-wrapper::-webkit-scrollbar {
  width: 4px;
}
.s8-comments-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.s8-comments-wrapper::-webkit-scrollbar-thumb {
  background-color: #c5a46e;
  border-radius: 4px;
}

/* Comment Card — dynamic height */
.s8-comment-card {
  width: 100%;
  height: auto;
  min-height: var(--s8-comment-card-min-height);
  background-color: var(--s8-comment-card-bg);
  border-radius: var(--s8-comment-card-border-radius);
  padding: var(--s8-comment-card-padding-y) var(--s8-comment-card-padding-x);
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
}

/* Header card: nama + waktu */
.s8-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.s8-comment-name {
  font-family: var(--s8-comment-name-font-family);
  font-size: var(--s8-comment-name-font-size);
  color: var(--s8-comment-name-color);
  font-weight: 400;
}

.s8-comment-time {
  font-family: var(--s8-comment-time-font-family);
  font-size: var(--s8-comment-time-font-size);
  color: var(--s8-comment-time-color);
  flex-shrink: 0;
}

/* Isi komentar — dynamic wrap */
.s8-comment-message {
  font-family: var(--s8-comment-msg-font-family);
  font-size: var(--s8-comment-msg-font-size);
  color: var(--s8-comment-msg-color);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Teks Penutup */
.s8-teks-penutup {
  position: absolute;
  left: var(--s8-teks-penutup-x);
  top: var(--s8-teks-penutup-y);
  width: var(--s8-teks-penutup-width);
  height: var(--s8-teks-penutup-height);
  font-family: var(--s8-teks-penutup-font-family);
  font-size: var(--s8-teks-penutup-font-size);
  color: var(--s8-teks-penutup-color);
  z-index: var(--s8-teks-penutup-z);
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

/* Teks U | I */
.s8-teks-ui {
  position: absolute;
  left: var(--s8-teks-ui-x);
  top: var(--s8-teks-ui-y);
  width: var(--s8-teks-ui-width);
  height: var(--s8-teks-ui-height);
  font-family: var(--s8-teks-ui-font-family);
  font-size: var(--s8-teks-ui-font-size);
  color: var(--s8-teks-ui-color);
  z-index: var(--s8-teks-ui-z);
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   TOAST FEEDBACK
   ============================================ */
.s8-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #490000;
  color: #fdf5ea;
  font-family: 'Noto Serif', serif;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.s8-toast.is-visible {
  opacity: 1;
  visibility: visible;
}