/*
Theme Name: Bricks Child Custom
Theme URI: https://propheon.io
Description: Child Theme für Bricks mit WooCommerce-Anpassungen
Author: Stef
Version: 1.0
Template: bricks
Text Domain: bricks-child-custom
*/

/*
========================================
WooCommerce Order Pay – Final Clean CSS
für form-pay.php mit:
<form id="wc-custom-order-pay">
========================================
*/

body.woocommerce-order-pay {
	background:
		radial-gradient(circle at top left, rgba(0, 98, 255, 0.10), transparent 28%),
		linear-gradient(180deg, #050912 0%, #04070d 100%);
	color: #ffffff;
}

body.woocommerce-order-pay .site-content,
body.woocommerce-order-pay main,
body.woocommerce-order-pay #content,
body.woocommerce-order-pay .content-area,
body.woocommerce-order-pay .brxe-main {
	background: transparent;
}

/*
========================================
Outer Wrapper
========================================
*/

body.woocommerce-order-pay .woocommerce.wp-block-group.aligncenter,
body.woocommerce-order-pay .wp-block-group.aligncenter {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	float: none !important;
	justify-items: stretch !important;
}

body.woocommerce-order-pay #wc-custom-order-pay,
body.woocommerce-order-pay form.wc-custom-pay-form {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 24px 56px !important;
	display: block !important;
}

/*
========================================
Notices
========================================
*/

body.woocommerce-order-pay .woocommerce-notices-wrapper {
	margin: 0 0 28px !important;
}

body.woocommerce-order-pay ul.woocommerce-error,
body.woocommerce-order-pay ul.woocommerce-message,
body.woocommerce-order-pay ul.woocommerce-info {
	margin: 0 !important;
	padding: 18px 20px !important;
	border-radius: 18px !important;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(226,234,247,.88);
	list-style: none;
}

/*
========================================
Grid Layout
========================================
*/

body.woocommerce-order-pay .wc-pay-layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 420px !important;
	gap: 36px !important;
	align-items: start !important;
	width: 100% !important;
}

body.woocommerce-order-pay .wc-pay-main {
	display: grid !important;
	gap: 28px !important;
	min-width: 0 !important;
}

body.woocommerce-order-pay .wc-pay-sidebar {
	grid-column: 2 !important;
	grid-row: 1 !important;
	width: 420px !important;
	max-width: 420px !important;
	justify-self: end !important;
	align-self: start !important;
	margin: 0 !important;
	min-width: 0 !important;
	position: static !important;
	transform: none !important;
}

/*
========================================
Cards
========================================
*/

body.woocommerce-order-pay .wc-pay-card,
body.woocommerce-order-pay .wc-pay-summary {
	background: linear-gradient(
		180deg,
		rgba(11,18,34,.92) 0%,
		rgba(9,15,29,.96) 100%
	) !important;
	border: 1px solid rgba(255,255,255,.05) !important;
	border-radius: 24px !important;
	padding: 28px 30px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,.28) !important;
}

/*
========================================
Payment Section Reset
========================================
*/

body.woocommerce-order-pay #payment {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.woocommerce-order-pay .woocommerce-checkout-review-order,
body.woocommerce-order-pay .shop_table,
body.woocommerce-order-pay table.shop_table {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	position: static !important;
	transform: none !important;
	border: 0 !important;
	background: transparent !important;
}

/*
========================================
Payment Methods
========================================
*/

body.woocommerce-order-pay .wc_payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

body.woocommerce-order-pay .wc_payment_methods > li {
	margin: 0 0 14px;
	padding: 18px;
	border: 1px solid rgba(0,136,255,.38);
	border-radius: 16px;
	background: rgba(17, 28, 49, 0.72);
}

body.woocommerce-order-pay .wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
}

body.woocommerce-order-pay .wc_payment_method input[type="radio"] {
	accent-color: #2292ff;
}

body.woocommerce-order-pay .payment_box {
	background: transparent !important;
	border: 0 !important;
	padding: 8px 0 0 28px !important;
	margin: 0 !important;
	color: rgba(218,228,245,.72);
	font-size: 15px;
	line-height: 1.65;
}

body.woocommerce-order-pay .payment_box::before {
	display: none !important;
}

/*
========================================
Buttons
========================================
*/

body.woocommerce-order-pay #place_order,
body.woocommerce-order-pay .wc-pay-button {
	width: 100%;
	min-height: 60px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		#f5a746 0%,
		#ef9835 100%
	);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 16px 30px rgba(239,152,53,.28);
	cursor: pointer;
}

body.woocommerce-order-pay #place_order:hover,
body.woocommerce-order-pay .wc-pay-button:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

/*
========================================
Links
========================================
*/

body.woocommerce-order-pay a {
	color: #2292ff;
	text-decoration: none;
}

body.woocommerce-order-pay a:hover {
	color: #62b0ff;
}

/*
========================================
Responsive
========================================
*/

@media (max-width: 980px) {
	body.woocommerce-order-pay #wc-custom-order-pay,
	body.woocommerce-order-pay form.wc-custom-pay-form {
		padding: 0 16px 36px !important;
	}

	body.woocommerce-order-pay .wc-pay-layout {
		grid-template-columns: 1fr !important;
	}

	body.woocommerce-order-pay .wc-pay-sidebar {
		grid-column: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-self: stretch !important;
	}
}

@media (max-width: 640px) {
	body.woocommerce-order-pay .wc-pay-card,
	body.woocommerce-order-pay .wc-pay-summary {
		padding: 18px !important;
		border-radius: 18px !important;
	}
}