*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--color-bg);
    font-family: var(--font-system);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::placeholder {
    color: var(--color-text-dim);
    opacity: 1;
}

/*
 * Room for the floating footer. It belongs to the page shell rather than the body, so the page's own
 * background (the white sheet in the light theme) runs down behind the footer with no strip under it.
 */
body.has-bottom-nav {
    --bottom-nav-clearance: calc(var(--bottom-nav-height) + max(env(safe-area-inset-bottom), 1.25rem));
}

body.has-bottom-nav .app-shell {
    padding-bottom: var(--bottom-nav-clearance);
}

html.is-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.is-receipt-open,
body.is-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.is-sheet-open {
    position: fixed;
    width: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
}

button, input, select, textarea {
    color: inherit;
    font: inherit;
}

/*
 * iOS Safari zooms the page when a focused field is under 16px. Keep fields at 1rem
 * so the keyboard does not drag the layout sideways.
 */
input,
select,
textarea {
    font-size: 1rem;
}

button, [role="button"], a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

p, h1, h2, h3, h4, ul, ol {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

[hidden], .hide {
    display: none !important;
}

.app-shell,
.auth-shell {
    width: min(100%, var(--container-max));
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
    background: var(--app-backdrop);
    background-color: var(--color-bg);
}

body.auth-body .auth-shell {
    background: transparent;
}

.app-main {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding: var(--space-1) var(--page-gutter) var(--space-7);
}

.wrapper {
    width: min(100%, var(--container-max));
    min-height: 100vh;
    margin-inline: auto;
    background: var(--color-bg);
}

.wrapper > div {
    min-height: 100vh;
}

.bg-transparent {
    background: var(--color-bg);
}

.text-muted {
    color: var(--color-text-muted);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-brand-accent);
    outline-offset: 3px;
}

@media (min-width: 31rem) {
    body {
        background: var(--color-page-backdrop);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * Right-to-left languages (Arabic). The page keeps the same layout as every other language:
 * the footer, icons and cards stay where they are. Only the text runs right to left. Each piece
 * of text takes its direction from its own words, so an Arabic sentence reads (and sits) right
 * to left inside its own box, while numbers, amounts, codes and addresses stay left to right.
 * A box that holds an icon keeps the English order, so icons never swap sides with their label.
 */
html[data-text-dir="rtl"] *:not(:has(> iconify-icon, > svg, > img, > picture)) {
    unicode-bidi: plaintext;
}