/* ==========================================================
   Design tokens
   ========================================================== */
:root{
  --ink:#17221C;
  --muted:#6B7368;
  --paper:#F6F4EF;
  --card:#FFFFFF;
  --border:#E2DED4;

  --primary:#0E6B57;
  --primary-dark:#0A4F41;
  --accent:#FF5A36;
  --accent-dark:#E14A28;
  --amber:#FFB100;
  --whatsapp:#25D366;
  --email:#3B5BDB;

  --radius-lg:18px;
  --radius-md:12px;

  --shadow-card:0 1px 2px rgba(23,34,28,0.04), 0 4px 14px rgba(23,34,28,0.06);

  --font-display:'Sora', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
body.modal-open{ overflow:hidden; }

/* Add this to the top of your CSS file */
[hidden] {
  display: none !important;
}

/* ==========================================================
   Header
   ========================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:760px;
  margin:0 auto;
  padding:16px 20px 14px;
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand-mark{ color:var(--accent); font-size:14px; }
.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.02em;
}
.brand-tagline{ margin:2px 0 0; color:var(--muted); font-size:13px; }

/* ==========================================================
   Filters
   ========================================================== */
.filters{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 20px;
}
.filters select,
.filters input{
  flex:1 1 150px;
  padding:10px 12px;
  min-height:42px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink);
}
.filters select:focus-visible,
.filters input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.filters button{
  flex:0 0 auto;
  padding:10px 20px;
  min-height:42px;
  border-radius:10px;
  border:none;
  background:var(--primary);
  color:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease;
}
.filters button:hover{ background:var(--primary-dark); }

/* ==========================================================
   Feed layout
   ========================================================== */
.feed{ max-width:760px; margin:0 auto; padding:6px 16px 60px; }
.job-list{ display:flex; flex-direction:column; gap:14px; }

/* ==========================================================
   Job card
   ========================================================== */
.job-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px 16px;
  box-shadow:var(--shadow-card);
  transition:box-shadow .15s ease, transform .15s ease;
}

.job-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.job-company{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.badge{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.badge-new{
  background:var(--amber);
  color:#3A2900;
  padding:3px 9px;
  border-radius:999px;
  transform:rotate(-3deg);
  display:inline-block;
}

.job-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:-0.01em;
}

/* Urgent / Walk-in tags */
.job-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.tag-urgent{ background:rgba(255,90,54,0.12); color:var(--accent-dark); }
.tag-walkin{ background:rgba(14,107,87,0.1); color:var(--primary-dark); }

.job-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  background:var(--paper);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  color:var(--ink);
}
.meta-chip-pay{
  color:var(--primary-dark);
  border-color:transparent;
  background:rgba(14,107,87,0.08);
  font-weight:600;
}

/* Compact side-by-side actions: Show Details + Apply Now */
.job-card-actions{ display:flex; gap:8px; }
.details-btn,
.apply-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.details-btn{
  flex:1;
  padding:11px 12px;
  min-height:42px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.details-btn:hover{ border-color:var(--primary); background:#fff; }
.details-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.apply-btn{
  flex:1;
  padding:11px 12px;
  min-height:42px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.apply-btn:hover{ background:var(--accent-dark); }
.apply-btn:active{ transform:scale(.98); }
.apply-btn:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }

/* Expanded details */
.job-more-details{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.detail-row{ display:flex; align-items:flex-start; gap:8px; font-size:14px; flex-wrap:wrap; }
.detail-row i{ color:var(--muted); width:16px; text-align:center; margin-top:3px; }
.detail-label{ font-weight:600; color:var(--muted); min-width:60px; }
.detail-value{ color:var(--ink); }
.job-description{ margin:0; font-size:14px; color:var(--ink); line-height:1.6; }
.job-website-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--primary-dark); word-break:break-all; }

/* ==========================================================
   Apply modal — bottom sheet on mobile, centered dialog on desktop
   ========================================================== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(23,34,28,0.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:100;
}

.modal{
  position:relative;
  width:100%;
  max-width:480px;
  background:var(--card);
  border-radius:20px 20px 0 0;
  padding:22px 20px 28px;
  box-shadow:0 -8px 30px rgba(0,0,0,0.2);
  animation:sheet-up .2s ease;
  display:flex;
  flex-direction:column;
  transition:height .2s ease, min-height .2s ease;
}

/* Step 1 — the modal becomes a near-full-height "interstitial" so the
   ad slot has real room, with Click to Apply pinned to the bottom. */
.modal.modal--intro-active{
  height:82vh;
  max-height:640px;
}
.modal.modal--intro-active #modalIntroStep{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
@keyframes sheet-up{
  from{ transform:translateY(16px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--paper);
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
}
.modal-close:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.modal-eyebrow{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.modal-title{ margin:4px 26px 2px 0; font-family:var(--font-display); font-size:19px; font-weight:700; }
.modal-company{ margin:0 0 18px; color:var(--muted); font-size:14px; }

/* Step 1 — intro / future ad slot. Flex:1 lets it fill whatever room
   is left inside the full-height modal, above the pinned CTA button. */
.modal-ad-slot{
  flex:1;
  min-height:160px;
  border:1.5px dashed var(--border);
  border-radius:var(--radius-md);
  text-align:center;
  color:var(--muted);
  font-size:13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
  background:var(--paper);
}
.modal-ad-slot i{ font-size:28px; opacity:.5; }

#modalContinueBtn{
  flex-shrink:0;
  max-width:280px;
  margin:0 auto;
}

/* Step 2 — contact actions */
.modal-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 16px;
  min-height:48px;
  border-radius:var(--radius-md);
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.modal-action-primary{ background:var(--primary); color:#fff; }
.modal-action-primary:hover{ background:var(--primary-dark); }
.modal-action-whatsapp{ background:var(--whatsapp); color:#fff; }
.modal-action-whatsapp:hover{ filter:brightness(0.93); }
.modal-action-call{ background:var(--primary); color:#fff; }
.modal-action-call:hover{ background:var(--primary-dark); }
.modal-action-email{ background:var(--email); color:#fff; }
.modal-action-email:hover{ filter:brightness(0.93); }
.modal-action-website{ background:var(--paper); color:var(--ink); border:1px solid var(--border); }
.modal-action-website:hover{ border-color:var(--primary); }
.modal-empty{ color:var(--muted); font-size:14px; text-align:center; margin:6px 0 2px; }

@media (min-width:600px){
  .modal-overlay{ align-items:center; padding:20px; }
  .modal{ border-radius:20px; }
}

/* ==========================================================
   Pagination
   ========================================================== */
#pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:28px 0 0;
  flex-wrap:wrap;
}
#pagination button{
  min-width:40px;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#pagination button:hover:not(:disabled){ border-color:var(--primary); }
#pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.active-page{
  background:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
}

/* ==========================================================
   Skeleton loading state
   ========================================================== */
.skeleton{ display:flex; flex-direction:column; gap:10px; }
.sk-line{
  height:12px;
  border-radius:6px;
  background:linear-gradient(90deg, var(--border) 25%, #EDEAE1 37%, var(--border) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}
.sk-lg{ height:20px; }
.sk-w40{ width:40%; }
.sk-w50{ width:50%; }
.sk-w70{ width:70%; }
@keyframes shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:0 0; }
}

@media (prefers-reduced-motion: reduce){
  .sk-line{ animation:none; }
  *{ transition:none !important; }
}

/* ==========================================================
   Tablet
   ========================================================== */
@media (min-width:600px){
  .feed{ padding:10px 24px 70px; }
  .job-card{ padding:22px 22px 20px; }
  .job-title{ font-size:21px; }
  .brand-name{ font-size:22px; }
}

/* ==========================================================
   Desktop
   ========================================================== */
@media (min-width:900px){
  .header-inner, .filters, .feed{ max-width:780px; }
  .job-card:hover{
    box-shadow:0 2px 4px rgba(23,34,28,0.06), 0 8px 24px rgba(23,34,28,0.08);
    transform:translateY(-1px);
  }
  .job-card-actions{ max-width:360px; }
}