/* Fonts */
@font-face {
    font-family: "BentonSans";
    src: url("../fonts/benton-sans.eot");
    src: url("../fonts/benton-sans.eot?") format("embedded-opentype"),
         url("../fonts/benton-sans.woff") format("woff"),
         url("../fonts/benton-sans.ttf") format("truetype"),
         url("../fonts/benton-sans.svg#web") format("svg");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "BentonSans-Light";
    src: url("../fonts/BentonSans-Light.eot");
    src: url("../fonts/BentonSans-Light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/BentonSans-Light.woff") format("woff"),
         url("../fonts/BentonSans-Light.ttf") format("truetype"),
         url("../fonts/BentonSans-Light.svg#BentonSans-Light") format("svg");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "BentonSans-Medium";
    src: url("../fonts/benton-sans-medium.eot");
    src: url("../fonts/benton-sans-medium.eot?") format("embedded-opentype"),
         url("../fonts/benton-sans-medium.woff") format("woff"),
         url("../fonts/benton-sans-medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "BentonSans-Bd";
    src: local("Benton Sans Bold");
    src: url("../fonts/benton-sans-bd.eot"),
         url("../fonts/benton-sans-bd.eot?") format("embedded-opentype"),
         url("../fonts/benton-sans-bd.woff") format("woff"),
         url("../fonts/benton-sans-bd.ttf") format("truetype"),
         url("../fonts/benton-sans-bd.svg#web") format("svg");
    font-style: normal;
    font-weight: 700;
}

/* Base */
body { font-family: "BentonSans", sans-serif; background-color: #F1F3F5; }

/* Colors */
.color-585858 { color: #585858; }
.color-006FCF { color: #006FCF; }
.color-53565A { color: #53565A; }
.bg-5B5B5B { background-color: #5B5B5B !important; }
.bg-EDEDED { background-color: #EDEDED; }
.bg-97999B { background-color: #97999B; }

/* Typography */
.light { font-family: "BentonSans-Light", sans-serif; font-weight: 300; }
.regular { font-family: "BentonSans", sans-serif; font-weight: 400; }
.medium { font-family: "BentonSans-Medium", sans-serif; font-weight: 500; }
.bold { font-family: "BentonSans-Bd", "BentonSans", sans-serif; font-weight: 700; }
.font14 { font-size: 14px; line-height: normal; }
.font20 { font-size: 20px; line-height: normal; }
.font24 { font-size: 24px; line-height: normal; }
.font28 { font-size: 28px; line-height: normal; }
.font30 { font-size: 30px; line-height: normal; }

/* Restaurant locations */
.restaurant-location { max-width: 900px; margin: 0 auto 55px; }
.restaurant-location:last-child { margin-bottom: 0; }
.location-title { display: flex; align-items: center; gap: 25px; margin-bottom: 25px; }
.location-title > span { flex: 1; height: 1px; background-color: #53565A; }
.location-name { display: flex; align-items: center; gap: 8px; color: #53565A; white-space: nowrap; font-size: 26px; line-height: normal; }
.location-title img { width: 32px; height: auto; }
.restaurant-location .row img { width: auto; max-height: 75px; }

/* App / stores */
.app-experiences-intro { gap: 1.5rem; margin-bottom: 1.5rem; }
.app-experiences-steps { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.75rem 0 1.75rem 0; }
.app-steps-numbered { display: flex; flex-direction: column; gap: 1.25rem; }
.app-step { gap: 1.25rem; position: relative; }
.experiences-logo { flex-shrink: 0; width: 88px; }
.app-icon { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; }
.experiences-logo img { display: block; width: 100%; height: auto; }
.app-icon img { display: block; width: auto; max-width: 36px; max-height: 36px; height: auto; }
.app-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    color: #97999B;
    font-family: "BentonSans-Bd", "BentonSans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.app-steps-numbered .app-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: -1.25rem;
    width: 2px;
    background-color: #fff;
}
.app-steps-numbered .app-step p { padding-top: 6px; }
.experiences-logo { flex-shrink: 0; width: 88px; }
.app-icon { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; }
.experiences-logo img { display: block; width: 100%; height: auto; }
.app-icon img { display: block; width: auto; max-width: 36px; max-height: 36px; height: auto; }
.app-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    color: #97999B;
    font-family: "BentonSans-Bd", "BentonSans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}
.store-button { display: inline-block; }
.store-button img { display: block; max-width: 140px; height: auto; }

/* FAQ accordion */
#accordionFAQ .accordion-button { font-family: "BentonSans", sans-serif; color: #585858; font-weight: 300 !important; }
#accordionFAQ .accordion-button:not(.collapsed) { color: #585858; background-color: #ffffff; box-shadow: none; }
#accordionFAQ .accordion-button:focus { box-shadow: none; }
#accordionFAQ .accordion-body { color: #585858; }
#accordionFAQ .accordion-button img { flex-shrink: 0; }
p.mb-0.pt-4 {
    font-size: 17px;
    font-weight: 300 !important;
}

/* Terms accordion */
.terms-accordion .accordion-item { background: transparent; }
.terms-button { font-family: "BentonSans", sans-serif; font-size: 24px; font-weight: 300; color: #53565A; background-color: #EDEDED; border: 0; border-radius: 12px !important; padding: 1.5rem 3.25rem; box-shadow: none; }
.terms-button:not(.collapsed) { color: #585858; background-color: #EDEDED; box-shadow: none; border-radius: 12px 12px 0 0 !important; }
.terms-button:focus { box-shadow: none; }
.terms-button::after { margin-left: auto; }
.terms-body { color: #585858; background-color: #EDEDED; border-radius: 0 0 12px 12px; padding: 1rem 1.25rem 1.25rem; font-size: 12px; line-height: 1.5; }
.terms-body p { margin-bottom: 0.75rem; }

/* Links */
.text-center a { transition: all 0.2s ease-in-out; }
.text-center a:hover { background-color: #006FCF !important; border-color: #006FCF !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 111, 207, 0.3); }

/* Responsive */
@media (max-width: 1100px) {
    .font28-mob { font-size: 28px; }
    .font26-mob { font-size: 26px; }
    .font20-mob { font-size: 20px; }
    .mn-35-mobile { margin-top: -35px !important; }
}

@media (max-width: 1000px) {
    .font26-mob { font-size: 22px; }
}

@media (max-width: 767.98px) {
    .font28-mob { font-size: 22px; }
    .font26-mob { font-size: 20px; }
    .font20-mob { font-size: 16px; }
    .font20-mobile { font-size: 18px !important; }
    .restaurant-location { margin-bottom: 40px; }
    .location-title { gap: 12px; margin-bottom: 20px; }
    .location-name { font-size: 14px; }
    .location-title img { width: 28px; }
    .restaurant-location .row { --bs-gutter-y: 2rem; }
    .restaurant-location .row img { max-width: 120px; max-height: 60px; }
    .app-experiences-media { max-height: 320px; overflow: hidden; }
    .app-experiences-media img { object-position: center top; }
    .app-experiences-intro { gap: 0.75rem; margin-bottom: 0.85rem; }
    .app-experiences-intro .font20 { font-size: 14px; }
    .app-experiences-intro .font24 { font-size: 16px; }
    .app-experiences-steps { gap: 0.65rem; margin: 1.75rem 0 1.75rem 0; }
    .app-steps-numbered { gap: 0.65rem; }
    .app-step { gap: 0.75rem; }
    .app-step .font20 { font-size: 14px; line-height: 1.25; }
    .experiences-logo { width: 56px; }
    .app-icon { width: 28px; }
    .app-icon img { max-width: 28px; max-height: 28px; }
    .app-step-num { width: 28px; height: 28px; font-size: 13px; }
    .app-steps-numbered .app-step:not(:last-child)::after {
        left: 13px;
        top: 28px;
        bottom: -0.65rem;
    }
    .store-button img { max-width: 110px; }
    #accordionFAQ .accordion-button { font-size: 18px !important; padding: 18px 12px !important; }
    #accordionFAQ .accordion-button img { width: 30px !important; height: 36px !important; margin-right: 15px !important; }
    #accordionFAQ .accordion-body { font-size: 16px !important; padding-left: 55px !important; }
    .terms-button { font-size: 18px; padding: 1.5rem 1rem; }
    .terms-body { font-size: 10px; padding: 0 1rem 1rem; }
}

@media (max-width: 568px) {
    .font28-mob { font-size: 18px; }
    .font26-mob { font-size: 15px; }
    .font20-mob { font-size: 12px; }
    .font20 { font-size: 18px; }
    .font24 { font-size: 20px; }
    .font30 { font-size: 26px; }
    .restaurant-location .row img { max-width: 110px; max-height: 55px; }
    .app-experiences-intro .font20 { font-size: 13px; }
    .app-experiences-intro .font24 { font-size: 15px; }
    .app-step .font20 { font-size: 13px; }
    .experiences-logo { width: 48px; }
    .app-icon { width: 24px; }
    .app-icon img { max-width: 24px; max-height: 24px; }
    .app-step-num { width: 24px; height: 24px; font-size: 12px; }
    .app-steps-numbered .app-step:not(:last-child)::after {
        left: 11px;
        top: 24px;
    }
    .store-button img { max-width: 100px; }
    #accordionFAQ .accordion-button { font-size: 16px !important; }
    #accordionFAQ .accordion-button img { width: 28px !important; height: 34px !important; margin-right: 12px !important; }
    #accordionFAQ .accordion-body { font-size: 14px !important; padding-left: 45px !important; }
}