﻿/* Container for the outline-style input */
.md-outline {
    position: relative;
    margin-bottom: 1rem;
}

    /* The input itself */
    .md-outline .form-control {
        border: 1.5px solid #ced4da;
        border-radius: 0;
        padding: 1rem 0.75rem 0.5rem; /* room for the label */
        background-color: #fff; /* ensure label background matches */
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .md-outline .form-control:focus {
            border-color: #154273;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }

    /* The label — sits inside the input, then moves onto its border */
    .md-outline .form-label {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0 0.25rem;
        line-height: 1;
        color: #6c757d;
        background-color: #fff; /* creates the "cutout" on the border */
        pointer-events: none;
        transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease, top 0.2s ease;
    }

    /* Floating state — on focus or when the input has content */
    .md-outline .form-control:focus ~ .form-label,
    .md-outline .form-control:not(:placeholder-shown) ~ .form-label,
    .md-outline.has-value .form-label {
        top: 0; /* moves label to the border line */
        transform: translateY(-50%) scale(0.9);
        font-size: 0.85rem;
        color: #154273;
    }

    /* Optional: when not focused but filled, use a neutral color */
    .md-outline .form-control:not(:focus):not(:placeholder-shown) ~ .form-label,
    .md-outline.has-value:not(:focus-within) .form-label {
        color: #6c757d;
    }

.md-outline {
    position: relative;
}

    .md-outline .form-control {
        padding-right: 6rem; /* space for button */
    }

    .md-outline .search-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.25rem;
        background-color: #e17000;
        color: #fff;
        border: 4px solid #e17000;
        border-radius: 0;
        padding: 0.35rem 1rem;
        cursor: pointer;
    }

        .md-outline .search-btn:hover {
            background-color: #ff8a16;
            border: 4px solid #ff8a16;
        }

fieldset {
    border: 2px solid #15427335; /* Bootstrap primary color */
    border-radius: 0.5rem;
    padding: 1.5rem;
    position: relative;
    margin-bottom: 1.5rem;
}

legend {
    float: none;
    width: auto;
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #15427370;
}

.form-check-label {
    font-size: 0.8em;
}

.search-options {
    color: #15427370;
    font-size: 0.85em; /* smaller text */
    vertical-align: 0.05em; /* push it up a little */
    padding-right: 15px;
    font-style: italic;
}

.fa-search {
    padding-right: 10px;
}

