/* ========================================================================== SELF-HOSTED LOCAL OUTFIT FONT (INSTANT LOCAL LOADING — ZERO EXTERNAL REQUESTS) ========================================================================== */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); } /* WORDPRESS ADMIN BAR SITE ICON & TITLE PROTECTION SAFEGUARD */ #wpadminbar #wp-admin-bar-site-name .ab-item img, #wpadminbar #wp-admin-bar-site-name .site-icon, #wpadminbar .ab-icon img { max-height: 20px !important; max-width: 20px !important; width: auto !important; height: auto !important; vertical-align: middle !important; display: inline-block !important; margin-right: 6px !important; } #wpadminbar #wp-admin-bar-site-name > a.ab-item { display: flex !important; align-items: center !important; height: 32px !important; line-height: 32px !important; } /* ABSOLUTE WORDPRESS ADMIN BAR & FOOTER LOCKDOWN */ body.rw-portal-frame #wpadminbar, html.rw-portal-frame #wpadminbar, .rw-portal-frame #wpadminbar, body.rw-multiuser-operator #wpadminbar, html.rw-multiuser-operator #wpadminbar, body.rw-portal-frame #wpfooter, html.rw-portal-frame #wpfooter, .rw-portal-frame #wpfooter, body.rw-multiuser-operator #wpfooter, html.rw-multiuser-operator #wpfooter { display: none !important; } html.rw-portal-frame, body.rw-portal-frame, html.rw-multiuser-operator, body.rw-multiuser-operator { margin-top: 0 !important; padding-top: 0 !important; background-color: #e2e8f0 !important; } body.rw-has-portal, body.rw-portal-page, .rw-customer-care-wrap, .rw-console-wrap, .rw-isolated-portal-container, #rw_customer_care_main_wrap, .rw-pos-scope { background-color: #e2e8f0 !important; display: flow-root !important; clear: both !important; } /* 1. Collapse all spacing on the page wrapper and main container */ body:has(.rw-isolated-portal-container) .main-page-wrapper, body:has(.rw-isolated-portal-container) .site-content, body:has(.rw-isolated-portal-container) .site-main, body:has(.rw-isolated-portal-container) .content-layout-wrapper, body:has(.rw-isolated-portal-container) .entry-content, body:has(.rw-isolated-portal-container) .post-content, body.rw-has-portal .main-page-wrapper, body.rw-has-portal .site-content, body.rw-has-portal .site-main, body.rw-has-portal .content-layout-wrapper, body.rw-has-portal .entry-content, body.rw-has-portal .post-content, body.rw-portal-page .main-page-wrapper, body.rw-portal-page .site-content, body.rw-portal-page .site-main, body.rw-portal-page .content-layout-wrapper, body.rw-portal-page .entry-content, body.rw-portal-page .post-content { padding-top: 0 !important; margin-top: 0 !important; } /* 2. Remove bottom margin/padding from the WoodMart header bar & rows */ body:has(.rw-isolated-portal-container) .whb-header, body:has(.rw-isolated-portal-container) .whb-general-header, body:has(.rw-isolated-portal-container) .whb-row, body.rw-has-portal .whb-header, body.rw-has-portal .whb-general-header, body.rw-has-portal .whb-row, body.rw-portal-page .whb-header, body.rw-portal-page .whb-general-header, body.rw-portal-page .whb-row { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide WoodMart page title container */ body:has(.rw-isolated-portal-container) .page-title, body:has(.rw-isolated-portal-container) .page-title-default, body:has(.rw-isolated-portal-container) .title-size-default, body.rw-has-portal .page-title, body.rw-has-portal .page-title-default, body.rw-has-portal .title-size-default, body.rw-portal-page .page-title, body.rw-portal-page .page-title-default, body.rw-portal-page .title-size-default { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* 3. Pull WPBakery row, column containers, and iframe up flush against the header */ body:has(.rw-isolated-portal-container) .vc_row, body:has(.rw-isolated-portal-container) .vc_column_container, body:has(.rw-isolated-portal-container) .vc_column_container > .vc_column-inner, body.rw-has-portal .vc_row, body.rw-has-portal .vc_column_container, body.rw-has-portal .vc_column_container > .vc_column-inner, body.rw-portal-page .vc_row, body.rw-portal-page .vc_column_container, body.rw-portal-page .vc_column_container > .vc_column-inner { margin-top: 0 !important; padding-top: 0 !important; } .rw-isolated-portal-container #rw_portal_iframe, .rw-isolated-portal-container iframe, body:has(.rw-isolated-portal-container) iframe[title="Customer Care POS Portal"], body:has(.rw-isolated-portal-container) iframe, body.rw-has-portal iframe[title="Customer Care POS Portal"], body.rw-has-portal iframe, body.rw-portal-page iframe[title="Customer Care POS Portal"], body.rw-portal-page iframe { margin-top: -15px !important; padding-top: 0 !important; display: block !important; } .rw-customer-care-wrap, .rw-customer-care-wrap *, .rw-card, .rw-card *, .rw-mobile-customer-card, .rw-mobile-customer-card *, .rw-pos-scope, .rw-pos-scope *, .rw-pos-scope *::before, .rw-pos-scope *::after { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; box-sizing: border-box !important; } .rw-pos-scope .dashicons, .rw-pos-scope .dashicons-before::before { font-family: dashicons !important; } .rw-pos-scope .notice-dismiss::before, .rw-customer-care-wrap .notice-dismiss::before { content: "" !important; display: none !important; } .rw-pos-scope .notice-dismiss, .rw-customer-care-wrap .notice-dismiss { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; background: transparent !important; border: none !important; color: #64748b !important; text-decoration: none !important; box-shadow: none !important; } .rw-pos-scope .notice-dismiss:hover, .rw-customer-care-wrap .notice-dismiss:hover { color: #0f172a !important; } #wp-link-wrap { z-index: 100100 !important; } #wp-link-backdrop { z-index: 100099 !important; } .mce-inline-toolbar-grp { z-index: 99999 !important; } /* Resizable Rich Text Fields & Editors (Strictly Scoped to Customer Care POS Scope) */ .rw-customer-care-wrap .wp-editor-wrap, .rw-customer-care-wrap .wp-editor-container, .rw-customer-care-wrap .wp-editor-area, .rw-pos-scope .wp-editor-wrap, .rw-pos-scope .wp-editor-container, .rw-pos-scope .wp-editor-area, #rw_alias_store_address, #rwaliasstoreaddress, #rw_alias_invoice_footer, #rwaliasinvoicefooter, #rw_alias_invoice_returns, #rwaliasinvoicereturns, #rwinvoicefooter, #rwinvoicereturns { resize: vertical !important; min-height: 80px !important; } .rw-customer-care-wrap .wp-editor-area, .rw-pos-scope .wp-editor-area { overflow-y: auto !important; } .rw-customer-care-wrap .mce-edit-area iframe, .rw-pos-scope .mce-edit-area iframe { resize: vertical !important; min-height: 140px !important; } /* Responsive styles for mobile & tablet screens (< 782px) */ html.wp-toolbar { padding-top: 32px !important; } @media screen and (max-width: 782px) { html.wp-toolbar { padding-top: 46px !important; } /* Prevent horizontal viewport overflow & swipe wobble on document root */ .rw-customer-care-wrap, .rw-pos-scope, #wpcontent, #wpbody, #wpbody-content { overflow-x: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .rw-customer-care-wrap, #rw_customer_care_main_wrap, .wrap.rw-customer-care-wrap { margin: 0 auto; padding: 10px 14px 20px 14px; max-width: 100%; width: 100%; overflow-x: hidden; box-sizing: border-box; } /* Suppress webkit scrollbar track line on mobile */ .rw-customer-care-wrap::-webkit-scrollbar, .rw-isolated-portal-container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* Zero side margins/padding on main page content containers ONLY (excluding header & footer containers) */ body:has(.rw-isolated-portal-container) .site-content .container, body:has(.rw-isolated-portal-container) .site-main .container, body:has(.rw-isolated-portal-container) .site-content, body:has(.rw-isolated-portal-container) .site-main, body:has(.rw-isolated-portal-container) .content-layout-wrapper, body:has(.rw-isolated-portal-container) .entry-content, body:has(.rw-isolated-portal-container) .post-content, body:has(.rw-isolated-portal-container) .vc_row, body:has(.rw-isolated-portal-container) .vc_column_container, body:has(.rw-isolated-portal-container) .vc_column_container > .vc_column-inner, body:has(.rw-isolated-portal-container) .wpb_column, body:has(.rw-isolated-portal-container) .wpb_wrapper, body:has(.rw-isolated-portal-container) .ast-container, body:has(.rw-isolated-portal-container) .elementor-section, body:has(.rw-isolated-portal-container) .elementor-container, body.rw-has-portal .site-content .container, body.rw-has-portal .site-main .container, body.rw-has-portal .site-content, body.rw-has-portal .site-main, body.rw-has-portal .content-layout-wrapper, body.rw-has-portal .entry-content, body.rw-has-portal .post-content, body.rw-has-portal .vc_row, body.rw-has-portal .vc_column_container, body.rw-has-portal .vc_column_container > .vc_column-inner, body.rw-has-portal .wpb_column, body.rw-has-portal .wpb_wrapper, body.rw-portal-page .site-content .container, body.rw-portal-page .site-main .container, body.rw-portal-page .site-content, body.rw-portal-page .site-main, body.rw-portal-page .content-layout-wrapper, body.rw-portal-page .entry-content, body.rw-portal-page .post-content, body.rw-portal-page .vc_row, body.rw-portal-page .vc_column_container, body.rw-portal-page .vc_column_container > .vc_column-inner, body.rw-portal-page .wpb_column, body.rw-portal-page .wpb_wrapper { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Allow the portal iframe / container to stretch 100% edge-to-edge */ .rw-isolated-portal-container, .rw-customer-care-wrap, .rw-pos-scope { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Allow the portal iframe to expand 100% width and scroll horizontally if POS tables exceed screen width */ .rw-isolated-portal-container #rw_portal_iframe, .rw-isolated-portal-container iframe, body:has(.rw-isolated-portal-container) iframe, body.rw-has-portal iframe, body.rw-portal-page iframe { width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; display: block !important; } /* Ensure all tables fit mobile containers */ .rw-customer-care-wrap table { max-width: 100% !important; box-sizing: border-box !important; } /* Collapse Business Profile editor grid to 1 column on mobile */ #rw_alias_editor_form div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } #rw_alias_editor_form p[style*="grid-column: span 2"], #rw_alias_editor_form div[style*="grid-column: span 2"] { grid-column: span 1 !important; } /* Header Badges Responsive Layout: Small = 1 col full width, Medium = 2 cols, Desktop = default */ #rw_header_active_alias_select, #rw_header_gst_mode_select { max-width: 60% !important; } #rw_customer_entry_card, #rw_customer_ledger_card, .rw-admin-sidebar-column, #rw_admin_sidebar_column, #rw_customer_ledger_section_content, #rw_email_logs_content, .rw-mobile-customer-ledger, #rw_business_alias_wrapper, #rw_alias_manager_card { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .pos-card, #rw_customer_details_wrapper, #rw_invoice_builder_wrapper, #rw_customer_ledger_card, .rw-customer-ledger-card, #rw_business_alias_wrapper, #rw_email_logs_card, #rw_backups_card { padding: 12px 10px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 16px !important; border-radius: 4px !important; box-sizing: border-box !important; } #rw_alias_manager_card { padding: 10px 0 0 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Stack form table TH and TD vertically on small screens */ .form-table th, .form-table td { display: block !important; width: 100% !important; padding: 5px 0 !important; box-sizing: border-box !important; } .form-table th { padding-top: 10px !important; } /* Allow invoice header toggle sections to wrap cleanly */ .rw-invoice-header-toggle { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .rw-invoice-header-toggle > div { width: 100% !important; flex-wrap: wrap !important; } /* Allow edit invoice buttons to fit text width inline on small screens */ .rw-edit-invoice-trigger { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ------------------------------------------------------------- */ /* RESPONSIVE STACKING FOR TAX INVOICE BUILDER & CUSTOMER LEDGER */ /* ------------------------------------------------------------- */ /* Universal Item Card System for Tax Invoice Builder (Desktop & Mobile) */ #rw_invoice_items_table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; margin-bottom: 15px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ============================================================= */ /* DESKTOP MODE (min-width: 769px): Encased Table Card Engine */ /* ============================================================= */ @media screen and (min-width: 769px) { .rw-invoice-table-card-container { border: 1px solid #cbd5e1 !important; border-radius: 6px !important; overflow: hidden !important; background: #f8fafc !important; background-clip: padding-box !important; margin-bottom: 15px !important; box-sizing: border-box !important; } #rw_invoice_items_table { display: table !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; margin: 0 !important; background: #f8fafc !important; border-radius: 6px !important; overflow: hidden !important; } #rw_invoice_items_table > thead > tr > th:first-child { border-top-left-radius: 6px !important; } #rw_invoice_items_table > thead > tr > th:last-child { border-top-right-radius: 6px !important; } #rw_invoice_items_table > thead { display: table-header-group !important; width: 100% !important; background: #f8fafc !important; background-color: #f8fafc !important; } #rw_invoice_items_table > thead > tr { display: table-row !important; background: #ffffff !important; background-color: #ffffff !important; } #rw_invoice_items_table > thead > tr > th { display: table-cell !important; background: #ffffff !important; background-color: #ffffff !important; color: #475569 !important; font-size: 12px !important; font-weight: 500 !important; padding: 8px 10px !important; border-bottom: 1px solid #cbd5e1 !important; border-top: none !important; border-left: none !important; border-right: none !important; } #rw_invoice_items_table > thead > tr > th:nth-child(1) { width: 44.00% !important; padding-left: 12px !important; padding-right: 4px !important; } #rw_invoice_items_table > thead > tr > th:nth-child(2) { width: 26.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > thead > tr > th:nth-child(3) { width: 12.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > thead > tr > th:nth-child(4) { width: 6.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > thead > tr > th:nth-child(5) { width: 12.00% !important; padding-left: 4px !important; padding-right: 12px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td { display: table-cell !important; background: #ffffff !important; background-color: #ffffff !important; padding: 12px 4px 6px 4px !important; vertical-align: top !important; border: none !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-item-details { width: 44.00% !important; padding-left: 12px !important; padding-right: 4px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-barcode { width: 26.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-cost { width: 12.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-qty { width: 6.00% !important; padding-left: 4px !important; padding-right: 4px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-total { width: 12.00% !important; padding-left: 4px !important; padding-right: 12px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-options-row { display: table-row !important; background: #ffffff !important; background-color: #ffffff !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-options-row > td.rw-td-options { display: table-cell !important; background: #ffffff !important; background-color: #ffffff !important; padding: 0 !important; border: none !important; } .rw-mobile-item-header { display: none !important; } } /* ============================================================= */ /* MOBILE MODE (max-width: 768px): Responsive Block Card System */ /* ============================================================= */ @media screen and (max-width: 768px) { .rw-invoice-table-card-container { border: none !important; background: transparent !important; margin-bottom: 15px !important; border-radius: 0 !important; overflow: visible !important; } #rw_invoice_items_table { display: block !important; width: 100% !important; } #rw_invoice_items_table > thead { display: none !important; } #rw_invoice_items_table > tbody { display: block !important; width: 100% !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; background: #f8fafc !important; background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-bottom: none !important; border-radius: 4px 6px 0 0 !important; overflow: hidden !important; padding: 14px 14px 10px 14px !important; margin-top: 12px !important; box-sizing: border-box !important; gap: 6px !important; width: 100% !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td { display: block !important; background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .rw-mobile-item-header { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 6px !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-item-details, #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-barcode { width: 100% !important; flex: 0 0 100% !important; box-sizing: border-box !important; padding: 0 !important; border: none !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-cost { width: calc(40% - 4px) !important; flex: 0 0 calc(40% - 4px) !important; max-width: calc(40% - 4px) !important; box-sizing: border-box !important; padding: 0 !important; border: none !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-qty { width: calc(25% - 4px) !important; flex: 0 0 calc(25% - 4px) !important; max-width: calc(25% - 4px) !important; box-sizing: border-box !important; padding: 0 !important; border: none !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-row > td.rw-td-total { width: calc(35% - 4px) !important; flex: 0 0 calc(35% - 4px) !important; max-width: calc(35% - 4px) !important; box-sizing: border-box !important; padding: 0 !important; border: none !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-options-row { display: block !important; width: 100% !important; background: #f8fafc !important; background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-top: none !important; border-radius: 0 0 6px 6px !important; overflow: hidden !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 14px !important; box-sizing: border-box !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-options-row > td.rw-td-options { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; background: transparent !important; background-color: transparent !important; border-radius: 0 0 6px 6px !important; overflow: hidden !important; box-sizing: border-box !important; } #rw_invoice_items_table > tbody > tr.rw-invoice-line-options-row .rw-line-item-options { border: none !important; border-top: none !important; border-radius: 0 0 6px 6px !important; } } .rw-delete-line-btn-wrap { padding: 10px 12px 10px 12px !important; margin-bottom: 2px !important; box-sizing: border-box !important; } .rw-line-item-options { border: none !important; border-top: none !important; } .rw-line-item-options label { font-size: 12px !important; font-weight: 500 !important; color: #334155 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; margin: 0 !important; cursor: pointer !important; } .rw-selling-price-container, .rw-part-pay-container { padding: 4px 12px 6px 12px !important; box-sizing: border-box !important; width: 100% !important; align-items: center !important; gap: 10px !important; margin-top: 2px !important; } .rw-selling-price-container label, .rw-part-pay-container label { font-size: 12px !important; font-weight: 500 !important; color: #334155 !important; min-width: 110px !important; display: inline-block !important; margin: 0 !important; } .rw-discount-amount-indicator, .rw-part-pay-indicator { padding: 0 12px 6px 12px !important; box-sizing: border-box !important; font-size: 11px !important; color: #dc2626 !important; font-weight: 500 !important; margin-top: 2px !important; } /* Stack Add Another Item button and Calculated Total card full width */ #rw_invoice_builder_wrapper > div[style*="display: flex; justify-content: space-between"] { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } #rw_add_line_item_btn { width: 100% !important; text-align: center !important; min-height: 40px !important; line-height: 2.15384615 !important; padding: 4px 14px !important; font-size: 14px !important; box-sizing: border-box !important; } #rw_invoice_computed_total_card { width: 100% !important; box-sizing: border-box !important; text-align: center !important; } /* 2. CUSTOMER LEDGER INVOICE TABLES & CARDS STACKING */ #rw_customer_ledger_card { flex: 1 1 100% !important; width: 100% !important; box-sizing: border-box !important; } .rw-invoice-details-content table, .rw-invoice-details-content table thead, .rw-invoice-details-content table tbody, .rw-invoice-details-content table tr, .rw-invoice-details-content table td, .rw-invoice-details-content table th { display: block !important; width: 100% !important; box-sizing: border-box !important; } .rw-invoice-details-content table thead { display: none !important; } .rw-invoice-details-content table tr { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; padding: 12px !important; margin-bottom: 10px !important; } .rw-invoice-details-content table td { padding: 4px 0 !important; border: none !important; text-align: left !important; } /* Responsive action buttons inside customer ledger header - Keep same size as full screen */ .rw-invoice-header-toggle > div:last-child, .rw-invoice-action-bar { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; } .rw-invoice-header-toggle .rw-invoice-action-bar .button, .rw-invoice-header-toggle .rw-invoice-action-bar button, .rw-invoice-header-toggle .rw-invoice-action-bar a, .rw-invoice-header-toggle > div:last-child .button, .rw-invoice-header-toggle > div:last-child button, .rw-invoice-header-toggle > div:last-child a, .rw-invoice-action-bar .button, .rw-invoice-action-bar button, .rw-invoice-action-bar a { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; font-size: 11px !important; padding: 3px 8px !important; line-height: 1.3 !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; white-space: nowrap !important; margin: 0 !important; } .rw-status-dropdown-container { padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; display: inline-block !important; position: relative !important; flex: 0 0 auto !important; } .rw-status-dropdown-container .button, .rw-status-dropdown-container button { margin: 0 !important; } /* Ensure all form inputs fit container widths */ input[type="text"], input[type="email"], input[type="number"], input[type="datetime-local"], textarea, select { max-width: 100% !important; box-sizing: border-box !important; } /* Keep main form action bar horizontal on mobile: Save/Update left, Clear Form right */ .rw-form-actions { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; } .rw-form-actions .button:not(.rw-main-badge), .rw-form-actions input[type="submit"]:not(.rw-main-badge), .rw-form-actions button:not(.rw-main-badge) { width: auto !important; max-width: fit-content !important; margin-bottom: 0 !important; box-sizing: border-box !important; } /* Responsive page header title link */ .rw-customer-care-wrap h1, .rw-pos-scope h1 { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } /* Responsive customer profile bar stacking on smaller screens */ .rw-customer-profile-bar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } .rw-customer-profile-bar .rw-profile-divider { display: none !important; } /* ------------------------------------------------------------- */ /* RESPONSIVE DESKTOP VS MOBILE CUSTOMER LEDGER RULES */ /* ------------------------------------------------------------- */ @media screen and (min-width: 601px) { .rw-table-responsive { display: block !important; width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; } #rw_customer_ledger_section_content table.wp-list-table, #rw_customer_ledger_card table.wp-list-table, table.widefat.striped { display: table !important; width: 100% !important; table-layout: auto !important; box-sizing: border-box !important; } .bulkactions { display: block !important; } .rw-mobile-customer-ledger { display: none !important; } } /* Prevent Invoice Status Badges from breaking in half on mobile */ .rw-ledger-status-badge, .rw-invoice-owner-badge, .rw-security-seal-badge, .rw-status-badge, .rw-main-badge { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; word-break: keep-all !important; flex-shrink: 0 !important; } @media screen and (max-width: 600px) { .rw-ledger-status-badge, .rw-invoice-owner-badge, .rw-security-seal-badge { margin-left: 0 !important; margin-top: 4px !important; margin-right: 6px !important; display: inline-flex !important; white-space: nowrap !important; } /* Hide full desktop table view and bulk actions on phones */ .rw-table-responsive, #rw_customer_ledger_section_content table.wp-list-table, #rw_customer_ledger_card table.wp-list-table, .bulkactions { display: none !important; } /* Show mobile customer ledger card view on phone screens */ .rw-mobile-customer-ledger { display: flex !important; } } /* Top Notice Container */ #rw_notice_container, #rw_multiuser_notice_container { margin-top: 15px !important; } /* Business Identity Header Action Buttons Stacking on Mobile */ .rw-alias-header-buttons { width: 100% !important; flex-direction: column !important; align-items: stretch !important; margin-top: 8px !important; } .rw-alias-header-buttons .button { width: 100% !important; text-align: center !important; justify-content: center !important; } /* Email Logs Stacking on small screens */ #rw_email_logs_content table, #rw_email_logs_content table thead, #rw_email_logs_content table tbody, #rw_email_logs_content table tr, #rw_email_logs_content table td, #rw_email_logs_content table th { display: block !important; width: 100% !important; box-sizing: border-box !important; } #rw_email_logs_content table thead { display: none !important; } #rw_email_logs_content table tbody tr { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; padding: 12px 14px !important; margin-bottom: 12px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important; } #rw_email_logs_content table tbody td { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 13px !important; } #rw_email_logs_content table tbody td:last-child { border-bottom: none !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding-top: 10px !important; } .rw-log-label { display: inline-block !important; font-weight: 500 !important; color: #64748b !important; font-size: 12px !important; flex-shrink: 0 !important; margin-right: 10px !important; } .rw-log-val { display: inline-block !important; text-align: right !important; word-break: break-word !important; } #rw_email_logs_content table tbody td:last-child .rw-log-val { text-align: left !important; width: 100% !important; } .rw-customer-profile-bar .rw-toggle-inline-edit-btn { margin-left: 0 !important; width: 100% !important; } } @media screen and (max-width: 600px) { /* Touch-friendly invoice calculation inputs */ .inv-calc-input { font-size: 14px !important; padding: 8px !important; } /* Mobile drawer header action buttons wrap full width */ .rw-invoice-header-toggle + div .button-small, .view-mode-actions .button, .edit-mode-actions .button { flex: 1 1 auto !important; } } /* Always force top alignment for invoice builder line item columns */ #rw_invoice_items_table tbody td, .rw-invoice-line-row td { vertical-align: top !important; padding-top: 8px !important; } /* Elegant, thin, non-bold red X remove icon - vertically and horizontally centered */ .rw-remove-line-btn { font-size: 28px !important; font-weight: 300 !important; color: #e53e3e !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: transparent !important; border: none !important; line-height: 1 !important; cursor: pointer !important; margin: 0 auto !important; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important; box-sizing: border-box !important; } /* Single-Tick High-Contrast Custom CSS Checkboxes */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border: 1px solid #757575 !important; border-radius: 3px !important; background: #ffffff !important; margin: 0 5px 0 0 !important; vertical-align: middle !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; outline: none !important; box-sizing: border-box !important; } input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: #007cba !important; border-color: #007cba !important; } input[type="checkbox"]:checked::before { content: '' !important; display: block !important; width: 4px !important; height: 8px !important; border: solid #ffffff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; margin: -2px 0 0 0 !important; } /* Match Customer Ledger column headings font size to Customer Loyalty Rewards title (14px) */ .wp-list-table th, .wp-list-table th a, .wp-list-table thead th, .wp-list-table thead th a { font-size: 14px !important; font-weight: 500 !important; } /* Top Open & Pending Invoice Drawer Cards Single Horizontal Scroll Row (3 on desktop, 1 on mobile) */ .rw-open-invoices-list { display: flex; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 12px !important; margin-top: 15px !important; padding-bottom: 8px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #cbd5e1 transparent !important; } .rw-open-invoices-list::-webkit-scrollbar { height: 6px !important; } .rw-open-invoices-list::-webkit-scrollbar-track { background: #f1f5f9 !important; border-radius: 4px !important; } .rw-open-invoices-list::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px !important; } .rw-open-invoices-list::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } .rw-open-invoices-list .rw-edit-invoice-trigger { display: flex; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; flex: 0 0 calc((100% - 24px) / 3) !important; max-width: calc((100% - 24px) / 3) !important; min-width: calc((100% - 24px) / 3) !important; width: calc((100% - 24px) / 3) !important; scroll-snap-align: start !important; box-sizing: border-box !important; height: auto !important; min-height: 0 !important; padding: 10px 14px !important; line-height: 1 !important; border: 1px solid #ccd0d4 !important; border-radius: 6px !important; background: #fafafa !important; text-align: left !important; cursor: pointer !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-name-row { display: block !important; text-align: left !important; font-size: 14px !important; color: #2563eb !important; font-weight: 500 !important; line-height: 1.25 !important; margin: 0 0 5px 0 !important; padding: 0 !important; white-space: normal !important; word-break: break-word !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-date-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; text-align: left !important; font-size: 11px !important; color: #64748b !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 0 3px 0 !important; padding: 0 !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-amount-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; text-align: left !important; font-size: 12px !important; color: #334155 !important; font-weight: 500 !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 900px) { /* 2 columns on tablet and medium screens */ .rw-open-invoices-list .rw-edit-invoice-trigger { flex: 0 0 calc((100% - 12px) / 2) !important; max-width: calc((100% - 12px) / 2) !important; min-width: calc((100% - 12px) / 2) !important; width: calc((100% - 12px) / 2) !important; scroll-snap-align: start !important; text-align: left !important; align-items: flex-start !important; } } @media (max-width: 600px) { .rw-open-invoices-list { gap: 10px !important; padding-bottom: 6px !important; } .rw-open-invoices-list .rw-edit-invoice-trigger { flex: 0 0 100% !important; max-width: 100% !important; min-width: 100% !important; width: 100% !important; padding: 10px 12px !important; box-sizing: border-box !important; scroll-snap-align: start !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-name-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-date-row, .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-amount-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-info-item { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; font-size: 11px !important; line-height: 1.35 !important; } .rw-open-invoices-list .rw-edit-invoice-trigger .rw-card-info-pipe { display: inline !important; color: #cbd5e1 !important; margin: 0 2px !important; } .rw-loyalty-balance-card { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; } /* Mobile Selected View Totals & GST Breakdowns Multi-line Flow */ #rw_toggle_selected_view_totals_btn, .rw-selected-view-totals-toggle { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 32px !important; max-height: none !important; padding: 6px 10px !important; white-space: normal !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; box-sizing: border-box !important; word-break: normal !important; overflow-wrap: break-word !important; } .rw-totals-summary-badge { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 32px !important; max-height: none !important; padding: 6px 10px !important; white-space: normal !important; line-height: 1.4 !important; display: block !important; box-sizing: border-box !important; word-break: normal !important; overflow-wrap: break-word !important; } .rw-selected-view-totals-toggle .rw-selected-view-totals-text, .rw-selected-view-totals-toggle span:not(.rw-totals-chevron), .rw-totals-summary-badge span { display: inline !important; width: auto !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.4 !important; font-size: 11px !important; } .rw-selected-view-totals-toggle .rw-totals-chevron { display: inline-flex !important; flex: 0 0 auto !important; margin-left: auto !important; font-size: 9px !important; line-height: 1 !important; } /* Mobile Action Row: Clear Form + Apply Available Credit */ .rw-invoice-bottom-action-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; margin-top: 10px !important; box-sizing: border-box !important; } .rw-invoice-bottom-action-row #rw_clear_invoice_form_btn { grid-column: 1 / 2 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; justify-content: center !important; box-sizing: border-box !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; } .rw-invoice-bottom-action-row #rw_builder_apply_credit_card_btn { grid-column: 2 / 3 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; justify-content: center !important; box-sizing: border-box !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; } .rw-alias-header-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; gap: 6px !important; margin-top: 4px !important; } .rw-alias-header-buttons button, .rw-alias-header-buttons .button { flex: 1 1 50% !important; min-width: 0 !important; max-width: 50% !important; white-space: nowrap !important; font-size: 11px !important; padding: 5px 4px !important; text-align: center !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } } /* Master Admin Personal View Context Gating Rules */ .rw-store-gated-content { opacity: 0.45 !important; pointer-events: none !important; user-select: none !important; filter: grayscale(20%) !important; } /* All Staff & Store Manager Combined Mode Gating Rules */ .rw-combined-gated-content { opacity: 0.40 !important; pointer-events: none !important; user-select: none !important; filter: grayscale(40%) !important; cursor: not-allowed !important; } .rw-combined-gated-content input, .rw-combined-gated-content select, .rw-combined-gated-content textarea, .rw-combined-gated-content button { pointer-events: none !important; cursor: not-allowed !important; } /* ========================================================================== GLOBAL PLUGIN-WIDE DEFAULT DESIGN SYSTEM ========================================================================== */ /* Standardized Edit Mode Notice Bar System (Customer Profile & Invoice Editing) */ #rw_edit_mode_notice:not(.rw-active-editing), #rw_builder_mode_indicator:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; height: 0 !important; min-height: 0 !important; } #rw_edit_mode_notice.rw-active-editing, .rw-builder-mode-notice, .rw-edit-mode-notice-bar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 16px !important; min-height: 48px !important; padding: 10px 16px !important; margin-top: 10px !important; margin-bottom: 12px !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-left: 4px solid #16a34a !important; border-radius: 6px !important; font-size: 13px !important; line-height: 1.5 !important; color: #166534 !important; box-sizing: border-box !important; width: 100% !important; } .rw-builder-mode-notice-text, .rw-edit-notice-text { flex: 1 1 auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; line-height: 1.5 !important; } .rw-edit-notice-buttons, .rw-builder-mode-notice a, .rw-builder-mode-notice button, .rw-builder-mode-notice .rw-cancel-mode-btn, .rw-edit-mode-notice-bar a, .rw-edit-mode-notice-bar button, .rw-edit-mode-notice-bar .rw-cancel-btn, #rw_cancel_customer_edit_inline_btn, #rw_cancel_edit_inline_btn, #rw_cancel_mode_indicator_btn { flex: 0 0 auto !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 14px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; background: #ffffff !important; border: 1px solid #86efac !important; border-radius: 4px !important; color: #15803d !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.15s ease-in-out !important; white-space: nowrap !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rw-builder-mode-notice a:hover, .rw-builder-mode-notice button:hover, .rw-builder-mode-notice .rw-cancel-mode-btn:hover, .rw-edit-mode-notice-bar a:hover, .rw-edit-mode-notice-bar button:hover, .rw-edit-mode-notice-bar .rw-cancel-btn:hover, #rw_cancel_customer_edit_inline_btn:hover, #rw_cancel_edit_inline_btn:hover, #rw_cancel_mode_indicator_btn:hover { background: #dcfce7 !important; border-color: #4ade80 !important; color: #14532d !important; } @media screen and (max-width: 768px) { #rw_edit_mode_notice.rw-active-editing, .rw-builder-mode-notice, .rw-edit-mode-notice-bar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .rw-builder-mode-notice a, .rw-builder-mode-notice button, .rw-builder-mode-notice .rw-cancel-mode-btn, .rw-edit-mode-notice-bar a, .rw-edit-mode-notice-bar button, .rw-edit-mode-notice-bar .rw-cancel-btn, #rw_cancel_customer_edit_inline_btn, #rw_cancel_edit_inline_btn, #rw_cancel_mode_indicator_btn { width: 100% !important; margin-left: 0 !important; text-align: center !important; } } /* ========================================================================== UNIFIED ROOT CARD SHELL ARCHITECTURE (.pos-card, .pos-card-header, .pos-card-body) ========================================================================== */ .pos-card, .postbox, .rw-card, #rw_customer_details_wrapper, #rw_invoice_builder_wrapper, #rw_customer_ledger_card, #rw_email_logs_card, #rw_loyalty_card, #rw_alias_bar, #rw_business_alias_wrapper, .rw-attention-feed-container { background: #ffffff !important; border: 1px solid #ffffff !important; padding: 16px 20px !important; border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; width: 100% !important; box-sizing: border-box !important; clear: both !important; display: block !important; position: relative !important; margin-top: 0 !important; margin-bottom: 20px !important; } .rw-multiuser-user-bar { background: #ffffff !important; border: 1px solid #cbd5e1 !important; padding: 12px 20px !important; border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; box-sizing: border-box !important; clear: both !important; display: block !important; position: relative !important; margin: 15px 15px 15px 15px !important; } .pos-card-header { width: 100% !important; box-sizing: border-box !important; } .pos-card-body { width: 100% !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .rw-multiuser-user-bar .rw-top-controls-row { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; width: 100% !important; box-sizing: border-box !important; } .rw-multiuser-user-bar .rw-top-controls-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; margin-left: auto !important; } /* Invoice Builder Bottom Summary Grid (Customer Notes & Total Due 50/50 Layout) */ .rw-invoice-bottom-grid { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; align-items: stretch !important; margin-bottom: 20px !important; width: 100% !important; box-sizing: border-box !important; } .rw-invoice-bottom-grid .rw-notes-col { flex: 1 1 300px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; } .rw-invoice-bottom-grid .rw-total-col { flex: 1 1 300px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: stretch !important; align-items: stretch !important; } /* Main Section Heading Titles */ .rw-customer-care-wrap h1, .rw-customer-care-wrap h2, .rw-card h2, #rw_customer_details_wrapper h2, #rw_invoice_builder_wrapper h2, #rw_customer_details_wrapper h2, #rw_invoice_builder_wrapper h2, #rw_alias_section_wrapper h3, #rw_customer_ledger_card h2, #rw_email_logs_card h2, #rw_loyalty_card h2, .rw-section-title, .rw-main-heading { font-size: 18px !important; font-weight: 500 !important; color: #1e293b !important; margin-top: 0 !important; margin-bottom: 15px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Subheading Titles & Field Labels System */ .rw-customer-care-wrap label, .rw-customer-care-wrap .rw-subheading, .rw-customer-care-wrap .rw-field-label { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-weight: 500 !important; color: #1e293b !important; font-size: 13px !important; } /* Universal Field Border & Box Styles (Excludes Chip Dropdowns) */ .rw-customer-care-wrap input[type="text"], .rw-customer-care-wrap input[type="email"], .rw-customer-care-wrap input[type="number"], .rw-customer-care-wrap input[type="password"], .rw-customer-care-wrap input[type="search"], .rw-customer-care-wrap input[type="datetime-local"], .rw-customer-care-wrap textarea, .rw-customer-care-wrap select:not(.rw-header-alias-dropdown):not(.rw-header-gst-dropdown):not(#rw_header_active_alias_select):not(#rw_header_gst_mode_select):not(#rw_order_status_select):not(.rw-status-select-chip):not(.rw-status-dropdown-toggle), .rw-customer-care-wrap .inv-calc-input, .rw-customer-care-wrap .inv-barcode-field, .rw-customer-care-wrap .inv-cost-field, .rw-customer-care-wrap .inv-qty-field, .rw-customer-care-wrap .inv-desc-field, #customer_notes, .rw-selling-price-field, .rw-new-part-pay-amt-field, .rw-new-part-pay-date-field { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 8px 12px !important; margin: 0 !important; font-size: 13px !important; color: #1e293b !important; background-color: #ffffff !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } #rw_invoice_computed_total_card { border: none !important; border-radius: 6px !important; box-shadow: none !important; } .rw-customer-care-wrap textarea.inv-desc-field { margin-top: 6px !important; } .rw-customer-care-wrap .inv-qty-field { text-align: right !important; } /* Suppress WebKit & Firefox number input up/down spin buttons */ .rw-customer-care-wrap input[type="number"]::-webkit-outer-spin-button, .rw-customer-care-wrap input[type="number"]::-webkit-inner-spin-button, .inv-calc-input::-webkit-outer-spin-button, .inv-calc-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .rw-customer-care-wrap input[type="number"], .inv-calc-input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; } /* Placeholder Text Sizing & Color System */ .rw-customer-care-wrap input::placeholder, .rw-customer-care-wrap textarea::placeholder, .rw-customer-care-wrap select::placeholder { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #94a3b8 !important; opacity: 1 !important; font-weight: 400 !important; font-size: 13px !important; } /* Universal Clean Single-Line Focus Styling (Eliminates Heavy Multi-Layer Glow) */ .rw-customer-care-wrap input[type="text"]:focus, .rw-customer-care-wrap input[type="email"]:focus, .rw-customer-care-wrap input[type="number"]:focus, .rw-customer-care-wrap input[type="password"]:focus, .rw-customer-care-wrap input[type="search"]:focus, .rw-customer-care-wrap input[type="datetime-local"]:focus, .rw-customer-care-wrap input[type="date"]:focus, .rw-customer-care-wrap textarea:focus, .rw-customer-care-wrap select:not(.rw-header-alias-dropdown):not(.rw-header-gst-dropdown):not(#rw_header_active_alias_select):not(#rw_header_gst_mode_select):not(#rw_order_status_select):not(.rw-status-select-chip):not(.rw-status-dropdown-toggle):focus, .rw-customer-care-wrap .inv-calc-input:focus, .rw-customer-care-wrap .inv-barcode-field:focus, .rw-customer-care-wrap .inv-cost-field:focus, .rw-customer-care-wrap .inv-qty-field:focus, .rw-customer-care-wrap .inv-desc-field:focus { border-color: #2563eb !important; box-shadow: 0 0 0 1px #2563eb !important; outline: 0 !important; outline-offset: 0 !important; } /* Dedicated Header & Status Chip Dropdown Styles */ .rw-header-alias-dropdown, .rw-header-gst-dropdown, #rw_header_active_alias_select, #rw_header_gst_mode_select, #rw_order_status_select, .rw-status-select-chip { font-family: 'Outfit', sans-serif !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; font-size: 11px !important; font-weight: 500 !important; padding: 0 10px 0 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.3 !important; display: inline-block !important; cursor: pointer !important; } .rw-header-alias-dropdown:focus, .rw-header-gst-dropdown:focus, #rw_header_active_alias_select:focus, #rw_header_gst_mode_select:focus, #rw_order_status_select:focus, .rw-status-select-chip:focus { border-color: transparent !important; box-shadow: none !important; outline: none !important; } /* ========================================================================== STANDARDIZED BADGE & CHIP SYSTEM (MAIN BADGE VS SMALL BADGE) ========================================================================== */ /* Main Badge Style: Used for header profile chips, GST mode badge, & status chips */ .rw-main-badge, .rw-badge-main, #rw_header_alias_badge_wrap, #rw_header_gst_badge_wrap, #rw_builder_status_chip_wrap, #rw_toggle_alias_panel_btn, .rw-item-options-toggle-btn { display: inline-flex !important; align-items: center !important; font-family: 'Outfit', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; padding: 0 8px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; border-radius: 4px !important; border: 1px solid #cbd5e1 !important; box-sizing: border-box !important; transition: all 0.15s ease !important; } #rw_cancel_customer_edit_btn, #rw_cancel_invoice_edit_top_btn { display: none !important; } #rw_cancel_customer_edit_btn.rw-active-editing, #rw_cancel_invoice_edit_top_btn.rw-active-editing { display: inline-flex !important; } #rw_cancel_customer_edit_btn:hover, #rw_cancel_invoice_edit_top_btn:hover { background: #fee2e2 !important; border-color: #dc2626 !important; } /* Header Badges Responsive Grid: Medium (2 columns) & Small (1 column full width) */ @media screen and (max-width: 1024px) { #rw_business_alias_wrapper > div, #rw_business_alias_wrapper h3 { width: 100% !important; box-sizing: border-box !important; } #rw_business_alias_wrapper h3 { display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 !important; } } @media screen and (min-width: 601px) and (max-width: 1024px) { #rw_header_badges_container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; gap: 6px !important; margin-top: 8px !important; box-sizing: border-box !important; } #rw_header_alias_badge_wrap, #rw_header_gst_badge_wrap { width: 100% !important; justify-content: space-between !important; box-sizing: border-box !important; margin: 0 !important; } #rw_toggle_alias_panel_btn { grid-column: span 2 !important; width: 100% !important; justify-content: space-between !important; box-sizing: border-box !important; margin: 0 !important; } #rw_header_alias_badge_wrap #rw_active_alias_display_label, #rw_header_gst_badge_wrap #rw_active_gst_display_label, #rw_toggle_alias_panel_btn #rw_alias_count_badge { margin-left: auto !important; text-align: right !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media screen and (max-width: 600px) { #rw_header_badges_container { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 6px !important; margin-top: 8px !important; box-sizing: border-box !important; } #rw_header_alias_badge_wrap, #rw_header_gst_badge_wrap, #rw_toggle_alias_panel_btn { width: 100% !important; justify-content: space-between !important; box-sizing: border-box !important; margin: 0 !important; } #rw_header_alias_badge_wrap #rw_active_alias_display_label, #rw_header_gst_badge_wrap #rw_active_gst_display_label, #rw_toggle_alias_panel_btn #rw_alias_count_badge { margin-left: auto !important; text-align: right !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* Small Badges & Small Action Buttons: Used for ledger tags, mobile card tags, & inline counters */ .button-small, .rw-small-btn, .view-mode-actions .button, .view-mode-actions a, .rw-small-badge, .rw-badge-small, .rw-ledger-badge, .rw-mobile-badge, #rw_alias_count_badge, .rw-active-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Outfit', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; height: 24px !important; min-height: 24px !important; line-height: 22px !important; padding: 2px 8px !important; border-radius: 4px !important; box-sizing: border-box !important; } .rw-customer-info-unified-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 20px !important; } .rw-customer-info-unified-grid input[type="text"], .rw-customer-info-unified-grid input[type="email"], .rw-customer-info-unified-grid input[type="tel"], .rw-customer-info-unified-grid input[type="number"], #rw_customer_details_wrapper input[type="text"], #rw_customer_details_wrapper input[type="email"], #rw_customer_details_wrapper input[type="tel"], #rw_customer_details_wrapper input[type="number"] { height: 36px !important; min-height: 36px !important; max-height: 36px !important; line-height: 34px !important; padding: 0 12px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; background: #ffffff !important; font-size: 13px !important; color: #1e293b !important; vertical-align: middle !important; box-shadow: none !important; } .rw-customer-info-unified-grid textarea, #rw_customer_details_wrapper textarea { margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 8px 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; background: #ffffff !important; font-size: 13px !important; color: #1e293b !important; box-shadow: none !important; } .rw-cust-col-fname, .rw-cust-col-lname, .rw-cust-col-email, .rw-cust-col-phone { grid-column: span 1 !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .rw-bottom-left-addr { grid-column: span 2 !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .rw-bottom-right-notes { grid-column: span 2 !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } .rw-address-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } .rw-addr-col-street1, .rw-addr-col-street2, .rw-addr-col-suburb, .rw-addr-col-country { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .rw-addr-row-city-postcode { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .rw-addr-col-city, .rw-addr-col-postcode { grid-column: span 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .rw-cust-bname-wrap { margin: 0 0 8px 0 !important; width: 100% !important; box-sizing: border-box !important; } .rw-cust-gst-wrap { margin: 0 0 8px 0 !important; width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; box-sizing: border-box !important; } @media (max-width: 768px) { .rw-customer-info-unified-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .rw-cust-col-fname, .rw-cust-col-lname, .rw-cust-col-email, .rw-cust-col-phone, .rw-bottom-left-addr, .rw-bottom-right-notes, .rw-cust-gst-wrap, .rw-cust-bname-wrap { grid-column: span 1 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; } .rw-addr-row-city-postcode { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .rw-addr-col-city, .rw-addr-col-postcode, .rw-addr-col-suburb, .rw-addr-col-country { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; } } /* Email Delivery Logs Desktop Table Styling */ #rw_email_logs_card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; clear: both !important; display: block !important; } #rw_email_logs_content { width: 100% !important; box-sizing: border-box !important; } #rw_email_logs_content table { width: 100% !important; border-collapse: collapse !important; background: #ffffff !important; } #rw_email_logs_content table thead th { background: #f8fafc !important; color: #475569 !important; font-weight: 600 !important; font-size: 12px !important; padding: 10px 14px !important; border-bottom: 1px solid #e2e8f0 !important; } #rw_email_logs_content table tbody td { padding: 10px 14px !important; vertical-align: middle !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 12px !important; color: #334155 !important; } .rw-log-label { display: none !important; } /* Standardized Floating Dropdown Menus */ .rw-dropdown-container, .rw-status-dropdown-container { position: relative !important; } .rw-dropdown-menu, .rw-status-dropdown-menu { display: none; position: absolute !important; right: 0 !important; top: 100% !important; z-index: 100000 !important; background: #ffffff !important; border: 1px solid #ccc !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; border-radius: 4px !important; min-width: 160px !important; margin-top: 2px !important; padding: 0 !important; box-sizing: border-box !important; } .rw-dropdown-menu a, .rw-status-dropdown-menu a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; text-decoration: none !important; color: #333333 !important; font-size: 12px !important; font-weight: 500 !important; border-bottom: 1px solid #eee !important; text-align: left !important; background: #ffffff !important; box-sizing: border-box !important; transition: background-color 0.15s ease, color 0.15s ease !important; white-space: nowrap !important; } .rw-dropdown-menu a:last-child, .rw-status-dropdown-menu a:last-child { border-bottom: none !important; } .rw-dropdown-menu a:hover, .rw-status-dropdown-menu a:hover { background-color: #f1f5f9 !important; color: #007cba !important; } /* Prevent WP Native Square Table Borders from Overlapping Cards */ .rw-customer-care-wrap .widefat:not(#rw_invoice_items_table), #rw_customer_entry_card .widefat, #rw_customer_details_wrapper .widefat, #rw_customer_ledger_card .widefat, #rw_email_logs_card .widefat { border: none !important; box-shadow: none !important; } #rw_email_logs_card div[style*="overflow-y: auto"], #rw_customer_ledger_card div[style*="overflow-y: auto"] { border: none !important; box-shadow: none !important; } /* Customer Ledger Live Search Input */ #rw_search_input, .rw-search-input { width: 50% !important; max-width: 50% !important; padding: 8px 12px !important; font-size: 13px !important; border-radius: 4px !important; border: 1px solid #cbd5e1 !important; box-sizing: border-box !important; } /* Datetime Local Calendar Icon Failsafe Fix & Slate Gray Matching Style */ .rw-date-picker-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; max-width: 320px !important; box-sizing: border-box !important; } #rw_invoice_date_input, input[type="datetime-local"]#rw_invoice_date_input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; line-height: 34px !important; padding: 0 34px 0 10px !important; font-size: 13px !important; font-weight: 500 !important; color: #334155 !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; margin: 0 !important; vertical-align: middle !important; } .rw-date-picker-icon-overlay { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #64748b !important; width: 18px !important; height: 18px !important; z-index: 2 !important; } /* Remove native left WebKit calendar picker indicator icon on desktop */ #rw_invoice_date_input::-webkit-calendar-picker-indicator, input[type="datetime-local"]#rw_invoice_date_input::-webkit-calendar-picker-indicator, .rw-new-part-pay-date-field::-webkit-calendar-picker-indicator, input[type="date"].rw-new-part-pay-date-field::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none !important; appearance: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; pointer-events: none !important; } #rw_invoice_date_input::-webkit-inner-spin-button, input[type="datetime-local"]#rw_invoice_date_input::-webkit-inner-spin-button, #rw_invoice_date_input::-webkit-clear-button, input[type="datetime-local"]#rw_invoice_date_input::-webkit-clear-button, .rw-new-part-pay-date-field::-webkit-inner-spin-button, input[type="date"].rw-new-part-pay-date-field::-webkit-inner-spin-button, .rw-new-part-pay-date-field::-webkit-clear-button, input[type="date"].rw-new-part-pay-date-field::-webkit-clear-button { display: none !important; -webkit-appearance: none !important; margin: 0 !important; } #rw_invoice_date_input:focus, input[type="datetime-local"]#rw_invoice_date_input:focus { border-color: #2563eb !important; box-shadow: 0 0 0 1px #2563eb !important; outline: 0 !important; outline-offset: 0 !important; } #rw_reset_invoice_date_btn, button#rw_reset_invoice_date_btn { flex: 0 0 auto !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; line-height: 34px !important; padding: 0 16px !important; font-size: 13px !important; font-weight: 500 !important; background: #94a3b8 !important; background-color: #94a3b8 !important; color: #ffffff !important; border: 1px solid #94a3b8 !important; border-radius: 4px !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; margin: 0 !important; box-sizing: border-box !important; vertical-align: middle !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #rw_reset_invoice_date_btn:hover, #rw_reset_invoice_date_btn:focus { background: #64748b !important; background-color: #64748b !important; color: #ffffff !important; border-color: #64748b !important; } #rw_invoice_date_input::-webkit-calendar-picker-indicator, input[type="datetime-local"]#rw_invoice_date_input::-webkit-calendar-picker-indicator { display: inline-block !important; background-color: transparent !important; padding: 0 !important; margin: 0 0 0 4px !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; filter: none !important; -webkit-appearance: none !important; } @media (max-width: 600px) { .rw-invoice-header-row { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } .rw-invoice-header-row label { min-width: 0 !important; width: 100% !important; margin-bottom: 4px !important; } .rw-date-picker-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; } .rw-date-picker-wrap #rw_invoice_date_input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 36px !important; margin: 0 !important; } .rw-date-picker-wrap #rw_reset_invoice_date_btn { flex: 0 0 auto !important; height: 36px !important; margin: 0 !important; } #rw_search_input, .rw-search-input { width: 100% !important; max-width: 100% !important; } .rw-status-picker-wrap, #rw_builder_status_chip_wrap, #rw_builder_fulfillment_chip_wrap { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; display: inline-flex !important; } .rw-status-picker-wrap .rw-main-badge label { width: auto !important; min-width: 0 !important; margin-bottom: 0 !important; display: inline-block !important; } .rw-address-grid { grid-template-columns: 1fr !important; } .rw-status-dropdown-menu, .rw-dropdown-menu { left: 0 !important; right: auto !important; min-width: 100% !important; max-width: calc(100vw - 32px) !important; box-sizing: border-box !important; } .rw-status-dropdown-menu a, .rw-dropdown-menu a { white-space: normal !important; word-break: break-word !important; line-height: 1.3 !important; } .rw-customer-care-wrap .widefat:not(#rw_invoice_items_table), #rw_customer_entry_card .widefat, #rw_customer_details_wrapper .widefat, #rw_customer_ledger_card .widefat, #rw_email_logs_card .widefat { border: none !important; box-shadow: none !important; } } /* Universal Standardized Form Action Buttons System (Main Action Buttons Only) */ .rw-customer-care-wrap button:not(#rw_alias_logo_delete_x_btn):not(.rw-toggle-section-trigger):not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap input[type="submit"]:not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap input[type="button"]:not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .button:not(#rw_alias_logo_delete_x_btn):not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .button-primary:not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .button-secondary:not(#rw_alias_logo_delete_x_btn):not(.button-small):not(.rw-small-btn):not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .button-large:not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .rw-btn-action:not(.rw-main-badge):not(.rw-item-options-toggle-btn), .rw-customer-care-wrap .rw-action-btn:not(.rw-main-badge):not(.rw-item-options-toggle-btn) { height: 38px !important; min-height: 38px !important; line-height: 36px !important; padding: 0 16px !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 4px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.15s ease !important; vertical-align: middle !important; } /* Primary Action Buttons (WordPress Primary Blue) */ .rw-customer-care-wrap .button-primary, .rw-customer-care-wrap input[type="submit"].button-primary { background: #2271b1 !important; border: 1px solid #2271b1 !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .rw-customer-care-wrap .button-primary:hover, .rw-customer-care-wrap input[type="submit"].button-primary:hover { background: #135e96 !important; border-color: #135e96 !important; color: #ffffff !important; } /* Secondary / Neutral Form Action Buttons */ #rw_save_only_flag_btn, #rw_add_line_item_btn { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; } #rw_save_only_flag_btn:hover, #rw_add_line_item_btn:hover { background: #e2e8f0 !important; border-color: #94a3b8 !important; color: #0f172a !important; } /* Green Action Buttons (e.g. Save Alias) */ #rw_save_alias_btn { background: #10b981 !important; border: 1px solid #10b981 !important; color: #ffffff !important; } #rw_save_alias_btn:hover { background: #059669 !important; border-color: #059669 !important; color: #ffffff !important; } /* Clear / Danger Action Buttons */ #rw_clear_invoice_form_btn { background: #ffffff !important; border: 1px solid #ef4444 !important; color: #ef4444 !important; } #rw_clear_invoice_form_btn:hover { background: #fef2f2 !important; border-color: #dc2626 !important; color: #dc2626 !important; } /* User Manual Badge Hover Style */ a.rw-main-badge:hover { background: #e2e8f0 !important; color: #1e293b !important; border-color: #94a3b8 !important; text-decoration: none !important; } /* Delivery Address Header & Soft Blue Placeholder Styling */ #rw_shipping_address_drawer .rw-delivery-address-label { color: #1e40af !important; } #rw_shipping_address_drawer input::placeholder { color: #60a5fa !important; opacity: 1 !important; } #rw_shipping_address_drawer input::-webkit-input-placeholder { color: #60a5fa !important; opacity: 1 !important; } #rw_shipping_address_drawer input::-moz-placeholder { color: #60a5fa !important; opacity: 1 !important; } #rw_shipping_address_drawer input:-ms-input-placeholder { color: #60a5fa !important; opacity: 1 !important; } /* ========================================================================= * FINAL ISOLATION HARDENING SAFEGUARDS * ========================================================================= */ /* 1. Third-Party Admin Notice Shielding (Blocks external plugin banners on POS pages) */ .rw-customer-care-wrap > .notice:not(#rw_notice_container *):not(.is-dismissible), .rw-pos-scope > .notice:not(#rw_notice_container *), #wpbody-content > .notice:not(#rw_notice_container *):not(#rw_multiuser_notice_container *):not(.is-dismissible) { display: none !important; } /* 2. Modal Dialog Viewport & Glass Blur Overlay Standardization */ #rw_private_logo_modal, #rw_store_manager_modal, #rw_passkey_manager_modal, #rw_edit_staff_modal, #rw_add_device_modal, .rw-modal-overlay { background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; align-items: flex-start !important; justify-content: center !important; padding-top: 40px !important; box-sizing: border-box !important; overflow-y: auto !important; } #rw_private_logo_modal > div, #rw_store_manager_modal > div, #rw_passkey_manager_modal > div, #rw_edit_staff_modal > div, #rw_add_device_modal > div, #new-folder-modal > div, #rename-folder-modal > div, #rename-file-modal > div { margin-top: 20px !important; margin-bottom: 40px !important; max-height: 85vh !important; overflow-y: auto !important; box-sizing: border-box !important; } /* 3. Strict Form Control Font & Layout Protection */ .rw-pos-scope input, .rw-pos-scope select, .rw-pos-scope textarea, .rw-pos-scope button, .sac-compliance-scope input, .sac-compliance-scope select, .sac-compliance-scope textarea, .sac-compliance-scope button { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; box-sizing: border-box !important; } /* ========================================================================= * INVOICE BUILDER ROW CONTROL BUTTONS (GLOBAL STYLING & VISIBILITY) * ========================================================================= */ /* Hide Add Item Line button on all invoice item rows by default */ .rw-add-line-item-btn-inline { display: none !important; } /* Show Add Item Line button ONLY on the last options row in the container */ #rw_invoice_lines_container tr.rw-invoice-line-options-row:last-of-type .rw-add-line-item-btn-inline, #rw_invoice_lines_container .rw-invoice-line-options-row:last-child .rw-add-line-item-btn-inline { display: inline-flex !important; } /* Hide Delete Line button wrap on the first item line */ #rw_invoice_lines_container tr.rw-invoice-line-options-row:first-of-type .rw-delete-line-btn-wrap { display: none !important; } /* Delete Item Line Button Badge Styling (No icon, red text, red border) */ .rw-delete-item-line-btn { margin: 0 !important; cursor: pointer !important; background: #fef2f2 !important; color: #dc2626 !important; font-size: 11px !important; padding: 0 8px !important; height: 26px !important; min-height: 26px !important; border-radius: 4px !important; font-weight: 500 !important; user-select: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; border: 1px solid #dc2626 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; } .rw-delete-item-line-btn:hover { background: #fee2e2 !important; border-color: #b91c1c !important; color: #b91c1c !important; } /* ========================================================================= * DESKTOP COMPACT ACTION BUTTONS FOR INVOICE BUILDER FORM ACTIONS * ========================================================================= */ @media screen and (min-width: 769px) { .rw-form-actions { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; width: 100% !important; } .rw-form-actions .button:not(.rw-main-badge), .rw-form-actions input[type="submit"]:not(.rw-main-badge), .rw-form-actions button:not(.rw-main-badge):not(#rw_save_action_submit_btn) { width: auto !important; max-width: fit-content !important; flex: 0 0 auto !important; height: 34px !important; min-height: 34px !important; line-height: 32px !important; padding: 0 14px !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 4px !important; box-sizing: border-box !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } #rw_clear_invoice_form_btn.rw-main-badge, .rw-form-actions #rw_clear_invoice_form_btn { width: auto !important; max-width: fit-content !important; flex: 0 0 auto !important; white-space: nowrap !important; margin-left: auto !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; line-height: 24px !important; padding: 0 10px !important; font-size: 11px !important; font-weight: 500 !important; border-radius: 4px !important; border: 1px solid #d83b01 !important; color: #d83b01 !important; background: #ffffff !important; cursor: pointer !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #rw_clear_invoice_form_btn.rw-main-badge:hover, .rw-form-actions #rw_clear_invoice_form_btn:hover { background: #fff5f5 !important; border-color: #b91c1c !important; color: #b91c1c !important; } .rw-save-action-picker-wrap { width: auto !important; max-width: fit-content !important; flex: 0 0 auto !important; margin: 0 !important; } #rw_save_action_chip_wrap { height: 26px !important; min-height: 26px !important; max-height: 26px !important; line-height: 24px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 500 !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; color: #475569 !important; padding: 0 10px !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; cursor: pointer !important; user-select: none !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; transition: all 0.15s ease !important; } #rw_save_action_chip_wrap:hover { background: #f8fafc !important; border-color: #94a3b8 !important; color: #1e293b !important; } /* ========================================================================= * MOBILE EDGE-TO-EDGE VIEWPORT LAYOUT (No White Border / Full Width Grey) * ========================================================================= */ @media screen and (max-width: 782px) { body.toplevel_page_rw-customer-care #wpcontent, body.toplevel_page_rw-customer-care #wpbody, body.toplevel_page_rw-customer-care #wpbody-content, body.admin_page_rw-multiuser #wpcontent, body.admin_page_rw-multiuser #wpbody, body.admin_page_rw-multiuser #wpbody-content, body.admin_page_rw-loyalty #wpcontent, body.admin_page_rw-loyalty #wpbody, body.admin_page_rw-loyalty #wpbody-content, body.rw-portal-frame #wpcontent, body.rw-portal-frame #wpbody, body.rw-portal-frame #wpbody-content { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #e2e8f0 !important; background-color: #e2e8f0 !important; } body.toplevel_page_rw-customer-care, body.admin_page_rw-multiuser, body.admin_page_rw-loyalty, body.rw-portal-frame { background: #e2e8f0 !important; background-color: #e2e8f0 !important; } .wrap.rw-customer-care-wrap, .rw-customer-care-wrap, #rw_customer_care_main_wrap { margin: 0 !important; padding: 10px 14px 20px 14px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #e2e8f0 !important; background-color: #e2e8f0 !important; } } /* ========================================================================= * TOP WHITESPACE & NOTICE CONTAINER COLLAPSE SAFEGUARDS * ========================================================================= */ #rw_notice_container:empty, #rw_multiuser_notice_container:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; } #rw_notice_container:not(:empty), #rw_multiuser_notice_container:not(:empty) { margin-top: 6px !important; margin-bottom: 10px !important; } .rw-customer-care-wrap > h1:first-child { margin-top: 2px !important; margin-bottom: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================================= * FLOATING VIEWPORT TOAST NOTIFICATION STACK * ========================================================================= */ #rw-toast-container { position: fixed !important; top: 32px !important; right: 24px !important; z-index: 99999999 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; max-width: 420px !important; width: calc(100vw - 48px) !important; pointer-events: none !important; } #rw-toast-container.rw-pos-top-right { top: 32px !important; right: 24px !important; bottom: auto !important; left: auto !important; } #rw-toast-container.rw-pos-bottom-right { bottom: 32px !important; right: 24px !important; top: auto !important; left: auto !important; } #rw-toast-container.rw-pos-top-left { top: 32px !important; left: 24px !important; bottom: auto !important; right: auto !important; } #rw-toast-container.rw-pos-bottom-left { bottom: 32px !important; left: 24px !important; top: auto !important; right: auto !important; } #rw-toast-container.rw-pos-top-center { top: 32px !important; left: 50% !important; transform: translateX(-50%) !important; bottom: auto !important; right: auto !important; } .rw-toast-item { pointer-events: auto !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; background: #ffffff !important; padding: 14px 16px !important; border-radius: 8px !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; border-left: 4px solid #007cba !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 13px !important; line-height: 1.45 !important; color: #1e293b !important; animation: rwToastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; position: relative !important; overflow: hidden !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } .rw-toast-item.rw-toast-success { border-left-color: #10b981 !important; } .rw-toast-item.rw-toast-error, .rw-toast-item.rw-toast-danger { border-left-color: #ef4444 !important; } .rw-toast-item.rw-toast-warning { border-left-color: #f59e0b !important; } .rw-toast-item.rw-toast-info { border-left-color: #3b82f6 !important; } .rw-toast-icon { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; margin-top: 1px !important; } .rw-toast-body { flex: 1 !important; word-break: break-word !important; font-weight: 500 !important; } .rw-toast-body p { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #1e293b !important; } .rw-toast-body strong { font-weight: 600 !important; color: #0f172a !important; } .rw-toast-close { flex-shrink: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; margin: -2px -4px 0 4px !important; cursor: pointer !important; color: #94a3b8 !important; font-size: 16px !important; line-height: 1 !important; transition: color 0.15s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 4px !important; } .rw-toast-close:hover { color: #0f172a !important; background: #f1f5f9 !important; } .rw-toast-progress-bar { position: absolute !important; bottom: 0 !important; left: 0 !important; height: 3px !important; background: rgba(0, 0, 0, 0.08) !important; width: 100% !important; } .rw-toast-progress-fill { height: 100% !important; background: #10b981 !important; width: 100% !important; } .rw-toast-item.rw-toast-error .rw-toast-progress-fill, .rw-toast-item.rw-toast-danger .rw-toast-progress-fill { background: #ef4444 !important; } .rw-toast-item.rw-toast-warning .rw-toast-progress-fill { background: #f59e0b !important; } .rw-toast-item.rw-toast-info .rw-toast-progress-fill { background: #3b82f6 !important; } @keyframes rwToastSlideIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes rwToastSlideOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(40px) scale(0.96); } } @media (max-width: 600px) { #rw-toast-container { top: 16px !important; right: 12px !important; left: 12px !important; max-width: 100% !important; width: auto !important; } } /* ========================================================================= * GST TOTALS & SELECTED VIEW BADGES MULTI-LINE HEIGHT ADAPTATION * ========================================================================= */ #rw_selected_view_totals_breakdown { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #rw_selected_view_totals_breakdown .rw-totals-pill-row, #rw_selected_view_totals_breakdown .rw-totals-actions-row, #rw_selected_view_totals_breakdown > div { display: flex !important; align-items: center !important; gap: 8px 10px !important; flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .rw-totals-summary-badge, .rw-selected-view-totals-toggle, .rw-main-badge.rw-totals-summary-badge, .rw-main-badge.rw-selected-view-totals-toggle, #rw_selected_view_totals_breakdown .rw-totals-summary-badge { height: auto !important; min-height: 26px !important; max-height: none !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.4 !important; padding: 6px 10px !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } @media (max-width: 768px) { .rw-totals-summary-badge, .rw-selected-view-totals-toggle, .rw-main-badge.rw-totals-summary-badge, .rw-main-badge.rw-selected-view-totals-toggle, #rw_selected_view_totals_breakdown .rw-totals-summary-badge { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 32px !important; max-height: none !important; padding: 6px 10px !important; white-space: normal !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; box-sizing: border-box !important; } .rw-totals-summary-badge span, .rw-selected-view-totals-toggle span:not(.rw-totals-chevron), #rw_selected_view_totals_breakdown .rw-totals-summary-badge span { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.4 !important; font-size: 11px !important; display: inline !important; width: auto !important; } .rw-selected-view-totals-toggle .rw-totals-chevron { display: inline-flex !important; flex: 0 0 auto !important; margin-left: auto !important; font-size: 9px !important; } } /* ========================================================================== RECURRING BILLING PROFILES MODAL & FORM CONTROLS (Store Manager Styling) ========================================================================== */ #rw_recurring_profile_modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 99999999 !important; background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; box-sizing: border-box !important; } #rw_recurring_profile_modal select, .rw-customer-care-wrap #rw_recurring_profile_modal select, #rw_recurring_profile_modal select.rw-rec-select { height: 38px !important; min-height: 38px !important; max-height: 38px !important; line-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 12px !important; padding-right: 28px !important; font-size: 13px !important; font-weight: 500 !important; color: #1e293b !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; vertical-align: middle !important; box-sizing: border-box !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; } #rw_recurring_profile_modal input[type="text"], #rw_recurring_profile_modal input[type="number"], #rw_recurring_profile_modal input[type="date"], .rw-customer-care-wrap #rw_recurring_profile_modal input.rw-rec-input { height: 38px !important; min-height: 38px !important; max-height: 38px !important; line-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; font-weight: 500 !important; color: #1e293b !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; vertical-align: middle !important; box-sizing: border-box !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; } #rw_recurring_profile_modal textarea { font-size: 13px !important; line-height: 1.45 !important; color: #1e293b !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 8px 12px !important; box-sizing: border-box !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; } #rw_recurring_profile_modal table input[type="text"], #rw_recurring_profile_modal table input[type="number"] { height: 34px !important; min-height: 34px !important; max-height: 34px !important; line-height: 32px !important; padding-left: 10px !important; padding-right: 10px !important; font-size: 12px !important; border-radius: 6px !important; } /* ============================================================= Unified "Needs Attention" Action Feed & Filter Controls ============================================================= */ .rw-attention-feed-container { border-left: 5px solid #2563eb !important; border-radius: 8px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .rw-attention-header-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; } .rw-feed-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .rw-feed-filter-btn { background: #f8fafc; border: 1px solid #cbd5e1; color: #475569; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: all 0.15s ease-in-out; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; user-select: none; } .rw-feed-filter-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; } .rw-feed-filter-btn.rw-active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25); } .rw-feed-filter-btn strong, .rw-feed-filter-btn span { font-weight: 700; } .rw-feed-filter-btn.rw-active strong, .rw-feed-filter-btn.rw-active span { color: #ffffff !important; } .rw-open-invoices-list .rw-edit-invoice-trigger.rw-feed-card-hidden { display: none !important; } .rw-priority-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1.3; } @media (max-width: 768px) { .rw-attention-header-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } .rw-feed-filter-bar { width: 100%; } } /* ========================================================================== LUXURY SMOOTH SCROLLING & ACCORDION MOTION SYSTEM ========================================================================== */ html { scroll-behavior: smooth; } .rw-customer-care-wrap { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .rw-toggle-icon, .rw-options-chevron, .rw-invoice-toggle-icon, .rw-more-arrow, .rw-alias-dropdown-arrow, #rw_invoice_payments_chevron { display: inline-block; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease; will-change: transform; } .rw-main-badge { transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease !important; } .rw-main-badge:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Slim Customer Selector Bar - New Customer Button Subtle Outline Style */ #rw_btn_new_customer, .rw-btn-new-customer { border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #4338ca !important; border-radius: 4px !important; font-weight: 500 !important; font-size: 11px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; line-height: 26px !important; padding: 0 10px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: all 0.15s ease !important; text-decoration: none !important; } #rw_btn_new_customer:hover, .rw-btn-new-customer:hover { background: #e0e7ff !important; border-color: #a5b4fc !important; color: #3730a3 !important; } /* Standardise Mode Notice & Push Cancel Button to the Far Right */ .rw-builder-mode-notice { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px 16px !important; min-height: 48px !important; padding: 10px 16px !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-left: 4px solid #16a34a !important; border-radius: 6px !important; font-size: 13px !important; line-height: 1.5 !important; color: #166534 !important; margin-bottom: 12px !important; box-sizing: border-box !important; } /* Style the Cancel Action as a Clean Pill Button */ .rw-builder-mode-notice a, .rw-builder-mode-notice button, .rw-builder-mode-notice .rw-cancel-mode-btn, .rw-edit-mode-notice-bar a, .rw-edit-mode-notice-bar button, .rw-edit-mode-notice-bar .rw-cancel-btn, #rw_cancel_customer_edit_inline_btn, #rw_cancel_edit_inline_btn, #rw_cancel_mode_indicator_btn { flex: 0 0 auto !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 14px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 28px !important; background: #ffffff !important; border: 1px solid #86efac !important; border-radius: 4px !important; color: #15803d !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.15s ease-in-out !important; white-space: nowrap !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rw-builder-mode-notice a:hover, .rw-builder-mode-notice button:hover, .rw-builder-mode-notice .rw-cancel-mode-btn:hover, .rw-edit-mode-notice-bar a:hover, .rw-edit-mode-notice-bar button:hover, .rw-edit-mode-notice-bar .rw-cancel-btn:hover, #rw_cancel_customer_edit_inline_btn:hover, #rw_cancel_edit_inline_btn:hover, #rw_cancel_mode_indicator_btn:hover { background: #dcfce7 !important; border-color: #4ade80 !important; color: #14532d !important; } /* ========================================================================== FINANCIAL SUMMARY BREAKDOWN STRIP & PILL ROW RESPONSIVE WRAPPING ========================================================================== */ .financial-breakdown-pills-row, #rw_selected_view_totals_breakdown .financial-breakdown-pills-row, #rw_selected_view_totals_breakdown .rw-totals-pill-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #rw_selected_view_totals_breakdown .rw-totals-actions-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #rw_selected_view_totals_breakdown .rw-totals-summary-badge { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; word-break: break-word !important; box-sizing: border-box !important; }