/*------------------------------------*\
 * #IMPORTS
 * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css);

/* --- Section and Container --- */
.job-detail-section {
  width: 100%;
  padding-top: 50px; /* py-5 */
  padding-bottom: 50px; /* py-5 */
  /* margin-top: 100px; */
  box-sizing: border-box;
}

.job-detail-container {
  /* container-fluid */
  width: 100%; /* container-fluid is full width */
  max-width: 1200px; /* Or whatever max-width you want for a "fluid" container that still has a max */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; /* Default Bootstrap padding */
  padding-right: 15px;
  box-sizing: border-box;
}

/* --- Main Layout Row --- */
.job-detail-layout {
  /* row justify-content-around flex-lg-row flex-column */
  display: flex;
  flex-direction: column; /* Default to column for mobile */
  justify-content: center; /* Centers content when in column mode */
  align-items: center; /* Centers content when in column mode */
  width: 100%;
}

@media (min-width: 992px) {
  /* flex-lg-row */
  .job-detail-layout {
    flex-direction: row; /* Desktop layout: row */
    justify-content: space-around; /* justify-content-around */
    align-items: flex-start; /* Align items to the top for side-by-side layout */
  }
}

/* --- Left Column: Sidebar --- */
.job-sidebar {
  /* col-lg-4 col-sm-12 col-12 */
  width: 100%; /* Default mobile width */
  box-sizing: border-box;
  padding-left: 15px; /* Standard column padding */
  padding-right: 15px;
  margin-bottom: 30px; /* Space between sidebar and main content on mobile */
}

@media (min-width: 992px) {
  /* col-lg-4 */
  .job-sidebar {
    width: 33.333333%; /* 4/12 */
    max-width: 400px; /* Prevent sidebar from getting too wide on huge screens */
    margin-bottom: 0; /* Remove bottom margin on desktop */
  }
}

.job-sidebar-title {
  /* h3 font-weight-bolder */
  font-weight: bolder;
  color: var(--black);
  margin-bottom: 15px;
}

.job-sidebar-description {
  /* p font-weight-light mt-3 */
  font-weight: lighter; /* Using lighter instead of light to match common font weights */
  margin-top: 15px; /* mt-3 */
  margin-bottom: 25px; /* Add some space below the description */
}

.tab-control {
  /* role-box, apply-box d-flex align-items-center px-3 */
  height: 50px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  display: flex; /* d-flex */
  align-items: center; /* align-items-center */
  padding-left: 15px; /* px-3 (approx) */
  padding-right: 15px;
  margin-bottom: 10px; /* Space between tabs */
  color: var(--black); /* Default text color for tabs */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual separation */
  background-color: var(--white); /* Default background */
}

.tab-control:hover {
  background-color: lightgray; /* Light hover effect */
}

.tab-control.active-tab {
  /* active-tab */
  background-color: var(--bg); /* background-color: var(--bg); */
  color: var(--white);
  /* border-radius: 10px; - This seems to conflict with 5px on role-box/apply-box, keeping 5px for consistency */
}

.tab-control.active-tab p {
  color: var(--white); /* Ensure text inside active tab is white */
}

.tab-control .icon-left-margin {
  /* fa-solid fa-book-open mr-2 */
  margin-right: 8px; /* mr-2 */
  font-size: 1.1em;
}

.tab-control .tab-text {
  /* p font-weight-bolder mb-0 */
  font-weight: bolder;
  margin-bottom: 0; /* mb-0 */
  line-height: 1; /* Helps vertical alignment */
}

/* --- Right Column: Main Job Content Area --- */
.job-main-content {
  /* col-lg-7 col-sm-12 col-12 */
  width: 100%; /* Default mobile width */
  box-sizing: border-box;
  padding-left: 15px; /* Standard column padding */
  padding-right: 15px;
}

@media (min-width: 992px) {
  /* col-lg-7 */
  .job-main-content {
    width: 58.333333%; /* 7/12 */
    max-width: 700px; /* Prevent content from getting too wide on huge screens */
  }
}

/* --- Job Description Content --- */
.job-description-content {
      width: 100%;
      color: var(--black);
}

.job-description-content ul {
      list-style-type: disc;
      margin-left: 20px;
      margin-bottom: 20px;
      padding: 0;
}

.job-description-content ul li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.job-description-content ul li strong {
  font-weight: bolder;
}

.apply-for-role-button {
  /* btn btn-apply, id apply-role */
  background-color: var(--bg); /* background-color: var(--bg); !important removed */
  color: var(--white);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  display: inline-block; /* Behave like a button */
  text-align: center;
  text-decoration: none; /* In case it was an anchor previously */
  transition: background-color 0.3s ease;
  margin-top: 20px; /* Space above button */
}

/* --- Application Form Section --- */
.job-application-form-section {
  /* row justify-content-center flex-column, col-lg-12 col-sm-12 mt-2 application-form */
  width: 100%; /* col-lg-12, col-sm-12 */
  margin-top: 10px; /* mt-2 */
  box-sizing: border-box;
  /* This section was originally nested inside the .job-main-content's second column,
       so its parent is already the main right column. We can just style it directly. */
  display: flex; /* Assuming it starts hidden and flex-column when visible */
  flex-direction: column;
  align-items: flex-start; /* Align text left */
}

.application-form-intro-light {
  /* p font-weight-light */
  font-weight: lighter;
  color: var(--light-text);
  margin-bottom: 5px;
}

.application-form-intro-bold {
  /* p font-weight-bolder */
  font-weight: bolder;
  color: var(--dark-text);
  margin-bottom: 20px;
}

.career-application-form {
  /* career-form py-5 */
  background-color: var(--light_grey); /* background-color: lightgray; */
  color: var(--dark-text); /* color: black !important; */
  border-radius: 30px;
  padding: 50px; /* py-5 */
  width: 100%; /* Ensure it takes full width */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  /* @media (max-width: 768px) */
  .career-application-form {
    border-radius: 0; /* border-radius: 0; */
    padding: 30px 15px; /* Adjust padding for smaller screens */
  }
}

/* --- Form Elements --- */
.form-group {
  /* form-group */
  margin-bottom: 1rem; /* Standard form group spacing */
}

.form-label {
  /* label style="color: black; font-weight: bolder;" */
  color: var(--black);
  font-weight: bolder;
  display: block; /* Make labels block-level for better spacing */
  margin-bottom: 5px;
}

.form-input {
  /* form-control custom-input */
  height: 40px;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  color: #000;
  width: 100%; /* Make input take full width of its container */
  box-sizing: border-box;
  background-color: var(--white); /* Ensure background is visible */
}

.form-input:focus,
.file-name-display:focus {
  /* custom-input:focus, custom-input2:focus */
  outline: none;
  box-shadow: none;
}

.file-input-group {
  /* form-group d-flex justify-content-between */
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically align items in the row */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.file-label {
  /* btn btn-outline-dark col-lg-3 mr-sm-2 mb-2 border-0 bg-light */
  background-color: #f8f9fa; /* bg-light */
  color: var(--black); /* btn-outline-dark */
  border: none; /* border-0 */
  padding: 8px 15px;
  border-radius: 5px; /* Adjust as needed, Bootstrap buttons are usually 0.25rem */
  cursor: pointer;
  font-weight: bold;
  flex-shrink: 0; /* Prevent label from shrinking */
  margin-right: 15px; /* mr-sm-2 */
  margin-bottom: 10px; /* mb-2 */
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align: center;
  min-width: 120px; /* Give it a reasonable minimum width */
}

.file-label:hover {
  /* btn-outline-dark:hover */
  background-color: var(--bg); /* background-color: var(--bg)!important; */
  color: var(--white);
}

.hidden-file-input {
  /* d-none */
  display: none;
}

.file-name-display {
  /* form-control mb-2 ml-3 custom-input2 */
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  color: #000;
  flex-grow: 1; /* Allow it to take remaining space */
  margin-bottom: 10px; /* mb-2 */
  margin-left: 15px; /* ml-3 */
  background-color: var(--white);
  height: 40px; /* Match height of custom-input */
  box-sizing: border-box;
}

@media (max-width: 576px) {
  /* Adjust file input stack on very small screens */
  .file-input-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .file-label {
    width: 100%;
    margin-right: 0;
  }
  .file-name-display {
    width: 100%;
    margin-left: 0;
  }
}

.form-submit-wrapper {
  /* d-flex justify-content-center col-6 mx-auto */
  display: flex;
  justify-content: center;
  width: 30%; /* col-6 */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  margin-top: 20px; /* Add some top margin for spacing */
}

.submit-button {
  /* submit-contact d-flex justify-content-center */
  background-color: var(--bg); /* background-color: var(--bg); */
  color: var(--white);
  width: 100%;
  height: 40px;
  border-radius: 5px;
  display: flex; /* d-flex */
  align-items: center; /* align-items-center */
  justify-content: center; /* justify-content-center */
  border: 0px; /* border: 0px; */
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}