/* Container Styles */
/* Centers the form with padding, subtle background, and shadow for visual appeal */
.bva-case-search-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Field Group Styles */
/* Spaces out each form field group (e.g., keyword, decision type, date range) */
.bva-field-group {
    margin-bottom: 20px;
}

/* Label Styles */
/* Bold labels with spacing for clarity */
.bva-field-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* Input and Select Styles */
/* Full-width inputs and selects with consistent padding and border */
.bva-field-group input[type="text"],
.bva-field-group input[type="date"],
.bva-field-group input[type="number"],
.bva-field-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Select Dropdown Styling */
/* Custom dropdown arrow for visual consistency */
.bva-field-group select {
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6"><path d="M0 0l6 6 6-6H0z" fill="%23333"/></svg>') no-repeat right 10px center;
    background-size: 12px;
    padding-right: 30px;
}

/* Help Text Styles */
/* Small, readable help text below fields */
.bva-field-group small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 14px;
}

/* Keyword Operator Group Styles */
/* Flex layout for keyword input and operator dropdown */
.bva-keyword-group .bva-operator-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* Keyword Input Styles */
/* Flexible width for keyword text input */
.bva-keyword-group input[type="text"] {
    flex: 1;
}

/* Operator Dropdown Styles */
/* Fixed width for operator dropdown */
.bva-keyword-group select {
    flex: 0 0 150px;
}

/* NEAR Distance Input Styles */
/* Full-width container for NEAR distance input, shown when NEAR is selected */
.bva-near-distance {
    flex: 0 0 100%;
    margin-top: 10px;
}

/* NEAR Word Distance Input Styles */
/* Compact width for number input */
.bva-near-distance input[type="number"] {
    width: 100px;
}

/* Date Range Styles */
/* Flex layout for date range section */
.bva-date-range {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Date Inputs Container Styles */
/* Side-by-side layout for date inputs */
.bva-date-inputs {
    display: flex;
    gap: 10px;
    flex: 1;
}

/* Individual Date Input Styles */
/* Equal width for start and end date inputs */
.bva-date-inputs div {
    flex: 1;
}

/* All Dates Checkbox Styles */
/* Aligns checkbox with label */
.bva-all-dates {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Submit Button Styles */
/* Full-width, WordPress-blue button with hover effect */
.bva-submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

/* Submit Button Hover Effect */
.bva-submit-button:hover {
    background: #005d88;
}

/* Submit Button Focus State */
/* Accessible outline for keyboard navigation */
.bva-submit-button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Instructions Section Styles */
/* Card-like styling for instructions */
.bva-search-instructions {
    margin-top: 30px;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Instructions Heading Styles */
/* Larger heading for hierarchy */
.bva-search-instructions h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* Instructions Paragraph Styles */
/* Spaced paragraph for readability */
.bva-search-instructions p {
    margin-bottom: 15px;
}

/* Instructions List Styles */
/* Indented list with disc markers */
.bva-search-instructions ul {
    list-style: disc;
    padding-left: 20px;
}

/* Nested Instructions List Styles */
/* Circle markers for nested lists */
.bva-search-instructions ul ul {
    list-style: circle;
    padding-left: 20px;
}

/* Instructions List Item Styles */
/* Spaced items for clarity */
.bva-search-instructions li {
    margin-bottom: 10px;
}

/* Screen Reader Text Styles */
/* Hidden but accessible for screen readers */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Hidden Field Styles */
/* Hides fields by default (used for Fields 2–4) */
.bva-hidden {
    display: none;
}

/* Responsive Styles for Smaller Screens */
@media (max-width: 480px) {
    /* Stack date inputs vertically */
    .bva-date-inputs {
        flex-direction: column;
    }
    /* Stack keyword and operator vertically */
    .bva-keyword-group .bva-operator-group {
        flex-direction: column;
        align-items: stretch;
    }
    /* Full-width operator dropdown */
    .bva-keyword-group select {
        flex: 0 0 auto;
    }
    /* Space NEAR distance input */
    .bva-near-distance {
        margin-top: 10px;
    }
}