/* =============================================================================
   Hinnapäringu vorm. Laetakse ainult hinnapäringu lehel.
   ========================================================================== */

.pd-vorm-ala { margin-block: var(--pd-s-8) var(--pd-s-24); scroll-margin-top: 6rem; }

/* --- Teated -------------------------------------------------------------- */

.pd-teade {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  align-items: flex-start;
  padding: var(--pd-s-8);
  border-radius: var(--pd-raadius);
  margin-bottom: var(--pd-s-8);
}
.pd-teade h2 { font-size: var(--pd-t-xl); }
.pd-teade ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--pd-s-1); }
.pd-teade__lisa { font-size: var(--pd-t-sm); }

.pd-teade--ok {
  background: var(--pd-pind);
  border: 1px solid rgba(30, 122, 71, .35);
  border-left: 3px solid var(--pd-ok);
}
.pd-teade--ok h2 { color: var(--pd-ok); }

.pd-teade--viga {
  background: var(--pd-mark-hell);
  border: 1px solid rgba(232, 64, 42, .3);
  border-left: 3px solid var(--pd-viga);
}
.pd-teade--viga h2 { color: var(--pd-viga); }
.pd-teade--viga:focus { outline: none; }

/* --- Vormi karkass ------------------------------------------------------- */

/*
 * `max-width: 52rem` jättis vormist paremale tühja veeru. Vorm on nüüd
 * konteineri laiune; lugemismõõtu piiravad väljad ise (`--pool` on pool
 * rida) ja abitekstid.
 */
.pd-vorm { display: flex; flex-direction: column; gap: var(--pd-s-10); }

.pd-vorm__ruhm { border: 0; margin: 0; padding: 0; }

.pd-vorm__legend {
  display: flex; flex-direction: column; gap: var(--pd-s-1);
  width: 100%;
  padding: 0 0 var(--pd-s-4);
  margin-bottom: var(--pd-s-6);
  border-bottom: var(--pd-piir-tugev);
}
.pd-vorm__ruhm-nimi {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-xl);
  font-weight: 750;
  letter-spacing: -.015em;
}
.pd-vorm__ruhm-kirjeldus { font-size: var(--pd-t-sm); color: var(--pd-tint-3); }

.pd-vorm__valjad {
  display: grid;
  gap: var(--pd-s-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Üksik väli ---------------------------------------------------------- */

.pd-vali { display: flex; flex-direction: column; gap: var(--pd-s-2); grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .pd-vali--pool { grid-column: span 1; }
}

/*
 * Kõrvutiväljad olid eri kõrgustel: abitekstiga väli („Sellele aadressile
 * saadame hinnapakkumise") lükkas oma sisendi allapoole, kõrvalolev jäi üles.
 *
 * Ruudustiku lahtrid on niigi ühekõrgused (`align-items: stretch`), seega
 * piisab sisendi surumisest lahtri põhja. Kõik kõrvutiväljad on üherealised —
 * tekstialad on alati täislaiuses — nii et silt jääb üles, abitekst sildi alla
 * ja sisendid joonduvad omavahel.
 */
@media (min-width: 40rem) {
  .pd-vali--pool > :last-child { margin-top: auto; }
}

.pd-vali__silt {
  font-size: var(--pd-t-sm);
  font-weight: 620;
  color: var(--pd-tint);
  display: flex; align-items: baseline; gap: .3rem;
}
.pd-vali__tarn {
  color: var(--pd-mark-tekst);
  text-decoration: none;
  border: 0;
  font-weight: 700;
}
.pd-vali__abi { font-size: var(--pd-t-xs); color: var(--pd-tint-3); margin-top: calc(var(--pd-s-1) * -1); }

.pd-vali--tingimuslik[hidden] { display: none; }

/* --- Valikuread (raadio, märkeruut) -------------------------------------- */

.pd-valikud { display: flex; flex-wrap: wrap; gap: var(--pd-s-2); }
.pd-valikud--ruut { gap: var(--pd-s-2); }

.pd-valik {
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  padding: .5rem .85rem;
  background: var(--pd-pind);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  font-size: var(--pd-t-sm);
  cursor: pointer;
  transition: border-color var(--pd-kiire), background var(--pd-kiire);
}
.pd-valik:hover { border-color: var(--pd-tint); }
.pd-valik input { accent-color: var(--pd-mark); margin: 0; }
.pd-valik:has(input:checked) {
  border-color: var(--pd-mark);
  background: var(--pd-mark-hell);
}
.pd-valik:has(input:focus-visible) { outline: 2px solid var(--pd-teine-tekst); outline-offset: 2px; }

/* --- Trükikohtade valik -------------------------------------------------- */

/*
 * Paigutusvalik on nüüd diagramm ise — iga rõivas on märkeruudu silt.
 * Varem oli siin joonis ja selle kõrval eraldi märkeruutude nimekiri, mis
 * ütles sama asja teist korda. Ruudustiku ja lahtri stiilid elavad
 * components.css failis, sest sama komponent on kasutusel ka
 * standardpaigutuste lehel.
 */
.pd-vali .pd-paigutus { margin-top: var(--pd-s-1); }

/* --- Tootevalik ---------------------------------------------------------- */

.pd-tootevalik {
  display: flex; flex-direction: column; gap: var(--pd-s-2);
  padding: var(--pd-s-4);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
}

.pd-tootevalik__otsing input { width: 100%; }

.pd-tootevalik__loend {
  display: flex; flex-wrap: wrap; gap: var(--pd-s-2);
  font-size: var(--pd-t-xs);
}
.pd-tootevalik__loend[hidden] { display: none; }

.pd-kiip {
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  padding: .2rem .3rem .2rem .6rem;
  background: var(--pd-mark-hell);
  border: 1px solid rgba(232, 64, 42, .25);
  border-radius: var(--pd-raadius);
  color: var(--pd-mark-tume);
  max-width: 100%;
}
.pd-kiip__nimi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.pd-kiip__eemalda {
  border: 0; background: transparent; color: inherit;
  font-size: var(--pd-t-sm); line-height: 1; padding: .15rem .3rem;
  border-radius: 2px; cursor: pointer;
}
.pd-kiip__eemalda:hover { background: rgba(232, 64, 42, .16); }

.pd-tootevalik__ruhm { border-top: var(--pd-piir); }
.pd-tootevalik__ruhm[hidden] { display: none; }
.pd-tootevalik__ruhm summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--pd-s-3);
  padding: var(--pd-s-3) 0;
  cursor: pointer;
  font-size: var(--pd-t-sm);
  font-weight: 620;
}
.pd-tootevalik__arv {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  color: var(--pd-tint-3);
  font-variant-numeric: tabular-nums;
}

.pd-tootevalik__read {
  display: flex; flex-direction: column;
  max-height: 17rem; overflow-y: auto;
  padding-bottom: var(--pd-s-3);
}

/*
 * Rida on `div`, mitte `label`: sees on nii märkeruut kui link tootelehele
 * (#436). Labeli sees klõpsaks link ühtlasi märkeruutu.
 */
.pd-toote-rida {
  display: flex; align-items: flex-start; gap: var(--pd-s-2);
  padding: var(--pd-s-2) var(--pd-s-2);
  font-size: var(--pd-t-sm);
  border-radius: var(--pd-raadius-s);
}
.pd-toote-rida:hover { background: var(--pd-pind-2); }
.pd-toote-rida[hidden] { display: none; }

.pd-toote-rida__silt {
  display: flex; align-items: flex-start; gap: var(--pd-s-3);
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.pd-toote-rida input { accent-color: var(--pd-mark); margin-top: .3rem; flex: 0 0 auto; }

.pd-toote-rida__ava {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  color: var(--pd-tint-3);
}
.pd-toote-rida__ava:hover { background: var(--pd-teine-hell); color: var(--pd-teine-tekst); }

.pd-tootevalik__tyhi { font-size: var(--pd-t-sm); color: var(--pd-tint-3); padding: var(--pd-s-3) 0; }
.pd-tootevalik__tyhi[hidden] { display: none; }

/* --- Failid -------------------------------------------------------------- */

.pd-failivalik { display: flex; flex-direction: column; gap: var(--pd-s-3); }

.pd-failivalik__ala {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pd-s-8) var(--pd-s-4);
  background: var(--pd-pind);
  border: 1.5px dashed var(--pd-joon);
  border-radius: var(--pd-raadius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--pd-kiire), background var(--pd-kiire);
}
.pd-failivalik__ala:hover,
.pd-failivalik__ala.on-yle { border-color: var(--pd-mark); background: var(--pd-mark-hell); }

.pd-failivalik__ala input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.pd-failivalik__ala:has(input:focus-visible) { outline: 2px solid var(--pd-teine-tekst); outline-offset: 2px; }

.pd-failivalik__vihje { display: flex; flex-direction: column; gap: var(--pd-s-1); font-size: var(--pd-t-sm); }
.pd-failivalik__vihje strong { color: var(--pd-mark-tekst); }
.pd-failivalik__vihje span { color: var(--pd-tint-3); font-size: var(--pd-t-xs); }

.pd-failivalik__loend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pd-s-2); }
.pd-failivalik__loend:empty { display: none; }

.pd-fail-rida {
  display: flex; align-items: center; gap: var(--pd-s-3);
  padding: var(--pd-s-2) var(--pd-s-3);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  font-size: var(--pd-t-sm);
}
.pd-fail-rida__nimi { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-fail-rida__suurus {
  font-family: var(--pd-f-andmed); font-size: var(--pd-t-2xs);
  color: var(--pd-tint-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pd-fail-rida__eemalda {
  border: 1px solid var(--pd-joon); background: transparent;
  color: var(--pd-tint-2); font-size: var(--pd-t-xs);
  padding: .2rem .6rem; border-radius: var(--pd-raadius); cursor: pointer;
}
.pd-fail-rida__eemalda:hover { border-color: var(--pd-viga); color: var(--pd-viga); }
.pd-fail-rida--viga { border-color: rgba(196, 50, 31, .4); background: var(--pd-mark-hell); }
.pd-fail-rida--viga .pd-fail-rida__suurus { color: var(--pd-viga); }

/* --- Saatmine ------------------------------------------------------------ */

.pd-vorm__saatmine {
  display: flex; flex-direction: column; gap: var(--pd-s-4);
  align-items: flex-start;
  padding-top: var(--pd-s-6);
  border-top: var(--pd-piir-tugev);
}
.pd-nupp--suur { padding: .9rem 1.75rem; font-size: var(--pd-t-md); }
.pd-vorm__markus { font-size: var(--pd-t-xs); color: var(--pd-tint-3); max-width: 46ch; }

/* --- Meepott — nähtamatu inimesele, nähtav botile ------------------------ */

.pd-meepott {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Päringukorv --------------------------------------------------------- */

/*
 * Korv on tootevaliku kohal ja näeb välja nagu kokkuvõte, mitte nagu veel üks
 * väli: iga toode on oma real, kogus ja trükikohad kõrval. Alumine
 * märkeruutude valik jääb alles ja on korviga sünkroonis.
 */
.pd-korv {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  padding: var(--pd-s-4);
  background: var(--pd-pind);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
}

.pd-korv__pais {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pd-s-3); flex-wrap: wrap;
}
.pd-korv__arv {
  margin: 0;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
}
.pd-nupp--vaike { padding: .4rem .75rem; font-size: var(--pd-t-xs); }

.pd-korv__read { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pd-s-3); }

.pd-korv__rida {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  padding-top: var(--pd-s-3);
  border-top: var(--pd-piir);
}
.pd-korv__rida:first-child { border-top: 0; padding-top: 0; }

/*
 * Kogus ja trükikoha valik kõrvuti: mõlemad käivad sama toote kohta.
 * Varem oli kogus eraldi veerus paremal ja rea keskele jäi tühi ala.
 */
.pd-korv__juhtnupud {
  display: grid;
  gap: var(--pd-s-3);
  grid-template-columns: 1fr;
  align-items: end;
}
/*
 * Neli välja ühel real: suurus, värv, kogus, trükikoht. Trükikoht saab kõige
 * rohkem ruumi, sest seal on pikad nimed („Kapuutsi ja taskuga pusa · E4").
 */
@media (min-width: 34rem) {
  .pd-korv__juhtnupud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  .pd-korv__juhtnupud { grid-template-columns: 7rem 9rem 7rem minmax(0, 1fr); }
}
.pd-korv__kogus,
.pd-korv__vali,
.pd-korv__lisa { display: flex; flex-direction: column; gap: var(--pd-s-1); }
.pd-korv__kogus > span,
.pd-korv__vali > span,
.pd-korv__lisa > span { font-size: var(--pd-t-xs); color: var(--pd-tint-3); }
.pd-korv__vali select,
.pd-korv__vali input { width: 100%; }
.pd-korv__vali [hidden] { display: none; }
.pd-korv__lisa select { width: 100%; }

/* Silt ja infonupp ühel real — nupp avab ainult selle toote trükikohad. */
.pd-korv__lisa-silt { display: inline-flex; align-items: center; gap: var(--pd-s-2); }
.pd-korv__info {
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pd-teine-hell);
  color: var(--pd-teine-tekst);
  cursor: pointer;
  transition: background var(--pd-kiire), color var(--pd-kiire);
}
.pd-korv__info:hover { background: var(--pd-teine-tekst); color: #FFF; }
.pd-korv__info svg { display: block; }

.pd-korv__toode { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-s-2); }
/* Nimi on link tootelehele ja avaneb uuel kaardil (#433). */
.pd-korv__nimi {
  display: inline-flex; align-items: baseline; gap: var(--pd-s-2);
  font-weight: 620; font-size: var(--pd-t-sm);
  color: var(--pd-tint);
  text-decoration: none;
}
.pd-korv__nimi[href]:hover { color: var(--pd-teine-tekst); text-decoration: underline; }
.pd-uus-kaart { flex: 0 0 auto; color: var(--pd-tint-3); align-self: center; }
.pd-korv__nimi[href]:hover .pd-uus-kaart { color: var(--pd-teine-tekst); }

/* Sama toode teises suuruses või värvis on uus rida (#434). */
.pd-korv__lisa-rida {
  align-self: start;
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  margin-top: var(--pd-s-1);
  padding: .3rem .7rem;
  border: 1px dashed var(--pd-joon);
  border-radius: var(--pd-raadius-p);
  background: none;
  cursor: pointer;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-2);
}
.pd-korv__lisa-rida:hover { border-color: var(--pd-teine); color: var(--pd-teine-tekst); border-style: solid; }
.pd-korv__eemalda {
  border: 0; background: transparent; cursor: pointer;
  color: var(--pd-tint-3); font-size: var(--pd-t-lg); line-height: 1;
  padding: 0 .25rem; border-radius: 2px;
}
.pd-korv__eemalda:hover { color: var(--pd-viga); background: var(--pd-mark-hell); }

.pd-korv__kiibid { display: flex; flex-wrap: wrap; gap: var(--pd-s-2); }
.pd-korv__kiibid:empty { display: none; }

.pd-korv__tyhi { font-size: var(--pd-t-sm); color: var(--pd-tint-3); margin: 0; }

/* --- Trükikohtade dialoog ------------------------------------------------ */

/*
 * Dialoog on nii lai, kui ekraan lubab: sees on nelja veeruga rõivaruudustik
 * ja kitsas aken jättis paremale tühja riba.
 */
.pd-korv__dialoog {
  width: min(88rem, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: var(--pd-s-6);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  background: var(--pd-paber);
}
.pd-korv__dialoog::backdrop { background: rgba(20, 24, 29, .55); }

.pd-korv__dialoog-pais {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pd-s-4);
  margin-bottom: var(--pd-s-4);
}
.pd-korv__dialoog-pais h2 { font-size: var(--pd-t-xl); }
.pd-korv__sulge {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--pd-t-2xl); line-height: 1; padding: 0 .3rem;
  color: var(--pd-tint-2);
}
.pd-korv__sulge:hover { color: var(--pd-tint); }