/* style.css */

/* Import all necessary Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch&family=Lobster&family=Great+Vibes&display=swap");

/* General Page Styles - Applies to all pages unless overridden by specific classes */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Prevents scrollbars if content overflows */
  /* Keep body as flex container, but its main purpose now is for when_animated.html,
     it will center the 'WHEN' text implicitly. 'continue-prompt' will be fixed. */
  display: flex;
  justify-content: center; /* Centers items horizontally */
  align-items: center; /* Centers items vertically (will apply to when-overlay) */
  background: transparent;
  /* Keeping Great Vibes as a general fallback font for the body if preferred */
  /* font-family: "Great Vibes", cursive; */
}

/* Background Video */
video.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* Ensures the video covers the entire screen */
  z-index: -2; /* Puts it behind everything else */
}

/* Blurred Overlay */
.overlay {
  background: rgba(255, 255, 255, 0.4); /* Semi-transparent white background */
  backdrop-filter: blur(4px); /* Blurs content behind it */
  position: absolute;
  inset: 0; /* Shorthand for top: 0; right: 0; bottom: 0; left: 0; */
  z-index: -1; /* Behind content, but above video */
}

/* Centered Content Box - Consistent style across all pages (index, when, where, thankyou) */
.center-text {
  background: rgba(
    255,
    255,
    255,
    0.65
  ); /* Semi-transparent white background for the box */
  padding: 2rem 3rem; /* Consistent padding around text */
  border-radius: 1rem;
  color: #6b2979; /* Purple text color */
  font-size: 2.5rem; /* Consistent font size for main text within .center-text */
  text-align: center;
  text-shadow: 1px 1px 8px #fff; /* White shadow for readability */
  cursor: pointer; /* Indicates it might be clickable, e.g., to go home */
  max-width: 90vw; /* Responsive max-width */
  font-family: "Lobster", cursive; /* This font will be used for .center-text on ALL pages */
  position: relative; /* Needed for positioning the loading spinner */
  z-index: 1; /* Keep it above overlay, but below the new 'when-overlay' */
}

/* Specific styling for the main birthday message to differentiate it (used in index.html) */
.main-message {
  margin-bottom: 20px; /* Space below the main message */
}

/* Specific styling for the 'tap to continue' prompt - MODIFIED FOR FIXED POSITIONING */
.continue-prompt {
  font-size: 1.5rem; /* Smaller font size */
  background: none; /* No background for this one */
  padding: 1rem 2rem; /* Adjusted padding */
  border-radius: 0; /* No border-radius */
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8); /* Slightly softer shadow */

  /* NEW POSITIONING */
  position: fixed; /* Position relative to the viewport */
  bottom: 30px; /* 30px from the bottom edge */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for perfect horizontal centering */
  z-index: 101; /* Ensure it's above the 'WHEN' text */
  cursor: pointer; /* Keep it clickable */
  white-space: nowrap; /* Prevent text from wrapping */
}

/* Specific styles for the form when it uses the .center-text class (reminder page) */
form.center-text {
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
  width: 90vw;
  max-width: 400px; /* Slightly narrower for forms */
  cursor: auto; /* Overrides the general .center-text cursor, as forms are interactive */
  font-size: 2rem; /* Slightly smaller font size for introductory text in form */
  font-family: "Lobster", cursive; /* Ensures the form's text is also Lobster */
}

/* Input and Button Styles - Applied within the form */
input,
button {
  width: 100%;
  padding: 0.7rem 1rem;
  margin: 0.7rem 0;
  border-radius: 10px;
  border: 1px solid #6b2979; /* Purple border */
  font-size: 1.2rem;
  box-sizing: border-box;
  font-family: sans-serif; /* Use a readable sans-serif font for actual input text */
}
button {
  background: #6b2979; /* Purple button background */
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease; /* Smooth transition on hover */
}
button:hover {
  background: #833d96; /* Lighter purple on hover */
}

/* Utility class for Cabin Sketch font - available if you want to use it on specific elements */
.cabin-sketch-regular {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Link styles for links within .center-text (e.g., on index page) */
.center-text a {
  font-size: 1.8rem;
  font-family: "Cabin Sketch", sans-serif;
  color: #6b2979;
  text-decoration: underline;
  display: block; /* Makes the link take full width and stack */
  margin-top: 0.5rem;
}

/* OTP Section Specific Styles */
.otp-section {
  display: none; /* Hidden by default until OTP is sent */
  margin-top: 1rem;
}

.otp-section p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Lobster", cursive; /* Consistent font for OTP instructions */
}

.otp-section input {
  text-align: center; /* Center the OTP digits */
  letter-spacing: 5px; /* Space out the OTP digits */
}

.resend-timer {
  font-size: 1rem;
  color: #888;
  margin-top: 0.5rem;
}

/* Custom Message Modal */
.message-modal {
  display: none; /* HIDDEN BY DEFAULT - THIS IS THE CORRECTED LINE */
  position: fixed;
  z-index: 1000; /* Ensures it's on top of everything */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
  backdrop-filter: blur(2px); /* Blurs content behind the modal */
  /* IMPORTANT: The 'display: flex;' property is now ONLY set by JavaScript when the modal needs to be shown. */
  justify-content: center;
  align-items: center;
}

.message-modal-content {
  background-color: #fefefe; /* White background for the modal box */
  margin: auto;
  padding: 20px;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
  width: 80%;
  max-width: 300px;
  text-align: center;
  color: #6b2979;
  font-family: "Lobster", cursive;
  font-size: 1.5rem;
}

.message-modal-content button {
  background: #6b2979;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 15px;
  font-size: 1rem;
  /* Override width: 100% for modal button for better sizing */
  width: auto;
  min-width: 100px;
}

/* Loading Spinner */
.loading-spinner {
  display: none; /* Hidden by default */
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #6b2979; /* Purple spinning part */
  border-radius: 50%; /* Makes it a circle */
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* Spinning animation */
  position: absolute; /* Positioned relative to .center-text parent */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the spinner */
  z-index: 10; /* Ensures it's above other elements */
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Styles for the "WHEN" text overlay (used on when_animated.html) */
.when-overlay {
  position: fixed; /* Stays in place relative to the viewport */
  top: 50%; /* Centered vertically */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8); /* Center it and start slightly scaled down for animation */
  font-family: "Arial Black", sans-serif; /* A bold, impactful font for the animated text */
  font-size: 10vw; /* Smaller font size (Adjust as needed) */
  color: #6b2979; /* Same purple as .center-text */
  text-align: center;
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Allows clicks to pass through to the body even when visible */
  z-index: 100; /* Ensures it's on top of other elements */
  text-shadow: 1px 1px 8px #fff; /* Same white shadow as .center-text */
  white-space: nowrap; /* Prevents the text "WHEN" from wrapping onto multiple lines */
}