/* GENERAL BODY & LAYOUT */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* HEARTS ANIMATION */
#hearts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.heart { position: absolute; color: #ff4d88; animation: floatUp linear infinite, sparkle 1.5s ease-in-out infinite alternate, rotateHeart linear infinite; opacity:0.8; }
@keyframes floatUp { 0%{transform:translateY(0) translateX(0) scale(1);} 100%{transform:translateY(-1200px) translateX(50px) scale(1.3);} }
@keyframes sparkle {0%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:0.5;} }
@keyframes rotateHeart {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

/* SPINNING SIDE IMAGES */
.side-img { position: fixed; top: 50%; width: 200px; height: 200px; object-fit: contain; transform: translateY(-50%); z-index: 0; animation: rotateFloat 20s linear infinite; border-radius: 20px; box-shadow: 0 0 20px rgba(255, 105, 180, 0.6); }
.left-img { left: 10px; }
.right-img { right: 10px; }
@keyframes rotateFloat { 0% { transform: translateY(-50%) rotate(0deg); } 25% { transform: translateY(-55%) rotate(90deg); } 50% { transform: translateY(-50%) rotate(180deg); } 75% { transform: translateY(-45%) rotate(270deg); } 100% { transform: translateY(-50%) rotate(360deg); }}

/* CASTLE */
.castle { position: absolute; bottom:0; width:100%; height:60%; opacity:0.25; z-index:0; }

/* CONTAINER */
.container { position: relative; z-index:1; background: rgba(255,240,245,0.95); padding:40px; border-radius:20px; width:420px; box-shadow:0 15px 40px rgba(255,105,180,0.45); text-align:center; color:#7a1c42; }
.hidden { display:none; }
h1 { color:#b5174f; }
label { display:block; text-align:left; margin-top:15px; font-size:14px; }
input, select { width:100%; padding:10px; margin-top:5px; border-radius:10px; border:none; }
input:disabled { background:#ffe3ec; }
.error { color:#c9184a; font-size:12px; margin-top:8px; display:none; }

/* BUTTONS */
.btn, .kisspay { display: block; width: 200px; margin: 20px auto 0 auto; padding: 14px; border: none; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; transition: all 0.3s ease; }
.btn { color: white; background: linear-gradient(135deg, #ff5fa2, #ff2f75); box-shadow: 0 8px 20px rgba(255,77,136,0.5); }
.btn:hover { transform: scale(1.05); box-shadow: 0 12px 25px rgba(255,77,136,0.7); }
.kisspay { background: black; color: white; font-size: 18px; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.kisspay:hover { transform: scale(1.05); box-shadow: 0 12px 25px rgba(0,0,0,0.6); }

/* YES BUTTONS SIDE BY SIDE */
.yes-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 25px; }

/* EXTRA TEXT */
.fee-info { margin-top:10px; font-size:14px; color:#b5174f; }
.valentine-text { font-size:18px; margin-top:25px; }

/* SECRET HEART FIXED BOTTOM RIGHT */
.secret-heart-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 38px;
  cursor: pointer;
  z-index: 99999;
  text-shadow: 0 0 10px gold, 0 0 20px hotpink;
  animation: pulseSecret 1.5s ease-in-out infinite alternate;
}

@keyframes pulseSecret {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

/* SECRET PAGE */
.secret-page {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,#ff5fa2,#ff2f75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  z-index: 99998;
  padding: 40px;
  font-family: Poppins, sans-serif;
}

.secret-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center; /* centers the buttons horizontally */
  gap: 30px;
}


.yes-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  background: white;
  color: #ff2f75;
  font-weight: bold;
  cursor: pointer;
}

.no-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  background: black;
  color: white;
  cursor: pointer;
}

.celebration {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  color: white;
  font-size: 40px;
  text-align: center;
  font-family: Poppins, sans-serif;
  padding: 40px;
}

/* GIRLFRIEND YES PAGE */

.girlfriend-page {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #ff9a9e, #ff5fa2, #ff2f75);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: Poppins, sans-serif;
}

.gf-card {
  background: rgba(255,255,255,0.95);
  padding: 50px;
  border-radius: 25px;
  text-align: center;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  z-index: 2;
}

.gf-title {
  font-size: 42px;
  color: #ff2f75;
  margin-bottom: 20px;
  animation: glowText 1.5s ease-in-out infinite alternate;
}

.gf-text {
  font-size: 20px;
  color: #7a1c42;
  line-height: 1.5;
}

/* Floating celebration hearts */
.celebration-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.celebration-heart {
  position: absolute;
  bottom: -50px;
  animation: floatUpCelebration linear infinite;
}

@keyframes floatUpCelebration {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-110vh); opacity: 0; }
}

/* Glowing title animation */
@keyframes glowText {
  from { text-shadow: 0 0 10px #ff5fa2; }
  to { text-shadow: 0 0 25px #ff2f75; }
}

/* IMAGE ON GIRLFRIEND YES PAGE */
.gf-image {
  width: 100%;
  max-width: 300px; /* adjust as needed */
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* HEARTS */
#hearts { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.heart { position:absolute; color:#ff4d88; opacity:0.8; animation: floatUp linear infinite, sparkle 1.5s ease-in-out infinite alternate, rotateHeart linear infinite; }
@keyframes floatUp {0%{transform:translateY(0) translateX(0) scale(1);} 100%{transform:translateY(-1200px) translateX(50px) scale(1.3);}}
@keyframes sparkle {0%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:0.5;}}
@keyframes rotateHeart {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

/* SECRET HEART BOTTOM RIGHT */
.secret-heart-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 38px;
  cursor: pointer;
  z-index: 99999;
  color: gold;
  text-shadow: 0 0 10px gold,0 0 20px hotpink;
  animation: spinAndPulse 4s linear infinite;
}
@keyframes spinAndPulse {0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.2);} 100%{transform:rotate(360deg) scale(1);}}

/* GIRLFRIEND PAGE */
.girlfriend-page {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,#ff9a9e,#ff5fa2,#ff2f75);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: Poppins, sans-serif;
}
.gf-card {
  background: rgba(255,255,255,0.95);
  padding: 50px;
  border-radius: 25px;
  text-align: center;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  z-index: 2;
}
.gf-title {
  font-size: 42px;
  color: #ff2f75;
  margin-bottom: 20px;
  animation: glowText 1.5s ease-in-out infinite alternate;
}
.gf-text {
  font-size: 20px;
  color: #7a1c42;
  line-height: 1.5;
}
.gf-big { font-size:28px; color:#b5174f; margin-bottom:20px; }
.gf-image { width:100%; max-width:300px; border-radius:20px; margin-bottom:20px; box-shadow:0 10px 30px rgba(0,0,0,0.2); object-fit:cover; display:block; margin-left:auto; margin-right:auto; }

.secret-buttons { margin-top:30px; display:flex; justify-content:center; gap:30px; }
.yes-btn, .no-btn { padding:15px 30px; border:none; border-radius:30px; font-size:18px; font-weight:bold; cursor:pointer; }
.yes-btn { background:white; color:#ff2f75; }
.no-btn { background:black; color:white; }

.celebration-hearts { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.celebration-heart { position:absolute; bottom:-50px; animation: floatUpCelebration linear infinite; }
@keyframes floatUpCelebration {0%{transform:translateY(0); opacity:1;} 100%{transform:translateY(-110vh); opacity:0;}}
@keyframes glowText {0%{text-shadow:0 0 10px #ff5fa2;} 100%{text-shadow:0 0 25px #ff2f75;}}