@use '../styles/variables' as *;

.rev {
  border-top: 1px solid var(--clr-border);
  padding-top: $spacing-4;
  display: flex;
  flex-direction: column;
  gap: $spacing-3;

  &__header {
    display: flex;
    align-items: center;
    gap: $spacing-2;
  }

  &__icon { color: $primary-500; }

  &__title {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    flex: 1;
  }

  &__avg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    color: #d97706;
  }

  &__msg {
    font-size: $font-size-xs;
    color: var(--clr-text-secondary);
    font-style: italic;
  }

  &__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: $spacing-2; }

  &__item {
    background: var(--clr-surface-raised, #{$gray-50});
    border-radius: $radius-base;
    padding: $spacing-3;
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
  }

  &__item-top {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    flex-wrap: wrap;
  }

  &__item-user {
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    flex: 1;
  }

  &__item-date {
    font-size: 11px;
    color: var(--clr-text-muted);
  }

  &__item-comment {
    font-size: $font-size-xs;
    color: var(--clr-text-secondary);
    margin: 0;
    line-height: 1.5;
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
    padding: $spacing-3;
    background: $primary-50;
    border: 1px solid $primary-100;
    border-radius: $radius-base;
  }

  &__form-label {
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
    margin: 0;
  }

  &__textarea {
    width: 100%;
    padding: $spacing-2 $spacing-3;
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-xs;
    font-family: $font-family-base;
    color: var(--clr-text);
    background: var(--clr-surface);
    resize: vertical;
    outline: none;

    &:focus { border-color: $primary-400; box-shadow: 0 0 0 2px rgba($primary-400, 0.15); }
  }

  &__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: $spacing-1;
    padding: $spacing-2 $spacing-3;
    background: var(--clr-primary, #{$color-primary});
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    transition: opacity $transition-fast;

    &:disabled { opacity: 0.55; cursor: not-allowed; }
    &:hover:not(:disabled) { opacity: 0.9; }
  }

  &__thanks {
    font-size: $font-size-xs;
    color: $accent-600;
    font-weight: $font-weight-medium;
    margin: 0;
  }
}

.stars {
  display: inline-flex;
  gap: 2px;

  &__star {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #d97706;
    transition: transform $transition-fast;

    &:hover { transform: scale(1.2); }
    &:disabled { cursor: default; opacity: 0.8; }
    &--on { color: #f59e0b; }
  }
}
