/* ============================================
   HOMEPAGE STYLES
   ============================================ */

/* ===========================================
   HERO SECTION
   =========================================== */
.home-hero {
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 60px 20px;
    margin: 80px 20px 20px 20px;
    border-radius: 24px;
    position: relative;
    overflow: visible;
    /* Changed from hidden - allows dropdown to show outside */
    z-index: 60;
    /* Ensure hero is above companies strip (z-index: 50) */
}

.home-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.home-hero__content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.home-hero__headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    line-height: 1.2;
}

.home-hero__subtext {
    display: block;
    font-size: 1.125rem;
    opacity: 0.95;
    margin-top: 8px;
    font-weight: 400;
}

.home-hero__counter {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 32px;
}

.home-hero__counter .counter-number {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #ff0055;
    text-underline-offset: 3px;
}

.home-hero__counter .counter-text {
    font-size: 1.125rem;
    color: #fff;
    opacity: 0.95;
}

/* Hero Search Form */
.home-hero__search {
    background: #fff;
    border-radius: 50px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 700px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    z-index: 100;
    min-height: 50px;
}

.home-search-form .search-bar-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 60px;
}

.home-search-form .search-field-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: none;
    border-right: 1px solid #f0f0f0;
    flex: 1;
    height: 50px;
}

.home-search-form .search-field-item:last-of-type {
    border-right: none;
}

.home-search-form .search-field-item input,
.home-search-form .search-field-item .form-control {
    border: none;
    outline: none;
    font-size: 12px;
    color: #1a1a1a;
    width: 100%;
    background: transparent;
    padding: 0;
    text-align: left;
}

/* Lupa SVG w polu keywords */
.home-search-form .field-keywords .lucide-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    color: #9ca3af;
}

.home-search-form .search-field-item input::-moz-placeholder {
    color: #9ca3af;
}

.home-search-form .search-field-item input::placeholder {
    color: #9ca3af;
}

.home-search-form .search-field-item i {
    color: #9ca3af;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.home-search-form .search-field-item .select2-container {
    width: 100% !important;
}

.home-search-form .search-field-item .select2-container--default .select2-selection--single {
    border: none;
    background: transparent;
    height: auto;
    padding: 0;
}

.home-search-form .search-field-item .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 1.5;
}

.home-search-form .search-field-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.home-search-form .search-submit {
    padding: 0 3px 0 0;
    flex-shrink: 0;
    height: 50px;
    display: flex;
    align-items: center;
}

.home-search-form .search-submit .btn-search {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    font-size: 0;
    font-weight: 500;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    line-height: 1;
}

.home-search-form .search-submit .btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(190, 34, 255, 0.5);
}

.home-search-form .search-submit .btn-search i,
.home-search-form .search-submit .btn-search .lucide-icon {
    font-size: 1rem;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    color: #fff;
    display: block !important;
    flex-shrink: 0;
}

/* Hide button text on desktop - show only icon */
.home-search-form .btn-search-text {
    display: none;
}

/* Location field fixes - prevent dropdown from expanding container */
.home-search-form .field-location {
    position: relative;
    flex: 1;
    overflow: visible;
}

.home-search-form .field-location .tax-search-wrapper {
    position: relative;
    width: 100%;
}

.home-search-form .field-location .tax-search-wrapper input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Dropdown positioned absolutely outside container */
.home-hero__search .tax-search-wrapper .dropdown-menu,
.home-hero__search .tax-search-wrapper ul,
.home-hero__search .location-results {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    min-width: 280px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 99999 !important;
    margin-top: 8px;
}

.home-hero__search .tax-search-wrapper .dropdown-menu li,
.home-hero__search .tax-search-wrapper ul li,
.home-hero__search .location-results li {
    color: #333 !important;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
}

.home-hero__search .tax-search-wrapper .dropdown-menu li:hover,
.home-hero__search .tax-search-wrapper ul li:hover,
.home-hero__search .location-results li:hover {
    background: #f3f4f6;
}

.home-hero__search .tax-search-wrapper .dropdown-menu li.active,
.home-hero__search .tax-search-wrapper ul li.active,
.home-hero__search .location-results li.active {
    background: #FFEB3B;
    color: #222 !important;
}

/* ===========================================
   CUSTOM LOCATION AUTOCOMPLETE (JS-generated)
   Copied from open-jobs.css for homepage search
   =========================================== */
.home-search-form .custom-location-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 1001;
}

.home-search-form .custom-location-wrapper i.fa-map-marker-alt,
.home-search-form .custom-location-wrapper i.fas {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 1.125rem;
    margin-right: 12px;
}

.home-search-form .custom-location-wrapper input.form-control {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 13px;
    color: #1a1a1a;
}

.home-search-form .custom-location-wrapper input.form-control::-moz-placeholder {
    color: #9ca3af;
}

.home-search-form .custom-location-wrapper input.form-control::placeholder {
    color: #9ca3af;
}

/* Custom Location Results Dropdown */
.home-search-form .custom-location-results,
.home-hero__search .custom-location-results {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 300px !important;
    min-width: 280px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 99999 !important;
    padding: 8px 0;
    display: none;
}

.home-search-form .custom-location-results[style*="display: block"],
.home-hero__search .custom-location-results[style*="display: block"] {
    display: block !important;
}

/* Location result items - ensure text is visible */
.home-search-form .custom-location-results>div,
.home-hero__search .custom-location-results>div {
    color: #333 !important;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
    text-align: left !important;
    /* Align text to left */
}

.home-search-form .custom-location-results>div:last-child,
.home-hero__search .custom-location-results>div:last-child {
    border-bottom: none;
}

.home-search-form .custom-location-results>div:hover,
.home-hero__search .custom-location-results>div:hover {
    background: #f9fafb !important;
}

/* Loading and empty state text */
.home-search-form .custom-location-results .p-2,
.home-hero__search .custom-location-results .p-2 {
    color: #6b7280 !important;
    padding: 12px 16px !important;
}

/* Hide original select and Select2 when custom location is active */
.home-search-form .field-location.custom-location-active .select2-container,
.home-search-form .field-location.custom-location-active .select-taxonomy-search,
.home-search-form .field-location.custom-location-active>select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* Field location container needs proper overflow */
.home-search-form .field-location {
    position: relative;
    overflow: visible !important;
}

/* ===========================================
   SECTION COMMON STYLES
   =========================================== */
.home-categories,
.home-featured-jobs,
.home-top-employers,
.home-candidate-cta,
.home-trusted-companies {
    padding: 48px 0;
}

.home-categories .container,
.home-top-employers .container,
.home-candidate-cta .container,
.home-trusted-companies .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Wider container for Featured Jobs - almost full width */
.home-featured-jobs .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.section-title-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    transition: color 0.2s ease;
}

.section-title-link .section-title {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 200 !important;
}

.section-title--arrow {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.section-title-link:hover .section-title {
    color: #1a1a1a;
}

.section-title-link:hover .section-title--arrow {
    color: #1a1a1a;
    transform: translateX(3px);
}

.section-title--center {
    text-align: center;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header .section-title {
    margin-bottom: 0;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff0055;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.section-link:hover {
    color: #cc0044;
    gap: 10px;
}

.section-link i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.section-link:hover i {
    transform: translateX(2px);
}

/* ===========================================
   SWIPER BASE STYLES (Required for Swiper to work)
   =========================================== */
.swiper {
    width: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.swiper-slide {
    flex-shrink: 0;
    height: auto;
}

/* ===========================================
   CATEGORY SLIDER
   =========================================== */
.home-categories {
    background: #fff;
    padding: 56px 0;
    /* Full viewport width - sekcja jest poza .home-page więc działa */
    width: 100vw;
    overflow: hidden;
}

.home-categories-swiper {
    overflow: visible;
}

.home-categories-swiper .swiper-slide {
    width: auto;
}

.home-categories-swiper .swiper-wrapper {
    padding: 12px 0;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px;
    background: #f9fafb;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    min-width: 140px;
}

.category-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

/* Lucide SVG icons */
.category-card__icon .lucide-icon {
    width: 32px;
    height: 32px;
    color: #6b7280;
}

/* Multi-color icon palette cycling (8 colors) */
.home-categories-swiper .swiper-slide:nth-child(8n+1) .category-card__icon .lucide-icon {
    color: #f59e0b;
}

.home-categories-swiper .swiper-slide:nth-child(8n+2) .category-card__icon .lucide-icon {
    color: #ef4444;
}

.home-categories-swiper .swiper-slide:nth-child(8n+3) .category-card__icon .lucide-icon {
    color: #3b82f6;
}

.home-categories-swiper .swiper-slide:nth-child(8n+4) .category-card__icon .lucide-icon {
    color: #7c3aed;
}

.home-categories-swiper .swiper-slide:nth-child(8n+5) .category-card__icon .lucide-icon {
    color: #06b6d4;
}

.home-categories-swiper .swiper-slide:nth-child(8n+6) .category-card__icon .lucide-icon {
    color: #8b5cf6;
}

.home-categories-swiper .swiper-slide:nth-child(8n+7) .category-card__icon .lucide-icon {
    color: #10b981;
}

.home-categories-swiper .swiper-slide:nth-child(8n) .category-card__icon .lucide-icon {
    color: #f97316;
}

.category-card__name {
    font-size: 13px !important;
    color: #1a1a1a !important;
    margin-top: 0 !important;
    margin-bottom: 16px;
    line-height: 1.3 !important;
}

.category-card__count {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    background: #eef2f7;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Edge-to-edge effect: slider extends to browser edge */
.home-categories .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

/* Header needs padding since container has none - match hero margin */
.home-categories .section-header {
    padding-left: 20px;
    padding-right: 20px;
}


/* Navigation arrow (next) - pozycjonowanie względem .home-categories (full-width) */
.home-categories {
    position: relative;
    /* anchor dla strzałki */
}

.home-categories-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #374151;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Przenieś strzałkę do .home-categories zamiast swipera */
.home-categories .swiper-button-next {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.home-categories-swiper .swiper-button-next::after {
    font-size: 0.75rem;
    font-weight: 700;
}

.home-categories-swiper .swiper-button-next:hover {
    background: #f3f4f6;
}

.home-categories-swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ===========================================
   FEATURED JOBS SLIDER
   =========================================== */
/* ===========================================
   FEATURED JOBS SLIDER
   =========================================== */
.home-featured-jobs {
    background: #fff;
    /* Full viewport width - RESTORED to break out of any parent wrappers */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Expanded container for full width grid - OVERRIDE Bootstrap max-width */
.home-featured-jobs .container {
    max-width: calc(100vw - 80px) !important;
    width: 100%;
    padding-left: 140px;
    padding-right: 140px;
    margin: 0 auto;
}

.home-featured-jobs-swiper {
    padding: 8px 0;
    overflow: hidden;
    /* Essential for mobile slider! */
    position: relative;
}

.home-featured-jobs-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    /* No flex-wrap here! It breaks mobile slider */
}

.home-featured-jobs-swiper .swiper-slide {
    height: auto;
    flex-shrink: 0;
}

/* Reuse existing job card styles - adjust wrapper */
.home-featured-jobs-swiper .rj-mobile-card {
    height: 100%;
    margin-bottom: 0 !important;
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-featured-jobs-swiper .rj-mobile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13) !important;
}

/* ===========================================
   IMPORTED MOBILE CARD STYLES
   (Copied from job-listing.css to ensure unified view)
   =========================================== */

/* Mobile Card Styling */
.home-featured-jobs .rj-mobile-card {
    background: #fff !important;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px !important;
    padding-top: 20px !important;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f1f1f1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    height: 100%;
    /* Ensure it fills the grid cell */
}

.home-featured-jobs .rj-mobile-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Top Section: Logo + Content */
.home-featured-jobs .rj-mobile-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
    padding-right: 0;
    z-index: 2;
}

/* Logo */
.home-featured-jobs .rj-mobile-logo .employer-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-sizing: border-box;
}

.home-featured-jobs .rj-mobile-logo {
    flex: 0 0 48px;
    margin: 0;
}

.home-featured-jobs .rj-mobile-logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Content: Title & Salary */
.home-featured-jobs .rj-mobile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px !important;
    margin-top: 5px !important;
    min-width: 0;
    align-items: flex-start !important;
}

/* Salary Styling */
.home-featured-jobs .rj-mobile-salary,
.home-featured-jobs .rj-mobile-salary .price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a7f45 !important;
    background-color: rgba(30, 190, 115, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 2px;
}

.home-featured-jobs .rj-mobile-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #111;
}

.home-featured-jobs .rj-mobile-title a {
    color: inherit;
    text-decoration: none;
}

/* Badges: Top Right Absolute */
.home-featured-jobs .rj-mobile-badges {
    position: absolute;
    top: -12px !important;
    right: 8px !important;
    display: flex;
    align-items: center;
    gap: 5px !important;
    z-index: 20;
    padding-right: 0;
}

.home-featured-jobs .rj-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    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);
    height: 22px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.home-featured-jobs .rj-badge-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    color: #333 !important;
}

.home-featured-jobs .rj-badge-violet {
    background: linear-gradient(135deg, #BE22FF 0%, #aa00ff 100%) !important;
    color: #fff !important;
}

/* Favorite Icon Wrapper */
.home-featured-jobs .rj-mobile-favorite-wrapper {
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    position: absolute;
    top: 12px !important;
    left: 12px !important;
    z-index: 21;
}

/* Heart button positioning */
.job-list.default .btn-follow {
    position: absolute;
    top: 3px;
    right: 1px;
}

/* Meta Row: Company & Location */
.home-featured-jobs .rj-mobile-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.home-featured-jobs .rj-mobile-company-name,
.home-featured-jobs .rj-mobile-location {
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-featured-jobs .rj-mobile-company-name i,
.home-featured-jobs .rj-mobile-location i {
    font-size: 14px;
    color: #999;
}

.home-featured-jobs .rj-mobile-company-name a {
    color: #555;
    font-weight: 500;
    text-decoration: none;
}

/* Bottom Row: Tags & Expiry */
.home-featured-jobs .rj-mobile-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    /* Push to bottom if height is fixed */
}

.home-featured-jobs .rj-mobile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-featured-jobs .rj-mobile-tags span,
.home-featured-jobs .rj-mobile-tags a {
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.home-featured-jobs .rj-mobile-expiry {
    font-size: 11px;
    color: #999;
}

/* Show More Card */
.show-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 24px;
}

.show-more-card:hover {
    border-color: #BE22FF;
    background: #faf5ff;
}

.show-more-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
}

.show-more-card__icon i {
    color: #fff;
    font-size: 1.125rem;
}

.show-more-card__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #BE22FF;
}

/* ===========================================
   LOADING & ERROR STATES FOR AJAX
   =========================================== */

/* When swiper-wrapper is loading, center content */
.home-featured-jobs-swiper .swiper-wrapper.is-loading,
.home-featured-jobs-swiper .swiper-wrapper:has(.loading-slide) {
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.loading-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top-color: #BE22FF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.no-results,
.error-message {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    font-size: 1rem;
    color: #6b7280;
    text-align: center;
    padding: 20px;
}

.error-message {
    color: #ef4444;
}

/* ===========================================
   EMPLOYER CARDS - Full Width Section
   =========================================== */
.home-top-employers {
    background: #fff;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.home-top-employers .container {
    max-width: 1400px;
    padding: 0 40px;
    margin: 0 auto;
}

.home-top-employers .section-header {
    text-align: center;
    margin-bottom: 32px;
}

.home-employers-swiper {
    padding: 20px 0;
    overflow: visible;
    position: relative;
}

.home-employers-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    padding: 12px 0;
}

.home-employers-swiper .swiper-slide {
    height: auto;
    flex-shrink: 0;
    width: 320px !important;
}

@media (max-width: 767px) {
    .home-employers-swiper .swiper-slide {
        width: calc(100vw - 60px) !important;
    }
}

.employer-card {
    display: block;
    background: #fbfbfb;
    border-radius: 18px;
    overflow: visible;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.employer-card:hover {
    border-color: #e5e7eb;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Cover */
.employer-card__cover {
    height: 120px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 18px 18px 0 0;
}

.employer-card__cover--default {
    background: linear-gradient(135deg, #fef2f5 0%, #fce7f3 100%);
}

/* Badge on edge - gold, top right, half outside */
.employer-card__badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #333;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 10;
}

/* Logo */
.employer-card__logo {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    background: #fbfbfb;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: -50px auto 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.employer-card__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.employer-card__content {
    padding: 16px 20px 20px;
    text-align: center;
    background: #fbfbfb;
}

.employer-card__name,
h3.employer-card__name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-height: 2.6em;
    text-transform: capitalize;
}

/* Employer card action button */
.employer-card__action {
    margin-top: 16px;
}

.employer-card__btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #BE22FF;
    background: transparent;
    border: 1px solid #BE22FF;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.employer-card:hover .employer-card__btn {
    background: #BE22FF;
    color: #fff;
}


/* ===========================================
   CANDIDATE CTA SECTION
   =========================================== */
.home-candidate-cta {
    background: #fafafa;
    margin: 40px 20px;
    /* Mobile margins */
    border-radius: 35px;
    box-shadow: 1px 1px 10px 1px rgb(130 119 119 / 15%);
    overflow: hidden;
    padding: 0;
    /* Standard padding removal */
}

@media (min-width: 992px) {
    .home-candidate-cta {
        margin: 40px 280px 40px 280px;
        /* User requested desktop margins */
    }
}

.cta-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    /* Stack on mobile */
    gap: 0;
    align-items: stretch;
    /* Stretch to fill height */
}

@media (min-width: 768px) {
    .cta-wrapper {
        grid-template-columns: 1fr 1fr;
        /* Split 50/50 on desktop */
    }
}

.cta-image {
    position: relative;
    height: 100%;
    min-height: 300px;
    /* Minimum height for mobile */
    width: 100%;
    /* Ensure full width */
}

.cta-image img,
.cta-image__placeholder {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0;
    /* Let container clip it */
    box-shadow: none;
    /* Remove shadow from image itself */
    display: block;
}

@media (max-width: 991px) {

    .cta-image img,
    .cta-image__placeholder {
        max-width: 430px;
        width: 100%;
        /* Ensure it takes full width up to max */
        margin: 0 auto;
        /* Center if container is wider */
    }
}

.cta-image__placeholder {
    background: linear-gradient(135deg, #fce7f3 0%, #fef2f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-image__placeholder i {
    font-size: 64px;
    color: rgba(255, 0, 85, 0.3);
}

.cta-content {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Mobile First Defaults (Centered) */
    align-items: center;
    text-align: center;
}

@media (max-width: 767px) {
    .cta-content {
        padding: 10px 40px;
    }
}

@media (min-width: 768px) {
    .cta-content {
        /* Desktop Override (Left Aligned) */
        align-items: flex-start !important;
        text-align: left !important;
    }
}

.cta-headline {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.cta-description {
    font-size: 0.9375rem;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.7;
}

.cta-content .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 35px;
    /* Updated as requested */
    /* Filter Purple Gradient */
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    border: none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
}

.cta-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(190, 34, 255, 0.5);
}

.cta-content .btn-primary i,
.cta-content .btn-primary svg {
    font-size: 1.1em;
    transition: transform 0.2s ease;
}

.cta-content .btn-primary:hover i,
.cta-content .btn-primary:hover svg {
    transform: translateX(3px);
}

/* ===========================================
   TRUSTED COMPANIES SECTION (Homepage variant)
   =========================================== */
.home-trusted-companies {
    background: #fff;
    padding: 40px 0 60px;
}

.home-trusted-companies .header-trusted-slider {
    max-width: 100%;
    box-shadow: none;
    background: transparent;
}

.home-trusted-companies .trusted-label {
    display: none;
}

.home-trusted-companies .trusted-marquee-container {
    padding: 24px 0;
}

.home-trusted-companies .logo-item img {
    max-height: 40px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.home-trusted-companies .logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===========================================
   SWIPER NAVIGATION
   =========================================== */
.home-featured-jobs-swiper .swiper-button-prev,
.home-featured-jobs-swiper .swiper-button-next,
.home-employers-swiper .swiper-button-prev,
.home-employers-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
    top: 50%;
    margin-top: -20px;
}

.home-featured-jobs-swiper .swiper-button-prev::after,
.home-featured-jobs-swiper .swiper-button-next::after,
.home-employers-swiper .swiper-button-prev::after,
.home-employers-swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: bold;
}

.home-featured-jobs-swiper .swiper-button-prev:hover,
.home-featured-jobs-swiper .swiper-button-next:hover,
.home-employers-swiper .swiper-button-prev:hover,
.home-employers-swiper .swiper-button-next:hover {
    background: #ff0055;
    color: #fff;
}

.swiper-button-disabled {
    opacity: 0.3 !important;
    pointer-events: none;
}

/* ===========================================
   CENTERED HEADER FOR "GORĄCE OFERTY"
   =========================================== */
.section-header--centered {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0;
}

.section-header--centered .section-link {
    display: none;
}

/* Large title (+100% font size) */
.section-title--large {
    font-size: 2.5rem !important;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Section subtitle (50% smaller than title) */
.section-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    color: #6b7280;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Section footer with centered link */
.section-footer {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.section-link--centered {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

/* ===========================================
   TABS FOR FEATURED JOBS - REDESIGNED
   =========================================== */
.jobs-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* Centered tabs */
.jobs-tabs--centered {
    justify-content: center;
}

.jobs-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 1.125rem;
    /* +50% from 0.75rem base */
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.jobs-tabs__item .lucide-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.jobs-tabs__item:hover {
    border-color: #BE22FF;
    color: #BE22FF;
}

.jobs-tabs__item:hover .lucide-icon {
    color: #BE22FF;
}

/* Active tab - purple gradient (like search button) */
.jobs-tabs__item.active {
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
}

.jobs-tabs__item.active .lucide-icon {
    color: #fff;
}

.jobs-tabs__item.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(190, 34, 255, 0.5);
}

/* Loading state */
.jobs-tabs__item.loading {
    opacity: 0.7;
    pointer-events: none;
}

.jobs-tabs__item i {
    font-size: 1rem;
}

/* "Show All" link styled exactly like active tab */
.jobs-tabs__item--link {
    text-decoration: none;
}

.jobs-tabs__item--link,
.jobs-tabs__item--link:hover,
.jobs-tabs__item--link:focus {
    background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
}

.jobs-tabs__item--link .lucide-icon {
    color: #fff !important;
}

.jobs-tabs__item--link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(190, 34, 255, 0.5);
}

.section-footer--centered {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (min-width: 768px) {
    .home-hero {
        min-height: 480px;
        padding: 100px 0 80px;
    }

    .home-hero__headline {
        font-size: 2.5rem;
    }

    .home-search-form .search-bar-inner {
        flex-direction: row;
        align-items: center;
    }

    .home-search-form .search-field-item {
        border-bottom: none;
        border-right: 1px solid #f0f0f0;
        flex: 1;
    }

    .home-search-form .search-field-item:last-of-type {
        border-right: none;
    }

    .home-search-form .search-submit {
        padding: 8px;
        flex-shrink: 0;
    }

    .home-search-form .search-submit .btn-search {
        width: auto;
        padding: 14px 28px;
    }
}

/* ===========================================
   DESKTOP FEATURED JOBS GRID (3x4 = 12 kafelków)
   =========================================== */
@media (min-width: 992px) {

    /* 3x4 Grid layout - szersze karty */
    .home-featured-jobs-swiper {
        overflow: visible;
        padding: 12px 0;
    }

    .home-featured-jobs-swiper .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .home-featured-jobs-swiper .swiper-slide {
        flex: 0 0 calc((100% - 32px) / 3) !important;
        max-width: calc((100% - 32px) / 3) !important;
        height: auto !important;
    }

    /* Show only first 12 jobs on desktop (3x4 rzędy) */
    .home-featured-jobs-swiper .swiper-slide:nth-child(n + 13) {
        display: none;
    }

    /* Hide the "Show More" CTA card on desktop (header link serves this) */
    .home-featured-jobs-swiper .swiper-slide-cta {
        display: none;
    }

    /* Nav buttons not needed on desktop grid */
    .home-featured-jobs-swiper .swiper-button-prev,
    .home-featured-jobs-swiper .swiper-button-next {
        display: none;
    }
}

@media (max-width: 991px) {
    .cta-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .cta-image {
        order: -1;
        display: flex;
        justify-content: center;
    }



    .home-featured-jobs-swiper .swiper-button-prev,
    .home-featured-jobs-swiper .swiper-button-next,
    .home-employers-swiper .swiper-button-prev,
    .home-employers-swiper .swiper-button-next {
        display: none;
    }

    /* ===========================================
       MOBILE FEATURED JOBS - BREAKOUT SLIDER
       (jak slider kategorii - edge-to-edge swipe)
       =========================================== */

    /* Breakout z kontenera - full viewport width */
    .home-featured-jobs {
        overflow: hidden;
    }

    .home-featured-jobs .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Header i tabs zachowują padding */
    .home-featured-jobs .section-header,
    .home-featured-jobs .jobs-tabs {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Swiper MUSI mieć overflow: hidden żeby działał scroll */
    .home-featured-jobs-swiper {
        overflow: hidden !important;
        padding: 12px 0 20px;
        position: relative;
    }

    /* Szersze slajdy - jak na /ogloszenia/ mobile (pełna szerokość minus padding) */
    .home-featured-jobs-swiper .swiper-slide {
        width: calc(100vw - 60px) !important;
        max-width: 400px;
        flex-shrink: 0;
        height: auto;
    }


    /* Pokaż CTA "Show More" na mobile */
    .home-featured-jobs-swiper .swiper-slide-cta {
        display: flex !important;
        width: 180px !important;
    }

    .home-featured-jobs-swiper .show-more-card {
        min-height: auto;
        padding: 20px;
    }

    /* Card margin reset dla slider */
    .home-featured-jobs-swiper .rj-mobile-card {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .home-hero {
        min-height: 380px;
        padding: 50px 15px 40px;
        margin-top: 20px;
        /* Match left/right margins */
    }

    .home-hero__counter {
        margin-bottom: 24px;
    }

    /* Stacked search form on mobile */
    .home-hero__search {
        border-radius: 20px;
    }

    .home-search-form .search-bar-inner {
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    .home-search-form .search-field-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 14px 16px;
        height: auto;
        min-height: 50px;
    }

    /* Swap order: Location first, Keywords second */
    .home-search-form .search-field-item.field-location {
        order: 1;
        border-radius: 20px 20px 0 0;
        border-bottom: 1px solid #f0f0f0;
        max-width: 100%;
        flex: none;
    }

    .home-search-form .search-field-item.field-keywords {
        order: 2;
        border-radius: 0;
        border-bottom: none;
    }

    .home-search-form .search-submit {
        order: 3;
        width: 100%;
        padding: 10px;
        height: auto;
    }

    /* Center location dropdown on mobile */
    .home-hero__search .custom-location-results,
    .home-hero__search .tax-search-wrapper .dropdown-menu,
    .home-hero__search .tax-search-wrapper ul {
        left: 50% !important;
        transform: translateX(-50%);
        right: auto !important;
    }

    /* Search button - gradient purple with shiny effect */
    .home-search-form .search-submit .btn-search {
        width: 100%;
        height: 52px;
        border-radius: 26px;
        background: linear-gradient(135deg, #BE22FF 0%, #6B0F99 100%);
        box-shadow: 0 4px 15px rgba(190, 34, 255, 0.4);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .home-search-form .search-submit .btn-search:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(190, 34, 255, 0.5);
    }

    /* Shiny effect */
    .home-search-form .search-submit .btn-search::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent);
        animation: shiny 3s infinite;
    }

    @keyframes shiny {
        0% {
            left: -100%;
        }

        50%,
        100% {
            left: 100%;
        }
    }

    .home-search-form .search-submit .btn-search .lucide-icon {
        color: #fff;
    }

    /* Show button text on mobile */
    .home-search-form .btn-search-text {
        display: inline;
        color: #fff;
        font-weight: 200;
        font-size: 14px;
    }

    /* Center icon and text, reduce gap between them */
    .home-search-form .search-submit .btn-search {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .home-search-form .search-submit .btn-search .lucide-icon {
        width: 16px;
        height: 16px;
    }

    .section-title {
        font-size: 1.125rem;
    }

    .home-categories,
    .home-featured-jobs,
    .home-top-employers,
    .home-trusted-companies {
        padding: 32px 0;
    }

    .category-card {
        padding: 18px 12px;
        min-width: 100px;
    }

    .category-card__icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .category-card__icon .lucide-icon {
        width: 26px;
        height: 26px;
    }

    .category-card__name {
        font-size: 0.8125rem;
    }

    .cta-headline {
        font-size: 1.375rem;
    }

    /* Mobile tabs - horizontal scroll */
    .jobs-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
        margin: 0 0 24px;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .jobs-tabs::-webkit-scrollbar {
        display: none;
    }

    .jobs-tabs__item {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 10px 18px;
        font-size: 0.9375rem;
    }

    .jobs-tabs__item .lucide-icon {
        width: 18px;
        height: 18px;
    }

    /* Fix: centered tabs should start from left on mobile (scroll) */
    .jobs-tabs--centered {
        justify-content: flex-start;
    }

    /* Smaller title on mobile */
    .section-title--large {
        font-size: 1.75rem !important;
    }
}

/* ===========================================
   COMPANIES STRIP (below hero)
   =========================================== */
.home-companies-strip {
    background: #fff;
    border: none;
    border-radius: 12px;
    margin: -20px 20px 30px 20px;
    padding: 16px 24px;
    position: relative;
    z-index: 50;
    box-shadow: none;
    /* Removed as requested */
}

.companies-strip-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.companies-strip-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.companies-strip-marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.companies-strip-marquee-content {
    display: inline-flex;
    gap: 40px;
    animation: companiesStripScroll 25s linear infinite;
    padding: 0 10px;
    align-items: center;
}

.companies-strip-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 60px;
}

.companies-strip-logo img {
    max-height: 28px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.35;
    transition: all 0.3s ease;
    -o-object-fit: contain;
       object-fit: contain;
}

.companies-strip-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes companiesStripScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.33%);
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .home-companies-strip {
        margin: -10px 15px 20px 15px;
        padding: 12px 16px;
    }

    .companies-strip-inner {
        gap: 12px;
    }

    .companies-strip-label {
        font-size: 11px;
    }

    .companies-strip-logo img {
        max-height: 22px;
    }

    .companies-strip-marquee-content {
        gap: 30px;
    }
}

/* ===========================================
   HIDE PURPLE LINE ON HOME-TEST PAGE
   Targets pages with slug "home-test"
   =========================================== */
.page-template-page-home.page-home-test .header-trusted-slider::before,
body.page-home-test .header-trusted-slider::before,
.home-test-page .header-trusted-slider::before {
    display: none !important;
}

/* ===========================================
   MOBILE FIXES - HOME-TEST
   =========================================== */
@media (max-width: 767px) {

    /* 1. Search button - full width under search form */
    .home-search-form .search-submit .btn-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-radius: 26px !important;
    }

    /* 2. Remove shadow from company logos strip */
    .home-companies-strip {
        box-shadow: none;
    }

    /* 3. Category arrow - lower it */
    .home-categories-swiper .swiper-button-next,
    .home-categories .swiper-button-next {
        top: 58%;
    }

    /* 4. Job cards - fixed width for centered slider */
    .home-featured-jobs-swiper .swiper-slide {
        width: 85vw;
        max-width: 340px;
    }

    /* 5. Employer cards - fixed width for centered slider */
    .home-employers-swiper .swiper-slide {
        width: 85vw;
        max-width: 320px;
    }

    /* 6. Show all offers button - centered */
    .home-featured-jobs .section-footer {
        margin-top: 16px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* ===========================================
   FIX: Heart/favorite button - force 30x30 circle
   Overrides [class*="btn-"] padding (40px) and
   .btn-action-job:before loading overlay
   =========================================== */
.btn-follow.btn-action-job {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.btn-follow.btn-action-job:hover,
.btn-follow.btn-action-job:focus,
.btn-follow.btn-action-job.added {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* Hide loading overlay pseudo-element to prevent stretched bg */
.btn-follow.btn-action-job:before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}