/* Custom Styles for Citrus Egypt Exports */

/* Base Styles */
* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Arabic Font */
body[dir="rtl"] {
    font-family: 'Tajawal', sans-serif;
}

/* Loading Screen */
#loading-screen {
    transition: opacity 0.5s ease-in-out;
}

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

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #FFA500;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link-mobile {
    @apply block px-4 py-3 text-gray-700 hover:text-primary hover:bg-gray-50 transition-all duration-300 rounded-lg font-medium;
}

.nav-link-mobile.active {
    @apply text-primary bg-orange-50;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center px-8 py-4 bg-primary text-white font-semibold rounded-full hover:bg-orange-600 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply inline-flex items-center px-8 py-4 bg-transparent text-white border-2 border-white font-semibold rounded-full hover:bg-white hover:text-primary transition-all duration-300;
}

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

/* Card Styles */
.product-card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 overflow-hidden;
}

.testimonial-card {
    @apply bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
}

.certificate-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center;
}

.country-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center;
}

/* Badge Styles */
.badge {
    @apply inline-block px-3 py-1 bg-orange-100 text-orange-800 text-sm font-medium rounded-full;
}

/* Accordion Styles */
.accordion-header {
    @apply flex justify-between items-center w-full p-6 text-left bg-white border border-gray-200 rounded-t-lg hover:bg-gray-50 transition-colors duration-300;
}

.accordion-content {
    @apply p-6 border border-t-0 border-gray-200 rounded-b-lg bg-gray-50;
}

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

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

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

/* Pulse Animation */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Smooth transitions for language toggle */
[data-en], [data-ar] {
    transition: opacity 0.3s ease;
}

/* RTL Styles */
[dir="rtl"] .nav-link::after {
    right: 0;
    left: auto;
}

[dir="rtl"] .flex-row-reverse {
    flex-direction: row-reverse;
}

/* Mobile Menu Animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#mobile-menu.show {
    max-height: 400px;
}

/* Scroll to Top Button */
#scroll-to-top {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#scroll-to-top.show {
    transform: scale(1);
}

/* Product Filter */
.filter-btn {
    @apply px-6 py-2 rounded-full border-2 border-gray-300 text-gray-600 hover:border-primary hover:text-primary transition-all duration-300;
}

.filter-btn.active {
    @apply border-primary text-primary bg-orange-50;
}

/* FAQ Category Buttons */
.faq-category-btn {
    @apply p-6 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center cursor-pointer border-2 border-transparent;
}

.faq-category-btn.active {
    @apply border-primary bg-orange-50;
}

.faq-category-btn:hover {
    @apply border-primary/50;
}

/* Timeline Styles */
.timeline-item {
    @apply relative pl-8 pb-8;
}

.timeline-item::before {
    content: '';
    @apply absolute left-0 top-2 w-4 h-4 bg-primary rounded-full;
}

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

/* Map Styles */
.map-container {
    @apply relative overflow-hidden rounded-2xl shadow-lg;
}

.map-pin {
    @apply absolute w-4 h-4 bg-primary border-2 border-white rounded-full shadow-lg animate-ping;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply border-2 border-black;
    }
    
    .nav-link {
        @apply border-b border-transparent hover:border-black;
    }
}

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