/* ==========================================================================
   QC JOBS PLUGIN – MASTER STYLESHEET
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL FONT + VARIABLES
   ========================================================================== */
:root {
    --qc-red:        #D01436;
    --qc-red-dark:   #B0122F;
    --qc-gray:       #e5e5e5;
    --qc-border:     #F3F4F5;
    --qc-bg:         #F3F4F5;
    --qc-text:       #415464;
    --qc-text-light: #666;
    --qc-radius:     8px;
    --qc-shadow:     0 4px 20px rgba(0,0,0,0.06);
    --max-width:     1400px;

    /* New variables for hard-coded colors – defaults = original values */
    --qc-border-light:     #ddd;
    --qc-border-medium:    #ccc;
    --qc-white:            #fff;
    --qc-bg-light-gray:    #f8f9fa;
    --qc-pagination-text:  #2c3e50;
    --qc-pagination-hover: #e9ecef;
    --qc-divider:          #C1C7CC;
    --qc-share-bg:         #415464;
}

/* Global font */
.qc-jobs-wrapper,
.qc-single-job-page,
.qc-single-job-page * {
    font-family: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ==========================================================================
   2. GENERAL LAYOUT – LISTING PAGE
   ========================================================================== */

.qc-jobs-wrapper {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 0 20px;
}

.qc-jobs-inner {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

/* Sidebar – filters */
.qc-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* Main results column */
.qc-results {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   3. FILTERS & SEARCH
   ========================================================================== */

.qc-search-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--qc-border-light);      /* ← zmienione */
    border-radius: 0;
    font-size: 18px;
    margin-bottom: 12px;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.qc-filterby {
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0 15px;
    color: var(--qc-text);
}

.qc-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--qc-border-medium);     /* ← zmienione */
    border-radius: 4px;
    background: var(--qc-white);                   /* ← zmienione */
    font-size: 15px;
    margin-bottom: 18px;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

/* Buttons */
.qc-btn-red,
.qc-btn-gray {
    display: block;
    width: 100%;
    padding: 12px 32px;
    text-align: center;
    font-size: 16px;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1px;
}

.qc-btn-red       { background: var(--qc-red); color: var(--qc-white) !important; }   /* ← zmienione */
.qc-btn-red:hover, .qc-btn-red:focus, .qc-btn-red:active { background: var(--qc-red-dark); color: var(--qc-white)  !important; }
.qc-job-right .qc-btn-red { margin-bottom: 0; }

.qc-btn-gray      { background: var(--qc-gray); color: var(--qc-text) !important; }
.qc-btn-gray:hover { background: #d9d9d9; color: var(--qc-text) !important;}

/* ==========================================================================
   4. HEADER BAR – TABS + COUNTER
   ========================================================================== */

#qc-jobs-scroll-target { /* anchor for smooth scroll */ }

.qc-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.qc-tabs a {
    color: var(--qc-text);
    text-decoration: none;
    padding-right: 20px;
    transition: color 0.2s;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.36px;
}

.qc-tabs a.active {
    color: var(--qc-red);
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 10px;
}

.qc-count {
    color: var(--qc-text);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.28px;
}

/* ==========================================================================
   5. JOB CARD (LISTING)
   ========================================================================== */

.qc-job-row {
    background: var(--qc-bg);
    border: 1px solid var(--qc-border);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.qc-job-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.qc-title a {
    font-size: 28px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.28px;
    color: var(--qc-text);
    text-decoration: none;
    transition: color 0.2s;
}

.qc-title a:hover {
    color: var(--qc-red);
}

.qc-meta,
.qc-tags {
    color: var(--qc-text-light);
    font-size: 15px;
    margin: 8px 0;
}

.qc-tags {
    color: var(--qc-red);
    font-weight: 500;
}

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

.qc-posted {
    display: block;
    color: var(--qc-text);
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-align: left;
}

/* ==========================================================================
   6. PAGINATION
   ========================================================================== */

.qc-pagination {
    margin: 60px 0 30px;
    text-align: center;
    font-size: 0;
}

.qc-pagination a,
.qc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 4px;
    background: var(--qc-bg-light-gray);     /* ← zmienione */
    border-radius: 0;
    color: var(--qc-pagination-text);        /* ← zmienione */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.qc-pagination a:hover { 
    background: var(--qc-pagination-hover);  /* ← zmienione */
    transform: translateY(-2px);
}

.qc-pagination .current {
    background: var(--qc-red) !important;
    color: var(--qc-white) !important;       /* ← zmienione */
}

.qc-pagination .prev,
.qc-pagination .next {
    font-size: 20px;
}

.qc-pagination .prev:hover,
.qc-pagination .next:hover {
    background: var(--qc-red);
    color: var(--qc-white);                  /* ← zmienione */
}

.qc-pagination .dots {
    background: transparent;
    box-shadow: none;
    color: #aab0bc;
    cursor: default;
    width: auto;
    margin: 0 8px;
}

/* ==========================================================================
   7. SINGLE JOB PAGE
   ========================================================================== */

.qc-sidebar-box hr {
    border-bottom: 0 !important;
}

.qc-single-job-page {
    max-width: 1380px;
    margin: 0 auto;
    padding: 40px 20px;
}

.qc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    color: var(--qc-text);
    text-decoration: none;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.qc-back-link svg {
    flex-shrink: 0;
}

.qc-back-link:hover { 
    text-decoration: underline; 
}

.qc-single-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 50px;
    align-items: start;
}

.qc-sidebar-box {
    position: sticky;
    top: 100px;
}

.qc-info-card {
    background: var(--qc-bg);
    padding: 30px;
    border-radius: 0;
    box-shadow: var(--qc-shadow);
}

.qc-job-id-section { 
    text-align: left; 
    margin-bottom: 20px; 
}
.qc-id-label {  
    text-transform: uppercase; 
    margin-bottom: 6px;
    font-size: 22px; 
    color: var(--qc-text);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.28px; 
}
.qc-id-value { 
    font-size: 22px; 
    color: var(--qc-text);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.28px; 
}

.qc-divider { 
    height: 1px; 
    background: var(--qc-divider);           /* ← zmienione */
    margin: 25px 0; 
}

.qc-details-list .qc-detail {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 15px;
    gap: 8px;
}

.qc-details-list .qc-detail:last-child { 
    border-bottom: none; 
}

.qc-label  { 
    color: var(--qc-text); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    width: 48%;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
.qc-value  { 
    color: var(--qc-text); 
    text-align: left; 
    width: 52%;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.qc-share-icons { 
    display: flex; 
    justify-content: left; 
    gap: 4px; 
}
.qc-share-icon {
    width: 32px; 
    height: 32px;
    background: var(--qc-share-bg);          /* ← zmienione */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}
.qc-share-icon:hover { 
    transform: scale(1.1); 
}
.qc-share-icon svg { 
    width: 16px; 
    height: 16px;
    fill: var(--qc-white);                   /* ← zmienione */
}

.qc-title-apply {
    background: var(--qc-white);             /* ← zmienione */
    padding: 40px;
    border-radius: 0;
    box-shadow: var(--qc-shadow);
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
}

.qc-job-title {
    font-size: 38px;
    color: var(--qc-red);
    margin: 0;
    flex: 1;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.44px;
}

.qc-apply-btn {
    background: var(--qc-red);
    color: var(--qc-white) !important;                  /* ← zmienione */
    white-space: nowrap;
    padding: 12px 32px;
    text-align: center;
    font-size: 16px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.qc-apply-btn:hover, .qc-apply-btn:focus, .qc-apply-btn:active { 
    background: var(--qc-red-dark);
    color: var(--qc-white) !important;
}

.qc-job-description {
    background: var(--qc-white);             /* ← zmienione */
    padding: 40px;
    border-radius: 0;
    box-shadow: var(--qc-shadow);
    font-size: 18px;
    line-height: 1.7;
    color: var(--qc-text);
}

.qc-job-description h2,
.qc-job-description h3 {
    color: var(--qc-red);
    margin: 40px 0 15px;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .qc-jobs-inner { 
        flex-direction: column; 
    }
    .qc-sidebar { 
        width: 100%; 
    }
    .qc-job-row { 
        flex-direction: column; 
        text-align: left; 
    }
    .qc-job-right { 
        text-align: left; 
        margin-top: 15px; 
    }

    .qc-single-layout { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    .qc-sidebar-box { 
        position: static; 
    }
    .qc-title-apply { 
        flex-direction: column; 
        align-items: stretch; 
    }
    .qc-apply-btn { 
        text-align: center; 
    }
}