/* ============================================================================
   Responsive tables for phones. Add class="rtable" to a <table>; give each data
   <td> a data-label="Column". On screens < 576px the header hides and each row
   becomes a compact card with "Label ..... value" lines. Rows tagged .rtot
   (subtotal/total blocks) render as compact right-aligned lines instead of cards.
   Desktop/tablet are completely unaffected.
   ============================================================================ */
/* The theme forces white-space:nowrap on every .table cell (style.css ~20315), which
   makes long course titles run off-screen and over-widen the table. Let titles wrap at
   all widths; the card view below wraps the rest on phones. */
table.rtable td[data-label="Course"],
table.rtable td[data-label="Title"] { white-space: normal; }

@media (max-width: 575.98px) {
  table.rtable { border: 0; width: 100%; }
  table.rtable td { white-space: normal !important; overflow-wrap: break-word; }
  table.rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: auto; }

  table.rtable tr {
    border: 1px solid #d3deea; border-left: 4px solid #066ac9;
    border-radius: 12px; padding: 12px 14px; margin: 0 0 14px;
    background: #fff; box-shadow: 0 3px 12px rgba(16, 42, 67, .12);
  }
  table.rtable td {
    border: 0 !important; padding: 5px 0 !important; text-align: right !important;
    display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 0;
  }
  table.rtable td::before {
    content: attr(data-label); font-weight: 700; color: #5a6472; text-align: left; flex: 0 0 auto;
  }
  table.rtable td:empty { display: none !important; }
  /* the course title should read as a heading, full width, with a divider under it */
  table.rtable td[data-label="Course"], table.rtable td[data-label="Title"] {
    display: block; text-align: left !important; font-weight: 700; font-size: 1.02rem;
    color: #0b2540; margin: -2px 0 7px; padding-bottom: 7px !important;
    border-bottom: 1px solid #eef2f7 !important;
  }
  table.rtable td[data-label="Course"]::before, table.rtable td[data-label="Title"]::before { content: none; }

  /* action cells (no data-label — e.g. dashboard Certificate/Begin/Receipt, cart Remove):
     render as full-width, centered, tappable controls instead of tiny right-aligned bits */
  table.rtable td:not([data-label]) {
    display: block; text-align: center !important; padding: 3px 0 !important;
  }
  table.rtable td:not([data-label])::before { content: none; }
  table.rtable td:not([data-label]) .btn { display: block; width: 100%; margin: 3px 0; }

  /* combined pricing line: "$Price  +$Print  × Qty  = $Total" all on one row */
  table.rtable td.c-price, table.rtable td.c-print,
  table.rtable td.c-qty,   table.rtable td.c-total {
    display: inline; width: auto; padding: 3px 0 !important;
    text-align: left !important; font-size: 1rem; font-variant-numeric: tabular-nums;
  }
  table.rtable td.c-price::before { content: "$"; font-weight: 400; color: #1e293b; }
  table.rtable td.c-print { color: #b45309; font-weight: 600; }
  table.rtable td.c-print::before { content: " + $"; font-weight: 400; }
  table.rtable td.c-print:empty { display: none; }
  table.rtable td.c-qty::before { content: " \00d7 "; font-weight: 400; color: #5a6472; }
  table.rtable td.c-total { font-weight: 700; color: #0b2540; }
  table.rtable td.c-total::before { content: " = $"; font-weight: 400; color: #5a6472; }

  /* Totals panel: the summary rows read as ONE boxed block, clearly set off from the
     course cards above. Compact right-aligned inline lines inside. */
  table.rtable tr.rtot {
    box-shadow: none; margin: 0; text-align: right; font-size: .95rem;
    background: #eef4fb;
    border: 0; border-left: 1px solid #cfe0f3; border-right: 1px solid #cfe0f3;
    border-radius: 0; padding: 5px 14px;
  }
  table.rtable tr.rtot-top {
    margin-top: 20px;                        /* the gap that separates the panel from the cards */
    border-top: 3px solid #066ac9;
    border-radius: 12px 12px 0 0;
    padding-top: 12px;
  }
  table.rtable tr.rtot-bot {
    border-bottom: 1px solid #cfe0f3;
    border-radius: 0 0 12px 12px;
    padding-top: 9px; padding-bottom: 13px;
    font-size: 1.08rem; font-weight: 700; color: #0b2540;
    box-shadow: 0 6px 14px rgba(16, 42, 67, .12);
  }
  table.rtable tr.rtot td { display: inline; width: auto; padding: 0 3px !important; border: 0 !important; text-align: right !important; }
  table.rtable tr.rtot td::before { content: none; }
  table.rtable tr.rtot td:empty { display: none; }
  table.rtable tr.rtot select { display: inline-block; width: auto; }
  table.rtable tr.rtot-bot .btn { font-size: .8rem; font-weight: 600; vertical-align: middle; }
}