.aift-mobile-nav {
  display: none;
}

@view-transition {
  navigation: auto;
}

@media (max-width: 760px) {
  html,
  body {
    background-color: #ffffff;
    color-scheme: light;
  }

  body.aift-mobile-nav-page {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .home-page-loader {
    display: none;
  }

  html.aift-section-host,
  html.aift-section-host body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.aift-section-document {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.aift-section-document body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
    background: #ffffff;
  }

  html.aift-section-document .aift-mobile-nav,
  html.aift-section-document .home-page-loader {
    display: none;
  }

  html.aift-section-document body .topbar {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border-bottom-color: rgba(225, 228, 232, 0.72) !important;
    transition: transform 190ms cubic-bezier(0.4, 0, 0.2, 1), background 190ms ease, backdrop-filter 190ms ease, border-color 190ms ease !important;
    will-change: transform;
  }

  html.aift-section-document body .header {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border-bottom-color: rgba(225, 228, 232, 0.72) !important;
  }

  .topbar {
    view-transition-name: aift-mobile-header;
  }

  main {
    view-transition-name: aift-mobile-content;
  }

  .aift-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 7000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    overflow: visible;
    background: rgba(255, 255, 255, 0.84);
    border: 0;
    border-top: 1px solid rgba(225, 228, 232, 0.72);
    border-radius: 0;
    box-shadow: 0 -1px 4px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transform: translate3d(0, 0, 0);
    transition: transform 190ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    view-transition-name: aift-mobile-navigation;
  }

  .aift-mobile-nav > a,
  .aift-mobile-nav > button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 4px 0 3px;
    color: #3f4650;
    font: 600 10px/1 Inter, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }

  .aift-mobile-nav > a.active,
  .aift-mobile-nav > button.active {
    color: #0a66c2;
  }

  .aift-mobile-nav svg {
    display: block;
    width: 23px;
    height: 23px;
    margin: 0;
    padding: 0;
    fill: currentColor;
    stroke: none;
  }

  .aift-mobile-nav--hidden {
    pointer-events: none;
    transform: translate3d(0, 100%, 0);
  }

  .aift-section-view,
  .aift-section-wait {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 0;
  }

  .aift-section-view {
    z-index: 6000;
    display: block;
    min-height: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    opacity: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .aift-section-view.is-current {
    opacity: 1;
  }

  .aift-section-wait {
    z-index: 6100;
    display: grid;
    place-items: center;
    background: transparent;
    pointer-events: none;
  }

  .aift-section-wait[hidden] {
    display: none;
  }

  .aift-section-wait span {
    width: 22px;
    height: 22px;
    padding: 3px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    border: 2.5px solid #d7dde5;
    border-top-color: #0a66c2;
    border-radius: 50%;
    animation: aift-section-spin .65s linear infinite;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(aift-mobile-header),
  ::view-transition-new(aift-mobile-header),
  ::view-transition-old(aift-mobile-navigation),
  ::view-transition-new(aift-mobile-navigation) {
    animation: none;
  }

  ::view-transition-old(aift-mobile-content) {
    animation: 90ms ease-out both aift-content-out;
  }

  ::view-transition-new(aift-mobile-content) {
    animation: 130ms ease-out both aift-content-in;
  }
}

@keyframes aift-section-spin {
  to { transform: rotate(360deg); }
}

@keyframes aift-content-out {
  to { opacity: 0; }
}

@keyframes aift-content-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aift-mobile-nav {
    transition-duration: 1ms;
  }

  .aift-section-wait span {
    animation: none;
  }

}

@media (max-width: 760px) {
  .aift-mobile-nav.aift-mobile-nav--dashboard-hidden {
    display: none !important;
    pointer-events: none !important;
  }

  body.aift-employer-dashboard-active {
    padding-bottom: 0 !important;
  }
}