/* =========================================================
   FALLENS — shared data tables
   Targets stock nopCommerce classes used by theme + plugins:
   .table-wrapper, .data-table, .cart, .forum-table, .no-data, .pager
   ========================================================= */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table,
.cart,
.forum-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fd-text-soft);
}

.data-table th,
.data-table td,
.cart th,
.cart td,
.forum-table th,
.forum-table td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: middle;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--fd-border);
  background: transparent;
  color: var(--fd-text-soft);
  font-size: 13px;
  white-space: normal;
  min-width: 0;
}

.data-table th,
.cart th,
.forum-table th {
  color: var(--fd-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:hover,
.cart tbody tr:hover,
.forum-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.data-table a,
.cart a,
.forum-table a {
  color: var(--fd-text);
  font-weight: 700;
  text-decoration: none;
}

.data-table a:hover,
.data-table a:focus-visible,
.cart a:hover,
.cart a:focus-visible,
.forum-table a:hover,
.forum-table a:focus-visible {
  color: var(--fd-accent-2);
  text-decoration: none;
  outline: none;
}

.data-table .product,
.data-table .message,
.data-table .info,
.data-table .name {
  min-width: 0;
  color: var(--fd-text);
  font-weight: 600;
  text-align: left;
}

.data-table .product a,
.data-table .info a {
  color: var(--fd-text);
  font-weight: 700;
}

.data-table .product a:hover,
.data-table .info a:hover {
  color: var(--fd-accent-2);
  text-decoration: none;
}

.data-table .select-boxes,
.data-table .order {
  text-align: center;
}

.data-table td.unit-price,
.data-table td.total {
  white-space: nowrap;
  color: var(--fd-text);
  font-weight: 700;
}

.data-table em a {
  font-weight: 800;
  color: var(--fd-accent-2);
}

.data-table div.download {
  margin: 8px 0 0;
}

.data-table .attributes {
  margin-top: 6px;
  color: var(--fd-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.data-table .hidden-row {
  height: 1px;
  border: none;
}

.data-table tr.hidden-row th {
  padding: 0;
  border: 0;
  background: transparent;
}

.data-table tr.hidden-row th > span {
  position: absolute;
  top: -10px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Optional semantic helpers usable from any table cell */
.fd-table-delta,
.fd-table-status {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fd-table-delta.is-positive,
.fd-table-status.is-success {
  color: var(--fd-accent-2);
}

.fd-table-delta.is-negative,
.fd-table-status.is-danger {
  color: var(--fd-danger);
}

.fd-table-delta.is-neutral,
.fd-table-status.is-muted {
  color: var(--fd-muted);
}

.fd-table-status.is-warning {
  color: var(--fd-warning);
}

/* Empty / no-data blocks next to tables */
.no-data {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 36px 18px;
  border-radius: 12px;
  border: 1px dashed var(--fd-border);
  background: rgba(255, 255, 255, 0.015);
  color: var(--fd-muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

.no-data > p {
  margin: 0;
}

/* Shared pager (catalog keeps its more-specific overrides) */
.pager {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fd-border);
}

.pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager li {
  margin: 0;
}

.pager li a,
.pager li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--fd-radius-sm);
  border: 1px solid var(--fd-border);
  background: var(--fd-surface);
  color: var(--fd-text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.pager li a:hover,
.pager li a:focus-visible {
  border-color: var(--fd-border-strong);
  color: var(--fd-accent-2);
  outline: none;
}

.pager li.current-page span,
.pager li span.current-page,
.pager li > span:only-child {
  background: var(--fd-accent-soft);
  border-color: var(--fd-border-strong);
  color: var(--fd-accent-2);
}

/*
  Nav buttons: legacy styles.css draws Linearicons ::before AND leaves link text
  (fallens font-size:14px wins over font-size:0) — looks like a double arrow.
  Force icon-only first / previous / next / last.
*/
.pager li.first-page,
.pager li.previous-page,
.pager li.next-page,
.pager li.last-page {
  position: relative;
}

.pager li.first-page a,
.pager li.previous-page a,
.pager li.next-page a,
.pager li.last-page a,
.fd-catalog-products .pager li.first-page a,
.fd-catalog-products .pager li.previous-page a,
.fd-catalog-products .pager li.next-page a,
.fd-catalog-products .pager li.last-page a {
  width: 40px;
  min-width: 40px;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
  text-indent: 0;
}

.pager li.first-page a::before,
.pager li.previous-page a::before,
.pager li.next-page a::before,
.pager li.last-page a::before,
.fd-catalog-products .pager li.first-page a::before,
.fd-catalog-products .pager li.previous-page a::before,
.fd-catalog-products .pager li.next-page a::before,
.fd-catalog-products .pager li.last-page a::before {
  font-family: "Linearicons" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--fd-text-soft) !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none !important;
  letter-spacing: -0.12em;
}

.pager li.previous-page a::before,
.fd-catalog-products .pager li.previous-page a::before {
  content: "\ec3b" !important;
  letter-spacing: 0;
}

.pager li.next-page a::before,
.fd-catalog-products .pager li.next-page a::before {
  content: "\ec3c" !important;
  letter-spacing: 0;
}

.pager li.first-page a::before,
.fd-catalog-products .pager li.first-page a::before {
  content: "\ec3b\ec3b" !important;
}

.pager li.last-page a::before,
.fd-catalog-products .pager li.last-page a::before {
  content: "\ec3c\ec3c" !important;
}

.pager li.first-page a:hover::before,
.pager li.previous-page a:hover::before,
.pager li.next-page a:hover::before,
.pager li.last-page a:hover::before,
.pager li.first-page a:focus-visible::before,
.pager li.previous-page a:focus-visible::before,
.pager li.next-page a:focus-visible::before,
.pager li.last-page a:focus-visible::before {
  color: var(--fd-accent-2) !important;
  background: none !important;
}

/*
  Mobile stacked cards — progressive enhancement.
  Only when cells expose data-title (opt-in per view/plugin).
  Other tables keep horizontal scroll via .table-wrapper.
*/
@media (max-width: 767px) {
  .data-table:has(td[data-title]) thead {
    display: none;
  }

  .data-table:has(td[data-title]) tbody tr {
    display: grid;
    gap: 8px;
    padding: 14px 0;
  }

  .data-table:has(td[data-title]) tbody tr + tr {
    border-top: 1px solid var(--fd-border);
  }

  .data-table:has(td[data-title]) th,
  .data-table:has(td[data-title]) td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    padding: 0;
    text-align: right;
  }

  .data-table:has(td[data-title]) td[data-title]::before {
    content: attr(data-title);
    flex: 0 0 auto;
    max-width: none;
    color: var(--fd-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
  }

  /* Prefer wrapping values in an element; keeps long text from blowing the row */
  .data-table:has(td[data-title]) td > * {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }
}

@media (max-width: 360px) {
  .data-table:has(td[data-title]) tbody tr {
    gap: 8px;
    padding: 12px 0;
  }

  /*
    Long labels like "Points balance" fight for width with values.
    Stack label above value so nothing jumps sideways.
  */
  .data-table:has(td[data-title]) th,
  .data-table:has(td[data-title]) td {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 12px;
    text-align: left;
  }

  .data-table:has(td[data-title]) td[data-title]::before {
    font-size: 9px;
  }

  .data-table:has(td[data-title]) td > * {
    flex: 0 1 auto;
    width: 100%;
    text-align: left;
  }
}