/**
 * Filmly Responsive Stylesheet (High-Priority Components)
 * Scope:
 *  - [filmly_talent_profile] (.ftp-wrap)
 *  - [filmly_company_page] (.fcp-wrap)
 *  - [filmly_company_jobs] (.f-company-jobs-wrap, .f-job-row)
 *
 * Implemented using intrinsic fluid layout techniques, scroll-snap,
 * edge-fade indicators, and non-destructive styling.
 */

/* ==========================================================================
   1. GLOBAL CONTAINER & PREVENT HORIZONTAL OVERFLOW
   ========================================================================== */
html body .ftp-wrap,
html body .f-company-jobs-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
  /* Prevents viewport blowup on touch devices */
}

/* Company Page (.fcp-wrap) — Clean full-width container without offset shifting */
html body .fcp-wrap,
.fcp-wrap {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  background-color: #0B0F17 !important;
  min-height: 100vh !important;
  overflow-x: clip !important;
}

/* Ensure underlying body and theme containers are dark on company profile pages */
body:has(.fcp-wrap),
body.single-filmly_company,
.single-filmly_company #page,
.single-filmly_company #content,
.single-filmly_company .site-content,
.single-filmly_company .ast-container,
.single-filmly_company .elementor-section-wrap {
  background-color: #0B0F17 !important;
}

/* Remove wrapper gutters on company pages so dark theme fills full width without clipping */
body:has(.fcp-wrap) .site-content,
body:has(.fcp-wrap) .ast-container,
body:has(.fcp-wrap) .ast-separate-container,
body:has(.fcp-wrap) #primary,
body:has(.fcp-wrap) #content,
body:has(.fcp-wrap) .entry-content,
.single-filmly_company .site-content,
.single-filmly_company .ast-container,
.single-filmly_company .ast-separate-container,
.single-filmly_company #primary,
.single-filmly_company #content,
.single-filmly_company .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure underlying body and theme containers are dark on talent profile pages */
body:has(.ftp-wrap),
body.um-page-user,
.um-page-user #page,
.um-page-user #content,
.um-page-user .site-content,
.um-page-user .ast-container,
.um-page-user .elementor-section-wrap {
  background-color: #0c0d12 !important;
}

/* ==========================================================================
   2. TALENT PROFILE TABS & NAVIGATION (.ftp-nav)
   ========================================================================== */
.ftp-nav {
  position: relative !important;
  width: 100% !important;
  background: #0c0d12 !important;
  border-bottom: 1px solid #23243a !important;
}

/* Left and right fade gradient mask cue so mobile users see overflowing tabs */
.ftp-nav::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 28px !important;
  background: linear-gradient(90deg, rgba(12, 13, 18, 0) 0%, #0c0d12 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.ftp-nav-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  padding: 0 clamp(16px, 4vw, 64px) !important;
  box-sizing: border-box !important;
}

.ftp-nav-inner::-webkit-scrollbar {
  display: none !important;
}

.ftp-nav-tab {
  flex-shrink: 0 !important;
  scroll-snap-align: center !important;
  padding: clamp(12px, 2.5vw, 16px) clamp(8px, 2vw, 14px) !important;
  margin-right: 0 !important;
  font-size: clamp(12px, 1.6vw, 13px) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  touch-action: manipulation !important;
}

.ftp-tab-count {
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #9ca3af !important;
  line-height: 1 !important;
}

.ftp-nav-tab.active .ftp-tab-count {
  background: rgba(230, 57, 70, 0.2) !important;
  color: #e63946 !important;
}

/* ==========================================================================
   3. TALENT PROFILE HERO SECTION (.ftp-hero)
   ========================================================================== */
.ftp-hero {
  padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 64px) clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

.ftp-hero-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 3vw, 28px) !important;
}

.ftp-hero-left {
  flex: 1 1 280px !important;
  min-width: 0 !important;
}

@media (max-width: 900px) {
  html body .ftp-wrap .ftp-hero-left {
    flex: 0 0 auto !important;
  }
}

/* Enforce paired row layout on all viewports: Avatar beside Name, never stacked or isolated in center */
html body .ftp-wrap .ftp-hero-header-flex,
.ftp-hero-header-flex {
  display: flex !important;
  flex-direction: row !important;
  /* Prevents column stacking & centering */
  align-items: center !important;
  gap: clamp(14px, 3vw, 24px) !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

html body .ftp-wrap .ftp-hero-avatar-wrap,
.ftp-hero-avatar-wrap {
  width: clamp(76px, 16vw, 110px) !important;
  height: clamp(76px, 16vw, 110px) !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

html body .ftp-wrap .ftp-hero-meta-col,
.ftp-hero-header-flex>div:last-child {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  height: auto !important;
  /* Prevents vertical height-stretch gap */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body .ftp-wrap .ftp-hero-name,
html body .ftp-hero-name,
html body h1.ftp-hero-name,
.ftp-hero-name {
  font-size: clamp(1.65rem, 4.5vw, 2.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  margin: 0 0 6px 0 !important;
  word-break: break-word !important;
}

.ftp-hero-craft {
  font-size: clamp(12px, 2.5vw, 14px) !important;
  color: #9ca3af !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}

.ftp-hero-stats {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  font-size: clamp(10.5px, 2.5vw, 12px) !important;
  margin-bottom: 0 !important;
  /* Prevents vertical gap */
}

/* Links row right underneath the avatar/name block */
.ftp-hero-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

/* Hero action buttons */
html body .ftp-wrap .ftp-hero-btns,
.ftp-hero-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.ftp-hero-btns .ftp-btn,
.ftp-hero-btns .filmly-follow-btn,
.ftp-hero-btns .um-message-btn {
  padding: 8px 16px !important;
  font-size: clamp(12px, 1.5vw, 13px) !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {

  html body .ftp-wrap .ftp-hero-btns,
  .ftp-hero-btns {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 14px !important;
  }
}

@media (min-width: 769px) {

  html body .ftp-wrap .ftp-hero-btns,
  .ftp-hero-btns {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   4. TALENT PROFILE BODY & TABS CONTENT
   ========================================================================== */
.ftp-body {
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 64px) clamp(24px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* --- Work Tab --- */
.ftp-work-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 42vw, 320px), 1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
}

/* --- Credits Tab --- */
.ftp-imdb-bar {
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 20px) !important;
  gap: 10px !important;
}

.ftp-credit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(8px, 2vw, 16px) !important;
  flex-wrap: wrap !important;
  padding: 14px 10px !important;
}

.ftp-credit-year {
  font-size: 12px !important;
  font-weight: 700 !important;
  width: auto !important;
  min-width: 38px !important;
  color: #64748b !important;
}

.ftp-credit-info {
  flex: 1 1 180px !important;
  min-width: 0 !important;
}

.ftp-credit-title {
  font-size: clamp(13px, 1.8vw, 14px) !important;
  word-break: break-word !important;
}

.ftp-credit-type {
  font-size: 11px !important;
  width: auto !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  color: #94a3b8 !important;
}

/* Popover touch fix: on touch devices tap toggles visible class */
.ftp-credit-row.touch-active .ftp-credit-poster-popover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* --- About Tab Layout --- */
.ftp-about-layout {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 48vw, 680px), 1fr)) !important;
  gap: clamp(20px, 3.5vw, 36px) !important;
}

.ftp-cv-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: clamp(14px, 2.5vw, 18px) clamp(14px, 3vw, 22px) !important;
}

.ftp-cv-card .ftp-btn {
  flex: 0 0 auto !important;
}

/* ==========================================================================
   5. COMPANY PAGE TABS & NAVIGATION (.fcp-tabs)
   ========================================================================== */
.fcp-tabs {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  padding-bottom: 6px !important;
  margin-bottom: clamp(20px, 3vw, 32px) !important;
  border-bottom: 2px solid #1e293b !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
}

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

.fcp-tab {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 20px) !important;
  font-size: clamp(11px, 1.4vw, 13px) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  border-bottom: 3px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.fcp-tab.active {
  border-bottom-color: #ff5e5e !important;
}

.fcp-tab-count {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   6. COMPANY PAGE HEADER & ACTIONS (.fcp-header, .fcp-action-row)
   ========================================================================== */
.fcp-container {
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 3.5vw, 28px) !important;
  box-sizing: border-box !important;
}

/* Company Page Header — paired logo + title row on all viewports, no awkward gap */
html body .fcp-header,
.fcp-header {
  display: flex !important;
  flex-direction: row !important;
  /* Enforces row layout: Logo beside Title, not stacked/isolated */
  align-items: center !important;
  gap: clamp(14px, 3vw, 24px) !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

html body .fcp-logo,
.fcp-logo {
  width: clamp(74px, 16vw, 104px) !important;
  height: clamp(74px, 16vw, 104px) !important;
  border-radius: clamp(14px, 3vw, 20px) !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  align-self: flex-start !important;
}

html body .fcp-header-info,
.fcp-header-info {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body .fcp-company-name,
html body .fcp-wrap h1.fcp-company-name,
.fcp-company-name,
.fcp-wrap h1.fcp-company-name {
  font-size: clamp(1.65rem, 4.5vw, 2.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  margin: 0 0 6px 0 !important;
  word-break: break-word !important;
}

html body .fcp-meta-row,
.fcp-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  font-size: clamp(11px, 2.8vw, 13px) !important;
  color: #CBD5E1 !important;
  margin-bottom: 0 !important;
  /* Eliminates the massive gap after ratings */
}

/* Follow button & follower count */
html body .fcp-header-actions,
.fcp-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {

  html body .fcp-header-actions,
  .fcp-header-actions {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 12px !important;
  }
}

@media (min-width: 769px) {

  html body .fcp-header-actions,
  .fcp-header-actions {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Action button cluster (I Work Here, View Team, Review, Claim, Thumbs) */
.fcp-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}

.fcp-action-row .fcp-btn {
  flex: 0 1 auto !important;
  font-size: clamp(11px, 1.4vw, 13px) !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fcp-vote-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   7. COMPANY PAGE BODY & PANELS (.fcp-body, .fcp-showreel, .fcp-projects-grid)
   ========================================================================== */
.fcp-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 48vw, 760px), 1fr)) !important;
  gap: clamp(20px, 3vw, 36px) !important;
  align-items: start !important;
}

/* Showreel Fluid Container */
.fcp-showreel {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  /* 16:9 aspect ratio */
  height: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #000000 !important;
}

.fcp-showreel iframe,
.fcp-showreel video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
}

/* Latest Projects Grid */
.fcp-projects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 42vw, 220px), 1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
}

.fcp-project-thumb {
  aspect-ratio: 2 / 3 !important;
  width: 100% !important;
  position: relative !important;
}

.fcp-project-meta {
  padding: clamp(10px, 1.8vw, 14px) !important;
}

.fcp-project-title {
  font-size: clamp(12px, 1.5vw, 13px) !important;
  word-break: break-word !important;
}

/* Team Modal Single/2-Col Responsive Grid */
.fcp-modal {
  width: min(540px, 94vw) !important;
  padding: clamp(20px, 4vw, 36px) !important;
  box-sizing: border-box !important;
}

.fcp-team-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 40vw, 200px), 1fr)) !important;
  gap: 12px !important;
}

/* ==========================================================================
   8. COMPANY JOBS LIST (.f-company-jobs-wrap, .f-job-row)
   ========================================================================== */
.f-company-jobs-wrap {
  width: 100% !important;
}

.f-job-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: clamp(14px, 2.5vw, 20px) !important;
  box-sizing: border-box !important;
}

.f-job-row>div:first-child {
  flex: 1 1 240px !important;
  min-width: 0 !important;
}

.f-job-row strong {
  font-size: clamp(14px, 2vw, 16px) !important;
  word-break: break-word !important;
}

.f-job-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  align-self: center !important;
}

@media (max-width: 540px) {
  .f-job-btn {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }
}

/* ==========================================================================
   9. DISCOVER DIRECTORY FILTER BAR ([filmly_discover_talent], [filmly_discover_performers])
   ========================================================================== */
html body .fdt-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 64px) clamp(40px, 6vw, 80px) !important;
}

/* Outer Filter Bar Card Panel */
html body .fdt-wrap .fdt-filter-bar,
.fdt-filter-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 32px !important;
  background: #13141c !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid #23243a !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Row 1: Search bar + cities dropdown */
html body .fdt-wrap .fdt-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .fdt-wrap .fdt-search-row .fdt-search-box {
  position: relative !important;
  flex: 0 1 420px !important;
  max-width: 440px !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

html body .fdt-wrap .fdt-search-row .fdt-search-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  background: #13141c !important;
  border: 1px solid #23243a !important;
  color: #ffffff !important;
  padding: 0 16px 0 42px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .fdt-wrap .fdt-search-row .fdt-city-wrap {
  flex: 0 0 200px !important;
  min-width: 180px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
}

html body .fdt-wrap .fdt-search-row select.fdt-select,
html body .fdt-wrap select.fdt-select {
  display: block !important;
  width: 100% !important;
  min-width: 180px !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: normal !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;
  color: #ffffff !important;
  padding: 0 36px 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  color-scheme: dark !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body .fdt-wrap select.fdt-select option {
  background-color: #13141c !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
}

/* Row 2: Underneath Filters Container */
html body .fdt-wrap .fdt-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Distinct "Available now" Filter (all screens) */
html body .fdt-wrap .fdt-chip-avail {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.45) !important;
  color: #4ade80 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 15px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08) !important;
  user-select: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

html body .fdt-wrap .fdt-chip-avail:hover {
  background: rgba(34, 197, 94, 0.22) !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35) !important;
}

html body .fdt-wrap .fdt-chip-avail.active {
  background: #16a34a !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.55) !important;
}

/* Multi-select "+ More Filters" Dropdown Button & Popover */
html body .fdt-wrap .fdt-more-dropdown-wrap {
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

html body .fdt-wrap .fdt-more-btn {
  background: #13141c !important;
  border: 1px solid #23243a !important;
  color: #cbd5e1 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

html body .fdt-wrap .fdt-more-btn:hover,
html body .fdt-wrap .fdt-more-btn.is-open {
  border-color: #3b3d5c !important;
  color: #ffffff !important;
  background: #1a1b26 !important;
}

html body .fdt-wrap .fdt-more-btn.has-active {
  background: rgba(230, 57, 70, 0.15) !important;
  border-color: #e63946 !important;
  color: #ffffff !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  html body .fdt-wrap .fdt-search-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

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

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

  html body .fdt-wrap .fdt-search-row select.fdt-select,
  html body .fdt-wrap select.fdt-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

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

  html body .fdt-wrap .fdt-more-prefix {
    display: none !important;
  }

  html body .fdt-wrap .fdt-more-dropdown-wrap {
    position: static !important;
  }

  html body .fdt-wrap .fdt-more-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
}

/* ==========================================================================
   10. COMPANY DASHBOARD & EDIT FORM [filmly_edit_company_form]
   ========================================================================== */
html body .f-dash-container,
.f-dash-container {
  width: 100% !important;
  max-width: 1050px !important;
  box-sizing: border-box !important;
}

html body .f-dash-container .f-tabs-nav,
.f-dash-container .f-tabs-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 2px 12px 2px !important;
  margin-bottom: clamp(18px, 3vw, 30px) !important;
  gap: 8px !important;
  border-bottom: 1px solid #23243a !important;
  overflow: visible !important;
}

html body .f-dash-container .f-tabs-nav::-webkit-scrollbar,
.f-dash-container .f-tabs-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .f-dash-container .f-tab-btn,
.f-dash-container .f-tab-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  padding: clamp(8px, 1.5vw, 12px) clamp(8px, 1.8vw, 16px) !important;
  font-size: clamp(12px, 1.8vw, 14px) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 640px) {

  html body .f-dash-container,
  .f-dash-container {
    padding: 16px 12px !important;
    border-radius: 16px !important;
    margin: 10px auto !important;
  }

  html body .f-dash-container .f-tabs-nav,
  .f-dash-container .f-tabs-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
  }

  html body .f-dash-container .f-tab-btn,
  .f-dash-container .f-tab-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: calc(30% - 6px) !important;
    max-width: 100% !important;
    width: auto !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {

  html body .f-dash-container,
  .f-dash-container {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    margin: 6px auto !important;
  }

  html body .f-dash-container .f-tabs-nav,
  .f-dash-container .f-tabs-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
  }

  html body .f-dash-container .f-tab-btn,
  .f-dash-container .f-tab-btn {
    flex: 1 1 calc(33.333% - 5px) !important;
    min-width: calc(30% - 5px) !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   11. MY JOBS DASHBOARD [filmly_my_jobs] (.f-my-jobs-dashboard)
   ========================================================================== */
html body .f-my-jobs-dashboard,
.f-my-jobs-dashboard {
  width: 100% !important;
  max-width: 1140px !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

/* Tabs: Full-width smooth horizontal scrolling with snap */
html body .f-my-jobs-dashboard .f-tabs-nav,
.f-my-jobs-dashboard .f-tabs-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  padding: 4px 2px 10px 2px !important;
  margin-bottom: clamp(16px, 2.5vw, 24px) !important;
  border-bottom: 1px solid #23253b !important;
}

html body .f-my-jobs-dashboard .f-tabs-nav::-webkit-scrollbar,
.f-my-jobs-dashboard .f-tabs-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .f-my-jobs-dashboard .f-tab-btn,
.f-my-jobs-dashboard .f-tab-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: clamp(7px, 1.5vw, 9px) clamp(10px, 2vw, 16px) !important;
  font-size: clamp(12px, 1.6vw, 14px) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .f-my-jobs-dashboard .f-tab-count,
.f-my-jobs-dashboard .f-tab-count {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: inline-block !important;
}

html body .f-my-jobs-dashboard .f-tab-btn.active .f-tab-count,
.f-my-jobs-dashboard .f-tab-btn.active .f-tab-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {

  html body .f-my-jobs-dashboard,
  .f-my-jobs-dashboard {
    padding: clamp(16px, 3vw, 22px) clamp(12px, 2.5vw, 16px) !important;
  }

  html body .f-my-jobs-dashboard .f-top-header-row,
  .f-my-jobs-dashboard .f-top-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  html body .f-my-jobs-dashboard .f-top-header-actions,
  .f-my-jobs-dashboard .f-top-header-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html body .f-my-jobs-dashboard #f-active-entity-credit-box,
  .f-my-jobs-dashboard #f-active-entity-credit-box {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  html body .f-my-jobs-dashboard .f-btn-red,
  .f-my-jobs-dashboard .f-btn-red {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 18px !important;
  }

  /* Entity Switcher as sleek horizontal chips */
  html body .f-my-jobs-dashboard .f-entity-switcher-wrap,
  .f-my-jobs-dashboard .f-entity-switcher-wrap {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html body .f-my-jobs-dashboard .f-switcher-header,
  .f-my-jobs-dashboard .f-switcher-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body .f-my-jobs-dashboard .f-switcher-pills,
  .f-my-jobs-dashboard .f-switcher-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 4px !important;
  }

  html body .f-my-jobs-dashboard .f-switcher-pills::-webkit-scrollbar,
  .f-my-jobs-dashboard .f-switcher-pills::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .f-my-jobs-dashboard .f-switcher-pill,
  .f-my-jobs-dashboard .f-switcher-pill {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
  }

  /* Responsive tab label abbreviation */
  html body .f-my-jobs-dashboard .f-tab-short,
  .f-my-jobs-dashboard .f-tab-short {
    display: inline !important;
  }

  html body .f-my-jobs-dashboard .f-tab-full,
  .f-my-jobs-dashboard .f-tab-full {
    display: none !important;
  }

  /* Job card responsive breakdown */
  html body .f-my-jobs-dashboard .f-job-card-header,
  .f-my-jobs-dashboard .f-job-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  html body .f-my-jobs-dashboard .f-job-actions-wrap,
  .f-my-jobs-dashboard .f-job-actions-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  html body .f-my-jobs-dashboard .f-job-manage-row,
  .f-my-jobs-dashboard .f-job-manage-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body .f-my-jobs-dashboard .f-job-cta-row,
  .f-my-jobs-dashboard .f-job-cta-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body .f-my-jobs-dashboard .f-job-cta-row>* {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Applicant Card */
  html body .f-my-jobs-dashboard .f-applicant-card-item,
  .f-my-jobs-dashboard .f-applicant-card-item {
    padding: 16px 14px !important;
    gap: 12px !important;
  }

  html body .f-my-jobs-dashboard .f-applicant-actions,
  .f-my-jobs-dashboard .f-applicant-actions {
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  html body .f-my-jobs-dashboard .f-applicant-actions>* {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 110px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}