@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

body, button, input, select, textarea {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html, body, #root, body > div {
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.pt-safe { padding-top: max(10px, var(--sat)); }
.pb-safe { padding-bottom: max(8px, var(--sab, 0px)) !important; }

/* FULL-BLEED EDGE-TO-EDGE BOTTOM NAV BAR (ZERO CURVES, ZERO BORDERS ON BAR & BUTTONS) */
nav.fixed.bottom-0,
nav.fixed.bottom-0 > button {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-decoration: none !important;
  background-color: #ffffff !important;
}

nav.fixed.bottom-0 .bottom-nav-avatar,
nav.fixed.bottom-0 .bottom-nav-avatar img {
  border-radius: 9px !important;
  clip-path: inset(0 round 9px) !important;
  -webkit-clip-path: inset(0 round 9px) !important;
  overflow: hidden !important;
}

nav.fixed.bottom-0 {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: max(6px, var(--sab, 0px)) !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
}

nav.fixed.bottom-0 > button {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Custom Smooth scrollbar for main scroll area */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.animate-slide-right { animation: slideRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.animate-slide-left { animation: slideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Ozvema Guest Login Button: Borderless Logo Green (#B8D819) -> Dark Green to Initial Light Green on Hover/Active */
.ozvema-guest-btn {
  background: #B8D819 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 6px 16px -4px rgba(184, 216, 25, 0.45) !important;
  transition: all 0.25s ease !important;
}

.ozvema-guest-btn:hover,
.ozvema-guest-btn:active,
.ozvema-guest-btn:focus-visible {
  background: linear-gradient(90deg, #4d7c0f 0%, #7cb518 48%, #B8D819 100%) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 8px 20px -4px rgba(77, 124, 15, 0.45) !important;
}