/*
 * HMG Job Board v4 - Modern CSS Framework
 */

/* Font Awesome Font Definition for v4 */
@font-face {
  font-family: 'HMGJBFontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  <!--#if get_globalvar CLIENT_JB_PRIMARY_COLOR-->
  --hmg-jb-v4-primary: ###get_globalvar CLIENT_JB_PRIMARY_COLOR###;
  <!--#endif-->
  /* Template-Inherited Colors with ~openSAS Fallbacks */
  --hmg-jb-v4-primary: #2563eb; /* Fallback - overridden by CLIENT_JB_PRIMARY_COLOR */
  --hmg-jb-v4-primary-hover: #1d4ed8; /* Fallback - calculated from primary */
  --hmg-jb-v4-secondary: #6b7280; /* Fallback - overridden by CLIENT_JB_SECONDARY_COLOR */
  --hmg-jb-v4-secondary-alpha: rgba(107, 114, 128, 0.1); /* Fallback - calculated from secondary */
  --hmg-jb-v4-secondary-light: rgba(107, 114, 128, 0.3); /* Fallback - calculated from secondary */
  --hmg-jb-v4-background: #ffffff; /* Fallback - overridden by CLIENT_JB_BACKGROUND_COLOR */
  
  /* ~openSAS Standard Colors (Safe Fallbacks) */
  --hmg-jb-v4-white: #ffffff;
  --hmg-jb-v4-gray-50: #f9fafb;
  --hmg-jb-v4-gray-100: #f3f4f6;
  --hmg-jb-v4-gray-200: #e5e7eb;
  --hmg-jb-v4-gray-300: #d1d5db;
  --hmg-jb-v4-gray-400: #9ca3af;
  --hmg-jb-v4-gray-500: #6b7280;
  --hmg-jb-v4-gray-600: #4b5563;
  --hmg-jb-v4-gray-700: #374151;
  --hmg-jb-v4-gray-900: #111827;
  
  /* Remote Work - Green */
  --hmg-jb-v4-green-100: #dcfce7;
  --hmg-jb-v4-green-700: #15803d;
  
  /* Save/Heart - Red */
  --hmg-jb-v4-red-50: #fef2f2;
  --hmg-jb-v4-red-600: #dc2626;
  
  /* Typography Scale */
  --hmg-jb-v4-text-xs: 0.75rem;
  --hmg-jb-v4-text-sm: 0.875rem;
  --hmg-jb-v4-text-base: 1rem;
  --hmg-jb-v4-text-lg: 1.125rem;
  --hmg-jb-v4-text-xl: 1.25rem;
  
  /* Spacing Scale */
  --hmg-jb-v4-space-1: 0.25rem;
  --hmg-jb-v4-space-2: 0.5rem;
  --hmg-jb-v4-space-3: 0.75rem;
  --hmg-jb-v4-space-4: 1rem;
  --hmg-jb-v4-space-6: 1.5rem;
  --hmg-jb-v4-space-8: 2rem;
  
  /* Border Radius */
  --hmg-jb-v4-radius-sm: 0.25rem;
  --hmg-jb-v4-radius-md: 0.375rem;
  --hmg-jb-v4-radius-lg: 0.5rem;
  --hmg-jb-v4-radius-xl: 0.75rem;
  
  /* Shadows */
  --hmg-jb-v4-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --hmg-jb-v4-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --hmg-jb-v4-transition: all 0.2s ease;
}

 a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
}

.hmg-jb-v4-container {
  font-family: inherit; /* inherit from client template */
  line-height: 1.5;
  color: var(--hmg-jb-v4-gray-700);
  background: transparent;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#password_form .hmg-jb-input-group, #magic_form .hmg-jb-input-group {
  position: relative;
  width: 100%;
}

#password_form .hmg-jb-input-group-addon, #magic_form .hmg-jb-input-group-addon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hmg-jb-v4-primary);
  background: none;
  border: none;
  z-index: 4;
}

.hmg-jb-v4-container .hmg-jb-v4-social-login-label {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

#password_form input, #magic_form input {
  padding-left: 2.5rem;
}

/* Scoped reset to neutralize legacy styles within v4 only */
.hmg-jb-v4-container *,
.hmg-jb-v4-container *::before,
.hmg-jb-v4-container *::after {
  box-sizing: border-box;
}
.hmg-jb-v4-container h1,
.hmg-jb-v4-container h2,
.hmg-jb-v4-container h3,
.hmg-jb-v4-container h4,
.hmg-jb-v4-container h5,
.hmg-jb-v4-container h6 {
  margin: 0;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  font-family: inherit;
}
.hmg-jb-v4-container p { margin: 0; }
.hmg-jb-v4-container p.hmg-jb-v4-form-static{
  padding-top: 0;
}
.hmg-jb-v4-container img:not(.hmg-jb-v4-category-banner-img):not(.hmg-jb-v4-location-banner-img):not(.hmg-jb-v4-recruiter-banner-image) { max-width: 100%; height: auto; }

.hmg-jb-v4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px !important;
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
  border: none;
  border-radius: 8px !important;
  font-size: 14px !;
  font-weight: 600 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Shield against legacy button class collisions inside v4 container */
.hmg-jb-v4-container .hmg-jb-v4-btn {
  background: var(--hmg-jb-v4-primary) ;
  /* color: #fff !important; */
}

.hmg-jb-v4-btn:hover {
  background: var(--hmg-jb-v4-primary);
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  opacity: 0.9;
}

.hmg-jb-v4-btn-primary {
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
  border: none !important;
}

.hmg-jb-v4-btn-primary:hover {
  background: var(--hmg-jb-v4-primary-hover);
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  opacity: 0.9;
}

.hmg-jb-v4-btn-primary:focus {
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.hmg-jb-v4-btn-primary:visited {
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
}

.hmg-jb-v4-apply-btn-full {
  width: 100%;
  justify-content: center;
}

.hmg-jb-v4-apply-btn-full .jbfa-chevron-down {
  transition: transform 0.2s ease;
}

.hmg-jb-v4-apply-dropdown-container.open .hmg-jb-v4-apply-btn-full .jbfa-chevron-down {
  transform: rotate(180deg);
}

.hmg-jb-v4-text-link {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
  cursor: pointer;
}

.hmg-jb-v4-text-link:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

/* ============================================================================
   INPUT FIELD STANDARDIZATION (BOLT CONSISTENCY)
   ============================================================================ */

/* All Input Fields - Match Select Styling */
.hmg-jb-v4-container .hmg-jb-v4-input,
.hmg-jb-v4-container .hmg-jb-v4-select,
.hmg-jb-v4-container .hmg-jb-v4-multiselect-input,
.hmg-jb-v4-search-card input.hmg-jb-v4-input,
.hmg-jb-v4-search-card select.hmg-jb-v4-select {
  width: 100% !important;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4) !important;
  border: 1px solid var(--hmg-jb-v4-gray-200) !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  font-size: 16px !important;
  color: #333 !important;
  background: var(--hmg-jb-v4-white) !important;
  transition: var(--hmg-jb-v4-transition) !important;
  line-height: 1.5 !important;
}

.hmg-jb-v4-input:focus,
.hmg-jb-v4-select:focus,
.hmg-jb-v4-multiselect-input:focus {
  outline: none;
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: none;
}

.hmg-jb input[type="radio"]:checked + span:before,
.hmg-jb input[type="checkbox"]:checked + span:before {
  accent-color: var(--hmg-jb-v4-primary);
  background: var(--hmg-jb-v4-primary);
}

.hmg-jb-alert-info {
  background-color: #f2f2f2;
  border-color: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-input::placeholder {
  color: #999;
}

/* Select Specific Styling */
.hmg-jb-v4-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

/* Multiselect Specific Styling */
.hmg-jb-v4-multiselect-input {
  cursor: pointer;
  padding-right: 40px;
}

/* ============================================================================
   ADVANCED SEARCH COMPONENTS
   ============================================================================ */

.hmg-jb-v4-advanced-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-4);
}

@media (min-width: 768px) {
  .hmg-jb-v4-advanced-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hmg-jb-v4-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-field-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
}

/* Keep icon + text on one line (override any form label { display: block } ) */
label.hmg-jb-v4-field-label {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
}

.hmg-jb-v4-field-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--hmg-jb-v4-gray-500);
}

.hmg-jb-v4-multiselect-wrapper {
  position: relative;
}

.hmg-jb-v4-multiselect-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--dropdown-arrow, var(--text-muted, #9ca3af));
  pointer-events: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-multiselect-input:focus + .hmg-jb-v4-multiselect-arrow {
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-multiselect-container {
  position: relative;
}

.hmg-jb-v4-multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 200px;
  overflow-y: auto;
  display: none;
  margin-top: 4px;
}

.hmg-jb-v4-option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--hmg-jb-v4-gray-700);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
  transition: all 0.2s ease;
  line-height: 1.5;
  background: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-option:hover {
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-option:last-child {
  border-bottom: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.hmg-jb-v4-option:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.hmg-jb-v4-option[aria-selected="true"] {
  background: var(--hmg-jb-v4-primary) !important;
  color: var(--hmg-jb-v4-white) !important;
  font-weight: 500;
}

/* Database-Generated Options (from get_post_field_options) */
.hmg-jb-v4-multiselect-dropdown .option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--hmg-jb-v4-gray-700);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
  transition: all 0.2s ease;
  line-height: 1.5;
  background: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-multiselect-dropdown .option:hover {
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-multiselect-dropdown .option:last-child {
  border-bottom: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.hmg-jb-v4-multiselect-dropdown .option:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.hmg-jb-v4-multiselect-dropdown .option[aria-selected="true"],
.hmg-jb-v4-multiselect-dropdown .option.selected {
  background: var(--hmg-jb-v4-primary) !important;
  color: var(--hmg-jb-v4-white) !important;
  font-weight: 500;
}

.hmg-jb-v4-multiselect-input.has-selection {
  border-color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-multiselect-input.has-selection .hmg-jb-v4-multiselect-placeholder {
  color: var(--hmg-jb-v4-gray-900);
  font-weight: 500;
}

/* Filter Actions Inline */
.hmg-jb-v4-filter-actions-inline {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-filter-select-all,
.hmg-jb-v4-filter-clear-all {
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 500;
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-filter-select-all:hover,
.hmg-jb-v4-filter-clear-all:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

.hmg-jb-v4-filter-separator {
  color: var(--hmg-jb-v4-gray-400);
  font-size: var(--hmg-jb-v4-text-xs);
}

/* Advanced Search Actions (Bolt Pattern) */
.hmg-jb-v4-advanced-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--hmg-jb-v4-space-6);
  padding-top: var(--hmg-jb-v4-space-4);
  border-top: 1px solid var(--border-color, var(--hmg-jb-v4-gray-200));
}

@media (max-width: 767px) {
  .hmg-jb-v4-advanced-actions {
  flex-direction: column;
    gap: var(--hmg-jb-v4-space-3);
  align-items: stretch;
  }
}

/* ============================================================================
   TYPEAHEAD COMPONENTS
   ============================================================================ */

.hmg-jb-v4-typeahead-wrapper {
  position: relative;
}

/* Suggestions dropdown: flush to input, no gap */
.hmg-jb-v4-typeahead-wrapper .hmg-jb-v4-suggestions {
  margin-top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.hmg-jb-v4-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: 325px;
  overflow-y: auto;
  margin-top: 0;
  padding: 0;
}

.hmg-jb-v4-suggestion-item {
  padding: var(--hmg-jb-v4-space-3);
  cursor: pointer;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-suggestion-item:hover,
.hmg-jb-v4-suggestion-item.active {
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-suggestion-item:last-child {
  border-bottom: none;
}

/* ============================================================================
   SLIDER COMPONENTS
   ============================================================================ */

.hmg-jb-v4-slider-container {
  margin-top: var(--hmg-jb-v4-space-2);
}

input[type='range'] {
  accent-color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.hmg-jb-v4-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--hmg-jb-v4-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--hmg-jb-v4-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--hmg-jb-v4-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--hmg-jb-v4-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-slider-value {
  margin-top: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  text-align: center;
}

/* ============================================================================
   JOB CARDS (REUSABLE ACROSS CONTEXTS)
   ============================================================================ */

.hmg-jb-v4-job-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
  transition: var(--hmg-jb-v4-transition);
  overflow: visible; /* Changed from hidden to show featured banner properly */
  margin-bottom: var(--hmg-jb-v4-space-4);
  position: relative; /* Contain box-shadow outlines */
}

.hmg-jb-v4-job-card:has(.hmg-jb-v4-job-featured-banner[style*="display: block"]) {
  border-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 40%, transparent);
  border-width: 2px;
}

.hmg-jb-v4-job-card.selected:has(.hmg-jb-v4-job-featured-banner[style*="display: block"]) {
  border-color: var(--hmg-jb-v4-primary);
  border-left: 4px solid var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-job-card:hover {
  border-color: var(--hmg-jb-v4-gray-300);
  box-shadow: var(--hmg-jb-v4-shadow-hover);
  z-index: 10; /* Lift above other cards for dropdown visibility */
  position: relative; /* Create stacking context */
}

/* If a card has an open dropdown, keep it above hovered siblings.
   (Child z-index can't beat sibling stacking contexts if the parent card is behind.) */
.hmg-jb-v4-job-card.hmg-jb-v4-job-card-dropdown-open {
  z-index: 50;
}

/* Details panel also needs to win against hovered job cards */
.hmg-jb-v4-job-details-panel.hmg-jb-v4-job-details-panel-dropdown-open {
  z-index: 60;
}

/* While any apply dropdown is open, suppress hover "lift" on other cards to avoid flicker
   from stacking-context + transform repaints behind the dropdown. */
body.hmg-jb-v4-dropdown-any-open .hmg-jb-v4-job-card:hover {
  transform: none;
  z-index: auto;
}

/* Help the dropdown menu stay on its own composited layer (reduces repaint flicker). */
.hmg-jb-v4-apply-dropdown-menu {
  will-change: transform;
  transform: translateZ(0);
}

.hmg-jb-v4-job-card.active {
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 1px var(--hmg-jb-v4-primary) inset, var(--hmg-jb-v4-shadow-hover);
}

.hmg-jb-v4-job-card.selected {
  background: #eff6ff;
  border: 1px solid var(--hmg-jb-v4-primary);
  border-left: 4px solid var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), var(--hmg-jb-v4-shadow-hover);
}

/* List view job cards are more compact */
.hmg-jb-v4-list-view .hmg-jb-v4-job-card {
  cursor: pointer;
}

.hmg-jb-v4-list-view .hmg-jb-v4-job-card .hmg-jb-v4-job-description {
  display: block; /* Show description preview in cards for Bolt parity */
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.5;
  margin: var(--hmg-jb-v4-space-3) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Grid view job cards are full-featured */
.hmg-jb-v4-grid-view .hmg-jb-v4-job-card {
  cursor: default;
}

.hmg-jb-v4-job-card.featured {
  border-color: var(--hmg-jb-v4-gray-300);
}

/* Hot Job badge – pill-style badge matching Hot Talent in TS */
.hmg-jb-v4-job-featured-banner {
  padding: 10px 16px;
  border-radius: 9999px;
}

.hmg-jb-v4-job-featured-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  background: color-mix(in srgb, var(--hmg-jb-v4-primary) 12%, white);
  color: var(--hmg-jb-v4-primary);
  border: 1px solid color-mix(in srgb, var(--hmg-jb-v4-primary) 25%, transparent);
  box-shadow: none;
}

.hmg-jb-v4-job-featured-badge::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hmg-jb-v4-job-featured-text {
  white-space: nowrap;
}

/* Job card: position Hot Job badge at top-left corner */
.hmg-jb-v4-job-card .hmg-jb-v4-job-featured-banner {
  position: absolute;
  left: 10px;
  top: -10px;
  padding: 0;
  z-index: 1;
}

.hmg-jb-v4-job-card-content {
  padding: 0 16px 16px 16px; /* Bolt uses p-4 = 16px, not 24px */
}

/* Job Header */
.hmg-jb-v4-job-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-job-title-section {
  flex: 1;
}

.hmg-jb-v4-job-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  margin-bottom: 2px;
}

.hmg-jb-v4-job-badges {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  flex-shrink: 0;
}

.hmg-jb-v4-container h1.hmg-jb-v4-job-title {
  margin: 0;
  font-size: 32px; /* Bolt uses text-lg = 18px, not 20px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-job-title-link {
  color: var(--hmg-jb-v4-primary) !important; /* shield against legacy overrides */
  text-decoration: none !important;
  transition: var(--hmg-jb-v4-transition);
  font-size: inherit !important;
  font-weight: inherit !important;
}

.hmg-jb-v4-job-title-link:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hmg-jb-v4-job-remote-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-2);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 500;
  background: var(--hmg-jb-v4-green-100);
  color: var(--hmg-jb-v4-green-700);
}

.hmg-jb-v4-job-freshness-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-2);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hmg-jb-v4-job-freshness-badge.new {
  background: #10b981;
  color: white;
  animation: pulse 2s infinite;
}

.hmg-jb-v4-job-freshness-badge.recent {
  background: #3b82f6;
  color: white;
}

.hmg-jb-v4-job-freshness-badge.hot {
  background: #ef4444;
  color: white;
  animation: pulse 1.5s infinite;
}

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

/* Salary Display - PLAIN like other metadata (Bolt standard) */
.hmg-jb-v4-salary-highlight {
  background: transparent !important; /* NO highlighting */
  border-radius: 0;
  padding: 0 !important;
  border: none !important;
}

.hmg-jb-v4-salary-icon {
  color: var(--hmg-jb-v4-gray-400) !important; /* Same gray as other icons */
}

.hmg-jb-v4-salary-text {
  font-weight: 400 !important; /* Regular weight like other metadata */
  color: var(--hmg-jb-v4-gray-600) !important; /* Same gray as other text */
}

.hmg-jb-v4-job-company {
  margin: 4px 0 0 0 !important;
  font-size: 16px !important; /* Bolt parity */
  font-weight: 400 !important;
  color: var(--hmg-jb-v4-gray-600) !important;
}

.hmg-jb-v4-job-category {
  margin: 4px 0 0 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--hmg-jb-v4-gray-500) !important;
  display: block !important;
}

.hmg-jb-v4-job-category .hmg-jb-v4-category-link {
  text-decoration: none !important;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-category .hmg-jb-v4-category-link:hover, .hmg-jb-v4-job-detail-company .hmg-jb-v4-job-category-link:hover {
  text-decoration: underline !important;
}

.hmg-jb-v4-job-category .POST_CATEGORIES_STRING {
  display: inline !important;
}

.hmg-jb-v4-job-save-btn, .hmg-jb-v4-job-share-btn {
  padding: 0 !important;
  border: none;
  background: none !important;
  color: var(--hmg-jb-v4-gray-400) !important;
  cursor: pointer;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center !important;
  justify-content: center;
  width: auto;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  line-height: 1;
  margin-top: 3px;
}

.hmg-jb-v4-job-save-btn:hover, .hmg-jb-v4-job-share-btn:hover {
  color: #ef4444 !important;
  transform: scale(1.06);
}

.hmg-jb-v4-job-save-btn.saved {
  color: #ef4444 !important;
}

.hmg-jb-v4-job-save-icon {
  font-size: 18px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hmg-jb-v4-job-save-btn.saved .hmg-jb-v4-job-save-icon:before {
  content: "\f004"; /* Solid heart */
  color: #ef4444 !important;
}

.hmg-jb-v4-job-save-btn.saved .hmg-jb-v4-job-save-icon {
  animation: heartBeat 0.6s ease-in-out;
}

.hmg-jb-v4-job-save-btn {
  position: relative;
}

.hmg-jb-v4-job-save-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
  font-family: inherit;
}

.hmg-jb-v4-job-save-btn:hover::after,
.hmg-jb-v4-job-save-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Job Info Grid - Single column stacked layout (Bolt style) */
.hmg-jb-v4-job-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.hmg-jb-v4-job-info-item {
  display: flex;
  align-items: center;
  font-size: 14px !important;
  color: var(--hmg-jb-v4-gray-600) !important;
  line-height: 1.5 !important;
}

.hmg-jb-v4-job-info-icon {
  width: 16px !important;
  height: 16px !important;
  margin-right: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-gray-400);
  flex-shrink: 0 !important;
  font-size: 14px !important;
}

.hmg-jb-v4-job-info-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Job Type Badge - SUBTLE Bolt style */
.hmg-jb-v4-job-type-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-type-section > * {
  margin-left: 0;
}

.hmg-jb-v4-job-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px !important; /* Bolt: px-3 py-1 */
  border-radius: 9999px;
  font-size: 12px !important; /* Bolt: text-sm */
  font-weight: 500 !important;
}

/* Job Details - Hide custom fields from card preview (show only in details panel) */
.hmg-jb-v4-job-card .hmg-jb-v4-job-details {
  display: none !important;
}

/* Job Type Badge - Keep visible in card */
.hmg-jb-v4-job-card .hmg-jb-v4-job-type-section {
  margin-bottom: 12px;
}

/* Job Details - Subtle Inline Style (Bolt Standard) - for details panel */
.hmg-jb-v4-job-details-panel .hmg-jb-v4-job-details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  margin: 16px 0 !important;
  padding: 0 !important; /* No boxing */
  background: transparent !important; /* No gray background */
  border: none !important; /* No borders */
}

.hmg-jb-v4-job-details-panel .hmg-jb-v4-job-featured-banner {
  padding: 0 0 8px 0;
}

.hmg-jb-v4-job-detail-item {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  color: var(--hmg-jb-v4-gray-600) !important;
  padding: 0 !important; /* No internal padding */
  background: transparent !important; /* No background */
  border: none !important; /* No borders */
  margin-bottom: 0 !important;
}

.hmg-jb-v4-job-detail-label {
  font-weight: 500 !important;
  color: var(--hmg-jb-v4-gray-700) !important;
  margin-right: 4px !important;
  min-width: auto !important;
}

.hmg-jb-v4-job-detail-value {
  font-weight: 400 !important;
  color: var(--hmg-jb-v4-gray-600) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Job Description */
.hmg-jb-v4-job-description {
  margin-bottom: 16px;
}

.hmg-jb-v4-job-description .job-excerpt {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grid view: more excerpt lines when no skills section (offset blank space) */
#jb-v4-job-results-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-description .job-excerpt {
  -webkit-line-clamp: 9;
}
#jb-v4-job-results-grid .hmg-jb-v4-job-card:has(.hmg-jb-v4-job-skills-tags:not([style*="display: none"])) .hmg-jb-v4-job-description .job-excerpt {
  -webkit-line-clamp: 2;
}

/* Grid view: uniform top margin so featured badge doesn't clip and cards stay aligned */
#jb-v4-job-results-grid .hmg-jb-v4-job-card {
  margin-top: 12px;
}

#jb-v4-job-results-grid .hmg-jb-v4-job-description h2, 
#jb-v4-job-results-grid .hmg-jb-v4-job-description h3, 
#jb-v4-job-results-grid .hmg-jb-v4-job-description h4 {
  font-size: 14px;
}

/* Job Actions */
.hmg-jb-v4-job-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hmg-jb-v4-space-4);
}

/* Hide View Details link in list view (Bolt doesn't have it) */
.hmg-jb-v4-list-view .hmg-jb-v4-job-more-link {
  display: none !important;
}

/* Full width apply button in list view */
.hmg-jb-v4-list-view .hmg-jb-v4-apply-dropdown-container {
  flex: 1;
  width: 100%;
}

/* Hide "Posted" text in list view to reduce visual clutter */
.hmg-jb-v4-list-view .hmg-jb-v4-job-date-text {
  font-size: 0; /* Hide the "Posted" text */
}

.hmg-jb-v4-list-view .hmg-jb-v4-job-date-text .POST_DATE_F {
  font-size: var(--hmg-jb-v4-text-sm); /* Restore font size for the date */
}

/* Login Required Notification */
.hmg-jb-v4-login-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9999;
}

.hmg-jb-v4-login-notification.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hmg-jb-v4-notification-content {
  background: white;
  border-radius: var(--hmg-jb-v4-radius-lg);
  padding: var(--hmg-jb-v4-space-6);
  max-width: 400px;
  margin-top: 10%;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-notification-icon {
  color: var(--hmg-jb-v4-primary);
  font-size: 3rem;
}

.hmg-jb-v4-notification-text h4 {
  margin: 0;
  color: var(--hmg-jb-v4-gray-900);
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
}

.hmg-jb-v4-notification-text p {
  margin: 0;
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-base);
}

.hmg-jb-v4-notification-actions {
  display: flex;
  gap: var(--hmg-jb-v4-space-3);
  width: 100%;
  justify-content: center;
}

/* Apply Dropdown (Bolt UI Feature) */
.hmg-jb-v4-apply-dropdown-container {
  position: relative;
  flex: 1;
  display: flex;
  gap: 0 !important; /* No gap between button parts */
  flex-direction: column;
  align-items: baseline;
}

.hmg-jb-v4-apply-actions-buttons  {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-2);
}

/* Single Unified Apply Button (Bolt Pattern) */
.hmg-jb-v4-job-apply-btn {
  width: 100%;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  outline: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-apply-btn:hover {
  background: var(--hmg-jb-v4-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.hmg-jb-v4-apply-text {
  flex: 1;
}

.hmg-jb-v4-apply-chevron {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.hmg-jb-v4-apply-dropdown-container.open .hmg-jb-v4-apply-chevron {
  transform: rotate(180deg);
}

.hmg-jb-v4-apply-dropdown-toggle svg {
  width: 16px;
  height: 16px;
}

.hmg-jb-v4-apply-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  margin-top: var(--hmg-jb-v4-space-1);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.hmg-jb-v4-apply-option {
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
}

.hmg-jb-v4-apply-option:last-child {
  border-bottom: none;
}

.hmg-jb-v4-apply-option-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4) !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--hmg-jb-v4-gray-700) !important;
  font-size: var(--hmg-jb-v4-text-sm) !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--hmg-jb-v4-transition) !important;
}

.hmg-jb-v4-apply-option-btn:hover {
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-apply-option-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-3);
  color: var(--hmg-jb-v4-gray-400);
}

/* Apply Later Form */
.hmg-jb-v4-apply-later-form {
  padding: var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-gray-50);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
  width: 100%;
}

.hmg-jb-v4-apply-later-label {
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-apply-later-display {
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-apply-later-email {
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-apply-later-actions {
  display: flex;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-apply-later-actions .hmg-jb-v4-btn {
  flex: 1;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-job-applied-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-green-100);
  color: var(--hmg-jb-v4-green-700);
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 600;
}

.hmg-jb-v4-job-applied-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-job-more-link {
  display: flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  border-radius: var(--hmg-jb-v4-radius-lg);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-more-link:hover {
  background: #eff6ff;
  color: var(--hmg-jb-v4-primary-hover);
}

.hmg-jb-v4-job-more-icon {
  width: 16px;
  height: 16px;
  margin-left: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-job-badges-mobile {
  display: none;
}

.hmg-jb-v4-job-badges-mobile {
  margin-right: var(--hmg-jb-v4-space-2);
}

/* Mobile Responsive - Bolt Standards */
@media (max-width: 768px) {
  .hmg-jb-v4-job-badges-mobile {
    display: flex;
    margin-top: 8px;
  }

  .hmg-jb-v4-view-toggle {
    display: none;
  }
  
  .hmg-jb-v4-job-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--hmg-jb-v4-space-3);
  }
  
  .hmg-jb-v4-job-more-link {
    justify-content: center;
  }
  
  /* Mobile: Slightly smaller title but still prominent */
  .hmg-jb-v4-job-card .hmg-jb-v4-job-title {
    font-size: 18px !important;
  }
  
  /* Mobile: Details panel title smaller */
  .hmg-jb-v4-job-details-panel .hmg-jb-v4-job-detail-title,
  .hmg-jb-v4-job-details-panel .hmg-jb-v4-details-title {
    font-size: 24px !important;
  }

  .hmg-jb-v4-job-details-panel-container {
    align-self: start;
  }

  .hmg-jb-v4-job-results-grid {
    padding-right: 0;
  }
}

/* ============================================================================
   SEARCH RESULTS LAYOUT
   ============================================================================ */

.hmg-jb-v4-results-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  margin-top: 16px;
}

/* Filter Sidebar */
.hmg-jb-v4-filters-sidebar {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-6);
  height: fit-content;
  /* position: sticky; */
  top: var(--hmg-jb-v4-space-4);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Desktop: Hidden state for collapsible sidebar */
@media (min-width: 769px) {
  .hmg-jb-v4-filters-sidebar.hidden {
    display: none;
  }
  
  /* When sidebar is hidden, adjust layout to full width */
  .hmg-jb-v4-results-layout:has(.hmg-jb-v4-filters-sidebar.hidden) {
    grid-template-columns: 1fr;
  }
}

.hmg-jb-v4-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--hmg-jb-v4-space-6);
  padding-bottom: var(--hmg-jb-v4-space-4);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-results-layout .hmg-jb-v4-filters-title{
  display: flex;
  align-items: center;
  margin: 0;
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-filters-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-filters-close {
  display: none;
  padding: var(--hmg-jb-v4-space-2);
  border: none;
  border-radius: var(--hmg-jb-v4-radius-lg);
  background: transparent;
  color: var(--hmg-jb-v4-gray-400);
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-filters-close:hover {
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-filters-close svg {
  width: 20px;
  height: 20px;
}

.hmg-jb-v4-filter-section {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

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

.hmg-jb-v4-filter-section .hmg-jb-v4-filter-title {
  margin: 0 0 var(--hmg-jb-v4-space-3) 0;
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-filter-section .hmg-jb-v4-filter-title svg {
  flex-shrink: 0;
}

.hmg-jb-v4-proximity-section {
  margin-top: var(--hmg-jb-v4-space-4);
  padding-top: var(--hmg-jb-v4-space-4);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-proximity-title {
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-location-typeahead-container {
  position: relative;
}

.hmg-jb-v4-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  left: -9999px;
}

.hmg-jb-v4-filter-actions {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
  margin-top: var(--hmg-jb-v4-space-6);
  padding-top: var(--hmg-jb-v4-space-6);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

/* Results Content */
.hmg-jb-v4-results-content {
  min-width: 0;
}

.hmg-jb-v4-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--hmg-jb-v4-space-6);
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
}

/* Filter Tags */
.hmg-jb-v4-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-2);
  margin-bottom: var(--hmg-jb-v4-space-4);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-gray-50);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
}

.hmg-jb-v4-filter-tags:empty {
  display: none;
}

.hmg-jb-v4-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-filter-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0 !important;
  border: none;
  border-radius: 50%;
  background: var(--hmg-jb-v4-gray-300) !important;
  background-color: var(--hmg-jb-v4-gray-300) !important;
  color: var(--hmg-jb-v4-gray-600) !important;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-filter-tag-remove:hover {
  background: var(--hmg-jb-v4-red-600);
  color: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-filter-tag-remove svg {
  width: 10px;
  height: 10px;
}

.hmg-jb-v4-results-info {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-mobile-filter-toggle {
  display: none;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-lg);
  background: var(--hmg-jb-v4-white);
  color: var(--hmg-jb-v4-gray-700);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-filter-toggle:hover {
  background: var(--hmg-jb-v4-gray-50);
  border-color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-mobile-filter-toggle svg {
  width: 16px;
  height: 16px;
}

.hmg-jb-v4-results-count {
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-results-controls {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-4);
}

/* View Toggle (Bolt UI Feature) */
.hmg-jb-v4-view-toggle {
  display: flex;
  align-items: center;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  padding: 4px;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3) !important;
  border: none;
  border-radius: var(--hmg-jb-v4-radius-md);
  background: transparent !important;
  color: var(--hmg-jb-v4-gray-500) !important;
  font-size: var(--hmg-jb-v4-text-sm) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-view-btn:hover {
  color: var(--hmg-jb-v4-gray-700);
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-view-btn-active {
  background: var(--hmg-jb-v4-primary) !important;
  color: var(--hmg-jb-v4-white) !important;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-view-btn-active:hover {
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-view-icon {
  width: 16px;
  height: 16px;
}

.hmg-jb-v4-sort-container {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-sort-label {
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  margin: 0;
}

/* List/Grid View Layouts */
.hmg-jb-v4-results-layout-content {
  min-width: 0;
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-header{
  flex-direction: row;
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-title-row{
  justify-content: flex-start;
}

.hmg-jb-v4-list-view {
  display: grid;
  /* grid-template-columns: 1fr 2fr; */
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: var(--hmg-jb-v4-space-4);
  /* align-items: stretch;  */
  align-items: start; /* Both columns same height */
}

.hmg-jb-v4-list-jobs {
  min-width: 0;
  height: 100%; /* Fill full height to match details panel */
  display: flex;
  flex-direction: column;
}

.hmg-jb-v4-grid-view {
  display: block;
}

/* Job Results - Scrollable list that fills column */
.hmg-jb-v4-job-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* flex: 1;  */
  /* overflow-y: auto; */
  overflow-x: visible; /* Prevent shadow clipping on hover */
  padding: 4px; /* Accommodate shadow on sides */
  padding-right: 8px;
  min-height: 0; /* Allow flex shrink */
}

.hmg-jb-v4-job-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--hmg-jb-v4-space-6);
  /* Allow natural expansion but add scrolling for very long lists */
  /* max-height: 80vh; */
  /* overflow-y: auto; */
  padding-right: var(--hmg-jb-v4-space-2);
}

/* Grid cards: fill cell height so Apply button aligns across rows */
#jb-v4-job-results-grid .hmg-jb-v4-job-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#jb-v4-job-results-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#jb-v4-job-results-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-actions {
  margin-top: auto;
  flex-shrink: 0;
}

/* Hide skip search card in grid view */
#jb-v4-job-results-grid .hmg-jb-v4-skip-search-card {
  display: none;
}

/* Job Details Panel */
.hmg-jb-v4-job-details-panel {
  background: var(--hmg-jb-v4-white);
  /* border: 1px solid var(--hmg-jb-v4-gray-200); */
  border-radius: 12px;
  /* padding: 24px; */
  position: relative; /* NOT sticky - let it expand fully */
  /* height: 100%; */
}

.hmg-jb-v4-job-details-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.hmg-jb-v4-job-details-placeholder-content {
  max-width: 300px;
}

.hmg-jb-v4-job-details-placeholder-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--hmg-jb-v4-space-4) auto;
  color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-job-details-placeholder-title {
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-job-details-placeholder-text {
  margin: 0;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.5;
}

/* Job Detail Panel Content */
.hmg-jb-v4-job-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-job-detail-header {
  padding: var(--hmg-jb-v4-space-2) 0 var(--hmg-jb-v4-space-4) 0;
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-job-detail-title {
  margin: 0 0 12px 0 !important;
  font-size: 28px !important; /* Bolt standard for details panel */
  font-weight: 700 !important;
  color: var(--hmg-jb-v4-gray-900) !important;
  line-height: 1.2 !important;
  max-width: 70%;
}

.hmg-jb-v4-job-detail-company {
  margin: 0 0 16px 0 !important;
  font-size: 18px !important; /* Bolt standard for details panel */
  font-weight: 500 !important;
  color: var(--hmg-jb-v4-gray-700) !important;
}

.hmg-jb-v4-job-detail-location {
  margin: 0;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  display: flex;
  align-items: center;
}

/* .hmg-jb-v4-job-detail-location::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-2);
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236b7280' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'%3E%3C/path%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
} */

.hmg-jb-v4-job-detail-description {
  flex: 1;
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-detail-section-title {
  margin: 0 0 var(--hmg-jb-v4-space-3) 0;
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-job-detail-description-content {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
}

.hmg-jb-v4-job-detail-actions {
  padding-top: var(--hmg-jb-v4-space-4);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

/* Infinite Scroll */
.hmg-jb-v4-infinite-scroll-loading {
  display: flex;
  justify-content: center;
  margin-top: var(--hmg-jb-v4-space-8);
  margin-bottom: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-loading-spinner {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
}

.hmg-jb-v4-spinner-icon {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

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

.hmg-jb-v4-load-more-hidden {
  display: none !important;
}

/* No Results */
.hmg-jb-v4-no-results {
  text-align: center;
  padding: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-no-results-content {
  max-width: 500px;
  margin: 0 auto;
}

.hmg-jb-v4-no-results-title {
  margin: 0 0 var(--hmg-jb-v4-space-4) 0;
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-no-results-text {
  margin: 0 0 var(--hmg-jb-v4-space-6) 0;
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
}

.hmg-jb-v4-no-results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  text-align: center;
}

.hmg-jb-v4-no-results-actions p {
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
}

.hmg-jb-v4-no-results-or {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-no-results-cta {
  margin-top: var(--hmg-jb-v4-space-4);
  display: flex;
  justify-content: center;
}

.hmg-jb-v4-no-results-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
  margin-top: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-no-results-button-group {
  display: flex;
  justify-content: center;
}

.hmg-jb-v4-btn-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-2);
}

@media (min-width: 768px) {
  .hmg-jb-v4-no-results-buttons {
    flex-direction: row;
    justify-content: center;
    gap: var(--hmg-jb-v4-space-4);
  }
}

.hmg-jb-v4-custom-message {
  background: var(--hmg-jb-v4-gray-50);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  margin-bottom: var(--hmg-jb-v4-space-4);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
}

/* SEO Content */
.hmg-jb-v4-seo-banner {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Category banner - matches location/recruiter banner display */
.hmg-jb-v4-category-banner {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: var(--hmg-jb-v4-radius-lg);
  overflow: hidden;
  margin-bottom: var(--hmg-jb-v4-space-4);
  position: relative;
}

.hmg-jb-v4-category-banner .hmg-jb-v4-category-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmg-jb-v4-seo-header {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-seo-title {
  margin: 0;
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  text-align: center;
}

.hmg-jb-v4-seo-content {
  background: var(--hmg-jb-v4-gray-50);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-6);
  margin-bottom: var(--hmg-jb-v4-space-6);
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
}

#category-description-text.hmg-jb-v4-seo-content {
  max-width: 100%;
}

.hmg-jb-v4-rss-link {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-rss-link:hover {
  background: #eff6ff;
  color: var(--hmg-jb-v4-primary-hover);
}

.hmg-jb-v4-rss-icon {
  width: 16px;
  height: 16px;
}

/* RSS Feed Link in Filter Tags Area */
.hmg-jb-v4-filter-tags .hmg-jb-v4-rss-link-inline {
  display: inline-flex !important;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-primary);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-primary);
  text-decoration: none !important;
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
  margin-left: auto !important;
}

.hmg-jb-v4-filter-tags .hmg-jb-v4-rss-link-inline:hover {
  background: #eff6ff;
  color: var(--hmg-jb-v4-primary-hover);
}

.hmg-jb-v4-filter-tags .hmg-jb-v4-rss-link-inline .hmg-jb-v4-rss-icon {
  width: 14px;
  height: 14px;
}

/* Magic Match Integration */
.hmg-jb-v4-magic-match-container {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Modal Styling */
.hmg-jb-v4-modal-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-primary);
}

/* Mobile Navigation */
.hmg-jb-v4-mobile-nav {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-mobile-nav-link {
  display: flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: var(--hmg-jb-v4-gray-700);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-nav-link:hover {
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-mobile-nav-link:focus {
  outline: none;
  background: transparent;
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-mobile-nav-link:focus-visible {
  outline: 2px solid var(--hmg-jb-v4-primary);
  outline-offset: 2px;
}

.hmg-jb-v4-mobile-nav-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-2);
  flex-shrink: 0;
}

.hmg-jb-v4-container .hmg-jb-v4-mobile-nav {
  margin-bottom: var(--hmg-jb-v4-space-4);
  border-radius: 12px;
  padding: 8px;
}

.hmg-jb-v4-container .hmg-jb-v4-mobile-nav-list {
  flex-direction: row;
  justify-content: space-between;
}

.hmg-jb-v4-mobile-alert-box {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-4);
  margin-top: var(--hmg-jb-v4-space-3);
  position: relative;
}

.hmg-jb-v4-mobile-alert-close {
  position: absolute;
  top: var(--hmg-jb-v4-space-2);
  right: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-1);
  border: none;
  border-radius: var(--hmg-jb-v4-radius-md);
  background: transparent;
  color: var(--hmg-jb-v4-gray-400);
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-alert-close:hover {
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-mobile-alert-close svg {
  width: 16px;
  height: 16px;
}

.hmg-jb-v4-mobile-alert-title {
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-mobile-alert-text {
  margin: 0 0 var(--hmg-jb-v4-space-4) 0;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .hmg-jb-v4-results-layout {
    grid-template-columns: 1fr;
    gap: var(--hmg-jb-v4-space-4);
  }
  
  .hmg-jb-v4-filters-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100vh;
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
  }
  
  .hmg-jb-v4-filters-sidebar.open {
    left: 0;
  }
  
  .hmg-jb-v4-filters-close {
    display: block;
  }
  
  .hmg-jb-v4-mobile-filter-toggle {
    display: flex;
  }
}

@media (max-width: 767px) {
  .hmg-jb-v4-results-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--hmg-jb-v4-space-4);
    padding: 12px;
    margin-bottom: 0;
  }

  .hmg-jb-v4-results-header .hmg-jb-v4-results-count {
    font-size: 14px;
  }
  
  .hmg-jb-v4-results-info {
    justify-content: space-between;
  }
  
  .hmg-jb-v4-results-controls {
    display: none;
  }
  
  .hmg-jb-v4-filters-sidebar {
    width: 100%;
    left: -100%;
  }

  .hmg-jb-v4-results-layout-content {
    margin-top: 16px;
  }
}

/* ============================================================================
   CALLOUT COMPONENTS
   ============================================================================ */

.hmg-jb-v4-callouts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-6);
}

@media (min-width: 768px) {
  .hmg-jb-v4-callouts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hmg-jb-v4-callout-card {
  background: var(--hmg-jb-v4-gray-50);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 160px;
}

.hmg-jb-v4-callout-card:hover {
  border-color: var(--hmg-jb-v4-gray-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-callout-icon-container, .hmg-jb-v4-callout-icon-container-mobile {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(239, 246, 255, 0.8);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.hmg-jb-v4-callout-icon-container-mobile {
  display: none;
}

.hmg-jb-v4-callout-icon {
  width: 24px;
  height: 24px;
  color: var(--hmg-jb-v4-primary);
  flex-shrink: 0;
}

.hmg-jb-v4-callout-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.hmg-jb-v4-callout-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.hmg-jb-v4-callout-text {
  font-size: 14px;
  color: #374151; /* Always dark gray for readability */
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
  flex-grow: 1;
}

.hmg-jb-v4-callout-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .hmg-jb-v4-callout-actions {
        flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .hmg-jb-v4-callout-actions .hmg-jb-v4-text-link {
  text-align: center;
    padding: 8px;
  }
}

.hmg-jb-v4-link {
  color: var(--hmg-jb-v4-primary);
    text-decoration: none;
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-link:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

.hmg-jb-v4-btn-secondary {
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-700);
  border: 1px solid var(--hmg-jb-v4-gray-300);
}

.hmg-jb-v4-btn-secondary:hover {
  background: var(--hmg-jb-v4-gray-200);
  color: var(--hmg-jb-v4-gray-900);
}

/* ============================================================================
   LOADING STATES & ANIMATIONS
   ============================================================================ */

.hmg-jb-v4-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.hmg-jb-v4-loading::after {
  content: '';
    position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--hmg-jb-v4-gray-300);
  border-top: 2px solid var(--hmg-jb-v4-primary);
  border-radius: 50%;
  animation: hmg-jb-v4-spin 1s linear infinite;
}

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

.hmg-jb-v4-fade-in {
  animation: hmg-jb-v4-fade-in 0.3s ease-in-out;
}

@keyframes hmg-jb-v4-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hmg-jb-v4-pulse {
  animation: hmg-jb-v4-pulse 2s infinite;
}

@keyframes hmg-jb-v4-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Form submission loading state */
.hmg-jb-v4-form-loading .hmg-jb-v4-btn {
  position: relative;
  color: transparent;
}

.hmg-jb-v4-form-loading .hmg-jb-v4-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: hmg-jb-v4-spin 1s linear infinite;
}

/* ============================================================================
   NAVIGATION COMPONENTS (BOLT RESPONSIVE PATTERN)
   ============================================================================ */

.hmg-jb-v4-header {
  background: transparent !important;
  padding: 0;
  margin-bottom: var(--hmg-jb-v4-space-4);
  z-index: 40;
}

.hmg-jb-v4-header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.hmg-jb-v4-header-container > * {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 0 var(--hmg-jb-v4-space-4);
}

#site-title-v4 {
  display: none;
}

@media (max-width: 767px) {
  #site-title-v4 {
    display: block;
  }

  .hmg-jb-v4-header {
    margin-left: -20px;
    margin-right: -20px;
  }

  .hmg-jb-v4-header-container{
    border-radius: 0;
  }
}

.hmg-jb-v4-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--hmg-jb-v4-space-4);
}

/* Desktop Navigation - Right Aligned (Bolt Pattern) */
.hmg-jb-v4-desktop-nav {
  display: none;
  align-items: center;
  gap: var(--hmg-jb-v4-space-6);
  margin-left: auto;
}

@media (min-width: 1024px) {
  .hmg-jb-v4-desktop-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  }

  .hmg-jb-v4-nav-links {
    display: flex;
  }
}

.hmg-jb-v4-nav-link {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  color: var(--nav-text-color, var(--text-color, #6b7280));
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  border-radius: var(--hmg-jb-v4-radius-lg);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-nav-link:hover {
  color: var(--nav-text-hover, var(--text-hover, #111827));
  background: var(--nav-hover-bg, var(--hover-background, #f9fafb));
}

/* Navigation Sign Up Button (Template Color Inheritance) */
.hmg-jb-v4-nav-link.hmg-jb-v4-btn-primary {
  background: var(--hmg-jb-v4-primary) !important;
  color: var(--primary-text-color, var(--button-text-color, white)) !important;
  padding: 8px 16px !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  font-weight: 500 !important;
  border: none !important;
}

.hmg-jb-v4-nav-link.hmg-jb-v4-btn-primary:hover {
  background: var(--hmg-jb-v4-primary-hover) !important;
  color: var(--primary-text-color, var(--button-text-color, white)) !important;
}

.hmg-jb-v4-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Profile Dropdown (Bolt Pattern) */
.hmg-jb-v4-profile-dropdown {
  position: relative;
}

.hmg-jb-v4-profile-toggle {
  position: relative;
  border: 0;
  background-color: transparent !important;
  font-size: var(--hmg-jb-v4-text-sm) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3) !important;
  gap: var(--hmg-jb-v4-space-2) !important;
  color: var(--nav-text-color, var(--text-color, #6b7280)) !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
}

.hmg-jb-v4-profile-toggle:hover {
  color: var(--nav-text-hover, var(--text-hover, #111827)) !important;
  background: var(--nav-hover-bg, var(--hover-background, #f9fafb)) !important;
}

.hmg-jb-v4-profile-toggle.hmg-jb-v4-profile-active {
  background: rgba(var(--hmg-jb-v4-primary, 37, 99, 235), 0.1);
  color: var(--hmg-jb-v4-primary, #2563eb);
  border: 1px solid var(--hmg-jb-v4-primary, #2563eb);
}

.hmg-jb-v4-dropdown-arrow {
  width: 12px;
  height: 12px;
  margin-left: var(--hmg-jb-v4-space-1);
  transition: transform 0.2s ease;
}

.hmg-jb-v4-dropdown-arrow.hmg-jb-v4-arrow-rotated {
  transform: rotate(180deg);
}

.hmg-jb-v4-profile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--hmg-jb-v4-space-2);
  width: 224px;
  background: var(--dropdown-background, white);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--hmg-jb-v4-radius-lg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  display: none; /* Hidden by default */
}

.hmg-jb-v4-profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  width: 100%;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  color: var(--dropdown-text, #374151);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  transition: var(--hmg-jb-v4-transition);
  border: none;
  background: none;
  text-align: left;
}

.hmg-jb-v4-profile-menu-item:hover {
  background: rgba(var(--hmg-jb-v4-primary, 37, 99, 235), 0.1);
  color: var(--hmg-jb-v4-primary, #2563eb);
}

.hmg-jb-v4-profile-menu-item.hmg-jb-v4-logout:hover {
  background: var(--error-light, #fef2f2);
  color: var(--error-color, #dc2626);
}

.hmg-jb-v4-menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hmg-jb-v4-menu-divider {
  margin: var(--hmg-jb-v4-space-2) 0;
  border: none;
  border-top: 1px solid var(--border-color, #f3f4f6);
}

.hmg-jb-v4-profile-dropdown .hmg-jb-v4-menu-divider {
  margin: 0;
}

/* Mobile Menu Button */
.hmg-jb-v4-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hmg-jb-v4-space-2);
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--hmg-jb-v4-primary, #6b7280);
  border-radius: var(--hmg-jb-v4-radius-lg);
  transition: var(--hmg-jb-v4-transition);
  cursor: pointer;
}

.hmg-jb-v4-mobile-toggle * {
  pointer-events: none;
}

.hmg-jb-v4-hamburger-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hmg-jb-v4-mobile-toggle {
    display: none;
  }
}

.hmg-jb-v4-mobile-toggle:hover {
  color: var(--nav-text-hover, #111827);
  background: var(--nav-hover-bg, #f9fafb);
}

.hmg-jb-v4-hamburger-icon {
  width: 20px;
  height: 20px;
}

/* Mobile Menu (Bolt Responsive Pattern) */
.hmg-jb-v4-mobile-menu {
  display: block;
  padding: 0;
  background: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
  border: 0;
  border-radius: 0;
}

@media (min-width: 1024px) {
  .hmg-jb-v4-mobile-menu {
    display: none;
  }
}

.hmg-jb-v4-mobile-menu.hmg-jb-v4-mobile-open {
  max-height: 500px;
  box-shadow: none;
}

.hmg-jb-v4-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hmg-jb-v4-mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  padding: var(--hmg-jb-v4-space-3);
  color: var(--nav-text-color, #6b7280);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  border-radius: var(--hmg-jb-v4-radius-lg);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-nav-item:hover {
  color: var(--nav-text-hover, #111827);
  background: var(--nav-hover-bg, #f9fafb);
}

.hmg-jb-v4-mobile-nav-item.hmg-jb-v4-logout:hover {
  background: var(--error-light, #fef2f2);
  color: var(--error-color, #dc2626);
}

.hmg-jb-v4-mobile-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hmg-jb-v4-mobile-nav .hmg-jb-v4-mobile-alert-title {
  font-size: 16px;
}

.hmg-jb-v4-mobile-nav .hmg-jb-v4-mobile-alert-text {
  font-size: 12px;
}

.hmg-jb-v4-mobile-nav .hmg-jb-v4-mobile-alert-text {
  font-size: 12px;
}

.hmg-jb-v4-mobile-nav #alert-step1 label {
  font-size: 12px;
}

.hmg-jb-v4-mobile-divider {
  height: 1px;
  background: var(--border-color, #f3f4f6);
  margin: var(--hmg-jb-v4-space-4) 0;
}

.hmg-jb-v4-mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .hmg-jb-v4-mobile-only {
    display: none;
  }
}

/* ============================================================================
   SEARCH INTERFACE COMPONENTS
   ============================================================================ */

.hmg-jb-v4-search-section {
  background: transparent;
  padding: 0;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-search-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.hmg-jb-v4-search-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-search-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.hmg-jb-v4-search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-4);
}

@media (min-width: 768px) {
  .hmg-jb-v4-search-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hmg-jb-v4-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-input-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-900);
  gap: var(--hmg-jb-v4-space-2);
}

/* Keep icon + text on one line (override any form label { display: block } ) */
label.hmg-jb-v4-input-label {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
}

.hmg-jb-v4-input-label svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.hmg-jb-v4-select {
  width: 100%;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  background: var(--hmg-jb-v4-white);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-select:focus {
  border-color: var(--hmg-jb-v4-primary);
  outline: none;
}

/* Advanced Search Panel */
.hmg-jb-v4-advanced-panel {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  margin-top: var(--hmg-jb-v4-space-4);
  overflow: hidden;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-advanced-content {
  padding: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-advanced-toggle {
  color: var(--hmg-jb-v4-primary);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-advanced-toggle:hover {
  color: var(--hmg-jb-v4-primary-hover);
}

/* ============================================================================
   JOB CARD COMPONENTS
   ============================================================================ */

.hmg-jb-v4-job-card.featured {
  border-color: var(--hmg-jb-v4-orange-300);
}

.hmg-jb-v4-featured-banner {
  background: var(--hmg-jb-v4-orange-50);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-6);
  border-bottom: 1px solid var(--hmg-jb-v4-orange-200);
}

.hmg-jb-v4-featured-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-orange-100);
  color: var(--hmg-jb-v4-orange-800);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 500;
}

.hmg-jb-v4-card-content {
  padding: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-title {
  font-size: var(--hmg-jb-v4-text-xl); /* 20px for Bolt parity */
  font-weight: 600;
  color: var(--hmg-jb-v4-primary);
  line-height: 1.4;
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-title:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}

.hmg-jb .hmg-jb-v4-job-detail-title a:hover, .hmg-jb .hmg-jb-v4-job-detail-title a:focus {
  text-decoration: underline;
}

.hmg-jb-v4-company {
  color: var(--hmg-jb-v4-gray-600);
  font-weight: 500;
  font-size: var(--hmg-jb-v4-text-sm);
  margin-top: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-save-btn {
  padding: var(--hmg-jb-v4-space-2);
  border: none;
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-gray-400);
  border-radius: var(--hmg-jb-v4-radius-lg);
  transition: var(--hmg-jb-v4-transition);
  cursor: pointer;
}

.hmg-jb-v4-save-btn:hover {
  background: var(--hmg-jb-v4-red-50);
  color: var(--hmg-jb-v4-red-600);
}

.hmg-jb-v4-save-btn.saved {
  background: var(--hmg-jb-v4-red-50);
  color: var(--hmg-jb-v4-red-600);
}

/* Job Info Grid */
.hmg-jb-v4-job-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-meta-item {
  display: flex;
  align-items: center;
  color: var(--hmg-jb-v4-gray-600);
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-meta-icon {
  color: var(--hmg-jb-v4-gray-400);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Remote Work Badge */
.hmg-jb-v4-remote-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-2);
  background: var(--hmg-jb-v4-green-100);
  color: var(--hmg-jb-v4-green-700);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 500;
}

/* Skills Section */
.hmg-jb-v4-skills {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-skills-title {
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-skill-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-700);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-skill-tag:hover {
  background: var(--hmg-jb-v4-gray-200);
}

/* ============================================================================
   RESPONSIVE & MOBILE
   ============================================================================ */

@media (max-width: 767px) {
  .hmg-jb-v4-job-meta {
    grid-template-columns: 1fr;
    gap: var(--hmg-jb-v4-space-3);
  }
  
  .hmg-jb-v4-card-content {
    padding: var(--hmg-jb-v4-space-4);
  }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.hmg-jb-v4-flex { display: flex; }
.hmg-jb-v4-flex-col { flex-direction: column; }
.hmg-jb-v4-items-center { align-items: center; }
.hmg-jb-v4-justify-between { justify-content: space-between; }
.hmg-jb-v4-gap-2 { gap: var(--hmg-jb-v4-space-2); }
.hmg-jb-v4-gap-4 { gap: var(--hmg-jb-v4-space-4); }
.hmg-jb-v4-text-center { 
  text-align: center;
  margin-top: var(--hmg-jb-v4-space-4);
}
.hmg-jb-v4-hidden { display: none !important; }
.hmg-jb-v4-mb-4 { margin-bottom: var(--hmg-jb-v4-space-4); }

/* ============================================================================
   ENHANCED JOB CARD VISUAL ELEMENTS (BOLT DESIGN)
   ============================================================================ */

/* Featured Job Banner (Hot Jobs) - styles consolidated above at line 553 */

/* Employment Type Badge (Bubble) - Uses Secondary Color */
.hmg-jb-v4-job-type-badge {
  background: var(--hmg-jb-v4-secondary-alpha);
  color: var(--hmg-jb-v4-secondary);
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-2);
  border-radius: var(--hmg-jb-v4-radius-full);
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  /* margin-left: var(--hmg-jb-v4-space-2); */
  border: 1px solid var(--hmg-jb-v4-secondary-light);
}

/* Remote Badge (Green Bubble) */
.hmg-jb-v4-job-remote-badge {
  background: var(--hmg-jb-v4-green-100);
  color: var(--hmg-jb-v4-green-800);
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-2);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  margin-left: var(--hmg-jb-v4-space-2);
}

/* Instant Interview Badge (Purple Bubble) */
.hmg-jb-v4-classet-badge {
  background: #f3e8ff;
  color: #7c3aed;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  white-space: nowrap;
}

.hmg-jb-v4-classet-badge .hmg-jb-v4-classet-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hmg-jb-v4-job-detail-header-top {
  display: flex;
  gap: 5px;
}

.hmg-jb-v4-job-detail-header-top .hmg-jb-v4-job-detail-actions-right {
  margin-top: 6px;
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

.hmg-jb-v4-job-detail-header-top .hmg-jb-v4-job-detail-actions-right button {
 align-items: unset;
}

/* Favorite Heart Button - Cute Little Icon Style */
.hmg-jb-v4-heart-icon {
  font-size: 20px;
  color: var(--hmg-jb-v4-gray-400);
  transition: var(--hmg-jb-v4-transition);
  display: inline-block;
  padding: 0;
  margin: 0;
}

.hmg-jb-v4-heart-icon.saved {
  color: var(--hmg-jb-v4-red-500);
  animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Enhanced Apply Button (Bolt Style) */
.hmg-jb-v4-job-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2) !important;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-6) !important;
  background: var(--hmg-jb-v4-primary) !important;
  color: var(--hmg-jb-v4-white) !important;
  border: none;
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-weight: 600 !important;
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
  font-size: 14px !important;
}

.hmg-jb-v4-job-apply-btn:hover {
  background: var(--hmg-jb-v4-primary);
  transform: translateY(-1px);
  box-shadow: var(--hmg-jb-v4-shadow-md);
  color: var(--hmg-jb-v4-white) !important;
  opacity: 0.9;
}

.hmg-jb-v4-apply-icon {
  font-size: 16px;
}

/* Applied Status Enhanced */
.hmg-jb-v4-job-applied-status {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-green-600);
  font-weight: 600;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-green-50);
  border-radius: var(--hmg-jb-v4-radius-lg);
  border: 1px solid var(--hmg-jb-v4-green-200);
}

.hmg-jb-v4-applied-icon {
  color: var(--hmg-jb-v4-green-500);
  font-size: 16px;
}

/* Location and Category Links */
.hmg-jb-v4-location-link,
.hmg-jb-v4-category-link {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
  font-weight: 500;
}

.hmg-jb-v4-location-link:hover,
.hmg-jb-v4-category-link:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

/* Job Card Enhanced Click States */
.hmg-jb-v4-job-card {
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
  position: relative;
}

.hmg-jb-v4-job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hmg-jb-v4-shadow-lg);
  z-index: 10; /* Lift above other cards for dropdown visibility */
  position: relative; /* Ensure stacking context for z-index */
}

.hmg-jb-v4-job-card.active {
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
  background: rgba(37, 99, 235, 0.02);
}

/* ============================================================================
   RECRUITER BIO SECTION (BOLT DESIGN)
   ============================================================================ */

.hmg-jb-v4-job-detail-recruiter {
  padding-top: var(--hmg-jb-v4-space-6);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-recruiter-banner {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: var(--hmg-jb-v4-radius-lg);
  overflow: hidden;
  margin-bottom: var(--hmg-jb-v4-space-4);
  position: relative;
}

.hmg-jb-v4-recruiter-banner .hmg-jb-v4-recruiter-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Location section: align icon and link in title, spacing below title */
.hmg-jb-v4-location-section .hmg-jb-v4-section-title {
  display: flex;
  align-items: center;
}

.hmg-jb-v4-location-section .hmg-jb-v4-section-title svg {
  flex-shrink: 0;
}

/* Location banner - matches recruiter banner display */
.hmg-jb-v4-location-banner {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: var(--hmg-jb-v4-radius-lg);
  overflow: hidden;
  margin-top: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
  position: relative;
}

.hmg-jb-v4-location-banner .hmg-jb-v4-location-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmg-jb-v4-recruiter-profile-header {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-recruiter-photo {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid var(--hmg-jb-v4-white);
  box-shadow: var(--hmg-jb-v4-shadow-md);
  flex-shrink: 0;
}

.hmg-jb-v4-recruiter-info {
  flex: 1;
}

.hmg-jb-v4-recruiter-name {
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 var(--hmg-jb-v4-space-1) 0;
}

.hmg-jb-v4-recruiter-name a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-recruiter-name a:hover {
  color: var(--hmg-jb-v4-primary-hover);
}

.hmg-jb-v4-recruiter-title {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin: 0;
}

.hmg-jb-v4-recruiter-bio {
  margin: 0 0 var(--hmg-jb-v4-space-4) 0;
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
}

.hmg-jb-v4-recruiter-bio p {
  margin: 0;
}

.hmg-jb-v4-recruiter-actions {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
  margin-top: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-recruiter-contact-btn,
.hmg-jb-v4-recruiter-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-weight: 500;
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-recruiter-contact-btn {
  background: var(--hmg-jb-v4-secondary);
  color: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-secondary);
}

.hmg-jb-v4-recruiter-contact-btn:hover {
  background: var(--hmg-jb-v4-secondary-hover);
  border-color: var(--hmg-jb-v4-secondary-hover);
}

.hmg-jb-v4-recruiter-phone-btn {
  background: transparent;
  color: var(--hmg-jb-v4-secondary);
  border: 1px solid var(--hmg-jb-v4-secondary);
}

.hmg-jb-v4-recruiter-phone-btn:hover {
  background: var(--hmg-jb-v4-secondary);
  color: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-contact-icon,
.hmg-jb-v4-phone-icon {
  font-size: 16px;
}

/* Team Member Social Links */
.hmg-jb-v4-recruiter-social {
  display: flex;
  gap: var(--hmg-jb-v4-space-3);
  margin: var(--hmg-jb-v4-space-4) 0;
  flex-wrap: wrap;
}

.hmg-jb-v4-social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-1);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-700);
  border-radius: var(--hmg-jb-v4-radius-md);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-social-link:hover {
  background: var(--hmg-jb-v4-gray-200);
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-recruiter-specialties {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin: var(--hmg-jb-v4-space-2) 0 0 0;
}

.hmg-jb-v4-recruiter-specialties strong {
  color: var(--hmg-jb-v4-gray-700);
}

/* Recruiter page - description clamp: 9 lines by default, 2 when skills are visible */
#recruiter-jobs-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-description .job-excerpt {
  -webkit-line-clamp: 9;
}
#recruiter-jobs-grid .hmg-jb-v4-job-card:has(.hmg-jb-v4-job-skills-tags:not([style*="display: none"])) .hmg-jb-v4-job-description .job-excerpt {
  -webkit-line-clamp: 2;
}
#recruiter-jobs-grid .hmg-jb-v4-job-description h2,
#recruiter-jobs-grid .hmg-jb-v4-job-description h3,
#recruiter-jobs-grid .hmg-jb-v4-job-description h4 {
  font-size: 14px;
}

/* Recruiter page - job card flex layout (keeps Apply button anchored to bottom) */
#recruiter-jobs-grid .hmg-jb-v4-job-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#recruiter-jobs-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#recruiter-jobs-grid .hmg-jb-v4-job-card .hmg-jb-v4-job-actions {
  margin-top: auto;
  flex-shrink: 0;
}

/* ============================================================================
   JOB DETAIL SECTIONS (BOLT DESIGN)
   ============================================================================ */

/* Job Detail Section Container */
.hmg-jb-v4-job-detail-section {
  margin-bottom: var(--hmg-jb-v4-space-6);
  padding-bottom: var(--hmg-jb-v4-space-4);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-detail-section h3{
  font-size: var(--hmg-jb-v4-text-lg);
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-detail-section h2{
  font-size: var(--hmg-jb-v4-text-xl);
}

.hmg-jb-v4-results-layout-content .hmg-jb-v4-job-detail-section h4{
  font-size: var(--hmg-jb-v4-text-base);
}


.hmg-jb-v4-job-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Section Titles */
.hmg-jb-v4-job-detail-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-4);
  line-height: 1.4;
}

/* Section spacing - Bolt standard: 32px between major sections */
.hmg-jb-v4-job-details-panel > section,
.hmg-jb-v4-job-details-panel > .hmg-jb-v4-section {
  margin-bottom: 32px !important;
}

.hmg-jb-v4-job-details-panel > section:last-child,
.hmg-jb-v4-job-details-panel > .hmg-jb-v4-section:last-child {
  margin-bottom: 0 !important;
}

/* Responsive Video Container */
.hmg-jb-v4-job-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
  background: var(--hmg-jb-v4-gray-100);
  border-radius: var(--hmg-jb-v4-radius-md);
}

.hmg-jb-v4-job-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--hmg-jb-v4-radius-md);
}

/* Job Description */
.hmg-jb-v4-job-detail-description {
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
  font-size: 1rem;
}

.hmg-jb-v4-job-detail-description p {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-description ul,
.hmg-jb-v4-job-detail-description ol {
  margin-left: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-description li {
  margin-bottom: var(--hmg-jb-v4-space-2);
}

/* Job Requirements */
.hmg-jb-v4-job-detail-requirements {
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
  font-size: 1rem;
}

.hmg-jb-v4-job-detail-requirements p {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-requirements ul,
.hmg-jb-v4-job-detail-requirements ol {
  margin-left: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-requirements li {
  margin-bottom: var(--hmg-jb-v4-space-2);
}

/* Additional Information */
.hmg-jb-v4-job-detail-additional {
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
  font-size: 1rem;
}

.hmg-jb-v4-job-detail-additional p {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Benefits */
.hmg-jb-v4-job-detail-benefits {
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.6;
  font-size: 1rem;
}

.hmg-jb-v4-job-detail-benefits p {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-benefits ul,
.hmg-jb-v4-job-detail-benefits ol {
  margin-left: var(--hmg-jb-v4-space-4);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-job-detail-benefits li {
  margin-bottom: var(--hmg-jb-v4-space-2);
}

/* Skills Tags (Bolt Style) */
.hmg-jb-v4-job-skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-2);
  margin-top: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-skill-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--hmg-jb-v4-space-1) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-700);
  border-radius: var(--hmg-jb-v4-radius);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--hmg-jb-v4-gray-200);
  transition: var(--hmg-jb-v4-transition);
  border-radius: 24px;
}

.hmg-jb-v4-skill-tag:hover {
  background: var(--hmg-jb-v4-primary-light);
  color: var(--hmg-jb-v4-primary);
  border-color: var(--hmg-jb-v4-primary-light);
}

/* Company Profile */
.hmg-jb-v4-company-profile {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-company-logo-img {
  max-width: 120px;
  max-height: 60px;
  object-fit: contain;
  border-radius: var(--hmg-jb-v4-radius);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  padding: var(--hmg-jb-v4-space-2);
}

/* ===== BOLT APPLY DROPDOWN COMPONENTS ===== */

/* Apply Section Container */
.hmg-jb-v4-job-apply-section {
  margin: var(--hmg-jb-v4-space-6) 0;
  padding: var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-gray-50);
  border-radius: var(--hmg-jb-v4-radius-lg);
  border: 1px solid var(--hmg-jb-v4-gray-200);
}

/* Apply Dropdown Container */
.hmg-jb-v4-apply-dropdown {
  position: relative;
  display: inline-flex;
  border-radius: var(--hmg-jb-v4-radius);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Main Apply Button */
.hmg-jb-v4-apply-btn-primary {
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-primary);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-6);
  font-size: var(--hmg-jb-v4-text-base);
  font-weight: 600;
  border-radius: var(--hmg-jb-v4-radius) 0 0 var(--hmg-jb-v4-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-apply-btn-primary:hover {
  background: var(--hmg-jb-v4-primary-hover);
  border-color: var(--hmg-jb-v4-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Dropdown Toggle Button */
.hmg-jb-v4-apply-btn-dropdown {
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--hmg-jb-v4-space-3);
  border-radius: 0 var(--hmg-jb-v4-radius) var(--hmg-jb-v4-radius) 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hmg-jb-v4-apply-btn-dropdown:hover {
  background: var(--hmg-jb-v4-primary-hover);
  border-color: var(--hmg-jb-v4-primary-hover);
}

/* Dropdown Menu */
.hmg-jb-v4-apply-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 200;
  margin-top: var(--hmg-jb-v4-space-1);
  min-width: 200px;
  display: none; /* Hidden by default */
  max-height: 215px;
  overflow: scroll;
  overflow-x: hidden;
}

/* Apply Options */
.hmg-jb-v4-apply-option {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  color: var(--hmg-jb-v4-gray-700);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100);
  flex-direction: column;
}

.hmg-jb-v4-apply-option:last-child {
  border-bottom: none;
}

.hmg-jb-v4-apply-option:hover {
  background: var(--hmg-jb-v4-gray-50);
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
}

/* Apply Option Icons */
.hmg-jb-v4-apply-option i {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Apply Divider */
.hmg-jb-v4-apply-divider {
  height: 1px;
  background: var(--hmg-jb-v4-gray-200);
  margin: var(--hmg-jb-v4-space-1) 0;
}

/* Apply Option Specific Styling */
.hmg-jb-v4-apply-online:hover {
  background: rgba(37, 99, 235, 0.05);
}

.hmg-jb-v4-apply-indeed:hover {
  background: rgba(45, 103, 173, 0.05);
  color: #2d67ad;
}

.hmg-jb-v4-apply-linkedin:hover {
  background: rgba(10, 102, 194, 0.05);
  color: #0a66c2;
}

.hmg-jb-v4-quick-apply:hover {
  background: rgba(16, 185, 129, 0.05);
  color: #10b981;
}

.hmg-jb-v4-apply-later:hover {
  background: rgba(245, 158, 11, 0.05);
  color: #f59e0b;
}

.hmg-jb-v4-refer-friend:hover {
  background: rgba(139, 92, 246, 0.05);
  color: #8b5cf6;
}

.hmg-jb-v4-save-job:hover {
  background: rgba(239, 68, 68, 0.05);
  color: #ef4444;
}

/* Font Awesome Integration with v4 Styling */
.jbfa {
  font-family: 'HMGJBFontAwesome' !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.hmg-jb-v4-job-info-icon.jbfa-dollar {
  color: var(--hmg-jb-v4-primary);
}

/* Ensure Font Awesome icons inherit proper sizing */
.hmg-jb-v4-job-info-icon.jbfa {
  font-size: 14px !important;
}

/* Hide duplicate icons in job cards */
.hmg-jb-v4-job-info-item svg + svg,
.hmg-jb-v4-job-info-item .jbfa + .jbfa {
  display: none !important;
}

/* Location display formatting */
.hmg-jb-v4-location-display {
  font-size: inherit !important;
  color: inherit !important;
}

.hmg-jb-v4-apply-icon.jbfa,
.hmg-jb-v4-applied-icon.jbfa {
  margin-right: var(--hmg-jb-v4-space-1);
}

/* Job Info Icon Styling */
.hmg-jb-v4-job-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-gray-500);
}

.hmg-jb-v4-job-info-icon.hmg-jb-v4-icon-dollar {
  color: var(--hmg-jb-v4-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hmg-jb-v4-apply-dropdown {
    width: 100%;
  }
  
  .hmg-jb-v4-apply-btn-primary {
    flex: 1;
    justify-content: center;
  }
  
  .hmg-jb-v4-apply-dropdown-menu {
    left: 0;
    right: 0;
    min-width: auto;
  }

  .hmg-jb-v4-quick-apply-body {
    background: var(--hmg-jb-v4-white);
    border: 1px solid var(--hmg-jb-v4-gray-200);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
  }

  .hmg-jb-v4-quick-apply-body .hmg-jb-v4-page-title {
    margin-top: 24px;
  }

  #applyform .hmg-jb-v4-btn {
    width: 100%;
  }
}

/* ===== SKIP THE SEARCH BOX ===== */

.hmg-jb-v4-skip-search-box {
  margin-top: var(--hmg-jb-v4-space-4);
}

/* ===== RELATED JOBS BOX ===== */

.hmg-jb-v4-related-jobs-box {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-6);
  margin-top: var(--hmg-jb-v4-space-4);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-related-jobs-title {
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 var(--hmg-jb-v4-space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-related-jobs-loading,
.hmg-jb-v4-related-jobs-empty,
.hmg-jb-v4-related-jobs-error {
  text-align: center;
  padding: var(--hmg-jb-v4-space-6);
  color: var(--hmg-jb-v4-gray-500);
  font-size: var(--hmg-jb-v4-text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-related-jobs-error {
  color: var(--hmg-jb-v4-red-600);
}

.hmg-jb-v4-related-jobs-items {
  margin-top: var(--hmg-jb-v4-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-related-job-item {
  /* border: 1px solid var(--hmg-jb-v4-gray-200); */
  border-radius: var(--hmg-jb-v4-radius);
  transition: all 0.2s ease;
}

.hmg-jb-v4-related-job-item:hover {
  /* border-color: var(--hmg-jb-v4-primary); */
  border: none;
  background: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  /* box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1); */
  transform: translateY(-1px);
}

.hmg-jb-v4-related-job-item:hover h5 {
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-related-job-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hmg-jb-v4-space-4);
  text-decoration: none;
  color: inherit;
}

.hmg-jb-v4-related-job-link:hover {
  text-decoration: none;
  color: inherit;
}

.hmg-jb-v4-related-job-content {
  flex: 1;
}

.hmg-jb-v4-related-job-title {
  font-size: var(--hmg-jb-v4-text-base);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
  line-height: 1.4;
}

.hmg-jb-v4-related-job-location,
.hmg-jb-v4-related-job-salary {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-related-job-salary {
  margin-top: var(--hmg-jb-v4-space-1);
  color: var(--hmg-jb-v4-primary);
  font-weight: 500;
}

.hmg-jb-v4-related-job-arrow {
  color: var(--hmg-jb-v4-gray-400);
  transition: all 0.2s ease;
}

.hmg-jb-v4-related-job-item:hover .hmg-jb-v4-related-job-arrow {
  color: var(--hmg-jb-v4-primary);
  transform: translateX(2px);
}

.hmg-jb-v4-related-jobs-actions {
  margin-top: var(--hmg-jb-v4-space-4);
  padding-top: var(--hmg-jb-v4-space-4);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-save-search-btn,
.hmg-jb-v4-login-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--hmg-jb-v4-text-sm);
}


/* ===== JOB DETAIL HEADER LAYOUT FIXES ===== */

/* Reduce title padding */
.hmg-jb-v4-job-detail-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Job Detail Meta (location, salary, date) */
.hmg-jb-v4-job-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-4);
  margin: var(--hmg-jb-v4-space-3) 0;
}

.hmg-jb-v4-job-detail-location,
.hmg-jb-v4-job-detail-salary,
.hmg-jb-v4-job-detail-date {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-1);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-job-detail-meta .jbfa {
  font-size: var(--hmg-jb-v4-text-lg);
}

/* Job Detail Grid (in header area) - Subtle Inline Style */
.hmg-jb-v4-job-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--hmg-jb-v4-space-6);
  margin-top: var(--hmg-jb-v4-space-2);
  padding: 0;
  background: transparent;
  border: none;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-job-info-custom-fields {
  display: grid;
  gap: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-job-detail-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-job-detail-label {
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 400;
  color: var(--hmg-jb-v4-gray-600);
}

/* .hmg-jb-v4-job-detail-label:after {
  content: ":";
} */

.hmg-jb-v4-job-detail-value {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-700);
  font-weight: 500;
}

/* ===== FONT AWESOME LOADING FIX ===== */

/* CRITICAL: Force Font Awesome font loading by using it immediately */
.hmg-jb-v4-container:before {
  content: "\f000";
  font-family: 'HMGJBFontAwesome';
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Ensure Font Awesome icons display properly in v4 components */
.hmg-jb-v4-container .jbfa {
  font-family: 'HMGJBFontAwesome' !important;
  display: inline-block !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure jbfa classes work properly in v4 components */
.jbfa {
  font-family: 'HMGJBFontAwesome' !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Specific v4 component Font Awesome fixes */
.hmg-jb-v4-job-card .jbfa,
.hmg-jb-v4-job-details-panel .jbfa,
.hmg-jb-v4-apply-dropdown .jbfa,
.hmg-jb-v4-recruiter-contact-nav .jbfa {
  font-family: 'HMGJBFontAwesome' !important;
}

/* Recruiter Contact Navigation */
.hmg-jb-v4-recruiter-contact-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-2);
  margin: 0;
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  background: var(--hmg-jb-v4-gray-50);
  border-radius: var(--hmg-jb-v4-radius-lg);
  border: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-recruiter-contact-nav:not(:has(.hmg-jb-v4-recruiter-nav-item)),
.hmg-jb-v4-recruiter-contact-nav-mobile:not(:has(.hmg-jb-v4-recruiter-nav-item)) {
  display: none;
}

.hmg-jb-v4-recruiter-nav-item {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: var(--hmg-jb-v4-gray-700);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.hmg-jb-v4-recruiter-nav-item:hover {
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Social Media Specific Hover Colors */
.hmg-jb-v4-social-facebook:hover {
  background: #1877f2;
}

.hmg-jb-v4-social-twitter:hover {
  background: #000000;
}

.hmg-jb-v4-social-twitter:hover .jbfa{
  color: white;
}

/* X symbol (replaces Twitter bird) in recruiter contact nav only - Direct Copy-Paste Method, no SVG/font dependency */
.hmg-jb-v4-recruiter-contact-nav .hmg-jb-v4-social-twitter .jbfa-twitter:before {
  content: "𝕏";
  font-family: sans-serif;
  font-weight: bold !important; /* override .hmg-jb-v4-container .jbfa { font-weight: normal !important } so 𝕏 isn't too thin */
}

/* Social Login Button Icons - Ensure Font Awesome works */
.hmg-jb-v4-social-login-grid .jbfa {
  font-family: 'HMGJBFontAwesome' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.hmg-jb-v4-btn-linkedin .jbfa:before,
.hmg-jb-v4-btn-facebook .jbfa:before,
.hmg-jb-v4-btn-twitter .jbfa:before,
.hmg-jb-v4-btn-amazon .jbfa:before,
.hmg-jb-v4-btn-instagram .jbfa:before,
.hmg-jb-v4-btn-github .jbfa:before {
  font-family: 'HMGJBFontAwesome' !important;
}

/* ===== JOB DETAILS PAGE STYLES ===== */

/* Breadcrumb / Back Button */
.hmg-jb-v4-breadcrumb {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  color: var(--hmg-jb-v4-primary);
  font-weight: 500;
  font-size: var(--hmg-jb-v4-text-sm);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-back-button:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: none;
}

/* Detail Grid Layout (Main + Sidebar) */
.hmg-jb-v4-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-8);
}

@media (min-width: 1024px) {
  .hmg-jb-v4-detail-grid {
    grid-template-columns: 1fr 350px;
  }
}

.hmg-jb-v4-detail-main {
  min-width: 0;
}

.hmg-jb-v4-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-6);
}

/* Detail Card */
.hmg-jb-v4-detail-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  padding: var(--hmg-jb-v4-space-8);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

/* Job Header */
.hmg-jb-v4-job-header {
  padding-top: 16px;
  margin-bottom: var(--hmg-jb-v4-space-8);
  padding-bottom: var(--hmg-jb-v4-space-6);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-job-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.hmg-jb .hmg-jb-v4-job-header-top h1,
.hmg-jb .hmg-jb-v4-job-header-top .h1 {
  font-size: 32px;
}

.hmg-jb-v4-job-title-wrap {
  flex: 1;
  min-width: 0;
}

.hmg-jb-v4-job-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  line-height: 1.3;
  margin-bottom: var(--hmg-jb-v4-space-3);
}

@media (max-width: 768px) {
  .hmg-jb-v4-job-title {
    font-size: 1.5rem;
  }
}

.hmg-jb-v4-job-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-2);
  margin-right: 3px;
}

.hmg-jb-v4-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
}

.hmg-jb-v4-badge-remote {
  background: var(--hmg-jb-v4-green-100);
  color: var(--hmg-jb-v4-green-700);
}

.hmg-jb-v4-save-button {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: var(--hmg-jb-v4-gray-400);
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-header .hmg-jb-v4-save-button {
  border: none;
}

.hmg-jb-v4-save-button:hover {
  color: var(--hmg-jb-v4-red-600);
  background: var(--hmg-jb-v4-red-50);
  border-color: var(--hmg-jb-v4-red-600);
}

.hmg-jb-v4-save-button.saved {
  color: var(--hmg-jb-v4-red-600);
  background: var(--hmg-jb-v4-red-50);
  border-color: var(--hmg-jb-v4-red-600);
}

.hmg-jb-v4-save-button .jbfa {
  font-size: 1.25rem;
}

.hmg-jb-v4-company-name {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-company-name .jbfa {
  color: var(--hmg-jb-v4-gray-400);
}

/* Job Info Grid */
.hmg-jb-v4-job-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-6);
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-save-search-link {
  display: flex;
  align-items: center;
}

.hmg-jb-v4-seo-content-title-mobile {
  display: none;
}
@media (max-width: 768px) {

  #magic-match {
    margin-bottom: 12px;
  }
  
  .hmg-jb-v4-seo-content-title-mobile {
    display: block;
  }

  .hmg-jb-v4-seo-content-title-mobile #category-title-mobile {
    width: 100%;
    margin-bottom: 1rem;
  }

  .hmg-jb-v4-job-info-grid {
    grid-template-columns: 1fr;
    gap: var(--hmg-jb-v4-space-2);
    margin-bottom: var(--hmg-jb-v4-space-3);
  }

  .hmg-jb-v4-job-card .hmg-jb-v4-job-type-section {
    margin-bottom: 12px;
  }

  .hmg-jb-v4-job-skills-tags h4 {
    margin: 12px 0 0 0;
  }

  .hmg-jb-v4-job-title-row .hmg-jb-v4-job-badges {
    display: none;
  }

  .hmg-jb-v4-job-badges-mobile .hmg-jb-v4-job-remote-badge {
    margin-left: 0;
    margin-right: var(--hmg-jb-v4-space-2);
  }
  .hmg-jb-v4-job-results-grid {
    gap: var(--hmg-jb-v4-space-2);
    padding-right: 0;
    display: flex;
    flex-direction: column;
  }
  
  .hmg-jb-v4-job-card-content {
    padding: 5px 24px 24px 24px;
  }

  .hmg-jb-v4-job-header {
    padding-bottom: var(--hmg-jb-v4-space-3);
    margin-bottom: var(--hmg-jb-v4-space-4);
  }

  .hmg-jb-v4-callout-icon-container-mobile {
    display: flex;
  }

  .hmg-jb-v4-callout-icon-container {
    display: none;
  }

  .hmg-jb-v4-callout-title-container {
    display: flex;
    align-items: center;
    gap: var(--hmg-jb-v4-space-2);
  }

  .hmg-jb-v4-filter-tags {
    display: none;
  }

  .hmg-jb-v4-job-results-grid .hmg-jb-v4-skip-search-card {
    margin-bottom: 12px;
  }

  .hmg-jb-v4-job-results-grid .hmg-jb-v4-skip-search-card .hmg-jb-v4-btn-primary{
    justify-content: center;
  }

  .hmg-jb-v4-category-banner {
    margin-bottom: 0;
  }

}

@media (min-width: 768px) {
  .hmg-jb-v4-job-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  #jb-v4-job-results-list .hmg-jb-v4-job-info-grid {
    /* grid-template-columns: 1fr; */
    gap: var(--hmg-jb-v4-space-2);
  }
}

.hmg-jb-v4-info-row {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-info-item {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-base);
}

.hmg-jb-v4-info-item .jbfa {
  color: var(--hmg-jb-v4-gray-400);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.hmg-jb-v4-info-item a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-info-item a:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

/* Job Type Badge */
.hmg-jb-v4-job-type-wrap {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-job-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--hmg-jb-v4-primary) 10%, transparent);;
  color: var(--hmg-jb-v4-primary);
  border-radius: 9999px;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
  border: none;
}

.hmg-jb-v4-job-type-badge:hover {
  background: rgba(37, 99, 235, 0.15);
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: none;
}

/* Content Sections */
.hmg-jb-v4-content-section {
  margin-bottom: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-content-section:last-child {
  margin-bottom: 0;
}

.hmg-jb-v4-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-container .hmg-jb-v4-detail-main .hmg-jb-v4-section-title {
  margin-top: var(--hmg-jb-v4-space-6);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-prose {
  font-size: var(--hmg-jb-v4-text-base);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-prose p {
  margin-bottom: 1rem;
}

.hmg-jb-v4-prose ul,
.hmg-jb-v4-prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.hmg-jb-v4-prose li {
  margin-bottom: 0.5rem;
}

.hmg-jb-v4-prose h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Details Grid (for additional info) */
.hmg-jb-v4-details-grid {
  display: grid;
  gap: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-detail-item {
  display: flex;
  align-items: baseline;
  gap: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-detail-label {
  font-weight: 400;
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-detail-value {
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
}

/* Recruiter Section */
.hmg-jb-v4-recruiter-section {
  padding-top: var(--hmg-jb-v4-space-8);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-recruiter-card {
  display: flex;
  gap: var(--hmg-jb-v4-space-4);
  align-items: center;
}

.hmg-jb-v4-recruiter-card:has(.hmg-jb-v4-recruiter-bio), .hmg-jb-v4-recruiter-card:has(.hmg-jb-v4-recruiter-nav-item) {
  align-items: flex-start;
}

.hmg-jb-v4-recruiter-avatar {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.hmg-jb-v4-recruiter-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
}

.hmg-jb-v4-recruiter-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary, #2563eb) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hmg-jb-v4-recruiter-avatar-placeholder i {
  font-size: 24px;
  color: var(--hmg-jb-v4-gray-500);
}

.hmg-jb-v4-recruiter-info-name-avatar {
  display: none;
}

@media (max-width: 767px) {

  .hmg-jb-v4-recruiter-info-name {
    display: flex;
    gap: 1rem;
  }

  .hmg-jb-v4-recruiter-info-name-text {
    margin-top: auto;
    margin-bottom: auto;
  }

  .hmg-jb-v4-recruiter-info-name-avatar {
    display: block;
  }

  .hmg-jb-v4-detail-grid .hmg-jb-v4-recruiter-avatar, .hmg-jb-v4-detail-grid .hmg-jb-v4-recruiter-avatar-placeholder {
    display: none;
  }

  .hmg-jb-v4-recruiter-info-name-avatar .hmg-jb-v4-recruiter-avatar {
    display: block;
  }

  .hmg-jb-v4-recruiter-info-name-avatar .hmg-jb-v4-recruiter-avatar-placeholder {
    display: flex;
  }

  .hmg-jb-v4-recruiter-avatar-placeholder {
    width: 72px;
    height: 72px;
  }
}

.hmg-jb-v4-recruiter-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.hmg-jb-v4-recruiter-info-left {
  min-width: 0;
}

.hmg-jb-v4-recruit-contact {
  min-width: 0;
}

.hmg-jb-v4-recruit-contact:not(:has(.hmg-jb-v4-recruiter-contact-item)) {
  display: none;
}

.hmg-jb-v4-recruiter-name {
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-recruiter-name:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

.hmg-jb-v4-recruiter-title {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-primary);
  font-weight: 500;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.hmg-jb-v4-recruiter-bio {
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
  margin-bottom: 1rem;
}

.hmg-jb-v4-recruiter-contact {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-recruiter-contact:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

.hmg-jb-v4-recruiter-contact-item {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: var(--hmg-jb-v4-gray-700);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hmg-jb-v4-recruiter-contact-item:hover {
  text-decoration: none;
}

.hmg-jb-v4-recruiter-contact-item:hover span {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
}

.hmg-jb-v4-recruiter-contact-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Skip the Search CTA */
.hmg-jb-v4-skip-search-cta {
  display: flex;
  gap: var(--hmg-jb-v4-space-4);
  padding: var(--hmg-jb-v4-space-6);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--hmg-jb-v4-radius-xl);
  align-items: flex-start;
}

.hmg-jb-v4-skip-search-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  border-radius: var(--hmg-jb-v4-radius-xl);
  flex-shrink: 0;
}

.hmg-jb-v4-skip-search-icon .jbfa {
  font-size: 1.5rem;
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-skip-search-content {
  flex: 1;
  min-width: 0;
}

.hmg-jb-v4-skip-search-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: 0.75rem;
}

.hmg-jb-v4-skip-search-text {
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-700);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.hmg-jb-v4-skip-search-cta .hmg-jb-v4-btn {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* Sidebar Card */
.hmg-jb-v4-sidebar-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  padding: var(--hmg-jb-v4-space-6);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-sidebar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-container .hmg-jb-v4-sidebar-card .hmg-jb-v4-sidebar-title {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-sidebar-text {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Apply Actions */
.hmg-jb-v4-apply-actions {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-already-applied {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-4);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: #15803d;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  text-align: center;
  justify-content: center;
}

.hmg-jb-v4-already-applied .jbfa {
  font-size: 1.125rem;
}

.hmg-jb-v4-btn-block {
  width: 100%;
  justify-content: center;
}

.hmg-jb-v4-btn-secondary {
  background: var(--hmg-jb-v4-gray-100) !important;
  color: var(--hmg-jb-v4-gray-700) !important;
}

.hmg-jb-v4-btn-secondary:hover {
  background: var(--hmg-jb-v4-gray-200) !important;
  color: var(--hmg-jb-v4-gray-900) !important;
}

/* Job Alerts Form */
.hmg-jb-v4-alert-form {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-900);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-input:focus {
  outline: none;
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.hmg-jb-v4-input::placeholder {
  color: var(--hmg-jb-v4-gray-400);
}

/* Social Share */
.hmg-jb-v4-social-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: 0.75rem;
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  background: var(--hmg-jb-v4-white);
  color: var(--hmg-jb-v4-gray-700);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-social-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.hmg-jb-v4-social-linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: white;
}

.hmg-jb-v4-social-linkedin:hover svg {
  color: white;
}

.hmg-jb-v4-social-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: white;
}

.hmg-jb-v4-social-facebook:hover svg {
  color: white;
}

.hmg-jb-v4-social-twitter:hover svg {
  color: white;
}

a.hmg-jb-v4-social-twitter:hover {
  color: white;
}

.hmg-jb-v4-social-copy:hover {
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-700);
}

/* Related Jobs */
.hmg-jb-v4-related-jobs {
  /* Styles for related jobs container - use existing jb_related_jobs component */
}

/* Not Found Page */
.hmg-jb-v4-not-found {
  text-align: center;
  padding: var(--hmg-jb-v4-space-8);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
}

.hmg-jb-v4-not-found .jbfa {
  font-size: 4rem;
  color: #f59e0b;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-not-found h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-not-found p {
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-600);
  margin-bottom: var(--hmg-jb-v4-space-6);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* Alert Messages */
.hmg-jb-v4-alert {
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  border-radius: var(--hmg-jb-v4-radius-lg);
  margin-bottom: var(--hmg-jb-v4-space-6);
  font-size: var(--hmg-jb-v4-text-base);
  line-height: 1.6;
}

.hmg-jb-v4-alert-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #15803d;
}

.hmg-jb-v4-alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400e;
}

.hmg-jb-v4-alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

.hmg-jb-v4-social-linkedin:hover {
  background: #0a66c2;
}

.hmg-jb-v4-social-googleplus:hover {
  background: #dd4b39;
}

/* Screen Reader Only */
.hmg-jb-v4-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  left: -9999px;
}

/* Responsive Design for Sidebar Components */
@media (max-width: 768px) {
  .hmg-jb-v4-skip-search-box,
  .hmg-jb-v4-related-jobs-box {
    margin-top: var(--hmg-jb-v4-space-6);
  }
  
  .hmg-jb-v4-related-job-link {
    padding: var(--hmg-jb-v4-space-3);
  }
}

/* ===== APPLICATION FORM STYLES ===== */

/* Success Container (After Submission) */
.hmg-jb-v4-success-container {
  max-width: 600px;
  margin: 4rem auto;
  text-align: center;
  padding: var(--hmg-jb-v4-space-8);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--hmg-jb-v4-space-4);
  background: rgba(34, 197, 94, 0.1);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hmg-jb-v4-success-icon .jbfa {
  font-size: 2rem;
  color: #15803d;
}

.hmg-jb-v4-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-3);
  text-align: center !important;
}

.hmg-jb-v4-success-message {
  font-size: var(--hmg-jb-v4-text-base);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
  margin-bottom: var(--hmg-jb-v4-space-6);
  text-align: center !important;
}

.hmg-jb-v4-success-message a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
}

/* Apply Grid Layout */
.hmg-jb-v4-apply-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-8);
}

@media (min-width: 768px) {
  .hmg-jb-v4-apply-grid {
    grid-template-columns: 300px 1fr;
  }
}

.hmg-jb-v4-apply-sidebar {
  order: 2;
}

@media (min-width: 768px) {
  .hmg-jb-v4-apply-sidebar {
    order: 1;
  }
  
  .hmg-jb-v4-apply-main {
    order: 2;
  }
}

.hmg-jb-v4-apply-main {
  min-width: 0;
}

/* Job Info Title in Sidebar */
.hmg-jb-v4-job-info-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-4);
  line-height: 1.4;
}

.hmg-jb-v4-job-info-meta {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-meta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.4;
}

.hmg-jb-v4-meta-item .jbfa {
  color: var(--hmg-jb-v4-gray-400);
  font-size: 0.875rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.hmg-jb-v4-job-excerpt {
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Application Form Card */
.hmg-jb-v4-apply-form-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  padding: var(--hmg-jb-v4-space-8);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-apply-form {
  /* Form base styles */
}

/* Already Applied Message */
.hmg-jb-v4-already-applied-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-6);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--hmg-jb-v4-radius-lg);
  color: #15803d;
  font-size: var(--hmg-jb-v4-text-base);
  font-weight: 500;
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-already-applied-message .jbfa {
  font-size: 1.25rem;
}

/* Category Banner (apply page) */
.hmg-jb-v4-category-banner-section {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-category-banner-section .hmg-jb-v4-category-description {
  margin-top: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-category-description {
  padding: var(--hmg-jb-v4-space-4);
  background: var(--hmg-jb-v4-gray-50);
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
}

/* Page Header */
.hmg-jb-v4-page-header {
  margin-bottom: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-page-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .hmg-jb-v4-page-title {
    font-size: 1.5rem;
  }
}

/* Form Elements Base Styles */
.hmg-jb-v4-apply-form .hmg-jb-form-group {
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-apply-form label {
  display: block;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-apply-form .hmg-jb-form-control,
.hmg-jb-v4-apply-form input[type="text"],
.hmg-jb-v4-apply-form input[type="email"],
.hmg-jb-v4-apply-form input[type="tel"],
.hmg-jb-v4-apply-form textarea,
.hmg-jb-v4-apply-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-900);
  transition: var(--hmg-jb-v4-transition);
  background: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-apply-form .hmg-jb-form-control:focus,
.hmg-jb-v4-apply-form input:focus,
.hmg-jb-v4-apply-form textarea:focus,
.hmg-jb-v4-apply-form select:focus {
  outline: none;
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.hmg-jb-v4-apply-form ::placeholder {
  color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-apply-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Required Field Indicator */
.hmg-jb-req {
  color: #dc2626;
  margin-left: 0;
}

/* Footer Text */
.hmg-jb-v4-footer-text {
  margin-top: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  background: var(--hmg-jb-v4-gray-50);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.6;
  color: var(--hmg-jb-v4-gray-600);
}

.hmg-jb-v4-job-detail-content .hmg-jb-v4-footer-text {
  margin-top: 0;
}

/* Related Job Callout */
.hmg-jb-v4-related-job-callout {
  margin-top: var(--hmg-jb-v4-space-6);
}

/* ===== SOCIAL APPLY STYLES ===== */

.hmg-jb-v4-social-apply-container {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-social-apply-button {
  width: 100%;
}

.hmg-jb-v4-btn-monster {
  background: #6e45a6 !important;
  color: white !important;
  border-color: #6e45a6 !important;
}

.hmg-jb-v4-btn-monster:hover {
  background: #5a3787 !important;
  color: white !important;
}

.hmg-jb-v4-btn-linkedin {
  background: #0077b5 !important;
  color: white !important;
  border-color: #0077b5 !important;
}

.hmg-jb-v4-btn-linkedin:hover {
  background: #005885 !important;
  color: white !important;
}

.hmg-jb-v4-btn-facebook {
  background: #1877f2 !important;
  color: white !important;
  border-color: #1877f2 !important;
}

.hmg-jb-v4-btn-facebook:hover {
  background: #166FE5 !important;
  color: white !important;
}

.hmg-jb-v4-btn-twitter {
  background: #000000 !important;
  color: white !important;
  border-color: #000000 !important;
}

.hmg-jb-v4-btn-twitter:hover {
  background: #333333 !important;
  color: white !important;
}

.hmg-jb-v4-btn-amazon {
  background: #ff9900 !important;
  color: #000000 !important;
  border-color: #ff9900 !important;
}

.hmg-jb-v4-btn-amazon:hover {
  background: #ffad33 !important;
  color: #000000 !important;
}

.hmg-jb-v4-btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: white !important;
  border: none !important;
}

.hmg-jb-v4-btn-instagram:hover {
  opacity: 0.9;
  color: white !important;
}

.hmg-jb-v4-btn-github {
  background: #24292e !important;
  color: white !important;
  border-color: #24292e !important;
}

.hmg-jb-v4-btn-github:hover {
  background: #1b1f23 !important;
  color: white !important;
}

/* Indeed Apply Widget Styling */
.hmg-jb-v4-indeed-apply-wrapper {
  width: 100%;
}

.hmg-jb-v4-indeed-apply-wrapper .indeed-apply-widget {
  width: 100% !important;
}

/* Override Indeed's default button styles to match v4 design */
.hmg-jb-v4-social-apply-container .indeed-apply-widget button,
.hmg-jb-v4-social-apply-container .indeed-apply-button {
  width: 100% !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  font-weight: 600 !important;
  font-size: var(--hmg-jb-v4-text-sm) !important;
  transition: var(--hmg-jb-v4-transition) !important;
}

/* ===== FORM HELPER STYLES ===== */

/* Form Rows and Columns */
.hmg-jb-v4-form-row {
  display: grid;
  gap: var(--hmg-jb-v4-space-4);
}

@media (min-width: 640px) {
  .hmg-jb-v4-form-col-2 {
    grid-column: span 1;
  }
  
  .hmg-jb-v4-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Form Static Text */
.hmg-jb-v4-form-static {
  padding: 0.75rem 0;
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-700);
  font-weight: 500;
}

/* Checkbox Wrapper */
.hmg-jb-v4-checkbox-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--hmg-jb-v4-space-2);
  cursor: pointer;
}

.hmg-jb-v4-checkbox {
  margin-top: 0.25rem;
  flex-shrink: 0;
  cursor: pointer;
}

.hmg-jb-v4-checkbox-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  line-height: 1.5;
}

.hmg-jb-v4-help-text {
  font-size: 87%;
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.5;
  font-style: italic;
}

.hmg-jb-v4-help-text a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
}

/* Error Message */
.hmg-jb-v4-error-message {
  padding: var(--hmg-jb-v4-space-3);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--hmg-jb-v4-radius-md);
  color: #991b1b;
  font-size: var(--hmg-jb-v4-text-sm);
  margin-top: var(--hmg-jb-v4-space-2);
}

/* Toggle Button */
.hmg-jb-v4-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2) !important;
  padding: 0.5rem 1rem !important;
  background: var(--hmg-jb-v4-gray-100) !important;
  color: var(--hmg-jb-v4-gray-700) !important;
  border: 1px solid var(--hmg-jb-v4-gray-200) !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  font-size: var(--hmg-jb-v4-text-sm) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: var(--hmg-jb-v4-transition) !important;
  margin: 12px 0 !important;
}

.hmg-jb-v4-toggle-button:hover {
  background: var(--hmg-jb-v4-gray-200) !important;
  color: var(--hmg-jb-v4-gray-900) !important;
}

/* Divider */
.hmg-jb-v4-divider {
  border: none;
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
  margin: var(--hmg-jb-v4-space-6) 0;
}

/* Form Tooltip */
.hmg-jb-v4-form-tooltip {
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-tooltip-text {
  color: var(--hmg-jb-v4-primary);
  font-size: var(--hmg-jb-v4-text-sm);
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Required Note - specificity overrides .hmg-jb-v4-container p { margin: 0 } */
.hmg-jb-v4-container p.hmg-jb-v4-required-note {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin: 0 0 var(--hmg-jb-v4-space-4) 0;
}

/* Fieldset */
.hmg-jb-v4-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Debug Info Styling */
.hmg-jb-v4-debug-info {
  margin-top: var(--hmg-jb-v4-space-3);
  padding: var(--hmg-jb-v4-space-2);
  background: var(--hmg-jb-v4-gray-100);
  border-radius: var(--hmg-jb-v4-radius);
  border: 1px solid var(--hmg-jb-v4-gray-300);
}

.hmg-jb-v4-debug-info small {
  color: var(--hmg-jb-v4-gray-600);
  font-family: monospace;
  font-size: 11px;
}

/* ===== LOGIN PAGE STYLES ===== */

.hmg-jb-v4-login-container {
  max-width: 450px;
  margin: 4rem auto;
  padding: 0 var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-login-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.hmg-jb-v4-login-card .hmg-jb-checkbox .col-sm-12, 
.hmg-jb-v4-apply-form-card .hmg-jb-checkbox .col-sm-12, 
.hmg-jb-v4-quick-apply-card .hmg-jb-checkbox .col-sm-12 {
  padding: 0;
}

.hmg-jb-v4-login-card .hmg-jb-help-block {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin-top: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-apply-form-card .hmg-jb-help-block {
  font-size: 87%;
  font-style: italic;
}

.hmg-jb-v4-login-header {
  padding: var(--hmg-jb-v4-space-8) var(--hmg-jb-v4-space-6) var(--hmg-jb-v4-space-6);
  text-align: center;
  border-bottom: none;
}

.hmg-jb-v4-login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-login-subtitle {
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin: 0;
}

.hmg-jb-v4-login-body {
  padding: 0 var(--hmg-jb-v4-space-6) var(--hmg-jb-v4-space-6) var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-login-footer {
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  background: none;
  text-align: center;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  border-top: none;
}

.hmg-jb h2.hmg-jb-v4-login-title {
  text-align: center;
}

/* Social Login Section */
.hmg-jb-v4-social-login-section {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-social-login-label {
  text-align: center;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-700);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-social-login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmg-jb-v4-space-3);
  margin-bottom: var(--hmg-jb-v4-space-6);
}

@media (min-width: 640px) {
  .hmg-jb-v4-social-login-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Divider with Text */
.hmg-jb-v4-divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--hmg-jb-v4-space-8) 0;
}

.hmg-jb-v4-divider-with-text::before,
.hmg-jb-v4-divider-with-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-divider-with-text span {
  padding: 0 var(--hmg-jb-v4-space-3);
  font-size: var(--hmg-jb-v4-text-xs);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hmg-jb-v4-email-login-label {
  text-align: center;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  margin-bottom: var(--hmg-jb-v4-space-4);
}

/* Forgot Password Link */
.hmg-jb-v4-forgot-password {
  text-align: center;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  margin-top: var(--hmg-jb-v4-space-4);
  margin-bottom: 0;
}

.hmg-jb-v4-password-toggle {
  text-align: center;
  font-size: var(--hmg-jb-v4-text-sm);
  margin-top: var(--hmg-jb-v4-space-4);
  padding-bottom: 1rem;
}

/* ===== PAGINATION STYLES ===== */

.hmg-jb-v4-pagination-container {
  margin-top: var(--hmg-jb-v4-space-8);
  padding: var(--hmg-jb-v4-space-6) 0;
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

#jb-v4-grid-pagination-container {
  margin-top: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-pagination-info {
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
}

.hmg-jb-v4-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-3);
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-md);
  color: var(--hmg-jb-v4-gray-700);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hmg-jb-v4-pagination-btn:hover:not(:disabled) {
  background: var(--hmg-jb-v4-gray-50);
  border-color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--hmg-jb-v4-gray-100);
  color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-pagination-btn svg {
  width: 16px;
  height: 16px;
}

.hmg-jb-v4-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-1);
}

.hmg-jb-v4-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-md);
  color: var(--hmg-jb-v4-gray-700);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hmg-jb-v4-pagination-page:hover {
  background: var(--hmg-jb-v4-gray-50);
  border-color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-pagination-page.active {
  background: var(--hmg-jb-v4-primary, #2563eb);
  border-color: var(--hmg-jb-v4-primary, #2563eb);
  color: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-pagination-page.active:hover {
  opacity: 0.8;
}

.hmg-jb-v4-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--hmg-jb-v4-gray-500);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
}

.hmg-jb-v4-pagination-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--hmg-jb-v4-space-8) 0;
}

.hmg-jb-v4-pagination-loading .hmg-jb-v4-loading-spinner {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-pagination-loading .hmg-jb-v4-spinner-icon {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

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

/* ===== SKELETON LOADING STYLES ===== */

.hmg-jb-v4-skeleton-card {
  pointer-events: none;
  opacity: 0.7;
}

.hmg-jb-v4-skeleton-title,
.hmg-jb-v4-skeleton-company,
.hmg-jb-v4-skeleton-location,
.hmg-jb-v4-skeleton-date {
  background: linear-gradient(90deg, var(--hmg-jb-v4-gray-200) 25%, var(--hmg-jb-v4-gray-100) 50%, var(--hmg-jb-v4-gray-200) 75%);
  background-size: 200% 100%;
  border-radius: var(--hmg-jb-v4-radius-sm);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.hmg-jb-v4-skeleton-title {
  height: 20px;
  width: 70%;
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-skeleton-company {
  height: 16px;
  width: 50%;
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-skeleton-location {
  height: 14px;
  width: 40%;
  margin-right: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-skeleton-date {
  height: 14px;
  width: 30%;
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===== JOB DETAILS SKELETON STYLES ===== */

.hmg-jb-v4-job-details-skeleton {
  padding: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-skeleton-title-large,
.hmg-jb-v4-skeleton-company-large,
.hmg-jb-v4-skeleton-meta-item,
.hmg-jb-v4-skeleton-apply-button,
.hmg-jb-v4-skeleton-section-title,
.hmg-jb-v4-skeleton-paragraph,
.hmg-jb-v4-skeleton-badge {
  background: linear-gradient(90deg, var(--hmg-jb-v4-gray-200) 25%, var(--hmg-jb-v4-gray-100) 50%, var(--hmg-jb-v4-gray-200) 75%);
  background-size: 200% 100%;
  border-radius: var(--hmg-jb-v4-radius-sm);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.hmg-jb-v4-skeleton-title-large {
  height: 28px;
  width: 80%;
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-skeleton-company-large {
  height: 20px;
  width: 60%;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-skeleton-meta-item {
  height: 16px;
  width: 120px;
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-skeleton-badge {
  height: 24px;
  width: 80px;
  margin-right: var(--hmg-jb-v4-space-2);
  margin-bottom: var(--hmg-jb-v4-space-3);
  display: inline-block;
  border-radius: var(--hmg-jb-v4-radius-full);
}

.hmg-jb-v4-skeleton-apply-button {
  height: 44px;
  width: 140px;
  margin: var(--hmg-jb-v4-space-4) 0;
  border-radius: var(--hmg-jb-v4-radius-md);
}

.hmg-jb-v4-skeleton-section-title {
  height: 24px;
  width: 50%;
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-skeleton-paragraph {
  height: 16px;
  width: 100%;
  margin-bottom: var(--hmg-jb-v4-space-3);
}

.hmg-jb-v4-skeleton-paragraph.short {
  width: 75%;
}

/* Detail panel content fade-in on job selection */
@keyframes hmg-jb-v4-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hmg-jb-v4-job-details-content {
  animation: hmg-jb-v4-fade-in 0.25s ease-out both;
}

/* Mobile pagination adjustments */
@media (max-width: 768px) {
  .hmg-jb-v4-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--hmg-jb-v4-space-4);
  }
  
  .hmg-jb-v4-pagination-info {
    text-align: center;
  }
  
  .hmg-jb-v4-pagination-controls {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .hmg-jb-v4-pagination-btn {
    font-size: var(--hmg-jb-v4-text-xs);
    padding: var(--hmg-jb-v4-space-2);
  }
  
  .hmg-jb-v4-pagination-page {
    width: 36px;
    height: 36px;
    font-size: var(--hmg-jb-v4-text-xs);
  }
}

/* Location Typeahead Dropdown Styling - Match Category Dropdown */
.hmg-jb-v4-typeahead-dropdown {
  background: white;
  border: 1px solid var(--hmg-jb-v4-border-color, #e5e7eb);
  border-radius: var(--hmg-jb-v4-border-radius, 0.5rem);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

.hmg-jb-v4-typeahead-wrapper .hmg-jb-v4-typeahead-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}

.hmg-jb-v4-typeahead-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.hmg-jb-v4-typeahead-dropdown li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  color: var(--hmg-jb-v4-text-color, #374151);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm, 14px);
  line-height: 1.4;
  border-bottom: 1px solid var(--hmg-jb-v4-border-light, #f3f4f6);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.hmg-jb-v4-typeahead-dropdown .hmg-jb-v4-typeahead-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  color: var(--hmg-jb-v4-text-color, #374151);
  text-decoration: none;
  font-size: var(--hmg-jb-v4-text-sm, 14px);
  line-height: 1.4;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.hmg-jb-v4-typeahead-dropdown li a:focus {
  outline: none;
}

.hmg-jb-v4-typeahead-dropdown li:last-child a,
.hmg-jb-v4-typeahead-dropdown li:last-child .hmg-jb-v4-typeahead-option {
  border-bottom: none;
}

/* Hover/active: thin left accent via inset box-shadow so no layout/padding change = no flicker */
.hmg-jb-v4-typeahead-dropdown li a:hover,
.hmg-jb-v4-typeahead-dropdown li.active a {
  background-color: transparent;
  color: var(--hmg-jb-v4-primary, #00704a);
  font-weight: 500;
  border-left: none;
  box-shadow: inset 2px 0 0 0 var(--hmg-jb-v4-primary, #00704a);
}

.hmg-jb-v4-typeahead-dropdown li:hover .hmg-jb-v4-typeahead-option,
.hmg-jb-v4-typeahead-dropdown li.active .hmg-jb-v4-typeahead-option {
  background-color: transparent;
  color: var(--hmg-jb-v4-primary, #00704a);
  font-weight: 500;
}

.hmg-jb-v4-typeahead-dropdown.dropdown-menu>.active>a:hover {
  background-color: transparent;
}

/* Ensure typeahead dropdown appears above other elements */
.hmg-jb-v4-location-typeahead-container {
  position: relative;
  z-index: 10;
}

.hmg-jb-v4-location-typeahead-container .hmg-jb-v4-typeahead-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* JBFA Icon Font Support - v4 Self-Contained */
.jbfa {
  display: inline-block;
  font: normal normal normal 16px/1 HMGJBFontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'HMGJBFontAwesome' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none;
  line-height: 1;
}

/* Font Awesome Icon Definitions - Common Icons Used in v4 */
.jbfa-envelope:before { content: "\f0e0"; }
.jbfa-lock:before { content: "\f023"; }
.jbfa-linkedin:before { content: "\f0e1"; }
.jbfa-facebook:before { content: "\f09a"; }
.jbfa-twitter:before { content: "\f099"; }
.jbfa-amazon:before { content: "\f270"; }
.jbfa-instagram:before { content: "\f16d"; }
.jbfa-github:before { content: "\f09b"; }
.jbfa-home:before { content: "\f015"; }
.jbfa-search:before { content: "\f002"; }
.jbfa-chevron-left:before { content: "\f053"; }
.jbfa-chevron-down:before { content: "\f078"; }
.jbfa-chevron-up:before { content: "\f077"; }
.jbfa-chevron-right:before { content: "\f054"; }
.jbfa-star:before { content: "\f005"; }
.jbfa-star-o:before { content: "\f006"; }
.jbfa-heart:before { content: "\f004"; }
.jbfa-heart-o:before { content: "\f08a"; }
.jbfa-bell:before { content: "\f0f3"; }
.jbfa-user:before { content: "\f007"; }
.jbfa-sign-out:before { content: "\f08b"; }
.jbfa-pencil:before { content: "\f040"; }
.jbfa-exclamation-triangle:before { content: "\f071"; }
.jbfa-check:before { content: "\f00c"; }
.jbfa-times:before { content: "\f00d"; }
.jbfa-plus:before { content: "\f067"; }
.jbfa-minus:before { content: "\f068"; }
.jbfa-dollar:before { content: "\f155"; }
.jbfa-map-marker:before { content: "\f041"; }
.jbfa-calendar:before { content: "\f073"; }
.jbfa-clock-o:before { content: "\f017"; }
.jbfa-briefcase:before { content: "\f0b1"; }
.jbfa-building:before { content: "\f1ad"; }
.jbfa-phone:before { content: "\f095"; }
.jbfa-external-link:before { content: "\f08e"; }
.jbfa-share:before { content: "\f064"; }
.jbfa-download:before { content: "\f019"; }
.jbfa-upload:before { content: "\f093"; }
.jbfa-file-o:before { content: "\f016"; }
.jbfa-file-pdf-o:before { content: "\f1c1"; }
.jbfa-spinner:before { content: "\f110"; }
.jbfa-cog:before { content: "\f013"; }
.jbfa-filter:before { content: "\f0b0"; }
.jbfa-sort:before { content: "\f0dc"; }
.jbfa-sort-asc:before { content: "\f0de"; }
.jbfa-sort-desc:before { content: "\f0dd"; }
.jbfa-th:before { content: "\f00a"; }
.jbfa-th-list:before { content: "\f00b"; }
.jbfa-bars:before { content: "\f0c9"; }
.jbfa-close:before { content: "\f00d"; }
.jbfa-remove:before { content: "\f00d"; }

#verify-information-modal h2 {
  text-align: unset;
}

#verify-information-modal .modal-content {
  border-radius: 1rem;
}

#verify-information-modal .semibold {
  font-weight: 600;
  margin: 0;
}

#verify-information-modal .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#verify-information-modal .mb-8 {
  margin-bottom: 2rem;
}

#verify-information-modal .mb-4 {
  margin-bottom: 1rem;
}

#verify-information-modal .mb-2 {
  margin-bottom: 0.5rem;
}

#verify-information-modal .modal-body-top-content {
  text-align: center;
}

#verify-information-modal .svg-icon {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 18%, transparent);
  width: 4rem;
  height: 4rem;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 9999px;
  margin-left: auto;
  margin-right: auto;
}

#verify-information-modal .svg-icon svg{
  color: var(--hmg-jb-v4-primary);
  width: 2rem;
  height: 2rem;
  vertical-align: middle
}

#verify-information-modal .text-gray-600 {
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

#verify-information-modal .modal-body-top-content p {
  margin: 0;
}

p.semibold {
  font-weight: 600;
}

p.text-sm {
  font-size: var(--hmg-jb-v4-text-sm);
  line-height: 1.25rem;
}

#verify-information-modal .modal-content {
  padding: 2rem;
}

#verify-information-modal .modal-header {
  padding: 0;
  border: 0;
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button {
  transition-duration: 200ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  padding: 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--hmg-jb-v4-radius-lg);
  border-color: rgb(229 231 235 / 1);
  background-color: rgb(249 250 251 / 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  gap: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button:hover {
  border-color: rgb(209 213 219 / 1);
  background-color: rgb(249 250 251 / 1);
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button.active {
  border-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 30%, transparent);
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 5%, transparent);
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button.active:hover {
  border-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 70%, transparent);
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 15%, transparent);
}

.hmg-jb-v4-one-click-apply-button h3 {
  margin: 0;
  font-size: 1.1rem;
  margin-bottom: .25rem;
}

.hmg-jb-v4-one-click-apply-button p {
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button .svg-icon {
  height: 3.5rem;
  border-radius: 10px;
  margin: 0;
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button:not(.active) .svg-icon {
  background-color: rgb(243 244 246 / 1);
}

#verify-information-modal .hmg-jb-v4-one-click-apply-button:not(.active) .svg-icon svg{
  color: rgb(75 85 99 / 1);
}

#verify-information-modal .modal-body-bottom-content {
  margin-top: 1rem;
  background-color: rgb(249 250 251 / 1);
  padding: 1rem;
  border-radius: .5rem;
  font-weight: 400;
}

#verify-information-modal .modal-body-bottom-content h4 {
  font-size: 18px;
  margin: 0;
  margin-bottom: .75rem;
}

#verify-information-modal .modal-bottom-user-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-bottom-user-content .font-medium {
  font-weight: 500;
}

#verify-information-modal .hmg-jb-v4-apply-button-content {
  flex: 1 1 0%;
}

#verify-information-modal .modal-body-bottom-content a {
  color: var(--hmg-jb-v4-primary);
}

#verify-information-modal .modal-footer {
  font-size: 14px;
}

#verify-information-modal .modal-footer a{
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
}

#verify-information-modal .hmg-jb-checkbox input[type="checkbox"]:checked + span:before {
 background: var(--hmg-jb-v4-secondary);
}

/* Enhanced Alert Styles for One-Click Apply Modal */
#verify-information-modal .hmg-jb-v4-alert-icon {
  display: flex;
  gap: 5px;
  align-items: center;
}

#verify-information-modal .hmg-jb-v4-alert-icon svg {
  width: 20px;
  height: 20px;
  color: #dc2626;
}

#verify-information-modal .hmg-jb-v4-alert-content {
  flex: 1;
}

#verify-information-modal .hmg-jb-v4-alert-title {
  font-weight: 600;
  margin-bottom: var(--hmg-jb-v4-space-2);
  font-size: var(--hmg-jb-v4-text-base);
  color: #991b1b;
}

#verify-information-modal .hmg-jb-v4-alert-messages p {
  font-size: var(--hmg-jb-v4-text-sm);
  margin-bottom: var(--hmg-jb-v4-space-1);
}

#verify-information-modal .hmg-jb-v4-alert-messages p:last-child {
  margin-bottom: 0;
}

.hmg-jb-v4-login-title {
  text-align: center;
}

/* ===== SAVED JOBS PAGE STYLES ===== */

/* Page Header */
.hmg-jb-v4-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--hmg-jb-v4-space-8);
  padding-bottom: var(--hmg-jb-v4-space-6);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hmg-jb-v4-page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0;
}

/* View Toggle */
.hmg-jb-v4-view-toggle {
  display: flex;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-lg);
  padding: 0.25rem;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-view-btn {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border: none;
  background: transparent;
  color: var(--hmg-jb-v4-gray-500);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  border-radius: var(--hmg-jb-v4-radius-md);
  cursor: pointer;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-view-btn:hover {
  color: var(--hmg-jb-v4-gray-700);
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-view-btn-active {
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-view-btn .hmg-jb-v4-view-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
}

/* Saved Jobs Grid */
.hmg-jb-v4-jobs-grid {
  margin-bottom: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-saved-jobs-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.25rem;
}

.hmg-jb-v4-saved-jobs-page .hmg-jb-v4-job-card {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.hmg-jb-v4-job-card:hover {
  border-color: var(--hmg-jb-v4-gray-300);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-job-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
}

.hmg-jb-v4-job-title-section {
  flex: 1;
  margin-right: 0.5rem;
}

.hmg-jb-v4-job-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.hmg-jb-v4-job-title a {
  color: var(--hmg-jb-v4-gray-900);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-title a:hover {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
}

.hmg-jb-v4-company-info {
  display: flex;
  align-items: center;
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  margin: 0;
}

.hmg-jb-v4-company-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}

.hmg-jb-v4-unsave-btn {
  background: none !important;
  border: none !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  padding: 0.375rem !important;
  border-radius: var(--hmg-jb-v4-radius-md) !important;
  transition: all 0.2s ease !important;
}

.hmg-jb-v4-unsave-btn:hover {
  color: #dc2626 !important;
  background: #fef2f2 !important;
}

.hmg-jb-v4-heart-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.hmg-jb-v4-job-details {
  margin-bottom: 1.5rem;
}

.hmg-jb-v4-job-meta-item {
  display: flex;
  align-items: center;
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.hmg-jb-v4-job-meta-item:last-child {
  margin-bottom: 0;
}

.hmg-jb-v4-meta-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--hmg-jb-v4-gray-400);
  flex-shrink: 0;
}

.hmg-jb-v4-job-actions {
  display: flex;
  gap: 0.5rem;
}

.hmg-jb-v4-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hmg-jb-v4-apply-btn:hover {
  background: #1d4ed8;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-apply-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

/* Saved Jobs List View */
.hmg-jb-v4-jobs-list {
  margin-bottom: var(--hmg-jb-v4-space-8);
}

.hmg-jb-v4-table-container {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  overflow: hidden;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-saved-jobs-table {
  width: 100%;
  border-collapse: collapse;
}

.hmg-jb-v4-saved-jobs-table thead {
  background: var(--hmg-jb-v4-gray-50);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-saved-jobs-table th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-saved-jobs-table tbody tr {
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-saved-jobs-table tbody tr:hover {
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-saved-jobs-table tbody tr:nth-child(even) {
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-saved-jobs-table tbody tr:nth-child(even):hover {
  background: var(--hmg-jb-v4-gray-100);
}

.hmg-jb-v4-saved-jobs-table td {
  padding: 1rem 1.5rem;
  font-size: var(--hmg-jb-v4-text-sm);
  color: var(--hmg-jb-v4-gray-600);
  font-weight: 500;
}

.hmg-jb-v4-job-title-cell {
  display: flex;
  flex-direction: column;
}

.hmg-jb-v4-job-title-link {
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-job-title-link:hover, .hmg-jb-v4-job-title-link:hover {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
  text-decoration-offset: 2px;
}

.hmg-jb-v4-company-name-small {
  font-size: var(--hmg-jb-v4-text-xs);
  color: var(--hmg-jb-v4-gray-600);
  margin-top: 0.25rem;
}

.hmg-jb-v4-job-title-row {
  margin-bottom: 0.25rem;
}

.hmg-jb-v4-job-title-link {
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  transition: var(--hmg-jb-v4-transition);
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-job-title-link:hover {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
}

.hmg-jb-v4-company-name-small {
  font-size: var(--hmg-jb-v4-text-xs);
  color: var(--hmg-jb-v4-gray-600);
  font-weight: 500;
}

.hmg-jb-v4-table-location,
.hmg-jb-v4-table-category,
.hmg-jb-v4-table-type,
.hmg-jb-v4-table-date {
  color: var(--hmg-jb-v4-gray-600);
  font-weight: 500;
}

.hmg-jb-v4-table-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hmg-jb-v4-table-apply-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
  border: none;
  border-radius: var(--hmg-jb-v4-radius-lg);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
  cursor: pointer;
}

.hmg-jb-v4-table-apply-btn:hover {
  background: var(--hmg-jb-v4-primary-hover);
  color: var(--hmg-jb-v4-white);
  text-decoration: none;
}

.hmg-jb-v4-table-apply-btn .hmg-jb-v4-apply-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.hmg-jb-v4-table-unsave-btn {
  background: none;
  border: none;
  color: var(--hmg-jb-v4-red-600);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--hmg-jb-v4-radius-md);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-table-unsave-btn:hover {
  background: var(--hmg-jb-v4-red-50);
}

.hmg-jb-v4-table-unsave-btn .hmg-jb-v4-heart-icon {
  width: 1rem;
  height: 1rem;
}

/* Mobile List */
.hmg-jb-v4-mobile-list {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  overflow: hidden;
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-mobile-job-card {
  padding: 1.5rem;
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200);
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-job-card:last-child {
  border-bottom: none;
}

.hmg-jb-v4-mobile-job-card:hover {
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-mobile-job-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.hmg-jb-v4-mobile-job-title-section {
  flex: 1;
  margin-right: 0.5rem;
}

.hmg-jb-v4-mobile-job-title {
  margin: 0 0 0.25rem 0;
  font-size: var(--hmg-jb-v4-text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.hmg-jb-v4-mobile-job-title a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: none;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-mobile-job-title a:hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
  text-decoration-offset: 2px;
}

.hmg-jb-v4-mobile-company {
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  margin: 0;
}

.hmg-jb-v4-mobile-job-details {
  margin-bottom: 1rem;
}

.hmg-jb-v4-mobile-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-mobile-detail-row:last-child {
  margin-bottom: 0;
}

.hmg-jb-v4-mobile-label {
  color: var(--hmg-jb-v4-gray-500);
  font-weight: 500;
}

.hmg-jb-v4-mobile-value {
  color: var(--hmg-jb-v4-gray-900);
  font-weight: 600;
}

.hmg-jb-v4-mobile-job-actions {
  display: flex;
  gap: 0.5rem;
}

/* Empty State */
.hmg-jb-v4-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-empty-icon {
  margin-bottom: 1.5rem;
}

.hmg-jb-v4-empty-icon .hmg-jb-v4-heart-icon {
  width: 4rem;
  height: 4rem;
  color: var(--hmg-jb-v4-gray-400);
  margin: 0 auto;
  display: block;
}

.hmg-jb-v4-empty-title {
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 1rem 0;
}

.hmg-jb-v4-empty-description {
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
  max-width: 28rem;
  margin: 0 auto 2rem auto;
}

/* Error State */
.hmg-jb-v4-error-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-radius-xl);
  box-shadow: var(--hmg-jb-v4-shadow-sm);
}

.hmg-jb-v4-error-icon {
  margin-bottom: 1.5rem;
}

.hmg-jb-v4-error-icon .hmg-jb-v4-icon {
  width: 4rem;
  height: 4rem;
  color: var(--hmg-jb-v4-red-600);
  margin: 0 auto;
  display: block;
}

.hmg-jb-v4-error-title {
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 1rem 0;
}

.hmg-jb-v4-error-description {
  color: var(--hmg-jb-v4-gray-600);
  line-height: 1.6;
  max-width: 28rem;
  margin: 0 auto 2rem auto;
}

/* Action Buttons */
.hmg-jb-v4-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .hmg-jb-v4-action-buttons {
    flex-direction: row;
  }
}

/* Pagination */
.hmg-jb-v4-pagination-container {
  margin-top: 2rem;
}

.hmg-jb-v4-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hmg-jb-v4-pagination-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hmg-jb-v4-gray-300);
  background: var(--hmg-jb-v4-white);
  color: var(--hmg-jb-v4-gray-700);
  text-decoration: none;
  border-radius: var(--hmg-jb-v4-radius-md);
  font-size: var(--hmg-jb-v4-text-sm);
  font-weight: 500;
  transition: var(--hmg-jb-v4-transition);
}

.hmg-jb-v4-pagination-btn:hover {
  background: var(--hmg-jb-v4-gray-50);
  border-color: var(--hmg-jb-v4-gray-400);
  text-decoration: none;
}

.hmg-jb-v4-pagination-btn.active {
  background: var(--hmg-jb-v4-primary);
  border-color: var(--hmg-jb-v4-primary);
  color: var(--hmg-jb-v4-white);
}

.hmg-jb-v4-pagination-info {
  text-align: center;
  color: var(--hmg-jb-v4-gray-600);
  font-size: var(--hmg-jb-v4-text-sm);
}

/* Button Sizes */
.hmg-jb-v4-btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: var(--hmg-jb-v4-text-xs);
}

.hmg-jb-v4-btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: var(--hmg-jb-v4-text-sm);
}

.hmg-jb-v4-btn-block {
  width: 100%;
  justify-content: center;
}

/* Responsive Design */
@media (max-width: 767px) {
  .hmg-jb a {
    color: var(--hmg-jb-v4-primary);
  }
  .hmg-jb-v4-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .hmg-jb-v4-header-content {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    border-radius: 0;
  }

  #site-title-v4 {
    font-size: 20px;
  }
  
  .hmg-jb-v4-page-title {
    font-size: 1.75rem;
  }
  
  .hmg-jb-v4-saved-jobs-container {
    grid-template-columns: 1fr;
  }
  
  .hmg-jb-v4-view-btn {
    flex: 1;
    justify-content: center;
  }

  .hmg-jb-v4-job-card:hover {
    border-color: var(--hmg-jb-v4-primary);
  }
}

@media (max-width: 575px) {
  
  .hmg-jb-v4-empty-state,
  .hmg-jb-v4-error-state {
    padding: 2rem 1rem;
  }
  
  .hmg-jb-v4-page-title {
    font-size: 1.5rem;
  }
  
  .hmg-jb-v4-saved-jobs-container {
    grid-template-columns: 1fr;
  }
  
  .hmg-jb-v4-unsave-btn {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.375rem;
  }
  
  .hmg-jb-v4-heart-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Bootstrap visibility classes compatibility */
.hidden-xs {
  display: block !important;
}

.visible-xs {
  display: none !important;
}

.hidden-sm {
  display: block !important;
}

.visible-sm {
  display: none !important;
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
  
  .visible-xs {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
  
  .visible-sm {
    display: block !important;
  }
}

.hmg-jb-page-header {
  border-bottom-width: 0;
}

@media (min-width: 768px) {
  .hmg-jb-page-header {
      border-bottom-width: 0;
  }
}

#jb-user-account-nav {
  background: var(--hmg-jb-v4-white);
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: 12px;
  padding: var(--hmg-jb-v4-space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  #jb-user-account-nav > li {
      margin-bottom: 12px;
  }
}

@media (max-width: 767px) {
  #jb-user-account-nav > li {
      margin-bottom: 6px;
  }
}

#jb-user-account-nav > li > a {
  display: block;
  width: 100%;
  padding: var(--hmg-jb-v4-space-4);
  color: rgb(55 65 81 / 1);
  border-radius: 0.5rem;
  background: none;
  text-decoration: none;
  font-size: 1rem;
  align-items: center;
  display: flex;
  gap: 6px;
}

#jb-user-account-nav > li > a:hover, #jb-user-account-nav > li > a:focus {
  background-color: rgb(249 250 251 / 1);
}

#jb-user-account-nav > li.active > a {
  color: var(--hmg-jb-v4-primary);
  background: color-mix(in srgb, var(--hmg-jb-v4-primary) 5%, transparent);
  border: 1px solid;
  border-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 30%, transparent);
}

@media (min-width: 768px) {
  #jb-user-account-nav > li.active > a::after {
      display: none;
  }
}

.hmg-jb-page-body {
  background: var(--hmg-jb-v4-white);
    border: 1px solid var(--hmg-jb-v4-gray-200);
    border-radius: 12px;
    padding: var(--hmg-jb-v4-space-6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-container .h2 {
  margin-bottom: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-container .hmg-jb-page-subtitle{
  margin-bottom: var(--hmg-jb-v4-space-8)
}

.hmg-jb-page-subtitle {
  color: rgb(75 85 99 / 1);
  margin-bottom: var(--hmg-jb-v4-space-2);
  font-size: 1rem;
}

.hmg-jb label {
  font-size: 1rem;
}

#autocomplete-container input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 9px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #c2c2c2;
  border-radius: 0.5rem;
  box-sizing: border-box !important;
  -webkit-transition: border-color 
  ease-in-out .15s, box-shadow 
  ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color 
  ease-in-out .15s, box-shadow 
  ease-in-out .15s;
  -webkit-appearance: none;
}

#autocomplete-container input:focus {
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 
    inset 0 1px 2px color-mix(in srgb, var(--hmg-jb-v4-primary) 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--hmg-jb-v4-primary) 12%, transparent),
    0 2px 8px color-mix(in srgb, var(--hmg-jb-v4-secondary) 6%, transparent);
}

.autocomplete-container {
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  position: relative;
}

.input-container input {
  flex: 1;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  padding-right: 31px;
  font-size: 16px;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
  border-top: none;
  background-color: #fff;
  z-index: 99;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
}

.autocomplete-items div:hover {
  /* when hovering an item: */
  background-color: rgba(0, 0, 0, 0.1);
}

.autocomplete-items .autocomplete-active {
  /* when navigating through the items using the arrow keys: */
  background-color: rgba(0, 0, 0, 0.1);
}

.clear-button {
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 0;
  height: 100%;
  display: none;
  align-items: center;
}

.clear-button.visible {
  display: flex;
}

.clear-button:hover {
  color: rgba(0, 0, 0, 0.6);
}

#autocomplete-container input, .hmg-jb-form-control, .hmg-jb .hmg-jb-form-control, .hmg-jb input[type=text].hmg-jb-form-control, .hmg-jb input[type=password].hmg-jb-form-control, .hmg-jb input[type=email].hmg-jb-form-control, .hmg-jb input[type=url].hmg-jb-form-control, .hmg-jb select.hmg-jb-form-control, .hmg-jb textarea.hmg-jb-form-control {
  border-radius: 0.5rem;
  border-color: var(--hmg-jb-v4-gray-200);
}

#autocomplete-container input:focus, .hmg-jb-form-control:focus, .hmg-jb .hmg-jb-form-control:focus, .hmg-jb input[type=text].hmg-jb-form-control:focus, .hmg-jb input[type=password].hmg-jb-form-control:focus, .hmg-jb input[type=email].hmg-jb-form-control:focus, .hmg-jb input[type=url].hmg-jb-form-control:focus, .hmg-jb select.hmg-jb-form-control:focus, .hmg-jb textarea.hmg-jb-form-control:focus {
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 
    inset 0 1px 2px color-mix(in srgb, var(--hmg-jb-v4-primary) 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--hmg-jb-v4-primary) 12%, transparent),
    0 2px 8px color-mix(in srgb, var(--hmg-jb-v4-secondary) 6%, transparent);
}

.jb4-phone-input-wrapper {
  display: flex;
  gap: 1rem;
}

.jb4-phone-input-wrapper > div {
  flex: 1;
}

#personalInfoFormBtn, #resumeBtn, #savePrefsBtn {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: auto;
  margin: 0 0 0 auto;
}

/* Resume Card Styles */
.hmg-jb-v4-resume-card {
  border: 1px solid var(--hmg-jb-v4-gray-200);
  border-radius: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-6);
  background: white;
  margin-bottom: 3rem;
}

.hmg-jb-v4-resume-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-resume-info {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-4);
  flex: 1;
}

.hmg-jb-v4-resume-icon {
  width: 3rem;
  height: 3rem;
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 18%, transparent);
  border-radius: var(--hmg-jb-v4-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hmg-jb-v4-file-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-resume-details {
  flex: 1;
}

.hmg-jb-v4-container h4.hmg-jb-v4-resume-filename {
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-900);
  margin: 0 0 var(--hmg-jb-v4-space-1) 0;
  font-size: 1rem;
}

.hmg-jb-v4-resume-date {
  font-size: 0.875rem;
  color: var(--hmg-jb-v4-gray-600);
  margin: 0;
}

.hmg-jb-v4-resume-actions {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-3);
  flex-shrink: 0;
}

.hmg-jb-v4-resume-btn {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-2) var(--hmg-jb-v4-space-4);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--hmg-jb-v4-space-2);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.hmg-jb-v4-resume-btn .hmg-jb-v4-btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.hmg-jb-v4-resume-btn-preview {
  color: var(--hmg-jb-v4-gray-700);
  background-color: var(--hmg-jb-v4-gray-100);
}

.hmg-jb-v4-resume-btn-preview:hover {
  background-color: var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-resume-btn-download {
  color: var(--hmg-jb-v4-primary);
  background-color: var(--hmg-jb-v4-secondary-alpha);
}

.hmg-jb-v4-resume-btn-download:hover {
  background-color: color-mix(in srgb, var(--hmg-jb-v4-primary) 15%, transparent);
}

/* Upload Alternatives Section */
.hmg-jb-v4-upload-alternatives {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-3);
  margin-top: var(--hmg-jb-v4-space-4);
  padding-top: var(--hmg-jb-v4-space-4);
  border-top: 1px solid var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-upload-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}

.hmg-jb-v4-upload-option-btn {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  background-color: var(--hmg-jb-v4-gray-100);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  justify-content: center;
}

.hmg-jb-v4-upload-option-btn:hover {
  background-color: var(--hmg-jb-v4-gray-200);
}

.hmg-jb-v4-upload-option-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hmg-jb-v4-resume-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hmg-jb-v4-resume-actions {
    justify-content: center;
    margin-top: var(--hmg-jb-v4-space-4);
  }
  
  .hmg-jb-v4-resume-btn {
    flex: 1;
    justify-content: center;
  }
}

a:hover, a:focus {
  text-decoration: none;
}

/* Resume Upload Area Styles */
#jb-user-resume .hmg-jb-v4-upload-area {
  border: 2px dashed var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-8);
  text-align: center;
  transition: all 0.2s ease;
  
}

#jb-user-resume .hmg-jb-v4-upload-area{
  margin-bottom: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-upload-area:hover {
  border-color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-upload-content {
  display: flex;
  flex-direction: column;
  gap: var(--hmg-jb-v4-space-4);
}

.hmg-jb-v4-upload-icon-container {
  display: flex;
  justify-content: center;
}

.hmg-jb-v4-upload-icon {
  width: 3rem;
  height: 3rem;
  color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hmg-jb-v4-upload-title {
  color: var(--hmg-jb-v4-gray-700);
  font-weight: 500;
  margin: 0 0 var(--hmg-jb-v4-space-2) 0;
}

.hmg-jb-v4-container p.hmg-jb-v4-upload-subtitle {
  font-size: 0.875rem;
  color: var(--hmg-jb-v4-gray-500);
  margin: 0 0 var(--hmg-jb-v4-space-6) 0;
}

.hmg-jb-v4-upload-input {
  display: none;
}

.hmg-jb-v4-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-6);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-space-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmg-jb-v4-gray-700);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.hmg-jb-v4-upload-option-google-drive {
  padding: 9px 16px;
}

@media (max-width: 640px) {
  .hmg-jb-v4-upload-option-google-drive {
    padding: 9px 18px;
    font-size: 12px;
  }
}

.hmg-jb-v4-upload-btn:hover {
  background: var(--hmg-jb-v4-gray-50);
}

.hmg-jb-v4-upload-btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.hmg-jb-v4-upload-option {
  margin-top: 0.5rem;
}
.hmg-jb-v4-upload-option .hmg-jb-v4-upload-option-bt{
  margin-top: 0.5rem;
}

label.hmg-jb-v4-upload-btn {
  font-weight: 500;
}

.hmg-jb-v4-upload-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hmg-jb-v4-space-2);
  margin-top: var(--hmg-jb-v4-space-4);
  padding: var(--hmg-jb-v4-space-3);
  font-size: 0.875rem;
  color: #059669;
  background-color: #ecfdf5;
  border-radius: var(--hmg-jb-v4-space-2);
  border: 1px solid #a7f3d0;
}

.hmg-jb-v4-upload-indicator-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.hmg-jb-v4-upload-area-dragover {
  border-color: var(--hmg-jb-v4-primary) !important;
  background-color: rgba(37, 99, 235, 0.05) !important;
}

/* ============================================================================
   THANK YOU PAGE STYLES
   Styles for the thank you/confirmation page after application submission
   ============================================================================ */

/* Base thank you page container */
.hmg-jb-v4-thank-you-page {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Style all anchor links within the thank you page container */
.hmg-jb-v4-thank-you-page a:not(.hmg-jb-v4-btn):not(.hmg-jb-btn):not(.hmg-jb-btn-primary) {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
  font-weight: 500;
  transition: all 0.2s ease;
}

.hmg-jb-v4-thank-you-page a:not(.hmg-jb-v4-btn):not(.hmg-jb-btn):not(.hmg-jb-btn-primary):hover {
  color: var(--hmg-jb-v4-primary-hover);
  text-decoration: underline;
  opacity: 0.9;
}

.hmg-jb-v4-thank-you-page a:not(.hmg-jb-v4-btn):not(.hmg-jb-btn):not(.hmg-jb-btn-primary):focus {
  color: var(--hmg-jb-v4-primary-hover);
  outline: 2px solid var(--hmg-jb-v4-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.hmg-jb-v4-thank-you-page a:not(.hmg-jb-v4-btn):not(.hmg-jb-btn):not(.hmg-jb-btn-primary):active {
  color: var(--hmg-jb-v4-primary-hover);
  opacity: 0.8;
}

/* Override legacy button styling with v4 styling */
.hmg-jb-v4-thank-you-page .hmg-jb-btn.hmg-jb-btn-primary,
.hmg-jb-v4-thank-you-page input[type="submit"].hmg-jb-btn-primary {
  background: var(--hmg-jb-v4-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--hmg-jb-v4-radius-lg) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: var(--hmg-jb-v4-text-base) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-btn.hmg-jb-btn-primary:hover,
.hmg-jb-v4-thank-you-page input[type="submit"].hmg-jb-btn-primary:hover {
  background: var(--hmg-jb-v4-primary-hover) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-btn.hmg-jb-btn-primary:focus,
.hmg-jb-v4-thank-you-page input[type="submit"].hmg-jb-btn-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
}

/* Style the save search button links */
.hmg-jb-v4-thank-you-page .hmg-jb-btn-save-search {
  color: var(--hmg-jb-v4-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-btn-save-search:hover {
  color: var(--hmg-jb-v4-primary-hover) !important;
  text-decoration: underline !important;
  opacity: 0.9 !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-btn-save-search:focus {
  color: var(--hmg-jb-v4-primary-hover) !important;
  outline: 2px solid var(--hmg-jb-v4-primary) !important;
  outline-offset: 2px !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-btn-save-search:active {
  opacity: 0.8 !important;
}

/* Related jobs link styling */
.hmg-jb-v4-thank-you-page .hmg-jb-related-jobs a,
.hmg-jb-v4-thank-you-page .hmg-jb-alert-link {
  color: var(--hmg-jb-v4-primary) !important;
  transition: all 0.2s ease !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-related-jobs a:hover,
.hmg-jb-v4-thank-you-page .hmg-jb-alert-link:hover {
  color: var(--hmg-jb-v4-primary-hover) !important;
  text-decoration: underline !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-related-jobs a:focus,
.hmg-jb-v4-thank-you-page .hmg-jb-alert-link:focus {
  outline: 2px solid var(--hmg-jb-v4-primary) !important;
  outline-offset: 2px !important;
}

/* Form styling improvements */
.hmg-jb-v4-thank-you-page .hmg-jb-form-control {
  border: 1px solid var(--hmg-jb-v4-gray-300) !important;
  border-radius: var(--hmg-jb-v4-radius-md) !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-form-control:hover {
  border-color: var(--hmg-jb-v4-gray-400) !important;
}

.hmg-jb-v4-thank-you-page .hmg-jb-form-control:focus {
  border-color: var(--hmg-jb-v4-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* Checkbox styling */
.hmg-jb-v4-thank-you-page .hmg-jb-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hmg-jb-v4-thank-you-page .hmg-jb-checkbox label:hover {
  color: var(--hmg-jb-v4-gray-700);
}

.hmg-jb-v4-thank-you-page .hmg-jb-checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--hmg-jb-v4-primary);
}

.hmg-jb-v4-thank-you-page .hmg-jb-checkbox input[type="checkbox"]:hover {
  transform: scale(1.1);
}

.hmg-jb-v4-thank-you-page .hmg-jb-checkbox input[type="checkbox"]:focus {
  outline: 2px solid var(--hmg-jb-v4-primary);
  outline-offset: 2px;
}

/* ============================================================================
   PRE-QUALIFICATION PAGE STYLES
   Styles for the pre-qualification form before application submission
   ============================================================================ */

.hmg-jb-v4-prequal-page {
  width: 100%;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem;
  background: #fff;
  border-radius: 1rem;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
  text-align: left;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 480px) {
  .hmg-jb-v4-prequal-page {
    padding: 1rem;
  }
  .hmg-jb-v4-prequal-page .hmg-jb-v4-radio-group {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
  .hmg-jb-v4-prequal-page .hmg-jb-v4-radio-inline {
    width: auto;
  }
}

.hmg-jb-v4-prequal-title {
  font-size: var(--hmg-jb-v4-text-xl);
  font-weight: 700;
  color: var(--hmg-jb-v4-gray-900);
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-prequal-label {
  display: block;
  font-size: var(--hmg-jb-v4-text-base);
  font-weight: 600;
  color: var(--hmg-jb-v4-gray-800);
  margin-bottom: var(--hmg-jb-v4-space-3);
}

/* Alert styling for prequal page */
.hmg-jb-v4-prequal-page .hmg-jb-v4-alert {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #1e40af;
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  border-radius: var(--hmg-jb-v4-radius-lg);
}

.hmg-jb-v4-alert-primary {
  background: color-mix(in srgb, var(--hmg-jb-v4-primary, #2563eb) 10%, transparent);
  border: 1px solid var(--hmg-jb-v4-primary, #2563eb);
  color: var(--hmg-jb-v4-primary, #2563eb);
  padding: var(--hmg-jb-v4-space-4) var(--hmg-jb-v4-space-6);
  border-radius: var(--hmg-jb-v4-radius-lg);
}

/* Form group styling */
.hmg-jb-v4-form-group {
  margin-bottom: var(--hmg-jb-v4-space-6);
}

/* Radio button group */
.hmg-jb-v4-radio-group {
  display: flex;
  gap: var(--hmg-jb-v4-space-6);
  margin-top: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-radio-inline {
  display: flex;
  align-items: center;
  gap: var(--hmg-jb-v4-space-2);
  cursor: pointer;
  font-size: var(--hmg-jb-v4-text-base);
  color: var(--hmg-jb-v4-gray-700);
  transition: color 0.2s ease;
}

.hmg-jb-v4-radio-inline:hover {
  color: var(--hmg-jb-v4-gray-900);
}

.hmg-jb-v4-radio {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--hmg-jb-v4-primary);
  transition: transform 0.2s ease;
}

.hmg-jb-v4-radio:hover {
  transform: scale(1.1);
}

.hmg-jb-v4-radio:focus {
  outline: 2px solid var(--hmg-jb-v4-primary);
  outline-offset: 2px;
}

/* Textarea styling */
.hmg-jb-v4-textarea-wrapper {
  margin-top: var(--hmg-jb-v4-space-2);
}

.hmg-jb-v4-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--hmg-jb-v4-space-3) var(--hmg-jb-v4-space-4);
  border: 1px solid var(--hmg-jb-v4-gray-300);
  border-radius: var(--hmg-jb-v4-radius-md);
  font-size: var(--hmg-jb-v4-text-base);
  font-family: inherit;
  color: var(--hmg-jb-v4-gray-900);
  background: var(--hmg-jb-v4-white);
  resize: vertical;
  transition: all 0.2s ease;
}

.hmg-jb-v4-textarea:hover {
  border-color: var(--hmg-jb-v4-gray-400);
}

.hmg-jb-v4-textarea:focus {
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.hmg-jb-v4-textarea::placeholder {
  color: var(--hmg-jb-v4-gray-400);
}

/* Fieldset styling */
.hmg-jb-v4-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Prequal page anchor links */
.hmg-jb-v4-prequal-page a {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
  font-weight: 500;
  transition: all 0.2s ease;
}

.hmg-jb-v4-prequal-page a:hover {
  color: var(--hmg-jb-v4-primary-hover);
  opacity: 0.9;
}

.hmg-jb-v4-prequal-page a:focus {
  outline: 2px solid var(--hmg-jb-v4-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Prequal page button styling - Uses base .hmg-jb-v4-btn-primary styles for consistency */
/* Only add layout-specific overrides here, colors come from base styles */
.hmg-jb-v4-prequal-page .hmg-jb-v4-btn-primary {
  border-radius: var(--hmg-jb-v4-radius-lg);
  padding: 12px 32px !important;
  font-weight: 600;
  font-size: var(--hmg-jb-v4-text-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hmg-jb-v4-prequal-page .hmg-jb-v4-btn-primary:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.hmg-jb-v4-prequal-page .hmg-jb-v4-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   POSTQUAL PAGE STYLES
   Styles for the post-qualification/screening questions page after application
   ============================================================================ */

.hmg-jb-v4-postqual-page {
  width: 100%;
  padding: 1.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Postqual Title */
.hmg-jb-v4-postqual-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Postqual Question Labels */
.hmg-jb-v4-postqual-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Radio Group Container */
.hmg-jb-v4-radio-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

/* Radio Inline Labels */
.hmg-jb-v4-radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #374151;
  transition: color 0.2s ease;
}

.hmg-jb-v4-radio-inline:hover {
  color: var(--hmg-jb-v4-primary);
}

/* Radio Inputs */
.hmg-jb-v4-radio {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--hmg-jb-v4-primary);
  cursor: pointer;
}

.hmg-jb-v4-radio:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  border-radius: 50%;
}

/* Textarea Wrapper */
.hmg-jb-v4-textarea-wrapper {
  margin-top: 0.5rem;
}

/* Textarea */
.hmg-jb-v4-textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  resize: vertical;
  transition: all 0.2s ease;
}

.hmg-jb-v4-textarea:hover {
  border-color: #9ca3af;
}

.hmg-jb-v4-textarea:focus {
  outline: none;
  border-color: var(--hmg-jb-v4-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hmg-jb-v4-textarea::placeholder {
  color: #9ca3af;
}

/* Fieldset */
.hmg-jb-v4-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Screen Reader Only (Accessibility) */
.hmg-jb-v4-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  left: -9999px;
}

/* Postqual Alerts */
.hmg-jb-v4-postqual-page .hmg-jb-v4-alert {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-alert-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  margin-bottom: 1rem;
}

/* Postqual Form Groups */
.hmg-jb-v4-postqual-page .hmg-jb-v4-form-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-form-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Postqual Submit Button - Uses base .hmg-jb-v4-btn-primary styles for consistency */
/* Only add layout-specific overrides here, colors come from base styles */
.hmg-jb-v4-postqual-page .hmg-jb-v4-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem !important;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-btn-primary:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hmg-jb-v4-postqual-page .hmg-jb-v4-btn-primary:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Anchor Links within Postqual */
.hmg-jb-v4-postqual-page a:not(.hmg-jb-v4-btn) {
  color: var(--hmg-jb-v4-primary);
  text-decoration: underline;
  font-weight: 500;
  transition: all 0.2s ease;
}

.hmg-jb-v4-postqual-page a:not(.hmg-jb-v4-btn):hover {
  color: var(--hmg-jb-v4-primary-hover);
  opacity: 0.9;
}

.hmg-jb-v4-postqual-page a:not(.hmg-jb-v4-btn):focus {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  border-radius: 2px;
}

.hmg-jb-v4-postqual-page a:not(.hmg-jb-v4-btn):active {
  opacity: 0.8;
}
.social-login-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.social-login-buttons .hmg-jb-v4-btn {
  width: 3rem;
  height: 3rem;
}

@media (max-width: 768px) {
  .hmg-jb-v4-login-container {
    margin: 2rem 0;
  }

  .hmg-jb h2.hmg-jb-v4-login-title {
    font-size: 28px;
  }

  #applyform .social-login-buttons .hmg-jb-v4-btn {
    height: auto;
    width: 3rem;
  }

  .hmg-jb-v4-container .hmg-jb-v4-social-login-label {
    margin-bottom: 12px;
  }

  .hmg-jb-v4-login-container {
    padding: 0;
  }

  .hmg-jb-v4-divider-with-text {
    margin: 0;
    margin-top: 1rem;
  }

  .hmg-jb-v4-mobile-divider {
    margin: 0;
  }

  .hmg-jb-v4-mobile-nav-item {
    padding: 8px 8px;
    gap: 5px;
  }
}

@media (min-width: 768px) {

  .hmg-jb-v4-login-body .hmg-jb-v4-phone-wrapper .hmg-jb-checkbox > .col-sm-9 {
      float: none !important;
      width: 100% !important;
      padding: 0 !important;
  }

  .hmg-jb-v4-login-body .hmg-jb-v4-phone-wrapper .hmg-jb-checkbox > .col-sm-3 {
      display: none !important;
  }
}

.hmg-jb a:hover, .hmg-jb a:focus {
  text-decoration: none;
}

#jb-v4-share-job-modal {
  z-index: 9000;
}

#jb-v4-share-job-modal .modal-content{
  padding: var(--hmg-jb-v4-space-6);
  border-radius: var(--hmg-jb-v4-radius-xl);
}

#jb-v4-share-job-modal .modal-header{
  border: none;
}

#jb-v4-share-job-modal .hmg-jb-v4-sidebar-card{
  border: none;
  padding: 0;
}

.hmg-jb #jb-v4-share-job-modal .modal-header {
  padding: 0;
}

#jb-v4-list-view .hmg-jb-v4-job-card .hmg-jb-v4-job-skills-tags {
  display: none;
}

#jb-v4-list-view .JBSearchTemplate {
  padding-top: 15px;
  padding-right: 2px;
}

#jb-v4-list-view .JBSearchTemplate {
  height: 100vh;      /* Limit height to 100% of viewport */
  overflow-y: auto;   /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scroll (optional) */
}

/* Chrome, Edge, Safari */
#jb-v4-list-view .JBSearchTemplate::-webkit-scrollbar, #jb-v4-list-view .hmg-jb-v4-job-details-panel::-webkit-scrollbar {
  width: 4px;
}

#jb-v4-list-view .JBSearchTemplate::-webkit-scrollbar-thumb, #jb-v4-list-view .hmg-jb-v4-job-details-panel::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.4);
  border-radius: 3px;
}

#jb-v4-list-view .JBSearchTemplate::-webkit-scrollbar-track, #jb-v4-list-view .hmg-jb-v4-job-details-panel::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}

#jb-v4-grid-view .POST_DATA_SKILLS_TAGS, .hmg-jb-v4-recruiter-page .POST_DATA_SKILLS_TAGS {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hmg-jb-v4-job-skills-tags h4 {
  font-size: 14px;
  margin: 20px 0 10px 0;
}

/* ============================================================================
   APPLY DROPDOWN STACKING (ANTI-FLICKER)
   Keep this at the END of the file so it beats earlier hover rules.
   ============================================================================ */

/* When a dropdown is open, keep its owning container on top (beats hover z-index/transform). */
.hmg-jb-v4-job-card.hmg-jb-v4-job-card-dropdown-open,
.hmg-jb-v4-job-details-panel.hmg-jb-v4-job-details-panel-dropdown-open {
  position: relative !important;
  z-index: 8000 !important; /* below share modal (9000) */
}

/* Ensure dropdown menu itself is very high within its stacking context. */
.hmg-jb-v4-apply-dropdown-menu {
  z-index: 8100 !important;
}

/* Flip dropdown upward when it would overflow the bottom of the visible area */
.hmg-jb-v4-apply-dropdown-container.hmg-jb-v4-dropdown-flip-up .hmg-jb-v4-apply-dropdown-menu {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0;
  margin-bottom: var(--hmg-jb-v4-space-1, 0.25rem);
}

.hmg-jb-v4-apply-dropdown-container.hmg-jb-v4-dropdown-flip-up .hmg-jb-v4-apply-chevron,
.hmg-jb-v4-apply-dropdown-container.hmg-jb-v4-dropdown-flip-up .jbfa-chevron-down,
.hmg-jb-v4-apply-dropdown-container.hmg-jb-v4-dropdown-flip-up .jbfa-angle-down {
  transform: rotate(180deg);
}

/* While any dropdown is open, suppress hover "lift" on other cards to avoid 1-frame behind flash. */
body.hmg-jb-v4-dropdown-any-open .hmg-jb-v4-job-card:hover {
  transform: none !important;
  z-index: auto !important;
}

/* Also suppress transitions while dropdown is open to avoid hover animation repaint flashes. */
body.hmg-jb-v4-dropdown-any-open .hmg-jb-v4-job-card {
  transition: none !important;
}

.hmg-jb-v4-container .hmg-jb-v4-sidebar-card h3 {
  margin-top: 0;
}

/* ============================================================================
   SAVED SEARCHES SPECIFIC STYLES
   ============================================================================ */

/* Alert badge for saved searches in list view */
.hmg-jb-v4-search-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #10b981;
  background-color: #d1fae5;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
  font-weight: 500;
}

.hmg-jb-v4-search-alert-badge i {
  font-size: 11px;
}

/* Success alert styling for saved searches */
.hmg-jb-v4-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  position: relative;
}

.hmg-jb-v4-alert-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}

.hmg-jb-v4-alert .close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
}

.hmg-jb-v4-alert .close:hover {
  opacity: 1;
}

/* Mobile RSS Feed Link - Hidden */
.hmg-jb-v4-mobile-rss-link {
  margin: 12px 0;
  display: none;
  text-align: right;
}

.hmg-jb-v4-mobile-rss-link .hmg-jb-v4-rss-link-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--hmg-jb-v4-primary, #00704a);
  border-radius: 9999px;
  font-size: 14px;
  color: var(--hmg-jb-v4-primary, #00704a);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.hmg-jb-v4-mobile-rss-link .hmg-jb-v4-rss-link-inline:hover {
  background-color: #eff6ff;
  color: var(--hmg-jb-v4-primary-hover, #005a3c);
}

.hmg-jb-v4-mobile-rss-link .hmg-jb-v4-rss-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Hide RSS link on desktop (768px and above) */
@media (min-width: 769px) {
  .hmg-jb-v4-mobile-rss-link {
    display: none !important;
  }
}

/* Delete search button - Bolt Design */
.hmg-jb-v4-delete-search-btn {
  color: #9ca3af !important;
  background: transparent !important;
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.hmg-jb-v4-delete-search-btn:hover {
  color: #ef4444;
  background-color: #fef2f2;
}

.hmg-jb-v4-delete-search-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.hmg-jb-v4-delete-search-btn .hmg-jb-v4-trash-icon {
  flex-shrink: 0;
}

/* Alert toggle buttons for saved searches - Bolt Design */
.hmg-jb-v4-alert-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  border: 1px solid;
}

.hmg-jb-v4-alert-toggle-btn.enabled {
  background-color: #d1fae5;
  color: #065f46;
  border-color: #10b981;
}

.hmg-jb-v4-alert-toggle-btn.enabled:hover {
  background-color: #a7f3d0;
}

.hmg-jb-v4-alert-toggle-btn.disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

.hmg-jb-v4-alert-toggle-btn.disabled:hover {
  background-color: #e5e7eb;
}

.hmg-jb-v4-alert-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.hmg-jb-v4-alert-toggle-btn .hmg-jb-v4-alert-icon {
  flex-shrink: 0;
}

.hmg-jb-v4-alert-toggle-btn-card {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease;
  border-radius: 8px !important;
}

.hmg-jb-v4-alert-toggle-btn-card:hover {
  opacity: 0.8;
}

.hmg-jb-v4-alert-toggle-btn-card:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Toast notification (top-right slide-in) */
.hmg-jb-v4-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 320px;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  opacity: 0;
  transform: translateX(420px);
  transition: all 0.3s ease;
}

.hmg-jb-v4-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.hmg-jb-v4-notification-success {
  border-left: 4px solid #10b981;
}

.hmg-jb-v4-notification-info {
  border-left: 4px solid #3b82f6;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-align: left;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #10b981;
  font-size: 20px;
  line-height: 24px;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-info .hmg-jb-v4-notification-icon,
.hmg-jb-v4-notification.hmg-jb-v4-notification-info .hmg-jb-v4-notification-icon {
  color: #3b82f6;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-text {
  flex: 1;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-text p {
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hmg-jb-v4-notification .hmg-jb-v4-notification-close:hover {
  color: #6b7280;
}

@media (max-width: 480px) {
  .hmg-jb-v4-notification {
    left: 12px;
    right: 12px;
    top: 12px;
    min-width: auto;
    max-width: none;
    border-radius: 10px;
    transform: translateY(-100px);
  }

  .hmg-jb-v4-notification.show {
    transform: translateY(0);
  }

  .hmg-jb-v4-notification .hmg-jb-v4-notification-content {
    padding: 12px 36px 12px 12px;
    gap: 8px;
  }

  .hmg-jb-v4-notification .hmg-jb-v4-notification-icon {
    width: 18px;
    height: 18px;
    font-size: 16px;
    line-height: 18px;
  }

  .hmg-jb-v4-notification .hmg-jb-v4-notification-text p {
    font-size: 13px;
    line-height: 18px;
  }

  .hmg-jb-v4-notification .hmg-jb-v4-notification-close {
    top: 8px;
    right: 8px;
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

.hmg-jb-v4-login-body {
  padding: 0 var(--hmg-jb-v4-space-6) 0 var(--hmg-jb-v4-space-6);
}

.hmg-jb-v4-login-footer {
  padding-top: 0;
  padding-bottom: 2rem;
}

.hmg-jb input[type="checkbox"] + span:before {
  top: 2px;
}

input[type="checkbox"]+span:after {
  top: 4px;
}

/* ============================================================================
   LIST VIEW — TABLE-ROW LAYOUT (matches cp-ui JobsTableView)
   New class prefix: hmg-jb-v4-listrow-*
   ============================================================================ */

/* ---------- header row (hidden by default, shown only in list layout) ---------- */

.hmg-jb-v4-listrow-header {
  display: none;
}

/* Wrapper holds border so header + results grid share the same edges */
.hmg-jb-v4-listrow-wrapper {
  display: block;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-listrow-wrapper {
  border: 1px solid var(--hmg-jb-v4-gray-200, #e5e7eb);
  border-radius: var(--hmg-jb-v4-radius-xl, 12px);
  background: var(--hmg-jb-v4-white, #fff);
  overflow: visible;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-listrow-header {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 2.5fr) 120px;
  gap: 0 16px;
  padding: 12px 16px;
  background: var(--hmg-jb-v4-gray-50, #f9fafb);
  border-bottom: 1px solid var(--hmg-jb-v4-gray-200, #e5e7eb);
}

.hmg-jb-v4-listrow-th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hmg-jb-v4-gray-500, #6b7280);
  white-space: nowrap;
  padding: 0;
}

.hmg-jb-v4-listrow-th-apply {
  text-align: right !important;
}

/* ---------- results grid → stacked column, no card gaps ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-results-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  padding: 0;
}

/* ---------- each card → a table row ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--hmg-jb-v4-gray-100, #f3f4f6);
  box-shadow: none;
  margin: 0;
  overflow: visible;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card:last-child {
  border-bottom: none;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card:nth-child(even) {
  background: rgba(249, 250, 251, 0.5);
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card:hover {
  transform: none;
  background: rgba(239, 246, 255, 0.4);
  box-shadow: none;
}

/* Hide the floating featured banner in row mode */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-featured-banner {
  position: static !important;
  display: none !important;
}

/* Selected state */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card.selected {
  background: #eff6ff;
}

/* ---------- card content → CSS grid matching header columns ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card-content {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 2.5fr) 120px;
  align-items: start;
  gap: 0 16px;
  padding: 12px 16px;
}

/* ---------- column 1 — title (header section) ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-header {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-save-btn {
  order: -1;
  flex-shrink: 0;
  margin-top: 6px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-title-section {
  order: 0;
  min-width: 0;
  flex: 1;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-title {
  font-size: 14px !important;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-company {
  font-size: 12px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-category {
  font-size: 11px;
  color: var(--hmg-jb-v4-gray-500, #6b7280);
}

/* Classet badge — always hidden outside list mode */
.hmg-jb-v4-listrow-classet-badge {
  display: none !important;
}

/* In list mode: show icon-only next to title, hide original in type section */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-listrow-classet-badge[style*="inline-flex"] {
  display: inline-flex !important;
  padding: 3px;
  gap: 0;
  cursor: help;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-listrow-classet-badge > span {
  display: none;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-type-section .hmg-jb-v4-classet-badge:not(.hmg-jb-v4-listrow-classet-badge) {
  display: none !important;
}

/* ---------- flatten info-grid so children join the parent grid ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-grid {
  display: contents;
}

/* column 2 — location (first info-item, identifiable by map-marker icon) */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item:has(.jbfa-map-marker) {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  margin: 0;
}

/* Hide map-marker icon margin-right in list view */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item:has(.jbfa-map-marker) .hmg-jb-v4-job-info-icon {
  margin-right: 0;
}

/* column 4 — salary */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item.hmg-jb-v4-salary-highlight {
  grid-column: 4;
  grid-row: 1;
  font-size: 13px;
  margin: 0;
}

/* Hide money icon in list view */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-salary-highlight .jbfa-money {
  display: none !important;
}

/* Salary text — no truncation in list view */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-salary-highlight .hmg-jb-v4-job-info-text {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* Hide salary icon when POST_PAYRATE is empty */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-salary-highlight:has(.POST_PAYRATE:empty) {
  visibility: hidden;
}

/* hide date & experience in row mode */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item:has(.hmg-jb-v4-job-date-text),
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item.hmg-jb-v4-job-experience-level {
  display: none !important;
}

/* ---------- column 3 — type badge ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-type-section:not(.hmg-jb-v4-job-skills-tags) {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Show badges-mobile in title section, hide remote from type section */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-badges-mobile {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-type-section:not(.hmg-jb-v4-job-skills-tags) .hmg-jb-v4-job-remote-badge {
  display: none !important;
}

/* Remote badge in list row mode */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-remote-badge {
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 0;
  margin-right: 6px;
  order: -1;
}

/* Featured badge in list row mode (shown via CSS when card is featured) */
.hmg-jb-v4-listrow-featured-badge {
  display: none !important;
  background: #fff7ed;
  color: #c2410c;
  padding: 2px 6px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 6px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card.hmg-jb-v4-job-featured .hmg-jb-v4-listrow-featured-badge,
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card:has(.hmg-jb-v4-job-featured-banner[style*="display: block"]) .hmg-jb-v4-listrow-featured-badge {
  display: inline-flex !important;
}

/* Type badge — plain text in list mode */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-type-badge {
  background: none;
  border: none;
  padding: 0 !important;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--hmg-jb-v4-gray-600, #4b5563);
}

/* ---------- hide skills row in list mode ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-skills-tags {
  display: none !important;
}

/* ---------- column 5 — description ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-description {
  grid-column: 5;
  grid-row: 1;
  margin: 0;
  font-size: 13px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-description .job-excerpt {
  -webkit-line-clamp: 2;
}

/* ---------- hide quick-preview tooltip in list mode ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-preview-tooltip {
  display: none !important;
}

/* ---------- column 6 — apply ---------- */

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-actions {
  grid-column: 6;
  grid-row: 1;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-apply-dropdown-container {
  flex: none;
  width: auto;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-apply-btn {
  padding: 8px 12px;
  font-size: 13px;
}

#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-apply-dropdown-menu {
  left: -95px;
}

/* Hide "View Details" link in list row mode */
#jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-more-link {
  display: none !important;
}

/* ---------- mobile: hide header, fall back to default card layout ---------- */

@media (max-width: 1023px) {
  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-listrow-header {
    display: none !important;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-results-grid {
    border: none;
    border-radius: 0;
    gap: 16px;
    background: transparent;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card {
    border: 1px solid var(--hmg-jb-v4-gray-200, #e5e7eb);
    border-radius: var(--hmg-jb-v4-radius-xl, 12px);
    box-shadow: var(--hmg-jb-v4-shadow-sm);
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-card-content {
    display: block;
    padding: 0 16px 16px 16px;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item:has(.hmg-jb-v4-job-date-text),
  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-info-item.hmg-jb-v4-job-experience-level {
    display: flex !important;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-skills-tags {
    display: flex !important;
    flex-direction: column;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-header {
    margin-bottom: var(--hmg-jb-v4-space-3);
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-type-section:not(.hmg-jb-v4-job-skills-tags) {
    margin-bottom: 12px;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-description {
    display: -webkit-box;
    margin: var(--hmg-jb-v4-space-3) 0;
  }

  #jb-v4-grid-view.hmg-jb-v4-list-layout .hmg-jb-v4-job-featured-banner {
    display: none !important;
  }
}

/* ---------- recruiter contact mobile (unrelated, preserve) ---------- */

.hmg-jb-v4-recruiter-contact-nav-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hmg-jb-v4-recruiter-contact-nav-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hmg-jb-v4-space-2);
    margin: var(--hmg-jb-v4-space-4) 0;
    padding: var(--hmg-jb-v4-space-4);
    background: var(--hmg-jb-v4-gray-50);
    border-radius: var(--hmg-jb-v4-radius-lg);
    border: 1px solid var(--hmg-jb-v4-gray-200);
  }

  .hmg-jb-v4-recruiter-contact-nav-mobile a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hmg-jb-v4-recruiter-contact-nav-mobile .hmg-jb-v4-recruiter-social-links{
    display: flex;
    gap: var(--hmg-jb-v4-space-2);
  }

  .hmg-jb-v4-recruiter-contact-nav {
    display: none;
  }

  #verify-information-modal .modal-content {
    padding: 1.5rem;
  }

  #verify-information-modal .modal-body {
    padding: 0;
  }

  #verify-information-modal .hmg-jb-v4-one-click-apply-button, #verify-information-modal .hmg-jb-v4-one-click-apply-button {
    padding: 0.75rem;
  }

  #verify-information-modal h2 {
    margin-top: 12px;
  }

  .hmg-jb-v4-one-click-apply-button p {
    margin-bottom: 0;
  }

}

.hmg-jb-v4-recruiter-page .hmg-jb-v4-job-card .hmg-jb-v4-job-header {
  flex-direction: row;
}

.hmg-jb input[type="checkbox"] + span:after {
  top: 4px;
}

#resume-missing {
  font-size: var(--hmg-jb-v4-text-sm);
  padding: 0.75rem;
  border-radius: var(--hmg-jb-v4-radius-lg);
  margin-bottom: 0;
  color: #a94442;
  border-left: 4px solid transparent;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  background-color: #f2f2f2;
  border-color: #a94442;
  color: #a94442;
  margin-top: 12px;
}

#verify-information-modal {
  overflow-y: auto;
}