/*
Theme Name: VooCareer Child
Theme URI: https://globextech.org
Template: voocareer
Author: GlobeXTech
Author URI: https://globextech.org
Description: Child theme for VooCareer offering customization inheritance and safe update workflow for theme modifications.
Tags: two-columns,left-sidebar,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.1.0
Updated: 2026-01-12
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Primary Brand Colors */
    --color-primary: #13b5ea;
    --color-primary-hover: #0d9fd0;
    --color-primary-light: rgba(19, 181, 234, 0.1);

    /* Secondary Colors */
    --color-secondary: #ffaf00;
    --color-secondary-hover: #e69d00;

    /* Accent Colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    /* Text Colors */
    --color-text-dark: #333333;
    --color-text-medium: #666666;
    --color-text-light: #999999;
    --color-text-muted: #b0b0b0;

    /* Background Colors */
    --color-bg-white: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-gray: #f2f2f2;
    --color-bg-dark: #373d41;

    /* Border Colors */
    --color-border: #efefef;
    --color-border-medium: #dddddd;
    --color-border-dark: #cccccc;

    /* Typography */
    --font-family-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;

    /* Spacing Scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease-in-out;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ==========================================================================
   Modern Utility Classes
   ========================================================================== */

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Spacing Utilities */
.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.p-0 {
    padding: 0;
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.p-6 {
    padding: var(--space-6);
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-dark {
    color: var(--color-text-dark);
}

.text-light {
    color: var(--color-text-light);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Background Utilities */
.bg-white {
    background-color: var(--color-bg-white);
}

.bg-light {
    background-color: var(--color-bg-light);
}

.bg-gray {
    background-color: var(--color-bg-gray);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

/* Border Utilities */
.border {
    border: 1px solid var(--color-border);
}

.border-0 {
    border: none;
}

.border-t {
    border-top: 1px solid var(--color-border);
}

.border-b {
    border-bottom: 1px solid var(--color-border);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Shadow Utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-none {
    box-shadow: none;
}

/* Transition Utilities */
.transition {
    transition: all var(--transition-normal);
}

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-slow {
    transition: all var(--transition-slow);
}

/* Width/Height Utilities */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

/* Display Utilities */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* ==========================================================================
   Visual Fixes and Enhancements
   ========================================================================== */

/* Smoother Font Rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Consistent Focus States */
*:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Enhanced Button Hover States */
.careerfy-employer-detail2-toparea-btn,
.jobsearch-job-list-btn a,
button[type="submit"],
input[type="submit"],
.careerfy-featured-listing-options a {
    transition: all var(--transition-normal);
}

.careerfy-employer-detail2-toparea-btn:hover,
.jobsearch-job-list-btn a:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Card Hover Effects */
.careerfy-joblisting-classic>ul>li,
.careerfy-candidate-grid>ul>li,
.careerfy-employer-view1>ul>li,
.careerfy-featured-listing>ul>li {
    transition: all var(--transition-normal);
}

.careerfy-joblisting-classic>ul>li:hover,
.careerfy-candidate-grid>ul>li:hover,
.careerfy-employer-view1>ul>li:hover,
.careerfy-featured-listing>ul>li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Better Link Transitions */
a {
    transition: color var(--transition-fast);
}

/* Form Input Enhancements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Responsive Enhancements
   ========================================================================== */

/* Improve touch targets on mobile */
@media (max-width: 768px) {

    button,
    a,
    input[type="submit"],
    .careerfy-featured-listing-options a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better spacing on mobile */
    .careerfy-main-content {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* Better tablet layout */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 2cm;
    }

    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Custom Global Fixes
   ========================================================================== */

/* --- FINAL FIX FOR JOB POSTS (Using ID #requirements) --- */

/* 1. HIDE the red arrow theme element */
#requirements ul li::before,
.jobsearch-description ul li::before {
    content: none !important;
    display: none !important;
}

/* 2. SET the standard black bullet */
#requirements ul li,
.jobsearch-description ul li {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin-left: 18px !important;
    /* Adjusts indentation */
    padding-left: 5px !important;
    /* Space between bullet and text */
    margin-bottom: 8px !important;
    display: list-item !important;
}

/* 3. FIX the text dropping to the next line */
#requirements ul li p,
.jobsearch-description ul li p {
    display: inline !important;
    /* Forces text to sit next to the bullet */
    margin: 0 !important;
    /* Removes the gap */
    padding: 0 !important;
}




/* REDUCE MOBILE HEADER GAP */
@media only screen and (max-width: 767px) {

    /* 1. Reduce main content top padding */
    .careerfy-main-content,
    .jobsearch-main-content {
        padding-top: 0px !important;
        /* Adjusted from default large padding */
    }

    /* 2. Remove/Reduce Subheader spacing if it exists */
    .careerfy-subheader,
    .careerfy-subheader-with-bg,
    .careerfy-subheader-without-bg {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
        min-height: auto !important;
        margin-bottom: 0px !important;
    }

    /* 3. If the gap is specifically from the banner section wrapper */
    .careerfy-banner-nine,
    .careerfy-banner-ten,
    .careerfy-banner-eleven,
    .careerfy-banner-twelve {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}







/* =========================================
   1. GENERAL STYLES (Global)
   ========================================= */

/* Fix Overlapping Star Icon on all badges globally */
.jobsearch-listing-featured-badge i::before,
.jobsearch-mobile-featured-badge i::before,
.jobsearch-desktop-featured-badge i::before,
.jobsearch-title-featured-badge i::before {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
}

/* Hide pseudo-element on the container span itself */
.jobsearch-listing-featured-badge::before,
.jobsearch-mobile-featured-badge::before,
.jobsearch-desktop-featured-badge::before {
    display: none !important;
}

/* Hide Mobile Badge by default */
.jobsearch-mobile-featured-badge {
    display: none !important;
}


/* =========================================
   2. DESKTOP SPECIFIC VIEW (Min-width 768px)
   ========================================= */
@media only screen and (min-width: 768px) {

    /* --- A. FEATURED BADGE & BUTTONS --- */

    /* Hide Mobile-specific elements */
    .jobsearch-mobile-featured-badge {
        display: none !important;
    }

    /* Hide default badges that might be in the title area */
    .jobsearch-joblisting-classic-wrap .jobsearch-pst-title .jobsearch-title-featured-badge,
    .jobsearch-joblisting-classic-wrap .jobsearch-pst-title>span,
    .jobsearch-joblisting-classic-wrap .jobsearch-list-option>span {
        display: none !important;
    }

    /* Right Align Everything in the Right Column */
    .jobsearch-table-cell:last-child {
        text-align: right !important;
        vertical-align: middle !important;
    }

    /* Stack Badge over Buttons, Align Right/Center */
    .jobsearch-user-options-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    /* Desktop Badge Style: Centered relative to buttons */
    .jobsearch-desktop-featured-badge {
        display: inline-block !important;
        background-color: #ffb607 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        margin-bottom: 8px !important;
        text-transform: uppercase;
        line-height: 1 !important;
        white-space: nowrap !important;
        align-self: center !important;
        /* Centers badge relative to the button group */
    }

    .jobsearch-desktop-featured-badge i {
        margin-right: 5px;
    }

    /* Buttons Wrapper: Side-by-side */
    .jobsearch-buttons-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    /* Reset Margins on buttons */
    .careerfy-joblisting-job-types a,
    .like-btn,
    .jobsearch-job-userlist a {
        margin: 0 !important;
    }

    /* --- B. FIX META LIST ALIGNMENT (FIXED) --- */
    /* Target the list specifically to remove default indentations */
    .jobsearch-joblisting-classic-wrap .jobsearch-joblisting-text ul {
        display: flex !important;
        flex-wrap: wrap !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        gap: 10px 20px !important;
        /* Spacing: 10px vertical, 20px horizontal */
        margin-bottom: 10px !important;
    }

    /* Force list items to have NO margin, fixing the wrap indent issue */
    .jobsearch-joblisting-classic-wrap .jobsearch-joblisting-text ul li,
    .jobsearch-joblisting-classic-wrap .jobsearch-joblisting-text ul li+li {
        padding: 0 !important;
        margin: 0 !important;
        /* Critical: Removes left margin that caused indent on wrap */
        list-style: none !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
    }

    /* Ensure icons inside list items align nicely */
    .jobsearch-joblisting-text ul li i {
        margin-right: 8px !important;
        margin-left: 0 !important;
        /* Ensure icon doesn't have left margin either */
    }
}


/* =========================================
   3. MOBILE SPECIFIC VIEW (Max-width 767px)
   ========================================= */
@media only screen and (max-width: 767px) {

    /* Hide Desktop elements */
    .jobsearch-desktop-featured-badge {
        display: none !important;
    }

    /* Reduce Header Gap */
    .careerfy-main-content,
    .jobsearch-main-content {
        padding-top: 0px !important;
    }

    .careerfy-subheader,
    .careerfy-subheader-with-bg,
    .careerfy-subheader-without-bg {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
        min-height: auto !important;
        margin-bottom: 0px !important;
    }

    .careerfy-banner-nine,
    .careerfy-banner-ten,
    .careerfy-banner-eleven,
    .careerfy-banner-twelve {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Main Container */
    .jobsearch-joblisting-classic-wrap {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 0 !important;
    }

    /* Logo */
    .jobsearch-joblisting-classic-wrap figure {
        width: 100px !important;
        height: auto !important;
        margin-bottom: 0px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
        background-color: transparent !important;
    }

    .jobsearch-joblisting-classic-wrap figure a,
    .jobsearch-joblisting-classic-wrap figure img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Text Alignment */
    .jobsearch-joblisting-text {
        width: 100% !important;
        text-align: left !important;
    }

    /* Title */
    .jobsearch-joblisting-text h2,
    .jobsearch-joblisting-text h2 a,
    h2.jobsearch-pst-title,
    .jobsearch-pst-title,
    h2.jobsearch-pst-title a {
        text-align: left !important;
        margin-top: 0 !important;
        padding-right: 0 !important;
        font-size: 18px !important;
        margin-bottom: 5px !important;
        line-height: 1.5 !important;
    }

    .jobsearch-title-featured-badge {
        display: none !important;
    }

    /* Meta Info */
    .careerfy-job-tag,
    .careerfy-job-location {
        font-weight: 600 !important;
        margin-bottom: 5px !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .jobsearch-joblisting-text ul.careerfy-job-time {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin: 5px 0 15px 0 !important;
        padding: 0 !important;
    }

    .jobsearch-joblisting-text ul li {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
        width: 100% !important;
        line-height: 1.4 !important;
        list-style: none !important;
    }

    .jobsearch-joblisting-text ul li:empty {
        display: none !important;
    }

    /* Right Column */
    .jobsearch-table-cell:last-child {
        margin-top: 0px !important;
        display: flex !important;
        justify-content: flex-start !important;
        /* Ensure Flex container aligns left */
        text-align: left !important;
        /* Force text align left */
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Buttons Wrapper - NEW STRUCTURE */
    /* This handles the container holding the buttons */
    .jobsearch-user-options-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Force items to start from left */
        gap: 15px !important;
        width: 100% !important;
    }

    /* This handles the inner wrapper for the buttons specifically */
    .jobsearch-buttons-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        margin: 0 !important;
    }

    /* Mobile Badge Style */
    .jobsearch-mobile-featured-badge {
        display: inline-flex !important;
        align-items: center;
        background-color: #ffb607 !important;
        color: #fff !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 20px !important;
        line-height: 1 !important;
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap;
        margin: 0 !important;
    }

    .jobsearch-mobile-featured-badge i {
        margin-right: 5px;
    }

    /* Ensure buttons behave */
    .careerfy-joblisting-job-types a,
    .like-btn {
        width: auto !important;
        margin: 0 !important;
        display: inline-block !important;
    }
}




/* =========================================
   7. STYLE 3 MOBILE FIXES
   (Includes Desktop/Tablet visibility logic)
   ========================================= */

/* 1. HIDE Mobile Badge on Desktop/Tablet (Screens 768px and wider) */
@media only screen and (min-width: 768px) {
    .careerfy-mobile-featured-style9 {
        display: none !important;
    }

    /* Ensure the desktop badge is visible and styled nicely */
    .jobsearch-desktop-featured-badge {
        display: inline-block !important;
        background-color: #ffb607 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        vertical-align: middle !important;
        margin-left: 10px !important;
        line-height: 1.5 !important;
        text-transform: uppercase;
    }
}

/* 2. MOBILE STYLES (Screens 767px and narrower) */
@media only screen and (max-width: 767px) {

    /* Hide the Desktop Badge on Mobile */
    .jobsearch-desktop-featured-badge {
        display: none !important;
    }

    /* Layout & Alignment */
    .careerfy-joblisting-plain .careerfy-joblisting-plain-wrap,
    .careerfy-joblisting-plain-left ul,
    .careerfy-joblisting-view4 .careerfy-job-skills {
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        display: block !important;
    }

    .careerfy-joblisting-plain-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
        gap: 0 !important;
    }

    /* Logo Fix */
    .careerfy-joblisting-plain-wrap figure {
        width: 115px !important;
        margin-bottom: 5px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
    }

    .careerfy-joblisting-plain-wrap figure a,
    .careerfy-joblisting-plain-wrap figure img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    /* Text Container */
    .careerfy-joblisting-plain-text,
    .careerfy-joblisting-plain-left {
        width: 100% !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Title Spacing */
    .careerfy-joblisting-plain .careerfy-joblisting-plain-text h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 8px !important;
        text-align: left !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* Mobile Featured Badge Styling */
    span.careerfy-mobile-featured-style9 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background-color: #ffb607 !important;
        color: #ffffff !important;
        padding: 5px 12px !important;
        border-radius: 50px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 12px !important;
        line-height: 1 !important;
        width: auto !important;
    }

    span.careerfy-mobile-featured-style9 i {
        color: #ffffff !important;
        margin-right: 5px !important;
        background: none !important;
        display: inline-block !important;
    }

    span.careerfy-mobile-featured-style9 i::before {
        background: none !important;
        width: auto !important;
    }

    /* Right Section (Buttons & Heart) */
    .careerfy-joblisting-plain-right {
        text-align: left !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    /* Job Type Button Fix */
    .careerfy-joblisting-plain .careerfy-joblisting-job-types,
    .careerfy-joblisting-plain-right .careerfy-joblisting-job-types {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        line-height: 1 !important;
        margin-right: 10px !important;
    }

    .careerfy-joblisting-plain .careerfy-joblisting-job-types a,
    .careerfy-joblisting-plain-right .careerfy-joblisting-job-types a {
        display: inline-block !important;
        margin: 0 !important;
        padding: 8px 20px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: normal !important;
        height: auto !important;
        width: auto !important;
        min-width: 80px !important;
        text-align: center !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        float: none !important;
    }

    /* Heart Icon Fix */
    .careerfy-joblisting-plain-right .careerfy-like-list {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }

    .careerfy-joblisting-plain-right .careerfy-job-like {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Cleanup */
    .jobsearch-old-desktop-featured,
    .careerfy-joblisting-plain-right small {
        display: none !important;
    }
}



/* =========================================
   9. RELATED JOBS FIX (Final Corrected)
   Fixes "Squashed Text" & Location Alignment
   ========================================= */

/* --- 1. GLOBAL & DESKTOP (Side-by-Side) --- */
.jobsearch-main-content .jobsearch-joblisting-classic-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 20px !important;
    gap: 15px !important;
}

.jobsearch-main-content .jobsearch-joblisting-classic-wrap figure {
    flex: 0 0 70px !important;
    margin: 0 !important;
    display: block !important;
}

/* Main Text Container */
.jobsearch-main-content .jobsearch-joblisting-text {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /* Desktop: Side-by-side */
    width: auto !important;
    margin: 0 !important;
}

/* Title Area */
.jobsearch-main-content .jobsearch-list-option {
    flex: 1 1 auto !important;
    margin-right: 15px !important;
    min-width: 0 !important;
}

/* Fix Title Link */
.jobsearch-main-content .jobsearch-list-option h2 a {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: block !important;
}

/* Buttons Area */
.jobsearch-main-content .jobsearch-job-userlist {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* FIX: Location Icon & Text Alignment */
.jobsearch-main-content .jobsearch-list-option ul li {
    display: flex !important;
    /* Aligns Icon & Text in a row */
    align-items: flex-start !important;
    /* Icon stays at top of text block */
    gap: 8px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    /* Allows text to wrap naturally */
    width: 100% !important;
    /* Ensures it fills the container */
}

.jobsearch-main-content .jobsearch-list-option ul li i {
    flex-shrink: 0 !important;
    /* Prevents icon from squashing */
    margin-top: 4px !important;
    /* Align icon visually with first line of text */
    float: none !important;
}

/* --- 2. TABLET & MOBILE (Max-Width 991px) --- */
/* This forces the layout to Stack Vertically */
@media only screen and (max-width: 991px) {

    /* Force Text Container to Stack Items */
    .jobsearch-main-content .jobsearch-joblisting-text {
        flex-direction: column !important;
        /* Puts Title TOP, Buttons BOTTOM */
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* Force Title Area to Full Width */
    .jobsearch-main-content .jobsearch-list-option {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        /* Space between Title and Buttons */
        white-space: normal !important;
    }

    /* Force Buttons to Align Left */
    .jobsearch-main-content .jobsearch-job-userlist {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}

/* --- 3. SMALL MOBILE (Max-Width 480px) --- */
/* Additional cleanup for very small screens */
@media only screen and (max-width: 480px) {
    .jobsearch-main-content .jobsearch-joblisting-classic-wrap {
        flex-direction: column !important;
        /* Stacks Logo on top of Text */
    }

    .jobsearch-main-content .jobsearch-joblisting-classic-wrap figure {
        margin-bottom: 15px !important;
    }
}

.careerfy-fifteen-banner-inner {
    position: relative;
    z-index: 2;
}

/* Title Styling */
.careerfy-fifteen-banner h1 {
    font-size: clamp(36px, 5vw, 65px);
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.5px;
    animation: fadeInUp 0.6s ease-out;
}

.careerfy-fifteen-banner span.careerfy-fifteen-banner-description {
    font-size: clamp(16px, 2vw, 20px);
    opacity: 0.95;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

/* Tabs Container - Modern Design */
.careerfy-fifteen-banner-tabs {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

/* Tab Links - Modern Style */
.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li a {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px 10px 0 0;
    background: var(--search-tab-inactive-bg);
    color: var(--search-tab-inactive-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li a:hover::before {
    left: 100%;
}

.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li a:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Active Tab - Prominent Style */
.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li.active a {
    background: var(--search-form-bg);
    color: var(--color-text-dark);
    border-color: var(--search-form-bg);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li.active a:hover {
    transform: translateY(-2px);
}

/* Form Container - Glassmorphism Effect */
.careerfy-fifteen-banner-tabs .tab-content {
    background: var(--search-form-bg);
    backdrop-filter: blur(var(--search-form-blur));
    -webkit-backdrop-filter: blur(var(--search-form-blur));
    padding: 30px;
    border-radius: 0 16px 16px 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    box-sizing: border-box;
}

/* Search Form Container */
.careerfy-fifteen-banner-search {
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.careerfy-fifteen-banner-search ul {
    gap: 15px;
    align-items: stretch;
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

/* Form Fields */
.careerfy-fifteen-banner-search ul li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Submit button field - fixed width, don't grow */
.careerfy-fifteen-banner-search ul li:last-child {
    flex: 0 0 auto;
    min-width: auto;
    width: auto;
}

.careerfy-fifteen-banner-search ul li>div {
    width: 100%;
    height: 100%;
}

/* Input Fields - Modern Style */
.careerfy-fifteen-banner-search input[type="text"] {
    background: var(--search-input-bg);
    border: 2px solid var(--search-input-border);
    border-radius: var(--radius-md);
    height: 52px;
    padding: 10px 20px;
    font-size: 15px;
    color: var(--color-text-dark);
    transition: all var(--transition-normal);
}

.careerfy-fifteen-banner-search input[type="text"]::placeholder {
    color: var(--color-text-light);
    transition: opacity var(--transition-fast);
}

.careerfy-fifteen-banner-search input[type="text"]:focus {
    background: #ffffff;
    border-color: var(--search-input-focus);
    box-shadow: 0 0 0 4px rgba(19, 181, 234, 0.15);
    outline: none;
}

.careerfy-fifteen-banner-search input[type="text"]:focus::placeholder {
    opacity: 0.5;
}

/* Select Fields (Selectize) - Modern Style */
.careerfy-fifteen-banner .selectize-control.single .selectize-input,
.careerfy-fifteen-banner .selectize-control {
    height: 100%;
}

.careerfy-fifteen-banner .selectize-input {
    background: var(--search-input-bg) !important;
    border: 2px solid var(--search-input-border) !important;
    border-radius: var(--radius-md) !important;
    height: 52px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    transition: all var(--transition-normal) !important;
    box-shadow: none !important;
}

.careerfy-fifteen-banner .selectize-input.focus {
    background: #ffffff !important;
    border-color: var(--search-input-focus) !important;
    box-shadow: 0 0 0 4px rgba(19, 181, 234, 0.15) !important;
}

.careerfy-fifteen-banner .selectize-dropdown {
    border: 2px solid var(--search-input-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 5px !important;
    overflow: hidden;
}

.careerfy-fifteen-banner .selectize-dropdown-content .option {
    padding: 12px 20px !important;
    transition: background var(--transition-fast) !important;
}

.careerfy-fifteen-banner .selectize-dropdown-content .option:hover,
.careerfy-fifteen-banner .selectize-dropdown-content .option.active {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

/* Submit Button - Modern Style */
.careerfy-fifteen-banner-search input[type="submit"] {
    background: var(--search-btn-bg);
    border: none;
    border-radius: var(--radius-md);
    height: 52px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.3px;
}

.careerfy-fifteen-banner-search input[type="submit"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.careerfy-fifteen-banner-search input[type="submit"]:hover {
    background: var(--search-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(19, 181, 234, 0.4);
}

.careerfy-fifteen-banner-search input[type="submit"]:hover::before {
    width: 300px;
    height: 300px;
}

.careerfy-fifteen-banner-search input[type="submit"]:active {
    transform: translateY(0);
}

/* Location Button - Modern Style */
.careerfy-fifteen-banner a.geolction-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--transition-normal);
    z-index: 5;
}

.careerfy-fifteen-banner a.geolction-btn i {
    font-size: 18px;
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.careerfy-fifteen-banner a.geolction-btn:hover {
    background: var(--color-primary);
}

.careerfy-fifteen-banner a.geolction-btn:hover i {
    color: #ffffff;
}

/* Radius Tooltip - Modern Style */
.careerfy-fifteen-banner-search ul li .careerfy-radius-tooltip {
    position: absolute;
    top: -55px;
    left: 0;
    background: #ffffff;
    padding: 10px 15px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10;
    width: auto;
    min-width: 200px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.careerfy-fifteen-banner-search ul li:hover .careerfy-radius-tooltip,
.careerfy-fifteen-banner-search ul li:focus-within .careerfy-radius-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.careerfy-fifteen-banner-search ul li .careerfy-radius-tooltip label {
    font-size: 13px;
    color: var(--color-text-medium);
    white-space: nowrap;
    margin: 0;
}

.careerfy-fifteen-banner-search ul li .careerfy-radius-tooltip input[type="number"] {
    width: 70px;
    height: 36px;
    border: 2px solid var(--search-input-border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 14px;
    text-align: center;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Enhancements */
@media only screen and (max-width: 1200px) {
    .careerfy-fifteen-banner-inner {
        width: 80%;
    }
}

@media only screen and (max-width: 991px) {
    .careerfy-fifteen-banner-inner {
        width: 100%;
    }

    .careerfy-fifteen-banner h1 {
        font-size: 36px;
    }

    .careerfy-fifteen-banner-tabs .tab-content {
        padding: 25px;
        border-radius: 0 0 16px 16px;
    }

    .careerfy-fifteen-banner-search ul {
        flex-wrap: wrap;
    }

    .careerfy-fifteen-banner-search ul li {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }

    .careerfy-fifteen-banner-search ul li:last-child {
        flex: 1 1 100%;
    }

    .careerfy-fifteen-banner-search input[type="submit"] {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav {
        flex-direction: column;
        gap: 5px;
    }

    .careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li a {
        border-radius: var(--radius-md);
        justify-content: center;
        padding: 12px 20px;
    }

    .careerfy-fifteen-banner-tabs .careerfy-banner-eleven-tabs-nav li.active a {
        border-radius: var(--radius-md);
    }

    .careerfy-fifteen-banner-tabs .tab-content {
        border-radius: var(--radius-lg);
        margin-top: 10px;
    }

    .careerfy-fifteen-banner-search ul li {
        flex: 1 1 100%;
    }
}

@media only screen and (max-width: 480px) {
    .careerfy-fifteen-banner h1 {
        font-size: 28px;
    }

    .careerfy-fifteen-banner-tabs .tab-content {
        padding: 20px 15px;
    }

    .careerfy-fifteen-banner-search input[type="text"],
    .careerfy-fifteen-banner .selectize-input,
    .careerfy-fifteen-banner-search input[type="submit"] {
        height: 48px !important;
    }
}