/* This file contains global CSS styles for the application. */

:root {
  --max-width: 430px;
  --mobile-padding: 16px;
  --border-radius: 26px;
  --shadow-default: 0 4px 4px rgba(0, 0, 0, 0.25);
  --font-primary: 'Moderat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Moderat Condensed', sans-serif;
  --font-display: 'Agbalumo';
  --gradient-bg: linear-gradient(-135deg, 
  #4F5BD5 0%, 
  #962FBF 25%, 
  #D62976 62%, 
  #FA7E1E 84%, 
  #FEDA75 100%
  );
  --gradient-overlay: radial-gradient(circle at top left, 
    rgba(55, 115, 200, 1) 0%, 
    rgba(55, 115, 200, 1) 8%, 
    rgba(64, 0, 255, 0) 45%
  );
}

body * {
    text-shadow: var(--shadow-default)
  }
  
  /* Override drop shadow for these elements */
  .progress-text,
  .trust-text,
  .shuffle-button,
  .custom-input,  
  .ratings-button,
  .input-input,
  .suggestion-button,
  .ratings-button * {
    text-shadow: none;
  }
  

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  font-family: var(--font-primary);
  line-height: 1.5;
  color: #333;
}

#__next {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background: white;
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: var(--font-secondary);
}

.screen-container {
  padding: var(--mobile-padding);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  text-align: center;
  max-width: 600px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.transition-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-bg); /* Or set a desired background color */
  z-index: 1000;
  animation: slideOverlay 200ms ease-out forwards;
}




@keyframes slideOverlay {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.page-transition {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.page-exit {
  opacity: 0;
}

.page-enter {
  opacity: 0;
}

.page-enter-active {
  opacity: 1;
}

@keyframes slideInOverlay {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.progress-indicator {
  position: absolute;
  top: var(--mobile-padding);
  right: var(--mobile-padding);
  font-size: 20px;
  opacity: 1;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

button {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  background: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background: none;
}


.input-input {
  width: 362px; /* Approximation of 361.83px */
  height: 36px; /* Approximation of 125.67px */
  background:none;
  border: none;
  resize: none; /* Remove manual resize */
  
  /* Flex for vertical and horizontal centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  color: #fff; /* Text color */
  text-align: center; /* Center text inside input */
  font-size: 24px;
  padding: 20px;
  margin: 1rem auto; /* Centers horizontally */
  transition: transform 0.1s ease-out, border 0.1s ease-out;
  overflow: auto;
}

/* Placeholder text styling */
.input-input::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Adjust opacity for better visibility */
  text-align: center; /* Center placeholder text */
  font-size: 20px;
}

/* Ensuring text input is vertically centered */
.input-input::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* When no text is typed, center the placeholder vertically */
.input-input:placeholder-shown {
  align-items: center;
}

/* When text is present, align content to the top so extra lines wrap naturally */
.input-input:not(:placeholder-shown) {
  align-items: flex-start;
  padding-top: 10px; /* Adjust if needed */
}

.input-input:focus {
  outline: none;
  border: none; /* Ensures no border appears on focus */
  box-shadow: none; /* Ensures no glow effect */
}

.suggestions-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestions {
  display: flex;
  white-space: nowrap;
  gap: 12px;
  /* The animation duration is set inline in the component for each row */
  animation: scrollRight linear infinite;
}

.suggestion-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 2.2px solid #CC4DFF;
  border-radius: 22px;
  background: #F1CEFF;
  color: #000;
  font-size: 16px;
  font-weight: 550;
  cursor: pointer;
  transition: all 2s ease-in-out;
  white-space: nowrap;
}

/* Active state effect with a small delay for a smooth experience */
.suggestion-button:active {
  border: 3px solid #E7A9FF;
  background-color: #fff;
  border-radius: 32px;
  transform: scale(0.98);
  transition: transform 0.1s ease-out 0.2s;
  box-shadow: 0 4px 10px rgba(231, 169, 255, 0.4);
}

/* Add these styles for selected state */
.suggestion-button.selected {
  background: #E7A9FF;
  transform: scale(0.98);
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Keyframes for smooth, slow scrolling */
@keyframes scrollRight {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(0%);
  }
}


.custom-input {
  width: 362px; /* Approximation of 361.83px */
  height: 126px; /* Approximation of 125.67px */
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 26px;
  box-shadow: 0px 4.33px 4.33px rgba(0, 0, 0, 0.25);
  resize: none; /* Remove manual resize */
  
  /* Flex for vertical and horizontal centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  color: #fff; /* Text color */
  text-align: center; /* Center text inside input */
  font-size: 24px;
  padding: 20px;
  margin: auto 0; /* Centers vertically */
  transition: all 0.3s ease-out;
  overflow: auto;
}

.custom-input:focus {
  outline: none;
  height: 150px; /* Increase height when focused */
  background: rgba(255, 255, 255, 0.3); /* Slightly more visible when focused */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Placeholder text styling */
.custom-input::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Adjust opacity for better visibility */
  text-align: center;
  font-size: 24px;
  padding-top: 30px;
  display: flex;
  align-items: center;
  height: 100%; /* Ensure it takes full height of the input */
}

.custom-input::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Ensuring text input is vertically centered */
.custom-input::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* When no text is typed, center the placeholder vertically */
.custom-input:placeholder-shown {
  align-items: center;
}

/* When text is present, align content to the top so extra lines wrap naturally */
.custom-input:not(:placeholder-shown) {
  align-items: flex-start;
  padding-top: 55px; /* Adjust if needed */
}

.custom-input:focus {
  outline: none;
  padding-top: 55px;
}

.custom-input:focus::placeholder {
  color: transparent;
}

.custom-comment-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center horizontally */
  transition: all 0.3s ease-out;
}

.trust-text {
    font-size: 16px; /* Set to 16px */
    font-weight: 500;
    opacity: 1;
    text-align: center;
    margin: 20px 0; /* Adjusted spacing */
    color: #fff;
    font-family: var(--font-primary);
  }

.social-proof {
  font-size: 16px;
  font-weight: 500;
  opacity: 1;
  margin-bottom: var(--mobile-padding);
  text-align: center;
  margin: 0.5rem 0;
  color: #fff;
  font-family: var(--font-primary);
}

.rating-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Update the rating number styles */
.rating-number {
  font-size: 48px;
  font-weight: bold;
  color: white;
  height: 60px; /* Fixed height to prevent layout shifts */
  display: flex;
  justify-content: center;
  align-items: center;
}

.bounce-number {
  display: inline-block;
  animation: slowBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-number.final-bounce {
  animation: fastBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slowBounce {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
    opacity: 1;
  }
  85% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fastBounce {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Update counter animation to match */
.animated-counter {
  display: inline-block;
  animation: superSmoothBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes superSmoothBounce {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  85% {
    transform: scale(1.05);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Update counter animation */
.animated-counter {
  display: inline-block;
  animation: smoothNumberChange 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes smoothNumberChange {
  0% { 
    transform: translateY(8px) scale(0.9);
    opacity: 0;
  }
  60% { 
    transform: translateY(-4px) scale(1.1);
    opacity: 0.8;
  }
  80% { 
    transform: translateY(2px) scale(0.95);
    opacity: 0.9;
  }
  100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.star-icon {
  font-size: 140px;
  animation: starPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@media (min-width: 431px) {
  body {
    background: #f0f0f0;
  }
  
  #__next {
    border-radius: 0;
  }
}

.gradient-bg {
    background: var(--gradient-bg);
    position: relative;
    overflow: hidden;
  }
  
  /* Overlay with a low z-index */
  .gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    pointer-events: none;
    z-index: 0;
  }
  
  .grid-container {
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
  }

  .screen6-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-top: 100px;
  }
  /* Ensure these elements appear above the overlay */
  .progress-container,
  .content-container,
  .footer {
    position: relative;
    z-index: 1;
  }

.progress-container {
  position: absolute;
  top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.progress-text {
  color: white;
  font-size: 38px;
  font-weight: bolder;
  font-family: var(--font-primary);
}

.content-container {
    width: 100%;
    max-width: 342px;
    margin-bottom: 200px; /* Moves it down exactly by 150px */
    text-align: center;
    padding-top: 0px;
}
 

  .title {
    color: white;
    font-size: 24px;  /* Increased to 32px */
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 500;
    text-shadow: none;
    margin-top: 0;
    margin-bottom: 20px;
    z-index: 1;
  }

.options-grid {
  display: flex;
  gap: 17px;
  margin-bottom: 30px;
}

.option-button {
    flex: 1;
    height: 150px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    box-shadow: var(--shadow-default);
    transition: transform 0.1s ease-out, border 0.1s ease-out;
    font-size: 24px; /* For any inherited font-size */
  }

/* Add these styles for selected state */
.option-button.selected {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.98);
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

  .option-button:active {
    border: 3px solid #E7A9FF;
    border-radius: 12px;
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
    box-shadow: 0 4px 10px rgba(231, 169, 255, 0.4);
  }
  
  /* Set text inside option buttons to Agbalumo */
  .option-button .text {
    font-family: var(--font-display);
    color: white; /* keep your desired color */
    font-size: 24px;
    font-weight: normal;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  
.emoji {
  font-size: 24px;
}

.text {
  color: white;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-primary);
}

.rating-container {
  transform: translateY(-60px);
  transition: transform 0.3s ease-in-out;
}

.ratings-button {
  background: black;
  color: white;
  border: none;
  border-radius: 100px;
  padding: 18px 0px;
  font-size: 18px;
  font-family: var(--font-primary);
  font-weight: bolder;
  box-shadow: var(--shadow-default);
  width: 100%;
  max-width: 85%;
}

.ratings-button:focus {
  transform: scale(1.1);
  opacity: 1;
  background-color: #2a2a2a;
}

.ratings-button:hover {
    opacity: 1;
    background-color:#000;
}



@keyframes smoothAttention {
    0% { transform: rotate(0deg) scale(1); }
    10% { transform: rotate(-3deg) scale(1.05); }
    15% { transform: rotate(3deg) scale(1); }
    20% { transform: rotate(-3deg) scale(1.03); }
    25% { transform: rotate(3deg) scale(0.97); }
    30% { transform: rotate(-3deg) scale(1.05); }
    35% { transform: rotate(3deg) scale(1); }
    40% { transform: rotate(-3deg) scale(1.03); }
    45% { transform: rotate(3deg) scale(0.97); }
    50% { transform: rotate(0deg) scale(1); }
    70% { transform: scale(1.08); }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
  }
  
  .ratings-button.shake {
    animation: smoothAttention 4s infinite ease-in-out;
  }
  
  @keyframes pop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  .animated-counter {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    animation: pop 0.5s ease-in-out;
  }
  
  .animated-counter {
    display: inline-block;
    animation: numberBounce 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
  }
  
  @keyframes numberBounce {
    0% { transform: translateY(10px); opacity: 0; }
    60% { transform: translateY(-5px); }
    100% { transform: translateY(0); opacity: 1; }
  }

.footer {
    position: absolute;
    bottom: 150px; /* Pushes the footer down */
    width: 100%;
    justify-content: center;
    gap: 56px;
  }

.people-count-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-100px);
}

.count-circle {
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-default);
}

.count-number {
  color: white;
  font-size: 38px;
  font-weight: bold;
  text-shadow: none;
  font-family: var(--font-primary);
}

.count-label {
  color: white;
  font-size: 20px;
  text-shadow: none;
  font-weight: 500;
  font-family: var(--font-primary);
}

.tick-container {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  animation: scaleIn 0.5s ease-out;
}

.tick-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Makes the SVG white */
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.tick-container {
  width: 90px;
  height: 90px;
  margin-bottom: 30px;
  animation: scaleIn 0.5s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tick-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.shuffle-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
  backdrop-filter: blur(5px);
  width: auto;
  min-width: 120px;
}

.shuffle-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.shuffle-button:active {
  transform: translateY(0);
}

.shuffle-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

@keyframes glowEffect {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                0 0 30px rgba(255, 0, 183, 0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
}

.shuffle-button.initial-glow {
  animation: glowEffect 1s ease-in-out infinite;
}

.custom-input.initial-glow {
  animation: glowEffect 1s ease-in-out infinite;
}

.slider-container {
  position: relative;
  width: 283px;
  height: 16px;
  background: rgba(22, 22, 22, 0.8);
  border-radius: 6px;
  overflow: visible; /* Like Figma's "Clip Content" */
  margin: 40px auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transform: scale(1);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slider-container:hover {
  transform: scale(1.02);
}

.slider-container:active {
  transform: scale(0.98);
}

.slider-container::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #ffe100, #FF69B4);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.slider-container:hover::before {
  opacity: 0.5;
}

.slider-progress {
  height: 100%;
  background: #FFF200;
  border-radius: 6px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
}

.slider-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  display: none;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.slider-emoji {
  position: absolute;
  top: -32px;
  left: 100%;
  right: 200px; /* Move right by 50px */
  transform: translate(-140%, -150%);
  font-size: 48px;
  color: rgb(234, 255, 0);
  pointer-events: none;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: floatEmoji 2s ease-in-out infinite, twinkleGlow 1.5s ease-in-out infinite;
}

@keyframes twinkleGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 251, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 251, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.3);
  }
}


.slider-container:active .slider-emoji {
  transform: translate(-50%, 0) scale(1.3);
  animation: none;
}

.slider-input {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: calc(100% + 20px);
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

@keyframes floatEmoji {
  0%, 100% {
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    transform: translate(-50%, -5px) scale(1.05);
  }
}

.rating-result {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-align: center;
  animation: popInResult 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes popInResult {
  0% {
    transform: scale(0.5) translateY(20px);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/* Add a transition to all elements for smooth animations */
* {
  transition: all 0.2s ease-in-out;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Responsive font sizes */
@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1025px) {
  html {
    font-size: 18px;
  }
}