/* ---- Wrapper ---------------------------------------------------- */
.dv-wrap{
  background:#f3f5f7;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.dv-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#152026;
  margin-bottom:12px;
  line-height:1.2;
}

.dv-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background:#e2f1e2;
  color:#2f8f2f;
  font-size:14px;
}

/* ---- Grid & Controls ------------------------------------------- */
/* Desktop: 7 columns (6 selects + button) */
.dv-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
}

.dv-grid select,
.dv-btn{
  height:44px;
  border-radius:10px;
  border:1px solid #d7dbe0;
  background:#fff;
  padding:0 12px;
  font-size:14px;
  color:#23313a;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Nice focus */
.dv-grid select:focus{
  border-color:#2f8f2f;
  box-shadow:0 0 0 3px rgba(47,143,47,.12);
}

/* Disabled look */
.dv-grid select:disabled{
  background:#f8fafb;
  color:#8b98a1;
  cursor:not-allowed;
}

/* Button */
.dv-btn{
  background:#2f8f2f;
  color:#fff;
  border:none;
  font-weight:700;
  cursor:pointer;
}
.dv-btn:hover{ filter:brightness(0.98); }
.dv-btn:active{ transform:translateY(1px); }
.dv-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Helper text */
.dv-help{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:#5d6b75;
}

/* ---- Mobile tweaks ---------------------------------------------- */
/* 2 columns on mobile for compactness */
@media (max-width: 768px){
  .dv-grid{ grid-template-columns: 1fr 1fr; }
  /* Make search button span full width when visible */
  #dv-search{ grid-column: span 2; }
}

/* Prevent initial flash of all fields on mobile:
   hide everything after the first two controls.
   The JS .show() calls will reveal as user progresses. */
@media (max-width: 768px){
  .dv-grid > :nth-child(n+3){ display:none; }  /* body, year, engine, hp, button hidden initially */
}

/* Slightly larger touch targets on very small phones */
@media (max-width: 375px){
  .dv-grid select, .dv-btn { height:48px; font-size:15px; }
}


/* --- Always-show dropdown arrow (cross-browser) --- */
:root{
  /* SVG chevron (color #5d6b75). Change hex to your brand if you like. */
  --dv-arrow: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6b75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.dv-grid select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;                 /* remove native arrow */
  background: #fff var(--dv-arrow) no-repeat right 12px center;
  background-size: 14px 14px;
  padding-right: 38px;              /* room for the arrow */
}

/* Keep arrow visible when disabled */
.dv-grid select:disabled{
  background: #f8fafb var(--dv-arrow) no-repeat right 12px center;
  background-size: 14px 14px;
}












/* Product page – Codes box */
.dv-codes-box{
  margin:16px 0 8px;
  background:#f7faf9;
  border:1px solid #e1ece6;
  border-radius:12px;
  padding:12px 14px;
}
.dv-codes-title{
  margin:0 0 8px; font-size:15px; font-weight:700; color:#134a29;
}
.dv-codes-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.dv-codes-list li{ font-size:14px; color:#22313a; }
.dv-codes-list strong{ color:#2a6b44; margin-right:6px; }