/* ==========================================================================
   Site header — mobile first
   Adds the mobile drawer and account menu on top of style.css's .qu-navbar.
   ========================================================================== */

:root {
    --hd-primary: var(--qu-primary, #1E3A8A);
    --hd-primary-deep: #16295E;
    --hd-accent: var(--qu-accent, #3B82F6);
    --hd-tint: var(--qu-badge-bg, #EFF6FF);
    --hd-ink: var(--qu-text-dark, #111827);
    --hd-muted: var(--qu-text-muted, #6B7280);
    --hd-border: var(--qu-border-color, #E5E7EB);
    --hd-danger: #DC2626;
}

.qu-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0 9px;
    border: 1px solid var(--hd-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
.mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--hd-primary);
}
.mobile-menu-toggle:hover { background: var(--hd-tint); border-color: var(--hd-accent); }
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Header actions
   -------------------------------------------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: none;
}
/* The mini search is desktop-only; mobile users get the drawer + catalogue. */
.search-mini-wrap { display: none; }

/* --------------------------------------------------------------------------
   Account menu
   -------------------------------------------------------------------------- */
.account-menu { position: relative; }

.account-trigger {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .3rem .2rem .2rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--hd-muted);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
    background: var(--hd-tint);
    border-color: #DBEAFE;
}
.account-trigger:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }
.account-trigger.is-guest {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
    color: var(--hd-primary);
}
.account-caret { color: var(--hd-muted); flex: none; }

.account-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hd-primary), var(--hd-accent));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
}
.account-avatar.is-lg { width: 42px; height: 42px; font-size: 1rem; }

.account-dropdown.dropdown-menu {
    min-width: 264px;
    padding: 0;
    border: 1px solid var(--hd-border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .13);
    overflow: hidden;
    margin-top: .5rem;
}

.account-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem .9rem;
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-deep) 100%);
    color: #fff;
}
.account-identity { min-width: 0; }
.account-identity strong {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-identity small {
    display: block;
    font-size: .73rem;
    color: rgba(255, 255, 255, .7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-user .account-identity strong { color: var(--hd-ink); }
.mobile-nav-user .account-identity small { color: var(--hd-muted); }

.account-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .65rem .9rem;
    border: none;
    background: none;
    text-align: left;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
.account-link i { font-size: 1rem; color: var(--hd-muted); flex: none; }
.account-link:hover { background: var(--hd-tint); color: var(--hd-primary); }
.account-link:hover i { color: var(--hd-primary); }
.account-link.is-danger { color: var(--hd-danger); }
.account-link.is-danger i { color: var(--hd-danger); }
.account-link.is-danger:hover { background: #FEF2F2; color: var(--hd-danger); }
.account-link-badge {
    margin-left: auto;
    background: var(--hd-tint);
    color: var(--hd-primary);
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .4rem;
}
.account-divider { height: 1px; background: var(--hd-border); margin: .25rem 0; }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.mobile-nav { width: min(320px, 86vw); }
.mobile-nav .offcanvas-header { border-bottom: 1px solid var(--hd-border); }
.mobile-nav .offcanvas-body { display: flex; flex-direction: column; padding: 0; }

.mobile-nav-user {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    background: #F8FAFC;
    border-bottom: 1px solid var(--hd-border);
}

.mobile-nav-links { display: flex; flex-direction: column; padding: .5rem 0; }
.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-left: 3px solid transparent;
    min-height: 48px;
}
.mobile-nav-links a i { font-size: 1.05rem; color: var(--hd-muted); flex: none; }
.mobile-nav-links a:hover { background: #F8FAFC; }
.mobile-nav-links a.active {
    background: var(--hd-tint);
    color: var(--hd-primary);
    font-weight: 700;
    border-left-color: var(--hd-primary);
}
.mobile-nav-links a.active i { color: var(--hd-primary); }

.mobile-nav-section { border-top: 1px solid var(--hd-border); padding-top: .35rem; }
.mobile-nav-heading {
    display: block;
    padding: .6rem 1rem .1rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94A3B8;
}

.mobile-nav-footer {
    margin-top: auto;
    border-top: 1px solid var(--hd-border);
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #F8FAFC;
}
.mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 46px;
    padding: .6rem .9rem;
    border: 1px solid var(--hd-border);
    border-radius: 10px;
    background: #fff;
    font-size: .87rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
}
.mobile-nav-btn:hover { background: var(--hd-tint); color: var(--hd-primary); }
.mobile-nav-btn.is-primary {
    background: var(--hd-primary);
    border-color: var(--hd-primary);
    color: #fff;
}
.mobile-nav-btn.is-primary:hover { background: var(--hd-primary-deep); color: #fff; }
.mobile-nav-btn.is-danger { color: var(--hd-danger); border-color: #FECACA; }
.mobile-nav-btn.is-danger:hover { background: #FEF2F2; color: var(--hd-danger); }

/* --------------------------------------------------------------------------
   Account modal
   -------------------------------------------------------------------------- */
.account-modal { border: none; border-radius: 16px; overflow: hidden; }
.account-modal .modal-header {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-deep) 100%);
    color: #fff;
    border-bottom: none;
}
.account-modal .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.account-modal .modal-body { padding: 1.25rem; }
.account-modal .form-label { font-size: .8rem; font-weight: 600; color: #374151; }
.account-modal .form-control {
    border-radius: 10px;
    border-color: var(--hd-border);
    font-size: 16px; /* stops iOS Safari zooming on focus */
}
.account-modal .form-control:focus {
    border-color: var(--hd-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}
.account-modal .modal-footer { border-top: 1px solid var(--hd-border); }
.account-modal .btn-primary {
    background: var(--hd-primary);
    border-color: var(--hd-primary);
}
.account-modal .btn-primary:hover {
    background: var(--hd-primary-deep);
    border-color: var(--hd-primary-deep);
}

/* --------------------------------------------------------------------------
   >= 576px
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
    .header-actions { gap: .5rem; }
}

/* --------------------------------------------------------------------------
   >= 992px — desktop nav takes over, drawer retires
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .mobile-menu-toggle { display: none; }
    .search-mini-wrap { display: block; }
    .qu-navbar-inner { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .account-trigger,
    .account-link,
    .mobile-menu-toggle { transition: none !important; }
}

/* =========================================================
   Notification bell (customer header)
   ========================================================= */
.notif-menu {
    position: relative;
}

.notif-dropdown {
    width: min(360px, calc(100vw - 24px));
    padding: 0;
    border: 1px solid var(--qu-border-color, #E5E7EB);
    border-radius: var(--qu-radius, 20px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--qu-border-color, #E5E7EB);
    background: #F8FAFC;
}

.notif-head strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--qu-text-dark, #111827);
}

.notif-mark-all {
    font-size: 12px;
    font-weight: 700;
    color: var(--qu-primary, #1E3A8A);
    text-decoration: none;
}

.notif-mark-all:hover {
    text-decoration: underline;
}

.notif-list {
    max-height: 340px;
    overflow-y: auto;
}

.notif-list::-webkit-scrollbar {
    width: 4px;
}

.notif-list::-webkit-scrollbar-thumb {
    background: var(--qu-border-color, #E5E7EB);
    border-radius: 10px;
}

.notif-item {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid #F5F6F8;
    text-decoration: none;
    transition: background-color .15s ease;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: #F8FAFC;
}

.notif-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: #EEF2FF;
    color: var(--qu-primary, #1E3A8A);
}

.notif-item-icon.is-success { background: #DCFCE7; color: #059669; }
.notif-item-icon.is-danger  { background: #FEE2E2; color: #DC2626; }
.notif-item-icon.is-warning { background: #FEF3C7; color: #B45309; }

.notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--qu-text-dark, #111827);
}

.notif-item-msg {
    font-size: 12px;
    color: var(--qu-secondary, #4B5563);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-time {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: var(--qu-secondary, #4B5563);
    font-size: 13px;
}

.notif-empty i {
    font-size: 26px;
    color: #CBD5E1;
}

.notif-viewall {
    display: block;
    padding: 12px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qu-primary, #1E3A8A);
    text-decoration: none;
    border-top: 1px solid var(--qu-border-color, #E5E7EB);
    background: #F8FAFC;
}

.notif-viewall:hover {
    background: #F5F7FF;
    color: var(--qu-primary, #1E3A8A);
}