/* Portrait Mode - Equal margins all sides, NO scrolling - ALL SCREEN WIDTHS */
@media screen and (orientation: portrait) {
	.form-horizontal {
		width: calc(100vw - 40px); /* Wide side margins (20px each side) */
		max-width: none;
		margin: 15px 20px 5px 20px; /* Reduced bottom margin to 5px */
		padding: 15px 15px 5px 15px; /* Reduced bottom padding */
		min-height: auto;
		max-height: calc(100vh - 40px); /* Ensure it fits viewport with margins */
		height: auto;
		display: block;
		position: relative;
	}
	
	body {
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* Don't override background color - let head.php handle it */
	}
	
	html {
		height: 100vh;
		max-height: 100vh;
		overflow: hidden; /* Prevent html scroll */
	}
	
	/* Ensure last elements don't add extra bottom spacing */
	#login_table {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
		height: auto !important;
	}
	
	#login_table tr {
		height: auto;
	}
	
	#login_table td {
		padding: 5px 0 !important; /* Reduced vertical padding */
	}
	
	#login_table tr:last-child td {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.social-cell {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* Landscape Mode - Use same dimensions as portrait, centered and scrollable - ALL SCREEN WIDTHS */
@media screen and (orientation: landscape) {
	.form-horizontal {
		/* Use portrait-like width based on typical mobile screen heights */
		width: calc(100vh - 40px); /* vh in landscape ≈ vw in portrait */
		max-width: 400px; /* Cap at reasonable mobile width */
		min-width: 300px; /* Ensure minimum usable width */
		margin: 15px auto 5px auto; /* Centered horizontally with auto margins */
		padding: 15px 15px 5px 15px;
		min-height: auto;
		max-height: none; /* Allow full height */
		height: auto;
		display: block;
		position: relative;
	}
	
	body {
		height: auto; /* Allow body to expand */
		min-height: 100vh;
		max-height: none;
		padding: 0;
		margin: 0;
		overflow-y: auto; /* Enable vertical scrolling */
		overflow-x: hidden;
		display: block; /* Change from flex to block */
		/* Don't override background color */
	}
	
	html {
		height: auto;
		max-height: none;
		overflow: auto; /* Allow html to scroll if needed */
	}
	
	/* Ensure last elements don't add extra bottom spacing */
	#login_table {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
		height: auto !important;
	}
	
	#login_table tr:last-child td {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.social-cell {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	/* Keep social buttons same size as portrait */
	.social-cell img {
		width: 80px !important;
		height: 27px !important;
	}
	
	.social-cell a {
		margin: 0 10px;
	}
}

/* General styles - ALL SCREEN WIDTHS */
/* Table and cell adjustments */
#login_table {
	width: 100% !important;
	height: 90% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	border-collapse: separate;
	border-spacing: 0;
	box-sizing: border-box;
	overflow: hidden; /* Prevent table overflow */
	margin: 0; /* Remove any table margins */
}

#login_table td {
	box-sizing: border-box;
	word-wrap: break-word;
	overflow: hidden;
}

/* Remove extra spacing from table rows */
#login_table tr:last-child {
	margin-bottom: 0 !important;
}

#login_table tr:last-child td {
	padding-bottom: 0 !important;
}

/* Style for password toggle cell */
.side-column {
	width: 10%;
	text-align: center;
	vertical-align: middle;
}

.main-column {
	width: 80%;
	text-align: center;
	vertical-align: middle;
}

/* Adjust input field widths */
.form-group input, #username, #password, #confirm_password, #email{
	width: 100% !important;
	max-width: 280px !important;
	min-width: 200px !important;
	box-sizing: border-box !important;
}

/* Social media table adjustments */
.social-table {
	width: 100% !important;
	max-width: 100% !important;
	margin: 10px auto 0 auto !important; /* Remove bottom margin */
	box-sizing: border-box;
	overflow: hidden;
}

/* Button adjustments */
.button3 {
	/* max-width: calc(100% - 20px);*/
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Logo adjustments */
.Logo {
	max-width: 100%;
	height: auto;
	max-height: 80px;
}

/* Social Media Button Styling - All Devices */
.social-cell {
	text-align: center !important;
	padding: 10px 0 !important;
}

.social-cell a {
	display: inline-block;
	margin: 0 8px;
	text-decoration: none;
}

.social-cell img {
	border-radius: 12px !important; /* More prominent rounded corners */
	box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
	transition: all 0.2s ease !important;
	vertical-align: middle;
	width: 80px;
	height: 27px;
}

.social-cell img:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 12px rgba(0,0,0,0.25) !important;
	border-radius: 15px !important;
}

/* General overflow fixes */
* {
	max-width: 100%;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* Very small mobile screens (iPhone SE, etc.) - Keep these for refinements */
@media screen and (max-width: 480px) {
	.form-horizontal {
		width: calc(100vw - 20px) !important;
		margin: 10px 10px 3px 10px !important; /* Reduced bottom margin */
		padding: 10px 10px 3px 10px !important; /* Reduced bottom padding */
	}
	
	.form-group input, #username, #password {
		max-width: 250px !important;
		min-width: 180px !important;
	}
	
	.social-cell a {
		margin: 0 6px; /* Slightly reduced spacing for small screens */
	}
	
	.social-cell img {
		width: 75px !important; /* Slightly smaller for very small screens */
		height: 25px !important;
	}
	
	/* Ensure last elements don't add extra bottom spacing */
	#login_table {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
		height: 90%;
	}
	
	html {
		height: 80%;
	}
	
	#login_table tr:last-child td {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.social-cell {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* Landscape orientation specific adjustments for very small screens */
@media screen and (max-height: 480px) and (orientation: landscape) {
	.form-horizontal {
		width: calc(100vh - 30px) !important;
		max-width: 350px !important;
		margin: 10px auto 5px auto !important;
		padding: 10px 10px 3px 10px !important;
	}
	
	.Logo {
		max-height: 60px !important;
	}
	
	.form-group {
		height: 50px !important;
		padding: 5px !important;
	}
	
	.social-cell img {
		width: 65px !important;
		height: 22px !important;
	}
	
	.social-cell a {
		margin: 0 6px;
	}
	
	/* Remove any potential bottom spacing issues */
	.social-cell {
		padding: 5px 0 0 0 !important;
		margin-bottom: 0 !important;
	}
	
	#login_table {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	#login_table tr:last-child td {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* Ensure scrollability works properly */
.zoom-wrapper {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}