/**
 * 48HoursBanners - Default Theme Styles
 * Additional styles specific to the default theme
 */

/* CSS Variables (overridden by theme settings) */
:root {
  --color-primary: #4F46E5;
  --color-secondary: #7C3AED;
  --color-accent: #F97316;
  --color-dark: #111827;
  --color-text: var(--color-dark, #111827);
  --color-background: #FFFFFF;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Apply theme fonts */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Theme-specific button styles */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 90%, black);
}

.btn-accent {
  background-color: var(--color-accent);
  color: white;
}

.btn-accent:hover {
  background-color: color-mix(in srgb, var(--color-accent) 90%, black);
}

/* Gradient backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Link colors */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* ===== HOMEPAGE DECORATIVE ===== */

/* Grid background pattern */
.mp-grid-bg {
  background-image: linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Decorative icon colors for floating background elements */
.mp-deco-primary { color: rgba(var(--primary-rgb), 0.1); }
.mp-deco-secondary { color: rgba(var(--secondary-rgb), 0.1); }

/* ===== HOMEPAGE ANIMATIONS ===== */

/* Text shine effect - animated gradient text */
.text-shine {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Marquee animations for scrolling content */
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-marquee-left {
  animation: marquee-left 40s linear infinite;
}

.animate-marquee-right {
  animation: marquee-right 40s linear infinite;
}

/* Sliding icon animations for decorative background elements */
@keyframes slide-right {
  0% { left: -5%; }
  100% { left: 105%; }
}

@keyframes slide-right-up {
  0% { left: -5%; transform: translateY(0); }
  100% { left: 105%; transform: translateY(-60px); }
}

@keyframes slide-right-down {
  0% { left: -5%; transform: translateY(0); }
  100% { left: 105%; transform: translateY(60px); }
}

@keyframes slide-right-wave {
  0% { left: -5%; transform: translateY(0); }
  25% { transform: translateY(-30px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(30px); }
  100% { left: 105%; transform: translateY(0); }
}

.slide-icon {
  will-change: transform, left;
}