.main-content .mobile-sidebar-btn {
    display: none;
}

input.form-control {
    font-size: 13px;
}

.mobile-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    /* Fully rounded */
    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;
    /* ZnajdzPrace Pink */
    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;
    /* Centering */
}

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

/* -------------------------------------------------------------------------
   Custom Mobile Filter Sidebar
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   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%;
}

.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: 8px;
    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: 500;
}

/* 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;
        margin-top: 20px !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: #fff !important;
        border: 1px solid #eee !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-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) {

    /* Pure CSS Centering - Robust Fallback (1140px Bootstrap/Superio Standard) */
    .rj-sticky-bar {
        position: fixed !important;
        bottom: 20px !important;

        left: 50% !important;
        /* Default: Hidden (Down + Transparent) */
        transform: translate(-50%, 200%) !important;
        opacity: 0 !important;
        transition: all 0.4s ease !important;

        width: 100% !important;
        max-width: 1140px !important;
        /* Standard Container Width */

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

    .rj-sticky-bar.rj-visible {
        /* Visible: Centered + Up */
        transform: translate(-50%, 0) !important;
        opacity: 1 !important;
    }
}

/* 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;
    width: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 10;
}

/* 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 */
    .rj-mobile-header-block {
        margin-top: 12px;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }

    .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 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: center !important;
        margin-bottom: 10px;
    }

    /* 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%;
        padding: 0 10px;
        margin-bottom: 15px;
    }
}

/* 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: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;

    /* Absolute Positioning - TOP LEFT corner of LOGO (overlapping) */
    position: absolute;
    top: 4px !important;
    left: 4px !important;
    z-index: 21;
}

/* Reset ALL bookmark button styles */
.rj-mobile-favorite-wrapper .bookmark-btn,
.rj-mobile-favorite-wrapper a,
.rj-mobile-favorite-wrapper button {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 50% !important;
}

/* Remove hover background completely */
.rj-mobile-favorite-wrapper .bookmark-btn:hover,
.rj-mobile-favorite-wrapper a:hover,
.rj-mobile-favorite-wrapper button:hover,
.rj-mobile-favorite-wrapper .bookmark-btn:focus,
.rj-mobile-favorite-wrapper a:focus,
.rj-mobile-favorite-wrapper button:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Heart icon styling */
.rj-mobile-favorite-wrapper .bookmark-btn:before,
.rj-mobile-favorite-wrapper .bookmark-btn i,
.rj-mobile-favorite-wrapper i {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
}

/* Hover - only change color, no background */
.rj-mobile-favorite-wrapper:hover .bookmark-btn:before,
.rj-mobile-favorite-wrapper:hover .bookmark-btn i,
.rj-mobile-favorite-wrapper:hover i {
    color: #f43f5e !important;
}

/* Active/Added state */
.rj-mobile-favorite-wrapper .bookmark-btn.active:before,
.rj-mobile-favorite-wrapper .bookmark-btn.added:before,
.rj-mobile-favorite-wrapper .bookmark-btn.active i,
.rj-mobile-favorite-wrapper .bookmark-btn.added i {
    color: #f43f5e !important;
}



/* 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;
        border: none;
        padding: 0 5px;
        /* Slight padding buffer */
        margin-bottom: 15px;
    }

    .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;
    }

    /* Hide legacy desktop table rows explicitly */
    .desktop-only {
        display: none !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; } */

/* NEW: Desktop Top Search Bar Styles */
@media (max-width: 991px) {
    .desktop-top-search-bar-wrapper {
        display: none !important;
    }
}

@media (min-width: 992px) {

    /* Container Styling - Pill Shape */
    /* Container Styling - SHINY & STICKY & SPACER */
    .desktop-top-search-bar-wrapper {
        display: block;
        background: #fff;
        border-radius: 50px;
        /* Padding removed as requested */

        margin-bottom: 30px;

        /* Default state - light, subtle look (like mobile) */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;

        /* STICKY - 10px below header (assuming header ~90px) */
        position: sticky;
        top: 100px;
        z-index: 990;
        /* Slightly below header z-index if header is higher */
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    /* SHINY EFFECT #51DACF - only when active */
    .desktop-top-search-bar-wrapper:focus-within {
        box-shadow: 0 0 15px rgba(81, 218, 207, 0.5), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #51DACF !important;
    }

    /* Adjust Sidebar Top Margin match */
    .sidebar-job-filters {
        margin-top: 30px !important;
    }

    /* ==========================================================================
       SIDEBAR FILTERS - CLOUD & CHIP STYLES REFINED
       ========================================================================== */

    /* 1. Reset specific internal elements, but ALLOW containers to have style */
    /* 1. Reset specific internal elements, but ALLOW containers to have style */
    .sidebar-job-filters .form-group-inner,
    .sidebar-job-filters div:not(.form-group):not(.widget),
    .sidebar-job-filters ul,
    .sidebar-job-filters li {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        /* margin: 0 !important; preserve spacing */
        /* padding: 0 !important; preserve padding */
        list-style: none !important;
    }

    /* REORDERING: Move Notification/Alert Widget to Bottom */
    .sidebar-job-filters,
    .elementor-widget-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar-job-filters .widget,
    .sidebar-job-filters .form-group {
        order: 1;
        /* Default order */
    }

    .sidebar-job-filters .widget_job_alert_form_widget,
    .sidebar-job-filters .wpjb-widget-job-alert,
    .widget_job_alert {
        order: 999 !important;
        /* Force to bottom */
        margin-top: 20px !important;
    }

    /* HIDE 'View More' / 'View Less' Toggles - AGGRESSIVE & UNIVERSAL */
    .sidebar-job-filters .toggle-view-more,
    .sidebar-job-filters .view-more,
    .sidebar-job-filters .show-more,
    .sidebar-job-filters .more-less-link,
    .sidebar-job-filters .toggle-field,
    .sidebar-job-filters a[class*="toggle"],
    .sidebar-job-filters [class*="view-more"],
    .sidebar-job-filters .apus-readmore,
    .sidebar-job-filters .show-more-link,
    .sidebar-job-filters div[class*="toggle"],
    .sidebar-job-filters span[class*="toggle"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* HIDE SPECIFIC UNWANTED FILTER ITEMS */
    /* Targeting by common text attributes since dynamic IDs are unknown */

    /* Umowa o pracę - Try multiple potential markers */
    .sidebar-job-filters li:has(label[title*="Umowa o pracę"]),
    .sidebar-job-filters li:has(input[value*="Umowa o pracę"]),
    .sidebar-job-filters li:has(a[href*="umowa-o-prace"]),
    .sidebar-job-filters label[for*="umowa-o-prace"],
    .sidebar-job-filters li[class*="umowa-o-prace"],

    /* Cała Polska */
    .sidebar-job-filters li:has(label[title*="Cała Polska"]),
    .sidebar-job-filters li:has(a[href*="cala-polska"]),
    .sidebar-job-filters label[for*="cala-polska"],
    .sidebar-job-filters li[class*="cala-polska"],

    /* Cały region */
    .sidebar-job-filters li:has(label[title*="Cały region"]),
    .sidebar-job-filters li:has(a[href*="caly-region"]),
    .sidebar-job-filters label[for*="caly-region"],
    .sidebar-job-filters li[class*="caly-region"] {
        display: none !important;
    }

    /* 2. THE CLOUDS (White Cards for each Filter Section) */
    .sidebar-job-filters .widget:not(.widget_apus_elementor_template),
    .sidebar-job-filters .form-group {
        background: #fff !important;
        border-radius: 16px !important;
        /* Match rounded corners of job cards */
        padding: 24px !important;
        /* Match padding of job cards */
        /* margin-bottom handled by margin shorthand below */
        margin: 6px 8px 30px 8px !important;
        /* Increased margins for larger shadow */
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
        /* EXACT Job Card Shadow */
        border: none !important;
        /* Remove border to match job cards usually */
        /* distinct cards */
        display: block !important;
    }

    /* Explicitly hide or reset the empty elementor widget if it takes space */
    .sidebar-job-filters .widget_apus_elementor_template {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
        /* Hide completely as requested */
    }

    /* Remove shadow/bg from inner nested groups to avoid double-carding */
    .sidebar-job-filters .widget .form-group {
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin-bottom: 25px !important;
        /* Space between inner groups */
    }

    /* 3. Title Styling (Headers) */
    .sidebar-job-filters .heading-label,
    .sidebar-job-filters .widget-title,
    .sidebar-job-filters h4,
    .sidebar-job-filters h5 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        /* Separator line */
        display: block !important;
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    /* 4. Flex Container for Chips */
    /* 4. Flex Container - VERTICAL STACK */
    .sidebar-job-filters ul,
    .sidebar-job-filters .terms-list {
        display: flex !important;
        flex-direction: column !important;
        /* Stack vertically */
        gap: 12px !important;
        padding-left: 0 !important;
    }

    /* 5. Cloud Items (Wrappers) */
    .sidebar-job-filters li,
    .sidebar-job-filters .list-item {
        width: auto !important;
        display: block !important;
    }

    /* Remove bullets */
    .sidebar-job-filters li::before,
    .sidebar-job-filters .list-item::before {
        display: none !important;
        content: none !important;
    }

    /* 6. THE CHIPS (Labels for Checkboxes/Radios ONLY) */
    /* We exclude .heading-label and only target labels that are likely clickable items */
    /* 6. THE CHECKBOXES (Redesigned per screenshot) */
    .sidebar-job-filters .form-group-inner label:not(.heading-label),
    .sidebar-job-filters li label,
    .sidebar-job-filters .list-item label {
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        /* Slightly larger text */
        color: #222 !important;
        cursor: pointer !important;
        font-weight: 400 !important;
        /* Reduced font weight */
        transition: all 0.2s !important;
        margin: 0 !important;
        box-shadow: none !important;
        width: 100%;
    }

    /* Custom Checkbox Square */
    .sidebar-job-filters .form-group-inner label:not(.heading-label)::before,
    .sidebar-job-filters li label::before,
    .sidebar-job-filters .list-item label::before {
        content: '' !important;
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        border: 2px solid #d1d5db !important;
        border-radius: 6px !important;
        /* Rounded square */
        margin-right: 12px !important;
        background: #fff;
        transition: all 0.2s ease;
    }

    /* Checked State - The Checkbox Appearance */
    .sidebar-job-filters input:checked+label::before {
        background-color: #51DACF !important;
        border-color: #51DACF !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27 width=%2714px%27 height=%2714px%27%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Checked State - The Text */
    .sidebar-job-filters input:checked+label {
        font-weight: 500 !important;
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Hover State */
    .sidebar-job-filters label:not(.heading-label):hover::before {
        border-color: #51DACF !important;
    }

    .sidebar-job-filters label:not(.heading-label):hover {
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        color: #51DACF !important;
    }

    /* Hide the actual inputs */
    .sidebar-job-filters input[type="checkbox"],
    .sidebar-job-filters input[type="radio"] {
        position: absolute !important;
        left: -9999px !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* CUSTOM LOCATION INPUT STYLES (For JS Implementation) */
    .custom-location-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        height: 100%;
        z-index: 1001;
        /* Ensure above other elements */
    }

    .custom-location-wrapper i.icon {
        margin-right: 10px;
        color: #999;
        font-size: 15px;
    }

    /* UNIFIED SEARCH BAR TYPOGRAPHY - USER DEFINED GRAY/THIN (#999999) */

    /* 1. User's Specific Block for Desktop Top Search Form */
    @media (min-width: 992px) {

        /* NOTE: This rule is also duplicated/enforced at line 3841 per user request path */
        html body .desktop-top-search-form input,
        html body .desktop-top-search-form select,
        html body .desktop-top-search-form .select2-selection,
        html body .desktop-top-search-form .select2-selection__rendered {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            font-size: 14px !important;
            color: #999999 !important;
            font-weight: 100 !important;
            padding: 0 !important;
            margin: 0 !important;
            height: auto !important;
            line-height: normal !important;
        }
    }

    /* 2. Custom Location Input - Matching User's Styles */
    .custom-location-input {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 14px !important;
        color: #999999 !important;
        font-weight: 100 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        line-height: normal !important;
        outline: none;
        flex: 1;
        font-family: inherit !important;
    }

    /* 3. Placeholder Overrides - Ensuring #999999 and weight 100 */
    .job-search-form input::-webkit-input-placeholder,
    .custom-location-input::-webkit-input-placeholder,
    html body .desktop-top-search-form input::-webkit-input-placeholder {
        color: #999999 !important;
        opacity: 1 !important;
        font-weight: 100 !important;
    }

    .job-search-form input::-moz-placeholder,
    .custom-location-input::-moz-placeholder,
    html body .desktop-top-search-form input::-moz-placeholder {
        color: #999999 !important;
        opacity: 1 !important;
        font-weight: 100 !important;
    }

    .job-search-form input:-ms-input-placeholder,
    .custom-location-input:-ms-input-placeholder,
    html body .desktop-top-search-form input:-ms-input-placeholder {
        color: #999999 !important;
        font-weight: 100 !important;
    }

    /* 4. Select2 Placeholders & Inner Text Specifics */
    .select2-selection__placeholder,
    .select2-container--default .select2-selection--single .select2-selection__rendered * {
        color: #9f9f9f !important;
        font-weight: 100 !important;
        font-family: inherit !important;
    }

    /* Ensuring bold tags don't break the thin look */
    .select2-container strong,
    .select2-container b {
        font-weight: 100 !important;
    }


    /* Search Button Text - Keep Bold/Normal? User asked for sections, assuming inputs only. */

    .custom-location-results {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        min-width: 450px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        padding: 10px 10px 10px 10px;
        z-index: 99999;
        margin-top: 15px;
        display: none;
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #eee;
        white-space: normal;
    }

    .custom-location-results.active {
        display: block;
    }

    .location-option {
        padding: 12px 15px;
        cursor: pointer;
        font-size: 14px;
        color: #444;
        transition: background 0.1s;
    }

    .location-option:hover {
        background: #f4f6f8;
        color: #51DACF;
    }


    .desktop-top-search-form {
        width: 100%;
    }

    .search-bar-inner {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Items */
    .search-field-item {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 15px;
        position: relative;
    }

    .search-field-item i {
        color: #999;
        margin-right: 10px;
        font-size: 18px;
    }

    /* Input overrides to blend in */
    .search-field-item .form-control,
    .search-field-item select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        color: #333;
        font-size: 15px;
        width: 100%;
        outline: none !important;
    }

    /* Remove default select arrow if possible or style it */
    /* For standard select, we might check if select2 is used. 
       If select2 is instantiated on these, we need to style select2 container. 
       Assuming standard select for now or select2 adaptability. */

    /* Divider */
    .search-divider {
        width: 1px;
        height: 30px;
        background-color: #eee;
        margin: 0 5px;
    }

    /* Submit Button */
    .search-submit {
        margin-left: auto;
        padding-left: 10px;
    }

    .btn-search-top {
        background: #ff3366;
        /* Pink/Red gradient start approximation */
        background: linear-gradient(90deg, #ff3366 0%, #a832a4 100%);
        color: #fff;
        border: none;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .btn-search-top:hover {
        transform: scale(1.05);
    }

    .btn-search-top i {
        font-size: 18px;
    }

    /* HIDE SIDEBAR FILTERS that are now in top bar */
    /* We target the specific inputs/containers in the sidebar widget */

    /* Hide Keywords in Sidebar */
    .sidebar-job-filters input[name="filter-title"],
    .sidebar-job-filters input[name="filter-title"]+.input-group-addon,
    /* if exists */
    .sidebar-job-filters .form-group:has(input[name="filter-title"]) {
        display: none !important;
    }

    /* Fallback for :has if not supported adequately (though modern browsers do) or if structure differs:
       We might need to target by order or classes if generic. 
       Let's assume the widget outputs standardized wrappers. */

    /* Hide Location in Sidebar */
    .sidebar-job-filters select[name="filter-location"],
    .sidebar-job-filters .form-group:has(select[name="filter-location"]),
    .sidebar-job-filters .form-group .select2-container:has(+ select[name="filter-location"]) {
        /* Select2 hides the original select, so we must hide the select2 container associated with it. 
            This is tricky with CSS alone securely without :has. 
            Using :has is safe for modern Chrome/Edge/Safari/Firefox. */
        display: none !important;
    }

    /* Hide Category in Sidebar */
    /* Categories in sidebar are often checkboxes or a select. 
       If select: name="filter-category"
       If checkboxes: name="filter-category[]" usually.
       The user wants to MOVE it. */
    .sidebar-job-filters select[name="filter-category"],
    .sidebar-job-filters .form-group:has(select[name="filter-category"]),
    .sidebar-job-filters .form-group:has(input[name="filter-category[]"]) {
        display: none !important;
    }

    /* Explicitly hide the containers found in typical Superio widget structure if possible. 
       Based on common structure .form-group usually wraps the label and input. */

    /* Broader hiding for the specific fields if :has fails or to be robust */
    .sidebar-job-filters .widget-job-search-form .form-group:nth-child(1),
    /* Usually Keywords */
    .sidebar-job-filters .widget-job-search-form .form-group:nth-child(2),
    /* Usually Location */
    .sidebar-job-filters .widget-job-search-form .form-group:nth-child(3)

    /* Usually Category */
        {
        /* BE CAREFUL with nth-child, strictly depends on order. 
            Safest is to rely on :has or just hide the inputs and let the empty form-group collapse (or force it). */
    }

    /* Better approach for sidebar: Hide the inputs and set their wrapper form-groups to hidden if empty */
    .sidebar-job-filters .form-group:has(input[name="filter-title"]),
    .sidebar-job-filters .form-group:has(select[name="filter-location"]),
    .sidebar-job-filters .form-group:has(select[name="filter-category"]) {
        display: none !important;
    }
}

.sidebar-job-filters {
    border: 2px solid red !important;
    min-height: 100px;
}

#main-content {
    border: 2px solid blue !important;
}

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

.mobile-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    /* Fully rounded */
    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;
    /* ZnajdzPrace Pink */
    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;
    /* Centering */
}

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

/* -------------------------------------------------------------------------
   Custom Mobile Filter Sidebar
   ------------------------------------------------------------------------- */
@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;
        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 {
        /* 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;
        padding: 8px 0;
    }

    /* Custom Checkbox Styling for Grid */
    .mobile-checkbox-card input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 2px solid #ddd;
        -moz-appearance: none;
             appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        position: relative;
    }

    .mobile-checkbox-card input[type="checkbox"]:checked {
        background-color: #222;
        border-color: #222;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27 width=%2716px%27 height=%2716px%27%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
    }

    .mobile-checkbox-card .term-name {
        font-size: 14px;
        color: #444;
    }

    /* Standard List Item */
    .mobile-list-item {
        padding: 8px 0;
        border-bottom: 1px solid #fafafa;
    }

    .mobile-sticky-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 16px 20px;
        background: #fff;
        border-top: 1px solid #eee;
        z-index: 20;
    }

    .mobile-sticky-footer .btn {
        background: #222 !important;
        /* Black button */
        color: #fff !important;
        border-radius: 50px;
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
    }
}

/* Ensure Offcanvas Active State works */
.offcanvas-filter-sidebar {
    background: #ffffff;
    transform: translateX(100%);
    /* Default hidden right */
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    /* Full width on mobile */
    height: 100%;
    z-index: 9999;
    visibility: hidden;
    /* Prevent flash on page load */
}

.offcanvas-filter-sidebar.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    background: white !important;
}

.over-dark {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255) !important;
    z-index: 9998;
}

.over-dark.active {}

/* --- FINAL FIXES (CONFIRMED SELECTORS) --- */

/* 1. Reset ALL Borders on Main layout pillars */
#main-content,
.sidebar-job-filters,
.col-md-3,
.col-md-9 {
    border: none !important;
    outline: none !important;
}

/* 2. Hide Job Alert Widget (Confirmed Class) */
.widget_job_alert_form_widget,
aside.widget_job_alert_form_widget {
    display: none !important;
}

/* 3. Reset Job List Container (Teal Border) */
.wpjb-job-list,
.wpjb-grid,
.wpjb-job-list.wpjb-grid {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 4. Desktop Search Bar Beautification (Targeting wpjb-search-form) */
@media (min-width: 992px) {

    /* Main Search Container */
    form.wpjb-search-form {
        background: #fff;
        border-radius: 50px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid #eee;
        padding: 5px 20px;
        /* Slimmer */
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Inner Wrapper if exists */
    .wpjb-search-form .search-form-inner {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    /* Form Groups (Inputs) */
    .wpjb-search-form .form-group {
        display: flex;
        align-items: center;
        /* Horizontal alignment */
        flex: 1;
        margin-bottom: 0 !important;
        background: transparent !important;
        /* Remove gray bg */
        border: none !important;
        box-shadow: none !important;
        padding: 5px 0 !important;
    }

    /* Remove specific location gray bg */
    .wpjb-search-form .form-group-location,
    .wpjb-search-form .tax-select-field {
        background: transparent !important;
    }

    /* Icon Alignment (Horizontal) */
    /* Assuming format: <div class="form-group"><i class="..."></i><input...></div> */
    .wpjb-search-form .form-group i,
    .wpjb-search-form .form-group .fas,
    .wpjb-search-form .form-group .fa {
        width: auto !important;
        height: auto !important;
        margin: 0 10px 0 0 !important;
        position: static !important;
        font-size: 16px !important;
        color: #999;
        transform: none !important;
    }

    /* Inputs/Selects */
    .wpjb-search-form input.form-control,
    .wpjb-search-form input[type="text"],
    .wpjb-search-form .select2-container--default .select2-selection--single {
        background: transparent !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 500;
        color: #555;
        height: auto !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Placeholder color */
    .wpjb-search-form ::-moz-placeholder {
        color: #aaa;
    }
    .wpjb-search-form ::placeholder {
        color: #aaa;
    }

    /* Select2 specific overrides */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
        color: #555 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: none !important;
        /* Clean look */
    }

    /* Submit Button (Round Pink) */
    .wpjb-search-form .btn-search,
    .wpjb-search-form input[type="submit"] {
        background: #FF0059 !important;
        color: #fff !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        /* Hide text if any */
        border: none !important;
        min-width: 40px !important;
    }

    /* Reveal icon in button if exists, or append one via pseudo */
    .wpjb-search-form .btn-search:after {
        content: "\f002";
        /* fa-search */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 16px;
        color: #fff;
    }
}

/* ================================================================= */
/* ================================================================= */
/* !!! ROUND 4: FINAL POLISH (SLIMMER, HORIZONTAL, CLEAN) !!! */
/* ================================================================= */

/* 1. FORCE HIDE WIDGETS */
html body .widget_job_alert_form_widget,
html body .wpjb-widget-job-alert,
html body aside.widget_job_alert_form_widget,
html body .job-alert-widget,
html body #job-alert-form-widget-1,
html body .desktop-sidebar-content .widget_job_alert_form_widget {
    display: none !important;
}

/* 2. REMOVE BORDERS, GLOWS & GREEN LINES */
/* Note: Scoped to #main-container to avoid affecting header */
html body #page,
html body #wrapper,
html body .site-content,
html body #content,
html body #main-container .container,
html body #main-container .row,
html body .col-md-9,
html body .col-md-3,
html body #main-content,
html body .sidebar-job-filters,
html body .wpjb-job-list,
html body .search-result-wrapper,
html body .wpjb-job-list-container,
html body .content-listing,
html body .items-wrapper-list {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    border-color: transparent !important;
    /* Explicit kill for green border */
}

/* Ensure pseudo-elements don't carry the border */
html body .wpjb-job-list:before,
html body .wpjb-job-list:after,
html body .search-result-wrapper:before,
html body .search-result-wrapper:after {
    border: none !important;
    box-shadow: none !important;
    display: none !important;
}

/* 3. RESET JOB LIST & CARDS (Clean White Look) */
/* The container */
html body .wpjb-job-list,
html body .wpjb-grid,
html body .items-wrapper-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The Cards */
html body .wpjb-grid-item,
html body .wpjb-job-list .item-job,
html body .job-block {
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

html body .wpjb-job-list .item-job:last-child {
    border-bottom: none !important;
}

/* 4. DESKTOP SEARCH BAR REFURBISHMENT (Refined) */
@media (min-width: 992px) {

    /* Main Search Container - SLIMMER */
    html body .filter-listing-form-wrapper form,
    html body form.wpjb-search-form,
    html body .job-search-form {
        background: #fff !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #eee !important;
        padding: 4px 15px !important;
        /* Reduced Padding */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        min-height: 50px !important;
        /* Enforce slimmer height */
        height: auto !important;
    }

    /* Column/Group Wrappers -> Force to behave like flex items */
    html body .filter-listing-form-wrapper .col-md-3,
    html body .filter-listing-form-wrapper .col-md-2,
    html body .wpjb-search-form .form-group,
    html body .wpjb-search-form .mobile-field-group {
        width: auto !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 15px !important;
        border-right: 1px solid #eee !important;
        display: flex !important;
        flex-direction: row !important;
        /* Horizontal Icon + Input */
        align-items: center !important;
        float: none !important;
        height: 100% !important;
    }

    /* Last item no border */
    html body .filter-listing-form-wrapper .col-md-2:last-child,
    html body .filter-listing-form-wrapper .col-md-3:last-child,
    html body .wpjb-search-form .form-group:last-child {
        border-right: none !important;
        flex: 0 0 auto !important;
    }

    /* ICONS - Horizontal Alignment & Size */
    html body .filter-listing-form-wrapper i,
    html body .filter-listing-form-wrapper .icon,
    html body .wpjb-search-form i,
    html body .wpjb-search-form .fa-map-marker-alt,
    html body .wpjb-search-form .fa-briefcase {
        display: inline-block !important;
        order: -1 !important;
        /* First */
        margin-right: 12px !important;
        font-size: 15px !important;
        color: #999 !important;
        line-height: 1 !important;
        width: auto !important;
    }

    /* INPUTS & SELECTS - Uniform Typography */
    html body .filter-listing-form-wrapper input,
    html body .filter-listing-form-wrapper select,
    html body .select2-container--default .select2-selection--single,
    html body .select2-selection__rendered,
    html body .wpjb-search-form input {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;

        /* UNIFORM FONT STYLES */
        font-family: inherit !important;
        color: #222 !important;
        /* Darker, consistent */
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: -0.2px !important;
    }

    /* Placeholders */
    html body .filter-listing-form-wrapper input::-moz-placeholder {
        color: #666 !important;
        font-weight: 400 !important;
    }
    html body .filter-listing-form-wrapper input::placeholder {
        color: #666 !important;
        font-weight: 400 !important;
    }

    /* Fix Select2 Arrow */
    html body .select2-selection__arrow {
        display: none !important;
    }

    /* BUTTON - Pink Circle */
    html body .filter-listing-form-wrapper input[type="submit"],
    html body .filter-listing-form-wrapper button[type="submit"],
    html body .wpjb-search-form .btn-search {
        background: #FF0059 !important;
        border-radius: 50% !important;
        width: 38px !important;
        /* Slightly smaller */
        height: 38px !important;
        min-width: 38px !important;
        color: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-left: 10px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    /* Pseudo-element for icon */
    html body .filter-listing-form-wrapper input[type="submit"]:before,
    html body .filter-listing-form-wrapper button[type="submit"]:before,
    html body .wpjb-search-form .btn-search:before {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #fff !important;
        font-size: 15px !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block !important;
    }
}

/* ==========================================================================
/* ==========================================================================
   ANTIGRAVITY FINAL FIXES (Migrated from functions.php)
   ========================================================================== */

/* 1. HIDE WIDGETS & SIDEBAR JUNK */
html body .widget_job_alert_form_widget,
html body .wpjb-widget-job-alert,
html body .job-alert-widget,
html body .wpjb-job-list-container>div:first-child:not(.map-item) {
    display: none !important;
}

/* 2. OUTER CONTAINER CLEANUP (.job-list) */
html body .job-list,
html body .wpjb-job-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. DESKTOP SEARCH BAR REFURBISHMENT */
@media (min-width: 992px) {

    /* Wrapper */
    html body .desktop-top-search-form,
    html body .search-bar-inner {
        background: #fff !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #eee !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Fields Container */
    html body .desktop-top-search-form .search-field-item {
        border-right: 1px solid #eee !important;
        padding: 0 15px !important;
        margin: 0 !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
    }

    html body .desktop-top-search-form .search-field-item:last-of-type {
        border-right: none !important;
    }

    /* HORIZONTAL ICONS */
    html body .desktop-top-search-form .form-group-inner,
    html body .desktop-top-search-form .form-group-inner.inner,
    html body .desktop-top-search-form .form-group-inner.has-icon {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        /* User Requested Tweaks */
        margin-top: 15px !important;
        border-right: 5px !important;
        margin-right: 10px !important;
    }

    /* Search Bar Wrapper Spacing */
    .desktop-top-search-bar-wrapper {
        margin-bottom: 30px !important;
    }

    /* Icon Styling */
    html body .desktop-top-search-form i,
    html body .desktop-top-search-form .fa,
    html body .desktop-top-search-form .fas,
    html body .desktop-top-search-form .form-group-inner i {
        display: inline-block !important;
        margin-right: 10px !important;
        font-size: 15px !important;
        color: #999 !important;
        position: static !important;
        transform: none !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* Custom location wrapper - FLEXBOX layout override for desktop */
    html body .desktop-top-search-form .field-location .custom-location-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Icon inside custom location - inline via flexbox, NOT absolute */
    html body .desktop-top-search-form .field-location .custom-location-wrapper i.fa-map-marker-alt,
    html body .desktop-top-search-form .field-location .custom-location-wrapper i.fas {
        position: static !important;
        transform: none !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Remove margin-top that pushes location field down */
    html body .desktop-top-search-form .field-location.custom-location-active .form-group-inner {
        margin-top: 0 !important;
    }

    /* Inputs */
    html body .desktop-top-search-form input,
    html body .desktop-top-search-form select,
    html body .desktop-top-search-form .select2-selection,
    html body .desktop-top-search-form .select2-selection__rendered {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 14px !important;
        color: #999999 !important;
        font-weight: 100 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* Submit Button */
    html body .desktop-top-search-form .search-submit button,
    html body .desktop-top-search-form button[type="submit"] {
        background: #74D6CE !important;
        background: linear-gradient(135deg, #74D6CE 0%, #5ECBC2 100%) !important;
        border-radius: 50% !important;
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        color: #fff !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 4px !important;
        box-shadow: 0 4px 15px rgba(116, 214, 206, 0.4) !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    html body .desktop-top-search-form .search-submit button:hover,
    html body .desktop-top-search-form button[type="submit"]:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(116, 214, 206, 0.6) !important;
    }

    html body .desktop-top-search-form .search-submit button i {
        margin: 0 !important;
        color: #fff !important;
        font-size: 18px !important;
        width: auto !important;
    }

    /* REMOVE UNWANTED ELEMENTOR SECTIONS (Green Square/Old Header) */
    .elementor-element-c14da61,
    .elementor-section.elementor-top-section.elementor-element-c14da61 {
        display: none !important;
    }

    /* SIDEBAR "CLOUDS" STYLING (User Request) */
    .sidebar-job-filters .widget {
        background: #fff !important;
        border-radius: 20px !important;
        /* Soft "cloud" rounded corners */
        padding: 25px !important;
        margin-bottom: 25px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
        /* Elegant floaty shadow */
        border: none !important;
    }

    /* Adjust Widget Title */
    .sidebar-job-filters .widget .widget-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #222 !important;
        margin-bottom: 20px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        /* Toggle icon adjustment */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Ensure content inside widget has breathing room if needed */
    .sidebar-job-filters .widget ul {
        padding: 0 !important;
        margin: 0 !important;
    }

}

/* ==========================================================================
   FIX: MOVE NOTIFICATION & HIDE UNWANTED FILTERS (USER REQUEST)
   ========================================================================== */

/* 1. Move Notification Widget to Bottom */
/* Target all potential sidebar containers to ensure Flexbox is active */
.desktop-sidebar-content,
.sidebar.sidebar-left,
aside.sidebar,
.sidebar-job-filters {
    display: flex !important;
    flex-direction: column !important;
}

/* Force the notification widget to the very end */
.widget_job_alert_form_widget,
.widget.widget_job_alert_form_widget {
    order: 9999 !important;
    margin-top: 20px !important;
    /* Ensure some spacing from the list above */
}

/* 2. Hide Unwanted "Rodzaj etatu" Options */
/* Targeting list items (li) containing the specific inputs */
.form-group-type li:has(input[value="praca-cala-polska"]),
.form-group-type li:has(input[value="caly-region"]),
.form-group-type li:has(input[value="praca-za-granica"]),
/* Target labels directly just in case structure differs */
.form-group-type label:has(input[value="praca-cala-polska"]),
.form-group-type label:has(input[value="caly-region"]),
.form-group-type label:has(input[value="praca-za-granica"]) {
    display: none !important;
}

/* 3. Change Selected Filter Style (White Box + Dark Checkmark) */
/* Override default "toggle" style when checked - THE BOX */
.filter-listing-form .circle-check .list-item [type="checkbox"]:checked+label::after {
    background: #fff !important;
    /* White background */
    border: 1px solid #74D6CE !important;
    /* Teal border */
    border-radius: 4px !important;
    /* Ensure square */
    width: 20px !important;
    height: 20px !important;
}

/* Use checkmark icon for the knob/indicator - THE ICON */
.filter-listing-form .circle-check .list-item [type="checkbox"]:checked+label::before {
    content: "" !important;
    background-color: transparent !important;
    /* No background fill */
    /* Dark Checkmark SVG (fill='%23333333') */
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23333333%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    transform: none !important;
    /* Prevent sliding animation */
    left: 0 !important;
    /* Center it */
    top: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    /* Center vertically */
    border-radius: 0 !important;
    width: 20px !important;
    height: 20px !important;
    box-shadow: none !important;
}

/* Ensure the unchecked state also looks like a square checkbox, not a toggle pill */
.filter-listing-form .circle-check .list-item [type="checkbox"]+label::after {
    border-radius: 4px !important;
    /* Square corners instead of pill */
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
}

/* Hide the original "knob" in unchecked state if it was a separate element */
.filter-listing-form .circle-check .list-item [type="checkbox"]:not(:checked)+label::before {
    display: none !important;
}

/* FIX: Z-Index for Category Popup in Top Search Bar */
/* The popup is trapped in the sticky header's stacking context (z-index: 990), below the backdrop (1040). */
/* We must raise the header z-index when the modal is active. */

/* 1. Broad fix for Body class trigger (Standard Bootstrap) */
body.modal-open .desktop-top-search-bar-wrapper {
    z-index: 10 !important;
    /* Reduced to 10 to stay below modals (1050) and employer menu */
}

/* 2. Specific fix using :has() if body class fails or is not applied */
.desktop-top-search-bar-wrapper:has(.modal[style*="display: block"]),
.desktop-top-search-bar-wrapper:has(.modal.in),
.desktop-top-search-bar-wrapper:has(.modal.show) {
    z-index: 10 !important;
}

/* FIX: Reduce font weight for categories in popup */
.category-list .category-name {
    font-weight: 200 !important;
}

/* 
   -------------------------------------------------------------------------
   ANTIGRAVITY FIXES - ROBUST UI OVERRIDES (MOVED FROM JS)
   ------------------------------------------------------------------------- 
*/

/* 1. Hide duplicate location icon in the top search bar */
.desktop-top-search-form .field-location>i.fa-map-marker-alt {
    display: none !important;
}

/* Hide Select2 and original elements in custom location field */
.desktop-top-search-form .field-location.custom-location-active .select2-container,
.desktop-top-search-form .field-location.custom-location-active .select-taxonomy-search,
.desktop-top-search-form .field-location.custom-location-active>select {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Field location with custom autocomplete - FLEXBOX layout */
.desktop-top-search-form .field-location.custom-location-active {
    display: flex !important;
    align-items: center !important;
}

/* Override margin-top on form-group-inner for location field */
html body .desktop-top-search-form .field-location.custom-location-active .form-group-inner {
    margin-top: 0 !important;
}

/* Custom location wrapper - FLEXBOX layout override for desktop NO ROW */
.desktop-top-search-form .field-location .custom-location-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
}

/* Icon - stays inline using flexbox (NO absolute positioning) */
html body .desktop-top-search-form .field-location .custom-location-wrapper>i.fa-map-marker-alt,
html body .desktop-top-search-form .field-location .custom-location-wrapper>i.fas,
html body .desktop-top-search-form .field-location.custom-location-active .custom-location-wrapper i {
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    color: #999 !important;
    font-size: 16px !important;
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Input - takes remaining space */
.desktop-top-search-form .field-location .custom-location-wrapper input.form-control {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-left: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
}

/* Hide duplicate icon that might be outside wrapper */
.desktop-top-search-form .search-field-item.field-location.custom-location-active>i {
    display: none !important;
}

/* 2. Force Sidebar Filters to be visible */
/* This ensures that no JS or aggressive hiding accidentally hides the sidebar */
.sidebar-job-filters,
.desktop-sidebar-content,
.widget_apus_job_filter {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Ensure the location field container itself is visible */
.field-location {
    overflow: visible !important;
    /* Ensure dropdowns aren't clipped */
}

/* -------------------------------------------------------------------------
   Sidebar Cloud Widgets (Forced Desktop Styles)
   ------------------------------------------------------------------------- */
.sidebar-job-filters .widget {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Soft Cloud Shadow */
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
}

.sidebar-job-filters .widget .widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #222;
    display: block;
}

/* Styled Checkbox Implementation */
.sidebar-job-filters .styled-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 500;
    color: #555;
    transition: color 0.2s;
}

.sidebar-job-filters .styled-checkbox:hover {
    color: #ff0055;
}

/* Hide native input - FORCED */
.sidebar-job-filters .styled-checkbox input,
.sidebar-job-filters .styled-checkbox input[type="checkbox"] {
    display: block !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1;
    width: 20px !important;
    height: 20px !important;
}

/* Custom Checkbox Box */
.sidebar-job-filters .checkbox-box {
    height: 22px;
    width: 22px;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Scale up for visibility */
.sidebar-job-filters .checkbox-box::after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    content: "";
    position: absolute;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.2s;
}

/* Checked State */
.sidebar-job-filters .styled-checkbox input:checked~.checkbox-box {
    background-color: #070707;
    border-color: #000000;
}

.sidebar-job-filters .styled-checkbox input:checked~.checkbox-box::after {
    opacity: 1;
    /* Show checkmark */
}

.sidebar-job-filters .term-name,
.sidebar-job-filters .list-name {
    font-size: 13px;
    line-height: 1.3;
}

/* Fix Duplicate Checkbox (Remove Parent Theme Pseudo-element) */
.sidebar-job-filters .styled-checkbox::before {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* =========================================
   Mobile Filter & Category Buttons Styling
   ========================================= */
.mobile-filter-buttons-wrapper {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    justify-content: space-between;
    width: 100%;
}

.mobile-filter-buttons-wrapper button {
    flex: 1;
    font-size: 13px !important;
    padding: 10px 15px !important;
    border-radius: 50px !important;
    background-color: #74D6CE !important;
    /* Turquoise */
    color: #fff !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(116, 214, 206, 0.3);
    transition: transform 0.2s ease;
}

.mobile-filter-buttons-wrapper button:active {
    transform: scale(0.98);
}

.mobile-filter-buttons-wrapper button i {
    font-size: 14px;
}

/* Shiny Animation Effect */
.btn-shiny::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shiny-effect 3s infinite;
    pointer-events: none;
}

@keyframes shiny-effect {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    /* Fast sheen pass */
    100% {
        left: 200%;
    }
}

/* =========================================
   Mobile Sidebar (Offcanvas) Styling - PIXEL PERFECT REVISION
   ========================================= */

.offcanvas-filter-sidebar {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Add padding back to container, but content inside will handle full width if needed */
}

/* 1. Mobile Filter Header */
.mobile-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f2f4;
    position: relative;
}

.mobile-filter-title {
    font-size: 18px;
    font-weight: 300;
    /* Lighter font */
    color: #1a1a1a;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.close-filter-sidebar {
    cursor: pointer;
    font-size: 20px;
    color: #333;
    width: 24px;
}

/* "Wyczyść filtry" Button - Red Pill Style */
.mobile-clear-filters {
    font-size: 11px;
    /* Smaller font */
    font-weight: 300;
    /* Lighter font */
    color: #ff3b30 !important;
    background: #fff5f5;
    padding: 6px 12px;
    /* Smaller padding (narrower) */
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
}

/* 2. Unified Search & Location Card */
.mobile-search-location-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    position: relative;
}

/* Search Row - The Pill */
.mobile-field-row.search-row {
    margin-bottom: 15px;
}

.search-pill-container {
    display: flex;
    align-items: center;
    border: 1px solid #f0f0f0 !important;
    /* Very subtle border or none */
    border-radius: 50px;
    padding: 8px 16px;
    background: #fff;
    height: 48px;
    box-shadow: none !important;
    /* Remove any shadow/mini-border */
}

/* Icon inside Pill */
.search-pill-container .mobile-field-button {
    background: transparent;
    border: none;
    padding: 0;
    margin-right: 10px;
    color: #222;
    font-size: 18px;
}

/* Input Inside Pill */
.search-pill-container .mobile-search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 14px;
    color: #333;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
}

/* Divider Line */
.mobile-card-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 0 -16px 15px -16px;
    /* Extend to edges of card padding */
    width: calc(100% + 32px);
}

/* Location Row - Clean */
.mobile-field-row.location-row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 5px;
    /* Slight indent */
}

/* Location Icon */
.mobile-field-row.location-row .mobile-field-icon {
    font-size: 20px;
    color: #333;
    margin-right: 12px;
}

/* Location Input */
.mobile-field-row.location-row .mobile-location-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: 40px !important;
    font-size: 15px;
    color: #555;
    width: 100%;
}

.mobile-location-loader {
    position: absolute;
    right: 0;
    top: 10px;
    color: #888;
}

/* 3. Filter Sections (Accordion Cards) */
.mobile-filter-section {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.mobile-section-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    /* Lighter font */
    color: #1a1a1a;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f2f4;
    margin-bottom: 15px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Separator below title if needed (Screenshot had one? Or just spacing. Let's add slight spacing border if we want to be exact, but usually just proper spacing works. Let's add border based on common patterns if screenshot showed it. Actually screenshot shows 'Tryb pracy' header, then a line below it.) */
.mobile-section-title {
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f2f4;
    margin-bottom: 15px;
}

.mobile-section-content {
    margin-top: 0;
}

/* 4. Checkboxes */
.mobile-checkbox-card {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
}

.mobile-checkbox-card input[type="checkbox"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    /* Light gray border */
    border-radius: 6px;
    /* Soft square */
    margin-right: 12px;
    position: relative;
    cursor: pointer;
    background: #fff;
    flex-shrink: 0;
}

.mobile-checkbox-card input[type="checkbox"]:checked {
    background-color: #333;
    /* Dark fill */
    border-color: #333;
}

.mobile-checkbox-card input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mobile-checkbox-card .term-name {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 300;
    /* Lighter font */
}

/* 5. Sticky Footer */
.mobile-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    z-index: 1010;
    display: flex;
    justify-content: center;
}

.mobile-filter-submit {
    width: 100%;
    max-width: 300px;
    background-color: #111;
    /* Dark Button */
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

/* OVERRIDES FOR OFFCANVAS CONTAINER */
.offcanvas-filter-sidebar {
    padding-bottom: 100px !important;
    /* Space for sticky footer */
}

/* Make sure modal content areas have transparent background so our white cards pop */
.offcanvas-filter-sidebar .filter-scroll {
    background-color: #f9f9f9 !important;
    /* Light grey background for the drawer */
    border-radius: 20px 0 0 20px;
    /* Rounded left edge */
}

/* Close button positioning */
.mobile-filter-header .close-filter-sidebar {
    font-size: 28px;
    /* Larger close icon */
    font-weight: 100;
}

/* Job Types Grid (2 cols) */
.mobile-job-type-grid {
    display: flex;
    flex-direction: column;
    /* Changed to list for consistency or keep grid if desire */
    /* Screenshot shows list for categories, sticking to list. If 'Tryb pracy' was grid, restore grid. */
}

/* If the user wants 2-col grid for some sections: */
.mobile-job-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Small adjustments for grid items */
.mobile-job-type-grid .mobile-checkbox-card {
    margin-bottom: 0;
    background: #fff;
    /* border: 1px solid #eee; */
    padding: 8px 0;
    border-radius: 8px;
}

.offcanvas-filter-sidebar .modal-content {
    background-color: #fff !important;
}

/* 2. Compact Filters (Work Type etc.) */
.offcanvas-filter-sidebar ul li,
.offcanvas-filter-sidebar .list-item,
.offcanvas-filter-sidebar .form-group-type li {
    padding: 6px 8px !important;
    /* Reduced padding further */
    margin-bottom: 4px !important;
    /* Reduced margin */
    min-height: auto !important;
}

/* Reduce gap between checkbox and text */
.offcanvas-filter-sidebar li label,
.offcanvas-filter-sidebar .list-item label {
    margin: 0 !important;
    margin: 0 !important;
    gap: 5px !important;
    /* Tight gap */
    justify-content: flex-start !important;
}

/* Smaller checkbox visual */
.offcanvas-filter-sidebar input[type="checkbox"] {
    margin-right: 0 !important;
    /* Controlled by gap */
}

/* 3. Search Button Visibility in Sidebar */
/* Often hidden by themes in widget areas */
.offcanvas-filter-sidebar .search-submit,
.offcanvas-filter-sidebar .widget_search .search-submit,
.offcanvas-filter-sidebar .job-search-form .search-submit {
    display: block !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.offcanvas-filter-sidebar .search-submit button,
.offcanvas-filter-sidebar .widget_search .search-submit button {
    width: 100% !important;
    background: #74D6CE !important;
    color: #fff !important;
    border: none !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* 4. Mobile Location Autocomplete Results */
.mobile-location-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    margin-top: 5px !important;
    padding: 5px 0 !important;
    list-style: none !important;
}

.mobile-location-results li {
    padding: 10px 15px !important;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-radius: 8px;
    margin: 0 5px !important;
    transition: background 0.2s;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.mobile-location-results li:hover {
    background-color: #f0fbfb !important;
    color: #000;
}

/* FORCE GLOBAL LIGHT FONTS IN SIDEBAR */
/* SAFE GLOBAL LIGHT FONTS IN SIDEBAR (Excluding Icons) */
.offcanvas-filter-sidebar {
    font-weight: 300 !important;
}

.offcanvas-filter-sidebar *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not([class*="icon"]) {
    font-weight: 300 !important;
}

/* Restore Icon Weights */
.offcanvas-filter-sidebar .fa,
.offcanvas-filter-sidebar .fas,
.offcanvas-filter-sidebar .far,
.offcanvas-filter-sidebar i {
    font-weight: 900 !important;
    /* FontAwesome Free Solid requires 900 */
    font-family: "Font Awesome 5 Free" !important;
    /* Ensure generic family isn't overriding */
}

.offcanvas-filter-sidebar strong,
.offcanvas-filter-sidebar b,
.offcanvas-filter-sidebar h4,
.offcanvas-filter-sidebar .mobile-filter-title,
.offcanvas-filter-sidebar .mobile-section-title {
    font-weight: 400 !important;
    /* Slightly bolder for headers */
}

/* Ensure input cleaning */
.search-pill-container input,
.search-pill-container input:focus,
.mobile-search-input,
.mobile-search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* FINAL OVERRIDE FOR SUBMIT BUTTON */
.offcanvas-filter-sidebar .mobile-filter-submit {
    width: 50% !important;
    margin: 20px auto 0 auto !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    display: block !important;
    border: none !important;
}

/* USER REQUESTED FIXES 2 */
.search-pill-container {
    border: none !important;
}

.offcanvas-filter-sidebar input[type="text"],
.offcanvas-filter-sidebar input[type="search"],
.offcanvas-filter-sidebar select {
    border: none !important;
    outline: none !important;
}

@media (max-width: 991px) {
    .mobile-sticky-footer .btn {
        padding: 0 !important;
        font-size: 12px !important;
    }
}

/* USER REQUESTED FIXES 3 */
.mobile-field-row.location-row .mobile-location-input {
    color: #8a8a8a !important;
}

.search-pill-container {
    padding: 0 !important;
}

.offcanvas-filter-sidebar input[type="text"],
.offcanvas-filter-sidebar input[type="search"],
.offcanvas-filter-sidebar select {
    padding: 2px !important;
}

.search-pill-container .mobile-search-input {
    font-size: 15px !important;
}

/* USER REQUESTED FIXES 4 */
.mobile-checkbox-card {
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    .mobile-checkbox-card {
        gap: 4px !important;
        padding: 2px 0 !important;
        font-size: 12px !important;
    }

    .mobile-job-type-grid {
        gap: 2px !important;
    }
}

/* CRITICAL FIX: ENABLE SCROLLING ON MOBILE SIDEBAR */
.offcanvas-filter-sidebar {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Smooth scroll on iOS */
    padding-bottom: 80px !important;
    /* Space for the sticky button */
}

/* CRITICAL: RESET FILTER SCROLL WRAPPER */
.offcanvas-filter-sidebar .filter-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
}

/* Ensure no other hidden overflows */
.offcanvas-filter-sidebar .custom-mobile-sidebar-wrapper,
.offcanvas-filter-sidebar .mobile-custom-filter-content {
    height: auto !important;
    overflow: visible !important;
}

/* CRITICAL: STICKY FOOTER FIXED POSITION */
.offcanvas-filter-sidebar .mobile-sticky-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #fff;
    /* Ensure background allows reading */
    padding: 15px !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    /* Nice shadow upwards */
    z-index: 1000 !important;
    display: flex;
    justify-content: center;
}

/* FIX: Styled Checkbox (Square to Rounded & Modern) */
.offcanvas-filter-sidebar .styled-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.offcanvas-filter-sidebar .styled-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 29px;
    /* Space for box - REDUCED from 35px */
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    /* Match other inputs - REDUCED from 15px */
    font-weight: 300 !important;
    /* Thin font */
    color: #333;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.mobile-list-item {
    padding: 4px 0;
}

/* The custom functionality box */
.offcanvas-filter-sidebar .styled-checkbox .checkmark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 22px;
    /* Match Job Type size */
    width: 22px;
    /* Match Job Type size */
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    /* ROUNDED CORNERS - KEY FIX */
    transition: all 0.2s;
}

/* On mouse-over, add a grey background color */
.offcanvas-filter-sidebar .styled-checkbox:hover input~.checkmark {
    background-color: #f5f5f5;
}

/* When the checkbox is checked, add a blue background */
.offcanvas-filter-sidebar .styled-checkbox input:checked~.checkmark {
    background-color: #74D6CE;
    border-color: #74D6CE;
}

/* Create the checkmark/indicator (hidden when not checked) */
.offcanvas-filter-sidebar .styled-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.offcanvas-filter-sidebar .styled-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.offcanvas-filter-sidebar .styled-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* CRITICAL: FLEXBOX SIDEBAR LAYOUT (Mobile Only) */
@media (max-width: 991px) {
    .offcanvas-filter-sidebar {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        /* Force full viewport height */
        overflow: hidden !important;
        /* Prevent outer scroll */
    }

    /* Ensure intermediate wrappers don't break flex chain */
    .offcanvas-filter-sidebar .filter-scroll,
    .offcanvas-filter-sidebar .mobile-custom-filter-content,
    .mobile-filter-form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        /* Critical for nested flex scrolling */
        overflow: hidden !important;
    }

    .offcanvas-filter-sidebar .mobile-filter-header {
        flex: 0 0 auto !important;
    }

    /* The overflow-y auto goes HERE */
    .scrollable-form-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        /* Removed specific padding as requested */
        height: auto !important;
        /* height controlled by flex */
    }

    /* Footer sits at bottom */
    .mobile-sticky-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        z-index: 100 !important;
        background: #fff;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        /* Proper shadow separation */
        padding: 15px 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile Top Search Bar & Sidebar (Restored for /ogłoszenia/)
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .mobile-top-search-bar-wrapper {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mobile-top-search-bar-wrapper {
        margin-bottom: 20px;
    }

    .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;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .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;
    }

    /* Filter Trigger Button */
    .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;
        box-shadow: 0 4px 10px rgba(255, 0, 85, 0.3);
    }

    /* 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;
        border-bottom: 1px solid #eee;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .close-filter-sidebar {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        color: #333 !important;
        font-size: 24px;
    }

    /* Full Width Fixes */
    .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 Search Animation & Sidebar Fixes
   ------------------------------------------------------------------------- */

/* 1. Mobile Search Focus Animation */
.mobile-filter-trigger-wrapper {
    transition: opacity 0.3s ease, margin 0.3s ease, width 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.mobile-search-inner.is-focused .mobile-filter-trigger-wrapper {
    opacity: 0;
    width: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Submit button (hidden by default, shown on focus) */
.mobile-search-submit-btn {
    display: none !important;
}

.mobile-search-inner.is-focused .mobile-search-submit-btn {
    display: flex !important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

/* 2. FORCE SIDEBAR CONTENT VISIBILITY */
@media (max-width: 991px) {

    /* Override any hidden classes that might be applied */
    .mobile-custom-filter-content.hidden-lg,
    .mobile-custom-filter-content.hidden-md {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* Ensure the modal dialog (offcanvas) is visible */
    .offcanvas-filter-sidebar.active .mobile-custom-filter-content {
        display: block !important;
    }
}

/* -------------------------------------------------------------------------
   RESTORED: Glossy Effect & Original Mobile Search Interactions (Jan 19 Backup)
   ------------------------------------------------------------------------- */

/* --- SEARCH BUTTON ANIMATION (Flipping Effect) --- */
.mobile-filter-trigger-wrapper {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Default state: Filters Visible, Search Hidden */
.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: 8px;
    /* Standard spacing */

    /* GLOSSY EFFECT RESTORED */
    background: #74D6CE !important;
    /* Turquoise */
    box-shadow: 0 4px 10px rgba(116, 214, 206, 0.4) !important;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

/* The Shine Animation */
.mobile-filter-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg) translate(-100%, -100%);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: rotate(45deg) translate(-100%, -100%);
    }

    20% {
        transform: rotate(45deg) translate(20%, 20%);
    }

    100% {
        transform: rotate(45deg) translate(20%, 20%);
    }
}

/* Initially hide the Search Submit Button */
.mobile-filter-trigger-wrapper .mobile-search-submit-btn {
    width: 0 !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
    transform: scale(0.5);
    border: none;
    display: flex !important;
    /* Ensure it is display flex but hidden via width/opacity */
}

/* ACTIVE STATE (Input Focused - added via JS .search-active) */
/* Hide Filter & Category Buttons */
.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-left: 0 !important;
    padding: 0 !important;
    margin-right: 0 !important;
    pointer-events: none;
    transform: scale(0.5);
}

/* Show Search Submit Button */
.mobile-filter-trigger-wrapper.search-active .mobile-search-submit-btn {
    width: 40px !important;
    opacity: 1 !important;
    margin-left: 8px !important;
    pointer-events: auto;
    transform: scale(1);
    position: relative !important;
    /* Restore normal flow */
    right: auto !important;
    top: auto !important;
}

/* ============================================
   PAGINATION - COMPACT & CENTERED
   Override Bootstrap pagination styles
   ============================================ */

.apus-pagination,
.pagination,
ul.pagination,
.apus-pagination ul,
nav.navigation .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 30px auto !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
    border-radius: 0 !important;
    float: none !important;
}

.apus-pagination nav,
.pagination nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Reset Bootstrap li styles */
.apus-pagination li,
.pagination li,
.pagination>li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Individual page numbers - override Bootstrap */
.apus-pagination .page-numbers,
.apus-pagination a,
.apus-pagination span,
.pagination .page-numbers,
.pagination a,
.pagination span,
.pagination li a,
.pagination li span,
.pagination>li>a,
.pagination>li>span,
.page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Hover state */
.apus-pagination .page-numbers:hover,
.apus-pagination a:hover,
.pagination .page-numbers:hover,
.pagination a:hover,
.pagination li a:hover,
.pagination>li>a:hover,
.page-link:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* Current/Active page */
.apus-pagination .page-numbers.current,
.apus-pagination span.current,
.pagination .page-numbers.current,
.pagination .current,
.pagination .active a,
.pagination .active span,
.pagination>li.active>a,
.pagination>li.active>span,
.page-item.active .page-link {
    background: #2DD4BF !important;
    border-color: #2DD4BF !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: default !important;
}

/* Dots (ellipsis) */
.apus-pagination .page-numbers.dots,
.pagination .page-numbers.dots,
.pagination .dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 24px !important;
    padding: 0 4px !important;
    color: #9ca3af !important;
    cursor: default !important;
}

.apus-pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:hover,
.pagination .dots:hover {
    background: transparent !important;
    color: #9ca3af !important;
}

/* Prev/Next arrows */
.apus-pagination .page-numbers.prev,
.apus-pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.pagination .prev,
.pagination .next {
    background: #fff !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
    min-width: 36px !important;
    padding: 0 !important;
}

.apus-pagination .page-numbers.prev:hover,
.apus-pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.pagination .prev:hover,
.pagination .next:hover {
    background: #f3f4f6 !important;
    border-color: #2DD4BF !important;
    color: #2DD4BF !important;
}

/* Arrow icons */
.apus-pagination .page-numbers.prev i,
.apus-pagination .page-numbers.next i,
.pagination .prev i,
.pagination .next i {
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {

    .apus-pagination,
    .pagination,
    ul.pagination {
        gap: 4px !important;
        margin: 20px auto !important;
    }

    .apus-pagination .page-numbers,
    .apus-pagination a,
    .apus-pagination span,
    .pagination .page-numbers,
    .pagination a,
    .pagination span,
    .pagination li a,
    .pagination li span,
    .page-link {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .apus-pagination .page-numbers.dots,
    .pagination .page-numbers.dots,
    .pagination .dots {
        min-width: 20px !important;
        padding: 0 2px !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile Top Search - Sticky Logic (Restored)
   ------------------------------------------------------------------------- */
.mobile-top-search-bar-wrapper {
    z-index: 100040;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

/* Sticky Logic Classes */
.mobile-top-search-bar-wrapper.is-sticky {
    position: fixed;
    top: 60px;
    /* Fallback, JS sets this */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 5 !important;
}

.mobile-top-search-bar-wrapper.is-sticky.scroll-down {
    transform: translateY(-200%);
    opacity: 0;
    pointer-events: none;
}

.mobile-top-search-bar-wrapper.is-sticky.scroll-up {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* 4. Fix Margin Issue when Sticky */
/* User reported .mobile-search-inner has margin-top: 30px which causes gap */
/* We override this ONLY when the parent wrapper is sticky */
.mobile-top-search-bar-wrapper.is-sticky .mobile-search-inner {
    margin-top: 5px !important;
    /* Reduced to 5px (or 0) as requested */
    margin-left: 15px;
    margin-right: 15px;
}

/* 5. Force 1 Column for Desktop Job Listings (Fix Layout Flash) */
@media (min-width: 992px) {

    .items-wrapper-list.columns-1 .item-job,
    .items-wrapper-list.columns-1 .job-block,
    .items-wrapper-list.columns-1 .wpjb-job-list .item-job {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        grid-column: 1 / -1 !important;
        float: none !important;
    }

    .items-wrapper-list.columns-1 {
        display: block;
        margin-top: 120px;
    }
}

/* ==========================================================================
   FIX: Header Menu Z-Index (Must be > 1 [Search Bar] and usually > 1000)
   ========================================================================== */
@media (min-width: 992px) {
    .desktop-top-search-bar-wrapper {
        z-index: 100 !important;
    }
}

/* Desktop Sticky Search Bar */
@media (min-width: 992px) {

    /* 
       OPTION 1 FIX: 
       Constrain the wrapper itself to be centered and have max-width.
       Position fixed relative to viewport, but behaves like a container.
    */
    .desktop-top-search-bar-wrapper.is-desktop-sticky {
        position: fixed;
        left: 50%;
        width: 100%;
        max-width: 900px;
        z-index: 999 !important;
        background: transparent;
        pointer-events: none;
        transform: translate(-33%, -150%);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
        display: block;
    }

    .desktop-top-search-bar-wrapper.is-desktop-sticky .desktop-top-search-form {
        background: #fff;
        padding: 15px 25px;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        display: block;
        width: 100%;
        border: 1px solid #eee;
        margin: 0;
    }

    /* Scroll Up -> Show */
    .desktop-top-search-bar-wrapper.is-desktop-sticky.scroll-up {
        transform: translate(-33%, 0);
        opacity: 1;
    }

    /* Scroll Down -> Hide */
    .desktop-top-search-bar-wrapper.is-desktop-sticky.scroll-down {
        transform: translate(-33%, -150%);
        opacity: 0;
    }
}

/* User requested sidebar margins */
body .widget_superio_user_short_profile,
body aside.sidebar.sidebar-left,
body .sidebar.sidebar-left,
body .ps-container.ps-theme-default {
    margin-top: 60px;
}