/* ── Base ── */

:root {
    --anbarak-max-app-width: 1920px;
}

body.full-page,
.anbarak-app {
    color: #1f1f1f;
    line-height: 1.5em;
    cursor: default;
    background: #fff;
    font-size: 1rem;
    font-family: Estedad;

    :where(.dark) & {
        color: #e5e5e5;
        background: #0d0d0d;
    }
}

body.full-page h1,
body.full-page h2,
body.full-page h3,
body.full-page h4,
body.full-page h5,
body.full-page h6,
.anbarak-app h1,
.anbarak-app h2,
.anbarak-app h3,
.anbarak-app h4,
.anbarak-app h5,
.anbarak-app h6 {
    font-family: Estedad;
}

body:not(.full-page) {
    .anbarak-input {
        input {
            background: transparent;
            padding: 0;
        }
    }

    input,
    a {
        border: none !important;
        box-shadow: none !important;
    }
}

.anbarak-app h1 {
    font-size: 32px;
    line-height: 2em;
}

.anbarak-app h2 {
    font-size: 22px;
    line-height: 1.5em;
}

.anbarak-app h3 {
    font-size: 18px;
}

.anbarak-app p {
    font-size: 1rem;
    line-height: 1.9em;
    word-wrap: anywhere;
}

.anbarak-app a {
    text-decoration: none;
    color: #1f1b13;

    &:active,
    &:focus,
    &:hover {
        @apply text-primary;
        text-decoration: none;
    }

    :where(.dark) & {
        color: #d4d4d4;
    }
}

.anbarak-app kbd {
    line-height: 1em;
    background: #e6e6e6;
    color: #333;
    border-radius: 4px;
    padding: 0.3rem;

    :where(.dark) & {
        background: #262626;
        color: #e5e5e5;
    }
}

[class*=" icon-"]::before,
[class^="icon-"]::before {
    font-family: icomoon !important;
}

.icon {
    vertical-align: middle;

    &.space {
        margin-inline-start: 0.3rem;
    }
}

.ltr {
    direction: ltr;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

body.full-page .notice,
.anbarak-app .notice {
    display: none;
}

/* ── Layout ── */

body.full-page #wpfooter,
body.full-page #wpadminbar,
body.full-page #adminmenumain {
    display: none;
}

body.full-page #wpcontent {
    margin: 0;
    padding: 0;
    background-color: #ddd;

    :where(.dark) & {
        background-color: #0d0d0d;
    }
}

body.full-page #wpbody-content {
    padding: 0;

    >.notice {
        display: none;
    }
}

body.full-page .wrap {
    margin: 0;
}

/* ── Non-full mode layout ── */

body:not(.full-page) .anbarak-app .app-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    :where(.dark) & {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
}

body:not(.full-page) .anbarak-app .app-content {
    min-height: auto;
}

body:not(.full-page) .anbarak-app .main-content-container {
    padding-top: 1rem;
}

body:not(.full-page) .anbarak-app aside {
    position: sticky;
    top: 3rem;
    margin-inline-start: .5rem;
    margin-inline-end: 0;
    margin-top: 1rem;
}

body:not(.full-page) .anbarak-app aside .menu {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
    width: 100%;
    gap: 0.5rem;

    @media (min-width: theme("screens.xl")) {
        width: 70px;
        flex-direction: column;
        position: sticky;
        top: 0;
    }
}

body:not(.full-page) .anbarak-app aside .menu .menu__item {
    margin: 0;

    @media (min-width: theme("screens.xl")) {
        margin: 0.3rem auto;
    }
}

.app-header {
    max-width: var(--anbarak-max-app-width);
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 0.875em;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 999999;
    background: #fff;
    white-space: nowrap;
    margin: 0 auto;

    .container {
        display: flex;
        align-items: center;
    }

    :where(.dark) & {
        background: #141414;
        border-bottom-color: rgba(255, 255, 255, 0.08);
        color: #e5e5e5;
    }
}

.app-content {
    display: flex;
    min-height: calc(100vh - 51px);
    background: rgb(251, 254, 255);

    :where(.dark) & {
        background: #0d0d0d;
    }

    @media only screen and (max-width: 768px) {
        flex-direction: column;
    }
}

.main-content-container {
    flex: 1;
    padding: 65px 0.5rem 2rem 0.5rem;
    width: 100%;
    min-height: 100vh;

    @media (min-width: theme("screens.xl")) {
        padding: 70px 1rem 2rem 1rem;
        width: calc(100% - 100px);
    }

    header h1 {
        font-size: 1.2em;
        margin: 0 0 1rem 1rem;
        line-height: 1em;

        @media (min-width: theme("screens.xl")) {
            font-size: 2em;
        }
    }

    header .notice {
        display: none;
    }
}

.container {
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
    width: 100%;
}

/* ── Sidebar ── */

aside {
    @apply sticky self-start flex flex-col shadow w-full;
    top: 50px;
    z-index: 99;

    @media (min-width: theme("screens.xl")) {
        width: 70px;
        margin-right: 1em;
        top: 3.7rem;
        @apply shadow-none;
    }

    .menu {
        background: #fff;
        padding: 0.5rem 0;
        border-radius: 0;
        min-width: 60px;
        text-align: center;
        inset-inline-start: 0;
        bottom: 0;
        top: 50px;
        position: fixed;
        width: 200px;
        box-shadow: 0 0 10px #ddd;
        transform: translateX(101%);
        opacity: 0;
        transition: 300ms;

        &.is-open {
            transform: translateX(0%);
            opacity: 1;
        }

        @media (min-width: theme("screens.xl")) {
            width: 70px;
            inset-inline-start: 1rem;
            @apply shadow-none rounded-2xl flex-col border border-gray-200 dark:border-[#2a2a2a];
            top: 70px;
            bottom: auto;
            transform: translateX(0%);
            opacity: 1;
        }

        :where(.dark) & {
            background: #141414;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .menu__item {
            @apply relative text-sm lg:text-base text-right justify-start flex flex-row p-3 gap-x-3 rounded-2xl lg:text-center justify-center;
            align-items: center;
            text-decoration: none;
            margin: 0.5rem 1rem;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: 700ms;

            @media (min-width: theme("screens.xl")) {
                @apply justify-center;
                width: 50px;
                height: 50px;
                margin: 0.3rem auto;
            }

            label {
                @apply font-normal;

                @media (min-width: theme("screens.xl")) {
                    @apply absolute bg-gray-900 p-2 start-14 rounded-lg text-xs text-white dark:bg-[#222];
                    pointer-events: none;
                    transform: scale(0.9) translateX(10px);
                    opacity: 0;
                    transition: 0.2s 0.2s;
                }
            }

            &:hover {
                @apply bg-primary/10;
                transition: 50ms;

                label {
                    transform: translateX(0px) scale(1);
                    opacity: 1;
                    transition: 0.1s 0.02s;
                }
            }

            &.nav-tab-active {
                border: none;
                @apply bg-gradient-to-r from-amber-500 to-pink-500;
                color: #fff;
            }
        }
    }
}

.logo-wrapper img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

/* ── Tables ── */

.anbarak-app tr {
    transition: background 500ms;
}

.anbarak-app table {
    width: 100%;
    border: none;
    border-radius: 5px;
    table-layout: auto;

    th {
        font-size: 0.875em;
        white-space: nowrap;
    }

    td {
        padding: 1rem;
        vertical-align: middle;
        background: 0 0 !important;
        font-size: 0.875em;
    }

    input {
        width: 100%;
        min-width: 30px;
    }

    .product-item {
        &:hover {
            @apply bg-orange-100 dark:bg-orange-900/30;
        }

        &:last-child td {
            border-bottom: none;
        }

        &.low-stock .product-item__stock {
            @apply !bg-gradient-to-b from-transparent via-orange-100 to-transparent text-orange-600 dark:via-orange-900/40 dark:text-orange-400;
        }

        &.out-of-stock .product-item__stock {
            @apply !bg-gradient-to-b from-transparent via-red-100 to-transparent text-orange-600 dark:via-red-900/40 dark:text-red-400;
        }

        .product-item__pic {
            >img {
                width: 45px !important;
                height: 45px !important;
                object-fit: cover;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 0;
            }

            :where(.dark) &>img {
                border-color: #333;
            }
        }

        .product-item__pic__zoommed {
            position: fixed;
            top: 20vh;
            right: calc(50vw - 250px);
            width: 600px;
            height: auto;
            max-height: 600px;
            transition: 0.2s 20ms;
            border: 1px solid #333;
            border-radius: 5px;
            background: #fff;
            z-index: -9;
            opacity: 0;
            pointer-events: none;
            box-shadow: 0 20px 30px #ddd;

            :where(.dark) & {
                background: #1a1a1a;
                border-color: #333;
                box-shadow: 0 20px 30px rgba(0, 0, 0, 0.7);
            }

            img {
                width: 100%;
                object-fit: contain;
            }
        }

        .product-item__pic:hover .product-item__pic__zoommed {
            display: block;
            opacity: 1;
            z-index: 9;
        }

        .product-item__id {
            max-width: 150px;
        }

        .product-item__name {
            min-width: 170px;
            width: 30%;
        }

        .product-item__last-buy-price>div,
        .product-item__price>div,
        .product-item__price_sale>div {
            min-width: 130px;
            max-width: 150px;
        }

        .product-item__backorders,
        .product-item__online-sell {
            max-width: 100px;
        }

        .product-item__sku {
            min-width: 150px;
            max-width: 180px;
        }

        .product-item__stock {
            min-width: 70px;
        }

        .product-item__price,
        .product-item__price_sale {
            position: relative;

            .with-badge[data-badge] {
                &:after {
                    content: attr(data-badge);
                    cursor: default;
                    @apply rounded-full -top-2 left-2 px-2 text-xs;
                    background-color: #f1fdeb;
                    color: #1f8500;
                    position: absolute;
                    pointer-events: none;
                    box-shadow: 0 0 0 1px #b5d3a8;
                }

                &.badge--error:after {
                    background: #fd260e;
                    color: #ffffff;
                    box-shadow: none;
                }
            }
        }
    }
}

.anbarak-products-wrapper-table-wrapper {
    overflow-x: auto;
}

/* ── Actions / Buttons ── */

.actions-wrap {
    white-space: nowrap;
    text-align: center;

    a,
    button {
        box-shadow: none;
        border: 1px solid #d4d4d4;
    }

    :where(.dark) a,
    :where(.dark) button {
        border-color: #333;
    }

    &.icons-only {
        button {
            text-align: center;
            background: transparent;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 0.2rem;
            font-size: 15px;
            padding: 0;
            line-height: 40px;
            border: none;

            label {
                display: none;
            }
        }

        :where(.dark) & button {
            color: #ccc;
        }

        .btn-submit-save {
            background-color: rgba(66, 56, 61, 0.1);
            color: #4b4849;
        }

        :where(.dark) & .btn-submit-save {
            background-color: rgba(255, 255, 255, 0.1);
            color: #d1d5db;
        }

        .btn-submit-sell {
            color: #156bbb;
            background-color: rgba(21, 107, 187, 0.1);
        }

        :where(.dark) & .btn-submit-sell {
            color: #7abfff;
        }
    }
}

.button-group {
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    @apply rounded-xl dark:border-[#2a2a2a];

    .button-group__item {
        border-radius: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        @apply px-3 lg:px-4 last:border-none dark:border-[#2a2a2a];
    }

    button {
        border-radius: 0;
        border: none;

        &.active {
            background-color: var(--color-primary);
            color: #fff;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }
    }
}

:where(.dark) .button.loading:before {
    background-color: rgba(20, 20, 20, 0.8);
}

:where(.dark) .button svg {
    color: inherit;
}

:where(.dark) .button svg path,
:where(.dark) .button svg g {
    fill: currentColor !important;
}

:where(.dark) .button--primary {
    --tw-ring-offset-color: #141414;
}

/* ── Search / Forms ── */

.search-form-wrapper {
    @apply bg-white flex flex-col items-center rounded-xl border border-gray-300 w-full overflow-hidden dark:bg-[#141414] dark:border-[#2a2a2a];

    @media (min-width: theme("screens.xl")) {
        width: 50%;
        flex-direction: row;
        @apply rounded-xl;
    }


    input[type="text"] {
        width: 100%;
    }

    button,
    input,
    select {
        height: 44px;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    select {
        font-size: 0.875em;
    }
}

.new-order-products {
    .search-form-wrapper {
        width: 100%;
    }

    .submit-order-product-search {
        position: relative;

        &.active {
            .search-form-wrapper {
                border-radius: 15px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

            .product-select-list {
                display: block;
            }
        }
    }

    table td {
        padding: 0.3rem;
    }

    .attachment-woocommerce_thumbnail {
        max-width: 100%;
        height: auto;
    }

    .product-select-list {
        position: absolute;
        right: 0;
        left: 0;
        display: none;
        margin: 0;
        background: #fff;
        border-radius: 0 0 15px 15px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-top: 0;
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 10px 30px #ddd;
        z-index: 99;

        :where(.dark) & {
            background: #1a1a1a;
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
        }

        .attachment-woocommerce_thumbnail {
            width: 40px;
            vertical-align: middle;
        }

        li {
            margin: 0;
            padding: 0.3rem 0.5rem;
            cursor: pointer;

            &:hover {
                background: #f5f5f5;
            }

            * {
                pointer-events: none;
            }

            &[data-stock="0"] {
                background: #faf4f4;
                color: #8c8c8c;
            }
        }
    }
}

:where(.dark) .new-order-products .product-select-list li:hover {
    background: #262626;
}

:where(.dark) .new-order-products .product-select-list li[data-stock="0"] {
    background: rgba(127, 29, 29, 0.3);
    color: #999;
}

/* ── Modals (MicroModal) ── */

.micro-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;

    :where(.dark) & {
        background: rgba(0, 0, 0, 0.8);
    }
}

.modal__container {
    @apply bg-white p-5 lg:p-6 fixed bottom-0 rounded-b-none w-full max-w-full;
    @apply lg:relative lg:w-auto lg:mx-auto lg:rounded-2xl lg:shadow-xl lg:min-w-[320px] lg:max-w-[80vw] dark:bg-[#1a1a1a] dark:text-gray-200;
}

.modal__title {
    @apply font-semibold text-base lg:text-xl;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    padding-right: 2rem;
    @apply mb-5 -mt-1 mr-3;
}

.modal__close {
    position: absolute;
    top: .9rem;
    right: 1rem;
    background: #fff;
    border: 1px solid;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 20px;
    cursor: pointer;

    :where(.dark) & {
        background: #262626;
        color: #e5e5e5;
        border-color: #333;
    }
}

.modal__close:before {
    content: "✕";
    @apply relative top-0.5 leading-0;
}

.modal__content {
    margin-top: 1rem;
    line-height: 1.5;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px;
}

.submit-order-modal .modal__container {
    @media only screen and (min-width: 769px) {
        width: 1000px;
    }
}

.micromodal-slide {
    display: none;

    &.is-open {
        display: block;
    }

    &[aria-hidden="false"] {
        .modal__overlay {
            animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
        }

        .modal__container {
            animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
        }
    }

    &[aria-hidden="true"] {
        .modal__overlay {
            animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
        }

        .modal__container {
            animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
        }
    }

    .modal__container,
    .modal__overlay {
        will-change: transform;
    }
}

/* ── Datepicker ── */

.datepicker-plot-area {
    font-family: inherit;
    font-size: 1rem;
    width: 270px;
    @apply rounded-2xl border border-gray-300 p-4 dark:border-[#2a2a2a];

    :where(.dark) & {
        background: #1a1a1a;
        color: #e5e5e5;

        .datepicker-navigator {

            .pwt-btn-prev,
            .pwt-btn-next,
            .pwt-btn-switch {
                @apply bg-transparent text-white;
            }
        }

        .pwt-btn-today {
            @apply bg-transparent text-white;
        }
    }

    .datepicker-day-view .table-days td span {
        border-radius: 30px;
        width: 35px;
        height: 35px;
        padding: 0;
        line-height: 35px;
        margin: 0 auto;
        transition: 150ms cubic-bezier(0.37, -0.42, 0.58, 2.68);
    }

    .datepicker-month-view .month-item.selected,
    .datepicker-day-view .table-days td.selected span {
        background-color: var(--color-primary);
        color: white;
        text-shadow: none;
        font-weight: 800;
        box-shadow: 0 1px 20px 0px rgba(254, 139, 17, 0.31);
        display: block;
        transform: scale(1.2);
        position: relative;
        z-index: 2;
        border-radius: 30px;
    }

    .datepicker-day-view .month-grid-box .header .header-row-cell {
        @apply ltr:float-left rtl:float-right;
    }
}

:where(.dark) .datepicker-plot-area {
    .datepicker-day-view .table-days td span {
        @apply bg-neutral-900 text-white;
    }

    .datepicker-day-view .month-grid-box .header .header-row-cell {
        @apply bg-transparent text-white;
    }
}

:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) .datepicker-plot-area .datepicker-day-view .table-days {
    direction: ltr;
}

:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) .datepicker-plot-area .datepicker-day-view .table-days {
    direction: rtl;
}

/* ── Tooltips (Tippy) ── */

[id*="tippy-"] {
    font-family: Estedad;
    font-size: 0.875rem;
    z-index: 99999999 !important;
}

.tippy-arrow,
.tippy-box {
    background: #f9a300;
    color: #161616;

    :where(.dark) & {
        background: #f9a300;
        color: #161616;
    }
}

.tippy-arrow:before {
    border-top-color: #f9a300 !important;

    :where(.dark) & {
        border-top-color: #f9a300 !important;
    }
}

/* ── Notifications ── */

#notification-popup {
    transition: all 0.2s ease;
    overflow: hidden;

    :where(.dark) & {
        @apply bg-[#1a1a1a] border-[#2a2a2a];
    }

    :where(.dark) & .border-b {
        border-color: #333;
    }

    :where(.dark) & .text-gray-400 {
        color: #888;
    }

    :where(.dark) & li:hover {
        background-color: #222;
    }
}

/* ── Loading / Blocking ── */

.loading-screen {
    transition: opacity 400ms 50ms;
    opacity: 0;
    z-index: -99;

    &.is-active {
        opacity: 1;
        z-index: 98;
    }

    :where(.dark) & {
        background: rgba(10, 10, 10, 0.92);
    }

    :where(.dark) & .text-gray-800 {
        color: #e5e5e5;
    }

    :where(.dark) & .text-gray-500 {
        color: #999;
    }
}

.anbarak-blocker {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9;

    :where(.dark) & {
        background: rgba(10, 10, 10, 0.85);
    }

    .anbarak-spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 99;
        transform: translateX(-50%) translateX(-50%);
        background: url("../../images/loading.gif");
        width: 60px;
        height: 60px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

:where(.dark) .form-icon {
    background: #1a1a1a;
}

/* ── Highlights / Animations ── */

.highlight {
    background-color: #fdc354 !important;

    :where(.dark) & {
        background-color: #92400e !important;
    }
}

.highlight--red {
    background-color: #ff9b94 !important;

    :where(.dark) & {
        background-color: #7f1d1d !important;
    }
}

.product-row-update-highlight {
    background: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(36, 252, 83, 0.25) 45%, transparent 100%);
    background-size: 400% 100%;
    background-position: 0% 0;
    animation: one-wave-pass 2s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) .product-row-update-highlight {
    animation-name: one-wave-pass-ltr;
}

/* ── Stats ── */

.stat-card {
    @apply flex flex-col justify-center;
    transition: background-color 0.15s ease;

    :where(.dark) &:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }
}

/* ── Print ── */

#order-print {
    display: none;
}

@media print {
    html {
        max-width: 100vw;
        width: 100%;
    }

    #wpwrap>div:not(#order-print) {
        display: none;
    }

    body {
        max-width: 100vw;
        color: #000;
    }

    .wp-toolbar,
    body {
        padding: 0 !important;
        margin: 0;
    }

    #order-print {
        display: block;
        font-size: 12px;
        width: 100%;
        max-width: calc(100vw - 2px);
        font-family: Estedad;
        text-align: center;
        padding: 0;
        margin: 1px;
        box-sizing: border-box;
        border-radius: 1px;

        * {
            font-family: Estedad;
        }

        table {
            width: 100%;

            tr {
                border-bottom: 1px solid #000;
            }

            td,
            th {
                font-size: 10px;
                padding: 3px;
                border: 0;
            }
        }

        .print__totals {
            margin: 0;

            >div {
                padding: 0.5rem;
                border-bottom: 2px solid;

                &:last-child {
                    border-bottom: 0;
                }
            }
        }
    }

    .print__head {
        padding: 15px;

        .custom-logo {
            width: 80px;
            height: auto;
        }
    }

    .print__main {
        border: 2px solid #000;
    }

    .print__contact {
        border: 2px solid;
        margin: 5px 0;
        padding: 5px;
    }

    .print__phone {
        white-space: preserve-spaces;
    }
}

/* ── Keyframe Animations ── */

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

@keyframes one-wave-pass {
    0% {
        background-position: 20% 0;
    }

    100% {
        background-position: 150% 0;
    }
}

@keyframes one-wave-pass-ltr {
    0% {
        background-position: 150% 0;
    }

    100% {
        background-position: 20% 0;
    }
}
