/* Visual feedback for out-of-stock variant selections */

/* Disabled add-to-cart buttons when out of stock */
button[type="submit"].disabled,
button[type="submit"].out-of-stock,
.btn-add-to-cart:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative;
}

button[type="submit"].disabled:hover,
button[type="submit"].out-of-stock:hover,
.btn-add-to-cart:disabled:hover {
    opacity: 0.6 !important;
}

/* Add overlay text for disabled buttons - REMOVED per requirement to not show "Out of Stock" inside button */
/* button[type="submit"].out-of-stock::after,
.btn-add-to-cart:disabled::after {
    content: " (Out of Stock)";
    font-size: 0.8em;
    opacity: 0.8;
} */

/* Stock status indicators */
.stock-indicator.in-stock::before {
    content: "●";
    color: #28a745;
    margin-right: 4px;
}

.stock-indicator.out-of-stock::before {
    content: "●";
    color: #dc3545;
    margin-right: 4px;
}

.stock-indicator.warning::before {
    content: "●";
    color: #ffc107;
    margin-right: 4px;
}

.stock-text.out-of-stock {
    color: #dc3545 !important;
    font-weight: 600;
}

.stock-text.in-stock {
    color: #28a745 !important;
    font-weight: 600;
}

.stock-text.warning {
    color: #ffc107 !important;
    font-weight: 600;
}

/* Availability display styling */
#dynamic-availability {
    transition: color 0.3s ease;
}

#dynamic-availability.available {
    color: #28a745 !important;
}

#dynamic-availability.unavailable {
    color: #dc3545 !important;
}

/* Child variant cards visual feedback */
.child-variant-card.selected {
    border: 2px solid #007bff !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important;
}

.child-variant-card:hover:not(.disabled) {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.child-variant-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading state for variant cards */
.child-variant-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Screen reader only announcement area */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* Selection errors styling */
.selection-errors .alert {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}