/**
 * Schuck WooCommerce Checkout — base layout.
 * Colours, fonts, borders and backgrounds are left to the Elementor style
 * controls; this file only handles structure that WooCommerce's own CSS
 * cannot provide outside its `.woocommerce` wrapper.
 */

.swc-checkout-part { width: 100%; }

/* ──────────────────────────────────────────────
   Field rows
   WooCommerce's half-width rules are scoped to
   `.woocommerce form .form-row-first`, which never matches inside an
   Elementor widget. These flex rules reproduce that two-column
   behaviour independently.
   ────────────────────────────────────────────── */
.swc-billing-fields,
.swc-additional-fields,
.swc-billing .shipping_address,
.swc-companion-fields {
	display: flex;
	flex-wrap: wrap;
	column-gap: 3%;
	align-items: flex-start;
}

.swc-billing-fields > .form-row,
.swc-additional-fields > .form-row,
.swc-billing .shipping_address > .form-row,
.swc-companion-fields > .form-row {
	float: none !important;
	width: auto !important;
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.swc-billing-fields > .form-row-first,
.swc-billing-fields > .form-row-last,
.swc-additional-fields > .form-row-first,
.swc-additional-fields > .form-row-last,
.swc-billing .shipping_address > .form-row-first,
.swc-billing .shipping_address > .form-row-last,
.swc-companion-fields > .form-row-first,
.swc-companion-fields > .form-row-last {
	flex: 0 0 48.5%;
	max-width: 48.5%;
}

.swc-checkout-part .form-row input.input-text,
.swc-checkout-part .form-row textarea,
.swc-checkout-part .form-row select,
.swc-checkout-part .woocommerce-input-wrapper { width: 100%; box-sizing: border-box; }

@media (max-width: 767px) {
	.swc-billing-fields > .form-row-first,
	.swc-billing-fields > .form-row-last,
	.swc-additional-fields > .form-row-first,
	.swc-additional-fields > .form-row-last,
	.swc-billing .shipping_address > .form-row-first,
	.swc-billing .shipping_address > .form-row-last,
	.swc-companion-fields > .form-row-first,
	.swc-companion-fields > .form-row-last {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.swc-companion-block { margin-bottom: 24px; }

/* ──────────────────────────────────────────────
   Dropdown arrow
   A native <select> always paints its arrow hard against the right
   border and no amount of padding moves it. With the custom arrow on,
   we suppress the native one and draw our own, which can then be
   positioned, resized and coloured from Elementor.
   ────────────────────────────────────────────── */
.swc-custom-arrow .woocommerce-input-wrapper { position: relative; display: block; }

.swc-custom-arrow select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	padding-right: 38px;
}

.swc-custom-arrow .woocommerce-input-wrapper:has(> select)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 11px;
	height: 7px;
	pointer-events: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Never double up on a select2-enhanced field, which draws its own arrow. */
.swc-custom-arrow .woocommerce-input-wrapper:has(.select2-container)::after { display: none; }

/* ──────────────────────────────────────────────
   Coupon
   ────────────────────────────────────────────── */
.swc-coupon-toggle { cursor: pointer; display: inline-block; margin: 0 0 10px; }
.swc-coupon-toggle-cta { text-decoration: underline; }
.swc-coupon-panel { width: 100%; }

.swc-coupon-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: stretch;
}
.swc-coupon-row .swc-coupon-code { flex: 1 1 auto; min-width: 0; width: auto; }
.swc-coupon-row .swc-coupon-apply { flex: 0 0 auto; white-space: nowrap; cursor: pointer; width: auto; }

.swc-coupon-stacked .swc-coupon-row { flex-wrap: wrap; }
.swc-coupon-stacked .swc-coupon-row .swc-coupon-code,
.swc-coupon-stacked .swc-coupon-row .swc-coupon-apply { flex: 0 0 100%; }

@media (max-width: 420px) {
	.swc-coupon-row { flex-wrap: wrap; }
	.swc-coupon-row .swc-coupon-code,
	.swc-coupon-row .swc-coupon-apply { flex: 0 0 100%; }
}

.swc-coupon.swc-loading { opacity: .6; pointer-events: none; }
.swc-coupon-applied { list-style: none; margin: 12px 0 0; padding: 0; }
.swc-coupon-applied li { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; }
.swc-coupon-remove { cursor: pointer; text-decoration: none; line-height: 1; }

.swc-coupon-notice:empty { display: none; }
.swc-coupon-notice .swc-notice {
	margin: 12px 0 0; padding: 10px 14px; border-radius: 4px;
	font-size: 14px; line-height: 1.5; list-style: none;
}
.swc-coupon-notice .swc-notice p { margin: 0; padding: 0; }
.swc-coupon-notice .swc-notice p + p { margin-top: 6px; }
.swc-coupon-notice .swc-notice-error { background: #fdecea; color: #8a1f11; }
.swc-coupon-notice .swc-notice-success { background: #e6f4ea; color: #1e4620; }

/* ──────────────────────────────────────────────
   Order summary
   ────────────────────────────────────────────── */

/* Left-align by default — many themes right-align or center shop_table
   headers; the Elementor control above can still override this per widget. */
.swc-summary thead th { text-align: left !important; }

.swc-summary .variation {
	display: grid; grid-template-columns: max-content 1fr;
	column-gap: 6px; row-gap: 2px; margin: 6px 0 0;
}
.swc-summary .variation dt,
.swc-summary .variation dd { margin: 0; padding: 0; float: none; clear: none; }
.swc-summary .variation dt { font-weight: 600; }
.swc-summary .variation dt p,
.swc-summary .variation dd p { margin: 0; padding: 0; display: inline; }

.swc-meta-stacked .swc-summary .variation { grid-template-columns: 1fr; row-gap: 0; }

.swc-zebra-off .swc-summary table tbody tr,
.swc-zebra-off .swc-summary table tbody tr:nth-child(odd),
.swc-zebra-off .swc-summary table tbody tr:nth-child(even),
.swc-zebra-off .swc-summary table tbody tr:nth-child(odd) td,
.swc-zebra-off .swc-summary table tbody tr:nth-child(even) td {
	background-color: transparent !important;
}

/* ──────────────────────────────────────────────
   Payment
   ────────────────────────────────────────────── */
.swc-payment #payment .form-row.place-order { float: none; width: 100%; padding: 0; }
.swc-payment #payment #place_order { float: none; }
.swc-payment #payment .form-row.place-order::after { content: ""; display: table; clear: both; }

.swc-payment .swc-privacy-text { margin: 0 0 14px; }
.swc-payment .swc-privacy-text p { margin: 0; }
.swc-payment .swc-privacy-text p + p { margin-top: 8px; }

/* Terms */
.swc-terms { margin: 14px 0; }
.swc-terms-label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.swc-terms-input { margin-top: 3px; flex: 0 0 auto; }
.swc-terms-inline-error { display: block; margin-top: 6px; font-size: 13px; color: #b32d2e; }
.swc-terms-error .swc-terms-text { color: #b32d2e; }

/* Editor placeholder */
.swc-editor-placeholder {
	padding: 22px; border: 1px dashed #c3c4c7; border-radius: 6px;
	background: #f6f7f7; color: #50575e; font-size: 13px; text-align: center;
}