/* ============================================================
   style.css — Upal v2
   ============================================================ */

/* ── Animations ─────────────────────────────────────────────── */
.fade-up   { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-left { opacity:0; transform:translateX(-24px); transition:opacity .6s ease,transform .6s ease; }
.fade-right{ opacity:0; transform:translateX(24px);  transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible,.fade-left.visible,.fade-right.visible { opacity:1; transform:none; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-btn-primary {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.65rem 1.5rem;border-radius:.75rem;font-weight:700;font-size:.9rem;
  color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#117c8b,#264b77);
  box-shadow:0 4px 15px rgba(17,124,139,.35);
  transition:opacity .2s,box-shadow .2s;
}
.hero-btn-primary:hover { opacity:.9; box-shadow:0 6px 20px rgba(17,124,139,.45); }
.hero-btn-primary::after {
  content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:rgba(255,255,255,.2);transform:skewX(-20deg);
  animation:shimmer 3s infinite;
}
@keyframes shimmer { 0%{left:-60%}100%{left:120%} }

.hero-btn-secondary {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.65rem 1.5rem;border-radius:.75rem;font-weight:700;font-size:.9rem;
  color:#23648f;background:rgba(255,255,255,.85);
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  border:1px solid rgba(226,232,240,.8);
  backdrop-filter:blur(8px);
  transition:all .2s;
}
.hero-btn-secondary:hover { background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12); }

.trust-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(226,232,240,.8);
  font-size:.75rem;font-weight:600;color:#475569;
}

/* ── Form inputs ─────────────────────────────────────────────── */
.form-input {
  display:block;width:100%;border-radius:.5rem;border:1px solid #cbd5e1;
  padding:.5rem .75rem;font-size:.875rem;color:#0f172a;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s,box-shadow .15s;
  outline:none;
}
.form-input:focus {
  border-color:#23648f;
  box-shadow:0 0 0 3px rgba(35,100,143,.15);
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-success {
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.875rem 1rem;border-radius:.75rem;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:.875rem;
}
.alert-error {
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.875rem 1rem;border-radius:.75rem;
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:.875rem;
}

/* ── Upload zone ─────────────────────────────────────────────── */
.upload-zone {
  display:block;border:2px dashed #cbd5e1;border-radius:1rem;
  padding:2.5rem 1rem;cursor:pointer;text-align:center;
  transition:all .2s;
}
.upload-zone:hover { border-color:#23648f; background:#f8fafc; }
.upload-zone.drag-over { border-color:#117c8b; background:#e6eff5; }

/* ── Step cards ──────────────────────────────────────────────── */
.step-card {
  display:flex;align-items:center;gap:1.25rem;
  padding:1.25rem;background:#fff;border-radius:1rem;
  border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:all .3s;
}
.step-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.step-icon {
  flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:.875rem;
  display:flex;align-items:center;justify-content:center;
  background:#f1f5f9;color:#23648f;transition:all .3s;
}
.step-card:hover .step-icon { background:#23648f;color:#fff; }

/* ── Job category cards ──────────────────────────────────────── */
.cat-card {
  display:flex;align-items:center;gap:1.25rem;
  padding:1.25rem;background:#fff;border-radius:1rem;
  border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;transition:all .3s;
}
.cat-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.cat-icon {
  flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:.875rem;
  display:flex;align-items:center;justify-content:center;
  background:#e8f3f3;color:#1a7383;transition:all .3s;
}
.cat-card:hover .cat-icon { background:#1a7383;color:#fff; }

/* ── Job table ───────────────────────────────────────────────── */
.job-table { width:100%;border-collapse:collapse; }
.job-table th {
  padding:.6rem 1rem;text-align:left;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:#64748b;
  background:#f8fafc;border-bottom:1px solid #e2e8f0;
}
.job-table td {
  padding:.75rem 1rem;font-size:.875rem;color:#334155;
  border-bottom:1px solid #f1f5f9;vertical-align:middle;
}
.job-table tr:hover td { background:#f8fafc; }
.job-tag {
  display:inline-block;padding:.2rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:600;background:#e8f3f3;color:#1a7383;margin:.1rem;
}

/* ── Captcha ─────────────────────────────────────────────────── */
.captcha-img { cursor:pointer;border-radius:.5rem;border:1px solid #e2e8f0; }
.captcha-img:hover { border-color:#23648f; }

/* ── Prose (legal pages) ─────────────────────────────────────── */
.prose-legal h2 { font-size:1.1rem;font-weight:700;color:#0f172a;margin:1.5rem 0 .5rem; }
.prose-legal p  { color:#475569;line-height:1.75;margin-bottom:.75rem; }
.prose-legal ul { list-style:disc;padding-left:1.25rem;color:#475569;line-height:1.75; }
.prose-legal ol { list-style:decimal;padding-left:1.25rem;color:#475569;line-height:1.75; }
.prose-legal li { margin-bottom:.25rem; }

/* ── Dashboard job grid ──────────────────────────────────────── */
.job-card-v2 {
  background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;
  transition:all .2s;
}
.job-card-v2:hover { border-color:#23648f; box-shadow:0 4px 16px rgba(35,100,143,.12); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:640px) {
  .job-table thead { display:none; }
  .job-table tr { display:block;border:1px solid #e2e8f0;border-radius:.75rem;margin-bottom:.75rem;padding:.5rem; }
  .job-table td { display:flex;justify-content:space-between;border:none;padding:.3rem .5rem; }
  .job-table td::before { content:attr(data-label);font-weight:600;color:#64748b;font-size:.75rem; }
}