/* Shared single-select caret geometry. Keep the real select for native keyboard,
   touch picker, validation and change events; never restyle multi-row listboxes.
   Important declarations in this layer beat legacy unlayered ID/background
   shorthands without changing a control's colors, border, font or dimensions. */
@layer zb-form-caret {
    :root { --zb-select-caret-inset:12px; --zb-select-caret-size:12px; --zb-select-caret-gap:8px; }
    html body select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"]) {
        -webkit-appearance:none!important; appearance:none!important;
        padding-inline-end:calc(var(--zb-select-caret-inset) + var(--zb-select-caret-size) + var(--zb-select-caret-gap))!important;
        /* Shortened strokes plus circular caps soften both tips and the join.
           Keep the complete painted glyph inside the same 12px width/inset. */
        --zb-caret-radius:1px;
        --zb-caret-leg:calc(var(--zb-select-caret-size)/2 - var(--zb-caret-radius));
        --zb-caret-dot:calc(var(--zb-caret-radius) + var(--zb-caret-radius));
        --zb-caret-cap:radial-gradient(circle at center,var(--text-300,currentColor) calc(var(--zb-caret-radius) - .1px),transparent var(--zb-caret-radius));
        background-image:linear-gradient(45deg,transparent calc(50% - .8px),var(--text-300,currentColor) calc(50% - .8px),var(--text-300,currentColor) calc(50% + .8px),transparent calc(50% + .8px)),linear-gradient(135deg,transparent calc(50% - .8px),var(--text-300,currentColor) calc(50% - .8px),var(--text-300,currentColor) calc(50% + .8px),transparent calc(50% + .8px)),var(--zb-caret-cap),var(--zb-caret-cap),var(--zb-caret-cap)!important;
        background-position:
            calc(100% - var(--zb-select-caret-inset) - var(--zb-select-caret-size)/2) 50%,
            calc(100% - var(--zb-select-caret-inset) - var(--zb-caret-radius)) 50%,
            calc(100% - var(--zb-select-caret-inset) - var(--zb-select-caret-size) + var(--zb-caret-dot)) calc(50% - var(--zb-caret-leg)/2),
            calc(100% - var(--zb-select-caret-inset) - var(--zb-caret-leg)) calc(50% + var(--zb-caret-leg)/2),
            calc(100% - var(--zb-select-caret-inset)) calc(50% - var(--zb-caret-leg)/2)!important;
        background-size:var(--zb-caret-leg) var(--zb-caret-leg),var(--zb-caret-leg) var(--zb-caret-leg),var(--zb-caret-dot) var(--zb-caret-dot),var(--zb-caret-dot) var(--zb-caret-dot),var(--zb-caret-dot) var(--zb-caret-dot)!important;
        background-repeat:no-repeat!important;
    }
    html body select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"]):dir(rtl) {
        background-position:
            calc(var(--zb-select-caret-inset) + var(--zb-caret-radius)) 50%,
            calc(var(--zb-select-caret-inset) + var(--zb-select-caret-size)/2) 50%,
            var(--zb-select-caret-inset) calc(50% - var(--zb-caret-leg)/2),
            calc(var(--zb-select-caret-inset) + var(--zb-caret-leg)) calc(50% + var(--zb-caret-leg)/2),
            calc(var(--zb-select-caret-inset) + var(--zb-select-caret-size) - var(--zb-caret-dot)) calc(50% - var(--zb-caret-leg)/2)!important;
    }
    /* Existing legacy wrappers already supply a caret: inset it, don't draw two. */
    html body .select-wrapper:has(>select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"])):has(>i) > select {
        background-image:none!important;
    }
    html body .select-wrapper:has(>select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"])) > i {
        inset-inline-start:auto!important;inset-inline-end:var(--zb-select-caret-inset)!important;
        width:var(--zb-select-caret-size);text-align:center;pointer-events:none;color:var(--text-300,currentColor)!important;
    }
    html body .bootstrap-select > .dropdown-toggle { padding-inline-end:calc(var(--zb-select-caret-inset) + var(--zb-select-caret-size) + var(--zb-select-caret-gap))!important; }
    html body .bootstrap-select > .dropdown-toggle .caret { inset-inline-start:auto!important;inset-inline-end:var(--zb-select-caret-inset)!important; }
    @media (forced-colors:active) {
        /* Let the OS paint an accessible indicator when decorative images vanish. */
        html body select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"]) {
            -webkit-appearance:auto!important;appearance:auto!important;background-image:none!important;
        }
        html body .select-wrapper:has(>select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):is(:not([size]),[size=""],[size="0"],[size="1"])) > i { display:none!important; }
    }
}