/* *****************************************************

    ** Nexus RTL **

    Persian font and RTL fixes that the generated
    bidirectional stylesheets can't handle on their own.
    Everything here is scoped to [dir="rtl"], so LTR
    languages are left untouched.

***************************************************** */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2 supports variations"),
         url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
         url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    /* Persian text in a fallback font looks very different, so wait for Vazirmatn (it is
       preloaded by includes/head.tpl and usually cached) instead of flashing the fallback. */
    font-display: block;
}

:root {
    --rtl-font-family: "Vazirmatn", "Open Sans", Tahoma, sans-serif;
}

/* Font */
[dir="rtl"] body,
[dir="rtl"] .tooltip,
[dir="rtl"] .popover,
[dir="rtl"] .popover-user-notifications,
[dir="rtl"] .admin-masquerade-notice,
[dir="rtl"] .landing-page,
[dir="rtl"] .landing-page h1,
[dir="rtl"] .landing-page h2,
[dir="rtl"] .landing-page h3,
[dir="rtl"] .landing-page h4,
[dir="rtl"] .landing-page h5,
[dir="rtl"] .landing-page h6,
[dir="rtl"] .landing-page p,
[dir="rtl"] .landing-page .testimonial {
    font-family: var(--rtl-font-family);
}

[dir="rtl"] body {
    letter-spacing: 0;
}

/* Directional icons point the other way */
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-circle-right,
[dir="rtl"] .fa-chevron-circle-left,
[dir="rtl"] .fa-chevron-double-right,
[dir="rtl"] .fa-chevron-double-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-angle-double-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-circle-right,
[dir="rtl"] .fa-arrow-circle-left,
[dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-sign-in,
[dir="rtl"] .fa-sign-in-alt,
[dir="rtl"] .fa-sign-out,
[dir="rtl"] .fa-sign-out-alt,
[dir="rtl"] .fa-reply,
[dir="rtl"] .fa-share,
[dir="rtl"] .fa-external-link,
[dir="rtl"] .fa-external-link-alt {
    transform: scaleX(-1);
}

/* Content that is always left-to-right */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[name="domain"],
[dir="rtl"] input[name="sld"],
[dir="rtl"] input[name^="ns"],
[dir="rtl"] input[name="ipaddress"],
[dir="rtl"] .ltr {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] input[type="email"]:placeholder-shown,
[dir="rtl"] input[type="url"]:placeholder-shown,
[dir="rtl"] input[name="domain"]:placeholder-shown,
[dir="rtl"] input[name="sld"]:placeholder-shown {
    direction: rtl;
}

[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] pre {
    text-align: left;
}

/* Switches (bootstrap-switch) stay left-to-right; the build leaves their rules unflipped.
   Vazirmatn gives the label a fractional width, so keep the handles on one line. */
.bootstrap-switch .bootstrap-switch-container {
    white-space: nowrap;
}

/* Mobile and tablet header: menu button on the right, logo centred, cart on the left,
   and a padded menu list instead of items stuck to the screen edge. */
@media (max-width: 1199.98px) {
    [dir="rtl"] header.header .navbar-light > .container {
        flex-wrap: nowrap;
    }

    [dir="rtl"] header.header .navbar-light .navbar-brand {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 0.5rem;
        text-align: center;
    }

    [dir="rtl"] header.header .navbar-light .navbar-brand .logo-img {
        max-width: 100%;
    }

    [dir="rtl"] header.header .navbar-light .toolbar {
        display: contents;
    }

    [dir="rtl"] header.header .navbar-light .toolbar > .nav-item {
        order: 3;
        margin: 0;
    }

    [dir="rtl"] header.header .navbar-light .toolbar > .nav-item.d-xl-none {
        order: 1;
    }

    /* The menu row only holds the collapsed menu here, so drop its 70px minimum height */
    [dir="rtl"] header.header .main-navbar-wrapper {
        min-height: 0;
    }

    [dir="rtl"] header.header .main-navbar-wrapper > .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    [dir="rtl"] header.header #mainNavbar .navbar-nav {
        gap: 0;
        margin: 0;
    }

    [dir="rtl"] header.header #mainNavbar .navbar-nav > li > a {
        display: block;
        padding: 0.75rem 0.25rem;
    }

    [dir="rtl"] header.header #mainNavbar .navbar-nav > li + li,
    [dir="rtl"] header.header #mainNavbar .navbar-nav + .navbar-nav > li:first-child {
        border-top: 1px solid var(--border-muted);
    }

    /* Order form pages: Nexus removes the cart body padding, which only works beside the
       desktop sidebar; on smaller screens keep the same gutter as the rest of the site. */
    [dir="rtl"] body #order-standard_cart .cart-body {
        display: flex;
        flex-direction: column;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    [dir="rtl"] #order-standard_cart .cart-body > * {
        min-width: 0;
    }

    /* Categories and actions boxes go after the page content instead of above it */
    [dir="rtl"] #order-standard_cart .cart-body > .sidebar-collapsed {
        order: 1;
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    [dir="rtl"] #order-standard_cart .header-lined h1,
    [dir="rtl"] #order-standard_cart .header-lined .font-size-36 {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    /* The domain search button sits under the search box here, not beside it */
    [dir="rtl"] body #order-standard_cart .domain-selection-options .btn {
        margin-right: 0;
    }
}

/* Checkout account selection (standard_cart): keep the address beside the radio and
   isolate the Latin name and currency badge so they keep RTL order. */
[dir="rtl"] #order-standard_cart .account-select-container label.radio-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
}

[dir="rtl"] #order-standard_cart .account-select-container label.radio-inline > .iradio_square-blue {
    flex-shrink: 0;
    margin: 0;
}

[dir="rtl"] #order-standard_cart .account-select-container .address strong,
[dir="rtl"] #order-standard_cart .account-select-container .address .label {
    unicode-bidi: isolate;
}

/* Phone numbers are typed left-to-right */
[dir="rtl"] .iti input,
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}