/* Custom Styles for CleanSum */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Base styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Navigation */
.nav-link {
  @apply text-gray-700 hover:text-primary font-medium transition-colors;
}

/* Buttons */
.btn-primary {
  @apply bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-all shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply bg-secondary hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-all shadow-lg hover:shadow-xl;
}

.btn-outline {
  @apply border-2 border-primary text-primary hover:bg-primary hover:text-white font-bold py-3 px-6 rounded-lg transition-all;
}

.btn-white {
  @apply bg-white text-primary hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition-all shadow-lg;
}

/* Floating Action Buttons */
.floating-btn {
  @apply w-14 h-14 rounded-full shadow-lg flex items-center justify-center text-white transition-all hover:scale-110;
}

/* Feature Cards */
.feature-card {
  @apply bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow text-center;
}

.feature-icon {
  @apply inline-flex items-center justify-center w-20 h-20 bg-primary/10 text-primary rounded-full mb-4;
}

/* Service Cards */
.service-card {
  @apply bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 text-center;
}

.service-icon-lg {
  @apply inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-primary/10 to-secondary/10 text-primary rounded-full mb-4 group-hover:scale-110 transition-transform;
}

/* Process Steps */
.process-step {
  @apply inline-flex items-center justify-center w-16 h-16 bg-primary text-white rounded-full text-2xl font-bold mb-4 mx-auto;
}

/* Contact Cards */
.contact-card {
  @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow text-center hover:-translate-y-1 transition-transform;
}

/* Section Titles */
.section-title {
  @apply text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Line clamp utilities */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Scroll margin for anchor links */
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Responsive table */
@media (max-width: 768px) {
  table {
    font-size: 0.875rem;
  }
}

/* Form focus styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Loading spinner */
.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #10b981;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success/Error messages */
.alert-success {
  @apply bg-green-50 border border-green-200 text-green-800 p-4 rounded-lg;
}

.alert-error {
  @apply bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg;
}

/* Hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Badge styles */
.badge {
  @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-primary {
  @apply bg-primary text-white;
}

.badge-secondary {
  @apply bg-secondary text-white;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(to right, #10b981, #14b8a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Print styles */
@media print {
  .floating-btn,
  nav,
  footer {
    display: none !important;
  }
}