/**
 * Frontend styles for Tekguild Plugin Template
 *
 * @package Tekguild_Plugin_Template
 * @since 1.0.0
 */

/* === Main Container === */
.tekguild-plugin-template {
	margin: 20px 0;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.tekguild-plugin-template__header {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.tekguild-plugin-template__title {
	margin: 0;
	font-size: 24px;
	color: #333;
}

.tekguild-plugin-template__content {
	line-height: 1.6;
	color: #666;
}

/* === Buttons === */
.tekguild-plugin-template__button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #0073aa;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	transition: background-color 0.3s ease;
}

.tekguild-plugin-template__button:hover {
	background-color: #005177;
	color: #fff;
}

.tekguild-plugin-template__button--secondary {
	background-color: #666;
}

.tekguild-plugin-template__button--secondary:hover {
	background-color: #444;
}

/* === Loading State === */
.tekguild-plugin-template--loading {
	opacity: 0.6;
	pointer-events: none;
}

.tekguild-plugin-template__spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #0073aa;
	border-radius: 50%;
	animation: tekguild-spin 1s linear infinite;
}

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

/* === Responsive === */
@media screen and (max-width: 768px) {
	.tekguild-plugin-template {
		padding: 15px;
	}

	.tekguild-plugin-template__title {
		font-size: 20px;
	}
}