.ucl-wrap { max-width: 1200px; margin: 0 auto; padding: 10px 0; font-family: "Segoe UI", Arial, sans-serif; }

/* ---- Header ---- */
.ucl-page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 20px 0 26px;
    padding-bottom: 16px;
    position: relative;
}
.ucl-page-head::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--ucl-c1,#2563eb), var(--ucl-c2,#60a5fa), transparent);
    border-radius: 20px;
}
.ucl-page-icon {
    font-size: 24px;
    width: 46px; height: 46px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    background: linear-gradient(135deg, var(--ucl-c1,#2563eb), var(--ucl-c2,#60a5fa));
    box-shadow: 0 6px 16px -4px rgba(37,99,235,.4);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ucl-c1,#2563eb) 60%, transparent);
    animation: ucl-icon-float 3s ease-in-out infinite;
}
@keyframes ucl-icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-4deg); }
}
.ucl-page-title {
    font-size: 23px;
    font-weight: 800;
    color: #0f172a;
    flex: 1;
    min-width: 140px;
}
.ucl-page-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ucl-c1,#2563eb);
    background: #eef4ff;
    background: color-mix(in srgb, var(--ucl-c1,#2563eb) 10%, #fff);
    border: 1px solid #cfe0ff;
    border: 1px solid color-mix(in srgb, var(--ucl-c1,#2563eb) 30%, #fff);
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ---- Filter bar ----
   Qualification Level and Recruitment Type sit side by side, separated by a
   vertical divider, on one row. Clear Filters centers directly below that
   row, and the search box gets its own lightly-boxed panel underneath.
   Rows wrap on narrow screens so nothing overflows on mobile. */
.ucl-filter-bar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #eef1f6;
    border-radius: 18px;
    padding: 22px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ucl-filter-groups-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    width: 100%;
    flex-wrap: wrap;
}
.ucl-filter-vr {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
}
@media (max-width: 560px) {
    .ucl-filter-vr { display: none; }
    .ucl-filter-groups-row { gap: 18px; }
}
.ucl-filter-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ucl-toggle-search-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #eef1f6;
    border-radius: 14px;
}
.ucl-filter-heading { display: flex; justify-content: center; }
.ucl-filter-label {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ucl-c1,#2563eb);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .1px;
}
.ucl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ucl-pill {
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
/* Wrapped in (hover:hover) so touchscreens don't get a "stuck" hover style
   after a tap — on touch devices :hover normally only clears on the NEXT tap
   elsewhere, which is what made a just-deselected pill still look active
   until you tapped outside it (i.e. looked like it needed two clicks). */
@media (hover:hover) and (pointer:fine) {
    .ucl-pill:hover {
        border-color: var(--ucl-c1,#2563eb);
        color: var(--ucl-c1,#2563eb);
        box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ucl-c1,#2563eb) 40%, transparent);
    }
}
.ucl-pill.active {
    background: linear-gradient(135deg, var(--ucl-c1,#2563eb), var(--ucl-c2,#60a5fa));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ucl-c1,#2563eb) 55%, transparent);
}
/* Thin full-width divider between stacked sections — replaces the old
   vertical bar, which only ever worked when two groups sat side by side
   and broke as soon as the layout had to stack (exactly what was happening
   in a narrow column). */
.ucl-filter-hr {
    width: 100%;
    max-width: 340px;
    height: 1px;
    margin: 14px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.ucl-search-row { display: flex; justify-content: center; width: 100%; }
/* Search box: its own dedicated row, centered. flex/width transition on
   focus gives it a bit of "dynamic" life without needing JS. */
.ucl-search-wrap {
    position: relative;
    width: 100%;
    max-width: 300px;
    transition: max-width .25s ease;
}
.ucl-search-wrap:focus-within { max-width: 340px; }
.ucl-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: color .2s ease;
}
.ucl-search-wrap:focus-within .ucl-search-icon { color: var(--ucl-c1,#2563eb); }
.ucl-search-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #dbe3ee;
    background: #fff;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 500;
    /* Generous left padding keeps the icon and the placeholder text well
       apart — the icon can never sit under/behind the first letter. */
    padding: 11px 16px 11px 42px;
    border-radius: 24px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
}
.ucl-search-input::placeholder { color: #94a3b8; font-weight: 400; }
.ucl-search-input:focus {
    border-color: var(--ucl-c1,#2563eb);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ucl-c1,#2563eb) 14%, transparent);
}
/* Hide the native browser "clear" icon on search inputs so it never collides
   with our own search icon / layout across browsers. */
.ucl-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ucl-clear-row { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
.ucl-clear-filters {
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.ucl-clear-filters:hover { background: #fef2f2; box-shadow: 0 4px 10px -3px rgba(220,38,38,.25); }

.ucl-loading-state { opacity: .5; pointer-events: none; transition: opacity .2s ease; }

/* ---- Grid ---- */
.ucl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ---- Card ---- */
.ucl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    padding: 14px 18px 36px; /* extra bottom padding so arrow never overlaps content */
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
    opacity: 0;
    transform: translateY(14px);
    animation: ucl-rise .55s ease forwards;
    animation-delay: calc(min(var(--i, 1), 15) * 0.06s);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
@keyframes ucl-rise { to { opacity: 1; transform: translateY(0); } }

.ucl-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ucl-c1,#2563eb), var(--ucl-c2,#60a5fa));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: -1;
}
.ucl-card::after {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,.35), transparent 70%);
    background: radial-gradient(circle, color-mix(in srgb, var(--ucl-c2,#60a5fa) 35%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: -1;
}

.ucl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(37,99,235,.3);
    box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--ucl-c1,#2563eb) 30%, transparent);
}
.ucl-card:hover::before,
.ucl-card:hover::after { opacity: 1; }

.ucl-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ucl-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef4ff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ucl-c1,#2563eb) 14%, #fff), color-mix(in srgb, var(--ucl-c2,#60a5fa) 14%, #fff));
    color: var(--ucl-c1,#2563eb);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}

/* ---- Status badges (NEW / EXPIRED) ---- */
.ucl-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
}
.ucl-new {
    background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
    animation: ucl-pulse-red 1.6s ease-in-out infinite;
}
@keyframes ucl-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,26,26,.45); }
    50% { box-shadow: 0 0 0 6px rgba(255,26,26,0); }
}
.ucl-expired {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    animation: ucl-pulse-gray 1.8s ease-in-out infinite;
}
@keyframes ucl-pulse-gray {
    0%, 100% { box-shadow: 0 0 0 0 rgba(100,116,139,.4); }
    50% { box-shadow: 0 0 0 6px rgba(100,116,139,0); }
}
.ucl-upcoming {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    animation: ucl-pulse-amber 1.8s ease-in-out infinite;
}
@keyframes ucl-pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.4); }
    50% { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}
/* Expired posts read as visually "closed" */
.ucl-card-expired { opacity: .82; }
.ucl-card-expired .ucl-title { color: #64748b; }

.ucl-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
    line-height: 1.35;
    transition: color .25s ease;
}
.ucl-card:hover .ucl-title { color: var(--ucl-c1,#2563eb); }

.ucl-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12.5px;
    color: #64748b;
    margin-top: auto;
    padding-top: 8px;
    padding-right: 38px; /* reserve space so the arrow never overlaps the date */
    border-top: 1px dashed #eef1f6;
}
/* Category name + Start Date live on the left; Last Date is pushed to the
   far right (auto margin) so the two dates never run together as one string. */
.ucl-meta-left { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ucl-board { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ucl-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ucl-c1,#2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ucl-c1,#2563eb) 20%, transparent);
}
.ucl-date { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ucl-date-last { margin-left: auto; }

.ucl-arrow {
    position: absolute;
    right: 16px; bottom: 12px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #eef4ff;
    background: color-mix(in srgb, var(--ucl-c1,#2563eb) 10%, #fff);
    color: var(--ucl-c1,#2563eb);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-6px);
    transition: all .3s ease;
}
.ucl-card:hover .ucl-arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--ucl-c1,#2563eb);
    color: #fff;
}

/* ---- Show More / Hide controls (no more auto-load-on-scroll) ---- */
.ucl-load-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 30px 0 10px;
}
.ucl-showmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--ucl-c1,#2563eb);
    background: #fff;
    color: var(--ucl-c1,#2563eb);
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 24px;
    cursor: pointer;
    transition: all .2s ease;
}
.ucl-showmore-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--ucl-c1,#2563eb), var(--ucl-c2,#60a5fa));
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(37,99,235,.35);
}
.ucl-showmore-btn:disabled { cursor: not-allowed; opacity: .75; }
.ucl-hide-btn {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 24px;
    cursor: pointer;
    transition: all .2s ease;
}
.ucl-hide-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.ucl-spinner {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2.5px solid rgba(37,99,235,.25);
    border-top-color: var(--ucl-c1,#2563eb);
    animation: ucl-spin .7s linear infinite;
}
@keyframes ucl-spin { to { transform: rotate(360deg); } }

.ucl-end-msg {
    text-align: center;
    color: #94a3b8;
    font-size: 13.5px;
    font-weight: 600;
    padding: 24px 0;
}

.ucl-empty { text-align: center; color: #888; padding: 50px 0; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .ucl-wrap { padding: 16px 12px; }

    .ucl-page-head {
        margin: 10px 0 20px;
        gap: 10px;
    }
    .ucl-page-icon {
        width: 38px; height: 38px;
        font-size: 20px;
    }
    .ucl-page-title {
        font-size: 18px;
        flex-basis: 100%;
        order: 3;
    }
    .ucl-page-count {
        margin-left: auto;
    }

    .ucl-grid { grid-template-columns: 1fr; gap: 16px; }

    .ucl-card { padding: 12px 16px 34px; }
    .ucl-title { font-size: 15px; margin-bottom: 8px; }

    .ucl-card-top { margin-bottom: 8px; }
}

@media (max-width: 420px) {
    .ucl-page-icon { display: none; }
    .ucl-page-title { font-size: 16px; }
}