/*!
 * The Trillium Cost Calculator — widget styles
 * ------------------------------------------------------------
 * Sibling stylesheet to riviera-cost-calculator.css / landing-cost-calculator.css,
 * for the same widget template rebuilt for a third property (The Trillium).
 * Loaded automatically by trillium-cost-calculator.js into the widget's
 * Shadow DOM, so these rules only ever affect the calculator itself — they
 * can't leak out onto the rest of the page, and the page's own CSS can't
 * leak in.
 *
 * The script finds this file either via CONFIG.cssUrl (an explicit URL set
 * in trillium-cost-calculator.js) or, if that's left blank, by looking next
 * to its own script location — see the CONFIG comments in the .js file.
 *
 * UNLIKE THE RIVIERA/LANDING STYLESHEETS: this one is NOT inheriting font
 * from the host page. The original Trillium tool (the live Outgrow embed at
 * trilliumtysons.com) was inspected directly and uses its own explicit
 * brand fonts and colors, verified via computed styles on the live tool:
 *   - Headings/buttons/inputs: "Prompt" (Google Font)
 *   - Body copy/labels:        "Mulish" (Google Font)
 *   - Primary navy:            #00455D (headings, buttons, footer bar, input borders)
 *   - Body text navy:          #0B263B
 *   - Accent (italic subhead): #6B75B8
 *   - Body container max-width: 1200px (near-full width of the calculator's
 *     ~1226px production container); only the big hero heading is capped
 *     narrower (980px, fixed), and the input rows sit in their own centered
 *     column at 88% of the body (both verified directly on the live tool,
 *     not the earlier, wrong assumption that everything was 980px)
 *   - No card border/box-shadow around the whole widget — the original sits
 *     flat on the page background, not boxed
 *   - Exact measured values used throughout below (button padding, font
 *     sizes, etc.) come from getComputedStyle() on the live tool itself,
 *     not estimated from screenshots
 * The @font-face import below loads Prompt + Mulish directly in this
 * stylesheet so they render correctly inside the Shadow DOM regardless of
 * what fonts the host page happens to load.
 *
 * All colors, spacing and layout here are visual settings, not calculator
 * logic — safe to tweak freely without touching the .js file. The one
 * exception is anything under CONFIG in trillium-cost-calculator.js
 * (pricing, copy, links), which lives in the JS file on purpose since
 * it isn't styling.
 */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;400;600&family=Mulish:ital,wght@0,300;0,400;0,700;1,700&display=swap');

.tc-root * {
  box-sizing: border-box;
}

.tc-root {
  --tc-navy: #00455d;
  --tc-navy-text: #0b263b;
  --tc-accent: #6b75b8;
  display: block;
  color: var(--tc-navy-text);
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  font-family: 'Mulish', sans-serif;
}

.tc-body {
  /* Verified against the live tool directly: only the big hero heading is
     capped at a narrow 980px (so it wraps into two balanced lines) — every
     other element (intro copy, field rows, results, buttons) spans nearly
     the FULL width of the calculator's container (measured at ~98% of it).
     Earlier version of this file wrongly capped everything at 980px, which
     made the whole widget read narrower than the original. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 36px 32px;
}

@media (max-width: 560px) {
  .tc-body {
    padding: 28px 20px 24px;
  }
}

.tc-heading {
  /* This is the one element that DOES get the narrower cap, verified on
     the live tool (its heading wrapper is a fixed 980px regardless of the
     surrounding container width) — it's what makes "THE TRILLIUM COST
     COMPARISON CALCULATOR" break into two lines instead of one long line. */
  max-width: 980px;
  margin: 0 auto 16px;
  font-family: 'Prompt', sans-serif;
  font-weight: 100;
  font-size: 60px;
  line-height: 1.167;
  color: var(--tc-navy);
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .tc-heading {
    font-size: 32px;
  }
}

.tc-subheading {
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--tc-accent);
  margin: 0 0 22px;
}

.tc-copy {
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tc-navy-text);
  margin: 0 0 28px;
}

.tc-center {
  text-align: center;
}

.tc-btn {
  display: inline-block;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--tc-navy);
  color: #fff;
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: normal;
  text-transform: uppercase;
  padding: 29px 60px;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.15s ease;
}

.tc-btn:hover {
  background: #003245;
}

.tc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tc-btn-outline {
  background: transparent;
  color: var(--tc-navy);
  border: 1px solid var(--tc-navy);
}

.tc-btn-outline:hover {
  background: rgba(0, 69, 93, 0.08);
}

.tc-step-title {
  /* Measured directly on the live tool's "At Home Expenses" heading. */
  font-family: 'Prompt', sans-serif;
  font-weight: 300;
  font-size: 50px;
  color: var(--tc-navy);
  text-align: center;
  margin: 0 0 10px;
  text-transform: none;
}

@media (max-width: 620px) {
  .tc-step-title {
    font-size: 32px;
  }
}

.tc-step-subtitle {
  text-align: center;
  font-family: 'Mulish', sans-serif;
  color: var(--tc-navy);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 14px;
}

.tc-step-intro {
  /* Measured directly on the live tool's expenses-step intro line. */
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--tc-navy-text);
  margin: 0 0 28px;
}

.tc-lead-intro {
  margin-bottom: 24px;
}

.tc-rows {
  /* Verified on the live tool: the row list sits in its own centered
     column at ~88% of the (already-padded) body width — not the full
     body width. Without this, input boxes run wider than the original
     and can get visually cut off on the right on a real page. */
  max-width: 88%;
  margin: 0 auto;
}

@media (max-width: 620px) {
  .tc-rows {
    max-width: 100%;
  }
}

.tc-field-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 18px 24px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #eef2f4;
}

.tc-field-row:last-of-type {
  border-bottom: none;
}

@media (max-width: 620px) {
  .tc-field-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.tc-field-label {
  text-align: right;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--tc-navy);
  line-height: 1.4;
}

@media (max-width: 620px) {
  .tc-field-label {
    text-align: left;
  }
}

.tc-required {
  color: #d0573c;
  margin-left: 3px;
}

.tc-field-helper {
  text-align: right;
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--tc-navy-text);
  margin-top: 4px;
}

@media (max-width: 620px) {
  .tc-field-helper {
    text-align: left;
  }
}

.tc-input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--tc-navy);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  height: 55px;
}

.tc-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 69, 93, 0.15);
}

.tc-input-prefix {
  padding: 0 14px;
  color: var(--tc-navy);
  background: #f4f7f8;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'Prompt', sans-serif;
}

.tc-input {
  border: none;
  outline: none;
  flex: 1;
  height: 100%;
  padding: 0 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 18px;
  color: #444;
  min-width: 0;
  background: transparent;
}

.tc-input::placeholder {
  color: #a9b3ba;
}

.tc-level-row {
  padding: 8px 0 24px;
}

.tc-select-wrap {
  max-width: 420px;
  margin: 0 auto;
}

.tc-select {
  width: 100%;
  height: 55px;
  padding: 0 14px;
  border: 2px solid var(--tc-navy);
  border-radius: 6px;
  background: #fff;
  font-family: 'Prompt', sans-serif;
  color: #444;
  cursor: pointer;
}

.tc-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 69, 93, 0.15);
}

.tc-lead-field {
  margin-bottom: 18px;
}

.tc-lead-label {
  display: block;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 6px;
}

.tc-lead-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  height: 55px;
  border: 2px solid var(--tc-navy);
}

.tc-lead-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 69, 93, 0.15);
}

.tc-lead-icon {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-navy);
  flex-shrink: 0;
}

.tc-lead-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  height: 100%;
  padding: 0 14px 0 0;
  font-family: 'Prompt', sans-serif;
  font-size: 18px;
  color: #444;
  min-width: 0;
}

.tc-lead-input::placeholder {
  color: #9aa5ab;
}

.tc-error {
  color: #c0392b;
  margin-top: 8px;
  text-align: center;
  font-family: 'Mulish', sans-serif;
}

.tc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tc-navy, #00455d);
  padding: 14px 28px;
  color: #fff;
  font-family: 'Prompt', sans-serif;
}

@media (max-width: 560px) {
  .tc-footer {
    padding: 12px 16px;
  }
}

.tc-footer-btns {
  display: flex;
  gap: 10px;
}

.tc-footer .tc-btn {
  /* Measured directly on the live tool's Prev/Next pill buttons. */
  padding: 3px 15px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
}

.tc-footer .tc-btn-outline {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: #fff;
}

.tc-footer .tc-btn-outline:hover {
  background: rgba(0, 0, 0, 0.2);
}

.tc-footer .tc-btn-solid {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}

.tc-footer .tc-btn-solid:hover {
  background: rgba(0, 0, 0, 0.2);
}

.tc-results-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 100;
  font-size: 38px;
  color: var(--tc-navy);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: normal;
  margin: 0 0 14px;
  line-height: 1.3;
}

.tc-results-intro {
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--tc-navy-text);
  margin: 0 0 26px;
  line-height: 1.6;
}

.tc-card {
  border: 1px solid #e3e9ec;
  border-radius: 6px;
  padding: 26px 24px;
  margin-bottom: 20px;
  text-align: center;
}

.tc-card-figure {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
  font-size: 34px;
  color: var(--tc-navy);
  margin: 0 0 6px;
}

.tc-card-caption {
  font-family: 'Mulish', sans-serif;
  color: var(--tc-navy-text);
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

.tc-card-caption b {
  color: var(--tc-navy);
}

.tc-disclaimer {
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  color: #7a8894;
  margin-top: 8px;
  line-height: 1.6;
}

.tc-luxury-title {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tc-navy);
  text-align: center;
  margin: 8px 0 16px;
  letter-spacing: 0.5px;
}

.tc-luxury-copy {
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  color: var(--tc-navy-text);
  text-align: center;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* Only one CTA button (Contact Us) for this property — the bar still
   uses flex/space-between/wrap so it holds up fine with a single button
   instead of Landing's two. */
.tc-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid #e3e9ec;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 22px;
}

.tc-cta-text {
  font-family: 'Mulish', sans-serif;
  color: var(--tc-navy-text);
  flex: 1;
  min-width: 220px;
  margin: 0;
}

.tc-cta-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tc-thankyou {
  text-align: center;
}

.tc-thankyou h3 {
  font-family: 'Prompt', sans-serif;
  font-weight: 300;
  color: var(--tc-navy);
  margin: 0 0 16px;
}

.tc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}