/**
 * Landing Page Component Styles
 *
 * Styles for public landing pages (rating collection, feedback forms)
 * Used by: star_rating_controller.js
 */

/* Star Rating Component */
.star-rating {
  @apply flex justify-center gap-2;
}

.star-rating-star {
  @apply w-12 h-12 text-4xl transition-all duration-150 cursor-pointer;
  @apply hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded;
  color: theme('colors.gray.300');
}

.star-rating-star svg {
  @apply w-full h-full;
}

/* Filled state - applied via JS when selected or hovered */
.star-rating-star.star-rating-filled {
  color: theme('colors.yellow.400');
}

.star-rating-star.star-rating-filled .star-rating-path {
  fill: theme('colors.yellow.400');
  stroke: theme('colors.yellow.500');
}

/* Readonly state */
.star-rating-star.star-rating-readonly {
  @apply cursor-default;
  pointer-events: none;
}

/* Landing Page Card */
.landing-card {
  @apply bg-white rounded-2xl shadow-lg p-8 text-center relative;
}

.landing-card-back-button {
  @apply absolute top-8 left-8;
}

.landing-card-header {
  @apply mb-6;
}

.landing-card-title {
  @apply text-2xl font-bold text-gray-900 mb-4;
}

.landing-card-subtitle {
  @apply text-lg font-medium text-gray-600;
}

.landing-card-body {
  @apply text-gray-600 mb-8;
}

/* Landing Page Alert */
.landing-alert {
  @apply mb-4 p-3 rounded-lg text-sm;
}

.landing-alert-error {
  @apply bg-red-50 border border-red-200 text-red-700;
}

.landing-alert-success {
  @apply bg-green-50 border border-green-200 text-green-700;
}

/* Landing Page Submit Button */
.landing-submit {
  @apply w-full py-3 px-6 font-semibold rounded-lg transition-colors;
  @apply bg-blue-600 hover:bg-blue-700 text-white;
  @apply disabled:bg-gray-300 disabled:cursor-not-allowed;
}

/* Feedback Form */
.landing-textarea {
  @apply w-full p-4 border border-gray-300 rounded-lg resize-none;
  @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none;
}