/* ==========================================================
   RECENTLY VIEWED JOBS
   Background is deliberately transparent throughout — the client sets
   their own background on the wrapping Elementor container per page.
   Heading and the "View job" CTA use --primary (this is content-adjacent
   enough to brand); Clear jobs stays neutral white but still uses the
   plugin's --radius token for consistency. Every rule that fights
   Elementor's global button/link styling carries !important — this
   component hit that same override on both its buttons in testing.
   ========================================================== */

.aplify-recently-viewed {
  width: 100%;
  font-family: var(--font-family);
  background: transparent;
}

.aplify-recently-viewed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  padding: 16px 0px;
}

.aplify-recently-viewed-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md, 16px);
  font-weight: var(--display-weight, 550);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--recently-viewed-text-color, var(--primary)) !important;
}

.aplify-recently-viewed-heading i {
  font-size: var(--text-xl, 20px);
  color: var(--recently-viewed-text-color, var(--primary)) !important;
}

.aplify-recently-viewed-count {
  font-weight: var(--weight-body, 400);
  text-transform: none;
  color: var(--muted);
}

/* Plain text + icon, deliberately not styled as a button — no border,
   background, or shadow at all. */
.aplify-recently-viewed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--recently-viewed-text-color, var(--fg)) !important;
  font-size: var(--text-base, 14px)!important;
  font-weight: var(--button-weight);
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-family);
}

.aplify-recently-viewed-toggle i {
  font-size: var(--text-md, 16px);
  transition: transform .15s ease;
}

.aplify-recently-viewed-toggle i.is-flipped {
  transform: rotate(180deg);
}

.aplify-recently-viewed-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
}

.aplify-recently-viewed-body-wrapper.is-expanded {
  grid-template-rows: 1fr;
}

.aplify-recently-viewed-body-wrapper > .aplify-recently-viewed-body {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  padding: 0;
  transition: opacity 180ms ease, transform 180ms ease, padding 280ms ease;
}

.aplify-recently-viewed-body-wrapper.is-expanded > .aplify-recently-viewed-body {
  opacity: 1;
  transform: translateY(0);
  padding: 0 0 24px;
  transition: opacity 180ms ease 100ms, transform 180ms ease 100ms, padding 280ms ease;
}

.aplify-recently-viewed-body {
  background: transparent;
}

.aplify-recently-viewed-empty {
  font-size: var(--text-base, 14px);
  color: var(--muted);
  margin: 0 0 16px;
}

.aplify-recently-viewed-clear {
  display: inline-block;
  background: var(--recently-viewed-clear-bg, var(--input-bg)) !important;
  border: none!important;
  border-radius: var(--radius) !important;
  color: var(--recently-viewed-clear-text, var(--fg)) !important;
  font-size: var(--text-base, 14px)!important;
  font-weight: var(--weight-strong, 600);
  font-family: var(--font-family)!important;
  padding: 10px 20px;
  cursor: pointer;
  margin-bottom: 40px;
}

.aplify-recently-viewed-clear:hover {
  filter: brightness(0.96);
}

/* Track (job content) is capped to 62.5% — the divider below matches
   this width exactly, while the nav sits in the remaining space to its
   right, reaching the container's true right edge. */
.aplify-recently-viewed-carousel {
  max-width: 62.5%;
}

.aplify-recently-viewed-track-wrapper {
  overflow: hidden;
}

.aplify-recently-viewed-track {
  display: flex;
  transition: transform 320ms ease;
}

.aplify-recently-viewed-row {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.aplify-recently-viewed-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.aplify-recently-viewed-divider {
  flex: 0 0 62.5%;
  border-top: 1px solid var(--recently-viewed-divider-color, var(--panel-border));
}

.aplify-recently-viewed-info {
  min-width: 0;
}

.aplify-recently-viewed-title {
  font-size: var(--text-2xl, 24px);
  font-weight: var(--display-weight, 550);
  color: var(--recently-viewed-text-color, var(--fg));
  margin: 0 0 10px;
font-family: var(--font-family)!important;
}

.aplify-recently-viewed-detail {
  font-size: var(--text-md, 16px);
  color: var(--recently-viewed-text-color, var(--fg));
  line-height: 1.6;
}

.aplify-recently-viewed-detail strong {
  font-weight: var(--weight-strong, 600);
  color: var(--recently-viewed-text-color, var(--fg));
}

.aplify-recently-viewed-view-btn {
  flex-shrink: 0;
  display: inline-block;
  background: var(--primary) !important;
  color: var(--button-text-color, #ffffff) !important;
  text-decoration: none;
  border-radius: var(--radius) !important;
  padding: 12px 24px;
  font-size: var(--text-base, 14px);
  font-weight: var(--button-weight);
  box-shadow: var(--button-shadow);
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease;
	font-family: var(--font-family)!important;
}

.aplify-recently-viewed-view-btn:hover {
  background: var(--primary-hover) !important;
  color: var(--button-text-color, #ffffff) !important;
  box-shadow: var(--button-shadow-hover);
}

.aplify-recently-viewed-nav {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.aplify-recently-viewed-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  color: var(--recently-viewed-nav-color, var(--fg))!important;
  cursor: pointer!important;
}

.aplify-recently-viewed-arrow i {
  font-size: var(--text-xl, 20px);
  line-height: 1;
  display: block;
}

.aplify-recently-viewed-arrow:disabled {
  color: var(--muted)!important;
  cursor: default;
}

.aplify-recently-viewed-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aplify-recently-viewed-dot {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  min-width: 10px;
  line-height: 0;
  font-size: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid var(--recently-viewed-nav-color, var(--fg)) !important;
  cursor: pointer;
  flex-shrink: 0;
}

.aplify-recently-viewed-dot.is-active {
  background: var(--recently-viewed-nav-color, var(--fg)) !important;
}

@media (max-width: 600px) {
  .aplify-recently-viewed-carousel {
    max-width: 100%;
  }

  .aplify-recently-viewed-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .aplify-recently-viewed-view-btn {
    width: 100%;
    text-align: center;
  }

  .aplify-recently-viewed-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .aplify-recently-viewed-divider {
    flex-basis: auto;
  }

  .aplify-recently-viewed-nav {
    justify-content: center;
  }
}