/* Frontend (customer pages, maid/driver app): large type, big touch targets */
:root {
    --bs-body-font-family: 'Sarabun', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1.125rem;   /* 18px */
    --bs-body-bg: #f4f6fa;
}
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
.form-control, .form-select { font-size: 1.125rem; padding: .7rem .9rem; }
.form-label { font-weight: 600; }
.btn-lg { padding: .9rem 1.2rem; font-size: 1.25rem; }
.btn-xl { padding: 1.2rem 1.2rem; font-size: 1.5rem; font-weight: 700; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Queue number as printed on the sticker */
.queue-no { font-size: 2.75rem; font-weight: 700; letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums; }
.queue-no-sm { font-size: 1.5rem; font-weight: 700; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.queue-input { font-size: 2.25rem !important; text-align: center; letter-spacing: .15em; font-weight: 700; }

/* Staff home tiles */
.tile { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: .75rem; background: #fff;
        text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 1.35rem; font-weight: 600; }
.tile i { font-size: 2rem; }
.tile .count { margin-left: auto; font-size: 1.75rem; font-weight: 700; }
.tile:active { transform: scale(.98); }

/* Machine picker: big radio buttons */
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.machine-grid .btn { font-size: 1.5rem; font-weight: 700; padding: .9rem 0; }

.basket-photo { width: 100%; max-height: 22rem; object-fit: cover; border-radius: .75rem; background: #e9ecef; }
.thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .5rem; flex-shrink: 0; background: #e9ecef; }

.map-pick { height: 18rem; border-radius: .75rem; z-index: 0; }

/* Status timeline */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding: 0 0 .9rem 2rem; color: #adb5bd; }
.steps li::before { content: ''; position: absolute; left: .45rem; top: .45rem; width: .8rem; height: .8rem; border-radius: 50%;
                    background: #dee2e6; }
.steps li::after { content: ''; position: absolute; left: .78rem; top: 1.3rem; bottom: 0; width: 2px; background: #dee2e6; }
.steps li:last-child::after { display: none; }
.steps li.done { color: #212529; }
.steps li.done::before { background: #198754; }
.steps li.current { color: #0d6efd; font-weight: 700; }
.steps li.current::before { background: #0d6efd; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

.qr svg, .qr img { width: 100%; height: auto; display: block; }

/* Full-screen stop on a queue mismatch */
.stop-screen { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; text-align: center;
               background: #dc3545; color: #fff; border-radius: 1rem; padding: 2rem 1rem; }
.stop-screen h1 { font-size: 3rem; font-weight: 700; }
.min-w-0 { min-width: 0; }

/* Status page: alerts that jump to a drop-off photo */
html { scroll-behavior: smooth; }
[id^="pod-"] { scroll-margin-top: 1rem; }