/**
 * GateNoc Theme 2 — public component library (.gn2-*)
 * Loaded after tokens.css + public.css on Theme 2 public layouts only.
 */

/* —— Buttons —— */
.gn2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  /* Default size — size modifiers optional; bare .gn2-button must still look complete */
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: var(--gn-radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background var(--gn-duration-hover) var(--gn-ease),
    border-color var(--gn-duration-hover) var(--gn-ease),
    color var(--gn-duration-hover) var(--gn-ease),
    box-shadow var(--gn-duration-hover) var(--gn-ease),
    transform var(--gn-duration-hover) var(--gn-ease);
}
.gn2-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--gn-focus-ring);
}
.gn2-button--small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.gn2-button--default { min-height: 44px; padding: 0 18px; font-size: 14px; }
.gn2-button--large { min-height: 48px; padding: 0 22px; font-size: 15px; }
.gn2-button--block { width: 100%; white-space: normal; }
.gn2-button svg { width: 16px; height: 16px; flex-shrink: 0; }

.gn2-button--primary {
  background: var(--gn-primary);
  color: #fff;
  border-color: var(--gn-primary);
}
.gn2-button--primary:hover:not(:disabled) {
  background: var(--gn-primary-hover);
  border-color: var(--gn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--gn-shadow-sm);
}
.gn2-button--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.gn2-button--primary:disabled {
  background: var(--gn-primary-300);
  border-color: var(--gn-primary-300);
  cursor: not-allowed;
  opacity: 0.75;
}

.gn2-button--secondary {
  background: var(--gn-surface);
  color: var(--gn-text);
  border-color: var(--gn-border-strong);
}
.gn2-button--secondary:hover:not(:disabled) {
  background: var(--gn-surface-alt);
  border-color: var(--gn-slate-400);
}

.gn2-button--ghost {
  background: transparent;
  color: var(--gn-text-secondary);
  border-color: transparent;
}
.gn2-button--ghost:hover:not(:disabled) {
  background: var(--gn-slate-100);
  color: var(--gn-text);
}

.gn2-button--danger {
  background: var(--gn-danger);
  color: #fff;
  border-color: var(--gn-danger);
}
.gn2-button--danger:hover:not(:disabled) {
  filter: brightness(0.95);
}

.gn2-button--link {
  background: transparent;
  border-color: transparent;
  color: var(--gn-primary);
  min-height: auto;
  padding: 0;
  font-weight: 600;
  box-shadow: none;
}
.gn2-button--link:hover:not(:disabled) {
  color: var(--gn-primary-hover);
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

.gn2-button__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gn2-spin 0.7s linear infinite;
}
@keyframes gn2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gn2-button__spinner { animation: none; opacity: 0.7; }
  .gn2-button--primary:hover:not(:disabled) { transform: none; }
}

.gn2-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 639px) {
  .gn2-button-group:not(.gn2-button-group--inline) {
    flex-direction: column;
  }
  .gn2-button-group:not(.gn2-button-group--inline) .gn2-button {
    width: 100%;
  }
}

/* —— Fields —— */
.gn2-field { display: flex; flex-direction: column; gap: 6px; }
.gn2-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gn-text);
  margin-bottom: 0;
}
.gn2-label__req { color: var(--gn-danger); margin-left: 2px; }
.gn2-label__opt {
  font-weight: 500;
  color: var(--gn-text-muted);
  margin-left: 4px;
}
.gn2-help {
  font-size: 13px;
  line-height: 20px;
  color: var(--gn-text-muted);
}
.gn2-error {
  font-size: 13px;
  line-height: 20px;
  color: var(--gn-danger);
}

.gn2-input,
.gn2-select,
.gn2-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  color: var(--gn-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--gn-duration-hover) var(--gn-ease), box-shadow var(--gn-duration-hover) var(--gn-ease);
}
.gn2-textarea { min-height: 140px; resize: vertical; }
.gn2-input:hover:not(:disabled),
.gn2-select:hover:not(:disabled),
.gn2-textarea:hover:not(:disabled) {
  border-color: var(--gn-border-strong);
}
.gn2-input:focus,
.gn2-select:focus,
.gn2-textarea:focus {
  border-color: var(--gn-primary);
  box-shadow: 0 0 0 4px var(--gn-focus-ring);
  outline: none;
}
.gn2-input--error,
.gn2-input.gn2-input--error {
  border-color: var(--gn-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}
.gn2-input:disabled,
.gn2-select:disabled,
.gn2-textarea:disabled {
  background: var(--gn-slate-100);
  color: var(--gn-text-muted);
  cursor: not-allowed;
}

.gn2-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .gn2-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Password */
.gn2-password__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gn2-password__control { position: relative; }
.gn2-password__input { padding-right: 72px; }
.gn2-password__toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--gn-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--gn-radius-sm);
}
.gn2-password__toggle:hover { color: var(--gn-text); background: var(--gn-slate-100); }
.gn2-password__caps {
  font-size: 12px;
  color: var(--gn-warning);
  margin: 0;
}
.gn2-password__meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.gn2-password__meter span {
  height: 4px;
  border-radius: 999px;
  background: var(--gn-slate-200);
}
.gn2-password__meter[data-strength="1"] span:nth-child(1) { background: var(--gn-danger); }
.gn2-password__meter[data-strength="2"] span:nth-child(-n+2) { background: var(--gn-warning); }
.gn2-password__meter[data-strength="3"] span:nth-child(-n+3) { background: #65a30d; }
.gn2-password__meter[data-strength="4"] span { background: var(--gn-primary); }

/* Checkbox */
.gn2-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.gn2-checkbox__input {
  width: 18px;
  height: 18px;
  margin-top: 13px;
  accent-color: var(--gn-primary);
  flex-shrink: 0;
}
.gn2-checkbox__label {
  font-size: 14px;
  color: var(--gn-text-secondary);
  padding-top: 12px;
}

/* File */
.gn2-file__input { font-size: 14px; }
.gn2-file__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--gn-text-secondary);
}

/* —— Cards —— */
.gn2-card {
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius-md);
  box-shadow: var(--gn-shadow-sm);
}
.gn2-card--padded { padding: 24px; }
.gn2-card--auth {
  padding: 32px;
  max-width: 440px;
  margin-inline: auto;
  width: 100%;
}
.gn2-card--auth.gn2-card--register { max-width: 520px; }
@media (max-width: 479px) {
  .gn2-card--auth {
    padding: 20px;
    box-shadow: none;
    border-color: transparent;
  }
}
.gn2-card--feature { padding: 24px; transition: border-color var(--gn-duration-hover) var(--gn-ease), box-shadow var(--gn-duration-hover) var(--gn-ease); }
.gn2-card--feature:hover {
  border-color: var(--gn-primary-200);
  box-shadow: var(--gn-shadow-md);
}
.gn2-card--pricing { min-height: 520px; display: flex; flex-direction: column; }
.gn2-card--pricing.is-recommended {
  border-color: var(--gn-primary);
  box-shadow: 0 0 0 1px var(--gn-primary), var(--gn-shadow-md);
}

/* —— Badge —— */
.gn2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--gn-slate-100);
  color: var(--gn-text-secondary);
}
.gn2-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.gn2-badge--success { background: var(--gn-primary-50); color: var(--gn-primary-700); }
.gn2-badge--warning { background: #FFFBEB; color: #B45309; }
.gn2-badge--error { background: #FEF2F2; color: #B91C1C; }
.gn2-badge--info { background: #EFF6FF; color: #1D4ED8; }
.gn2-badge--neutral { background: var(--gn-slate-100); color: var(--gn-text-secondary); }

.gn2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--gn-radius-pill);
  background: var(--gn-slate-50);
  border: 1px solid var(--gn-border);
  font-size: 13px;
  color: var(--gn-text-secondary);
}

/* —— Alerts —— */
.gn2-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--gn-radius-sm);
  border: 1px solid var(--gn-border);
  background: var(--gn-slate-50);
}
.gn2-alert--page { padding: 16px; border-radius: var(--gn-radius-md); }
.gn2-alert__title { font-weight: 600; font-size: 14px; margin: 0 0 2px; }
.gn2-alert__content { font-size: 13px; line-height: 1.45; color: var(--gn-text-secondary); }
.gn2-alert--success { background: var(--gn-primary-50); border-color: var(--gn-primary-200); }
.gn2-alert--info { background: #EFF6FF; border-color: #BFDBFE; }
.gn2-alert--warning { background: #FFFBEB; border-color: #FDE68A; }
.gn2-alert--error { background: #FEF2F2; border-color: #FECACA; }
.gn2-alert--neutral { background: var(--gn-slate-50); border-color: var(--gn-border); }
.gn2-alert__dismiss {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--gn-text-muted);
}

/* —— Toast —— */
.gn2-toast-region {
  position: fixed;
  z-index: 80;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.gn2-toast {
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-slate-900);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--gn-shadow-md);
}
.gn2-toast--error { background: #7F1D1D; }

/* —— Accordion —— */
.gn2-accordion { border-top: 1px solid var(--gn-border); }
.gn2-accordion__item { border-bottom: 1px solid var(--gn-border); }
.gn2-accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--gn-text);
  cursor: pointer;
}
.gn2-accordion__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--gn-duration-state) var(--gn-ease);
}
.gn2-accordion__btn[aria-expanded="true"] .gn2-accordion__icon { transform: rotate(180deg); }
.gn2-accordion__panel {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gn-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .gn2-accordion__icon { transition: none; }
}

/* —— Docs primitives —— */
.gn2-endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--gn-slate-50);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.gn2-endpoint__path { color: var(--gn-text); }
.gn2-method {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gn2-method--get { background: #EFF6FF; color: #1D4ED8; }
.gn2-method--post { background: var(--gn-primary-50); color: var(--gn-primary-700); }
.gn2-method--put { background: #FFFBEB; color: #B45309; }
.gn2-method--delete { background: #FEF2F2; color: #B91C1C; }

.gn2-code {
  background: var(--gn-code-background, #0f172a);
  border-radius: var(--gn-radius-md);
  overflow: hidden;
  color: #E2E8F0;
}
.gn2-code__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.gn2-code__tab {
  border: 0;
  background: transparent;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.gn2-code__tab.is-active,
.gn2-code__tab:hover { color: #fff; background: rgba(148, 163, 184, 0.15); }
.gn2-code__spacer { flex: 1; }
.gn2-code__pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.gn2-code[data-gn2-wrap] .gn2-code__pre { white-space: pre-wrap; word-break: break-word; }
.gn2-code__pre.hidden { display: none; }

/* —— States —— */
.gn2-error-state,
.gn2-empty-state {
  text-align: center;
  padding: 32px 16px;
}
.gn2-error-state__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--gn-danger);
}
.gn2-error-state__title,
.gn2-empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gn-text);
  margin: 0 0 8px;
}
.gn2-error-state__message,
.gn2-empty-state__message {
  font-size: 14px;
  color: var(--gn-text-secondary);
  margin: 0 auto;
  max-width: 36ch;
}
.gn2-error-state__actions,
.gn2-empty-state .gn2-empty__actions,
.gn2-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.gn2-empty__actions .gn2-button,
.gn2-empty-state .gn2-button {
  min-width: 0;
}

.gn2-skeleton-group { display: grid; gap: 10px; }
.gn2-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--gn-slate-100), var(--gn-slate-200), var(--gn-slate-100));
  background-size: 200% 100%;
  animation: gn2-shimmer 1.2s ease-in-out infinite;
}
@keyframes gn2-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gn2-skeleton { animation: none; }
}

.gn2-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--gn-text-secondary);
  border-radius: var(--gn-radius-sm);
  cursor: pointer;
}
.gn2-icon-button:hover { background: var(--gn-slate-100); color: var(--gn-text); }
.gn2-icon-button svg { width: 20px; height: 20px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.gn2-nav-lock,
html.gn2-nav-lock body {
  overflow: hidden;
}

/* —— Floating Telegram / WhatsApp chat buttons ——
   Self-contained (Theme2 merchant has no Tailwind CDN; arbitrary utilities were dead). */
.gn-float-chat {
  position: fixed;
  z-index: 90;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}
.gn-float-chat--right {
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  align-items: flex-end;
}
.gn-float-chat--left {
  left: max(1.25rem, env(safe-area-inset-left, 0px));
  align-items: flex-start;
}
.gn-float-chat__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.92);
  transition: transform 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gn-float-chat__btn:hover,
.gn-float-chat__btn:focus-visible {
  filter: brightness(1.08);
  transform: scale(1.05);
  outline: none;
}
.gn-float-chat__btn:focus-visible {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22), 0 0 0 3px rgba(34, 158, 217, 0.35);
}
.gn-float-chat__btn--telegram {
  background: #229ED9;
}
.gn-float-chat__btn--whatsapp {
  background: #25D366;
}
.gn-float-chat__btn--whatsapp:focus-visible {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22), 0 0 0 3px rgba(37, 211, 102, 0.35);
}
.gn-float-chat__icon {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
  flex-shrink: 0;
}
.gn-float-chat__icon path {
  fill: #fff !important;
}
@media (max-width: 1023px) {
  .gn-float-chat--above-mobile-nav {
    bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
  }
}