/**
 * Job Listing Skeleton Loader
 * Высоты элементов заданы инлайн из JS (пропорции от реальной карточки).
 */

/* Shimmer animation */
@keyframes job-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.job-skeleton-shimmer {
    display: block;
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f0f0f0 40%,
        #e8e8e8 50%,
        #f0f0f0 60%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: job-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* ─── Skeleton card ─────────────────────────────────────────── */
.job-card-skeleton {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background: #fff !important;
    border-radius: 25px !important;
    border: 1px solid #e3e6ec !important;
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Badges (top-right absolute) */
.job-card-skeleton__badges {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    gap: 8px !important;
}

.job-card-skeleton__badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Main content column */
.job-card-skeleton__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 148px !important;
}

.job-card-skeleton__title {
    width: 75% !important;
}

.job-card-skeleton__salary-row {
    display: flex !important;
    gap: 16px !important;
}

.job-card-skeleton__salary {
    width: 140px !important;
}

.job-card-skeleton__experience {
    width: 100px !important;
    border-radius: 25px !important;
}

.job-card-skeleton__company-row {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}

.job-card-skeleton__company {
    width: 120px !important;
}

.job-card-skeleton__location {
    width: 80px !important;
}

.job-card-skeleton__apply-badge {
    border-radius: 999px !important;
}

/* Logo (bottom-right absolute) */
.job-card-skeleton__logo {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

/* ─── Overlay host ──────────────────────────────────────────── */
.job-skeleton-list-host {
    position: relative !important;
}

/* Скрываем реальные карточки только у прямого ul.row хоста */
.job-skeleton-list-host > ul.row {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ─── Overlay itself (z > 999 чтобы перекрыть спиннер плагина) */
.job-skeleton-overlay {
    background: transparent !important;
    z-index: 1005 !important;
    padding: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}

.job-skeleton-list-host > .job-skeleton-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    min-height: 100% !important;
}

/* ─── Overlay inner list ────────────────────────────────────── */
.job-skeleton-overlay-inner {
    padding: 0 !important;
}

.job-skeleton-overlay-inner .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.job-skeleton-overlay-inner .row li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Скрыть стандартный спиннер плагина пока показан skeleton */
.job-skeleton-overlay-active .jobsearch-listing-loader,
.job-skeleton-loading .jobsearch-listing-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Column context */
.job-skeleton-overlay-active {
    position: relative !important;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .job-card-skeleton__main {
        padding-right: 120px !important;
    }
}

@media (max-width: 640px) {
    .job-card-skeleton__main {
        padding-right: 108px !important;
    }

    .job-card-skeleton__badge {
        width: 32px !important;
        height: 32px !important;
    }
}