/* ZnajdzPrace Redesign */
.rj-job-wrapper {
    background-color: #f4f6f8;
    padding: 40px 0;
    font-family: 'DM Sans', sans-serif;
    /* Assuming theme font */
}

.rj-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Section (Transparent) */
.rj-header-section {
    margin-bottom: 30px;
    /* No background, no shadow, no border */
}

/* Header Card (Legacy/Other) */
.rj-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.rj-header-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.rj-company-logo img {
    width: 80px;
    height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background: #fff;
    /* Ensure logo pops on gray bg */
}

.rj-header-main {
    flex: 1;
}

.rj-company-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.rj-job-title {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.rj-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.rj-salary-badge {
    background-color: #f0fdf4;
    /* Light green fallback */
    color: #166534;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

/* Theme salary often has HTML inside, try to target it if needed */
.rj-salary-badge .job-salary {
    color: inherit;
    font-weight: inherit;
}

.rj-meta-item {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
    gap: 6px;
}

.rj-header-actions {
    min-width: 200px;
    text-align: right;
}

/* Content Grid */
.rj-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.rj-section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.rj-description-text {
    line-height: 1.7;
    color: #444;
    font-size: 14px;
}

.rj-description-text h2,
.rj-description-text h3 {
    margin-top: 24px;
    font-size: 18px;
}

/* Sidebar */
.rj-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rj-details-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.rj-details-list li:last-child {
    border-bottom: none;
}

.rj-label {
    color: #888;
}

.rj-value {
    color: #333;
    font-weight: 500;
    text-align: right;
}

/* Buttons Override */
.btn-apply {
    background: turquoise;
}

.rj-header-actions .btn-apply,
.rj-apply-card-mobile .btn-apply,
.application-link.job_application_link {
    background-color: #ff0055 !important;
    /* ZnajdzPrace-ish Pink */
    color: white !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    border: none;
}

.rj-header-actions .btn-apply:hover,
.rj-apply-card-mobile .btn-apply:hover,
.application-link.job_application_link:hover {
    background-color: #d40047 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 85, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .rj-content-grid {
        grid-template-columns: 1fr;
    }

    .rj-header-top {
        flex-direction: column;
    }

    .rj-header-actions {
        width: 100%;
        text-align: left;
        margin-top: 20px;
    }

    .application-link.job_application_link {
        display: block;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   Strict ZnajdzPrace Redesign (1:1 Features)
   ------------------------------------------------------------------------- */

/* Sticky Bottom Bar */
.rj-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 20px 24px 32px 24px !important;
    /* Top 20px, Bottom 32px (Visual center with label) */
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    display: block;
    /* Visible by default (logic can hide it if header is visible) */
    box-sizing: border-box;
    /* Ensure padding doesn't break width */
}

.rj-sticky-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    /* Ensure separation between title and button */
}

.rj-sticky-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rj-sticky-logo {
    position: relative;
    display: inline-block;
}

/* Force sticky logo wrapper to be compact and tight */
.rj-sticky-logo .employer-logo {
    width: 22px;
    /* Reduced to 22px (-10%) */
    height: 22px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    /* Match reduction */
}

.rj-sticky-logo img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    /* Wrapper has border */
    border-radius: 6px;
    -o-object-fit: contain;
       object-fit: contain;
}

.rj-sticky-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.rj-sticky-text strong {
    color: #222;
    font-size: 13px;
    /* Reduced to 13px for better fit */
    margin-bottom: 2px;
}

.rj-sticky-text span {
    color: #666;
    font-size: 12px;
}

/* Container for actions - Nudge button down */
.rj-sticky-actions {
    margin-top: 6px;
    /* Lower the button to center visually */
    flex-shrink: 0;
}



/* Sticky Bar Button Resize */
.rj-sticky-actions a,
.rj-sticky-actions button,
.rj-sticky-actions .job_application_link,
.rj-sticky-actions .theme-btn {
    padding: 8px 20px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: normal !important;
    border-radius: 20px !important;
    min-width: auto !important;
}

/* Company Section (Bottom) */
.rj-company-section-bottom {
    margin-top: 40px;
    padding-top: 30px;
    border-bottom: 1px solid #eee;
}

.rj-cs-content {
    display: flex;
    gap: 20px;
    align-items: center;
    background: #fcfcfc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #f5f5f5;
}

.rj-cs-logo {
    position: relative;
    display: inline-block;
}

/* Force CS logo wrapper to be compact and tight */
.rj-cs-logo .employer-logo {
    width: 60px;
    height: 60px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
}

.rj-cs-logo img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    /* Wrapper has border */
    border-radius: 8px;
    -o-object-fit: contain;
       object-fit: contain;
}

.rj-cs-info h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.rj-company-link {
    color: #ff0055;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Related Jobs */
.rj-section-title-outer {
    margin: 40px 0 20px;
    font-size: 22px;
    font-weight: 700;
}

.rj-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.rj-related-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rj-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rj-rel-logo img {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
}

.rj-rel-content h5 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.rj-rel-content h5 a {
    color: #333;
    text-decoration: none;
}

.rj-rel-salary {
    color: #166534;
    font-size: 13px;
    font-weight: 500;
    background: #f0fdf4;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

.rj-rel-loc {
    color: #888;
    font-size: 12px;
}

/* Refined Shadows & Fonts 1:1 */
.rj-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    /* Softer, larger spread */
    border: none;
    /* ZnajdzPrace usually has very subtle or no border */
}

.rj-job-title {
    font-size: 32px;
    /* Bumped up */
    letter-spacing: -0.5px;
}

.rj-salary-badge {
    /* Ensure only the pill has background, not inner elements */
    background: #e8f5e9;
    margin-bottom: 4px;
}

.rj-rel-loc-small {
    font-size: 12px;
    color: #999;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .rj-content-grid {
        grid-template-columns: 1fr;
    }

    .rj-sidebar {
        order: 2;
        /* Main content first, then sidebar (or reverse if desired) */
    }

    .desktop-only {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
   Final Strict 1:1 Redesign (Sidebar + Tiles + Typography + Refinements)
   ------------------------------------------------------------------------- */

/* Header Typography */
.rj-job-title {
    font-size: 32px !important;
    /* Larger */
    font-weight: 700 !important;
    /* Bold like reference */
    color: #111;
    margin: 10px 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Header Plain Meta Row */
.rj-plain-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #555;
    font-size: 15px;
    margin-bottom: 28px;
    /* More space */
    font-weight: 500;
}

.rj-divider {
    /* Dash Separator */
    width: 8px;
    height: 2px;
    background: #ccc;
    border-radius: 1px;
}

.rj-plain-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #444;
}

.rj-plain-item i {
    color: #666;
    font-size: 18px;
}

/* Override theme icons if needed */
.rj-plain-item a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
}

/* Metadata Tiles Grid */
.rj-tiles-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* Wider gap like reference */
}

/* General Tile Style - Big White Cards */
.rj-tile {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    /* Space between icon and text */
    background: #fff !important;
    border: 1px solid #eef0f2 !important;
    /* Very subtle border */
    padding: 16px 24px !important;
    /* Big padding */
    border-radius: 16px !important;
    /* Rounded corners */
    font-size: 16px;
    /* Larger text */
    color: #111;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    /* Soft floaty shadow */
    min-height: 60px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rj-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Slightly more distinct on hover */
}

/* Icon Basestyling */
.rj-tile i {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* COLOR VARIANTS FOR ICONS (Applied via PHP helper classes) */

/* Type / Suitcase -> Orange */
.rj-icon-orange i {
    color: #f97316 !important;
}

/* Contract / Document -> Pink */
.rj-icon-pink i {
    color: #d946ef !important;
}

/* Level / Cap -> Green */
.rj-icon-green i {
    color: #22c55e !important;
}

/* Location / Pin -> Blue */
.rj-icon-blue i {
    color: #3b82f6 !important;
}

/* Salary -> Green Text (Special) */
.rj-tile-salary {
    background: #ecfdf5 !important;
    color: #15803d !important;
    border-color: #bef264 !important;
}

/* Hide Labels logic if needed (e.g. .rj-label-text { display: none; }) */
.rj-label-text {
    font-weight: 400;
    color: #666;
    margin-right: 4px;
    display: none !important;
    /* Hiding labels like "Doświadczenie:" to match "Icon + Value" look */
}

/* Sidebar Layout & Cards */
.rj-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Notification Box (Blue) */
.rj-apply-notification {
    background: #f0fdfa;
    /* Light Cyan/Blue */
    background: #eef2ff;
    /* Light Indigo, closer to screen 1 */
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

.rj-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #3730a3;
    /* Darker Indigo */
    font-size: 16px;
}

.rj-notif-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #6366f1;
}

.rj-notif-body {
    font-size: 14px;
    line-height: 1.5;
    color: #4338ca;
}

/* Apply Card */
.rj-apply-card {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.rj-apply-wrapper .btn-apply {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
}

/* Sidebar Related Jobs */
.rj-related-section-sidebar {
    background: transparent;
}

.rj-related-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rj-related-item {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 12px;
    transition: transform 0.2s;
}

.rj-related-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.rj-rel-logo-small img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    -o-object-fit: contain;
       object-fit: contain;
    border: 1px solid #f5f5f5;
}

.rj-rel-content-small {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rj-rel-content-small h6 {
    margin: 0 0 6px 0;
    font-size: 14px;
    line-height: 1.3;
}

.rj-rel-content-small h6 a {
    color: #333;
    text-decoration: none;
}

.rj-rel-salary-small {
    font-size: 12px;
    color: #166534;
    font-weight: 600;
    background: #f0fdf4;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start;
    margin-bottom: 4px;
}

.rj-rel-loc-small {
    font-size: 12px;
    color: #999;
}

/* Sticky Bottom Bar (Initially Hidden) */
/* Sticky Bottom Bar (Floating Style) */
.rj-sticky-bar {
    position: fixed;
    bottom: 20px;
    /* Floating above bottom */
    /* Left/Width handled by JS */
    background: #fff;
    /* White card */
    padding: 15px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    /* Strong shadow */
    border-radius: 16px;
    /* Rounded corners like clouds */

    transform: translateY(150%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
}

.rj-sticky-bar.rj-visible {
    transform: translateY(0);
}

.rj-sticky-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rj-sticky-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rj-sticky-logo img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    -o-object-fit: contain;
       object-fit: contain;
    border: 1px solid #f0f0f0;
}

.rj-sticky-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.rj-sticky-text strong {
    color: #222;
    font-size: 16px;
    margin-bottom: 2px;
}

.rj-sticky-text span {
    color: #666;
}

/* Card Shadow/Border refinements */
.rj-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border: none;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .rj-content-grid {
        grid-template-columns: 1fr;
    }

    .rj-sidebar {
        order: 2;
        /* Sidebar below content on mobile */
    }

    .desktop-only {
        display: none !important;
    }

    /* On mobile, sticky bar might be always visible or same logic */
}

/* -------------------------------------------------------------------------
   USER REFINEMENTS (Font, Size, Full Width Tiles, Mobile)
   ------------------------------------------------------------------------- */

/* 1. Global Font Override for this section */
/* Poppins font loaded locally via fonts.css - removed Google Fonts import for LCP optimization */

.rj-job-wrapper,
.rj-job-wrapper * {
    font-family: 'Poppins', sans-serif !important;
}

/* 2. Decrease Title Size */
.rj-job-title {
    font-size: 26px !important;
    /* Reduced from 32px */
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}

/* 3. Full Width Tiles (Grid Layout) */
/* Override flex to grid for perfect filling of space */
.rj-tiles-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}

.rj-tile {
    display: flex !important;
    justify-content: flex-start;
    /* Icon on left, text next to it */
    width: 100%;
    margin: 0 !important;
    /* Remove any flex margins */
    box-sizing: border-box;
}

/* 4. Mobile Fixes */
@media (max-width: 768px) {

    /* Stack Header */
    .rj-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rj-company-logo {
        margin-bottom: 5px;
    }

    .rj-header-main {
        width: 100%;
    }

    /* Adjust Meta Row for mobile */
    .rj-plain-meta-row {
        flex-direction: column;
        /* Stack meta items on very small screens? Or just wrap. */
        align-items: flex-start;
        gap: 8px;
    }

    .rj-divider {
        display: none;
        /* Hide dividers if stacking vertically */
    }

    /* Tiles: 1 column on mobile or 2? auto-fit should handle it, but allow 100% */
    .rj-tiles-wrapper {
        grid-template-columns: 1fr;
        /* Full width tiles on mobile */
    }

    /* 5. Tile Labels & Values Structure (FORCED) */
    .rj-tile-content {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.2;
        text-align: left;
        justify-content: center;
    }

    .rj-tile-label {
        display: block !important;
        font-size: 10px !important;
        /* Tiny font */
        color: #888 !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        margin-bottom: 3px !important;
        letter-spacing: 0.5px;
        line-height: 1 !important;
    }

    .rj-tile-value {
        display: block !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #111 !important;
    }

    /* Update general tile alignment */
    .rj-tile {
        align-items: center !important;
        /* Center icon vertically with content block */
        gap: 12px !important;
        padding: 12px 20px !important;
        /* Adjust padding if needed */
    }

    .rj-tile i {
        /* Push icon up slightly if needed? No, centered is better usually. */
        align-self: center;
    }

    /* Header Actions (Apply button) */
    .rj-header-actions {
        width: 100%;
        text-align: center;
    }

    .rj-header-actions .btn-apply {
        width: 100%;
        display: block;
    }
}

/* -------------------------------------------------------------------------
   Apply Fast Card (ZnajdzPrace Clone)
   ------------------------------------------------------------------------- */
.rj-apply-fast-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 30px;
}

/* Header */
.rj-af-header {
    background: #f0f4ff;
    /* Light indigo/blue background */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.rj-af-header-content strong {
    display: block;
    color: #4f46e5;
    /* Indigo */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.rj-af-header-content p {
    color: #5d65f6;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.rj-af-close {
    color: #818cf8;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
}

.rj-af-close:hover {
    color: #4f46e5;
}

/* Body */
.rj-af-body {
    padding: 24px;
}

.rj-af-salary-section {
    margin-bottom: 24px;
}

.rj-af-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    font-weight: 500;
}

.rj-af-salary-value,
.rj-af-salary-value * {
    /* Override any internal theme styling for salary html */
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 4px;
    line-height: 1.2;
    font-style: normal !important;
}

.rj-af-salary-sub {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    /* Gray subtext */
}

/* Actions Area */
.rj-af-actions {
    margin-bottom: 24px;
}

.rj-apply-wrapper-full .btn-apply,
.rj-apply-wrapper-full a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #74D6CE 0%, #4DB6AC 100%) !important;
    /* Elegant teal gradient */
    color: white !important;
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(77, 182, 172, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}

.rj-apply-wrapper-full .btn-apply:hover,
.rj-apply-wrapper-full a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 85, 0.35);
}

/* Progress Bar Decoration */
.rj-af-progress-container {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    margin-top: 20px;
    width: 100%;
    overflow: hidden;
}

.rj-af-progress-bar {
    width: 65%;
    /* Arbitrary visual value */
    background: linear-gradient(135deg, #74D6CE 0%, #4DB6AC 100%) !important;
    /* Elegant teal gradient */
    height: 100%;
    border-radius: 3px;
}

.rj-af-expires {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    display: block;
    visibility: visible;
    min-height: 20px;
}

/* Footer Actions */
.rj-af-footer {
    display: flex;
    padding-top: 20px;
    /* margin-top: 20px; Remove top margin as used in body padding/spacing logic */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rj-af-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

.rj-af-action-btn:hover {
    color: #000;
}

.rj-af-action-btn i {
    font-size: 20px;
    color: #444;
}

/* Bookmark overrides for the WP Job Manager button structure */
.rj-af-action-btn .btn-action-job,
.rj-af-action-btn a.btn-action-job {
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center;
}

.rj-af-action-btn .btn-action-job i,
.rj-af-action-btn a.btn-action-job i {
    font-size: 20px;
    /* Scaled up heart/bookmark */
    color: #444;
    transition: color 0.2s;
    margin: 0 !important;
    /* Reset any margins */
}

.rj-af-action-btn .btn-action-job:hover i {
    color: #ff0055;
}

.rj-af-action-btn .btn-action-job.added i {
    color: #ff0055;
    font-weight: 900;
    /* Solid heart */
}

/* Share Icon */
.rj-share-btn i {
    font-size: 22px;
}

/* Section Cards Spacing */
.rj-section-card {
    margin-bottom: 24px;
}

.rj-section-title i {
    margin-right: 8px;
    color: #4DB6AC;
    /* Teal to match the theme */
    font-size: 20px;
    vertical-align: middle;
}

/* Employer Link in "O pracodawcy" Card */
.rj-company-link {
    color: #4DB6AC;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    transition: color 0.2s;
}

.rj-company-link:hover {
    color: #00897B;
    /* Darker teal on hover */
    text-decoration: underline;
}

/* Header Company Link */
.rj-header-company-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.rj-header-company-sublink {
    font-size: 12px;
    color: #4DB6AC;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.rj-header-company-sublink:hover {
    text-decoration: underline;
}

/* Employer Description Snippet */
.rj-employer-desc-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Share Tooltip & Sticky Sidebar
   ------------------------------------------------------------------------- */

.rj-share-btn {
    position: relative;
    cursor: pointer;
}

.rj-share-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    margin-bottom: 15px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 100;
}

.rj-share-tooltip.rj-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.rj-share-header {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    padding: 5px 15px;
    text-transform: uppercase;
}

.rj-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.rj-share-item:hover {
    background: #f5f5f5;
    color: #ff0055;
}

.rj-share-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #666;
}

/* Sticky Related Sidebar */
.rj-related-section-sidebar {
    position: sticky;
    top: 20px;
}

/* -------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------- */
.rj-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.rj-breadcrumb-item a {
    color: #666;
    text-decoration: none;
    transition: color 0.1s;
}

.rj-breadcrumb-item a:hover {
    color: #ff0055;
    text-decoration: underline;
}

.rj-breadcrumb-separator {
    color: #ccc;
    font-size: 11px;
}

.rj-breadcrumb-item.rj-current {
    color: #333;
    font-weight: 400;
}

/* Hide Duplicate Headers in Gallery/Video Template Parts */
.rj-section-card .job-detail-portfolio .title,
.rj-section-card .job-detail-video .title {
    display: none !important;
}

/* Disclaimer Font Size */
.rj-section-card .rj-description-text {
    font-size: 14px;
    /* Default */
}

.rj-section-card .rj-description-text p {
    font-size: 14px;
}

/* Smaller RODO text */
.rj-section-card.rj-rodo-card .rj-description-text,
.rj-section-card.rj-rodo-card .rj-description-text p {
    font-size: 12px !important;
    line-height: 1.5;
    color: #666;
}

/* Job Badges (Refined) */
.rj-badge {
    display: inline-block;
    padding: 3px 8px;
    /* Reduced padding ~30% */
    border-radius: 10px;
    /* Match logo label shape */
    font-size: 10px;
    /* Reduced font size ~20% */
    font-weight: 700;
    margin-left: 10px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* Badges - Premium Styling */
.rj-badge-gold {
    background: linear-gradient(135deg, #FFEB3B 0%, #FFC107 100%);
    /* Vibrant Gold Gradient */
    color: #222;
    /* Darker text for contrast on gold */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    /* Elegant outer glow */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Inner shine/border */
    backdrop-filter: blur(4px);
    /* Modern touch */
}

.rj-badge-violet {
    background: linear-gradient(135deg, #9c4dcc 0%, #6a1b9a 100%);
    /* Rich Violet Gradient */
    color: #fff;
    box-shadow: 0 4px 15px rgba(106, 27, 154, 0.4);
    /* Elegant outer glow */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Inner shine/border */
}

/* Logo Highlight (Super Oferta) */
.rj-company-logo {
    position: relative;
    /* Anchor for absolute label */
    display: inline-block;
    margin-bottom: 5px;
    /* Add slight margin for the label */
}

.rj-logo-highlight-gold .employer-logo {
    border: 2px solid #FFD700;
    /* Thin gold border */
    border-radius: 8px;
    /* Soft rounding */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    /* Radiating glow */
    transition: all 0.3s ease;
}

.rj-logo-highlight-gold .employer-logo img {
    border-radius: 6px;
    /* Match inner radius */
}

/* Super Oferta Label on Logo */
.rj-logo-label {
    position: absolute;
    bottom: -10px !important;
    /* Pulled up closer to logo */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    /* Gold Gradient */
    color: #222;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

@media (max-width: 768px) {
    .rj-badge {
        margin-left: 0;
        margin-top: 5px;
        margin-right: 10px;
    }
}

/* --- Mobile Redesign (Max Width 768px) --- */
@media (max-width: 768px) {

    /* 1. Mobile Header Layout */
    .rj-header-top {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .rj-company-logo {
        width: 80px !important;
        height: 80px !important;
        margin-right: 0 !important;
    }

    .rj-header-main {
        width: 100% !important;
        min-width: 0 !important;
        /* Fix grid overflow */
    }

    .rj-job-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    /* Meta Row (Location/Company) */
    .rj-plain-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .rj-divider {
        display: none !important;
    }

    /* 2. Tiles Grid (3 Columns) */
    .rj-tiles-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* General Tile Styling (Compact) */
    .rj-tile {
        padding: 8px 6px !important;
        border-radius: 12px !important;
        width: auto !important;
        margin: 0 !important;
        min-width: 0 !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .rj-tile i {
        font-size: 16px !important;
        /* Keep icons visible but not huge */
        margin-bottom: 4px !important;
        margin-right: 0 !important;
    }

    .rj-tile-content {
        align-items: center !important;
        text-align: center !important;
    }

    .rj-tile-label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .rj-tile-value {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        /* Allow wrap */
        word-break: break-word !important;
    }

    /* 3. Salary Tile (Full Width & Prominent) */
    .rj-tile-salary {
        grid-column: 1 / -1 !important;
        /* Span all columns */
        order: 99 !important;
        /* Move to bottom */
        display: flex !important;
        flex-direction: row !important;
        /* Horizontal layout */
        align-items: center !important;
        justify-content: flex-start !important;
        /* Left align content */
        text-align: left !important;
        padding: 16px 20px !important;
        background: #ecfdf5 !important;
        border: 1px solid #bef264 !important;
        border-radius: 20px !important;
        /* Match screenshot card style */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    .rj-tile-salary i {
        font-size: 24px !important;
        margin-right: 15px !important;
        margin-bottom: 0 !important;
        color: #27ae60 !important;
        /* Green icon */
    }

    .rj-tile-salary .rj-tile-content {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .rj-tile-salary .rj-tile-label {
        font-size: 11px !important;
        color: #888 !important;
        margin-bottom: 4px !important;
    }

    .rj-tile-salary .rj-tile-value {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #222 !important;
    }
}

/* --- Phase 2 Header Refactor Styles --- */

/* 0. Breadcrumbs (New Wrapper) */
.rj-breadcrumbs-wrapper {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.rj-breadcrumbs-wrapper .rj-breadcrumbs {
    padding: 0;
    margin: 0;
}

/* 1. Desktop Layout Restoration */
/* Ensure header main flows correctly with new containers */
@media (min-width: 769px) {
    .rj-header-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    /* Row 1: Title (Default block is fine) */

    /* Row 2: Meta Group (Company | Location | Category | Badges) */
    /* We need to fake a single row for these separate divs */
    /* Or we display them as flex lines */

    .rj-company-row,
    .rj-meta-row,
    .rj-badges-row {
        display: inline-flex;
        /* Sit next to each other? No, header main is col. */
        align-items: center;
    }

    /* To achieve the "Single Line Meta" look on desktop, we might need to wrap them 
      or use a specific flex-wrap behavior on the container if we wanted them all in one line.
      Given the structure changed, let's stack them cleanly or try to float?
      
      Actually, standard Desktop design has Company | Location... 
      Let's set rj-header-main to row wrap? No, title needs its own line.
      
      Solution:
      Title { width: 100% }
      Company, Meta, Badges { display: inline-flex; vertical-align: middle; margin-right: 15px; }
   */

    .rj-header-main {
        display: block;
        /* Let elements flow */
    }

    .rj-company-row {
        display: inline-flex;
        align-items: center;
        /* margin-right: 15px; Removed */
        /* border-right: 1px solid #ddd; Removed per user request */
        /* padding-right: 15px; Removed */
        margin-bottom: 10px;
    }

    .rj-company-info-col {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-right: 20px;
    }

    .rj-meta-row {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        margin-right: 15px;
        margin-bottom: 10px;
    }

    .rj-badges-row {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .rj-company-name-link {
        font-weight: 700;
        color: #333;
        text-decoration: none;
        margin-right: 5px;
    }

    .rj-company-profile-link {
        font-size: 11px;
        color: #888;
        text-decoration: underline;
    }
}

/* 2. Mobile Layout Refinement (Phase 2) */
@media (max-width: 768px) {

    /* Grid System using display: contents */
    .rj-header-top {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        -moz-column-gap: 16px !important;
             column-gap: 16px !important;
        row-gap: 8px !important;
        align-items: start !important;
        margin-bottom: 20px !important;
    }

    .rj-header-main {
        display: contents !important;
        /* Ungroup children to be grid items */
    }

    /* 1. Logo (Col 1, Row 1-2) */
    .rj-company-logo {
        grid-column: 1;
        grid-row: 1 / span 2;
        /* Span height of Title + Company */
        margin: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }

    /* 2. Title (Col 2, Row 1) */
    .rj-job-title {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px !important;
        /* Reduced font size */
        line-height: 1.2 !important;
        margin: 0 !important;
        align-self: end;
    }

    /* 3. Company (Col 2, Row 2) */
    .rj-company-row {
        grid-column: 2;
        grid-row: 2;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        align-self: start;
        padding: 0 !important;
        border: none !important;
    }

    .rj-company-name-link {
        font-size: 13px !important;
        /* Reduced */
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        color: #000 !important;
    }

    .rj-company-profile-link {
        font-size: 10px !important;
        color: #999 !important;
    }

    /* 4. Meta Row (Col 1-2, Row 3) - Full Width */
    .rj-meta-row {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 5px !important;
        font-size: 12px !important;
        color: #666 !important;
    }

    .rj-meta-item i {
        font-size: 12px !important;
        color: #999 !important;
        margin-right: 4px !important;
    }

    /* 5. Badges Row (Col 1-2, Row 4) - Full Width */
    .rj-badges-row {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 5px !important;
    }

    /* Reduce Badge Size slightly for mobile */
    .rj-badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    /* 6. Tiles Grid (2 Columns, Smaller Fonts) */
    .rj-tiles-wrapper {
        grid-column: 1 / -1;
        /* grid-row: 5; implied order */
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 Columns */
        gap: 8px !important;
    }

    .rj-tile-value {
        font-size: 11px !important;
    }

    /* Ensure Salary stays at bottom */
    .rj-tile-salary {
        order: 99 !important;
    }
}

/* --- Phase 3 Final Refinements --- */

/* 1. Badges Size Increase */
.rj-badge {
    font-size: 11px !important;
    /* Base was ~9-10px in mobile, 11-12 desktop. Increasing. */
    padding: 5px 10px !important;
    /* transform: scale(1.2); might cause blur, font-size is better */
}

/* 2. Sticky Bar Simplification (Full Width Button Check) */
/* 2. Sticky Bar Simplification (MOBILE ONLY: Full Width Button, Hide Info) */
@media (max-width: 768px) {
    .rj-sticky-bar {
        top: auto !important;
        bottom: 20px !important;
        /* Mobile Floating: Screen Relative with Margin */
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        z-index: 1 !important;

        transition: transform 0.3s ease !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .rj-sticky-info {
        display: none !important;
    }

    .rj-sticky-actions {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        flex: 1 !important;
    }

    .rj-sticky-actions a,
    .rj-sticky-actions button,
    .rj-sticky-actions .job_application_link,
    .rj-sticky-actions .theme-btn {
        width: 100% !important;
        max-width: none !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }
}

/* 3. Sticky Bar Restoration (DESKTOP) */
/* 3. Sticky Bar Restoration (DESKTOP) */
@media (min-width: 769px) {

    /* Sticky bar aligned with main content column (not full container) */
    /* Grid: 2fr 1fr with 30px gap on 1140px container */
    /* Main content width: ~740px, Sidebar: ~370px */
    /* Offset from center: (sidebar + gap) / 2 = 200px left */
    .rj-sticky-bar {
        position: fixed !important;
        bottom: 20px !important;

        left: 50% !important;
        /* Default: Hidden (Down + Shifted Left to align with main content) */
        transform: translate(calc(-51.8% - 200px), 200%) !important;
        opacity: 0 !important;
        transition: all 0.4s ease !important;

        width: 100% !important;
        max-width: 682px !important;
        /* Main content column width adjusted to match rj-card visually */

        padding: 12px 24px !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        border-radius: 12px !important;
    }

    .rj-sticky-bar.rj-visible {
        /* Visible: Shifted left to align with main content column */
        transform: translate(calc(-51.8% - 200px), 0) !important;
        opacity: 1 !important;
    }

    /* FIX: Force sticky info visible on desktop (overrides legacy desktop-only hide rule at line 2587) */
    .rj-sticky-bar .rj-sticky-info.desktop-only {
        display: flex !important;
        align-items: center;
        gap: 15px;
    }
}

/* 3. Mobile Redundancy */
@media (max-width: 768px) {
    #rj-sidebar-apply-box {
        display: none !important;
        /* Hide the sidebar Apply Box on mobile */
    }
}

/* 4. Employer Section Refinement */
.rj-cs-content-split {
    display: flex;
    flex-direction: column;
}

.rj-cs-row-top h4 {
    margin: 0;
    line-height: 1.2;
    color: #333;
}

.rj-cs-row-bottom .rj-company-link.full-width-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f5f7fa;
    border: 1px solid #e1e4e8;
    padding: 10px;
    border-radius: 8px;
    color: #555;
    font-weight: 600;
    transition: all 0.2s;
}

.rj-cs-row-bottom .rj-company-link.full-width-btn:hover {
    background: #eef1f5;
    color: #333;
}

/* --- Bug Fixes & Improvements --- */

/* 1. Floating Sticky Bar */
.rj-sticky-bar {
    bottom: 20px !important;
    /* Lift off the bottom */
    width: auto !important;
    /* Will be overridden by inline styles from JS sync, but good default */
    border-radius: 12px !important;
    /* Floating look */
    /* Add subtle shadow for floating effect */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure JS sync respects the lift? 
   No, JS sets 'left' and 'width'. 'bottom' is CSS handled. 
   So if JS sets width equal to content column, it will look like a floating bar inside that column area. 
   Perfect. 
*/

/* 2. Employer Section - Ensure gap (handled in PHP inline, but double safe) */
.rj-cs-row-top {
    margin-bottom: 12px;
}

/* Global Sticky overrides removed - handled in specific media queries above */

/* 2. Enforce Employer Section Gap */
.rj-cs-row-top {
    margin-bottom: 24px !important;
    /* Increased to be very visible */
}

/* Extra Polish for Sidebar Hide on Mobile */
@media (max-width: 768px) {
    #rj-sidebar-apply-box {
        display: none !important;
    }
}

/* --- MOBILE/DESKTOP SEPARATION UTILITIES --- */
@media (max-width: 768px) {
    .rj-desktop-only {
        display: none !important;
    }

    /* Mobile Header Layout */
    body .rj-mobile-header-block {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .rj-mobile-company-row {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Meta Row: Standard Flex Flow */
    .rj-mobile-meta-row {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 12px;
        color: #666;
        margin-bottom: 1px;
    }

    /* Pills: Natural Size */
    .rj-meta-pill {
        background: #f4f5f7;
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 13px;
        color: #555;
        display: inline-flex !important;
        width: auto !important;
        max-width: -moz-fit-content !important;
        max-width: fit-content !important;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        /* Prevent internal breaking */
    }

    .rj-meta-pill i {
        display: inline-block;
        font-size: 14px;
        line-height: 1;
    }

    /* Badges Row: Standard Flex Flow */
    .rj-mobile-badges-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* BADGES: Natural Size */
    .rj-mobile-badges-row .rj-badge {
        display: inline-flex !important;
        width: auto !important;
        max-width: -moz-fit-content !important;
        max-width: fit-content !important;
    }
}

@media (min-width: 769px) {
    .rj-mobile-only {
        display: none !important;
    }
}

/* Fix for FontAwesome Social Icons in Share Tooltip */
.fab {
    font-family: "Font Awesome 5 Brands", sans-serif !important;
}

.fas,
.fa {
    font-family: "Font Awesome 5 Free", sans-serif !important;
    font-weight: 900 !important;
}

/* Ensure icons have correct size and color in the tooltip */
.rj-share-tooltip .rj-share-item i {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 8px;
    color: inherit;
}

/* ========================================= */
/* JOB LISTING MOBILE REDESIGN (Responsive)  */
/* ========================================= */

/* View Toggles */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* Ensure containers take full width */
    .jobs-wrapper .item-job {
        width: 100% !important;
        padding: 0 10px !important;
    }
}

/* Mobile Card Styling */
/* Mobile Card Styling */
.rj-mobile-card {
    background: #fff !important;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px !important;
    /* Increased margin for protruding badges */
    padding-top: 20px !important;
    /* Little more space inside top */
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f1f1f1 !important;
    display: flex !important;
    /* Force flex to override .mobile-only block !important */
    flex-direction: column !important;
    overflow: visible !important;
    /* Ensure background wraps everything */
}

.rj-mobile-overlay-link {
    /* Make link cover everything but sit below interactive elements if needed, 
       but for full clickable card it should be high z-index except buttons */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Lower z-index so buttons (z-index 20) are clickable */
}

/* Top Section: Logo + Content */
.rj-mobile-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Explicit gap between Logo and Content */
    margin-bottom: 12px;
    padding-right: 0;
    z-index: 2;
    /* Content above link */
}

/* Logo */
.rj-mobile-logo .employer-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-sizing: border-box;
}

.rj-mobile-logo {
    flex: 0 0 48px;
    /* Fixed width, do not shrink or grow */
    margin: 0;
    /* Gap handles spacing now */
}



.rj-mobile-logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Content: Title & Salary */
.rj-mobile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px !important;
    /* User requested 4px */
    margin-top: 5px !important;
    /* User requested 5px */
    min-width: 0;
    /* Fix for flex child truncation */
    align-items: flex-start !important;
    /* Fix: Prevent salary tag from stretching full width */
}

/* Salary Styling - Green Tag */
.rj-mobile-salary,
.rj-mobile-salary .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a7f45 !important;
    /* Dark Green */
    background-color: rgba(30, 190, 115, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    /* Wrap tight */
    margin-top: 2px;
}

/* Hide unwanted 'zl' suffix */
.rj-mobile-card .suffix,
.job-list.default .price .suffix {
    display: none !important;
}

/* User requested fix for heart icon centering */
.job-list.default .btn-follow {
    top: 3px !important;
    right: 1px !important;
}

.rj-mobile-title {
    font-size: 15px !important;
    /* Smaller font */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #111;
}

.rj-mobile-title a {
    color: inherit;
    text-decoration: none;
}

.rj-mobile-salary {
    font-size: 13px !important;
    color: #166534;
    /* Green */
    font-weight: 600;
}

/* Badges: Top Right Absolute */
.rj-mobile-badges {
    position: absolute;
    top: -32px !important;
    /* -20px padding - 12px overhang */
    right: -28px !important;
    /* -16px padding - 12px overhang */
    display: flex;
    align-items: center;
    gap: 6px !important;
    z-index: 20;
    padding-right: 0;
}

.rj-badge {
    font-size: 9px !important;
    /* Reduced size (~10%) */
    padding: 4px 8px !important;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    /* Stronger shadow for floating effect */
    background-size: 200% auto;
    transition: 0.5s;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    height: 22px;
    /* Fixed height for alignment */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.rj-badge-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    color: #333 !important;
}

.rj-badge-violet {
    background: linear-gradient(135deg, #BE22FF 0%, #aa00ff 100%) !important;
    color: #fff !important;
}

/* Favorite Icon Wrapper (New) */
.rj-mobile-favorite-wrapper {
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    /* Circular white background */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;

    /* Absolute Positioning Top Left */
    position: absolute;
    top: 12px !important;
    /* Move INSIDE the card */
    left: 12px !important;
    /* Move INSIDE the card */
    z-index: 21;
    /* Higher than badges, or same */
}

.rj-mobile-favorite-wrapper .bookmark-btn {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.rj-mobile-favorite-wrapper .bookmark-btn:before {
    font-size: 14px !important;
    color: #666;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
    transform: translateY(-2px) !important;
    /* Move UP to center */
}

.rj-mobile-favorite-wrapper .bookmark-btn.active:before {
    color: #ff4757;
}



/* Meta Row: Company & Location */
.rj-mobile-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.rj-mobile-company-name,
.rj-mobile-location {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rj-mobile-company-name i,
.rj-mobile-location i {
    font-size: 14px;
    color: #999;
}

.rj-mobile-company-name a {
    color: #555;
    font-weight: 500;
    text-decoration: none;
}

/* Bottom Row: Tags & Expiry */
.rj-mobile-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.rj-mobile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rj-mobile-tags span,
.rj-mobile-tags a {
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.rj-mobile-expiry {
    font-size: 11px;
    color: #999;
}


/* ========================================= */
/* MOBILE REDESIGN - VISUAL REFINEMENTS      */
/* ========================================= */

/* Remove default job item background/border in mobile wrapper */
/* (Resetting potential theme defaults that bleed into our custom card) */
@media (max-width: 768px) {
    .jobs-wrapper .item-job {
        background: transparent !important;
        border: none !important;
        padding: 0 5px !important;
        /* Slight padding buffer */
        margin-bottom: 0 !important;
    }

    .job-list,
    .job-block,
    .inner-box {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Ensure our card handles the visual container */
    .rj-mobile-card {
        background: #fff !important;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #f1f1f1 !important;
        /* Clean subtle border */
        margin-bottom: 12px !important;
    }
}

/* Updated Badge Styles (Shiny/Gradient) */
.rj-mobile-badges {
    top: -12px !important;
    /* Move higher as requested */
    right: 8px !important;
    gap: 5px !important;
}

.rj-badge {
    font-size: 9px !important;
    /* Reduced size (~10%) */
    padding: 3px 8px !important;
    border-radius: 8px !important;
    /* Fixed: User requested 8px */
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    background-size: 200% auto;
    transition: 0.5s;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Super Oferta - Gold Gradient */
.rj-badge-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    color: #333 !important;
}

/* Wyróżnione - Violet Gradient */
.rj-badge-violet {
    background: linear-gradient(135deg, #BE22FF 0%, #aa00ff 100%) !important;
    color: #fff !important;
}

/* Shiny Effect Animation */
.rj-badge:hover {
    background-position: right center;
    /* change the direction of the change here */
}

/* Typography Refinements */
.rj-mobile-title {
    font-size: 14px !important;
    /* Slightly smaller */
    line-height: 1.35 !important;
}

/* User requested fix for heart icon centering */
.job-list.default .btn-follow {
    top: 3px !important;
    right: 1px !important;
}

/* ========================================= */
/* DESKTOP REDESIGN (Filters & Cards)        */
/* ========================================= */

@media (min-width: 992px) {

    /* 1. Sidebar Layout & Visibility */
    .sidebar-job-filters {
        display: block !important;
    }

    .filter-sidebar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        transition: none !important;
    }

    .over-dark,
    .close-sidebar-btn,
    .mobile-sidebar-btn {
        display: none !important;
    }

    /* 2. Filter Styling (Cloud/Bubble Look) */
    .widget-job-search-form {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Style titles */
    .widget-job-search-form .widget-title {
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        /* Soft shadow */
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }

    /* Force Advanced Search to be Static/Open */
    .advance-search-wrapper {
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .advance-search-btn,
    .advance-link {
        display: none !important;
    }

    /* Target specific form groups to make them bubbles */
    .widget-job-search-form .form-group {
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 15px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #f1f1f1;
    }

    /* Remove default container styles that might conflict */
    .filter-listing-form {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    .filter-listing-form .main-inner,
    .filter-listing-form .content-main-inner {
        padding: 0 !important;
        border: none !important;
    }

    /* Hide the main submit button if user wants instant search, 
       OR style it to be a separate bubble at the bottom. 
       For now, let's keep it but inside a bubble if it exists. */
    .wrapper-submit {
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        width: 100%;
        display: block;
        /* Stack it */
    }

    /* 3. Desktop Card Layout (using Mobile Structure) */
    .rj-desktop-card-view,
    .rj-mobile-card {
        display: flex !important;
        /* Force visible */
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Show desktop-only elements on desktop */
    .desktop-only,
    .rj-desktop-only {
        display: block !important;
    }

    .rj-header-top.rj-desktop-only {
        display: flex !important;
    }

    /* Adjust Card Content for Desktop Width */
    .rj-mobile-content {
        flex-direction: column !important;
        /* Keep column layout */
        align-items: flex-start !important;
    }

    /* Ensure Meta Row (Company, Location) flows well */
    .rj-mobile-meta-row {
        justify-content: flex-start !important;
    }

    /* Adjust Badges Position for wider screen */
    .rj-mobile-badges {
        position: absolute !important;
        top: 20px !important;
        /* Align with top padding */
        right: 20px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
}

/* REFINEMENT: Force Vertical Stacking in Sidebar */
@media (min-width: 992px) {

    .sidebar-job-filters .widget-job-search-form .form-group,
    .sidebar-job-filters .widget-job-search-form .search-field-wrapper {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    .sidebar-job-filters .widget-job-search-form {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure row inside widget doesn't mess up */
    .sidebar-job-filters .widget-job-search-form .row {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar-job-filters .widget-job-search-form .row>div {
        width: 100% !important;
        padding: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* DEBUG: Visualize Layout Columns */
/* .sidebar-job-filters { border: 2px solid red !important; } */
/* #main-content { border: 2px solid blue !important; } */


/* -------------------------------------------------------------------------
   Mobile Top Search Bar (Restored)
   ------------------------------------------------------------------------- */
.mobile-top-search-bar-wrapper {
    margin-bottom: 20px;
    padding: 0 15px;
}

.mobile-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    padding: 8px 8px 8px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.mobile-search-icon {
    font-size: 18px;
    color: #333;
    margin-right: 10px;
    flex-shrink: 0;
}

.mobile-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
    color: #333;
    padding: 0 !important;
    height: auto !important;
    font-weight: 500;
}

.mobile-search-input:focus {
    outline: none;
}

.mobile-search-input::-moz-placeholder {
    color: #999;
}

.mobile-search-input::placeholder {
    color: #999;
}

/* Filter Trigger Button (Circle) */
.mobile-filter-trigger-wrapper {
    margin-left: 10px;
}

.mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ff0055 !important;
    color: #fff !important;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(255, 0, 85, 0.3);
}

.mobile-filter-btn:hover {
    transform: scale(1.05);
}

.mobile-filter-btn i {
    margin: 0;
}

/* Ensure clean layout on mobile */
@media (min-width: 992px) {
    .mobile-top-search-bar-wrapper {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Custom Mobile Filter Sidebar (Restored)
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {

    /* Ensure sidebar takes full width/height properly */
    .offcanvas-filter-sidebar {
        padding: 0;
        background: #fff;
    }

    .mobile-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #eee;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .close-filter-sidebar {
        position: static !important;
        /* Override theme absolute positioning */
        width: auto !important;
        height: auto !important;
        background: none !important;
        color: #333 !important;
        font-size: 24px;
        cursor: pointer;
    }

    .mobile-filter-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #111;
    }

    .mobile-clear-filters {
        color: #ff0055;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        background: #fff0f5;
        padding: 6px 12px;
        border-radius: 20px;
    }

    .mobile-custom-filter-content {
        padding: 20px 0 100px 0;
        /* Bottom padding for sticky button */
    }

    .mobile-field-group {
        position: relative;
        margin-bottom: 16px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 4px 12px;
        display: flex;
        align-items: center;
    }

    .mobile-field-icon {
        font-size: 16px;
        color: #666;
        width: 24px;
        text-align: center;
        margin-right: 8px;
    }

    .mobile-input {
        border: none !important;
        box-shadow: none !important;
        padding: 10px 0 !important;
        height: auto !important;
        font-size: 15px;
        color: #333;
        background: transparent !important;
        width: 100%;
    }

    /* Force select2 container to behave inside our group */
    .mobile-field-group .select2-container {
        width: 100% !important;
        border: none;
    }

    .mobile-field-group .select2-selection--single {
        border: none !important;
        height: auto !important;
        padding: 8px 0;
    }

    .mobile-filter-section {
        margin-top: 24px;
        border-top: 1px solid #f5f5f5;
        padding-top: 20px;
    }

    .mobile-section-title {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 16px;
        cursor: pointer;
    }

    /* Job Type Grid */
    .mobile-job-type-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mobile-checkbox-card {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        cursor: pointer;
    }
}

/* 2. Full Width Mobile Filters Sidebar */
/* Targeting the offcanvas sidebar container */
@media (max-width: 991px) {

    .offcanvas-filter-sidebar,
    div#field-modal-top_search_category_category .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile Top Search - Restored from Backup (2026-01-15)
   ------------------------------------------------------------------------- */

/* 1. Make the search bar slim */
.mobile-top-search-bar-wrapper {
    padding: 5px 10px;
    /* Slimmer padding around */
    background: #fff;
    /* Ensure bg is white */
    z-index: 100040;
    /* High z-index */
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

/* Slimmer Input */
.mobile-top-search-bar-wrapper .form-control.mobile-search-input {
    height: 36px !important;
    /* Reduced from default (usually 45-50px) */
    font-size: 13px !important;
    padding-left: 35px !important;
    /* Space for icon */
}

/* Slimmer Icon */
.mobile-top-search-bar-wrapper .mobile-search-icon {
    font-size: 14px !important;
    line-height: 36px !important;
    /* Center vertically */
    left: 12px !important;
}

/* Slimmer Buttons */
.mobile-filter-trigger-wrapper .mobile-filter-btn {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 14px !important;
    /* Smaller icons */
}


/* 3. Attempt to hide "POKAŻ MENU" (assuming it's the mobile-sidebar-btn or similar) */
/* If the user meant the header hamburger text: */
.page-template-page-jobs .header-mobile .btn-showmenu {
    display: none !important;
}

/* Also hide any element that might be the "Pokaż menu" specific trigger if found */
.page-template-page-jobs .mobile-sidebar-btn {
    display: none !important;
}

/* --- FINAL TWEAKS FOR MOBILE SEARCH BAR --- */

/* 1. Flexbox Layout for Perfect Alignment */
.mobile-search-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative;
}

/* Icon - Far Left */
.mobile-top-search-bar-wrapper .mobile-search-icon {
    position: absolute !important;
    left: 10px !important;
    /* Closer to edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: normal !important;
    z-index: 5;
}

/* Input - Align Text Left, Fill Space */
.mobile-top-search-bar-wrapper .form-control.mobile-search-input {
    text-align: left !important;
    padding-left: 35px !important;
    /* Space for icon */
    padding-right: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* Buttons Wrapper - Far Right */
.mobile-filter-trigger-wrapper {
    margin-left: 0 !important;
    /* Reset */
    margin-right: -5px !important;
    /* Pull closer to right edge of pill if needed */
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Prevention shrinking */
    padding-left: 5px;
    /* Spacing from input */
}


/* --- USER TWEEKS FOR SEARCH BAR LAYOUT --- */

.mobile-filter-trigger-wrapper {
    margin-left: 0 !important;
    margin-right: -35px !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 5px;
}

.mobile-top-search-bar-wrapper .form-control.mobile-search-input {
    text-align: left !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

.mobile-filter-trigger-wrapper .mobile-filter-btn {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: scale(1);
    opacity: 1;
    width: 40px;
    height: 40px;
    margin-left: 1px;
}

/* --- BUGFIX: Restore Submit Button Hiding --- */
/* The user tweak above overwrote the visibility logic. We need to reinforce it. */

/* Default State: Submit Button HIDDEN */
.mobile-filter-trigger-wrapper:not(.search-active) .mobile-search-submit-btn {
    width: 0 !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: scale(0.5) !important;
}

/* Active State: Submit Button VISIBLE */
.mobile-filter-trigger-wrapper.search-active .mobile-search-submit-btn {
    width: 40px !important;
    opacity: 1 !important;
    margin-left: 1px !important;
    /* Match user tweak */
    pointer-events: auto !important;
    transform: scale(1) !important;
}

/* Active State: Filter Buttons HIDDEN */
.mobile-filter-trigger-wrapper.search-active .mobile-category-trigger,
.mobile-filter-trigger-wrapper.search-active .custom-mobile-filter-trigger {
    width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* --- USER FINAL TWEAK --- */
.mobile-filter-trigger-wrapper {
    margin-right: 1px !important;
}

/* ===========================================
   DESKTOP JOB LISTING - Header & Breadcrumbs Fix
   =========================================== */
@media (min-width: 769px) {

    /* Push content below fixed header */
    .rj-job-wrapper {
        padding-top: 80px !important;
    }

    /* Compact Breadcrumbs - closer to logo/title below */
    .rj-breadcrumbs-wrapper {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

}

/* ===========================================
   FORCE Desktop Meta Pills - HIGHEST PRIORITY
   =========================================== */
.rj-job-wrapper .rj-desktop-meta-row .rj-meta-pill,
.rj-job-wrapper .rj-meta-pill.rj-location-item,
.rj-job-wrapper .rj-meta-pill.rj-category-item,
.rj-header-section .rj-meta-pill,
span.rj-meta-pill {
    background: #e8eaed !important;
    background-color: #e8eaed !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #555 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.rj-job-wrapper .rj-meta-pill i,
.rj-header-section .rj-meta-pill i,
span.rj-meta-pill i {
    color: #666 !important;
    font-size: 14px !important;
}

.rj-job-wrapper .rj-meta-pill a,
.rj-header-section .rj-meta-pill a,
span.rj-meta-pill a {
    color: #555 !important;
    text-decoration: none !important;
}

.rj-job-wrapper .rj-meta-pill a:hover,
span.rj-meta-pill a:hover {
    color: #333 !important;
}

/* ===========================================
   MOBILE JOB HEADER CARD - Compact Breadcrumbs
   =========================================== */
@media (max-width: 768px) {

    /* Compact Breadcrumbs */
    .rj-breadcrumbs-wrapper {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    /* Mobile wrapper adjustments */
    .rj-job-wrapper {
        background-color: #f4f6f8 !important;
        padding: 25px 0 !important;
    }

    .rj-job-wrapper,
    .rj-job-wrapper * {
        font-family: 'Poppins', sans-serif !important;
    }

    /* Breadcrumbs - smaller font */
    .rj-breadcrumbs,
    .rj-breadcrumbs * {
        font-size: 10px !important;
    }

    /* RODO card - smaller font (except title) */
    .rj-rodo-card .rj-description-text,
    .rj-rodo-card .rj-description-text * {
        font-size: 10px !important;
    }
}

.rj-job-title {
    font-size: 20px !important;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}

body .rj-tile-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #000;
}

@media (max-width: 768px) {

    .rj-job-wrapper,
    .rj-job-wrapper * {
        font-family: 'Poppins', sans-serif !important;
    }
}

/* =============================================
 * Match Score Banner (Single Job Listing)
 * ============================================= */

.rj-match-banner {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(248, 245, 255, 0.95) 0%, rgba(243, 237, 255, 0.9) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(190, 34, 255, 0.15);
    border-radius: 14px;
    padding: 16px 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}

.rj-match-banner:hover {
    border-color: rgba(190, 34, 255, 0.3);
    box-shadow: 0 4px 20px rgba(190, 34, 255, 0.1);
}

.rj-match-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rj-match-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.rj-match-banner-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
}

.rj-match-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rj-match-banner-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.rj-match-banner-text span {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.rj-match-banner-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.rj-match-banner-score {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rj-match-banner-score-number {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    padding: 6px 14px;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
}

.rj-match-banner-score.match-high .rj-match-banner-score-number {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    box-shadow: 0 3px 12px rgba(255, 215, 0, 0.35);
}

.rj-match-banner-score.match-medium .rj-match-banner-score-number {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
}

.rj-match-banner-score.match-low .rj-match-banner-score-number {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35);
}

.rj-match-banner-score-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: #6b7280;
    line-height: 1.3;
}

.rj-match-banner-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(190, 34, 255, 0.25);
    border-radius: 8px;
    background: rgba(190, 34, 255, 0.06);
    color: #6B0F99;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rj-match-banner-toggle:hover {
    background: rgba(190, 34, 255, 0.12);
    border-color: rgba(190, 34, 255, 0.4);
}

.rj-match-banner-chevron {
    transition: transform 0.3s ease;
}

.rj-match-banner.is-expanded .rj-match-banner-chevron {
    transform: rotate(180deg);
}

/* Guest banner */
.rj-match-banner-guest-cta {
    font-size: 12px;
    font-weight: 500;
    color: #6B0F99;
    line-height: 1.3;
    text-align: center;
}

.rj-match-banner-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.3);
}

.rj-match-banner-login-btn:hover {
    box-shadow: 0 6px 20px rgba(190, 34, 255, 0.45);
    transform: translateY(-1px);
}

/* Breakdown inside banner */
.rj-match-banner .rj-match-breakdown {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(190, 34, 255, 0.12);
}

/* =============================================
 * Match Score Badge Colors (shared)
 * ============================================= */

.rj-badge-match {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rj-badge-match:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.rj-badge-match.match-medium {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.rj-badge-match.match-medium:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.rj-badge-match.match-low {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.rj-badge-match.match-low:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Breakdown Card */
.rj-match-breakdown-inner {
    background: #f8fffe;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 16px 20px;
}

.rj-match-breakdown-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
}

.rj-match-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.rj-match-dim {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

.rj-match-dim-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rj-match-dim-label {
    flex: 1;
}

.rj-match-dim-score {
    font-weight: 600;
    font-size: 12px;
    color: #6B7280;
    min-width: 32px;
    text-align: right;
}

/* Skill Tags */
.rj-match-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.rj-skill-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    transition: opacity 0.2s ease, background 0.2s ease;
    cursor: default;
}

.rj-skill-tag:hover {
    opacity: 0.5;
    color: #000;
}

.rj-skill-matched {
    background: #d1fae5;
    color: #065f46;
}

.rj-skill-missing {
    background: #f3f4f6;
    color: #374151;
}

@media (max-width: 768px) {
    .rj-match-banner {
        padding: 14px 16px;
    }

    .rj-match-banner-content {
        flex-wrap: wrap;
    }

    .rj-match-banner-icon {
        width: 40px;
        height: 40px;
    }

    .rj-match-banner-icon svg {
        width: 22px;
        height: 22px;
    }

    .rj-match-banner-text strong {
        font-size: 14px;
    }

    .rj-match-banner-text span {
        font-size: 12px;
    }

    .rj-match-banner-right {
        width: 100%;
        justify-content: space-between;
        padding-top: 8px;
    }

    .rj-match-banner-score {
        font-size: 24px;
    }

    .rj-match-breakdown-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}