/**
 * CNS Brain Center - Components & Utilities
 *
 * @package CNS_Theme
 * @version 1.0.0
 */

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

/* Container Classes */
.cns-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.cns-container-wide {
  max-width: var(--container-wide);
}

.cns-container-narrow {
  max-width: var(--container-narrow);
}

/* Section Spacing */
.cns-section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.cns-section-sm {
  padding-top: calc(var(--section-padding-y) * 0.5);
  padding-bottom: calc(var(--section-padding-y) * 0.5);
}

.cns-section-lg {
  padding-top: calc(var(--section-padding-y) * 1.5);
  padding-bottom: calc(var(--section-padding-y) * 1.5);
}

/* ==========================================================================
   BACKGROUND UTILITIES
   ========================================================================== */

.bg-white { background-color: var(--color-bg) !important; }
.bg-alt { background-color: var(--color-bg-alt) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }
.bg-beige { background-color: var(--color-bg-beige) !important; }
.bg-dark { background-color: var(--color-bg-dark) !important; }
.bg-darker { background-color: var(--color-bg-darker) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-primary) !important; }

/* Dark backgrounds should have light text */
.bg-dark,
.bg-darker,
.bg-primary {
  color: var(--color-text-inverse) !important;
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-darker h1, .bg-darker h2, .bg-darker h3, .bg-darker h4, .bg-darker h5, .bg-darker h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6 {
  color: var(--color-text-inverse) !important;
}

.bg-dark p, .bg-darker p, .bg-primary p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-primary) !important; }
.text-dark { color: var(--color-text) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-light { color: var(--color-text-light) !important; }
.text-white { color: var(--color-white) !important; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Font Families */
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }

/* Font Weights */
.font-light { font-weight: var(--font-light) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* Font Sizes */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Base Button Styles */
.cns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
}

/* Primary Button - Solid Navy */
.cns-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cns-btn-primary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button);
}

/* Secondary Button */
.cns-btn-secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cns-btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(-2px);
}

/* Outline Button */
.cns-btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.cns-btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* White Outline (for dark backgrounds) */
.cns-btn-outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.cns-btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Button Sizes */
.cns-btn-sm {
  padding: 10px 20px;
  font-size: var(--text-xs);
}

.cns-btn-lg {
  padding: 18px 36px;
  font-size: var(--text-base);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

/* Base Card */
.cns-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

/* Card with Shadow */
.cns-card-shadow {
  box-shadow: var(--shadow-card);
}

.cns-card-shadow:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

/* Card with Border */
.cns-card-bordered {
  border: 1px solid var(--color-border);
}

.cns-card-bordered:hover {
  border-color: var(--color-primary);
}

/* Service Card - Icon Box Style */
.cns-service-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
  border: 1px solid var(--color-border-light);
}

.cns-service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: transparent;
}

.cns-service-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  text-align: left;
}

/* Testimonial Card */
.cns-testimonial-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  position: relative;
}

/* Blog Card */
.cns-blog-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}

.cns-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.cns-blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.cns-blog-card:hover img {
  transform: scale(1.05);
}

.cns-blog-card-content {
  padding: var(--space-6);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.cns-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.cns-hero-content {
  max-width: 600px;
}

.cns-hero h1 {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-6);
}

.cns-hero h1 span {
  color: var(--color-primary);
}

.cns-hero p {
  margin-bottom: var(--space-8);
}

/* ==========================================================================
   FEATURES / STATS SECTION
   ========================================================================== */

.cns-feature-item {
  text-align: center;
  padding: var(--space-6);
}

.cns-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
}

.cns-stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   DOCTOR SECTION
   ========================================================================== */

.cns-doctor-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--gap-xl);
  align-items: center;
}

@media (max-width: 992px) {
  .cns-doctor-section {
    grid-template-columns: 1fr;
  }
}

.cns-doctor-image {
  position: relative;
}

.cns-doctor-image img {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.cns-doctor-image::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  border-radius: var(--radius-2xl);
  z-index: -1;
}

/* ==========================================================================
   PARTNERS / LOGOS SECTION
   ========================================================================== */

.cns-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
}

.cns-partners img {
  max-height: 50px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-base);
}

.cns-partners img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==========================================================================
   BLOCKQUOTE / TESTIMONIAL QUOTE
   ========================================================================== */

.cns-blockquote {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  text-align: center;
  color: var(--color-text);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  line-height: var(--leading-relaxed);
}

.cns-blockquote::before,
.cns-blockquote::after {
  content: '"';
  color: var(--color-text-muted);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.cns-tabs__item {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  margin: 0 var(--space-2);
  transition: all var(--transition-fast);
  cursor: pointer;
  background: transparent;
}

.cns-tabs__item:hover,
.cns-tabs__item.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ==========================================================================
   CONDITIONS GRID
   ========================================================================== */

.cns-conditions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}

@media (max-width: 992px) {
  .cns-conditions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cns-conditions-grid {
    grid-template-columns: 1fr;
  }
}

.cns-condition-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.cns-condition-item:hover {
  background: var(--color-bg-alt);
}

.cns-condition-item i {
  color: var(--color-primary);
  font-size: 20px;
}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */

.cns-carousel {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.cns-carousel__nav {
  background: var(--color-white);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cns-carousel__nav:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   SERVICES ICON GRID
   ========================================================================== */

@media (max-width: 992px) {
  .cns-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cns-services-grid-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.cns-services-grid-item i {
  font-size: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.cns-contact-form .cns-form-group {
  margin-bottom: var(--space-4);
}

.cns-contact-form input,
.cns-contact-form textarea,
.cns-contact-form select {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  font-family: var(--font-body) !important;
  transition: border-color var(--transition-fast) !important;
}

.cns-contact-form input:focus,
.cns-contact-form textarea:focus,
.cns-contact-form select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}

.cns-contact-form button[type="submit"] {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-semibold) !important;
  transition: all var(--transition-base) !important;
}

.cns-contact-form button[type="submit"]:hover {
  background: var(--color-primary-light) !important;
  transform: translateY(-2px);
}

/* Contact Info */
.cns-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cns-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.cns-contact-info-item i {
  font-size: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.cns-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}

.cns-footer h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.cns-footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.cns-footer a:hover {
  color: var(--color-primary);
}

.cns-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

/* Social Icons */
.cns-social-icons {
  display: flex;
  gap: var(--space-3);
}

.cns-social-icons a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.cns-social-icons a:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

.cns-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.cns-header.scrolled {
  box-shadow: var(--shadow-md);
}

.cns-nav-link {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  transition: color var(--transition-fast);
}

.cns-nav-link:hover {
  color: var(--color-primary);
}

/* Phone Number in Header */
.cns-header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

.cns-header-phone i {
  color: var(--color-primary);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* Fade In Up Animation */
.cns-animate-fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cns-animate-fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale In Animation */
.cns-animate-scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cns-animate-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Children */
.cns-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cns-stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.cns-stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.cns-stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.cns-stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.cns-stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.cns-stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

.cns-stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
  .cns-hide-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .cns-hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1025px) {
  .cns-hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 768px) {
  .cns-show-mobile-only { display: none !important; }
}

/* ==========================================================================
   PAGE-SPECIFIC HERO STYLES
   ========================================================================== */

.cns-hero-section {
  background-color: var(--color-bg);
  padding: 100px 0 80px;
  position: relative;
  overflow: visible;
}

.cns-hero-title {
  font-size: var(--text-5xl) !important;
  font-weight: var(--font-bold) !important;
  color: var(--color-primary) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--space-2) !important;
}

.cns-hero-title-line {
  display: block;
}

.cns-hero-title-italic {
  font-style: italic !important;
  font-weight: var(--font-light) !important;
}

.cns-hero-subtitle {
  font-size: var(--text-base) !important;
  color: var(--color-text-secondary) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: var(--space-8) !important;
  max-width: 480px;
}

.cns-hero-buttons {
  display: flex !important;
  gap: var(--space-4) !important;
  flex-wrap: wrap;
}

/* Hero image with beige background accent */
.cns-hero-image-wrapper {
  position: relative;
}

.cns-hero-image-wrapper::before {
  content: '';
  position: absolute;
  top: 30px;
  right: -30px;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  border-radius: var(--radius-2xl);
  z-index: 0;
}

.cns-hero-image-wrapper img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-2xl);
}

/* ==========================================================================
   SERVICES SECTION STYLES
   ========================================================================== */

.cns-services-section {
  background-color: var(--color-bg-alt) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-section-title {
  font-size: var(--text-3xl) !important;
  font-weight: var(--font-bold) !important;
  color: var(--color-primary) !important;
  text-align: center !important;
  margin-bottom: var(--space-12) !important;
}

.cns-service-box {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: left;
  transition: all var(--transition-base);
  border: 1px solid var(--color-border-light);
  height: 100%;
}

.cns-service-box:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: transparent;
}

.cns-service-box__icon {
  margin-bottom: var(--space-4);
  font-size: 32px;
  color: var(--color-primary);
}

.cns-service-box__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.cns-service-box__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cns-learn-more {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--color-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin-top: var(--space-4) !important;
}

.cns-learn-more:hover {
  gap: var(--space-3) !important;
}

/* ==========================================================================
   DOCTOR/ABOUT SECTION
   ========================================================================== */

.cns-doctor-section {
  background-color: var(--color-bg) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-doctor-image-wrapper {
  position: relative;
}

.cns-doctor-image-wrapper::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 80%;
  height: 80%;
  background: var(--color-secondary);
  border-radius: var(--radius-2xl);
  z-index: 0;
}

.cns-doctor-image-wrapper img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-2xl);
}

/* ==========================================================================
   PARTNERS SECTION
   ========================================================================== */

.cns-partners-section {
  padding: var(--space-12) 0 !important;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.cns-partners-title {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  text-align: center !important;
  margin-bottom: var(--space-8) !important;
}

/* ==========================================================================
   QUOTE / TESTIMONIAL HIGHLIGHT SECTION
   ========================================================================== */

.cns-quote-section {
  background-color: var(--color-bg) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-quote-text {
  font-family: var(--font-body) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-normal) !important;
  font-style: italic !important;
  text-align: center !important;
  color: var(--color-text) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  line-height: var(--leading-relaxed) !important;
}

/* ==========================================================================
   PRECISION SECTION (Dark background)
   ========================================================================== */

.cns-precision-section {
  background-color: var(--color-primary) !important;
  padding: var(--section-padding-y) 0 !important;
  color: var(--color-white) !important;
}

.cns-precision-section h2 {
  color: var(--color-white);
}

.cns-precision-section p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.cns-precision-item {
  text-align: center;
  padding: var(--space-6);
}

.cns-precision-item h4 {
  color: var(--color-white) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--font-semibold) !important;
  margin-bottom: var(--space-3) !important;
}

.cns-precision-item p {
  font-size: var(--text-sm) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ==========================================================================
   INSURANCE/COVERAGE SECTION
   ========================================================================== */

.cns-insurance-section {
  background-color: var(--color-bg-alt) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-insurance-tabs__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin: 0 var(--space-1) var(--space-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cns-insurance-tabs__item.is-active,
.cns-insurance-tabs__item:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ==========================================================================
   BLOG CARDS
   ========================================================================== */

.cns-blog-section {
  background-color: var(--color-bg) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-blog-card {
  background: var(--color-bg) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: all var(--transition-base) !important;
}

.cns-blog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.cns-blog-card-image {
  overflow: hidden;
}

.cns-blog-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.cns-blog-card:hover .cns-blog-card-image img {
  transform: scale(1.05);
}

.cns-blog-card-content {
  padding: var(--space-6) !important;
}

.cns-blog-card-date {
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-2) !important;
}

.cns-blog-card-title {
  font-size: var(--text-lg) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-3) !important;
  line-height: var(--leading-snug) !important;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.cns-contact-section {
  background-color: var(--color-bg-alt) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-map-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.cns-footer-section {
  background-color: var(--color-primary);
  padding: var(--space-16) 0 var(--space-8);
}

.cns-footer-section,
.cns-footer-section p,
.cns-footer-section span {
  color: rgba(255, 255, 255, 0.8);
}

.cns-footer-section h4 {
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}

.cns-footer-section a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.cns-footer-section a:hover {
  color: var(--color-white);
}

.cns-footer-logo {
  margin-bottom: var(--space-4);
}

.cns-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: var(--space-6) !important;
  margin-top: var(--space-12) !important;
}

/* ==========================================================================
   OFFICE TOUR CAROUSEL
   ========================================================================== */

.cns-tour-section {
  background-color: var(--color-bg-alt) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-tour-carousel {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
}

.cns-tour-carousel .swiper-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* Navigation arrows */
.cns-tour-carousel__nav {
  background: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

.cns-tour-carousel__nav:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   PATIENT TESTIMONIALS SECTION
   ========================================================================== */

.cns-testimonials-section {
  background-color: var(--color-bg) !important;
  padding: var(--section-padding-y) 0 !important;
}

.cns-testimonial-card {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  height: 100%;
}

.cns-testimonial-text {
  font-size: var(--text-base) !important;
  color: var(--color-text-secondary) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: var(--space-6) !important;
}

.cns-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cns-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.cns-testimonial-name {
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--color-text) !important;
}

.cns-testimonial-role {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   MOBILE: Disable load animations
   ========================================================================== */
@media (max-width: 768px) {
  .cns-animate-fade-in-up,
  .cns-animate-scale-in,
  .cns-stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cns-animate-fade-in-up.is-visible,
  .cns-animate-scale-in.is-visible,
  .cns-stagger-children.is-visible > * {
    opacity: 1;
    transform: none;
  }
}