/**
 * ULTIMATE BUTTONS DESIGN
 * Professional, beautiful buttons for entire site
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   BASE BUTTON STYLES - ULTIMATE DESIGN
   ============================================ */

.button,
button.button,
input[type="submit"],
input[type="button"],
.coursee-enroll-btn,
button.coursee-enroll-btn,
a.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.875rem 1.75rem !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-align: center !important;
	text-decoration: none !important;
	border: 2px solid transparent !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	min-height: 48px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
	            0 2px 4px rgba(0, 0, 0, 0.06) !important;
	background: linear-gradient(135deg, #5624d0 0%, #667eea 100%) !important;
	color: #ffffff !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	font-family: inherit !important;
}

.button::before,
button.button::before,
.coursee-enroll-btn::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(90deg, 
		transparent 0%,
		rgba(255, 255, 255, 0.2) 50%,
		transparent 100%) !important;
	transition: left 0.5s ease !important;
	z-index: 1 !important;
}

.button:hover::before,
button.button:hover::before,
.coursee-enroll-btn:hover::before {
	left: 100% !important;
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.coursee-enroll-btn:hover,
a.button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(86, 36, 208, 0.3),
	            0 4px 8px rgba(0, 0, 0, 0.12) !important;
	background: linear-gradient(135deg, #4c1d95 0%, #5a67d8 100%) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.button:active,
button.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.coursee-enroll-btn:active,
a.button:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px rgba(86, 36, 208, 0.2),
	            0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.button:focus,
button.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.coursee-enroll-btn:focus,
a.button:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(86, 36, 208, 0.3),
	            0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.button:disabled,
button.button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.coursee-enroll-btn:disabled,
a.button:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   PRIMARY BUTTON
   ============================================ */

.button-primary,
button.button-primary,
input[type="submit"].button-primary,
.coursee-enroll-btn {
	background: linear-gradient(135deg, #5624d0 0%, #667eea 100%) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}

.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
.coursee-enroll-btn:hover {
	background: linear-gradient(135deg, #4c1d95 0%, #5a67d8 100%) !important;
	color: #ffffff !important;
}

/* ============================================
   SECONDARY BUTTON
   ============================================ */

.button-secondary,
button.button-secondary,
input[type="button"].button-secondary {
	background: #ffffff !important;
	color: #5624d0 !important;
	border-color: #5624d0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
	            0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.button-secondary:hover,
button.button-secondary:hover,
input[type="button"].button-secondary:hover {
	background: #5624d0 !important;
	color: #ffffff !important;
	border-color: #5624d0 !important;
	box-shadow: 0 4px 16px rgba(86, 36, 208, 0.2),
	            0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   OUTLINE BUTTON
   ============================================ */

.button-outline,
button.button-outline {
	background: transparent !important;
	color: #5624d0 !important;
	border-color: #d1d5db !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.button-outline:hover,
button.button-outline:hover {
	background: #f9fafb !important;
	color: #5624d0 !important;
	border-color: #5624d0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   SUCCESS BUTTON
   ============================================ */

.button-success,
button.button-success {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
	color: #ffffff !important;
}

.button-success:hover,
button.button-success:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
	box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3),
	            0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ============================================
   DANGER BUTTON
   ============================================ */

.button-danger,
button.button-danger {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	color: #ffffff !important;
}

.button-danger:hover,
button.button-danger:hover {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
	box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3),
	            0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ============================================
   SMALL BUTTONS
   ============================================ */

.button-small,
button.button-small {
	padding: 0.625rem 1.25rem !important;
	font-size: 0.875rem !important;
	min-height: 36px !important;
}

/* ============================================
   LARGE BUTTONS
   ============================================ */

.button-large,
button.button-large {
	padding: 1.125rem 2.25rem !important;
	font-size: 1.0625rem !important;
	min-height: 56px !important;
}

/* ============================================
   FULL WIDTH BUTTONS
   ============================================ */

.button-full,
button.button-full {
	width: 100% !important;
	display: flex !important;
}

/* ============================================
   BUTTON WITH ICONS
   ============================================ */

.button .icon,
button.button .icon {
	font-size: 1.125rem !important;
	line-height: 1 !important;
}

.button .icon-left {
	margin-right: 0.5rem !important;
}

.button .icon-right {
	margin-left: 0.5rem !important;
}

/* ============================================
   LOADING STATE
   ============================================ */

.button.loading,
button.button.loading,
.coursee-enroll-btn.loading {
	position: relative !important;
	color: transparent !important;
	pointer-events: none !important;
}

.button.loading::after,
button.button.loading::after,
.coursee-enroll-btn.loading::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 20px !important;
	height: 20px !important;
	margin-top: -10px !important;
	margin-left: -10px !important;
	border: 3px solid rgba(255, 255, 255, 0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: button-spin 0.8s linear infinite !important;
}

@keyframes button-spin {
	to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.button,
	button.button,
	input[type="submit"],
	input[type="button"],
	.coursee-enroll-btn {
		padding: 0.75rem 1.5rem !important;
		font-size: 0.875rem !important;
		min-height: 44px !important;
	}
	
	.button-large,
	button.button-large {
		padding: 1rem 2rem !important;
		font-size: 1rem !important;
		min-height: 52px !important;
	}
}

/* ============================================
   SPECIFIC BUTTON OVERRIDES
   ============================================ */

/* Enroll Button Specific */
.coursee-enroll-btn,
button.coursee-enroll-btn {
	width: 100% !important;
	margin-top: 1rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	font-size: 0.9375rem !important;
}

/* Course Sidebar Buttons */
.course-sidebar .button,
.course-sidebar button.button,
.course-sidebar .coursee-enroll-btn {
	width: 100% !important;
	margin-top: 1rem !important;
}

/* Dashboard Buttons */
.coursee-dashboard .button,
.coursee-dashboard button.button {
	margin: 0.5rem 0 !important;
}

/* Form Buttons */
form .button,
form button.button,
form input[type="submit"] {
	margin-top: 1rem !important;
}

/* Navigation Buttons */
nav .button,
nav button.button,
nav a.button {
	margin: 0 0.25rem !important;
}