/*
Theme Name:   VPE Refresh
Theme URI:    https://vacationpointexchange.com
Description:  Visual refresh child theme for Vacation Point Exchange. Adds verified-seller
              badges driven by WordPress user data, a re-styled listing card with price as the
              primary element, responsive layout fixes matched to ClassiPress's own
              breakpoints, and a seller notice that defers to Popup Maker until that plugin
              is disabled. Deactivating this theme restores ClassiPress exactly as it was.
Author:       Vacation Point Exchange
Template:     classipress
Version:      1.23.0
Text Domain:  vpe-refresh
*/

/* =============================================================================
   HOW THIS FILE IS ORGANISED

   §1  Design tokens
   §2  Components this theme owns outright (badges, modal, trust bar, seller table)
   §3  Overrides against ClassiPress 3.6.1 selectors
   §4  Responsive fixes
   §5  Popup Maker restyle (only while that plugin is active) (only relevant while that plugin is active)

   SPECIFICITY (v1.3): ClassiPress prints a 27-selector colour <style> block
   inline in <head>, which lands AFTER every enqueued stylesheet. No enqueue
   order can beat it. Every rule in §3 and §4 is therefore scoped with
   .wp-child-theme-vpe-refresh (the class WordPress adds to <body> for a child
   theme) to win on specificity instead. Do not remove that prefix.

   LOAD ORDER (v1.2): ClassiPress enqueues
   its base stylesheet with get_stylesheet_uri(), which under a child theme
   resolves to THIS file — so v1.1 replaced ClassiPress's stylesheet instead of
   extending it, and all base layout was lost. functions.php now keeps the
   'at-main' handle on the parent sheet and loads this one last, after
   styles/aqua.css. Do not remove that filter or the dependency array.

   BREAKPOINTS: 960 / 800 / 600 / 400 px, read from ClassiPress's own style.css.
   v1.0 guessed 1023 / 767 and left an 800-960px dead zone where ClassiPress
   stacked the nav into an unstyled list and none of these fixes applied. That
   was the visible breakage in Live Preview. Do not change these without
   checking the parent's media queries first.

   §2 is fully under our control and will render correctly as written.
   §3 targets ClassiPress markup confirmed on the live site on 2026-08-25:
      .header_top / .header_main / .header_menu / .searchblock / .content_left /
      .content_right / .post-block-out / .post-right-no-img / .tags.price-wrap /
      p.post-price / p.post-meta / p.post-desc / p.stats / .shadowblock / .footer
      If a future ClassiPress update changes these class names, only §3 breaks —
      and only cosmetically. Nothing in §3 can take the site down.
   ============================================================================= */


/* =============================================================================
   §1  DESIGN TOKENS
   ============================================================================= */
:root {
  --vpe-ink:        #0E1F23;
  --vpe-ink-2:      #33484D;
  --vpe-muted:      #6B8085;
  --vpe-line:       #E3E7E5;

  --vpe-teal-900:   #0B3A3E;
  --vpe-teal-800:   #0F4A4E;
  --vpe-teal-700:   #14595E;
  --vpe-teal-600:   #1B7071;
  --vpe-teal-050:   #EAF3F2;

  --vpe-gold:       #9C6B12;
  --vpe-gold-bg:    #FDF3DF;
  --vpe-gold-line:  #EBD5A3;

  --vpe-danger:     #A3231C;
  --vpe-danger-bg:  #FCF1F0;

  --vpe-canvas:     #F7F6F1;
  --vpe-surface:    #FFFFFF;

  --vpe-radius:     12px;
  --vpe-radius-sm:  9px;
  --vpe-shadow:     0 1px 2px rgba(14,31,35,.04);
  --vpe-shadow-h:   0 6px 18px rgba(14,31,35,.09);

  --vpe-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
  --vpe-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --vpe-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =============================================================================
   §2  COMPONENTS OWNED BY THIS THEME
   ============================================================================= */

/* ---- 2.1 Verified seller badge ------------------------------------------- */
/* Two distinct chips, deliberately styled differently:
   .vpe-badge  = verification status. Gold. This is the trust signal.
   .vpe-tier   = Marriott ownership level. Neutral grey. NOT a trust ranking.
   Keeping these visually separate stops buyers reading "Chairman's Club" as
   "more trustworthy than Select", which it is not.                            */

.vpe-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
  margin-left: 2px;
}

.vpe-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 99px;
  border: 1px solid var(--vpe-gold-line);
  background: var(--vpe-gold-bg);
  color: var(--vpe-gold);
  font-family: var(--vpe-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none !important;
}
.vpe-badge svg { width: 10px; height: 10px; flex: 0 0 10px; fill: currentColor; }

/* Sellers verified under the stricter 2025+ process get a filled badge. */
.vpe-badge--document {
  background: var(--vpe-gold);
  border-color: var(--vpe-gold);
  color: #fff;
}

.vpe-tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--vpe-line);
  background: #F4F6F5;
  color: var(--vpe-ink-2);
  font-family: var(--vpe-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .3px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Larger variant for the single listing page */
.vpe-badges--lg .vpe-badge,
.vpe-badges--lg .vpe-tier { font-size: 11.5px; padding: 3px 10px; }
.vpe-badges--lg .vpe-badge { padding-left: 8px; }

/* Badge sitting inside a ClassiPress h3/h1 heading: stop it inheriting heading
   colour, size and weight from the theme's heading rules. */
h1 .vpe-badges, h2 .vpe-badges, h3 .vpe-badges, h4 .vpe-badges {
  font-size: 0;                 /* collapse inherited heading sizing */
  position: relative;
  top: -1px;
}
h1 .vpe-badge, h1 .vpe-tier,
h2 .vpe-badge, h2 .vpe-tier,
h3 .vpe-badge, h3 .vpe-tier,
h4 .vpe-badge, h4 .vpe-tier { text-shadow: none; }

/* ---- 2.2 Seller notice modal --------------------------------------------- */
/* Used when this theme owns the notice — i.e. once Popup Maker is disabled.
   While Popup Maker is active this markup isn't printed at all, so these rules
   are simply inert. See inc/seller-notice.php. */

.vpe-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  background: rgba(8,22,25,.62);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
  overflow-y: auto;
}
.vpe-modal-overlay.is-open { display: flex; }

.vpe-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--vpe-surface);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  font-family: var(--vpe-sans);
  color: var(--vpe-ink);
  overflow: hidden;
  animation: vpe-pop .18s ease-out;
}
@keyframes vpe-pop { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .vpe-modal { animation: none; } }

.vpe-modal__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 52px 16px 20px;
  background: var(--vpe-gold-bg);
  border-bottom: 1px solid var(--vpe-gold-line);
}
.vpe-modal__hd svg { width: 18px; height: 18px; fill: var(--vpe-gold); flex: 0 0 18px; }
.vpe-modal__hd h2 {
  margin: 0;
  font-family: var(--vpe-sans);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.2px;
  color: #4E360A;
  line-height: 1.3;
  text-shadow: none;
}

.vpe-modal__bd { padding: 18px 20px 4px; }
.vpe-modal__bd p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vpe-ink-2);
}
.vpe-modal__bd strong { color: var(--vpe-ink); font-weight: 700; }
.vpe-modal__bd a { color: var(--vpe-teal-700); font-weight: 650; text-decoration: underline; }

/* The fraud warning — the part that actually protects people. */
.vpe-modal__warn {
  margin: 0 0 4px;
  padding: 13px 15px;
  border-radius: var(--vpe-radius-sm);
  background: var(--vpe-danger-bg);
  border: 1px solid #EBD3D1;
  border-left: 3px solid var(--vpe-danger);
}
.vpe-modal__warn p { margin: 0; font-size: 14px; color: #6D2C28; line-height: 1.6; }
.vpe-modal__warn p + p { margin-top: 8px; }
.vpe-modal__warn strong { color: var(--vpe-danger); }

.vpe-modal__ft {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 20px 18px;
}
.vpe-modal__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--vpe-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--vpe-radius-sm);
  background: var(--vpe-teal-700);
  color: #fff;
  text-decoration: none !important;
}
.vpe-modal__btn:hover { background: var(--vpe-teal-800); color: #fff; }
.vpe-modal__link {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--vpe-teal-700);
  text-decoration: underline;
}

.vpe-modal__x {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  color: #6B4A0C;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.vpe-modal__x:hover { background: #fff; }

/* ---- 2.3 Persistent trust bar -------------------------------------------- */
/* Revealed after the modal is dismissed, so the warning is never fully gone.
   In Popup Maker mode there's no dismissal event to hook, so it shows from the
   start as a passive supplement. */
.vpe-trustbar {
  display: block;
  padding: 10px 0;
  background: var(--vpe-gold-bg);
  border-bottom: 1px solid var(--vpe-gold-line);
  font-family: var(--vpe-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #6B4A0C;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

/* The band spans the window; its content lines up with the ad listings.
   960px centred, dropping to 90% below 960px — mirroring exactly what
   ClassiPress does for .content_res / .header_main_res. Measured on the live
   site: the content column starts at x=94 and is 960px wide, and this now
   starts at the same 94. */
.vpe-trustbar__inner {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
@media screen and (max-width: 960px) {
  .vpe-trustbar__inner { width: 90%; }
}
.vpe-trustbar svg { width: 15px; height: 15px; fill: var(--vpe-gold); flex: 0 0 15px; margin-top: 2px; }
.vpe-trustbar strong { color: #4E360A; }
.vpe-trustbar a { color: #6B4A0C; text-decoration: underline; font-weight: 650; }

/* ---- 2.3 Sidebar widget components --------------------------------------
   These style the two sidebar widgets from the mockup. They only take effect
   once the widget CONTENT uses these classes — see widget-html/ for the exact
   markup to paste into Appearance -> Widgets. CSS cannot restructure a
   paragraph of prose into a stat table; that part is a content edit.
   ----------------------------------------------------------------------- */

/* Header row with a status pill, e.g. "2025 Maintenance Fees  [Finalized]" */
.vpe-modhd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vpe-modhd h4 { margin: 0; flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -.15px; }
.vpe-pill {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--vpe-teal-050);
  color: var(--vpe-teal-700);
  white-space: nowrap;
}

/* Label / figure rows */
.vpe-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--vpe-line);
  font-size: 13.5px;
  color: var(--vpe-ink-2);
}
.vpe-stat:last-of-type { border-bottom: 0; }
.vpe-stat b {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.4px;
  color: var(--vpe-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vpe-fine { font-size: 12px; color: var(--vpe-muted); margin: 8px 0 0; line-height: 1.5; }
.vpe-fine a { color: var(--vpe-teal-700); font-weight: 600; }

/* Scammer list: red reserved for the entries, not the whole block. */
.vpe-risk {
  border: 1px solid #EBD3D1;
  background: var(--vpe-danger-bg);
  border-radius: var(--vpe-radius-sm);
  padding: 13px 14px;
}
.vpe-risk > h4 { margin: 0 0 8px; color: var(--vpe-danger); font-size: 15px; font-weight: 700; }
.vpe-scam-intro { font-size: 13px; color: #6D2C28; margin: 0 0 10px; line-height: 1.55; }
.vpe-risk-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: #6D2C28;
  padding: 7px 0;
  border-bottom: 1px solid #EEDAD8;
}
.vpe-risk-row:last-of-type { border-bottom: 0; }
.vpe-risk-row code {
  font-family: var(--vpe-mono);
  font-size: 12px;
  word-break: break-all;
  background: none;
  padding: 0;
}
.vpe-risk-row span { white-space: nowrap; opacity: .75; }
.vpe-risk-link {
  display: inline-block;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vpe-danger);
}

/* Long entry lists, collapsed with a fade + toggle (button added by vpe.js). */
.vpe-scam-list { font-family: var(--vpe-mono); font-size: 12.5px; color: #6D2C28; line-height: 1.9; }
.vpe-scam-list br { line-height: 1.9; }

/* ---- 2.3 Verified seller list table ------------------------------------- */
.vpe-sellers { font-family: var(--vpe-sans); }

.vpe-sellers__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.vpe-sellers__search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 13px;
  border: 1.5px solid var(--vpe-line);
  border-radius: var(--vpe-radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--vpe-ink);
  background: #FBFBF9;
}
.vpe-sellers__search:focus { outline: 2px solid var(--vpe-teal-600); outline-offset: -1px; }
.vpe-sellers__count { font-size: 13px; color: var(--vpe-muted); font-weight: 600; }

.vpe-sellers table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vpe-surface);
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius);
  overflow: hidden;
}
.vpe-sellers th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--vpe-muted);
  background: #FBFBF9;
  padding: 11px 14px;
  border-bottom: 1px solid var(--vpe-line);
  white-space: nowrap;
}
.vpe-sellers th button {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.vpe-sellers th[aria-sort] button::after { content: " \2193"; opacity: .5; }
.vpe-sellers th[aria-sort="descending"] button::after { content: " \2191"; }
.vpe-sellers td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--vpe-line);
  font-size: 14px;
  color: var(--vpe-ink-2);
  vertical-align: middle;
}
.vpe-sellers tr:last-child td { border-bottom: 0; }
.vpe-sellers tr:hover td { background: #FCFDFC; }
.vpe-sellers .vpe-u { font-weight: 700; color: var(--vpe-ink); }
.vpe-sellers .vpe-d { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vpe-sellers__empty { padding: 26px 14px; text-align: center; color: var(--vpe-muted); font-size: 14px; }

/* =============================================================================
   §3  CLASSIPRESS 3.6.1 OVERRIDES
   ============================================================================= *//* aqua.css sets a tan body background. This now wins because functions.php
   loads this file after at-color; if the tan ever returns, the load order has
   regressed — check the enqueue, don't add !important here. */


body.wp-child-theme-vpe-refresh { background: var(--vpe-canvas); color: var(--vpe-ink); }
body.wp-child-theme-vpe-refresh,
.wp-child-theme-vpe-refresh input,
.wp-child-theme-vpe-refresh select,
.wp-child-theme-vpe-refresh textarea,
.wp-child-theme-vpe-refresh button { font-family: var(--vpe-sans); }

/* ---- 3.1 Top utility strip ---------------------------------------------- */


.wp-child-theme-vpe-refresh .header_top { background: var(--vpe-teal-900); }
.wp-child-theme-vpe-refresh .header_top,
.wp-child-theme-vpe-refresh .header_top a { color: #D6E7E5; }
.wp-child-theme-vpe-refresh .header_top a { font-weight: 650; }
.wp-child-theme-vpe-refresh .header_top a:hover { color: #fff; }

/* ---- 3.2 Masthead: reclaim the ~120px of empty grey ---------------------- */


.wp-child-theme-vpe-refresh .header_main,
.wp-child-theme-vpe-refresh .header_main_bg { background: var(--vpe-surface); border-bottom: 1px solid var(--vpe-line); }

/* ClassiPress paints .header (the wrapper around the masthead AND the nav row)
   #EFEFEF, which showed as grey shading behind the menu bar. The mockup has that
   row white. Measured before/after on the live site. */
.wp-child-theme-vpe-refresh .header { background: var(--vpe-surface); }
.wp-child-theme-vpe-refresh .header_main_res { padding-top: 14px; padding-bottom: 14px; }

.wp-child-theme-vpe-refresh .header_main h1,
.wp-child-theme-vpe-refresh .header_main .logo,
.wp-child-theme-vpe-refresh .header_main #logo a {
  font-family: var(--vpe-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.4px;
  color: var(--vpe-ink);
  line-height: 1.15;
  text-shadow: none;
}

/* ClassiPress falls back to its own bundled cp_logo_*.png when no logo is
   configured for the active theme — which is why the ClassiPress tag graphic
   appeared in the header after activation. Hide that placeholder and render the
   site name as the wordmark from the mockup instead.
   :has() scopes this to the placeholder only, so uploading a real logo brings
   the image straight back with no CSS change. */


.wp-child-theme-vpe-refresh #logo .site-logo img[src*="/images/cp_logo"] { display: none; }

.wp-child-theme-vpe-refresh #logo .site-logo:has( img[src*="/images/cp_logo"] )::after {
  content: var(--vpe-site-name, "");   /* set inline by functions.php */
  display: block;
  font-family: var(--vpe-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: var(--vpe-ink);
}

.wp-child-theme-vpe-refresh .header_main .description {
  font-family: var(--vpe-sans);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--vpe-muted);
  margin-top: 2px;
}

/* ---- 3.3 Primary nav ---------------------------------------------------- */


.wp-child-theme-vpe-refresh .header_menu { background: var(--vpe-surface); border-bottom: 1px solid var(--vpe-line); }
.wp-child-theme-vpe-refresh .header_menu ul.menu > li > a {
  color: var(--vpe-ink-2);
  font-size: 13.5px;
  font-weight: 650;
  padding: 12px 13px;
  border-bottom: 2.5px solid transparent;
  text-shadow: none;
}
.wp-child-theme-vpe-refresh .header_menu ul.menu > li > a:hover,
.wp-child-theme-vpe-refresh .header_menu ul.menu > li.current-menu-item > a,
.wp-child-theme-vpe-refresh .header_menu ul.menu > li.current_page_item > a {
  background: none;
  color: var(--vpe-teal-700);
  border-bottom-color: var(--vpe-teal-600);
}

/* Dropdown submenus */


.wp-child-theme-vpe-refresh .header_menu ul.menu ul {
  background: var(--vpe-surface);
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius-sm);
  box-shadow: var(--vpe-shadow-h);
  padding: 5px;
}
.wp-child-theme-vpe-refresh .header_menu ul.menu ul li a {
  color: var(--vpe-ink-2);
  font-size: 13.5px;
  border-radius: 6px;
  border: 0;
}
.wp-child-theme-vpe-refresh .header_menu ul.menu ul li a:hover { background: var(--vpe-teal-050); color: var(--vpe-teal-700); }

/* "Post an Ad" — the primary conversion action, given the only warm colour. */


.wp-child-theme-vpe-refresh .header_menu .btn_orange,
.wp-child-theme-vpe-refresh .header_menu a.btn_orange,
.wp-child-theme-vpe-refresh a.btn_orange {
  background: var(--vpe-gold) !important;
  border: 0 !important;
  border-radius: var(--vpe-radius-sm) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  padding: 11px 20px !important;
  text-shadow: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.wp-child-theme-vpe-refresh a.btn_orange:hover { background: #855A0D !important; }

/* ClassiPress uses .btn_orange for several actions, not just the nav CTA —
   "Manage Ads" and "Edit Profile" in the sidebar use it too. Only one element
   per screen should carry the primary colour, so everything outside the nav
   drops back to teal. */


.wp-child-theme-vpe-refresh :not(.header_menu):not(.vpe-masthead) > a.btn_orange,
.wp-child-theme-vpe-refresh .content_right a.btn_orange,
.wp-child-theme-vpe-refresh .content_left a.btn_orange {
  background: var(--vpe-teal-700) !important;
  color: #fff !important;
}
.wp-child-theme-vpe-refresh :not(.header_menu):not(.vpe-masthead) > a.btn_orange:hover,
.wp-child-theme-vpe-refresh .content_right a.btn_orange:hover,
.wp-child-theme-vpe-refresh .content_left a.btn_orange:hover { background: var(--vpe-teal-800) !important; }

/* Keep the nav CTA gold regardless of the rule above. */


/* The primary CTA stays gold.
   vpe.js moves this button out of .header_menu into .header_main_res, so the
   .header_menu selector alone stopped matching and the teal "secondary buttons"
   rule took over — which is why it went teal. Measured live: parent was
   header_main_res vpe-masthead, background teal-700. Both selectors listed. */
.wp-child-theme-vpe-refresh .header_menu a.btn_orange,
.wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange { background: var(--vpe-gold) !important; }
.wp-child-theme-vpe-refresh .header_menu a.btn_orange:hover,
.wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange:hover { background: #855A0D !important; }

/* ---- 3.4 Search block --------------------------------------------------- */


.wp-child-theme-vpe-refresh .searchblock_out { background: transparent; }
.wp-child-theme-vpe-refresh .searchblock {
  background: var(--vpe-surface);
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius);
  box-shadow: var(--vpe-shadow);
  padding: 12px;
}
.wp-child-theme-vpe-refresh .searchblock input[type="text"],
.wp-child-theme-vpe-refresh .searchblock select {
  border: 1.5px solid var(--vpe-line);
  border-radius: var(--vpe-radius-sm);
  background: #FBFBF9;
  color: var(--vpe-ink);
  font-size: 14px;
  padding: 10px 13px;
  box-shadow: none;
}
.wp-child-theme-vpe-refresh .searchblock input[type="text"]:focus,
.wp-child-theme-vpe-refresh .searchblock select:focus { outline: 2px solid var(--vpe-teal-600); outline-offset: -1px; }
.wp-child-theme-vpe-refresh .searchblock .butt,
.wp-child-theme-vpe-refresh .searchblock input[type="submit"],
.wp-child-theme-vpe-refresh .searchblock button {
  background: var(--vpe-teal-700);
  border: 0;
  border-radius: var(--vpe-radius-sm);
  color: #fff;
  font-weight: 700;
}

/* ---- 3.5 Content wells -------------------------------------------------- */


.wp-child-theme-vpe-refresh .content,
.wp-child-theme-vpe-refresh .content_botbg { background: var(--vpe-canvas); }

.wp-child-theme-vpe-refresh .shadowblock_out,
.wp-child-theme-vpe-refresh .shadowblock {
  background: var(--vpe-surface);
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius);
  box-shadow: var(--vpe-shadow);
}
.wp-child-theme-vpe-refresh .shadowblock_out { padding: 0; margin-bottom: 16px; }

/* Section tabs ("New Listings") */


.wp-child-theme-vpe-refresh .tabcontrol .tabs a,
.wp-child-theme-vpe-refresh ul.tabs li a {
  background: transparent;
  border: 0;
  color: var(--vpe-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  box-shadow: none;
}
.wp-child-theme-vpe-refresh .tabcontrol .tabs a.current,
.wp-child-theme-vpe-refresh ul.tabs li a.current { color: var(--vpe-ink); background: transparent; }

/* ---- 3.6 Listing card -------------------------------------------------- */


.wp-child-theme-vpe-refresh .post-block-out {
  background: var(--vpe-surface);
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius);
  box-shadow: var(--vpe-shadow);
  margin-bottom: 12px;
  transition: box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.wp-child-theme-vpe-refresh .post-block-out:hover { box-shadow: var(--vpe-shadow-h); border-color: #D2DAD8; }
.wp-child-theme-vpe-refresh .post-block { padding: 15px 18px; background: transparent; border: 0; }

/* Title */


.wp-child-theme-vpe-refresh .post-block-out h3 { margin: 0 0 6px; line-height: 1.32; }
.wp-child-theme-vpe-refresh .post-block-out h3 a {
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.25px;
  color: var(--vpe-ink);
  text-shadow: none;
}
.wp-child-theme-vpe-refresh .post-block-out:hover h3 a { color: var(--vpe-teal-700); }

/* Price: its own cell, not a float.

   ClassiPress puts .tags.price-wrap INSIDE the same box as the title, as the
   first child. v1.3 floated it right, so the title text wrapped around it and
   the two collided at narrower widths. A float can never be a separate cell.

   Instead: the card is the positioning context, the text side reserves a 152px
   gutter, and the price is absolutely positioned into that gutter with a
   full-height divider. Deterministic at every width, and it cannot overlap the
   title because the gutter is real reserved space.

   box-sizing is load-bearing here: ClassiPress sets .post-right-no-img.full to
   width:100% with content-box, so adding right padding without border-box makes
   the box 152px wider than its parent and the text clips off the left edge.
   Verified on the live site at 1440 / 900 / 700 / 420px. */

.wp-child-theme-vpe-refresh .post-block-out .post-block { position: relative; }

.wp-child-theme-vpe-refresh .post-block-out .post-right-no-img,
.wp-child-theme-vpe-refresh .post-block-out .post-right {
  box-sizing: border-box;
  padding-right: 152px;
}

.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 136px;
  box-sizing: border-box;
  float: none;
  margin: 0;
  padding: 0 12px;
  border-left: 1px solid var(--vpe-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Flatten ClassiPress's pennant chrome so only the figure remains.

   float:none + width:100% + border-box on BOTH wrappers is what actually
   centres the figure. ClassiPress floats p.post-price and lets it shrink to fit,
   so text-align alone does nothing — the element itself is only as wide as the
   number and sits hard right. Verified centred to within 1px on the live site
   (38px left, 37px right in a 136px cell). */
.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap .tag-head {
  display: block;
  float: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  clip-path: none;
  -webkit-clip-path: none;
  box-shadow: none;
}
.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap .tag-head:before,
.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap .tag-head:after,
.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap span:before,
.wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap span:after {
  display: none;
  content: none;
  border-color: transparent;
}

.wp-child-theme-vpe-refresh .post-block-out p.post-price {
  float: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--vpe-teal-800);
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -1px;
  line-height: 1.05;
  text-align: center;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "per point" caption.
   v1.3 tried to add this via the appthemes_price_format PHP filter. That filter
   never fired on this install, so the caption never appeared. Done in CSS now,
   which is deterministic. */
.wp-child-theme-vpe-refresh .post-block-out p.post-price:after {
  content: "per point";
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vpe-muted);
  text-align: center;
}


/* Metadata row: was ~11px #BBB, effectively unreadable. */


.wp-child-theme-vpe-refresh p.post-meta {
  margin: 0 0 9px;
  font-size: 12.5px;
  color: var(--vpe-muted);
  line-height: 1.6;
}
.wp-child-theme-vpe-refresh p.post-meta a { color: var(--vpe-ink-2); font-weight: 650; }
.wp-child-theme-vpe-refresh p.post-meta a:hover { color: var(--vpe-teal-700); }
.wp-child-theme-vpe-refresh p.post-meta span { margin-right: 14px; }
.wp-child-theme-vpe-refresh p.post-meta .dashicons-before::before { color: var(--vpe-muted); opacity: .8; }

.wp-child-theme-vpe-refresh p.post-desc {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vpe-ink-2);
}

.wp-child-theme-vpe-refresh p.stats {
  margin: 0;
  font-size: 12px;
  color: var(--vpe-muted);
  text-align: right;
}

/* ---- 3.7 Single listing page ------------------------------------------- */


.wp-child-theme-vpe-refresh .single .content_left h1,
.wp-child-theme-vpe-refresh h1.single-title {
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -.5px;
  line-height: 1.25;
  color: var(--vpe-ink);
}

/* Spec fields: ClassiPress indents these ~34% into the column. Pull them back. */


.wp-child-theme-vpe-refresh .single .content_left dl,
.wp-child-theme-vpe-refresh .dl-horizontal { margin-left: 0 !important; }
.wp-child-theme-vpe-refresh .single .content_left dt,
.wp-child-theme-vpe-refresh .dl-horizontal dt {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--vpe-muted);
  width: auto;
  float: none;
  text-align: left;
  margin-top: 12px;
}
.wp-child-theme-vpe-refresh .single .content_left dd,
.wp-child-theme-vpe-refresh .dl-horizontal dd {
  margin-left: 0 !important;
  font-size: 15px;
  font-weight: 620;
  color: var(--vpe-ink);
}
.wp-child-theme-vpe-refresh .listing-id,
.wp-child-theme-vpe-refresh .ad-listing-id {
  background: #FBFBF9;
  border: 1px solid var(--vpe-line);
  border-radius: var(--vpe-radius-sm);
  color: var(--vpe-muted);
  font-family: var(--vpe-mono);
  font-size: 11.5px;
  letter-spacing: .4px;
  padding: 11px 14px;
}

/* ---- 3.8 Sidebar ------------------------------------------------------- */


.wp-child-theme-vpe-refresh .content_right .shadowblock_out { margin-bottom: 14px; }
.wp-child-theme-vpe-refresh .content_right h2,
.wp-child-theme-vpe-refresh .content_right h3,
.wp-child-theme-vpe-refresh .content_right .widget-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.15px;
  color: var(--vpe-ink);
  margin: 0 0 8px;
  text-shadow: none;
}
.wp-child-theme-vpe-refresh .content_right p { font-size: 13.5px; line-height: 1.6; color: var(--vpe-ink-2); }

/* Scammer list: reserve red for the entries, not the whole block. Bulk red body
   copy reads as noise and buries the actual names. */


.wp-child-theme-vpe-refresh .vpe-scam-intro {
  font-size: 13px;
  color: var(--vpe-ink-2);
  background: var(--vpe-danger-bg);
  border: 1px solid #EBD3D1;
  border-left: 3px solid var(--vpe-danger);
  border-radius: var(--vpe-radius-sm);
  padding: 11px 13px;
  margin-bottom: 12px;
}
.wp-child-theme-vpe-refresh /* Cap runaway sidebar widgets so the main column can no longer be dwarfed.
   Applies only to widgets given the .vpe-collapse class. */


.wp-child-theme-vpe-refresh .vpe-collapse { position: relative; max-height: 420px; overflow: hidden; }
.wp-child-theme-vpe-refresh .vpe-collapse::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%);
  pointer-events: none;
}
.wp-child-theme-vpe-refresh .vpe-collapse.is-open { max-height: none; }
.wp-child-theme-vpe-refresh .vpe-collapse.is-open::after { display: none; }
.wp-child-theme-vpe-refresh .vpe-collapse-toggle {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vpe-danger);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---- 3.9 Footer -------------------------------------------------------- */


.wp-child-theme-vpe-refresh .footer,
.wp-child-theme-vpe-refresh .footer_menu,
.wp-child-theme-vpe-refresh .footer_main { background: var(--vpe-teal-900); color: #9FC2C0; border: 0; }
.wp-child-theme-vpe-refresh .footer a { color: #D6E7E5; }
.wp-child-theme-vpe-refresh .footer a:hover { color: #fff; }
.wp-child-theme-vpe-refresh .footer_menu_res ul.menu > li > a { font-weight: 650; font-size: 13px; }

/* ---- 3.10 Buttons & forms globally ------------------------------------- */


.wp-child-theme-vpe-refresh a.butt,
.wp-child-theme-vpe-refresh .butt,
.wp-child-theme-vpe-refresh input[type="submit"],
.wp-child-theme-vpe-refresh button.btn {
  background: var(--vpe-teal-700);
  border: 0;
  border-radius: var(--vpe-radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  text-shadow: none;
  box-shadow: none;
}
.wp-child-theme-vpe-refresh a.butt:hover,
.wp-child-theme-vpe-refresh .butt:hover,
.wp-child-theme-vpe-refresh input[type="submit"]:hover { background: var(--vpe-teal-800); color: #fff; }

.wp-child-theme-vpe-refresh a { color: var(--vpe-teal-700); }
.wp-child-theme-vpe-refresh a:hover { color: var(--vpe-teal-600); }

/* Visible focus ring — ClassiPress removes it in places. */


.wp-child-theme-vpe-refresh a:focus-visible,
.wp-child-theme-vpe-refresh button:focus-visible,
.wp-child-theme-vpe-refresh input:focus-visible,
.wp-child-theme-vpe-refresh select:focus-visible {
  outline: 2px solid var(--vpe-teal-600);
  outline-offset: 2px;
}

/* ---- 3.12 Masthead, as in the mockup ------------------------------------
   Search field and "Post an Ad" sit on the wordmark row; the nav is a slim row
   beneath. vpe.js moves those two elements into .header_main_res and adds
   .vpe-masthead — every rule below is gated on that class, so if the JS never
   runs the original stacked ClassiPress layout stays intact and styled.

   The search shell is sized with an explicit width rather than relying on
   flex-grow. ClassiPress's search is a float layout nested three levels deep
   (.searchblock > form#searchform > div.searchfield + div.searchbutcat), and
   the category <select> has a wide intrinsic minimum ("Marriott Destination
   Club"), which over-constrains the row and collapses the text input to 0px.
   Verified on the live site.
   ----------------------------------------------------------------------- */

.wp-child-theme-vpe-refresh .header_main_res.vpe-masthead {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* --- wordmark + VPE glyph --- */
.wp-child-theme-vpe-refresh .vpe-masthead #logo {
  flex: 0 0 auto;
  margin: 0;
  position: relative;
  padding-left: 56px;
}
.wp-child-theme-vpe-refresh .vpe-masthead #logo:before {
  content: "VPE";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--vpe-teal-600), var(--vpe-teal-900));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vpe-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.wp-child-theme-vpe-refresh .vpe-masthead #logo .site-logo:after { font-size: 21px; line-height: 1.1; }
.wp-child-theme-vpe-refresh .vpe-masthead #logo .description { font-size: 11.5px; margin-top: 1px; }
.wp-child-theme-vpe-refresh .vpe-masthead .adblock { display: none; }

/* ClassiPress's float-clearing <div class="clr"> is still a flex child once the
   row becomes a flex container, and it claimed 237px of a 960px row — which is
   why the search field kept collapsing however it was sized. Measured on the
   live site. */
.wp-child-theme-vpe-refresh .header_main_res .clr { display: none; }

/* --- search shell --- */
.wp-child-theme-vpe-refresh .vpe-masthead .searchblock_out {
  flex: 1 1 auto;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
}
.wp-child-theme-vpe-refresh .vpe-masthead .searchblock {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--vpe-line);
  border-radius: var(--vpe-radius-sm);
  background: #FBFBF9;
  box-shadow: none;
  overflow: hidden;
}
.wp-child-theme-vpe-refresh .vpe-masthead #searchform {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchfield {
  flex: 1 1 auto;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchfield input#s {
  width: 100%;
  height: auto;
  float: none;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.4;
}
.wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchbutcat {
  flex: 0 0 auto;
  float: none;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
/* The button precedes the select in ClassiPress's markup; reorder so the
   sequence reads input -> category -> submit. */
.wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchbutcat select#scat {
  order: 1;
  width: auto;
  min-width: 0;
  max-width: 150px;
  height: auto;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--vpe-line);
  border-radius: 0;
  background: #fff;
  font-size: 13.5px;
}
.wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchbutcat button#go {
  order: 2;
  width: 48px;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--vpe-teal-700);
  color: #fff;
  box-shadow: none;
}

/* --- CTA --- */
.wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

/* Nav row.

   DO NOT hide .clr in here. ClassiPress floats ul.menu, and that .clr div is the
   only thing clearing it. v1.7 hid it to reclaim the space the CTA left behind —
   which collapsed .header_menu to 15px while the menu itself is 45px, so the nav
   links spilled 40px onto the beige content area below. That is what "the nav is
   beige" was. Measured on the live site: .header_menu 184-199, ul.menu 194-239.

   flow-root gives the same clearing without the div, and without overflow:hidden
   (which would clip the dropdown submenus). */
.wp-child-theme-vpe-refresh .header_menu_res {
  display: flow-root;
}
.wp-child-theme-vpe-refresh .header_menu_res:after {
  content: "";
  display: table;
  clear: both;
}

/* The trust bar follows the floated nav block and must clear it. */
.vpe-trustbar { clear: both; width: 100%; box-sizing: border-box; }

@media screen and (max-width: 960px) {
  .wp-child-theme-vpe-refresh .header_main_res.vpe-masthead { flex-wrap: wrap; gap: 12px; }
  .wp-child-theme-vpe-refresh .vpe-masthead .searchblock_out { order: 3; flex: 1 1 100%; max-width: none; }
  .wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange { margin-left: auto; }
}

@media screen and (max-width: 600px) {
  .wp-child-theme-vpe-refresh .vpe-masthead #logo:before { width: 38px; height: 34px; font-size: 13px; }
  .wp-child-theme-vpe-refresh .vpe-masthead #logo .site-logo:after { font-size: 18px; }
  .wp-child-theme-vpe-refresh .vpe-masthead #searchform .searchbutcat select#scat { max-width: 120px; }

  /* Horizontal overflow at phone width.

     #logo measured 323px inside a 305px viewport, so the page could be dragged
     sideways and the wordmark clipped at the edge — the "cuts off slightly"
     symptom. The generated wordmark text wraps at spaces but its intrinsic
     width was still driving the box wider than the screen.

     Measured in the Customizer mobile preview: 323px before, 275px after, and
     body scrollWidth back to exactly the viewport width. */
  .wp-child-theme-vpe-refresh .vpe-masthead #logo {
    padding-left: 48px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .wp-child-theme-vpe-refresh .vpe-masthead #logo .site-logo:after {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .wp-child-theme-vpe-refresh .vpe-masthead #logo .description { overflow-wrap: anywhere; }
}


/* ---- 3.13 Boxed layout ---------------------------------------------------
   In the mockup every band — utility strip, masthead, nav, trust bar — sits
   inside one contained card on the canvas, rather than running edge to edge.
   That is achieved by bounding ClassiPress's outermost .container.

   Deliberately NOT touched: .content_res / .content_left / .content_right.
   ClassiPress sizes those with fixed pixel widths (960 / 590 / 340), and
   narrowing the wrapper risks the two columns no longer fitting and wrapping.
   960 simply centres inside 1100, which gives the same result with no risk.

   No overflow:hidden on .container — it would clip the nav dropdown menus. The
   corners are rounded on the first and last bands instead.
   ----------------------------------------------------------------------- */

.wp-child-theme-vpe-refresh .container {
  max-width: 1100px;
  margin: 22px auto 26px;
  background: var(--vpe-surface);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(14,31,35,.05), 0 18px 44px -18px rgba(14,31,35,.22);
}

.wp-child-theme-vpe-refresh .header_top { border-radius: 14px 14px 0 0; }
.wp-child-theme-vpe-refresh .footer,
.wp-child-theme-vpe-refresh .footer_main { border-radius: 0 0 14px 14px; }

/* Trust bar sits mid-card, so it spans the card and its content lines up with
   the 960px content column above and below it. */
.vpe-trustbar__inner { width: 960px; }

/* Below the point where there is no room for side gutters, drop back to a
   full-width layout rather than a cramped floating box. */
@media screen and (max-width: 1180px) {
  .wp-child-theme-vpe-refresh .container {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .wp-child-theme-vpe-refresh .header_top,
  .wp-child-theme-vpe-refresh .footer,
  .wp-child-theme-vpe-refresh .footer_main { border-radius: 0; }
}

/* ---- 3.14 Trust bar links ----------------------------------------------- */
.vpe-trustbar__links { white-space: nowrap; }
.vpe-trustbar__dot { opacity: .45; margin: 0 3px; }

@media screen and (max-width: 600px) {
  .vpe-trustbar__links { display: block; white-space: normal; margin-top: 3px; }
}


/* ---- 3.15 Full-width pages (and the calculator page) --------------------
   .vpe-fullwidth  — hides the sidebar so the main column fills the content
                     column. Added by inc/resale-calculator.php, and reusable
                     for any page via the vpe_fullwidth_page filter.
   .vpe-calc-page  — calculator-only tweaks.

   The calculator uses the SAME widths as the rest of the site: the 1100px card
   and the 960px content column. v1.8 briefly widened this page to 1280/1230;
   that has been removed, because one consistent measure across the site reads
   better than a page that jumps wider, and the calculator's own layout is
   comfortable at 960 (verified on the live page — its internal grid renders its
   two columns at full size with no compression).
   ----------------------------------------------------------------------- */

.wp-child-theme-vpe-refresh.vpe-fullwidth .content_right { display: none; }

.wp-child-theme-vpe-refresh.vpe-fullwidth .content_left {
  width: 100%;
  float: none;
  margin: 0;
}
.wp-child-theme-vpe-refresh.vpe-fullwidth .content_left .shadowblock_out,
.wp-child-theme-vpe-refresh.vpe-fullwidth .content_left .shadowblock { width: auto; }

/* ClassiPress prints the WordPress page title as h1.single; the calculator
   prints its own H1 right below it, so the heading appeared twice. Hiding
   ClassiPress's keeps the calculator's better-designed one.
   To do the opposite instead, delete the .brandbar div in
   templates/resale-calculator.php and remove this rule. */
/* The calculator gets 1100px of content, wider than the 960px the rest of the
   site uses, because its own layout is built for roughly that. The card widens
   to 1200 to keep a gutter around it. */
.wp-child-theme-vpe-refresh.vpe-calc-page .container { max-width: 1200px; }

.wp-child-theme-vpe-refresh.vpe-calc-page .content_res {
  width: auto;
  max-width: 1148px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media screen and (max-width: 1260px) {
  .wp-child-theme-vpe-refresh.vpe-calc-page .container { max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
  .wp-child-theme-vpe-refresh.vpe-calc-page .header_top,
  .wp-child-theme-vpe-refresh.vpe-calc-page .footer,
  .wp-child-theme-vpe-refresh.vpe-calc-page .footer_main { border-radius: 0; }
}

.wp-child-theme-vpe-refresh.vpe-calc-page .content_left h1.single { display: none; }

/* ---- 3.16 Header search removed -----------------------------------------
   The top search bar saw very little use, so it is hidden sitewide. Hidden
   rather than deleted: the markup is ClassiPress's, the form still exists for
   anything that posts to it, and turning it back on is a one-rule change.

   To restore it: delete this rule, and restore the two commented lines in
   initMasthead() in assets/vpe.js so it gets moved into the masthead row again.
   The styling for it in §3.12 was left in place and is simply inert until then.
   ----------------------------------------------------------------------- */

/* Only .searchblock_out. Hiding .searchblock as well (v1.9) took the
   breadcrumb with it on ad pages and left it floating beside the nav. */
.wp-child-theme-vpe-refresh .searchblock_out { display: none; }

/* With the search gone the masthead has only the wordmark and the CTA, so push
   the CTA to the right edge. */
.wp-child-theme-vpe-refresh .header_main_res.vpe-masthead a.btn_orange { margin-left: auto; }


/* ---- 3.17 Sidebar navigation-menu widget (the "Quick links" card) --------
   On inner pages the sidebar is a WordPress Navigation Menu widget
   (widget_nav_menu, #nav_menu-3) pointed at the full site menu — 18 links,
   including every submenu item. Which menu it shows is a content setting, not
   code: see the README for creating a short "Quick Links" menu and pointing the
   widget at it.

   This styles whatever that widget contains as the compact card from the
   mockup: stacked links, hairline dividers, an arrow on hover.

   The one !important in here is deliberate and narrow. ClassiPress renders a
   12x20px li::before as the chevron bullet, and its rule wins over a scoped
   selector, so it needs forcing. Verified on the live site before and after.
   ----------------------------------------------------------------------- */

.wp-child-theme-vpe-refresh .content_right .widget_nav_menu .shadowblock { padding: 16px 17px; }

.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  list-style: none;
  line-height: 1.4;
}

/* ClassiPress's chevron bullet. */
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li:before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li a {
  display: block;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--vpe-line);
  background: none;
  color: var(--vpe-teal-700);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
  text-indent: 0;
}
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li:last-child a { border-bottom: 0; }
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li a:hover { color: var(--vpe-teal-600); }

/* Arrow appears on hover, so the resting state stays quiet. */
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li a:after {
  content: " \2192";
  opacity: 0;
}
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li a:hover:after { opacity: 1; }

/* Submenus stay collapsed — this is a shortcut list, not the full site map.
   Harmless if the Quick Links menu has no children. */
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul ul { display: none; }

/* Current page gets a quiet marker rather than a heavy highlight. */
.wp-child-theme-vpe-refresh .content_right .widget_nav_menu ul li.current-menu-item > a {
  color: var(--vpe-ink);
  font-weight: 700;
}


/* ---- 3.18 Badge placement, and the category tag ------------------------
   The badge is inserted by vpe.js (see functions.php for why it is no longer
   done in PHP). On a listing card it goes first in the meta row, where the ad
   category tag used to sit — that tag said "Marriott Destination Club" on every
   single ad, so it carried no information and the space is better spent on the
   verification signal.
   ----------------------------------------------------------------------- */

/* The category tag. Hidden, not removed: the link still exists for anything
   that relies on it, and category archive pages are unaffected. */
.wp-child-theme-vpe-refresh .post-block-out p.post-meta span.folder { display: none; }

/* Two-line meta row:
     line 1 — seller name, then the verified badge
     line 2 — "Ad Listed" and the listing date

   The listing date takes flex: 1 0 100% so it always drops to its own line — no
   breakpoint involved, so a phone renders the same as the desktop. Before this
   was introduced, all of it sat inline and wrapped mid-item, which is what
   looked cut off.

   Order is explicit rather than source order: ClassiPress prints the category
   first, and vpe.js injects the badge at the start of the row. */
.wp-child-theme-vpe-refresh .post-block-out p.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.wp-child-theme-vpe-refresh .post-block-out p.post-meta span.owner {
  order: 1;
  margin: 0;
  white-space: nowrap;
}
.wp-child-theme-vpe-refresh .post-block-out p.post-meta .vpe-badge-slot {
  order: 2;
  margin: 0;
}
.wp-child-theme-vpe-refresh .post-block-out p.post-meta span.clock {
  order: 3;
  flex: 1 0 100%;
  margin: 3px 0 0;
  white-space: nowrap;
}

/* "Ad Listed" label.

   ClassiPress renders a clock glyph here through .dashicons-before::before.
   CSS cannot insert text before an element's existing content except through
   that same pseudo-element, so the label replaces the clock icon rather than
   sitting beside it — and a clock next to the words "Ad Listed" would be
   redundant anyway.

   Two details that matter if you edit this: font-family must be overridden or
   the text renders in the Dashicons icon font as garbage, and the rule is scoped
   to span.clock so the other dashicons in the row are untouched. */
.wp-child-theme-vpe-refresh .post-block-out p.post-meta span.clock:before {
  content: "Ad Listed";
  font-family: var(--vpe-sans);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--vpe-ink-2);
  margin-right: 5px;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

/* Single ad: the badge sits on its own line above the title. */
.vpe-badge-slot--single { margin: 0 0 8px; }

/* ---- 3.19 Breadcrumb removed ------------------------------------------
   Removed on request. It rendered as a "Home > Category >" trail; on ad pages
   it was also being pushed alongside the nav. Hidden rather than unhooked so no
   ClassiPress template is touched.
   ----------------------------------------------------------------------- */
.wp-child-theme-vpe-refresh .breadcrumb-trail,
.wp-child-theme-vpe-refresh .breadcrumbs { display: none; }

/* ---- 3.20 Nav row stays white ------------------------------------------
   .header wraps both the masthead and the nav row and ClassiPress paints it
   #EFEFEF. Restated here alongside the nav so the two can't drift apart.
   ----------------------------------------------------------------------- */
.wp-child-theme-vpe-refresh .header,
.wp-child-theme-vpe-refresh .header_menu,
.wp-child-theme-vpe-refresh .header_menu_res { background: var(--vpe-surface); }

/* ClassiPress's mobile nav <select>. It belongs only below its own breakpoint;
   make sure it never appears next to the desktop nav. */
.wp-child-theme-vpe-refresh .header_menu_res select.tinynav { display: none; }
@media screen and (max-width: 800px) {
}


/* ---- 3.21 Badge date ----------------------------------------------------- */
/* Reads from the same record as the Verified Seller List, so the two cannot
   disagree. Muted and outside the pill: the badge is the signal, the date is
   supporting detail. */
/* margin-left matters: without it this renders as "Verified sellersince
   8/8/2024", since the pill and this span are adjacent inline elements with no
   whitespace between them in the markup. */
.vpe-badge-date {
  margin-left: 6px;
  font-family: var(--vpe-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vpe-muted);
  white-space: nowrap;
}

/* ---- 3.22 "List your classified ads" sidebar card ------------------------
   The teal hero card from the mockup. Styling only — the copy is widget content,
   see widget-html/README-widgets.md for the markup to paste in.
   ----------------------------------------------------------------------- */
.vpe-hero {
  background: linear-gradient(160deg, var(--vpe-teal-800), var(--vpe-teal-900));
  border-radius: var(--vpe-radius);
  padding: 17px 18px;
  color: #fff;
}
.vpe-hero h4 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--vpe-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.25;
}
.vpe-hero p {
  margin: 0 0 12px;
  color: #CADEDC;
  font-size: 13.5px;
  line-height: 1.6;
}
.vpe-hero a.vpe-hero__btn {
  display: inline-block;
  background: #fff;
  color: var(--vpe-teal-900);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: var(--vpe-radius-sm);
  text-decoration: none;
}
.vpe-hero a.vpe-hero__btn:hover { background: #EAF3F2; color: var(--vpe-teal-900); }

/* The card supplies its own background, so drop the white shadowblock around it. */
.wp-child-theme-vpe-refresh .content_right .shadowblock_out.vpe-hero-wrap,
.wp-child-theme-vpe-refresh .content_right .shadowblock_out.vpe-hero-wrap .shadowblock {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---- 3.23 Narrow-screen navigation -------------------------------------
   No collapse, no toggle button. Below 800px the seven top-level items simply
   wrap onto as many lines as they need.

   This replaces two earlier attempts and is deliberately simpler than both.
   v1.13 reused ClassiPress's tinynav <select>; v1.15-v1.20 injected a hamburger
   button with its own open/closed state. Each added a mechanism that could fail,
   and each did. Seven links wrap in two lines, so there was never enough content
   to justify hiding them behind a tap. Pure CSS, no JavaScript, no state.

   Submenu items are hidden on purpose: the request was the top-level items, and
   including children turns seven links into eighteen.

   Verified on the live site with the breakpoint temporarily widened: all seven
   items visible across two lines, 86px tall.
   ----------------------------------------------------------------------- */

/* ClassiPress's mobile <select> is never used. */
.wp-child-theme-vpe-refresh .header_menu_res select.tinynav { display: none !important; }

@media screen and (max-width: 800px) {

  /* WHY THE ID IS IN THIS SELECTOR — do not simplify it away.

     ClassiPress hides the menu below 800px with an ID selector:

         @media screen and (max-width: 800px) { #menu-header { display: none } }

     An ID is specificity (1,0,0). A selector of three classes plus an element is
     (0,3,1), and no number of classes ever beats one ID — so the previous rule
     could not apply and the menu vanished entirely below 800px. That is also why
     ClassiPress ships the tinynav <select>: it expects the select to replace the
     hidden menu, and this theme hides the select.

     Naming #menu-header here makes it (1,2,1), which wins cleanly without
     !important. If the Header menu is ever renamed the id changes — but then
     ClassiPress's rule stops matching too, so the two stay consistent.

     Found by asking the browser which rule was winning, in the Customizer's
     mobile preview. Verified at 747px and at 305px: all seven items visible. */
  .wp-child-theme-vpe-refresh .header_menu_res ul.menu,
  .wp-child-theme-vpe-refresh .header_menu_res ul#menu-header {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    padding: 6px 0;
    gap: 2px 4px;
  }

  .wp-child-theme-vpe-refresh .header_menu_res ul.menu > li,
  .wp-child-theme-vpe-refresh .header_menu_res ul#menu-header > li {
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }

  .wp-child-theme-vpe-refresh .header_menu_res ul.menu > li > a,
  .wp-child-theme-vpe-refresh .header_menu_res ul#menu-header > li > a {
    display: block;
    padding: 9px 11px;
    white-space: normal;   /* long labels wrap rather than overflow */
    border-bottom: 0;
  }

  /* Children stay out of the way. ClassiPress parks them at left:-999em, so
     hide them outright rather than let that positioning leak into the wrap. */
  .wp-child-theme-vpe-refresh .header_menu_res ul.menu ul,
  .wp-child-theme-vpe-refresh .header_menu_res ul#menu-header ul { display: none; }
}

/* =============================================================================
   §4  RESPONSIVE
   ClassiPress 3.6.1 swaps the nav for a <select> (l_tinynav) and lets wide
   tables overflow. Fixed below.
   ============================================================================= */

@media screen and (max-width: 960px) {
  .wp-child-theme-vpe-refresh .content_left,
.wp-child-theme-vpe-refresh .content_right { float: none; width: auto; }
  .wp-child-theme-vpe-refresh .content_right { margin-top: 18px; }
}

@media screen and (max-width: 800px) {
  .wp-child-theme-vpe-refresh .header_main_res { padding: 12px 14px; }
  .wp-child-theme-vpe-refresh .header_main h1,
.wp-child-theme-vpe-refresh .header_main .logo,
.wp-child-theme-vpe-refresh .header_main #logo a { font-size: 21px; }

/* The v1.9 horizontal-scroller rules lived here and were REMOVED in v1.20.

     They set `display: flex !important` on ul.menu below 800px. That beat the
     `display: none` collapse rule in §3.23 on !important alone, so the mobile
     menu never collapsed — through three separate releases that each claimed to
     fix it. v1.15's removal attempt matched on comment text that had already
     changed, so it silently removed nothing.

     Mobile navigation is handled ONLY in §3.23. Nothing about ul.menu display
     belongs in this section. */

  .wp-child-theme-vpe-refresh a.btn_orange { display: block; text-align: center; margin: 8px 14px 0 !important; }

  .wp-child-theme-vpe-refresh .searchblock { padding: 10px; }
  .wp-child-theme-vpe-refresh .searchblock input[type="text"],
.wp-child-theme-vpe-refresh .searchblock select,
.wp-child-theme-vpe-refresh .searchblock .butt { width: 100% !important; margin: 0 0 8px !important; box-sizing: border-box; }

/* Card stacks. The price moves BELOW the content under a divider, matching the
     mockup. The order properties are required: in ClassiPress's markup the price
     is the FIRST child, so without them it lands above the title. */
  .wp-child-theme-vpe-refresh .post-block-out .post-block { padding: 14px; }

  .wp-child-theme-vpe-refresh .post-block-out .post-right-no-img,
  .wp-child-theme-vpe-refresh .post-block-out .post-right {
    padding-right: 0;
    display: flex;
    flex-direction: column;
  }
  .wp-child-theme-vpe-refresh .post-block-out .post-right-no-img > .clr,
  .wp-child-theme-vpe-refresh .post-block-out .post-right > .clr { display: none; }

  .wp-child-theme-vpe-refresh .post-block-out h3          { order: 1; }
  .wp-child-theme-vpe-refresh .post-block-out p.post-meta { order: 2; }
  .wp-child-theme-vpe-refresh .post-block-out p.post-desc { order: 3; }
  .wp-child-theme-vpe-refresh .post-block-out p.stats     { order: 4; text-align: left; }

  .wp-child-theme-vpe-refresh .post-block-out .tags.price-wrap {
    position: static;
    order: 99;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--vpe-line);
    padding: 11px 0 0;
    margin-top: 12px;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
  }
  .wp-child-theme-vpe-refresh .post-block-out p.post-price { text-align: left; font-size: 24px; }
  /* Inline on mobile, so it needs an explicit gap — with margin:0 the figure and
     the caption ran together as "$0.80PER POINT". */
  .wp-child-theme-vpe-refresh .post-block-out p.post-price:after { display: inline; margin: 0 0 0 8px; }

  /* Verified seller list: was cut off mid-column on mobile. */


  
  .wp-child-theme-vpe-refresh .vpe-sellers { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wp-child-theme-vpe-refresh .vpe-sellers table { min-width: 540px; }

/* Any other wide table in content. */


  
  .wp-child-theme-vpe-refresh .content_left table { display: block; overflow-x: auto; max-width: 100%; }

  .wp-child-theme-vpe-refresh .vpe-modal__ft { flex-direction: column; align-items: stretch; }
  .wp-child-theme-vpe-refresh .vpe-modal__btn { text-align: center; }
  .wp-child-theme-vpe-refresh .vpe-modal__link { text-align: center; }

}
@media screen and (max-width: 400px) {
  .wp-child-theme-vpe-refresh .vpe-modal__hd h2 { font-size: 15.5px; }
  .wp-child-theme-vpe-refresh .vpe-badges { gap: 4px; }
}

/* ---- 3.11 Beating ClassiPress's inline colour block ---------------------
   ClassiPress prints a 27-selector <style> block directly into <head> from its
   own colour setting (body #d1c49c, .header_menu #3e9286, .btn_orange, .footer,
   .tags span, and so on). WordPress prints ENQUEUED stylesheets before that
   block, so an external sheet can never win on source order no matter how it is
   enqueued. That is why v1.2 still showed the tan body and the teal menu bar
   even with correct load order.

   Everything in §3 is therefore scoped with .wp-child-theme-vpe-refresh, the
   class WordPress puts on <body> whenever a child theme is active. That raises
   specificity above the inline block without a single !important.

   The four rules below need to out-specify compound selectors from that block
   rather than simple ones, so they are written out in full.

   Tidier alternative: ClassiPress -> Settings has the colour option that
   generates that block. Setting it back to default stops the block being
   emitted at all and makes this whole section unnecessary. Nothing here breaks
   if you do that.
   ----------------------------------------------------------------------- */

/* Their: .content a:not(.cp-fixed-color):not(.selectBox) { color:#3e9286 } */
.wp-child-theme-vpe-refresh .content a:not(.cp-fixed-color):not(.selectBox) {
  color: var(--vpe-teal-700);
}
.wp-child-theme-vpe-refresh .content a:not(.cp-fixed-color):not(.selectBox):hover {
  color: var(--vpe-teal-600);
}

/* Their: .header_menu, .footer_menu { background:#3e9286 } */
.wp-child-theme-vpe-refresh .header_menu {
  background: var(--vpe-surface);
  border-bottom: 1px solid var(--vpe-line);
}
.wp-child-theme-vpe-refresh .footer_menu { background: var(--vpe-teal-900); }

/* Their: .btn_orange, .pages a, .pages span, .btn-topsearch, .reports_form
          input[type="submit"] { background:... } */
.wp-child-theme-vpe-refresh .header_menu a.btn_orange,
.wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange {
  background: var(--vpe-gold);
  color: #fff;
}
.wp-child-theme-vpe-refresh .header_menu a.btn_orange:hover,
.wp-child-theme-vpe-refresh .vpe-masthead a.btn_orange:hover { background: #855A0D; }
.wp-child-theme-vpe-refresh .content_left a.btn_orange,
.wp-child-theme-vpe-refresh .content_right a.btn_orange,
.wp-child-theme-vpe-refresh .pages a,
.wp-child-theme-vpe-refresh .pages span,
.wp-child-theme-vpe-refresh .btn-topsearch {
  background: var(--vpe-teal-700);
  color: #fff;
  border: 0;
}

/* Their: .tags span { background:#3e9286 } and .tags span:before { border-color }
   This is the old price pennant. Flatten it so p.post-price can be the figure. */
.wp-child-theme-vpe-refresh .tags.price-wrap span,
.wp-child-theme-vpe-refresh .tags.price-wrap .tag-head {
  background: none;
  border: 0;
}
.wp-child-theme-vpe-refresh .tags.price-wrap span:before,
.wp-child-theme-vpe-refresh .tags.price-wrap span:after {
  display: none;
  content: none;
  border-color: transparent;
}

/* Their: .header_top { background } + .header_top .header_top_res p a */
.wp-child-theme-vpe-refresh .header_top { background: var(--vpe-teal-900); }
.wp-child-theme-vpe-refresh .header_top .header_top_res p,
.wp-child-theme-vpe-refresh .header_top .header_top_res p a { color: #D6E7E5; }
.wp-child-theme-vpe-refresh .header_top .header_top_res p a:hover { color: #fff; }

/* Their: .footer, .footer_main_res div.column ... */
.wp-child-theme-vpe-refresh .footer,
.wp-child-theme-vpe-refresh .footer_main { background: var(--vpe-teal-900); }
.wp-child-theme-vpe-refresh .footer_main_res div.column,
.wp-child-theme-vpe-refresh .footer_main_res div.column a,
.wp-child-theme-vpe-refresh .footer_main_res div.column ul li a { color: #D6E7E5; }
.wp-child-theme-vpe-refresh .footer_main_res div.column h1,
.wp-child-theme-vpe-refresh .footer_main_res div.column h2,
.wp-child-theme-vpe-refresh .footer_main_res div.column h3 { color: #fff; }

/* =============================================================================
   §5  POPUP MAKER — popup #7857 "Verified Status"

   The seller notice is owned by the Popup Maker plugin, not by this theme.
   Copy, triggers and frequency stay editable in Popup Maker; only its
   appearance is changed here.

   !important is unavoidable throughout this section: Popup Maker writes its
   theme styling as INLINE styles on the container and title elements, and an
   inline style cannot be beaten by specificity alone.

   The #pum-7857 id scopes every rule to this one popup, so nothing here can
   affect any popup added later.
   ============================================================================= */

/* Overlay */
#pum-7857 {
  background-color: rgba(8,22,25,.62) !important;
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}

/* Container */
#pum-7857 .pum-container {
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
  padding: 0 !important;
  max-width: 620px !important;
  width: calc(100% - 32px) !important;
  font-family: var(--vpe-sans) !important;
  overflow: hidden;
}

/* Title bar */
#pum-7857 .pum-title {
  margin: 0 !important;
  padding: 16px 52px 16px 20px !important;
  background: var(--vpe-gold-bg) !important;
  border-bottom: 1px solid var(--vpe-gold-line) !important;
  color: #4E360A !important;
  font-family: var(--vpe-sans) !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  letter-spacing: -.2px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-shadow: none !important;
}

/* Body */
#pum-7857 .pum-content {
  padding: 18px 20px 20px !important;
  color: var(--vpe-ink-2) !important;
  font-family: var(--vpe-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
#pum-7857 .pum-content p {
  margin: 0 0 12px !important;
  font-family: var(--vpe-sans) !important;
  font-size: 14.5px !important;
  font-style: normal !important;
  color: var(--vpe-ink-2) !important;
  line-height: 1.6 !important;
}
#pum-7857 .pum-content p:last-child { margin-bottom: 0 !important; }
#pum-7857 .pum-content a {
  color: var(--vpe-teal-700) !important;
  font-weight: 650;
  text-decoration: underline;
}
#pum-7857 .pum-content hr {
  border: 0;
  border-top: 1px solid var(--vpe-line);
  margin: 14px 0;
}

/* The fraud warning. In the current popup this is a run of italic red text.
   Boxing it makes it read as a caution rather than as decoration — and italic
   red at body length is genuinely hard to read.

   Popup Maker's editor marks it up as italic, so we can target that directly
   without you having to re-edit the popup content. */
#pum-7857 .pum-content em,
#pum-7857 .pum-content i {
  display: block;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--vpe-radius-sm);
  background: var(--vpe-danger-bg);
  border: 1px solid #EBD3D1;
  border-left: 3px solid var(--vpe-danger);
  color: #6D2C28 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* Close button */
#pum-7857 .pum-close {
  top: 11px !important;
  right: 11px !important;
  left: auto !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.72) !important;
  color: #6B4A0C !important;
  font-family: var(--vpe-sans) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#pum-7857 .pum-close:hover { background: #fff !important; }

@media screen and (max-width: 600px) {
  #pum-7857 .pum-container { border-radius: 12px !important; }
  #pum-7857 .pum-title { font-size: 15.5px !important; padding: 14px 48px 14px 16px !important; }
  #pum-7857 .pum-content { padding: 16px !important; font-size: 14px !important; }
}
