/* ═══════════════════════════════════════════
   DewGas Job Listings — CSS v2
   Sparking18
═══════════════════════════════════════════ */

:root {
    --dgjobs-red:    #E81F25;
    --dgjobs-navy:   #1B2D4F;
    --dgjobs-g100:   #F5F5F7;
    --dgjobs-g200:   #E8E8EE;
    --dgjobs-g400:   #9CA3AF;
    --dgjobs-g600:   #6B7280;
    --dgjobs-g800:   #111827;
    --dgjobs-white:  #ffffff;
    --dgjobs-ease:   0.2s ease;
    --dgjobs-radius: 12px;
}

.dg-jobs-section {
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}
.dg-jobs-section * { box-sizing: border-box; }

/* ══════════════════════════════════════════
   DEPARTMENT TABS
══════════════════════════════════════════ */
.dg-jobs-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dg-jobs-tab {
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid #243A5E;
    background: transparent;
    color: #243A5E;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dgjobs-ease);
    white-space: nowrap;
}
.dg-jobs-tab:hover  { background: #243A5E;border-color: #243A5E; color: #fff; }
.dg-jobs-tab.active { background: #243A5E; border-color: #243A5E; color: #fff; }

/* ══════════════════════════════════════════
   FILTERS ROW — Desktop: all in one row
   Search (flex:1) | Location (200px) | JobType (200px)
══════════════════════════════════════════ */
.dg-jobs-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

/* Search */
.dg-jobs-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.dg-jobs-search-wrap > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--dgjobs-g400);
    pointer-events: none;
}
.dg-jobs-search-wrap input {
    width: 100% !important;
    max-width: 279px !important;
    padding: 12px 20px 12px 40px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px;
    color: #6B7280;
    background: #F8F9F9;
    outline: none;
    transition: border-color var(--dgjobs-ease) !important;
    height; 48px ;
}
.dg-jobs-search-wrap input:focus { border-color: var(--dgjobs-navy); background: #F8F9F9;; }
.dg-jobs-search-wrap input::placeholder { color: var(--dgjobs-g400); }

/* Dropdowns */
.dg-jobs-select-wrap {
    position: relative;
    flex: 0 0 200px;
    display: flex;
    align-items: center;
}
.dg-select-icon {
    position: absolute;
    left: 14px;
    width: 16px; height: 16px;
    color: var(--dgjobs-g400);
    pointer-events: none;
    z-index: 1;
}
.dg-chevron {
    position: absolute;
    right: 12px;
    width: 16px; height: 16px;
    color: var(--dgjobs-g400);
    pointer-events: none;
    z-index: 1;
}
.dg-jobs-select-wrap select {
    width: 100%;
    padding: 12px 20px 12px 40px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px;
    color: #6B7280;
    background: #F8F9F9;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color var(--dgjobs-ease);
}
.dg-jobs-select-wrap select:focus { border-color: var(--dgjobs-navy); background: #F8F9F9; }

/* ══════════════════════════════════════════
   COUNT + CLEAR
══════════════════════════════════════════ */
.dg-jobs-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.dg-jobs-count { font-size: 14px; color: var(--dgjobs-g600); }
.dg-jobs-clear {
    border: none; background: transparent;
    color: var(--dgjobs-red);
    font-size: 14px; font-weight: 600; cursor: pointer; padding: 0;
}
.dg-jobs-clear:hover { text-decoration: underline; color: var(--dgjobs-red); background: transparent; }
.dg-jobs-clear:active { background: transparent; color: var(--dgjobs-red); }

/* ══════════════════════════════════════════
   GRID
══════════════════════════════════════════ */
.dg-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    min-height: 200px;
    transition: opacity var(--dgjobs-ease);
}
.dg-jobs-grid.is-loading { opacity: 0.4; pointer-events: none; }

.dg-jobs-loading {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: center;
    padding: 80px 0;
}
.dg-jobs-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--dgjobs-g200);
    border-top-color: var(--dgjobs-red);
    border-radius: 50%;
    animation: dgjobs-spin 0.7s linear infinite;
}
@keyframes dgjobs-spin { to { transform: rotate(360deg); } }

.dg-jobs-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 80px 20px; text-align: center;
}
.dg-jobs-empty svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.5; color: var(--dgjobs-g400); }
.dg-jobs-empty p { font-size: 15px; color: var(--dgjobs-g600); margin: 0; }

/* ══════════════════════════════════════════
   JOB CARD
══════════════════════════════════════════ */
.dg-job-card {
    background: #F8F9FC;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--dgjobs-ease), transform var(--dgjobs-ease);
}
.dg-job-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }

.dg-job-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Department badge colours */
.dg-job-dept {
    display: inline-block;
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.01em;
    padding: 4px 10px;
    border-radius: 6px;
}
.dg-dept-green  { background: #D1FAE5; color: #065F46; }
.dg-dept-purple { background: #EDE9FE; color: #9747FF; }
.dg-dept-blue   { background: #00A86B14; color: #00A86B; }
.dg-dept-teal   { background: #CCFBF1; color: #115E59; }
.dg-dept-gray   { background: #F3F4F6; color: #374151; }

/* Arrow link */
.dg-job-arrow {
    display: none !important; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    color: var(--dgjobs-g400);
    text-decoration: none;
    transition: color var(--dgjobs-ease), background var(--dgjobs-ease);
}
.dg-job-arrow svg { width: 18px; height: 18px; }
.dg-job-arrow:hover { color: var(--dgjobs-navy); background: var(--dgjobs-g100); }

.dg-job-title {
    font-size: 18px !important; font-weight: 800 !important;
    color: #000 !important;
    margin: 0 !important; line-height: 1.35 !important;
}
.dg-job-experience { font-size: 14px; color: #4B5563; margin: 0; }

.dg-job-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dg-job-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: #6B7280;
}
.dg-job-meta-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--dgjobs-g400); }

.dg-job-divider { border: none; border-top: 1px solid var(--dgjobs-g200); margin: 8px 0 4px; }

.dg-job-apply {
    font-size: 14px; font-weight: 700;
    color: #E81F25 !important;
    text-decoration: none !important;
    transition: opacity var(--dgjobs-ease);
    align-self: flex-start;
    margin-top: auto;
}
.dg-job-apply:hover { opacity: 0.8; }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dg-jobs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤767px)
   Layout from your design image:
   Row 1: Search (full width)
══════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Tabs — horizontal scroll */
    .dg-jobs-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        gap: 8px;
    }
    .dg-jobs-tabs::-webkit-scrollbar { display: none; }
    .dg-jobs-tab { flex-shrink: 0; font-size: 12px; padding: 8px 16px; }

    /* Filters: wrap into 2 rows */
    .dg-jobs-filters {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Search — full width on its own row */
    .dg-jobs-search-wrap {
        flex: 0 0 100%;
        width: 100%;
        order: 1;
    }

    /* Location + Job Type — side by side on second row */
    .dg-jobs-select-wrap {
        flex: 1 1 calc(50% - 5px); /* 50% minus half the gap */
        min-width: 0;
        order: 2;
    }

    /* Grid — single column */
    .dg-jobs-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 420px) {
    /* Very small screens — stack dropdowns vertically */
    .dg-jobs-select-wrap { flex: 0 0 48%; }
    .dg-job-title {
    font-size: 16px !important; font-weight: 800 !important;
    color: #000 !important;
    margin: 0 !important; line-height: 1.35 !important;
}
.dg-job-experience { font-size: 12px; color: #4B5563; margin: 0; }

.dg-job-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dg-job-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: #6B7280;
}
.dg-jobs-search-wrap input{max-width: 100% !important;}
.dg-jobs-select-wrap select {font-size: 12px;}
.dg-jobs-search-wrap input{font-size: 12px;}
.dg-jobs-clear{font-size: 12px;}
.dg-jobs-count {font-size: 12px;}
    .dg-job-dept{font-size: 10px;}
}
.job-type{display: none}