/*!
 * Checkout Alan Editörü — frontend styles.
 * Scoped under .woocommerce-checkout to minimize theme conflicts.
 */

.woocommerce-checkout .cae-section {
	margin-top: 24px;
	clear: both;
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-checkout .cae-section::after { content: ''; display: table; clear: both; }
.woocommerce-checkout .cae-section-title { margin: 0 0 8px; font-size: 18px; }
.woocommerce-checkout .cae-section-description { margin: 0 0 12px; color: #6b7280; }
.woocommerce-checkout .cae-section-iteration {
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fafafa;
	box-sizing: border-box;
	width: 100%;
}
.woocommerce-checkout .cae-section-iteration::after { content: ''; display: table; clear: both; }
.woocommerce-checkout .cae-section-iteration .cae-section-title { font-size: 15px; color: #111827; }
.woocommerce-checkout .cae-section-iteration .form-row { width: 100%; float: none; }

.woocommerce-checkout .cae-radio-group,
.woocommerce-checkout .cae-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.woocommerce-checkout .cae-radio,
.woocommerce-checkout .cae-checkbox { display: inline-flex; align-items: center; gap: 6px; }

.woocommerce-checkout .cae-file-preview { font-size: 13px; margin-top: 6px; color: #4b5563; }
.woocommerce-checkout .cae-paragraph { margin: 12px 0; }
.woocommerce-checkout .cae-heading { margin: 16px 0 8px; }

/* Hidden until conditional engine reveals. */
.woocommerce-checkout [data-cae-condition] { transition: opacity .15s ease; }
.woocommerce-checkout [data-cae-condition].cae-hidden { display: none !important; }

/* Hello Elementor / Elementor neutralization */
.cae-elementor-active .woocommerce-checkout .cae-section { font-family: inherit; }

/*
 * Elementor Pro Checkout widget compatibility.
 *
 * Elementor Pro's Checkout widget wraps WooCommerce checkout fields in its
 * own container (`.e-checkout__container`, `.e-checkout__billing-fields`,
 * `.e-checkout__order-details`, etc.) which may use CSS Grid, Flexbox or
 * float layouts depending on the version. The widget also adds a marker
 * class `e-checkout__column-end` to whatever it considers the last column
 * of every row. When CAE injects extra fields or wraps groups in a section,
 * any of those layouts can collide.
 *
 * Scope is intentionally NOT chained off `.woocommerce-checkout` because
 * Elementor Pro doesn't always carry that class on the form's outer wrapper.
 * Selectors are keyed off the body class (`cae-elementor-pro-active`) only,
 * which is added by Elementor.php as long as Elementor Pro is loaded — that
 * is the most reliable hook we have.
 *
 * Every layout property a parent grid/flex/float layout could set is reset
 * with !important — declarative defence in depth so we don't have to guess
 * which layout system the running Elementor Pro version is using.
 */
body.cae-elementor-pro-active .cae-elementor-row,
body.cae-elementor-pro-active .cae-section,
body.cae-elementor-pro-active .cae-section-iteration,
body.cae-elementor-pro-active .form-row.cae-custom-field {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	flex: 0 0 100% !important;
	flex-basis: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	display: block !important;
	box-sizing: border-box !important;
}

/* Some Elementor Pro versions re-anchor column-end onto the *previous* row
 * after we span ourselves full-width. Neutralise the marker when it lands
 * on a CAE element so it can't break the layout. */
body.cae-elementor-pro-active .cae-elementor-row.e-checkout__column-end,
body.cae-elementor-pro-active .cae-section.e-checkout__column-end,
body.cae-elementor-pro-active .cae-custom-field.e-checkout__column-end {
	grid-column-end: -1 !important;
	flex-basis: 100% !important;
	max-width: 100% !important;
}

/* The field that sits *immediately after* one of our full-width rows must
 * be treated as the start of a new grid row — otherwise Elementor still
 * thinks it's continuing the previous half-row. */
body.cae-elementor-pro-active .cae-elementor-row + .form-row,
body.cae-elementor-pro-active .cae-section + .form-row,
body.cae-elementor-pro-active .form-row.cae-custom-field + .form-row {
	clear: both !important;
}

/* Section wrappers shouldn't inherit the surrounding grid's column gap. */
body.cae-elementor-pro-active .cae-section {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Inside a CAE section the inner form rows must follow the section's
 * width, not the outer grid. */
body.cae-elementor-pro-active .cae-section .form-row,
body.cae-elementor-pro-active .cae-section-iteration .form-row {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
	grid-column: 1 / -1 !important;
}

@media (max-width: 600px) {
	.woocommerce-checkout .cae-section-title { font-size: 16px; }
}