/*
 * CSLIB FB Iframe Slider
 * Rebuilt CSS v0.1.1
 * - Mobile-first
 * - Always fit iframe
 * - Responsive heights
 * - CSLIB colors & styling
 */

.cslib-fbifs {
  --cs-navy: #000080;
  --cs-federal: #00044A;
  --cs-gold: #FFD60A;
  --cs-amber: #FFBF1C;

  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding: 0.5rem;
  font-family: inherit;
  color: #fff;
}

/* ---------- Header (tabs + arrows) ---------- */
.cslib-fbifs-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
}

.cslib-fbifs-nav {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  padding: .3rem .6rem;
  border-radius: .75rem;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
}
.cslib-fbifs-nav:hover { opacity: .85; }

/* Tabs */
.cslib-fbifs-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cslib-fbifs-tabs .tab {
  background: var(--cs-federal);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: clamp(.8rem, 2vw, .95rem);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.cslib-fbifs-tabs .tab[aria-selected="true"] {
  outline: 2px solid var(--cs-gold);
}

/* ---------- Iframe Viewport ---------- */
.cslib-fbifs-view {
  position: relative;
  width: 100%;
  border-radius: var(--radius, 16px);
  overflow: hidden;
  box-shadow: var(--shadow, 0 8px 22px rgba(0,0,0,.25));
  background: #0b1028;
}

/* Responsive fixed-height strategy */
.cslib-fbifs-view {
  height: clamp(420px, 85vw, 720px);
}

@media (min-width: 600px) {
  .cslib-fbifs-view { height: clamp(480px, 70vw, 740px); }
}
@media (min-width: 980px) {
  .cslib-fbifs-view { height: 680px; }
}

.cslib-fbifs-view iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: inherit;
}

/* Skeleton loader */
.cslib-fbifs-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #1c2340 25%, #2a335a 50%, #1c2340 75%);
  background-size: 200% 100%;
  animation: cslib-shimmer 1.2s infinite;
}
@keyframes cslib-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Pagination & Controls ---------- */
.cslib-fbifs-dots {
  margin-top: .6rem;
  display: flex; gap: .45rem; justify-content: center; align-items: center;
}
.cslib-fbifs-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: #6d7bb7;
  opacity: .6;
  cursor: pointer;
}
.cslib-fbifs-dots button[aria-selected="true"] {
  opacity: 1;
  background: var(--cs-gold);
}

.cslib-fbifs-pause {
  display: inline-block;
  margin-top: .5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .3rem .6rem;
  border-radius: .5rem;
  cursor: pointer;
  font-size: .85rem;
}

/* ---------- Preset Colors (optional toggle) ---------- */
.cslib-fbifs.cslib-preset .cslib-fbifs-tabs .tab {
  background: var(--cs-federal);
}
.cslib-fbifs.cslib-preset .cslib-fbifs-nav {
  border-color: rgba(255,214,10,.35);
}
.cslib-fbifs { padding: 0.5rem; }
.cslib-fbifs-view { line-height: 0; }           /* prevents inline-gap ghost lines */
.cslib-fbifs-view iframe {
  display: block;                                /* removes inline whitespace */
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: inherit;
}
/* Hide tabs option */
.cslib-fbifs.no-tabs .cslib-fbifs-head {
  grid-template-columns: 1fr 1fr;
}
.cslib-fbifs.no-tabs .cslib-fbifs-tabs {
  display: none !important;
}
/* No header when tabs are off */
.cslib-fbifs.no-tabs .cslib-fbifs-head { display: none !important; }