/**
 * WorkZen Connector - Shortcodes Styles
 * Styles for embedded forms, schedulers, and shortcode buttons
 *
 * @package WorkZen_Connector
 * @since 1.10.0
 */

/* ========================================================================
   Embedded Form Container
   ======================================================================== */

.wzc-embedded-form-container,
.wzc-embedded-scheduler-container {
	max-width: 800px !important;
	margin: 2rem auto !important;
	padding: 0 1rem !important;
}

.wzc-embedded-form,
.wzc-embedded-scheduler {
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
	padding: 2.5rem !important;
	border: 1px solid #e5e7eb !important;
}

.wzc-embedded-form-header,
.wzc-embedded-scheduler-header {
	margin-bottom: 2rem !important;
	text-align: center !important;
}

.wzc-embedded-form-header h2,
.wzc-embedded-scheduler-header h2 {
	font-size: 1.875rem !important;
	font-weight: 700 !important;
	color: #111827 !important;
	margin: 0 0 0.75rem 0 !important;
	line-height: 1.2 !important;
}

.wzc-embedded-form-header p,
.wzc-embedded-scheduler-header p {
	font-size: 1rem !important;
	color: #6b7280 !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* Embedded form uses existing .wzc-form styles from floating-buttons.css */

/* ========================================================================
   Embedded Scheduler Body
   ======================================================================== */

.wzc-embedded-scheduler-body {
	/* Booking steps and calendar use existing styles from booking.css */
}

/* ========================================================================
   Shortcode Buttons
   ======================================================================== */

.wzc-shortcode-button {
	display: inline-block !important;
	padding: 0.875rem 2rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #ffffff !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.3) !important;
	outline: none !important;
	user-select: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.wzc-shortcode-button:hover {
	background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%) !important;
	box-shadow: 0 6px 10px -1px rgba(102, 126, 234, 0.4) !important;
	transform: translateY(-2px) !important;
}

.wzc-shortcode-button:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 4px -1px rgba(102, 126, 234, 0.2) !important;
}

.wzc-shortcode-button:focus {
	outline: 2px solid #667eea !important;
	outline-offset: 2px !important;
}

/* ========================================================================
   Responsive Design
   ======================================================================== */

@media (max-width: 640px) {
	.wzc-embedded-form-container,
	.wzc-embedded-scheduler-container {
		margin: 1rem auto !important;
		padding: 0 0.75rem !important;
	}

	.wzc-embedded-form,
	.wzc-embedded-scheduler {
		padding: 1.5rem !important;
		border-radius: 8px !important;
	}

	.wzc-embedded-form-header h2,
	.wzc-embedded-scheduler-header h2 {
		font-size: 1.5rem !important;
	}

	.wzc-embedded-form-header p,
	.wzc-embedded-scheduler-header p {
		font-size: 0.9375rem !important;
	}

	.wzc-shortcode-button {
		padding: 0.75rem 1.5rem !important;
		font-size: 0.9375rem !important;
		width: 100% !important;
	}
}