/* ==========================================================================
   Sukon Shop Pages — brand skin for WooCommerce's CART & CHECKOUT BLOCKS
   (not the classic shortcode pages). Loaded ONLY on /cart/ and /checkout/.
   This plugin is fully independent — it does not read or depend on any
   variables/files from the cart drawer plugin.

   Note: WooCommerce documents that most block-internal class names are
   "private" and can change between versions. The rules marked (documented)
   come from WooCommerce's own theming docs and are safe long-term. The
   rest are best-effort based on current block markup — if one doesn't
   visually apply after a WooCommerce update, that specific class changed
   upstream and needs to be re-checked via browser inspector.
   ========================================================================== */

:root {
	--sukon-shop-accent: #e0a638;
	--sukon-shop-accent-dark: #c78f2a;
	--sukon-shop-text: #1f2421;
	--sukon-shop-muted: #767b78;
	--sukon-shop-border: #ece7dd;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 1100px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 130px !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
	position: relative;
}

/* Safety net: prevent any text/element inside these pages from
   overflowing its container or touching the screen edge on mobile */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout * {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout {
		padding-top: 130px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.wp-block-woocommerce-cart::before,
	.wp-block-woocommerce-checkout::before {
		position: static !important;
		display: block !important;
		margin: 0 0 16px 0 !important;
		font-size: 22px !important;
	}

	.wp-block-woocommerce-cart [style*="display:flex"],
	.wp-block-woocommerce-cart [style*="display: flex"],
	.wp-block-woocommerce-checkout [style*="display:flex"],
	.wp-block-woocommerce-checkout [style*="display: flex"] {
		flex-wrap: wrap !important;
	}
}

/* Hide the theme's own page title on these two pages — it was creating
   an oversized blank gap above the form. We add a compact heading of
   our own directly above the content instead (see ::before below).
   Also catches the "Pay for order" page, which uses a plain <h1> in
   most themes rather than a distinct page-title class. */
body.woocommerce-cart .page-title,
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout h1 {
	display: none !important;
}

/* ---------------------------------------------------------------
   Airwallex "all payment methods" page — a custom page from the
   Airwallex plugin itself, not a normal WooCommerce endpoint, so it
   needs its own spacing/heading treatment using our own body class.
   --------------------------------------------------------------- */
body.sukon-page-payment h1,
body.sukon-page-payment .page-title,
body.sukon-page-payment .entry-title {
	display: none !important;
}

body.sukon-page-payment::before {
	display: none !important;
}

/* Heading removed per request — page just keeps whatever the theme
   renders by default (or nothing, if it renders nothing). Still needs
   some breathing room below the header so the payment box doesn't
   sit flush against it. */
body.sukon-page-payment [data-elementor-type="header"] + * {
	margin-top: 40px !important;
}

body.sukon-page-payment main {
	margin-top: 40px !important;
}

body.sukon-page-payment:not(:has(main)) #primary {
	margin-top: 40px !important;
}

body.sukon-page-payment:not(:has(main)):not(:has(#primary)) .content-area {
	margin-top: 40px !important;
}

@media (max-width: 768px) {
	body.sukon-page-payment [data-elementor-type="header"] + *,
	body.sukon-page-payment main,
	body.sukon-page-payment:not(:has(main)) #primary,
	body.sukon-page-payment:not(:has(main)):not(:has(#primary)) .content-area {
		margin-top: 24px !important;
	}
}

.wp-block-woocommerce-cart::before,
.wp-block-woocommerce-checkout::before {
	position: absolute;
	top: 70px;
	left: 0;
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--sukon-shop-text);
}

.wp-block-woocommerce-cart::before {
	content: "Your Cart";
}

.wp-block-woocommerce-checkout::before {
	content: "Checkout";
}

/* ---------------------------------------------------------------
   Buttons — documented, official hook (Proceed to Checkout,
   Place Order, Apply Coupon all use this same component class)
   --------------------------------------------------------------- */
.wc-block-components-button {
	background-color: var(--sukon-shop-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	border: none !important;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--sukon-shop-accent-dark) !important;
	color: #fff !important;
}

/* Secondary / outline style buttons (e.g. "Return to cart") */
.wc-block-components-button.is-link {
	background: transparent !important;
	color: var(--sukon-shop-text) !important;
	text-decoration: underline !important;
}

/* Mobile sticky "Proceed to Checkout" bar (documented) */
.wc-block-cart__submit-container {
	background-color: #fff !important;
}

/* Item quantity badge in the checkout order summary (documented) */
.wc-block-components-order-summary-item__quantity {
	background-color: var(--sukon-shop-accent) !important;
	border-color: #fff !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
   Cart & Checkout line items
   --------------------------------------------------------------- */
.wc-block-components-product-name {
	color: var(--sukon-shop-text) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wc-block-components-product-name:hover {
	color: var(--sukon-shop-accent-dark) !important;
}

.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata {
	color: var(--sukon-shop-muted) !important;
}

/* Quantity stepper (Blocks already includes +/- buttons — just re-skin) */
.wc-block-components-quantity-selector {
	border: 1px solid var(--sukon-shop-border) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__input {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ---------------------------------------------------------------
   Totals / order summary card
   --------------------------------------------------------------- */
.wc-block-components-totals-item {
	font-size: 14px;
}

.wc-block-components-totals-footer-item {
	font-size: 17px !important;
	font-weight: 700 !important;
}

.wc-block-components-totals-coupon-link {
	color: var(--sukon-shop-accent-dark) !important;
	text-decoration: underline !important;
}

/* ---------------------------------------------------------------
   Checkout steps (Contact information, Shipping address, etc.)
   Targeting the standard Gutenberg block-wrapper class that each
   checkout section block receives automatically (wp-block-{name}) —
   more reliable than internal component classes, which vary by
   WooCommerce version.
   --------------------------------------------------------------- */
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-order-note-block,
.wp-block-woocommerce-checkout-additional-information-block,
.wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid var(--sukon-shop-border);
	border-radius: 14px;
	padding: 22px 24px !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
	margin-bottom: 18px !important;
}

/* Hide any checkout section card that has no real form content inside
   it (WooCommerce sometimes keeps a wrapper in the DOM for a step
   that isn't active yet, which isn't literally :empty but has nothing
   for the shopper to see or use — checking for real form controls is
   more reliable than checking for zero child nodes) */
.wp-block-woocommerce-checkout-contact-information-block:not(:has(input, textarea, select, label)),
.wp-block-woocommerce-checkout-shipping-method-block:not(:has(input, textarea, select, label)),
.wp-block-woocommerce-checkout-shipping-address-block:not(:has(input, textarea, select, label)),
.wp-block-woocommerce-checkout-billing-address-block:not(:has(input, textarea, select, label)),
.wp-block-woocommerce-checkout-payment-block:not(:has(input, textarea, select, label, iframe)),
.wp-block-woocommerce-checkout-order-note-block:not(:has(input, textarea, select, label)),
.wp-block-woocommerce-checkout-additional-information-block:not(:has(input, textarea, select, label)),
.wc-block-components-checkout-step:not(:has(input, textarea, select, label)) {
	display: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wc-block-components-checkout-step__title {
	font-size: 16px !important;
	font-weight: 700 !important;
}

.wc-block-components-checkout-step__description {
	color: var(--sukon-shop-muted);
	font-size: 13px;
}

/* Text inputs — keep the floating-label positioning intact, just restyle border/radius */
.wc-block-components-text-input input,
.wc-block-components-address-form input {
	border-radius: 8px !important;
	border-color: var(--sukon-shop-border) !important;
	box-shadow: none !important;
}

.wc-block-components-text-input input:focus {
	border-color: var(--sukon-shop-accent) !important;
	box-shadow: 0 0 0 1px var(--sukon-shop-accent) !important;
}

/* Payment method options — highlight the selected card
   (padding intentionally left untouched — WooCommerce positions the
   radio circle relative to its own default padding, and overriding
   it here caused the circle to overlap the label text) */
.wc-block-components-radio-control__option {
	border: 1px solid var(--sukon-shop-border) !important;
	border-radius: 10px !important;
	margin-bottom: 10px !important;
}

.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--sukon-shop-accent) !important;
	background: #fdf7ec !important;
}

/* Order summary sidebar card */
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar {
	background: #fff;
	border: 1px solid var(--sukon-shop-border);
	border-radius: 14px;
}