/* ==========================================================================
   My Rec Component
   Displays user's rec status - either saved rating or quick-add buttons
   Used in both Thing Card and Thing Panel
   ========================================================================== */

/* My Rec Section wrapper (in card context) */
.card-thing__my-rec {
  height: var(--size-touch);
  padding: 0;
  flex-shrink: 0;
  transition: opacity var(--transition-normal);
}

/* Loading state - fade my-rec area */
.card-thing.is-loading .card-thing__my-rec {
  opacity: 0;
}

/* ==========================================================================
   My Rec - Saved State
   Shows the user's rating when they have rec'd this thing
   ========================================================================== */

.my-rec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 100%;
}

.my-rec__icon {
  display: flex;
  align-items: center;
}

.my-rec__icon .material-symbols-outlined {
  font-size: var(--size-icon-md);
  color: var(--np-color-on-surface);
}

.my-rec__rating {
  font-family: var(--font-primary);
  font-size: var(--text-card-my-rec-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-my-rec-line-height);
  letter-spacing: var(--text-card-my-rec-letter-spacing);
  color: var(--np-color-on-surface);
}

/* ==========================================================================
   My Rec - Unsaved State
   Shows Interested/Add buttons when user hasn't rec'd this thing
   ========================================================================== */

.my-rec--unsaved {
  display: flex;
  align-items: center;
  height: var(--size-touch);
  gap: var(--space-2);
}

.my-rec--unsaved__label {
  font-family: var(--font-primary);
  font-size: var(--text-card-my-rec-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-my-rec-line-height);
  letter-spacing: var(--text-card-my-rec-letter-spacing);
  color: var(--np-color-on-surface);
}

.my-rec--unsaved__actions {
  display: flex;
  flex: 1;
  gap: 1px;
}

.my-rec--unsaved__interested {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  height: var(--size-touch);
  padding: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--text-card-my-rec-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-my-rec-line-height);
  letter-spacing: var(--text-card-my-rec-letter-spacing);
  text-align: start;
  background-color: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  border: none;
  cursor: pointer;
}

.my-rec--unsaved__icon {
  display: flex;
  align-items: center;
}

.my-rec--unsaved__icon .material-symbols-outlined {
  font-size: var(--size-icon-md);
  color: var(--np-color-inverse-on-surface);
}

.my-rec--unsaved__add {
  width: var(--size-touch);
  height: var(--size-touch);
  padding: var(--space-2);
  background-color: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-rec--unsaved__add .material-symbols-outlined {
  font-size: var(--size-icon-md);
}