/* dobierz_car.css — styl TYLKO dla kroku wyboru auta (po "nie mam nic na dachu")
   Uwaga: nie dotyka stylów kroku 1 (kafelki/hover). Wszystko jest scope'owane do .dobierzCarForm.
*/

.dobierzCarForm .dobierzQ{
  color:#fff;
}

.dobierzCarForm .dobierzMuted{
  color: rgba(255,255,255,.92);
  font-size:16px;
  line-height:1.35;
}
@media (min-width: 900px){
  .dobierzCarForm .dobierzMuted{ font-size:17px; }
}

/* etykiety */
.dobierzCarForm .dobierzLabelTxt{
  display:block;
  color:#fff;
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
  margin: 6px 0 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
@media (min-width: 900px){
  .dobierzCarForm .dobierzLabelTxt{ font-size:20px; }
}

/* pola */
.dobierzCarForm .dobierzFields{ display:grid; gap:14px; margin-top:10px; }

.dobierzCarForm .dobierzInput.big,
.dobierzCarForm .dobierzSelect.big{
  width:100%;
  font-size:18px;
  padding:12px 12px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
}
@media (min-width: 900px){
  .dobierzCarForm .dobierzInput.big,
  .dobierzCarForm .dobierzSelect.big{ font-size:20px; }
}

.dobierzCarForm .dobierzInput.big:focus,
.dobierzCarForm .dobierzSelect.big:focus{
  outline:none;
  border-color:#ff8a00;
  box-shadow:0 0 0 3px rgba(255,138,0,.18);
}

/* placeholder "Inny" ma być szary i znikać po wpisywaniu (to robi przeglądarka) */
.dobierzCarForm .dobierzInput.big::placeholder{
  color: rgba(0,0,0,.45);
  font-weight:800;
}

/* strzałka na końcu inputów (Marka/Model) */
.dobierzCarForm .dobierzInput.withArrow{
  padding-right:44px;
  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size:18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* lista podpowiedzi */
.dobierzCarForm .typeList{
  display:none;
  margin-top:6px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.12);
  max-height:260px;
  overflow-y:auto;
}
.dobierzCarForm .typeOpt{
  width:100%;
  text-align:left;
  padding:12px 12px;
  background:#fff;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:16px;
  font-weight:700;
  color:#111;
}
.dobierzCarForm .typeOpt:last-child{ border-bottom:0; }
.dobierzCarForm .typeOpt:hover{ background: rgba(255,138,0,.18); }

.dobierzCarForm .dobierzHint{
  display:block;
  margin-top:6px;
  font-size:14px;
  color: rgba(255,255,255,.9);
}

.dobierzCarForm .dobierzError{
  margin:6px 0 0;
  color:#ffb3b3;
  font-weight:900;
  min-height:1.3em;
}


/* === OVERRIDE: kontrast w kroku auta (NIE DOTYKA kroku 1) === */
.dobierzCarForm .dobierzLabelTxt{
  color:#fff !important;
  font-size:20px !important;
  font-weight:900 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  opacity: 1 !important;
}
.dobierzCarForm .dobierzHint{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
}
.dobierzCarForm .dobierzError{
  color:#ffd0d0 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
}

/* żeby lista była zawsze nad tłem/elementami */
.dobierzCarForm .dobierzLabel{ position: relative; }
.dobierzCarForm .typeList{ z-index: 9999 !important; }

/* placeholder jako "propozycja" */
.dobierzCarForm .dobierzInput::placeholder{
  color: rgba(0,0,0,.45) !important;
  font-weight: 800 !important;
}