/**
 * RoboVAI Tech - Main Stylesheet
 * 
 * This file imports all CSS modules in the correct order.
 * Import order matters: base styles first, then components, then utilities.
 */

/* ========== Core Styles ========== */
@import url('./core/variables.css');
@import url('./core/reset.css');
@import url('./core/typography.css');
@import url('./core/animations.css');

/* ========== Layout Styles ========== */
@import url('./layouts/grid.css');
@import url('./layouts/header.css');
@import url('./layouts/footer.css');

/* ========== Component Styles ========== */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/navigation.css');
@import url('./components/forms.css');
@import url('./components/shop.css');
@import url('./components/notifications.css');
@import url('./components/web3-motion.css');
/* @import url('./components/landing.css'); */

/* ========== Effects ========== */
@import url('./effects/neon.css');
@import url('./effects/glassmorphism.css');

/* ========== Preloader ========== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  transition: opacity 0.5s ease-out;
}

#preloader.hidden {
  display: none;
}

.preloader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.loader {
  border: 4px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.preloader-progress {
  height: 4px;
  width: 200px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.preloader-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary)
  );
  border-radius: var(--radius-full);
  width: 0%;
}

/* ========== Utility Classes ========== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Section Spacing */
.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-end {
  justify-content: flex-end;
}
.gap-2 {
  gap: var(--space-2);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-8 {
  gap: var(--space-8);
}

/* Grid Utilities */
.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Spacing Utilities */
.m-0 {
  margin: 0;
}
.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.my-6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mb-12 {
  margin-bottom: var(--space-12);
}
.mb-16 {
  margin-bottom: var(--space-16);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}

.p-4 {
  padding: var(--space-4);
}
.p-6 {
  padding: var(--space-6);
}
.p-8 {
  padding: var(--space-8);
}
.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.py-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.py-20 {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

/* Width & Height */
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}

/* Position */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/* Z-Index */
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: var(--z-base);
}
.z-20 {
  z-index: var(--z-sticky);
}
.z-30 {
  z-index: var(--z-fixed);
}
.z-40 {
  z-index: var(--z-modal-backdrop);
}
.z-50 {
  z-index: var(--z-modal);
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}

/* Border Radius */
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* Background Colors */
.bg-dark {
  background-color: var(--color-dark);
}
.bg-gray-900 {
  background-color: var(--color-gray-900);
}
.bg-gray-800 {
  background-color: var(--color-gray-800);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}

/* Border */
.border {
  border: 1px solid var(--color-gray-800);
}
.border-primary {
  border-color: var(--color-primary);
}
.border-gray-700 {
  border-color: var(--color-gray-700);
}

/* Responsive Visibility */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-hidden {
    display: none !important;
  } /* Added this */
}

/* ========== Responsive Tweaks ========== */
@media (max-width: 1024px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }
  h2,
  .h2 {
    font-size: clamp(1.5rem, 4.2vw, 2rem);
  }
  h3,
  .h3 {
    font-size: clamp(1.25rem, 3.8vw, 1.6rem);
  }

  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .btn {
    padding: var(--space-2) var(--space-4);
  }

  .btn-lg {
    padding: var(--space-3) var(--space-6);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

/* ====================================================
   🎯 ROBOVAI — COMPREHENSIVE RESPONSIVE CSS
   Covers: index, about, services, products, shop,
           contact, product_detail, base (nav/footer)
   ==================================================== */

/* ── GLOBAL ──────────────────────────────────────── */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* All images never exceed their container */
img {
  max-width: 100%;
  height: auto;
}

/* ── TYPOGRAPHY SCALE ────────────────────────────── */
@media (max-width: 640px) {
  /* Tailwind overrides for giant headings */
  .text-7xl,
  .text-8xl {
    font-size: clamp(2.5rem, 9vw, 4rem) !important;
  }
  .text-6xl {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
  }
  .text-5xl {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
  .text-\[5\.5rem\] {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
  }
  .text-\[5rem\] {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
  .leading-tight {
    line-height: 1.2 !important;
  }
  .leading-none {
    line-height: 1.1 !important;
  }
}

/* ── NAVIGATION / HEADER ─────────────────────────── */
@media (max-width: 640px) {
  #main-header .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Shrink logo text on very small screens */
  #main-header .font-display {
    font-size: 1.1rem !important;
  }
}

/* ── HERO SECTION ────────────────────────────────── */
@media (max-width: 768px) {
  #hero {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }
  /* Stats row wraps nicely */
  #hero .flex-wrap.items-center {
    gap: 1rem !important;
  }
  #hero .flex-wrap.items-center > div {
    min-width: 45%;
  }
  /* Terminal card full width */
  #hero .lg\\:col-span-5 {
    perspective: none;
  }
  #hero .card-3d {
    transform: none !important;
  }
  /* Floating cards hidden on mobile to avoid overflow */
  #hero .gsap-float-1,
  #hero .gsap-float-2 {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: 6rem;
  }
  #hero .flex-wrap.items-center > div {
    min-width: 100%;
  }
}

/* ── SERVICES CARDS GRID ─────────────────────────── */
@media (max-width: 640px) {
  /* 2x2 grid becomes 1 column */
  .grid.sm\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── PRODUCTS SECTION ────────────────────────────── */
@media (max-width: 768px) {
  /* Section header: stack vertically */
  #products .flex-col.md\\:flex-row,
  section#products .flex {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── MARQUEE / TICKER ────────────────────────────── */
@media (max-width: 480px) {
  .marquee-row-1,
  .marquee-row-2 {
    gap: 1.5rem !important;
  }
}

/* ── ABOUT PAGE ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Story grid stacks */
  .lg\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  /* Stats grid becomes 2 cols */
  .gsap-about-stats .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Video keeps aspect ratio */
  .gsap-about-content video {
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
  }
}

/* ── SERVICES PAGE ───────────────────────────────── */
@media (max-width: 768px) {
  /* Service cards grid: always 1 col on mobile */
  .md\\:grid-cols-2.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  /* Process steps: stack */
  .flex.gap-8.items-start {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ── CONTACT PAGE ────────────────────────────────── */
@media (max-width: 768px) {
  /* 2-col name/phone row becomes 1 col */
  .grid-cols-2:has(input) {
    grid-template-columns: 1fr !important;
  }
  /* Contact info + form: stack */
  .gsap-contact-info,
  .gsap-contact-form {
    width: 100% !important;
  }
  /* Large heading */
  .gsap-contact-form h1 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
}

/* ── SHOP PAGE ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Filter bar wraps */
  .gsap-sh-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .gsap-sh-toolbar select,
  .gsap-sh-toolbar input {
    width: 100%;
  }
}

/* ── PRODUCT DETAIL PAGE ─────────────────────────── */
@media (max-width: 768px) {
  /* Image + info: stack */
  .gsap-pd-elem .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── ROBOVAI SHOWCASE SECTION (base.html) ─────────── */
@media (max-width: 768px) {
  #nova-cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  #nova-cta h2 {
    font-size: clamp(1.8rem, 7vw, 3rem) !important;
  }
  /* Buttons stack */
  #nova-cta .flex.sm\\:flex-row {
    flex-direction: column !important;
  }
  /* Features strip scrolls horizontally */
  #nova-cta .flex-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  #nova-cta .flex-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── FOOTER ──────────────────────────────────────── */
@media (max-width: 768px) {
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  footer .border-t.pt-6 {
    flex-direction: column !important;
    text-align: center;
    gap: 1rem;
  }
  /* Copyright row center */
  footer .border-t .flex {
    justify-content: center !important;
  }
}

/* ── GENERAL PADDING REDUCTION MOBILE ───────────── */
@media (max-width: 640px) {
  .py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .gap-12 {
    gap: 2rem !important;
  }
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  .mb-14 {
    margin-bottom: 1.5rem !important;
  }
  /* Section badge labels — prevent overflow */
  .tracking-widest {
    letter-spacing: 0.1em !important;
  }
}

/* ── CARDS — MIN WIDTH PREVENTION ───────────────── */
@media (max-width: 480px) {
  /* Prevent any card from being too wide */
  .rounded-2xl,
  .rounded-xl {
    border-radius: 0.75rem !important;
  }
  /* Product cards full width */
  .xl\\:grid-cols-4,
  .lg\\:grid-cols-3,
  .md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── RTL RESPONSIVE FIXES ────────────────────────── */
@media (max-width: 640px) {
  [dir='rtl'] .ltr\\:left-6 {
    left: auto !important;
    right: 1rem !important;
  }
  [dir='rtl'] .rtl\\:right-6 {
    right: 1rem !important;
  }
}