/* ============================================================
   GREEN LABEL SERVICES — JOB APPLICATION PAGES
   careers_apply.css  (scoped to .page-apply, .page-apply-done)
   ============================================================ */


/* ─── HERO ─────────────────────────────────────────────────── */
.apply-hero {
  position:    relative;
  min-height:  320px;
  display:     flex;
  align-items: center;
  overflow:    hidden;
}

.apply-hero__bg {
  position:            absolute;
  inset:               0;
  background-image:    url('https://res.cloudinary.com/dbedibtcu/image/upload/v1773415764/IMG-20250611-WA0024_uswe7o.jpg');
  background-size:     cover;
  background-position: center 40%;
  transform:           scale(1.04);
  transition:          transform 8s ease-out;
}

.page-apply .apply-hero__bg {
  transform: scale(1);
}

.apply-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(7, 20, 7, 0.93) 0%,
    rgba(11, 22, 11, 0.87) 55%,
    rgba(23, 199, 20, 0.1) 100%
  );
}

.apply-hero__inner {
  position:       relative;
  z-index:        1;
  padding-top:    3.5rem;
  padding-bottom: 2rem;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.apply-hero__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-primary);
  margin-bottom:  0.375rem;
}

.apply-hero__title {
  font-size:     clamp(1.6rem, 4vw, 2.6rem);
  font-weight:   800;
  color:         var(--color-white);
  line-height:   1.2;
  margin-bottom: 0.75rem;
}

.apply-hero__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0.5rem;
}

.apply-hero__meta-item {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.85rem;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.7);
}

.apply-hero__meta-item i {
  color:     var(--color-primary);
  font-size: 0.75rem;
}

.apply-hero__meta-sep {
  color:    rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
}


/* ─── BODY WRAPPER ──────────────────────────────────────────── */
.apply-body {
  background: #f8faf8;
  padding:    3rem 0 5rem;
}


/* ─── TWO-COLUMN LAYOUT ─────────────────────────────────────── */
.apply-layout {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   2.5rem;
  align-items:           start;
}


/* ─── FORM SECTIONS ─────────────────────────────────────────── */
.apply-form {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

/* Non-field errors banner */
.apply-form__errors {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  padding:       1rem 1.25rem;
  background:    rgba(220, 38, 38, 0.06);
  border:        1px solid rgba(220, 38, 38, 0.25);
  border-left:   4px solid #dc2626;
  border-radius: var(--radius-md);
  color:         #b91c1c;
  font-size:     0.875rem;
  font-weight:   500;
}

.apply-form__errors i {
  flex-shrink: 0;
  margin-top:  0.15rem;
  font-size:   1rem;
}

.apply-form__errors ul {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.25rem;
}

.apply-form__section {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-xs);
  overflow:      hidden;
}

.apply-form__section-header {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  padding:     1.125rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background:  #fafcfa;
}

.apply-form__section-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      var(--color-primary-light);
  border-radius:   var(--radius-sm);
  color:           var(--color-primary-dark, #0d7a0b);
  font-size:       0.875rem;
  flex-shrink:     0;
}

.apply-form__section-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--color-text);
  margin:      0;
}

/* Field grid inside section */
.apply-form__section .form-row,
.apply-form__section .form-field {
  padding: 0 1.5rem;
}

.apply-form__section .form-row:first-of-type,
.apply-form__section .form-field:first-of-type {
  padding-top: 1.5rem;
}

.apply-form__section .form-row:last-of-type,
.apply-form__section .form-field:last-of-type {
  padding-bottom: 1.5rem;
}


/* ─── FIELD ROWS ─────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     1.25rem;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
  margin-bottom:  1.25rem;
}

.form-field:last-child {
  margin-bottom: 0;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field__label {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--color-text);
  line-height: 1.4;
}

.form-field__required {
  color:       var(--color-accent);
  margin-left: 0.125rem;
}

.form-field__optional {
  font-size:   0.75rem;
  font-weight: 400;
  color:       var(--color-text-muted);
  margin-left: 0.25rem;
}

.form-field__hint {
  font-size:     0.775rem;
  color:         var(--color-text-muted);
  line-height:   1.5;
  margin-bottom: 0.125rem;
}

/* Django-rendered inputs */
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form input[type="url"],
.apply-form textarea {
  width:         100%;
  padding:       0.65rem 0.875rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.9rem;
  font-weight:   400;
  color:         var(--color-text);
  background:    var(--color-white);
  transition:    border-color 0.2s ease, box-shadow 0.2s ease;
  outline:       none;
  appearance:    none;
}

.apply-form input[type="text"]:focus,
.apply-form input[type="email"]:focus,
.apply-form input[type="tel"]:focus,
.apply-form input[type="url"]:focus,
.apply-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(23, 199, 20, 0.12);
}

.form-field--error input[type="text"],
.form-field--error input[type="email"],
.form-field--error input[type="tel"],
.form-field--error input[type="url"],
.form-field--error textarea {
  border-color: #dc2626;
}

.form-field--error input[type="text"]:focus,
.form-field--error input[type="email"]:focus,
.form-field--error input[type="tel"]:focus,
.form-field--error input[type="url"]:focus,
.form-field--error textarea:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.apply-form textarea {
  resize:     vertical;
  min-height: 140px;
}

.form-field__error {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.775rem;
  font-weight: 600;
  color:       #dc2626;
  line-height: 1.4;
}

.form-field__error i {
  font-size:   0.75rem;
  flex-shrink: 0;
}


/* ─── FILE UPLOAD ────────────────────────────────────────────── */
.form-field--file {
  position: relative;
}

.file-upload-wrapper {
  position: relative;
}

.apply-form input[type="file"] {
  width:         100%;
  padding:       0.75rem 0.875rem;
  border:        1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.875rem;
  color:         var(--color-text-muted);
  background:    #fafcfa;
  cursor:        pointer;
  transition:    border-color 0.2s ease, background 0.2s ease;
}

.apply-form input[type="file"]:hover {
  border-color: var(--color-primary);
  background:   var(--color-primary-light);
}

.apply-form input[type="file"]:focus {
  outline:      2px solid var(--color-primary);
  outline-offset: 2px;
}

.file-upload__label {
  display: none; /* shown only as progressive enhancement if needed */
}

.form-field--error input[type="file"] {
  border-color: #dc2626;
}


/* ─── FORM ACTIONS ───────────────────────────────────────────── */
.apply-form__actions {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  flex-wrap:   wrap;
}

.apply-form__submit {
  min-width: 200px;
}

.apply-form__cancel {
  display:     inline-flex;
  align-items: center;
  gap:         0.375rem;
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--color-text-muted);
  transition:  color 0.2s ease;
  text-decoration: none;
}

.apply-form__cancel:hover {
  color: var(--color-text);
}


/* ─── SIDEBAR ────────────────────────────────────────────────── */
.apply-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  position:       sticky;
  top:            calc(var(--nav-height) + 1.5rem);
}

.apply-sidebar__card {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-xs);
  padding:       1.375rem;
}

.apply-sidebar__card-title {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  font-size:     0.9rem;
  font-weight:   700;
  color:         var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.apply-sidebar__card-title i {
  color:     var(--color-primary);
  font-size: 0.875rem;
}

/* Meta list */
.apply-sidebar__meta {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.875rem;
}

.apply-sidebar__meta-row {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
}

.apply-sidebar__meta-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  background:      var(--color-primary-light);
  border-radius:   var(--radius-sm);
  color:           var(--color-primary-dark, #0d7a0b);
  font-size:       0.75rem;
  flex-shrink:     0;
  margin-top:      0.1rem;
}

.apply-sidebar__meta-label {
  display:      block;
  font-size:    0.7rem;
  font-weight:  600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:        var(--color-text-muted);
  margin-bottom: 0.125rem;
}

.apply-sidebar__meta-value {
  display:     block;
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--color-text);
}

/* Tips card variant */
.apply-sidebar__card--tips {
  background: linear-gradient(135deg, var(--color-dark-2) 0%, var(--color-dark-3) 100%);
  border:     1px solid rgba(255, 255, 255, 0.06);
}

.apply-sidebar__card--tips .apply-sidebar__card-title {
  color:        rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.apply-sidebar__card--tips .apply-sidebar__card-title i {
  color: var(--color-accent);
}

.apply-sidebar__tips {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.75rem;
}

.apply-sidebar__tips li {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  font-size:   0.825rem;
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

.apply-sidebar__tips li i {
  color:      var(--color-primary);
  font-size:  0.75rem;
  flex-shrink: 0;
  margin-top: 0.225rem;
}


/* ─── APPLY DONE PAGE ────────────────────────────────────────── */
.apply-done-wrap {
  background:  #f8faf8;
  min-height:  calc(100vh - var(--nav-height));
  display:     flex;
  align-items: center;
  padding:     4rem 0 6rem;
}

.apply-done-inner {
  display:         flex;
  justify-content: center;
}

.apply-done-card {
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-md);
  padding:       3rem 2.5rem;
  max-width:     680px;
  width:         100%;
  text-align:    center;
}

.apply-done-card__icon {
  font-size:     4rem;
  color:         var(--color-primary);
  margin-bottom: 1.25rem;
  line-height:   1;
}

.apply-done-card__heading {
  font-size:     clamp(1.6rem, 4vw, 2.25rem);
  font-weight:   800;
  color:         var(--color-text);
  margin-bottom: 1rem;
}

.apply-done-card__message {
  font-size:     1rem;
  color:         var(--color-text-muted);
  line-height:   1.7;
  max-width:     52ch;
  margin:        0 auto 2rem;
}

.apply-done-card__message strong {
  color:       var(--color-text);
  font-weight: 700;
}

/* Steps */
.apply-done-card__steps {
  background:    #f8faf8;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       1.5rem;
  text-align:    left;
  margin-bottom: 2rem;
}

.apply-done-card__steps-title {
  font-size:     0.8rem;
  font-weight:   700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:         var(--color-text-muted);
  margin-bottom: 1rem;
}

.apply-done-card__step-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
  counter-reset: step-counter;
}

.apply-done-card__step {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

.apply-done-card__step-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      var(--color-primary-light);
  border-radius:   var(--radius-sm);
  color:           var(--color-primary-dark, #0d7a0b);
  font-size:       0.875rem;
  flex-shrink:     0;
}

.apply-done-card__step strong {
  display:     block;
  font-size:   0.9rem;
  font-weight: 700;
  color:       var(--color-text);
  margin-bottom: 0.2rem;
}

.apply-done-card__step p {
  font-size:  0.825rem;
  color:      var(--color-text-muted);
  line-height: 1.5;
  margin:     0;
}

/* Actions */
.apply-done-card__actions {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
}

/* Outline green button (used on done page) */
.btn-outline-green {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.75rem 1.75rem;
  background:     transparent;
  color:          var(--color-primary-dark, #0d7a0b);
  border:         2px solid var(--color-primary);
  border-radius:  var(--radius-sm);
  font-family:    var(--font);
  font-size:      0.9rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height:     44px;
  transition:     background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space:    nowrap;
  text-decoration: none;
}

.btn-outline-green:hover,
.btn-outline-green:focus-visible {
  background: var(--color-primary-light);
  transform:  translateY(-2px);
}


/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .apply-layout {
    grid-template-columns: 1fr 300px;
    gap:                   2rem;
  }

  .apply-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .apply-hero {
    min-height: 280px;
  }

  .apply-hero__inner {
    padding-top: 2.5rem;
  }

  .apply-layout {
    grid-template-columns: 1fr;
  }

  .apply-sidebar {
    order: -1;  /* show job summary above form on mobile */
  }

  .apply-body {
    padding: 2rem 0 3.5rem;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .apply-form__section .form-row,
  .apply-form__section .form-field {
    padding-left:  1rem;
    padding-right: 1rem;
  }

  .apply-form__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .apply-form__submit {
    min-width: unset;
    text-align: center;
    justify-content: center;
  }

  .apply-form__cancel {
    justify-content: center;
  }

  .apply-done-card {
    padding: 2rem 1.25rem;
  }

  .apply-done-card__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .apply-done-card__actions .btn,
  .apply-done-card__actions .btn-outline-green {
    justify-content: center;
  }
}