/**
 * Aalam Parts Finder — frontend widget defaults (Phase 2.7).
 *
 * Sensible baseline so the YMM and VIN finder widgets render legibly on
 * a fresh page even before the editor touches the Style tab. Every
 * Style tab control overrides via Elementor's per-widget injected CSS,
 * which has higher specificity (`{{WRAPPER}} .apf-finder ...`).
 *
 * Layout architecture (changed in phase2.7):
 *   - `.apf-finder` is a CSS Grid with a configurable column count
 *     (`grid-template-columns: repeat(N, 1fr)`) — phase2.6 used flex-wrap,
 *     which couldn't enforce "exactly N columns" reliably across viewports.
 *   - Each `<select>` is wrapped in `<span class="apf-select-wrap">` so the
 *     chevron can be a `::after` pseudo-element (selects can't host pseudo-
 *     elements directly). The chevron uses `mask-image` so its colour is
 *     controllable via `background-color` of the pseudo-element — the only
 *     cross-browser pattern that lets the editor pick a chevron colour
 *     without re-baking the SVG into an inline style.
 *   - The submit button gets `grid-column: 1 / -1` so it always spans the
 *     full row regardless of column count, then `justify-self` (set by the
 *     widget's Submit Button → Alignment control) decides whether it
 *     stretches, hugs left/right, or centres in that row.
 *
 * Selectors mirror the widget markup contract documented in SCOPE 8.1
 * and used by the Style tab control selectors in
 * `Apf_Parts_Finder_Widget::register_controls()` and
 * `Apf_VIN_Finder_Widget::register_controls()`.
 *
 * Naming: keep `.apf-finder` / `.apf-vin-finder` stable — third-party
 * custom CSS may already target these.
 */

/* ===========================================================================
 * Parts Finder (YMM cascading dropdowns)
 * ======================================================================== */

.apf-finder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}

/* Each dropdown is wrapped so the chevron can ride on a pseudo-element. */
.apf-finder .apf-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.apf-finder select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  /* Chevron clearance is a logical-property variable so RTL inverts cleanly. */
  padding-inline-end: var(--apf-chevron-clearance, 32px);
  font-size: 14px;
  line-height: 1.4;
  color: #1d2327;
  background-color: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  cursor: pointer;
}

.apf-finder select:focus {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

.apf-finder select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Custom chevron — drawn via mask-image so background-color drives the
 * colour. Defaults sized for a 14px font; widget controls override the
 * `--apf-chevron-*` custom properties. */
.apf-finder .apf-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: var(--apf-chevron-edge-offset, 12px);
  width: var(--apf-chevron-size, 12px);
  height: var(--apf-chevron-size, 8px);
  transform: translateY(-50%);
  background-color: var(--apf-chevron-color, #1d2327);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

/* Submit button — owns its own grid row, full-width by default. The
 * Alignment control re-points `justify-self` (start | center | end | stretch). */
.apf-finder button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: stretch;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: #2271b1;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.apf-finder button[type="submit"]:hover {
  background-color: #135e96;
}

.apf-finder button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================================================================
 * VIN Finder (single 17-char input + submit) — kept as flex (only two items)
 * ======================================================================== */

.apf-vin-finder {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 0;
}

.apf-vin-finder input[type="text"] {
  flex: 1 1 280px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #1d2327;
  background-color: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.05em;
}

.apf-vin-finder input[type="text"]:focus {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

.apf-vin-finder button[type="submit"] {
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: #2271b1;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.apf-vin-finder button[type="submit"]:hover {
  background-color: #135e96;
}

.apf-vin-status {
  align-self: center;
  font-size: 13px;
  color: #50575e;
}

/* ---------------------------------------------------------------------------
 * Article search widget (Phase 4-search.1)
 * Single text input + submit. Defaults mirror the VIN finder.
 * ---------------------------------------------------------------------------
 */

.apf-article-search {
  margin: 0;
  padding: 0;
}

.apf-article-search-helper {
  margin: 0 0 10px;
  font-size: 13px;
  color: #50575e;
  line-height: 1.5;
}

.apf-article-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.apf-article-search input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.03em;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background-color: #fff;
}

.apf-article-search input[type="text"]:focus {
  outline: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
}

.apf-article-search button[type="submit"] {
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background-color: #2271b1;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.apf-article-search button[type="submit"]:hover {
  background-color: #135e96;
}

.apf-article-search-status {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #50575e;
}

.apf-article-search-status.apf-article-search-error {
  color: #b32d2e;
}