/* ===== Tailwind CSS Base ===== */
/* Note: Tailwind CSS is loaded via CDN in the HTML head */

/* ===== Custom Styles ===== */

/* ===== Background Styles ===== */
/* Home Page Background */
.hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available; /* برای iOS */
    min-height: 100vh;
    z-index: -1;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* فعال‌سازی GPU acceleration */
    transform: translateZ(0);
    will-change: transform; /* بهینه‌سازی رندر */
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* رفع مشکل viewport در iOS */
@supports (-webkit-touch-callout: none) {
    .hero-bg {
        height: -webkit-fill-available;
        width: 100vw;
    }
}

/* بهینه‌سازی برای scroll در iOS */
body {
    -webkit-overflow-scrolling: touch;
}
.checkout-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available; /* برای iOS */
    min-height: 100vh;
    z-index: -1;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* فعال‌سازی GPU */
    transform: translateZ(0);
    will-change: transform; /* بهینه‌سازی رندر */
}

.checkout-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* رفع مشکلات iOS */
@supports (-webkit-touch-callout: none) {
    .checkout-bg {
        height: -webkit-fill-available;
        width: 100vw;
    }
}

/* بهینه‌سازی اسکرول */
body {
    -webkit-overflow-scrolling: touch;
}
/* ===== Custom scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #6A00F4;
    border-radius: 4px;
}

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

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

/* ===== Instagram responsive container ===== */
.instagram-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Adjust this value based on content */
    overflow: hidden;
}

.instagram-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .instagram-container {
        padding-bottom: 120%; /* Taller for mobile */
    }
}

/* ===== Section spacing for anchor links ===== */
.section-anchor {
    scroll-margin-top: 80px;
}

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

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

.animate-fade-in:nth-child(1) { animation-delay: 0.1s; }
.animate-fade-in:nth-child(2) { animation-delay: 0.2s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.3s; }
.animate-fade-in:nth-child(4) { animation-delay: 0.4s; }

@keyframes color-change {
    0% { color: #6A00F4; }
    25% { color: #FF6BB5; }
    50% { color: #FFD8F2; }
    75% { color: #FF6BB5; }
    100% { color: #6A00F4; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes gradient-shift {
    0%, 100% { background-position: '0% 50%'; }
    50% { background-position: '100% 50%'; }
}

.animate-color-change {
    animation: color-change 4s infinite alternate;
}

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

.animate-gradient-shift {
    animation: gradient-shift 3s ease infinite;
    background-size: 200% auto;
}

/* ===== Utility Classes ===== */
/* Gradient text utility */
.gradient-text {
    @apply bg-gradient-to-r from-grad-start to-grad-end bg-clip-text text-transparent;
}

/* Button hover effect */
.btn-hover {
    @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
}

/* Card hover effect */
.card-hover {
    @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl;
}

/* ===== Responsive Adjustments ===== */
/* Ensure proper text direction for RTL */
[dir="rtl"] {
    text-align: right;
}

/* Adjust padding/margin for mobile */
@media (max-width: 768px) {
    .section-padding {
        @apply px-4 py-6;
    }
    
    .text-responsive {
        @apply text-lg;
    }
}

/* ===== Print Styles ===== */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
}

/* ===== Accessibility ===== */
/* Focus styles for better accessibility */
a:focus, button:focus, input:focus, textarea:focus {
    @apply outline-none ring-2 ring-grad-start ring-offset-2;
}

/* Skip to content link for screen readers */
.skip-to-content {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-grad-start text-white px-4 py-2 rounded;
}

/* ===== Performance Optimizations ===== */
/* Hardware acceleration for smooth animations */
.animate-float, .animate-spin-slow, .animate-gradient-shift {
    @apply will-change-transform;
}

/* Image optimization */
img {
    @apply max-w-full h-auto;
}

/* ===== Custom Components ===== */
/* Navigation link active state */
.nav-link.active {
    @apply bg-white/30 text-white font-semibold;
}

/* Map container */
.map-container {
    @apply relative h-64 md:h-80 rounded-xl overflow-hidden;
}

/* Contact card styling */
.contact-card {
    @apply bg-white rounded-2xl shadow-xl p-6 md:p-8 relative overflow-hidden;
}

/* Payment section styling */
.payment-section {
    @apply mt-12 mb-16 text-center;
}

/* Footer styling */
footer {
    @apply bg-white/90 backdrop-blur-sm py-8 text-center text-gray-600;
}

/* Cookie banner */
.cookie-banner {
    @apply fixed bottom-0 left-0 right-0 bg-white shadow-2xl p-4 transform transition-transform duration-500 z-50;
}

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

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

/* Required field indicator */
.required {
    @apply text-red-500;
}

/* Error message styling */
.error-message {
    @apply text-red-500 text-sm mt-1;
}

/* ===== Z-index Management ===== */
.z-50 { z-index: 50; }
.z-40 { z-index: 40; }
.z-30 { z-index: 30; }
.z-20 { z-index: 20; }
.z-10 { z-index: 10; }
.z-0 { z-index: 0; }
.z-negative { z-index: -1; }

/* ===== Responsive Breakpoints ===== */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-sm {
        @apply max-w-540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container-md {
        @apply max-w-720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container-lg {
        @apply max-w-960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container-xl {
        @apply max-w-1140px;
    }
}

/* XXL devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container-xxl {
        @apply max-w-1320px;
    }
}

/* ===== Page Specific Styles ===== */
/* Home Page Specific Styles */
.home-page .hero-content h1 {
    @apply text-4xl md:text-6xl font-bold mb-4 animate-float;
}

/* Checkout Page Specific Styles */
.checkout-page .hero-content h1 {
    @apply text-4xl md:text-6xl font-bold mb-4 animate-float;
}

.checkout-page .form-section {
    @apply border-b border-gray-200 pb-6;
}

.checkout-page .form-section-title {
    @apply text-2xl font-bold mb-6 bg-gradient-to-r from-grad-start to-grad-end bg-clip-text text-transparent;
}

.checkout-page .in-store-pickup-label {
    @apply flex items-center p-4 border-2 border-purple-200 rounded-lg bg-purple-50 cursor-pointer hover:bg-purple-100 transition-colors duration-300;
}

.checkout-page .in-store-pickup-label svg {
    @apply w-6 h-6 text-purple-600 ml-3;
}

.checkout-page .in-store-pickup-label p:first-child {
    @apply font-semibold text-purple-800;
}

.checkout-page .in-store-pickup-label p:last-child {
    @apply text-sm text-purple-600;
}

.checkout-page .payment-method-label {
    @apply flex items-center p-4 border-2 border-grad-start rounded-lg bg-purple-50;
}

.checkout-page .payment-method-label .payment-icon {
    @apply w-10 h-10 bg-gradient-to-r from-grad-start to-grad-end rounded-lg flex items-center justify-center ml-3;
}

.checkout-page .payment-method-label .payment-icon svg {
    @apply w-6 h-6 text-white;
}

.checkout-page .order-summary {
    @apply bg-gray-50 rounded-lg p-6;
}

.checkout-page .order-summary-row {
    @apply flex justify-between;
}

.checkout-page .order-summary-total {
    @apply border-t border-gray-300 pt-4 mt-4;
}

.checkout-page .order-summary-total .total-label {
    @apply text-lg font-bold;
}

.checkout-page .order-summary-total .total-amount {
    @apply text-xl font-bold text-grad-start;
}

.checkout-page .security-badges {
    @apply mt-8 text-center;
}

.checkout-page .security-badges p {
    @apply text-gray-600 mb-4;
}

.checkout-page .security-badges .badge {
    @apply bg-gray-100 px-4 py-2 rounded-lg text-sm font-semibold text-gray-700;
}

/* ===== Loading States ===== */
.loading-spinner {
    @apply animate-spin -ml-1 mr-3 h-5 w-5 text-white;
}

/* ===== Custom Scrollbar for Webkit ===== */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6A00F4;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #FF6BB5;
}

/* ===== Utility Classes for Spacing ===== */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ===== Responsive Text Sizes ===== */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

/* ===== Mobile Navigation Styles ===== */
/* استایل‌های سفارشی برای هدر موبایل */
@media (max-width: 767px) {
    .nav-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    .nav-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
    .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}