/* Shopbox-specific styles. The shared BRAWLBOX design system (tokens, components, glass, buttons, forms, navbar, scrollbars) now lives in Suitebox.Theme → _content/Suitebox.Theme/css/brawlbox-theme.css. Only Shopbox-specific rules remain. */ /* Dropdown glass border + mobile readability (notification dropdown) */ .dropdown-menu.glass, .modal-content.glass { border: 1px solid var(--border-color) !important; } @media (max-width: 768px) { .dropdown-menu.glass { background-color: var(--surface) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } } @media (min-width: 769px) { .dropdown-menu.glass { background-color: color-mix(in srgb, var(--surface) 95%, transparent) !important; } } /* The shared theme applies `body > * { position: relative; z-index: 1 }` so page content paints above the fixed paper-grain overlay. That makes the main .container a stacking context, which traps the page-level modals rendered inside RenderBody() (Add Item, Apply Template, etc.) beneath the .modal-backdrop that Bootstrap appends to — showing as a black box over the modal. Dropping the container's z-index (while keeping it positioned) removes the stacking context so the modal's own z-index wins, without changing how content layers over the paper overlay. */ body > .container { z-index: auto; } /* Brand the Bootstrap text-primary accent (basket icon, etc.) */ .text-primary { color: var(--brand-coral) !important; } /* Custom checkbox for the shopping list */ .shop-item-check { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid var(--border-color); background-color: transparent; transition: all 0.2s ease; } .shop-item-check:checked { background-color: var(--brand-coral); border-color: var(--brand-coral); } .shop-item-row { transition: opacity 0.3s ease; } .shop-item-row.completed { opacity: 0.5; text-decoration: line-through; }