/**
 * AUTOLINE Finder — component styles (new design system).
 * Block namespace is `.alf` ON PURPOSE: the theme's custom.css already ships an
 * unrelated `.al-finder` card component (title + image + legacy wpce widget), so this
 * new finder must NOT reuse that name. Self-contained + portable: reads design tokens
 * when al-design-tokens.css is loaded, falls back to literals otherwise. Interactive
 * controls are scoped under `.alf` so they out-specify WoodMart's `.wd select` form rules.
 */
.alf{
  --alf-navy:var(--al-blue-700,#003874);
  --alf-navy-600:var(--al-blue-600,#0a4a8c);
  --alf-amber:var(--al-amber-500,#f5a623);
  --alf-amber-600:var(--al-amber-600,#d97e00);
  --alf-ink:var(--al-ink-900,#14181f);
  --alf-ink-500:var(--al-ink-500,#69727f);
  --alf-line:var(--al-line-300,#d3d8df);
  --alf-bg:var(--al-bg-000,#ffffff);
  --alf-bg-100:var(--al-bg-100,#f5f7f9);
  --alf-danger:var(--al-danger-500,#e0392f);
  --alf-radius:var(--al-radius-md,6px);
  --alf-font:var(--al-font-sans,"Inter","Noto Sans",system-ui,sans-serif);
  font-family:var(--alf-font);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  margin:0;padding:0;border:0;background:none;
}
.alf *{box-sizing:border-box}
.alf__label{flex:0 0 100%;margin:0 0 2px;font-size:.875rem;font-weight:700;color:var(--alf-ink)}
.alf__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0;flex:1 1 auto}
.alf__field{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0}
.alf--row .alf__form>.alf__field{flex:1 1 170px;min-width:140px}
.alf--row .alf__form>.alf__field--submit{flex:0 0 auto;min-width:0}
.alf--stack .alf__form{flex-direction:column;align-items:stretch}
.alf__field-label{font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--alf-ink-500)}

.alf .alf__select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;height:auto;min-height:46px;max-width:100%;margin:0;padding:10px 38px 10px 13px;
  font-family:inherit;font-size:.9375rem;line-height:1.3;color:var(--alf-ink);
  background-color:var(--alf-bg);border:1px solid var(--alf-line);border-radius:var(--alf-radius);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23003874' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px 8px;
  cursor:pointer;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.alf .alf__select:hover{border-color:var(--alf-navy-600)}
.alf .alf__select:focus{outline:0;border-color:var(--alf-navy);box-shadow:0 0 0 3px rgba(22,96,168,.28)}
.alf .alf__select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--alf-bg-100)}

.alf .alf__submit{
  -webkit-appearance:none;appearance:none;
  height:auto;min-height:46px;width:auto;margin:0;padding:10px 26px;border:0;border-radius:var(--alf-radius);
  background:var(--alf-amber);color:var(--alf-ink);
  font-family:inherit;font-size:.9375rem;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,transform .05s ease;
}
.alf .alf__submit:hover{background:var(--alf-amber-600)}
.alf .alf__submit:active{transform:translateY(1px)}
.alf .alf__submit:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(22,96,168,.4)}

.alf.alf--loading{cursor:progress}
.alf.alf--loading .alf__select{opacity:.7}
.alf.alf--invalid .alf__select:not(:disabled){border-color:var(--alf-danger)}

@media(max-width:640px){
  .alf,.alf__form{gap:8px}
  .alf--row .alf__form>.alf__field{flex:1 1 100%}
  .alf--row .alf__form>.alf__field--submit{flex:1 1 100%}
  .alf .alf__submit{width:100%}
}
