/* English: This file contains all the custom CSS styles for the Yümmies Rewards public interface. */

body {
    font-family: 'Poppins', sans-serif;
}

.alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f44336; /* Red */
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    max-width: 90%;
    text-align: center;
}

.alert.show {
    opacity: 1;
}

.hidden-section {
    display: none;
}

/* English: Styles for the prize image container and Yümmies logo overlay */
#prize-image-container {
    position: relative;
    width: 160px; /* Width of the prize image circle container (increased) */
    height: 160px; /* Height of the prize image circle container (increased) */
    margin: 0 auto 1.5rem; /* Center the container and add bottom margin */
}

#prize-image {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Makes the image circular */
    border: 4px solid white; /* White border around the prize image */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    object-fit: cover; /* Ensures the prize image fills the circle */
}

#yummies-logo-overlay {
    position: absolute;
    top: -1rem;   /* Adjusted: More up */
    right: -1rem; /* Adjusted: More to the right */
    width: 70px; /* Adjusted: Larger */
    height: 70px; /* Adjusted: Larger */
    background-color: white;
    border-radius: 50%; /* Makes the overlay circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid white; /* White border around the logo to highlight it */
}

#yummies-logo-overlay img {
    width: 70%; /* Size of the logo image inside its circle */
    height: auto; /* Maintains image aspect ratio */
    object-fit: contain; /* Ensures the full image is visible within the circle */
}

/* English: Adjustments for prize ticket padding */
#prize-ticket {
    padding: 4rem 2rem; /* Default padding for larger screens */
}

/* English: Mobile-specific adjustments */
@media (max-width: 767px) { /* Adjust for screens smaller than md (768px) */
    #prize-ticket {
        padding: 3rem 1rem; /* Half horizontal padding for mobile */
    }
}

/* English: Hide reCAPTCHA badge */
.grecaptcha-badge {
    visibility: hidden;
}

/* Custom styles for the modal text format */
.modal-body.prose h3 {
  font-size: 1.25rem; /* Equivalent to text-xl in Tailwind */
  font-weight: 700;   /* Equivalent to font-bold in Tailwind */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.modal-body.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.modal-body.prose li {
  margin-bottom: 0.5rem;
}

.modal-body.prose p {
  margin-bottom: 1rem;
}

.invert-colors {
	filter: invert(1) brightness(2);
}

/* --- Clean Prize Design --- */
.prize-container-clean {
	width: 100%;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	border-radius: 1.5rem; /* rounded-3xl */
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	overflow: hidden;
	text-align: center;
	border: 1px solid #f3f4f6; /* border-gray-100 */
}

.prize-image-wrapper {
	width: 100%;
	aspect-ratio: 16 / 10;
}

.prize-image-clean {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prize-content-clean {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.prize-footer {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f3f4f6; /* border-gray-100 */
}

@media (min-width: 768px) { /* md breakpoint */
    .prize-container-clean {
        max-width: 420px;
    }
}

/* Animation for the prize reveal emoji */
@keyframes gift-exploding {
  0%, 20%, 40%, 60%, 80% {
    transform: translate(0, 0) rotate(0);
  }
  10%, 30% { transform: translate(-3px, -2px) rotate(-4deg); }
  50% { transform: translate(3px, 2px) rotate(4deg); }
  70% { transform: translate(-2px, 3px) rotate(-2deg); }
  90% {
    transform: scale(1.5) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(3) rotate(-10deg);
    opacity: 0;
  }
}

.animate-prize-reveal {
  animation: gift-exploding 2s ease-in-out forwards;
}