/*
Path: sml-reviews/assets/css/public.css
Summary: Public styling for review widgets (summary, list, form) with star inputs.
*/
.smlr-alert { padding: 10px 12px; border: 1px solid #e5e5e5; background: #fafafa; border-radius: 8px; margin: 12px 0; }
.smlr-alert--error { border-color: #d63638; background: #fff5f5; }
.smlr-alert--warning { border-color: #dba617; background: #fff8e5; }
.smlr-alert--info { border-color: #2271b1; background: #f0f6fc; }

.smlr-summary { border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px; margin: 12px 0; }
.smlr-summary__headline { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.smlr-summary__avg { font-size: 28px; font-weight: 700; }
.smlr-summary__count { color: #555; }
.smlr-summary__criteria { margin-top: 10px; display: grid; gap: 8px; }
.smlr-crit { display:flex; justify-content: space-between; gap: 10px; }

.smlr-reviews { display: grid; gap: 12px; margin: 12px 0; }
.smlr-review { border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px; }
.smlr-review__header { display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.smlr-review__author { font-weight: 700; }
.smlr-review__meta { display:flex; gap: 8px; align-items: center; color: #555; }
.smlr-review__criteria { margin-top: 8px; display: grid; gap: 6px; }
.smlr-critline { display:flex; gap: 8px; align-items:center; }
.smlr-review__content { margin-top: 10px; }
.smlr-review__photo img { margin-top: 10px; border-radius: 10px; max-width: 100%; height: auto; }

.smlr-review__actions { margin-top: 12px; display:flex; gap: 10px; }
.smlr-btn { border: 1px solid #d0d7de; background: #fff; padding: 8px 12px; border-radius: 10px; cursor:pointer; }
.smlr-btn--primary { font-weight: 700; }
.smlr-btn:disabled { opacity: .6; cursor: default; }

.smlr-form { border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px; margin: 12px 0; }
.smlr-field { margin-top: 12px; }
.smlr-label { display:block; font-weight: 700; margin-bottom: 6px; }
.smlr-help { margin: 6px 0 0; color: #666; font-size: 12px; }
.smlr-form textarea { width: 100%; border-radius: 10px; border: 1px solid #d0d7de; padding: 10px 12px; }

.smlr-form__actions { margin-top: 12px; display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.smlr-form__status { color: #555; }
.smlr-form__status.is-success { color: #1a7f37; }
.smlr-form__status.is-error { color: #d63638; }

.smlr-stars { display: inline-flex; gap: 2px; line-height: 1; }
.smlr-star--full, .smlr-star--half { color: #f0b429; }
.smlr-star--empty { color: #c6c6c6; }

/* Star input */
.smlr-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.smlr-stars-input input { display: none; }
.smlr-stars-input label { cursor: pointer; font-size: 20px; color: #c6c6c6; }
.smlr-stars-input input:checked ~ label,
.smlr-stars-input label:hover,
.smlr-stars-input label:hover ~ label { color: #f0b429; }

/* -------------------------------------------------------------------------
   Shein-like UX: compact list + expand.
   ------------------------------------------------------------------------- */

.smlr-reviews__toolbar { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 8px; }
.smlr-link { background: transparent; border: 0; padding: 0; color: #2271b1; cursor: pointer; text-decoration: none; font-weight: 700; }
.smlr-link:hover { text-decoration: underline; }

/* Toggle toolbar links depending on view */
.smlr-reviews[data-view="compact"] .smlr-reviews__collapse { display: none; }
.smlr-reviews[data-view="full"] .smlr-reviews__expand { display: none; }

/* Hide/show sections */
.smlr-reviews[data-view="compact"] .smlr-reviews__expanded { display: none; }
.smlr-reviews[data-view="full"] .smlr-reviews__compact { display: none; }

.smlr-loading { padding: 12px; border: 1px dashed #d0d7de; border-radius: 12px; color: #555; }
.smlr-reviews__expanded.is-loading { opacity: .75; }

/* Pinned / mine */
.smlr-review--mine { border-color: #2271b1; background: #f0f6fc; }
.smlr-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid #d0d7de; background: #fff; color: #111; }
.smlr-badge--mine { border-color: #2271b1; color: #2271b1; }
.smlr-badge--pending { border-color: #dba617; color: #8a6d1d; }

/* Compact cards */
.smlr-review--compact { padding: 12px; cursor: pointer; }
.smlr-review--compact:focus { outline: 2px solid rgba(34,113,177,.3); outline-offset: 2px; }
.smlr-review__compact-body { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.smlr-review__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }

/* Full cards */
.smlr-critpill { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #e5e5e5; background: #fafafa; padding: 6px 10px; border-radius: 999px; }
.smlr-review__criteria { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Clamp long text */
.smlr-review__content.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.smlr-review--compact .smlr-review__content.is-clamped { -webkit-line-clamp: 2; }

/* Pagination */
.smlr-pagination { margin-top: 10px; }
.smlr-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.smlr-pagination a,
.smlr-pagination span { display: inline-block; padding: 6px 10px; border: 1px solid #d0d7de; border-radius: 10px; text-decoration: none; }
.smlr-pagination .current { font-weight: 700; }