@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap");

/* Color Palette Variables */
:root {
  --primary-blue: #4a00e0; /* Deep Purple-Blue */
  --secondary-blue: #8e2de2; /* Lighter Purple-Blue */
  --accent-teal: #00bcd4; /* Vibrant Teal */
  --light-grey: #f0f2f5;
  --dark-text: #333;
  --light-text: #fff;
  --input-bg: #eef2f7;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --button-hover-dark: #3700b3;
  --button-hover-light: #0097a7;

  /* NEW: Adding an Orange color variable */
  --accent-orange: #e87b37; /* The orange from your previous code */
  --accent-orange-hover: #d16b2e; /* A slightly darker orange for hover */
  --accent-blue-old: #27cda7; /* The blue from your previous code (leans teal/green) */
  --accent-blue-old-hover: #20a080; /* A slightly darker version of accent-blue-old */
}

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

body {
  font-family: "Poppins", sans-serif;
  background: var(--light-grey);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Use min-height for better responsiveness */
  overflow: hidden; /* Hide scrollbar during transitions */

  /* Modern Background: Subtle abstract pattern related to printing */
  background-image: url("https://images.unsplash.com/photo-1517409276-8051a8d0b2e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"); /* Example: Abstract ink or paper texture */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps the background fixed while scrolling */
  background-position: center center; /* Center the background image */
  transition: background-image 0.8s ease-in-out; /* Smooth transition for background image changes */

  /* Optional: Add a subtle overlay to make text more readable on busy backgrounds */
  position: relative; /* Needed for pseudo-element positioning */
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
  z-index: -1; /* Behind the container */
  transition: background-color 0.5s ease;
}

/* When right panel is active, move right overlay out of view */
.container.right-panel-active .overlay-right {
  transform: translateX(20%);
  opacity: 0;
}

/* Overlay Panel */
.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-radius: 35px 15px 15px 35px; /* Only right corners rounded initially */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Matches form-container transition */
  z-index: 100; /* Ensure overlay is on top */
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); /* Shadow to separate it from forms */
}

/* When right panel is active, slide overlay to the left and adjust border radius */
.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
  border-radius: 15px 35px 35px 15px; /* Left corners rounded when active */
}

.overlay {
  /* background:linear-gradient(to right, #37DFB8, #E87B37, #E8375A); */ /* REMOVE OR COMMENT OUT THIS LINE */
  color: var(--light-text);
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* When right panel is active, slide overlay background */
.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  text-align: center;
  height: 100%;
  width: 50%;
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Matches other transitions */
}

.overlay-left {
  transform: translateX(-20%); /* Start slightly off-screen left */
  opacity: 0; /* Hidden initially */
  background: #726ce0;
  background: linear-gradient(
    90deg,
    rgba(114, 108, 224, 1) 0%,
    rgba(61, 156, 238, 1) 100%
  );
}
/* Bring left overlay content into view */
.container.right-panel-active .overlay-left {
  transform: translateX(0);
  opacity: 1;
}

.overlay-right {
  right: 0;
  transform: translateX(0); /* Initially visible */
  opacity: 1;
  background: linear-gradient(
    to right,
    #e87b37,
    #e8375a
  ); /* The red gradient for "Hello, Print Partner!" */
}

/* Move right overlay content slightly right (off-screen) */
.container.right-panel-active .overlay-right {
  transform: translateX(20%);
  opacity: 0;
}

.overlay-panel h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0;
  margin-bottom: 10px;
  color: var(--light-text); /* Ensure heading is white */
}

.overlay-panel p {
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
  color: rgba(
    255,
    255,
    255,
    0.9
  ); /* Slightly transparent white for readability */
}

/* Keyframe for initial fade and slide in animation */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animations to specific elements within forms and overlays */
.form-container h1,
.form-container span,
.form-container input,
.form-container button,
.overlay-panel h1,
.overlay-panel p,
.overlay-panel button,
.form-container .input-group, /* Include input group for animation */
.form-container select {
  /* Include select for animation */
  opacity: 0; /* Start hidden */
  transform: translateY(
    20px
  ); /* Start slightly below (reduced initial translation) */
  animation: fadeSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Smoother ease-out cubic-bezier */
}
.overlay-panel h1 {
  animation-delay: 0.2s;
}
.overlay-panel p {
  animation-delay: 0.4s;
}
.overlay-panel button {
  animation-delay: 0.6s;
}

.container {
  background: var(--light-text);
  border-radius: 15px; /* Softer corners */
  box-shadow: 0 16px 32px var(--shadow-color), 0 10px 10px rgba(0, 0, 0, 0.18); /* Deeper, softer shadow */
  position: relative;
  overflow: hidden;
  width: 800px; /* Slightly wider */
  max-width: 95%; /* Better mobile scaling */
  min-height: 520px; /* Slightly taller */
  display: flex; /* Use flex for internal layout control */
  z-index: 1; /* Ensure container is above the background overlay */
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%; /* Each form takes 50% */
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* More playful, springy transition */
  display: flex;
  left: 100px;
}

.sign-in-container {
  left: 0;
  z-index: 2; /* Sign-in on top initially */
}

.sign-up-container {
  left: 0; /* Starts at the same position as sign-in */
  opacity: 0; /* Hidden initially */
  z-index: 1; /* Below sign-in */
}

/* When right panel is active, slide sign-up into view */
.container.right-panel-active .sign-up-container {
  transform: translateX(100%); /* Move to the right half */
  opacity: 1; /* Make visible */
  z-index: 5; /* Bring to front */
}

/* When right panel is active, slide sign-in out of view */
.container.right-panel-active .sign-in-container {
  transform: translateX(
    100%
  ); /* Move to the right half, effectively off-screen */
}

form {
  background: var(--light-text);
  display: flex;
  flex-direction: column;
  padding: 0 40px; /* Reduced padding for cleaner look */
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; /* Forms fill their containers */
}

h1 {
  font-family: "Montserrat", sans-serif; /* Different font for headings */
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark-text);
}

form span {
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
}

/* --- Input Specific Styling --- */
input {
  background: var(--input-bg);
  border: none;
  padding: 14px 20px; /* Slightly larger inputs */
  margin: 8px 0; /* Consistent vertical margin */
  width: 100%; /* Ensures inputs take full available width in form */
  border-radius: 8px; /* Rounded inputs */
  font-size: 15px;
  color: var(--dark-text);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* Added transform for subtle lift */
}

/* Fix for unwanted white border/padding on focus */
input:focus {
  outline: none !important;
  background: var(--input-bg) !important; /* keep same bg as normal */
  box-shadow: none !important; /* remove glow border */
}

.input-group .form-control,
.input-group .btn {
  height: 48px;
}

/* Specific adjustments for inputs within forms */
.form-container input {
  margin-bottom: 15px; /* More space below each input */
  width: 80%; /* Adjusted width for better aesthetics */
  max-width: 300px; /* Max width to prevent overly wide inputs on larger screens */
}

/* Bootstrap specific input group adjustments */
.input-group {
  width: 80% !important; /* Important to override bootstrap's default */
  max-width: 300px; /* Match max-width of regular inputs */
  margin-bottom: 10px; /* Consistent spacing */
  transition: all 0.3s ease; /* Smooth transition for input group on focus/animation */
}

.input-group:focus-within {
  /* When any element inside the group is focused */
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.4);
  border-radius: 8px; /* Apply border-radius for the focus shadow */
}

.input-group .form-control {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border: none; /* Remove default bootstrap border */
  background: var(--input-bg);
  padding: 14px 20px;
  height: auto; /* Let padding define height */
  font-size: 15px;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.input-group .form-control:focus {
  outline: none;
  background: #fff;
  box-shadow: none; /* Remove inner shadow as focus is on the group */
  transform: translateY(0); /* Prevent individual input lift when group lifts */
}
/* Final override to kill white bg + border everywhere */
input:focus,
.form-container input:focus,
.input-group .form-control:focus {
  outline: none !important;
  background: var(--input-bg) !important;
  box-shadow: none !important;
}

.input-group .btn {
  background-color: var(--input-bg); /* Match input background */
  border: none; /* Remove border */
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  color: #777; /* Icon color */
  transition: background-color 0.3s ease, color 0.3s ease;
  height: auto; /* Let padding define height */
  padding: 14px 15px; /* Adjust padding to align with input text */
}

.input-group .btn:hover {
  background-color: #e2e6eb; /* Slightly darker on hover */
  color: var(--dark-text);
}

.input-group .btn:focus {
  outline: none;
  box-shadow: none;
}

select.form-select {
  width: 80%; /* Match input width */
  max-width: 300px; /* Match input max-width */
  padding: 14px 20px; /* Consistent padding */
  margin-bottom: 15px; /* Consistent spacing */
  border-radius: 8px; /* Rounded corners */
  border: none;
  background: var(--input-bg);
  color: var(--dark-text);
  font-size: 15px;
  -webkit-appearance: none; /* Remove default arrow on WebKit browsers */
  -moz-appearance: none; /* Remove default arrow on Firefox */
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); /* Custom SVG arrow */
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  transition: all 0.3s ease;
}

select.form-select:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.4), 0 0 15px rgba(0, 188, 212, 0.2);
  transform: translateY(-2px);
}

/* --- Button Styling (General & Ghost) --- */
/* The general button style was removed here to respect the original custom buttons */
button.ghost {
  background-color: transparent;
  border: 2px solid var(--light-text); /* Thicker border for ghost button */
  color: var(--light-text);
  box-shadow: none; /* No shadow for ghost button initially */
  padding: 14px 50px; /* Match ghost button padding */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 25px; /* Pill-shaped buttons */
  transition: transform 0.2s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
  margin-top: 20px;
}

button.ghost:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* More visible white overlay on hover */
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.forgot-password {
  color: var(--primary-blue); /* Using the deep purple-blue */
  font-size: 14px;
  text-decoration: none;
  margin-top: 15px; /* Adjusted margin top */
  margin-bottom: 25px; /* Added margin bottom for spacing before hr */
  transition: color 0.3s ease, transform 0.2s ease;
}

.forgot-password:hover {
  color: var(--accent-orange); /* Highlighting with orange on hover */
  transform: translateY(-1px); /* Slight lift for link */
}

/* Staggered animation delays for a nice entrance effect */
.form-container h1 {
  animation-delay: 0.1s;
}
.form-container span {
  animation-delay: 0.2s;
}
.form-container input:nth-of-type(1), /* First input (name) */
.form-container #mobile.form-control {
  /* Login Mobile No. input */
  animation-delay: 0.3s;
}
.form-container input:nth-of-type(2), /* Second input (email) */
.form-container #login_password.form-control {
  /* Login Password input */
  animation-delay: 0.4s;
}
.form-container input:nth-of-type(3) {
  /* Third input (mobile) */
  animation-delay: 0.5s;
}
/* For signup step 2, specifically target its elements */
#signup-step-2 .input-group:nth-of-type(1) {
  /* Password input group */
  animation-delay: 0.3s;
}
#signup-step-2 .input-group:nth-of-type(2) {
  /* Confirm Password input group */
  animation-delay: 0.4s;
}
#signup-step-2 select.form-select {
  animation-delay: 0.5s;
}
/* For generic buttons within forms */
.form-container button {
  animation-delay: 0.6s;
}

/* Specific animation for next step button on signup step 1 */

/* Hide Bootstrap's default margin-top on .mt-3 for the next button,
   as we are managing it with explicit margin-top on .custom-btn.btn-9 */
.form-container .mt-3 {
  margin-top: 0 !important;
}
/* 🔷 Common Base for Both Buttons */
.custom-btn.btn-9,
.custom-btn.btn-10 {
  font-size: 17px;
  padding: 16px 50px;
  border-radius: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ➡️ Step Button (→ / Login / Signup switch) */
.custom-btn.btn-9 {
  background-color: #1fd1f9;
  background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  color: #fff;
}

.custom-btn.btn-9:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.custom-btn.btn-9:hover {
  color: #fff;
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(182, 33, 254, 0.4);
}

.custom-btn.btn-9:hover:after {
  transform: scale(1.2) rotate(180deg);
}

/* 🔵 Main Buttons (Login / Sign Up) */
.custom-btn.btn-10 {
  background-image: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
  color: #fff;
}

.custom-btn.btn-10:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  border-radius: 16px;
  transition: transform 0.4s ease;
  transform: scale(0.1);
}

.custom-btn.btn-10:hover {
  color: #fff;
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(42, 82, 152, 0.4);
}

.custom-btn.btn-10:hover:after {
  transform: scale(1.1);
}

/* Specific spacing for next arrow button */
#signup-step-1 .custom-btn.btn-9 {
  margin-top: 30px;
}
/* 🔼 Arrow Button Enhancements */
.arrow-button {
  font-size: 30px; /* Larger arrow */
  font-weight: 700; /* Bolder */
  padding: 18px 0; /* Vertically thicker, horizontally narrower */
  width: 70px; /* Square shape */
  height: 70px;
  border-radius: 50%; /* Circle button */
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.arrow-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

hr {
  border: none;
  border-top: 1px solid #eee; /* Lighter, more subtle line */
  margin: 25px 0; /* More consistent vertical spacing */
  width: 80%; /* Match input width */
  max-width: 300px;
}

/* Ensure step containers don't have extra margins that affect spacing */
#signup-step-1,
#signup-step-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensure they take full width of form */
  padding: 0; /* Remove any default padding */
}

/* Adjustments for the inner elements within signup steps */
#signup-step-1 h1,
#signup-step-2 h1 {
  margin-bottom: 15px; /* More space below headings */
}

#signup-step-1 span,
#signup-step-2 span {
  margin-bottom: 30px; /* More space below taglines */
}
/* For mobile screens only */

/* Responsive adjustments */

.signup-step-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.signup-step-centered .step2-inner {
  width: 100%;
  max-width: 800px; /* control width */
}
.input-group mb-2 {
  max-width: 800px;
}
.shift-right {
  padding-left: 130px; /* adjust as needed */
}

.signup-step-centered input,
.signup-step-centered select,
.signup-step-centered .input-group {
  margin-bottom: 1rem;
}
/* Fix input-group height alignment */
.input-group .form-control,
.input-group .btn {
  height: 48px; /* match height exactly */
  line-height: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Wrapper matches other inputs */
.input-combined {
  display: flex;
  align-items: center;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

/* Core select styling */
.input-core.styled-college-select {
  width: 100%;
  padding: 12px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  background-color: transparent;
  appearance: none;

  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='gray' height='16' viewBox='0 0 24 24' width='16'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Hide default arrow in some browsers */
.input-core.styled-college-select::-ms-expand {
  display: none;
}

/* Mobile fix (optional) */
@media (max-width: 400px) {
  .input-combined {
    width: 90%;
  }
}
/* Wrapper aligns right */
#button-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-right: 90px; /* Adjust to position slightly left from edge */
}
@keyframes pulseFill {
  0% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}

/* Circle-style Button */
.animated-upload-button {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #1a73e8, #174ea6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow Icon */
.animated-upload-button .fa-arrow-right {
  color: white;
  font-size: 16px;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Fill Layer */
.animated-upload-button .fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #fcb045, #fd1d1d, #833ab4);
  border-radius: 50%;
  z-index: 1;
  transition: height 2s ease 0.6s;
}

/* Check Icon */
.animated-upload-button .fa-check {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 16px;
  z-index: 3;
  transition: all 0.3s ease;
}

/* Looping fill animation while loading */
@keyframes pulseFill {
  0% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}

/* Clicked State (Start animation) */
#button-wrapper.clicked .fill {
  animation: pulseFill 2s ease-in-out infinite;
}

#button-wrapper.clicked .fa-arrow-right {
  opacity: 0;
  transform: scale(0);
}

#button-wrapper.clicked .animated-upload-button {
  background: #ccc !important;
}

/* Success State (Stop animation and show check) */
#button-wrapper.success .fill {
  animation: none;
  height: 100%;
}

#button-wrapper.success .fa-check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* OTP Button Wrapper */
#otp-button-wrapper {
  display: flex;
  justify-content: flex-start; /* Align button to the left */
  width: 100%; /* Ensure wrapper takes full width */
  margin-top: 20px; /* Add some space above the button */
}

/* OTP Circle-style Button */
.otp-animated-upload-button {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    #1a73e8,
    #174ea6
  ); /* Google Blue gradient */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Removed margin-left/right and display: block from inline style,
     as the wrapper will handle alignment */
}

/* Arrow Icon (direct child now, not inside <p>) */
.otp-animated-upload-button .fa-arrow-right {
  color: white;
  font-size: 16px;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Fill for OTP Button */
.otp-animated-upload-button .fill {
  position: absolute;
  bottom: 0; /* Start from the bottom */
  left: 0;
  width: 100%; /* Ensure it spans the full width of the button */
  height: 0%; /* Start with 0 height, will grow upwards */
  background: linear-gradient(
    to top,
    #7fff00,
    #32cd32,
    #006400
  ); /* A fresh green gradient */
  border-radius: 50%; /* Keep this for circular edges */
  z-index: 1;
  transition: height 2s ease 0.6s; /* Transition height property */
}

/* Check Icon for OTP Button */
.otp-animated-upload-button .fa-check {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 16px;
  z-index: 3;
  transition: all 0.3s ease;
}

/* Clicked State for OTP Button Wrapper */
#otp-button-wrapper.clicked .otp-animated-upload-button {
  background: #ccc !important;
}

#otp-button-wrapper.clicked .fill {
  height: 100%; /* Fill to 100% height when clicked */
}

#otp-button-wrapper.clicked .fa-arrow-right {
  opacity: 0;
  transform: scale(0);
}

/* Success State for OTP Button Wrapper */
#otp-button-wrapper.success .fa-check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 768px) {
  /* Ensure the container layout is column-wise on mobile */
  .container {
    flex-direction: column;
    min-height: 700px; /* Adjust min-height for stacked layout */
  }

  /* Reduce padding-bottom for the <p> inside overlay panels */

  .form-container {
    width: 100%;
    position: relative; /* Remove absolute positioning */
    padding: 11px; /* Reduced padding for smaller screens */
    order: 2; /* Forms below overlay */
    transform: translateX(
      0
    ) !important; /* Override desktop active state transform */
    transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Re-enable transition for form-container */
  }

  /* Overlay container adjustments for mobile */
  .overlay-container {
    width: 100%;
    left: 0;
    position: relative;
    border-radius: 15px 15px 0 0; /* Top corners rounded */
    height: 240px; /* Fixed height for overlay on small screens */
    order: 1; /* Overlay on top */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow for mobile overlay */
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Keep transition */
  }

  /* Overlay transition adjustments for mobile */
  .overlay {
    width: 100%; /* Full width for overlay */
    left: 0; /* Align overlay */
    flex-direction: row; /* Panels side-by-side within overlay if space allows */
    transform: translateX(0) !important; /* Override active state for overlay */
  }

  .overlay-panel {
    width: 100%; /* Panels take full width of overlay */
    padding: 10px; /* Adjust padding */
    transform: translateX(0) !important; /* Keep panels visible */
    opacity: 1 !important; /* Keep panels visible */
  }

  /* When the right panel is active, move overlay left */
  .container.right-panel-active .overlay-left {
    transform: translateX(0);
    opacity: 1;
  }

  /* When the right panel is active, move overlay right */
  .container.right-panel-active .overlay-right {
    transform: translateX(20%);
    opacity: 0;
  }

  /* Handle showing/hiding forms via JS for mobile */
  .sign-up-container.hidden-mobile,
  .sign-in-container.hidden-mobile {
    display: none;
  }

  /* Adjust form container active state */
  .container.right-panel-active .form-container {
    transform: translateX(0);
  }

  /* Inputs and groups take more width on small screens */
  .form-container input,
  .form-container .input-group,
  .form-container select {
    width: 100%; /* Full width on small screens */
    max-width: unset; /* Remove max-width constraint */
    margin-bottom: 10px; /* Add consistent spacing between fields */
  }

  hr {
    width: 80%; /* Adjust hr width for smaller screens */
    margin: 10px auto; /* Adjust margin for better alignment */
  }

  /* Reduce font size of labels or placeholders to fit smaller screen */
  .form-container input::placeholder {
    font-size: 14px; /* Smaller placeholder text */
  }

  #login_mobile {
    width: 200px;
  }

  /* Adjust overlay left position for mobile */
  .overlay-left {
    transform: translateX(-20%); /* Start slightly off-screen left */
    opacity: 0; /* Hidden initially */
    background: #726ce0;
    background: linear-gradient(
      90deg,
      rgba(114, 108, 224, 1) 0%,
      rgba(61, 156, 238, 1) 100%
    );
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      opacity 0.7s ease;
    height: 220px; /* Added opacity transition */
  }

  /* Right overlay styling (for "Hello, Print Partner!") */
  .overlay-right {
    right: 0;
    transform: translateX(0); /* Initially visible */
    opacity: 1;
    background: linear-gradient(
      to right,
      #e87b37,
      #e8375a
    ); /* The red gradient for "Hello, Print Partner!" */
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55),
      opacity 0.7s ease;
  }

  /* Center align text and button inside overlay-right panel */
  .overlay-panel.overlay-right {
    display: flex;
    flex-direction: column;
    /* Vertically center content */
    align-items: center; /* Horizontally center content */
    padding: 15px;
  }

  /* Ensure the text stays centered */
  .overlay-panel.overlay-right h1,
  .overlay-panel.overlay-right p {
    text-align: center; /* Center-align text */
    margin-bottom: 2px; /* Reduce bottom margin if needed */
  }

  /* Adjust button margin for overlay buttons */

  /* When right panel is active, slide overlay right */
  .container.right-panel-active .overlay-right {
    transform: translateX(20%);
    opacity: 0;
  }

  /* Button adjustments for mobile screens */
  .custom-btn.btn-9 {
    font-size: 14px; /* Adjust font size */
    width: 100%; /* Make the button take full width */
    border-radius: 12px; /* Slightly smaller border radius for mobile */
    letter-spacing: 0.4px; /* Adjust letter spacing for better legibility */
  }

  /* Adjusting background for mobile */
  .custom-btn.btn-9:after {
    background: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
    border-radius: 12px; /* Matching border radius for mobile */
  }

  /* Hover effect on mobile */
  .custom-btn.btn-9:hover {
    border: 3px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 20px rgba(182, 33, 254, 0.3); /* Slightly reduced shadow for mobile */
  }

  /* Mobile Specific Adjustments for btn-10 */
  .custom-btn.btn-10 {
    font-size: 14px; /* Smaller font size for mobile */
    /* Reduced padding for a more compact look */
    width: 100%; /* Make the button take full width */
    border-radius: 12px; /* Slightly smaller border radius */
    letter-spacing: 0.4px; /* Adjust letter spacing for better legibility */
  }

  .custom-btn.btn-10:after {
    border-radius: 12px; /* Match border radius for mobile */
  }

  .custom-btn.btn-10:hover {
    box-shadow: 0 4px 15px rgba(42, 82, 152, 0.3); /* Reduced shadow on mobile */
  }
}

/* === Layout Setup === */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* needed for positioning the animation inside */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Form Containers */
.form-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Lottie Animation (Legacy - can be removed if unused) */
.lottie-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex: 1;
  text-align: center;
}

/* === Floating Animation Styles === */
.floating-animation {
  position: absolute;
  bottom: -45px; /* 🔽 lowered slightly */
  right: -50px;
  /* 🔙 pushed closer to center */
  z-index: 10;
  transition: transform 0.6s ease-in-out, left 0.6s ease-in-out,
    right 0.6s ease-in-out, bottom 0.4s ease, opacity 0.5s ease;
  pointer-events: none;
  opacity: 1;
  transform: scale(1);
}

/* Shifted position for Sign Up panel */
.container.right-panel-active .floating-animation {
  left: 20px;
  right: auto;
  bottom: -45px;
  opacity: 1;
  transform: scale(1.05); /* 👀 subtle zoom effect */
}
.sso-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sso-divider::before,
.sso-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ccc;
}
.google-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  justify-content: center;
}
.google-btn img {
  width: 18px;
  height: 18px;
}
.google-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
ack button on OTP screen */ .otp-back-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #eef2f7;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.otp-back-btn:hover {
  transform: translateY(-2px);
}
.otp-back-btn i {
  color: #333;
  font-size: 16px;
}