/* ===================================================================
   DrainPro Gold - Block Styles (frontend)
   =================================================================== */

/* Shared block spacing */
[class*="drainpro-"] + [class*="drainpro-"] {
  margin-top: 0;
}

/* Gallery hover effect */
.dp-gallery-item:hover img {
  transform: scale(1.05);
}

.dp-gallery-item img {
  transition: transform 0.5s ease;
}

/* Masonry */
.dp-masonry {
  column-fill: balance;
}

/* Lightbox */
.dp-lightbox {
  display: flex !important;
}

.dp-lightbox.hidden {
  display: none !important;
}

/* Slider dots active */
.dp-dot.active {
  background: var(--dp-gold) !important;
}

/* Filter buttons active */
.dp-filter-btn.active,
.service-filter-btn.active,
.project-filter-btn.active {
  background: var(--grad-gold, linear-gradient(135deg, #8B6914, #C9A84C, #E8D48A));
  color: #000;
  border-color: transparent;
}

/* FAQ accordion */
.dp-accordion-item.open .dp-accordion-icon {
  transform: rotate(45deg);
}

/* Stats counter animation */
.counter-number.counting {
  animation: none;
}

/* Pricing popular highlight */
.dp-pricing-popular {
  z-index: 1;
}

/* Portfolio grid responsive */
@media (max-width: 768px) {
  .dp-gallery-grid { columns: 1 !important; }
  [class*="drainpro-pricing"] .container > div { grid-template-columns: 1fr !important; }
  [class*="drainpro-text-image"] .container > div { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  .dp-gallery-grid { columns: 2 !important; }
}

/* Custom form styles */
.dp-custom-form input,
.dp-custom-form select,
.dp-custom-form textarea {
  border-radius: var(--dp-form-radius, 4px);
}

.dp-custom-form input:focus,
.dp-custom-form select:focus,
.dp-custom-form textarea:focus {
  box-shadow: 0 0 0 var(--dp-form-glow, 3px) rgba(201, 168, 76, 0.2);
  border-color: var(--dp-gold);
  outline: none;
}

.dp-form-response.success {
  background: rgba(201, 168, 76, 0.1);
  border: 0.5px solid var(--dp-gold);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  color: var(--dp-gold);
  font-weight: 600;
  text-align: center;
}

.dp-form-response.error {
  background: rgba(231, 76, 60, 0.1);
  border: 0.5px solid #e74c3c;
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  color: #e74c3c;
  font-weight: 600;
  text-align: center;
}

/* Testimonial slider dots */
.dp-dots { margin-top: var(--sp-6); }

/* Before/after slider responsive */
.before-after-wrapper { touch-action: none; }