/* ── Content Toggle Widget ──────────────────────────────────────────────── */

/* Header */
.pkae-ct__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Stack layout */
.pkae-ct--layout-stack .pkae-ct__header {
  flex-direction: column;
}

/* Labels */
.pkae-ct__label {
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .25s;
  user-select: none;
}
.pkae-ct__label.pkae-ct--active { font-weight: 700; }

/* ── Switch base ─────────────────────────────────────────────────────────── */
.pkae-ct__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 28px;
  background-color: #ccc;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .3s;
  padding: 0;
  flex-shrink: 0;
}
.pkae-ct__switch.pkae-ct--active { background-color: #6040e0; }

/* Knob */
.pkae-ct__knob {
  position: absolute;
  left: 3px;
  width: calc(28px - 6px);
  height: calc(28px - 6px);
  background: #fff;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.pkae-ct__switch.pkae-ct--active .pkae-ct__knob {
  transform: translateX(calc(56px - 28px));
}

/* Square style */
.pkae-ct--square .pkae-ct__switch { border-radius: 4px; }
.pkae-ct--square .pkae-ct__knob   { border-radius: 2px; }

/* Label style switch */
.pkae-ct--label .pkae-ct__switch {
  width: auto;
  min-width: 80px;
  padding: 3px 10px;
  border-radius: 999px;
  justify-content: center;
}
.pkae-ct--label .pkae-ct__knob { display: none; }
.pkae-ct--label .pkae-ct__switch-label {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  transition: opacity .2s;
}
.pkae-ct--label .pkae-ct__switch-label--on  { display: none; }
.pkae-ct--label .pkae-ct__switch-label--off { display: block; }
.pkae-ct--label .pkae-ct__switch.pkae-ct--active .pkae-ct__switch-label--on  { display: block; }
.pkae-ct--label .pkae-ct__switch.pkae-ct--active .pkae-ct__switch-label--off { display: none; }

/* ── Content panes ───────────────────────────────────────────────────────── */
.pkae-ct__pane {
  display: none;
}
.pkae-ct__pane.pkae-ct--active {
  display: block;
}

/* Animation */
.pkae-ct--animated .pkae-ct__pane.pkae-ct--active {
  animation: pkae-ct-fadein .35s ease;
}
@keyframes pkae-ct-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Items (Repeater) ───────────────────────────────────────────────────── */
.pkae-ct__items {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

/* ── Item base ───────────────────────────────────────────────────────────── */
.pkae-ct__item {
  display: flex;
  gap: 1rem;
}

/* Icon/Image position: left (default) */
.pkae-ct__item--icon-left  { flex-direction: row; align-items: flex-start; }
/* right */
.pkae-ct__item--icon-right { flex-direction: row-reverse; align-items: flex-start; }
/* top */
.pkae-ct__item--icon-top   { flex-direction: column; align-items: flex-start; }
/* bottom */
.pkae-ct__item--icon-bottom { flex-direction: column-reverse; align-items: flex-start; }

/* Media wrapper */
.pkae-ct__item-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
}
.pkae-ct__item-media i   { font-size: inherit; }
.pkae-ct__item-media svg { width: 1.5em; height: 1.5em; display: block; }
.pkae-ct__item-media img {
  display: block;
  max-width: 60px;
  height: auto;
  border-radius: 4px;
}

.pkae-ct__item-body { flex: 1; }

.pkae-ct__item-title {
  margin: 0 0 .35em;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.pkae-ct__item-desc {
  margin: 0 0 .6em;
  font-size: .9rem;
  line-height: 1.5;
  opacity: .8;
}

.pkae-ct__item-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .45rem 1.1rem;
  border-radius: 4px;
  background: #6040e0;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}
.pkae-ct__item-btn:hover { opacity: .85; }