/* Shared micro-styles beyond Tailwind */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.focused-input:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.otp-input:focus {
  border-color: #004ac6;
  box-shadow: 0 0 0 2px rgba(0, 74, 198, 0.1);
  outline: none;
}

.order-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.success-card {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.checkmark-animate {
  animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: scale(0);
}

@keyframes scaleIn {
  to { transform: scale(1); }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3c6d7; border-radius: 10px; }

.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: #0b1c30;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 100;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

@media (min-width: 768px) {
  .toast { bottom: 32px; }
}