/* 💎 ULTRA-PREMIUM GLASSMORPHISM FILTER BANNER ENGINE */
.somon-glass-filter-banner,
.somon-blue-filter-banner,
#custom-category-info {
background: rgba(0, 140, 210, 0.88) !important;
backdrop-filter: blur(18px) saturate(180%) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 10px !important;
box-shadow: 0 8px 32px 0 rgba(0, 120, 190, 0.3), inset 0 1px 1px 0 rgba(255, 255, 255, 0.4) !important;
padding: 12px 14px 12px 14px !important;
margin-top: 14px !important;
margin-bottom: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#custom-field-block {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Grid Layout matching screenshot */
#ResponseCustomFields {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px 10px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Vertical Stack Range Filter with Bracket Connector */
.col-range-filter {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
position: relative !important;
padding-left: 9px !important;
margin: 0 !important;
flex: 0 0 calc(16.66% - 10px) !important;
min-width: 135px !important;
}
/* Vertical Left Bracket Line Connector */
.col-range-filter::before {
content: "" !important;
position: absolute !important;
left: 2px !important;
top: 5px !important;
bottom: 5px !important;
width: 4px !important;
border-left: 2px solid rgba(255, 255, 255, 0.85) !important;
border-top: 2px solid rgba(255, 255, 255, 0.85) !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.85) !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
/* Single Field Filter Block */
#ResponseCustomFields .filter-block:not(.col-range-filter):not(.somon-buttons-col) {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 calc(16.66% - 10px) !important;
min-width: 135px !important;
}
/* Form Controls Styling */
.somon-glass-filter-banner select,
.somon-glass-filter-banner input[type="text"],
.somon-glass-filter-banner input[type="number"],
.somon-glass-filter-banner .form-control {
height: 32px !important;
background: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 5px !important;
font-size: 13px !important;
color: #0f172a !important;
font-weight: 500 !important;
padding: 0 20px 0 9px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important;
background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 6px center !important;
width: 100% !important;
}
.somon-glass-filter-banner input[type="text"] {
background-image: none !important;
padding-right: 9px !important;
}
.somon-glass-filter-banner select:focus,
.somon-glass-filter-banner input:focus {
outline: none !important;
border-color: #ffb700 !important;
box-shadow: 0 0 0 2.5px rgba(255, 183, 0, 0.4) !important;
}
/* Compact Yellow Search Icon Button on Far Right */
.somon-buttons-col {
margin-left: auto !important;
flex: 0 0 auto !important;
min-width: unset !important;
padding: 0 !important;
}
.somon-yellow-search-btn,
#button-search-main {
height: 38px !important;
width: 38px !important;
min-width: 38px !important;
border-radius: 6px !important;
background: #ffb700 !important;
color: #0f172a !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
font-size: 15px !important;
cursor: pointer !important;
transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.somon-yellow-search-btn:hover,
#button-search-main:hover {
background: #ffa700 !important;
transform: scale(1.05) !important;
}
/* Completely remove bottom tabs and reset button */
#button-search-clear,
.somon-filter-bottom-tabs {
display: none !important;
}
