/* Meble Eleganckie - Style Cyberpunk Neon z Bulma Framework */
/* Importy Google Fonts już w HTML head */

/* Zmienne CSS dla kolorów cyberpunk */
:root {
  --neon-cyan: #00ffff;
  --neon-pink: #ff00ff;
  --neon-yellow: #ffff00;
  --neon-green: #00ff00;
  --neon-purple: #8000ff;
  --neon-orange: #ff6600;
  --dark-bg: #0a0a0a;
  --dark-card: #1a1a1a;
  --dark-secondary: #2a2a2a;
  --grid-color: rgba(0, 255, 255, 0.1);
}

/* Podstawowe style dla body */
body {
  background: var(--dark-bg);
  color: var(--neon-cyan);
  font-family: 'Exo 2', sans-serif;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* Cyberpunk grid pattern jako tło */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  pointer-events: none;
}

/* Cyberpunk Heading Fonts */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: 'Orbitron', sans-serif;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px currentColor;
  font-weight: 700;
}

h1, .title.is-1 {
  color: var(--neon-pink);
  text-shadow: 0 0 20px currentColor;
  font-size: 3rem;
}

h2, .title.is-2 {
  color: var(--neon-yellow);
  text-shadow: 0 0 15px currentColor;
}

h3, .title.is-3 {
  color: var(--neon-green);
  text-shadow: 0 0 12px currentColor;
}

/* Navbar Cyberpunk Style */
.navbar {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-card) 100%);
  border-bottom: 2px solid var(--neon-cyan);
  box-shadow: 0 2px 20px rgba(0, 255, 255, 0.3);
  padding: 0.5rem 0;
}

.navbar-brand .navbar-item img {
  max-height: 3rem;
  filter: drop-shadow(0 0 10px var(--neon-cyan));
}

.navbar-item, .navbar-link {
  color: var(--neon-cyan) !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}

.navbar-item:hover, .navbar-link:hover {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 15px currentColor;
  background: rgba(255, 0, 255, 0.1) !important;
}

.navbar-item.is-active {
  color: var(--neon-yellow) !important;
  text-shadow: 0 0 15px currentColor;
}

.navbar-burger span {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 5px currentColor;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(0, 255, 255, 0.1) 25%, 
    transparent 50%, 
    rgba(255, 0, 255, 0.1) 75%, 
    transparent 100%);
  z-index: 1;
}

.hero .hero-body {
  position: relative;
  z-index: 2;
  padding: 6rem 1.5rem;
}

.hero .title {
  font-size: 4rem;
  background: linear-gradient(45deg, var(--neon-cyan), var(--neon-pink), var(--neon-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow-pulse 3s ease-in-out infinite alternate;
}

.hero .subtitle {
  color: var(--neon-green);
  font-size: 1.5rem;
  text-shadow: 0 0 15px currentColor;
}

/* Karty (Cards) Cyberpunk */
.card {
  background: var(--dark-card);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 4px 25px rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-pink), transparent);
  transition: left 0.5s ease;
}

.card:hover::before {
  left: 100%;
}

.card:hover {
  border-color: var(--neon-pink);
  box-shadow: 0 8px 35px rgba(255, 0, 255, 0.4);
  transform: translateY(-5px);
}

.card-header {
  background: linear-gradient(135deg, var(--dark-secondary), var(--dark-card));
  border-bottom: 1px solid var(--neon-cyan);
}

.card-header-title {
  color: var(--neon-yellow);
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 10px currentColor;
}

.card-content {
  color: var(--neon-cyan);
  background: var(--dark-card);
}

/* Przyciski Cyberpunk */
.button {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.button.is-primary {
  background: transparent;
  border: 2px solid var(--neon-pink);
  color: var(--neon-pink);
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

.button.is-primary:hover {
  background: rgba(255, 0, 255, 0.1);
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.6);
  color: var(--neon-pink);
  border-color: var(--neon-pink);
}

.button.is-info {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.button.is-info:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.button.is-success {
  background: transparent;
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4);
}

.button.is-success:hover {
  background: rgba(0, 255, 0, 0.1);
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
  color: var(--neon-green);
  border-color: var(--neon-green);
}

/* Formularz kontaktowy */
.field {
  margin-bottom: 2rem;
}

.label {
  color: var(--neon-yellow);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  text-shadow: 0 0 8px currentColor;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input, .textarea, .select select {
  background: var(--dark-card);
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--neon-pink);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
  background: var(--dark-card);
  color: var(--neon-cyan);
}

.input::placeholder, .textarea::placeholder {
  color: rgba(0, 255, 255, 0.5);
}

/* Checkbox dla GDPR */
.checkbox {
  color: var(--neon-cyan);
  font-size: 0.9rem;
}

.checkbox input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

/* Klikabalne kontakty */
a[href^="tel:"], a[href^="mailto:"] {
  color: var(--neon-green);
  text-decoration: none;
  text-shadow: 0 0 10px currentColor;
  transition: all 0.3s ease;
  font-weight: 600;
  position: relative;
}

a[href^="tel:"]:hover, a[href^="mailto:"]:hover {
  color: var(--neon-yellow);
  text-shadow: 0 0 15px currentColor;
}

a[href^="tel:"]::before {
  content: "📞 ";
  margin-right: 5px;
}

a[href^="mailto:"]::before {
  content: "✉️ ";
  margin-right: 5px;
}

/* Social media links */
.social-link {
  color: var(--neon-purple);
  font-size: 1.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link:hover {
  color: var(--neon-orange);
  text-shadow: 0 0 15px currentColor;
  transform: scale(1.2);
}

/* Footer */
.footer {
  background: linear-gradient(135deg, var(--dark-card) 0%, var(--dark-bg) 100%);
  border-top: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 3rem 1.5rem 2rem;
}

.footer a {
  color: var(--neon-green);
  transition: all 0.3s ease;
}

.footer a:hover {
  color: var(--neon-yellow);
  text-shadow: 0 0 10px currentColor;
}

/* Galeria produktów */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.product-item {
  background: var(--dark-card);
  border: 1px solid var(--neon-cyan);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.product-item:hover {
  border-color: var(--neon-pink);
  box-shadow: 0 10px 30px rgba(255, 0, 255, 0.3);
  transform: translateY(-5px);
}

.product-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.product-item:hover img {
  filter: brightness(1.1) contrast(1.1);
}

.product-info {
  padding: 1.5rem;
}

.product-info h3 {
  color: var(--neon-yellow);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.product-info p {
  color: var(--neon-cyan);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Animacje */
@keyframes glow-pulse {
  0% {
    text-shadow: 0 0 20px currentColor;
  }
  100% {
    text-shadow: 0 0 30px currentColor, 0 0 40px currentColor;
  }
}

@keyframes neon-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.neon-flicker {
  animation: neon-flicker 2s ease-in-out infinite;
}

/* Sekcje z tłem */
.section {
  background: var(--dark-bg);
  position: relative;
}

.section.is-dark {
  background: var(--dark-card);
}

/* Utility classes */
.neon-glow {
  box-shadow: 0 0 20px currentColor;
}

.cyberpunk-border {
  border: 1px solid var(--neon-cyan);
  border-radius: 4px;
}

.text-neon-cyan { color: var(--neon-cyan); }
.text-neon-pink { color: var(--neon-pink); }
.text-neon-yellow { color: var(--neon-yellow); }
.text-neon-green { color: var(--neon-green); }
.text-neon-purple { color: var(--neon-purple); }

/* Ukryte pole honeypot */
.honeypot {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* Breadcrumbs cyberpunk */
.breadcrumb {
  background: transparent;
}

.breadcrumb a {
  color: var(--neon-cyan);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 10px currentColor;
}

.breadcrumb li.is-active a {
  color: var(--neon-yellow);
}

/* Content typography */
.content {
  color: var(--neon-cyan);
}

.content p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.content ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.content li {
  margin-bottom: 0.5rem;
  position: relative;
}

.content li::before {
  content: "▶";
  color: var(--neon-pink);
  position: absolute;
  left: -1.5rem;
  text-shadow: 0 0 5px currentColor;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Loading animation for images */
img[src*="placeholder"] {
  background: linear-gradient(45deg, var(--dark-card), var(--dark-secondary));
  border: 1px dashed var(--neon-cyan);
  opacity: 0.7;
}