/* ===================================================================
   RUNTO GLOBAL B2B COMMODITY WHOLESALE PLATFORM - CUSTOM STYLES
   =================================================================== */

/* Clean Corporate Grid Pattern Background */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Custom Scrollbar for Sleek Corporate Look */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth Focus Outlines */
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

/* Product Card Micro-Interactions */
.product-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.strength-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.strength-card:hover {
  transform: translateY(-3px);
}

/* Badge Pulse Animation */
@keyframes softPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.08);
  }
}

.animate-soft-pulse {
  animation: softPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Modal Open Transitions */
.modal-active {
  overflow: hidden;
}

/* Input error state helper */
.input-error {
  border-color: #f43f5e !important;
  background-color: #fff1f2 !important;
}

/* Responsive tables & specs */
.spec-table th {
  background-color: #f8fafc;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #475569;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.spec-table td {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}

/* ===================================================================
   LAYOUT STABILIZATION & ZERO-SHIFT I18N RULES
   =================================================================== */

/* Prevent line-height jitter between Latin and CJK character sets */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ensure buttons maintain stable vertical and horizontal baselines */
button, a.btn, select, input {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Lock header height and avoid reflow jitter */
header {
  transform: translateZ(0);
}

/* ===================================================================
   HERO AUTO-SCROLLING LIVE ALLOCATION DASHBOARD
   =================================================================== */
@keyframes tickerVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.ticker-track {
  animation: tickerVertical 36s linear infinite;
  will-change: transform;
}

.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-mask {
  mask-image: linear-gradient(to bottom, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
}

/* ===================================================================
   HORIZONTAL INVENTORY CAROUSEL & STICKY FILTER BAR
   =================================================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.inventory-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1.5rem 0.25rem;
}

.inventory-carousel::-webkit-scrollbar {
  height: 6px;
}

.inventory-carousel::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 9999px;
}

.inventory-carousel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.inventory-carousel::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

.inventory-carousel .inventory-item {
  scroll-snap-align: start;
  flex: 0 0 88vw;
  max-width: 400px;
}

@media (min-width: 640px) {
  .inventory-carousel .inventory-item {
    flex: 0 0 500px;
    max-width: 520px;
  }
}

@media (min-width: 1024px) {
  .inventory-carousel .inventory-item {
    flex: 0 0 520px;
    max-width: 540px;
  }
}

@media (min-width: 1280px) {
  .inventory-carousel .inventory-item {
    flex: 0 0 540px;
    max-width: 560px;
  }
}

/* Floating Carousel Navigation Buttons */
.carousel-nav-btn {
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.22), 0 6px 12px -3px rgba(15, 23, 42, 0.12);
  user-select: none;
}

.carousel-nav-btn:hover {
  box-shadow: 0 20px 35px -5px rgba(37, 99, 235, 0.35), 0 8px 16px -3px rgba(15, 23, 42, 0.15);
}

/* Zero-Jitter Single-Line Category Tab Buttons */
/* Zero-Jitter Single-Line Category Tab Buttons */
.inv-filter-btn {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  user-select: none;
  min-width: 7.75rem !important;
  text-align: center;
}

/* ===================================================================
   I18N LANGUAGE SWITCHING ZERO-SHIFT STABILIZATION
   =================================================================== */

/* 1. Header Navigation & CTA Dimension Locking */
.header-rfq-btn {
  min-width: 6.75rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-contact-btn {
  min-width: 9.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1280px) {
  .header-contact-btn {
    min-width: 12rem;
  }
}

/* 2. Hero Dossier Live Ticker 3-Stat Boxes (User Screenshot Component) */
.dossier-stat-box {
  height: 4.5rem !important; /* 72px invariant */
  min-height: 4.5rem !important;
  max-height: 4.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.dossier-stat-lbl {
  height: 1.5rem !important; /* 24px invariant for 1 or 2 lines */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* 3. Four Metric Feature Cards */
.metric-feature-card {
  min-height: 12.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.metric-feature-lbl {
  min-height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
}

.metric-feature-sub {
  min-height: 2.25rem !important;
  display: flex !important;
  align-items: center !important;
}

/* 4. Product Cards Dimension Invariance Across Languages */
.product-card h3 {
  min-height: 3.25rem; /* 52px */
  display: flex;
  align-items: center;
}

.product-card .line-clamp-2 {
  min-height: 2.125rem; /* 34px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product Card 4-Stat Logistics Row */
.product-card .grid-cols-2.sm\:grid-cols-4 > div {
  height: 3.75rem; /* 60px invariant */
  min-height: 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Product Card Action Buttons */
.product-card .border-t.flex-col.sm\:flex-row button:first-child {
  height: 2.75rem; /* 44px */
}

.product-card .border-t.flex-col.sm\:flex-row button:last-child {
  height: 2.75rem; /* 44px */
  min-width: 11.25rem; /* 180px invariant */
}