/* CRITICAL MOBILE TEXT FIX - Force horizontal text on all mobile devices */

/* Target all possible mobile breakpoints */
@media screen and (max-width: 768px), 
       screen and (max-device-width: 768px),
       screen and (orientation: portrait) {
    
    /* NUCLEAR OPTION - Force ALL h4 in quantity options to display correctly */
    .wcc-quantity-option h4,
    .wcc-customization-container h4,
    .woocommerce h4,
    [class*="quantity"] h4,
    div h4 {
        /* Text display */
        display: block !important;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        -ms-writing-mode: lr-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        /* Layout */
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 4px auto !important;
        padding: 0 5px !important;
        text-align: center !important;
        
        /* Typography */
        font-size: 13px !important;
        line-height: 1.4 !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        
        /* Reset transforms */
        transform: none !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        
        /* Reset any rotation */
        transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        
        /* Force normal flow */
        position: relative !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Specific targeting for quantity option titles */
    .wcc-quantity-option div[style*="text-align: center"] h4,
    .wcc-quantity-option div div h4 {
        display: inline-block !important;
        writing-mode: initial !important;
        -webkit-writing-mode: initial !important;
        text-orientation: initial !important;
        direction: ltr !important;
    }
    
    /* Override any inline styles */
    .wcc-quantity-option h4[style] {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        letter-spacing: 0 !important;
        display: block !important;
    }
    
    /* Additional mobile layout fixes */
    .wcc-quantity-option {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    
    .wcc-quantity-option > div:first-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Title container */
    .wcc-quantity-option div:has(h4) {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Price below title - FIX VISIBILITY */
    .wcc-option-price {
        display: block !important;
        text-align: center !important;
        margin-top: 2px !important;
        /* Fix price visibility on mobile */
        color: #333 !important; /* Dark gray for better visibility */
        font-weight: bold !important; /* Make it bold */
        font-size: 16px !important; /* Slightly larger for mobile */
        opacity: 1 !important; /* Ensure full opacity */
    }
    
    /* Quantity controls centered */
    .wcc-quantity-controls,
    .wcc-quantity-option > div:last-child {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 auto !important;
    }
}

/* Extra specific rules for iOS devices */
@supports (-webkit-touch-callout: none) {
    .wcc-quantity-option h4 {
        -webkit-writing-mode: horizontal-tb !important;
        writing-mode: horizontal-tb !important;
        -webkit-text-orientation: mixed !important;
        text-orientation: mixed !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* Target small screens specifically */
@media (max-width: 480px) {
    .wcc-quantity-option h4 {
        font-size: 12px !important;
        padding: 0 3px !important;
    }
    
    /* Ensure prices are even more prominent on very small screens */
    .wcc-option-price,
    .wcc-customization-container .wcc-option-price {
        font-size: 18px !important; /* Even larger on small screens */
        color: #000 !important; /* Pure black for maximum contrast */
        font-weight: 700 !important; /* Extra bold */
        text-shadow: 0 1px 1px rgba(255,255,255,0.5) !important; /* Subtle shadow for better readability */
    }
}

/* Additional mobile price visibility fixes - applies to all mobile devices */
@media screen and (max-width: 768px), 
       screen and (max-device-width: 768px),
       screen and (orientation: portrait) {
    
    /* Force all price-related elements to be visible on mobile */
    .wcc-option-price,
    .wcc-option-price-display,
    .wcc-option-total-price,
    .wcc-price-section,
    .wcc-option-sale-price,
    .wcc-option-regular-price,
    .wcc-price-unit,
    .wcc-customization-container .wcc-option-price,
    .wcc-quantity-option .wcc-option-price {
        color: #333 !important; /* Dark gray for all prices */
        font-weight: bold !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Special handling for zero prices to ensure they're visible */
    .wcc-option-price[data-price="0"],
    .wcc-option-price[data-value="0"],
    span.wcc-option-price {
        color: #333 !important;
        font-weight: bold !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}