/*
 * Victrix Product Table — vpt-table.css
 * Light theme: clean white surface, cool-grey structure, electric-blue accents.
 */

/* ─── Google Fonts ───────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=DM+Mono:wght@400;500&display=swap");

/* ─── Custom Properties ──────────────────────────────────────────────────── */
:root {
  --vpt-bg:            #f4f6fb;
  --vpt-bg-surface:    #ffffff;
  --vpt-bg-row-alt:    #f8f9fc;
  --vpt-bg-row-hover:  #eef2fb;
  --vpt-border:        #e2e7f0;
  --vpt-border-head:   #d0d8ea;
  --vpt-accent:        #002c46;
  --vpt-accent-hover:  #002c46;
  --vpt-accent-light:  #f1f1f1;
  --vpt-text:          #1a2540;
  --vpt-text-muted:    #6b7a9a;
  --vpt-text-subtle:   #9aa3bb;
  --vpt-product-code:  #002c46;
  --vpt-font-head:     "Syne", "Segoe UI", sans-serif;
  --vpt-font-body:     "DM Sans", "Segoe UI", sans-serif;
  --vpt-font-mono:     "DM Mono", "Courier New", monospace;
  --vpt-radius:        14px;
  --vpt-radius-btn:    8px;
  --vpt-shadow:        0 2px 16px rgba(30, 50, 100, 0.08),
                       0 1px 4px  rgba(30, 50, 100, 0.06);
  --vpt-transition:    0.18s ease;
}

/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.vpt-wrap {
  font-family: var(--vpt-font-body);
  border-radius: var(--vpt-radius);
  padding: 1rem 0.5rem;
  color: var(--vpt-text);
  overflow: hidden;
}

/* ─── CTA Bar ─────────────────────────────────────────────────────────────── */
.vpt-cta-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.vpt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1.5px solid var(--vpt-accent);
  color: var(--vpt-accent);
  font-family: var(--vpt-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--vpt-transition), color var(--vpt-transition);
}

.vpt-cta-btn:hover,
.vpt-cta-btn:focus-visible {
  background: var(--vpt-accent);
  color: #fff;
  outline: none;
}

/* ─── Table Title ─────────────────────────────────────────────────────────── */
.vpt-title {
  font-family: var(--vpt-font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vpt-text);
  margin: 0 0 1.1rem 0;
  letter-spacing: 0.01em;
}

/* ─── Scrollable wrapper ──────────────────────────────────────────────────── */
.vpt-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--vpt-radius);
  border: 1px solid var(--vpt-border);
  box-shadow: var(--vpt-shadow);
  background: var(--vpt-bg-surface);
}

/* ─── Table ───────────────────────────────────────────────────────────────── */
.vpt-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  background: var(--vpt-bg-surface);
}

/* ─── Head ────────────────────────────────────────────────────────────────── */
.vpt-table thead tr {
  border-bottom: 1.5px solid var(--vpt-border-head);
  background: var(--vpt-bg-surface);
}

.vpt-table thead th {
  font-family: var(--vpt-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vpt-text-muted);
  padding: 0.85rem 1.2rem;
  text-align: left;
  white-space: nowrap;
}

.vpt-col-no      { width: 4%; }
.vpt-col-product { width: 16%; }
.vpt-col-desc    { width: auto; }
.vpt-col-price   { width: 17%; white-space: nowrap; }
.vpt-col-action  { width: 18%; }

/* ─── Rows ────────────────────────────────────────────────────────────────── */
.vpt-row {
  border-bottom: 1px solid var(--vpt-border);
  transition: background var(--vpt-transition);
}

.vpt-row:last-child { border-bottom: none; }
.vpt-row:nth-child(odd)  { background: var(--vpt-bg-surface); }
.vpt-row:nth-child(even) { background: var(--vpt-bg-row-alt); }
.vpt-row:hover           { background: var(--vpt-bg-row-hover); }

/* ─── Cells ───────────────────────────────────────────────────────────────── */
.vpt-cell {
  padding: 0.9rem 1.2rem;
  font-size: 0.875rem;
  color: var(--vpt-text);
  vertical-align: middle;
}

.vpt-cell--no    { color: var(--vpt-text-subtle); font-size: 0.75rem; }
.vpt-cell--desc  { color: #3d4f6e; line-height: 1.5; }
.vpt-cell--price { font-weight: 600; white-space: nowrap; }

/* ─── Product Code ────────────────────────────────────────────────────────── */
.vpt-product-code {
  color: var(--vpt-product-code);
  font-family: var(--vpt-font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--vpt-accent-light);
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  display: inline-block;
}

/* ─── Action Button ───────────────────────────────────────────────────────── */
.vpt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--vpt-accent);
  color: #fff;
  font-family: var(--vpt-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--vpt-radius-btn);
  text-decoration: none;
  white-space: nowrap;
	transition: all 0.3s;
}

.vpt-btn:hover,
.vpt-btn:focus-visible {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(38, 99, 214, 0.3);
  outline: none;
	color: var(--vpt-accent-hover);
}

.vpt-btn:active { transform: translateY(0); }

/* ─── Focus visible ───────────────────────────────────────────────────────── */
.vpt-btn:focus-visible,
.vpt-cta-btn:focus-visible {
  outline: 2px solid var(--vpt-accent);
  outline-offset: 3px;
}

/* ─── Empty State ─────────────────────────────────────────────────────────── */
.vpt-empty {
  color: var(--vpt-text-muted);
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
}

/* ─── Responsive: card stack ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vpt-wrap { padding: 1.25rem 1rem; }

  .vpt-table-wrapper { border: none; box-shadow: none; }

  .vpt-table,
  .vpt-table thead,
  .vpt-table tbody,
  .vpt-table th,
  .vpt-table td,
  .vpt-table tr { display: block; min-width: unset; }

  .vpt-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .vpt-row {
    background: var(--vpt-bg-surface) !important;
    border: 1px solid var(--vpt-border);
    border-radius: var(--vpt-radius);
    margin-bottom: 0.85rem;
    padding: 0.5rem 0;
    box-shadow: var(--vpt-shadow);
  }

  .vpt-row:hover { background: var(--vpt-bg-row-hover) !important; }

  .vpt-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .vpt-cell::before {
    content: attr(data-label);
    flex: 0 0 90px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vpt-text-muted);
    padding-top: 2px;
  }

  .vpt-cell--no { display: none; }

  .vpt-cell--action {
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vpt-border);
    margin-top: 0.25rem;
  }

  .vpt-cell--action::before { display: none; }
}