/* =============================================
   FREE ESTIMATION FORM — free-estimation.css
   Scoped to .quote-form-wrapper
   Aggressively resets your site's global styles
   ============================================= */

/* ---------- Google Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ---------- CSS Variables ---------- */
.quote-form-wrapper {
  --qf-accent:        #7E01FD;
  --qf-accent-hover:  #480090;
  --qf-accent-light:  #f0ebff;
  --qf-accent-border: #480090;
  --qf-text-primary:   #070013;
  --qf-text-secondary: #6b7280;
  --qf-text-muted:     #9ca3af;
  --qf-bg-card:   #ffffff;
  --qf-bg-input:  #f9f9fb;
  --qf-border:       #D8D9DC;
  --qf-border-focus: #480090;
  --qf-radius-card:  10px;
  --qf-radius-input: 8px;
  --qf-radius-btn:   50px;
  --qf-shadow-card:  0 2px 24px rgba(108, 47, 255, 0.025);
  --qf-shadow-focus: 0 0 0 1px rgba(108, 47, 255, 0.15);
  --qf-font: 'Mulish', sans-serif;
}

/* ---------- Wrapper ---------- */
.quote-form-wrapper {
  font-family: var(--qf-font) !important;
  background: var(--qf-bg-card);
  border-radius: var(--qf-radius-card);
  box-shadow: var(--qf-shadow-card);
  padding: 40px 40px 36px;
  width: 100%;
  max-width: 820px;
  color: var(--qf-text-primary);
  box-sizing: border-box;
  /* Reset any inherited floats from the site */
  float: none !important;
  overflow: visible;
  margin: 0 auto;
    text-align: left;
}

/* Scoped box-sizing reset */
.quote-form-wrapper *,
.quote-form-wrapper *::before,
.quote-form-wrapper *::after {
  box-sizing: border-box;
}

/* ---------- Kill your site's global label float ----------
   Your site CSS has: label { float: left; padding: 0 0 10px 0; }
   This breaks the service grid. We reset it here.
   --------------------------------------------------------- */
.quote-form-wrapper label {
  float: none !important;
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--qf-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--qf-text-primary) !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------- Header ---------- */
.quote-form-wrapper .form-header {
  margin-bottom: 28px;
}
.quote-form-wrapper .form-header h2 {
  font-family: var(--qf-font) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--qf-text-primary) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  float: none !important;
}
.quote-form-wrapper .form-header p {
  font-size: 14px !important;
  color: var(--qf-text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---------- Section ---------- */
.quote-form-wrapper .form-section {
  margin-bottom: 24px;
}
.quote-form-wrapper .section-label {
  /* This is a <label> so the global reset above applies.
     Override specifically for the section label. */
  display: block !important;
  float: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  color: var(--qf-text-primary) !important;
  width: 100% !important;
}

/* ---------- Service Grid ---------- */
.quote-form-wrapper .service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* Reset any float-based layout from the site */
  float: none !important;
  width: 100% !important;
}

/* Hide native radio */
.quote-form-wrapper .service-card input[type="radio"] {
  display: none !important;
}

/* The <label> inside .service-card must not float */
.quote-form-wrapper .service-card {
  position: relative !important;
  border: 1.5px solid var(--qf-border) !important;
  border-radius: 10px !important;
  padding: 16px 14px 14px !important;
  cursor: pointer !important;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s !important;
  display: flex !important;
  flex-direction: column !important;
  background: #F8F6FF !important;
  margin: 0 !important;
  /* Override global label styles since .service-card IS the label */
  float: none !important;
  width: auto !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.quote-form-wrapper .service-card:hover {
  border-color: var(--qf-accent) !important;
  background: var(--qf-accent-light) !important;
}
.quote-form-wrapper .service-card:has(input:checked) {
  border-color: var(--qf-accent-border) !important;
  background: var(--qf-accent-light) !important;
  box-shadow: 0 0 0 2px rgba(108, 47, 255, 0.18) !important;
}

/* Card inner */
.quote-form-wrapper .card-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.quote-form-wrapper .card-inner span {
  font-family: var(--qf-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--qf-text-primary) !important;
  line-height: 1.3 !important;
}

/* Icon */
.quote-form-wrapper .card-icon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  background: none;
  border-radius: 8px !important;
  display: block !important;
}

/* Check dot */
.quote-form-wrapper .check-dot {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--qf-border) !important;
  background: #fff !important;
  transition: background 0.15s, border-color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Not a label so no float issues, but reset anyway */
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.quote-form-wrapper .check-dot::after {
  content: '' !important;
  display: none !important;
  width: 8px !important;
  height: 8px !important;
  background: #fff !important;
  border-radius: 50% !important;
}
.quote-form-wrapper .service-card:has(input:checked) .check-dot {
  background: var(--qf-accent) !important;
  border-color: var(--qf-accent) !important;
}
.quote-form-wrapper .service-card:has(input:checked) .check-dot::after {
  display: block !important;
}

/* ---------- Divider ---------- */
.quote-form-wrapper .divider {
  border: none !important;
  border-top: 1px solid var(--qf-border) !important;
  margin: 28px 0 !important;
  background: none !important;
  height: auto !important;
  float: none !important;
}

/* ---------- Fields Row ---------- */
.quote-form-wrapper .fields-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  float: none !important;
}

/* ---------- Field Group ---------- */
.quote-form-wrapper .field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  float: none !important;
}
.quote-form-wrapper .field-group.full-width {
  margin-bottom: 16px !important;
}
/* label inside field-group — inherits the reset above but restate for clarity */
.quote-form-wrapper .field-group label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--qf-text-primary) !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.quote-form-wrapper .required {
  color: #ef4444 !important;
  margin-left: 2px !important;
}
.quote-form-wrapper .optional {
  font-size: 12px !important;
  color: var(--qf-text-muted) !important;
  font-weight: 400 !important;
}

/* ---------- Inputs / Selects / Textarea ----------
   Your site CSS sets: height:40px, border-radius:0, float:left,
   border: 1px solid #E0DDE2 on ALL inputs globally.
   We override every property explicitly.
   --------------------------------------------------------- */
.quote-form-wrapper input[type="text"],
.quote-form-wrapper input[type="email"],
.quote-form-wrapper input[type="url"],
.quote-form-wrapper input[type="number"],
.quote-form-wrapper select,
.quote-form-wrapper textarea {
  font-family: var(--qf-font) !important;
  font-size: 14px !important;
  color: var(--qf-text-primary) !important;
  background: var(--qf-bg-input) !important;
  border: 1.5px solid var(--qf-border) !important;
  border-radius: var(--qf-radius-input) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  height: auto !important;          /* override site's height: 40px */
  min-height: 42px !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
  float: none !important;           /* override site's float: left */
  border-radius: var(--qf-radius-input) !important;
}
.quote-form-wrapper input::placeholder,
.quote-form-wrapper textarea::placeholder {
  color: var(--qf-text-muted) !important;
  opacity: 1 !important;
}
.quote-form-wrapper input:focus,
.quote-form-wrapper select:focus,
.quote-form-wrapper textarea:focus {
  border-color: var(--qf-border-focus) !important;
  border-width: 1.5px !important;
  box-shadow: var(--qf-shadow-focus) !important;
  background: #fff !important;
  outline: none !important;
}
.quote-form-wrapper textarea {
  resize: vertical !important;
  min-height: 120px !important;
  height: auto !important;
  line-height: 1.5 !important;
}

/* Select — override site's background-image (arrow-down-select.png) */
.quote-form-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-color: var(--qf-bg-input) !important;
  background-size: 12px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
.quote-form-wrapper select option[disabled] {
  color: var(--qf-text-muted) !important;
}

/* Error state */
.quote-form-wrapper input.has-error,
.quote-form-wrapper select.has-error,
.quote-form-wrapper textarea.has-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* ---------- Inline Errors ---------- */
.quote-form-wrapper .field-error {
  font-family: var(--qf-font) !important;
  font-size: 12px !important;
  color: #ef4444 !important;
  min-height: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---------- Submit Button ----------
   Your site CSS targets button { } and .btn { } globally,
   applying gradients, float, etc. Override all of it.
   --------------------------------------------------------- */
.quote-form-wrapper .form-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
  float: none !important;
}

.quote-form-wrapper #submit-btn {
  font-family: var(--qf-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--qf-accent) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--qf-radius-btn) !important;
  padding: 16px 48px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 4px 18px rgba(108, 47, 255, 0.32) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  vertical-align: middle !important;
}
.quote-form-wrapper #submit-btn:hover {
  background: var(--qf-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(108, 47, 255, 0.38) !important;
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
}
.quote-form-wrapper #submit-btn:active {
  transform: translateY(0) !important;
}
.quote-form-wrapper #submit-btn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.quote-form-wrapper .response-note {
  font-family: var(--qf-font) !important;
  font-size: 13px !important;
  color: var(--qf-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---------- Spinner ---------- */
.quote-form-wrapper .spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2.5px solid rgba(255, 255, 255, 0.4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: qf-spin 0.7s linear infinite !important;
  flex-shrink: 0 !important;
  background: none !important;
}
@keyframes qf-spin { to { transform: rotate(360deg); } }

/* ---------- Alerts ---------- */
.quote-form-wrapper .alert {
  margin-top: 18px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  font-family: var(--qf-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: 1px solid transparent !important;
  float: none !important;
}
.quote-form-wrapper .alert-success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #6ee7b7 !important;
}
.quote-form-wrapper .alert-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

/* ---------- Utility ---------- */
.quote-form-wrapper .hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .quote-form-wrapper {
    padding: 28px 20px !important;
  }
  .quote-form-wrapper .service-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .quote-form-wrapper .fields-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 380px) {
  .quote-form-wrapper .service-grid {
    grid-template-columns: 1fr !important;
  }
}