/*
 * Filmly Discover Talent — Dark Theme Mockup Implementation
 *
 * Real UM HTML structure inside .um-member:
 *   <li class="um-member">
 *     <span class="um-member-status"></span>   <- sibling, NOT in card
 *     <div class="um-member-photo"></div>       <- sibling, NOT in card
 *     <div class="um-member-card">             <- contains name + taglines + meta
 *       <div class="um-member-name"></div>
 *       <div class="um-member-tagline um-member-tagline-locatoin"></div>
 *       <div class="um-member-tagline um-member-tagline-primary_role"></div>
 *       <div class="um-member-tagline um-member-tagline-availibility"></div>
 *       <div class="um-member-meta-main"></div>
 *     </div>
 *   </li>
 */

/* ─── CSS DESIGN TOKENS ─── */
#filmly-dir-override,
.filmly-dark-mode {
  --fl-bg: #0c0d12;
  --fl-surface: #13141c;
  --fl-surface2: #1a1b26;
  --fl-surface3: #1e2030;
  --fl-border: #23243a;
  --fl-text: #ffffff;
  --fl-muted: #9ca3af;
  --fl-dim: #6b7280;
  --fl-red: #e63946;
}

/* ─── COMPONENT SCOPED DARK STYLES ONLY ─── */
.um-directory,
.fdt-wrap,
.fi-inbox-grid,
#filmly-dir-override {
  background-color: var(--fl-bg, #0c0d12) !important;
  background: var(--fl-bg, #0c0d12) !important;
  color: var(--fl-text, #ffffff) !important;
}

/* Zero out theme container margins and paddings so dark background covers full width without horizontal shifting */
body.filmly-dark-mode #page,
body.filmly-dark-mode #main,
body.filmly-dark-mode #primary,
body.filmly-dark-mode #content,
body.filmly-dark-mode .site-content,
body.filmly-dark-mode .entry-content,
body.filmly-dark-mode article,
body.filmly-dark-mode .ast-container,
body.filmly-dark-mode .ast-separate-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ─── HIDE PAGE TITLE "Job Listings" & BREADCRUMBS ─── */
body.filmly-dark-mode .entry-header,
body.filmly-dark-mode .ast-breadcrumbs-wrapper,
body.filmly-dark-mode .page-header,
body.filmly-dark-mode .ast-page-header-wrap,
body.filmly-dark-mode .post-thumbnail,
body.filmly-dark-mode .site-content>.ast-container>#primary>#main>article>.entry-header {
  display: none !important;
}

/* ─── HEADER LINKS ─── */
/* ─── MY JOBS DASHBOARD — EMPTY STATE CONTAINER ONLY ─── */
.f-my-jobs-dashboard div:has(> p),
.f-posted-jobs-wrap div:has(> p),
.job_dashboard div:has(> p),
.job-manager-message,
.no_job_listings_found {
  background-color: var(--fl-surface, #13141c) !important;
  background: var(--fl-surface, #13141c) !important;
  border: 1px solid var(--fl-border, #23243a) !important;
  border-radius: 20px !important;
}

.job-manager-message h3,
.no_job_listings_found h3,
div:has(> p) h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.job-manager-message p,
.no_job_listings_found p,
div:has(> p) p {
  color: var(--fl-muted, #94a3b8) !important;
}

/* ─── PAGINATION (BOTTOM) DARK THEME ─── */
body.filmly-dark-mode nav.job-manager-pagination,
body.filmly-dark-mode .job-manager-pagination,
body.filmly-dark-mode .load_more_jobs,
body.filmly-dark-mode .job_listings>nav,
body.filmly-dark-mode .job_listings>div.job-manager-pagination {
  background-color: var(--fl-bg) !important;
  background: var(--fl-bg) !important;
  color: #ffffff !important;
  padding: 40px 0 80px !important;
  margin: 0 !important;
  text-align: center !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.filmly-dark-mode .job-manager-pagination ul {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.filmly-dark-mode .job-manager-pagination ul li {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.filmly-dark-mode .job-manager-pagination ul li a,
body.filmly-dark-mode .job-manager-pagination ul li span {
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  box-shadow: none !important;
}

body.filmly-dark-mode .job-manager-pagination ul li span.current {
  background: #e63946 !important;
  border-color: #e63946 !important;
  color: #ffffff !important;
}

body.filmly-dark-mode a.load_more_jobs {
  background: #13142a !important;
  color: #ffffff !important;
  border: 1px solid #1e2038 !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ─── POST JOB MODAL (DARK THEME) ─── */
body.filmly-dark-mode #f-post-job-modal {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px) !important;
}

body.filmly-dark-mode #f-post-job-modal>div {
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

body.filmly-dark-mode #f-post-job-modal h3 {
  color: #ffffff !important;
}

body.filmly-dark-mode #f-post-job-modal p {
  color: #9ca3c4 !important;
}

body.filmly-dark-mode #f-post-job-modal .f-pjm-option {
  background: #1a1b26 !important;
  border: 1px solid #1e2038 !important;
  color: #ffffff !important;
}

body.filmly-dark-mode #f-post-job-modal .f-pjm-option:hover {
  background: #222436 !important;
  border-color: #2e3155 !important;
}

body.filmly-dark-mode #f-post-job-modal .f-pjm-option svg {
  stroke: #9ca3c4 !important;
}

body.filmly-dark-mode #f-post-job-modal button {
  background: #1e2038 !important;
  color: #ffffff !important;
}

/* ─── SEARCH BAR & FILTERS INLINE LAYOUT ─── */
.um-directory .um-member-directory-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Make header rows display inline instead of breaking full width */
.um-directory .um-member-directory-header .um-member-directory-header-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Search line container constrained to 280px */
.um-directory .um-member-directory-search-row,
.um-directory .um-member-directory-search-line {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 280px !important;
  margin: 0 !important;
}

.um-directory .um-member-directory-search-line label {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Make search input field short (240px) */
.um-directory input.um-search-line,
.um-directory input[type="search"].um-search-line,
.um-directory .um-member-directory-search-line input {
  width: 240px !important;
  max-width: 240px !important;
  box-sizing: border-box !important;
}

/* Hide legacy 'Search:' label text & search button for clean input appearance */
.um-directory .um-member-directory-search-line label span,
.um-directory .um-member-directory-search-line .um-do-search {
  display: none !important;
}

/* Make nav line and filters container display inline right next to search box */
.um-directory .um-member-directory-nav-line,
.um-directory .um-member-directory-filters {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Filter dropdown widths */
.um-directory .um-member-directory-filters .select2-container,
.um-directory .um-member-directory-filters select,
.um-directory .um-search-filter select {
  min-width: 160px !important;
  max-width: 220px !important;
  width: 180px !important;
}

#filmly-dir-override .um-search-form input.um-s,
#filmly-dir-override .um-member-directory-header select,
#filmly-dir-override .um-member-directory-header input,
.um-directory .um-search-form input.um-s,
.um-directory .um-member-directory-header select,
.um-directory .um-member-directory-header input,
.um-directory input.um-s,
.um-directory input[type="text"],
.um-directory .um-search-line input {
  background: var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

#filmly-dir-override .um-search-form input.um-s::placeholder,
.um-directory input::placeholder {
  color: var(--fl-dim) !important;
}

/* ==========================================================================
   DROPDOWNS & SELECTS — Dark Theme Override
   NOTE: Select2 appends the open dropdown to <body>, NOT inside .um-directory.
   So we cannot scope those selectors inside .um-directory.
   ========================================================================== */

/* Closed state: Select2 container (inside directory) */
html body.filmly-dark-mode .um-directory .select2-container .select2-selection--single,
html body.filmly-dark-mode .um-directory .select2-container .select2-selection--multiple,
html body.filmly-dark-mode .um-directory .select2-container .select2-selection {
  background-color: var(--fl-surface2) !important;
  background: var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  height: auto !important;
  padding: 8px 16px !important;
}

/* Rendered text & placeholder */
html body.filmly-dark-mode .select2-selection__rendered,
html body.filmly-dark-mode .select2-selection__placeholder {
  color: #ffffff !important;
  line-height: normal !important;
  padding-left: 0 !important;
}

/* Caret arrow */
html body.filmly-dark-mode .select2-selection__arrow b {
  border-color: #ffffff transparent transparent transparent !important;
}

html body.filmly-dark-mode .select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent #ffffff transparent !important;
}

/* Open dropdown panel (appended to BODY) */
html body.filmly-dark-mode .select2-dropdown,
html body.filmly-dark-mode .um-search-filter .select2-dropdown {
  background-color: var(--fl-surface2) !important;
  background: var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

html body.filmly-dark-mode .select2-search__field {
  background-color: var(--fl-surface) !important;
  border: 1px solid var(--fl-border) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

/* Base option styling (high specificity to beat UM) */
html body.filmly-dark-mode .select2-container .select2-dropdown .select2-results ul li.select2-results__option,
html body.filmly-dark-mode .select2-container .select2-results__option,
html body.filmly-dark-mode .select2-dropdown .select2-results li,
html body.filmly-dark-mode .um-search-filter .select2-dropdown .select2-results li {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Hover/Focus/Highlighted option */
html body.filmly-dark-mode .select2-container .select2-dropdown .select2-results ul li.select2-results__option--highlighted,
html body.filmly-dark-mode .select2-container .select2-results__option--highlighted,
html body.filmly-dark-mode .select2-container .select2-results__option--highlighted[aria-selected],
html body.filmly-dark-mode .select2-dropdown .select2-results li.select2-results__option--highlighted,
html body.filmly-dark-mode .um-search-filter .select2-dropdown .select2-results li.select2-results__option--highlighted {
  background-color: var(--fl-red) !important;
  color: #ffffff !important;
}

/* Previously selected option inside the dropdown list */
html body.filmly-dark-mode .select2-container .select2-dropdown .select2-results ul li[aria-selected="true"],
html body.filmly-dark-mode .select2-container .select2-results__option[aria-selected="true"],
html body.filmly-dark-mode .select2-dropdown .select2-results li[aria-selected="true"],
html body.filmly-dark-mode .um-search-filter .select2-dropdown .select2-results li[aria-selected="true"] {
  background-color: var(--fl-surface3) !important;
  color: #ffffff !important;
}

/* Selected choice tags (the pills inside the search box) */
html body.filmly-dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--fl-surface3) !important;
  border: 1px solid var(--fl-border) !important;
  color: #ffffff !important;
}

/* The 'x' remove button on choice tags */
html body.filmly-dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ffffff !important;
  border-right-color: var(--fl-border) !important;
}

html body.filmly-dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background-color: var(--fl-red) !important;
  color: #ffffff !important;
}

/* Clear filter icon inside the select box */
html body.filmly-dark-mode .select2-container--default .select2-selection--single .select2-selection__clear,
html body.filmly-dark-mode .select2-container--default .select2-selection--multiple .select2-selection__clear {
  color: var(--fl-dimmed) !important;
}

html body.filmly-dark-mode .select2-container--default .select2-selection--single .select2-selection__clear:hover,
html body.filmly-dark-mode .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
  color: #ffffff !important;
}

/* ACTIVE FILTER TAGS (Below the search box) */
html body.filmly-dark-mode .um-directory .um-member-directory-header-row .um-filtered-line .um-members-filter-tag {
  background-color: var(--fl-surface3) !important;
  border: 1px solid var(--fl-border) !important;
  color: #ffffff !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-header-row .um-filtered-line .um-members-filter-tag .um-members-filter-remove {
  color: var(--fl-dimmed) !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-header-row .um-filtered-line .um-members-filter-tag .um-members-filter-remove:hover {
  color: var(--fl-red) !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-header-row .um-filtered-line .um-clear-filters a {
  color: var(--fl-dimmed) !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-header-row .um-filtered-line .um-clear-filters a:hover {
  color: #ffffff !important;
}

/* Native select */
html body.filmly-dark-mode select {
  color-scheme: dark !important;
  background-color: var(--fl-surface2) !important;
  color: #ffffff !important;
}

html body.filmly-dark-mode select option {
  background-color: var(--fl-surface2) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   GRID LAYOUT
   ========================================================================== */
#filmly-dir-override .um-members,
.um-directory .um-members,
html body.filmly-dark-mode .um-directory .um-members {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 24px !important;
}

/* ==========================================================================
   INDIVIDUAL CARD
   ========================================================================== */

#filmly-dir-override .um-member,
.um-directory .um-member,
html body.filmly-dark-mode .um-directory .um-member {
  background: var(--fl-surface) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: relative !important;
  /* Grid: col 1 = avatar (64px), col 2 = content */
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  align-items: start !important;
}

#filmly-dir-override .um-member:hover,
.um-directory .um-member:hover {
  border-color: #363860 !important;
}

/* Status badge — top right corner, absolute */
#filmly-dir-override .um-member .um-member-status,
.um-directory .um-member .um-member-status {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #22c55e !important;
}

/* Avatar — col 1, row 1 only */
#filmly-dir-override .um-member .um-member-photo,
.um-directory .um-member .um-member-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

#filmly-dir-override .um-member .um-member-photo a,
#filmly-dir-override .um-member .um-member-photo img,
.um-directory .um-member .um-member-photo a,
.um-directory .um-member .um-member-photo img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

#filmly-dir-override .um-member .um-member-cover,
.um-directory .um-member .um-member-cover {
  display: none !important;
}

/* Card content — col 2, row 1 */
#filmly-dir-override .um-member .um-member-card,
.um-directory .um-member .um-member-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  /* prevent overflow */
}

/* Name */
#filmly-dir-override .um-member .um-member-name,
.um-directory .um-member .um-member-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.3 !important;
}

#filmly-dir-override .um-member .um-member-name a,
.um-directory .um-member .um-member-name a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ALL tagline rows — stack vertically, each on its own line */
#filmly-dir-override .um-member .um-member-tagline,
.um-directory .um-member .um-member-tagline {
  display: block !important;
  font-size: 13px !important;
  color: var(--fl-muted) !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
}

/* Location — slightly dimmer */
#filmly-dir-override .um-member .um-member-tagline-locatoin,
.um-directory .um-member .um-member-tagline-locatoin {
  color: var(--fl-dim) !important;
  font-size: 12px !important;
}

/* Primary role — white */
#filmly-dir-override .um-member .um-member-tagline-primary_role,
.um-directory .um-member .um-member-tagline-primary_role,
.um-directory .um-member .um-member-tagline-primary_role_crew_27 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── Availability Badge Pill ── */
/* Applied everywhere the tagline appears: directory cards + profile headers */
.um-member-tagline-availibility {
  font-size: 0 !important;
  /* hide raw UM text; JS injects a styled pill instead */
  line-height: 1 !important;
  display: block !important;
}

/* The injected pill span */
.filmly-avail-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px 3px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  line-height: 1 !important;
  transition: background 0.3s, color 0.3s, border-color 0.3s !important;
}

/* dot indicator inside pill */
.filmly-avail-pill::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: background 0.3s !important;
}

/* Available — green */
.filmly-avail-pill.is-available {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.filmly-avail-pill.is-available::before {
  background: #22c55e !important;
}

/* Booked — brownish-orange */
.filmly-avail-pill.is-booked {
  background: rgba(205, 107, 42, 0.12) !important;
  color: #cd6b2a !important;
  border: 1px solid rgba(205, 107, 42, 0.28) !important;
}

.filmly-avail-pill.is-booked::before {
  background: #cd6b2a !important;
}

/* ── Availability Toggle Switch (Navbar) ── */

/* Outer wrapper — flex row: icon | switch | label */

/* Availability toggle: stack label above switch on tablet/mobile only */
/* @media (max-width: 1024px) {
  .filmly-avail-toggle-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .filmly-avail-label {
    margin-left: 0 !important;
  }
} */

.filmly-avail-toggle-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  padding: 4px 8px 4px 6px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.25s, background 0.25s !important;
  outline: none !important;
}

.filmly-avail-toggle-wrap:hover,
.filmly-avail-toggle-wrap:focus-visible {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Calendar icon */
.filmly-avail-icon {
  flex-shrink: 0 !important;
  display: block !important;
  transition: color 0.3s !important;
  /* colour is set by JS on init & on toggle */
}

/* The switch track */
.filmly-avail-switch {
  position: relative !important;
  display: inline-block !important;
  width: 34px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #cd6b2a !important;
  /* booked = orange (default/off) */
  border: 1.5px solid rgba(205, 107, 42, 0.5) !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Knob */
.filmly-avail-switch::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(0px) !important;
}

/* Available state — knob right, track green */
.filmly-avail-switch.is-available {
  background: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

.filmly-avail-switch.is-available::after {
  transform: translateX(16px) !important;
}

/* Saving — dim + no-click */
.filmly-avail-switch.is-saving {
  opacity: 0.55 !important;
  pointer-events: none !important;
}

/* Micro-label next to switch toggle: "AVAILABLE" / "BOOKED" */
.filmly-avail-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  color: #cd6b2a !important;
  margin-left: 4px !important;
  transition: color 0.3s ease !important;
}

.filmly-avail-label.is-available {
  color: #22c55e !important;
}

.filmly-avail-label.is-booked {
  color: #cd6b2a !important;
}

.filmly-avail-toggle-wrap:hover .filmly-avail-label.is-available {
  color: #4ade80 !important;
}

.filmly-avail-toggle-wrap:hover .filmly-avail-label.is-booked {
  color: #ea580c !important;
}

/* Edit profile button */
#filmly-dir-override .um-member .um-members-edit-btn,
.um-directory .um-member .um-members-edit-btn {
  display: none !important;
}

/* Meta-main row — below the grid */
#filmly-dir-override .um-member .um-member-meta-main,
.um-directory .um-member .um-member-meta-main {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--fl-border) !important;
  background: transparent !important;
}

#filmly-dir-override .um-member .um-member-meta,
.um-directory .um-member .um-member-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Metadata lines */
#filmly-dir-override .um-member .um-member-metaline,
.um-directory .um-member .um-member-metaline {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--fl-dim) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#filmly-dir-override .um-member .um-member-metaline strong,
.um-directory .um-member .um-member-metaline strong {
  display: none !important;
}

/* View profile link (pseudo element) */
#filmly-dir-override .um-member::after,
.um-directory .um-member::after {
  content: "View profile →";
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--fl-muted);
  font-weight: 600;
  margin-top: 8px;
}

/* ==========================================================================
   PERFORMERS DIRECTORY & AGE SLIDER DARK THEME
   ========================================================================== */

.um-directory .um-search-line {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.um-directory input.um-search-submit,
.um-directory .um-search-submit,
.um-directory input[type="submit"] {
  background: var(--fl-red) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.um-directory input.um-search-submit:hover,
.um-directory .um-search-submit:hover,
.um-directory input[type="submit"]:hover {
  background: #d62839 !important;
  transform: translateY(-1px) !important;
}

/* Age Slider & Range Controls */
.um-directory .ui-slider,
.um-directory .um-slider {
  background: var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  height: 8px !important;
  border-radius: 9999px !important;
}

.um-directory .ui-slider-range {
  background: linear-gradient(90deg, #e63946, #ff6b6b) !important;
  border-radius: 9999px !important;
}

.um-directory .ui-slider-handle {
  background: #ffffff !important;
  border: 2px solid var(--fl-red) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  top: -6px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  outline: none !important;
}

.um-directory .um-slider-ticks span,
.um-directory .um-slider-label {
  color: var(--fl-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   PERFORMER DIRECTORY (page-id-1147) — PAGE-SPECIFIC OVERRIDES
   Scoped to body.page-id-1147 which WordPress adds automatically.
   This is the safest possible scope — zero risk of affecting the crew directory.
   ========================================================================== */




/* ==========================================================================
   DIRECTORY SORTING (DARK MODE)
   ========================================================================== */
html body.filmly-dark-mode .um-directory .um-member-directory-sorting span {
  color: #ffffff !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting-a-text {
  color: #ffffff !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting i {
  color: #ffffff !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting .um-new-dropdown {
  background-color: var(--fl-surface2) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting .um-new-dropdown-arr {
  display: none !important;
  /* Hide the little arrow pointer on the dropdown to keep it clean */
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting .um-new-dropdown li a {
  color: #ffffff !important;
  background-color: transparent !important;
}

html body.filmly-dark-mode .um-directory .um-member-directory-sorting .um-new-dropdown li a:hover,
html body.filmly-dark-mode .um-directory .um-member-directory-sorting .um-new-dropdown li a[data-selected="1"] {
  color: var(--fl-red) !important;
  background-color: var(--fl-surface3) !important;
}

/* ─── DARK THEME TEXT & HEADINGS ENFORCEMENT ─── */
body.filmly-dark-mode .elementor-heading-title,
body.filmly-dark-mode h1,
body.filmly-dark-mode h2,
body.filmly-dark-mode h3,
body.filmly-dark-mode h4,
body.filmly-dark-mode h5,
body.filmly-dark-mode h6,
.f-opportunities-ui .elementor-heading-title,
.f-opportunities-ui h1,
.f-opportunities-ui h2,
.f-opportunities-ui h3 {
  color: #ffffff !important;
}

body.filmly-dark-mode p,
body.filmly-dark-mode .elementor-text-editor {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   OPPORTUNITIES (JOB BOARD) - DARK THEME MASTER-DETAIL
   ========================================================================== */

/* ========== HEADER ========== */
.f-opportunities-ui {
  background: #0d0d14 !important;
  padding: 40px 60px 80px !important;
  margin: 0 !important;
  min-height: 80vh;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inner wrapper */
.f-opp-inner {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.f-opp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px !important;
}

.f-opp-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  font-style: italic !important;
}

.f-opp-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a5068;
}

.f-opp-filters>span {
  color: #2a2d3e;
}

.f-opp-view-applicants-btn {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.f-opp-view-applicants-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px) !important;
}

.f-opp-post-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #F73B3E !important;
  color: #fff !important;
  border: 1px solid #F73B3E !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 2px 10px rgba(247, 59, 62, 0.3) !important;
  transition: all 0.2s ease !important;
  margin-left: 0 !important;
}

.f-opp-post-btn:hover {
  background: #e02f32 !important;
  border-color: #e02f32 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(247, 59, 62, 0.45) !important;
}

.f-opp-filters a {
  color: #4a5068;
  text-decoration: none;
}

.f-opp-filters a:hover,
.f-opp-filters a.active {
  color: #fff;
}

/* ========== LAYOUT ========== */
.f-opp-layout {
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ========== LEFT COLUMN ========== */
.f-opp-list-col {
  display: flex;
  flex-direction: column;
}

.f-opportunities-ui ul.job_listings {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ========== JOB CARDS ========== */
.f-opportunities-ui ul.job_listings li.f-opp-card,
.f-opp-card {
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  border-top: 1px solid #1e2038 !important;
  border-left: 1px solid #1e2038 !important;
  border-right: 1px solid #1e2038 !important;
  border-bottom: 1px solid #1e2038 !important;
  border-radius: 14px !important;
  padding: 26px 24px !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  list-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Neutralise inner links and pseudo-element borders */
.f-opportunities-ui ul.job_listings li.f-opp-card a,
.f-opportunities-ui ul.job_listings li.f-opp-card a:hover,
.f-opportunities-ui ul.job_listings li.f-opp-card *:before,
.f-opportunities-ui ul.job_listings li.f-opp-card *:after {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide default injected inline badges inside the dark opportunities UI */
.f-opportunities-ui .filmly-featured-badge,
.f-opportunities-ui .filmly-urgent-badge,
.f-opportunities-ui .filmly-boost-countdown {
  display: none !important;
}

/* ── 1. FEATURED JOBS (Real Filmly jobs in 2-week window) ─────────────
   Solid premium card with brand cyan/teal left border highlight
─────────────────────────────────────────────────────────────────────── */
.f-opportunities-ui ul.job_listings li.f-opp-card.filmly-featured-active {
  background: #15172b !important;
  border: 1px solid #282b4a !important;
  box-shadow: none !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.filmly-featured-active:hover {
  background: #181a32 !important;
  border-color: #383c66 !important;
  box-shadow: none !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.filmly-featured-active .f-opp-card-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── 2. BOOSTED JOBS (R80 paid top upgrade) ───────────────────────────
   Same card as everything else, just a quiet left accent bar (same
   language as the Featured tier's left-border) plus a small text tag
   next to the title — signal without turning the card into a banner.
─────────────────────────────────────────────────────────────────────── */
.f-opportunities-ui ul.job_listings li.f-opp-card.filmly-boosted-active {
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  border-left: 3px solid #F73B3E !important;
  padding-left: 22px !important;
  box-shadow: none !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.filmly-boosted-active:hover {
  background: #16172c !important;
  border-color: #282b4a !important;
  border-left-color: #F73B3E !important;
}

/* Small, quiet "Boosted" tag — same visual family as the job-type badges,
   not a shouty banner. Shown inline in the title row if the template
   renders it (falls back gracefully to just the accent bar if not). */
.f-opp-badge-boosted {
  color: #ff9d8a !important;
  background: rgba(247, 59, 62, 0.1) !important;
  border: 1px solid rgba(247, 59, 62, 0.25) !important;
}

/* ── 3. EXTERNAL / BIZCOMMUNITY SCRAPED JOBS ──────────────────────────
   Visually subordinate: dark muted background, dashed border, slate title
─────────────────────────────────────────────────────────────────────── */
.f-opportunities-ui ul.job_listings li.f-opp-card.f-opp-biz-card {
  background: #0b0c14 !important;
  border: 1px solid #1a1c2e !important;
  opacity: 0.85 !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.f-opp-biz-card:hover {
  background: #0f101a !important;
  border-color: #272a45 !important;
  opacity: 1 !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.f-opp-biz-card .f-opp-card-title {
  color: #94a3b8 !important;
  /* Slate/grey title to distinguish from real Filmly jobs */
  font-weight: 600 !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.f-opp-biz-card .f-opp-card-company {
  color: #64748b !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card.f-opp-biz-card .f-opp-biz-label {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid #334155 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
}

.f-opp-biz-label {
  display: none;
}

.f-opp-card:hover {
  border-color: #2e3155 !important;
}

.f-opp-card.f-opp-active-card,
li.f-opp-card.f-opp-active-card {
  border-color: #2e3155 !important;
  background: #161729 !important;
}

.f-opp-card-link {
  text-decoration: none !important;
  display: block !important;
  background: transparent !important;
}

/* Card Title Row: title + badge side by side */
.f-opp-card-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.f-opportunities-ui ul.job_listings li.f-opp-card h3.f-opp-card-title,
.f-opp-card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

.f-opp-card-company {
  font-size: 13px !important;
  color: #c4cde8 !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
}

.f-opp-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #8490b8 !important;
}

.f-opp-card-meta .f-sep {
  color: #2a2d3e !important;
}

/* ========== BADGES ========== */
.f-opp-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-block !important;
}

/* Backward compat slugs + new class names */
.f-badge-contract,
.f-opp-badge-contract {
  color: #f97048 !important;
  background: rgba(249, 112, 72, 0.12) !important;
  border: 1px solid rgba(249, 112, 72, 0.2) !important;
}

.f-badge-freelance,
.f-opp-badge-freelance {
  color: #2ec4b6 !important;
  background: rgba(46, 196, 182, 0.1) !important;
  border: 1px solid rgba(46, 196, 182, 0.2) !important;
}

.f-badge-funded,
.f-opp-badge-funded {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
  border: 1px solid rgba(74, 222, 128, 0.2) !important;
}

/* Catch other types */
.f-opp-badge-full-time {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
}

.f-opp-badge-part-time {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
}

.f-opp-badge-internship {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.f-opp-badge-temporary {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.1) !important;
  border: 1px solid rgba(244, 114, 182, 0.2) !important;
}

/* ========== RIGHT DETAIL PANE ========== */
.f-opp-detail-col {
  background: #13142a;
  border: 1px solid #1e2038;
  border-radius: 14px;
  padding: 36px 40px;
  position: sticky;
  top: 100px !important;
  /* Sticky offset: 100px below header */
  min-height: 450px;
  max-height: calc(100vh - 120px);
  /* Allow pane content to scroll if long */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2e3155 transparent;
}

.f-opp-detail-col::-webkit-scrollbar {
  width: 6px;
}

.f-opp-detail-col::-webkit-scrollbar-thumb {
  background: #2e3155;
  border-radius: 4px;
}

.f-opp-detail-col::-webkit-scrollbar-track {
  background: transparent;
}

.f-opp-mobile-back-wrap {
  display: none !important;
}

.f-opp-placeholder {
  color: #4a5068;
  text-align: center;
  padding: 120px 0;
  font-size: 14px;
}

.f-opp-detail-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.f-opp-detail-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.f-opp-detail-company {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.f-opp-detail-company .f-star {
  color: #e63946 !important;
  font-size: 13px !important;
}

.f-opp-detail-company .f-rating {
  color: #7c82a3 !important;
  font-weight: 500 !important;
}

.f-opp-detail-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a5068;
  margin-bottom: 28px;
}

.f-opp-description-text,
.f-opp-description p,
.f-opp-description li,
.f-opp-description span,
.f-opp-description div {
  font-size: 14px !important;
  color: #c4cde8 !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

.f-opp-description a,
.f-opp-description-text a,
.f-opportunities-ui .f-opp-description a,
.filmly-dark-mode .f-opp-description a,
a.f-biz-apply-link {
  color: #F73B3E !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.f-opp-description a:hover,
.f-opp-description-text a:hover,
.f-opportunities-ui .f-opp-description a:hover,
.filmly-dark-mode .f-opp-description a:hover,
a.f-biz-apply-link:hover {
  color: #ff5255 !important;
  opacity: 0.9 !important;
  text-decoration: underline !important;
}

/* Hide the apply form wrapper rendered inside each job card li (outside detail pane) */
.f-apply-wrap {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Re-style the filmly apply form modal for Dark Mode */
body.filmly-dark-mode [id^="modal-"] {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px) !important;
}

body.filmly-dark-mode [id^="modal-"]>div {
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

body.filmly-dark-mode [id^="modal-"] h3,
body.filmly-dark-mode [id^="modal-"] h4,
body.filmly-dark-mode [id^="modal-"] strong {
  color: #ffffff !important;
}

body.filmly-dark-mode [id^="modal-"] p,
body.filmly-dark-mode [id^="modal-"] label,
body.filmly-dark-mode [id^="modal-"] span {
  color: #c4cde8 !important;
}

body.filmly-dark-mode [id^="modal-"] [id^="close-"] {
  color: #8490b8 !important;
}

body.filmly-dark-mode [id^="modal-"] [id^="close-"]:hover {
  color: #ffffff !important;
}

/* Modal inner preview info container */
body.filmly-dark-mode [id^="modal-"] div[style*="background"] {
  background: #1a1b26 !important;
  border-color: #2e3155 !important;
}

body.filmly-dark-mode [id^="modal-"] div[style*="background"] p,
body.filmly-dark-mode [id^="modal-"] div[style*="background"] div,
body.filmly-dark-mode [id^="modal-"] div[style*="background"] span,
body.filmly-dark-mode [id^="modal-"] div[style*="background"] a {
  color: #c4cde8 !important;
}

/* Modal cover note textarea */
body.filmly-dark-mode [id^="modal-"] textarea {
  background: #0c0d12 !important;
  border: 1px solid #2e3155 !important;
  color: #ffffff !important;
}

body.filmly-dark-mode [id^="modal-"] textarea::placeholder {
  color: #6b7496 !important;
}

.f-opp-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #4a5068 !important;
  margin-bottom: 14px !important;
}

.f-opp-bullets {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 36px !important;
}

.f-opp-bullets li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: 14px !important;
  color: #9ca3c4 !important;
  line-height: 1.5 !important;
}

.f-opp-bullets li::before {
  content: '—' !important;
  color: #4a5068 !important;
  flex-shrink: 0;
}

/* description fallback for general WP post content */
.f-opp-description h1,
.f-opp-description h2,
.f-opp-description h3,
.f-opp-description h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #4a5068 !important;
  margin: 20px 0 14px !important;
}

.f-opp-description ul {
  list-style: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px !important;
}

.f-opp-description ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: 14px !important;
  color: #9ca3c4 !important;
}

.f-opp-description ul li::before {
  content: '—' !important;
  color: #4a5068 !important;
  flex-shrink: 0;
}

/* ========== ACTIONS ========== */
.f-opp-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.f-opp-btn-apply {
  background: #e63946 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.2s ease;
  display: inline-block !important;
  border: none !important;
}

.f-opp-btn-apply:hover {
  background: #c62c38 !important;
}

.f-opp-btn-save {
  background: none !important;
  border: none !important;
  color: #7c82a3 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
}


/* ==========================================================================
   [filmly_discover_talent] SHORTCODE — HIGH-SPECIFICITY FIXES
   1) Search icon overlapping text
   2) City dropdown stretched too wide
   3) Talent names & "View profile" links not visible (white on dark)
   ========================================================================== */

/* ── FILTER BAR: single horizontal row, no bleed ── */
html body .fdt-wrap .fdt-filter-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── SEARCH BOX: fixed-width container with relative positioning ── */
html body .fdt-wrap .fdt-search-box {
  position: relative !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  display: block !important;
  min-width: 0 !important;
}

/* ── SEARCH ICON: sits above the input layer ── */
html body .fdt-wrap .fdt-search-box svg {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #9ca3af !important;
  fill: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── SEARCH INPUT: padded left so text clears the icon ── */
html body .fdt-wrap .fdt-search-box input[type="text"],
html body .fdt-wrap input.fdt-search-input,
html body input[type="text"].fdt-search-input {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px 0 42px !important;
  margin: 0 !important;
  background: #13141c !important;
  background-color: #13141c !important;
  border: 1px solid #23243a !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 40px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body .fdt-wrap input.fdt-search-input::placeholder,
html body input[type="text"].fdt-search-input::placeholder {
  color: #6b7280 !important;
}

html body .fdt-wrap input.fdt-search-input:focus,
html body input[type="text"].fdt-search-input:focus {
  border-color: #e63946 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── CITY SELECT: capped at 160px, pill-shaped, custom arrow ── */
html body .fdt-wrap select.fdt-select,
html body select.fdt-select {
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 170px !important;
  max-width: 100% !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: normal !important;
  padding: 0 36px 0 14px !important;
  margin: 0 !important;
  background-color: #13141c !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  border: 1px solid #23243a !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  color-scheme: dark !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body select.fdt-select option {
  background-color: #13141c !important;
  color: #ffffff !important;
}

/* ── FILTER CHIPS: scrollable horizontal strip ── */
html body .fdt-wrap .fdt-chips {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 0 2px !important;
  margin: 0 !important;
}

html body .fdt-wrap .fdt-chips::-webkit-scrollbar {
  display: none !important;
}

html body .fdt-wrap .fdt-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid #23243a !important;
  background: #1a1b26 !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.18s !important;
}

html body .fdt-wrap .fdt-chip:hover,
html body .fdt-wrap .fdt-chip.active {
  background: #23243a !important;
  color: #ffffff !important;
  border-color: #e63946 !important;
}

/* ── TALENT CARD NAMES: FORCE WHITE — beats all theme/UM anchor overrides ── */
html body .fdt-wrap .fdt-card .fdt-name,
html body .fdt-wrap .fdt-card a.fdt-name,
html body .fdt-card .fdt-name,
html body .fdt-card a.fdt-name,
html body .fdt-wrap a.fdt-name,
html body a.fdt-name {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-bottom: 2px !important;
}

html body .fdt-wrap .fdt-card a.fdt-name:hover,
html body .fdt-wrap a.fdt-name:hover {
  color: #e63946 !important;
  text-decoration: none !important;
}

/* ── VIEW PROFILE LINKS: FORCE WHITE ── */
html body .fdt-wrap .fdt-card a.fdt-link,
html body .fdt-card a.fdt-link,
html body .fdt-wrap a.fdt-link,
html body a.fdt-link {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .fdt-wrap .fdt-card a.fdt-link:hover,
html body a.fdt-link:hover {
  color: #e63946 !important;
  text-decoration: none !important;
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1024px) {
  html body .fdt-wrap .fdt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  html body .fdt-wrap {
    padding: 32px 24px 60px !important;
  }
}

@media (max-width: 900px) {
  html body .fdt-wrap .fdt-filter-bar {
    flex-wrap: wrap !important;
  }

  html body .fdt-wrap .fdt-search-box {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  html body .fdt-wrap select.fdt-select,
  html body select.fdt-select {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }

  html body .fdt-wrap .fdt-chips {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 640px) {
  html body .fdt-wrap .fdt-grid {
    grid-template-columns: 1fr !important;
  }

  html body .fdt-wrap .fdt-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   INBOX MASTER SHORTCODE [filmly_inbox] OVERRIDES
   ========================================================================== */
html body .f-inbox-ui,
html body.filmly-dark-mode .f-inbox-ui {
  background: #0c0d12 !important;
  padding: 40px 60px 80px !important;
  margin: 0 !important;
  min-height: 85vh !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .f-inbox-inner {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

html body .f-inbox-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 28px !important;
}

html body .f-inbox-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: #ffffff !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html body .f-inbox-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  color: #f97048 !important;
  background: rgba(249, 112, 72, 0.12) !important;
  border: 1px solid rgba(249, 112, 72, 0.2) !important;
}

/* 2-Column grid: 380px left sidebar, 1fr right chat pane */
html body .f-inbox-body .um-viewing,
html body .um.um-viewing,
html body .um-viewing {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .um-viewing .um-message-conv {
  width: 100% !important;
  float: none !important;
  border: none !important;
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html body .um-message-conv-item,
html body a.um-message-conv-item {
  display: block !important;
  position: relative !important;
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  border-radius: 14px !important;
  margin: 0 0 10px 0 !important;
  padding: 16px 18px 16px 70px !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  cursor: pointer !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  min-height: 72px !important;
}

html body .um-message-conv-item:hover,
html body a.um-message-conv-item:hover {
  border-color: #2e3155 !important;
  background: #161729 !important;
}

html body .um-message-conv-item.active,
html body a.um-message-conv-item.active {
  border-color: #2e3155 !important;
  border-left: 4px solid #e63946 !important;
  background: #161729 !important;
}

/* Avatar — Positioned absolute on left within 70px padded card */
html body .um-message-conv-item img,
html body .um-message-conv-item .um-message-avatar,
html body .um-message-conv-item .um-avatar-b {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid #2e3155 !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* Name text */
html body .um-message-conv-item .um-message-conv-name,
html body .um-message-conv-item strong,
html body .um-message-conv-item b {
  display: block !important;
  position: static !important;
  float: none !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body .um-message-conv-item small,
html body .um-message-conv-item .um-message-conv-desc {
  display: block !important;
  position: static !important;
  float: none !important;
  color: #8490b8 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

html body .um-message-conv-item time,
html body .um-message-conv-item .um-message-conv-time {
  color: #5a6282 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
}

html body .um-viewing .um-message-conv-view {
  width: 100% !important;
  float: none !important;
  min-height: 600px !important;
  background: #13142a !important;
  border: 1px solid #1e2038 !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (max-width: 1024px) {
  html body .f-inbox-ui {
    padding: 32px 24px 60px !important;
  }

  html body .f-inbox-body .um-viewing,
  html body .um.um-viewing,
  html body .um-viewing {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE CSS
   Covers: Jobs Portal, Directory, Inbox, Companies, Filmography, Headshots
   ========================================================================== */

/* ── JOBS PORTAL MOBILE ── */
@media (max-width: 1024px) {
  .f-opportunities-ui {
    padding: 32px 24px 60px !important;
  }

  .f-opp-header-row,
  .f-opp-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .f-opp-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .f-opp-list-pane,
  .f-opp-detail-pane,
  .f-opp-list-col,
  .f-opp-detail-col {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }

  .f-opp-detail-col {
    position: relative !important;
    top: 0 !important;
    padding: 24px 20px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) {

  /* Jobs portal outer container */
  .f-opportunities-ui {
    padding: 20px 14px 50px !important;
  }

  .f-opp-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .f-opp-title {
    font-size: 26px !important;
  }

  .f-opp-filters {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .f-opp-post-btn {
    margin-left: 0 !important;
  }

  /* Jobs filter bar stack */
  .f-opp-filter-bar {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .f-opp-filter-bar>* {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Jobs portal master-detail mobile view toggle */
  .f-opp-body,
  .f-opp-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Default on mobile: show job list, hide detail pane */
  .f-opp-layout .f-opp-list-col,
  .f-opp-layout .f-opp-list-pane {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .f-opp-layout .f-opp-detail-col,
  .f-opp-layout .f-opp-detail-pane {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    top: 0 !important;
    padding: 20px 16px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }

  /* Active detail state: hide list, show individual job detail view */
  .f-opp-layout.f-opp-show-detail .f-opp-list-col,
  .f-opp-layout.f-opp-show-detail .f-opp-list-pane {
    display: none !important;
  }

  .f-opp-layout.f-opp-show-detail .f-opp-detail-col,
  .f-opp-layout.f-opp-show-detail .f-opp-detail-pane {
    display: block !important;
  }

  .f-opp-layout.f-opp-show-detail .f-opp-header {
    display: none !important;
  }

  /* Mobile back button */
  .f-opp-mobile-back-wrap {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }

  .f-opp-back-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    font-family: degular, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .f-opp-back-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  .f-opp-back-btn .f-back-arrow {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .f-opp-detail-title {
    font-size: 22px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .f-opp-detail-title-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .f-opp-detail-company {
    font-size: 14px !important;
    flex-wrap: wrap !important;
  }

  .f-opp-detail-meta {
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 9px !important;
    margin-bottom: 20px !important;
  }

  .f-opp-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .f-opp-btn-apply {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .f-opp-btn-save {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 0 !important;
  }

  .f-opportunities-ui ul.job_listings li.f-opp-card,
  .f-opp-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .f-opp-card-title-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .f-opp-card-title {
    font-size: 15px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .f-opp-card-company {
    font-size: 13px !important;
  }

  .f-opp-card-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 9px !important;
  }
}

/* Submit job form */
.job-manager-form .field input,
.job-manager-form .field select,
.job-manager-form .field textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Job dashboard table — scroll horizontally */
.job-manager-jobs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

.job-manager-jobs table {
  min-width: 480px !important;
}

/* WP Job Manager listing cards */
ul.job_listings {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
}

ul.job_listings li.job_listing {
  width: 100% !important;
  margin: 0 !important;
}

/* ── DIRECTORY MOBILE ── */
#filmly-dir-override .um-members,
.um-directory .um-members {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Directory filter/search */
.um-member-directory-header-row {
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.um-member-directory-header-row .um-members-filter-search,
.um-member-directory-header-row .um-members-filter-search input {
  width: 100% !important;
}

/* Talent directory filter bar */
html body .fdt-wrap .fdt-filter-bar {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body .fdt-wrap .fdt-search-box {
  flex: 1 1 100% !important;
  width: 100% !important;
}

html body .fdt-wrap select.fdt-select {
  flex: 1 1 calc(50% - 4px) !important;
}

/* ── COMPANY CARDS GRID MOBILE ── */
.filmly-companies-grid,
.f-companies-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Company page header */
.fcp-header-inner {
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

/* Company page tabs */
.fcp-tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

.fcp-tabs::-webkit-scrollbar {
  display: none !important;
}

/* ── VIDEO GALLERY MOBILE ── */
.um-project-gallery,
.fi-video-grid,
.filmly-video-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* ── HEADSHOTS GALLERY MOBILE ── */
.filmly-headshots-grid,
.fi-headshot-grid,
.hs-editor-wrap .hs-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* ── FILMOGRAPHY MOBILE ── */
.f-filmography-grid,
.fi-film-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.filmly-film-card {
  padding: 12px !important;
}

/* ── NOTIFICATIONS MOBILE ── */
.fi-notifications-panel,
.filmly-notifications-wrap {
  width: 100% !important;
  padding: 16px !important;
}

/* ── INBOX MOBILE: conversation list full width ── */
.um-message-conv-list,
.um-message-conv-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  border-right: none !important;
  border-bottom: 1px solid #1e2038 !important;
}

.um-message-conv-view {
  width: 100% !important;
  min-height: 400px !important;
}

/* Prevent horizontal overflow globally on mobile */
body {
  overflow-x: hidden !important;
}

.elementor-section,
.elementor-container {
  max-width: 100vw !important;
  overflow: hidden !important;
}


@media (max-width: 480px) {

  /* Jobs portal */
  .f-opportunities-ui {
    padding: 16px 12px 60px !important;
  }

  .f-opp-card-logo {
    display: none !important;
  }

  html body .fdt-wrap {
    padding: 16px 12px 60px !important;
  }

  html body .fdt-wrap .fdt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Directory single column */
  #filmly-dir-override .um-members,
  .um-directory .um-members {
    grid-template-columns: 1fr !important;
  }

  /* Company cards */
  .filmly-companies-grid,
  .f-companies-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inbox message bubbles */
  .um-message-item.right_m,
  .um-message-item.left_m,
  .um-message-item:not(.right_m) {
    max-width: 92% !important;
  }

  /* Message header compact */
  .um-message-conv-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  /* Filmography */
  .f-filmography-grid,
  .fi-film-grid {
    grid-template-columns: 1fr !important;
  }

  /* Headshots */
  .filmly-headshots-grid,
  .fi-headshot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hide username text in header nav on tiny screens to avoid overflow */
  .fpn-username {
    display: none !important;
  }

  /* Review modal */
  .fcp-review-modal,
  .fi-review-modal {
    padding: 20px 16px !important;
    width: 95vw !important;
    max-width: 95vw !important;
    left: 2.5vw !important;
  }
}

/* ==========================================================================
   ULTIMATE MEMBER NOTIFICATION BUTTON — HEADER ONLY STYLING
   Hide the default standalone floating footer bell injected by UM in wp_footer.
   Display and style ONLY the bell icon that is placed inside the header/shortcode.
   ========================================================================== */

/* ── STEP 1: HIDE STANDALONE FOOTER / BODY FLOATING BELL ── */
.um-notification-b {
  display: none !important;
}

/* ── STEP 2: SHOW & STYLE ONLY THE BELL NESTED INSIDE HEADER / SHORTCODE WIDGETS ── */
.site-header .um-notification-b,
.dark-header .um-notification-b,
.notifications .um-notification-b,
.header-notification-box,
header .um-notification-b,
.elementor-location-header .um-notification-b,
.elementor-widget-shortcode .um-notification-b,
.elementor-widget-shortcode.notifications .um-notification-b {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 20px !important;
  margin: 0 !important;
  box-shadow: none !important;
  z-index: 100 !important;
  vertical-align: middle !important;
  background: transparent !important;
  color: #111111 !important;
}

.notifications,
.elementor-widget-shortcode.notifications,
.notifications .elementor-shortcode {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.site-header .um-notification-b i,
.dark-header .um-notification-b i,
.notifications .um-notification-b i,
.header-notification-box i,
header .um-notification-b i,
.elementor-widget-shortcode .um-notification-b i,
.um-notification-b .um-icon-android-notifications:before {
  font-size: 18px !important;
  line-height: 1 !important;
  color: #111111 !important;
}

.f-opp-btn-save {
  display: none !important;
}

.um-notifications-none,
.um-notification-live-feed .um-notifications-none,
.um-notification-shortcode .um-notifications-none {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 50px 20px !important;
  gap: 16px !important;
  text-align: center !important;
}

.um-notifications-none i,
.um-notifications-none i:before,
.um-notification-live-feed .um-notifications-none i,
.um-notification-live-feed .um-notifications-none i:before,
.um-notification-shortcode .um-notifications-none i,
.um-notification-shortcode .um-notifications-none i:before {
  display: block !important;
  margin: 0 auto 12px auto !important;
  font-size: 32px !important;
  height: 32px !important;
  width: 32px !important;
  line-height: 32px !important;
}

.um-notification-b .um-notification-live-count,
.header-notification-box .um-notification-live-count {
  top: -4px !important;
  right: -4px !important;
}

/* ── DARK HEADER OVERRIDES (White icon) ── */
body.dark-header .site-header .um-notification-b,
body.dark-header .dark-header .um-notification-b,
body.dark-header .notifications .um-notification-b,
body.dark-header .header-notification-box,
body.filmly-dark-mode .site-header .um-notification-b,
body.filmly-dark-mode .dark-header .um-notification-b,
body.filmly-dark-mode .notifications .um-notification-b,
body.filmly-dark-mode .header-notification-box,
body.dark-theme .um-notification-b,
body.dark-theme .header-notification-box,
.dark-header .um-notification-b,
.dark-header .header-notification-box {
  color: #ffffff !important;
}

body.dark-header .um-notification-b i,
body.dark-header .header-notification-box i,
body.dark-header .um-notification-b .um-icon-android-notifications:before,
body.filmly-dark-mode .um-notification-b i,
body.filmly-dark-mode .header-notification-box i,
body.filmly-dark-mode .um-notification-b .um-icon-android-notifications:before,
body.dark-theme .um-notification-b i,
body.dark-theme .header-notification-box i,
body.dark-theme .um-notification-b .um-icon-android-notifications:before,
.dark-header .um-notification-b i,
.dark-header .header-notification-box i,
.dark-header .um-notification-b .um-icon-android-notifications:before {
  color: #ffffff !important;
}

/* ── NOTIFICATION PANEL: DARK THEME (scoped to dark pages only) ── */
body.filmly-dark-mode .um-notification-live-feed,
body.dark-header .um-notification-live-feed,
body.dark-theme .um-notification-live-feed,
body.um-page-user .um-notification-live-feed,
body.um-page-account .um-notification-live-feed,
body[class*="messages"] .um-notification-live-feed,
body[class*="dashboard"] .um-notification-live-feed {
  background: #13141c !important;
  border-left: 1px solid #23243a !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
  color: #e2e8f0 !important;
}

body.filmly-dark-mode .um-notification-header,
body.dark-header .um-notification-header,
body.dark-theme .um-notification-header,
body.um-page-user .um-notification-header,
body.um-page-account .um-notification-header,
body[class*="messages"] .um-notification-header,
body[class*="dashboard"] .um-notification-header {
  border-bottom-color: #23243a !important;
  background: #1a1b26 !important;
}

body.filmly-dark-mode .um-notification-header h4,
body.dark-header .um-notification-header h4,
body.dark-theme .um-notification-header h4,
body.um-page-user .um-notification-header h4,
body.um-page-account .um-notification-header h4,
body[class*="messages"] .um-notification-header h4,
body[class*="dashboard"] .um-notification-header h4 {
  color: #ffffff !important;
}

body.filmly-dark-mode .um-notification,
body.dark-header .um-notification,
body.dark-theme .um-notification,
body.um-page-user .um-notification,
body.um-page-account .um-notification,
body[class*="messages"] .um-notification,
body[class*="dashboard"] .um-notification {
  border-bottom-color: #1e2038 !important;
  color: #cbd5e1 !important;
  background: transparent !important;
}

body.filmly-dark-mode .um-notification.unread,
body.dark-header .um-notification.unread,
body.dark-theme .um-notification.unread,
body.um-page-user .um-notification.unread,
body.um-page-account .um-notification.unread,
body[class*="messages"] .um-notification.unread,
body[class*="dashboard"] .um-notification.unread {
  background: #1a1b26 !important;
  border-left-color: #e63946 !important;
}

body.filmly-dark-mode .um-notification:hover,
body.dark-header .um-notification:hover,
body.dark-theme .um-notification:hover,
body.um-page-user .um-notification:hover,
body.um-page-account .um-notification:hover,
body[class*="messages"] .um-notification:hover,
body[class*="dashboard"] .um-notification:hover {
  background: #23243a !important;
}

body.filmly-dark-mode .um-notification span.b1,
body.dark-header .um-notification span.b1,
body.dark-theme .um-notification span.b1,
body.um-page-user .um-notification span.b1,
body.um-page-account .um-notification span.b1,
body[class*="messages"] .um-notification span.b1,
body[class*="dashboard"] .um-notification span.b1 {
  color: #9ca3af !important;
}

body.filmly-dark-mode .um-notification span.b2,
body.dark-header .um-notification span.b2,
body.dark-theme .um-notification span.b2,
body.um-page-user .um-notification span.b2,
body.um-page-account .um-notification span.b2,
body[class*="messages"] .um-notification span.b2,
body[class*="dashboard"] .um-notification span.b2 {
  color: #6b7280 !important;
}

body.filmly-dark-mode .um-notifications-filter,
body.dark-header .um-notifications-filter,
body.dark-theme .um-notifications-filter,
body.um-page-user .um-notifications-filter,
body.um-page-account .um-notifications-filter,
body[class*="messages"] .um-notifications-filter,
body[class*="dashboard"] .um-notifications-filter {
  border-color: #3b3d5c !important;
  color: #9ca3af !important;
  background: transparent !important;
}

body.filmly-dark-mode .um-notifications-filter.active,
body.dark-header .um-notifications-filter.active,
body.dark-theme .um-notifications-filter.active,
body.um-page-user .um-notifications-filter.active,
body.um-page-account .um-notifications-filter.active,
body[class*="messages"] .um-notifications-filter.active,
body[class*="dashboard"] .um-notifications-filter.active {
  background: #e63946 !important;
  border-color: #e63946 !important;
  color: #ffffff !important;
}

body.filmly-dark-mode .um-notification-i-close,
body.dark-header .um-notification-i-close,
body.dark-theme .um-notification-i-close,
body.um-page-user .um-notification-i-close,
body.um-page-account .um-notification-i-close,
body[class*="messages"] .um-notification-i-close,
body[class*="dashboard"] .um-notification-i-close,
body.filmly-dark-mode .um-notifications-options-a,
body.dark-header .um-notifications-options-a,
body.dark-theme .um-notifications-options-a,
body.um-page-user .um-notifications-options-a,
body.um-page-account .um-notifications-options-a,
body[class*="messages"] .um-notifications-options-a,
body[class*="dashboard"] .um-notifications-options-a,
body.filmly-dark-mode .um-notifications-options-a i,
body.dark-header .um-notifications-options-a i,
body.dark-theme .um-notifications-options-a i,
body.um-page-user .um-notifications-options-a i,
body.um-page-account .um-notifications-options-a i,
body[class*="messages"] .um-notifications-options-a i,
body[class*="dashboard"] .um-notifications-options-a i {
  color: #9ca3af !important;
  font-size: 18px !important;
  transition: color 0.15s ease !important;
}

body.filmly-dark-mode .um-notification-i-close:hover,
body.dark-header .um-notification-i-close:hover,
body.dark-theme .um-notification-i-close:hover,
body.um-page-user .um-notification-i-close:hover,
body.um-page-account .um-notification-i-close:hover,
body[class*="messages"] .um-notification-i-close:hover,
body[class*="dashboard"] .um-notification-i-close:hover,
body.filmly-dark-mode .um-notifications-options-a:hover,
body.dark-header .um-notifications-options-a:hover,
body.dark-theme .um-notifications-options-a:hover,
body.um-page-user .um-notifications-options-a:hover,
body.um-page-account .um-notifications-options-a:hover,
body[class*="messages"] .um-notifications-options-a:hover,
body[class*="dashboard"] .um-notifications-options-a:hover,
body.filmly-dark-mode .um-notifications-options-a:hover i,
body.dark-header .um-notifications-options-a:hover i,
body.dark-theme .um-notifications-options-a:hover i,
body.um-page-user .um-notifications-options-a:hover i,
body.um-page-account .um-notifications-options-a:hover i,
body[class*="messages"] .um-notifications-options-a:hover i,
body[class*="dashboard"] .um-notifications-options-a:hover i {
  color: #ffffff !important;
}

body.filmly-dark-mode .um-new-dropdown,
body.dark-header .um-new-dropdown,
body.dark-theme .um-new-dropdown,
body.um-page-user .um-new-dropdown,
body.um-page-account .um-new-dropdown,
body[class*="messages"] .um-new-dropdown,
body[class*="dashboard"] .um-new-dropdown {
  background: #1a1b26 !important;
  border-color: #23243a !important;
}

body.filmly-dark-mode .um-new-dropdown ul li a,
body.dark-header .um-new-dropdown ul li a,
body.dark-theme .um-new-dropdown ul li a,
body.um-page-user .um-new-dropdown ul li a,
body.um-page-account .um-new-dropdown ul li a,
body[class*="messages"] .um-new-dropdown ul li a,
body[class*="dashboard"] .um-new-dropdown ul li a {
  color: #e2e8f0 !important;
}

body.filmly-dark-mode .um-new-dropdown ul li a:hover,
body.dark-header .um-new-dropdown ul li a:hover,
body.dark-theme .um-new-dropdown ul li a:hover,
body.um-page-user .um-new-dropdown ul li a:hover,
body.um-page-account .um-new-dropdown ul li a:hover,
body[class*="messages"] .um-new-dropdown ul li a:hover,
body[class*="dashboard"] .um-new-dropdown ul li a:hover {
  background: #23243a !important;
  color: #ffffff !important;
}

/* ========== JOBS PAGE SEARCH & FILTER CONTROLS ========== */
.filmly-jobs-filter-container {
  margin-bottom: 24px !important;
  width: 100% !important;
}

.filmly-search-bar-wrap {
  position: relative !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.filmly-search-bar-wrap .filmly-search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  pointer-events: none !important;
}

.filmly-title-search-input {
  width: 100% !important;
  padding: 14px 18px 14px 44px !important;
  background: #131428 !important;
  border: 1px solid #23243a !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-family: degular, 'Inter', sans-serif !important;
  color: #ffffff !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-sizing: border-box !important;
}

.filmly-title-search-input:focus {
  border-color: #e63946 !important;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15) !important;
}

.filmly-job-filter-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.filmly-filter-col label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: #94a3b8 !important;
  margin-bottom: 6px !important;
  font-family: degular, 'Inter', sans-serif !important;
}

.filmly-filter-col select {
  width: 100% !important;
  background: #181a2e !important;
  border: 1px solid #2e3155 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: degular, 'Inter', sans-serif !important;
  transition: border-color .2s !important;
}

/* ── Global Select2 & Auth Dropdown Dark Mode Overrides ── */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.select2-selection {
  background-color: #181a2e !important;
  background: #181a2e !important;
  border: 1px solid #2e3155 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}

.select2-choice>.select2-chosen,
.select2-selection__rendered {
  color: #ffffff !important;
}

.select2-drop,
.select2-drop-active,
.select2-dropdown {
  background-color: #13142a !important;
  background: #13142a !important;
  border: 1px solid #2e3155 !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

.select2-results li.select2-result,
.select2-results__option {
  color: #cbd5e1 !important;
}

.select2-results li.select2-highlighted,
.select2-results__option--highlighted {
  background-color: #F73B3E !important;
  background: #F73B3E !important;
  color: #ffffff !important;
}