/* GradeZup checkout tightening (GZH_Checkout).
 *
 * Scoped to .woocommerce-checkout throughout so none of this leaks onto the cart, the account
 * pages or anywhere else WooCommerce reuses the same classes.
 */

/* --- 1. The empty Stripe express panel -------------------------------------------------
 * Set by checkout.js only when the panel has rendered no iframe and no button. Hiding the
 * container also removes its "OR" divider, which lives inside it — otherwise you get a
 * stranded "OR" separating nothing from the billing form. */
.woocommerce-checkout .gzh-express-empty {
	display: none !important;
}

/* --- 2. Billing summary for signed-in members ------------------------------------------ */
.woocommerce-checkout .gzh-billing-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #f6f7f8;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}

.woocommerce-checkout .gzh-billing-summary__line {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	/* Long addresses shouldn't push the Edit button off the row. */
	overflow-wrap: anywhere;
}

.woocommerce-checkout .gzh-billing-summary__label {
	color: #5f6368;
}

.woocommerce-checkout .gzh-billing-summary__label::after {
	content: ":";
}

.woocommerce-checkout .gzh-billing-summary__name {
	font-weight: 600;
}

.woocommerce-checkout .gzh-billing-summary__sep {
	margin: 0 2px;
	color: #9aa0a6;
}

.woocommerce-checkout .gzh-billing-summary__edit {
	flex: 0 0 auto;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid #c7cacd;
	border-radius: 4px;
	color: #1f1f1f;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.woocommerce-checkout .gzh-billing-summary__edit:hover,
.woocommerce-checkout .gzh-billing-summary__edit:focus {
	background: #eceef0;
}

.woocommerce-checkout .gzh-billing-summary__edit:focus-visible {
	outline: 2px solid #0b57d0;
	outline-offset: 2px;
}

/* Collapsed, not removed: the inputs keep their values and keep posting. Using display:none
   rather than height/opacity so the fields are also out of the tab order while hidden. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper.gzh-billing-collapsed {
	display: none;
}

/* --- 3. Compact the login / coupon bars -------------------------------------------------
 * Two stacked 56px full-width panels sat above everything. Slimmed rather than restructured:
 * moving them in the DOM risks breaking WooCommerce's own toggle handlers, and the padding is
 * where nearly all the height was. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 8px;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 8px 12px 8px 36px;
	font-size: 13px;
	line-height: 1.4;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	top: 8px;
	font-size: 14px;
}

/* On desktop the two bars sit side by side, halving the vertical cost again. They're
   siblings, so this only works where the parent can be a grid — guarded to wide screens
   where there's room for two readable columns. */
@media (min-width: 900px) {
	.woocommerce-checkout .woocommerce-form-login-toggle,
	.woocommerce-checkout .woocommerce-form-coupon-toggle {
		display: inline-block;
		width: calc(50% - 6px);
		vertical-align: top;
	}

	.woocommerce-checkout .woocommerce-form-coupon-toggle {
		margin-left: 8px;
	}
}

/* --- 4. General tightening -------------------------------------------------------------- */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	margin-bottom: 14px;
	font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .gzh-billing-summary__edit {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   "Continue with Google" above the checkout login form.

   Prevention for the access problem: papers unlock for the account that bought
   them, so one person holding two identities is the failure we actually see.
   Signing in with a durable identity before paying stops the second one existing.

   Guests only -- GZH_Checkout::google_signin() renders nothing once signed in.
   --------------------------------------------------------------------------- */
.gzh-checkout-google {
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid #d8e2dc;
	border-radius: 10px;
	background: #fbfdfc;
	text-align: center;
}

.gzh-checkout-google__lead {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.45;
	color: #39524a;
}

/* The button is the social-login plugin's own markup; only the spacing is ours, so its
   styling stays in one place and this does not fight it. */
.gzh-checkout-google .gz-social-btn {
	display: inline-flex;
	max-width: 100%;
}

@media (max-width: 480px) {
	.gzh-checkout-google {
		padding: 14px 14px;
	}
	.gzh-checkout-google .gz-social-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Billing email differs from the account email. Not an error -- the purchase unlocks for this
   account regardless -- but it is where the duplicate-identity problem starts, because the
   receipt goes somewhere the account does not own. */
.gzh-billing-mismatch {
	margin: -4px 0 18px;
	padding: 10px 14px;
	border-left: 3px solid #e0a800;
	background: #fffaf0;
	border-radius: 0 6px 6px 0;
	font-size: 14px;
	line-height: 1.45;
	color: #5c4813;
}

.gzh-billing-mismatch strong {
	font-weight: 600;
	word-break: break-word;
}

/* ===== sticky "next step" bar (cart + checkout) =====
   The one button that decides a sale starts four or five screens below the fold on a phone, so it
   follows the buyer. Shown only while the real button is off screen, so no view ever offers the
   same action twice. */
.gzh-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;            /* under .gza-chat (9998), which is nudged up rather than covered */
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--gzh-line, #e4e6ea);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
	transform: translateY(110%);   /* 110% so the shadow clears too */
	transition: transform .22s cubic-bezier(.23, 1, .32, 1);
}
.gzh-sticky-cta.is-on { transform: translateY(0); }

.gzh-sticky-cta__total {
	font-weight: 700;
	font-size: 1rem;
	color: var(--gzh-ink, #1c1d1f);
	white-space: nowrap;
}
.gzh-sticky-cta__total:empty { display: none; }   /* no total found: just the button, never a blank */

.gzh-sticky-cta__btn {
	flex: 1;
	min-height: 48px;         /* a comfortable tap target */
	border: 0;
	border-radius: 10px;
	background: var(--gzh-accent, #2eb969);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}
.gzh-sticky-cta__btn:hover { background: var(--gzh-accent-d, #229151); }

/* Make room rather than cover. The page gets padding so its last row can still be scrolled clear,
   and the two things already pinned to the bottom-right move up.

   .gza-chat belongs to gradezup-assistant, so this is a cross-plugin selector: if that class is
   ever renamed the nudge silently stops and the bar lands on the support button - which is 175px
   wide and 12px off the bottom at phone width, so the overlap would be total. */
body.gzh-has-sticky-cta { padding-bottom: 76px; }
body.gzh-has-sticky-cta .gza-chat,
body.gzh-has-sticky-cta .ast-scroll-top-icon { transform: translateY(-72px); }

@media (prefers-reduced-motion: reduce) {
	.gzh-sticky-cta { transition: none; }
	body.gzh-has-sticky-cta .gza-chat,
	body.gzh-has-sticky-cta .ast-scroll-top-icon { transition: none; }
}

/* ===== the payment choice =====
   Measured on live at 380x630: this list was 600px tall in a 630px viewport, so picking how to pay
   filled the screen. Three logo treatments at three weights (one 155x22 card sprite, four separate
   33x21 Pesapal marks, two wallet buttons), nothing separating one choice from the next, and a
   432px card form pressing the rest into a 51-59px strip below it.

   Each method becomes a card, every logo gets the same weight, and the wallets sit under their own
   divider so they read as a different KIND of choice rather than two more radios. */
.wc_payment_methods { list-style: none; margin: 0; padding: 0; }

.wc_payment_methods li.wc_payment_method {
	margin: 0 0 10px;
	border: 1px solid var(--gzh-line, #e4e6ea);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease;
}

/* The whole card is the target, not the 13px radio. */
.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	cursor: pointer;
	font-weight: 600;
}
.wc_payment_methods li.wc_payment_method > input[type="radio"] { margin: 0 0 0 12px; }

/* Logos: one height, one line, pushed to the right of the name. Collapses Pesapal's four marks and
   the card sprite to the same visual weight. */
.wc_payment_methods li.wc_payment_method > label img {
	max-height: 20px;
	width: auto;
	margin: 0 0 0 auto;      /* first image takes the slack, the rest sit beside it */
	padding: 0;
	float: none;             /* WooCommerce floats these by default */
}
.wc_payment_methods li.wc_payment_method > label img ~ img { margin-left: 4px; }

/* The chosen method. Class comes from checkout.js rather than :has(), so it works everywhere. */
.wc_payment_methods li.wc_payment_method.gzh-is-selected {
	border-color: var(--gzh-accent, #2eb969);
	background: rgba(46, 185, 105, .04);
}

/* The open form belongs INSIDE its method, not loose between rows. */
.wc_payment_methods li.wc_payment_method .payment_box {
	margin: 0;
	padding: 12px;
	background: #f7f8f9;
	border-top: 1px solid var(--gzh-line, #e4e6ea);
	border-radius: 0;
}
.wc_payment_methods li.wc_payment_method .payment_box::before { display: none; }  /* Woo's arrow */

/* ---- "Or pay instantly" above the wallets ----
   A pseudo-element, not injected markup: WooCommerce rebuilds this list on every AJAX refresh, so
   anything inserted would have to be re-added each time and would flicker.

   Both wallets carry the rule, and the sibling line below removes it from the second when they are
   adjacent - so when Google Pay is unavailable (not Chrome) Apple Pay shows the divider instead of
   the list losing it. */
li.payment_method_stripe_googlepay::before,
li.payment_method_stripe_applepay::before {
	content: "Or pay instantly";
	display: block;
	margin: 18px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--gzh-line, #e4e6ea);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gzh-muted, #6a6f73);
}
li.payment_method_stripe_googlepay + li.payment_method_stripe_applepay::before { display: none; }