:root {
  --amal-touch-target: 44px;
  --amal-visible-gutter: clamp(12px, 2.5vw, 28px);
  --amal-safe-top: env(safe-area-inset-top, 0px);
  --amal-safe-right: env(safe-area-inset-right, 0px);
  --amal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --amal-safe-left: env(safe-area-inset-left, 0px);
}

html:not([data-amal-access-class="full-computer"]) [data-mobile-access="desktop-only"],
html:not([data-amal-access-class="full-computer"]) [data-desktop-only-action] {
  display: none !important;
}

html[data-amal-presentation="mobile"] [data-amal-computer-only],
html[data-amal-presentation="computer"] [data-amal-mobile-only] {
  display: none !important;
}

.amal-presentation-switch {
  display: inline-flex;
  min-height: var(--amal-touch-target);
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(7, 75, 210, .22);
  border-radius: 10px;
  background: #f4f7ff;
  color: #074bd2;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.amal-presentation-switch:hover {
  background: #eaf0ff;
}

.amal-presentation-switch:focus-visible {
  outline: 3px solid rgba(7, 75, 210, .34);
  outline-offset: 2px;
}

.amal-presentation-floating-switch {
  position: fixed;
  right: max(12px, var(--amal-safe-right));
  bottom: max(12px, var(--amal-safe-bottom));
  z-index: 2147483000;
  width: auto;
  max-width: min(290px, calc(100vw - 24px - var(--amal-safe-left) - var(--amal-safe-right)));
  justify-content: center;
  border-color: rgba(7, 75, 210, .35);
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 32, 64, .2);
}

@media (max-width: 900px) {
  html[data-amal-access-class="mobile-restricted"][data-amal-presentation="computer"] .global-header-actions {
    position: relative;
  }

  html[data-amal-access-class="mobile-restricted"][data-amal-presentation="computer"] .global-nav-wrap,
  html[data-amal-access-class="mobile-restricted"][data-amal-presentation="computer"] .global-language-wrap,
  html[data-amal-access-class="mobile-restricted"][data-amal-presentation="computer"] .global-account-wrap {
    position: static;
  }

  html[data-amal-access-class="mobile-restricted"][data-amal-presentation="computer"] .global-menu {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amal-presentation-switch {
    scroll-behavior: auto;
    transition: none;
  }
}