/* =============================================
   CHECKOUT (WooCommerce block-based Checkout)
   The checkout page renders the WC "Checkout" block (Store API + React),
   not the classic [woocommerce_checkout] shortcode - the markup below
   (wc-block-components-*) comes from that block. Styled to read as a
   2-column layout: fields on the left, a sticky order summary card on
   the grey right column. Same approach as the zulema-perfumes theme.
   ============================================= */

/* Full-bleed: break the checkout block out of .lg-container's centered
   max-width so the white/grey column split reaches the actual viewport
   edges, not just a centered 1280px box with margins either side. */
.wp-block-woocommerce-checkout {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	padding-top: 0;
	padding-bottom: 0;
}

/* Center the actual form fields within the (now viewport-wide) white
   left column instead of letting inputs stretch edge-to-edge. */
.wc-block-checkout__form {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: 40px;
}

/* Same centering for the order summary's content within the grey
   right column. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	max-width: 420px;
	margin-inline: auto;
}

/* Full-height grey backdrop for the right side. We deliberately do NOT
   resize .wc-block-checkout__sidebar itself to match the main column's
   height - WC's checkout block measures the sidebar's own rendered
   height with a ResizeObserver and drops the "is-sticky" class whenever
   that height exceeds the viewport, which silently kills the sticky
   behavior. Instead we paint a ::before behind it, sized to the parent
   row's natural height, leaving the real sticky sidebar untouched. */
.wc-block-components-sidebar-layout.wc-block-checkout {
	position: relative;
	background: #fff;
}

/* Scoped to .is-large only - below that breakpoint WC stacks main and
   sidebar into a single column, where a left:65% backdrop would cut a
   meaningless vertical stripe through the stacked content. */
.wc-block-components-sidebar-layout.wc-block-checkout.is-large::before {
	content: '';
	position: absolute;
	inset: 0;
	left: 65%;
	background: var(--lg-bg);
	z-index: 0;
}

.wc-block-checkout__sidebar {
	position: relative;
	z-index: 1;
	padding: 40px 24px;
}

/* On mobile/stacked layouts WC shows this sidebar as a collapsed
   "Rezumat comanda" toggle near the top, and separately renders the
   full order summary again near the bottom (right above "Plaseaza
   comanda"). We only want the bottom one, so hide the top sidebar
   entirely once the layout isn't .is-large. */
.wc-block-components-sidebar-layout.wc-block-checkout:not(.is-large) .wc-block-checkout__sidebar {
	display: none;
}

/* The checkout page has no sticky navbar (see header.php / topbar-
   checkout.php - the menu is removed there), so the sticky order
   summary only needs a small breathing offset, not navbar clearance. */
.wc-block-checkout__sidebar.is-sticky {
	top: 16px;
}

/* Step sections (contact / shipping address / shipping method / payment) */
.wc-block-components-checkout-step {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--lg-border);
}

.wc-block-components-checkout-step__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--lg-navy);
	margin-bottom: 6px;
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-blocks-components-select__select {
	border-radius: 4px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
	border-color: var(--lg-navy);
}

/* Shipping / payment method rows.
   No `padding` override here on purpose - the option's radio <input> is
   absolutely positioned by core CSS at an offset that's coordinated with
   this label's own default padding; overriding the padding desyncs that
   offset and makes the input overlap the label text. */
.wc-block-components-radio-control__option {
	border: 1px solid var(--lg-border);
	border-radius: 4px;
	margin-bottom: 10px;
}

.wc-block-components-radio-control__option-checked {
	border-color: var(--lg-orange);
}

/* Order summary line items */
.wc-block-components-order-summary-item__image img {
	border-radius: 4px;
}

/* Place order button */
.wc-block-components-checkout-place-order-button.wc-block-components-button {
	background: var(--lg-orange);
	border: 1px solid var(--lg-orange);
	border-radius: 999px;
	font-weight: 700;
	padding: 14px 28px;
}

.wc-block-components-checkout-place-order-button.wc-block-components-button:hover {
	background: #fff;
	color: var(--lg-orange);
}

/* ===== Bloc de incredere - sub sumarul comenzii, in coloana din dreapta ===== */
.lg-checkout-trust {
	margin-top: 24px;
}

.lg-checkout-trust__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.lg-checkout-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lg-border);
}

.lg-checkout-trust__item:last-child {
	border-bottom: none;
}

.lg-checkout-trust__item .lg-icon {
	font-size: 22px;
	color: var(--lg-orange);
	flex-shrink: 0;
	margin-top: 2px;
}

.lg-checkout-trust__item .lg-icon-check {
	font-family: inherit !important;
	font-weight: 700;
}

.lg-checkout-trust__item .lg-icon-check::before {
	content: '\2713';
}

.lg-checkout-trust__item div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lg-checkout-trust__item strong {
	font-size: 13px;
	color: var(--lg-navy);
}

.lg-checkout-trust__item span {
	font-size: 12px;
	color: var(--lg-gray);
}

.lg-checkout-trust__phone {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--lg-bg);
	border-radius: 4px;
	padding: 16px 0;
}

.lg-checkout-trust__phone .lg-icon {
	font-size: 22px;
	color: var(--lg-navy);
	flex-shrink: 0;
	margin-top: 2px;
}

.lg-checkout-trust__phone div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lg-checkout-trust__phone strong {
	font-size: 13px;
	color: var(--lg-navy);
}

.lg-checkout-trust__phone span {
	font-size: 12px;
	color: var(--lg-gray);
}

.lg-checkout-trust__phone a {
	color: var(--lg-orange);
	font-weight: 600;
}

/* Hide the "Adauga cupoane" panel in the order summary when the "Cod
   promotional in mini cart" toggle (Setari tema options page) is off -
   the same setting gates the mini cart's promo code form. */
body.lg-hide-checkout-coupon .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none;
}

/* Address form is a flex row (flex-wrap), so `order` reflows fields
   without touching field registration. Push Companie + Cod fiscal to the
   very end, Companie first. */
.wc-block-components-address-form__company {
	order: 110;
}

.wc-block-components-address-form__lagheorghita-cod-fiscal {
	order: 120;
}

/* Checkout steps are a plain block-flow list by default (no native
   ordering hook). Switch to a column flex just to unlock `order` for the
   "Adauga o nota" step (see below). */
.wc-block-checkout__form {
	display: flex;
	flex-direction: column;
}

.wc-block-checkout__order-notes {
	order: 1;
}

.wc-block-checkout__terms {
	order: 2;
}

.wc-block-checkout__actions {
	order: 3;
}

/* The "marketing consent" checkbox is moved into .wc-block-checkout__terms
   (right above the terms checkbox, same box) by assets/js/checkout.js once
   the block hydrates. Its original step - now always empty - stays hidden
   the whole time so there's no flash of it in the wrong place first. */
.wc-block-checkout__order-fields {
	display: none;
}

.wc-block-checkout__terms .wc-block-components-address-form__lagheorghita-marketing-consent {
	margin-bottom: 14px;
}

@media (max-width: 768px) {
	.wp-block-woocommerce-checkout {
		left: 0;
		width: auto;
		margin-left: 0;
	}

	.wc-block-checkout__form {
		padding-inline: 20px;
	}
}