/* NIXBOT Uiverse marketplace: archived source declarations reproduced verbatim per component.
 * Scoped to original component roots to avoid collisions with retained Printful controls.
 * Component HTML is sourced from docs/uiverse-vault/components/. MIT attribution preserved there.
 */
/* UIVERSE_USE("satyamchaudharydev/plastic-bobcat-37") */
@scope ([data-uiverse-component="satyamchaudharydev/plastic-bobcat-37"]) {
/* From Uiverse.io by satyamchaudharydev - Tags: input */
/* From uiverse.io by @satyamchaudharydev */
/* removing default style of button */

.form button {
  border: none;
  background: none;
  color: #8b8ba7;
}
/* styling of whole input container */
.form {
  --timing: 0.3s;
  --width-of-input: 200px;
  --height-of-input: 40px;
  --border-height: 2px;
  --input-bg: #fff;
  --border-color: #2f2ee9;
  --border-radius: 30px;
  --after-border-radius: 1px;
  position: relative;
  width: var(--width-of-input);
  height: var(--height-of-input);
  display: flex;
  align-items: center;
  padding-inline: 0.8em;
  border-radius: var(--border-radius);
  transition: border-radius 0.5s ease;
  background: var(--input-bg,#fff);
}
/* styling of Input */
.input {
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  height: 100%;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
}
/* styling of animated border */
.form:before {
  content: "";
  position: absolute;
  background: var(--border-color);
  transform: scaleX(0);
  transform-origin: center;
  width: 100%;
  height: var(--border-height);
  left: 0;
  bottom: 0;
  border-radius: 1px;
  transition: transform var(--timing) ease;
}
/* Hover on Input */
.form:focus-within {
  border-radius: var(--after-border-radius);
}

input:focus {
  outline: none;
}
/* here is code of animated border */
.form:focus-within:before {
  transform: scale(1);
}
/* styling of close button */
/* == you can click the close button to remove text == */
.reset {
  border: none;
  background: none;
  opacity: 0;
  visibility: hidden;
}
/* close button shown when typing */
input:not(:placeholder-shown) ~ .reset {
  opacity: 1;
  visibility: visible;
}
/* sizing svg icons */
.form svg {
  width: 17px;
  margin-top: 3px;
}

}

/* UIVERSE_USE("dexter-st/fuzzy-dog-81") */
@scope ([data-uiverse-component="dexter-st/fuzzy-dog-81"]) {
.btn-wrapper {
  --dot-size: 6px;
  --line-weight: 1px;
  --line-distance: 0.9rem 1.1rem;
  --animation-speed: 0.35s;
  --dot-color: #666;
  --line-color: #999;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: var(--line-distance);
  background-color: #0000;
  transition: background-color 0.3s ease-in-out;
  user-select: none;
}

.btn-wrapper:has(.btn:hover) {
  animation: backround-color-change calc(var(--animation-speed) * 4) ease-in-out
    forwards;
}
@keyframes backround-color-change {
  80% {
    background-color: #0000;
  }
  100% {
    background-color: #e5ff0055;
  }
}

.btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 1.25rem;
  background-color: #e5ff00;
  background-image: linear-gradient(#0000, #0004);
  border: none;

  color: #0008;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: capitalize;

  border-radius: 30% / 200%;
  cursor: pointer;

  box-shadow:
    0 0 0px 1px #0003,
    0px 1px 1px rgba(3, 7, 18, 0.02),
    0px 5px 4px rgba(3, 7, 18, 0.04),
    0px 12px 9px rgba(3, 7, 18, 0.06),
    0px 20px 15px rgba(3, 7, 18, 0.08),
    0px 32px 24px rgba(3, 7, 18, 0.1);

  transition:
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    border-radius 0.3s ease-in-out,
    border-color 0.2s ease-in-out;
}

.btn:hover {
  background-color: #fff;
  transform: scale(1.05);
  border-radius: 10% / 200%;
}
.btn:active {
  background-color: #e5ff00;
  transform: scale(0.98);
  border-radius: 20% / 200%;
}

.btn-svg {
  margin-left: 0.5rem;
  height: 24px;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #0007;
  fill: #fffa;
  transition: all 0.3s ease-in-out;
}

.btn:hover .btn-svg {
  stroke: #0008;
  fill: #e5ff00;
}
.btn:active .btn-svg {
  stroke: #0009;
  fill: #f1ff76;
}

/* Dots */
.dot {
  position: absolute;
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--dot-color);
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.btn-wrapper:has(.btn:hover) .dot.top.left {
  top: 50%;
  left: 20%;
  animation: move-top-left var(--animation-speed) ease-in-out forwards;
}
@keyframes move-top-left {
  90% {
    opacity: 0.6;
  }
  100% {
    top: calc(var(--dot-size) * -0.5);
    left: calc(var(--dot-size) * -0.5);
    opacity: 1;
  }
}
.btn-wrapper:has(.btn:hover) .dot.top.right {
  top: 50%;
  right: 20%;
  animation: move-top-right var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 0.6);
}
@keyframes move-top-right {
  80% {
    opacity: 0.6;
  }
  100% {
    top: calc(var(--dot-size) * -0.5);
    right: calc(var(--dot-size) * -0.5);
    opacity: 1;
  }
}
.btn-wrapper:has(.btn:hover) .dot.bottom.right {
  bottom: 50%;
  right: 20%;
  animation: move-bottom-right var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 1.2);
}
@keyframes move-bottom-right {
  80% {
    opacity: 0.6;
  }
  100% {
    bottom: calc(var(--dot-size) * -0.5);
    right: calc(var(--dot-size) * -0.5);
    opacity: 1;
  }
}
.btn-wrapper:has(.btn:hover) .dot.bottom.left {
  bottom: 50%;
  left: 20%;
  animation: move-bottom-left var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 1.8);
}
@keyframes move-bottom-left {
  80% {
    opacity: 0.6;
  }
  100% {
    bottom: calc(var(--dot-size) * -0.5);
    left: calc(var(--dot-size) * -0.5);
    opacity: 1;
  }
}

/* Lines */
.line {
  position: absolute;
  transition: all 0.3s ease-in-out;
}
.line.horizontal {
  height: var(--line-weight);
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    #0000 0 calc(var(--line-weight) * 2),
    var(--line-color) calc(var(--line-weight) * 2) calc(var(--line-weight) * 4)
  );
}
.line.top {
  top: calc(var(--line-weight) * -0.5);
}
.line.bottom {
  bottom: calc(var(--line-weight) * -0.5);
}
.line.vertical {
  width: var(--line-weight);
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    #0000 0 calc(var(--line-weight) * 2),
    var(--line-color) calc(var(--line-weight) * 2) calc(var(--line-weight) * 4)
  );
}
.line.left {
  left: calc(var(--line-weight) * -0.5);
}
.line.right {
  right: calc(var(--line-weight) * -0.5);
}

.line.top {
  transform-origin: top left;
  transform: rotate(5deg) scaleX(0);
}
.btn-wrapper:has(.btn:hover) .line.top {
  animation: draw-top var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 0.8);
}
@keyframes draw-top {
  100% {
    transform: rotate(0deg) scaleX(1);
  }
}
.line.bottom {
  transform-origin: bottom right;
  transform: rotate(5deg) scaleX(0);
}
.btn-wrapper:has(.btn:hover) .line.bottom {
  animation: draw-bottom var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 2);
}
@keyframes draw-bottom {
  100% {
    transform: rotate(0deg) scaleX(1);
  }
}

.line.left {
  transform-origin: bottom left;
  transform: rotate(0deg) scaleY(0);
}
.btn-wrapper:has(.btn:hover) .line.left {
  animation: draw-left var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 2.4);
}
@keyframes draw-left {
  100% {
    transform: rotate(0deg) scaleY(1);
  }
}

.line.right {
  transform-origin: top right;
  transform: rotate(5deg) scaleY(0);
}
.btn-wrapper:has(.btn:hover) .line.right {
  animation: draw-right var(--animation-speed) ease-in-out forwards;
  animation-delay: calc(var(--animation-speed) * 1.4);
}
@keyframes draw-right {
  100% {
    transform: rotate(0deg) scaleY(1);
  }
}

}

/* UIVERSE_USE("Galahhad/heavy-dog-14") */
@scope ([data-uiverse-component="Galahhad/heavy-dog-14"]) {
/* From Uiverse.io by Galahhad - Source: https://mui.com/material-ui/react-switch/ - Tags: material design, switch, light&dark */
/* switch settings 👇 */

.ui-switch {
  /* switch */
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 48px;
  --switch-height: 20px;
  /* circle */
  --circle-diameter: 32px;
  --circle-bg: rgb(0, 56, 146);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
  display: none;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  ;
}

.slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}

}

/* UIVERSE_USE("vinodjangid07/heavy-badger-29") */
@scope ([data-uiverse-component="vinodjangid07/heavy-badger-29"]) {
/* From Uiverse.io by vinodjangid07  - Tags: button, save, hover effect, click effect, bookmark */
.bookmarkBtn {
  width: 100px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.349);
  background-color: rgb(12, 12, 12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
}

.IconContainer {
  width: 30px;
  height: 30px;
  background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: 0.3s;
}

.icon {
  border-radius: 1px;
}

.text {
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
  transition-duration: 0.3s;
  font-size: 1.04em;
}

.bookmarkBtn:hover .IconContainer {
  width: 90px;
  transition-duration: 0.3s;
}

.bookmarkBtn:hover .text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  transition-duration: 0.3s;
}

.bookmarkBtn:active {
  transform: scale(0.95);
  transition-duration: 0.3s;
}

}

/* UIVERSE_USE("Yaya12085/quiet-bear-76") */
@scope ([data-uiverse-component="Yaya12085/quiet-bear-76"]) {
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  box-sizing: border-box;
  display: flex;
  max-width: 320px;
  background-color: rgba(255, 255, 255, 1);
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.081);
}

.date-time-container {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  padding: 0.5rem;
}

.date-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 1rem;
  gap: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 1);
}

.separator {
  width: 1px;
  flex: 1 1 0%;
  background-color: rgba(17, 24, 39, 0.1);
}

.content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
}

.infos {
  border-left: 1px solid rgba(17, 24, 39, 0.1);
  padding: 1rem;
}

.title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18.72px;
  color: rgba(17, 24, 39, 1);
}

.description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(55, 65, 81, 1);
}

.action {
  display: block;
  background-color: rgba(253, 224, 71, 1);
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 1);
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.action:hover {
  background-color: rgba(250, 204, 21, 1);
}

}