@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-animation {
    animation: scrollLeft 20s linear infinite;
}

/* ---- Doyle Font Family ---- */
@font-face {
    font-family: "Doyle";
    src: url("../fonts/doyle-font/Regular.woff2") format("woff2"), url("../fonts/doyle-font/Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Doyle";
    src: url("../fonts/doyle-font/Bold.woff2") format("woff2"), url("../fonts/doyle-font/Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Doyle";
    src: url("../fonts/doyle-font/Light.woff2") format("woff2"), url("../fonts/doyle-font/Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Doyle";
    src: url("../fonts/doyle-font/Medium.woff2") format("woff2"), url("../fonts/doyle-font/Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Doyle";
    src: url("../fonts/doyle-font/MediumItalic.woff2") format("woff2"), url("../fonts/doyle-font/MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
}

/* ---- Haffer XH Font Family ---- */
@font-face {
    font-family: "HafferXH";
    src: url("../fonts/haffer-xh-font/HafferXHRegular.woff2") format("woff2"), url("../fonts/haffer-xh-font/HafferXHRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "HafferXH";
    src: url("../fonts/haffer-xh-font/HafferXHMedium.woff2") format("woff2"), url("../fonts/haffer-xh-font/HafferXHMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "HafferXH";
    src: url("../fonts/haffer-xh-font/HafferXHBold.woff2") format("woff2"), url("../fonts/haffer-xh-font/HafferXHBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: "Doyle", sans-serif;
    min-width: 100%;
    background-color: #fffcf6;
}

/**========= Spinner ===========**/
.avotree-spinner {
    position: absolute;
    visibility: visible;
    opacity: 1;
    display: none;
    top: 50%;
    transform: translate(-50%, -50%);
    left: initial;
    right: 0;
    margin: 0;
    background-color: #11420a;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
}

.avotree-spinner::before {
    content: "";
    position: absolute;
    background-color: #fff;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.submitting .avotree-spinner {
    display: block;
}

.border-2-A8200D {
    border: 2px solid #a8200d !important;
}

.border-2-11420A {
    border: 2px solid #11420a !important;
}

.custom-tag-p p:not(:first-child) {
    margin-top: 40px;
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(17, 66, 10, 0.3);
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #11420a;
}

/* Firefox */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 66, 10, 0.3) transparent;
}

@media (prefers-reduced-motion: reduce) {
    .avotree-spinner::before {
        animation-name: blink;
        animation-duration: 2000ms;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media only screen and (max-width: 768px) {
    .page-template-page-login.page-template footer,
    .page-template-page-register.page-template footer,
    .page-template-page-forgot-password.page-template footer,
    .page-template-page-verify-account.page-template footer,
    .page-template-page-reset-password.page-template footer {
        display: none;
    }
}

.checked-group input:checked + label div,
.checked-group input:checked + div > label div {
    background-color: #11420a;
}

.checked-group input:checked + label div span,
.checked-group input:checked + div > label div span {
    display: block;
}

.checked-group div > div.form {
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0px 2px;
}

.checked-group input:checked ~ div > div.form {
    max-height: 400px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating input:checked ~ label .icon-star {
    display: block;
}

.rating input:checked ~ label .icon-star-empty {
    display: none;
}

.marquee3k__wrapper {
    line-height: 1;
}

.toggle-button input:checked + label > div {
    background-color: #11420a;
}

.toggle-button input:checked + label > div > div {
    background-color: #fff;
    left: 25px;
}

.content-recipe ul,
.content-recipe p {
    font-size: 16px;
    font-style: normal;
    font-weight: medium;
    line-height: 168%;
    margin-bottom: 20px;
}

.content-recipe a {
    color: #11420a;
    text-decoration: underline;
    font-weight: 500;
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

.woocommerce-notices-wrapper:empty {
    display: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.overflow-hidden header.main-avotree-header:has(#cart-drawer.transform-none),
body.overflow-hidden:has([aria-modal="true"][role="dialog"]) header.main-avotree-header,
body:has(.avotree_modal:not(.hidden)) header.main-avotree-header {
    position: initial;
}

body:has(.avotree_modal:not(.hidden)) {
    overflow: hidden;
}

body:has(.avotree_modal:not(.hidden)) div[modal-backdrop],
input[type="password"].focus-border-parent ~ .icon-close,
input[type="password"] ~ .icon-close,
.password-wrapper input.focus-border-parent ~ .icon-close {
    display: none !important;
}

.woocommerce-notices-wrapper a {
    text-decoration: underline;
}