/* ===========================================================================
   MiniDesk lead form — Computer Works skin
   ---------------------------------------------------------------------------
   Styles the <minidesk-lead-form> web component through its ::part() API so
   the embedded form matches the site's own inputs, labels and buttons
   (see the critical CSS in views/partials/head.ejs).

   Hand-written, NOT Tailwind-generated: edit this file directly, no build
   step. Linked from views/layout.ejs only when the embed is configured.

   Site tokens used here (tailwind.config.js):
     primary #0170BB   primary-dark #015a96   text-primary #1a1a2e
     text-secondary #5d6c82   border #e2e8f0
   =========================================================================== */

minidesk-lead-form {
  display: block;
  /* The site-wide reset in app.css sets cursor/user-select on every element,
     and both properties inherit across the shadow boundary. Reset them on the
     host so the fields inside stay selectable and show a text caret. */
  cursor: auto;
  -webkit-user-select: text;
  user-select: text;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  --minidesk-lead-accent: #0170bb;
  --minidesk-lead-background: #ffffff;
  --minidesk-lead-text: #1a1a2e;
  --minidesk-lead-border: #e2e8f0;
  --minidesk-lead-button-text: #ffffff;
  --minidesk-lead-error: #dc2626;
}

/* The surrounding card already provides padding, border and shadow. */
minidesk-lead-form::part(panel) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The page supplies the visible heading and intro copy. The component's
   heading stays in the accessibility tree (it names the form section). */
minidesk-lead-form::part(heading) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
minidesk-lead-form::part(introduction) {
  display: none;
}

minidesk-lead-form::part(form),
minidesk-lead-form::part(fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Matches "grid grid-cols-1 sm:grid-cols-2 gap-4" on the old form. */
minidesk-lead-form::part(field-grid) {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

minidesk-lead-form::part(field) {
  gap: 0.25rem;
}

/* Matches "block text-sm font-medium mb-1". */
minidesk-lead-form::part(label) {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a2e;
}
minidesk-lead-form::part(required-indicator) {
  color: #dc2626;
}

/* Matches "w-full px-3 py-2 border border-border rounded-lg bg-white". */
minidesk-lead-form::part(control) {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1a1a2e;
  font-weight: 400;
  transition: box-shadow 0.3s ease, border-color 0.25s ease;
}
minidesk-lead-form::part(textarea) {
  min-height: 6.5rem;
  resize: vertical;
}

/* The site's "focus:ring-2 focus:ring-primary/50" treatment. */
minidesk-lead-form::part(control):focus {
  outline: none;
  border-color: rgba(1, 112, 187, 0.45);
  box-shadow: 0 0 0 2px rgba(1, 112, 187, 0.5);
}
minidesk-lead-form::part(control):focus-visible,
minidesk-lead-form::part(submit-button):focus-visible,
minidesk-lead-form::part(status):focus-visible {
  outline: 2px solid #0170bb;
  outline-offset: 2px;
}
minidesk-lead-form::part(control):disabled {
  background: #f8fafc;
  opacity: 0.75;
}

/* Matches the "Phone or email is required..." helper text. */
minidesk-lead-form::part(contact-hint),
minidesk-lead-form::part(required-note) {
  margin: -0.25rem 0 1rem;
  color: #5d6c82;
  font-size: 0.75rem;
  font-weight: 400;
}

/* Matches ".btn .btn-primary w-full py-3". */
minidesk-lead-form::part(submit-button) {
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0.9rem;
  background: #0170bb;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s ease, opacity 0.25s ease;
}
minidesk-lead-form::part(submit-button):hover {
  background: #015a96;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(1, 112, 187, 0.55);
}
minidesk-lead-form::part(submit-button):active {
  transform: translateY(0) scale(0.98);
}

/* Status messages mirror showFormSuccess()/showFormError() in app.js. */
minidesk-lead-form::part(status) {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}
minidesk-lead-form::part(status-info) {
  border-color: rgba(1, 112, 187, 0.2);
  background: #e8f4fc;
  color: #015a96;
}
minidesk-lead-form::part(status-success) {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
minidesk-lead-form::part(status-error) {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

/* Two columns from the "sm" breakpoint, like the old form. */
@media (min-width: 640px) {
  minidesk-lead-form::part(field-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Compact variant: the "Book a Repair" modal ===== */
.cw-lead-form--compact::part(field-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cw-lead-form--compact::part(label) {
  font-size: 0.75rem;
}
.cw-lead-form--compact::part(control) {
  font-size: 0.875rem;
}
.cw-lead-form--compact::part(textarea) {
  min-height: 4.5rem;
}
.cw-lead-form--compact::part(contact-hint),
.cw-lead-form--compact::part(required-note) {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.6875rem;
}
.cw-lead-form--compact::part(submit-button) {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.cw-lead-form--compact::part(status) {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  minidesk-lead-form::part(control),
  minidesk-lead-form::part(submit-button) {
    transition: none;
  }
  minidesk-lead-form::part(submit-button):hover {
    transform: none;
  }
}