/* Estilos neutros, pensados para heredar tipografía y colores del tema. */
.wcp-fields { margin: 0 0 1.25em; width: 100%; }
.wcp-group { margin-bottom: 1.1em; }
.wcp-group__label { font-weight: 600; margin-bottom: .4em; }
.wcp-req { color: #b32d2e; }
.wcp-group__body { display: flex; flex-wrap: wrap; gap: 8px; }
.wcp-group--select .wcp-group__body select,
.wcp-group--text .wcp-group__body input[type="text"],
.wcp-group--textarea .wcp-group__body textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Opciones (radio / checkbox ocultos, la etiqueta hace de botón) */
.wcp-opt { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	padding: 6px 12px; border: 2px solid rgba(0, 0, 0, .15); border-radius: 8px; background: transparent; }
.wcp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wcp-opt:hover { border-color: rgba(0, 0, 0, .4); }
.wcp-opt:has(input:checked) { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.wcp-opt:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.wcp-opt__text { line-height: 1.2; }
.wcp-price { font-style: normal; opacity: .7; font-size: .9em; }

.wcp-chip { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); overflow: hidden; flex: none; }
.wcp-chip--image { width: 44px; height: 44px; border-radius: 6px; }
.wcp-chip--image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wcp-group--invalid .wcp-group__label { color: #b32d2e; }
.wcp-group--invalid .wcp-opt,
.wcp-group--invalid select,
.wcp-group--invalid input[type="text"],
.wcp-group--invalid textarea { border-color: #b32d2e; }

.wcp-summary { border-top: 1px solid rgba(0, 0, 0, .15); padding-top: .6em; }
.wcp-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.wcp-summary__total { font-weight: 700; font-size: 1.1em; border-top: 1px solid rgba(0, 0, 0, .15); margin-top: 4px; padding-top: 6px; }
.wcp-hint { opacity: .75; font-size: .9em; }
.wcp-error { color: #b32d2e; font-weight: 600; margin-top: .5em; }
.wcp-fields [hidden] { display: none !important; }