.demo-section {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bs-tertiary-bg);
}

.chip {
  display: inline-block;
  padding: .2rem .5rem;
  border: 0px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: .875rem;
  white-space: nowrap;
}

.demo-tabbox {
  border-color: var(--bs-border-color) !important;
}

/* --- Trigger pill (native-ish chip) --- */
.theme-pill{
  border: 1px solid var(--bs-border-color);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .45rem .65rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
:root[data-bs-theme="light"] .theme-pill{
  background: rgba(0,0,0,.03);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.theme-pill:active{ transform: translateY(0.5px); }

.theme-icon-wrap{
  width: 2rem;
  height: 2rem;
  border-radius: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
}
:root[data-bs-theme="light"] .theme-icon-wrap{
  background: rgba(0,0,0,.05);
}

/* caret as small iOS-like chevron */
.theme-caret{
  width:.55rem;
  height:.55rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  opacity:.65;
  margin-left:.1rem;
}

/* --- Dropdown as "sheet" --- */
.theme-sheet{
  border-radius: 1.1rem;
  padding: .4rem;
  border: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 16rem;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
:root[data-bs-theme="light"] .theme-sheet{
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

/* Bigger tap targets like mobile pickers */
.theme-item{
  border-radius: .95rem;
  padding: .85rem .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.theme-item:hover{ background: rgba(255,255,255,.06); }
:root[data-bs-theme="light"] .theme-item:hover{ background: rgba(0,0,0,.04); }

.theme-item-main{ font-weight: 600; }
.theme-item-sub{
  margin-left: auto;
  font-size: .85rem;
  opacity: .7;
}

/* Selected: looks like native "highlight row" */
.dropdown-item.active.theme-item,
.theme-item[aria-selected="true"]{
  background: rgba(199,204,214,.18);
}

/* Reset item softer */
.theme-reset-item{
  opacity: .85;
}

.icon-btn:hover {
  background-color: rgba(255,255,255,.06);
}
:root[data-bs-theme="light"] .icon-btn:hover {
  background-color: rgba(0,0,0,.06);
}