[class^="icon-"], [class*=" icon-"] {
    font-family: 'AdoraOnlineIconFont', sans-serif !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
    content: "\e901";
}

.icon-favorites:before {
    content: "\e902";
}

.icon-orders:before {
    content: "\e903";
}

.icon-home:before {
    content: "\e904";
}

.icon-rewards:before {
    content: "\e905";
}

.icon-profile:before {
    content: "\e906";
}

.icon-shopping-bag:before {
    content: "\e907";
}

.icon-hamburger-menu:before {
    content: "\e908";
}

.icon-search:before {
    content: "\e909";
}

.icon-pin:before {
    content: "\e90a";
}

.icon-arrow-back:before {
    content: "\e90b";
}

.icon-cancel:before {
    content: "\e90c";
}

.icon-world:before {
    content: "\e90d";
}

.icon-heart-filled:before {
    content: "\e90e";
}

.icon-map:before {
    content: "\e90f";
}

.icon-settings:before {
    content: "\e910"
}

.icon-contact:before {
    content: "\e911"
}

.icon-policy:before {
    content: "\e912"
}

.icon-subtract:before {
    content: "\e913";
}

.icon-plus:before {
    content: "\e914";
}

.icon-item-half-left:before {
    content: "\e915";
    color: #33333366;
}

.icon-item-whole:before {
    content: "\e916";
    color: #33333366;
}

.icon-item-half-right:before {
    content: "\e917";
    color: #33333366;
}

.icon-call:before {
    content: "\e918";
}
.gridColsAuto1x_resp,
.gridColsAuto1x {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: auto 1fr;
}

.gridCols1xAuto_resp,
.gridCols1xAuto {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr auto;
}

.gridCol1 {
    grid-column: 1;
}

.gridCol2 {
    grid-column: 2;
}

@media (max-width: 576px) {
    .gridCols1x1x1x_resp,
    .gridColsAutoAuto_resp,
    .gridColsAuto1x_resp,
    .gridCols1xAuto_resp,
    .gridCols1x1x_resp {
        display: block;
    }
}

@media (max-width: 840px) {
    .gridCols1x1x1x_resp,
    .gridColsAutoAuto_resp,
    .gridColsAuto1x_resp,
    .gridCols1xAuto_resp,
    .gridCols1x1x_resp {
        display: block;
    }
}
@font-face {
    font-family: 'Roshelyn';
    src: url(4416b9b855604366f9d3.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FilsonPro';
    src: url(2bd0463b46457f4b3078.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'FilsonPro';
    src: url(4283cd31985f0dd958f0.woff2) format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'FilsonPro';
    src: url(cae46f84a4d3835efe76.woff2) format('woff2');
    font-weight: 900;
    font-style: normal;
}

:root {
    /* Backgrounds */
    --color-background-main: #FDFCFB; /* Dough White */
    --color-background-main-hover: #E4D7C7;
    --color-background-primary: #F5EBE1;  /* Dough */
    --color-background-primary-hover: #E4D7C7;
    --color-background-secondary: #FAF6F1;  /* Dough Lt */
    --color-background-secondary-hover: #E9DFD2;

    /* Accent */
    --color-accent: #ED1C24; /* Roma */
    --color-accent-hover: #ED1C2480; /* Roma */

    /* Text */
    --color-text-primary: #232222; /* Coalfire */
    --color-text-secondary: #4D4A48; /* Coalfire Lt */
    --color-text-tertiary: #85714D;  /* Brass */
    --color-text-tertiary-hover: #85714D99;  /* Brass */
    --color-text-quaternary: #4D3E28;
    --color-text-optional: #a0a0a0;

    /* Button */
    --color-button-text: var(--color-text-primary);
    --color-button-background: #FBAE17; /* Gold */
    --color-button-background-hover: #FEC462; /* Gold */

    /* Border */
    --color-border-default: #d7d7d7;

    /* System */
    --color-error: #BE1B0A;
    --color-disabled: #666666;
    --color-disabled-soft: #d7d7d7;
    --color-coupons: #42A95B;

    /* Other */
    --color-deal-builder-bar: #71714D;
    --color-deal-builder-bar-light: #71714D4D;

    --layout-header-height: 80px;
    --layout-header-height-mobile: 60px;
    --layout-navbar-height: 80px;
    --layout-order-type-navbar-height: 40px;


    /******************/
    /***   General  ***/
    /******************/
    --radius: 10px;
    --shadow: 0 2px 10px 1px rgba(0,0,0,.14), 0 2px 5px -5px rgba(0,0,0,.4);


    --fontSize: 16px;
    
    --colorPlaceholder: #a0a0a0;
    --colorPlaceholderFocus: #b0b0b0;
    --padding: 0.5rem;
    --padding2: 1rem;
    --margin: 0.5rem;
    --margin2: 1rem;
    --lineHeight: 1.3;
    --backgroundImgUrl: "";
    --headerTagMarginTopBot: 0.3rem;
    --headerTagMarginLftRit: 0.3rem;
    --border: 1px solid var(--colorBorder);
    /******************/
    /***    Fonts   ***/
    /******************/
    --fontBody: 1.0rem Poppins, sans-serif;
    --font: 1.0rem Arial, sans-serif;
    --fontSmaller: 0.8rem;
    --fontHeader: 1.35rem Arial, sans-serif;
    --fontCategory: 1.35rem Arial, sans-serif;
    --fontOrderRegular: 1rem Arial, sans-serif;
    --fontOrderStrong: 1.1rem Arial, sans-serif;
    --fontMenuItem: 1rem Arial, sans-serif;
    --fontMenuItemName: bold 1.45rem RobotoCondensed, Arial, sans-serif;
    --fontMenuItemDescription: 1rem RobotoCondensed, Arial, sans-serif;
    --fontInput: 1rem Arial, sans-serif;
    --fontButton: 1rem Poppins, sans-serif;
    --fontTitle0: bold 1rem Arial, sans-serif;
    --fontTitle1: bold 1.15rem Arial, sans-serif;
    --fontTitle2: bold 1.30rem Arial, sans-serif;
    --fontTitle3: bold 1.45rem Arial, sans-serif;
    /******************/
    /***   Colors   ***/
    /******************/
    --colorFocuse: #000000;
    --colorText: var(--color-text-primary); /* Remove and just use --color-text-primary */ 
    --colorInputBg: #ffffff;
    --colorFocusBg: #ffffff;
    --colorBg: #fefefe;         /* Remove and replace with --color-background-main; Clean up references */
    --colorBgHeader: #F5EBE1;
    --colorBgCard: #fefefe;
    --colorBgRow: #cfcfcf;
    --colorTheme: #000000;
    --colorThemeSecondary: #000050;
    --colorThemeBg: var(--color-button-background);
    --colorHover: #fec462;
    --colorActive: #3895D3;
    --colorBorder: #cfcfcf;
    --colorWarning: var(--color-error);
    --colorDefMod: var(--color-text-primary);
    --colorAddMod: green;
    --colorAdjustMod: red;
    --colorDisabled: #a1a1a1;
    --colorPlaceholderOnly: #787878;
    --colorDatalistHover: #f1f1f1;
    --colorOrderDetailAltRow: #dfdfdf;
    --colorOrderDetailHeader: #545454;
    --colorOrderDetailHeaderText: #ffffff;
    /******************/
    /***   Header   ***/
    /******************/
    --hedBgColor: var(--colorBgHeader);
    --hedHeight: 80px;
    --headerHeightMobile: 60px;
    --hedCartColor: #000000;
    --hedCartFontSize: 220px;
    --hedCartFontSizeXXX: 170px;
    --orderHeight: 4rem;
    /*******************/
    /***   Nav Bar   ***/
    /*******************/
    --navbarHeight: 80px;
    /*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /*XXXXXXXXXXXXXXX More Customizations XXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /******************/
    /***   Button   ***/
    /******************/
    --btnColor: var(--colorTheme);
    --btnColorBg: var(--colorThemeBg);
    --btnColorHover: var(--colorTheme);
    --btnColorBgHover: var(--colorHover);
    --btnColorActive: var(--colorTheme);
    --btnColorDisabled: #666666;
    --btnColorBgDisabled: #FFD580;
    --btnColorBgSecondaryDisabled: #d7d7d7;
    --btnColorBgActive: var(--colorActive);
    --btnPadding: 0.5rem 1rem;
    --btnBorder: none;
    --btnRadius: var(--radius);
    /*----icon----*/
    --btnIconColor: var(--colorThemeBg);
    --btnIconColorBg: var(--colorBgCard);
    --btnIconRadius: 5px;
    --btnIconPadding: 0px 3px;
    --btnIconFontSize: 1.2rem;
    /*----link----*/
    --btnLinkColor: var(--color-text-primary);
    /*******************************/
    /***   Order Now Component   ***/
    /*******************************/
    --divOrderNow: gray;
    /******************/
    /*** Categories ***/
    /******************/
    --catColor: var(--colorTheme);
    --catColorBg: var(--colorThemeBg);
    --catColorHover: var(--colorHover);
    --catColorActive: var(--colorActive);
    --catPadding: 1rem;
    --catBorder: 3px solid var(--colorBg);
    --catTextAlign: center;
    --catFontSize: 1.5rem;
    --catTextCase: uppercase;
    /******************/
    /***   Order    ***/
    /******************/
    --ordBgImage: "";
    --ordBgColor: var(--colorBgCard);
    --ordBgMargin: var(--margin);
    --ordBgPadding: var(--padding);
    --ordPadding: var(--padding);
    --ordLines: 2px solid var(--colorBorder);
    --ordItemLines: 1px dotted var(--colorBorder);
    --ordWidth: 400px;
    /******************/
    /***  Menu Item ***/
    /******************/
    --itmBorder: 1px solid var(--colorBorder);
    --itmFontSize: 1rem;
    --itmColorBG: var(--colorBgCard);
    --itmhHeight: 120px;
    --itmvWidth: 280px;
    --itemGapWidth: 20px;
    /******************/
    /***  Dialog ******/
    /******************/
    --diBorder: 1px solid var(--colorBorder);
    --diColorBg: var(--colorBgCard);
    /******************/
    /*** Order Type ***/
    /******************/
    font-size: var(--fontSize);
    /*******************/
    /***   Tracker   ***/
    /*******************/
    --trkrUncompleteFontColor: #A3A3A3;
    --trkrCompleteFontColor: #940000;
    /** Checkbox Styling **/
    --checkboxColor: #E31B23;
    --checkboxColorFocus: #E31B23BF;
    --checkboxColorBackground: #E31B23;

    /******************/
    /*** Dark mode ****/
    /******************/
    --darkColorText: #efefef;
    --darkColorInputBg: #333333;
    --darkColorFocusBg: #444444;
    --darkColorFocus: #fefefe;
    --darkColorBg: #232323;
    --darkColorBgCard: #1A1A1A;
    --darkColorBgRow: #333333;
    --darkColorTheme: #232323;
    --darkColorThemeBg: #962135;
    --darkColorThemeSecondary: #FDB826;
    --darkColorHover: #C25160;
    --darkColorActive: #B24150;
    --darkColorBorder: #962135;
    --darkColorWarning: #ff9090;
    --darkColorDefMod: #0000e0;
    --darkColorAddMod: #00e000;
    --darkColorAdjustMod: #ff9090;
    --darkColorPlaceholderOnly: #b1b1b1;
    --darkColorDatalistHover: #f1f1f1;
    --darkColorOrderDetailAltRow: #3e3e3e;
    --darkColorOrderDetailHeader: #adadad;
    --darkColorOrderDetailHeaderText: #2e2e2e;
    --darkHedBgColor: #565656;
    --darkHedHeight: 100px;
    --darkHedCartColor: #FDB826;
    --darkHedCartFontSize: 220px;
    --darkHedCartFontSizeXXX: 170px;
    --darkPlaceHolder: #333333;
    /******************/
    /***   Button   ***/
    /******************/
    --darkBtnColor: #efefef;
    --darkBtnColorBg: var(--colorThemeBg);
    --darkBtnColorHover: var(--colorTheme);
    --darkBtnColorBgHover: var(--colorHover);
    --darkBtnColorActive: var(--colorTheme);
    --darkBtnColorDisabled: var(--colorTheme);
    --darkBtnColorBgActive: var(--colorActive);
    --darkBtnPadding: 0.65rem 1rem;
    --darkBtnBorder: none;
    --darkBtnRadius: var(--radius);
    /*----icon----*/
    --darkBtnIconColor: var(--colorThemeBg);
    --darkBtnIconColorBg: var(--colorBgCard);
    --darkBtnIconRadius: 5px;
    --darkBtnIconPadding: 0px 3px;
    --darkBtnIconFontSize: 1.2rem;
    /*----link----*/
    --darkBtnLinkColor: var(--color-text-primary);
    /******************/
    /*** Categories ***/
    /******************/
    --darkCatColor: var(--colorTheme);
    --darkCatColorBg: var(--colorThemeBg);
    --darkCatColorHover: var(--colorHover);
    --darkCatColorActive: var(--colorActive);
    --darkCatPadding: 1rem;
    --darkCatBorder: 3px solid var(--colorBg);
    --darkCatTextAlign: center;
    --darkCatFontSize: 1.5rem;
    --darkCatTextCase: uppercase;
    /******************/
    /***   Order    ***/
    /******************/
    --darkOrdBgImage: "";
    --darkOrdBgColor: var(--colorBgCard);
    --darkOrdBgMargin: var(--margin);
    --darkOrdBgPadding: var(--padding);
    --darkOrdPadding: var(--padding);
    --darkOrdLines: 2px solid var(--colorBorder);
    --darkOrdItemLines: 1px dotted var(--colorBorder);
    --darkOrdWidth: 400px;
    /******************/
    /***  Menu Item ***/
    /******************/
    --darkItmBorder: 1px solid var(--colorBorder);
    --darkItmFontSize: 1rem;
    --darkItmColorBG: var(--colorBgCard);
    --darkItmhHeight: 120px;
    --darkItmvWidth: 365px;
    /******************/
    /***  Dialog ******/
    /******************/
    --darkDiBorder: 1px solid var(--colorBorder);
    --darkDiColorBg: var(--colorBgCard);
    --darkShadow: 0 4px 10px 0 rgba(255,255,255,.14), 0 2px 5px -5px rgba(255,255,255,.4);
    --darkBackgroundImgUrl: none;
}

/******************/
/***   Global   ***/
/******************/
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--fontSize);
}

body, html {
    overflow-x: hidden !important; /* Prevents horizontal scrolling */
    scroll-behavior: smooth; /* Adds smooth scrolling */
    overscroll-behavior: none;
}

body {
    background: var(--colorBg);
    background-image: var(--backgroundImgUrl);
    color: var(--color-text-primary);
    line-height: var(--lineHeight);
    font: var(--fontBody);
    transition-property: background;
    transition-duration: 0.3s;
    scrollbar-width: thin !important; /* Firefox */
    scrollbar-color: #d4d4d4 #ffffff; /* Firefox */
    max-height: 100dvh;
    min-height: 100dvh;
}

    /* Chrome, Edge, Safari */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 6px; /* Adjust width as desired */
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: #ffffff;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        background-color: #d4d4d4;
        border-radius: 10px;
        border: 2px solid #ffffff;
    }

main {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.altBackground {
    background-color: var(--colorBg);
    filter: brightness(95%);
}

h1 {
    font-size: 2rem;
}

/*h1, h2, h3, h4, h5, h6 {
    margin: var(--headerTagMarginTopBot) var(--headerTagMarginLftRit);
}*/

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 6000;
}

.a, .a:hover, .a:focus, .a:active {
    text-decoration: none;
    color: inherit;
    font: var(--fontBody);
    font-weight: normal;
}

.colorThemeSecondary {
    color: var(--colorThemeSecondary);
}

.colorThemeBg {
    color: var(--colorThemeBg);
}

label {
    font: var(--fontBody);
    font-weight: normal;
}

select {
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    color: var(--color-text-primary);
    background-color: var(--colorInputBg);
    border: 2px solid #85714D3D;
    border-radius: var(--radius) !important;
    padding: 0.618em 1em;
    touch-action: manipulation;
    cursor: pointer;
}

    select:focus {
        background-color: var(--colorFocusBg);
        outline: none;
        border: 2px solid var(--color-text-primary);
    }

    select option {
        margin: var(--margin);
        background: var(--colorInputBg);
        height: 30px;
        padding: 0.5rem 0;
        line-height: 5;
    }

@supports (-webkit-touch-callout: none) {
    /* Safari-specific styles go here */
    select {
        height: 48.75px;
    }
}

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--colorPlaceholder);
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--colorPlaceholder);
}

input:focus::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--colorPlaceholderFocus);
}

input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--colorPlaceholderFocus);
}

textarea,
input {
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background-color: var(--colorInputBg);
    border: 2px solid #85714D3D;
    border-radius: var(--radius);
    padding: 0.618em 1em;
    cursor: text;
    touch-action: manipulation;
    -webkit-appearance: none;
}

    textarea::placeholder,
    input::placeholder {
        color: var(--colorPlaceholder);
    }

    textarea:focus,
    input:focus {
        background-color: var(--colorFocusBg);
        outline: none;
        border: 2px solid var(--color-text-primary);
    }

    textarea:disabled,
    input:disabled,
    select:disabled {
        background-color: var(--colorDisabled);
        cursor: not-allowed;
        opacity: 0.7;
    }

        textarea:disabled::placeholder,
        input:disabled::placeholder {
            color: var(--colorDisabled);
        }

fieldset {
    border: none;
}
/*
legend {
    font-family: var(--fontTitle0);
    color: var(--colorThemeSecondary);
    text-transform: uppercase;
    font-weight: bold;
} */

textarea {
    width: 100%;
    resize: vertical;
    min-height: 5rem;
    font-size: 1rem;
}

.fontSmaller {
    font-size: var(--fontSmaller);
}

.btnLink {
    border: none;
    background-color: transparent;
    color: var(--btnLinkColor);
    font-size: 1rem;
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0;
    text-decoration: underline;
}

.btn-icon-link {
    border: none;
    background-color: transparent;
    color: var(--btnIconColor);
    font-size: 1rem;
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0;
    text-decoration: underline;
}

.close {
    position: absolute;
    right: 8px;
    top: 8px;
    min-width: 32px;
    height: 32px;
    background: none;
    border-radius: 50%;
    z-index: 5;
}

.formHeader {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--diColorBg);
}

.formHeaderText {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.5rem 0 0.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--diColorBg);
}

    .formHeaderText > h1 {
        font-size: larger;
        flex: 1;
    }

.field {
    display: flex;
    flex-flow: column;
    font: var(--fontInput);
    margin-top: 0.35rem
}

.warning {
    color: var(--colorWarning) !important;
}

.invalid-input {
    border: 2px solid var(--colorWarning) !important;
}

.invalid-checkbox::before {
    border: 2px solid var(--colorWarning) !important;
}

.error-text {
    color: var(--colorWarning) !important;
    font-size: var(--fontSmaller);
    margin-left: 5px;
    margin-top: 2px;
    line-height: 1.5;
}

ul.error-text {
    list-style: disc;
    margin-left: 12px;
}

.hidden {
    display: none !important;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.m0 {
    margin: 0;
}

.m1 {
    margin: var(--margin);
}

.m1-t {
    margin: 0;
    margin-top: var(--margin);
}

.m1-b {
    margin: 0;
    margin-bottom: var(--margin);
}

.m1-tb {
    margin: 0;
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

.m1-tl {
    margin: 0;
    margin-top: var(--margin1);
    margin-left: var(--margin1);
}

.m1-l {
    margin: 0;
    margin-left: var(--margin);
}

.m1-r {
    margin: 0;
    margin-right: var(--margin);
}

.m1-lr {
    margin: 0;
    margin-left: var(--margin);
    margin-right: var(--margin);
}

.m2 {
    margin: var(--margin2);
}

.m2-t {
    margin: 0;
    margin-top: var(--margin2);
}

.m2-b {
    margin: 0;
    margin-bottom: var(--margin2);
}

.m2-tb {
    margin: 0;
    margin-top: var(--margin2);
    margin-bottom: var(--margin2);
}

.m2-l {
    margin: 0;
    margin-left: var(--margin2);
}

.m2-tl {
    margin: 0;
    margin-top: var(--margin2);
    margin-left: var(--margin2);
}

.m2-r {
    margin: 0;
    margin-right: var(--margin2);
}

.m2-lr {
    margin: 0;
    margin-left: var(--margin2);
    margin-right: var(--margin2);
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.nowarp {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .m0-mobile {
        margin: 0 !important;
    }

    .header .logo > img {
        max-height: calc(var(--hedHeight) - 1rem);
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        object-fit: contain;
    }

    .width100_resp {
        width: 100%;
    }
}

@media (max-width: 840px) {
    .m0-mobile {
        margin: 0 !important;
    }

    .header .logo > img {
        max-height: calc(var(--hedHeight) - 1rem);
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        object-fit: contain;
    }

    .width100_resp {
        width: 100%;
    }
}

.p0 {
    padding: 0 !important;
}

.p1 {
    padding: var(--padding);
}

.p1-t {
    padding: 0 !important;
    padding-top: var(--padding) !important;
}

.p1-b {
    padding: 0;
    padding-bottom: var(--padding);
}

.p1-tb {
    padding: 0;
    padding-top: var(--padding);
    padding-bottom: var(--padding);
}

.p1-l {
    padding: 0;
    padding-left: var(--padding);
}

.p1-r {
    padding: 0;
    padding-right: var(--padding);
}

.p1-lr {
    padding: 0;
    padding-left: var(--padding);
    padding-right: var(--padding);
}

.p2 {
    padding: var(--padding2);
}

.p2-t {
    padding: 0;
    padding-top: var(--padding2);
}

.p2-b {
    padding: 0;
    padding-bottom: var(--padding2);
}

.p2-tb {
    padding: 0;
    padding-top: var(--padding2);
    padding-bottom: var(--padding2);
}

.p2-l {
    padding: 0;
    padding-left: var(--padding2);
}

.p2-r {
    padding: 0;
    padding-right: var(--padding2);
}

.p2-lr {
    padding: 0;
    padding-left: var(--padding2);
    padding-right: var(--padding2);
}

table > tbody > tr > td {
    padding: 0.5rem;
}

/*table > tbody > tr:nth-child(even) {
    background-color: var(--colorBg);
}*/

.aolo-link {
    text-decoration: none;
    color: var(--colorThemeSecondary);
}

    .aolo-link:hover {
        text-decoration: underline;
        cursor: pointer;
        color: var(--colorHover);
    }

.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}

.block {
    display: block;
}

.widthMinMobile {
    min-width: 250px !important;
}

.uppercase {
    text-transform: uppercase;
}

.lineThemeDot75 {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    height: 2px;
    background-color: transparent;
    border: none;
    background-image: linear-gradient(to right, transparent, var(--colorThemeBg), transparent);
}

.opacity0 {
    opacity: 0;
}

.opacity1 {
    opacity: 1;
}

.bold {
    font-weight: 700 !important;
}

.italic {
    font-style: italic;
}

.hidden_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.inline_label {
    align-self: center;
    text-align: right !important;
}

.readOnly {
    border-bottom: 1px solid var(--colorBorder);
    padding: var(--padding);
    display: inline-block;
    color: var(--color-text-primary);
}

.required-star::after {
    content: " *";
    font-weight: bold;
    color: var(--color-error);
}

@media (min-width: 576px) {
    .mobile-display {
        display: none !important;
    }
}

@media (max-width: 840px) {
    .desktop-display {
        display: none !important;
    }

    .p0-mobile {
        padding: 0 !important;
    }
}


.accordion {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    padding: 0 !important;
}

.accordion-open {
    max-height: 2500px !important;
    transition: max-height 0.5s ease-in !important;
}

.inline {
    display: inline-block;
}

.lineThrough {
    text-decoration: line-through;
}

#dia_progress {
    z-index: 1000;
}

@media (max-width: 840px) {
    #dia_progress {
        width: revert !important;
        min-height: revert !important;
    }
}

/*************************/
/***** Input Box CSS *****/
/*************************/
.inputbox {
    min-width: 21vw;
}

.inputbox-body {
    margin: var(--margin2);
}

    .inputbox-body > div:first-child {
        margin: var(--margin);
    }

        .inputbox-body > div:first-child > label {
            margin: 0;
            margin-bottom: var(--margin2);
            justify-content: center;
            display: flex;
        }

        .inputbox-body > div:first-child > input {
            width: 100%;
        }

    .inputbox-body > div:last-child {
        text-align: center;
        /*display: flex;
        flex-direction: row;*/
    }

        .inputbox-body > div:last-child > button {
            /*   flex: 1;*/
            margin: var(--margin);
        }

/*************************/
/**** Message Box CSS ****/
/*************************/
.msgbox {
    min-width: 28vw;
    margin: auto;
    max-width: 40vw;
}

    .msgbox > div {
        padding: var(--padding);
        margin: var(--margin2);
    }

#p_msgbox_message {
    padding: var(--padding);
    margin: var(--margin);
    text-align: center;
}

#div_msgbox_message {
    max-height: 80vh;
    overflow-y: auto;
}

#div_msgbox_button_ok {
    padding: var(--padding);
    margin: var(--margin);
    text-align: center;
}

#btn_msgbox_ok {
    padding-left: 3rem;
    padding-right: 3rem;
}

#div_msgbox_buttons {
    text-align: center;
    padding: var(--padding);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    #div_msgbox_buttons > button {
        margin: var(--margin);
        white-space: nowrap;
    }


@media (max-width: 1550px) {
    .msgbox {
        max-width: 60vw !important;
    }
}

@media (max-width: 1050px) {
    .msgbox {
        max-width: none !important;
    }
}

@media (max-width: 840px) {
    .msgbox {
        max-width: 80vw !important;
    }
}

@media (max-width: 676px) {
    .msgbox {
        height: fit-content !important;
        max-height: none !important;
        max-width: none !important;
        min-height: auto !important;
    }

    #div_msgbox_buttons {
        flex-direction: column;
    }

        #div_msgbox_buttons > button {
            margin: var(--margin) 0 !important;
        }
}

/*Tablet styling*/
@media (max-width: 840px) {
    .msgbox {
        height: fit-content !important;
        max-height: none !important;
        max-width: none !important;
        min-height: auto !important;
    }

    #div_msgbox_buttons {
        flex-direction: column;
    }

        #div_msgbox_buttons > button {
            margin: var(--margin) 0 !important;
        }
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #072F5F;
    padding-top: 5px;
    color: white;
}

    .copyright > div {
        display: flex;
        gap: 5px;
    }

        .copyright > div > a {
            color: white;
        }

        .copyright > div > span {
            margin-left: 0.5rem;
        }

.main-body {
    padding-top: var(--hedHeight);
    height: 100vh;
}

    .main-body.mobile {
        padding-bottom: var(--layout-navbar-height);
    }

.content-component {
    display: none; /* Hide all components by default */
}

    .content-component.active {
        display: block; /* Only the active component will be visible */
    }

.none-visibility {
    visibility: hidden;
}

.button-link {
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-weight: 600;
    background-color: unset;
    padding: unset;
    border: unset;
}

    button.button-link:hover {
        color: var(--color-text-tertiary-hover);
    }

    .button-link:hover,
    .button-link:focus,
    .button-link:active {
        background-color: unset;
    }

/* Body locked to prevent scrolling */
.body-locked {
    overflow: hidden !important;
}

/** Placeholder CSS **/
.placeholder {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
}

.placeholder-option {
    flex: 1;
    height: 100%;
    background-color: #e0e0e0;
    margin: 0 2px;
    border-radius: 8px;
}

    .placeholder-option.active {
        background-color: #d0d0d0; /* Slightly darker for visual distinction */
    }

.placeholder .placeholder-option {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite linear;
}

/* Shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}

.common-base-button-mobile {
    display: none;
}

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {
    .copyright > div {
        flex-direction: column;
        align-items: center;
        padding-bottom: 5px;
    }

    .main-body {
        padding-top: var(--layout-header-height-mobile);
    }

    .common-base-button-mobile {
        display: flex;
        position: sticky;
        bottom: -1px;
        padding: 1rem 1.2rem;
        background-color: var(--color-background-main);
        z-index: 2;
    }

        .common-base-button-mobile button {
            text-transform: uppercase;
            margin: 0 auto;
            width: 70%;
        }

    body.mobile .common-base-button-mobile {
        bottom: calc(var(--layout-navbar-height)) !important;
    }
}

.custom-radio {
    --rad-chk-bg-color: var(--color-background-main);
    --rad-chk-border-color: var(--color-disabled-soft);
    --rad-chk-checked-bg-color: var(--color-accent);

    display: flex;
}

    /* Hide the default radio button */
    .custom-radio input[type="radio"],
    .custom-radio input[type="checkbox"] {
        display: none;
    }

    /* Custom Radio Button */
    .custom-radio .checkmark {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: var(--rad-chk-bg-color); /* Default background */
        border: 2px solid var(--rad-chk-border-color); /* Default border */
        border-radius: 50%; /* Make it circular */
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .custom-radio input[type="radio"]:focus + .checkmark,
    .custom-radio input[type="checkbox"]:focus + .checkmark {
        outline: none;
        box-shadow: 0 0 4px 2px var(--rad-chk-checked-bg-color);
    }

    /* Checked State */
    .custom-radio input[type="radio"]:checked + .checkmark,
    .custom-radio input[type="checkbox"]:checked + .checkmark {
        background-color: var(--rad-chk-checked-bg-color); /* Red color */
        border: none;
    }

        /* Add the checkmark when checked */
        .custom-radio input[type="radio"]:checked + .checkmark::after,
        .custom-radio input[type="checkbox"]:checked + .checkmark::after {
            content: "";
            position: absolute;
            top: 44%;
            left: 50%;
            width: 6px;
            height: 11px;
            border: solid var(--rad-chk-bg-color); /* White checkmark */
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -50%) rotate(45deg);
        }
.checkRadio {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--colorText);
    user-select: none;
}

    /*style label to give some more space*/
    .checkRadio > label {
        position: relative;
        cursor: pointer;
        white-space: nowrap;
    }

    /*style and hide original checkbox*/
    .checkRadio > input {
        position: absolute;
        top: 0;
        left: 0;
        height: 0rem;
        width: 0rem;
        opacity: 0;
        cursor: pointer;
    }

        .checkRadio > input[type="radio"] + label::before,
        .checkRadio > input[type="checkbox"] + label::before {
            content: "";
            display: inline-block;
            vertical-align: -0.5rem;
            height: calc(var(--fontSize) * 1.65);
            width: calc(var(--fontSize) * 1.6);
            border: 2px solid #DDD;
            background-color: #FFF;
            margin-right: 0.5em;
        }

        .checkRadio > input[type="radio"] + label::before {
            border-radius: 50%;
        }

        .checkRadio > input[type="checkbox"] + label::before {
            border-radius: 8px;
        }

        .checkRadio > input[type="radio"] + label::after,
        .checkRadio > input[type="checkbox"] + label::after {
            content: "";
            position: absolute;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            height: 11px;
            width: 6px;
            left: 0;
            top: 0;
            transform: translate(163%, 51%) rotate(45deg);
            opacity: 0;
            z-index: 2;
            transition: opacity 0.2s ease-in-out;
        }

        .checkRadio > input:disabled + label {
            opacity: 0.65;
        }

            .checkRadio > input:disabled + label::before {
                opacity: 0.35;
            }

        /*reveal check for 'on' state*/
        .checkRadio > input:checked + label::before {
            background-color: var(--checkboxColorBackground);
            border: none;
        }

        .checkRadio > input:checked + label::after {
            opacity: 1;
        }

        /*focus styles*/
        .checkRadio > input:focus + label::before {
            outline: none;
            border: 2px solid var(--colorText);
        }

.dark-mode{

}
.darkIconSt0 {
    fill: var(--colorText);
}

.darkIconS1 {
    fill: #fefefe;
    stroke: var(--colorText);
    stroke-width: 30;
    stroke-miterlimit: 10;
}

.darkIconS2 {
    stroke: var(--colorText);
    stroke-width: 30;
    stroke-miterlimit: 10;
}

button {
    --button-color: var(--color-button-text);
    --button-color-active: var(--btnColorActive);
    --button-color-disabled: var(--btnColorDisabled);
    --button-color-secondary: var(--color-accent);

    --button-bg-color: var(--color-button-background);
    --button-bg-color-active: var(--btnColorBgActive);
    --button-bg-color-disabled: var(--color-button-background-hover);
    --button-bg-color-secondary: var(--color-background-main);
    --button-bg-color-secondary-hover: var(--color-background-secondary);

    --button-border-color-secondary: var(--color-disabled-soft);

    --button-radius: var(--radius);
    --button-font: var(--fontButton);

    color: var(--button-color);
    background-color: var(--button-bg-color);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--button-radius);
    font: var(--button-font);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition-property: background-color;
    transition-duration: 0.3s;
}

    button:hover, button:focus, button:active {
        background-color: var(--color-button-background-hover);
    }

    button:active {
        color: var(--button-color-active);
        background-color: var(--button-bg-color-active);
    }

    button:disabled {
        color: var(--button-color-disabled);
        background-color: var(--button-bg-color-disabled);
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.7;
    }

    button.underline {
        background-color: unset;
        padding: unset;
        border: unset;
        font-size: unset;
        text-decoration: underline;
        color: var(--color-accent);
        font-weight: bold;
    }

        button.underline:active {
            background-color: unset;
        }

    button.secondary {
        color: var(--button-color-secondary);
        background-color: var(--button-bg-color-secondary);
        border: 2px solid var(--button-border-color-secondary);
        padding: 0.5rem 1rem;
        border-radius: var(--button-radius);
        cursor: pointer;
        font-weight: bold;
    }

    button.secondary:hover, button.secondary:focus, button.secondary:active {
        background-color: var(--button-bg-color-secondary-hover);
    }

.cta-button {
    padding: 0.618em 1em;
    min-width: 100%;
    min-height: 48px;
}

@media (min-width: 640px) {
  .cta-button {
    min-width: 321px;
  }
}

.fancy-title {
    --fancy-title-first-color: var(--color-button-background);
    --fancy-title-alt-color: var(--color-accent);

    font-size: 5rem;
    display: inline-block;
    margin: 0.125em auto;
}

    .fancy-title > *:first-child {
        color: var(--fancy-title-first-color);
        text-transform: unset;
        font-family: 'Roshelyn', Arial, sans-serif;
        font-weight: 500;
        height: 0.85em;
        position: relative;
    }

    .fancy-title > div:not(:first-child) {
        color: var(--fancy-title-alt-color);
        text-transform: uppercase;
        font-family: 'FilsonPro', Arial, sans-serif;
        font-size: 0.9em;
        font-weight: 900;
    }

    .fancy-title:lang(en) {
    }

    .fancy-title:lang(es) {
    }

    .fancy-title > div {
        font-size: 0.8em;
    }

.fancy-subtitle {
    --fancy-title-subtitle-color: var(--color-text-tertiary);
    --fancy-title-subtitle-color-alt: var(--color-accent);

    font-weight: 800;
    color: var(--fancy-title-subtitle-color);
    margin-bottom: 1em;
    line-height: 1.6;
    font-family: 'FilsonPro', Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
}

    .fancy-subtitle .highlight {
        color: var(--fancy-title-subtitle-color-alt);
        font-weight: 500;
        font-size: 1.2em;
        font-family: 'Roshelyn', Arial, sans-serif;
        text-transform: lowercase;
    }
.loader-overlay-wrapper {
    --loader-head-color: var(--color-button-background);
    --loader-tail-color: var(--color-button-background);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--loader-head-color), 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--loader-tail-color));
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}
[id*=dimmer] {
    --dimmer-color: rgba(32,32,32, 0.5);
    --blur: 10px;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 12;
    opacity: 0;
    transition: opacity var(--fade) ease;
    background-color: var(--dimmer-color);
    backdrop-filter: blur(var(--blur));
}

    [id*=dimmer].on {
        opacity: 1;
    }
.pure-material-progress-circular {
    --progress-color: var(--color-button-background);

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    padding: 0.25em;
    width: 80px;
    height: 80px;
    color: var(--progress-color);
    background-color: transparent;
    font-size: 16px;
    overflow: hidden;
}

.pure-material-progress-circular-small {
    width: 24px;
    height: 24px;
}

    .pure-material-progress-circular::-webkit-progress-bar {
        background-color: transparent;
    }

    /* Indeterminate */
    .pure-material-progress-circular:indeterminate {
        -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
        mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
        animation: pure-material-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
    }

    :-ms-lang(x), .pure-material-progress-circular:indeterminate {
        animation: none;
    }

        .pure-material-progress-circular:indeterminate::before,
        .pure-material-progress-circular:indeterminate::-webkit-progress-value {
            content: "";
            display: block;
            box-sizing: border-box;
            margin-bottom: 0.25em;
            border: solid 0.25em transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            width: 100% !important;
            height: 100%;
            background-color: transparent;
            animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
        }

        .pure-material-progress-circular:indeterminate::-moz-progress-bar {
            box-sizing: border-box;
            border: solid 0.25em transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            background-color: transparent;
            animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
        }

        .pure-material-progress-circular:indeterminate::-ms-fill {
            animation-name: -ms-ring;
        }

@keyframes pure-material-progress-circular {
    0% {
        transform: rotate(0deg);
    }

    12.5% {
        transform: rotate(180deg);
        animation-timing-function: linear;
    }

    25% {
        transform: rotate(630deg);
    }

    37.5% {
        transform: rotate(810deg);
        animation-timing-function: linear;
    }

    50% {
        transform: rotate(1260deg);
    }

    62.5% {
        transform: rotate(1440deg);
        animation-timing-function: linear;
    }

    75% {
        transform: rotate(1890deg);
    }

    87.5% {
        transform: rotate(2070deg);
        animation-timing-function: linear;
    }

    100% {
        transform: rotate(2520deg);
    }
}

@keyframes pure-material-progress-circular-pseudo {
    0% {
        transform: rotate(-30deg);
    }

    29.4% {
        border-left-color: transparent;
    }

    29.41% {
        border-left-color: currentColor;
    }

    64.7% {
        border-bottom-color: transparent;
    }

    64.71% {
        border-bottom-color: currentColor;
    }

    100% {
        border-left-color: currentColor;
        border-bottom-color: currentColor;
        transform: rotate(225deg);
    }
}

.dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: var(--color-background-main);
    flex-direction: column;
    align-items: center;
    width: min(80vw, 45em);
    height: fit-content;
    text-align: center;
    border-radius: 1em !important;
    z-index: 13;
    transform: translate(-50%, -50%);
    padding: 2em;
    box-shadow: 0px 0px 15px -5px black;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .dialog.open {
        opacity: 1;
    }

.dialog-message {
    padding-bottom: 0.618em;
    font-size: 1.25em;
    font-weight: 500;
}

.dialog-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    margin-top: 1em;
}

    .dialog-buttons > button {
        text-transform: uppercase;
        padding: 0.618em 1em;
        min-width: 6em;
    }

@media(max-width: 600px) {
    .dialog {
        width: min(90vw, 45em);
    }

    .dialog-buttons > button {
        flex: 1;
    }
}
.timed-message {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.timed-message.on {
    opacity: 1;
}

.timed-message .main {
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    padding: 0 1rem;
}

#page_account {
    --account-header-background-color: var(--color-background-primary);
    --account-edit-color: var(--color-text-tertiary);
}

#page_account.open {
    display: flex;
    flex-direction: column;
}

#page_account .section-header {
    background: var(--account-header-background-color);
    height: 32px;
    font-weight: bold;
    width: 100%;
    display: flex;
    padding: 0 1.5em;
    align-items: center;
    font-size: 16px;
}

#page_account hr {
    opacity: 0.25;
}

#page_account .section-header-edit {
    margin-left: auto;
    color: var(--account-edit-color);
    font-size: 0.75em;
    cursor: pointer;
}

    #page_account .section-header-edit:hover {
        opacity: 0.5;
    }

#page_account .section-content {
    padding: 1em 2em;
    max-width: 50em;
    margin: auto;
}

@media(min-width: 40em) {
    #page_account .section-item {
        padding: 0.5em 0;
        display: flex;
        justify-content: space-between;
    }
}

#page_account .section-item {
    padding: 0.5em 0;
}

#page_account .section-item-label {
    font-size: 0.85em;
    font-weight: 500;
}

#page_account .section-item-value {
    font-weight: 500;
}

#page_account .empty {
    font-weight: 400;
}

#page_account button {
    display: block;
    width: 30em;
    max-width: 90%;
    margin: auto;
    text-transform: uppercase;
}

#page_account .payment-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em 0;
}

    #page_account .payment-type .name {
        font-weight: bold;
    }

    #page_account .payment-type .expiration {
        font-size: 0.9em;
    }

    #page_account .payment-type .remove {
        font-weight: 600;
        font-size: 0.8em;
        color: var(--account-edit-color);
    }

        #page_account .payment-type .remove:hover {
            opacity: 0.5;
        }

#account_notifications .section-content {
    width: 100%;
}

    #account_notifications .section-content > * {
        display: flex;
        padding: 0.5em;
    }

:is(#account_notifications_text_value, #account_notifications_email_value) {
    display: inline-block;
    margin-right: 1em;
}

#page_account #btn_account_delete {
    border: 3px solid currentColor;
    margin: auto auto 2em auto;
}

#account_credit_history_value {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#account_credit_history_value .credit-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#account_credit_history_value .credit-history-item .name {
    font-weight: 500;
    flex: 1;
}

#account_credit_history_value .credit-history-item .date {
    font-size: small;
}

@media(max-width: 600px) {
    #account_credit_history_value .credit-history-item .name {
        font-weight: 500;
        flex: 1;
        max-width: 220px;
    }
}
[id^="page_"] {
    --page-bg-color: var(--color-background-main);

    flex-grow: 1;
    background-color: var(--page-bg-color);
    transition: display 100ms ease;
}

    [id^="page_"]:not(.open) {
        opacity: 0;
        display: none;
        pointer-events: none;
    }

body:not(.mobile) [id^="page_"] {
    min-height: calc(100dvh - var(--layout-header-height))
}

@media (max-width: 480px) {
    body:not(.mobile) [id^="page_"] {
        min-height: calc(100dvh - var(--layout-header-height-mobile));
    }
}
#page_favorites .menu-tabs {
    --menu-tabs-bar-background-color: var(--color-background-secondary);
}

/* Outer Container */
.no-fav-container {
    --favorite-none-background-color: var(--color-background-secondary);
    --favorite-none-color: var(--color-text-tertiary);

    padding: 1rem 1.25rem;
    text-align: center;
    width: 75%;
    justify-self: center;
}

/* Card */
.no-fav-card {
    background-color: var(--favorite-none-background-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 1rem;
    width: 50%;
    justify-self: center;
}

/* Heading Text */
.no-fav-heading {
    color: var(--favorite-none-color);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    padding: 0 2rem;
}

/* Instruction Text */
.no-fav-instructions {
    color: var(--favorite-none-color);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: left;
}

/* Button */
.no-fav-button {
    width: 50%;
    transition: 0.5s ease;
    grid-column: 1 / -1;
    justify-self: center;
}

    .no-fav-button:hover {
        color: var(--color-text-primary);
        border-color: var(--color-text-primary);
    }

.no-fav-button .w-100 {
    width: 100%;
}

#div_favorite_tabs .tabs-bar {
    background-color: var(--color-background-secondary);
}

/* Favorites container */
.favorite-container {
    --favorite-card-background-color: var(--color-background-secondary);
    --favorite-card-missing-mod-color: var(--color-error);

    --favorite-card-icon-background-color: var(--color-background-main);
    --favorite-card-icon-color: var(--color-text-tertiary);
    --favorite-card-icon-color-hover: var(--color-accent);

    padding: 1rem 1.25rem;
    padding-bottom: calc(var(--layout-order-type-navbar-height) + 10px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* Favorite Item Card */
.favorite-item-card {
    background-color: var(--favorite-card-background-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wrapper for image and favorite icon */
.favorite-item-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px 8px 0 0; /* Match card's top corners */
}

/* Item Image */
.favorite-item-image {
    width: 100%; /* Ensure it fits within the card */
    height: 200px;
    object-fit: cover;
}

/* Missing Mods Message */
.missing-mods-message {
    font-size: 0.85rem;
    color: var(--favorite-card-missing-mod-color);
    font-weight: 500;
}

@media (max-width: 768px) {
    /* Favorite Item Card */
    .favorite-item-card {
        margin-bottom: 1rem;
    }

    /* Item Image */
    .favorite-item-image {
        height: auto;
    }

    #favorite-item-icon:hover {
        color: var(--favorite-card-icon-color-hover);
    }

    .no-fav-container{
        width: 100%;
        padding-bottom: calc(var(--layout-order-type-navbar-height) + 10px);
    }

    .no-fav-card{
        width: 100%;
    }

    .no-fav-button {
        width: 100%;
    }
}

/* Details Container */
.favorite-item-details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0;
    flex-grow: 1;
}

/* Item Name */
.favorite-item-name {
    font-size: .95rem;
    font-weight: bold;
    color: var(--color-text-primary);
    margin: 0;
}

/* Item Modifiers/Description */
.favorite-item-description {
    font-size: 0.85rem;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 550;
}

/* Item Price */
.favorite-item-price {
    font-size: .95rem;
    color: var(--color-text-primary);
    font-weight: bold;
}

/* Button Container */
.favorite-item-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
}

    .favorite-item-buttons > button {
        flex: 1;
    }

/* Customize Button */
.customize-button {
    transition: .5s ease;
}

/* Add to Order Button */
.add-to-order-button {
    transition: .5s ease;
}

/* Main card container */
.favorite-store-card {
    --favorite-store-card-background-color: var(--color-background-secondary);
    --favorite-store-card-hours-color: var(--color-text-secondary);

    background-color: var(--favorite-store-card-background-color);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Container for store information */
.store-info {
    margin-bottom: 1rem;
}

/* Store name styling */
.favorite-store-name {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

/* Store address styling */
.favorite-store-address {
    font-size: 14px;
}

.favorite-store-address.top {
    margin-top: .5rem;
}

.favorite-store-address.bottom {
    margin-bottom: .5rem;
}

/* Store hours styling */
.favorite-store-hours {
    font-size: 14px;
    color: var(--favorite-store-card-hours-color);
    margin-bottom: 1rem;
}

/* Button container */
.favorite-store-button-container {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
}

/* Base button styles */
.favorite-store-order-button {
    padding: 0.5rem !important;
    font-size: 0.9rem;
    transition: .5s ease;
}

    .favorite-store-order-button:hover {
        color: var(--color-text);
        border-color: var(--color-text);
    }

/* Single button (100% width) */
.favorite-store-order-button-single {
    width: 100%;
    border: none;
}

/* Two buttons */
.favorite-store-order-button-delivery {
    width: 50%;
    border: none;
}

.favorite-store-order-button-secondary {
    width: 50%;
}

/* Three buttons (33% width) */
.favorite-store-order-button-three {
    width: 33%;
}

/* Favorite icon button */
.icon-heart-filled.favorites {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    background-color: var(--favorite-card-icon-background-color);
    padding: 10px;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--favorite-card-icon-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    cursor: pointer;
}

    .icon-heart-filled.favorites:hover {
        color: var(--favorite-card-icon-color-hover);
    }
.tabs-bar {
    --tab-bar-text-color: var(--color-text-tertiary);
    --tab-bar-text-color-active: var(--color-accent);

    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    height: 40px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE & Edge) */
}

    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .tabs-bar::-webkit-scrollbar {
        display: none;
    }

.tab-bar-tab {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--tab-bar-text-color);
    outline: none;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    border-radius: 0;
}

    .tab-bar-tab.active {
        color: var(--tab-bar-text-color-active);
        border-bottom: 3px solid var(--tab-bar-text-color-active);
    }

    .tab-bar-tab:focus, 
    .tab-bar-tab:active {
        background-color: unset;
    }

@media (hover: hover) {
    .tab-bar-tab:hover {
        color: var(--tab-bar-text-color-active);
        background-color: unset;
    }
}
.arrow-scroller-container {
    --arrow-bg-color: var(--color-background-main);
    --arrow-bg-color-hover: rgba(145, 122, 122, 0.133);

    position: relative;
    width: 100%;
}

    .arrow-scroller-container .arrow-scroll {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        width: 6rem;
        height: 103%;
        padding: 0.5rem;

        display: flex;
        align-items: center;
    }

        .arrow-scroller-container .arrow-scroll.hide {
            display: none;
        }

        .arrow-scroller-container .arrow-scroll:first-child {
            background: linear-gradient(to right, var(--arrow-bg-color) 60%, transparent);
            left: -2px;
        }

        .arrow-scroller-container .arrow-scroll:last-child {
            justify-content: flex-end;
            right: -2px;
            background: linear-gradient(to left, var(--arrow-bg-color) 60%, transparent);
        }

        .arrow-scroller-container .arrow-scroll .prev-arrow,
        .arrow-scroller-container .arrow-scroll .next-arrow {
            width: 2.4em;
            height: 2.4em;
            border-radius: 50%;
            text-align: center;
            align-content: center;
        }

        .arrow-scroller-container .arrow-scroll .next-arrow {
            transform: rotate(180deg);
        }

@media (hover: hover) {
    .arrow-scroller-container .arrow-scroll span:hover {
        background: var(--arrow-bg-color-hover);
        cursor: pointer;
    }
}
    
@media (max-width: 480px) {
    .arrow-scroller-container {
        margin: 0;
    }

        .arrow-scroller-container .arrow-scroll {
            padding: 0.5rem 0;
            width: 1rem;
        }

            .arrow-scroller-container .arrow-scroll:first-child {
                display: none;
            }

            .arrow-scroller-container .arrow-scroll:last-child {
                display: none;
            }

            .arrow-scroller-container .arrow-scroll .prev-arrow,
            .arrow-scroller-container .arrow-scroll .next-arrow {
                display: none;
            }
}
.main-body.mobile .landing-main-container {
    padding-bottom: var(--layout-navbar-height);
}

.landing-main-container {
    --landing-location-color-hover: var(--color-text-secondary);
    --landing-bullet-bg-color-active: var(--color-accent);

    display: flex;
    flex-direction: column;
}

/* Container for centering everything */
.toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em 0;
}

.order-type-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pickup info styling */
.location-info-btn {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 320px;
    /* Remove inherited button styles */
    background-color: transparent;
    padding: 0;
    border: none;
}

    .location-info-btn:hover,
    .location-info-btn:focus {
        color: var(--landing-location-color-hover);
        background-color: unset;
    }

    .location-info-btn:active {
        outline: none;
        background-color: transparent; /* No background color on click */
    }

    .location-info-btn img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .location-info-btn span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.order-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    bottom: 20px;
    padding: 1rem 1.2rem;
    z-index: 2;
}

    .order-button-container button {
        margin: 1em 0;
        border: 2px solid var(--page-bg-color);
    }

.mobile .order-button-container {
    bottom: var(--layout-navbar-height);
}

.banner-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#div_landing_banner_mobile_parent {
    display: none !important;
}

/* Set a fixed width and height for the swiper container */
.swiper-container {
    width: 100%; /* Or a specific width like 600px */
    overflow: hidden; /* Ensures any overflowed content is hidden */
    position: relative;
    height: 74dvh;
    padding-bottom: 2rem;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, -1px) !important;
}

.swiper-pagination {
    z-index: 2 !important;
}

/* Make sure each slide/image fits the container dimensions */
.swiper-slide img {
    display: flex;
    margin: 0 auto;
    height: 100%;
    object-fit: contain; /* Crop to fill the area, or use `contain` to fit fully */
    cursor: pointer;
}

.bullet-active {
    background-color: var(--landing-bullet-bg-color-active) !important;
    opacity: 0.9 !important;
}

.toggle-placeholder {
    width: 375px;
    max-width: 95dvw;
    height: 36px;
}

.landing-location-placeholder {
    width: 280px;
    height: 23px;
    margin-top: 10px;
}

.banner-placeholder {
    width: 50vw;
    height: 65vh;
    margin: 0 auto;
}

@media (max-width: 639px) {
    /* styles for screens narrower than 640px */
    #btn_landing_order_now_float {
        min-width: 20%;
    }
}

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {
    .order-button-container {
        display: none !important;
    }

    .swiper-slide img {
        margin: 0;
        width: 100%;
    }

    .banner-placeholder {
        width: 100%;
        height: 65vh;
    }

    #div_landing_banner_desktop_parent {
        display: none !important;
    }

    #div_landing_banner_mobile_parent {
        display: flex !important;
        flex: 1;
    }

    .swiper-container {
        height: unset;
        max-height: 72dvh;
        padding-bottom: 2rem;
    }

    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: var(--swiper-pagination-bottom, 2px) !important;
    }
}

/**
 * Swiper 11.2.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 3, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Flip slide shadows end */
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}

/* Toggle button wrapper */
.segmented-button {
    --segmented-button-bg-color: var(--color-background-main);
    --segmented-button-bg-color-hover: var(--color-accent-hover);
    --segmented-button-bg-color-active: var(--color-accent);

    --segmented-button-border-color: var(--color-border-default);
    --segmented-button-active-text-color: var(--color-background-main);

    display: flex;
    border: 1px solid var(--segmented-button-border-color);
    border-radius: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE & Edge) */
}

    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .segmented-button::-webkit-scrollbar {
        display: none;
    }

    /* Toggle buttons */
    .segmented-button > button {
        text-transform: uppercase;
        white-space: nowrap;
        padding: 6px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: var(--segmented-button-bg-color);
        border: none;
        outline: none;
        font-weight: bold;
        flex: 1;
        transition: color, background-color 0.3s ease;
        border-radius: 0;
    }

    .segmented-button > button:focus, 
    .segmented-button > button:active {
        background-color: unset;
    }

        .segmented-button > button:first-of-type {
            border-top-left-radius: var(--radius);
            border-bottom-left-radius: var(--radius);
        }

        .segmented-button > button:last-of-type {
            border-top-right-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }

        .segmented-button > button.active {
            background-color: var(--segmented-button-bg-color-active);
            color: var(--segmented-button-active-text-color);
        }

            .segmented-button > button.active span:before {
                color: var(--segmented-button-active-text-color);
            }

        .segmented-button > button:not(.active):hover {
            color: var(--segmented-button-active-text-color);
            background-color: var(--segmented-button-bg-color-hover);
        }

/* Container Setup */
.locations-main-container {
    --locations-search-border-color: var(--color-border-default);
    --locations-search-icon-color: var(--color-accent);

    --locations-selector-color: var(--color-text-tertiary);
    --locations-selector-color-hover: var(--color-text-tertiary-hover);
    --locations-selector-color-active: var(--color-accent);
    --locations-selector-color-active-hover: var(--color-accent-hover);

    --locations-card-bg-color: var(--color-background-main);
    --locations-card-bg-color-active: var(--color-background-primary);
    --locations-card-border-color: var(--color-border-default);
    --locations-card-secondary-text-color: var(--color-text-secondary);

    --locations-address-form-border-color: var(--color-border-default);
    --locations-address-form-limited-time-error: var(--color-error);
    --locations-address-form-required: var(--color-error);
    --locations-address-form-optional: var(--color-text-optional);

    --locations-map-placeholder-bg-color: var(--color-background-main);

    --locations-info-header-color: var(--color-text-primary);
    --locations-info-body-color: var(--color-text-secondary);
    --locations-info-hours-color: var(--color-text-secondary);

    width: 100%;
    display: flex;
    flex-grow: 1;
}

.locations-container {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

/* Sidebar Styles */
.sidebar {
    padding: 20px;
    background-color: var(--page-bg-color);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.locations-delivery-list {
    max-height: 75vh;
    overflow-y: auto;
}

    .locations-delivery-list .active {
        background-color: var(--locations-card-bg-color-active);
    }

/* Search Box */
.search-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--locations-search-border-color);
    border-radius: var(--radius);
    padding-left: 10px;
    background-color: var(--page-bg-color);
    width: 100%;
    margin-bottom: 20px;
}

/* Search Icon */
.search-icon {
    color: var(--locations-search-icon-color);
    font-size: 23px;
    margin-right: 3px;
}

/* Search Input */
.search-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;
    width: 100%;
}

/* Store List */
.store-list {
    flex-grow: 1;
    margin-bottom: 20px;
}

.store-list-selector {
    display: flex;
    cursor: pointer;
}

    .store-list-selector > div {
        padding: 0.5rem 1rem;
        flex: 1;
        display: flex;
        justify-content: center;
        color: var(--locations-selector-color);
        border-bottom: 1.5px solid currentColor;
        font-weight: 600;
        text-transform: uppercase;
    }

        .store-list-selector > div:hover {
            color: var(--locations-selector-color-hover);
            border-bottom: 1.5px solid currentColor;
        }

        .store-list-selector > div.active {
            color: var(--locations-selector-color-active);
            border-bottom: 3px solid currentColor;
        }

            .store-list-selector > div.active:hover {
                color: var(--locations-selector-color-active-hover);
                border-bottom: 3px solid currentColor;
            }

#div_locations_store_list,
#div_locations_store_favorites {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    overflow-y: auto;
    max-height: 60vh;
    scrollbar-width: thin !important; /* Firefox */
    scrollbar-color: #d4d4d4 #ffffff; /* Firefox */
}

    #div_locations_store_list.signed-in,
    #div_locations_store_favorites.signed-in {
        max-height: 52vh;
    }

    /* Chrome, Edge, Safari */
    #div_locations_store_list::-webkit-scrollbar,
    #div_locations_store_favorites::-webkit-scrollbar {
        width: 3px;
    }

    #div_locations_store_list::-webkit-scrollbar-track,
    #div_locations_store_favorites::-webkit-scrollbar-track {
        background: #ffffff;
    }

    #div_locations_store_list::-webkit-scrollbar-thumb,
    #div_locations_store_favorites::-webkit-scrollbar-thumb {
        background-color: #d4d4d4;
        border-radius: 10px;
        border: 2px solid #ffffff;
    }

.order-type-locations-toggle {
    margin-bottom: 1rem;
}

.store-address {
    display: flex;
    flex-direction: column;
    padding: 10px 1rem;
    line-height: 1.4;
    cursor: pointer;
    border-radius: var(--radius);
    border: 2px solid var(--locations-card-border-color);
    background-color: var(--locations-card-bg-color);
    transition: background-color 0.125s ease-in-out;
}

    .store-address[disabled] {
        pointer-events: none;
    }

    .store-address > div:first-of-type {
        display: flex;
        gap: 10px;
    }

    .store-address[disabled] > div:first-of-type {
        opacity: 60%;
    }

    .store-address .store-error {
        color: var(--color-error);
        font-weight: 700;
        font-size: 12px;
        margin-top: 2px;
    }

    .store-address .store-section {
        flex: 1;
    }

    .store-address .favorite-section {
        padding: 0.5rem;
    }

        .store-address .favorite-section span {
            font-size: 20px;
        }

    .store-address:hover {
        background-color: var(--locations-card-bg-color-active);
    }

    .store-address.active {
        background-color: var(--locations-card-bg-color-active);
    }

.store-section h4 {
    text-transform: uppercase;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
}

.store-section h3 {
    text-transform: uppercase;
    margin: 0;
    font-weight: bold;
    font-size: 12px;
}

.store-section p {
    color: var(--locations-card-secondary-text-color);
    font-size: 12px;
}

    .store-section p:last-of-type {
        text-transform: capitalize;
        margin-top: 7px;
        font-size: 11px;
    }

.user-address {
    padding: 10px 1rem;
    line-height: 1.4;
    cursor: pointer;
    border-radius: var(--radius);
    border: 2px solid var(--locations-card-border-color);
    margin-bottom: 10px;
    display: flex;
    background-color: var(--locations-card-bg-color);
    transition: background-color 0.125s ease-in-out;
}

    .user-address:last-of-type {
        margin-bottom: 0px;
    }

    .user-address h4 {
        text-transform: uppercase;
        margin: 0;
        font-weight: bold;
        font-size: 14px;
    }

    .user-address h3 {
        text-transform: uppercase;
        margin: 0;
        font-weight: bold;
        font-size: 12px;
    }

    .user-address p {
        color: var(--locations-card-secondary-text-color);
        font-size: 12px;
    }

        .user-address p:last-of-type {
            margin-top: 4px;
        }

    .user-address:hover {
        background-color: var(--locations-card-bg-color-active);
    }

    .user-address.active {
        background-color: var(--locations-card-bg-color-active);
    }

    .user-address-delete {
        font-size: 0.75em;
        font-weight: 500;
        margin-left: auto;
        align-self: center;
    }

    .user-address-delete:hover {
        opacity: 0.5;
    }

.locations-list-placeholder {
    flex-direction: column;
    width: 100%;
    height: 400px;
    gap: 5px;
    margin-top: 15px;
}

    .locations-list-placeholder > div {
        height: 77px;
    }

.location-store-marker {
    display: grid;
    grid-template-rows: 5.5px auto;
    justify-items: center;
    width: 26px;
    height: 38px;
}

.location-store-marker-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 12px;
    color: var(--color-button-background);
}

/* New Address Form */
.address-form {
    border: 2px solid var(--locations-address-form-border-color);
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 10px;
    background-color: var(--locations-card-bg-color);
    transition: background-color 0.125s ease-in-out;
}

    .address-form:hover {
        background-color: var(--locations-card-bg-color-active);
    }

.address-form-header {
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertically center the items */
    justify-content: center; /* Center text in the parent div */
    position: relative;
    font-weight: 600;
    padding: 1rem 1rem 14px 1rem;
    text-align: center;
}

    .address-form-header .text {
        flex: 1; /* Take up all available space to push the icon to the right */
        text-align: center; /* Center text horizontally */
    }

    .address-form-header .icon-arrow-back {
        position: absolute;
        right: 27px; /* Adjust spacing from the right edge */
        transform: rotate(90deg); /* Rotate the icon */
        transition: transform 0.5s ease;
    }

    .address-form-header.open .icon-arrow-back {
        transform: rotate(-90deg); /* Rotate the icon */
        transition: transform 0.5s ease;
    }

.address-form-out-of-limited-time {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: var(--locations-address-form-limited-time-error);
}

.address-form-content {
    overflow: hidden; /* Prevent content overflow */
    max-height: 0; /* Collapsed by default */
    padding: 0 10px; /* Collapsed padding */
    margin: 0;
    opacity: 0; /* Start invisible */
    transition: max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease, opacity 0.5s ease; /* Smooth transition */
}

    .address-form-content.open {
        max-height: 500px; /* Adjust to fit your content's maximum height */
        opacity: 1; /* Fully visible */
        padding: 0 10px 10px 10px;
        margin: 0 1rem 0.6rem 1rem;
        transition: max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease, opacity 0.5s ease; /* Smooth transition */
    }

.address-form-input-section .form-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.address-form-input-section {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

    .address-form-input-section input {
        font-size: 0.9rem;
        border-radius: var(--radius);
        width: 100%;
    }

    .address-form-input-section .required {
        color: var(--locations-address-form-required);
    }

    .address-form-input-section .optional {
        color: var(--locations-address-form-optional);
        font-size: 0.7rem;
    }

/* Order Button */
#btn_locations_order_now {
    align-self: center;
}

/* Map Area */
.map-area {
    flex: 3;
}

#div_locations_map {
    width: 100%;
    height: 100%;
    background-color: var(--locations-map-placeholder-bg-color); /* Placeholder color */
}

/* Google InfoWindow */
.gm-ui-hover-effect {
    transform: scale(0.8);
}

.gm-style-iw-chr {
    font-size: 10px;
    height: 0;
}

.gm-style-iw-d {
    overflow: hidden !important;
}

div.gm-style-iw {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.locations-info-window {
    font: var(--fontBody);
    width: 225px;
    line-height: 1.3;
    margin: 12px;
}

    .locations-info-window h2 {
        font-size: 15px;
        color: var(--locations-info-header-color);
        margin: 0;
    }

    .locations-info-window h3 {
        font-size: 13px;
        color: var(--locations-info-header-color);
        margin: 0;
    }

    .locations-info-window p {
        font-size: 13px;
        color: var(--locations-info-body-color);
        margin: 5px 0;
    }

    .locations-info-window > div:first-of-type {
        margin-top: 10px;
    }

    .locations-info-window ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

    .locations-info-window li {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: var(--locations-info-hours-color);
    }

/* Smartphones, portrait and landscape */
@media (orientation: portrait) {
    .locations-main-container.delivery .locations-delivery-list {
        margin-top: 55px;
    }

    .locations-main-container.delivery .map-area {
        display: none;
    }

    .locations-container {
        flex-direction: column;
    }

    .sidebar {
        order: 2;
        flex: 1.5;
    }

    .map-area {
        order: 1;
        flex: 1;
    }

    .gm-style-iw-d {
        overflow-y: auto !important;
    }

    .order-type-locations-toggle {
        position: absolute;
        top: calc(var(--layout-header-height-mobile) + 1em);
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
    }

    .search-container {
        margin-bottom: 5px;
    }

    .mobile #div_locations_store_list,
    .mobile #div_locations_store_favorites {
        max-height: 31vh !important;
    }

    #div_locations_store_list,
    #div_locations_store_favorites {
        max-height: 36dvh;
    }

        #div_locations_store_list.signed-in,
        #div_locations_store_favorites.signed-in {
            max-height: 34vh;
        }

    .mobile #div_locations_delivery_list {
        max-height: 35vh;
    }

    #div_locations_delivery_list {
        max-height: 40dvh;
    }

    #div_locations_delivery_list.map-hidden {
        max-height: 75vh;
    }
}

.custom-dropdown-list {
    display: none;
    position: absolute;
    background-color: var(--colorBg);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radius);
    z-index: 1000;
}

.custom-dropdown-item {
    padding: 8px;
    cursor: pointer;
}

    .custom-dropdown-item:hover {
        background-color: var(--colorDatalistHover);
    }

    .custom-dropdown-item.active {
        background-color: var(--colorDatalistHover);
    }

#page_menu {
    --menu-tabs-bar-background-color: var(--color-background-secondary);
    --menu-categories-bar-background-color: var(--color-background-main);
}

.main-body.mobile .menu-main-container {
    padding-bottom: var(--layout-navbar-height);
}

.menu-tabs {
    padding: 0 7rem;
    background-color: var(--menu-tabs-bar-background-color);
    position: sticky;
    top: var(--layout-header-height);
    z-index: 9;
}

    .menu-tabs .arrow-scroller-container .arrow-scroll:first-child {
        background: linear-gradient(to right, var(--menu-tabs-bar-background-color) 60%, transparent);
    }

    .menu-tabs .arrow-scroller-container .arrow-scroll:last-child {
        background: linear-gradient(to left, var(--menu-tabs-bar-background-color) 60%, transparent);
    }

.placeholder-menu .placeholder-categories-bar {
    display: flex;
    gap: 0.6rem;
}

.placeholder-menu .placeholder-menu-tabs {
    height: 32px;
    min-width: 75px;
}

    .placeholder-menu .placeholder-menu-tabs > div {
        border-radius: 54px;
        margin: 0;
    }

.placeholder-menu .placeholder-menu-category-header {
    width: 200px;
    height: 39px;
    margin-bottom: 15px;
    padding: 0 15px;
}

    .placeholder-menu .placeholder-menu-category-header > div {
        margin: 0;
    }

.placeholder-menu .placeholder-menu-card {
    height: 320px;
    width: 100%;
}

    .placeholder-menu .placeholder-menu-card > div {
        border-radius: 8px;
        margin: 0;
    }

.meal-deal-items-parent {
    padding: 20px 7rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(475px, calc((100% - (16px * 9)) / 10)));
    justify-content: center;
    gap: 16px;
}

.categories-bar {
    position: sticky;
    z-index: 8;
    top: calc(var(--layout-header-height) + 40px);
    padding: 10px 7rem;
    background-color: var(--menu-categories-bar-background-color);
}

    .categories-bar.scrolled {
        box-shadow: var(--shadow);
    }

    .categories-bar div > button {
        height: 32px;
    }

.menu-parent-wrapper {
    padding: 20px 7rem;
}

.category-header {
    display: flex;
    margin-bottom: 15px;
}

    .category-header > div {
        flex: 1;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 26px;
    }

    .category-header > button {
        display: none;
    }

.menu-item-card-parent {
    display: grid;
    margin-bottom: 50px;
    overflow: hidden;
    row-gap: 35px;
    column-gap: 20px;
    width: 100%;
    padding: 0.5rem;
}

/* Base styles that automatically adjust columns */
@media (min-width: 1720px) {
    .menu-item-card-parent {
        grid-template-columns: repeat(auto-fit, minmax(var(--itmvWidth), calc((100% - (var(--itemGapWidth) * 4)) / 5)));
    }
}

@media (max-width: 1720px) {
    .menu-item-card-parent {
        grid-template-columns: repeat(auto-fit, minmax(280px, calc((100% - (20px * 3)) / 4)));
    }
}

@media (max-width: 1420px) {
    .menu-item-card-parent {
        grid-template-columns: repeat(auto-fit, minmax(280px, calc((100% - (20px * 2)) / 3)));
    }
}

@media (max-width: 1120px) {
    .menu-item-card-parent {
        grid-template-columns: repeat(auto-fit, minmax(280px, calc((100% - (20px * 1)) / 2)));
    }
}

@media (max-width: 820px) {
    .menu-item-card-parent {
        grid-template-columns: repeat(auto-fit, minmax(280px, calc((100% - (20px * 0)) / 1)));
    }
}

@media (max-width: 700px) {
    .categories-bar {
        padding: 10px 0;
    }

    .categories-bar .pill-bar-container {
        padding: 0 15px;
    }

    .menu-parent-wrapper {
        padding: 20px 0;
    }

        .menu-parent-wrapper .category-header {
            padding: 0 15px;
        }

        .menu-parent-wrapper .menu-item-card-parent {
            padding: 0 15px;
        }

    .placeholder-menu .placeholder-categories-bar {
        padding: 10px 15px !important;
    }
}

@media (max-width: 480px) {
    .menu-tabs {
        padding: 0;
        top: var(--layout-header-height-mobile);
    }

        .menu-tabs .tabs-bar {
            padding: 0 20px;
        }

    .meal-deal-items-parent {
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .categories-bar {
        top: calc(var(--layout-header-height-mobile) + 40px);
    }

        .categories-bar::-webkit-scrollbar {
            display: none; /* Webkit-based browsers: Hide scrollbar */
        }

    .category-header {
        margin-bottom: 8px;
    }

        .category-header > div {
            font-size: 17px;
        }

        .category-header > button {
            display: unset;
            text-transform: uppercase;
        }

    .placeholder-menu .placeholder-menu-card {
        height: 136px;
        min-width: 150px;
    }

    .menu-item-card-parent {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin-bottom: 40px;
        scrollbar-width: none; /* Firefox: Hide scrollbar */
        -ms-overflow-style: none; /* IE and Edge: Hide scrollbar */
    }

        .menu-item-card-parent::-webkit-scrollbar {
            display: none; /* Webkit-based browsers: Hide scrollbar */
        }
}

.menu-item-card-small {
    --menu-item-card-bg-color: var(--color-background-primary);
    --menu-item-card-bg-color-hover: var(--color-background-primary-hover);

    height: 320px;
    border-radius: 8px;
    background-color: var(--menu-item-card-bg-color);
    cursor: pointer;
    flex: 0 0 auto;
}

    .menu-item-card-small:hover {
        background-color: var(--menu-item-card-bg-color-hover);
    }

.menu-item-card-small__image-container {
    height: 200px;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.menu-item-card-small__image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.menu-item-card-small__label-container {
    display: flex;
    flex-direction: column;
    margin: 11px 14px;
    line-height: 1.4;
}

.menu-item-card-small__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item-card-small__label-desc {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .menu-item-card-small {
        height: 136px;
        width: 150px;
    }

    .menu-item-card-small__image-container {
        height: 90px;
    }

    .menu-item-card-small__label-container {
        height: 46px;
        justify-content: center;
        align-items: center;
        padding: 5px 7px 8px 7px;
        margin: 0;
    }

    .menu-item-card-small__label {
        font-size: 13px;
        margin-bottom: 0;
        text-align: center;
    }

    .menu-item-card-small__label-desc {
        display: none;
    }
}

.meal-deal-card {
    --meal-deal-card-background-color: var(--color-background-secondary);
    --meal-deal-card-background-color-hover: var(--color-background-secondary-hover);
    --meal-deal-card-border-color: var(--color-border-default);
    --meal-deal-card-content-color: var(--color-text-primary);

    display: flex;
    flex-direction: row;
    height: 122px;
    width: 475px;
    background-color: var(--meal-deal-card-background-color);
    border: 1px solid var(--meal-deal-card-border-color);
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
    cursor: pointer;
}

    .meal-deal-card:hover {
        background-color: var(--meal-deal-card-background-color-hover);
    }

.meal-deal-card-image {
    width: 120px;
}

    .meal-deal-card-image img {
        width: 100%;
        height: 100%;
        display: block;
    }

.meal-deal-card-image-full {
    width: 100%;
}

    .meal-deal-card-image-full img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.meal-deal-card-content {
    flex: 1;
    padding: 7px;
    display: flex;
    flex-direction: column;
    color: var(--meal-deal-card-content-color);
}

    .meal-deal-card-content > div {
        flex-grow: 1;
    }

.meal-deal-card-title {
    text-transform: uppercase;
    font-size: 14px;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    line-height: 1.2;
}

.meal-deal-card-description {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 3px;
    line-height: 1.3;
}

.meal-deal-card-description-compact {
    -webkit-line-clamp: 2;
}

.meal-deal-card-price {
    text-transform: uppercase;
    font-size: 12px;
    justify-items: end;
    font-weight: bold;
    margin: 0;
}

@media (max-width: 480px) {
    .meal-deal-card {
        width: 100%;
    }
}
.order-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-order-main-card {
    --recent-orders-card-background-color: var(--color-background-secondary);
    --recent-orders-card-order-status-background-color: var(--color-background-primary);
    --recent-orders-card-order-status-text-color: var(--color-text-tertiary);

    display: flex;
    flex-direction: column;
    background-color: var(--recent-orders-card-background-color);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px;
    gap: 8px;
    width: 60%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .recent-order-main-card.pseudo {
        background-color: transparent;
        border: 0px;
        padding: 0px 16px;
        box-shadow: none;
        padding-bottom: calc(var(--layout-order-type-navbar-height) + 10px);
    }

.recent-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

    .recent-order-card-header .order-type {
        font-size: 16px;
        text-transform: uppercase;
        margin: 0;
    }

    .recent-order-card-header .order-status {
        background-color: var(--recent-orders-card-order-status-background-color);
        border-radius: 54px;
        padding: 4px 12px;
        font-size: 13px;
        height: 1.65rem;
        font-weight: bold;
        cursor: default;
        color: var(--recent-orders-card-order-status-text-color);
        text-transform: uppercase;
    }

.recent-order-address {
    font-weight: 500;
}

.recent-order-date {
    font-size: 14px;
}

.recent-order-item-name {
    font-size: .95rem;
    font-weight: 500;
}

.recent-order-item-description {
    font-size: .85rem;
    font-weight: 400;
}

.recent-order-card-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.recent-order-card-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

    .recent-order-card-item img {
        height: 55px;
        width: 55px;
        border-radius: 4px;
        object-fit: cover;
    }

    .recent-order-card-item .recent-order-item-details {
        display: flex;
        flex-direction: column;
    }

    .recent-order-card-item .recent-order-item-actions {
        display: flex;
        margin-top: 4px;
        gap: 1rem;
    }

/*if media width is ipad or smaller, set maincard width to 100%*/
@media (max-width: 620px) {
    .recent-order-main-card {
        width: 100%;
    }
}

.pill-bar-container {
    --pill-bar-background-color: var(--color-background-primary);
    --pill-bar-text-color: var(--color-text-tertiary);
    --pill-bar-background-color-disabled: var(--color-disabled);
    --pill-bar-background-color-active: var(--color-accent);
    --pill-bar-background-color-hover: var(--color-accent-hover);
    --pill-bar-text-color-active: var(--color-background-primary);

    min-width: 99%;
    list-style: none;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE & Edge) */
}

    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .pill-bar-container::-webkit-scrollbar {
        display: none;
    }

    .pill-bar-container > li {
        background-color: var(--pill-bar-background-color);
        border-radius: 54px;
        padding: 4px 16px;
        font-size: 13px;
        height: 32px;
        font-weight: bold;
        color: var(--pill-bar-text-color);
        text-transform: uppercase;
        margin: 1px;
        white-space: nowrap;
        transition: .2s ease-in-out;
        display: flex;
        align-items: center;
    }

        .pill-bar-container > li.active {
            color: var(--pill-bar-text-color-active);
            background-color: var(--pill-bar-background-color-active);
        }

        .pill-bar-container > li.disabled {
            cursor: not-allowed;
            background-color: var(--pill-bar-background-color-disabled);
            color: var(--pill-bar-text-color-active);
        }

@media (hover: hover) {
    .pill-bar-container > li:not(.disabled):hover {
        color: var(--pill-bar-text-color-active);
         background-color: var(--pill-bar-background-color-hover);
        cursor: pointer;
    }
}

#div_menu_view_all {
    padding: 20px;
    display: grid;
    gap: 15px;
}

.menu-item-view-all-card {
    --menu-item-view-all-card-background-color: var(--color-background-secondary);

    display: flex;
    flex-direction: column;
    height: 300px;
    border-radius: 8px;
    background-color: var(--menu-item-view-all-card-background-color);
    cursor: pointer;
}

.menu-item-view-all-card__image-container {
    height: 150px;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.menu-item-view-all-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.menu-item-view-all-card__label-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 11px 14px;
    line-height: 1.4;
}

.menu-item-view-all-card__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item-view-all-card__label-desc {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item-view-all-card__button-container {
    margin: 16px;
}

    .menu-item-view-all-card__button-container > button {
        width: 100%;
        height: 45px;
    }

.main-body.mobile .menu-order-container {
    padding-bottom: var(--layout-navbar-height);
}

.recent-orders-parent {
    --recent-orders-unavailable-color: var(--color-error);

    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

    .recent-orders-parent .unavailable {
        color: var(--recent-orders-unavailable-color) !important;
        text-align: center;
        font-weight: 600;
    }

    .recent-orders-parent .transparent {
        opacity: 0.75
    }

        .recent-orders-parent .transparent .transparent {
            opacity: 1;
        }

.recent-order-footer {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

    .recent-order-footer.psuedo {
        margin-top: 0px;
    }

    .recent-order-footer .show-earlier-orders-btn {
        font-weight: 550;
        width: 500px;
        padding: .6rem;
    }

@media (max-width: 620px) {
    .show-earlier-orders-btn {
        font-size: .9rem;
    }

    .recent-order-footer button {
        width: 100%;
    }
}
.page-rewards-body {
    --rewards-blob-bg-color: var(--color-background-primary);
    --rewards-points-bar-color: var(--color-background-primary);
    --rewards-points-bar-color-filled: var(--color-accent);
    --rewards-points-bar-text-color: var(--color-text-tertiary);
    --rewards-points-bar-text-color-filled: var(--color-background-main);
    --rewards-info-text-color: var(--color-text-tertiary);

    --rewards-header-bg-color: var(--color-background-primary);

    --rewards-card-bg-color: var(--color-background-secondary);
    --rewards-card-redeem-color-active: var(--color-background-primary);

    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.header_background {
    display: block;
    width: 100%;
    border-radius: 0% 0% 35% 65%;
    background-color: var(--rewards-blob-bg-color);
    height: 150px;
    margin-bottom: 1em;
}

.points-summary-container {
    position: relative;
    text-align: center;
    height: 180px;
}

.points-summary-base {
    position: absolute;
    transform: translate(-50%, -50%);
}

    .points-summary-base.total-points {
        top: 20%;
        left: 50%;
        font-size: xxx-large;
        font-weight: bold;
    }

    .points-summary-base.available-points {
        top: 48%;
        left: 50%;
        font-weight: bold;
    }

    .points-summary-base.balance-date {
        top: 60%;
        left: 50%;
        font-size: small;
    }

.user-info-container {
    padding: 0px 25px 25px 25px;
    width: 80%;
    display: flex;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
}

.rewards-user-info-greeting {
    font-weight: bold;
    font-size: 20px;
}

.rewards-user-info-msg {
    font-size: 12px;
}

.loyalty-points-bar {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    height: 40px;
}

    .loyalty-points-bar.filled-container {
        position: absolute;
    }

    .loyalty-points-bar.filled {
        background-color: var(--rewards-points-bar-color-filled);
        height: 16px;
        width: 100%;
        margin-right: -20px;
        border-radius: 0.85rem;
    }

        .loyalty-points-bar.filled.status {
            height: 40px;
            width: 40px;
            border-radius: 85% 100% 85% 100%;
        }

    .loyalty-points-bar.loyalty-status-text {
        justify-content: center;
        color: var(--rewards-points-bar-text-color-filled);
        font-weight: 600;
    }

    .loyalty-points-bar.unfilled-container {
        justify-content: flex-end;
        position: absolute;
    }

        .loyalty-points-bar.unfilled {
            background-color: var(--rewards-points-bar-color);
            width: 100%;
            height: 16px;
            margin-right: -20px;
            border-radius: 0.85rem;
        }

            .loyalty-points-bar.unfilled.complete {
                height: 40px;
                width: 40px;
                border-radius: 85% 100% 85% 100%;
            }

    .loyalty-points-bar.complete-text {
        justify-content: center;
        color: var(--rewards-points-bar-text-color);
        font-weight: 600;
    }

.loyalty-info {
    color: var(--rewards-info-text-color);
    font-size: small;
}

.rewards-section-header {
    background: var(--rewards-header-bg-color);
    height: 32px;
    font-weight: bold;
    width: 100%;
    display: flex;
    padding-left: 1.5em;
    align-items: center;
    font-size: 16px;
    text-transform: uppercase;
}

.rewards-card-base {
    background: var(--rewards-card-bg-color);
    display: flex;
    align-items: center;
    height: 88px;
    width: 60%;
    padding-left: 2em;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

    .rewards-card-base.psuedo {
        background-color: transparent;
        padding-left: unset;
        padding-right: unset;
        border: 0px;
        box-shadow: none;
    }

    .rewards-card-base.with-btn {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5em;
        padding-right: 2em;
    }

.rewards-card-base-text {
    font-weight: 500;
    gap: 5px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.rewards-no-items {
    display: flex;
    justify-content: center !important;
}

.rewards-card-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
}

    .rewards-card-container.bottom {
        padding-bottom: calc(var(--layout-order-type-navbar-height) + 58px);
    }

.rewards-card-name {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

 .rewards-card-date {
    font-size: 12px;
}

.rewards-redeem-button {
    font-size: 12px;
}

    .rewards-redeem-button:active {
        background-color: var(--rewards-card-redeem-color-active);
    }

.rewards-show-more-btn {
    width: 20vw;
}

.flex-center-all {
    justify-content: center;
    align-items: center;
}

@media (max-width: 620px) {
    .user-info-container {
        width: 90%;
    }

    .rewards-card-base {
        width: 90%;
        padding-right: 2em;
    }

        .rewards-card-base.with-btn {
            gap: 1em;
            padding-right: 1em;
        }

    .rewards-show-more-btn {
        width: 75%;
        font-size: .9rem;
    }
}
#page_trackorder.open {
    display: flex;
}

.track-order-container {
    --track-order-bar-background-color: var(--color-background-secondary);
    --track-order-bar-color: var(--color-text-tertiary);
    --track-order-call-background-color: var(--color-background-main);
    --track-order-call-border-color: var(--color-border-default);
    --track-order-call-color: var(--color-accent);
    --track-order-dots-complete: var(--color-accent);
    --track-order-dots-incomplete: var(--color-text-tertiary);
    --track-order-text-incomplete: var(--color-text-tertiary);

    display: flex;
    flex-direction: column;
    flex-grow: inherit;
    justify-content: space-between;
}

.store-location-bar-container {
    display: flex;
    background-color: var(--track-order-bar-background-color);
    height: 56px;
    width: 100%;
    padding: 0 20px 0 20px;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.store-location-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--track-order-bar-color);
}

    .store-location-bar > div:first-of-type {
        display: flex;
    }

.store-location-pin {
    height: 24px;
    width: 18px;
}

.store-call-button {
    height: 40px;
    width: 40px;
    background-color: var(--track-order-call-background-color);
    border-radius: 50%;
    display: flex;
    border: solid 1px var(--track-order-call-border-color);
    align-items: center;
    justify-content: center;
    color: var(--track-order-call-color);
}

.order-status-container {
    padding: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bold-text {
    font-weight: 600;
}

.scheduledTxt {
    display: none;
}

.status-text {
    font-size: 12px;
    text-align: center;
    display: block;
    width: 100%;
}

    .status-text.smaller {
        font-size: 10px;
    }

    .status-text span {
        display: block;
    }

.order-status-bar-container {
    margin-top: 24px;
    height: 64px;
    padding: 0px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .order-status-bar-container.smaller {
        margin-top: 12px;
        height: 64px;
    }

.order-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 64px;
    width: 64px;
}

    .order-status-item.smaller {
        height: 48px;
        width: 48px;
    }

.bubble {
    height: 32px;
    width: 32px;
}

    .bubble.smaller {
        height: 16px;
        width: 16px;
    }

.tracker-uncompleted {
    color: var(--track-order-text-incomplete);
    opacity: 0.5;
}

    .tracker-uncompleted.dots {
        border-color: var(--track-order-dots-incomplete);
    }

.tracker-completed {
    opacity: unset;
}

    .tracker-completed.dots {
        border-color: var(--track-order-dots-complete);
    }
    
.dotted-line-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.dotted-line {
    border: none;
    border-top: 5px dotted var(--track-order-dots-complete);
    width: 100%;
    margin-top: -32px;
}

    .dotted-line.smaller {
        margin-top: -24px;
        border-top-width: 4px;
    }


@media (max-width: 620px) {
    .scheduledTxt {
        display: block;
    }
}
#page_curbside {
    --curbside-bg-color: var(--color-background-primary);
    position: relative;
}

.curbside-content {
    padding: 2rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    max-height: 100%;
    width: 100%;
    height: calc(100vh - var(--layout-header-height) - var(--layout-navbar-height));
    justify-content: center;
}

.curbside-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.curbside-form-section {
    width: 100%;
    max-width: 600px;
    align-self: center;
}

.curbside-description {
    font-size: 0.9rem;
}

.curbside-car-info {
    width: 100%;
    margin: 0.2rem 0;
}

#btn_curbside_confirm {
    margin-top: 1rem;
    align-self: center;
}

.confirmation-section {
    max-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#btn_curbside_back_to_home {
    transition: 0.25s ease;
    width: 400px;
    align-self: center;
    margin: 1rem 0;
}

#btn_curbside_back_to_home:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.curbside-back-to-home-section {
    width: 100%;
    background-color: var(--curbside-bg-color);
    position: absolute;
    bottom: 0;
}

#btn_curbside_back_to_home_bottom {
    width: 100%;
    display: none;
}

@media (max-width: 480px) {
    .curbside-content {
        height: calc(100vh - var(--layout-header-height-mobile) - var(--layout-navbar-height));
    }
    .curbside-form-section {
        width: unset;
    }

    .curbside-description {
        text-align: center;
    }

    #btn_curbside_confirm {
        min-width: 70%;
    }

    #btn_curbside_back_to_home {
        display: none;
    }

    #btn_curbside_back_to_home_bottom {
        display: unset;
    }

    .curbside-back-to-home-section {
        padding: 1rem;
    }
}

.unsubscribe-parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100dvh - var(--layout-header-height-mobile));
    padding: 0 1rem;
}

    .unsubscribe-parent h1 {
        font-size: 1rem;
    }

    .unsubscribe-parent > section {
        margin: auto auto;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

.unsubscribe-caption {
    padding-bottom: 1rem;
}

    .unsubscribe-caption span {
        font-weight: bold !important;
        text-transform: capitalize;
    }

#div_unsubscribe_reasons {
    text-align: left !important;
}

.unsubscribe-options {
    margin: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.unsubscribe-other {
    margin-top: 0.5rem;
    margin-left: 2.5rem;
}

#div_unsubscribe_not_subscribed > span {
    margin-bottom: 2rem;
}

.unsubscribe-button {
    padding: 2rem 0 1rem 0;
}

@media (max-width: 480px) {
    .unsubscribe-options {
        margin: 1rem;
    }

        .unsubscribe-options .checkRadio > label {
           white-space: unset !important;
        }
}
.header {
    --header-background-color: var(--color-background-primary);
    --height: var(--layout-header-height);
    --height-mobile: var(--layout-header-height-mobile);
    --header-icon-color: var(--color-text-quaternary);
    --header-cart-items-background-color: var(--header-icon-color);
    --header-cart-items-color: var(--header-background-color);
    --header-text-color: var(--color-accent);
    --header-page-active-color: var(--color-text-primary);

    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    min-height: var(--height);
    height: max(var(--height), fit-content);
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
    background-color: var(--header-background-color);
    white-space: nowrap;
}

    /* Header styling when scrolled */
    .header.scrolled {
        background: var(--header-background-color);
        box-shadow: var(--shadow);
    }

    .header :is(.header-left, .header-right) {
        display: flex;
        flex: 1;
        align-items: center;
        height: 100%;
    }

    .header .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }

    .header .header-right {
        justify-content: flex-end;
        height: fit-content;
    }

    .header img {
        max-height: 60px;
        max-width: 200px;
        margin: 0.5rem;
    }

#btn_header_login {
    text-transform: uppercase;
    font-size: 15px;
    margin-right: 1em;
}

.header .hamburger-icon,
.header .profile-icon,
.header .cart-icon {
    width: 80px;
    color: var(--header-icon-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    transition: all 0.2s ease-in-out;
}

.header .profile-icon {
    font-size: 26px;
}

.header .hamburger-icon {
    font-size: 24px;
}

.header .cart-icon {
    position: relative;
    font-size: 26px;
}

    .header .cart-icon > span {
        position: absolute;
        top: -27%;
        right: 24%;
        background-color: var(--header-cart-items-background-color);
        color: var(--header-cart-items-color);
        border-radius: 50%;
        width: 21px;
        height: 21px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        pointer-events: none;
    }

    .header .hamburger-icon:hover,
    .header .profile-icon:hover,
    .header .cart-icon:hover {
        opacity: 0.5;
    }

    .header .hamburger-icon > img,
    .header .profile-icon > img,
    .header .cart-icon > img {
        width: 40px;
        height: 40px;
    }

.header .header-center-text {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--header-text-color);
    text-align: center;
}

.header .header-center-subtext {
    font-size: small;
}

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {
    .header {
        min-height: var(--height-mobile);
        height: var(--height-mobile);
    }

        .header .hamburger-icon,
        .header .profile-icon,
        .header .cart-icon {
            width: 60px;
        }

        .header .cart-icon {
            font-size: 30px;
        }

        .header .hamburger-icon {
            font-size: 27px;
        }

            .header .hamburger-icon > img,
            .header .profile-icon > img,
            .header .cart-icon > img {
                width: 20px;
                height: 20px;
            }

        .header .header-center img {
            height: 40px;
        }

        .header .header-right .login-btn {
            margin-right: 0;
        }

            .header .header-right .login-btn button {
                font-size: 12px;
                padding: 6px 10px;
                text-transform: uppercase;
            }

    #div_header_profile {
        display: none;
    }

    .header .cart-icon > span {
        top: -21%;
        right: 17%;
        width: 21px;
        height: 21px;
    }
}

@media (max-width: 480px) {
    #btn_header_login {
        font-size: 12px;
        margin-right: 0;
    }
}

@media (max-width: 300px) {
    .header .logo img {
        display: none;
    }

    #div_header_profile {
        display: none;
    }
}

#div_header_navigation {
    display: flex;
    align-items: center;
    height: 100%;
}

    #div_header_navigation img {
        padding: 0.25em;
        padding-right: 0.5em;
    }

    #div_header_navigation :is([data-page], a) {
        transition: 0.25s ease;
    }

        #div_header_navigation :is([data-page], a):hover {
            opacity: 0.7;
        }

        #div_header_navigation :is([data-page], a):active {
            color: var(--header-page-active-color)
        }

#div_header_navigation_items {
    display: inline-block;
    margin: auto 0;
    font: var(--header-text-font);
    font-weight: 700;
    color: var(--header-text-color);
    text-transform: uppercase;
    align-items: center;
    padding: 1em 0;
    user-select: none;
    white-space: normal;
}

    #div_header_navigation_items :is(a, [data-page]) {
        display: inline-block;
        padding-right: 0.75em;
        text-decoration: none;
        color: inherit;
    }

    #div_header_navigation_items :is(a, [data-page]) > span {
        cursor: pointer;
    }

#nav_bottom {
    --navbar-background-color: var(--color-background-primary);
    --navbar-icon-color: var(--color-text-quaternary);
    --navbar-icon-active-color: var(--color-background-primary);
    --navbar-active-blob: var(--color-accent);

    margin-top: auto;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: none;
}

/* Bottom navigation bar styling */
.bottom-nav {
    height: var(--layout-navbar-height);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--navbar-background-color);
    padding: 10px 0;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

/* Navigation item styling */
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--navbar-icon-color);
    font-size: 12px;
    position: relative;
    background-color: transparent;
    padding: 0;
    border: none;
}

    .nav-item.active {
        color: var(--navbar-icon-active-color);
        outline: none;
        background-color: transparent;
        z-index: 20;
    }

    .nav-item:active,
    .nav-item:focus {
        outline: none;
        background-color: transparent;
    }

.icon-blob::before {
    content: "\e900";
    font-family: 'AdoraOnlineIconFont', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Start small */
    font-size: 70px; /* Size of the blob */
    color: var(--navbar-active-blob); /* Color of the blob */
    z-index: -1; /* Position it behind the main icon */
    transition: transform 0.3s ease;
    display: none;
}

/* Transition for smooth appearance of the blob */
.nav-item.active .icon-blob::before {
    display: block; /* Make the blob visible */
    transform: translate(-50%, -50%) scale(1); /* Scale it up */
    animation: blob-grow 0.3s ease forwards;
}

/* Icon and label styling */
.nav-icon {
    font-size: 24px;
    margin-bottom: 5px;
    position: relative;
}

.nav-item.active .nav-icon {
    color: var(--navbar-icon-active-color);
}

/* Animation for smooth "blob" scaling effect */
@keyframes blob-grow {
    from {
        transform: translate(-50%, -50%) scale(0.5);
    }

    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

.mobile #nav_bottom {
    display: unset;
}
#modal_deal_builder {
    padding: 0 !important;
}

.deal-builder-container {
    --deal-builder-header-shadow-color: rgba(0, 0, 0, 0.4);
    --deal-builder-header-complete-color: var(--color-deal-builder-bar);
    --deal-builder-header-incomplete-color: var(--color-deal-builder-bar-light);

    --deal-builder-group-header-bg-color: var(--color-background-primary);
    --deal-builder-group-header-color: var(--color-text-tertiary);
    --deal-builder-group-header-added-bg-color: var(--color-background-primary);
    --deal-builder-group-header-added-color: var(--color-background-main);

    --deal-builder-footer-bg-color: var(--color-background-primary);
    --deal-builder-footer-color: var(--color-text-tertiary);

    display: flex;
    flex-direction: column;
    max-height: 90vh;
    min-width: 768px;
    width: 40vw;
    border-radius: var(--radius);
    overflow: hidden;
}

    .deal-builder-container .deal-builder-header {
        min-height: 100px;
        max-height: 100px;
        z-index: 1;
        box-shadow: 0 4px 6px -3px var(--deal-builder-header-shadow-color);
    }

    .deal-builder-container .deal-progress-header {
        width: 90%;
        gap: 12px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.deal-progress-bar {
    display: flex;
    gap: 5px;
    height: 6px;
    width: 100%;
}

.deal-builder-progress-bar {
    width: 100%;
}

    .deal-builder-progress-bar.single {
        border-radius: 15px;
    }

    .deal-builder-progress-bar.start {
        border-radius: 15px 0px 0px 15px;
    }

    .deal-builder-progress-bar.mid {
        border-radius: unset;
    }

    .deal-builder-progress-bar.end {
        border-radius: 0px 15px 15px 0px;
    }

    .deal-builder-progress-bar.incomplete {
        background-color: var(--deal-builder-header-incomplete-color);
    }

    .deal-builder-progress-bar.complete {
        background-color: var(--deal-builder-header-complete-color);
    }

.deal-builder-selected-status {
    position: absolute;
    left: 5%;
    top: 80px;
    font-size: 13px;
}

.deal-builder-content {
    overflow-y: auto;
}

.deal-builder-image {
    max-height: 40vh;
    overflow: hidden;
    display: flex;
    align-items: end;
    position: relative;
}

    .deal-builder-image > img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

.deal-builder-details {
    padding: 1.2rem;
}

    .deal-builder-details > h1 {
        font-size: 21px;
    }

.deal-builder-group-header {
    background-color: var(--deal-builder-group-header-bg-color);
    font-size: 15px;
    height: 42px;
    font-weight: bold;
    display: flex;
    padding: 10px 1.2rem;
    align-items: center;
    justify-content: space-between;
}

    .deal-builder-group-header .header-text {
        display: flex;
        gap: 10px;
        align-items: center;
        cursor: pointer;
    }

    .deal-builder-group-header > div > span {
        color: var(--deal-builder-group-header-color);
        font-size: 14px;
    }

        .deal-builder-group-header > div > span.added-tag {
            background-color: var(--deal-builder-group-header-added-bg-color);
            color: var(--deal-builder-group-header-added-color);
            font-weight: normal;
            border-radius: 100px;
            text-transform: uppercase;
            display: inline-grid;
            height: 26px;
            width: 57px;
            text-align: center;
            align-items: center;
            font-size: 12px !important;
        }

        .deal-builder-group-header .header-text > h2 {
            text-transform: uppercase;
            font-size: 14px;
        }

        .deal-builder-group-header .header-text .accordion-icon {
            transform: rotate(270deg);
            transition: transform 0.1s;
        }

        .deal-builder-group-header .header-text .accordion-icon.accordion-closed {
            transform: rotate(180deg);
            transition: transform 0.1s;
        }

.deal-builder-categories-bar {
    position: unset !important;
    top: unset !important;
    padding: 0.5rem 1rem 0 1rem !important;
}

.deal-builder-group-body {
    opacity: 1;
    transition: opacity 0.1s ease, height 0.3s ease;
}

    .deal-builder-group-body.accordion-closed {
        height: 0;
        opacity: 0;
    }

.deal-builder-group-body-category {
    padding-top: 0.5rem;
}

    .deal-builder-group-body-category .pill-bar-container {
        padding: 0 1rem;
    }

.deal-builder-group-items-section {
    display: flex !important;
    flex-direction: column;
    padding: 1em 1em 1em 1em;
    gap: 20px;
}

.deal-builder-bottom-bar {
    background-color: var(--deal-builder-footer-bg-color);
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow);
}

.deal-builder-button-description {
    color: var(--deal-builder-footer-color);
    font-size: 14px;
}

.deal-builder-button {
    width: 480px;
}

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {

    .deal-builder-container {
        min-width: unset;
        width: unset;
        border-radius: unset;
        max-height: 100vh;
    }

    .deal-builder-group-body {
        height: 100%;
    }

    .deal-builder-header {
        position: unset !important;
    }

    .deal-builder-button {
        width: 100%;
    }
}
.modal {
    --modal-background-color: var(--color-background-main);
    --modal-header-bg-color: var(--color-background-primary);
    --modal-header-color: var(--color-accent);
    --modal-small-color: var(--color-text-tertiary);
    --padding: 2em;

    position: fixed;
    display: none;
    z-index: 12;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--modal-background-color);
    border-radius: 1em;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    padding: var(--padding);
    max-height: 95dvh;
    max-width: 95dvw;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile .modal:not(.disable-fullscreen) {
    width: 100dvw;
    max-width: 100dvw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    max-height: 100dvh !important;
}

@media(max-width: 600px) {
    .modal:not(.disable-fullscreen) {
        width: 100dvw;
        height: 100dvh;
        max-height: 100dvh !important;
        max-width: 100dvw;
        border-radius: 0 !important;
    }

    .mobile-center {
        width: auto !important;
        height: auto !important;
    }
}

.gradient.modal {
    padding-bottom: 0 !important;
}

    .gradient.modal::after {
        content: "";
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: var(--padding) !important;
        background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, var(--modal-background-color) 70%, var(--modal-background-color) 100%);
        pointer-events: none;
    }

.modal::-webkit-scrollbar {
    display: none;
}

.modal [id$="_delete"] {
    background-color: inherit;
    position: absolute;
    right: 1.618em;
    top: 1.618em;
    padding: 0.5em;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transition: all 0.25s ease;
    z-index: 2;
    color: var(--color-text-primary);
}

    .modal [id$="_delete"]:hover {
        opacity: 0.25
    }

.modal.open {
    display: flex;
    flex-direction: column;
}

.modal .fancy-title {
    font-size: 4rem
}

.modal .title {
    font-size: 2em;
    font-weight: 700;
    color: inherit;
    line-height: 1;
    padding-right: 2em;
}

.modal label {
    font-weight: 600;
}

.modal :is(input:is([type=text], [type=password], [type=email], [type=date]), select) {
    display: block;
    width: 100%;
    padding: 0.618em 1em;
}

@supports (-webkit-touch-callout: none) {
    .modal :is(input:is([type=date])) {
        min-height: 50.75px;
    }
}

.modal :not(input) {
    user-select: none;
}

.modal .modal-form {
    width: 100%;
}

    .modal .modal-form > * {
        padding: 0.5em 0;
    }

.modal small {
    color: var(--modal-small-color);
}

.modal button[type="submit"] {
    border: none;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    padding: 0.618em;
}

.modal button[type=submit]:active {
    background-color: unset;
}

.modal .password-label {
    display: flex;
    justify-content: space-between;
}

.modal .password-toggle {
    display: flex;
    justify-content: space-between;
}

    .modal .password-toggle > * {
        display: block;
    }

    .modal .password-toggle [class^="password-toggle-"] {
        font-size: 0.75em;
        font-weight: normal;
    }

.modal :is(.modal-header, .modal-footer) {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--modal-header-bg-color);
    min-height: 4em;
    width: calc(100% + var(--padding) * 2);
    left: calc(-1 * var(--padding));
}

.modal .modal-header {
    top: calc(-1 * var(--padding));
}

.modal .modal-footer {
    bottom: calc(-1 * var(--padding));
}

    .modal :is(.modal-header, .modal-footer) .header-title {
        font-size: 1em;
        font-weight: 700;
        color: var(--modal-header-color);
        line-height: 1;
        text-align: center;
        height: 100%;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal .modal-header:not(.hidden) + [id$="_delete"] {
        background-color: transparent;
        right: 1em;
        top: 1em;
    }
.menu-item-card-small.horizontal {
    --meal-deal-section-card-background-color: var(--color-background-secondary);
    --meal-deal-section-card-background-color-selected: var(--color-background-primary);
    --meal-deal-section-card-border-color-selected: var(--color-text-tertiary);

    display: flex;
    flex-direction: row;
    height: 104px;
    width: 100%;
    background-color: var(--meal-deal-section-card-background-color);
}

    .menu-item-card-small.horizontal.selected {
        border: 1px solid var(--meal-deal-section-card-border-color-selected);
        background-color: var(--meal-deal-section-card-background-color-selected);
        cursor: unset !important;
    }

.menu-item-card-small__image-container.horizontal {
    height: 104px;
    overflow: unset;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.menu-item-card-small__image.horizontal {
    width: auto !important;
    height: 100% !important;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.menu-item-card-small__label-container.horizontal {
    justify-content: space-between;
    align-items: unset !important;
}

.meal-deal-menu-item-card-small__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meal-deal-menu-item-card-small__label-desc {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {
    .menu-item-card-small__label-container.horizontal {
        height: 100%;
    }
}
/* Uncomment this later */
/* #modal_login {
    --login-divider-color: #ccc;

    --login-facebook-bg-color: #3778ea;
    --login-facebook-bg-color-hover: #4880e1;
    --login-facebook-color: white;

    --login-apple-bg-color: black;
    --login-apple-bg-color-hover: #161616;
    --login-apple-color: white;
} */

    #modal_login .fancy-title {
        font-size: 55px;
        margin: 0 auto;
    }

    #modal_login .fancy-subtitle {
        text-align: center;
    }

    #modal_login .login-input {
        padding: 0.5em 0;
    }

.login-form-remember-forgot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.forgot-password {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mobile .forgot-password {
    width: 100%;
}

.divider {
    text-align: center;
    font-size: 14px;
    margin: 20px 0;
    position: relative;
}

    .divider span {
        padding: 0 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .divider:before, .divider:after {
        content: '';
        position: absolute;
        height: 1px;
        width: 42%;
        background-color: var(--login-divider-color);
        top: 50%;
    }

    .divider:before {
        left: 0;
    }

    .divider:after {
        right: 0;
    }

.social-button > button {
    width: 100%;
    margin-bottom: 17px;
    font-weight: 500;
    text-transform: uppercase;
}

    .social-button > button.facebook {
        background-color: var(--login-facebook-bg-color);
        color: var(--login-facebook-color);
    }

        .social-button > button.facebook:hover {
            background-color: var(--login-facebook-bg-color-hover);
        }

    .social-button > button.apple {
        background-color: var(--login-apple-bg-color);
        color: var(--login-apple-color);
    }

        .social-button > button.apple:hover {
            background-color: var(--login-apple-bg-color-hover);
        }
#modal_signup {
    flex-direction: column;
    padding: 0.4em 0.1em;
}
    #modal_signup .signup-container {
        padding: 2em;
        overflow-y: auto;
        scrollbar-width: thin;
        display: flex;
        flex-direction: column;
    }

    #modal_signup :is(#signup_terms, [id^="signup_marketing"]) {
        display: flex;
        margin: 0.618em 0;
    }

    #modal_signup :is(#lbl_signup_terms, [id^="lbl_signup_marketing"]) {
        font-size: 0.8em;
        user-select: none;
        padding-top: 0.5em;
        padding-left: 0.25em;
        font-weight: normal;
    }

    #modal_signup .checkRadio {
        align-items: flex-start;
    }

    #modal_signup #phone_row {
        display: flex;
    }

    #modal_signup #phone_row select {
        display: block;
        width: unset;
        flex-grow: 1;
        padding: 0.5em;
        max-width: 8em;
    }

    #modal_signup #phone_row input {
        display: block;
        flex-grow: 2;
        margin-left: 1em;
    }
.cart-container {
    --cart-no-items-bg-color: var(--color-background-primary);
    --cart-promo-border-color: var(--color-border-default);
    --cart-promo-color: var(--color-text-tertiary);
    
    max-width: 75vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 4rem;
}

.cart-first-section {
    flex: 2;
    overflow-y: auto;
    padding-right: 25px;
    padding-top: 20px;
}

.cart-second-section {
    flex: 1;
    position: sticky;
    top: var(--layout-header-height);
    align-self: flex-start;
    padding: 20px 0;
    overflow: hidden;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .cart-header h2 {
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
    }

.add-more-items-link {
    font-size: 14px;
}

.cart-no-items {
    background-color: var(--cart-no-items-bg-color);
    padding: 20px;
    border-radius: var(--radius);
    width: 70%;
    margin: 0 auto;
}

    .cart-no-items > div {
        text-align: center;
    }

    .cart-no-items button {
        width: 100%;
        transition: 0.5s ease;
    }

    .cart-no-items-heading {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 1rem;
        text-transform: uppercase;
    }

.cart-no-items-info {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.cart-item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 0;
    gap: 1.5rem;
}

.add-more-items-button {
    width: 50%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.suggested-items {
    margin: 20px 0;
}

    .suggested-items h3 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

/* To Be Implemented In the Future */
/* .suggested-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

    .suggested-item img {
        width: 40px;
        height: 40px;
        border-radius: 5px;
    }

    .suggested-item p {
        font-size: 14px;
        margin: 0;
    }

    .suggested-item .price {
        font-size: 14px;
        font-weight: bold;
        color: #4D3E28;
    }

.add-suggested-item {
    background-color: #E63946;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
} */

.cart-payment {
    width: 100%;
    display: flex;
    padding-top: 1rem;
}

    .cart-payment button {
        margin: 0 auto;
    }

.cart-payment-mobile {
    display: none;
}

/*Coupon*/
#div_cart_promo_code {
    padding-top: 1rem;
}

.promo-input-container {
    display: flex;
    border: 2px solid var(--cart-promo-border-color);
    border-radius: var(--radius);
    overflow: hidden;
    align-items: center;
    margin: 0 0.5rem;
}

    .promo-input-container > input {
        flex: 1;
        min-width: 0;
        padding: 10px;
        border: none;
        outline: none;
        border-radius: 5px 0 0 5px;
    }

    .promo-input-container > button {
        background-color: transparent;
        border: none;
        border-left: 1px solid var(--cart-promo-border-color);
        border-radius: 0 5px 5px 0;
        padding: 10px 15px;
        cursor: pointer;
        color: var(--cart-promo-color);
        font-weight: bold;
        white-space: nowrap;
        flex-shrink: 0;
    }

#spn_promo_code_error{
    margin-left: .5rem;
}

.cart-fundraiser-selection {
    display: flex;
    gap: 1rem;
    margin: 0 1rem;
}

    .cart-fundraiser-selection > button {
        font-size: smaller;
        font-weight: bold;
    }

.cart-challenge-info {
    display: flex;
    gap: 1rem;
    margin: 0 1rem;
}

    .cart-challenge-info button {
        background-color: transparent;
        font-size: smaller;
        font-weight: bold;
    }

.cart-challenge {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

    .cart-challenge > button {
          display: block;
          margin: 0 auto;
    }

@media (max-width: 1700px) {
    .cart-container{
        max-width: 80vw;
    }
}

@media (max-width: 1400px) {
    .cart-container {
        max-width: 90vw;
    }
}

@media (max-width: 1200px) {
    .cart-container {
        flex-direction: column;
    }

    .cart-second-section {
        position: unset;
        align-self: unset;
        width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .cart-second-section {
        width: unset;
        margin: 0 1.2rem;
        padding-bottom: 0 !important;
    }

    body.mobile .cart-container .common-base-button-mobile {
        bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .cart-container {
        flex-direction: column;
        max-width: unset;
        gap: 0;
    }

    .cart-first-section {
        padding-right: 0;
        overflow: hidden;
    }

    .cart-no-items {
        width: 100%;
    }

    .cart-item {
        gap: 10px;
    }

    .cart-item-image {
        width: 80px;
        height: 80px;
        display: flex;
        align-self: center;
    }

    .item-title {
        font-size: 1rem;
    }

    .item-description {
        font-size: 0.9rem;
    }

    .item-calories {
        font-size: 0.9rem;
    }

    .item-price {
        font-size: 1rem;
    }

    .add-more-items-button {
        width: 75%;
    }

    .cart-items-wrapper {
        margin: 0 1.2rem;
    }

    .suggested-items h3 {
        margin-left: 1.2rem;
        margin-right: 1.2rem;
    }

    .upsell-wrapper {
        padding: 0 15px;
    }

    .cart-payment {
        display: none;
    }

    .cart-payment-mobile {
        display: flex;
        position: sticky;
        bottom: 0;
        padding: 1rem 1.2rem;
        background-color: var(--colorBg);
    }
    
        .cart-payment-mobile button {
            text-transform: uppercase;
            margin: 0 auto;
            width: 70%;
        }

    body.mobile .cart-payment-mobile {
        padding-bottom: calc(1rem + var(--navbarHeight)) !important;
    }
}
.upsell-wrapper {
    --upsell-background-color: var(--color-background-secondary);
    --upsell-background-color-hover: var(--color-background-secondary-hover);
    
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE & Edge) */
    padding: 0.5rem 0;
}

    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .upsell-wrapper::-webkit-scrollbar {
        display: none;
    }

    .upsell-wrapper .upsell-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background-color: var(--upsell-background-color);
        min-height: 200px;
        min-width: 200px;
        cursor: pointer;
        border-radius: var(--radius);
        padding: 16px;
        text-align: center;
    }

        .upsell-wrapper .upsell-card:hover {
            background-color: var(--upsell-background-color-hover);
        }

        .upsell-wrapper .upsell-card .upsell-card-image {
            width: 166px;
        }

            .upsell-wrapper .upsell-card .upsell-card-image > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }

        .upsell-wrapper .upsell-card .upsell-card-label {
            text-transform: uppercase;
            font-weight: 600;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: end;
        }

@media (max-width: 480px) {
    .upsell-wrapper {
        padding: 0.5rem 1rem;
    }
}
.order-summary-parent {
    --order-summary-row-color: var(--color-disabled);
    --order-summary-discount-color: var(--color-coupons);
    --order-summary-incomplete-color: var(--color-accent);
    --order-summary-incomplete-alt-color: var(--color-text-primary);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 1rem;
    color: var(--order-summary-row-color);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 10px;
}

.discounts-block {
    color: var(--order-summary-discount-color);
    font-size: 1rem;
}

.discounts-block-checkout {
    color: var(--order-summary-discount-color);
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 1rem;
}

.discounts-block-coupons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 10px;
    padding-top: 5px;
}

.discounts-block-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.coupon-description {
    flex: 1;
}

.coupon-actions {
    display: flex;
    align-items: center;
    gap: 8px; 
    justify-content: space-between;
}

    .coupon-actions > button {
        font-size: smaller;
        font-weight: bold;
    }

.discounts-incomplete-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0.5rem;
}

.discounts-incomplete-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    border: 3px solid;
    border-color: var(--order-summary-incomplete-color);
    border-radius: var(--radius);
}

    .discounts-incomplete-item > span:first-of-type {
        color: var(--order-summary-incomplete-color);
        font-weight: 700;
    }

    .discounts-incomplete-item > span:nth-of-type(2) {
        color: var(--order-summary-incomplete-alt-color);
    }

@media (max-width: 480px) {
    .order-summary-parent {
        padding: 10px 1rem;
    }
}
.menu-item-cart-card-parent {
    --menu-item-cart-card-price-color: var(--color-accent);
    --menu-item-cart-card-quantity-background-color: var(--color-background-primary);

    width: 100%;
}

.menu-item-cart-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.menu-item-cart-card-image {
    width: 240px;
    height: 100px;
}

    .menu-item-cart-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

.menu-item-cart-card-details {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

    .menu-item-cart-card-details .item-title {
        font-size: 1.2rem;
        font-weight: bold;
        margin: 0;
        text-transform: uppercase;
    }

    .menu-item-cart-card-details .item-description {
        font-size: 1.1rem;
        margin: 5px 0;
    }

.menu-item-cart-card-price {
    flex: 1;
    display: flex;
    justify-content: end;
    height: 100%;
    align-items: center;
}

    .menu-item-cart-card-price > p {
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--menu-item-cart-card-price-color);
    }

.menu-item-cart-card-modifiers {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

    .menu-item-cart-card-modifiers.expanded {
        -webkit-line-clamp: unset;
        max-height: none;
        white-space: unset;
    }

.menu-item-cart-card-actions {
    display: flex;
    margin-top: 7px;
    height: 33px;
    gap: 2rem;
}

    .menu-item-cart-card-actions .item-quantity {
        display: flex;
        align-items: center;
        background-color: var(--menu-item-cart-card-quantity-background-color);
        border-radius: 50px;
        width: 110px;
    }

        .menu-item-cart-card-actions .item-quantity .quantity-btn {
            background-color: unset;
            border: unset;
            flex: 1;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 0.7rem;
            height: 100%
        }

        .menu-item-cart-card-actions .item-quantity .quantity-number {
            font-size: 0.8rem;
            font-weight: bold;
            flex: 1;
            display: flex;
            justify-content: center;
            height: 100%;
            align-items: center;
        }

    .menu-item-cart-card-actions .item-options {
        display: flex;
        gap: 1.5rem;
    }

        .menu-item-cart-card-actions .item-options .customize-btn,
        .menu-item-cart-card-actions .item-options .remove-btn {
            font-size: 0.8rem;
        }

.menu-item-cart-card-line-separator {
    --menu-item-cart-card-separator-background-color: var(--color-text-tertiary-hover);

    height: 2px;
    background-image: linear-gradient(to right, transparent, var(--menu-item-cart-card-separator-background-color), transparent);
    border: none;
    width: 100%;
}

@media (max-width: 480px) {
    .menu-item-cart-card {
        gap: 10px;
    }

    .menu-item-cart-card-image {
        width: 80px;
        height: 80px;
        display: flex;
        align-self: center;
    }

    .menu-item-cart-card-details .item-title {
        font-size: 1rem;
    }

    .menu-item-cart-card-details .item-description {
        font-size: 0.9rem;
    }

    .menu-item-cart-card-details .item-calories {
        font-size: 0.9rem;
    }

    .menu-item-cart-card-price > p {
        font-size: 1rem;
    }
}

.cart-reward-section {
    --cart-reward-bg-color: var(--color-background-secondary);
    --cart-reward-arrow-color: var(--color-background-primary);

    --cart-reward-card-bg-color: var(--color-background-primary);
    --cart-reward-card-bg-color-hover: var(--color-background-primary-hover);
    --cart-reward-card-expiry-color: var(--color-text-secondary);

    background-color: var(--cart-reward-bg-color);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: var(--radius);
}

    .cart-reward-section > h2 {
        text-transform: uppercase;
        padding-bottom: 0.5rem;
        font-size: 18px;
    }

    .cart-reward-section > span {
        font-size: 15px;
    }

.cart-reward-sign-in {
    display: flex;
    gap: 1rem;
    margin-top: 0.7rem;
}

    .cart-reward-sign-in button {
        text-transform: uppercase;
        flex: 1;
    }

.cart-reward-parent {
    margin-top: 0.7rem;
}

    .cart-reward-parent > h3 {
        text-transform: uppercase;
        padding-bottom: 0.5rem;
        font-size: 16px;
    }

.cart-reward-parent .arrow-scroller-container {
    --arrow-bg-color: var(--cart-reward-arrow-color) !important;
}

    .cart-reward-parent .arrow-scroller-container .arrow-scroll {
        width: 4rem !important;
    }

    .cart-reward-parent .arrow-scroller-container .arrow-scroll:first-child {
        background: linear-gradient(to right, var(--arrow-bg-color) 40%, transparent) !important;
    }

    .cart-reward-parent .arrow-scroller-container .arrow-scroll:last-child {
        background: linear-gradient(to left, var(--arrow-bg-color) 40%, transparent) !important;
    }

.cart-reward-cards {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 1rem;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE & Edge) */
}

    /* Webkit-based browsers (Chrome, Edge, Safari) */
    .cart-reward-cards::-webkit-scrollbar {
        display: none;
    }

.cart-reward-card {
    width: 180px;
    min-width: 180px;
    padding: 10px;
    background-color: var(--cart-reward-card-bg-color);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s ease-in-out;
}

    .cart-reward-card:hover {
        background-color: var(--cart-reward-card-bg-color-hover);
    }

    .cart-reward-card .title {
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-reward-card .expiry {
        font-size: 14px;
        color: var(--cart-reward-card-expiry-color);
    }

.cart-credits-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-reward-credit-card {
    padding: 10px;
    background-color: #f2ebe2;
    border: 1px solid #f2ebe2;
    border-radius: var(--btnRadius);
}

.cart-reward-credit-card-base-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-reward-credit-card-base-text {
    font-weight: 500;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .cart-reward-credit-card-base-text strong {
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .cart-reward-credit-card-base-text .expiiry {
        font-size: 14px;
        color: #555;
    }

.card-reward-credit-card-button-action {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.cart-reward-credit-redeem-button {
    color: #85714D;
    font-size: 12px;
    background-color: unset;
}

    .cart-reward-credit-redeem-button:focus {
        background-color: unset;
    }

    .cart-reward-credit-redeem-button:active {
        background-color: #F5EBE1;
    }
.back-home-parent {
    --back-home-background-color: var(--color-background-primary);

    height: var(--layout-navbar-height);
    display: flex;
    align-items: center;
    background-color: var(--back-home-background-color);
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 0 20px 0 20px;
}

    .back-home-parent > button {
        width: 100%;
    }
.checkout-content {
    max-width: 60vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 4rem;
}

.checkout-first-section {
    flex: 1.5;
    overflow-y: auto;
    padding: 20px 25px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.checkout-second-section {
    flex: 1;
    position: sticky;
    top: var(--layout-header-height);
    align-self: flex-start;
    padding-top: 20px;
}

.checkout-header {
    padding-bottom: 0.5rem;
}

    .checkout-header > p,
    .checkout-header > h2 {
        font-weight: bold;
        font-size: 18px;
    }

.checkout-header-extra {
    display: flex;
}

    .checkout-header-extra > p {
        flex: 1;
    }

    .checkout-header-extra > button,
    .checkout-header-extra > span {
        font-size: 15px;
    }

.checkout-pickup-time-options,
.checkout-payment-options,
.checkout-tip-options,
.checkout-method-options {
    display: flex;
    white-space: nowrap;
    gap: 8px;
}

    .checkout-pickup-time-options > button,
    .checkout-payment-options > button,
    .checkout-tip-options > button,
    .checkout-method-options > button {
        font-size: 14px;
        height: 40px;
    }

.form-row {
    display: flex;
    gap: 2rem;
}

.form-row-phone > label {
    font-weight: 600;
    display: block;
    margin: 0.25em;
}

.form-group-phone-parent {
    flex: 1;
    display: flex;
    gap: 2rem;
}

.form-group {
    padding-bottom: 10px;
    flex: 1;
}

    .form-group > label {
        font-weight: 600;
        display: block;
        margin: 0.25em;
    }

    .form-group > input,
    .form-group > select {
        display: block;
        width: 100%;
    }

.form-group-phone {
    flex: 2;
}

.checkout-gift-card-button {
    width: 60%;
    display: block;
    margin: 0 auto;
    margin-top: 0.5rem;
}

.checkout-gift-card-applied {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-gift-card-applied .gift-card:first-of-type {
    margin-top: 1.5rem;
}

.checkout-payment-group {
    padding-top: 0.5rem !important;
}

.checkout-payment-token {
    margin-top: 0.5rem;
}

.checkout-payment-wallet {
    margin-top: 1rem;
}

    .checkout-payment-wallet > h3 {
        font-size: 16px;
    }

    .checkout-payment-wallet > button {
        display: block;
        width: 60%;
        text-transform: uppercase;
        margin: 0.5rem auto 0 auto;
    }

    .checkout-payment-existing-new {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.3em;
    }

    .checkout-payment-wallet .icon-arrow-back {
        margin-left: 0.5em;
        display: inline-block;
        transform: rotate(-90deg);
        transition: transform 0.5s ease;
    }

    .checkout-payment-wallet .icon-arrow-back.open {
        transform: rotate(90deg);
    }

.checkout-payment-wallet-option {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.checkout-payment-wallet-label {
    flex-direction: column;
}

    .checkout-payment-wallet-label > span:first-of-type {
        font-weight: 600;
    }

    .checkout-payment-wallet-label .form-group {
        width: 40%;
    }

        .checkout-payment-wallet-label .form-group > label {
            cursor: pointer;
        }

#div_checkout_payment_existing_cards {
    padding-bottom: 0.5rem;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-label {
    font-weight: 500;
    font-size: 14px;
}

.card-details-row {
    font-size: 13px;
}

.checkout-notification-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.checkout-notification-option {
    display: flex;
    width: 100%;
    gap: 1rem;
}

    .checkout-notification-option .notification-country {
        flex: 1;
    }

    .checkout-notification-option .notification-phone {
        flex: 2;
    }

        .checkout-notification-option .notification-phone > input {
            width: 100%;
        }

    .checkout-notification-option .notification-email {
        flex: 1;
    }

        .checkout-notification-option .notification-email > input {
            width: 100%;
        }

.checkout-togo-options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-left: 1rem;
}

#ul_checkout_tips > li,
#ul_checkout_payments > li,
#ul_checkout_times > li,
#ul_checkout_methods > li {
    font-size: 14px;
    height: 40px;
}

.checkout-method-curbside > p {
    padding-top: 0.5rem;
}

.checkout-method-curbside-car {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

    .checkout-method-curbside-car > label {
        font-weight: 600;
        display: block;
        margin: 0.25em;
    }

    .checkout-method-curbside-car > div > input {
        width: 100%;
    }

.checkout-tip-custom {
    padding-top: 0.5rem;
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .checkout-tip-custom > label {
        font-weight: 600;
        display: block;
        margin: 0.25em;
    }

    .checkout-tip-custom > div > input {
        width: 100%;
        text-align: end;
    }

.checkout-message {
    margin-top: 1rem;
    font-weight: bold;
}

.checkout-terms {
    margin-top: 1rem;
}

    .checkout-terms label {
        white-space: unset !important;
    }

.checkout-place-order {
    width: 100%;
    display: flex;
    padding-top: 1rem;
}

    .checkout-place-order button {
        text-transform: uppercase;
        margin: 0 auto;
        width: 70%;
    }

.checkout-place-order-mobile {
    display: none;
}

#lbl_checkout_payment_token {
    white-space: unset;
}

@media (max-width: 1700px) {
    .checkout-content {
        max-width: 70vw;
    }
}

@media (max-width: 1400px) {
    .checkout-content {
        max-width: 80vw;
    }
}

@media (max-width: 1200px) {
    .checkout-content {
        max-width: 90vw;
    }
}

@media (max-width: 900px) {
    .checkout-content {
        flex-direction: column;
        max-width: unset;
        gap: 2rem;
    }

    .checkout-first-section {
        padding-right: 0;
        padding-bottom: 0;
        gap: 2rem;
        margin: 0 1.2rem;
    }

    .checkout-second-section {
        padding-top: 0;
        position: unset;
        align-self: unset;
        margin: 0 1.2rem;
    }

    .checkout-place-order {
        display: none;
    }

    .checkout-place-order-mobile {
        display: flex;
        position: sticky;
        bottom: 0;
        padding: 1rem 0;
        background-color: var(--color-background-main);
    }
    
        .checkout-place-order-mobile button {
            margin: 0 auto;
        }

    body.mobile .checkout-content .common-base-button-mobile {
        bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .checkout-content {
        flex-direction: column;
        max-width: unset;
        gap: 2rem;
    }

    .checkout-second-section {
        padding-top: 0;
        position: unset;
        align-self: unset;
    }

    .checkout-pickup-time-options > button {
        font-size: 12px;
        height: 32px;
        flex: 1;
    }

    .checkout-payment-options,
    .checkout-tip-options,
    .checkout-method-options {
        overflow-x: auto;
    }

        .checkout-payment-options > button,
        .checkout-tip-options > button,
        .checkout-method-options > button {
            font-size: 12px;
            height: 32px;
        }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-group-phone-parent {
        gap: 1rem;
    }

    .form-group-phone {
        flex: 1.6 !important;
    }

    .checkout-notification-option .notification-country {
        flex: 1.3;
    }

    .checkout-gift-card-button {
        width: 100%;
    }

    .checkout-payment-group {
        width: 100%;
    }

    .checkout-payment-wallet > button {
        width: 100%;
    }

    .checkout-place-order {
        display: none;
    }

    .checkout-place-order-mobile {
        display: flex;
        position: sticky;
        bottom: -1px;
        padding: 1rem 1.2rem;
        background-color: var(--color-background-main);
        z-index: 2;
    }
    
        .checkout-place-order-mobile button {
            margin: 0 auto;
        }
}

.gift-card {
    --gift-card-background-color: var(--color-background-primary);
    --gift-card-border-color: var(--color-border-default);
    --gift-card-title-color: var(--color-text-tertiary);

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--gift-card-background-color);
    border-radius: var(--radius);
    border: 1px solid var(--gift-card-border-color);
    padding: 0.5rem 1rem;
}

    .gift-card .gift-card-title {
        text-align: left;
        font-size: 3rem;
        color: var(--gift-card-title-color);
        line-height: 1;
        text-transform: uppercase;
    }

    .gift-card .gift-card-details-group {
        display: flex;
        gap: 1rem;
    }

    .gift-card .gift-card-number {
        font-size: 18px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }

    .gift-card .gift-card-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        font-size: 15px;
    }

    .gift-card .remove-gift-card {
        width: 60%;
        display: block;
        margin: 0 auto;
    }

@media (max-width: 480px) {
    .gift-card .gift-card-title {
        font-size: 2.5rem;
    }

    .gift-card .gift-card-details-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .gift-card .gift-card-number {
        justify-content: flex-start;
    }

    .gift-card .gift-card-details {
        margin-left: auto;
    }

    .gift-card .remove-gift-card {
        width: 100%;
    }
}

.schedule-later-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.limited-time {
    --limited-time-background-color: var(--color-background-main);
    --limited-time-border-color: var(--color-border-default);
    --limited-time-background-color-hover: var(--color-accent-hover);
    --limited-time-background-color-selected: var(--color-accent);
    --limited-time-color-selected: var(--color-background-primary);
    --limited-time-background-color-disabled: var(--color-disabled-soft);
    --limited-time-color-disabled: var(--color-disabled);

    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 35vh;
    overflow-y: auto;
}

    .limited-time > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.7rem;
    }

        .limited-time > div > div {
            flex: 1;
        }

            .limited-time > div > div > button {
                font-weight: normal;
                background-color: var(--limited-time-background-color);
                border: 2px solid var(--limited-time-border-color);
                width: 100%;
            }

                .limited-time > div > div > button:hover {
                    color: var(--limited-time-color-selected) !important;
                    background-color: var(--limited-time-background-color-hover) !important;
                }

                .limited-time > div > div > button.time-selected {
                    color: var(--limited-time-color-selected) !important;
                    background-color: var(--limited-time-background-color-selected) !important;
                }

            .limited-time > div > div > span {
                display: flex;
                justify-content: center;
                background-color: var(--limited-time-background-color-disabled);
                color: var(--limited-time-color-disabled);
                border: 2px solid var(--limited-time-border-color);
                border-radius: var(--radius);
                padding: 0.5rem 1rem;
                opacity: 0.7;
            }

@media (max-width: 576px) {
    .limited-time > div > div > button,
    .limited-time > div > div > span {
        padding: 0.5rem 0 !important;
    }
}

@media (max-width: 840px) {
    .limited-time > div > div > button,
    .limited-time > div > div > span {
        padding: 0.5rem 0 !important;
    }
}

.donations-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .donations-section .donation-item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

.donation-item .donation-item-info {
    display: flex;
    gap: 1rem;
}

    .donation-item-info .donation-item-image {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .donation-item-info .donation-item-image > img {
        width: 95px;
    }

        .donation-item-info .donation-item-text {
            display: flex;
            flex-direction: column;
            padding-top: 0.5rem;
            gap: 0.5rem;
        }

    .donation-item-info .donation-item-text > span:first-of-type {
        font-weight: bold;
    }

.donation-item .donation-options > div > ul > li {
    font-size: 14px;
    height: 40px;
}
.checkout-location > address {
    font-style: normal;
}

.checkout-contactless {
    padding-top: 1rem;
}

    .checkout-contactless > p {
        padding-top: 0.6rem;
        font-size: 0.9rem;
    }

footer {
    width: 100%;
    margin-top: auto;
}

#nav_order {
    --order-type-navbar-background-color: var(--color-background-main);
    --order-type-navbar-color: var(--color-text-tertiary);

    display: flex;
    width: 100%;
    height: var(--layout-order-type-navbar-height);
    background-color: var(--order-type-navbar-background-color);
    justify-content: space-between;
    padding: 8px 15px;
    color: var(--order-type-navbar-color);
    cursor: pointer;
    box-shadow: var(--shadow);
}

    #nav_order > * {
        display: flex;
    }

#nav_order_type {
    color: var(--order-type-navbar-color);
    padding-left: 6px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

#nav_order_address {
    display: flex;
    align-items: center;
    font-size: 13px;
    vertical-align: middle;
}

#nav_order_arrow {
    transform: rotate(-180deg);
    display: inline-flex;
    align-items: center;
    margin-left: 1em;
}

.confirmation-container {
    --confirmation-border-color: var(--color-border-default);

    width: 60vw;
    margin: 2rem;
    overflow-y: auto;
}

.confirmation-content {
    display: flex;
    gap: 5rem;
}

.confirmation-first-section {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.confirmation-second-section {
    flex: 1;
}

.confirmation-thank-you-section h3 {
    text-transform: uppercase;
}

.confirmation-order-summary h3 {
    text-transform: uppercase;
}

.confirmation-order-summary-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 0;
    gap: 1.5rem;
}

.confirmation-order-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.confirmation-header {
    padding-bottom: 0.3rem;
}

    .confirmation-header > p {
        font-weight: bold;
        font-size: 18px;
    }

.confirmation-details-group > h4 {
    padding-bottom: 0.3rem;
    font-weight: bold;
    font-size: 17px;
}

.confirmation-group-phone {
    display: flex;
}

    .confirmation-group-phone > div:first-of-type {
        flex: 1;
    }

    .confirmation-group-phone > div:last-of-type {
        align-content: center;
    }

    .confirmation-group-phone a {
        text-decoration: none;
        font-size: 1rem;
    }

#a_confirmation_phone{
    display: none;
}

.confirmation-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--confirmation-border-color);
    border-radius: var(--radius);
}

@media (max-width: 480px) {
    .confirmation-container {
        width: unset;
        margin: unset;
        scrollbar-width: none; /* Firefox: Hide scrollbar */
        -ms-overflow-style: none; /* IE and Edge: Hide scrollbar */
    }

        .confirmation-container::-webkit-scrollbar {
            display: none; /* Webkit-based browsers: Hide scrollbar */
        }

    .confirmation-content {
        flex-direction: column;
        gap: 2rem;
    }

    #a_confirmation_phone{
        display: unset;
    }

    .confirmation-footer {
        position: sticky;
        bottom: 0;
        background-color: var(--modal-background-color);
        margin-top: 0;
        padding: 1rem 0 0 0;
        border: unset;
        border-radius: unset;
    }
}

#modal_account_contact {
    flex-direction: column;
}

    #modal_account_contact button {
        text-transform: uppercase;
    }

    #modal_account_contact :is(#account_contact_terms, [id^="account_contact_marketing"]) {
        display: flex;
        margin: 0.618em 0;
    }

    #modal_account_contact :is(#lbl_account_contact_terms, [id^="lbl_account_contact_marketing"]) {
        font-size: 0.8em;
        user-select: none;
        padding-top: 0.5em;
        padding-left: 0.25em;
        font-weight: normal;
    }

    #modal_account_contact .checkRadio {
        align-items: flex-start;
    }

    #modal_account_contact .password-toggle {
        display: flex;
        justify-content: space-between;
    }

    #modal_account_contact .password-toggle > * {
        display: block;
    }

        #modal_account_contact .password-toggle [class^="password-toggle-"] {
            font-size: 0.75em;
            font-weight: normal;
        }

    #modal_account_contact #phone_row {
        display: flex;
    }

    #modal_account_contact #phone_row select {
        display: block;
        width: unset;
        flex-grow: 1;
        padding: 0.5em;
        max-width: 8em;
    }

    #modal_account_contact #phone_row input {
        display: block;
        flex-grow: 2;
        margin-left: 1em;
    }
#password_modal_subtitle {
    padding: 1em 0;
}

.account_confirm_delete_buttons {
    margin-top: 1em;
    display: flex;
    gap: 1em;
}

.location-selector-buttons {
    display: flex;
    gap: 1em;
}

.location-selector-title{
    text-align: center;
}

@media (max-width: 480px) {
    #modal_location_selector {
        min-width: 90dvw;
    }
}
.fundraiser-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem;
}

.fundraiser-input {
    text-align: center;
    margin: 0 1em 1em 1em;
    width: 20vw;
}

    .fundraiser-input label {
        display: block;
        font-size: 1.3rem;
        margin-bottom: 0.5em;
    }

    .fundraiser-input input {
        width: 80%;
    }

.fundraiser-buttons {
    display: flex;
    gap: 1rem;
}

    .fundraiser-buttons > button {
        flex: 1;
        text-transform: uppercase;
    }
#modal_hamburger {
    --hamburger-ellipse-bg-color: var(--color-background-primary);
    --hamburger-color: var(--color-accent);
    --hamburger-footer-color: var(--color-disabled);
    --width: min(25em, 80vw);

    position: fixed;
    width: var(--width);
    min-width: var(--width);
    transition: transform 0.33s ease;
    transform: translateX(calc(-1 * var(--width)));
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1em;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 15;
    user-select: none;
    top: 0;
    left: 0;
    border-radius: 0;
    align-items: unset;
}

#modal_hamburger.open {
    transform: none;
}

#modal_hamburger:not(.open) {
    box-shadow: none;
}

#modal_hamburger .gradient {
    display: block;
    position: fixed;
    bottom: 0;
    transform: translateX(calc(-1 * var(--width)));
    width: var(--width);
    height: 4em;
    background: linear-gradient( to top, hsla(0, 0%, 100%, 1.0) 0%, hsla(0, 0%, 100%, 0.5) 10%, hsla(0, 0%, 100%, 0.25) 20%, hsla(0, 0%, 100%, 0.125) 30%, hsla(0, 0%, 100%, 0.0625) 40%, hsla(0, 0%, 100%, 0) 100% );
}

#modal_hamburger::-webkit-scrollbar {
    display: none;
}

#modal_hamburger .fancy-title {
    font-size: 2.5em;
    max-width: 100%;
}

#hamburger_loyalty {
    z-index: 3;
    padding-bottom: 1em;
}

#modal_hamburger #hamburger_loyalty_account_name {
    text-overflow: ellipsis;
    overflow-x: hidden;
}

#hamburger_ellipse {
    content: "";
    position: absolute;
    background-color: var(--hamburger-ellipse-bg-color);
    border-radius: 0 0 50% 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    z-index: -1;
}

#hamburger_loyalty #hamburger_login {
    width: 100%;
    margin: 0.618em 0;
    text-transform: uppercase;
}

#hamburger_loyalty .sign-up {
    text-align: center
}

#hamburger_loyalty #hamburger_signup {
    transition: opacity 0.3s ease;
}

    #hamburger_loyalty #hamburger_signup:hover {
        opacity: 0.5;
    }

#hamburger_loyalty_points_value {
    font-weight: bold;
}

#hamburger_loyalty_title {
    display: flex;
    flex-direction: column;
    word-wrap: anywhere;
}

#hamburger_logout {
    color: var(--hamburger-color);
    border: 2px solid currentColor;
    text-transform: uppercase;
    min-height: 3em;
    margin-top: 1em;
}

#hamburger_items {
    margin-top: 1em;
    margin-bottom: auto;
    user-select: none;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

:is(#hamburger_items > *), #hamburger_language {
    transition: opacity 0.25s ease;
    text-decoration: none;
    font-weight: 600;
    color: var(--hamburger-color);
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    padding: 0.5em 0;
}

#hamburger_items > *:hover {
    opacity: 0.5;
}

#modal_hamburger [class^="icon-"]:before {
    display: inline-block;
    width: 2em;
    margin-right: 0.5em;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    transform: translateY(-0.1em)
}

#hamburger_language label {
    display: flex;
}

#hamburger_language select {
    border-radius: 0 !important;
    padding: 0;
    border: none;
    color: currentColor;
    text-align: left;
    padding-right: 1em;
    font-weight: inherit;
    font-size: inherit;
    vertical-align: middle;
    text-transform: uppercase;
    transform: translate(-0.2em, 0.02em);
    background-color: var(--color-background-main);
}

    #hamburger_language select option {
        font-weight: inherit;
        margin-right: auto;
    }

    #hamburger_language select:focus-visible {
        outline: none;
    }

    #hamburger_language select::marker {
        color: currentColor
    }

#hamburger_footer {
    color: var(--hamburger-footer-color);
    margin-top: 0.5em;
}

    #hamburger_footer > *:first-child {
        border-top: 1px solid var(--hamburger-footer-color)
    }

    #hamburger_footer > a {
        color: inherit;
        display: block;
        transition: opacity 0.5s ease;
        text-decoration: none;
        text-transform: uppercase;
        padding-top: 0.25em;
    }

@media (hover: hover) and (pointer: fine) {
    #hamburger_footer > a:hover {
        opacity: 0.5;
    }
}

#modal_header_account {
    --header-account-color: var(--color-accent);

    position: fixed;
    top: calc(var(--layout-header-height) + 0.5em);
    left: unset;
    right: 7em;
    transform: none;
    padding: 1em;
    min-height: unset;
    width: fit-content;
    min-width: 20em;
    height: unset;
    border-radius: 1em !important;
}

    #modal_header_account .fancy-title {
        font-size: 3em;
    }

#header_account_loyalty_points {
    font-size: 0.9em;
    padding-bottom: 1em;
}

#header_account_loyalty_points_value {
    font-weight: bold;
}

#header_account_language label {
    display: flex;
}

:is(#header_account_items > *), #header_account_language {
    transition: opacity 0.25s ease;
    text-decoration: none;
    font-weight: 600;
    color: var(--header-account-color);
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    padding: 0.25em 0;
}

#modal_header_account [class^="icon-"]:before {
    display: inline-block;
    width: 2em;
    margin-right: 0.5em;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    transform: translateY(-0.1em)
}

#header_account_language select {
    border-radius: 0 !important;
    padding: 0;
    border: none;
    color: currentColor;
    text-align: left;
    padding-right: 1em;
    font-weight: inherit;
    font-size: inherit;
    vertical-align: middle;
    text-transform: uppercase;
    transform: translate(-0.2em, 0.02em);
    background-color: var(--color-background-main);
}

    #header_account_language select option {
        font-weight: inherit;
        margin-right: auto;
    }

    #header_account_language select:focus-visible {
        outline: none;
    }

    #header_account_language select::marker {
        color: currentColor
    }

#header_account_logout {
    border-color: currentColor;
    margin-top: 1em;
}

#header_account_signup {
    margin-top: 0.5em;
}
.challenge-main-div {
    --challenge-border-color: var(--color-border-default);
    --challenge-member-list-background-color: var(--modal-background-color);
    --challenge-member-background-color: var(--color-background-secondary);
    --challenge-group-title-color: var(--color-background-secondary);
    --challenge-title-color: var(--color-background-primary);

    padding: 1rem 2rem 0 2rem;
    flex: 1;
    width: 36vw;
}

.challenge-search {
    display: flex;
    flex-direction: column;
}

    .challenge-search > label {
        padding-bottom: 1rem;
    }

.member-list {
    margin: 1rem 0;
    max-height: 60vh;
    overflow-y: auto;
}

    .member-list .member-check {
        background-color: var(--challenge-member-list-background-color);
    }

    .member-list .member-check:first-of-type > .checkRadio {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        border-top: 1px solid var(--challenge-border-color);
    }

    .member-list .member-check:last-of-type > .checkRadio {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }

        .member-list .member-check > div.checkRadio {
            background-color: var(--challenge-member-background-color);
            padding: 0.7rem;
            border-left: 1px solid var(--challenge-border-color);
            border-right: 1px solid var(--challenge-border-color);
            border-bottom: 1px solid var(--challenge-border-color);
        }

        .member-list .checkRadio > label {
            white-space: normal;
        }

.event-list {
    border-left: 1px solid var(--challenge-border-color);
    border-right: 1px solid var(--challenge-border-color);
    border-bottom: 1px solid var(--challenge-border-color);
}

    .event-list > .checkRadio {
        padding: 0.7rem;
        border-radius: var(--radius);
        padding-left: 1.5rem;
    }

.challenge-list-group {
   border-left: 1px solid var(--challenge-border-color);
   border-top: 1px solid var(--challenge-border-color);
   border-radius: var(--radius);
   margin-left: 4rem;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
}

    .challenge-list-group > .group-title {
        padding: 0.7rem;
        background-color: var(--challenge-group-title-color) !important;
        border-top-left-radius: var(--radius);
        border-bottom: 1px solid var(--challenge-border-color);
    }
    
    .challenge-list-group > .group-item {
        border-bottom: 1px solid var(--challenge-border-color);
    }

    .challenge-list-group > .group-item:last-of-type,
    .challenge-list-group > .group-item-event:last-of-type {
        border-bottom: 0;
    }

        .challenge-list-group > .group-item > .checkRadio,
        .challenge-list-group > .group-item-event > .checkRadio {
            padding: 0.7rem;
            border-radius: var(--radius);
            padding-left: 1.5rem;
        }

    .challenge-list-group > .group-item-open {
        display: flex;
        gap: 0.5rem;
        padding: 0.7rem 0.7rem 0.7rem 1.5rem;
    }

.sub-member-group .sub-member {
    border-bottom: 1px solid var(--challenge-border-color);
    padding-left: 2rem;
}

    .sub-member-group .sub-member:last-of-type {
        border-bottom: 0;
    }

.challenge-titles {
    padding: 0.7rem;
    background-color: var(--challenge-title-color) !important;
    border-top-left-radius: var(--radius);
    border-bottom: 1px solid var(--challenge-border-color);
}

    .challenge-titles > label {
        max-width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.add-remove-extra {
    background-color: transparent;
    font-weight: bold;
    padding: 0 10px;
}

#fieldset_challenge_members {
    border: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

@media (max-width: 480px) {
    .challenge-main-div {
        width: unset;
    }

    .member-list {
        max-height: 60vh !important;
    }

    .challenge-list-group {
        margin-left: 2.5rem;
    }
}

.hide-show-siblings ~ .hide-show-onchecked {
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

.hide-show-siblings:checked ~ .hide-show-onchecked {
    max-height: 2500px !important;
    transition: max-height 0.5s ease-in-out !important;
}
#modal_customize_item {
    max-width: unset;
    padding: 0 !important;
}

#modal_customize_item_delete {
    background-color: var(--modal-background-color);
    border-radius: 50px;
    padding: 10px;
    top: 20px;
    right: 20px;
    z-index: 20;
}

.customize-item-container {
    --customize-item-calorie-price-color: var(--color-text-secondary);
    --customize-item-section-header-bg-color: var(--color-background-primary);
    --customize-item-section-header-option-color: var(--color-text-tertiary);

    --customize-item-footer-bg-color: var(--color-background-primary);
    --customize-item-footer-quantity-bg-color: var(--color-background-main);
    --customize-item-footer-quantity-bg-color-hover: var(--color-background-main-hover);
    --customize-item-footer-quantity-border-color: var(--color-text-tertiary);

    display: flex;
    flex-direction: column;
    max-width: 100vw;
    min-width: 40vw;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Scrollable Content */
.customize-item-content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox: Hide scrollbar */
    -ms-overflow-style: none; /* IE and Edge: Hide scrollbar */
}

    .customize-item-content::-webkit-scrollbar {
        display: none; /* Webkit-based browsers: Hide scrollbar */
    }

.customize-item-image {
    max-height: 40vh;
    overflow: hidden;
    display: flex;
    align-items: start;
    position: relative;
}

    .customize-item-image > img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

#btn_customize_item_favorite {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: var(--modal-background-color);
    border-radius: 50px;
    padding: 10px;
    z-index: 20;
    border: none;
    cursor: pointer;
}

    #btn_customize_item_favorite:hover {
        opacity: 0.25;
        transition: all 0.25s ease;
    }


.pizza-details {
    padding: 1.2rem;
    position: sticky;
    top: 0;
    background-color: var(--modal-background-color);
    z-index: 10;
}

    .pizza-details > h1 {
        font-size: 21px;
    }

.pizza-details-calories {
    font-size: 14px;
    color: var(--customize-item-calorie-price-color);
}

.pizza-details-description {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 1rem;
}

/* Size Section */
.item-section-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    background-color: var(--customize-item-section-header-bg-color);
    padding: 10px 1.2rem;
    align-items: center;
}

    .item-section-header > h2 {
        text-transform: uppercase;
        font-size: 17px;
        flex: 1;
    }

    .item-section-header > span {
        color: var(--customize-item-section-header-option-color);
        font-size: 14px;
    }

.customize-item-modifier-wrapper {
    padding: 24px 25px;
}

    .customize-item-modifier-wrapper > div {
        padding-bottom: 12px;
    }

        .customize-item-modifier-wrapper > div:last-of-type {
            padding-bottom: 0;
        }

.customize-item-modifier {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .customize-item-modifier input {
        padding: 0.6rem;
    }

.customize-item-modifier-label {
    display: flex !important;
    font-weight: 500 !important;
    margin: 0 !important;
    flex-grow: 1;
    cursor: pointer;
}

.customize-item-modifier-label-image {
    height: 40px;
    width: 40px;
    display: flex;
    margin-right: 25px;
}

.customize-item-modifier-label-info {
    display: flex;
    flex-direction: column;
}

    .customize-item-modifier-label-info .price {
        font-size: 12px;
        color: var(--customize-item-calorie-price-color);
    }

/* Bottom Sticky Bar */
.bottom-bar {
    display: flex;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    background-color: var(--customize-item-footer-bg-color);
    padding: 12px 20px;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: var(--shadow);
}

.quantity-selector {
    display: flex;
    border-radius: var(--radius);
    background-color: var(--customize-item-footer-quantity-bg-color);
    border: 2px solid var(--customize-item-footer-quantity-border-color);
}

    .quantity-selector button {
        border: none;
        padding: 0;
        background-color: unset;
        cursor: pointer;
        font-weight: bold;
    }

        .quantity-selector button:hover {
            background-color: var(--customize-item-footer-quantity-bg-color-hover);
        }

        .quantity-selector button.decrement {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .quantity-selector button.increment {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .quantity-selector button > span {
            display: flex;
            justify-content: center;
        }

    .quantity-selector .quantity {
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-left: 2px solid var(--customize-item-footer-quantity-border-color);
        border-right: 2px solid var(--customize-item-footer-quantity-border-color);
    }

    .quantity-selector > * {
        flex: 1;
        text-align: center;
        width: 50px;
    }

.add-to-order {
    display: flex;
    gap: 8px;
}

.customize-item-premodifier-selection {
    padding: 10px 40px 0 40px;
}

.customize-item-half-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.customize-item-instruction {
    font-size: 14px;
}

.customize-item-instruction-group-header {
    display: flex;
}

    .customize-item-instruction-group-header > h3 {
        flex: 1;
    }

    .customize-item-instruction-group-header > span {
        color: var(--customize-item-section-header-option-color);
        font-weight: bold;
    }

.customize-item-instruction-group {
    margin-left: 20px;
}

    .customize-item-instruction-group > label {
        padding: 8px 0;
    }

        .customize-item-instruction-group > label:last-of-type {
            padding-bottom: 0;
        }

/* Smartphones, portrait and landscape */
@media (max-width: 480px) {
    .customize-item-container {
        max-width: 100vw;
        min-width: unset;
        width: unset;
        border-radius: unset;
        min-height: 100dvh;
        max-height: 100dvh;
    }

    .customize-item-image {
        height: 30vh;
    }

    .customize-item-premodifier-selection {
        padding: 10px 0 0 0;
    }

        .customize-item-premodifier-selection > .segmented-button {
            overflow-x: auto;
        }

            .customize-item-premodifier-selection > .segmented-button > button {
                font-size: 14px;
                padding: 6px 10px;
            }

    .bottom-bar {
        gap: 5px;
    }

    .quantity-selector {
        width: 112px;
    }

    .quantity-selector > * {
        flex-grow: 1;
        flex-shrink: 0;
    }

    .quantity-selector .quantity {
        flex-grow: 0;
        flex-basis: 32px;
    }

    .quantity-selector button {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .add-to-order {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}
#modal_favorite {
    --favorite-item-description-color: var(--color-text-secondary);

    padding: 0;
}

.modal-title {
    font-size: 18px;
}

.modal-content {
    width: 353px;
    padding: 20px;
}

#favorite_item_name {
    padding: .5rem;
    margin-top: 8px;
    margin-bottom: 8px;
}

.modal-description {
    font-size: 12px;
    color: var(--favorite-item-description-color);
    padding-bottom: 8px;
}

.modal-actions {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

    .modal-actions > button {
        flex: 1;
    }

@media (max-width: 480px) {
    #modal_favorite {
        border-radius: 1em !important;
        width: 90vw !important;
    }
}
#modal_cookie_preference {
    top: unset;
    left: unset;
    right: 0;
    bottom: 0;
    transform: none;
    position: fixed;
    width: 40em;
    min-width: 40em;
    z-index: 15;
    border-radius: 8px !important;
}

.cookie-preference-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 20px;
}

.cookie_preference_text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cookie_preference_header {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 16pt;
}

.cookie-preference-btn {
    width:100%;
    padding-left: 20px;
    padding-right: 20px;
    height: 40px;
}

@media (max-width: 600px) {
    #modal_cookie_preference {
        width: 100dvw !important;
        min-width: 100dvw !important;
        height: 40dvh;
        max-height: unset;
        min-height: unset;
    }
}
