/*
Plugin Name: Cennik Plugin Drag&Drop Frontend Animacja
Description: CSS pluginu do wyświetlania cennika z możliwością drag&drop w sidebarze (front-end) dla administratora z płynną animacją. Podpinany pod plik cennik-plugin.php
Version: 2.0
Author: QuackDev
*/

* { box-sizing: border-box; }

body { font-family: Arial, sans-serif; margin: 0; background: #d8e7f2; }

.cennik-container { display: flex; flex-direction: row; align-items: flex-start; max-width: 1200px; margin: 0 auto; gap: 20px; padding: 20px; }

.cennik-container .sidebar { flex: 0 0 40%; max-width: 40%; display: flex; flex-direction: column; gap: 12px; }

.cennik-container .content { flex: 0 0 60%; max-width: 60%; background: white; border-radius: 6px; overflow-y: auto; display: flex; flex-direction: column; }

.cennik-container .button { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: linear-gradient(to right, #4c4f98 6px, #ffffff 6px); cursor: pointer; font-weight: bold; border-radius: 6px; position: relative; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }

.cennik-container .button:hover { 
  background: linear-gradient(to right, #4c4f98 6px, #f5f5f5 6px); 
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.cennik-container .button.active { background: linear-gradient(to right, #2c2f5e 6px, #dddff5 6px); color: #2c2f5e; transform: scale(1.02); }

.cennik-container .icon { font-size: 20px; color: #4c4f98; transition: transform 0.3s ease, opacity 0.3s ease; }

.cennik-container .icon.animating { opacity: 0; transform: rotate(180deg) scale(0.5); }

.cennik-container .content h2 { background: #4c4f98; color: white; padding: 12px 20px; border-radius: 6px 6px 0 0; margin: 0; font-size: 18px; }

.cennik-container .content h2 span { display: inline-block; opacity: 1; transition: opacity 200ms ease; will-change: opacity; }

.cennik-container .content h2 span.is-switching { opacity: 0; }

.cennik-container .content-inner {
  background: white;
  padding: 20px;
  border: 1px solid #4c4f98;
  border-top: none;
  border-radius: 0 0 6px 6px;
  word-wrap: break-word;
  flex-grow: 1;
  opacity: 1;
  transition: opacity 0.25s ease, height 0.25s ease;
  overflow: hidden;
}

.cennik-container .content-inner.is-switching { opacity: 0.3; }

.cennik-container #content-body { opacity: 1; transition: opacity 200ms ease; will-change: opacity; }

.cennik-container #content-body.is-switching { opacity: 0; }

.cennik-container ul { padding-left: 20px; margin: 0; }
.cennik-container li { margin-bottom: 8px; }

@media (max-width: 630px) {
  .cennik-container { flex-direction: column; gap: 20px; max-width: 100%; margin: 0; padding: 0; }
  .cennik-container .sidebar, .cennik-container .content { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .cennik-container .button { width: 100%; border-radius: 0; }
  .cennik-container .content, .cennik-container .content h2, .cennik-container .content-inner { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cennik-container .button, .cennik-container .icon, .cennik-container #content-body, .cennik-container .content h2 span, .cennik-container .content-inner { transition: none !important; }
}