/* ==========================================================================
   TravelRefund — Form & Button Design System
   Custom styles replacing Pico CSS form/button rules.
   Loaded after pico.noforms.min.css, before main.min.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Primary */
    --trp-primary: var(--pico-primary, #007a50);
    --trp-primary-hover: var(--pico-primary-hover, #015234);
    --trp-primary-50: #e6f7ee;
    --trp-primary-100: #cbfce1;
    --trp-primary-glow: rgba(0, 122, 80, 0.12);
    --trp-primary-glow-strong: rgba(0, 122, 80, 0.25);

    /* Surfaces */
    --trp-surface: #ffffff;
    --trp-surface-raised: #f8f9fa;
    --trp-surface-hover: #f3f4f6;

    /* Borders */
    --trp-border: #d1d5db;
    --trp-border-light: #e5e7eb;

    /* Text */
    --trp-text: #1a1d26;
    --trp-text-secondary: #4b5563;
    --trp-text-muted: #9ca3af;
    --trp-text-on-primary: #ffffff;

    /* Secondary */
    --trp-secondary: var(--pico-secondary-background, #4b5563);
    --trp-secondary-hover: var(--pico-secondary-hover-background, #374151);
    --trp-secondary-50: #f3f4f6;

    /* Danger */
    --trp-danger: var(--red-600, #dc2626);
    --trp-danger-hover: var(--red-700, #b91c1c);
    --trp-danger-50: #fef2f2;
    --trp-danger-glow: rgba(220, 38, 38, 0.12);

    /* Success (for valid states) */
    --trp-success: var(--green-600, #16a34a);
    --trp-success-50: #f0fdf4;
    --trp-success-glow: rgba(22, 163, 74, 0.12);

    /* Warning */
    --trp-warning: var(--amber-600, #d97706);
    --trp-warning-50: #fffbeb;

    /* Radii */
    --trp-radius-xs: 4px;
    --trp-radius-sm: 8px;
    --trp-radius: 10px;
    --trp-radius-lg: 14px;
    --trp-radius-pill: 999px;

    /* Shadows */
    --trp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --trp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --trp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --trp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --trp-transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);

    /* Input sizing */
    --trp-input-padding-y: 0.55rem;
    --trp-input-padding-x: 0.85rem;
    --trp-input-font-size: 0.925rem;
    --trp-input-line-height: 1.5;
    --trp-input-border-width: 1.5px;
    --trp-input-height: calc(
        var(--trp-input-font-size) * var(--trp-input-line-height) +
        var(--trp-input-padding-y) * 2 +
        var(--trp-input-border-width) * 2
    );
    --trp-label-font-size: 0.84rem;

    /* Button sizing */
    --trp-btn-padding-y: 0.55rem;
    --trp-btn-padding-x: 1.4rem;
    --trp-btn-font-size: 0.925rem;
    --trp-btn-font-weight: 600;
    --trp-btn-line-height: 1.4;
    --trp-btn-radius: var(--trp-radius-sm);
}


/* --------------------------------------------------------------------------
   2. Base Form Elements — Inputs, Select, Textarea
   Excludes Tom Select internals (.ts-input, .tomselected)
   -------------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.ts-input),
select:not(.tomselected),
textarea {
    display: block;
    width: 100%;
    padding: var(--trp-input-padding-y) var(--trp-input-padding-x);
    font-family: inherit;
    font-size: var(--trp-input-font-size);
    font-weight: 400;
    line-height: var(--trp-input-line-height);
    color: var(--trp-text);
    background-color: var(--trp-surface);
    border: var(--trp-input-border-width) solid var(--trp-border);
    border-radius: var(--trp-radius-sm);
    box-shadow: var(--trp-shadow-xs);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color var(--trp-transition),
        box-shadow var(--trp-transition),
        background-color var(--trp-transition);
    box-sizing: border-box;
}

/* Height for single-line inputs (not textarea) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.ts-input),
select:not(.tomselected) {
    height: var(--trp-input-height);
}

/* Placeholder */
input:not(.ts-input)::placeholder,
textarea::placeholder {
    color: var(--trp-text-muted);
    opacity: 1;
}

/* Margin between stacked form fields */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not(.ts-input),
select:not(.tomselected),
textarea {
    margin-bottom: 0.65rem;
}


/* --------------------------------------------------------------------------
   3. Focus States
   -------------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden]):not(.ts-input):focus,
select:not(.tomselected):focus,
textarea:focus {
    border-color: var(--trp-primary);
    box-shadow: 0 0 0 3px var(--trp-primary-glow);
    background-color: var(--trp-surface);
}


/* --------------------------------------------------------------------------
   4. Select — Custom Chevron
   -------------------------------------------------------------------------- */
select:not([multiple]):not([size]):not(.tomselected) {
    padding-right: calc(var(--trp-input-padding-x) + 1.6rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--trp-input-padding-x) center;
    background-size: 16px;
}


/* --------------------------------------------------------------------------
   5. Textarea
   -------------------------------------------------------------------------- */
textarea {
    min-height: 100px;
    height: auto;
    resize: vertical;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   6. Labels
   -------------------------------------------------------------------------- */
label {
    display: block;
    font-size: var(--trp-label-font-size);
    font-weight: 600;
    color: var(--trp-text);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* Labels next to checkboxes/radios: inline */
label:has(> [type=checkbox]),
label:has(> [type=radio]),
[type=checkbox] + label,
[type=radio] + label,
[type=checkbox] ~ label,
[type=radio] ~ label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    font-size: var(--trp-input-font-size);
    cursor: pointer;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   7. Fieldset & Legend
   -------------------------------------------------------------------------- */
fieldset {
    border: none;
    margin: 0 0 1rem 0;
    padding: 0;
    min-width: 0;
}

legend {
    font-weight: 700;
    font-size: 1rem;
    color: var(--trp-text);
    margin-bottom: 0.5rem;
    padding: 0;
}


/* --------------------------------------------------------------------------
   8. Checkbox & Radio
   -------------------------------------------------------------------------- */
[type=checkbox],
[type=radio] {
    width: 18px;
    height: 18px;
    accent-color: var(--trp-primary);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

[type=radio] {
    border-radius: 50%;
}


/* --------------------------------------------------------------------------
   9. File Input
   -------------------------------------------------------------------------- */
[type=file] {
    font-family: inherit;
    font-size: var(--trp-input-font-size);
    color: var(--trp-text-secondary);
    cursor: pointer;
}

[type=file]::file-selector-button {
    font-family: inherit;
    font-size: var(--trp-input-font-size);
    font-weight: 500;
    padding: 0.4rem 1rem;
    margin-right: 0.75rem;
    border: var(--trp-input-border-width) solid var(--trp-border);
    border-radius: var(--trp-radius-sm);
    background: var(--trp-surface-raised);
    color: var(--trp-text);
    cursor: pointer;
    transition: all var(--trp-transition);
}

[type=file]::file-selector-button:hover {
    background: var(--trp-surface-hover);
    border-color: var(--trp-primary);
    color: var(--trp-primary);
}


/* --------------------------------------------------------------------------
   10. Disabled States
   -------------------------------------------------------------------------- */
input:not(.ts-input)[disabled],
select:not(.tomselected)[disabled],
textarea[disabled],
button[disabled],
[role=button][aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   11. Validation States
   -------------------------------------------------------------------------- */

/* Invalid */
input:not(.ts-input)[aria-invalid=true],
select:not(.tomselected)[aria-invalid=true],
textarea[aria-invalid=true] {
    border-color: var(--trp-danger);
}

input:not(.ts-input)[aria-invalid=true]:focus,
select:not(.tomselected)[aria-invalid=true]:focus,
textarea[aria-invalid=true]:focus {
    border-color: var(--trp-danger);
    box-shadow: 0 0 0 3px var(--trp-danger-glow);
}

/* Valid */
input:not(.ts-input)[aria-invalid=false],
select:not(.tomselected)[aria-invalid=false],
textarea[aria-invalid=false] {
    border-color: var(--trp-success);
}

input:not(.ts-input)[aria-invalid=false]:focus,
select:not(.tomselected)[aria-invalid=false]:focus,
textarea[aria-invalid=false]:focus {
    border-color: var(--trp-success);
    box-shadow: 0 0 0 3px var(--trp-success-glow);
}

/* Helper text after fields */
:where(input, select, textarea) + small {
    display: block;
    margin-top: -0.4rem;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: var(--trp-text-muted);
}

:where(input, select, textarea)[aria-invalid=true] + small {
    color: var(--trp-danger);
}

:where(input, select, textarea)[aria-invalid=false] + small {
    color: var(--trp-success);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. Button Base — Primary (default)
   -------------------------------------------------------------------------- */
button,
[type=submit],
[type=button],
[type=reset],
[role=button]:not(a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: var(--trp-btn-padding-y) var(--trp-btn-padding-x);
    font-family: inherit;
    font-size: var(--trp-btn-font-size);
    font-weight: var(--trp-btn-font-weight);
    line-height: var(--trp-btn-line-height);
    text-decoration: none;
    white-space: nowrap;
    border: var(--trp-input-border-width) solid transparent;
    border-radius: var(--trp-btn-radius);
    cursor: pointer;
    outline: none;
    transition:
        background-color var(--trp-transition),
        border-color var(--trp-transition),
        color var(--trp-transition),
        box-shadow var(--trp-transition),
        transform var(--trp-transition-fast);
    box-sizing: border-box;

    /* Default = Primary */
    background-color: var(--trp-primary);
    color: var(--trp-text-on-primary);
}

/* Link buttons (a[role=button]) */
a[role=button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: var(--trp-btn-padding-y) var(--trp-btn-padding-x);
    font-family: inherit;
    font-size: var(--trp-btn-font-size);
    font-weight: var(--trp-btn-font-weight);
    line-height: var(--trp-btn-line-height);
    text-decoration: none;
    white-space: nowrap;
    border: var(--trp-input-border-width) solid transparent;
    border-radius: var(--trp-btn-radius);
    cursor: pointer;
    outline: none;
    transition:
        background-color var(--trp-transition),
        border-color var(--trp-transition),
        color var(--trp-transition),
        box-shadow var(--trp-transition),
        transform var(--trp-transition-fast);
    box-sizing: border-box;
    background-color: var(--trp-primary);
    color: var(--trp-text-on-primary);
}

/* Hover */
button:hover,
[type=submit]:hover,
[type=button]:hover,
[type=reset]:hover,
a[role=button]:hover,
[role=button]:not(a):hover {
    background-color: var(--trp-primary-hover);
    box-shadow: var(--trp-shadow-sm);
    transform: translateY(-1px);
}

/* Focus-visible */
button:focus-visible,
[type=submit]:focus-visible,
[type=button]:focus-visible,
[type=reset]:focus-visible,
a[role=button]:focus-visible,
[role=button]:not(a):focus-visible {
    box-shadow: 0 0 0 3px var(--trp-primary-glow-strong);
}

/* Active / pressed */
button:active,
[type=submit]:active,
[type=button]:active,
[type=reset]:active,
a[role=button]:active,
[role=button]:not(a):active {
    transform: translateY(0);
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   13. Button — Secondary
   -------------------------------------------------------------------------- */
button.secondary,
[type=submit].secondary,
[type=button].secondary,
a[role=button].secondary,
[role=button].secondary,
.wp-block-button.secondary a {
    background-color: var(--trp-surface);
    color: var(--trp-text);
    border-color: var(--trp-border);
}

button.secondary:hover,
[type=submit].secondary:hover,
[type=button].secondary:hover,
a[role=button].secondary:hover,
[role=button].secondary:hover,
.wp-block-button.secondary a:hover {
    background-color: var(--trp-surface-raised);
    border-color: var(--trp-primary);
    color: var(--trp-primary);
}

button.secondary:focus-visible,
[type=submit].secondary:focus-visible,
[type=button].secondary:focus-visible,
a[role=button].secondary:focus-visible,
[role=button].secondary:focus-visible {
    box-shadow: 0 0 0 3px var(--trp-primary-glow);
}


/* --------------------------------------------------------------------------
   14. Button — Outline
   -------------------------------------------------------------------------- */
button.outline,
[type=submit].outline,
[type=button].outline,
a[role=button].outline,
[role=button].outline {
    background-color: transparent;
    color: var(--trp-primary);
    border-color: var(--trp-primary);
}

button.outline:hover,
[type=submit].outline:hover,
[type=button].outline:hover,
a[role=button].outline:hover,
[role=button].outline:hover {
    background-color: var(--trp-primary-50);
    color: var(--trp-primary-hover);
    border-color: var(--trp-primary-hover);
}


/* --------------------------------------------------------------------------
   15. Button — Ghost
   -------------------------------------------------------------------------- */
button.ghost,
[type=button].ghost,
a[role=button].ghost,
[role=button].ghost {
    background-color: transparent;
    color: var(--trp-text-secondary);
    border-color: transparent;
}

button.ghost:hover,
[type=button].ghost:hover,
a[role=button].ghost:hover,
[role=button].ghost:hover {
    background-color: var(--trp-surface-hover);
    color: var(--trp-text);
}


/* --------------------------------------------------------------------------
   16. Button — Danger
   -------------------------------------------------------------------------- */
button.danger,
[type=submit].danger,
[type=button].danger,
a[role=button].danger,
[role=button].danger {
    background-color: var(--trp-danger);
    color: #fff;
    border-color: transparent;
}

button.danger:hover,
[type=submit].danger:hover,
[type=button].danger:hover,
a[role=button].danger:hover,
[role=button].danger:hover {
    background-color: var(--trp-danger-hover);
}

button.danger:focus-visible,
[type=submit].danger:focus-visible,
[type=button].danger:focus-visible,
a[role=button].danger:focus-visible,
[role=button].danger:focus-visible {
    box-shadow: 0 0 0 3px var(--trp-danger-glow);
}

/* Danger outline */
button.danger.outline,
a[role=button].danger.outline,
[role=button].danger.outline {
    background-color: transparent;
    color: var(--trp-danger);
    border-color: var(--trp-danger);
}

button.danger.outline:hover,
a[role=button].danger.outline:hover,
[role=button].danger.outline:hover {
    background-color: var(--trp-danger-50);
    color: var(--trp-danger-hover);
    border-color: var(--trp-danger-hover);
}


/* --------------------------------------------------------------------------
   17. Button — Contrast (dark)
   -------------------------------------------------------------------------- */
button.contrast,
a[role=button].contrast,
[role=button].contrast {
    background-color: var(--trp-text);
    color: var(--trp-surface);
    border-color: transparent;
}

button.contrast:hover,
a[role=button].contrast:hover,
[role=button].contrast:hover {
    background-color: #000;
}

button.contrast.outline,
a[role=button].contrast.outline,
[role=button].contrast.outline {
    background-color: transparent;
    color: var(--trp-text);
    border-color: var(--trp-text);
}

button.contrast.outline:hover,
a[role=button].contrast.outline:hover,
[role=button].contrast.outline:hover {
    background-color: var(--trp-surface-hover);
}


/* --------------------------------------------------------------------------
   18. Button Sizes
   -------------------------------------------------------------------------- */
.btn-xs,
button.btn-xs,
a[role=button].btn-xs {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-radius: var(--trp-radius-xs);
}

.btn-sm,
button.btn-sm,
a[role=button].btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.84rem;
}

.btn-lg,
button.btn-lg,
a[role=button].btn-lg {
    padding: 0.72rem 2rem;
    font-size: 1.05rem;
}

.btn-xl,
button.btn-xl,
a[role=button].btn-xl {
    padding: 0.85rem 2.5rem;
    font-size: 1.12rem;
    border-radius: var(--trp-radius);
}

/* Full-width */
.btn-block,
button.btn-block,
a[role=button].btn-block {
    display: flex;
    width: 100%;
}


/* --------------------------------------------------------------------------
   19. Button — Pill Shape
   -------------------------------------------------------------------------- */
.btn-pill,
button.btn-pill,
a[role=button].btn-pill {
    border-radius: var(--trp-radius-pill);
}


/* --------------------------------------------------------------------------
   20. Button — Icon Only
   -------------------------------------------------------------------------- */
.btn-icon,
button.btn-icon,
a[role=button].btn-icon {
    padding: var(--trp-btn-padding-y);
    aspect-ratio: 1;
}


/* --------------------------------------------------------------------------
   21. Button — Loading State
   -------------------------------------------------------------------------- */
button[aria-busy=true],
[type=submit][aria-busy=true],
a[role=button][aria-busy=true],
[role=button][aria-busy=true] {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

button[aria-busy=true]::after,
[type=submit][aria-busy=true]::after,
a[role=button][aria-busy=true]::after,
[role=button][aria-busy=true]::after {
    content: "";
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: trp-btn-spin 0.6s linear infinite;
    color: var(--trp-text-on-primary);
}

/* Spinner color for secondary/outline/ghost */
button.secondary[aria-busy=true]::after,
button.outline[aria-busy=true]::after,
button.ghost[aria-busy=true]::after {
    color: var(--trp-primary);
}

@keyframes trp-btn-spin {
    to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   22. Button — Disabled
   -------------------------------------------------------------------------- */
button[disabled],
[type=submit][disabled],
[type=button][disabled],
[type=reset][disabled],
a[role=button][aria-disabled=true],
[role=button][aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   23. Button Group
   -------------------------------------------------------------------------- */
[role=group] {
    display: inline-flex;
    border-radius: var(--trp-btn-radius);
}

[role=group] > button,
[role=group] > [role=button],
[role=group] > a[role=button],
[role=group] > input:not([type=checkbox]):not([type=radio]):not(.ts-input) {
    border-radius: 0;
    margin: 0;
}

[role=group] > :first-child {
    border-top-left-radius: var(--trp-btn-radius);
    border-bottom-left-radius: var(--trp-btn-radius);
}

[role=group] > :last-child {
    border-top-right-radius: var(--trp-btn-radius);
    border-bottom-right-radius: var(--trp-btn-radius);
}

[role=group] > :not(:first-child) {
    margin-left: calc(var(--trp-input-border-width) * -1);
}


/* --------------------------------------------------------------------------
   24. WordPress Button Classes Compatibility
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link,
:not(li).button,
.woocommerce-store-notice__dismiss-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: var(--trp-btn-padding-y) var(--trp-btn-padding-x);
    font-family: inherit;
    font-size: var(--trp-btn-font-size);
    font-weight: var(--trp-btn-font-weight);
    line-height: var(--trp-btn-line-height);
    text-decoration: none;
    white-space: nowrap;
    border: var(--trp-input-border-width) solid transparent;
    border-radius: var(--trp-btn-radius);
    cursor: pointer;
    outline: none;
    transition:
        background-color var(--trp-transition),
        border-color var(--trp-transition),
        color var(--trp-transition),
        box-shadow var(--trp-transition),
        transform var(--trp-transition-fast);
    box-sizing: border-box;
    background-color: var(--trp-primary);
    color: var(--trp-text-on-primary);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
:not(li).button:hover,
.woocommerce-store-notice__dismiss-link:hover {
    background-color: var(--trp-primary-hover);
    color: var(--trp-text-on-primary);
    box-shadow: var(--trp-shadow-sm);
    transform: translateY(-1px);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
:not(li).button:focus-visible {
    box-shadow: 0 0 0 3px var(--trp-primary-glow-strong);
}

.wp-element-button:active,
.wp-block-button__link:active,
:not(li).button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* WP secondary button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--trp-primary);
    border-color: var(--trp-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--trp-primary-50);
    color: var(--trp-primary-hover);
    border-color: var(--trp-primary-hover);
}


/* --------------------------------------------------------------------------
   25. Range Input
   -------------------------------------------------------------------------- */
[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--trp-border-light);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 0.75rem 0;
}

[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--trp-primary);
    border: 2px solid var(--trp-surface);
    border-radius: 50%;
    box-shadow: var(--trp-shadow-sm);
    cursor: pointer;
    transition: all var(--trp-transition);
}

[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--trp-primary);
    border: 2px solid var(--trp-surface);
    border-radius: 50%;
    box-shadow: var(--trp-shadow-sm);
    cursor: pointer;
}

[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--trp-primary-glow);
}

[type=range]:active::-moz-range-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--trp-primary-glow);
}


/* --------------------------------------------------------------------------
   26. Search Input (exclude Tom Select inline search fields)
   -------------------------------------------------------------------------- */
[type=search]:not(.ts-input) {
    border-radius: var(--trp-radius-pill);
    padding-left: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem center;
    background-size: 16px;
}

[type=search]:not(.ts-input)::-webkit-search-cancel-button {
    -webkit-appearance: none;
}


/* --------------------------------------------------------------------------
   27. Color Input
   -------------------------------------------------------------------------- */
[type=color] {
    width: 42px;
    height: 42px;
    padding: 3px;
    border: var(--trp-input-border-width) solid var(--trp-border);
    border-radius: var(--trp-radius-sm);
    cursor: pointer;
    background: var(--trp-surface);
}

[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--trp-radius-sm) - 3px);
}

[type=color]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--trp-radius-sm) - 3px);
}