/*
 * Header alignment fixes.
 *
 * Loaded after style_en.css / style_ar.css, which are hand-maintained and
 * nearly 200KB each. Keeping these few rules in one file means one copy for
 * both locales instead of two blocks that can drift apart, so everything here
 * uses logical properties and stays correct under [dir="rtl"].
 */

/*
 * The top bar is a flex row whose items are different heights: the phone
 * block and the two nice-select widgets are 40px, while the WhatsApp button
 * and the Login pill are 27px. The row had no align-items, so it defaulted to
 * stretch: the two short items' wrappers were pulled to 40px and the pill
 * inside each sat at the top of that box, 6.5px above the centre line
 * everything else shares.
 *
 * Desktop only -- below 768px the bar re-flows, the WhatsApp button becomes a
 * fixed floating control and the three remaining items are full-height thirds,
 * so there is nothing to centre and the rule would only risk changing it.
 */
@media (min-width: 768px) {
    .top-header .topbar-rightside {
        align-items: center;
    }

    /*
     * The wrappers no longer stretch, so their own height is whatever the
     * pill inside is. Give the two pills the same height as the controls
     * beside them: a 27px green box next to a 40px language control reads as
     * a mistake even when both are centred.
     */
    .top-header .header-whatsapp .whatsapp-btn,
    .top-header .login-area .language-btn {
        height: 32px;
    }

    /* The pill is now taller than its text, so centre the contents too. */
    .top-header .login-area .language-btn {
        align-items: center;
        display: flex;
    }
}

/*
 * The top bar paints every descendant white -- `.header-contact *` in
 * style_en.css / style_ar.css -- so the text reads on the blue bar. The
 * dropdown panel is appended inside that block, so its options inherited
 * white too and rendered white-on-white: only the selected row, which has a
 * blue background, was readable. The others were there the whole time, which
 * is why the panel looked like an empty box.
 *
 * `inherit` hands each option's label back to the option, so the widget's own
 * colours in nice-select.css apply again instead of being overridden.
 */
.header-contact .nice-select__panel,
.header-contact .nice-select__panel * {
    color: inherit;
}

.header-contact .nice-select__option {
    color: #626672;
}

.header-contact .nice-select__option.is-selected {
    color: #fff;
}

/* The closed control still sits on the blue bar, so it stays white. */
.header-contact .nice-select__button {
    color: #fff;
}