/* ============================================================
   ULASAN PENGGUNA — bintang, formulir (Dashboard), ringkasan & kartu ulasan (Beranda), tabel moderasi (Admin)
   Dimuat oleh dashboard.html, index.html, dan admin/ulasan.html. Semua warna memakai token tema
   (ikut mode gelap) dan semua tata letak berlaku di desktop maupun ponsel.
   ============================================================ */
.fb-scope {
  --fb-gold: var(--gold-medium, #E6A817);
  --fb-empty: var(--border, #D1D5DB);
}

/* ---- Bintang tampilan (baca saja). --v = nilai 0..5, boleh pecahan (mis. 4.6) ---- */
.fb-rate {
  --v: 0;
  position: relative; display: inline-block; flex-shrink: 0;
  width: max-content;                                       /* jangan ikut direntangkan flex/grid: isi bintang dihitung dari lebar elemen ini */
  font-size: 18px; letter-spacing: 2px; line-height: 1; white-space: nowrap;
  font-family: Arial, 'Segoe UI Symbol', sans-serif;      /* bentuk bintang konsisten di semua perangkat */
}
.fb-rate::before { content: '\2605\2605\2605\2605\2605'; color: var(--fb-empty, #D1D5DB); }
.fb-rate::after {
  content: '\2605\2605\2605\2605\2605'; color: var(--fb-gold, #E6A817);
  position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
  width: calc(var(--v) / 5 * 100%);
}
.fb-rate--lg { font-size: 26px; }
.fb-rate--sm { font-size: 14px; letter-spacing: 1px; }

/* ---- Formulir di Dashboard pengguna ---- */
.fb-card { scroll-margin-top: 80px; }
.fb-card[hidden], .fb-scope [hidden] { display: none !important; }
.fb-intro { font-size: var(--font-size-sm, 14px); color: var(--text-muted); margin: 0 0 var(--space-4, 16px); line-height: 1.6; }
.fb-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-bottom: var(--space-4, 16px);
  border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-section); color: var(--text-muted); border: 1px solid var(--border);
}
.fb-state.is-ok   { background: var(--success-bg, #ECFDF5); color: var(--success-text, #065F46); border-color: var(--success, #10B981); }
.fb-state.is-wait { background: var(--warning-bg, #FFFBEB); color: var(--warning-text, #92400E); border-color: var(--warning, #F59E0B); }
.fb-field { margin-bottom: var(--space-4, 16px); }
.fb-label { display: block; font-size: var(--font-size-sm, 14px); font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.fb-hint  { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }

.fb-stars-input { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.fb-stars-row { display: inline-flex; gap: 2px; }
.fb-star {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0;
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 38px; line-height: 1; cursor: pointer; border-radius: 10px;
  font-family: Arial, 'Segoe UI Symbol', sans-serif;
  color: var(--fb-empty, #D1D5DB); transition: transform .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fb-star.is-on { color: var(--fb-gold, #E6A817); }
.fb-star:hover { transform: scale(1.12); }
.fb-star:focus-visible { outline: 3px solid var(--fb-gold, #E6A817); outline-offset: 1px; }
.fb-rating-text { font-size: var(--font-size-sm, 14px); font-weight: 600; color: var(--gold-dark, #B8860B); min-height: 1.4em; }

.fb-textarea {
  width: 100%; min-height: 96px; padding: 10px 12px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  background: var(--bg-white); color: var(--text-dark); font: inherit; font-size: 16px; line-height: 1.55;   /* 16px: iPhone tidak memperbesar layar saat mengetik */
}
.fb-textarea:focus { outline: 2px solid var(--fb-gold, #E6A817); outline-offset: 0; border-color: transparent; }
.fb-count { display: block; text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fb-count.is-max { color: var(--error-text, #B91C1C); font-weight: 700; }
.fb-error { min-height: 1.3em; margin: 0 0 var(--space-3, 12px); font-size: var(--font-size-sm, 14px); font-weight: 600; color: var(--error-text, #B91C1C); }
.fb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.fb-link-danger { background: none; border: 0; padding: 8px 4px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--error-text, #B91C1C); text-decoration: underline; text-underline-offset: 3px; }
.fb-note { font-size: 12px; color: var(--text-muted); margin-top: var(--space-3, 12px); line-height: 1.55; }

/* ---- Beranda: ringkasan + kartu ulasan ---- */
.fb-wrap { max-width: 1100px; margin: 0 auto; }
.fb-summary {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: var(--space-8, 32px); align-items: center;
  background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl, 20px);
  padding: var(--space-6, 24px) var(--space-8, 32px); box-shadow: var(--shadow-card); margin-bottom: var(--space-6, 24px);
}
.fb-avg { text-align: center; }
.fb-avg-num { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--text-dark); }
.fb-avg-num small { font-size: .38em; font-weight: 600; color: var(--text-muted); }
.fb-avg .fb-rate { margin: 10px 0 6px; }
.fb-avg-count { font-size: var(--font-size-sm, 14px); color: var(--text-muted); }
.fb-dist { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-dist-row { display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.fb-dist-row b { color: var(--text-dark); font-weight: 700; }
.fb-bar { height: 8px; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.fb-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-medium, #E6A817), var(--gold-dark, #B8860B)); }
.fb-dist-row span:last-child { text-align: right; }

.fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 20px); }
.fb-review {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl, 20px);
  padding: var(--space-5, 20px); box-shadow: var(--shadow-card);
}
.fb-review-text { margin: 0; flex: 1; font-size: var(--font-size-sm, 14px); line-height: 1.7; color: var(--text-body, var(--text-dark)); overflow-wrap: anywhere; white-space: pre-line; }
.fb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fb-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--gold-medium, #E6A817), var(--gold-dark, #B8860B));
}
.fb-name { font-size: var(--font-size-sm, 14px); font-weight: 700; color: var(--text-dark); overflow-wrap: anywhere; line-height: 1.25; }
.fb-date { font-size: 12px; color: var(--text-muted); }
.fb-more { display: flex; justify-content: center; margin-top: var(--space-6, 24px); }
.fb-cta { text-align: center; margin-top: var(--space-6, 24px); font-size: var(--font-size-sm, 14px); color: var(--text-muted); }
.fb-cta a { color: var(--gold-dark, #B8860B); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Admin: statistik + tabel ---- */
.fb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 16px); margin-bottom: var(--space-5, 20px); }
.fb-stat { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg, 14px); padding: var(--space-4, 16px) var(--space-5, 20px); }
.fb-stat b { display: block; font-size: var(--font-size-2xl, 26px); font-weight: 800; color: var(--text-dark); line-height: 1.1; }
.fb-stat span { font-size: 12px; color: var(--text-muted); }
.fb-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: var(--space-4, 16px); }
.fb-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-white); color: var(--text-body, var(--text-dark));
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.fb-chip.is-active { background: var(--gold-dark, #B8860B); border-color: var(--gold-dark, #B8860B); color: #fff; }
.fb-switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--font-size-sm, 14px); max-width: 520px; }
.fb-switch input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.fb-cell-text { max-width: 340px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.fb-muted { color: var(--text-muted); font-style: italic; }

/* ---- Tema gelap ---- */
[data-theme="dark"] .fb-avatar { color: #1b1407; }
[data-theme="dark"] .fb-chip.is-active { color: #1b1407; }
[data-theme="dark"] .fb-state.is-ok { color: #6EE7B7; background: rgba(16, 185, 129, .14); }
[data-theme="dark"] .fb-state.is-wait { color: #FCD34D; background: rgba(245, 158, 11, .14); }
[data-theme="dark"] .fb-error, [data-theme="dark"] .fb-link-danger { color: #FCA5A5; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .fb-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ---- Ponsel ---- */
@media (max-width: 640px) {
  .fb-summary { grid-template-columns: 1fr; gap: var(--space-5, 20px); padding: var(--space-5, 20px); }
  .fb-grid { grid-template-columns: 1fr; }
  .fb-star { width: 52px; height: 52px; font-size: 42px; }            /* target sentuh >= 44px */
  .fb-stars-row { width: 100%; justify-content: space-between; max-width: 300px; }
  .fb-actions .btn { width: 100%; justify-content: center; }
  .fb-actions { flex-direction: column; align-items: stretch; }
  .fb-link-danger { align-self: center; }
  .fb-stats { gap: var(--space-3, 12px); }
  .fb-switch { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fb-star { transition: none; } .fb-star:hover { transform: none; } }
@media print { .fb-card { display: none !important; } }

/* ============================================================
   JENDELA ULASAN "DATA PERTAMA" — muncul sekali, setelah pengguna pertama kali berhasil menambah data
   Desktop: kartu di tengah. Ponsel: lembar yang naik dari bawah. Animasi mati otomatis pada mode "kurangi gerakan".
   ============================================================ */
html.fb-pop-lock { overflow: hidden; }
.fb-pop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fb-pop-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .35s ease; }
.fb-pop.is-open .fb-pop-backdrop { opacity: 1; }
.fb-pop.is-closing .fb-pop-backdrop { opacity: 0; }
.fb-pop-card { --fbp: 26px; --fbb: 22px; position: relative; width: min(520px, 100%); max-height: min(94vh, 800px); overflow-x: hidden; overflow-y: auto; background: var(--bg-white, #fff); color: var(--text-dark, #111827); border: 1px solid var(--border, #E5E7EB); border-radius: 26px; padding: 30px var(--fbp) var(--fbb); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); opacity: 0; transform: translateY(44px) scale(.9); }
.fb-pop-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #F59E0B, #FACC15, #F472B6, #38BDF8, #34D399, #F59E0B); background-size: 300% 100%; animation: fb-rainbow 5s linear infinite; }
.fb-pop.is-open .fb-pop-card { animation: fb-card-in .62s cubic-bezier(.2, 1.15, .3, 1) both; }
.fb-pop.is-closing .fb-pop-card { animation: fb-card-out .26s ease both; }
.fb-pop-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-section, #F3F4F6); color: var(--text-dark, #111827); font-size: 14px; cursor: pointer; z-index: 2; transition: transform .2s, background .2s; }
.fb-pop-x:hover { transform: rotate(90deg); background: var(--border, #E5E7EB); }
.fb-pop-burst { position: absolute; left: 50%; top: 78px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fb-conf { position: absolute; left: 0; top: 0; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: fb-burst 1.7s cubic-bezier(.12, .75, .3, 1) forwards; }

.fb-pop-hero { text-align: center; margin-bottom: 14px; }
.fb-pop-check { position: relative; width: 76px; height: 76px; margin: 0 auto 10px; }
.fb-pop-check.big { width: 100px; height: 100px; }
.fb-pop-check svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fb-pop-check .c { fill: rgba(250, 204, 21, .18); stroke: var(--fb-gold, #E6A817); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; }
.fb-pop-check .t { fill: none; stroke: var(--gold-dark, #B8860B); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 42; stroke-dashoffset: 42; }
.fb-pop.is-open .fb-pop-hero .fb-pop-check .c { animation: fb-draw .7s .3s ease forwards; }
.fb-pop.is-open .fb-pop-hero .fb-pop-check .t { animation: fb-draw .5s .85s ease forwards; }
.fb-thanks:not([hidden]) .fb-pop-check .c { animation: fb-draw .7s .1s ease forwards; }
.fb-thanks:not([hidden]) .fb-pop-check .t { animation: fb-draw .5s .65s ease forwards; }
.fb-pop-check::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--fb-gold, #E6A817); opacity: 0; }
.fb-pop.is-open .fb-pop-hero .fb-pop-check::after { animation: fb-ring 1.2s .9s ease-out 2; }
.fb-pop-hero h3 { margin: 4px 0 6px; font-size: clamp(1.15rem, 4.4vw, 1.45rem); color: var(--text-dark, #111827); opacity: 0; }
.fb-pop-hero p { margin: 0; color: var(--text-muted, #6B7280); font-size: var(--font-size-sm, 14px); line-height: 1.6; opacity: 0; }
.fb-pop.is-open .fb-pop-hero h3 { animation: fb-up .5s .5s ease both; }
.fb-pop.is-open .fb-pop-hero p { animation: fb-up .5s .65s ease both; }

.fb-pop .fb-stars-row { gap: 4px; }
.fb-pop .fb-star { width: 52px; height: 52px; font-size: 44px; }       /* tampil secara bawaan; efek masuk memakai animasi 'both' sehingga bintang terpilih tidak ikut hilang */
.fb-pop.is-open .fb-star { animation: fb-star-in .5s cubic-bezier(.2, 1.4, .3, 1) both; }
.fb-pop.is-open .fb-star:nth-child(1) { animation-delay: .75s; } .fb-pop.is-open .fb-star:nth-child(2) { animation-delay: .83s; } .fb-pop.is-open .fb-star:nth-child(3) { animation-delay: .91s; }
.fb-pop.is-open .fb-star:nth-child(4) { animation-delay: .99s; } .fb-pop.is-open .fb-star:nth-child(5) { animation-delay: 1.07s; }
.fb-pop .fb-star.is-on { animation: fb-star-pick .45s cubic-bezier(.2, 1.4, .3, 1) both; opacity: 1; text-shadow: 0 0 14px rgba(250, 204, 21, .75); }
.fb-pop .fb-stars-input { justify-content: center; flex-direction: column; gap: 4px; }
#fb-rating-label { display: block; text-align: center; }
.fb-pop .fb-rating-text { color: var(--text-dark, #111827); font-weight: 800; font-size: 15px; min-height: 1.5em; }

.fb-more { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .5s ease, opacity .4s ease, visibility 0s .5s; }
.fb-more.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.fb-more-in { overflow: hidden; min-height: 0; }
.fb-more.open .fb-more-in { padding-top: 4px; }
.fb-pop .fb-textarea { min-height: 70px; }
.fb-pop .fb-field { margin-bottom: 10px; }
.fb-pop .fb-actions { justify-content: center; position: sticky; bottom: calc(var(--fbb) * -1); z-index: 2; margin: 6px calc(var(--fbp) * -1) 0; padding: 12px var(--fbp); background: var(--bg-white, #fff); border-top: 1px solid var(--border, #E5E7EB); }   /* tombol Kirim selalu terlihat walau isian panjang */
.fb-pop .fb-actions .btn { min-width: 180px; }
.fb-skip { background: none; border: 0; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-muted, #6B7280); cursor: pointer; border-radius: 10px; }
.fb-skip:hover { color: var(--text-dark, #111827); background: var(--bg-section, #F3F4F6); }
.fb-pop .fb-note { text-align: center; }
.fb-thanks { text-align: center; padding: 22px 0 12px; }
.fb-thanks h3 { margin: 10px 0 4px; font-size: 1.4rem; color: var(--text-dark, #111827); animation: fb-up .5s .5s ease both; }
.fb-thanks p { margin: 0; color: var(--text-muted, #6B7280); animation: fb-up .5s .65s ease both; }

@keyframes fb-card-in { from { opacity: 0; transform: translateY(44px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fb-card-out { to { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes fb-sheet-in { from { opacity: 1; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes fb-sheet-out { to { opacity: 1; transform: translateY(100%); } }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
@keyframes fb-ring { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fb-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fb-star-in { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes fb-star-pick { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(12deg); } 100% { transform: scale(1); } }
@keyframes fb-rainbow { to { background-position: 300% 0; } }
@keyframes fb-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 130px)) rotate(var(--r)); } }

@media (max-width: 640px) {
  .fb-pop { align-items: flex-end; padding: 0; }
  .fb-pop-card { --fbp: 18px; --fbb: calc(18px + env(safe-area-inset-bottom, 0px)); width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 26px 26px 0 0; padding: 26px var(--fbp) var(--fbb); transform: translateY(100%); opacity: 1; }
  .fb-pop.is-open .fb-pop-card { animation: fb-sheet-in .5s cubic-bezier(.2, .9, .3, 1) both; }
  .fb-pop.is-closing .fb-pop-card { animation: fb-sheet-out .26s ease both; }
  .fb-pop .fb-star { width: 54px; height: 54px; }
  .fb-pop .fb-actions { flex-direction: column; align-items: stretch; }
  .fb-pop .fb-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-pop-card, .fb-pop-card::before, .fb-pop *, .fb-more { animation: none !important; transition: none !important; }
  .fb-pop.is-open .fb-pop-card { opacity: 1; transform: none; }
  .fb-pop .fb-star, .fb-pop-hero h3, .fb-pop-hero p { opacity: 1; transform: none; }
  .fb-pop-check .c, .fb-pop-check .t { stroke-dashoffset: 0; }
}