/* Front styles for form & list */
.c2r-form-wrap { margin: 1rem 0; }
.c2r-form .c2r-field { margin-bottom: .75rem; }
.c2r-form label { display:block; font-weight:600; margin-bottom:.35rem; }
.c2r-form select,
.c2r-form textarea { width:100%; padding:.5rem; border:1px solid #cbd5e1; border-radius:4px; }
.c2r-submit { background:#1e293b; color:#fff; border:0; padding:.6rem 1rem; border-radius:4px; cursor:pointer; }
.c2r-success { background:#ecfdf5; color:#065f46; border:1px solid #10b981; padding:.6rem .8rem; border-radius:4px; margin-bottom:1rem; }

/* List (stacking) */
.c2r-list { display:grid; gap:1rem; }
.c2r-item { padding:1rem calc(1rem + 36px); border:2px solid #e5e7eb; margin: 0 2px 0 0; background:#fff; }
.c2r-item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
.c2r-stars { color:#f59e0b; font-size:clamp(1rem, 0.919rem + 0.432vi, 2rem); }

/* Tabs (client-side pages) */
.c2r-tabs { display:flex; gap:.5rem; align-items:center; justify-content:center; margin-top:.75rem; }
.c2r-tab-prev, .c2r-tab-next {
  border:1px solid #e5e7eb; background:#fff; padding:.35rem .6rem; border-radius:4px; cursor:pointer;
}
.c2r-tab-prev:disabled, .c2r-tab-next:disabled { opacity:.5; cursor:default; }
.c2r-tab-dots { display:flex; gap:.35rem; }
.c2r-tab-dot {
  border:1px solid #e5e7eb; background:#fff; padding:.25rem .5rem; border-radius:4px; cursor:pointer; font: inherit;
}
.c2r-tab-dot.is-active { background:#1e293b; color:#fff; border-color:#1e293b; }

/* ★ Star radio input (hover-to-select) */
.c2r-stars-fieldset { border:0; padding:0; margin:0; }
.c2r-stars-input { display:inline-flex; flex-direction:row-reverse; gap:2px; }
.c2r-stars-input input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.c2r-stars-input label { font-size:1.25rem; color:#cbd5e1; cursor:pointer; line-height:1; }
.c2r-stars-input label:hover,
.c2r-stars-input label:hover ~ label { color:#f59e0b; }
.c2r-stars-input input:checked ~ label { color:#f59e0b; }
.c2r-stars-input:focus-within label { outline: none; }

/* Hide focus outline for mouse clicks only (keep it for keyboard users) */
.c2r-is-tabs:focus:not(:focus-visible),
.c2r-slider .c2r-viewport:focus:not(:focus-visible),
.c2r-form input:focus:not(:focus-visible),
.c2r-form textarea:focus:not(:focus-visible),
.c2r-form select:focus:not(:focus-visible),
.c2r-form button:focus:not(:focus-visible) {
  outline: none;
}

/* Hide focus ring on mouse click (keep for keyboard via :focus-visible) */
.c2r-prev:focus:not(:focus-visible),
.c2r-next:focus:not(:focus-visible),
.c2r-dot:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Accessible, nicer keyboard focus styles */
.c2r-prev:focus-visible,
.c2r-next:focus-visible {
  outline: none;
  box-shadow: 0;
  background: transparent;
}

.c2r-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px black;
  background: transparent;
}

/* Tabs view: prevent horizontal bleed on small screens */
.c2r-list {               /* already grid; make it 1 column explicitly */
  grid-template-columns: 1fr;
  box-sizing: border-box;
}

.c2r-is-tabs {            /* optional safety net */
  overflow-x: hidden;
}

/* Grid items must be allowed to shrink within the column */
.c2r-list .c2r-item {
  min-width: 0;           /* critical for grid/flex shrinking */
  width: 100%;
  box-sizing: border-box;
}

/* Header layout: name can wrap; stars don’t shrink */
.c2r-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.c2r-item-header .c2r-name {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;         /* fallback */
  overflow-wrap: anywhere;        /* modern */
}
.c2r-item-header .c2r-stars {
  flex: 0 0 auto;
}

/* Review text: wrap very long words/URLs */
.c2r-text {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Just in case someone pasted an image */
.c2r-list .c2r-text img {
  max-width: 100%;
  height: auto;
}