@font-face {
    font-family: 'Akrobat';
    font-style: normal;
    font-weight: bold;
    src: url('self/Akrobat-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Akrobat';
    font-style: normal;
    font-weight: 300;
    src: url('self/Akrobat-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Akrobat';
    font-style: normal;
    font-weight: normal;
    src: url('self/Akrobat-Regular.woff2') format('woff2');
}

@font-face {
    font-family: "Rocinante Titling";
    src: url("self/RocinanteTitlingVariable.woff2") format("woff2 supports variations"),
         url("self/RocinanteTitlingVariable.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-style: normal;
    font-stretch: 25% 150%;
}

:root {
    --bs-body-font-family: 'Akrobat';
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Rocinante Titling";
}

h1 {
    font-size: 3em;
}

img.logo {
    height: 64px;
}

.input-quantity {
    width: 110px;
}

.input-quantity button, .input-quantity button:disabled {
    touch-action: manipulation;
    pointer-events: auto !important;
}

.force-disable {
    pointer-events: none !important;
}

.input-quantity input:disabled {
    background-color: #ffffff;
    border-top: solid 1px var(--bs-secondary);
    border-bottom: solid 1px var(--bs-secondary);
}

.modal {
    --bs-modal-zindex: 2055;
}

.modal-backdrop {
    --bs-backdrop-opacity: 0.7;
    --bs-backdrop-zindex: 2050;
}

.checkout-sticky {
    background: rgba(255, 255, 255, 0.8);
    position: sticky;
    z-index: 1500;
}

.pricebox, .pricebox .badge {
    letter-spacing: 0.11em;
}

.cart-line {
    transition: 0.3s;
    background: #ffffff;
}

.cart-line:not(:has(input.unused)) {
    background: var(--bs-success-bg-subtle);
}

.fs-55 {
    font-size: 1.15em;
}

.list-group-sub {
    border-left: solid 2px var(--bs-secondary);
}

span[data-optprice='0'] {
    display: none;
}

#pickup-list .btn-check[disabled] + .btn, #pickup-list .btn-check:disabled + .btn {
    opacity: 0.25;
}

@media (max-width: 768px) {
    .checkout-sticky {
        border-top: dashed 1px var(--bs-gray-600);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        bottom: 0;
    }
}

@media (min-width: 768px) {
    .checkout-sticky {
        top: 0;
        height: min-content;
        background-color: transparent !important;
    }
}

#error-container {
    min-height: calc(100vh - 40px);
    min-height: 99dvh;
    text-align: center;
    background-image: url(images/cornet-light.png);
    background-repeat: no-repeat;
    background-position: bottom 2em right 1em;
    background-size: 50%, contain;
    width: 100%;
    max-width: 600px;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    font-size: 120%;
}

@media (max-height: 525px) {
    #error-container {
        background: none !important;
    }
}

#error-container img {
    width: 500px;
    max-width: 100%;
    opacity: 1;
}

#error-container .alert {
    backdrop-filter: blur(4px);
}

#form-checkout.closed, #form-checkout.toobusy {
    filter: grayscale(1) blur(2px);
    pointer-events: none;
    user-select: none;
}

#form-checkout.closed button, #form-checkout.toobusy button {
    pointer-events: none !important;
}

#time-now {
    letter-spacing: 0.4rem;
    font-weight: bold;
}

.order-list-icon .fa-solid {
    margin-top: 0.2em;
    margin-right: 0.4em;
}

.may-be-empty:empty::after {
    content: 'Rien actuellement';

    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    width: 100%;
}

@keyframes blinker {
  from { background-color: transparent; }
  to { background-color: var(--bs-info); }
}

.card.new-order {
    animation: blinker ease 1s infinite alternate;
}