/* JobzLobby Frontend Styles */
:root {
  --jl-green:#1a6b3c; --jl-dark:#0d3d22; --jl-light:#e8f5ee;
  --jl-gold:#c9a84c;  --jl-red:#d63031;  --jl-border:#d4e6db;
  --jl-bg:#f0f4f2;    --jl-text:#1a2e23; --jl-muted:#5a7266;
}

/* ── FULL BLEED FIX ──
   Breaks the plugin's content out of the theme's
   narrow content container (Astra, GeneratePress, etc.)
   so it spans the FULL browser width even though the
   theme's Header & Footer remain visible. */
.jl-wrap-front {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  overflow-x: hidden;
}

.jl-wrap-front { font-family:'Segoe UI',Tahoma,sans-serif; color:var(--jl-text); }

/* Ticker */
.jl-ticker-wrap { background:var(--jl-dark); overflow:hidden; padding:7px 0; }
.jl-ticker-inner { display:flex; animation:jlTicker 35s linear infinite; white-space:nowrap; }
.jl-ticker-inner:hover { animation-play-state:paused; }
@keyframes jlTicker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.jl-ticker-item { display:inline-flex; align-items:center; gap:8px; color:#a8d5b8; font-size:12.5px; padding:0 28px; }
.jl-ticker-badge { background:var(--jl-gold); color:var(--jl-dark); font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; }

/* Hero */
.jl-hero { background:linear-gradient(135deg,var(--jl-dark),var(--jl-green)); padding:28px 20px; text-align:center; }
.jl-hero h1 { color:white; font-size:26px; margin:0 0 6px; }
.jl-hero p  { color:rgba(255,255,255,.75); margin:0 0 16px; font-size:15px; }
.jl-hero-stats { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.jl-hero-stat { background:rgba(255,255,255,.12); color:white; border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:5px 14px; font-size:13px; }
.jl-hero-stat span { color:var(--jl-gold); font-weight:700; }

/* Search */
.jl-search-form { display:flex; max-width:520px; margin:0 auto; background:white; border-radius:12px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.jl-search-form input { flex:1; border:none; outline:none; padding:13px 16px; font-size:14px; }
.jl-search-form button { background:var(--jl-green); color:white; border:none; padding:13px 20px; font-weight:700; cursor:pointer; }

/* Filter tabs */
.jl-filter-tabs { background:white; border-bottom:2px solid var(--jl-border); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.jl-filter-inner { display:flex; padding:0 16px; min-width:max-content; }
.jl-tab { padding:13px 16px; font-size:13px; font-weight:600; color:var(--jl-muted); cursor:pointer; border:none; background:transparent; border-bottom:3px solid transparent; white-space:nowrap; }
.jl-tab:hover, .jl-tab.active { color:var(--jl-green); border-bottom-color:var(--jl-green); }
.jl-tab-count { background:var(--jl-light); color:var(--jl-green); font-size:11px; font-weight:700; padding:2px 6px; border-radius:10px; margin-left:4px; }
.jl-tab.active .jl-tab-count { background:var(--jl-green); color:white; }

/* Section header */
.jl-sec-head { display:flex; align-items:center; justify-content:space-between; margin:20px 0 12px; }
.jl-sec-title { font-size:19px; font-weight:700; color:var(--jl-dark); }
.jl-see-all { font-size:13px; color:var(--jl-green); font-weight:600; cursor:pointer; }

/* Urgent strip */
.jl-urgent-wrap { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.jl-urgent-card { flex-shrink:0; width:230px; background:linear-gradient(135deg,#c0392b,#e74c3c); border-radius:12px; padding:14px 16px; color:white; cursor:pointer; }
.jl-uc-badge { font-size:10px; font-weight:700; text-transform:uppercase; background:rgba(255,255,255,.2); padding:3px 8px; border-radius:10px; display:inline-block; margin-bottom:8px; }
.jl-uc-title { font-weight:700; font-size:14px; line-height:1.3; }
.jl-uc-bottom { display:flex; justify-content:space-between; margin-top:10px; font-size:12px; }
.jl-uc-posts { background:rgba(255,255,255,.25); padding:3px 8px; border-radius:10px; font-weight:700; }

/* Jobs grid */
.jl-jobs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
@media(max-width:480px){ .jl-jobs-grid { grid-template-columns:1fr; } }

/* Job card */
.jl-job-card { background:white; border-radius:12px; border:1px solid var(--jl-border); border-left:4px solid var(--jl-green); overflow:hidden; cursor:pointer; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; }
.jl-job-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(15,69,38,.13); }
.jl-jc-top { padding:14px 16px 10px; flex:1; }
.jl-jc-org { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.jl-jc-icon { width:34px; height:34px; border-radius:8px; background:var(--jl-light); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.jl-jc-org-name { font-size:12px; color:var(--jl-muted); font-weight:600; }
.jl-jc-title { font-weight:700; font-size:15px; line-height:1.3; margin-bottom:4px; }
.jl-jc-title-ur { font-size:12px; color:var(--jl-muted); margin-bottom:8px; direction:rtl; font-family:serif; }
.jl-jc-tags { display:flex; flex-wrap:wrap; gap:5px; }
.jl-tag { font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; }
.jl-tag-posts { background:#e8f5ee; color:var(--jl-green); }
.jl-tag-pay   { background:#fff8e1; color:#7d5a00; }
.jl-tag-loc   { background:#e8f0fe; color:#1a56db; }
.jl-tag-urgent{ background:#fde8e8; color:var(--jl-red); }
.jl-jc-bottom { padding:10px 16px; border-top:1px solid var(--jl-border); display:flex; align-items:center; justify-content:space-between; background:#fafcfb; }
.jl-jc-date { font-size:12px; color:var(--jl-muted); }
.jl-jc-date strong { color:var(--jl-red); }
.jl-jc-btn { background:var(--jl-green); color:white; font-size:12px; font-weight:700; padding:6px 12px; border-radius:7px; border:none; cursor:pointer; }

/* Stats bar */
.jl-stats-bar { display:flex; gap:0; background:var(--jl-dark); border-radius:10px; overflow:hidden; margin:20px 0; }
.jl-stat-item { flex:1; text-align:center; padding:14px 8px; border-right:1px solid rgba(255,255,255,.1); }
.jl-stat-item:last-child { border-right:none; }
.jl-stat-num { font-size:20px; font-weight:700; color:var(--jl-gold); }
.jl-stat-label { font-size:11px; color:rgba(255,255,255,.6); margin-top:2px; }

/* Category grid */
.jl-cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
@media(max-width:400px){ .jl-cat-grid { grid-template-columns:repeat(2,1fr); } }
.jl-cat-card { background:white; border-radius:12px; padding:16px 12px; text-align:center; border:1px solid var(--jl-border); cursor:pointer; transition:all .2s; }
.jl-cat-card:hover { border-color:var(--jl-green); transform:translateY(-2px); }
.jl-cat-icon { font-size:26px; margin-bottom:6px; }
.jl-cat-name { font-size:13px; font-weight:700; }
.jl-cat-count { font-size:11px; color:var(--jl-green); font-weight:700; margin-top:3px; }

/* Ad slots */
.jl-ad { text-align:center; margin:16px 0; overflow:hidden; }

/* Single job page */
.jl-single { max-width:780px; margin:0 auto; padding:20px 16px; }
.jl-single-hero { background:linear-gradient(135deg,var(--jl-dark),var(--jl-green)); border-radius:14px 14px 0 0; padding:26px 22px; }
.jl-single-badge { display:inline-block; background:rgba(201,168,76,.2); border:1px solid rgba(201,168,76,.4); color:var(--jl-gold); padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
.jl-single-title { color:white; font-size:24px; font-weight:700; margin-bottom:6px; }
.jl-single-title-ur { color:rgba(255,255,255,.8); font-size:17px; display:block; margin-bottom:14px; direction:rtl; font-family:serif; }
.jl-single-tags { display:flex; flex-wrap:wrap; gap:7px; }
.jl-single-tag { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); padding:4px 12px; border-radius:20px; font-size:12px; border:1px solid rgba(255,255,255,.2); }

/* Info grid */
.jl-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--jl-border); }
.jl-info-cell { background:white; padding:13px 16px; }
.jl-info-label { font-size:11px; color:var(--jl-muted); text-transform:uppercase; letter-spacing:.7px; font-weight:600; }
.jl-info-val { font-size:16px; font-weight:700; margin-top:3px; }
.jl-info-val.red { color:var(--jl-red); }
.jl-info-val.green { color:var(--jl-green); }

/* Table */
.jl-detail-table { width:100%; border-collapse:collapse; font-size:14px; }
.jl-detail-table tr { border-bottom:1px solid var(--jl-border); }
.jl-detail-table tr:last-child { border-bottom:none; }
.jl-detail-table td { padding:10px 14px; vertical-align:top; }
.jl-detail-table td:first-child { font-weight:600; color:var(--jl-muted); width:42%; font-size:13px; }
.jl-detail-table tr:nth-child(even) td { background:#fafcfb; }

/* Steps */
.jl-steps { display:flex; flex-direction:column; gap:12px; }
.jl-step { display:flex; gap:12px; }
.jl-step-num { width:26px; height:26px; border-radius:50%; background:var(--jl-green); color:white; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.jl-step-text { font-size:14px; line-height:1.5; }

/* Deadline box */
.jl-deadline-box { background:linear-gradient(135deg,#c0392b,#e74c3c); border-radius:10px; padding:18px; color:white; text-align:center; margin:16px 0; }
.jl-dl-label { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:1px; }
.jl-dl-date { font-size:26px; font-weight:700; margin:4px 0; }
.jl-dl-ur { font-size:14px; opacity:.85; direction:rtl; font-family:serif; }

/* Buttons */
.jl-btn-apply { display:block; background:var(--jl-green); color:white; text-align:center; padding:15px; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none; border:none; cursor:pointer; width:100%; }
.jl-btn-official { display:block; background:white; color:var(--jl-green); text-align:center; padding:12px; border-radius:10px; font-size:13px; font-weight:600; text-decoration:none; border:2px solid var(--jl-green); margin-top:8px; }

/* Share */
.jl-share { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.jl-share-btn { padding:9px 16px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; border:none; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.jl-share-fb { background:#1877f2; color:white; }
.jl-share-wa { background:#25d366; color:white; }
.jl-share-copy { background:#f0f4f2; color:var(--jl-text); border:1px solid var(--jl-border); }

/* Section card */
.jl-section { background:white; padding:18px 20px; border-bottom:1px solid var(--jl-border); }
.jl-section:last-child { border-radius:0 0 14px 14px; border-bottom:none; }
.jl-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jl-section-en { font-size:17px; font-weight:700; color:var(--jl-dark); }
.jl-section-ur { font-size:14px; color:var(--jl-muted); direction:rtl; font-family:serif; }

/* Note box */
.jl-note { background:#fff3cd; border:1px solid #ffc107; border-radius:8px; padding:12px 14px; font-size:13px; color:#7d5a00; margin-top:14px; }
.jl-note-ur { direction:rtl; font-family:serif; font-size:13px; margin-top:6px; display:block; }

/* Urgent badge */
.jl-urgent-badge { background:var(--jl-red); color:white; padding:5px 12px; border-radius:0 0 12px 12px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }

/* Load more */
.jl-load-more { text-align:center; margin:16px 0; }
.jl-load-more-btn { background:white; color:var(--jl-green); border:2px solid var(--jl-green); padding:11px 28px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }