/**
 * Arqam Woo Pricing — Cart & Checkout skin.
 *
 * Re-skins WooCommerce's block-based cart/checkout to match the theme.
 * All colours/shadows/radius reuse the theme's CSS custom properties
 * (defined on :root in style.min.css), so this stays in sync with the brand.
 *
 * Scoped to WooCommerce body classes so nothing else on the site is affected.
 */

/* ------------------------------------------------------------------ *
 * 1. Layout: widen the narrow page container and neutralise `.prose`
 * ------------------------------------------------------------------ */
body.woocommerce-checkout .container-x.max-w-3xl,
body.woocommerce-cart .container-x.max-w-3xl,
body.woocommerce-page .container-x.max-w-3xl {
	max-width: 76rem;
}

/* Strip typography-plugin (`prose`) side effects inside the Woo blocks. */
body.woocommerce-checkout .prose :where(h1, h2, h3, h4, p, ul, ol, li, address),
body.woocommerce-cart .prose :where(h1, h2, h3, h4, p, ul, ol, li, address) {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	list-style: none;
}

body.woocommerce-checkout .prose,
body.woocommerce-cart .prose {
	color: hsl(var(--foreground));
}

/* ------------------------------------------------------------------ *
 * 2. Section / step titles
 * ------------------------------------------------------------------ */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
	color: hsl(var(--foreground)) !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em;
	font-size: 1.25rem !important;
}

.wc-block-components-checkout-step__description,
.wc-block-components-address-card address {
	color: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------------------ *
 * 3. Step cards — give each block a themed surface
 * ------------------------------------------------------------------ */
.wc-block-checkout__main .wc-block-components-checkout-step {
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border));
	border-radius: 1rem;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-card);
}

.wc-block-checkout__main .wc-block-components-checkout-step::before {
	display: none; /* remove the default number bar */
}

/* ------------------------------------------------------------------ *
 * 4. Inputs, selects & textareas
 * ------------------------------------------------------------------ */
.woocommerce .wc-block-components-text-input input,
.woocommerce .wc-block-components-text-input textarea,
.woocommerce .wc-blocks-components-select__select,
.woocommerce .wc-block-components-textarea,
.woocommerce input.wc-block-components-text-input__input {
	border: 1px solid hsl(var(--input)) !important;
	border-radius: 0.75rem !important;
	background: hsl(var(--background)) !important;
	color: hsl(var(--foreground)) !important;
	padding: 1.4em 1em 0.5em !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .wc-block-components-text-input input:focus,
.woocommerce .wc-block-components-text-input textarea:focus,
.woocommerce .wc-blocks-components-select__select:focus {
	border-color: hsl(var(--ring)) !important;
	box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18) !important;
	outline: none !important;
}

.woocommerce .wc-block-components-text-input label,
.woocommerce .wc-blocks-components-select__label {
	color: hsl(var(--muted-foreground)) !important;
}

.woocommerce .wc-block-components-text-input.is-active label,
.woocommerce .wc-block-components-text-input input:focus + label {
	color: hsl(var(--primary)) !important;
}

/* Custom select chevron colour */
.wc-blocks-components-select__expand {
	fill: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------------------ *
 * 5. Checkboxes / links / "add note" toggles
 * ------------------------------------------------------------------ */
.woocommerce .wc-block-components-checkbox__input:checked {
	background: hsl(var(--primary)) !important;
	border-color: hsl(var(--primary)) !important;
}

.woocommerce .wc-block-components-address-form__address_2-toggle,
.woocommerce .wc-block-components-checkout-step__content a,
.woocommerce .wc-block-checkout__terms a {
	color: hsl(var(--primary));
	font-weight: 600;
}

.woocommerce .wc-block-components-address-card__edit {
	color: hsl(var(--primary)) !important;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 6. Order summary sidebar → themed card
 * ------------------------------------------------------------------ */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-cart-order-summary-block {
	background: hsl(var(--card)) !important;
	border: 1px solid hsl(var(--border));
	border-radius: 1rem;
	padding: 1.5rem 1.5rem 0.5rem;
	box-shadow: var(--shadow-card);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: hsl(var(--foreground));
	font-weight: 600;
}

.wc-block-components-product-metadata__description p {
	color: hsl(var(--muted-foreground)) !important;
}

/* Prices */
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value {
	color: hsl(var(--foreground));
}

.wc-block-components-product-price__regular,
del.wc-block-components-product-price__regular {
	color: hsl(var(--muted-foreground) / 0.8);
}

.wc-block-components-product-price__value.is-discounted,
ins.wc-block-components-product-price__value {
	color: hsl(var(--primary));
	text-decoration: none;
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}

.wc-block-components-totals-item {
	color: hsl(var(--foreground));
}

/* Quantity bubble on line items */
.wc-block-components-order-summary-item__quantity span[aria-hidden="true"] {
	background: hsl(var(--primary)) !important;
	color: hsl(var(--primary-foreground)) !important;
	border-color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------ *
 * 7. Sale badge & coupon panel
 * ------------------------------------------------------------------ */
.wc-block-components-sale-badge {
	background: hsl(var(--primary) / 0.12) !important;
	color: hsl(var(--primary)) !important;
	border-radius: 9999px;
	font-weight: 600;
}

.wc-block-components-panel__button {
	color: hsl(var(--primary)) !important;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 8. Buttons — Place Order / Proceed use the brand gradient
 * ------------------------------------------------------------------ */
.woocommerce .wc-block-components-checkout-place-order-button,
.woocommerce .wc-block-cart__submit-button,
.woocommerce .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.woocommerce a.checkout-button,
.woocommerce button.wc-block-components-button.contained {
	background: var(--gradient-primary) !important;
	color: hsl(var(--primary-foreground)) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 0.95rem 2rem !important;
	font-weight: 600 !important;
	box-shadow: var(--shadow-soft) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce .wc-block-components-checkout-place-order-button:hover,
.woocommerce .wc-block-cart__submit-button:hover,
.woocommerce button.wc-block-components-button.contained:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-glow) !important;
}

/* Secondary / outlined buttons */
.woocommerce button.wc-block-components-button.outlined {
	border: 1px solid hsl(var(--border)) !important;
	color: hsl(var(--foreground)) !important;
	border-radius: 9999px !important;
	background: transparent !important;
}

/* ------------------------------------------------------------------ *
 * 9. Notice banners
 * ------------------------------------------------------------------ */
.wc-block-components-notice-banner {
	border-radius: 0.75rem !important;
}

.wc-block-components-notice-banner.is-error {
	background: hsl(0 84% 60% / 0.08) !important;
	border-color: hsl(0 84% 60% / 0.35) !important;
}

.wc-block-components-notice-banner.is-info {
	background: hsl(var(--primary) / 0.08) !important;
	border-color: hsl(var(--primary) / 0.3) !important;
}