:root {
  --mg-bottom-nav-height: 76px;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-tap-highlight-color: transparent;
}

.mg-touch-target {
  min-height: 44px;
  min-width: 44px;
}

.mg-bottom-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.mg-card-hover {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mg-card-hover:hover {
  transform: translateY(-2px);
}

.mg-mobile-bottom-nav {
  display: none;
}

.mg-mobile-cta,
.mg-mobile-sticky-submit {
  display: none;
}

.mg-scroll-shadow {
  scrollbar-width: none;
}

.mg-scroll-shadow::-webkit-scrollbar {
  display: none;
}

.mg-image-zoom {
  cursor: zoom-in;
}

.mg-offline-badge {
  transform: translateY(-120%);
  transition: transform 180ms ease;
}

.mg-offline-badge.is-visible {
  transform: translateY(0);
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(var(--mg-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  footer {
    margin-bottom: var(--mg-bottom-nav-height);
  }

  .mg-mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    min-height: var(--mg-bottom-nav-height);
    padding: 0.5rem 0.75rem max(0.5rem, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgb(226 232 240);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08);
  }

  .mg-mobile-bottom-nav a,
  .mg-mobile-bottom-nav button {
    flex: 1;
    display: grid;
    gap: 0.15rem;
    place-items: center;
    border-radius: 1rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1;
    color: rgb(51 65 85);
    font-weight: 700;
  }

  .mg-mobile-bottom-nav span:first-child {
    font-size: 1.2rem;
    line-height: 1;
  }

  .mg-mobile-bottom-nav .is-primary {
    color: white;
    background: rgb(29 78 216);
  }

  .mg-mobile-cta {
    display: grid;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--mg-bottom-nav-height) + 0.75rem + env(safe-area-inset-bottom));
    z-index: 55;
  }

  .mg-mobile-sticky-submit {
    display: block;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--mg-bottom-nav-height) + 0.75rem + env(safe-area-inset-bottom));
    z-index: 55;
  }
}

.mg-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mg-rating-bar {
  transition: width 220ms ease;
}