/*
Theme Name: Careerfy Child
Theme URI: http://demo.eyecix.com/careerfy/
Template: careerfy
Author: Eyecix
Author URI: http://eyecix.com/
Description: Careerfy brings you the most simple solution to display jobs on any type of websites. You may already know, some really big Job Portals provides the option to use their database and extend your website with job offers. This Theme can make everything automatically, some job providers also pay commission when any of your visitors click on the job links.
Tags: two-columns,left-sidebar,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.6
Updated: 2023-06-01 14:27:32

*/

/* ============================================================
   HOMEFRONTCONNECT DESIGN SYSTEM
   Ported from the (inactive) domesticpro theme on 2026-07-06 —
   this child theme is the one WordPress actually has active, so
   all brand CSS lives here now. Keep this file authoritative;
   domesticpro/style.css is a stale duplicate, not used by the site.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --dp-primary:        #004529;
  --dp-primary-dark:   #00301b;
  --dp-primary-light:  #dcefe3;
  --dp-accent:         #fe6b01;
  --dp-accent-dark:    #cc5500;
  --dp-success:        #059669;
  --dp-warning:        #d97706;

  --dp-text:           #0f172a;
  --dp-body:           #475569;
  --dp-muted:          #94a3b8;
  --dp-bg:             #f8fafc;
  --dp-card:           #ffffff;
  --dp-border:         #e2e8f0;
  --dp-border-hover:   #cbd5e1;

  --dp-radius-sm:      6px;
  --dp-radius:         12px;
  --dp-radius-lg:      18px;
  --dp-radius-full:    9999px;

  --dp-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --dp-shadow:         0 4px 16px rgba(15,23,42,.08);
  --dp-shadow-md:      0 8px 28px rgba(15,23,42,.12);
  --dp-shadow-lg:      0 20px 50px rgba(15,23,42,.16);

  --dp-transition:     all .25s cubic-bezier(.4,0,.2,1);
  --dp-transition-slow: all .4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   GLOBAL SMOOTH SCROLL & BOX MODEL
   ============================================================ */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================================
   BASE TYPOGRAPHY — Inter replaces Roboto
   ============================================================ */
body {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--dp-body) !important;
  background-color: var(--dp-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body h1:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle), body h2:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle), body h3:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle),
body h4:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle), body h5:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle), body h6:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) {
  font-family: 'Inter', sans-serif !important;
  color: var(--dp-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 0.6em;
}

h1:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 2.25rem !important; }
h2:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 1.875rem !important; }
h3:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 1.5rem !important; }
h4:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 1.25rem !important; }
h5:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 1.125rem !important; }
h6:not(.elementor-heading-title):not(.xpro-hero-slider-title):not(.xpro-hero-slider-subtitle) { font-size: 1rem !important; }

/* Xpro Hero Slider ships fixed-px content-wrapper widths (1140/1025/768px) with no
   breakpoint below 768px, so it overflows any viewport narrower than that. */
.xpro-hero-slider-slide-content-wrapper { width: 100% !important; max-width: 100% !important; }

p {
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  margin-bottom: 1em;
  color: var(--dp-body);
}

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

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

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--dp-text) !important;
  transition: var(--dp-transition);
}

h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--dp-primary) !important;
}

strong { color: var(--dp-text); }

/* ============================================================
   WRAPPER
   ============================================================ */
.careerfy-wrapper {
  background-color: var(--dp-bg);
}

/* ============================================================
   HEADER — style1 (default)
   ============================================================ */
#careerfy-header,
.careerfy-header-one {
  background: #ffffff !important;
  box-shadow: 0 1px 0 var(--dp-border), var(--dp-shadow-sm) !important;
  border-bottom: none !important;
  transition: var(--dp-transition-slow);
}

/* Sticky header improvement */
.careerfy-sticky-header .careerfy-header-one,
.careerfy-sticky-header #careerfy-header {
  box-shadow: var(--dp-shadow-md) !important;
}

/* Logo area */
.careerfy-logo-con {
  display: flex;
  align-items: center;
  gap: 32px;
}

.careerfy-logo img {
  max-height: 46px;
  width: auto;
  transition: var(--dp-transition);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar-nav > li {
  padding: 0 6px !important;
}

.navbar-nav > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dp-text) !important;
  letter-spacing: 0 !important;
  padding: 28px 10px !important;
  position: relative;
  transition: var(--dp-transition) !important;
}

/* Animated underline on nav items */
.navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--dp-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.navbar-nav > li > a:hover::after,
.navbar-nav > li.active > a::after,
.navbar-nav > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Override theme's ::before pseudo-element */
.navbar-nav > li > a::before { display: none !important; }

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li.current-menu-item > a {
  color: var(--dp-primary) !important;
}

/* Dropdown sub-menu */
.navbar-nav .sub-menu,
.navbar-nav .children {
  background: #ffffff !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-md) !important;
  padding: 6px !important;
  margin-top: 8px !important;
  min-width: 200px;
  animation: dpDropIn .18s cubic-bezier(.4,0,.2,1) both;
}

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

.navbar-nav .sub-menu > li,
.navbar-nav .children > li {
  border: none !important;
  border-radius: var(--dp-radius-sm) !important;
}

.navbar-nav .sub-menu li a,
.navbar-nav .children li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--dp-body) !important;
  padding: 9px 14px !important;
  border-radius: var(--dp-radius-sm) !important;
  transition: var(--dp-transition) !important;
  display: block;
}

.navbar-nav .sub-menu li a:hover,
.navbar-nav .children li a:hover {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  padding-left: 18px !important;
}

/* ============================================================
   HEADER — USER / ACCOUNT SECTION
   ============================================================ */
.careerfy-user-section > li,
.careerfy-user-section > li:before {
  border-color: var(--dp-border) !important;
}

.careerfy-user-section > li > a,
.careerfy-user-section > li > span {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--dp-body) !important;
  transition: var(--dp-transition) !important;
}

.careerfy-user-section > li:hover > a {
  color: var(--dp-primary) !important;
}

.careerfy-user-section ul.nav-item-children {
  background: #ffffff !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-md) !important;
  padding: 6px !important;
}

.careerfy-user-section ul.nav-item-children > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--dp-body) !important;
  padding: 9px 14px !important;
  border-radius: var(--dp-radius-sm) !important;
  transition: var(--dp-transition) !important;
}

.careerfy-user-section ul.nav-item-children > li > a:hover {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

/* ============================================================
   HEADER CTA BUTTON
   ============================================================ */
.careerfy-simple-btn,
.careerfy-bgcolor,
.careerfy-simple-btn.careerfy-bgcolor {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: var(--dp-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--dp-radius-full) !important;
  padding: 10px 22px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 8px rgba(29,78,216,.25) !important;
  transition: var(--dp-transition) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.careerfy-simple-btn:hover,
.careerfy-simple-btn.careerfy-bgcolor:hover {
  background: var(--dp-primary-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(29,78,216,.35) !important;
  transform: translateY(-1px);
}

.careerfy-simple-btn::after,
.careerfy-simple-btn::before {
  display: none !important;
}

/* ============================================================
   GENERIC BUTTONS
   ============================================================ */
.careerfy-classic-btn,
.jobsearch-column-btn,
.careerfy-post-btn,
input[type="submit"],
button[type="submit"],
.jobsearch-open-signin-tab.active,
.jobsearch-submit-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--dp-radius-full) !important;
  transition: var(--dp-transition) !important;
  cursor: pointer;
  letter-spacing: 0 !important;
}

.careerfy-classic-btn:hover,
.jobsearch-column-btn:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--dp-shadow-md) !important;
}

/* Outline / secondary style */
.jobsearch-open-register-tab,
.jobsearch-open-signin-tab {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: var(--dp-transition) !important;
}

/* ============================================================
   INPUTS, SELECTS, TEXTAREAS
   ============================================================ */
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
.uneditable-input {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-sm) !important;
  color: var(--dp-text) !important;
  padding: 10px 14px !important;
  height: auto !important;
  transition: var(--dp-transition) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
  border-color: var(--dp-primary) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

select,
.select2-container .select2-selection--single {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-sm) !important;
  color: var(--dp-text) !important;
  height: 44px !important;
  padding: 10px 14px !important;
  transition: var(--dp-transition) !important;
}

select:focus {
  border-color: var(--dp-primary) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
  outline: none !important;
}

label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dp-text) !important;
  letter-spacing: 0.01em;
  margin-bottom: 6px !important;
}

/* ============================================================
   JOB & CANDIDATE LISTING CARDS
   ============================================================ */
.jobsearch-joblisting-classic-wrap {
  background: var(--dp-card) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
  transition: var(--dp-transition) !important;
  position: relative;
}

.jobsearch-joblisting-classic-wrap:hover {
  border-color: var(--dp-border-hover) !important;
  box-shadow: var(--dp-shadow-md) !important;
  transform: translateY(-2px);
}

/* Card company/employer image */
.jobsearch-joblisting-classic-wrap figure {
  margin-bottom: 0;
  flex-shrink: 0;
}

.jobsearch-joblisting-classic-wrap figure img {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--dp-radius-sm) !important;
  object-fit: cover;
  border: 1px solid var(--dp-border);
}

/* Job title */
.jobsearch-pst-title a {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--dp-text) !important;
  transition: var(--dp-transition) !important;
  letter-spacing: -0.01em;
}

.jobsearch-pst-title a:hover {
  color: var(--dp-primary) !important;
}

/* Featured badge */
.jobsearch-pst-title span {
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--dp-warning) !important;
  color: #ffffff !important;
  border-radius: var(--dp-radius-full) !important;
  padding: 2px 9px !important;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Meta list (location, company, date) */
.jobsearch-list-option ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
  margin-bottom: 0;
}

.jobsearch-list-option ul li {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--dp-muted) !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

.jobsearch-list-option ul li i {
  color: var(--dp-primary) !important;
  font-size: 13px;
}

.job-company-name {
  font-weight: 500 !important;
  color: var(--dp-body) !important;
}

/* Job type badges */
.jobsearch-option-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: var(--dp-radius-full) !important;
  padding: 4px 12px !important;
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  border: 1px solid #bfdbfe !important;
  transition: var(--dp-transition) !important;
  letter-spacing: 0.01em;
}

.jobsearch-option-btn:hover {
  background: var(--dp-primary) !important;
  color: #ffffff !important;
  border-color: var(--dp-primary) !important;
}

/* Excerpt */
.jobsearch-list-excerpt p {
  font-size: 13.5px !important;
  color: var(--dp-muted) !important;
  line-height: 1.6 !important;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Bookmark / shortlist button */
.jobsearch-job-userlist {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.jobsearch-shortlist-btn,
.jobsearch-unsave-btn {
  border-radius: var(--dp-radius-full) !important;
  transition: var(--dp-transition) !important;
}

/* ============================================================
   CANDIDATE CARDS
   ============================================================ */
.jobsearch-candidate-default,
.candidate-classic-wrap,
.jobsearch-candlisting-wrap {
  background: var(--dp-card) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-sm) !important;
  padding: 20px !important;
  transition: var(--dp-transition) !important;
}

.jobsearch-candidate-default:hover,
.candidate-classic-wrap:hover,
.jobsearch-candlisting-wrap:hover {
  border-color: var(--dp-border-hover) !important;
  box-shadow: var(--dp-shadow-md) !important;
  transform: translateY(-2px);
}

/* ============================================================
   SEARCH / FILTER SIDEBAR WIDGETS
   ============================================================ */
.widget,
.jobsearch-widget,
.jobsearch-searchbox-wrap {
  background: var(--dp-card) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
}

.widget-title,
.widgettitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--dp-text) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--dp-border) !important;
}

/* ============================================================
   SECTION TITLES (plugin-generated headings)
   ============================================================ */
.jobsearch-sec-title,
.careerfy-sec-title,
.jobsearch-section-heading {
  margin-bottom: 36px;
}

.jobsearch-sec-title h2,
.careerfy-sec-title h2,
.jobsearch-section-heading h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--dp-text) !important;
  letter-spacing: -0.03em !important;
}

.jobsearch-sec-title p,
.careerfy-sec-title p {
  color: var(--dp-muted) !important;
  font-size: 15px !important;
}

/* ============================================================
   CONTENT SECTIONS / PAGE PADDING
   ============================================================ */
.careerfy-main-section,
.jobsearch-main-content,
.site-main {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ============================================================
   FOOTER
   ============================================================ */
#careerfy-footer,
.careerfy-footer-one,
.careerfy-footer-two,
.careerfy-footer-three,
.careerfy-footer-four,
.careerfy-footer-five {
  background: #0f172a !important;
  color: #94a3b8 !important;
}

.careerfy-footer-one p,
.careerfy-footer-two p,
.careerfy-footer-three p,
.careerfy-footer-four p,
#careerfy-footer p {
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.careerfy-footer-widget .widget-title,
.careerfy-footer-widget h2,
.careerfy-footer-widget h3,
.careerfy-footer-widget h4 {
  font-family: 'Inter', sans-serif !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  background: none !important;
  padding: 0 0 12px !important;
  margin-bottom: 16px !important;
}

.widget_nav_menu ul li a,
.careerfy-footer-one .widget_nav_menu ul li a,
.careerfy-footer-two .widget_nav_menu ul li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
  transition: var(--dp-transition) !important;
  padding: 4px 0 !important;
  display: block;
}

.widget_nav_menu ul li a:hover,
.careerfy-footer-one .widget_nav_menu ul li a:hover {
  color: #ffffff !important;
  padding-left: 6px !important;
}

/* Footer newsletter */
.careerfy-footer-newslatter input[type="email"] {
  border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0 !important;
  border-color: #334155 !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

.careerfy-footer-newslatter input[type="submit"] {
  border-radius: 0 0 var(--dp-radius-sm) var(--dp-radius-sm) !important;
  background: var(--dp-primary) !important;
  color: #ffffff !important;
  transition: var(--dp-transition) !important;
}

.careerfy-footer-newslatter input[type="submit"]:hover {
  background: var(--dp-primary-dark) !important;
}

/* Copyright bar */
.copyright-wrap,
.careerfy-copyright {
  border-top: 1px solid #1e293b !important;
  background: #0a0f1e !important;
  color: #64748b !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

.careerfy-copyright a,
.copyright-wrap a {
  color: #94a3b8 !important;
  transition: var(--dp-transition);
}

.careerfy-copyright a:hover,
.copyright-wrap a:hover {
  color: #ffffff !important;
}

/* ============================================================
   SIGN-UP: hide the plain "Select Sector" field on the candidate
   panel — the richer "Worker Category" custom field (with role-
   specific sub-questions) replaces it. Scoped via :has() to the
   sector field that's immediately followed by a candidate custom
   field, rather than the shared signup_user_sector option, since
   that option also gates the employer tab's own sector field.
   ============================================================ */
.jobsearch-regfield-sector:has(+ .candidate-cus-field) {
  display: none !important;
}

/* ============================================================
   MOBILE HEADER
   ============================================================ */
.careerfy-mobilehder-strip {
  background: #ffffff !important;
  border-bottom: 1px solid var(--dp-border) !important;
  box-shadow: var(--dp-shadow-sm) !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.mobile-hder-topcon,
.mobile-right-btnscon {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Defensive clamp: prevents any child element (header or otherwise) from
   forcing a page-wide horizontal scrollbar at narrow widths. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.mobile-navigation-togglebtn {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  border-radius: var(--dp-radius-sm) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--dp-transition) !important;
}

.mobile-navigation-togglebtn:hover {
  background: var(--dp-primary) !important;
  color: #ffffff !important;
}

/* Mobile sidebar panel */
.careerfy-mobile-hdr-sidebar {
  background: #0f172a !important;
  box-shadow: var(--dp-shadow-lg) !important;
}

.careerfy-mobile-navbar > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid #1e293b !important;
  transition: var(--dp-transition) !important;
}

.careerfy-mobile-navbar > li > a:hover {
  color: #ffffff !important;
  background: #1e293b !important;
  padding-left: 28px !important;
}

.mobile-navclose-btn {
  color: #94a3b8 !important;
  font-size: 18px !important;
  transition: var(--dp-transition) !important;
}

.mobile-navclose-btn:hover {
  color: #ffffff !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.careerfy-breadcrumbs,
.jobsearch-breadcrumb {
  background: #ffffff !important;
  border-bottom: 1px solid var(--dp-border) !important;
  padding: 14px 0 !important;
}

.careerfy-breadcrumbs a,
.jobsearch-breadcrumb a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--dp-muted) !important;
  transition: var(--dp-transition) !important;
}

.careerfy-breadcrumbs a:hover,
.jobsearch-breadcrumb a:hover {
  color: var(--dp-primary) !important;
}

.careerfy-breadcrumbs span,
.jobsearch-breadcrumb span {
  font-size: 13px !important;
  color: var(--dp-body) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.careerfy-pagenation a,
.careerfy-pagenation span,
.jobsearch-pagination a,
.jobsearch-pagination span,
.page-numbers {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-sm) !important;
  color: var(--dp-body) !important;
  background: var(--dp-card) !important;
  padding: 8px 14px !important;
  transition: var(--dp-transition) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.careerfy-pagenation a:hover,
.jobsearch-pagination a:hover,
.page-numbers:hover,
.page-numbers.current {
  background: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #ffffff !important;
}

/* ============================================================
   TABS (dashboard/detail pages)
   ============================================================ */
.jobsearch-tabs ul li a,
.careerfy-tabs ul li a,
.nav-tabs > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--dp-body) !important;
  border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0 !important;
  transition: var(--dp-transition) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--dp-primary) !important;
  border-bottom-color: transparent !important;
}

/* ============================================================
   ALERTS & NOTICES
   ============================================================ */
.alert,
.jobsearch-alert {
  border-radius: var(--dp-radius-sm) !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

.alert-success { background: #d1fae5 !important; color: #065f46 !important; }
.alert-info    { background: var(--dp-primary-light) !important; color: #1e40af !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-danger  { background: #fee2e2 !important; color: #991b1b !important; }

/* ============================================================
   VERIFIED BADGE
   ============================================================ */
.jobsearch-verified-icon,
.jobsearch-verifiedIcon,
i.jobsearch-icon.jobsearch-check-circle {
  color: var(--dp-success) !important;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#careerfy-backtotop,
.jobsearch-backtotop {
  background: var(--dp-primary) !important;
  color: #ffffff !important;
  border-radius: var(--dp-radius-sm) !important;
  box-shadow: var(--dp-shadow-md) !important;
  transition: var(--dp-transition) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#careerfy-backtotop i,
.jobsearch-backtotop i {
  color: #ffffff !important;
}

#careerfy-backtotop:hover,
.jobsearch-backtotop:hover {
  background: var(--dp-primary-dark) !important;
  transform: translateY(-3px);
  box-shadow: var(--dp-shadow-lg) !important;
}

/* ============================================================
   SELECT2 OVERRIDES
   ============================================================ */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-sm) !important;
  height: 44px !important;
  background: #ffffff !important;
  transition: var(--dp-transition) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--dp-text) !important;
  line-height: 42px !important;
  padding: 0 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--dp-primary) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
}

.select2-dropdown {
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow-md) !important;
  overflow: hidden;
}

.select2-results__option {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 9px 14px !important;
  transition: var(--dp-transition) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--dp-primary) !important;
  color: #ffffff !important;
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.careerfy-loading-section {
  background: rgba(248,250,252,.95) !important;
}

/* ============================================================
   HOVER TRANSITIONS — catch-all for interactive elements
   ============================================================ */
.careerfy-color,
.careerfy-btn-icon,
.jobsearch-shortlist-btn,
.jobsearch-applyjob-btn {
  transition: var(--dp-transition) !important;
}

/* ============================================================
   DASHBOARD NAVIGATION (employer/candidate)
   ============================================================ */
.jobsearch-employer-dashboard-nav ul li a,
.jobsearch-candidate-dashboard-nav ul li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dp-body) !important;
  border-radius: var(--dp-radius-sm) !important;
  transition: var(--dp-transition) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jobsearch-employer-dashboard-nav ul li a:hover,
.jobsearch-employer-dashboard-nav ul li.active a,
.jobsearch-candidate-dashboard-nav ul li a:hover,
.jobsearch-candidate-dashboard-nav ul li.active a {
  color: var(--dp-primary) !important;
  background: var(--dp-primary-light) !important;
}

/* ============================================================
   BROWSE BY CATEGORY (homepage photo cards)
   ============================================================ */
.dp-category-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.dp-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  overflow: hidden;
  box-shadow: var(--dp-shadow-sm);
  transition: var(--dp-transition);
}

.dp-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dp-shadow-md);
  border-color: var(--dp-border-hover);
}

.dp-category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.dp-category-card-title {
  padding: 12px 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--dp-text) !important;
  text-align: center;
  width: 100%;
}

/* ============================================================
   WHAT WE DO / WHY CHOOSE US (icon card grid)
   ============================================================ */
.dp-whatwedo-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.dp-whatwedo-card {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow-sm);
  padding: 28px 24px;
  text-align: center;
  transition: var(--dp-transition);
}

.dp-whatwedo-card:hover {
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-4px);
  border-color: var(--dp-border-hover);
}

.dp-whatwedo-card i {
  font-size: 32px;
  color: var(--dp-primary);
  margin-bottom: 14px;
  display: inline-block;
}

.dp-whatwedo-card h3 {
  font-size: 18px !important;
  margin-bottom: 10px;
}

.dp-whatwedo-card p {
  font-size: 14px !important;
  color: var(--dp-body);
  margin-bottom: 0;
}

.dp-whatwedo-cta {
  text-align: center;
  margin-top: 36px;
}

.dp-whatwedo-cta .careerfy-simple-btn {
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
}

/* ============================================================
   FEATURED OPPORTUNITIES (homepage job listing cards, view-medium)
   ============================================================ */
.careerfy-featured-listing > ul.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.careerfy-featured-listing > ul.row > li {
  padding: 0 12px;
  margin-bottom: 24px;
}

.careerfy-table-layer {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow-sm);
  overflow: hidden;
  transition: var(--dp-transition);
  height: 100%;
}

.careerfy-table-layer:hover {
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-3px);
  border-color: var(--dp-border-hover);
}

.careerfy-table-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
}

.careerfy-table-row figure {
  margin: 0;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--dp-radius-sm);
  overflow: hidden;
  background: var(--dp-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.careerfy-table-row figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careerfy-table-row figure img[src*="no-image"] {
  display: none;
}

.careerfy-table-row figure:has(img[src*="no-image"])::after {
  content: '\f0b1';
  font-family: 'FontAwesome';
  font-size: 22px;
  color: var(--dp-primary);
}

.careerfy-featured-listing-text {
  flex: 1;
  min-width: 0;
}

.careerfy-featured-lsttxt-top h2 {
  font-size: 16px !important;
  margin-bottom: 4px !important;
}

.careerfy-featured-lsttxt-top h2 a {
  color: var(--dp-text) !important;
  font-weight: 600 !important;
}

.careerfy-featured-lsttxt-top h2 a:hover {
  color: var(--dp-primary) !important;
}

.careerfy-featured-lsttxt-top h2 span {
  background: var(--dp-warning) !important;
  color: #ffffff !important;
  border-radius: var(--dp-radius-full) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  margin-left: 6px;
}

.careerfy-featured-listing-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 8px 0;
}

.careerfy-featured-listing-options ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.careerfy-featured-listing-options ul li {
  font-size: 12.5px;
  color: var(--dp-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.careerfy-featured-listing-options ul li i {
  color: var(--dp-primary);
}

.careerfy-option-btn {
  border-radius: var(--dp-radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

.jobsearch-list-excerpt p {
  font-size: 13px !important;
  color: var(--dp-muted) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 991px) {
  h1 { font-size: 1.875rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }

  .jobsearch-joblisting-classic-wrap {
    padding: 16px !important;
  }
}

@media (max-width: 767px) {
  h1 { font-size: 1.625rem !important; }
  h2 { font-size: 1.375rem !important; }

  .careerfy-main-section,
  .jobsearch-main-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* ============================================================
   WOOCOMMERCE CHECKOUT / CART (Block-based Cart & Checkout)
   ============================================================
   The sitewide label/input rules above force font-size, padding,
   height and margin with !important. WooCommerce Blocks' own
   floating-label fields (.wc-block-components-text-input) rely on
   their own font-size/margin math for the label's translateY()
   "float" transform — the sitewide overrides collapsed that math
   and made the label sit on top of the field value. These rules
   restore WC Blocks' own geometry (higher specificity beats the
   sitewide selectors) and then re-skin colors/radius on top,
   without touching the geometry the floating label depends on. */
.woocommerce-checkout .container,
.woocommerce-cart .container {
  padding-top: 40px;
  padding-bottom: 70px;
}

.wc-block-components-text-input label,
.wc-block-components-textarea label {
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  font-family: inherit !important;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="url"] {
  height: 50px !important;
  padding: 16px 12px !important;
  font-size: 16px !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--dp-radius-sm) !important;
  border-color: var(--dp-border) !important;
  box-shadow: none !important;
}

.wc-block-components-textarea textarea {
  height: auto !important;
  min-height: 100px;
  padding: 12px !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--dp-radius-sm) !important;
  border-color: var(--dp-border) !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
  border-color: var(--dp-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,69,41,.12) !important;
}

/* Country/State use WC Blocks' native <select> component, which has its
   OWN class naming convention — "wc-blocks-components-select" (plural
   "blocks"), completely different from the "wc-block-components-*"
   (singular "block") classes used everywhere else in checkout. Confirmed
   via a live DOM dump (--dump-dom), not guessed. Its label sits at a
   fixed top:6px/font-size:13px always (no separate resting/active state
   like text inputs), and the select itself needs padding:16px 9px 0 to
   leave room for that label — the sitewide `select{...!important}` rule
   collapsed that padding, causing the label to overlap the value. */
.wc-blocks-components-select__label {
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}

.wc-blocks-components-select__select {
  height: 50px !important;
  padding: 16px 9px 0 !important;
  font-size: 16px !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--dp-radius-sm) !important;
  border-color: var(--dp-border) !important;
  box-shadow: none !important;
}

.wc-blocks-components-select__select:focus {
  border-color: var(--dp-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,69,41,.12) !important;
  outline: none !important;
}

/* Two-column checkout layout as matching white cards */
.wc-block-checkout__form {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow-sm);
  padding: 32px !important;
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow-sm);
}

.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar > * {
  border-radius: var(--dp-radius);
}

.wc-block-components-checkout-step__title {
  color: var(--dp-primary) !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}

.wc-block-components-checkout-step__container {
  border-bottom: 1px solid var(--dp-border);
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}

.wc-block-components-checkout-step:last-child .wc-block-components-checkout-step__container {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Buttons */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.wc-block-components-checkout-return-to-cart-button) {
  background-color: var(--dp-accent) !important;
  border-color: var(--dp-accent) !important;
  color: #ffffff !important;
  border-radius: var(--dp-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--dp-transition) !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.wc-block-components-checkout-return-to-cart-button):hover {
  background-color: var(--dp-accent-dark) !important;
  border-color: var(--dp-accent-dark) !important;
}

.wc-block-components-checkout-return-to-cart-button {
  color: var(--dp-primary) !important;
}

/* Checkboxes / radios (terms, add-note, payment method list) */
.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input:checked {
  color: var(--dp-primary) !important;
  accent-color: var(--dp-primary) !important;
}

.wc-block-components-radio-control__option--checked {
  border-color: var(--dp-primary) !important;
}

/* Totals */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: 'Inter', sans-serif !important;
  color: var(--dp-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--dp-primary) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Notices (e.g. "no payment methods available") */
.wc-block-components-notice-banner {
  border-radius: var(--dp-radius-sm) !important;
}

@media (max-width: 767px) {
  .wc-block-checkout__form {
    padding: 20px !important;
  }
}