/**
 * Frontend styles for Qclinicas Cloud Appointments plugin.
 *
 * @package QclinicasCloudAppointments
 */

.qclinicas-cloud-appointments-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 8px;
}

.qclinicas-cloud-appointments-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 8px;
	background-color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.qclinicas-cloud-appointments-iframe[src] {
	opacity: 1;
}

@keyframes qclinicas-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
	.qclinicas-cloud-appointments-container {
		border-radius: 4px;
		padding-bottom: 75%; /* Adjust aspect ratio for mobile */
	}

	.qclinicas-cloud-appointments-iframe {
		border-radius: 4px;
	}
}

/* Allow full height option - can be activated via custom CSS */
.qclinicas-cloud-appointments-container.full-height {
	padding-bottom: 0;
	min-height: 600px;
}

.qclinicas-cloud-appointments-container.full-height .qclinicas-cloud-appointments-iframe {
	position: relative;
	height: 600px;
}