/* 
 * WordPress Core Search Block Customizations
 * Enhances the native webkit clear button with custom styling
 */

/* Replace native webkit search clear button with custom SVG */
.wp-block-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-right: -4px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e") center/18px no-repeat;
    cursor: pointer;
}

/* Hover effect */
.wp-block-search input[type="search"]::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e");
}

/* Remove other webkit search decorations that we don't want */
.wp-block-search input[type="search"]::-webkit-search-decoration,
.wp-block-search input[type="search"]::-webkit-search-results-button,
.wp-block-search input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* Ensure proper spacing and positioning */
.wp-block-search input[type="search"] {
    padding-right: 0px;
}

/* For button-inside search blocks, add more padding */
.wp-block-search.wp-block-search__button-inside input[type="search"] {
    padding-right: 16px;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .wp-block-search input[type="search"]::-webkit-search-cancel-button {
        height: 14px;
        width: 14px;
        background-size: 10px 10px;
    }
} 

.wp-block-search__inside-wrapper{
    padding: 0;
}