/*
 Theme Name: Divi Child
 Theme URI: https://example.com
 Description: A child theme for Divi.
 Author: Your Name
 Author URI: https://example.com
 Template: Divi
 Version: 1.1
 Text Domain: divi-child
 */

/* Custom Styles for Job Listings */

.job-listing-item {
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 4px; /* 4px distance from each job */
}

.job-title {
    color: #008000; /* Green */
    font-size: 24px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}

.job-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-item {
    display: flex;
    align-items: center;
    color: #000;
}

.detail-item i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.learn-more-button:hover i {
    transform: translateX(5px);
}


/* NEW STYLES for the requested design */

/* Main container for each job post */
.job-listing-item-new {
    padding: 20px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Flexbox container for the title/details and buttons */
.job-header-new {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* Wrapper for title and details to keep them together */
.job-title-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

/* Job Title */
.job-title-new {
    color: #000 !important; /* Black */
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* The line with type, salary, and location */
.job-details-new {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    color: #000 !important;
    font-size: 14px !important;
    margin-top: 5px !important; /* Spacing below the title */
}

/* Make text thinner as requested */
.job-details-new span {
    font-weight: normal !important;
}

/* Adds the dot separator between details */
.job-details-new .detail-item-new:not(:last-child)::after {
    content: "•" !important;
    margin: 0 8px !important;
    font-size: 10px !important;
    vertical-align: middle !important;
}

/* The single button container */
.job-buttons-new-design {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Corrected Rectangular button style */
.job-buttons-new-design .learn-more-button-rect {
    border-radius: 2px !important; /* Makes the corners slightly rounded */
    padding: 7px 15px !important; /* Adjusts the size of the button */
    font-weight: 600 !important; /* Bolder font */
    text-transform: uppercase !important; /* Capitalizes the text */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    font-size: 11px !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    background-color: #067963 !important; /* Green color */
}

.job-buttons-new-design .learn-more-button-rect:hover {
    background-color: #006400 !important; /* Darker green on hover */
}

/* Correctly position the icon */
.job-buttons-new-design .learn-more-button-rect .et-pb-icon {
    font-size: 1em !important;
    margin-left: 8px !important; /* Adds space between text and icon */
    transform: none !important; /* Prevents the icon from moving */
}

/* Filter button styles */
.filter-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.filter-button {
    background-color: #f0f0f0;
    color: #333;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-button.active {
    background-color: #008000;
    color: #fff;
}

.filter-button:hover:not(.active) {
    background-color: #e0e0e0;
}

/* -------------------------------------- */
/* NEW STYLES for Filters and Checkboxes */
/* -------------------------------------- */

/* Style for the filter group titles (e.g., "Location", "Industry") */
.filter-group h4 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important; /* Semi Bold */
}

/* Style for the filter option text (e.g., "Netherlands", "Greece") */
.filter-option label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important; /* Light */
    color: #000 !important; /* Black */
}

/* Hide the default checkbox */
.filter-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    top: -1px;
}

/* Style the custom checkmark when the checkbox is checked */
.filter-option input[type="checkbox"]:checked {
    background-color: #fff;
    border-color: #067963;
}

.filter-option input[type="checkbox"]:checked::after {
    content: '\2713'; /* Unicode for checkmark */
    font-size: 14px;
    color: #067963; /* Green color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* NEW STYLES for Search Bar and Button */
.search-bar-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.search-bar-main input[type="text"] {
    height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 16px;
    width: 100%;
    max-width: 600px;
}

.search-bar-main .search-button {
    background-color: #067963; /* Green background color */
    color: #fff; /* White font color */
    font-size: 14px;
    font-weight: 600;
    height: 40px; /* Set height to match the search bar */
    padding: 0 20px; /* Adjust padding to keep width consistent */
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex; /* Added to use flexbox for centering */
    align-items: center; /* Vertically centers the text */
    justify-content: center; /* Horizontally centers the text */
}

.search-bar-main .search-button:hover {
    background-color: #006400 !important; /* Darker green on hover */
}

/* NEW STYLES for Main Layout Containers */
.main-layout-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.filters-container {
    width: 30%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 20px;
}

.jobs-container {
    flex-grow: 1;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 20px;
}