/* ============================================
   REELZOX DESIGN SYSTEM
   Version: 1.0.0
   
   A comprehensive CSS design system that extends
   Tailwind CSS with custom ReelZox brand utilities,
   animations, glassmorphism effects, and component
   styles for a premium SaaS-level UI.
   
   Table of Contents:
   ------------------
   1.  CSS Custom Properties
   2.  Base / Reset Styles
   3.  Custom Scrollbar
   4.  Selection Styling
   5.  Glassmorphism Utilities
   6.  Animation Keyframes
   7.  Animation Utility Classes
   8.  Staggered Delay Classes
   9.  Gradient Utilities
   10. Button Styles
   11. Input / Form Styles
   12. Card Styles
   13. Platform Color Classes
   14. Navigation Styles
   15. Footer Styles
   16. Cookie Consent Banner
   17. Loading States
   18. Toast Notifications
   19. FAQ Accordion
   20. Breadcrumbs
   21. Back to Top Button
   22. Print Styles
   23. Responsive Fine-Tuning
   ============================================ */


/* ============================================
   1. CSS CUSTOM PROPERTIES
   Centralised design tokens for consistent
   theming across the entire application.
   ============================================ */

:root {
  /* ---- Primary Brand ---- */
  --rz-primary: #5B3FE8;
  --rz-primary-light: #7B5FFF;
  --rz-primary-dark: #4A32C4;

  /* ---- Accent / Teal ---- */
  --rz-accent: #00D4A0;
  --rz-accent-light: #33E0B5;
  --rz-accent-dark: #00A87D;

  /* ---- Dark / Navy ---- */
  --rz-navy: #1A1A2E;
  --rz-navy-light: #2A2A42;

  /* ---- Light Backgrounds ---- */
  --rz-lavender: #F6F5FF;
  --rz-surface: #F8F8FE;

  /* ---- Typography ---- */
  --rz-text: #2D2D3A;
  --rz-text-muted: #6B7280;
  --rz-text-light: #9CA3AF;

  /* ---- Semantic Colors ---- */
  --rz-error: #FF5E5E;
  --rz-success: #00D4A0;
  --rz-warning: #F59E0B;

  /* ---- Borders ---- */
  --rz-border: #E5E7EB;
  --rz-border-light: #F3F4F6;

  /* ---- Shadows ---- */
  --rz-shadow: 0 4px 6px -1px rgba(91, 63, 232, 0.1),
               0 2px 4px -1px rgba(91, 63, 232, 0.06);
  --rz-shadow-lg: 0 20px 25px -5px rgba(91, 63, 232, 0.1),
                  0 10px 10px -5px rgba(91, 63, 232, 0.04);

  /* ---- Radii ---- */
  --rz-radius: 12px;
  --rz-radius-lg: 16px;
  --rz-radius-full: 9999px;

  /* ---- Transitions ---- */
  --rz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   2. BASE / RESET STYLES
   Global defaults applied to every element.
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  background-color: var(--rz-surface);
  color: var(--rz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Remove default focus outlines – replaced by custom ring below */
:focus {
  outline: none;
}

/* Accessible focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--rz-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure images are responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links inherit colour unless overridden */
a {
  color: inherit;
  text-decoration: none;
  transition: var(--rz-transition);
}


/* ============================================
   3. CUSTOM SCROLLBAR
   Thin purple-tinted scrollbar for modern
   browsers (Chromium, Firefox).
   ============================================ */

/* ----- Chromium / WebKit ----- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(91, 63, 232, 0.25);
  border-radius: var(--rz-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 63, 232, 0.45);
}

/* ----- Firefox ----- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 63, 232, 0.25) transparent;
}


/* ============================================
   4. SELECTION STYLING
   Purple highlight when user selects text.
   ============================================ */

::selection {
  background-color: var(--rz-primary);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--rz-primary);
  color: #ffffff;
}


/* ============================================
   5. GLASSMORPHISM UTILITIES
   Frosted-glass effects for panels, cards,
   and overlays.
   ============================================ */

/* Standard light glass */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark glass – used for mobile menu, overlays */
.glass-dark {
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass card – rounded, shadowed version */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow);
}


/* ============================================
   6. ANIMATION KEYFRAMES
   Reusable @keyframes for page transitions,
   loading states, and micro-interactions.
   ============================================ */

/* Fade in from transparent */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade in while sliding up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in while sliding down */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide in from the left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from the right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Gentle pulsing opacity */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Floating / levitation effect */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Skeleton shimmer sweep */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Continuous rotation – spinners */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scale in from slightly smaller */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Shifting gradient background */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Slide-up for cookie banner / bottom sheets */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-down – for dropdown menus */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================
   7. ANIMATION UTILITY CLASSES
   Apply an animation via a single class.
   All use animation-fill-mode: both so they
   retain their final state.
   ============================================ */

.animate-fadeIn       { animation: fadeIn 0.5s ease both; }
.animate-fadeInUp     { animation: fadeInUp 0.6s ease both; }
.animate-fadeInDown   { animation: fadeInDown 0.6s ease both; }
.animate-slideInLeft  { animation: slideInLeft 0.6s ease both; }
.animate-slideInRight { animation: slideInRight 0.6s ease both; }
.animate-pulse        { animation: pulse 2s ease-in-out infinite; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-shimmer      { animation: shimmer 1.5s ease-in-out infinite; }
.animate-spin         { animation: spin 1s linear infinite; }
.animate-scaleIn      { animation: scaleIn 0.4s ease both; }
.animate-slideUp      { animation: slideUp 0.4s ease both; }
.animate-slideDown    { animation: slideDown 0.3s ease both; }
.animate-gradient     { animation: gradientShift 6s ease infinite; background-size: 200% 200%; }


/* ============================================
   8. STAGGERED DELAY CLASSES
   Combine with animation utilities for
   sequential reveal effects.
   ============================================ */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }


/* ============================================
   9. GRADIENT UTILITIES
   Pre-defined brand gradient backgrounds
   and gradient text.
   ============================================ */

/* Primary purple gradient */
.gradient-primary {
  background: linear-gradient(135deg, #5B3FE8, #7B5FFF);
}

/* Accent teal gradient */
.gradient-accent {
  background: linear-gradient(135deg, #00D4A0, #00A87D);
}

/* Hero gradient – purple to teal sweep */
.gradient-hero {
  background: linear-gradient(135deg, #5B3FE8 0%, #7B5FFF 40%, #00D4A0 100%);
}

/* Gradient text fill */
.gradient-text {
  background: linear-gradient(135deg, #5B3FE8, #00D4A0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtle purple bg gradient for sections */
.gradient-subtle {
  background: linear-gradient(180deg, var(--rz-lavender) 0%, var(--rz-surface) 100%);
}


/* ============================================
   10. BUTTON STYLES
   Consistent, accessible button components
   with smooth hover / active micro-animations.
   ============================================ */

/* Primary call-to-action button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(135deg, #5B3FE8, #7B5FFF);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: var(--rz-radius-full);
  box-shadow: var(--rz-shadow);
  cursor: pointer;
  transition: var(--rz-transition);
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary:hover {
  box-shadow: var(--rz-shadow-lg);
  transform: translateY(-1px) scale(1.02);
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: var(--rz-shadow);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--rz-primary);
  outline-offset: 3px;
}

/* Secondary / outline button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: #ffffff;
  color: var(--rz-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  border: 2px solid var(--rz-primary);
  border-radius: var(--rz-radius-full);
  cursor: pointer;
  transition: var(--rz-transition);
  text-decoration: none;
  line-height: 1.4;
}

.btn-secondary:hover {
  background: var(--rz-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--rz-primary);
  outline-offset: 3px;
}

/* Accent / teal button */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(135deg, #00D4A0, #00A87D);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: var(--rz-radius-full);
  box-shadow: 0 4px 6px -1px rgba(0, 212, 160, 0.2);
  cursor: pointer;
  transition: var(--rz-transition);
  text-decoration: none;
  line-height: 1.4;
}

.btn-accent:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 212, 160, 0.25);
  transform: translateY(-1px) scale(1.02);
}

.btn-accent:active {
  transform: scale(0.98);
}

.btn-accent:focus-visible {
  outline: 2px solid var(--rz-accent);
  outline-offset: 3px;
}

/* Small button modifier */
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}

/* Large button modifier */
.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.0625rem;
}

/* Disabled state for all buttons */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-accent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ============================================
   11. INPUT / FORM STYLES
   Styled inputs with brand-purple focus rings.
   ============================================ */

/* Standard input field */
.input-primary {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: var(--rz-text);
  font-size: 0.9375rem;
  font-family: inherit;
  border: 2px solid var(--rz-border);
  border-radius: var(--rz-radius);
  transition: var(--rz-transition);
}

.input-primary::placeholder {
  color: var(--rz-text-light);
}

.input-primary:hover {
  border-color: var(--rz-primary-light);
}

.input-primary:focus {
  border-color: var(--rz-primary);
  box-shadow: 0 0 0 3px rgba(91, 63, 232, 0.15);
}

/* Large URL paste box – the centrepiece of downloader pages */
.url-input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3.25rem;
  background: #ffffff;
  color: var(--rz-text);
  font-size: 1.125rem;
  font-family: inherit;
  border: 2px solid var(--rz-border);
  border-radius: var(--rz-radius-lg);
  transition: var(--rz-transition);
}

.url-input::placeholder {
  color: var(--rz-text-light);
  font-size: 1rem;
}

.url-input:hover {
  border-color: var(--rz-primary-light);
}

.url-input:focus {
  border-color: var(--rz-primary);
  box-shadow: 0 0 0 4px rgba(91, 63, 232, 0.12);
}

/* Textarea */
.textarea-primary {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: var(--rz-text);
  font-size: 0.9375rem;
  font-family: inherit;
  border: 2px solid var(--rz-border);
  border-radius: var(--rz-radius);
  transition: var(--rz-transition);
  resize: vertical;
  min-height: 120px;
}

.textarea-primary:focus {
  border-color: var(--rz-primary);
  box-shadow: 0 0 0 3px rgba(91, 63, 232, 0.15);
}

/* Form label */
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--rz-text);
}

/* Form error message */
.form-error {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--rz-error);
}


/* ============================================
   12. CARD STYLES
   Flexible card components for content panels,
   features, and media previews.
   ============================================ */

/* Standard card */
.card {
  background: #ffffff;
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow);
  padding: 1.5rem;
  transition: var(--rz-transition);
}

.card:hover {
  box-shadow: var(--rz-shadow-lg);
  transform: translateY(-2px);
}

/* Glass card variant */
.card-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow);
  padding: 1.5rem;
  transition: var(--rz-transition);
}

.card-glass:hover {
  box-shadow: var(--rz-shadow-lg);
  transform: translateY(-2px);
}

/* Feature card – top gradient border accent */
.card-feature {
  background: #ffffff;
  border-radius: var(--rz-radius-lg);
  box-shadow: var(--rz-shadow);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--rz-transition);
}

/* Purple gradient top border via pseudo-element */
.card-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rz-primary), var(--rz-accent));
  border-radius: var(--rz-radius-lg) var(--rz-radius-lg) 0 0;
}

.card-feature:hover {
  box-shadow: var(--rz-shadow-lg);
  transform: translateY(-4px);
}

/* Icon area inside feature cards */
.card-feature .card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rz-radius);
  background: var(--rz-lavender);
  color: var(--rz-primary);
  margin-bottom: 1rem;
  transition: var(--rz-transition);
}

.card-feature:hover .card-icon {
  background: var(--rz-primary);
  color: #ffffff;
}


/* ============================================
   13. PLATFORM COLOR CLASSES
   Brand colours for supported social platforms.
   ============================================ */

/* YouTube – Red */
.platform-youtube       { color: #FF0000; }
.platform-youtube-bg    { background-color: #FF0000; }
.platform-youtube-ring  { box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2); }

/* Instagram – Gradient */
.platform-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.platform-instagram-bg {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* TikTok – Black */
.platform-tiktok       { color: #000000; }
.platform-tiktok-bg    { background-color: #000000; }
.platform-tiktok-ring  { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); }

/* Facebook – Blue */
.platform-facebook     { color: #1877F2; }
.platform-facebook-bg  { background-color: #1877F2; }
.platform-facebook-ring { box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.2); }


/* ============================================
   14. NAVIGATION STYLES
   Fixed top nav bar with glass effect that
   intensifies on scroll.
   ============================================ */

/* Main navigation bar */
.nav-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  transition: var(--rz-transition);
}

/* Scrolled state – more opaque, tighter shadow */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 3px rgba(91, 63, 232, 0.08);
  border-bottom-color: transparent;
}

/* Nav link base styling */
.nav-link {
  position: relative;
  color: var(--rz-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  transition: var(--rz-transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--rz-primary);
}

/* Animated underline on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--rz-primary);
  border-radius: var(--rz-radius-full);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

/* Dropdown menu container */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* Show dropdown on hover */
.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown-trigger:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Individual dropdown item */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rz-text);
  transition: var(--rz-transition);
}

.nav-dropdown-item:hover {
  background: var(--rz-lavender);
  color: var(--rz-primary);
}

/* Platform dot indicators inside dropdown */
.nav-dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Mobile full-screen menu overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  z-index: 60;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Mobile menu backdrop overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile nav links */
.mobile-nav-link {
  display: block;
  padding: 0.875rem 0;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 1.0625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--rz-transition);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--rz-accent);
}

/* Mobile sub-links (indented tool links) */
.mobile-sub-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0 0.625rem 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  transition: var(--rz-transition);
}

.mobile-sub-link:hover {
  color: var(--rz-accent);
}

/* Body lock when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* Compensate for fixed nav bar on page content */
.nav-spacer {
  height: 64px;
}

@media (max-width: 767px) {
  .nav-main {
    height: 56px;
  }
  .nav-spacer {
    height: 56px;
  }
}


/* ============================================
   15. FOOTER STYLES
   Navy-background footer with link columns
   and social icons.
   ============================================ */

.footer {
  background-color: var(--rz-navy);
  color: rgba(255, 255, 255, 0.9);
}

.footer-heading {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.footer-link {
  display: block;
  color: rgba(156, 163, 175, 1);
  font-size: 0.875rem;
  padding: 0.25rem 0;
  transition: var(--rz-transition);
}

.footer-link:hover {
  color: #ffffff;
  padding-left: 4px;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(156, 163, 175, 1);
  transition: var(--rz-transition);
}

.footer-social-icon:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}


/* ============================================
   16. COOKIE CONSENT BANNER
   Fixed bottom banner for GDPR / ePrivacy
   cookie disclosure.
   ============================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 1.5rem;
  animation: slideUp 0.4s ease both;
}

.cookie-banner.hidden {
  display: none;
}


/* ============================================
   17. LOADING STATES
   Spinners, skeletons, and overlays for async
   operations.
   ============================================ */

/* Circular spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--rz-border-light);
  border-top-color: var(--rz-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 56px;
  height: 56px;
  border-width: 5px;
}

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--rz-border-light) 25%,
    var(--rz-border) 50%,
    var(--rz-border-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--rz-radius);
}

/* Full-screen loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(248, 248, 254, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ============================================
   18. TOAST NOTIFICATIONS
   Slide-in notifications for user feedback
   on actions.
   ============================================ */

/* Toast container – stacks toasts vertically */
.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
  width: 100%;
  pointer-events: none;
}

/* Individual toast */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-lg);
  animation: slideInRight 0.4s ease both;
  pointer-events: auto;
  border-left: 4px solid transparent;
}

/* Toast variants */
.toast-success { border-left-color: var(--rz-success); }
.toast-error   { border-left-color: var(--rz-error); }
.toast-info    { border-left-color: var(--rz-primary); }
.toast-warning { border-left-color: var(--rz-warning); }

/* Toast dismiss button */
.toast-close {
  margin-left: auto;
  padding: 0.25rem;
  color: var(--rz-text-light);
  cursor: pointer;
  transition: var(--rz-transition);
  flex-shrink: 0;
}

.toast-close:hover {
  color: var(--rz-text);
}

/* Toast exit animation */
.toast.toast-exit {
  animation: slideInRight 0.3s ease reverse forwards;
}


/* ============================================
   19. FAQ ACCORDION
   Expandable question/answer sections.
   ============================================ */

.faq-item {
  border-bottom: 1px solid var(--rz-border);
  cursor: pointer;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rz-text);
  transition: var(--rz-transition);
  user-select: none;
}

.faq-question:hover {
  color: var(--rz-primary);
}

/* Chevron icon rotates when expanded */
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--rz-text-muted);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--rz-primary);
}

/* Answer panel – height animated */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

.faq-answer p {
  color: var(--rz-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}


/* ============================================
   20. BREADCRUMBS
   Simple hierarchical navigation trail.
   ============================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--rz-text-muted);
}

.breadcrumb a {
  color: var(--rz-text-muted);
  transition: var(--rz-transition);
}

.breadcrumb a:hover {
  color: var(--rz-primary);
}

.breadcrumb-separator {
  margin: 0 0.375rem;
  color: var(--rz-text-light);
  user-select: none;
}

/* Current / active breadcrumb item */
.breadcrumb-current {
  color: var(--rz-text);
  font-weight: 500;
}


/* ============================================
   21. BACK TO TOP BUTTON
   Floating action button that scrolls the
   page to the top.
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #5B3FE8, #7B5FFF);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: var(--rz-shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(91, 63, 232, 0.3);
}

.back-to-top:active {
  transform: scale(0.92);
}


/* ============================================
   22. PRINT STYLES
   Strip decorative / interactive elements
   when printing.
   ============================================ */

@media print {
  /* Hide non-content elements */
  .nav-main,
  .mobile-menu,
  .mobile-menu-overlay,
  .footer,
  .cookie-banner,
  .back-to-top,
  .toast-container,
  .loading-overlay {
    display: none !important;
  }

  /* Remove backgrounds and shadows for ink savings */
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .card,
  .card-glass,
  .card-feature {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  /* Remove fixed nav spacer */
  .nav-spacer {
    height: 0 !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}


/* ============================================
   23. RESPONSIVE FINE-TUNING
   Targeted adjustments at common breakpoints
   beyond what Tailwind handles.
   ============================================ */

/* ----- Small (≥640px) ----- */
@media (min-width: 640px) {
  .url-input {
    font-size: 1.25rem;
    padding: 1.125rem 1.5rem 1.125rem 3.5rem;
  }
}

/* ----- Medium (≥768px) ----- */
@media (min-width: 768px) {
  .toast-container {
    top: 1.5rem;
    right: 1.5rem;
  }

  .cookie-banner {
    padding: 1.25rem 2rem;
  }
}

/* ----- Large (≥1024px) ----- */
@media (min-width: 1024px) {
  /* Slightly taller nav on desktop */
  .nav-main {
    height: 64px;
  }

  .nav-spacer {
    height: 64px;
  }
}

/* ----- XL (≥1280px) ----- */
@media (min-width: 1280px) {
  /* Max-width cap on toast container */
  .toast-container {
    max-width: 420px;
  }
}

/* ----- Motion reduction ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}