/* Bij Pip - Personalisatie (tekst of bestand) op de PDP.
   Bouwt op de themastijl: .opt / .opt__head / .opt__row / .chip komen uit
   shortcodes.css (body.bijpip-pdp). Hier alleen wat er nieuw is. */

.bijpip-pers { margin-bottom: 22px; }
.bijpip-pers .opt__row { margin-bottom: 0; }
.bijpip-pers .chip { cursor: pointer; position: relative; min-width: 140px; }
.bijpip-pers .chip input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.bijpip-pers .chip:focus-within { outline: 2px solid var(--line-wine, #b07); outline-offset: 2px; }
body.bijpip-pdp .bijpip-pers .chip:has(input:checked) { border-color: var(--wine); background: var(--blush); }
body.bijpip-pdp .bijpip-pers .chip:has(input:checked) small { color: var(--wine); }

.bijpip-pers__panel { margin-top: 14px; display: none; }
/* Werkt ook zonder JS: het paneel van de gekozen radio verschijnt. */
.bijpip-pers:has(input[value="tekst"]:checked) [data-pers-panel="tekst"],
.bijpip-pers:has(input[value="bestand"]:checked) [data-pers-panel="bestand"] { display: block; }
.bijpip-pers .bijpip-pers__panel[hidden] { display: none; }

.bijpip-pers__label {
  display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 8px;
}
.bijpip-pers__label em { font-style: normal; color: var(--wine); }

.bijpip-pers textarea {
  display: block; width: 100%; min-height: 90px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  font-family: inherit; font-size: 13.5px; color: inherit; padding: 11px 13px; outline: none;
}
.bijpip-pers textarea::placeholder { color: var(--muted); }
.bijpip-pers textarea:focus { border-color: var(--line-wine); }

.bijpip-pers__drop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line-wine, var(--line)); border-radius: var(--r);
  background: var(--cream, #fff); padding: 14px 16px; cursor: pointer;
}
.bijpip-pers__drop input[type="file"] {
  font-family: inherit; font-size: 13px; max-width: 100%;
}
.bijpip-pers__hint, .bijpip-pers__count {
  display: block; font-size: 12px; color: var(--muted); margin-top: 6px;
}
.bijpip-pers__count { text-align: right; }
.bijpip-pers__error {
  margin-top: 10px; font-size: 13px; color: var(--wine, #a00);
  border-left: 3px solid var(--wine, #a00); padding: 6px 10px; background: var(--blush, #fff4f4);
}
.bijpip-pers__error[hidden] { display: none; }