/* ==========================================================================
   estimator.css — Floral Gatherings
   Page styles for estimator.html only. Loaded after styles.css and built
   from its tokens, so the page reads as part of the same site. Nothing here
   is sticky or floating (see the no-pushy-UX rule).
   ========================================================================== */

/* Same treatment styles.css gives #services-intro / #guides-intro. */
#estimator-intro .hero__eyebrow {
  text-align: center;
}

.estimator__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.estimator__step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.estimator__step-num {
  font-family: var(--ff-cta);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-tangerine);
  margin: 0;
}

.estimator__step-title {
  font-family: var(--ff-headline);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.6rem);
  color: var(--clr-text);
  margin: 0;
}

.estimator__hint,
.estimator__loading,
.estimator__empty {
  color: var(--clr-text-muted);
  font-size: 0.9375rem;
  margin: 0;
}


/* --- Step 1: occasion + size chips -------------------------------------- */

.estimator__events,
.estimator__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.estimator__sizes:empty {
  display: none;
}

.est-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ff-body);
  font-size: 0.875rem;
  padding: 0.55rem 0.95rem;
  border: 1.5px solid var(--clr-border);
  border-radius: 999px;
  background-color: #FFFDF8;
  color: var(--clr-text);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.est-chip:hover {
  border-color: var(--clr-coral);
}

.est-chip[aria-pressed="true"] {
  border-color: var(--clr-tangerine);
  background-color: rgba(227, 93, 47, 0.08);
}

.est-chip:focus-visible {
  outline: 2px solid var(--clr-tangerine);
  outline-offset: 2px;
}

.est-chip--size {
  font-size: 0.8125rem;
  padding: 0.45rem 0.85rem;
}


/* Party-size guide: live copy under the occasion chips. */
.estimator__party {
  max-width: 44rem;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--clr-text);
}

.estimator__party strong {
  font-family: var(--ff-headline);
  font-weight: 600;
  color: var(--clr-tangerine);
}


/* --- Steps 2 + 3 layout -------------------------------------------------- */

.estimator__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 960px) {
  .estimator__columns {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}


/* --- Step 2: arrangement tiles ------------------------------------------- */

.estimator__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.est-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 1rem 1.1rem;
  background-color: #FFFDF8;
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-coral);
  border-radius: 8px;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.est-item.is-active {
  border-top-color: var(--clr-tangerine);
  background-color: rgba(227, 93, 47, 0.05);
}

/* The icon doubles as a link to that piece's free guide (new tab). */
.est-item__guide {
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  border-radius: 6px;
}

.est-item__guide-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--clr-tangerine);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.est-item__guide:hover .est-item__icon,
.est-item__guide:focus-visible .est-item__icon {
  background-color: var(--clr-tangerine);
}

.est-item__guide:focus-visible {
  outline: 2px solid var(--clr-tangerine);
  outline-offset: 3px;
}

.est-item__icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--clr-espresso);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--transition-base);
}

.est-item.is-active .est-item__icon {
  background-color: var(--clr-tangerine);
}

.est-item__name {
  font-family: var(--ff-headline);
  font-weight: 600;
  font-size: 1rem;
  color: var(--clr-text);
  margin: 0;
}

.est-item__blurb {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  line-height: 1.45;
  margin: 0;
}

.est-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.est-stepper button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(63, 42, 30, 0.25);
  background: transparent;
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.est-stepper button:hover:not(:disabled) {
  border-color: var(--clr-tangerine);
  color: var(--clr-tangerine);
}

.est-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.est-stepper input {
  width: 3.25rem;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--clr-espresso);
  background-color: var(--clr-cream);
  border: 1.5px solid rgba(63, 42, 30, 0.2);
  border-radius: 4px;
  padding: 0.3rem 0.25rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.est-stepper input::-webkit-outer-spin-button,
.est-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.est-stepper button:focus-visible,
.est-stepper input:focus-visible {
  outline: 2px solid var(--clr-tangerine);
  outline-offset: 2px;
}


/* --- Step 3: the box ----------------------------------------------------- */

.estimator__box {
  background-color: #FFFDF8;
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 1.5rem;
}

.estimator__box-headline {
  font-family: var(--ff-headline);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--clr-text);
  margin: 0;
}

.estimator__box-headline strong {
  color: var(--clr-tangerine);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.estimator__materials {
  list-style: none;
  margin: 0;
  padding: 0;
}

.est-mat {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--clr-border);
}

.est-mat:last-child {
  border-bottom: none;
}

.est-mat__qty {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}

.est-mat__label {
  font-size: 0.9375rem;
  color: var(--clr-text);
}

.est-mat__purpose {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
}

.estimator__keep {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--clr-olive);
  margin: 0;
}


/* --- Step 4: the estimate ------------------------------------------------ */

.estimator-quote {
  text-align: center;
}

.estimator__price {
  max-width: 560px;
  margin: 1.5rem auto 0;
  padding: 1.75rem 1.5rem;
  border: 1.5px dashed rgba(63, 42, 30, 0.25);
  border-radius: 8px;
  background-color: var(--clr-cream);
  transition: border-color var(--transition-base);
}

.estimator__price[data-state="revealed"] {
  border-style: solid;
  border-color: var(--clr-tangerine);
}

.estimator__price-label,
.estimator__price-tax {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  margin: 0;
}

.estimator__price-value {
  font-family: var(--ff-headline);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--clr-tangerine);
  margin: 0.25rem 0;
  transition: filter 0.5s ease;
}

.estimator__price[data-state="locked"] .estimator__price-value,
.estimator__price[data-state="stale"] .estimator__price-value {
  filter: blur(10px);
  user-select: none;
}

.estimator__price-note {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  margin: 0.75rem 0 0;
}

.estimator__price[data-state="blocked"] .estimator__price-value {
  display: none;
}

/* The shared .contact-form rules restyle every <input>; give the consent
   checkbox its native look back. */
.estimator-form .est-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.15rem;
  padding: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--clr-tangerine);
}

.est-consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}

.est-consent a {
  color: var(--clr-tangerine);
}

/* Small visible labels for the optional region + date pair. */
.est-field-label {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  text-align: left;
  margin-bottom: 0.3rem;
}

/* Inline field messages: shown next to what's missing, cleared once fixed. */
.est-field-error {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--clr-tangerine);
  text-align: left;
  margin: 0.35rem 0 0;
}

.est-field-error--consent {
  padding-left: 1.8rem;
}

.estimator-form input[aria-invalid="true"] {
  border-color: var(--clr-tangerine);
}

.estimator-form .est-consent input[aria-invalid="true"] {
  outline: 2px solid var(--clr-tangerine);
  outline-offset: 2px;
}

/* Turnstile: zero height unless Cloudflare shows its one-tap check. */
.est-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.est-turnstile:empty {
  margin-top: 0;
}

.estimator__form-hint {
  font-size: 0.8125rem;
  color: var(--clr-text-muted);
  text-align: center;
  margin: 0.6rem 0 0;
}

.est-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.estimator__result {
  max-width: 560px;
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* display:flex above would otherwise override the hidden attribute. */
.estimator__result[hidden] {
  display: none;
}

.estimator__disclaimer {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
  margin: 0;
}

.estimator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .estimator__price-value,
  .est-item,
  .est-item__icon {
    transition: none;
  }
}