body {
    font-family: 'Poppins', sans-serif;
    background-color: #2c2c2c; /* Consistent dark background from homepage */
    color: #f5f5dc; /* Off-white for general text */
    line-height: 1.6;
    margin: 0;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* New wrapper to handle centering */
.signup-page-wrapper {
    display: flex; /* Make it a flex container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure it takes full viewport height to center its content */
    width: 100%; /* Take full width */
}

.signup-container {
    width: 100%;
    max-width: 1000px; /* Controls the maximum width of the entire login card */
    margin: auto; /* Ensure margin auto works with max-width */
    padding: 20px; /* Padding for smaller screens around the card */
}

.signup-card {
    background-color: #3a3a3a; /* Background for the card itself */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Ensures rounded corners are respected by children */
    display: flex;
    align-items: stretch; /* Makes direct children (the col-md-6 divs) stretch to the height of the tallest one */
}

/* Left Column - Sign Up Form Section */
.signup-form-section {
    background-color: #4b2e2e; /* Darker brown for the form side */
    padding: 40px !important; /* Override default Bootstrap padding */
    color: #f5f5dc;
    flex-grow: 1; /* Allows this column to grow and take available space */
    display: flex; /* Makes content inside this column behave as a flex container */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers content vertically within the form section */
    min-height: 600px; /* Increased min-height to provide more space, adjust as needed */
}

.signup-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.signup-header img {
    margin-right: 10px;
}

.brand-name {
    font-size: 1.8rem;
    color: #f5f5dc;
    margin-bottom: 0;
    font-weight: 700;
}

.brand-name span {
    color: #d1b48c; /* Accent color for the dot */
}

.welcome-text {
    font-size: 2.2rem;
    font-weight: 700;
    color: #d1b48c; /* Accent color for welcome text */
}

.tagline {
    font-size: 1rem;
    color: #f5f5dc;
}

.form-label {
    color: #f5f5dc;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-control {
    background-color: #5c3b3b; /* Input background color */
    border: 1px solid #7c5f5f; /* Input border color */
    color: #f5f5dc; /* Input text color */
    padding: 10px 15px;
    border-radius: 8px;
}

.form-control::placeholder {
    color: rgba(245, 245, 220, 0.7); /* Placeholder text color */
}

.form-control:focus {
    background-color: #5c3b3b;
    border-color: #d1b48c; /* Accent color on focus */
    box-shadow: 0 0 0 0.25rem rgba(209, 180, 140, 0.25); /* Accent shadow on focus */
    color: #f5f5dc;
}

/* No Remember Me checkbox on signup, but keep style in case it's added */
.form-check-input {
    background-color: #5c3b3b;
    border-color: #7c5f5f;
}

.form-check-input:checked {
    background-color: #d1b48c;
    border-color: #d1b48c;
}

.form-check-label {
    color: #f5f5dc;
}

.invalid-feedback {
    color: #ffda00; /* A contrasting color for error messages */
    font-size: 0.875em;
    margin-top: 0.25rem;
}

.forgot-password-link, .login-link { /* Renamed signup-link to login-link */
    color: #d1b48c; /* Accent color for links */
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password-link:hover, .login-link:hover {
    color: #b89d7b;
}

.btn-primary {
    background-color: #d1b48c; /* Primary button color */
    border-color: #d1b48c;
    color: #2c2c2c; /* Dark text on button */
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #b89d7b;
    border-color: #b89d7b;
    color: #2c2c2c;
}

.or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(245, 245, 220, 0.8);
}

.or-separator .line {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(245, 245, 220, 0.3);
}

.or-separator .text {
    padding: 0 15px;
    font-size: 0.9rem;
}

.btn-google {
    background-color: #5c3b3b; /* Darker background for social button */
    border: 1px solid #7c5f5f;
    color: #f5f5dc;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-google:hover {
    background-color: #7c5f5b;
    border-color: #a08181;
    color: #f5f5dc;
}

.btn-google img {
    filter: invert(1); /* Invert color of icon if it's black on light background */
}

/* Password Toggle Button Styling */
.password-toggle-btn {
    border-color: #7c5f5f; /* Match input border */
    color: #f5f5dc; /* Icon color */
    background-color: #5c3b3b; /* Match input background */
}

.password-toggle-btn:hover {
    background-color: #7c5f5f; /* Darker hover */
    border-color: #a08181; /* Darker border hover */
    color: #f5f5dc;
}

/* Right Column - Illustration Section */
.signup-image-section { /* Renamed login-image-section to signup-image-section */
    background-color: #3a3a3a; /* Match login card background */
    border-radius: 0 15px 15px 0; /* Apply border radius only to the right side */
    padding: 0; 
    background-image: url('../image/image_da4176.jpg'); /* Path to your illustration image */
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
}


/* Responsive adjustments */
@media (max-width: 767.98px) {
    .signup-card {
        flex-direction: column; /* Stack columns on small screens */
        border-radius: 15px; /* Full border-radius for stacked card */
        align-items: center; /* Center items when stacked */
    }

    .signup-form-section {
        border-radius: 15px 15px 0 0; /* Rounded top corners for stacked form */
        padding: 30px !important; /* Adjust padding for small screens */
        min-height: auto; /* Remove min-height for mobile when stacked */
    }

    .signup-image-section {
        border-radius: 0 0 15px 15px; /* Rounded bottom corners for stacked image */
        min-height: 250px; /* Give it a minimum height for mobile view to show the image */
        padding: 0; 
        background-size: contain; /* On mobile, 'contain' might be better to see the full illustration */
        background-position: center; 
    }
}