/* Outer container: centres the login card */
.index-outer-container {
	width: 100%;
	height: 100vh;
	min-height: 90vh;
	box-sizing: border-box;

    background-color: var(--brand-background);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Inner container: the login card */
.inner-container {
    width: 80%;
    height: 90vh;
    display: flex;
    background-color: var(--brand-background);
    border: 1px solid var(--brand-title);
    border-radius: 10px;
    overflow: hidden;
}

/* Image column */
.image-column {
	flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.image-column img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* Login column */
.login-column {
	min-width: 0;
    padding: 30px 25px; /* balanced on all sides */
    display: flex;
    flex-direction: column;
    justify-content: center;
	text-align: center;
}


/* Title spacing only — font comes from global.css */
.title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: left;
}

/* Login form layout */
.login-row {
    display: flex;
    align-items: center;
	text-align: center;
    gap: 8px; /* reduced for balance */
	justify-content: center;
}

.login-row label {
    width: auto;       /* no forced width */
    text-align: center;  /* no right alignment pushing it inward */
    margin: 0;
    padding: 0;
}

.login-form input {
    max-width: 100%;
    width: 20ch;
    box-sizing: border-box;
}


.login-form button {
    padding: 8px 10px; /* matches input padding */
}

.login-silver {
    color: #C9CCD1;
    font-size: 80px;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

/* Error spacing only */
.error {
    margin-bottom: 10px;
}

/* Fade-right mask */
.fade-right {
    mask-image: linear-gradient(to right, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
}

.login-row {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 8px;
    justify-content: center;
}

.login-row label {
    width: auto;
    text-align: center;
    margin: 0;
    padding: 0;
}

.login-form input {
    max-width: 100%;
    width: 20ch;
    box-sizing: border-box;
}

.login-form button {
    padding: 8px 10px;
}

.login-silver {
    color: #C9CCD1;
    font-size: 80px;
	text-shadow:
    -1px -1px 0 #7A7A7A,
     1px -1px 0 #7A7A7A,
    -1px  1px 0 #7A7A7A,
     1px  1px 0 #7A7A7A;

}

.login-column {
    min-width: 0;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Responsive layout */
@media (max-width: 900px) {
    .inner-container {
        flex-direction: column;
        width: 80%;
		height: auto;
		margin-bottom: 20px;
    }

    .image-column {
        padding: 10px;
    }

    .title {
        text-align: center;
    }
	
	.fade-right {
        mask-image: none;
        -webkit-mask-image: none;
    }
	
	.index-outer-container {
	display: flex;
	align-items: safe center;
	justify-content: safe center;
	margin-bottom: 20px;
	}

	
}