* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Poppins", sans-serif;

    background:
        radial-gradient(circle at 15% 20%, rgba(255, 120, 180, .45), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(255, 140, 200, .40), transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255, 210, 230, .55), transparent 45%),
        linear-gradient(135deg, #ffd5e7, #ffbfd9);

    overflow: hidden;
}

h1{
    animation:pulse 2.5s ease infinite;
    color: #e91e63;
    text-shadow:0 4px 15px rgba(233,30,99,.18);
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
        text-shadow:0 0 20px rgba(255,70,130,.15);
    }

    50%{
        transform:scale(1.01);
        text-shadow:0 0 35px rgba(255,70,130,.3);
        
    }
}

p {
  margin-bottom: 30px;
  color: #666;
}

button {
  padding: 15px 35px;

  border-radius: 15px;

  font-size: 18px;

  font-weight: 600;

  transition: 0.3s;

  cursor: pointer;
      min-height:56px;
}

button:hover {
  transform: scale(1.08);

  box-shadow: 0 12px 30px rgba(255, 80, 130, 0.35);
}
#yesBtn:hover {
  transform: scale(1.2);
}

#form {
  display: none;

  animation: fade 0.6s;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input,
input[type="date"],
input[type="time"]{
    width:100%;
    padding:16px;
    font-size:16px;
    background:white;
    color:#333;
    border:1px solid #ddd;
    border-radius:12px;
    appearance:none;
    -webkit-appearance:none;
}

input::-webkit-date-and-time-value{
    color:#333;
}
input::-webkit-calendar-picker-indicator{
    cursor:pointer;
    opacity:.8;
}

input {
  width: 100%;

  margin: 10px 0;

  padding: 14px;

  border-radius: 10px;

  border: 1px solid #ffffff;

  font-size: 16px;
}
#noBtn {
  transition: all 0.3s ease;
}
#noBtn.sad {
  transform: scale(0.85);
  background: #f0f0f0;
  color: #555;
  cursor: default;
  animation: bounce 0.4s ease;
}
#sendBtn {
  width: 100%;

  background: #ff4f7b;

  color: white;

  margin-top: 10px;
}

#sendBtn:hover {
  background: #ff3366;
}
#buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: relative;
}
.merge {
  transform: translateX(-70px) scale(0.85);
  opacity: 0.9;
}

.container{
    max-width:480px;
    padding:40px;

    background:rgba(255,255,255,.88);

    border-radius:28px;

    box-shadow:0 25px 70px rgba(255,70,130,.18);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.5);

    text-align:center;

    animation:show .7s ease;
}
@keyframes show{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.75);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.85);
  }
}

@keyframes gradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.success{
    animation:fade .6s ease;
}

.success .heart{
    font-size:70px;
    margin-bottom:20px;
    animation:pulse 1.8s infinite;
}

.success h1{
    color:#e91e63;
    margin-bottom:15px;
}

.success p{
    font-size:18px;
    line-height:1.6;
    color:#555;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.12);
    }
}