/* public/assets/css/auth/forgot-password.css */ /* Import Google Fonts for Poppins - Add this to your HTML if not already there: */ body { font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #00C48C; /* Green background from the image */ overflow-x: hidden; /* Prevent horizontal scroll on small screens */ } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; /* Add some padding for very small screens to prevent content from touching edges */ padding: 15px; box-sizing: border-box; } .forgot-password-container { background-color: #ffffff; /* White background for the form container */ padding: 60px 40px; /* Reduced vertical padding slightly for better responsiveness */ border-radius: 15px; /* Rounded corners */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ text-align: center; width: 100%; /* Take full width within its flex context */ max-width: 450px; /* Max width remains for larger screens */ box-sizing: border-box; /* Remove fixed height to allow content to dictate height, crucial for responsiveness */ /* height: auto; */ } h2 { color: #333; margin-bottom: 20px; font-size: 28px; font-weight: 600; word-wrap: break-word; /* Ensure long titles wrap */ } p { color: #666666; margin-bottom: 40px; /* Slightly reduced margin-bottom for better flow on small screens */ line-height: 1.5; font-size: 16px; word-wrap: break-word; /* Ensure long descriptions wrap */ max-width: 350px; /* Limit paragraph width for better readability on larger screens */ margin-left: auto; margin-right: auto; } .form-group { margin-bottom: 25px; width: 100%; /* Ensure form group takes full available width */ } .form-group input[type="email"] { width: 100%; /* Use 100% and let padding handle inner spacing */ padding: 15px; border: 1px solid #dddddd; border-radius: 10px; /* Rounded input field */ font-size: 16px; color: #333333; background-color: #f5f5f5; /* Light grey background for input */ box-sizing: border-box; /* Crucial for padding to be included in width */ outline: none; -webkit-appearance: none; /* Remove default browser styling for consistency */ -moz-appearance: none; appearance: none; } .form-group input[type="email"]::placeholder { color: #aaaaaa; } .btn-submit { background-color: #00C48C; /* Green button */ color: #ffffff; padding: 15px 30px; border: none; border-radius: 20px; /* Rounded button */ font-size: 18px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; width: 60%; /* Original width remains for larger screens */ max-width: 250px; /* Add max-width for the button to prevent it from getting too wide */ box-sizing: border-box; margin-top: 10px; /* Add some top margin to separate from input */ margin-bottom: 40px; /* Slightly reduced margin-bottom for better flow on small screens */ -webkit-appearance: none; /* Remove default button styling for consistency */ -moz-appearance: none; appearance: none; } .btn-submit:hover { background-color: #00C48C; /* Darker green on hover */ } .login-link { margin-top: 0; /* Reset margin-top, spacing controlled by button's margin-bottom */ font-size: 13px; } .login-link a { color: #00C48C; /* Green link color */ text-decoration: none; transition: color 0.3s ease; } .login-link a:hover { color: #009966; /* Darker green on hover */ text-decoration: underline; } /* Message styling (for PHP messages) */ .message { padding: 10px 15px; margin-bottom: 20px; border-radius: 8px; font-size: 14px; text-align: left; width: 100%; box-sizing: border-box; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Responsive Adjustments */ /* Mobile devices (e.g., iPhones in portrait) */ @media (max-width: 480px) { .container { padding: 10px; /* Less padding on very small screens */ } .forgot-password-container { padding: 40px 25px; /* Adjust padding for smaller screens */ border-radius: 10px; /* Slightly less rounded for very small screens */ } h2 { font-size: 24px; margin-bottom: 15px; } p { font-size: 14px; margin-bottom: 30px; max-width: 100%; /* Allow text to take full width */ } .form-group input[type="email"] { padding: 12px; font-size: 15px; } .btn-submit { width: 80%; /* Button takes more width on smaller screens */ padding: 12px 20px; font-size: 16px; border-radius: 15px; /* Adjust button border-radius */ margin-bottom: 30px; /* Adjust margin */ } .login-link { font-size: 12px; } } /* Tablets and larger phones (landscape) */ @media (min-width: 481px) and (max-width: 768px) { .forgot-password-container { padding: 50px 35px; /* Moderate padding */ max-width: 400px; /* Slightly reduce max-width for tablets */ } h2 { font-size: 26px; } p { font-size: 15px; margin-bottom: 35px; } .form-group input[type="email"] { padding: 14px; font-size: 16px; } .btn-submit { width: 65%; /* Slightly wider button */ padding: 14px 25px; font-size: 17px; margin-bottom: 35px; } } /* Larger screens (desktop, laptops) - current styles are largely for this */ @media (min-width: 769px) { .forgot-password-container { /* Your default styles for padding, max-width, etc. work well here */ padding: 100px 40px; /* Revert to larger padding for desktop */ max-width: 450px; } .btn-submit { width: 60%; /* Revert to 60% width */ max-width: none; /* Remove max-width on large screens if desired, or keep it */ } }