/* Global CSS for Konecta */

/* Mobile-first responsive layout */
html {
    background-color: #e5e7eb; /* Gray background for desktop */
    display: flex;
    justify-content: center;
}

body {
    max-width: 480px;
    width: 100%;
    min-height: 100vh;
    background-color: #f9fafb;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for desktop */
    overflow-x: hidden;
}

/* Constrain fixed elements to mobile width and center them */
nav.fixed,
.fixed.top-0,
.fixed.bottom-0 {
    max-width: 480px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Constrain floating buttons to mobile width */
button.fixed {
    left: auto !important;
    right: calc(50% - 480px/2 + 1rem) !important;
}

@media (max-width: 480px) {
    nav.fixed,
    .fixed.top-0,
    .fixed.bottom-0 {
        left: 0 !important;
        transform: none !important;
    }
    
    button.fixed {
        right: 1rem !important;
    }
}

/* Remix Icon fix */
:where([class^="ri-"])::before {
  content: "\f3c2";
}

/* Scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Smooth transitions */
* {
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}