/*
Theme Name: WPay Checkout
Theme URI: https://example.com/wpay-checkout
Author: WPay
Author URI: https://example.com
Description: A minimal, single-purpose WordPress theme for a headless WooCommerce payment backend. Built exclusively to render the WooCommerce "pay for order" and order-received screens for orders created via the REST API - there is no shop, cart, or blog UI.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpay-checkout
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	--wpay-bg: #f1f2f4;
	--wpay-card-bg: #ffffff;
	--wpay-border: #e4e6eb;
	--wpay-border-strong: #d7dae0;
	--wpay-text: #16181d;
	--wpay-text-muted: #6b7280;
	--wpay-primary: #18181b;
	--wpay-primary-hover: #000000;
	--wpay-accent: #2563eb;
	--wpay-info-bg: #eef4ff;
	--wpay-info-border: #cddcfb;
	--wpay-info-text: #29406e;
	--wpay-success-bg: #eefaf1;
	--wpay-success-border: #bfe8cc;
	--wpay-success-text: #1e6b3c;
	--wpay-error-bg: #fdecec;
	--wpay-error-border: #f5c2c2;
	--wpay-error-text: #8a1f1f;
	--wpay-radius-lg: 12px;
	--wpay-radius-md: 10px;
	--wpay-radius-sm: 8px;
	--wpay-shadow: 0 1px 2px rgba(16, 18, 22, 0.04), 0 10px 30px rgba(16, 18, 22, 0.06);
	--wpay-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Widened from the original 480-560px spec: the Basis Theory iframe
	   (Card Number / MM-YY / CVC) needs more horizontal room than that to
	   lay its three fields out with proper spacing. If 600px ever feels
	   too roomy once the iframe issue is fixed, this is the one line to
	   turn back down - try 560px first, don't go below that. */
	--wpay-card-max-width: 600px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--wpay-font);
	background: var(--wpay-bg);
	color: var(--wpay-text);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Page shell (header.php / footer.php)
   ========================================================= */
.wpay-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wpay-main {
	flex: 1 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 56px 20px;
}

.wpay-card {
	width: 100%;
	max-width: var(--wpay-card-max-width);
	background: var(--wpay-card-bg);
	border: 1px solid var(--wpay-border);
	border-radius: var(--wpay-radius-lg);
	box-shadow: var(--wpay-shadow);
	padding: 40px;
}

.wpay-footer {
	flex-shrink: 0;
	text-align: center;
	padding: 8px 20px 40px;
}

.wpay-footer-note {
	margin: 0;
	font-size: 12px;
	color: var(--wpay-text-muted);
	letter-spacing: 0.02em;
}

@media (max-width: 560px) {
	.wpay-main {
		padding: 0;
	}
	.wpay-card {
		max-width: 100%;
		min-height: 100vh;
		border-radius: 0;
		border: none;
		box-shadow: none;
		padding: 28px 20px;
	}
}

/* =========================================================
   Typography inside the card
   ========================================================= */
.wpay-card h1,
.wpay-card h2,
.wpay-card h3 {
	font-family: var(--wpay-font);
	font-weight: 600;
	color: var(--wpay-text);
	line-height: 1.3;
	margin: 0 0 20px;
}

.wpay-card h1 {
	font-size: 20px;
}

.wpay-card h2 {
	font-size: 15px;
	margin-top: 32px;
}

.wpay-card p {
	color: var(--wpay-text-muted);
	margin: 0 0 16px;
}

.wpay-card a {
	color: var(--wpay-accent);
	text-decoration: none;
}

.wpay-card a:hover {
	text-decoration: underline;
}

.wpay-card ul,
.wpay-card ol {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--wpay-text-muted);
}

/* =========================================================
   WooCommerce notices
   (guest-order notice, success/error messages)
   ========================================================= */
.wpay-card .woocommerce-info,
.wpay-card .woocommerce-message,
.wpay-card .woocommerce-error {
	border-radius: var(--wpay-radius-sm);
	padding: 14px 16px;
	margin: 0 0 24px;
	font-size: 13.5px;
	line-height: 1.5;
	list-style: none;
}

/* Calm blue informational banner - e.g. "You are paying for a guest order..." */
.wpay-card .woocommerce-info {
	background: var(--wpay-info-bg);
	border: 1px solid var(--wpay-info-border);
	color: var(--wpay-info-text);
}

/* Success (e.g. order confirmations) */
.wpay-card .woocommerce-message {
	background: var(--wpay-success-bg);
	border: 1px solid var(--wpay-success-border);
	color: var(--wpay-success-text);
}

/* On this install the guest-order caution itself renders with WooCommerce's
   .woocommerce-error class rather than .woocommerce-info, so by default we
   give it the SAME calm treatment as .woocommerce-info - it's a routine
   "make sure this is your order" message, not something broken.
   NOTE: verify this assumption in DevTools if anything looks off, since it
   can't be confirmed without seeing the live markup. */
.wpay-card .woocommerce-error {
	background: var(--wpay-info-bg);
	border: 1px solid var(--wpay-info-border);
	color: var(--wpay-info-text);
}

/* Real-time payment/checkout failures (declined card, validation errors)
   that WooCommerce's own checkout.js injects after a failed submission get
   wrapped in .woocommerce-NoticeGroup-checkout - keep THOSE genuinely
   urgent so a declined card is impossible to miss. Trigger a real decline
   on a test order to confirm this still shows red; if it doesn't (e.g. the
   plugin wraps errors differently), tell me the actual wrapper class and
   I'll retarget this rule precisely instead. */
.wpay-card .woocommerce-NoticeGroup-checkout .woocommerce-error {
	background: var(--wpay-error-bg);
	border: 1px solid var(--wpay-error-border);
	color: var(--wpay-error-text);
}

.wpay-card .woocommerce-NoticeGroup-checkout .woocommerce-error li {
	color: var(--wpay-error-text);
}

.wpay-card .woocommerce-info::before,
.wpay-card .woocommerce-message::before {
	display: none;
}

.wpay-card .woocommerce-error ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpay-card .woocommerce-error li {
	margin: 0;
	padding: 4px 0 0;
	color: inherit;
}

.wpay-card .woocommerce-error li:first-child {
	padding-top: 0;
}

/* "Thank you, order received" banner on the order-received page */
.wpay-card p.woocommerce-thankyou-order-received {
	background: var(--wpay-success-bg);
	border: 1px solid var(--wpay-success-border);
	color: var(--wpay-success-text);
	border-radius: var(--wpay-radius-sm);
	padding: 14px 16px;
	margin: 0 0 24px;
	font-weight: 500;
}

/* =========================================================
   Order review table (pay-for-order + order-received)
   ========================================================= */
.wpay-card table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	font-size: 14px;
}

.wpay-card table.shop_table th,
.wpay-card table.shop_table td {
	padding: 12px 4px;
	border-bottom: 1px solid var(--wpay-border);
	text-align: left;
	vertical-align: top;
	color: var(--wpay-text);
}

.wpay-card table.shop_table thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wpay-text-muted);
	font-weight: 600;
	border-bottom: 1px solid var(--wpay-border-strong);
}

.wpay-card table.shop_table td.product-total,
.wpay-card table.shop_table th.product-total {
	text-align: right;
	white-space: nowrap;
}

.wpay-card table.shop_table tbody td.product-name .wc-item-meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--wpay-text-muted);
	list-style: none;
	padding: 0;
}

.wpay-card table.shop_table tfoot th,
.wpay-card table.shop_table tfoot td {
	text-align: right;
	border-bottom: none;
	padding: 10px 4px;
}

.wpay-card table.shop_table tfoot tr th {
	text-align: left;
	color: var(--wpay-text-muted);
	font-weight: 500;
}

/* Final total row - visually distinct from the rest of the table.
   Matches WooCommerce's last totals row (order_total) whether or not
   the installed version adds a row-level class. */
.wpay-card table.shop_table tfoot tr:last-child th,
.wpay-card table.shop_table tfoot tr:last-child td,
.wpay-card table.shop_table tfoot tr.order-total th,
.wpay-card table.shop_table tfoot tr.order-total td {
	border-top: 2px solid var(--wpay-text);
	padding-top: 16px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wpay-text);
}

/* =========================================================
   Payment methods list + gateway box
   (outer container around the WPay 2D / Basis Theory iframe)
   ========================================================= */
.wpay-card ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.wpay-card ul.wc_payment_methods li.wc_payment_method {
	margin: 0 0 12px;
}

.wpay-card ul.wc_payment_methods label {
	font-weight: 600;
	font-size: 14px;
	color: var(--wpay-text);
	display: inline-block;
	margin-bottom: 0;
}

.wpay-card ul.wc_payment_methods img {
	vertical-align: middle;
	margin-left: 6px;
}

/* This is the outer box WooCommerce renders around each gateway's fields.
   For WPay 2D this is the wrapper the Basis Theory tokenization iframe gets
   injected into - style ONLY this container (border/radius/padding/bg).
   The fields rendered inside the iframe itself are not reachable from this
   stylesheet; if the plugin uses a different wrapper class/id than
   ".payment_box", inspect the live DOM and adjust this selector. */
.wpay-card .payment_box,
.wpay-card .payment_method_wpay_2d .payment_box {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fafafa;
	border: 1px solid var(--wpay-border-strong);
	border-radius: var(--wpay-radius-md);
	padding: 18px;
	margin: 10px 0 6px;
}

/* Deliberately nothing below this comment targets *inside* .payment_box.
   If fields are still cramped after the width-600px fix above, check
   DevTools for an inline `style="width:..."` on whatever Basis Theory
   wraps its fields in - and if you find one, override just that specific
   element/selector rather than a broad ">div" rule, since a wrapper div
   in there may be an intentional flex/grid row holding MM/YY and CVC
   side by side, and forcing every nested div to width:100% would stack
   them instead of fixing the spacing. */

.wpay-card .payment_box p {
	margin: 0 0 14px;
	color: var(--wpay-text-muted);
	font-size: 13px;
}

.wpay-card .payment_box p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Form fields (Name on card, billing fields, etc.)
   ========================================================= */
.wpay-card .form-row {
	margin: 0 0 16px;
}

.wpay-card .woocommerce-input-wrapper {
	display: block;
}

.wpay-card label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--wpay-text);
	margin-bottom: 6px;
}

.wpay-card label .required,
.wpay-card label abbr.required {
	color: #b91c1c;
	text-decoration: none;
	border: none;
	margin-left: 2px;
}

.wpay-card input.input-text,
.wpay-card input[type="text"],
.wpay-card input[type="email"],
.wpay-card input[type="tel"],
.wpay-card input[type="number"],
.wpay-card select,
.wpay-card textarea {
	display: block;
	width: 100%;
	font-family: var(--wpay-font);
	font-size: 14px;
	color: var(--wpay-text);
	background: #ffffff;
	border: 1px solid var(--wpay-border-strong);
	border-radius: var(--wpay-radius-sm);
	padding: 12px 14px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpay-card input.input-text:focus,
.wpay-card input[type="text"]:focus,
.wpay-card input[type="email"]:focus,
.wpay-card input[type="tel"]:focus,
.wpay-card input[type="number"]:focus,
.wpay-card select:focus,
.wpay-card textarea:focus {
	outline: none;
	border-color: var(--wpay-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.wpay-card ::placeholder {
	color: #a3a7b0;
}

/* =========================================================
   Submit / "Pay now" button
   ========================================================= */
.wpay-card #place_order,
.wpay-card button.button,
.wpay-card input#place_order {
	display: block;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpay-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--wpay-radius-sm);
	padding: 15px 20px;
	font-family: var(--wpay-font);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.15s ease, transform 0.05s ease;
}

.wpay-card #place_order:hover,
.wpay-card button.button:hover,
.wpay-card input#place_order:hover {
	background: var(--wpay-primary-hover);
}

.wpay-card #place_order:active,
.wpay-card button.button:active {
	transform: translateY(1px);
}

.wpay-card #place_order:focus-visible,
.wpay-card button.button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.wpay-card #place_order:disabled,
.wpay-card button.button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* WooCommerce's built-in AJAX processing overlay - keep it functional,
   just keep it from clipping past our rounded card corners. */
.wpay-card .blockUI.blockOverlay {
	border-radius: var(--wpay-radius-lg);
}

/* =========================================================
   Order-received / thank-you page
   ========================================================= */
.wpay-card ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 28px;
	padding: 18px;
	background: #fafafa;
	border: 1px solid var(--wpay-border);
	border-radius: var(--wpay-radius-md);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
}

.wpay-card ul.woocommerce-order-overview li {
	font-size: 13px;
	color: var(--wpay-text-muted);
	margin: 0;
}

.wpay-card ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--wpay-text);
	font-weight: 600;
}

@media (max-width: 480px) {
	.wpay-card ul.woocommerce-order-overview {
		grid-template-columns: 1fr;
	}
}

.wpay-card .woocommerce-customer-details {
	margin-top: 8px;
	font-size: 13px;
}

.wpay-card .woocommerce-customer-details address {
	font-style: normal;
	border: 1px solid var(--wpay-border);
	border-radius: var(--wpay-radius-md);
	padding: 16px;
	color: var(--wpay-text-muted);
	line-height: 1.6;
}

/* =========================================================
   Utility
   ========================================================= */
.wpay-card .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}