/* Template 2 - Contact Widget Styles */

/* Floating Contact Button */
.contact-button {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background: linear-gradient(
		135deg,
		var(--accent) 0%,
		var(--accent-hover) 100%
	);
	color: var(--t2-text);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow:
		var(--shadow-medium, 0 4px 20px rgba(0, 0, 0, 0.4)), var(--shadow-glow);
	transition: all var(--transition-fast);
	z-index: var(--z-overlay);

	&:hover {
		transform: scale(1.1) rotate(10deg);
		box-shadow:
			var(--shadow-dark, 0 8px 40px rgba(0, 0, 0, 0.5)),
			0 0 40px var(--accent-glow);
	}

	&:active {
		transform: scale(0.95);
	}

	i {
		pointer-events: none;
	}
}

/* Contact Modal */
.contact-modal {
	position: fixed;
	bottom: 100px;
	right: 24px;
	width: 400px;
	max-height: 75vh;
	background: var(--t2-bg-card);
	border: 1px solid var(--t2-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-dark, 0 8px 40px rgba(0, 0, 0, 0.5));
	display: none;
	flex-direction: column;
	z-index: var(--z-modal);
	overflow: hidden;
	animation: modalSlideUp 0.3s ease;

	&.open {
		display: flex;
	}
}

@keyframes modalSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-modal-header {
	background: linear-gradient(
		135deg,
		var(--accent) 0%,
		var(--accent-hover) 100%
	);
	color: var(--text-primary);
	padding: var(--spacing-lg) var(--spacing-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

.contact-modal-close {
	background: none;
	border: none;
	color: var(--t2-text);
	font-size: 28px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-fast);
	border-radius: var(--radius-full);

	&:hover {
		transform: rotate(90deg);
		background: rgba(255, 255, 255, 0.2);
	}
}

.contact-modal-body {
	overflow-y: auto;
	padding: var(--spacing-xl);
	flex: 1;

	form {
		display: grid;
		gap: var(--spacing-lg);
	}

	label {
		font-weight: var(--font-weight-medium);
		color: var(--t2-text);
		font-size: var(--font-size-sm);
		display: block;
		margin-bottom: var(--spacing-xs);

		span {
			color: var(--accent);
			margin-right: var(--spacing-xs);
		}
	}

	input,
	textarea {
		width: 100%;
		border: 1px solid var(--t2-border);
		border-radius: var(--radius-md);
		padding: var(--spacing-md);
		font-size: var(--font-size-base);
		background: var(--t2-bg-input);
		color: var(--t2-text);
		transition: all var(--transition-fast);

		&::placeholder {
			color: var(--text-muted);
		}

		&:focus {
			outline: none;
			border-color: var(--accent);
			box-shadow: 0 0 0 3px var(--accent-glow);
		}
	}

	textarea {
		resize: vertical;
		min-height: 100px;
	}

	button[type="submit"] {
		background: linear-gradient(
			135deg,
			var(--accent) 0%,
			var(--accent-hover) 100%
		);
		color: var(--t2-text);
		border: none;
		padding: var(--spacing-md) var(--spacing-xl);
		border-radius: var(--radius-md);
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-base);
		cursor: pointer;
		transition: all var(--transition-fast);

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-glow);
		}
	}
}

/* Responsive */
@media (max-width: 480px) {
	.contact-modal {
		width: calc(100% - 48px);
		right: 24px;
		left: 24px;
	}

	.contact-button {
		width: 56px;
		height: 56px;
		font-size: 22px;
	}
}