/* Bootstrap 5.3 is variable-based, so everything here is an override rather
   than a recompile. Editing the vendored file would make the next bump a
   merge. */

/* Telegram hands the Mini App its own palette. Mapping it onto Bootstrap's
   variables is what stops the page looking like a website dropped into a chat
   client. */
body.tg {
    --bs-body-bg: var(--tg-theme-bg-color, #fff);
    --bs-body-color: var(--tg-theme-text-color, #212529);
    --bs-secondary-color: var(--tg-theme-hint-color, #6c757d);
    --bs-link-color-rgb: 0, 122, 255;
    --bs-border-color: var(--tg-theme-section-separator-color, #dee2e6);
    background: var(--bs-body-bg);
}

body.tg .card,
body.tg .list-group-item {
    background-color: var(--tg-theme-secondary-bg-color, transparent);
    color: inherit;
}

/* Telegram already shows a header, so the Mini App gets breathing room instead
   of a second one. */
.shop-main {
    padding-bottom: 5rem;
}

/* Room for the sticky cart bar above Telegram's own chrome. */
.cart-bar {
    position: fixed;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    z-index: 1030;
}

.stepper input {
    width: 3.5rem;
    text-align: center;
}

/* The backoffice table is wide; it scrolls inside its own box rather than
   making the page scroll sideways. */
.table-scroll {
    overflow-x: auto;
}

.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.htmx-request .htmx-indicator { visibility: visible; }
.htmx-indicator { visibility: hidden; }