/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Typography */
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

h1, h2, h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
}

button, input[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* Native-feel mobile: suppress tap highlight, smooth scrolling */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-overflow-scrolling: touch;
}

/* Safe area padding for notched phones */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

/* Hide scrollbar for horizontal scroll containers */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Bouncing dots for loading status */
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}
.bounce-dot { animation: bounce-dot 1.2s ease-in-out infinite; }
.bounce-dot:nth-child(2) { animation-delay: 150ms; }
.bounce-dot:nth-child(3) { animation-delay: 300ms; }

/* Crossfade for loading text */
[data-loading-text] {
  transition: opacity 0.3s ease;
}
[data-loading-text].fade-out {
  opacity: 0;
}

/* View Transitions — native-feel page animations */
@view-transition {
  navigation: auto;
}

/* Only animate main content, not the whole page */
main {
  view-transition-name: main-content;
}

::view-transition-old(main-content) {
  animation: 150ms ease-out both vt-fade-out;
}

::view-transition-new(main-content) {
  animation: 150ms ease-in 50ms both vt-fade-in;
}

/* Disable default root animation so nav doesn't flicker */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Tabular nums for all prices/totals */
.tabular-nums, [class*="font-bold"], [class*="font-semibold"] {
  font-variant-numeric: tabular-nums;
}

/* Touch feedback — subtle press effect on interactive elements */
button, a, [role="button"], input[type="submit"] {
  transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
button:active, a:active, [role="button"]:active, input[type="submit"]:active {
  transform: scale(0.97);
}

/* Prevent text zoom on input focus in iOS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  font-size: 16px;
}