.dr-wrap {
	--dr-teal: #0f6e6a;
	--dr-teal-dark: #0a4f4c;
	--dr-gold: #d4af37;
	--dr-gray-bg: #f7f8f8;
	--dr-border: #e3e6e6;
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: #2c2c2c;
	box-sizing: border-box;
}
.dr-wrap * { box-sizing: border-box; }

/* ===== FORM ===== */
.dr-form { background: #fff; border: 1px solid var(--dr-border); border-radius: 12px; padding: 28px; }
.dr-field { margin-bottom: 20px; }
.dr-field label:not(.dr-star-rating label) { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: var(--dr-teal-dark); }
.dr-label-main { font-size: 15px; }
.dr-req { color: #c0392b; }
.dr-field input[type="text"],
.dr-field select,
.dr-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--dr-border); border-radius: 8px;
	font-size: 14px; font-family: inherit; background: #fff;
}
.dr-field input:focus, .dr-field select:focus, .dr-field textarea:focus {
	outline: none; border-color: var(--dr-teal);
}
.dr-radio-group { display: flex; gap: 24px; }
.dr-radio-group label { font-weight: 400 !important; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dr-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.dr-field-row .dr-field { flex: 1; min-width: 200px; }
.dr-hp { position: absolute; left: -9999px; top: -9999px; }

/* star rating input widget */
.dr-star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.dr-star-rating input { display: none; }
.dr-star-rating label {
	font-size: 30px; line-height: 1; color: #ddd; cursor: pointer; transition: color .15s;
}
.dr-star-rating input:checked ~ label,
.dr-star-rating label:hover,
.dr-star-rating label:hover ~ label { color: var(--dr-gold); }

.dr-submit-btn {
	background: var(--dr-teal); color: #fff; border: none; padding: 12px 28px;
	border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.dr-submit-btn:hover { background: var(--dr-teal-dark); }
.dr-submit-btn:disabled { opacity: .6; cursor: default; }

.dr-msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.dr-msg.dr-success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc2; }
.dr-msg.dr-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }

/* ===== DISPLAY / RATING SUMMARY ===== */
.dr-display { max-width: 760px; }
.dr-filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.dr-filter-tabs { display: flex; gap: 8px; }
.dr-tab {
	background: #fff; border: 1px solid var(--dr-border); border-radius: 20px; padding: 7px 18px;
	font-size: 13px; font-weight: 600; cursor: pointer; color: #555;
}
.dr-tab.active { background: var(--dr-teal); border-color: var(--dr-teal); color: #fff; }
.dr-filter-pelatihan {
	padding: 8px 12px; border-radius: 8px; border: 1px solid var(--dr-border); font-size: 13px; background: #fff;
}

.dr-summary-box { background: var(--dr-gray-bg); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.dr-summary { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.dr-summary-score { text-align: center; min-width: 130px; }
.dr-avg-num { font-size: 42px; font-weight: 700; color: var(--dr-teal-dark); line-height: 1; }
.dr-avg-stars { color: var(--dr-gold); font-size: 20px; margin: 6px 0; letter-spacing: 2px; }
.dr-avg-count { font-size: 13px; color: #777; }
.dr-summary-bars { flex: 1; min-width: 220px; }
.dr-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; color: #555; }
.dr-bar-label { width: 34px; }
.dr-bar-track { flex: 1; height: 8px; background: #e3e6e6; border-radius: 4px; overflow: hidden; }
.dr-bar-fill { display: block; height: 100%; background: var(--dr-gold); }
.dr-bar-pct { width: 36px; text-align: right; }
.dr-no-rating { color: #888; font-size: 14px; }

.dr-review-item { border-bottom: 1px solid var(--dr-border); padding: 18px 0; }
.dr-review-item:first-child { padding-top: 0; }
.dr-review-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.dr-review-nama { font-weight: 700; color: var(--dr-teal-dark); }
.dr-review-instansi { font-size: 12px; color: #888; }
.dr-review-tanggal { font-size: 12px; color: #999; margin-left: auto; }
.dr-review-pelatihan { font-size: 13px; color: #555; margin-bottom: 4px; }
.dr-review-stars { color: var(--dr-gold); letter-spacing: 2px; margin-bottom: 6px; }
.dr-static-stars { color: var(--dr-gold); letter-spacing: 2px; }
.dr-review-komentar { font-size: 14px; line-height: 1.6; margin: 0; color: #333; }
.dr-review-saran { font-size: 13px; color: #666; }
.dr-badge-nonpeserta {
	display: inline-block; background: #f1f1f1; color: #666; font-size: 11px; font-weight: 600;
	padding: 2px 10px; border-radius: 10px; margin-bottom: 8px;
}
.dr-no-review { color: #888; font-size: 14px; }

.dr-loadmore-wrap { text-align: center; margin-top: 18px; }
.dr-loadmore-btn {
	background: #fff; border: 1px solid var(--dr-teal); color: var(--dr-teal); padding: 10px 26px;
	border-radius: 8px; font-weight: 600; cursor: pointer;
}
.dr-loadmore-btn:hover { background: var(--dr-teal); color: #fff; }

@media (max-width: 480px) {
	.dr-review-tanggal { margin-left: 0; }
	.dr-filter-bar { flex-direction: column; align-items: stretch; }
}