/*
 * YOBO-1074 — storefront header switcher chips (merchant + location).
 *
 * Base layout + dark-header colors for the "Browsing as" merchant switcher
 * (.yobo596-*) and the "Working at" location switcher (.yobo745-*). Moved here
 * out of the inline <style> that footer.php emitted — that block was gated on
 * merchant_accounts_count >= 1, so platform staff (0 rows) got the markup with
 * NO styling. A real stylesheet loaded on every storefront page (header.php)
 * styles the chips for everyone, on every theme. Per-theme color overrides
 * (e.g. indigo) layer on top via each theme's own style.css.
 *
 * The admin header renders the same .yobo596-* markup; its light-context colors
 * live in admin/admin.css. Shape is intentionally identical across both.
 */

/* YOBO-596 Merchant switcher — pill on desktop, circle on mobile */
.yobo596-switcher {
    position:relative;
    margin-left:15px;
    padding-left:15px;
    display:inline-flex;
    align-items:center;
}
.yobo596-switcher::before {
    content:""; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    height:20px; width:1px; background:#ccc;
}
.yobo596-switcher .yobo596-toggle {
    display:inline-flex; align-items:center; gap:8px;
    height:32px; padding:0 14px;
    background:transparent; border:1px solid #fff; border-radius:16px;
    color:#fff; cursor:pointer;
    font-family:inherit; font-size:13px; line-height:1;
    transition:background 0.15s, border-color 0.15s;
}
.yobo596-switcher .yobo596-toggle:hover {
    background:rgba(244,24,28,0.15); border-color:#f4181c;
}
.yobo596-switcher .yobo596-toggle .yobo596-icon { font-size:16px; }
.yobo596-switcher .yobo596-toggle .yobo596-current-text { white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.yobo596-switcher .yobo596-toggle .yobo596-current-text strong { font-weight:600; }
.yobo596-switcher .yobo596-toggle .yobo596-caret { font-size:14px; opacity:0.8; }
.yobo596-switcher .yobo596-menu[hidden] { display:none; }
.yobo596-switcher .yobo596-menu {
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:220px; max-width:280px;
    background:#1a1a1a; border:1px solid #333; border-radius:8px;
    padding:8px 0; margin:0; z-index:9000;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.yobo596-switcher .yobo596-menu-title {
    color:#f4181c; font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.5px; padding:4px 14px 8px; border-bottom:1px solid #333;
    margin-bottom:6px;
}
.yobo596-switcher .yobo596-menu ul { list-style:none; margin:0; padding:0; }
.yobo596-switcher .yobo596-menu .yobo596-pick {
    display:block; width:100%; text-align:left; padding:10px 14px;
    border:0; background:transparent; cursor:pointer;
    color:#fff; font-family:inherit; font-size:14px;
    transition:background 0.15s, color 0.15s;
}
.yobo596-switcher .yobo596-menu .yobo596-pick:hover {
    background:rgba(244,24,28,0.15); color:#f4181c;
}

/* Mobile: collapse pill to a circle icon matching other notification icons */
@media (max-width:768px) {
    .yobo596-switcher { margin-left:8px; padding-left:8px; }
    .yobo596-switcher .yobo596-toggle {
        width:32px; height:32px; padding:0;
        border-radius:50%; justify-content:center;
        gap:0;
    }
    .yobo596-switcher .yobo596-toggle .yobo596-current-text,
    .yobo596-switcher .yobo596-toggle .yobo596-caret { display:none; }
    .yobo596-switcher .yobo596-menu { right:0; }
    /* Tighten ALL header icon spacing on mobile so 6 icons (search/bell/cart/
       share/switcher/profile) fit on a 390px viewport without left-edge clip. */
    header .right-side .notifications-bar { margin-left:8px; padding-left:8px; }
}

/* YOBO-745 Location switcher — mirrors YOBO-596 styling for visual parity
   next to it in the header. Separate class namespace so the YOBO-596 JS
   doesn't pick up this element. */
.yobo745-location-switcher {
    position:relative;
    margin-left:15px;
    padding-left:15px;
    display:inline-flex;
    align-items:center;
}
.yobo745-location-switcher::before {
    content:""; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    height:20px; width:1px; background:#ccc;
}
.yobo745-location-switcher .yobo745-toggle {
    display:inline-flex; align-items:center; gap:8px;
    height:32px; padding:0 14px;
    background:transparent; border:1px solid #fff; border-radius:16px;
    color:#fff; cursor:pointer;
    font-family:inherit; font-size:13px; line-height:1;
    transition:background 0.15s, border-color 0.15s;
}
.yobo745-location-switcher .yobo745-toggle:hover {
    background:rgba(244,24,28,0.15); border-color:#f4181c;
}
.yobo745-location-switcher .yobo745-toggle .yobo745-icon { font-size:16px; }
.yobo745-location-switcher .yobo745-toggle .yobo745-current-text { white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.yobo745-location-switcher .yobo745-toggle .yobo745-current-text strong { font-weight:600; }
.yobo745-location-switcher .yobo745-toggle .yobo745-caret { font-size:14px; opacity:0.8; }
.yobo745-location-switcher .yobo745-menu[hidden] { display:none; }
.yobo745-location-switcher .yobo745-menu {
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:220px; max-width:280px;
    background:#1a1a1a; border:1px solid #333; border-radius:8px;
    padding:8px 0; margin:0; z-index:9000;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.yobo745-location-switcher .yobo745-menu-title {
    color:#f4181c; font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.5px; padding:4px 14px 8px; border-bottom:1px solid #333;
    margin-bottom:6px;
}
.yobo745-location-switcher .yobo745-menu ul { list-style:none; margin:0; padding:0; }
.yobo745-location-switcher .yobo745-menu .yobo745-pick {
    display:block; width:100%; text-align:left; padding:10px 14px;
    border:0; background:transparent; cursor:pointer;
    color:#fff; font-family:inherit; font-size:14px; text-decoration:none;
    transition:background 0.15s, color 0.15s;
}
.yobo745-location-switcher .yobo745-menu .yobo745-pick:hover {
    background:rgba(244,24,28,0.15); color:#f4181c;
}

@media (max-width:768px) {
    .yobo745-location-switcher { margin-left:8px; padding-left:8px; }
    .yobo745-location-switcher .yobo745-toggle {
        width:32px; height:32px; padding:0;
        border-radius:50%; justify-content:center;
        gap:0;
    }
    .yobo745-location-switcher .yobo745-toggle .yobo745-current-text,
    .yobo745-location-switcher .yobo745-toggle .yobo745-caret { display:none; }
    .yobo745-location-switcher .yobo745-menu { right:0; }
}