@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
color: #fff;
overflow: hidden;
background: #000 url('https://uploads.zero-two-apis.com.br/uploads/images/file-1750385261546-568266352.jpeg') center center/cover no-repeat;
transition: transform 0.1s ease-out;
}

.background-container {
display: none;
}

.sakura-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
overflow: hidden;
}

.sakura {
position: absolute;
top: -10%;
width: 20px;
height: 20px;
background-image: url('https://uploads.zero-two-apis.com.br/uploads/images/file-1750388300549-154568808.png');
background-size: contain;
animation: fall linear infinite;
}

@keyframes fall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(105vh) rotate(720deg);
opacity: 0;
}
}

.starfield {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.star {
position: absolute;
border-radius: 50%;
background: white;
opacity: 0.7;
will-change: transform, opacity;
box-shadow: 0 0 6px 2px #fff, 0 0 20px 6px #e4077844;
transition: opacity 0.3s;
}

/* Remover estilos antigos de .stars, .stars2, .twinkling */
.stars, .stars2, .twinkling, .clouds {
display: none !important;
}

.container {
max-width: 500px;
margin: 50px auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(228, 7, 120, 0.7);
text-align: center;
border: 2px solid rgba(228, 7, 120, 0.7);
animation: float 6s ease-in-out infinite;
transition: transform 0.2s ease-out;
}

@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}

.header {
margin-bottom: 20px;
}

.profile-gif {
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #E40778;
box-shadow: 0 0 15px #E40778;
}

h1 {
font-size: 2.5em;
margin: 10px 0;
color: #E40778;
text-shadow: 0 0 10px #E40778;
position: relative;
cursor: pointer;
}

/* Glitch Effect */
h1:hover:before, h1:hover:after {
content: 'PAGAMENTO - KEY';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}

h1:hover:before {
left: 2px;
text-shadow: -2px 0 #ff00c1;
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

h1:hover:after {
left: -2px;
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
0% { clip-path: inset(5% 0 90% 0); }
10% { clip-path: inset(70% 0 15% 0); }
20% { clip-path: inset(95% 0 2% 0); }
30% { clip-path: inset(40% 0 45% 0); }
40% { clip-path: inset(80% 0 5% 0); }
50% { clip-path: inset(25% 0 60% 0); }
60% { clip-path: inset(50% 0 35% 0); }
70% { clip-path: inset(90% 0 3% 0); }
80% { clip-path: inset(30% 0 55% 0); }
90% { clip-path: inset(65% 0 20% 0); }
100% { clip-path: inset(92% 0 4% 0); }
}

@keyframes glitch-anim-2 {
0% { clip-path: inset(85% 0 10% 0); }
10% { clip-path: inset(5% 0 75% 0); }
20% { clip-path: inset(92% 0 3% 0); }
30% { clip-path: inset(50% 0 32% 0); }
40% { clip-path: inset(20% 0 70% 0); }
50% { clip-path: inset(88% 0 8% 0); }
60% { clip-path: inset(45% 0 40% 0); }
70% { clip-path: inset(95% 0 2% 0); }
80% { clip-path: inset(22% 0 65% 0); }
90% { clip-path: inset(75% 0 12% 0); }
100% { clip-path: inset(85% 0 5% 0); }
}

.subtitle {
font-size: 1.2em;
color: #fff;
margin-top: -10px;
display: block;
margin-bottom: 10px;
}

.form-container {
margin-bottom: 20px;
}

label {
font-size: 1.1em;
display: block;
margin-bottom: 10px;
}

/* ✅ Estilo para o input de nome da key */
#nomeKey {
width: 80%;
padding: 12px 20px;
font-size: 1em;
border-radius: 25px;
border: 2px solid #E40778;
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}

#nomeKey::placeholder {
color: rgba(255, 255, 255, 0.6);
}

#nomeKey:focus {
outline: none;
box-shadow: 0 0 15px #E40778;
border-color: #ff5ca7;
background-color: rgba(255, 255, 255, 0.15);
}

/* Hiding original select and container */
.select-container {
display: none;
}

/* Custom Select Box */
.custom-select-wrapper {
position: relative;
width: 80%;
margin: 0 auto;
}

.custom-select {
position: relative;
cursor: pointer;
}

.custom-select__trigger {
padding: 12px 20px;
font-size: 1em;
border-radius: 25px;
border: 2px solid #E40778;
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}

.custom-select__trigger:hover {
box-shadow: 0 0 10px #E40778;
}

.custom-options {
position: absolute;
top: 110%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid #E40778;
border-radius: 15px;
z-index: 10;
max-height: 200px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}

.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.custom-option {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-option:hover {
background-color: #E40778;
color: #fff;
}

.custom-option.selected {
background-color: #E40778;
color: #fff;
font-weight: 600;
}

.arrow {
position: relative;
height: 10px;
width: 10px;
}
.arrow::before, .arrow::after {
content: '';
position: absolute;
bottom: 0px;
width: 0.15rem;
height: 100%;
background-color: #E40778;
transition: all 0.3s ease;
}
.arrow::before {
left: -5px;
transform: rotate(-45deg);
}
.arrow::after {
left: 0px;
transform: rotate(45deg);
}
.custom-select.open .arrow::before {
left: -5px;
transform: rotate(45deg);
}
.custom-select.open .arrow::after {
left: 0px;
transform: rotate(-45deg);
}

/* Custom scrollbar for options */
.custom-options::-webkit-scrollbar {
width: 8px;
}
.custom-options::-webkit-scrollbar-track {
background: rgba(0,0,0,0.5);
border-radius: 10px;
}
.custom-options::-webkit-scrollbar-thumb {
background: #E40778;
border-radius: 10px;
}
.custom-options::-webkit-scrollbar-thumb:hover {
background: #ff1a8c;
}

select {
display: none; /* Keep original select for functionality but hide it */
}

.button {
background: #E40778;
color: #fff;
border: none;
padding: 15px 30px;
font-size: 1.2em;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 0 10px #E40778;
display: inline-flex;
align-items: center;
gap: 10px;
}

.button:hover {
background: #ff1a8c;
box-shadow: 0 0 20px #ff1a8c;
transform: scale(1.05);
}

#qrCodeContainer {
margin-top: 20px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
}

#qrCodeImage {
max-width: 100%;
border-radius: 10px;
margin-bottom: 15px;
}

#statusPagamento {
font-size: 1.1em;
color: #E40778;
}

footer {
text-align: center;
padding: 20px;
color: #aaa;
}

/* Responsividade */
@media (max-width: 600px) {
.container {
margin: 20px;
padding: 20px;
}

h1 {
font-size: 2em;
}

.profile-gif {
width: 120px;
height: 120px;
}

.custom-select-wrapper {
width: 100%;
}

.button {
width: 100%;
padding: 15px;
}
}