/* Elegant Catalog. Shared by the real booking form and Settings > Design.
 * Important declarations in this named layer isolate the component from the
 * legacy unlayered !important skin rules, including late inline design CSS.
 * Prices, selection hooks and the parent grid's visibility stay unchanged.
 */
@layer rbp-service-cards {
  .rbp-service-catalog {
    container-type: inline-size;
    min-width: 0 !important;
    gap: 12px !important;
  }
  .rbp-sidebar-services.rbp-service-catalog {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  button.rbp-elegant-service {
    --rbp-service-surface: #ffffff;
    --rbp-service-ink: #18362c;
    --rbp-service-muted: #596b62;
    --rbp-service-edge: #dde5df;
    --rbp-service-accent: #174b37;
    --rbp-service-on-accent: #ffffff;
    --rbp-service-tint: #f1f6f2;
    --rbp-service-selected: #fbfdfb;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--rbp-service-edge) !important;
    border-radius: 16px !important;
    background: var(--rbp-service-surface) !important;
    color: var(--rbp-service-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-align: start !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background-color .16s ease !important;
  }
  button.rbp-elegant-service::before,
  button.rbp-elegant-service::after { content: none !important; display: none !important; }
  /* Legacy pill skins dim unselected services after the first selection. */
  button.rbp-elegant-service:not(:disabled):not([aria-disabled="true"]) { opacity: 1 !important; filter: none !important; }
  button.rbp-elegant-service:hover { border-color: var(--rbp-service-accent) !important; }
  button.rbp-elegant-service[aria-pressed="true"] {
    border-color: var(--rbp-service-accent) !important;
    background: var(--rbp-service-selected) !important;
  }
  button.rbp-elegant-service:focus-visible {
    outline: 3px solid var(--rbp-service-accent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
  }
  .rbp-elegant-service * { box-sizing: border-box !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; }
  .rbp-elegant-service .rbp-service-media {
    display: grid !important; place-items: center !important;
    width: 56px !important; height: 56px !important;
    border-radius: 12px !important; overflow: hidden !important;
    background: var(--rbp-service-tint) !important; color: var(--rbp-service-accent) !important;
    font-size: 24px !important; font-weight: 500 !important;
  }
  .rbp-elegant-service .rbp-service-media img {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; object-fit: cover !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: inherit !important; box-shadow: none !important;
  }
  .rbp-elegant-service .rbp-service-copy { display: grid !important; gap: 10px !important; min-width: 0 !important; }
  .rbp-elegant-service .rbp-service-title {
    display: block !important; margin: 0 !important; padding: 0 !important;
    color: var(--rbp-service-ink) !important; font-size: 18px !important;
    font-weight: 500 !important; line-height: 1.4 !important;
    overflow-wrap: anywhere !important; white-space: normal !important;
  }
  .rbp-elegant-service .rbp-service-meta {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 9px 14px !important; color: var(--rbp-service-muted) !important;
    font-size: 13px !important; line-height: 1.5 !important;
  }
  .rbp-elegant-service .rbp-service-time { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
  .rbp-elegant-service .rbp-service-time svg { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; }
  .rbp-elegant-service .rbp-service-type { padding: 2px 8px !important; border: 1px solid var(--rbp-service-edge) !important; border-radius: 5px !important; font-size: 12px !important; }
  .rbp-elegant-service .rbp-service-description { color: var(--rbp-service-muted) !important; font-size: 13px !important; white-space: pre-line !important; overflow-wrap: anywhere !important; }
  .rbp-elegant-service .rbp-service-footer {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: space-between !important; align-items: center !important;
    gap: 12px !important; min-width: 0 !important;
    padding-top: 12px !important; margin-top: 2px !important;
    border-top: 1px solid var(--rbp-service-edge) !important;
  }
  .rbp-elegant-service .rbp-service-price { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 6px !important; min-width: 0 !important; max-width: 100% !important; color: var(--rbp-service-ink) !important; }
  .rbp-elegant-service .rbp-service-amount { font-size: 23px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -.035em !important; font-variant-numeric: tabular-nums !important; overflow-wrap: anywhere !important; }
  .rbp-elegant-service .rbp-service-price-note { font-size: 12px !important; color: var(--rbp-service-muted) !important; }
  .rbp-elegant-service .rbp-service-action {
    position: static !important; inset: auto !important; grid-area: auto !important;
    display: inline-flex !important; flex-wrap: wrap !important; flex: 0 1 auto !important;
    justify-content: center !important; align-items: center !important;
    gap: 9px !important; width: auto !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important; min-height: 44px !important; max-height: none !important;
    margin: 0 !important; margin-inline-start: auto !important; padding: 10px 16px !important;
    border: 0 !important; border-radius: 9px !important;
    background: var(--rbp-service-accent) !important; color: var(--rbp-service-on-accent) !important;
    font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important;
    letter-spacing: normal !important; text-transform: none !important; white-space: normal !important; overflow-wrap: anywhere !important;
    text-align: center !important; box-shadow: none !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important;
  }
  .rbp-elegant-service .rbp-service-action::before,
  .rbp-elegant-service .rbp-service-action::after { content: none !important; }
  .rbp-elegant-service .rbp-svc-select-txt { min-width: 0 !important; font-weight: 500 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .rbp-elegant-service .rbp-service-arrow { display: inline !important; font: inherit !important; color: inherit !important; }
  .rbp-elegant-service .rbp-service-arrow[style*="none"] { display: none !important; }
  .rbp-elegant-service[aria-pressed="true"] .rbp-service-action { background: var(--rbp-service-tint) !important; color: var(--rbp-service-accent) !important; }
  /* Keep the merchant's Hero image choice; hierarchy and metadata stay shared. */
  .rbp-svc-style-hero .rbp-elegant-service .rbp-service-media { grid-column: 1 / -1 !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; }
  .rbp-svc-style-hero .rbp-elegant-service .rbp-service-copy { grid-column: 1 / -1 !important; }
  .rbp-elegant-selection { border: 1px solid #dde5df !important; border-radius: 16px !important; padding: 16px !important; background: #fff !important; color: #18362c !important; box-shadow: none !important; }
  .rbp-elegant-selection .rbp-side-sel-list { display: grid !important; gap: 10px !important; margin: 14px 0 !important; padding: 0 !important; list-style: none !important; }
  .rbp-elegant-selection .rbp-side-sel-list li { display: grid !important; grid-template-columns: minmax(0, 1fr) auto 44px !important; grid-template-areas: "guest guest remove" "name name remove" "dur price price" !important; gap: 5px 10px !important; padding: 12px !important; border-radius: 10px !important; background: #f6f8f6 !important; }
  .rbp-elegant-selection .rbp-side-sel-guest { grid-area: guest !important; justify-self: start !important; border-radius: 5px !important; background: #eaf1ec !important; color: #174b37 !important; font-size: 12px !important; }
  .rbp-elegant-selection .rbp-side-sel-name { grid-area: name !important; color: #18362c !important; font-weight: 500 !important; overflow-wrap: anywhere !important; white-space: normal !important; }
  .rbp-elegant-selection .rbp-side-sel-dur { grid-area: dur !important; color: #596b62 !important; }
  .rbp-elegant-selection .rbp-side-sel-price { grid-area: price !important; justify-self: end !important; color: #18362c !important; white-space: normal !important; }
  .rbp-elegant-selection button.rbp-side-sel-remove { grid-area: remove !important; align-self: start !important; width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; padding: 12px !important; border: 1px solid #dde5df !important; border-radius: 8px !important; background: #fff !important; color: #596b62 !important; box-shadow: none !important; cursor: pointer !important; }
  .rbp-elegant-selection button.rbp-side-sel-remove:hover { background: #fff5f3 !important; color: #9f2f20 !important; border-color: #ddb4ac !important; }
  .rbp-elegant-selection button.rbp-side-sel-remove:focus-visible { outline: 3px solid #174b37 !important; outline-offset: 2px !important; }
  .rbp-elegant-selection .rbp-side-sel-total { display: flex !important; flex-wrap: wrap !important; gap: 8px 12px !important; justify-content: space-between !important; color: #18362c !important; }
  .rbp-service-preview { margin-top: 20px; padding: 16px; background: #f3f5f2; border-radius: 12px; }
  .rbp-service-preview .rbp-service-catalog { display: grid; }
  .rbp-service-preview h4 { margin: 0 0 12px; color: #18362c; font-size: 14px; }
  .rbp-service-preview-note { color: #596b62; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
  .rbp-service-layout-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  .rbp-service-layout-options label { display: block; padding: 16px; border: 1px solid #dde5df; border-radius: 10px; background: #fff; color: #18362c; cursor: pointer; }
  .rbp-service-layout-options label:has(input:checked) { border-color: #174b37; background: #f1f6f2; }
  .rbp-service-layout-options p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #596b62; }
  @container (max-width: 380px) {
    button.rbp-elegant-service { padding: 16px !important; gap: 12px !important; grid-template-columns: 44px minmax(0, 1fr) !important; }
    .rbp-elegant-service .rbp-service-media { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
    .rbp-elegant-service .rbp-service-action { padding: 10px 12px !important; }
  }
  @media (prefers-reduced-motion: reduce) { button.rbp-elegant-service { transition: none !important; } }
  @media (forced-colors: active) {
    button.rbp-elegant-service[aria-pressed="true"] { border: 2px solid Highlight !important; }
    .rbp-elegant-service .rbp-service-action { border: 1px solid ButtonText !important; }
  }
}