/* Custom styles */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

/* Font family */
.font-vazirmatn {
    font-family: 'Vazirmatn', sans-serif;
}

/* Custom colors */
.bg-primary {
    background-color: #4F46E5;
}

.text-primary {
    color: #4F46E5;
}

/* Custom animations */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Modal animations */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Custom shadows */
.shadow-custom {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Custom buttons */
.btn-primary {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-300;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition duration-300;
}

/* Custom cards */
.card {
    @apply bg-white rounded-lg shadow-custom p-6;
}

/* Custom form elements */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent;
}

.form-select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white;
}

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

/* Custom alerts */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-700;
}

.alert-error {
    @apply bg-red-100 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 text-blue-700;
}

/* Custom badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-indigo-100 text-indigo-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-error {
    @apply bg-red-100 text-red-800;
}

/* Custom tables */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

/* Custom pagination */
.pagination {
    @apply flex justify-center space-x-2;
}

.pagination-item {
    @apply px-4 py-2 border rounded-lg hover:bg-gray-100;
}

.pagination-active {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
}

/* Custom loading spinner */
.spinner {
    @apply animate-spin h-5 w-5 text-indigo-600;
}

/* Custom tooltips */
.tooltip {
    @apply relative inline-block;
}

.tooltip-text {
    @apply invisible absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg opacity-0 transition-opacity duration-300;
}

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

/* Custom modals */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-content {
    @apply relative bg-white rounded-lg mx-auto my-8 max-w-lg p-6;
}

.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50;
}

/* Custom dropdowns */
.dropdown {
    @apply relative inline-block;
}

.dropdown-content {
    @apply absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5;
}

/* Custom tabs */
.tabs {
    @apply flex border-b border-gray-200;
}

.tab {
    @apply px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.tab-active {
    @apply border-indigo-500 text-indigo-600;
}

/* Custom progress bars */
.progress {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-bar {
    @apply bg-indigo-600 h-2.5 rounded-full;
}

/* Custom toasts */
.toast {
    @apply fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-warning {
    @apply bg-yellow-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

/* Custom image styles */
.circle-img-parent {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-img-parent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

/* Hidden scrollbars */
#loop-carousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#loop-carousel::-webkit-scrollbar {
    display: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom animations */
@keyframes scrollBounce {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(calc(-50% + 100vw));
    }
    100% {
        transform: translateX(0%);
    }
}

.animate-scroll-bounce {
    animation: scrollBounce 20s ease-in-out infinite alternate;
}

@keyframes scroll-x-left-right {
    0%, 100% { 
        transform: translateX(0); 
    }
    50% { 
        transform: translateX(-200px); 
    }
}

.animate-scroll-x {
    animation: scroll-x-left-right 8s ease-in-out infinite;
}

@keyframes scroll {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-100%); 
    }
}

.animate-scroll {
    animation: scroll 40s linear infinite;
}

/* Swiper customizations */
.swiper-slide {
    transition: transform 0.5s ease-in-out;
}

.swiper::-webkit-scrollbar {
    display: none;
}

.swiper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .card {
        @apply p-4;
    }
    
    .modal-content {
        @apply mx-4 my-4 max-w-sm;
    }
    
    .table th,
    .table td {
        @apply px-3 py-2;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .card {
        @apply bg-gray-800 text-white;
    }
    
    .form-input,
    .form-select {
        @apply bg-gray-700 border-gray-600 text-white;
    }
    
    .table th {
        @apply bg-gray-700 text-gray-300;
    }
    
    .table td {
        @apply text-gray-400;
    }
}

/* فرم‌های رنگی و فوکوس جذاب */
.form-input, input[type="email"], input[type="password"], input[type="text"], input[type="tel"], textarea, select {
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.2);
}

/* دکمه پرایمری گرادیانی */
.btn-primary {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: transform 0.1s ease, opacity 0.2s ease;
}
.btn-primary:hover { opacity: .95; }
.btn-primary:active { transform: translateY(1px); }

/* خطای فیلدها */
.field-error { color: #dc2626; font-size: .75rem; margin-top: .25rem; }

/* Text selection styles */
::selection {
    background-color: #f3f4f6;
    color: #000000;
}

::-moz-selection {
    background-color: #f3f4f6;
    color: #000000;
}