/* Only opt-in card search fields gain a wrapper. Existing search labels keep
   their grid/flex position; the clear target adds no second glass layer. */
.op-search-clear-field{position:relative;display:block;min-width:0;width:100%;box-sizing:border-box;}
input.op-search-clear-input{padding-inline-end:48px!important;box-sizing:border-box;}
input.op-search-clear-input::-webkit-search-cancel-button{display:none;}
.op-search-clear-field>.op-search-clear-button{
 position:absolute!important;inset-inline-end:0;top:0;z-index:2;display:grid!important;place-items:center;
 width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:8px;
 background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 color:inherit;cursor:pointer;line-height:1;
}
.op-search-clear-field>.op-search-clear-button[hidden],.op-search-clear-field:has(>input:is(:disabled,[readonly]))>.op-search-clear-button{display:none!important;}
.op-search-clear-button>svg{display:block!important;width:18px;height:18px;pointer-events:none;}
.op-search-clear-button:focus-visible{outline:2px solid currentColor;outline-offset:-4px;}
@media(forced-colors:active){.op-search-clear-field>.op-search-clear-button{color:ButtonText;}}