:root {
    --color-primary:    #d86f2c;
    --color-secondary:  #f3eb67;
    --color-black:      #3b3b3b;
    --color-red:        rgb(255, 73, 73);
    --color-confirm:    rgb(151, 255, 133);
    --color-near-white: rgb(250, 250, 250);
    --color-eggshell:   rgb(243, 243, 243);
    --color-disabled:   rgb(175, 175, 175);

    --spacing-small: 4px;
    --spacing-normal: 8px;
    --spacing-large: 16px;

    --control-size: 38px;
    --border: 2px solid var(--color-black);
    --border-radius: 8px;

    --font-size: 1.2rem;
    --font-family: Arial, Helvetica, sans-serif;

    --breakpoint-wide: 1023px;
    --breakpoint-medium: 688px;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
    margin: 4px;
}

.page-root {
    font-size: 1.2rem;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    font-family: var(--font-family);
    padding: 0 var(--spacing-normal);
}

.page-root.order-page {
    background-image: linear-gradient(0deg,rgb(97, 11, 11) 0%, rgb(255, 72, 0) 3%, rgb(244, 244, 244) 11%, rgb(244, 244, 244) 100%);
    background-position: bottom right;
    background-repeat: no-repeat;
}

.page-root.checkout-flow {
    background-image: none;
}

.main-body {
    background-attachment: fixed;
    background-position: bottom 8px right 8px;
    background-size: 33% auto;
    background-image: url("/img/logo-transparent.png");
    background-repeat: no-repeat;
    padding-bottom: 128px;
    margin-bottom: -128px;
}

/* override -apple-system-blue coloration on iOS Safari */
.page-root button,
.page-root select {
    color: var(--color-black);
}

/* stop background from scrolling while overlay is up */
html.cart-expanded,
body.cart-expanded {
    overflow-y: hidden;
    position: relative;
}

/* WebKit and Blink */
.page-root input[type="number"]::-webkit-outer-spin-button,
.page-root input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  border: none;
}

/* Firefox */
.page-root input[type="number"] {
  -moz-appearance: textfield;
  border: none;
}

.page-root button[type="submit"] {
    background-color: var(--color-primary);
    color: var(--color-near-white);
    padding: var(--spacing-small);
    font-weight: 800;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size);
    border: none;
}

.page-root button[type="button"] {
    background-color: transparent;
    padding: var(--spacing-small);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size);
    outline: 1px var(--color-black);
    border: none;
}

.page-root button[type="button"]:active {
    background-color: var(--color-primary);
    color: var(--color-near-white);
    padding: var(--spacing-small);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size);
    cursor: pointer;
    outline: var(--border);
    fill: rgb(231, 231, 231);
}

@media (hover: hover) {
    .page-root button[type="button"]:hover {
        background-color: var(--color-primary);
        cursor: pointer;
        color: var(--color-near-white);
        padding: var(--spacing-small);
        align-items: center;
        justify-content: center;
        font-size: var(--font-size);
        outline: var(--border);
        fill: var(--color-near-white);
    }
}

.page-root input.item-count-input {
    margin: 8px 0;
    height: 38px;
    width: 26px;
    outline: 1px solid var(--color-black);
    padding: 0 8px;
    text-align: center;
    font-size: var(--font-size);
}

.page-root button.number-input-control {
    font-size: 0.8rem;
    font-weight: 800;
    width: 28px;
    height: var(--control-size);
    margin: 8px var(--spacing-small);
    outline: 1px solid var(--color-black);
    background: white;
    color: var(--color-black);
    cursor: pointer;
}

@media (hover: hover) {
    .page-root button.number-input-control:hover {
        outline: 1px solid black;
        background-color: var(--color-primary);
        color: var(--color-near-white);
    }
}

.page-root button.number-input-control:active {
    outline: 1px solid black;
    background-color: var(--color-primary);
    color: var(--color-near-white);
}

.page-root section.banner-notice {
    background-color: var(--color-secondary);
    /* color: var(--color-near-white); */
    margin: var(--spacing-large) 0;
    justify-content: center;
    display: flex;
    height: 62px;
    text-align: center;
    align-items: center;
    font-size: 1.4rem;
    padding: var(--spacing-normal);
}

/*------------------*/
/*--- order-form ---*/
/*------------------*/

.page-root button.delete-item-button[type="button"]:active {
    background-color: var(--color-red);
}

@media (hover: hover) {
    .page-root button.delete-item-button[type="button"]:hover {
        background-color: var(--color-red);
    }
}

.page-root.checkout-flow .order-form {
    display: none;
}

.page-root .order-form .fieldset {
    position: relative;
    margin: 0 0 var(--spacing-large) 0;
}

.page-root .order-form .vendor-order-form-editing-title {
    display: none;
}

.page-root.editing-cart-item .order-form .vendor-order-form-editing-title {
    display: unset;
}

.page-root.editing-cart-item .order-form .vendor-order-form-title,
.page-root.editing-cart-item .order-form .vendor-order-form-details-text {
    display: none;
}

.page-root .order-form h2.vendor-order-form-details-text {
    margin: 0;
    font-size: 1.3rem;
}

.page-root .order-form .fieldset.spice-level .heat-meter {
    position: absolute;
    left: var(--spacing-small);
    width: var(--spacing-normal);
    height: calc(100% - 18px);
    border-radius: var(--border-radius);
    background: #610b0b;
    background: linear-gradient(0deg, rgba(97, 11, 11, 1) 0%, rgba(255, 72, 0, 1) 25%, rgba(255, 255, 255, 1) 73%);
}

.page-root .order-form .fieldset.spice-level .heat-meter-flame {
    position: absolute;
    left: var(--spacing-small);
    width: var(--spacing-normal);
    height: calc(100% - 18px);
    border-radius: var(--border-radius);
    background-image: url(/img/fire.png);
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: 9px 65%;
}

.page-root .order-form .fieldset.spice-level label {
    display: block;
    margin: 6px 0;
}

.page-root .order-form .fieldset.spice-level label.disabled-choice {
    color: var(--color-disabled);
    text-decoration: line-through;
}

.page-root .order-form .fieldset.toppings-choice label {
    display: inline-flex;
    align-items: center;
    margin: var(--spacing-small);
    border-radius: var(--spacing-small);
}

.page-root .order-form .notes-box {
    display: flex;
    align-items: center;
    margin: var(--spacing-normal) 0;
}

.page-root .order-form .notes-box input {
    flex-grow: 1;
    padding: var(--spacing-normal);
    margin-left: var(--spacing-normal);
}

.page-root .order-form .add-to-cart,
.page-root .order-form .update-cart-item {
    display: flex;
    margin: var(--spacing-normal) 0;
}

.page-root .order-form .add-to-cart button.add-to-cart,
.page-root .order-form .add-to-cart button.update-cart-item {
    flex-grow: 1;
    margin-left: var(--spacing-normal);
    cursor: pointer;
}

.page-root .order-form .add-to-cart button.update-cart-item {
    display: none;
}

.page-root.editing-cart-item .order-form .add-to-cart button.update-cart-item {
    display: flex;
}

.page-root.editing-cart-item .order-form .add-to-cart button.add-to-cart {
    display: none;
}

.page-root .order-form .vendor-info-inputs {
    margin-bottom: var(--spacing-large);
    display: flex;
    flex-flow: row wrap;
}

.page-root .order-form .vendor-info-inputs .vendor-info-col {
    display: flex;
    flex-flow: column nowrap;
    margin: var(--spacing-normal);
    flex-shrink: 0;
}

.page-root .order-form .vendor-info-inputs .vendor-info-col .vendor-info-col-value {
    display: flex;
}

.page-root .order-form .fieldset.toppings-choice label input {
    margin: 6px;
    width: 14px;
    height: 14px;
}

.page-root .order-form .fieldset.toppings-choice label span {
    margin: 6px 6px 6px 0;
}

.page-root .order-form .fieldset.toppings-choice label {
    background-color: rgb(211, 211, 211);
    text-decoration: line-through;
}

.page-root .order-form .fieldset.toppings-choice label.selected {
    /* background-color: rgb(148, 255, 145); */
    background-color: var(--color-secondary);
    text-decoration: none;
}

.page-root .disclaimer-text {
    font-style: oblique;
    font-family: 'Times New Roman', Times, serif;
    display: block;
    font-size: 1rem;
    margin-top: var(--spacing-normal);
    margin-bottom: var(--spacing-small);
}

/*-----------------*/
/*--- cart form ---*/
/*-----------------*/

.page-root .top-aligned-row {
    display: flex;
}

.page-root .top-aligned-row .number-input-control,
.page-root .top-aligned-row .item-count-input {
    margin-top: 4px;
    margin-bottom: 0;
}

.page-root .cart-form {
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--color-near-white);
    border: 8px solid var(--color-primary);
    border-radius: 8px 0 8px 8px;
    outline: 1px solid var(--color-black);
    position: fixed;
    bottom: calc(-100% + 88px);
    height: calc(100% - 88px);
    width: calc(100% - 49px);
}

.page-root.checkout-flow .cart-form,
.page-root.editing-cart-item .cart-form {
    display: none;
}

.page-root.cart-expanded .cart-form {
    bottom: unset;
    top: 64px;
}

.page-root .cart-form .cart-items .empty-cart-message {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.page-root .cart-form .empty-cart-message .restore-cart-button {
    display: flex;
    margin: var(--spacing-normal);
    padding: var(--spacing-normal);
}

.page-root .cart-form .empty-cart-message .restore-cart-button .restore-cart-icon {
    margin-right: var(--spacing-normal);
}

.page-root .cart-form .empty-cart-message .restore-cart-button .restore-cart-icon svg {
    fill: var(--color-black);
}

.page-root .cart-form button.show-cart-button {
    padding: 8px 4px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-black);
    border-bottom: none;
    border-radius: 8px 0 0 0;
    color: white;
    font-weight: 800;
    position: fixed;
    bottom: 16px;
    right: 16px;
}

.page-root .cart-form button.show-cart-button #show-cart-text-container {
    vertical-align: super;
}

.page-root .cart-form button.show-cart-button svg {
    fill: white;
    margin: 4px 1px 1px 1px;
}

.page-root.cart-expanded .cart-form button.show-cart-button {
    bottom: unset;
    top: 14px;
}

.page-root .cart-form button.show-cart-button:active {
    border: 1px solid var(--color-primary);
    border-bottom: none;
    border-radius: 8px 0 0 0;
    outline: none;
    cursor: pointer;
    padding: 8px 4px;
    font-size: var(--font-size);
}

@media (hover: hover) {
    .page-root .cart-form button.show-cart-button:hover {
        border: 1px solid var(--color-primary);
        border-bottom: none;
        border-radius: 8px 0 0 0;
        outline: none;
        cursor: pointer;
        padding: 8px 4px;
        font-size: var(--font-size);
    }
}

.page-root .cart-form button.show-cart-button .hide-cart {
    display: none;
}

.page-root.cart-expanded .cart-form button.show-cart-button .show-cart {
    display: none;
}

.page-root.cart-expanded .cart-form button.show-cart-button .hide-cart {
    display: inline;
}

.page-root .cart-form .cart-items {
    padding-left: 0;
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 1;
    overflow-y: scroll;
}

.page-root .cart-form .cart-header-notice {
    margin: var(--spacing-large) var(--spacing-normal);
}

.page-root .cart-form.empty .checkout {
    display: none;
}

.page-root .cart-form .cart-header-notice.empty {
    display: none;
}

.page-root .cart-form.empty .cart-header-notice {
    display: none;
}

.page-root .cart-form.empty .cart-header-notice.empty {
    display: block;
}

.page-root .cart-form .cart-items .cart-item {
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    padding: 8px 0;
    min-height: 70px;
    flex-shrink: 0;
}

.page-root .cart-form .cart-items .cart-item:nth-child(even) {
    background-color: var(--color-eggshell);
}

.page-root .cart-form .cart-items .cart-item .cart-item-details-col {
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
}

.page-root .cart-form .cart-items .cart-item .cart-item-details-col .cart-item-details-group {
    display: inline-flex;
    flex-flow: row;
    padding: 0 8px;
    margin-bottom: 8px;
    flex-grow: 0;
}

.page-root .cart-form .cart-items .cart-item .cart-item-details-col .cart-item-details-group .broth-col {
    min-width: 74px;
}

.page-root .cart-form .cart-items .cart-item .cart-item-details-col .cart-item-details-group .spice-col {
    min-width: 123px;
}

.page-root .cart-form .cart-items .cart-item .cart-item-details-col .cart-item-details-group.empty {
    display: none;
}

.page-root .cart-form .cart-items .cart-item .cart-item-col {
    display: inline-flex;
    flex-flow: column nowrap;
    padding: 0 8px 8px 8px;
}

.page-root .cart-form .cart-items .cart-item .cart-item-row {
    display: flex;
    flex-flow: row nowrap;
    padding: 0 8px;
}

.page-root .cart-form .cart-items .cart-item .cart-item-label {
    font-weight: 800;
    font-variant: small-caps;
}

.page-root .cart-form .cart-items .cart-item button.edit-cart-item {
    font-family: var(--font-family);
    font-size: 1.2rem;
    border: none;
    background-color: transparent;
    justify-content: flex-start;
    margin: 0 8px 0 0;
}

@media (hover: hover) {
    .page-root .cart-form .cart-items .cart-item button.edit-cart-item:hover {
        background-color: var(--color-primary);
        cursor: pointer;
    }
}

.page-root .cart-form .cart-items .cart-item button.edit-cart-item:active {
    background-color: var(--color-primary);
    cursor: pointer;
}

@media (hover: hover) {
    .page-root .cart-form .cart-items .cart-item button.edit-cart-item.confirm-done:hover {
        background-color: var(--color-confirm);
        color: var(--color-black);
    }
}

.page-root .cart-form .cart-items .cart-item button.edit-cart-item.confirm-done:active {
    background-color: var(--color-confirm);
    color: var(--color-black);
}

.page-root .cart-form .cart-items .cart-item button.edit-cart-item .cart-item-value {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 8px;
}

.page-root .cart-form .cart-items .cart-item .edit-cart-item-overlay {
    display: none;
}

.page-root .cart-form .cart-items .cart-item.editing .cart-item-details-col,
.page-root .cart-form .cart-items .cart-item.editing .cart-qty-col {
    display: none;
}

.page-root .cart-form .cart-items .cart-item.editing .edit-cart-item-overlay {
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

.page-root .cart-form .cart-items .cart-item .edit-cart-item.confirm-done {
    display: none;
}

.page-root .cart-form .cart-items .cart-item.editing .edit-cart-item {
    display: none;
}

.page-root .cart-form .cart-items .cart-item.editing .edit-cart-item.confirm-done {
    display: flex;
}

.page-root .cart-form .cart-items .cart-item button.edit-cart-item.confirm-done .cart-item-value {
    line-height: normal;
}

.page-root .cart-form .edit-cart-item-overlay .cart-item-details-group {
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.page-root .cart-form .edit-cart-item-overlay button.edit-selections-button {
    display: flex;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-size: 1.2rem;
    flex-grow: 1;
}

.page-root .cart-form .edit-cart-item-overlay button.edit-selections-button .cart-item-value {
    font-size: 1.8rem;
}

.page-root .cart-form .edit-cart-item-overlay .cart-item-col.qty-col {
    display: none;
}

.page-root .cart-form .edit-cart-item-overlay .cart-item-col.cart-item-notes {
    flex-grow: 3;
    display: none;
}

@media screen and (width >= 688px) {
    .page-root .cart-form .edit-cart-item-overlay .cart-item-col.cart-item-notes {
        display: inline-flex;
    }
}

@media screen and (width >= 482px) {
    .page-root .cart-form .edit-cart-item-overlay .cart-item-col.qty-col {
        display: inline-flex;
    }
}

.page-root .cart-form .edit-cart-item-overlay .cart-item-notes input {
    margin-top: var(--spacing-small);
}

.page-root .cart-form button.checkout {
    padding: var(--spacing-large);
    cursor: pointer;
}

.page-root .cart-form button.clear-cart-button {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 8px;
    margin: 0 8px;
    position: absolute;
    right: var(--spacing-normal);
    top: var(--spacing-large);
}

@media (hover: hover) {
    .page-root .cart-form button.clear-cart-button:hover {
        background-color: var(--color-red);
    }
}

.page-root .cart-form button.clear-cart-button:active {
    background-color: var(--color-red);
}

.page-root .cart-form.empty .clear-cart-button {
  display: none;
}

@media (hover: hover) {
    .page-root .cart-form button.checkout:hover {
        border: 2px dotted white;
        margin: -2px;
    }
}

.page-root .cart-form button.checkout:active {
    border: 2px dotted white;
    margin: -2px;
}

.edit-cart-item-overlay .delete-item-button {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    font-size: 0.8rem;
    padding: 8px;
    margin: 0 8px;
}

/*---------------------*/
/*--- checkout form ---*/
/*---------------------*/

.page-root .checkout-form {
    display: none;
}

.page-root.checkout-flow .checkout-form {
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--color-near-white);
    border: 8px solid var(--color-primary);
    border-radius: 8px 0 8px 8px;
    outline: 1px solid var(--color-black);
    position: fixed;
    top: 64px;
    height: calc(100% - 88px);
    width: calc(100% - 49px);
}

.page-root .checkout-form h1 {
    margin: var(--spacing-normal);
    margin-bottom: var(--spacing-large);
}

.page-root .checkout-form .checkout-column {
    display: flex;
    flex-flow: column nowrap;
}

.page-root .checkout-form .fieldset {
    margin: 8px 0;
}

.page-root .checkout-form .checkout-column .checkout-column-header {
    font-weight: 800;
    font-variant: small-caps;
}

.page-root .checkout-form .checkout-column .checkout-column-value {
    display: flex;
}

.page-root .checkout-form button.back-to-cart-button {
    padding: 8px 8px 18px 8px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-black);
    border-bottom: none;
    border-radius: 8px 0 0 0;
    color: white;
    font-weight: 800;
    position: fixed;
    top: 14px;
    right: 16px;
}

.page-root .checkout-form button.back-to-cart-button:active {
    border: 1px solid var(--color-primary);
    border-bottom: none;
    border-radius: 8px 0 0 0;
    outline: none;
    cursor: pointer;
    font-size: var(--font-size);
}

@media (hover: hover) {
    .page-root .checkout-form button.back-to-cart-button:hover {
        border: 1px solid var(--color-primary);
        border-bottom: none;
        border-radius: 8px 0 0 0;
        outline: none;
        cursor: pointer;
        font-size: var(--font-size);
    }
}

.page-root .order-form .vendor-info-inputs .vendor-info-col .vendor-info-col-value .booth-name-input,
.page-root .checkout-form .checkout-column .checkout-column-value .booth-name-input {
    height: 34px;
    margin: var(--spacing-normal) 0;
}

.page-root .order-form .vendor-info-inputs .vendor-info-col .vendor-info-col-value input.booth-number-input,
.page-root .checkout-form .checkout-column .checkout-column-value input.booth-number-input {
    margin: 8px 0;
    height: 38px;
    width: 38px;
    outline: 1px solid var(--color-black);
    padding: 0 8px;
    text-align: center;
    font-size: var(--font-size);
}

.page-root .checkout-form .time-selection label {
    display: block;
    margin: 6px 0;
}

.page-root .checkout-form .checkout-form-inputs {
    flex-grow: 1;
    overflow-y: scroll;
    padding: 0 var(--spacing-normal) var(--spacing-normal) var(--spacing-normal);
}

.page-root .checkout-form button.submit-order {
    padding: var(--spacing-large);
    cursor: pointer;
}

.page-root .checkout-form button.submit-order:active {
    border: 2px dotted white;
    margin: -2px;
    text-shadow: 0 0 4px white;
}

@media (hover: hover) {
    .page-root .checkout-form button.submit-order:hover {
        border: 2px dotted white;
        margin: -2px;
        text-shadow: 0 0 4px white;
    }
}

.page-root .checkout-form .order-summary ul {
    list-style-type: "\261E\00A0";
}

.page-root .checkout-form .order-summary h2 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
}

.page-root .checkout-form .order-summary .total-row .total-amount {
    color: green;
    font-weight: 600;
}

.page-root .checkout-form .hidden-send-noods-link {
    display: none;
}

.page-root .checkout-form .ordering-unavailable {
    display: none;
}

.page-root.closed .checkout-form .ordering-unavailable {
    display: flex;
}

.page-root.closed .checkout-form .checkout-form-inputs,
.page-root.closed .checkout-form button.submit-order {
    display: none;
}

.page-root .checkout-form .not-taking-orders {
    display: none;
}

.page-root.closed .checkout-form .not-taking-orders {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-root.delivery .checkout-form .checkout-form-inputs .saturday-time {
    display: none;
}

.page-root.pickup .checkout-form .checkout-form-inputs .sunday-time {
    display: none;
}

/*--------------------*/
/*--- receipt page ---*/
/*--------------------*/

.page-root .main-body .receipt-body .order-items {
    list-style-type: disc;
}

.page-root .main-body .receipt-body .order-items .order-item-row {
    display: list-item;
    margin: var(--spacing-normal);
}

.page-root .main-body .receipt-body .order-items .order-item-row span {
    display: block;
}