/*
 * WooCommerce adaptations only. All visual styling lives in fastflowpe-ui.css, the shared FastFlowPe UI sheet
 * (copied unchanged from the Shopify plugin's docs/fastflowpe-ui.css). Do not restyle FastFlowPe components here.
 */

/* Checkout button rendered by PHP on the cart page / mini cart (the drawer's own button needs no extra rules). */
.fastflowpe-cart-checkout.fastflowpe-on-cart-page,
.fastflowpe-cart-checkout.fastflowpe-on-mini-cart { display: block; margin-top: 8px; }

/* Buy Now sits on its own row under the add-to-cart button, even inside flex-based product forms. */
.fastflowpe-buy-now-injected { flex-basis: 100%; }

/* Product listings: "Add to cart" and "Buy Now" side by side. */
.fastflowpe-loop-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 10px; width: 100%; }
.fastflowpe-loop-actions > a,
.fastflowpe-loop-actions > .button { flex: 1 1 0; min-width: 0; margin: 0 !important; float: none !important; text-align: center; }

/* Themes style bare <button> elements; keep the quantity stepper identical to the shared sheet. */
.fastflowpe-cart-quantity button { padding: 0; border-radius: 0; line-height: 1; }
.fastflowpe-cart-quantity button:disabled { opacity: .4; cursor: not-allowed; }

/* Small close control shown only while the hosted checkout is still loading (the hosted page has its own after that). */
.fastflowpe-close { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #3f5d6e; font-size: 22px; line-height: 1; cursor: pointer; }
.fastflowpe-checkout-modal.is-ready .fastflowpe-close { display: none; }

/* Page-level error toast (Shopify uses alert()). */
.fastflowpe-toast { pointer-events: none; position: fixed; right: 20px; bottom: 20px; z-index: 2147483646; max-width: 340px; padding: 12px 16px; border-radius: 8px; background: #13252f; color: #fff; font-size: 14px; box-shadow: 0 12px 32px rgba(8, 31, 43, .24); }

/* Hide the theme's own cart drawers while ours (or the checkout) is open - the Woo counterpart of the Shopify
   selectors in fastflowpe-ui.css. Extend through your theme's CSS if it uses a different mini-cart. */
body.fastflowpe-custom-cart-open .wc-block-mini-cart__drawer,
body.fastflowpe-custom-cart-open .wc-block-components-drawer__screen-overlay,
body.fastflowpe-checkout-open .wc-block-mini-cart__drawer,
body.fastflowpe-checkout-open .wc-block-components-drawer__screen-overlay { display: none !important; }

/*
 * ===== Theme isolation =====
 * Themes restyle bare <button>, headings, links and images globally, and the FastFlowPe cart/checkout UI must look
 * the same on every store. The visual properties themes usually override are therefore restated here with high
 * specificity (element ID / `html body`). Keep the values in sync with fastflowpe-ui.css.
 */
html body #fastflowpe-cart *,
html body #fastflowpe-checkout-backdrop * { box-sizing: border-box; }

/* Neutral baseline for every FastFlowPe button (themes add margins, shadows, uppercase, letter-spacing...). */
html body #fastflowpe-cart button,
html body #fastflowpe-checkout-backdrop button,
html body .fastflowpe-buy-now-injected button,
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button,
html body button.fastflowpe-cart-checkout {
	box-sizing: border-box; margin: 0; min-width: 0; max-width: none; float: none; text-transform: none; letter-spacing: normal;
	text-shadow: none; text-decoration: none; box-shadow: none; background-image: none; -webkit-appearance: none; appearance: none;
	font-family: inherit; font-style: normal;
}

/* Buy Now (product page) and Buy Now (listings, compact). */
html body .fastflowpe-buy-now-injected button.fastflowpe-buy-now-button,
html body .fastflowpe-buy-now-injected button.fastflowpe-buy-now-button:hover,
html body .fastflowpe-buy-now-injected button.fastflowpe-buy-now-button:focus {
	display: block; width: 100%; min-height: 52px; height: auto; padding: 12px 20px; border: 0; border-radius: 8px;
	background: #073f5b; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button,
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button:hover,
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button:focus {
	flex: 1 1 0; width: auto; min-height: 40px; height: auto; padding: 8px 12px; border: 0; border-radius: 8px;
	background: #073f5b; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; text-align: center;
}
html body .fastflowpe-buy-now-injected button.fastflowpe-buy-now-button:hover,
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button:hover { filter: brightness(.92); transform: none; }
html body .fastflowpe-buy-now-injected button.fastflowpe-buy-now-button:disabled,
html body .fastflowpe-loop-actions button.fastflowpe-buy-now-button:disabled { cursor: not-allowed; opacity: .55; }

/* "Checkout securely": drawer, cart page and mini cart. */
html body button.fastflowpe-cart-checkout,
html body button.fastflowpe-cart-checkout:focus {
	display: block; width: 100%; min-height: 54px; height: auto; padding: 12px 20px; border: 0; border-radius: 10px;
	background: #073f5b; color: #fff; font-size: 16px; font-weight: 750; line-height: 1.2; cursor: pointer; text-align: center;
}
html body button.fastflowpe-cart-checkout:hover { background: #052f44; color: #fff; transform: translateY(-1px); }
html body button.fastflowpe-cart-checkout:disabled { cursor: not-allowed; opacity: .55; transform: none; }
html body button.fastflowpe-cart-checkout.fastflowpe-on-cart-page,
html body button.fastflowpe-cart-checkout.fastflowpe-on-mini-cart { margin: 8px 0 0; }

/* Drawer controls. */
html body #fastflowpe-cart button.fastflowpe-cart-close,
html body #fastflowpe-cart button.fastflowpe-cart-close:hover { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 28px; font-weight: 400; line-height: 1; cursor: pointer; }
html body #fastflowpe-cart button.fastflowpe-cart-remove,
html body #fastflowpe-cart button.fastflowpe-cart-remove:hover { display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #6c7d85; font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer; }
html body #fastflowpe-cart button.fastflowpe-cart-close:hover,
html body #fastflowpe-cart button.fastflowpe-cart-remove:hover { background: #f1f6f8; }
html body #fastflowpe-cart .fastflowpe-cart-quantity button,
html body #fastflowpe-cart .fastflowpe-cart-quantity button:hover { height: 38px; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: #13252f; font-size: 20px; font-weight: 400; line-height: 1; cursor: pointer; }
html body #fastflowpe-cart .fastflowpe-cart-quantity button:hover { background: #eef7fa; }
html body #fastflowpe-cart button.fastflowpe-cart-continue,
html body #fastflowpe-cart button.fastflowpe-cart-continue:hover { min-height: 46px; height: auto; margin-top: 8px; padding: 10px 22px; border: 0; border-radius: 9px; background: #073f5b; color: #fff; font-size: 14px; font-weight: 750; line-height: 1.2; cursor: pointer; }
html body #fastflowpe-cart button.fastflowpe-cart-continue:hover { background: #052f44; }
html body #fastflowpe-cart button.fastflowpe-cart-undo,
html body #fastflowpe-cart button.fastflowpe-cart-undo:hover { min-height: 0; height: auto; padding: 4px; border: 0; background: transparent; color: #73d2f4; font-size: inherit; font-weight: 750; line-height: 1.2; cursor: pointer; }

/* Drawer text and images. */
html body #fastflowpe-cart .fastflowpe-cart-heading { margin: 0; padding: 0; border: 0; font-size: 28px; line-height: 1.2; font-weight: 750; letter-spacing: -.03em; text-transform: none; color: #13252f; }
html body #fastflowpe-cart a.fastflowpe-cart-title,
html body #fastflowpe-cart a.fastflowpe-cart-title:hover { color: #13252f; text-decoration: none; box-shadow: none; border: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
html body #fastflowpe-cart .fastflowpe-cart-variant { margin: 3px 0 0; font-size: 13px; }
html body #fastflowpe-cart .fastflowpe-cart-note { margin: 0 0 18px; font-size: 12px; line-height: 1.45; }
html body #fastflowpe-cart .fastflowpe-cart-error { margin: 0 0 12px; font-size: 13px; }
html body #fastflowpe-cart img.fastflowpe-cart-image { width: 92px; height: 92px; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 12px; box-shadow: none; object-fit: cover; float: none; }
html body .fastflowpe-cart-powered img { display: block; width: auto; height: 18px; max-width: 104px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 560px) { html body #fastflowpe-cart img.fastflowpe-cart-image { width: 76px; height: 76px; } html body #fastflowpe-cart .fastflowpe-cart-heading { font-size: 24px; } }

/* Checkout modal, status card and confirm dialog. */
html body #fastflowpe-checkout-backdrop button.fastflowpe-close,
html body #fastflowpe-checkout-backdrop button.fastflowpe-close:hover { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #3f5d6e; font-size: 22px; font-weight: 400; line-height: 1; cursor: pointer; }
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm-actions button { min-height: 40px; height: auto; padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 400; line-height: 1.2; cursor: pointer; }
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm-actions button.fastflowpe-keep,
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm-actions button.fastflowpe-keep:hover { border: 1px solid #8a8a8a; background: #fff; color: #111; }
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm-actions button.fastflowpe-confirm-close,
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm-actions button.fastflowpe-confirm-close:hover { border: 1px solid #111; background: #111; color: #fff; }
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm h3 { margin: 0 0 8px; padding: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: normal; text-transform: none; color: #111; }
html body #fastflowpe-checkout-backdrop .fastflowpe-confirm p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #5f5f5f; }
html body .fastflowpe-status h3 { margin: 0 0 4px; padding: 0; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: normal; text-transform: none; color: #111; }
html body .fastflowpe-status p { margin: 0; font-size: 14px; line-height: 1.45; color: #5f5f5f; }