/**
 * UI Elements & Animation Module - Public Styles
 *
 * Handles frontend display for buttons, image effects, and text animations.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/ui-elements/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.kabook-btn-primary,
.kabook-btn-outline {
	display: table !important;
	padding: 12px 28px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-align: center !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	line-height: 1.5 !important;
	border: 2px solid transparent !important;
	box-sizing: border-box !important;
	margin: 5px auto !important;
	position: relative;
	overflow: hidden;
}

.kabook-btn-primary {
	border-radius: var(--kabook-btn-radius, 50px) !important;
	background-image: linear-gradient(135deg, var(--kabook-btn-bg1), var(--kabook-btn-bg2)) !important;
	color: var(--kabook-btn-text) !important;
	box-shadow: var(--kabook-btn-shadow-val, none) !important;
}

.kabook-btn-outline {
	border-radius: var(--kabook-btn-out-radius, 50px) !important;
	background: transparent !important;
	border-color: var(--kabook-btn-out-color) !important;
	color: var(--kabook-btn-out-color) !important;
}

.kabook-btn-outline:hover {
	background: var(--kabook-btn-out-hover-bg) !important;
	color: var(--kabook-btn-out-hover-txt) !important;
	border-color: var(--kabook-btn-out-hover-bg) !important;
	color: var(--kabook-btn-out-hover-txt) !important;
}

/* ==========================================================================
   2. Image Effects 2.0
   ========================================================================== */

/* Base Styles */
.kabook-img-glow,
.kabook-img-shadow,
.kabook-img-polaroid,
.kabook-img-rounded,
.kabook-img-bordered {
	display: inline-block;
	max-width: 100%;
	height: auto;
	transition: all 0.3s ease;
	box-sizing: border-box;
	vertical-align: middle;
	margin: 10px; /* Base margin */
}

/* Alignment Fix */
img.kabook-img-glow.aligncenter,
img.kabook-img-shadow.aligncenter,
img.kabook-img-polaroid.aligncenter,
img.kabook-img-rounded.aligncenter,
img.kabook-img-bordered.aligncenter {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 2.1 Rounded & Shapes */
.kabook-img-rounded {
	border-radius: var(--kabook-img-rounded-radius, 50%) !important;
	clip-path: var(--kabook-img-clip-path, none) !important;
}

/* 2.2 Borders */
.kabook-img-bordered {
	border-style: var(--kabook-img-border-style, solid) !important;
	border-width: var(--kabook-img-border-width, 5px) !important;
	border-color: #fff !important;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 2.3 Glow Effect */
.kabook-img-glow {
	box-shadow: 0 0 var(--kabook-img-glow-radius, 15px) var(--kabook-img-glow-color, rgba(0, 51, 102, 0.5)) !important;
	border-radius: 8px;
}

/* 2.4 Soft Shadow */
.kabook-img-shadow {
	box-shadow: 10px 10px 0 var(--kabook-img-shadow-color, rgba(0, 0, 0, 0.15)) !important;
	border-radius: 8px;
	transform: translate(-5px, -5px);
}

/* 2.5 Polaroid */
.kabook-img-polaroid {
	background-color: var(--kabook-img-polaroid-bg) !important;
	padding: 10px 10px 40px 10px !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
	transform: rotate(-2deg);
	transition: transform 0.3s ease;
	margin: 15px !important;
}

.kabook-img-polaroid:hover {
	transform: rotate(0deg) scale(1.02);
	z-index: 2;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   3. Text Gradients & Animations
   ========================================================================== */

.kabook-text-gradient-purple {
	background-image: linear-gradient(to right, #8e2de2, #4a00e0) !important;
}

.kabook-text-gradient-gold {
	background-image: linear-gradient(to right, #d4af37, #f7ef8a, #d4af37) !important;
}

.kabook-text-gradient-fire {
	background-image: linear-gradient(to right, #f12711, #f5af19) !important;
}

.kabook-text-gradient-ocean {
	background-image: linear-gradient(to right, #2193b0, #6dd5ed) !important;
}

.kabook-text-gradient-forest {
	background-image: linear-gradient(to right, #11998e, #38ef7d) !important;
}

.kabook-text-gradient-purple,
.kabook-text-gradient-gold,
.kabook-text-gradient-fire,
.kabook-text-gradient-ocean,
.kabook-text-gradient-forest {
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
	font-weight: 700;
	display: inline-block;
}

/* Animation Utilities */
.kabook-anim-up,
.kabook-anim-down,
.kabook-anim-left,
.kabook-anim-right,
.kabook-anim-zoom {
	animation-duration: var(--kabook-anim-speed, 0.8s);
	animation-fill-mode: both;
}

/* Keyframes */
@keyframes kFadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.kabook-anim-up {
	animation-name: kFadeInUp;
}

@keyframes kFadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.kabook-anim-down {
	animation-name: kFadeInDown;
}

@keyframes kFadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-30px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.kabook-anim-left {
	animation-name: kFadeInLeft;
}

@keyframes kFadeInRight {
	from {
		opacity: 0;
		transform: translate3d(30px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.kabook-anim-right {
	animation-name: kFadeInRight;
}

@keyframes kZoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.8, 0.8, 0.8);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.kabook-anim-zoom {
	animation-name: kZoomIn;
}

/* ==========================================================================
   5. General Fixes
   ========================================================================== */

/* Fix for Images inside Figures */
figure.kabook-img-rounded,
figure.kabook-img-shadow,
figure.kabook-img-bordered,
figure.kabook-img-glow {
	display: inline-block;
	margin: 0;
}

figure.kabook-img-rounded img,
figure.kabook-img-bordered img {
	border-radius: inherit;
	clip-path: inherit;
	display: block;
}