/* MONO STORE — shared styles that don't fit as Tailwind utility classes */

body {
  font-family: 'Noto Sans Thai', sans-serif;
}

/* ---- Storefront background and glass top bar ---- */
body[style*="background-image"] {
  background-color: var(--mono-background, #F5F0F5);
}

.mono-topbar-glass {
  background-color: rgba(245, 240, 245, 0.88) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 18px rgba(34, 19, 41, 0.08);
}

@supports (background-color: color-mix(in srgb, white 50%, transparent)) {
  .mono-topbar-glass {
    background-color: color-mix(in srgb, var(--mono-background, #F5F0F5) 86%, transparent) !important;
  }
}

/* Stronger component outlines keep uploaded storefront backgrounds subtle. */
.border-line {
  border-color: var(--mono-secondary, #221329) !important;
  border-color: color-mix(in srgb, var(--mono-line, #DBD0DE) 72%, var(--mono-secondary, #221329)) !important;
}

.text-ink {
  color: var(--mono-text, #221329);
}

.brand {
  font-family: 'Space Grotesk', sans-serif;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--mono-secondary, #221329);
}

/* ---- Home: slide banner ---- */
.slide {
  transition: opacity 700ms ease;
}

.marquee-track {
  animation: marquee 22s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ---- Bottom nav ---- */
.navbar-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-tab {
  position: relative;
  transition: color 200ms ease;
}

.nav-pill {
  position: absolute;
  inset: 2px 8px;
  border-radius: 9999px;
  background: var(--mono-primary, #7E4E98);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
  z-index: 0;
}

.nav-tab.active .nav-pill {
  transform: scale(1);
  opacity: 1;
}

.nav-tab.active .nav-label,
.nav-tab.active .nav-icon {
  color: var(--mono-background, #F5F0F5);
}

.nav-icon,
.nav-label {
  position: relative;
  z-index: 1;
}

/* ---- Auth forms (login / register) ---- */
.field {
  transition: border-color 180ms ease;
}

.field:focus-within {
  border-color: var(--mono-primary, #7E4E98);
}

input:focus {
  outline: none;
}

/* ---- Top-up: method switch ---- */
.method-btn {
  transition: background 180ms ease, color 180ms ease;
}

.method-btn.active {
  background: var(--mono-primary, #7E4E98);
  color: var(--mono-background, #F5F0F5);
}

.method-panel {
  display: none;
}

.method-panel.active {
  display: block;
}

/* ---- Top-up: dropzone ---- */
.dropzone {
  transition: border-color 180ms ease, background 180ms ease;
}

.dropzone.drag {
  border-color: var(--mono-primary, #7E4E98);
  background: var(--mono-surface, #EDE4EF);
}

/* ---- Contact: channel cards ---- */
.contact-card {
  transition: border-color 180ms ease, transform 180ms ease;
}

.contact-card:hover {
  border-color: #221329;
  transform: translateY(-2px);
}

.contact-card:hover .contact-arrow {
  transform: translateX(3px);
}

.contact-arrow {
  transition: transform 180ms ease;
}

/* ---- SweetAlert2: match the site's ink/paper button language ---- */
.swal-popup-mono {
  border-radius: 24px !important;
  font-family: 'Noto Sans Thai', sans-serif;
}

.swal-btn-confirm {
  background: #7E4E98;
  color: #F5F0F5;
  border-radius: 9999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 6px;
}

.swal-btn-cancel {
  background: transparent;
  color: #221329;
  border: 1px solid #221329;
  border-radius: 9999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 6px;
}

/* ---- Page transitions: fade-in entrance + soft leave-fade ----
   Classic multi-page navigation (not an SPA). The entrance animation is
   pure CSS — it runs automatically on every page load with no JS
   dependency, so there's no risk of a stuck/invisible page if a script
   fails to load. The leave-fade (on internal link clicks) is the only
   part driven by JS, and it only ever *adds* a dim effect on top of an
   already-visible page — safe either way. */
@keyframes monoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes monoFadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  /* Opacity-only on purpose: a `transform` here (even translateY(0) at
     rest) creates a new containing block for every position:fixed
     descendant — the bottom nav and sidebar would stop tracking the
     viewport and the mobile layout breaks. Never add transform to body. */
  animation: monoFadeIn 420ms ease both;
  transition: opacity 180ms ease;
}

body.mono-leaving {
  animation: none;
  opacity: 0.5;
  pointer-events: none;
}

/* main has no position:fixed descendants, so translateY is safe here. */
main {
  animation: monoFadeInUp 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 60ms;
}