/* ============================================================
   Nexia PayTech — Components (unified)
   Depends on colors_and_type.css
   ============================================================ */

/* ---------- Buttons ---------- */
.np-btn {
  font-family: var(--np-font-sans);
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: 40px;
  border-radius: var(--r-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--np-fg);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast) var(--t-ease),
              border-color var(--t-fast) var(--t-ease),
              color var(--t-fast) var(--t-ease),
              box-shadow var(--t-normal) var(--t-ease),
              transform var(--t-fast) var(--t-ease);
}
.np-btn:focus-visible { outline: none; box-shadow: var(--np-focus-ring); }
.np-btn:disabled, .np-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.np-btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-13); border-radius: var(--r-3); }
.np-btn-lg { height: 48px; padding: 0 var(--sp-5); font-size: var(--fs-16); }
.np-btn-xl { height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-16); border-radius: var(--r-5); }

/* Primary — brand blue */
.np-btn-primary {
  background: var(--np-primary);
  color: #fff;
  border-color: var(--np-primary);
  box-shadow: var(--sh-primary);
}
.np-btn-primary:hover:not(:disabled) {
  background: var(--np-primary-hov);
  border-color: var(--np-primary-hov);
  transform: translateY(-1px);
}
.np-btn-primary:active { transform: translateY(0); }

/* Action — green, PAY/CONFIRM/BOOK only */
.np-btn-action {
  background: var(--np-action);
  color: #fff;
  border-color: var(--np-action);
  box-shadow: var(--sh-action);
}
.np-btn-action:hover:not(:disabled) {
  background: var(--np-action-hov);
  border-color: var(--np-action-hov);
  transform: translateY(-1px);
}

/* Aurora — gradient, marketing/hero CTAs */
.np-btn-aurora {
  background: var(--np-grad-aurora);
  color: #fff;
  border: 0;
  box-shadow: var(--sh-primary);
  position: relative;
  overflow: hidden;
}
.np-btn-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
  opacity: 0;
  transition: opacity var(--t-normal) var(--t-ease);
}
.np-btn-aurora:hover:not(:disabled)::after { opacity: 1; }
.np-btn-aurora:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,110,238,0.30), 0 16px 40px rgba(31,110,238,0.20); }

/* Secondary — white with border */
.np-btn-secondary {
  background: #fff;
  color: var(--np-fg);
  border-color: var(--np-stone-200);
  box-shadow: var(--sh-1);
}
.np-btn-secondary:hover:not(:disabled) {
  background: var(--np-stone-50);
  border-color: var(--np-stone-300);
}

/* Ghost — minimal */
.np-btn-ghost {
  background: transparent;
  color: var(--np-fg-2);
}
.np-btn-ghost:hover:not(:disabled) {
  background: var(--np-stone-100);
  color: var(--np-fg);
}

/* On dark backgrounds */
.np-btn-on-dark {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
}
.np-btn-on-dark:hover:not(:disabled) {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.32);
}

.np-btn-destructive {
  background: var(--np-error); color: #fff; border-color: var(--np-error);
}
.np-btn-destructive:hover:not(:disabled) { background: #B0212E; border-color: #B0212E; }

/* Kiosk — XXL touch target */
.np-btn-kiosk {
  height: 96px;
  font-size: 32px;
  padding: 0 40px;
  border-radius: 16px;
  font-weight: 600;
  background: var(--np-action);
  color: #fff;
  border: 0;
  gap: 16px;
  /* No hover — touch only */
  transition: transform var(--t-fast), background var(--t-fast);
}
.np-btn-kiosk:active { transform: scale(0.985); background: var(--np-action-hov); }
.np-btn-kiosk:disabled { background: var(--np-stone-300); color: var(--np-stone-500); }

/* ---------- Inputs ---------- */
.np-input, .np-select, .np-textarea {
  font-family: inherit;
  font-size: var(--fs-14);
  color: var(--np-fg);
  background: #fff;
  border: 1px solid var(--np-stone-200);
  border-radius: var(--r-3);
  padding: 0 var(--sp-3);
  height: 40px;
  width: 100%;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.np-input:focus, .np-select:focus, .np-textarea:focus {
  border-color: var(--np-primary);
  box-shadow: var(--np-focus-ring);
}
.np-input::placeholder { color: var(--np-fg-3); }
.np-input[aria-invalid="true"] { border-color: var(--np-error); }
.np-textarea { height: auto; padding: var(--sp-3); resize: vertical; min-height: 96px; }

.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-field-label { font-size: var(--fs-13); font-weight: 500; color: var(--np-fg-2); }
.np-field-hint  { font-size: var(--fs-12); color: var(--np-fg-3); }
.np-field-error { font-size: var(--fs-12); color: var(--np-error); }

/* ---------- Cards ---------- */
.np-card {
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  border-radius: var(--r-5);
  overflow: hidden;
  transition: border-color var(--t-normal) var(--t-ease),
              box-shadow var(--t-normal) var(--t-ease),
              transform var(--t-normal) var(--t-ease);
}
.np-card-elev { box-shadow: var(--sh-2); }
.np-card-lift { box-shadow: var(--sh-3); }
.np-card-link { cursor: pointer; }
.np-card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-4);
  border-color: rgba(31,110,238,0.20);
}

/* ---------- Badges / Pills ---------- */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--r-2);
  background: var(--np-stone-100);
  color: var(--np-fg-2);
  line-height: 16px;
  white-space: nowrap;
}
.np-badge-primary { background: var(--np-blue-50); color: var(--np-blue-700); }
.np-badge-success { background: var(--np-success-50); color: #006428; }
.np-badge-warning { background: var(--np-warning-50); color: #8A6A00; }
.np-badge-error   { background: var(--np-error-50);   color: #B0212E; }
.np-badge-sunset  { background: var(--np-sunset-50);  color: var(--np-sunset-700); }
.np-badge-wine    { background: var(--np-wine-50);    color: var(--np-wine-700); }
.np-badge-jade    { background: var(--np-jade-50);    color: var(--np-jade-700); }
.np-badge-mist    { background: var(--np-mist-50);    color: var(--np-mist-600); }

.np-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-13);
  font-weight: 500;
  background: var(--np-stone-100);
  color: var(--np-fg-2);
}
.np-pill-glass {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  color: #fff;
}

/* Live dot — animated pulse */
.np-live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--np-fg-3); }
.np-live-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--np-success);
  box-shadow: 0 0 0 0 rgba(40,167,69,0.5);
  animation: np-pulse 1.8s ease-out infinite;
}
@keyframes np-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(40,167,69,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(40,167,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* ---------- Stat / KPI tile ---------- */
.np-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-5);
  background: var(--np-bg);
  border: 1px solid var(--np-line);
  border-radius: var(--r-5);
}
.np-stat-label { font-size: var(--fs-12); color: var(--np-fg-3); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 600; }
.np-stat-value { font-family: var(--np-font-display); font-size: 32px; font-weight: 700; color: var(--np-fg); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.01em; }
.np-stat-delta { font-size: var(--fs-12); display: inline-flex; align-items: center; gap: 4px; }
.np-stat-delta-up   { color: var(--np-action-700); }
.np-stat-delta-down { color: #B0212E; }