#argentura-pwa {
  position: fixed;
  z-index: 1000;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid;
  width: min(340px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  gap: 10px;
  color: #e8edf2;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.argentura-connectivity-blocked,
html.argentura-connectivity-blocked body {
  overflow: hidden !important;
}

html.argentura-connectivity-blocked body > :not(#argentura-connectivity) {
  visibility: hidden !important;
  pointer-events: none !important;
}

#argentura-connectivity {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px))
    calc(24px + env(safe-area-inset-left, 0px));
  background: #0f1419;
  color: #e8edf2;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#argentura-connectivity[hidden] {
  display: none !important;
}

.argentura-connectivity-card {
  width: min(460px, 100%);
  padding: 30px;
  border: 1px solid #2e3a47;
  border-radius: 18px;
  background: #1a2129;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.argentura-connectivity-brand {
  margin-bottom: 22px;
  color: #4db6ac;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.argentura-connectivity-card h1 {
  margin: 0 0 12px;
  color: #f2f7f9;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
}

.argentura-connectivity-card p {
  margin: 0 0 24px;
  color: #aebbc6;
}

#argentura-pwa [hidden] {
  display: none !important;
}

.argentura-pwa-card {
  position: relative;
  padding: 14px;
  border: 1px solid #2e3a47;
  border-radius: 14px;
  background: rgba(26, 33, 41, 0.97);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.argentura-pwa-card p {
  margin: 0 0 10px;
  color: #c6d0d9;
}

.argentura-pwa-card strong {
  color: #f2f7f9;
}

.argentura-pwa-primary,
.argentura-pwa-dismiss {
  min-height: 44px;
  border: 1px solid #4db6ac;
  border-radius: 10px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.argentura-pwa-primary {
  background: #4db6ac;
  color: #0f1419;
}

.argentura-pwa-dismiss {
  background: transparent;
  color: #aebbc6;
}

.argentura-pwa-primary:focus-visible,
.argentura-pwa-dismiss:focus-visible {
  outline: 3px solid rgba(77, 182, 172, 0.35);
  outline-offset: 2px;
}

.argentura-pwa-primary:disabled {
  cursor: progress;
  opacity: 0.62;
}

@media (max-width: 720px) {
  #argentura-pwa {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

@supports (padding-left: env(safe-area-inset-left)) {
  body .topbar {
    padding-right: calc(20px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(20px + env(safe-area-inset-left, 0px)) !important;
  }

  body .main {
    padding-right: calc(34px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(34px + env(safe-area-inset-left, 0px)) !important;
  }

  body .auth-screen {
    padding-right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important;
  }

  body #auth > .lang-select {
    right: calc(18px + env(safe-area-inset-right, 0px)) !important;
  }

  body .auth-back {
    left: calc(18px + env(safe-area-inset-left, 0px)) !important;
  }

  body .tabbar,
  body .argentura-tabbar {
    padding-right: calc(4px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(4px + env(safe-area-inset-left, 0px)) !important;
  }

  body .argentura-topbar {
    padding-right: calc(20px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(20px + env(safe-area-inset-left, 0px)) !important;
  }

  body .argentura-content {
    padding-right: calc(34px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(34px + env(safe-area-inset-left, 0px)) !important;
  }

  body .argentura-demo-banner {
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
  }

  body .lady-login {
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
  }

  @media (max-width: 900px) {
    body .topbar {
      padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(14px + env(safe-area-inset-left, 0px)) !important;
    }

    body .main {
      padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(14px + env(safe-area-inset-left, 0px)) !important;
    }

    body .argentura-content {
      padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    }
  }

  @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    body .topbar,
    body .main {
      padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    }
  }

  @media (max-width: 560px) {
    body .argentura-topbar,
    body .argentura-content {
      padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(14px + env(safe-area-inset-left, 0px)) !important;
    }
  }

  @media (max-width: 420px) {
    body .topbar,
    body .main {
      padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    }

    body .auth-screen {
      padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    }

    body .tabbar {
      padding-right: calc(2px + env(safe-area-inset-right, 0px)) !important;
      padding-left: calc(2px + env(safe-area-inset-left, 0px)) !important;
    }
  }
}

@media (display-mode: standalone) {
  #argentura-pwa [data-pwa-install],
  #argentura-pwa [data-pwa-ios] {
    display: none !important;
  }
}

/* `black-translucent` places the app below the iOS status-bar overlay. */
@supports (padding-top: env(safe-area-inset-top)) {
  body .topbar {
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  body .auth-screen {
    padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body #auth > .lang-select {
    top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  }

  body .auth-back {
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  }

  @media (max-width: 900px) {
    body .auth-screen {
      padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px),
    (max-width: 420px) {
    body .topbar {
      height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    }
  }

  @media (max-width: 420px) {
    body .auth-screen {
      padding-top: calc(40px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  @supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) and (max-width: 420px) {
      body .topbar {
        height: calc(50px + max(44px, env(safe-area-inset-top, 0px))) !important;
        padding-top: max(44px, env(safe-area-inset-top, 0px)) !important;
      }
    }
  }
}