/* =========================================================
   vietisrael.com — VietPlan (trip-planning tool) styles
   ISOLATED FEATURE: only vietplan.html loads this file. Removing this
   file + vietplan.html + js/vietplan.js + data/vietplan-data.js fully
   removes VietPlan with zero effect on any other page.
   Reuses the site's existing CSS custom properties (--green-*, --ink,
   --radius, --shadow, etc.) defined in css/style.css, which must be
   loaded first.
   ========================================================= */

.vp-screen{display:none;}
.vp-screen.active{display:block;}

.vp-summary-extra{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:13.5px;color:#555;}
.vp-summary-extra p{margin:4px 0;}

/* ---------- Page head (top of Step 1) ----------
   The standalone intro/gate screen was removed by request, but the page's
   single <h1> and its short marketing line moved here so the page keeps its
   indexable text without adding a step. Deliberately compact — this sits
   directly above the first question, it is not a landing block. */
.vp-page-head{text-align:center;margin:0 0 22px;}
.vp-page-breadcrumb{display:flex;justify-content:center;margin-bottom:10px;}
.vp-page-head h1{font-size:clamp(20px,3.2vw,27px);line-height:1.3;margin:0 0 8px;}
.vp-page-sub{max-width:640px;margin:0 auto 8px;color:var(--ink-soft);font-size:14.5px;}
.vp-page-note{margin:0;font-size:12.5px;color:var(--ink-soft);}

/* ---------- Wizard shell ---------- */
#vp-wizard{padding-bottom:110px;}
/* overflow-x is intentionally NOT auto here — with short one-word tab
   labels, all 5 tabs must fit in one row with no horizontal scrolling,
   on any phone width, per explicit mobile requirement. */
#vp-tabs{
  position:sticky;top:64px;z-index:40;background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;overflow-x:hidden;gap:2px;padding:10px 8px;
}
/* Tabs must LOOK tappable and switchable, not like a passive progress bar.
   Reported problem: "לא ברור שאפשר לעבור ביניהם". They were always
   clickable in JS — the affordance was missing. Now: a visible surface +
   border on every enabled tab, a filled active tab, a ✓ on completed
   ones, and a clear locked style. */
.vp-tab-btn{
  flex:1;min-width:0;background:var(--white);border:1.5px solid var(--border);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;border-radius:10px;color:var(--ink-soft);font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,background .15s,color .15s;
}
.vp-tab-btn:not([disabled]):hover{border-color:var(--green-pastel);background:var(--green-50);}
@media(max-width:360px){
  .vp-tab-btn{font-size:11px;padding:7px 2px;}
  .vp-tab-btn .vp-tab-num{width:20px;height:20px;font-size:11px;}
}

/* Note explaining the nights range on the route step */
.vp-nights-note{
  background:var(--green-50);border:1px solid var(--green-200);border-radius:10px;
  padding:12px 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 16px;
}
.vp-tab-btn .vp-tab-num{
  width:24px;height:24px;border-radius:50%;background:var(--green-100);color:var(--green-darker);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
/* Active = filled, unmistakably the current tab */
.vp-tab-btn.active{
  color:#fff;background:var(--green-dark);border-color:var(--green-dark);
  box-shadow:0 2px 8px rgba(53,107,76,.25);
}
.vp-tab-btn.active .vp-tab-num{background:#fff;color:var(--green-darker);}

/* Completed = green outline + checkmark, signalling "you can go back here" */
.vp-tab-btn.done:not(.active){border-color:var(--green-pastel);color:var(--green-darker);}
.vp-tab-btn.done:not(.active) .vp-tab-num{background:var(--green-dark);color:#fff;}
.vp-tab-btn.done:not(.active) .vp-tab-num::after{content:"✓";font-size:12px;}
.vp-tab-btn.done:not(.active) .vp-tab-num{font-size:0;} /* hide digit, show ✓ */

/* Locked = visibly inert, with a lock hint instead of just faded text */
.vp-tab-btn[disabled]{opacity:.5;cursor:not-allowed;background:var(--bg);border-style:dashed;}

/* Each top-level "screen" of the flow (settings / destinations / route /
   submit) — exactly ONE is visible at a time. This is the rule that was
   previously MISSING, which caused every step to render stacked on top of
   each other with no way to collapse the ones you weren't on. */
.vp-step{display:none;max-width:760px;margin:0 auto;padding:28px 18px 10px;}
.vp-step.active{display:block;}
.vp-step h2{font-size:22px;margin-bottom:6px;}
.vp-step .vp-step-intro{color:var(--ink-soft);margin-bottom:22px;}

/* ---------- Choice chips / cards ---------- */
.vp-chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:22px;}
.vp-chip{
  background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 12px;text-align:center;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);
  transition:border-color .15s,background .15s;
}
.vp-chip:hover{border-color:var(--green-pastel);}
.vp-chip.selected{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}
.vp-chip .vp-chip-icon{font-size:22px;display:block;margin-bottom:4px;}
.vp-chip.vp-chip-neutral{color:var(--ink-soft);border-style:dashed;}
.vp-chip.vp-chip-neutral.selected{color:var(--green-darker);border-style:solid;}

.vp-field-block{margin-bottom:22px;}
.vp-field-block label.vp-field-label{display:block;font-weight:700;margin-bottom:8px;}

/* "Includes infant" checkbox — Step 1/Basics. */
.vp-infant-check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;cursor:pointer;}
.vp-infant-check input{margin-top:3px;width:18px;height:18px;flex-shrink:0;cursor:pointer;}

.vp-style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px;}
.vp-style-card{
  position:relative;background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 10px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.vp-style-card .vp-style-icon{font-size:26px;display:block;margin-bottom:6px;}
.vp-style-card .vp-style-label{font-weight:600;font-size:13.5px;}
.vp-style-card.selected{border-color:var(--green-dark);background:var(--green-50);}
.vp-style-card.selected::after{
  content:"✓";position:absolute;top:6px;left:6px;background:var(--green-dark);color:#fff;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;
}
.vp-style-card[data-locked="true"]{opacity:.4;cursor:not-allowed;}
.vp-style-count-note{font-size:13px;color:var(--ink-soft);font-weight:600;margin:0 0 10px;}

/* Preference "doesn't matter / I have a preference" pairs — replaces plain
   on/off switches so every preference explicitly offers a neutral choice. */
.vp-pref-group{margin-bottom:16px;}
.vp-pref-group .vp-pref-label{font-weight:700;font-size:14.5px;margin-bottom:8px;display:block;}
.vp-pref-chips{display:flex;gap:8px;flex-wrap:wrap;}
.vp-pref-chip{
  flex:1;min-width:140px;background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;text-align:center;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink);
  transition:border-color .15s,background .15s;
}
.vp-pref-chip.selected{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}
.vp-pref-chip.vp-pref-neutral{border-style:dashed;color:var(--ink-soft);}
.vp-pref-chip.vp-pref-neutral.selected{border-style:solid;color:var(--green-darker);}

.vp-more-prefs-toggle{background:none;border:none;color:var(--green-darker);font-weight:600;cursor:pointer;padding:6px 0;font-size:14px;}
.vp-more-prefs{display:none;margin-top:10px;}
.vp-more-prefs.open{display:block;}

/* ---------- Loading overlay ---------- */
#vp-loading-overlay{
  position:fixed;inset:0;background:rgba(251,253,251,.94);z-index:200;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:20px;
}
#vp-loading-overlay.open{display:flex;}
.vp-spinner{width:46px;height:46px;border:4px solid var(--green-100);border-top-color:var(--green-dark);border-radius:50%;animation:vp-spin 0.9s linear infinite;}
@keyframes vp-spin{to{transform:rotate(360deg);}}

/* ---------- Step 2: destination cards ---------- */
.vp-dest-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:18px;}
.vp-dest-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.vp-dest-card img{width:100%;height:130px;object-fit:cover;}
.vp-dest-card .vp-dest-body{padding:12px 14px 14px;}
.vp-dest-card h3{font-size:16.5px;margin:0 0 4px;display:flex;align-items:center;gap:8px;}
.vp-dest-card .vp-dest-order{background:var(--green-dark);color:#fff;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.vp-dest-card .vp-dest-nights{font-size:13px;color:var(--green-darker);font-weight:700;margin-bottom:6px;}
.vp-dest-card p{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;}
.vp-dest-card .vp-dest-getting-there{font-size:12.5px;color:var(--ink-soft);margin:0 0 10px;padding-top:8px;border-top:1px dashed var(--border);}
.vp-dest-card .vp-dest-getting-there strong{color:var(--ink);}
.vp-dest-card .vp-dest-season-note{font-size:12.5px;color:#8a5a1e;background:#fdf3e3;border:1px solid #f0dcb3;border-radius:8px;padding:8px 10px;margin:0 0 10px;}
.vp-dest-card .vp-dest-season-note a{color:#8a5a1e;font-weight:700;}
.vp-dest-card .vp-dest-actions{display:flex;gap:8px;}

.vp-add-dest-card{
  display:flex;align-items:center;justify-content:center;min-height:180px;border:2px dashed var(--border);
  border-radius:var(--radius);cursor:pointer;color:var(--green-darker);font-weight:700;background:var(--green-50);
  text-align:center;padding:14px;
}

.vp-more-link{background:none;border:none;color:var(--green-darker);font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 0;font-size:14.5px;}

/* ---------- Step 3: route screen ---------- */
.vp-route-title{font-size:20px;margin-bottom:4px;}
.vp-route-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.vp-route-meta span{background:var(--green-100);color:var(--green-darker);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;}
.vp-warning-banner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;margin-bottom:16px;}

.vp-quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}

.vp-route-layout{display:flex;flex-direction:column;gap:18px;}
@media(min-width:900px){
  .vp-route-layout{flex-direction:row;align-items:flex-start;}
  .vp-route-map-col{flex:1;position:sticky;top:130px;}
  .vp-route-days-col{flex:1;max-height:none;}
}
.vp-route-map-col #vp-map{height:380px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.vp-map-label{background:var(--white);border:1px solid var(--green-dark);border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:700;color:var(--green-darker);box-shadow:0 1px 4px rgba(0,0,0,.12);}

/* Mobile map/days switch */
.vp-mobile-switch{display:flex;gap:8px;background:var(--green-50);border-radius:999px;padding:4px;margin-bottom:12px;border:1px solid var(--border);}
.vp-mobile-switch button{flex:1;border:1px solid var(--border);background:#fff;padding:10px 0;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-soft);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.vp-mobile-switch button.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark);box-shadow:none;}
@media(min-width:900px){.vp-mobile-switch{display:none;}}
@media(max-width:899px){
  .vp-route-map-col,.vp-route-days-col{display:none;}
  .vp-route-map-col.vp-mobile-active,.vp-route-days-col.vp-mobile-active{display:block;}
  .vp-route-map-col #vp-map{height:300px;}
}

.vp-day-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;cursor:default;}
.vp-day-card .vp-day-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.vp-day-card .vp-day-order{background:var(--green-dark);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;}
.vp-day-card h4{margin:0;font-size:16px;}
.vp-day-card .vp-day-nights{font-size:12.5px;color:var(--green-darker);font-weight:700;}
/* +/- nights stepper \u2014 lets a visitor fine-tune each stop's night count by
   hand and SEE it change immediately (fixes "\u05db\u05e4\u05ea\u05d5\u05e8 \u05d4\u05d5\u05e1\u05e4\u05ea \u05d9\u05d5\u05dd \u05d7\u05d5\u05e4\u05e9\u05d9 \u05dc\u05d0 \u05e2\u05d5\u05d1\u05d3": the
   quick-action buttons updated an internal number nothing on screen showed). */
.vp-day-nights-control{display:flex;align-items:center;gap:8px;margin-top:2px;}
.vp-nights-btn{
  width:24px;height:24px;border-radius:50%;border:1.5px solid var(--green-dark);background:#fff;
  color:var(--green-darker);font-weight:800;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.vp-nights-btn:hover:not(:disabled){background:var(--green-50);}
.vp-nights-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border);color:var(--ink-soft);}
.vp-day-card .vp-day-transfer{font-size:12.5px;color:var(--ink-soft);margin:6px 0;padding-right:36px;}
/* Short 2-3 line teaser shown before the card is expanded — keeps the
   days list scannable on mobile instead of dumping every detail at once. */
.vp-day-teaser{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0;padding-right:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vp-day-teaser strong{color:var(--ink);}
.vp-day-attractions-label{font-weight:700;font-size:13px;margin:0 0 4px;}
.vp-day-attraction{margin:6px 0 0;padding-right:36px;}
.vp-day-attraction a{font-size:12.5px;font-weight:700;color:var(--green-darker);text-decoration:underline;}
.vp-day-details{display:none;margin-top:8px;padding-right:36px;font-size:13.5px;color:var(--ink-soft);}
.vp-day-details.open{display:block;}
.vp-day-details ul{margin:6px 0 0;}
.vp-day-toggle{background:none;border:none;color:var(--green-darker);font-weight:700;cursor:pointer;padding:2px 0;font-size:13px;margin-right:36px;margin-top:6px;}
.vp-day-actions{display:flex;gap:8px;margin-top:8px;}

/* Sticky send bar — mobile-only requirement: the send/submit action must
   stay fixed at the bottom of the screen on the Route step, which can be
   long enough to scroll the real "שלחו את הטיוטה לייעוץ" button out of
   view. Desktop already keeps that button reachable without scrolling
   away from context, so the sticky duplicate is hidden there. */
.vp-sticky-cta{
  position:fixed;bottom:0;right:0;left:0;background:var(--white);border-top:1px solid var(--border);
  padding:12px 16px;z-index:50;box-shadow:0 -6px 18px rgba(32,48,42,.08);
}
@media(min-width:900px){.vp-sticky-cta{display:none !important;}}

/* Post-route "want to change how you transfer?" panel — reuses the same
   .vp-pref-group/.vp-pref-chips styling as Step 2's single travel-style
   question, opened on demand instead of always taking up space. */
.vp-transport-edit-panel{background:var(--green-50);border-radius:var(--radius-sm);padding:12px 14px;margin-top:-6px;margin-bottom:18px;}

/* ---------- Step 5: submit ---------- */
.vp-draft-disclaimer{background:var(--warn-bg,#fff7e6);border:1px solid var(--warn-border,#f0d38a);color:var(--warn-text,#7a5b12);border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;margin-bottom:16px;line-height:1.5;}
.vp-summary-recap{background:var(--green-50);border-radius:var(--radius-sm);padding:14px;margin-bottom:20px;font-size:13.5px;}
.vp-summary-recap ol{margin:6px 0 0;padding-right:18px;}

/* ---------- Step 4: compact layout ----------
   Step 4 was the longest screen on a phone (recap + 4 fields + 3 buttons).
   The contact fields are now a 2-up grid on wider screens — the same fields,
   just not one-per-row — and every control uses the same compact sizing. */
.vp-input{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  font-family:inherit;font-size:14px;
}
textarea.vp-input{resize:vertical;}
.error-msg{display:none;color:#b03434;font-size:12.5px;margin-top:4px;}
.vp-contact-grid{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:640px){
  .vp-contact-grid{grid-template-columns:1fr 1fr;column-gap:16px;}
  .vp-contact-grid .vp-field-block{margin-bottom:16px;}
}
.vp-submit-actions{flex-direction:column;gap:10px;margin-top:16px;}
.vp-submit-actions .small-muted{text-align:center;margin:0;}

/* ---------- Step 4: what the package includes (a LIST, not a choice) ----------
   ⚠️ This replaced the optional "which services?" checkbox grid (#154). The
   checkboxes invited the visitor to assemble a part-plan, which is not what we
   sell — the quoted price is for a complete plan — so the block now STATES the
   scope. It stays as compact as the old grid (explicit mobile requirement), but
   as a single-column list of ticks it is actually shorter than six chips. */
.vp-services-block{
  background:var(--green-50);border:1px solid var(--green-200);
  border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:18px;
}
.vp-services-title{margin:0 0 6px;font-size:14.5px;color:var(--green-darker);}
.vp-services-help{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.vp-services-help strong{color:var(--green-darker);}
.vp-services-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
}
@media(max-width:380px){.vp-services-list{grid-template-columns:1fr;}}
.vp-services-list li{
  display:flex;align-items:flex-start;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;
}
/* A drawn tick rather than an emoji: it renders identically on every phone and
   cannot be mistaken for a checkbox the visitor is meant to press. */
.vp-services-list li::before{
  content:"";flex-shrink:0;width:15px;height:15px;margin-top:1px;
  border-radius:50%;background:var(--green-dark);
  background-image:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
}
.vp-services-note{
  margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft);
  border-top:1px dashed var(--green-200);padding-top:8px;
}

#vp-done-screen{text-align:center;padding:70px 18px;}
#vp-done-screen .vp-done-icon{font-size:52px;margin-bottom:14px;}
/* The completion screen's heading is an <h2> so the page keeps exactly one <h1>
   (the wizard head at the top of Step 1, which matches the <title>). 2em keeps
   the default h1 size it had before, so nothing moves visually. */
#vp-done-screen .vp-done-title{font-size:2em;}

/* ---------- Step 4: the package price estimate ----------
   Ported from the temporary standalone simulator page, which is now deleted.
   The rules that matter, kept deliberately identical to the ones approved
   there:

   • THE TWO TIERS SHARE ONE BOX GEOMETRY. `.vp-price-tier` carries the
     padding, border and radius; the premium rule adds a SKIN only (champagne
     background, gold edge). Giving the premium row its own padding made the
     standard range measure wider than the premium one — the owner's report
     (#152), fixed by sharing the geometry instead of the values.
   • The day range sits UNDER the tiers, never beside them.
   • Only customer ranges are rendered here; no cost colour language exists. */
.vp-price-block{
  background:var(--white);border:1px solid var(--green-200);border-radius:var(--radius-sm);
  padding:14px;margin-bottom:18px;
}
.vp-price-title{margin:0 0 3px;font-size:16px;}
.vp-price-sub{margin:0 0 10px;font-size:12.5px;color:var(--ink-soft);}

.vp-price-tiers{display:grid;grid-template-columns:1fr;gap:7px;}
.vp-price-tier{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 11px;border:1px solid var(--green-200);border-radius:var(--radius-sm);
  background:var(--green-50);
}
.vp-price-tier[hidden]{display:none;}
/* ⚠️ The tier NAME is a customer-facing label, not a footnote (#154, explicit
   owner request): "סטנדרט" and "פרימיום" are the two choices being compared, so
   they must be readable at the same glance as the prices beside them. The old
   12px made the label look like a caption for the number. Note this is a SKIN
   change only — the two tiers still share one box geometry (see above), so
   enlarging the label cannot re-open the unequal-width bug fixed in #152. */
.vp-price-tier-label{
  font-size:14.5px;font-weight:700;color:var(--green-dark);white-space:nowrap;
  letter-spacing:.01em;
}
.vp-price-tier-value{
  font-size:clamp(16px,4.7vw,22px);font-weight:700;color:var(--green-darker);
  letter-spacing:-.4px;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:transform .18s ease,color .18s ease;
}
.vp-price-dash{margin:0 3px;font-weight:500;}
/* Skin only — no padding, no border-width, no radius. See the note above. */
.vp-price-tier.is-premium{
  background:linear-gradient(160deg,#fffdf6 0%,#fbf1dc 100%);border-color:#ecdcb4;
}
.vp-price-tier.is-premium .vp-price-tier-label{color:#8a6a1e;}
.vp-price-tier.is-premium .vp-price-tier-value{
  background:linear-gradient(92deg,#7d5010 0%,#c9962f 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#8a5a12;   /* fallback where background-clip:text is unsupported */
}
.vp-price-tier.is-premium .vp-price-dash{
  background:none;-webkit-text-fill-color:#c9962f;color:#c9962f;font-weight:600;
}
/* The numbers brighten for a moment as the days change — on a phone the
   slider is under the finger and the digits are what actually move. */
.vp-price-tiers.is-live .vp-price-tier-value{transform:scale(1.03);}

.vp-price-legend{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
.vp-price-legend[hidden]{display:none;}
.vp-price-meta{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);}

.vp-price-days{margin-top:11px;padding-top:10px;border-top:1px dashed var(--border);}
.vp-price-days-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
/* ⚠️ THE DAYS NUMBER IS THE POINT OF THIS ROW (#154, explicit owner request):
   the question it answers is "how does the price move with LENGTH", so the
   length must be the loudest thing here — not a detail appended to a sentence.
   Hence: the digits are the largest text in the whole price block (comparable
   to the price figures themselves), in a tabular-numeric face so the width does
   NOT jitter as the slider moves from 9 to 10 days. The unit stays small and
   quiet next to it, which is what makes the number read as THE number.
   Scoped to the specific class, never to the label's every `span` (the old
   `.vp-price-days-label span` rule would have inflated the unit too). */
.vp-price-days-num{
  font-size:clamp(20px,5.6vw,26px);font-weight:800;color:var(--green-darker);
  letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  line-height:1; vertical-align:-1px;
}
.vp-price-days-unit{
  font-size:13px;font-weight:700;color:var(--green-dark);margin-inline-start:3px;
}
.vp-price-days-row{display:flex;align-items:center;gap:10px;}
#vp-price-range{flex:1;min-width:0;accent-color:var(--green-dark);height:28px;cursor:pointer;}
.vp-price-reset{
  border:none;background:none;padding:4px 0;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--green-dark);text-decoration:underline;
  white-space:nowrap;flex-shrink:0;
}
.vp-price-reset[hidden]{display:none;}

.vp-price-disclaimer{
  margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);
  background:#fffdf3;border:1px solid #f0e2b8;border-radius:var(--radius-sm);padding:8px 10px;
}
@media (prefers-reduced-motion:reduce){
  .vp-price-tiers.is-live .vp-price-tier-value{transform:none;}
  .vp-price-tier-value{transition:none;}
}

/* ---------- Picker modal ---------- */"}]
.vp-modal{position:fixed;inset:0;background:rgba(20,30,26,.5);z-index:150;display:none;align-items:flex-end;justify-content:center;}
.vp-modal.open{display:flex;}
@media(min-width:700px){.vp-modal{align-items:center;}}
.vp-modal-panel{background:#fff;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:18px;}
@media(min-width:700px){.vp-modal-panel{border-radius:var(--radius);}}
.vp-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.vp-modal-head h3{margin:0;font-size:17px;}
.vp-modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-soft);}
.vp-picker-search{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;font-size:14px;}
.vp-picker-regions{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;}
.vp-picker-regions button{white-space:nowrap;border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-soft);}
.vp-picker-regions button.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark);}
.vp-picker-item{display:flex;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--green-50);}
.vp-picker-item img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.vp-picker-item .vp-picker-info{flex:1;min-width:0;}
.vp-picker-item .vp-picker-info h4{margin:0 0 2px;font-size:14.5px;}
.vp-picker-item .vp-picker-info p{margin:0;font-size:12.5px;color:var(--ink-soft);}
.vp-picker-empty{text-align:center;color:var(--ink-soft);padding:30px 10px;font-size:14px;}

/* ---------- Small utility ---------- */
.vp-msg-box{background:var(--green-50);border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;white-space:pre-wrap;font-family:inherit;color:var(--ink);margin-bottom:14px;text-align:right;max-height:220px;overflow-y:auto;}