/* SWS Secure Checkout - the payment page. See sws-checkout.php
 * The look of the license renewal page: a grey bar with the logo and RETURN, ONE white card in a 720 px column (rust title, ink section
 * headings, rounded boxes), a green box for the discount with a round % sign, and a blue pill button with the logo in a white disc.
 * Every rule starts with body.sws-co, so nothing else on the site is touched. The theme (Divi), WooCommerce, Dashboard Pro and the site's own
 * custom CSS style these elements with IDs and !important (one rule hides the whole "place order" row, another forces the page column to 80%,
 * another turns the order table into stacked blocks on phones), so where they insist this file answers in kind. */

body.sws-co {
	--sws-ink: #2B1A14;
	--sws-brown: #5B3A30;
	--sws-rust: #8B3423;
	--sws-line: #E4DDD8;
	--sws-opt: #DDD3CD;
	--sws-hair: #EFE9E5;
	--sws-field: #CFC6C0;
	--sws-band: #E2DEDE;
	--sws-blue: #1F6FB8;
	--sws-blue-dark: #175A98;
	--sws-return: #1A5E9A; /* 0.9.1 accessibility (2026-10-23): was #3366FF, 3.51:1 on --sws-band; now 5.06:1 (6.75:1 on white) */
	--sws-tint: #F6F3F1;
	--sws-green: #2E7D4F;
	--sws-green-dark: #1E4D31;
	--sws-green-bg: #E6F4EA;
	--sws-green-line: #5DAA78;
	--sws-red: #B3261E;
}

/* ---- the page frame (Divi) ---- */
body.sws-co #main-header,
body.sws-co #top-header {
	display: none !important; /* the bar below replaces the site header, as on the renewal page */
}

body.sws-co #main-content > .container {
	width: 92% !important; /* the site's custom CSS forces this container to 80% with !important */
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 0 0 56px !important;
}

body.sws-co #main-content .container:before {
	display: none !important;
}

body.sws-co #left-area {
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
}

body.sws-co #sidebar,
body.sws-co .entry-title,
body.sws-co .et_post_meta_wrapper {
	display: none !important;
}

body.sws-co .entry-content {
	color: var(--sws-ink);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

body.sws-co .entry-content *,
body.sws-co .entry-content *:before,
body.sws-co .entry-content *:after {
	box-sizing: border-box;
}

/* the bar: the full width of the window in the header grey; the logo and RETURN sit on the edges of the 720 px column below it */
body.sws-co .sws-co__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 calc(50% - 50vw) 34px;
	padding: 22px calc(50vw - 50%);
	background: var(--sws-band);
}

body.sws-co .sws-co__bar a {
	text-decoration: none !important;
	box-shadow: none !important;
}

body.sws-co .sws-co__home {
	display: flex;
	align-items: center;
	color: var(--sws-ink) !important;
	font-weight: 700;
}

body.sws-co .sws-co__home img {
	display: block;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
}

body.sws-co .sws-co__return {
	color: var(--sws-return) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.sws-co .sws-co__return:hover,
body.sws-co .sws-co__return:focus {
	text-decoration: underline !important;
}

/* ---- the card ---- */
body.sws-co .sws-co__panel {
	margin: 0 0 24px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--sws-line);
	border-radius: 14px;
}

body.sws-co .entry-content h1.sws-co__heading {
	margin: 0 0 20px !important;
	padding: 0 !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sws-rust) !important;
}

/* the parts of the card (order / notice / details / payment) */
body.sws-co .sws-co__card {
	margin: 26px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.sws-co .sws-co__heading + .sws-co__card {
	margin-top: 0;
}

body.sws-co .sws-co__title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sws-ink);
}

/* the notice under the order (early-access price, 30-day term, refund promise): the grey "outcome" box of the renewal page */
body.sws-co .sws-co__card.sws-co__card--notice {
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--sws-tint);
	border-radius: 10px;
	color: var(--sws-brown);
	font-size: 14px;
	line-height: 1.5;
}

body.sws-co .sws-co__card--notice p {
	margin: 0 0 10px;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

body.sws-co .sws-co__card--notice p:last-child {
	margin-bottom: 0;
}

body.sws-co .sws-co__card--notice strong {
	color: var(--sws-ink);
}

body.sws-co .sws-co__card--notice a {
	color: var(--sws-blue) !important;
	text-decoration: underline !important;
}

body.sws-co .sws-co__card--notice img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 10px;
	border-radius: 10px;
}

/* ---- WooCommerce's messages above the card: coupon link, the login link, errors ---- */
body.sws-co #awdr_checkout_promotion_messages,
body.sws-co #awdr_checkout_subtotal_promotion_messages {
	display: none !important; /* "Discount ... has been applied": the green discount box in the order shows it */
}

body.sws-co .woocommerce-error,
body.sws-co .woocommerce-message,
body.sws-co .woocommerce-info {
	margin: 0 0 14px !important;
	padding: 12px 16px !important;
	list-style: none !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	box-shadow: none !important;
}

body.sws-co .woocommerce-error:before,
body.sws-co .woocommerce-message:before,
body.sws-co .woocommerce-info:before {
	display: none !important;
}

body.sws-co .woocommerce-error {
	background: #FDECEA !important;
	border: 1px solid #E8A29D !important;
	color: #7A1712 !important;
}

body.sws-co .woocommerce-message {
	background: var(--sws-green-bg) !important;
	border: 1px solid var(--sws-green-line) !important;
	color: var(--sws-green-dark) !important;
}

body.sws-co .woocommerce-info {
	background: var(--sws-tint) !important;
	border: 1px solid var(--sws-line) !important;
	color: var(--sws-brown) !important;
}

body.sws-co .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sws-co .woocommerce-error a,
body.sws-co .woocommerce-message a,
body.sws-co .woocommerce-info a {
	color: var(--sws-blue) !important;
	font-weight: 700;
	text-decoration: underline !important;
}

/* "Have a coupon? Click here" / "Returning customer?": a quiet line, not a banner */
body.sws-co .woocommerce-form-coupon-toggle .woocommerce-info,
body.sws-co .woocommerce-form-login-toggle .woocommerce-info {
	margin: 0 0 12px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--sws-brown) !important;
	font-size: 14px !important;
	text-align: center;
}

body.sws-co form.woocommerce-form-login,
body.sws-co form.checkout_coupon {
	margin: 0 0 16px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--sws-line);
	border-radius: 12px;
}

body.sws-co form.checkout_coupon .form-row-first,
body.sws-co form.checkout_coupon .form-row-last {
	float: none;
	display: inline-block;
	width: auto;
	margin: 0 8px 0 0;
	vertical-align: middle;
}

body.sws-co form.checkout_coupon button.button {
	padding: 12px 18px !important;
	border: 2px solid var(--sws-blue) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--sws-blue) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* WooCommerce's inline "... is a required field" under a box */
body.sws-co .checkout-inline-error-message {
	margin: 4px 0 0;
	color: #7A1712;
	font-size: 13px;
	font-weight: 600;
}

/* ---- the order ----
 * The rows are flex boxes, not table rows: a bordered box for the product, a green box for the discount, a total line. Dashboard Pro's storefront
 * CSS and the theme turn this table into stacked blocks on phones with !important; these rules answer in kind. */
body.sws-co #order_review {
	margin: 0;
	padding: 0;
}

body.sws-co table.woocommerce-checkout-review-order-table,
body.sws-co .woocommerce-checkout-review-order-table tbody,
body.sws-co .woocommerce-checkout-review-order-table tfoot {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

body.sws-co .woocommerce-checkout-review-order-table thead {
	display: none !important;
}

body.sws-co .woocommerce-checkout-review-order-table tr {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: auto !important;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.sws-co .woocommerce-checkout-review-order-table th,
body.sws-co .woocommerce-checkout-review-order-table td {
	display: block !important;
	width: auto !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--sws-ink);
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
}

/* the product: a rounded box with the name (and what it carries) on the left, the price on the right */
body.sws-co .woocommerce-checkout-review-order-table tbody tr.cart_item {
	display: flex !important; /* more specific than the theme's / Dashboard Pro's "display:block!important" for this row */
	width: auto !important;
	align-items: flex-start;
	margin: 0 0 12px;
	padding: 14px 16px !important;
	border: 1px solid var(--sws-opt) !important;
	border-radius: 12px;
}

body.sws-co .woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-name {
	display: block !important;
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	text-align: left !important;
}

body.sws-co .woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-total {
	display: block !important;
	width: auto !important;
	flex: 0 0 auto;
	font-weight: 700;
	text-align: right !important;
	white-space: nowrap; /* "$49.95" must never break */
}

body.sws-co .woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 600;
	color: var(--sws-brown);
}

/* what the product carries (main license, seats, pricing): a small two-column list */
body.sws-co .woocommerce-checkout-review-order-table dl.variation {
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr) !important;
	gap: 2px 12px !important;
	margin: 6px 0 0 !important;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sws-brown);
}

body.sws-co .woocommerce-checkout-review-order-table dl.variation dt,
body.sws-co .woocommerce-checkout-review-order-table dl.variation dt:not(:first-child) {
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 600;
}

body.sws-co .woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.sws-co .woocommerce-checkout-review-order-table dl.variation dd p {
	display: inline;
	margin: 0 !important;
	padding: 0;
}

/* subtotal */
body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
	padding: 0 2px;
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
	font-size: 15px;
	font-weight: 600;
	color: var(--sws-brown);
}

/* the discount: the green box of the renewal page, with its round % sign */
body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount {
	align-items: center;
	gap: 14px;
	margin: 10px 0 4px;
	padding: 14px 18px !important;
	background: var(--sws-green-bg);
	border: 1px solid var(--sws-green-line);
	border-radius: 12px;
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount:before {
	content: "%";
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sws-green);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 38px;
	text-align: center;
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount th {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sws-green-dark);
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount td {
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 800;
	color: var(--sws-green-dark);
	white-space: nowrap; /* "-$56.25" must never break after the minus */
}

/* the total */
body.sws-co .woocommerce-checkout-review-order-table tfoot tr.order-total {
	align-items: baseline;
	margin-top: 16px;
	padding: 16px 2px 0 !important;
	border-top: 2px solid var(--sws-line) !important;
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-size: 20px;
	font-weight: 800;
	color: var(--sws-ink);
}

body.sws-co .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 24px;
	font-weight: 800;
	color: var(--sws-ink);
	white-space: nowrap;
}

/* ---- your details ---- */
body.sws-co .woocommerce-billing-fields > h3 {
	display: none;
}

body.sws-co .woocommerce-billing-fields__field-wrapper:after {
	content: "";
	display: table;
	clear: both;
}

body.sws-co .form-row {
	margin: 0 0 14px;
	padding: 0;
}

body.sws-co .form-row label {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sws-brown);
}

body.sws-co .form-row label .required {
	color: var(--sws-red);
	text-decoration: none;
}

body.sws-co .form-row .optional {
	font-weight: 400;
}

body.sws-co .form-row .woocommerce-input-wrapper {
	display: block;
}

body.sws-co .form-row input.input-text,
body.sws-co .form-row textarea,
body.sws-co .form-row select {
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 12px 14px !important;
	border: 1px solid var(--sws-field) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--sws-ink) !important;
	font-size: 16px; /* 16px keeps iPhones from zooming into the field */
	line-height: 1.3;
	box-shadow: none !important;
}

body.sws-co .form-row input.input-text:focus,
body.sws-co .form-row textarea:focus,
body.sws-co .form-row select:focus {
	border-color: var(--sws-blue) !important;
	outline: 2px solid rgba(31, 111, 184, 0.25);
	outline-offset: 0;
}

body.sws-co .form-row.woocommerce-invalid input.input-text {
	border-color: var(--sws-red) !important;
}

body.sws-co .form-row-first,
body.sws-co .form-row-last {
	float: left;
	width: calc(50% - 8px);
}

body.sws-co .form-row-first {
	margin-right: 16px;
}

body.sws-co .form-row-wide {
	clear: both;
	width: 100%;
}

/* checkboxes: the marketing opt-in, "save my card", the four agreements */
body.sws-co .form-row label.woocommerce-form__label-for-checkbox,
body.sws-co .form-row.mailpoet_woocommerce_checkout_optin label,
body.sws-co #payment .woocommerce-SavedPaymentMethods-saveNew label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--sws-brown);
	cursor: pointer;
}

body.sws-co .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"],
body.sws-co .form-row label input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--sws-blue);
}

body.sws-co .form-row label a {
	color: var(--sws-blue) !important;
	text-decoration: underline !important;
}

/* ---- payment ---- */
body.sws-co #payment {
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0;
	border-radius: 0;
}

body.sws-co #payment ul.payment_methods {
	margin: 0 0 14px;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

body.sws-co #payment ul.payment_methods li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

body.sws-co #payment ul.payment_methods > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

body.sws-co #payment ul.payment_methods > li > input.input-radio {
	flex: 0 0 auto;
	margin: 0;
}

body.sws-co #payment ul.payment_methods > li > div.payment_box {
	flex: 1 0 100%;
}

body.sws-co #payment ul.payment_methods > li > label {
	display: inline-block;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--sws-ink);
}

body.sws-co #payment ul.payment_methods > li > label img {
	display: inline-block;
	width: 32px;
	height: auto;
	max-height: 22px;
	margin-left: 6px !important;
	vertical-align: middle;
}

/* Only one way to pay (the usual case): no radio button to click, the name and the card logos stay as the heading. */
body.sws-co #payment ul.payment_methods > li:only-child > input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.sws-co #payment div.payment_box {
	margin: 8px 0 0;
	padding: 14px 16px 10px;
	background: var(--sws-tint) !important;
	border-radius: 12px;
	color: var(--sws-brown);
	font-size: 15px;
}

body.sws-co #payment div.payment_box:before {
	display: none !important;
}

body.sws-co #payment div.payment_box p {
	margin: 0 0 8px;
}

/* 0.9.2 accessibility (2026-10-23): the link in Stripe's test-mode note ("More test cards") was #227ab6 with no underline: 4.19:1 on --sws-tint
 * and only 2.16:1 against the words around it. Darker blue (6.11:1) and underlined, so it reads as a link. */
body.sws-co #payment #wc-stripe-payment-method-instructions-card a {
	color: var(--sws-return) !important;
	text-decoration: underline !important;
}

body.sws-co #payment .fkwcs-stripe-elements-wrapper,
body.sws-co #payment .fkwcs-stripe-elements-form {
	max-width: 100%;
}

/* 0.7.2: the store's country is a hidden field (the Stripe card box then skips its Country question); its row is never shown */
body.sws-co #billing_country_field {
	display: none !important;
}

/* ---- the four agreements, and the button ----
 * The site's custom CSS hides every div.form-row inside #payment (".woocommerce-checkout #payment div.form-row { display:none!important }"),
 * which hides the agreements and the pay button too: this page shows its own row again. */
body.sws-co #payment div.form-row.place-order {
	display: block !important;
	margin: 0;
	padding: 0;
}

body.sws-co .woocommerce-terms-and-conditions-wrapper {
	margin: 0;
}

body.sws-co .sws-aw-checkout {
	margin: 8px 0 18px;
	padding: 6px 16px;
	background: #fff;
	border: 1px solid var(--sws-opt);
	border-radius: 12px;
}

body.sws-co .sws-co-age.sws-co-age--merged + .sws-aw-checkout {
	margin-top: 0;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding-top: 12px;
}

body.sws-co .sws-aw-checkout .form-row {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--sws-hair);
}

body.sws-co .sws-aw-checkout .form-row:first-child {
	border-top: 0;
}

/* The four agreements read the same (0.1.4). Their texts are written with <b> in three and <strong> in one, the first ends with a link outside its <b>, and the
 * Account Wizard's own style resets b / strong / a inside the box to "inherit": so the third one showed regular weight next to bold ones. One weight for all of it. */
body.sws-co .sws-aw-checkout .woocommerce-terms-and-conditions-checkbox-text,
body.sws-co .sws-aw-checkout .woocommerce-terms-and-conditions-checkbox-text b,
body.sws-co .sws-aw-checkout .woocommerce-terms-and-conditions-checkbox-text strong,
body.sws-co .sws-aw-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	font-weight: 600;
}

body.sws-co .sws-aw-checkout .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--sws-ink);
}

/* the age check just above the agreements (0.1.4, moved above them in 0.1.5): the same box look, a label on the left and the two drop-downs on the right */
body.sws-co .sws-co-age {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 8px 0 0;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--sws-opt);
	border-radius: 12px;
}

/* v0.5.0: the age question and the four agreements read as one step, not two stacked boxes - shared border, one heading, a hairline between them.
 * Only applies when the age question is on the page (it isn't, for a logged-in buyer or someone who already holds the site's Age Gate pass). */
body.sws-co .sws-co-agree-head {
	margin: 8px 0 -1px;
	padding: 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sws-brown);
}

body.sws-co .sws-co-age.sws-co-age--merged {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
}

body.sws-co .sws-co-age__q {
	flex: 1 1 220px;
	min-width: 0;
}

body.sws-co .sws-co-age__q label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sws-ink);
}

body.sws-co .sws-co-age__q abbr.required {
	color: var(--sws-red);
	text-decoration: none;
	border: 0;
}

body.sws-co .sws-co-age__fields {
	display: flex;
	flex: 0 1 auto;
	gap: 10px;
}

body.sws-co .sws-co-age .sws-co-age__select {
	width: auto;
	min-width: 118px;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 30px 8px 12px !important;
	border: 1px solid var(--sws-field) !important;
	border-radius: 10px !important;
	background-color: #fff !important;
	color: var(--sws-ink) !important;
	font-size: 16px; /* 16px keeps iPhones from zooming into the box */
	font-weight: 400;
	line-height: 1.3;
	box-shadow: none !important;
}

/* the theme removes the drop-down arrow from every select (appearance:none, no background image): draw our own, or the two boxes look like text boxes */
body.sws-co .sws-co-age .sws-co-age__select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B3A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 8px !important;
}

body.sws-co .sws-co-age .sws-co-age__select:focus {
	border-color: var(--sws-blue) !important;
	outline: 2px solid rgba(31, 111, 184, 0.25);
	outline-offset: 0;
}

body.sws-co .sws-co-age__msg {
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	color: #7A1712;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

body.sws-co .sws-co-age__msg:empty {
	display: none;
}

/* the Pay button until the two age boxes are answered: dimmed and not clickable (the script also stops the click; the server checks again) */
body.sws-co.sws-co--age-locked #place_order,
body.sws-co.sws-co--age-locked #place_order:hover,
body.sws-co.sws-co--age-locked #place_order:focus {
	background: var(--sws-blue) !important;
	border-color: var(--sws-blue) !important;
	opacity: 0.5;
	cursor: not-allowed;
}

body.sws-co .sws-aw-checkout abbr.required {
	color: var(--sws-red);
	text-decoration: none;
	border: 0;
}

/* the button: a blue pill with the logo in a white disc at its left edge (the logo address is set on body.sws-co as --sws-logo by the plugin) */
body.sws-co #place_order {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none;
	width: 100%;
	min-height: 62px;
	margin: 0;
	padding: 8px 56px 8px 66px !important;
	border: 2px solid var(--sws-blue) !important;
	border-radius: 999px !important;
	background: var(--sws-blue) !important;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

body.sws-co #place_order:before,
body.sws-co #place_order:hover:before,
body.sws-co #place_order:focus:before {
	content: "";
	display: block !important; /* Divi hides :before on its buttons (display:none, opacity:0) */
	position: absolute;
	left: 8px;
	top: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0;
	border-radius: 50%;
	background: #fff var(--sws-logo, none) center / 28px 30px no-repeat;
	opacity: 1 !important;
	transition: none !important;
}

body.sws-co #place_order:hover,
body.sws-co #place_order:focus {
	background: var(--sws-blue-dark) !important;
	border-color: var(--sws-blue-dark) !important;
	color: #fff !important;
	padding: 8px 56px 8px 66px !important; /* Divi widens buttons on hover to make room for an arrow */
}

body.sws-co #place_order:after {
	display: none !important; /* Divi's hover arrow */
}

body.sws-co #place_order:focus-visible {
	outline: 3px solid var(--sws-ink);
	outline-offset: 2px;
}

body.sws-co .sws-co__secure {
	margin: 12px 0 0;
	padding: 0;
	color: var(--sws-brown);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* WooCommerce's newer notice banners (errors that appear after a click) */
body.sws-co .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	padding: 12px 16px;
	border: 1px solid var(--sws-line);
	border-radius: 10px;
	background: var(--sws-tint);
	color: var(--sws-brown);
	font-size: 15px;
	line-height: 1.45;
}

body.sws-co .wc-block-components-notice-banner > svg {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	fill: currentColor;
}

body.sws-co .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	min-width: 0;
}

body.sws-co .wc-block-components-notice-banner a {
	color: var(--sws-blue) !important;
	font-weight: 700;
	text-decoration: underline !important;
}

body.sws-co .wc-block-components-notice-banner.is-error {
	background: #FDECEA;
	border-color: #E8A29D;
	color: #7A1712;
}

body.sws-co .wc-block-components-notice-banner.is-success {
	background: var(--sws-green-bg);
	border-color: var(--sws-green-line);
	color: var(--sws-green-dark);
}

/* ---- phones ---- */
@media (max-width: 640px) {
	body.sws-co #main-content > .container {
		width: 94% !important;
	}

	body.sws-co .sws-co__bar {
		margin-bottom: 20px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	body.sws-co .sws-co__panel {
		padding: 20px 16px;
		border-radius: 12px;
	}

	body.sws-co .entry-content h1.sws-co__heading {
		margin-bottom: 16px !important;
		font-size: 24px !important;
	}

	body.sws-co .sws-co__card {
		margin-top: 22px;
	}

	body.sws-co .sws-co__card.sws-co__card--notice {
		padding: 12px 14px;
	}

	body.sws-co .woocommerce-checkout-review-order-table tbody tr.cart_item {
		padding: 12px 14px !important;
	}

	body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount {
		gap: 12px;
		padding: 12px 14px !important;
	}

	body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount th,
	body.sws-co .woocommerce-checkout-review-order-table tfoot tr.cart-discount td {
		font-size: 16px;
	}

	body.sws-co .form-row-first,
	body.sws-co .form-row-last {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	body.sws-co .sws-aw-checkout {
		padding: 4px 12px;
	}

	body.sws-co .sws-co-age {
		padding: 12px;
	}

	body.sws-co .sws-co-age__fields {
		flex: 1 1 100%;
	}

	body.sws-co .sws-co-age .sws-co-age__select {
		flex: 1 1 0;
		min-width: 0;
	}

	body.sws-co #place_order {
		padding: 8px 14px 8px 62px !important;
		font-size: 17px;
	}

	body.sws-co #place_order:hover,
	body.sws-co #place_order:focus {
		padding: 8px 14px 8px 62px !important;
	}
}

/* ---- 0.6.2: a 13-17 buyer of a Group License or a Family Plan sees the owner's message in place of the form (the payment page and the seats page) ---- */
body.sws-co .sws-co-age-stop {
	max-width: 720px;
	margin: 0 auto 30px;
	padding: 22px 26px;
	border: 1px solid var(--sws-line);
	border-left: 5px solid var(--sws-rust);
	border-radius: 14px;
	background: #fff;
	color: var(--sws-ink);
	box-sizing: border-box;
}

body.sws-co .sws-co-age-stop p {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.55;
}

body.sws-co .sws-co-age-stop strong {
	display: block;
	margin: 0 0 6px;
	color: var(--sws-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
}

/* ---- 0.6.4: MailPoet's marketing box, taken away for a buyer under 18 (checkout.js minorOptin()): hidden whatever display a theme gives labels ---- */
body.sws-co label[hidden] {
	display: none !important;
}