.submit-btn {
    @apply w-full flex justify-center rounded-md bg-blue-600 px-3 py-3 text-sm/6 font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all;
}

.otp-input {
    @apply w-14 h-14 text-center text-2xl font-bold border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-400 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-all;
}

.login-timer_text {
    @apply text-center text-sm text-gray-500 dark:text-gray-300;
}

.resend-code {
    @apply flex items-center justify-center gap-2 text-blue-500 hover:text-blue-600 transition-all;
}


/* Product Card Styles */
.product-card {
    @apply relative bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl;
}

.product-card_header {
    @apply absolute top-2 left-2 right-2 z-10 flex items-center justify-between;
}

.product-card_badge {
    @apply bg-red-500 text-white text-xs px-2 py-1 rounded-full;
}

.product-card_img {
    @apply w-full h-48 object-contain p-4 transition-opacity duration-300;
}

.product-card_link {
    @apply block text-gray-800 dark:text-gray-200 text-sm line-clamp-2 hover:text-blue-500 transition-colors;
}

.product-card_price-wrapper {
    @apply flex items-center justify-between;
}

.product-card_rate {
    @apply flex flex-col gap-y-1;
}

.product-card_price {
    @apply flex flex-col items-end gap-y-1;
}

    .product-card_price del {
        @apply text-gray-400 text-xs;
    }

    .product-card_price p {
        @apply text-lg font-bold text-gray-800 dark:text-gray-200;
    }

/* Slider Modal */
.slider-modal {
    @apply fixed inset-0 bg-black bg-opacity-75 z-50 flex flex-col items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300;
}

    .slider-modal.active {
        @apply opacity-100 pointer-events-auto;
    }

/* Price Range Slider */
.price-slider .wrapper {
    @apply relative;
}

.price-slider .slider-bar {
    @apply relative h-1 bg-gray-300 dark:bg-gray-600 rounded-full;
}

.price-slider .progress {
    @apply absolute h-full bg-blue-500 rounded-full;
}

.price-slider .range-input {
    @apply relative;
}

    .price-slider .range-input input {
        @apply absolute w-full -top-1 h-1 bg-transparent pointer-events-none appearance-none;
    }

        .price-slider .range-input input::-webkit-slider-thumb {
            @apply appearance-none w-4 h-4 bg-blue-500 rounded-full cursor-pointer pointer-events-auto;
        }

        .price-slider .range-input input::-moz-range-thumb {
            @apply w-4 h-4 bg-blue-500 rounded-full cursor-pointer pointer-events-auto border-0;
        }

/* Custom Input */
.custom-input {
    @apply border-none outline-none;
}

    .custom-input::-webkit-outer-spin-button,
    .custom-input::-webkit-inner-spin-button {
        @apply appearance-none m-0;
    }

    .custom-input[type=number] {
        @apply appearance-none;
    }

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

    .tooltip .tooltiptext {
        @apply invisible absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 transition-opacity duration-300 whitespace-nowrap;
    }

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

/* Tailwind Input */
.tailwind-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100;
}

/* App Border */
.app-border {
    @apply border border-gray-200 dark:border-gray-700;
}

/* App Hover */
.app-hover {
    @apply hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

/* Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 0.5s ease-in-out;
}
















/* سبد خرید کناری */
.cart-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

    .cart-sidebar.active {
        visibility: visible;
        opacity: 1;
    }

/* Overlay */
.cart-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* محتوای سبد */
.cart-sidebar-content {
    position: absolute;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.cart-sidebar.active .cart-sidebar-content {
    right: 0;
}

.dark .cart-sidebar-content {
    background: #1f2937;
}

/* بدنه سبد */
.cart-sidebar-body {
    flex: 1;
    overflow-y: auto;
    margin-top: 10px;
    position: relative;
}

    .cart-sidebar-body::-webkit-scrollbar {
        width: 6px;
    }

    .cart-sidebar-body::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .cart-sidebar-body::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

.dark .cart-sidebar-body::-webkit-scrollbar-track {
    background: #374151;
}

.dark .cart-sidebar-body::-webkit-scrollbar-thumb {
    background: #6b7280;
}

/* موبایل */
@media (max-width: 768px) {
    .cart-sidebar-content {
        width: 90%;
        right: -100%;
    }

    .cart-sidebar.active .cart-sidebar-content {
        right: 0;
    }
}

/* دکمه‌های غیرفعال */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}