/* ============================================
   DESIGN SYSTEM - CSS Variables
   PracujPlus Child Theme
   ============================================ */

:root {
    /* ===========================================
       COLORS - Primary & Brand
       =========================================== */
    --color-primary: #2DD4BF;
    --color-primary-dark: #14b8a6;
    --color-primary-light: #5EEAD4;
    --color-primary-lighter: #99f6e4;
    --color-primary-lightest: #f0fdfa;

    /* Accent (same as primary for this theme) */
    --color-accent: #51DACF;
    --color-accent-dark: #3bc4b9;

    /* ===========================================
       COLORS - Semantic
       =========================================== */
    /* Success */
    --color-success: #22c55e;
    --color-success-light: #bbf7d0;
    --color-success-lighter: #f0fdf4;

    /* Warning */
    --color-warning: #f59e0b;
    --color-warning-light: #fde68a;
    --color-warning-lighter: #fffbeb;

    /* Error / Danger */
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-light: #fecaca;
    --color-error-lighter: #fef2f2;

    /* Info */
    --color-info: #3b82f6;
    --color-info-light: #bfdbfe;
    --color-info-lighter: #eff6ff;

    /* ===========================================
       COLORS - Neutral / Gray Scale
       =========================================== */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* ===========================================
       COLORS - Text
       =========================================== */
    --color-text-primary: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #ffffff;

    /* ===========================================
       COLORS - Background
       =========================================== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-dashboard: #F5F7FC;

    /* ===========================================
       COLORS - Border
       =========================================== */
    --color-border-light: #f3f4f6;
    --color-border-default: #e5e7eb;
    --color-border-dark: #d1d5db;
    --color-border-primary: #2DD4BF;

    /* ===========================================
       TYPOGRAPHY - Font Families
       =========================================== */
    --font-family-primary: 'Poppins', sans-serif;
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-mono: 'Consolas', 'Monaco', monospace;

    /* ===========================================
       TYPOGRAPHY - Font Sizes
       =========================================== */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;

    /* ===========================================
       TYPOGRAPHY - Font Weights
       =========================================== */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===========================================
       TYPOGRAPHY - Line Heights
       =========================================== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===========================================
       SPACING
       =========================================== */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;

    /* ===========================================
       BORDER RADIUS
       =========================================== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-default: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 50px;
    --radius-full: 50%;

    /* ===========================================
       BOX SHADOWS
       =========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 15px rgba(64, 79, 104, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 4px 12px rgba(45, 212, 191, 0.25);
    --shadow-primary-lg: 0 6px 16px rgba(45, 212, 191, 0.35);

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --transition-fast: 0.15s ease;
    --transition-default: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;

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

    /* ===========================================
       BREAKPOINTS (for reference in JS)
       =========================================== */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ===========================================
       COMPONENT SPECIFIC
       =========================================== */
    /* Buttons */
    --btn-padding-y: 9px;
    --btn-padding-x: 40px;
    --btn-border-width: 2px;
    --btn-border-radius: var(--radius-pill);

    /* Cards */
    --card-padding: var(--spacing-5);
    --card-border-radius: var(--radius-lg);
    --card-shadow: var(--shadow-card);

    /* Inputs */
    --input-padding-y: 14px;
    --input-padding-x: 18px;
    --input-border-width: 2px;
    --input-border-radius: var(--radius-md);
    --input-font-size: var(--font-size-base);

    /* Icon Buttons */
    --icon-btn-size: 34px;
    --icon-btn-size-sm: 28px;
    --icon-btn-size-lg: 42px;
}

/* ===========================================
   DARK MODE (future-ready)
   =========================================== */
@media (prefers-color-scheme: dark) {
    :root.auto-dark-mode {
        --color-bg-primary: #1f2937;
        --color-bg-secondary: #111827;
        --color-text-primary: #f9fafb;
        --color-text-secondary: #d1d5db;
        --color-border-default: #374151;
    }
}

/* ============================================
   BUTTONS - Reusable Button Components
   ============================================ */

/* ===========================================
   BASE BUTTON
   =========================================== */
.btn,
.button,
[class*="btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-decoration: none;
    border-radius: var(--btn-border-radius);
    border: var(--btn-border-width) solid transparent;
    cursor: pointer;
    transition: var(--transition-all);
    white-space: nowrap;
}

.btn:focus,
.button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

/* ===========================================
   PRIMARY BUTTON
   =========================================== */
.btn-primary,
.primary-button {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.primary-button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ===========================================
   SECONDARY BUTTON (Outline)
   =========================================== */
.btn-secondary,
.btn-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover,
.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ===========================================
   ICON BUTTONS
   =========================================== */
.btn-action-icon {
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    transition: var(--transition-default);
    text-decoration: none;
}

.btn-action-icon:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Icon Button Variants */
.btn-action-icon.approve,
.btn-action-icon.btn-approve-job-applied {
    color: var(--color-success);
    border-color: var(--color-success-light);
    background: var(--color-success-lighter);
}

.btn-action-icon.approve:hover,
.btn-action-icon.btn-approve-job-applied:hover {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.btn-action-icon.rejec,
.btn-action-icon.reject,
.btn-action-icon.btn-reject-job-applied {
    color: var(--color-error);
    border-color: var(--color-error-light);
    background: var(--color-error-lighter);
}

.btn-action-icon.rejec:hover,
.btn-action-icon.reject:hover,
.btn-action-icon.btn-reject-job-applied:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}

.btn-action-icon.download {
    color: var(--color-info);
    border-color: var(--color-info-light);
    background: var(--color-info-lighter);
}

.btn-action-icon.download:hover {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

.btn-action-icon.remove,
.btn-action-icon.btn-remove-job-applied {
    color: var(--color-error-dark);
    border-color: var(--color-error-light);
    background: var(--color-error-lighter);
}

.btn-action-icon.remove:hover,
.btn-action-icon.btn-remove-job-applied:hover {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
    color: var(--color-white);
}

.btn-action-icon.edit {
    color: var(--color-primary);
    border-color: var(--color-primary-lighter);
    background: var(--color-primary-lightest);
}

.btn-action-icon.edit:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ===========================================
   BUTTON SIZES
   =========================================== */
.btn-sm {
    padding: 6px 16px;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 14px 48px;
    font-size: var(--font-size-md);
}

/* ===========================================
   BUTTON STATES
   =========================================== */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-loading {
    position: relative;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   CARDS - Reusable Card Components
   ============================================ */

/* ===========================================
   BASE CARD
   =========================================== */


/* ===========================================
   CARD HOVER EFFECT
   =========================================== */
.card-hover {
    transition: var(--transition-default);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ===========================================
   STAT CARD (Dashboard Statistics)
   =========================================== */
.stat-card,
.stat-card-cloud {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card-cloud::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

.stat-card .stat-value,
.stat-card-cloud .stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.stat-card .stat-label,
.stat-card-cloud .stat-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    opacity: 0.9;
    margin-top: var(--spacing-2);
}

/* Stat Card Colors */
.stat-card--success {
    background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%);
}

.stat-card--info {
    background: linear-gradient(135deg, var(--color-info) 0%, #2563eb 100%);
}

.stat-card--warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
}

/* ===========================================
   CLOUD CARD (Notification Style)
   =========================================== */
.cloud-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    position: relative;
}

.cloud-card .cloud-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-xl);
}

.cloud-card .cloud-content {
    flex: 1;
    min-width: 0;
}

.cloud-card .cloud-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1) 0;
}

.cloud-card .cloud-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===========================================
   PACKAGE CARD
   =========================================== */
.pkg-card {
    background: var(--color-bg-primary);
    border-radius: var(--card-border-radius);
    padding: var(--spacing-6);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-default);
}

.pkg-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.pkg-card--featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-lighter), var(--shadow-card);
}

/* ===========================================
   JOB CARD
   =========================================== */
.job-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-default);
}

.job-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

/* ===========================================
   APPLICANT CARD
   =========================================== */
.applicant-card,
.applicants-job {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-4);
    position: relative;
}

/* ===========================================
   CARD HEADER / FOOTER
   =========================================== */
.card-header {
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-light);
}

.card-footer {
    padding-top: var(--spacing-4);
    margin-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-light);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {

    .stat-card,
    .stat-card-cloud {
        padding: var(--spacing-4);
        min-height: 100px;
    }

    .stat-card .stat-value,
    .stat-card-cloud .stat-value {
        font-size: var(--font-size-2xl);
    }

    .cloud-card {
        padding: var(--spacing-4);
    }

    .cloud-card .cloud-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: var(--font-size-md);
    }
}
/* ============================================
   FORMS - Reusable Form Components
   ============================================ */

/* ===========================================
   BASE INPUT STYLES
   =========================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-family-primary);
    font-size: var(--input-font-size);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--input-border-width) solid var(--color-border-default);
    border-radius: var(--input-border-radius);
    transition: var(--transition-default);
    appearance: none;
    -webkit-appearance: none;
}

.form-control:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: var(--color-gray-400);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

/* ===========================================
   SELECT DROPDOWN
   =========================================== */
select.form-control,
select {
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%232DD4BF%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px;
    cursor: pointer;
}

/* Native styled select (dashboard) */
.native-styled-select {
    border: var(--input-border-width) solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.1);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.native-styled-select:hover {
    border-color: var(--color-primary-dark);
    box-shadow: 0 4px 16px rgba(45, 212, 191, 0.2);
}

.native-styled-select:focus {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

/* ===========================================
   TEXTAREA
   =========================================== */
textarea.form-control,
textarea {
    min-height: 120px;
    resize: vertical;
}

/* ===========================================
   FORM GROUP
   =========================================== */
.form-group {
    margin-bottom: var(--spacing-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group .form-hint {
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ===========================================
   CHECKBOX & RADIO
   =========================================== */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 2px 0 0 0;
    padding: 0;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-bg-primary);
    transition: var(--transition-fast);
}

.form-check input[type="radio"] {
    border-radius: var(--radius-full);
}

.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.form-check input[type="radio"]:checked {
    background-image: none;
    box-shadow: inset 0 0 0 4px var(--color-bg-primary);
}

.form-check label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.4;
}

/* ===========================================
   INPUT STATES
   =========================================== */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-error);
}

.form-control.is-invalid:focus,
input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-control.is-valid,
input.is-valid {
    border-color: var(--color-success);
}

.invalid-feedback {
    display: block;
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* ===========================================
   INPUT SIZES
   =========================================== */
.form-control-sm {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
}

.form-control-lg {
    padding: 16px 20px;
    font-size: var(--font-size-md);
}

/* ===========================================
   SEARCH INPUT
   =========================================== */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input-wrapper input {
    padding-left: 42px;
}

/* ===========================================
   FILE INPUT
   =========================================== */
.file-input-wrapper {
    position: relative;
    display: inline-block;
}

.file-input-wrapper input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-input-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--input-padding-y) var(--input-padding-x);
    background: var(--color-gray-50);
    border: 2px dashed var(--color-border-default);
    border-radius: var(--input-border-radius);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-default);
}

.file-input-label:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .form-control,
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* ============================================
   MOBILE HEADER - Modern Lightweight Design
   ============================================ */

/* Reset - Override any conflicting styles from other CSS files */
#apus-header-mobile,
#apus-header-mobile .container,
#apus-header-mobile .row,
#apus-header-mobile .col-xs-6 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Main Header Container */
#apus-header-mobile.header-mobile {
    position: sticky;
    top: 0;
    z-index: var(--z-fixed, 300);
    background: var(--color-white, #fff) !important;
    padding: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6) !important;
}

/* Container - Ensure proper background */
#apus-header-mobile>.container {
    background: transparent !important;
}

/* Row Reset */
#apus-header-mobile .row {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
}

/* Flex Middle - Main Layout */
#apus-header-mobile>.container>.row>.flex-middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* ===========================================
   LOGO SECTION (Left Side)
   =========================================== */
#apus-header-mobile .col-xs-6:first-child {
    flex: 0 0 auto;
    width: auto;
    float: none;
}

#apus-header-mobile #logo-container {
    display: flex;
    align-items: center;
}

#apus-header-mobile .logo {
    display: flex;
    align-items: center;
}

#apus-header-mobile .logo img {
    height: 26px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* ===========================================
   ACTIONS SECTION (Right Side)
   =========================================== */
#apus-header-mobile .col-xs-6:last-child {
    flex: 0 0 auto;
    width: auto;
    float: none;
}

#apus-header-mobile .col-xs-6:last-child>.flex-middle {
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any extra spacing from wrapper elements */
#apus-header-mobile .messages-top,
#apus-header-mobile .message-top,
#apus-header-mobile .top-wrapper-menu {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
}

/* ===========================================
   LOGIN TEXT BUTTON (for non-logged users)
   =========================================== */
#apus-header-mobile .btn-login-text {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    background: var(--color-bg-secondary, #f5f5f5);
    border-radius: var(--radius-pill, 50px);
    white-space: nowrap;
    transition: var(--transition-default, 0.2s ease);
}

#apus-header-mobile .btn-login-text:hover {
    background: var(--color-bg-tertiary, #e5e5e5);
    color: var(--color-text-primary, #1f2937);
}

/* ===========================================
   ICON BUTTONS (User menu, Messages, Notifications)
   - Minimal size, no padding
   =========================================== */
#apus-header-mobile .top-wrapper-menu,
#apus-header-mobile .messages-top,
#apus-header-mobile .message-top {
    position: relative;
    display: inline-flex;
}

#apus-header-mobile .btn-menu-account,
#apus-header-mobile .messages-bell,
#apus-header-mobile .message-notification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent !important;
    color: var(--color-text-primary, #1f2937);
    font-size: 20px;
    transition: var(--transition-default, 0.2s ease);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

#apus-header-mobile .btn-menu-account:hover,
#apus-header-mobile .messages-bell:hover,
#apus-header-mobile .message-notification:hover {
    color: var(--color-primary, #2DD4BF);
}

#apus-header-mobile .btn-menu-account i,
#apus-header-mobile .messages-bell i,
#apus-header-mobile .message-notification i {
    font-size: 20px;
    line-height: 1;
}

/* ===========================================
   NOTIFICATION BADGES
   =========================================== */
#apus-header-mobile .unread-count,
#apus-header-mobile .bg-warning {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 14px;
    text-align: center;
    color: var(--color-white, #fff);
    background: var(--color-error, #ef4444) !important;
    border-radius: var(--radius-pill, 50px);
}

/* ===========================================
   HAMBURGER MENU BUTTON - AGGRESSIVE OVERRIDE
   =========================================== */
html body #apus-header-mobile .btn-showmenu,
html body #apus-header-mobile .btn-showmenu.flex-column,
html body #apus-header-mobile .btn-showmenu.flex-column.flex,
html body #apus-header-mobile a.btn-showmenu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 20px !important;
    height: auto !important;
    min-width: 20px !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    gap: 3px !important;
}

/* Hamburger lines - First line */
html body #apus-header-mobile .btn-showmenu span.inner1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 2px !important;
    background: #1f2937 !important;
    border-radius: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hamburger lines - Second line */
html body #apus-header-mobile .btn-showmenu span.inner2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 2px !important;
    background: #1f2937 !important;
    border-radius: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hamburger lines - Third line */
html body #apus-header-mobile .btn-showmenu span.inner3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 2px !important;
    background: #1f2937 !important;
    border-radius: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===========================================
   DROPDOWN MENUS
   =========================================== */
#apus-header-mobile .inner-top-menu {
    position: absolute;
    top: 100%;
    right: -35px;
    min-width: 200px;
    background: var(--color-white, #fff);
    border-radius: var(--radius-default, 8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 6px 0;
    z-index: 100;
    display: none;
    max-height: none !important;
    overflow: visible !important;
}

/* Menu items inside dropdown */
#apus-header-mobile .inner-top-menu .nav.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: none !important;
    overflow: visible !important;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li {
    margin: 0;
    position: relative;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>a:hover {
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-primary, #2DD4BF);
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>a i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

/* Submenu (ustawienia dropdown) */
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>.dropdown-menu,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>ul {
    display: none;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    background: var(--color-gray-50, #f9fafb);
    border-radius: 0;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.open>.dropdown-menu,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li:hover>.dropdown-menu,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.open>ul,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li:hover>ul {
    display: block;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>.dropdown-menu>li>a,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>ul>li>a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 24px;
    font-size: 11px;
    color: var(--color-text-secondary, #4b5563);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>.dropdown-menu>li>a:hover,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li>ul>li>a:hover {
    background: var(--color-gray-100, #e5e7eb);
    color: var(--color-primary, #2DD4BF);
}

/* Arrow indicator for expandable items */
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.has-children>a:after,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.menu-item-has-children>a:after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.2s;
}

#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.has-children.open>a:after,
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.menu-item-has-children.open>a:after {
    transform: rotate(180deg);
}

#apus-header-mobile .top-wrapper-menu:hover .inner-top-menu,
#apus-header-mobile .inner-top-menu.show {
    display: block;
}

#apus-header-mobile .notifications-wrapper,
#apus-header-mobile .messages-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    max-width: 320px;
    background: var(--color-white, #fff);
    border-radius: var(--radius-default, 8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 12px;
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

#apus-header-mobile .notifications-wrapper ul,
#apus-header-mobile .messages-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#apus-header-mobile .notifications-wrapper li,
#apus-header-mobile .messages-wrapper li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

#apus-header-mobile .notifications-wrapper li:last-child,
#apus-header-mobile .messages-wrapper li:last-child {
    border-bottom: none;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 380px) {
    #apus-header-mobile .col-xs-6:last-child>.flex-middle {
        gap: 2px;
    }

    #apus-header-mobile .btn-login-text {
        padding: 4px 8px;
        font-size: 10px;
    }

    #apus-header-mobile .btn-menu-account i,
    #apus-header-mobile .messages-bell i,
    #apus-header-mobile .message-notification i {
        font-size: 18px;
    }
}

/* ===========================================
   STICKY HEADER STATE (when scrolled)
   =========================================== */
#apus-header-mobile.header-mobile.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* ===========================================
   NOTIFICATIONS DROPDOWN HEADER
   =========================================== */
#apus-header-mobile .notifications-wrapper .notifications-header,
.message-top .notifications-wrapper .notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

#apus-header-mobile .notifications-wrapper .notifications-title,
.message-top .notifications-wrapper .notifications-title {
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
}

#apus-header-mobile .notifications-wrapper .mark-all-read-btn,
.message-top .notifications-wrapper .mark-all-read-btn {
    font-size: 10px;
    font-weight: var(--font-weight-medium, 500);
    color: #6366f1;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.08);
}

#apus-header-mobile .notifications-wrapper .mark-all-read-btn:hover,
.message-top .notifications-wrapper .mark-all-read-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

#apus-header-mobile .notifications-wrapper .mark-all-read-btn.loading,
.message-top .notifications-wrapper .mark-all-read-btn.loading {
    opacity: 0.6;
    cursor: wait;
}

/* No notifications message */
#apus-header-mobile .notifications-wrapper .no-notifications,
.message-top .notifications-wrapper .no-notifications {
    text-align: center;
    padding: 20px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
}

/* ===========================================
   NOTIFICATION ITEMS - Modern Card Style
   =========================================== */
#apus-header-mobile .notifications-wrapper ul li.notification-item,
.message-top .notifications-wrapper ul li.notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 8px;
    margin: 0 -4px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease;
}

#apus-header-mobile .notifications-wrapper ul li.notification-item:hover,
.message-top .notifications-wrapper ul li.notification-item:hover {
    background: rgba(99, 102, 241, 0.04);
}

/* Notification Content */
#apus-header-mobile .notifications-wrapper .notification-content,
.message-top .notifications-wrapper .notification-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Notification Type Label */
#apus-header-mobile .notifications-wrapper .notification-type,
.message-top .notifications-wrapper .notification-type {
    font-size: 10px;
    font-weight: 400;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Job Title Link */
#apus-header-mobile .notifications-wrapper .notification-job,
.message-top .notifications-wrapper .notification-job {
    font-size: 12px;
    font-weight: 400;
    color: #1f2937;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
    margin-top: 5px;
    margin-bottom: 7px;
}

#apus-header-mobile .notifications-wrapper .notification-job:hover,
.message-top .notifications-wrapper .notification-job:hover {
    color: #6366f1;
}

/* Candidate Name */
#apus-header-mobile .notifications-wrapper .notification-candidate,
.message-top .notifications-wrapper .notification-candidate {
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

#apus-header-mobile .notifications-wrapper .notification-candidate i,
.message-top .notifications-wrapper .notification-candidate i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4);
}

/* Time */
#apus-header-mobile .notifications-wrapper .notification-time,
.message-top .notifications-wrapper .notification-time {
    font-size: 10px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

#apus-header-mobile .notifications-wrapper .notification-time i,
.message-top .notifications-wrapper .notification-time i {
    font-size: 10px;
}

/* Delete Button */
#apus-header-mobile .notifications-wrapper .notification-delete,
.message-top .notifications-wrapper .notification-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    margin: 0;
}

#apus-header-mobile .notifications-wrapper .notification-delete:hover,
.message-top .notifications-wrapper .notification-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

#apus-header-mobile .notifications-wrapper .notification-delete i,
.message-top .notifications-wrapper .notification-delete i {
    font-size: 14px;
}

/* ===========================================
   RESPONSIVE - Show mobile header up to 1300px
   (override Bootstrap hidden-lg which hides at ≥1200px)
   =========================================== */
@media (max-width: 1300px) {
    #apus-header-mobile.header-mobile.hidden-lg {
        display: block !important;
    }
}

/* ===========================================
   CUSTOM MENUS ICONS (e.g. Kreator CV)
   =========================================== */
#apus-header-mobile .inner-top-menu .nav.navbar-nav>li.menu-kreator-cv>a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url(./4140b055c96b6b694dd8.svg);
    mask-image: url(./4140b055c96b6b694dd8.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
}
/* ============================================
   DESKTOP HEADER - Modern Unified Design
   ============================================ */

/* Main Header Container */
#apus-header.apus-header-desktop {
    position: relative;
    z-index: var(--z-fixed, 300);
    background: var(--color-white, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

#apus-header.apus-header-desktop.sticky-header {
    position: sticky;
    top: 0;
}

/* Override Bootstrap container width ONLY in header */
#apus-header.apus-header-desktop .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Inner wrapper */
#apus-header.apus-header-desktop .header-desktop-inner {
    padding: 1px 12px;
}

/* Main content flex container */
#apus-header.apus-header-desktop .header-desktop-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* ===========================================
   LOGO SECTION
   =========================================== */
#apus-header.apus-header-desktop .header-logo {
    flex: 0 0 auto;
}

#apus-header.apus-header-desktop .header-logo a {
    display: flex;
    align-items: center;
}

#apus-header.apus-header-desktop .header-logo img {
    height: 31px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-left: 10px;
}

/* ===========================================
   NAVIGATION
   =========================================== */
#apus-header.apus-header-desktop .header-nav {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

#apus-header.apus-header-desktop .nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    /* NEVER wrap menu items */
    white-space: nowrap;
    /* Keep all items in single line */
}

#apus-header.apus-header-desktop .nav-menu>li {
    position: relative;
}

#apus-header.apus-header-desktop .nav-menu>li>a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#apus-header.apus-header-desktop .nav-menu>li>a:hover,
#apus-header.apus-header-desktop .nav-menu>li.current-menu-item>a,
#apus-header.apus-header-desktop .nav-menu>li.active>a {
    color: var(--color-primary, #2DD4BF);
    background: rgba(45, 212, 191, 0.08);
}

/* Dropdown menu styles */
#apus-header.apus-header-desktop .nav-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
}

#apus-header.apus-header-desktop .nav-menu>li:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#apus-header.apus-header-desktop .nav-menu .dropdown-menu li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: all 0.15s ease;
}

#apus-header.apus-header-desktop .nav-menu .dropdown-menu li a:hover {
    background: rgba(45, 212, 191, 0.08);
    color: var(--color-primary, #2DD4BF);
}

/* ===========================================
   ACTIONS SECTION (Right Side)
   =========================================== */
#apus-header.apus-header-desktop .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

/* Individual action items */
#apus-header.apus-header-desktop .header-action-item {
    position: relative;
}

/* ===========================================
   NOTIFICATION ICONS (Messages & Bell)
   =========================================== */
#apus-header.apus-header-desktop .messages-bell,
#apus-header.apus-header-desktop .message-notification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-text-primary, #1f2937);
    font-size: 16px;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

#apus-header.apus-header-desktop .messages-bell:hover,
#apus-header.apus-header-desktop .message-notification:hover {
    background: var(--color-primary, #2DD4BF);
    color: #fff;
}

/* Notification badge */
#apus-header.apus-header-desktop .unread-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--color-error, #ef4444);
    border-radius: 50px;
}

/* ===========================================
   DROPDOWN PANELS (Notifications, Messages)
   =========================================== */
#apus-header.apus-header-desktop .dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 320px;
    max-width: 360px;
    background: var(--color-white, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    max-height: 400px;
    overflow-y: auto;
}

#apus-header.apus-header-desktop .header-action-item:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#apus-header.apus-header-desktop .dropdown-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Notifications header */
#apus-header.apus-header-desktop .notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

#apus-header.apus-header-desktop .notifications-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
}

#apus-header.apus-header-desktop .mark-all-read-btn {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary, #2DD4BF);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(45, 212, 191, 0.1);
    transition: all 0.15s ease;
}

#apus-header.apus-header-desktop .mark-all-read-btn:hover {
    background: rgba(45, 212, 191, 0.2);
}

/* Notification items */
#apus-header.apus-header-desktop .notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 8px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease;
}

#apus-header.apus-header-desktop .notification-item:hover {
    background: rgba(45, 212, 191, 0.04);
}

#apus-header.apus-header-desktop .notification-content {
    flex: 1;
    min-width: 0;
}

#apus-header.apus-header-desktop .notification-type {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-primary, #2DD4BF);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

#apus-header.apus-header-desktop .notification-job {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 6px;
}

#apus-header.apus-header-desktop .notification-job:hover {
    color: var(--color-primary, #2DD4BF);
}

#apus-header.apus-header-desktop .notification-candidate {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 4px;
}

#apus-header.apus-header-desktop .notification-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
}

#apus-header.apus-header-desktop .notification-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.15s ease;
}

#apus-header.apus-header-desktop .notification-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ===========================================
   USER MENU (Logged in state)
   =========================================== */
#apus-header.apus-header-desktop .user-menu-wrapper {
    position: relative;
}

#apus-header.apus-header-desktop .user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--color-bg-secondary, #f5f5f5);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

#apus-header.apus-header-desktop .user-menu-toggle:hover {
    background: var(--color-bg-tertiary, #e5e5e5);
}

#apus-header.apus-header-desktop .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

#apus-header.apus-header-desktop .user-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--color-primary, #2DD4BF);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}

#apus-header.apus-header-desktop .user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    height: 26px;
    margin: 10px 0 10px;
}

#apus-header.apus-header-desktop .user-menu-toggle i.ti-angle-down {
    font-size: 10px;
    color: var(--color-text-secondary, #6b7280);
}

/* User dropdown menu */
#apus-header.apus-header-desktop .user-dropdown {
    min-width: 200px;
}

#apus-header.apus-header-desktop .user-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#apus-header.apus-header-desktop .user-menu-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

#apus-header.apus-header-desktop .user-menu-list li a:hover {
    background: rgba(45, 212, 191, 0.08);
    color: var(--color-primary, #2DD4BF);
}

#apus-header.apus-header-desktop .user-menu-list li a i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* ===========================================
   LOGIN BUTTON (Non-logged users)
   =========================================== */
#apus-header.apus-header-desktop .btn-login {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    background: transparent;
    border: 2px solid var(--color-primary, #51DACF);
    border-radius: 50px;
    transition: all 0.2s ease;
}

#apus-header.apus-header-desktop .btn-login:hover {
    background: var(--color-primary, #51DACF);
    color: #000;
}

/* ===========================================
   ADD JOB BUTTON
   =========================================== */
#apus-header.apus-header-desktop .btn-add-job {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    background: var(--color-primary, #51DACF);
    border: 2px solid var(--color-primary, #51DACF);
    border-radius: 50px;
    transition: all 0.2s ease;
}

#apus-header.apus-header-desktop .btn-add-job:hover {
    background: transparent;
    color: #000;
}

#apus-header.apus-header-desktop .btn-add-job i {
    font-size: 12px;
}

/* ===========================================
   RESPONSIVE HIDING
   Switch to mobile header earlier to prevent menu cramping
   =========================================== */
@media (max-width: 1300px) {
    #apus-header.apus-header-desktop {
        display: none !important;
    }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
    #apus-header.apus-header-desktop .header-desktop-content {
        gap: 40px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}
/* ============================================
   FOOTER - Light Gray Modern Design
   Based on header-desktop.css architecture
   ============================================ */

/* ===========================================
   CSS VARIABLES
   =========================================== */
:root {
    --footer-bg: #f3f4f6;
    --footer-bg-bottom: #f9fafb;
    --footer-text: #6b7280;
    --footer-text-muted: #9ca3af;
    --footer-heading: #1f2937;
    --footer-border: #e5e7eb;
    --footer-hover: #2DD4BF;
}

/* ===========================================
   MAIN FOOTER CONTAINER - DESKTOP
   =========================================== */
.apus-footer.footer-desktop {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
}

.apus-footer .footer-main {
    padding: 40px 0 32px;
}

/* ===========================================
   FOOTER COLUMNS GRID - 5 COLUMNS
   =========================================== */
.apus-footer .footer-columns-5 {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 32px;
}

@media (max-width: 1200px) {
    .apus-footer .footer-columns-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* ===========================================
   CONTACT COLUMN (First Column)
   =========================================== */
.apus-footer .footer-column-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.apus-footer .footer-logo {
    margin-bottom: 4px;
}

.apus-footer .footer-logo img {
    height: 32px;
    width: auto;
}

.apus-footer .footer-address {
    font-style: normal;
    font-size: 13px;
    color: var(--footer-text);
    line-height: 1.6;
}

.apus-footer .footer-address p {
    margin: 0;
}

.apus-footer .footer-email {
    font-size: 13px;
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.apus-footer .footer-email:hover {
    color: var(--footer-hover);
}

/* ===========================================
   COLUMN STYLES
   =========================================== */
.apus-footer .footer-column {
    min-width: 0;
}

.apus-footer .footer-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--footer-heading);
    margin: 0 0 14px;
}

.apus-footer .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apus-footer .footer-menu li {
    margin-bottom: 8px;
}

.apus-footer .footer-menu li:last-child {
    margin-bottom: 0;
}

.apus-footer .footer-menu a {
    font-size: 13px;
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.apus-footer .footer-menu a:hover {
    color: var(--footer-hover);
}

/* ===========================================
   CITIES SECTION
   =========================================== */
.apus-footer .footer-cities-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--footer-border);
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    align-items: start;
}

.apus-footer .footer-cities-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--footer-heading);
    margin: 0;
    line-height: 1.4;
}

.apus-footer .footer-cities-heading span {
    font-weight: 400;
    color: var(--footer-text-muted);
}

.apus-footer .footer-cities-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.apus-footer .footer-cities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 16px;
}

.apus-footer .footer-city-link {
    font-size: 10px;
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.apus-footer .footer-city-link:hover {
    color: var(--footer-hover);
}

@media (max-width: 1400px) {
    .apus-footer .footer-cities-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .apus-footer .footer-cities-section {
        grid-template-columns: 1fr;
    }

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

/* ===========================================
   SUBFOOTER / BOTTOM BAR
   =========================================== */
.apus-footer .footer-bottom {
    padding: 18px 0;
    border-top: 1px solid var(--footer-border);
    background: var(--footer-bg-bottom);
}

.apus-footer .footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.apus-footer .footer-copyright {
    font-size: 12px;
    color: var(--footer-text-muted);
}

/* ===========================================
   SOCIAL LINKS
   =========================================== */
.apus-footer .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.apus-footer .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid var(--footer-border);
    border-radius: 50%;
    color: var(--footer-text);
    transition: all 0.2s ease;
}

.apus-footer .social-link:hover {
    background: var(--footer-hover);
    border-color: var(--footer-hover);
    color: #fff;
}

.apus-footer .social-link svg {
    width: 16px;
    height: 16px;
}

/* ===========================================
   RESPONSIVE - DESKTOP ONLY
   =========================================== */
@media (max-width: 1300px) {
    .apus-footer.footer-desktop {
        display: none !important;
    }
}

/* ===========================================
   MOBILE FOOTER STYLES
   =========================================== */
.apus-footer.footer-mobile {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 0 0 24px;
}

@media (min-width: 1301px) {
    .apus-footer.footer-mobile {
        display: none !important;
    }
}

/* Accordion Sections */
.footer-mobile-sections {
    border-bottom: 1px solid var(--footer-border);
}

.footer-accordion {
    border-top: 1px solid var(--footer-border);
}

.footer-accordion:first-child {
    border-top: none;
}

.footer-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--footer-heading);
    cursor: pointer;
    list-style: none;
    user-select: none;
    text-transform: none;
}

.footer-accordion-header::-webkit-details-marker {
    display: none;
}

.footer-accordion-header i {
    font-size: 12px;
    color: var(--footer-text-muted);
    transition: transform 0.2s ease;
}

.footer-accordion[open] .footer-accordion-header i {
    transform: rotate(180deg);
}

.footer-accordion-content {
    padding: 0 0 14px;
}

.footer-accordion .footer-menu li {
    margin-bottom: 10px;
}

.footer-accordion .footer-menu a {
    font-size: 13px;
    color: var(--footer-text);
    text-decoration: none;
}

.footer-accordion .footer-menu a:hover {
    color: var(--footer-hover);
}

/* Mobile Contact Info */
.footer-mobile-contact {
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid var(--footer-border);
}

.footer-mobile-contact .footer-logo {
    margin-bottom: 12px;
}

.footer-mobile-contact .footer-logo img {
    height: 28px;
    width: auto;
}

.footer-mobile-contact .footer-address {
    font-size: 12px;
    color: var(--footer-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.footer-mobile-contact .footer-email {
    font-size: 12px;
    color: var(--footer-text);
    text-decoration: none;
}

/* Cities on mobile - 2 columns */
.footer-cities-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.footer-cities-mobile li {
    margin-bottom: 0 !important;
}

/* Mobile Bottom */
.footer-mobile-bottom {
    margin-top: 20px;
    text-align: center;
}

.footer-mobile .footer-social {
    justify-content: center;
    margin-bottom: 14px;
}

.footer-mobile .social-link {
    width: 38px;
    height: 38px;
}

.footer-mobile .social-link svg {
    width: 18px;
    height: 18px;
}

.footer-mobile .footer-copyright {
    font-size: 11px;
    color: var(--footer-text-muted);
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
    .apus-footer {
        display: none !important;
    }
}

/* ============================================
   OFFCANVAS MOBILE MENU - Modern Redesign
   ============================================ */

/* ===========================================
   BASE CONTAINER
   =========================================== */
#apus-mobile-menu.apus-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999991;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

#apus-mobile-menu.apus-offcanvas.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

#apus-mobile-menu .apus-offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    color: #1f2937;
}

/* ===========================================
   HEADER
   =========================================== */
#apus-mobile-menu .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
    flex-shrink: 0;
}

#apus-mobile-menu .offcanvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #1f2937;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

#apus-mobile-menu .offcanvas-close:hover {
    background: #f3f4f6;
}

#apus-mobile-menu .offcanvas-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

#apus-mobile-menu .offcanvas-spacer {
    width: 36px;
}

/* ===========================================
   CONTENT AREA
   =========================================== */
#apus-mobile-menu .offcanvas-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

/* ===========================================
   AUTH BUTTON
   =========================================== */
#apus-mobile-menu .offcanvas-auth {
    margin-bottom: 16px;
}

#apus-mobile-menu .offcanvas-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#apus-mobile-menu .offcanvas-auth-btn:hover {
    border-color: #2DD4BF;
    color: #2DD4BF;
}

#apus-mobile-menu .offcanvas-auth-btn i {
    font-size: 16px;
}

#apus-mobile-menu .offcanvas-auth-btn--logged-in {
    border: none;
    background: #f0fdfa;
    padding-left: 0;
}

#apus-mobile-menu .offcanvas-auth-btn--logged-in span {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

/* Auth User Logo */
#apus-mobile-menu .auth-logo {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===========================================
   DIVIDER
   =========================================== */
#apus-mobile-menu .offcanvas-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0 0 16px 0;
}

/* ===========================================
   NAVIGATION MENU - High specificity overrides
   =========================================== */
#apus-mobile-menu .offcanvas-nav {
    flex: 1;
}

/* Menu list - reset and style */
#apus-mobile-menu .apus-offcanvas-body .offcanvas-nav ul.offcanvas-menu-list,
#apus-mobile-menu ul.offcanvas-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Menu items */
#apus-mobile-menu .apus-offcanvas-body .offcanvas-nav ul.offcanvas-menu-list>li,
#apus-mobile-menu ul.offcanvas-menu-list>li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: transparent !important;
}

#apus-mobile-menu ul.offcanvas-menu-list>li:last-child {
    border-bottom: none !important;
}

/* Menu links - main styling */
#apus-mobile-menu .apus-offcanvas-body .offcanvas-nav ul.offcanvas-menu-list>li>a,
#apus-mobile-menu ul.offcanvas-menu-list>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 4px !important;
    color: #4b5563 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
}

#apus-mobile-menu ul.offcanvas-menu-list>li>a:hover,
#apus-mobile-menu ul.offcanvas-menu-list>li.active>a,
#apus-mobile-menu ul.offcanvas-menu-list>li.current-menu-item>a {
    color: #2DD4BF !important;
    background: transparent !important;
}

/* Menu icons */
#apus-mobile-menu ul.offcanvas-menu-list>li>a>i {
    flex-shrink: 0 !important;
    width: 24px !important;
    font-size: 20px !important;
    color: #9ca3af !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

#apus-mobile-menu ul.offcanvas-menu-list>li>a:hover>i {
    color: #2DD4BF !important;
}

/* SVG Menu icons */
#apus-mobile-menu ul.offcanvas-menu-list>li>a>.menu-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    stroke: #9ca3af !important;
    transition: stroke 0.2s ease !important;
}

#apus-mobile-menu ul.offcanvas-menu-list>li>a:hover>.menu-icon {
    stroke: #2DD4BF !important;
}

/* Submenu */
#apus-mobile-menu .offcanvas-menu-list .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px 0 8px 32px;
}

#apus-mobile-menu .offcanvas-menu-list>li.has-submenu.open>.sub-menu {
    display: block;
}

#apus-mobile-menu .offcanvas-menu-list .sub-menu>li>a {
    display: block;
    padding: 8px 16px;
    color: #6b7280;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
}

#apus-mobile-menu .offcanvas-menu-list .sub-menu>li>a:hover {
    color: #2DD4BF;
    background: #f9fafb;
}

/* ===========================================
   SOCIAL SECTION
   =========================================== */
#apus-mobile-menu .offcanvas-social {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

#apus-mobile-menu .offcanvas-social-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
}

#apus-mobile-menu .offcanvas-social-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

#apus-mobile-menu .offcanvas-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #1f2937;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#apus-mobile-menu .offcanvas-social-icons a:hover {
    background: #2DD4BF;
    border-color: #2DD4BF;
    color: #fff;
}

#apus-mobile-menu .offcanvas-social-icons .social-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ===========================================
   OVERLAY
   =========================================== */
.over-dark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.over-dark.active {
    opacity: 1;
    visibility: visible;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 380px) {
    #apus-mobile-menu.apus-offcanvas {
        width: 100%;
        max-width: 100%;
    }

    #apus-mobile-menu .offcanvas-content {
        padding: 16px;
    }
}

/* ===========================================
   CUSTOM MENUS ICONS (e.g. Kreator CV)
   =========================================== */
#apus-mobile-menu ul.offcanvas-menu-list>li.menu-kreator-cv>a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url(./4140b055c96b6b694dd8.svg);
    mask-image: url(./4140b055c96b6b694dd8.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    margin-right: -4px;
    /* compensate for the flex gap */
}
.loader-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}
.loader-container {
    height: 100%;
}
.loader-wrapper {
    width: 120px;
    z-index: 9999;
}

/* Loader for dynamic jobs */
.items-wrapper-list .loader-overlay {
    height: 160px;
    grid-column: span 2;
    position: initial;
}

/* Loader for more jobs */
#load-more-jobs .loader-overlay {
    border-radius: 30px;
}
#load-more-jobs .loader-wrapper {
    display: flex;
}

@media (max-width: 768px) {
    .items-wrapper-list .loader-overlay {
        grid-column: span 1;
    }
}
#mceu_40.mce-notification-error {
    display: none;
}

/* SVG icons */
.svg-icon {
    display: inline-block;
    vertical-align: middle;
    height: 19px;
    width: 19px;
}

/* Collapsible */
.collapsible-toggle {
    cursor: pointer;
}
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.single-job_listing #wrapper-container {
    overflow: visible !important;
}

.single-job_listing #creator-main-content {
    position: relative;
    z-index: 11;
}

.apply-sticky-btn-wrapper {
    position: sticky;
    bottom: -100%;
    transition: bottom 0.5s ease;
    background-color: #ffffff;
    padding: 0 15px;
}
.apply-sticky-btn-wrapper.show,
.apply-sticky-btn-wrapper.-always-visible {
    bottom: 0;
    transition: bottom 0.5s ease;
}

.apply-sticky-btn-wrapper > .row {
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    width: calc(100% + 30px);
    background-color: var(--white-color);
    box-shadow:  0 2px 4px 0 rgba(0, 0, 0, 0.08),  0 0 6px 0 rgba(0, 0, 0, 0.02);
}

.apply-sticky-btn-wrapper .inner-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 56px;
}

.apply-sticky-btn-wrapper .heading_wrapper {
    display: flex;
    flex-direction: column;
}

.apply-sticky-btn-wrapper .heading_inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.apply-sticky-btn-wrapper .heading_inner span {
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

.apply-sticky-btn-wrapper .row::before,
.apply-sticky-btn-wrapper .row::after {
    display: none;
}

.apply-sticky-btn-wrapper h4 {
    margin: 0;
}

.apply-sticky-btn-wrapper .job-details-employer {
    font-size: 11px;
    margin: 10px 0 0;
}

.apply-sticky-btn-wrapper .btn-apply {
    font-weight: 700;
    fill: #000000;
    color: #000000;
    background-color: #51DACF;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #51DACF;
    border-radius: 30px 30px 30px 30px;
}

.apply-sticky-btn-wrapper .btn-apply:hover {
    color: #000000;
    background-color: #FFFFFF00;
    border-color: #51DACF;
}

@media (max-width: 767px) {
    .apply-sticky-btn-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .apply-sticky-btn-wrapper h4 {
        font-size: 14px;
    }

    .apply-sticky-btn-wrapper .btn {
        padding: 9px 16px;
    }
}

/* ==========================================================================
   AUTH MODAL STYLES
   Phase 51: Separated Login Popup Styles
   ========================================================================== */

/* Lock body scroll when popup is open - MOBILE FIX */
body.mfp-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  /* top is set by JS to preserve scroll position */
}

/* Ensure scroll is contained within popup - AGGRESSIVE */
body.mfp-open .mfp-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.mfp-open .mfp-container {
  min-height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
}

/* Prevent scroll escape on background */
body.mfp-open .mfp-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Fix Popup Position - High Specificity */
body .apus-mfp-zoom-in {
  top: 0;
  position: fixed;
}

/* User Base Width: 550px */
body .apus-mfp-zoom-in .mfp-inline-holder .mfp-content,
body .apus-mfp-zoom-in .mfp-ajax-holder .mfp-content {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto;
}

/* ==========================================================================
   STABILIZE POPUP POSITION
   ========================================================================== */

body .apus-mfp-zoom-in .mfp-container:before {
  display: none;
}

body .apus-mfp-zoom-in .mfp-container {
  padding-top: 0;
  padding-bottom: 0;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
}

/* ==========================================================================
   ANIMATION: SLIDE DOWN (Phase 60)
   ========================================================================== */

body .apus-mfp-zoom-in .mfp-content {
  vertical-align: top;
  /* Phase 60: Start Hidden & Translated Up (Slide Start) */
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Open State */
body .apus-mfp-zoom-in.mfp-ready .mfp-content {
  opacity: 1;
  transform: translateY(0);
}

/* Closing State */
body .apus-mfp-zoom-in.mfp-removing .mfp-content {
  opacity: 0;
  transform: translateY(-50px);
}

/* Background Animation */
body .mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

body .mfp-bg.mfp-ready {
  opacity: 0.8;
}

body .mfp-bg.mfp-removing {
  opacity: 0;
}

/* MAKE OUTER CONTAINERS TRANSPARENT */
body .apus-mfp-zoom-in .mfp-content,
body .apus-mfp-zoom-in .small-dialog-content,
body .apus-mfp-zoom-in .white-popup-block,
body .small-dialog-content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* HIDE OUTER HEADER & TITLE */
body .apus-mfp-zoom-in .small-dialog-header,
body .apus-mfp-zoom-in .modal-header,
body .apus-mfp-zoom-in .mfp-content>h3,
body .apus-mfp-zoom-in .white-popup>h3,
body .apus-mfp-zoom-in h3.title,
body #apus_register_form>h3 {
  display: none;
}

/* User Identified Fix for Title Wrapper Gap */
body .form-login-register-inner .title-wrapper {
  margin-bottom: 0 !important;
}

/* Custom Close Button in Slider */
body .custom-slider-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  color: #64748b;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  padding: 0;
}

body .custom-slider-close:hover {
  color: #f43f5e;
}

/* ==========================================================================
   CONTAINER STRUCTURE
   ========================================================================== */

/* OUTER WRAPPER: Transparent BG (User Request) */
body #apus_register_form {
  background: #9e9e9e00;
  border-radius: 6px;
  box-shadow: none;
  padding: 0;
  /* Phase 53: Removed padding to merge with slider */
  position: relative;
  max-width: 600px !important;
  margin: 0 auto;
}

/* INNER WRAPPER: The Card */
body .apus-mfp-zoom-in .mfp-content .register-form-wrapper,
body .register-form-wrapper,
body #register-modal .modal-content {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  max-width: 600px !important;
  max-width: 600px !important;
  margin: 0 auto;
  /* Phase 52: Removed top margin */

  /* PADDING STRICT */
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 20px;
  padding-right: 20px;

  border-radius: 0 0 6px 6px;
  /* Phase 52: Flat top */
}

/* Gradient Top Bar - REMOVED from Form, Moved to Slider */
body .register-form-wrapper::before,
body .auth-popup-login .account-login-form::before,
body .auth-popup-login #apus_login_forgot_form::before,
body .auth-popup-login .login-form-wrapper .form-container::before {
  display: none !important;
}

/* ==========================================================================
   TRUSTED SLIDER
   ========================================================================== */
.header-trusted-slider {
  width: 100% !important;
  max-width: 600px !important;
  /* Match mobile container width */
  margin: 0 auto;
  /* Center it */
  margin-bottom: 0px;
  /* Phase 52: Removed gap */
  text-align: center;
  position: relative;
  display: block;
  z-index: 30;
  /* Phase 57: Increased Z-index to be above form */
  background: #fff;
  padding: 15px;
  border-radius: 6px 6px 0 0;
  /* Phase 52: Flat bottom */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  min-height: 80px;
  /* Phase 57: Prevent collapse */
}

/* Phase 52: Move Rainbow Border to Slider Top */
.header-trusted-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
  z-index: 10;
  border-radius: 6px 6px 0 0;
}

.header-trusted-slider .trusted-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.trusted-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trusted-marquee-content {
  display: inline-flex;
  gap: 40px;
  animation: scrollLeft 40s linear infinite;
  padding-left: 0;
  align-items: center;
}

.header-trusted-slider .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 80px;
}

.header-trusted-slider .logo-item img {
  max-height: 25px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
  object-fit: contain;
}

.header-trusted-slider:hover .logo-item img {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.33%);
  }
}

/* ==========================================================================
   TABS STYLING
   ========================================================================== */
body .register-form-wrapper .nav-tabs {
  border-bottom: none;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 5px;
  background: #f8fafc;
  border-radius: 6px;
}

body .register-form-wrapper .nav-tabs>li {
  float: none;
  display: inline-block;
  margin: 0;
  flex: 1;
}

body .register-form-wrapper .nav-tabs>li>a {
  border: 1px solid transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 15px;
  background: transparent;
  border-radius: 6px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body .register-form-wrapper .nav-tabs>li>a:hover {
  background: #ffffff;
  color: #8b5cf6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body .register-form-wrapper .nav-tabs>li.active>a,
body .register-form-wrapper .nav-tabs>li.active>a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
  border-bottom: none;
}

.register-form-wrapper .nav-tabs>li>a i {
  font-size: 14px;
}

/* ==========================================================================
   CLOSE BUTTON (Strict User Request)
   ========================================================================== */
/* SCORCHED EARTH POLICY: Hide ALL close buttons by default */
body .apus-mfp-zoom-in .mfp-close,
body button.mfp-close,
body .close-magnific-popup {
  display: none !important;
}

/* REVIVE ONLY THE SLIDER CLOSE BUTTON */
body .apus-mfp-zoom-in .header-trusted-slider .custom-slider-close {
  display: block !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  color: #64748b !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: transparent !important;
  font-size: 24px !important;
  cursor: pointer !important;
}

body .apus-mfp-zoom-in .header-trusted-slider .custom-slider-close:hover {
  color: #f43f5e !important;
}

body .apus-mfp-zoom-in .mfp-close:hover,
body .close-magnific-popup:hover {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.1);
  transform: rotate(90deg);
}

.mfp-content {
  position: relative;
}

/* ==========================================================================
   FORM & INPUTS
   ========================================================================== */
body .register-form-wrapper h3,
body .register-form-wrapper .title {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
  background: -webkit-linear-gradient(45deg, #333, #666);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Targeting Inputs */
body .register-form-wrapper input[type="text"],
body .register-form-wrapper input[type="email"],
body .register-form-wrapper input[type="password"],
body .register-form-wrapper select.form-control {
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 6px;
  box-shadow: none;
  color: #475569;
  font-weight: 400;
  box-sizing: border-box;
  width: 100%;
}

body .register-form-wrapper input:focus,
body .register-form-wrapper select:focus {
  background: #fff;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.show_hide_password {
  position: relative;
  display: block;
}

body .register-form-wrapper .toggle-password {
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  color: #94a3b8;
}

/* STRICT LABELS FIX (Font Weight) */
body .register-form-wrapper label,
body .register-form-wrapper label strong,
body .register-form-wrapper label b,
body .register-form-wrapper .form-group label,
body form.cmb-form .cmb-th label,
body form.cmb-form .cmb2-metabox .cmb-th label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}

body .cmb-th label {
  font-weight: 500;
}

body .register-form-wrapper label .required,
body .cmb-th label .required {
  color: #f43f5e;
  font-size: 12px;
}

/* Checkbox Spacing - Compact */
body .register-form-wrapper form.cmb-form .cmb-type-checkbox {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: -4px;
  margin-left: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Metabox labels */
body form.cmb-form div.cmb2-metabox .cmb-th,
body .register-form-wrapper form.cmb-form div.cmb2-metabox .cmb-th {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  padding-bottom: 4px;
  line-height: 1.4;
}

/* Form Layout */
body .register-form-wrapper form.cmb-form {
  margin: 0 auto;
  max-width: 600px;
  margin-top: 15px;
}

body .register-form-wrapper .form-group {
  margin-bottom: 8px;
}

/* GUS BUTTON MINI */
body button.gus-mini-btn {
  position: absolute;
  top: 21px;
  right: 8px;
  transform: translateY(-50%);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 10;
  line-height: 1.2;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
}

body button.gus-mini-btn:hover {
  background: #dcfce7;
}

/* NIP Input Padding */
body input[name*="nip"] {
  padding-right: 70px;
}

/* Buttons */
body .register-form-wrapper button[type="submit"],
body .register-form-wrapper input[type="submit"] {
  width: calc(100% - 20px);
  height: 44px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  border: none;
  border-radius: 35px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
  text-transform: none;
}

body .register-form-wrapper button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* Checkboxes */
body .register-form-wrapper input[type="checkbox"] {
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  width: 16px;
  height: 16px;
}

/* Success Message */
.gus-success-message {
  font-size: 11px;
  padding: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  margin-top: 5px;
  border-radius: 6px;
  color: #065f46;
  clear: both;
}

/* CV Upload (Phase 50: Restored Broad Selectors) */
body .register-form-wrapper .cmb-type-file .cmb-td,
body .register-form-wrapper .cmb-type-file_list .cmb-td,
body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td,
body .register-form-wrapper [class*="resume"] .cmb-td,
body .register-form-wrapper [class*="cv"] .cmb-td {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background: #f8fafc;
  transition: all 0.3s ease;
  margin-top: 5px;
}

body .register-form-wrapper .cmb-type-file .cmb-td:hover,
body .register-form-wrapper .cmb-type-file_list .cmb-td:hover,
body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td:hover {
  border-color: #2DD4BF;
  background: rgba(45, 212, 191, 0.03);
}

/* Ukrycie ikony 📄 w dropie CV - globalnie (desktop + mobile) */
body .register-form-wrapper .label-can-drag::before,
body .register-form-wrapper .cmb2-id--candidate-cv-attachment .label-can-drag::before {
  display: none !important;
  content: none !important;
}

/* Kompaktowe paddingi w dropie CV */
body .register-form-wrapper .label-can-drag {
  margin-bottom: 4px;
  padding: 0;
}

body .register-form-wrapper .label-can-drag .form-group.group-upload {
  margin-top: 4px;
  margin-bottom: 0;
}

body .register-form-wrapper .label-can-drag .text-drag {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
  color: #94a3b8;
}

body .register-form-wrapper .cmb-type-file input[type="button"],
body .register-form-wrapper .cmb-type-file input[type="file"]::file-selector-button,
body .register-form-wrapper .cmb-type-wp-job-board-pro-file input[type="button"],
body .register-form-wrapper [class*="resume"] input[type="button"] {
  background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%);
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(45, 212, 191, 0.2);
}

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

  body .apus-mfp-zoom-in .mfp-inline-holder .mfp-content,
  body .apus-mfp-zoom-in .mfp-ajax-holder .mfp-content,
  body #apus_register_form {
    max-width: 1100px !important;
  }

  body .header-trusted-slider {
    max-width: 1100px !important;
  }

  body .apus-mfp-zoom-in .mfp-content .register-form-wrapper,
  body .register-form-wrapper {
    max-width: 1100px !important;
  }

  body .register-form-wrapper form.cmb-form .cmb2-metabox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin-left: 20px;
    margin-right: 20px;
  }

  body .register-form-wrapper form.cmb-form {
    display: block;
    max-width: 100%;
    margin-top: 15px;
  }

  body .register-form-wrapper form.cmb-form>input[type="hidden"],
  body .register-form-wrapper form.cmb-form .cmb-type-hidden {
    display: none;
  }

  body .register-form-wrapper form.cmb-form .cmb-row {
    margin-bottom: 0;
    width: calc(50% - 5px);
    border: none;
    padding: 0;
    min-width: 0;
  }

  /* Full Width Exceptions */
  body .register-form-wrapper form.cmb-form .cmb-type-checkbox,
  body .register-form-wrapper form.cmb-form .cmb2-id-_candidate_phone,
  body .register-form-wrapper form.cmb-form .cmb-type-file,
  body .register-form-wrapper form.cmb-form .cmb-type-file_list,
  body .register-form-wrapper form.cmb-form .cmb-type-wp-job-board-pro-file,
  body .register-form-wrapper form.cmb-form [class*="resume"],
  body .register-form-wrapper form.cmb-form [class*="cv"],
  body .register-form-wrapper .ga-recaptcha,
  body #recaptcha-register-candidate,
  body #recaptcha-register-employer {
    width: 100%;
    clear: both;
  }

  /* Upload special ordering */
  body .register-form-wrapper form.cmb-form .cmb-type-file,
  body .register-form-wrapper form.cmb-form .cmb-type-file_list,
  body .register-form-wrapper form.cmb-form .cmb-type-wp-job-board-pro-file {
    order: 10;
  }

  body .register-form-wrapper form.cmb-form .cmb2-id-_employer_phone {
    width: calc(50% - 5px);
  }

  body .cmb-th,
  body .cmb-td {
    width: 100%;
    float: none;
  }

  .gus-fetch-btn-wrapper,
  .gus-success-message {
    width: 100%;
  }
}

/* ==========================================================================
   TRUSTED SLIDER - MOBILE MENU CONTEXT
   ========================================================================== */

#apus-mobile-menu .header-trusted-slider.trusted-slider--mobile-menu {
  margin: 20px 0;
  padding: 15px 10px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  max-width: 100%;
}

#apus-mobile-menu .trusted-slider--mobile-menu::before {
  display: none;
}

#apus-mobile-menu .trusted-slider--mobile-menu .logo-item img {
  max-height: 20px;
}

#apus-mobile-menu .trusted-slider--mobile-menu .trusted-marquee-content {
  gap: 25px;
}

#apus-mobile-menu .trusted-slider--mobile-menu .trusted-label {
  font-size: 10px;
  margin-bottom: 10px;
}

/* ==========================================================================
   GUEST APPLY POPUP (ISOLATED)
   Styles specific to job application popup - won't affect login/register popups
   ========================================================================== */

/* 1. White background for entire .inner (contains widget-title and form) */
.guest-apply-popup-isolated .inner {
  background: #ffffff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 40px 20px;
}

/* 2. Widget-title styling */
.guest-apply-popup-isolated .inner .widget-title {
  background: #ffffff;
  margin-bottom: 20px;
}

/* 3. Remove duplicate background/padding from register-form-wrapper */
.guest-apply-popup-isolated .inner .register-form-wrapper {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* 4. Center the popup */
.guest-apply-popup-isolated {
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* 4b. CRITICAL: Lock scroll when job apply popup is open */
body.mfp-open:has(.guest-apply-popup-isolated) {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

body.mfp-open:has(.guest-apply-popup-isolated) .mfp-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

body.mfp-open:has(.guest-apply-popup-isolated) .mfp-container {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 5. Fix text wrapping */
.guest-apply-popup-isolated .inner,
.guest-apply-popup-isolated .inner .register-form-wrapper,
.guest-apply-popup-isolated .inner .register-form-wrapper .container-form,
.guest-apply-popup-isolated .inner .register-form-wrapper form.cmb-form,
.guest-apply-popup-isolated .inner .register-form-wrapper .cmb2-metabox,
.guest-apply-popup-isolated .inner .cmb-row,
.guest-apply-popup-isolated .inner .cmb-td,
.guest-apply-popup-isolated .inner .cmb-th,
.guest-apply-popup-isolated .inner p,
.guest-apply-popup-isolated .inner .description {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
}

.guest-apply-popup-isolated .inner .cmb-td {
  overflow: hidden;
}

/* 6. Desktop: single column layout instead of two columns */
@media (min-width: 992px) {
  .guest-apply-popup-isolated .inner .register-form-wrapper form.cmb-form .cmb-row {
    width: 100%;
  }
}

/* ==========================================================================
   GUEST APPLY POPUP - MOBILE COMPACT
   Kompaktowy popup na urządzeniach mobilnych (max 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Kontener popup --- */
  body.mfp-open:has(.guest-apply-popup-isolated) .mfp-container {
    padding: 10px;
  }

  /* --- Slider z logami - kompaktowy --- */
  .guest-apply-popup-isolated .header-trusted-slider {
    padding: 8px 10px;
    min-height: 50px;
  }

  .guest-apply-popup-isolated .header-trusted-slider .trusted-label {
    font-size: 9px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
  }

  /* --- Wnętrze popupu - zmniejszony padding --- */
  .guest-apply-popup-isolated .inner {
    padding: 16px 14px;
  }

  /* --- Nagłówek "Aplikuj na stanowisko" --- */
  .guest-apply-popup-isolated .inner .widget-title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .guest-apply-popup-isolated .inner .widget-title span {
    font-size: 16px;
  }

  /* --- Formularz - ciaśniejsze wiersze --- */
  .guest-apply-popup-isolated .inner .register-form-wrapper form.cmb-form {
    margin-top: 10px;
  }

  .guest-apply-popup-isolated .inner .cmb-row {
    margin-bottom: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* --- Etykiety pól --- */
  .guest-apply-popup-isolated .inner .cmb-th label,
  .guest-apply-popup-isolated .inner label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  /* --- Inputy formularza --- */
  .guest-apply-popup-isolated .inner input[type="text"],
  .guest-apply-popup-isolated .inner input[type="email"],
  .guest-apply-popup-isolated .inner input[type="password"],
  .guest-apply-popup-isolated .inner input[type="tel"],
  .guest-apply-popup-isolated .inner select.form-control,
  .guest-apply-popup-isolated .inner .form-control {
    height: 34px;
    font-size: 12px;
    padding: 0 10px;
  }

  /* --- Pole uploadu pliku - znacznie mniejsze --- */
  .guest-apply-popup-isolated .inner .cmb-type-file .cmb-td,
  .guest-apply-popup-isolated .inner .cmb-type-file_list .cmb-td,
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file .cmb-td,
  .guest-apply-popup-isolated .inner [class*="resume"] .cmb-td,
  .guest-apply-popup-isolated .inner [class*="cv"] .cmb-td {
    padding: 8px;
    border-width: 1.5px;
    margin-top: 3px;
  }

  /* --- Ukrycie ikony nad przyciskiem uploadu --- */
  .guest-apply-popup-isolated .inner .cmb-type-file .cmb-td i,
  .guest-apply-popup-isolated .inner .cmb-type-file_list .cmb-td i,
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file .cmb-td i,
  .guest-apply-popup-isolated .inner [class*="resume"] .cmb-td i,
  .guest-apply-popup-isolated .inner [class*="cv"] .cmb-td i,
  .guest-apply-popup-isolated .inner .cmb-type-file .cmb-td .dashicons,
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file .cmb-td .dashicons,
  .guest-apply-popup-isolated .inner .label-can-drag::before,
  .guest-apply-popup-isolated .inner .cmb2-id--candidate-cv-attachment .label-can-drag::before {
    display: none !important;
    content: none !important;
  }

  /* --- Przycisk "Wybierz plik" - kompaktowy --- */
  .guest-apply-popup-isolated .inner .cmb-type-file input[type="button"],
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file input[type="button"],
  .guest-apply-popup-isolated .inner [class*="resume"] input[type="button"] {
    padding: 4px 12px;
    font-size: 10px;
    border-radius: 14px;
    box-shadow: none;
  }

  /* --- Opis pod polem uploadu ("aby spełnić najwyższe wymagania" itp.) --- */
  .guest-apply-popup-isolated .inner .cmb-type-file .description,
  .guest-apply-popup-isolated .inner .cmb-type-file_list .description,
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file .description,
  .guest-apply-popup-isolated .inner p.cmb2-metabox-description,
  .guest-apply-popup-isolated .inner .cmb-type-file .cmb-td p,
  .guest-apply-popup-isolated .inner .cmb-type-wp-job-board-pro-file .cmb-td p {
    font-size: 9px;
    margin-top: 3px;
    line-height: 1.2;
    color: #94a3b8;
  }

  /* --- Zgody / checkboxy - kompaktowe --- */
  .guest-apply-popup-isolated .inner .cmb-type-checkbox {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 0;
  }

  .guest-apply-popup-isolated .inner .cmb-type-checkbox label,
  .guest-apply-popup-isolated .inner .cmb-type-checkbox .cmb-td,
  .guest-apply-popup-isolated .inner .cmb-type-checkbox .description {
    font-size: 10px;
    line-height: 1.3;
  }

  .guest-apply-popup-isolated .inner input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  /* --- Przycisk wysyłania --- */
  .guest-apply-popup-isolated .inner button[type="submit"],
  .guest-apply-popup-isolated .inner input[type="submit"] {
    height: 38px;
    font-size: 13px;
    margin-top: 8px;
  }

  /* --- Przycisk X zamykania --- */
  .guest-apply-popup-isolated .header-trusted-slider .custom-slider-close {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 20px;
    top: 6px;
    right: 6px;
  }
}

/* ==========================================================================
   REGISTRATION FORM - MOBILE COMPACT
   Kompaktowy formularz rejestracji na urządzeniach mobilnych (max 767px)
   Dotyczy zarówno widoku kandydata jak i pracodawcy
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Kontener MFP --- */
  body.mfp-open .mfp-container {
    padding: 10px;
  }

  /* --- Slider z logami - kompaktowy --- */
  .header-trusted-slider {
    padding: 8px 10px;
    min-height: 50px;
  }

  .header-trusted-slider .trusted-label {
    font-size: 9px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
  }

  /* --- Wrapper formularza - zmniejszony padding --- */
  body .apus-mfp-zoom-in .mfp-content .register-form-wrapper,
  body .register-form-wrapper,
  body #register-modal .modal-content {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* --- Zakładki kandydat/pracodawca - kompaktowe --- */
  body .register-form-wrapper .nav-tabs {
    margin-bottom: 12px;
    gap: 8px;
    padding: 3px;
  }

  body .register-form-wrapper .nav-tabs>li>a {
    font-size: 11px;
    padding: 7px 10px;
    gap: 5px;
  }

  .register-form-wrapper .nav-tabs>li>a i {
    font-size: 12px;
  }

  /* --- Nagłówek formularza --- */
  body .register-form-wrapper h3,
  body .register-form-wrapper .title {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 5px;
  }

  /* --- Formularz - ciaśniejsze wiersze --- */
  body .register-form-wrapper form.cmb-form {
    margin-top: 10px;
  }

  body .register-form-wrapper .form-group {
    margin-bottom: 6px;
  }

  /* --- Etykiety pól --- */
  body .register-form-wrapper label,
  body .register-form-wrapper label strong,
  body .register-form-wrapper label b,
  body .register-form-wrapper .form-group label,
  body form.cmb-form .cmb-th label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  body form.cmb-form div.cmb2-metabox .cmb-th,
  body .register-form-wrapper form.cmb-form div.cmb2-metabox .cmb-th {
    font-size: 11px;
    padding-bottom: 2px;
  }

  /* --- Inputy formularza --- */
  body .register-form-wrapper input[type="text"],
  body .register-form-wrapper input[type="email"],
  body .register-form-wrapper input[type="password"],
  body .register-form-wrapper input[type="tel"],
  body .register-form-wrapper select.form-control {
    height: 34px;
    font-size: 12px;
    padding: 0 10px;
  }

  /* --- Pole uploadu CV - kompaktowe --- */
  body .register-form-wrapper .cmb-type-file .cmb-td,
  body .register-form-wrapper .cmb-type-file_list .cmb-td,
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td,
  body .register-form-wrapper [class*="resume"] .cmb-td,
  body .register-form-wrapper [class*="cv"] .cmb-td {
    padding: 8px;
    border-width: 1.5px;
    margin-top: 3px;
  }

  /* --- Ukrycie ikony 📄 nad przyciskiem uploadu --- */
  body .register-form-wrapper .label-can-drag::before,
  body .register-form-wrapper .cmb2-id--candidate-cv-attachment .label-can-drag::before,
  body .register-form-wrapper .cmb-type-file .cmb-td i,
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td i,
  body .register-form-wrapper .cmb-type-file .cmb-td .dashicons,
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td .dashicons {
    display: none !important;
    content: none !important;
  }

  /* --- Przycisk "Wybierz plik" - kompaktowy --- */
  body .register-form-wrapper .cmb-type-file input[type="button"],
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file input[type="button"],
  body .register-form-wrapper [class*="resume"] input[type="button"] {
    padding: 4px 12px;
    font-size: 10px;
    border-radius: 14px;
    box-shadow: none;
  }

  /* --- Opis pod upload ("aby spełnić najwyższe wymagania" itp.) --- */
  body .register-form-wrapper .cmb-type-file .description,
  body .register-form-wrapper .cmb-type-file_list .description,
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file .description,
  body .register-form-wrapper p.cmb2-metabox-description,
  body .register-form-wrapper .cmb-type-file .cmb-td p,
  body .register-form-wrapper .cmb-type-wp-job-board-pro-file .cmb-td p,
  body .register-form-wrapper .label-can-drag .text-drag {
    font-size: 9px;
    margin-top: 3px;
    line-height: 1.2;
    color: #94a3b8;
  }

  /* --- Zgody / checkboxy - kompaktowe --- */
  body .register-form-wrapper form.cmb-form .cmb-type-checkbox {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 0;
  }

  body .register-form-wrapper .cmb-type-checkbox label,
  body .register-form-wrapper .cmb-type-checkbox .cmb-td,
  body .register-form-wrapper .cmb-type-checkbox .description {
    font-size: 10px;
    line-height: 1.3;
  }

  body .register-form-wrapper input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  /* --- Przycisk rejestracji - kompaktowy --- */
  body .register-form-wrapper button[type="submit"],
  body .register-form-wrapper input[type="submit"] {
    height: 38px;
    font-size: 13px;
    margin-top: 8px;
  }

  /* --- CMB row spacing --- */
  body .register-form-wrapper .cmb-row {
    margin-bottom: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    border: none;
  }

  /* --- Przycisk X zamykania --- */
  .header-trusted-slider .custom-slider-close {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 20px;
    top: 6px;
    right: 6px;
  }
}

/* ==========================================================================
   CALL POPUP STYLES
   Spójne z popupem CV - fioletowe barwy, slider na górze
   ========================================================================== */

/* Popup wrapper - center on desktop and mobile */
.call-popup-isolated {
  max-width: 450px !important;
  margin: 0 auto !important;
  width: 100%;
}

/* Force Magnific Popup to center vertically */
.apus-mfp-zoom-call-in .mfp-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.apus-mfp-zoom-call-in .mfp-content {
  position: relative !important;
  margin: auto !important;
  vertical-align: middle !important;
}

/* Inner card */
.call-popup-isolated .inner {
  background: #ffffff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: 40px 24px;
  text-align: center;
}

/* Title */
.call-popup-isolated .widget-title {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  font-family: 'Poppins', sans-serif;
}

.call-popup-isolated .widget-title span {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description - wrap long company names */
.call-popup-isolated .widget-content .des {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 24px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  padding: 0 10px;
}

/* Phone button/link - purple gradient */
.call-popup-isolated .phone a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

.call-popup-isolated .phone a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.45);
}

.call-popup-isolated .phone a i {
  font-size: 22px;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .call-popup-isolated {
    max-width: calc(100% - 32px) !important;
  }

  .call-popup-isolated .inner {
    padding: 32px 20px;
  }

  .call-popup-isolated .phone a {
    padding: 14px 24px;
    font-size: 16px;
    width: 100%;
  }
}
/* ==========================================================================
   LOGIN POPUP STYLES (ISOLATED)
   ========================================================================== */

/* Outer Wrapper (MFP) - Centered vertically and horizontally */
/* ONLY for login popup, NOT register (register has both classes) */
body .auth-popup-login:not(.auth-popup-register).apus-mfp-zoom-in {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

body .auth-popup-login:not(.auth-popup-register).apus-mfp-zoom-in .mfp-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body .auth-popup-login:not(.auth-popup-register).apus-mfp-zoom-in .mfp-content {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

body .auth-popup-login #apus_login_forgot_form,
body .auth-popup-login #apus_register_form {
    display: block !important;
    background: #9e9e9e00;
    border-radius: 6px;
    box-shadow: none;
    padding: 0;
    /* Phase 53: Removed padding */
    position: relative;
    max-width: 600px !important;
    margin: 0 auto;
}

/* Inner Card */
body .auth-popup-login .account-login-form,
body .auth-popup-login #apus_login_forgot_form form,
body .auth-popup-login .login-form-wrapper .form-container {
    background: #ffffff;
    border-radius: 0 0 6px 6px;
    /* Phase 52: Flat top */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    max-width: 600px !important;
    margin: 0 auto;
    /* Phase 52: Removed margin */
    margin-top: 0;
    /* Phase 52: Removed margin */
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Specific Fix for Login Wrapper inside popup */
body .auth-popup-login .login-form-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* Gradient Top Bar - Handled in auth.css now (hidden) */
body .auth-popup-login .account-login-form::before,
body .auth-popup-login #apus_login_forgot_form::before,
body .auth-popup-login .login-form-wrapper .form-container::before {
    display: none;
}

/* Titles */
body .auth-popup-login h3,
body .auth-popup-login .title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
    background: -webkit-linear-gradient(45deg, #333, #666);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hide outer titles if needed */
body .auth-popup-login #apus_login_forgot_form>h3 {
    display: none;
}

/* Inputs */
body .auth-popup-login input[type="text"],
body .auth-popup-login input[type="email"],
body .auth-popup-login input[type="password"] {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 6px;
    box-shadow: none;
    color: #475569;
    font-weight: 400;
    box-sizing: border-box;
    width: 100%;
}

body .auth-popup-login input:focus {
    background: #fff;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Labels */
body .auth-popup-login label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
    display: block;
}

/* Buttons */
body .auth-popup-login button[type="submit"],
body .auth-popup-login input[type="submit"] {
    width: calc(100% - 20px);
    height: 44px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    border: none;
    border-radius: 35px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    text-transform: none;
}

body .auth-popup-login button[type="submit"]:hover,
body .auth-popup-login input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* Close Button Override for Login */
body .auth-popup-login .mfp-close {
    opacity: 1;
    width: 24px;
    height: 24px;
    line-height: 24px;
    line-height: 24px;
    line-height: 24px;
    position: absolute;
    top: 6px;
    right: 14px;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
    color: #64748b;
    /* Phase 53: visible on white */
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 9999;
}

body .auth-popup-login .mfp-close:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
    transform: rotate(90deg);
}

/* Checkboxes */
body .auth-popup-login input[type="checkbox"] {
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Toggle Password */
body .auth-popup-login .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: #94a3b8;
    cursor: pointer;
    z-index: 10;
}

body .auth-popup-login .show_hide_password {
    position: relative;
    display: block;
}

/* Links (Forgot Password etc) */
body .auth-popup-login .back-link,
body .auth-popup-login .login-info a,
body .auth-popup-login .register-info a {
    color: #6366f1;
    font-weight: 500;
    font-size: 13px;
}

body .auth-popup-login .back-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   REGISTER POPUP FIX
   Ensure register popup displays full width without extra margins
   ========================================================================== */
body .auth-popup-register.apus-mfp-zoom-in .mfp-content {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

body .auth-popup-register.apus-mfp-zoom-in .mfp-container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 20px !important;
    padding-top: 40px !important;
}

body .auth-popup-register #apus_register_form,
body .auth-popup-register .register-form-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Desktop Overrides for Login */
@media (min-width: 992px) {
    /* Ensure Login popup doesn't get too wide if user wants it smaller? 
       Default auth.css sets 1100px for both.
       User complained about login popup issues.
       Let's keep it 600px max for login forms usually, as they are small.
       But auth.css scales it to 1100px.
       If the user wants separation, I should probably stick to what it WANTS to be.
       If I look at auth.css line 546: body #apus_login_forgot_form { max-width: 1100px !important; }
       I will replicate this for now, but I can easily change it here independently.
    */

    body .auth-popup-login:not(.auth-popup-register).apus-mfp-zoom-in .mfp-inline-holder .mfp-content,
    body .auth-popup-login:not(.auth-popup-register).apus-mfp-zoom-in .mfp-ajax-holder .mfp-content,
    body .auth-popup-login:not(.auth-popup-register) #apus_login_forgot_form {
        max-width: 1100px !important;
    }
}
/* Blog Archive Page */
.page-blog {
    margin-top: 100px;
}

@media (min-width: 1200px) {
    .page-blog.container {
        width: 1640px;
    }
}

.page-blog .layout-blog>.row {
    display: flex;
    flex-wrap: wrap;
}

/* 3 columns layout */
.page-blog .layout-blog>.row>[class*="col-"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .page-blog .layout-blog>.row>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .page-blog .layout-blog>.row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .page-blog {
        margin-top: 20px;
    }
}

/* More compact post cards */
.page-blog .post-grid {
    padding: 8px;
    margin-bottom: 0;
}

.page-blog .post-grid .inner-bottom {
    padding: 0 8px 5px;
}

.page-blog .post-grid .entry-title {
    font-size: 15px;
    line-height: 1.3;
    margin-top: 8px;
    margin-bottom: 5px;
}

.page-blog .post-grid .top-info {
    font-size: 12px;
    margin-bottom: 5px;
}

.page-blog .post-grid .top-image {
    border-radius: 6px;
}

/* Single Post */
.post .entry-content-detail {
    max-width: none;
}

.comments-area {
    padding: 0 15px;
}

.post .author-info {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .post .author-info {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .post .author-info {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .post .author-info {
        width: 1240px;
    }
}

@media (min-width: 1380px) {
    .post .author-info {
        width: 1320px;
    }
}

/* ===========================================
   SINGLE POST PAGE - Layout & Typography
   =========================================== */

/* Fix: Add margin-top to prevent header overlap */
.single-post .wrapper-single-post {
    margin-top: 30px;
}

@media (max-width: 575px) {
    .single-post .wrapper-single-post {
        margin-top: 15px;
    }
}

/* Fix: Ensure black text color for post content */
.single-post .entry-description,
.single-post .entry-description p,
.single-post .entry-description li,
.single-post .entry-content-detail p,
.single-post .top-content-detail-blog p,
.single-post .single-info p {
    color: #111 !important;
}

.single-post .entry-description h1,
.single-post .entry-description h2,
.single-post .entry-description h3,
.single-post .entry-description h4,
.single-post .entry-description h5,
.single-post .entry-description h6 {
    color: #000;
}

.single-post .entry-description h3 {
    font-size: 18px;
}

/* ===========================================
   TABLE OF CONTENTS - Easy TOC Plugin Overrides
   =========================================== */

.single-post #ez-toc-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.single-post #ez-toc-container .ez-toc-title {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 10px;
}

.single-post #ez-toc-container a {
    color: #111 !important;
    font-size: 14px;
    line-height: 1.4;
}

.single-post #ez-toc-container a:visited {
    color: #333 !important;
}

.single-post #ez-toc-container a:hover {
    color: var(--color-primary) !important;
}

.single-post #ez-toc-container li {
    line-height: 1.4;
    margin-bottom: 4px;
}

.single-post #ez-toc-container ul ul {
    margin-top: 4px;
    margin-left: 1.2em;
}

/* ===========================================
   HIDE STRAY ELEMENTS ON SINGLE POSTS
   =========================================== */

/* Hide any heart/follow buttons that appear outside job card contexts */
.single-post .wrapper-single-post>.btn-follow,
.single-post .content-area>.btn-follow,
.single-post .detail-post>.btn-follow,
.single-post .entry-content-detail>.btn-follow,
.single-post .entry-description>.btn-follow {
    display: none !important;
}

/* Ensure heart buttons INSIDE job cards remain visible */
.single-post .jobs-by-location .rj-mobile-favorite-wrapper .btn-follow {
    display: flex !important;
}

/* ===========================================
   BLOG META ICONS - Colorful SVG Icons
   =========================================== */

.single-post .blog-meta-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.single-post .blog-meta-icons li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-size: 14px;
}

.single-post .blog-meta-icons li a {
    color: #111;
    text-decoration: none;
}

.single-post .blog-meta-icons li a:hover {
    color: var(--color-primary);
}

/* SVG Icon Base Styles */
.single-post .blog-meta-icon {
    flex-shrink: 0;
    stroke-width: 2.5 !important;
    fill: none !important;
}

/* Colorful Icons - using color for currentColor inheritance */
.single-post .blog-meta-icon--user {
    color: #8B5CF6 !important;
    /* Purple - author */
    stroke: #8B5CF6 !important;
}

.single-post .blog-meta-icon--calendar {
    color: #F59E0B !important;
    /* Amber - date */
    stroke: #F59E0B !important;
}

.single-post .blog-meta-icon--folder {
    color: #10B981 !important;
    /* Emerald - category */
    stroke: #10B981 !important;
}

.single-post .blog-meta-icon--comments {
    color: #3B82F6 !important;
    /* Blue - comments */
    stroke: #3B82F6 !important;
}

.single-post .blog-meta-icon--timer {
    color: #EF4444 !important;
    /* Red - reading time */
    stroke: #EF4444 !important;
}

/* Remove old avatar from meta (now using icon) */
.single-post .blog-meta-icons .author img.avatar {
    display: none;
}

@media (max-width: 575px) {
    .single-post .blog-meta-icons {
        gap: 1px 16px;
    }

    .single-post .blog-meta-icons li {
        font-size: 13px;
    }
}

/* ===========================================
   ENTRY TITLE - Desktop Override
   =========================================== */

@media (min-width: 1200px) {
    .entry-title {
        font-size: 30px;
        margin-top: 50px;
    }
}

/* ===========================================
   CLOUDY BACKGROUNDS - Unified Section Styling
   (Based on homepage category slider style)
   =========================================== */

/* Related Posts Section - "Przeczytaj również" */
.related-posts {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin: 40px auto !important;
    padding: 30px 20px !important;
}

@media (min-width: 1200px) {
    .related-posts {
        padding: 50px 40px !important;
    }
}

/* "Szukasz pracy?" CTA Section */
.single-post .custom-section,
.custom-section {
    background: #f9fafb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Fix heart button position in job cards - only on single posts */
@media (min-width: 1200px) {
    .single-post .job-list.default .btn-follow {
        top: 2px;
        right: 1px;
    }
}

@media (max-width: 767px) {
    .single-post .job-list.default .btn-follow {
        position: absolute;
        top: 2px;
        right: 1px;
    }
}

/* ===========================================
   AUTHOR SECTION - Cloudy Style
   =========================================== */

.post .author-info {
    background: #f9fafb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 30px !important;
    margin: 40px auto !important;
    border: none !important;
    border-top: none !important;
}

/* Author name - same style as "Udostępnij" title */
.post .author-info .author-title,
.post .author-info .author-title a,
.post .author-info h4,
.post .author-info h4 a {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

/* Author description - same style as article content */
.post .author-info .description,
.post .author-info .media-body {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* ===========================================
   COMMENTS SECTION - Cloudy Style
   =========================================== */

.post .comments-area {
    background: #f9fafb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 30px !important;
    margin: 40px auto !important;
    border: none !important;
}

.post .comments-area #respond {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.post .comments-area h4,
.post .comments-area .title {
    color: #111 !important;
}

.post .comments-area label,
.post #respond label {
    color: #111 !important;
}

.post .comments-area .form-control {
    color: #111 !important;
}

.post .comments-area .form-control::placeholder {
    color: #999 !important;
}

@media (max-width: 575px) {

    .post .author-info,
    .post .comments-area {
        padding: 20px !important;
        margin: 30px 15px !important;
    }
}

/* ===========================================
   MODERN SHARE BUTTONS - SVG Icons with Brand Colors
   =========================================== */

.modern-share {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.modern-share .title {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.modern-share .share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Override parent theme .share-blog a styles */
.share-blog.modern-share a,
.modern-share .share-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #f3f4f6 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    font-size: 0 !important;
    margin-right: 0 !important;
}

.modern-share .share-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.2s ease;
}

.modern-share .share-icon svg path {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modern-share .share-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modern-share .share-icon:hover svg {
    transform: scale(1.1);
}

/* Facebook - Blue */
.share-blog.modern-share .share-icon--facebook,
.modern-share .share-icon--facebook {
    background: #f3f4f6 !important;
}

.modern-share .share-icon--facebook svg {
    fill: #1877F2 !important;
}

.share-blog.modern-share .share-icon--facebook:hover,
.modern-share .share-icon--facebook:hover {
    background: #1877F2 !important;
}

.modern-share .share-icon--facebook:hover svg {
    fill: #fff !important;
}

/* Twitter/X - Black */
.share-blog.modern-share .share-icon--twitter,
.modern-share .share-icon--twitter {
    background: #f3f4f6 !important;
}

.modern-share .share-icon--twitter svg {
    fill: #000 !important;
}

.share-blog.modern-share .share-icon--twitter:hover,
.modern-share .share-icon--twitter:hover {
    background: #000 !important;
}

.modern-share .share-icon--twitter:hover svg {
    fill: #fff !important;
}

/* LinkedIn - Blue */
.share-blog.modern-share .share-icon--linkedin,
.modern-share .share-icon--linkedin {
    background: #f3f4f6 !important;
}

.modern-share .share-icon--linkedin svg {
    fill: #0A66C2 !important;
}

.share-blog.modern-share .share-icon--linkedin:hover,
.modern-share .share-icon--linkedin:hover {
    background: #0A66C2 !important;
}

.modern-share .share-icon--linkedin:hover svg {
    fill: #fff !important;
}

/* Pinterest - Red */
.share-blog.modern-share .share-icon--pinterest,
.modern-share .share-icon--pinterest {
    background: #f3f4f6 !important;
}

.modern-share .share-icon--pinterest svg {
    fill: #E60023 !important;
}

.share-blog.modern-share .share-icon--pinterest:hover,
.modern-share .share-icon--pinterest:hover {
    background: #E60023 !important;
}

.modern-share .share-icon--pinterest:hover svg {
    fill: #fff !important;
}

/* Hide old share buttons text */
.modern-share .share-icon span {
    display: none;
}

/* Copy Link - Gray/Green */
.share-blog.modern-share .share-icon--copy,
.modern-share .share-icon--copy {
    background: #f3f4f6 !important;
    border: none !important;
    cursor: pointer !important;
}

.modern-share .share-icon--copy svg.icon-link {
    stroke: #6B7280 !important;
    fill: none !important;
    display: block !important;
}

.modern-share .share-icon--copy svg.icon-check {
    stroke: #6B7280 !important;
    fill: none !important;
    display: none !important;
}

.share-blog.modern-share .share-icon--copy:hover,
.modern-share .share-icon--copy:hover {
    background: #10B981 !important;
}

.modern-share .share-icon--copy:hover svg {
    stroke: #fff !important;
}

/* Copy success state */
.modern-share .share-icon--copy.copied {
    background: #10B981 !important;
}

.modern-share .share-icon--copy.copied svg.icon-link {
    display: none !important;
}

.modern-share .share-icon--copy.copied svg.icon-check {
    display: block !important;
    stroke: #fff !important;
}

@media (max-width: 575px) {
    .modern-share .share-icon {
        width: 40px;
        height: 40px;
    }

    .modern-share .share-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ===========================================
   READING PROGRESS BAR - Stick to header on mobile
   =========================================== */

.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

@media screen and (max-width: 767px) {
    .reading-progress-bar {
        top: 0px;
        height: 6px;
    }
}
.primary-button {
    font-weight: 700;
    fill: #000000;
    color: #000000;
    background-color: #51DACF;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #51DACF;
    border-radius: 30px;
    transition: all 0.3s ease-in-out 0s;
    padding: 9px 40px;
}
.primary-button:hover {
    color: #000000;
    background-color: #FFFFFF00;
    border-color: #51DACF;
}

.job-list.layout-job .btn-follow {
    line-height: 33px;
}
/* ============================================
   DASHBOARD STYLES - Cloud Style Design

   Refactored: 2026-01-21
   - Removed all !important declarations
   Refactored: 2026-01-21
   - Removed all !important declarations
   - Using body prefix for specificity instead
   - Using CSS variables from design system
   - FIXED: Chart size and Recent Applicants cloud style (2026-01-22)
   ============================================ */

/* ============================================
   DASHBOARD SECTION HEADER
   Identyczne style jak na stronie /profile/ (cmb-type-title)
   ============================================ */
body .dashboard-section-header {
    margin-bottom: 20px;
    padding: 0;
    margin-top: 10px;
    margin-left: 10px;
}

/* Main title - 18px, font-weight 600, dark color */
body .dashboard-section-header .dashboard-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
    padding: 0;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    border: none;
}

/* Subtitle - 12px, font-weight 400, dark color */
body .dashboard-section-header .dashboard-section-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #202124;
    margin: 0;
    padding: 0;
    line-height: 1.75;
    border: none;
}

/* ============================================
   GLOBAL: Prevent horizontal scroll
   ============================================ */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}



/* FIX: Add margins to employer dashboard wrapper */
body .box-dashboard-wrapper.employer-dashboard-wrapper {
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
}

/* Mobile: Equal margins on all sides */
@media (max-width: 768px) {
    body .box-dashboard-wrapper.employer-dashboard-wrapper {
        margin: 5px !important;
        padding: 5px !important;
        width: calc(100% - 10px) !important;
        box-sizing: border-box !important;
    }
}


/* Dashboard notifications */
body .topmenu-menu .notifications-count,
body .menu_short_profile .notifications-count {
    background-color: var(--color-error, #e44343);
    color: var(--color-white, #FFF);
    border-radius: 50%;
    padding: 0 6px;
    font-size: 12px;
}

/* Messages notifications */
body .message-item .message-title,
body .header-message-item .message-title {
    padding-right: 20px;
    position: relative;
}

body .message-item .unread-count,
body .header-message-item .unread-count {
    background-color: var(--color-error, #e44343);
    color: var(--color-white, #FFF);
    border-radius: 50%;
    padding: 0 7px;
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
}

/* Messages bell */
body .messages-bell {
    position: relative;
    display: inline-block;
}

body .messages-bell i {
    font-size: 20px;
    transition: all 0.3s ease-in-out 0s;
}

body .messages-bell .unread-count {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    padding: 4px 3px;
    line-height: 1;
    border-radius: 50%;
    color: var(--color-white, #fff);
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: -10px;
}

.rtl body .messages-bell .unread-count {
    left: -10px;
    right: auto;
}

body .messages-top {
    position: relative;
}

body .messages-top .messages-wrapper {
    min-width: 330px;
    position: absolute;
    top: 100%;
    background-color: var(--color-bg-primary, #fff);
    padding: 15px 20px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border-light, #ECEDF2);
    box-shadow: 0 6px 15px 0 rgba(64, 79, 104, 0.05);
    transition: all 0.3s ease-in-out 0s;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
}

body .messages-top .messages-wrapper.left {
    left: 0;
}

body .messages-top .messages-wrapper.right {
    right: 0;
}

body .messages-top .messages-wrapper.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

body .messages-top .messages-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body .messages-top .messages-wrapper ul li {
    position: relative;
    margin-bottom: 5px;
    padding-right: 30px;
}

.rtl body .messages-top .messages-wrapper ul li {
    padding-left: 30px;
    padding-right: inherit;
}

body .messages-top .messages-wrapper ul li:last-child {
    margin-bottom: 0;
}

body .messages-top .messages-wrapper ul li:hover .remove-notify-btn {
    color: var(--color-white, #fff);
    background-color: var(--color-error, #e44343);
}

body .messages-top .messages-wrapper .remove-notify-btn {
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--color-error, #e44343);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: var(--color-bg-primary, #fff);
    transition: all 0.3s ease-in-out 0s;
    border-radius: 50%;
}

.rtl body .messages-top .messages-wrapper .remove-notify-btn {
    left: 0;
    right: auto;
}

body .messages-top .messages-wrapper .remove-notify-btn:hover,
body .messages-top .messages-wrapper .remove-notify-btn:focus {
    color: var(--color-white, #fff);
    background-color: var(--color-error, #e44343);
}

body .header-mobile .messages-top {
    margin-left: 20px;
}

.rtl body .header-mobile .messages-top {
    margin-left: inherit;
    margin-right: 20px;
}

body .header-mobile .messages-bell {
    line-height: 1;
    vertical-align: middle;
}

body .header-mobile .messages-bell i {
    font-size: 21px;
}

body .header-mobile .messages-top .messages-wrapper {
    right: 0;
    min-width: 280px;
}

.rtl body .header-mobile .messages-top .messages-wrapper {
    right: inherit;
    left: 0;
}

body .header-message-item {
    clear: both;
    overflow: hidden;
}

body .header-message-item div.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    float: left;
}

body .header-message-item .content {
    overflow: hidden;
    padding-left: 10px;
}

body .header-message-item .user-name {
    font-size: 16px;
    margin: 5px 0 0;
}

body .header-message-item .message-time {
    font-weight: var(--font-weight-normal, 400);
    font-size: 14px;
    margin-left: 5px;
    float: right;
    white-space: nowrap;
    color: var(--color-gray-500, #696969);
}

body .header-message-item .message-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-gray-500, #696969);
}

/* ============================================
   NOTIFICATION ALIGNMENT FIX
   Aligns initials, name, and time in one line
   ============================================ */
body .candidate-name-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 32px;
}

body .candidate-name-time .candidate-initials-inline,
body .candidate-name-time .candidate-photo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
    flex-shrink: 0;
}

body .candidate-name-time .candidate-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

body .candidate-name-time .candidate-title {
    margin: 0;
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 32px;
}

body .candidate-name-time .candidate-title a {
    line-height: 32px;
}

body .candidate-name-time .applied-time {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
    line-height: 32px;
}

/* Force elements to be inline-block like if flex fails or specific overrides needed */
body .candidate-title a {
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.2s;
}

body .candidate-title a:hover {
    color: var(--color-primary, #2DD4BF);
}

body .unread-count.bg-warning {
    color: var(--color-white, #fff);
    background: var(--color-error, #e44343);
}

body .unread-messages-line {
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid var(--color-error, #e44343);
    font-size: 14px;
    color: var(--color-error, #e44343);
    text-align: center;
}

/* Terms and conditions */
body .form-group.terms-checkboxes,
body .woocommerce-terms-and-conditions-wrapper.terms-checkboxes {
    font-size: 12px;
}

body .job-submission-form-wrapper .mce-toolbar-grp {
    background-color: var(--white-color);
}

/* Cloud Card Base */
body .dashboard-cloud-card {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* ===========================================
   FIX 1: Remove white/green background BEHIND sidebar clouds (the container)
   Logo cloud keeps its white background
   =========================================== */
body .widget_superio_user_short_profile,
body aside.sidebar.sidebar-left,
body .sidebar.sidebar-left,
body .ps-container.ps-theme-default {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    outline: none;
}

/* CHMURKA 1: Logo - keeps white cloud styling */
body .sidebar-profile-cloud {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* CHMURKA 2: Menu - also keeps cloud styling */
body .sidebar-menu-cloud {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* FIX 9: Sticky ONLY for menu, not logo */
body .sidebar-menu-cloud {
    position: sticky;
    top: 20px;
    z-index: 100;
}

/* ============================================
   SIDEBAR - 2 CHMURKI (Cloud Cards)
   ============================================ */

/* CHMURKA 1: Profil firmy/kandydata */
body .sidebar-profile-cloud {
    text-align: center;
    padding: 28px 24px;
    margin-bottom: 16px;
}

body .sidebar-profile-cloud .user-logo {
    display: inline-block;
    margin-bottom: 14px;
}

body .sidebar-profile-cloud .user-logo img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(45, 212, 191, 0.25);
    border: 3px solid var(--color-bg-primary, #fff);
}

body .sidebar-profile-cloud .company-name {
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 4px 0;
}

body .sidebar-profile-cloud .company-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

body .sidebar-profile-cloud .company-name a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* Dla kompatybilności wstecznej */
body .sidebar-profile-cloud .title a {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    font-size: 16px;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

body .sidebar-profile-cloud .title a:hover {
    color: var(--color-primary, #2DD4BF);
}

body .sidebar-profile-cloud .location {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 14px;
    display: block;
}

body .sidebar-profile-cloud .view-profile {
    margin-top: 4px;
}

body .sidebar-profile-cloud .view-profile .btn,
body .sidebar-profile-cloud .view-profile .btn-gradient-teal {
    background: linear-gradient(135deg, #5EEAD4 0%, var(--color-primary, #2DD4BF) 100%);
    border: none;
    border-radius: 50px;
    padding: 9px 24px;
    font-size: 12px;
    text-transform: none;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
}

body .sidebar-profile-cloud .view-profile .btn:hover,
body .sidebar-profile-cloud .view-profile .btn-gradient-teal:hover {
    box-shadow: 0 6px 18px rgba(45, 212, 191, 0.4);
    transform: translateY(-2px);
    color: var(--color-white, #fff);
}

/* CHMURKA 2: Menu nawigacyjne */
body .sidebar-menu-cloud {
    padding: 8px 0;
}

body .sidebar-menu-cloud .navbar-collapse {
    padding: 0;
}

body .sidebar-menu-cloud .menu_short_profile {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

body .sidebar-menu-cloud .menu_short_profile li {
    list-style: none;
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
    margin: 0;
}

body .sidebar-menu-cloud .menu_short_profile li:last-child {
    border-bottom: none;
}

body .sidebar-menu-cloud .menu_short_profile li a {
    display: flex;
    align-items: center;
    padding: 13px 22px;
    color: var(--color-gray-500, #6b7280);
    font-size: 13px;
    font-weight: var(--font-weight-normal, 400);
    text-decoration: none;
    transition: all 0.2s ease;
}

body .sidebar-menu-cloud .menu_short_profile li a i {
    width: 22px;
    margin-right: 12px;
    font-size: 16px;
    color: var(--color-gray-300, #d1d5db);
    transition: color 0.2s ease;
    text-align: center;
}

body .sidebar-menu-cloud .menu_short_profile li a:hover,
body .sidebar-menu-cloud .menu_short_profile li.current-menu-item a {
    color: var(--color-primary, #2DD4BF);
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.06) 0%, transparent 100%);
}

body .sidebar-menu-cloud .menu_short_profile li a:hover i,
body .sidebar-menu-cloud .menu_short_profile li.current-menu-item a i {
    color: var(--color-primary, #2DD4BF);
}

/* CHMURKA 3: Procent kompletności profilu (kandydaci) */
body .sidebar-progress-cloud {
    padding: 20px 24px;
}

body .sidebar-progress-cloud .skill-percents h4 {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 10px 0;
}

body .sidebar-progress-cloud .skill-percents h4 span {
    color: var(--color-primary, #2DD4BF);
    font-weight: var(--font-weight-semibold, 600);
}

body .sidebar-progress-cloud .skill-process {
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

body .sidebar-progress-cloud .skill-process span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5EEAD4 0%, var(--color-primary, #2DD4BF) 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

body .sidebar-progress-cloud .value-percents {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 10px;
    line-height: 1.5;
}

body .sidebar-progress-cloud .value-percents .text-theme {
    color: var(--color-primary, #2DD4BF);
}

body .sidebar-progress-cloud .value-percents .text-info {
    color: var(--color-primary, #2DD4BF);
}

/* Chart Container & Styling */
/* Chart Container & Styling */
body #dashboard_job_chart_wrapper {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 20px;
    position: relative;
    border: none;
}

/* ============================================
   KARTY STATYSTYK - GRADIENTOWE IKONY
   ============================================ */

body .stat-card-cloud {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
    padding: 20px 24px;
}

body .stat-card-cloud .inner-header {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: none;
}

body .stat-card-cloud .list-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
}

body .stat-card-cloud .icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Kolory tła ikon - przez klasy wewnętrzne */
body .stat-card-cloud .posted-jobs .icon-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
}

body .stat-card-cloud .views-count-wrapper .icon-wrapper {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.05) 100%);
}

body .stat-card-cloud .review-count-wrapper .icon-wrapper {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
}

body .stat-card-cloud .shortlist .icon-wrapper {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(236, 72, 153, 0.05) 100%);
}

/* Fallback przez nth-child */
body .stat-card-cloud:nth-child(1) .icon-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
}

body .stat-card-cloud:nth-child(2) .icon-wrapper {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.05) 100%);
}

body .stat-card-cloud:nth-child(3) .icon-wrapper {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
}

body .stat-card-cloud:nth-child(4) .icon-wrapper {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(236, 72, 153, 0.05) 100%);
}

body .stat-card-cloud:hover .icon-wrapper {
    transform: scale(1.05);
}

body .stat-card-cloud .gradient-icon i {
    font-size: 24px;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Gradienty ikon - przez klasy wewnętrzne */
body .stat-card-cloud .posted-jobs .gradient-icon i {
    background-image: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

body .stat-card-cloud .views-count-wrapper .gradient-icon i {
    background-image: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

body .stat-card-cloud .review-count-wrapper .gradient-icon i {
    background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

body .stat-card-cloud .shortlist .gradient-icon i {
    background-image: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}

/* Fallback przez nth-child */
body .stat-card-cloud:nth-child(1) .gradient-icon i {
    background-image: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

body .stat-card-cloud:nth-child(2) .gradient-icon i {
    background-image: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

body .stat-card-cloud:nth-child(3) .gradient-icon i {
    background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

body .stat-card-cloud:nth-child(4) .gradient-icon i {
    background-image: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}

body .stat-card-cloud .inner {
    flex-grow: 1;
    text-align: right;
}

body .stat-card-cloud .number-count {
    font-size: 24px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    line-height: 1.2;
    margin-bottom: 2px;
}

body .stat-card-cloud span {
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    font-weight: var(--font-weight-normal, 400);
}

/* ============================================
   WYKRES - AREA CHART CLOUD STYLE
   ============================================ */

/* Remove styling from inner-list wrapper around chart */
body .chart-cloud-container .inner-list,
body .inner-list:has(.chart-cloud-container) {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    outline: none;
    padding: 0;
}

/* The inner-list that contains chart should not have special styling */
html body .employer-dashboard-wrapper .col-sm-8>.inner-list {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}


/* ============================================
   CANDIDATE DASHBOARD - RECENT APPLICATIONS (Cloud Style)
   Synchronized with applicants-jobs.css visuals
   ============================================ */

/* Wrapper for the list */
body .candidate-dashboard-wrapper .applicants {
    margin-top: 16px;
}

/* Individual Job Card - Cloud Style */
body .candidate-dashboard-wrapper .map-item,
body .candidate-dashboard-wrapper .rj-listing-card {
    background: var(--color-bg-primary, #fff);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    /* Ensure rounded corners clip content */
}

/* Hover Effect */
body .candidate-dashboard-wrapper .map-item:hover,
body .candidate-dashboard-wrapper .rj-listing-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px);
}

/* Reset inner card styling if needed to prevent double box-shadows */
body .candidate-dashboard-wrapper .map-item .rj-listing-card {
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

/* Adjust internal spacing to match compact cloud look */
body .candidate-dashboard-wrapper .rj-listing-card .rj-mobile-card-top {
    padding-bottom: 0;
    /* Compact */
    margin-bottom: 0;
}

/* Title Styling */
body .candidate-dashboard-wrapper .rj-listing-card h2.rj-mobile-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: 2px;
}

body .candidate-dashboard-wrapper .rj-listing-card h2.rj-mobile-title a {
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: opacity 0.2s;
}

body .candidate-dashboard-wrapper .rj-listing-card h2.rj-mobile-title a:hover {
    opacity: 0.8;
}

/* Meta Data Styling */
body .candidate-dashboard-wrapper .rj-mobile-meta-row {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-muted, #9ca3af);
}

/* Badges / Status Labels - Try to match Cloud Look */
body .candidate-dashboard-wrapper .rj-badge {
    border-radius: 50px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
}

body .chart-cloud-container {
    padding: 24px 28px 28px;
    height: auto;
    min-height: auto;
    position: relative;
    overflow: visible;
}

body .chart-cloud-container .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

body .chart-cloud-container h3.title-small {
    font-size: 16px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 2px 0;
}

body .chart-cloud-container .chart-header span {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
}

body .chart-cloud-container .chart-header .days-label {
    color: var(--color-primary, #2DD4BF);
    font-weight: var(--font-weight-medium, 500);
}

/* Obszar wykresu - fixed height */
body .chart-cloud-container .page_views-wrapper {
    height: 336px;
    margin: 20px 0 0;
    position: relative;
    display: block;
}

/* Footer wykresu - below chart, not overlapping */
body .chart-cloud-container .chart-footer {
    clear: both;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

body .chart-cloud-container .chart-footer .label {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 4px;
}

body .chart-cloud-container .chart-footer .range-days {
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin: 0;
}

/* ============================================
   STATS CARDS - ENHANCED STYLING
   ============================================ */
body .stat-card-cloud {
    background: var(--color-bg-primary, #fff);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

body .stat-card-cloud:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Gradient numbers - modern vibrant colors */
body .stat-card-cloud .number-count {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 4px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card 1: Blue-Purple gradient (Ogłoszeń) */
body .stat-card-cloud:nth-child(1) .number-count,
body .stat-card-cloud .posted-jobs .number-count {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card 2: Teal-Green gradient (Aplikacji) */
body .stat-card-cloud:nth-child(2) .number-count,
body .stat-card-cloud .views-count-wrapper .number-count {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card 3: Orange-Red gradient (Odpowiedzi) */
body .stat-card-cloud:nth-child(3) .number-count,
body .stat-card-cloud .review-count-wrapper .number-count {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card 4: Pink-Purple gradient (Zakładek) */
body .stat-card-cloud:nth-child(4) .number-count,
body .stat-card-cloud .shortlist .number-count {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Remove default chart container margins provided by theme if any */
body .page_views-wrapper {
    margin: 0;
    padding: 10px 0;
}

/* ===========================================
   Chart Footer - proper dropdown styling
   =========================================== */
body .chart-cloud-container .chart-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

body .chart-cloud-container .chart-footer .active-job-info {
    flex: 1;
}

body .chart-cloud-container .chart-footer .date-range-info {
    flex-shrink: 0;
    min-width: 140px;
}

body .chart-cloud-container .chart-footer .label {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

body .chart-cloud-container .chart-footer .form-group {
    margin: 0;
}

/* FIX: Expand Active Job Dropdown to fill available space on Desktop */
/* FIX: Expand Active Job Dropdown to fill available space on Desktop */
@media (min-width: 992px) {

    /* Ensure container allows growth */
    body .chart-cloud-container .chart-footer .active-job-info {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 20px;
        /* Separation from date picker */
    }

    /* Force full width on wrapper and inputs */
    body .chart-cloud-container .chart-footer .active-job-info .form-group,
    body .chart-cloud-container .chart-footer .active-job-info select {
        width: 100%;
        max-width: none;
    }

    /* Target Select2 specifically if present */
    body .chart-cloud-container .chart-footer .active-job-info .select2-container {
        width: 100%;
        display: block;
    }

    body .chart-cloud-container .chart-footer .active-job-info .select2-container .select2-selection {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
}


/* ============================================
   CHART FOOTER DROPDOWNS - Clean Style (compact)
   Wzorowane na .alert-modal-form select
   ============================================ */
html body .chart-cloud-container .chart-footer select,
html body .chart-cloud-container .chart-footer .form-control {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23333%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    box-shadow: none;
    min-height: auto;
    height: auto;
    line-height: 1.3;
}

html body .chart-cloud-container .chart-footer select:hover {
    border-color: #bbb;
}

html body .chart-cloud-container .chart-footer select:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: none;
}

/* ===========================================
   FIX 6: Notifications as individual cloud cards
   Like the reference screenshot
   =========================================== */

/* FIX 4: Remove border/background from notifications CONTAINER to prevent double box */
/* FIX 4: Remove border/background from notifications CONTAINER to prevent double box */
/* Using high specificity to override theme defaults without !important */
html body .dashboard-notifications,
html body .inner-list.dashboard-notifications {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
}

body .dashboard-notifications .title-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
}

body .dashboard-notifications .title-small::after {
    display: none;
}

body .dashboard-notifications-wrapper {
    max-height: none;
    overflow: visible;
    border: none;
    background: transparent;
}

/* FIX 5: Gap between notifications = 3px (very compact) */
body .dashboard-notifications-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Increased gap for better separation */
    border: none;
    background: transparent;
}

/* Notification Item Card */
body .dashboard-notifications-wrapper ul li {
    background: var(--color-bg-primary, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 0;
    /* Handled by gap */
}

body .dashboard-notifications-wrapper ul li:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: rgba(45, 212, 191, 0.2);
}

/* HIDE the small icon in top-left corner of notifications */
body .dashboard-notifications-wrapper ul li .icons {
    display: none;
}

body .dashboard-notifications-wrapper ul li .text {
    flex: 1;
    overflow: hidden;
}

/* FIX 6: No capitals in notifications */
body .dashboard-notifications-wrapper ul li .text>div {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
    line-height: 1.5;
    margin-bottom: 4px;
    text-transform: none;
}

body .dashboard-notifications-wrapper ul li .text>div strong,
body .dashboard-notifications-wrapper ul li .text>div a {
    color: var(--color-text-primary, #1f2937);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    display: block;
    margin-top: 2px;
    text-transform: none;
}

/* FIX 8: Remove dots after time, clean time display */
body .dashboard-notifications-wrapper ul li .text .time {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    font-weight: var(--font-weight-normal, 400);
    margin-top: 8px;
}

/* Hide any dots or bullets */
body .dashboard-notifications-wrapper ul li .text .time::before,
body .dashboard-notifications-wrapper ul li .text .time::after {
    display: none;
    content: none;
}

/* Notification type label */
body .dashboard-notifications-wrapper ul li .text .notify-type {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 4px;
    text-transform: none;
}

/* Job title in notification */
body .dashboard-notifications-wrapper ul li .text .notify-job-title {
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 8px;
    line-height: 1.4;
    text-transform: none;
}

/* User info with initials - FIX: inline alignment */
body .dashboard-notifications-wrapper ul li .text .notify-user {
    display: inline-flex;
    gap: 8px;
    line-height: 24px;
    margin-right: 10px;
}

body .dashboard-notifications-wrapper ul li .text .user-initials {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: var(--color-white, #fff);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

body .dashboard-notifications-wrapper ul li .text .user-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    vertical-align: middle;
}

body .dashboard-notifications-wrapper ul li .text .user-avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

body .dashboard-notifications-wrapper ul li .text .user-name {
    display: inline;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    line-height: 24px;
    vertical-align: middle;
}

/* ===========================================
   FIX 7: Remove background color from stat icons completely
   =========================================== */
body .stat-card-cloud .icon-wrapper {
    background: transparent;
}

body .stat-card-cloud .gradient-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* ===========================================
   RECENT APPLICANTS - Cloud Card Style
   =========================================== */
/* Recent applicants section - Restore Cloud Style */
body .recent-applicants-section,
body .inner-list.recent-applicants-section {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

body .recent-applicants-section .applicants {
    padding: 0;
}

/* Recent applicants section title */
body .recent-applicants-section .title-small {
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 8px;
}

/* FIX 1: Logo in proper position (the number badge) */
body .recent-applicants-section .candidate-logo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid #f0f0f0;
    margin-right: 16px;
}

body .recent-applicants-section .candidate-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Applicant info layout */
body .recent-applicants-section .candidate-info-content {
    flex: 1;
}

/* Job type label - hidden because it's already in PHP template */
body .recent-applicants-section .job-metas::before {
    display: none;
}

/* Job title */
body .recent-applicants-section .job-title a {
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    text-transform: none;
}

/* FIX 2 & 3: Candidate name with initials - inline with time */
body .recent-applicants-section .candidate-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

body .recent-applicants-section .candidate-title a {
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Generate initials circle before candidate name */
body .recent-applicants-section .candidate-title a::before {
    content: attr(data-initials);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Date inline with name */
body .recent-applicants-section .date {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    margin-left: 8px;
}

body .recent-applicants-section .date i {
    display: none;
}

/* Hide elements we don't need */
body .recent-applicants-section .title-wrapper .label,
body .recent-applicants-section .candidate-location,
body .recent-applicants-section .candidate-salary {
    display: none;
}

/* Action buttons styling - centered vertically, fixed to right with 30px margin */
body .recent-applicants-section .ali-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
}

body .recent-applicants-section .applicant-action-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Make applicant card position relative for absolute positioning of buttons */
body .recent-applicants-section .applicants-job,
body .recent-applicants-section .candidate-list {
    position: relative;
    padding-right: 220px;
}

/* ============================================
   APPLICANT ACTION ICONS - Colored like my-jobs
   ============================================ */

/* Base icon style */
body .recent-applicants-section .applicant-action-button .btn-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border-default, #e5e7eb);
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
}

body .recent-applicants-section .applicant-action-button .btn-action-icon:hover {
    background: var(--color-primary, #2DD4BF);
    border-color: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

/* Comment/Note Button - Teal */
body .recent-applicants-section .applicant-action-button .btn-create-meeting-job-applied {
    color: var(--color-primary-dark, #14b8a6);
    border-color: #99f6e4;
    background: #f0fdfa;
}

body .recent-applicants-section .applicant-action-button .btn-create-meeting-job-applied:hover {
    background: var(--color-primary-dark, #14b8a6);
    border-color: var(--color-primary-dark, #14b8a6);
    color: var(--color-white, #fff);
}

/* Approve Button - Green */
body .recent-applicants-section .applicant-action-button .btn-approve-job-applied,
body .recent-applicants-section .applicant-action-button .approve {
    color: var(--color-success, #22c55e);
    border-color: #bbf7d0;
    background: #f0fdf4;
}

body .recent-applicants-section .applicant-action-button .btn-approve-job-applied:hover,
body .recent-applicants-section .applicant-action-button .approve:hover {
    background: var(--color-success, #22c55e);
    border-color: var(--color-success, #22c55e);
    color: var(--color-white, #fff);
}

/* Reject Button - Red */
body .recent-applicants-section .applicant-action-button .btn-reject-job-applied,
body .recent-applicants-section .applicant-action-button .rejec {
    color: var(--color-error, #ef4444);
    border-color: #fecaca;
    background: #fef2f2;
}

body .recent-applicants-section .applicant-action-button .btn-reject-job-applied:hover,
body .recent-applicants-section .applicant-action-button .rejec:hover {
    background: var(--color-error, #ef4444);
    border-color: var(--color-error, #ef4444);
    color: var(--color-white, #fff);
}

/* Download CV Button - Blue */
body .recent-applicants-section .applicant-action-button .download {
    color: var(--color-info, #3b82f6);
    border-color: #bfdbfe;
    background: #eff6ff;
}

body .recent-applicants-section .applicant-action-button .download:hover {
    background: var(--color-info, #3b82f6);
    border-color: var(--color-info, #3b82f6);
    color: var(--color-white, #fff);
}

/* Remove/Delete Button - Red (darker) */
body .recent-applicants-section .applicant-action-button .btn-remove-job-applied,
body .recent-applicants-section .applicant-action-button .remove {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}

body .recent-applicants-section .applicant-action-button .btn-remove-job-applied:hover,
body .recent-applicants-section .applicant-action-button .remove:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: var(--color-white, #fff);
}

/* Hide "Zobacz więcej" type buttons if any */
body .recent-applicants-section .view-more,
body .recent-applicants-section .see-all {
    display: none;
}

/* Initials badge for candidates without photo */
body .recent-applicants-section .candidate-initials .initials-badge {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Candidate name and time inline */
body .recent-applicants-section .candidate-name-time {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Inline initials circle next to name */
body .recent-applicants-section .candidate-initials-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body .recent-applicants-section .candidate-title {
    display: inline;
    margin: 0;
}

body .recent-applicants-section .candidate-title a {
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
}

/* Hide the ::before pseudo-element since we now have real initials */
body .recent-applicants-section .candidate-title a::before {
    display: none;
}

/* Applied time inline with name */
body .recent-applicants-section .applied-time {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}

/* Hide old date element */
body .recent-applicants-section .date {
    display: none;
}

/* Hide pending label since we don't need it */
body .recent-applicants-section .label.pending {
    display: none;
}

/* Icons badge next to job title (like notifications) */
body .recent-applicants-section .icons {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.12) 0%, rgba(45, 212, 191, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

body .recent-applicants-section .icons i {
    font-size: 20px;
    color: var(--color-primary, #2DD4BF);
}

/* Candidate photo (small circle next to name) */
body .recent-applicants-section .candidate-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body .recent-applicants-section .candidate-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initials inline - vertically centered with name (FIX 6) */
body .recent-applicants-section .candidate-initials-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Candidate name time wrapper - proper alignment */
body .recent-applicants-section .candidate-name-time {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body .recent-applicants-section .candidate-title {
    display: inline;
    margin: 0;
    line-height: 28px;
}

body .recent-applicants-section .candidate-title a {
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    line-height: 28px;
}

/* Notify type in applicants */
body .recent-applicants-section .notify-type {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 4px;
}

/* Job title styling */
body .recent-applicants-section .job-title {
    margin: 0 0 8px 0;
}

body .recent-applicants-section .job-title a {
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
}

/* See all applicants link */
body .recent-applicants-section .see-all-applicants {
    display: block;
    text-align: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, #5EEAD4 100%);
    color: var(--color-white, #fff);
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: 12px;
    text-decoration: none;
    margin-top: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25);
}

body .recent-applicants-section .see-all-applicants:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(45, 212, 191, 0.35);
}

/* Hide old candidate-logo in new structure */
body .recent-applicants-section .candidate-logo {
    display: none;
}

/* ===========================================
   RESPONSIVE - Mobile Dashboard
   =========================================== */

@media (max-width: 991px) {

    /* Chart footer - dropdowns side by side on tablet/mobile */
    html body .chart-cloud-container .chart-footer {
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 12px !important;
    }

    /* Active job dropdown - wider (70%) */
    html body .chart-cloud-container .chart-footer .active-job-info {
        flex: 1 1 70% !important;
        min-width: 0 !important;
        max-width: 70% !important;
        width: 70% !important;
    }

    /* Date range dropdown - narrower (30%) */
    html body .chart-cloud-container .chart-footer .date-range-info {
        flex: 0 0 30% !important;
        min-width: 80px !important;
        max-width: 30% !important;
        width: 30% !important;
    }

    /* Chart dropdowns - full width within their containers */
    html body .chart-footer select,
    html body .chart-footer .form-group select {
        width: 100% !important;
    }
}

@media (max-width: 767px) {

    /* Mobile: Reset employer dashboard wrapper margins */
    body .box-dashboard-wrapper.employer-dashboard-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }

    /* Mobile: Inner list sections - proper spacing and margins */
    html body .employer-dashboard-wrapper .inner-list,
    html body .box-dashboard-wrapper .inner-list {
        margin-top: 20px !important;
    }

    /* Mobile: Notifications - same margins as recent applicants */
    html body .employer-dashboard-wrapper .col-sm-4 .inner-list,
    html body .dashboard-notifications {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* Mobile: Chart - no extra margins (row has padding) */
    html body .chart-cloud-container,
    html body .dashboard-cloud-card,
    html body .dashboard-cloud-card.chart-cloud-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Mobile: Row - reset negative margins and add padding */
    html body .employer-dashboard-wrapper>.row,
    html body .box-dashboard-wrapper>.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Mobile: Row columns full width */
    html body .employer-dashboard-wrapper .row .col-sm-8,
    html body .employer-dashboard-wrapper .row .col-sm-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Mobile: Inner list in chart column - no extra margins */
    html body .employer-dashboard-wrapper .col-sm-8>.inner-list {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Mobile: Recent applicants section - ensure it's below notifications */
    html body .box-dashboard-wrapper .recent-applicants-section,
    html body .employer-dashboard-wrapper .recent-applicants-section,
    html body .recent-applicants-section.inner-list {
        margin-top: 320px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        clear: both !important;
    }

    /* Mobile: Applicant cards - vertical layout */
    html body .recent-applicants-section .applicants-job,
    html body .recent-applicants-section .candidate-list {
        padding-right: 16px;
        padding-left: 16px;
        padding-bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    html body .recent-applicants-section .candidate-info {
        width: 100%;
        margin-bottom: 12px;
    }

    /* Mobile: Action buttons below name - LEFT aligned */
    html body .recent-applicants-section .ali-right,
    html body .applicants-job .ali-right,
    html body .job-applicant-wrapper .ali-right {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--color-gray-100, #f3f4f6) !important;
    }

    html body .recent-applicants-section .applicant-action-button,
    html body .applicants-job .applicant-action-button,
    html body .job-applicant-wrapper .applicant-action-button {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    html body .recent-applicants-section .applicant-action-button .btn-action-icon,
    html body .applicants-job .applicant-action-button .btn-action-icon,
    html body .job-applicant-wrapper .applicant-action-button .btn-action-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-shrink: 0 !important;
    }

    /* Stat cards - 2 per row on mobile */
    body .statistics.row .col-xs-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    body .stat-card-cloud {
        padding: 16px;
        min-height: 90px;
    }

    body .stat-card-cloud .icon-wrapper {
        width: 44px;
        height: 44px;
        margin-right: 12px;
    }

    body .stat-card-cloud .gradient-icon {
        width: 44px;
        height: 44px;
    }

    body .stat-card-cloud .gradient-icon i {
        font-size: 18px;
    }

    body .stat-card-cloud .number-count {
        font-size: 20px;
    }

    body .stat-card-cloud span {
        font-size: 11px;
    }

    /* Chart container - smaller padding */
    body .chart-cloud-container {
        padding: 16px;
        min-height: auto;
    }

    body .chart-cloud-container .chart-header {
        flex-direction: column;
        gap: 12px;
    }

    body .chart-cloud-container h3.title-small {
        font-size: 14px;
    }

    /* Move days dropdown below title on mobile */
    body .chart-cloud-container .stats-graph-search-form>div[style*="absolute"] {
        position: static;
        margin-bottom: 16px;
    }

    body .chart-cloud-container .page_views-wrapper {
        height: 250px;
    }

    /* Notifications - more compact */
    body .dashboard-notifications-wrapper ul li {
        padding: 12px 14px;
        gap: 10px;
    }

    body .dashboard-notifications-wrapper ul li .text>div {
        font-size: 12px;
    }

    body .dashboard-notifications-wrapper ul li .text .notify-job-title {
        font-size: 13px;
    }

    /* Recent applicants - compact */
    body .recent-applicants-section .icons {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 12px;
    }

    body .recent-applicants-section .icons i {
        font-size: 16px;
    }

    /* Recent applicants section title - visible on mobile */
    body .recent-applicants-section .title-small {
        display: block;
        font-size: 16px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-text-primary, #1f2937);
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
    }
}

@media (max-width: 480px) {

    /* Even smaller screens - single column stats */
    body .statistics.row .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body .stat-card-cloud {
        margin-bottom: 12px;
    }
}

/* Box dashboard wrapper - remove inner-list padding */
body .box-dashboard-wrapper .inner-list {
    padding: 0;
}

/* ============================================
   CRITICAL FIX: Force styles for dashboard elements
   ============================================ */

/* FIX: Remove ALL backgrounds from inner-list in dashboard */
html body .employer-dashboard-wrapper .inner-list,
html body .box-dashboard-wrapper .inner-list {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

/* EXCEPTION: Candidate dashboard applied section - cloud card style */
html body .box-dashboard-wrapper .inner-list.candidate-dashboard-applied {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 24px !important;
}

/* FIX: Notifications container - MUST be transparent */
html body .dashboard-notifications.inner-list,
html body .inner-list.dashboard-notifications {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* FIX: Each notification item - cloud card style */
html body .dashboard-notifications-wrapper ul li {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 20px 24px;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

html body .dashboard-notifications-wrapper ul li:last-child {
    margin-bottom: 0;
}

/* FIX: Recent applicants - proper button containment */
html body .recent-applicants-section .applicants-job {
    position: relative;
    padding: 20px 24px;
    padding-right: 240px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: visible;
}

html body .recent-applicants-section .applicants-job:last-of-type {
    margin-bottom: 0;
}

/* FIX: Action buttons positioning */
html body .recent-applicants-section .ali-right {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

html body .recent-applicants-section .applicant-action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* FIX: Chart container - cloud card style with proper flex layout */
html body .chart-cloud-container {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 24px 28px 28px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    min-height: auto;
    height: auto;
    position: relative;
    overflow: visible;
    display: block;
}

/* FIX: Chart form - NOT flex, just normal block flow */
html body .chart-cloud-container .stats-graph-search-form {
    display: block;
    position: relative;
    width: 100%;
}

/* FIX: Chart wrapper - fixed height, normal flow */
html body .chart-cloud-container .page_views-wrapper {
    height: 336px;
    min-height: 336px;
    max-height: 336px;
    margin: 20px 0 0;
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    padding-bottom: 30px;
}

/* FIX: Canvas must stay within wrapper */
html body .chart-cloud-container .page_views-wrapper canvas {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
}

/* FIX: Chart footer - CLEAR float ensures it's BELOW the chart */
html body .chart-cloud-container .chart-footer {
    clear: both;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    position: static;
    z-index: auto;
    background: transparent;
}

html body .chart-cloud-container .chart-footer .active-job-info {
    flex: 1;
    min-width: 200px;
    max-width: 60%;
}

html body .chart-cloud-container .chart-footer .date-range-info {
    flex-shrink: 0;
    min-width: 150px;
    max-width: 35%;
}

/* MOBILE: Chart footer dropdowns side by side */
@media (max-width: 767px) {
    html body .chart-cloud-container .chart-footer {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    html body .chart-cloud-container .chart-footer .active-job-info {
        flex: 1 1 65% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .chart-cloud-container .chart-footer .date-range-info {
        flex: 0 0 35% !important;
        min-width: 70px !important;
        max-width: 35% !important;
    }
}

/* Ensure dropdowns in footer are visible */
html body .chart-cloud-container .chart-footer .form-group {
    margin: 0;
    padding: 0;
    position: static;
}

html body .chart-cloud-container .chart-footer .label {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* FIX: Hide icons from notifications */
html body .dashboard-notifications-wrapper ul li>.icons {
    display: none;
}

/* FIX: Stat cards - enhanced shadows */
html body .stat-card-cloud {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

html body .stat-card-cloud:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* FIX: Recent applicants section - enhanced cloud style */
html body .recent-applicants-section {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* ============================================
   USER JOB PACKAGES - Ultra Compact Cloud Style
   ============================================ */

/* Aligned Header: "Twoje pakiety" */
body .widget-your-packages h2.widget-title {
    margin-top: 30px !important;
    margin-left: 20px !important;
    margin-bottom: 15px !important;
    /* Adding some bottom spacing */
}

/* Hide duplicate header in widget-your-packages (already shown in job-submit-form) */
body .widget-your-packages .dashboard-section-header {
    display: none;
}

/* Add margin-top to packages section on submit-job page */
body .widget-your-packages {
    margin-top: 10px;
}

@media (max-width: 768px) {
    body .widget-your-packages h2.widget-title {
        margin-top: 20px !important;
        margin-left: 10px !important;
    }
}

/* Dashboard Section Header in packages widget */
body .widget-your-packages .dashboard-section-header {
    margin-top: 30px;
    margin-left: 20px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    body .widget-your-packages .dashboard-section-header {
        margin-top: 20px;
        margin-left: 10px;
    }
}

/* Package list container */
body .user-job-packaged {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}



/* Radio button - hidden but functional */
body .custom-user-job-package .package-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* === MODIFIED: Desktop/Base Styles for Used Quota === */

/* Wrapper: 4 columns, 20px margins, cloud style */
body .custom-user-job-package .used-quota-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    background: transparent !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;
}

/* Card Style: rounded, white, strong shadow */
body .custom-user-job-package .used-quota {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    /* Strong shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover Effect: Move up + stronger shadow */
body .custom-user-job-package .used-quota:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Remove Radio Dots */
body .custom-user-job-package>label.package-title::before {
    display: none !important;
}

body .custom-user-job-package>label.package-title {
    padding-left: 0 !important;
}

/* === END MODIFIED STYLES === */

/* Package title/label */
body .custom-user-job-package>label.package-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 8px;
    padding-left: 0;
    position: relative;
    margin-left: 20px;
    /* Align with used-quota-wrapper */
    margin-right: 20px;
}

/* Custom radio circle */
body .custom-user-job-package>label.package-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

/* Radio checked state */
body .custom-user-job-package .package-radio:checked+label.package-title::before {
    border-color: #2DD4BF;
    background: #2DD4BF;
    box-shadow: inset 0 0 0 3px #fff;
}

/* Hide the br after label */
body .custom-user-job-package>br {
    display: none;
}

/* Quota wrapper - 4 columns */
body .custom-user-job-package .used-quota-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    /* fallback */
}

@media (max-width: 992px) {
    body .custom-user-job-package .used-quota-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* === MOBILE USED-QUOTA WRAPPER - Cloud Design === */

    /* Main wrapper - Mobile Overrides */
    body .custom-user-job-package .used-quota-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 columns for mobile */
        grid-auto-rows: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        margin-left: 10px !important;
        /* 10px margin for mobile */
        margin-right: 10px !important;
        width: auto !important;
    }

    /* Individual quota card - Mobile Adjustments */
    body .custom-user-job-package .used-quota {
        /* Inherits most styles (white, shadow, radius) from desktop rule above */
        /* Just adjust padding if needed */
        padding: 10px !important;
        border-radius: 12px !important;
        /* Slightly smaller radius for mobile */
        /* Ensure shadow is consistent or slightly adjusted if requested, keeping strong shadow */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
        /* Slightly smaller shadow for mobile to fit scale */
    }

    /* Hover effect is fine to inherit or keep enabled on mobile (tap) */

    /* Radio button removal is inherited from desktop rules */

    body .custom-user-job-package .used-quota.active {
        background: #ffffff !important;
        border-color: rgba(45, 212, 191, 0.15) !important;
        box-shadow: 0 2px 12px rgba(45, 212, 191, 0.08) !important;
    }

    /* Package Title - Mobile Margins */
    body .custom-user-job-package>label.package-title {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    /* Title - compact */
    body .custom-user-job-package .used-quota-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        margin-bottom: 4px !important;
        text-transform: none !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }

    /* Content area - flex-grow to fill available space */
    body .custom-user-job-package .used-quota-content {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 8px !important;
        background: linear-gradient(135deg, #f8fffe 0%, #f0fdfa 100%) !important;
        /* Very subtle gradient */
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        gap: 4px !important;
    }

    /* Count numbers - compact */
    body .custom-user-job-package .used-quota-content .package-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        line-height: 1.1 !important;
    }

    /* Progress bar - thinner */
    body .custom-user-job-package .progress-bar {
        height: 5px !important;
        border-radius: 6px !important;
        background: #e0f2f1 !important;
        border: none !important;
        margin: 4px 0 2px !important;
    }

    body .custom-user-job-package .progress-bar .bar-completed {
        height: 5px !important;
        background: linear-gradient(90deg, #5EEAD4 0%, #2DD4BF 100%) !important;
        border-radius: 6px !important;
    }

    /* Description - smaller */
    body .custom-user-job-package .used-quota-description {
        font-size: 8px !important;
        color: #9ca3af !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
    }

    /* Button wrapper - auto margin pushes to bottom */
    body .custom-user-job-package .buttons-wrapper {
        margin-top: auto !important;
        padding-top: 6px !important;
    }

    body .custom-user-job-package .buttons-wrapper .btn {
        width: 100% !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%) !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(45, 212, 191, 0.25) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Individual quota item - ultra compact */
body .custom-user-job-package .used-quota {
    background: #f9fafb;
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid #f3f4f6;
}

body .custom-user-job-package .used-quota.active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.08) 0%, rgba(94, 234, 212, 0.04) 100%);
    border-color: rgba(45, 212, 191, 0.2);
}

/* Quota title */
body .custom-user-job-package .used-quota-title {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

/* Quota content */
body .custom-user-job-package .used-quota-content {
    width: 100%;
    height: 94px;
    padding: 22px 15px 10px;
    background: #effbfa;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Quota count (X/Y) */
body .custom-user-job-package .used-quota-content .package-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
}

/* Progress bar container */
body .custom-user-job-package .progress-bar {
    height: 7px;
    border-radius: 10px;
    overflow: hidden;
    background: #e0f2f1;
    border: none;
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.15);
}

/* Progress bar fill */
body .custom-user-job-package .progress-bar .bar-completed {
    height: 7px;
    min-height: 7px;
    background: linear-gradient(90deg, #5EEAD4 0%, #2DD4BF 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
    border: none;
    box-shadow: none;
}

/* Quota description */
body .custom-user-job-package .used-quota-description {
    font-size: 9px;
    color: #9ca3af;
    margin-top: 2px;
    line-height: 1.2;
}

/* Button wrapper */
body .custom-user-job-package .buttons-wrapper {
    margin-top: 6px;
}

body .custom-user-job-package .buttons-wrapper .btn {
    width: 100%;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(45, 212, 191, 0.2);
}

body .custom-user-job-package .buttons-wrapper .btn:hover {
    box-shadow: 0 3px 10px rgba(45, 212, 191, 0.3);
}

/* Widget title */
body .widget-your-packages .widget-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

/* Override margin for packages wrapper */
body .box-dashboard-wrapper:has(.widget-your-packages) {
    margin: 0;
}

/* ===========================================
   PAGE HEADERS - candidates-alerts, change-password, delete-account
   =========================================== */

/* Candidates Alerts page header */
body .candidate-alert-wrapper .widget-title,
body .candidate-alert-wrapper .dashboard-section-header,
body .candidate-alert-wrapper h3.user-name {
    margin-top: 10px;
    margin-left: 10px;
}

/* Change Password / Delete Account page headers */
body .change-password-wrapper .widget-title,
body .change-password-wrapper .dashboard-section-header,
body .change-password-wrapper h3,
body .delete-profile-wrapper .widget-title,
body .delete-profile-wrapper .dashboard-section-header,
body .delete-profile-wrapper h3 {
    margin-top: 10px;
    margin-left: 10px;
}

/* General dashboard page header fallback */
body .box-dashboard-wrapper > h3:first-child,
body .box-dashboard-wrapper > .widget-title:first-child {
    margin-top: 10px;
    margin-left: 10px;
}

/* ============================================
   MY RESUME / CV MANAGEMENT PAGE
   ============================================ */

/* Container wrapper */
body .my-resume-page,
body .candidate-cv-page,
body .cmb2-id--candidate-cv-attachment {
    padding: 20px;
}

/* Upload Drop Zone - Hand/Łapka style */
body .cmb2-id--candidate-cv-attachment .label-can-drag,
body .my-resume-page .label-can-drag,
body .candidate-cv-upload .label-can-drag {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 30px !important;
    border: 2px dashed #d1d5db !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-height: 180px !important;
}

body .cmb2-id--candidate-cv-attachment .label-can-drag:hover,
body .my-resume-page .label-can-drag:hover,
body .candidate-cv-upload .label-can-drag:hover {
    border-color: #2DD4BF !important;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(45, 212, 191, 0.15) !important;
}

/* Upload icon - hand style */
body .cmb2-id--candidate-cv-attachment .label-can-drag::before,
body .my-resume-page .label-can-drag::before {
    content: '📄' !important;
    font-size: 48px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

/* Upload button inside drop zone */
body .cmb2-id--candidate-cv-attachment .upload-file-btn,
body .my-resume-page .upload-file-btn,
body .candidate-cv-upload .upload-file-btn {
    background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3) !important;
}

body .cmb2-id--candidate-cv-attachment .upload-file-btn:hover,
body .my-resume-page .upload-file-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4) !important;
}

/* Upload hint text */
body .cmb2-id--candidate-cv-attachment .label-can-drag .text-drag,
body .my-resume-page .label-can-drag .text-drag {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-top: 12px !important;
}

/* ============================================
   CV FILES LIST - Card Style
   ============================================ */

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-files,
body .my-resume-page .wp-job-board-pro-uploaded-files,
body .candidate-cv-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

/* Individual CV Item - Minimal Style (no card) */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file,
body .my-resume-page .wp-job-board-pro-uploaded-file,
body .candidate-cv-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: visible !important;
}

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file:hover,
body .my-resume-page .wp-job-board-pro-uploaded-file:hover,
body .candidate-cv-item:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* File Icon - Base */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-preview,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file .file-icon,
body .my-resume-page .file-icon,
body .my-resume-page .wp-job-board-pro-uploaded-file-preview,
body .candidate-cv-item .file-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
}

/* PDF Icon - Red */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="pdf"] .file-icon,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-preview[data-ext="pdf"],
body .candidate-cv-item.cv-pdf .file-icon,
body .wp-job-board-pro-uploaded-file-name a[href*=".pdf"]::before {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    color: #dc2626 !important;
}

/* DOCX Icon - Blue */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="docx"] .file-icon,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="doc"] .file-icon,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-preview[data-ext="docx"],
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-preview[data-ext="doc"],
body .candidate-cv-item.cv-docx .file-icon,
body .candidate-cv-item.cv-doc .file-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #2563eb !important;
}

/* Image Icons - Green */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="jpg"] .file-icon,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="jpeg"] .file-icon,
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file[data-ext="png"] .file-icon,
body .candidate-cv-item.cv-jpg .file-icon,
body .candidate-cv-item.cv-jpeg .file-icon,
body .candidate-cv-item.cv-png .file-icon {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    color: #16a34a !important;
}

/* File Name - FULL RESET (remove cloud/card styling) */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-name,
body .my-resume-page .wp-job-board-pro-uploaded-file-name,
body .candidate-cv-item .cv-filename {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-name a,
body .my-resume-page .wp-job-board-pro-uploaded-file-name a,
body .candidate-cv-item .cv-filename a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-name a:hover,
body .candidate-cv-item .cv-filename a:hover {
    color: #2DD4BF !important;
}

/* File extension badge */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-name .extension,
body .candidate-cv-item .cv-extension {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    margin-top: 4px !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* PDF extension */
body .wp-job-board-pro-uploaded-file-name .extension.ext-pdf,
body .candidate-cv-item.cv-pdf .cv-extension {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* DOCX extension */
body .wp-job-board-pro-uploaded-file-name .extension.ext-docx,
body .wp-job-board-pro-uploaded-file-name .extension.ext-doc,
body .candidate-cv-item.cv-docx .cv-extension,
body .candidate-cv-item.cv-doc .cv-extension {
    background: #dbeafe !important;
    color: #2563eb !important;
}

/* Image extensions */
body .wp-job-board-pro-uploaded-file-name .extension.ext-jpg,
body .wp-job-board-pro-uploaded-file-name .extension.ext-jpeg,
body .wp-job-board-pro-uploaded-file-name .extension.ext-png,
body .candidate-cv-item.cv-jpg .cv-extension,
body .candidate-cv-item.cv-png .cv-extension {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

/* Remove button - Black background, white X */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-remove-uploaded-file,
body .my-resume-page .wp-job-board-pro-remove-uploaded-file,
body .candidate-cv-item .cv-remove {
    position: absolute !important;
    top: 1px !important;
    left: 168px !important;
    right: auto !important;
    width: 24px !important;
    height: 22px !important;
    background: #000 !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    padding: 0 !important;
    line-height: 22px !important;
}

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-remove-uploaded-file::before,
body .my-resume-page .wp-job-board-pro-remove-uploaded-file::before,
body .candidate-cv-item .cv-remove::before {
    content: '✕' !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #fff !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 4px !important;
    left: 7px !important;
}

body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-remove-uploaded-file:hover,
body .my-resume-page .wp-job-board-pro-remove-uploaded-file:hover,
body .candidate-cv-item .cv-remove:hover {
    background: #333 !important;
    transform: scale(1.1) !important;
}

/* File type icons using CSS - fallback with unicode icons */
body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file-preview::before,
body .wp-job-board-pro-uploaded-file .file-type-icon::before {
    font-family: inherit !important;
    font-size: 28px !important;
}

/* PDF icon */
body .cmb2-id--candidate-cv-attachment a[href$=".pdf"] .wp-job-board-pro-uploaded-file-preview::before,
body .wp-job-board-pro-uploaded-file a[href$=".pdf"]::before {
    content: '📕' !important;
}

/* Word icon */
body .cmb2-id--candidate-cv-attachment a[href$=".docx"] .wp-job-board-pro-uploaded-file-preview::before,
body .cmb2-id--candidate-cv-attachment a[href$=".doc"] .wp-job-board-pro-uploaded-file-preview::before,
body .wp-job-board-pro-uploaded-file a[href$=".docx"]::before,
body .wp-job-board-pro-uploaded-file a[href$=".doc"]::before {
    content: '📘' !important;
}

/* Image icons */
body .cmb2-id--candidate-cv-attachment a[href$=".jpg"] .wp-job-board-pro-uploaded-file-preview::before,
body .cmb2-id--candidate-cv-attachment a[href$=".jpeg"] .wp-job-board-pro-uploaded-file-preview::before,
body .cmb2-id--candidate-cv-attachment a[href$=".png"] .wp-job-board-pro-uploaded-file-preview::before,
body .wp-job-board-pro-uploaded-file a[href$=".jpg"]::before,
body .wp-job-board-pro-uploaded-file a[href$=".png"]::before {
    content: '🖼️' !important;
}

/* ============================================
   MY RESUME - Responsive
   ============================================ */

@media (max-width: 768px) {
    body .cmb2-id--candidate-cv-attachment .label-can-drag,
    body .my-resume-page .label-can-drag {
        padding: 30px 20px !important;
        min-height: 150px !important;
    }

    body .cmb2-id--candidate-cv-attachment .label-can-drag::before {
        font-size: 36px !important;
    }

    body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-files,
    body .my-resume-page .wp-job-board-pro-uploaded-files {
        grid-template-columns: 1fr !important;
    }

    body .cmb2-id--candidate-cv-attachment .wp-job-board-pro-uploaded-file,
    body .my-resume-page .wp-job-board-pro-uploaded-file {
        padding: 12px 16px !important;
    }
}

/* ============================================
   ALERTS JOBS PAGE - Hide job_alert_metabox and save button
   ============================================ */
#cmb2-metabox-job_alert_metabox,
#jobs-alert-form button[type="submit"],
#jobs-alert-form input[type="submit"],
#jobs-alert-form .cmb-submit-wrap,
#jobs-alert-form .button-primary {
    display: none !important;
}

@media (min-width: 992px) {
    .inner-dashboard.container-fluid .main-page {
        padding-left: 0;
        padding-right: 0;
        margin-top: 70px;
    }
}

@media (min-width: 1350px) {
    body .box-dashboard-wrapper {
        padding: 0;
        margin: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
    }
}
/* ============================================
   MESSAGES PAGE - Modern Cloud Style

   Created: 2026-02-18
   Design System: Cloud Cards + Teal Theme
   ============================================ */

/* ===========================================
   MAIN CONTAINER & LAYOUT
   =========================================== */
body .message-section-wrapper {
    background: transparent;
    padding: var(--spacing-4, 16px);
}

body .message-inner.clearfix {
    display: flex;
    gap: var(--spacing-4, 16px);
    max-width: 1400px;
    margin: 0 auto;
}

/* Reset Bootstrap .row negative margins to prevent horizontal overflow */
body .message-inner.row {
    margin-left: 0;
    margin-right: 0;
}

body .message-inner [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

body .message-inner.clearfix::after {
    display: none;
    /* Remove clearfix pseudo-element */
}

/* ===========================================
   LEFT COLUMN - Conversations List
   =========================================== */
body .list-message-wrapper {
    flex: 0 0 380px;
    max-width: 380px;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 160px);
    border: 1px solid rgba(0, 0, 0, 0.02);
    float: none;
    width: auto;
}

/* ===========================================
   RIGHT COLUMN - Conversation View
   =========================================== */
body .replies-content {
    flex: 1;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.06));
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.02);
    min-height: 0;
}

/* ===========================================
   SEARCH FORM
   =========================================== */
body .search-message-form {
    padding: var(--spacing-4, 16px);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

body .search-message-form .search-wrapper-message {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-3, 12px);
}

body .search-message-form .form-group {
    flex: 1;
    margin: 0;
}

body .search-message-form .form-control {
    width: 100%;
    padding: 12px 16px;
    padding-right: 52px;
    border: 2px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-pill, 50px);
    font-size: 14px;
    background: var(--color-bg-secondary, #f9fafb);
    transition: var(--transition-default, 0.2s ease);
    box-shadow: none;
    height: auto;
}

body .search-message-form .form-control:focus {
    border-color: var(--color-primary, #2DD4BF);
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
    outline: none;
}

body .search-message-form .form-control::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

body .search-message-form .search-message-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    background: linear-gradient(135deg, #5EEAD4 0%, var(--color-primary, #2DD4BF) 100%);
    border-radius: 50%;
    color: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-default, 0.2s ease);
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3);
    padding: 0;
}

body .search-message-form .search-message-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
}

body .search-message-form .search-message-btn i {
    font-size: 15px;
    line-height: 1;
}

/* ===========================================
   FILTER OPTIONS - Pill Style Radio Buttons
   =========================================== */
body .filter-options {
    margin: 0;
}

body .filter-options .list-options-action {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

body .filter-options .list-options-action li {
    flex: 1;
    margin: 0;
}

/* Hide native radio */
body .filter-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body .filter-options label {
    display: block;
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: var(--radius-pill, 50px);
    cursor: pointer;
    transition: var(--transition-default, 0.2s ease);
    border: 2px solid transparent;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .filter-options label:hover {
    background: var(--color-primary-lightest, #f0fdfa);
    color: var(--color-primary-dark, #14b8a6);
}

body .filter-options input[type="radio"]:checked+label {
    background: linear-gradient(135deg, #5EEAD4 0%, var(--color-primary, #2DD4BF) 100%);
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
}

/* ===========================================
   CONVERSATIONS LIST
   =========================================== */
body .list-message-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300, #d1d5db) transparent;
}

body .list-message-inner::-webkit-scrollbar {
    width: 6px;
}

body .list-message-inner::-webkit-scrollbar-track {
    background: transparent;
}

body .list-message-inner::-webkit-scrollbar-thumb {
    background: var(--color-gray-300, #d1d5db);
    border-radius: 3px;
}

body .list-message {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===========================================
   MESSAGE ITEM - Conversation Card
   =========================================== */
body .list-message>li {
    margin: 0;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    transition: var(--transition-default, 0.2s ease);
    position: relative;
}

body .list-message>li:last-child {
    border-bottom: none;
}

body .list-message>li:hover {
    background: var(--color-gray-50, #f9fafb);
}

body .list-message>li.active {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.08) 0%, transparent 100%);
}

body .list-message>li.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary, #2DD4BF);
}

/* Unread state - more prominent */
body .list-message>li.unread {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.06) 0%, var(--color-bg-primary, #fff) 100%);
}

body .list-message>li.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--color-primary, #2DD4BF);
    border-radius: 0 2px 2px 0;
}

/* Message Item Link */
body .list-message a.message-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    text-decoration: none;
    gap: 14px;
    position: relative;
}

/* Avatar */
body .list-message .message-item .avatar,
body .list-message a.message-item .avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    float: none;
}

body .list-message .message-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
body .list-message .message-item .content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding-left: 0;
}

body .list-message .message-item .user-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
}

/* Unread name - bolder */
body .list-message>li.unread .user-name {
    font-weight: var(--font-weight-bold, 700);
}

body .list-message .message-item .message-time {
    font-size: 12px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
    float: none;
    margin-left: auto;
}

body .list-message .message-item .message-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Unread Count Badge */
body .list-message .message-item .unread-count {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    color: var(--color-white, #fff);
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    border-radius: 10px;
    flex-shrink: 0;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Load More Button */
body .list-message-inner .loadmore-action {
    padding: 16px;
    text-align: center;
}

body .loadmore-message-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-primary-dark, #14b8a6);
    background: var(--color-primary-lightest, #f0fdfa);
    border: none;
    border-radius: var(--radius-pill, 50px);
    cursor: pointer;
    transition: var(--transition-default, 0.2s ease);
    text-decoration: none;
}

body .loadmore-message-btn:hover {
    background: var(--color-primary-lighter, #99f6e4);
    transform: translateY(-1px);
}

/* ===========================================
   RECIPIENT INFO HEADER
   =========================================== */
body .recipient-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--color-bg-primary, #fff);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
}

body .recipient-info::after {
    display: none;
    /* Remove clearfix */
}

body .recipient-info .message-item {
    display: flex;
    align-items: center;
    gap: 14px;
    float: none;
}

body .recipient-info .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(45, 212, 191, 0.2);
    border: 2px solid var(--color-primary-lighter, #99f6e4);
    float: none;
}

body .recipient-info .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .recipient-info .content {
    padding-left: 0;
    overflow: visible;
}

body .recipient-info .user-name {
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 2px 0;
}

body .recipient-info .message-title {
    font-size: 13px;
    color: var(--color-text-muted, #9ca3af);
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow: visible;
}

/* Delete Conversation Button - hidden */
body .delete-message-btn {
    display: none !important;
}

body .delete-message-btn-hidden-override {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-error, #ef4444);
    background: var(--color-error-lighter, #fef2f2);
    border-radius: var(--radius-pill, 50px);
    text-decoration: none;
    transition: var(--transition-default, 0.2s ease);
    float: none;
    border: 1px solid var(--color-error-light, #fecaca);
}

body .delete-message-btn:hover {
    background: var(--color-error-light, #fecaca);
    color: var(--color-error-dark, #dc2626);
    transform: translateY(-1px);
}

body .delete-message-btn i {
    font-size: 14px;
}

/* ===========================================
   CHAT AREA - Messages Container
   =========================================== */
body .content-box-white {
    flex: 1 1 0;      /* flex-basis: 0 forces proper height distribution */
    height: 0;        /* combined with flex-grow: fills available space, never overflows */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
}

body .list-replies-inner {
    flex: 1 1 0;      /* flex-basis: 0 */
    height: 0;        /* key trick: height 0 + flex-grow = constrained height = scrollable */
    overflow-y: auto;
    overscroll-behavior: contain; /* prevents outer page from stealing scroll events */
    padding: 24px;
    background: var(--color-bg-secondary, #f9fafb);
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300, #d1d5db) transparent;
    scroll-behavior: smooth;
}

body .list-replies-inner::-webkit-scrollbar {
    width: 6px;
}

body .list-replies-inner::-webkit-scrollbar-track {
    background: transparent;
}

body .list-replies-inner::-webkit-scrollbar-thumb {
    background: var(--color-gray-300, #d1d5db);
    border-radius: 3px;
}

/* Messages List */
body .list-replies {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===========================================
   CHAT BUBBLE - Base Styles
   =========================================== */
body .list-replies>li {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 75%;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ===========================================
   OTHER USER'S MESSAGES - Left Side
   =========================================== */
body .list-replies>li.user-reply {
    align-self: flex-start;
    flex-direction: row;
}

body .list-replies>li.user-reply .avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    float: none;
}

body .list-replies>li.user-reply .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .list-replies>li.user-reply .reply-content {
    background: var(--color-gray-100, #f1f3f5);
    border-radius: 20px 20px 20px 4px;
    padding: 14px 18px;
    box-shadow: none;
    border: none;
}

/* ===========================================
   MY MESSAGES - Right Side
   =========================================== */
body .list-replies>li.yourself-reply {
    align-self: flex-end;
    flex-direction: row-reverse;
}

body .list-replies>li.yourself-reply .avatar {
    display: none;
}

body .list-replies>li.yourself-reply .reply-content {
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%) !important;
    border-radius: 20px 20px 4px 20px;
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25);
    border: none !important;
}

body .list-replies>li.yourself-reply .post-content {
    color: var(--color-text-primary, #1f2937);
}

/* ===========================================
   MESSAGE CONTENT
   =========================================== */
body .reply-content .post-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary, #1f2937);
    word-wrap: break-word;
}

/* bubble-wrapper: column flex so date appears below the bubble */
body .list-replies > li > .bubble-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

body .list-replies > li.user-reply > .bubble-wrapper {
    align-items: flex-start;
}

body .list-replies > li.yourself-reply > .bubble-wrapper {
    align-items: flex-end;
}

/* post-date sits below the bubble */
body .list-replies > li > .bubble-wrapper > .post-date {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 4px;
    line-height: 1;
}

/* ===========================================
   UNREAD MESSAGES DIVIDER
   =========================================== */
body .unread-messages-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-primary-dark, #14b8a6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    max-width: 100%;
}

body .unread-messages-line::before,
body .unread-messages-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #2DD4BF), transparent);
}

/* Container for unread divider */
body .list-replies>li:has(.unread-messages-line) {
    max-width: 100%;
    align-self: stretch;
}

/* Load More Replies */
body .list-replies-inner .loadmore-action {
    text-align: center;
    margin-bottom: 16px;
}

body .loadmore-replied-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-pill, 50px);
    cursor: pointer;
    transition: var(--transition-default, 0.2s ease);
    text-decoration: none;
}

body .loadmore-replied-btn:hover {
    border-color: var(--color-primary, #2DD4BF);
    color: var(--color-primary, #2DD4BF);
}

/* ===========================================
   REPLY FORM - Sticky Bottom
   =========================================== */
body .reply-message-form-wrapper {
    position: relative;
    padding: 16px 24px;
    background: var(--color-bg-primary, #fff);
    border-top: 1px solid var(--color-border-light, #f3f4f6);
    border-radius: 0 0 var(--radius-xl, 20px) var(--radius-xl, 20px);
}

body .reply-message-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .reply-message-form .form-group {
    flex: 1;
    margin: 0;
}

body .reply-message-form .form-group.space-30 {
    margin: 0;
}

body .reply-message-form textarea.form-control {
    min-height: 48px;
    max-height: 150px;
    padding: 12px 72px 12px 16px; /* right padding reserves space for absolute button */
    border: 2px solid var(--color-border-default, #e5e7eb);
    border-radius: 24px;
    font-size: 14px;
    resize: none;
    transition: var(--transition-default, 0.2s ease);
    background: var(--color-bg-secondary, #f9fafb);
    box-shadow: none;
    height: auto;
}

body .reply-message-form textarea.form-control:focus {
    border-color: var(--color-primary, #2DD4BF);
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
    outline: none;
}

body .reply-message-form textarea.form-control::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

/* Send Button - absolutely positioned inside .reply-message-form-wrapper */
body .reply-message-form-wrapper .reply-message-form .reply-message-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%) !important;
    color: var(--color-white, #fff) !important;
    cursor: pointer;
    transition: var(--transition-default, 0.2s ease);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
    font-size: 18px;
    line-height: 1;
}

body .reply-message-form .reply-message-btn i {
    font-size: 18px;
    color: var(--color-white, #fff);
    line-height: 1;
}

body .reply-message-form-wrapper .reply-message-form .reply-message-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(45, 212, 191, 0.4);
}

body .reply-message-form-wrapper .reply-message-form .reply-message-btn:active {
    transform: scale(0.95);
}

/* ===========================================
   TOGGLE MESSAGE BUTTON (Mobile)
   =========================================== */
body .toggle-message-btn {
    display: none;
}

/* ===========================================
   PAGE TITLE
   =========================================== */
body h3.user-name {
    font-size: 24px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: var(--spacing-4, 16px);
    margin-top: 10px;
    margin-left: 10px;
}

/* ===========================================
   NO MESSAGES STATE
   =========================================== */
body .not-found {
    text-align: center;
    padding: 60px 24px;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.06));
    color: var(--color-text-muted, #9ca3af);
    font-size: 16px;
}

@media (min-width: 992px) {
    body .not-found {
        margin-top: 140px;
    }
}

/* ===========================================
   RESPONSIVE - Tablet
   =========================================== */
@media (max-width: 991px) {
    body .message-inner.clearfix {
        flex-direction: column;
    }

    body .list-message-wrapper {
        flex: none;
        max-width: 100%;
        width: 100%;
        max-height: none;
    }

    body .replies-content {
        max-height: calc(100vh - 200px);
    }

    /* Toggle button visible */
    body .toggle-message-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #5EEAD4 0%, var(--color-primary, #2DD4BF) 100%);
        color: var(--color-white, #fff);
        font-size: 14px;
        font-weight: var(--font-weight-medium, 500);
        border: none;
        border-radius: var(--radius-lg, 16px);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
        text-decoration: none;
    }

    body .toggle-message-btn i {
        transition: transform 0.3s ease;
    }

    body .toggle-message-btn.active i {
        transform: rotate(180deg);
    }
}

/* ===========================================
   RESPONSIVE - Mobile
   =========================================== */
@media (max-width: 767px) {
    body .message-section-wrapper {
        padding: var(--spacing-2, 8px);
    }

    body .message-inner.clearfix {
        gap: var(--spacing-3, 12px);
    }

    body .list-message-wrapper,
    body .replies-content {
        border-radius: var(--radius-lg, 16px);
    }

    /* Search form compact */
    body .search-message-form {
        padding: 12px 16px;
    }

    body .search-message-form .form-control {
        padding: 10px 14px;
        padding-right: 48px;
        font-size: 14px;
    }

    body .search-message-form .search-message-btn {
        width: 36px;
        height: 36px;
    }

    /* Filter pills smaller */
    body .filter-options label {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Message items compact */
    body .list-message a.message-item {
        padding: 12px 16px;
        gap: 12px;
    }

    body .list-message .message-item .avatar,
    body .list-message a.message-item .avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body .list-message .message-item .user-name {
        font-size: 14px;
    }

    body .list-message .message-item .message-title {
        font-size: 12px;
    }

    /* Chat area */
    body .list-replies-inner {
        padding: 16px;
    }

    body .list-replies>li {
        max-width: 85%;
    }

    body .list-replies>li .reply-content,
    body .list-replies>li.user-reply .reply-content,
    body .list-replies>li.yourself-reply .reply-content {
        padding: 12px 14px;
    }

    body .reply-content .post-content {
        font-size: 13px;
    }

    /* Reply form */
    body .reply-message-form-wrapper {
        padding: 12px 16px;
    }

    body .reply-message-form textarea.form-control {
        padding: 10px 14px;
        font-size: 14px;
    }

    body .reply-message-form .reply-message-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* Recipient header compact */
    body .recipient-info {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    body .recipient-info .avatar {
        width: 38px;
        height: 38px;
    }

    body .recipient-info .user-name {
        font-size: 15px;
    }

    /* Delete button - icon only */
    body .delete-message-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    body .delete-message-btn .hidden-xs {
        display: none;
    }

    body .delete-message-btn i {
        display: block;
    }
}

/* ===========================================
   RESPONSIVE - Small Mobile
   =========================================== */
@media (max-width: 480px) {
    body .filter-options .list-options-action {
        gap: 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    body .filter-options .list-options-action::-webkit-scrollbar {
        display: none;
    }

    body .filter-options .list-options-action li {
        flex: 0 0 auto;
    }

    body .filter-options label {
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    body .list-replies>li {
        max-width: 90%;
    }

    body h3.user-name {
        font-size: 20px;
    }
}

/* ===========================================
   NEW MESSAGE ANIMATION
   =========================================== */
body .list-replies>li.new-message {
    animation: slideInBubble 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInBubble {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.employer-content-area .employer-details {
    margin-top: 20px;
    padding: 24px;
    background-color: var(--white-color);
    border-width: 0 !important;
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
}

.employer-content-area .employer-details .title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26.4px;
    letter-spacing: 0.0125em;
}

.employer-content-area .employer-details .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #C9C9D1;
}

.employer-content-area .employer-details .list .single-item {
    display: flex;
    column-gap: 12px;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.employer-content-area .employer-details .single-item .icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: 32px;
    background-color: var(--superio-theme-color-015);
    border-radius: 4px;
}

.employer-content-area .employer-details .single-item .icon i {
    color: var(--superio-theme-color);
    height: 16px;
    width: 16px;
    text-align: center;
}

.employer-content-area .employer-details .single-item .details .title {
    margin-bottom: 6px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
}

.employer-content-area .employer-details .single-item .details .value {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.12px;
    letter-spacing: 0.01em;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .employer-content-area .employer-details .list .single-item {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .employer-content-area .employer-details .list .single-item .details * {
        text-align: center;
    }
}
.employer-block {
    padding: 20px;
    background-color: #F5F7FC;
    border-radius: var(--border-radius-standard);
    -webkit-border-radius: var(--border-radius-standard);
}

body .employer .employer-detail-header {
    position: relative;
    padding: 0;
    background-image: none;
    background-repeat: no-repeat;
}

body .employer .employer-detail-header.cover-default .employer-detail-header-background {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

body .employer .employer-detail-header .employer-detail-header-background {
    min-height: 310px;
    background-position: center;
    background-size: 100% auto;
    height: 20vw;
    background-repeat: no-repeat;
}

body .employer .employer-detail-header .container {
    position: relative;
    height: 100%;
}

body .employer .employer-detail-header .employer-detail-header__content {
    position: relative;
    margin-top: -44px;
    padding: 24px;
    background-color: var(--white-color);
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
    z-index: 2;
}

body .employer .employer-detail-header .employer-detail-header__content>div {
    padding: 0;
}

body .employer .employer-detail-header .employer-detail-header__content .employer-logo .image-wrapper {
    width: 94px;
    height: 94px;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information {
    display: grid;
    grid-template-columns: 94px auto;
    grid-template-rows: auto auto;
    column-gap: 22px;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-thumbnail {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: auto !important;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-thumbnail .employer-logo {
    height: 94px;
    width: 94px;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0.0125em;
    text-align: left;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-title span {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.01em;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .title-wrapper {
    display: flex;
    align-items: flex-end;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .title-wrapper .nb-job {
    padding: 0 12px;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.0125em;
    color: var(--white-color);
    background-color: var(--superio-theme-color);
    border-radius: 14px;
}

body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-information-subline {
    margin-top: 10px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

body .employer .employer-detail-header .employer-detail-header__content .follow-btn-column {
    align-self: flex-start;
}

body .employer .employer-detail-header .employer-detail-header__content .follow-btn-column .candidate-detail-buttons .btn-action-job {
    border-radius: 25px;
}

@media screen and (max-width: 767px) {
    body .employer .employer-detail-header .employer-detail-header-background {
        min-height: 184px;
        background-position: center;
        background-size: 100% auto;
        height: 20vw;
    }

    body .employer .employer-detail-header .employer-detail-header__content {
        margin-top: -64px;
    }
}

@media screen and (max-width: 991px) {
    body .employer .employer-detail-header .employer-detail-header__content {
        bottom: auto;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-thumbnail {
        grid-row: 1 / 2;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-information .title-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-information .title-wrapper .nb-job {
        margin-top: auto;
        margin-left: 0;
        margin-bottom: 0;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-information {
        padding-top: 0;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-information .candidate-information-subline {
        text-align: left;
        grid-column: 1 / 3;
    }

    body .employer .employer-detail-header .employer-detail-header__content .follow-btn-column {
        position: absolute;
        right: 20px;
        bottom: 24px;
        width: auto;
        height: auto;
    }

    body .employer .employer-detail-header .employer-detail-header__content .follow-btn-column .candidate-detail-buttons {
        margin-left: 0;
    }

    body .employer .employer-detail-header .employer-detail-header__content .candidate-top-wrapper {
        max-width: calc(100% - 60px);
    }
}
.single-listing-wrapper {
    background-color: #F5F5F7;
}

.employer-content-area .list-content-candidate>div {
    margin-bottom: 0;
}

.employer-content-area .content-single-candidate {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
    padding-bottom: 0;
}

.employer-content-area .content-single-candidate:first-of-type {
    padding-top: 20px;
}

.employer-content-area .content-single-candidate:last-of-type {
    padding-bottom: 90px;
}

.employer-content-area .content-single-candidate:before,
.employer-content-area .content-single-candidate:after {
    display: none;
}

.employer-content-area .content-single-candidate .sidebar-job aside.widget {
    margin-bottom: 20px;
    padding: 24px;
    background-color: var(--white-color);
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
}

.employer-content-area .content-single-candidate .widget-open-jobs {
    margin-top: 32px;
}

.employer-content-area .employer-detail-description {
    padding: 24px;
    background-color: var(--white-color);
    border-width: 0 !important;
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
}

.employer-content-area .employer-detail-description .title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26.4px;
    letter-spacing: 0.0125em;
}

.employer-content-area .employer-detail-description .inner p {
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    letter-spacing: 0.0125em;
}

.employer-content-area .employer-detail-description .inner p:last-of-type {
    margin-bottom: 0;
}

.employer-content-area .contact-form-employer .form-control {
    background-color: var(--input-background-color);
}

.employer-content-area .commentform .comment-respond {
    padding: 24px;
    background-color: var(--white-color);
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
}

@media (min-width: 992px) {
    .employer-content-area .content-single-candidate {
        flex-wrap: nowrap;
    }
}
/* =========================================
   Single Employer Page - Redesign
   Based on ZnajdzPrace style + single-job_listing
   ========================================= */

/* Wrapper */
.rj-employer-wrapper {
    background-color: #f4f6f8;
    padding-top: 30px;
    padding-bottom: 60px;
    font-family: 'Poppins', sans-serif;
}

/* Container - margins left/right like job-listing page */
.rj-employer-wrapper .rj-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Banner / Cover Photo */
.rj-employer-banner {
    width: 100%;
    min-height: 200px;
    height: 16vw;
    max-height: 280px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius: 16px;
    box-shadow: var(--box-shadow-standard);
}

/* Header Section */
.rj-employer-header-section {
    position: relative;
    margin-top: -40px;
    z-index: 10;
}

.rj-employer-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: #fff;
    padding: 24px 30px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

/* Logo */
.rj-employer-logo {
    flex-shrink: 0;
}

.rj-employer-logo .employer-logo {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

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

/* Info Section */
.rj-employer-info {
    flex: 1;
    min-width: 0;
}

.rj-employer-info h1 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.rj-employer-info .rj-employer-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

/* Jobs Count Badge */
.rj-employer-jobs-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(106, 27, 154, 0.4);
    background-size: 200% auto;
    transition: 0.5s;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #9c4dcc 0%, #6a1b9a 100%);
    color: #fff;
    font-weight: 600;
}

/* Featured Employer Badge */
.rj-employer-featured-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    background-size: 200% auto;
    transition: 0.5s;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #333;
    font-weight: 600;
}

/* Subline - "najczesciej poszukuje..." */
.rj-employer-subline {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.rj-employer-subline a {
    color: var(--superio-theme-color);
    text-decoration: none;
}

.rj-employer-subline a:hover {
    text-decoration: underline;
}

/* Social Media Icons */
.rj-employer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.rj-employer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f4f5f7;
    border-radius: 50%;
    color: #555;
    font-size: 16px;
    transition: all 0.2s;
}

.rj-employer-socials a:hover {
    background: var(--superio-theme-color);
    color: #fff;
}

/* Follow Button */
.rj-employer-actions {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.rj-employer-actions .btn-action-job {
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
}

/* Tiles Section (Info Chips) */
.rj-employer-tiles {
    margin-bottom: 30px;
}

/* Reuse tiles styles from single-job - they're already in job-listing.css */
/* Additional employer-specific tile adjustments */
.rj-employer-wrapper .rj-tiles-wrapper {
    margin-top: 0;
}

/* Tile values - font weight and text wrapping */
.rj-employer-wrapper .rj-tile-value {
    font-size: 13px;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Content Cards */
.rj-employer-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rj-employer-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

.rj-employer-card .rj-section-title {
    font-size: 20px;
    font-weight: 200;
    color: #111;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rj-employer-card .rj-section-title i {
    color: var(--superio-theme-color);
    font-size: 20px;
}

/* About Section */
.rj-employer-about .rj-description-text {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.rj-employer-about .rj-description-text p {
    margin-bottom: 16px;
}

.rj-employer-about .rj-description-text p:last-child {
    margin-bottom: 0;
}

/* Company Data Section (Tiles inside card) */
.rj-employer-data .rj-tiles-wrapper {
    margin-top: 0;
}

/* Gallery Section */
.rj-employer-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.rj-employer-gallery .gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: #f0f0f0;
}

.rj-employer-gallery .gallery-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.rj-employer-gallery .gallery-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: transform 0.3s;
}

.rj-employer-gallery .gallery-item:hover img {
    transform: scale(1.05);
}

.rj-employer-gallery .gallery-more {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

/* Map Section */
.rj-employer-map {
    margin-top: 0;
}

.rj-employer-map .single-job-map {
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
}

/* Open Jobs Section */
.rj-employer-jobs .widget-open-jobs {
    margin-top: 0;
}

.rj-employer-jobs .widget-open-jobs .title {
    display: none; /* We use our own title */
}

/* Override old employer styles */
body.single-employer .employer-single-v1 {
    background: transparent;
}

body.single-employer .employer-detail-header {
    display: none !important; /* Hide old header, we use new one */
}

body.single-employer .employer-content-area {
    padding: 0;
    background: transparent;
}

body.single-employer .content-single-candidate {
    padding: 0;
}

body.single-employer .employer-detail-description,
body.single-employer .employer-details,
body.single-employer .widget-open-jobs {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: none;
}

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

@media (min-width: 992px) {
    .rj-employer-banner {
        margin-top: 65px;
        margin-bottom: 65px;
    }
}

@media (max-width: 991px) {
    .rj-employer-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rj-employer-actions {
        width: 100%;
        margin-top: 16px;
    }

    .rj-employer-actions .btn-action-job {
        width: 100%;
        justify-content: center;
    }

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

@media (max-width: 767px) {
    .rj-employer-banner {
        min-height: 120px;
        height: 25vw;
        max-height: 180px;
        margin-bottom: 65px;
        margin-top: -10px;
    }

    .rj-employer-header-section {
        margin-top: -40px;
    }

    .rj-employer-header {
        position: relative;
        padding: 20px;
        gap: 16px;
    }

    .rj-employer-logo .employer-logo {
        width: 80px;
        height: 80px;
    }

    .rj-employer-info h1 {
        font-size: 22px;
    }

    /* Mobile heart button - top right corner */
    .rj-employer-actions {
        position: absolute;
        top: 16px;
        right: 16px;
        width: auto;
        margin-top: 0;
    }

    .rj-employer-actions .btn-action-job {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .rj-employer-actions .btn-action-job .text {
        display: none;
    }

    .rj-employer-actions .btn-action-job i {
        font-size: 18px;
        margin: 0;
    }

    .rj-employer-card {
        padding: 20px;
        border-radius: 12px;
    }

    .rj-employer-gallery .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .rj-employer-map .single-job-map {
        height: 250px;
    }

    /* Mobile tiles - 2 columns */
    .rj-employer-wrapper .rj-tiles-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .rj-employer-info h1 {
        font-size: 20px;
        font-weight: 600;
    }

    .rj-employer-subline {
        font-size: 12px;
    }

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

    .rj-employer-gallery .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fix for map marker logo size */
.rj-employer-map .map-popup .icon-wrapper {
    width: 44px;
    height: 44px;
    overflow: hidden;
}

.rj-employer-map .map-popup .icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* CMB2 */
form.cmb-form div.cmb2-metabox > div {
    padding-left: 10px;
    padding-right: 10px;
}
body form.cmb-form div.cmb2-metabox .cmb-row.col-2 {
    float: left;
    width: 50%;
}
#cmb2-metabox-job_alert_metabox {
    margin-left: -15px;
    margin-right: -15px;
}
form.cmb-form div.cmb2-metabox .cmb-th {
    font-size: 15px;
    font-weight: 600;
}

body .register-form-wrapper form.cmb-form .cmb-type-checkbox {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
}

/* Hide the label for checkbox fields in registration forms */
body .register-form-wrapper form.cmb-form .cmb-type-checkbox .cmb-th,
body form.cmb-form#_employer_front .cmb-type-checkbox .cmb-th {
    display: none;
}

form.cmb-form .cmb-type-checkbox .cmb-td,
form.cmb-form .cmb-type-checkbox .cmb-td {
    display: flex;
    align-items: center;
}

form.cmb-form .cmb-type-checkbox .cmb-td input {
    margin-right: 8px;
}
form.cmb-form .cmb-type-checkbox .cmb-td label {
    margin-bottom: 0;
}

body form.cmb-form#_candidate_front .cmb-type-checkbox,
body form.cmb-form#_employer_front .cmb-type-checkbox {
    padding-left: 15px;
    padding-right: 15px;
}

body form.cmb-form#_employer_front input[name=remove-note],
body form.cmb-form#_candidate_front input[name=remove-note] {
    display: none;
}

body form.cmb-form#_employer_front input[name=remove-note] + p,
body form.cmb-form#_candidate_front input[name=remove-note] + p {
    padding-top: 0;
    font-weight: bold;
    font-size: 14px;
    color: #a00;
}

body form.cmb-form#_employer_front *[data-fieldtype=checkbox] + *[data-fieldtype=text],
body form.cmb-form#_candidate_front *[data-fieldtype=checkbox] + *[data-fieldtype=text]{
    margin-bottom: 10px;
}

body form .cmb-td .wp-job-board-pro-uploaded-files {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
}

form .cmb-td .wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file {
    margin-bottom: 0;
}

form .cmb-td input[type=file] {
    height: 55px;
    width: 150px;
    opacity: 0;
}

form .cmb-td input[type=file] + .label-can-drag {
    display: block;
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
}

form .cmb-td input[type=file]:focus + .label-can-drag .upload-file-btn {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

body form .cmb-td input[type=file] + .label-can-drag .form-group.group-upload {
    margin-top: 10px;
    margin-bottom: 0;
}

form.cmb-form .cmb-td .cmb2-metabox-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.75;
    color: #202124;
}

form .cmb-td input[readonly],
form .cmb-td input[disabled],
form .cmb-td textarea[readonly],
form .cmb-td textarea[disabled] {
    opacity: 0.5;
}
form .cmb-td input[type=text][readonly]:focus {
    border-color: transparent;
    background: #F0F5F7;
}

form.cmb-form .cmb-row.cmb2-id-terms-and-conditions,
form.cmb-form .cmb-row.cmb2-id-employer-register-privacy,
form.cmb-form .cmb-row.cmb2-id-privacy,
form.cmb-form .cmb-row.cmb2-id--employer-rodo {
    margin-bottom: 10px;
}
form.cmb-form .cmb-row.cmb2-id-remove-note p {
    margin-bottom: 0;
}

input.form-control,
select.form-control,
body form.cmb-form input[type="email"],
body form.cmb-form input[type="url"],
body form.cmb-form input[type="text"],
body form.cmb-form input[type="password"],
body form.cmb-form input[type="number"] {
    font-size: 13px;
}

@media(max-width: 768px) {
    body .elementor .elementor-widget.elementor-widget-apus_element_job_board_pro_search_form {
        max-width: 100%;
    }
}

/* Back Button - positioned at left edge */
#apus-header-mobile .back-btn {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-primary, #1f2937);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    z-index: 10;
}

#apus-header-mobile .back-btn:hover {
    color: var(--color-primary, #2DD4BF);
}

#apus-header-mobile .back-btn i {
    line-height: 1;
}

/* Adjust logo container when back button is present */
#apus-header-mobile #logo-container:has(.back-btn) {
    padding-left: 25px;
}

/* These are Elementor styles, loaded here to not mess with layout shift. */
.design-2284 .design-element.design-element-a67e41a > .design-container > .design-column > .design-widget-wrap {
    align-content: center;
    align-items: center;
}

.design-2284 .design-element.design-element-a67e41a {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0px 45px 0px 45px;
}

.design-2284 .design-element.design-element-a67e41a > .design-background-overlay {
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.design-2284 .design-element.design-element-1fd7e06 {
    text-align: left;
    width: auto;
    max-width: auto;
}

.design-2284 .design-element.design-element-1fd7e06 img {
    max-width: 100%;
}

.design-2284 .design-element.design-element-42fbdd4 {
    text-align: center;
    width: auto;
    max-width: auto;
}

.design-2284 .design-element.design-element-42fbdd4 .megamenu > li > a {
    font-weight: 600;
}

.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu > li:hover > a,.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu > li.active > a {
    color: #53DBCF;
}

.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li.current-menu-item > a,.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li.open > a,.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li.active > a,.design-2284 .design-element.design-element-42fbdd4 .navbar-nav.megamenu .dropdown-menu li:hover > a {
    color: #53DBCF;
}

.design-2284 .design-element.design-element-42fbdd4 .megamenu .dropdown-menu {
    border-top-color: #53DBCF;
}

.design-2284 .design-element.design-element-42fbdd4 .megamenu .dropdown-menu:before {
    border-color: transparent transparent #53DBCF;
}

.design-2284 .design-element.design-element-42fbdd4 > .design-widget-container {
    margin: 0px 0px 0px 35px;
}

.design-bc-flex-widget .design-2284 .design-element.design-element-eb299da.design-column .design-widget-wrap {
    align-items: center;
}

.design-2284 .design-element.design-element-eb299da.design-column.design-element[data-element_type="column"] > .design-widget-wrap.design-element-populated {
    align-content: center;
    align-items: center;
}

.design-2284 .design-element.design-element-eb299da.design-column > .design-widget-wrap {
    justify-content: center;
}

.design-2284 .design-element.design-element-a789cc4 .drop-dow {
    color: #050505;
}

.design-2284 .design-element.design-element-a789cc4 .btn {
    border-radius: 30px 30px 30px 30px;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login {
    color: #0C0C0C;
    background-color: #05050500;
    border-color: #51DACF;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login a {
    color: #0C0C0C;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login:hover {
    color: #FFFFFF;
    background-color: #51DACF;
    border-color: #51DACF;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login:focus {
    color: #FFFFFF;
    background-color: #51DACF;
    border-color: #51DACF;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login:hover a {
    color: #FFFFFF;
}

.design-2284 .design-element.design-element-a789cc4 .btn-login:focus a {
    color: #FFFFFF;
}

.design-2284 .design-element.design-element-a789cc4 > .design-widget-container {
    margin: 0px 20px 0px 0px;
}

.design-2284 .design-element.design-element-a789cc4 {
    width: auto;
    max-width: auto;
}

.design-2284 .design-element.design-element-26d4748 .btn {
    font-weight: 700;
    fill: #000000;
    color: #000000;
    background-color: #51DACF;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #51DACF;
    border-radius: 30px 30px 30px 30px;
}

.design-2284 .design-element.design-element-26d4748 .btn:hover, .design-2284 .design-element.design-element-26d4748 .btn:focus {
    color: #000000;
    background-color: #FFFFFF00;
    border-color: #51DACF;
}

.design-2284 .design-element.design-element-26d4748 .btn:hover svg, .design-2284 .design-element.design-element-26d4748 .btn:focus svg {
    fill: #000000;
}

.design-2284 .design-element.design-element-26d4748 {
    width: auto;
    max-width: auto;
}

@media(min-width: 768px) {
    .design-2284 .design-element.design-element-69c7b96 {
        width:64.962%;
    }

    .design-2284 .design-element.design-element-eb299da {
        width: 35%;
    }
}

.header_transparent .creator-header,
.creator-header {
    z-index: 99 !important;
}

/*! design - v3.25.0 - 03-11-2024 */
.design-hidden{display:none}.design-visibility-hidden{visibility:hidden}.design-screen-only,.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{position:absolute;top:-10000em;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.design-clearfix:after{content:"";display:block;clear:both;width:0;height:0}.e-logo-wrapper{background:var(--e-a-bg-logo);display:inline-block;padding:.75em;border-radius:50%;line-height:1}.e-logo-wrapper i{color:var(--e-a-color-logo);font-size:1em}.design *,.design :after,.design :before{box-sizing:border-box}.design a{box-shadow:none;text-decoration:none}.design hr{margin:0;background-color:transparent}.design img{height:auto;max-width:100%;border:none;border-radius:0;box-shadow:none}.design .design-widget:not(.design-widget-text-editor):not(.design-widget-theme-post-content) figure{margin:0}.design embed,.design iframe,.design object,.design video{max-width:100%;width:100%;margin:0;line-height:1;border:none}.design .design-background,.design .design-background-holder,.design .design-background-video-container{height:100%;width:100%;top:0;left:0;position:absolute;overflow:hidden;z-index:0;direction:ltr}.design .design-background-video-container{transition:opacity 1s;pointer-events:none}.design .design-background-video-container.design-loading{opacity:0}.design .design-background-video-embed{max-width:none}.design .design-background-video,.design .design-background-video-embed,.design .design-background-video-hosted{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.design .design-background-video{max-width:none}.design .design-html5-video{-o-object-fit:cover;object-fit:cover}.design .design-background-overlay,.design .design-background-slideshow{height:100%;width:100%;top:0;left:0;position:absolute}.design .design-background-slideshow{z-index:0}.design .design-background-slideshow__slide__image{width:100%;height:100%;background-position:50%;background-size:cover}.e-con-inner>.design-element.design-absolute,.e-con>.design-element.design-absolute,.design-widget-wrap>.design-element.design-absolute{position:absolute}.e-con-inner>.design-element.design-fixed,.e-con>.design-element.design-fixed,.design-widget-wrap>.design-element.design-fixed{position:fixed}.design-widget-wrap .design-element.design-widget__width-auto,.design-widget-wrap .design-element.design-widget__width-initial{max-width:100%}@media (max-width:1024px){.design-widget-wrap .design-element.design-widget-tablet__width-auto,.design-widget-wrap .design-element.design-widget-tablet__width-initial{max-width:100%}}@media (max-width:767px){.design-widget-wrap .design-element.design-widget-mobile__width-auto,.design-widget-wrap .design-element.design-widget-mobile__width-initial{max-width:100%}}.design-element{--flex-direction:initial;--flex-wrap:initial;--justify-content:initial;--align-items:initial;--align-content:initial;--gap:initial;--flex-basis:initial;--flex-grow:initial;--flex-shrink:initial;--order:initial;--align-self:initial;flex-basis:var(--flex-basis);flex-grow:var(--flex-grow);flex-shrink:var(--flex-shrink);order:var(--order);align-self:var(--align-self)}.design-element.design-absolute,.design-element.design-fixed{z-index:1}.design-element:where(.e-con-full,.design-widget){flex-direction:var(--flex-direction);flex-wrap:var(--flex-wrap);justify-content:var(--justify-content);align-items:var(--align-items);align-content:var(--align-content);gap:var(--gap)}.design-invisible{visibility:hidden}.design-align-center{text-align:center}.design-align-center .design-button{width:auto}.design-align-right{text-align:right}.design-align-right .design-button{width:auto}.design-align-left{text-align:left}.design-align-left .design-button{width:auto}.design-align-justify .design-button{width:100%}.design-custom-embed-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.design-custom-embed-play i{font-size:100px;color:#fff;text-shadow:1px 0 6px rgba(0,0,0,.3)}.design-custom-embed-play svg{height:100px;width:100px;fill:#fff;filter:drop-shadow(1px 0 6px rgba(0,0,0,.3))}.design-custom-embed-play i,.design-custom-embed-play svg{opacity:.8;transition:all .5s}.design-custom-embed-play.design-playing i{font-family:eicons}.design-custom-embed-play.design-playing i:before{content:"e8fb"}.design-custom-embed-play.design-playing i,.design-custom-embed-play.design-playing svg{animation:eicon-spin 2s linear infinite}.design-tag{display:inline-flex}.design-ken-burns{transition-property:transform;transition-duration:10s;transition-timing-function:linear}.design-ken-burns--out{transform:scale(1.3)}.design-ken-burns--active{transition-duration:20s}.design-ken-burns--active.design-ken-burns--out{transform:scale(1)}.design-ken-burns--active.design-ken-burns--in{transform:scale(1.3)}@media (min-width:-1){.design-widescreen-align-center{text-align:center}.design-widescreen-align-center .design-button{width:auto}.design-widescreen-align-right{text-align:right}.design-widescreen-align-right .design-button{width:auto}.design-widescreen-align-left{text-align:left}.design-widescreen-align-left .design-button{width:auto}.design-widescreen-align-justify .design-button{width:100%}}@media (max-width:-1){.design-laptop-align-center{text-align:center}.design-laptop-align-center .design-button{width:auto}.design-laptop-align-right{text-align:right}.design-laptop-align-right .design-button{width:auto}.design-laptop-align-left{text-align:left}.design-laptop-align-left .design-button{width:auto}.design-laptop-align-justify .design-button{width:100%}}@media (max-width:-1){.design-tablet_extra-align-center{text-align:center}.design-tablet_extra-align-center .design-button{width:auto}.design-tablet_extra-align-right{text-align:right}.design-tablet_extra-align-right .design-button{width:auto}.design-tablet_extra-align-left{text-align:left}.design-tablet_extra-align-left .design-button{width:auto}.design-tablet_extra-align-justify .design-button{width:100%}}@media (max-width:1024px){.design-tablet-align-center{text-align:center}.design-tablet-align-center .design-button{width:auto}.design-tablet-align-right{text-align:right}.design-tablet-align-right .design-button{width:auto}.design-tablet-align-left{text-align:left}.design-tablet-align-left .design-button{width:auto}.design-tablet-align-justify .design-button{width:100%}}@media (max-width:-1){.design-mobile_extra-align-center{text-align:center}.design-mobile_extra-align-center .design-button{width:auto}.design-mobile_extra-align-right{text-align:right}.design-mobile_extra-align-right .design-button{width:auto}.design-mobile_extra-align-left{text-align:left}.design-mobile_extra-align-left .design-button{width:auto}.design-mobile_extra-align-justify .design-button{width:100%}}@media (max-width:767px){.design-mobile-align-center{text-align:center}.design-mobile-align-center .design-button{width:auto}.design-mobile-align-right{text-align:right}.design-mobile-align-right .design-button{width:auto}.design-mobile-align-left{text-align:left}.design-mobile-align-left .design-button{width:auto}.design-mobile-align-justify .design-button{width:100%}}:root{--page-title-display:block}.design-page-title,h1.entry-title{display:var(--page-title-display)}@keyframes eicon-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.eicon-animation-spin{animation:eicon-spin 2s linear infinite}.design-section{position:relative}.design-section .design-container{display:flex;margin-right:auto;margin-left:auto;position:relative}@media (max-width:1024px){.design-section .design-container{flex-wrap:wrap}}.design-section.design-section-boxed>.design-container{max-width:1140px}.design-section.design-section-stretched{position:relative;width:100%}.design-section.design-section-items-top>.design-container{align-items:flex-start}.design-section.design-section-items-middle>.design-container{align-items:center}.design-section.design-section-items-bottom>.design-container{align-items:flex-end}@media (min-width:768px){.design-section.design-section-height-full{height:100vh}.design-section.design-section-height-full>.design-container{height:100%}}.design-bc-flex-widget .design-section-content-top>.design-container>.design-column>.design-widget-wrap{align-items:flex-start}.design-bc-flex-widget .design-section-content-middle>.design-container>.design-column>.design-widget-wrap{align-items:center}.design-bc-flex-widget .design-section-content-bottom>.design-container>.design-column>.design-widget-wrap{align-items:flex-end}.design-widget-wrap{position:relative;width:100%;flex-wrap:wrap;align-content:flex-start}.design:not(.design-bc-flex-widget) .design-widget-wrap{display:flex}.design-widget-wrap>.design-element{width:100%}.design-widget-wrap.e-swiper-container{width:calc(100% - (var(--e-column-margin-left, 0px) + var(--e-column-margin-right, 0px)))}.design-widget{position:relative}.design-widget:not(:last-child){margin-bottom:20px}.design-widget:not(:last-child).design-absolute,.design-widget:not(:last-child).design-widget__width-auto,.design-widget:not(:last-child).design-widget__width-initial{margin-bottom:0}.design-column{position:relative;min-height:1px;display:flex}.design-column-gap-narrow>.design-column>.design-element-populated{padding:5px}.design-column-gap-default>.design-column>.design-element-populated{padding:10px}.design-column-gap-extended>.design-column>.design-element-populated{padding:15px}.design-column-gap-wide>.design-column>.design-element-populated{padding:20px}.design-column-gap-wider>.design-column>.design-element-populated{padding:30px}.design-inner-section .design-column-gap-no .design-element-populated{padding:0}@media (min-width:768px){.design-column.design-col-10,.design-column[data-col="10"]{width:10%}.design-column.design-col-11,.design-column[data-col="11"]{width:11.111%}.design-column.design-col-12,.design-column[data-col="12"]{width:12.5%}.design-column.design-col-14,.design-column[data-col="14"]{width:14.285%}.design-column.design-col-16,.design-column[data-col="16"]{width:16.666%}.design-column.design-col-20,.design-column[data-col="20"]{width:20%}.design-column.design-col-25,.design-column[data-col="25"]{width:25%}.design-column.design-col-30,.design-column[data-col="30"]{width:30%}.design-column.design-col-33,.design-column[data-col="33"]{width:33.333%}.design-column.design-col-40,.design-column[data-col="40"]{width:40%}.design-column.design-col-50,.design-column[data-col="50"]{width:50%}.design-column.design-col-60,.design-column[data-col="60"]{width:60%}.design-column.design-col-66,.design-column[data-col="66"]{width:66.666%}.design-column.design-col-70,.design-column[data-col="70"]{width:70%}.design-column.design-col-75,.design-column[data-col="75"]{width:75%}.design-column.design-col-80,.design-column[data-col="80"]{width:80%}.design-column.design-col-83,.design-column[data-col="83"]{width:83.333%}.design-column.design-col-90,.design-column[data-col="90"]{width:90%}.design-column.design-col-100,.design-column[data-col="100"]{width:100%}}@media (max-width:479px){.design-column.design-xs-10{width:10%}.design-column.design-xs-11{width:11.111%}.design-column.design-xs-12{width:12.5%}.design-column.design-xs-14{width:14.285%}.design-column.design-xs-16{width:16.666%}.design-column.design-xs-20{width:20%}.design-column.design-xs-25{width:25%}.design-column.design-xs-30{width:30%}.design-column.design-xs-33{width:33.333%}.design-column.design-xs-40{width:40%}.design-column.design-xs-50{width:50%}.design-column.design-xs-60{width:60%}.design-column.design-xs-66{width:66.666%}.design-column.design-xs-70{width:70%}.design-column.design-xs-75{width:75%}.design-column.design-xs-80{width:80%}.design-column.design-xs-83{width:83.333%}.design-column.design-xs-90{width:90%}.design-column.design-xs-100{width:100%}}@media (max-width:767px){.design-column.design-sm-10{width:10%}.design-column.design-sm-11{width:11.111%}.design-column.design-sm-12{width:12.5%}.design-column.design-sm-14{width:14.285%}.design-column.design-sm-16{width:16.666%}.design-column.design-sm-20{width:20%}.design-column.design-sm-25{width:25%}.design-column.design-sm-30{width:30%}.design-column.design-sm-33{width:33.333%}.design-column.design-sm-40{width:40%}.design-column.design-sm-50{width:50%}.design-column.design-sm-60{width:60%}.design-column.design-sm-66{width:66.666%}.design-column.design-sm-70{width:70%}.design-column.design-sm-75{width:75%}.design-column.design-sm-80{width:80%}.design-column.design-sm-83{width:83.333%}.design-column.design-sm-90{width:90%}.design-column.design-sm-100{width:100%}}@media (min-width:768px) and (max-width:1024px){.design-column.design-md-10{width:10%}.design-column.design-md-11{width:11.111%}.design-column.design-md-12{width:12.5%}.design-column.design-md-14{width:14.285%}.design-column.design-md-16{width:16.666%}.design-column.design-md-20{width:20%}.design-column.design-md-25{width:25%}.design-column.design-md-30{width:30%}.design-column.design-md-33{width:33.333%}.design-column.design-md-40{width:40%}.design-column.design-md-50{width:50%}.design-column.design-md-60{width:60%}.design-column.design-md-66{width:66.666%}.design-column.design-md-70{width:70%}.design-column.design-md-75{width:75%}.design-column.design-md-80{width:80%}.design-column.design-md-83{width:83.333%}.design-column.design-md-90{width:90%}.design-column.design-md-100{width:100%}}@media (min-width:-1){.design-reverse-widescreen>.design-container>:first-child{order:10}.design-reverse-widescreen>.design-container>:nth-child(2){order:9}.design-reverse-widescreen>.design-container>:nth-child(3){order:8}.design-reverse-widescreen>.design-container>:nth-child(4){order:7}.design-reverse-widescreen>.design-container>:nth-child(5){order:6}.design-reverse-widescreen>.design-container>:nth-child(6){order:5}.design-reverse-widescreen>.design-container>:nth-child(7){order:4}.design-reverse-widescreen>.design-container>:nth-child(8){order:3}.design-reverse-widescreen>.design-container>:nth-child(9){order:2}.design-reverse-widescreen>.design-container>:nth-child(10){order:1}}@media (min-width:1025px) and (max-width:-1){.design-reverse-laptop>.design-container>:first-child{order:10}.design-reverse-laptop>.design-container>:nth-child(2){order:9}.design-reverse-laptop>.design-container>:nth-child(3){order:8}.design-reverse-laptop>.design-container>:nth-child(4){order:7}.design-reverse-laptop>.design-container>:nth-child(5){order:6}.design-reverse-laptop>.design-container>:nth-child(6){order:5}.design-reverse-laptop>.design-container>:nth-child(7){order:4}.design-reverse-laptop>.design-container>:nth-child(8){order:3}.design-reverse-laptop>.design-container>:nth-child(9){order:2}.design-reverse-laptop>.design-container>:nth-child(10){order:1}}@media (min-width:-1) and (max-width:-1){.design-reverse-laptop>.design-container>:first-child{order:10}.design-reverse-laptop>.design-container>:nth-child(2){order:9}.design-reverse-laptop>.design-container>:nth-child(3){order:8}.design-reverse-laptop>.design-container>:nth-child(4){order:7}.design-reverse-laptop>.design-container>:nth-child(5){order:6}.design-reverse-laptop>.design-container>:nth-child(6){order:5}.design-reverse-laptop>.design-container>:nth-child(7){order:4}.design-reverse-laptop>.design-container>:nth-child(8){order:3}.design-reverse-laptop>.design-container>:nth-child(9){order:2}.design-reverse-laptop>.design-container>:nth-child(10){order:1}}@media (min-width:1025px) and (max-width:-1){.design-reverse-laptop>.design-container>:first-child,.design-reverse-laptop>.design-container>:nth-child(2),.design-reverse-laptop>.design-container>:nth-child(3),.design-reverse-laptop>.design-container>:nth-child(4),.design-reverse-laptop>.design-container>:nth-child(5),.design-reverse-laptop>.design-container>:nth-child(6),.design-reverse-laptop>.design-container>:nth-child(7),.design-reverse-laptop>.design-container>:nth-child(8),.design-reverse-laptop>.design-container>:nth-child(9),.design-reverse-laptop>.design-container>:nth-child(10){order:0}.design-reverse-tablet_extra>.design-container>:first-child{order:10}.design-reverse-tablet_extra>.design-container>:nth-child(2){order:9}.design-reverse-tablet_extra>.design-container>:nth-child(3){order:8}.design-reverse-tablet_extra>.design-container>:nth-child(4){order:7}.design-reverse-tablet_extra>.design-container>:nth-child(5){order:6}.design-reverse-tablet_extra>.design-container>:nth-child(6){order:5}.design-reverse-tablet_extra>.design-container>:nth-child(7){order:4}.design-reverse-tablet_extra>.design-container>:nth-child(8){order:3}.design-reverse-tablet_extra>.design-container>:nth-child(9){order:2}.design-reverse-tablet_extra>.design-container>:nth-child(10){order:1}}@media (min-width:768px) and (max-width:1024px){.design-reverse-tablet>.design-container>:first-child{order:10}.design-reverse-tablet>.design-container>:nth-child(2){order:9}.design-reverse-tablet>.design-container>:nth-child(3){order:8}.design-reverse-tablet>.design-container>:nth-child(4){order:7}.design-reverse-tablet>.design-container>:nth-child(5){order:6}.design-reverse-tablet>.design-container>:nth-child(6){order:5}.design-reverse-tablet>.design-container>:nth-child(7){order:4}.design-reverse-tablet>.design-container>:nth-child(8){order:3}.design-reverse-tablet>.design-container>:nth-child(9){order:2}.design-reverse-tablet>.design-container>:nth-child(10){order:1}}@media (min-width:-1) and (max-width:1024px){.design-reverse-tablet>.design-container>:first-child{order:10}.design-reverse-tablet>.design-container>:nth-child(2){order:9}.design-reverse-tablet>.design-container>:nth-child(3){order:8}.design-reverse-tablet>.design-container>:nth-child(4){order:7}.design-reverse-tablet>.design-container>:nth-child(5){order:6}.design-reverse-tablet>.design-container>:nth-child(6){order:5}.design-reverse-tablet>.design-container>:nth-child(7){order:4}.design-reverse-tablet>.design-container>:nth-child(8){order:3}.design-reverse-tablet>.design-container>:nth-child(9){order:2}.design-reverse-tablet>.design-container>:nth-child(10){order:1}}@media (min-width:768px) and (max-width:-1){.design-reverse-tablet>.design-container>:first-child,.design-reverse-tablet>.design-container>:nth-child(2),.design-reverse-tablet>.design-container>:nth-child(3),.design-reverse-tablet>.design-container>:nth-child(4),.design-reverse-tablet>.design-container>:nth-child(5),.design-reverse-tablet>.design-container>:nth-child(6),.design-reverse-tablet>.design-container>:nth-child(7),.design-reverse-tablet>.design-container>:nth-child(8),.design-reverse-tablet>.design-container>:nth-child(9),.design-reverse-tablet>.design-container>:nth-child(10){order:0}.design-reverse-mobile_extra>.design-container>:first-child{order:10}.design-reverse-mobile_extra>.design-container>:nth-child(2){order:9}.design-reverse-mobile_extra>.design-container>:nth-child(3){order:8}.design-reverse-mobile_extra>.design-container>:nth-child(4){order:7}.design-reverse-mobile_extra>.design-container>:nth-child(5){order:6}.design-reverse-mobile_extra>.design-container>:nth-child(6){order:5}.design-reverse-mobile_extra>.design-container>:nth-child(7){order:4}.design-reverse-mobile_extra>.design-container>:nth-child(8){order:3}.design-reverse-mobile_extra>.design-container>:nth-child(9){order:2}.design-reverse-mobile_extra>.design-container>:nth-child(10){order:1}}@media (max-width:767px){.design-reverse-mobile>.design-container>:first-child{order:10}.design-reverse-mobile>.design-container>:nth-child(2){order:9}.design-reverse-mobile>.design-container>:nth-child(3){order:8}.design-reverse-mobile>.design-container>:nth-child(4){order:7}.design-reverse-mobile>.design-container>:nth-child(5){order:6}.design-reverse-mobile>.design-container>:nth-child(6){order:5}.design-reverse-mobile>.design-container>:nth-child(7){order:4}.design-reverse-mobile>.design-container>:nth-child(8){order:3}.design-reverse-mobile>.design-container>:nth-child(9){order:2}.design-reverse-mobile>.design-container>:nth-child(10){order:1}.design-column{width:100%}}ul.design-icon-list-items.design-inline-items{display:flex;flex-wrap:wrap}ul.design-icon-list-items.design-inline-items .design-inline-item{word-break:break-word}.design-grid{display:grid;grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.design-grid .design-grid-item{min-width:0}.design-grid-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-12 .design-grid{grid-template-columns:repeat(12,1fr)}@media (min-width:-1){.design-grid-widescreen-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-widescreen-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-widescreen-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-widescreen-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-widescreen-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-widescreen-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-widescreen-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-widescreen-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-widescreen-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-widescreen-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-widescreen-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-widescreen-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-widescreen-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-widescreen-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:-1){.design-grid-laptop-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-laptop-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-laptop-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-laptop-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-laptop-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-laptop-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-laptop-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-laptop-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-laptop-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-laptop-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-laptop-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-laptop-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-laptop-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-laptop-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:-1){.design-grid-tablet_extra-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-tablet_extra-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-tablet_extra-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-tablet_extra-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-tablet_extra-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-tablet_extra-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-tablet_extra-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-tablet_extra-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-tablet_extra-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-tablet_extra-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-tablet_extra-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-tablet_extra-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-tablet_extra-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-tablet_extra-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:1024px){.design-grid-tablet-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-tablet-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-tablet-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-tablet-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-tablet-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-tablet-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-tablet-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-tablet-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-tablet-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-tablet-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-tablet-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-tablet-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-tablet-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-tablet-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:-1){.design-grid-mobile_extra-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-mobile_extra-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-mobile_extra-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-mobile_extra-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-mobile_extra-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-mobile_extra-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-mobile_extra-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-mobile_extra-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-mobile_extra-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-mobile_extra-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-mobile_extra-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-mobile_extra-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-mobile_extra-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-mobile_extra-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:767px){.design-grid-mobile-0 .design-grid{display:inline-block;width:100%;word-spacing:var(--grid-column-gap);margin-bottom:calc(-1 * var(--grid-row-gap))}.design-grid-mobile-0 .design-grid .design-grid-item{display:inline-block;margin-bottom:var(--grid-row-gap);word-break:break-word}.design-grid-mobile-1 .design-grid{grid-template-columns:repeat(1,1fr)}.design-grid-mobile-2 .design-grid{grid-template-columns:repeat(2,1fr)}.design-grid-mobile-3 .design-grid{grid-template-columns:repeat(3,1fr)}.design-grid-mobile-4 .design-grid{grid-template-columns:repeat(4,1fr)}.design-grid-mobile-5 .design-grid{grid-template-columns:repeat(5,1fr)}.design-grid-mobile-6 .design-grid{grid-template-columns:repeat(6,1fr)}.design-grid-mobile-7 .design-grid{grid-template-columns:repeat(7,1fr)}.design-grid-mobile-8 .design-grid{grid-template-columns:repeat(8,1fr)}.design-grid-mobile-9 .design-grid{grid-template-columns:repeat(9,1fr)}.design-grid-mobile-10 .design-grid{grid-template-columns:repeat(10,1fr)}.design-grid-mobile-11 .design-grid{grid-template-columns:repeat(11,1fr)}.design-grid-mobile-12 .design-grid{grid-template-columns:repeat(12,1fr)}}@media (min-width:1025px){#design-device-mode:after{content:"desktop"}}@media (min-width:-1){#design-device-mode:after{content:"widescreen"}}@media (max-width:-1){#design-device-mode:after{content:"laptop";content:"tablet_extra"}}@media (max-width:1024px){#design-device-mode:after{content:"tablet"}}@media (max-width:-1){#design-device-mode:after{content:"mobile_extra"}}@media (max-width:767px){#design-device-mode:after{content:"mobile"}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.e-con{--border-radius:0;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-style:initial;--border-color:initial;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--content-width:min(100%,var(--container-max-width,1140px));--width:100%;--min-height:initial;--height:auto;--text-align:initial;--margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;--padding-top:var(--container-default-padding-top,10px);--padding-right:var(--container-default-padding-right,10px);--padding-bottom:var(--container-default-padding-bottom,10px);--padding-left:var(--container-default-padding-left,10px);--position:relative;--z-index:revert;--overflow:visible;--gap:var(--widgets-spacing,20px);--overlay-mix-blend-mode:initial;--overlay-opacity:1;--overlay-transition:0.3s;--e-con-grid-template-columns:repeat(3,1fr);--e-con-grid-template-rows:repeat(2,1fr);position:var(--position);width:var(--width);min-width:0;min-height:var(--min-height);height:var(--height);border-radius:var(--border-radius);z-index:var(--z-index);overflow:var(--overflow);transition:background var(--background-transition,.3s),border var(--border-transition,.3s),box-shadow var(--border-transition,.3s),transform var(--e-con-transform-transition-duration,.4s);--flex-wrap-mobile:wrap;margin-block-start:var(--margin-block-start);margin-inline-end:var(--margin-inline-end);margin-block-end:var(--margin-block-end);margin-inline-start:var(--margin-inline-start);padding-inline-start:var(--padding-inline-start);padding-inline-end:var(--padding-inline-end);--margin-block-start:var(--margin-top);--margin-block-end:var(--margin-bottom);--margin-inline-start:var(--margin-left);--margin-inline-end:var(--margin-right);--padding-inline-start:var(--padding-left);--padding-inline-end:var(--padding-right);--padding-block-start:var(--padding-top);--padding-block-end:var(--padding-bottom);--border-block-start-width:var(--border-top-width);--border-block-end-width:var(--border-bottom-width);--border-inline-start-width:var(--border-left-width);--border-inline-end-width:var(--border-right-width)}body.rtl .e-con{--padding-inline-start:var(--padding-right);--padding-inline-end:var(--padding-left);--margin-inline-start:var(--margin-right);--margin-inline-end:var(--margin-left);--border-inline-start-width:var(--border-right-width);--border-inline-end-width:var(--border-left-width)}.e-con.e-flex{--flex-direction:column;--flex-basis:auto;--flex-grow:0;--flex-shrink:1;flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}.e-con-full,.e-con>.e-con-inner{text-align:var(--text-align);padding-block-start:var(--padding-block-start);padding-block-end:var(--padding-block-end)}.e-con-full.e-flex,.e-con.e-flex>.e-con-inner{flex-direction:var(--flex-direction)}.e-con,.e-con>.e-con-inner{display:var(--display)}.e-con.e-grid{--grid-justify-content:start;--grid-align-content:start;--grid-auto-flow:row}.e-con.e-grid,.e-con.e-grid>.e-con-inner{grid-template-columns:var(--e-con-grid-template-columns);grid-template-rows:var(--e-con-grid-template-rows);justify-content:var(--grid-justify-content);align-content:var(--grid-align-content);grid-auto-flow:var(--grid-auto-flow);justify-items:var(--justify-items);align-items:var(--align-items)}.e-con-boxed.e-flex{flex-direction:column;flex-wrap:nowrap;justify-content:normal;align-items:normal;align-content:normal}.e-con-boxed.e-grid{justify-items:legacy;grid-template-columns:1fr;grid-template-rows:1fr}.e-con-boxed{text-align:initial;gap:initial}.e-con.e-flex>.e-con-inner{flex-wrap:var(--flex-wrap);justify-content:var(--justify-content);align-items:var(--align-items);align-content:var(--align-content);flex-basis:auto;flex-grow:1;flex-shrink:1;align-self:auto}.e-con.e-grid>.e-con-inner{justify-items:var(--justify-items);align-items:var(--align-items)}.e-con>.e-con-inner{gap:var(--gap);width:100%;max-width:var(--content-width);margin:0 auto;padding-inline-start:0;padding-inline-end:0;height:100%}:is(.design-section-wrap,[data-design-id])>.e-con{--margin-left:auto;--margin-right:auto;max-width:min(100%,var(--width))}.e-con .design-widget.design-widget{margin-block-end:0}.e-con:before,.e-con>.design-background-slideshow:before,.e-con>.design-motion-effects-container>.design-motion-effects-layer:before,:is(.e-con,.e-con>.e-con-inner)>.design-background-video-container:before{content:var(--background-overlay);display:block;position:absolute;mix-blend-mode:var(--overlay-mix-blend-mode);opacity:var(--overlay-opacity);transition:var(--overlay-transition,.3s);border-radius:var(--border-radius);border-style:var(--border-style);border-color:var(--border-color);border-block-start-width:var(--border-block-start-width);border-inline-end-width:var(--border-inline-end-width);border-block-end-width:var(--border-block-end-width);border-inline-start-width:var(--border-inline-start-width);top:calc(0px - var(--border-top-width));left:calc(0px - var(--border-left-width));width:max(100% + var(--border-left-width) + var(--border-right-width),100%);height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%)}.e-con:before{transition:background var(--overlay-transition,.3s),border-radius var(--border-transition,.3s),opacity var(--overlay-transition,.3s)}.e-con>.design-background-slideshow,:is(.e-con,.e-con>.e-con-inner)>.design-background-video-container{border-radius:var(--border-radius);border-style:var(--border-style);border-color:var(--border-color);border-block-start-width:var(--border-block-start-width);border-inline-end-width:var(--border-inline-end-width);border-block-end-width:var(--border-block-end-width);border-inline-start-width:var(--border-inline-start-width);top:calc(0px - var(--border-top-width));left:calc(0px - var(--border-left-width));width:max(100% + var(--border-left-width) + var(--border-right-width),100%);height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%)}@media (max-width:767px){:is(.e-con,.e-con>.e-con-inner)>.design-background-video-container.design-hidden-mobile{display:none}}:is(.e-con,.e-con>.e-con-inner)>.design-background-video-container:before{z-index:1}:is(.e-con,.e-con>.e-con-inner)>.design-background-slideshow:before{z-index:2}.e-con .design-widget{min-width:0}.e-con .design-widget-empty,.e-con .design-widget-google_maps,.e-con .design-widget-video,.e-con .design-widget.e-widget-swiper{width:100%}.e-con>.e-con-inner>.design-widget>.design-widget-container,.e-con>.design-widget>.design-widget-container{height:100%}.e-con.e-con>.e-con-inner>.design-widget,.design.design .e-con>.design-widget{max-width:100%}@media (max-width:767px){.e-con.e-flex{--width:100%;--flex-wrap:var(--flex-wrap-mobile)}.e-con.e-flex .design-widget-archive-posts{width:100%}}.design-form-fields-wrapper{display:flex;flex-wrap:wrap}.design-form-fields-wrapper.design-labels-above .design-field-group .design-field-subgroup,.design-form-fields-wrapper.design-labels-above .design-field-group>.design-select-wrapper,.design-form-fields-wrapper.design-labels-above .design-field-group>input,.design-form-fields-wrapper.design-labels-above .design-field-group>textarea{flex-basis:100%;max-width:100%}.design-form-fields-wrapper.design-labels-inline>.design-field-group .design-select-wrapper,.design-form-fields-wrapper.design-labels-inline>.design-field-group>input{flex-grow:1}.design-field-group{flex-wrap:wrap;align-items:center}.design-field-group.design-field-type-submit{align-items:flex-end}.design-field-group .design-field-textual{width:100%;max-width:100%;border:1px solid #69727d;background-color:transparent;color:#1f2124;vertical-align:middle;flex-grow:1}.design-field-group .design-field-textual:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);outline:0}.design-field-group .design-field-textual::-moz-placeholder{color:inherit;font-family:inherit;opacity:.6}.design-field-group .design-field-textual::placeholder{color:inherit;font-family:inherit;opacity:.6}.design-field-group .design-select-wrapper{display:flex;position:relative;width:100%}.design-field-group .design-select-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit;flex-basis:100%;padding-inline-end:20px}.design-field-group .design-select-wrapper:before{content:"e92a";font-family:eicons;font-size:15px;position:absolute;top:50%;transform:translateY(-50%);right:10px;pointer-events:none;text-shadow:0 0 3px rgba(0,0,0,.3)}.design-field-group.design-field-type-select-multiple .design-select-wrapper:before{content:""}.design-field-subgroup{display:flex;flex-wrap:wrap}.design-field-subgroup .design-field-option label{display:inline-block}.design-field-subgroup.design-subgroup-inline .design-field-option{padding-inline-end:10px}.design-field-subgroup:not(.design-subgroup-inline) .design-field-option{flex-basis:100%}.design-field-type-acceptance .design-field-subgroup .design-field-option input,.design-field-type-acceptance .design-field-subgroup .design-field-option label,.design-field-type-checkbox .design-field-subgroup .design-field-option input,.design-field-type-checkbox .design-field-subgroup .design-field-option label,.design-field-type-radio .design-field-subgroup .design-field-option input,.design-field-type-radio .design-field-subgroup .design-field-option label{display:inline}.design-field-label{cursor:pointer}.design-mark-required .design-field-label:after{content:"*";color:red;padding-inline-start:.2em}.design-field-textual{line-height:1.4;font-size:15px;min-height:40px;padding:5px 14px;border-radius:3px}.design-field-textual.design-size-xs{font-size:13px;min-height:33px;padding:4px 12px;border-radius:2px}.design-field-textual.design-size-md{font-size:16px;min-height:47px;padding:6px 16px;border-radius:4px}.design-field-textual.design-size-lg{font-size:18px;min-height:59px;padding:7px 20px;border-radius:5px}.design-field-textual.design-size-xl{font-size:20px;min-height:72px;padding:8px 24px;border-radius:6px}.design-button-align-stretch .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:100%}.design-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.design-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.design-button-align-center .e-form__buttons,.design-button-align-center .design-field-type-submit{justify-content:center}.design-button-align-start .e-form__buttons,.design-button-align-start .design-field-type-submit{justify-content:flex-start}.design-button-align-end .e-form__buttons,.design-button-align-end .design-field-type-submit{justify-content:flex-end}.design-button-align-center .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-button-align-end .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-button-align-start .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:auto}.design-button-align-center .e-form__buttons__wrapper,.design-button-align-end .e-form__buttons__wrapper,.design-button-align-start .e-form__buttons__wrapper{flex-grow:0}.design-button-align-center .e-form__buttons__wrapper,.design-button-align-center .e-form__buttons__wrapper__button,.design-button-align-end .e-form__buttons__wrapper,.design-button-align-end .e-form__buttons__wrapper__button,.design-button-align-start .e-form__buttons__wrapper,.design-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}@media screen and (max-width:1024px){.design-tablet-button-align-stretch .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:100%}.design-tablet-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.design-tablet-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.design-tablet-button-align-center .e-form__buttons,.design-tablet-button-align-center .design-field-type-submit{justify-content:center}.design-tablet-button-align-start .e-form__buttons,.design-tablet-button-align-start .design-field-type-submit{justify-content:flex-start}.design-tablet-button-align-end .e-form__buttons,.design-tablet-button-align-end .design-field-type-submit{justify-content:flex-end}.design-tablet-button-align-center .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-tablet-button-align-end .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-tablet-button-align-start .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:auto}.design-tablet-button-align-center .e-form__buttons__wrapper,.design-tablet-button-align-end .e-form__buttons__wrapper,.design-tablet-button-align-start .e-form__buttons__wrapper{flex-grow:0}.design-tablet-button-align-center .e-form__buttons__wrapper,.design-tablet-button-align-center .e-form__buttons__wrapper__button,.design-tablet-button-align-end .e-form__buttons__wrapper,.design-tablet-button-align-end .e-form__buttons__wrapper__button,.design-tablet-button-align-start .e-form__buttons__wrapper,.design-tablet-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}}@media screen and (max-width:767px){.design-mobile-button-align-stretch .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:100%}.design-mobile-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.design-mobile-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.design-mobile-button-align-center .e-form__buttons,.design-mobile-button-align-center .design-field-type-submit{justify-content:center}.design-mobile-button-align-start .e-form__buttons,.design-mobile-button-align-start .design-field-type-submit{justify-content:flex-start}.design-mobile-button-align-end .e-form__buttons,.design-mobile-button-align-end .design-field-type-submit{justify-content:flex-end}.design-mobile-button-align-center .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-mobile-button-align-end .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button,.design-mobile-button-align-start .design-field-type-submit:not(.e-form__buttons__wrapper) .design-button{flex-basis:auto}.design-mobile-button-align-center .e-form__buttons__wrapper,.design-mobile-button-align-end .e-form__buttons__wrapper,.design-mobile-button-align-start .e-form__buttons__wrapper{flex-grow:0}.design-mobile-button-align-center .e-form__buttons__wrapper,.design-mobile-button-align-center .e-form__buttons__wrapper__button,.design-mobile-button-align-end .e-form__buttons__wrapper,.design-mobile-button-align-end .e-form__buttons__wrapper__button,.design-mobile-button-align-start .e-form__buttons__wrapper,.design-mobile-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}}.design-error .design-field{border-color:#d9534f}.design-error .help-inline{color:#d9534f;font-size:.9em}.design-message{margin:10px 0;font-size:1em;line-height:1}.design-message:before{content:"e90e";display:inline-block;font-family:eicons;font-weight:400;font-style:normal;vertical-align:middle;margin-inline-end:5px}.design-message.design-message-danger{color:#d9534f}.design-message.design-message-danger:before{content:"e87f"}.design-message.form-message-success{color:#5cb85c}.design-form .design-button{padding-block-start:0;padding-block-end:0;border:none}.design-form .design-button-content-wrapper,.design-form .design-button>span{display:flex;justify-content:center;flex-direction:row;gap:5px}.design-form .design-button.design-size-xs{min-height:33px}.design-form .design-button.design-size-sm{min-height:40px}.design-form .design-button.design-size-md{min-height:47px}.design-form .design-button.design-size-lg{min-height:59px}.design-form .design-button.design-size-xl{min-height:72px}.design-element .design-widget-container{transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s)}.design-heading-title{padding:0;margin:0;line-height:1}.design-button{display:inline-block;line-height:1;background-color:#69727d;font-size:15px;padding:12px 24px;border-radius:3px;color:#fff;fill:#fff;text-align:center;transition:all .3s}.design-button:focus,.design-button:hover,.design-button:visited{color:#fff}.design-button-content-wrapper{display:flex;justify-content:center;flex-direction:row;gap:5px}.design-button-icon svg{width:1em;height:auto}.design-button-icon .e-font-icon-svg{height:1em}.design-button-text{display:inline-block}.design-button.design-size-xs{font-size:13px;padding:10px 20px;border-radius:2px}.design-button.design-size-md{font-size:16px;padding:15px 30px;border-radius:4px}.design-button.design-size-lg{font-size:18px;padding:20px 40px;border-radius:5px}.design-button.design-size-xl{font-size:20px;padding:25px 50px;border-radius:6px}.design-button span{text-decoration:inherit}.design-element.design-button-info .design-button{background-color:#5bc0de}.design-element.design-button-success .design-button{background-color:#5cb85c}.design-element.design-button-warning .design-button{background-color:#f0ad4e}.design-element.design-button-danger .design-button{background-color:#d9534f}.design-widget-button .design-button .design-button-info{background-color:#5bc0de}.design-widget-button .design-button .design-button-success{background-color:#5cb85c}.design-widget-button .design-button .design-button-warning{background-color:#f0ad4e}.design-widget-button .design-button .design-button-danger{background-color:#d9534f}.design-tab-title a{color:inherit}.design-view-stacked .design-icon{padding:.5em;background-color:#69727d;color:#fff;fill:#fff}.design-view-framed .design-icon{padding:.5em;color:#69727d;border:3px solid #69727d;background-color:transparent}.design-icon{display:inline-block;line-height:1;transition:all .3s;color:#69727d;font-size:50px;text-align:center}.design-icon:hover{color:#69727d}.design-icon i,.design-icon svg{width:1em;height:1em;position:relative;display:block}.design-icon i:before,.design-icon svg:before{position:absolute;left:50%;transform:translateX(-50%)}.design-icon i.fad{width:auto}.design-shape-square .design-icon{border-radius:0}.design-shape-rounded .design-icon{border-radius:10%}.design-shape-circle .design-icon{border-radius:50%}.e-transform .design-widget-container{transform:perspective(var(--e-transform-perspective,0)) rotate(var(--e-transform-rotateZ,0)) rotateX(var(--e-transform-rotateX,0)) rotateY(var(--e-transform-rotateY,0)) translate(var(--e-transform-translate,0)) translateX(var(--e-transform-translateX,0)) translateY(var(--e-transform-translateY,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX,0)) skewY(var(--e-transform-skewY,0));transform-origin:var(--e-transform-origin-y) var(--e-transform-origin-x)}.e-con.e-transform{transform:perspective(var(--e-con-transform-perspective,0)) rotate(var(--e-con-transform-rotateZ,0)) rotateX(var(--e-con-transform-rotateX,0)) rotateY(var(--e-con-transform-rotateY,0)) translate(var(--e-con-transform-translate,0)) translateX(var(--e-con-transform-translateX,0)) translateY(var(--e-con-transform-translateY,0)) scaleX(calc(var(--e-con-transform-flipX, 1) * var(--e-con-transform-scaleX, var(--e-con-transform-scale, 1)))) scaleY(calc(var(--e-con-transform-flipY, 1) * var(--e-con-transform-scaleY, var(--e-con-transform-scale, 1)))) skewX(var(--e-con-transform-skewX,0)) skewY(var(--e-con-transform-skewY,0));transform-origin:var(--e-con-transform-origin-y) var(--e-con-transform-origin-x)}.animated{animation-duration:1.25s}.animated.animated-slow{animation-duration:2s}.animated.animated-fast{animation-duration:.75s}.animated.infinite{animation-iteration-count:infinite}.animated.reverse{animation-direction:reverse;animation-fill-mode:forwards}@media (prefers-reduced-motion:reduce){.animated{animation:none}}.design-post__thumbnail__link{transition:none}#left-area ul.design-icon-list-items,.design-edit-area .design-element ul.design-icon-list-items,.design .design-element ul.design-icon-list-items{padding:0}.e--ua-appleWebkit.rtl{--flex-right:flex-start}.e--ua-appleWebkit .design-share-buttons--align-right,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-right{--justify-content:var(--flex-right,flex-end)}.e--ua-appleWebkit .design-share-buttons--align-center,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-center{--justify-content:center}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-justify .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-right .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-right .design-grid{width:auto;display:flex;flex-wrap:wrap;justify-content:var(--justify-content,space-between);margin-left:calc(-.5 * var(--grid-column-gap));margin-right:calc(-.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-justify .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-right .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-right .design-grid-item{margin-left:calc(.5 * var(--grid-column-gap));margin-right:calc(.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-left .design-grid{display:inline-block}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-left .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-left .design-grid-item{margin-left:0;margin-right:0}@media (max-width:1024px){.e--ua-appleWebkit .design-share-buttons-tablet--align-right,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-tablet-right{--justify-content:var(--flex-right,flex-end)}.e--ua-appleWebkit .design-share-buttons-tablet--align-center,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-tablet-center{--justify-content:center}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-justify .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-right .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-right .design-grid{width:auto;display:flex;flex-wrap:wrap;justify-content:var(--justify-content,space-between);margin-left:calc(-.5 * var(--grid-column-gap));margin-right:calc(-.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-justify .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-tablet-right .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-right .design-grid-item{margin-left:calc(.5 * var(--grid-column-gap));margin-right:calc(.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons-tablet--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-left .design-grid{display:inline-block}.e--ua-appleWebkit .design-grid-0.design-share-buttons-tablet--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons-tablet--align-left .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-tablet-left .design-grid-item{margin-left:0;margin-right:0}}@media (max-width:767px){.e--ua-appleWebkit .design-share-buttons-mobile--align-right,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-mobile-right{--justify-content:var(--flex-right,flex-end)}.e--ua-appleWebkit .design-share-buttons-mobile--align-center,.e--ua-appleWebkit .design-widget-social-icons.e-grid-align-mobile-center{--justify-content:center}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-justify .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-right .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-center .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-right .design-grid{width:auto;display:flex;flex-wrap:wrap;justify-content:var(--justify-content,space-between);margin-left:calc(-.5 * var(--grid-column-gap));margin-right:calc(-.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-justify .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-share-buttons--align-mobile-right .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-center .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-right .design-grid-item{margin-left:calc(.5 * var(--grid-column-gap));margin-right:calc(.5 * var(--grid-column-gap))}.e--ua-appleWebkit .design-grid-0.design-share-buttons-mobile--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-left .design-grid{display:inline-block}.e--ua-appleWebkit .design-grid-0.design-share-buttons-mobile--align-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-share-buttons-mobile--align-left .design-grid-item,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-left .design-grid,.e--ua-appleWebkit .design-grid-0.design-widget-social-icons.e-grid-align-mobile-left .design-grid-item{margin-left:0;margin-right:0}}@media (max-width:767px){.design .design-hidden-mobile{display:none}}@media (min-width:-1) and (max-width:-1){.design .design-hidden-mobile_extra{display:none}}@media (min-width:768px) and (max-width:1024px){.design .design-hidden-tablet{display:none}}@media (min-width:-1) and (max-width:-1){.design .design-hidden-laptop,.design .design-hidden-tablet_extra{display:none}}@media (min-width:1025px) and (max-width:99999px){.design .design-hidden-desktop{display:none}}@media (min-width:-1){.design .design-hidden-widescreen{display:none}}

/* Desktop dropdown panel - show full menu without scrolling */
#apus-header.apus-header-desktop .dropdown-panel {
    max-height: 600px;
}

.applicants-job .candidate-list {
    align-items: normal;
}

.applicants-job .applicant-action-button {
    margin-top: 40px;
}

.applicants-job .candidate-info-content {
    width: 100%;
}

.applicants-job .label.message-sent {
    background: #732c77;
}

.applicants-job .job-metas {
    display: flex;
    flex-direction: column;
}

.applicants-job .job-applicant-notes {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    width: 50%;
    max-width: 400px;
}

.applicants-job .job-applicant-notes .job-applicant-notes__container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.applicants-job .job-applicant-notes .job-applicant-notes__container.expanded {
    overflow-y: auto;
}

.applicants-job .job-applicant-note__wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Przyciski Edit/Delete - ukryte domyślnie, pojawiają się on hover */
.applicants-job .job-applicant-note__wrapper .job-applicant-note__edit,
.applicants-job .job-applicant-note__wrapper .job-applicant-note__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    width: 0;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: width 0.25s ease, opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}

/* Hover na wrapper - pokazuje przyciski z animacją */
.applicants-job .job-applicant-note__wrapper:hover .job-applicant-note__edit,
.applicants-job .job-applicant-note__wrapper:hover .job-applicant-note__delete {
    width: 28px;
    margin-left: 4px;
    opacity: 1;
    transform: scale(1);
}

.applicants-job .job-applicant-note__wrapper .job-applicant-note__edit {
    color: #2DD4BF;
}

.applicants-job .job-applicant-note__wrapper .job-applicant-note__edit:hover {
    background: rgba(45, 212, 191, 0.15);
    color: #14b8a6;
    transform: scale(1.1);
}

.applicants-job .job-applicant-note__wrapper .job-applicant-note__delete {
    color: #ef4444;
}

.applicants-job .job-applicant-note__wrapper .job-applicant-note__delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    transform: scale(1.1);
}

/* Notatka - kompaktowa, nowoczesna */
.applicants-job .job-applicant-note {
    background: #fafafa;
    border-radius: 10px;
    font-size: 13px;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.applicants-job .job-applicant-note:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.applicants-job .job-applicant-note__content {
    color: #374151;
    line-height: 1.4;
}

.applicants-job .job-applicant-note__content--truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.applicants-job .job-applicant-note .job-applicant-note__date {
    font-size: 10px;
    color: #9ca3af;
    font-style: normal;
    font-weight: 500;
}

.applicants-job .job-applicant-notes .job-applicant-notes__load-more {
    width: 100%;
    display: flex;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    color: #2DD4BF;
    border: none;
    background: none;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.applicants-job .job-applicant-notes .job-applicant-notes__load-more:hover {
    color: #14b8a6;
}

.applicants-job .job-applicant-notes .job-applicant-notes__load-more i {
    font-size: 10px;
}

.applicants-job .arrow-flipped {
    transform: rotate(180deg);
}

.applicants-job .job-applicant-create-note-form__description {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    font-style: italic;
}

@media(max-width: 768px) {
    .applicants-job .job-applicant-notes {
        width: 100%;
    }

    .applicants-job .job-applicant-note {
        padding: 8px 12px;
    }

    /* Na mobile przyciski pojawiają się po tapnięciu (hover state działa na tap) */
    .applicants-job .job-applicant-note__wrapper .job-applicant-note__edit,
    .applicants-job .job-applicant-note__wrapper .job-applicant-note__delete {
        height: 32px;
    }

    .applicants-job .job-applicant-note__wrapper:hover .job-applicant-note__edit,
    .applicants-job .job-applicant-note__wrapper:hover .job-applicant-note__delete {
        width: 32px;
    }
}

.job-applicant-email-preview {
    margin-top: 20px;
}

.job-applicant-email-preview table {
    table-layout: fixed;
}

@media(max-width: 768px) {
    .apus-mfp-zoom-in.job-applicant-email-preview-popup .mfp-content {
        z-index: 9999;
    }
}

/* ==========================================================================
   EMAIL PREVIEW POPUP - Compact Viewport-Fit Design
   Selektory specyficzne dla tego popupu - nie wpływają na auth/login popupy
   ========================================================================== */

/* Pozycjonowanie popupu na środku viewport */
.job-applicant-email-preview-popup .mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper container - biały card z cieniem */
#job-applicant-email-preview-wrapper .inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 24px;
    max-height: 88vh;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

/* Nagłówek - kompaktowy, pełna szerokość */
#job-applicant-email-preview-wrapper .widget-title {
    flex: 0 0 100%;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
    padding: 0;
    text-align: center;
}

/* Przyciski - shiny z cieniem, obok siebie */
#job-applicant-email-preview-wrapper .btn-confirm-send,
#job-applicant-email-preview-wrapper .btn-private-message {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 280px;
    min-width: 140px;
    padding: 12px 24px;
    margin: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
}

/* Send button - primary shiny */
#job-applicant-email-preview-wrapper .btn-confirm-send {
    background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
}

#job-applicant-email-preview-wrapper .btn-confirm-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.5);
}

/* Private message button - secondary shiny */
#job-applicant-email-preview-wrapper .btn-private-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

#job-applicant-email-preview-wrapper .btn-private-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Email preview content - scroll tylko tutaj, pełna szerokość */
#job-applicant-email-preview-wrapper .job-applicant-email-preview {
    flex: 0 0 100%;
    max-height: calc(88vh - 180px);
    overflow-y: auto;
    margin: 12px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

/* Tabele w preview - kompaktowe */
#job-applicant-email-preview-wrapper .job-applicant-email-preview table {
    width: 100%;
    font-size: 13px;
}

#job-applicant-email-preview-wrapper .job-applicant-email-preview td {
    padding: 6px 8px;
    vertical-align: top;
}

/* Responsive - mobile */
@media (max-width: 768px) {
    #job-applicant-email-preview-wrapper .inner {
        padding: 14px 16px;
        border-radius: 12px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
    }

    #job-applicant-email-preview-wrapper .widget-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #job-applicant-email-preview-wrapper .btn-confirm-send,
    #job-applicant-email-preview-wrapper .btn-private-message {
        flex: 0 0 100%;
        margin: 6px 0;
        padding: 10px 20px;
    }

    #job-applicant-email-preview-wrapper .job-applicant-email-preview {
        padding: 12px;
        max-height: calc(85vh - 200px);
    }
}

/* ==========================================================================
   PRIVATE MESSAGE POPUP - Compact Centered Design
   Selektor atrybutu - celuje tylko w popupy private message
   ========================================================================== */

/* Pozycjonowanie popupu na środku viewport */
.mfp-wrap:has([id^="job-applicant-private-message-form-wrapper-"]) .mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper container - biały card z cieniem */
[id^="job-applicant-private-message-form-wrapper-"] .inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Nagłówek - kompaktowy, wyśrodkowany */
[id^="job-applicant-private-message-form-wrapper-"] .widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: center;
}

/* Formularz */
[id^="job-applicant-private-message-form-wrapper-"] form {
    text-align: left;
}

[id^="job-applicant-private-message-form-wrapper-"] .form-group {
    margin-bottom: 16px;
}

[id^="job-applicant-private-message-form-wrapper-"] .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

[id^="job-applicant-private-message-form-wrapper-"] .form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

[id^="job-applicant-private-message-form-wrapper-"] .form-group textarea:focus {
    outline: none;
    border-color: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

/* Przycisk Submit - shiny teal */
[id^="job-applicant-private-message-form-wrapper-"] button[type="submit"],
[id^="job-applicant-private-message-form-wrapper-"] .btn-theme {
    display: block;
    width: 100%;
    padding: 12px 24px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
}

[id^="job-applicant-private-message-form-wrapper-"] button[type="submit"]:hover,
[id^="job-applicant-private-message-form-wrapper-"] .btn-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.5);
}

/* Responsive - mobile */
@media (max-width: 768px) {
    [id^="job-applicant-private-message-form-wrapper-"] .inner {
        padding: 16px;
        border-radius: 12px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
    }

    [id^="job-applicant-private-message-form-wrapper-"] .widget-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    [id^="job-applicant-private-message-form-wrapper-"] .form-group textarea {
        min-height: 100px;
    }
}

/* ==========================================================================
   CREATE NOTE POPUP - Compact Centered Design
   Selektor atrybutu - celuje tylko w popupy create note
   ========================================================================== */

/* Pozycjonowanie popupu na środku viewport */
.mfp-wrap:has([id^="job-applicant-create-note-form-wrapper-"]) .mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper container - biały card z cieniem */
[id^="job-applicant-create-note-form-wrapper-"] .inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Nagłówek - kompaktowy, wyśrodkowany */
[id^="job-applicant-create-note-form-wrapper-"] .widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: center;
}

/* Formularz */
[id^="job-applicant-create-note-form-wrapper-"] form {
    text-align: left;
}

[id^="job-applicant-create-note-form-wrapper-"] .form-group {
    margin-bottom: 16px;
}

[id^="job-applicant-create-note-form-wrapper-"] .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

[id^="job-applicant-create-note-form-wrapper-"] .form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

[id^="job-applicant-create-note-form-wrapper-"] .form-group textarea:focus {
    outline: none;
    border-color: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

/* Opis notatki */
[id^="job-applicant-create-note-form-wrapper-"] .job-applicant-create-note-form__description {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    font-style: italic;
}

/* Przycisk Submit - shiny teal */
[id^="job-applicant-create-note-form-wrapper-"] button[type="submit"],
[id^="job-applicant-create-note-form-wrapper-"] .btn-theme {
    display: block;
    width: 100%;
    padding: 12px 24px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
}

[id^="job-applicant-create-note-form-wrapper-"] button[type="submit"]:hover,
[id^="job-applicant-create-note-form-wrapper-"] .btn-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.5);
}

/* Responsive - mobile */
@media (max-width: 768px) {
    [id^="job-applicant-create-note-form-wrapper-"] .inner {
        padding: 16px;
        border-radius: 12px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
    }

    [id^="job-applicant-create-note-form-wrapper-"] .widget-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    [id^="job-applicant-create-note-form-wrapper-"] .form-group textarea {
        min-height: 100px;
    }
}

/* ==========================================================================
   EDIT NOTE POPUP - Compact Centered Design
   Selektor atrybutu - celuje tylko w popupy edit note
   ========================================================================== */

/* Pozycjonowanie popupu na środku viewport */
.mfp-wrap:has([id^="job-applicant-edit-note-form-wrapper-"]) .mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper container - biały card z cieniem */
[id^="job-applicant-edit-note-form-wrapper-"] .inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Nagłówek - kompaktowy, wyśrodkowany */
[id^="job-applicant-edit-note-form-wrapper-"] .widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: center;
}

/* Formularz */
[id^="job-applicant-edit-note-form-wrapper-"] form {
    text-align: left;
}

[id^="job-applicant-edit-note-form-wrapper-"] .form-group {
    margin-bottom: 16px;
}

[id^="job-applicant-edit-note-form-wrapper-"] .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

[id^="job-applicant-edit-note-form-wrapper-"] .form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

[id^="job-applicant-edit-note-form-wrapper-"] .form-group textarea:focus {
    outline: none;
    border-color: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

/* Przycisk Submit - shiny teal */
[id^="job-applicant-edit-note-form-wrapper-"] button[type="submit"],
[id^="job-applicant-edit-note-form-wrapper-"] .btn-theme {
    display: block;
    width: 100%;
    padding: 12px 24px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
}

[id^="job-applicant-edit-note-form-wrapper-"] button[type="submit"]:hover,
[id^="job-applicant-edit-note-form-wrapper-"] .btn-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.5);
}

/* Responsive - mobile */
@media (max-width: 768px) {
    [id^="job-applicant-edit-note-form-wrapper-"] .inner {
        padding: 16px;
        border-radius: 12px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
    }

    [id^="job-applicant-edit-note-form-wrapper-"] .widget-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    [id^="job-applicant-edit-note-form-wrapper-"] .form-group textarea {
        min-height: 100px;
    }
}
/* ==========================================================================
   APPLICANTS JOBS PAGE - Cloud Style Redesign
   Based on "Moje ogłoszenia" minimalist design

   Refactored: 2026-01-21
   - Removed all !important declarations
   - Using body prefix for specificity instead
   - Using CSS variables from design system
   ========================================================================== */

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

body .applicants-job {
    background: transparent;
    padding: 0;
    box-shadow: none;
    margin: 10px;
}

/* Box Dashboard Wrapper - Full width */
body .box-dashboard-wrapper,
body .main-content .box-dashboard-wrapper,
body #main-container .box-dashboard-wrapper {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0;
}

/* Override parent theme media queries - remove padding */
@media (min-width: 992px) {
    body .box-dashboard-wrapper {
        padding: 0;
        margin: 10px;
        width: calc(100% - 20px);
    }
}

/* FIX: Content overlap with header */
body .applicants-jobs-page {
    position: relative;
    z-index: 2;
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 1350px) {
    body .box-dashboard-wrapper {
        padding: 0;
        margin: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
    }
}

body .applicants-job .widget-title {
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 20px;
    padding: 0;
    margin-left: 24px;
}

/* Dashboard Section Header - same margins as widget-title */
body .applicants-jobs-page .dashboard-section-header {
    margin-left: 24px;
    margin-bottom: 20px;
}

/* Box Dashboard Wrapper - Widget Title */
body .applicants-job .box-dashboard-wrapper>.widget-title {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 25px;
    font-weight: var(--font-weight-medium, 500);
}

/* Inner List Container - Cloud Card */
body .applicants-job .inner-list,
body .applicants-job .box-dashboard-wrapper {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
    padding: 24px;
    padding: 24px;
    overflow: hidden;
}

/* FIX: Allow sticky header to work by unsetting overflow on ALL ancestors */
/* Option A: Deep CSS Fix using :has() to scope to this specific page */

/* 1. Global & Structural Wrappers - only when applicants page is present */
html:has(.applicants-jobs-page),
body:has(.applicants-jobs-page),
body:has(.applicants-jobs-page) #wrapper-container,
body:has(.applicants-jobs-page) #apus-main-content,
body:has(.applicants-jobs-page) .site-content,
body:has(.applicants-jobs-page) .site-main {
    overflow: visible !important;
}

/* 2. Immediate Parents */
body .applicants-jobs-page .inner-list,
body .applicants-jobs-page.box-dashboard-wrapper,
body .applicants-jobs-page .box-dashboard-wrapper {
    overflow: visible !important;
}

/* ==========================================================================
   SEARCH & FILTER CONTROLS
   ========================================================================== */

body .applicants-job .search-orderby-wrapper,
body .applicants-jobs-page .search-orderby-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    flex-wrap: wrap;
    padding-bottom: 0;
}

body .applicants-job .search-applicants-form,
body .applicants-jobs-page .search-applicants-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    border: none;
    background: transparent;
    margin-bottom: 8px;
    margin-top: 20px;
}

/* Ensure form element takes full space */
body .applicants-job .search-applicants-form form,
body .applicants-jobs-page .search-applicants-form form {
    width: 100%;
    display: block;
    margin: 0;
}

body .applicants-job .search-applicants-form .flex-middle,
body .applicants-job .search-form-inner,
body .applicants-jobs-page .search-applicants-form .flex-middle,
body .applicants-jobs-page .search-form-inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: var(--color-bg-primary, #fff);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    border: 1px solid var(--color-border-default, #e5e7eb);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
    width: 100%;
}

body .applicants-job .search-applicants-form .flex-middle:focus-within,
body .applicants-job .search-form-inner:focus-within,
body .applicants-jobs-page .search-applicants-form .flex-middle:focus-within,
body .applicants-jobs-page .search-form-inner:focus-within {
    border-color: var(--color-primary, #2DD4BF);
}

/* Search Button */
body .applicants-job .search-applicants-form .btn-search,
body .applicants-job .search-applicants-form button[type="submit"],
body .applicants-jobs-page .search-applicants-form .btn-search,
body .applicants-jobs-page .search-applicants-form button[type="submit"] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--color-primary, #2DD4BF) !important;
    /* Force background */
    border: none;
    color: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
    opacity: 1 !important;
}

body .applicants-jobs-page .search-applicants-form .btn-search:hover,
body .applicants-jobs-page .search-applicants-form button[type="submit"]:hover {
    background: var(--color-primary-dark, #14b8a6) !important;
}

body .applicants-job .search-applicants-form .btn-search i,
body .applicants-job .search-applicants-form button[type="submit"] i,
body .applicants-jobs-page .search-applicants-form .btn-search i,
body .applicants-jobs-page .search-applicants-form button[type="submit"] i {
    font-size: 14px;
    color: #fff !important;
    /* Force white icon */
    line-height: 1;
    display: block;
}

body .applicants-job .search-applicants-form .btn-search i::before,
body .applicants-job .search-applicants-form button[type="submit"] i::before,
body .applicants-jobs-page .search-applicants-form .btn-search i::before,
body .applicants-jobs-page .search-applicants-form button[type="submit"] i::before {
    font-size: 14px;
    color: inherit;
}

/* Search Input */
body .applicants-job .search-applicants-form input[type="text"],
body .applicants-job .search-applicants-form .form-control,
body .applicants-jobs-page .search-applicants-form input[type="text"],
body .applicants-jobs-page .search-applicants-form .form-control {
    flex: 1;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    background: transparent;
    outline: none;
    box-shadow: none;
}

body .applicants-job .search-applicants-form input[type="text"]::placeholder,
body .applicants-jobs-page .search-applicants-form input[type="text"]::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

/* Filter Dropdown - Job Filter */
body .applicants-job .search-applicants-form select,
body .applicants-job .search-applicants-form .job_id,
body .applicants-jobs-page .search-applicants-form select,
body .applicants-jobs-page .search-applicants-form .job_id {
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    background: transparent;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    /* Native Appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Flex layout for 50/50 split */
    flex: 1;
    width: auto;
    min-width: 0;
    /* Custom Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23374151%27 d=%27M6 8.825L1.175 4l1.05-1.05L6 6.725l3.775-3.775L10.825 4z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 32px !important;
    /* Make room for arrow */
}

/* Ensure Input also takes 50% (flex: 1) */
body .applicants-jobs-page .search-applicants-form input[type="text"],
body .applicants-jobs-page .search-applicants-form .form-control {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* Hide Select2 if it still tries to load */
body .applicants-job .search-applicants-form .select2-container,
body .applicants-jobs-page .search-applicants-form .select2-container {
    display: none !important;
}

/* Select2 Container Width */
body .applicants-job .search-applicants-form .select2-container,
body .applicants-jobs-page .search-applicants-form .select2-container {
    min-width: 480px;
}

/* Select2 Text Styling - Match Search Placeholder */
body .applicants-job .search-applicants-form .select2-container .select2-selection__rendered,
body .applicants-jobs-page .search-applicants-form .select2-container .select2-selection__rendered {
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
    padding-left: 10px;
    text-align: left;
}

/* Global Select2 Dropdown Options - Styling to match */
body .select2-results__option {
    font-size: 13px;
    padding-left: 10px;
    color: var(--color-text-muted, #9ca3af);
}

/* Hover/Selected State for Options */
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-secondary, #374151);
}

/* Sort Controls - HIDDEN */
body .applicants-job .sort-applicants-form,
body .applicants-job .sortby-form,
body .applicants-jobs-page .sort-applicants-form,
body .applicants-jobs-page .sortby-form {
    display: none;
}

body .applicants-job .text-sort {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}

body .applicants-job .orderby-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-primary, #fff);
    border-radius: 50px;
    padding: 6px 16px 6px 12px;
    border: 1px solid var(--color-border-default, #e5e7eb);
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
}

body .applicants-job .orderby {
    border: none;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    background: transparent;
    cursor: pointer;
    outline: none;
}

/* ==========================================================================
   JOB APPLICANTS SECTION - HEADER REDESIGN (Cloud Style)
   ========================================================================== */

/* Main job applicants container */
body .applicants-jobs-page .job-applicants {
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Header - Compact cloud, fit-content width, left-aligned */
body .applicants-jobs-page .job-applicants .heading {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 14px;
    margin-bottom: 12px;
    background: var(--color-bg-primary, #fff);
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-left: 10px;
    width: auto;
    max-width: calc(100% - 20px);
}

/* Reset Bootstrap row/col styles in heading */

body .applicants-jobs-page .job-applicants .heading.row {
    margin: 0;
    margin-left: 11px !important;
    display: inline-flex;
    flex-wrap: nowrap;
    position: sticky;
    top: 70px;
    z-index: 99;
    margin-bottom: 20px;
}

body .applicants-jobs-page .job-applicants .heading .col-sm-8,
body .applicants-jobs-page .job-applicants .heading .col-sm-4,
body .applicants-jobs-page .job-applicants .heading .col-xs-12 {
    width: auto;
    flex: none;
    padding: 0;
    max-width: none;
}

/* Job title in header - compact, left-aligned */
body .applicants-jobs-page .job-applicants .job-title {
    font-size: 13px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

@media (min-width: 992px) {
    body .applicants-jobs-page .job-applicants .job-title {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Filter buttons container */
body .applicants-jobs-page .inner-result {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Filter badges - Compact pill style */
body .applicants-jobs-page .total-applicants,
body .applicants-jobs-page .approved-applicants,
body .applicants-jobs-page .rejected-applicants {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

/* Total/All - Teal style */
body .applicants-jobs-page .total-applicants {
    background: #e0f2f1;
    color: #00897b;
}

body .applicants-jobs-page .total-applicants.active,
body .applicants-jobs-page .total-applicants:hover {
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, var(--color-primary-dark, #14b8a6) 100%);
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
}

/* Approved - Green style */
body .applicants-jobs-page .approved-applicants {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .applicants-jobs-page .approved-applicants.active,
body .applicants-jobs-page .approved-applicants:hover {
    background: linear-gradient(135deg, var(--color-success, #22c55e) 0%, #16a34a 100%);
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Rejected - Red style */
body .applicants-jobs-page .rejected-applicants {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .applicants-jobs-page .rejected-applicants.active,
body .applicants-jobs-page .rejected-applicants:hover {
    background: linear-gradient(135deg, var(--color-error, #ef4444) 0%, #dc2626 100%);
    color: var(--color-white, #fff);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Badge numbers - Bold */
body .applicants-jobs-page .inner-result .number {
    font-weight: var(--font-weight-bold, 700);
}

/* ==========================================================================
   CANDIDATE LIST CARD - Cloud Style (COMPACT like my-jobs)
   ========================================================================== */

/* FIX: Structural Refactor - Outer container reset globally */
body .applicants-job .applicants-inner .applicants-job,
body .employer-dashboard-wrapper .applicants .applicants-job {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 10px;
    border: none;
}

/* FIX: Structural Refactor - Inner container gets the Cloud Style globally */
body .applicants-job .candidate-list,
body .employer-dashboard-wrapper .applicants .applicants-job .candidate-list {
    background: var(--color-bg-primary, #fff);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 24px 18px;
    /* Increased height */
    transition: box-shadow 0.2s, transform 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative !important;
    /* Ensure context for buttons */
    padding-right: 180px;
    /* Space for buttons */
    width: 100% !important;
    /* Ensure full width */
    box-sizing: border-box;
    display: flex;
    /* Ensure flex behavior */
    flex-wrap: nowrap;
}

/* Ensure status labels are visible globally */
body .applicants-job .label {
    display: inline-flex !important;
}

/* FIX: Ensure container itself has no style in dashboard */
/* This rule is now redundant due to the global reset above, but keeping for explicit override if needed */
body .employer-dashboard-wrapper .applicants .applicants-job {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
    margin-bottom: 0px;
}

/* FIX: Apply hover effect to Inner Container (.candidate-list) for BOTH views */
/* Simplified selector to work in all contexts (Dashboard & Applicants Page) */
body .applicants-job:hover .candidate-list {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* candidate-list styles are now defined in the main block above and Action Buttons section */
/* Cleaning up duplication to avoid confusion */

body .applicants-job .candidate-info {
    flex: 1;
    min-width: 0;
}

body .applicants-job .candidate-info .flex-middle {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icon Badge - Smaller */
body .applicants-job .candidate-info .icons {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, var(--color-primary-dark, #14b8a6) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body .applicants-job .candidate-info .icons i {
    color: var(--color-white, #fff);
    font-size: 14px;
}

body .applicants-job .candidate-info-content {
    flex: 1;
    min-width: 0;
}

/* Job Meta Info - Compact */
body .applicants-job .job-metas {
    margin-bottom: 4px;
}

body .applicants-job .notify-type {
    font-size: 10px;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

/* Unified: lighter and smaller job title */
body .applicants-job .job-metas .job-title,
body .applicants-job .job-metas .job-title a {
    font-weight: 400;
    /* Regular */
    font-size: 11px;
}

body .applicants-job .job-metas .job-title a {
    background: linear-gradient(135deg, var(--color-text-primary, #1f2937) 0%, var(--color-gray-500, #6b7280) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: opacity 0.2s;
}

body .applicants-job .job-metas .job-title a:hover {
    opacity: 0.8;
}

/* Job metas links and icons - compact styling */
body .applicants-job .job-metas a:not([class]) {
    color: #1f1f1f;
    font-size: 10px;
}

body .applicants-job .job-metas i {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    margin-right: 1px;
}

/* Candidate Name & Time - Compact */
body .applicants-job .title-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

body .applicants-job .candidate-name-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Candidate Photo - Smaller */
body .applicants-job .candidate-photo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

body .applicants-job .candidate-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Candidate Initials - Smaller */
body .applicants-job .candidate-initials-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, var(--color-primary-dark, #14b8a6) 100%);
    color: var(--color-white, #fff);
    border-radius: 50%;
    font-size: 9px;
    font-weight: var(--font-weight-semibold, 600);
    flex-shrink: 0;
}

/* Unified: larger and bolder candidate name */
body .applicants-job .candidate-title,
body .applicants-job .candidate-title a {
    font-size: 15px;
    font-weight: 700;
    /* Bold */
}

body .applicants-job .candidate-title a {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: opacity 0.2s;
}

body .applicants-job .candidate-title a:hover {
    opacity: 0.8;
}

/* Applied Time - Smaller */
body .applicants-job .applied-time {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}

/* Status Labels - Smaller */
body .applicants-job .label {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: var(--font-weight-medium, 500);
}

body .applicants-job .label-success,
body .applicants-job .label.approved {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .applicants-job .label-default,
body .applicants-job .label.rejected {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .applicants-job .label.message-sent {
    background: #e0f2fe;
    color: #075985;
}

/* New application - Blue badge */
body .applicants-job .label-info,
body .applicants-job .label.new-application {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ==========================================================================
   ACTION BUTTONS - Colorful Icons (like my-jobs)
   ========================================================================== */

/* Make candidate-list relative for absolute positioning */
body .applicants-job .candidate-list {
    /* Styles moved to main block above */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Action buttons - centered vertically, stuck to right */
/* Action buttons - centered vertically, inside the cloud */
body .applicants-job .ali-right {
    position: absolute !important;
    right: 20px !important;
    /* Inside the cloud */
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    width: auto !important;
    margin: 0 !important;
}

/* Remove old dashboard specific centering since it's now global */
body .employer-dashboard-wrapper .applicants .applicants-job .ali-right {
    top: 50%;
    right: 20px;
}

body .applicants-job .applicant-action-button,
body .applicants-job .action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Date styling - smaller font */
body .applicants-job .date {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
}

/* Candidate Contact Info below Date */
body .applicants-job .applicant-contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

body .applicants-job .applicant-contact-details .contact-item {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    /* Same small font as date */
    color: var(--color-text-secondary, #374151);
    white-space: nowrap;
}

body .applicants-job .applicant-contact-details .contact-item svg {
    margin-right: 6px;
    color: var(--color-primary, #2DD4BF);
    flex-shrink: 0;
}

/* On Desktop: Show contact info in a single line */
@media (min-width: 992px) {
    body .applicants-job .applicant-contact-details {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

body .applicants-job .btn-action-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border-default, #e5e7eb);
    color: var(--color-gray-500, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

body .applicants-job .btn-action-icon:hover {
    transform: scale(1.1);
}

body .applicants-job .btn-action-icon i {
    font-size: 14px;
}

/* Approve Button - Green */
body .applicants-job .btn-action-icon.approve,
body .applicants-job .btn-approve-job-applied {
    color: var(--color-success, #22c55e);
    border-color: #bbf7d0;
    background: #f0fdf4;
}

body .applicants-job .btn-action-icon.approve:hover,
body .applicants-job .btn-approve-job-applied:hover {
    background: var(--color-success, #22c55e);
    color: var(--color-white, #fff);
    border-color: var(--color-success, #22c55e);
}

/* Reject Button - Red */
body .applicants-job .btn-action-icon.rejec,
body .applicants-job .btn-reject-job-applied {
    color: var(--color-error, #ef4444);
    border-color: #fecaca;
    background: #fef2f2;
}

body .applicants-job .btn-action-icon.rejec:hover,
body .applicants-job .btn-reject-job-applied:hover {
    background: var(--color-error, #ef4444);
    color: var(--color-white, #fff);
    border-color: var(--color-error, #ef4444);
}

/* Download Button - Blue */
body .applicants-job .btn-action-icon.download {
    color: var(--color-info, #3b82f6);
    border-color: #bfdbfe;
    background: #eff6ff;
}

body .applicants-job .btn-action-icon.download:hover {
    background: var(--color-info, #3b82f6);
    color: var(--color-white, #fff);
    border-color: var(--color-info, #3b82f6);
}

/* Remove Button - Red */
body .applicants-job .btn-action-icon.remove,
body .applicants-job .btn-remove-job-applied {
    color: var(--color-error, #ef4444);
    border-color: #fecaca;
    background: #fef2f2;
}

body .applicants-job .btn-action-icon.remove:hover,
body .applicants-job .btn-remove-job-applied:hover {
    background: var(--color-error, #ef4444);
    color: var(--color-white, #fff);
    border-color: var(--color-error, #ef4444);
}

/* Note/Comment Button - Gray/Teal */
body .applicants-job .btn-create-meeting-job-applied {
    color: var(--color-primary, #2DD4BF);
    border-color: #99f6e4;
    background: #f0fdfa;
}

body .applicants-job .btn-create-meeting-job-applied:hover {
    background: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
    border-color: var(--color-primary, #2DD4BF);
}

/* ==========================================================================
   NOTES SECTION
   ========================================================================== */

body .applicants-job .applicants-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border-default, #e5e7eb);
}

body .applicants-job .notes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body .applicants-job .note-item {
    padding: 12px 16px;
    background: var(--color-gray-50, #f9fafb);
    border-radius: 10px;
    border-left: 3px solid var(--color-primary, #2DD4BF);
}

body .applicants-job .note-item .note-date {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 4px;
}

body .applicants-job .note-item .note-content {
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    line-height: 1.5;
}

/* ==========================================================================
   PAGINATION - Cloud Style
   ========================================================================== */

body .applicants-job .apus-loadmore-btn {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 24px auto 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-primary, #2DD4BF) 0%, var(--color-primary-dark, #14b8a6) 100%);
    color: var(--color-white, #fff);
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

body .applicants-job .apus-loadmore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
}

/* No Found Message */
body .applicants-job .no-found {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {

    /* Add margin-top to header on mobile */
    body .applicants-job .widget-title,
    body .applicants-job .dashboard-section-header,
    body .applicants-jobs-page .dashboard-section-header {
        margin-top: 10px;
    }

    /* 1. Global Wrapper Fixes */
    body .applicants-job {
        margin: 0;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    body .applicants-job .inner-list {
        padding: 16px;
        overflow: visible;
    }

    /* 2. Search & Orderby Wrapper - BLOCK LAYOUT (No Flex) */
    body .applicants-job .search-orderby-wrapper {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    /* 3. Search Form - BLOCK & RESET */
    body .applicants-job .search-applicants-form,
    body .applicants-jobs-page .search-applicants-form {
        display: block;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 10px 0;
        margin-left: 0;
        padding: 0;
        position: static;
        transform: none;
        left: auto;
        box-sizing: border-box;
    }

    body .applicants-job .search-applicants-form form {
        width: 100%;
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Fix Select2 Min-Width causing overflow */
    body .applicants-job .search-applicants-form .select2-container,
    body .applicants-jobs-page .search-applicants-form .select2-container {
        min-width: 40px;
        width: 100%;
        max-width: 100%;
    }

    body .applicants-job .search-applicants-form .select2-container .select2-selection,
    body .applicants-jobs-page .search-applicants-form .select2-container .select2-selection {
        width: 100%;
    }

    /* ==========================================================================
       SELECT2 MOBILE FIXES (Simplified)
       ========================================================================== */

    /* Force the dropdown wrapper to be full width and aligned left */
    body>.select2-container--open {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Ensure dropdown box fits */
    body .select2-dropdown {
        border-radius: 0;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Prevent iOS Zoom (Font Size 13px) */
    body .select2-container input,
    body .select2-container .select2-selection__rendered,
    body .select2-search__field {
        font-size: 13px;
    }

    body .applicants-job .search-applicants-form input,
    body .applicants-job .search-applicants-form select {
        font-size: 16px;
    }

    body .select2-results {
        max-width: 100%;
    }

    /* Sticky header - mobile top offset */
    body .applicants-jobs-page .job-applicants .heading.row {
        top: 60px;
        margin-top: 50px;
    }

    /* 4. Heading / Job Name Cloud & Buttons Layout - COMPACT */
    body .applicants-jobs-page .job-applicants .heading {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 8px 12px 12px;
        border-radius: 12px;
        gap: 4px;
        width: auto;
        max-width: calc(100% - 20px);
    }

    body .applicants-jobs-page .job-applicants .heading .col-sm-8,
    body .applicants-jobs-page .job-applicants .heading .col-sm-4,
    body .applicants-jobs-page .job-applicants .heading .col-xs-12 {
        width: auto;
        flex: none;
        max-width: 100%;
        float: none;
        display: block;
        position: static;
        padding: 0;
        margin: 0;
    }

    /* Force text wrapping on title elements */
    body .applicants-jobs-page .job-applicants .heading h1,
    body .applicants-jobs-page .job-applicants .heading h2,
    body .applicants-jobs-page .job-applicants .heading h3,
    body .applicants-jobs-page .job-applicants .heading .job-title,
    body .applicants-jobs-page .job-applicants .heading strong {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        height: auto;
        word-wrap: break-word;
        line-height: 1.3;
        font-size: 11px;
        margin: 0;
    }

    /* Inner result buttons - compact and wrap */
    body .applicants-jobs-page .job-applicants .heading .inner-result {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
    }

    body .applicants-jobs-page .job-applicants .heading .inner-result>div {
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 8px;
    }

    /* Stack buttons below */
    body .applicants-jobs-page .job-applicants .heading .ali-right {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        display: block;
        float: none;
        margin-top: 5px;
        text-align: left;
        justify-content: flex-start;
        white-space: normal;
    }

    /* 5. Candidate Card Layout - Flex Column */
    body .applicants-job .candidate-list {
        display: flex;
        flex-direction: column;
        position: static;
        padding-right: 0;
    }

    /* 6. Job Title / Widget Title Wrapping */
    body .applicants-job .candidate-title,
    body .applicants-job .job-title,
    body .applicants-job .widget-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-wrap: break-word;
        height: auto;
    }

    /* 7. Candidate Info - Flex Row for Name + Avatar */
    body .applicants-job .candidate-info {
        width: 100%;
    }

    body .applicants-job .candidate-info .flex-middle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    body .applicants-job .candidate-info-content {
        order: 1;
        flex: 1;
        min-width: 0;
        margin-right: 12px;
    }

    /* Icons/Avatar on Right */
    body .applicants-job .candidate-initials-inline {
        order: 2;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Hide candidate profile photo on mobile */
    body .applicants-jobs-page .candidate-logo {
        display: none;
    }

    /* 8. Action Buttons (Zatwierdź/Odrzuć) - Under Name */
    body .applicants-job .ali-right {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        right: auto;
        top: auto;
    }

    /* Smaller Action Icons */
    body .applicants-job .btn-action-icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }

    body .applicants-job .btn-action-icon i {
        font-size: 12px;
        line-height: 30px;
    }

    body .applicants-job .applicant-action-button {
        justify-content: flex-start;
    }

    body .applicants-job .inner-result {
        justify-content: center;
    }

    /* FIX: Job title hidden by parent theme on mobile - override display:none */
    body .applicants-job .job-metas .job-title {
        display: block !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        font-size: 12px !important;
        padding: 5px 0 !important;
    }

    body .applicants-job .job-metas .job-title a {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: var(--color-text-primary, #1f2937) !important;
        background-clip: unset !important;
        color: var(--color-text-primary, #1f2937) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* ==========================================================================
   OVERRIDES - Remove all gray 1px borders and reduce spacing
   ========================================================================== */

/* Remove border from heading cloud */
body .applicants-jobs-page .job-applicants .heading {
    border: none;
}

/* Remove border-top from applicants-wrapper */
body .applicants-jobs-page .job-applicants .applicants-wrapper,
body .applicants-jobs-page .applicants-wrapper,
body .applicants-job .applicants-wrapper {
    border-top: none;
    border: none;
    padding-top: 0;
    margin-top: 0;
}

/* Remove border from applicants-inner container */
body .applicants-jobs-page .applicants-inner,
body .applicants-job .applicants-inner {
    border: none;
    padding: 0;
}

/* Remove borders from candidate cards - keep only shadow */
body .applicants-jobs-page .applicants-job.job-applicant-wrapper,
body .applicants-job .applicants-inner .applicants-job {
    border: none;
}

/* Remove border-top from notes section */
body .applicants-jobs-page .applicants-notes,
body .applicants-job .applicants-notes {
    border-top: none;
}

/* Reduce spacing - bring header closer to cards */
body .applicants-jobs-page .job-applicants {
    margin-bottom: 8px;
    border: none;
    padding-top: 10px;
}

body .applicants-jobs-page .job-applicants .heading {
    margin-bottom: 8px;
}

/* Reduce spacing between cards */
body .applicants-jobs-page .applicants-job.job-applicant-wrapper,
body .applicants-job .applicants-inner .applicants-job {
    margin-bottom: 8px;
}

/* Remove border-bottom from inner-result */
body .applicants-jobs-page .job-applicants .inner-result,
body .job-applicants .inner-result {
    border-bottom: none;
    border: none;
}

/* ==========================================================================
   PAGINATION - Styled like my-jobs
   ========================================================================== */

body .applicants-jobs-page .pagination,
body .applicants-jobs-page .apus-pagination,
body .applicants-job .pagination,
body .applicants-job .apus-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0 0 0;
    padding: 16px 0 0 0;
    border-top: none;
    flex-wrap: wrap;
    width: auto;
    text-align: center;
    border-radius: 0;
}

body .applicants-jobs-page .pagination li,
body .applicants-jobs-page .apus-pagination li,
body .applicants-job .pagination li,
body .applicants-job .apus-pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .applicants-jobs-page .pagination .page-numbers,
body .applicants-jobs-page .pagination li a,
body .applicants-jobs-page .pagination li span,
body .applicants-jobs-page .apus-pagination .page-numbers,
body .applicants-job .pagination .page-numbers,
body .applicants-job .pagination li a,
body .applicants-job .pagination li span,
body .applicants-job .apus-pagination .page-numbers {
    min-width: 32px;
    height: 32px;
    width: auto;
    padding: 0 10px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-500, #6b7280);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}

body .applicants-jobs-page .pagination .page-numbers:hover,
body .applicants-jobs-page .pagination li a:hover,
body .applicants-jobs-page .apus-pagination .page-numbers:hover,
body .applicants-job .pagination .page-numbers:hover,
body .applicants-job .pagination li a:hover,
body .applicants-job .apus-pagination .page-numbers:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-text-primary, #1f2937);
}

body .applicants-jobs-page .pagination .page-numbers.current,
body .applicants-jobs-page .pagination li span.current,
body .applicants-jobs-page .apus-pagination .page-numbers.current,
body .applicants-job .pagination .page-numbers.current,
body .applicants-job .pagination li span.current,
body .applicants-job .apus-pagination .page-numbers.current {
    background: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

body .applicants-jobs-page .pagination .page-numbers.dots,
body .applicants-jobs-page .apus-pagination .page-numbers.dots,
body .applicants-job .pagination .page-numbers.dots,
body .applicants-job .apus-pagination .page-numbers.dots {
    background: transparent;
    padding: 0 4px;
    min-width: auto;
}

body .applicants-jobs-page .pagination .page-numbers.prev,
body .applicants-jobs-page .pagination .page-numbers.next,
body .applicants-jobs-page .apus-pagination .page-numbers.prev,
body .applicants-jobs-page .apus-pagination .page-numbers.next,
body .applicants-job .pagination .page-numbers.prev,
body .applicants-job .pagination .page-numbers.next,
body .applicants-job .apus-pagination .page-numbers.prev,
body .applicants-job .apus-pagination .page-numbers.next {
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
}

body .applicants-jobs-page .pagination .page-numbers.prev:hover,
body .applicants-jobs-page .pagination .page-numbers.next:hover,
body .applicants-jobs-page .apus-pagination .page-numbers.prev:hover,
body .applicants-jobs-page .apus-pagination .page-numbers.next:hover,
body .applicants-job .pagination .page-numbers.prev:hover,
body .applicants-job .pagination .page-numbers.next:hover,
body .applicants-job .apus-pagination .page-numbers.prev:hover,
body .applicants-job .apus-pagination .page-numbers.next:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-primary, #1f2937);
}
.sidebar.sidebar-left .close-sidebar-btn {
    text-align: left;
    color: var(--core-theme-color);
    border-radius: 8px;
    padding: 4px 15px;
    margin: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
}

.sidebar.sidebar-right .close-sidebar-btn {
    text-align: right;
}

.sidebar .close-sidebar-icon {
    padding-right: 10px;
}
.single-listing-wrapper .list-content-job .job-detail-detail,
.single-listing-wrapper .list-content-job .job-detail-description,
.single-listing-wrapper .list-content-job .job-detail-duties,
.single-listing-wrapper .list-content-job .job-detail-must-have,
.single-listing-wrapper .list-content-job .job-detail-nice-to-have {
    background-color: var(--white-color);
    border-radius: var(--border-radius-standard);
    padding: 24px;
    box-shadow: var(--box-shadow-standard);
    margin-bottom: 20px;
}

.single-listing-wrapper .list-content-job h3.title {
    font-size: 20px;
    font-weight: 700;
}

.single-listing-wrapper .list-content-job h4.title {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
}

.single-listing-wrapper .list-content-job h4.title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.7em;
    width: 100%;
    height: 11px;
    background-color: var(--accent-color);
    border-radius: 1px;
}

.single-listing-wrapper .list-content-job>p {
    font-size: 12px;
}

/* background wewnetrzny singlejob 5 */
.job-single-v5 .content-job-detail {
    background-color: #F5F5F7;
}
/* Override parent theme .job-list styles - neutralize */
.job-list {
  transition: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  position: static !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1200px) {
  .job-list {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
}

.items-wrapper-list {
  display: grid;
}
.items-wrapper-list.columns-2 {
  grid-template-columns: 1fr 1fr;
}
.items-wrapper-list.columns-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.items-wrapper-list.columns-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.items-wrapper-list::before {
  display: none;
}
.items-wrapper-list .item-job {
  width: 100%;
}

.job-title {
  font-weight: 700;
  line-height: 1.3;
}
.job-list-content .job-employer-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 5px;
}

.job-salary {
  font-weight: 700;
}

@media (max-width: 768px) {
  .items-wrapper-list,
  .items-wrapper-list.columns-2,
  .items-wrapper-list.columns-3,
  .items-wrapper-list.columns-4 {
    grid-template-columns: auto;
  }
  .job-list-content .title-wrapper > * {
    display: inline-block;
    vertical-align: text-bottom;
    margin-bottom: 0;
    margin-left: 0;
  }
}

.widget-job-search-form  .selected-category-text {
  font-weight: 400;
}

/* Company Row Desktop */
.rj-company-row.rj-desktop-only {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 5px;
}

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

.rj-company-name-link {
    color: #333;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
}

.rj-company-profile-link-header {
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    font-weight: 400;
    line-height: 1.2;
}

/* Meta Items */
.rj-desktop-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

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

.rj-meta-item i {
    color: #666;
}

.rj-meta-item a {
    color: inherit;
    text-decoration: none;
}

/* Desktop Badges */
.rj-desktop-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rj-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Mobile Company Row */
.rj-mobile-company-row h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.rj-mobile-company-row a {
    font-size: 12px;
    color: #999;
    text-decoration: underline;
    font-weight: 400;
}

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

body .rj-mobile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    align-items: center;
}

body .rj-meta-pill {
    display: inline-flex;
    width: auto;
    align-items: center;
    background: #f4f5f7;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    vertical-align: middle;
}

.rj-meta-pill i {
    color: #666;
    font-size: 13px;
    margin-right: 4px;
}

.rj-meta-pill a {
    color: inherit;
    text-decoration: none;
}

/* Mobile Badges */
body .rj-mobile-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    align-items: center;
}

body .rj-badge-gold {
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(135deg, #FFEB3B 0%, #FFC107 100%);
    color: #222;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

body .rj-badge-violet {
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(135deg, #9c4dcc 0%, #6a1b9a 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(106, 27, 154, 0.4);
}

/* Tiles Internal Styles */
body .rj-tile-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1.2;
}

body .rj-tile-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2px;
}

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

.rj-tile-value-sub {
    display: block;
    font-size: 13px;
    color: inherit;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

/* Company Section */
.rj-cs-row-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.rj-cs-logo {
    margin-right: 0;
}

.rj-cs-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rj-cs-info h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.rj-company-link-profile {
    font-size: 13px;
    color: #333;
    text-decoration: underline;
    font-weight: 500;
}

.rj-employer-desc-excerpt {
    margin-bottom: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* Apply Fast Card Header */
.rj-af-action-btn.rj-share-btn {
    cursor: pointer;
}

.rj-share-item {
    cursor: pointer;
}

/* Action Button Saved */
.btn-action-job.added {
    color: var(--superio-theme-color);
}

.rj-tile-value-sub {
    display: block;
    font-size: 13px;
    color: inherit;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

.btn-follow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.btn-follow i {
    font-size: 17px;
}

.rj-mb-20 {
    margin-bottom: 20px;
}

.rj-mt-30 {
    margin-top: 30px;
}
/* Packages Redesign - Cloud Style, Shiny Buttons, 4-Col Grid */

.packages-redesign-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    gap: 16px;
}

/* --- 4-Column Grid Layout --- */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}

@media (max-width: 1200px) {
    .pkg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .pkg-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================================
   FREE PACKAGE - Compact V2 Style
   =============================================== */

.pkg-horizontal-free {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 12px 20px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pkg-horizontal-free:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.15);
}

.pkg-free-left {
    min-width: 180px;
    text-align: center;
    flex-shrink: 0;
}

.pkg-free-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pkg-free-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e1e2f;
    margin: 0;
}

.pkg-badge-free {
    background: #e0f2fe;
    color: #0284c7;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.pkg-free-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Free package button - compact */
.pkg-horizontal-free .pkg-submit-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.pkg-horizontal-free .pkg-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.pkg-horizontal-free .pkg-submit-btn.disabled,
.pkg-horizontal-free .pkg-submit-btn:disabled {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.pkg-free-msg {
    font-size: 11px;
    color: #666;
    margin-top: 6px;
    line-height: 1.3;
}

/* Mobile adjust for free package */
@media (max-width: 768px) {
    .pkg-horizontal-free {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 14px;
    }

    .pkg-free-left {
        width: 100%;
        order: 2;
    }

    .pkg-free-right {
        flex-direction: column;
        gap: 8px;
    }
}

/* Free package features - horizontal compact layout */
.pkg-features-free {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

.pkg-features-free .pkg-feature-item {
    padding: 3px 6px;
    font-size: 11px;
}

.pkg-features-free .pkg-feature-check {
    width: 14px;
    height: 14px;
}

.pkg-features-free .pkg-feature-text {
    font-size: 11px;
}

.pkg-features-free .pkg-feature-info {
    width: 12px;
    height: 12px;
}

.pkg-features-free .pkg-feature-info i {
    font-size: 10px;
}

/* ===============================================
   PRICING CARDS V2 - New Redesign
   =============================================== */

/* Card V2 - Gradient Border Effect using border-image */
.pkg-card-v2 {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 16px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #BE22FF 0%, #aa00ff 50%, #74D6CE 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* NO HOVER EFFECT (Movement), but need z-index for tooltips */
.pkg-card-v2:hover {
    z-index: 1000;
}

/* Badge V2 */
.pkg-badge-v2 {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #1e1e2f 0%, #2d2d44 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Title V2 */
.pkg-title-v2 {
    font-size: 16px !important;
    font-weight: 700;
    color: #1e1e2f;
    margin: 0 0 4px 0;
    text-align: center;
    line-height: 1.2;
}

/* Price Section V2 */
.pkg-price-section-v2 {
    text-align: center;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.pkg-price-row-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pkg-old-price-v2 {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

.pkg-savings-v2 {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 12px;
}

.pkg-savings-v2.hidden {
    display: none;
}

.pkg-current-price-v2 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.pkg-card-v2 .pkg-price-display {
    font-size: 24px;
    font-weight: 800;
    color: #1e1e2f;
    line-height: 1;
}

.pkg-currency {
    font-size: 14px;
    font-weight: 600;
    color: #1e1e2f;
}

.pkg-price-netto-v2 {
    font-size: 12px;
    color: #6b7280;
}

.pkg-netto-amount {
    font-weight: 600;
}

/* Submit Button V2 */
.pkg-submit-btn-v2 {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: #74D6CE;
    color: #fff;
    box-shadow: 0 4px 10px rgba(116, 214, 206, 0.4);
    text-transform: none;
    letter-spacing: 0;
}

.pkg-submit-btn-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shiny-infinite 3s infinite;
    z-index: 1;
}

.pkg-submit-btn-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(116, 214, 206, 0.5);
}

.pkg-submit-btn-v2:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(116, 214, 206, 0.4);
}

/* Quantity Controls V2 - Enhanced styling keeping functionality */
.pkg-card-v2 .qty-local-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
}

.pkg-card-v2 .pkg-btn-minus,
.pkg-card-v2 .pkg-btn-plus {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #BE22FF;
    background: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    color: #BE22FF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.pkg-card-v2 .pkg-btn-minus:hover,
.pkg-card-v2 .pkg-btn-plus:hover {
    background: #BE22FF;
    color: #fff;
}

.pkg-card-v2 .pkg-qty-display {
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
    text-align: center;
    color: #1e1e2f;
}

/* Features V2 */
.pkg-features-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.pkg-feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fafafa;
    border-radius: 6px;
    position: relative;
}

.pkg-feature-item:hover {
    z-index: 99999;
}


.pkg-feature-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkg-feature-check svg {
    width: 10px;
    height: 10px;
}

.pkg-feature-text {
    flex: 1;
    font-size: 11px;
    color: #374151;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.pkg-feature-info {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    cursor: help;
    transition: color 0.2s ease;
    position: relative;
}

.pkg-feature-info i {
    font-size: 12px;
}

.pkg-feature-info:hover {
    color: #BE22FF;
}

/* Tooltip for feature info */
.pkg-feature-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2f;
    color: #fff;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    width: 200px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.pkg-feature-info-arrow {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e1e2f;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99999;
}

.pkg-feature-info:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Card with badge needs extra top padding */
.pkg-card-v2.pkg-card-recommended {
    padding-top: 48px;
}

/* Responsive adjustments for V2 cards */
@media (max-width: 768px) {
    .pkg-card-v2 {
        padding: 20px 16px;
    }

    .pkg-card-v2.pkg-card-recommended {
        padding-top: 44px;
    }

    .pkg-title-v2 {
        font-size: 18px !important;
    }

    .pkg-card-v2 .pkg-price-display {
        font-size: 28px;
    }

    .pkg-feature-info::after {
        width: 160px;
        left: auto;
        right: 0;
        transform: none;
    }

    .pkg-feature-info::before {
        left: auto;
        right: 8px;
        transform: none;
    }
}

/* ===============================================
   NEW SECTIONS: Header, Slider, Banner, Clouds
   =============================================== */

/* --- Header Section --- */
.pkg-header-section {
    text-align: center;
    margin-bottom: 24px;
}

.pkg-main-header {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #1e1e2f;
    line-height: 1.2;
}

/* Gradient Text Helper */
.gradient-text {
    background: linear-gradient(135deg, #BE22FF 0%, #aa00ff 50%, #74D6CE 100%);
    -webkit-background-clip: text;
    /* Safari/Chrome */
    background-clip: text;
    color: transparent;
    display: inline-block;
    /* Helps with gradient clipping */
}

.gradient-text-orange {
    /* Using requested Orange/Red for "procesy rekrutacyjne?" */
    background: linear-gradient(135deg, #ff4757 0%, #ffa502 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* --- Trusted Slider Wrapper --- */
.pkg-trusted-slider-wrapper {
    margin: 0 auto 30px auto;
    max-width: 900px;
}

/* Overrides for shared slider component to fit here */
.pkg-trusted-slider-wrapper .header-trusted-slider {
    background: transparent;
    padding: 10px 0;
    box-shadow: none;
    border-bottom: none;
}

.pkg-trusted-slider-wrapper .trusted-label {
    display: none;
    /* Hide standard label if not wanted, or keep it */
}


/* --- Recruitment Banner --- */
.pkg-banner-recruitment {
    width: 100%;
    border-radius: 20px;
    background: #000;
    color: #fff;
    padding: 40px;
    margin-top: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.pkg-banner-content {
    display: flex;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.pkg-banner-text {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.pkg-banner-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}

.pkg-banner-desc {
    font-size: 14px;
    color: #d1d5db;
    /* Light gray */
    line-height: 1.5;
    margin-bottom: 30px;
}

.pkg-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pkg-phone-label {
    font-size: 15px;
    color: #fff;
}

.pkg-phone-label strong {
    color: #fff;
    font-weight: 700;
}

.pkg-btn-white {
    background: #fff;
    color: #000;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
    font-size: 14px;
}

.pkg-btn-white:hover {
    transform: translateY(-2px);
    background: #f3f3f3;
}

/* --- Why Us / Clouds Section --- */
.pkg-clouds-section {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.pkg-clouds-header {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e1e2f;
}

.pkg-clouds-subheader {
    font-size: 14px;
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.5;
}

.pkg-clouds-grid {
    display: grid;
    /* Grid cols: 1.2fr (Left) | 1fr (Right Left) | 1fr (Right Right) */
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto;
    /* Two almost equal rows */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

/* Card General Styles */
.cloud-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.cloud-card:hover {
    transform: translateY(-3px);
}

/* 1. Large Card (Left) */
.cloud-card-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* Spans both rows */
    background: linear-gradient(135deg, #BE22FF 0%, #aa00ff 50%, #74D6CE 100%);
    color: #fff;
}

.cloud-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.cloud-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 24px;
    opacity: 0.95;
}

/* Visual Tree Mockup */
.cloud-visual-tree {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Align to bottom */
}

.cloud-btn-mock {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
}

.tree-connections {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.tree-line.main-line {
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: -2px;
    z-index: 1;
}

.tree-nodes {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-top: 10px;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.tree-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.tree-node img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tree-node.center-node {
    width: 50px;
    height: 50px;
    transform: translateY(10px);
    margin-top: 10px;
}


/* 2. Stat Cards (White) */
.cloud-card-stat {
    align-items: flex-start;
    justify-content: center;
    min-height: 160px;
}

.cloud-stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #1e1e2f;
    margin-bottom: 8px;
}

.cloud-stat-text {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.cloud-icon-eye {
    font-size: 24px;
    color: #3b82f6;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 50%;
}

.cloud-heart-visual {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #fff, #f472b6, #BE22FF);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(190, 34, 255, 0.3);
}

/* 3. Dark Card */
.cloud-card-dark {
    background: #111;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-icons-cloud {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    opacity: 0.8;
}

.soc-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.soc-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.soc-icon i {
    font-size: 16px;
    color: #fff;
}


.cloud-stat-number.white-text {
    color: #fff;
}

.cloud-stat-text.grey-text {
    color: #9ca3af;
}

/* Responsive Grid */
@media (max-width: 992px) {
    .pkg-clouds-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .cloud-card-large {
        grid-column: 1 / 3;
        /* Full width top */
        grid-row: auto;
        min-height: 300px;
    }
}

@media (max-width: 576px) {
    .pkg-clouds-grid {
        grid-template-columns: 1fr;
    }

    .cloud-card-large {
        grid-column: 1 / 2;
    }

    .pkg-main-header {
        font-size: 26px;
    }

    .pkg-banner-title {
        font-size: 24px;
    }

    .pkg-banner-recruitment {
        padding: 24px;
    }
}
/* ==========================================================================
   MY JOBS PAGE - Cloud Style Redesign

   Refactored: 2026-01-22
   - Removed all !important declarations
   - Using body prefix for specificity instead
   - Using CSS variables from design system
   ========================================================================== */

/* Main Container - Cloud Style */
body .my-job-employer {
    background: transparent;
    padding: 0;
    box-shadow: none;
    margin-right: 20px;
}

/* Desktop only: margin-top */
@media (min-width: 768px) {
    body .my-job-employer {
        margin-top: 100px;
    }
}

body .my-job-employer .widget-title {
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 20px;
    padding: 0;
    margin-left: 24px;
}

/* Dashboard Section Header - same margins as widget-title */
body .my-job-employer .dashboard-section-header {
    margin-left: 24px;
    margin-bottom: 20px;
}

/* Hide sort dropdown */
body .my-job-employer .sort-my-jobs-form {
    display: none;
}

/* Mobile sidebar button - match job card margin */
body .my-job-employer .mobile-sidebar-btn,
body .mobile-sidebar-btn {
    margin-left: 24px;
}

/* Box Dashboard Wrapper - Widget Title - Hidden */
body .box-dashboard-wrapper>.widget-title {
    display: none !important;
}

/* Inner List Container - Cloud Card */
body .my-job-employer .inner-list {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
    padding: 24px;
    overflow: hidden;
}

/* ==========================================================================
   Search & Sort Controls
   ========================================================================== */

body .my-job-employer .search-orderby-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Search Form - Half width on desktop */
body .my-job-employer .search-my-jobs-form {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 50%;
    width: 50%;
}

/* Reset default search-applicants-form styles */
body .my-job-employer .search-applicants-form {
    border: none;
    background-color: transparent;
}

body .my-job-employer .search-my-jobs-form .flex-middle {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: var(--color-bg-primary, #fff);
    border-radius: 50px;
    padding: 4px;
    border: 1px solid var(--color-border-default, #e5e7eb);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
}

body .my-job-employer .search-my-jobs-form .flex-middle:focus-within {
    border-color: var(--color-primary, #2DD4BF);
}

body .my-job-employer .search-my-jobs-form .btn-search,
body .my-job-employer .search-my-jobs-form button.search-submit,
body .my-job-employer .search-my-jobs-form button[type="submit"] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--color-primary, #2DD4BF) !important;
    border: none;
    color: var(--color-white, #fff);
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

body .my-job-employer .search-my-jobs-form .btn-search:hover,
body .my-job-employer .search-my-jobs-form button.search-submit:hover {
    background: var(--color-primary-dark, #14b8a6);
}

body .my-job-employer .search-my-jobs-form .btn-search i,
body .my-job-employer .search-my-jobs-form button.search-submit i,
body .my-job-employer .search-my-jobs-form button[type="submit"] i {
    font-size: 14px;
    color: #fff !important;
    display: block;
    line-height: 1;
}

body .my-job-employer .search-my-jobs-form .form-control {
    border: none;
    background: transparent;
    padding: 8px 12px 8px 16px;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

body .my-job-employer .search-my-jobs-form .form-control:focus {
    outline: none;
    box-shadow: none;
}

/* Sort Form */
body .my-job-employer .sort-my-jobs-form .orderby-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

body .my-job-employer .sort-my-jobs-form .text-sort {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}

body .my-job-employer .sort-my-jobs-form .orderby {
    appearance: none;
    background: var(--color-gray-50, #f9fafb) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239ca3af%27 stroke-width=%272%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: 50px;
    padding: 8px 36px 8px 16px;
    font-size: 13px;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
    transition: border-color 0.2s;
}

body .my-job-employer .sort-my-jobs-form .orderby:hover,
body .my-job-employer .sort-my-jobs-form .orderby:focus {
    border-color: var(--color-primary, #2DD4BF);
    outline: none;
}

/* ==========================================================================
   Job Table - Minimalist Cloud Style
   ========================================================================== */

body .my-job-employer .table-responsive {
    overflow-x: auto;
    padding: 0 24px;
}

body .my-job-employer .job-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin-top: -12px;
}

/* Table Header */
body .my-job-employer .job-table thead th {
    background: #fff;
    border: none;
    padding: 16px 16px;
    font-size: 11px;
    font-weight: 200;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

body .my-job-employer .job-table thead tr {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body .my-job-employer .job-table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-left: 20px;
}

body .my-job-employer .job-table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-right: 20px;
}

/* Table Body - Cloud Cards */
body .my-job-employer .job-table tbody tr {
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}

body .my-job-employer .job-table tbody tr:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

body .my-job-employer .job-table tbody td {
    padding: 16px;
    border-bottom: none;
    vertical-align: middle;
    font-size: 14px;
    background: var(--color-bg-primary, #fff);
}

body .my-job-employer .job-table tbody td:first-child {
    padding-left: 20px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

body .my-job-employer .job-table tbody td:last-child {
    padding-right: 20px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* ==========================================================================
   Job Info Cell (First Column)
   ========================================================================== */

body .my-job-employer .job-table-info {
    min-width: 280px;
}

body .my-job-employer .job-table-info-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body .my-job-employer .job-table-info-content .title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body .my-job-employer .job-table-info-content-title {
    font-size: 15px;
    font-weight: var(--font-weight-medium, 500);
    margin: 0;
    line-height: 1.3;
}

body .my-job-employer .job-table-info-content-title a {
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.15s;
}

body .my-job-employer .job-table-info-content-title a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* Badges - Featured & Urgent */
body .my-job-employer .job-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
}

body .my-job-employer .job-badge-featured {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: var(--color-text-primary, #1f2937);
}

body .my-job-employer .job-badge-urgent {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: var(--color-white, #fff);
}

body .my-job-employer .job-badge-filled {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

/* Status Badge - shown in badges wrapper on mobile */
body .my-job-employer .job-badge-status {
    display: none;
}

body .my-job-employer .job-badge-status.publish {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .my-job-employer .job-badge-status.expired {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .my-job-employer .job-badge-status.pending,
body .my-job-employer .job-badge-status.pending_approve {
    background: var(--color-warning-bg, #fef3c7);
    color: #92400e;
}

body .my-job-employer .job-badge-status.pending_payment {
    background: #e0e7ff;
    color: #3730a3;
}

body .my-job-employer .job-badge-status.draft,
body .my-job-employer .job-badge-status.preview {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-600, #4b5563);
}

/* Mobile Meta Row - hidden on desktop */
body .my-job-employer .mobile-meta-row {
    display: none;
}

/* Views Counter */
body .my-job-employer .job-views-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    font-weight: var(--font-weight-normal, 400);
    margin-left: 4px;
}

body .my-job-employer .job-views-counter i {
    font-size: 10px;
    color: var(--color-gray-300, #d1d5db);
}

/* Location Meta */
body .my-job-employer .job-metas {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}

body .my-job-employer .job-metas .job-location {
    font-size: 10px;
    color: var(--color-text-muted, #9ca3af);
}

body .my-job-employer .job-metas .job-location i {
    color: var(--color-gray-300, #d1d5db);
    margin-right: 3px;
    font-size: 10px;
}

body .my-job-employer .job-metas .job-location a {
    color: var(--color-gray-500, #6b7280);
    text-decoration: none;
}

body .my-job-employer .job-metas a:not([class]) {
    font-size: 13px;
}

body .my-job-employer .job-metas .job-location a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* ==========================================================================
   Applicants Column
   ========================================================================== */

body .my-job-employer .job-table-applicants {
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

body .my-job-employer .job-table-applicants .applicant-badge {
    display: inline-flex;
    align-items: center;
    background: #f3e8ff;
    color: #7c3aed;
    font-weight: var(--font-weight-medium, 500);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 50px;
}

body .my-job-employer .job-table-applicants .number {
    font-weight: var(--font-weight-bold, 700);
    color: #7c3aed;
    margin-right: 3px;
}

/* ==========================================================================
   Date Column
   ========================================================================== */

body .my-job-employer .job-table-info-content-date-expiry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
}

body .my-job-employer .job-table-info-content-date-expiry strong {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted, #9ca3af);
}

body .my-job-employer .job-table-info-content-date-expiry .text-danger {
    color: var(--color-error, #ef4444);
}

/* ==========================================================================
   Status Column
   ========================================================================== */

body .my-job-employer .job-table-status {
    white-space: nowrap;
}

body .my-job-employer .job-table-actions-inner {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
}

/* Status Colors */
body .my-job-employer .job-table-actions-inner.publish {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .my-job-employer .job-table-actions-inner.expired {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .my-job-employer .job-table-actions-inner.pending,
body .my-job-employer .job-table-actions-inner.pending_approve {
    background: var(--color-warning-bg, #fef3c7);
    color: #92400e;
}

body .my-job-employer .job-table-actions-inner.pending_payment {
    background: #e0e7ff;
    color: #3730a3;
}

body .my-job-employer .job-table-actions-inner.draft,
body .my-job-employer .job-table-actions-inner.preview {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-600, #4b5563);
}

/* ==========================================================================
   Actions Column
   ========================================================================== */

body .my-job-employer .job-table-actions {
    white-space: nowrap;
}

body .my-job-employer .job-table-actions .action-button {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Icon Buttons */
body .my-job-employer .action-button .btn-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border-default, #e5e7eb);
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
}

body .my-job-employer .action-button .btn-action-icon:hover {
    background: var(--color-primary, #2DD4BF);
    border-color: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

/* Delete Button - Red */
body .my-job-employer .action-button .remove-btn,
body .my-job-employer .action-button .job-button-delete {
    color: var(--color-error, #ef4444);
    border-color: #fecaca;
    background: #fef2f2;
}

body .my-job-employer .action-button .remove-btn:hover,
body .my-job-employer .action-button .job-button-delete:hover {
    background: var(--color-error, #ef4444);
    border-color: var(--color-error, #ef4444);
    color: var(--color-white, #fff);
}

/* Edit Button - Blue */
body .my-job-employer .action-button .edit-btn {
    color: var(--color-info, #3b82f6);
    border-color: #bfdbfe;
    background: #eff6ff;
}

body .my-job-employer .action-button .edit-btn:hover {
    background: var(--color-info, #3b82f6);
    border-color: var(--color-info, #3b82f6);
    color: var(--color-white, #fff);
}

/* End Button - Orange */
body .my-job-employer .action-button .end-btn {
    color: #f97316;
    border-color: #fed7aa;
    background: #fff7ed;
}

body .my-job-employer .action-button .end-btn:hover {
    background: #f97316;
    border-color: #f97316;
    color: var(--color-white, #fff);
}

/* Urgent Button - Purple */
body .my-job-employer .action-button .urgent-btn {
    color: #8b5cf6;
    border-color: #ddd6fe;
    background: #f5f3ff;
}

body .my-job-employer .action-button .urgent-btn:hover {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: var(--color-white, #fff);
}

/* Feature Button - Amber/Gold */
body .my-job-employer .action-button .feature-btn {
    color: #f59e0b;
    border-color: #fde68a;
    background: #fffbeb;
}

body .my-job-employer .action-button .feature-btn:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: var(--color-white, #fff);
}

/* Renew Button - Teal */
body .my-job-employer .action-button .renew-btn {
    color: var(--color-primary-dark, #14b8a6);
    border-color: #99f6e4;
    background: #f0fdfa;
}

body .my-job-employer .action-button .renew-btn:hover {
    background: var(--color-primary-dark, #14b8a6);
    border-color: var(--color-primary-dark, #14b8a6);
    color: var(--color-white, #fff);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

body .my-job-employer .pagination,
body .my-job-employer .apus-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0 0 0;
    padding: 16px 0 0 0;
    border-top: none;
    flex-wrap: wrap;
    width: auto;
    text-align: center;
    border-radius: 0;
}

body .my-job-employer .pagination li,
body .my-job-employer .apus-pagination li {
    margin: 0;
    padding: 0;
}

body .my-job-employer .pagination .page-numbers,
body .my-job-employer .pagination li a,
body .my-job-employer .pagination li span,
body .my-job-employer .apus-pagination .page-numbers {
    min-width: 32px;
    height: 32px;
    width: auto;
    padding: 0 10px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-500, #6b7280);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}

body .my-job-employer .pagination .page-numbers:hover,
body .my-job-employer .pagination li a:hover,
body .my-job-employer .apus-pagination .page-numbers:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-text-primary, #1f2937);
}

body .my-job-employer .pagination .page-numbers.current,
body .my-job-employer .pagination li span.current,
body .my-job-employer .apus-pagination .page-numbers.current {
    background: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

body .my-job-employer .pagination .page-numbers.dots,
body .my-job-employer .apus-pagination .page-numbers.dots {
    background: transparent;
    padding: 0 4px;
    min-width: auto;
}

body .my-job-employer .pagination .page-numbers.prev,
body .my-job-employer .pagination .page-numbers.next,
body .my-job-employer .apus-pagination .page-numbers.prev,
body .my-job-employer .apus-pagination .page-numbers.next {
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
}

body .my-job-employer .pagination .page-numbers.prev:hover,
body .my-job-employer .pagination .page-numbers.next:hover,
body .my-job-employer .apus-pagination .page-numbers.prev:hover,
body .my-job-employer .apus-pagination .page-numbers.next:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-text-primary, #1f2937);
}

/* Force pagination visibility on all devices */
body .inner-list .pagination,
body .inner-list ul.pagination,
body .box-dashboard-wrapper .pagination,
body .my-job-employer .inner-list~.pagination,
body .my-job-employer .inner-list~ul.pagination {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

body .my-job-employer .alert-warning {
    background: var(--color-warning-bg, #fef3c7);
    border: none;
    border-radius: 12px;
    padding: 24px;
    color: #92400e;
    text-align: center;
}

/* ==========================================================================
   Confirmation Modal
   ========================================================================== */

body #confirm-end-job-modal {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    padding: 32px;
    max-width: 400px;
    text-align: center;
}

body #confirm-end-job-modal .widget-title {
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 12px;
}

body #confirm-end-job-modal p {
    color: var(--color-gray-500, #6b7280);
    font-size: 14px;
    margin-bottom: 24px;
}

body #confirm-end-job-modal .btn-theme {
    background: linear-gradient(135deg, var(--color-error, #ef4444) 0%, #dc2626 100%);
    border: none;
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: var(--font-weight-medium, 500);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 991px) {
    body .my-job-employer .search-orderby-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    body .my-job-employer .search-my-jobs-form {
        max-width: 100%;
    }

    body .my-job-employer .sort-my-jobs-form {
        align-self: flex-end;
    }
}

@media (max-width: 767px) {

    /* Add margin-top to header on mobile */
    body .my-job-employer .widget-title,
    body .my-job-employer .dashboard-section-header {
        margin-top: 10px;
    }

    /* Remove mini border/shadow around container - full width */
    body .my-job-employer .inner-list {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        border: none;
    }

    body .my-job-employer .table-responsive {
        margin: 0;
        padding: 19px;
        border: none;
    }

    /* Remove any border/line around table */
    body .my-job-employer .job-table {
        border: none;
        border-collapse: collapse;
    }

    body .my-job-employer .job-table tbody {
        border: none;
    }

    body .my-job-employer .job-table thead {
        display: none;
    }

    /* Job row - full width card */
    body .my-job-employer .job-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 14px;
        margin-bottom: 8px;
        background: var(--color-bg-primary, #fff);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border: none;
    }

    body .my-job-employer .job-table tbody tr:last-child {
        margin-bottom: 0;
    }

    body .my-job-employer .job-table tbody td {
        display: block;
        padding: 0;
        border: none;
        width: 100%;
    }

    /* Row 1: Title - full width */
    body .my-job-employer .job-table-info {
        width: 100%;
        min-width: 0;
        order: 1;
    }

    /* Title wrapper - full width - override theme max-width */
    body .my-job-employer .job-table-info-content,
    body .my-job-employer .job-table div.job-table-info-content {
        max-width: none;
        width: 100%;
    }

    body .my-job-employer .job-table-info-content .title-wrapper {
        display: block;
        width: 100%;
        max-width: none;
        margin-bottom: 10px;
    }

    body .my-job-employer .job-table-info-content-title {
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        width: 100%;
        max-width: none;
        margin: 0;
        display: block;
        line-height: 1.4;
    }

    body .my-job-employer .job-table-info-content-title a {
        display: block;
        width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Row 2: Badges - ALL IN ONE LINE */
    body .my-job-employer .job-table-info-content>.badges-wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }

    /* Status badge inline with other badges */
    body .my-job-employer .job-table-status {
        order: 2;
        margin-top: 0;
        display: none;
    }

    /* Show status badge in badges wrapper on mobile */
    body .my-job-employer .job-badge-status {
        display: inline-flex;
    }

    body .my-job-employer .job-badge {
        padding: 2px 6px;
        font-size: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body .my-job-employer .job-views-counter {
        font-size: 9px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body .my-job-employer .job-views-counter i {
        font-size: 8px;
    }

    /* Hide location on mobile - too much info */
    body .my-job-employer .job-metas {
        display: none;
    }

    /* Row 3: Applicants count + Created date + Expiry - one line */
    body .my-job-employer .job-table-applicants {
        order: 3;
        display: inline-flex;
        align-items: center;
        margin-top: 8px;
        font-size: 11px;
        color: var(--color-gray-500, #6b7280);
    }

    body .my-job-employer .job-table-applicants .number {
        font-size: 11px;
        margin-right: 2px;
    }

    /* Date column - show inline */
    body .my-job-employer .job-table tbody td:nth-child(3) {
        order: 3;
        margin-top: 8px;
    }

    body .my-job-employer .job-table-info-content-date-expiry {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: 10px;
    }

    body .my-job-employer .job-table-info-content-date-expiry>div {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }

    body .my-job-employer .job-table-info-content-date-expiry strong {
        font-weight: var(--font-weight-medium, 500);
        font-size: 10px;
    }

    /* Hide renewed and type on mobile */
    body .my-job-employer .job-table-info-content-date-expiry .renewed,
    body .my-job-employer .job-table-info-content-date-expiry .type {
        display: none;
    }

    /* Hide desktop date column on mobile */
    body .my-job-employer .job-table tbody td:nth-child(3) {
        display: none;
    }

    /* Show purple applicant badge on mobile */
    body .my-job-employer .job-table-applicants {
        display: block;
        order: 3;
        margin-top: 12px;
    }

    body .my-job-employer .job-table-applicants .applicant-badge {
        font-size: 12px;
        padding: 5px 12px;
        margin-left: 14px;
    }

    body .my-job-employer .job-table-applicants .applicant-badge .number {
        font-size: 13px;
        font-weight: 700;
    }

    /* Show mobile meta row */
    body .my-job-employer .mobile-meta-row {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
        margin-top: 10px;
        font-size: 11px;
        color: var(--color-gray-500, #6b7280);
    }

    body .my-job-employer .mobile-meta-row .meta-item {
        white-space: nowrap;
    }

    body .my-job-employer .mobile-meta-row .meta-item strong {
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-primary, #2DD4BF);
        font-size: 13px;
    }

    /* Hide green applicant info - use purple badge instead */
    body .my-job-employer .mobile-meta-row .meta-applicants {
        display: none;
    }

    body .my-job-employer .mobile-meta-row .meta-separator {
        display: none;
    }

    body .my-job-employer .mobile-meta-row .text-danger {
        color: var(--color-error, #ef4444);
    }

    /* Row 4: Action icons - full width at bottom */
    body .my-job-employer .job-table-actions {
        order: 5;
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--color-gray-100, #f3f4f6);
    }

    body .my-job-employer .action-button {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-start;
        margin-left: 14px;
    }

    body .my-job-employer .action-button .btn-action-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Status badge - show as first badge */
    body .my-job-employer .job-table-actions-inner {
        padding: 2px 6px;
        font-size: 8px;
        display: none;
    }

    /* Pagination */
    body .my-job-employer .pagination,
    body .my-job-employer .apus-pagination {
        display: flex;
        margin-top: 16px;
        padding-top: 16px;
        gap: 4px;
    }

    body .my-job-employer .pagination .page-numbers,
    body .my-job-employer .pagination li a,
    body .my-job-employer .pagination li span,
    body .my-job-employer .apus-pagination .page-numbers {
        min-width: 28px;
        width: auto;
        height: 28px;
        font-size: 11px;
        padding: 0 6px;
    }

    /* Search & Sort */
    body .my-job-employer .search-orderby-wrapper {
        gap: 10px;
        margin-bottom: 14px;
        padding: 0 14px;
    }

    /* Full width search on mobile */
    body .my-job-employer .search-my-jobs-form {
        max-width: 100%;
        width: 100%;
    }

    body .my-job-employer .search-my-jobs-form .flex-middle {
        padding: 2px;
    }

    body .my-job-employer .search-my-jobs-form .btn-search,
    body .my-job-employer .search-my-jobs-form button.search-submit {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    body .my-job-employer .search-my-jobs-form .form-control {
        padding: 6px 10px 6px 12px;
        font-size: 13px;
    }

    body .my-job-employer .sort-my-jobs-form .orderby {
        padding: 6px 30px 6px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Hide Old Icons - Use Badges Instead
   ========================================================================== */

/* Hide SVG icons for featured/urgent - we use badges now */
body .my-job-employer .title-wrapper span[data-toggle="tooltip"] {
    display: none;
}
/* ==========================================================================
   MY APPLIED PAGE - Cloud Style for Candidate Applied Jobs

   Target: /my-applied/ (Moje aplikacje)
   Template: misc/jobs-applied.php

   Refactored: 2026-02-20
   - Cloud style with shadows
   - Smaller fonts
   - Styled table header
   ========================================================================== */

/* ==========================================================================
   MAIN CONTAINER - Cloud Card Style
   ========================================================================== */

/* Target the specific my-applied page structure */
body .box-dashboard-wrapper:has(.search-jobs-applied-form) {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-cloud, 0 10px 30px rgba(0, 0, 0, 0.08));
    padding: 24px;
    margin: 10px;
    margin-top: 100px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .title {
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 20px;
    padding: 0;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .inner-list {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ==========================================================================
   SEARCH FORM - Cloud Pill Style
   ========================================================================== */

/* Remove gray background and border from search wrapper */
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .search-orderby-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .search-orderby-wrapper::before,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .search-orderby-wrapper::after {
    display: none;
}

body .search-jobs-applied-form {
    max-width: 400px;
    margin-bottom: 20px;
    background: transparent;
}

body .search-jobs-applied-form .flex-middle {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: var(--color-bg-primary, #fff);
    border-radius: 50px;
    padding: 4px;
    border: 1px solid var(--color-border-default, #e5e7eb);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body .search-jobs-applied-form .flex-middle:focus-within {
    border-color: var(--color-primary, #2DD4BF);
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.15);
}

body .search-jobs-applied-form .btn-search {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: var(--color-primary, #2DD4BF) !important;
    border: none;
    color: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}

body .search-jobs-applied-form .btn-search:hover {
    background: var(--color-primary-dark, #14b8a6) !important;
}

body .search-jobs-applied-form .btn-search i {
    font-size: 13px;
    color: #fff !important;
}

body .search-jobs-applied-form .form-control {
    border: none;
    background: transparent;
    padding: 8px 12px 8px 16px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
}

body .search-jobs-applied-form .form-control:focus {
    outline: none;
    box-shadow: none;
}

/* Hide sort form (optional - keep minimal) */
body .sort-jobs-applied-form {
    display: none;
}

/* ==========================================================================
   JOB TABLE - Cloud Style with Shadows
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .table-responsive {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: -10px;
}

/* ==========================================================================
   TABLE HEADER - Cloud Pill Style
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table thead tr {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table thead th {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-left: 20px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-right: 20px;
}

/* ==========================================================================
   TABLE BODY - Cloud Card Rows
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody tr.job-applied-wrapper {
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody tr.job-applied-wrapper:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td {
    padding: 14px 16px;
    border-bottom: none;
    vertical-align: middle;
    font-size: 13px;
    background: var(--color-bg-primary, #fff);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:first-child {
    padding-left: 20px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:last-child {
    padding-right: 20px;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* ==========================================================================
   JOB INFO CELL - First Column
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .employer-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .employer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-content {
    flex: 1;
    min-width: 0;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .title-wrapper {
    margin-bottom: 4px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-title {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    margin: 0;
    line-height: 1.3;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-title a {
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.15s;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-title a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* Job Meta - Category & Location */
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-metas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-metas > div {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-metas i {
    font-size: 10px;
    color: var(--color-gray-300, #d1d5db);
    margin-right: 4px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-metas a {
    color: var(--color-gray-500, #6b7280);
    text-decoration: none;
    font-size: 11px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-metas a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* ==========================================================================
   DATE COLUMN
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:nth-child(2) {
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}

/* ==========================================================================
   STATUS COLUMN - Badge Style
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .application-status-label {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .application-status-label.approved {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .application-status-label.rejected {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .application-status-label.pending {
    background: var(--color-warning-bg, #fef3c7);
    color: #92400e;
}

/* ==========================================================================
   ACTION BUTTONS - Icon Style
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button {
    display: flex;
    align-items: center;
    gap: 6px;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border-default, #e5e7eb);
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
    text-decoration: none;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-action-icon:hover {
    transform: scale(1.1);
}

/* Delete/Remove Button - Red */
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-remove-job-applied,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .deleted {
    color: var(--color-error, #ef4444);
    border-color: #fecaca;
    background: #fef2f2;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-remove-job-applied:hover,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .deleted:hover {
    background: var(--color-error, #ef4444);
    border-color: var(--color-error, #ef4444);
    color: var(--color-white, #fff);
}

/* View Button - Teal */
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-action-icon:not(.deleted):not(.btn-remove-job-applied) {
    color: var(--color-primary, #2DD4BF);
    border-color: #99f6e4;
    background: #f0fdfa;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-action-icon:not(.deleted):not(.btn-remove-job-applied):hover {
    background: var(--color-primary, #2DD4BF);
    border-color: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

/* ==========================================================================
   PAGINATION - Cloud Style
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .apus-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0 0 0;
    padding: 16px 0 0 0;
    border-top: none;
    flex-wrap: wrap;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination .page-numbers,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination li a,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination li span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-500, #6b7280);
    font-size: 12px;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination .page-numbers:hover,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination li a:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-text-primary, #1f2937);
}

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination .page-numbers.current,
body .box-dashboard-wrapper:has(.search-jobs-applied-form) .pagination li span.current {
    background: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

body .box-dashboard-wrapper:has(.search-jobs-applied-form) .not-found {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
}

/* ==========================================================================
   RESPONSIVE - Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Remove border from table-responsive */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .table-responsive {
        border: none !important;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) {
        padding: 16px;
        margin: 0;
        border-radius: 0;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .title {
        font-size: 16px;
        margin-top: 10px;
    }

    body .search-jobs-applied-form {
        max-width: 100%;
    }

    /* Hide table header on mobile */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table thead {
        display: none;
    }

    /* Card layout for rows */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody tr.job-applied-wrapper {
        display: flex;
        flex-direction: column;
        padding: 14px;
        margin-bottom: 10px;
        border-radius: 14px;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td {
        display: block;
        padding: 0;
        border-radius: 0;
        width: 100%;
    }

    /* Job info - full width */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:first-child {
        padding: 0;
        margin-bottom: 10px;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied {
        flex-direction: row;
        align-items: flex-start;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .employer-logo {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-applied .job-title {
        font-size: 13px;
    }

    /* Date & Status inline row */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:nth-child(2),
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:nth-child(3) {
        display: inline-block;
        width: auto;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:nth-child(2) {
        font-size: 11px;
        padding-top: 4px;
    }

    /* Actions - full width at bottom */
    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .job-table tbody td:last-child {
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid var(--color-gray-100, #f3f4f6);
        margin-top: 4px;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button {
        justify-content: flex-start;
    }

    body .box-dashboard-wrapper:has(.search-jobs-applied-form) .action-button .btn-action-icon {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================================================
   CANDIDATE DASHBOARD - Applied Jobs Section
   Same styles as my-applied page
   ========================================================================== */

/* Cloud card container */
body .candidate-dashboard-applied,
body .inner-list.candidate-dashboard-applied {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 24px !important;
}

body .candidate-dashboard-applied .title-small {
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 16px;
    margin-top: 0;
}

/* Table styles */
body .candidate-dashboard-applied .table-responsive {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
    border: none;
}

body .candidate-dashboard-applied .job-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: -10px;
}

/* Table Header */
body .candidate-dashboard-applied .job-table thead tr {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body .candidate-dashboard-applied .job-table thead th {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

body .candidate-dashboard-applied .job-table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-left: 20px;
}

body .candidate-dashboard-applied .job-table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-right: 20px;
}

/* Table Body - Cloud Card Rows */
body .candidate-dashboard-applied .job-table tbody tr.job-applied-wrapper {
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}

body .candidate-dashboard-applied .job-table tbody tr.job-applied-wrapper:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

body .candidate-dashboard-applied .job-table tbody td {
    padding: 14px 16px;
    border-bottom: none;
    vertical-align: middle;
    font-size: 13px;
    background: var(--color-bg-primary, #fff);
}

body .candidate-dashboard-applied .job-table tbody td:first-child {
    padding-left: 20px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

body .candidate-dashboard-applied .job-table tbody td:last-child {
    padding-right: 20px;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Job Info Cell */
body .candidate-dashboard-applied .job-applied {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .candidate-dashboard-applied .job-applied .employer-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body .candidate-dashboard-applied .job-applied .employer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .candidate-dashboard-applied .job-applied .job-content {
    flex: 1;
    min-width: 0;
}

body .candidate-dashboard-applied .job-applied .title-wrapper {
    margin-bottom: 4px;
}

body .candidate-dashboard-applied .job-applied .job-title {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    margin: 0;
    line-height: 1.3;
}

body .candidate-dashboard-applied .job-applied .job-title a {
    color: var(--color-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.15s;
}

body .candidate-dashboard-applied .job-applied .job-title a:hover {
    color: var(--color-primary, #2DD4BF);
}

/* Job Meta */
body .candidate-dashboard-applied .job-applied .job-metas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body .candidate-dashboard-applied .job-applied .job-metas > div {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
}

body .candidate-dashboard-applied .job-applied .job-metas i {
    font-size: 10px;
    color: var(--color-gray-300, #d1d5db);
    margin-right: 4px;
}

body .candidate-dashboard-applied .job-applied .job-metas a {
    color: var(--color-gray-500, #6b7280);
    text-decoration: none;
    font-size: 11px;
}

/* Date Column */
body .candidate-dashboard-applied .job-table tbody td:nth-child(2) {
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}

/* Status Column */
body .candidate-dashboard-applied .application-status-label {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
}

body .candidate-dashboard-applied .application-status-label.approved {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-dark, #166534);
}

body .candidate-dashboard-applied .application-status-label.rejected {
    background: var(--color-error-bg, #fee2e2);
    color: var(--color-error-dark, #991b1b);
}

body .candidate-dashboard-applied .application-status-label.pending {
    background: var(--color-warning-bg, #fef3c7);
    color: #92400e;
}

/* Action Buttons */
body .candidate-dashboard-applied .action-button {
    display: flex;
    align-items: center;
    gap: 6px;
}

body .candidate-dashboard-applied .action-button .btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-border-default, #e5e7eb);
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
    text-decoration: none;
}

body .candidate-dashboard-applied .action-button .btn-action-icon:hover {
    transform: scale(1.1);
    background: var(--color-primary, #2DD4BF);
    border-color: var(--color-primary, #2DD4BF);
    color: var(--color-white, #fff);
}

/* Mobile Responsive */
@media (max-width: 767px) {
    body .candidate-dashboard-applied .job-table thead {
        display: none;
    }

    body .candidate-dashboard-applied .job-table tbody tr.job-applied-wrapper {
        display: flex;
        flex-direction: column;
        padding: 14px;
        margin-bottom: 10px;
        border-radius: 14px;
    }

    body .candidate-dashboard-applied .job-table tbody td {
        display: block;
        padding: 0;
        border-radius: 0;
        width: 100%;
    }

    body .candidate-dashboard-applied .job-table tbody td:first-child {
        padding: 0;
        margin-bottom: 10px;
    }

    body .candidate-dashboard-applied .job-applied .employer-logo {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    body .candidate-dashboard-applied .job-table tbody td:nth-child(2),
    body .candidate-dashboard-applied .job-table tbody td:nth-child(3) {
        display: inline-block;
        width: auto;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    body .candidate-dashboard-applied .job-table tbody td:nth-child(2) {
        font-size: 11px;
        padding-top: 4px;
    }

    body .candidate-dashboard-applied .job-table tbody td:last-child {
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid var(--color-gray-100, #f3f4f6);
        margin-top: 4px;
    }

    body .candidate-dashboard-applied .action-button .btn-action-icon {
        width: 30px;
        height: 30px;
    }
}

/* WooCommerce Notices Redesign */

/* wrapper adjustments */
.woocommerce-notices-wrapper {
    /* distinct stacking */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the notices since they will be fit-content */
    width: 100%;
}

/* Specific Checkout Wrapper Layout */
.woocommerce-checkout .woocommerce-notices-wrapper {
    width: 100%;
    padding-top: 20px;
    gap: 20px;
}

/* Common Toast/Cloud Style for notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    /* Cloud Style Base */
    background-color: #fff !important;
    /* Override default colors */
    border-top: none !important;
    /* Remove default colored top border */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Content Fit */
    width: fit-content;
    max-width: 90%;
    /* Prevent overflow on mobile */
    margin-bottom: 20px !important;
    /* Spacing handled by gap in checkout, but safe fallback */
    padding: 15px 30px !important;

    /* Text styling */
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Remove default icons styling constraints if needed */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
    /* Removing default pseudo-element icons if we want clean cloud or replace them */
}

/* Styling the button inside notices (e.g. "Zobacz koszyk") */
/* Styling the button inside notices (e.g. "Zobacz koszyk") */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notices-wrapper a.button {
    float: none !important;
    margin-left: 20px !important;
    background: linear-gradient(135deg, #a800ff 0%, #6600cc 100%);
    /* Match theme purple */
    color: #000 !important;
    border-radius: 35px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
    display: inline-block;
    line-height: 1.5;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-notices-wrapper a.button:hover {
    background: linear-gradient(135deg, #be4dff 0%, #7a14cc 100%);
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* GLOBAL FIX: Ensure all WooCommerce buttons get the rounded look if requested */
.woocommerce a.button {
    border-radius: 35px !important;
}

/* Specific border/accent colors if desired, or keep pure white? 
   User screenshot shows a green line. Let's replicate a subtle indicator or keep it clean.
   User asked for "wzór naszych chmurek", which are plain white with shadow. 
   I will keep them plain white but maybe add the checkmark icon back if requested.
   For now, clean cloud style. 
*/

/* Remove standard icons and colored borders */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-left: none !important;
}
/* WooCommerce Checkout Layout Redesign */

/* Override Theme's Global Container Constraints for Checkout Page */
.woocommerce-checkout #main-container.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.woocommerce-checkout #main-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.woocommerce-checkout #main-content.col-xs-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}

/* Main Checkout Wrapper - FULL WIDTH */
.woocommerce-checkout .woocommerce {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

form.checkout.woocommerce-checkout {
    width: 100%;
    padding-top: 20px;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    /* Ensure responsiveness */
}

/* 
   Ensure columns take appropriate width if they were strictly floated before.
   Common Woo Classes: #customer_details (col-1/2 set) and #order_review (col-2)
*/
form.checkout.woocommerce-checkout>div {
    /* If direct children are the columns, let them behave nicely in flex */
}

/* TARGETED FIX: Expand the inner bootstrap/grid row inside checkout */
/* Using body class to ensure specificity and covering potential nesting */
body.woocommerce-checkout .row.row-50,
.woocommerce-checkout .row.row-50,
.woocommerce-checkout .row {
    width: 100% !important;
    flex: 0 0 100% !important;
    /* Force flex child to take full width */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Kolumny checkout: dane do rachunku i twój pakiet */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Order totals table - more space for amounts */
.woocommerce-checkout #order_review .shop_table {
    width: 100% !important;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    white-space: nowrap !important;
    padding: 15px 10px !important;
}

.woocommerce-checkout .order-total td,
.woocommerce-checkout .cart-subtotal td {
    min-width: 200px !important;
    text-align: right !important;
}

/* Hide +/- buttons on checkout page */
.woocommerce-checkout .checkout-qty-control {
    display: none !important;
}

/* Hide breadcrumbs globally */
.apus-breadscrumb .wrapper-breads {
    display: none !important;
}

/* Hide product variation text */
.woocommerce td.product-name dl.variation p,
.woocommerce td.product-name dl.variation dt {
    display: none !important;
}

/* Back to cart button */
.woocommerce-checkout .zp-back-to-cart-wrap {
    text-align: center;
    margin-bottom: 24px;
}
.woocommerce-checkout .zp-back-to-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-primary, #2DD4BF);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--radius-pill, 50px);
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25);
}
.woocommerce-checkout .zp-back-to-cart-btn:hover {
    background-color: var(--color-primary-dark, #14b8a6);
    box-shadow: 0 6px 16px rgba(45, 212, 191, 0.35);
    color: #fff;
}
/* ==========================================================================
   WooCommerce Cart Redesign ("Cloud" Style)
   Refactored: Removed !important, using body prefix for specificity
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CONTAINER OVERRIDES
   Override Theme's Global Container Constraints for Cart Page
   --------------------------------------------------------------------------- */

body.woocommerce-cart #main-container.container,
body.woocommerce-cart #main-container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

body.woocommerce-cart #main-container > .row,
body.woocommerce-cart #main-container > .row-50,
body.woocommerce-cart .row.row-50 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
}

body.woocommerce-cart #main-content.col-xs-12,
body.woocommerce-cart #main-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    flex: 0 0 100%;
}

/* Reset any Bootstrap/theme columns that might add padding */
body.woocommerce-cart [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   MAIN CART WRAPPER LAYOUT
   --------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Flex container for cart form + collaterals */
body.woocommerce-cart .woocommerce > .row,
body.woocommerce-cart .woocommerce-notices-wrapper + .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure full width for the main container row */
body.woocommerce-cart .woocommerce .row {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   CART FORM (LEFT SECTION - Product Table)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce-cart-form {
    flex: 1;
    min-width: 0;
    background-color: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    border: none;
    margin: 0;
    float: none;
}

/* ---------------------------------------------------------------------------
   CART COLLATERALS (RIGHT SECTION - Summary Sidebar)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .cart-collaterals {
    width: 400px;
    flex: 0 0 400px;
    background-color: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    border: none;
    margin: 0;
    float: none;
    height: fit-content;
}

/* Inner cart_totals div */
body.woocommerce-cart .cart_totals {
    width: 100%;
    float: none;
}

/* ---------------------------------------------------------------------------
   SHOP TABLE STYLING
   --------------------------------------------------------------------------- */

body.woocommerce-cart .shop_table {
    border: none;
    border-radius: 0;
}

body.woocommerce-cart .shop_table th {
    background-color: transparent;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #333);
    border-bottom: 1px solid #eee;
}

body.woocommerce-cart .shop_table td {
    border-bottom: 1px solid #f5f5f5;
}

/* Table headers light weight */
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
    font-weight: 200;
}

/* Product quantity column width */
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-quantity {
    width: 150px;
    text-align: center;
}

/* Hide product thumbnail column */
body.woocommerce-cart .product-thumbnail,
body.woocommerce-cart th.product-thumbnail {
    display: none;
}

/* data-title labels on mobile (::before pseudo-element) */
body.woocommerce-cart .shop_table td::before {
    color: var(--color-text-primary, #1f2937);
    font-weight: var(--font-weight-semibold, 600);
}

/* Reset inner .quantity div inside custom qty control to prevent parent-theme square styling */
body.woocommerce-cart .cart-qty-control .quantity {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   CHECKOUT BUTTON
   --------------------------------------------------------------------------- */

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: linear-gradient(135deg, #a800ff 0%, #6600cc 100%);
    color: #fff;
    border-radius: 35px;
    box-shadow: 0 4px 10px rgba(168, 0, 255, 0.3);
    padding: 15px 30px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(168, 0, 255, 0.5);
    opacity: 0.95;
    background: linear-gradient(135deg, #be4dff 0%, #7a14cc 100%);
}

/* ---------------------------------------------------------------------------
   QUANTITY CONTROLS (+/- Buttons)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .cart-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary, #f9fafb);
    padding: 6px 8px;
    border-radius: 50px;
    border: 1px solid #f3f4f6;
    width: fit-content;
}

body.woocommerce-cart .cart-qty-control .qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: var(--color-bg-primary, #fff);
    cursor: pointer;
    font-weight: bold;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

body.woocommerce-cart .cart-qty-control .qty-btn:hover {
    background: var(--color-primary, #5EEAD4);
    color: white;
    border-color: var(--color-primary, #5EEAD4);
}

body.woocommerce-cart .cart-qty-control .quantity {
    margin: 0;
}

body.woocommerce-cart .cart-qty-control .zp-qty-input,
body.woocommerce-cart .cart-qty-control input.qty {
    width: 40px;
    min-width: 40px;
    text-align: center;
    font-weight: var(--font-weight-semibold, 600);
    border: none;
    background: transparent;
    font-size: 15px;
    -moz-appearance: textfield;
    padding: 0;
}

body.woocommerce-cart .cart-qty-control .zp-qty-input::-webkit-outer-spin-button,
body.woocommerce-cart .cart-qty-control .zp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE DESIGN
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
    body.woocommerce-cart .woocommerce > .row,
    body.woocommerce-cart .woocommerce-notices-wrapper + .row {
        flex-direction: column;
    }

    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals {
        width: 100%;
        flex: auto;
        max-width: 100%;
    }

    body.woocommerce-cart td.product-quantity {
        text-align: center;
    }

    body.woocommerce-cart .cart-qty-control {
        margin: 0 auto;
    }
}

/* ==========================================================================
   WooCommerce Cart Redesign ("Cloud" Style)
   Refactored: Removed !important, using body prefix for specificity
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CONTAINER OVERRIDES
   Override Theme's Global Container Constraints for Cart Page
   --------------------------------------------------------------------------- */

body.woocommerce-cart #main-container.container,
body.woocommerce-cart #main-container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

body.woocommerce-cart #main-container > .row,
body.woocommerce-cart #main-container > .row-50,
body.woocommerce-cart .row.row-50 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
}

body.woocommerce-cart #main-content.col-xs-12,
body.woocommerce-cart #main-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    flex: 0 0 100%;
}

/* Reset any Bootstrap/theme columns that might add padding */
body.woocommerce-cart [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   MAIN CART WRAPPER LAYOUT
   --------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Flex container for cart form + collaterals */
body.woocommerce-cart .woocommerce > .row,
body.woocommerce-cart .woocommerce-notices-wrapper + .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure full width for the main container row */
body.woocommerce-cart .woocommerce .row {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   CART FORM (LEFT SECTION - Product Table)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce-cart-form {
    flex: 1;
    min-width: 0;
    background-color: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    border: none;
    margin: 0;
    float: none;
}

/* ---------------------------------------------------------------------------
   CART COLLATERALS (RIGHT SECTION - Summary Sidebar)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .cart-collaterals {
    width: 400px;
    flex: 0 0 400px;
    background-color: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    border: none;
    margin: 0;
    float: none;
    height: fit-content;
}

/* Inner cart_totals div */
body.woocommerce-cart .cart_totals {
    width: 100%;
    float: none;
}

/* ---------------------------------------------------------------------------
   SHOP TABLE STYLING
   --------------------------------------------------------------------------- */

body.woocommerce-cart .shop_table {
    border: none;
    border-radius: 0;
}

body.woocommerce-cart .shop_table th {
    background-color: transparent;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #333);
    border-bottom: 1px solid #eee;
}

body.woocommerce-cart .shop_table td {
    border-bottom: 1px solid #f5f5f5;
}

/* Table headers light weight */
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
    font-weight: 200;
}

/* Product quantity column width */
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-quantity {
    width: 150px;
    text-align: center;
}

/* Hide product thumbnail column */
body.woocommerce-cart .product-thumbnail,
body.woocommerce-cart th.product-thumbnail {
    display: none;
}

/* data-title labels on mobile (::before pseudo-element) */
body.woocommerce-cart .shop_table td::before {
    color: var(--color-text-primary, #1f2937);
    font-weight: var(--font-weight-semibold, 600);
}

/* Reset inner .quantity div inside custom qty control to prevent parent-theme square styling */
body.woocommerce-cart .cart-qty-control .quantity {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   CHECKOUT BUTTON
   --------------------------------------------------------------------------- */

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: linear-gradient(135deg, #a800ff 0%, #6600cc 100%);
    color: #fff;
    border-radius: 35px;
    box-shadow: 0 4px 10px rgba(168, 0, 255, 0.3);
    padding: 15px 30px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(168, 0, 255, 0.5);
    opacity: 0.95;
    background: linear-gradient(135deg, #be4dff 0%, #7a14cc 100%);
}

/* ---------------------------------------------------------------------------
   QUANTITY CONTROLS (+/- Buttons)
   --------------------------------------------------------------------------- */

body.woocommerce-cart .cart-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary, #f9fafb);
    padding: 6px 8px;
    border-radius: 50px;
    border: 1px solid #f3f4f6;
    width: fit-content;
}

body.woocommerce-cart .cart-qty-control .qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: var(--color-bg-primary, #fff);
    cursor: pointer;
    font-weight: bold;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

body.woocommerce-cart .cart-qty-control .qty-btn:hover {
    background: var(--color-primary, #5EEAD4);
    color: white;
    border-color: var(--color-primary, #5EEAD4);
}

body.woocommerce-cart .cart-qty-control .quantity {
    margin: 0;
}

body.woocommerce-cart .cart-qty-control .zp-qty-input,
body.woocommerce-cart .cart-qty-control input.qty {
    width: 40px;
    min-width: 40px;
    text-align: center;
    font-weight: var(--font-weight-semibold, 600);
    border: none;
    background: transparent;
    font-size: 15px;
    -moz-appearance: textfield;
    padding: 0;
}

body.woocommerce-cart .cart-qty-control .zp-qty-input::-webkit-outer-spin-button,
body.woocommerce-cart .cart-qty-control .zp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE DESIGN
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
    body.woocommerce-cart .woocommerce > .row,
    body.woocommerce-cart .woocommerce-notices-wrapper + .row {
        flex-direction: column;
    }

    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals {
        width: 100%;
        flex: auto;
        max-width: 100%;
    }

    body.woocommerce-cart td.product-quantity {
        text-align: center;
    }

    body.woocommerce-cart .cart-qty-control {
        margin: 0 auto;
    }
}

/* ==========================================================================
   JOB SUBMISSION FORM - CLOUD STYLE REDESIGN
   Refactored: Using CSS variables, reduced !important usage
   ========================================================================== */

/* ============================================
   FORM CONTAINER - Cloud Card Wrapper
   ============================================ */
body .job-submission-form-wrapper,
body .job-submission-form-wrapper.box-dashboard-wrapper {
    background: var(--color-bg-dashboard, #F5F7FC);
    border-radius: var(--radius-xl, 20px);
    box-shadow: none;
    padding: 28px 10px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    box-sizing: border-box;
}

body .job-submission-form-wrapper form.cmb-form {
    margin: 0;
    padding: 0;
}

/* Override forms.css padding - use only wrapper padding */
body .job-submission-form-wrapper form.cmb-form div.cmb2-metabox > div,
body .job-submission-form-wrapper .before-group-row,
body .job-submission-form-wrapper .before-group-row-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body .job-submission-form-wrapper .cmb2-metabox {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

form.cmb-form .cmb2-metabox-title {
    display: none;
}

/* Form Title (legacy) */
body .job-submission-form-wrapper>h3.title,
body .job-submission-form-wrapper>.title {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 var(--spacing-5, 20px) 0;
    padding: 0 0 var(--spacing-4, 16px) 0;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

/* Dashboard Section Header - same style as /profile/ */
body .job-submission-form-wrapper .dashboard-section-header {
    margin-bottom: 20px;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

/* ============================================
   SECTION TITLES & HEADINGS
   ============================================ */
body .job-submission-form-wrapper h3,
body .job-submission-form-wrapper .cmb-row-title h3,
body .job-submission-form-wrapper .cmb-row.cmb-type-title h5.cmb2-metabox-title {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-muted, #9ca3af);
    margin: var(--spacing-6, 24px) 0 var(--spacing-3, 12px) 0;
    padding-bottom: var(--spacing-2, 8px);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
}

body .job-submission-form-wrapper .cmb-row.cmb-type-title {
    padding: 0;
    margin-bottom: var(--spacing-2, 8px);
}

/* ============================================
   LABELS - Light, Small, Elegant
   ============================================ */
body .job-submission-form-wrapper .cmb-th,
body .job-submission-form-wrapper .cmb-th label,
body .job-submission-form-wrapper form.cmb-form div.cmb2-metabox .cmb-th {
    font-size: 13px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 6px;
    padding: 0;
}

body .job-submission-form-wrapper .cmb-th label {
    display: block;
}

/* Required asterisk */
body .job-submission-form-wrapper .cmb-th .required-field,
body .job-submission-form-wrapper .cmb-th .text-danger {
    color: #f87171;
    font-weight: var(--font-weight-normal, 400);
}

/* ============================================
   FORM ROWS - Compact Spacing
   ============================================ */
body .job-submission-form-wrapper .cmb-row {
    padding: 10px 0;
    margin-bottom: 0;
    border: none;
}

body .job-submission-form-wrapper .cmb2-metabox>.cmb-row:first-child {
    padding-top: 0;
}

/* ============================================
   FLEXBOX LAYOUT - Correct Container Hierarchy
   ============================================ */
body .job-submission-form-wrapper .cmb2-metabox {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* Force section groups to take full width */
body .job-submission-form-wrapper .before-group-row {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Apply flex layout to inner group container */
body .job-submission-form-wrapper .before-group-row-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    width: 100%;
}

/* Default: all fields take full width */
body .job-submission-form-wrapper .cmb-row {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Force inputs to fill their column */
body .job-submission-form-wrapper .cmb-row input[type="text"],
body .job-submission-form-wrapper .cmb-row input[type="email"],
body .job-submission-form-wrapper .cmb-row input[type="url"],
body .job-submission-form-wrapper .cmb-row input[type="tel"],
body .job-submission-form-wrapper .cmb-row input[type="number"],
body .job-submission-form-wrapper .cmb-row select,
body .job-submission-form-wrapper .cmb-row .select2-container {
    width: 100%;
    max-width: 100%;
}

/* Fix input height to match Select2 */
body .job-submission-form-wrapper .cmb-row input[type="text"],
body .job-submission-form-wrapper .cmb-row input[type="email"],
body .job-submission-form-wrapper .cmb-row input[type="url"],
body .job-submission-form-wrapper .cmb-row input[type="tel"],
body .job-submission-form-wrapper .cmb-row input[type="number"] {
    height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.2;
}

/* ============================================
   ELEGANT SOFT SHADOW & UX
   ============================================ */
body .job-submission-form-wrapper .cmb-row input[type="text"],
body .job-submission-form-wrapper .cmb-row input[type="email"],
body .job-submission-form-wrapper .cmb-row input[type="url"],
body .job-submission-form-wrapper .cmb-row input[type="tel"],
body .job-submission-form-wrapper .cmb-row input[type="number"],
body .job-submission-form-wrapper .cmb-row select,
body .job-submission-form-wrapper .cmb-row textarea {
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.05));
    transition: var(--transition-slow, all 0.3s ease);
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-white, #ffffff);
    margin-top: 0;
}

/* Select2 styling */
body .job-submission-form-wrapper .cmb-row .select2-container .select2-selection,
body .job-submission-form-wrapper .select2-container .select2-selection,
body .job-submission-form-wrapper .select2-selection--single {
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.05));
    transition: var(--transition-slow, all 0.3s ease);
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-white, #ffffff);
    margin-top: 0;
    height: 44px;
    min-height: 44px;
}

body .job-submission-form-wrapper .select2-container .select2-selection .select2-selection__rendered {
    line-height: 42px;
    padding: 0 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    height: 42px;
}

/* TinyMCE / WYSIWYG */
body .job-submission-form-wrapper .wp-editor-wrap .wp-editor-container,
body .job-submission-form-wrapper .mce-tinymce {
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.05));
    transition: var(--transition-slow, all 0.3s ease);
    border: 1px solid var(--color-border-default, #e5e7eb);
    box-sizing: border-box;
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-white, #ffffff);
    overflow: hidden;
    margin-top: 6px;
}

/* Focus state */
body .job-submission-form-wrapper .cmb-row input:focus,
body .job-submission-form-wrapper .cmb-row select:focus,
body .job-submission-form-wrapper .cmb-row textarea:focus,
body .job-submission-form-wrapper .cmb-row .select2-container--open .select2-selection,
body .job-submission-form-wrapper .cmb-row .select2-selection:focus {
    box-shadow: 0 4px 20px rgba(45, 212, 191, 0.15);
    border-color: var(--color-primary, #2DD4BF);
}

/* ============================================
   3 COLUMNS (33% each) - Desktop Layout
   ============================================ */
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-category,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-type,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-type,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-url,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-currency,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-type,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-max-salary,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-experience,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-career-level,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-qualification,
body .job-submission-form-wrapper .cmb-row.cmb2-id-custom-number-32635225,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-video-url,
body .job-submission-form-wrapper .cmb-row.cmb2-id--job-auto-renewal {
    flex: 0 0 calc(33.333% - 14px);
    width: calc(33.333% - 14px);
}

/* ============================================
   FULL WIDTH (100%) - Explicit overrides
   ============================================ */
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-title,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-description,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-we-offer,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-duties,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-must-have,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-nice-to-have,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-location,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-logo,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-photos,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb-type-wp-job-board-pro-file,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb2-id--job-map-location,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb-type-pw-map,
body .job-submission-form-wrapper .cmb2-metabox .cmb-row.cmb-type-title {
    width: 100%;
    flex: 0 0 100%;
}

body .job-submission-form-wrapper textarea {
    width: 100%;
}

/* ============================================
   TEXT INPUTS - Rounded, Gentle
   ============================================ */
body .job-submission-form-wrapper input[type="text"],
body .job-submission-form-wrapper input[type="email"],
body .job-submission-form-wrapper input[type="url"],
body .job-submission-form-wrapper input[type="tel"],
body .job-submission-form-wrapper input[type="number"],
body .job-submission-form-wrapper input[type="password"] {
    width: 100%;
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: 12px 16px;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-primary, #1f2937);
    background: var(--color-white, #fff);
    transition: var(--transition-default, all 0.2s ease);
    box-shadow: none;
}

body .job-submission-form-wrapper textarea {
    width: 100%;
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: 12px 16px;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-primary, #1f2937);
    background: var(--color-white, #fff);
    transition: var(--transition-default, all 0.2s ease);
    box-shadow: none;
    min-height: 80px;
    resize: vertical;
}

body .job-submission-form-wrapper input[type="text"]:focus,
body .job-submission-form-wrapper input[type="email"]:focus,
body .job-submission-form-wrapper input[type="url"]:focus,
body .job-submission-form-wrapper input[type="tel"]:focus,
body .job-submission-form-wrapper input[type="number"]:focus,
body .job-submission-form-wrapper input[type="password"]:focus,
body .job-submission-form-wrapper textarea:focus {
    border-color: var(--color-primary, #2DD4BF);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

/* Placeholder styling */
body .job-submission-form-wrapper input::placeholder,
body .job-submission-form-wrapper textarea::placeholder {
    color: var(--color-gray-300, #d1d5db);
    font-weight: var(--font-weight-normal, 400);
}

/* ============================================
   SELECT2 DROPDOWNS - Cloud Style
   ============================================ */
body .job-submission-form-wrapper .select2-container {
    display: block;
    width: 100%;
}

body .job-submission-form-wrapper .select2-container .select2-selection,
body .job-submission-form-wrapper .select2-selection {
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    height: 44px;
    min-height: 44px;
    background: var(--color-white, #fff);
    box-shadow: none;
    transition: var(--transition-default, all 0.2s ease);
}

body .job-submission-form-wrapper .select2-container--focus .select2-selection,
body .job-submission-form-wrapper .select2-container--open .select2-selection {
    border-color: var(--color-primary, #2DD4BF);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

body .job-submission-form-wrapper .select2-selection__rendered {
    padding: 0 16px;
    font-size: 13px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-primary, #1f2937);
    line-height: 42px;
    height: 42px;
    display: flex;
    align-items: center;
}

body .job-submission-form-wrapper .select2-selection__arrow {
    height: auto;
    right: 12px;
    top: 50%;
    transform: translateY(-40%);
    display: flex;
    align-items: center;
}

body .job-submission-form-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: 6px;
    position: absolute;
    top: 50%;
    width: 0;
}

body .job-submission-form-wrapper .select2-selection__placeholder {
    color: var(--color-gray-300, #d1d5db);
}

/* Location tags - compact style */
body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple {
    min-height: 44px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border: none;
    border-radius: 35px;
    padding: 4px 10px;
    margin: 0;
    font-size: 12px;
    color: #fff;
    line-height: 1.4;
}

body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 6px;
    font-size: 14px;
    font-weight: 600;
    background: transparent !important;
}

body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* GŁÓWNE badge inside location tag */
body .job-submission-form-wrapper .select2-selection__choice .badge,
body .job-submission-form-wrapper .select2-selection__choice .primary-badge,
body .job-submission-form-wrapper .select2-selection__choice .primary-location-badge,
body .job-submission-form-wrapper .select2-selection__choice span[class*="badge"],
body .job-submission-form-wrapper .select2-selection__choice span[class*="primary"],
body .job-submission-form-wrapper .select2-selection__choice strong,
body .job-submission-form-wrapper .select2-selection__choice b {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
    text-transform: uppercase;
}

/* Native select fallback */
body .job-submission-form-wrapper select.cmb2_select,
body .job-submission-form-wrapper select {
    width: 100%;
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: 12px 40px 12px 16px;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-primary, #1f2937);
    background: var(--color-white, #fff) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239ca3af%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* ============================================
   CHECKBOXES & RADIOS
   ============================================ */
body .job-submission-form-wrapper .cmb-type-checkbox .cmb-td,
body .job-submission-form-wrapper .cmb-type-radio .cmb-td {
    display: flex;
    align-items: center;
    gap: 10px;
}

body .job-submission-form-wrapper input[type="checkbox"],
body .job-submission-form-wrapper input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #2DD4BF);
    cursor: pointer;
}

body .job-submission-form-wrapper .cmb-type-checkbox label,
body .job-submission-form-wrapper .cmb-type-radio label {
    font-size: 13px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    cursor: pointer;
}

/* ============================================
   FILE UPLOAD - Clean Drop Zone
   ============================================ */
body .job-submission-form-wrapper .cmb-type-file .cmb-td,
body .job-submission-form-wrapper .cmb-type-file_list .cmb-td {
    position: relative;
}

body .job-submission-form-wrapper .label-can-drag,
body .job-submission-form-wrapper .group-upload {
    border: 2px dashed var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-5, 20px);
    text-align: center;
    background: var(--color-gray-50, #fafafa);
    transition: var(--transition-default, all 0.2s ease);
}

body .job-submission-form-wrapper .label-can-drag:hover,
body .job-submission-form-wrapper .group-upload:hover {
    border-color: var(--color-primary, #2DD4BF);
    background: rgba(45, 212, 191, 0.03);
}

body .job-submission-form-wrapper .upload-file-btn,
body .job-submission-form-wrapper .btn-upload {
    background: linear-gradient(135deg, var(--color-primary-light, #5EEAD4) 0%, var(--color-primary, #2DD4BF) 100%);
    border: none;
    border-radius: var(--radius-xl, 20px);
    padding: 10px 20px;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-white, #fff);
    cursor: pointer;
    transition: var(--transition-default, all 0.2s ease);
}

body .job-submission-form-wrapper .upload-file-btn:hover,
body .job-submission-form-wrapper .btn-upload:hover {
    box-shadow: var(--shadow-primary, 0 4px 12px rgba(45, 212, 191, 0.3));
    transform: translateY(-1px);
}

/* ============================================
   TINYMCE RICH TEXT EDITORS
   ============================================ */
body .job-submission-form-wrapper .mce-tinymce {
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}

body .job-submission-form-wrapper .mce-toolbar-grp {
    background: var(--color-gray-50, #f9fafb);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    padding: 6px;
}

body .job-submission-form-wrapper .mce-btn {
    background: transparent;
    border: none;
}

body .job-submission-form-wrapper .mce-btn:hover {
    background: var(--color-white, #fff);
    border-radius: 6px;
}

body .job-submission-form-wrapper .mce-edit-area {
    background: var(--color-white, #fff);
}

body .job-submission-form-wrapper .mce-edit-area iframe {
    background: var(--color-white, #fff);
}

/* ============================================
   DESCRIPTION / HELP TEXT
   ============================================ */
body .job-submission-form-wrapper .cmb2-metabox-description,
body .job-submission-form-wrapper p.cmb2-metabox-description {
    font-size: 11px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #9ca3af);
    margin-top: 6px;
    line-height: 1.5;
}

/* ============================================
   SALARY FIELDS - Inline Layout
   ============================================ */
body .job-submission-form-wrapper .salary-wrapper,
body .job-submission-form-wrapper .cmb-row[class*="salary"] .cmb-td {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

body .job-submission-form-wrapper .salary-wrapper input,
body .job-submission-form-wrapper .salary-wrapper select {
    flex: 1;
    min-width: 100px;
}

/* ============================================
   MAP / LOCATION SECTION
   ============================================ */
body .job-submission-form-wrapper .leaflet-container {
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border-default, #e5e7eb);
    overflow: hidden;
}

body .job-submission-form-wrapper .map-container-wrapper {
    margin-top: 12px;
}

.pw-map-search-wrapper .find-me-location {
    position: absolute;
    top: 20px;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    right: 15px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    color: rgba(153, 153, 153, 0.5);
    cursor: pointer;
}

@media (min-width: 1200px) {
    form.cmb-form .pw-map-search-wrapper .find-me-location {
        top: 15px;
    }
}

/* ============================================
   SUBMIT BUTTON - Gradient Teal Pill
   ============================================ */
body .job-submission-form-wrapper input[type="submit"],
body .job-submission-form-wrapper button[type="submit"],
body .job-submission-form-wrapper .btn-submit,
body .job-submission-form-wrapper .button-primary {
    background: linear-gradient(135deg, var(--color-primary-light, #5EEAD4) 0%, var(--color-primary, #2DD4BF) 100%);
    border: none;
    border-radius: var(--radius-pill, 50px);
    padding: 14px 40px;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-white, #fff);
    cursor: pointer;
    box-shadow: var(--shadow-primary, 0 4px 15px rgba(45, 212, 191, 0.3));
    transition: var(--transition-slow, all 0.3s ease);
    text-transform: none;
    letter-spacing: 0;
}

body .job-submission-form-wrapper input[type="submit"]:hover,
body .job-submission-form-wrapper button[type="submit"]:hover,
body .job-submission-form-wrapper .btn-submit:hover,
body .job-submission-form-wrapper .button-primary:hover {
    box-shadow: var(--shadow-primary-lg, 0 6px 20px rgba(45, 212, 191, 0.4));
    transform: translateY(-2px);
}

/* ============================================
   PROGRESS BAR
   ============================================ */
body .job-submission-form-wrapper .progress,
body .job-submission-form-wrapper .progress-bar-wrapper {
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 10px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

body .job-submission-form-wrapper .progress-bar {
    background: linear-gradient(90deg, var(--color-primary-light, #5EEAD4) 0%, var(--color-primary, #2DD4BF) 100%);
    border-radius: 10px;
}

/* ============================================
   VALIDATION ERRORS
   ============================================ */
body .job-submission-form-wrapper .cmb-row.error input,
body .job-submission-form-wrapper .cmb-row.error textarea,
body .job-submission-form-wrapper .cmb-row.error .select2-selection {
    border-color: var(--color-error, #f87171);
}

body .job-submission-form-wrapper .error-message,
body .job-submission-form-wrapper .cmb-row.error .cmb2-metabox-description {
    color: var(--color-error, #f87171);
}

/* ============================================
   iOS TOGGLE SWITCH
   ============================================ */
body .job-submission-form-wrapper input#_job_auto_renewal {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
}

body .job-submission-form-wrapper input#_job_auto_renewal+label {
    position: relative;
    cursor: pointer;
    padding-left: 60px;
    display: inline-block;
    line-height: 30px;
    user-select: none;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-secondary, #6b7280);
    min-height: 30px;
}

/* Switch Track */
body .job-submission-form-wrapper input#_job_auto_renewal+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 30px;
    background-color: var(--color-gray-200, #e5e7eb);
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}

/* Switch Knob */
body .job-submission-form-wrapper input#_job_auto_renewal+label::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--color-white, white);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Checked State */
body .job-submission-form-wrapper input#_job_auto_renewal:checked+label::before {
    background-color: var(--color-primary, #2DD4BF);
}

body .job-submission-form-wrapper input#_job_auto_renewal:checked+label::after {
    transform: translate(20px, -50%);
}

/* ============================================
   RESPONSIVE - Tablet (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-location,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-category,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-currency,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-experience,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-career-level,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-qualification,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-auto-renewal,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-max-salary,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-url,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-video-url,
    body .job-submission-form-wrapper .cmb-row[class*="cmb2-id-custom-number"] {
        width: calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
    }
}

/* ============================================
   RESPONSIVE - Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    body .job-submission-form-wrapper,
    body .job-submission-form-wrapper.box-dashboard-wrapper {
        border-radius: var(--radius-lg, 16px);
    }

    /* Mobile: Enable 2-column layout for form */
    body .job-submission-form-wrapper .cmb2-metabox,
    body .job-submission-form-wrapper .before-group-row-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    /* FULL WIDTH on mobile - large text fields */
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-location,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-auto-renewal,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-title,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-description,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-we-offer,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-duties,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-must-have,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-nice-to-have,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-address,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-map-location,
    body .job-submission-form-wrapper .cmb-row.cmb-type-pw-map,
    body .job-submission-form-wrapper .cmb-row.cmb-type-title,
    body .job-submission-form-wrapper .cmb-row.cmb-type-wysiwyg,
    body .job-submission-form-wrapper .cmb-row.cmb-type-file,
    body .job-submission-form-wrapper .cmb-row.cmb-type-file_list {
        width: 100%;
        flex: 0 0 100%;
    }

    /* FULL WIDTH on mobile - all fields */
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-category,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-currency,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary-type,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-salary,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-max-salary,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-experience,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-career-level,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-qualification,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-apply-url,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-video-url,
    body .job-submission-form-wrapper .cmb-row[class*="cmb2-id-custom-number"] {
        width: 100%;
        flex: 0 0 100%;
    }

    body .job-submission-form-wrapper input[type="submit"],
    body .job-submission-form-wrapper button[type="submit"] {
        width: 94%;
        padding: 14px;
    }

    /* Fix WYSIWYG Editor */
    body .job-submission-form-wrapper .wp-editor-wrap,
    body .job-submission-form-wrapper .mce-tinymce,
    body .job-submission-form-wrapper .wp-editor-container {
        width: 100%;
        max-width: 100%;
    }

    /* Editor rows */
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-description,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-we-offer,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-duties,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-must-have,
    body .job-submission-form-wrapper .cmb-row.cmb2-id--job-nice-to-have {
        height: auto;
        display: block;
        clear: both;
        margin-bottom: 20px;
    }

    /* Larger inputs on mobile */
    body .job-submission-form-wrapper .cmb-row input[type="text"],
    body .job-submission-form-wrapper .cmb-row input[type="email"],
    body .job-submission-form-wrapper .cmb-row input[type="url"],
    body .job-submission-form-wrapper .cmb-row input[type="tel"],
    body .job-submission-form-wrapper .cmb-row input[type="number"],
    body .job-submission-form-wrapper .cmb-row select,
    body .job-submission-form-wrapper .cmb-row textarea,
    body .job-submission-form-wrapper .select2-container .select2-selection,
    body .job-submission-form-wrapper .select2-container {
        height: 55px;
        font-size: 13px;
        width: 100%;
        max-width: 100%;
    }

    body .job-submission-form-wrapper .select2-container .select2-selection .select2-selection__rendered {
        line-height: 53px;
    }

    /* Multi-select location field - stack vertically with truncation */
    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple {
        height: 55px !important;
        min-height: 55px;
        max-height: 55px;
        padding: 4px 10px;
        display: block;
        overflow-y: auto;
    }

    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: block !important;
        padding: 4px 0;
        width: 100%;
        line-height: normal;
        height: auto;
        white-space: normal;
    }

    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 0 4px 0;
        float: none;
        padding: 8px;
        font-size: 10px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    /* Ensure content inside the choice (text) also truncates properly */
    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice>span:not(.select2-selection__choice__remove) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        flex: 1;
    }

    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-search--inline {
        width: 100%;
        margin-top: 4px;
    }

    body .job-submission-form-wrapper .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        width: 100% !important;
        margin: 0;
        height: 36px;
    }

    body .job-submission-form-wrapper .cmb-th label {
        margin-left: 2px;
        font-size: var(--font-size-sm, 14px);
        display: block;
        width: 100%;
    }

    body .select2-container--default .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
        /* Prevent iOS zoom on focus */
    }

    body .select2-results__option {
        word-wrap: break-word;
        white-space: normal !important;
        padding: 8px 12px;
    }
}

/* ============================================
   RESPONSIVE - Large Desktop (min-width: 1350px)
   ============================================ */
@media (min-width: 1350px) {
    body .box-dashboard-wrapper {
        padding: 0;
        margin: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
    }
}
/* =========================================
   Custom Social Media Field
   Clean, compact layout for social media entries
   ========================================= */

/* === CMB2 Row Overrides === */
/* Force full width on the CMB2 row containing custom socials */
.cmb2-id--employer-socials-custom,
.cmb2-id--candidate-socials-custom {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    padding: 12px 15px !important;
    grid-column: 1 / -1 !important;
}

/* Override parent grid to allow full width */
body .profile-form-wrapper .before-group-row-inner:has(.custom-socials-section),
body #_employer_front .before-group-row-inner:has(.custom-socials-section),
body #_candidate_front .before-group-row-inner:has(.custom-socials-section) {
    display: block !important;
}

/* CMB2 cell override */
.cmb2-id--employer-socials-custom > .cmb-td,
.cmb2-id--employer-socials-custom .cmb-td,
.cmb2-id--candidate-socials-custom > .cmb-td,
.cmb2-id--candidate-socials-custom .cmb-td {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
}

/* === Custom Socials Layout === */
.custom-socials-section {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Entries container - vertical stack */
.custom-socials-entries {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Each social media entry - horizontal row */
.custom-social-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* === Form Elements === */

/* Network dropdown - 30% width */
.custom-social-entry .social-network-select {
    flex: 0 0 30%;
    min-width: 140px;
    max-width: 30%;
    height: 42px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background-color: #f8fafc;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    box-sizing: border-box;
}

.custom-social-entry .social-network-select:focus {
    border-color: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
    outline: none;
}

/* URL input - flexible width */
.custom-social-entry .social-url-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.custom-social-entry .social-url-input:focus {
    border-color: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
    outline: none;
}

.custom-social-entry .social-url-input::placeholder {
    color: #9ca3af;
}

/* === Buttons === */

/* Remove button - gray with trash icon */
.custom-social-entry .custom-social-remove {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.custom-social-entry .custom-social-remove:hover {
    background: #e5e7eb;
}

.custom-social-entry .custom-social-remove svg {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.custom-social-entry .custom-social-remove:hover svg {
    color: #ef4444;
}

/* Add button - teal gradient */
.custom-socials-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    margin-top: 12px;
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.25);
    transition: all 0.2s ease;
}

.custom-socials-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(45, 212, 191, 0.35);
}

.custom-socials-add-btn i {
    font-size: 12px;
}

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

@media (max-width: 768px) {
    .custom-social-entry {
        flex-wrap: wrap;
        padding: 12px;
    }

    .custom-social-entry .social-network-select {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

    .custom-social-entry .social-url-input {
        flex: 1 1 calc(100% - 54px);
    }

    .custom-social-entry .custom-social-remove {
        flex: 0 0 42px;
    }
}

/* =========================================================================
   Sticky Alert Button - Subscribe to Job Alerts
   ========================================================================= */

/* Sticky Bar Container */
.sticky-alert-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    padding: 16px 20px 24px;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hide when footer is visible */
.sticky-alert-bar.hidden {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* Main Button */
.sticky-alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #1a1a1a;
    color: #fff !important;
    border: none;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 200;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.sticky-alert-btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    color: #fff !important;
}

.sticky-alert-btn:active {
    transform: translateY(0);
}

.sticky-alert-btn i {
    font-size: 12px;
    color: #fff !important;
}

.sticky-alert-btn span {
    color: #fff !important;
    font-size: 11px;
    font-weight: 200;
}

/* Hide when user is scrolling up (optional - controlled by JS) */
.sticky-alert-bar.hidden {
    transform: translateY(100%);
    opacity: 0;
}

/* =========================================================================
   Alert Modal
   ========================================================================= */

.alert-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.alert-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.alert-modal {
    background: #fff;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alert-modal-overlay.active .alert-modal {
    opacity: 1;
}

/* Modal Header */
.alert-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}

.alert-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.alert-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: all 0.2s ease;
}

.alert-modal-close:hover {
    background: #eee;
    color: #333;
}

/* Modal Body */
.alert-modal-body {
    padding: 24px;
    overflow: visible;
}

.alert-modal-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Form Group */
.alert-modal-form .form-group {
    margin-bottom: 20px;
    overflow: visible;
}

.alert-modal-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.alert-modal-form {
    overflow: visible;
}

.alert-modal-form select {
    width: 100%;
    padding: 1px 16px 1px 10px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 15px;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.alert-modal-form select:focus {
    outline: none;
    border-color: #1a1a1a;
}

/* Prevent Select2 styling - use native select */
.alert-modal-form select.no-select2 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23333%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Hide any Select2 container that might be created */
.alert-modal .select2-container {
    display: none !important;
}

/* Current Filters Display */
.alert-current-filters {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.alert-current-filters-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    margin: 4px 4px 4px 0;
}

.alert-filter-tag i {
    font-size: 12px;
    color: #666;
}

/* Submit Button */
.alert-modal-submit {
    width: 100%;
    padding: 12px 20px;
    background: #1a1a1a;
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 200;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.alert-modal-submit:hover {
    background: #333;
    color: #fff !important;
}

.alert-modal-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.alert-modal-submit i {
    font-size: 12px;
    color: #fff !important;
}

.alert-modal-submit span {
    color: #fff !important;
    font-size: 11px;
    font-weight: 200;
}

/* Loading State */
.alert-modal-submit.loading {
    pointer-events: none;
}

.alert-modal-submit.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success State */
.alert-modal-success {
    text-align: center;
    padding: 40px 24px;
}

.alert-modal-success-icon {
    width: 64px;
    height: 64px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #4caf50;
}

.alert-modal-success h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.alert-modal-success p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Login Required State */
.alert-modal-login-required {
    text-align: center;
    padding: 40px 24px;
}

.alert-modal-login-required-icon {
    width: 64px;
    height: 64px;
    background: #fff3e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #ff9800;
}

.alert-modal-login-required h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.alert-modal-login-required p {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px;
}

.alert-modal-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.alert-modal-login-btn:hover {
    background: #333;
    color: #fff;
}

/* =========================================================================
   Responsive Styles
   ========================================================================= */

/* Desktop */
@media (min-width: 992px) {
    .sticky-alert-bar {
        padding: 20px;
    }

    .alert-modal-overlay {
        align-items: center;
    }

    .alert-modal {
        border-radius: 24px;
        max-width: 450px;
        opacity: 0;
    }

    .alert-modal-overlay.active .alert-modal {
        opacity: 1;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .sticky-alert-bar {
        padding: 12px 16px 20px;
    }

    .sticky-alert-btn {
        padding: 12px 28px;
        font-size: 14px;
    }

    .alert-modal-header {
        padding: 16px 20px;
    }

    .alert-modal-body {
        padding: 20px;
    }
}

/* Hide sticky bar when keyboard is open on mobile */
@media (max-height: 500px) {
    .sticky-alert-bar {
        display: none !important;
    }
}

/* =========================================================================
   Popup Notifications (Toast Messages)
   Chmurki powiadomień wysuwające się z góry
   ========================================================================= */

#wp-job-board-pro-popup-message {
    position: fixed;
    top: -100px; /* Start off-screen (above viewport) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;

    /* Cloud Styling - białe tło z cieniem */
    background: #fff;
    color: #333;
    padding: 15px 35px;
    border-radius: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);

    /* Slide-down animation */
    transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;

    /* Typography */
    font-weight: 500;
    font-size: 15px;
    text-align: center;

    /* Dopasowanie do treści */
    width: fit-content;
    max-width: 90vw;
    white-space: nowrap;
}

/* Visible state - slides down below header */
#wp-job-board-pro-popup-message.is-visible {
    top: 110px;
    opacity: 1;
    pointer-events: auto;
}

/* Reset inner element styles (override Bootstrap/plugin defaults) */
#wp-job-board-pro-popup-message .message-inner {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important; /* Czarna treść */
}

#wp-job-board-pro-popup-message .message-inner.alert {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important;
}

/* Hide any alert icons */
#wp-job-board-pro-popup-message .alert::before {
    display: none;
}

/* Support for old animation classes (fallback) */
#wp-job-board-pro-popup-message.animated.fadeInRight {
    top: 110px;
    opacity: 1;
    animation: slideInFromTop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#wp-job-board-pro-popup-message.animated.fadeOutRight {
    animation: slideOutToTop 0.5s ease forwards;
}

@keyframes slideInFromTop {
    from {
        top: -100px;
        opacity: 0;
    }
    to {
        top: 110px;
        opacity: 1;
    }
}

@keyframes slideOutToTop {
    from {
        top: 110px;
        opacity: 1;
    }
    to {
        top: -100px;
        opacity: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #wp-job-board-pro-popup-message {
        padding: 10px 20px;
        font-size: 13px;
        max-width: 95vw;
        white-space: nowrap; /* Keep text on one line */
        border-radius: 25px;
    }

    #wp-job-board-pro-popup-message.is-visible,
    #wp-job-board-pro-popup-message.animated.fadeInRight {
        top: 80px; /* Adjusted for smaller mobile header */
    }

    @keyframes slideInFromTop {
        to {
            top: 80px;
            opacity: 1;
        }
    }

    @keyframes slideOutToTop {
        from {
            top: 80px;
            opacity: 1;
        }
    }
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-ext-400.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-ext-500.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-500.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-ext-700.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./fonts/poppins-normal-latin-700.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================
   DESIGN SYSTEM - Base & Components
   =========================================== */

/* ===========================================
   MISC & UTILITIES
   =========================================== */

/* ===========================================
   MODULES
   =========================================== */


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





/* ===========================================
   GLOBAL BODY STYLES
   =========================================== */
body.theme-pracujplus {
   font-size: 16px;
   /* Prevent unnecessary zoom on iOS */
}

/* Legacy variable overrides for parent theme compatibility */
:root {
   --superio-main-font: var(--font-family-primary);
   --superio-heading-font: var(--font-family-heading);
   --input-background-color: var(--color-bg-tertiary);
}
/* 
   ARCHIVE HOTFIXES 
   Extracted from redesign.css to prevent global regression on Single Job page.
*/

/* Gold Gradient Border for Top/Injected Items (Masked Method) */
.top-list-item .rj-mobile-overlay-link::before,
.injected-list-item .rj-mobile-overlay-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* Hide Gold Badge and Logo Label on Main List Items to prevent duplicates */
.main-list-item .rj-badge-gold,
.main-list-item .rj-logo-label {
    display: none;
}

/* Sidebar Filters Font Size Adjustment */
.sidebar-job-filters .term-name,
.sidebar-job-filters .list-name {
    font-size: 13px;
}
/* ==========================================================================
   PROFILE FORM REDESIGN - Cloud Style v2.0
   Strona: /profile/ - Edycja profilu pracodawcy
   Wzorowane na: job-submission.css
   
   FIX: Nie używamy flexbox na całym formularzu - zachowujemy strukturę CMB2
   ========================================================================== */

/* ============================================
   CSS VARIABLES (fallbacks)
   ============================================ */
:root {
    --profile-bg: #F5F7FC;
    --profile-white: #ffffff;
    --profile-border: #e5e7eb;
    --profile-border-light: #f3f4f6;
    --profile-text-primary: #1f2937;
    --profile-text-secondary: #6b7280;
    --profile-text-muted: #9ca3af;
    --profile-primary: #2DD4BF;
    --profile-primary-light: #5EEAD4;
    --profile-radius-md: 12px;
    --profile-radius-lg: 16px;
    --profile-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --profile-shadow-hover: 0 4px 20px rgba(45, 212, 191, 0.15);
}

/* ============================================
   1. FORM CONTAINER - Cloud Card Wrapper
   ============================================ */
body .profile-form-wrapper,
body .profile-form-wrapper.box-dashboard-wrapper,
body .profile-form-wrapper.dashboard-wrapper-v2 {
    background: var(--profile-bg) !important;
    border-radius: 20px;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

body .profile-form-wrapper form.cmb-form {
    margin: 0;
}

/* Form Title - Hidden */
body .profile-form-wrapper>h1.title,
body .profile-form-wrapper>.title {
    display: none !important;
}

/* ============================================
   2. SECTION TITLES & HEADINGS (inne niż cmb-type-title)
   ============================================ */
body .profile-form-wrapper h3:not(.cmb2-metabox-title),
body .profile-form-wrapper .cmb-row-title h3 {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--profile-text-muted) !important;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--profile-border-light);
    display: block !important;
}

/* ============================================
   3. LABELS - Light, Small, Elegant
   ============================================ */
body .profile-form-wrapper .cmb-th,
body .profile-form-wrapper .cmb-th label,
body .profile-form-wrapper form.cmb-form div.cmb2-metabox .cmb-th {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--profile-text-secondary) !important;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    float: none;
}

body .profile-form-wrapper .cmb-th label {
    display: block;
}

/* Required asterisk */
body .profile-form-wrapper .cmb-th .required-field,
body .profile-form-wrapper .cmb-th .text-danger {
    color: #f87171 !important;
    font-weight: 400;
}

/* ============================================
   4. FORM ROWS - Keep original CMB2 structure
   ============================================ */
body .profile-form-wrapper .cmb-row {
    padding: 12px 15px;
    margin-bottom: 0;
    border: none;
    display: block;
    width: 100%;
    float: none;
    box-sizing: border-box;
}

body .profile-form-wrapper .cmb-td {
    width: 100%;
    float: none;
}

/* ============================================
   5. TEXT INPUTS - White, Rounded, Shadow on gray bg
   ============================================ */
body .profile-form-wrapper input[type="text"],
body .profile-form-wrapper input[type="email"],
body .profile-form-wrapper input[type="url"],
body .profile-form-wrapper input[type="tel"],
body .profile-form-wrapper input[type="number"],
body .profile-form-wrapper input[type="password"],
body .profile-form-wrapper textarea:not(.wp-editor-area) {
    width: 100% !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: var(--profile-radius-md) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--profile-text-primary);
    background: var(--profile-white) !important;
    box-shadow: var(--profile-shadow) !important;
    transition: all 0.2s ease;
    height: auto;
    min-height: 44px;
    box-sizing: border-box;
}

/* Focus state */
body .profile-form-wrapper input[type="text"]:focus,
body .profile-form-wrapper input[type="email"]:focus,
body .profile-form-wrapper input[type="url"]:focus,
body .profile-form-wrapper input[type="tel"]:focus,
body .profile-form-wrapper input[type="number"]:focus,
body .profile-form-wrapper input[type="password"]:focus,
body .profile-form-wrapper textarea:focus {
    border-color: var(--profile-primary) !important;
    outline: none;
    box-shadow: var(--profile-shadow-hover) !important;
}

/* Placeholder styling */
body .profile-form-wrapper input::-moz-placeholder, body .profile-form-wrapper textarea::-moz-placeholder {
    color: #d1d5db;
    font-weight: 400;
}
body .profile-form-wrapper input::placeholder,
body .profile-form-wrapper textarea::placeholder {
    color: #d1d5db;
    font-weight: 400;
}

/* ============================================
   6. SELECT2 DROPDOWNS - Cloud Style
   ============================================ */
body .profile-form-wrapper .select2-container {
    display: block;
    width: 100% !important;
}

body .profile-form-wrapper .select2-container .select2-selection,
body .profile-form-wrapper .select2-selection--single {
    border: 1px solid var(--profile-border) !important;
    border-radius: var(--profile-radius-md) !important;
    height: 44px !important;
    min-height: 44px !important;
    background: var(--profile-white) !important;
    box-shadow: var(--profile-shadow) !important;
    transition: all 0.2s ease;
}

body .profile-form-wrapper .select2-container--focus .select2-selection,
body .profile-form-wrapper .select2-container--open .select2-selection {
    border-color: var(--profile-primary) !important;
    box-shadow: var(--profile-shadow-hover) !important;
}

body .profile-form-wrapper .select2-selection__rendered {
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--profile-text-primary);
    line-height: 42px !important;
    height: 42px;
}

body .profile-form-wrapper .select2-selection__arrow {
    height: 42px !important;
    right: 12px !important;
}

body .profile-form-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -13px !important;
}

/* ============================================
   7. IMAGE UPLOAD - Modern Drop Zone
   ============================================ */
body .profile-form-wrapper .label-can-drag,
body .profile-form-wrapper .group-upload,
body .profile-form-wrapper .cmb-td .form-group.group-upload {
    border: 2px dashed var(--profile-border) !important;
    border-radius: var(--profile-radius-lg) !important;
    padding: 24px !important;
    text-align: center;
    background: var(--profile-white) !important;
    transition: all 0.2s ease;
    min-height: 120px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    margin: 0;
}

body .profile-form-wrapper .label-can-drag:hover,
body .profile-form-wrapper .group-upload:hover {
    border-color: var(--profile-primary) !important;
    background: rgba(45, 212, 191, 0.03) !important;
}

/* Upload button */
body .profile-form-wrapper .upload-file-btn,
body .profile-form-wrapper .btn-upload,
body .profile-form-wrapper .group-upload .btn {
    background: linear-gradient(135deg, var(--profile-primary-light) 0%, var(--profile-primary) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

body .profile-form-wrapper .upload-file-btn:hover,
body .profile-form-wrapper .btn-upload:hover,
body .profile-form-wrapper .group-upload .btn:hover {
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
    transform: translateY(-1px);
}

/* Hide "wybierz plik" text when image is uploaded */
body .profile-form-wrapper .wp-job-board-pro-uploaded-files:not(:empty)~.label-can-drag,
body .profile-form-wrapper .wp-job-board-pro-uploaded-files:not(:empty)~.group-upload,
body .profile-form-wrapper .uploaded-files-list:not(:empty)~.label-can-drag,
body .profile-form-wrapper .cmb-type-file .wp-job-board-pro-uploaded-files:not(:empty)~*:not(.wp-job-board-pro-uploaded-files) {
    display: none !important;
}

/* Alternative: Hide file input when preview exists */
body .profile-form-wrapper .wp-job-board-pro-uploaded-files:not(:empty)~input[type="file"],
body .profile-form-wrapper .uploaded-files-list:not(:empty)~input[type="file"] {
    display: none !important;
}

/* Hide entire upload area when image exists - more aggressive approach */
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-files:not(:empty)) .group-upload,
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-files:not(:empty)) .label-can-drag,
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-files:not(:empty)) input[type="file"]:not([id*="gallery"]),
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file)>.group-upload,
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file)>input[type="file"]:not(:first-child) {
    display: none !important;
}

/* For single image fields - hide upload when image is present */
body .profile-form-wrapper .cmb-row[class*="logo"]:has(.wp-job-board-pro-uploaded-file) input[type="file"],
body .profile-form-wrapper .cmb-row[class*="featured-image"]:has(.wp-job-board-pro-uploaded-file) input[type="file"],
body .profile-form-wrapper .cmb-row[class*="header"]:has(.wp-job-board-pro-uploaded-file) input[type="file"],
body .profile-form-wrapper .cmb-row[class*="logo"]:has(.wp-job-board-pro-uploaded-file) .group-upload,
body .profile-form-wrapper .cmb-row[class*="featured-image"]:has(.wp-job-board-pro-uploaded-file) .group-upload,
body .profile-form-wrapper .cmb-row[class*="header"]:has(.wp-job-board-pro-uploaded-file) .group-upload,
body .profile-form-wrapper .cmb-row[class*="logo"]:has(.wp-job-board-pro-uploaded-file) .label-can-drag,
body .profile-form-wrapper .cmb-row[class*="featured-image"]:has(.wp-job-board-pro-uploaded-file) .label-can-drag,
body .profile-form-wrapper .cmb-row[class*="header"]:has(.wp-job-board-pro-uploaded-file) .label-can-drag {
    display: none !important;
}

/* Uploaded image preview - smaller, rounded */
body .profile-form-wrapper .wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file,
body .profile-form-wrapper .uploaded-files-list .uploaded-file-preview {
    display: inline-block;
    margin: 8px;
    position: relative;
}

body .profile-form-wrapper .wp-job-board-pro-uploaded-files img,
body .profile-form-wrapper .uploaded-files-list img,
body .profile-form-wrapper .job-submission-gallery-item img {
    border-radius: var(--profile-radius-md) !important;
    box-shadow: var(--profile-shadow) !important;
    max-width: 150px;
    max-height: 150px;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Header image - limit size */
body .profile-form-wrapper .cmb-row[class*="featured-image"] img,
body .profile-form-wrapper .cmb-row[class*="header"] img {
    max-width: 300px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Logo image - smaller */
body .profile-form-wrapper .cmb-row[class*="logo"] img {
    max-width: 120px !important;
    max-height: 120px !important;
}

/* Remove button for images */
body .profile-form-wrapper .remove-uploaded-file,
body .profile-form-wrapper .wp-job-board-pro-remove-uploaded-file,
body .profile-form-wrapper .job-submission-remove-gallery-item {
    background: rgba(239, 68, 68, 0.9) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    border: none !important;
    cursor: pointer;
}

body .profile-form-wrapper .remove-uploaded-file:hover,
body .profile-form-wrapper .wp-job-board-pro-remove-uploaded-file:hover {
    background: #ef4444 !important;
}

/* ============================================
   8. GALLERY - Horizontal Grid Layout
   ============================================ */
body .profile-form-wrapper .cmb-row[class*="profile-photos"] .wp-job-board-pro-uploaded-files,
body .profile-form-wrapper .cmb-row[class*="gallery"] .wp-job-board-pro-uploaded-files,
body .profile-form-wrapper .uploaded-files-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px;
}

body .profile-form-wrapper .cmb-row[class*="profile-photos"] .wp-job-board-pro-uploaded-file,
body .profile-form-wrapper .cmb-row[class*="gallery"] .wp-job-board-pro-uploaded-file {
    width: 100% !important;
    margin: 0 !important;
}

body .profile-form-wrapper .cmb-row[class*="profile-photos"] img,
body .profile-form-wrapper .cmb-row[class*="gallery"] img {
    width: 100% !important;
    height: 80px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
}

/* ============================================
   9. WYSIWYG / TINYMCE EDITOR
   ============================================ */
body .profile-form-wrapper .wp-editor-wrap .wp-editor-container,
body .profile-form-wrapper .mce-tinymce {
    box-shadow: var(--profile-shadow) !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: var(--profile-radius-md) !important;
    background: var(--profile-white);
    overflow: hidden;
}

body .profile-form-wrapper .mce-toolbar-grp {
    background: #f9fafb;
    border-bottom: 1px solid var(--profile-border-light);
    padding: 6px;
}

body .profile-form-wrapper .wp-editor-area {
    background: var(--profile-white) !important;
}

/* ============================================
   10. MAP SECTION
   ============================================ */
body .profile-form-wrapper .leaflet-container,
body .profile-form-wrapper .pw-map,
body .profile-form-wrapper [class*="map"] .leaflet-container {
    border-radius: var(--profile-radius-md) !important;
    border: 1px solid var(--profile-border) !important;
    overflow: hidden;
    box-shadow: var(--profile-shadow) !important;
}

body .profile-form-wrapper .pw-map-search input,
body .profile-form-wrapper [class*="map-location"] input {
    border-radius: var(--profile-radius-md) !important;
    border: 1px solid var(--profile-border) !important;
    background: var(--profile-white) !important;
    box-shadow: var(--profile-shadow) !important;
}

/* Coordinate inputs side by side */
body .profile-form-wrapper .cmb-row[class*="lat"] input,
body .profile-form-wrapper .cmb-row[class*="lng"] input {
    max-width: 200px;
}

/* ============================================
   12. CHECKBOXES & RODO CONSENTS
   ============================================ */
body .profile-form-wrapper .cmb-type-checkbox {
    background: var(--profile-white) !important;
    border-radius: var(--profile-radius-md) !important;
    padding: 16px !important;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid var(--profile-border-light);
}

body .profile-form-wrapper .cmb-type-checkbox .cmb-td {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
}

body .profile-form-wrapper input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    accent-color: var(--profile-primary);
    cursor: pointer;
    border-radius: 4px;
    margin-top: 2px;
}

body .profile-form-wrapper .cmb-type-checkbox .cmb-td label {
    font-size: 14px;
    font-weight: 400;
    color: var(--profile-text-secondary);
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}

/* Hide label column for checkboxes */
body .profile-form-wrapper .cmb-type-checkbox .cmb-th {
    display: none !important;
}

/* ============================================
   13. SUBMIT BUTTON
   ============================================ */
body .profile-form-wrapper input[type="submit"],
body .profile-form-wrapper button[type="submit"],
body .profile-form-wrapper .button-primary {
    background: linear-gradient(135deg, var(--profile-primary-light) 0%, var(--profile-primary) 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.3) !important;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 20px;
}

body .profile-form-wrapper input[type="submit"]:hover,
body .profile-form-wrapper button[type="submit"]:hover,
body .profile-form-wrapper .button-primary:hover {
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4) !important;
    transform: translateY(-2px);
}

/* ============================================
   14. DESCRIPTION / HELP TEXT
   ============================================ */
body .profile-form-wrapper .cmb2-metabox-description,
body .profile-form-wrapper p.cmb2-metabox-description {
    font-size: 11px !important;
    font-weight: 400;
    color: var(--profile-text-muted) !important;
    margin-top: 6px;
    line-height: 1.5;
}

/* ============================================
   15. GUS BUTTON STYLING
   ============================================ */
body .profile-form-wrapper .gus-button,
body .profile-form-wrapper [class*="gus"] button {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    border: none !important;
    border-radius: var(--profile-radius-md) !important;
    padding: 8px 16px !important;
    font-size: 12px;
    font-weight: 500;
    color: #fff !important;
    cursor: pointer;
}

/* ============================================
   16. MESSAGES / ALERTS
   ============================================ */
body .profile-form-wrapper .messages {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

body .profile-form-wrapper .messages .message_line {
    padding: 12px 16px;
    border-radius: var(--profile-radius-md);
    margin-bottom: 8px;
    font-size: 14px;
}

body .profile-form-wrapper .messages .message_line.success {
    background: rgba(45, 212, 191, 0.1);
    color: #059669;
    border: 1px solid rgba(45, 212, 191, 0.3);
}

body .profile-form-wrapper .messages .message_line.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ============================================
   17. RESPONSIVE - Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Fix page container margins - equal 5px all sides */
    body .profile-form-wrapper,
    body .profile-form-wrapper.box-dashboard-wrapper {
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cloud cards - smaller padding on mobile */
    body .profile-form-wrapper .before-group-row,
    body #_employer_front .before-group-row {
        padding: 16px 12px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 12px !important;
    }

    body #_candidate_front .before-group-row {
        margin: 0 0 10px 0 !important;
        border-radius: 12px !important;
    }

    /* Candidate profile - single column layout on mobile */
    body #_candidate_front .before-group-row-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    body .profile-form-wrapper .cmb-row[class*="profile-photos"] .wp-job-board-pro-uploaded-files,
    body .profile-form-wrapper .cmb-row[class*="gallery"] .wp-job-board-pro-uploaded-files {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .profile-form-wrapper input[type="submit"],
    body .profile-form-wrapper .button-primary {
        width: 100%;
        text-align: center;
    }

    body .profile-form-wrapper .cmb-row {
        padding: 10px 0;
    }
}

/* ============================================
   18. OVERRIDE THEME DEFAULTS
   ============================================ */
/* Remove any conflicting backgrounds */
body .profile-form-wrapper .cmb-row,
body .profile-form-wrapper .cmb2-metabox>div {
    background: transparent !important;
}

/* Remove extra file input styling */
body .profile-form-wrapper input[type="file"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* Fix inner-list spacing */
body .profile-form-wrapper .inner-list {
    padding: 0;
    margin: 0;
}

/* ============================================
   18.5 SECTION CARDS - Each section as a white cloud card
   Sekcje: Dane podstawowe, Media, Informacje kontaktowe, Zgody, Rodo
   ============================================ */

/* Each section group as a white cloud card */
body .profile-form-wrapper .before-group-row,
body #_employer_front .before-group-row {
    background: #ffffff !important;
    border-radius: var(--profile-radius-lg, 16px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
}

body #_candidate_front .before-group-row {
    background: #ffffff !important;
    border-radius: var(--profile-radius-lg, 16px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
}

/* Remove margin from last section */
body .profile-form-wrapper .before-group-row:last-of-type,
body #_employer_front .before-group-row:last-of-type {
    margin-bottom: 0 !important;
}

/* Section inner container - 2 column grid layout */
body .profile-form-wrapper .before-group-row-inner,
body #_employer_front .before-group-row-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    width: 100% !important;
}

/* Base styling for all section title rows */
body .profile-form-wrapper .cmb-row.cmb-type-title,
body #_employer_front .cmb-row.cmb-type-title {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* Main title styling - big, bold, dark */
body .profile-form-wrapper .cmb-row.cmb-type-title h5.cmb2-metabox-title,
body .profile-form-wrapper .cmb-row.cmb-type-title .cmb-td h5,
body #_employer_front .cmb-row.cmb-type-title h5.cmb2-metabox-title,
body #_employer_front .cmb-row.cmb-type-title .cmb-td h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--profile-text-primary, #1f2937) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* Subtitle/Description below heading - smaller, dark, NO border */
body .profile-form-wrapper .cmb-row.cmb-type-title .cmb2-metabox-description,
body .profile-form-wrapper .cmb-row.cmb-type-title p.cmb2-metabox-description,
body #_employer_front .cmb-row.cmb-type-title .cmb2-metabox-description,
body #_employer_front .cmb-row.cmb-type-title p.cmb2-metabox-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #202124 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

/* If no description, no border on title */
body .profile-form-wrapper .cmb-row.cmb-type-title .cmb-td:not(:has(.cmb2-metabox-description)) h5.cmb2-metabox-title,
body #_employer_front .cmb-row.cmb-type-title .cmb-td:not(:has(.cmb2-metabox-description)) h5.cmb2-metabox-title {
    padding-bottom: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
}

/* Hide the label column for title rows - we only need the content */
body .profile-form-wrapper .cmb-row.cmb-type-title .cmb-th,
body #_employer_front .cmb-row.cmb-type-title .cmb-th {
    display: none !important;
}

/* Ensure cmb-td takes full width */
body .profile-form-wrapper .cmb-row.cmb-type-title .cmb-td,
body #_employer_front .cmb-row.cmb-type-title .cmb-td {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* ============================================
   19. CRITICAL OVERRIDES - Specific Selectors
   These use the exact class names found in the HTML
   ============================================ */

/* NOTE: Social media section styles moved to custom-socials.css
   Custom PHP field replaces the CMB2 group field for better control */

/* ----- GALLERY SECTION ----- */
/* Employer profile photos - horizontal grid */
body .profile-form-wrapper .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-files {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 16px;
    width: 100% !important;
    float: none !important;
}

/* Override template.css line 24434 exact selector + our specific selector */
.profile-form-wrapper .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file,
form.cmb-form .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file,
body #_employer_front .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-file,
body .profile-form-wrapper .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-file {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    float: none !important;
}

body #_employer_front .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-file img,
body .profile-form-wrapper .cmb2-id--employer-profile-photos .wp-job-board-pro-uploaded-file img {
    width: 100% !important;
    height: 100px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    border-radius: 8px !important;
}

/* ----- LOGO / FEATURED IMAGE SECTION ----- */
/* Hide upload button when logo exists */
body .profile-form-wrapper .cmb2-id--employer-featured-image .wp-job-board-pro-uploaded-files:not(:empty)~.label-can-drag,
body .profile-form-wrapper .cmb2-id--employer-featured-image .wp-job-board-pro-uploaded-files:has(.wp-job-board-pro-uploaded-file)~.label-can-drag,
body .profile-form-wrapper .cmb2-id--employer-featured-image .cmb-td:has(.wp-job-board-pro-uploaded-file) .label-can-drag {
    display: none !important;
}

/* Style logo preview */
body .profile-form-wrapper .cmb2-id--employer-featured-image .wp-job-board-pro-uploaded-file img {
    max-width: 200px !important;
    max-height: 200px !important;
    border-radius: var(--profile-radius-md) !important;
    box-shadow: var(--profile-shadow) !important;
}

/* ----- HEADER IMAGE SECTION ----- */
/* Find and style header/cover image */
body .profile-form-wrapper .cmb2-id--employer-cover-image .wp-job-board-pro-uploaded-files:not(:empty)~.label-can-drag,
body .profile-form-wrapper .cmb2-id--employer-cover-image .wp-job-board-pro-uploaded-files:has(.wp-job-board-pro-uploaded-file)~.label-can-drag,
body .profile-form-wrapper .cmb2-id--employer-cover-image .cmb-td:has(.wp-job-board-pro-uploaded-file) .label-can-drag {
    display: none !important;
}

body .profile-form-wrapper .cmb2-id--employer-cover-image .wp-job-board-pro-uploaded-file img {
    max-width: 400px !important;
    max-height: 200px !important;
    width: auto !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    border-radius: var(--profile-radius-md) !important;
}

/* ----- UNIVERSAL: Hide upload when file exists ----- */
/* Using :has() selector for modern browsers */
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file) .label-can-drag,
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file) .group-upload,
body .profile-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file) .upload-file-btn {
    display: none !important;
}

/* Keep upload visible for gallery (multiple files allowed) */
body .profile-form-wrapper .cmb2-id--employer-profile-photos .cmb-td .label-can-drag,
body .profile-form-wrapper .cmb2-id--employer-profile-photos .cmb-td .group-upload {
    display: block !important;
}

/* ============================================
   COMPANY DATA - TWO COLUMN LAYOUT
   ============================================ */

/* Nazwa firmy - full width (entire row) */
body .profile-form-wrapper .cmb2-id--employer-title,
body #_employer_front .cmb2-id--employer-title {
    grid-column: 1 / -1 !important;
}

/* Section titles - full width */
body .profile-form-wrapper .before-group-row-inner .cmb-row.cmb-type-title,
body #_employer_front .before-group-row-inner .cmb-row.cmb-type-title {
    grid-column: 1 / -1 !important;
}

/* Adres firmy - left column */
body .profile-form-wrapper .cmb2-id--employer-address,
body #_employer_front .cmb2-id--employer-address {
    grid-column: 1 / 2 !important;
}

/* Siedziba firmy - right column */
body .profile-form-wrapper .cmb2-id--employer-location,
body #_employer_front .cmb2-id--employer-location {
    grid-column: 2 / 3 !important;
}

/* NIP - left column */
body .profile-form-wrapper .cmb2-id--employer-nip,
body #_employer_front .cmb2-id--employer-nip {
    grid-column: 1 / 2 !important;
}

/* REGON - right column */
body .profile-form-wrapper .cmb2-id--employer-regon,
body #_employer_front .cmb2-id--employer-regon {
    grid-column: 2 / 3 !important;
}

/* Image upload fields - full width */
body .profile-form-wrapper .cmb2-id--employer-featured-image,
body .profile-form-wrapper .cmb2-id--employer-cover-photo,
body .profile-form-wrapper .cmb2-id--employer-profile-photos,
body #_employer_front .cmb2-id--employer-featured-image,
body #_employer_front .cmb2-id--employer-cover-photo,
body #_employer_front .cmb2-id--employer-profile-photos {
    grid-column: 1 / -1 !important;
}

/* Social media section - full width */
body .profile-form-wrapper .cmb2-id--employer-socials,
body #_employer_front .cmb2-id--employer-socials {
    grid-column: 1 / -1 !important;
}

/* Description field - full width */
body .profile-form-wrapper .cmb2-id--employer-description,
body #_employer_front .cmb2-id--employer-description {
    grid-column: 1 / -1 !important;
}

/* Map section - full width */
body .profile-form-wrapper .cmb2-id--employer-map-location,
body #_employer_front .cmb2-id--employer-map-location {
    grid-column: 1 / -1 !important;
}

/* Zgody (Consent) section - full width, one per row */
body .profile-form-wrapper .cmb2-id-terms-and-conditions,
body .profile-form-wrapper .cmb2-id-privacy,
body .profile-form-wrapper .cmb2-id-marketing,
body #_employer_front .cmb2-id-terms-and-conditions,
body #_employer_front .cmb2-id-privacy,
body #_employer_front .cmb2-id-marketing {
    grid-column: 1 / -1 !important;
}

/* RODO section - full width, one per row */
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled,
body .profile-form-wrapper .cmb2-id--employer-rodo,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled,
body #_employer_front .cmb2-id--employer-rodo {
    grid-column: 1 / -1 !important;
}

/* ============================================
   ZGODY (CONSENTS) SECTION - Styling
   ============================================ */

/* Remove separators from Zgody section */
body .profile-form-wrapper .cmb2-id-terms-and-conditions,
body .profile-form-wrapper .cmb2-id-privacy,
body .profile-form-wrapper .cmb2-id-marketing,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled,
body #_employer_front .cmb2-id-terms-and-conditions,
body #_employer_front .cmb2-id-privacy,
body #_employer_front .cmb2-id-marketing,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled {
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* Black labels for checkboxes in Zgody section - more specific selectors */
body .profile-form-wrapper .cmb2-id-terms-and-conditions label,
body .profile-form-wrapper .cmb2-id-privacy label,
body .profile-form-wrapper .cmb2-id-marketing label,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled label,
body #_employer_front .cmb2-id-terms-and-conditions label,
body #_employer_front .cmb2-id-privacy label,
body #_employer_front .cmb2-id-marketing label,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled label,
body .profile-form-wrapper .cmb2-id-terms-and-conditions .cmb-td label,
body .profile-form-wrapper .cmb2-id-privacy .cmb-td label,
body .profile-form-wrapper .cmb2-id-marketing .cmb-td label,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled .cmb-td label,
body #_employer_front .cmb2-id-terms-and-conditions .cmb-td label,
body #_employer_front .cmb2-id-privacy .cmb-td label,
body #_employer_front .cmb2-id-marketing .cmb-td label,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled .cmb-td label {
    color: #202124 !important;
    font-weight: 400 !important;
}

/* Full width for description text (Nie możesz zrezygnować...) */
body .profile-form-wrapper .before-group-row .cmb2-metabox-description,
body #_employer_front .before-group-row .cmb2-metabox-description,
body .profile-form-wrapper .cmb-row p.cmb2-metabox-description,
body #_employer_front .cmb-row p.cmb2-metabox-description,
body .profile-form-wrapper .cmb-type-checkbox .cmb2-metabox-description,
body #_employer_front .cmb-type-checkbox .cmb2-metabox-description {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #6b7280 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================
   iOS TOGGLE SWITCH for Zgody section
   ============================================ */

/* Hide the original checkbox */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"],
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"],
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"],
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"],
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"],
body #_employer_front .cmb2-id-privacy input[type="checkbox"],
body #_employer_front .cmb2-id-marketing input[type="checkbox"],
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Label styling for toggle */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]+label,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]+label,
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"]+label,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]+label,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]+label,
body #_employer_front .cmb2-id-marketing input[type="checkbox"]+label,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label {
    position: relative !important;
    cursor: pointer !important;
    padding-left: 60px !important;
    display: inline-block !important;
    line-height: 30px !important;
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
            user-select: none !important;
    font-weight: 400 !important;
    color: #202124 !important;
    min-height: 30px !important;
}

/* Switch Track (background pill) */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]+label::before,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]+label::before,
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"]+label::before,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label::before,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]+label::before,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]+label::before,
body #_employer_front .cmb2-id-marketing input[type="checkbox"]+label::before,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 30px !important;
    background-color: #e5e7eb !important;
    border-radius: 9999px !important;
    transition: background-color 0.3s ease !important;
}

/* Switch Knob (white circle) */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]+label::after,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]+label::after,
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"]+label::after,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label::after,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]+label::after,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]+label::after,
body #_employer_front .cmb2-id-marketing input[type="checkbox"]+label::after,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]+label::after {
    content: '' !important;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    background-color: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Checked State - green track */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]:checked+label::before,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]:checked+label::before,
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"]:checked+label::before,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]:checked+label::before,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]:checked+label::before,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]:checked+label::before,
body #_employer_front .cmb2-id-marketing input[type="checkbox"]:checked+label::before,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]:checked+label::before {
    background-color: #2DD4BF !important;
}

/* Checked State - knob slides right */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]:checked+label::after,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]:checked+label::after,
body .profile-form-wrapper .cmb2-id-marketing input[type="checkbox"]:checked+label::after,
body .profile-form-wrapper .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]:checked+label::after,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]:checked+label::after,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]:checked+label::after,
body #_employer_front .cmb2-id-marketing input[type="checkbox"]:checked+label::after,
body #_employer_front .cmb2-id--employer-custom-rodo-enabled input[type="checkbox"]:checked+label::after {
    transform: translate(20px, -50%) !important;
}

/* ============================================
   DISABLED STATE for required consents (Regulamin, Administrator)
   ============================================ */

/* Grayed out toggle for disabled/required checkboxes */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled+label,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]:disabled+label,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled+label,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]:disabled+label {
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Grayed out track for disabled toggles */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled:checked+label::before,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]:disabled:checked+label::before,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled:checked+label::before,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]:disabled:checked+label::before {
    background-color: #9ca3af !important;
    /* Gray instead of green */
}

/* Grayed out knob for disabled toggles */
body .profile-form-wrapper .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled+label::after,
body .profile-form-wrapper .cmb2-id-privacy input[type="checkbox"]:disabled+label::after,
body #_employer_front .cmb2-id-terms-and-conditions input[type="checkbox"]:disabled+label::after,
body #_employer_front .cmb2-id-privacy input[type="checkbox"]:disabled+label::after {
    background-color: #e5e7eb !important;
    /* Lighter knob */
    box-shadow: none !important;
}

/* Mobile responsiveness - single column on small screens */
@media (max-width: 768px) {

    body .profile-form-wrapper .before-group-row-inner,
    body #_employer_front .before-group-row-inner {
        grid-template-columns: 1fr !important;
    }

    body .profile-form-wrapper .cmb2-id--employer-address,
    body .profile-form-wrapper .cmb2-id--employer-location,
    body .profile-form-wrapper .cmb2-id--employer-nip,
    body .profile-form-wrapper .cmb2-id--employer-regon,
    body #_employer_front .cmb2-id--employer-address,
    body #_employer_front .cmb2-id--employer-location,
    body #_employer_front .cmb2-id--employer-nip,
    body #_employer_front .cmb2-id--employer-regon {
        grid-column: 1 / -1 !important;
    }
}
/* ==========================================================================
   CANDIDATE PROFILE FORM - Cloud Style v1.0
   Strona: /profile/ - Edycja profilu kandydata
   Wzorowane na: profile-form-redesign.css (employer)

   UWAGA: Te style są 1:1 kopią stylów pracodawcy, dostosowane do kandydata
   ========================================================================== */

/* ============================================
   0. CRITICAL OVERRIDES - Override template.css float layout
   ============================================ */

/* Override template.css columns-2 float layout with grid */
body .profile-form-wrapper form#_candidate_front .before-group-row.columns-2 .before-group-row-inner>.cmb-row,
body form#_candidate_front .before-group-row.columns-2 .before-group-row-inner>.cmb-row,
body #_candidate_front .before-group-row.columns-2 .before-group-row-inner>.cmb-row,
body #_candidate_front .before-group-row .before-group-row-inner>.cmb-row {
    width: 100% !important;
    float: none !important;
}

/* Force grid layout on section inner containers */
body .profile-form-wrapper form#_candidate_front .before-group-row-inner,
body form#_candidate_front .before-group-row-inner,
body #_candidate_front .before-group-row-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    width: 100% !important;
    float: none !important;
}

/* Clear floats */
body #_candidate_front .before-group-row-inner::after {
    display: none !important;
}

/* ============================================
   1. FORM CONTAINER - Same as employer
   ============================================ */

/* ============================================
   2. SECTION TITLES & HEADINGS
   ============================================ */
body #_candidate_front h3:not(.cmb2-metabox-title),
body #_candidate_front .cmb-row-title h3 {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--profile-text-muted, #9ca3af) !important;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--profile-border-light, #f3f4f6);
    display: block !important;
}

/* ============================================
   3. LABELS - Light, Small, Elegant
   ============================================ */
body #_candidate_front .cmb-th,
body #_candidate_front .cmb-th label,
body #_candidate_front div.cmb2-metabox .cmb-th {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--profile-text-secondary, #6b7280) !important;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    float: none;
}

body #_candidate_front .cmb-th label {
    display: block;
}

/* Required asterisk */
body #_candidate_front .cmb-th .required-field,
body #_candidate_front .cmb-th .text-danger {
    color: #f87171 !important;
    font-weight: 400;
}

/* ============================================
   4. FORM ROWS - Keep original CMB2 structure
   ============================================ */
body #_candidate_front .cmb-row {
    padding: 12px 15px !important;
    margin-bottom: 0 !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

body #_candidate_front .cmb-td {
    width: 100% !important;
    float: none !important;
}

/* Ensure inputs fill their containers */
body #_candidate_front .cmb-td input,
body #_candidate_front .cmb-td select,
body #_candidate_front .cmb-td textarea,
body #_candidate_front .cmb-td .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   5. TEXT INPUTS - White, Rounded, Shadow
   ============================================ */
body #_candidate_front input[type="text"],
body #_candidate_front input[type="email"],
body #_candidate_front input[type="url"],
body #_candidate_front input[type="tel"],
body #_candidate_front input[type="number"],
body #_candidate_front input[type="password"],
body #_candidate_front textarea:not(.wp-editor-area) {
    width: 100% !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--profile-text-primary, #1f2937);
    background: var(--profile-white, #ffffff) !important;
    box-shadow: var(--profile-shadow, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
    transition: all 0.2s ease;
    height: auto;
    min-height: 44px;
    box-sizing: border-box;
}

/* Focus state */
body #_candidate_front input[type="text"]:focus,
body #_candidate_front input[type="email"]:focus,
body #_candidate_front input[type="url"]:focus,
body #_candidate_front input[type="tel"]:focus,
body #_candidate_front input[type="number"]:focus,
body #_candidate_front input[type="password"]:focus,
body #_candidate_front textarea:focus {
    border-color: var(--profile-primary, #2DD4BF) !important;
    outline: none;
    box-shadow: var(--profile-shadow-hover, 0 4px 20px rgba(45, 212, 191, 0.15)) !important;
}

/* Placeholder styling */
body #_candidate_front input::-moz-placeholder, body #_candidate_front textarea::-moz-placeholder {
    color: #d1d5db;
    font-weight: 400;
}
body #_candidate_front input::placeholder,
body #_candidate_front textarea::placeholder {
    color: #d1d5db;
    font-weight: 400;
}

/* ============================================
   6. SELECT2 DROPDOWNS - Cloud Style
   ============================================ */
body #_candidate_front .select2-container {
    display: block;
    width: 100% !important;
}

body #_candidate_front .select2-container .select2-selection,
body #_candidate_front .select2-selection--single {
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    height: 44px !important;
    min-height: 44px !important;
    background: var(--profile-white, #ffffff) !important;
    box-shadow: var(--profile-shadow, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
    transition: all 0.2s ease;
}

body #_candidate_front .select2-container--focus .select2-selection,
body #_candidate_front .select2-container--open .select2-selection {
    border-color: var(--profile-primary, #2DD4BF) !important;
    box-shadow: var(--profile-shadow-hover, 0 4px 20px rgba(45, 212, 191, 0.15)) !important;
}

body #_candidate_front .select2-selection__rendered {
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--profile-text-primary, #1f2937);
    line-height: 42px !important;
    height: 42px;
}

body #_candidate_front .select2-selection__arrow {
    height: 42px !important;
    right: 12px !important;
}

body #_candidate_front .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -13px !important;
}

/* ============================================
   7. IMAGE UPLOAD - Modern Drop Zone
   ============================================ */
body #_candidate_front .label-can-drag,
body #_candidate_front .group-upload,
body #_candidate_front .cmb-td .form-group.group-upload {
    border: 2px dashed var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 16px !important;
    text-align: center;
    background: var(--profile-white, #ffffff) !important;
    transition: all 0.2s ease;
    min-height: 80px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    margin: 0;
}

body #_candidate_front .label-can-drag:hover,
body #_candidate_front .group-upload:hover {
    border-color: var(--profile-primary, #2DD4BF) !important;
    background: rgba(45, 212, 191, 0.03) !important;
}

/* Upload button */
body #_candidate_front .upload-file-btn,
body #_candidate_front .btn-upload,
body #_candidate_front .group-upload .btn {
    background: linear-gradient(135deg, var(--profile-primary-light, #5EEAD4) 0%, var(--profile-primary, #2DD4BF) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

body #_candidate_front .upload-file-btn:hover,
body #_candidate_front .btn-upload:hover,
body #_candidate_front .group-upload .btn:hover {
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
    transform: translateY(-1px);
}

/* Hide upload when file exists */
body #_candidate_front .cmb-td:has(.wp-job-board-pro-uploaded-file) .label-can-drag,
body #_candidate_front .cmb-td:has(.wp-job-board-pro-uploaded-file) .group-upload,
body #_candidate_front .cmb-td:has(.wp-job-board-pro-uploaded-file) .upload-file-btn {
    display: none !important;
}

/* Profile photo upload - ALL containers must have overflow visible */
body #_candidate_front .cmb2-id--candidate-featured-image,
body #_candidate_front .cmb2-id--candidate-featured-image *,
body #_candidate_front .before-group-row:has(.cmb2-id--candidate-featured-image),
body #_candidate_front .before-group-row-inner:has(.cmb2-id--candidate-featured-image),
body .profile-form-wrapper .before-group-row:has(.cmb2-id--candidate-featured-image),
body .profile-form-wrapper .before-group-row-inner:has(.cmb2-id--candidate-featured-image) {
    overflow: visible !important;
}

body #_candidate_front .cmb2-id--candidate-featured-image .cmb-td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Uploaded files container - centered */
body #_candidate_front .cmb2-id--candidate-featured-image .wp-job-board-pro-uploaded-files,
body .profile-form-wrapper #_candidate_front .cmb2-id--candidate-featured-image .wp-job-board-pro-uploaded-files {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Uploaded image preview - wrapper */
body #_candidate_front .wp-job-board-pro-uploaded-files .wp-job-board-pro-uploaded-file,
body #_candidate_front .uploaded-files-list .uploaded-file-preview,
body .profile-form-wrapper #_candidate_front .wp-job-board-pro-uploaded-file {
    display: inline-block !important;
    margin: 15px !important;
    position: relative !important;
    overflow: visible !important;
    width: auto !important;
}

/* Desktop: larger profile photo (300x300) */
body #_candidate_front .cmb2-id--candidate-featured-image .wp-job-board-pro-uploaded-files img,
body #_candidate_front .cmb2-id--candidate-featured-image img,
body .profile-form-wrapper #_candidate_front .cmb2-id--candidate-featured-image img {
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    max-width: 300px !important;
    max-height: 300px !important;
    width: 300px !important;
    height: 300px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
}

/* Remove button for images - X style */
body #_candidate_front .wp-job-board-pro-remove-uploaded-file,
body #_candidate_front .remove-uploaded-file,
body .profile-form-wrapper #_candidate_front .wp-job-board-pro-remove-uploaded-file {
    background: #2c2929 !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -10px !important;
    right: -40px !important;
    left: auto !important;
    font-size: 0 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s !important;
    z-index: 10 !important;
    padding: 0 !important;
    text-indent: -9999px;
}

/* X icon using ::before pseudo-element */
body #_candidate_front .wp-job-board-pro-remove-uploaded-file::before,
body #_candidate_front .remove-uploaded-file::before,
body .profile-form-wrapper #_candidate_front .wp-job-board-pro-remove-uploaded-file::before {
    content: '✕' !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #fff !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    display: block !important;
}

body #_candidate_front .wp-job-board-pro-remove-uploaded-file:hover,
body #_candidate_front .remove-uploaded-file:hover {
    background: #dc2626 !important;
    transform: scale(1.15) !important;
}

/* File info text - centered below image */
body #_candidate_front .cmb2-id--candidate-featured-image .cmb-td p.cmb2-metabox-description,
body #_candidate_front .cmb2-id--candidate-featured-image .file-info,
body #_candidate_front .cmb2-id--candidate-featured-image p:not(:empty) {
    text-align: center !important;
    order: 2 !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #666 !important;
    width: 100% !important;
}

/* ============================================
   8. WYSIWYG / TINYMCE EDITOR
   ============================================ */
body #_candidate_front .wp-editor-wrap .wp-editor-container,
body #_candidate_front .mce-tinymce {
    box-shadow: var(--profile-shadow, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    background: var(--profile-white, #ffffff);
    overflow: hidden;
}

body #_candidate_front .mce-toolbar-grp {
    background: #f9fafb;
    border-bottom: 1px solid var(--profile-border-light, #f3f4f6);
    padding: 6px;
}

body #_candidate_front .wp-editor-area {
    background: var(--profile-white, #ffffff) !important;
}

/* ============================================
   9. MAP SECTION
   ============================================ */
body #_candidate_front .leaflet-container,
body #_candidate_front .pw-map,
body #_candidate_front [class*="map"] .leaflet-container {
    border-radius: var(--profile-radius-md, 12px) !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    overflow: hidden;
    box-shadow: var(--profile-shadow, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
}

body #_candidate_front .pw-map-search input,
body #_candidate_front [class*="map-location"] input {
    border-radius: var(--profile-radius-md, 12px) !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    background: var(--profile-white, #ffffff) !important;
    box-shadow: var(--profile-shadow, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
}

/* ============================================
   10. CHECKBOXES & RODO CONSENTS
   ============================================ */
body #_candidate_front .cmb-type-checkbox {
    background: var(--profile-white, #ffffff) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 16px !important;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid var(--profile-border-light, #f3f4f6);
}

body #_candidate_front .cmb-type-checkbox .cmb-td {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
}

body #_candidate_front input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    accent-color: var(--profile-primary, #2DD4BF);
    cursor: pointer;
    border-radius: 4px;
    margin-top: 2px;
}

body #_candidate_front .cmb-type-checkbox .cmb-td label {
    font-size: 14px;
    font-weight: 400;
    color: var(--profile-text-secondary, #6b7280);
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}

/* Hide label column for checkboxes */
body #_candidate_front .cmb-type-checkbox .cmb-th {
    display: none !important;
}

/* ============================================
   11. SUBMIT BUTTON
   ============================================ */
body #_candidate_front input[type="submit"],
body #_candidate_front button[type="submit"],
body #_candidate_front .button-primary {
    background: linear-gradient(135deg, var(--profile-primary-light, #5EEAD4) 0%, var(--profile-primary, #2DD4BF) 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.3) !important;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 20px;
}

body #_candidate_front input[type="submit"]:hover,
body #_candidate_front button[type="submit"]:hover,
body #_candidate_front .button-primary:hover {
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4) !important;
    transform: translateY(-2px);
}

/* ============================================
   12. DESCRIPTION / HELP TEXT
   ============================================ */
body #_candidate_front .cmb2-metabox-description,
body #_candidate_front p.cmb2-metabox-description {
    font-size: 11px !important;
    font-weight: 400;
    color: var(--profile-text-muted, #9ca3af) !important;
    margin-top: 6px;
    line-height: 1.5;
}

/* ============================================
   13. SECTION CARDS - White cloud cards
   ============================================ */

/* Each section group as a white cloud card */
body #_candidate_front .before-group-row {
    background: #ffffff !important;
    border-radius: var(--profile-radius-lg, 16px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
}

/* Remove margin from last section */
body #_candidate_front .before-group-row:last-of-type {
    margin-bottom: 0 !important;
}

/* Section inner container - 2 column grid layout */
body #_candidate_front .before-group-row-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    width: 100% !important;
}

/* Base styling for all section title rows */
body #_candidate_front .cmb-row.cmb-type-title {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* Main title styling - big, bold, dark */
body #_candidate_front .cmb-row.cmb-type-title h5.cmb2-metabox-title,
body #_candidate_front .cmb-row.cmb-type-title .cmb-td h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--profile-text-primary, #1f2937) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* Subtitle/Description below heading */
body #_candidate_front .cmb-row.cmb-type-title .cmb2-metabox-description,
body #_candidate_front .cmb-row.cmb-type-title p.cmb2-metabox-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #202124 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

/* Hide the label column for title rows */
body #_candidate_front .cmb-row.cmb-type-title .cmb-th {
    display: none !important;
}

/* Ensure cmb-td takes full width */
body #_candidate_front .cmb-row.cmb-type-title .cmb-td {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* ============================================
   14. OVERRIDE THEME DEFAULTS
   ============================================ */
/* Remove any conflicting backgrounds */
body #_candidate_front .cmb-row,
body #_candidate_front .cmb2-metabox>div {
    background: #fffffffc !important;
}

/* Remove extra file input styling */
body #_candidate_front input[type="file"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* Fix inner-list spacing */
body #_candidate_front .inner-list {
    padding: 0;
    margin: 0;
}

/* ============================================
   15. CANDIDATE SPECIFIC FIELD LAYOUTS
   ============================================ */

/* Candidate name (title) - full width */
body #_candidate_front .cmb2-id--candidate-title {
    grid-column: 1 / -1 !important;
}

/* Section titles - full width */
body #_candidate_front .before-group-row-inner .cmb-row.cmb-type-title {
    grid-column: 1 / -1 !important;
}

/* Candidate location (Miejscowość zamieszkania) - FULL WIDTH */
body #_candidate_front .cmb2-id--candidate-location {
    grid-column: 1 / -1 !important;
}

/* Image upload fields - full width */
body #_candidate_front .cmb2-id--candidate-featured-image,
body #_candidate_front .cmb2-id--candidate-cover-photo,
body #_candidate_front .cmb2-id--candidate-profile-photos {
    grid-column: 1 / -1 !important;
}

/* Social media section - full width */
body #_candidate_front .cmb2-id--candidate-socials,
body #_candidate_front .custom-socials-section {
    grid-column: 1 / -1 !important;
}

/* Description field - full width */
body #_candidate_front .cmb2-id--candidate-description {
    grid-column: 1 / -1 !important;
}

/* Map section - full width */
body #_candidate_front .cmb2-id--candidate-map-location {
    grid-column: 1 / -1 !important;
}

/* ============================================
   15.5 ALL ZGODY (CONSENTS) - FULL WIDTH, ONE PER ROW
   ============================================ */

/* All consent checkboxes - full width */
body #_candidate_front .cmb2-id-terms-and-conditions,
body #_candidate_front .cmb2-id-privacy,
body #_candidate_front .cmb2-id-marketing,
body #_candidate_front .cmb2-id--candidate-show-profile,
body #_candidate_front .cmb2-id--candidate-custom-rodo-enabled,
body #_candidate_front .cmb2-id--candidate-rodo,
body #_candidate_front .cmb-type-checkbox {
    grid-column: 1 / -1 !important;
}

/* RODO section - full width */
body #_candidate_front .cmb2-id--candidate-custom-rodo-enabled,
body #_candidate_front .cmb2-id--candidate-rodo {
    grid-column: 1 / -1 !important;
}

/* ============================================
   16. ZGODY (CONSENTS) STYLING - Same as employer
   ============================================ */

/* Remove separators from Zgody section */
body #_candidate_front .cmb2-id-terms-and-conditions,
body #_candidate_front .cmb2-id-privacy,
body #_candidate_front .cmb2-id-marketing,
body #_candidate_front .cmb2-id--candidate-show-profile,
body #_candidate_front .cmb2-id--candidate-custom-rodo-enabled {
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* Black labels for checkboxes in Zgody section */
body #_candidate_front .cmb2-id-terms-and-conditions label,
body #_candidate_front .cmb2-id-privacy label,
body #_candidate_front .cmb2-id-marketing label,
body #_candidate_front .cmb2-id--candidate-show-profile label,
body #_candidate_front .cmb2-id--candidate-custom-rodo-enabled label,
body #_candidate_front .cmb2-id-terms-and-conditions .cmb-td label,
body #_candidate_front .cmb2-id-privacy .cmb-td label,
body #_candidate_front .cmb2-id-marketing .cmb-td label,
body #_candidate_front .cmb2-id--candidate-show-profile .cmb-td label,
body #_candidate_front .cmb2-id--candidate-custom-rodo-enabled .cmb-td label {
    color: #202124 !important;
    font-weight: 400 !important;
}

/* Full width for description text (Nie możesz zrezygnować...) */
body #_candidate_front .before-group-row .cmb2-metabox-description,
body #_candidate_front .cmb-row p.cmb2-metabox-description,
body #_candidate_front .cmb-type-checkbox .cmb2-metabox-description,
body #_candidate_front .cmb-type-title .cmb2-metabox-description {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #6b7280 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================
   17. ALL CHECKBOXES AS iOS TOGGLE SWITCHES (Always ON & Grayed Out)
   ============================================ */

/* Hide the original checkbox - apply to all checkboxes in candidate profile */
body #_candidate_front .cmb-type-checkbox input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    /* Disable clicking */
}

/* Label styling for toggle */
body #_candidate_front .cmb-type-checkbox input[type="checkbox"]+label {
    position: relative !important;
    pointer-events: none !important;
    /* Disable clicking */
    padding-left: 60px !important;
    display: inline-block !important;
    line-height: 30px !important;
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
            user-select: none !important;
    font-weight: 400 !important;
    color: #202124 !important;
    min-height: 30px !important;
}

/* Switch Track (ON but grayed out) */
body #_candidate_front .cmb-type-checkbox input[type="checkbox"]+label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 30px !important;
    background-color: #9ca3af !important;
    /* Grayed out track */
    border-radius: 9999px !important;
}

/* Switch Knob (Fixed at ON position and grayed out) */
body #_candidate_front .cmb-type-checkbox input[type="checkbox"]+label::after {
    content: '' !important;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    width: 26px !important;
    height: 26px !important;
    background-color: #e5e7eb !important;
    /* Knob grayed */
    border-radius: 50% !important;
    transform: translate(20px, -50%) !important;
    /* Fixed at ON */
    box-shadow: none !important;
}

/* ============================================
   17.5 MARKETING CHECKBOX - INTERACTIVE (not grayed out)
   ============================================ */

/* Enable the marketing checkbox to be clickable */
body #_candidate_front .cmb2-id-marketing input[type="checkbox"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

body #_candidate_front .cmb2-id-marketing input[type="checkbox"]+label {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Marketing - unchecked state (OFF) */
body #_candidate_front .cmb2-id-marketing input[type="checkbox"]:not(:checked)+label::before {
    background-color: #d1d5db !important;
}

body #_candidate_front .cmb2-id-marketing input[type="checkbox"]:not(:checked)+label::after {
    background-color: #fff !important;
    transform: translate(0, -50%) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Marketing - checked state (ON) - teal color */
body #_candidate_front .cmb2-id-marketing input[type="checkbox"]:checked+label::before {
    background-color: #2DD4BF !important;
}

body #_candidate_front .cmb2-id-marketing input[type="checkbox"]:checked+label::after {
    background-color: #fff !important;
    transform: translate(20px, -50%) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Hover effect for marketing checkbox */
body #_candidate_front .cmb2-id-marketing input[type="checkbox"]+label:hover::before {
    opacity: 0.9;
}

/* ============================================
   19. RESPONSIVE - Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    body #_candidate_front .before-group-row-inner,
    body .profile-form-wrapper form#_candidate_front .before-group-row-inner,
    body form#_candidate_front .before-group-row-inner,
    body #_candidate_front .before-group-row.columns-2 .before-group-row-inner {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    body #_candidate_front .before-group-row-inner > .cmb-row,
    body #_candidate_front .before-group-row.columns-2 .before-group-row-inner > .cmb-row {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    body #_candidate_front .cmb2-id--candidate-address,
    body #_candidate_front .cmb2-id--candidate-location {
        grid-column: 1 / -1 !important;
    }

    /* Cloud cards - smaller padding on mobile */
    body #_candidate_front .before-group-row {
        padding: 16px 2px 2px 28px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 12px !important;
    }

    body #_candidate_front input[type="submit"],
    body #_candidate_front .button-primary {
        width: 100%;
        text-align: center;
    }

    body #_candidate_front .cmb-row {
        padding: 10px 0;
    }

    /* Mobile: smaller profile photo (150x150) */
    body #_candidate_front .wp-job-board-pro-uploaded-files img,
    body #_candidate_front .uploaded-files-list img {
        max-width: 150px !important;
        max-height: 150px !important;
        width: 150px !important;
        height: 150px !important;
    }
}

/* ============================================
   20. REPEATABLE GROUPS (EDUCATION, EXPERIENCE, SKILLS)
   ============================================ */
body #_candidate_front .cmb-repeatable-group .cmb-repeat-group-field-row {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

body #_candidate_front .cmb-repeatable-group .cmb-group-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    width: 100%;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body #_candidate_front .cmb-repeatable-group .cmb-repeat-group-field-row .cmb-row {
    flex: 1 1 calc(50% - 16px) !important;
    padding: 0 !important;
    margin: 0 !important;
}

body #_candidate_front .cmb-repeatable-group .cmb-repeat-group-field-row .cmb-row:has(textarea) {
    flex: 1 1 100% !important;
}

body #_candidate_front .cmb-repeatable-group .cmb-row.cmb-remove-row {
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}

body #_candidate_front .cmb-repeatable-group .button.cmb-remove-group-row {
    background: #ef4444 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.2) !important;
}

body #_candidate_front .cmb-repeatable-group .button.cmb-remove-group-row:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
}

/* Dashicons remove button - X style positioning */
body .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row,
body #_candidate_front .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row,
body .profile-form-wrapper .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
         appearance: none !important;
    background: none !important;
    border: none !important;
    position: absolute !important;
    left: 10px !important;
    top: 19px !important;
    line-height: 1em !important;
    padding: 2px 6px 3px !important;
    opacity: 0.5 !important;
}

body .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row:not([disabled]),
body #_candidate_front .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row:not([disabled]),
body .profile-form-wrapper .cmb2-metabox button.dashicons-before.dashicons-no-alt.cmb-remove-group-row:not([disabled]) {
    cursor: pointer !important;
    color: #000000 !important;
    opacity: 1 !important;
}

/* Group row handle positioning */
body .cmb-type-group .cmb-row .cmbhandle,
body #_candidate_front .cmb-type-group .cmb-row .cmbhandle,
body .profile-form-wrapper .cmb-type-group .cmb-row .cmbhandle {
    position: absolute !important;
    right: 10px !important;
    top: 13px !important;
}

body #_candidate_front .cmb-add-row .button.cmb-add-group-row {
    background: linear-gradient(135deg, var(--profile-primary-light, #5EEAD4) 0%, var(--profile-primary, #2DD4BF) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(45, 212, 191, 0.3) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

body #_candidate_front .cmb-add-row .button.cmb-add-group-row:hover {
    box-shadow: 0 6px 15px rgba(45, 212, 191, 0.4) !important;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    body #_candidate_front .cmb-repeatable-group .cmb-repeat-group-field-row .cmb-row {
        flex: 1 1 100% !important;
    }
}
/* ====================================
   JOB PREVIEW PAGE STYLES
   Preview after "Zapisz i podejrzyj" 
   ==================================== */

/* Action Bar */
.job-preview-action-bar {
    padding: 120px 0 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef0f4 100%);
    border-bottom: 1px solid #e2e5ea;
}

.job-preview-action-bar-bottom {
    padding: 24px 0;
    background: #fff;
    border-top: 1px solid #e2e5ea;
    margin-top: 30px;
}

.job-preview-action-bar-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Preview Notice */
.job-preview-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    background: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #e2e5ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.job-preview-notice i {
    font-size: 18px;
    color: #7b38d8;
}

/* Buttons Container */
.job-preview-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Preview Action Buttons */
.btn-preview-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-preview-action i {
    font-size: 14px;
}

/* Edit Button - Outline Style */
.btn-preview-edit {
    background: #fff;
    color: #555;
    border: 1.5px solid #d0d4da;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-preview-edit:hover {
    background: #f4f5f7;
    border-color: #b0b5be;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Submit Button - Gradient Teal */
.btn-preview-submit {
    background: linear-gradient(135deg, #5ec4b8 0%, #4DB6AC 50%, #3d9e94 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(77, 182, 172, 0.35);
}

.btn-preview-submit:hover {
    background: linear-gradient(135deg, #6dd0c4 0%, #5ec4b8 50%, #4DB6AC 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(77, 182, 172, 0.45);
}

/* Full-width content in preview mode (no sidebar) */
.job-preview-new-design .rj-preview-content .rj-main-content {
    grid-column: 1 / -1 !important;
    max-width: 100%;
}

.job-preview-new-design .rj-content-grid {
    display: block;
}

/* Wrapper overrides for preview embedded context */
.job-preview-new-design .rj-job-wrapper {
    margin: 0;
    padding: 0;
}

.job-preview-new-design .rj-container {
    padding-top: 0;
}

/* Override page background */
.job-submission-preview-form-wrapper.job-preview-new-design {
    background: #f5f5f7;
}

/* Force full width within the submit-job page container */
body .job-submission-preview-form-wrapper.job-preview-new-design {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .job-preview-action-bar {
        padding: 70px 0 12px;
    }

    .job-preview-action-bar-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0 10px;
    }

    .job-preview-notice {
        font-size: 13px;
        padding: 8px 14px;
    }

    .job-preview-notice span {
        line-height: 1.4;
    }

    .job-preview-buttons {
        justify-content: stretch;
    }

    .btn-preview-action {
        flex: 1;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Add left/right margins for the whole preview content on mobile */
    .job-preview-new-design .rj-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .job-preview-action-bar-bottom .job-preview-action-bar-inner {
        padding: 0 10px;
    }

    /* Scope dashboard row margins only for the preview page */
    .inner-dashboard.container-fluid>.row:has(.job-preview-new-design) {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .job-preview-action-bar {
        padding: 30px 0 10px;
    }

    .btn-preview-action {
        padding: 9px 12px;
        font-size: 12px;
        border-radius: 8px;
    }
}

/* ====================================
   JOB SUBMIT DONE / SUCCESS PAGE
   ==================================== */

.submission-form-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 120px 20px 40px;
    text-align: center;
}

.submission-form-wrapper p,
.submission-form-wrapper>* {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 40px 48px;
    max-width: 520px;
    width: 100%;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* When the template outputs raw text (no wrapping <p>) */
.submission-form-wrapper {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 40px 48px;
    max-width: 520px;
    margin: 120px auto 40px;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    min-height: auto;
}

/* Reset child elements when wrapper is the card itself */
.submission-form-wrapper p,
.submission-form-wrapper>* {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.submission-form-wrapper a {
    display: inline-block;
    margin-top: 16px;
    background: linear-gradient(135deg, #5ec4b8 0%, #4DB6AC 50%, #3d9e94 100%);
    color: #fff !important;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(77, 182, 172, 0.35);
}

.submission-form-wrapper a:hover {
    background: linear-gradient(135deg, #6dd0c4 0%, #5ec4b8 50%, #4DB6AC 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(77, 182, 172, 0.45);
}

@media (max-width: 768px) {
    .submission-form-wrapper {
        margin: 80px 10px 20px;
        padding: 28px 24px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .submission-form-wrapper {
        margin: 50px 10px 20px;
        padding: 24px 18px;
        font-size: 14px;
        border-radius: 12px;
    }

    .submission-form-wrapper a {
        padding: 9px 22px;
        font-size: 13px;
    }
}
/* =========================================
   Single Candidate Page - Redesign
   Overrides and Specifics
   ========================================= */

/* Use the employer styles for the main layout but add candidate specific sections */

/* Timeline for Experience and Education */
.rj-candidate-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
}

.rj-candidate-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #e9ecef;
}

.rj-timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.rj-timeline-item:last-child {
    margin-bottom: 0;
}

.rj-timeline-marker {
    position: absolute;
    left: -20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--superio-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.rj-timeline-marker.rj-marker-orange {
    border-color: #ff7b00;
}

.rj-timeline-marker.rj-marker-orange i {
    color: #ff7b00;
}

.rj-timeline-marker i {
    font-size: 14px;
    color: var(--superio-theme-color);
}

.rj-timeline-content {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    margin-left: 20px;
    transition: all 0.3s;
}

.rj-timeline-content:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-color: #e8e8e8;
}

.rj-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.rj-timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.rj-timeline-date {
    font-size: 13px;
    color: #fff;
    background: var(--superio-theme-color);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.rj-marker-orange+.rj-timeline-content .rj-timeline-date {
    background: #ff7b00;
}

.rj-timeline-subtitle {
    font-size: 14px;
    color: var(--superio-theme-color);
    font-weight: 500;
    margin-bottom: 12px;
}

.rj-marker-orange+.rj-timeline-content .rj-timeline-subtitle {
    color: #ff7b00;
}

.rj-timeline-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.rj-timeline-desc p {
    margin-bottom: 10px;
}

.rj-timeline-desc p:last-child {
    margin-bottom: 0;
}

/* Skills Cloud */
.rj-candidate-skills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.rj-skill-tag {
    font-size: 13px;
    color: #444;
    background: #f4f5f7;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid #eee;
}

.rj-skill-tag:hover {
    background: var(--superio-theme-color);
    color: #fff;
    border-color: var(--superio-theme-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .rj-timeline-header {
        flex-direction: column;
    }

    .rj-timeline-content {
        padding: 15px;
    }

    .rj-skill-tag {
        font-size: 12px;
        padding: 6px 14px;
    }
}

/* Hide default candidate details that are replaced by the new header and tiles */
body.single-candidate .candidate-detail-header,
body.single-candidate .candidate-top-wrapper,
body.single-candidate .candidate-detail-buttons {
    display: none !important;
}

body.single-candidate .candidate-single-v1 {
    background: transparent;
    color: #111;
}

body.single-candidate .candidate-content-area,
body.single-candidate .content-single-candidate {
    padding: 0;
    margin: 0;
    background: transparent;
}

body.single-candidate .box-detail {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: none;
}

/* Candidate Details Tiles (Replicating Employer/Job Listing Tiles) */
.rj-candidate-tiles .rj-tiles-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 1199px) {
    .rj-candidate-tiles .rj-tiles-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .rj-candidate-tiles .rj-tiles-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .rj-candidate-tiles .rj-tiles-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Round candidate action buttons */
.rj-candidate-actions a.btn,
.rj-candidate-actions button,
.rj-candidate-actions .theme-btn {
    border-radius: 60px !important;
}

.rj-candidate-tiles .rj-tile {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    background: #fff !important;
    border: 1px solid #eef0f2 !important;
    padding: 16px 24px !important;
    border-radius: 16px !important;
    font-size: 16px;
    color: #111;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    min-height: 60px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}

.rj-candidate-tiles .rj-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rj-candidate-tiles .rj-tile .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rj-candidate-tiles .rj-tile .icon i,
.rj-candidate-tiles .rj-tile .icon svg {
    font-size: 20px;
    color: #666;
}

/* Icon Colors */
.rj-candidate-tiles .rj-icon-orange .icon {
    background: rgba(249, 115, 22, 0.1);
}

.rj-candidate-tiles .rj-icon-orange .icon i,
.rj-candidate-tiles .rj-icon-orange .icon svg {
    color: #f97316 !important;
}

.rj-candidate-tiles .rj-icon-pink .icon {
    background: rgba(217, 70, 239, 0.1);
}

.rj-candidate-tiles .rj-icon-pink .icon i,
.rj-candidate-tiles .rj-icon-pink .icon svg {
    color: #d946ef !important;
}

.rj-candidate-tiles .rj-icon-green .icon {
    background: rgba(34, 197, 94, 0.1);
}

.rj-candidate-tiles .rj-icon-green .icon i,
.rj-candidate-tiles .rj-icon-green .icon svg {
    color: #22c55e !important;
}

.rj-candidate-tiles .rj-icon-blue .icon {
    background: rgba(59, 130, 246, 0.1);
}

.rj-candidate-tiles .rj-icon-blue .icon i,
.rj-candidate-tiles .rj-icon-blue .icon svg {
    color: #3b82f6 !important;
}

.rj-candidate-tiles .rj-icon-purple .icon {
    background: rgba(168, 85, 247, 0.1);
}

.rj-candidate-tiles .rj-icon-purple .icon i,
.rj-candidate-tiles .rj-icon-purple .icon svg {
    color: #a855f7 !important;
}

/* Labels vs Values (Mobile vs Desktop) */
.rj-candidate-tiles .rj-tile-content {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2;
    text-align: left;
    justify-content: center;
}

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

.rj-candidate-tiles .rj-tile-value {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111 !important;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}

@media (max-width: 768px) {
    .rj-candidate-tiles .rj-tiles-wrapper {
        grid-template-columns: 1fr;
    }

    .rj-candidate-tiles .rj-tile {
        padding: 12px 20px !important;
        gap: 12px !important;
    }
}
/* ========================================================== */
/* SCOPED CSS FOR CANDIDATES ARCHIVE PAGE (http://localhost/candidates/) */
/* ========================================================== */

/* 1. Sidebar profiling styling - specific to this page only */
body.page-template-page-candidates .widget_superio_user_short_profile,
body.page-template-page-candidates aside.sidebar.sidebar-left,
body.page-template-page-candidates .sidebar.sidebar-left,
body.page-template-page-candidates .ps-container.ps-theme-default {
    background: rgba(252, 252, 252, 0.91);
    /* #fcfcfce8 equivalent */
    background-color: rgba(255, 255, 255, 0.95);
    /* #fffffff2 equivalent */
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 2. Hide distance slider safely */
.page-template-page-candidates .filter-candidate-form .filter-distance {
    display: none !important;
}

/* 3. Style Shortlist (.btn-follow) button firmly top-right & round */
.page-template-page-candidates .candidate-block .btn-follow,
.page-template-page-candidates .candidate-block .btn-action-job,
.page-template-page-candidates .candidate-block .btn-add-candidate-shortlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 50% !important;
    /* perfectly round */
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 10;
    /* Make sure it stays clickable above candidate data */
}

/* Adjust icon inside the button to be perfectly centered */
.page-template-page-candidates .candidate-block .btn-follow i,
.page-template-page-candidates .candidate-block .btn-action-job i {
    position: static !important;
    /* Overwrite previous absolute positioning */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}