/* ============================================
     Job Search Style 
     ============================================ */

.job-search-toplevel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 12px;
}

@media (min-width: 1200px) {
    .job-search-toplevel-container {
        padding: 0 12px;
    }
}

.job-search-container {
    display: flex;
    align-items: center;
    background-color: var(--white, #ffffff);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-job-card, 0px 2px 30px 0px rgba(0, 0, 0, 0.08));
    padding: var(--spacing-sm, 8px);
    padding-left: var(--spacing-md, 16px);
    padding-right: var(--spacing-sm, 8px);
    width: 40%;
    box-sizing: border-box;
}

  input[type="text"].job-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body, arial, helvetica, sans-serif);
    font-size: var(--font-size-body, 17px);
    line-height: var(--line-height-body, 24px);
    color: var(--grey-body-text, #444444);
    padding: 0;
    margin: 0;
}

.job-search-input::placeholder {
    color: var(--grey-body-text, #444444);
    opacity: 1;
}

.job-search-button {
    background-color: var(--aqua, #27e0d0);
    border: none;
    border-radius: var(--radius-sm, 4px);
    padding: 12px var(--spacing-xl, 32px);
    font-family: var(--font-body, arial, helvetica, sans-serif);
    font-size: var(--font-size-body, 17px);
    font-weight: 700;
    line-height: var(--line-height-body, 24px);
    color: var(--grey-button-text, #43424a);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.job-search-button:hover {
    background-color: #22c9bb;
}

.job-search-button:active {
    background-color: #1fb3a6;
}

/* Remove default button focus outline and add custom focus style */
.job-search-button:focus {
    outline: 2px solid var(--aqua, #27e0d0);
    outline-offset: 2px;
}

/* Ensure input maintains proper spacing */
.job-search-input:focus {
    outline: none;
}



  /* ============================================
     Job Listing Card Container
     ============================================ */
     .job-listing-card {
        background-color: var(--white);
        padding: var(--spacing-xl);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-job-card);
        width: 100%;
        box-sizing: border-box;
      }
      
      /* ============================================
         Card Content Layout
         ============================================ */
      .job-listing-card-content {
        display: flex;
        gap: var(--spacing-xxl);
        align-items: flex-start;
        width: 100%;
      }
      
      /* ============================================
         Main Content Area
         ============================================ */
      .job-listing-card-main {
        flex: 1 0 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        min-width: 0;
      }
      
      /* ============================================
         Job Title
         ============================================ */
      h2.job-listing-card-title {
        font-family: var(--font-heading);
        font-size: var(--font-size-h3);
        font-weight: 700;
        /* line-height: var(--line-height-h3); */
        
        text-transform: uppercase;
        margin: 0;
        letter-spacing: 0;
      }

      h2.job-listing-card-title a {
        color: #494A52 !important;
      }
      
      /* ============================================
         Job Details Container
         ============================================ */
      .job-listing-card-details {
        display: flex;
        gap: var(--spacing-xl);
        align-items: flex-start;
        width: 100%;
        flex-wrap: wrap;
      }
      
      /* ============================================
         Job Details Column
         ============================================ */
      .job-listing-card-details-col {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
      }
      
      /* ============================================
         Job Detail Row
         ============================================ */
      .job-listing-card-detail-row {
        display: flex;
        gap: var(--spacing-xs);
        font-size: var(--font-size-job-info);
        line-height: var(--line-height-job-info);
        color: var(--grey-body-text);
      }
      
      .job-listing-card-detail-label {
        font-family: var(--font-body);
        font-weight: 700;
      }
      
      .job-listing-card-detail-value {
        font-family: var(--font-body);
        font-weight: 400;
      }
      
      /* ============================================
         Action Buttons Container
         ============================================ */
      .job-listing-card-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        flex-shrink: 0;
      }
      
      /* ============================================
         Apply Now Button
         ============================================ */
      .job-listing-card-apply-button {
        background-color: var(--aqua);
        padding: 12px var(--spacing-xl);
        border-radius: var(--radius-sm);
        border: none;
        font-family: var(--font-body);
        font-size: var(--font-size-body);
        font-weight: 700;
        line-height: var(--line-height-body);
        color: var(--grey-button-text);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 147px;
        white-space: nowrap;
        text-decoration: none;
        display: inline-block;
        box-sizing: border-box;
      }
      
      .job-listing-card-apply-button:hover {
        background-color: var(--blue);
        color: var(--white);
      }
      
      .job-listing-card-apply-button:focus {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
      }
      
      /* ============================================
         View Details Button
         ============================================ */
      .job-listing-card-view-details-button {
        border: 1px solid var(--grey-button-text) !important;
        background-color: var(--white);
        padding: 12px var(--spacing-lg);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: var(--font-size-body);
        font-weight: 700;
        line-height: var(--line-height-body);
        color: var(--grey-button-text);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        text-decoration: none;
        display: inline-block;
        box-sizing: border-box;
      }
      
      .job-listing-card-view-details-button:hover {
        background-color: #f5f5f5;
      }
      
      .job-listing-card-view-details-button:focus {
        outline: 2px solid var(--grey-button-text);
        outline-offset: 2px;
      }
      
      /* ============================================
         Responsive Styles
         ============================================ */
      @media (max-width: 768px) {
        .job-listing-card {
          padding: var(--spacing-lg);
        }
        
        .job-listing-card-content {
          flex-direction: column;
          gap: var(--spacing-lg);
        }
        
        .job-listing-card-details {
          flex-direction: column;
          gap: var(--spacing-md);
        }
        
        .job-listing-card-actions {
          width: 100%;
        }
        
        .job-listing-card-apply-button,
        .job-listing-card-view-details-button {
          width: 100%;
        }
        
        .job-listing-card-title {
          font-size: 28px;
          line-height: 36px;
        }
      }
      
      @media (max-width: 480px) {
        .job-listing-card {
          padding: var(--spacing-md);
        }
        
        .job-listing-card-title {
          font-size: 24px;
          line-height: 32px;
        }
      }



/* ============================================
   Job Listing Card (Compact Variant)
   Based on Figma Design: Planet Pharma
   Node ID: 4-2590
   ============================================ */
.job-listing-card-compact {
  background-color: var(--white);
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-job-card);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Job Title Section */
.job-listing-card-compact-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.job-listing-card-compact-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: 400;
  line-height: 32px;
  color: var(--grey-headings);
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0;
}

.job-listing-card-compact-divider {
  height: 1px;
  width: 100%;
  background-color: var(--grey-headings);
  margin: 0;
}

/* Job Details Section */
.job-listing-card-compact-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

.job-listing-card-compact-detail-row {
  display: flex;
  gap: var(--spacing-xs);
  font-size: var(--font-size-job-info);
  line-height: var(--line-height-job-info);
  color: var(--grey-body-text);
  width: 100%;
}

.job-listing-card-compact-detail-label {
  font-family: var(--font-body);
  font-weight: 700;
}

.job-listing-card-compact-detail-value {
  font-family: var(--font-body);
  font-weight: 400;
}

/* View Details Button */
.job-listing-card-compact-view-details-button {
  border: 1px solid var(--grey-button-text);
  background-color: var(--white);
  padding: 12px var(--spacing-xl);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-body);
  color: var(--grey-button-text);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
}

.job-listing-card-compact-view-details-button:hover {
  background-color: #f5f5f5;
}

.job-listing-card-compact-view-details-button:focus {
  outline: 2px solid var(--grey-button-text);
  outline-offset: 2px;
}

/* Responsive Styles for Compact Card */
@media (max-width: 768px) {
  .job-listing-card-compact {
    padding: var(--spacing-md);
  }
  
  .job-listing-card-compact-title {
    font-size: 20px;
    line-height: 28px;
  }
}