/* =========================================================
   H MARKET Design System — Premium V2.8
   Unified brand for Customer / Seller / Admin
   ========================================================= */

:root {
  /* ——— Brand (single source of truth) ——— */
  --hm-navy: #0b2e6f;
  --hm-navy-2: #15448d;
  --hm-navy-deep: #0b1220;
  --hm-navy-sidebar: #0f1b33;
  --hm-orange: #ff8a00;
  --hm-orange-2: #ffb12a;
  --hm-accent: #0b2e6f;
  --hm-accent-soft: #15448d;
  --hm-accent-muted: #e8eef8;

  /* ——— Surfaces ——— */
  --hm-bg: #f6f7fa;
  --hm-bg-alt: #eef1f6;
  --hm-card: #ffffff;
  --hm-text: #15233a;
  --hm-text-strong: #0f172a;
  --hm-muted: #6f7c91;
  --hm-muted-2: #64748b;
  --hm-line: #e6e9ef;
  --hm-line-soft: #e2e8f0;

  /* ——— Semantic ——— */
  --hm-success: #16894f;
  --hm-success-soft: #ecfdf5;
  --hm-danger: #d83a3a;
  --hm-danger-soft: #fef2f2;
  --hm-warning: #b7791f;
  --hm-warning-soft: #fffbeb;
  --hm-info: #15448d;
  --hm-info-soft: #eef3fb;

  /* ——— Radius (one scale) ——— */
  --hm-radius-xs: 8px;
  --hm-radius-sm: 10px;
  --hm-radius-md: 14px;
  --hm-radius-lg: 16px;
  --hm-radius-xl: 18px;
  --hm-radius-2xl: 22px;
  --hm-radius-full: 999px;

  /* ——— Spacing ——— */
  --hm-space-1: 4px;
  --hm-space-2: 8px;
  --hm-space-3: 12px;
  --hm-space-4: 16px;
  --hm-space-5: 20px;
  --hm-space-6: 24px;
  --hm-space-8: 32px;
  --hm-space-10: 40px;
  --hm-space-12: 48px;

  /* ——— Component sizes ——— */
  --hm-btn-h: 44px;
  --hm-btn-h-sm: 36px;
  --hm-btn-h-lg: 48px;
  --hm-input-h: 44px;
  --hm-icon-btn: 42px;
  --hm-touch: 44px;

  /* ——— Shadows ——— */
  --hm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --hm-shadow-sm: 0 4px 12px rgba(18, 38, 72, 0.06);
  --hm-shadow-md: 0 10px 28px rgba(18, 38, 72, 0.08);
  --hm-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);
  --hm-shadow-card: 0 8px 24px rgba(18, 38, 72, 0.06), 0 1px 2px rgba(18, 38, 72, 0.03);
  --hm-shadow-lift: 0 12px 32px rgba(11, 46, 111, 0.12);

  /* ——— Typography ——— */
  --hm-font-sans: "Noto Sans Myanmar", "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hm-font-display: "Plus Jakarta Sans", "Noto Sans Myanmar", "Inter", system-ui, sans-serif;
  --hm-text-xs: 0.6875rem;   /* 11 */
  --hm-text-sm: 0.75rem;     /* 12 */
  --hm-text-base: 0.875rem;  /* 14 */
  --hm-text-md: 1rem;        /* 16 */
  --hm-text-lg: 1.125rem;    /* 18 */
  --hm-text-xl: 1.25rem;     /* 20 */
  --hm-text-2xl: 1.5rem;     /* 24 */
  --hm-text-3xl: 1.75rem;    /* 28 */
  --hm-leading-tight: 1.25;
  --hm-leading-snug: 1.4;
  --hm-leading-normal: 1.55;
  --hm-leading-relaxed: 1.7;
  --hm-tracking-tight: -0.01em;
  --hm-tracking-wide: 0.03em;
  --hm-weight-body: 500;
  --hm-weight-medium: 600;
  --hm-weight-heading: 800;

  /* ——— Motion ——— */
  --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hm-duration-fast: 150ms;
  --hm-duration: 220ms;
  --hm-duration-slow: 320ms;

  /* ——— Legacy aliases (keep old pages working) ——— */
  --navy: var(--hm-navy);
  --navy-2: var(--hm-navy-2);
  --orange: var(--hm-orange);
  --orange-2: var(--hm-orange-2);
  --bg: var(--hm-bg);
  --card: var(--hm-card);
  --text: var(--hm-text);
  --muted: var(--hm-muted);
  --line: var(--hm-line);
  --success: var(--hm-success);
  --danger: var(--hm-danger);
  --shadow: var(--hm-shadow-md);
  --radius: var(--hm-radius-xl);
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--hm-font-sans);
  font-size: var(--hm-text-base);
  font-weight: var(--hm-weight-body);
  line-height: var(--hm-leading-normal);
  color: var(--hm-text);
  background: var(--hm-bg);
}

h1, h2, h3, h4, .hm-h1, .hm-h2, .hm-h3 {
  font-family: var(--hm-font-display);
  font-weight: var(--hm-weight-heading);
  line-height: var(--hm-leading-tight);
  letter-spacing: var(--hm-tracking-tight);
  /* color inherited — so hero/profile on blue stay white */
}
h1, .hm-h1 { font-size: var(--hm-text-2xl); }
h2, .hm-h2 { font-size: var(--hm-text-xl); }
h3, .hm-h3 { font-size: var(--hm-text-lg); }
p, .hm-body { font-weight: var(--hm-weight-body); line-height: var(--hm-leading-normal); }
small, .hm-caption { font-size: var(--hm-text-xs); color: var(--hm-muted); line-height: var(--hm-leading-snug); }

button, input, select, textarea {
  font: inherit;
  font-family: inherit;
}
button {
  cursor: pointer;
  border: 0;
  transition:
    background-color var(--hm-duration) var(--hm-ease),
    color var(--hm-duration) var(--hm-ease),
    border-color var(--hm-duration) var(--hm-ease),
    box-shadow var(--hm-duration) var(--hm-ease),
    transform var(--hm-duration-fast) var(--hm-ease);
}
button:active:not(:disabled) { transform: scale(0.98); }

/* ——— Shared component primitives ——— */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hm-space-2);
  min-height: var(--hm-btn-h);
  padding: 0 var(--hm-space-4);
  border-radius: var(--hm-radius-sm);
  font-weight: var(--hm-weight-medium);
  font-size: var(--hm-text-base);
}
.hm-btn-primary {
  background: var(--hm-navy);
  color: #fff;
  box-shadow: var(--hm-shadow-sm);
}
.hm-btn-primary:hover { background: var(--hm-navy-2); }
.hm-btn-accent {
  background: var(--hm-orange);
  color: #fff;
}
.hm-btn-accent:hover { background: var(--hm-orange-2); color: var(--hm-navy-deep); }

.hm-input {
  min-height: var(--hm-input-h);
  padding: 0 var(--hm-space-3);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-sm);
  background: var(--hm-card);
  transition: border-color var(--hm-duration) var(--hm-ease), box-shadow var(--hm-duration) var(--hm-ease);
}
.hm-input:focus {
  outline: none;
  border-color: #c5d4ef;
  box-shadow: 0 0 0 3px rgba(11, 46, 111, 0.12);
}

.hm-card {
  background: var(--hm-card);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-lg);
  box-shadow: var(--hm-shadow-card);
  transition:
    box-shadow var(--hm-duration) var(--hm-ease),
    border-color var(--hm-duration) var(--hm-ease),
    transform var(--hm-duration) var(--hm-ease);
}
.hm-card:hover { box-shadow: var(--hm-shadow-md); }

.hm-pressable:active { transform: scale(0.97); }

:focus-visible {
  outline: 2px solid var(--hm-navy);
  outline-offset: 2px;
}

/* ——— Skeleton loading ——— */
.hm-skeleton {
  position: relative;
  overflow: hidden;
  background: #e8ecf3;
  border-radius: var(--hm-radius-md);
}
.hm-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: hm-shimmer 1.25s infinite;
}
@keyframes hm-shimmer {
  100% { transform: translateX(100%); }
}
.hm-skeleton-text { height: 12px; border-radius: 6px; margin: 6px 0; }
.hm-skeleton-title { height: 16px; width: 55%; border-radius: 6px; }
.hm-skeleton-thumb { width: 100%; aspect-ratio: 16/10; border-radius: var(--hm-radius-md); }
.hm-skeleton-avatar { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.hm-skeleton-card {
  background: var(--hm-card);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-lg);
  padding: var(--hm-space-3);
  overflow: hidden;
}
.hm-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hm-space-3);
}
@media (min-width: 720px) {
  .hm-skeleton-grid { grid-template-columns: repeat(4, 1fr); gap: var(--hm-space-4); }
}

/* ——— Empty state ——— */
.hm-empty {
  padding: var(--hm-space-10) var(--hm-space-5);
  text-align: center;
  color: var(--hm-muted);
  background: var(--hm-card);
  border: 1px dashed var(--hm-line);
  border-radius: var(--hm-radius-xl);
}
.hm-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--hm-space-4);
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(145deg, #eef3fb, #e2eaf6);
  color: var(--hm-navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.hm-empty strong {
  display: block;
  color: var(--hm-text-strong);
  font-size: var(--hm-text-md);
  font-weight: var(--hm-weight-heading);
  margin-bottom: var(--hm-space-2);
}
.hm-empty p {
  margin: 0 auto;
  max-width: 280px;
  font-size: var(--hm-text-sm);
  line-height: var(--hm-leading-relaxed);
  color: var(--hm-muted);
}

/* ——— Page enter motion (subtle) ——— */
.hm-fade-in {
  animation: hm-fade-in var(--hm-duration-slow) var(--hm-ease-out) both;
}
@keyframes hm-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ——— Utilities ——— */
.hm-p-3 { padding: var(--hm-space-3); }
.hm-p-4 { padding: var(--hm-space-4); }
.hm-p-5 { padding: var(--hm-space-5); }
.hm-gap-2 { gap: var(--hm-space-2); }
.hm-gap-3 { gap: var(--hm-space-3); }
.hm-gap-4 { gap: var(--hm-space-4); }

/* ========== Premium V2.9 additions ========== */

/* Toast */
.hm-toast,
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  max-width: min(92vw, 360px);
  padding: 12px 16px;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--hm-ease), transform 0.22s var(--hm-ease);
  z-index: 100050;
  text-align: center;
}
.hm-toast.show,
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hm-toast.is-success,
.toast.is-success { background: #0f766e; }
.hm-toast.is-error,
.toast.is-error { background: #b91c1c; }
.hm-toast.is-info,
.toast.is-info { background: var(--hm-navy); }

/* Forms */
.hm-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  transition: border-color 0.2s var(--hm-ease), box-shadow 0.2s var(--hm-ease);
}
input:focus,
textarea:focus,
select:focus,
.hm-input:focus {
  outline: none;
  border-color: #c5d4ef !important;
  box-shadow: 0 0 0 3px rgba(11, 46, 111, 0.14);
}
input.is-error,
textarea.is-error,
select.is-error,
.hm-input.is-error {
  border-color: #f1a8a8 !important;
  box-shadow: 0 0 0 3px rgba(216, 58, 58, 0.15);
}
.hm-field-error {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--hm-danger);
  font-weight: 600;
}

/* Image blur-up */
.hm-img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eef8, #dfe7f4);
}
.hm-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.35s var(--hm-ease);
}
.hm-img-wrap img.is-loaded {
  opacity: 1;
}

/* Tables (Seller / Admin) */
.hm-table-wrap,
.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hm-line-soft, #e2e8f0);
  border-radius: var(--hm-radius-lg);
  background: #fff;
}
.hm-table,
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hm-table thead th,
.tbl thead th,
.tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  text-align: left;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.hm-table tbody td,
.tbl td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.hm-table tbody tr:hover,
.tbl tbody tr:hover {
  background: #f8fafc;
}
.hm-table tbody tr:last-child td,
.tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* Dark mode — keep profile card branded */
html[data-theme="dark"] .nd-profile-card {
  background: linear-gradient(135deg, #0b2e6f 0%, #1a5bb8 55%, #15448d 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] .nd-profile-card,
html[data-theme="dark"] .nd-profile-card * {
  color: #fff !important;
}
html[data-theme="dark"] .nd-profile-card .nd-name,
html[data-theme="dark"] .nd-profile-card h2 {
  color: #fff !important;
}

/* Icon size helper for inline SVG */
.hm-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon .hm-icon,
.bottom-nav .hm-icon {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 2px;
}