/* =============================================================================
   Custom Post Reviews — shadcn/ui inspired design system
   Override --cpr-color-brand in your theme CSS to match your brand color.
   Example: .cpr-wrapper { --cpr-color-brand: #E38896; }
   ============================================================================= */

.cpr-wrapper {
  /* --- Design Tokens (shadcn/ui: zinc palette + accent) --- */
  --cpr-color-brand:         #3b82f6;
  --cpr-color-brand-hover:   #2563eb;
  --cpr-color-brand-light:   #dbeafe;
  --cpr-color-brand-ring:    rgba(59, 130, 246, 0.25);

  --cpr-color-text:          #09090b;   /* zinc-950 */
  --cpr-color-muted:         #71717a;   /* zinc-500 */
  --cpr-color-border:        #e4e4e7;   /* zinc-200 */
  --cpr-color-bg:            #ffffff;
  --cpr-color-bg-subtle:     #fafafa;   /* zinc-50 */

  --cpr-color-star:          #f59e0b;   /* amber-400 */
  --cpr-color-star-empty:    #d4d4d8;   /* zinc-300 */

  --cpr-color-success-bg:    #f0fdf4;
  --cpr-color-success-text:  #15803d;
  --cpr-color-success-border:#86efac;
  --cpr-color-error-bg:      #fef2f2;
  --cpr-color-error-text:    #b91c1c;
  --cpr-color-error-border:  #fca5a5;

  --cpr-radius-sm:           0.375rem;  /* rounded-md */
  --cpr-radius:              0.5rem;    /* rounded-lg */
  --cpr-radius-xl:           0.75rem;   /* rounded-xl */

  --cpr-shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.05);
  --cpr-shadow:              0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --cpr-shadow-md:           0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --cpr-transition:          150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cpr-transition-slow:     300ms cubic-bezier(0.4, 0, 0.2, 1);

  font-family: inherit;
  color: var(--cpr-color-text);
  box-sizing: border-box;
}

.cpr-wrapper *,
.cpr-wrapper *::before,
.cpr-wrapper *::after {
  box-sizing: inherit;
}

/* =============================================================================
   Review Card
   ============================================================================= */

.cpr-card {
  background: var(--cpr-color-bg);
  border: 1px solid var(--cpr-color-border);
  border-radius: var(--cpr-radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--cpr-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  transition: box-shadow var(--cpr-transition), border-color var(--cpr-transition);
}

.cpr-card:hover {
  box-shadow: var(--cpr-shadow-md);
  border-color: #d4d4d8; /* zinc-300 */
}

/* Stars — display */
.cpr-card__stars {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.cpr-wrapper .cpr-star {
  width: 1rem;
  height: 1rem;
  fill: var(--cpr-color-star-empty);
  flex-shrink: 0;
}

.cpr-wrapper .cpr-star--filled {
  fill: var(--cpr-color-star);
}

/* Comment */
.cpr-card__comment {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--cpr-color-text);
  margin: 0;
  flex: 1;
}

/* Custom field values */
.cpr-card__custom {
  font-size: 0.8125rem;
  color: var(--cpr-color-muted);
  margin: 0;
  display: flex;
  gap: 0.375rem;
  align-items: baseline;
}

.cpr-card__custom-label {
  font-weight: 600;
  color: var(--cpr-color-text);
  white-space: nowrap;
}

/* Name */
.cpr-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cpr-color-muted);
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--cpr-color-border);
}

/* =============================================================================
   Swiper Overrides
   ============================================================================= */

.cpr-swiper {
  padding-bottom: 2.75rem !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* Match brand color */
.cpr-wrapper .swiper-button-prev,
.cpr-wrapper .swiper-button-next {
  color: var(--cpr-color-brand) !important;
}

.cpr-wrapper .swiper-button-prev::after,
.cpr-wrapper .swiper-button-next::after {
  font-size: 1.25rem !important;
}

.cpr-wrapper .swiper-pagination-bullet {
  background: var(--cpr-color-border) !important;
  opacity: 1 !important;
}

.cpr-wrapper .swiper-pagination-bullet-active {
  background: var(--cpr-color-brand) !important;
}

/* Empty state */
.cpr-empty {
  text-align: center;
  color: var(--cpr-color-muted);
  font-size: 0.9375rem;
  padding: 3rem 1rem;
  border: 1px dashed var(--cpr-color-border);
  border-radius: var(--cpr-radius);
  margin-bottom: 1rem;
}

/* =============================================================================
   Accordion Toggle
   ============================================================================= */

.cpr-form-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.cpr-form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--cpr-color-bg);
  border: 1px solid var(--cpr-color-border);
  border-radius: var(--cpr-radius-sm);
  color: var(--cpr-color-text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--cpr-shadow-sm);
  transition: background var(--cpr-transition), border-color var(--cpr-transition),
              box-shadow var(--cpr-transition), color var(--cpr-transition);
  line-height: 1.5;
}

.cpr-form-toggle:hover {
  background: var(--cpr-color-bg-subtle);
  border-color: #d4d4d8;
  box-shadow: var(--cpr-shadow);
}

.cpr-form-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cpr-color-brand-ring);
  border-color: var(--cpr-color-brand);
}

.cpr-form-toggle[aria-expanded="true"] {
  background: var(--cpr-color-brand);
  border-color: var(--cpr-color-brand);
  color: #ffffff;
  box-shadow: var(--cpr-shadow-sm);
}

.cpr-form-toggle[aria-expanded="true"]:hover {
  background: var(--cpr-color-brand-hover);
  border-color: var(--cpr-color-brand-hover);
}

.cpr-toggle-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: rotate var(--cpr-transition);
}

.cpr-form-toggle[aria-expanded="true"] .cpr-toggle-icon {
  rotate: 180deg;
}

/* =============================================================================
   Accordion Panel
   ============================================================================= */

.cpr-form-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 400ms ease, opacity var(--cpr-transition-slow);
}

.cpr-form-panel.--open {
  max-height: 1600px;
  opacity: 1;
}

/* =============================================================================
   Review Form — shadcn Input / Textarea / Button
   ============================================================================= */

.cpr-form {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--cpr-color-border);
  border-radius: var(--cpr-radius);
  background: var(--cpr-color-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cpr-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Label */
.cpr-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cpr-color-text);
  line-height: 1.25;
}

.cpr-required {
  color: var(--cpr-color-brand);
  margin-left: 0.2rem;
}

.cpr-optional {
  color: var(--cpr-color-muted);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

/* Input / Textarea / Select — shadcn style */
.cpr-input,
.cpr-textarea,
.cpr-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cpr-color-border);
  border-radius: var(--cpr-radius-sm);
  background: var(--cpr-color-bg);
  color: var(--cpr-color-text);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--cpr-transition), box-shadow var(--cpr-transition);
  appearance: none;
}

.cpr-input::placeholder,
.cpr-textarea::placeholder {
  color: var(--cpr-color-muted);
}

.cpr-input:focus,
.cpr-textarea:focus,
.cpr-select:focus {
  border-color: var(--cpr-color-brand);
  box-shadow: 0 0 0 3px var(--cpr-color-brand-ring);
}

.cpr-textarea {
  resize: vertical;
  min-height: 96px;
}

/* Select arrow */
.cpr-select-wrap {
  position: relative;
}

.cpr-select-wrap::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--cpr-color-muted);
}

/* =============================================================================
   Star Input (radio-based, CSS :has() driven)
   ============================================================================= */

.cpr-stars-input {
  display: flex;
  flex-direction: row-reverse; /* RTL trick for CSS sibling highlight */
  justify-content: flex-end;
  gap: 0.25rem;
}

.cpr-star-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cpr-star-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cpr-wrapper .cpr-star--input {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--cpr-color-star-empty);
  transition: fill var(--cpr-transition), scale var(--cpr-transition);
}

/* Hover: highlight hovered star and all stars to its "right" (lower value, due to RTL) */
.cpr-star-label:hover .cpr-star--input,
.cpr-star-label:hover ~ .cpr-star-label .cpr-star--input {
  fill: var(--cpr-color-star);
  opacity: 0.6;
}

/* Selected: highlight up to checked star and all lower values */
.cpr-stars-input:has(.cpr-star-radio:checked) .cpr-star--input {
  fill: var(--cpr-color-star-empty);
  opacity: 1;
}

.cpr-star-label:has(.cpr-star-radio:checked) .cpr-star--input,
.cpr-star-label:has(.cpr-star-radio:checked) ~ .cpr-star-label .cpr-star--input {
  fill: var(--cpr-color-star);
  opacity: 1;
}

/* Click scale pop */
.cpr-star-label:active .cpr-star--input {
  scale: 1.25;
}

/* =============================================================================
   Submit Button — shadcn primary button
   ============================================================================= */

.cpr-field--submit {
  padding-top: 0.25rem;
}

.cpr-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--cpr-color-brand);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--cpr-radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cpr-transition), opacity var(--cpr-transition),
              box-shadow var(--cpr-transition);
  box-shadow: var(--cpr-shadow-sm);
}

.cpr-btn-submit:hover {
  background: var(--cpr-color-brand-hover);
}

.cpr-btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cpr-color-brand-ring);
}

.cpr-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
   Status Messages — shadcn Alert
   ============================================================================= */

.cpr-form-status {
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: var(--cpr-radius-sm);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--cpr-transition-slow), padding var(--cpr-transition-slow);
  padding: 0 0.875rem;
}

.cpr-form-status.--success {
  max-height: 120px;
  padding: 0.625rem 0.875rem;
  background: var(--cpr-color-success-bg);
  color: var(--cpr-color-success-text);
  border: 1px solid var(--cpr-color-success-border);
}

.cpr-form-status.--error {
  max-height: 120px;
  padding: 0.625rem 0.875rem;
  background: var(--cpr-color-error-bg);
  color: var(--cpr-color-error-text);
  border: 1px solid var(--cpr-color-error-border);
}

/* =============================================================================
   Accessibility
   ============================================================================= */

.cpr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}