/* Custom Styles for Harmonia Booking System */

/* Arabic Font Support */
@font-face {
    font-family: 'Alexandria';
    src: url('../../assets/fonts/Alexandria-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Custom Utility Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

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

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

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

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

/* Custom Focus Styles */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Custom Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-300;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors duration-300;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition-colors duration-300;
}

/* Custom Card Styles */
.card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden;
}

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

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

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

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

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

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

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

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

/* Custom Progress Bar */
.progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-fill {
    @apply h-full bg-blue-600 transition-all duration-500;
}

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

.timeline::before {
    content: '';
    @apply absolute right-4 top-0 bottom-0 w-0.5 bg-gray-200;
}

.timeline-item {
    @apply relative flex items-center;
}

.timeline-dot {
    @apply w-8 h-8 rounded-full flex items-center justify-center z-10;
}

/* Custom Service Card */
.service-card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer transform hover:scale-105 transition-all duration-300;
}

.service-card.selected {
    @apply ring-2 ring-blue-500;
}

/* Custom Date Picker */
.date-grid {
    @apply grid grid-cols-1 md:grid-cols-7 gap-3;
}

.date-item {
    @apply border rounded-lg p-3 text-center cursor-pointer hover:bg-blue-50 border-blue-200 transition-colors;
}

.date-item.selected {
    @apply bg-blue-100 border-blue-500;
}

.date-item.disabled {
    @apply opacity-50 cursor-not-allowed border-gray-200;
}

/* Custom Time Grid */
.time-grid {
    @apply grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3;
}

.time-slot {
    @apply border rounded-lg p-3 text-center cursor-pointer hover:bg-green-50 border-green-200 transition-colors;
}

.time-slot.selected {
    @apply bg-green-100 border-green-500;
}

.time-slot.disabled {
    @apply opacity-50 cursor-not-allowed border-gray-200;
}

/* Custom Loading Spinner */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

/* Custom Alert Styles */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

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

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Custom Modal Styles */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-xl shadow-lg max-w-md w-full mx-4;
}

/* Custom Tooltip */
.tooltip {
    @apply relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded-lg opacity-0 pointer-events-none transition-opacity;
}

.tooltip:hover::after {
    @apply opacity-100;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .card {
        @apply rounded-lg;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-success {
        @apply px-4 py-2 text-sm;
    }
}

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

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply border-2 border-blue-600;
    }
    
    .card {
        @apply border-2 border-gray-300;
    }
}

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

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    
    /* Fix for iOS input zoom issue */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix for iOS button styling */
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix for iOS tap highlight */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix for iOS scrolling */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for iOS form elements */
    input, textarea, select {
        -webkit-user-select: text;
        -webkit-touch-callout: none;
    }
    
    /* Fix for iOS button touch targets */
    button, a, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Fix for iOS safe area */
    @supports (padding: max(0px)) {
        body {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
    }
}

/* Additional iOS fixes for form elements */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"] {
        font-size: 16px !important;
    }
}

/* Fix for iOS Safari viewport height */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
    
    .h-screen {
        height: -webkit-fill-available;
    }
}