/* General body and background */

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-image: url('Background.jpg');
  background-repeat: no-repeat;
  background-position: center center; /* centers the background image */
  background-size: cover; /* scales image to cover whole viewport, maintaining aspect ratio */
  background-attachment: fixed; /* keeps background fixed on scroll */
  background-color: transparent;
  overflow-x: hidden; /* prevents horizontal scrollbar from large background */
}

  
  /*home logo */
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85vh;  /* 15% of viewport height */
    width: 100vw;  /* full viewport width */
    background-color: #f5f2ff; /* light off-white background */
    box-sizing: border-box;
  }

  /* Center container for form pages */
  
  .form-container {
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: center;      /* center vertically */
    height: 73vh;            /* full viewport height */
    width: 100vw;             /* full viewport width */
    box-sizing: border-box;
  }

  /* Unlock page specific styles */
  
  .unlock-page {
    display: flex;                 /* Enable flexbox */
    flex-direction: column;        /* Stack items vertically */
    justify-content: center;       /* Center vertically */
    align-items: center;           /* Center horizontally */
    height: 68vh;                 /* Full viewport height */
    width: 100vw;                  /* Full viewport width */
    font-family: 'roboto', sans-serif; /* Font for unlock page */
    text-align: center;            /* Center text inside */
    padding: 20px;                /* Optional padding on smaller screens */
}

.unlock-page form {
    display: flex;
    flex-direction: column;
    gap: 20px;                    /* Space between inputs and button */
    width: 100%;
    max-width: 450px;             /* Constrain form width */
}

.unlock-page input[type="password"],
.unlock-page button[type="submit"] {
  width: 100%;
  padding: 15px 15px;
  font-size: 1.5rem;
  border-radius: 20px;
  border: 2px solid #eeeef0;
  outline: none;
  box-sizing: border-box;  /* includes padding and border in width */
  display: block;          /* avoid inline default button display */
  margin: 2.5px;               /* eliminate any margin differences */
  font-family: inherit;    /* keep font consistent */
}

.unlock-page button[type="submit"] {
  background-color: #2a2274;
  color: #ab9ff2;
  font-weight: 700;
  border: 2px solid #eeeef0; /* same border as input */
  padding: 15px 15px;         /* same padding as input */
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1.5rem;            /* match text size exactly */
  border-radius: 20px;        /* same border radius */
}


.unlock-page button:hover {
    background-color: #7f64ff;
}

.unlock-page h2 {

    font-family: 'roboto', sans-serif;
    font-size: 75px;
    font-weight: 700;
    color: #180334d1;
    margin-bottom: 10px;
}

.unlock-page input::placeholder {
  
  color: #180334d1;
  font-size: 1.5rem;
  font-family: 'roboto', sans-serif;
  font-weight: 500;
}
 
  /* Form styling */
  form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 40px;
    box-sizing: border-box;
    
  }
  
  /* Labels */
  
 /* Make the form a centered container with fixed max width */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 40px;
  box-sizing: border-box;
}

/* Make labels take full width and properly spaced */
label {
  font-weight: 1000;
  font-size: 1.5rem;
  margin-bottom: 5px;
  display: block;
  color: #2a2274;
  text-transform: uppercase;
  width: 100%;
}

/* Specific label color override */
#user-input label {
  color: #2a2274;
}

/* Apply consistent full width and box-sizing to all inputs and input groups */
.input-group, 
#user-input, 
.input-wrapper, 
input[type="text"], 
.toggle-buttons, 
button[type="submit"] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
}

/* Specific styles for inputs */
.input-wrapper, input[type="text"] {
  margin-top: 8px;
  padding: 8px 8px;
  background-color: #b9adf5fa;
  color: #2a2274;
  font-weight: 500;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  border: none;
}

input[type=text]:focus{

  outline: none;

}

.input-group {
  background-color: #ab9ff1;
  border: none;
}

/* Icons inside input wrapper */
.input-icon {
  margin-right: 5px;
  font-weight: 700;
  font-size: 1.5rem;
  color: #2a2274;
}

/* Toggle buttons container */
.toggle-buttons {
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
  background-color: #cdc2ff;
  border-radius: 15px;
  margin-bottom: 10px;
}

/* Hide radio inputs, style labels as buttons */
.toggle-buttons input[type="radio"] {
  display: none;
}

.toggle-button {
  flex-grow: 1;
  margin: 0 5px;
  padding: 5px 10px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
  color: #2a2274;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.toggle-buttons input[type="radio"]:checked + .toggle-button {
  background-color: #7f64ff;
  color: #f5f2ff;
}

/* Submit button styles */
button[type="submit"] {
  background-color: #2a2274;
  color: #ab9ff2;
  font-weight: 1000;
  border: none;
  padding: 15px 0;
  font-size: 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for submit */
button[type="submit"]:hover {
  background-color: #8070b481;
}

/* Success page styling */

.success-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 73vh;  /* full viewport height to center vertically */
    width: 100vw;   /* full width */
    text-align: center;
}

.success-container h2, .success-container p{
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 600;
  color: #2a2274;
}

.success-image {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto; /* center horizontally */
  border-radius: 10px; /* if you want rounded corners */

  transition: transform 0.3s ease; /* animation on hover */
}

.success-image:hover {
  transform: scale(1.05); /* scale slightly on hover */
}


/* Header styling */
.header-logo {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  justify-content: space-between;
  background: transparent;
}

#text{
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #4a40a2;
  margin-right: 15px;
  text-transform: uppercase;
}

.header-logo img {
  max-width: 120px;
  width: auto;
  height: auto;
  margin: 12px 0;
  display: block;
  object-fit: contain;
}

@media only screen and (max-width: 600px) {
  .header-logo img {
    max-width: 88px;
  }
}

/* Tap here Img */

.logo {
  display: flex;
  max-width: 750px;
  width: auto;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  height: 73vh;
  margin: 0 auto;
  padding: 20px;
  background-color: transparent;
  z-index: 1;
  position: relative;
}

#logo {
  max-width: 350px !important;
  width: auto !important;
  height: auto !important;
  display: block;  /* flex not needed for image */
  object-fit: contain;
  z-index: 2;
  position: relative;
  image-rendering: crisp-edges;
}

/* Footer styling */

.footer-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  font-family: 'Roboto', sans-serif;
  border-top: 1px solid #ccc;
}

.x-logo img {
  width: 40px;   /* Adjust logo size */
  height: auto;
  margin-right: 15px;
  display: block;
}

.footer-text {

  color: #2a2274;
  font-weight: 800;
  flex-grow: 1;
  text-align: right;
  font-size: 17px;
  line-height: 1.2;
}