/*
 * Premium listings.
 *
 * Shared by the public landing page (index.html), the applicant dashboard
 * (dashboard.html) and the admin advert list (admin/job-advert.html) so the
 * badge reads identically wherever a promoted advert surfaces.
 *
 * Deliberately additive — it only styles .premium-* classes and the
 * --premium modifier, so it can be dropped in over any of the three
 * existing stylesheets without overriding their rules.
 */

:root {
    --premium-gold: #c9961f;
    --premium-gold-soft: #f7e9c6;
    --premium-ink: #6b4e08;
}

/* ---- Badge ------------------------------------------------------------- */

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--premium-gold-soft);
    border: 1px solid var(--premium-gold);
    color: var(--premium-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.premium-badge i {
    font-size: 10px;
    color: var(--premium-gold);
}

.premium-star {
    color: var(--premium-gold);
    margin-right: 6px;
}

/* ---- Landing page rail -------------------------------------------------- */

.premium-jobs-section {
    padding: 60px 0 20px;
    background: linear-gradient(180deg, #fffdf7 0%, #ffffff 100%);
}

/* The rail sits above the hero as the first section on the landing page, so it has
   to clear the fixed header itself (.header-one .navbar is min-height 84px) — the
   hero below it is full-bleed and does its own clearing. */
.premium-jobs-section--lead {
    padding-top: 108px;
    border-bottom: 1px solid var(--premium-gold-soft);
}

.premium-jobs-section .jobs-heading h2 {
    margin-bottom: 8px;
}

.premium-kicker {
    background: var(--premium-gold-soft) !important;
    color: var(--premium-ink) !important;
    border: 1px solid var(--premium-gold);
}

.premium-kicker i {
    color: var(--premium-gold);
}

/* Gold-edged variant of the standard job card. */
.job-ad-card--premium {
    border: 1px solid var(--premium-gold);
    box-shadow: 0 10px 28px rgba(201, 150, 31, .18);
    position: relative;
}

.job-ad-card--premium .job-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ---- Dashboard / admin card -------------------------------------------- */

.premium-card {
    border: 1px solid var(--premium-gold);
}

.premium-card > .card-header {
    background: var(--premium-gold-soft);
    border-bottom: 1px solid var(--premium-gold);
}

.premium-item {
    border: 1px solid var(--premium-gold) !important;
}

.premium-item .app-head p .premium-badge {
    margin-left: 8px;
}

@media (max-width: 991px) {
    .premium-jobs-section--lead { padding-top: 96px; }
}

@media (max-width: 575px) {
    .premium-jobs-section { padding: 36px 0 12px; }
    .premium-jobs-section--lead { padding-top: 88px; }
    .premium-badge { font-size: 10px; padding: 2px 8px; }
}