/* Modal + overlay base (hidden by default; JS toggles .is-active) */
.paylocity-jobs-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.55);
}

.paylocity-jobs-overlay.is-active {
  display: block;
}

.paylocity-job-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  overflow: auto;
  padding: 40px 20px;

    .paylocity-job-modal__content {
        background: #fff;
        /* border-radius: 10px; */
        padding: 18px;
        position: relative;
        height: 100%;

        .paylocity-job-modal__close {
            position: absolute;
            right: 12px;
            top: 10px;
            border: 0;
            background: transparent !important;
            font-size: 26px;
            cursor: pointer;
            color: #111;
        }

        .paylocity-job-modal__header {
            border-bottom: 1px solid #d2d2d2;
            padding: 0rem 2rem 1rem;
            h2{   font-family: "kepler-std", serif; margin: 0; line-height: 1.2em;} 
            .paylocity-job-modal__meta{   font-family: "bebas-neue", sans-serif; font-size: 18px;}
        }
        .paylocity-job-modal__body {
            height: 58vh;
            overflow: auto;
            padding: 2rem;

            h3{
                font-family: "bebas-neue", sans-serif; 
            }
            .paylocity-job-modal__rich, p, li{
                font-family: "kepler-std", serif;
                line-height: 1.5;
                margin-top: 0;
                margin-bottom: 0;
                strong, b { font-weight: 700; }
            }
        }
        .paylocity-job-modal__footer {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
            border-top: 1px solid #d2d2d2;
            padding: 1rem 2rem 0;
        }

        .paylocity-job-modal__share {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        span.paylocity-job-modal__share-label {
            font-family: 'bebas-neue';
        }

        .paylocity-share {
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 999px;
            padding: 0.5rem 1.2rem;
            background: transparent;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            font: inherit;
            font-size: 12px;
            font-family: 'bebas-neue';
            letter-spacing: 1px;
            transition: 0.2s ease;
            &:hover {
                background: #91633E !important;
                color: #fff !important;
            }
        }

        .paylocity-job-modal__apply {
            display: inline-block;
            padding: 0.5rem 3rem;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 40px;
            text-decoration: none;
        }
    }

   
 
}

.paylocity-job-modal.is-active {
  display: block;
}

.paylocity-job-modal__dialog {
    max-width: 900px;
    margin: auto;
    top: 0;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    height: 80vh;
}


body.paylocity-jobs-lock {
  overflow: hidden;
}



/* === New design (matches provided mock) === */
.paylocity-job-card {
    background: #E7E7E5;
    padding: 3rem;
}

.paylocity-job-card__title {
  font-family: "kepler-std-display", serif;
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 8px;
}

.paylocity-job-card__location {
  font-family: "bebas-neue", sans-serif;
  font-size: 22.4px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.paylocity-job-card__desc {
  font-family: "kepler-std", serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 18px;
  max-width: 60ch;
  strong { font-weight: 500; display: block;}
}

.paylocity-job-card__meta {
  margin-bottom: 14px;
}

.paylocity-job-card__posted {
  font-family: "kepler-std", serif;
  font-size: 14px;
  opacity: .75;
}

.paylocity-job-card__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.paylocity-btn , a.paylocity-job-modal__apply{
  font-family: "bebas-neue", sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.5rem 1.5rem;
  border: 1px solid rgba(0,0,0,0.18);
  background: #91633E ; /* matches the warm brown button style */
  color: #fff !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease;
  &:hover {
    background: transparent !important;
     color: #111 !important;
  }
}

.paylocity-btn--learn {
    background: transparent !important;
    color: #111 !important;
    transition: 0.2s ease;

    &:hover {
        background: #91633E !important;
        color: #fff !important;
    }

}

.paylocity-btn[disabled],
.paylocity-carousel__btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

/* === Carousel === */


.paylocity-carousel__spacer { flex: 1; }

.paylocity-carousel__nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 2rem;
}

.paylocity-carousel__btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* hide nav when not needed */
.paylocity-carousel__nav[aria-hidden="true"] { display: none; }

.paylocity-carousel__viewport {
  overflow: hidden;
}

.paylocity-carousel__track {
  display: flex;
  transition: transform 260ms ease;
  will-change: transform;
}

.paylocity-carousel__page {
  min-width: 100%;
}

.paylocity-carousel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 820px) {
  .paylocity-carousel__grid { grid-template-columns: 1fr; }
}

/* === Empty state === */
.paylocity-jobs-empty {
    padding: 140px 2rem;
    background: #f0f0f0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paylocity-jobs-empty__title {
  font-family: "kepler-std-display", serif;
  font-size: 38px;
  font-weight: 500;
  margin: 0 0 10px;
}

.paylocity-jobs-empty__body {
  font-family: "kepler-std", serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  max-width: 70ch;
}

@media screen and (max-width: 1100px) {

  .paylocity-job-modal__dialog {
      max-width: 100%;
      height: 100vh;
      .paylocity-job-modal__content {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .paylocity-job-modal__body {
            height: 100%;
          }
          .paylocity-job-modal__apply {
            width: 100%;
            text-align: center;
          }
      }
      button.paylocity-btn {
          width: 100%;
      }
  }

}

@media screen and (max-width: 580px) {


  .paylocity-job-modal {
    & .paylocity-job-modal__content {
        padding: 1.5rem 1rem;
        .paylocity-job-modal__header {
            padding: 0rem 1rem 1rem;
             h2 {
                font-size: 26px;
            }
        }
        .paylocity-job-modal__body {
            padding: 1rem;
        }
        .paylocity-job-modal__footer {
            padding: 1rem 1rem 0;
        }
 
        .paylocity-job-modal__share {
            gap: 6px;
            .paylocity-share{
                padding: 0.5rem 1rem;
            }
        }


    }
  }


}