:root {
    --bg: #ffffff;
    --bg-gradient: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 25%, rgb(255 255 255) 75%, rgb(255 255 255 / 0%) 100%);
    --bg-opacity: .5;
    --main: #FFFFFF;
    --accent: #AA8039;
    --accent-color: var(--accent);
    --primary-text: #000000;
    --secondary-text: #383232;
    --light-text: #AAA89B;
    --semi-transpagent-red: rgba(198, 80, 82, .2);
    --menu-button-text: #000000;
    --label-text: #FFFFFF;
    --cart-widget-shadow: #512a1a85;
    --screen-backdrop-color: rgb(20 20 20 / 25%);
    --screen-border-color: #a59793;
    --screen-shadow: 0 0 12px 0 #ff980026;
    --no-media-color: rgb(224 211 189 / 15%);

    --main-font-color: var(--primary-text);
    --price-item-bg-color: var(--accent);
    --secondary-price-item-bg-color: var(--accent);
    --fav-color: var(--accent);
    --button-primary-bg-color: var(--accent);
    --order-success-icon-color: var(--accent);
    --order-number-color: var(--accent);
    --order-number-text-color: var(--secondary-text);
    --delivery-info-bg: #f5f5f5;
    --button-secondary-border: 1px solid var(--accent);

    --action-btn-text-color: #359EFF;
    --action-btn-border-color: #359EFF;
    --actions-popup-bg: #FFFFFF;
    --action-item-div: 1px solid #F4F4F4;
    --action-name: #333333;
    --action-desc: #858585;
    --action-notif-default-bg: #0F0F0F;
    --action-notif-default-text: #FFFFFF;
    --action-notif-error-bg: #0F0F0F;
    --action-notif-error-text: #F08282;

    --border-radius-xxs: .25rem; 	/* 0.25rem  4px */
    --border-radius-xs: .50rem; 	/* 0.50rem  8px */
    --border-radius-sm: .75rem; 	/* 0.75rem 12px */
    --border-radius-md: 1rem; 		/* 1.00rem 16px */
    --border-radius-xl: 1.5rem; 	/* 1.50rem 24px */
    --border-radius-xxl: 2rem; 		/* 2.00rem 32px */
}

.theme--dark {
    --bg: #000000;
    --bg-gradient: linear-gradient(90deg,
    rgba(22,21,19,0) 0%,
    rgba(22,21,19,1) 25%,
    rgba(22,21,19,1) 75%,
    rgba(22,21,19,0) 100%
    );
    --bg-opacity: .6;
    --main: #FFFFFF;
    --accent: #AA8039;
    --accent-color: var(--accent);
    --primary-text: #EAE9E6;
    --secondary-text: rgba(170, 168, 155, 0.85);
    --light-text: #AAA89B;
    --semi-transpagent-red: rgba(198, 80, 82, .2);
    --menu-button-text: #FFFFFF;
    --label-text: #FFFFFF;
    --cart-widget-shadow: #512a1a85;
    --screen-backdrop-color: rgb(20 20 20 / 25%);
    --screen-border-color: #972f0e;
    --screen-shadow: 0 0 12px 0 #ff980026;
    --no-media-color: rgb(224 211 189 / 15%);

    --main-font-color: var(--primary-text);
    --price-item-bg-color: var(--accent);
    --secondary-price-item-bg-color: var(--accent);
    --fav-color: var(--accent);
    --button-primary-bg-color: var(--accent);
    --order-success-icon-color: var(--accent);
    --order-number-color: var(--accent);
    --order-number-text-color: var(--secondary-text);
    --delivery-info-bg: #2e2525;
    --button-secondary-border: 1px solid var(--accent);

    --actions-popup-bg: #1a1a1a;
    --action-item-div: 1px solid #404040;
    --action-name: #F6F6F6;
    --action-desc: #979797;
    --action-notif-default-bg: #302C3E;
    --action-notif-default-text: #FFFFFF;
    --action-notif-error-bg: #733531;
    --action-notif-error-text: #F08282;
}

body {
    background-color: var(--bg);
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: var(--bg-color);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--backdrop-color);
}
body:hover::-webkit-scrollbar-thumb {
    background-color: var(--button-primary-bg-color);
}
@media (max-width: 768px) {
    body::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

body,
.forum-regular {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;
}

.scrollbar::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.scrollbar::-webkit-scrollbar-track {
    box-shadow: none;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(171, 130, 58, 0.5);
}

a,
.theme--dark a {
    color: var(--accent);
}

.button {
    border: 1px solid var(--accent);
    color: var(--menu-button-text);
    text-decoration: none;
    border-bottom-right-radius: .75rem;
    border-top-left-radius: .75rem;
    padding: .5rem 1rem;
    font-weight: 400;

    display: flex;
    align-items: center;
    gap: .5em;
    transition: background-color .2s ease;
}
a.button {
    color: var(--menu-button-text);
}

.order-icon {
    color: var(--accent-color) !important;
    fill: var(--accent-color) !important;
}
.order-buttons {
    width: fit-content;
    min-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--primary-text);
    border: 1px solid var(--accent);
    border-bottom-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    overflow: hidden;
    padding: 2px 2px;
    transition: background-color .2s ease, color .2s ease;
    font-size: var(--fs-100);
}
.order-buttons--added {
    background: var(--accent);
    color: var(--bg);
}

.add-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    font-size: 1rem;
    line-height: 1;
    background: inherit;
    color: inherit;
    border: none;
}

@media (min-width: 768px) {
    .order-buttons:hover,
    .button:hover {
        background-color: var(--accent);
    }
}

.splide {
    border-radius: 1rem;
}

.docs-container {
    border-top: 1px solid var(--backdrop-color);
    margin-top: 1.75rem;
    text-align: center;
    padding: 3rem 1.25rem 3rem 1.25rem;
    width: 100%;
}
@media (min-width: 768px) {
    .docs-container {
        width: 768px;
    }
}
.docs-container .docs-header {
    font-size: var(--fs-110);
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.docs-container ul {
    padding-top: .35rem;
    font-size: var(--fs-90);
}
.docs-container li {
    padding: .35rem 0;
}

.total-value {
    color: var(--main-font-color);
}
.remove-add-cost-button {
    width: 1.25em;
    height: 1.25em;
    background: var(--accent-color-semi);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.actions-button {
    border: 1px solid var(--accent) !important;
    color: var(--menu-button-text) !important;
    border-radius: var(--border-radius-sm) 0 var(--border-radius-sm) 0 !important;
    padding: .5rem 1rem !important;
    font-weight: 400 !important;
}
.popup-content {
    border-radius: .15rem !important;
}
.close-action-popup {
    border-radius: var(--border-radius-xs) 0 var(--border-radius-xs) 0 !important;
}