/* Feature Demos Stylesheet */

/* Driver.js Theme Customization (Bootstrap Flatly colors) */
/* Minimal theming to avoid breaking functionality */
.driver-popover {
  border-color: #18BC9C !important;
  border-width: 2px !important;
}

.driver-popover-title {
  color: #2C3E50 !important;
  font-weight: 600 !important;
}

.driver-popover-description {
  color: #525252 !important;
}

.driver-popover-progress-text {
  color: #18BC9C !important;
}

/* Remove shadows from all popover buttons */
.driver-popover-footer button {
  box-shadow: none !important;
  text-shadow: none !important;
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Primary button styling for next/last button */
.driver-popover-footer button:last-child {
  background-color: #18BC9C !important;
  color: #fff !important;
  border-color: #18BC9C !important;
}

.driver-popover-footer button:last-child:hover {
  background-color: #15a589 !important;
}

/* Demo Container Styles */
.demo-container {
  background: #fff;
  border: 2px solid #ecf0f1;
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.demo-container h3 {
  color: #2C3E50;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Search Demo Styles */
.demo-search-input {
  border: 2px solid #ecf0f1;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.demo-search-input:focus {
  border-color: #18BC9C;
  box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.25);
  outline: none;
}

.demo-result-item {
  background: #fff;
  border: 1px solid #ecf0f1;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.demo-result-item:hover {
  border-color: #18BC9C;
  box-shadow: 0 0.25rem 0.5rem rgba(24, 188, 156, 0.2);
  transform: translateY(-2px);
}

.demo-result-item h5 {
  color: #2C3E50;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.demo-result-item .text-muted {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.demo-result-item .result-excerpt {
  font-size: 0.9375rem;
  color: #7b8a8b;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.demo-result-item mark {
  background-color: #fff3cd;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  color: #856404;
}

.demo-result-item .badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  font-weight: 500;
}

.demo-results-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #7b8a8b;
}

.demo-results-empty i {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1rem;
}

/* Batch Upload Demo Styles */
.demo-dropzone {
  border: 3px dashed #18BC9C;
  border-radius: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  background-color: rgba(24, 188, 156, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.demo-dropzone:hover,
.demo-dropzone.drag-over {
  background-color: rgba(24, 188, 156, 0.1);
  border-color: #15a589;
  transform: scale(1.02);
}

.demo-dropzone i {
  font-size: 3rem;
  color: #18BC9C;
  margin-bottom: 1rem;
}

.demo-dropzone p {
  color: #7b8a8b;
  margin-bottom: 0.5rem;
}

.demo-dropzone .text-primary {
  color: #18BC9C !important;
  font-weight: 500;
}

.demo-file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.demo-file-card {
  position: relative;
  border: 1px solid #ecf0f1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  transition: all 0.2s ease;
}

.demo-file-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.demo-file-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.demo-file-card .file-name {
  padding: 0.5rem;
  font-size: 0.75rem;
  color: #2C3E50;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-file-card .remove-file {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-file-card .remove-file:hover {
  background: #c0392b;
  transform: scale(1.1);
}

/* Step Indicator */
.step-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ecf0f1;
  color: #7b8a8b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.step-circle.active {
  background-color: #18BC9C;
  color: #fff;
  transform: scale(1.15);
}

.step-circle.completed {
  background-color: #3498db;
  color: #fff;
}

.step-line {
  width: 60px;
  height: 2px;
  background-color: #ecf0f1;
  transition: all 0.3s ease;
}

.step-line.active {
  background-color: #18BC9C;
}

/* Page Card (for review section) */
.page-card {
  border: 1px solid #ecf0f1;
  border-radius: 0.5rem;
  padding: 1rem;
  background: #fff;
  transition: all 0.2s ease;
}

.page-card:hover {
  border-color: #18BC9C;
  box-shadow: 0 0.125rem 0.25rem rgba(24, 188, 156, 0.15);
}

.page-card img {
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
}

.page-card .btn-group {
  display: flex;
  gap: 0.5rem;
}

.page-card .btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
}

/* Progress Bar Animation */
.demo-progress-bar {
  height: 30px;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #ecf0f1;
  margin-bottom: 1rem;
}

.demo-progress-bar .progress-bar {
  background-color: #18BC9C;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
  transition: width 0.3s ease;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .demo-container {
    padding: 1.25rem;
  }

  .demo-dropzone {
    padding: 2rem 0.75rem;
  }

  .demo-dropzone i {
    font-size: 2rem;
  }

  .demo-file-preview {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
  }

  .demo-file-card img {
    height: 100px;
  }

  .step-indicator {
    gap: 0.5rem;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .step-line {
    width: 30px;
  }

  .driver-popover {
    max-width: 90vw !important;
  }
}

/* Feature Card Hover Effect */
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.feature-icon-circle {
  width: 80px;
  height: 80px;
}

/* Demo Button Styles */
.demo-try-button {
  margin-top: 1rem;
  transition: all 0.2s ease;
}

.demo-try-button:hover {
  transform: translateX(3px);
}

/* Loading State */
.demo-loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #ecf0f1;
  border-top-color: #18BC9C;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Result Count Badge */
.result-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #18BC9C;
  color: #fff;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Demo Section Divider */
.demo-section-divider {
  border-top: 2px solid #ecf0f1;
  margin: 3rem 0;
}