.appointment-service-composition { grid-column:1 / -1; margin-top:4px; min-width:0; }
.appointment-service-chips[hidden] { display:none; }
.appointment-service-details summary { cursor:pointer; color:var(--primary); font-size:12px; font-weight:600; padding:6px 0; }
.appointment-service-details[open] .appointment-service-add { margin-top:8px; }
#servicoMetaPreview { grid-column:1 / -1; text-align:center; font-size:13px; line-height:1.6; white-space:normal; padding:9px 12px; border:1px solid var(--border); border-radius:10px; }
#servicoMetaPreview:empty { display:none; }
.appointment-service-chips { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 10px; }
.appointment-service-chips li { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:8px; background:var(--primary-soft); color:var(--primary); font-size:12px; }
.appointment-service-chips li span { overflow-wrap:anywhere; }
.appointment-service-chips button { flex:none; min-width:28px; min-height:28px; font-size:18px; border-radius:6px; }
.appointment-service-add { display:flex; align-items:flex-end; gap:8px; }
.appointment-service-add label { flex:1; min-width:0; font-size:11px; font-weight:600; color:var(--text-2); }
.appointment-service-add select { display:block; width:100%; min-width:0; margin-top:4px; padding:9px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:12px; }
.appointment-service-add button { padding:9px 12px; font-size:12px; }
.appointment-service-total { margin-top:10px; font-size:12px; font-weight:700; color:var(--text); }
.appointment-service-price { padding:4px 0; color:var(--primary); font-size:11px; text-decoration:underline; }
.appointment-service-composition .ux-help { margin-top:4px; font-size:11px; }
@media(max-width:480px) { .appointment-service-add { flex-wrap:wrap; } .appointment-service-add label { flex-basis:100%; } }