<div class="container">
  <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
    <div>
      <h1 class="h3 mb-0" style="color: var(--primary-dark);">Service Details: <%= service.name %></h1>
      <p class="text-muted mb-0">Edit detailed content for <%= service.name %> service</p>
    </div>
    <div>
      <a href="/admin/service" class="btn btn-outline-primary">
        <i class="fas fa-arrow-left me-2"></i>Back to Services
      </a>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <form action="/admin/service/<%= service.slug %>/details/update" method="POST" class="content-with-fixed-buttons" id="serviceDetailsForm">
        <!-- Hidden inputs for JSON data -->
        <input type="hidden" name="details" id="detailsJson">
        <input type="hidden" name="features" id="featuresJson">
        <input type="hidden" name="faq" id="faqJson">

        <!-- Navigation Tabs -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header bg-white border-bottom">
            <ul class="nav nav-tabs card-header-tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#basic-info" role="tab">
                  <i class="fas fa-info-circle me-2"></i>Basic Information
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#key-features" role="tab">
                  <i class="fas fa-star me-2"></i>Key Features
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#faq-section" role="tab">
                  <i class="fas fa-question-circle me-2"></i>FAQ Section
                </a>
              </li>
            </ul>
          </div>

          <div class="card-body">
            <div class="tab-content">
              <!-- Basic Information Tab -->
              <div class="tab-pane fade show active" id="basic-info" role="tabpanel">
                <div class="card border shadow-sm">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-5">
                        <label class="form-label fw-medium">Main Image</label>
                        <div class="input-group mb-2">
                          <input type="text" class="form-control" id="mainImage" name="mainImage" 
                                 value="<%= service.details?.mainImage || '' %>">
                          <button type="button" class="btn btn-outline-primary btn-upload-image" 
                                  data-target-input="mainImage" data-image-type="service">
                            <i class="fas fa-upload me-1"></i>Upload
                          </button>
                        </div>
                        <small class="form-text text-muted">Recommended size: 800x600px</small>
                      </div>
                      <div class="col-md-7">
                        <div id="mainImagePreview">
                          <% if (service.details?.mainImage) { %>
                            <img src="<%= getFullImageUrl(service.details.mainImage) %>" class="img-thumbnail" style="max-height: 250px; width: auto; max-width: 100%; object-fit: contain;" alt="Main image preview">
                          <% } %>
                        </div>
                      </div>
                    </div>
                    <div class="row mt-3">
                      <div class="col-md-12">
                        <label class="form-label fw-medium">Title</label>
                        <input type="text" class="form-control" id="detailsTitle" name="title" 
                               value="<%= service.details?.title || service.name %>">
                      </div>
                    </div>
                    <div class="row mt-3">
                      <div class="col-md-12">
                        <label class="form-label fw-medium">Description</label>
                        <textarea class="form-control" id="detailsDescription" name="description" rows="3"><%= service.details?.description || service.description %></textarea>
                      </div>
                    </div>
                    
                    <!-- Overview Section -->
                    <div class="row mt-4">
                      <div class="col-12">
                        <div class="card border">
                          <div class="card-header bg-light">
                            <h6 class="mb-0">Overview Section</h6>
                          </div>
                          <div class="card-body">
                            <div class="row g-3">
                              <div class="col-md-12">
                                <label class="form-label">Overview Title</label>
                                <input type="text" class="form-control" id="overviewTitle" name="overviewTitle" 
                                       value="<%= service.details?.overviewTitle || 'Service Overview' %>">
                              </div>
                              <div class="col-md-12">
                                <label class="form-label">Overview Description</label>
                                <textarea class="form-control" id="overviewDescription" name="overviewDescription" rows="4"><%= service.details?.overviewDescription || '' %></textarea>
                              </div>
                              <div class="col-md-12">
                                <label class="form-label">Additional Description</label>
                                <textarea class="form-control" id="additionalDescription" name="additionalDescription" rows="3"><%= service.details?.additionalDescription || '' %></textarea>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Key Features Tab -->
              <div class="tab-pane fade" id="key-features" role="tabpanel">
                <div class="card border shadow-sm">
                  <div class="card-body">
                    <!-- Features Header -->
                    <div class="row mb-4">
                      <div class="col-md-6">
                        <label class="form-label fw-medium">Features Title</label>
                        <input type="text" class="form-control" id="keyFeaturesTitle" name="keyFeaturesTitle" 
                               value="<%= service.details?.keyFeaturesTitle || 'Key Features' %>">
                      </div>
                      <div class="col-md-6">
                        <label class="form-label fw-medium">Features Image</label>
                        <div class="input-group">
                          <input type="text" class="form-control" id="keyFeaturesImage" name="keyFeaturesImage" 
                                 value="<%= service.details?.keyFeaturesImage || '' %>">
                          <button type="button" class="btn btn-outline-primary btn-upload-image" 
                                  data-target-input="keyFeaturesImage" data-image-type="service">
                            <i class="fas fa-upload me-1"></i>Upload
                          </button>
                        </div>
                      </div>
                    </div>

                    <!-- Key Features Image Preview -->
                    <div class="row mt-3">
                      <div class="col-12">
                        <div id="keyFeaturesImagePreview">
                          <% if (service.details?.keyFeaturesImage) { %>
                            <img src="<%= getFullImageUrl(service.details.keyFeaturesImage) %>" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="Key Features image preview">
                          <% } %>
                        </div>
                      </div>
                    </div>

                    <!-- Features List -->
                    <div class="row mt-4">
                      <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                          <h6 class="fw-medium mb-0">Features</h6>
                          <button type="button" class="btn btn-primary btn-sm" onclick="addFeature()">
                            <i class="fas fa-plus"></i> Add Feature
                          </button>
                        </div>
                        <div id="featuresContainer">
                          <% if (service.details?.features && service.details.features.length > 0) { %>
                            <% service.details.features.forEach((feature, index) => { %>
                              <div class="card mb-3 feature-item">
                                <div class="card-body">
                                  <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0 text-decoration-underline">Feature <%= index + 1 %></h6>
                                    <button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">
                                      <i class="fas fa-trash"></i>
                                    </button>
                                  </div>
                                  <div class="row g-3">
                                    <div class="col-md-8">
                                      <label class="form-label">Title</label>
                                      <input type="text" class="form-control feature-title" 
                                             value="<%= feature.title || '' %>" required>
                                    </div>
                                  </div>
                                  <div class="row g-3 mt-2">
                                    <div class="col-md-12">
                                      <label class="form-label">Description</label>
                                      <textarea class="form-control feature-description" rows="2" required><%= feature.description || '' %></textarea>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            <% }) %>
                          <% } %>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- FAQ Section Tab -->
              <div class="tab-pane fade" id="faq-section" role="tabpanel">
                <div class="card border shadow-sm">
                  <div class="card-body">
                    <!-- FAQ Header -->
                    <div class="row mb-4">
                      <div class="col-md-6">
                        <label class="form-label fw-medium">FAQ Title</label>
                        <input type="text" class="form-control" id="faqTitle" name="faqTitle" 
                               value="<%= service.details?.faqTitle || 'Frequently Asked Questions' %>">
                      </div>
                      <div class="col-md-6">
                        <label class="form-label fw-medium">FAQ Image</label>
                        <div class="input-group">
                          <input type="text" class="form-control" id="faqImage" name="faqImage" 
                                 value="<%= service.details?.faqImage || '' %>">
                          <button type="button" class="btn btn-outline-primary btn-upload-image" 
                                  data-target-input="faqImage" data-image-type="service">
                            <i class="fas fa-upload me-1"></i>Upload
                          </button>
                        </div>
                      </div>
                    </div>

                    <!-- FAQ Image Preview -->
                    <div class="row mt-3">
                      <div class="col-12">
                        <div id="faqImagePreview">
                          <% if (service.details?.faqImage) { %>
                            <img src="<%= getFullImageUrl(service.details.faqImage) %>" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="FAQ image preview">
                          <% } %>
                        </div>
                      </div>
                    </div>

                    <!-- FAQ List -->
                    <div class="row mt-4">
                      <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                          <h6 class="fw-medium mb-0">FAQ Items</h6>
                          <button type="button" class="btn btn-primary btn-sm" onclick="addFAQ()">
                            <i class="fas fa-plus"></i> Add FAQ
                          </button>
                        </div>
                        <div id="faqContainer">
                          <% if (service.details?.faq && service.details.faq.length > 0) { %>
                            <% service.details.faq.forEach((faq, index) => { %>
                              <div class="card mb-3 faq-item">
                                <div class="card-body">
                                  <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0 text-decoration-underline">FAQ <%= index + 1 %></h6>
                                    <button type="button" class="btn btn-danger btn-sm" onclick="removeFAQ(this)">
                                      <i class="fas fa-trash"></i>
                                    </button>
                                  </div>
                                  <div class="row g-3">
                                    <div class="col-md-6">
                                      <label class="form-label">ID (Auto-generated)</label>
                                      <input type="text" class="form-control faq-id" 
                                             value="<%= faq.id || 'faq-' + (index + 1) %>" readonly>
                                    </div>
                                    <div class="col-md-6">
                                      <label class="form-label">Expanded by Default</label>
                                      <select class="form-control faq-expanded">
                                        <option value="false" <%= !faq.isExpanded ? 'selected' : '' %>>No</option>
                                        <option value="true" <%= faq.isExpanded ? 'selected' : '' %>>Yes</option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="row g-3 mt-2">
                                    <div class="col-md-12">
                                      <label class="form-label">Question</label>
                                      <input type="text" class="form-control faq-question" 
                                             value="<%= faq.question || '' %>" required>
                                    </div>
                                  </div>
                                  <div class="row g-3 mt-2">
                                    <div class="col-md-12">
                                      <label class="form-label">Answer</label>
                                      <textarea class="form-control faq-answer" rows="3" required><%= faq.answer || '' %></textarea>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            <% }) %>
                          <% } %>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom Buttons -->
        <div class="bottom-buttons">
          <button type="reset" class="btn btn-secondary">
            <i class="fas fa-undo me-2"></i>Reset
          </button>
          <button type="submit" class="btn btn-primary" id="submitBtn">
            <i class="fas fa-save me-2"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
                <!-- Scripts -->
<script>
let originalFormData = null;
let featureIndex = <%= service.details?.features?.length || 0 %>;
let faqIndex = <%= service.details?.faq?.length || 0 %>;

document.addEventListener('DOMContentLoaded', function() {
  // Initialize form data
  originalFormData = <%- JSON.stringify(service) %>;
  
  // Set initial JSON values
  updateAllJsonInputs(originalFormData);

  // Initialize form handlers
  initializeFormHandlers();
});

function initializeFormHandlers() {
  // Form submission
  const form = document.getElementById('serviceDetailsForm');
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';

    try {
      updateJsonData();
      this.submit();
    } catch (error) {
      console.error('Error updating data:', error);
      showError('Failed to process form data. Please try again.');
      submitBtn.disabled = false;
      submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
    }
  });

  // Initialize image upload buttons
  document.querySelectorAll('.btn-upload-image').forEach(button => {
    button.addEventListener('click', function() {
      const targetInput = this.dataset.targetInput;
      const imageType = this.dataset.imageType;
      openImageUploader(targetInput, imageType);
    });
  });

  // Initialize image input change listeners for manual URL input
  const imageInputs = ['mainImage', 'keyFeaturesImage', 'faqImage'];
  imageInputs.forEach(inputId => {
    const input = document.getElementById(inputId);
    if (input) {
      input.addEventListener('input', function() {
        updateImagePreviewAfterUpload(inputId, this.value);
      });
    }
  });
}

function addFeature() {
  const container = document.getElementById('featuresContainer');
  const featureHtml = `
    <div class="card mb-3 feature-item">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h6 class="mb-0 text-decoration-underline">Feature ${featureIndex + 1}</h6>
          <button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">
            <i class="fas fa-trash"></i>
          </button>
        </div>
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label">Title</label>
            <input type="text" class="form-control feature-title" required>
          </div>
        </div>
        <div class="row g-3 mt-2">
          <div class="col-md-12">
            <label class="form-label">Description</label>
            <textarea class="form-control feature-description" rows="2" required></textarea>
          </div>
        </div>
      </div>
    </div>
  `;
  container.insertAdjacentHTML('beforeend', featureHtml);
  featureIndex++;
}

function removeFeature(button) {
  const featureItem = button.closest('.feature-item');
  if (featureItem) {
    featureItem.remove();
  }
}

function addFAQ() {
  const container = document.getElementById('faqContainer');
  const newFaqId = generateFAQId();
  const faqNumber = document.querySelectorAll('.faq-item').length + 1;
  const faqHtml = `
    <div class="card mb-3 faq-item">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h6 class="mb-0 text-decoration-underline">FAQ ${faqNumber}</h6>
          <button type="button" class="btn btn-danger btn-sm" onclick="removeFAQ(this)">
            <i class="fas fa-trash"></i>
          </button>
        </div>
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">ID (Auto-generated)</label>
            <input type="text" class="form-control faq-id" 
                   value="${newFaqId}" readonly>
          </div>
          <div class="col-md-6">
            <label class="form-label">Expanded by Default</label>
            <select class="form-control faq-expanded">
              <option value="false">No</option>
              <option value="true">Yes</option>
            </select>
          </div>
        </div>
        <div class="row g-3 mt-2">
          <div class="col-md-12">
            <label class="form-label">Question</label>
            <input type="text" class="form-control faq-question" required>
          </div>
        </div>
        <div class="row g-3 mt-2">
          <div class="col-md-12">
            <label class="form-label">Answer</label>
            <textarea class="form-control faq-answer" rows="3" required></textarea>
          </div>
        </div>
      </div>
    </div>
  `;
  container.insertAdjacentHTML('beforeend', faqHtml);
  faqIndex++;
}

function updateFAQId(questionInput) {
  // Không cần update ID nữa vì đã tự động theo số thứ tự
}

function removeFAQ(button) {
  const faqItem = button.closest('.faq-item');
  if (faqItem) {
    faqItem.remove();
    // Cập nhật lại số thứ tự và ID của tất cả FAQ
    updateFAQNumbers();
  }
}

function generateFAQId() {
  // Đếm số lượng FAQ hiện tại và tạo ID tiếp theo
  const existingFAQs = document.querySelectorAll('.faq-item');
  const nextNumber = existingFAQs.length + 1;
  return `faq-${nextNumber}`;
}

function updateFAQNumbers() {
  // Cập nhật lại tất cả FAQ ID và số thứ tự
  const faqItems = document.querySelectorAll('.faq-item');
  faqItems.forEach((item, index) => {
    const number = index + 1;
    const idInput = item.querySelector('.faq-id');
    const titleElement = item.querySelector('h6');
    
    if (idInput) {
      idInput.value = `faq-${number}`;
    }
    if (titleElement) {
      titleElement.textContent = `FAQ ${number}`;
    }
  });
}

function updateAllJsonInputs(data) {
  // Collect basic details data
  const details = {
    title: data.details?.title || data.name,
    description: data.details?.description || data.description,
    mainImage: data.details?.mainImage || '',
    overviewTitle: data.details?.overviewTitle || 'Service Overview',
    overviewDescription: data.details?.overviewDescription || '',
    additionalDescription: data.details?.additionalDescription || '',
    keyFeaturesTitle: data.details?.keyFeaturesTitle || 'Key Features',
    keyFeaturesImage: data.details?.keyFeaturesImage || '',
    faqTitle: data.details?.faqTitle || 'Frequently Asked Questions',
    faqImage: data.details?.faqImage || ''
  };

  document.getElementById('detailsJson').value = JSON.stringify(details);
  document.getElementById('featuresJson').value = JSON.stringify(data.details?.features || []);
  document.getElementById('faqJson').value = JSON.stringify(data.details?.faq || []);
}

function updateJsonData() {
  // Collect basic details data
  const details = {
    title: document.getElementById('detailsTitle').value,
    description: document.getElementById('detailsDescription').value,
    mainImage: document.getElementById('mainImage').value,
    overviewTitle: document.getElementById('overviewTitle').value,
    overviewDescription: document.getElementById('overviewDescription').value,
    additionalDescription: document.getElementById('additionalDescription').value,
    keyFeaturesTitle: document.getElementById('keyFeaturesTitle').value,
    keyFeaturesImage: document.getElementById('keyFeaturesImage').value,
    faqTitle: document.getElementById('faqTitle').value,
    faqImage: document.getElementById('faqImage').value
  };

  // Collect features data
  const features = [];
  document.querySelectorAll('.feature-item').forEach(item => {
    features.push({
      title: item.querySelector('.feature-title').value,
      description: item.querySelector('.feature-description').value
    });
  });

  // Collect FAQ data
  const faq = [];
  document.querySelectorAll('.faq-item').forEach(item => {
    faq.push({
      id: item.querySelector('.faq-id').value,
      question: item.querySelector('.faq-question').value,
      answer: item.querySelector('.faq-answer').value,
      isExpanded: item.querySelector('.faq-expanded').value === 'true'
    });
  });

  document.getElementById('detailsJson').value = JSON.stringify(details);
  document.getElementById('featuresJson').value = JSON.stringify(features);
  document.getElementById('faqJson').value = JSON.stringify(faq);
}

// Helper function để tạo full URL cho ảnh - tương tự như server-side helper
function getFullImageUrlJS(imagePath) {
  if (!imagePath) return '';
  
  // Nếu đã là full URL thì return luôn
  if (imagePath.startsWith('http')) {
    return imagePath;
  }
  
  // Lấy backend URL
  const backendUrl = '<%= (process.env.BACKEND_URL || "http://localhost:3001").replace(/\/$/, "") %>';
  
  // Xử lý đường dẫn
  let imgSrc = imagePath;
  if (!imgSrc.startsWith('/')) {
    imgSrc = '/uploads/' + imgSrc;
  }
  
  return backendUrl + imgSrc;
}

// Function để cập nhật image preview sau khi upload
function updateImagePreviewAfterUpload(targetInput, imagePath) {
  const fullImageUrl = getFullImageUrlJS(imagePath);
  
  switch(targetInput) {
    case 'mainImage':
      const mainPreview = document.getElementById('mainImagePreview');
      if (mainPreview) {
        mainPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 250px; width: auto; max-width: 100%; object-fit: contain;" alt="Main image preview">`;
      }
      break;
      
    case 'keyFeaturesImage':
      const featuresPreview = document.getElementById('keyFeaturesImagePreview');
      if (featuresPreview) {
        featuresPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="Key Features image preview">`;
      }
      break;
      
    case 'faqImage':
      const faqPreview = document.getElementById('faqImagePreview');
      if (faqPreview) {
        faqPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="FAQ image preview">`;
      }
      break;
  }
}

async function openImageUploader(targetInput, imageType) {
  return new Promise((resolve, reject) => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);

    fileInput.onchange = async function (e) {
      const file = e.target.files[0];
      if (!file) return reject(new Error('No file selected'));

      try {
        const formData = new FormData();
        formData.append('image', file);

        const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
        const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : null;
        if (uploadBtn) {
          uploadBtn.disabled = true;
          uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
        }

        const response = await fetch(`/admin/upload/image?imageType=${encodeURIComponent(imageType)}`, {
          method: 'POST',
          body: formData
        });

        if (!response.ok) {
          throw new Error('Upload failed');
        }

        const result = await response.json();
        if (!result.success) {
          throw new Error(result.error || 'Upload failed');
        }

        const input = document.getElementById(targetInput) || document.querySelector(`[name="${targetInput}"]`);
        if (!input) throw new Error('Target input not found');

        input.value = result.path;

        // Update image preview based on target input
        updateImagePreviewAfterUpload(targetInput, result.path);

        if (uploadBtn) {
          uploadBtn.disabled = false;
          uploadBtn.innerHTML = originalBtnHtml;
        }

        resolve(result);
      } catch (err) {
        if (uploadBtn) {
          uploadBtn.disabled = false;
          uploadBtn.innerHTML = originalBtnHtml;
        }
        console.error('Upload error:', err);
        showError('Upload failed: ' + (err.message || 'Unknown error'));
        reject(err);
      } finally {
        fileInput.remove();
      }
    };

    fileInput.click();
  });
}

function showSuccess(message) {
  // Create and show success alert
  const alert = document.createElement('div');
  alert.className = 'alert alert-success alert-dismissible fade show position-fixed';
  alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
  alert.innerHTML = `
    ${message}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  `;
  document.body.appendChild(alert);
  
  setTimeout(() => {
    if (alert.parentNode) {
      alert.parentNode.removeChild(alert);
    }
  }, 5000);
}

function showError(message) {
  // Create and show error alert
  const alert = document.createElement('div');
  alert.className = 'alert alert-danger alert-dismissible fade show position-fixed';
  alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
  alert.innerHTML = `
    ${message}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  `;
  document.body.appendChild(alert);
  
  setTimeout(() => {
    if (alert.parentNode) {
      alert.parentNode.removeChild(alert);
    }
  }, 5000);
}
</script>

<style>
.bottom-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid #dee2e6;
}

.content-with-fixed-buttons {
  /* Remove bottom padding since buttons are no longer fixed */
}

.btn-group .btn {
  margin-right: 2px;
}

.btn-group .btn:last-child {
  margin-right: 0;
}

.card-header h6 {
  color: var(--primary-dark);
}

.text-decoration-underline {
  text-decoration: underline;
  color: var(--primary-dark);
}

/* Image Preview Styles */
#mainImagePreview, #keyFeaturesImagePreview, #faqImagePreview {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}

#mainImagePreview:empty::before, 
#keyFeaturesImagePreview:empty::before, 
#faqImagePreview:empty::before {
  content: "No image selected";
  color: #6c757d;
  font-style: italic;
}

#mainImagePreview img, 
#keyFeaturesImagePreview img, 
#faqImagePreview img {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
