/* Custom Styles */

/* Global Styles */
:root {
    --primary-color: #2563eb;
    --secondary-color: #1d4ed8;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
}

/* Utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animation */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

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

/* Product Card */
.product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.product-image {
    @apply w-full aspect-[4/3] object-cover;
}

.product-badge {
    @apply absolute top-2 right-2 px-2 py-1 text-xs font-semibold rounded-full;
}

.product-badge.sale {
    @apply bg-red-500 text-white;
}

.product-badge.new {
    @apply bg-green-500 text-white;
}

.product-badge.out-of-stock {
    @apply bg-gray-500 text-white;
}

/* Cart Icon Badge */
.cart-badge {
    @apply absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full;
    transform: scale(0.9);
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-t-transparent rounded-full animate-spin;
}

.spinner.large {
    @apply w-8 h-8 border-4;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

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

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

/* เพิ่ม CSS เพื่อแก้ไขปัญหา */
.new-arrivals-swiper {
    padding-bottom: 3rem !important; /* ให้พื้นที่สำหรับ pagination */
    margin: 0 1rem; /* ให้พื้นที่สำหรับปุ่ม prev/next */
}

@media (min-width: 1024px) {
    .new-arrivals-swiper {
        margin: 0 2rem; /* เพิ่มพื้นที่ด้านข้างสำหรับหน้าจอใหญ่ */
    }
}

.swiper-button-prev,
.swiper-button-next {
    background: white !important;
    opacity: 0.9 !important;
    transition: all 0.3s ease !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 1 !important;
    background: white !important;
}

.swiper-pagination {
    bottom: 0 !important;
}

/* ปรับ container ให้ไม่เกินขอบ */
.container {
    max-width: 1400px;
    padding-left: 2rem;
    padding-right: 2rem;
}

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

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

.form-error {
    @apply text-red-500 text-sm mt-1;
}

/* Custom Button Styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
}

.btn-secondary {
    @apply bg-gray-500 text-white hover:bg-gray-600 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
}

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

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

.alert-danger {
    @apply bg-red-100 text-red-800 border border-red-200;
}

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

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

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
}

.modal-content {
    @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl z-50 w-11/12 max-w-lg;
}

/* Tooltip */
.tooltip {
    @apply absolute px-2 py-1 text-xs text-white bg-gray-900 rounded z-50 transform -translate-x-1/2;
}

.tooltip::after {
    content: '';
    @apply absolute left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900;
    bottom: -8px;
}

/* Price Styles */
.price {
    @apply text-lg font-bold text-gray-900;
}

.price-original {
    @apply text-sm text-gray-500 line-through;
}

.price-discount {
    @apply text-sm text-red-500 font-medium;
}

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

/* Status Indicators */
.status-dot {
    @apply inline-block w-2 h-2 rounded-full mr-2;
}

.status-dot.active {
    @apply bg-green-500;
}

.status-dot.inactive {
    @apply bg-red-500;
}

/* Quantity Input */
.quantity-input {
    @apply flex items-center border rounded-lg overflow-hidden;
}

.quantity-btn {
    @apply px-3 py-2 bg-gray-100 hover:bg-gray-200 transition-colors;
}

.quantity-input input {
    @apply w-16 text-center border-x;
}

/* Custom Radio & Checkbox */
.custom-radio {
    @apply w-4 h-4 border-2 border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500;
}

.custom-checkbox {
    @apply w-4 h-4 border-2 border-gray-300 rounded focus:ring-2 focus:ring-blue-500;
}

/* Product Gallery */
.gallery-thumbnail {
    @apply border-2 rounded cursor-pointer transition-all;
}

.gallery-thumbnail:hover {
    @apply border-blue-500;
}

.gallery-thumbnail.active {
    @apply border-blue-500;
}

/* Cart Item */
.cart-item {
    @apply flex items-center py-4 border-b;
}

.cart-item-image {
    @apply w-20 h-20 object-cover rounded;
}

.cart-item-details {
    @apply flex-1 ml-4;
}

.cart-item-remove {
    @apply text-red-500 hover:text-red-700 transition-colors;
}

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

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

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

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

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

/* Responsive Images */
.responsive-image {
    @apply w-full h-auto;
}

.aspect-square {
    @apply aspect-[1/1] object-cover;
}

.aspect-video {
    @apply aspect-[16/9] object-cover;
}

/* Media Queries */
@media (max-width: 640px) {
    .product-card {
        @apply shadow-none border rounded-lg;
    }
    
    .modal-content {
        @apply w-full h-full max-w-none rounded-none;
    }
    
    .cart-item {
        @apply flex-col items-start;
    }
    
    .cart-item-image {
        @apply w-full h-48 mb-4;
    }
}

/* เพิ่ม CSS เพื่อควบคุมการแสดงผล */
.swiper-container {
   overflow: visible;
   padding: 1rem;
}

.swiper-slide {
   padding: 0.5rem;
   width: 20%; /* แสดง 5 รายการ */
}


/* ปรับ container ให้มี padding ด้านข้าง */
.container {
   padding-left: 2rem;
   padding-right: 2rem;
   max-width: 1400px;
   margin: 0 auto;
}

/* ซ่อน overflow ที่ container นอกสุด */
.products-section {
   overflow: hidden;
   position: relative;
   padding: 1rem 0;
}