/* Veclera Careers — Front-end Styles */
:root {
  --vc-obs:     #0B0F0E;
  --vc-dark:    #151A19;
  --vc-teal:    #0E7C7B;
  --vc-tealdk:  #0A5E5D;
  --vc-gold:    #C9A96E;
  --vc-cream:   #F5F0E8;
  --vc-white:   #FDFCFB;
  --vc-muted:   #8A9090;
  --vc-montserrat: 'Cormorant Garamond', Georgia, serif;
  --vc-sans:    'Outfit', sans-serif;
  --vc-radius:  14px;
  --vc-trans:   all .25s ease;
}

/* ── CAREERS PAGE ── */
.vc-careers { font-family: var(--vc-sans); }

/* Hero */
.vc-careers-hero {
  background: var(--vc-obs);
  padding: 80px 40px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.vc-careers-hero::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,124,123,.16), transparent 70%);
  pointer-events: none;
}
.vc-careers-hero__inner { max-width: 780px; position: relative; }
.vc-careers-hero__label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--vc-gold); margin-bottom: 20px;
}
.vc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vc-teal); flex-shrink: 0; }
.vc-careers-hero__heading {
  font-family: var(--vc-serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600; color: var(--vc-white); line-height: 1.1; margin: 0 0 20px;
}
.vc-careers-hero__heading em { color: var(--vc-gold); font-style: normal; }
.vc-careers-hero__sub {
  font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.8; max-width: 560px;
}

/* Why join */
.vc-why-join {
  background: var(--vc-cream);
  padding: 60px 40px;
}
.vc-why-join__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px;
  max-width: 1100px; margin: 0 auto;
}
.vc-why-card {
  background: var(--vc-white); border-radius: var(--vc-radius);
  padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.vc-why-card__icon { font-size: 28px; display: block; margin-bottom: 12px; }
.vc-why-card__title { font-family: var(--vc-serif); font-size: 18px; font-weight: 600; color: var(--vc-obs); margin-bottom: 6px; }
.vc-why-card__desc {font-size: 13px;color: #040404;line-height: 1.7;}

/* Jobs section */
.vc-jobs-section {
  background: var(--vc-dark);
  padding: 60px 40px;
}
.vc-jobs-section__header { max-width: 1100px; margin: 0 auto 32px; }
.vc-jobs-section__title {
  font-family: var(--vc-serif); font-size: 36px; font-weight: 600; color: var(--vc-white); margin: 0 0 20px;
}

/* Dept tabs */
.vc-dept-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-dept-tab {
  padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.15); background: transparent;
  color: rgba(255,255,255,.55); font-size: 12px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
  transition: var(--vc-trans); font-family: var(--vc-sans);
}
.vc-dept-tab:hover, .vc-dept-tab.active {
  background: var(--vc-teal); border-color: var(--vc-teal); color: #fff;
}

/* Jobs grid */
.vc-jobs-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 16px;
}

/* Job card */
.vc-job-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 28px; transition: var(--vc-trans);
}
.vc-job-card:hover { border-color: rgba(14,124,123,.5); background: rgba(14,124,123,.06); transform: translateY(-3px); }
.vc-job-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.vc-job-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.vc-badge--urgent  { background: rgba(192,57,43,.2); color: #e74c3c; }
.vc-badge--type    { background: rgba(14,124,123,.2); color: var(--vc-teal); }
.vc-badge--level   { background: rgba(201,169,110,.15); color: var(--vc-gold); }
.vc-vacancies { font-size: 11px; color: var(--vc-muted); }
.vc-job-card__title { font-family: var(--vc-serif); font-size: 24px; font-weight: 600; color: var(--vc-white); margin: 0 0 6px; }
.vc-job-card__dept { font-size: 12px; color: var(--vc-teal); font-weight: 600; letter-spacing: .5px; margin-bottom: 14px; }
.vc-job-card__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vc-job-meta-item { font-size: 12px; color: rgba(255,255,255,.5); }
.vc-job-card__desc { font-size: 13px; color: var(--vc-muted); line-height: 1.7; margin-bottom: 16px; }

/* Expandable details */
.vc-job-card__details { border-top: 1px solid rgba(255,255,255,.07); padding-top: 16px; margin-top: 8px; animation: vcFadeIn .3s ease; }
@keyframes vcFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.vc-job-section { margin-bottom: 16px; }
.vc-job-section h4 { font-family: var(--vc-sans); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--vc-gold); margin-bottom: 10px; }
.vc-job-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vc-job-list li { font-size: 13px; color: rgba(255,255,255,.7); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.vc-job-list li::before { content: '✓'; color: var(--vc-teal); flex-shrink: 0; }
.vc-job-list--benefits li::before { content: '★'; color: var(--vc-gold); }
.vc-job-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.8; }

/* Card actions */
.vc-job-card__actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 16px; }
.vc-toggle-btn {
  background: none; border: 1.5px solid rgba(255,255,255,.15); border-radius: 999px;
  color: rgba(255,255,255,.6); font-size: 12px; font-weight: 600; padding: 8px 16px;
  cursor: pointer; transition: var(--vc-trans); font-family: var(--vc-sans); letter-spacing: .5px;
}
.vc-toggle-btn:hover { border-color: var(--vc-teal); color: var(--vc-teal); }
.vc-apply-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vc-gold); color: var(--vc-obs);
  font-family: var(--vc-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 10px 22px; border-radius: 999px;
  text-decoration: none; transition: var(--vc-trans); border: none; cursor: pointer;
}
.vc-apply-btn:hover { background: var(--vc-white); transform: translateY(-2px); }
.vc-apply-btn--outline { background: transparent; color: var(--vc-gold); border: 1.5px solid var(--vc-gold); }
.vc-apply-btn--outline:hover { background: var(--vc-gold); color: var(--vc-obs); }

/* No jobs */
.vc-no-jobs { max-width:1100px;margin:0 auto;text-align:center;padding:60px 20px; }
.vc-no-jobs__icon { font-size:48px;margin-bottom:16px; }
.vc-no-jobs h3 { font-family:var(--vc-serif);font-size:28px;color:var(--vc-white);margin-bottom:12px; }
.vc-no-jobs p { font-size:14px;color:var(--vc-muted);line-height:1.8; }
.vc-no-jobs a { color:var(--vc-teal); }

/* General CTA */
.vc-general-cta { background:linear-gradient(135deg,var(--vc-teal),var(--vc-tealdk)); padding:60px 40px; text-align:center; }
.vc-general-cta__inner { max-width:640px;margin:0 auto; }
.vc-general-cta h2 { font-family:var(--vc-serif);font-size:36px;font-weight:600;color:#fff;margin:0 0 14px; }
.vc-general-cta p { font-size:15px;color:rgba(255,255,255,.7);line-height:1.8;margin:0 0 28px; }

/* ── APPLICATION FORM ── */
.vc-apply-wrap { max-width: 760px; font-family: var(--vc-sans); }

.vc-apply-success {
  text-align:center; padding:60px 32px;
  background:linear-gradient(135deg,rgba(14,124,123,.2),rgba(201,169,110,.1));
  border:1px solid rgba(14,124,123,.3); border-radius:20px;
}
.vc-apply-success__icon { font-size:52px;margin-bottom:16px; }
.vc-apply-success h2 { font-family:var(--vc-serif);font-size:32px;color:var(--vc-white);margin:0 0 12px; }
.vc-apply-success p { font-size:14px;color:var(--vc-muted);line-height:1.8; }

.vc-form-job-banner {
  display:flex;align-items:center;gap:12px;
  background:rgba(14,124,123,.12);border:1px solid rgba(14,124,123,.25);
  border-radius:12px;padding:14px 18px;margin-bottom:28px;
}
.vc-form-job-banner__label { font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--vc-teal);white-space:nowrap; }
.vc-form-job-banner__title { font-family:var(--vc-serif);font-size:18px;font-weight:600;color:var(--vc-white); }

.vc-form-section { margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.07); }
.vc-form-section:last-of-type { border-bottom:none; }
.vc-form-section__title {
  display:flex;align-items:center;gap:12px;
  font-family:var(--vc-sans);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--vc-gold);margin:0 0 20px;
}
.vc-form-section__num {
  width:28px;height:28px;border-radius:50%;background:var(--vc-gold);
  color:var(--vc-obs);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.vc-form-section__opt { color:var(--vc-muted);font-weight:400;letter-spacing:0;text-transform:none;font-size:11px; }

.vc-form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.vc-fg { margin-bottom:16px; }
.vc-label { display:block;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--vc-muted);margin-bottom:8px; }
.vc-label-note { font-size:10px;color:rgba(255,255,255,.3);font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px; }
.vc-input {
  width:100%;padding:13px 16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;color:var(--vc-white);font-family:var(--vc-sans);font-size:14px;
  outline:none;transition:border .2s;
}
.vc-input:focus { border-color:var(--vc-teal);background:rgba(14,124,123,.08); }
.vc-input::placeholder { color:rgba(255,255,255,.25); }
.vc-input option { background:var(--vc-obs); }
.vc-textarea { resize:vertical;min-height:160px; }
.vc-char-count { font-size:11px;color:rgba(255,255,255,.3);text-align:right;margin-top:5px; }

/* CV Upload */
.vc-upload-area {
  border:2px dashed rgba(255,255,255,.15);border-radius:12px;
  transition:var(--vc-trans);position:relative;cursor:pointer;
}
.vc-upload-area:hover,.vc-upload-area.drag-over { border-color:var(--vc-teal);background:rgba(14,124,123,.06); }
.vc-upload-input {
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;
}
.vc-upload-ui { padding:36px;text-align:center; }
.vc-upload-icon { font-size:36px;display:block;margin-bottom:10px; }
.vc-upload-label { font-size:14px;font-weight:600;color:var(--vc-white);margin:0 0 4px; }
.vc-upload-sub { font-size:12px;color:var(--vc-muted);margin:0; }
.vc-upload-preview {
  display:flex;align-items:center;gap:12px;padding:18px;
  background:rgba(14,124,123,.1);border-radius:10px;
}
.vc-upload-preview__icon { font-size:22px; }
.vc-upload-preview__name { font-size:13px;font-weight:600;color:var(--vc-white);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vc-upload-preview__remove {
  background:none;border:none;color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;
  padding:0;transition:color .2s;flex-shrink:0;
}
.vc-upload-preview__remove:hover { color:var(--vc-white); }

/* Progress */
.vc-progress { margin-bottom:16px; }
.vc-progress__bar { height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-bottom:6px; }
.vc-progress__bar::after { content:'';display:block;height:100%;background:var(--vc-teal);width:0;transition:width .3s;border-radius:2px; }
.vc-progress__label { font-size:12px;color:var(--vc-muted); }

/* Submit */
.vc-form-submit-wrap { margin-top:8px; }
.vc-submit-btn {
  width:100%;padding:16px;background:var(--vc-gold);color:var(--vc-obs);
  border:none;border-radius:999px;font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
  transition:var(--vc-trans);font-family:var(--vc-sans);display:flex;
  align-items:center;justify-content:center;gap:10px;
}
.vc-submit-btn:hover { background:var(--vc-white);transform:translateY(-2px); }
.vc-submit-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }
.vc-submit-btn__spinner {
  width:16px;height:16px;border:2px solid rgba(0,0,0,.3);border-top-color:var(--vc-obs);
  border-radius:50%;animation:vcSpin .7s linear infinite;flex-shrink:0;
}
@keyframes vcSpin { to{transform:rotate(360deg)} }
.vc-form-note { font-size:12px;color:var(--vc-muted);text-align:center;margin-top:10px; }
.vc-form-err {
  background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);
  border-radius:8px;padding:12px 16px;font-size:13px;color:#e74c3c;margin-bottom:16px;
}

/* Responsive */
@media(max-width:900px) {
  .vc-careers-hero { padding:60px 24px; }
  .vc-why-join,.vc-jobs-section,.vc-general-cta { padding:48px 24px; }
  .vc-jobs-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .vc-form-row { grid-template-columns:1fr; }
  .vc-why-join__grid { grid-template-columns:1fr; }
  .vc-job-card__actions { flex-direction:column;align-items:stretch; }
  .vc-apply-btn,.vc-toggle-btn { text-align:center;justify-content:center; }
}