/* 
 * Custom CSS Overrides for Edenbridge Theme
 * Loaded after Vite CSS to ensure overrides work.
 */

/* Fix for Shop Quantity Selectors hidden by font-size: 0 in pj.bootstrap.min.css */
[id^="pjWrapper"] .input-group-btn.scSelectorSpin {
    font-size: 16px !important;
    /* Override font-size: 0 */
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-foreground, #fff);
    /* Ensure text is visible */
    background: transparent;
}

/* Ensure the arrows/content inside are visible and centered */
[id^="pjWrapper"] .input-group-btn.scSelectorSpin>* {
    display: block;
    line-height: 1;
}



/* Hide any original icon if it was messed up, but only if we added our own content */
/* Actually, the screenshot shows content inside the span. 
   If the content is text, the ::after might duplicate it. 
   Let's try just the font-size fix first, but maybe adding ::after is safer if the inner content is non-text icon causing issues.
   However, "safest" is strictly checking font-size first.
   But since I can't interactively test, I'll use a strategy that works either way.
   If I use ::after, I should hide the children? No, that might break things.
   Let's look at the screenshot again carefully.
   The span has `data-direction="down"`.
   Inside could be `<i class="fa fa-minus"></i>` or just `-`.
   If it's an icon font, `font-size: 16px` on the parent might not propagate if the icon has its own class setting specific things, 
   but usually it inherits.
   
   The Safe bet:
   Reset font-size.
   If text appears, great.
   If not, use ::after to force it.
   
   Let's just use font-size and add the content via ::after BUT only if empty? CSS can't do "only if empty" reliably for this without :empty pseudo class which might not apply if there's whitespace.
   
   Let's stick to just the font-size fix first, BUT user said "+ and - are NOT DISPLAYED".
   This usually means they are text and strictly hidden by font-size: 0.
   So font-size: 16px should fix it.
   
   I will add the font-size fix. I will NOT add ::after content yet to avoid duplication.
*/

[id^="pjWrapper"] .input-group-btn.scSelectorSpin {
    font-size: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 30px;
    justify-content: center;
}