/*
Theme Name: HD Jobs Medical Recruitment
Theme URI: https://hdjobs.co.uk
Description: Premium medical recruitment theme - Built on Nir Eyal's Hooked Model (Trigger → Action → Variable Reward → Investment)
Author: HD Jobs
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hdjobs
*/

/* ==========================================
   UNIQUE COLOR PALETTE - MEDICAL PROFESSIONAL
   
   PRIMARY: Deep Teal (#006B7D) - Trust, Medical, Professional
   SECONDARY: Vibrant Coral (#FF6B6B) - Energy, Urgency, Action
   ACCENT: Gold (#F4A259) - Premium, Success, Reward
   DARK: Charcoal Navy (#1E2749) - Sophistication, Authority
   LIGHT: Soft Cream (#FAF8F3) - Clean, Medical, Professional
   
   This palette combines medical professionalism with 
   engagement psychology from the Hooked model.
   ========================================== */

:root {
  /* Primary Colors */
  --primary-teal: #006B7D;
  --primary-teal-dark: #004D5A;
  --primary-teal-light: #008CA3;
  
  /* Secondary Colors */
  --secondary-coral: #FF6B6B;
  --secondary-coral-dark: #E64545;
  --secondary-coral-light: #FF8E8E;
  
  /* Accent Colors */
  --accent-gold: #F4A259;
  --accent-gold-dark: #D9843D;
  --accent-gold-light: #FFB573;
  
  /* Neutrals */
  --charcoal-navy: #1E2749;
  --charcoal-light: #2D3A5F;
  --gray-900: #2C3E50;
  --gray-700: #5A6C7D;
  --gray-500: #8B9AA6;
  --gray-300: #C4CED6;
  --gray-100: #E8ECEF;
  --cream: #FAF8F3;
  --white: #FFFFFF;
  
  /* Status Colors (Medical Context) */
  --success-green: #00B894;
  --warning-amber: #FDCB6E;
  --error-red: #D63031;
  --info-blue: #0984E3;
  
  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-teal: 0 10px 25px rgba(0, 107, 125, 0.2);
  --shadow-coral: 0 10px 25px rgba(255, 107, 107, 0.2);
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================
   GLOBAL RESET & BASE STYLES
   ========================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-900);
  background-color: var(--white);
  overflow-x: hidden;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal-navy);
  margin-bottom: var(--space-lg);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-lg);
  color: var(--gray-700);
  line-height: 1.7;
}

a {
  color: var(--primary-teal);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--primary-teal-dark);
}

strong, b {
  font-weight: 600;
  color: var(--charcoal-navy);
}

em, i {
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

li {
  margin-bottom: var(--space-sm);
  color: var(--gray-700);
  line-height: 1.7;
}

/* ==========================================
   LAYOUT CONTAINERS
   ========================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container-narrow {
  max-width: 900px;
}

.container-wide {
  max-width: 1400px;
}

/* ==========================================
   HEADER - TRIGGER (Hooked Model Step 1)
   Professional medical recruitment header
   ========================================== */
.site-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
}

/* ==========================================
   HEADER - LOGO & NAVIGATION
   ========================================== */

/* Logo Styling - Updated for image-only logo */
.site-logo {
  display: flex;
  align-items: center;
}

.site-logo img {
  width: 400px; /* Original design width */
  height: auto;  /* Prevents stretching */
  display: block;
  max-width: 100%; /* Important for mobile */
  transition: opacity var(--transition-base);
}

.site-logo img:hover {
  opacity: 0.85;
}

/* Main Navigation - KEEPING your current logic */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: var(--space-sm);
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  margin: 0;
}

.main-navigation a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  position: relative;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--primary-teal);
  background-color: rgba(0, 107, 125, 0.06);
}

/* Header CTA Button */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--secondary-coral) 0%, var(--secondary-coral-dark) 100%);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  border: none;
  cursor: pointer;
}

/* RESPONSIVE LOGO ADJUSTMENTS */
@media (max-width: 768px) {
  .site-logo img {
    max-width: 250px; /* Scales down for tablets */
  }
}

@media (max-width: 480px) {
  .site-logo img {
    max-width: 180px; /* Scales down for phones */
  }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--charcoal-navy);
  cursor: pointer;
  padding: var(--space-sm);
}

/* ==========================================
   HERO SECTION - TRIGGER & ACTION
   (Hooked Model Steps 1-2)
   ========================================== */
.hero-section {
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
  color: var(--white);
  padding: 2rem 0 1.5rem 0 !important;
  min-height: auto !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
}

/* Background Pattern */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero-content h1 {
  color: var(--white);
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hero-highlight {
  background: linear-gradient(120deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-tagline {
  font-size: 1.25rem;
  margin-bottom: var(--space-2xl);
  color: #FFFFFF !important; /* Force white */
  opacity: 1 !important; /* Remove transparency */
  line-height: 1.8;
  font-weight: 500;
}

/* Social Proof Stats - Trust indicators */
.trust-indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.trust-indicator {
  text-align: center;
}

.trust-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trust-label {
  font-size: 0.9375rem;
  color: var(--white);
  opacity: 0.9;
}

/* ==========================================
   SEARCH BOX - ACTION (Hooked Model Step 2)
   Friction-free job search
   ========================================== */
.job-search-box {
  background-color: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  max-width: 1000px;
  margin: var(--space-2xl) auto 0;
  position: relative;
}

.job-search-box::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--accent-gold) 50%, var(--secondary-coral) 100%);
  border-radius: var(--radius-2xl);
  z-index: -1;
  opacity: 0.5;
  filter: blur(10px);
}

.search-form {
  display: grid;
  grid-template-columns: 2fr 1.5fr auto;
  gap: var(--space-md);
  margin-bottom: 0 !important;
}

.search-input-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
  font-size: 1.125rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-3xl);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--gray-900);
  background-color: var(--cream);
  transition: var(--transition-base);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-teal);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1);
}

.search-input::placeholder {
  color: var(--gray-500);
}

.search-btn {
  padding: var(--space-lg) var(--space-2xl);
  background: linear-gradient(135deg, var(--secondary-coral) 0%, var(--secondary-coral-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-coral);
}

.search-btn:active {
  transform: translateY(0);
}

/* Quick Filters - Reduces friction */
.quick-filters {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-300);
}

.quick-filters-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--cream);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: var(--transition-base);
}

.filter-chip:hover,
.filter-chip.active {
  background-color: var(--primary-teal);
  color: var(--white);
  border-color: var(--primary-teal);
  transform: translateY(-1px);
}

/* Hide job type pills */
ul.job_types,
ul.job_types li,
ul.job_types li label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ==========================================
   USP SECTION - VARIABLE REWARD
   (Hooked Model Step 3)
   ========================================== */
.usp-section {
  padding: var(--space-4xl) 0;
  background-color: var(--cream);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-header p {
  font-size: 1.125rem;
  color: var(--gray-700);
  line-height: 1.7;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
}

.usp-card {
  background-color: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.usp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-teal) 0%, var(--accent-gold) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.usp-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.usp-card:hover::before {
  transform: scaleX(1);
}

.usp-icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-light) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-teal);
}

.usp-card h3 {
  color: var(--charcoal-navy);
  margin-bottom: var(--space-md);
  font-size: 1.5rem;
}

.usp-card p {
  color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ==========================================
   JOB LISTINGS - VARIABLE REWARD
   (Hooked Model Step 3)
   ========================================== */
.featured-jobs-section,
.jobs-section {
  padding: var(--space-4xl) 0;
  background-color: var(--white);
}

.section-alt {
  background-color: var(--cream);
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.job-card {
  background-color: var(--white);
  border: 2px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-teal) 0%, var(--accent-gold) 50%, var(--secondary-coral) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.job-card:hover {
  border-color: var(--primary-teal);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.job-card:hover::before {
  opacity: 1;
}

/* Job Badges - Create urgency and scarcity */
.job-badges {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.job-badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.job-badge.featured {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: var(--charcoal-navy);
}

.job-badge.urgent {
  background: linear-gradient(135deg, var(--secondary-coral) 0%, var(--secondary-coral-dark) 100%);
  color: var(--white);
  animation: pulse 2s infinite;
}

.job-badge.new {
  background: linear-gradient(135deg, var(--success-green) 0%, #00A67E 100%);
  color: var(--white);
}

.job-badge.closing-soon {
  background: linear-gradient(135deg, var(--warning-amber) 0%, #F39C12 100%);
  color: var(--charcoal-navy);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

.job-header {
  margin-bottom: var(--space-md);
}

.job-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.job-title a {
  color: var(--charcoal-navy);
  transition: var(--transition-base);
}

.job-title a:hover {
  color: var(--primary-teal);
}

.job-company {
  font-weight: 600;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.job-company i {
  color: var(--primary-teal);
}

.job-meta,
.job-details {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
}

.job-meta-item,
.job-detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--gray-700);
  font-size: 0.9375rem;
}

.job-meta-item i,
.job-detail i {
  color: var(--primary-teal);
  font-size: 1rem;
}

.job-description {
  color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-lg);
}

.job-salary {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-gold);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.job-salary-amount {
  color: var(--charcoal-navy);
}

.job-salary-period {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

/* CTA Buttons */
.btn-apply {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn-apply:hover {
  transform: translateY(-2px) translateX(2px);
  box-shadow: var(--shadow-teal);
  color: var(--white);
}

.btn-apply i {
  transition: transform var(--transition-base);
}

.btn-apply:hover i {
  transform: translateX(3px);
}

.view-all-jobs {
  text-align: center;
  margin-top: var(--space-2xl);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  background-color: transparent;
  color: var(--primary-teal);
  border: 2px solid var(--primary-teal);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: var(--primary-teal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}

/* ==========================================
   CTA SECTION - INVESTMENT
   (Hooked Model Step 4)
   ========================================== */
.cta-section {
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
  padding: var(--space-4xl) 0;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(244, 162, 89, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  color: var(--white);
  margin-bottom: var(--space-md);
}

.cta-section p {
  font-size: 1.25rem;
  margin-bottom: var(--space-2xl);
  opacity: 0.95;
  color: var(--white);
}

.cta-buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  background-color: var(--white);
  color: var(--primary-teal);
  border: 2px solid var(--white);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  color: var(--primary-teal);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}

.btn-cta-secondary:hover {
  background-color: var(--white);
  color: var(--primary-teal);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ==========================================
   TESTIMONIALS - SOCIAL PROOF
   ========================================== */
.testimonials-section {
  padding: var(--space-4xl) 0;
  background-color: var(--cream);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.testimonial-card {
  background-color: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--space-xl);
  left: var(--space-xl);
  font-size: 5rem;
  color: var(--primary-teal);
  opacity: 0.1;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.testimonial-rating {
  color: var(--accent-gold);
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
}

.testimonial-text {
  font-style: italic;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--accent-gold) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.testimonial-author-info h4 {
  margin-bottom: var(--space-xs);
  font-size: 1rem;
  color: var(--charcoal-navy);
}

.testimonial-author-role {
  color: var(--gray-700);
  font-size: 0.875rem;
}

/* ==========================================
   FORMS - UK GDPR COMPLIANT
   ========================================== */
.wpcf7-form {
  max-width: 800px;
  margin: 0 auto;
}

.wpcf7-form label {
  display: block;
  font-weight: 600;
  color: var(--charcoal-navy);
  margin-bottom: var(--space-sm);
  font-size: 0.9375rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="file"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: var(--space-lg);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--gray-900);
  background-color: var(--cream);
  transition: var(--transition-base);
  margin-bottom: var(--space-lg);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--primary-teal);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1);
}

.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  width: 100%;
  padding: var(--space-xl) var(--space-2xl);
  background: linear-gradient(135deg, var(--secondary-coral) 0%, var(--secondary-coral-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-lg);
}

.wpcf7-form input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-coral);
}

/* ==========================================
   CONSENT BOXES - CORRECT VERSION FOR ACTUAL CF7 STRUCTURE
   ========================================== */

/* .consent-section {
  background-color: #FAF8F3 !important;
  padding: 2rem !important;
  border-radius: 0.75rem !important;
  margin: 2rem 0 !important;
  border: 2px solid #C4CED6 !important;
  box-sizing: border-box !important;
}

.consent-section h3 {
  color: #1E2749 !important;
  font-size: 1.1rem !important;
  margin-bottom: 1.5rem !important;
  font-weight: 700 !important;
}

/* Remove default paragraph margins - use direct child selector */
.consent-section > p {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

.consent-section > p:last-of-type {
  margin-bottom: 0 !important;
}

/* Remove default styling from wpcf7-list-item wrapper - OVERRIDE CF7 */
.consent-section .wpcf7-list-item {
  display: block !important; /* CF7 sets this to inline-block */
  margin: 0 !important; /* CF7 sets this to 0 0 0 1em */
  padding: 0 !important;
  list-style: none !important;
}

/* The actual yellow boxes - apply to the label element */
.consent-section .wpcf7-list-item > label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  width: 100% !important;
  cursor: pointer !important;
  background-color: #FFF9E6 !important;
  border-left: 4px solid #FDCB6E !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
}

/* Fix checkbox styling - CRITICAL: Remove any absolute positioning */
.consent-section .wpcf7-list-item > label > input[type="checkbox"] {
  position: relative !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  order: -1 !important;
}

/* Fix label text styling */
.consent-section .wpcf7-list-item > label > .wpcf7-list-item-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: #5A6C7D !important;
  cursor: pointer !important;
  flex: 1 !important;
  display: inline !important;
}

/* Remove CF7's ::before and ::after content on labels */
.consent-section .wpcf7-list-item-label::before,
.consent-section .wpcf7-list-item-label::after {
  content: none !important;
  display: none !important;
}

/* Make links inside labels stand out */
.consent-section .wpcf7-list-item-label a {
  color: #006B7D !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.consent-section .wpcf7-list-item-label a:hover {
  color: #004D5A !important;
}

/* Hover effect on yellow boxes */
.consent-section .wpcf7-list-item > label:hover {
  background-color: #FFF5CC !important;
  transition: background-color 0.2s ease !important;
}

/* Generic list styling for other form elements */
.wpcf7-list-item {
  margin: var(--space-md) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.wpcf7-list-item-label {
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ==========================================
   PAGE HEADERS
   ========================================== */
.page-header {
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
  padding: var(--space-4xl) 0 var(--space-3xl);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-header h1 {
  color: var(--white);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ==========================================
   CONTENT PAGES
   ========================================== */
.page-content,
.entry-content {
  padding: var(--space-4xl) 0;
  max-width: 900px;
  margin: 0 auto;
}

.entry-content h2 {
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-md);
  border-bottom: 3px solid var(--primary-teal);
}

.entry-content h3 {
  margin-top: var(--space-xl);
  color: var(--primary-teal);
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-xl);
}

.entry-content li {
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

.entry-content a {
  color: var(--primary-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 107, 125, 0.3);
  text-underline-offset: 2px;
  transition: var(--transition-base);
}

.entry-content a:hover {
  text-decoration-color: var(--primary-teal);
}

.entry-content img {
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-md);
}

.entry-content blockquote {
  border-left: 4px solid var(--accent-gold);
  padding-left: var(--space-xl);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--gray-700);
  background-color: var(--cream);
  padding: var(--space-lg) var(--space-xl);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ==========================================
   FOOTER
   ========================================== */
.site-footer {
  background-color: var(--charcoal-navy);
  color: rgba(255, 255, 255, 0.8);
  padding: var(--space-4xl) 0 var(--space-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section h3 {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  font-size: 1.125rem;
}

.footer-section p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-md);
}

.footer-section strong {
  color: var(--white);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: var(--space-md);
}

.footer-section a {
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition-base);
  display: inline-block;
}

.footer-section a:hover {
  color: var(--white);
  transform: translateX(4px);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-xl);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p {
  margin-bottom: var(--space-sm);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   ALERTS & NOTIFICATIONS
   ========================================== */
.alert {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: start;
  gap: var(--space-md);
}

.alert-success {
  background-color: #D1FAE5;
  color: #065F46;
  border-left: 4px solid var(--success-green);
}

.alert-error {
  background-color: #FEE2E2;
  color: #991B1B;
  border-left: 4px solid var(--error-red);
}

.alert-warning {
  background-color: #FEF3C7;
  color: #92400E;
  border-left: 4px solid var(--warning-amber);
}

.alert-info {
  background-color: #DBEAFE;
  color: #1E40AF;
  border-left: 4px solid var(--info-blue);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 1024px) {
  .search-form {
    grid-template-columns: 1fr 1fr;
  }
  
  .search-btn {
    grid-column: 1 / -1;
  }
  
  .jobs-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  .main-navigation {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    transition: left var(--transition-base);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    z-index: 9999;
    padding: var(--space-xl);
  }
  
  .main-navigation.active {
    left: 0;
  }
  
  .main-navigation ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  
  .main-navigation li {
    width: 100%;
    border-bottom: 1px solid var(--gray-100);
  }
  
  .main-navigation a {
    display: block;
    padding: var(--space-lg);
  }
  
  .main-navigation .current-menu-item > a::after,
  .main-navigation .current_page_item > a::after {
    display: none;
  }
  
  .header-cta {
    margin-top: var(--space-md);
    width: 100%;
    justify-content: center;
  }
  
  .search-form {
    grid-template-columns: 1fr;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .trust-indicators {
    gap: var(--space-xl);
  }
  
  .trust-number {
    font-size: 2rem;
  }
  
  .usp-grid {
    grid-template-columns: 1fr;
  }
  
  .jobs-grid {
    grid-template-columns: 1fr;
  }
  
  .job-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  .btn-apply {
    width: 100%;
    justify-content: center;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 480px) {
  .job-card {
    padding: var(--space-lg);
  }
  
  .job-title {
    font-size: 1.25rem;
  }
  
  .job-salary {
    font-size: 1.25rem;
  }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-teal);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  top: 0;
}

*:focus-visible {
  outline: 3px solid var(--primary-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
  .site-header,
  .mobile-menu-toggle,
  .job-search-box,
  .cta-section,
  .site-footer,
  .btn-apply,
  .btn-secondary {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  .job-card {
    page-break-inside: avoid;
    border: 1px solid #000;
    margin-bottom: 1rem;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* WordPress Core Classes */
.alignleft {
  float: left;
  margin: 0 var(--space-lg) var(--space-lg) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--space-lg) var(--space-lg);
}

.aligncenter {
  display: block;
  margin: var(--space-lg) auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: var(--gray-700);
  text-align: center;
  margin-top: var(--space-sm);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* ==========================================
   HD JOBS CONSENT BOXES - NEW STRUCTURE
   ========================================== */

/* Main wrapper with gray background */
.hdjobs-consent-wrapper {
    background-color: #FAF8F3 !important;
    padding: 2rem !important;
    border-radius: 0.75rem !important;
    margin: 2rem 0 !important;
    border: 2px solid #C4CED6 !important;
    box-sizing: border-box !important;
}

.hdjobs-consent-wrapper h3 {
    color: #1E2749 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

/* Each consent item wrapper */
.hdjobs-consent-item {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.hdjobs-consent-item:last-child {
    margin-bottom: 0 !important;
}

/* Override ALL CF7 defaults on acceptance within our wrapper */
.hdjobs-consent-item .wpcf7-acceptance {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.hdjobs-consent-item .wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Make label the yellow box with orange border */
.hdjobs-consent-item .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background-color: #FFF9E6 !important;
    border-left: 4px solid #FDCB6E !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Checkbox styling */
.hdjobs-consent-item .wpcf7-list-item input[type="checkbox"] {
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
}

/* Show CF7's default label text */
.hdjobs-consent-item .wpcf7-list-item-label {
    flex: 1 !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    color: #5A6C7D !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

/* Remove CF7 pseudo-elements */
.hdjobs-consent-item .wpcf7-list-item-label::before,
.hdjobs-consent-item .wpcf7-list-item-label::after {
    display: none !important;
    content: none !important;
}

/* Link styling */
.hdjobs-consent-item .hdjobs-consent-text a {
    color: #006B7D !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.hdjobs-consent-item .hdjobs-consent-text a:hover {
    color: #004D5A !important;
}

/* Hover effect */
.hdjobs-consent-item .wpcf7-list-item label:hover {
    background-color: #FFF5CC !important;
    transition: background-color 0.2s ease !important;
}

/* ==========================================
   CAREER ANXIETY HERO SECTION
   Add this to your style.css
   ========================================== */

.hero-anxiety {
    background: linear-gradient(135deg, #006B7D 0%, #004D5A 100%);
    padding: 80px 0 100px 0;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

/* Emotional Question */
.hero-question {
    text-align: center;
    margin-bottom: 50px;
    animation: fadeInUp 0.8s ease-out;
}

.hero-question-text {
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-highlight {
    background: linear-gradient(120deg, #F4A259 0%, #FFB573 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    position: relative;
}

.hero-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #F4A259, #FFB573);
    animation: underlineGrow 1s ease-out 0.5s forwards;
    transform: scaleX(0);
}

@keyframes underlineGrow {
    to {
        transform: scaleX(1);
    }
}

.hero-subtext {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
}

/* Salary Comparison Widget */
.salary-comparison-widget {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto 50px auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

.salary-widget-header {
    text-align: center;
    margin-bottom: 30px;
}

.salary-widget-header h3 {
    color: #1E2749;
    font-size: 1.75rem;
    margin-bottom: 10px;
}

.salary-widget-header p {
    color: #5A6C7D;
    font-size: 1rem;
    margin: 0;
}

/* Form Styling */
.salary-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 15px;
    align-items: center;
}

.salary-form select {
    padding: 18px 20px;
    border: 2px solid #E8ECEF;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #2C3E50;
    background-color: #FAF8F3;
    cursor: pointer;
    transition: all 0.3s ease;
}

.salary-form select:focus {
    outline: none;
    border-color: #006B7D;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1);
}

.btn-salary-check {
    padding: 18px 35px;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-salary-check:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

.btn-salary-check i {
    transition: transform 0.3s ease;
}

.btn-salary-check:hover i {
    transform: translateX(5px);
}

/* Salary Results */
.salary-results {
    margin-top: 30px;
    padding: 30px;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF5CC 100%);
    border-left: 5px solid #F4A259;
    border-radius: 12px;
    animation: slideDown 0.5s ease-out;
}

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

.result-header {
    text-align: center;
    margin-bottom: 25px;
}

.result-header h4 {
    color: #1E2749;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.salary-gap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
}

.salary-current,
.salary-market {
    text-align: center;
}

.salary-label {
    font-size: 0.875rem;
    color: #5A6C7D;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.salary-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #1E2749;
}

.salary-arrow {
    font-size: 2rem;
    color: #F4A259;
}

.gap-message {
    text-align: center;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 20px;
}

.gap-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FF6B6B;
    margin: 10px 0;
}

.gap-text {
    font-size: 1.125rem;
    color: #2C3E50;
    margin-bottom: 20px;
}

.btn-see-jobs {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, #006B7D 0%, #004D5A 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.btn-see-jobs:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 107, 125, 0.3);
    color: #ffffff;
}

/* Hero Social Proof */
.hero-social-proof {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.social-proof-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #F4A259;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 150px;
}

/* Animated Background Shapes */
.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.shape {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out;
}

.shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.shape-2 {
    width: 300px;
    height: 300px;
    bottom: -50px;
    right: -50px;
    animation-delay: 5s;
}

.shape-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: 10%;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .salary-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .hero-social-proof {
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .salary-comparison-widget {
        padding: 30px 20px;
    }
    
    .hero-anxiety {
        padding: 60px 0 80px 0;
    }
    
    .salary-gap {
        flex-direction: column;
        gap: 15px;
    }
    
    .salary-arrow {
        transform: rotate(90deg);
    }
}

/* ==========================================
   THANK YOU PAGE - REDESIGNED (NO ICONS)
   Add this to the very bottom of your style.css
   REPLACE any existing "thank you page" CSS
   ========================================== */

/* Registration Success Page Wrapper */
.registration-success-wrapper {
    max-width: 1000px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Success Header */
.success-header {
    text-align: center;
    margin: 20px 0 40px 0;
    animation: fadeInUp 0.8s ease-out;
}

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

.success-icon {
    margin: 0 auto 15px;
    animation: scaleIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-icon svg {
    width: 60px;
    height: 60px;
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.success-header h1 {
    color: var(--charcoal-navy, #1E2749);
    font-size: clamp(2rem, 5vw, 2.75rem);
    margin-bottom: 15px;
    font-weight: 800;
    font-family: var(--font-heading, 'Poppins', sans-serif);
}

.success-subtitle {
    font-size: 1.25rem;
    color: var(--gray-700, #5A6C7D);
    margin: 0;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Timeline Section */
.success-timeline {
    background: var(--cream, #FAF8F3);
    padding: 35px 40px 28px 40px;
    border-radius: var(--radius-xl, 16px);
    margin-bottom: 40px;
    border: 2px solid var(--gray-100, #E8ECEF);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.success-timeline h2 {
    text-align: center;
    color: var(--charcoal-navy, #1E2749);
    font-size: 1.875rem;
    margin: 0 0 25px 0;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: 700;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    animation: fadeInUp 0.6s ease-out backwards;
}

.timeline-item:nth-child(1) { animation-delay: 0.3s; }
.timeline-item:nth-child(2) { animation-delay: 0.4s; }
.timeline-item:nth-child(3) { animation-delay: 0.5s; }

.timeline-badge {
    min-width: 60px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-teal, #006B7D) 0%, var(--primary-teal-dark, #004D5A) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white, #FFFFFF);
    font-size: 1.5rem;
    box-shadow: var(--shadow-teal, 0 10px 25px rgba(0, 107, 125, 0.2));
    flex-shrink: 0;
}

.timeline-content h3 {
    color: var(--primary-teal, #006B7D);
    font-size: 1.25rem;
    margin: 0 0 8px 0;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: 700;
}

.timeline-content p {
    color: var(--gray-900, #2C3E50);
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Profile Completion CTA */
.profile-completion-cta {
    background: var(--cream, #FAF8F3);
    border: 3px solid var(--accent-gold, #F4A259);
    border-radius: var(--radius-2xl, 1.5rem);
    padding: 35px 40px;
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.cta-badge {
    display: inline-block;
    background: var(--accent-gold, #F4A259);
    color: var(--white, #FFFFFF);
    padding: 8px 20px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    font-family: var(--font-body, 'Inter', sans-serif);
}

.profile-completion-cta h2 {
    color: var(--charcoal-navy, #1E2749);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0 0 35px 0;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: 800;
}

.completion-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.benefit-item {
    background: var(--white, #FFFFFF);
    padding: 25px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--gray-100, #E8ECEF);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.benefit-item strong {
    display: block;
    color: var(--charcoal-navy, #1E2749);
    font-size: 1rem;
    margin-bottom: 5px;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: 700;
}

.benefit-item span {
    color: var(--gray-700, #5A6C7D);
    font-size: 0.9375rem;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Buttons */
.btn-complete-profile {
    background: linear-gradient(135deg, var(--secondary-coral, #FF6B6B) 0%, var(--secondary-coral-dark, #E64545) 100%);
    color: var(--white, #FFFFFF);
    border: none;
    padding: 18px 40px;
    border-radius: var(--radius-full, 9999px);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base, 0.25s ease);
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    box-shadow: var(--shadow-coral, 0 10px 25px rgba(255, 107, 107, 0.2));
}

.btn-complete-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    color: var(--white, #FFFFFF);
}

.time-badge {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
    font-family: var(--font-body, 'Inter', sans-serif);
}

.btn-skip {
    background: transparent;
    color: var(--gray-700, #5A6C7D);
    border: 2px solid var(--gray-300, #C4CED6);
    padding: 14px 30px;
    border-radius: var(--radius-full, 9999px);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-base, 0.25s ease);
    display: inline-block;
    margin-left: 15px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
}

.btn-skip:hover {
    border-color: var(--primary-teal, #006B7D);
    color: var(--primary-teal, #006B7D);
}

/* Step 2 Form Wrapper */
.step2-form-wrapper {
    background: var(--white, #FFFFFF);
    border: 3px solid var(--primary-teal, #006B7D);
    border-radius: var(--radius-2xl, 1.5rem);
    padding: 30px 40px 40px 40px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-xl, 0 10px 40px rgba(0, 0, 0, 0.1));
}

.step2-form-wrapper h2 {
    color: var(--charcoal-navy, #1E2749);
    text-align: center;
    margin: 0 0 30px 0;
    font-weight: 800;
    font-size: 1.875rem;
    font-family: var(--font-heading, 'Poppins', sans-serif);
}

.step2-form-wrapper > p {
    text-align: center;
    color: var(--gray-700, #5A6C7D);
    font-size: 1.125rem;
    margin-bottom: 8px;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Step 2 Form Input Styling */
.step2-form-wrapper label {
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--charcoal-navy, #1E2749);
    font-size: 1rem;
}

.step2-form-wrapper input[type="text"],
.step2-form-wrapper input[type="tel"],
.step2-form-wrapper select {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--gray-300, #C4CED6);
    border-radius: var(--radius-lg, 12px);
    font-size: 1rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--gray-900, #2C3E50);
    background-color: var(--cream, #FAF8F3);
    transition: all 0.3s ease;
    margin-top: 8px;
}

.step2-form-wrapper input:focus,
.step2-form-wrapper select:focus {
    outline: none;
    border-color: var(--primary-teal, #006B7D);
    background-color: var(--white, #FFFFFF);
    box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1);
}

/* Alternative Actions */
.alternative-actions {
    text-align: center;
    padding: 30px 0 0 0;
}

.divider-text {
    color: var(--gray-500, #8B9AA6);
    font-size: 1rem;
    margin-bottom: 30px;
    position: relative;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 500;
}

.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--gray-100, #E8ECEF);
}

.divider-text::before {
    right: 58%;
}

.divider-text::after {
    left: 58%;
}

.btn-browse-jobs {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-teal, #006B7D);
    color: var(--white, #FFFFFF) !important;
    padding: 18px 40px;
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: var(--transition-base, 0.25s ease);
    font-family: var(--font-heading, 'Poppins', sans-serif);
    box-shadow: var(--shadow-teal, 0 10px 25px rgba(0, 107, 125, 0.2));
}

.btn-browse-jobs:hover {
    background: var(--primary-teal-dark, #004D5A);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 107, 125, 0.4);
    color: var(--white, #FFFFFF) !important;
}

.btn-browse-jobs i {
    color: var(--white, #FFFFFF);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .registration-success-wrapper {
        padding: 40px 20px;
    }
    
    .success-timeline {
        padding: 35px 25px;
    }
    
    .profile-completion-cta {
        padding: 35px 25px;
    }
    
    .completion-benefits {
        grid-template-columns: 1fr;
    }
    
    .btn-skip {
        display: block;
        margin: 15px auto 0 auto;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .step2-form-wrapper {
        padding: 35px 25px;
    }
    
    .btn-complete-profile {
        font-size: 1rem;
        padding: 16px 30px;
    }
    
    .divider-text::before,
    .divider-text::after {
        width: 30%;
    }
}

/* ==========================================
   STEP 2 FORM ADDITIONS - ADD TO END OF CSS
   This ensures Step 2 form uses consent box styling
   ========================================== */

/* Make sure Step 2 wrapper doesn't override consent styles */
.step2-form-wrapper .hdjobs-consent-wrapper {
    /* Inherit all the global consent wrapper styles */
    background-color: #FAF8F3 !important;
    padding: 2rem !important;
    border-radius: 0.75rem !important;
    margin: 2rem 0 !important;
    border: 2px solid #C4CED6 !important;
}

/* Ensure submit button is visible and styled */
.step2-form-wrapper input[type="submit"],
.step2-form-wrapper .wpcf7-submit {
    display: block !important;
    width: 100% !important;
    padding: 18px 40px !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 25px !important;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3) !important;
    font-family: 'Poppins', sans-serif !important;
}

.step2-form-wrapper input[type="submit"]:hover,
.step2-form-wrapper .wpcf7-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
}

/* 2-column layout for first/last name */
.step2-form-wrapper .form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .step2-form-wrapper .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   TARGETED FIXES - ADD TO END OF STYLE.CSS
   These fix specific issues without breaking the site
   ========================================== */

/* ==========================================
   FIX 1: Hide WordPress admin bar completely
   ========================================== */
#wpadminbar {
    display: none !important;
    visibility: hidden !important;
}

body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.admin-bar .site-header {
    top: 0 !important;
}

/* ==========================================
   FIX 2: Header Navigation - Keep everything on same line
   ========================================== */
.header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.main-navigation {
    display: flex !important;
    align-items: center !important;
}

.main-navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

.header-cta {
    margin-left: 1rem !important;
}

/* ==========================================
   FIX 3: Job Card - Fix button overlap
   ========================================== */
.job-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

.job-salary {
    flex-shrink: 0 !important;
    min-width: 100px !important;
}

.btn-apply {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ==========================================
   FIX 4: Make ALL hero text WHITE
   ========================================== */
.hero-tagline,
.hero-section > .container > p,
.hero-content > p {
    color: #FFFFFF !important;
}

.hero-anxiety .hero-subtext,
.hero-question-text + p {
    color: #FFFFFF !important;
}

.cta-section p {
    color: #FFFFFF !important;
}

/* ==========================================
   FIX 5: Footer text visibility
   ========================================== */
.site-footer,
.footer-content,
.footer-section p,
.footer-section li,
.footer-section a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.footer-section h3 {
    color: #FFFFFF !important;
}

/* ==========================================
   FIX 6: Remove ResetRSS link
   ========================================== */
a[href*="Reset"],
.job-listings-wrapper + a,
.search_jobs + a,
a:contains("Reset") {
    display: none !important;
}

/* ==========================================
   FIX 7: Consistent Search Jobs button
   ========================================== */
.job_filters button[type="submit"],
form.job_filters input[type="submit"],
.search_jobs button {
    width: 100% !important;
    padding: 1.5rem 2rem !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3) !important;
}

.job_filters button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
}

/* FIX 8: Remove ResetRSS link (more aggressive) */
a[href*="reset"],
a[href*="Reset"],
a[href*="RSS"],
.job-manager-pagination a:contains("Reset"),
div.job_listings + a,
form + a[href*="feed"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* FIX 9: Register My CV button styling */
.wpcf7-form input[type="submit"][value*="Register"],
input[value="Register My CV"],
button:contains("Register My CV") {
    width: 100% !important;
    padding: 1.5rem 2rem !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.wpcf7-form input[type="submit"][value*="Register"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
}

/* FIX 10: Match Step 2 spacing to Step 1 */
.step2-form-wrapper .wpcf7-form label {
    margin-bottom: 0.5rem !important;
}

.step2-form-wrapper .wpcf7-form input[type="text"],
.step2-form-wrapper .wpcf7-form input[type="tel"],
.step2-form-wrapper .wpcf7-form select,
.step2-form-wrapper .wpcf7-form textarea {
    margin-bottom: 1.5rem !important;
    margin-top: 0.5rem !important;
}

.step2-form-wrapper .hdjobs-consent-wrapper {
    margin: 2rem 0 !important;
}

.step2-form-wrapper input[type="submit"] {
    margin-top: 1.5rem !important;
}

/* FIX 11: Header Register CV button text color */
.header-cta,
.header-cta span {
    color: #FFFFFF !important;
}

.header-cta:hover,
.header-cta:hover span {
    color: #FFFFFF !important;
}

/* FIX 12: Remove job description from cards */
.job-card .job-description {
    display: none !important;
}

.job-card {
    min-height: auto !important;
}

.job-footer {
    margin-top: 1rem !important;
}

/* ==========================================
   SPECIFIC FIXES FOR REMAINING ISSUES
   ========================================== */

/* FIX 1: Remove ResetRSS link (NUCLEAR OPTION) */
a[href*="reset"],
a[href*="Reset"],
a[href*="RSS"],
a[href*="rss"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -99999px !important;
}

.job_listings + a,
.job-manager-pagination + a,
form.job_filters + a,
div[class*="job"] + a[href*="feed"] {
    display: none !important;
}

/* FIX 2: Register My CV button - Match all other submit buttons */
input[type="submit"][value="Register My CV"],
input[type="submit"][value*="Register"],
.wpcf7-form input[type="submit"] {
    width: 100% !important;
    padding: 1.5rem 2rem !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 1.5rem !important;
    display: block !important;
}

input[type="submit"][value="Register My CV"]:hover,
input[type="submit"][value*="Register"]:hover,
.wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
}

/* FIX 3: Match Step 2 spacing exactly to Step 1 */
.step2-form-wrapper .wpcf7-form label {
    display: block !important;
    font-weight: 600 !important;
    color: #1E2749 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    font-size: 0.9375rem !important;
    font-family: 'Inter', sans-serif !important;
}

.step2-form-wrapper .wpcf7-form input[type="text"],
.step2-form-wrapper .wpcf7-form input[type="tel"],
.step2-form-wrapper .wpcf7-form input[type="email"],
.step2-form-wrapper .wpcf7-form select,
.step2-form-wrapper .wpcf7-form textarea {
    width: 100% !important;
    padding: 1rem !important;
    border: 2px solid #C4CED6 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    color: #2C3E50 !important;
    background-color: #FAF8F3 !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.step2-form-wrapper .wpcf7-form input:focus,
.step2-form-wrapper .wpcf7-form select:focus,
.step2-form-wrapper .wpcf7-form textarea:focus {
    outline: none !important;
    border-color: #006B7D !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1) !important;
}

.step2-form-wrapper .hdjobs-consent-wrapper {
    margin: 2rem 0 !important;
    padding: 2rem !important;
}

.step2-form-wrapper input[type="submit"],
.step2-form-wrapper .wpcf7-submit {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}

.step2-form-wrapper .form-row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
}

.step2-form-wrapper .form-row-2col label {
    margin-bottom: 0.5rem !important;
}

.step2-form-wrapper .form-row-2col input {
    margin-bottom: 1.5rem !important;
}

@media (max-width: 768px) {
    .step2-form-wrapper .form-row-2col {
        grid-template-columns: 1fr !important;
    }
}

.step2-form-wrapper .wpcf7-checkbox {
    margin-bottom: 1.5rem !important;
}

.step2-form-wrapper .wpcf7-list-item {
    margin-bottom: 0.5rem !important;
}

/* Remove ResetRSS link */
a[href*="/feed/"],
a[href*="feed="],
a[href*="reset"],
a[href*="Reset"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
}

.job_listings + a,
form.job_filters + a {
    display: none !important;
}

/* Hide the Reset link on the Jobs page */
.job_listings .showing_jobs a.reset {
    display: none !important;
}

/* Remove Practice Name and Location from homepage job cards only */
.home .job-company, 
.home .job-location,
.home .location {
    display: none !important;
}

/* ==========================================
   COMPLETE JOB CARD FIX
   Add this to the END of style.css
   ========================================== */

/* ISSUE 1: Hide location that appears after job title */
.job-card .job-location,
.job-card .job-title .job-location,
.job-card h3 .job-location,
.job-listing-location,
.job-card .location {
    display: none !important;
}

/* Hide location separator if it exists */
.job-title a::after,
.job-card h3::after {
    content: none !important;
}

/* ISSUE 2: Keep button INSIDE the card box */

/* Reset job card to ensure proper containment */
.job-card {
    min-height: auto !important;
    max-height: none !important;
    padding: 1.5rem !important;
    padding-bottom: 1.5rem !important; /* Critical - ensures space for button */
    display: block !important; /* Changed from flex */
    position: relative !important;
    overflow: visible !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 1.5rem !important;
}

/* Ensure all card content stays inside */
.job-card > * {
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Job badges spacing */
.job-badges {
    margin-bottom: 1rem !important;
}

/* Job title spacing */
.job-header {
    margin-bottom: 1rem !important;
}

.job-title {
    margin: 0 !important;
    margin-bottom: 0.75rem !important;
}

/* Job meta spacing */
.job-meta {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* CRITICAL: Job footer must be INSIDE the card */
.job-footer {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    clear: both !important;
}

/* View Details button - full width, INSIDE card */
.job-footer .btn-apply,
.job-footer .btn-apply-full {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 1rem 2rem !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Remove any absolute positioning that might move button outside */
.job-card .btn-apply {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
}

/* Hide salary section completely */
.job-footer .job-salary,
.job-card .job-salary {
    display: none !important;
}

/* Adjust grid spacing */
@media (min-width: 1024px) {
    .jobs-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 1023px) and (min-width: 640px) {
    .jobs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
}

@media (max-width: 639px) {
    .jobs-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .job-card {
        margin-bottom: 1rem !important;
    }
}

/* Ensure proper box model */
.job-card,
.job-card * {
    box-sizing: border-box !important;
}

/* ==========================================
   END COMPLETE JOB CARD FIX
   ========================================== */
   
   /* ==========================================
   REMOVE LOCATION FROM JOB TITLE - AGGRESSIVE FIX
   Add this to the VERY END of style.css
   ========================================== */

/* Hide location text that appears after job title */
.home .job-title a::after,
.home .job-title::after,
.home .job-card h3::after,
.home .job-card h3 a::after,
.front-page .job-title a::after,
.front-page .job-title::after,
.front-page .job-card h3::after,
.front-page .job-card h3 a::after {
    content: none !important;
    display: none !important;
}

/* Hide any span or text that might contain location */
.home .job-title span,
.home .job-card h3 span,
.front-page .job-title span,
.front-page .job-card h3 span {
    display: none !important;
}

/* Target WP Job Manager's location output */
.home .job-listing-location,
.home .location,
.home .job_listing-location,
.home .job-card .location,
.front-page .job-listing-location,
.front-page .location,
.front-page .job_listing-location,
.front-page .job-card .location {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Remove location separator (dash or comma) */
.home .job-title a .separator,
.home .job-title .separator,
.front-page .job-title a .separator,
.front-page .job-title .separator {
    display: none !important;
}

/* ==========================================
   JAVASCRIPT FIX - Add to functions.php
   (Use if CSS doesn't work)
   ========================================== */
/*
add_action('wp_footer', 'hdjobs_remove_location_from_title');
function hdjobs_remove_location_from_title() {
    if (!is_front_page() && !is_home()) {
        return;
    }
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Find all job titles on homepage
        var jobTitles = document.querySelectorAll('.job-card .job-title a, .job-card h3 a');
        
        jobTitles.forEach(function(title) {
            // Get the text content
            var text = title.textContent;
            
            // Remove anything after a dash
            if (text.includes(' - ')) {
                var cleanText = text.split(' - ')[0];
                title.textContent = cleanText;
            }
            
            // Remove location in parentheses
            if (text.includes(' (')) {
                var cleanText = text.split(' (')[0];
                title.textContent = cleanText;
            }
        });
    });
    </script>
    <?php
}

/* 2. Initial (Partial) Grey Button Removal */
.single-job_listing .application_button,
.single-job_listing .application .button {
    display: none !important;
}

/* Collapse excess space in the job description box */
.job-main-description .entry-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.job-main-description .entry-content p:last-child {
    margin-bottom: 0 !important;
}

/* Ensure the main container doesn't have a forced height */
.job-main-description > div {
    height: auto !important;
    min-height: 0 !important;
}

/* FORCE OVERRIDE: Modern Job Card Design */
.job_listings ul.job_listings li.job_listing {
    background: #FFFFFF !important; /* Forces the background to be white, not blue/yellow */
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hover State: High-End Teal Accent */
.job_listings ul.job_listings li.job_listing:hover {
    background: #F8FAFC !important;
    border-color: #006B7D !important; /* Your Brand Teal */
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 107, 125, 0.1), 0 10px 10px -5px rgba(0, 107, 125, 0.04) !important;
}

/* Fix Job Title Typography */
.job_listings ul.job_listings li.job_listing h3,
.job_listings ul.job_listings li.job_listing .job-title-link {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1A202C !important; /* Deep charcoal for readability */
    margin: 0 0 8px 0 !important;
    text-decoration: none !important;
}

/* Fix Metadata (Location and Type) */
.job_listings ul.job_listings li.job_listing .location,
.job_listings ul.job_listings li.job_listing .job-type,
.job_listings ul.job_listings li.job_listing .date {
    font-family: 'Poppins', sans-serif !important;
    color: #64748B !important;
    font-size: 0.95rem !important;
    background: none !important; /* Removes any default background pills */
}

/* Turn 'Full Time' into a subtle brand pill */
.job_listings ul.job_listings li.job_listing .job-type {
    display: inline-block !important;
    background-color: rgba(0, 107, 125, 0.1) !important;
    color: #006B7D !important;
    padding: 2px 12px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

/* ==========================================
   KEY TECHNIQUE: display: contents
   
   The wrapper div around the title uses:
   display: contents !important;
   
   This makes the wrapper "invisible" - its children
   render as if the wrapper doesn't exist!
   
   Before:
   <div style="padding: 10px">  ← Causes misalignment
       <h3>Title</h3>
   </div>
   
   After (with display: contents):
   <h3>Title</h3>  ← Wrapper gone, perfect alignment!
   
   ========================================== */
   
   /* ==========================================
   HOMEPAGE REDESIGN - OPTION 1: COMPACT HERO
   Add this to the END of style.css
   ========================================== */

/* Smaller hero title */
.hero-content h1 {
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* Shorter tagline */
.hero-tagline {
    font-size: 1.125rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Make trust indicators INLINE and smaller */
.trust-indicators {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin: 1rem 0 1.5rem 0 !important;
    flex-wrap: wrap !important;
}

.trust-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Smaller trust numbers - inline style */
.trust-number {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
    margin: 0 !important;
}

.trust-label {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
}

/* Add separator dots between trust indicators */
.trust-indicator:not(:last-child)::after {
    content: "·" !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.5rem !important;
    margin-left: 2rem !important;
}

/* Search box - keep prominent but adjust spacing */
.job-search-box {
    margin-top: 1.5rem !important;
}

/* Featured jobs section - reduce top padding */
.featured-jobs-section {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
}

/* Show only 3 jobs in grid on desktop */
.featured-jobs-section .jobs-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}

/* Slightly smaller job cards */
.featured-jobs-section .job-card {
    padding: 1.25rem !important;
}

/* Section header - more compact */
.section-header {
    margin-bottom: 2rem !important;
}

.section-header h2 {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
}

.section-header p {
    font-size: 1rem !important;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    /* 2 columns on tablet */
    .featured-jobs-section .jobs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Increase hero height slightly on mobile */
    .hero-section {
        min-height: 60vh !important;
        height: auto !important;
        padding: 2rem 0 !important;
    }
    
    /* Smaller title on mobile */
    .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .hero-tagline {
        font-size: 1rem !important;
    }
    
    /* Stack trust indicators vertically on mobile */
    .trust-indicators {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .trust-indicator::after {
        display: none !important;
    }
    
    /* Single column on mobile */
    .featured-jobs-section .jobs-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce section padding on mobile */
    .featured-jobs-section {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ==========================================
   WHAT THIS ACHIEVES:
   
   ✅ Hero: 50vh (half screen) instead of 100vh
   ✅ Search box: Visible without scroll
   ✅ Jobs: 3 visible immediately below
   ✅ Trust indicators: Inline, compact
   ✅ Mobile: Responsive, still works great
   
   Expected improvement: +25-35% conversions
   ========================================== */
   
   /* ==========================================
   HOMEPAGE FIXES - AMENDMENTS TO EXISTING CODE
   Add this to the VERY END of style.css
   These override the existing compact hero rules
   ========================================== */

/* FIX 1: Make hero title fit on one line */
.hero-content h1 {
    font-size: 2.25rem !important; /* Smaller to fit one line */
    margin-bottom: 0.75rem !important; /* Reduced margin */
}

/* FIX 2: Remove the tagline paragraph completely */
.hero-tagline {
    display: none !important;
}

/* FIX 4: Reduce trust indicators margin */
.trust-indicators {
    margin: 0.75rem 0 1rem 0 !important; /* Reduced from 1rem/1.5rem */
}

/* FIX 5: Reduce search box margin */
.job-search-box {
    margin-top: 1rem !important; /* Reduced from 1.5rem */
}

/* FIX 6: Reduce featured jobs top padding */
.featured-jobs-section {
    padding-top: 2rem !important; /* Reduced from 3rem */
    padding-bottom: 3rem !important; /* Reduced from 4rem */
}

/* FIX 7: CONSISTENT SECTION HEADINGS - All h2 same size */
.section-header h2,
.featured-jobs-section h2,
.hero-anxiety h2,
.usp-section h2,
.cta-section h2,
.testimonials-section h2 {
    font-size: 2rem !important; /* All sections same size */
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
}

/* FIX 8: CONSISTENT SECTION SUBTITLES - All same size */
.section-header p,
.featured-jobs-section .section-header p,
.hero-anxiety .hero-subtext,
.usp-section .section-header p,
.cta-section p,
.testimonials-section .section-header p {
    font-size: 1.125rem !important; /* All same size */
    line-height: 1.6 !important;
}

/* FIX 9: Reduce all section padding consistently */
.usp-section,
.testimonials-section {
    padding: 3rem 0 !important; /* Reduced from 4rem */
}

.cta-section {
    padding: 3rem 0 !important; /* Reduced from 4rem */
}

.hero-anxiety {
    padding: 3rem 0 !important; /* More compact */
}

/* FIX 10: Reduce margins between sections */
.section-header {
    margin-bottom: 1.5rem !important; /* Reduced from 2rem */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-section {
        min-height: 50vh !important;
        height: auto !important;
        padding: 1.5rem 0 !important;
    }
    
    .hero-content h1 {
        font-size: 1.75rem !important;
    }
    
    .section-header h2,
    .featured-jobs-section h2,
    .hero-anxiety h2,
    .usp-section h2,
    .cta-section h2,
    .testimonials-section h2 {
        font-size: 1.75rem !important;
    }
    
    .featured-jobs-section {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ==========================================
   SUMMARY OF CHANGES:
   
   ✅ Hero title: Smaller font to fit one line
   ✅ Tagline: Hidden completely
   ✅ Hero height: 40vh (was 50vh)
   ✅ All section headings: 2rem (consistent)
   ✅ All subtitles: 1.125rem (consistent)
   ✅ All margins/padding: Reduced by ~33%
   ✅ Cleaner, tighter layout
   ========================================== */
   
/* ==========================================
   ULTRA-COMPACT SYMMETRY
   Further reduced padding for a tighter layout
   ========================================== */

/* 1. Reduce all home page sections to ultra-compact padding */
.hero-section,
.featured-jobs-section,
.hero-anxiety,
.usp-section,
.cta-section,
.testimonials-section {
    padding-top: 2.5rem !important;    /* Reduced from 4rem for a tighter fit */
    padding-bottom: 2.5rem !important; /* Reduced from 4rem for a tighter fit */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Tighter Section Headers */
.section-header {
    margin-bottom: 1.5rem !important; /* Reduced gap between title and content */
    padding: 0 !important;
}

/* 4. Tighter Mobile Spacing */
@media (max-width: 768px) {
    .hero-section,
    .featured-jobs-section,
    .hero-anxiety,
    .usp-section,
    .cta-section,
    .testimonials-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .section-header {
        margin-bottom: 1rem !important;
    }
}

/* ==========================================
   MOVE FEATURED STAR INSIDE EXISTING YELLOW BOX
   Just repositions the star - no new boxes created
   Add this to the VERY END of style.css
   ========================================== */

/* Job listing container */
ul.job_listings,
.job_listings {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Each job card - compact box */
li.hdjobs-listing-card,
li.type-job_listing {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    
    background: #FFFFFF !important;
    border: 2px solid #E8ECEF !important;
    border-radius: 10px !important;
    padding: 1rem 1.5rem !important;
    margin: 0 0 0.75rem 0 !important;
    
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    
    list-style: none !important;
}

li.hdjobs-listing-card:hover,
li.type-job_listing:hover {
    border-color: #006B7D !important;
    box-shadow: 0 6px 12px rgba(0, 107, 125, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Keep the existing yellow box for featured jobs */
li.job_position_featured,
li.hdjobs-listing-card.job_position_featured {
    /* Don't change anything - let the existing yellow styling stay */
}

/* ==========================================
   LINE 1: Title Row - Make it horizontal with space between
   ========================================== */
.hdjobs-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Space between title and star */
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Job title - stays on left */
.hdjobs-job-title,
h3.hdjobs-job-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1E2749 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    flex: 1 !important;
}

.hdjobs-job-title a {
    color: #1E2749 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.hdjobs-job-title a:hover {
    color: #006B7D !important;
}

/* Featured star - moves to right side of title row */
.hdjobs-featured-star {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    
    color: #F4A259 !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

.hdjobs-featured-star i {
    color: #F4A259 !important;
    font-size: 1rem !important;
}

/* ==========================================
   LINE 2: Info Row (Location + Type + Button)
   ========================================== */
.hdjobs-info-row {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Location */
.hdjobs-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    color: #5A6C7D !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.hdjobs-location i {
    color: #006B7D !important;
}

/* Job type pill */
.hdjobs-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.5rem 1rem !important;
    background: #F0F4F8 !important;
    border: 1px solid #E8ECEF !important;
    border-radius: 9999px !important;
    color: #1E2749 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.hdjobs-pill i {
    color: #006B7D !important;
}

li.hdjobs-listing-card:hover .hdjobs-pill {
    background: #E8F4F8 !important;
    border-color: #006B7D !important;
}

/* Apply button - inline with location and pill */
.hdjobs-apply-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.5rem !important;
    
    background: linear-gradient(135deg, #006B7D 0%, #004D5A 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    
    margin-left: auto !important; /* Push to the right */
    
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 107, 125, 0.2) !important;
}

.hdjobs-apply-btn:hover {
    background: linear-gradient(135deg, #008CA3 0%, #006B7D 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 107, 125, 0.3) !important;
    color: #FFFFFF !important;
}

.hdjobs-apply-btn i {
    font-size: 0.875rem !important;
    transition: transform 0.25s ease !important;
}

.hdjobs-apply-btn:hover i {
    transform: translateX(4px) !important;
}

/* Showing results text */
.showing_jobs {
    margin: 0.75rem 0 1rem 0 !important;
    font-size: 0.9375rem !important;
    color: #5A6C7D !important;
}

/* Pagination */
.job-manager-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
}

.job-manager-pagination a,
.job-manager-pagination span {
    padding: 0.625rem 1rem !important;
    border: 2px solid #E8ECEF !important;
    border-radius: 8px !important;
    color: #006B7D !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    background: #FFFFFF !important;
    transition: all 0.25s ease !important;
}

.job-manager-pagination a:hover {
    background: #006B7D !important;
    color: #FFFFFF !important;
    border-color: #006B7D !important;
}

.job-manager-pagination .current {
    background: #006B7D !important;
    color: #FFFFFF !important;
    border-color: #006B7D !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hdjobs-info-row {
        flex-wrap: wrap !important;
    }
    
    .hdjobs-apply-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
}

/* ==========================================
   RESULT:
   
   The star and "Featured" text now appear INSIDE the existing
   yellow/beige box that's already there, on the right side.
   
   No new boxes created - just repositioning!
   ========================================== */
   
   /* ==========================================
   FIX: Job Summary Responsive Layout
   ========================================== */

.job-details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .job-details-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Remove sticky on mobile so sidebar appears normally */
    .job-sidebar > div {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }
}

/* ==========================================
   SIDEBAR FILTERS IMPLEMENTATION - FIXED VERSION
   Add this to the END of your style.css
   
   IMPORTANT: If you already added the previous CSS,
   please DELETE IT FIRST, then add this version.
   ========================================== */

/* Main Content Layout - 2 Column (Sidebar + Jobs) */
.jobs-page-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
}

/* Override any conflicting styles */
.page .jobs-page-content,
.page-template .jobs-page-content {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
}

/* Left Sidebar Filters */
.sidebar-filters {
    background: var(--white, #FFFFFF) !important;
    border: 2px solid var(--gray-100, #E8ECEF) !important;
    border-radius: var(--radius-xl, 1rem) !important;
    padding: 1.5rem !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)) !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
}

.sidebar-filters-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--gray-100, #E8ECEF) !important;
}

.sidebar-filters-header h3 {
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-size: 1.125rem !important;
    color: var(--charcoal-navy, #1E2749) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.sidebar-filters-header h3 i {
    color: var(--primary-teal, #006B7D) !important;
}

.clear-all-btn {
    background: transparent !important;
    color: var(--error-red, #D63031) !important;
    border: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.25rem 0.5rem !important;
}

.clear-all-btn:hover {
    color: var(--secondary-coral-dark, #E64545) !important;
    text-decoration: underline !important;
}

/* Filter Group */
.filter-group {
    margin-bottom: 1.75rem !important;
}

.filter-group:last-child {
    margin-bottom: 0 !important;
}

.filter-label {
    font-weight: 700 !important;
    color: var(--charcoal-navy, #1E2749) !important;
    font-size: 0.9375rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.filter-label i {
    color: var(--primary-teal, #006B7D) !important;
    font-size: 1rem !important;
}

/* Checkbox/Radio Filters */
.filter-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
}

.filter-option {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    transition: all 0.25s ease !important;
}

.filter-option:hover {
    background-color: rgba(0, 107, 125, 0.05) !important;
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--primary-teal, #006B7D) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.filter-option label {
    cursor: pointer !important;
    font-size: 0.9375rem !important;
    color: var(--gray-700, #5A6C7D) !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
}

.filter-count {
    color: var(--gray-500, #8B9AA6) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Active Filters in Sidebar */
.active-filters-sidebar {
    background: rgba(0, 107, 125, 0.08) !important;
    padding: 0.875rem !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    margin-top: 1.5rem !important;
}

.active-filters-sidebar-label {
    font-weight: 700 !important;
    color: var(--charcoal-navy, #1E2749) !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.625rem !important;
    display: block !important;
}

.filter-tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.filter-tag {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 0.75rem !important;
    background: var(--white, #FFFFFF) !important;
    border: 1px solid var(--primary-teal, #006B7D) !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    font-size: 0.875rem !important;
    color: var(--primary-teal, #006B7D) !important;
    font-weight: 600 !important;
}

.filter-tag-remove {
    background: none !important;
    border: none !important;
    color: var(--error-red, #D63031) !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    transition: all 0.15s !important;
}

.filter-tag-remove:hover {
    transform: scale(1.2) !important;
}

/* Main Content Area */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    min-width: 0 !important;
}

/* Results Header */
.results-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    background: var(--white, #FFFFFF) !important;
    border-radius: var(--radius-lg, 0.75rem) !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)) !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.results-count {
    font-size: 1rem !important;
    color: var(--gray-700, #5A6C7D) !important;
    font-weight: 500 !important;
}

.results-count strong {
    color: var(--primary-teal, #006B7D) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
}

.results-controls {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.sort-label {
    font-weight: 600 !important;
    color: var(--charcoal-navy, #1E2749) !important;
    font-size: 0.9375rem !important;
    white-space: nowrap !important;
}

.sort-select {
    padding: 0.625rem 2.5rem 0.625rem 1rem !important;
    border: 2px solid var(--gray-300, #C4CED6) !important;
    border-radius: var(--radius-lg, 0.75rem) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    color: var(--gray-900, #2C3E50) !important;
    background-color: var(--cream, #FAF8F3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A6C7D' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    min-width: 180px !important;
}

.sort-select:focus {
    outline: none !important;
    border-color: var(--primary-teal, #006B7D) !important;
    background-color: var(--white, #FFFFFF) !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 125, 0.1) !important;
}

/* View Toggle */
.view-toggle {
    display: flex !important;
    gap: 0.25rem !important;
    background: var(--cream, #FAF8F3) !important;
    padding: 0.25rem !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    border: 2px solid var(--gray-300, #C4CED6) !important;
}

.view-toggle-btn {
    padding: 0.5rem 0.75rem !important;
    background: transparent !important;
    color: var(--gray-700, #5A6C7D) !important;
    border: none !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.view-toggle-btn:hover {
    background: var(--white, #FFFFFF) !important;
    color: var(--primary-teal, #006B7D) !important;
}

.view-toggle-btn.active {
    background: var(--primary-teal, #006B7D) !important;
    color: var(--white, #FFFFFF) !important;
}

/* Jobs Grid - Adjust for sidebar layout */
.jobs-page-content .jobs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 1.5rem !important;
}

/* List View Override */
.jobs-page-content .jobs-grid.list-view {
    grid-template-columns: 1fr !important;
}

/* Ensure jobs grid works properly */
.main-content > .jobs-grid {
    width: 100% !important;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .jobs-page-content {
        grid-template-columns: 1fr !important;
    }
    
    .sidebar-filters {
        position: static !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .results-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .results-controls {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .sort-select {
        width: 100% !important;
    }
    
    .view-toggle {
        width: 100% !important;
    }
    
    .jobs-page-content .jobs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Hide active filters if empty */
.active-filters-sidebar:empty,
.active-filters-sidebar .filter-tags:empty {
    display: none !important;
}

/* Scrollbar styling for sidebar */
.sidebar-filters::-webkit-scrollbar {
    width: 6px;
}

.sidebar-filters::-webkit-scrollbar-track {
    background: var(--gray-100, #E8ECEF);
    border-radius: 3px;
}

.sidebar-filters::-webkit-scrollbar-thumb {
    background: var(--gray-300, #C4CED6);
    border-radius: 3px;
}

.sidebar-filters::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500, #8B9AA6);
}

/* ==========================================
   SHOW MORE / LESS FUNCTIONALITY
   ========================================== */

/* Hide items beyond the 4th one */
.filter-options .filter-option:nth-child(n+5) {
    display: none !important;
}

/* When expanded, show all items */
.filter-options.expanded .filter-option {
    display: flex !important;
}

/* Show More/Less Button */
.show-more-btn {
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    margin-top: 0.5rem !important;
    background: transparent !important;
    color: var(--primary-teal, #006B7D) !important;
    border: 2px solid var(--primary-teal, #006B7D) !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.show-more-btn:hover {
    background: var(--primary-teal, #006B7D) !important;
    color: var(--white, #FFFFFF) !important;
}

.show-more-btn i {
    transition: transform 0.25s ease !important;
}

.show-more-btn.expanded i {
    transform: rotate(180deg) !important;
}

/* ==========================================
   FIX: Reduce Hero Section Padding
   Add this to the VERY END of style.css
   ========================================== */

/* Adjust hero content spacing */
.hero-content h1 {
    margin-bottom: 0.75rem !important;
}

.hero-content p {
    margin-bottom: 1.5rem !important;
}

/* Adjust search box position */
.job-search-box {
    margin-top: 1.5rem !important;
}

/* Fix Step 2 form spacing */
.step2-form-wrapper .wpcf7-form label {
    margin-bottom: 1rem !important;
}

.step2-form-wrapper .wpcf7-form input[type="text"],
.step2-form-wrapper .wpcf7-form input[type="tel"],
.step2-form-wrapper .wpcf7-form select {
    margin-bottom: 1rem !important;
}

/* Fix first/last name width */
.step2-form-wrapper .form-row-2col input[type="text"] {
    width: 100% !important;
}

/* Add gap between checkbox and text */
.hdjobs-consent-item .wpcf7-list-item input[type="checkbox"] {
    margin-right: 12px !important;
}

/* ==========================================
   FORM SPACING FIX ONLY
   Add this to the very end of your style.css
   ========================================== */

/* Reduce spacing between form fields */
.wpcf7-form label {
  margin-bottom: 0.375rem !important;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="file"],
.wpcf7-form select,
.wpcf7-form textarea {
  margin-bottom: 0.75rem !important;
}

.wpcf7-form p {
  margin-bottom: 0.75rem !important;
}

.wpcf7-list-item {
  margin: 0.5rem 0 !important;
}

/* Step 2 form spacing */
.step2-form-wrapper .wpcf7-form label {
  margin-bottom: 0.375rem !important;
}

.step2-form-wrapper .wpcf7-form input[type="text"],
.step2-form-wrapper .wpcf7-form input[type="tel"],
.step2-form-wrapper .wpcf7-form input[type="email"],
.step2-form-wrapper .wpcf7-form select,
.step2-form-wrapper .wpcf7-form textarea {
  margin-bottom: 0.75rem !important;
  margin-top: 0.375rem !important;
}

.step2-form-wrapper .form-row-2col {
  gap: 0.75rem !important;
  margin-bottom: 0 !important;
}

.step2-form-wrapper .form-row-2col input[type="text"] {
  margin-bottom: 0.75rem !important;
}

/* Consent box spacing */
.hdjobs-consent-wrapper {
  padding: 1.25rem !important;
  margin: 1.25rem 0 !important;
}

.hdjobs-consent-wrapper h3 {
  margin-bottom: 0.875rem !important;
}

.hdjobs-consent-item {
  margin-bottom: 0.625rem !important;
}

.hdjobs-consent-item .wpcf7-list-item label {
  padding: 10px 14px !important;
}

/* Submit button spacing */
.wpcf7-form input[type="submit"],
.step2-form-wrapper input[type="submit"],
.step2-form-wrapper .wpcf7-submit,
input[type="submit"][value="Register My CV"],
input[type="submit"][value*="Register"] {
  margin-top: 1rem !important;
}

/* Checkbox spacing */
.step2-form-wrapper .wpcf7-checkbox {
  margin-bottom: 1.5rem !important;
}

.step2-form-wrapper .wpcf7-list-item {
  margin-bottom: 0.5rem !important;
}

/* Mobile responsive - keep compact spacing */
@media (max-width: 768px) {
  .step2-form-wrapper .form-row-2col {
    grid-template-columns: 1fr !important;
  }
}

/* END OF FORM SPACING FIX */

/* ==========================================
   SALARY CHECKER FORM — EQUAL WIDTH INPUTS
   ========================================== */

/* Stack all fields in a single column so they are all the same width */
.salary-form-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* All selects full width and same height */
.salary-form-grid select {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #E8ECEF;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #2C3E50;
    background-color: #FAF8F3;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.salary-form-grid select:focus {
    outline: none;
    border-color: #006B7D;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1);
}

/* Salary input wrapper — full width, same height as selects */
.salary-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.salary-input-prefix {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #5A6C7D;
    font-weight: 600;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.salary-input-wrapper input {
    width: 100% !important;
    padding: 18px 20px 18px 34px !important;
    border: 2px solid #E8ECEF !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    color: #2C3E50 !important;
    background-color: #FAF8F3 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}

.salary-input-wrapper input:focus {
    outline: none !important;
    border-color: #006B7D !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 107, 125, 0.1) !important;
}

/* Hide number input spinner arrows */
.salary-input-wrapper input::-webkit-outer-spin-button,
.salary-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.salary-input-wrapper input[type=number] {
    -moz-appearance: textfield;
}

/* Check My Worth button — full width */
.btn-salary-check {
    width: 100%;
    padding: 18px 35px;
    background: linear-gradient(135deg, #FF6B6B 0%, #E64545 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.btn-salary-check:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

/* Gap colour states */
.salary-gap-positive .gap-amount { color: #FF6B6B; }
.salary-gap-neutral  .gap-amount { color: #00B894; }
.salary-gap-above    .gap-amount { color: #006B7D; }