/* Styles for the frontend display of the block */
/* Container Styling */
.productFilter-container {
    width: 100%;
    max-width: 1200px;
    padding: 20px 0;
}

.filterDimensions-container, .skuPart-container {
    margin-bottom: 20px;
}

/* For the main container */
.filterDimensions-container {
    flex-flow: column nowrap;
    justify-content: space-between;
    max-width: 160px;
}
/* For each dimension item */
.dimension-item {
    box-sizing: border-box;
    max-height: 100px;
}
.dimension-item, .dimension-input-select, .dimension-input-number {
    width: 160px;
}
form#codemilitant-makeModel-form.makeModel-container button#submit-btn,
form#codemilitant-oemBrand-form.oemBrand-container button#submit-btn,
form#codemilitant-skuPart-form.skuPart-container button#submit-btn {
    width: 160px;
}

/* Styling for the labels and inputs */
.dimension-item label {
    margin-bottom: 10px;       /* Spacing between label and input/select */
}

div#tabsearch.codemilitant-product-search input[type="text"] {
	margin-bottom: 10px;
	box-sizing: border-box;
	padding: 15px;
	border-radius: 5px;
}

div#tabsearch.codemilitant-product-search .dimension-input-number input[type="number"] {
    width: 100%;               /* Fill the width of their container */
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
}

div#tabsearch.codemilitant-product-search .dimension-input-select select {
    width: 100%;               /* Fill the width of their container */
    box-sizing: border-box;
    font-size: 20px;
    padding: 14px;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid var(--wp--preset--color--accent);
}

div#tabsearch.codemilitant-product-search .dimension-input-select {
    position: relative;
    display: inline-block;
}

div#tabsearch.codemilitant-product-search .dimension-input-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Styling the select to look good without its native arrow */
    padding-right: 25px; 
    background: none; 
    z-index: 1;
    position: relative;
}

div#tabsearch.codemilitant-product-search .dimension-input-select::after {
    content: '\1401';  /* Unicode downward triangle */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Makes click events pass through to the select below */
}

/* Product results formatting */
div#search-results-container div#search-results {
    display:flex;
    flex-flow: column nowrap;
    align-items:flex-start;
}
div#search-results-container div#search-results div.product-results-disclosure {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 10px 14px;
    background-color: #fff8e1;
    border-left: 4px solid #f9a825;
    font-size: var(--wp--preset--font-size--small);
    color: #555;
    line-height: 1.5;
}
div#search-results-container div#search-results div.product-results-found {
    margin-top: 1rem;
    margin-bottom: 3rem;
}
div#search-results-container div#search-results div.product-results {
    margin-top: 2em;
    margin-bottom: 2em;
}
div#search-results-container div#search-results div.product-results p.product-results-thumbnail-link {
    margin-bottom: 0;
}
div#search-results-container div#search-results div.product-results p.product-results-thumbnail-link img {
    float: left;
    max-width: 100px;
    margin-right: 10px;
}
div#search-results-container div#search-results div.product-results p.product-results-details {
    font-size: 18px;
}

/* Responsive styling for smaller screens */
@media (max-width: 480px) {
    .dimension-item {
        flex: 0 1 100%;       /* Take the full width on smaller screens */
    }
}

/* Show waiting spinner while search is running */
.loading-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(255,255,255,0.7); /* Black w/ opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.show-modal-error {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 20%; /* Full height */
    background-color: #d2d2d2;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}