/* Single job info */

#pzd-job-single {
 padding: 0;
}

#pzd-job-single .e-con-inner {
 padding: 0;
 max-width: 100%;
}

.single-job-content {
 max-width: 1140px;
 margin: 0 auto;
}

.single-job-top {
 display: flex;
 align-items: center;
 flex-direction: column;
 row-gap: 30px;
 padding: 80px 0;
 color: white;
 background-color: #000;
}

.single-job-top__title {
 text-align: center;
 font-weight: 400;
 font-size: 43px;
 margin: 0;
}

.single-job-meta {
 display: flex;
 flex-wrap: wrap;
 column-gap: 30px;
 row-gap: 15px;
 align-items: center;
 margin-top: 30px;
}

.single-job-category {
 border-radius: 30px;
 font-size: 18px;
 padding: 2px 15px 3px 15px;
 border: 1px solid #aaa;
}

.single-job-meta__item {
 display: flex;
 column-gap: 10px;
 font-size: 18px;
 align-items: center;
}

.single-job-description {
 margin-top: 20px;
 font-size: 18px;
}

.single-job-description p {
 margin-bottom: 0;
}

.single-job-top__actions {
 display: flex;
 align-items: center;
 column-gap: 10px;
}

.single-job-top__link {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 border: none !important;
 padding: 10px 30px 12px 30px !important;
 border-radius: 50px !important;
 transition: background-color 0.3s ease-in-out;
}

.single-job-top__link-apply {
 color: #f4f3ea !important;
 background-color: #303030 !important;
}

.single-job-top__link-apply:hover {
 background-color: #f34f2d !important;
}

/* Apply Success Modal */

.apply-modal {
 position: fixed;
 inset: 0;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 9999;
}

.apply-modal__content {
 display: flex;
 flex-direction: column;
}

.apply-modal.is-open {
 display: flex;
}

.apply-modal__overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
}

.apply-modal__dialog {
 position: relative;
 width: min(520px, 92vw);
 background: #fff;
 border-radius: 12px;
 padding: 24px 24px 28px 24px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.apply-modal__close {
 position: absolute;
 top: 10px;
 right: 12px;
 font-size: 24px !important;
 line-height: 1;
 cursor: pointer;
 padding: 0 !important;
 color: #333 !important;
 background: transparent;
 border: none !important;
}

.apply-modal__close:hover {
 background: transparent !important;
}

.apply-modal__title {
 margin: 0 0 10px 0;
 font-weight: 700;
 font-size: 22px;
 text-align: center;
}

.apply-modal__text {
 margin: 0 0 20px 0;
 font-size: 16px;
 text-align: center;
}

.apply-modal__button {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 18px;
 border: none !important;
 padding: 10px 35px !important;
 border-radius: 50px !important;
 color: #f4f3ea !important;
 background-color: #303030 !important;
 margin: 0 auto;
}

.apply-modal__button:hover {
 background-color: #f34f2d !important;
}

.single-job-top__link-more {
 color: #333 !important;
 background-color: #f4f3ea !important;
}

.single-job-top__link-more:hover {
 color: #333 !important;
 background-color: #e8e7df !important;
}

/* Apply form */

.apply-job {
 max-width: 800px;
 margin: 0 auto;
 padding: 90px 0 110px 0;
}

.apply-job-form-title {
 font-weight: 700;
 font-size: 20px;
 text-align: center;
}

.apply-job-form__group {
 display: flex;
 flex-direction: column;
 row-gap: 10px;
}

.apply-job-form__group-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.apply-job-form__counter {
 align-self: flex-end;
 font-size: 12px;
 color: #666;
 margin-top: -4px;
}

.apply-job-form__group input,
.apply-job-form__group textarea {
 border-radius: 8px !important;
 background-color: #f4f3ea;
 transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
 border: 1px solid #aaa !important;
}

.apply-job-form__group textarea {
 resize: none;
 min-height: 140px;
 max-height: 320px;
 overflow-y: auto;
}

/* Validation states */

.apply-job-form__group .is-invalid {
 border-color: #d93025 !important; /* google red */
 box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

.apply-job-form__error {
 margin-top: -4px;
 color: #d93025;
 font-size: 13px;
}

.apply-job-form__group input:focus,
.apply-job-form__group textarea:focus {
 outline: none;
 border-color: #000 !important;
 box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.apply-job-form__group input:hover,
.apply-job-form__group textarea:hover {
 border-color: #e8e7df !important;
}

.apply-job-form__inner {
 display: flex;
 flex-direction: column;
 row-gap: 20px;
}

.apply-job-form__submit {
 font-family: "Open Sans", sans-serif !important;
 font-size: 20px;
 height: 49px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px !important;
 border: none !important;
 width: 100% !important;
 border-radius: 50px !important;
 color: #f4f3ea !important;
 padding: 10px 25px 12px 25px !important;
 background-color: #303030 !important;
}

.apply-job-form__submit[disabled],
.apply-job-form__submit.is-loading {
 pointer-events: none;
 background-color: #4a4a4a !important;
}

.single-job-top__link-apply:hover {
 background-color: #f34f2d !important;
}

@media (max-width: 768px) {
 .apply-job {
  padding: 60px 15px 60px 15px;
 }

 .single-job-content {
  padding: 0 15px;
 }

 .single-job-meta__item,
 .single-job-category,
 .single-job-description,
 .single-job-top__link {
  font-size: 16px;
 }

 .single-job-top {
  padding: 30px 0;
 }

 .apply-job-form__submit {
  font-size: 18px !important;
 }
}

@media (max-width: 480px) {
 .apply-job {
  padding: 60px 12px 60px 12px;
 }

 .single-job-top__title {
  font-size: 33px;
 }
}

/* Upload files blocks */
.file-label {
 text-align: center;
 min-width: 150px;
 background: #f7f7f7;
 border: 1px dashed #aaa;
 padding: 10px 16px;
 border-radius: 6px;
 cursor: pointer;
 font-size: 14px;
 color: #333;
 transition:
         background 0.2s,
         border 0.2s;
}
.file-label:hover {
 background: #f0f0f0;
 border-color: #0073aa;
}

.file-upload-description {
 font-size: 14px;
 color: #aaa;
 margin: 0;
}

.file-status {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 8px;
 padding: 6px 12px;
 background: #f4f4f4;
 border-radius: 4px;
 border: 1px dashed #ccc;
 font-size: 14px;
 color: #333;
}

.file-status:empty,
.file-status:not(.is-visible) {
 display: none;
}

.file-name {
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
 font-weight: 500;
}

.file-status .file-remove {
 right: 2px;
 color: rgb(255, 255, 255);
 background: rgba(0, 0, 0, 0.5);
 border-radius: 50%;
 width: 18px;
 height: 18px;
 cursor: pointer;
 font-size: 18px;
 font-weight: bold;
 padding: 0;
 border: none;
 line-height: 18px;
}

.file-status .file-remove:hover {
 border: none;
 border-radius: 50%;
 opacity: 0.8;
}