/**
 * Yarni Bundle Variations - Frontend Styles
 * 
 * This file only contains supplementary styles for YBV functionality.
 * The main styling comes from the theme's existing CSS (bst.css)
 * for the .sizes-block and .size-block-title classes.
 */

/* Additional styles for YBV-specific functionality only */

/* Hide the size selection feedback by default */
.size-selection-info {
    display: none;
    margin-top: 10px;
    padding: 8px 12px;
    background: #e8f4fd;
    border-left: 3px solid #2271b1;
    border-radius: 3px;
    animation: fadeIn 0.3s ease-in;
}

.size-selection-info .selected-size-text {
    color: #0073aa;
    font-size: 14px;
}

/* Animation for feedback */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Notice for products without variations */
.sizes-block.no-variations-notice {
    padding: 10px !important;
    background: #fff8e5 !important;
    border: 1px solid #ffb900 !important;
    border-radius: 3px !important;
    margin: 15px 0 !important;
}

.sizes-block.no-variations-notice p {
    margin: 0;
    color: #826200;
    font-size: 14px;
}

/* Ensure YBV works well with theme's existing nice-select styles */
.sizes-block[data-use-ybv="true"] .nice-select {
    /* Inherits from theme's .sizes-block .nice-select styles */
}

/* Add marker class for products with YBV variations */
.has-ybv-variations {
    /* This class is added to product container for JS targeting if needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .size-selection-info {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .size-selection-info {
        border-left-width: 4px;
        font-weight: 600;
    }
}

/* Dark mode support (if theme supports it) */
@media (prefers-color-scheme: dark) {
    .size-selection-info {
        background: #1e3a4f;
        border-left-color: #4a9eff;
    }
    
    .size-selection-info .selected-size-text {
        color: #a3cfff;
    }
    
    .sizes-block.no-variations-notice {
        background: #3d3200 !important;
        border-color: #ffb900 !important;
    }
    
    .sizes-block.no-variations-notice p {
        color: #ffd966;
    }
}

/* Print styles */
@media print {
    .size-selection-info,
    .sizes-block.no-variations-notice {
        display: none !important;
    }
}