/* ========================================
   MANATAL JOBS INTEGRATION - FRONTEND STYLES
   Self-contained CSS framework for universal theme compatibility
   Version: 2.0.0 - Theme Independent
======================================== */

/* CSS Custom Properties - Complete Design System */
.manatal-plugin-wrapper,
.manatal-jobs-listing,
.manatal-job-details,
.manatal-application-form {
    /* Color System - Inherit from theme where possible */
    --mj-primary: var(--wp--preset--color--primary, var(--theme-primary, var(--primary-color, #2F68CB)));
    --mj-primary-hover: var(--wp--preset--color--primary-hover, var(--theme-primary-hover, color-mix(in srgb, var(--mj-primary) 85%, black)));
    --mj-primary-light: var(--wp--preset--color--primary-light, var(--theme-primary-light, color-mix(in srgb, var(--mj-primary) 20%, white)));
    --mj-secondary: var(--wp--preset--color--secondary, var(--theme-secondary, #64748b));
    --mj-secondary-hover: var(--wp--preset--color--secondary-hover, var(--theme-secondary-hover, #475569));
    --mj-accent: #06b6d4;
    --mj-success: #059669;
    --mj-success-light: #d1fae5;
    --mj-warning: #d97706;
    --mj-warning-light: #fed7aa;
    --mj-error: #dc2626;
    --mj-error-light: #fee2e2;
    --mj-info: #0891b2;
    --mj-info-light: #cffafe;
    
    /* Neutral Colors - Use theme colors where available */
    --mj-white: var(--wp--preset--color--white, var(--theme-background, #ffffff));
    --mj-black: var(--wp--preset--color--black, var(--theme-foreground, #000000));
    --mj-gray-50: var(--wp--preset--color--gray-50, #f8fafc);
    --mj-gray-100: var(--wp--preset--color--gray-100, #f1f5f9);
    --mj-gray-200: var(--wp--preset--color--gray-200, #e2e8f0);
    --mj-gray-300: var(--wp--preset--color--gray-300, #cbd5e1);
    --mj-gray-400: var(--wp--preset--color--gray-400, #94a3b8);
    --mj-gray-500: var(--wp--preset--color--gray-500, #64748b);
    --mj-gray-600: var(--wp--preset--color--gray-600, #475569);
    --mj-gray-700: var(--wp--preset--color--gray-700, #334155);
    --mj-gray-800: var(--wp--preset--color--gray-800, #1e293b);
    --mj-gray-900: var(--wp--preset--color--gray-900, var(--theme-text, #0f172a));
    
    /* Typography System - Inherit from theme */
    --mj-font-family-base: inherit;
    --mj-font-family-heading: inherit;
    
    /* Font Sizes - Relative to theme base size */
    --mj-text-xs: 0.75em;     /* 75% of base */
    --mj-text-sm: 0.875em;    /* 87.5% of base */
    --mj-text-base: 1em;      /* Same as base */
    --mj-text-lg: 1.125em;    /* 112.5% of base */
    --mj-text-xl: 1.25em;     /* 125% of base */
    --mj-text-2xl: 1.5em;     /* 150% of base */
    --mj-text-3xl: 1.875em;   /* 187.5% of base */
    --mj-text-4xl: 2.25em;    /* 225% of base */
    
    /* Font Weights */
    --mj-font-normal: 400;
    --mj-font-medium: 500;
    --mj-font-semibold: 600;
    --mj-font-bold: 700;
    
    /* Spacing System (4px base) */
    --mj-space-0: 0;
    --mj-space-1: 0.25rem;     /* 4px */
    --mj-space-2: 0.5rem;      /* 8px */
    --mj-space-3: 0.75rem;     /* 12px */
    --mj-space-4: 1rem;        /* 16px */
    --mj-space-5: 1.25rem;     /* 20px */
    --mj-space-6: 1.5rem;      /* 24px */
    --mj-space-8: 2rem;        /* 32px */
    --mj-space-10: 2.5rem;     /* 40px */
    --mj-space-12: 3rem;       /* 48px */
    --mj-space-16: 4rem;       /* 64px */
    --mj-space-20: 5rem;       /* 80px */
    
    /* Border Radius */
    --mj-radius-sm: 0.25rem;
    --mj-radius: 0.5rem;
    --mj-radius-lg: 0.75rem;
    --mj-radius-xl: 1rem;
    --mj-radius-full: 9999px;
    
    /* Shadows */
    --mj-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --mj-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --mj-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --mj-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --mj-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --mj-transition-fast: all 0.1s ease-in-out;
    --mj-transition: all 0.15s ease-in-out;
    --mj-transition-slow: all 0.3s ease-in-out;
    
    /* Breakpoints for responsive design */
    --mj-screen-sm: 640px;
    --mj-screen-md: 768px;
    --mj-screen-lg: 1024px;
    --mj-screen-xl: 1280px;
    --mj-screen-2xl: 1536px;
}

/* ========================================
   CSS RESET & BASE STYLES FOR PLUGIN
======================================== */

/* Reset for plugin components only */
.manatal-jobs-listing *,
.manatal-job-details *,
.manatal-application-form * {
    box-sizing: border-box;
}

/* Plugin wrapper base styles */
.manatal-jobs-listing,
.manatal-job-details,
.manatal-application-form {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure job details page starts at the very top */
.manatal-job-details {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   UTILITY CLASSES - SELF CONTAINED
======================================== */

/* Layout Utilities */
.mj-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--mj-space-2);
}

.mj-container-sm {
    max-width: 640px;
}

.mj-container-md {
    max-width: 768px;
}

.mj-container-lg {
    max-width: 1024px;
}

/* Jobs List Container - Center form cards and job listings */
.jobs-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mj-space-3);
}

/* Flexbox utilities */
.mj-flex {
    display: flex;
}

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

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

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

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

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

.mj-flex-1 {
    flex: 1 1 0%;
}

/* Grid system */
.mj-grid {
    display: grid;
}

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

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

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

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

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

.mj-gap-8 {
    gap: var(--mj-space-8);
}

/* Spacing utilities */
.mj-p-0 { padding: 0; }
.mj-p-2 { padding: var(--mj-space-2); }
.mj-p-4 { padding: var(--mj-space-4); }
.mj-p-6 { padding: var(--mj-space-6); }
.mj-p-8 { padding: var(--mj-space-8); }

.mj-px-4 { padding-left: var(--mj-space-4); padding-right: var(--mj-space-4); }
.mj-py-2 { padding-top: var(--mj-space-2); padding-bottom: var(--mj-space-2); }
.mj-py-4 { padding-top: var(--mj-space-4); padding-bottom: var(--mj-space-4); }
.mj-py-6 { padding-top: var(--mj-space-6); padding-bottom: var(--mj-space-6); }
.mj-py-8 { padding-top: var(--mj-space-8); padding-bottom: var(--mj-space-8); }

.mj-m-0 { margin: 0; }
.mj-m-2 { margin: var(--mj-space-2); }
.mj-m-4 { margin: var(--mj-space-4); }
.mj-mt-2 { margin-top: var(--mj-space-2); }
.mj-mt-4 { margin-top: var(--mj-space-4); }
.mj-mb-4 { margin-bottom: var(--mj-space-4); }
.mj-mb-6 { margin-bottom: var(--mj-space-6); }
.mj-mb-8 { margin-bottom: var(--mj-space-8); }

/* Display utilities */
.mj-hidden {
    display: none;
}

.mj-block {
    display: block;
}

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

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

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

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

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

.mj-text-xs { font-size: var(--mj-text-xs); }
.mj-text-sm { font-size: var(--mj-text-sm); }
.mj-text-base { font-size: var(--mj-text-base); }
.mj-text-lg { font-size: var(--mj-text-lg); }
.mj-text-xl { font-size: var(--mj-text-xl); }
.mj-text-2xl { font-size: var(--mj-text-2xl); }
.mj-text-3xl { font-size: var(--mj-text-3xl); }
.mj-text-4xl { font-size: var(--mj-text-4xl); }

.mj-font-normal { font-weight: var(--mj-font-normal); }
.mj-font-medium { font-weight: var(--mj-font-medium); }
.mj-font-semibold { font-weight: var(--mj-font-semibold); }
.mj-font-bold { font-weight: var(--mj-font-bold); }

/* Color utilities */
.mj-text-gray-600 { color: var(--mj-gray-600); }
.mj-text-gray-700 { color: var(--mj-gray-700); }
.mj-text-gray-800 { color: var(--mj-gray-800); }
.mj-text-gray-900 { color: var(--mj-gray-900); }
.mj-text-primary { color: var(--mj-primary); }
.mj-text-white { color: var(--mj-white); }

/* Background utilities */
.mj-bg-white { background-color: var(--mj-white); }
.mj-bg-gray-50 { background-color: var(--mj-gray-50); }
.mj-bg-gray-100 { background-color: var(--mj-gray-100); }
.mj-bg-primary { background-color: var(--mj-primary); }

/* Border utilities */
.mj-border { border: 1px solid var(--mj-gray-200); }
.mj-border-gray-300 { border-color: var(--mj-gray-300); }
.mj-rounded { border-radius: var(--mj-radius); }
.mj-rounded-lg { border-radius: var(--mj-radius-lg); }
.mj-rounded-xl { border-radius: var(--mj-radius-xl); }
.mj-rounded-full { border-radius: var(--mj-radius-full); }

/* Shadow utilities */
.mj-shadow { box-shadow: var(--mj-shadow); }
.mj-shadow-md { box-shadow: var(--mj-shadow-md); }
.mj-shadow-lg { box-shadow: var(--mj-shadow-lg); }

/* ========================================
   BUTTON COMPONENTS - SELF CONTAINED
======================================== */

.mj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mj-space-3) var(--mj-space-6);
    border-radius: var(--mj-radius);
    line-height: 1.25;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--mj-transition);
    outline: none;
    user-select: none;
    white-space: nowrap;
}

/* Button typography - shortcode only (NOT Elementor widgets) */
:not(.elementor-widget-manatal_application_form):not(.elementor-widget-manatal_job_details) .mj-btn {
    font-size: var(--mj-text-base);
    font-weight: var(--mj-font-medium);
}

.mj-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--mj-primary-light);
}

.mj-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary button */
.mj-btn-primary {
    background-color: var(--mj-primary);
    color: var(--mj-white);
    border-color: var(--mj-primary);
}

.mj-btn-primary:hover:not(:disabled) {
    background-color: var(--mj-primary-hover);
    border-color: var(--mj-primary-hover);
    color: var(--mj-white);
}

/* Secondary button */
.mj-btn-secondary {
    background-color: var(--mj-white);
    color: var(--mj-gray-700);
    border-color: var(--mj-gray-300);
}

.mj-btn-secondary:hover:not(:disabled) {
    background-color: var(--mj-gray-50);
    color: var(--mj-gray-900);
}

/* Button sizes */
.mj-btn-sm {
    padding: var(--mj-space-2) var(--mj-space-4);
    font-size: var(--mj-text-sm);
}

.mj-btn-lg {
    padding: var(--mj-space-4) var(--mj-space-8);
    font-size: var(--mj-text-lg);
}

/* ========================================
   FORM COMPONENTS - SELF CONTAINED
======================================== */

.mj-form-group {
    margin-bottom: var(--mj-space-6);
}

.mj-label {
    display: block;
    font-size: var(--mj-text-sm);
    font-weight: var(--mj-font-medium);
    color: var(--mj-gray-700);
    margin-bottom: var(--mj-space-2);
}

.mj-input,
.mj-select,
.mj-textarea {
    appearance: none;
    background-color: var(--mj-white);
    border: 1px solid var(--mj-gray-300);
    border-radius: var(--mj-radius);
    padding: var(--mj-space-3) var(--mj-space-4);
    font-size: var(--mj-text-base);
    line-height: 1.25;
    color: var(--mj-gray-900);
    width: 100%;
    transition: var(--mj-transition);
}

.mj-input:focus,
.mj-select:focus,
.mj-textarea:focus {
    outline: none;
    border-color: var(--mj-primary);
    box-shadow: 0 0 0 1px var(--mj-primary);
}

.mj-input::placeholder,
.mj-textarea::placeholder {
    color: var(--mj-gray-400);
}

.mj-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--mj-space-3) center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: var(--mj-space-10);
}

/* Input with icon */
.mj-input-wrapper {
    position: relative;
}

.mj-input-icon {
    position: absolute;
    left: var(--mj-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mj-gray-400);
    pointer-events: none;
    z-index: 10;
    font-size: 1em;
    width: 14px;
    text-align: center;
}

/* FontAwesome icon support */
.mj-input-icon.fa-solid,
.mj-input-icon.fa-regular,
.mj-input-icon.fa-brands,
i.fa-solid,
i.fa-regular,
i.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", sans-serif;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

.mj-input-icon.fa-solid,
i.fa-solid {
    font-weight: 900;
}

.mj-input-icon.fa-regular,
i.fa-regular {
    font-weight: 400;
}

.mj-input-icon.fa-brands,
i.fa-brands {
    font-weight: 400;
}

.mj-input-with-icon {
    padding-left: var(--mj-space-12);
}

/* ========================================
   CARD COMPONENTS
======================================== */

.mj-card {
    background-color: var(--mj-white);
    border-radius: var(--mj-radius-lg);
    box-shadow: var(--mj-shadow);
    border: 1px solid var(--mj-gray-200);
    overflow: hidden;
    transition: var(--mj-transition);
}

.mj-card:hover {
    box-shadow: var(--mj-shadow-md);
    transform: translateY(-1px);
}

.mj-card-header {
    padding: var(--mj-space-6);
    border-bottom: 1px solid var(--mj-gray-200);
}

.mj-card-body {
    padding: var(--mj-space-6);
}

.mj-card-footer {
    padding: var(--mj-space-6);
    border-top: 1px solid var(--mj-gray-200);
    background-color: var(--mj-gray-50);
}

/* ========================================
   BADGE COMPONENTS
======================================== */

.mj-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--mj-space-1) var(--mj-space-3);
    border-radius: var(--mj-radius-full);
    font-size: var(--mj-text-xs);
    font-weight: var(--mj-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

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

.mj-badge-success {
    background-color: var(--mj-success-light);
    color: var(--mj-success);
}

.mj-badge-gray {
    background-color: var(--mj-gray-100);
    color: var(--mj-gray-700);
}

/* ========================================
   ALERT COMPONENTS
======================================== */

.mj-alert {
    display: flex;
    align-items: flex-start;
    padding: var(--mj-space-4);
    border-radius: var(--mj-radius);
    border: 1px solid transparent;
    margin-bottom: var(--mj-space-4);
}

.mj-alert-info {
    background-color: var(--mj-info-light);
    border-color: var(--mj-info);
    color: var(--mj-info);
}

.mj-alert-warning {
    background-color: var(--mj-warning-light);
    border-color: var(--mj-warning);
    color: var(--mj-warning);
}

.mj-alert-error {
    background-color: var(--mj-error-light);
    border-color: var(--mj-error);
    color: var(--mj-error);
}

/* ========================================
   ICON FONT COMPATIBILITY
======================================== */

/* FontAwesome icon replacements with CSS */
.mj-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.mj-icon-search::before {
    content: "🔍";
}

.mj-icon-location::before {
    content: "📍";
}

.mj-icon-briefcase::before {
    content: "💼";
}

.mj-icon-calendar::before {
    content: "📅";
}

.mj-icon-arrow-right::before {
    content: "→";
}


/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 768px) {
    .mj-container {
        padding: 0 var(--mj-space-3);
    }
    
    .mj-text-responsive-lg {
        font-size: var(--mj-text-lg);
    }
    
    .mj-text-responsive-2xl {
        font-size: var(--mj-text-xl);
    }
    
    .mj-grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 640px) {
    .mj-btn {
        padding: var(--mj-space-3) var(--mj-space-4);
        font-size: var(--mj-text-sm);
    }
    
    .mj-card-body {
        padding: var(--mj-space-4);
    }
    
    .mj-grid-cols-3,
    .mj-grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ========================================
   PLUGIN SPECIFIC COMPONENTS
======================================== */

/* Job Count Section */
.jobs-count-section {
    background: transparent;
    padding: var(--mj-space-6) 0 var(--mj-space-4) 0;
}

.jobs-count-section .mj-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--mj-space-2);
}

.jobs-count-wrapper {
    text-align: center;
}

.jobs-count-info {
    color: #1a1a1a;
    font-size: var(--mj-text-xl);
    font-weight: var(--mj-font-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mj-space-2);
}

.jobs-count-info .mj-icon-left,
.jobs-count-info .mj-icon-right {
    color: var(--mj-primary);
    font-size: var(--mj-text-lg);
}

.jobs-count-info #jobs-count-text {
    color: #1a1a1a;
}

.jobs-count-info #current-count,
.jobs-count-info #total-count {
    color: var(--mj-primary);
    font-weight: var(--mj-font-bold);
}

/* Search Section - Modern External Script Design */
.jobs-search-section {
    background: transparent;
    padding: var(--mj-space-4) 0;
    margin-bottom: var(--mj-space-6);
    display: flex;
    justify-content: center;
}

.jobs-search-section .mj-container {
    width: 95%;
    margin: 0 auto;
    padding: 0 var(--mj-space-2);
}

.jobs-search-wrapper {
    width: 100%;
    margin: 0 auto;
}

.jobs-search-form {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.jobs-search-form:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--mj-gray-300);
}

/* Search form inputs alignment */
.jobs-search-form .mj-input-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

.jobs-search-form .mj-input,
.jobs-search-form .mj-select {
    width: 100%;
    padding: 16px 16px 16px 50px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    background: #ffffff;
    transition: all 0.2s ease;
    height: 60px;
    line-height: 1.4;
    font-family: inherit;
}

/* Add extra padding to input/select when clear button is visible */
.jobs-search-form .mj-input-with-icon,
.jobs-search-form .mj-select.mj-input-with-icon {
    padding-right: 50px;
}

.jobs-search-form .mj-input:focus,
.jobs-search-form .mj-select:focus {
    outline: none;
    border-color: #2F68CB;
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1);
}

.jobs-search-form .mj-input-with-icon {
    padding-left: 50px;
}

.jobs-search-form .mj-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 1.6rem;
    z-index: 2;
    width: auto;
    height: auto;
    opacity: 1;
}

/* FontAwesome icons in search forms */
.jobs-search-form .mj-input-icon.fa-solid,
.jobs-search-form .mj-input-icon.fa-regular,
.jobs-search-form .mj-input-icon.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", sans-serif;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jobs-search-form .mj-input-icon.fa-solid {
    font-weight: 900;
}

.jobs-search-form .mj-input-icon.fa-regular {
    font-weight: 400;
}

/* Modern grid layout for search form */
.jobs-search-form .mj-grid {
    display: grid;
    grid-template-columns: 1fr 300px auto;
    gap: 20px;
    align-items: end;
}

.jobs-search-form .mj-grid > * {
    position: relative;
}

/* =========================
   JOB HERO SECTION
   ========================= */

.job-hero-section {
    position: relative;
    background: #2F68CB !important;
    background: var(--mj-primary) !important;
    color: var(--mj-white);
    padding: var(--mj-space-6) var(--mj-space-4) var(--mj-space-8) var(--mj-space-4);
    margin: 0 calc(50% - 50vw) var(--mj-space-8) calc(50% - 50vw) !important;
    width: 100vw;
    box-sizing: border-box;
}

/* Reset any parent margins/padding that might cause top gap */
.job-hero-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: #2F68CB !important;
    background: var(--mj-primary) !important;
    z-index: -1;
}

/* Make hero section container full width */
.job-hero-section .mj-container {
    max-width: none;
    padding: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    font-family: inherit;
    font-size: inherit;
}

.mj-hero-content {
    width: 100%;
    margin: 0 auto;
    padding: var(--mj-space-4) var(--mj-space-6);
    font-family: inherit !important;
}

.job-hero-info {
    text-align: center;
    font-family: inherit !important;
}

/* Hero title - Base styles (margin and color only) */
.hero-job-title {
    margin-bottom: var(--mj-space-4);
    color: var(--mj-white);
    /* Reset to allow h1 to use theme typography instead of inheriting from wrapper */
    font-size: revert;
    font-family: revert;
    font-weight: revert;
    line-height: revert;
}

/* Elementor widgets: Typography is controlled by Elementor with !important */
/* Shortcode: Uses theme's h1 styles via revert */

.hero-job-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mj-space-2);
    font-size: var(--mj-text-lg);
    font-family: inherit !important;
    margin-bottom: var(--mj-space-6);
    color: rgba(255, 255, 255, 0.9);
}

.hero-job-location .mj-icon {
    font-size: 1.2em;
}

.hero-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mj-space-3);
    justify-content: center;
    margin-bottom: var(--mj-space-6);
    font-family: inherit !important;
}

.hero-tag {
    padding: var(--mj-space-1) var(--mj-space-3);
    border-radius: var(--mj-radius-lg);
    font-size: var(--mj-text-xs);
    font-weight: var(--mj-font-medium);
    font-family: inherit !important;
    background: rgba(255, 255, 255, 0.95);
    color: var(--mj-gray-800);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--mj-transition);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hero-tag:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Remote tag - Blue accent */
.hero-tag.tag-remote {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mj-primary);
    border-color: var(--mj-primary);
}

.hero-tag.tag-remote:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--mj-primary-hover);
    border-color: var(--mj-primary-hover);
}

/* Job type tag - Black accent */
.hero-tag.tag-type {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mj-black);
    border-color: var(--mj-black);
}

.hero-tag.tag-type:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--mj-gray-900);
    border-color: var(--mj-gray-900);
}

/* Experience tag - Blue accent */
.hero-tag.tag-experience {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mj-primary);
    border-color: var(--mj-primary);
}

.hero-tag.tag-experience:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--mj-primary-hover);
    border-color: var(--mj-primary-hover);
}

/* Department tag - Black accent */
.hero-tag.tag-department {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mj-black);
    border-color: var(--mj-black);
}

.hero-tag.tag-department:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--mj-gray-900);
    border-color: var(--mj-gray-900);
}

/* Default tag - White with dark text */
.hero-tag:not(.tag-remote):not(.tag-type):not(.tag-experience):not(.tag-department) {
    background: rgba(255, 255, 255, 0.75);
    color: var(--mj-gray-800);
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-tag:not(.tag-remote):not(.tag-type):not(.tag-experience):not(.tag-department):hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--mj-gray-900);
    border-color: rgba(255, 255, 255, 0.6);
}

.hero-share-section {
    text-align: center;
    font-family: inherit !important;
}

.share-label {
    display: block;
    font-size: var(--mj-text-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--mj-space-3);
}

.share-buttons {
    display: flex;
    gap: var(--mj-space-3);
    justify-content: center;
    flex-wrap: wrap;
    font-family: inherit !important;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--mj-radius-full);
    color: var(--mj-gray-700);
    text-decoration: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: var(--mj-transition);
    font-size: 1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.share-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--mj-gray-800);
    text-decoration: none;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Individual social button styling */
.share-facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: var(--mj-white);
}

.share-facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
    color: var(--mj-white);
}

.share-twitter {
    background: #000000;
    border-color: #000000;
    color: var(--mj-white) !important;
}

.share-twitter i {
    color: var(--mj-white) !important;
}

.share-twitter:hover {
    background: #333333;
    border-color: #333333;
    color: var(--mj-white) !important;
}

.share-twitter:hover i {
    color: var(--mj-white) !important;
}

.share-linkedin {
    background: #0077b5;
    border-color: #0077b5;
    color: var(--mj-white);
}

.share-linkedin:hover {
    background: #005885;
    border-color: #005885;
    color: var(--mj-white);
}

.share-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: var(--mj-white);
}

.share-whatsapp:hover {
    background: #1fb854;
    border-color: #1fb854;
    color: var(--mj-white);
}

.share-copy {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: var(--mj-gray-700);
}

.share-copy:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    color: var(--mj-gray-800);
}

/* Toast notifications for copy feedback */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background: var(--mj-white);
    border: 1px solid var(--mj-gray-200);
    border-radius: var(--mj-radius-lg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: var(--mj-space-4) var(--mj-space-6);
    margin-bottom: var(--mj-space-2);
    min-width: 120px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    text-align: center;
    font-size: var(--mj-text-lg);
    font-weight: var(--mj-font-semibold);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--mj-space-2);
    font-weight: var(--mj-font-semibold);
    color: var(--mj-gray-800);
}

.toast-body {
    color: var(--mj-gray-800);
    font-size: var(--mj-text-lg);
    font-weight: var(--mj-font-semibold);
    padding: 0;
}

.toast.toast-success {
    border-left: 4px solid var(--mj-success);
}

.toast.toast-error {
    border-left: 4px solid var(--mj-error);
}

.toast.toast-info {
    border-left: 4px solid var(--mj-info);
}

/* Copy button feedback animation */
.share-copy.copying {
    background: var(--mj-success) !important;
    color: var(--mj-white) !important;
    transform: scale(0.95);
}

/* Copy tooltip - appears near button */
.copy-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mj-gray-900);
    color: var(--mj-white);
    padding: var(--mj-space-2) var(--mj-space-3);
    border-radius: var(--mj-radius);
    font-size: var(--mj-text-sm);
    font-weight: var(--mj-font-medium);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--mj-gray-900);
}

.copy-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* Ensure share buttons container has relative positioning */
.share-buttons {
    position: relative;
}

/* Ensure no top margin on any parent containers */
.job-hero-section {
    margin-top: 0 !important;
}

/* Target any potential parent wrapper */
.job-hero-section,
.job-hero-section * {
    margin-top: 0 !important;
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
    .job-hero-section {
        padding: var(--mj-space-4) var(--mj-space-3) var(--mj-space-6) var(--mj-space-3);
        margin-top: 0 !important;
    }

    /* Ensure hero container stays full width on mobile */
    .job-hero-section .mj-container {
        padding: 0;
    }

    .mj-hero-content {
        padding: var(--mj-space-3) var(--mj-space-4);
    }
    
    /* Mobile: Hero title continues to inherit theme styles */
    
    .hero-job-location {
        font-size: var(--mj-text-base);
    }
    
    .hero-job-tags {
        margin-bottom: var(--mj-space-4);
        gap: var(--mj-space-2);
    }
    
    .hero-tag {
        font-size: var(--mj-text-xs);
        padding: var(--mj-space-1) var(--mj-space-3);
        letter-spacing: 0.25px;
    }
    
    .share-buttons {
        gap: var(--mj-space-2);
    }
    
    .share-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9em;
    }
}

/* Ensure application form hero has consistent color */
.manatal-application-form .job-hero-section {
    background: #2F68CB !important;
    background: var(--mj-primary) !important;
}

.manatal-application-form .job-hero-section::before {
    background: #2F68CB !important;
    background: var(--mj-primary) !important;
}

/* =========================
   JOB CONTENT SECTION
   ========================= */

.job-content-section {
    background: var(--mj-white);
    padding: var(--mj-space-8) 0;
}

.mj-content-wrapper {
    width: 95%;
    margin: 0 auto;
    padding: 0 var(--mj-space-2);
}

.job-meta-info {
    background: var(--mj-gray-50);
    border-radius: var(--mj-radius-lg);
    padding: var(--mj-space-6);
    margin-bottom: var(--mj-space-8);
    border: 1px solid var(--mj-gray-200);
}

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

.meta-label {
    font-size: var(--mj-text-sm);
    font-weight: var(--mj-font-medium);
    color: var(--mj-gray-600);
    margin-bottom: var(--mj-space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.meta-value {
    font-size: var(--mj-text-lg);
    font-weight: var(--mj-font-bold);
    font-family: inherit;
    color: var(--mj-gray-900);
    text-align: left;
}

.job-section {
    margin-bottom: var(--mj-space-6);
    padding-bottom: var(--mj-space-4);
}

.job-section:not(:last-of-type) {
    border-bottom: 1px solid var(--mj-gray-200);
}

.job-section:last-of-type {
    margin-bottom: var(--mj-space-4);
}

.section-title {
    font-size: var(--mj-text-xl);
    font-weight: var(--mj-font-bold);
    color: var(--mj-gray-900);
    margin-bottom: var(--mj-space-4);
    display: flex;
    align-items: center;
    gap: var(--mj-space-2);
}

.section-content {
    color: var(--mj-gray-700);
    line-height: 1.7;
    font-size: var(--mj-text-base);
    font-family: inherit;
}

.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4,
.section-content h5,
.section-content h6 {
    color: var(--mj-gray-900);
    margin-top: var(--mj-space-6);
    margin-bottom: var(--mj-space-3);
    font-weight: var(--mj-font-bold);
}

.section-content ul,
.section-content ol {
    margin: var(--mj-space-4) 0;
    padding-left: var(--mj-space-6);
}

.section-content li {
    margin-bottom: var(--mj-space-2);
}

.section-content p {
    margin-bottom: var(--mj-space-4);
}

.section-content strong {
    color: var(--mj-gray-900);
    font-weight: var(--mj-font-bold);
}

.job-action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mj-space-4);
    padding: var(--mj-space-6) 0 var(--mj-space-4) 0;
}

.job-apply-simple {
    flex-shrink: 0;
}

.back-to-jobs {
    flex-shrink: 0;
}

/* Job Details Back Button Styling */
.manatal-job-details .mj-btn-link {
    display: inline-flex !important;
    align-items: center !important;
    background-color: transparent !important;
    color: #6b7280 !important;
    border: none !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.manatal-job-details .mj-btn-link:hover {
    color: #374151 !important;
    background-color: #f9fafb !important;
}

.manatal-job-details .mj-icon {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    margin-right: 0.5rem !important;
    font-size: 1.2em !important;
}

/* Job Details Apply Button - Fix text disappearing on click */
.manatal-job-details .mj-btn-primary:active,
.manatal-job-details .mj-btn-primary:focus {
    color: var(--mj-white) !important;
    background-color: var(--mj-primary-hover) !important;
    border-color: var(--mj-primary-hover) !important;
    text-decoration: none !important;
}

/* Mobile job content adjustments */
@media (max-width: 768px) {
    .job-content-section {
        padding: var(--mj-space-6) 0;
    }
    
    .mj-content-wrapper {
        padding: 0 var(--mj-space-3);
    }
    
    .job-meta-info {
        padding: var(--mj-space-4);
    }
    
    .section-title {
        font-size: var(--mj-text-lg);
    }
    
    .job-action-buttons {
        flex-direction: column-reverse;
        gap: var(--mj-space-3);
        align-items: stretch;
    }
    
    .job-apply-simple {
        text-align: center;
    }
    
    .back-to-jobs {
        text-align: center;
    }
}

/* Job Cards Container */
.manatal-jobs-container {
    margin-top: var(--mj-space-4);
    padding: 0 var(--mj-space-2);
}

.jobs-container-wrapper {
    width: 95%;
    margin: 0 auto;
    padding: var(--mj-space-6) 0;
}

.jobs-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mj-space-8);
}

/* Job Card Styles - External Script Design */
.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.job-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: #d1d5db;
}

.job-card-body {
    display: contents;
}

/* Job content layout */
.job-card-content {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: inherit;
}

.job-header,
.job-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: inherit;
    font-size: inherit;
}

.job-header .job-title,
.job-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: inherit !important;
    line-height: 1.3;
}

/* Ensure h3 job titles inherit from theme */
.job-card h3.job-title,
.job-card .job-header h3,
.manatal-jobs-listing h3.job-title {
    font-family: inherit !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
}

.job-title-link {
    color: #1f2937;
    text-decoration: none;
    font-family: inherit;
    transition: color 0.2s ease;
}

.job-title-link:hover {
    color: var(--mj-primary);
    text-decoration: none;
}

.job-meta,
.job-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: 400;
}

.job-location-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mj-space-3);
}

.job-location .mj-icon,
.job-date .mj-icon {
    color: #6b7280;
    font-size: 1.4rem;
}

.job-date {
    display: flex;
    align-items: center;
    gap: var(--mj-space-1);
    color: var(--mj-gray-600);
    font-size: var(--mj-text-sm);
}

.job-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mj-space-2);
    flex-shrink: 0;
}

.job-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--mj-radius);
    font-size: 0.7em;
    font-weight: var(--mj-font-semibold);
    text-transform: capitalize;
    letter-spacing: 0.025em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: var(--mj-transition);
}

.job-badge.badge-remote {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #065f46;
    border-color: #a7f3d0;
    box-shadow: 0 2px 6px rgba(220, 252, 231, 0.4);
    font-weight: var(--mj-font-bold);
}

.job-badge.badge-remote:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 252, 231, 0.5);
    background: #bbf7d0;
}

.job-badge.badge-type {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
    font-weight: var(--mj-font-bold);
    box-shadow: 0 2px 6px rgba(219, 234, 254, 0.4);
}

.job-badge.badge-type:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(219, 234, 254, 0.5);
    background: #bfdbfe;
}

/* Job actions - Apply button */
.job-apply,
.job-actions {
    flex-shrink: 0;
}

.job-apply-btn,
.apply-button {
    background: #2F68CB;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-width: 100px;
    justify-content: center;
}

.job-apply-btn:hover,
.apply-button:hover {
    background: #254a8f;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 104, 203, 0.25);
}

/* Search transitions */
#jobs-results {
    transition: opacity 0.3s ease-in-out;
}

/* Ensure consistent styling for dynamically loaded job cards */
#jobs-grid .job-card {
    font-family: inherit;
    box-sizing: border-box;
}

.jobs-grid {
    transform: translateZ(0);
}

/* No jobs found message */
.no-jobs-found {
    text-align: center;
    padding: var(--mj-space-12) var(--mj-space-4);
}

.no-jobs-found .mj-icon {
    font-size: 3em;
    color: var(--mj-gray-400);
    margin-bottom: var(--mj-space-4);
}

/* Mobile responsive adjustments - External Script Style */
@media (max-width: 768px) {
    .jobs-search-form {
        padding: 24px 20px;
    }

    .jobs-search-form .mj-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .jobs-search-form .mj-input,
    .jobs-search-form .mj-select {
        font-size: 16px;
        padding: 14px 14px 14px 46px;
        height: 52px;
        line-height: 1.4;
    }

    .jobs-search-form .mj-input-icon {
        font-size: 1.5rem;
        left: 14px;
    }

    .job-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px 20px;
    }

    .job-actions,
    .job-apply {
        align-self: center;
        width: 100%;
    }

    .apply-button,
    .job-apply-btn {
        width: 100%;
        max-width: none;
        padding: 12px 24px;
    }

    .job-location {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .job-location-badges {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 12px;
    }

    .job-badges {
        width: 100%;
    }

    .job-title {
        font-size: 1.4rem !important;
    }

    .job-meta {
        font-size: 1.4rem;
    }

    .jobs-count-info {
        font-size: var(--mj-text-base);
        flex-direction: column;
        gap: var(--mj-space-1);
    }
}

@media (max-width: 640px) {
    .jobs-search-form {
        padding: 20px 16px;
    }

    .job-title {
        font-size: 1.2rem !important;
        line-height: 1.4;
    }

    .job-card {
        padding: 20px 16px;
        gap: 16px;
    }

    .job-meta {
        font-size: 1.3rem;
        flex-wrap: wrap;
    }

    .job-location {
        font-size: 1.3rem;
    }

    .job-badge {
        font-size: 1.1rem;
        padding: 6px 10px;
        border: 2px solid currentColor;
    }

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

/* =========================
   APPLICATION FORM STYLES
   ========================= */

.manatal-application-page {
    min-height: 100vh;
    background-color: #f8fafc;
}

.application-form-section {
    padding: var(--mj-space-8) 0;
    margin-top: -var(--mj-space-4);
}

.application-form-wrapper {
    width: 95%;
    margin: 0 auto;
}

.application-form-title {
    font-size: var(--mj-text-3xl);
    font-weight: var(--mj-font-bold);
    color: var(--mj-gray-900);
    margin-bottom: var(--mj-space-2);
    font-family: inherit;
    padding: 0 var(--mj-space-12);
}

.application-form-subtitle {
    font-size: var(--mj-text-lg);
    color: var(--mj-gray-600);
    margin-bottom: var(--mj-space-8);
    font-family: inherit;
    padding: 0 var(--mj-space-12);
}

/* Form Fieldsets */
.form-fieldset {
    border: 1px solid var(--mj-gray-200);
    border-radius: var(--mj-radius-lg);
    padding: var(--mj-space-6);
    margin-bottom: var(--mj-space-6);
    background: var(--mj-white);
}

.form-fieldset legend {
    font-size: var(--mj-text-lg);
    font-weight: var(--mj-font-semibold);
    color: var(--mj-gray-900);
    padding: 0 var(--mj-space-3);
    background: var(--mj-white);
    font-family: inherit;
}

/* Form Groups */
.form-group {
    margin-bottom: var(--mj-space-4);
}

.form-group label {
    display: block;
    font-size: var(--mj-text-sm);
    font-weight: var(--mj-font-medium);
    color: var(--mj-gray-700);
    margin-bottom: var(--mj-space-2);
    font-family: inherit;
}

.required-asterisk {
    color: var(--mj-error);
    margin-left: 2px;
}

/* Phone Input Group */
.phone-input-group {
    display: flex;
    gap: var(--mj-space-2);
}

.country-select {
    flex: 0 0 120px;
    height: 48px;
    padding: var(--mj-space-3);
    border: 1px solid var(--mj-gray-300);
    border-radius: var(--mj-radius);
    font-size: var(--mj-text-sm);
    background: var(--mj-white);
    font-family: inherit;
}

.phone-input {
    flex: 1;
}

/* File Input Styling */
.mj-file-input {
    width: 100%;
    padding: var(--mj-space-3);
    border: 2px dashed var(--mj-gray-300);
    border-radius: var(--mj-radius);
    background: var(--mj-gray-50);
    font-size: var(--mj-text-sm);
    cursor: pointer;
    transition: var(--mj-transition);
    font-family: inherit;
}

.mj-file-input:hover {
    border-color: var(--mj-primary);
    background: var(--mj-primary-light);
}

.file-help {
    font-size: var(--mj-text-xs);
    color: var(--mj-gray-500);
    margin-top: var(--mj-space-1);
    font-family: inherit;
}

/* Checkbox Styling */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--mj-space-2);
    cursor: pointer;
    font-family: inherit;
}

.mj-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.checkbox-text {
    font-size: var(--mj-text-sm);
    color: var(--mj-gray-700);
    line-height: 1.5;
    font-family: inherit;
}

.checkbox-text a {
    color: var(--mj-primary);
    text-decoration: none;
}

.checkbox-text a:hover {
    text-decoration: underline;
}

/* Submit Section */
.form-submit-group {
    margin-bottom: var(--mj-space-6);
}

.form-submit-wrapper {
    text-align: center;
    padding-top: var(--mj-space-4);
    border-top: 1px solid var(--mj-gray-200);
}

.mj-btn-lg {
    padding: var(--mj-space-4) var(--mj-space-8);
    font-size: var(--mj-text-lg);
    min-width: 200px;
}

/* Error Messages */
.field-error {
    color: var(--mj-error);
    font-size: var(--mj-text-xs);
    margin-top: var(--mj-space-1);
    display: none;
    font-family: inherit;
}

.form-errors {
    background: var(--mj-error-light);
    border: 1px solid var(--mj-error);
    color: var(--mj-error);
    padding: var(--mj-space-3);
    border-radius: var(--mj-radius);
    margin-bottom: var(--mj-space-4);
    display: none;
    font-family: inherit;
}

/* Loading States */
.btn-loading {
    display: flex;
    align-items: center;
    gap: var(--mj-space-2);
    justify-content: center;
}

/* Success Message */
.application-success {
    text-align: center;
    padding: var(--mj-space-8);
    background: var(--mj-white);
    border-radius: var(--mj-radius-lg);
    border: 1px solid var(--mj-success);
}

.success-icon {
    font-size: 4rem;
    color: var(--mj-success);
    margin-bottom: var(--mj-space-4);
}

.application-success h3 {
    font-size: var(--mj-text-2xl);
    font-weight: var(--mj-font-bold);
    color: var(--mj-success);
    margin-bottom: var(--mj-space-4);
    font-family: inherit;
}

.application-success p {
    font-size: var(--mj-text-lg);
    color: var(--mj-gray-700);
    margin-bottom: var(--mj-space-2);
    font-family: inherit;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .application-form-wrapper {
        margin: 0 var(--mj-space-4);
    }

    .form-fieldset {
        padding: var(--mj-space-4);
    }

    .mj-grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .phone-input-group {
        flex-direction: column;
    }

    .country-select {
        flex: none;
    }
}

/* =========================
   PAGINATION STYLES
   ========================= */

.manatal-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: var(--mj-space-20) 0 var(--mj-space-8) 0;
}

.mj-pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--mj-space-1);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.mj-page-item {
    display: inline-flex;
}

.mj-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mj-space-3) var(--mj-space-4);
    min-width: 44px;
    min-height: 44px;
    background-color: var(--mj-white);
    border: 1px solid var(--mj-gray-300);
    border-radius: var(--mj-radius);
    color: var(--mj-gray-700);
    text-decoration: none;
    font-weight: var(--mj-font-medium);
    transition: var(--mj-transition);
    cursor: pointer;
    gap: var(--mj-space-1);
    font-size: var(--mj-text-sm);
    line-height: 1;
}

.mj-page-link:hover {
    background-color: var(--mj-gray-50);
    border-color: var(--mj-primary);
    color: var(--mj-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-sm);
}

.mj-page-item.mj-page-active .mj-page-link {
    background-color: var(--mj-primary);
    border-color: var(--mj-primary);
    color: var(--mj-white);
    cursor: default;
    transform: none;
    box-shadow: var(--mj-shadow-sm);
}

.mj-page-item.mj-page-disabled .mj-page-link {
    background-color: var(--mj-gray-100);
    border-color: var(--mj-gray-200);
    color: var(--mj-gray-400);
    cursor: not-allowed;
    pointer-events: none;
}

.mj-page-link .mj-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Mobile pagination adjustments */
@media (max-width: 640px) {
    .mj-pagination {
        gap: var(--mj-space-1);
    }
    
    .mj-page-link {
        padding: var(--mj-space-2) var(--mj-space-3);
        min-width: 36px;
        min-height: 36px;
        font-size: var(--mj-text-xs);
    }
    
    .mj-hidden {
        display: none !important;
    }
}

/* =========================
   CLEAR BUTTON STYLES
   ========================= */

.btn-clear-search,
.btn-clear-location {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    color: var(--mj-gray-500) !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* Hide buttons when they have mj-hidden class */
.btn-clear-search.mj-hidden,
.btn-clear-location.mj-hidden {
    display: none !important;
}

.btn-clear-search:hover,
.btn-clear-location:hover {
    background-color: var(--mj-gray-200) !important;
    color: var(--mj-gray-700) !important;
}

.btn-clear-location i,
.btn-clear-search i {
    pointer-events: none !important;
}

/* Both input and select should have same width */
.jobs-search-form .mj-input,
.jobs-search-form .mj-select {
    width: 100%;
}

.mj-input-wrapper {
    position: relative;
}

.mj-input-wrapper .mj-input-with-icon {
    padding-right: var(--mj-space-8);
}

/* Responsive visibility utilities */
.mj-hidden {
    display: none;
}

@media (min-width: 768px) {
    .mj-md-inline {
        display: inline;
    }
    
    .mj-md-inline-block {
        display: inline-block;
    }
}

/* =============================================================================
   APPLICATION FORM IMPROVEMENTS
   ========================================================================== */

/* Application form section - simplified */
.application-form-section {
    padding: 3rem 0 4rem;
    min-height: 80vh;
}

/* Form header styling - simplified */
.application-form-section .form-header {
    margin-bottom: 2rem;
    text-align: center;
}

.application-form-section .form-title {
    color: var(--mj-gray-800);
    font-size: 2.25em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.application-form-section .form-subtitle {
    color: #4b5563;
    font-size: 1.125em;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Application form card - simplified */
.application-form-card {
    background: var(--mj-white);
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 2rem;
    width: 90%;
    margin: 1.5rem auto 1.5rem auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.application-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mj-primary) 0%, #2F68CB 50%, var(--mj-primary) 100%);
}

/* Form wrapper inside card */
.application-form-wrapper {
    width: 90%;
    padding: var(--mj-space-4);
    margin: 0 auto;
}

.application-form-wrapper > form {
    margin: 0 !important;
    padding: 0 var(--mj-space-12) !important;
    box-sizing: border-box !important;
}

/* Form field spacing improvements */
.application-form-wrapper .manatal-field,
.application-form-wrapper .form-group,
.application-form-wrapper .mj-input-wrapper {
    margin-bottom: var(--mj-space-4);
}

.application-form-wrapper .manatal-field:last-child,
.application-form-wrapper .form-group:last-child {
    margin-bottom: 0;
}

/* Form labels and inputs - simplified */
.application-form-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--mj-gray-800);
    font-size: 0.875em;
    font-family: inherit;
}

.application-form-wrapper input,
.application-form-wrapper select,
.application-form-wrapper textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1em;
    transition: all 0.2s ease;
    background: var(--mj-white);
}

.application-form-wrapper input:focus,
.application-form-wrapper select:focus,
.application-form-wrapper textarea:focus {
    outline: none;
    border-color: var(--mj-primary);
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1);
}

/* Checkbox and radio styling */
.application-form-wrapper input[type="checkbox"],
.application-form-wrapper input[type="radio"] {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 8px !important;
    margin-top: 4px !important;
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #9ca3af;
    border-radius: 2px;
    background: var(--mj-white);
    transition: all 0.15s ease;
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
}

.application-form-wrapper input[type="checkbox"]:checked {
    background: var(--mj-primary);
    border-color: var(--mj-primary);
}

.application-form-wrapper input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.application-form-wrapper input[type="checkbox"]:hover {
    border-color: var(--mj-primary);
}

.application-form-wrapper input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--mj-primary);
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1);
}

.application-form-wrapper input[type="radio"] {
    border-radius: 50%;
}

.application-form-wrapper input[type="radio"]:checked {
    background: var(--mj-primary);
    border-color: var(--mj-primary);
}

.application-form-wrapper input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
}

.application-form-wrapper .checkbox-wrapper,
.application-form-wrapper .radio-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.application-form-wrapper .checkbox-wrapper label,
.application-form-wrapper .radio-wrapper label {
    margin-bottom: 0;
    flex: 1;
    cursor: pointer;
    line-height: 1.5;
}

.application-form-wrapper .checkbox-wrapper input,
.application-form-wrapper .radio-wrapper input {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* Generic checkbox/radio field styling for forms without wrapper classes */
.application-form-wrapper .manatal-field:has(input[type="checkbox"]),
.application-form-wrapper .manatal-field:has(input[type="radio"]),
.application-form-wrapper .form-group:has(input[type="checkbox"]),
.application-form-wrapper .form-group:has(input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-direction: row;
}

/* Terms and conditions checkbox specific alignment */
.application-form-wrapper .terms-field,
.application-form-wrapper .terms-checkbox-wrapper,
.application-form-wrapper .manatal-field:has(input[name*="terms"]),
.application-form-wrapper .manatal-field:has(input[name*="agree"]),
.application-form-wrapper .form-group:has(input[name*="terms"]),
.application-form-wrapper .form-group:has(input[name*="agree"]),
.application-form-wrapper div:has(> input[name*="terms"]),
.application-form-wrapper div:has(> input[name*="agree"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    flex-direction: row !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    position: relative !important;
    left: 0 !important;
}

.application-form-wrapper .terms-field label,
.application-form-wrapper .terms-checkbox-wrapper label,
.application-form-wrapper .manatal-field:has(input[name*="terms"]) label,
.application-form-wrapper .manatal-field:has(input[name*="agree"]) label,
.application-form-wrapper label[for*="terms"],
.application-form-wrapper label[for*="agree"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    flex: 1;
    line-height: 1.5;
}

/* Force terms checkbox to not be indented */
.application-form-wrapper input[name*="terms"],
.application-form-wrapper input[name*="agree"],
.application-form-wrapper input[id*="terms"],
.application-form-wrapper input[id*="agree"] {
    margin-left: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Parent container of terms field */
.application-form-wrapper > form > div:has(input[name*="terms"]),
.application-form-wrapper > form > div:has(input[name*="agree"]),
.application-form-wrapper > form > fieldset:has(input[name*="terms"]),
.application-form-wrapper > form > fieldset:has(input[name*="agree"]) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Ultimate override for any terms checkbox indentation */
.application-form-wrapper *:has(> input[type="checkbox"][name*="terms"]),
.application-form-wrapper *:has(> input[type="checkbox"][name*="agree"]) {
    margin-left: -2px !important;
    padding-left: 0 !important;
}

.application-form-wrapper input[type="checkbox"][name*="terms"] + label,
.application-form-wrapper input[type="checkbox"][name*="agree"] + label,
.application-form-wrapper input[type="checkbox"][id*="terms"] + label,
.application-form-wrapper input[type="checkbox"][id*="agree"] + label {
    margin-left: 3px !important;
    display: inline-block !important;
    color: #1f2937 !important;
    font-weight: normal !important;
}

/* Fix any green colored text in terms labels */
.application-form-wrapper label[for*="terms"],
.application-form-wrapper label[for*="agree"],
.application-form-wrapper .terms-field label,
.application-form-wrapper .terms-checkbox-wrapper label {
    color: #1f2937 !important;
}

/* Fix any links within terms labels */
.application-form-wrapper label[for*="terms"] a,
.application-form-wrapper label[for*="agree"] a,
.application-form-wrapper .terms-field label a,
.application-form-wrapper .terms-checkbox-wrapper label a {
    color: #2F68CB !important;
    text-decoration: underline;
}

.application-form-wrapper .manatal-field:has(input[type="checkbox"]) label,
.application-form-wrapper .manatal-field:has(input[type="radio"]) label,
.application-form-wrapper .form-group:has(input[type="checkbox"]) label,
.application-form-wrapper .form-group:has(input[type="radio"]) label {
    order: 2;
    margin-bottom: 0;
    flex: 1;
    cursor: pointer;
}

.application-form-wrapper .manatal-field:has(input[type="checkbox"]) input,
.application-form-wrapper .manatal-field:has(input[type="radio"]) input,
.application-form-wrapper .form-group:has(input[type="checkbox"]) input,
.application-form-wrapper .form-group:has(input[type="radio"]) input {
    order: 1;
    margin-top: 0.25rem;
}

/* Phone number and country code fields - full width vertical layout */
.application-form-wrapper select[name*="country_code"],
.application-form-wrapper select[name*="countryCode"],
.application-form-wrapper select[name*="country-code"],
.application-form-wrapper select[name*="country"],
.application-form-wrapper select[id*="country"],
.application-form-wrapper .country-code-select,
.application-form-wrapper .country-select {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    display: block !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.application-form-wrapper input[type="tel"],
.application-form-wrapper input[name*="phone"]:not([type="hidden"]),
.application-form-wrapper input[id*="phone"]:not([type="hidden"]) {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    display: block !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* Labels for all form fields - comprehensive coverage */
.application-form-wrapper .form-label,
.application-form-wrapper label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    clear: both !important;
    width: 100% !important;
    font-family: inherit !important;
}

/* Specific labels for phone and country fields */
.application-form-wrapper label[for*="country_code"],
.application-form-wrapper label[for*="countryCode"],
.application-form-wrapper label[for*="country-code"],
.application-form-wrapper label[for*="country"] {
    display: block !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    clear: both !important;
    width: 100% !important;
}

.application-form-wrapper label[for*="phone"],
.application-form-wrapper label[for*="tel"] {
    display: block !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    clear: both !important;
    width: 100% !important;
}

/* Focus states for phone fields */
.application-form-wrapper select[name*="country"]:focus,
.application-form-wrapper select[id*="country"]:focus,
.application-form-wrapper input[type="tel"]:focus,
.application-form-wrapper input[name*="phone"]:focus,
.application-form-wrapper input[id*="phone"]:focus {
    outline: none !important;
    border-color: #2F68CB !important;
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1) !important;
}

/* Ensure phone field containers don't interfere */
.application-form-wrapper .form-group,
.application-form-wrapper .manatal-field {
    width: 100% !important;
    clear: both !important;
    margin-bottom: 1rem !important;
}

/* Override any inline styles or theme conflicts for form fields */
.application-form-wrapper select,
.application-form-wrapper input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.application-form-wrapper textarea {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 1rem !important;
}

/* FORCE file upload styling to override theme interference */
.application-form-wrapper input[type="file"],
.application-form-wrapper input[name*="resume"]:not([type="hidden"]),
.application-form-wrapper input[name*="cv"]:not([type="hidden"]),
.application-form-wrapper input[id*="resume"]:not([type="hidden"]),
.application-form-wrapper input[id*="cv"]:not([type="hidden"]),
.application-form-wrapper .manatal-field[data-field-type="file"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    background-color: var(--mj-gray-50) !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 0.5rem !important;
    height: auto !important;
    min-height: 3rem !important;
    padding: 0.75rem 1rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    vertical-align: top !important;
}

/* Checkbox and radio specific styling - NOT full width, with proper alignment */
.application-form-wrapper input[type="checkbox"],
.application-form-wrapper input[type="radio"] {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0 !important;
    margin-top: 2px !important;
    vertical-align: top !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* All checkbox containers - proper alignment */
.application-form-wrapper .form-check,
.application-form-wrapper .checkbox-wrapper,
.application-form-wrapper .radio-wrapper,
.application-form-wrapper .manatal-field:has(input[type="checkbox"]),
.application-form-wrapper .manatal-field:has(input[type="radio"]),
.application-form-wrapper .form-group:has(input[type="checkbox"]),
.application-form-wrapper .form-group:has(input[type="radio"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    flex-direction: row !important;
    margin-bottom: 1rem !important;
}

/* Checkbox and radio labels alignment */
.application-form-wrapper .form-check label,
.application-form-wrapper .checkbox-wrapper label,
.application-form-wrapper .radio-wrapper label,
.application-form-wrapper .manatal-field:has(input[type="checkbox"]) label,
.application-form-wrapper .manatal-field:has(input[type="radio"]) label,
.application-form-wrapper .form-group:has(input[type="checkbox"]) label,
.application-form-wrapper .form-group:has(input[type="radio"]) label {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    flex: 1 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

/* File upload field styling - theme independent */
.application-form-wrapper input[type="file"],
.application-form-wrapper input[name*="resume"]:not([type="hidden"]),
.application-form-wrapper input[name*="cv"]:not([type="hidden"]),
.application-form-wrapper input[id*="resume"]:not([type="hidden"]),
.application-form-wrapper input[id*="cv"]:not([type="hidden"]) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 0.5rem !important;
    background: var(--mj-gray-50) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--mj-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-bottom: 1rem !important;
    position: relative !important;
}

.application-form-wrapper input[type="file"]:hover,
.application-form-wrapper input[name*="resume"]:not([type="hidden"]):hover,
.application-form-wrapper input[name*="cv"]:not([type="hidden"]):hover,
.application-form-wrapper input[id*="resume"]:not([type="hidden"]):hover,
.application-form-wrapper input[id*="cv"]:not([type="hidden"]):hover {
    border-color: #2F68CB !important;
    background: rgba(47, 104, 203, 0.05) !important;
}

.application-form-wrapper input[type="file"]:focus,
.application-form-wrapper input[name*="resume"]:not([type="hidden"]):focus,
.application-form-wrapper input[name*="cv"]:not([type="hidden"]):focus,
.application-form-wrapper input[id*="resume"]:not([type="hidden"]):focus,
.application-form-wrapper input[id*="cv"]:not([type="hidden"]):focus {
    outline: none !important;
    border-color: #2F68CB !important;
    background: rgba(47, 104, 203, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1) !important;
}

/* File upload custom styling */
.application-form-wrapper input[type="file"]::file-selector-button,
.application-form-wrapper input[name*="resume"]:not([type="hidden"])::file-selector-button,
.application-form-wrapper input[name*="cv"]:not([type="hidden"])::file-selector-button,
.application-form-wrapper input[id*="resume"]:not([type="hidden"])::file-selector-button,
.application-form-wrapper input[id*="cv"]:not([type="hidden"])::file-selector-button {
    background: #2F68CB !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    margin-right: 1rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.application-form-wrapper input[type="file"]::file-selector-button:hover,
.application-form-wrapper input[name*="resume"]:not([type="hidden"])::file-selector-button:hover,
.application-form-wrapper input[name*="cv"]:not([type="hidden"])::file-selector-button:hover,
.application-form-wrapper input[id*="resume"]:not([type="hidden"])::file-selector-button:hover,
.application-form-wrapper input[id*="cv"]:not([type="hidden"])::file-selector-button:hover {
    background: #1d4ed8 !important;
}

/* Webkit browsers file selector button */
.application-form-wrapper input[type="file"]::-webkit-file-upload-button,
.application-form-wrapper input[name*="resume"]:not([type="hidden"])::-webkit-file-upload-button,
.application-form-wrapper input[name*="cv"]:not([type="hidden"])::-webkit-file-upload-button,
.application-form-wrapper input[id*="resume"]:not([type="hidden"])::-webkit-file-upload-button,
.application-form-wrapper input[id*="cv"]:not([type="hidden"])::-webkit-file-upload-button {
    background: #2F68CB !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    margin-right: 1rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.application-form-wrapper input[type="file"]::-webkit-file-upload-button:hover,
.application-form-wrapper input[name*="resume"]:not([type="hidden"])::-webkit-file-upload-button:hover,
.application-form-wrapper input[name*="cv"]:not([type="hidden"])::-webkit-file-upload-button:hover,
.application-form-wrapper input[id*="resume"]:not([type="hidden"])::-webkit-file-upload-button:hover,
.application-form-wrapper input[id*="cv"]:not([type="hidden"])::-webkit-file-upload-button:hover {
    background: #1d4ed8 !important;
}

/* File upload wrapper styling */
.application-form-wrapper .manatal-field-wrapper[data-field-type="file"] {
    position: relative !important;
}

.application-form-wrapper .manatal-field-wrapper[data-field-type="file"]::before {
    content: "📎 Drop files here or click to browse" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.application-form-wrapper input[type="file"]:not(:focus):not(:hover):invalid + .application-form-wrapper .manatal-field-wrapper[data-field-type="file"]::before {
    opacity: 1 !important;
}

/* Better file upload help text styling */
.application-form-wrapper input[type="file"] + .form-text,
.application-form-wrapper input[name*="resume"]:not([type="hidden"]) + .form-text,
.application-form-wrapper input[name*="cv"]:not([type="hidden"]) + .form-text,
.application-form-wrapper input[id*="resume"]:not([type="hidden"]) + .form-text,
.application-form-wrapper input[id*="cv"]:not([type="hidden"]) + .form-text,
.application-form-wrapper .manatal-field[data-field-type="file"] + .form-text {
    background: #f0f9ff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #0369a1 !important;
    margin-top: 0.5rem !important;
    border-left: 3px solid #2F68CB !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* File upload success message styling */
.application-form-wrapper .file-upload-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-left: 3px solid #10b981 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

/* Country code and select fields - ensure proper width and appearance */
.application-form-wrapper select,
.application-form-wrapper select[name*="country"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 200px !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    background: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--mj-gray-700) !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-bottom: 1rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}

.application-form-wrapper select:focus {
    outline: none !important;
    border-color: #2F68CB !important;
    box-shadow: 0 0 0 3px rgba(47, 104, 203, 0.1) !important;
}

/* Specific overrides for phone and country fields */
.application-form-wrapper [name*="phone"]:not([type="hidden"]),
.application-form-wrapper [type="tel"],
.application-form-wrapper [id*="phone"]:not([type="hidden"]),
.application-form-wrapper .manatal-phone-field {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Additional phone field styling to ensure proper input behavior */
.application-form-wrapper input[name*="phone"]:not([type="hidden"])::placeholder,
.application-form-wrapper input[type="tel"]::placeholder,
.application-form-wrapper input[id*="phone"]:not([type="hidden"])::placeholder,
.application-form-wrapper .manatal-phone-field::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}


/* Submit button styling in form */
.application-form-wrapper .manatal-submit-btn,
.application-form-wrapper .mj-btn-primary {
    margin-top: 1.5rem;
    width: auto;
    padding: 0.875rem 2rem;
    font-size: 1.125em;
    font-weight: 600;
    background: var(--mj-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.application-form-wrapper .manatal-submit-btn:hover,
.application-form-wrapper .mj-btn-primary:hover {
    background: var(--mj-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 104, 203, 0.3);
}

/* Form footer styling - improved */
.form-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.form-footer-left {
    margin-bottom: 1.5rem;
}

.form-footer-left a {
    color: #6b7280;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.95em;
    border: 1px solid transparent;
}

.form-footer-left a:hover {
    color: var(--mj-primary);
    background: rgba(37, 99, 235, 0.08);
    transform: translateX(-3px);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.form-footer-left a i {
    font-size: 0.9em;
    transition: transform 0.2s ease;
}

.form-footer-left a:hover i {
    transform: translateX(-2px);
}

.form-footer-right {
    padding-top: 0.5rem;
}

.form-footer-right small {
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875em;
    line-height: 1.4;
}

.form-footer-right small i {
    color: #10b981;
    font-size: 0.9em;
}

/* Loading overlay improvements */
.application-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.application-loading-overlay.mj-hidden {
    display: none !important;
}

.application-loading-overlay .loading-content {
    text-align: center;
    padding: var(--mj-space-8);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--mj-radius-xl);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom spinner */
.mj-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid var(--mj-white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mj-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .application-form-section {
        padding: var(--mj-space-8) 0 var(--mj-space-12);
    }
    
    .application-form-section .form-title {
        font-size: 1.875em;
    }
    
    .application-form-section .form-subtitle {
        font-size: 1em;
    }
    
    .application-form-card {
        padding: var(--mj-space-6);
        border-radius: var(--mj-radius-lg);
        margin-left: var(--mj-space-4);
        margin-right: var(--mj-space-4);
    }
    
    .form-footer {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.5rem;
        margin-top: 2rem;
    }
    
    .form-footer-left {
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .form-footer-left a {
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    .form-footer-right {
        text-align: center;
        padding-top: 0.25rem;
    }
    
    .form-footer-right small {
        justify-content: center;
        text-align: center;
        gap: 0.375rem;
    }
    
    .application-form-wrapper {
        padding: var(--mj-space-3);
        margin: 0;
    }
    
    .application-form-wrapper .manatal-field,
    .application-form-wrapper .form-group {
        margin-bottom: var(--mj-space-3);
    }
    
    .application-form-wrapper input,
    .application-form-wrapper select,
    .application-form-wrapper textarea {
        padding: var(--mj-space-3);
        font-size: var(--mj-text-base);
    }
    
    .application-form-wrapper .manatal-submit-btn,
    .application-form-wrapper .mj-btn-primary {
        padding: 0.75rem 1.5rem;
        font-size: 1em;
        width: auto;
    }
    
    /* Mobile adjustments for all form fields */
    .application-form-wrapper select,
    .application-form-wrapper input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .application-form-wrapper textarea {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        display: block !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Mobile file upload adjustments */
    .application-form-wrapper input[type="file"],
    .application-form-wrapper input[name*="resume"]:not([type="hidden"]),
    .application-form-wrapper input[name*="cv"]:not([type="hidden"]),
    .application-form-wrapper input[id*="resume"]:not([type="hidden"]),
    .application-form-wrapper input[id*="cv"]:not([type="hidden"]) {
        padding: 1rem !important;
        min-height: 3.5rem !important;
        font-size: 0.9em !important;
    }
    
    /* Mobile select dropdown adjustments */
    .application-form-wrapper select {
        min-width: unset !important;
        padding-right: 2rem !important;
    }
}

/* Large screen optimizations for better space utilization */
@media (min-width: 1280px) {
    /* Increase content width on very large screens */
    .mj-container {
        width: 95%;
    }

    .jobs-count-section .mj-container,
    .jobs-search-section .mj-container,
    .jobs-container-wrapper {
        width: 90%;
    }

    .mj-hero-content,
    .mj-content-wrapper,
    .application-form-wrapper {
        width: 85%;
    }
}

@media (min-width: 1536px) {
    /* Ultra-wide screen adjustments */
    .mj-container {
        width: 98%;
    }

    .jobs-count-section .mj-container,
    .jobs-search-section .mj-container,
    .jobs-container-wrapper {
        width: 95%;
    }

    .mj-hero-content,
    .mj-content-wrapper,
    .application-form-wrapper {
        width: 90%;
    }
}