/* Bobbedoes icons: opt-in SVG styling; phase 2 connects account menus and item sidebars. */
.bd-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -0.125em;
    flex-shrink: 0;
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bd-icon.bd-icon--16 { width: 16px; height: 16px; }
.bd-icon.bd-icon--18 { width: 18px; height: 18px; }
.bd-icon.bd-icon--20 { width: 20px; height: 20px; }
.bd-icon.bd-icon--24 { width: 24px; height: 24px; }
.bd-icon.bd-icon--28 { width: 28px; height: 28px; }

/* Phase 2: only the account menus and item sidebars use these alignments. */
.bd-account-dropdown-list .bd-account-menu-icon,
.bd-mobile-menu-list .bd-mobile-menu-icon {
    width: 18px;
    flex-basis: 18px;
    height: 18px;
    color: inherit;
}
.bd-account-dropdown-list a > .bd-icon,
.bd-mobile-menu-list a > .bd-icon,
.bd-account-dropdown-footer a > .bd-icon {
    margin-right: 8px;
}
.my-lots-sidebar-nav a > .bd-icon,
.my-lots-mobile-nav-links a > .bd-icon,
.items-auction-nav-main > .bd-icon {
    align-self: center;
}

/* Phase 3: existing homepage/nav containers retain padding, height and colors. */
.bd-home-hero-stat-icon > .bd-icon,
.author-area__seller-btn > .bd-icon,
.bd-mobile-action > .bd-icon,
.bd-desktop-cart .bd-icon,
.bd-auction-search-button > .bd-icon {
    vertical-align: middle;
}
.author-area__seller-btn > .bd-icon { margin-right: 6px; }
/* Preserve the explicit white icon color on existing colored navigation tiles. */
.bd-mobile-action > .bd-icon,
.bd-desktop-cart .bd-icon {
    color: #fff;
}

/* Phase 4A: action glyphs only; parent controls retain their dimensions/colors. */
.my-lots-menu-item > .bd-icon,
.my-lots-icon-button > .bd-icon,
.my-lots-offer-button > .bd-icon,
.stock-bulk-button > .bd-icon,
.unsold-delete-button > .bd-icon,
.my-auction-primary-action > .bd-icon,
.my-auction-primary-action-manage > .bd-icon,
.bd-view-live-button > .bd-icon,
.bd-admin-edit-button > .bd-icon {
    vertical-align: middle;
}
.my-lots-workspace .my-lots-dots > .bd-icon,
.shopitems-bulk-icon > .bd-icon {
    vertical-align: middle;
    color: inherit;
}

/* Phase 4B: statically rendered buyer-list controls and cart information only. */
.bd-list-page .bd-list-search-button > .bd-icon,
.bd-list-page .bd-list-clear-search > .bd-icon,
.bd-list-page .bd-empty-state__icon > .bd-icon,
.cart-wrapper .bd-icon,
.sellerincart a > .bd-icon {
    vertical-align: middle;
}

/* Phase 6B: retain the existing status circles, colors and control geometry. */
.bd-status-badge .bd-status-icon > .bd-icon { width: 11px; height: 11px; }
.bd-status-badge.bd-status--deleted .bd-status-icon > .bd-icon,
.bd-status-badge.bd-status--rejected .bd-status-icon > .bd-icon,
.bd-status-badge.bd-status--attention .bd-status-icon > .bd-icon { width: 9px; height: 9px; }
.my-lots-preview-button > .bd-icon { vertical-align: middle; }

/* Phase 6C: visual hosts only; preserve existing follow/highlight control states. */
.follow-heart-svg > .bd-icon { width: 24px; height: 24px; display: block; color: inherit; }
.follow-heart-empty > .bd-icon { color: #555; }
.follow-heart-filled > .bd-icon { color: #000; }
.bd-seller-follow-glyph { display: inline-block; width: 16px; margin: 0 5px; vertical-align: middle; }
.bd-seller-follow-glyph > .bd-icon, .bd-highlight-glyph > .bd-icon, .my-auction-highlight-star > .bd-icon { vertical-align: middle; }
.bd-highlight-legacy-active { background: #fcff43; color: inherit; }

/* Phase 7A: only migrated static navigation/footer/catalog/collection glyphs. */
.author__avatar .bd-icon, .bd-desktop-login-icon .bd-icon,
.bd-mobile-menu-close .bd-icon, .info-contact .info-icon > .bd-icon,
.sticky-footer-nav .bd-icon, .dashboard_menu .show-add > .bd-icon,
.advantage-icon .bd-icon { vertical-align: middle; }
.dashboard_menu .show-add > .bd-icon { margin-right: 4px; }

/* Catalog glyph hosts retain legacy layout hooks, without a second font glyph. */
.bd-catalog-icon-host::before { content: none; }
.bd-catalog-icon-host > .bd-icon { vertical-align: middle; }
.catalog-active-filter .bd-catalog-icon-host > .bd-icon { width: 12px; height: 12px; }

/* Disclosure presentation follows existing state; it never opens/closes a menu. */
.bd-disclosure-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    vertical-align: middle;
}
.bd-disclosure-glyph > .bd-icon { width: 12px; height: 12px; }
.items-auction-nav-toggle[aria-expanded="true"] > .bd-disclosure-glyph > .bd-icon,
#btnLoadSearchFilters[aria-expanded="true"] > .bd-disclosure-glyph > .bd-icon,
.my-lots-mobile-nav[open] > summary > .bd-disclosure-glyph > .bd-icon,
.dropdownsimple:hover > .dropbtnsimple > .bd-disclosure-glyph > .bd-icon {
    transform: rotate(180deg);
}

/* List follow glyphs preserve the old 30px control, states and hover behavior. */
.bd-list-follow-glyph.noti_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #eff1f5;
    color: #988D8D;
    transition: background-color .15s, color .15s, border-color .15s;
    pointer-events: none;
}
.bd-list-follow-glyph.loved { background: #000; color: #fff; }
.bd-list-follow-glyph > .bd-icon { width: 18px; height: 18px; }
.btn.btn-follow:hover .bd-list-follow-glyph,
.btn.btn-follow:focus-visible .bd-list-follow-glyph {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Phase 8C: keep existing static icon hosts/hooks; suppress only their font glyph. */
.bd-static-icon-host.lnr::before,
.bd-static-icon-host.bi::before,
.bd-static-icon-host.fa::before { content: none; }
.bd-static-icon-host { display: inline-block; vertical-align: middle; }
.bd-static-icon-host > .bd-icon { display: block; width: 1em; height: 1em; }
.bd-icon.bd-static-chevron-up { transform: rotate(180deg); }
