/** * Axomify Flex Print — calculator styles. * * REDESIGNED (2.8): a full visual refresh of the [axomify_flex_calculator] * card, requested by the site owner as "professional and unique" for * customers. Built on the same black + gold brand tokens already used * elsewhere on Axomify Mart (Axomify Marketplace's .axmp-wrap design * system), 'Inter'/'Sora' as the site already loads both fonts sitewide, so * this plugin's calculator now reads as part of the same site instead of a * visually separate red/black block bolted on. All values are scoped under * .axomify-calc-box as CSS custom properties so the palette lives in one * place. No selector, id, or class that assets/js/flex-calculator.js or the * theme's own CSS depends on was renamed or removed — only look and feel. * * Follow-up refinement (same 2.8 release, live feedback): .ax-summary * (Quantity + Total Price) and .ax-actions (Add to Cart + View Cart) are * now equal-width flex children (flex: 1; min-width: 0) that stay side by * side in a single row at every screen width, including mobile -- they * previously stacked into a single column under the 480px breakpoint. * .ax-btn also gained white-space: nowrap so its label can never wrap * unevenly between the two buttons. * * BUG FIXED (2.8.2): the .ax-qty-box / .ax-price-box pair above still * wasn't rendering truly equal width, even though both had identical * flex: 1 1 0px, min-width: 0 and box-sizing: border-box. Root-caused (and * confirmed with an isolated, plugin-independent test) to a real CSS * flexbox behaviour, not a bug in this stylesheet or a theme conflict: * with box-sizing: border-box, a flex item's flex-basis can never resolve * below its own padding -- so a flex: 1 item WITH horizontal padding * always ends up exactly [that padding] wider than an otherwise-identical * flex: 1 item with none, once both have grown to fill the row. Only * .ax-price-box had padding directly on the flex item itself (for its * dark background's inner spacing), which is why it was consistently * wider than .ax-qty-box by exactly its own left+right padding. Fixed by * moving that padding onto a new, purely cosmetic .ax-price-inner wrapper * (frontend/views/calculator-form.php) so the flex item itself * (.ax-price-box) carries no padding of its own -- same visual spacing, * but the outer box can now split the row exactly 50/50 with .ax-qty-box. * The same live check also caught the Add to Cart / View Cart buttons * rendering unequal HEIGHT (View Cart taller): the theme's own WooCommerce * button CSS (.woocommerce .button and similar, which only the submit * button carries via WooCommerce's own "button" class) was overriding this * plugin's padding on the Add to Cart button specifically. .ax-btn's * padding now carries !important so both buttons always get the same * padding regardless of what other classes an element also carries. Even * with identical padding/border/font-size, the two buttons' auto-computed * height still differed by a few px (Add to Cart's icon+text flex content * resolves a slightly different intrinsic height than View Cart's * text-only content under "height: auto") -- so .ax-btn now sets an * explicit height instead of leaving it to auto-size from content, which * guarantees pixel-identical height for both buttons regardless of * whichever one happens to contain an icon. * * LAYOUT CHANGE (2.8.3): requested live -- the "Total Price" label and the * ₹ amount were stacked on two lines inside the dark price box (label on * top, amount below); requested instead as one line, e.g. "Total Price * ₹0.00" side by side, matching how Quantity's single-row stepper reads. * .ax-price-inner changed from a centered column (flex-direction: column) * to a single row (flex-direction: row; justify-content: space-between), * with the label and the live price now sitting on one baseline. Checked * this doesn't overflow/wrap for a large total (tested up to ₹45,600.00, * a big multi-sq.ft order) at both the normal card width and the * <=480px mobile width: at mobile width "Total Price" alongside a large * amount does not reliably fit on one line at a legible font size, so * frontend/views/calculator-form.php now renders two label spans -- * ax-price-label-full ("Total Price", shown >480px) and * ax-price-label-short ("Price", shown <=480px) -- so the amount itself * always has room to stay on one line and fully readable rather than * shrinking the label to an illegible size or letting the amount get * clipped. #ax_total_disp itself (what assets/js/flex-calculator.js * writes the live total into) is unchanged, so no JS changes were needed. * * BUG FIXED (2.8.4): 2.8.3's one-line change made the label and price sit * on the same line inside the dark box, but the actual visible bug the * site owner meant by "in 4 box ka size same hai?" was still there: the * VISIBLE control -- the white bordered Quantity stepper vs. the solid * dark Total Price box -- were never actually the same height. The two * OUTER flex children (.ax-qty-box and .ax-price-box) were correctly * equal at 82px (confirmed since 2.8.2), but that 82px was split * differently inside each: Quantity is a ~28px label sitting above a * ~48px white stepper box, while Total Price was previously one single * ~82px dark rectangle with its label baked in -- so the dark box visibly * looked much bigger/taller than the stepper even though their shared * flex-row parent was balanced. Measured live: .ax-stepper is 48px tall, * the old single-piece .ax-price-box was 82px tall -- a 34px real, * visible gap, exactly matching the complaint. * Fixed by restructuring frontend/views/calculator-form.php's price field * to mirror the Quantity field's own structure exactly: a plain