/* Zoogol custom styles shared by all dashboard pages (ported from layouts/sections/styles.blade.php + page styles) */
.menu-item.disabled { pointer-events: none; opacity: 0.6; }
.menu-item.disabled .menu-link { cursor: not-allowed; pointer-events: auto; }
.menu-item.disabled .menu-link:hover { background-color: transparent !important; }
.menu-item.disabled .text-muted { color: #6c757d !important; }

.zg-stat-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; }
.zg-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: .5rem; background: #f1f1f4; }
.zg-thumb-lg { width: 72px; height: 72px; object-fit: cover; border-radius: .5rem; background: #f1f1f4; }
.zg-img-cover { width: 100%; height: 180px; object-fit: cover; background: #f4f4f6; }
.zg-clickable { cursor: pointer; }
.zg-mono { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zg-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.zg-empty { padding: 3rem 1rem; text-align: center; color: #a8aab4; }
.zg-empty i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.zg-filter-bar .form-select, .zg-filter-bar .form-control { min-width: 140px; }
.zg-table-actions .btn { padding: .25rem .5rem; }
.table td, .table th { vertical-align: middle; }
.card-header-tabs .nav-link { cursor: pointer; }
.zg-qr-box { background: #fff; padding: 16px; border-radius: 12px; display: inline-block; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.zg-progress-thin { height: 6px; }
.zg-tree ul { padding-left: 1.5rem; border-left: 1px dashed #d9dee3; margin-left: .75rem; list-style: none; }
.zg-tree li { position: relative; margin: .35rem 0; }
.zg-tree .zg-node { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: .5rem; background: rgba(102,108,255,.08); }
.zg-skeleton { background: linear-gradient(90deg, #f0f0f3 25%, #e6e6ea 37%, #f0f0f3 63%); background-size: 400% 100%; animation: zg-shimmer 1.4s ease infinite; border-radius: .375rem; min-height: 1rem; }
@keyframes zg-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.app-brand-link img { max-width: 160px; }
@media (max-width: 575.98px) { .zg-hide-xs { display: none !important; } }
/* .avatar-title is used by several Laravel views but isn't part of Materio: give it the usual circle look */
.avatar-title { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-weight: 500; }
.avatar-sm:has(> .avatar-title) { width: 2.5rem; height: 2.5rem; }
.avatar-xl:has(> .avatar-title) { width: 5.5rem; height: 5.5rem; }
.avatar-title.text-primary { color: var(--bs-primary) !important; }
/* livewire/user/partials/instore-product-card */
.gradient-btn { background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff !important; border: none; border-radius: 25px; font-weight: 600; transition: all 0.3s ease-in-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.gradient-btn:hover { background: linear-gradient(135deg, #2575fc, #6a11cb); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.badge-sm { font-size: 0.7rem; padding: 0.25em 0.5em; }
.search-suggestion-item:hover { background: #f5f5f9; }
/* livewire/user/partials/deal-card */
.exclusive-offer-block { background: linear-gradient(135deg, rgb(255, 245, 58) 0%, rgb(249, 248, 150) 50%, rgb(255, 171, 252) 100%); border-left: 4px solid var(--bs-primary, #696cff); min-width: 0; }
.exclusive-offer-block .exclusive-offer-icon { font-size: 1rem; }
.exclusive-offer-block .exclusive-offer-text { min-width: 0; word-break: break-word; }
.exclusive-offer-block .exclusive-offer-label { color: rgb(13, 110, 253); }
.exclusive-offer-block .exclusive-offer-brand { color: rgb(0, 0, 0); }
@media (max-width: 767.98px) { .exclusive-offer-block { padding: 0.5rem 0.65rem !important; } .exclusive-offer-block .exclusive-offer-text { font-size: 0.8rem !important; line-height: 1.3; } }
/* deals browser category dropdown */
.cat-dropdown { position: relative; }
.cat-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; user-select: none; background: #fff; border: 1px solid #d9dee3; border-radius: 0.375rem; padding: 0.422rem 0.875rem; font-size: 0.9375rem; line-height: 1.53; color: #697a8d; transition: border-color 0.15s ease; }
.cat-trigger:focus { outline: none; border-color: #696cff; box-shadow: 0 0 0 0.2rem rgba(105,108,255,.25); }
.cat-trigger .cat-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: #a1acb8; }
.cat-trigger[aria-expanded="true"] .cat-chevron { transform: rotate(180deg); }
.cat-menu { position: absolute; z-index: 1055; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #d9dee3; border-radius: 0.375rem; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 280px; overflow-y: auto; display: none !important; }
.cat-menu.is-open { display: block !important; }
.cat-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.875rem; cursor: pointer; font-size: 0.9rem; color: #697a8d; transition: background 0.12s; }
.cat-option:hover, .cat-option.is-focused { background: #f5f5ff; color: #696cff; }
.cat-option.is-selected { color: #696cff; font-weight: 500; }
.cat-option.is-all { border-bottom: 1px solid #eee; font-weight: 500; color: #566a7f; }
.cat-group-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.875rem; cursor: pointer; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #566a7f; background: #f8f9fa; border-bottom: 1px solid #eee; transition: background 0.12s; }
.cat-group-header:hover { background: #eef0ff; color: #696cff; }
.cat-group-header .cat-group-chevron { transition: transform 0.2s ease; color: #a1acb8; flex-shrink: 0; }
.cat-group-header.is-open .cat-group-chevron { transform: rotate(90deg); }
.cat-dropdown .cat-children { border-bottom: 1px solid #eee; display: none; }
.cat-children .cat-option { padding-left: 2rem; }
.search-suggestions-dropdown { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }