/*
 * Printo_Currency - grouped, scrollable currency switcher.
 *
 * Specificity note: header.css loads AFTER this file and styles
 * `.header-switchers .header-button ul` (0,2,1). Every rule that has to beat it
 * therefore leads with `.header-switchers .pc-switcher ul.pc-list` (0,3,1), and
 * repeats a plainer selector for the footer and mobile switchers.
 *
 * Positioning (absolute, top, right, background, shadow, show/hide) is left
 * entirely to header.css and front.js - this file must never set `position` on
 * the list itself, or the dropdown drops into normal flow and pushes the page.
 */

/* --- panel box ------------------------------------------------------- */
.header-switchers .pc-switcher ul.pc-list,
.pc-switcher ul.pc-list {
    width: 320px;
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

/*
 * header.css sets `.header-switchers .header-button ul li { display: block }`,
 * which outranks the user-agent `[hidden] { display: none }` - without this the
 * empty "Recommended currency" row and the no-results message stay on screen.
 */
.pc-switcher [hidden] {
    display: none !important;
}

/* --- search row, pinned while the list scrolls under it -------------- */
.header-switchers .pc-switcher ul.pc-list li.pc-tool,
.pc-switcher ul.pc-list li.pc-tool {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    background: #fff;
    border-bottom: 1px solid #dfdfdf;
}

.pc-switcher input.pc-filter {
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 18px;
    color: #333;
    text-transform: none;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    background: #fff;
    outline: none;
}

.pc-switcher input.pc-filter:focus {
    border-color: #00bbd3;
}

.pc-switcher .pc-empty {
    padding: 10px 2px 2px;
    font-size: 12px;
    color: #888;
    text-transform: none;
}

/* --- group headings -------------------------------------------------- */
.header-switchers .pc-switcher ul.pc-list li.pc-head,
.pc-switcher ul.pc-list li.pc-head {
    padding: 9px 15px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa1a9;
    border-bottom: 0;
    cursor: default;
}

/* --- rows: code in a fixed column, name beside it -------------------- */
.header-switchers .pc-switcher ul.pc-list li.pc-item a,
.pc-switcher ul.pc-list li.pc-item a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 15px;
    font-size: 12px;
    line-height: 17px;
    color: #333;
    text-transform: none;
}

.pc-switcher .pc-code {
    flex: 0 0 34px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #555;
    text-transform: none;
}

.pc-switcher .pc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.header-switchers .pc-switcher ul.pc-list li.pc-item a.selected .pc-code,
.header-switchers .pc-switcher ul.pc-list li.pc-item a.selected .pc-name,
.pc-switcher ul.pc-list li.pc-item a.selected .pc-code,
.pc-switcher ul.pc-list li.pc-item a.selected .pc-name {
    color: #4bae4f;
}

.header-switchers .pc-switcher ul.pc-list li.pc-item-default a,
.pc-switcher ul.pc-list li.pc-item-default a {
    font-weight: 600;
}

/* Rows filtered out by the search box. */
.header-switchers .pc-switcher ul.pc-list li.pc-hidden,
.pc-switcher ul.pc-list li.pc-hidden {
    display: none;
}

@media screen and (max-width: 767px) {
    .header-switchers .pc-switcher ul.pc-list,
    .pc-switcher ul.pc-list {
        width: 280px;
        max-height: 55vh;
    }
}