/**
 * UI Elements & Animation Module - Admin Styles
 *
 * Beautifies the settings page for buttons, animations, and image effects.
 * Scoped selectors to prevent conflict with Global Grid System.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/ui-elements/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */
 
/* ==========================================================================
   1. General Layout
   ========================================================================== */

/* Main Grid for Button Config Cards */
.kabook-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
	margin-top: 15px;
}

/* ==========================================================================
   2. Card Styling (Buttons)
   ========================================================================== */

.kabook-card-preview-box {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kabook-card-preview-box h4 {
	margin: 0 0 20px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f1;
	font-size: 14px;
	font-weight: 600;
}

/* ==========================================================================
   3. Input Rows (Inside Cards)
   ========================================================================== */

.kabook-card-preview-box .kabook-ui-row {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	justify-content: flex-start;
}

.kabook-card-preview-box .kabook-ui-row:last-child {
	margin-bottom: 0;
}

.kabook-card-preview-box .kabook-ui-row label {
	font-size: 13px;
	color: #3c434a;
	font-weight: 500;
	width: 100px;
	flex-shrink: 0;
	margin-left: 15px; /* Gap for RTL */
}

/* Inputs styling scoped to cards */
.kabook-card-preview-box .kabook-ui-row input[type="number"],
.kabook-card-preview-box .kabook-ui-row input[type="text"] {
	max-width: 100px;
	text-align: center;
	height: 30px;
	margin: 0;
}

/* Color Picker Scoped Fixes */
.kabook-card-preview-box .kabook-ui-row .wp-picker-container {
	display: inline-block;
	vertical-align: middle;
}

.kabook-card-preview-box .kabook-ui-row .wp-picker-container .wp-color-result.button {
	margin: 0 !important;
	width: auto !important;
	min-width: 80px;
	height: 30px;
}

/* ==========================================================================
   4. Field Rows (Strips for Animation/Images)
   ========================================================================== */

.kabook-field-row {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.kabook-field-row .k-label {
	flex-grow: 1;
}

.kabook-field-row .k-label strong {
	font-size: 13px;
	color: #1d2327;
	display: block;
}

.kabook-field-row .description {
	margin: 2px 0 0;
	font-size: 11px;
	color: #646970;
}

.kabook-field-row .k-input {
	flex-shrink: 0;
	margin-right: 20px; /* Space between label and input in RTL */
}

/* Standardize Inputs in Rows */
.kabook-field-row input[type="text"],
.kabook-field-row input[type="number"],
.kabook-field-row select {
	min-width: 120px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	text-align: center;
}

/* Color Picker in Rows */
.kabook-field-row .wp-picker-container .wp-color-result.button {
	margin: 0 !important;
	height: 32px;
	border-radius: 3px;
	min-width: 120px;
	width: auto !important;
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

h3 {
	font-size: 1.1em;
	margin: 30px 0 15px;
	padding-right: 10px; /* RTL */
	border-right: 4px solid #2271b1; /* RTL */
	color: #1d2327;
}

hr {
	border: 0;
	border-top: 1px solid #dcdcde;
	margin: 30px 0;
}