:root{
  --bg: #ffffff;
  --card:#ffffff;
  --accent:#1a73e8; /* blue accent */
  --muted:#6b7280;
  --text:#0b1220; /* dark text for white bg */
  /* --vh will be set by JS to account for mobile browser chrome (100 * --vh == 1vh) */
  --vh: 1vh;
  --hdr-h:calc(var(--vh) * 10);
  --confirm-h:calc(var(--vh) * 8);
  --receipt-h:calc(var(--vh) * 11);
  --pad-h:calc(var(--vh) * 2);
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg);color:var(--text)}

/* Respect iPhone safe area */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-font-smoothing:antialiased}

/* POS layout */
.container{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding:env(safe-area-inset-top,4px) 4px env(safe-area-inset-bottom,4px) 4px;
  height:100vh;
  box-sizing:border-box;
}

.pos .register{flex:1;max-width:980px;min-width:0;width:100%}
.pos .receipt{width:100%;flex-basis:auto}

/* Make the register look like a card for better focus on phones */
.pos .register{
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  padding:4px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(16,24,40,0.06);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Receipt becomes full width below small breakpoint */
@media (max-width:720px){
  .pos .receipt{width:100%;flex-basis:auto}
}

.register-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.amount-display{font-weight:700;color:var(--text)}

.title{font-size:clamp(1.1rem, 3.2vw, 1.7rem);margin:0;font-weight:600}
.subtitle{color:var(--muted);margin:6px 0 0 0;font-size:clamp(0.85rem,2.2vw,0.98rem)}

.tip-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
.tip-btn{background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid rgba(16,24,40,0.06);color:var(--text);padding:14px 18px;text-align:center;font-size:1.4rem;font-weight:700;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,0.06);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.tip-btn:active{transform:translateY(1px)}
.tip-btn[data-percent="0"]{color:#9ca3af}
.tip-btn.selected{background:linear-gradient(180deg,var(--accent),#165fc8);color:#fff;border-color:rgba(9,30,66,0.12);box-shadow:0 10px 30px rgba(26,115,232,0.18);transform:translateY(-1px)}

/* keyboard focus visible for accessibility */
.tip-btn:focus-visible{outline:3px solid rgba(26,115,232,0.18);outline-offset:3px}
.confirm-btn{background:#dc2626;color:#fff;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;box-shadow:0 8px 26px rgba(220,38,38,0.18);width:100%;font-weight:700}
.confirm-btn:hover{filter:brightness(0.97)}
.confirm-btn:active{transform:translateY(1px);box-shadow:0 4px 18px rgba(0,0,0,0.12)}

.actions{display:flex;align-items:center;gap:12px;margin-top:12px}

.register-top{gap:12px}
.register-top > div:first-child{flex:1}
.amount-display{font-size:clamp(1rem,3.6vw,1.4rem);padding:6px 10px}

.receipt-card{background:linear-gradient(180deg,#fff,#fbfdff);border:none;padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.receipt-card .line{display:flex;justify-content:space-between;padding:8px 0}
.receipt-card .total{font-weight:700;border-top:1px dashed #e5e7eb;padding-top:8px;margin-top:8px}



/* small utilities */
.muted{color:var(--muted)}

/* Portrait mode: single column, maximize button size */
@media (max-width:820px) and (orientation: portrait){
  .container{padding:0;height:calc(var(--vh) * 100);overflow:hidden;margin:0}
  .pos .register{padding:0;height:calc(var(--vh) * 100);overflow:hidden;border-radius:0;box-shadow:none;margin:0}
  .register-top{height:calc(var(--vh) * 8);margin:0;padding:0;order:1;display:flex;align-items:center;justify-content:center}
  .register-top h1{font-size:1.8rem;margin:0;line-height:1}
  .tip-grid{grid-template-columns:1fr;gap:0;height:calc(var(--vh) * 80);margin:0;padding:0;order:2}
  .tip-grid .tip-btn{font-size:3rem;font-weight:900;height:100%;margin:0;padding:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;line-height:1}
  .actions{height:calc(var(--vh) * 12);margin:0;padding:0;order:3;display:flex;align-items:center;justify-content:center}
  .confirm-btn{width:100%;margin:0;font-size:1.8rem;height:100%;border-radius:0;font-weight:bold}
}

/* Portrait fallback */
@media (orientation: portrait){
  .container{flex-direction:column;}
  .options{width:100%;}
  .status{width:100%;}
}

/* Landscape small devices (iPhone landscape) */
/* Small landscape: reduce gaps but keep receipt visible */
@media (max-width:900px) and (orientation: landscape){
  .container{gap:10px;padding:10px}
  .pos .receipt{width:260px;flex:0 0 260px}
  .tip-grid{grid-template-columns:repeat(2,1fr)}
  .amount-display{font-size:1rem}
}

/* Response message styles */
.response-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.response-message p {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.4;
  max-width: 90%;
}

.new-tip-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.new-tip-btn:hover {
  background: #0056b3;
}

/* Mobile landscape: 2x2 grid for buttons, no overlapping confirm */
@media (max-width:820px) and (orientation: landscape){
  .container{padding:0;height:calc(var(--vh) * 100);overflow:hidden;margin:0}
  .pos .register{padding:0;height:calc(var(--vh) * 100);overflow:hidden;border-radius:0;box-shadow:none;margin:0}
  .register-top{height:calc(var(--vh) * 12);margin:0;padding:0;order:1;display:flex;align-items:center;justify-content:center}
  .register-top h1{font-size:1.4rem;margin:0;line-height:1}
  .tip-grid{grid-template-columns:repeat(2,1fr);gap:0;height:calc(var(--vh) * 76);margin:0;padding:0;order:2;grid-template-rows:1fr 1fr}
  .tip-grid .tip-btn{font-size:2.5rem;font-weight:900;height:100%;margin:0;padding:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;line-height:1}
  .actions{height:calc(var(--vh) * 12);margin:0;padding:0;order:3;position:static;background:none;z-index:auto;display:flex;align-items:center;justify-content:center}
  .confirm-btn{width:100%;margin:0;font-size:1.4rem;height:100%;border-radius:0;font-weight:bold}
  
  /* Mobile response message adjustments */
  .response-message p {
    font-size: 1.2rem;
  }
}

/* Very narrow screens - keep single column in portrait */
@media (max-width:420px){
  .confirm-btn{width:100%}
}

/* Ensure single column for portrait on all phone sizes */
@media (orientation: portrait) and (max-width:820px){
  .tip-grid{grid-template-columns:1fr !important}
}

/* small visual polish */
.amount-display{font-weight:700;color:var(--text);background:transparent;padding:4px 8px;border-radius:8px}
.status{color:var(--muted)}