html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 320px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main,
section,
header,
footer {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  main,
  section,
  header,
  footer {
    overflow-x: clip;
  }
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(207, 168, 86, 0.22);
}

button,
a {
  touch-action: manipulation;
}

input,
select,
textarea {
  font-size: 16px;
}

/* Framer Motion can leave auction rows in their hidden initial state after a
   hard refresh. Auction documents must remain visible even if animation setup
   is interrupted by Safari, Chromium, cache restoration, or reduced motion. */
[data-testid^="auction-"] {
  opacity: 1 !important;
  transform: none !important;
}

@supports (-webkit-touch-callout: none) {
  .min-h-\[100dvh\] {
    min-height: -webkit-fill-available;
  }
}

@media (max-width: 1023px) {
  header {
    overflow: visible !important;
  }

  #mobile-menu {
    position: fixed !important;
    top: 88px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
  }
}

@media (max-width: 767px) {
  .container {
    max-width: 100%;
  }

  .eyebrow {
    letter-spacing: 0.16em;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .gold-rule {
    width: 1.8rem;
  }

  [data-testid="button-admin-login"],
  [data-testid="button-change-password"],
  [data-testid="button-upload-doc"],
  [data-testid="button-upload-auction"] {
    min-height: 48px;
    white-space: normal;
    line-height: 1.25;
  }

  [data-testid="input-admin-username"],
  [data-testid="input-admin-password"],
  [data-testid="input-current-password"],
  [data-testid="input-new-password"],
  [data-testid="input-confirm-password"] {
    min-height: 52px;
  }

  form.border,
  div.border.bg-card {
    max-width: 100%;
  }

  .text-4xl,
  .md\:text-5xl {
    overflow-wrap: anywhere;
  }

  .grid {
    min-width: 0;
  }

  .grid > * {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .px-6 {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .p-7,
  .p-9,
  .md\:p-11 {
    padding: 1.25rem;
  }

  .text-3xl {
    font-size: 1.65rem;
    line-height: 1.18;
  }

  .text-4xl {
    font-size: 2rem;
    line-height: 1.14;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 100%;
  }

  .grid > * {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}