/*
 * 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;
  }
}

/* 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);
}