/* Vigilante Studio Core: project step, order panels, account, enquiry form.
   Tokens come from the theme palette; hex fallbacks match the design pack. */

:root {
  --vs-gold: var(--wp--preset--color--gold, #9A8860);
  --vs-gold-bright: var(--wp--preset--color--gold-bright, #C3AA76);
  --vs-gold-deep: var(--wp--preset--color--gold-deep, #7A6A42);
  --vs-ink: var(--wp--preset--color--ink, #0B0A09);
  --vs-ink-2: var(--wp--preset--color--ink-2, #131110);
  --vs-ink-4: var(--wp--preset--color--ink-4, #191614);
  --vs-paper: var(--wp--preset--color--paper, #F2EEE6);
  --vs-paper-2: var(--wp--preset--color--paper-2, #EBE5D8);
  --vs-paper-4: var(--wp--preset--color--paper-4, #FBF9F4);
  --vs-line-light: var(--wp--preset--color--line-light, #DCD3C0);
  --vs-line-light-2: var(--wp--preset--color--line-light-2, #CFC4AC);
  --vs-text-light: var(--wp--preset--color--text-light, #EFEBE4);
  --vs-text-light-2: var(--wp--preset--color--text-light-2, #CFCAC2);
  --vs-text-dark-2: var(--wp--preset--color--text-dark-2, #4A443C);
  --vs-error: var(--wp--preset--color--error, #9B3A26);
  --vs-pill-progress: #B5A784;
  --vs-font-heading: 'Playfair Display', Georgia, serif;
  --vs-font-body: Montserrat, Helvetica, Arial, sans-serif;
  --vs-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* ---------------------------------------------------------------- type */

.vs-step, .vs-order-panels, .vs-account-stats, .vs-enquiry, .vs-guest {
  font-family: var(--vs-font-body);
  color: var(--vs-ink-4);
  line-height: 1.7;
}
.vs-step__title, .vs-h2, .vs-h3 {
  font-family: var(--vs-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 18px;
}
.vs-step__title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; }
.vs-h2 { font-size: clamp(24px, 2.6vw, 32px); }
.vs-h3 { font-size: clamp(20px, 2.1vw, 24px); }
.vs-label, .vs-steps, .vs-status-pill, .vs-check__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vs-label { display: block; color: var(--vs-gold-deep); margin-bottom: 8px; }
.vs-help { font-size: 15px; color: var(--vs-text-dark-2); margin: 6px 0 0; }
.vs-panel__lead { font-size: clamp(17px, 1.7vw, 19px); font-weight: 500; margin: 0 0 6px; }

/* ------------------------------------------------------------- buttons */

.vs-button {
  display: inline-block;
  background: var(--vs-gold);
  color: var(--vs-ink);
  font-family: var(--vs-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  padding: 18px 34px;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--vs-ease), color 200ms var(--vs-ease);
}
.vs-button:hover, .vs-button:focus-visible { background: var(--vs-gold-bright); color: var(--vs-ink); }
.vs-button:focus-visible { outline: 2px solid var(--vs-ink); outline-offset: 3px; }
.vs-button[aria-busy="true"], .vs-button:disabled { opacity: 0.7; cursor: progress; }
.vs-button--ghost { background: transparent; color: var(--vs-ink-4); border: 1px solid var(--vs-gold); }
.vs-button--ghost:hover, .vs-button--ghost:focus-visible { background: transparent; color: var(--vs-gold-deep); border-color: var(--vs-gold-bright); }
.vs-button--small { font-size: 15px; padding: 12px 22px; min-height: 44px; }
.vs-text-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--vs-gold-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.vs-text-button:hover { color: var(--vs-ink); }
.vs-link-arrow { color: var(--vs-ink-4); text-decoration: none; font-size: 15px; }
.vs-link-arrow span { border-bottom: 1px solid var(--vs-gold); padding-bottom: 5px; }
.vs-link-arrow:hover span { color: var(--vs-gold-deep); }
.vs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 28px 0 0; }

/* --------------------------------------------------------------- forms */

.vs-form .vs-field, .vs-form .vs-check { margin: 0 0 22px; }
.vs-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--vs-paper-4);
  border: 1px solid var(--vs-line-light-2);
  border-radius: 0;
  color: var(--vs-ink-4);
  font-family: var(--vs-font-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 16px;
  min-height: 52px;
}
.vs-input:focus { outline: 2px solid var(--vs-gold); outline-offset: 1px; border-color: var(--vs-gold); }
.has-error .vs-input, .vs-input[aria-invalid="true"] { border-color: var(--vs-error); }
.vs-error, .vs-form-error { color: var(--vs-error); font-size: 15px; margin: 8px 0 0; }
.vs-error[hidden], .vs-form-error[hidden] { display: none; }
.vs-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.vs-check input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--vs-gold); }
.vs-check__label { display: block; color: var(--vs-ink-4); letter-spacing: 0.06em; font-size: 14px; }
.vs-error-summary {
  border: 1px solid var(--vs-error);
  border-left-width: 4px;
  background: var(--vs-paper-4);
  padding: 18px 22px;
  margin: 0 0 28px;
}
.vs-error-summary[hidden] { display: none; }
.vs-error-summary__title { font-weight: 500; margin: 0 0 8px; }
.vs-error-summary ul { margin: 0; padding-left: 20px; }
.vs-error-summary a { color: var(--vs-error); }
.vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------- step nav */

.vs-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 26px; padding: 0; border-bottom: 1px solid var(--vs-line-light); }
.vs-steps__item { display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 0; color: var(--vs-text-dark-2); font-weight: 400; }
.vs-steps__item.is-current { color: var(--vs-ink-4); font-weight: 500; box-shadow: inset 0 -3px 0 var(--vs-gold); }
.vs-steps__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--vs-line-light-2); font-family: var(--vs-font-heading); font-size: 14px; }
.vs-steps__item.is-current .vs-steps__num { border-color: var(--vs-gold); background: var(--vs-gold); color: var(--vs-ink); }

/* -------------------------------------------------------- project step */

.vs-project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.vs-section { padding: 0 0 34px; margin: 0 0 34px; border-bottom: 1px solid var(--vs-line-light); }
.vs-track { border: 1px solid var(--vs-line-light-2); padding: 22px 24px 8px; margin: 0 0 20px; background: var(--vs-paper-2); }
.vs-track__legend { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 0; }
.vs-track__legend .vs-h3 { margin: 0 0 14px; }
.vs-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed var(--vs-gold);
  background: var(--vs-paper-4);
  padding: 20px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 200ms var(--vs-ease);
}
.vs-dropzone.is-over, .vs-dropzone:hover { background: var(--vs-paper); }
.vs-dropzone:focus-within { outline: 2px solid var(--vs-gold); outline-offset: 2px; }
.vs-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vs-dropzone[hidden] { display: none; }
.vs-upload__status { font-size: 15px; margin: 8px 0 0; }
.vs-upload__name { font-weight: 500; }
.vs-upload__meta { color: var(--vs-text-dark-2); }
.vs-upload__actions { display: flex; gap: 18px; margin: 8px 0 0; }
.vs-upload__actions [hidden] { display: none; }
.vs-progress { height: 4px; background: var(--vs-line-light); margin: 10px 0 0; overflow: hidden; }
.vs-progress[hidden] { display: none; }
.vs-progress__bar { display: block; height: 100%; background: var(--vs-gold); transition: width 200ms linear; }
.vs-runtime { margin: 26px 0 0; padding: 20px 22px; border: 1px solid var(--vs-line-light-2); background: var(--vs-paper-4); }
.vs-runtime.has-error { border-color: var(--vs-error); }
.vs-runtime__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-family: var(--vs-font-heading); font-size: 22px; }
.vs-runtime .vs-check { margin: 16px 0 0; }
.vs-summary { position: sticky; top: 28px; border: 1px solid var(--vs-gold); padding: 24px 26px; background: var(--vs-paper-2); }
.vs-summary__tracks, .vs-trust { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.vs-summary__tracks li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vs-line-light); }
.vs-summary__totals { margin: 14px 0 0; }
.vs-summary__totals div, .vs-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--vs-line-light); }
.vs-summary__totals dt, .vs-dl dt { font-weight: 500; margin: 0; }
.vs-summary__totals dd, .vs-dl dd { margin: 0; text-align: right; }
.vs-trust { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--vs-line-light); }
.vs-trust li { padding: 4px 0 4px 22px; position: relative; }
.vs-trust li::before { content: ''; position: absolute; left: 0; top: 13px; width: 10px; height: 10px; background: var(--vs-gold); }
.vs-cart-tracks { display: block; font-size: 14px; color: var(--vs-text-dark-2); }

/* -------------------------------------------------------- order panels */

.vs-order-panels { margin: 34px 0 0; }
.vs-panel { padding: 28px 0; border-top: 1px solid var(--vs-line-light); }
.vs-status-pill { display: inline-block; padding: 8px 14px; border: 1px solid var(--vs-line-light-2); margin: 0 0 18px; }
.vs-status-pill--progress { border-color: var(--vs-pill-progress); }
.vs-status-pill--delivered { border-color: var(--vs-gold); }
.vs-progress-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; padding: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.vs-progress-steps li { padding: 12px 0 0; border-top: 3px solid var(--vs-line-light); color: var(--vs-text-dark-2); }
.vs-progress-steps li.is-done, .vs-progress-steps li.is-current { border-top-color: var(--vs-gold); color: var(--vs-ink-4); }
.vs-progress-steps li.is-current { font-weight: 500; }
.vs-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vs-line-light); }
.vs-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--vs-line-light); }
.vs-files--numbered { counter-reset: vs-track; }
.vs-files--numbered li { grid-template-columns: 36px minmax(0, 1fr); }
.vs-files--numbered li::before { counter-increment: vs-track; content: counter(vs-track, decimal-leading-zero); grid-row: span 2; font-family: var(--vs-font-heading); font-size: 22px; color: var(--vs-gold-deep); }
.vs-files__title { font-weight: 500; }
.vs-files__meta { grid-column: 1; font-size: 14px; color: var(--vs-text-dark-2); }
.vs-files li .vs-button { grid-column: 2; grid-row: 1 / span 2; }
.vs-files--numbered .vs-files__title, .vs-files--numbered .vs-files__meta { grid-column: 2; } /* the number takes column 1 */
.vs-next { margin: 0; padding-left: 22px; }
.vs-next li { padding: 6px 0 6px 6px; }

/* ------------------------------------------------------------- account */

.vs-account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(18px, 2.4vw, 26px); margin: clamp(22px, 3vw, 32px) 0 34px; }
.vs-account-stats > div { border: 1px solid var(--vs-line-light-2); padding: 22px 24px; background: var(--vs-paper-2); }
.vs-account-stats__latest { grid-column: 1 / -1; }
.vs-stat { font-family: var(--vs-font-heading); font-size: clamp(36px, 5vw, 56px); line-height: 0.95; margin: 0; color: var(--vs-ink); }
.vs-stat--text { font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; }
.vs-account-stats .vs-button { margin-top: 16px; }
.vs-guest { margin: 34px 0 0; }
.vs-guest summary { list-style: none; width: auto; }
.vs-guest summary::-webkit-details-marker { display: none; }
.vs-guest__form { margin: 26px 0 0; padding: 26px; border: 1px solid var(--vs-line-light-2); background: var(--vs-paper-2); }

/* ------------------------------------------------------------- enquiry */

.vs-enquiry__success { padding: 28px; border: 1px solid var(--vs-gold); background: var(--vs-paper-2); }
.vs-enquiry__success[hidden], [data-vs-enquiry-wrap][hidden] { display: none; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .vs-project-grid { grid-template-columns: 1fr; }
  .vs-summary { position: static; }
}
@media (max-width: 700px) {
  .vs-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-files li { grid-template-columns: 1fr; }
  .vs-files--numbered li { grid-template-columns: 32px minmax(0, 1fr); }
  .vs-files li .vs-button { grid-column: 1; grid-row: auto; justify-self: start; }
  .vs-files__meta { grid-column: 1; }
  .vs-button { width: 100%; text-align: center; }
  .vs-track { padding: 18px 18px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-button, .vs-dropzone, .vs-progress__bar { transition: none; }
}