/* Global styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  padding-top: 144px;
  min-height: 100vh;
}

/* Main title at top */
.main-title {
  text-align: center;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

#manageSubscriptionBtn:hover {
  background: #0056b3 !important;
  transform: translateY(-50%) translateY(-1px) !important;
}

.main-title h1 {
  margin: 0;
  color: #333333;
  font-size: 32px;
  font-weight: bold;
}

/* Main wrapper for centering content */
.main-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 160px);
  padding: 20px;
  margin-top: 72px;
}

/* Main container */
.container {
  background-color: #ffffff;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Header styles removed - title is now in .main-title */

p {
  color: #555555;
  margin-bottom: 20px;
}

/* Textarea */
textarea {
  width: 100%;
  height: 120px;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 20px;
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

#tool-review textarea:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

#tool-product textarea:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

#tool-caption textarea:focus {
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

#tool-faq textarea:focus, #tool-faq input:focus {
  border-color: #ff9800;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

/* Select dropdown */
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

select:focus {
  outline: none;
}

#tool-review select:focus {
  border-color: #2196f3;
}

#tool-product select:focus {
  border-color: #4caf50;
}

#tool-caption select:focus {
  border-color: #9c27b0;
}

#tool-faq select:focus {
  border-color: #ff9800;
}

/* Buttons */
button {
  width: 100%;
  background-color: #0077cc;
  color: #ffffff;
  padding: 12px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #005fa3;
}

/* Upgrade button (in link tag) */
a button {
  margin-top: 10px;
  background-color: #00b894;
}

a button:hover {
  background-color: #009e7e;
}

/* Result box */
#result {
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

#responseOutput {
  white-space: pre-wrap;
  font-size: 1rem;
  color: #333333;
}

/* Usage tracker */
#usageTracker {
  color: #444;
  margin-bottom: 10px;
  text-align: center;
}

.navbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: #ffffff;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 150;
  margin-bottom: 0;
}

.navbar button {
  padding: 12px 24px;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Review Reply Button - Blue Theme */
.navbar button:nth-child(1) {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
}

.navbar button:nth-child(1):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3);
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
}

.navbar button:nth-child(1).active {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

/* Product Description Button - Green Theme */
.navbar button:nth-child(2) {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

.navbar button:nth-child(2):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
}

.navbar button:nth-child(2).active {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Caption Button - Purple Theme */
.navbar button:nth-child(3) {
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.navbar button:nth-child(3):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(156, 39, 176, 0.3);
  background: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%);
}

.navbar button:nth-child(3).active {
  background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%);
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
}

/* FAQ Button - Orange Theme */
.navbar button:nth-child(4) {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.navbar button:nth-child(4):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3);
  background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
}

.navbar button:nth-child(4).active {
  background: linear-gradient(135deg, #ef6c00 0%, #e65100 100%);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

/* Ad Generator Button - Red Theme (Pro Only) */
.navbar button:nth-child(5) {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  position: relative;
}

.navbar button:nth-child(5):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.3);
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
}

.navbar button:nth-child(5).active {
  background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
  box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
}

/* Locked navbar button styles */
.navbar button.locked {
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  position: relative;
}

.navbar button.locked:hover {
  transform: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%) !important;
}

.navbar button.locked .lock-icon {
  margin-left: 8px;
  font-size: 14px;
}

.navbar button.pro-unlocked .lock-icon {
  display: none;
}

.tool-section {
  margin-bottom: 40px;
  padding: 25px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.tool-section h2 {
  margin-bottom: 20px;
  font-size: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Review Reply Tool - Professional Blue Theme */
#tool-review {
  background: linear-gradient(135deg, #e3f2fd 0%, #f8fbff 100%);
  border: 2px solid #2196f3;
}

#tool-review h2 {
  color: #1976d2;
}

.tool-section h2::before {
  content: "💬";
  font-size: 28px;
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

#tool-review button {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
  position: relative;
  overflow: hidden;
}

#tool-review button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

#tool-review button:hover::before {
  left: 100%;
}

#tool-review button:hover {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(33, 150, 243, 0.5);
}

/* Product Description Tool - Green Commerce Theme */
#tool-product {
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  border: 2px solid #4caf50;
}

#tool-product h2 {
  color: #2e7d32;
}

#tool-product h2::before {
  content: "🛍️";
  font-size: 28px;
}

#tool-product button {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

#tool-product button:hover {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Caption Tool - Purple Social Media Theme */
#tool-caption {
  background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%);
  border: 2px solid #9c27b0;
}

#tool-caption h2 {
  color: #7b1fa2;
}

#tool-caption h2::before {
  content: "📱";
  font-size: 28px;
}

#tool-caption button {
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}

#tool-caption button:hover {
  background: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4);
}

/* FAQ Tool - Orange Support Theme */
#tool-faq {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
}

#tool-faq h2 {
  color: #ef6c00;
}

#tool-faq h2::before {
  content: "❓";
  font-size: 28px;
}

#tool-faq button {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

#tool-faq button:hover {
  background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

.output-text {
  margin-top: 10px;
  font-weight: normal;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-wrap;
  line-height: 1.6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#tool-review .output-text {
  background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);
  border: 1px solid #bbdefb;
  color: #1976d2;
}

#tool-product .output-text {
  background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
  border: 1px solid #c8e6c9;
  color: #2e7d32;
}

#tool-caption .output-text {
  background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
  border: 1px solid #f8bbd9;
  color: #7b1fa2;
}

#tool-faq .output-text {
  background: linear-gradient(135deg, #ffe0b2 0%, #fff3e0 100%);
  border: 1px solid #ffcc02;
  color: #ef6c00;
}

/* Ad Generator Tool - Red Marketing Theme */
#tool-ad {
  background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
  border: 2px solid #f44336;
}

#tool-ad h2 {
  color: #d32f2f;
}

#tool-ad h2::before {
  content: "📢";
  font-size: 28px;
}

#tool-ad button {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}

#tool-ad button:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
}

#tool-ad .output-text {
  background: linear-gradient(135deg, #fce4ec 0%, #ffebee 100%);
  border: 1px solid #f8bbd9;
  color: #d32f2f;
}

/* n8n form container styling */
#n8nFormContainer {
  transition: all 0.3s ease;
}

#n8nFormContainer:hover {
  border-color: #f44336;
  background: #fff;
}

.usage-text {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.result {
  margin-top: 20px;
}

.result h3 {
  margin-bottom: 10px;
  color: #333;
}