/*
  l3-form.css — base styles for the L3 quote form.

  Lifted from Lead Generation Modules/L3-quote-request-form.html's own <style>
  block, which is NOT part of the injectable markup: without it the widget
  renders unstyled, which in practice means the success panel, every field
  error, and the honeypot input are all VISIBLE on load.

  Dropped from the original: the global reset (foundation-base.css owns it) and
  the demo page's `body` rule (it centres a standalone page and would centre
  this whole site). The progress-bar rules go too — that markup and its wiring
  are removed per Step 8.

  theme.css restyles these under `.contact__form .sl-*`, which outranks every
  bare `.sl-*` selector here regardless of load order.
*/
:root {
    --sl-accent: #7c3aed; --sl-accent-2: #06b6d4;
    --sl-bg: #f8f9fc; --sl-surface: #fff;
    --sl-text: #1e293b; --sl-text-muted: #64748b;
    --sl-border: #e2e8f0; --sl-radius: 10px;
    --sl-font: system-ui, -apple-system, sans-serif;
  }
  .sl-card {
    width: 100%; max-width: 580px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    padding: 2.5rem 2.25rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  .sl-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--sl-accent) 10%, transparent);
    color: var(--sl-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.85rem;
  }
  .sl-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.4rem; }
  .sl-header p  { color: var(--sl-text-muted); font-size: 0.9rem; margin-bottom: 1.75rem; line-height: 1.5; }

  .sl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 480px) { .sl-row { grid-template-columns: 1fr; } }

  /* City / State / ZIP — city takes the slack, state+ZIP stay narrow */
  .sl-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
  @media (max-width: 480px) { .sl-row-3 { grid-template-columns: 1fr; } }

  .sl-field { margin-bottom: 1.1rem; }
  .sl-label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--sl-text); margin-bottom: 0.4rem;
  }
  .sl-label .req { color: var(--sl-accent); margin-left: 2px; }

  .sl-input, .sl-select, .sl-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--sl-border);
    border-radius: calc(var(--sl-radius) - 2px);
    background: var(--sl-bg);
    color: var(--sl-text);
    font-size: 0.95rem;
    font-family: var(--sl-font);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .sl-select { appearance: none; 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='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.25rem; }
  .sl-input:focus, .sl-select:focus, .sl-textarea:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 12%, transparent);
  }
  .sl-input.error, .sl-select.error, .sl-textarea.error { border-color: #ef4444; }
  .sl-textarea { resize: vertical; min-height: 100px; }

  .sl-err { font-size: 0.78rem; color: #ef4444; margin-top: 0.3rem; display:none; }
  .sl-err.show { display: block; }

  .sl-hp { position:absolute; left:-9999px; opacity:0; pointer-events:none; }

  /* Progress bar for long form feel */

  .sl-divider {
    border: none; border-top: 1px solid var(--sl-border);
    margin: 1.5rem 0;
  }
  .sl-section-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--sl-text-muted);
    margin-bottom: 1rem;
  }

  .sl-btn {
    width: 100%; padding: 0.85rem; border: none;
    border-radius: calc(var(--sl-radius) - 2px);
    background: linear-gradient(135deg, var(--sl-accent), var(--sl-accent-2));
    color: #fff; font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s, transform 0.1s;
    margin-top: 0.75rem;
  }
  .sl-btn:hover:not(:disabled) { opacity: 0.9; }
  .sl-btn:active:not(:disabled){ transform: scale(0.98); }
  .sl-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .sl-btn .sl-spin {
    display:none; width:18px; height:18px;
    border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
    border-radius:50%; animation:spin 0.7s linear infinite; margin:0 auto;
  }
  .sl-btn.loading .sl-btn-text { display:none; }
  .sl-btn.loading .sl-spin     { display:block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .sl-global-err {
    background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
    border-radius:8px; padding:0.65rem 0.85rem; font-size:0.875rem;
    margin-bottom:1rem; display:none;
  }
  .sl-global-err.show { display: block; }

  .sl-success { display:none; text-align:center; padding:2rem 1rem; }
  .sl-success.show { display:block; }
  .sl-success-icon {
    width:60px; height:60px; margin:0 auto 1rem;
    background:color-mix(in srgb, var(--sl-accent) 12%, transparent);
    border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  }
  .sl-success h3 { font-size:1.25rem; font-weight:800; margin-bottom:0.5rem; }
  .sl-success p  { color:var(--sl-text-muted); font-size:0.9rem; }
  .sl-form-wrap.hide { display:none; }