/* ==========================================================================
   JotLek — Design System
   --------------------------------------------------------------------------
   Single source of truth for every control in the app, the admin panel and the
   auth screens. Plain CSS on purpose: it is linked directly in both development
   and production, so there is no build step that can let the two drift apart.

   Utility classes still come from Tailwind (CDN in dev, built CSS in prod).
   Anything reused across pages belongs here, not in a layout's <style> block.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Control sizing — inputs and buttons share these so they always line up */
    --ctl-h:        2.75rem;    /* 44px — default, comfortable touch target   */
    --ctl-h-sm:     2.25rem;    /* 36px — table rows, toolbars                */
    --ctl-h-lg:     3.25rem;    /* 52px — primary actions on their own        */

    --ctl-radius:    0.875rem;
    --ctl-radius-sm: 0.625rem;
    --ctl-radius-lg: 1rem;

    --ctl-px:       1rem;
    --ctl-px-sm:    0.75rem;
    --ctl-px-lg:    1.5rem;

    --ctl-fs:       0.9375rem;  /* 15px */
    --ctl-fs-sm:    0.8125rem;  /* 13px */
    --ctl-fs-lg:    1rem;

    --ctl-gap:      0.5rem;

    /* Palette */
    --c-emerald:      #10b981;
    --c-emerald-dark: #059669;
    --c-emerald-lt:   #34d399;
    --c-red:          #f87171;
    --c-yellow:       #fcd34d;
    --c-muted:        #a1a1aa;
    --c-faint:        #71717a;

    --surface:        rgba(255, 255, 255, 0.05);
    --surface-hover:  rgba(255, 255, 255, 0.08);
    --border:         rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Buttons
   Every variant is the same box: same height, same radius, same font size.
   The 1px transparent border on .btn-primary keeps its box model identical to
   the bordered variants and to inputs, so nothing is a pixel taller.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ctl-gap);
    box-sizing: border-box;
    min-height: var(--ctl-h);
    padding: 0 var(--ctl-px-lg);
    border-radius: var(--ctl-radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--ctl-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-ghost:active { transform: scale(.97); }

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible,
.input-field:focus-visible {
    outline: 2px solid var(--c-emerald);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled,
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-danger[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary            { background: var(--c-emerald); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--c-emerald-dark); }

.btn-secondary          { background: rgba(255,255,255,.08); color: #fff; border-color: var(--border); font-weight: 500; }
.btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.14); }

.btn-danger             { background: rgba(239,68,68,.15); color: var(--c-red); border-color: rgba(239,68,68,.3); font-weight: 500; }
.btn-danger:hover:not(:disabled)  { background: rgba(239,68,68,.25); }

.btn-ghost              { background: transparent; color: var(--c-muted); font-weight: 500; }
.btn-ghost:hover:not(:disabled)   { background: rgba(255,255,255,.08); color: #fff; }

/* Size modifiers — apply to buttons and inputs alike */
.btn-sm,
.input-sm {
    min-height: var(--ctl-h-sm) !important;
    height: var(--ctl-h-sm);
    padding: 0 var(--ctl-px-sm) !important;
    font-size: var(--ctl-fs-sm) !important;
    border-radius: var(--ctl-radius-sm) !important;
    gap: 0.375rem;
}

.btn-lg,
.input-lg {
    min-height: var(--ctl-h-lg) !important;
    padding: 0 var(--ctl-px-lg) !important;
    font-size: var(--ctl-fs-lg) !important;
    border-radius: var(--ctl-radius-lg) !important;
}

.btn-block { width: 100%; }

/* ==========================================================================
   Form controls
   Same height and radius as buttons so a field never towers over its button.
   ========================================================================== */

.input-field {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ctl-h);
    padding: 0 var(--ctl-px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--ctl-radius);
    color: #fff;
    font-family: inherit;
    font-size: var(--ctl-fs);
    line-height: 1.4;
    transition: border-color .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.input-field::placeholder { color: var(--c-faint); }

.input-field:focus {
    outline: none;
    border-color: rgba(16,185,129,.5);
    background: var(--surface-hover);
}

.input-field:disabled { opacity: .5; cursor: not-allowed; }

/* Multi-line and native selects need their own vertical rhythm */
textarea.input-field {
    height: auto;
    padding: 0.7rem var(--ctl-px);
    line-height: 1.6;
    resize: vertical;
}

select.input-field {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
}

/* Dropdown items are rendered by the OS against a solid backdrop, so the
   translucent field colour cannot be inherited — set them explicitly or the
   text comes out white on white. */
select.input-field option,
select.input-field optgroup {
    background-color: #18181b;
    color: #fff;
}

select.input-field option:checked,
select.input-field option:hover {
    background-color: #10b981;
    color: #fff;
}

/* Native pickers inside date/time inputs */
input.input-field[type="date"]::-webkit-calendar-picker-indicator,
input.input-field[type="month"]::-webkit-calendar-picker-indicator,
input.input-field[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}

/* Centre the text of single-line inputs that use an explicit height */
input.input-field { line-height: normal; }

.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-muted);
    margin-bottom: 0.375rem;
}

.input-hint  { font-size: 0.75rem; color: var(--c-faint); margin-top: 0.375rem; }
.input-error { font-size: 0.75rem; color: var(--c-red);   margin-top: 0.375rem; }

/* A field and its button sitting on one row */
.input-group { display: flex; gap: 0.5rem; align-items: stretch; }
.input-group > .input-field { flex: 1 1 auto; min-width: 0; }
.input-group > .btn-primary,
.input-group > .btn-secondary,
.input-group > .btn-danger { flex: 0 0 auto; }

/* Toolbar of actions — keeps every button the same height and spacing */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn-row > form { display: inline-flex; }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.glass-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.glass-card-lg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--ctl-h);
    padding: 0 var(--ctl-px);
    border: 1px solid transparent;
    border-radius: var(--ctl-radius);
    color: var(--c-muted);
    font-size: var(--ctl-fs);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }

.nav-item.active {
    background: rgba(16,185,129,.15);
    color: var(--c-emerald-lt);
    border-color: rgba(16,185,129,.3);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-emerald { background: rgba(16,185,129,.15);  color: var(--c-emerald-lt); border-color: rgba(16,185,129,.3); }
.badge-yellow  { background: rgba(245,158,11,.15);  color: var(--c-yellow);     border-color: rgba(245,158,11,.3); }
.badge-red     { background: rgba(239,68,68,.15);   color: var(--c-red);        border-color: rgba(239,68,68,.3); }
.badge-zinc    { background: rgba(63,63,70,.5);     color: var(--c-muted);      border-color: rgba(82,82,91,.3); }
.badge-blue    { background: rgba(59,130,246,.15);  color: #60a5fa;             border-color: rgba(59,130,246,.3); }

/* ==========================================================================
   Tables
   ========================================================================== */

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 0.875rem;
    color: #d4d4d8;
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td      { background: rgba(255,255,255,.03); }

/* หัวตารางต้องชิดทางเดียวกับข้อมูลในคอลัมน์นั้น
   `.data-table th` (0,1,1) ชนะ `.text-right` (0,1,0) หัวคอลัมน์ยอดเงินที่เขียน
   text-right ไว้แล้วจึงยังชิดซ้ายอยู่ ต้องยกความจำเพาะให้เท่ากันถึงจะมีผล */
.data-table th.text-right,
.data-table td.text-right   { text-align: right; }

.data-table th.text-center,
.data-table td.text-center  { text-align: center; }

.data-table th.text-left,
.data-table td.text-left    { text-align: left; }

/* ตัวเลขในตารางควรเรียงหลักให้ตรงกัน อ่านเทียบยอดได้เร็วกว่า */
.data-table td.text-right   { font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   POS entry helpers
   ========================================================================== */

.amount-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ctl-h-sm);
    padding: 0 var(--ctl-px-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--ctl-radius-sm);
    color: var(--c-emerald-lt);
    font-family: inherit;
    font-size: var(--ctl-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.amount-btn:hover  { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); }
.amount-btn:active { transform: scale(.95); }
.amount-btn.selected { background: rgba(16,185,129,.3); border-color: rgba(16,185,129,.5); color: #6ee7b7; }

.progress-bar  { height: 0.5rem; border-radius: 9999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 9999px; transition: width .5s ease; }

.numpad-input { font-size: 1.5rem; font-weight: 700; letter-spacing: .15em; text-align: center; }

/* ==========================================================================
   Autocomplete
   ========================================================================== */

.autocomplete-dropdown {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: 0.25rem;
    background: #18181b;
    border: 1px solid var(--border);
    border-radius: var(--ctl-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
    overflow: hidden;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #d4d4d8;
    cursor: pointer;
    transition: background-color .1s ease;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted { background: rgba(255,255,255,.08); }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 320px;
    padding: 0.875rem 1.25rem;
    border: 1px solid;
    border-radius: var(--ctl-radius);
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(12px);
    animation: slideIn .2s ease-out;
}

.toast-success { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.toast-error   { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.3);  color: #fca5a5; }
.toast-warning { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.3); color: var(--c-yellow); }

@keyframes slideIn  { from { transform: translateX(100%); opacity: 0; } to   { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; }   to   { transform: translateX(100%); opacity: 0; } }

/* ==========================================================================
   Misc
   ========================================================================== */

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,.1);
    border-top-color: var(--c-emerald);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

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

.bg-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

[x-cloak] { display: none !important; }

/* ==========================================================================
   Date picker (flatpickr) — ธีมมืดให้เข้ากับระบบ
   flatpickr มาพร้อมธีมสว่าง ถ้าไม่ทับสีจะได้ปฏิทินขาวโพลนบนพื้นดำ
   ========================================================================== */

.flatpickr-calendar {
    background: #18181b;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--ctl-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    color: #fff;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months { padding-top: .25rem; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
    background: transparent;
    color: #fff;
    fill: #fff;
}

.flatpickr-weekday { color: var(--c-muted); font-weight: 600; }

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #18181b;
    color: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--c-muted); }

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--c-emerald); }

.numInputWrapper span { border-color: rgba(255,255,255,.15); }
.numInputWrapper span:hover { background: rgba(255,255,255,.06); }
.numInputWrapper span.arrowUp::after   { border-bottom-color: var(--c-muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--c-muted); }
.numInputWrapper:hover { background: transparent; }

.flatpickr-day {
    color: #e4e4e7;
    border-radius: var(--ctl-radius-sm);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(255,255,255,.08);
    border-color: transparent;
}

.flatpickr-day.today {
    border-color: var(--c-emerald);
}

.flatpickr-day.today:hover {
    background: rgba(16,185,129,.15);
    color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--c-emerald);
    border-color: var(--c-emerald);
    color: #fff;
    font-weight: 600;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #52525b; }

/* ตัวเลือกเวลา — flatpickr โหมด noCalendar */
.flatpickr-calendar.noCalendar .flatpickr-time { border-top: 0; }

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: #fff;
    background: transparent;
    font-weight: 600;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time .flatpickr-am-pm:hover {
    background: rgba(255,255,255,.06);
}

.flatpickr-time .flatpickr-time-separator { color: var(--c-muted); }

/* ปุ่มลัด วันนี้ / พรุ่งนี้ / เมื่อวาน */
.fp-shortcuts {
    display: flex;
    gap: var(--ctl-gap);
    padding: .625rem .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.fp-shortcut {
    flex: 1;
    height: var(--ctl-h-sm);
    padding: 0 var(--ctl-px-sm);
    font-size: var(--ctl-fs-sm);
    font-weight: 500;
    color: #d4d4d8;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--ctl-radius-sm);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.fp-shortcut:hover {
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.35);
    color: var(--c-emerald-lt);
}

/* ช่องแสดงผลที่ flatpickr สร้างขึ้น ต้องอ่านออกว่าคลิกได้ */
.fp-alt { cursor: pointer; }
.fp-alt:read-only { opacity: 1; }

/* ==========================================================================
   ชวนติดตั้งเป็นแอป (PWA)
   เขียนเป็น CSS ธรรมดาเพราะโมดัลนี้ถูกควบคุมด้วยสคริปต์เดี่ยวที่ไม่พึ่ง Alpine
   ถ้าใช้คลาส Tailwind จะพังทันทีที่ build ไม่ได้เก็บคลาสไป
   ========================================================================== */

.pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pwa-modal[hidden] { display: none; }

.pwa-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    animation: pwaFade .2s ease;
}

.pwa-sheet {
    position: relative;
    width: 100%;
    max-width: 26rem;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1rem;
    background: #18181b;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -12px 48px rgba(0,0,0,.6);
    animation: pwaUp .28s cubic-bezier(.16,1,.3,1);
}

@media (min-width: 640px) {
    .pwa-modal { align-items: center; padding: 1rem; }
    .pwa-sheet { border-radius: 1.5rem; border-bottom: 1px solid var(--border); animation: pwaPop .24s cubic-bezier(.16,1,.3,1); }
    .pwa-grip { display: none; }
}

@keyframes pwaFade { from { opacity: 0; } }
@keyframes pwaUp   { from { transform: translateY(100%); } }
@keyframes pwaPop  { from { transform: scale(.94); opacity: 0; } }

.pwa-grip {
    width: 2.5rem; height: .25rem;
    margin: 0 auto .875rem;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
}

.pwa-x {
    position: absolute;
    top: .875rem; right: .875rem;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: var(--c-faint);
    cursor: pointer;
}
.pwa-x:hover { background: rgba(255,255,255,.12); color: #fff; }

.pwa-head { display: flex; align-items: center; gap: .875rem; }

.pwa-icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: 1rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.5);
}

.pwa-title  { font-size: 1.125rem; font-weight: 800; color: #fff; line-height: 1.3; }
.pwa-sub    { font-size: .8125rem; color: var(--c-muted); margin-top: .25rem; line-height: 1.5; }

.pwa-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1.125rem;
}

.pwa-benefit {
    text-align: center;
    padding: .75rem .375rem;
    border: 1px solid var(--border);
    border-radius: var(--ctl-radius);
    background: rgba(255,255,255,.03);
}
.pwa-benefit i    { color: var(--c-emerald-lt); font-size: .9375rem; }
.pwa-benefit span { display: block; margin-top: .375rem; font-size: .6875rem; color: var(--c-muted); line-height: 1.45; }

.pwa-direct { margin-top: 1.125rem; }

.pwa-btn-main {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%;
    min-height: var(--ctl-h-lg);
    border: 0;
    border-radius: var(--ctl-radius);
    background: var(--c-emerald);
    color: #fff;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(16,185,129,.28);
}
.pwa-btn-main:hover { background: var(--c-emerald-dark); }
.pwa-btn-main:active { transform: scale(.98); }

.pwa-steps {
    margin-top: 1.125rem;
    padding: .875rem 1rem;
    border: 1px solid rgba(16,185,129,.22);
    border-radius: var(--ctl-radius);
    background: rgba(16,185,129,.06);
}

.pwa-steps-head {
    font-size: .75rem; font-weight: 700;
    color: var(--c-emerald-lt);
    margin-bottom: .625rem;
}

.pwa-step-list { list-style: none; margin: 0; padding: 0; counter-reset: pwa; }

.pwa-step-list li {
    counter-increment: pwa;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: #d4d4d8;
}
.pwa-step-list li:last-child { margin-bottom: 0; }

.pwa-step-list li::before {
    content: counter(pwa);
    position: absolute;
    left: 0; top: .0625rem;
    width: 1.25rem; height: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(16,185,129,.16);
    color: var(--c-emerald-lt);
    font-size: .6875rem; font-weight: 800;
}

.pwa-step-list b { color: #fff; font-weight: 700; }
.pwa-step-list i { color: var(--c-emerald-lt); }

.pwa-btn-later {
    display: block;
    width: 100%;
    margin-top: .75rem;
    padding: .625rem;
    border: 0;
    background: transparent;
    color: var(--c-faint);
    font-family: inherit; font-size: .8125rem;
    cursor: pointer;
}
.pwa-btn-later:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   แจ้งว่ามีเวอร์ชันใหม่

   แถบเล็กๆ ลอยอยู่ ไม่ใช่โมดัล จงใจให้ขวางทางน้อยที่สุด เพราะอาจโผล่ตอนที่
   คนกำลังคีย์โพยค้างอยู่ กดอัปเดตเองเท่านั้น ระบบไม่รีโหลดทับให้
   เผื่อ safe-area ด้านล่างไว้ด้วย ไม่งั้นบน iPhone จะโดนแถบ home indicator ทับ
   ════════════════════════════════════════════════════════════════════════ */
.pwa-update-toast {
    position: fixed;
    z-index: 70;
    left: .75rem;
    right: .75rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem .75rem .75rem .875rem;
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: .875rem;
    background: rgba(9, 9, 11, .96);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    animation: pwa-toast-in .28s ease-out both;
}

@keyframes pwa-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pwa-update-icon {
    flex: none;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: .625rem;
    background: rgba(16, 185, 129, .14);
    color: #34d399;
    font-size: .875rem;
}

.pwa-update-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column;
    line-height: 1.3;
}
.pwa-update-text b    { font-size: .8125rem; font-weight: 600; color: #fff; }
.pwa-update-text span { font-size: .75rem; color: var(--c-faint); }

.pwa-update-go {
    flex: none;
    padding: .4375rem .875rem;
    border: 0;
    border-radius: .625rem;
    background: #10b981;
    color: #06231a;
    font-family: inherit; font-size: .8125rem; font-weight: 700;
    cursor: pointer;
}
.pwa-update-go:hover { background: #34d399; }

.pwa-update-x {
    flex: none;
    width: 1.75rem; height: 1.75rem;
    display: grid; place-items: center;
    border: 0; border-radius: .5rem;
    background: transparent;
    color: var(--c-faint);
    font-size: .8125rem;
    cursor: pointer;
}
.pwa-update-x:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* จอใหญ่ไม่มีแถบนำทางล่าง วางชิดมุมขวาล่างเป็นแถบสั้นๆ พอ */
@media (min-width: 768px) {
    .pwa-update-toast {
        left: auto;
        right: 1.25rem;
        bottom: 1.25rem;
        max-width: 24rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Cloudflare Turnstile — ยืนยันก่อนถึงกดส่งได้

   ปุ่มถูกปิดด้วยสคริปต์ ไม่ได้ปิดมาจาก HTML ตั้งใจไว้แบบนั้น ถ้า JS ไม่ทำงาน
   ปุ่มจะยังกดได้ แล้วเซิร์ฟเวอร์เป็นคนปฏิเสธเองเพราะไม่มี token
   ดีกว่าปุ่มค้างปิดถาวรจนคนเข้าร้านตัวเองไม่ได้
   ════════════════════════════════════════════════════════════════════════ */
.turnstile-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.turnstile-hint {
    margin: 0;
    font-size: .75rem;
    color: var(--c-faint);
    text-align: center;
}
.turnstile-hint i { color: #a1a1aa; margin-right: .25rem; }

/* ระหว่างรอยืนยัน ปุ่มยังอ่านออกว่าเป็นปุ่มอะไร แค่กดไม่ได้ */
.btn-primary.is-awaiting-turnstile,
.btn-secondary.is-awaiting-turnstile {
    cursor: not-allowed;
}