/**
 * B2C MT — Typography อ่านง่าย ทันสมัย (PC + Mobile)
 * ขนาดกลางๆ ไม่ใหญ่เกิน — เหมาะผู้สูงวัย
 */
:root {
  --mt-font: 'Sarabun', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mt-fs-body: 0.9375rem;   /* 15px */
  --mt-fs-sm: 0.8125rem;     /* 13px */
  --mt-fs-xs: 0.75rem;       /* 12px */
  --mt-fs-md: 1rem;          /* 16px */
  --mt-fs-lg: 1.125rem;      /* 18px */
  --mt-lh: 1.55;
  --mt-lh-tight: 1.4;
  --mt-text: #1e293b;
  --mt-muted: #64748b;
  --mt-subtle: #94a3b8;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--mt-font) !important;
  font-size: var(--mt-fs-body);
  line-height: var(--mt-lh);
  color: var(--mt-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* ── หัวข้อ / Header ── */
.hdr h2,
.ch-hdr h2,
.ah-hdr h2,
.py-hdr h2 {
  font-size: 1.0625rem !important; /* 17px */
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hdr-sub,
.ch-hdr-sub,
.ah-sub,
.mob-greet {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh);
}

.mob-name {
  font-size: 1.1875rem !important; /* 19px */
  letter-spacing: 0.01em;
}

.mob-sub,
.mob-route-hint {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh);
}

/* ── ไทล์เมนู (Checker / Admin) ── */
.ch-tile-t,
.ah-tile-t {
  font-size: 0.875rem !important; /* 14px */
  line-height: var(--mt-lh-tight);
  font-weight: 600;
}

.ch-tile-d,
.ah-tile-d {
  font-size: var(--mt-fs-xs) !important;
  line-height: 1.5 !important;
  color: var(--mt-muted) !important;
}

/* ── Mobile cards & actions ── */
.mob-card-title {
  font-size: var(--mt-fs-sm) !important;
  letter-spacing: 0.03em;
}

.mob-action-t {
  font-size: var(--mt-fs-body) !important;
  line-height: var(--mt-lh-tight);
}

.mob-action-d {
  font-size: var(--mt-fs-sm) !important;
  line-height: 1.45 !important;
  color: var(--mt-muted) !important;
}

.mob-status-row {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh);
}

.mob-list-empty {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh);
}

.mob-profile-row {
  font-size: var(--mt-fs-body) !important;
}

/* ── Mobile tab bar ── */
.mob-tab-lbl {
  font-size: 0.6875rem !important; /* 11px */
  line-height: 1.2;
  font-weight: 600;
}

.mob-tab-fab-lbl {
  font-size: 0.625rem !important; /* 10px */
  line-height: 1.25;
  font-weight: 600;
}

/* ── Route cards ── */
.mob-route-store {
  font-size: var(--mt-fs-body) !important;
  line-height: var(--mt-lh-tight);
}

.mob-route-acct {
  font-size: var(--mt-fs-xs) !important;
}

.mob-route-d-lbl {
  font-size: 0.6875rem !important;
}

.mob-route-d-val {
  font-size: 0.625rem !important;
  line-height: 1.25;
}

@media (min-width: 960px) {
  .mob-route-d-lbl {
    font-size: var(--mt-fs-xs) !important;
  }

  .mob-route-d-val {
    font-size: 0.6875rem !important;
  }

  .mob-tab-lbl {
    font-size: 0.71875rem !important; /* 11.5px */
  }
}

/* ── PC Panel ── */
.pc-panel-block-title {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh-tight);
}

.pc-panel-block-desc,
.pc-panel-block-body {
  font-size: var(--mt-fs-xs) !important;
  line-height: var(--mt-lh);
}

#pc-user-name {
  font-size: var(--mt-fs-md) !important;
}

#pc-user-sub {
  font-size: var(--mt-fs-xs) !important;
}

/* ── ฟอร์ม / ปุ่ม ── */
.field label {
  font-size: var(--mt-fs-sm) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.field input,
.field select,
.ah-inp,
input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {
  font-size: var(--mt-fs-md) !important;
  line-height: 1.4;
}

.btn-primary,
.btn-red {
  font-size: var(--mt-fs-md) !important;
  line-height: 1.35;
}

.btn-outline {
  font-size: var(--mt-fs-body) !important;
  line-height: 1.35;
}

.instruction-banner {
  font-size: var(--mt-fs-sm) !important;
  line-height: 1.5 !important;
}

/* ── OSA flow ── */
.step {
  font-size: var(--mt-fs-xs) !important;
}

.acc-name {
  font-size: 0.875rem !important;
}

.acc-count,
.store-meta,
.cat-meta {
  font-size: var(--mt-fs-sm) !important;
}

.sku-name {
  font-size: var(--mt-fs-sm) !important;
  line-height: 1.45 !important;
}

.sku-bc,
.store-badge,
.store-region {
  font-size: var(--mt-fs-xs) !important;
}

.cat-progress-label {
  font-size: var(--mt-fs-sm) !important;
}

/* ── Checker OSA sidebar ── */
.ch-profile-name {
  font-size: var(--mt-fs-body) !important;
}

.ch-profile-region {
  font-size: var(--mt-fs-sm) !important;
}

.ch-osa-title {
  font-size: var(--mt-fs-sm) !important;
}

.ch-osa-account {
  font-size: var(--mt-fs-sm) !important;
}

.ch-osa-branch {
  font-size: var(--mt-fs-xs) !important;
}

.ch-osa-label {
  font-size: var(--mt-fs-xs) !important;
}

.ch-osa-empty {
  font-size: var(--mt-fs-sm) !important;
  line-height: var(--mt-lh);
}

/* ── Admin tables / banners ── */
.ah-banner {
  font-size: var(--mt-fs-sm) !important;
  line-height: 1.5 !important;
}

.ah-table,
.ah-table th,
.ah-table td {
  font-size: var(--mt-fs-sm) !important;
}

/* ── Login ── */
.login-hero p {
  font-size: var(--mt-fs-sm) !important;
}

.login-hero h1 {
  letter-spacing: 0.02em;
}

/* ── Dark mode contrast ── */
html.dark body {
  color: #e2e8f0;
}

html.dark .ch-tile-d,
html.dark .ah-tile-d,
html.dark .mob-action-d {
  color: #94a3b8 !important;
}