@import "tailwindcss";

:root {
  --primary: #CC1414;
  --primary-dark: #A50E0E;
  --primary-light: #FF2929;
  --foreground: #1A1A1A;
  --muted: #6B7280;
  --border: #E5E7EB;
  --background: #FFFFFF;
  --surface: #F9FAFB;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  /* Prevent iOS Safari from silently upscaling text in landscape. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  min-height: 100dvh;
}

/*
  Stop any single wide child (tables, decor) from scrolling the whole page
  sideways on mobile. Must be on html+body, not a wrapper, to work on iOS.

  `clip`, not `hidden`: `overflow-x: hidden` forces the other axis to `auto`,
  which turns the root into a scroll container and silently kills
  `position: sticky` everywhere inside it — the site header and the dashboard
  sidebar both stopped sticking because of this one line. `clip` suppresses the
  same sideways scroll without creating a scroll container.

  The fallback sits in a negated @supports rather than as a second declaration
  on the rule below, because the CSS minifier collapses duplicated properties
  and was dropping one of the two.
*/
html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Homepage: tab panel swap + hero slide progress bar. */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none; }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.animate-marquee    { animation: marquee 30s linear infinite; }
.animate-float      { animation: float 3s ease-in-out infinite; }

.gradient-text {
  background: linear-gradient(135deg, #CC1414 0%, #FF5533 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 80px of vertical air is right on desktop but wastes most of a phone screen. */
.section-padding { padding: 44px 0; }

@media (min-width: 768px) {
  .section-padding { padding: 80px 0; }
}

/* Shared safe-area helpers for fixed/sticky chrome (chatbot FAB, tab bar,
   drawers) so nothing lands under the iOS Safari bottom toolbar. */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.mb-safe { margin-bottom: env(safe-area-inset-bottom, 0px); }
.bottom-safe { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }

.card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-hover:hover {
  box-shadow: 0 12px 40px rgba(204, 20, 20, 0.12);
  transform: translateY(-4px);
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* NOTE: no `prefers-color-scheme: dark` override here on purpose.
   The UI is a light-only design — every surface is a hardcoded `bg-white`.
   Flipping only the body vars produced a black page behind white cards on
   dark-mode phones. `color-scheme: light` above pins it. */

input,
textarea,
select {
  color: #111827;
  caret-color: #111827;
}

/* iOS Safari zooms the viewport whenever a focused field's text is under 16px,
   and never zooms back out. Tailwind's text-sm/text-xs on inputs triggers it
   constantly, so force 16px for real touch devices only — desktop keeps the
   smaller type the design calls for. */
@media (hover: none) and (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

input::placeholder,
textarea::placeholder {
  color: #9CA3AF;
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #111827;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 9999s ease-in-out 0s;
}