/**
 * E-Commerce Custom Styles
 * Supplements Tailwind CSS CDN with custom utilities
 * Mobile-first approach
 */

/* Ensure minimum tap target size for all interactive elements */
a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

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

/* Product image aspect ratio container */
.product-image-container {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Color swatch styles */
.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.color-swatch:hover,
.color-swatch.active {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}

/* Size button styles */
.size-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.size-btn:hover:not(.disabled) {
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.size-btn.active {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
}

.size-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Loading skeleton animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

/* Status badge colors */
.badge-pending { background-color: #fef3c7; color: #92400e; }
.badge-diproses { background-color: #dbeafe; color: #1e40af; }
.badge-dikirim { background-color: #e0e7ff; color: #3730a3; }
.badge-selesai { background-color: #dcfce7; color: #166534; }
.badge-dibatalkan { background-color: #fee2e2; color: #991b1b; }

/* Marketplace button brand colors */
.btn-shopee { background-color: #EE4D2D; }
.btn-shopee:hover { background-color: #D73211; }
.btn-tokopedia { background-color: #42B549; }
.btn-tokopedia:hover { background-color: #35923B; }
.btn-tiktok { background-color: #000000; }
.btn-tiktok:hover { background-color: #333333; }
.btn-taco { background-color: #FF6B35; }
.btn-taco:hover { background-color: #E55A2B; }
.btn-whatsapp { background-color: #25D366; }
.btn-whatsapp:hover { background-color: #1DA851; }

/* Fade in animation for page content */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}