/**
 * The site header's shared furniture.
 *
 * custom.css does not reach the product page — that page inlines
 * product-page.css instead — so rules the header needs everywhere cannot live
 * there. This file is enqueued on every page, after both.
 *
 * @package BuddyBoss Theme Child (Adorno)
 */
/* ------------------------------------------------------ header: the counters
 *
 * The wishlist and cart badges are drawn by two different plugins and had
 * drifted apart: 10px regular in a 50% circle against 9px semibold in a
 * padded pill, and four pixels of difference in where they sat. They are the
 * same thing, so they are now the same badge at the same height.
 */
.site-header .header-wishlist .wishlist_products_counter_number,
.site-header .header-cart-link .count {
    position: absolute;
    /* The two icons themselves sit a pixel apart, so the cart's badge is
       nudged back by that pixel below. */
    top: -7px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 17px;
    min-width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

/* ----------------------------------------------------- header: the currency
 *
 * The code sits in a 48px input with the chevron floated into whatever was
 * left, which put a gap between them and left the two on different baselines.
 * The pair is one control, so it is laid out as one: a flex row, centred, with
 * the input only as wide as the three letters it holds.
 */
/* The dropdown is absolutely positioned over the control, anchored left — with
   the input shrunk to the width of the code, that put the chevron on top of the
   letters. Anchored right instead, it lands just after them. */
/* The row's 5px gap is not enough once the cart's badge is allowed to hang
   past its icon: the "4" and the "E" were touching. */
.site-header .currency-selector {
    margin-left: 10px;
}

/* country_select.css is a linked stylesheet and loads after this one, so its
   own left:0 wins on equal specificity — hence !important here. */
.site-header .currency-selector .country-select {
    width: 52px !important;
}

.site-header .currency-selector .flag-dropdown {
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    padding: 0 !important;
}

.site-header .currency-selector .flag-dropdown,
.site-header .currency-selector .selected-flag {
    display: flex !important;
    align-items: center;
}

.site-header .currency-selector .selected-flag {
    width: auto !important;
    padding-left: 0 !important;
}

.site-header .currency-selector .country-select input[type="text"] {
    width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    line-height: 1;
}

.site-header .currency-selector .selected-flag .arrow {
    position: static !important;
    float: none !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.site-header .currency-selector .selected-flag .arrow::before {
    width: auto;
    /* A hair of air, so the chevron reads as a separate mark and not as a
       fourth letter. */
    margin: 0 0 0 3px;
    font-size: 18px;
    line-height: 1;
}

.site-header .header-cart-link .count {
    top: -6px;
}