/* Calculate My Wedding — planner layout */

.vd-bcalc-hero {
  background: linear-gradient(160deg, var(--vd-brand-tint), #fff 70%);
  padding: 3.2rem 0 2.4rem;
  text-align: center;
}
.vd-bcalc-hero h1 {
  font-family: var(--vd-font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin: .35rem 0 .6rem;
}
.vd-bcalc-sub { max-width: 44rem; margin: 0 auto; color: #5d5d63; }

.vd-bcalc { padding: 0 0 4rem; }
.vd-bcalc-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 1.35rem;
  align-items: start;
}
.vd-bcalc-form { position: sticky; top: 84px; }

.vd-bcalc-card {
  background: #fff;
  border: 1px solid var(--vd-line, #ece7e9);
  border-radius: 16px;
  padding: 1.35rem;
  margin-bottom: 1.35rem;
}
.vd-bcalc-h {
  font-family: var(--vd-font-display);
  font-size: 1.3rem;
  margin: 0 0 1rem;
}
.vd-bcalc-note { color: #6c6c72; font-size: .875rem; margin: -.4rem 0 1rem; }

/* ---------- form controls ---------- */
.vd-field { display: block; margin-bottom: 1.15rem; }
.vd-field > span, .vd-field-label {
  display: block; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: #7a7a80;
  margin-bottom: .45rem;
}
.vd-field > span strong { color: var(--vd-brand, #b4123f); font-size: 1rem; }
.vd-field small { display: block; margin-top: .4rem; color: #8a8a90; font-size: .78rem; line-height: 1.45; }
.vd-field select, .vd-field input[type="number"] {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--vd-line, #ddd6d9); border-radius: 9px; background: #fff;
}
.vd-field input[type="range"] { width: 100%; accent-color: var(--vd-brand, #b4123f); }
fieldset.vd-field { border: 0; padding: 0; margin-bottom: 1.15rem; }

.vd-chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.vd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vd-chip span {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .36rem .7rem; border: 1px solid var(--vd-line, #ddd6d9);
  border-radius: 999px; font-size: .84rem; cursor: pointer; background: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vd-chip span em { font-style: normal; opacity: .55; font-size: .74rem; }
.vd-chip input:checked + span {
  background: var(--vd-brand, #b4123f); border-color: var(--vd-brand, #b4123f); color: #fff;
}
.vd-chip input:focus-visible + span { outline: 2px solid var(--vd-brand, #b4123f); outline-offset: 2px; }

.vd-tierset { display: grid; gap: .4rem; }
.vd-tier input { position: absolute; opacity: 0; pointer-events: none; }
.vd-tier span {
  display: block; padding: .6rem .75rem; border: 1px solid var(--vd-line, #ddd6d9);
  border-radius: 11px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.vd-tier span strong { display: block; font-size: .93rem; }
.vd-tier span em { font-style: normal; font-size: .78rem; color: #8a8a90; }
.vd-tier input:checked + span {
  border-color: var(--vd-brand, #b4123f); background: var(--vd-brand-tint, #fdf2f5);
}
.vd-tier input:focus-visible + span { outline: 2px solid var(--vd-brand, #b4123f); outline-offset: 2px; }

.vd-switch { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.vd-switch input { margin-top: .25rem; accent-color: var(--vd-brand, #b4123f); }
.vd-switch span { font-size: .9rem; }
.vd-switch span em { display: block; font-style: normal; font-size: .78rem; color: #8a8a90; }

/* ---------- headline ---------- */
.vd-bcalc-out { transition: opacity .15s ease; }
.vd-bcalc-out.is-busy { opacity: .55; }
.vd-bcalc-total { background: linear-gradient(150deg, var(--vd-brand-tint, #fdf2f5), #fff 65%); }
.vd-bcalc-total-label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: #7a7a80; margin: 0 0 .3rem;
}
.vd-bcalc-total-figure {
  font-family: var(--vd-font-display);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  margin: 0 0 .5rem; line-height: 1.15;
}
.vd-bcalc-total-figure i { font-style: normal; font-size: .55em; color: #9a9aa0; margin: 0 .3rem; }
.vd-bcalc-total-meta { font-size: .9rem; color: #5d5d63; margin: 0 0 .9rem; }
.vd-bcalc-caveat {
  font-size: .8rem; color: #6c6c72; background: #fff; border-radius: 10px;
  padding: .6rem .75rem; margin: 0; line-height: 1.55;
  border: 1px solid var(--vd-line, #ece7e9);
}

/* ---------- donut ---------- */
.vd-bcalc-split { display: grid; grid-template-columns: 170px 1fr; gap: 1.2rem; align-items: center; }
.vd-donut { width: 170px; height: 170px; }
.vd-donut-key { list-style: none; margin: 0; padding: 0; columns: 2; font-size: .83rem; }
.vd-donut-key li { break-inside: avoid; margin-bottom: .3rem; display: flex; align-items: center; gap: .35rem; }
.vd-donut-key strong { margin-left: auto; color: #6c6c72; font-weight: 600; }
.vd-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* ---------- line items ---------- */
.vd-bcalc-lines { list-style: none; margin: 0; padding: 0; }
.vd-bline {
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem;
  align-items: center; padding: .7rem 0;
  border-bottom: 1px solid var(--vd-line, #f1ecee);
}
.vd-bline:last-child { border-bottom: 0; }
.vd-bline.is-off { opacity: .42; }
.vd-bline-tick { display: flex; align-items: center; gap: .5rem; cursor: pointer; margin: 0; }
.vd-bline-tick input { accent-color: var(--vd-brand, #b4123f); }
.vd-bline-tick i { font-size: 1.15rem; color: var(--vd-brand, #b4123f); }
.vd-bline-name { margin: 0; font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.vd-bline-blurb { margin: .1rem 0 0; font-size: .8rem; color: #8a8a90; line-height: 1.45; }
.vd-bline-note { margin: .25rem 0 0; font-size: .76rem; color: var(--vd-brand, #b4123f); }
.vd-bline-cost { font-size: .92rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.vd-bline-cost em { font-style: normal; color: #b0b0b6; margin: 0 .15rem; }
.vd-bookable-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vd-brand, #b4123f); display: inline-block; flex: 0 0 auto;
}

/* ---------- vendor rail ---------- */
.vd-brail { margin-bottom: 1.4rem; }
.vd-brail:last-child { margin-bottom: 0; }
.vd-brail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.vd-brail-head h3 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.vd-brail-head a { font-size: .82rem; white-space: nowrap; }
/* The per-unit allowance beside the line name — why these three and not the
   three the category page would lead with. */
.vd-brail-head h3 small {
  font-weight: 400; font-size: .78rem; color: #8a8a90; white-space: nowrap;
}
.vd-brail-nofit {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: -.3rem 0 .55rem; font-size: .8rem; color: #8a6a1e;
  background: #fdf6e6; border-radius: 9px; padding: .4rem .6rem;
}
.vd-brail-nofit i { margin-top: .1rem; flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .vd-brail-head h3 { flex-wrap: wrap; }
  .vd-brail-head h3 small { flex-basis: 100%; }
}
.vd-brail-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.vd-bmatch {
  display: block; border: 1px solid var(--vd-line, #ece7e9); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit; background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.vd-bmatch:hover { border-color: var(--vd-brand, #b4123f); transform: translateY(-2px); }
.vd-bmatch img { width: 100%; height: 92px; object-fit: cover; display: block; }
.vd-bmatch-ph {
  display: flex; align-items: center; justify-content: center;
  height: 92px; background: var(--vd-brand-tint, #fdf2f5); color: #c9a9b4;
}
.vd-bmatch-body { display: block; padding: .55rem .65rem; }
.vd-bmatch-body strong { display: block; font-size: .85rem; line-height: 1.3; }
.vd-bmatch-body em { display: block; font-style: normal; font-size: .75rem; color: #8a8a90; margin-top: .1rem; }
.vd-bmatch-price { display: block; font-size: .78rem; color: var(--vd-brand, #b4123f); margin-top: .25rem; }

/* ---------- save ---------- */
.vd-bcalc-saverow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .5rem; }
.vd-bcalc-fine { font-size: .74rem; color: #9a9aa0; margin: .6rem 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .vd-bcalc-grid { grid-template-columns: 1fr; }
  .vd-bcalc-form { position: static; }
  .vd-brail-items { grid-template-columns: repeat(2, 1fr); }
  .vd-bcalc-saverow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .vd-bcalc-split { grid-template-columns: 1fr; justify-items: center; }
  .vd-donut-key { columns: 1; width: 100%; }
  .vd-brail-items { grid-template-columns: 1fr; }
  .vd-bcalc-saverow { grid-template-columns: 1fr; }
  .vd-bline { grid-template-columns: auto 1fr; }
  .vd-bline-cost { grid-column: 2; text-align: left; }
}

/* ============================================================
   The seven-question opener
   ============================================================ */
.vd-wiz { padding: 2.5rem 0 4rem; }
.vd-wiz-shell {
  max-width: 44rem; margin: 0 auto; background: #fff;
  border: 1px solid var(--vd-line, #ece7e9); border-radius: 20px;
  padding: 1.6rem 1.8rem 1.4rem;
  box-shadow: 0 18px 50px -32px rgba(60, 10, 25, .35);
}

/* Without JS every step stays visible and the form is one long page, so the
   progress chrome is hidden — but the nav row stays, because it holds the
   submit button and the form has to be usable. */
.vd-wiz-bar, .vd-wiz-count { display: none; }
.vd-wiz.is-live .vd-wiz-bar,
.vd-wiz.is-live .vd-wiz-count { display: block; }
.vd-wiz-nav { display: flex; }

.vd-wiz-bar { height: 4px; background: var(--vd-brand-tint, #f6e6ec); border-radius: 99px; overflow: hidden; }
.vd-wiz-bar span {
  display: block; height: 100%; width: 14%;
  background: var(--vd-brand, #b4123f); border-radius: 99px;
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.vd-wiz-count {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: #9a9aa0; margin: .7rem 0 1.3rem;
}
.vd-wiz-count strong { color: var(--vd-brand, #b4123f); }

.vd-wiz-step { border: 0; padding: 0; margin: 0 0 1.4rem; }
.vd-wiz.is-live .vd-wiz-step { margin-bottom: 0; min-height: 17rem; }
.vd-wiz-q {
  font-family: var(--vd-font-display);
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  float: none; width: auto; margin: 0 0 .35rem; outline: none;
}
.vd-wiz-help { color: #6c6c72; font-size: .9rem; margin: 0 0 1.2rem; line-height: 1.5; }

.vd-wiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.vd-wiz-grid-wide { grid-template-columns: repeat(2, 1fr); }
.vd-wiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vd-wiz-opt span {
  display: block; padding: .8rem .85rem; cursor: pointer;
  border: 1.5px solid var(--vd-line, #e6dfe2); border-radius: 13px;
  font-weight: 600; font-size: .95rem; line-height: 1.3;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.vd-wiz-opt span em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .78rem; color: #8a8a90; margin-top: .2rem;
}
.vd-wiz-opt span i { color: var(--vd-brand, #b4123f); margin-right: .25rem; }
.vd-wiz-opt:hover span { border-color: #d6c3ca; }
.vd-wiz-opt input:checked + span {
  border-color: var(--vd-brand, #b4123f);
  background: var(--vd-brand-tint, #fdf2f5);
}
.vd-wiz-opt input:focus-visible + span { outline: 2px solid var(--vd-brand, #b4123f); outline-offset: 2px; }

/* ---- A function, with its own guest count (Phase 42) ----
   Two to a row like the plain options, but each is a box rather than a label:
   the number field inside cannot sit in a <label> for the checkbox, or typing a
   guest count would toggle the function off. */
.vd-wiz-funcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.vd-wiz-func {
  border: 1.5px solid var(--vd-line, #e6dfe2); border-radius: 13px;
  padding: .7rem .8rem; transition: border-color .15s ease, background .15s ease;
}
.vd-wiz-func.is-on { border-color: var(--vd-brand, #b4123f); background: var(--vd-brand-tint, #fdf2f5); }
.vd-wiz-func-head { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; margin: 0; }
.vd-wiz-func-head input { margin-top: .22rem; accent-color: var(--vd-brand, #b4123f); flex: 0 0 auto; }
.vd-wiz-func-head span { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.vd-wiz-func-head span em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .76rem; color: #8a8a90; margin-top: .15rem;
}
.vd-wiz-func-guests {
  display: flex; align-items: center; gap: .45rem;
  margin: .6rem 0 0; padding-top: .55rem;
  border-top: 1px solid rgba(180, 18, 63, .14);
}
.vd-wiz-func-guests label { font-size: .78rem; color: #6c6c72; font-weight: 600; margin: 0; }
.vd-wiz-func-guests input {
  width: 100%; min-width: 0; padding: .35rem .5rem;
  border: 1px solid var(--vd-line, #ddd6d9); border-radius: 9px;
  font-size: .9rem; font-weight: 600; text-align: right; background: #fff;
}
.vd-wiz-func-guests input:disabled { opacity: .45; background: #f6f3f4; }
@media (max-width: 575.98px) {
  .vd-wiz-funcs { grid-template-columns: 1fr; }
}

/* ---- The same pairing in the results panel's sidebar ---- */
.vd-funcrows { display: grid; gap: .35rem; }
.vd-funcrow {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--vd-line, #ddd6d9); border-radius: 10px;
  padding: .35rem .5rem; transition: border-color .15s ease, background .15s ease;
}
.vd-funcrow.is-on { border-color: var(--vd-brand, #b4123f); background: var(--vd-brand-tint, #fdf2f5); }
.vd-funcrow-name {
  display: flex; align-items: center; gap: .45rem;
  flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; font-size: .86rem; font-weight: 600;
}
.vd-funcrow-name input { accent-color: var(--vd-brand, #b4123f); flex: 0 0 auto; }
.vd-funcrow-num {
  flex: 0 0 4.6rem; width: 4.6rem; padding: .25rem .4rem;
  border: 1px solid var(--vd-line, #ddd6d9); border-radius: 8px;
  font-size: .84rem; font-weight: 600; text-align: right; background: #fff;
}
.vd-funcrow-num:disabled { opacity: .45; background: #f6f3f4; }

/* ---- The estimate against the band they named ---- */
.vd-bcalc-verdict {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .9rem 0 0; padding: .6rem .75rem; border-radius: 11px;
  font-size: .88rem; line-height: 1.45;
}
.vd-bcalc-verdict i { margin-top: .12rem; flex: 0 0 auto; }
.vd-bcalc-verdict.is-inside { background: #e9f7f0; color: #1c6b4c; }
.vd-bcalc-verdict.is-under  { background: #eef4fb; color: #2b5b8c; }
.vd-bcalc-verdict.is-over   { background: #fdf2f5; color: #b3123f; }

.vd-wiz-more { display: block; margin-top: .9rem; font-size: .85rem; color: #6c6c72; }
.vd-wiz-more select {
  display: block; margin-top: .3rem; width: 100%; padding: .5rem .65rem;
  border: 1px solid var(--vd-line, #ddd6d9); border-radius: 10px;
}

.vd-wiz-big {
  display: block; text-align: center;
  font-family: var(--vd-font-display); font-size: 3.4rem;
  color: var(--vd-brand, #b4123f); line-height: 1;
}
.vd-wiz-step input[type="range"] { width: 100%; accent-color: var(--vd-brand, #b4123f); margin: .8rem 0 1rem; }
.vd-wiz-presets { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.vd-wiz-preset {
  border: 1px solid var(--vd-line, #e6dfe2); background: #fff;
  border-radius: 999px; padding: .32rem .85rem; font-size: .85rem; cursor: pointer;
}
.vd-wiz-preset:hover, .vd-wiz-preset.is-on {
  border-color: var(--vd-brand, #b4123f); color: var(--vd-brand, #b4123f);
}

.vd-wiz-sub {
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--vd-brand-tint, #fdf2f5); border-radius: 12px; font-size: .9rem;
}
.vd-wiz-sub strong { color: var(--vd-brand, #b4123f); }
.vd-wiz-check { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; cursor: pointer; }
.vd-wiz-check input { margin-top: .25rem; accent-color: var(--vd-brand, #b4123f); }
.vd-wiz-check span { font-size: .9rem; }
.vd-wiz-check span em { display: block; font-style: normal; font-size: .78rem; color: #8a8a90; }

.vd-wiz-nav { gap: .6rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--vd-line, #f1ecee); }
.vd-wiz-skip { text-align: center; margin: .9rem 0 0; font-size: .8rem; }
.vd-wiz-skip a { color: #9a9aa0; }

@media (max-width: 575.98px) {
  .vd-wiz-shell { padding: 1.2rem 1.1rem; border-radius: 16px; }
  .vd-wiz-grid, .vd-wiz-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .vd-wiz.is-live .vd-wiz-step { min-height: 20rem; }
  .vd-wiz-big { font-size: 2.8rem; }
}


/* ---- Wizard step 8: contact details --------------------------------------
   Every other step runs the full width of the shell and starts on its content
   edge. The first version of this centred the help text and the field block
   inside their own max-widths, which gave the step three different left edges
   — heading, help and fields each starting somewhere else. These rules keep
   the step on the same grid as the rest of the wizard.

   Name spans the row; mobile and date share the one below, which matches the
   density of the tile steps instead of leaving three lonely full-width inputs. */
.vd-wiz-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.1rem;
}
.vd-wiz-field{display:block;min-width:0}
.vd-wiz-field-wide{grid-column:1 / -1}
.vd-wiz-field > span{
  display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem;
}
.vd-wiz-field > span b{color:var(--vd-brand,#b4123f);font-weight:700}
.vd-wiz-field .form-control{width:100%}
.vd-wiz-err{
  display:block;margin-top:.35rem;font-style:normal;font-size:.82rem;
  color:#b3261e;
}
.vd-wiz-field input[aria-invalid="true"]{border-color:#b3261e}

@media (max-width:575.98px){
  /* Two columns of input at phone width is two cramped columns. */
  .vd-wiz-fields{grid-template-columns:1fr}
}