/* HostWega public currency chooser: responsive + always opens downward. */
.currency-selector-container,
.currency-selector-container .language__dropdown__select {
    position: relative;
}

/* Bootstrap/Popper must never flip the currency menu above its trigger. */
.currency-selector-container .dropdown-menu,
.currency-selector-container .dropdown-menu[x-placement^="top"],
.currency-selector-container .dropdown-menu[data-popper-placement^="top"] {
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.currency-selector-container .dropdown-menu.show {
    display: block;
}



/* Currency flags only: match the circular flag treatment used by the main site.
   Keep this scoped to the currency dropdown so language selector flags stay unchanged. */
.currency-selector-container .dropdown-menu .language__flag,
.currency-selector-container .dropdown-menu .currency__flag,
.currency-selector-container .dropdown-menu .currency-flag,
.currency-selector-container .dropdown-menu [class*="flag__wrapper"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex: 0 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    line-height: 1 !important;
}

.currency-selector-container .dropdown-menu img,
.currency-selector-container .dropdown-menu .language__flag img,
.currency-selector-container .dropdown-menu .currency__flag img,
.currency-selector-container .dropdown-menu .currency-flag img,
.currency-selector-container .dropdown-menu [class*="flag__wrapper"] img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Desktop: keep the original currency control in its existing navbar position. */
@media (min-width: 992px) {
    .currency-nav-item {
        display: flex !important;
    }
    .currency-mobile {
        display: none !important;
    }
}

/* Tablet/mobile: the original lives inside the collapsed navbar, so hide it and
   show the dedicated copy beside the hamburger button instead. */
@media (max-width: 991.98px) {
    .currency-nav-item {
        display: none !important;
    }

    #logoAndNav .header-nav > .currency-mobile {
        display: flex !important;
        align-items: center;
        position: relative;
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 8px;
        z-index: 1060;
    }

    html[dir="rtl"] #logoAndNav .header-nav > .currency-mobile {
        margin-left: 8px;
        margin-right: auto;
    }

    #logoAndNav .header-nav > .currency-mobile .currency-selector-container {
        display: flex;
        align-items: center;
    }

    #logoAndNav .header-nav > .currency-mobile .dropdown__toggle {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    #logoAndNav .header-nav > .currency-mobile .dropdown-menu {
        min-width: 150px;
        max-height: min(360px, 60vh);
        overflow-y: auto;
        overflow-x: hidden;
        left: auto !important;
        right: 0 !important;
    }

    html[dir="rtl"] #logoAndNav .header-nav > .currency-mobile .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }
}

/* Small phones: keep the list inside the viewport. */
@media (max-width: 575.98px) {
    #logoAndNav .header-nav > .currency-mobile {
        margin-right: 6px;
    }
    html[dir="rtl"] #logoAndNav .header-nav > .currency-mobile {
        margin-left: 6px;
        margin-right: auto;
    }
    #logoAndNav .header-nav > .currency-mobile .dropdown-menu {
        min-width: 140px;
        max-width: calc(100vw - 24px);
    }
}


/* Match WHMCS selected-currency vertical alignment in both LTR and RTL.
   Keep horizontal spacing, flag sizes and dropdown behaviour unchanged. */
.currency-selector-container .dropdown__toggle {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.currency-selector-container .dropdown__toggle .language__flag,
.currency-selector-container .dropdown__toggle .toggle__flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}

.currency-selector-container .dropdown__toggle .language__flag img,
.currency-selector-container .dropdown__toggle .toggle__flag img {
    display: block !important;
    position: relative;
    top: 0 !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.currency-selector-container .dropdown__toggle .currency__title__text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

/* RTL: mirror the exact LTR spacing between the selected currency flag and text. */
html[dir="rtl"] .currency-selector-container .dropdown__toggle .language__flag img,
html[dir="rtl"] .currency-selector-container .dropdown__toggle .toggle__flag img {
    margin-right: 0 !important;
    margin-left: 6px !important;
}