/**
 * Size Picker Component
 * Styles for the bed size picker on product pages
 * 
 * @package Modeo
 */

/* Size Picker Container */
.modeo-size-picker {
    margin-bottom: 1rem;
}

/* Size Button Base */
.modeo-size-button {
    min-width: 5rem;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Size Button Hover Effect */
.modeo-size-button:hover:not([aria-disabled="true"]) {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Active Size Button */
.modeo-size-button[data-active="true"] {
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Out of Stock Size Button */
.modeo-size-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.modeo-size-button[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: none;
}

/* Size Picker Help Text */
.modeo-size-picker>p {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Bed Size Filter Styles (Shop Page) */
.modeo-bed-size-filter {
    /* Container styles */
}

.modeo-bed-size-group {
    margin-bottom: 0.75rem;
}

.modeo-bed-size-group:last-child {
    margin-bottom: 0;
}

/* Bed Size Filter Button */
.modeo-bed-size-button {
    min-height: 2.5rem;
    transition: all 0.2s ease;
}

.modeo-bed-size-button:hover {
    transform: translateY(-1px);
}

.modeo-bed-size-button[data-selected="true"] {
    font-weight: 600;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .modeo-size-picker .flex {
        gap: 0.5rem;
    }

    .modeo-size-button {
        min-width: 4rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .modeo-bed-size-button {
        min-height: 2.25rem;
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }
}

/* Animation for size switching */
@keyframes sizeSelect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.05);
    }
}

.modeo-size-button.selecting {
    animation: sizeSelect 0.3s ease;
}