/* Customer pages in the www.thevaulttm.com look. Loaded last on the estimator, /estimate/ and /book/. */

@font-face {
  font-family: "Federo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/federo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/raleway-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/bitter-latin.woff2") format("woff2");
}

:root {
  --ink: #231e15;
  --gold: #b49d35;        /* fills, rules, and text on --ink only */
  --gold-ink: #756622;    /* gold text on light grounds: 5.7:1 white, 5.2:1 mint */
  --mint: #f0f6ea;
  --mint-line: #cfdcc4;
  --mint-line-2: #98ab8a;
  --sand: #f2f0ec;
  --line-2: #d5cfc3;
  --muted: #575247;       /* 7.8:1 white, 7.1:1 mint */
  --field-line: #857f72;  /* input borders: 4.0:1 white, 3.6:1 mint */
  --placeholder: #6f6a5f;
  --on-ink: #d5cfc3;      /* secondary text on --ink: 10.7:1 */
  --error: #c53030;
  --white: #fff;

  --f-head: "Federo", Georgia, serif;
  --f-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --f-btn: "Bitter", Georgia, serif;
}

body {
  background: var(--mint);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  line-height: 1.5;
}

button, input, select, textarea { font-family: inherit; }

/* ===== CONTAINER ===== */
.vault-inquiry,
.vault-estimates,
.vault-booking {
  width: calc(100% - 32px);
  max-width: 720px;
  margin: clamp(16px, 4vw, 48px) auto;
  padding: clamp(20px, 1rem + 2.5vw, 48px);
  background: var(--white);
  border: 1px solid var(--mint-line);
  border-radius: 24px 0;
  box-shadow: 0 6px 18px rgba(35, 30, 21, 0.06);
}

/* ===== HEADER ===== */
.vault-header,
.booking-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.vault-wordmark-link {
  display: inline-block;
  margin-bottom: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
  border-radius: 2px;
}

.vault-wordmark {
  display: block;
  width: clamp(200px, 150px + 12vw, 300px);
  height: auto;
}

.vault-header h1,
.booking-header h1 {
  margin: 0 0 0.35rem;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.vault-header .subtitle,
.booking-header .subtitle {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===== PROGRESS ===== */
.progress-step:not(:last-child)::after { background: var(--line-2); }
.progress-step:not(:last-child).completed::after { background: var(--gold); }

.progress-dot {
  background: var(--white);
  border-color: var(--field-line);
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: lining-nums;
}

.progress-step.active .progress-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.progress-step.completed .progress-dot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

.progress-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.progress-step.active .progress-label {
  color: var(--ink);
  font-weight: 700;
}

.progress-step.completed .progress-label {
  color: var(--muted);
  font-weight: 600;
}

/* ===== HEADINGS ===== */
.step-title {
  margin-bottom: 0.4rem;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}

.step-subtitle { color: var(--muted); font-size: 0.95rem; }

.section-title,
.review-section h3,
.booking-section h3,
.booking-legend,
.success-message h2,
.check-email h2,
.not-found h2,
.booking-not-found h2 {
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}

.section-title,
.review-section h3,
.booking-section h3,
.booking-legend {
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--gold);
}

.section-title { margin: 2rem 0 1rem; }

.booking-legend {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0 0 0.4rem;
}

.success-message h2,
.check-email h2,
.not-found h2,
.booking-not-found h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }

.form-section-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  border-bottom-color: var(--line-2);
}

.bar-group-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.booking-question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* ===== TEXT ===== */
.section-note,
.field-hint,
.disclaimer,
.estimate-retrieval-link,
.coupon-note,
.booking-loading,
.estimate-cta p,
.check-email p,
.not-found p,
.booking-not-found p,
.success-message p { color: var(--muted); }

p.booking-note {
  margin: -0.25rem 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

p.fine-print {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

p.contact-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.vault-inquiry a:not(.btn, .vault-wordmark-link),
.vault-estimates a:not(.btn, .vault-wordmark-link),
.vault-booking a:not(.btn, .vault-wordmark-link) {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.optional { color: var(--muted); font-weight: 500; }

.form-group label .required,
.required { color: var(--error); }

/* ===== FIELDS ===== */
.form-group label {
  font-weight: 600;
  color: var(--ink);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea,
.qty-input,
.coupon-field input,
.av-check input[type="number"] {
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.form-group input[type="time"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.av-check input[type="number"] { padding: 0.3rem 0.4rem; }

::placeholder { color: var(--placeholder); opacity: 1; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.qty-input:focus,
.coupon-field input:focus {
  border-color: var(--ink);
  box-shadow: none;
}

.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid,
.coupon-field input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.qty-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ===== OPTION CARDS ===== */
.radio-option,
.addon-item,
.payment-option {
  background: var(--white);
  border: 1px solid var(--mint-line-2);
  border-radius: 8px;
  color: var(--ink);
}

.radio-option:hover,
.addon-item:hover,
.payment-option:hover { border-color: var(--ink); }

.radio-option.selected,
.addon-item.selected,
.payment-option.selected {
  background: var(--mint);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.addon-item:focus-within {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.radio-option input[type="radio"],
.payment-option input[type="radio"],
.addon-item input[type="checkbox"],
.addon-item input[type="radio"],
.av-check input[type="checkbox"] { accent-color: var(--ink); }

.addon-item .addon-name {
  font-weight: 600;
  color: var(--ink);
}

.addon-item .addon-price {
  color: var(--muted);
  font-variant-numeric: lining-nums;
}

.event-type-card {
  background: var(--white);
  border: 2px solid var(--mint-line-2);
  border-radius: 24px 0;
}

.event-type-card:hover,
.event-type-card.selected {
  background: var(--mint);
  border-color: var(--ink);
}

.event-type-card:focus-visible {
  border-color: var(--ink);
  box-shadow: none;
}

.event-type-card .card-title {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.event-type-card .card-desc {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ===== NOTES, TIPS, SMALL BUTTONS ===== */
.availability-note {
  background: var(--mint);
  border-left-color: var(--gold);
  color: var(--ink);
}

.info-tip-btn,
.info-tip-btn:hover,
.info-tip-btn:focus-visible { color: var(--gold-ink); }

.info-tip-btn:focus-visible { box-shadow: none; }

.info-tip {
  background: var(--ink);
  color: var(--white);
}

.info-tip::after { border-top-color: var(--ink); }

.recalc-button {
  background: var(--white);
  border: 1px solid var(--field-line);
  border-radius: 16px 0;
  color: var(--ink);
  font-weight: 600;
}

.recalc-button:hover {
  background: var(--mint);
  border-color: var(--ink);
  color: var(--ink);
}

.recalc-button:focus-visible { box-shadow: none; }

/* ===== RESULTS PANEL ===== */
.results {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--ink);
  border-radius: 24px 0;
  color: var(--white);
}

.results h3 {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--gold);
}

.line-item {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.line-item .item-name { color: var(--on-ink); }

.line-item .item-price {
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

.line-item.subtotal .item-name,
.line-item.subtotal .item-price {
  color: var(--white);
  font-weight: 700;
}

.line-item.discount,
.line-item.discount .item-name,
.line-item.discount .item-price { color: #b9d6a6; }

.tax-note { color: var(--on-ink); }

.total-line { border-top: 2px solid var(--gold); }

.total-line .total-label {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.total-line .total-amount {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.included-note {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px 0;
  color: var(--on-ink);
}

/* ===== REVIEW ===== */
.review-row .review-label { color: var(--muted); }

.review-row .review-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

/* ===== BUTTONS ===== */
.step-nav { border-top-color: var(--line-2); }

.btn {
  min-height: 3em;
  padding: 0.8em 2em;
  border: 2px solid transparent;
  border-radius: 45px 0;
  font-family: var(--f-btn);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
}

.btn-primary,
.btn-submit {
  background: var(--gold);
  color: var(--ink);
}

.btn-primary:hover,
.btn-submit:hover {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--gold);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--white);
}

.btn-submit {
  padding: 0.9em 2em;
  font-size: 1.125rem;
}

.step-nav .btn-submit {
  padding: 0.8em 2em;
  font-size: 1.0625rem;
}

.btn-submit:disabled,
.btn-submit:disabled:hover {
  background: var(--line-2);
  color: var(--muted);
  border-color: transparent;
}

.btn:focus-visible { box-shadow: none; }

/* ===== FOCUS ===== */
.vault-inquiry :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.vault-estimates :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.vault-booking :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Headings and the error summary take focus from script so screen readers announce them;
   they are not controls, so they get no ring. */
.vault-inquiry :is(h1, h2, .error-list)[tabindex="-1"]:focus-visible,
.vault-estimates :is(h1, h2, .error-list)[tabindex="-1"]:focus-visible,
.vault-booking :is(h1, h2, .error-list)[tabindex="-1"]:focus-visible { outline: none; }

/* ===== COUPON ===== */
.coupon-field input { border-radius: 6px; }

.coupon-apply-btn {
  min-height: 0;
  padding: 0.55em 1.4em;
  border-radius: 22px 0;
  font-size: 1rem;
}

.coupon-applied {
  background: var(--mint);
  border: 1px solid var(--mint-line-2);
  border-radius: 8px;
}

.coupon-badge {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: lining-nums;
}

.coupon-savings {
  color: #2d6a2d;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

.coupon-remove { color: var(--muted); }
.coupon-remove:hover { color: var(--error); }

.error-list { border-radius: 8px; }

/* ===== SUCCESS ===== */
.success-message .success-icon { color: var(--gold-ink); }

.success-message .success-details {
  background: var(--mint);
  border-radius: 16px 0;
  color: var(--ink);
}

.success-message .success-details p { color: var(--ink); }

/* ===== ESTIMATE PAGE ===== */
.estimate-card {
  background: var(--white);
  border: 1px solid var(--mint-line-2);
  border-radius: 16px 0;
}

.estimate-card-type {
  font-weight: 700;
  color: var(--ink);
}

.estimate-card-date,
.estimate-card-details { color: var(--muted); }

.estimate-card-total {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--gold-ink);
  font-variant-numeric: lining-nums;
}

.estimate-card-toggle {
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.estimate-card-toggle:focus-visible { box-shadow: none; }

.estimate-cta { border-top-color: var(--line-2); }

/* ===== BOOKING PAGE ===== */
.summary-card {
  background: var(--mint);
  border: 1px solid var(--mint-line);
  border-radius: 16px 0;
}

.summary-card h3 {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--gold-ink);
}

.summary-card .summary-label { color: var(--muted); }

.summary-card .summary-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

.summary-card .summary-total { border-top-color: var(--mint-line-2); }

.summary-card .summary-total .summary-value {
  color: var(--gold-ink);
  font-weight: 700;
}

.cc-fee-notice {
  background: var(--sand);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}

.cc-fee-notice p { color: var(--gold-ink); }

.cc-fee-line {
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.cc-fee-total {
  border-top-color: var(--line-2);
  color: var(--gold-ink);
}

.cc-fee-notice .cc-fee-note { color: var(--muted); }

/* ===== PHONES ===== */
@media (max-width: 500px) {
  .vault-inquiry,
  .vault-estimates,
  .vault-booking {
    width: auto;
    margin: 0;
    padding: 1.25rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .progress-label { font-size: 0.68rem; }

  .btn { padding: 0.8em 1.4em; }
  .step-nav .btn-submit { padding: 0.8em 1.4em; }

  .event-type-card { padding: 1.25rem 1rem; }
}