/* =====================================================
   Django Blog Plus Premium Polish
   Micro-interactions, enhanced shadows, and animations
   for a premium, polished feel
   ===================================================== */

/* =====================================================
   1. ENHANCED NAVBAR STYLING
   ===================================================== */

.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-link {
  position: relative;
  padding: 0.5rem 0;
  font-weight: 500 !important; /* Medium weight for better visibility */
  color: var(--color-gray-700) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px !important;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.w--current::after {
  width: 100%;
}

/* Ensure navbar buttons are consistent across all pages */
.navbar-button-wrapper {
  display: flex;
  align-items: center;
}

.navbar-button-wrapper:not(:last-child) {
  margin-right: 1rem;
}

.navbar-button-wrapper .btn {
  margin: 0 !important; /* Override any margin from Bootstrap or other CSS */
  white-space: nowrap;
}

.navbar-button-wrapper .btn-ghost {
  font-weight: 500 !important;
  color: var(--color-primary-500) !important;
}

.navbar-button-wrapper .btn-primary {
  font-weight: 500 !important;
  color: white !important;
}

.navbar-button-wrapper .btn-primary:hover {
  color: white !important;
}

/* Mobile nav animations */
.nav-menu-wrapper-mobile {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger-line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* =====================================================
   2. PREMIUM CARD EFFECTS
   ===================================================== */

/* Glass morphism card variant */
.card-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.3);
}

/* Card with gradient border */
.card-gradient-border {
  position: relative;
  background: white;
  border: none;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Pricing card hover glow */
.conversion-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversion-card:hover {
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(102, 126, 234, 0.1);
}

.conversion-card.featured {
  box-shadow:
    0 4px 20px rgba(102, 126, 234, 0.15),
    0 0 0 1px var(--color-primary-500);
}

.conversion-card.featured:hover {
  box-shadow:
    0 20px 40px rgba(102, 126, 234, 0.25),
    0 0 0 2px var(--color-primary-500);
}

/* =====================================================
   3. BUTTON MICRO-INTERACTIONS
   ===================================================== */

/* Restore landing-page hover for all buttons (lift + shadow + gradient) */
.btn-primary:hover,
.cta-primary:hover,
.tps-btn-main:hover,
.button.w-button:hover {
  background: var(--gradient-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-primary-md) !important;
  color: white !important;
}

.btn-secondary:hover,
.cta-secondary:hover,
.tps-btn-outline:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-ghost:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-600) !important;
  border-color: var(--border-color-default) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-danger:hover,
.tps-btn-danger:hover {
  background: var(--color-error-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3) !important;
  color: white !important;
}

.btn-success:hover {
  background: var(--color-success-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
  color: white !important;
}

/* Button ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.btn-ripple:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

/* Button press effect */
.btn:active {
  transform: scale(0.98);
}

/* Icon animation on hover */
.btn i,
.btn svg {
  transition: transform 0.2s ease;
}

.btn:hover i,
.btn:hover svg {
  transform: scale(1.1);
}

/* Arrow animation */
.btn-arrow i {
  transition: transform 0.2s ease;
}

.btn-arrow:hover i {
  transform: translateX(4px);
}

/* =====================================================
   4. FORM INPUT ENHANCEMENTS
   ===================================================== */

/* Input floating label effect */
.form-group-floating {
  position: relative;
}

.form-group-floating .form-input {
  padding-top: 1.5rem;
}

.form-group-floating .form-label {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  transition: all 0.2s ease;
  pointer-events: none;
  color: var(--color-gray-400);
  font-size: var(--font-size-base);
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.form-group-floating .form-input:focus ~ .form-label,
.form-group-floating .form-input:not(:placeholder-shown) ~ .form-label {
  top: 0.75rem;
  font-size: var(--font-size-xs);
  color: var(--color-primary-500);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Input glow on focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow:
    0 0 0 3px rgba(102, 126, 234, 0.1),
    0 4px 12px rgba(102, 126, 234, 0.15);
}

/* Success/error input animations */
.form-input.is-valid {
  animation: inputSuccess 0.3s ease;
}

.form-input.is-invalid {
  animation: inputError 0.3s ease;
}

@keyframes inputSuccess {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

@keyframes inputError {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* =====================================================
   5. ENHANCED ALERTS
   ===================================================== */

.alert {
  animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alert icon bounce */
.alert i {
  animation: alertIconPulse 2s ease infinite;
}

@keyframes alertIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* =====================================================
   6. SCROLL ANIMATIONS
   ===================================================== */

/* Fade in up on scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

.animate-stagger.is-visible > *:nth-child(1) { animation: fadeInUp 0.5s ease 0.1s forwards; }
.animate-stagger.is-visible > *:nth-child(2) { animation: fadeInUp 0.5s ease 0.2s forwards; }
.animate-stagger.is-visible > *:nth-child(3) { animation: fadeInUp 0.5s ease 0.3s forwards; }
.animate-stagger.is-visible > *:nth-child(4) { animation: fadeInUp 0.5s ease 0.4s forwards; }
.animate-stagger.is-visible > *:nth-child(5) { animation: fadeInUp 0.5s ease 0.5s forwards; }
.animate-stagger.is-visible > *:nth-child(6) { animation: fadeInUp 0.5s ease 0.6s forwards; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   7. PREMIUM SHADOWS & GRADIENTS
   ===================================================== */

/* Colored shadow utility classes */
.shadow-primary {
  box-shadow: var(--shadow-primary-md);
}

.shadow-primary-lg {
  box-shadow: var(--shadow-primary-lg);
}

/* Gradient text utility */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gradient border utility */
.gradient-border {
  position: relative;
  border: none;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: var(--gradient-primary);
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Glow effect */
.glow {
  box-shadow: 0 0 40px rgba(102, 126, 234, 0.3);
}

.glow-hover:hover {
  box-shadow: 0 0 60px rgba(102, 126, 234, 0.4);
}

/* =====================================================
   8. ENHANCED PRICING TOGGLE
   ===================================================== */

.toggle-slider {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =====================================================
   9. DASHBOARD ENHANCEMENTS
   ===================================================== */

/* Stats card hover */
.usage-stat-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.usage-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-200);
}

/* Progress bar gradient */
.usage-progress-fill {
  background: var(--gradient-primary);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quick action card hover */
.quick-action-card {
  transition: all 0.3s ease;
}

.quick-action-card:hover:not(.disabled) {
  transform: translateX(4px);
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-md);
}

.quick-action-card:hover:not(.disabled) .action-arrow {
  transform: translateX(4px);
}

.quick-action-card .action-arrow {
  transition: transform 0.3s ease;
}

/* =====================================================
   10. FOOTER ENHANCEMENTS
   ===================================================== */

.footer a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer a:hover {
  color: var(--color-success-500) !important;
}

.trust-stat-item {
  transition: transform 0.2s ease;
}

.trust-stat-item:hover {
  transform: translateY(-2px);
}

/* Newsletter input focus */
.newsletter-input:focus {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* =====================================================
   11. SIDEBAR ENHANCEMENTS
   ===================================================== */

.sidebar-link {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  background: var(--color-primary-50);
  border-left-color: var(--color-primary-300);
}

.sidebar-link.active {
  background: var(--color-primary-50);
  border-left-color: var(--color-primary-500);
}

.sidebar-link i {
  transition: transform 0.2s ease;
}

.sidebar-link:hover i {
  transform: scale(1.1);
}

/* Plan badge pulse */
.sidebar-plan-badge {
  animation: planBadgePulse 3s ease-in-out infinite;
}

@keyframes planBadgePulse {
  0%, 100% { box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3); }
  50% { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5); }
}

/* =====================================================
   12. PAGE TRANSITIONS
   ===================================================== */

/* Smooth page load */
body {
  animation: pageLoad 0.4s ease;
}

@keyframes pageLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Section fade-in */
.section-enhanced {
  animation: sectionFadeIn 0.6s ease;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   13. TOOLTIP ENHANCEMENTS
   ===================================================== */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: var(--z-tooltip);
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-900);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--color-gray-900);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================
   14. REDUCED MOTION
   ===================================================== */

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

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .animate-stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================
   15. SELECTION STYLING
   ===================================================== */

::selection {
  background: var(--color-primary-200);
  color: var(--color-primary-900);
}

::-moz-selection {
  background: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* =====================================================
   16. SCROLLBAR STYLING (Webkit)
   ===================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) var(--color-gray-100);
}

