#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 5px;
z-index: 10000;
}
.filter-content label {
display: block;
margin-bottom: 5px;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}

.filter-content label:hover {
background-color: #f0f0f0;
}

.filter-content label input[type="radio"] {
display: none;
}

.filter-content label:has(input[type="radio"]:checked) {
background-color: #00b894;
color: white;
}

/* Date inputs */
.filter-content label input[type="date"] {
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin-left: 5px;
}
.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 175px;
background-color: #24313e;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
bottom: -12%;
left: -185px;
margin-left: 0;
font-size: 14px;
}
.tooltip .tooltiptext:before {
position: absolute;
content: "";
background: url("/wp-content/uploads/2025/09/right-arrow-1.png")
    no-repeat;
background-size: contain;
background-position: right;
width: 15px;
height: 15px;
right: -10px;
top: 50%;
transform: translateY(-50%);
filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(599%)
    hue-rotate(169deg) brightness(95%) contrast(91%);
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
/* Layout */
.construction-project-div {
padding-top: 2%;
}
.container {
display: flex;
gap: 20px;
}

/* Sidebar */
.sidebar {
width: 30%;
border-radius: 5px;
padding: 0px 15px;
height: fit-content;
position: relative;
}
.sidebar h3 {
font-size: 22px;
margin-bottom: 10px;
color: #24313e;
}

/* Filter Items */
.filter-group {
border-bottom: 1px solid #ddd;
padding: 15px 0;
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: bold;
font-size: 16px;
color: #00b894;
font-family: "Inter", Sans-serif;
}
.filter-header img {
width: 18px;
height: 18px;
}
.filter-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
font-size: 13px;
padding-left: 5px;
overflow-y: scroll;
}
.filter-content.open {
max-height: 200px;
padding-top: 8px;
}
.filter-content label {
display: block;
margin-bottom: 5px;
height: 40px;
line-height: 40px;
padding: 0px 0px 0px 12px !important;
color: #24313e;
font-size: 14px;
font-family: "Inter", Sans-serif;
}
.filter-content label:not(:last-child) {
border-bottom: thin solid #e4e4e4;
}
.filter-content label input[type="checkbox"] {
margin-right: 5px;
}
.filter-btn-grp {
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.filter-btn-grp button {
width: 130px;
padding: 8px 10px;
}
/* Main Content */
.main {
flex: 1;
}

/* Sorting */
.sorting {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
gap: 15px;
}
.sorting h2 {
font-size: 26px;
line-height: normal;
margin: 0;
color: #24313e;
}
.sorting h3 {
font-size: 22px;
line-height: normal;
margin: 0;
color: #24313e;
text-transform: none;
}
.sort-controls {
display: flex;
align-items: center;
gap: 10px;
}
.sort-cb-select {
position: relative;
width: 120px;
}
.sort-toggle {
width: auto !important;
}

.sort-cb-select select {
padding: 8px 5px !important;
border-radius: 5px !important;
border: 1px solid #24313e;
background: transparent;
font-family: "Inter", Sans-serif;
appearance: none; /* hides default arrow in most browsers */
-webkit-appearance: none;
-moz-appearance: none;
font-size: 16px;
cursor: pointer;
}

.sort-cb-select::after {
content: "";
position: absolute;
top: 50%;
right: 5px;
width: 15px;
height: 15px;
pointer-events: none;
background: url("/wp-content/uploads/2025/09/down.png")
    no-repeat center;
background-size: contain;
transform: translateY(-50%);
}

.sort-toggle {
padding: 10px 10px !important;
height: 45px;
width: 55px;
}
.sort-toggle img {
width: 100%;
height: 100%;
filter: invert(100%);
}
.sort-toggle:hover img {
filter: brightness(0) saturate(100%) invert(14%) sepia(27%) saturate(796%)
    hue-rotate(171deg) brightness(88%) contrast(85%);
}

/* Results */
.results .card {
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 16px;
}
.results .card .card-title {
    margin-bottom: 5px;
    padding: 8px 20px;
    background: #e5f7f4;
    color: #24313e;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.results .card .card-title p {
    margin: 0px;
    color: #24313e;
    line-height: 1.4em;
    letter-spacing: 0px;
    font-family: "Inter", Sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.results .card .card-title img {
    width: auto;
    height: 20px;
}
.results .card .card-info {
    font-size: 15px;
    color: #000;
    display: flex;
    padding: 4px 20px;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", Sans-serif;
}
.card-element-city-country-state {
    font-weight: 500;
}
.card-element-date {
    font-weight: 500;
}
.card-element-description {
    font-size: 14px;
    font-weight: 400;
}

/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.pagination button {
padding: 8px 12px;
cursor: pointer;
width: 110px;
}
.pagination button:hover {
color: #25313e;
}
.filter-btn,
.sidebar .close-btn {
display: none;
}

/* Popup Styles */
.popup {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.popup-content {
background-color: white;
padding: 30px;
border-radius: 8px;
width: 90%;
max-width: 500px;
position: relative;
text-align: center;
}

.popup-content .close {
position: absolute;
right: 15px;
top: 10px;
font-size: 24px;
cursor: pointer;
}

.popup-content h2 {
margin-top: 0;
color: #24313e;
}

.popup-content button {
background: #00b894;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
}

.popup-content button:hover {
background: #009975;
}

/* Lock icon styles */
.lock-icon {
font-size: 22px;
}

.lock-icon img {
width: 12px;
height: auto;
border-radius: 0px;
}

.filter-group.inactive {
opacity: 0.7;
}

.filter-group.inactive .filter-header {
cursor: pointer;
}
.pagination button.disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.pagination button.disabled:hover {
background-color: #25313e;
opacity: 0.5 !important;
color: #fff;
}
.pagination button.disabled:focus {
background-color: #25313e;
opacity: 0.5 !important;
color: #fff;
}
.filter-bid-date-range .filter-content {
display: flex;
flex-direction: column;
overflow: auto;
padding-left: 0px;
}
.filter-bid-date-range .filter-content label {
display: flex;
border-bottom: none;
padding-left: 0px !important;
}
.filter-bid-date-range .filter-content label span {
width: 50px;
font-size: 15px;
color: #24313e;
}
.filter-bid-date-range .filter-content label:hover {
background: none;
}
.filter-bid-date-range .filter-content label:not(:last-child) {
margin-bottom: 15px;
}
.filter-bid-date-range .filter-content label input {
border-left: none;
border-right: none;
border-top: none;
}
.no-project-found p {
text-align: center;
margin-top: 100px !important;
font-size: 20px;
color: #00b894;
}

/* Applied Filters Styles */
.applied-filters {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}

.applied-filters-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 15px 0;
}

.applied-filters-header h3 {
margin: 0;
color: #24313e;
font-size: 18px;
}

.clear-all-filters {
background: #ff6b6b;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}

.clear-all-filters:hover {
background: #ff5252;
}

.applied-filters-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.applied-filter-item {
list-style: none;
background: #e3f4f0;
color: #25313e;
padding: 1px 10px;
border-radius: 100px;
font-size: 13px;
display: inline-flex;
align-items: center;
}

.applied-filter-item .filter-name {
font-weight: bold;
margin-right: 5px;
color: #00b894;
}

.applied-filter-item .filter-value {
margin-right: 8px;
}

.applied-filter-item .remove-filter {
background: none;
border: none;
color: #de595a;
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 0;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.applied-filter-item .remove-filter:hover {
background: #de595a;
color: white;
}

.no-filters {
color: #666;
font-style: italic;
text-align: center;
width: 100%;
padding: 10px;
}

/* 
.sort-controls select {
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
} 
.sort-controls select:after {
content: "";
position: absolute;
right: 9px;
top: 9px;
background-image: url("/wp-content/uploads/2026/01/down-arrow.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
} 
*/ 
.breadcrumb {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 0 15px;
}

.breadcrumb a {
    text-decoration: none;
    color: #00b894;
}

.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb p {
    margin-bottom: 0px;
}
.breadcrumb span {
    margin: 0 7px;
    color: #000;
    font-weight: 500;
} 

/* Mobile phones (below 575px) */
@media (max-width: 575px) { 
    .breadcrumb {
        margin-top: 10px;
        background: #f7f7f7;
        padding: 10px;
    }
    .breadcrumb p{
        word-wrap: break-word;
        white-space: normal;
    }
} 
/* ===== Tab Styles ===== */
@media (max-width: 1199px) {
    .filter-btn-grp {
        flex-wrap: wrap;
    }
}
/* ===== Mobile Styles ===== */
@media (max-width: 991px) {
    .container {
        flex-direction: column;
    }
    .sorting {
        flex-wrap: wrap;
    }
    .sorting h2 {
        width: 100%;
    }
    .filter-btn {
        width: 21%;
        margin-bottom: 0px !important;
        padding: 8.5px 10px !important;
    }
    .sort-controls {
        width: 60%;
    }

    /* Hide sidebar by default */
    .sidebar {
        position: fixed;
        top: 0;
        left: -1000px;
        height: 100%;
        width: 50%;
        max-width: 50%;
        border-radius: 0;
        border: none;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
        transition: left 0.3s ease;
        overflow-y: auto;
        background: #fff;
        z-index: 9999999;
    }

    .sidebar.active {
        left: 0;
    }

    /* Overlay */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1000;
    }
    .overlay.active {
        display: block;
    }

    /* Filter button */
    .filter-btn {
        display: none;
    }

    /* Close button inside sidebar */
    .sidebar .close-btn {
        display: block;
        text-align: right;
        margin-bottom: 10px;
    }
    .sidebar .close-btn button {
        font-weight: 300;
        background: none;
        border: none;
        font-size: 30px !important;
        cursor: pointer;
        color: #000;
        padding: 0px;
    }
    .filter-btn {
        display: inline-block;
        margin-bottom: 10px;
        padding: 8px 12px;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .sidebar .close-btn {
        display: block;
        text-align: right;
        margin-bottom: 10px;
    }
    .sidebar .close-btn button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
}
@media (max-width: 768px) {
    .sidebar.active {
        left: 0;
        width: 80%;
        max-width: 80%;
    }
    .results .card .card-info {
        align-items: flex-start;
        flex-direction: column;
        padding: 0px 20px;
    }
    .results .card .card-title {
        padding: 12px 20px;
        font-size: 18px;
    }
    .sort-toggle {
        width: 45px;
        height: 42px;
    }
    }
    @media (max-width: 709px) {
    .sort-controls {
        justify-content: flex-end;
    }
}