/* =========================================================
   PDV2 Selector — clean canonical stylesheet
   Keep this as the only CSS for the vehicle selector.
   ========================================================= */

/* Defense: never let decorative pseudo-elements eat clicks */
.pdv2-selector *::before,
.pdv2-selector *::after { pointer-events: none !important; }

/* Container */
.pdv2-selector {
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Title */
.pdv2-selector__title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #0071ce;
  margin: 0 0 18px 0;
  line-height: 1.4;
}

/* Form grid */
.pdv2-selector__form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
  align-items: end;
  margin: 0;
}
@media (max-width: 1024px){
  .pdv2-selector__form { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .pdv2-selector__form { grid-template-columns: repeat(1, minmax(0,1fr)); }
}

/* Field cell + step badge */
.pdv2-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pdv2-selector__form { counter-reset: pdv2step; }
.pdv2-field::before{
  content: counter(pdv2step);
  counter-increment: pdv2step;
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  background: #0071ce; color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

/* Selects (unified look) */
.pdv2-field select{
  width: 100%;
  padding: 10px 12px;
  padding-left: 32px;  /* room for step badge */
  border: 1px solid #cbd5e1;
  border-radius: 0;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 500;
  appearance: none;
  background-image:
     linear-gradient(to right, #d1d5db 1px, transparent 1px),
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 28px center, right 10px center;
  background-size: 1px 60%, 10px 6px;
  transition: border-color .25s, box-shadow .25s, background-color .25s, color .25s;
  cursor: pointer;
  position: relative; z-index: 1; /* sit above badge */
}

/* Placeholder tint until a value is chosen (requires option value="") */
.pdv2-field select:invalid:not(:disabled) { color: #64748b; }

/* Disabled (Model/Engine before Make is chosen) */
.pdv2-field select:disabled{
  background-color: #f8fafc;
  color: #94a3b8;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* Focus ring */
.pdv2-field select:focus{
  outline: none;
  border-color: #0071ce;
  box-shadow: 0 0 0 2px rgba(0,113,206,0.15);
  background-color: #fff;
  color: #0f172a;
}

/* Make the first enabled field look “active” to guide the user */
.pdv2-field select:not(:disabled):invalid{
  border-color: #0071ce;
  box-shadow: 0 0 0 2px rgba(0,113,206,0.12);
}

/* Actions */
.pdv2-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.pdv2-btn { border: 1px solid #0ea5e9; background: #0ea5e9; color:#fff; padding:10px 14px; font-weight:600; }
.pdv2-btn--primary { background:#0071ce; border-color:#0071ce; }
.pdv2-actions .pdv2-btn { width: auto; }
.pdv2-clear-vehicle { text-decoration: none; font-weight: 500; color:#0f172a; }

/* Optional pill (if you use it) */
.pdv2-pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:8px 12px; border:1px solid #cbd5e1; border-radius:999px; background:#f8fafc;
  font:500 14px/1.2 system-ui,Segoe UI,Roboto,Inter,sans-serif;
}

/* Containment hardening */
.pdv2-selector * { box-sizing: border-box; }
.elementor-widget-container .pdv2-selector { margin: 0; }

/* Flatten radii if you prefer square look */
.pdv2-selector,
.pdv2-field select,
.pdv2-actions .pdv2-btn { border-radius: 0; }

/* ============================
   PDV2 Selector – layout + button resets
   ============================ */

/* 1) One-column layout (you asked for stacked on small) */
.pdv2-selector__form{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:12px !important;
}

.pdv2-field,
.pdv2-actions{
  grid-column:1 / -1 !important;
}

/* Make inputs full width */
.pdv2-field select,
.pdv2-field input,
.pdv2-field .pdv2-input{
  width:100% !important;
}

/* 2) Actions row: Search expands, Clear is a 44px icon on the right */
.pdv2-selector__form .pdv2-actions{
  display:grid !important;
  grid-template-columns: 1fr 44px !important; /* Search | Clear-icon */
  gap:12px !important;
  align-items:stretch !important;
}

/* 3) Button sanity resets (prevents vertical text / letter stacking) */
.pdv2-actions .pdv2-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:44px !important;
  padding:10px 14px !important;

  /* hard resets for themes that rotate or stack text */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  transform:none !important;
  letter-spacing: normal !important;
  word-break: normal !important;
}

/* 4) Make “Search” the big button */
.pdv2-actions .pdv2-btn:not(.pdv2-clear){
  background:#2563eb !important;
  color:#fff !important;
  border:0 !important;
  border-radius:6px !important;
  font-weight:600 !important;
}

/* 5) Keep ONLY the icon-style clear button; hide any text clear */
.pdv2-actions .pdv2-clear:not(.pdv2-btn--icon){
  display:none !important;
}

/* 6) The clear icon button (always horizontal, fixed 44×44) */
.pdv2-actions .pdv2-btn--icon.pdv2-clear{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  background:#3b82f6 !important;
  border:0 !important;
  border-radius:4px !important;
}

/* Make any PNG/SVG arrow white */
.pdv2-actions .pdv2-btn--icon.pdv2-clear img{
  width:22px !important;
  height:22px !important;
  filter:brightness(0) invert(1) !important;
}