/* Shared option colors. Keep native values, validation, keyboard handling and
   dependent-field events. Unsupported browsers retain their native picker. */
@layer product-select {
  @media screen {
    body { --select-option-active: var(--select-option-purple, #6d28d9); }
    /* One tone per card/dialog, inherited by all of its dropdowns. */
    :is(.ow-card,.panel,.rt-card,.pm-panel,.ad-card,.card,dialog,[data-card-role]):nth-of-type(odd) {
      --select-option-active: var(--select-option-purple, #6d28d9);
    }
    :is(.ow-card,.panel,.rt-card,.pm-panel,.ad-card,.card,dialog,[data-card-role]):nth-of-type(even) {
      --select-option-active: var(--select-option-rose, #be185d);
    }
    [data-select-tone="purple"][data-select-tone] { --select-option-active: var(--select-option-purple, #6d28d9); }
    [data-select-tone="rose"][data-select-tone] { --select-option-active: var(--select-option-rose, #be185d); }

    /* Existing searchable comboboxes share the same selected option. */
    :is([role="option"][aria-selected="true"],.sl-cb__opt.is-selected):not([aria-disabled="true"]) {
      background: var(--select-option-active) !important;
      color: var(--select-option-foreground, #fff) !important;
    }
    :is([role="option"],.sl-cb__opt):not(:disabled,[aria-disabled="true"],[aria-selected="true"],.is-selected):is(:hover,:focus-within,.is-active) {
      background: var(--surface, #fff) !important;
      color: var(--text, #0f172a) !important;
      outline: 1px solid var(--select-option-active) !important;
      outline-offset: -1px !important;
    }
    :is([role="option"][aria-selected="true"],.sl-cb__opt.is-selected):not([aria-disabled="true"]) :is(span,div,small,svg),
    :is([role="option"],.sl-cb__opt):not(:disabled,[aria-disabled="true"],[aria-selected="true"],.is-selected):is(:hover,:focus-within,.is-active) :is(span,div,small,svg) {
      color: inherit !important;
    }

    /* Nested suggestion buttons must not paint over their option row. */
    [role="option"]:not([aria-disabled="true"]) > button:not(:disabled):is(:hover,:focus-visible) {
      background: transparent !important;
      color: inherit !important;
      box-shadow: none !important;
    }

    @supports (appearance: base-select) {
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)),
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *))::picker(select) {
        appearance: base-select !important;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) {
        /* The closed field keeps its existing border and background. */
        background-image: none !important;
        min-height: 44px;
        font-size: var(--ui-input, 16px);
        align-items: center;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *))::picker(select) {
        min-width: anchor-size(width);
        max-width: calc(100vw - 24px);
        max-height: min(420px, 60dvh);
        padding: 4px;
        overflow: auto;
        border: 1px solid var(--border-strong, #cbd5e1);
        border-radius: 6px;
        background: var(--surface, #fff);
        color: var(--text, #0f172a);
        font: 400 var(--ui-input, 16px)/1.5 var(--ui-font, "Open Sans", Arial, sans-serif);
        box-sizing: border-box;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) option {
        min-height: 44px;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 3px;
        white-space: normal;
        overflow-wrap: anywhere;
        background: var(--surface, #fff) !important;
        color: var(--text, #0f172a) !important;
        font-size: var(--ui-input, 16px) !important;
        font-weight: 400 !important;
        box-sizing: border-box;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) option:not(:disabled):checked {
        background: var(--select-option-active) !important;
        color: var(--select-option-foreground, #fff) !important;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) option:not(:disabled):checked :is(span,div,small,svg) {
        color: inherit !important;
      }
      select option:not(:disabled):not(:checked):is(:hover,:focus) {
        background: var(--surface, #fff) !important;
        color: var(--text, #0f172a) !important;
        outline: 1px solid var(--select-option-active) !important;
        outline-offset: -1px !important;
      }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) option:disabled { opacity: .55; }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *)) option::checkmark { order: 2; margin-left: auto; color: inherit; }
      select:not([multiple],[size]):not(:where([data-select-preserve],[data-select-preserve] *,[contenteditable] *, .ql-editor *, .ProseMirror *, .document-preview *, .lease-document *, .ow-editor *))::picker-icon { display: none; content: none; }
    }
    /* Respect OS contrast palettes rather than forcing either accent. */
    @media (forced-colors: active) {
      select option:not(:disabled):checked,
      :is([role="option"][aria-selected="true"],.sl-cb__opt.is-selected),
      :is([role="option"],.sl-cb__opt):not(:disabled,[aria-disabled="true"],[aria-selected="true"],.is-selected):is(:hover,:focus-within,.is-active) {
        background: Highlight !important;
        color: HighlightText !important;
      }
    }
  }
}