/* Custom styles for subtle visual appeal */
body {
  /* Changed font to Fira Sans as requested */
  font-family: "Comfortaa", "Fira Sans", sans-serif;
  /* Page background (requested): #feecd0 */
  background-color: #feecd0;
}

/* Custom themed backgrounds */
.bg-app-header {
  background-color: #94a670 !important; /* Title bar color */
}
.bg-card {
  background-color: #f8f6ed !important; /* Card background color */
}

/* --- Local font-face declarations (from /fonts) --- */
@font-face {
  font-family: 'Eyesome-Script';
  src: url('/fonts/Eyesome-Script.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Black-Mango';
  src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Apply fonts to UI regions */
/* Header title */
#mainTitle {
  font-family: 'Eyesome-Script', 'Comfortaa', serif;
}

/* Form labels and subheaders */
#reviewForm label,
#reviewForm .text-sm,
#optimizedReviewContainer h2,
#optimizedReviewContainer p,
#optimizedReviewContainer label,
#submissionSuccess h2,
#submissionSuccess p {
  font-family: 'Black-Mango', 'Comfortaa', sans-serif;
}

/* Button accent color requested: #dca278
   Apply to primary buttons via the .btn-accent class. */
.btn-accent {
  background-color: #dca278 !important;
  color: #ffffff !important;
}
.btn-accent:hover {
  filter: brightness(0.95);
}
.btn-accent:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-accent:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(220,162,120,0.18);
}
.card-shadow {
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* --- NEW STAR RATING STYLES --- */
.star-icon {
  /* Base color for unfilled stars */
  color: #d1d5db; /* Tailwind gray-300 */
  transition: transform 0.1s ease-out, color 0.1s ease-out;
  cursor: pointer;
}
.star-icon.filled {
  color: gold; /* Gold color for selected/hovered stars */
}
.star-icon.pulse {
  animation: pulse-ring 0.2s ease-in-out;
}
@keyframes pulse-ring {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* --- END STAR RATING STYLES --- */

/* Style for the AI Rewrite Toggle Switch (Unchanged) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #10b981;
}
input:checked + .slider:before {
  transform: translateX(24px);
}

/* Modal specific styles (Unchanged) */
.modal {
  transition: opacity 0.2s ease-in-out;
}
.modal.hidden {
  opacity: 0;
  pointer-events: none;
}