/*
 * The currency switch beside the language link in the top header (partials/currency-switch.blade.php). A page loads this
 * file only while the switch is drawn, after the site's own styles, so what it says here wins.
 */

/* the open menu must show over the logo row and the menu bar under this header (all three sit at the same level, 998, and the
   later ones would cover it) */
.top-header {
    z-index: 999;
}

/* the button reads like the language link beside it */
.top-header .top-link .currency-switch > a {
    white-space: nowrap;
}

.top-header .top-link .currency-switch > a .caret {
    margin: 0 2px;
}

/* the menu: the rules of the top links (floated items, a bar between them, ten pixel text) must not reach into it */
.top-header .top-link .currency-switch .dropdown-menu {
    min-width: 200px;
    margin: 0;
    padding: 4px 0;
    line-height: 1.4;
}

.top-header .top-link .currency-switch .dropdown-menu li {
    float: none;
    text-align: start;
}

.top-header .top-link .currency-switch .dropdown-menu li:after {
    display: none;
}

.top-header .top-link .currency-switch .dropdown-menu li a {
    padding: 8px 14px;
    border: 0;
    font-size: 13px;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
}

.top-header .top-link .currency-switch .dropdown-menu .active a {
    background: #e6e6e6;
    color: #232323;
}

.top-header .top-link .currency-switch .currency-symbol {
    display: inline-block;
    min-width: 3.5em;
    font-weight: 700;
}

/* a phone: two centred rows, the language and the currency on top, the login and register links below (the site's own phone
   rules leave the row wider than the screen on the Arabic side, so a row that is not centred is cut off there) */
@media all and (max-width: 767px) {
    .top-header .container .col-xs-3,
    .top-header .container .col-xs-9 {
        width: 100%;
    }

    /* the menu opens right under its own row, centred on the screen (the Arabic side's row is wider than the screen, so edges
       taken from the row would not be the screen's); the site's phone rule that hides what overflows the list would cut it off */
    .top-header .container .col-xs-3 {
        position: relative;
    }

    .top-header .top-link {
        float: none;
        padding: 0;
        overflow: visible;
        text-align: center;
    }

    .top-header .top-link > li {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    .top-header .top-link .currency-switch {
        position: static;
    }

    .top-header .top-link .currency-switch .dropdown-menu {
        left: 50%;
        right: auto;
        width: calc(100vw - 30px);
        max-width: 420px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    /* the menu has a fixed width here, so a long name wraps instead of running out of it */
    .top-header .top-link .currency-switch .dropdown-menu li a {
        white-space: normal;
    }
}