@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#8b5fbf;
  --accent:#fddede;
  --bg:#fffaf0;
  --radius:8px;
}
body{
  background:var(--bg);
  background-image:linear-gradient(135deg,rgba(255,255,255,0.8)0%,rgba(250,245,240,0.8)100%);
  color:#333;
  font-family:'Open Sans',sans-serif;
  cursor:url('cursor-flor.png')16 16,auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  animation:fadeIn .8s ease-out;
  position:relative;
}
.decor{
  position:absolute;
  pointer-events:none;
  opacity:.1;
  z-index:0;
}
.decor--top-left{top:0;left:0;width:180px}
.decor--bottom-right{bottom:0;right:0;width:200px}
header{
  text-align:center;
  padding:2rem 1rem 1rem;
  z-index:1;
}
h1{
  font-family:'Great Vibes',cursive;
  color:var(--primary);
  font-size:3rem;
  margin-bottom:.25rem;
  animation:fadeIn .8s ease-out;
}
p{
  opacity:.8;
  margin-bottom:1rem;
  animation:fadeIn .8s ease-out;
}
.controls{
  display:flex;
  gap:.5rem;
  justify-content:center;
  padding:1rem;
  align-items:center;
  animation:fadeIn .8s ease-out;
  z-index:1;
}
.controls__label{font-weight:500}
.controls button,
.controls select{
  padding:.5rem 1rem;
  border:1px solid var(--primary);
  border-radius:var(--radius);
  background:#fff;
  color:var(--primary);
  cursor:pointer;
  transition:background .3s,transform .3s;
}
.controls button:hover,
.controls select:hover{
  background:var(--accent);
  transform:scale(1.05);
}
#gift-list{
  display:grid;
  gap:1rem;
  padding:2rem 1rem;
  width:min(100%,640px);
  margin:0 auto;
  animation:fadeIn .8s ease-out;
  z-index:1;
}
.gift{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,0.05);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:transform .3s,box-shadow .3s;
  opacity:0;
  animation:fadeInUp .5s ease-out forwards;
}
.gift:hover{
  transform:scale(1.02);
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
}
.price{
  font-weight:600;
  color:var(--primary);
}
.pix-code-container{
  margin-top:1rem;
  display:flex;
  gap:.5rem;
  justify-content:center;
  align-items:center;
}
.pix-code-container input{
  flex:1;
  padding:.5rem;
  border:1px solid #ccc;
  border-radius:var(--radius);
  font-family:monospace;
  font-size:.9rem;
}
.pix-code-container button{
  padding:.5rem 1rem;
  border:none;
  border-radius:var(--radius);
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  transition:background .3s;
}
.pix-code-container button:hover{
  background:var(--accent);
}
.hidden{
  display:none!important;
  pointer-events:none;
}
#modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  padding:1rem;
  z-index:1002;
  pointer-events:auto;
}
.modal-content{
  background:#fff;
  border-radius:var(--radius);
  max-width:380px;
  width:100%;
  padding:2rem 1.5rem 2.5rem;
  text-align:center;
  position:relative;
  z-index:1003;
  animation:slideDown .3s ease-out;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
#close{
  position:absolute;
  top:.5rem;
  right:.5rem;
  border:none;
  background:none;
  font-size:1.5rem;
  cursor:pointer;
}
.qrcode-box{
  margin-top:1.5rem;
  display:grid;
  justify-content:center;
}


/* gradiente animado full-page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(45deg,#ffdee9,#b5fffc,#e0c3fc,#8ec5fc);
  background-size:600% 600%;
  animation:bgMove 20s ease infinite;
}
@keyframes bgMove{
  0%{background-position:0 50%}
  50%{background-position:100% 50%}
  100%{background-position:0 50%}
}

/* glassmorphism no modal */
.modal-content{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.4);
}

/* card com sombra translúcida para glass vibe */
.gift{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.5);
}

/* botões estilo “pill” */
.controls button, .controls select{
  border:none;
  background:var(--primary);
  color:#fff;
}
.controls button:hover,
.controls select:hover{
  background:var(--accent);
  transform:translateY(-2px) scale(1.05);
}