/**
 * Simple Store checkout widget — structural CSS only.
 *
 * This renders inside an arbitrary client site's themed page (not
 * SimpleSuite's own admin chrome), so no colors/fonts/border-radius are
 * asserted here as if inheriting `--ss-*` or `--shell-*` tokens — that would
 * be a guess, not a fact, without runtime proof those tokens exist on the
 * host theme. Only layout/spacing/visibility that the widget needs to
 * function is set; the button inherits the surrounding theme's native
 * button appearance.
 *
 * @package SimpleStore
 */

[hidden] {
	display: none;
}

.ssstore-checkout-widget {
	display: block;
	max-width: 100%;
}

.ssstore-checkout-drawer {
	/* Centered, not left-flush: this div's only width rule is the max-width
	 * cap below, so on any parent wider than 500px (ss-launch's g-checkout
	 * step 2 is ~1000px+ on desktop) an unmargined block element sits flush
	 * against the left edge, leaving a large, lopsided empty gap on the
	 * right where Stripe's embedded-checkout iframe never reaches. Auto
	 * side margins center it in whatever column it's given instead --
	 * correct whether that column is 500px or 1000px wide, and harmless at
	 * mobile widths where max-width already clamps to 100%.
	 */
	margin: 1em auto 0;
	max-width: 500px;
}

.ssstore-checkout-error {
	margin-top: 0.5em;
	color: #c0392b;
}

/*
 * STORE-0010/0011: discount-code field.
 *
 * v0.12.2's first pass here kept this file's usual "never assert a host
 * color/font/radius, only guess-proof structural CSS" rule -- but Glenn
 * flagged it as looking generically bolted-on next to the site's own
 * polished CTA, and this widget only ever renders on ONE real site
 * (staging.dodgensecurity.com) today, not a portfolio of unknown themes. So
 * this block breaks that rule deliberately, on PROVEN runtime evidence, not
 * a guess: pulled via getComputedStyle() against the live page's own
 * "Bookings"/"Continue to payment" CTA on 2026-09-22 -- accent #416E95
 * (also the literal color Dodgen's own About-page block markup uses for
 * its "know" span), Raleway font stack, font-weight 600, 0px border-radius
 * (squared -- matches the suite-wide zero-radius convention too), 14px,
 * 11px/18px padding. If this widget ever ships on a second site, these
 * values should be re-verified against THAT site rather than assumed
 * portable -- they are Dodgen-specific facts, not a generic default.
 */
.ssstore-checkout-discount {
	margin-bottom: 1em;
	font-family: Raleway, -apple-system, "system-ui", "Segoe UI", Arial, sans-serif;
}

.ssstore-checkout-discount-toggle {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	color: #416E95;
}

.ssstore-checkout-discount-toggle:hover {
	color: #325572;
}

.ssstore-checkout-discount-panel {
	margin-top: 0.6em;
	padding: 1em;
	border: 1px solid rgba( 65, 110, 149, 0.25 );
	background: rgba( 65, 110, 149, 0.04 );
}

.ssstore-checkout-discount-label {
	display: block;
	margin-bottom: 0.4em;
	font-size: 14px;
	font-weight: 600;
	color: #111;
}

.ssstore-checkout-discount-row {
	display: flex;
	gap: 0.5em;
	align-items: stretch;
}

.ssstore-checkout-discount-input {
	width: 100%;
	max-width: 240px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	padding: 0 12px;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 0;
}

.ssstore-checkout-discount-apply {
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background-color: #416E95;
	border: 0;
	border-radius: 0;
	padding: 11px 18px;
	cursor: pointer;
}

.ssstore-checkout-discount-apply:hover {
	background-color: #325572;
}

/*
 * Disabled-at-cap visual state for ss-launch's g-checkout stepper controls
 * (`.ssla-g-checkout-step` — sibling plugin's markup, see checkout.js's
 * wireStepper()/updateStepState()). Those render as `<span>` elements, not
 * native `<button>`, so a browser applies no default disabled look; JS
 * toggles the plain `disabled` attribute at the qty min/max bound, and this
 * is the minimal, non-color opacity/cursor treatment for it — no different
 * in kind from ss-launch's own `.ssla-g-checkout-*` CSS already reaching
 * into this plugin's `.ssstore-checkout-button` for presentation, just the
 * mirror direction.
 */
.ssla-g-checkout-step[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}