/* Grind N Grow Appointments — shared UI utilities */

:root {
  --brand-primary: #0c2a66;
  --brand-accent: #1664ff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-bottom {
  padding-bottom: var(--safe-bottom);
}

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.375rem;
}

.input {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #d7e4ff;
  background: #fff;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: #10264e;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: #1664ff;
  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.15);
}

.field-error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #b91c1c;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.875rem;
  background: #0c2a66;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover {
  background: #0a2254;
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.875rem;
  background: #fff;
  color: #0c2a66;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid #c9dbff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-secondary:hover {
  background: #eef4ff;
  border-color: #1664ff;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  color: #0c2a66;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
}

.btn-ghost:hover {
  background: #eef4ff;
}

.card {
  background: #fff;
  border: 1px solid #e8eef8;
  border-radius: 1rem;
  box-shadow: 0 8px 30px -18px rgba(12, 42, 102, 0.2);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef4ff;
  color: #0c2a66;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: capitalize;
  padding: 0.2rem 0.55rem;
}

.skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}