/* BookSpot.at — app.css */

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

/* Smooth scrollbar */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Drag handle */
.drag-handle { cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }

/* Queue item animate in */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.queue-item { animation: slideIn .18s ease; }

/* Pulsing "called" state */
@keyframes calledPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.called-pulse { animation: calledPulse 1.8s infinite; }

/* Status page large circle */
@keyframes orbitRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit-ring { animation: orbitRing 3s linear infinite; }

/* TV display clock */
.tabular { font-variant-numeric: tabular-nums; }

/* Form inputs base (overridden by CSS var in header) */
input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=number], select, textarea {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .625rem .875rem;
  font-size: .875rem;
  width: 100%;
  background: #fff;
  color: #111827;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand,#2563eb) 20%, transparent);
}

/* Numpad buttons on kiosk */
.numpad-key {
  display: flex; align-items: center; justify-content: center;
  height: 64px; border-radius: 16px; font-size: 1.5rem; font-weight: 600;
  background: #fff; border: 1.5px solid #e5e7eb; color: #111827;
  cursor: pointer; user-select: none;
  transition: transform .1s, background .1s;
}
.numpad-key:active { transform: scale(.92); background: #f3f4f6; }
.numpad-key.delete { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.numpad-key.confirm { background: var(--brand); border-color: var(--brand); color: #fff; }

/* SaaS pricing card highlight */
.plan-popular {
  background: linear-gradient(135deg, var(--brand) 0%, #1e40af 100%);
  color: #fff;
}
.plan-popular * { color: #fff !important; }
.plan-popular .check { color: #fff !important; }

/* Blog prose */
.prose h2 { font-size:1.375rem; font-weight:700; margin:2rem 0 .75rem; color:#111827; }
.prose h3 { font-size:1.125rem; font-weight:600; margin:1.5rem 0 .5rem; color:#1f2937; }
.prose p  { margin:0 0 1rem; line-height:1.7; }
.prose ul { list-style:disc; padding-left:1.5rem; margin:0 0 1rem; }
.prose li { margin-bottom:.375rem; }
.prose a  { color:var(--brand,#2563eb); text-decoration:underline; }
.prose strong { font-weight:600; color:#111827; }