/* General Reset */
* {
    box-sizing: border-box;
    font-family: Verdana, Arial, sans-serif;
}/*
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;  Prevent horizontal scrolling if unnecessary */
 /*   height: 100%;  Ensure the height is constrained to the viewport
}
 */
/* SCALE 
.scale-object {
transform: scale(1.2);
margin: 130px;
}
*/
.hours p {
	text-align: center;
}
.inner-section-sched {
    background-color: #fff; /* White background */
    padding: 0px; /* Padding inside the rectangle */
    margin: 0px; /* Center the rectangle and add spacing around it */
    max-width: 100%; /* Limit rectangle width for better layout */
	height: auto;
    border-radius: 10px; /* Rounded corners for visual appeal */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	text-align: center;
}
/*White rectangle formatting for the schedule page only */
.white-rectangle-sched {
	overflow: auto;
	padding: 10px; /* Reduce padding */
	border-radius: 5px; /* Less rounded corners */
	margin: 0px; /* Smaller margin */
	max-width: 100%; /* Use full width */
	width: 100%;
	height: auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	overflow-y: auto;
}

.white-rectangle-sched p {
	color: #000000; /* Subtle gray for paragraph text */
    font-size: clamp(13px, 0.90vw, 16px);
	text-align: center;
	}

/* Two Column Layout */
.two-column-container {
    background-color: #fff;
	align-items: center;
    border: 3px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;  
	max-width: 100%;
	max-height: 100%;
	
 /*   height: fit-content;  Dynamically adjusts height */	/* max-height: 550px;  */
    display: flex;
    flex-direction: column; /* Vertical stacking */
    gap: 20px;
    box-shadow: inset 50px 50px 35px 35px rgba(3,71,206,.3) ;
	box-shadow: inset 35px 35px 50px 50px  rgba(3,71,206,.3) ;
	overflow: auto;
}

.two-column-container h1 {
	background-color: #fff;
    border: 3px solid #000;
	color: #000000;
    border-radius: 10px;
	padding: 0px;
	box-shadow: inset 8px 8px 24px 0px rgba(3,71,206,.3);  /*(66, 68, 90, 0.3);  */
	text-shadow: 
        -2px -2px 4px rgba(255, 255, 255, 0.8), /* Highlight */
        2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow */
	margin-bottom: 20px; /* removed in form-title */
	text-align: center;
}

/* Form Title Styling */
.form-title {
    width: 100%;
    margin: 0;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 10px ;
    padding: 10px 0;
    box-shadow: inset 8px 8px 24px 0px rgba(3, 71, 206, 0.3);
    text-shadow: 
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}
/* END FORM STYLE */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal-sized columns */
    gap: 20px; /* Space between calendar and actions containers */
    height: 100%; /* Full height of the parent container */
	width: 100%;
	
/*	flex: 1;  Fill the remaining space */
 /* align-items: stretch; Maintain proportions */
    
/*  width: 100%;  Ensure full width inside the container */
overflow: auto;
}

.calendar-header {
    text-align: center;
	text-shadow: 
        -2px -2px 4px rgba(255, 255, 255, 0.8), /* Highlight */
        2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow */
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    background-color: #f9f9f9;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    box-shadow: inset 8px 8px 24px 0px rgba(3, 71, 206, 0.3);
    height: 100%; /* Match height of container */
    width: 100%; /* Match width of container */
    min-height: 0; /* Prevent default stretching */
    min-width: 0; /* Prevent default stretching */

}
.actions-container {
	
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    background-color: #f9f9f9;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    box-shadow: inset 8px 8px 24px 0px rgba(3, 71, 206, 0.3);
    height: 100%; /* Match height of container */
    width: 100%; /* Match width of container */
    min-height: 300px; /* Prevent default stretching */
	

}

/*.actions-container .check-in-box, */
.actions-container .payment-box {
    margin-bottom: 20px;
}

.actions-container h3 {
    color: #145ff1;
}

/* START formatting of the class hours and content inside of action-container */
	.schedule-item {
		margin-bottom: 10px; /* Adds spacing between each schedule item */
		line-height: 1.5; /* Adjust line spacing for better readability */
		font-size: 1rem; /* Optional: Adjust text size */
	}
	.schedule-item strong {
		color: #145ff1; /* Optional: Color for the bolded hours */
	}
/* END formatting o the class hours and content */


.calendar-container h3 {
	text-align: left;
}
	
.selected {
    background-color: #0073e6; /* Blue background for selected day */
    color: #fff; /* White text */
    font-weight: bold; /* Emphasize selected day */
    border: 2px solid #005bb5; /* Stronger border for visibility */
    box-shadow: 0 0 10px rgba(0, 115, 230, 0.5); /* Glow effect */
}

#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
    height: 100%; /* Full height of the calendar container */
    width: 100%; /* Full width of the calendar container */
    padding: 5px;
    align-content: start; /* Start alignment for content */
}

#calendar.selected {
    background-color: #145ff1;
    color: white;
}
/*###################################*/
/* Calendar day button style */
#calendar div {
    display: inline-flex;
    font-size: 1.2rem; /* Larger font size for better readability */
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure buttons fit nicely in grid */
    aspect-ratio: 1; /* Keep buttons square */
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Raised appearance */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    padding: 10px;
}

/* Hover effect for calendar day buttons */
#calendar div:hover {
    background-color: #e6f0ff;
    border-color: #145ff1;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow for hover */
    transform: translateY(-2px); /* Lift effect */
}

/* Selected day button style */
#calendar div.selected {
    background-color: #145ff1;
    color: #fff;
    border-color: #0e8e07; /* Green outline for selection */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* More prominent shadow */
    transform: translateY(-2px); /* Consistent lift with hover */
    font-weight: bold; /* Highlighted text */
}
/* Style the iframe to remove extra space */
.cal-embed {
    display: block; /* Prevent inline iframe margin issues */
    width: 100%;
    height: 85vh; /* Ensure this matches the desired viewport height */
    border: none; /* Remove default iframe borders */
    margin: 0; /* Ensure no margin is added */
    padding: 0;
    overflow: hidden; /* Ensure no internal scrollbars show */
}

.info-box {
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: auto; /* Allow scrolling if content overflows */
    height: 100%; /* Stretch to match container */
    flex-grow: 1; /* Evenly distribute space in actions-container */
}

#dailysched {
	background-color: fff;
	width: 100%;
	height: 100%;
}
#day-info-title {
    font-size: 1.5vw; /*1.2rem;*/
    font-weight: bold;
	text-shadow: 
	-2px -2px 4px rgba(255, 255, 255, 0.8), /* Highlight */
	2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow */	
    margin-bottom: 10px;
	text-align: center;
}

#day-info-title span {
    font-size: 0.85rem;
    color: #555; /* Subtle gray color */
    margin-left: 5px;
}
#day-info-content {
	font-size: 5vw; /*overflow: auto;	*/
	max-height: 350px;
	text-align: Left;
}

button {
    background-color: #145ff1;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: #0e8e07;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
	margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

input:focus {
    outline: 2px solid #145ff1;
}
/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Stack elements on mobile */
    }
	.white-rectangle-sched p,
	blockquote {
		font-size: 12px !important;
	}
    .calendar-container,
    .actions-container {
        min-height: auto;
        min-width: auto;
        padding: 5px; /* Adjust padding */
    }
	.two-column-container {
		margin-right: 10px;
	}
	#calendar {
		gap: 5px;
	}
    #calendar div {
        font-size: 0.9rem; /* Reduce font size on mobile */
        padding: 0px; /* Smaller padding for better fit */
		aspect-ratio: 1; /* Maintain square buttons */
    }

    .calendar-container {
        padding: 5px; /* Adjust padding for smaller screens */
    }
	.info-box {
		margin-top: 10px;
	}
	#day-info-title {
    font-size: 5vw;
	}
	#day-info-content {
		text-align: left;
	}
}