/**
 * Nick Kids — Feedback & State Components
 * =======================================
 * Modal/Dialog, BottomSheet, Toast, Alert, EmptyState, ErrorState,
 * Skeleton/Loading, Pagination, Tabs, Accordion.
 */

/* =======================================================================
 * MODAL / DIALOG — .nk-modal
 * Built on <dialog> so focus trapping, Esc and inertness come from the
 * platform instead of hand-written JS.
 * Mobile: bottom sheet. Desktop (≥768px): centred card.
 * ===================================================================== */

.nk-modal {
  padding: 0;
  border: none;
  background: transparent;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: 100%;
  margin: 0;
  margin-block-start: auto; /* sheet sits at the bottom on mobile */
  overflow: visible;
}
.nk-modal::backdrop { background-color: var(--nk-surface-overlay); backdrop-filter: blur(2px); }

.nk-modal__panel {
  background-color: var(--nk-surface-raised);
  border-start-start-radius: var(--nk-radius-xl);
  border-start-end-radius: var(--nk-radius-xl);
  padding: var(--nk-space-5) var(--nk-space-5);
  padding-block-end: calc(var(--nk-space-5) + var(--nk-safe-bottom));
  max-block-size: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grab handle — signals the sheet is dismissible. */
.nk-modal__handle {
  inline-size: 40px;
  block-size: 4px;
  border-radius: var(--nk-radius-pill);
  background-color: var(--nk-navy-200);
  margin: 0 auto var(--nk-space-4);
}

.nk-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nk-space-4);
  margin-block-end: var(--nk-space-4);
}
.nk-modal__title {
  font-family: var(--nk-font-display);
  font-size: var(--nk-text-xl);
  font-weight: var(--nk-weight-bold);
  color: var(--nk-text-strong);
}
.nk-modal__foot {
  margin-block-start: var(--nk-space-6);
  display: flex;
  gap: var(--nk-space-3);
}
.nk-modal__foot .nk-btn { flex: 1; }

.nk-modal[open] { animation: nk-sheet-in var(--nk-duration-normal) var(--nk-ease-out); }

@media (min-width: 768px) {
  .nk-modal {
    margin: auto;
    max-inline-size: 520px;
  }
  .nk-modal__panel {
    border-radius: var(--nk-radius-xl);
    padding: var(--nk-space-8);
    max-block-size: 80vh;
  }
  .nk-modal__handle { display: none; }
  .nk-modal__foot { justify-content: flex-end; }
  .nk-modal__foot .nk-btn { flex: none; }
  .nk-modal[open] { animation: nk-fade-in var(--nk-duration-fast) var(--nk-ease-out); }
}

@keyframes nk-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =======================================================================
 * TOAST — .nk-toast
 * ===================================================================== */

.nk-toast-region {
  position: fixed;
  inset-block-end: calc(var(--nk-space-4) + var(--nk-safe-bottom));
  inset-inline: var(--nk-gutter);
  z-index: var(--nk-z-toast);
  display: grid;
  gap: var(--nk-space-2);
  pointer-events: none;
}
.nk-toast {
  display: flex;
  align-items: center;
  gap: var(--nk-space-3);
  padding: var(--nk-space-4);
  background-color: var(--nk-navy-800);
  color: var(--nk-text-inverse);
  border-radius: var(--nk-radius-md);
  box-shadow: var(--nk-shadow-lg);
  font-size: var(--nk-text-base);
  pointer-events: auto;
  animation: nk-sheet-in var(--nk-duration-normal) var(--nk-ease-out);
}
.nk-toast--success .nk-icon { color: var(--nk-green-500); }
.nk-toast--error .nk-icon { color: var(--nk-coral-400); }

@media (min-width: 768px) {
  .nk-toast-region { inset-inline-start: auto; inline-size: 360px; }
}

/* =======================================================================
 * ALERT — .nk-alert  (inline, in-flow messaging)
 * ===================================================================== */

.nk-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--nk-space-3);
  padding: var(--nk-space-4);
  border-radius: var(--nk-radius-md);
  font-size: var(--nk-text-base);
  border: var(--nk-border-width) solid transparent;
}
.nk-alert__icon { flex: none; margin-block-start: 2px; }
.nk-alert--info    { background-color: var(--nk-status-info-bg); color: var(--nk-text-default); }
.nk-alert--success { background-color: var(--nk-status-success-bg); color: var(--nk-status-success-text); }
.nk-alert--warning { background-color: var(--nk-status-warning-bg); color: var(--nk-status-warning-text); }
.nk-alert--danger  { background-color: var(--nk-status-danger-bg); color: var(--nk-status-danger-text); }

/* =======================================================================
 * EMPTY STATE — .nk-empty
 * Always: icon, what happened, and a way forward.
 * ===================================================================== */

.nk-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--nk-space-3);
  padding-block: var(--nk-space-12);
  padding-inline: var(--nk-gutter);
  max-inline-size: 42ch;
  margin-inline: auto;
}
.nk-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--nk-radius-circle);
  background-color: var(--nk-surface-accent);
  color: var(--nk-action-primary);
  margin-block-end: var(--nk-space-2);
}
.nk-empty__icon .nk-icon { inline-size: var(--nk-icon-xl); block-size: var(--nk-icon-xl); }
.nk-empty__title {
  font-family: var(--nk-font-display);
  font-size: var(--nk-text-xl);
  font-weight: var(--nk-weight-bold);
  color: var(--nk-text-strong);
}
.nk-empty__text { color: var(--nk-text-muted); }
.nk-empty__actions { margin-block-start: var(--nk-space-3); display: flex; gap: var(--nk-space-3); flex-wrap: wrap; justify-content: center; }

/* Error state reuses .nk-empty with a red icon well. */
.nk-empty--error .nk-empty__icon { background-color: var(--nk-status-danger-bg); color: var(--nk-status-danger); }

/* =======================================================================
 * SKELETON / LOADING — .nk-skeleton
 * Skeletons must match the real component's box so nothing shifts (CLS).
 * ===================================================================== */

.nk-skeleton {
  background-color: var(--nk-navy-100);
  border-radius: var(--nk-radius-sm);
  position: relative;
  overflow: hidden;
}
.nk-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
  animation: nk-shimmer 1.4s infinite;
}
@keyframes nk-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .nk-skeleton::after { animation: none; }
}

.nk-skeleton--text { block-size: 1em; margin-block: 0.25em; }
.nk-skeleton--title { block-size: 1.4em; inline-size: 60%; }
.nk-skeleton--media { aspect-ratio: var(--nk-ratio-product); border-radius: var(--nk-radius-lg); }

/* Inline spinner */
.nk-spinner {
  inline-size: var(--nk-icon-lg);
  block-size: var(--nk-icon-lg);
  border: 2px solid var(--nk-navy-200);
  border-block-start-color: var(--nk-action-primary);
  border-radius: var(--nk-radius-circle);
  animation: nk-spin 700ms linear infinite;
}

/* =======================================================================
 * PAGINATION — .nk-pagination
 * "Previous/Next" arrows mirror in RTL via .nk-icon--directional.
 * ===================================================================== */

.nk-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nk-space-1);
  flex-wrap: wrap;
  padding-block: var(--nk-space-8);
}
.nk-pagination__item {
  min-inline-size: var(--nk-touch-target);
  min-block-size: var(--nk-touch-target);
  display: grid;
  place-items: center;
  padding-inline: var(--nk-space-2);
  border-radius: var(--nk-radius-md);
  font-family: var(--nk-font-numeric);
  font-size: var(--nk-text-base);
  font-weight: var(--nk-weight-medium);
  color: var(--nk-text-default);
  text-decoration: none;
  transition: background-color var(--nk-transition-base);
}
.nk-pagination__item:hover { background-color: var(--nk-navy-50); }
.nk-pagination__item[aria-current="page"] {
  background-color: var(--nk-navy-800);
  color: var(--nk-text-inverse);
}

/* =======================================================================
 * TABS — .nk-tabs
 * Mobile: scrollable strip. Used for description / specs / reviews.
 * ===================================================================== */

.nk-tabs__list {
  display: flex;
  gap: var(--nk-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-block-end: var(--nk-border-hairline);
  margin-block-end: var(--nk-space-5);
}
.nk-tabs__list::-webkit-scrollbar { display: none; }
.nk-tabs__tab {
  flex: none;
  min-block-size: var(--nk-touch-target);
  padding-inline: var(--nk-space-4);
  font-size: var(--nk-text-md);
  font-weight: var(--nk-weight-medium);
  color: var(--nk-text-muted);
  border-block-end: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--nk-transition-base), border-color var(--nk-transition-base);
}
.nk-tabs__tab[aria-selected="true"] {
  color: var(--nk-text-strong);
  font-weight: var(--nk-weight-semibold);
  border-block-end-color: var(--nk-action-primary);
}

/* =======================================================================
 * ACCORDION — .nk-accordion
 * Native <details>. Mobile filter groups and footer columns use this.
 * ===================================================================== */

.nk-accordion { border-block-end: var(--nk-border-hairline); }
.nk-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-3);
  min-block-size: var(--nk-touch-target-lg);
  padding-block: var(--nk-space-3);
  font-size: var(--nk-text-md);
  font-weight: var(--nk-weight-semibold);
  color: var(--nk-text-strong);
  cursor: pointer;
  list-style: none;
}
.nk-accordion__summary::-webkit-details-marker { display: none; }
.nk-accordion__summary .nk-icon { transition: transform var(--nk-transition-base); color: var(--nk-text-muted); }
.nk-accordion[open] > .nk-accordion__summary .nk-icon { transform: rotate(180deg); }
.nk-accordion__body { padding-block-end: var(--nk-space-4); color: var(--nk-text-default); }