/*
 * DESPLEGABLE (select[data-dd], public/js/dropdown.js) · web pública, àrea de client i panell.
 * Fitxer a part perquè el comparteixen totes les pàgines.
 */
.dd { position: relative; width: 100%; text-align: left; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 12px 8px 16px; border: 1px solid var(--outline);
  border-radius: 12px; background: var(--bg); color: var(--on-bg); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.dd-btn:hover { border-color: var(--on-variant); }
.dd-btn:focus-visible, .dd.is-open .dd-btn { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.dd-label { flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.dd-side { flex: none; color: var(--on-variant); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-caret { flex: none; width: 22px; height: 22px; fill: var(--on-variant); transition: transform .15s; }
.dd.is-open .dd-caret { transform: rotate(180deg); }
.dd-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 10, 60, .12), 0 10px 28px -6px rgba(20, 10, 60, .28); }
.dd.is-up .dd-pop { top: auto; bottom: calc(100% + 6px); }
.dd.is-right .dd-pop { left: auto; right: 0; }
.dd-list { max-height: 308px; overflow-y: auto; margin: 0; padding: 0; list-style: none; outline: none; }
/* Cercador (tots els desplegables, menys select[data-dd-search="0"]) */
.dd-search { position: relative; flex: none; margin-bottom: 6px; }
.dd-search svg { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: var(--on-variant); pointer-events: none; }
.dd-search input { width: 100%; min-width: 220px; height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--outline); border-radius: 10px; background: var(--bg);
  color: var(--on-bg); font: inherit; font-size: 15px; }
.dd-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.dd-search input::-webkit-search-cancel-button { cursor: pointer; }
.dd-pop[hidden], .dd-pop [hidden] { display: none !important; }
.dd-empty { margin: 0; padding: 12px; color: var(--on-variant); font-size: 14px; }
.dd-item mark { background: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.dd-item { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 12px; border-radius: 8px; color: var(--on-bg); font-size: 15px;
  line-height: 1.3; cursor: pointer; }
.dd-item-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dd-item-side { flex: none; color: var(--on-variant); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-item.is-active { background: var(--surface-low); }
.dd-item[aria-selected="true"] { color: var(--primary); font-weight: 700; }
.dd-item[aria-selected="true"] .dd-item-side { color: var(--primary); }
@media (forced-colors: active) { .dd-item.is-active { outline: 2px solid Highlight; } .dd-item[aria-selected="true"] { text-decoration: underline; } }

.dd-btn.is-placeholder .dd-label { color: var(--on-variant); }
.dd-btn:disabled { opacity: .55; cursor: not-allowed; }
.dd.is-invalid .dd-btn { border-color: #D3164E; box-shadow: 0 0 0 1px #D3164E; }
.dd-group { padding: 10px 12px 4px; color: var(--on-variant); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.dd-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--outline-variant); }
.dd-item.is-grouped { padding-left: 20px; }
.dd-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dd-item[aria-disabled="true"].is-active { background: none; }

/* El bloc que té un desplegable obert queda per sobre de la barra fixa del formulari */
.panel:has(.dd.is-open), .field:has(.dd.is-open) { position: relative; z-index: 25; }

/* En una targeta estreta, el botó només mostra el nom (el preu continua a la llista i al total) */
.dd { container-type: inline-size; }
@container (max-width: 250px) { .dd-btn .dd-side { display: none; } }