/*
 * 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;
}

/*
 * Tablet widths, roughly 768-991px.
 *
 * The bar is a two-column grid locked to `repeat(2, minmax(0, 1fr))`, so the
 * contact side gets exactly half the width no matter what is in it. Signed in
 * that side holds a phone number, WhatsApp, language, currency, Account and
 * Log Out -- about 465px of content, plus the menu trigger -- squeezed into
 * ~405px. Nothing could shrink, so every item broke internally instead: the
 * phone number dropped under its icon, "Account" fell below its pill and
 * "Log Out" split over two lines, pushing the bar from 51px to 83px tall.
 *
 * Two changes fix it: let the contact side take the width it needs, and give
 * it that width by dropping the social icons, which are the least useful thing
 * in the bar and appear again in the footer.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    /*
     * One column, not two: hiding the social icons removes them as a grid
     * item, so a two-column track would hand the contact block the first
     * column and leave an empty one beside it.
     */
    .top-header .top-header-inner {
        grid-template-columns: 1fr;
    }

    .top-header .header-social {
        display: none;
    }

    /*
     * The menu trigger and the contact group are the two children here. Push
     * them apart: the trigger belongs on the leading edge, where it is in the
     * mobile layout, and everything else sits on the trailing edge. Packing
     * them together left a wide gap on one side and crowded the other.
     */
    .top-header .header-contact {
        justify-content: space-between;
    }

}

/*
 * The bar's container is `.container p-0`, so it has no gutter at all. Below
 * the container's max-width that leaves the outermost control flush against
 * the window edge -- clipped once the group is pushed to the trailing edge,
 * and misaligned with the logo row underneath at every width in between.
 *
 * 15px matches the gutter that row already uses, so the two line up. Padding
 * the inner row rather than the container avoids fighting Bootstrap's
 * `p-0 { padding: 0 !important }`.
 */
@media (min-width: 768px) {
    .top-header .top-header-inner {
        padding-inline: 15px;
    }
}

/*
 * Labels in the bar are single words or a phone number; none of them should
 * ever wrap. Without this they break inside their own pill at any width where
 * the row runs short, which reads as a broken control rather than a tight fit.
 */
@media (min-width: 768px) {
    .header-contact-no,
    .header-contact .language-btn p {
        white-space: nowrap;
    }

    /*
     * .top-header prefix so these beat the more specific rules in
     * style_en.css; `.header-phone` alone loses and the number keeps dropping
     * under its icon.
     */
    .top-header .header-phone,
    .top-header .header-contact .language-btn {
        flex-wrap: nowrap;
    }

    /* The icon is a fixed badge; only the label should ever give ground. */
    .header-contact .language-btn i,
    .header-phone > i {
        flex: 0 0 auto;
    }
}

/*
 * From 992px the social icons come back, so the bar is a two-column grid
 * again -- but style_en.css locks those tracks to `repeat(2, minmax(0, 1fr))`,
 * a hard half each. The social side needs ~135px and the contact side ~545px
 * signed in, so at 992 the contact side got 476px for 543px of content: it
 * overflowed its own cell and the phone number wrapped under its icon, while
 * half the bar sat empty.
 *
 * Size the tracks to what is in them instead -- the icons take what they
 * need, the contact group takes the rest.
 */
@media (min-width: 992px) {
    .top-header .top-header-inner {
        grid-template-columns: auto 1fr;
    }
}

/*
 * The sticky header turns the menu label dark:
 *
 *   @media screen and (max-width: 991px) {
 *       .fixed-header .mobile-menu-container .slicknav_menu .slicknav_menutxt
 *           { color: #212121; }
 *   }
 *
 * That dates from a fixed header with a light background. The bar is cyan in
 * both states now, so the word turns near-black on scroll while its own
 * hamburger bars stay white -- the label and its icon disagree, and it no
 * longer matches anything else in the bar.
 *
 * Scoped to the same width as the rule it reverses, since that is where the
 * slicknav trigger exists at all.
 */
@media (max-width: 991.98px) {
    .site-header.fixed-header .mobile-menu-container .slicknav_menu .slicknav_menutxt {
        color: #fff;
    }
}