/* --- QN form styles: THEME-AWARE (uses current brand colors) --- */
/* Bridges WP theme presets -> local tokens (auto-matches brand) */
.sl-form{
  /* Map to theme presets (with safe fallbacks) */
  --brand: var(--wp--preset--color--primary, #0f8a6a);
  --brand-2: color-mix(in oklab, var(--wp--preset--color--primary, #0f8a6a) 78%, black);
  --text: var(--wp--preset--color--foreground, #0f172a);
  --muted: var(--wp--preset--color--secondary, #64748b);
  --card: var(--wp--preset--color--background, #ffffff);
  --ring: color-mix(in oklab, var(--wp--preset--color--primary, #0f8a6a) 35%, transparent);

  --shadow: var(--wp--preset--shadow--natural, 0 12px 30px rgba(2,8,23,.08));
  --radius: var(--wp--preset--radius--lg, 18px);
  --radius-sm: var(--wp--preset--radius--md, 12px);

  max-width: 720px;
  margin: 20px auto;
  padding: 18px;
  background: var(--card);
  border: 1px solid #e6e8eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

/* Ensure all child elements use border-box */
.sl-form *, .sl-form *::before, .sl-form *::after { box-sizing: border-box; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .sl-form { margin: 10px; padding: 12px; border-radius: var(--radius-sm); }
}

/* sections */
.sl-section{
  background: var(--card);
  border: 1px solid #e6e8eb;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
  width: 100%;
}
@media (max-width: 768px){ .sl-section { padding: 12px; margin-bottom: 12px; } }

.sl-section h4{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
}

/* grid */
.sl-grid{ display:grid; grid-template-columns:1fr; row-gap:12px; }

/* labels + fields */
.sl-form label { display:block; margin-bottom:12px; width:100%; }
.sl-form span, .sl-form .f > span{
  display:block; font-weight:600; font-size:14px; margin-bottom:6px; color: var(--text);
}

.sl-form input[type=text],
.sl-form input[type=email],
.sl-form input[type=tel],
.sl-form input[type=date],
.sl-form input[type=number],
.sl-form select,
.sl-form textarea{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border:1.5px solid #d8dbe1;
  border-radius: var(--radius-sm);
  min-height:42px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  background: var(--card);
  color: var(--text);
}
.sl-form textarea{ min-height:96px; resize:vertical; }

.sl-form input:focus,
.sl-form select:focus,
.sl-form textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* two-up rows */
.sl-row-2, .g-2{
  display:grid; grid-template-columns:2fr 1fr; gap:12px; width:100%;
}
@media (max-width: 768px){ .sl-row-2, .g-2{ grid-template-columns:1fr; gap:8px; } }
@media (max-width: 560px){ .sl-row-2, .g-2{ grid-template-columns:1fr; gap:8px; } }

/* fieldsets / radios / checkboxes */
.sl-form fieldset{
  border:1px dashed #e6e8eb;
  border-radius: var(--radius-sm);
  padding:12px; width:100%;
}
.sl-form legend{ font-weight:800; font-size:14px; color: var(--brand); }
.sl-form fieldset label{
  display:inline-flex; align-items:center; gap:8px;
  margin-right:14px; margin-bottom:8px;
}
@media (max-width: 768px){
  .sl-form fieldset label{ display:flex; margin-right:0; margin-bottom:12px; width:100%; }
}

/* button — brand gradient */
.sl-btn, .btn-primary, .sl-form button{
  width:100%;
  padding:12px 16px;
  border-radius:999px;
  border:none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 25%, transparent);
  transition: filter .15s ease, transform .02s ease-in;
}
.sl-btn:hover, .btn-primary:hover, .sl-form button:hover{ filter:brightness(1.05); }
.sl-btn:active, .btn-primary:active, .sl-form button:active{ transform: translateY(1px); }

/* unify WP button inside form to brand */
.sl-form .wp-element-button{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border:0; border-radius:999px;
}

/* helper / messages */
.sl-muted{ color:var(--muted); font-size:13px; }
.sl-thanks{
  max-width:720px; margin:12px auto 0; padding:12px 14px;
  border:1px solid color-mix(in oklab, var(--brand) 30%, #fff);
  background: color-mix(in oklab, var(--brand) 8%, #e9fff0);
  color: color-mix(in oklab, var(--brand) 50%, #125d2a);
  border-radius: var(--radius-sm);
}
@media (max-width: 768px){ .sl-thanks { margin:10px; } }

/* shorthand helpers */
.f{ display:flex; flex-direction:column; gap:6px; }
.f--2{ grid-column:1 / -1; }
.row{ display:grid; gap:12px; }
.row.g-2{ grid-template-columns:1fr 1fr; }

/* Mobile safety + autofill themeing */
@media (max-width: 480px){
  .sl-form { margin:5px; padding:10px; }
  .sl-section { padding:10px; }
}

.sl-form ::placeholder{ color:color-mix(in oklab, var(--text) 55%, #6b7280); opacity:.95; }
.sl-form input:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--card) inset;
  transition: background-color 9999s ease-out 0s;
}