/* /job-seekers (Views/JobSeekers/Index.cshtml). House style: the page mist from
   brand.css shows through, content sits on frosted glass cards, buttons use
   .wb-btn-primary / .wb-btn-glass, images the site lacks are .wb-img-ph. */

.wbj { color: #1E293B; }
.wbj .container { max-width: 1180px; }
.wbj h1, .wbj h2, .wbj h3 { color: #0F172A; margin: 0; }
.wbj .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wbj-section { padding: 44px 0; }
.wbj-last { padding-bottom: 88px; }
.wbj-h2 { font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin-bottom: 22px !important; }
.wbj-h3 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748B !important; margin-bottom: 12px !important; }
.wbj-lead { font-size: 18px; line-height: 1.65; color: #475569; margin: 0; }
.wbj-note { margin: 16px 0 0; font-size: 14.5px; color: #64748B; }
.wbj-note a { color: var(--brand-hover); font-weight: 600; }

/* frosted card, like the home page's "Your account" cards */
.wbj-card {
    position: relative;
    padding: 24px 24px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.56));
    border: 1px solid rgb(255 255 255 / 0.9);
    box-shadow: 0 1px 0 #fff inset, 0 18px 40px -30px rgb(30 41 59 / 0.35);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
}
.wbj-card h3 { font-size: 18px; font-weight: 650; margin-bottom: 8px; }
.wbj-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #475569; }

/* ── hero ── */
.wbj-hero { padding: 56px 0 28px; }
.wbj-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.wbj-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-hover); background: rgb(var(--brand-rgb) / 0.10); border: 1px solid rgb(var(--brand-rgb) / 0.2);
}
.wbj-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.wbj-hero h1 { font-size: 44px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.wbj-hero-art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgb(30 41 59 / 0.18)); }

.wbj-search {
    display: flex; gap: 8px; margin: 26px 0 16px; padding: 8px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.75);
    border: 1px solid rgb(255 255 255 / 0.95);
    box-shadow: 0 1px 0 #fff inset, 0 20px 40px -28px rgb(30 41 59 / 0.4);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wbj-field { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; border-radius: 10px; color: #94A3B8; background: #fff; border: 1px solid #E2E8F0; }
.wbj-field-city { flex: 0 1 34%; }
.wbj-field input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 15.5px; padding: 12px 0; color: #0F172A; }
.wbj-field:focus-within { border-color: rgb(var(--brand-rgb) / 0.55); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.10); }
.wbj-search-btn { flex: none; padding: 0 22px !important; font-size: 15.5px; }

.wbj-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wbj-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 20px !important; font-size: 15.5px; text-decoration: none !important; }

.wbj-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.wbj-chips li { font-size: 13.5px; font-weight: 500; color: #334155; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.6); border: 1px solid rgb(148 163 184 / 0.28); }

/* ── browse ── */
.wbj-browse { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.wbj-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.wbj-pills a {
    display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none;
    font-size: 15px; font-weight: 500; color: #1E293B;
    background: rgb(255 255 255 / 0.7); border: 1px solid rgb(148 163 184 / 0.28);
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.wbj-pills a:hover { color: var(--brand-hover); background: rgb(var(--brand-rgb) / 0.08); border-color: rgb(var(--brand-rgb) / 0.35); }

/* ── latest jobs ── */
.wbj-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wbj-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-hover); text-decoration: none; }
.wbj-more:hover { text-decoration: underline; }
.wbj-jobs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.wbj-job {
    display: flex; gap: 14px; align-items: center; height: 100%;
    padding: 16px 18px; border-radius: 16px; text-decoration: none !important; color: inherit;
    background: rgb(255 255 255 / 0.72); border: 1px solid rgb(255 255 255 / 0.9);
    box-shadow: 0 1px 0 #fff inset, 0 14px 30px -24px rgb(30 41 59 / 0.35);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.wbj-job:hover { transform: translateY(-3px); border-color: rgb(var(--brand-rgb) / 0.3); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.06), 0 20px 40px -24px rgb(var(--brand-rgb) / 0.45); }
.wbj-job-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; color: #94A3B8; background: #fff; border: 1px solid #E2E8F0; }
.wbj-job-logo img { width: 100%; height: 100%; object-fit: contain; }
.wbj-job-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wbj-job-text strong { font-size: 15.5px; font-weight: 650; color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbj-job-text span { font-size: 13.5px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── steps / why ── */
.wbj-steps, .wbj-why { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.wbj-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wbj-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wbj-step-num {
    display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 10px; font-weight: 700; color: #fff;
    background: linear-gradient(180deg, var(--brand), var(--brand-hover));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 8px 18px -8px rgb(var(--brand-rgb) / 0.7);
}

/* ── app ── */
.wbj-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.wbj-app-features { list-style: none; margin: 22px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.wbj-app-features li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: #475569; }
.wbj-app-features li::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: rgb(var(--brand-rgb) / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.wbj-app-features strong { color: #0F172A; font-weight: 650; }
.wbj-app-art { display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: end; }

/* ── safe ── */
.wbj-safe {
    display: flex; gap: 20px; align-items: flex-start; padding: 30px 32px; border-radius: 22px; color: #E8F5EF;
    background:
        radial-gradient(520px 260px at 100% 0%, rgb(var(--brand-rgb) / 0.40), transparent 65%),
        linear-gradient(180deg, #0D2B23 0%, #0A1A1E 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 30px 60px -34px rgb(6 78 59 / 0.6);
}
.wbj-safe .wbj-h2 { color: #fff; font-size: 24px; margin-bottom: 12px !important; }
.wbj-safe-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #6EE7B7; background: rgb(16 185 129 / 0.14); border: 1px solid rgb(16 185 129 / 0.3); }
.wbj-safe-list { margin: 0; padding-left: 18px; }
.wbj-safe-list li { font-size: 16px; line-height: 1.6; margin-top: 4px; }

/* ── FAQ ── */
.wbj-faq { display: grid; gap: 10px; }
.wbj-faq-item { border-radius: 14px; background: rgb(255 255 255 / 0.72); border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 10px 26px -22px rgb(30 41 59 / 0.35); }
.wbj-faq-item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-size: 16.5px; font-weight: 600; color: #0F172A; position: relative; }
.wbj-faq-item summary::-webkit-details-marker { display: none; }
.wbj-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--brand-hover); }
.wbj-faq-item[open] summary::after { content: "–"; }
.wbj-faq-answer { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.65; color: #475569; }
.wbj-faq-answer p { margin: 0 0 8px; }
.wbj-faq-answer a { color: var(--brand-hover); font-weight: 600; }

/* ── closing ── */
.wbj-cta { text-align: center; padding: 40px 24px; border-radius: 24px; background: rgb(255 255 255 / 0.6); border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 1px 0 #fff inset, 0 24px 50px -34px rgb(30 41 59 / 0.35); }
.wbj-cta .wbj-actions { justify-content: center; }

/* ── responsive ── */
@media (max-width: 991px) {
    .wbj-hero-grid, .wbj-app, .wbj-browse { grid-template-columns: minmax(0, 1fr); }
    .wbj-hero-art { order: -1; max-width: 460px; }
    .wbj-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wbj-steps { grid-template-columns: minmax(0, 1fr); }
    .wbj-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .wbj-hero { padding-top: 32px; }
    .wbj-hero h1 { font-size: 32px; }
    .wbj-h2 { font-size: 24px; }
    .wbj-search { flex-direction: column; }
    .wbj-field-city { flex-basis: auto; }
    .wbj-search-btn { padding: 12px 22px !important; }
    .wbj-jobs, .wbj-why, .wbj-app-features { grid-template-columns: minmax(0, 1fr); }
    .wbj-app-art { grid-template-columns: minmax(0, 1fr); }
    .wbj-qr { display: none; }
    .wbj-safe { flex-direction: column; padding: 24px 20px; }
}