:root {
  --ns-mobile-gutter: clamp(16px, 4vw, 24px);
  --ns-touch-target: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-inline-size: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-inline-size: 100%;
}

img,
video,
canvas {
  block-size: auto;
}

input,
select,
textarea,
button {
  max-inline-size: 100%;
  font: inherit;
}

code,
pre,
td,
th,
[data-long-text] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-scroll,
.table-wrapper,
.admin-table-wrap,
.leads-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, #78a7ff 78%, white);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  :where(button, .btn, .button, .icon-btn, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
    min-block-size: var(--ns-touch-target);
    touch-action: manipulation;
  }

  :where(.modal, .dialog, .drawer, [role="dialog"]) {
    max-block-size: 100dvh;
  }

  :where(.modal-content, .dialog-content, .drawer-content, [role="dialog"] > :first-child) {
    max-inline-size: calc(100vw - (2 * var(--ns-mobile-gutter)));
    max-block-size: calc(100dvh - (2 * var(--ns-mobile-gutter)) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(.toast, .notification-toast, .feedback-toast, [role="status"], [role="alert"]) {
    max-inline-size: calc(100vw - (2 * var(--ns-mobile-gutter)));
    overflow-wrap: anywhere;
  }

  body:has(.login-container) .floating-whatsapp-contact,
  body:has(.checkout-shell) .floating-whatsapp-contact,
  body:has(#setup-form) .floating-whatsapp-contact,
  body:has(.policies) .floating-whatsapp-contact {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}