/* style.css - Estilos gerais + card */

/* Estilos gerais da página */
body {
  margin: 0;
  background: radial-gradient(circle at 20% 30%, #151515, #0d0d0d);
  color: #e5e5e5;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 40px;
  user-select: none;
  box-sizing: border-box;
}

/* Title */
h1 {
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  background: linear-gradient(90deg, #ff7096, #ffc773, #6cd6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tabs system */
.glass-radio-group {
  --bg: rgba(255, 255, 255, 0.06);
  --text: #e5e5e5;

  display: flex;
  position: relative;
  background: var(--bg);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.2),
    inset -1px -1px 6px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: fit-content;
  margin-bottom: 40px;
}

.glass-radio-group input {
  display: none;
}

.glass-radio-group label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  font-size: 15px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
  position: relative;
  z-index: 2;
  transition: color 0.3s ease-in-out;
}

.glass-radio-group label:hover {
  color: white;
}

.glass-radio-group input:checked + label {
  color: #fff;
}

.glass-glider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 3);
  border-radius: 1rem;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    background 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
}

/* Tabs themes */
#tab-join:checked ~ .glass-glider {
  transform: translateX(0%);
  background: linear-gradient(135deg, #ffb6b655, #ff7096);
  box-shadow:
    0 0 18px rgba(255, 112, 150, 0.5),
    0 0 10px rgba(255, 210, 230, 0.4) inset;
}

#tab-members:checked ~ .glass-glider {
  transform: translateX(100%);
  background: linear-gradient(135deg, #ffd70055, #ffcc00);
  box-shadow:
    0 0 18px rgba(255, 215, 0, 0.5),
    0 0 10px rgba(255, 235, 150, 0.4) inset;
}

#tab-badge:checked ~ .glass-glider {
  transform: translateX(200%);
  background: linear-gradient(135deg, #b8e1ff55, #80caff);
  box-shadow:
    0 0 18px rgba(160, 216, 255, 0.5),
    0 0 10px rgba(200, 240, 255, 0.4) inset;
}

/* Content area */
.content {
  width: 80%;
  max-width: 700px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
  padding: 30px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 1px 1px 4px rgba(255, 255, 255, 0.05);
}

.section {
  display: none;
}
.section.active {
  display: block;
}

a {
  color: #ffd770;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Badge */
.badge {
  display: inline-block;
  border: 1px solid #ff7096;
  padding: 6px 10px;
  border-radius: 8px;
  color: #ff7096;
  font-weight: 600;
  font-family: "Segoe UI", sans-serif;
  letter-spacing: 0.5px;
}
.badge:hover {
  background: rgba(255, 112, 150, 0.1);
}

/* Uiverse editor badge */
.code-editor {
  max-width: 300px;
  background-color: #1d1e22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 2px;
  margin-top: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}

.title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: rgb(212 212 212);
}

.icon {
  width: 20px;
  transition: .2s ease;
}
.icon:hover {
  cursor: pointer;
  border-radius: 50px;
  background-color: #6e7281;
}

.editor-content {
  margin: 0 10px 10px;
  color: white;
}

.property { margin-left: 30px; }
.property:hover { cursor: text; }

.editor-content .color-0 { color: rgb(86 156 214); }
.editor-content .color-1 { color: rgb(182 206 168); }
.editor-content .color-2 { color: rgb(156 220 254); }
.editor-content .color-3 { color: rgb(207 146 120); }
.color-preview-1,.color-preview-2 { height: 8px; width: 8px; border: 1px solid #fff; display: inline-block; margin-right: 3px; }
.color-preview-1 { background-color: rgba(0,0,0,0.5); }
.color-preview-2 { background-color: #fff; }

/* Star loader animation */
.star-loader {
  --fill-color: #ff80c0;
  --shine-color: #ff80c033;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  position: relative;
  margin-right: 10px;
}

.star-loader svg {
  position: absolute;
  top: 0;
  left: 0;
  fill: var(--fill-color);
  filter: drop-shadow(0 0 6px var(--shine-color));
  animation: star-spin 1.6s linear infinite;
}

.star-loader svg:nth-child(2) {
  animation-delay: 0.3s;
  opacity: 0.8;
}
.star-loader svg:nth-child(3) {
  animation-delay: 0.6s;
  opacity: 0.6;
}

@keyframes star-spin {
  0% { transform: rotate(0deg) scale(1); opacity: 0.7; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
}

/* Title with star */
h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 2.3rem;
  color: #ffb6d9;
  text-shadow: 0 0 10px rgba(255, 160, 200, 0.5);
  letter-spacing: -0.5px;
  margin: 0;
}

/* Button styles */
.btn-wrapper {
  position: relative;
  display: inline-block;
}

.btn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: #101010;
  --highlight-color-hue: 210deg;

  user-select: none;
  display: flex;
  justify-content: center;
  padding: 0.5em 0.5em 0.5em 1.1em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 1em;
  font-weight: 400;
  background-color: var(--button-color);
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2),
              inset 0px 2px 2px rgba(255, 255, 255, 0.15),
              inset 0px 4px 4px rgba(255, 255, 255, 0.1),
              inset 0px 8px 8px rgba(255, 255, 255, 0.05),
              inset 0px 16px 16px rgba(255, 255, 255, 0.05),
              0px -1px 1px rgba(0, 0, 0, 0.02),
              0px -2px 2px rgba(0, 0, 0, 0.03),
              0px -4px 4px rgba(0, 0, 0, 0.05),
              0px -8px 8px rgba(0, 0, 0, 0.06),
              0px -16px 16px rgba(0, 0, 0, 0.08);
  border: solid 1px #fff2;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
}
.btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow: 0 -8px 8px -6px #0000 inset,
              0 -16px 16px -8px #00000000 inset,
              1px 1px 1px #fff2,
              2px 2px 2px #fff1,
              -1px -1px 1px #0002,
              -2px -2px 2px #0001;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent);
  background-position: 0 0;
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}
.btn-letter {
  position: relative;
  display: inline-block;
  color: #fff5;
  animation: letter-anim 2s ease-in-out infinite;
  transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}
@keyframes letter-anim {
  50% { text-shadow: 0 0 3px #fff8; color: #fff; }
}
.btn-svg {
  flex-grow: 1;
  height: 24px;
  margin-right: 0.5rem;
  fill: #e8e8e8;
  animation: flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px #fff9);
  transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}
@keyframes flicker {
  50% { opacity: 0.3; }
}
.txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; }
.txt-1, .txt-2 { position: absolute; word-spacing: -1em; }
.txt-1 { animation: appear-anim 1s ease-in-out forwards; }
.txt-2 { opacity: 0; }
@keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } }
.btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); }
.btn:hover::before {
  box-shadow: 0 -8px 8px -6px #fffa inset,
              0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
              1px 1px 1px #fff2,
              2px 2px 2px #fff1,
              -1px -1px 1px #0002,
              -2px -2px 2px #0001;
}
.btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); }
.btn:hover .btn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009);
  animation: none;
}

/* Estilos do Card (do Uiverse.io by MuhammadHasann) */
.card {
  --white: hsl(0, 0%, 100%);
  --black: hsl(240, 15%, 9%);
  --paragraph: hsl(0, 0%, 83%);
  --line: hsl(240, 9%, 17%);
  --primary: hsl(266, 92%, 58%);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.5rem;
  width: 19rem;
  background-color: hsla(240, 15%, 9%, 1);
  background-image: radial-gradient(
      at 88% 40%,
      hsla(240, 15%, 9%, 1) 0px,
      transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%);
  border-radius: 1rem;
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  margin: 0 auto;
}

.card .card__border {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );
  border-radius: 1rem;
}

.card .card__border::before {
  content: "";
  pointer-events: none;
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%), rotate(0deg);
  transform-origin: left;
  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(277, 95%, 60%) 40%,
    hsl(277, 95%, 60%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );
  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.card .card_title__container .card_title {
  font-size: 1.2rem;
  color: var(--white);
  font-weight: bold;
}

.card .card_title__container .card_paragraph {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 0.75rem;
  color: var(--paragraph);
  line-height: 1.4;
}

.card .line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--line);
  border: none;
}

/* Estilos do botão com animação */
.card-button {
  cursor: pointer;
  padding: 0.6rem 1.5rem;
  width: 100%;
  background-image: linear-gradient(
    0deg,
    rgba(94, 58, 238, 1) 0%,
    rgba(197, 107, 240, 1) 100%
  );
  font-size: 0.75rem;
  color: var(--white);
  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 25px -4px var(--white);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(197, 107, 240, 0.4);
}

.card-button:active {
  transform: translateY(0);
}

/* Animações do botão */
.card-button .text {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.card-button .sending-text {
  display: none;
  opacity: 0;
}

.card-button.sending {
  background-image: linear-gradient(
    0deg,
    rgba(94, 58, 238, 0.9) 0%,
    rgba(197, 107, 240, 0.9) 100%
  );
}

.card-button.sending .text {
  opacity: 0;
}

.card-button.sending .sending-text {
  display: inline-block;
  opacity: 1;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Efeito de loading */
.card-button.sending::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Lista dentro do card */
.card-list {
  color: var(--white);
  font-size: 0.75rem;
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  list-style-type: disc;
}

.card-list li {
  margin-bottom: 0.5rem;
}

.card-list li:last-child {
  margin-bottom: 0;
}

/* Estilos para o texto dentro do card */
.card-text {
  color: var(--paragraph);
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.4;
}

/* Container do botão no card */
.card-button-container {
  text-align: center;
  margin: 15px 0;
}

/* Members list */
#members ul {
  list-style: none;
  padding: 0;
}

#members li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#members li:last-child {
  border-bottom: none;
}