/* Component-specific styles for Premium Dark Theme */

/* Navbar */
.cd-navbar { }
.cd-logo { font-weight: 900; letter-spacing: .5px; }
.cd-phone { display: none; }
@media (max-width: 767px) { .cd-phone { display: inline-flex; } }

/* Service Card */
.cd-service { display: grid; grid-template-columns: 1fr; }
.cd-service .cd-features {
  display: grid; gap: 10px;
  color: var(--cd-muted);
  line-height: 1.6;
}
.cd-service .cd-addons {
  display: grid; gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cd-border);
  color: var(--cd-muted);
}

/* Review Item */
.cd-review { display: grid; gap: 12px; }
.cd-stars {
  color: var(--cd-primary);
  font-size: 1.2rem;
  letter-spacing: 2px;
}

/* Gallery */
.cd-gallery { display: grid; gap: 20px; }
@media (min-width: 640px) { .cd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cd-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cd-gallery img {
  border-radius: var(--cd-radius);
  cursor: zoom-in;
  transition: all var(--cd-transition);
  border: 1px solid var(--cd-border);
}
.cd-gallery img:hover {
  transform: scale(1.03);
  box-shadow: var(--cd-shadow-lg), var(--cd-glow);
}

/* FAQ */
.cd-faq { }

/* Footer */
.cd-social { display: flex; gap: 16px; }
.cd-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  color: var(--cd-text);
  transition: all var(--cd-transition);
}
.cd-social a:hover {
  background: var(--cd-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--cd-glow);
}

/* CTA prominence */
.cd-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.cd-cta .button { min-width: 180px; }

/* Screen-reader utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Mobile nav animation hint */

/* Animations */
.anim-fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp .7s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }