/*
 * Selectorul de decoruri al blatului (`decor-ui.js`), comun pentru
 * configuratorul de blaturi si bucatarie. Mutat din `style.css` al
 * configuratorului, neschimbat; culorile au rezerva cu valorile de acolo,
 * pentru paginile care nu le definesc.
 */

/* ------------------------------------------------- selectorul de decoruri */

/* Decorul ales sta in capul sectiunii, intre titlu si chevron:
   „Decor            5821 · Ulm Altura · LIN   ⌄" */
.pd-ales {
  margin-left: auto; padding-left: 12px; min-width: 0;
  /* la fel de mare si de apasat ca titlul „Decor" de langa el */
  font-size: 15px; font-weight: 600; color: var(--text, #23211e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pd-cauta {
  display: block; width: 100%; box-sizing: border-box; padding: 6px 9px;
  border: 1px solid var(--linie, #d9d5cf); border-radius: 6px;
  font: inherit; font-size: 13px; outline: none; background: #fff;
}
#pd-cauta:focus { border-color: var(--accent, #1f6f4a); }
#pd-lista {
  /* grila sta in meniu, deci se deruleaza in ea, nu impinge panoul in jos */
  max-height: 300px; overflow-y: auto; margin-top: 8px; padding: 2px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  /* max-content, altfel randurile "auto" se strang sa incapa in panou
     (cardurile au overflow hidden, deci minimul lor e zero) si taie textul */
  grid-auto-rows: max-content;
  align-content: start;
}
#pd-lista > p { grid-column: 1 / -1; margin: 4px 2px; }
.pd-card {
  border: 1px solid var(--linie, #d9d5cf); border-radius: 0; overflow: hidden;
  background: #fff; cursor: pointer; padding: 0; text-align: left;
  font: inherit; display: flex; flex-direction: column;
}
.pd-card:hover { border-color: var(--sters, #6f6a63); }
.pd-card.activ { outline: 2px solid var(--accent, #1f6f4a); outline-offset: -1px; }
.pd-card img {
  display: block; width: 100%; height: 64px; object-fit: cover;
  background: #efedea;
  flex: 0 0 64px;   /* altfel grila strange randurile in loc sa dea scroll */
}
.pd-card .pd-text {
  padding: 4px 6px 5px; font-size: 11px; line-height: 1.3;
  flex-shrink: 0;
}
.pd-chips { flex-shrink: 0; }
.pd-card .pd-cod { font-weight: 600; }
.pd-card .pd-nume {
  color: var(--sters, #6f6a63);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-chips { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 5px 5px; }
.pd-chip {
  border: 1px solid var(--linie, #d9d5cf); border-radius: 10px; background: #fff;
  font: inherit; font-size: 10.5px; padding: 1px 7px; cursor: pointer;
  color: var(--sters, #6f6a63);
}
.pd-chip:hover { border-color: var(--accent, #1f6f4a); color: var(--text, #23211e); }
.pd-chip.activ { background: var(--accent, #1f6f4a); border-color: var(--accent, #1f6f4a); color: #fff; }
/* deasupra casetei de cautare: cate un card pe tipul de blat */
.pd-tipuri {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 8px;
}
.pd-tip {
  border: 1px solid var(--linie, #d9d5cf); border-radius: 0; background: #fff;
  padding: 0; cursor: pointer; font: inherit; text-align: left;
  display: flex; flex-direction: column; overflow: hidden;
}
.pd-tip:hover { border-color: var(--sters, #6f6a63); }
.pd-tip.activ { outline: 2px solid var(--accent, #1f6f4a); outline-offset: -1px; }
/* paginile cu stil propriu pe `button.activ` (bucataria) nu au voie sa-l
   inchida: cardul ales ramane alb, doar cu conturul verde, ca in configurator */
.pd-tip.activ { background: #fff; color: var(--text, #23211e); }
.pd-tip img {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; max-height: 96px;
  object-fit: cover; background: #efedea;
}
.pd-tip-text { padding: 4px 6px 5px; font-size: 11px; line-height: 1.3; }
.pd-tip-text b { display: block; font-weight: 600; }
.pd-tip-text span { color: var(--sters, #6f6a63); }


/* Randurile de sub „Decor" (materialul, cantul, miezul, structura), ca
   `#decor-detalii` din configurator; in bucatarie stau in panoul blatului. */
.pd-detalii { margin: 2px 0 10px; }
.pd-detalii span {
  display: block; font-size: 15px; font-weight: 600; color: var(--text, #23211e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}