/* Desktop-enhanced styling for the Quote section */
#quote { padding-top: 0; }
/* Center heading and intro */
#quote .quote-head { text-align: center; margin: 0 auto 1rem; max-width: 720px; }

/* Carded form wrapper for desktop */
@media (min-width: 992px) {
  #quote .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1.5rem;
    align-items: start;
  }
  #quote .container > h2,
  #quote .container > p.lead,
  #quote .container > .alert {
    grid-column: 1 / -1;
  }
  #quote .container > form { grid-column: 1; }
  #quote .container > .quote-aside { grid-column: 2; position: sticky; top: 96px; align-self: start; }
}

/* Create a two-column form layout on desktop */
@media (min-width: 992px) {
  #quote .form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: .8rem;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
    border-top: 3px solid var(--primary);
  }
  #quote .form .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.2rem;
  }
  #quote .quote-aside {
    border: 1px solid #e5e7eb;
    border-radius: .8rem;
    padding: 1.1rem;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
    border-top: 3px solid var(--primary);
    background: #ffffff;
  }
}

/* Inputs with subtle icons */
#quote .field input {
  background-image: linear-gradient(#fff, #fff), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2399a1ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>');
  background-repeat: no-repeat;
  background-position: left top, calc(100% - .6rem) 50%;
  background-size: auto, 18px;
}
#quote .field input#phone {
  background-image: linear-gradient(#fff, #fff), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2399a1ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.14a2 2 0 0 1 2.11-.45c.74.27 1.53.45 2.34.57A2 2 0 0 1 22 16.92z"/></svg>');
}
#quote .field input#email {
  background-image: linear-gradient(#fff, #fff), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2399a1ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" opacity=".1"/><path d="m22 6-10 7L2 6"/><rect x="2" y="6" width="20" height="12" rx="2"/></svg>');
}

/* Submit area */
#quote .form .btn-primary {
  width: 100%;
}
@media (min-width: 768px) {
  #quote .form .btn-primary { width: auto; }
}

/* Section heading refinement */
#quote h2 { margin-bottom: .25rem; }
#quote .lead { margin-bottom: 1rem; }

/* Terms checkbox inline alignment */
#quote .terms-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}
#quote .terms-inline input[type="checkbox"] { margin: 0; }
@media (min-width: 768px) {
  #quote .terms-inline span { white-space: nowrap; }
}