/**
 * KO Interactivity Components
 */

/* Carousel */
.ko-carousel { position: relative; }
.ko-carousel-container { position: relative; overflow: hidden; }
.ko-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.ko-carousel-slide { flex: 0 0 100%; min-width: 100%; }

.ko-carousel-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--contrast, #333);
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #333);
  cursor: pointer; transition: all 0.2s ease;
}
.ko-carousel-nav:hover {
  background: var(--wp--preset--color--contrast, #333);
  color: var(--wp--preset--color--base, #fff);
}

.ko-carousel-dots { display: flex; gap: 0.5rem; justify-content: center; }
.ko-carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: var(--wp--preset--color--contrast, #333);
  opacity: 0.3; cursor: pointer; padding: 0; transition: all 0.2s ease;
}
.ko-carousel-dot:hover { opacity: 0.6; }
.ko-carousel-dot.active { opacity: 1; transform: scale(1.2); }

/* Accordion */
.ko-accordion-trigger {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: none; padding: 0;
  cursor: pointer; text-align: left; font-family: inherit;
}
.ko-accordion-icon { transition: transform 0.3s ease; flex-shrink: 0; }
.ko-accordion-icon.is-open { transform: rotate(180deg); }
.ko-accordion-content {
  overflow: hidden; max-height: 0; transition: max-height 0.3s ease;
}
.ko-accordion-content.is-open { max-height: 500px; }

/* Tabs */
.ko-tabs-nav { display: flex; gap: 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.ko-tab-button {
  padding: 0.75rem 1.5rem; border: none; background: none; cursor: pointer;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  color: var(--wp--preset--color--contrast, #333); opacity: 0.6;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 0.3s ease;
}
.ko-tab-button:hover { opacity: 0.8; }
.ko-tab-button.active {
  opacity: 1; border-bottom-color: var(--wp--preset--color--primary, #0066cc);
}
.ko-tab-panel { display: none; animation: koFadeIn 0.3s ease; }
.ko-tab-panel.active { display: block; }

@keyframes koFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .ko-carousel-nav { width: 40px; height: 40px; }
  .ko-tabs-nav { flex-wrap: wrap; justify-content: center; }
  .ko-tab-button { padding: 0.5rem 1rem; font-size: 0.875rem; }
}