/* FIZMOH POS — Professional Enterprise SaaS Design System (Fizmoh Cloud Identity) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --fiz-bg: #FFFFFF;
  --fiz-bg-subtle: #F8FAFC;
  --fiz-bg-alt: #F1F5F9;
  --fiz-ink: #0F172A;
  --fiz-ink-soft: #334155;
  --fiz-muted: #64748B;
  --fiz-border: #E2E8F0;
  --fiz-border-dark: #CBD5E1;
  --fiz-green: #00B96A;
  --fiz-green-deep: #047857;
  --fiz-green-light: #00E785;
  --fiz-green-bg: #ECFDF5;
  --fiz-blue: #2563EB;
}

body {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ensure Crisp Responsive Logo */
.header-logo, .footer-logo, img[src*="website_ylx3b4bdpg4vq4tlngb2"], img[src*="fizmoh_footer"] {
  max-width: 175px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Editorial Serif Heading */
.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Professional Cards */
.pro-card {
  background: #FFFFFF;
  border: 1px solid var(--fiz-border);
  border-radius: 1rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}

.pro-card:hover {
  border-color: var(--fiz-border-dark);
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

/* Professional Button Styles */
.btn-primary-fiz {
  background: linear-gradient(135deg, #00B96A 0%, #047857 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.6rem !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px -2px rgba(4, 120, 87, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-primary-fiz:hover {
  background: linear-gradient(135deg, #00C873 0%, #03684B 100%) !important;
  box-shadow: 0 6px 20px -2px rgba(4, 120, 87, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

.btn-secondary-fiz {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid var(--fiz-border) !important;
  font-weight: 600 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.6rem !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.btn-secondary-fiz:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  transform: translateY(-1px) !important;
}

.btn-dark-fiz {
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.6rem !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}

.btn-dark-fiz:hover {
  background: #1E293B !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

/* Client Marquee Infinite Scroll (Matches app.fizmoh.cloud) */
@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee-container {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}

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

.marquee-track.reverse {
  animation-direction: reverse;
  animation-duration: 50s;
}

.client-logo-card {
  height: 90px;
  width: 170px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  padding: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.client-logo-card:hover {
  border-color: #00B96A;
  box-shadow: 0 6px 18px -4px rgba(0, 185, 106, 0.15);
  transform: translateY(-2px);
}

/* Feature & Badges */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
}

.pro-badge.green {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.pro-badge.blue {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

/* Simulator Styling in Professional Light / Slate Frame */
.sim-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.sim-header-bar {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 0.75rem 1.25rem;
}

.sim-nav-tab {
  padding: 0.45rem 0.9rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748B;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sim-nav-tab.active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #E2E8F0;
}

.sim-product-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 0.875rem;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sim-product-card:hover {
  border-color: #00B96A;
  background: #F0FDF4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 185, 106, 0.12);
}

/* High Contrast Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Inner Page Typography & High Contrast Styling */
.heading-text {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

.subheading-text {
  font-size: 1.125rem !important;
  color: #475569 !important;
  text-align: center !important;
  max-width: 42rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Form Controls & Inputs */
input.form-control, textarea.form-control {
  border: 1px solid #CBD5E1 !important;
  border-radius: 0.75rem !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
}

input.form-control:focus, textarea.form-control:focus {
  border-color: #00B96A !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 185, 106, 0.15) !important;
}

/* Breadcrumb Styling */
.breadcrumb-item {
  color: #64748B !important;
}
.breadcrumb-item a {
  color: #00B96A !important;
  font-weight: 600 !important;
}