/* Restaurant & Bar POS page — light theme matching the home page.
   Hero layout reuses the shared .pms-hero / .fdb-chip classes from pms_page.css.
   Everything else is scoped under .pos-page so other pages are untouched. */

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.pos-page .breadcrumb-bar { background: var(--up-bg); backdrop-filter: none; border-bottom: 1px solid var(--up-line); }
.pos-page .breadcrumb a { color: var(--up-ink-soft); }
.pos-page .breadcrumb a:hover { color: var(--up-accent-deep); }
.pos-page .breadcrumb-sep { color: #c3c8cf; }
.pos-page .breadcrumb-current { color: var(--up-accent-deep); font-weight: 600; }

/* ── Hero POS terminal: light, same status colours as the Front Desk board ── */
.pos-page .pos-terminal {
  width: 100%; background: #fff; border: 1px solid var(--up-line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--up-shadow-lg); font-family: var(--up-font);
}
.pos-page .pos-term-body { grid-template-columns: minmax(0, 1fr) 215px; height: auto; }
.pos-page .pos-floor { border-right: 1px solid #e7e9ec; padding: 16px 18px; }
.pos-page .pos-floor-title { color: #6f6f6f; font-size: .68rem; }
.pos-page .pft { font-size: .66rem; padding: .25rem .65rem; border-radius: 6px; }
.pos-page .pft.on { background: var(--up-accent-deep); color: #fff; }
.pos-page .pft.off { background: #eef1f4; color: #6b7590; }
.pos-page .pos-grid { gap: 10px; }
.pos-page .pos-table { border-radius: 10px; padding: 12px 6px; border-width: 1.5px; min-height: 64px; }
.pos-page .pos-table-num { font-size: .95rem; font-weight: 800; color: #fff; }
.pos-page .pos-table-lbl { font-size: .58rem; font-weight: 600; color: rgba(255,255,255,.85); }
.pos-page .pos-table.free { background: #fff; border: 1.5px dashed #c3cad1; }
.pos-page .pos-table.free .pos-table-num { color: #3a4253; }
.pos-page .pos-table.free .pos-table-lbl { color: #2d7285; }
.pos-page .pos-table.occupied { background: #3f5873; border-color: #3f5873; }
.pos-page .pos-table.room-charge { background: #c9933a; border-color: #c9933a; }
.pos-page .pos-table.room-charge .pos-table-lbl { color: #fff; }
.pos-page .pos-table.selected { background: var(--up-accent-deep); border-color: var(--up-accent-deep); box-shadow: 0 0 0 4px rgba(47,87,64,.2); }
.pos-page .pos-table.selected .pos-table-lbl { color: #cfe6d6; }
.pos-page .pos-leg-item { color: #6b7590; font-size: .66rem; }
.pos-page .pos-leg-dot { width: 11px; height: 11px; border-radius: 3px; }
.pos-page .pos-leg-item:nth-child(1) .pos-leg-dot { background: #fff !important; border: 1.5px dashed #c3cad1; }
.pos-page .pos-leg-item:nth-child(2) .pos-leg-dot { background: #3f5873 !important; }
.pos-page .pos-leg-item:nth-child(3) .pos-leg-dot { background: #c9933a !important; }
.pos-page .pos-leg-item:nth-child(4) .pos-leg-dot { background: var(--up-accent-deep) !important; }

.pos-page .pos-order-panel { background: #f7f8f9; padding: 16px; }
.pos-page .pop-hdr { color: #6f6f6f; font-size: .66rem; }
.pos-page .pop-table-badge { background: #fff; border: 1px solid #e3e7eb; border-left: 4px solid var(--up-accent-deep); border-radius: 8px; }
.pos-page .pop-tb-name { color: #2b3440; font-size: .78rem; }
.pos-page .pop-tb-info { color: #8a94a0; font-size: .64rem; }
.pos-page .pop-item-qty { background: var(--up-accent-tint); color: var(--up-accent-deep); width: 20px; height: 20px; font-size: .64rem; }
.pos-page .pop-item-name, .pos-page .pop-item-price { color: #3a4253; font-size: .72rem; }
.pos-page .pop-item-price { font-weight: 700; }
.pos-page .pop-divider { background: #e3e7eb; }
.pos-page .pop-total-lbl { color: #8a94a0; font-size: .68rem; }
.pos-page .pop-total-val { color: #2b3440; font-size: 1.05rem; font-weight: 800; }
.pos-page .pop-btn { font-size: .7rem; padding: 9px; border-radius: 8px; font-family: var(--up-font); }
.pos-page .pop-btn.send { background: var(--up-accent-deep); }
.pos-page .pop-btn.room { background: #fff; color: #3f5873; border: 1px solid #d2d6db; }

.pos-page .pos-kds-strip { background: #fafafa; border-top: 1px solid #e7e9ec; padding: 12px 16px; gap: 10px; }
.pos-page .kds-mini { background: #fff; border: 1px solid #e3e7eb; border-radius: 8px; min-width: 110px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pos-page .kds-mini-hdr { color: #3a4253; font-size: .66rem; }
.pos-page .kds-timer { font-size: .64rem; }
.pos-page .kds-timer.ok { color: #4b7d3a; } .pos-page .kds-timer.warn { color: #c9933a; } .pos-page .kds-timer.late { color: #c0392b; }
.pos-page .kds-item-line { color: #4a525c; font-size: .64rem; border-bottom-color: #f0f1f3; }

/* ── Features grid: line icons + green featured cell ─────────────────────── */
.pos-page .feat-cell .feat-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--up-accent-tint);
  display: flex; align-items: center; justify-content: center; font-size: 0; margin-bottom: 18px;
}
.pos-page .feat-icon svg { width: 26px; height: 26px; stroke: var(--up-accent-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pos-page .feat-cell.dark-cell, .pos-page .feat-cell.dark-cell:hover { background: linear-gradient(150deg, #2F5740 0%, #24452f 100%); }
.pos-page .dark-cell .feat-icon { background: rgba(255,255,255,.12); }
.pos-page .dark-cell .feat-icon svg { stroke: #fff; }
.pos-page .dark-cell .feat-desc { color: rgba(255,255,255,.75); }
.pos-page .dark-cell .feat-number { color: rgba(255,255,255,.4); }
.pos-page .dark-cell .feat-pill { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); border-color: transparent; }
.pos-page .feat-title { color: var(--up-accent-deep); }
.pos-page .dark-cell .feat-title { color: #fff; }

/* ── Workflow steps: green instead of navy, light KDS tickets ─────────────── */
.pos-page .pos-how-it-works .step-item.active .step-num { background: var(--up-accent-deep); border-color: var(--up-accent-deep); color: #fff; }
.pos-page .pos-how-it-works .step-item.active .step-title { color: var(--up-accent-deep); }
.pos-page .pos-how-it-works .step-visual-header { background: linear-gradient(135deg, #2F5740, #24452f); }
.pos-page .kds-ticket { background: #fff; border: 1px solid #e3e7eb; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.pos-page .kds-ticket-hdr { border-bottom-color: #eef0f2; }
.pos-page .kds-t-tbl { color: #2b3440; }
.pos-page .kds-t-name { color: #3a4253; }
.pos-page .kds-t-qty.hot { background: #fdecea; color: #c0392b; }
.pos-page .kds-t-qty.cold { background: #e3f1f4; color: #2d7285; }
.pos-page .kds-t-done { border-color: #d2d6db; color: #4b7d3a; }
.pos-page .kds-t-done.checked { background: #4b7d3a; border-color: #4b7d3a; color: #fff; }
.pos-page .kds-t-footer { border-top-color: #eef0f2; }
.pos-page .kds-t-time.ok { color: #4b7d3a; } .pos-page .kds-t-time.late { color: #c0392b; }
.pos-page .rc-avatar { background: var(--up-accent-tint); color: var(--up-accent-deep); font-family: var(--up-font); font-weight: 700; font-size: 15px; }

/* ── Deep features: transparent collage images, image column wider ───────── */
.pos-page .rpos-df-visual.rpos-df-visual--img { background: none; padding: 0; border-radius: 0; min-height: 0; overflow: visible; box-shadow: none; display: block; }
.pos-page .rpos-df-visual--img::before, .pos-page .rpos-df-visual--img::after { display: none; }
.pos-page .rpos-df-visual--img img { display: block; width: 100%; height: auto; }
@media (min-width: 1101px) {
  .pos-page .deep-features-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
}

/* ── Testimonials, CTA, explore-more ─────────────────────────────────────── */
.pos-page .testi-avatar { background: var(--up-accent-tint); color: var(--up-accent-deep); font-family: var(--up-font); font-weight: 700; font-size: 15px; }
.pos-page .pos-cta-strip { background: linear-gradient(160deg, #2F5740 0%, #1f3d2b 100%); }
.pos-page .os-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--up-accent-tint); display: flex; align-items: center; justify-content: center; font-size: 0; }
.pos-page .os-icon img { width: 30px; height: 30px; object-fit: contain; }
.pos-page .os-icon svg { width: 24px; height: 24px; stroke: var(--up-accent-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Small screens: terminal stacks, order panel under the floor plan ────── */
@media (max-width: 640px) {
  .pos-page .pos-term-body { grid-template-columns: 1fr; }
  .pos-page .pos-floor { border-right: 0; border-bottom: 1px solid #e7e9ec; }
  .pos-page .pos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}