/* Colorful Blob Button - scoped version
   Source idea: Uiverse.io by adamgiebl, adapted for project-wide usage
*/

.color-blob-btn {
  position: relative;
  font-family: inherit;
  font-size: 16px;
  border-radius: 40em;
  height: 3em;
  line-height: 3em;
  padding: 0 1.6em;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  border: none;
  display: inline-block;
  text-decoration: none;
  background: transparent !important;
  box-shadow: none;
  z-index: 1; /* ensure blobs (z=0) are visible inside */
}

/* Ensure inner layout is centered, supports icons + text */
.color-blob-btn .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 40em;
  border: none;
  background: linear-gradient(
    rgba(255, 255, 255, 0.25),
    rgba(150, 150, 150, 0.15)
  );
  z-index: 2; /* keep text layer above blobs */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0 0.4em;
  color: #fff !important;
}

/* Ensure all inner elements/icons stay white */
.color-blob-btn,
.color-blob-btn .text,
.color-blob-btn .text *,
.color-blob-btn i,
.color-blob-btn svg {
  color: #fff !important;
  fill: #fff !important;
}

.color-blob-btn .blob {
  position: absolute;
  z-index: 0;
  border-radius: 5em;
  width: 5em;
  height: 3em;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.color-blob-btn .blob:nth-child(2) {
  left: 0em;
  top: 0;
  background: #ff930f;
}

.color-blob-btn .blob:nth-child(3) {
  left: 1.8em;
  top: 0;
  z-index: 0;
  background: #bf0fff;
}

.color-blob-btn .blob:nth-child(4) {
  left: 4em;
  top: -1em;
  background: #ff1b6b;
}

.color-blob-btn .blob:nth-child(5) {
  left: 4.3em;
  top: 1.6em;
  background: #0061ff;
}

.color-blob-btn:hover .blob:nth-child(2) {
  background: #0061ff;
}

.color-blob-btn:hover .blob:nth-child(3) {
  background: #ff1b6b;
}

.color-blob-btn:hover .blob:nth-child(4) {
  background: #bf0fff;
}

.color-blob-btn:hover .blob:nth-child(5) {
  background: #ff930f;
}

.color-blob-btn:hover .blob {
  transform: scale(1.3);
}

.color-blob-btn:active {
  border: 2px solid white;
}

/* Compact variant (many existing buttons use .compact) */
.color-blob-btn.compact {
  height: 2.4em;
  line-height: 2.4em;
}

/* Disabled states */
.color-blob-btn[disabled],
.color-blob-btn.disabled,
.color-blob-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove default button focus outlines but keep accessible focus ring */
.color-blob-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.25);
}

/* Pagination info text should stay dark (not themed white) */
.pagination-container > span,
.pagination > span,
.pagination-section .pagination-info,
.pagination-controls .page-info,
.page-info,
.pagination-info {
  color: #1f2329 !important; /* use theme text color (near-black) */
} 

/* ================= Uiverse.io Ali-Tahmazi99 - Skew Fill Button (flexible) ================ */
.uiverse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0 1rem;
  min-width: 6rem;
  height: 2.75em;
  border-radius: 10px;
  border: none !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in;
  z-index: 1;
  background: transparent !important;
  color: #03045e !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* allow anchors to behave like buttons */
.uiverse-btn:where(a) { display: inline-flex; }

.uiverse-btn > span {
  color: #03045e;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: all 0.3s ease-in;
}

.uiverse-btn::before,
.uiverse-btn::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  transform: skew(15deg);
  transition: all 0.5s;
  overflow: hidden;
  z-index: -1;
}

.uiverse-btn::before {
  left: -10px;
  background: #240046 !important;
}

.uiverse-btn::after {
  right: -10px;
  background: #5a189a !important;
}

.uiverse-btn:hover::before,
.uiverse-btn:hover::after {
  width: 58%;
}

.uiverse-btn:hover > span,
.uiverse-btn:hover { color: #e0aaff; }

/* compact variant for small icon buttons/pagination */
.uiverse-btn.compact {
  min-width: 4.5em;
  height: 2.2em;
  padding: 0 0.8rem;
  border: none !important;
  box-shadow: none !important;
}

/* disabled */
.uiverse-btn[disabled],
.uiverse-btn.disabled,
.uiverse-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* icons inside */
.uiverse-btn i, .uiverse-btn svg { color: currentColor; fill: currentColor; }

/* keep pagination info dark */
.pagination-container > span,
.pagination > span,
.pagination-section .pagination-info,
.pagination-controls .page-info,
.page-info,
.pagination-info {
  color: #1f2329 !important;
}