/* Full section wrapper */
.section-loader {
    width: 100%;
    min-height: 120px; /* adjust per design */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner alignment */
.section-in-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom spinner */
.spinner-in-border {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb; /* light border */
    border-top: 4px solid #2563eb; /* primary color */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.section-loader .fixed-in-height {
    min-height: 250px;
}



/* REGION --> SKELETON*/



/* Skeleton base */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb;
    border-radius: 6px;
}

    /* Shimmer effect */
    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150px;
        height: 100%;
        width: 150px;
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer 1.2s infinite;
    }

@keyframes shimmer {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}




/* Specific skeleton blocks */
/* Base skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 6px;
}

    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150px;
        height: 100%;
        width: 150px;
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer 1.2s infinite;
    }

@keyframes shimmer {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}

/* Specific sizes */
.skel-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.skel-line {
    height: 14px;
    margin-bottom: 10px;
}

.skel-line-lg {
    width: 80%;
    margin: 0 auto 10px;
}

.skel-line-md {
    width: 60%;
    margin: 0 auto 15px;
}

.skel-row {
    height: 16px;
    width: 100%;
    margin-bottom: 12px;
}

.skel-button {
    height: 40px;
    border-radius: 6px;
    margin-top: 15px;
}

.skel-progress {
    height: 20px;
    border-radius: 10px;
    margin: 15px 0;
}

.skel-small-line {
    height: 12px;
    width: 30%;
}

.skel-badge {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

/* Job Card Skeleton */
.job-skel-card {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.job-skel-title {
    height: 18px;
    width: 60%;
    margin-bottom: 12px;
}

.job-skel-action {
    height: 16px;
    width: 80px;
}

.job-skel-meta {
    height: 14px;
    width: 40%;
}

.job-skel-desc-line {
    height: 14px;
    margin-bottom: 8px;
}

    .job-skel-desc-line.sm {
        width: 60%;
    }

    .job-skel-desc-line.md {
        width: 80%;
    }

    .job-skel-desc-line.lg {
        width: 95%;
    }

.job-skel-posted {
    height: 14px;
    width: 120px;
}

/* Checkbox Filter Skeleton */
.filter-skel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.filter-skel-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.filter-skel-label {
    height: 14px;
    width: 70%;
    border-radius: 4px;
}

.jobcount-skel {
    height: 18px; /* slightly bigger than 16px text */
    width: 220px; /* default width */
    border-radius: 4px;
    margin: 8px 0;
}

/* Pagination Skeleton Wrapper */
.pagination-skel-wrapper {
    width: 100%;
}

/* Left side */
.pagination-skel-select {
    width: 90px;
    height: 36px;
    border-radius: 6px;
}

.pagination-skel-text {
    height: 14px;
    width: 260px;
    border-radius: 4px;
    margin-left: 16px;
}

/* Right side pagination buttons */
.pagination-skel-nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.pagination-skel-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
}

/* END REGION */



.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
}

.custom-control-label {
    font-weight: 400 !important;
}

.radiobtn-tiber .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.checkbox-tiber .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}


/* Add this CSS to hide the Google Translate top bar */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

#btnSearchM > .ladda-spinner > div:first-child {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

.menu-border-left {
    border-left: 1px solid var(--grey);
}

.sign-up {
    text-decoration: none;
    border-radius: 8px;
    border: 1.5px solid var(--white);
    background: #0c61e7;
    color: #fff !important;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 6px 10px !important;
}

.customTooltip {
    position: absolute;
}

    .customTooltip:before {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        background: #fff8e1;
        top: -7px;
        transform: rotate(45deg);
        right: 6px;
        border-top: 1px solid #ffc107;
        border-left: 1px solid #ffc107;
    }

@media (min-width: 1200px) {
    .navbar-expand-xl .offcanvas.before-login-offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none;
    }
}