/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom font faces - Jomhuria for headings, Figtree for body */
@font-face {
  font-family: 'Jomhuria';
  src: url("/assets/Jomhuria-Regular-56cc73bc.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url("/assets/Figtree-VariableFont_wght-89352678.ttf") format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Base typography styles */
html, body {
  font-family: 'Figtree', system-ui, sans-serif;
}

/* Headings use Jomhuria with larger sizes */
h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'Jomhuria', system-ui, sans-serif !important;
  font-weight: 400;
  line-height: 0.85;
}

/* Card titles — single source of truth for product / showcase card names.
   Defeats the h3 element defaults (36px, line-height 0.85, uppercase) and
   Jomhuria's display sizing. Sized like normal e-commerce card titles. */
.font-card-title,
h1.font-card-title,
h2.font-card-title,
h3.font-card-title,
h4.font-card-title,
h5.font-card-title,
h6.font-card-title {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;       /* 14px */
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

@media (min-width: 768px) {
  .font-card-title,
  h1.font-card-title,
  h2.font-card-title,
  h3.font-card-title,
  h4.font-card-title,
  h5.font-card-title,
  h6.font-card-title {
    font-size: 0.9375rem !important;    /* 15px */
  }
}

/* h1, h2, h3 are uppercase */
h1, h2, h3 {
  text-transform: uppercase !important;
}

/* Larger heading sizes for Jomhuria display font */
h1 { font-size: 4rem; }      /* 64px */
h2 { font-size: 3rem; }      /* 48px */
h3 { font-size: 2.25rem; }   /* 36px */
h4 { font-size: 1.875rem; }  /* 30px */
h5 { font-size: 1.5rem; }    /* 24px */
h6 { font-size: 1.25rem; }   /* 20px */

@media (min-width: 640px) {
  h1 { font-size: 5rem; }    /* 80px */
  h2 { font-size: 3.5rem; }  /* 56px */
  h3 { font-size: 2.5rem; }  /* 40px */
}

@media (min-width: 1024px) {
  h1 { font-size: 6rem; }    /* 96px */
  h2 { font-size: 4rem; }    /* 64px */
  h3 { font-size: 3rem; }    /* 48px */
}

/* Mobile-specific enhancements */

/* Safe area insets for notched devices (iPhone X+, etc.) */
@supports (padding: max(0px)) {
  .safe-area-inset-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 0rem);
  }

  .safe-area-inset-top {
    padding-top: max(env(safe-area-inset-top), 0rem);
  }

  .safe-area-inset-left {
    padding-left: max(env(safe-area-inset-left), 0rem);
  }

  .safe-area-inset-right {
    padding-right: max(env(safe-area-inset-right), 0rem);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Improve touch interactions on mobile */
@media (hover: none) and (pointer: coarse) {
  /* Remove tap highlight color */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Increase touch target sizes */
  button,
  a,
  input,
  select,
  textarea,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improve scrolling performance */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevent text selection on interactive elements */
button,
[role="button"],
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Optimize animations for mobile */
@media (prefers-reduced-motion: no-preference) {
  .smooth-transform {
    will-change: transform;
  }
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage hero — slow Ken Burns drift.
   Subtle cinematic motion on the static fallback hero. The image starts
   slightly overscanned (scale 1.06) so panning never exposes an edge, and
   eases in and back out via `alternate` so the loop never hard-cuts. */
@keyframes hero-ken-burns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-2%, -1.5%, 0); }
}

.hero-ken-burns {
  transform: scale(1.06);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hero-ken-burns 26s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ken-burns {
    animation: none;
    transform: none;
  }
}

/* Brand illustrations — ambient float for decorative art (e.g. the /meista
   salmon school). Small amplitude, long duration: reads as organic drift,
   not UI motion. */
@keyframes illustration-float {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-8px) rotate(-1.5deg); }
}

.illustration-float {
  animation: illustration-float 7s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .illustration-float {
    animation: none;
  }
}

/* Hero illustration choreography — a one-shot entrance on a wrapper element
   plus an infinite ambient drift on the img itself. One transform per element:
   nesting keeps the two animations from overwriting each other.
   Per-layer variety comes from CSS custom properties on the img
   (--drift-base rotation, --drift-duration, negative --drift-delay to
   desync layers) so a single keyframe serves every illustration. */
@keyframes hero-art-enter {
  from { opacity: 0; transform: translateY(40px) scale(0.93); }
  to   { opacity: 1; transform: translateY(0) scale(var(--enter-scale, 1)); }
}

.hero-art-enter {
  animation: hero-art-enter 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-art-enter-delayed {
  animation: hero-art-enter 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

@keyframes illustration-drift {
  from {
    transform: translateY(0) rotate(var(--drift-base, 0deg));
  }
  to {
    transform: translateY(var(--drift-rise, -18px))
      rotate(calc(var(--drift-base, 0deg) + var(--drift-swing, 2.5deg)));
  }
}

.illustration-drift {
  animation: illustration-drift var(--drift-duration, 12s) ease-in-out
    var(--drift-delay, 0s) infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-enter,
  .hero-art-enter-delayed,
  .illustration-drift {
    animation: none;
  }
}

/* ── Gutter illustrations (.kuvitus-rail / .kuvitus-art) ─────────────────────
   Art in the whitespace beside the content column, never over it. A rail's
   positioned parent is a content-width box; the rail hangs off its side and is
   exactly as wide as the gap left over to the viewport edge:

     width = 50vw − half the content width − inner gutter − outer margin

   so art at `width: 100%` physically cannot reach the content column. Rails
   only render from xl up, where that gap is wide enough to hold an
   illustration. This replaced fixed `top-[Nrem]` overlays, which drifted
   behind cards as rows changed length.

   Motion is scroll-driven and CSS-only: one transform per element (same rule
   as the hero art) — the rail parallaxes across the whole pass, the art fades
   and settles as it enters. @supports keeps browsers without scroll-driven
   animations (Firefox) on the static art. */
.kuvitus-rail {
  position: absolute;
  width: calc(50vw - 50% - 3.5rem);
  display: none;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}

/* Below 1400px the gutter is too narrow to hold an illustration at a size
   worth showing — the page runs without art rather than with slivers. */
@media (min-width: 1400px) {
  .kuvitus-rail { display: flex; }
}

.kuvitus-rail--left {
  right: calc(100% + 2.5rem);
}

.kuvitus-rail--right {
  left: calc(100% + 2.5rem);
}

.kuvitus-art {
  width: 100%;
  height: auto;
  opacity: var(--kuvitus-opacity, 0.95);
  transform: rotate(var(--kuvitus-rot, 0deg));
}

@keyframes kuvitus-parallax {
  from { transform: translateY(var(--kuvitus-depth, 40px)); }
  to   { transform: translateY(calc(var(--kuvitus-depth, 40px) * -1)); }
}

@keyframes kuvitus-enter {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(0.9)
      rotate(calc(var(--kuvitus-rot, 0deg) * 1.8));
  }
  to {
    opacity: var(--kuvitus-opacity, 0.95);
    transform: translateY(0) scale(1) rotate(var(--kuvitus-rot, 0deg));
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kuvitus-rail {
      animation: kuvitus-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    .kuvitus-art {
      animation: kuvitus-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
      will-change: transform, opacity;
    }
  }
}

/* Pull-to-refresh prevention (if needed) */
body {
  overscroll-behavior-y: contain;
}

/* Hide scrollbar on mobile for cleaner look (optional) */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #3E5536; /* moss-green-600 */
  outline-offset: 2px;
}

/* Mobile menu slide animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(240, 240, 240, 0) 0%,
    rgba(240, 240, 240, 0.8) 50%,
    rgba(240, 240, 240, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Hide scrollbar utility class */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.hero-block-background {
  position: relative;
  isolation: isolate;
  background-color: #26412f;
  background-image:
    radial-gradient(circle at 65% 5%, rgba(255, 239, 210, 0.55), transparent 42%),
    linear-gradient(120deg, rgba(19, 41, 28, 0.4), rgba(53, 87, 57, 0.35) 45%, rgba(19, 41, 28, 0.4)),
    url("/assets/hero-block-background-89c2ea02.svg");
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

.hero-block-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 75% 12%, rgba(255, 226, 185, 0.75), transparent 55%),
    linear-gradient(185deg, rgba(18, 34, 24, 0.25), rgba(18, 34, 24, 0.55));
  pointer-events: none;
}

.hero-block-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(8, 15, 11, 0.35), transparent 38%, transparent 62%, rgba(12, 22, 16, 0.3)),
    linear-gradient(0deg, rgba(8, 14, 11, 0.2), transparent 60%);
  mix-blend-mode: normal;
  pointer-events: none;
}

.hero-block-background > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-block-background {
    background-position: center 60%;
    background-image:
      radial-gradient(circle at 70% 0%, rgba(255, 228, 189, 0.65), transparent 60%),
      linear-gradient(170deg, rgba(16, 32, 23, 0.5), rgba(47, 83, 55, 0.45)),
      url("/assets/hero-block-background-89c2ea02.svg");
    background-size: 180% auto, cover;
  }
}

/* Real-time order status update animation */
@keyframes statusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(62, 85, 54, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(62, 85, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(62, 85, 54, 0);
  }
}

.order-status-updated {
  animation: statusPulse 1s ease-out;
}

/* Toast notification styles */
.new-order-toast {
  animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Feature showcase tooltip animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

/* Live inventory update animations */
@keyframes inventoryPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 148, 74, 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(212, 148, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 148, 74, 0);
  }
}

.inventory-updated {
  animation: inventoryPulse 1s ease-out;
}

@keyframes pricePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 90, 60, 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(139, 90, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 90, 60, 0);
  }
}

.price-updated {
  animation: pricePulse 1s ease-out;
}

/* Real-time item list animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.animate-slide-in {
  animation: slideIn 0.4s ease-out forwards;
}

.animate-slide-out {
  animation: slideOut 0.3s ease-out forwards;
}

/* Real-time update highlight */
.realtime-updated {
  animation: realtimeHighlight 1s ease-out;
}

@keyframes realtimeHighlight {
  0% {
    background-color: rgba(212, 148, 74, 0.3);
  }
  100% {
    background-color: transparent;
  }
}

/* New item badge animation */
@keyframes newItemBadge {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.new-item-badge {
  animation: newItemBadge 0.4s ease-out forwards;
}

/* Demo dashboard animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.4s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.4s ease-out forwards;
}

/* Hero background color */
.bg-hero-dark {
  background-color: #31332f !important;
}

.text-hero-dark {
  color: #31332f !important;
}

/* Admin Trix Editor Styles */
.admin-trix-editor trix-editor {
  min-height: 300px;
  border: 1px solid #d1d5db;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1rem;
}

.admin-trix-editor trix-toolbar {
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f9fafb;
  padding: 0.5rem;
}

/* ===== Chat WhatsApp-Style Styles ===== */

/* Chat wallpaper - subtle dot pattern on moss-green-50 */
.chat-wallpaper {
  background-color: #f0f5f1;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1.2' fill='%2344754b' fill-opacity='0.04'/%3E%3Ccircle cx='13' cy='13' r='1.2' fill='%2344754b' fill-opacity='0.04'/%3E%3C/svg%3E");
}

/* Message bubble tail - own message (right, green) */
.bubble-tail-right {
  position: relative;
}
.bubble-tail-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid #44754b;
  border-bottom: 6px solid transparent;
}

/* Message bubble tail - their message (left, white) */
.bubble-tail-left {
  position: relative;
}
.bubble-tail-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border-right: 6px solid white;
  border-bottom: 6px solid transparent;
}

/* Typing indicator bouncing dots */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

.typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #9ca3af;
  animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Message slide-in animation */
@keyframes messageAppear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-appear {
  animation: messageAppear 0.15s ease-out;
}

/* Active conversation in sidebar */
.conversation-active {
  background-color: #f0f5f1 !important;
  border-right: 3px solid #44754b;
}

/* Chat textarea auto-grow limit */
.chat-textarea {
  max-height: 120px;
  overflow-y: auto;
}

/* Noutopiste map marker */
.noutopiste-marker {
  background: transparent !important;
  border: none !important;
}

.noutopiste-upcoming-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  background: #bf763b;
  color: white;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}