/* Custom styles for the frontend */
.brand-red {
    color: #dc2626;
}

.bg-brand-red {
    background-color: #dc2626;
}

.text-brand-red {
    color: #dc2626;
}

.border-brand-red {
    border-color: #dc2626;
}

.focus\:ring-brand-red:focus {
    --tw-ring-color: #dc2626;
}

.hover\:bg-red-700:hover {
    background-color: #b91c1c;
}

.brand-teal-600 {
    color: #0d9488;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Mobile menu styles */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Dropdown styles */
.dropdown {
    transition: all 0.2s ease-in-out;
}

/* Variant selection styles */
.variant-option {
    transition: all 0.2s ease-in-out;
}

.variant-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.variant-option.selected {
    border-color: #dc2626;
    background-color: #fef2f2;
    box-shadow: 0 0 0 1px #dc2626;
}

.variant-option.out-of-stock {
    opacity: 0.6;
    cursor: not-allowed;
}

.variant-option.out-of-stock:hover {
    transform: none;
    box-shadow: none;
}

/* Product card hover effects */
.product-card {
    transition: transform 0.3s ease-in-out;
}

.product-card:hover {
    transform: translateY(-2px);
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-brand-red focus:border-brand-red;
}

.form-checkbox {
    @apply h-4 w-4 text-brand-red focus:ring-brand-red border-gray-300 rounded;
}

/* Button styles */
.btn-primary {
    @apply bg-brand-red text-white px-4 py-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-brand-red focus:ring-offset-2;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-900 px-4 py-2 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}