:root {
--wprt-accent: #d63c2e;
--wprt-star: #ffb400; 
--wprt-muted: #8a8a8a;
--wprt-border: #e9e9e9;
}
.wprt-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; color:#222; }
.wprt-header { text-align:center; margin-bottom: 12px; }
.wprt-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 24px; letter-spacing: .2px; margin: 0; padding: 8px 0; text-shadow: 0 1px 0 rgba(0,0,0,.05); }

.wprt-slider-view { position: relative; padding: 14px; border: 1px dashed #ddd; border-radius: 8px; background: #fff; backdrop-filter: blur(2px); }
.wprt-slider { position: relative; overflow: hidden; min-height: 160px; }
.wprt-slide { display: none; text-align:center; padding: 10px 12px; }
.wprt-slide.active { display: block; }
.wprt-quote { font-style: italic; color:#333; margin:0 0 10px; line-height: 1.5; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wprt-author { margin-top: 6px; font-weight: 600; color:#333; }
.wprt-stars { color: var(--wprt-star); font-size: 18px; letter-spacing: 2px; }
.wprt-stars.small { font-size: 16px; }
.wprt-star { color: #ddd; }
.wprt-star.filled { color: var(--wprt-star); }

.wprt-dots { display:flex; justify-content:center; gap:8px; margin: 10px 0 0; }
.wprt-dot { width:10px; height:10px; border-radius:50%; background:#d7a8a6; border:none; padding:0; cursor:pointer; }
.wprt-dot.active { background: var(--wprt-accent); }

.wprt-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.wprt-show-all, .wprt-back, .wprt-submit {
background: var(--wprt-accent); color:#fff; border:none; border-radius:5px;
padding: 8px 14px; cursor:pointer; font-weight:600;
}
.wprt-back { background:#333; }
.wprt-show-all:hover, .wprt-back:hover, .wprt-submit:hover { filter: brightness(.95); }

.wprt-list-view { margin-top:14px; }
.wprt-list { list-style:none; padding:0; margin:0; }
.wprt-item { border:1px solid var(--wprt-border); border-left: 4px solid var(--wprt-accent); padding:10px 12px; border-radius:6px; background:#fff; margin-bottom:10px; }
.wprt-item-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.wprt-item-name { font-weight:700; }
.wprt-item-date { color: var(--wprt-muted); font-size: 12px; }
.wprt-item-body { color:#333; line-height:1.55; margin-bottom:6px; }

.wprt-pagination { display:flex; justify-content:flex-start; gap:6px; align-items:center; margin: 10px 0; flex-wrap: wrap; }
.wprt-page { border:1px solid var(--wprt-border); background:#fff; color:#333; padding:6px 10px; border-radius:4px; cursor:pointer; }
.wprt-page.active { background: var(--wprt-accent); color:#fff; border-color: var(--wprt-accent); }

.wprt-form { margin-top:14px; border-top:1px solid var(--wprt-border); padding-top:14px;color: #fff; }
.wprt-row { margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.wprt-row input[type="text"], .wprt-row textarea {
width:100%; padding:8px 10px; border:1px solid #dcdcdc; border-radius:4px; font-size:14px;
}
.wprt-rating-input { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wprt-rating-input label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color: #fff;}
.req { color: var(--wprt-accent); }
.wprt-msg { margin-top:8px; font-size:14px; }
.wprt-msg.success { color: #1f7a1f; }
.wprt-msg.error { color: #b00020; }

.wprt-empty { text-align:center; color: var(--wprt-muted); margin: 8px 0; }
.wprt-form h4{color: #fff !important;}
.wprt-row label {
    color: #fff !important;
}
/* Clamp to N lines on slider quotes (N comes from --wprt-lines set inline) */
.wprt-slider-view .wprt-quote.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--wprt-lines, 2);
  height: 4em;
  
  overflow: hidden;
}

/* Basic active slide handling (if not already present) */
.wprt-slider .wprt-slide { display: none; }
.wprt-slider .wprt-slide.active { display: block; }

/* Make the "Show All" link look like a button if it's an <a> */
.wprt-actions .wprt-show-all {
  display: inline-block;
  padding: 10px 16px;
  background: #222;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
/* If we're navigating out, never show the list/modal */
body.wprt-redirecting .wprt-list-view { display: none !important; }
.wprt-actions .wprt-show-all:hover { background: #111; }
@media (min-width: 780px) {
.wprt-title { font-size: 28px; }
.wprt-quote { -webkit-line-clamp: 2; }

}