html {
  overflow-y: auto;
  height: auto;
  /* Hide scrollbar for all browsers and devices */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;     /* Firefox */
}

html::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

body {        
  background: #242936; /* Solid lighter color - no gradient */
  margin: 0;
  padding: clamp(70px, 20vh, 110px) 0 0 0; /* Responsive top padding for fixed header */
}

body::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* ============================================
   MODERN & TECHY HEADER DESIGN 🚀
   ============================================ */

.jobcat-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%); /* Slightly darker slate */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(16, 185, 129, 0.5); /* Green accent for consistency */
  overflow: hidden; /* Clip search bar when sliding */
}

.jobcat-listheader {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: clamp(66px, 20vh, 106px);
  align-items: center;
  justify-content: space-between;
  background: transparent;
  position: relative;
  padding-right: clamp(5px, 2vw, 15px);
}

.jobcat-servicemenu {
  width: clamp(120px, 60vw, 238px);
  height: clamp(50px, 12vh, 59px);
  border: 2px solid rgba(16, 185, 129, 0.5); /* Match new-post2 2px borders */
  margin-left: clamp(-2px, -0.5vw, -2px);
  cursor: pointer;
  display: flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 0 clamp(12px, 2.5vw, 16px) clamp(12px, 2.5vw, 16px) 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}

.jobcat-servicemenu:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.8);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.3),
              inset 0 1px 0 rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
}

.jobcat-servicename {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: clamp(300px, 90vw, 378px);
  height: clamp(50px, 12vh, 59px);
  color: #ffffff;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  font-family: arial, sans-serif;
  padding-left: clamp(15px, 4vw, 20px);
  padding-right: clamp(12px, 3vw, 15px);
  user-select: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.jobcat-headerbuttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  margin-right: clamp(8px, 2vw, 15px);
  gap: clamp(15px, 4vw, 25px);
}

.jobcat-headerbutton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: clamp(50px, 12vw, 70px);
  min-height: clamp(60px, 15vh, 75px);
  color: #ffffff;
  font-size: clamp(12px, 3vw, 16px);
  font-family: Arial, Helvetica, sans-serif; /* Consistent font across all viewports */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
  border-radius: clamp(12px, 2.5vw, 16px); /* Match new-post2 12-16px radius */
  border: 2px solid rgba(16, 185, 129, 0.3); /* Match 2px border style */
  background: rgba(16, 185, 129, 0.05);
  padding-top: clamp(6px, 1.5vh, 10px);
  /* No pulsating animation - too crowded with 3 buttons */
}

.jobcat-headerbutton:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
  transform: translateY(-3px);
}

/* Normalize the <a> wrapper in Post button to match other buttons */
.jobcat-headerbutton a {
  width: 100%;
  height: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Ensure all caption text has identical styling */
.jobcat-headerbutton > div,
.jobcat-headerbutton a > div:not(.jobcat-icon-emoji),
.posttext {
  font-size: inherit;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}

.jobcat-icon-emoji {
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1;
  height: clamp(28px, 7vw, 40px);
  width: clamp(28px, 7vw, 40px); /* Match width to height for consistent sizing */
  margin-bottom: clamp(4px, 1vw, 6px); /* Changed from vh to vw for horizontal sync */
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
}

.jobcat-headerbutton:hover .jobcat-icon-emoji {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.8)) brightness(1.2);
}

/* CSS hamburger removed - now using emoji ☰ for consistency */

/* Legacy img support (if any pages still use images) */
.jobcat-headerbutton img {
  width: 100%;
  height: clamp(30px, 12vh, 55px);
  object-fit: contain;
  margin-bottom: clamp(2px, 1vh, 4px);
  transition: all 0.3s ease;
  filter: brightness(1.1) drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4));
}

.jobcat-headerbutton:hover img {
  transform: scale(1.15);
  filter: brightness(1.3) drop-shadow(0 4px 16px rgba(16, 185, 129, 0.8));
}

.jobcat-borderline {
  height: clamp(3px, 0.5vh, 4px);
  width: 100%;
  background: #0ea5e9; /* Cyan/Blue - differentiated from filter green */
  position: fixed;
  left: 0;
  z-index: 96;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.4),
              0 0 20px rgba(14, 165, 233, 0.25);
  animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% {
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.4),
                0 0 20px rgba(14, 165, 233, 0.25);
  }
  50% {
    box-shadow: 0 2px 20px rgba(14, 165, 233, 0.6),
                0 0 32px rgba(14, 165, 233, 0.4);
  }
}

/* Hide scrollbar on desktop only */
@media (hover: hover) and (pointer: fine) {
  html {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================
   CLEAN RESPONSIVE HEADER FIX
   ============================================ */
@media (max-width: 435px) and (min-width: 361px) {
  /* Make jobcat WIDER in this range - it's too narrow */
  .jobcat-servicemenu {
    width: clamp(140px, 50vw, 200px) !important; /* Wider to fill space properly */
  }
  
  .jobcat-servicename {
    font-size: clamp(16px, 4.2vw, 22px) !important; /* Bigger text too */
  }
}

/* Fix icon bubble vertical stretch at all mobile sizes */
/* Desktop optimization (601px and up) */
@media (min-width: 601px) {
  .jobcat-servicemenu {
    width: clamp(220px, 28vw, 320px) !important; /* Much wider on desktop */
  }
  
  .jobcat-servicename {
    width: clamp(220px, 28vw, 320px) !important; /* Match servicemenu width exactly */
    font-size: clamp(22px, 2.2vw, 28px) !important;
    justify-content: space-between !important; /* Keep arrow inside */
  }
  
  .jobcat-icon-emoji {
    font-size: 36px !important; /* Fixed consistent size for all icons */
    height: 36px !important;
    width: 36px !important;
    margin-bottom: 6px !important; /* Fixed consistent spacing */
  }
  
  .jobcat-headerbutton {
    padding-top: 8px !important; /* Fixed consistent top padding */
    padding-bottom: 4px !important; /* Fixed consistent bottom padding */
  }
}

@media (max-width: 600px) {
  .jobcat-headerbutton {
    min-height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  
  /* Make icons responsive instead of fixed */
  .jobcat-icon-emoji {
    font-size: clamp(24px, 6.5vw, 32px) !important; /* Allow responsive shrinking */
    height: clamp(24px, 6.5vw, 32px) !important;
    width: clamp(24px, 6.5vw, 32px) !important;
    margin-bottom: clamp(3px, 0.8vw, 4px) !important;
  }
  
  .jobcat-headerbuttons {
    gap: clamp(10px, 3vw, 15px) !important; /* Reduce gap on mobile */
  }
}

/* Icons need more shrinking: 411px to 361px */
@media (max-width: 411px) and (min-width: 361px) {
  .jobcat-icon-emoji {
    font-size: clamp(26px, 6.2vw, 30px) !important;
    height: clamp(26px, 6.2vw, 30px) !important;
    width: clamp(26px, 6.2vw, 30px) !important;
    margin-bottom: clamp(3px, 0.8vw, 4px) !important;
  }
  
  .jobcat-headerbuttons {
    gap: clamp(8px, 2.5vw, 12px) !important; /* Tighter gap */
  }
}

/* Icons at 360px to 350px - still comfortable */
@media (max-width: 360px) and (min-width: 350px) {
  .jobcat-icon-emoji {
    font-size: 30px !important; /* Fixed size - plenty of room */
    height: 30px !important;
    width: 30px !important;
    margin-bottom: 4px !important;
  }
  
  .jobcat-headerbuttons {
    gap: 12px !important; /* Fixed comfortable gap */
  }
}

/* Icons at 349px to 335px - shrink to avoid jobcat collision */
@media (max-width: 349px) and (min-width: 335px) {
  .jobcat-icon-emoji {
    font-size: 26px !important; /* Smaller icons */
    height: 26px !important;
    width: 26px !important;
    margin-bottom: 3px !important;
  }
  
  .jobcat-headerbuttons {
    width: 130px !important; /* Narrower container */
    margin-right: 3px !important;
    gap: 8px !important; /* Tighter gap */
  }
  
  .jobcat-headerbutton {
    width: 38px !important; /* Smaller bubbles */
    height: 38px !important;
    font-size: 11px !important;
  }
}

/* Icons at 334px to 321px - even more compact */
@media (max-width: 334px) and (min-width: 321px) {
  .jobcat-icon-emoji {
    font-size: 24px !important; /* Even smaller icons */
    height: 24px !important;
    width: 24px !important;
    margin-bottom: 2px !important;
  }
  
  .jobcat-headerbuttons {
    width: 120px !important; /* Even narrower container */
    margin-right: 2px !important;
    gap: 6px !important; /* Even tighter gap */
  }
  
  .jobcat-headerbutton {
    width: 35px !important; /* Even smaller bubbles */
    height: 35px !important;
    font-size: 10px !important;
  }
}

/* Icons at exactly 320px - moderately compact */
@media (max-width: 320px) {
  .jobcat-icon-emoji {
    font-size: 22px !important; /* Slightly larger icons */
    height: 22px !important;
    width: 22px !important;
    margin-bottom: 2px !important;
  }
  
  .jobcat-headerbuttons {
    width: 115px !important; /* Slightly wider */
    margin-right: 2px !important;
    gap: 5px !important; /* Slightly more gap */
  }
  
  .jobcat-headerbutton {
    width: 34px !important; /* Slightly larger bubbles */
    height: 34px !important;
    font-size: 10px !important; /* Slightly larger text */
    padding: 2px !important;
  }
}

/* Centered modal overlay (like new-post2) */
.jobcat-servicemenu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}
.jobcat-servicemenu-overlay.show {
  display: flex;
  opacity: 1;
}

/* Modal container */
.jobcat-modal-container {
  background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);
  border: 2px solid rgba(16, 185, 129, 0.4);
  border-radius: 16px;
  max-width: 1100px; /* Wider to prevent wrapping at 943px+ */
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(16, 185, 129, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(.77,0,.18,1);
}

@keyframes modalSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(30px) scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

/* Hide scrollbar while keeping scroll functionality */
.jobcat-modal-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.jobcat-modal-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Modal header */
.jobcat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 2px solid rgba(16, 185, 129, 0.2);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);
  z-index: 1;
}

.jobcat-modal-title {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.jobcat-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid rgba(16, 185, 129, 0.3);
  font-size: 24px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
}

.jobcat-modal-close:hover {
  background: #e74c3c;
  color: #fff;
  transform: rotate(90deg);
  border-color: #e74c3c;
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
}

/* Modal body */
.jobcat-modal-body {
  padding: 24px;
}

/* Section divider */
.jobcat-section-divider {
  margin: 32px 0 20px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
  border-left: 4px solid #10b981;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.jobcat-section-divider::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.jobcat-section-divider:first-child {
  margin-top: 0; /* No top margin for first section */
}

/* Category grid - Default: 4 columns for tablet/small desktop */
.jobcat-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns for tablet range */
  gap: 16px;
  margin-bottom: 16px;
}

/* Large desktop: 6 columns at 888px+ */
@media (min-width: 888px) {
  .jobcat-category-grid {
    grid-template-columns: repeat(6, 1fr); /* 6 columns for large desktop */
  }
}

.jobcat-category-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  border: 2px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
}

.jobcat-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #34d399);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jobcat-category-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
  border-color: rgba(16, 185, 129, 0.6);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
}

.jobcat-category-card:hover::before {
  opacity: 1;
}

.jobcat-category-card.active {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.08));
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.jobcat-category-icon {
  font-size: 3rem;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6)); /* Green glow */
}

.jobcat-category-card:hover .jobcat-category-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.9)) brightness(1.2); /* Stronger glow on hover */
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.jobcat-category-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.3px;
  line-height: 1.2;
  max-width: 100%;
  word-wrap: break-word;
}

/* Mobile optimization */
@media (max-width: 600px) {
  .jobcat-servicemenu-overlay {
    backdrop-filter: none;
  }
  
  .jobcat-modal-container {
    width: 95%;
    max-height: 92vh;
    animation: none;
  }
  
  .jobcat-modal-header {
    padding: 14px 16px;
  }
  
  .jobcat-modal-title {
    font-size: 18px;
  }
  
  .jobcat-modal-body {
    padding: 16px;
    padding-bottom: 40px; /* Extra bottom padding to ensure last row is fully visible */
  }
  
  .jobcat-section-divider {
    margin: 20px 0 14px 0;
    padding: 8px 12px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }
  
  .jobcat-category-grid {
    grid-template-columns: repeat(3, 1fr); /* Fixed 3 columns for mobile/tablet */
    gap: 12px;
  }
  
  .jobcat-category-card {
    padding: 16px 10px;
    gap: 10px;
  }
  
  .jobcat-category-icon {
    font-size: 2.5rem;
  }
  
  .jobcat-category-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 411px) {
  .jobcat-section-divider {
    margin: 20px 0 12px 0;
    padding: 8px 10px;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
  }
  
  .jobcat-category-grid {
    grid-template-columns: repeat(3, 1fr); /* Fixed 3 columns for small mobile */
    gap: 10px;
  }
  
  .jobcat-category-card {
    padding: 14px 8px;
    gap: 8px;
  }
  
  .jobcat-category-icon {
    font-size: 2.25rem;
}
  
  .jobcat-category-label {
    font-size: 0.7rem;
  }
}
/* ── Jobcat menu overlay — full-screen dark backdrop ── */
.jobcat-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  pointer-events: none;
  background: transparent;
}
.jobcat-menu-overlay.show {
  display: block;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
}
/* Floating card popup — top set by JS to borderline.getBoundingClientRect().bottom */
.jobcat-menu-items {
  position: absolute;
  top: 80px; /* JS overrides this on every open */
  right: 10px;
  width: 290px;
  max-width: calc(100% - 20px);
  height: auto;
  max-height: calc(100vh - 120px);
  background: linear-gradient(160deg, #1e2533 0%, #151c28 100%);
  border: 2px solid rgba(16, 185, 129, 0.5);
  border-radius: 16px;
  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(16, 185, 129, 0.3),
    0 0 40px rgba(16, 185, 129, 0.15);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6px, 2vw, 10px);
  padding: clamp(10px, 3vw, 16px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  animation: jobcatSlideDown 0.4s cubic-bezier(.77,0,.18,1);
  font-family: Arial, Helvetica, sans-serif;
}
@keyframes jobcatSlideDown {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.jobcat-menu-item { display: none; }

@media (max-width: 400px) {
  .jobcat-menu-items {
    width: 200px;
    max-width: calc(100% - 20px);
    right: 10px;
  }
}

@media (max-width: 600px) and (min-width: 401px) {
  .jobcat-menu-items {
    width: 220px;
    max-width: calc(100% - 20px);
    right: 10px;
  }

  /* Modal text - controlled by JavaScript auto-resize */
  .jobcat-servicemenu-overlay a {
    /* font-size: clamp(1.35rem, 5vw, 1.8rem) !important; */ /* Removed - controlled by JavaScript */
    padding: clamp(4px, 1vw, 6px) 0 clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px) !important;
    /* white-space: nowrap !important; */ /* Removed - allow text to wrap if needed */
    /* overflow: hidden !important; */ /* Removed - no truncation */
    /* text-overflow: ellipsis !important; */ /* Removed - no ellipsis */
    line-height: 1.2 !important; /* Controlled by JavaScript */
  }

  /* Region/City/Pay Modals - Much larger text */
  .jobcat-region-menu-overlay li,
  .jobcat-city-menu-overlay li,
  .jobcat-pay-menu-overlay li {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 375px) {
  .jobcat-menu-items {
    width: 180px;
    max-width: calc(100% - 20px);
    right: 10px;
  }
}

@media (max-width: 320px) {
  .jobcat-menu-items {
    width: 160px;
    max-width: calc(100% - 20px);
    right: 10px;
  }
}

/* Sort Menu Styles */
.jobcat-sort-header {
  position: fixed;
  top: 72px; /* Height of main header (68px) + borderline (4px) */
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent; /* Made transparent so cards show through */
  overflow: visible; /* Allow gaming filter panel to expand beyond container */
}

.sortmenus {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0; /* Remove all padding */
  gap: clamp(8px, 2vw, 15px);
  min-height: 0; /* Allow panel to determine height */
}

/* 🎮 Gaming Filter Panel (Expandable Single Piece) */
.gaming-filter-panel {
  background: linear-gradient(180deg, rgba(26, 32, 44, 0.95) 0%, rgba(45, 55, 72, 0.97) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid #10b981;
  border-radius: 14px;
  width: clamp(90%, 94vw, 950px); /* Smooth scaling from 90% mobile to 950px desktop max */
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(16, 185, 129, 0.2);
  position: relative;
  z-index: 100;
  font-family: Arial, Helvetica, sans-serif;
  overflow: visible; /* Allow arrow to extend outside */
  display: flex;
  flex-direction: column;
}

/* Collapsed state - only footer visible */
.gaming-filter-panel {
  max-height: clamp(52px, 13vw, 95px); /* Much more aggressive shrinking - smaller min, higher vw scaling */
  transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), /* Bouncy expansion */
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

/* Smooth closing animation - consolidated with styling */
.gaming-filter-panel:not(.expanded) {
  max-height: clamp(52px, 13vw, 95px); /* Explicit same height to prevent snap */
  transition: max-height 0.35s ease-out, /* Faster closing */
              transform 0.35s ease-out,
              box-shadow 0.35s ease-out,
              margin 0.35s ease-out;
  border-radius: 0 0 14px 14px;
  border-top: none;
  margin-top: -3px; /* Mobile: flush with borderline */
  margin-bottom: clamp(8px, 1.5vw, 16px); /* Use vw - shrinks on smaller screens */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 rgba(16, 185, 129, 0);
}

/* Clip content during closing animation to prevent overflow */
.gaming-filter-panel.closing {
  overflow: hidden !important;
}

/* Desktop 601px+: Push collapsed panel down so text isn't hidden by header */
@media (min-width: 601px) {
  .gaming-filter-panel:not(.expanded) {
    margin-top: clamp(22px, 3vh, 32px); /* Pushed down on desktop only */
  }
}

.gaming-filter-panel.expanded {
  margin-top: clamp(-18px, -2.5vh, -12px); /* Smooth scaling margin for expanded */
  border-radius: 14px;
  border-top: 3px solid #10b981;
}

.gaming-filter-panel .filter-panel-header,
.gaming-filter-panel .filter-panel-body {
  display: none;
}

/* Subtle backdrop when expanded - highlights overlay */
.sortmenus::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: none;
  z-index: 99;
  transition: background 0.35s ease-out;
}

.sortmenus:has(.gaming-filter-panel.expanded)::after {
  background: rgba(0, 0, 0, 0.65); /* Darker overlay to blur out background cards */
  pointer-events: all; /* Capture clicks outside to close panel */
}

@media (min-width: 601px) {
  .sortmenus:has(.gaming-filter-panel.expanded)::after {
    background: rgba(0, 0, 0, 0.60); /* Slightly lighter for desktop but still dark */
  }
}

/* Expanded state - everything visible */
.gaming-filter-panel.expanded {
  max-height: 95vh;
  transition: max-height 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 14px;
  border-top: 3px solid #10b981;
}

.gaming-filter-panel.expanded .filter-panel-header,
.gaming-filter-panel.expanded .filter-panel-body {
  display: block;
  animation: slideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

/* Closing animation - slides content back up */
.gaming-filter-panel.closing .filter-panel-header,
.gaming-filter-panel.closing .filter-panel-body {
  display: block;
  animation: slideUp 0.35s ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* Filter Display - No breakpoint overrides, using base clamps only */


.filter-panel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 3vh, 28px) clamp(28px, 4vw, 40px);
  border-bottom: 2px solid rgba(16, 185, 129, 0.3);
}

.filter-panel-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(16, 185, 129, 0.6);
  letter-spacing: 2px;
  text-align: center;
}

.filter-panel-body {
  padding: clamp(24px, 4vh, 36px) clamp(28px, 4vw, 40px);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 60vh; /* Generous height for all dropdowns */
}

/* Smooth scrollbar for filter body */
.filter-panel-body::-webkit-scrollbar {
  width: 8px;
}

.filter-panel-body::-webkit-scrollbar-track {
  background: rgba(45, 55, 72, 0.5);
  border-radius: 4px;
}

.filter-panel-body::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.5);
  border-radius: 4px;
}

.filter-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.7);
}

.filter-section {
  margin-bottom: clamp(28px, 4vh, 40px);
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-section-title {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 800;
  color: #10b981;
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
  letter-spacing: 1.5px;
  margin-bottom: clamp(12px, 2vh, 18px);
  padding-left: 12px;
  border-left: 4px solid #10b981;
}

/* Filter Button (replaces dropdown) */
.filter-button {
  width: 100%;
  background: rgba(45, 55, 72, 0.8);
  border: 2px solid rgba(16, 185, 129, 0.5);
  border-radius: 10px;
  padding: clamp(14px, 2.5vh, 18px) clamp(16px, 3vw, 20px);
  font-size: clamp(16px, 3vw, 19px);
  font-weight: 700;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.filter-button:hover {
  background: rgba(45, 55, 72, 1);
  border-color: rgba(16, 185, 129, 0.8);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(16, 185, 129, 0.3);
}

.filter-button:active {
  transform: scale(0.98);
}

/* Filter Modal Overlay */
.filter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.filter-modal-overlay.show {
  display: flex;
}

.filter-modal-container {
  background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);
  border: 2px solid rgba(16, 185, 129, 0.4);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(16, 185, 129, 0.2);
  width: clamp(320px, 90vw, 480px);
  max-height: clamp(280px, 45vh, 400px); /* MUCH shorter */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Ensure corners stay rounded */
  animation: slideDown 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-modal-header {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.5vh, 20px) clamp(18px, 3.5vw, 24px);
  border-bottom: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px 14px 0 0; /* Match container radius */
}

.filter-modal-title {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  color: #10b981;
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.filter-modal-close {
  font-size: clamp(28px, 5vw, 36px);
  color: #10b981;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  padding: 4px 8px;
}

.filter-modal-close:hover {
  color: #ffffff;
  transform: rotate(90deg) scale(1.1);
}

.filter-modal-body {
  padding: clamp(12px, 2.5vh, 18px) clamp(16px, 3.5vw, 22px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-modal-body::-webkit-scrollbar {
  display: none;
}

.filter-option-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 9px);
}

.filter-option-item {
  background: rgba(45, 55, 72, 0.6);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: clamp(10px, 2vh, 14px) clamp(14px, 2.8vw, 18px);
  font-size: clamp(15px, 2.8vw, 18px);
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.filter-option-item:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.8);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.filter-option-item.active {
  background: rgba(16, 185, 129, 0.3);
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* Mobile responsive filter modals */
@media (max-width: 600px) {
  .filter-modal-container {
    width: clamp(300px, 95vw, 420px);
    max-height: clamp(260px, 42vh, 360px); /* Shorter on mobile */
  }
  
  .filter-modal-header {
    padding: clamp(12px, 2vh, 16px) clamp(14px, 3vw, 18px);
  }
  
  .filter-modal-title {
    font-size: clamp(17px, 3.2vw, 21px);
  }
  
  .filter-modal-close {
    font-size: clamp(22px, 4vw, 28px);
  }
  
  .filter-modal-body {
    padding: clamp(10px, 2vh, 14px) clamp(14px, 3vw, 18px);
  }
  
  .filter-option-item {
    padding: clamp(10px, 2vh, 14px) clamp(12px, 2.5vw, 16px);
    font-size: clamp(14px, 2.6vw, 17px);
  }
}

/* Old dropdown styles removed - now using filter buttons + modals */

/* Pay Type Icon Selector */
.pay-type-selector {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  justify-content: space-between;
}

.pay-type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 24px) clamp(12px, 2vw, 20px);
  background: rgba(45, 55, 72, 0.6);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.pay-type-option:hover {
  background: rgba(45, 55, 72, 0.8);
  border-color: rgba(16, 185, 129, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
              0 0 20px rgba(16, 185, 129, 0.3);
}

.pay-type-option.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  border-width: 3px;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.5),
              inset 0 0 20px rgba(16, 185, 129, 0.1);
}

.pay-type-icon {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: clamp(8px, 1.5vh, 12px);
  filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4));
}

.pay-type-option.active .pay-type-icon {
  filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.8));
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.pay-type-label {
  font-size: clamp(14px, 2.8vw, 18px);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.pay-type-option.active .pay-type-label {
  color: #10b981;
  text-shadow: 0 2px 12px rgba(16, 185, 129, 0.8);
}

/* Filter Display Bar (Bottom of panel - always visible) */
.filter-panel-footer-bar {
  padding: clamp(10px, 2vw, 20px) clamp(8px, 1.5vw, 14px) clamp(16px, 3vw, 32px) clamp(8px, 1.5vw, 14px); /* Balanced vertical padding using vw */
  display: flex;
  justify-content: center; /* Center the filter display text */
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  cursor: pointer;
  user-select: none;
  transition: all 0.35s ease-out;
  position: relative;
  order: 999; /* Always at bottom */
  flex-shrink: 0;
  border-top: 2px solid rgba(16, 185, 129, 0.3);
  overflow: visible; /* Allow arrow to extend outside */
}

.gaming-filter-panel:not(.expanded) .filter-panel-footer-bar {
  border-top: none;
  border-radius: 14px; /* Match panel radius when collapsed */
}

.filter-panel-footer-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  border-radius: 14px 14px 0 0;
  animation: borderPulse 2s ease-in-out infinite;
}

.gaming-filter-panel.expanded .filter-panel-footer-bar::before {
  display: none;
}

.filter-panel-footer-bar:hover {
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.5), rgba(55, 65, 81, 0.5));
}

.filter-display-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1.5vw, 18px); /* More aggressive gap scaling */
  flex: 1;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  padding: 0;
  transition: all 0.35s ease-out;
}

.filter-display-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vw, 4px); /* Proportional gap between label and value */
  flex: 1 1 0; /* Equal width distribution */
  min-width: 0; /* Allow shrinking on small screens */
  transition: all 0.35s ease-out;
}

.filter-display-label {
  font-size: clamp(8px, 2vw, 12px); /* Better balance for mobile viewports */
  font-weight: 600;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.8;
  white-space: nowrap;
  transition: all 0.35s ease-out;
}

.filter-display-value {
  font-size: clamp(11px, 3vw, 17px); /* Larger minimum for better mobile readability */
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  width: 100%;
  transition: all 0.35s ease-out;
}

.filter-display-arrow {
  position: absolute;
  bottom: clamp(-20px, -3vw, -28px); /* MUCH more negative to extend outside panel */
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(28px, 5.5vw, 38px); /* Bigger and more responsive */
  transition: transform 0.35s ease-out, font-size 0.35s ease-out, bottom 0.35s ease-out, opacity 0.35s ease-out;
  color: #10b981;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
  animation: arrowBounce 2s ease-in-out infinite;
  z-index: 10;
}

/* Arrow symbol via CSS (not hardcoded in HTML) */
.filter-display-arrow::before {
  content: "▼";
}

/* Pulsing bounce animation */
@keyframes arrowBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 1));
  }
}

.filter-panel-footer-bar:hover .filter-display-arrow {
  animation: none; /* Stop bounce on hover */
  transform: translateX(-50%) scale(1.2);
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 1));
}

/* Rotate arrow when expanded - bigger and pointing up */
.gaming-filter-panel.expanded .filter-display-arrow {
  transform: translateX(-50%) rotate(180deg);
  font-size: clamp(32px, 6vw, 44px); /* Even bigger when expanded */
  bottom: clamp(-24px, -3.5vw, -32px); /* MUCH more negative when expanded */
  animation: arrowBounceUp 2s ease-in-out infinite;
}

/* Add "APPLY" button below arrow when expanded */
.gaming-filter-panel.expanded .filter-display-arrow::after {
  content: "APPLY";
  position: absolute;
  top: clamp(-32px, -6vw, -44px); /* Position below the rotated arrow (top becomes bottom when rotated) */
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* Counter-rotate to keep text upright */
  font-size: clamp(16px, 3.5vw, 22px); /* Larger text */
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1f2937;
  background: linear-gradient(135deg, #10b981, #059669);
  padding: clamp(6px, 1.5vw, 10px) clamp(16px, 4vw, 24px);
  border-radius: clamp(6px, 1.5vw, 10px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.3);
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Bounce animation for expanded state (upward) */
@keyframes arrowBounceUp {
  0%, 100% {
    transform: translateX(-50%) rotate(180deg) translateY(0);
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
  }
  50% {
    transform: translateX(-50%) rotate(180deg) translateY(6px);
    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 1));
  }
}

.gaming-filter-panel.expanded .filter-panel-footer-bar:hover .filter-display-arrow {
  animation: none;
  transform: translateX(-50%) rotate(180deg) scale(1.2);
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 1));
}

/* Mobile adjustments - removed fixed values, using base clamps */

/* Desktop-specific sortmenus spacing (601px and above) */
@media (min-width: 601px) {
  .sortmenus {
    padding: 0 !important; /* Keep flush with borderline */
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Desktop mid-range - removed fixed overrides, using base clamps */

.sort-menu {
  color: #fff;
  background-color: #363f4f;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: clamp(4px, 1vw, 5px); /* Responsive border radius */
  padding: clamp(4px, 1vw, 5px) clamp(10px, 3vw, 12px); /* Responsive padding */
  width: clamp(100px, 22vw, 120px); /* Much smaller width with better spacing */
  height: clamp(28px, 8vh, 32px); /* Responsive height */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(14px, 4vw, 18px); /* Responsive font size */
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.region-menu, .city-menu, .pay-menu {
  color: #fff;
  background-color: #363f4f;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: clamp(4px, 1vw, 5px); /* Responsive border radius */
  padding: clamp(4px, 1vw, 5px) clamp(10px, 3vw, 12px); /* Responsive padding */
  width: clamp(140px, 30vw, 180px); /* Much wider - nearly full screen with small margins */
  height: clamp(28px, 8vh, 32px); /* Responsive height */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(14px, 4vw, 18px); /* Responsive font size */
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sort-menu > div:last-child {
  font-size: 12px;
  opacity: 0.8;
}

/* Second borderline */
.jobcat-sort-borderline {
  display: none; /* Hidden for gaming-style filter bar */
}

@media (max-width: 600px) {
  .jobcat-sort-header {
    top: 72px;
  }

  .sortmenus {
    padding: 0;
    gap: clamp(4px, 1.5vw, 6px);
    min-height: 0;
  }
  
  .gaming-filter-bar {
    width: 94%;
    padding: clamp(18px, 3.5vh, 24px) clamp(28px, 4.5vw, 36px);
    gap: clamp(18px, 3vw, 24px);
  }
  
  .filter-display {
    font-size: clamp(17px, 3.5vw, 20px);
    letter-spacing: 0.6px;
  }
  
  .filter-arrow {
    font-size: clamp(16px, 3.2vw, 20px);
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(150px, 40vw, 170px); /* Responsive width for mobile */
    height: clamp(26px, 7vh, 30px); /* Increased height for better proportions */
    padding: clamp(3px, 1vw, 4px) clamp(8px, 2.5vw, 10px); /* Increased padding */
    font-size: clamp(15px, 3.8vw, 17px); /* Increased font size to match overlay */
    font-family: Arial, Helvetica, sans-serif;
  }
}

.region-menu-overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: clamp(100px, 22vw, 120px); /* Match smaller dropdown width */
  background: #434a58;
  border: clamp(1px, 0.5vw, 2px) solid rgba(255,255,255,0.3); /* Responsive border */
  border-radius: clamp(8px, 2vw, 10px); /* Responsive border radius */
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 2000;
  padding: 0;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  max-height: clamp(180px, 50vh, 227px); /* Responsive max height */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.region-menu-overlay.show {
  display: block;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
}
.region-menu-overlay::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.region-menu-list {
  list-style: none;
  margin: 0;
  padding: clamp(5px, 1.5vw, 7px) clamp(8px, 2vw, 10px); /* Responsive padding */
}
.region-menu-list li {
  color: #fff;
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  font-weight: 700;
  padding: clamp(4px, 1.5vw, 6px) 0; /* Responsive padding */
  border-radius: clamp(3px, 1vw, 4px); /* Responsive border radius */
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.13s;
}
.region-menu-list li:hover, .region-menu-list li.active {
  background: rgba(255,255,255,0.08);
}
.region-menu-list li .arrow {
  margin-left: auto;
  font-size: 1.1em;
  color: #d3d7e0;
}
.region-menu-wrapper {
  position: relative;
  display: inline-block;
}
.city-menu-wrapper {
  position: relative;
  display: inline-block;
}
.city-menu-overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: clamp(100px, 22vw, 120px); /* Match smaller dropdown width */
  background: #434a58;
  border: clamp(1px, 0.5vw, 2px) solid rgba(255,255,255,0.3); /* Responsive border */
  border-radius: clamp(8px, 2vw, 10px); /* Responsive border radius */
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 2000;
  padding: 0;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  max-height: clamp(60px, 18vh, 100px) !important; /* DRASTICALLY shorter */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.city-menu-overlay::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
  width: 0 !important;
  height: 0 !important;
}
.city-menu-overlay::-webkit-scrollbar-thumb {
  display: none !important;
}
.city-menu-overlay::-webkit-scrollbar-track {
  display: none !important;
}
.city-menu-overlay.show {
  display: block;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
}
.city-menu-list {
  list-style: none;
  margin: 0;
  padding: clamp(5px, 1.5vw, 7px) clamp(8px, 2vw, 10px); /* Responsive padding */
}
.city-menu-list li {
  color: #fff;
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  font-weight: 700;
  padding: clamp(4px, 1.5vw, 6px) 0; /* Responsive padding */
  border-radius: clamp(3px, 1vw, 4px); /* Responsive border radius */
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.13s;
}
.city-menu-list li:hover, .city-menu-list li.active {
  background: rgba(255,255,255,0.08);
}
.city-menu-list li .arrow {
  margin-left: auto;
  font-size: 1.1em;
  color: #d3d7e0;
}
.pay-menu-wrapper {
  position: relative;
  display: inline-block;
}
.pay-menu-overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: clamp(100px, 22vw, 120px); /* Match smaller dropdown width */
  background: #434a58;
  border: clamp(1px, 0.5vw, 2px) solid rgba(255,255,255,0.3); /* Responsive border */
  border-radius: clamp(8px, 2vw, 10px); /* Responsive border radius */
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 2000;
  padding: 0;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  max-height: clamp(180px, 50vh, 227px); /* Responsive max height */
  overflow-y: auto;
  scrollbar-width: none;
}
.pay-menu-overlay::-webkit-scrollbar {
  display: none;
}
.pay-menu-overlay.show {
  display: block;
  animation: slideDown 0.22s cubic-bezier(.77,0,.18,1);
}
.pay-menu-list {
  list-style: none;
  margin: 0;
  padding: clamp(5px, 1.5vw, 7px) clamp(8px, 2vw, 10px); /* Responsive padding */
}
.pay-menu-list li {
  color: #fff;
  font-size: clamp(14px, 3.5vw, 16.25px); /* Responsive font size */
  font-family: Arial, sans-serif;
  font-weight: 700;
  padding: clamp(4px, 1.5vw, 6px) 0; /* Responsive padding */
  border-radius: clamp(3px, 1vw, 4px); /* Responsive border radius */
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.13s;
}
.pay-menu-list li:hover, .pay-menu-list li.active {
  background: rgba(255,255,255,0.08);
}
.pay-menu-list li .arrow {
  margin-left: auto;
  font-size: 1.1em;
  color: #d3d7e0;
}
.city-menu #cityMenuLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ===================== JOB PREVIEW CARDS - OPTION A: MODERN SPLIT LAYOUT ===================== */
/* 
 * New card design (1.5x original height):
 * - Square thumbnail (left side)
 * - Content box with glassmorphism effect (right side)
 * - Title (2 lines), Extras + Payment (middle row), Date/Time (footer row)
 * - Responsive scaling across all breakpoints
 */

/* ============================
   BASE CARD STRUCTURE (Desktop)
   ============================ */
.job-preview-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: clamp(650px, 75vw, 800px);
  background: #363f4f;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 
              0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto 20px auto;
  text-decoration: none;
  color: #e6d6ae;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.1);
  padding: 0;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

/* Pay type-based background colors with subtle gradients */
.job-preview-card.pay-per-job {
  background: linear-gradient(135deg, #363f4f 0%, #3a4555 100%);
}

.job-preview-card.pay-per-job-alt {
  background: linear-gradient(135deg, #2c3545 0%, #303a4a 100%);
}

.job-preview-card.pay-per-hour {
  background: linear-gradient(135deg, #3f4f36 0%, #43543a 100%);
}

.job-preview-card.pay-per-hour-alt {
  background: linear-gradient(135deg, #35442d 0%, #394931 100%);
}

/* Hover states with glow effect */
.job-preview-card:hover,
.job-preview-card:focus {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 
              0 6px 20px rgba(16,185,129,0.15),
              0 0 30px rgba(16,185,129,0.1);
  outline: none;
}

.job-preview-card.pay-per-job:hover,
.job-preview-card.pay-per-job:focus {
  background: linear-gradient(135deg, #424a5c 0%, #465160 100%);
  border-color: rgba(96,165,250,0.3);
}

.job-preview-card.pay-per-job-alt:hover,
.job-preview-card.pay-per-job-alt:focus {
  background: linear-gradient(135deg, #343d4d 0%, #384252 100%);
  border-color: rgba(96,165,250,0.3);
}

.job-preview-card.pay-per-hour:hover,
.job-preview-card.pay-per-hour:focus {
  background: linear-gradient(135deg, #4a5c41 0%, #4e6145 100%);
  border-color: rgba(16,185,129,0.4);
}

.job-preview-card.pay-per-hour-alt:hover,
.job-preview-card.pay-per-hour-alt:focus {
  background: linear-gradient(135deg, #404f35 0%, #445439 100%);
  border-color: rgba(16,185,129,0.4);
}

/* Active (pressed) state */
.job-preview-card:active {
  transform: translateY(-2px) scale(0.99);
}

/* Consistent space between filter panel and first card */
.job-preview-card:first-of-type {
  margin-top: clamp(10px, 2vw, 20px) !important; /* Shrinks on smaller screens */
}

/* ============================
  TRIAL AD PLACEHOLDER CARD
  ============================ */
.ad-placeholder-card {
  display: block;
  min-height: clamp(150px, 22vw, 210px);
  background: #1f2937;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  border: 1.5px solid rgba(16, 185, 129, 0.74);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .ad-placeholder-card[data-ad-type="sponsored_external"] .ad-placeholder-media img,
  .ad-placeholder-card[data-ad-type="video_popup"] .ad-placeholder-media img {
    animation: none;
  }
  .ad-placeholder-card[data-ad-type="site_offer"]::after {
    animation: none;
  }
}

.ad-placeholder-card[data-ad-zone="empty"] {
  margin-top: 18px;
}

.ad-placeholder-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

.ad-placeholder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ad-placeholder-card[data-ad-type="video_popup"] .ad-placeholder-media::before {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(36px, 6.5vw, 56px);
  height: clamp(36px, 6.5vw, 56px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 2px;
  font-size: clamp(16px, 2.8vw, 24px);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(1.5px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  z-index: 2;
}

.ad-placeholder-card[data-ad-type="sponsored_external"] .ad-placeholder-media img,
.ad-placeholder-card[data-ad-type="video_popup"] .ad-placeholder-media img {
  animation: ad-thumbnail-pulse 2.3s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes ad-thumbnail-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.ad-placeholder-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 999px;
  padding: 5px 10px;
}

.ad-placeholder-card[data-ad-type="site_offer"]::after {
  content: '👇';
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 3;
  font-size: clamp(36px, 4.5vw, 51px);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation: ad-site-offer-pointer-bounce 1.35s ease-in-out infinite;
}

@keyframes ad-site-offer-pointer-bounce {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-60deg);
    opacity: 0.92;
  }
  50% {
    transform: translate3d(4px, 5px, 0) rotate(-60deg);
    opacity: 1;
  }
}

.ad-video-popup {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
}

.ad-video-popup.is-visible {
  display: block;
}

.ad-video-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.ad-video-popup-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 860px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  background: #0b1220;
}

.ad-video-popup-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ad-video-aspect, 16 / 9);
  max-height: 78vh;
  background: #000;
}

.ad-video-popup-iframe {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  aspect-ratio: var(--ad-video-aspect, 16 / 9);
  max-height: 78vh;
  border: 0;
  background: #000;
}

.ad-video-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* ============================
   CARD TITLE (Full Width at Top)
   ============================ */
.card-title {
  display: block;
  width: 100%;
  font-size: clamp(14px, 3.2vw, 18px);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  order: -1;
}

/* ============================
   CARD BODY (Thumbnail + Content)
   ============================ */
.card-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  order: 1;
  min-height: 0;
  height: 100%;
}

/* ============================
   CARD THUMBNAIL (Left Side)
   ============================ */
.card-thumbnail {
  width: clamp(115px, 25vw, 230px);
  min-width: clamp(115px, 25vw, 230px);
  height: clamp(115px, 25vw, 230px); /* Match width for square aspect */
  flex-shrink: 0;
  background: #1a1f2e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 0 0 12px;
  position: relative;
}

.card-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
                transparent 0%, 
                rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

.card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-preview-card:hover .card-thumbnail img {
  transform: scale(1.08);
}

/* ============================
   CARD CONTENT BOX (Right Side)
   ============================ */
.card-content-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(12px, 2vw, 16px) clamp(12px, 2vw, 18px);
  background: rgba(255,255,255,0.03);
  border-left: none;
  position: relative;
}

/* ============================
   CARD TOP SECTION (Extras + Price)
   ============================ */
.card-top-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 16px);
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.card-extras-column {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.5vw, 4px);
  flex: 1;
  margin-top: clamp(-4px, -0.8vw, -2px);
}

/* ============================
   CARD BOTTOM ROW (Date/Time + Badge)
   ============================ */
.card-bottom-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
}

.card-datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.4vw, 4px);
  font-size: clamp(9px, 2.8vw, 16px);
  font-weight: 500;
  color: rgba(230,214,174,0.85);
  font-family: Arial, Helvetica, sans-serif;
}

/* ============================
   CARD DETAILS ROW (Extras + Payment)
   ============================ */
.card-details-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(10px, 1.8vw, 16px);
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-height: 0;
}

/* ============================
   CARD EXTRAS (Left Part)
   ============================ */
.card-extras {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vw, 9px);
  min-width: 0;
  flex-shrink: 1;
}

.card-extra {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: clamp(5px, 1vw, 7px);
  font-size: clamp(17px, 3.8vw, 24px);
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
}

.extra-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(12px, 2.3vw, 15px); /* Increased from 10-13px */
  letter-spacing: 0.05em;
  color: rgba(16,185,129,0.9);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.extra-value {
  font-weight: 500;
  color: #e6d6ae;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  font-family: Arial, Helvetica, sans-serif;
}

/* ============================
   CARD PAYMENT (Right Part)
   ============================ */
.card-payment {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(3px, 0.6vw, 5px);
  flex-shrink: 0;
}

.payment-amount {
  font-size: clamp(30px, 5.4vw, 42px); /* +50% from 20-28px */
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 8px rgba(16,185,129,0.3);
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.25));
  border: 2px solid rgba(16,185,129,0.4);
  border-radius: clamp(12px, 2vw, 18px);
  padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2.2vw, 18px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.2),
              inset 0 1px 2px rgba(255,255,255,0.1);
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(1px, 0.3vw, 3px);
  padding: clamp(2px, 0.5vw, 5px) clamp(3px, 0.6vw, 6px);
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: clamp(4px, 0.8vw, 7px);
  font-size: clamp(7px, 1.6vw, 11px);
  font-weight: 600;
  color: rgba(16,185,129,1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16,185,129,0.1);
  font-family: Arial, Helvetica, sans-serif;
  flex-shrink: 0;
}


/* ============================
   CARD FOOTER (Date + Time + Badge)
   ============================ */
.card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.8vw, 14px);
  padding-top: clamp(10px, 1.8vw, 14px);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: clamp(14px, 2.6vw, 18px); /* Increased from 12-15px */
  font-weight: 500;
  color: rgba(230,214,174,0.85);
  line-height: 1;
  flex-shrink: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.4vw, 11px);
  flex: 1;
}

.footer-date,
.footer-time {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 7px);
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.footer-divider {
  color: rgba(255,255,255,0.3);
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}

.footer-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================
   RESPONSIVE: TABLET (601-900px)
   ============================ */
@media (min-width: 601px) and (max-width: 900px) {
  .job-preview-card {
    max-width: 90vw;
  }
  
  .card-thumbnail {
    width: clamp(161px, 23vw, 207px);
    min-width: clamp(161px, 23vw, 207px);
    height: clamp(161px, 23vw, 207px); /* Match width */
  }
  
  .card-content-box {
    padding: 16px 15px;
    justify-content: center !important; /* Keep extras and date/time centered, not space-between */
  }
  
  .card-title {
    font-size: clamp(14px, 2.8vw, 17px);
  }
  
  .card-extra {
    font-size: clamp(16px, 3vw, 19px);
  }
  
  .extra-label {
    font-size: clamp(11px, 2.2vw, 14px); /* Increased */
  }
  
  .payment-amount {
    font-size: clamp(28px, 5.2vw, 37px); /* +50% */
    padding: clamp(7px, 1.4vw, 12px) clamp(11px, 2vw, 16px);
  }
  
  .payment-badge {
    font-size: clamp(12px, 2.5vw, 15px); /* Increased */
    padding: clamp(5px, 1vw, 7px) clamp(7px, 1.4vw, 10px);
  }
  
  .card-footer {
    font-size: clamp(13px, 2.6vw, 16px); /* Increased */
    padding-top: clamp(9px, 1.7vw, 12px);
    gap: clamp(9px, 1.7vw, 11px);
  }
}

/* ============================
   RESPONSIVE: 501-600px
   ============================ */
@media (max-width: 600px) and (min-width: 501px) {
  .job-preview-card {
    max-width: 96vw;
    margin: 0 auto 16px auto;
  }
  
  .card-thumbnail {
    width: clamp(138px, 28vw, 173px);
    min-width: clamp(138px, 28vw, 173px);
    height: clamp(138px, 28vw, 173px); /* Match width */
  }
  
  .card-content-box {
    padding: 14px 14px;
  }
  
  .card-title {
    font-size: clamp(15px, 3.2vw, 18px);
  }
  
  .card-details-row {
    flex-direction: row; /* Keep horizontal layout */
    gap: clamp(8px, 1.5vw, 12px);
    align-items: flex-start;
  }
  
  .card-extras {
    flex: 1; /* Allow extras to take available space */
    min-width: 0; /* Prevent overflow */
  }
  
  .card-payment {
    flex-shrink: 0; /* Prevent price from shrinking */
    margin-left: auto; /* Push to right */
  }
  
  .card-extra {
    font-size: clamp(14px, 3.1vw, 17px);
  }
  
  .extra-label {
    font-size: clamp(10px, 2.3vw, 12px); /* Increased */
  }
  
  .payment-amount {
    font-size: clamp(25px, 5.5vw, 33px); /* +50% */
    padding: clamp(6px, 1.3vw, 10px) clamp(10px, 1.9vw, 14px);
  }
  
  .payment-badge {
    font-size: clamp(11px, 2.6vw, 14px); /* Increased */
    padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 9px);
  }
  
  .card-footer {
    font-size: clamp(12px, 2.7vw, 15px); /* Increased */
    padding-top: clamp(8px, 1.6vw, 11px);
    gap: clamp(8px, 1.6vw, 10px);
  }
  
  .job-preview-card:hover {
    transform: none;
  }
}

/* ============================
   RESPONSIVE: 451-500px
   ============================ */
@media (max-width: 500px) and (min-width: 451px) {
  .job-preview-card {
    max-width: 98vw;
  }
  
  .card-thumbnail {
    width: clamp(115px, 25vw, 150px);
    min-width: clamp(115px, 25vw, 150px);
    height: clamp(115px, 25vw, 150px); /* Match width */
  }
  
  .card-content-box {
    padding: 12px 12px;
  }
  
  .card-title {
    font-size: clamp(14px, 3.4vw, 17px);
  }
  
  .card-extra {
    font-size: clamp(13px, 3.2vw, 16px);
  }
  
  .extra-label {
    font-size: clamp(9px, 2.4vw, 11px); /* Increased */
  }
  
  .payment-amount {
    font-size: clamp(24px, 5.7vw, 30px); /* +50% */
    padding: clamp(5px, 1.2vw, 9px) clamp(9px, 1.8vw, 13px);
  }
  
  .payment-badge {
    font-size: clamp(10px, 2.7vw, 13px); /* Increased */
    padding: clamp(4px, 0.9vw, 5px) clamp(5px, 1.3vw, 8px);
  }
  
  .card-footer {
    font-size: clamp(11px, 2.8vw, 14px); /* Increased */
    padding-top: clamp(8px, 1.5vw, 10px);
    gap: clamp(8px, 1.5vw, 9px);
  }
}

/* ============================
   RESPONSIVE: 401-450px (LARGE PHONES)
   ============================ */
@media (max-width: 450px) and (min-width: 401px) {
  .job-preview-card {
    max-width: 98vw;
  }
  
  .card-thumbnail {
    width: clamp(98px, 23vw, 127px);
    min-width: clamp(98px, 23vw, 127px);
    /* No fixed height - let it stretch to fill card-body like other viewports */
  }
  
  .card-content-box {
    padding: clamp(14px, 3.5vw, 18px) clamp(10px, 2.5vw, 14px);
  }
  
  .card-title {
    font-size: clamp(13px, 3.6vw, 16px);
  }
  
  .card-details-row {
    flex-direction: row; /* Keep horizontal */
    gap: clamp(6px, 1.5vw, 10px);
    align-items: flex-start;
  }
  
  .card-extras {
    flex: 1;
    min-width: 0;
  }
  
  .card-payment {
    flex-shrink: 0;
    margin-left: auto;
  }
  
  .card-extra {
    font-size: clamp(12px, 3.4vw, 16px);
  }
  
  .extra-label {
    font-size: clamp(9px, 2.5vw, 11px);
  }
  
  .payment-amount {
    font-size: clamp(22px, 5.8vw, 28px);
    padding: clamp(5px, 1.1vw, 8px) clamp(8px, 1.7vw, 12px);
    display: block; /* Ensure it's a block element */
  }
  
  .payment-badge {
    font-size: clamp(9px, 2.8vw, 12px);
    padding: clamp(3px, 0.8vw, 5px) clamp(5px, 1.1vw, 7px);
  }
  
  .card-footer {
    font-size: clamp(10px, 2.9vw, 13px);
    padding-top: clamp(10px, 2vw, 14px);
    gap: clamp(6px, 1.5vw, 9px);
  }
  
  /* STACK date/time into 2 lines for large phones */
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* MORE space between date and time */
  }
  
  .footer-divider {
    display: none;
  }
}

/* ============================
   RESPONSIVE: 321-400px (PHONES)
   ============================ */
@media (max-width: 400px) and (min-width: 321px) {
  .job-preview-card {
    width: 97vw;
    margin: 0 auto 12px auto;
  }
  
  .card-thumbnail {
    width: clamp(90px, 26vw, 120px);
    min-width: clamp(90px, 26vw, 120px);
    border-radius: 8px 0 0 8px;
  }
  
  .card-content-box {
    padding: 16px 10px;
  }
  
  .card-title {
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.25;
  }
  
  .card-extra {
    font-size: clamp(12px, 3.5vw, 14px);
  }
  
  .extra-label {
    font-size: clamp(8px, 2.6vw, 10px);
  }
  
  .payment-amount {
    font-size: clamp(21px, 6vw, 27px);
    padding: clamp(4px, 1vw, 7px) clamp(7px, 1.6vw, 11px);
  }
  
  .payment-badge {
    font-size: clamp(9px, 2.9vw, 11px);
    padding: clamp(3px, 0.7vw, 4px) clamp(5px, 1vw, 6px);
  }
  
  .card-footer {
    font-size: clamp(10px, 3vw, 12px);
    padding-top: clamp(10px, 2vw, 14px); /* MORE padding top */
    gap: 8px;
  }
  
  /* STACK date/time into 2 lines for phones */
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* MORE space between date and time */
  }
  
  .footer-divider {
    display: none;
  }
}

/* ============================
   RESPONSIVE: 321-340px (SMALL PHONES)
   ============================ */
@media (max-width: 340px) and (min-width: 321px) {
  .card-title {
    font-size: clamp(11px, 3.4vw, 14px);
    line-height: 1.2;
  }
}

/* ============================
   RESPONSIVE: ≤320px (SMALLEST PHONES)
   ============================ */
@media (max-width: 320px) {
  .job-preview-card {
    width: 95vw;
  }
  
  .card-thumbnail {
    width: clamp(75px, 25vw, 100px);
    min-width: clamp(75px, 25vw, 100px);
  }
  
  .card-content-box {
    padding: 14px 8px;
  }
  
  .card-title {
    font-size: clamp(10px, 3.3vw, 12px);
    line-height: 1.2;
  }
  
  .card-extra {
    font-size: clamp(11px, 3.6vw, 14px);
  }
  
  .extra-label {
    font-size: clamp(8px, 2.7vw, 10px);
  }
  
  .payment-amount {
    font-size: clamp(19px, 6.1vw, 25px);
    padding: clamp(4px, 0.9vw, 6px) clamp(6px, 1.5vw, 10px);
  }
  
  .payment-badge {
    font-size: clamp(8px, 3vw, 11px);
    padding: clamp(3px, 0.7vw, 4px) clamp(4px, 1vw, 6px);
  }
  
  .card-footer {
    font-size: clamp(9px, 3.1vw, 12px);
    padding-top: clamp(8px, 1.8vw, 12px); /* MORE padding top */
    gap: 6px;
  }
  
  /* STACK date/time into 2 lines for smallest phones */
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px; /* MORE space between date and time */
  }
  
  .footer-divider {
    display: none;
  }
  
  .card-extras {
    gap: clamp(4px, 1vw, 6px);
  }
}

/* ===================== END JOB PREVIEW CARDS - OPTION A ===================== */

.jobcat-header-spacer {
  font-weight: 700;
  color: #f3f3f3;
  margin-bottom: 4px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listing empty state (shown when no gig cards are available) */
.listing-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: clamp(320px, 85vw, 620px);
  margin: clamp(24px, 5vw, 52px) auto clamp(28px, 6vw, 64px);
  padding: clamp(20px, 4vw, 32px);
  border-radius: 16px;
  border: 2px dashed rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(26, 32, 44, 0.85));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 0 24px rgba(16, 185, 129, 0.18);
  color: #e6d6ae;
  font-family: Arial, Helvetica, sans-serif;
}

.listing-empty-state.is-visible {
  display: flex;
  animation: emptyStateFadeIn 0.5s ease-out;
}

.listing-empty-graphic {
  width: clamp(96px, 22vw, 180px);
  height: auto;
  margin-bottom: clamp(12px, 3vw, 18px);
  filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.35));
  animation: float 3.2s ease-in-out infinite;
}

.listing-empty-title {
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: clamp(8px, 2vw, 12px);
  letter-spacing: 0.5px;
}

.listing-empty-subtitle {
  font-size: clamp(18px, 4.2vw, 24px);
  color: rgba(230, 214, 174, 0.9);
  line-height: 1.7;
  max-width: 40ch;
}

@keyframes emptyStateFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listing-empty-state.is-visible,
  .listing-empty-graphic {
    animation: none;
  }
}
.job-preview-extras {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 49px;
  font-size: 0.97rem;
  color: #e6d6ae;        
  margin-top: 10px;
  margin-right: 5px;
}
.job-preview-extra1, .job-preview-extra2 {
  font-size: 0.95rem;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.job-preview-extra-label1, .job-preview-extra-label2 {
  font-size: 0.83rem;
  font-weight: 600;
  color: #bfc6d0;
  margin-right: 5px;
}
.job-preview-infoboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-width: 82px;
  height: 78px;
  justify-content: center;
}
.job-preview-infobox1, .job-preview-infobox2 {
  background: #d9d9d9;
  color: #363f4f;
  border-radius: 8px;
  padding: 2px 8px 2px 8px;
  min-width: 93px;
  text-align: center;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.job-preview-infobox1 .job-preview-price {
  font-size: 1.08rem;
  font-weight: 700;
}
.job-preview-infobox1 .job-preview-rate {
  font-size: 0.88rem;
  font-weight: 600;
}
.job-preview-infobox2 .job-preview-date {
  font-size: 0.99rem;
  font-weight: 700;
}
.job-preview-infobox2 .job-preview-time {
  font-size: 0.88rem;
  font-weight: 600;
}

/* Desktop Job Preview Card Enhancement (601px and above) */
@media (min-width: 601px) {
  .job-preview-card {
    max-width: clamp(650px, 75vw, 800px) !important; /* Significantly larger cards */
    min-height: clamp(160px, 20vh, 180px) !important; /* Much taller cards for full title display */
    margin: 0 auto clamp(18px, 2.5vh, 24px) auto !important; /* More spacing between cards */
    padding: 0 clamp(8px, 1.5vw, 12px) 0 0 !important; /* More right padding */
  }
  
  .job-preview-img {
    width: clamp(120px, 15vw, 140px) !important; /* Larger thumbnails */
    min-width: clamp(120px, 15vw, 140px) !important;
    height: clamp(160px, 20vh, 180px) !important; /* Match card height */
    margin-right: clamp(15px, 2vw, 20px) !important; /* More space after thumbnail */
  }
  
  .job-preview-content {
    height: clamp(130px, 18vh, 150px) !important; /* Much taller content area for full title */
    margin-right: clamp(12px, 2vw, 16px) !important;
  }
  
  .job-preview-title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important; /* Larger title */
    margin-bottom: clamp(8px, 1.5vh, 12px) !important;
    line-height: clamp(1.3, 1.6vh, 1.5) !important;
    white-space: normal !important; /* Allow wrapping for long titles */
    overflow: visible !important; /* Show full title */
    text-overflow: unset !important; /* Don't truncate */
    max-height: clamp(60px, 8vh, 80px) !important; /* Limit height but allow multiple lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Allow up to 3 lines */
    -webkit-box-orient: vertical !important;
  }
  
  .job-preview-extras {
    gap: clamp(60px, 8vw, 80px) !important; /* More space between extras */
    margin-top: clamp(12px, 1.5vh, 16px) !important;
  }
  
  .job-preview-extra1, .job-preview-extra2 {
    font-size: clamp(1.0rem, 2.2vw, 1.15rem) !important; /* Larger extras text */
  }
  
  .job-preview-extra-label1, .job-preview-extra-label2 {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important; /* Larger labels */
    margin-right: clamp(6px, 1vw, 8px) !important;
  }
  
  .job-preview-infoboxes {
    min-width: clamp(100px, 12vw, 120px) !important; /* Wider info section */
    height: clamp(140px, 18vh, 160px) !important; /* Much taller info section to match card */
    gap: clamp(12px, 1.5vh, 16px) !important; /* More space between info boxes */
    margin-right: clamp(8px, 1.5vw, 12px) !important;
  }
  
  .job-preview-infobox1, .job-preview-infobox2 {
    min-width: clamp(110px, 13vw, 130px) !important; /* Wider info boxes */
    padding: clamp(6px, 1vh, 8px) clamp(12px, 2vw, 16px) !important; /* More generous padding */
    border-radius: clamp(10px, 1.5vw, 12px) !important; /* Slightly larger border radius */
  }
  
  .job-preview-infobox1 .job-preview-price {
    font-size: clamp(1.25rem, 2.8vw, 1.45rem) !important; /* Larger price */
  }
  
  .job-preview-infobox1 .job-preview-rate {
    font-size: clamp(1.0rem, 2.2vw, 1.15rem) !important; /* Larger rate */
  }
  
  .job-preview-infobox2 .job-preview-date {
    font-size: clamp(1.1rem, 2.4vw, 1.25rem) !important; /* Larger date */
  }
  
  .job-preview-infobox2 .job-preview-time {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important; /* Larger time */
  }
}

@media (max-width: 700px) {
  .job-preview-card {
    /* OLD LAYOUT REMOVED - using new title-first column layout */
    margin: 0 auto 10px auto;
    max-width: 594px;
  }
  .job-preview-img {
    width: 28vw;
    min-width: 0;
    height: 28vw;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .job-preview-content {
    margin-left: 5px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 50;          
    height: 192px;  
  }
  
  .job-preview-title {
    font-size: 1.01rem;
    max-width: 100%;
    white-space: normal;
    text-overflow: unset;
    overflow: visible;
    line-height: 1.3;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .job-preview-extras {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .job-preview-extra1, .job-preview-extra2 {
    font-size: 0.95rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  
  .job-preview-infoboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-width: 78px;
    margin-right: 8px;
    height: 78px;
    justify-content: center;          
  }
  .job-preview-infobox1, .job-preview-infobox2 {
    background: #d9d9d9;
    color: #363f4f;
    border-radius: 8px;
    padding: 3px 8px 3px 8px;
    min-width: 93px;
    text-align: center;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .job-preview-infobox1 .job-preview-price {
    font-size: 1.08rem;
    font-weight: 700;
  }
  .job-preview-infobox1 .job-preview-rate {
    font-size: 0.88rem;
    font-weight: 600;
  }
  .job-preview-infobox2 .job-preview-date {
    font-size: 0.99rem;
    font-weight: 700;
  }
  .job-preview-infobox2 .job-preview-time {
    font-size: 0.88rem;
    font-weight: 600;
  }
}
@media (max-width: 600px) {
  .job-preview-card {
    /* OLD LAYOUT REMOVED - using new title-first column layout */
    max-width: 100vw;
    width: 96vw;
    margin: 0 auto 10px auto;
    border-radius: 8px;
  }
  
  /* Pay type-based background colors for 600px breakpoint */
  .job-preview-card.pay-per-job {
    background: #363f4f; /* Blue-gray for Per Job */
  }
  
  .job-preview-card.pay-per-job-alt {
    background: #2c3545; /* Subtle darker blue-gray for consecutive Per Job */
  }
  
  .job-preview-card.pay-per-hour {
    background: #3f4f36; /* Green for Per Hour */
  }
  
  .job-preview-card.pay-per-hour-alt {
    background: #35442d; /* Subtle darker green for consecutive Per Hour */
  }
  
  .job-preview-card:hover, .job-preview-card:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: none;
    outline: none;
  }
  
  .job-preview-img {
    width: 25vw;
    min-width: 0;
    height: 28vw;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .job-preview-content {
    margin-left: 5px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 0;          
    height: 150px;  
  }
  
  .job-preview-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    max-width: 100%;
    white-space: normal;
    text-overflow: unset;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .job-preview-extras {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .job-preview-extra1, .job-preview-extra2 {
    font-size: 0.95rem;
    font-family: Arial, Helvetica, sans-serif;
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
  }
  
  .job-preview-extra-label1, .job-preview-extra-label2 {
    font-size: 0.83rem;
    font-weight: 500;
    color: #bfc6d0;
    margin-right: 2px;          
  }
  .job-preview-infoboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-width: 70px;
    margin-right: 5px;
    height: 78px;
    justify-content: center;          
  }
  .job-preview-infobox1, .job-preview-infobox2 {
    background: #d9d9d9;
    color: #363f4f;
    border-radius: 8px;
    padding: 2px 0px 5px 0px;
    min-width: 75px;
    width: 96px;
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    gap: 3px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .job-preview-infobox1 .job-preview-price {
    font-size: 1.25rem;
    font-weight: 700;        
  }
  .job-preview-infobox1 .job-preview-rate {
    font-size: 0.88rem;
    font-weight: 600;
  }
  .job-preview-infobox2 .job-preview-date {
    font-size: .99rem;
    font-weight: 700;
  }
  .job-preview-infobox2 .job-preview-time {
    font-size: 0.78rem;        
    font-weight: 600;
  }
}

/* LEGACY CARD STYLES REMOVED - 411px breakpoint */

/* LEGACY CARD STYLES REMOVED - 375px breakpoint */

/* LEGACY CARD STYLES REMOVED - 360px breakpoint */

/* LEGACY CARD STYLES REMOVED - 320px breakpoint */

/* ===================== END JOB PREVIEW & JOB PAGE STYLES ===================== */

.jobcat-header-spacer {
  height: clamp(60px, 10vw, 75px); /* Use vw not vh - shrinks on smaller screens */
}

/* Desktop optimization for header spacer (601px and above) */
/* REMOVED - Now using single clamp() rule in base .jobcat-header-spacer */



@media (max-width: 600px) {
  body {
    padding: 72px 0 0 0; /* Add top padding for mobile fixed header */
  }
  
  .jobcat-listheader {
    height: 68px;
    padding-right: 5px;
  }
  
  .jobcat-servicemenu {
    width: clamp(120px, 65vw, 238px); /* Restored normal jobcat dropdown */
    height: clamp(38px, 12vh, 49px);
  }
  
  .jobcat-servicename {
    width: clamp(120px, 65vw, 238px);
    height: 47px;
    font-size: 22px;
    padding-left: 12px;
    padding-right: 8px; 
  }

  /* Fix the ACTUAL dropdowns user has been asking about */
  .region-menu, .city-menu, .pay-menu {
    width: clamp(90px, 25vw, 130px) !important; /* Smaller so 3 dropdowns + gaps fit with margins */
    height: clamp(26px, 6vh, 30px) !important;
    font-size: clamp(12px, 3vw, 16px) !important;
    padding: clamp(3px, 1vw, 4px) clamp(8px, 2vw, 10px) !important;
  }

  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(90px, 25vw, 130px) !important; /* Match smaller dropdowns */
    font-size: clamp(11px, 2.5vw, 14px) !important;
  }
  
  .city-menu-overlay {
    max-height: clamp(60px, 18vh, 100px) !important; /* FORCE short height */
  }
  
  .jobcat-headerbuttons {
    width: 149px;
    margin-right: 5px; 
  }
  
  .jobcat-headerbutton {
    width: 45px;
    height: 45px;
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .jobcat-headerbutton img {
    height: 35px;
  }

  /* Hide scrollbar for mobile */
  body {
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  body::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }

  /* Modal text wrapping prevention for 320px - controlled by JavaScript auto-resize */
  .jobcat-servicemenu-overlay a {
    /* font-size: clamp(1.15rem, 4.5vw, 1.4rem) !important; */ /* Removed - controlled by JavaScript */
    font-size: 1.4rem !important; /* Fallback for browsers that don't execute JavaScript properly */
    letter-spacing: 0px !important;
    padding: clamp(3px, 0.8vw, 4px) 0 clamp(3px, 0.8vw, 4px) clamp(6px, 1.5vw, 8px) !important;
  }

  .jobcat-region-menu-overlay li,
  .jobcat-city-menu-overlay li,
  .jobcat-pay-menu-overlay li {
    font-size: clamp(14px, 4vw, 16px) !important;
    letter-spacing: 0px !important;
    padding: clamp(3px, 0.8vw, 4px) clamp(6px, 1.5vw, 8px) !important;
  }
}

/* Medium Mobile Screens (401px to 480px) - Optimize 411px viewport */
@media (max-width: 480px) and (min-width: 401px) {
  .sortmenus {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(105px, 26vw, 125px) !important; /* Reduced width for better fit with margins */
    height: clamp(28px, 6vh, 30px) !important; /* Reduced height for smaller buttons */
    font-size: clamp(15px, 3.5vw, 16px) !important; /* Slightly reduced font size */
    padding: clamp(3px, 0.8vw, 4px) clamp(8px, 2vw, 10px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(105px, 26vw, 125px) !important; /* Match smaller dropdown width */
    font-size: clamp(14px, 3.2vw, 15px) !important; /* Slightly reduced overlay font size */
  }
  
  .city-menu-overlay {
    max-height: clamp(60px, 18vh, 100px) !important; /* FORCE short height */
  }
  
  .region-menu-list li, .city-menu-list li, .pay-menu-list li {
    font-size: clamp(14px, 3.2vw, 15px) !important; /* Match overlay font size */
    padding: clamp(4px, 1.2vw, 5px) 0 !important; /* Reduced padding for tighter list */
  }
}

/* Small Mobile Screens (384px viewport optimization) */
@media (max-width: 411px) and (min-width: 376px) {
  .sortmenus {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(100px, 28vw, 120px) !important; /* Smaller for small screens */
    height: clamp(24px, 5vh, 28px) !important;
    font-size: clamp(13px, 3vw, 15px) !important; /* Increased to match overlay font size */
    padding: clamp(2px, 0.8vw, 3px) clamp(6px, 1.5vw, 8px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(100px, 28vw, 120px) !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
  }
}

/* Small Mobile Screens (360px viewport optimization) */
@media (max-width: 375px) and (min-width: 351px) {
  .sortmenus {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(110px, 32vw, 125px) !important; /* Significantly increased width */
    height: clamp(30px, 7vh, 34px) !important; /* Significantly increased height */
    font-size: clamp(16px, 4vw, 18px) !important; /* Much larger font size for dropdown buttons */
    padding: clamp(4px, 1vw, 5px) clamp(8px, 2vw, 10px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(110px, 32vw, 125px) !important; /* Match larger dropdown width */
    font-size: clamp(15px, 3.8vw, 17px) !important; /* Much larger overlay font size */
  }
  
  .region-menu-list li, .city-menu-list li, .pay-menu-list li {
    font-size: clamp(15px, 3.8vw, 17px) !important; /* Ensure list items match overlay font size */
    padding: clamp(5px, 1.5vw, 7px) 0 !important; /* Increased padding for better touch targets */
  }
}

/* Small Mobile Screens (350px and below) */
@media (max-width: 350px) {
  .region-menu, .city-menu, .pay-menu {
    width: clamp(100px, 28vw, 120px) !important; /* Smaller for small screens */
    height: clamp(24px, 5vh, 28px) !important;
    font-size: clamp(13px, 3vw, 15px) !important; /* Increased to match overlay font size */
    padding: clamp(2px, 0.8vw, 3px) clamp(6px, 1.5vw, 8px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(100px, 28vw, 120px) !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
  }
}

/* iPhone 7 and similar (375px and below) */
@media (max-width: 375px) {
  .region-menu, .city-menu, .pay-menu {
    width: clamp(90px, 27vw, 110px) !important; /* Optimized for 375px screens */
    height: clamp(22px, 5vh, 26px) !important;
    font-size: clamp(12px, 2.8vw, 14px) !important; /* Increased to match overlay font size */
    padding: clamp(2px, 0.7vw, 3px) clamp(5px, 1.3vw, 7px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(90px, 27vw, 110px) !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }
}

/* Small Screens (360px and below) */
@media (max-width: 360px) {
  body {
    padding: 68px 0 0 0 !important; /* Adjusted body padding to show first borderline */
  }
  
  .jobcat-sort-header {
    top: 68px !important; /* Adjusted to match body padding */
    z-index: 50 !important; /* Reduced z-index to allow jobcat modal to appear above */
  }
  
  .sortmenus {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(95px, 28vw, 110px) !important; /* Increased width slightly */
    height: clamp(22px, 5vh, 26px) !important; /* Reduced height slightly */
    font-size: clamp(13px, 3.2vw, 15px) !important; /* Keep font size */
    padding: clamp(2px, 0.6vw, 3px) clamp(5px, 1.6vw, 7px) !important;
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(95px, 28vw, 110px) !important; /* Match increased dropdown width */
    font-size: clamp(12px, 3vw, 14px) !important; /* Keep overlay font size */
  }
  
  .region-menu-list li, .city-menu-list li, .pay-menu-list li {
    font-size: clamp(12px, 3vw, 14px) !important; /* Match overlay font size */
    padding: clamp(3px, 1vw, 5px) 0 !important; /* Keep padding */
  }
}

/* Removed - using base responsive rule instead */

/* Ultra Small Screens (320px and below) - Optimized layout */
@media (max-width: 320px) {
  body {
    padding: 66px 0 0 0 !important; /* Increased to show first borderline */
  }
  
  .jobcat-sort-header {
    top: 66px !important; /* Match increased body padding */
  }
  
  .jobcat-servicemenu {
    width: clamp(140px, 50vw, 180px) !important; /* Increased width to prevent text wrapping */
    height: 40px !important; /* Reduce height */
  }
  
  .jobcat-servicename {
    width: clamp(140px, 50vw, 180px) !important; /* Match increased servicemenu width */
    height: 38px !important; /* Match reduced servicemenu height */
    font-size: clamp(17px, 4vw, 21px) !important; /* Increased by 3px equivalent */
    padding-left: 6px !important; /* Reduce padding */
    padding-right: 4px !important; /* Reduce padding */
  }
  
  .jobcat-servicemenu-overlay {
    width: clamp(200px, 60vw, 220px) !important; /* Increased width for better text fitting */
    left: -5px !important;
  }

  .sortmenus {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .region-menu, .city-menu, .pay-menu {
    width: clamp(85px, 28vw, 105px) !important; /* Increased size for better usability */
    height: clamp(22px, 5vh, 26px) !important; /* Increased height */
    font-size: clamp(12px, 3.2vw, 15px) !important; /* Increased font size for better readability */
    padding: clamp(2px, 0.8vw, 3px) clamp(4px, 1.2vw, 6px) !important; /* Better padding */
  }
  
  .region-menu-overlay, .city-menu-overlay, .pay-menu-overlay {
    width: clamp(85px, 28vw, 105px) !important; /* Match increased button width */
    font-size: clamp(11px, 2.8vw, 14px) !important; /* Increased overlay font size */
  }
  
  .jobcat-servicemenu-overlay a {
    /* font-size: clamp(17px, 4vw, 21px) !important; */ /* Removed - controlled by JavaScript auto-resize */
  }
  
  .jobcat-headerbuttons {
    width: 115px !important; /* Slightly wider for 320px */
    margin-right: 2px !important;
    gap: 5px !important;
  }
  
  .jobcat-headerbutton {
    width: 34px !important; /* Slightly larger bubbles */
    height: 34px !important;
    font-size: 10px !important; /* Readable text */
    padding: 2px !important;
  }
  
  .jobcat-headerbutton img {
    height: 22px !important; /* Legacy support - match icon size */
  }
  
  .jobcat-listheader {
    height: 62px !important; /* Reduce overall header height */
    padding-right: 2px !important; /* Reduce padding */
  }
  
  /* Removed - using base responsive rule instead */
}

/* ===================== REGION PICKER MODAL OVERLAY ===================== */

.region-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: none;
  align-items: flex-start; /* Position modals higher */
  justify-content: center;
  padding-top: clamp(60px, 10vh, 100px); /* Add top padding */
}

.region-picker-overlay.show {
  display: flex;
}

.region-picker-modal {
  background: #232b36;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 24px 24px 24px;
  width: clamp(280px, 80vw, 400px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.region-picker-title {
  font-size: 1.3rem;
  color: #10b981;
  margin-bottom: 18px;
  font-weight: bold;
  text-align: center;
}

.region-picker-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-height: 320px;
  min-height: 200px;
  overflow-y: auto;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  margin-bottom: 8px;
  border-radius: 10px;
  background: #232b36;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.region-picker-list::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Webkit browsers */
}

.region-picker-item {
  background: #434a58;
  color: #fff;
  border: none;
  border-bottom: 1px solid #2d3748;
  border-radius: 0;
  font-size: 1.2rem;
  padding: 18px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  width: 100%;
  text-align: center;
}

.region-picker-item:last-child {
  border-bottom: none;
}

.region-picker-item:hover, .region-picker-item:focus {
  background: #10b981;
  color: #1f2937;
}

.region-picker-item.active {
  background: #10b981;
  color: #1f2937;
  font-weight: bold;
}

.region-picker-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #ffe6b3;
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 411px) {
  .region-picker-modal {
    min-width: 0;
    padding: 18px 6px 12px 6px;
  }
  .region-picker-list {
    max-height: 240px;
    min-height: 160px;
  }
  .region-picker-item {
    font-size: 1rem;
    padding: 12px 0;
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
  .region-picker-title {
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
}

/* ===================== CITY PICKER MODAL OVERLAY ===================== */

.city-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: none;
  align-items: flex-start; /* Position modals higher */
  justify-content: center;
  padding-top: clamp(60px, 10vh, 100px); /* Add top padding */
}

.city-picker-overlay.show {
  display: flex;
}

.city-picker-modal {
  background: #232b36;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 24px 24px 24px;
  width: clamp(300px, 85vw, 450px);
  min-height: 320px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.city-picker-title {
  font-size: 1.3rem;
  color: #10b981;
  margin-bottom: 18px;
  font-weight: bold;
  text-align: center;
}

.city-picker-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-height: 360px;
  min-height: 240px;
  overflow-y: auto;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  margin-bottom: 8px;
  border-radius: 10px;
  background: #232b36;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.city-picker-list::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Webkit browsers */
}

.city-picker-item {
  background: #434a58;
  color: #fff;
  border: none;
  border-bottom: 1px solid #2d3748;
  border-radius: 0;
  font-size: 1.25rem;
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  width: 100%;
  text-align: center;
}

.city-picker-item:last-child {
  border-bottom: none;
}

.city-picker-item:hover, .city-picker-item:focus {
  background: #10b981;
  color: #1f2937;
}

.city-picker-item.active {
  background: #10b981;
  color: #1f2937;
  font-weight: bold;
}

.city-picker-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #ffe6b3;
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 411px) {
  .city-picker-modal {
    min-width: 0;
    padding: 18px 6px 12px 6px;
    max-height: 75vh;
  }
  .city-picker-list {
    max-height: 280px;
    min-height: 180px;
  }
  .city-picker-item {
    font-size: 1.1rem;
    padding: 10px 0;
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
  .city-picker-title {
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
}

/* ===================== PAY PICKER MODAL OVERLAY ===================== */

.pay-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.pay-picker-modal {
  background: #232b36;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 24px 24px 24px;
  width: clamp(280px, 80vw, 380px);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pay-picker-title {
  font-size: 1.3rem;
  color: #ffe6b3;
  margin-bottom: 18px;
  font-weight: bold;
  text-align: center;
}

.pay-picker-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-height: 180px;
  min-height: 140px;
  overflow-y: auto;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  margin-bottom: 8px;
  border-radius: 10px;
  background: #232b36;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.pay-picker-list::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Webkit browsers */
}

.pay-picker-item {
  background: #434a58;
  color: #fff;
  border: none;
  border-bottom: 1px solid #2d3748;
  border-radius: 0;
  font-size: 1.2rem;
  padding: 18px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  width: 100%;
  text-align: center;
}

.pay-picker-item:last-child {
  border-bottom: none;
}

.pay-picker-item:hover, .pay-picker-item:focus {
  background: #ffe6b3;
  color: #232b36;
}

.pay-picker-item.active {
  background: #ffe6b3;
  color: #232b36;
  font-weight: bold;
}

.pay-picker-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #ffe6b3;
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 411px) {
  .pay-picker-modal {
    min-width: 0;
    padding: 18px 6px 12px 6px;
    min-height: 200px;
  }
  .pay-picker-list {
    max-height: 150px;
    min-height: 120px;
  }
  .pay-picker-item {
    font-size: 1rem;
    padding: 12px 0;
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
  .pay-picker-title {
    font-family: Arial, sans-serif !important; /* Ensure Arial on mobile */
  }
}

/* ===================== SEARCH BAR IN HEADER ===================== */

.search-bar-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 12px);
  padding: 0 clamp(14px, 2.5vw, 20px);
  background: #1f2937;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}

.search-bar-container.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

.search-bar-input {
  flex: 1;
  max-width: clamp(300px, 65vw, 700px);
  background: #111827;
  border: 2px solid #374151;
  border-radius: clamp(8px, 1.5vw, 12px);
  padding: clamp(10px, 2vw, 14px) clamp(14px, 2.5vw, 18px);
  font-size: clamp(14px, 3vw, 16px);
  color: #fff;
  outline: none;
  transition: all 0.3s ease;
  margin-left: clamp(16px, 4vw, 24px);
  margin-right: clamp(8px, 2vw, 12px);
}

@media (max-width: 600px) {
  .search-bar-input {
    max-width: clamp(250px, 60vw, 400px);
    margin-left: clamp(20px, 5vw, 30px);
    margin-right: clamp(10px, 3vw, 16px);
  }
}

@media (max-width: 400px) {
  .search-bar-input {
    max-width: clamp(200px, 55vw, 300px);
    margin-left: clamp(24px, 6vw, 32px);
    margin-right: clamp(12px, 3vw, 16px);
  }
}

.search-bar-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.search-bar-input::placeholder {
  color: #6b7280;
}

.search-bar-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: clamp(28px, 6vw, 36px);
  cursor: pointer;
  padding: 0;
  width: clamp(36px, 7vw, 44px);
  height: clamp(36px, 7vw, 44px);
  display: flex;
  align-items: center;
  margin-left: clamp(32px, 8vw, 48px);
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
}

.search-bar-close:hover {
  color: #fff;
  background: rgba(16, 185, 129, 0.2);
}

.search-bar-icon {
  font-size: clamp(18px, 4vw, 24px);
  margin-right: clamp(16px, 4vw, 28px);
  flex-shrink: 0;
}

/* Small Screens (321px to 360px) - Additional constraints */
@media (max-width: 360px) and (min-width: 321px) {
  .jobcat-servicemenu {
    width: clamp(145px, 48vw, 170px) !important; /* Narrower to prevent overlap with icons */
    height: 45px !important;
  }
  
  .jobcat-servicename {
    width: clamp(145px, 48vw, 170px) !important;
    height: 43px !important;
    font-size: clamp(18px, 4.2vw, 22px) !important; /* Slightly smaller text */
    padding-left: 8px !important;
    padding-right: 6px !important;
  }
  
  .jobcat-servicemenu-overlay {
    width: clamp(220px, 65vw, 240px) !important; /* Increased width for better text fitting */
    left: -5px !important;
  }
  
  .jobcat-servicemenu-overlay a {
    /* font-size: clamp(20px, 4.5vw, 24px) !important; */ /* Removed - controlled by JavaScript auto-resize */
  }
  
  .jobcat-headerbuttons {
    width: 149px !important; /* Fixed: Match perfect 411-361px range */
    margin-right: 5px !important;
  }
  
  .jobcat-headerbutton {
    width: 45px !important; /* Fixed: Match perfect 411-361px range */
    height: 45px !important;
    font-size: 12px !important;
  }
  
  .jobcat-headerbutton img {
    height: 35px !important; /* Legacy support */
  }
  
  .jobcat-listheader {
    height: 64px !important;
    padding-right: 3px !important;
  }
  
  body {
    padding: 70px 0 0 0 !important;
  }
}

/* ============================================
   LOADING MODAL - FUN MINIMAL ANIMATION
   ============================================ */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
}

.loading-overlay.show {
  display: flex;
  flex-direction: column;
}

/* Fun bouncing emojis */
.loading-overlay::before {
  content: '🔥 ⚡ 🚀';
  font-size: clamp(32px, 8vw, 44px);
  margin-bottom: clamp(16px, 4vw, 24px);
  letter-spacing: clamp(12px, 3vw, 20px);
  animation: emojiFloat 2s ease-in-out infinite;
}

.loading-spinner {
  position: relative;
  width: clamp(64px, 16vw, 80px);
  height: clamp(64px, 16vw, 80px);
  border: clamp(4px, 1vw, 5px) solid rgba(16, 185, 129, 0.2);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 clamp(20px, 5vw, 30px) rgba(16, 185, 129, 0.3);
}

/* Center emoji in spinner */
.loading-spinner::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(24px, 6vw, 32px);
  animation: sparkle 1.2s ease-in-out infinite;
}

.loading-text {
  margin-top: clamp(24px, 6vw, 32px);
  color: #10b981;
  font-size: clamp(22px, 5.5vw, 28px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 clamp(20px, 5vw, 30px) rgba(16, 185, 129, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.3);
  animation: textPulse 1.5s ease-in-out infinite;
}

/* Pulsing dots below text */
.loading-text::after {
  content: '';
  display: block;
  margin: clamp(12px, 3vw, 16px) auto 0;
  width: clamp(8px, 2vw, 10px);
  height: clamp(8px, 2vw, 10px);
  background: #10b981;
  border-radius: 50%;
  box-shadow: 
    clamp(-16px, -4vw, -20px) 0 0 #10b981,
    clamp(16px, 4vw, 20px) 0 0 #10b981;
  animation: dotsPulse 1.4s ease-in-out infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes sparkle {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); }
}

@keyframes textPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes dotsPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}