.sf-currency-switcher {
    --sf-currency-navy: var(--sf-navy, #162447);
    --sf-currency-border: var(--sf-border, #DDE3EC);
    --sf-currency-muted: var(--sf-muted, #64748B);
    box-sizing: border-box;
    display: inline-flex;
    position: relative;
    flex-direction: column;
    max-width: 100%;
    color: #1B2436;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
}

.sf-currency-switcher *,
.sf-currency-switcher *::before,
.sf-currency-switcher *::after {
    box-sizing: border-box;
}

.sf-currency-switcher [hidden] {
    display: none !important;
}

.sf-currency-switcher__flag {
    display: inline-flex;
    flex: 0 0 auto;
    width: 21px;
    height: 15px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.sf-currency-switcher__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Compact two-option toggle. */
.sf-currency-switcher--toggle {
    width: 152px;
}

.sf-currency-switcher__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    padding: 2px;
    border: 1px solid var(--sf-currency-border);
    border-radius: 7px;
    background: #F8FAFC;
    box-shadow: 0 2px 6px rgba(22, 36, 71, .04);
}

.sf-currency-switcher__option {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 31px;
    margin: 0;
    padding: 4px 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #344054;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    transition: opacity .14s ease, filter .14s ease;
}

.sf-currency-switcher__option strong {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}

.sf-currency-switcher__option:hover:not(:disabled) {
    border-color: transparent;
    background: transparent;
    color: #344054;
}

.sf-currency-switcher__option.is-active {
    border-color: #CBD5E1;
    background: #fff;
    color: var(--sf-currency-navy);
    box-shadow: 0 2px 6px rgba(22, 36, 71, .07);
}

/* Custom dropdown. */
.sf-currency-switcher--dropdown {
    width: 120px;
}

.sf-currency-switcher__dropdown {
    position: relative;
    width: 100%;
}

.sf-currency-switcher__trigger {
    appearance: none;
    display: grid;
    grid-template-columns: 21px 1fr 12px;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 33px;
    margin: 0;
    padding: 5px 7px;
    border: 1px solid var(--sf-currency-border);
    border-radius: 7px;
    background: #fff;
    color: var(--sf-currency-navy);
    box-shadow: 0 2px 5px rgba(22, 36, 71, .04);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: opacity .14s ease, filter .14s ease;
}

.sf-currency-switcher__trigger strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.sf-currency-switcher__chevron {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #98A2B3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: transform .16s ease;
}

.sf-currency-switcher__trigger[aria-expanded="true"] {
    border-color: #AEB8C6;
    box-shadow: 0 0 0 2px rgba(22, 36, 71, .06);
}

.sf-currency-switcher__trigger[aria-expanded="true"] .sf-currency-switcher__chevron {
    transform: rotate(180deg);
}

.sf-currency-switcher__menu {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    width: max-content;
    min-width: 244px;
    max-width: min(290px, calc(100vw - 16px));
    padding: 3px;
    border: 1px solid var(--sf-currency-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(22, 36, 71, .12);
}

.sf-currency-switcher.is-menu-right .sf-currency-switcher__menu {
    right: 0;
    left: auto;
}

.sf-currency-switcher.is-menu-up .sf-currency-switcher__menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.sf-currency-switcher__menu-option {
    appearance: none;
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) 6px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 33px;
    margin: 0;
    padding: 5px 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #1F2937;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.sf-currency-switcher__trigger:hover:not(:disabled) {
    border-color: var(--sf-currency-border);
    background: #fff;
    color: var(--sf-currency-navy);
    box-shadow: 0 2px 5px rgba(22, 36, 71, .04);
}

.sf-currency-switcher__trigger[aria-expanded="true"]:hover:not(:disabled) {
    border-color: #AEB8C6;
    box-shadow: 0 0 0 2px rgba(22, 36, 71, .06);
}

.sf-currency-switcher__menu-option:hover:not(:disabled) {
    background: transparent;
    color: #1F2937;
}

.sf-currency-switcher__menu-option:focus-visible {
    background: transparent;
    color: #1F2937;
    outline: 1px solid #CBD5E1;
    outline-offset: -1px;
}

.sf-currency-switcher__menu-option::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
    content: '';
}

.sf-currency-switcher__menu-option.is-active {
    background: #F6F7F9;
    color: var(--sf-currency-navy);
}

.sf-currency-switcher__menu-option.is-active::after {
    background: #667085;
}

.sf-currency-switcher__option:focus-visible,
.sf-currency-switcher__trigger:focus-visible {
    outline: 2px solid rgba(22, 36, 71, .14);
    outline-offset: 1px;
}

.sf-currency-switcher button:disabled {
    cursor: wait;
}

.sf-currency-switcher__status {
    position: absolute;
    z-index: 10000;
    inset: 0;
    display: none;
    place-items: center;
    padding: 4px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .7);
    color: #344054;
    font-size: 9px;
    font-weight: 700;
    pointer-events: none;
    text-align: center;
}

.sf-currency-switcher__status.is-visible {
    display: grid;
}

.sf-currency-switcher__status.is-error {
    color: #B42318;
}

.sf-currency-switcher[aria-busy="true"] > .sf-currency-switcher__options,
.sf-currency-switcher[aria-busy="true"] > .sf-currency-switcher__dropdown {
    opacity: .38;
    filter: blur(.7px);
}

.sf-exchange-rate-attribution {
    margin: 8px 0;
    color: #64748B;
    font: 400 10px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
}

.sf-exchange-rate-attribution a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 360px) {
    .sf-currency-switcher__menu {
        min-width: min(244px, calc(100vw - 16px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-currency-switcher__option,
    .sf-currency-switcher__trigger,
    .sf-currency-switcher__chevron {
        transition: none;
    }
}