/**
 * QCP Quick Checkout for WooCommerce — v1.1.10
 *
 * Button styles apply on product pages. Everything else is scoped under
 * body.qcp-quick-checkout-active, which is only present on the checkout
 * page when the customer arrived through Buy Now, so the normal cart
 * checkout and the Phlox Pro theme are untouched.
 */

/* ------------------------------------------------------------------ */
/* Buy Now button (product pages)                                      */
/* ------------------------------------------------------------------ */

/* Full-width bar under the Add to Cart row, Shopify-style.
   v1.1.7: the JS moves the button to directly after the
   quantity/Add to Cart row inside the form (after the whole form, as in
   v1.1.7, this theme renders it below wishlist/SKU/categories). The
   button also carries its critical layout inline, and the rules below
   use !important so theme button styles cannot shrink it back. The
   flex rules remain as a no-JS fallback. */
form.cart:has(.qcp-buy-now-button) {
	flex-wrap: wrap !important;
}

/* Same wrap for the variation row container, before the script moves
   the button out from inside it (v1.1.7). */
.woocommerce-variation-add-to-cart:has(> .qcp-buy-now-button) {
	flex-wrap: wrap !important;
}

.qcp-buy-now-button {
	position: relative;
	display: flex !important;
	flex: 0 0 100% !important;
	order: 99;
	clear: both;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 54px;
	box-sizing: border-box;
	margin: 12px 0 0 0 !important;
	padding: 16px 48px !important;
	border: 1px solid #111111;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.4;
	cursor: pointer;
	text-align: center;
	transition: opacity 0.15s ease-in-out;
}

.qcp-buy-now-button.qcp-loading {
	opacity: 0.7;
	cursor: wait;
}

.qcp-error {
	margin: 12px 0;
	padding: 10px 14px;
	border: 1px solid #f1c6c2;
	border-radius: 8px;
	background: #fef3f2;
	color: #b42318;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Quick checkout card (Buy Now flow only)                             */
/* ------------------------------------------------------------------ */

body.qcp-quick-checkout-active {
	background: #f6f6f7;
}

body.qcp-quick-checkout-active form.checkout.woocommerce-checkout {
	/* Full width of the theme container, centred — wide, but never
	   touching the screen edges (v1.1.7). */
	max-width: 1140px;
	margin: 28px auto;
	padding: 30px 30px 26px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
	box-sizing: border-box;
}

body.qcp-quick-checkout-active .qcp-checkout-heading h2 {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: #111111;
}

/* Single column at every width (v1.1.7): the theme's two-column
   checkout float (fields ~half the card, payment beside them) beat the
   plain rules, so the layout properties are enforced with !important.
   Full-width fields on desktop AND mobile — mobile is the priority. */
body.qcp-quick-checkout-active form.checkout.woocommerce-checkout {
	display: block !important;
}

body.qcp-quick-checkout-active .woocommerce-checkout .col2-set {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0;
}

/* Desktop layout (v1.1.10): the owner prefers the theme's own two-column
   desktop checkout \u2014 the Phlox Shop template wraps billing and order
   review in the Auxin float grid (.aux-de-col2 > .aux-col, 50% each), so
   the payment box fills the space beside the fields. v1.1.8/v1.1.9 stacked
   those columns full-width; that experiment is reverted by choice. Nothing
   here touches the Auxin columns: desktop keeps two columns, while tablet
   and mobile stack to one column via the theme's aux-tb-col1 / aux-mb-col1
   plus this plugin's mobile rules below. */

/* Hide the clutter that does not belong in the short form. */
body.qcp-quick-checkout-active .woocommerce-billing-fields > h3,
body.qcp-quick-checkout-active .woocommerce-shipping-fields,
body.qcp-quick-checkout-active .woocommerce-additional-fields,
body.qcp-quick-checkout-active #ship-to-different-address,
body.qcp-quick-checkout-active #order_review_heading,
body.qcp-quick-checkout-active .woocommerce-checkout-review-order-table,
body.qcp-quick-checkout-active .woocommerce-form-coupon-toggle,
body.qcp-quick-checkout-active form.checkout_coupon {
	display: none !important;
}

/* Labels above full-width inputs. */
body.qcp-quick-checkout-active .woocommerce form .form-row {
	margin: 0 0 14px;
	padding: 0;
}

body.qcp-quick-checkout-active .woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #111111;
}

body.qcp-quick-checkout-active .woocommerce form .form-row .required {
	color: #b42318;
	text-decoration: none;
}

body.qcp-quick-checkout-active .woocommerce form .form-row input.input-text,
body.qcp-quick-checkout-active .woocommerce form .form-row textarea,
body.qcp-quick-checkout-active .woocommerce form .form-row select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d7dbe0;
	border-radius: 9px;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.45;
	color: #111111;
}

body.qcp-quick-checkout-active .woocommerce form .form-row input.input-text:focus,
body.qcp-quick-checkout-active .woocommerce form .form-row textarea:focus,
body.qcp-quick-checkout-active .woocommerce form .form-row select:focus {
	border-color: #111111;
	outline: none;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

body.qcp-quick-checkout-active .woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: #b42318;
}

body.qcp-quick-checkout-active .woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Payment: Cash on Delivery only                                      */
/* ------------------------------------------------------------------ */

body.qcp-quick-checkout-active #payment {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 18px 18px;
}

body.qcp-quick-checkout-active #payment .qcp-payment-heading {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: #111111;
}

body.qcp-quick-checkout-active #payment ul.payment_methods {
	border-bottom: 1px solid #eef0f2;
	padding: 0 0 10px;
	margin: 0 0 6px;
	list-style: none;
}

body.qcp-quick-checkout-active #payment ul.payment_methods li {
	font-size: 15px;
}

body.qcp-quick-checkout-active #payment div.payment_box {
	background: #f8f9fa;
	border-radius: 8px;
	margin: 10px 0 4px;
	font-size: 14px;
}

body.qcp-quick-checkout-active #payment div.form-row {
	padding: 12px 0 0;
	margin: 0;
}

/* Place Order: full width, dark, rounded. */
body.qcp-quick-checkout-active #place_order {
	float: none;
	width: 100%;
	margin: 6px 0 0;
	padding: 15px 20px;
	background: #111111;
	border: 1px solid #111111;
	border-radius: 10px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

body.qcp-quick-checkout-active #place_order:hover,
body.qcp-quick-checkout-active #place_order:focus {
	background: #000000;
	color: #ffffff;
}

/* Notices inside the card. */
body.qcp-quick-checkout-active .woocommerce-error,
body.qcp-quick-checkout-active .woocommerce-message,
body.qcp-quick-checkout-active .woocommerce-info {
	border-radius: 9px;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Tablet / small laptop: keep clear side margins, never edge-to-edge. */
@media (max-width: 1199px) and (min-width: 641px) {
	body.qcp-quick-checkout-active form.checkout.woocommerce-checkout {
		margin: 22px 16px;
	}
}

/* Mobile first (v1.1.7) — most of this store's traffic is phones.
   Near-full-width card with small gutters, 16px inputs (stops iOS
   focus zoom), comfortable tap targets, single column throughout. */
@media (max-width: 640px) {
	/* Full-bleed card (v1.1.7): the theme's page container padding plus
	   the card's own margin/padding made the form look narrow on phones.
	   The card now breaks out to the full viewport width and keeps only
	   ~5px of inner side padding, so the fields run edge to edge. */
	body.qcp-quick-checkout-active {
		overflow-x: clip;
	}

	body.qcp-quick-checkout-active form.checkout.woocommerce-checkout {
		width: 100vw !important;
		max-width: 100vw !important;
		margin: 10px calc(50% - 50vw) 22px !important;
		padding: 18px 5px 16px;
		border-radius: 8px;
	}

	body.qcp-quick-checkout-active .qcp-checkout-heading h2 {
		font-size: 21px;
		margin-bottom: 16px;
	}

	body.qcp-quick-checkout-active .woocommerce form .form-row {
		margin-bottom: 12px;
	}

	body.qcp-quick-checkout-active .woocommerce form .form-row input.input-text,
	body.qcp-quick-checkout-active .woocommerce form .form-row textarea,
	body.qcp-quick-checkout-active .woocommerce form .form-row select {
		font-size: 16px;
		padding: 13px 14px;
	}

	body.qcp-quick-checkout-active #payment {
		padding: 14px 10px;
		border-radius: 10px;
	}

	body.qcp-quick-checkout-active #place_order {
		padding: 16px 14px;
		font-size: 17px;
	}
}