/**
 * Front-end layout mechanics for builder content. Visual design
 * (colors/fonts/spacing) comes from CSS variables set in class-kb-
 * global-styles.php — this file only handles structure so it works
 * consistently across themes.
 *
 * This same file is also loaded on the builder's admin editor screen
 * so the canvas matches the live site exactly.
 */

.kb-content { width: 100%; }

.kb-section { position: relative; width: 100%; box-sizing: border-box; }
.kb-section * { box-sizing: border-box; }

.kb-section-inner { margin: 0 auto; width: 100%; }
.kb-section-inner.kb-boxed { max-width: var( --kb-container-width, 1200px ); padding-left: 16px; padding-right: 16px; }
.kb-section-inner.kb-full-width { max-width: 100%; }

.kb-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --kb-spacing-unit, 8px );
	width: 100%;
}

.kb-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
}

.kb-heading {
	margin: 0 0 0.5em 0;
	color: var( --kb-color-heading, inherit );
	font-family: var( --kb-font-heading, inherit );
	line-height: 1.25;
}
.kb-heading a { color: inherit; text-decoration: none; }

.kb-text {
	color: var( --kb-color-text, inherit );
	font-family: var( --kb-font-body, inherit );
	line-height: 1.6;
	margin: 0 0 1em 0;
}
.kb-text:last-child { margin-bottom: 0; }

.kb-button {
	font-family: var( --kb-font-body, inherit );
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.kb-button:hover { opacity: 0.88; }

.kb-image img { width: 100%; height: auto; display: block; }
.kb-image-placeholder {
	background: repeating-linear-gradient( 45deg, #f3f3f3, #f3f3f3 10px, #eaeaea 10px, #eaeaea 20px );
	color: #888;
	text-align: center;
	padding: 40px 20px;
	border-radius: 4px;
}

.kb-spacer { width: 100%; }

.kb-divider { box-sizing: border-box; }

.kb-icon-wrap .dashicons { display: inline-block; }

.kb-gallery img { display: block; }

.kb-video-wrap iframe,
.kb-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kb-theme-header, .kb-theme-footer { width: 100%; }

/* WooCommerce dynamic widgets (class-kb-woocommerce.php) — light-touch
 * spacing only. The actual visual design of what's inside each
 * (.price, .star-rating, .product_meta, add_to_cart_button, etc.) is
 * WooCommerce's own and/or the active theme's — deliberately not
 * overridden here, the same way this file leaves font/color choices in
 * every other widget to Global Styles/theme CSS. */
.kb-product-title { margin: 0 0 0.5em 0; }
.kb-product-price { margin: 0 0 1em 0; }
.kb-product-images { margin: 0 0 1.5em 0; }
.kb-product-add-to-cart { margin: 0 0 1.5em 0; }
.kb-product-short-description { margin: 0 0 1em 0; }
.kb-product-stock, .kb-product-rating, .kb-product-meta { margin: 0 0 0.5em 0; }
ul.products.kb-product-grid { margin: 0; padding: 0; list-style: none; }
ul.products.kb-product-grid li.product { list-style: none; }
/* Image Aspect Ratio control (Product Grid widget) — applied via a
 * class on the grid itself (kb-grid-image-square/portrait/landscape),
 * covering WooCommerce's own product image markup. "auto" applies no
 * rule at all, leaving the image at its natural shape. */
.kb-grid-image-square img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.kb-grid-image-portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.kb-grid-image-landscape img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kb-woo-cart, .kb-woo-checkout { width: 100%; }

/* Form widget (class-kb-forms.php's render_form(); submission handling
 * is assets/js/frontend.js's initForms()). Structural spacing only —
 * colors/typography are left to Global Styles/theme CSS, same as
 * every other widget in this file. */
.kb-form { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }
/* Multi-step forms (a 'pagebreak' entry in the field list — see
 * class-kb-forms.php's render_form()) wrap each step's fields in one of
 * these; assets/js/frontend.js's applyVisibility() shows one at a time
 * via the `hidden` attribute. Same flex/gap as .kb-form itself so a
 * single-step form (always exactly one, un-hidden .kb-form-step) looks
 * identical to before this wrapper existed. */
.kb-form-step { display: flex; flex-direction: column; gap: 16px; }
.kb-form-step-nav { display: flex; gap: 10px; }
.kb-form-step-nav button {
	padding: 10px 20px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font: inherit; font-size: 14px;
	background: #fff; color: inherit;
}
.kb-form-step-back { background: transparent; }
.kb-form .kb-field { display: flex; flex-direction: column; gap: 6px; }
.kb-form .kb-field label { font-weight: 600; font-size: 14px; }
.kb-form .kb-field input[type="text"],
.kb-form .kb-field input[type="email"],
.kb-form .kb-field select,
.kb-form .kb-field textarea {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font: inherit;
}
.kb-form .kb-field textarea { min-height: 120px; resize: vertical; }
.kb-form-required { color: #c00; }
.kb-form .kb-field-checkbox label,
.kb-form-radio-option { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.kb-form-submit {
	align-self: flex-start; padding: 12px 28px; border: none; border-radius: 4px; cursor: pointer;
	background: var( --kb-color-primary, #2563eb ); color: #fff; font-size: 14px; font-weight: 600;
}
.kb-form-submit:disabled { opacity: 0.6; cursor: default; }
.kb-form-message { padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.kb-form-message-success { background: #eef8ef; color: #2a7a2a; }
.kb-form-message-error { background: #fdeaea; color: #a02222; }
/* Honeypot — visually hidden but still present/focusable-in-markup, so
 * a bot that specifically skips truly hidden inputs (type="hidden",
 * display:none picked up before render) still finds and fills this
 * one. Real visitors never see it. */
.kb-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Popup builder (class-kb-popups.php's render_popup_markup(); trigger/
 * dismiss behavior is assets/js/frontend.js's initPopup()). Hidden by
 * default via the `hidden` attribute — frontend.js clears it once the
 * popup's trigger condition is met. */
.kb-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.kb-popup-overlay { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.5 ); }
.kb-popup-panel {
	position: relative; z-index: 1; max-width: min( 90vw, 560px ); max-height: 85vh; overflow: auto;
	background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.3 );
}
.kb-popup-close {
	position: absolute; top: 10px; right: 14px; background: transparent; border: none; font-size: 24px;
	line-height: 1; cursor: pointer; color: #666;
}
body.kb-popup-open { overflow: hidden; }

/* Default mobile behavior when a column has no explicit responsive
 * width override of its own (see class-kb-widgets.php's responsive
 * value system) — an explicit per-node override always wins since its
 * .kb-el-{id} rule is emitted later in the document than this generic
 * one, at equal specificity. Keep this in sync with KB_BREAKPOINT_MOBILE
 * in kosmos-builder.php. */
@media ( max-width: 767px ) {
	.kb-row { flex-direction: column; }
	.kb-column { flex-basis: 100% !important; max-width: 100% !important; }
}