/**
 * AiStros Unified Button & UI Styles
 * Integrated with Aistros Celestial Palette (Light & Dark Mode)
 * @version 2.1.0
 */

/* ========================================================================
   Base Button Styles
   ======================================================================== */

.aistros-btn,
button.aistros,
a.aistros-btn,
input[type="submit"].aistros,
input[type="button"].aistros {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs, 8px);
	padding: var(--spacing-sm, 12px) var(--spacing-md, 20px);
	border: none;
	border-radius: var(--aistros-radius-md, 8px);
	font-size: var(--font-size-base, 16px);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
}

/* ========================================================================
   Button Variants
   ======================================================================== */

/* Primary Button */
.aistros-btn-primary,
.aistros-btn.primary {
	background: var(--primary-color);
	color: var(--text-inverse);
}

.aistros-btn-primary:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(17, 255, 246, 0.3); /* NEW PALETTE */
}

/* Secondary Button */
.aistros-btn-secondary,
.aistros-btn.secondary {
	background: var(--secondary-color);
	color: var(--text-inverse);
}

.aistros-btn-secondary:hover {
	background: var(--secondary-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(255, 223, 17, 0.3); /* NEW PALETTE */
}

/* Danger Button */
.aistros-btn-danger,
.aistros-btn.danger {
	background: var(--danger-color);
	color: var(--text-inverse);
}

.aistros-btn-danger:hover {
	background: var(--danger-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
}

/* Outline Button */
.aistros-btn-outline {
	background: transparent;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	box-shadow: none;
}

.aistros-btn-outline:hover {
	background: var(--primary-color);
	color: var(--text-inverse);
	border-color: var(--primary-color);
}

/* ========================================================================
   Button Sizes
   ======================================================================== */

.aistros-btn-sm {
	padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
	font-size: calc(var(--font-size-base, 16px) - 2px);
	border-radius: var(--aistros-radius-sm, 6px);
}

.aistros-btn-lg {
	padding: var(--spacing-sm, 14px) var(--spacing-lg, 30px);
	font-size: calc(var(--font-size-base, 16px) + 2px);
	border-radius: var(--aistros-radius-lg, 12px);
	font-weight: 700;
}

.aistros-btn-block {
	display: flex;
	width: 100%;
}

/* ========================================================================
   Modals
   ======================================================================== */

.aistros-modal,
.modal-content {
	border-radius: var(--aistros-radius-lg, 12px);
	box-shadow: var(--aistros-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
	background: var(--bg-white);
}

/* ========================================================================
   Form Inputs
   ======================================================================== */

.aistros-input,
input[type="text"].aistros,
input[type="email"].aistros,
input[type="password"].aistros,
input[type="search"].aistros,
input[type="number"].aistros,
select.aistros,
textarea.aistros {
	padding: var(--spacing-sm, 12px) var(--spacing-md, 20px);
	border: 1px solid var(--border-color);
	border-radius: var(--aistros-radius-md, 8px);
	font-size: var(--font-size-base, 16px);
	background: var(--bg-white);
	color: var(--text-primary, #2C2C2C);
	transition: all 0.3s ease;
}

.aistros-input:focus,
input.aistros:focus,
select.aistros:focus,
textarea.aistros:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(17, 255, 246, 0.3); /* NEW PALETTE */
}

/* ========================================================================
   Site Header Elements
   ======================================================================== */

.site-header .login-link,
.site-header .register-link,
.site-header .account-link {
	border-radius: var(--aistros-radius-md, 8px);
	padding: var(--spacing-xs, 8px) var(--spacing-md, 20px);
}

.social-buttons button {
	border-radius: var(--aistros-radius-sm, 6px);
	padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
}

.login-form input[type="submit"],
.registration-form input[type="submit"],
.comment-form input[type="submit"] {
	border-radius: var(--aistros-radius-md, 8px);
	padding: var(--spacing-sm, 12px) var(--spacing-lg, 30px);
}

/* ========================================================================
   WooCommerce Buttons
   ======================================================================== */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	border-radius: var(--aistros-radius-md, 8px);
	background: var(--secondary-color);
	color: var(--text-inverse);
	transition: all 0.3s ease;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--secondary-hover);
	transform: translateY(-1px);
}

.woocommerce button.button.alt {
	background: var(--primary-color);
	color: var(--text-inverse);
}

.woocommerce button.button.alt:hover {
	background: var(--primary-hover);
}

/* ========================================================================
   Utilities
   ======================================================================== */

.aistros-btn-icon {
	padding: var(--spacing-xs, 10px);
	border-radius: var(--aistros-radius-full, 9999px);
}

.aistros-btn-group {
	display: flex;
	gap: var(--spacing-sm, 12px);
}

.aistros-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========================================================================
   Loading State
   ======================================================================== */

.aistros-btn-loading {
	position: relative;
	color: transparent;
}

.aistros-btn-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

/* ========================================================================
   Cards
   ======================================================================== */

.aistros-card {
	border-radius: var(--aistros-radius-lg, 12px);
	background: var(--bg-white);
	border: 1px solid var(--border-color);
}

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

@media (max-width: 768px) {
	.aistros-btn {
		padding: var(--spacing-xs, 10px) var(--spacing-md, 20px);
		font-size: calc(var(--font-size-base, 16px) - 2px);
	}

	.aistros-btn-lg {
		padding: var(--spacing-sm, 12px) var(--spacing-lg, 30px);
		font-size: var(--font-size-base, 16px);
	}
}

@import url("buttons-unified-light.css");
@import url("buttons-unified-dark.css");