/* ============================================
   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);
    }
}

/* Desktop accordion overrides */
.apus-footer .footer-desktop-accordion {
    margin-top: 24px;
    border-top: 1px solid var(--footer-border);
}

.apus-footer .footer-desktop-accordion .footer-accordion-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

/* ===========================================
   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;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

/* ===========================================
   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: 2px;
  padding-right: 2px;

  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"]:not(.cv-file-selected),
  body .register-form-wrapper .ga-recaptcha,
  body #recaptcha-register-candidate,
  body #recaptcha-register-employer {
    width: 100%;
    clear: both;
    margin-left: 10px;
  }

  body .register-form-wrapper #recaptcha-register-candidate {
    margin-top: 20px;
  }

  /* 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 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
  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: visible;
}

/* 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%;
  }
}

/* --- Upload area w guest popup — compact, matching logged-in popup --- */
.guest-apply-popup-isolated .upload-file-btn-wrapper {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Reset label-can-drag to compact inline (no dashed border box) */
.guest-apply-popup-isolated .label-can-drag {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  display: inline-block !important;
}

.guest-apply-popup-isolated .label-can-drag .group-upload,
.guest-apply-popup-isolated .label-can-drag .form-group {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Selector must beat template.css: form.cmb-form .cmb-row[data-fieldtype="wp_job_board_pro_file"] .upload-file-btn */
.guest-apply-popup-isolated .inner form.cmb-form .upload-file-btn,
.guest-apply-popup-isolated .upload-file-btn {
  display: inline-block;
  background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(45, 212, 191, 0.2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.guest-apply-popup-isolated .inner form.cmb-form .upload-file-btn .text,
.guest-apply-popup-isolated .upload-file-btn .text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Reset .cmb-td styles when file is selected (parent has dashed border + padding) */
.guest-apply-popup-isolated .cmb-td:has(.cv-file-selected) {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
  min-height: 0 !important;
}

/* --- Wybrany plik CV - info tile + remove button --- */
.guest-apply-popup-isolated .cv-file-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  margin-top: 8px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.guest-apply-popup-isolated .cv-file-name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bug 2: Hide plugin's blue filename badge */
.guest-apply-popup-isolated .wp-job-board-pro-uploaded-files {
  display: none !important;
}

/* Bug 3: Hide plugin's inline file name display (text-inner with X) */
.guest-apply-popup-isolated .upload-file-btn .text-inner {
  display: none !important;
}

.guest-apply-popup-isolated .cv-file-remove {
  background: #e5e7eb;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.guest-apply-popup-isolated .cv-file-remove:hover {
  background: #ef4444;
  color: #fff;
}

/* ==========================================================================
   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%;
  }
}

/* ==========================================================================
   LOGGED-IN CANDIDATE APPLY POPUP
   Style WYŁĄCZNIE dla popupu aplikacji zalogowanego kandydata z CV.
   Prefiks .job-apply-internal-form-wrapper gwarantuje pełną izolację
   — nie dotknie popupów logowania, rejestracji ani aplikacji gościa.
   ========================================================================== */

/* --- Nagłówek "Aplikuj na to stanowisko" --- */
.job-apply-internal-form-wrapper .inner .widget-title {
  text-align: center;
  margin-bottom: 20px;
}

.job-apply-internal-form-wrapper .inner .widget-title span {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #1e293b;
  -webkit-text-fill-color: #1e293b;
}

/* --- Etykiety sekcji: "Wybierz CV" / "lub załaduj nowe" --- */
.job-apply-internal-form-wrapper .file-or-upload {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1e293b;
  margin: 16px 0 10px;
  text-align: center;
}

/* --- Karty CV (radio) --- */
.job-apply-internal-form-wrapper .list-file-cv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  background: #f8fafc;
  width: 100%;
  box-sizing: border-box;
}

.job-apply-internal-form-wrapper .list-file-cv:hover {
  border-color: #8b5cf6;
  background: #faf5ff;
}

/* Stan zaznaczenia */
.job-apply-internal-form-wrapper .list-file-cv:has(input:checked) {
  border-color: #8b5cf6;
  background: #faf5ff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* --- Szczegóły CV --- */
.job-apply-internal-form-wrapper .candidate-detail-cv {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.job-apply-internal-form-wrapper .candidate-detail-cv .icon_type {
  flex-shrink: 0;
}

.job-apply-internal-form-wrapper .candidate-detail-cv .icon_type i {
  font-size: 24px;
  color: #8b5cf6;
}

.job-apply-internal-form-wrapper .candidate-detail-cv .filename {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-apply-internal-form-wrapper .candidate-detail-cv .extension {
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6;
  background: #f3f0ff;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* --- Radio button --- */
.job-apply-internal-form-wrapper input[type="radio"] {
  accent-color: #8b5cf6;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Dropzone uploadu CV --- */
.job-apply-internal-form-wrapper .upload-file-btn-wrapper {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: #f8fafc;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

.job-apply-internal-form-wrapper .upload-file-btn-wrapper:hover {
  border-color: #2DD4BF;
  background: rgba(45, 212, 191, 0.03);
}

/* Przycisk "Wybierz plik" — teal gradient jak w popupie gościa */
.job-apply-internal-form-wrapper .upload-file-btn {
  display: inline-block;
  background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%);
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(45, 212, 191, 0.2);
}

.job-apply-internal-form-wrapper .upload-file-btn .text {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
}

.job-apply-internal-form-wrapper .cv_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- Checkbox regulaminu --- */
.job-apply-internal-form-wrapper .form-group label {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.job-apply-internal-form-wrapper input[type="checkbox"] {
  accent-color: #8b5cf6;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-top: 2px;
  flex-shrink: 0;
}

.job-apply-internal-form-wrapper .form-group label a {
  color: #8b5cf6;
  text-decoration: underline;
}

.job-apply-internal-form-wrapper .form-group label a:hover {
  color: #6366f1;
}

/* --- Przycisk "Aplikuj szybko" --- */
.job-apply-internal-form-wrapper .button-primary {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
  border: none !important;
  border-radius: 35px !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-top: 16px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
  text-transform: none;
}

.job-apply-internal-form-wrapper .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* --- Responsywność mobilna --- */
@media (max-width: 767px) {
  .job-apply-internal-form-wrapper .inner .widget-title span {
    font-size: 16px;
  }

  .job-apply-internal-form-wrapper .file-or-upload {
    font-size: 12px;
    margin: 12px 0 8px;
  }

  .job-apply-internal-form-wrapper .list-file-cv {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
  }

  .job-apply-internal-form-wrapper .candidate-detail-cv .filename {
    font-size: 12px;
  }

  .job-apply-internal-form-wrapper .candidate-detail-cv .extension {
    font-size: 10px;
    padding: 2px 6px;
  }

  .job-apply-internal-form-wrapper .candidate-detail-cv .icon_type i {
    font-size: 20px;
  }

  .job-apply-internal-form-wrapper .upload-file-btn-wrapper {
    padding: 16px;
  }

  .job-apply-internal-form-wrapper .upload-file-btn .text {
    font-size: 12px;
  }

  .job-apply-internal-form-wrapper .button-primary {
    height: 38px;
    font-size: 13px;
    margin-top: 12px;
  }
}
/* ==========================================================================
   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: #ffffff;
    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 STYLES MOVED TO resume-upload.css 
   ============================================ */


/* ============================================
   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;
    }
}

/* Mobile sidebar button - push below sticky header */
.inner-dashboard .mobile-sidebar-btn {
    margin-top: 70px !important;
    margin-bottom: 10px !important;
    color: black;
    font-weight: 600;
}

@media (min-width: 1350px) {
    body .box-dashboard-wrapper {
        padding: 0;
        margin: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
    }
}

/* Reset parent theme before-group-row styles inside dashboard-wrapper-v2 */
.dashboard-wrapper-v2 .before-group-row {
    background: none !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;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}
/* ============================================
   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;
}

/* Kotwica #otwarte-ogloszenia - offset pod sticky header
   (--zp-anchor-offset ustawia JS realna wysokoscia headera) */
#otwarte-ogloszenia {
    scroll-margin-top: calc(var(--zp-anchor-offset, 72px) + 16px);
}

/* Kafelek "Otwarte oferty" jako link do sekcji - wyglad bez zmian */
a.rj-tile.rj-tile-link,
a.rj-tile.rj-tile-link:hover,
a.rj-tile.rj-tile-link:focus {
    color: #111;
    text-decoration: none;
    cursor: pointer;
}

.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: 15px !important;
    padding-right: 15px !important;
}
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;
    color: black;
    display: flex !important;
    align-items: center;
    gap: 15px;
}

.sidebar.sidebar-right .close-sidebar-btn {
    text-align: right;
}

.sidebar .close-sidebar-icon {
    margin-right: 0;
    display: inline-block;
}
.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;
}

/* --- Package Grid Layout (5 pakietów: miejskie/gminne/powiatowe/wojewódzkie/ogólnopolskie) --- */
/* minmax(0, 1fr), bo przy 1fr kolumny wpadały na swoją szerokość min-content
   (5 x 257px = 1342px) i cały grid wylewał się poza kontener motywu (~1190px) —
   ostatni kafelek uciekał w prawo, a belka „Poznaj nas" wyglądała na węższą. */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    align-items: stretch;
}

/* Desktop: 5 kafelków potrzebuje więcej miejsca niż daje kontener motywu.
   Rozciągamy symetrycznie poza kontener grid ORAZ belkę „Poznaj nas",
   dokładnie o tyle samo, żeby obie miały identyczną szerokość. */
@media (min-width: 1401px) {

    .pkg-grid,
    .pkg-horizontal-free {
        width: auto;
        margin-inline: calc(-0.5 * (min(1560px, 100vw - 64px) - 100%));
    }
}

@media (max-width: 1400px) {
    .pkg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .pkg-grid {
        grid-template-columns: repeat(2, minmax(0, 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;
}

.pkg-free-cta-text {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #1e1e2f;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Desktop: napis mniejszy o 35% (15px → 9.75px), potem powiększony o 15% (→ 11.21px) */
@media (min-width: 769px) {
    .pkg-free-cta-text {
        font-size: 11.21px;
    }
}

.pkg-horizontal-free .pkg-free-contact-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 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;
    min-height: 0;
}

/* Belka „Poznaj nas" zostaje kompaktowa — bez 2-liniowych wierszy z kafelków. */
.pkg-features-free .pkg-feature-text {
    -webkit-line-clamp: 1;
}

.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;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    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;
    min-width: 0;
}

.pkg-feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fafafa;
    border-radius: 6px;
    position: relative;
    min-width: 0;
}

/* Desktop/tablet: stała wysokość wiersza (2 linie tekstu), żeby listy zalet
   w kolejnych kafelkach leżały dokładnie w tych samych liniach. */
@media (min-width: 769px) {
    .pkg-grid .pkg-feature-item {
        min-height: 40px;
    }
}

.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;
    min-width: 0;
    font-size: 12px;
    color: #374151;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

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

/* --- Addony cennika (grupy FB + dopasowania AI) --- */
.pkg-addons-row {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    align-items: stretch;
}

.pkg-addon-card {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 20px;
    padding: 36px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
    display: flex;
    flex-direction: column;
}

.pkg-addon-fb {
    background: linear-gradient(135deg, #1e1b4b 0%, #3b0764 45%, #5b21b6 100%);
}

.pkg-addon-ai {
    /* Ten sam gradient co napis „niż okazjonalnie?" (.gradient-text-orange) */
    background: linear-gradient(135deg, #ff4757 0%, #ffa502 100%);
}

.pkg-addon-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 18px;
}

.pkg-addon-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.2;
}

.pkg-addon-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 22px;
}

.pkg-addon-highlight {
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    padding: 2px 6px;
    border-radius: 6px;
}

.pkg-addon-stat {
    display: flex;
    flex-direction: column;
    margin: 4px 0 18px;
}

.pkg-addon-stat-number {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.pkg-addon-stat-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pkg-addon-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 22px;
    transition: background 0.2s, transform 0.2s;
}

.pkg-addon-link:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
    color: #fff;
}

.pkg-addon-price {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 18px;
    margin-top: auto;
}

.pkg-addon-price span {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}

.pkg-addon-btn {
    align-self: flex-start;
    background: #fff;
    color: #1e1b4b;
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, opacity 0.2s;
}

.pkg-addon-btn:hover {
    transform: translateY(-2px);
    background: #f3f3f3;
}

.pkg-addon-btn.is-added {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.pkg-addon-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* Stan "dodano" dla przycisku ogłoszenia + link do koszyka */
.pkg-submit-btn-v2.is-added {
    background: #10b981;
    border-color: #10b981;
}

.pkg-btn-view-cart {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 24px;
    text-align: center;
    width: 100%;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    border-radius: 35px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pkg-btn-view-cart:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(190, 34, 255, 0.35);
}

/* --- Modal "Najpierw dodaj ogłoszenie" --- */
.zp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.zp-modal[aria-hidden="false"] {
    display: flex;
}

.zp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 27, 0.6);
    backdrop-filter: blur(2px);
}

.zp-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    padding: 40px 32px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: zpModalIn 0.2s ease-out;
}

@keyframes zpModalIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.zp-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.zp-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.zp-modal-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1e1b4b;
}

.zp-modal-text {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 24px;
}

.zp-modal-cta {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s;
}

.zp-modal-cta:hover {
    transform: translateY(-2px);
}

/* --- 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;
    }

    .pkg-addons-row {
        flex-direction: column;
    }

    .pkg-addon-card {
        /* W kolumnie flex-basis:0 + overflow:hidden zwijał kartę do zera — wysokość wg treści. */
        flex: 0 0 auto;
        width: 100%;
        padding: 28px;
    }
}
/* ===============================================
   Dział /raporty/ — Barometr, Puls rynku pracy
   Barwy marki: fiolet #BE22FF → turkus #74D6CE.
   Font Poppins (globalny). Szerokości i breakpointy
   zgodne z resztą portalu (1240/1400, 992/768/576).
   =============================================== */

:root {
    /* marka */
    --zpr-accent: #BE22FF;
    --zpr-accent-2: #aa00ff;
    --zpr-accent-deep: #6B0F99;
    --zpr-accent-soft: #c084fc;
    --zpr-accent-pale: #f3e8ff;
    --zpr-teal: #74D6CE;
    --zpr-teal-2: #2DD4BF;
    --zpr-teal-pale: #f0fdfa;
    --zpr-grad: linear-gradient(135deg, #BE22FF 0%, #aa00ff 50%, #74D6CE 100%);
    --zpr-grad-btn: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    --zpr-dark: linear-gradient(135deg, #1e1b4b 0%, #3b0764 45%, #5b21b6 100%);
    /* tusz i powierzchnie */
    --zpr-ink: #1e1e2f;
    --zpr-ink-2: #6b7280;
    --zpr-ink-3: #9ca3af;
    --zpr-surface: #ffffff;
    --zpr-surface-2: #F5F7FC;
    --zpr-line: #e5e7eb;
    /* stany */
    --zpr-up: #10b981;
    --zpr-down: #ef4444;
    /* geometria marki */
    --zpr-radius: 20px;
    --zpr-radius-sm: 12px;
    --zpr-pill: 50px;
    --zpr-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --zpr-shadow-lg: 0 10px 30px rgba(30, 27, 75, 0.10);
    --zpr-glow: 0 4px 15px rgba(190, 34, 255, 0.35);
}

.zpr-page {
    background: var(--zpr-surface);
    padding: 0;
    color: var(--zpr-ink);
}

/* Sticky spis treści wymaga, by żaden przodek nie tworzył kontekstu przewijania.
   Motyw ma `html, body { overflow-x: hidden }` (guard na poziomy scroll) — WYSTARCZY
   samo `html`, żeby zabić position:sticky. `clip` tnie identycznie, ale kontekstu
   przewijania NIE tworzy, więc sticky działa. */
html:has(body.single-zp_raport),
html:has(body.post-type-archive-zp_raport),
body.single-zp_raport,
body.post-type-archive-zp_raport {
    overflow-x: clip;
}

.zpr-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.zpr-container--wide { max-width: 1500px; }

/* ── Animacje ── */
@keyframes zprFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zprGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zprGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zprFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zprFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

.zpr-chart svg .zpr-bar {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: zprGrowX 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zpr-chart svg .zpr-col {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: zprGrowY 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zpr-chart svg .zpr-fade { animation: zprFadeIn 0.5s ease both; }

@media (prefers-reduced-motion: reduce) {
    .zpr-page *, .zpr-page *::before, .zpr-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Typografia sekcji ── */
.zpr-eyebrow {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--zpr-ink-2);
    margin: 0 0 12px;
}

.zpr-h2 {
    text-align: center;
    font-size: clamp(23px, 2.9vw, 34px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--zpr-ink);
    margin: 0 0 16px;
}

.zpr-h2 em,
.zpr-hero-title em,
.zpr-cta-band h2 em {
    display: block;
    font-style: italic;
    font-weight: 700;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-section-lead {
    text-align: center;
    max-width: 46em;
    margin: 0 auto 48px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--zpr-ink-2);
}

.zpr-section { padding: 96px 0; }
.zpr-section--alt { background: var(--zpr-surface-2); }

/* ── Przyciski (pill, jak w całym portalu) ── */
.zpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--zpr-pill);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.zpr-btn--primary {
    background: var(--zpr-grad-btn);
    color: #ffffff;
    box-shadow: var(--zpr-glow);
}

.zpr-btn--primary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(190, 34, 255, 0.45);
}

.zpr-btn--ghost {
    background: transparent;
    color: var(--zpr-ink);
    border: 1.5px solid var(--zpr-line);
}

.zpr-btn--ghost:hover {
    color: var(--zpr-accent-deep);
    border-color: var(--zpr-accent);
    transform: translateY(-2px);
}

.zpr-btn--light { background: #ffffff; color: #3b0764; }
.zpr-btn--light:hover { color: #3b0764; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }

.zpr-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
}

/* ══════════════════════════════════════════════
   HERO (hub)
   ══════════════════════════════════════════════ */
.zpr-hero {
    position: relative;
    overflow: hidden;
    padding: 84px 20px 72px;
    text-align: center;
    background: var(--zpr-surface);
}

.zpr-hero::before,
.zpr-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
    pointer-events: none;
    animation: zprFloat 14s ease-in-out infinite;
}

.zpr-hero::before {
    width: 620px; height: 620px; top: -300px; left: -170px;
    background: radial-gradient(circle, rgba(190, 34, 255, 0.45), transparent 70%);
}

.zpr-hero::after {
    width: 560px; height: 560px; top: -240px; right: -150px;
    background: radial-gradient(circle, rgba(116, 214, 206, 0.45), transparent 70%);
    animation-delay: -7s;
}

.zpr-hero-inner { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; }

.zpr-hero-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--zpr-accent-deep);
    background: rgba(190, 34, 255, 0.08);
    border-radius: var(--zpr-pill);
    padding: 9px 20px;
    margin: 0 0 24px;
    animation: zprFadeUp 0.6s ease both;
}

.zpr-hero-title {
    font-size: clamp(29px, 4.3vw, 48px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--zpr-ink);
    margin: 0 0 20px;
    animation: zprFadeUp 0.6s ease 0.08s both;
}

.zpr-hero-lead {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    color: var(--zpr-ink-2);
    max-width: 42em;
    margin: 0 auto;
    animation: zprFadeUp 0.6s ease 0.16s both;
}

.zpr-hero .zpr-btn-row { animation: zprFadeUp 0.6s ease 0.22s both; }

/* Blok "podglądu danych" — odpowiednik mockupu produktu */
.zpr-hero-preview {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 54px auto 0;
    padding: 18px;
    border-radius: 28px;
    background: var(--zpr-grad);
    box-shadow: 0 24px 60px rgba(107, 15, 153, 0.22);
    animation: zprFadeUp 0.7s ease 0.3s both;
}

.zpr-hero-preview-inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px 28px;
    text-align: left;
}

.zpr-hero-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.zpr-hero-preview-head strong { font-size: 17px; font-weight: 700; color: var(--zpr-ink); }
.zpr-hero-preview-head span { font-size: 13px; color: var(--zpr-ink-2); }

.zpr-hero-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.zpr-hero-mini {
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius-sm);
    padding: 16px 18px;
}

.zpr-hero-mini b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-hero-mini span { font-size: 12.5px; color: var(--zpr-ink-2); }

/* Pasek statystyk */
.zpr-hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 28px auto 0;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow);
    overflow: hidden;
    animation: zprFadeUp 0.6s ease 0.36s both;
}

.zpr-hero-stat { padding: 26px 20px; text-align: center; border-right: 1px solid var(--zpr-line); }
.zpr-hero-stat:last-child { border-right: none; }

.zpr-hero-stat-value {
    display: block;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-hero-stat-label { display: block; margin-top: 4px; font-size: 13px; color: var(--zpr-ink-2); }

/* ── Bento "jak to działa" ── */
.zpr-how {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.zpr-how-card {
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: var(--zpr-shadow);
    display: flex;
    flex-direction: column;
    animation: zprFadeUp 0.6s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Karta wiodąca: ciemny gradient marki (jak karty addonów w cenniku) —
   biały tekst ma na nim pełny kontrast. Selektory wzmocnione o .zpr-page,
   bo motyw rodzic potrafi nadpisać kolory nagłówków w treści. */
.zpr-how-card--large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: var(--zpr-dark);
    color: #ffffff;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(59, 7, 100, 0.28);
}

.zpr-page .zpr-how-card--large h3,
.zpr-page .zpr-how-card--large p,
.zpr-page .zpr-how-card--large .zpr-how-stat b,
.zpr-page .zpr-how-card--large .zpr-how-stat span { color: #ffffff; }

.zpr-page .zpr-how-card--large p { color: rgba(255, 255, 255, 0.88); }

.zpr-how-card--large .zpr-how-step {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.zpr-how-card:nth-child(2) { animation-delay: 0.08s; }
.zpr-how-card:nth-child(3) { animation-delay: 0.16s; }

.zpr-how-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--zpr-grad-btn);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 18px;
}

.zpr-how-card h3 { font-size: 19px; font-weight: 700; color: var(--zpr-ink); margin: 0 0 10px; }
.zpr-how-card p { font-size: 14.5px; line-height: 1.65; color: var(--zpr-ink-2); margin: 0; }
.zpr-how-card--large h3 { font-size: 24px; }
.zpr-how-card--large p { font-size: 15.5px; }

.zpr-how-stat {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.zpr-how-stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.zpr-how-stat span { font-size: 13.5px; opacity: 0.85; }

/* ══════════════════════════════════════════════
   WYSZUKIWARKA RAPORTÓW (hub)
   ══════════════════════════════════════════════ */
.zpr-finder {
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: var(--zpr-shadow);
    margin-bottom: 34px;
}

.zpr-finder-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.zpr-finder-input {
    width: 100%;
    font-size: 16px;
    font-family: inherit;
    padding: 15px 22px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-pill);
    background: var(--zpr-surface-2);
    color: var(--zpr-ink);
    outline: none;
    transition: all 0.2s ease;
}

.zpr-finder-input:focus {
    border-color: var(--zpr-accent);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(190, 34, 255, 0.12);
}

.zpr-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.zpr-chip {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--zpr-pill);
    border: 1.5px solid var(--zpr-line);
    background: #ffffff;
    color: var(--zpr-ink-2);
    cursor: pointer;
    transition: all 0.18s ease;
}

.zpr-chip:hover { border-color: var(--zpr-accent); color: var(--zpr-accent-deep); }

.zpr-chip.is-active {
    background: var(--zpr-grad-btn);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(190, 34, 255, 0.30);
}

.zpr-finder-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--zpr-line);
    font-size: 13.5px;
    color: var(--zpr-ink-2);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.zpr-finder-meta strong { color: var(--zpr-ink); font-weight: 700; }

.zpr-empty {
    display: none;
    text-align: center;
    padding: 46px 20px;
    font-size: 16px;
    color: var(--zpr-ink-2);
    background: var(--zpr-surface);
    border-radius: 24px;
    box-shadow: var(--zpr-shadow);
}

.zpr-empty.is-visible { display: block; }

/* ── Siatka raportów ── */
.zpr-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* W układzie ze spisem treści zostaje węższa kolumna — trzy karty w rzędzie
   robiłyby się nieczytelne, więc schodzimy do dwóch. */
.zpr-lib-main .zpr-list { grid-template-columns: repeat(2, 1fr); }
.zpr-lib-main .zpr-card--featured { grid-column: span 2; }

.zpr-card {
    display: flex;
    flex-direction: column;
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 28px 26px;
    text-decoration: none;
    box-shadow: var(--zpr-shadow);
    animation: zprFadeUp 0.5s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.zpr-card.is-hidden { display: none; }

/* wyróżniony (najnowszy) — gradientowa ramka, technika z cennika */
.zpr-card--featured {
    grid-column: span 2;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--zpr-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.zpr-card-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.zpr-card-type,
.zpr-card-date {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--zpr-pill);
    padding: 6px 14px;
}

.zpr-card-type { background: rgba(190, 34, 255, 0.09); color: var(--zpr-accent-deep); }
.zpr-card-type--puls { background: rgba(116, 214, 206, 0.18); color: #0f766e; }
.zpr-card-date { background: var(--zpr-surface-2); color: var(--zpr-ink-2); }

.zpr-card-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--zpr-ink);
    margin: 0 0 10px;
}

.zpr-card--featured .zpr-card-title { font-size: clamp(22px, 2.4vw, 28px); }

.zpr-card-excerpt {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--zpr-ink-2);
    margin: 0 0 18px;
    flex-grow: 1;
}

.zpr-card-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--zpr-accent-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.zpr-card-arrow { transition: transform 0.18s ease; display: inline-block; }
.zpr-card:hover .zpr-card-arrow { transform: translateX(5px); }

/* ── FAQ: dwie kolumny ── */
.zpr-faq-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 44px;
    align-items: start;
}

.zpr-faq-aside { text-align: left; }

.zpr-faq-aside .zpr-eyebrow,
.zpr-faq-aside .zpr-h2 { text-align: left; }

.zpr-faq-aside .zpr-h2 { font-size: clamp(26px, 3vw, 36px); }

.zpr-faq-aside p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--zpr-ink-2);
    margin: 0 0 22px;
}

.zpr-faq { display: grid; gap: 12px; }

.zpr-faq details {
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow);
    transition: box-shadow 0.18s ease;
}

.zpr-section--alt .zpr-faq details { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.zpr-faq details[open] { box-shadow: var(--zpr-shadow-lg); }

.zpr-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--zpr-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.zpr-faq summary::-webkit-details-marker { display: none; }

.zpr-faq summary::after {
    content: '+';
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(190, 34, 255, 0.09);
    color: var(--zpr-accent-deep);
    font-size: 19px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    transition: transform 0.2s ease;
}

.zpr-faq details[open] summary::after { content: '−'; transform: rotate(180deg); }

.zpr-faq details p {
    margin: 0;
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--zpr-ink-2);
}

.zpr-faq a { color: var(--zpr-accent-deep); }

/* ── CTA band ── */
.zpr-cta-band {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 68px 40px;
    text-align: center;
    background: var(--zpr-dark);
    color: #ffffff;
    margin: 0 0 90px;
}

.zpr-cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.6), transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.6), transparent 70%);
    pointer-events: none;
}

.zpr-cta-band > * { position: relative; z-index: 1; }

.zpr-cta-band h2 {
    font-size: clamp(21px, 2.9vw, 32px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #ffffff;
    margin: 0 0 14px;
}

.zpr-cta-band h2 em { color: var(--zpr-accent-soft); background: none; -webkit-text-fill-color: currentColor; }

.zpr-cta-band p {
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 40em;
    margin: 0 auto;
}

/* ── Dla mediów ── */
.zpr-press {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 34px 36px;
    box-shadow: var(--zpr-shadow);
}

.zpr-press h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--zpr-ink); }
.zpr-press p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--zpr-ink-2); max-width: 42em; }

/* ── Blok SEO ── */
.zpr-seo { max-width: 860px; margin: 0 auto; }
.zpr-seo p { font-size: 15.5px; line-height: 1.75; color: var(--zpr-ink-2); margin: 0 0 16px; }
.zpr-seo a { color: var(--zpr-accent-deep); font-weight: 600; }

/* ══════════════════════════════════════════════
   POJEDYNCZY RAPORT
   ══════════════════════════════════════════════ */
.zpr-report-head {
    position: relative;
    overflow: hidden;
    padding: 48px 20px 56px;
    background: var(--zpr-surface-2);
}

.zpr-report-head::before {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    top: -430px; right: -190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 34, 255, 0.28), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.zpr-report-head-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.zpr-breadcrumb { font-size: 13px; color: var(--zpr-ink-2); margin: 0 0 24px; display: flex; gap: 8px; }
.zpr-breadcrumb a { color: var(--zpr-ink-2); text-decoration: none; }
.zpr-breadcrumb a:hover { color: var(--zpr-accent-deep); }

.zpr-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--zpr-accent-deep);
    background: rgba(190, 34, 255, 0.09);
    border-radius: var(--zpr-pill);
    padding: 8px 18px;
    margin: 0 0 18px;
}

.zpr-title {
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--zpr-ink);
    margin: 0 0 16px;
    max-width: 20em;
}

.zpr-meta { font-size: 14px; color: var(--zpr-ink-2); margin: 0 0 14px; }

.zpr-lead { font-size: 17.5px; line-height: 1.62; color: var(--zpr-ink-2); margin: 0; max-width: 46em; }

/* Layout: sticky spis treści + treść */
.zpr-report-body { padding: 56px 0 32px; }

.zpr-report-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ── Spis treści działu na /raporty/ ──────────────────────────────────
   Ten sam układ co w pojedynczym raporcie: przyklejona kolumna na desktopie,
   pasek u dołu ekranu na mobile. Filtrowanie dzieje się w przeglądarce —
   żadnego przeładowania strony. */

.zpr-lib {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.zpr-lib-nav {
    position: sticky;
    top: 100px;
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    padding: 22px 20px;
    box-shadow: var(--zpr-shadow);
}

.zpr-lib-types { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }

.zpr-lib-type {
    width: 100%;
    display: block;
    text-align: left;
    cursor: pointer;
    padding: 11px 13px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: transparent;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.zpr-lib-type:hover { background: rgba(190, 34, 255, 0.06); }

.zpr-lib-type.is-active {
    background: rgba(190, 34, 255, 0.08);
    border-color: var(--zpr-accent-soft);
}

.zpr-lib-type-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zpr-lib-type-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--zpr-ink);
    line-height: 1.3;
}

.zpr-lib-type.is-active .zpr-lib-type-name { color: var(--zpr-accent-deep); }

.zpr-lib-type-n {
    flex: none;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(30, 27, 75, 0.07);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--zpr-ink-2);
}

.zpr-lib-type.is-active .zpr-lib-type-n {
    background: var(--zpr-accent);
    color: #fff;
}

.zpr-lib-type-desc {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--zpr-ink-3);
}

.zpr-lib-subtitle { margin-top: 20px; }
.zpr-lib-years { display: flex; flex-wrap: wrap; gap: 6px; }

.zpr-lib-reset {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--zpr-accent-deep);
    text-decoration: underline;
    padding: 0;
}

/* Pasek mobilny — domyślnie ukryty, włącza się na wąskich ekranach */
.zpr-lib-m {
    display: none;
    flex-direction: column-reverse;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 120;
    margin: 0;
    background: var(--zpr-surface);
    border: 1.5px solid var(--zpr-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 -6px 28px rgba(30, 27, 75, 0.18);
}

.zpr-lib-m[open] { box-shadow: 0 -10px 40px rgba(30, 27, 75, 0.26); }

.zpr-lib-m summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--zpr-ink);
}

.zpr-lib-m summary::-webkit-details-marker { display: none; }
.zpr-lib-m summary em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--zpr-accent-deep); }

.zpr-lib-m summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--zpr-ink-3);
    border-bottom: 2px solid var(--zpr-ink-3);
    transform: rotate(-135deg);
    transition: transform 0.2s ease;
    flex: none;
}

.zpr-lib-m[open] summary::after { transform: rotate(45deg); }
.zpr-lib-m[open] summary { border-top: 1px solid var(--zpr-line); }

.zpr-lib-m-panel {
    padding: 14px 14px 6px;
    max-height: 58vh;
    overflow-y: auto;
    display: grid;
    gap: 6px;
}

.zpr-lib-m-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--zpr-line);
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--zpr-ink);
    cursor: pointer;
    text-align: left;
}

.zpr-lib-m-type.is-active {
    background: rgba(190, 34, 255, 0.08);
    border-color: var(--zpr-accent-soft);
    color: var(--zpr-accent-deep);
}

.zpr-lib-m-years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 8px;
    border-top: 1px solid var(--zpr-line);
    margin-top: 6px;
}

/* Przyklejony jest WRAPPER kolumny, nie spis treści — pod spisem stoi karta
   alertów i obie mają jechać razem z czytelnikiem. */
.zpr-side {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 16px;
    align-content: start;
}

.zpr-toc {
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    padding: 22px 20px;
    box-shadow: var(--zpr-shadow);
}

.zpr-toc-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
    margin: 0 0 14px;
}

.zpr-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: zprtoc; display: grid; gap: 2px; }

.zpr-toc a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--zpr-ink-2);
    text-decoration: none;
    transition: all 0.15s ease;
}

.zpr-toc a:hover { background: rgba(190, 34, 255, 0.07); color: var(--zpr-accent-deep); }

.zpr-toc-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--zpr-line); }
.zpr-toc-cta a { font-size: 13px; font-weight: 700; color: var(--zpr-accent-deep); text-decoration: none; padding: 0; }

/* Mobilny spis treści — pasek przyklejony do DOŁU ekranu, rozwijany w górę.
   (Na górze chowałby się pod headerem motywu.) `column-reverse` sprawia,
   że lista otwiera się NAD paskiem, a nie pod nim. */
/* Wspólny pasek dolny: jeden element `fixed` na dwie pigułki (spis treści
   i alerty). Osobne kontenery zjadłyby połowę ekranu 390 px i zderzyły się
   z-indeksami. */
.zpr-mbar {
    display: flex;
    position: fixed;
    left: auto;
    right: 24px;
    bottom: 20px;
    width: min(380px, calc(100vw - 48px));
    z-index: 120;
    gap: 0;
    align-items: flex-end;
}

.zpr-mbar > * { flex: 1 1 0; min-width: 0; }

/* Obie pigułki są osobnymi, w pełni zaokrąglonymi przyciskami — tak jak
   „Ustaw alert" na desktopie. Wcześniejszy wariant sklejał je w jedną belkę
   (zaokrąglenie tylko na zewnątrz), przez co przy odstępie między nimi każda
   miała jedną prostą krawędź i wyglądało to na niedokończone. */

.zpr-toc-m {
    display: none;
    flex-direction: column-reverse;
    margin: 0;
    background: var(--zpr-surface);
    border: 1.5px solid var(--zpr-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 -6px 28px rgba(30, 27, 75, 0.18);
}

.zpr-toc-m[open] { box-shadow: 0 -10px 40px rgba(30, 27, 75, 0.26); }

.zpr-toc-m summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--zpr-ink);
}

.zpr-toc-m summary::-webkit-details-marker { display: none; }
.zpr-toc-m summary em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--zpr-ink-2); }

.zpr-toc-m summary::after {
    content: '▲';
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(190, 34, 255, 0.09);
    color: var(--zpr-accent-deep);
    font-size: 11px;
    line-height: 28px;
    text-align: center;
    transition: transform 0.2s ease;
}

.zpr-toc-m[open] summary::after { transform: rotate(180deg); }
.zpr-toc-m[open] summary { border-top: 1px solid var(--zpr-line); }

.zpr-toc-m ol {
    list-style: none;
    margin: 0;
    padding: 10px;
    counter-reset: zprtocm;
    display: grid;
    gap: 2px;
    max-height: 58vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--zpr-surface);
}

.zpr-toc-m li { counter-increment: zprtocm; }

.zpr-toc-m a {
    display: flex;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--zpr-ink-2);
    text-decoration: none;
}

.zpr-toc-m a::before {
    content: counter(zprtocm) '.';
    font-weight: 700;
    color: var(--zpr-accent);
    min-width: 20px;
}

.zpr-toc-m a:hover { background: rgba(190, 34, 255, 0.06); color: var(--zpr-accent-deep); }

/* ── Kafle liczb ── */
.zpr-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 48px;
}

.zpr-tile {
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    padding: 24px 22px 20px;
    box-shadow: var(--zpr-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: zprFadeUp 0.5s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zpr-tile:nth-child(2) { animation-delay: 0.07s; }
.zpr-tile:nth-child(3) { animation-delay: 0.14s; }
.zpr-tile:nth-child(4) { animation-delay: 0.21s; }
.zpr-tile:hover { transform: translateY(-3px); box-shadow: var(--zpr-shadow-lg); }

.zpr-tile-value {
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-tile-label { font-size: 13px; line-height: 1.4; color: var(--zpr-ink-2); }

.zpr-tile-delta {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: var(--zpr-pill);
    font-variant-numeric: tabular-nums;
}

.zpr-tile-delta.zpr-up { color: var(--zpr-up); background: #ecfdf5; }
.zpr-tile-delta.zpr-down { color: var(--zpr-down); background: #fef2f2; }

/* ── Narracja ── */
.zpr-narrative p {
    font-size: 17.5px;
    line-height: 1.7;
    color: #2b3040;
    margin: 0;
    max-width: 46em;
}

.zpr-narrative strong { color: var(--zpr-accent-deep); font-weight: 700; }

.zpr-block-desc { font-size: 15px; line-height: 1.7; color: var(--zpr-ink-2); margin: 0 0 20px; }
.zpr-block-desc strong { color: var(--zpr-ink); }

/* ── Bloki raportu: opis obok wykresu ── */
.zpr-block { margin: 0 0 56px; scroll-margin-top: 90px; }

.zpr-block h2 {
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--zpr-ink);
    margin: 0 0 12px;
}

.zpr-block:has(> .zpr-chart) {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.zpr-block:has(> .zpr-chart) > h2,
.zpr-block:has(> .zpr-chart) > .zpr-block-desc { grid-column: 1; }
.zpr-block:has(> .zpr-chart) > h2 { margin-bottom: 10px; }
.zpr-block:has(> .zpr-chart) > .zpr-block-desc { margin-bottom: 0; }

.zpr-block:has(> .zpr-chart) > .zpr-chart {
    grid-column: 2;
    grid-row: 1 / span 3;
    /* Bez tego szeroki wykres rozepchnąłby kolumnę siatki i wypchnął treść
       poza ekran, zamiast przewijać się w swoim kontenerze. */
    min-width: 0;
    max-width: 100%;
}

.zpr-chart {
    margin: 0;
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 26px 22px;
    box-shadow: var(--zpr-shadow);
    overflow-x: auto;
    position: relative;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--zpr-accent-soft) transparent;
}

/* Szerokość naturalną każdy wykres podaje sam (inline min-width z Svg::open) —
   dzięki temu rysunek się nie kurczy, a gdy nie mieści się w kolumnie, kontener
   przewija go w bok. NIE nadpisywać tu min-width, bo wróci ucinanie etykiet. */
.zpr-chart svg { display: block; }

/* Tabela z danymi pod wykresem — istnieje głównie po to, żeby roboty AI
   widziały liczby (tekst w SVG jest dla nich niewidoczny). Dla człowieka ma
   być jedną cienką linijką, którą może rozwinąć, ale nie musi jej zauważyć. */
.zpr-data {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--zpr-line);
}

.zpr-data > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--zpr-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.zpr-data > summary::-webkit-details-marker { display: none; }
.zpr-data > summary:hover { color: var(--zpr-accent-deep); }

.zpr-data > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
}

.zpr-data[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

.zpr-data-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.zpr-data-table th,
.zpr-data-table td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--zpr-line);
}

.zpr-data-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--zpr-ink-3);
}

.zpr-data-table tbody th { font-weight: 600; color: var(--zpr-ink); }
.zpr-data-table tbody td { color: var(--zpr-ink-2); white-space: nowrap; }
.zpr-data-table tbody tr:last-child th,
.zpr-data-table tbody tr:last-child td { border-bottom: none; }

/* Wykres szerszy niż kontener — wskazówka, że da się go przesunąć w bok */
.zpr-chart.is-scrollable::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    float: right;
    width: 56px;
    height: 100%;
    margin-right: -22px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff 78%);
    pointer-events: none;
}

.zpr-swipe-hint {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zpr-accent-deep);
}

.zpr-chart.is-scrollable + .zpr-swipe-hint,
.zpr-block:has(.zpr-chart.is-scrollable) > .zpr-swipe-hint { display: inline-flex; }

.zpr-swipe-hint i {
    display: inline-block;
    font-style: normal;
    animation: zprSwipe 1.8s ease-in-out infinite;
}

@keyframes zprSwipe {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50% { transform: translateX(7px); opacity: 1; }
}

/* ── Fakty ── */
.zpr-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.zpr-facts li {
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    padding: 22px 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--zpr-ink);
    box-shadow: var(--zpr-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zpr-facts li:hover { transform: translateY(-3px); box-shadow: var(--zpr-shadow-lg); }

.zpr-facts strong {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin-bottom: 4px;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-facts a { color: var(--zpr-accent-deep); font-weight: 700; text-decoration: none; }
.zpr-facts a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   PORÓWNYWARKA /raporty/porownaj/
   ══════════════════════════════════════════════ */
.zpr-cmp-controls {
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 26px 28px;
    box-shadow: var(--zpr-shadow);
    margin-bottom: 30px;
}

.zpr-cmp-modes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--zpr-line);
}

.zpr-cmp-modes .zpr-chip { font-size: 14.5px; padding: 11px 22px; }

.zpr-cmp-field { margin-bottom: 22px; }
.zpr-cmp-field:last-of-type { margin-bottom: 0; }

.zpr-cmp-field--periods {
    padding-top: 22px;
    border-top: 1px solid var(--zpr-line);
}

.zpr-cmp-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
    margin-bottom: 10px;
}

.zpr-cmp-search { position: relative; }
.zpr-cmp-search .zpr-lookup-results {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: var(--zpr-surface);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow-lg);
    padding: 8px;
    margin: 0;
}

.zpr-cmp-chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.zpr-cmp-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--zpr-accent-deep);
    background: rgba(190, 34, 255, 0.09);
    border-radius: var(--zpr-pill);
    padding: 8px 14px;
}

.zpr-cmp-tag button {
    border: 0;
    background: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.65;
}

.zpr-cmp-tag button:hover { opacity: 1; }

.zpr-cmp-tag--ghost {
    color: var(--zpr-ink-3);
    background: transparent;
    border: 1.5px dashed var(--zpr-line);
    font-weight: 500;
}

.zpr-cmp-flash {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--zpr-down);
}

/* Okresy pogrupowane rocznikami — czytelniej niż jedna długa lista */
.zpr-cmp-periods {
    display: grid;
    gap: 10px;
    max-height: 210px;
    overflow-y: auto;
    padding: 2px;
}

.zpr-cmp-year {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.zpr-cmp-year-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--zpr-ink-3);
    font-variant-numeric: tabular-nums;
}

.zpr-cmp-year-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.zpr-chip--sm {
    font-size: 12.5px;
    padding: 8px 0;
    width: 52px;
    text-align: center;
    text-transform: capitalize;
}

.zpr-cmp-metrics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--zpr-line);
}

.zpr-cmp-hint {
    text-align: center;
    padding: 40px 20px;
    font-size: 15.5px;
    color: var(--zpr-ink-2);
    background: var(--zpr-surface-2);
    border-radius: 24px;
}

.zpr-cmp-chart { margin-bottom: 26px; padding: 20px 18px; }
.zpr-cmp-chart svg { min-width: 420px; }

.zpr-cmp-tablewrap {
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 8px 4px;
    box-shadow: var(--zpr-shadow);
    overflow-x: auto;
    margin-bottom: 22px;
}

.zpr-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 520px;
}

.zpr-cmp-table th,
.zpr-cmp-table td {
    padding: 14px 18px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--zpr-line);
}

.zpr-cmp-table thead th {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
    border-bottom: 2px solid var(--zpr-line);
}

.zpr-cmp-table thead th:first-child,
.zpr-cmp-table tbody th { text-align: left; font-weight: 600; color: var(--zpr-ink); }

.zpr-cmp-table tbody tr:last-child th,
.zpr-cmp-table tbody tr:last-child td { border-bottom: 0; }

.zpr-cmp-table .zpc-up { color: var(--zpr-up); font-weight: 700; }
.zpr-cmp-table .zpc-down { color: var(--zpr-down); font-weight: 700; }

.zpr-cmp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* CTA porównywarki na hubie /raporty/ */
.zpr-cmp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    background: var(--zpr-surface);
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--zpr-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 24px;
    padding: 26px 30px;
    margin-bottom: 26px;
}

.zpr-cmp-cta strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--zpr-ink);
    margin-bottom: 5px;
}

.zpr-cmp-cta span { font-size: 15px; line-height: 1.55; color: var(--zpr-ink-2); }

/* ══════════════════════════════════════════════
   MAPA POLSKI (choropleth powiatów)
   ══════════════════════════════════════════════ */
.zpr-map-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 26px;
    align-items: start;
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 26px;
    box-shadow: var(--zpr-shadow);
}

/* `width: 100%` jest tu OBOWIĄZKOWE, nie ozdobne.
   Płótno jest elementem siatki i teoretycznie powinno rozciągnąć się na całą
   kolumnę, ale w praktyce kurczyło się do zawartości. A zawartością jest <svg>
   bez atrybutu width — czyli, zgodnie ze specyfikacją, dokładnie 300 px.
   Efekt: mapa renderowała się jako miniatura niezależnie od tego, ile miejsca
   dostawała kolumna, a `.zpr-map-svg { width: 100% }` liczyło swoje sto procent
   od tych 300 px i utrwalało błąd. */
.zpr-map-canvas { width: 100%; min-width: 0; }

.zpr-map-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    overflow: visible;
}

.zpr-map-svg path {
    stroke: #ffffff;
    stroke-width: 0.7;
    stroke-linejoin: round;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.zpr-map-svg path.has-data { cursor: pointer; }
.zpr-map-svg path.has-data:hover,
.zpr-map-svg path.has-data:focus { stroke: var(--zpr-ink); stroke-width: 1.4; outline: none; }
.zpr-map-svg path.is-active { stroke: var(--zpr-ink); stroke-width: 1.6; }

/* wybór przypięty klikiem — pozostałe powiaty przygaszone, wybrany obrysowany */
.zpr-map.is-pinned .zpr-map-svg path { opacity: 0.55; }
.zpr-map.is-pinned .zpr-map-svg path.is-pinned {
    opacity: 1;
    stroke: var(--zpr-accent-deep);
    stroke-width: 2.2;
}

.zpr-map-hint {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    color: var(--zpr-ink-3);
}

.zpr-map-panel {
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius);
    padding: 22px 22px 24px;
    min-height: 260px;
    position: sticky;
    top: 100px;
}

.zpr-map-panel-empty { font-size: 14.5px; line-height: 1.6; color: var(--zpr-ink-3); padding: 30px 0; text-align: center; }

.zpr-map-panel-body h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--zpr-ink);
    margin: 12px 0 4px;
}

.zpr-map-woj { font-size: 13px; color: var(--zpr-ink-2); margin: 0 0 16px; }

.zpr-map-stats { display: grid; gap: 10px; }

.zpr-map-stats > div {
    background: #ffffff;
    border-radius: var(--zpr-radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.zpr-map-stats b {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.4px;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-map-stats small { font-size: 12px; color: var(--zpr-ink-2); text-align: right; }

.zpr-map-cta {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--zpr-accent-deep);
    text-decoration: none;
}

.zpr-map-cta:hover { text-decoration: underline; }

.zpr-map-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--zpr-ink-2);
}

.zpr-map-legend-title { font-weight: 700; color: var(--zpr-ink); }

.zpr-map-legend-item { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }

.zpr-map-legend-item i {
    width: 22px; height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* ── Wyszukiwarka gmin (Lookup) ── */
.zpr-lookup-box {
    background: var(--zpr-surface);
    border-radius: 24px;
    padding: 26px;
    box-shadow: var(--zpr-shadow);
    position: relative;
}

.zpr-lookup-input {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    padding: 16px 24px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-pill);
    background: var(--zpr-surface-2);
    color: var(--zpr-ink);
    outline: none;
    transition: all 0.2s ease;
}

.zpr-lookup-input:focus {
    border-color: var(--zpr-accent);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(190, 34, 255, 0.12);
}

.zpr-lookup-results { margin-top: 12px; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }

.zpr-lookup-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--zpr-ink);
    background: var(--zpr-surface-2);
    border: none;
    border-radius: var(--zpr-radius-sm);
    padding: 13px 18px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.zpr-lookup-item:hover { background: rgba(190, 34, 255, 0.08); }
.zpr-lookup-item small { font-weight: 400; color: var(--zpr-ink-2); white-space: nowrap; }

.zpr-lookup-empty { padding: 16px 18px; font-size: 14.5px; color: var(--zpr-ink-2); }

.zpr-lookup-panel { margin-top: 18px; animation: zprFadeUp 0.35s ease both; }

.zpr-lookup-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.zpr-lookup-head strong { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--zpr-ink); }
.zpr-lookup-woj { font-size: 14px; color: var(--zpr-ink-2); }

.zpr-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--zpr-accent-deep);
    background: rgba(190, 34, 255, 0.09);
    border-radius: var(--zpr-pill);
    padding: 6px 14px;
}

.zpr-pill--g { color: #0f766e; background: rgba(116, 214, 206, 0.20); }

.zpr-lookup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.zpr-lookup-stat {
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius-sm);
    padding: 17px 19px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zpr-lookup-stat span {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    background: var(--zpr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.zpr-lookup-stat small { font-size: 12.5px; color: var(--zpr-ink-2); line-height: 1.35; }

/* ── Definicje i metodologia: para obok siebie ── */
.zpr-howto {
    background: var(--zpr-surface-2);
    border-radius: 24px;
    padding: 32px 34px;
}

.zpr-howto h2 { font-size: 20px; margin-bottom: 18px; }

.zpr-defs { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zpr-defs dt { font-weight: 700; font-size: 15px; color: var(--zpr-accent-deep); margin-bottom: 4px; }
.zpr-defs dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--zpr-ink-2); }

.zpr-methodology {
    background: var(--zpr-surface-2);
    border-radius: 24px;
    padding: 30px 32px;
}

.zpr-methodology h2 {
    font-size: 12.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
    margin-bottom: 12px;
}

.zpr-methodology p { font-size: 14px; line-height: 1.7; color: var(--zpr-ink-2); margin: 0; }

/* ── CTA w raporcie ── */
.zpr-cta {
    position: relative;
    overflow: hidden;
    margin: 56px 0 28px;
    padding: 48px 40px;
    border-radius: 26px;
    background: var(--zpr-dark);
    color: #ffffff;
    text-align: center;
}

.zpr-cta h2 {
    font-size: clamp(23px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -0.6px;
    margin: 0 0 12px;
    color: #ffffff;
    max-width: none;
}

.zpr-cta p {
    margin: 0 auto 24px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 40em;
}

.zpr-cta .zpr-btn-row { margin-top: 0; }

.zpr-terms {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--zpr-ink-2);
    border-top: 1px solid var(--zpr-line);
    padding: 22px 0 64px;
}

.zpr-terms a { color: var(--zpr-accent-deep); }

/* ══════════════════════════════════════════════
   PAGINACJA (the_posts_pagination → .nav-links)
   ══════════════════════════════════════════════ */
.zpr-page .navigation.pagination,
.zpr-pagination { margin: 40px 0 0; padding: 0; width: 100%; }

.zpr-page .navigation.pagination .screen-reader-text,
.zpr-pagination .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.zpr-page .navigation.pagination .nav-links,
.zpr-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zpr-page .navigation.pagination .page-numbers,
.zpr-pagination .page-numbers {
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zpr-radius-sm);
    background: var(--zpr-surface-2);
    color: var(--zpr-ink-2);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
}

.zpr-page .navigation.pagination a.page-numbers:hover,
.zpr-pagination a.page-numbers:hover {
    background: rgba(190, 34, 255, 0.10);
    color: var(--zpr-accent-deep);
    transform: translateY(-2px);
}

.zpr-page .navigation.pagination .page-numbers.current,
.zpr-pagination .page-numbers.current {
    background: var(--zpr-grad-btn);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(190, 34, 255, 0.30);
}

.zpr-page .navigation.pagination .page-numbers.dots,
.zpr-pagination .page-numbers.dots { background: transparent; }

/* ══════════════════════════════════════════════
   RESPONSYWNOŚĆ (breakpointy portalu: 1200/992/768/576)
   ══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .zpr-report-grid { grid-template-columns: 1fr; gap: 0; }
    .zpr-side { display: none; }
    .zpr-mbar { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .zpr-toc-m { display: flex; }
    /* miejsce na dolny pasek, żeby nie zasłaniał końca treści */
    .zpr-report-content { padding-bottom: 76px; }

    /* Spis działu przechodzi z kolumny w pasek u dołu ekranu */
    .zpr-lib { grid-template-columns: 1fr; gap: 0; }
    .zpr-lib-nav { display: none; }
    .zpr-lib-m { display: flex; }
    .zpr-lib-main { padding-bottom: 76px; }
    .zpr-block:has(> .zpr-chart) { grid-template-columns: 1fr; gap: 0; }
    .zpr-block:has(> .zpr-chart) > .zpr-chart { grid-column: 1; grid-row: auto; margin-top: 18px; }
    .zpr-block:has(> .zpr-chart) > .zpr-block-desc { margin-bottom: 0; }
    .zpr-list { grid-template-columns: repeat(2, 1fr); }
    .zpr-card--featured { grid-column: span 2; }
    .zpr-lib-main .zpr-list { grid-template-columns: repeat(2, 1fr); }
    .zpr-lib-main .zpr-card--featured { grid-column: span 2; }
    .zpr-how { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .zpr-how-card--large { grid-column: 1 / 3; grid-row: auto; }
    .zpr-defs { grid-template-columns: repeat(2, 1fr); }
    .zpr-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .zpr-section { padding: 72px 0; }
    .zpr-map-wrap { grid-template-columns: 1fr; }
    .zpr-map-panel { position: static; min-height: 0; }
    .zpr-map-stats { grid-template-columns: repeat(2, 1fr); }
    .zpr-faq-grid { grid-template-columns: 1fr; gap: 28px; }
    .zpr-tiles { grid-template-columns: repeat(2, 1fr); }
    .zpr-hero-preview-grid { grid-template-columns: repeat(2, 1fr); }
    .zpr-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .zpr-hero-stat:nth-child(1), .zpr-hero-stat:nth-child(2) { border-bottom: 1px solid var(--zpr-line); }
    .zpr-hero-stat:nth-child(2) { border-right: none; }
    .zpr-press { flex-direction: column; align-items: flex-start; }
    .zpr-finder-row { grid-template-columns: 1fr; }
    .zpr-cmp-year { grid-template-columns: 1fr; gap: 4px; }
    .zpr-lookup-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .zpr-list { grid-template-columns: 1fr; }
    .zpr-card--featured { grid-column: span 1; }
    /* Selektor z .zpr-lib-main jest bardziej szczegółowy niż samo .zpr-list,
       więc bez powtórzenia go tutaj wygrywałby układ dwukolumnowy i lista
       wychodziłaby poza ekran telefonu. */
    .zpr-lib-main .zpr-list { grid-template-columns: 1fr; }
    .zpr-lib-main .zpr-card--featured { grid-column: span 1; }
    .zpr-how { grid-template-columns: 1fr; }
    .zpr-how-card--large { grid-column: 1 / 2; }
    .zpr-defs { grid-template-columns: 1fr; }
    .zpr-facts { grid-template-columns: 1fr; }
    .zpr-chart { overflow-x: auto; }
    /* Szerokość naturalna wykresu idzie z inline'owego min-width — tu nic nie ustawiamy */
}

@media (max-width: 576px) {
    .zpr-hero { padding: 60px 16px 52px; }
    .zpr-tiles { grid-template-columns: 1fr; }
    .zpr-hero-stats, .zpr-hero-preview-grid { grid-template-columns: 1fr; }
    .zpr-hero-stat { border-right: none; border-bottom: 1px solid var(--zpr-line); }
    .zpr-hero-stat:last-child { border-bottom: none; }
    .zpr-lookup-stats { grid-template-columns: 1fr; }
    .zpr-cta-band { padding: 48px 22px; border-radius: 22px; }
    .zpr-cta { padding: 36px 22px; }
    .zpr-card, .zpr-how-card, .zpr-finder { padding: 24px 20px; }
    .zpr-howto, .zpr-methodology { padding: 24px 22px; }
}

/* ===============================================
   Indeks Napięcia Rynku Pracy
   /raporty/indeks-napiecia/ + metodologia
   =============================================== */

.zpr-indeks-warn {
    padding: 12px 16px;
    border-left: 3px solid var(--zpr-accent);
    background: var(--zpr-accent-pale);
    border-radius: 0 var(--zpr-radius-sm) var(--zpr-radius-sm) 0;
    color: var(--zpr-ink);
}

/* ── wyszukiwarka powiatu ── */
.zpr-indeks-finder { position: relative; max-width: 520px; margin: 0 auto; }

.zpr-finder-row .zpr-lookup-results,
.zpr-alert-pick .zpr-lookup-results,
.zpr-jst-powiat .zpr-lookup-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin-top: 0;
    max-height: 300px;
    overflow-y: auto;
    /* Panel unoszący się nad treścią MUSI mieć własne tło — bez tego lista
       przenika przez to, co jest pod nią, i wygląda jak brak stylów. */
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    padding: 6px;
    box-shadow: var(--zpr-shadow-lg);
}

/* ── karta wyniku ── */
.zpr-indeks-detail { margin-top: 26px; max-width: 820px; margin-inline: auto; }

.zpr-indeks-card {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 24px;
    padding: 24px;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow);
}

.zpr-indeks-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 22px 16px;
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius-sm);
    text-align: center;
}

.zpr-indeks-score b {
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    color: var(--zpr-accent-deep);
}

.zpr-indeks-score small { font-size: 12px; color: var(--zpr-ink-3); }
.zpr-indeks-score .zpr-pill { margin-top: 8px; }

.zpr-indeks-body h3 { margin: 0 0 4px; font-size: 22px; }

/* ── rozbicie na składowe ── */
.zpr-indeks-skladowe {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--zpr-line);
}

.zpr-indeks-skladowe li {
    display: grid;
    grid-template-columns: 1fr 120px 66px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--zpr-ink-2);
}

.zpr-indeks-skladowe li.is-brak { grid-template-columns: 1fr auto; }
.zpr-indeks-skladowe em { font-style: normal; font-size: 12.5px; color: var(--zpr-ink-3); text-align: right; }

.zpr-indeks-mini {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--zpr-line);
    overflow: hidden;
}

.zpr-indeks-mini i { display: block; height: 100%; background: var(--zpr-accent); }

.zpr-indeks-hist { margin: 22px 0 0; }
.zpr-indeks-hist svg { width: 100%; height: auto; }

/* ── ranking ── */
.zpr-indeks-bars { display: flex; flex-direction: column; gap: 2px; }

.zpr-indeks-bar {
    display: grid;
    grid-template-columns: 28px minmax(140px, 1fr) minmax(90px, 3fr) 46px;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--zpr-radius-sm);
}

.zpr-indeks-bar:nth-child(odd) { background: var(--zpr-surface-2); }
.zpr-indeks-bar-rank { font-size: 12.5px; color: var(--zpr-ink-3); text-align: right; }

.zpr-indeks-bar-name { font-size: 14px; color: var(--zpr-ink); line-height: 1.25; }
.zpr-indeks-bar-name small { display: block; font-size: 11.5px; color: var(--zpr-ink-3); }

.zpr-indeks-bar-track {
    height: 10px;
    border-radius: 5px;
    background: rgba(190, 34, 255, 0.10);
    overflow: hidden;
}

.zpr-indeks-bar-track i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--zpr-grad-btn);
}

.zpr-indeks-bar-val { font-size: 15px; font-weight: 600; color: var(--zpr-accent-deep); text-align: right; }

/* ── strona dokumentu (metodologia) ── */
.zpr-doc { max-width: 860px; }
.zpr-doc p { font-size: 15.5px; line-height: 1.75; color: var(--zpr-ink-2); margin: 0 0 16px; }
.zpr-doc h3 { font-size: 17px; margin: 28px 0 12px; }
.zpr-doc ul { margin: 0 0 22px; padding-left: 20px; }
.zpr-doc li { font-size: 15px; line-height: 1.7; color: var(--zpr-ink-2); margin-bottom: 10px; }
.zpr-doc strong { color: var(--zpr-ink); }

/* Tabela metodologii jest treścią strony, a nie zwiniętym dodatkiem dla robotów,
   więc dostaje więcej powietrza niż ta w <details class="zpr-data">. */
.zpr-doc .zpr-data-table { margin: 0 0 28px; }

@media (max-width: 768px) {
    .zpr-indeks-card { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
    .zpr-indeks-score { flex-direction: row; gap: 12px; padding: 16px; }
    .zpr-indeks-score b { font-size: 40px; }
    .zpr-indeks-bar { grid-template-columns: 24px 1fr 40px; row-gap: 4px; }
    .zpr-indeks-bar-track { grid-column: 1 / -1; }
    .zpr-indeks-skladowe li { grid-template-columns: 1fr 56px; }
    .zpr-indeks-skladowe .zpr-indeks-mini { grid-column: 1 / -1; }
}

/* ===============================================
   Alerty powiatowe — karta w kolumnie i pigułka w pasku
   =============================================== */

.zpr-alert {
    background: var(--zpr-surface);
    border: 1.5px solid var(--zpr-accent-soft);
    border-radius: var(--zpr-radius);
    padding: 20px 18px;
    box-shadow: var(--zpr-shadow);
}

.zpr-alert-pick { position: relative; }

.zpr-alert-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    font-size: 13.5px;
    color: var(--zpr-ink);
    background: var(--zpr-surface);
}

.zpr-alert-input:focus {
    outline: none;
    border-color: var(--zpr-accent);
    box-shadow: 0 0 0 3px rgba(190, 34, 255, 0.12);
}

.zpr-alert-pick .zpr-lookup-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    max-height: 260px;
    overflow-y: auto;
}

/* ── kafelek z liczbami ── */
.zpr-alert-tile {
    margin-top: 14px;
    padding: 14px;
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius-sm);
}

.zpr-alert-scope {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
    margin-bottom: 10px;
}

.zpr-alert-score {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--zpr-line);
}

.zpr-alert-score b { font-size: 34px; line-height: 1; font-weight: 700; color: var(--zpr-accent-deep); }
.zpr-alert-score span { font-size: 13px; font-weight: 600; color: var(--zpr-ink); line-height: 1.3; }
.zpr-alert-score small { display: block; font-size: 11px; font-weight: 400; color: var(--zpr-ink-3); }

.zpr-alert-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
.zpr-alert-nums b { display: block; font-size: 15px; font-weight: 700; color: var(--zpr-ink); }
.zpr-alert-nums small { font-size: 11px; color: var(--zpr-ink-3); }
.zpr-alert-hint { margin: 10px 0 0; font-size: 12px; color: var(--zpr-ink-3); }

/* ── formularz ── */
.zpr-alert-form { margin-top: 14px; }

.zpr-alert-row { display: grid; gap: 8px; }

.zpr-alert-row input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    font-size: 13.5px;
}

.zpr-alert-row input[type="email"]:focus {
    outline: none;
    border-color: var(--zpr-accent);
    box-shadow: 0 0 0 3px rgba(190, 34, 255, 0.12);
}

.zpr-alert-row .zpr-btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

.zpr-alert-consent {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--zpr-ink-3);
    cursor: pointer;
}

.zpr-alert-consent input { margin-top: 2px; flex: 0 0 auto; }

/* Pułapka na roboty. `display:none` bywa rozpoznawane przez wypełniacze,
   więc pole jest wyprowadzone poza ekran i wycięte z nawigacji klawiaturą. */
.zpr-alert-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zpr-alert-msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.zpr-alert-msg.is-ok { color: var(--zpr-up); }
.zpr-alert-msg.is-err { color: var(--zpr-down); }

.zpr-alert-legal { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--zpr-ink-3); }

/* Komunikat po powrocie z linku w mailu */
.zpr-alert-flash {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--zpr-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
}

.zpr-alert-flash.is-ok { background: rgba(16, 185, 129, 0.10); color: #047857; }
.zpr-alert-flash.is-err { background: rgba(239, 68, 68, 0.08); color: #b91c1c; }

/* ── pigułka w pasku dolnym ── */
.zpr-alert-m {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    background: var(--zpr-surface);
    border: 1.5px solid var(--zpr-accent-soft);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 -6px 28px rgba(30, 27, 75, 0.18);
}

.zpr-alert-m summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--zpr-ink);
}

.zpr-alert-m summary::-webkit-details-marker { display: none; }
.zpr-alert-m summary em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--zpr-ink-3); }

.zpr-alert-m-panel {
    padding: 4px 18px 18px;
    max-height: 62vh;
    overflow-y: auto;
    border-bottom: 1px solid var(--zpr-line);
}

@media (max-width: 576px) {
    .zpr-alert-m summary em { display: none; }
    .zpr-alert-nums { grid-template-columns: repeat(2, 1fr); }
}

/* ── Generator widgetu ── */
.zpr-widget-preview {
    padding: 20px;
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius);
    margin-bottom: 32px;
}

.zpr-widget-code {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--zpr-ink-2);
    background: var(--zpr-surface);
    resize: vertical;
}

.zpr-widget-copied { font-size: 13px; font-weight: 600; color: var(--zpr-up); align-self: center; }

/* ── Benchmark płacowy ── */

.zpr-bench-controls .zpr-indeks-finder { max-width: none; }
.zpr-bench-controls select { cursor: pointer; }

.zpr-bench-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    align-items: center;
    padding: 26px;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow);
}

.zpr-bench-main {
    padding: 20px;
    background: var(--zpr-surface-2);
    border-radius: var(--zpr-radius-sm);
    text-align: center;
}

.zpr-bench-main span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--zpr-ink-3); }
.zpr-bench-main b { display: block; margin: 6px 0 4px; font-size: 34px; font-weight: 700; color: var(--zpr-accent-deep); }
.zpr-bench-main small { font-size: 11.5px; color: var(--zpr-ink-3); line-height: 1.4; }

/* Poziom danych (powiat / województwo / kraj) musi być widoczny — bez tego
   czytelnik uzna wynik wojewódzki za lokalny. */
.zpr-bench-uwaga {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--zpr-accent);
    background: var(--zpr-accent-pale);
    border-radius: 0 var(--zpr-radius-sm) var(--zpr-radius-sm) 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--zpr-ink);
}

.zpr-bench-gate {
    padding: 30px 32px;
    background: var(--zpr-surface);
    border: 1.5px dashed var(--zpr-accent-soft);
    border-radius: var(--zpr-radius);
}

.zpr-bench-gate p { font-size: 15px; line-height: 1.7; color: var(--zpr-ink-2); margin: 0 0 12px; }
.zpr-bench-gate strong { color: var(--zpr-ink); }

@media (max-width: 768px) {
        .zpr-bench-card { grid-template-columns: 1fr; padding: 20px; }
}

/* ── Raporty dla samorządów ── */
.zpr-jst-spis { max-width: 780px; margin: 0; padding-left: 22px; }
.zpr-jst-spis li { font-size: 15.5px; line-height: 1.7; color: var(--zpr-ink-2); margin-bottom: 12px; }
.zpr-jst-spis strong { color: var(--zpr-ink); }

.zpr-jst-form { max-width: 780px; }

.zpr-jst-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.zpr-jst-powiat { position: relative; }

.zpr-jst-grid label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zpr-ink);
}

.zpr-jst-grid input,
.zpr-jst-grid select {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    font-size: 14.5px;
    color: var(--zpr-ink);
    background: var(--zpr-surface);
}

.zpr-jst-grid input:focus,
.zpr-jst-grid select:focus {
    outline: none;
    border-color: var(--zpr-accent);
    box-shadow: 0 0 0 3px rgba(190, 34, 255, 0.12);
}

.zpr-jst-powiat .zpr-lookup-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 240px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .zpr-jst-grid { grid-template-columns: 1fr; }
}

/* ===============================================
   Strona Indeksu — korekty układu
   Wszystko zawężone do .zpr-page--indeks, żeby nie ruszyć wyglądu
   83 opublikowanych raportów, które używają tych samych klas.
   =============================================== */

/* Kafle nagłówka: są trzy, a siatka bazowa ma cztery kolumny — czwarta
   zostawała pusta i pasek wyglądał na rozjechany. */
.zpr-page--indeks .zpr-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
}

.zpr-page--indeks .zpr-hero-stat { padding: 22px 18px; }
.zpr-page--indeks .zpr-hero-stat-label { font-size: 12.5px; line-height: 1.45; }

/* Przycisk metodologii siedział w akapicie .zpr-meta, więc dziedziczył jego
   mały krój i przyklejał się do kafli. */
.zpr-page--indeks .zpr-hero-cta { margin: 26px 0 0; text-align: center; }
.zpr-page--indeks .zpr-hero-cta .zpr-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(190, 34, 255, 0.35);
    padding: 12px 26px;
    font-size: 14.5px;
}

/* Mapa rozciągnięta na 1000 px robiła się na 750 px wysoka i przestawała być
   czytelna — powiaty i tak są małe, a całość nie mieściła się na ekranie. */
.zpr-page--indeks .zpr-map-wrap {
    grid-template-columns: minmax(0, 1fr) 300px;
    padding: 22px;
}

.zpr-page--indeks .zpr-map-canvas {
    max-width: 1240px;
    margin: 0 auto;
}

.zpr-page--indeks .zpr-map-legend { font-size: 12px; }

/* Sekcja „sprawdź swój powiat" jest wyśrodkowana, więc nagłówek i lead też. */
.zpr-page--indeks .zpr-section--alt .zpr-h2,
.zpr-page--indeks .zpr-section--alt .zpr-section-lead {
    text-align: center;
}
.zpr-page--indeks .zpr-section--alt .zpr-section-lead {
    max-width: 620px;
    margin-inline: auto;
}

/* Ranking idzie na pełną szerokość — tak samo jak mapa. */
.zpr-page--indeks .zpr-section .zpr-container > .zpr-chart,
.zpr-page--indeks .zpr-section .zpr-container > .zpr-data {
    max-width: none;
}

/* Przycisk zwolnienia przypiętego powiatu — bez niego kliknięcie w powiat
   bez danych zostawiało mapę przygaszoną bez wyjścia. */
.zpr-map-clear {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 8px 16px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-pill);
    background: var(--zpr-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--zpr-ink-2);
    cursor: pointer;
    transition: all 0.18s ease;
}

.zpr-map-clear:hover {
    border-color: var(--zpr-accent);
    color: var(--zpr-accent-deep);
}

@media (max-width: 992px) {
    .zpr-page--indeks .zpr-map-canvas { max-width: 100%; }
    .zpr-page--indeks .zpr-hero-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 576px) {
    .zpr-page--indeks .zpr-hero-stats { grid-template-columns: 1fr; }
}

.zpr-h2--center { text-align: center; }
.zpr-lead--center { max-width: 640px; margin-inline: auto; text-align: center; }

/* Podpowiedzi: nazwa w wierszu, województwo pod spodem mniejszym krojem.
   Układ w jednym wierszu rozjeżdżał się przy długich nazwach województw
   („zachodniopomorskie") i wypychał treść poza panel. */
.zpr-finder-row .zpr-lookup-item,
.zpr-alert-pick .zpr-lookup-item,
.zpr-jst-powiat .zpr-lookup-item {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    padding: 9px 12px;
}

.zpr-finder-row .zpr-lookup-woj,
.zpr-alert-pick .zpr-lookup-woj,
.zpr-jst-powiat .zpr-lookup-woj {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--zpr-ink-3);
}

/* W wąskiej kolumnie alertu jeszcze ciaśniej. */
.zpr-alert-pick .zpr-lookup-item { font-size: 13px; padding: 7px 10px; }
.zpr-alert-pick .zpr-lookup-woj { font-size: 11px; }
.zpr-alert-pick .zpr-lookup-results { max-height: 240px; }

/* ── Generator widgetu: podgląd i przycisk ── */
.zpr-widget-preview {
    display: flex;
    justify-content: center;
    padding: 28px 20px;
    background: var(--zpr-surface-2);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
    margin-bottom: 34px;
}

.zpr-widget-preview .zpw { margin: 0 !important; }
.zpr-page--widget .zpr-widget-code { max-width: 900px; margin: 0 auto; display: block; }

/* Przycisk to <button>, a nie <a> — reguły motywu dla button potrafią nadpisać
   kolor tekstu z .zpr-btn--primary, więc podnosimy specyficzność. */
button.zpr-btn--primary,
button.zpr-btn--primary:hover,
button.zpr-btn--primary:focus { color: #ffffff; }

/* ── Benchmark: sterowanie jako karta, wyniki wyśrodkowane ── */

.zpr-bench-wynik { max-width: 900px; margin: 0 auto; }
.zpr-page--benchmark .zpr-doc { margin-inline: auto; }

/* ── Formularz JST ── */
.zpr-jst-form {
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 32px;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
    box-shadow: var(--zpr-shadow);
}

/* Pola formularza celują w konkretne identyfikatory, bo sam selektor
   `.zpr-jst-grid input` przegrywał z resetem motywu dla input[type=search]. */
.zpr-jst-grid input[type="text"],
.zpr-jst-grid input[type="email"],
.zpr-jst-grid select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--zpr-line);
    border-radius: var(--zpr-radius-sm);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--zpr-ink);
    background: var(--zpr-surface);
}

.zpr-jst-grid input:focus,
.zpr-jst-grid select:focus {
    outline: none;
    border-color: var(--zpr-accent);
    box-shadow: 0 0 0 3px rgba(190, 34, 255, 0.12);
}

.zpr-jst-spis { max-width: 780px; margin-inline: auto; }

/* ── Metodologia: nagłówki były wielkości nagłówków sekcji ── */
.zpr-page--metodologia .zpr-h2 {
    font-size: 21px;
    line-height: 1.3;
    margin: 56px 0 14px;
    text-align: left;
}

.zpr-page--metodologia .zpr-h2:first-of-type { margin-top: 0; }
.zpr-page--metodologia .zpr-doc h3 { font-size: 16px; margin: 32px 0 10px; }
.zpr-page--metodologia .zpr-doc p { margin-bottom: 20px; line-height: 1.8; }
.zpr-page--metodologia .zpr-doc ul { margin-bottom: 28px; }
.zpr-page--metodologia .zpr-doc li { margin-bottom: 14px; }
.zpr-page--metodologia .zpr-data-table { margin-bottom: 36px; }

/* Przycisk „Ustaw alert" na desktopie ma wyglądać jak wezwanie do działania,
   a nie jak druga zakładka spisu treści. */
.zpr-alert-m > summary {
    background: var(--zpr-grad-btn);
    color: #ffffff;
}

.zpr-alert-m > summary em { color: rgba(255, 255, 255, 0.75); }
.zpr-alert-m[open] > summary { border-radius: 0; }

.zpr-alert-m {
    border-color: transparent;
    box-shadow: 0 -6px 28px rgba(107, 15, 153, 0.28);
}

/* Panel rozwija się nad przyciskiem; na desktopie ma sensowną szerokość
   nawet wtedy, gdy sam przycisk jest wąski. */
.zpr-alert-m-panel { background: var(--zpr-surface); }

@media (max-width: 1200px) {
    .zpr-alert-m { box-shadow: 0 -6px 28px rgba(30, 27, 75, 0.18); }
    .zpr-alert-m > summary { font-size: 14.5px; padding: 15px 14px; }
    .zpr-toc-m summary { font-size: 14.5px; padding: 15px 14px; }
}

@media (max-width: 576px) {
    .zpr-alert-m > summary em, .zpr-toc-m summary em { display: none; }
    .zpr-alert-m > summary, .zpr-toc-m summary { justify-content: center; }
}

/* ===============================================
   Pasek alertu — przebudowa po testach
   Wzorzec: przycisk subskrypcji z /ogloszenia (sticky-alert-button.css) —
   wyśrodkowana pigułka, pasek nie łapie kliknięć poza nią.
   =============================================== */

.zpr-mbar {
    left: 0;
    right: 0;
    bottom: 18px;
    width: auto;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 0 12px;
    /* Pasek rozciąga się na całą szerokość, ale ma przepuszczać kliknięcia —
       inaczej niewidzialna wstęga blokowałaby treść pod spodem. */
    pointer-events: none;
}

.zpr-mbar > * {
    flex: 0 0 auto;
    pointer-events: auto;
    border-radius: 50px;
    overflow: visible;
}

/* Pigułki: zwykły przycisk (spis treści) i wyróżniony (alert). */
.zpr-mbar .zpr-toc-m,
.zpr-mbar .zpr-alert-m {
    flex-direction: column;
    border: 1px solid var(--zpr-line);
    background: var(--zpr-surface);
    box-shadow: 0 4px 18px rgba(30, 27, 75, 0.16);
}

.zpr-mbar .zpr-alert-m {
    border-color: transparent;
    background: var(--zpr-grad-btn);
    box-shadow: 0 4px 20px rgba(107, 15, 153, 0.38);
}

.zpr-mbar .zpr-alert-m:hover { box-shadow: 0 6px 26px rgba(107, 15, 153, 0.5); }

.zpr-mbar summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 9px 26px;
    border: none;
    line-height: 1.15;
    white-space: nowrap;
}

.zpr-mbar summary::after { display: none; }
.zpr-mbar .zpr-toc-m[open] summary { border-top: none; }

.zpr-mbar summary > span { font-size: 15px; font-weight: 700; }
.zpr-mbar summary > em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.zpr-mbar .zpr-alert-m summary > span { color: #ffffff; }
.zpr-mbar .zpr-alert-m summary > em { color: rgba(255, 255, 255, 0.78); }

/* Panele wysuwają się NAD paskiem i na własnej szerokości, a nie na szerokości
   swojej pigułki — inaczej na telefonie połowa ekranu byłaby nie do użycia. */
.zpr-mbar .zpr-toc-m > ol,
.zpr-mbar .zpr-alert-m-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    margin: 0;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: 20px;
    box-shadow: 0 -10px 40px rgba(30, 27, 75, 0.22);
    max-height: 66vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 1201px) {
    /* Na desktopie panel wyśrodkowany pod przyciskiem, o stałej szerokości. */
    .zpr-mbar .zpr-alert-m-panel {
        left: 50%;
        transform: translateX(-50%);
        width: 420px;
    }
}

@media (max-width: 1200px) {
    .zpr-mbar { bottom: 12px; gap: 8px; }
    .zpr-mbar summary { padding: 8px 18px; }
    .zpr-mbar summary > span { font-size: 13.5px; }
    .zpr-mbar summary > em { font-size: 10px; }
    /* Pełna szerokość ekranu, niezależnie od tego, którą pigułkę kliknięto. */
    .zpr-mbar .zpr-toc-m > ol,
    .zpr-mbar .zpr-alert-m-panel {
        left: 12px;
        right: 12px;
        width: auto;
        transform: none;
    }
}

@media (max-width: 576px) {
    .zpr-mbar summary > em { display: block; }
    .zpr-mbar summary { padding: 7px 16px; }
    .zpr-mbar summary > span { font-size: 13px; }
}

/* ── Wnętrze popupu alertu ── */
.zpr-alert-m-panel { padding: 18px 18px 20px; }
.zpr-alert-m-panel .zpr-alert-pick { margin-top: 2px; }
.zpr-alert-m-panel .zpr-alert-tile { margin-top: 16px; }
.zpr-alert-m-panel .zpr-alert-form { margin-top: 18px; }
.zpr-alert-form .zpr-alert-row { gap: 10px; }

.zpr-alert-consent {
    margin-top: 14px;
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--zpr-ink-2);
}

.zpr-alert-consent input { margin-top: 1px; }

/* Elementor ustawia `color:#000` dla każdego <button> z tą samą specyficznością
   co `button.zpr-btn--primary`, więc wygrywał kolejnością wczytania arkuszy.
   Dwie klasy (0,2,0) biją klasę+element (0,1,1) — bez sięgania po !important. */
.zpr-btn.zpr-btn--primary,
.zpr-btn.zpr-btn--primary:hover,
.zpr-btn.zpr-btn--primary:focus {
    color: #ffffff;
    background: var(--zpr-grad-btn);
}

.zpr-btn.zpr-btn--ghost { color: var(--zpr-ink); }
.zpr-btn.zpr-btn--ghost:hover { color: var(--zpr-accent-deep); }

/* ── Benchmark: pola jedno pod drugim, oba na pełną szerokość ── */

/* ── Formularz JST: lekki, „chmurkowy" ── */
.zpr-jst-form {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 50px rgba(30, 27, 75, 0.10);
    border-radius: 28px;
    padding: 34px 36px;
}

.zpr-jst-form input[type="text"],
.zpr-jst-form input[type="email"],
.zpr-jst-form select,
.zpr-jst-form .zpr-search-input {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(30, 27, 75, 0.10);
}

.zpr-jst-form label { font-weight: 600; color: var(--zpr-ink-2); }
.zpr-jst-form .zpr-alert-consent { font-size: 11.5px; color: var(--zpr-ink-2); }

@media (max-width: 768px) {
    .zpr-jst-form { padding: 24px 20px; border-radius: 22px; }
}

/* ── Mapa: o jedną piątą mniejsza niż pełna szerokość kolumny ── */
.zpr-page--indeks .zpr-map-canvas { max-width: 880px; }

/* Tło gradientowe niesie sama pigułka, więc summary musi być przezroczyste.
   Inaczej — przy `overflow: visible`, którego wymagają wysuwane panele —
   prostokątne tło summary wystawałoby poza zaokrąglony obrys przycisku. */
.zpr-mbar .zpr-alert-m > summary,
.zpr-mbar .zpr-alert-m[open] > summary {
    background: transparent;
    border-radius: 50px;
}

.zpr-mbar .zpr-toc-m > summary { color: var(--zpr-ink); }

/* Zgoda dziedziczyła pogrubienie po otoczeniu — to drobny druk, nie nagłówek. */
.zpr-alert-consent,
.zpr-alert-consent span {
    font-weight: 400;
    letter-spacing: 0;
}

.zpr-alert-m-panel .zpr-alert-legal { margin-top: 12px; }

/* Obie pigułki paska: pełne zaokrąglenie i identyczna geometria. */
.zpr-mbar > .zpr-toc-m,
.zpr-mbar > .zpr-alert-m {
    border-radius: 50px;
    border-left-width: 1px;
}

.zpr-mbar > .zpr-toc-m > summary,
.zpr-mbar > .zpr-alert-m > summary,
.zpr-mbar > .zpr-toc-m[open] > summary,
.zpr-mbar > .zpr-alert-m[open] > summary {
    border-radius: 50px;
}

/* Powiat bez wyniku ma tłumaczyć dlaczego, a nie być martwy. */
.zpr-map-svg path.bez-danych { cursor: help; }
.zpr-map-svg path.bez-danych:hover,
.zpr-map-svg path.bez-danych:focus { stroke: var(--zpr-ink-3); stroke-width: 1.2; outline: none; }
.zpr-map-brak { font-size: 13.5px; line-height: 1.6; color: var(--zpr-ink-2); margin: 0; }

.zpr-bench-trend { margin: 0 0 30px; }
.zpr-bench-trend svg { width: 100%; height: auto; }

/* ===============================================
   Wyszukiwarki na podstronach = ten sam komponent co na hubie
   Karta .zpr-finder z szarym polem w pigułce i linijką podsumowania.
   =============================================== */

/* Wariant samodzielny: na hubie karta stoi w kolumnie obok listy, tutaj
   jest jedynym elementem sekcji, więc dostaje ograniczenie i wyśrodkowanie. */
.zpr-finder--solo {
    max-width: 720px;
    margin: 0 auto 28px;
}

/* Podpowiedzi unoszą się nad treścią, więc wiersz musi być punktem odniesienia. */
.zpr-finder-row { position: relative; }

.zpr-finder-select {
    appearance: none;
    cursor: pointer;
    /* Strzałka jako tło — natywna bywa niewidoczna na jasnym polu. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236B0F99%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
    padding-right: 52px;
}

/* Pole w formularzu JST: ten sam krój, ale bez karty i niższe, żeby pasowało
   do sąsiednich pól. */
.zpr-finder-input--sm {
    padding: 11px 16px;
    font-size: 14.5px;
    border-radius: var(--zpr-radius-sm);
}

.zpr-bench-controls { display: block; }
.zpr-bench-controls .zpr-finder-row + .zpr-finder-row { margin-top: 12px; }

/* ── Benchmark: sekcja dla zalogowanych ── */
/* Nagłówki wewnątrz są wstrzykiwane z JS, więc nie łapią stylów .zpr-doc —
   bez tego renderowały się domyślnym krojem przeglądarki. */
#zpb-pelne {
    max-width: 860px;
    margin: 0 auto;
}

#zpb-pelne h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--zpr-ink);
    text-align: center;
    margin: 34px 0 10px;
}

#zpb-pelne h3:first-child { margin-top: 0; }
#zpb-pelne .zpr-section-lead { margin-bottom: 22px; }

/* Wykres trendu ma proporcje 720×200 — rozciągnięty na 1400 px robił się
   nieczytelnie płaski i dominował sekcję. */
.zpr-bench-trend {
    max-width: 720px;
    margin: 0 auto 34px;
    padding: 18px 16px 10px;
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    border-radius: var(--zpr-radius);
}

.zpr-bench-trend svg { width: 100%; height: auto; display: block; }

/* ===============================================
   Hub: narzędzia nad biblioteką + paginacja
   =============================================== */

.zpr-tools { margin-bottom: 56px; }
.zpr-tools-head { text-align: center; margin-bottom: 26px; }
.zpr-tools-head .zpr-h2 { margin-bottom: 10px; }
.zpr-tools-head .zpr-section-lead { max-width: 640px; margin-inline: auto; }

.zpr-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Kafel narzędzia celowo różni się od karty raportu: pełne tło, etykieta
   rodzaju u góry i wezwanie do działania na dole. Chodzi o to, żeby czytelnik
   od razu widział, że to nie jest kolejna publikacja do przeczytania. */
.zpr-tool {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 22px;
    border-radius: var(--zpr-radius);
    background: var(--zpr-surface);
    border: 1px solid var(--zpr-line);
    text-decoration: none;
    color: var(--zpr-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.zpr-tool:hover {
    transform: translateY(-3px);
    box-shadow: var(--zpr-shadow-lg);
    border-color: var(--zpr-accent-soft);
    color: var(--zpr-ink);
}

.zpr-tool-badge {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: var(--zpr-pill);
    background: var(--zpr-surface-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--zpr-ink-3);
}

.zpr-tool-title {
    margin: 14px 0 8px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.zpr-tool-desc {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--zpr-ink-2);
}

.zpr-tool-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--zpr-accent-deep);
}

.zpr-tool:hover .zpr-card-arrow { transform: translateX(4px); }

/* Trzy produkty, na których nam zależy — ciemne tło i biały tekst.
   Reszta zostaje w wersji jasnej, żeby wyróżnienie coś znaczyło. */
.zpr-tool--akcent {
    background: var(--zpr-dark);
    border-color: transparent;
    color: #ffffff;
}

.zpr-tool--akcent:hover { color: #ffffff; box-shadow: 0 14px 36px rgba(59, 7, 100, 0.32); }
.zpr-tool--akcent .zpr-tool-badge { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.zpr-tool--akcent .zpr-tool-desc { color: rgba(255, 255, 255, 0.82); }
.zpr-tool--akcent .zpr-tool-cta { color: #ffffff; }

.zpr-lib-title { margin-bottom: 18px; }

/* Karta poza bieżącą stroną znika z widoku, ale ZOSTAJE w kodzie strony —
   roboty dalej widzą komplet publikacji. */
.zpr-card.is-page-hidden { display: none; }

.zpr-pagination[hidden] { display: none; }
.zpr-pagination button.page-numbers { cursor: pointer; font-family: inherit; }
.zpr-pagination button.page-numbers[disabled] { opacity: 0.4; cursor: default; transform: none; }

.zpr-pagination button.page-numbers:not([disabled]):hover {
    background: rgba(190, 34, 255, 0.10);
    color: var(--zpr-accent-deep);
    transform: translateY(-2px);
}

@media (max-width: 1200px) {
    .zpr-tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .zpr-tools-grid { grid-template-columns: 1fr; }
    .zpr-tools { margin-bottom: 40px; }
}

/* Tytuł nie dziedziczy koloru z kafla: motyw ustawia własną barwę dla <h3>,
   więc na ciemnym tle zostawał ciemnofioletowy i był praktycznie nieczytelny.
   Kolor trzeba podać wprost w obu wariantach. */
.zpr-tool .zpr-tool-title { color: var(--zpr-ink); }
.zpr-tool--akcent .zpr-tool-title { color: #ffffff; }

/* Trzy wyróżnione kafle stoją obok siebie, więc jeden odcień fioletu na
   wszystkich robił z nich monotonny pas. Każdy dostaje własny gradient
   z palety marki: fiolet, indygo i turkus przechodzący w granat. */
.zpr-tool--a1 {
    background: linear-gradient(135deg, #3b0764 0%, #6B0F99 48%, #BE22FF 100%);
    box-shadow: 0 10px 28px rgba(107, 15, 153, 0.24);
}

.zpr-tool--a2 {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #6d28d9 100%);
    box-shadow: 0 10px 28px rgba(49, 46, 129, 0.26);
}

.zpr-tool--a3 {
    background: linear-gradient(135deg, #0f766e 0%, #155e75 52%, #1e1b4b 100%);
    box-shadow: 0 10px 28px rgba(15, 118, 110, 0.24);
}

.zpr-tool--a1:hover { box-shadow: 0 16px 38px rgba(107, 15, 153, 0.38); }
.zpr-tool--a2:hover { box-shadow: 0 16px 38px rgba(49, 46, 129, 0.40); }
.zpr-tool--a3:hover { box-shadow: 0 16px 38px rgba(15, 118, 110, 0.38); }

/* Sekcja zamyka stronę, więc dostaje oddech od paginacji zamiast marginesu pod. */
.zpr-tools { margin: 56px 0 0; }

/* Na telefonie mapa Indeksu ma zająć całą szerokość, a panel z danymi stanąć
   POD nią — dokładnie jak w Barometrze.

   Reguła `.zpr-page--indeks .zpr-map-wrap` (dwie klasy) bije mobilną
   `.zpr-map-wrap` (jedna klasa), a media query NIE dodaje specyficzności —
   więc układ dwukolumnowy zostawał także na 390 px. Kolumna mapy kurczyła się
   wtedy do zera, bo panel ma sztywne 300 px, i z mapy zostawała miniaturka
   nie do trafienia palcem. */
@media (max-width: 992px) {
    .zpr-page--indeks .zpr-map-wrap {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .zpr-page--indeks .zpr-map-canvas {
        max-width: 100%;
        width: 100%;
    }

    .zpr-page--indeks .zpr-map-panel { width: auto; }
}

/* ===============================================
   Blog i archiwa wpisów — wygląd biblioteki /raporty/.
   Cały styl kart, spisu kategorii i paginacji pochodzi
   z css/pages/raporty.css (klasy `zpr-*`, wspólny komponent).
   Tutaj wyłącznie to, czego tamten plik nie pokrywa:
   guard pod sticky oraz różnice wynikające z tego, że
   pozycje spisu są linkami <a>, a nie przyciskami <button>.
   Zero `!important` — nowe klasy nie kolidują ze starym
   css/modules/blog.css, bo ten trzyma się selektora .page-blog.
   =============================================== */

/* Sticky spis kategorii wymaga, by żaden przodek nie tworzył kontekstu
   przewijania. Motyw ma `html, body { overflow-x: hidden }` — samo `html`
   wystarczy, żeby zabić position:sticky. `clip` tnie identycznie, ale
   kontekstu przewijania NIE tworzy. Ten sam trik co w raporty.css. */
html:has(body.blog),
html:has(body.category),
html:has(body.tag),
html:has(body.author),
html:has(body.date),
body.blog,
body.category,
body.tag,
body.author,
body.date {
    overflow-x: clip;
}

/* ── Pozycje spisu jako linki ──
   .zpr-lib-type i .zpr-lib-m-type są w raporty.css opisane pod <button>,
   więc dziedziczą jego reset. Anchor potrzebuje własnego. */
.zpb-blog .zpr-lib-type,
.zpb-blog .zpr-lib-m-type {
    text-decoration: none;
    color: inherit;
}

.zpb-blog .zpr-lib-type:hover .zpr-lib-type-name,
.zpb-blog .zpr-lib-type:focus-visible .zpr-lib-type-name {
    color: var(--zpr-accent-deep);
}

.zpb-blog .zpr-lib-type:focus-visible,
.zpb-blog .zpr-lib-m-type:focus-visible,
.zpb-blog .zpr-card:focus-visible {
    outline: 2px solid var(--zpr-accent);
    outline-offset: 3px;
}

.zpb-blog .zpr-lib-m-type:hover {
    border-color: var(--zpr-accent-soft);
    color: var(--zpr-accent-deep);
}

/* Licznik w mobilnym arkuszu nie może się rozciągać w flexie summary */
.zpb-blog .zpr-lib-m-type .zpr-lib-type-n {
    flex: none;
}

/* ── Wyszukiwarka ──
   .zpr-finder-row to grid „input + coś" — u nas tym „czymś" jest submit,
   bo szukanie idzie przez zwykły GET, nie przez filtr w przeglądarce. */
.zpb-blog .zpr-finder-row {
    margin: 0;
}

.zpb-blog .zpr-finder-row .zpr-btn {
    white-space: nowrap;
}

/* Link „Wszystkie artykuły" stoi w miejscu przycisku czyszczenia filtrów */
.zpb-blog .zpr-lib-reset {
    text-decoration: underline;
}

/* ── Karty ──
   Tytuł karty to <h2> (a nie <h3> jak w raportach) — zdejmujemy nagłówkowe
   marginesy motywu, resztę wyglądu bierze .zpr-card-title. */
.zpb-blog .zpr-card-title {
    margin-top: 0;
}

.zpb-blog .zpr-empty a {
    color: var(--zpr-accent-deep);
    font-weight: 700;
}

@media (max-width: 992px) {
    .zpb-blog .zpr-finder-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   Matched Candidates Button
   ========================================================================== */

/* AI icon label — shared base */
body .my-job-employer .ai-icon-label {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Active — gradient AI */
body .my-job-employer .ai-icon-gradient {
    background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Locked — gray AI */
body .my-job-employer .ai-icon-gray {
    color: var(--color-gray-400, #9ca3af);
    opacity: 0.6;
}

body .my-job-employer .matched-candidates-locked {
    cursor: pointer;
    pointer-events: auto;
}

/* AI Upsell Banner — centered overlay */
.matched-locked-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.matched-locked-banner.is-visible {
    display: flex;
}

.matched-locked-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

.matched-locked-banner-content {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 24px 28px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.2);
    animation: matchedBannerIn 0.25s ease;
}

.matched-locked-banner-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 2px;
}

.matched-locked-banner-text {
    flex: 1;
}

.matched-locked-banner-text strong {
    color: #fff;
    font-size: 15px;
    display: block;
    margin-bottom: 8px;
}

.matched-locked-banner-cta {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: #fff;
}

@keyframes matchedBannerIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}



/* ==========================================================================
   Matched Candidates Modal
   ========================================================================== */

body #matched-candidates-modal {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 20px);
    padding: 32px;
    max-width: 600px;
    margin: 20px auto;
    overflow: hidden;
}

body #matched-candidates-modal h3 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 4px;
}

body #matched-candidates-modal .matched-subtitle {
    color: var(--color-gray-500, #6b7280);
    font-size: 13px;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

body #matched-candidates-modal .matched-list {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

body #matched-candidates-modal .matched-list::-webkit-scrollbar {
    width: 6px;
}

body #matched-candidates-modal .matched-list::-webkit-scrollbar-track {
    background: transparent;
}

body #matched-candidates-modal .matched-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

body #matched-candidates-modal .matched-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--color-gray-500, #6b7280);
}

body #matched-candidates-modal .matched-empty {
    text-align: center;
    padding: 30px 0;
    color: var(--color-gray-500, #6b7280);
    font-size: 14px;
}

body #matched-candidates-modal .matched-candidate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

body #matched-candidates-modal .matched-candidate-row:last-child {
    border-bottom: none;
}

body #matched-candidates-modal .matched-candidate-row:hover {
    background: var(--color-bg-secondary, #f9fafb);
}

body #matched-candidates-modal .matched-score {
    flex-shrink: 0;
    width: 48px;
    padding-top: 1px;
}

body #matched-candidates-modal .matched-score .rj-badge-match {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    min-width: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body #matched-candidates-modal .matched-score .match-high {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

body #matched-candidates-modal .matched-score .match-medium {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

body #matched-candidates-modal .matched-score .match-low {
    background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
}

body #matched-candidates-modal .matched-info {
    flex: 1;
    min-width: 0;
}

body #matched-candidates-modal .matched-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-primary, #1f2937);
    margin-bottom: 2px;
}

body #matched-candidates-modal .matched-contact {
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
}

body #matched-candidates-modal .matched-contact i {
    width: 14px;
    margin-right: 4px;
    font-size: 11px;
}

body #matched-candidates-modal .matched-action {
    flex-shrink: 0;
    align-self: center;
}

body #matched-candidates-modal .btn-view-profile {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #ff3366 0%, #a832a4 100%);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(168, 50, 164, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

body #matched-candidates-modal .btn-view-profile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 50, 164, 0.45);
    color: #fff;
    text-decoration: none;
}

body #matched-candidates-modal .matched-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

body #matched-candidates-modal .matched-header > div:first-child {
    min-width: 0;
    flex: 1;
}

body #matched-candidates-modal .matched-header h3 {
    margin-bottom: 4px;
}

body #matched-candidates-modal .matched-filters-bar {
    display: flex;
    gap: 8px;
    margin-bottom: -70px;
}

@media (max-width: 576px) {
    body #matched-candidates-modal .matched-filters-bar {
        margin-bottom: 4px;
    }
}

body #matched-candidates-modal .matched-filters-bar .matched-sort-select {
    flex: 1;
}

body #matched-candidates-modal .matched-sort-select {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 32px 8px 14px;
    border: 1px solid rgba(190, 34, 255, 0.25);
    border-radius: 8px;
    background: rgba(190, 34, 255, 0.06);
    color: #6B0F99;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    margin-bottom: 100px;
    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=%27%236B0F99%27 stroke-width=%272.5%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s ease;
}

body #matched-candidates-modal .matched-sort-select:hover {
    background-color: rgba(190, 34, 255, 0.12);
    border-color: rgba(190, 34, 255, 0.4);
}

body #matched-candidates-modal .matched-sort-select:focus {
    outline: none;
    border-color: rgba(190, 34, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(190, 34, 255, 0.15);
}

body #matched-candidates-modal .matched-footer {
    margin-top: 16px;
    padding-top: 12px;
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    text-align: center;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

body #matched-candidates-modal .matched-footer-text {
    display: block;
    margin-bottom: 8px;
}

body #matched-candidates-modal .matched-load-more-wrapper {
    text-align: center;
    padding: 0 0 12px;
}

body #matched-candidates-modal .btn-load-more-matched {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #51DACF 0%, #3bc4b9 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body #matched-candidates-modal .btn-load-more-matched:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(81, 218, 207, 0.4);
}

body #matched-candidates-modal .btn-load-more-matched:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* Details toggle button — matches .rj-match-banner-toggle style */
body #matched-candidates-modal .matched-details-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-basis: 100%;
    margin: 6px auto 0;
    padding: 5px 14px;
    border: 1px solid rgba(190, 34, 255, 0.25);
    border-radius: 8px;
    background: rgba(190, 34, 255, 0.06);
    color: #6B0F99;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

body #matched-candidates-modal .matched-details-toggle:hover {
    background: rgba(190, 34, 255, 0.12);
    border-color: rgba(190, 34, 255, 0.4);
}

/* Collapsible breakdown panel
   Full styles needed because job-listing.css is NOT loaded on /my-jobs/ */
body #matched-candidates-modal .matched-breakdown {
    width: 100%;
    flex-basis: 100%;
    margin-top: 8px;
}

body #matched-candidates-modal .matched-breakdown .rj-match-breakdown-inner {
    background: #f8fffe;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 14px 16px;
}

body #matched-candidates-modal .matched-breakdown .rj-match-breakdown-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

body #matched-candidates-modal .matched-breakdown .rj-match-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-bottom: 10px;
}

body #matched-candidates-modal .matched-breakdown .rj-match-dim {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
}

body #matched-candidates-modal .matched-breakdown .rj-match-dim-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

body #matched-candidates-modal .matched-breakdown .rj-match-dim-label {
    flex: 1;
}

body #matched-candidates-modal .matched-breakdown .rj-match-dim-score {
    font-weight: 600;
    font-size: 11px;
    color: #6B7280;
    min-width: 28px;
    text-align: right;
}

body #matched-candidates-modal .matched-breakdown .rj-match-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

body #matched-candidates-modal .matched-breakdown .rj-skill-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    cursor: default;
}

body #matched-candidates-modal .matched-breakdown .rj-skill-matched {
    background: #d1fae5;
    color: #065f46;
}

body #matched-candidates-modal .matched-breakdown .rj-skill-missing {
    background: #f3f4f6;
    color: #374151;
}

@media (max-width: 576px) {
    body #matched-candidates-modal {
        padding: 16px;
        border-radius: 14px;
        max-width: calc(100% - 32px);
        margin: 16px auto;
    }

    body #matched-candidates-modal .matched-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body #matched-candidates-modal .matched-filters-bar {
        flex-direction: column;
    }

    body #matched-candidates-modal .matched-sort-select {
        width: 100%;
        min-width: unset;
        margin-bottom: 0;
    }

    body #matched-candidates-modal .matched-subtitle {
        font-size: 11px;
    }

    body #matched-candidates-modal .matched-candidate-row {
        gap: 8px;
        padding: 10px 0;
    }

    body #matched-candidates-modal .matched-score {
        width: 42px;
    }

    body #matched-candidates-modal .matched-score .rj-badge-match {
        font-size: 11px;
        padding: 3px 6px;
        min-width: 40px;
    }

    body #matched-candidates-modal .matched-name {
        font-size: 13px;
    }

    body #matched-candidates-modal .matched-contact {
        font-size: 11px;
    }

    body #matched-candidates-modal .btn-view-profile {
        font-size: 10px;
        padding: 3px 8px;
    }

    body #matched-candidates-modal .matched-details-toggle {
        font-size: 10px;
        padding: 4px 12px;
    }

    body #matched-candidates-modal .matched-breakdown .rj-match-breakdown-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body #matched-candidates-modal .matched-breakdown .rj-match-breakdown-inner {
        padding: 10px 12px;
    }
}/* === AI analysis (re-rank) in matched candidates modal === */
body #matched-candidates-modal .matched-ai-analyze-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 100px;
    transition: opacity 0.2s ease;
}

body #matched-candidates-modal .matched-ai-analyze-btn:hover {
    opacity: 0.85;
}

body #matched-candidates-modal .matched-ai-analyze-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 576px) {
    body #matched-candidates-modal .matched-ai-analyze-btn {
        margin-bottom: 4px;
    }
}

body #matched-candidates-modal .matched-ai-reason {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.07), rgba(6, 182, 212, 0.07));
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

body #matched-candidates-modal .matched-ai-reason-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    color: #fff;
    white-space: nowrap;
}

body #matched-candidates-modal .matched-ai-reason-text {
    color: #374151;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================================
   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;
    pointer-events: none;
    transition: all 0.3s ease;
}

.alert-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

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

/* Guest consent (RODO) — anonymous alert subscription */
.alert-modal .alert-consent {
    margin-top: 4px;
}
.alert-modal .alert-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    cursor: pointer;
    font-weight: 400;
}
.alert-modal .alert-consent-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.alert-modal .alert-consent-label a {
    color: #4DB6AC;
    text-decoration: underline;
}

/* =========================================================================
   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 !important;
    margin-bottom: 0 !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

body .profile-form-wrapper .cmb-td {
    width: 100% !important;
    float: none !important;
}

/* ============================================
   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:has(.wp-job-board-pro-uploaded-file)~.label-can-drag,
body .profile-form-wrapper .wp-job-board-pro-uploaded-files:has(.wp-job-board-pro-uploaded-file)~.group-upload,
body .profile-form-wrapper .uploaded-files-list:has(.wp-job-board-pro-uploaded-file)~.label-can-drag,
body .profile-form-wrapper .cmb-type-file .wp-job-board-pro-uploaded-files:has(.wp-job-board-pro-uploaded-file)~*: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:has(.wp-job-board-pro-uploaded-file)~input[type="file"],
body .profile-form-wrapper .uploaded-files-list:has(.wp-job-board-pro-uploaded-file)~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-file) .group-upload,
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) 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:has(.wp-job-board-pro-uploaded-file)~.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:has(.wp-job-board-pro-uploaded-file)~.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: 33px !important;
    right: 12px !important;
}

form.cmb-form .select2-container.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 8px;
    margin-top: 1px !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;
    padding-bottom: 20px !important;
    color: #1f2937 !important;
    /* margin-bottom: 20px !important; */
    width: 100%;
    margin: -2px 0 12px 0 !important;
    padding-bottom: 11px !important;
    margin-bottom: 10px !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: 18px !important;
    top: 27px !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;
}

.cmb2-metabox .cmbhandle {
    color: #757575;
    float: right;
    width: 40px;
    margin-top: 7px !important;
    height: 30px;
    cursor: pointer;
    right: -1em;
    position: relative;
}

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;
    }
}
/* ==========================================================================
   RESUME / CV UPLOAD FORM - Cloud Style v1.0
   Strona: /my-resume/ - Przesyłanie i edycja CV
   ========================================================================== */

/* ============================================
   1. MAIN CONTAINER - Cloud Card
   ============================================ */
.resume-form-wrapper {
    background: #ffffff !important;
    border-radius: var(--profile-radius-lg, 16px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 30px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    /* Ensure the save button has room at the bottom */
    padding-bottom: 80px !important;
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Base CMB2 overrides for the resume form */
/* Remove default CMB2 and theme borders on the form wrappers */
body .resume-form-wrapper .cmb2-wrap,
body .resume-form-wrapper .cmb2-metabox,
body .resume-form-wrapper .cmb-row,
body .resume-form-wrapper .cmb-type-file,
body .resume-form-wrapper .cmb-td,
body .resume-form-wrapper .cmb-th {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .resume-form-wrapper .cmb-row,
body .resume-form-wrapper .cmb-type-file {
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .resume-form-wrapper .cmb-th {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--profile-text-primary, #1f2937) !important;
    margin-bottom: 8px;
    padding: 0 !important;
    width: 100%;
    float: none;
    text-align: left;
}

body .resume-form-wrapper .cmb-td {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* ============================================
   2. TEXT INPUTS & TEXTAREA
   ============================================ */
.resume-form-wrapper input[type="text"],
.resume-form-wrapper textarea {
    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;
    box-sizing: border-box;
}

.resume-form-wrapper input[type="text"]:focus,
.resume-form-wrapper textarea:focus {
    border-color: var(--profile-primary, #2DD4BF) !important;
    outline: none;
}

/* ============================================
   3. UPLOAD DROPZONE - Compact without icon
   ============================================ */
.resume-form-wrapper .group-upload,
.resume-form-wrapper .label-can-drag {
    border: 2px dashed var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 20px !important;
    text-align: center;
    background: #f9fafb !important;
    transition: all 0.2s ease;
    /* Min height reduced for compactness */
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.resume-form-wrapper .group-upload:hover,
.resume-form-wrapper .label-can-drag:hover {
    border-color: var(--profile-primary, #2DD4BF) !important;
    background: rgba(45, 212, 191, 0.03) !important;
}

/* Hide default icons and images in the dropzone */
.resume-form-wrapper .group-upload img,
.resume-form-wrapper .group-upload i,
.resume-form-wrapper .label-can-drag img,
.resume-form-wrapper .label-can-drag i {
    display: none !important;
}

/* Upload button inside dropzone */
.resume-form-wrapper .btn-upload,
.resume-form-wrapper .upload-file-btn {
    background: var(--profile-white, #ffffff) !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--profile-text-primary, #1f2937) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.resume-form-wrapper .btn-upload:hover,
.resume-form-wrapper .upload-file-btn:hover {
    border-color: var(--profile-primary, #2DD4BF) !important;
    color: var(--profile-primary, #2DD4BF) !important;
}

/* Text in dropzone ("Maximum file size...", "Drag & drop...") */
.resume-form-wrapper .upload-file-text,
.resume-form-wrapper .group-upload p {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Hide dropzone completely when a file is uploaded */
.resume-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file) .group-upload,
.resume-form-wrapper .cmb-td:has(.wp-job-board-pro-uploaded-file) .label-can-drag {
    display: none !important;
}

/* ============================================
   4. UPLOADED CV - Gray Cloud Tile
   ============================================ */
.resume-form-wrapper .wp-job-board-pro-uploaded-files {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

/* The actual uploaded file tile */
body .resume-form-wrapper .wp-job-board-pro-uploaded-file,
body .resume-form-wrapper .uploaded-file-preview {
    background: #f3f4f6 !important;
    border-radius: var(--profile-radius-md, 12px) !important;
    padding: 16px !important;
    border: 1px solid var(--profile-border, #e5e7eb) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 400px;
    height: auto !important;
    /* Ensure content is never cut off vertically */
    min-height: 60px !important;

    /* Don't want it stretching too wide */
    transition: all 0.2s ease;
    margin: 0 0 16px 0 !important;
}

/* For document specific display (CV is a document) */
body .resume-form-wrapper .wp-job-board-pro-uploaded-file.document {
    display: flex !important;
}

/* Icon / Document visual inside tile */
body .resume-form-wrapper .wp-job-board-pro-uploaded-file i {
    font-size: 24px !important;
    color: var(--profile-primary, #2DD4BF) !important;
    margin-right: 12px !important;
    line-height: 1 !important;
}

/* Name of the uploaded file inside the tile */
body .resume-form-wrapper .wp-job-board-pro-uploaded-file-name flex-middle,
body .resume-form-wrapper .wp-job-board-pro-uploaded-file-name,
body .resume-form-wrapper .file-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--profile-text-primary, #1f2937) !important;
    word-break: break-all;
    flex-grow: 1;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Hide any stray PDF/DOC badge if the theme forces it, since filename already has it */
body .resume-form-wrapper .candidate-detail-cv .extension {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: #e5e7eb !important;
    color: #4b5563 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    margin-top: 4px !important;
}

/* Remove 'X' button styling */
body .resume-form-wrapper .wp-job-board-pro-remove-uploaded-file,
body .resume-form-wrapper .remove-uploaded-file {
    background: #e5e7eb !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    color: #4b5563 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    /* Hide default text if any */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    text-indent: -9999px;
    /* Hide any default text */
    margin: 0 !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    transform: none !important;
}

/* X inside the button */
body .resume-form-wrapper .wp-job-board-pro-remove-uploaded-file::before,
body .resume-form-wrapper .remove-uploaded-file::before {
    content: '✕' !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #4b5563 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    display: block !important;
}

/* Hide any ::after icons that parent theme might have inserted */
body .resume-form-wrapper .wp-job-board-pro-remove-uploaded-file::after,
body .resume-form-wrapper .remove-uploaded-file::after {
    display: none !important;
    content: none !important;
}

body .resume-form-wrapper .wp-job-board-pro-remove-uploaded-file:hover,
body .resume-form-wrapper .remove-uploaded-file:hover {
    background: #ef4444 !important;
    /* Red on hover */
}

body .resume-form-wrapper .wp-job-board-pro-remove-uploaded-file:hover::before,
body .resume-form-wrapper .remove-uploaded-file:hover::before {
    color: #ffffff !important;
}

/* ============================================
   5. SAVE BUTTON - Visible & Styled
   ============================================ */
/* Target the submit button */
.resume-form-wrapper input[type="submit"],
.resume-form-wrapper button[type="submit"],
.resume-form-wrapper .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;

    /* Critical positioning to keep it visible inside the form wrapper */
    position: absolute !important;
    bottom: 24px !important;
    left: 30px !important;
    /* Match padding of wrapper */
    z-index: 20;
    width: auto !important;
    margin-top: 0 !important;
    /* Removing top margin since it's absolutely positioned from bottom */
}

.resume-form-wrapper input[type="submit"]:hover,
.resume-form-wrapper button[type="submit"]:hover,
.resume-form-wrapper .button-primary:hover {
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4) !important;
    transform: translateY(-2px);
}

/* Override WordPress default button styles that might interfere */
.resume-form-wrapper .cmb-form .button-primary {
    text-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    z-index: 6;
}

/* ============================================
   6. RESPONSIVE / MOBILE
   ============================================ */
@media (max-width: 768px) {
    .resume-form-wrapper {
        padding: 20px !important;
        padding-bottom: 70px !important;
        border-radius: 12px !important;
    }

    .resume-form-wrapper input[type="submit"],
    .resume-form-wrapper button[type="submit"],
    .resume-form-wrapper .button-primary {
        left: 20px !important;
        right: 20px !important;
        /* Full width on mobile minus padding */
        width: calc(100% - 40px) !important;
        text-align: center;
    }
}
/* ====================================
   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;
    }
}
/* ─── Dynamic H1 on listing pages ─── */
.listing-page-h1 {
    font-size: 17px;
    font-weight: 500 !important;
    color: #222;
    margin: 25px 0 25px 0;
    padding: 0;
    line-height: 1.3;
}

@media (min-width: 992px) {
    .listing-page-h1 {
        margin-top: 130px;
    }
}

/* ─── SEO description at bottom of listings ─── */
.listing-seo-description {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.listing-seo-description p {
    font-size: 13px;
    line-height: 1.7;
    color: #585757;
    margin: 0;
}

.listing-seo-description a {
    color: #585757;
    text-decoration: underline;
}

.listing-seo-description a:hover {
    color: #333;
}

/* ─── Internal links section ─── */
.rj-internal-links.rj-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border: none;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 1px;
    padding-right: 20px;
    border-radius: 35px;
}

.rj-internal-links {
    margin-top: 25px;
}

.rj-internal-links .rj-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 35px;
}

.rj-internal-links-group-title {
    font-size: 15px;
    font-weight: 600;
    color: #444;
    margin: 35px 0 10px 0;
    padding: 0;
}

/* Listing FAQ — reuses the internal-links card/accordion; answer text only */
.rj-faq-answer {
    margin: 0;
    padding-bottom: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #585757;
}

/* Glossary — related-offers link under a definition */
.zpp-glossary__link {
    margin: 0;
    padding-bottom: 14px;
}

.zpp-glossary__link a {
    font-size: 13px;
    color: #1a56db;
    text-decoration: none;
}

.zpp-glossary__link a:hover {
    text-decoration: underline;
}

/* Internal links accordion */
.rj-internal-links-accordion {
    border-top: 1px solid #e8e8e8;
}

.rj-internal-links-accordion:first-of-type {
    border-top: none;
}

.rj-internal-links-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.rj-internal-links-accordion-header::-webkit-details-marker {
    display: none;
}

.rj-internal-links-accordion-header i {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s ease;
}

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

.rj-internal-links-accordion .rj-internal-links-grid {
    padding-bottom: 14px;
}

.rj-internal-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rj-internal-link {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    color: #222;
    background: #f2f2f2;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.rj-internal-link:hover {
    background: #e5e5e5;
    color: #111;
    text-decoration: none;
}

/* Employer page internal links */
.rj-employer-card.rj-internal-links {
    margin-top: 20px;
}

.rj-employer-card.rj-internal-links .rj-section-title {
    font-size: 18px;
}

/* ─── SEO Sidebar Filter Chips ─── */
.seo-filter-group {
    margin-bottom: 10px;
}

.seo-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seo-chip-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: #444;
}

.seo-chip-label:hover {
    border-color: #51DACF;
    color: #333;
    background: #f5fefd;
    text-decoration: none;
}

.seo-chip-label.is-active {
    background: #333;
    border-color: #333;
    color: #fff;
}

.seo-chip-label.is-active:hover {
    background: #444;
    border-color: #444;
    color: #fff;
    text-decoration: none;
}

.seo-chip-text {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

/* Desktop sidebar: compact spacing */
.desktop-filter-container .seo-filter-group .widget-content {
    padding-bottom: 5px;
}

/* Mobile sidebar: larger touch targets */
.custom-mobile-sidebar-wrapper .seo-chip-label {
    padding: 7px 14px;
}

.custom-mobile-sidebar-wrapper .seo-chip-text {
    font-size: 14px;
}

/* ─── Active filters bar restyle ─── */
.results-filter-wrapper {
    margin-bottom: 30px;
}

.results-filter-wrapper .title {
    font-size: 12px;
    font-weight: 500;
    color: #2d2a2a;
    margin: 0 0 8px;
}

.results-filter-wrapper .inner {
    padding: 0;
    background: none;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.results-filter-wrapper .results-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.results-filter-wrapper .results-filter li {
    float: none;
    margin: 0;
}

.results-filter-wrapper .results-filter a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 13px;
    color: #222;
    background: #f2f2f2;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.results-filter-wrapper .results-filter a:hover {
    background: #e5e5e5;
    color: #111;
}

.results-filter-wrapper .results-filter .close-value {
    color: #999;
    font-size: 12px;
    padding: 0;
    order: 2;
}

.results-filter-wrapper .results-filter a:hover .close-value {
    color: #e44343;
}

.results-filter-wrapper .inner > a {
    font-size: 12px;
    color: #999;
    margin: 0;
    padding: 0;
}

.results-filter-wrapper .inner > a:hover {
    color: #e44343;
}

/* Sekcja "Praca {miasto} wg kategorii" — eleganckie pille z liczbą ofert */
.rj-city-categories {
    margin-bottom: 24px;
}
.rj-city-categories .rj-section-title {
    margin-bottom: 14px;
}
/* Zwijana sekcja kategorii miasta (<details>) — domyślnie zwinięta, by oferty były wyżej.
   Karta z zaokrąglonymi rogami + padding (jak .rj-internal-links.rj-card; cień daje .rj-card). */
details.rj-city-categories--collapsible {
    margin: 18px 0 24px;
    padding: 16px 20px;
    border-radius: 20px;
    background: #fff;
}
.rj-city-categories-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.rj-city-categories-summary::-webkit-details-marker {
    display: none;
}
.rj-city-categories-summary .rj-section-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2733;
}
.rj-city-categories-summary i {
    flex: 0 0 auto;
    font-size: 13px;
    color: #999;
    transition: transform 0.2s ease;
}
details.rj-city-categories--collapsible[open] .rj-city-categories-summary {
    margin-bottom: 14px;
}
details.rj-city-categories--collapsible[open] .rj-city-categories-summary i {
    transform: rotate(180deg);
}
details.rj-city-categories--collapsible .rj-city-intro {
    margin-bottom: 14px;
}
.rj-city-intro {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.rj-city-intro strong {
    color: #1a202c;
    font-weight: 600;
}
ul.rj-city-categories-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
ul.rj-city-categories-list > li {
    margin: 0;
    padding: 0;
    list-style: none !important;
}
ul.rj-city-categories-list > li::before {
    display: none !important;
}
ul.rj-city-categories-list > li > a.rj-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background: #fff;
    color: #1f2733;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
ul.rj-city-categories-list > li > a.rj-cat-pill:hover {
    border-color: #1a56db;
    color: #1a56db;
    box-shadow: 0 3px 10px rgba(26, 86, 219, .12);
}
ul.rj-city-categories-list .rj-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    background: #eef1f8;
    color: #4a5365;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
}
ul.rj-city-categories-list > li > a.rj-cat-pill:hover .rj-cat-count {
    background: #1a56db;
    color: #fff;
}

/* =============================================================
   Semantic Search — Dropdown & Hero Styles
   ============================================================= */

/* --- Hero Search Container (Homepage) --- */

.semantic-search-container {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.semantic-search-input {
  width: 100%;
  padding: 16px 24px;
  font-size: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #333;
}

.semantic-search-input:focus {
  border-color: #2557a7;
  box-shadow: 0 0 0 3px rgba(37, 87, 167, 0.12);
}

.semantic-search-input::-moz-placeholder {
  color: #999;
  font-style: normal;
}

.semantic-search-input::placeholder {
  color: #999;
  font-style: normal;
}

/* --- Results Dropdown --- */

.semantic-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.semantic-search-results--inline {
  margin-top: 2px;
  border-radius: 8px;
}

/* --- Suggestions --- */

.semantic-suggestions {
  padding: 8px 0;
}

.semantic-suggestions-header {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}

.semantic-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.15s;
  cursor: pointer;
}

.semantic-suggestion:hover,
.semantic-suggestion--active {
  background-color: #f5f7fa;
}

.semantic-suggestion--top {
  font-weight: 500;
}

.semantic-suggestion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a8917;
}

.semantic-suggestion-label {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.semantic-suggestion-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
}

.semantic-suggestion--top {
  background: #f0faf0;
  border-top: 1px solid #e0f0e0;
}

.semantic-suggestion--top .semantic-suggestion-badge {
  background: #c8e6c9;
  color: #1b5e20;
}

.semantic-suggestions-footer {
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.semantic-more-btn {
  display: block;
  margin: 4px 16px 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #2557a7;
  background: #f0f4ff;
  border: 1px solid #d0daf0;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
}

.semantic-more-btn:hover {
  background: #2557a7;
  color: #fff;
}

/* --- Popular Searches --- */

.semantic-suggestion--popular .semantic-suggestion-icon {
  color: #888;
}

.semantic-suggestion-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  transition: color 0.15s;
}

.semantic-suggestion--popular:hover .semantic-suggestion-arrow {
  color: #2557a7;
}

/* --- Job Previews --- */

.semantic-jobs-header {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaa;
  border-top: 1px solid #f0f0f0;
}

.semantic-job-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.15s;
  cursor: pointer;
}

.semantic-job-preview:hover {
  background-color: #f5f7fa;
}

.semantic-job-preview-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #1a1a2e;
}

.semantic-job-preview-meta {
  font-size: 10px;
  color: #888;
  line-height: 1.3;
}

/* --- Loading Animation --- */

.semantic-suggestions-loading {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px;
}

.semantic-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2557a7;
  animation: semantic-bounce 1.2s infinite ease-in-out;
}

.semantic-loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.semantic-loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes semantic-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Info Button (inside keyword field) --- */

.semantic-info-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #74D6CE 0%, #5ECBC2 100%) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.2s;
  padding: 0;
  line-height: 1;
}

.semantic-info-btn:hover {
  transform: scale(1.1);
}

/* --- Info Popup (AI-style overlay) --- */

.semantic-info-popup.is-visible {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.semantic-info-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

.semantic-info-popup-content {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 24px 28px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.2);
  animation: semanticInfoIn 0.25s ease;
}

.semantic-info-popup-ai-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

.semantic-info-popup-text {
  flex: 1;
  text-align: left;
}

.semantic-info-popup-text strong {
  color: #fff;
  font-size: 15px;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.semantic-info-popup-text p {
  margin: 8px 0;
  color: #cbd5e1;
}

.semantic-info-popup-text ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
}

.semantic-info-popup-text ul li {
  padding: 3px 0;
  color: #e2e8f0;
}

.semantic-info-popup-text ul li::before {
  content: "✦ ";
  color: #a855f7;
  font-size: 11px;
}

@keyframes semanticInfoIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Mobile "i" button in submit slot --- */
.mobile-search-submit-btn.semantic-info-btn {
  background: linear-gradient(135deg, #74D6CE 0%, #5ECBC2 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
}

/* --- Mobile --- */

@media (max-width: 768px) {
  .semantic-search-input {
    padding: 14px 18px;
    font-size: 16px; /* Prevent iOS zoom */
    border-radius: 10px;
  }

  .semantic-search-results {
    border-radius: 8px;
  }

  .semantic-suggestion {
    padding: 12px 14px;
  }

  .semantic-suggestion-label {
    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;
    }
}
/* Notka: profil uzupełniony automatycznie z aplikacji „bez CV" */
.rj-candidate-content .rj-profile-inferred-note {
    margin: 0 0 16px;
    font-size: 13px;
    font-style: italic;
    color: #6b7280;
}

/* ========================================================== */
/* 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;
}