/* Cionic Neurological Conditions Module */
.cnc-module {
  background-color: #000000;
  color: #fff;
  position: relative;
  overflow: hidden;
  /* Module handles its own spacing via CSS variables with mobile overrides */
  padding: var(--pad-top, 60px) var(--pad-sides, 20px) var(--pad-bottom, 60px) var(--pad-sides, 20px);
}

.cnc-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, var(--overlay-opacity, 0.5));
  pointer-events: none;
  z-index: 1;
}

.cnc-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.cnc-header {
  text-align: center;
  margin-bottom: 30px;
}

.cnc-title {
  margin: 0;
  font-weight: 500;
  color: #ffffff;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Navigation Tabs */
.cnc-nav-wrap { position: relative; }
.cnc-nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  position: relative;
}
.cnc-nav-controls { display: none; gap: 10px; }

/* Circular mobile nav buttons (hidden by default; shown on mobile) */
.cnc-nav-prev, .cnc-nav-next {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.04) !important; /* subtle contrast on black */
  color: #ffffff !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  box-shadow: none;
}
/* Left/back Right/next button (accent green outline and icon) */
.cnc-nav-next, .cnc-nav-prev { color: #A8FF00 !important; border-color: #A8FF00 !important; }

.cnc-nav-prev::before, .cnc-nav-next::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.cnc-nav-prev::before { transform: rotate(-135deg); }
.cnc-nav-next::before { transform: rotate(45deg); }
.cnc-nav-prev svg, .cnc-nav-next svg { display: none; }

/* Disabled state for back button */
.cnc-nav-prev.is-disabled { color: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.4) !important; background: rgba(255,255,255,0.0) !important; }

/* Hover/active feedback (optional) */
@media (hover:hover) {
  .cnc-nav-prev:not(.is-disabled):hover { background: rgba(255,255,255,0.08); }
  .cnc-nav-next:hover { background: rgba(168,255,0,0.08); }
}

.cnc-tab {
  background: none !important;
  border: 2px solid transparent !important;
  border-radius: 25px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  outline: none !important;
  font-size: 1.2rem;
  padding: 10px 20px 12px 20px!important;
  flex: 0 0 auto;
}

.cnc-tab:hover {
  color: #A8FF00 !important;
  background-color: transparent !important;
  border: 2px solid transparent !important;
}

.cnc-tab:focus {
  background-color: transparent !important;
  border: 2px solid transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  outline: none !important;
}

.cnc-tab--active {
  color: #A8FF00 !important;
  border-color: #A8FF00 !important;
  background: transparent !important;
}

.cnc-tab--active:focus {
  color: #A8FF00 !important;
  border-color: #A8FF00 !important;
  background: transparent !important;
  outline: none !important;
}

.cnc-tab--active:hover {
  color: #A8FF00 !important;
  border-color: #A8FF00 !important;
  background: transparent !important;
}

/* Tab Content */
.cnc-content {
  position: relative;
}

.cnc-tab-content {
  display: none;
}

.cnc-tab-content--active {
  display: block;
}

/* Standard Layout (Video + Quote) */
.cnc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: top;
  min-height: 400px;
}

/* Video Section */
.cnc-video-section {
  position: relative;
}

.cnc-video-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.cnc-video-poster {
  display: block;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cnc-video-poster:hover {
  transform: scale(1.02);
}

.cnc-video-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Play button styles */
.cnc__img { display:block; width:100%; height:auto; border-radius: 16px; object-fit: cover; }
.cnc__play { position:absolute; inset:0; display:grid; place-items:center; transition: transform .2s ease, opacity .2s ease; }
.cnc__play--circle::before, .cvp__play--pill::before { content:""; position:absolute; width:65px; height:65px; border-radius:9999px; border: 3px solid #fff; background: rgba(255,255,255,.20); }
.cnc__play--pill::before { width:128px; height:64px; border-radius:9999px; }
.cnc__icon { width:60px; height:60px; fill:#fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.cnc__play--triangle::before { content:none; }

/* Quote Section */
.cnc-quote-section {
  padding-left: 40px;
}

.cnc-quote-content {
  max-width: 500px;
}

.cnc-quote {
  font-weight: 500;
  margin: 0 0 30px 0;
  color: #ffffff;
  padding-left: 0px;
  quotes: """ """ "'" "'";
}

.cnc-quote::before {
  content: open-quote;
}

.cnc-quote::after {
  content: close-quote;
}

.cnc-signature {
  margin-bottom: 30px;
}

.cnc-signature-image {
  height: 60px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}

.cnc-tagline {
  color: rgba(255, 255, 255, 0.7);
}

/* Button styles handled by global theme classes: c-btn c-btn--primary */

/* AndMore Layout (Conditions Grid) */
.cnc-conditions-grid {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr);*/
  grid-template-columns: 1fr 1fr; /* Creates two columns, each taking 1/2 of the available space */
  gap: 24px 30px;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0;
}

.cnc-condition-item {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

.cnc-andmore-cta {
  text-align: center;
  margin-top: 40px;
}

/* Mobile */
@media (max-width: 768px) {
  .cnc-header { text-align: left; margin-bottom: 30px; }
  .cnc-title { font-size: 32px; margin-bottom: 40px; }
  /* Apply mobile-specific top/bottom spacing when provided */
  .cnc-module { padding-top: var(--pad-top-mobile, var(--pad-top, 60px)); padding-bottom: var(--pad-bottom-mobile, var(--pad-bottom, 60px)); }

  .cnc-nav-wrap { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: top; gap: 12px; }
  .cnc-nav { gap: 12px; margin-bottom: 40px; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }

  /* Only show active tab on mobile */
  .cnc-nav .cnc-tab { display: none; }
  .cnc-nav .cnc-tab.cnc-tab--active { display: inline-flex; }

  /* Controls group on the right */
  .cnc-nav-controls { display: inline-flex; }
  .cnc-nav-prev, .cnc-nav-next { display: inline-flex; }
  .cnc-nav-next { padding-right: 6px; }
  .cnc-nav-prev { padding-left: 6px; }
  .cnc-nav-prev.is-disabled { opacity: 0.5; pointer-events: none; }

  .cnc-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }

  .cnc-tab--active {
    color: #A8FF00 !important;
    border-color: #A8FF0000 !important;
    border: 0px none;
    background: transparent !important;
    font-size: 1.5rem !important;
    padding: 10px 20px 12px 0px!important;
    text-align: left;
  }

  .cnc-conditions-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .cnc-tab { font-size: 1rem; }
  .cnc-nav { gap: 0px; }
}

  .cnc-quote-section {
    padding-left: 0;
  }

  .cnc-quote {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .cnc-signature {
    margin-bottom: 30px;
  }

  .cnc-play-button {
    width: 60px;
    height: 60px;
  }

  .cnc-play-icon {
    width: 24px;
    height: 24px;
  }

  .cnc-condition-item {
    font-size: 16px;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .cnc-tab {
    font-size: 1.2rem;
    padding: 10px 20px 12px 20px!important;
  }

  .cnc-title {
    font-size: 28px;
  }

  .cnc-quote {
    font-size: 16px;
  }

  .cnc-button {
    padding: 14px 28px;
    font-size: 14px;
  }
}

/* Animation for tab transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cnc-tab-content--active {
  animation: fadeIn 0.5s ease forwards;
}