/**
 * 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;
  overflow-wrap: break-word;
}

.landing-card-subtitle {
  @apply text-lg font-medium text-gray-600;
  overflow-wrap: break-word;
}

.landing-card-body {
  @apply text-gray-600 mb-8;
  overflow-wrap: break-word;
}

/* 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;
}

/* ============================================
   Landing Page Media — Public Pages
   Shown above business name on the landing card
   ============================================ */

.landing-media-hero {
  @apply overflow-hidden rounded-xl mb-6;
  @apply -mx-8 -mt-8;
  max-height: 280px;
}

.landing-media-asset {
  @apply w-full h-full object-cover block;
  max-height: 280px;
}

@media (max-width: 640px) {
  .landing-media-hero {
    @apply -mx-6 -mt-6;
    max-height: 200px;
  }

  .landing-media-asset {
    max-height: 200px;
  }
}

/* ============================================
   Macbook Browser — Read-only media display
   (used in test-preview / non-editable contexts)
   ============================================ */

.browser-landing-media {
  @apply overflow-hidden;
  @apply -mx-4 -mt-4 mb-3;
  max-height: 120px;
}

.browser-landing-media-asset {
  @apply w-full object-cover block;
  max-height: 120px;
}

/* ============================================
   Macbook Browser — Inline cover upload zone
   (editable_media: true context)
   ============================================ */

/* Drop zone — sits at top of browser-content, full width */
.browser-cover-zone {
  @apply self-stretch flex flex-row items-center justify-center gap-2 cursor-pointer;
  @apply -mx-[40px] -mt-[40px] mb-3;
  @apply bg-blue-50 border-b-2 border-dashed border-blue-200;
  @apply transition-colors duration-150;
  height: 80px;
}

.browser-cover-zone:hover,
.browser-cover-zone.landing-upload-zone--dragover {
  @apply bg-blue-100 border-blue-400;
}

.browser-cover-zone-error,
.card-cover-zone-error,
.cover-zone-error-text {
  @apply text-xs text-red-600 text-center px-2 leading-tight;
  pointer-events: none;
}

.browser-cover-zone-icon {
  @apply w-5 h-5 text-blue-400;
}

.browser-cover-zone-text {
  @apply text-sm font-medium text-blue-600;
}

/* Attached status — replaces drop zone once media is uploaded */
.browser-cover-attached {
  @apply self-stretch flex items-center justify-between gap-3;
  @apply -mx-[40px] -mt-[40px] mb-3 px-[40px];
  @apply bg-gray-50 border-b border-gray-100;
  height: 80px;
}

.browser-cover-attached-label {
  @apply flex items-center gap-1.5 min-w-0;
  @apply text-xs text-gray-600 truncate;
}

.browser-cover-chip-btn {
  @apply flex items-center px-2 py-1 rounded text-xs font-medium;
  @apply bg-white border border-gray-200 text-gray-600;
  @apply hover:bg-gray-50 hover:border-gray-300 transition-colors;
  @apply cursor-pointer;
}

.browser-cover-chip-btn--remove {
  @apply text-red-500 border-red-200 hover:bg-red-50 hover:border-red-300;
}

/* Progress bar inside browser while uploading */
.browser-cover-progress {
  @apply self-stretch flex items-center gap-2;
  @apply -mx-[40px] -mt-[40px] mb-3 px-[40px];
  height: 80px;
  @apply bg-gray-50 border-b border-gray-100;
}

.browser-cover-progress-track {
  @apply flex-1 h-1 rounded-full bg-gray-200 overflow-hidden;
}

.browser-cover-progress-bar {
  @apply h-full bg-blue-500 rounded-full transition-all duration-150;
  width: 0%;
}

.browser-cover-progress-label {
  @apply text-xs text-gray-400 tabular-nums shrink-0;
}

/* Status message */
.browser-cover-status {
  @apply text-xs text-center;
  @apply -mx-4 px-4 pb-2;
}

/* Preview when media is attached — mirrors .landing-media-hero on the real landing page */
.browser-cover-preview {
  @apply relative overflow-hidden self-stretch;
  @apply -mx-[40px] -mt-[40px] mb-3;
  max-height: 220px;
}

.browser-cover-media {
  @apply w-full;
}

.browser-cover-media-asset {
  @apply w-full block object-cover;
  max-height: 220px;
}

/* Hover overlay with Change / Remove actions */
.browser-cover-overlay {
  @apply absolute inset-0 flex items-center justify-center gap-2;
  @apply bg-black/40 opacity-0 transition-opacity duration-150;
  .browser-cover-preview:hover & {
    @apply opacity-100;
  }
}

.browser-cover-action-btn {
  @apply flex items-center gap-1 px-2.5 py-1 rounded-md;
  @apply bg-white/90 text-gray-800 text-xs font-medium;
  @apply hover:bg-white transition-colors;
}

/* ============================================
   Phone Card — Inline cover upload zone
   (referral & repeat landing tabs)
   ============================================ */

/* Drop zone at top of the card */
.card-cover-zone {
  @apply flex flex-row items-center justify-center gap-2.5 cursor-pointer;
  @apply -mx-6 -mt-5 rounded-t-[20px];
  @apply bg-blue-50 border-b-2 border-dashed border-blue-200;
  @apply transition-colors duration-150;
  height: 72px;
}

.card-cover-zone:hover,
.card-cover-zone.landing-upload-zone--dragover {
  @apply bg-blue-100 border-blue-400;
}

.card-cover-zone-icon {
  @apply w-5 h-5 text-blue-400;
}

.card-cover-zone-text {
  @apply text-sm font-medium text-blue-600;
}

/* Progress bar — fills same zone at top of card */
.card-cover-progress {
  @apply flex items-center gap-3;
  @apply -mx-6 -mt-5 px-6 rounded-t-[20px];
  @apply bg-gray-50 border-b border-gray-100;
  height: 72px;
}

.card-cover-progress-track {
  @apply flex-1 h-1.5 rounded-full bg-gray-200 overflow-hidden;
}

.card-cover-progress-bar {
  @apply h-full bg-blue-500 rounded-full transition-all duration-150;
  width: 0%;
}

.card-cover-progress-label {
  @apply text-xs text-gray-500 tabular-nums shrink-0;
}

/* Preview when media attached — mirrors .landing-media-hero on the real landing page */
.card-cover-preview {
  @apply relative overflow-hidden;
  @apply -mx-6 -mt-5 mb-4 rounded-t-[20px];
  max-height: 200px;
}

.card-cover-media {
  @apply w-full;
}

.card-cover-media-asset {
  @apply w-full block object-cover;
  max-height: 200px;
}

/* Hover overlay */
.card-cover-overlay {
  @apply absolute inset-0 flex items-center justify-center gap-2;
  @apply bg-black/40 opacity-0 transition-opacity duration-150;
  .card-cover-preview:hover & {
    @apply opacity-100;
  }
}

.card-cover-action-btn {
  @apply flex items-center gap-1 px-2.5 py-1 rounded-md;
  @apply bg-white/90 text-gray-800 text-xs font-medium;
  @apply hover:bg-white transition-colors;
}

/* Attached status — replaces drop zone once media is uploaded (phone card) */
.card-cover-attached {
  @apply flex items-center justify-between gap-3;
  @apply -mx-6 -mt-5 px-6 rounded-t-[20px];
  @apply bg-gray-50 border-b border-gray-100;
  height: 72px;
}

.card-cover-attached-label {
  @apply flex items-center gap-1.5 min-w-0;
  @apply text-xs text-gray-600 truncate;
}

.card-cover-chip-btn {
  @apply flex items-center px-2 py-1 rounded text-xs font-medium;
  @apply bg-white border border-gray-200 text-gray-600;
  @apply hover:bg-gray-50 hover:border-gray-300 transition-colors;
  @apply cursor-pointer;
}

.card-cover-chip-btn--remove {
  @apply text-red-500 border-red-200 hover:bg-red-50 hover:border-red-300;
}