/* ===========================================================================
   Biebprinten design system — aligned with the BeeSmart Identity login.
   White hexagon background, orange (#f47920) accent, Segoe UI, soft cards.
   Full-width, large-scale layout.
   =========================================================================== */

:root {
    --bp-accent: #f47920;
    --bp-accent-dark: #d9650f;
    --bp-accent-soft: #fff3e9;
    /* Accent as an RGB triplet so shadows/glows can be tinted per tenant. */
    --bp-accent-rgb: 244, 121, 32;
    /* Accent-derived tints: readable text on the soft accent, accent borders,
       the faintest accent wash, and the progress track. */
    --bp-accent-ink: #9a5b21;
    --bp-accent-border: #f4d2b3;
    --bp-accent-border-strong: #f2c99f;
    --bp-accent-tint: #fffaf5;
    --bp-accent-track: #f1e4d7;
    --bp-heading: #111827;
    --bp-text: #374151;
    --bp-muted: #6b7280;
    --bp-faint: #9ca3af;
    --bp-border: #e5e9f0;
    --bp-border-strong: #cfd6e2;
    --bp-surface: #ffffff;
    --bp-panel: #f8fafc;
    --bp-danger: #dc2626;
    --bp-danger-soft: #fef2f2;
    --bp-success: #16a34a;
    --bp-success-soft: #ecfdf5;
    --bp-radius: 20px;
    --bp-radius-sm: 12px;
    --bp-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
    --bp-navbar-h: 66px;
}

* {
    box-sizing: border-box;
}

.bp-option-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--bp-text);
    overflow-x: hidden;
    max-width: 100vw;
    min-height: 100vh;
    /* iOS reports 100vh as the height with the Safari toolbar hidden, so on a phone a vh
       floor makes the document a toolbar taller than the screen: the app shell (100dvh)
       ends above the fold, leaving a strip of background under the tab bar and letting
       the whole screen scroll. dvh is the height actually on screen. */
    min-height: 100dvh;
    background-color: #eef2f7;
    background-image:
        radial-gradient(1200px 760px at 6% -8%, rgba(244, 121, 32, 0.16), transparent 58%),
        radial-gradient(1100px 720px at 104% 110%, rgba(31, 110, 200, 0.14), transparent 56%),
        radial-gradient(900px 600px at 92% -10%, rgba(244, 121, 32, 0.08), transparent 60%),
        linear-gradient(180deg, #f6f9fc 0%, #e9eef6 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a {
    color: var(--bp-accent-dark);
}

/* ── App shell ──────────────────────────────────────────────────────────── */

.bp-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */

.bp-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--bp-navbar-h);
    padding: 0 2.25rem;
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-border);
}

.bp-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.bp-navbar__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--bp-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--bp-accent-rgb), 0.30);
}

.bp-navbar__mark svg {
    width: 23px;
    height: 23px;
}

.bp-navbar__name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--bp-heading);
    line-height: 1;
}

.bp-navbar__kb-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: min(300px, 58vw);
    object-fit: contain;
}

.bp-navbar__hasselt-logo {
    display: block;
    width: auto;
    height: 48px;
    max-width: min(270px, 56vw);
    object-fit: contain;
}

.bp-navbar__runtime-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: min(260px, 45vw);
    object-fit: contain;
}

.bp-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* ── Language flag toggle ───────────────────────────────────────────────── */

.bp-langflag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--bp-border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bp-langflag:hover {
    border-color: var(--bp-border-strong);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.bp-langflag svg,
.bp-langflag img,
.bp-lang__flag-img {
    width: 1.35rem;
    height: 0.9rem;
    object-fit: cover;
    border-radius: 2px;
}

.bp-langflag svg {
    width: 32px;
    height: 22px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Language dropdown (native <details> popup) */
.bp-lang {
    position: relative;
}

.bp-lang > summary {
    list-style: none;
}

.bp-lang > summary::-webkit-details-marker,
.bp-lang > summary::marker {
    display: none;
    content: "";
}

.bp-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    min-width: 198px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--bp-border);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
}

.bp-lang__form {
    margin: 0;
}

.bp-lang__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bp-text);
    font-size: 0.98rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}

.bp-lang__item:hover {
    background: var(--bp-panel);
}

.bp-lang__item--active {
    background: var(--bp-accent-soft);
    color: var(--bp-accent-dark);
}

.bp-lang__item svg {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

/* ── Logout ─────────────────────────────────────────────────────────────── */

.bp-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--bp-border-strong);
    border-radius: 9px;
    background: #fff;
    color: var(--bp-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.bp-logout:hover {
    background: var(--bp-panel);
    border-color: var(--bp-faint);
    color: var(--bp-heading);
}

.bp-logout svg {
    width: 18px;
    height: 18px;
}

/* ── Page + card ────────────────────────────────────────────────────────── */

.bp-page {
    flex: 1;
    width: 100%;
    max-width: 1960px;
    margin: 0 auto;
    padding: 1.6rem 1.6rem 0.85rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bp-card {
    flex: 1;
    min-height: 0;
    background: var(--bp-surface);
    border: 1px solid #d9dee8;
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow);
    padding: 2.25rem;
}

.bp-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 2.25rem;
    align-items: stretch;
    min-height: 0;
    min-width: 0;
}

.bp-col-right {
    min-height: 0;
}

.bp-col-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    min-width: 0;
}

.bp-col-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Guest code panel ───────────────────────────────────────────────────── */

.bp-guest {
    background: var(--bp-panel);
    border: 1px solid #eef1f6;
    border-radius: 16px;
    padding: 1.9rem 1.4rem;
    text-align: center;
    container-type: inline-size;
}

.bp-eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bp-faint);
}

.bp-guest__code {
    margin: 0.8rem 0 1.2rem;
    /* Auto-fit to the panel width so a long code (e.g. 9-10 digits) always
       stays on one line instead of wrapping mid-number. The cap is sized so a
       9-digit code fits with margin even with a wide digit font. */
    font-size: clamp(1.7rem, 12cqw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bp-accent);
    white-space: nowrap;
    line-height: 1.05;
}

.bp-guest__barcode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 0.7rem 0.8rem;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 10px;
}

.bp-guest__barcode img {
    max-width: 100%;
    max-height: 78px;
}

.bp-guest__hint {
    margin-top: 1rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--bp-muted);
}

.bp-guest__note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding: 0.8rem 0.9rem;
    background: var(--bp-accent-soft);
    border-radius: 11px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--bp-accent-ink);
}

.bp-guest__note svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    color: var(--bp-accent-dark);
}

/* ── How it works ───────────────────────────────────────────────────────── */

.bp-steps {
    background: var(--bp-surface);
    border: 1px solid #eef1f6;
    border-radius: 16px;
    padding: 1.5rem 1.4rem;
}

.bp-steps__title {
    margin-bottom: 1.15rem;
}

.bp-steps__item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.bp-steps__item + .bp-steps__item {
    margin-top: 1rem;
}

.bp-steps__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bp-accent-soft);
    color: var(--bp-accent-dark);
    font-size: 0.92rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bp-steps__item span:last-child {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--bp-text);
    padding-top: 0.15rem;
}

/* ── Section title ──────────────────────────────────────────────────────── */

.bp-section-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--bp-heading);
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--bp-accent);
    margin-bottom: 1.4rem;
}

/* ── Dropzone ───────────────────────────────────────────────────────────── */

.dropzone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--bp-border-strong);
    background: var(--bp-panel);
    border-radius: 16px;
    cursor: pointer;
    min-height: 168px;
    padding: 1.5rem;
    transition: border-color 120ms ease, background 120ms ease;
}

.dropzone .dz-message {
    margin: 0;
    width: 100%;
    text-align: center;
}

.dropzone.dz-started .dz-message {
    display: block !important;
}

.dropzone.dz-drag-hover {
    border-style: solid;
    border-color: var(--bp-accent);
    background: var(--bp-accent-soft);
}

.dropzone-previews {
    display: none !important;
}

.bp-dropzone__icon {
    width: 44px;
    height: 44px;
    color: var(--bp-accent);
}

.bp-dropzone__title {
    margin-top: 0.55rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bp-heading);
}

.bp-dropzone__title-mobile {
    display: none;
}

.bp-dropzone__hint {
    margin: 0.3rem 0 1rem;
    font-size: 0.95rem;
    color: var(--bp-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.bp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--bp-radius-sm);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.bp-btn--primary {
    background: var(--bp-accent);
    color: #fff;
    box-shadow: 0 10px 22px rgba(var(--bp-accent-rgb), 0.24);
}

.bp-btn--primary:hover {
    background: var(--bp-accent-dark);
    color: #fff;
    transform: translateY(-1px);
}

.bp-btn[disabled],
.bp-iconbtn[disabled] {
    cursor: not-allowed;
    opacity: 0.66;
}

.bp-btn--busy {
    cursor: wait;
    transform: none;
}

.bp-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: bp-spin 720ms linear infinite;
}

@keyframes bp-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-spinner {
        animation-duration: 2400ms;
    }
}

/* ── File list ──────────────────────────────────────────────────────────── */

.bp-files__title {
    margin: 1.4rem 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bp-text);
}

/* File list grows to fill the space the dropzone gave up; scrolls when long. */
.bp-files {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.bp-files::-webkit-scrollbar {
    width: 8px;
}

.bp-files::-webkit-scrollbar-thumb {
    background: #d7dde7;
    border-radius: 8px;
}

.bp-files--pending {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0;
    margin-bottom: 0.8rem;
}

.bp-files--pending:empty {
    display: none;
}

.bp-files__empty {
    padding: 1.25rem 0.25rem;
    font-size: 1rem;
    color: var(--bp-faint);
}

.bp-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--bp-border);
    border-radius: 14px;
    padding: 1.05rem 1.2rem;
    background: #fff;
}

.bp-file + .bp-file {
    margin-top: 0.8rem;
}

.bp-file--pending {
    align-items: flex-start;
    border-color: var(--bp-accent-border);
    background: var(--bp-accent-tint);
}

.bp-file--pending .bp-file__meta {
    display: grid;
    gap: 0.38rem;
}

.bp-file--processing,
.bp-file--submitting,
.bp-file--deleting {
    border-color: var(--bp-accent-border-strong);
}

.bp-file--deleting {
    opacity: 0.78;
}

.bp-file--deleting .bp-file__actions {
    pointer-events: none;
}

.bp-file--ready {
    border-color: #b8e5c0;
    background: #f5fff7;
}

.bp-file--error {
    border-color: #f3c0c0;
    background: var(--bp-danger-soft);
}

.bp-file__icon {
    flex-shrink: 0;
    color: var(--bp-accent);
    display: inline-flex;
}

.bp-file__icon svg {
    width: 30px;
    height: 30px;
}

.bp-file__icon--spinner {
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

.bp-file--ready .bp-file__icon {
    color: #15803d;
}

.bp-file--error .bp-file__icon {
    color: var(--bp-danger);
}

.bp-file__meta {
    flex: 1;
    min-width: 0;
}

.bp-file__name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bp-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-file__size {
    font-size: 0.88rem;
    color: var(--bp-faint);
    margin-top: 0.1rem;
}

.bp-file__status {
    margin-top: 0;
}

.bp-file__progress {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bp-accent-track);
}

.bp-file__progressbar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--bp-accent);
    transition: width 160ms ease;
}

.bp-file--submitting .bp-file__progressbar,
.bp-file--processing .bp-file__progressbar {
    background: linear-gradient(90deg, var(--bp-accent) 30%, rgba(255, 255, 255, 0.55) 50%, var(--bp-accent) 70%);
    background-size: 200% 100%;
    animation: bp-file-progress-busy 1.2s linear infinite;
}

@keyframes bp-file-progress-busy {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

.bp-file--ready .bp-file__progressbar {
    background: #16a34a;
}

.bp-file--error .bp-file__progressbar {
    background: var(--bp-danger);
}

.bp-file__actions {
    display: flex;
    gap: 0.55rem;
    flex-shrink: 0;
}

.bp-iconbtn {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--bp-border-strong);
    background: #fff;
    color: var(--bp-text);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-iconbtn svg {
    width: 21px;
    height: 21px;
}

.bp-iconbtn--preview:hover {
    background: var(--bp-panel);
    border-color: var(--bp-faint);
    color: var(--bp-heading);
}

.bp-iconbtn--print {
    background: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.bp-iconbtn--print:hover {
    background: var(--bp-accent-dark);
    border-color: var(--bp-accent-dark);
}

.bp-iconbtn--delete {
    border-color: #f3c0c0;
    color: var(--bp-danger);
}

.bp-iconbtn--delete:hover {
    background: var(--bp-danger-soft);
    border-color: #e89a9a;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.bp-footer {
    text-align: center;
    font-size: 0.92rem;
    color: var(--bp-muted);
    margin-top: 0.8rem;
}

.bp-footer b {
    color: var(--bp-heading);
    font-weight: 700;
}

/* ── Standalone pages (guest code, error) ───────────────────────────────── */

.bp-authpage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2.5rem 1.25rem;
}

/* Anchored to the card rather than the viewport so it sits where the broker's own pages put it.
   Left on the page corner it drifted a screen-width away from the card on a desktop window, which
   read as chrome belonging to nothing. */
.bp-authpage__lang {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.bp-authpage__card {
    position: relative;
    flex: none;
    width: 100%;
    max-width: 30rem;
    text-align: center;
    padding: 2.4rem 2.2rem;
}

/* A row of its own: inline-flex let the mark share a line with the error icon beside it, which
   turned the tenant's logo into a decoration next to the warning triangle. */
.bp-authpage__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 1.4rem;
}

/* The BeeSmart lockup is far wider than it is tall, so it is capped on width rather than height
   like the library marks: matching their 44px height would run it past the edge of the card. */
.bp-authpage__beesmart-logo {
    display: block;
    height: auto;
    width: auto;
    max-width: min(190px, 52vw);
    max-height: 44px;
    object-fit: contain;
}

.bp-authpage__runtime-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(280px, 72vw);
    max-height: 96px;
    object-fit: contain;
}

.bp-authpage__intro {
    margin: 0 0 1.5rem;
    color: var(--bp-muted);
    font-size: 1.02rem;
    line-height: 1.5;
}

.bp-authpage__guest {
    margin-bottom: 1.4rem;
}

.bp-authpage__actions {
    display: grid;
    gap: 0.7rem;
}

.bp-authpage__loading {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.75rem 0;
    color: var(--bp-muted);
}

.bp-authpage__error {
    margin-bottom: 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-danger-soft);
    border: 1px solid #f3c0c0;
    color: #b42318;
    font-size: 0.95rem;
}

.bp-authpage__back {
    margin-top: 1.4rem;
    font-size: 0.92rem;
}

.bp-authpage__back a {
    color: var(--bp-accent-dark);
    text-decoration: none;
    font-weight: 500;
}

.bp-authpage__back a:hover {
    text-decoration: underline;
}

.bp-authpage__erricon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--bp-danger-soft);
    color: var(--bp-danger);
}

.bp-authpage__erricon svg {
    width: 32px;
    height: 32px;
}

.bp-authpage__title {
    margin: 0 0 0.45rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bp-heading);
}

.bp-authpage__reqid {
    margin: 0 0 1.3rem;
    font-size: 0.85rem;
    color: var(--bp-faint);
}

.bp-authpage__reqid code {
    color: var(--bp-text);
}

.bp-btn--ghost {
    background: #fff;
    border: 1px solid var(--bp-border-strong);
    color: var(--bp-text);
}

.bp-btn--ghost:hover {
    background: var(--bp-panel);
    border-color: var(--bp-faint);
    color: var(--bp-heading);
}

.bp-btn--danger {
    background: var(--bp-danger);
    color: #fff;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24);
}

.bp-btn--danger:hover {
    background: #b91c1c;
    color: #fff;
    transform: translateY(-1px);
}

/* ── Mobile bottom tab bar (hidden on desktop) ──────────────────────────── */

.bp-tabbar {
    display: none;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: var(--bp-surface);
    border-top: 1px solid var(--bp-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06);
}

.bp-tabbar__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--bp-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.bp-tabbar__btn svg {
    width: 24px;
    height: 24px;
}

.bp-tabbar__btn--active {
    color: var(--bp-accent);
    background: var(--bp-accent-soft);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    /* App-shell: a fixed-height screen with two tabbed panes and a bottom tab
       bar, so mobile feels like a focused app instead of one long scroll. */
    .bp-shell {
        height: 100vh;
        height: 100dvh;
    }

    .bp-page {
        padding: 0;
        overflow: hidden;
        justify-content: flex-start;
    }

    /* Full-bleed content on mobile: the white runs edge-to-edge straight into
       the bottom tab bar (no floating card, no gap/shadow break). */
    .bp-card {
        padding: 1.1rem;
        overflow: hidden;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .bp-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .bp-col-left,
    .bp-col-right {
        flex: 1;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
    }

    .bp-col-left {
        justify-content: flex-start;
        gap: 1.1rem;
    }

    /* Show only the active tab's pane */
    .bp-shell[data-tab="files"] .bp-col-left {
        display: none;
    }

    .bp-shell[data-tab="code"] .bp-col-right {
        display: none;
    }

    .bp-files {
        /* Let the list grow inside the already-scrollable files pane. A second,
           short scroll area hid all but one upload on small phone screens. */
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .dropzone {
        min-height: 120px;
    }

    .bp-footer {
        display: none;
    }

    .bp-tabbar {
        display: flex;
    }

    .bp-file__name {
        max-width: 46vw;
    }

    /* Compact top bar so the brand + flag + logout fit on a phone */
    .bp-navbar {
        padding: 0 1rem;
        gap: 0.5rem;
    }

    .bp-navbar__mark {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .bp-navbar__mark svg {
        width: 19px;
        height: 19px;
    }

    .bp-navbar__name {
        font-size: 1.2rem;
    }

    .bp-navbar__kb-logo {
        height: 34px;
        max-width: 48vw;
    }

    .bp-navbar__hasselt-logo {
        height: 36px;
        max-width: 47vw;
    }

    .bp-navbar__actions {
        gap: 0.5rem;
    }

    .bp-langflag {
        width: 42px;
        height: 32px;
    }

    .bp-logout {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
        gap: 0.4rem;
    }
}

/* ── Legacy classes kept for /guestcode + standalone pages, restyled ────── */

.biebprinten-container {
    background: transparent;
    color: var(--bp-text);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

.biebprinten-card {
    border-radius: var(--bp-radius);
    border: 1px solid #d9dee8;
    background: #fff;
    box-shadow: var(--bp-shadow);
}

.biebprinten-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--bp-heading);
}

.beesmart-brand {
    color: var(--bp-accent);
    font-weight: 600;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-accent);
    border-radius: 14px;
    color: #fff;
}

.icon-box i {
    color: #fff;
}

.biebprinten-btn-primary {
    background: var(--bp-accent);
    border: none;
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: var(--bp-radius-sm);
    font-weight: 500;
    transition: background 120ms ease;
}

.biebprinten-btn-primary:hover {
    background: var(--bp-accent-dark);
    color: #fff;
}

.text-orange {
    color: var(--bp-accent) !important;
}

.text-primary {
    color: var(--bp-accent) !important;
}

/* ── Print options / preview modals (Bootstrap) themed to orange ────────── */

.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.modal-header,
.modal-footer {
    border-color: var(--bp-border);
}

.modal-title {
    font-weight: 600;
    color: var(--bp-heading);
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.btn-outline-primary {
    color: var(--bp-accent-dark);
    border-color: var(--bp-border-strong);
}

.btn-outline-primary:hover {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.btn-primary {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bp-accent-dark) !important;
    border-color: var(--bp-accent-dark) !important;
    color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--bp-accent-rgb), 0.18);
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bp-accent-rgb), 0.20);
}

.form-check-input:checked {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
}

/* Print-options summary box (was Bootstrap alert-info blue) */
.alert-info {
    background-color: var(--bp-accent-soft);
    border: 1px solid var(--bp-accent-border);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-accent-ink);
}

.alert-info .fa-circle-info,
.alert-info strong {
    color: var(--bp-accent-dark);
}

.modal-footer .btn-secondary {
    background: #fff;
    border: 1px solid var(--bp-border-strong);
    color: var(--bp-text);
}

.modal-footer .btn-secondary:hover {
    background: var(--bp-panel);
    color: var(--bp-heading);
}

/* ── Print options: file name as a header line ──────────────────────────── */

.bp-print-options__heading {
    min-width: 0; /* let the file name truncate instead of pushing the close button */
}

.bp-print-options__file {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--bp-muted);
}

.bp-print-options__file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Preview modal: full-height body, PDF.js canvas pages ───────────────── */

#previewModal .modal-content {
    overflow: hidden; /* clip the square page corners to the rounded card */
}

@media (min-width: 992px) {
    #previewModal .modal-content {
        height: 92vh;
    }
}

#previewModal .modal-body {
    padding: 0 !important; /* keep p-0 even under the mobile .modal-body override */
    min-height: 0; /* allow the flex child to shrink so the preview can scroll */
}

.bp-preview {
    padding: 1.5rem 1rem;
    min-height: 0; /* bound the scroll container so overflow:auto actually scrolls */
}

.bp-preview__pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 100%;
}

.bp-preview__slot {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    max-width: 100%;
}

.bp-preview__slot--pending {
    background: linear-gradient(100deg, #fff 40%, #f1f5f9 50%, #fff 60%);
    background-size: 200% 100%;
    animation: bp-preview-shimmer 1.4s ease-in-out infinite;
}

@keyframes bp-preview-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}

.bp-preview__page {
    display: block;
    max-width: 100%;
    height: auto;
}

.bp-preview__pages--grayscale .bp-preview__page {
    filter: grayscale(1);
}

.bp-preview__pagenum {
    position: sticky;
    bottom: 0.75rem;
    width: fit-content;
    margin: 0.75rem auto 0;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 2;
}

.bp-preview__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bp-muted);
    font-size: 0.95rem;
    pointer-events: none;
}

.bp-preview__loading--error {
    color: #b91c1c;
    font-weight: 500;
}

/* ── Toasts (bp-toast) ──────────────────────────────────────────────────── */

.bp-toast-host {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.bp-toast {
    /*
     * Toasts are rendered above Bootstrap modals. Keep their body transparent
     * to pointer input so a notification cannot block modal actions such as
     * Save; the explicit close control remains interactive below.
     */
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-left: 4px solid var(--bp-muted);
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow);
    color: var(--bp-text);
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.bp-toast--in {
    opacity: 1;
    transform: translateY(0);
}

.bp-toast--out {
    opacity: 0;
    transform: translateY(10px);
}

.bp-toast__icon {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 1px;
}

.bp-toast__icon svg {
    width: 100%;
    height: 100%;
}

.bp-toast__msg {
    flex: 1 1 auto;
    word-break: break-word;
}

.bp-toast__close {
    pointer-events: auto;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--bp-faint);
    cursor: pointer;
    padding: 0;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bp-toast__close:hover {
    color: var(--bp-text);
}

.bp-toast__close svg {
    width: 1rem;
    height: 1rem;
}

.bp-toast--error {
    border-left-color: var(--bp-danger);
}

.bp-toast--error .bp-toast__icon {
    color: var(--bp-danger);
}

.bp-toast--success {
    border-left-color: var(--bp-success);
}

.bp-toast--success .bp-toast__icon {
    color: var(--bp-success);
}

.bp-toast--info {
    border-left-color: var(--bp-accent);
}

.bp-toast--info .bp-toast__icon {
    color: var(--bp-accent);
}

/* ── Confirm dialog (bp-confirm) ────────────────────────────────────────── */

.bp-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 180ms ease;
}

.bp-confirm-overlay--in {
    opacity: 1;
}

.bp-confirm-overlay--out {
    opacity: 0;
}

.bp-confirm {
    width: min(420px, 100%);
    background: var(--bp-surface);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow);
    padding: 1.7rem 1.6rem 1.35rem;
    text-align: center;
    transform: translateY(10px) scale(0.97);
    transition: transform 180ms ease;
}

.bp-confirm-overlay--in .bp-confirm {
    transform: translateY(0) scale(1);
}

.bp-confirm__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bp-danger-soft);
    color: var(--bp-danger);
}

.bp-confirm__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.bp-confirm__title {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bp-heading);
}

.bp-confirm__msg {
    margin: 0 0 1.35rem;
    color: var(--bp-muted);
    font-size: 0.98rem;
    line-height: 1.45;
}

.bp-confirm__actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
}

.bp-confirm__actions .bp-btn {
    flex: 1 1 0;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
}

/* ── Blazor framework bits ──────────────────────────────────────────────── */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--bp-danger);
}

.validation-message {
    color: var(--bp-danger);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Er is een fout opgetreden.";
}

/* Mobile modal optimizations */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }

    /* Preview is a fullscreen modal on phones — let it reach the screen edges */
    #previewModal .modal-dialog {
        margin: 0;
        max-width: none;
    }

    .bp-preview {
        padding: 1rem 0.75rem;
    }

    /* The option groups stack on a phone and no longer fit on one screen. The
       dialog takes the full height and only the body scrolls, so Opslaan stays
       visible in the footer instead of sitting below the fold. */
    /* --bp-viewport-* are set from window.visualViewport while the dialog is open, so
       an open keyboard shortens the dialog instead of pushing the footer behind it. */
    #printOptionsModal .modal-dialog {
        margin: 0;
        margin-top: var(--bp-viewport-offset, 0px);
        max-width: none;
        height: var(--bp-viewport-height, 100%);
        /* modal-dialog-centered sets min-height: calc(100% - margin * 2), which would
           otherwise win over the height above and keep the dialog behind the keyboard. */
        min-height: var(--bp-viewport-height, 100%);
    }

    #printOptionsModal .modal-content {
        border-radius: 0;
    }

    #printOptionsModal .modal-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    #printOptionsModal .modal-footer .btn {
        flex: 1 1 0;
    }

    #printOptionsModal .mb-3 {
        margin-bottom: 0.625rem !important;
    }

    #printOptionsModal .form-label {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

    #printOptionsModal .btn-group .btn {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    #printOptionsModal .alert-info {
        margin-bottom: 0;
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }
}

/* ===========================================================================
   KB (Koninklijke Bibliotheek) skin — active on /kb only.
   KB's house style is black, so the shared Biebprinten orange accent is
   remapped to the same near-black the KB wordmark uses. Everything else
   (layout, spacing, components) is inherited unchanged.
   =========================================================================== */

/* The palette lives on its own selector because the print-options and preview
   modals render as siblings of .bp-shell, not inside it — Bootstrap keeps a modal
   where it is declared, and both are declared above the shell so the backdrop can
   sit behind them. That put them outside the cascade the KB variables travel
   through, so they kept painting themselves in the shared Biebprinten orange.
   .bp-kb-theme carries the same palette into those subtrees; only the shell itself
   paints the page backdrop. */
.bp-shell--kb,
.bp-kb-theme {
    --bp-accent: #101111;
    --bp-accent-dark: #000000;
    --bp-accent-soft: #f2f3f3;
    --bp-accent-rgb: 16, 17, 17;
    --bp-accent-ink: #101111;
    --bp-accent-border: #d5d8d8;
    --bp-accent-border-strong: #bfc3c3;
    --bp-accent-tint: #fafafa;
    --bp-accent-track: #e2e5e5;
}

.bp-shell--kb {
    /* The body backdrop carries an orange glow that the accent variables cannot
       reach, so the KB shell paints its own neutral backdrop over it. */
    background-color: #eef2f7;
    background-image:
        radial-gradient(1200px 760px at 6% -8%, rgba(16, 17, 17, 0.07), transparent 58%),
        radial-gradient(1100px 720px at 104% 110%, rgba(31, 110, 200, 0.14), transparent 56%),
        radial-gradient(900px 600px at 92% -10%, rgba(16, 17, 17, 0.04), transparent 60%),
        linear-gradient(180deg, #f6f9fc 0%, #e9eef6 100%);
    background-repeat: no-repeat;
}

/* The shared modal rules reach for --bp-accent-dark, which is pure black on KB, and
   for the blue-grey --bp-border-strong. Both read harsher and colder than the rest
   of the KB skin, so the KB scope pulls the unselected option toggles back to the
   wordmark graphite on a KB-grey border. Selected toggles keep the full near-black
   fill they inherit from --bp-accent. */
.bp-kb-theme .btn-outline-primary {
    color: var(--bp-accent-ink);
    border-color: var(--bp-accent-border-strong);
}

.bp-kb-theme .btn-outline-primary:hover {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

/* "Je keuze" summary: graphite label and icon on the KB grey wash, instead of the
   pure black the shared rule would otherwise pick. */
.bp-kb-theme .alert-info strong,
.bp-kb-theme .alert-info .fa-circle-info {
    color: var(--bp-accent-ink);
}

/* ===========================================================================
   Hasselt (Bibliotheek Hasselt Limburg) skin — active on /hasselt only.
   Hasselt signs in on a warm grey and cream card and, until now, was handed
   back to the shared Biebprinten orange the moment the session started. These
   values are the ones the Identity shell already uses
   (body.identity-shell--biebprinten-hasselt), so the app continues the sign-in
   screen instead of contradicting it.
   =========================================================================== */

.bp-shell--hasselt,
.bp-hasselt-theme {
    --bp-accent: #646363;
    --bp-accent-dark: #4e4d4d;
    --bp-accent-soft: #f1f1f0;
    --bp-accent-rgb: 100, 99, 99;
    --bp-accent-ink: #3f3e3e;
    --bp-accent-border: #d4dbde;
    --bp-accent-border-strong: #bfc7cb;
    --bp-accent-tint: #fafaf9;
    --bp-accent-track: #e4e4e2;
    --bp-heading: #121212;
}

.bp-shell--hasselt {
    background-color: #f7f7f5;
    background-image:
        radial-gradient(1200px 760px at 6% -8%, rgba(100, 99, 99, 0.10), transparent 58%),
        radial-gradient(1100px 720px at 104% 110%, rgba(100, 99, 99, 0.06), transparent 56%),
        linear-gradient(180deg, #fbfbfa 0%, #f2f2ef 100%);
    background-repeat: no-repeat;
}

/* Hasselt's lime is a highlight colour, not a surface: their site spends it on the
   hover state of a grey button and nowhere else, so it is scoped to exactly that. */
.bp-hasselt-theme .btn-outline-primary {
    color: var(--bp-accent-ink);
    border-color: var(--bp-accent-border-strong);
}

.bp-hasselt-theme .btn-outline-primary:hover,
.bp-shell--hasselt .bp-btn--primary:hover {
    background-color: #a8ad19;
    border-color: #a8ad19;
    color: #fff;
}

.bp-hasselt-theme .alert-info strong,
.bp-hasselt-theme .alert-info .fa-circle-info {
    color: var(--bp-accent-ink);
}

/* ===========================================================================
   dbieb (Leeuwarden / Tytsjerksteradiel) skin — active on /dbieb only.
   Coral on warm cream, taken from dbieb's own house style: #eb5e5d is the
   accent their site spends on links, borders and calls to action, and #f6f4ec
   is the cream every page sits on.
   =========================================================================== */

.bp-shell--dbieb,
.bp-dbieb-theme {
    --bp-accent: #eb5e5d;
    --bp-accent-dark: #d54e4d;
    --bp-accent-soft: #fdeeed;
    --bp-accent-rgb: 235, 94, 93;
    --bp-accent-ink: #b23f3e;
    --bp-accent-border: #f2ccc9;
    --bp-accent-border-strong: #e9b3b0;
    --bp-accent-tint: #fefaf9;
    --bp-accent-track: #f0e3de;
    --bp-heading: #1d1d1b;
}

.bp-shell--dbieb {
    background-color: #f6f4ec;
    background-image:
        radial-gradient(1150px 740px at 4% -8%, rgba(235, 94, 93, 0.13), transparent 58%),
        radial-gradient(1050px 700px at 104% 110%, rgba(235, 94, 93, 0.08), transparent 56%),
        linear-gradient(180deg, #fbf9f3 0%, #f1eee2 100%);
    background-repeat: no-repeat;
}

/* Coral is loud enough that a full-strength outline reads as a selected state, so
   unselected toggles sit on the muted border and only fill in on hover. */
.bp-dbieb-theme .btn-outline-primary {
    color: var(--bp-accent-ink);
    border-color: var(--bp-accent-border-strong);
}

.bp-dbieb-theme .btn-outline-primary:hover {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.bp-dbieb-theme .alert-info strong,
.bp-dbieb-theme .alert-info .fa-circle-info {
    color: var(--bp-accent-ink);
}

/* The dbieb wordmark is a wide lowercase lockup, so it is sized like the Hasselt
   lockup rather than the tall, narrow KB monogram. */
.bp-navbar__dbieb-logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: min(230px, 52vw);
    object-fit: contain;
}

/* ===========================================================================
   Antwerpen (Bibliotheek Antwerpen) skin — active on /antwerpen only.
   A neutral slate placeholder until the library sends its own house style:
   #2d5f7a carries links, borders and calls to action, #1d2733 the headings
   and the wordmark. Swap these for the real palette once it arrives.
   =========================================================================== */

.bp-shell--antwerpen,
.bp-antwerpen-theme {
    --bp-accent: #2d5f7a;
    --bp-accent-dark: #244c62;
    --bp-accent-soft: #eaf1f5;
    --bp-accent-rgb: 45, 95, 122;
    --bp-accent-ink: #234a5f;
    --bp-accent-border: #c9d8e1;
    --bp-accent-border-strong: #adc3d0;
    --bp-accent-tint: #f7fafc;
    --bp-accent-track: #dfe8ee;
    --bp-heading: #1d2733;
}

.bp-shell--antwerpen {
    background-color: #f4f6f8;
    background-image:
        radial-gradient(1150px 740px at 4% -8%, rgba(45, 95, 122, 0.11), transparent 58%),
        radial-gradient(1050px 700px at 104% 110%, rgba(45, 95, 122, 0.07), transparent 56%),
        linear-gradient(180deg, #f9fafb 0%, #eef2f5 100%);
    background-repeat: no-repeat;
}

.bp-antwerpen-theme .btn-outline-primary {
    color: var(--bp-accent-ink);
    border-color: var(--bp-accent-border-strong);
}

.bp-antwerpen-theme .btn-outline-primary:hover {
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
    color: #fff;
}

.bp-antwerpen-theme .alert-info strong,
.bp-antwerpen-theme .alert-info .fa-circle-info {
    color: var(--bp-accent-ink);
}

/* The placeholder wordmark is a wide two-line text lockup, sized like dbieb's. */
.bp-navbar__antwerpen-logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: min(230px, 52vw);
    object-fit: contain;
}

@media (max-width: 640px) {
    .bp-navbar__dbieb-logo,
    .bp-navbar__antwerpen-logo {
        height: 30px;
        max-width: 44vw;
    }

    .dropzone {
        min-height: 0;
        padding: 0.9rem 0.8rem;
    }

    .bp-dropzone__icon {
        width: 32px;
        height: 32px;
    }

    .bp-dropzone__title {
        margin-top: 0.3rem;
        font-size: 1rem;
        line-height: 1.35;
    }

    .bp-dropzone__title-desktop {
        display: none;
    }

    .bp-dropzone__title-mobile {
        display: inline;
    }

    .bp-dropzone__hint {
        margin: 0.2rem 0 0.7rem;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    .dropzone .bp-btn {
        min-height: 44px;
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
}