/*
 * Points Resale Purchase Calculator — styles.
 *
 * Extracted verbatim from the standalone /resale/ page, then scoped: every
 * selector is prefixed with .vpe-calc so the calculator cannot restyle the rest
 * of the site and ClassiPress cannot restyle the calculator.
 *
 * Two transforms worth knowing about:
 *   :root      -> .vpe-calc   (the 42 custom properties now live on the wrapper)
 *   html, body -> .vpe-calc   (page-level type and background become the panel's)
 *
 * No declarations were changed. If you need to edit the calculator's look, edit
 * this file — the original /resale/ page is no longer what the site serves.
 */


.vpe-calc {
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --text:#0f172a;
  --text-muted:#64748b;
  --text-faint:#94a3b8;
  --accent:#0b6b5e;
  --accent-soft:#e6f4f1;
  --accent-ink:#075247;
  --warn:#b45309;
  --warn-soft:#fef3c7;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.18);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* DARK MODE — made opt-in.

   The standalone /resale/ page switched to a dark palette whenever the
   visitor's OS was in dark mode. That was right for a standalone page, but the
   rest of vacationpointexchange.com has no dark mode, so a visitor with dark
   mode enabled would get a dark calculator panel sitting inside a light page —
   which reads as broken rather than as a feature.

   The rule is unchanged, just gated behind an extra class. To turn it back on,
   add vpe-calc--auto-dark to the wrapper div in
   templates/resale-calculator.php. */
@media (prefers-color-scheme: dark){
  .vpe-calc.vpe-calc--auto-dark {
    --bg:#0b1220;
    --surface:#131c2b;
    --surface-2:#0f1826;
    --border:#243247;
    --border-strong:#33455f;
    --text:#e9eef6;
    --text-muted:#98a6bb;
    --text-faint:#6b7c94;
    --accent:#3ec9b0;
    --accent-soft:#11302c;
    --accent-ink:#8ee6d5;
    --warn:#fbbf24;
    --warn-soft:#3a2c08;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

.vpe-calc, .vpe-calc *,
.vpe-calc *::before,
.vpe-calc *::after {box-sizing:border-box}
.vpe-calc {-webkit-text-size-adjust:100%}
.vpe-calc {
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.vpe-calc a {color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.vpe-calc a:hover {border-bottom-color:currentColor}
.vpe-calc h1,
.vpe-calc h2,
.vpe-calc h3 {margin:0;line-height:1.2;letter-spacing:-.015em}
.vpe-calc .wrap {max-width:1180px;margin:0 auto;padding:0 20px}

.vpe-calc .site-header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:28px 0 24px;
}
.vpe-calc .brandbar {
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px;
  justify-content:space-between;
}
.vpe-calc .site-header h1 {font-size:clamp(1.5rem,2.6vw,2rem);font-weight:650}
.vpe-calc .site-header .eyebrow {
  display:inline-block;font-size:.72rem;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.vpe-calc .brandbar a.home {font-size:.9rem;font-weight:550;white-space:nowrap}
.vpe-calc .notices {
  margin:18px 0 0;padding:12px 14px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--radius-sm);
  font-size:.85rem;color:var(--text);
}
.vpe-calc .notices ul {margin:0;padding-left:18px}
.vpe-calc .notices li+li {margin-top:3px}

.vpe-calc main {padding:28px 0 64px}
.vpe-calc .layout {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:24px;
  align-items:start;
}
@media (max-width:980px){
  .vpe-calc .layout {grid-template-columns:1fr}
}

.vpe-calc .card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:20px;
  overflow:hidden;
}
.vpe-calc .card > header {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.vpe-calc .card > header h2 {font-size:.95rem;font-weight:650;letter-spacing:.01em}
.vpe-calc .card > header .hint {font-size:.78rem;color:var(--text-muted);font-weight:450}
.vpe-calc .card .body {padding:16px 18px}

.vpe-calc .field {
  display:grid;
  grid-template-columns:1fr 172px;
  align-items:center;
  gap:12px;
  padding:9px 0;
}
.vpe-calc .field + .field {border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.vpe-calc .field label {font-size:.9rem;color:var(--text);font-weight:500}
.vpe-calc .field .sub {display:block;font-size:.76rem;color:var(--text-muted);font-weight:400;margin-top:1px}
@media (max-width:520px){
  .vpe-calc .field {grid-template-columns:1fr;gap:6px}
  .vpe-calc .field .control {width:100%}
}

.vpe-calc .control {position:relative}
.vpe-calc .control .prefix {
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:.9rem;color:var(--text-faint);pointer-events:none;
}
.vpe-calc input[type=text],
.vpe-calc input[type=number] {
  width:100%;
  padding:9px 11px 9px 24px;
  font-family:var(--mono);
  font-size:.92rem;
  text-align:right;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  transition:border-color .12s, box-shadow .12s;
  -moz-appearance:textfield;
}
.vpe-calc input::-webkit-outer-spin-button,
.vpe-calc input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
.vpe-calc input[type=text].plain,
.vpe-calc input[type=number].plain {padding-left:11px}
.vpe-calc input:focus {
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.vpe-calc input[readonly] {
  background:var(--surface-2);color:var(--text-muted);
  border-style:dashed;cursor:default;
}
.vpe-calc input[readonly]:focus {box-shadow:none;border-color:var(--border-strong)}

.vpe-calc select {
  width:100%;padding:9px 11px;
  font-family:inherit;font-size:.9rem;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  cursor:pointer;
}
.vpe-calc select:focus {
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

.vpe-calc .toggles {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.vpe-calc .toggle {
  display:flex;align-items:flex-start;gap:9px;
  flex:1 1 220px;
  padding:11px 13px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.vpe-calc .toggle:hover {border-color:var(--border-strong)}
.vpe-calc .toggle:has(input:checked) {border-color:var(--accent);background:var(--accent-soft)}
.vpe-calc .toggle input {margin:2px 0 0;width:16px;height:16px;accent-color:var(--accent);flex:none}
.vpe-calc .toggle .t-title {font-size:.88rem;font-weight:550;display:block}
.vpe-calc .toggle .t-sub {font-size:.76rem;color:var(--text-muted);display:block;margin-top:1px}

.vpe-calc .subtotal {
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;
  border-top:2px solid var(--border-strong);
}
.vpe-calc .subtotal .lbl {font-size:.88rem;font-weight:650}
.vpe-calc .subtotal .val {font-family:var(--mono);font-size:1.02rem;font-weight:650;font-variant-numeric:tabular-nums}

.vpe-calc .summary {position:sticky;top:20px}
@media (max-width:980px){.vpe-calc .summary {position:static}}
.vpe-calc .summary .hero {
  padding:20px 18px;
  background:linear-gradient(160deg,var(--accent) 0%,var(--accent-ink) 100%);
  color:#fff;
}
.vpe-calc .summary .hero .k {
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.82;font-weight:600;
}
.vpe-calc .summary .hero .v {
  font-family:var(--mono);font-size:2.15rem;font-weight:650;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;
  line-height:1.1;
}
.vpe-calc .summary .hero .cpp {
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.24);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.85rem;
}
.vpe-calc .summary .hero .cpp b {font-family:var(--mono);font-size:1.05rem;font-weight:650}

.vpe-calc .breakdown {list-style:none;margin:0;padding:0}
.vpe-calc .breakdown li {
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 18px;font-size:.88rem;
}
.vpe-calc .breakdown li:nth-child(odd) {background:var(--surface-2)}
.vpe-calc .breakdown li .n {color:var(--text-muted)}
.vpe-calc .breakdown li .a {font-family:var(--mono);font-variant-numeric:tabular-nums}
.vpe-calc .breakdown li.grand {
  border-top:2px solid var(--border-strong);
  padding-top:11px;padding-bottom:11px;font-weight:650;
}
.vpe-calc .breakdown li.grand .n {color:var(--text)}

.vpe-calc .annual {
  padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2);
}
.vpe-calc .annual .h {
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);font-weight:650;margin-bottom:8px;
}
.vpe-calc .annual .row {display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:3px 0}
.vpe-calc .annual .row .a {font-family:var(--mono);font-variant-numeric:tabular-nums}
.vpe-calc .annual .row.tot {
  margin-top:6px;padding-top:8px;font-weight:650;
  border-top:1px solid var(--border-strong);
}

.vpe-calc .actions {display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--border)}
.vpe-calc .btn {
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;font-size:.86rem;font-weight:600;font-family:inherit;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  cursor:pointer;transition:background .12s,border-color .12s,transform .06s;
  white-space:nowrap;
}
.vpe-calc .btn:hover {background:var(--surface-2);border-color:var(--accent)}
.vpe-calc .btn:active {transform:translateY(1px)}
.vpe-calc .btn.primary {background:var(--accent);border-color:var(--accent);color:#fff}
.vpe-calc .btn.primary:hover {filter:brightness(1.07)}
.vpe-calc .btn svg {width:15px;height:15px;flex:none}

.vpe-calc details.card > summary {
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--surface-2);
  border-bottom:1px solid transparent;
}
.vpe-calc details.card[open] > summary {border-bottom-color:var(--border)}
.vpe-calc details.card > summary::-webkit-details-marker {display:none}
.vpe-calc details.card > summary h2 {font-size:.95rem;font-weight:650}
.vpe-calc details.card > summary .chev {
  color:var(--text-muted);font-size:.78rem;font-weight:550;
}
.vpe-calc details.card[open] > summary .chev::after {content:" \25B4"}
.vpe-calc details.card:not([open]) > summary .chev::after {content:" \25BE"}

.vpe-calc .assump-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 24px;
}
.vpe-calc .stale {
  font-size:.78rem;color:var(--warn);font-weight:600;
  display:inline-block;margin-left:6px;
}
.vpe-calc .tiernote {
  margin:10px 0 0;padding:9px 11px;
  font-size:.76rem;line-height:1.45;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm);
}
.vpe-calc .tiernote:empty {display:none}
.vpe-calc .tiernote strong {color:var(--text)}

.vpe-calc .primary-source {
  margin:0 0 18px;padding:13px 15px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);
}
.vpe-calc .primary-source .ps-label {
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:4px;
}
.vpe-calc .primary-source a {font-weight:600;font-size:.92rem}
.vpe-calc .primary-source p {margin:6px 0 0;font-size:.83rem;color:var(--text-muted)}

.vpe-calc .refs {font-size:.86rem;color:var(--text-muted)}
.vpe-calc .refs ol {margin:0;padding-left:20px}
.vpe-calc .refs li {margin-bottom:10px}
.vpe-calc .refs li:last-child {margin-bottom:0}
.vpe-calc .refs ul {margin:6px 0 0;padding-left:18px}
.vpe-calc .refs strong {color:var(--text)}
.vpe-calc sup {font-size:.68em;color:var(--accent);font-weight:700;margin-left:1px}

.vpe-calc .site-footer {
  padding:22px 0 40px;font-size:.8rem;color:var(--text-faint);text-align:center;
}

.vpe-calc .toast {
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--text);color:var(--bg);
  padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:550;
  opacity:0;pointer-events:none;transition:opacity .18s, transform .18s;
  z-index:50;
}
.vpe-calc .toast.show {opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .vpe-calc {--bg:#fff;--surface:#fff;--surface-2:#fff;--border:#bbb;--border-strong:#888;
        --text:#000;--text-muted:#444;--shadow:none;--accent:#000;--accent-ink:#000}
  .vpe-calc {background:#fff;font-size:11pt}
  .vpe-calc .no-print {display:none !important}
  .vpe-calc .site-header {border-bottom:2px solid #000;padding-bottom:12px}
  .vpe-calc .notices {background:#fff;border:1px solid #999}
  .vpe-calc .layout {grid-template-columns:1fr 1fr;gap:14px}
  .vpe-calc .card {break-inside:avoid;box-shadow:none;margin-bottom:12px}
  .vpe-calc .summary {position:static}
  .vpe-calc .summary .hero {background:#fff !important;color:#000;border-bottom:2px solid #000}
  .vpe-calc .summary .hero .cpp {border-top-color:#999}
  .vpe-calc input {border:none !important;background:none !important;padding:0 !important;
        text-align:right;color:#000 !important}
  .vpe-calc .control .prefix {position:static;transform:none}
  .vpe-calc details.card {break-inside:avoid}
  .vpe-calc details.card:not([open]) .body {display:block}
  .vpe-calc .refs {font-size:9pt}
  .vpe-calc a {color:#000;border:none}
  .vpe-calc a[href^="http"]::after {content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
}