/*
Theme Name: GPUK Child
Author: Red Box Web
Author URI: https://www.redboxweb.co.uk/
Version: 1.0
Description: GPUK Child Theme.
Template: gpuk
*/

@import url('../gpuk/style.css');

/* ==========================================================================
   Checkout page usability improvements
   Scoped to body.woocommerce-checkout so nothing else is affected.
   ========================================================================== */

body.woocommerce-checkout {
	--gp-checkout-accent: #c1272d; /* adjust to match the exact brand red if needed */
	--gp-checkout-panel-bg: rgba(255, 255, 255, 0.05);
	--gp-checkout-panel-border: rgba(255, 255, 255, 0.15);
}

/* -- General spacing / rhythm ------------------------------------------- */

body.woocommerce-checkout .woocommerce form .form-row {
	margin: 0 0 18px;
	padding: 0;
}

body.woocommerce-checkout .woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	line-height: 1.3;
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gp-checkout-panel-border);
}

/* -- Inputs / selects / textareas --------------------------------------- */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
	padding: 12px 14px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	font-size: 15px;
	color: #1a1a1a;
	background-color: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* #theme-page select / .woocommerce select (core-styles.css) sets a `background`
   shorthand for the dropdown arrow that wipes out background-color, leaving a
   transparent select with dark text over the page's black background. Match its
   ID-level specificity so white bg / dark text actually wins. */
body.woocommerce-checkout #theme-page .woocommerce form .form-row select {
	background-color: #ffffff;
	color: #1a1a1a;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text::placeholder,
body.woocommerce-checkout .woocommerce form .form-row textarea::placeholder {
	color: #6e6e6e;
	opacity: 1;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--gp-checkout-accent);
	box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.25);
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select {
	border-color: #e2001a;
	box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.15);
}

/* -- Group billing / additional info / order review into readable panels - */

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	background: var(--gp-checkout-panel-bg);
	border: 1px solid var(--gp-checkout-panel-border);
	border-radius: 8px;
	padding: 24px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 12px 4px;
	border-bottom: 1px solid var(--gp-checkout-panel-border);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	border-bottom: none;
	font-size: 1.15em;
	padding-top: 16px;
}

/* -- Payment methods: make the radio choice actually visible ------------ */

body.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: none;
	margin-bottom: 16px;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	padding: 14px 16px;
	border: 1px solid var(--gp-checkout-panel-border);
	border-radius: 6px;
	margin-bottom: 10px;
	background: var(--gp-checkout-panel-bg);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	margin: 0;
}

body.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--gp-checkout-accent);
	cursor: pointer;
	flex-shrink: 0;
}

/* the selected payment method's fields (e.g. the Stripe card panel) */
body.woocommerce-checkout #payment .payment_box {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	color: #1a1a1a;
	text-shadow: none;
	border-radius: 6px;
	padding: 18px;
	margin: 12px 0 0;
	box-shadow: none;
}

/* the page's global text colour is white; force dark text back on for anything
   inside the white payment box (e.g. the "save payment information" label) */
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_box p,
body.woocommerce-checkout #payment .payment_box label {
	color: #1a1a1a;
}

/* the WooPayments/Stripe card form specifically keeps losing to a more
   specific/important dark-skin rule, so force it directly */
body.woocommerce-checkout .wcpay-upe-form label,
body.woocommerce-checkout .wcpay-upe-form p {
	color: #1a1a1a !important;
}

body.woocommerce-checkout #payment .payment_box:before {
	display: none;
}

/* -- Buttons -------------------------------------------------------------- */

body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[name="woocommerce_checkout_update_totals"] {
	padding: 14px 32px;
	font-size: 16px;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button[name="woocommerce_checkout_update_totals"]:hover {
	opacity: 0.9;
}

body.woocommerce-checkout a:focus-visible,
body.woocommerce-checkout button:focus-visible,
body.woocommerce-checkout input:focus-visible,
body.woocommerce-checkout select:focus-visible {
	outline: 3px solid var(--gp-checkout-accent);
	outline-offset: 2px;
}

/* -- Coupon notice --------------------------------------------------------- */

body.woocommerce-checkout .mk-message-box {
	padding: 14px 18px;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* -- Responsive: stack the two-column layout on smaller screens ---------- */

@media (max-width: 768px) {
	body.woocommerce-checkout #customer_details .col-1,
	body.woocommerce-checkout #customer_details .col-2 {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	body.woocommerce-checkout .woocommerce form .form-row-first,
	body.woocommerce-checkout .woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}

	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-additional-fields,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
		padding: 16px;
	}
}