/**
 * Dodatkowe style dla mechanizmu cookies
 * BudgetBuddy - 2025
 */

/* Animacje dla bannera cookies */
@keyframes cookiePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes cookieGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(99, 102, 241, 0.4),
      0 0 40px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(99, 102, 241, 0.6),
      0 0 60px rgba(99, 102, 241, 0.3);
  }
}

@keyframes floatUp {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* Efekt hover dla przycisków cookies */
.cookies-btn:hover {
  animation: cookiePulse 0.6s ease-in-out;
}

/* Specjalne efekty dla ikony cookies */
.cookies-icon {
  position: relative;
}

.cookies-icon::after {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.8rem;
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}

.cookies-icon:hover {
  animation: cookieGlow 2s ease-in-out infinite, floatUp 1s ease-in-out infinite;
}

.cookies-icon:hover::after {
  animation: sparkle 1s ease-in-out infinite;
}

/* Gradient dla bannera w trybie ciemnym */
@media (prefers-color-scheme: dark) {
  .cookies-banner {
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.98));
    backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(75, 85, 99, 0.4);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 8px 16px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .cookies-text h3 {
    color: #f9fafb;
  }
  
  .cookies-text p {
    color: #d1d5db;
  }
  
  .cookies-modal-content {
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.98));
    border-color: rgba(75, 85, 99, 0.4);
  }
  
  .cookies-category {
    background: linear-gradient(145deg, rgba(55, 65, 81, 0.8), rgba(31, 41, 55, 0.9));
    border-color: rgba(75, 85, 99, 0.5);
  }
  
  .cookies-btn-settings {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.9), rgba(31, 41, 55, 0.95));
    color: #f9fafb;
    border-color: rgba(75, 85, 99, 0.5);
  }
}

/* Dodatkowe style dla lepszej dostępności */
.cookies-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.toggle-label:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 30px;
}

/* Animacja dla modala */
@keyframes modalBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.cookies-modal.show .cookies-modal-content {
  animation: modalBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Efekt ripple dla przycisków */
.cookies-btn {
  position: relative;
  overflow: hidden;
}

.cookies-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.6s, height 0.6s;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.cookies-btn:active::before {
  width: 300px;
  height: 300px;
}

.cookies-btn * {
  position: relative;
  z-index: 1;
}

/* Fix dla średnich szerokości ekranu */
@media (max-width: 900px) and (min-width: 600px) {
  .cookies-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  
  .cookies-text {
    text-align: center !important;
  }
  
  .cookies-text p {
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  .cookies-actions {
    justify-content: center;
  }
}

/* Dodatkowe style dla małych ekranów */
@media (max-width: 320px) {
  .cookies-content {
    padding: 1rem 0.5rem;
  }
  
  .cookies-text h3 {
    font-size: 1rem;
  }
  
  .cookies-text p {
    font-size: 0.8rem;
  }
  
  .cookies-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* Wysokie kontrast dla lepszej dostępności */
@media (prefers-contrast: high) {
  .cookies-banner {
    border-top: 3px solid #000;
  }
  
  .cookies-btn {
    border: 2px solid currentColor;
  }
  
  .toggle-slider {
    border: 2px solid #000;
  }
}

/* Redukcja animacji dla użytkowników preferujących mniej ruchu */
@media (prefers-reduced-motion: reduce) {
  .cookies-banner,
  .cookies-modal,
  .cookies-modal-content,
  .cookies-btn,
  .cookies-icon {
    animation: none !important;
    transition: none !important;
  }
  
  .cookies-banner.show {
    transform: translateY(0);
  }
  
  .cookies-modal.show {
    opacity: 1;
    visibility: visible;
  }
  
  .cookies-modal.show .cookies-modal-content {
    transform: scale(1) translateY(0);
  }
}

/* Dodatkowe style dla drukarki */
@media print {
  .cookies-banner,
  .cookies-modal {
    display: none !important;
  }
}