/* 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;
    }
}

/* 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;
}