/**
 * Front-end layout mechanics for builder content. Visual design
 * (colors/fonts/spacing) comes from CSS variables set in class-kwh-
 * 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.
 */

.kwh-content { width: 100%; }

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

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

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

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

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

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

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

.kwh-image img { width: 100%; height: auto; display: block; }
.kwh-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;
}

.kwh-spacer { width: 100%; }

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

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

.kwh-gallery img { display: block; }

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

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

/* WooCommerce dynamic widgets (class-kwh-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. */
.kwh-product-title { margin: 0 0 0.5em 0; }
.kwh-product-price { margin: 0 0 1em 0; }
.kwh-product-images { margin: 0 0 1.5em 0; }
.kwh-product-add-to-cart { margin: 0 0 1.5em 0; }
.kwh-product-short-description { margin: 0 0 1em 0; }
.kwh-product-stock, .kwh-product-rating, .kwh-product-meta { margin: 0 0 0.5em 0; }
ul.products.kwh-product-grid { margin: 0; padding: 0; list-style: none; }
ul.products.kwh-product-grid li.product { list-style: none; }
/* Image Aspect Ratio control (Product Grid widget) — applied via a
 * class on the grid itself (kwh-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. */
.kwh-grid-image-square img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.kwh-grid-image-portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.kwh-grid-image-landscape img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kwh-woo-cart, .kwh-woo-checkout { width: 100%; }
/* Product Grid card_slots — 'short_description'/'sku' slots (see
 * class-kwh-woocommerce.php's render_card_slot()); every other slot
 * (image/title/price/rating/stock/add_to_cart) reuses WooCommerce's own
 * markup/classes, already styled by the theme, so nothing extra is
 * needed for those here. */
.kwh-grid-card-excerpt { font-size: 0.9em; color: #666; margin: 0.5em 0; }
.kwh-grid-card-sku { display: block; font-size: 0.8em; color: #888; margin: 0.25em 0; }

/* Form widget (class-kwh-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. */
.kwh-form { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }
/* Multi-step forms (a 'pagebreak' entry in the field list — see
 * class-kwh-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 .kwh-form itself so a
 * single-step form (always exactly one, un-hidden .kwh-form-step) looks
 * identical to before this wrapper existed. */
.kwh-form-step { display: flex; flex-direction: column; gap: 16px; }
.kwh-form-step-nav { display: flex; gap: 10px; }
.kwh-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;
}
.kwh-form-step-back { background: transparent; }
.kwh-form .kwh-field { display: flex; flex-direction: column; gap: 6px; }
.kwh-form .kwh-field label { font-weight: 600; font-size: 14px; }
.kwh-form .kwh-field input[type="text"],
.kwh-form .kwh-field input[type="email"],
.kwh-form .kwh-field select,
.kwh-form .kwh-field textarea {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font: inherit;
}
.kwh-form .kwh-field textarea { min-height: 120px; resize: vertical; }
.kwh-form-required { color: #c00; }
.kwh-form .kwh-field-checkbox label,
.kwh-form-radio-option { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.kwh-form-submit {
	align-self: flex-start; padding: 12px 28px; border: none; border-radius: 4px; cursor: pointer;
	background: var( --kwh-color-primary, #2563eb ); color: #fff; font-size: 14px; font-weight: 600;
}
.kwh-form-submit:disabled { opacity: 0.6; cursor: default; }
.kwh-form-message { padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.kwh-form-message-success { background: #eef8ef; color: #2a7a2a; }
.kwh-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. */
.kwh-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Payment field (Stripe) — see class-kwh-forms.php's
 * render_payment_field_row() for the markup this styles, and
 * assets/js/frontend.js's initPaymentField() for what mounts inside
 * .kwh-stripe-card-mount (Stripe's own hosted iframe — its internal
 * styling is controlled by Stripe, not this stylesheet; this only
 * styles the box that CONTAINS it). */
.kwh-form-payment-amount { font-weight: 400; color: #555; }
.kwh-stripe-card-mount {
	padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
.kwh-stripe-card-errors { color: #a02222; font-size: 13px; min-height: 1em; }
.kwh-field-payment-unset .description,
.kwh-field-payment-extra .description { color: #a02222; font-size: 13px; margin: 0; }

/* Popup builder (class-kwh-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. */
.kwh-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.kwh-popup-overlay { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.5 ); }
.kwh-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 );
}
.kwh-popup-close {
	position: absolute; top: 10px; right: 14px; background: transparent; border: none; font-size: 24px;
	line-height: 1; cursor: pointer; color: #666;
}
body.kwh-popup-open { overflow: hidden; }

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