/* ============================================================
   Lynkova — Main CSS Aggregator (main.css)
   Imports all modular CSS files in dependency order.
   This file is loaded by ALL layouts (main.php, auth.php).
   DO NOT add styles here — add to the correct module file.
   ============================================================ */

/* 1. Design Tokens — must be first */
@import url('variables.css');

/* 2. Base Reset, Fonts, Body */
@import url('base.css');

/* 3. Typography System */
@import url('typography.css');

/* 4. Animation Keyframes + Reveal Utilities */
@import url('animations.css');

/* 5. Component Library */
@import url('components.css');

/* 6. Layout: Nav, Sidebar, Footer, Grid */
@import url('layout.css');

/* 7. Homepage + New Page Sections */
@import url('pages.css');

/* 8. Responsive Breakpoints */
@import url('responsive.css');

/* 9. Utility Helpers */
@import url('utilities.css');

/* 10. Auth-specific (if loaded separately — kept for compat) */
/* Note: auth.css is also directly linked in auth.php, which is fine */

/* ============================================================
   LEGACY COMPATIBILITY PATCHES
   These styles keep old PHP-rendered output working with
   the new design token system.
   ============================================================ */

/* Old font stack references (some views may use Outfit/Poppins) */
.font-outfit  { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.font-poppins { font-family: 'Inter', sans-serif; }

/* Old toast animation name (used in app.js) */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Old hero section min-height approach */
.hero-section { min-height: 100vh; }

/* Old loading class for images */
img.loading { opacity: 0; transition: opacity 0.3s ease; }

/* Container is always safe */
.container { width: 100%; }

/* Old sidebar-nav alignment */
.sidebar-nav-item i,
.sidebar-nav-item svg {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Old-style error pages */
.error-page  { text-align: center; padding: 120px 24px; }
.error-code  { font-size: 8rem; font-weight: 900; opacity: 0.08; line-height: 1; }
.error-title { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.error-desc  { color: var(--text-secondary); margin-bottom: 32px; }

/* Minimal layout (error pages) */
.minimal-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 24px;
  text-align: center;
}

/* ============================================================
   HOMEPAGE SECTION SELECTORS (index.php uses these IDs)
   ============================================================ */
section.features,
section.pricing,
section.testimonials,
section.faq {
  padding: 100px 0;
  position: relative;
}

/* ============================================================
   OLD ANIMATION CLASSES (index.php uses anim-*)
   ============================================================ */
.anim-fade {
  opacity: 0;
  animation: fadeIn 0.7s var(--ease-out) 0.1s forwards;
}
.anim-slide {
  opacity: 0;
  animation: slideUp 0.6s var(--ease-out) 0.1s forwards;
}
.anim-float {
  animation: float 6s ease-in-out infinite;
}
.anim-delay-1 { animation-delay: 0.15s !important; }
.anim-delay-2 { animation-delay: 0.30s !important; }
.anim-delay-3 { animation-delay: 0.45s !important; }
.anim-delay-4 { animation-delay: 0.60s !important; }
.anim-delay-5 { animation-delay: 0.75s !important; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(1deg); }
}

/* ============================================================
   HERO BADGE DOT (old hero-badge had inline dot)
   ============================================================ */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-bright);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

/* ============================================================
   3D FLOATING TAGS (index.php mockup section)
   ============================================================ */
.floating-3d-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(20,20,26,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.tag-analytics { top: 18%; right: -10%; left: auto; }
.tag-verified  { bottom: 28%; left: -12%; right: auto; }
.tag-qr        { bottom: 12%; right: -8%; left: auto; }
.tag-icon      { font-size: 1rem; }

/* Glowing back orb behind mockup */
.mockup-glowing-back {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  filter: blur(30px);
}

/* Avatar glow on mockup */
.avatar-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--accent), var(--pink), var(--accent));
  z-index: -1;
  animation: spin 4s linear infinite;
  opacity: 0.6;
}

/* ============================================================
   PRICING CARD — OLD CLASS NAMES (index.php)
   ============================================================ */
.pricing-badge,
.pricing-featured-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--pink));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  letter-spacing: 0.05em;
}

.pricing-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.pricing-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* ============================================================
   FAQ DIV-BASED QUESTION (index.php uses div not button)
   ============================================================ */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--duration-fast);
}
.faq-question:hover { background: var(--bg-glass); }

/* ============================================================
   TOGGLE SWITCH (pricing cycle)
   ============================================================ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  transition: background var(--duration-base);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-spring), background var(--duration-base);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
}
.pricing-toggle {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  width: fit-content;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pricing-toggle-label { font-size: 0.9375rem; color: var(--text-secondary); font-weight: 500; }
.discount-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(16,185,129,0.15);
  color: var(--green);
  border-radius: var(--r-pill);
}

/* ============================================================
   TESTIMONIAL STARS (old Icon::render('star') icons)
   ============================================================ */
.testimonial-stars svg,
.testimonial-stars i {
  color: var(--amber);
  width: 16px; height: 16px;
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--pink));
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ============================================================
   FORM CHECK (contact page)
   ============================================================ */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
}

/* ============================================================
   ICON COLOR HELPERS (feature-card icon variants)
   ============================================================ */
.feature-icon.purple  { background: var(--accent-subtle); color: var(--accent); }
.feature-icon.teal    { background: rgba(6,182,212,0.12); color: var(--teal); }
.feature-icon.green   { background: rgba(16,185,129,0.12); color: var(--green); }
.feature-icon.pink    { background: rgba(236,72,153,0.12); color: var(--pink); }
.feature-icon.amber   { background: rgba(245,158,11,0.12); color: var(--amber); }

/* Feature card check/cross icons */
.pricing-features .check { color: var(--green); }
.pricing-features .cross { color: var(--text-muted); }