/* Reventals price tables and rental calculator.
   Generated from estimator-template.html and build-estimator.py's TABLE_CSS.
   Every selector is scoped to .rv-estimator or .rv-prices so nothing reaches
   the theme. Edit the sources, not this file. */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&family=Roboto:wght@400;500;700&family=Source+Serif+4:ital,opsz,wght@1,8..60,400;1,8..60,600&display=swap");

.rv-estimator{
  /* ── Reventals tokens ───────────────────── */
  --turquoise:#00B1B8; --teal:#009297;
  --turquoise-100:#CDF2F3; --turquoise-200:#A7F5F7; --turquoise-300:#5CD0D4;
  --turquoise-700:#009297; --turquoise-900:#004358;
  --fizz:#00D0D4; --lime-100:#F2FAD2; --lime-200:#DFF48F;
  --charcoal:#3D454C;
  --base-100:#FFFFFF; --base-200:#F0F2F2; --base-300:#E7EAEA;
  --base-400:#C9CFD3; --base-600:#818D98;
  --font-head:"Heebo",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;
  --font-accent:"Source Serif 4",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.3,1);

  background:var(--base-100);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:0;
}
.rv-estimator *{box-sizing:border-box;}
/* Fill the post content column so the block lines up with the paragraphs
   around it (Haley, 2026-08-21). Previously boxed to 525px by the Elementor
   container, which is gone now that this renders as a shortcode. */
.rv-estimator .wrap{max-width:100%;margin:0 auto;}

/* ── Intro ─────────────────────────────────── */
.rv-estimator header{padding:8px 0 0;}
.rv-estimator .rv-title{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(30px,4.6vw,40px);line-height:1.06;letter-spacing:-.03em;
  color:var(--charcoal);margin:0 0 16px;max-width:24ch;text-wrap:pretty;
}
.rv-estimator .sub{
  margin:0;font-size:19px;line-height:1.45;color:var(--charcoal);
  text-wrap:pretty;
}

/* ── Guest count panel ─────────────────────── */
.rv-estimator .card{
  position:relative;overflow:hidden;
  background:var(--turquoise-100);
  border-radius:24px;
  padding:22px 24px 24px;
  margin:26px 0 0;
}
.rv-estimator .card .shape{
  position:absolute;right:-90px;bottom:-120px;width:280px;height:280px;
  fill:var(--turquoise-200);pointer-events:none;
}
.rv-estimator .q{position:relative;display:flex;flex-direction:column;gap:14px;}
.rv-estimator .q-label{
  font-family:var(--font-head);font-weight:700;font-size:21px;line-height:1.15;
  letter-spacing:-.03em;color:var(--turquoise-900);max-width:22ch;
}
.rv-estimator .guests{display:flex;align-items:center;gap:18px;}
.rv-estimator input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:28px;margin:0;
}
.rv-estimator input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:var(--base-100);
}
.rv-estimator input[type=range]::-moz-range-track{
  height:8px;border-radius:999px;background:var(--base-100);
}
.rv-estimator input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:999px;
  background:var(--turquoise);border:4px solid var(--base-100);
  margin-top:-10px;cursor:pointer;transition:background .12s var(--ease);
}
.rv-estimator input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:999px;
  background:var(--turquoise);border:4px solid var(--base-100);cursor:pointer;
}
.rv-estimator input[type=range]:hover::-webkit-slider-thumb{background:var(--teal);}
.rv-estimator input[type=range]:focus-visible{outline:none;}
.rv-estimator input[type=range]:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--turquoise-900);outline-offset:2px;
}
.rv-estimator .gnum{
  font-family:var(--font-head);font-weight:800;font-size:38px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  min-width:4ch;text-align:right;color:var(--turquoise-900);
}

/* ── The answer ──────────────────────────────
   Was position:sticky / top:0 / z-index:5. That suited a standalone page, but
   inside a post it detaches the price box and pins it over the article, with a
   z-index that can fight a sticky theme header. Removed 2026-08-21 so the block
   stays in the flow of the post. */
.rv-estimator .answer{
  /* position:relative replaces the containing block that position:sticky used
     to provide. Without it the decorative .shape inside escapes and positions
     against whatever the theme has positioned, or the viewport. */
  position:relative;
  margin:14px 0 0;padding:26px 26px 22px;
  background:var(--turquoise-900);
  border-radius:24px;
  overflow:hidden;
}
.rv-estimator .answer .shape{
  position:absolute;right:-120px;top:-90px;width:320px;height:320px;
  fill:var(--turquoise-700);opacity:.55;pointer-events:none;
}
.rv-estimator .answer>p{position:relative;}
.rv-estimator .a-lead{
  font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.2;
  letter-spacing:-.01em;color:var(--turquoise-200);margin:0 0 7px;
}
.rv-estimator .a-range{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(34px,6.5vw,48px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--fizz);margin:0;
}
.rv-estimator .a-per{
  font-family:var(--font-body);font-size:15px;color:var(--turquoise-200);
  margin:10px 0 0;font-variant-numeric:tabular-nums;
}
.rv-estimator .a-excl{
  font-size:14px;line-height:1.5;color:var(--turquoise-200);
  margin:16px 0 0;padding-top:13px;
  border-top:1px solid rgba(167,245,247,.32);
}

/* ── Why a range ───────────────────────────── */
.rv-estimator .why{
  margin:10px 0 0;padding:16px 18px;
  background:var(--lime-100);border-radius:16px;
  font-size:15px;line-height:1.5;color:var(--charcoal);
}
.rv-estimator .why b{font-weight:700;}

/* ── Section heading ───────────────────────── */
.rv-estimator .h2row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin:36px 0 6px;
}
.rv-estimator .h2lock{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
.rv-estimator .h2accent{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  font-size:28px;line-height:1.05;letter-spacing:-.04em;
  color:var(--turquoise);margin:0;
}
.rv-estimator .h2sep{
  font-family:var(--font-head);font-weight:400;font-size:22px;line-height:1.05;
  color:var(--base-400);
}
.rv-estimator .h2row h3{
  font-family:var(--font-head);font-weight:800;font-size:24px;line-height:1.05;
  letter-spacing:-.03em;color:var(--charcoal);margin:0;
}.rv-estimator .h2note{margin:0 0 14px;font-size:15px;color:var(--base-600);}
.rv-estimator .btn-reset{
  font-family:var(--font-body);font-weight:500;font-size:14px;
  background:none;border:2px solid var(--turquoise);color:var(--turquoise);
  padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.rv-estimator .btn-reset:hover{background:var(--turquoise-100);}
.rv-estimator .btn-reset:active{transform:scale(.97);}
.rv-estimator .btn-reset:focus-visible{outline:2px solid var(--turquoise);outline-offset:2px;}

/* ── Item rows ─────────────────────────────── */
.rv-estimator .list{display:flex;flex-direction:column;gap:6px;}
.rv-estimator details.item{
  background:var(--base-100);
  border:1px solid var(--base-300);
  border-radius:16px;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.rv-estimator details.item[data-on="1"]{
  background:var(--turquoise-100);border-color:var(--turquoise-300);
}
.rv-estimator details.item>summary{
  list-style:none;cursor:pointer;padding:13px 18px;
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
}
.rv-estimator details.item>summary::-webkit-details-marker{display:none;}
.rv-estimator .i-check{
  accent-color:var(--turquoise);width:20px;height:20px;cursor:pointer;
}
.rv-estimator .i-check:focus-visible{outline:2px solid var(--turquoise);outline-offset:2px;}
.rv-estimator .i-name{
  font-family:var(--font-head);font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:var(--charcoal);
}
.rv-estimator .i-price{
  font-family:var(--font-body);font-weight:500;font-size:15px;
  color:var(--turquoise-900);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rv-estimator .caret{
  color:var(--base-600);font-size:11px;transition:transform .2s var(--ease);
}
.rv-estimator details.item[open] .caret{transform:rotate(90deg);}
.rv-estimator .i-body{
  padding:0 18px 16px 50px;font-size:15.5px;line-height:1.5;color:var(--charcoal);
}
.rv-estimator .i-body p{margin:0 0 8px;}
.rv-estimator .i-body p:last-child{margin:0;}
.rv-estimator .i-body a{color:var(--turquoise);text-decoration:underline;}
.rv-estimator .i-body a:hover{color:var(--teal);}
.rv-estimator .i-qty{font-weight:500;color:var(--base-600);font-size:14.5px;}
.rv-estimator .i-pick{display:block;margin-top:12px;font-size:15px;color:var(--charcoal);}
.rv-estimator .i-pick select{
  margin-left:8px;font:inherit;font-family:var(--font-body);
  padding:7px 11px;border:1.5px solid var(--base-400);border-radius:8px;
  background:var(--base-100);color:var(--charcoal);max-width:100%;cursor:pointer;
}
.rv-estimator .i-pick select:focus-visible{
  outline:2px solid var(--turquoise);outline-offset:2px;border-color:var(--turquoise);
}

/* ── CTA ───────────────────────────────────── */
.rv-estimator .cta{
  position:relative;overflow:hidden;
  margin-top:32px;padding:28px 26px;border-radius:24px;
  background:var(--lime-200);
  display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
}
.rv-estimator .cta .shape{
  position:absolute;left:-70px;bottom:-130px;width:240px;height:240px;
  fill:var(--turquoise);opacity:.22;pointer-events:none;
}
.rv-estimator .cta p{
  position:relative;margin:0;color:var(--charcoal);
  font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.15;
  letter-spacing:-.03em;max-width:24ch;
}
.rv-estimator .btn{
  position:relative;font-family:var(--font-body);font-weight:500;font-size:17px;
  background:var(--turquoise);color:var(--base-100);border:none;
  padding:13px 28px;border-radius:999px;cursor:pointer;
  /* the CTA is an <a>, not a <button>: anchors are inline and underlined by default */
  display:inline-block;text-decoration:none;text-align:center;
  transition:background .12s var(--ease),transform .12s var(--ease);
}
.rv-estimator a.btn:hover{color:var(--base-100);text-decoration:none;}
.rv-estimator .btn:hover{background:var(--teal);}
.rv-estimator .btn:active{transform:scale(.97);}
.rv-estimator .btn:focus-visible{outline:2px solid var(--turquoise-900);outline-offset:2px;}

/* ── Fine print ────────────────────────────── */
.rv-estimator .fine{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--base-300);
  font-size:14px;line-height:1.5;color:var(--base-600);
}
.rv-estimator .fine p{margin:0 0 10px;}
.rv-estimator .fine p:last-child{margin:0;}
.rv-estimator .fine strong{color:var(--charcoal);font-weight:700;}

@media (max-width:600px){
  .rv-estimator .sub{font-size:18px;}
  .rv-estimator .card,.rv-estimator .answer,.rv-estimator .cta{padding-left:20px;padding-right:20px;}
  .rv-estimator .h2row{flex-direction:column;align-items:flex-start;gap:14px;}
  .rv-estimator .i-body{padding-left:20px;}
}

/* ── price tables ── */
.rv-prices{--rv-ink:#3D454C;--rv-teal:#009297;--rv-teal-100:#CDF2F3;--rv-rule:#E7EAEA;
  --rv-faint:#818D98;
  --rv-head:"Heebo",system-ui,sans-serif;--rv-body:"Roboto",system-ui,sans-serif;
  color:var(--rv-ink);font-family:var(--rv-body);line-height:1.5;}
.rv-prices *{box-sizing:border-box;}
.rv-prices h3.rv-h{font-family:var(--rv-head);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--rv-ink);margin:30px 0 8px;padding:0;border:0;
  text-transform:none;}
.rv-prices h3.rv-h:first-of-type{margin-top:4px;}
.rv-prices .rv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rv-prices table.rv-tbl{border-collapse:collapse;border-spacing:0;width:100%;margin:0;
  font-size:15.5px;background:none;border:0;}
.rv-prices table.rv-tbl thead th{font-family:var(--rv-head);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--rv-teal);text-align:left;
  padding:9px 12px;border:0;border-bottom:2px solid var(--rv-teal);background:none;}
.rv-prices table.rv-tbl td{padding:9px 12px;border:0;
  border-bottom:1px solid var(--rv-rule);color:var(--rv-ink);background:none;}
.rv-prices table.rv-tbl thead th:last-child,
.rv-prices table.rv-tbl td:last-child{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
/* inventory type, as a band inside the one table */
.rv-prices table.rv-tbl tr.rv-grp th{font-family:var(--rv-head);font-size:13px;font-weight:700;
  letter-spacing:.02em;text-transform:none;color:var(--rv-ink);text-align:left;
  padding:16px 12px 7px;border:0;border-bottom:1px solid var(--rv-teal);
  background:var(--rv-teal-100);}
.rv-prices table.rv-tbl tr.rv-grp:first-child th{padding-top:10px;}
.rv-prices table.rv-tbl tbody tr{background:none;}
.rv-prices table.rv-tbl tbody tr:last-child td{border-bottom:0;}
.rv-prices table.rv-tbl td.rv-cat{font-family:var(--rv-head);font-weight:700;font-size:13px;
  color:var(--rv-teal);white-space:nowrap;vertical-align:top;}
.rv-prices table.rv-tbl thead th:last-child,
.rv-prices table.rv-tbl td:last-child{text-align:right;}
.rv-prices p.rv-note{font-size:13.5px;color:var(--rv-faint);margin:18px 0 0;
  font-family:var(--rv-body);}
@media (max-width:520px){
  .rv-prices table.rv-tbl{font-size:14.5px;}
  .rv-prices table.rv-tbl td,.rv-prices table.rv-tbl thead th,
  .rv-prices table.rv-tbl tr.rv-grp th{padding-left:9px;padding-right:9px;}
}
