.dine-pos-page { --dine-green:#1f6a4b; --dine-dark:#17352a; --dine-mint:#e7f3ea; --dine-border:#dce7df; }
.dine-pos-page .dine-hero { background:radial-gradient(circle at 90% 18%,#d6ecdc 0,transparent 44%),linear-gradient(135deg,#fffdf8 0%,#f5faf5 100%); }
.dine-pos-page .pos-hero-copy { max-width:660px; }
.dine-pos-page .pos-lead { font-size:19px; }
.dine-hero-visual { position:relative; min-height:540px; padding:25px 0; }
.dine-floor-panel,.dine-order-panel { position:absolute; box-sizing:border-box; border:1px solid #ccdbd0; border-radius:22px; background:#fff; box-shadow:0 24px 60px #17352a1c; }
.dine-floor-panel { top:28px; left:0; width:78%; padding:21px; }
.dine-order-panel { z-index:2; right:0; bottom:10px; width:74%; padding:20px; }
.dine-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.dine-panel-heading small,.dine-kot-action small { display:block; color:#708077; font-size:8px; font-weight:750; letter-spacing:.11em; }
.dine-panel-heading strong { display:block; margin-top:4px; color:#18382b; font-size:17px; }
.dine-panel-heading > span { padding:6px 9px; border-radius:30px; background:var(--dine-mint); color:var(--dine-green); font-size:9px; font-weight:750; white-space:nowrap; }
.dine-table-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.dine-table-grid > span { display:flex; min-height:57px; flex-direction:column; justify-content:center; padding:8px; border:1px solid #dce7df; border-radius:12px; color:#18382b; font-size:11px; font-weight:750; }
.dine-table-grid small { margin-top:5px; font-size:8px; font-weight:600; }
.dine-table-grid .available,.dine-preview-table .available { background:#f2f8f2; border-color:#cfe3d2; }
.dine-table-grid .selected { background:#e5f3e8; border-color:#62a87c; box-shadow:inset 0 0 0 1px #62a87c; }
.dine-table-grid .occupied,.dine-preview-table .occupied { background:#fff3e5; border-color:#f0d2a9; }
.dine-table-grid .reserved,.dine-preview-table .reserved { background:#f2efff; border-color:#d5c8f3; }
.dine-table-legend { display:flex; flex-wrap:wrap; gap:13px; margin-top:13px; color:#687a6f; font-size:8px; }
.dine-table-legend span::before { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#79b18a; content:""; }
.dine-table-legend span:nth-child(2)::before { background:#e4a451; }.dine-table-legend span:nth-child(3)::before { background:#9b87d1; }
.dine-order-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #edf1ec; }
.dine-dish-icon { width:38px; height:38px; border-radius:10px; background:radial-gradient(circle at 42% 45%,#e89a53 0 18%,#f4d084 19% 32%,#6c9a55 33% 38%,#eed9ae 39%); }
.dine-dish-icon.dish-two { background:radial-gradient(circle at 55% 40%,#c64030 0 8%,#76a94e 9% 14%,#f4c66e 15% 42%,#c88643 43%); }
.dine-order-item strong,.dine-order-item small { display:block; }.dine-order-item strong { color:#18382b; font-size:10px; }.dine-order-item small { margin-top:4px; color:#718078; font-size:8px; }.dine-order-item > b { color:#40564b; font-size:9px; }
.dine-order-total { display:flex; justify-content:space-between; gap:10px; padding:13px 1px; color:#52665a; font-size:10px; }.dine-order-total strong { color:var(--dine-green); font-size:14px; }
.dine-kot-action { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:12px; background:#f3f7f2; }.dine-kot-action strong { display:block; margin-top:4px; color:#18382b; font-size:10px; }.dine-kot-action > b { padding:9px 11px; border-radius:8px; background:var(--dine-green); color:white; font-size:9px; white-space:nowrap; }
.dine-waiter-chip { position:absolute; z-index:3; top:245px; right:25%; display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:40px; background:var(--dine-dark); color:white; box-shadow:0 10px 28px #17352a30; font-size:9px; }.dine-waiter-chip b { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:#72bd83; }
.dine-motion { position:relative; display:grid; gap:11px; padding:28px; border:1px solid var(--pos-border); border-radius:26px; background:#f7faf5; overflow:hidden; }.dine-motion article { position:relative; z-index:1; display:grid; grid-template-columns:46px 1fr; gap:13px; align-items:center; padding:14px; border:1px solid #dce7df; border-radius:15px; background:#fff; }.dine-stage-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--dine-mint); color:var(--dine-green); font-size:11px; font-weight:800; }.dine-motion small { display:block; color:#6c7d73; font-size:8px; font-weight:750; letter-spacing:.11em; }.dine-motion strong { display:block; margin:3px 0; color:#18382b; font-size:14px; }.dine-motion p { margin:0; font-size:11px; line-height:1.45; }.dine-motion-track { position:absolute; left:48px; top:55px; bottom:55px; width:2px; background:#cfe0d3; }.dine-motion-track span { position:absolute; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--dine-green); box-shadow:0 0 0 5px #dfeee2; }
.dine-challenges h3 { color:#20352a; }.dine-challenges article { min-height:122px; box-sizing:border-box; }
.dine-feature-pair > article:first-child { background:#e6f2e8; }.dine-feature-pair > article:nth-child(2) { background:#f8eee0; }.dine-feature-pair h3 { max-width:500px; }
.dine-table-preview,.dine-takeaway-preview { display:flex; min-height:132px; align-items:center; gap:18px; box-sizing:border-box; margin-top:24px; padding:18px; border-radius:18px; background:#fff; }
.dine-preview-table { display:grid; grid-template-columns:repeat(2,42px); gap:6px; flex-shrink:0; }.dine-preview-table span { display:grid; width:42px; height:36px; place-items:center; border:1px solid #dce7df; border-radius:8px; color:#214233; font-size:9px; font-weight:750; }.dine-preview-table .maintenance { background:#f1f3f1; border-color:#d7ddda; }
.dine-table-preview > div:last-child small,.dine-pickup-card small { display:block; color:#708077; font-size:8px; font-weight:750; letter-spacing:.1em; }.dine-table-preview > div:last-child strong,.dine-pickup-card strong { display:block; margin:5px 0; color:#18382b; font-size:12px; }.dine-table-preview > div:last-child p { margin:0; font-size:9px; line-height:1.5; }
.dine-takeaway-preview { display:block; }.dine-status-line { display:flex; align-items:center; justify-content:space-between; gap:4px; color:#627368; font-size:8px; font-weight:650; }.dine-status-line i { width:11px; height:1px; background:#bbd3c2; }.dine-status-line span:nth-of-type(4) { color:var(--dine-green); }
.dine-pickup-card { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin-top:17px; padding:11px 13px; border:1px solid #e2eae1; border-radius:12px; background:#fbfcf8; }.dine-pickup-card small { grid-column:1/-1; }.dine-pickup-card strong { margin:0; font-size:10px; }.dine-pickup-card > span { color:#63756b; font-size:8px; }.dine-pickup-card > span b { color:var(--dine-green); }
.dine-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }.dine-benefits article { padding:25px; border:1px solid var(--pos-border); border-radius:20px; background:#fff; }.dine-benefits h3 { font-size:17px; }.dine-benefits p { margin:0; font-size:13px; line-height:1.65; }.dine-benefit-icon { display:grid; width:46px; height:46px; place-items:center; margin-bottom:16px; border:1px solid #cfe2d4; border-radius:14px; background:var(--dine-mint); color:var(--dine-green); }.dine-benefit-icon svg { width:25px; height:25px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dine-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }.dine-businesses { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }.dine-businesses article { overflow:hidden; border:1px solid var(--pos-border); border-radius:20px; background:#fff; }.dine-business-photo { height:185px; overflow:hidden; }.dine-business-photo img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.dine-businesses article:hover img { transform:scale(1.035); }.dine-businesses .fine-dining img { object-position:70% 55%; }.dine-businesses .family img { object-position:42% 55%; }.dine-businesses .hotel img { object-position:15% 60%; }.dine-businesses .takeaway img { object-position:92% 55%; }.dine-businesses article > div:last-child { padding:20px; }.dine-businesses h3 { font-size:17px; }.dine-businesses p { margin:0; font-size:13px; line-height:1.6; }
.dine-final-actions { justify-content:center; }.dine-enquiry-layout { margin-top:34px; align-items:stretch; }.dine-enquiry-copy { display:flex; min-width:0; flex-direction:column; align-self:start; padding:28px; border:1px solid #cbdccc; border-radius:24px; background:#f5faf5; }.dine-enquiry-copy h3 { margin-top:14px; font-size:25px; }.dine-enquiry-copy > p { font-size:14px; }.dine-connected-visual { margin-top:24px; padding:18px; border:1px solid #d8e6db; border-radius:18px; background:#fff; }.dine-flow-source { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.dine-flow-source > span { padding:11px; border:1px solid #e1e9e1; border-radius:12px; background:#fbfcf8; }.dine-flow-source small,.dine-flow-source strong { display:block; }.dine-flow-source small,.dine-flow-pos > small { color:#708077; font-size:8px; font-weight:750; letter-spacing:.1em; }.dine-flow-source strong { margin-top:5px; color:#18382b; font-size:9px; }.dine-flow-arrow { padding:6px; color:var(--dine-green); text-align:center; }.dine-flow-pos { padding:13px; border-radius:12px; background:#f2f7f1; text-align:center; }.dine-flow-pos > strong { display:block; margin:5px 0 10px; color:#18382b; font-size:11px; }.dine-flow-pos > div,.dine-flow-end { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }.dine-flow-pos > div span,.dine-flow-end span { padding:6px 8px; border-radius:20px; background:#fff; color:#52665a; font-size:8px; }.dine-flow-end span { background:var(--dine-mint); color:var(--dine-green); font-weight:700; }
@media(prefers-reduced-motion:no-preference) { .dine-motion-track span { animation:dine-order-flow 5.2s ease-in-out infinite; } }
@keyframes dine-order-flow { 0% { top:0; } 75%,100% { top:calc(100% - 10px); } }
@media(max-width:1100px) { .dine-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }.dine-businesses { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:980px) { .dine-hero-visual { width:min(680px,100%); margin-inline:auto; }.dine-steps { grid-template-columns:1fr; }.dine-steps li { text-align:left; }.dine-pos-page .dine-hero { padding-bottom:52px; } }
@media(max-width:640px) { .dine-hero-visual { min-height:510px; padding-top:0; }.dine-floor-panel { top:0; width:86%; padding:15px; }.dine-order-panel { bottom:0; width:82%; padding:14px; }.dine-waiter-chip { top:222px; right:20%; }.dine-motion { padding:18px 14px; }.dine-motion article { grid-template-columns:40px 1fr; padding:12px; }.dine-stage-icon { width:38px; height:38px; }.dine-motion-track { left:34px; }.dine-benefits,.dine-businesses { grid-template-columns:1fr; }.dine-business-photo { height:210px; }.dine-enquiry-copy { padding:22px; }.dine-table-preview { gap:11px; padding:14px; }.dine-status-line { gap:2px; font-size:7px; }.dine-status-line i { width:6px; }.dine-pos-page h1 { font-size:clamp(32px,10vw,44px); } }
@media(max-width:390px) { .dine-hero-visual { min-height:485px; }.dine-floor-panel { width:90%; padding:12px; }.dine-order-panel { width:88%; padding:12px; }.dine-waiter-chip { top:205px; right:13%; }.dine-table-grid { gap:6px; }.dine-table-grid > span { min-height:48px; }.dine-kot-action { padding:9px; }.dine-kot-action > b { padding:8px; font-size:8px; }.dine-takeaway-preview { padding:13px; }.dine-status-line { flex-wrap:wrap; }.dine-flow-source { grid-template-columns:1fr; } }