/* 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;
  }
}


/* === Patch v2025-11-30: rotated 5-col comparison tables on mobile (data-mt-rotated="1") ===
   Tables that JS rotates from 2×5 into 5×2 for mobile comparison (e.g. mtbl-ssr-card)
   should behave like واقعی table layout, not stacked cards.
*/
@media (max-width: 900px){
  /* Restore real table semantics */
  body .mtable-container table.mtable[data-mt-rotated="1"],
  body table.mtable[data-mt-rotated="1"]{
    display: table !important;
  }

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

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

  body .mtable-container table.mtable[data-mt-rotated="1"] tr,
  body table.mtable[data-mt-rotated="1"] tr{
    display: table-row !important;
  }

  body .mtable-container table.mtable[data-mt-rotated="1"] th,
  body .mtable-container table.mtable[data-mt-rotated="1"] td,
  body table.mtable[data-mt-rotated="1"] th,
  body table.mtable[data-mt-rotated="1"] td{
    display: table-cell !important;
    width: auto !important;
    white-space: normal !important;
  }

  /* Remove mobile 'label' chips and card footer stripe */
  body .mtable-container table.mtable[data-mt-rotated="1"] td::before,
  body table.mtable[data-mt-rotated="1"] td::before{
    content: none !important;
  }

  body.mtable-mobile-card .mtable-container table.mtable[data-mt-rotated="1"] tbody tr::after,
  body.mtable-mobile-card table.mtable[data-mt-rotated="1"] tbody tr::after,
  body table.mtable.mtable-mobile-card[data-mt-rotated="1"] tbody tr::after{
    content: none !important;
  }
}

/* === Patch v2025-12-06-C: 3×5 comparison layout on mobile
   - 4 columns (label + 3 models) each 25%
   - No horizontal scroll
   - Slightly smaller price font so full range fits in one line
*/
@media (max-width: 900px){
  /* Equal-width columns and fixed layout for rotated comparison tables */
  body .mtable-container table.mtable[data-mt-rotated="1"],
  body table.mtable[data-mt-rotated="1"]{
    table-layout: fixed !important;
    width: 100% !important;
  }

  body .mtable-container table.mtable[data-mt-rotated="1"] th,
  body .mtable-container table.mtable[data-mt-rotated="1"] td,
  body table.mtable[data-mt-rotated="1"] th,
  body table.mtable[data-mt-rotated="1"] td{
    width: 25% !important;
    max-width: 25% !important;
    padding: 8px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  /* Feature/title column (first) – allow wrapping and slightly stronger weight */
  body .mtable-container table.mtable[data-mt-rotated="1"] th:first-child,
  body table.mtable[data-mt-rotated="1"] th:first-child{
    white-space: normal !important;
    font-weight: 600 !important;
  }

  /* Smaller font for price ranges inside rotated tables on mobile */
  body table.mtable[data-mt-rotated="1"] td .mtbl-price-range,
  body table.mtable[data-mt-rotated="1"] td .tpf-price,
  body table.mtable[data-mt-rotated="1"] td .price-badge{
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }
}


/* === Patch v2025-12-06-D: smaller price & phone font ONLY in narrow 3×5 rotated tables === */
@media (max-width: 900px){
  /* Extra-small price text inside rotated comparison tables (fallback for non-toman prices) */
  body table.mtable[data-mt-rotated="1"] td .tpf-price,
  body table.mtable[data-mt-rotated="1"] td .price-badge{
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }

  /* Smaller phone numbers inside rotated tables */
  body table.mtable[data-mt-rotated="1"] td a[href^="tel:"],
  body table.mtable[data-mt-rotated="1"] td .cer-phone,
  body table.mtable[data-mt-rotated="1"] td .cer-phone-inline{
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }
}

/* === Patch v2025-12-06: animate phone call buttons inside Modern Tables on mobile ===
   روی موبایل، دکمه‌های تماس (که توسط Clean Emoji Remover ساخته می‌شوند)
   داخل جدول‌های Modern Tables به صورت چشمک‌زن/تپشی نمایش داده می‌شوند
   تا کاربر راحت‌تر متوجه شود که باید روی آن بزند.
*/
@media (max-width: 768px){
  /* فقط داخل جدول‌ها */
  body table.mtable a.cer-emoji-phone-link.cer-emoji-phone-mobile{
    /* اگر به هر دلیلی جاوااسکریپت استایل اینیمیشن را ست نکرد، اینجا اجباراً فعال می‌کنیم */
    animation: cerPhonePulse 1.4s infinite !important;
    -webkit-animation: cerPhonePulse 1.4s infinite !important;
    transform-origin: center center;
  }

  /* مطمئن شو خود آیکن تلفن هم inline-block باشد تا چرخش/پالس دیده شود */
  body table.mtable a.cer-emoji-phone-link.cer-emoji-phone-mobile .cer-emoji-phone-icon{
    display:inline-block;
  }
}