/* ==========================================================================
   PrepareForJob theme overrides
   --------------------------------------------------------------------------
   1) Sidebar is always WHITE with dark, readable text.
      DezNav colours the sidebar from a cookie-driven `data-sidebarbg`
      attribute and derives menu text colour from theme variables, which made
      the labels white (invisible) until hover. These rules use ID-level
      specificity + !important so nothing in the template can override them.
   2) Marketing page polish.
   Loaded AFTER assets/css/style.css.
   ========================================================================== */

/* ---------- 1. Sidebar: always white, dark text ---------- */

body #main-wrapper .deznav {
    --sidebar-bg: #ffffff;
    --sidebar-color: #3e4954;
    --sidebar-text: #3e4954;
    background: #ffffff !important;
    border-right: 1px solid #eceef3 !important;
}

body #main-wrapper .deznav .deznav-scroll,
body #main-wrapper .deznav .metismenu,
body #main-wrapper .deznav .metismenu li > ul,
body #main-wrapper .deznav .metismenu li > ul > li > a {
    background: #ffffff !important;
}

/* Menu labels: dark on white (all levels, including nested spans) */
body #main-wrapper .deznav .metismenu > li > a,
body #main-wrapper .deznav .metismenu > li > a .nav-text,
body #main-wrapper .deznav .metismenu > li > a span,
body #main-wrapper .deznav .metismenu li > ul > li > a,
body #main-wrapper .deznav .metismenu li > ul > li > a span,
body #main-wrapper .deznav .metismenu li.mm-active > a,
body #main-wrapper .deznav .metismenu li.mm-active > a span,
body #main-wrapper .deznav .metismenu li.mm-active > a .nav-text {
    color: #3e4954 !important;
}

/* Icons */
body #main-wrapper .deznav .metismenu > li > a > i,
body #main-wrapper .deznav .metismenu li > ul > li > a > i,
body #main-wrapper .deznav .metismenu > li > a g [fill],
body #main-wrapper .deznav .metismenu > li > a svg g [fill] {
    color: #8a94a6 !important;
    fill: #8a94a6 !important;
}

/* Hover + active: subtle primary tint, dark-blue text (never white-on-white) */
body #main-wrapper .deznav .metismenu > li:hover > a,
body #main-wrapper .deznav .metismenu > li:focus > a,
body #main-wrapper .deznav .metismenu > li.mm-active > a,
body #main-wrapper .deznav .metismenu > li > a:hover,
body #main-wrapper .deznav .metismenu > li > a:focus,
body #main-wrapper .deznav .metismenu li > ul > li > a:hover {
    background: #f2f5ff !important;
    color: #1a237e !important;
}

body #main-wrapper .deznav .metismenu > li:hover > a span,
body #main-wrapper .deznav .metismenu > li.mm-active > a span,
body #main-wrapper .deznav .metismenu > li:hover > a .nav-text,
body #main-wrapper .deznav .metismenu > li.mm-active > a .nav-text,
body #main-wrapper .deznav .metismenu li > ul > li > a:hover span {
    color: #1a237e !important;
}

body #main-wrapper .deznav .metismenu > li:hover > a > i,
body #main-wrapper .deznav .metismenu > li.mm-active > a > i,
body #main-wrapper .deznav .metismenu > li:hover > a g [fill],
body #main-wrapper .deznav .metismenu > li.mm-active > a g [fill] {
    color: #1a237e !important;
    fill: #1a237e !important;
}

body #main-wrapper .deznav .menu-title {
    color: #98a4b8 !important;
}

/* Explicit active menu item (driven by the current route). */
body #main-wrapper .deznav .metismenu > li.pfj-active > a {
    background: #f2f5ff !important;
    color: #1a237e !important;
}

body #main-wrapper .deznav .metismenu > li.pfj-active > a span,
body #main-wrapper .deznav .metismenu > li.pfj-active > a .nav-text {
    color: #1a237e !important;
}

body #main-wrapper .deznav .metismenu > li.pfj-active > a > i {
    color: #1a237e !important;
}

/* Brand header + top bar stay white */
body #main-wrapper .nav-header,
body #main-wrapper .header,
body #main-wrapper .header .header-content {
    background: #ffffff !important;
    border-bottom: 1px solid #eceef3 !important;
}

/* Keep the sidebar footer pinned instead of stretching the page, and stop the
   template script from inflating the content height on long menus. */
body #main-wrapper .deznav {
    display: flex;
    flex-direction: column;
}

body #main-wrapper .deznav .deznav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
}

body #main-wrapper .deznav .deznav-footer {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-top: 1px solid #eceef3;
    padding: 10px 12px;
    margin-top: auto;
}

body #main-wrapper .content-body {
    min-height: calc(100vh - 70px) !important;
}

/* ---------- 2. Marketing page polish ---------- */

.pfj-hero {
    background: #ffffff;
    border: 1px solid #eceef3;
    border-radius: 14px;
    padding: 3rem 3rem;
    box-shadow: 0 12px 32px rgba(26, 35, 126, 0.06);
}

/* Landing hero visual */
.pfj-hero-media {
    position: relative;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
}

.pfj-hero-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    border: 1px solid #eceef3;
    box-shadow: 0 18px 40px rgba(16, 19, 43, 0.16);
}

@media (max-width: 991.98px) {
    .pfj-hero-media {
        min-height: 0;
    }

    .pfj-hero-image {
        max-height: 360px;
    }
}

.pfj-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1a237e;
    background: #eef1ff;
    padding: .35rem .75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.pfj-display {
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 800;
    color: #10132b;
    letter-spacing: -.02em;
}

.pfj-lead {
    font-size: 1.1rem;
    color: #5a6577;
    max-width: 46rem;
}

.pfj-stat {
    border: 1px solid #eceef3;
    border-radius: 12px;
    padding: 1rem .75rem;
    text-align: center;
    background: #fff;
}

.pfj-stat h3 {
    font-weight: 800;
    color: #1a237e;
    margin: 0;
    font-size: 1.6rem;
}

.pfj-stat small {
    color: #8a94a6;
    font-size: .8rem;
}

.pfj-step {
    border: 1px solid #eceef3;
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pfj-step:hover {
    transform: translateY(-3px);
    border-color: #c9d2ff;
    box-shadow: 0 10px 24px rgba(26, 35, 126, 0.08);
}

.pfj-step .pfj-step-num {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #1a237e;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
}

.pfj-card {
    border: 1px solid #eceef3;
    border-radius: 12px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pfj-card:hover {
    transform: translateY(-3px);
    border-color: #c9d2ff;
    box-shadow: 0 10px 24px rgba(26, 35, 126, 0.08);
}

.pfj-section-title {
    font-weight: 800;
    color: #10132b;
    letter-spacing: -.01em;
}

.pfj-section-sub {
    color: #5a6577;
}

.pfj-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1ff;
    color: #1a237e;
    font-size: 1.25rem;
    margin-bottom: .9rem;
}

.pfj-cta-band {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    padding: 2.5rem;
    color: #10132b;
    box-shadow: 0 10px 30px rgba(26, 35, 126, 0.06);
}

.pfj-cta-band .pfj-cta-sub {
    color: #5a6577;
}

.pfj-otp-input {
    letter-spacing: .45em;
    font-weight: 700;
    text-align: center;
    font-size: 1.35rem;
}

/* Credit packs */
.pfj-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    padding: 1.4rem;
    box-shadow: 0 8px 22px rgba(16, 19, 43, .05);
}

.pfj-pack-popular {
    border-color: #1a237e;
    box-shadow: 0 12px 28px rgba(26, 35, 126, .13);
}

.pfj-pack-badge {
    position: absolute;
    top: -11px;
    right: 14px;
    background: #1a237e;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .28rem .6rem;
    border-radius: 999px;
}

.pfj-pack-credits {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    color: #10132b;
    letter-spacing: -.02em;
}

.pfj-pack-credits span {
    font-size: .9rem;
    font-weight: 600;
    color: #5a6577;
    margin-left: .35rem;
    letter-spacing: 0;
}

.pfj-pack-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a237e;
    margin-top: .35rem;
}

.pfj-pack-features {
    list-style: none;
    padding: 0;
    margin: .9rem 0 1.1rem;
    flex-grow: 1;
}

.pfj-pack-features li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .86rem;
    color: #5a6577;
    margin-bottom: .4rem;
}

.pfj-pack-features i {
    color: #1a237e;
    margin-top: .18rem;
}

.pfj-custom-amount {
    border: 1px dashed #cfd6e6;
    border-radius: 14px;
    background: #fafbff;
    padding: 1.1rem 1.25rem;
}

@media (max-width: 575.98px) {
    .pfj-pack {
        padding: 1.15rem;
    }

    .pfj-pack-credits {
        font-size: 2rem;
    }

    .pfj-custom-amount {
        padding: 1rem;
    }
}

/* Input-driven credit builder */
.pfj-credit-builder {
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    background: #fafbff;
    padding: 1.35rem;
}

.pfj-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pfj-quick-pick {
    border: 1px solid #cfd6e6;
    background: #fff;
    color: #1a237e;
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .88rem;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease;
}

.pfj-quick-pick:hover,
.pfj-quick-pick:focus {
    background: #eef1ff;
    border-color: #1a237e;
}

.pfj-credit-summary {
    border-radius: 12px;
    background: #eef1ff;
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4fb;
}

.pfj-credit-summary-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.pfj-credit-summary-main strong {
    font-size: 1.65rem;
    color: #10132b;
    line-height: 1.1;
}

.pfj-credit-summary-main span {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a237e;
}

.pfj-credit-summary-invalid {
    background: #fff6e5;
    border-color: #ffd58a;
}

@media (max-width: 575.98px) {
    .pfj-credit-builder {
        padding: 1rem;
    }

    .pfj-credit-summary-main strong {
        font-size: 1.4rem;
    }
}

/* Template headings override card-header text colour, which made the white
   "Premium" label unreadable on the blue header. Force white on primary headers. */
body #main-wrapper .card-header.bg-primary,
body #main-wrapper .card-header.bg-primary h1,
body #main-wrapper .card-header.bg-primary h2,
body #main-wrapper .card-header.bg-primary h3,
body #main-wrapper .card-header.bg-primary h4,
body #main-wrapper .card-header.bg-primary h5,
body #main-wrapper .card-header.bg-primary h6,
body #main-wrapper .card-header.bg-primary .card-title {
    color: #ffffff !important;
}

body #main-wrapper .card-header.bg-primary .badge.bg-warning {
    background: #ffc107 !important;
    color: #10132b !important;
}

/* The template sets .card { height: calc(100% - 30px) }, which stretches every
   card to the height of its whole column. Collapsible dossier sections then leave
   huge blank gaps, and stacked cards overlap. Cards size to their content unless
   they explicitly opt into equal heights with .h-100. */
body #main-wrapper .card:not(.h-100) {
    height: auto;
}

body #main-wrapper .card.h-100 {
    height: 100%;
}

.pfj-divider {
    border: 0;
    border-top: 1px solid #eceef3;
    margin: 2.5rem 0;
}

/* Auth pages: split visual panel */
.pfj-auth-visual {
    background: linear-gradient(135deg, #1a237e 0%, #283593 55%, #00695c 100%);
    min-height: 100%;
}

@media (max-width: 767.98px) {
    .pfj-hero {
        padding: 2rem 1.25rem;
    }

    .pfj-display {
        font-size: 1.9rem;
    }
}