/* 
 * Tailwind Custom CSS for Zaimeasy
 * This file contains custom styles that extend Tailwind CSS
 */

/* ============================================
   CUSTOM UTILITY CLASSES
   ============================================ */

/* Text Shadow Utilities */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #0e1010 0%, #0A2463 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Transitions */
.transition-slow {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

/* Additional Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Custom Border Radius */
.rounded-custom {
  border-radius: 12px;
}

.rounded-custom-lg {
  border-radius: 20px;
}

/* Custom Shadows */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.shadow-medium {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.shadow-hard {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

/* ============================================
   CUSTOM COMPONENT STYLES
   ============================================ */

/* Custom Button Styles */
.btn-primary {
  @apply bg-zaimeasyTeal text-white px-6 py-3 rounded-lg font-medium 
         hover:bg-teal-500 transition-all duration-300 
         shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}

.btn-secondary {
  @apply bg-zaimeasyNavy text-white px-6 py-3 rounded-lg font-medium 
         hover:bg-navy-700 transition-all duration-300 
         shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}

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

/* Card Styles */
.card {
  @apply bg-white p-6 rounded-xl shadow-soft hover:shadow-medium 
         transition-all duration-300 border border-gray-100;
}

.card-hover {
  @apply card hover:-translate-y-2 hover:border-zaimeasyTeal/20;
}

/* Client Card */
.client-card {
  @apply bg-gradient-to-br from-zaimeasyLight to-white p-6 rounded-2xl 
         shadow-lg hover:shadow-xl transition-all duration-300 
         border border-gray-200 hover:-translate-y-2;
}

/* Badge Styles */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-primary {
  @apply badge bg-zaimeasyTeal/10 text-zaimeasyTeal;
}

.badge-secondary {
  @apply badge bg-zaimeasyNavy/10 text-zaimeasyNavy;
}

.badge-client {
  @apply badge bg-zaimeasyTeal/10 text-zaimeasyTeal;
}

/* Section Styles */
.section-padding {
  @apply py-16 md:py-24;
}

.section-title {
  @apply text-2xl md:text-3xl lg:text-4xl font-heading text-zaimeasyNavy 
         text-center mb-4;
}

.section-subtitle {
  @apply text-gray-600 text-center max-w-2xl mx-auto mb-12 text-lg;
}

/* Form Styles */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg 
         focus:outline-none focus:ring-2 focus:ring-zaimeasyTeal 
         focus:border-transparent transition-all duration-300 
         placeholder-gray-400;
}

.form-label {
  @apply block text-gray-700 mb-2 font-medium;
}

.form-error {
  @apply text-red-500 text-sm mt-1;
}

/* ============================================
   CUSTOM BACKGROUNDS
   ============================================ */

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, #2DCCD3 0%, #0A2463 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFA500 100%);
}

.bg-gradient-light {
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
}

/* Pattern Backgrounds */
.bg-pattern-dots {
  background-image: radial-gradient(#2DCCD3 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-grid {
  background-image: 
    linear-gradient(to right, #F8FAFC 1px, transparent 1px),
    linear-gradient(to bottom, #F8FAFC 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============================================
   CUSTOM TYPOGRAPHY
   ============================================ */

/* Heading Styles */
.heading-1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-heading font-bold;
}

.heading-2 {
  @apply text-3xl md:text-4xl lg:text-5xl font-heading font-semibold;
}

.heading-3 {
  @apply text-2xl md:text-3xl font-heading font-semibold;
}

.heading-4 {
  @apply text-xl md:text-2xl font-heading font-medium;
}

/* Text Styles */
.text-lead {
  @apply text-lg md:text-xl text-gray-600;
}

.text-body {
  @apply text-base text-gray-700;
}

.text-small {
  @apply text-sm text-gray-500;
}

/* ============================================
   CUSTOM LAYOUT
   ============================================ */

/* Container */
.container-custom {
  @apply container mx-auto px-4 sm:px-6 lg:px-8;
}

/* Grid */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* ============================================
   CUSTOM EFFECTS
   ============================================ */

/* Hover Effects */
.hover-lift {
  @apply transition-transform duration-300 hover:-translate-y-2;
}

.hover-glow {
  @apply transition-shadow duration-300 hover:shadow-lg;
}

.hover-scale {
  @apply transition-transform duration-300 hover:scale-105;
}

/* Glass Morphism */
.glass {
  @apply bg-white/80 backdrop-blur-lg border border-white/20;
}

.glass-dark {
  @apply bg-gray-900/80 backdrop-blur-lg border border-white/10;
}

/* ============================================
   ZAIMEASY SPECIFIC STYLES
   ============================================ */

/* Feature Item */
.feature-item {
  @apply flex items-start space-x-4 p-4 rounded-lg 
         hover:bg-zaimeasyLight transition-colors duration-300;
}

.feature-icon {
  @apply w-12 h-12 bg-zaimeasyTeal/10 rounded-full 
         flex items-center justify-center flex-shrink-0;
}

.feature-content {
  @apply flex-1;
}

/* Testimonial Card */
.testimonial-card {
  @apply bg-white p-6 rounded-xl shadow-soft border border-gray-100 
         hover:shadow-medium transition-all duration-300;
}

.testimonial-avatar {
  @apply w-14 h-14 rounded-full bg-gradient-to-r from-zaimeasyTeal 
         to-zaimeasyNavy flex items-center justify-center text-white 
         font-bold text-lg;
}

/* Client Avatar */
.client-avatar {
  @apply w-20 h-20 rounded-full flex items-center justify-center 
         text-white font-bold text-xl shadow-md;
}

/* Pricing Card */
.pricing-card {
  @apply bg-white p-8 rounded-xl shadow-soft border border-gray-200 
         hover:shadow-hard transition-all duration-300;
}

.pricing-card-popular {
  @apply pricing-card border-2 border-zaimeasyTeal relative;
}

.pricing-badge {
  @apply absolute top-0 right-0 bg-zaimeasyTeal text-white text-xs 
         font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg;
}

/* Notification */
.custom-notification {
  min-width: 300px;
  max-width: 400px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sticky Nav Animation */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ============================================
   MOBILE MENU ANIMATIONS
   ============================================ */

/* Mobile Menu */
.mobile-menu-open {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
  overflow: hidden;
}

.mobile-menu-closed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
  .mobile-text-center {
    text-align: center;
  }
  
  .mobile-stack {
    flex-direction: column;
  }
  
  .mobile-full-width {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .tablet-center {
    text-align: center;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .no-print {
    display: none !important;
  }
  
  .print-black {
    color: black !important;
    background: white !important;
  }
  
  .break-after {
    page-break-after: always;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus Styles for Accessibility */
.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-zaimeasyTeal 
         focus:ring-offset-2;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to Main Content */
.skip-to-content {
  @apply sr-only focus:not-sr-only focus:absolute focus:top-4 
         focus:left-4 focus:z-50 focus:bg-white focus:px-4 
         focus:py-2 focus:rounded focus:shadow-lg;
}

/* ============================================
   DARK MODE (Optional - agar aap add karna chahein)
   ============================================ */

@media (prefers-color-scheme: dark) {
  .dark\:bg-dark {
    background-color: #1a202c;
  }
  
  .dark\:text-light {
    color: #f7fafc;
  }
  
  .dark\:border-gray-700 {
    border-color: #4a5568;
  }
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */

/* For Webkit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #2DCCD3;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0A2463;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2DCCD3 #f1f1f1;
}

/* Hide Scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* ============================================
   HELPER CLASSES
   ============================================ */

/* Spacing */
.mt-negative {
  margin-top: -1rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: 1/1;
}

.aspect-video {
  aspect-ratio: 16/9;
}

.aspect-portrait {
  aspect-ratio: 3/4;
}

/* Overflow */
.overflow-visible {
  overflow: visible;
}

/* Z-index */
.z-60 {
  z-index: 60;
}

.z-70 {
  z-index: 70;
}

.z-80 {
  z-index: 80;
}

.z-90 {
  z-index: 90;
}

.z-100 {
  z-index: 100;
}

/* Opacity */
.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

/* Back to Top Button */
#back-to-top {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
.group:hover .group-hover\:scale-150 {
  transform: scale(1.5);
}

/* Smooth transitions */
.transition-all {
  transition: all 0.3s ease;
}

/* ============================================
   CLIENT SECTION SPECIFIC STYLES
   ============================================ */

/* Client Stats */
.client-stats {
  @apply text-center p-4 bg-white rounded-xl shadow-sm 
         hover:shadow-md transition-shadow duration-300;
}

/* Client Feature Badge */
.client-feature-badge {
  @apply px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded 
         hover:bg-zaimeasyTeal/10 hover:text-zaimeasyTeal 
         transition-colors duration-200;
}

/* Client Testimonial */
.client-testimonial {
  @apply bg-white p-6 rounded-xl shadow-sm border border-gray-200 
         hover:border-zaimeasyTeal/30 transition-all duration-300;
}

/* Client CTA */
.client-cta {
  @apply inline-block bg-gradient-to-r from-zaimeasyTeal to-zaimeasyNavy 
         rounded-2xl p-1 hover:shadow-lg transition-shadow duration-300;
}

.client-cta-inner {
  @apply bg-white rounded-xl p-8 hover:bg-gray-50 transition-colors duration-300;
}

/* Client Coming Soon */
.client-coming-soon {
  @apply bg-gradient-to-br from-gray-50 to-white p-6 rounded-2xl 
         shadow-lg border border-gray-200 border-dashed 
         hover:shadow-xl transition-all duration-300;
}

/* Client Details */
.client-details-item {
  @apply flex items-center text-sm text-gray-600 hover:text-gray-800 
         transition-colors duration-200;
}

.client-details-icon {
  @apply w-5 h-5 rounded-full flex items-center justify-center 
         mr-2 flex-shrink-0;
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Loading animation */
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   RESPONSIVE CLIENT SECTION
   ============================================ */

@media (max-width: 640px) {
  .client-card {
    @apply p-4;
  }
  
  .client-avatar {
    @apply w-16 h-16 text-lg;
  }
  
  .client-cta-inner {
    @apply p-6;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .client-card {
    @apply p-5;
  }
}

/* ============================================
   ANIMATION DELAYS
   ============================================ */

.animation-delay-100 {
  animation-delay: 100ms;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

/* ============================================
   UTILITY FOR CLIENT GRID
   ============================================ */

.grid-clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .grid-clients {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .grid-clients {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-clients {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   INTERACTION STATES
   ============================================ */

.active-client {
  @apply border-2 border-zaimeasyTeal shadow-lg;
}

.hover\:active-client:hover {
  @apply border-2 border-zaimeasyTeal shadow-lg;
}

/* ============================================
   ACCESSIBILITY FOR CLIENT CARDS
   ============================================ */

.client-card:focus {
  @apply outline-none ring-2 ring-zaimeasyTeal ring-offset-2;
}

/* ============================================
   PRINT OPTIMIZATION FOR CLIENTS
   ============================================ */

@media print {
  .client-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .client-cta {
    display: none !important;
  }
}