/*
 * The contact page and the quote form the Craftprintero plugin renders into it.
 *
 * The markup comes from the plugin (`Enquiry\Ui\QuoteFormBlock`), the bytes stay in the
 * theme: the ADR keeps `assets/` on this side of the line, and the fallback this page
 * prints when the plugin is deactivated uses the same classes, so an unstyled state
 * cannot appear either way.
 *
 * Authored mobile-first on the theme tokens: base rules are the 390px layout, the single
 * min-width query adds the two-column form. Square corners, 2px rules, amber as an
 * accent only — the same clothes as the product form.
 */

.cp-contacto__head {
  max-width: 44rem;
}

.cp-contacto__lead {
  margin-top: var(--cp-space-sm);
  color: var(--cp-graphite);
  font-size: var(--cp-text-lg);
  line-height: 1.45;
}

.cp-contacto__intro {
  margin-top: var(--cp-space-md);
  max-width: 44rem;
}

/* The form, and the confirmation that replaces it. */
.cp-quote {
  margin-top: var(--cp-space-lg);
  padding: var(--cp-space-md);
  background: var(--cp-sheet);
  border: var(--cp-border) solid var(--cp-ink);
}

.cp-quote__title,
.cp-quote__done-title {
  font-size: var(--cp-text-xl);
}

.cp-quote__title::after,
.cp-quote__done-title::after {
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: var(--cp-space-2xs);
  background: var(--cp-amber);
  content: "";
}

.cp-quote__intro,
.cp-quote__done-lead {
  margin: var(--cp-space-sm) 0 var(--cp-space-md);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
  line-height: 1.55;
  max-width: 44rem;
}

.cp-quote__done-lead strong {
  color: var(--cp-ink);
}

.cp-quote__done-note {
  margin-bottom: var(--cp-space-md);
  font-size: var(--cp-text-sm);
}

/* The one refusal that is about the whole request, not about a field. */
.cp-quote__alert {
  margin-bottom: var(--cp-space-md);
  padding: var(--cp-space-xs) var(--cp-space-sm);
  border-left: 4px solid var(--cp-danger);
  background: var(--cp-page);
  color: var(--cp-danger);
  font-size: var(--cp-text-sm);
  font-weight: 600;
}

.cp-quote__field {
  margin: 0 0 var(--cp-space-sm);
}

.cp-quote__field label {
  display: block;
  margin-bottom: var(--cp-space-2xs);
  font-size: var(--cp-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cp-quote__req {
  color: var(--cp-danger);
}

.cp-quote__optional {
  color: var(--cp-graphite);
  font-weight: 400;
}

.cp-quote__field input,
.cp-quote__field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cp-control-target-min);
  padding: 0.75rem 0.875rem;
  background: var(--cp-page);
  border: var(--cp-border) solid var(--cp-ink);
  border-radius: 0;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  /* Below 16px iOS zooms the viewport on focus and leaves it there — REQ-22. The floor
     is a token so no page stylesheet can quietly undercut it. */
  font-size: var(--cp-control-font-min);
  line-height: 1.45;
}

.cp-quote__field textarea {
  resize: vertical;
}

.cp-quote__field input[type="file"] {
  padding: 0.625rem 0.875rem;
}

.cp-quote__field input[type="file"]::file-selector-button {
  margin-right: var(--cp-space-xs);
  padding: 0.375rem 0.75rem;
  background: var(--cp-ink);
  border: 0;
  border-radius: 0;
  color: var(--cp-sheet);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.cp-quote__field input::placeholder,
.cp-quote__field textarea::placeholder {
  color: var(--cp-graphite);
  opacity: 1;
}

.cp-quote__field input:focus,
.cp-quote__field textarea:focus {
  background: var(--cp-sheet);
  outline: 3px solid var(--cp-amber);
  outline-offset: 1px;
}

.cp-quote__field.has-error input,
.cp-quote__field.has-error textarea {
  border-color: var(--cp-danger);
}

.cp-quote__hint {
  display: block;
  margin-top: var(--cp-space-2xs);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.45;
}

.cp-quote__error {
  display: block;
  margin-top: var(--cp-space-2xs);
  color: var(--cp-danger);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  line-height: 1.45;
}

/*
 * The honeypot. Taken out of the layout and out of the accessibility tree, but not with
 * `display: none` — a submitter that reads the markup skips what the markup itself calls
 * hidden, and this field only works if it looks real to one.
 */
.cp-quote__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cp-quote__actions {
  margin: var(--cp-space-md) 0 0;
}

.cp-quote__actions .cp-button {
  width: 100%;
}

.cp-quote__fineprint {
  margin: var(--cp-space-md) 0 0;
  padding-top: var(--cp-space-sm);
  border-top: var(--cp-border-hair) solid var(--cp-line);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  line-height: 1.5;
}

.cp-quote__fineprint a {
  color: var(--cp-amber-ink);
  font-weight: 600;
}

/* What the shop can state without the owner supplying anything. */
.cp-contacto__facts {
  margin-top: var(--cp-space-lg);
}

.cp-contacto__facts-title {
  margin-bottom: var(--cp-space-sm);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-contacto__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cp-space-sm);
  margin: 0;
}

.cp-contacto__item {
  padding-top: var(--cp-space-sm);
  border-top: var(--cp-border-hair) solid var(--cp-line);
}

.cp-contacto__item dt {
  font-size: var(--cp-text-sm);
  font-weight: 700;
}

.cp-contacto__item dd {
  margin: var(--cp-space-2xs) 0 0;
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
  line-height: 1.5;
}

@media (min-width: 48rem) {
  .cp-quote {
    padding: var(--cp-space-lg);
  }

  .cp-quote__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--cp-space-md);
  }

  /* Everything that is not one of the two short inputs spans the form. */
  .cp-quote__form > :not(.cp-quote__field),
  .cp-quote__field--wide {
    grid-column: 1 / -1;
  }

  .cp-quote__actions .cp-button {
    width: auto;
    min-width: 16rem;
  }

  .cp-contacto__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cp-space-md);
  }
}