/*
 * Header v2 — classes that replace inline styles in
 * resources/views/frontend/layout/header-v2.blade.php.
 * Colors use theme tokens so light and dark mode stay in sync.
 */
:root {
    --amz-badge-bg: #b42318; /* white text on this red is about 6.6:1 */
}

.amz-nav-pointer { cursor: pointer; }
.amz-notif-link { position: relative; }
.amz-notif-icon { font-size: 20px; color: var(--theme-text-muted); }
.amz-cart-icon { font-size: 30px; }
.amz-cart-label { margin-bottom: -5px; }
.amz-count-pill {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--amz-badge-bg);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
}
.amz-count-pill-xs { font-size: 10px; }
.amz-count-pill-sm { font-size: 11px; }
.amz-bottom-nav-badge {
    background: var(--amz-badge-bg);
    color: #fff;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
    position: absolute;
    top: -2px;
    right: -4px;
}
.doshop-trigger-chevron { font-size: .65rem; transition: transform .18s ease; }
.doshop-view-all-arrow { font-size: .65rem; }
.amz-mobile-account-link--pos {
    font-weight: 700;
    color: var(--theme-accent);
    background: rgba(63, 90, 169, .08);
    border-radius: 8px;
    margin-bottom: 8px;
}
.amz-mobile-account-divider--tight { margin-top: 8px; }

/*
 * Theme toggle label: both states are server-rendered and CSS picks the
 * right one via [data-theme] (set pre-paint by the <head> theme script),
 * so the button never flashes the old "Settings" placeholder while the
 * deferred theme-toggle.js is still loading. The label names the *target*
 * mode, matching what the JS sets afterwards.
 */
[data-theme-label] .tt-light { display: none; }
[data-theme="dark"] [data-theme-label] .tt-dark { display: none; }
[data-theme="dark"] [data-theme-label] .tt-light { display: inline; }