@font-face {
    font-family: "Fredoka One";
    src: url('fonts/fredoka/FredokaOne-Regular.ttf');
    src: url('fonts/fredoka/FredokaOne-Regular.ttf') format('truetype');
  }

@font-face {
    font-family: "Noto";
    src: url('fonts/noto/NotoSerifOriya.ttf');
    src: url('fonts/noto/NotoSerifOriya.ttf') format('truetype');
  }  

* { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}


html {
    scroll-behavior: smooth;
    overflow-x: clip;
    width: 100%;
  }

html::-webkit-scrollbar {
    display: none;
}

body{
    background: #1b1a19;
}

a{
    text-decoration: none;
}

.header{
    background: #110c3e;
    background-image: url("img/pauluspizza_bg.png"); /* fallback */
   background-image: linear-gradient(to right top, #4d2a00f7, #a33210d9, #2b5877e3, #4e7ca5e8, #648fc1eb, #8395d4db, #a898e1f5, #cd9bddeb, #ff8dccd1, #ff8b98a8, #ff9b6294, #f9b830c7), url(img/pauluspizza_bg.png); /* W3C */
    /* background: linear-gradient(133deg, #110c3e, #10051c); */
      background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  background-size: cover;
    height: 98vh;
    /* padding-top: 5vh; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    border-radius: 19px;
}

.status{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-shadow: -1px 1px 6px #0000002b;
    background: linear-gradient(315deg, #8e1f000a, #022a5485);
    width: fit-content;
    border-radius: 1px;
    margin: auto;
    margin-bottom: 40px;
    margin-top: -2px;
    box-shadow: inset 0 0 13px 1px #00000021;
    /* text-shadow: -2px 2px 3px #ffffffd4; */
    width: 100%;
}

.status-lampe{
    margin: 8px;
}

.status-nachricht{
    text-transform: uppercase;
    /* font-style: oblique; */
    font-weight: bold;
    color: #f1f1f1eb;
    margin: 3px 6px;
    font-family: monospace;
}

.status-open {
    color: rgb(111 213 128);
    text-shadow: 0 0 16px #44fdb873;
}
.status-opening {
    color: rgb(241, 240, 135);
    text-shadow: 0 0 16px #f5f389b0;
}
.status-closed {
    color: rgb(53, 46, 46);
}
.status-closing {
    color: rgb(243 92 20);
    text-shadow: 0 0 16px #fd7f44;
}

#header-logo{
    display: block;
    margin: 0px auto 10px;
    position: relative;
    max-height: 35vh;
    max-width: 93vw;
    margin-bottom: 3vh;
    box-sizing: border-box;
    overflow: hidden;
    animation: float 6s ease-in-out infinite;
}

.nav-logo{
    max-height: 23px;
    /* box-shadow: 20px 0px 4px 0px #e4dacc; */
    min-height: -webkit-fill-available;
    z-index: 1;
    min-width: 72px;
}

.nav-logo img{
    max-height: 43px;
    margin-top: -2px;
    margin-left: 12px;
    top: 0;
    position: fixed;
}

.call-btn {
    color: #ffffffbf;
    font-size: 1.5em;
    font-family: monospace;
    margin: auto;
    line-height: 1em;
    font-weight: 700;
    /* text-shadow: 0px 1px 3px #707070; */
    text-align: center;
    display: block;
    /* position: absolute; */
    /* bottom: 177px; */
    font-weight: 200;
    background: -webkit-linear-gradient(330deg, #ecf6ff5e, #fef0dc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
}

.call-btn a {
    color: #fffbece0;
    text-decoration: none;
    text-shadow: 0 0 14px #00000038;
}

.addr-btn {
    color: #98362169;
    width: 90vw;
    max-width: 84vw;
    font-size: 1.0em;
    font-family: system-ui;
    margin: auto;
    line-height: 1em;
    font-weight: 700;
    /* text-shadow: 0px 1px 3px #000000; */
    text-align: center;
    margin-bottom: 11px;
    font-style: oblique;
    margin-top: 0px;
    /* margin-left: 1px; */
    margin-bottom: 2px;
    opacity: 0;
}

.order-now{
    font-family: Fredoka One;
    color: #fff7e9;
    text-transform: uppercase;
    font-style: oblique;
    place-self: center;
    text-shadow: -5px 4px 8px #282c5f;
}

.order-btn {
color: #f36805;
    background: linear-gradient(204deg, #ffe7d6, #fff3e3);
    padding: 20px 15px;
    font-size: 1.7em;
    font-family: system-ui;
    margin: auto;
    line-height: 1em;
    border-radius: 22px;
    border-style: groove;
    border-width: 2px;
    border-color: #5b5a58e6;
    font-weight: 500;
    box-shadow: inset 1px -2px 9px #80360e14, 0px 0px 6px 3px #fcb23f17;
    /* text-shadow: 0px 1px 3px #2c0606; */
    text-align: center;
    /* display: block; */
    /* position: absolute; */
    /* bottom: -250px; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    cursor: pointer;
    font-family: Fredoka One;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.order-btn:hover {
box-shadow: inset 1px -2px 9px #ffc36a, 0px 0px 6px 3px #ff5e009e;
    background: linear-gradient(161deg, #ff4e4e, #ffb24ae3);
    font-style: oblique;
    color: #fff7ea;
    text-shadow: 0px 1px 3px #2c0606;
}

.order-btn-2 {
color: #fff7e8;
    background: linear-gradient(161deg, #132702, #051004);
    padding: 20px 15px;
    font-size: 1.7em;
    font-family: system-ui;
    margin: auto;
    line-height: 1em;
    border-radius: 22px;
    border-style: groove;
    border-width: 2px;
    border-color: #5b5a58e6;
    font-weight: 500;
    box-shadow: inset 1px -2px 9px #858d0a47, 0px 0px 6px 3px #0f6d1729;
    text-shadow: 0px 1px 3px #2c0606;
    text-align: center;
    /* display: block; */
    /* position: absolute; */
    /* bottom: -250px; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    cursor: pointer;
    font-family: Fredoka One;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.order-btn-2:hover {
box-shadow: inset 1px -2px 9px #375d14, 0px 0px 6px 3px #91ff0045;
    background: linear-gradient(161deg, #70d33d, #1b6b30e3);
    font-style: oblique;
}

.order-btns{
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.speisekarte{
    background: linear-gradient(133deg, #10061c, #f06e18);
    /* padding-top: 5vh; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    border-radius: 19px;
    overflow: hidden!important;
}

.speisekarte .container{
    background: linear-gradient(285deg, #fbaf4e, #f26e3c);
    margin: 4px;
    border-radius: 15px;
    box-shadow: 0 0 9px #0000003d, inset 0 0 5px #ffffff80;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu-title{
    font-family: "Fredoka One", sans-serif;
    font-style: oblique;
    font-weight: 200;
    margin-left: 21px;
    font-size: 2.2em;
    color: #fff2e1;
    text-shadow: -1px 1px 2px #7c7c7c70, 1px -1px 4px #f3bd8e17;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.listeneintrag {
    border-style: dotted;
    background: linear-gradient(303deg, #211a4c, #959595e8);
    border-radius: 6px;
    margin: 1px 2px;
    padding: 14px;
    border-color: #6f719363;
    border-width: 2px;
    cursor: pointer;
    transition: all 0.2s linear;
    opacity: 0.95;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 50px;
    max-height: 55px;
    overflow-x: clip;
    overflow-y: clip;
    position: relative;
    background: #fff6ebe6;
}

.listeneintrag.toggle {
    opacity: 1;
    max-height: 3600px;
    cursor: auto;
    z-index: 1;
    padding-bottom: 0px;
    border-color: #ffc2549e;
    background: #170f2e;
    transition: all 0.1s linear;
}

.listeneintrag:hover{
    border-color: #ffa500;
}

.listeneintrag .headline{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: baseline;
    justify-content: space-between;
    position: relative;
}

.headline .icons{
    width: 100%;
    margin: 3px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    align-self: flex-start;
}

.headline .icons img{
    max-width: 22px;
    display: block;
    position: relative;
    top: 3px;
    margin-top: -15px;
    opacity: 0.8;
}

.listeneintrag .title{
    font-size: 1.2em;
    font-family: sans-serif;
    margin-bottom: 5px;
    white-space: nowrap;
    transition: all 0.2s linear;
    position: relative;
    align-self: flex-start;
    font-family: Fredoka One;
    padding-right: 6px;
    margin-right: -7px;
    color: #404054e8;
    text-shadow: 0 0 12px #e1e1e1a6;
}
.listeneintrag .title.toggle, .place-to-cart .product-price{
    font-style: oblique;
    /* font-weight: 600; */
    /* color: #eda747; */
    /* text-shadow: -1px 1px 1px #e11a1a30; */
    background: -webkit-linear-gradient(189deg,#ff6a1a,#ffbb21 150%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.75em;
    /* text-decoration-style: double; */
    /* text-decoration-color: #fbb05059; */
    /* text-decoration-line: underline; */
    /* text-decoration-thickness: 2px; */
    text-shadow: 0 0 20px #9f9f9f3b, -1px 2px 0px #ffba634a;
}

.listeneintrag .beschreibung{
    font-size: 0.9em;
    font-family: sans-serif;
    color: #fffaf4;
    position: relative;
    width: fit-content;
    padding: 3px 1px;
    border-radius: 9px;
    padding-left: 40px;
    font-family: 'Noto';
    /* margin-bottom: 12px; */
    padding: 5px 15px;
    width: 55vw;
    margin: auto;
    padding-top: 10px;
    /* margin-top: 1px; */
    font-style: oblique;
}

.listeneintrag .preis{
    font-style: oblique;
    /* text-align: right; */
    font-family: sans-serif;
    color: #f06f3beb;
    opacity: 1;
    transition: all 0.1s linear;
    transform: scaleX(1);
    /* background: #febc2b; */
    font-weight: 200;
    /* text-shadow: -1px 1px 1px #ffffff2e, -3px 0px 6px #ef4d00, 0 0 6px #bd0000, 0 0 5px black; */
    font-family: 'Fredoka One';
    max-height: 104px;
}

.listeneintrag .preis.toggle{
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right;
    max-width: 0px;
    max-height: 0px;
}

.entry-img{
    position: absolute;
    display: block;
    width: 70vw;
    left: 34vw;
    top: 1vh;
    z-index: -1;
    transition: all 0.33s linear;
    opacity: 0.92;
    transform: rotate(8deg);
}

.entry-img.toggle{
    width: 90vw;
    left: 1vw;
    top: 6vh;
    opacity: 1;
    transform: rotate(0deg);
}

.sticky-bar{
    display: flex;
    background: linear-gradient(327deg, #10071d, #2b1154);
    box-shadow: 0px 6px 7px 0px #0000004a;
    top: 0;
    position: sticky;
    z-index: 2;
    /* max-height: 40px; */
    justify-content: flex-start;
}

.configurate-btn{
    margin: auto;
    text-transform: uppercase;
    font-family: sans-serif;
    padding-top: 10px;
    /* padding-bottom: 45px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 50px;
    max-height: 50px;
    margin-right: auto;
    margin-top: 9px;
    margin-bottom: 10px;
    /* left: 9vw; */
}

.configurate-btn .gear1{
    position: relative;
    height: 28px;
    left: 13px;
    top: -5px;
    filter: grayscale(1) brightness(0.4) contrast(0.25);
    transition: transform 1.2s ease-out, filter 0.33s ease-out;
    filter: grayscale(1) brightness(3.4) contrast(0.8);
}

.configurate-btn .gear1.toggle{
    filter: grayscale(0) brightness(1) contrast(1);
    transform: rotate(45deg);
}

.configurate-btn .gear2{
    position: relative;
    height: 38px;
    left: -4px;
    top: 5px;
    filter: grayscale(1) brightness(3.4) contrast(0.8);
    transition: transform 1.2s ease-out, filter 0.33s ease-out;
}

.configurate-btn .gear2.toggle{
    filter: grayscale(0) brightness(1) contrast(1);
    transform: rotate(-90deg);
}

.configuration-wrapper{
    transform: scaleY(0);
    transform-origin: top;
    max-height: 0px;
    opacity: 0;
    transition: all 0.14s linear;
    padding: 0px;
    border: 0px double #fffaf6;
    border-radius: 9px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
}

.configuration-wrapper.toggle{
    max-height: 1500px;
    transform: scaleY(1);
    opacity: 1;
    background: #f16e3c;
    padding: 4px 3px;
    margin-bottom: 12px;
}

.navbar{
    display: flex;
    overflow-x: scroll;
    position: sticky;
    padding: 5px 12px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    font-family: sans-serif;
    font-size: 1.0em;
    font-style: oblique;
    font-weight: 200;
    color: #000;
    top: 0;
    /* max-width: 64vw; */
    font-family: 'Fredoka One';
    padding-right: 1px;
    margin-left: 32px;
}

.form{
    max-width: 100vw;
    max-height: 2500px;
    overflow-x: clip;
    background: #ffe9d4;
    /* margin-bottom: 0px; */
    /* padding-bottom: 0px; */
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}

.nav-link{
    margin: 1px 5px;
    /* background: #f0f8ffc7; */
    padding: 5px 13px;
    border-radius: 14px;
    font-size: 0.9em;
    background: -webkit-linear-gradient(270deg,#ffb61e,#ff723c 150%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-link:hover{
    -webkit-text-fill-color: #ffffffba;
    background: #fbaf4f;
}

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


.size-selection-pizza{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    opacity: 0;
    transform: scale(0);
    /* transition: all 0.2s ease-out; */
    background: linear-gradient(180deg, #2a184300, #fbaf4e00);
    position: relative;
    align-items: flex-end;
    align-content: stretch;
    padding: 8px 15px;
    margin: 5px -19px;
    border-radius: 25px;
}

.size-selection-pizza.toggle{
    transform: scale(1);
    opacity: 1.0;
    margin-bottom: 0px;
}
.size-selection-pizza .pizza-box-25,
.size-selection-pizza .pizza-box-28,
.size-selection-pizza .pizza-box-32
{
    width: 30%;
    /* margin: 1px; */
    padding: 2px;
    cursor: pointer;
}

.size-selection-pizza .pizza-box-25 img,
.size-selection-pizza .pizza-box-28 img,
.size-selection-pizza .pizza-box-32 img{
    max-width: 100%;
    transition: all 0.5s ease-in-out;
    filter: invert(0%) sepia(0.1) contrast(3) hue-rotate(225deg) opacity(0.75) saturate(0.5) brightness(0.6) grayscale(0.2)
}

.size-selection-pizza .pizza-box-25 img.toggle,
.size-selection-pizza .pizza-box-28 img.toggle,
.size-selection-pizza .pizza-box-32 img.toggle{
    max-width: 100%;
    filter: invert(0%) sepia(0) contrast(1) hue-rotate(360deg) opacity(0.98) saturate(1) brightness(1) grayscale(0) drop-shadow(-2px 4px 12px #ff964c);
}

.pizza-box:hover{
    background: #ffb42b;
}

.hidden{
    opacity:0;
}

.visible{
    opacity:1;
}

.pizza-25-content, .pizza-28-content, .pizza-32-content{
    display: none;
    transition: all 0.3s linear;
    transform-origin: top;
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
}


.pizza-25-content.toggle,.pizza-28-content.toggle,.pizza-32-content.toggle{
    display: block;
    max-height: 2000px;
    opacity: 1;
    pointer-events: auto;
    /* z-index: -7; */
    margin: -1px -14px;
    padding: 4px;
    /* padding-bottom: 22px; */
    margin-bottom: 0px;
    padding-top: 0px;
    background: #170f2e;
}


.allergene{
    display: flex;
    flex-direction: row-reverse;
    margin: 0px;
    justify-content: flex-start;
    align-content: stretch;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.2s linear;
    transform-origin: right;
    position: relative;
    max-width: 0;
    max-height: 0;
}

.allergene.toggle{
    transform: scaleX(1);
    opacity: 1.0;
    flex-wrap: wrap;
    max-height: 100px;
    max-width: 50%;
}

.allergen{
    width: 25px;
    margin: 0px;
    padding: 5px 5px;
    text-align: center;
    /* padding: 6px; */
    border-style: dotted;
    border-width: 1px;
    border-color: #d1af85;
    margin-left: 2px;
    /* margin-right: 2px; */
    margin-bottom: 3px;
    border-radius: 25px;
    height: 25px;
    box-shadow: 1px 1px 5px 2px #0000006e;
    background: #ebdcca;
}

.allergen img{
    max-height: 28px;
    margin-bottom: -2px;
    margin-left: -1px;
    margin-top: -2px;
    opacity: 0.4;
}

.about-to-order{
    display: flex;
    position: relative;
    bottom: 0;
    margin-bottom: 0px;
    margin-top: 17px;
    border-top-style: dashed;
    border-width: 1px;
    border-color: #ffc29c;
    padding-top: 6px;
    color: #2e2e2e;
    font-family: 'Noto';
    background: #ffede6e0;
    padding: 2px 10px;
    line-height: 0.9em;
}

.about-to-order .product-name{
    font-size: 0.75em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: space-between;
    width: 100%;
}

.ingr-selector{
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow: hidden;
    /* border-top: 1px dotted #00000030; */
    padding: 24px 0px;
    margin-top: -24px;
    /* margin-bottom: 10px; */
    /* background: #fff6ed; */
    box-shadow: inset 0 0 11px #ffcc9f2e;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: scroll;
    white-space: nowrap;
}

.ingr-selector::-webkit-scrollbar {
    height: 6px;
    background-color: #aaaaaa38;
  }

  .ingr-selector::-webkit-scrollbar-thumb {
    background-color: #ffa838;
    height: 6px;
    border-radius: 15px;
  }

.ingr-selector-all{
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow: hidden;
    /* border-top: 1px dotted #ffb155; */
    padding: 24px 0px;
    /* margin-top: -24px; */
    margin-bottom: 0px;
    /* background: #fff6ed; */
    box-shadow: inset 0 0 11px #ffcc9f2e;
    padding-bottom: 13px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: scroll;
    max-width: 100%;
    white-space: nowrap;
    padding-top: 0px;
    max-height: 50px;
    transition: all 2s linear;
}

.ingr-selector-all.toggle{
    flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 1200px;

}

.ingr-selector-all::-webkit-scrollbar {
    height: 6px;
    background-color: #aaaaaa38;
  }

  .ingr-selector-all::-webkit-scrollbar-thumb {
    background-color: #ffa838;
    height: 6px;
    border-radius: 15px;
  }

.ingr-boxen{
    float: left;
    margin-bottom: 1px;
    margin-right: 1px;
}

.ingr-boxen-price{
    float: left;
    margin-bottom: 1px;
    margin-right:1px;
}

.ingr-box-label{
    width: 100%;
    font-family: 'Fredoka One';
    font-size: 0.95em;
    position: relative;
    display: block;
    /* flex-wrap: nowrap; */
    /* flex-direction: row; */
    /* align-items: baseline; */
    margin-bottom: 4px;
    color: #f16e3cab;
    transition: all 0.1s linear;
    text-transform: uppercase;
    FONT-WEIGHT: 200;
    background: #2b294d00;
    /* margin-bottom: 10px; */
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto;
    font-style: oblique;
    margin-right: auto;
    text-align: center;
}

.ingr-all-label{
    width: 100%;
    font-family: sans-serif;
    font-size: 1.6em;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: baseline;
    color: #ffb45d;
    transition: all 0.1s linear;
    padding: 0px 5px;
    cursor: pointer;
    /* right: 15px; */
    margin-bottom: -26px;
    text-shadow: 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff;
}

.size-box-label{
    font-family: sans-serif;
    font-size: 0.8em;
    font-style: oblique;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: -8px;
    color: #cfa879;
    transition: all 0.1s linear;
    opacity: 0;
    transform: scaleY(0);
}

.size-box-label.toggle{
    opacity:1;
    transform: scaleY(1);
}

.place-to-cart{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: baseline;
    justify-content: flex-end;
    background: #faae4f;
}

.place-to-cart .product-price{
    font-family: Fredoka One;
    padding-right: 9px;
}


.place-to-cart .btn{
    position: relative;
    color: #f26f3d;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 50px;
    font-size: 1.8em;
    font-weight: 700;
    border-radius: 76px;
    padding: 11px;
    /* margin: 0px 24%; */
    /* margin-bottom: 13px; */
    /* border-style: outset; */
    /* border-width: 3px; */
    /* border-color: #ffcf470d; */
    /* box-shadow: inset 0 0 14px #ffc31aeb, 0px 3px 8px 1px #dddddd; */
    text-shadow: 0 0 20px #f26e3c;
    cursor: pointer;
    margin-top: -5px;
    font-family: sans-serif;
    padding-bottom: 1px;
}

.place-to-cart .btn:hover{
    border-color: #5c9568eb;
    background: linear-gradient(162deg, #b6ff29, #39ab00);
    box-shadow: inset 0 0 14px #0834073d;
}

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

.checkbox-label{
    display: inline-block;
    width: auto;
    color: #727272;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 9px;
    font-family: sans-serif;
    font-size: 0.9em;
    background: #ede8e2;
    border-radius: 4px;
}

.hidden-price{
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 13x;
    margin-top: -6px;
    /* left: 50px; */
    left: 33%;
    font-size: 0.7em;
    color: #fff;
    background: linear-gradient(140deg, #ff9653, #ffb970);
    width: min-content;
    padding: 1px 6px;
    margin-bottom: -9px;
    opacity: 0;
    transition: all 0.14s linear;
    transform: scale(0) rotate(350deg) skew(356deg, 180deg);
    transform-origin: left;
    border-radius: 50px;
    font-family: Fredoka One;
}

.hidden-price.toggle{
    display: block;
    opacity: 1;
    transform: scale(1) rotate(360deg) skew(356deg, 180deg);
    transform-origin: right;
}

.checkbox-label.toggle{
    color: #6c471a;
    border-color: #ffb553;
    border-radius: 30px;
}



.form .button, .form .message, .customSelect, .form .select, .form .textarea, .form .text-input, .form .option-input + label, .form .checkbox-input + label, .form .label {
    padding: 0.75em 1em;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    line-height: normal;
    border-radius: 0;
    border: none;
    background: none;
    display: block;
  }
  
  .form .label {
    font-weight: bold;
    color: white;
    padding-top: 0;
    padding-left: 0;
    letter-spacing: 0.025em;
    font-size: 1.125em;
    line-height: 1.25;
    position: relative;
    z-index: 100;
  }
  .required .form .label:after, .form .required .label:after {
    content: " *";
    color: #E8474C;
    font-weight: normal;
    font-size: 0.75em;
    vertical-align: top;
  }

  .ingr-selector .free{
    background: #ffeddd61;
  }
  
  .customSelect, .form .select, .form .textarea, .form .text-input, .form .option-input + label, .form .checkbox-input + label {
    font: inherit;
    line-height: normal;
    width: 100%;
    box-sizing: border-box;
    background: #222222;
    color: white;
    position: relative;
  }
  .customSelect:placeholder, .form .select:placeholder, .form .textarea:placeholder, .form .text-input:placeholder, .form .option-input + label:placeholder, .form .checkbox-input + label:placeholder {
    color: white;
  }
  .customSelect:-webkit-autofill, .form .select:-webkit-autofill, .form .textarea:-webkit-autofill, .form .text-input:-webkit-autofill, .form .option-input + label:-webkit-autofill, .form .checkbox-input + label:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #111111 inset;
    -webkit-text-fill-color: white;
    border-top-color: #111111;
    border-left-color: #111111;
    border-right-color: #111111;
  }
  .customSelect:not(:focus):not(:active).error, .form .select:not(:focus):not(:active).error, .form .textarea:not(:focus):not(:active).error, .form .text-input:not(:focus):not(:active).error, .form .option-input + label:not(:focus):not(:active).error, .form .checkbox-input + label:not(:focus):not(:active).error, .error .customSelect:not(:focus):not(:active), .error .form .select:not(:focus):not(:active), .form .error .select:not(:focus):not(:active), .error .form .textarea:not(:focus):not(:active), .form .error .textarea:not(:focus):not(:active), .error .form .text-input:not(:focus):not(:active), .form .error .text-input:not(:focus):not(:active), .error .form .option-input + label:not(:focus):not(:active), .form .error .option-input + label:not(:focus):not(:active), .error .form .checkbox-input + label:not(:focus):not(:active), .form .error .checkbox-input + label:not(:focus):not(:active) {
    background-size: 8px 8px;
    background-image: linear-gradient(135deg, rgba(232, 71, 76, 0.5), rgba(232, 71, 76, 0.5) 25%, transparent 25%, transparent 50%, rgba(232, 71, 76, 0.5) 50%, rgba(232, 71, 76, 0.5) 75%, transparent 75%, transparent);
    background-repeat: repeat;
  }
  .form:not(.has-magic-focus) .customSelect.customSelectFocus, .form:not(.has-magic-focus) .customSelect:active, .form:not(.has-magic-focus) .select:active, .form:not(.has-magic-focus) .textarea:active, .form:not(.has-magic-focus) .text-input:active, .form:not(.has-magic-focus) .option-input + label:active, .form:not(.has-magic-focus) .checkbox-input + label:active, .form:not(.has-magic-focus) .customSelect:focus, .form:not(.has-magic-focus) .select:focus, .form:not(.has-magic-focus) .textarea:focus, .form:not(.has-magic-focus) .text-input:focus, .form:not(.has-magic-focus) .option-input + label:focus, .form:not(.has-magic-focus) .checkbox-input + label:focus {
    background: #ffc985;
  }
  
  .form .message {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    font-size: 0.625em;
    color: white;
  }
  
  .form .option-input, .form .checkbox-input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .form .option-input + label, .form .checkbox-input + label, .checkbox-label {
    display: inline-block;
    width: auto;
    color: #727272;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 2px;
    background-color: #fffaf6;
    font-family: sans-serif;
    font-size: 0.7em;
    line-height: 0.8em;
    box-shadow: inset 2px -2px 1px #fecc8a54;
    border-style: solid;
    border-color: #ffb1552b;
    border-width: 2px;
    text-transform: uppercase;
    font-weight: 100;
    padding: 0.85em 0.95em;
    line-height: 1.2em;
    transition: all 0.12s linear;
    text-decoration-color: #ffb452c0;
    margin-bottom: -1px;
    font-family: Fredoka One;
  }
  .form .option-input:focus + label, .form .checkbox-input:focus + label, .form .option-input:active + label, .form .checkbox-input:active + label {
    color: #3c2500;
    background-color: #ffb03a0c;
  }
  .form .option-input:checked + label, .form .checkbox-input:checked + label{
    color: #6c471a;
    padding: 0.85em 0.95em;
    border-style: solid;
    border-width: 2px;
    border-color: #ffb553;
    text-transform: uppercase;
    text-decoration: none;
    text-decoration-color: #ffb553;
    text-decoration-thickness: 2px;
    text-decoration-style: double;
    background-color: #fffaf6;
    border-radius: 30px;
  }
  
  .form .button {
    font: inherit;
    line-height: normal;
    cursor: pointer;
    background: #E8474C;
    color: white;
    font-weight: bold;
    width: auto;
    margin-left: auto;
    font-weight: bold;
    padding-left: 2em;
    padding-right: 2em;
  }
  .form .button:hover, .form .button:focus, .form .button:active {
    color: white;
    border-color: white;
  }
  .form .button:active {
    position: relative;
    top: 1px;
    left: 1px;
  }