/* Modern Tables – extra theme + column borders + mobile tweaks */

/* Desktop theme: simple grid with black borders */
@media (min-width: 769px) {
  body .mtable-container table.mtable,
  body table.mtable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  body .mtable-container table.mtable th,
  body .mtable-container table.mtable td,
  body table.mtable th,
  body table.mtable td {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--mtable-border, #e5e7eb) !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }

  body .mtable-container table.mtable thead th,
  body table.mtable thead th {
    background-color: #f5f5f5 !important;
    font-weight: 600 !important;
  }

  /* Apply same desktop theming to .rtbl card tables as well */
  body .mtable-container table.rtbl.mtable,
  body table.rtbl.mtable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  body .mtable-container table.rtbl.mtable th,
  body .mtable-container table.rtbl.mtable td,
  body table.rtbl.mtable th,
  body table.rtbl.mtable td {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--mtable-border, #e5e7eb) !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }



  body .mtable-container table.mtable tbody tr:nth-child(even),
  body table.mtable tbody tr:nth-child(even) {
    background-color: #fafafa !important;
  }
}

/* Mobile: avoid flash of unstyled table on RTL pages */
@media (max-width: 900px) {
  html[dir="rtl"] body table.mtable:not([data-mt-ready="1"]) {
    visibility: hidden;
    opacity: 0;
  }
  html[dir="rtl"] body table.mtable[data-mt-ready="1"] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
  }

  /* Mobile: first column border should be invisible */
  html body .mtable-container table.mtable tr > th:first-child,
  html body .mtable-container table.mtable tr > td:first-child,
  html body table.mtable tr > th:first-child,
  html body table.mtable tr > td:first-child {
    border-left-color: var(--mtable-border, #e5e7eb) !important;
    border-right-color: var(--mtable-border, #e5e7eb) !important;
    border-color: var(--mtable-border, #e5e7eb) !important;
  }
}

/* Desktop: ensure first & last column borders visible & black */
@media (min-width: 901px) {
  html body .mtable-container table.mtable tr > th:first-child,
  html body .mtable-container table.mtable tr > td:first-child,
  html body table.mtable tr > th:first-child,
  html body table.mtable tr > td:first-child,
  html body .mtable-container table.mtable tr > th:last-child,
  html body .mtable-container table.mtable tr > td:last-child,
  html body table.mtable tr > th:last-child,
  html body table.mtable tr > td:last-child {
    border-color: var(--mtable-border, #e5e7eb) !important;
  }
}

/* Desktop: avoid visible 'jump' while column widths script runs */
@media (min-width: 769px) {
  html body table.mtable:not([data-mt-cols-ready="1"]) {
    visibility: hidden;
    opacity: 0;
  }
  html body table.mtable[data-mt-cols-ready="1"] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.12s ease-in-out;
  }
}

/* Force first-column typography to match other columns on ak-table */
html[dir="rtl"] table.ak-table.mtable tbody tr > td:first-child,
html[dir="rtl"] table.ak-table.mtable tbody tr > td:first-child *,
html[dir="ltr"] table.ak-table.mtable tbody tr > td:first-child,
html[dir="ltr"] table.ak-table.mtable tbody tr > td:first-child * {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Normalise emoji rendering inside Modern Tables */
body table.mtable .mtbl-emoji {
  display: inline-block;
  line-height: 1 !important;
  font-size: 1em !important;
  vertical-align: middle;
}

/* Mobile: ensure first-column text size/weight matches other columns on all Modern Tables */
@media (max-width: 900px) {
  html[dir="rtl"] body table.mtable.mtable.mtable tr > th:first-child,
  html[dir="rtl"] body table.mtable.mtable.mtable tr > td:first-child,
  html[dir="rtl"] body table.mtable.mtable.mtable tr > th:first-child *,
  html[dir="rtl"] body table.mtable.mtable.mtable tr > td:first-child *,
  html[dir="ltr"] body table.mtable.mtable.mtable tr > th:first-child,
  html[dir="ltr"] body table.mtable.mtable.mtable tr > td:first-child,
  html[dir="ltr"] body table.mtable.mtable.mtable tr > th:first-child *,
  html[dir="ltr"] body table.mtable.mtable.mtable tr > td:first-child * {
    font-size: inherit !important;
    font-weight: inherit !important;
  }
}


/* === Patch v2025-11-25: enforce equal column widths ===
   For 5+ column tables, browsers can still expand a column based on long content when table-layout:auto.
   Use fixed layout so colgroup percentage widths (set by JS) are respected.
*/
table.mtable{
  table-layout: fixed !important;
  width: 100% !important;
}
table.mtable th,
table.mtable td{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Allow wrapping for common inline price / order elements */
table.mtable .cer-order-methods-inline,
table.mtable .tpf-price,
table.mtable .mt-price-badge,
table.mtable .price-badge{
  white-space: normal !important;
  max-width: 100%;
}



/* === Patch v2025-11-25-b: single-row -> vertical Feature/Value tables on mobile ===
   Tables that ModernTables JS converts from a single horizontal row into a vertical
   Feature/Value layout are tagged with data-mtbl-ssr-vertical="1".
   For these tables we want a true 2-column table, not the default stacked card layout.
*/
@media (max-width: 900px){
  /* Restore real table semantics */
  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"],
  body table.mtable[data-mtbl-ssr-vertical="1"]{
    display: table !important;
  }

  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] thead,
  body table.mtable[data-mtbl-ssr-vertical="1"] thead{
    display: table-header-group !important;
  }

  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] tbody,
  body table.mtable[data-mtbl-ssr-vertical="1"] tbody{
    display: table-row-group !important;
  }

  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] tr,
  body table.mtable[data-mtbl-ssr-vertical="1"] tr{
    display: table-row !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] th,
  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] td,
  body table.mtable[data-mtbl-ssr-vertical="1"] th,
  body table.mtable[data-mtbl-ssr-vertical="1"] td{
    display: table-cell !important;
    width: auto !important;
  }

  /* Remove mobile 'label' chips inside these feature/value tables */
  body .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] td::before,
  body table.mtable[data-mtbl-ssr-vertical="1"] td::before{
    content: none !important;
  }

  /* Disable mobile card footer stripe for these compact spec tables */
  body.mtable-mobile-card .mtable-container table.mtable[data-mtbl-ssr-vertical="1"] tbody tr::after,
  body.mtable-mobile-card table.mtable[data-mtbl-ssr-vertical="1"] tbody tr::after,
  body table.mtable.mtable-mobile-card[data-mtbl-ssr-vertical="1"] tbody tr::after{
    content: none !important;
  }
}