/* dobierz/dobierz.css — PEŁNY PLIK (KROK 1: zdjęcia obrócone 90°, kafelki 1 pod drugim) */

.dobierzWrap{ padding:10px; }
.dobierzMuted{ opacity:.85; margin-top:6px; }

.dobierzProgress{ display:flex; gap:6px; margin:10px 0 16px; }
.pDot{ width:10px; height:10px; border-radius:999px; background:#444; display:inline-block; }
.pDot.isOn{ background:#ff8a00; }

.dobierzQ{ margin: 14px 0 10px; font-weight:800; }

/* ===== KAFELKI (ZAWSZE 1 KOLUMNA) ===== */
.dobierzTiles3{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.dobierzTiles2{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.dobierzTile{ display:block; }
.dobierzTile input{ position:absolute; opacity:0; pointer-events:none; }

.dobierzCard{
  display:block;
  border:1px solid #ddd;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  max-width:100%;
}

/* ===== OBRAZKI ===== */
.dobierzPhoto{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
  object-position: center;
  background:#fff;
}

/* ===== TEKST ===== */
.dobierzLabel{
  display:block;
  padding:10px 12px;
  font-weight:800;
  color:#000;
}
.dobierzHint{
  display:block;
  margin-top:6px;
  opacity:.85;
  font-size:.95em;
}
.dobierzIcon{
  font-weight:900;
  font-size:26px;
  line-height:1;
  display:inline-block;
}

/* ===== INTERAKCJE ===== */
.dobierzTile:hover .dobierzCard{ border-color:#ff8a00; }
.dobierzTile input:checked + .dobierzCard{
  border-color:#ff8a00;
  box-shadow:0 0 0 2px rgba(255,138,0,.25);
}

/* ===== AKCJE ===== */
.dobierzActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.dobierzBtn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#ff8a00;
  color:#000;
  cursor:pointer;
}
.dobierzBtn.ghost{ background:#fff; }
.dobierzBtn:disabled{ opacity:.55; cursor:not-allowed; }

.dobierzResult{
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  padding:12px;
}

/* === KROK 1: powiększanie obrazków (ustalone) === */
.dobierzTiles3,.dobierzTiles2{ overflow: visible; }
.dobierzTile{ position:relative; overflow: visible; }
.dobierzCard{
  position:relative;
  overflow: visible;
  transform-origin: bottom center;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .dobierzForm[data-step="1"] .dobierzTile:hover .dobierzCard{
    transform: scale(2.1);
    z-index:30;
    box-shadow:0 20px 45px rgba(0,0,0,.4);
  }
  .dobierzForm:not([data-step="1"]) .dobierzTile:hover .dobierzCard{
    transform-origin:center center;
    transform: scale(1.12);
    z-index:10;
    box-shadow:0 14px 35px rgba(0,0,0,.35);
  }
}

/* === Formularz wyboru auta: większe, kontrastowe === */
.dobierzFields{ display:grid; gap:14px; margin-top:10px; }
.dobierzLabelTxt{ display:block; font-weight:800; margin-bottom:6px; }
.dobierzInput.big, .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;
}
.dobierzInput.big:focus, .dobierzSelect.big:focus{
  outline:none;
  border-color:#ff8a00;
  box-shadow:0 0 0 3px rgba(255,138,0,.18);
}
@media (min-width: 900px){
  .dobierzInput.big, .dobierzSelect.big{ font-size:20px; }
}
.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;
}
.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;
}
.typeOpt:last-child{ border-bottom:0; }
.typeOpt:hover{ background: rgba(255,138,0,.18); }
.dobierzHint{ display:block; margin-top:6px; font-size:14px; opacity:.9; }
.dobierzError{ margin:6px 0 0; color:#b00020; font-weight:800; min-height:1.3em; }


/* === DESKTOP: KROK 1 – 3 kafelki obok siebie === */
@media (min-width: 900px){
  .dobierzForm[data-step="1"] .dobierzTiles3{
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
  }
}