body {
            font-family: 'Roboto Flex', 'Arial', sans-serif;
            background-image: url('../img/bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* Selaraskan tampilan intl-tel-input dengan style Tailwind form */
        .iti {
            width: 100%;
        }

        #noPhone {
            width: 100%;
            padding: 0.5rem 0.75rem 0.5rem 0.5rem;
            background: transparent;
            border: 1px solid #d1d5db;
            border-radius: 9999px;
            outline: none;
        }

        #noPhone:focus {
            border-color: #15803d;
            /* box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.3); */
        }

        #noPhone.input-error {
            border-color: #dc2626;
        }

        #noPhone.input-error:focus {
            border-color: #dc2626;
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
        }

        .connect-button {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .connect-button::before {
            position: absolute;
            top: 0;
            left: -125%;
            width: 75%;
            height: 100%;
            content: '';
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-20deg);
            transition: left 0.6s ease;
        }

        .connect-button:hover {
            /* background-color: #052e16;
            box-shadow: 0 10px 20px rgba(5, 46, 22, 0.3); */
            transform: translateY(-3px);
        }

        .connect-button:hover::before {
            left: 150%;
        }

        .connect-button:active {
            box-shadow: 0 4px 8px rgba(5, 46, 22, 0.25);
            transform: translateY(0) scale(0.97);
        }

        .submit-loader {
            display: none;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: submit-loader-spin 0.8s linear infinite;
        }

        .connect-button.is-loading {
            cursor: wait;
            transform: none;
        }

        .connect-button.is-loading::before {
            display: none;
        }

        .connect-button.is-loading .button-text {
            display: none;
        }

        .connect-button.is-loading .submit-loader {
            display: inline-block;
        }

        @keyframes submit-loader-spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .connect-button,
            .connect-button::before {
                transition: none;
            }

            .submit-loader {
                animation-duration: 1.6s;
            }
        }




.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* background: rgba(255, 255, 255, 0.82); */
  /* backdrop-filter: blur(6px); */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.loader-overlay.is-hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.loader {
  --color-1: #038495;
  --color-2: #ff3d00;
  --size: 1px;

  transform: rotateZ(45deg);
  perspective: calc(1000 * var(--size));
  border-radius: 50%;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  color: var(--color-1);
}

.loader::before,
.loader::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1.6s spin linear infinite;
}

.loader::after {
  color: var(--color-2);
  transform: rotateY(70deg);
  animation-delay: -0.8s;
}

.loader-text {
  color: #14532d;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin {
  0%,
  100% {
    box-shadow: 0.2em 0 0 0 currentcolor;
  }

  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }

  25% {
    box-shadow: 0 0.2em 0 0 currentcolor;
  }

  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }

  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }

  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }

  75% {
    box-shadow: 0 -0.2em 0 0 currentcolor;
  }

  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-overlay {
    transition: none;
  }

  .loader::before,
  .loader::after {
    animation-duration: 2.4s;
  }
}

.bottom-navigation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: min(100%, 28rem);
  margin-inline: auto;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(13, 84, 43, 0.16);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
}

.nav-bar-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 4rem;
}

.nav-form {
  display: contents;
}

.nav-item {
  display: flex;
  min-width: 0;
  min-height: 4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  color: #64748b;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-item ion-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.nav-item:hover,
.nav-item:focus-visible,
.nav-item.is-active {
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.nav-item:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .bottom-navigation {
    bottom: 1rem;
    overflow: hidden;
    border: 1px solid rgba(13, 84, 43, 0.16);
    border-radius: 1rem;
  }
}