/* Point of sale — dashboard design, scoped under .crdts-dash.
   Page-private classes; the shared shell stays in dashboard.scoped.css. */

.crdts-dash h1,.crdts-dash h2,.crdts-dash h3,.crdts-dash h4,.crdts-dash p,.crdts-dash span,.crdts-dash a,.crdts-dash b,.crdts-dash strong,.crdts-dash small,.crdts-dash em,.crdts-dash i,.crdts-dash li,.crdts-dash ul,.crdts-dash ol,.crdts-dash button,.crdts-dash label,.crdts-dash input,.crdts-dash textarea,.crdts-dash select,.crdts-dash summary,.crdts-dash option:not(.material-symbols-outlined):not([class*="material-symbols"]):not(.material-symbols-rounded):not([class*="material-symbols-rounded"]){font-family:inherit}
.crdts-dash .material-symbols-outlined,.crdts-dash [class*="material-symbols"]{
  font-family:'Material Symbols Outlined'!important;font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* ============ point of sale — the till ============ */

.crdts-dash .pos-loading{display:grid;place-items:center;gap:13px;padding:80px 0;color:#a1a194;font-size:12.5px}
.crdts-dash .pos-loading p{margin:0}

.crdts-dash .pos-till{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);gap:22px;align-items:start}
.crdts-dash .pos-till-col{display:grid;gap:20px;min-width:0}
.crdts-dash .pos-till-col>.tab-strip{margin-bottom:0}
.crdts-dash .pos-aside{display:block}
.crdts-dash .pos-mobile{display:none}
.crdts-dash .pos-fab{display:none}

.crdts-dash .pos-cust{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.crdts-dash .pos-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:#fff6d8;
  color:#b48314;display:grid;place-items:center;flex-shrink:0}
.crdts-dash .pos-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.crdts-dash .pos-avatar svg{width:20px;height:20px}
.crdts-dash .pos-cust>b{font-size:13.5px;color:#171714;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.crdts-dash .pos-line{cursor:pointer;transition:background .15s}
.crdts-dash .pos-line:hover{background:#fdfdfa}
.crdts-dash .pos-thumb{overflow:hidden;padding:0}
.crdts-dash .pos-thumb>img{display:block;width:100%;height:100%;object-fit:cover}
.crdts-dash .pos-thumb>svg{width:16px;height:16px;color:#b48314}

.crdts-dash .pos-step{display:flex;align-items:center;gap:2px;padding:2px;flex-shrink:0;
  background:#f6f6f0;border:1px solid #efefe7;border-radius:7px}
.crdts-dash .pos-step button{width:24px;height:24px;border-radius:5px;display:grid;place-items:center;
  color:#6c6c5e;cursor:pointer}
.crdts-dash .pos-step button:hover{background:#fff}
.crdts-dash .pos-step svg{width:13px;height:13px}
.crdts-dash .pos-step>span{min-width:20px;text-align:center;font-size:12px;font-weight:700;color:#171714}

.crdts-dash .pos-sum{font-size:12.5px;font-weight:700;color:#171714;min-width:64px;text-align:end;
  white-space:nowrap}
.crdts-dash .pos-amt{font-size:12.5px;font-weight:700;color:#cc4a05;text-align:end;white-space:nowrap;
  flex-shrink:0}
.crdts-dash .pos-badge{font-size:9.5px;line-height:1;background:var(--orange);color:#fff;border-radius:4px;
  padding:4px 6px;flex-shrink:0}

.crdts-dash .pos-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;
  font-size:12.5px}
.crdts-dash .pos-kv>span{display:flex;align-items:center;gap:6px;color:#8c8c81;white-space:nowrap}
.crdts-dash .pos-kv>span svg{width:13px;height:13px}
.crdts-dash .pos-kv>b{font-weight:700;color:#38382d;text-align:end;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .pos-kv.green>b{color:#4e6b4f}

.crdts-dash .pos-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding-top:13px;border-top:1px solid var(--line);font-size:17px;font-weight:700;color:#171714}
.crdts-dash .pos-total>b{color:#cc4a05;font-size:20px;white-space:nowrap}

.crdts-dash .pos-points{margin-top:14px;border:1px solid #efefe7;border-radius:9px;background:#fcfcfa;
  padding:14px}
.crdts-dash .pos-points.on{border-color:#f6edb9;background:#fff9e4}
.crdts-dash .pos-points .pf-hint p{margin:0 0 4px}

.crdts-dash .pos-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  border:1px solid #f6edb9;background:#fff9e4;border-radius:8px;padding:11px 13px;font-size:12.5px;
  color:#8a6d00}
.crdts-dash .pos-note>span{display:flex;align-items:center;gap:7px;font-weight:600}
.crdts-dash .pos-note>span svg{width:15px;height:15px}
.crdts-dash .pos-note>b{font-weight:700;white-space:nowrap;text-align:end}
.crdts-dash .pos-note.green{border-color:#dbe9db;background:#f2f8f2;color:#4e6b4f}
.crdts-dash .pos-note.violet{border-color:#e6dcf0;background:#f7f2fb;color:#6d4c93}

.crdts-dash .pos-inline{display:flex;align-items:center;gap:9px;margin-top:12px}
.crdts-dash .pos-field{display:flex;align-items:center;gap:9px;flex:1;min-width:0;height:38px;padding:0 12px;
  border:1px solid #e5e5db;border-radius:7px;background:#fff;transition:border-color .15s}
.crdts-dash .pos-field:focus-within{border-color:#e0c266}
.crdts-dash .pos-field>svg{width:15px;height:15px;color:#a1a194;flex-shrink:0}
.crdts-dash .pos-field>input{flex:1;min-width:0;border:0;background:transparent;outline:none;height:100%;
  font-size:12.5px;color:inherit;font-family:inherit;text-align:start}
.crdts-dash .pos-field>input:focus,.crdts-dash .pos-field>input:focus-visible{outline:none}
.crdts-dash .pos-field>input::placeholder{color:#b4b4a7}

.crdts-dash .pos-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #eaeae1;border-radius:6px;background:#fff;color:#6c6c5e;font-size:11.5px;padding:8px 12px;
  cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.crdts-dash .pos-act:hover:not(:disabled){background:#fff6d4;border-color:#f0dfa8}
.crdts-dash .pos-act:disabled{opacity:.55;cursor:not-allowed}
.crdts-dash .pos-act svg{width:14px;height:14px}

.crdts-dash .pos-scan{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:12px;border:2px dashed #f0d99a;border-radius:9px;background:#fffcf0;color:#b48314;
  font-size:12.5px;padding:13px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.crdts-dash .pos-scan:hover:not(:disabled){background:#fff7d8;border-color:#e0c266}
.crdts-dash .pos-scan:disabled{opacity:.55;cursor:not-allowed}
.crdts-dash .pos-scan svg{width:17px;height:17px}

.crdts-dash .pos-manual{padding:40px 24px;display:grid;gap:16px;justify-items:center;text-align:center}
.crdts-dash .pos-manual-ico{width:54px;height:54px;border-radius:13px;background:#fff0e2;color:var(--orange);
  display:grid;place-items:center}
.crdts-dash .pos-manual-ico svg{width:26px;height:26px}
.crdts-dash .pos-money{position:relative;width:100%;max-width:320px}
.crdts-dash .pos-money>.pf-input{height:62px;font-size:29px;font-weight:700;text-align:center;
  padding-inline-end:46px}
.crdts-dash .pos-money>span{position:absolute;inset-inline-end:13px;top:50%;transform:translateY(-50%);
  font-size:13px;color:#a1a194;pointer-events:none}

.crdts-dash .prd-grid.pos-picks{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crdts-dash .pos-picks .prd-face{aspect-ratio:1;height:auto}
.crdts-dash .pos-tile{text-align:start;padding:0;font-family:inherit;color:inherit;cursor:pointer}
.crdts-dash .pos-tile .prd-meta{border-top:0;margin-top:8px;padding-top:0}
.crdts-dash .pos-tile .prd-name{min-height:0}
.crdts-dash .pos-qty{position:absolute;inset-inline-end:8px;top:8px;min-width:22px;height:22px;padding:0 6px;
  border-radius:20px;background:#171714;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 2px 6px #17171426}

.crdts-dash .pf-pills.pos-scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.crdts-dash .pos-scroll .pf-pill{flex-shrink:0;white-space:nowrap}

.crdts-dash .pos-fab-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:20px;background:#ffe133;color:#171714;font-size:11px;font-weight:700}

.crdts-dash .pos-events{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px;
  border:1px solid #dbe9db;background:#f2f8f2;border-radius:11px;padding:13px 18px}
.crdts-dash .pos-live{position:relative;display:block;width:8px;height:8px;flex-shrink:0}
.crdts-dash .pos-live:before{content:'';position:absolute;inset:0;border-radius:50%;background:#648166;
  opacity:.5;animation:crdtsPosPing 1.6s ease-out infinite}
.crdts-dash .pos-live>i{position:absolute;inset:0;display:block;border-radius:50%;background:#648166}
@keyframes crdtsPosPing{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.4);opacity:0}}
.crdts-dash .pos-events>svg{width:17px;height:17px;color:#648166;flex-shrink:0}
.crdts-dash .pos-events-title{font-size:12.5px;font-weight:700;color:#4e6b4f}
.crdts-dash .pos-events-chip{font-size:11px;background:#fff;border:1px solid #dbe9db;color:#4e6b4f;
  border-radius:20px;padding:5px 10px}
.crdts-dash .pos-events-note{margin-inline-start:auto;font-size:11px;color:#8ca38d}

.crdts-dash .pos-receipt{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.crdts-dash .pos-receipt-top{background:#f2f8f2;border-bottom:1px solid #dbe9db;padding:28px 24px;text-align:center}
.crdts-dash .pos-receipt-ico{width:58px;height:58px;border-radius:50%;background:#fff;border:1px solid #dbe9db;
  color:#648166;display:grid;place-items:center;margin:0 auto 14px}
.crdts-dash .pos-receipt-ico svg{width:28px;height:28px}
.crdts-dash .pos-receipt-top h2{font-size:17px;margin:0}
.crdts-dash .pos-receipt-top p{font-size:12px;color:#8c8c81;margin:6px 0 0}
.crdts-dash .pos-receipt-body{padding:22px}
.crdts-dash .pos-qr{border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;place-items:center}
.crdts-dash .pos-code{display:block;width:fit-content;margin:16px auto 0;background:#f8f8f5;
  border:1px solid var(--line);border-radius:8px;padding:11px 18px;font-size:19px;font-weight:700;
  letter-spacing:.22em;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.crdts-dash .pos-err{font-size:11.5px;color:#c94742;margin:10px 0 0}

@media(max-width:1200px){
.crdts-dash .pos-till{grid-template-columns:minmax(0,1fr)}
.crdts-dash .pos-aside{display:none}
.crdts-dash .pos-mobile{display:block}
.crdts-dash .pos-fab{display:block}
.crdts-dash .prd-grid.pos-picks{grid-template-columns:repeat(4,minmax(0,1fr))}
.crdts-dash .pos-events-note{margin-inline-start:0;width:100%}
}

@media(max-width:680px){
.crdts-dash .prd-grid.pos-picks{grid-template-columns:repeat(3,minmax(0,1fr))}
.crdts-dash .pos-till{gap:16px}
.crdts-dash .pos-manual{padding:26px 16px}
.crdts-dash .pos-receipt-body{padding:16px}
.crdts-dash .pos-code{font-size:15px;letter-spacing:.16em;padding:10px 12px}
.crdts-dash .pos-total{font-size:15px}
.crdts-dash .pos-total>b{font-size:17px}
.crdts-dash .pos-sum{min-width:52px}
.crdts-dash .pos-note{flex-wrap:wrap}
}