/* Magic Resales — DVC market table. Scoped under .mrdm so it cannot leak into the theme. */
.mrdm{--mrdm-line:#e3e6ea;--mrdm-muted:#6b7280;--mrdm-ink:#1c2430;--mrdm-accent:#1f5fbf;
  --mrdm-mr:#fffbea;--mrdm-mr2:#fff7d6;--mrdm-card:#fff;
  color:var(--mrdm-ink);font-size:15px;line-height:1.45}
.mrdm *{box-sizing:border-box}

.mrdm-stats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.mrdm-stat{background:#eef3fb;border-radius:8px;padding:9px 14px;min-width:120px}
.mrdm-stat b{display:block;font-size:20px;line-height:1.2}
.mrdm-stat span{font-size:12px;color:var(--mrdm-muted)}
.mrdm-stat--mr{background:var(--mrdm-mr2)}

.mrdm-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:var(--mrdm-card);border:1px solid var(--mrdm-line);border-radius:10px;padding:12px;margin:0 0 14px}
.mrdm-filters label{display:flex;flex-direction:column;font-size:12px;color:var(--mrdm-muted);gap:3px;margin:0}
.mrdm-filters select,.mrdm-filters input{font:inherit;font-size:14px;padding:6px 8px;
  border:1px solid var(--mrdm-line);border-radius:6px;background:#fff;min-width:130px;max-width:190px}

.mrdm-tablewrap{background:var(--mrdm-card);border:1px solid var(--mrdm-line);border-radius:10px;overflow:auto}
.mrdm-table{border-collapse:collapse;width:100%;min-width:1000px;margin:0;font-size:14px;
  table-layout:fixed}
/* deterministic widths: without these the browser squeezes the last two columns
   and text slides under the sticky Listing cell */
.mrdm-table col.c-resort{width:19%}
.mrdm-table col.c-pts{width:48px}
.mrdm-table col.c-uy{width:82px}
.mrdm-table col.c-ppp{width:64px}
.mrdm-table col.c-price{width:86px}
.mrdm-table col.c-avail{width:18%}
.mrdm-table col.c-deed{width:58px}
.mrdm-table col.c-status{width:112px}
.mrdm-table col.c-listing{width:178px}
.mrdm .mrdm-table th,.mrdm .mrdm-table td{padding:7px 8px;border-bottom:1px solid var(--mrdm-line);
  border-left:0;border-right:0;border-top:0;text-align:left;white-space:nowrap;
  background:var(--mrdm-card);border-radius:0;box-shadow:none}
.mrdm-table th{position:sticky;top:0;z-index:3;background:#fafbfc;font-weight:600;font-size:12px;
  color:#374151;cursor:pointer;user-select:none}
/* Blue header row, bold white text. ".mrdm .mrdm-table thead th" sits at (0,2,2),
   needed to beat the shared th/td background rule below at (0,2,1) -- the same
   specificity trap already fixed for .mrdm-resort/.mrdm-pts elsewhere in this file. */
.mrdm .mrdm-table thead th{background:var(--mrdm-accent);color:#fff;font-weight:700}
.mrdm-table th[data-sort].mrdm-sorted::after{content:" \25BE"}
.mrdm-table th[data-sort].mrdm-sorted.mrdm-asc::after{content:" \25B4"}
.mrdm-table td.num,.mrdm-table th.num{text-align:right}
.mrdm .mrdm-table tbody tr.mrdm-row:hover td{background:#fbfcfe}
/* Beats the ".mrdm .mrdm-table td" nowrap rule above on specificity -- this cell
   must actually be allowed to wrap (long names like "The Cabins at Fort
   Wilderness" cannot fit on one line in a narrow mobile column). */
.mrdm .mrdm-table td.mrdm-resort{white-space:normal;overflow-wrap:anywhere}
/* The resort name is the primary link/action now (external listings link out,
   Magic Resales rows toggle the details accordion), whether it renders as an
   <a> or a <button> -- same look either way. */
.mrdm-resort-link{font:inherit;font-weight:600;color:var(--mrdm-accent);background:none;
  border:0;padding:0;margin:0;cursor:pointer;text-align:left;text-decoration:none;
  display:inline}
.mrdm-resort-link:hover{text-decoration:underline}
/* Same specificity fix as .mrdm-resort above -- otherwise the general nowrap
   rule wins and "0 | 240 | 240" overflows into the Deed column once this cell
   is narrower than its content, which it is on the tightened mobile layout. */
.mrdm .mrdm-table td.mrdm-pts{font-variant-numeric:tabular-nums;white-space:normal}
/* Sits inside the now-blue header, so it needs a light color of its own rather
   than the page's usual muted gray, which would be unreadable on --mrdm-accent. */
.mrdm-avail-years{display:block;font-weight:500;color:rgba(255,255,255,.85);font-size:11px;margin-top:2px}

/* keep the broker link visible even when the table has to scroll sideways, and give the
   column enough room that "View at DVC Resale Experts" does not wrap to four lines */
.mrdm-table th.mrdm-last,.mrdm-table td.mrdm-last{position:sticky;right:0;z-index:2;
  box-shadow:-8px 0 8px -8px rgba(0,0,0,.18)}
.mrdm-table th.mrdm-last{z-index:4}
.mrdm .mrdm-row--mr td{background:var(--mrdm-mr)}
.mrdm .mrdm-row--mr:hover td{background:var(--mrdm-mr2)}

.mrdm-tag{display:inline-block;padding:2px 7px;border-radius:999px;background:#7a4d00;color:#fff;
  font-size:11px;font-weight:600;margin-left:6px;vertical-align:middle;white-space:nowrap}
/* Three states only: New (purple), Available (green), Pending Sale (yellow). */
.mrdm-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef0f3;
  font-size:12px;font-weight:600;white-space:nowrap}
.mrdm-chip--new{background:#f1e9fd;color:#6b21a8}
.mrdm-chip--available{background:#e7f5ec;color:#166534}
.mrdm-chip--pending{background:#fdf1cf;color:#7a5200}
/* A pending contract is not buyable, so the whole row reads back a shade. */
.mrdm-row[data-state="pending"] td{color:#6b7280}
.mrdm-row[data-state="pending"] .mrdm-resort,
.mrdm-row[data-state="pending"] td.num strong{font-weight:400}

/* "Show pending sales" is a scope switch, not another filter, so it reads heavier. */
.mrdm .mrdm-filters label.mrdm-toggle{flex-direction:row;align-items:center;gap:7px;
  align-self:flex-end;padding:7px 11px;border:1px solid var(--mrdm-line);border-radius:8px;
  background:#fff;cursor:pointer;font-size:13px;color:#374151;white-space:nowrap}
.mrdm .mrdm-filters label.mrdm-toggle:hover{border-color:#b9c0cb}
.mrdm .mrdm-filters label.mrdm-toggle input{width:16px;height:16px;min-width:0;max-width:none;
  flex:none;margin:0;padding:0;accent-color:#7a4d00;cursor:pointer}
.mrdm .mrdm-filters label.mrdm-toggle b{font-weight:600;color:var(--mrdm-muted)}
.mrdm-view{font-weight:600;white-space:normal;display:inline-block;line-height:1.3;font-size:13px;
  color:var(--mrdm-accent);text-decoration:none}
.mrdm-view:hover{text-decoration:underline}

.mrdm-btn{display:inline-block;padding:6px 12px;border-radius:6px;background:var(--mrdm-accent);
  color:#fff;font-weight:600;font-size:13px;border:1px solid var(--mrdm-accent);cursor:pointer;
  white-space:nowrap;text-decoration:none;line-height:1.4}
.mrdm-btn:hover{filter:brightness(1.08);color:#fff}
.mrdm-btn--ghost{background:#fff;color:var(--mrdm-accent)}
.mrdm-btn--ghost:hover{color:var(--mrdm-accent)}

.mrdm-cardrow td{background:#fffdf3;padding:0 10px 14px;white-space:normal}
.mrdm-card{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;border:1px solid #f0dca0;
  border-radius:10px;padding:14px 16px;background:#fff}
.mrdm-card-desc{flex:2 1 320px;line-height:1.55}
.mrdm-card-facts{flex:1 1 230px;font-size:13px}
.mrdm-card-facts div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  border-bottom:1px dashed var(--mrdm-line)}
.mrdm-card-facts span:first-child{color:var(--mrdm-muted)}
.mrdm-card-cta{flex-basis:100%;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.mrdm-foot,.mrdm-none{color:var(--mrdm-muted);font-size:12px;margin-top:12px}
.mrdm-empty{border:1px solid var(--mrdm-line);border-radius:10px;padding:18px;background:#fff}

/* Hint that the table scrolls sideways, the way DVC Resale Market's own listing
   table flags it on phones. Hidden on wider screens where the table just fits;
   fades once the visitor has actually scrolled (see market.js). */
.mrdm-swipe-hint{display:none}

@media (max-width:640px){
  .mrdm-filters select,.mrdm-filters input{min-width:104px}
  .mrdm-stat{min-width:0;flex:1 1 44%}
  /* Keep the link to "Broker Name ↗" and drop the "View at " lead-in; there is
     no room for it once the table is this narrow, and the broker name alone
     still reads as a link out. */
  .mrdm-view-prefix{display:none}

  .mrdm-swipe-hint{display:flex;align-items:center;gap:4px;font-size:12px;
    color:var(--mrdm-muted);margin:0 0 6px;transition:opacity .25s ease}
  .mrdm-swipe-hint--hidden{opacity:0}

  /* DVC Resale Market's own mobile table does not pin any column while you
     scroll sideways -- the resort name (now itself the link/accordion trigger)
     scrolls with everything else, so the Listing column should not stay
     "locked" to the edge here either. Sticky remains on wider screens, where
     the table rarely needs to scroll and keeping the link in view helps. */
  .mrdm-table th.mrdm-last,.mrdm-table td.mrdm-last{position:static;box-shadow:none}

  /* A narrower, denser table: less to scroll past per swipe. Every column gets
     an explicit width here (rather than mixing in c-resort/c-avail's desktop
     percentages) so the nine of them add up predictably against the new
     min-width instead of a percentage column getting whatever px happens to
     be left over -- which is how "0 | 240 | 240" ended up squeezed into 42px
     and bleeding into the Deed column next to it. */
  /* min-width is the 9 column widths below plus ~16px slack, kept in sync by hand
     whenever a column changes -- see the c-avail/c-uy comment for why this matters. */
  .mrdm-table{min-width:700px;font-size:13px}
  .mrdm .mrdm-table th,.mrdm .mrdm-table td{padding:6px}
  .mrdm-table col.c-resort{width:100px}
  .mrdm-table col.c-pts{width:40px}
  /* Widths for c-uy/c-avail are measured against the SITE'S OWN font
     (-apple-system/system-ui, not a test page's default serif-less fallback,
     which measures noticeably narrower and understated the real column need):
     the widest abbreviated month actually rendered ("May") needs ~32px incl.
     padding, and the widest realistic points-available triple ("888 | 888 |
     888" / "999 | 999 | 999") needs ~116px. Both widths below keep a ~6px
     buffer over that measurement rather than the test page's numbers. */
  .mrdm-table col.c-uy{width:38px}
  .mrdm-table col.c-ppp{width:50px}
  .mrdm-table col.c-price{width:68px}
  .mrdm-table col.c-avail{width:122px}
  .mrdm-table col.c-deed{width:44px}
  .mrdm-table col.c-status{width:92px}
  .mrdm-table col.c-listing{width:130px}
  .mrdm-avail-years{font-size:10px}
}