/* Custom CSS for E-DR Mobile Service */

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

.mobile-nav-link {
  @apply text-gray-700 hover:text-primary transition-colors py-2 px-4 block;
}

/* Buttons */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors inline-flex items-center justify-center;
}

.btn-secondary {
  @apply bg-secondary text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors inline-flex items-center justify-center;
}

.btn-outline {
  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-semibold hover:bg-primary hover:text-white transition-colors inline-flex items-center justify-center;
}

/* Cards */
.service-card {
  @apply bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow border border-gray-100;
}

.service-icon {
  @apply w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center mb-4;
}

.feature-card {
  @apply text-center p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow;
}

.stat-card {
  @apply p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow;
}

.review-card {
  @apply bg-white p-6 rounded-lg shadow-md border border-gray-100;
}

.contact-card {
  @apply text-center p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-all cursor-pointer border border-gray-100;
}

.service-detail-card {
  @apply bg-white p-6 rounded-lg shadow-lg border border-gray-100 hover:shadow-xl transition-shadow;
}

.brand-card {
  @apply text-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow border border-gray-100;
}

.issue-card {
  @apply bg-white p-6 rounded-lg shadow-md border border-gray-100;
}

.tip-card {
  @apply p-4 rounded-lg;
}

.blog-post-card {
  @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden border border-gray-100;
}

.blog-image-placeholder {
  @apply bg-gray-100 h-48 flex items-center justify-center rounded-t-lg;
}

.status-guide-item {
  @apply p-4 bg-white rounded-lg shadow-sm border border-gray-100;
}

/* Forms */
.form-label {
  @apply block text-sm font-semibold text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors;
}

.form-select {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors bg-white;
}

.form-textarea {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors resize-vertical;
}

/* Status Badges */
.status-badge {
  @apply px-3 py-1 rounded-full text-sm font-semibold;
}

.status-pending {
  @apply bg-yellow-100 text-yellow-800;
}

.status-confirmed {
  @apply bg-blue-100 text-blue-800;
}

.status-in_progress {
  @apply bg-orange-100 text-orange-800;
}

.status-completed {
  @apply bg-green-100 text-green-800;
}

.status-cancelled {
  @apply bg-red-100 text-red-800;
}

.status-on_hold {
  @apply bg-gray-100 text-gray-800;
}

/* Timeline */
.timeline {
  @apply relative;
}

.timeline-item {
  @apply relative flex items-start pb-8;
}

.timeline-item:not(:last-child)::before {
  content: '';
  @apply absolute left-6 top-12 w-0.5 h-full bg-gray-300;
}

.timeline-marker {
  @apply w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mr-6 flex-shrink-0 relative z-10;
}

.timeline-item.current .timeline-marker {
  @apply bg-green-500;
}

.timeline-content {
  @apply flex-1 min-w-0;
}

/* Social Links */
.social-link {
  @apply w-10 h-10 text-white rounded-full flex items-center justify-center hover:opacity-80 transition-opacity;
}

/* FAQ */
.faq-item .faq-answer {
  @apply transition-all duration-300 ease-in-out;
}

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

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

/* Responsive utilities */
@media (max-width: 768px) {
  .mobile-menu-btn {
    @apply block;
  }
  
  .desktop-menu {
    @apply hidden;
  }
}

/* Loading states */
.loading {
  @apply opacity-50 pointer-events-none;
}

/* Hover effects */
.hover-lift:hover {
  @apply transform -translate-y-1 transition-transform duration-200;
}

/* Focus states for accessibility */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  @apply outline-none ring-2 ring-primary ring-opacity-50;
}

/* Print styles */
@media print {
  .no-print {
    @apply hidden;
  }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-blue-700;
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn-primary,
  .btn-secondary {
    @apply border-2 border-black;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}