/**
 * UI Boxes Module - Public Styles (Frontend & Editor)
 *
 * Handles the styling for Alert Boxes, Brand Boxes, Luxury Cards, and Pattern Cards.
 * Uses !important heavily to ensure styles override theme defaults and display
 * correctly in both the Frontend and the Gutenberg Editor.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/ui-boxes/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   1. Base Box Styles (Alerts & Brands)
   ========================================================================== */

.kabook-box {
	padding: 1rem 1.5rem !important;
	margin-bottom: 20px !important;
	border: 1px solid transparent !important;
	border-radius: var(--kabook-box-radius, 8px) !important;
	position: relative;
	font-size: 1rem;
	line-height: 1.6;
	/* Ensures consistent block rendering in both Frontend and Editor */
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   2. Icons (Alerts Only)
   ========================================================================== */

/* Conditional icon display: Excludes Brand and Quote boxes */
.kabook-box:not(.kabook-box-brand):not(.kabook-box-quote)::before {
	content: '';
	position: absolute;
	top: 1.2rem;
	inset-inline-start: 1.2rem; /* Handles RTL/LTR positioning automatically */
	width: 1.5rem;
	height: 1.5rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: var(--kabook-box-icon-display, block) !important;
	z-index: 1;
}

/* Dynamic Padding for Icons */
.kabook-box:not(.kabook-box-brand):not(.kabook-box-quote) {
	padding-inline-start: var(--kabook-box-padding-start, 3.5rem) !important;
}

/* Encoded SVGs for Alert Types */
.kabook-box-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d47a1'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") !important;
}

.kabook-box-tip::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6f00'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E") !important;
}

.kabook-box-success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b5e20'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !important;
}

.kabook-box-danger::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b71c1c'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   3. Box Colors (Alerts)
   ========================================================================== */

.kabook-box-info {
	color: var(--kabook-box-info-text) !important;
	background-color: var(--kabook-box-info-bg) !important;
	border-color: var(--kabook-box-info-border) !important;
}

.kabook-box-tip {
	color: var(--kabook-box-tip-text) !important;
	background-color: var(--kabook-box-tip-bg) !important;
	border-color: var(--kabook-box-tip-border) !important;
}

.kabook-box-success {
	color: var(--kabook-box-success-text) !important;
	background-color: var(--kabook-box-success-bg) !important;
	border-color: var(--kabook-box-success-border) !important;
}

.kabook-box-danger {
	color: var(--kabook-box-danger-text) !important;
	background-color: var(--kabook-box-danger-bg) !important;
	border-color: var(--kabook-box-danger-border) !important;
}

/* ==========================================================================
   4. Quote & Brand Boxes (Side Border Styles)
   ========================================================================== */

.kabook-box-quote,
.kabook-box-brand {
	padding-inline-start: 1.5rem !important; /* No icon space needed */
	border-width: 1px !important;
	border-style: solid !important;
	border-inline-start-width: 5px !important; /* Thick side border */
}

/* Quote */
.kabook-box-quote {
	color: var(--kabook-box-quote-text) !important;
	background-color: var(--kabook-box-quote-bg) !important;
	border-color: var(--kabook-box-quote-border) !important;
	border-inline-start-color: var(--kabook-box-quote-border) !important;
	font-style: italic;
}

/* Brand Boxes */
.kabook-brand-1 {
	background-color: var(--kabook-brand-1-bg) !important;
	color: var(--kabook-brand-1-text) !important;
	border-color: var(--kabook-brand-1-bg) !important;
	border-inline-start-color: var(--kabook-brand-1-border) !important;
}

.kabook-brand-2 {
	background-color: var(--kabook-brand-2-bg) !important;
	color: var(--kabook-brand-2-text) !important;
	border-color: var(--kabook-brand-2-bg) !important;
	border-inline-start-color: var(--kabook-brand-2-border) !important;
}

/* ==========================================================================
   5. Luxury Cards & Patterns (Full Containers)
   ========================================================================== */

.kabook-card-luxury,
.kabook-card-creative,
.kabook-card-pattern {
	display: block !important; /* Ensure container behavior */
	padding: 30px !important;
	margin-bottom: 25px !important;
	border-radius: var(--kabook-box-radius, 15px) !important;
	overflow: hidden;
	position: relative;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
	border: 1px solid transparent !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Card A (Luxury - Light/Gold) */
.kabook-card-luxury {
	background: var(--kabook-card-a-bg) !important;
	border-color: var(--kabook-card-a-border) !important;
	border-radius: var(--kabook-card-a-radius) !important;
}

/* Card B (Creative - Dark Mode) */
.kabook-card-creative {
	background-image: linear-gradient(135deg, var(--kabook-card-b-bg1), var(--kabook-card-b-bg2)) !important;
	color: var(--kabook-card-b-text) !important;
	border-radius: var(--kabook-card-b-radius) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
	border: none !important;
}

/* Enforces text color inheritance for elements within dark cards */
.kabook-card-creative,
.kabook-card-creative * {
	color: var(--kabook-card-b-text) !important;
}

/* ==========================================================================
   6. Modern Patterns (Pure CSS)
   ========================================================================== */

.kabook-card-pattern {
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Grid */
.kabook-pattern-grid {
	background-color: var(--kabook-pattern-grid-bg) !important;
	background-image:
		linear-gradient(var(--kabook-pattern-grid-color) 1px, transparent 1px),
		linear-gradient(90deg, var(--kabook-pattern-grid-color) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
}

/* Checker */
.kabook-pattern-checker {
	background-color: var(--kabook-pattern-checker-bg) !important;
	background-image:
		linear-gradient(45deg, var(--kabook-pattern-checker-color) 25%, transparent 25%, transparent 75%, var(--kabook-pattern-checker-color) 75%, var(--kabook-pattern-checker-color)),
		linear-gradient(45deg, var(--kabook-pattern-checker-color) 25%, transparent 25%, transparent 75%, var(--kabook-pattern-checker-color) 75%, var(--kabook-pattern-checker-color)) !important;
	background-position: 0 0, 10px 10px !important;
	background-size: 20px 20px !important;
}

/* Stripes */
.kabook-pattern-stripe {
	background-color: var(--kabook-pattern-stripe-bg) !important;
	background-image: repeating-linear-gradient(
		45deg,
		var(--kabook-pattern-stripe-color),
		var(--kabook-pattern-stripe-color) 1px,
		transparent 1px,
		transparent 10px
	) !important;
}

/* Zigzag */
.kabook-pattern-zigzag {
	background-color: var(--kabook-pattern-zigzag-bg) !important;
	background-image:
		linear-gradient(135deg, var(--kabook-pattern-zigzag-color) 25%, transparent 25%),
		linear-gradient(225deg, var(--kabook-pattern-zigzag-color) 25%, transparent 25%),
		linear-gradient(45deg, var(--kabook-pattern-zigzag-color) 25%, transparent 25%),
		linear-gradient(315deg, var(--kabook-pattern-zigzag-color) 25%, transparent 25%) !important;
	background-position: 10px 0, 10px 0, 0 0, 0 0 !important;
	background-size: 20px 20px !important;
	background-repeat: repeat !important;
}