/**
 * CWS-Suite checkout — Jasmin Maziva.
 *
 * Companion to checkout-page.php. Everything is scoped under
 * .cws-checkout-wrap[class], the page root the plugin emits — which is also
 * what buys the specificity to beat both the Elementor kit and the plugin's own
 * skin, without a single !important.
 *
 * The [class] is a specificity bump, not a filter: it matches the same element
 * and adds (0,1,0). It is there because Elementor enqueues a widget's
 * stylesheet when the widget renders, which puts the plugin's CSS AFTER a theme
 * stylesheet in the document — and the plugin's checkout rules are written at
 * exactly the same specificity as ours would otherwise be, so every tie would
 * go to the plugin. With the bump, load order stops mattering.
 *
 * Almost everything on this page is markup the PLUGIN emits — WooCommerce's
 * billing fieldset, the review lines, the totals, the gateway radios, the terms
 * block and #place_order all come from cws_checkout_part(). Hand-rolling any of
 * them would cost the order: the billing ids the cart-reminder capture and every
 * gateway hook read, the terms-field marker WooCommerce needs to evaluate
 * consent, or the nonce itself. So this file restyles rather than replaces.
 *
 * The plugin's own checkout stylesheet is thorough and token-driven. The first
 * block below repaints those tokens rather than chasing each of its rules with a
 * more specific one — that is what converts its 8px-radius, warm-neutral skin
 * into this design's squared, blue-green one in a single move.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight. Same as loop-card.css and filters-panel.css.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * nothing here sets font-family and the page inherits the theme's.
 */

/*
 * The plugin's own tokens, repainted. See the header for what the [class] is
 * doing.
 */
.cws-checkout-wrap[class] {
	--cws-accent:     #7cb342;
	--cws-accent-ink: #ffffff;
	--cws-line:       #eef2f4;
	--cws-line-2:     #e2e9ec;
	--cws-surface:    #ffffff;
	--cws-surface-2:  #f7fafb;
	--cws-field:      #f7fafb;
	--cws-ink-1:      #16333f;
	--cws-ink-2:      #5c727b;
	--cws-ink-3:      #9bacb4;
	--cws-ink-4:      #b6c3c9;
	--cws-danger:     #d0574f;
	--cws-radius:     0;
	--cws-radius-sm:  0;
	--cws-pad-card:   0;
	--cws-gap:        20px;
}

.cws-checkout-wrap[class] {
	--jm-ink:        #16333f;
	--jm-body:       #5c727b;
	--jm-ink-3:      #7c8d95;
	--jm-muted:      #9bacb4;
	--jm-muted-2:    #b6c3c9;

	--jm-accent:     #0b7da9;
	--jm-accent-d:   #096a90;

	--jm-green:      #7cb342;
	--jm-green-h:    #6aa236;
	--jm-green-lbl:  #6f9e34;

	--jm-line:       #e2e9ec;
	--jm-line-2:     #eef2f4;

	--jm-surface:    #ffffff;
	--jm-panel:      #f7fafb;
	--jm-media-bg:   #f6f8f9;
	--jm-tint:       #f2f8fb;
	--jm-danger:     #fdeceb;

	max-width: 1212px;
	color: var(--jm-ink);
}

/* ------------------------------------------------------------- icons ------- */

/*
 * checkout-page.php wraps every icon in span.jm-ico and the box lives on that
 * span, never on the <svg>. The theme sets `svg { width: 100%; height: 100% }`
 * site wide, so an svg sizing itself here would be overruled — this way the two
 * rules agree instead of fighting, and the svg simply fills the box it is given.
 */
.cws-checkout-wrap[class] .jm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.cws-checkout-wrap[class] .jm-ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------------ grid ---- */

.cws-checkout-wrap[class] .cws-checkout-grid {
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 24px;
}

.cws-checkout-wrap[class] .cws-checkout-summary {
	gap: 20px;
	position: sticky;
	top: 24px;
}

/* ------------------------------------------------------------------ card ---- */

/*
 * Flat cards — border only. The plugin's own card shadow is cleared here too,
 * so nothing lifts off the page on this surface.
 */
.cws-checkout-wrap[class] .cws-card {
	background: var(--jm-surface);
	border: 1px solid var(--jm-line);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.cws-checkout-wrap[class] .cws-card-h {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 22px 26px 18px;
	border-bottom: 1px solid var(--jm-line-2);
}

.cws-checkout-wrap[class] .cws-card-h h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.2px;
	color: var(--jm-ink);
}

/*
 * "Prijavljeni ste kao …" gets its own line rather than sharing the heading's
 * row. Beside the title it left the h2 so little room that "Podaci za naplatu"
 * broke over three lines. flex: 1 0 100% forces the wrap; the 38px inset is the
 * step badge (26px) plus the header's gap (12px), so it lines up under the
 * title rather than under the number.
 */
.cws-checkout-wrap[class] .cws-card-h-muted {
	flex: 1 0 100%;
	margin: -6px 0 0;
	padding-left: 38px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--jm-muted);
	text-align: left;
}

.cws-checkout-wrap[class] .cws-card-h-muted strong {
	font-weight: 600;
	color: var(--jm-ink);
}

/*
 * The design's numbered steps. One rule for both badges — the <span> on the
 * billing card and the pseudo-element on the order-notes card — so 1 and 2
 * cannot drift apart.
 */
.cws-checkout-wrap[class] .jm-co__step,
.cws-checkout-wrap[class] .cws-checkout-notes-card .cws-card-h::before {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jm-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
}

/*
 * Step 2 sits on the order-notes card, which cws_checkout_part('order_notes')
 * emits — hence a pseudo-element rather than a <span>. Decorative and
 * aria-hidden by construction.
 */
.cws-checkout-wrap[class] .cws-checkout-notes-card .cws-card-h::before {
	content: "2";
}

/*
 * Card bodies. The billing / shipping / notes cards hold their content
 * directly; the review and payment cards hold it under the plugin's swap
 * targets, so both levels get the inset.
 */
.cws-checkout-wrap[class] .cws-checkout-main .cws-card > *:not(.cws-card-h) {
	padding-inline: 26px;
}

.cws-checkout-wrap[class] .cws-checkout-review > *,
.cws-checkout-wrap[class] .cws-checkout-payment > * {
	padding-inline: 24px;
}

.cws-checkout-wrap[class] .cws-checkout-main .cws-card > *:last-child,
.cws-checkout-wrap[class] .cws-checkout-review > *:last-child,
.cws-checkout-wrap[class] .cws-checkout-payment > *:last-child {
	padding-bottom: 26px;
}

/* --------------------------------------------------------------- fields ---- */

.cws-checkout-wrap[class] .woocommerce-billing-fields__field-wrapper,
.cws-checkout-wrap[class] .woocommerce-shipping-fields__field-wrapper,
.cws-checkout-wrap[class] .woocommerce-additional-fields__field-wrapper {
	gap: 0 16px;
}

.cws-checkout-wrap[class] .form-row {
	margin: 0 0 16px;
	gap: 0;
}

.cws-checkout-wrap[class] .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jm-body);
}

.cws-checkout-wrap[class] .form-row label .required {
	color: var(--jm-green-lbl);
	text-decoration: none;
	border: 0;
}

.cws-checkout-wrap[class] .form-row label .optional {
	font-weight: 600;
	color: var(--jm-muted);
}

.cws-checkout-wrap[class] input[type="text"],
.cws-checkout-wrap[class] input[type="email"],
.cws-checkout-wrap[class] input[type="tel"],
.cws-checkout-wrap[class] input[type="number"],
.cws-checkout-wrap[class] input[type="password"],
.cws-checkout-wrap[class] select,
.cws-checkout-wrap[class] .select2-container .select2-selection--single {
	height: 46px;
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: var(--jm-surface);
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--jm-ink);
	box-shadow: none;
}

.cws-checkout-wrap[class] input:hover,
.cws-checkout-wrap[class] select:hover,
.cws-checkout-wrap[class] textarea:hover {
	border-color: var(--jm-muted-2);
}

.cws-checkout-wrap[class] input:focus,
.cws-checkout-wrap[class] select:focus,
.cws-checkout-wrap[class] textarea:focus,
.cws-checkout-wrap[class] .select2-container--open .select2-selection--single {
	border-color: var(--jm-accent);
	box-shadow: none;
	outline: none;
}

.cws-checkout-wrap[class] input::placeholder,
.cws-checkout-wrap[class] textarea::placeholder {
	color: var(--jm-muted-2);
	font-weight: 600;
}

.cws-checkout-wrap[class] textarea {
	min-height: 96px;
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: var(--jm-surface);
	padding: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jm-ink);
	resize: vertical;
	box-shadow: none;
}

.cws-checkout-wrap[class] select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 14px 14px;
	padding-right: 38px;
	appearance: none;
	-webkit-appearance: none;
}

.cws-checkout-wrap[class] .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

/* --- checkboxes: ship-to-different, create-account, terms -------------- */

.cws-checkout-wrap[class] .cws-check {
	gap: 10px;
	align-items: flex-start;
}

.cws-checkout-wrap[class] .cws-check-input {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 1px;
	border: 2px solid #cbd8dd;
	border-radius: 0;
	background: var(--jm-surface);
}

.cws-checkout-wrap[class] .cws-check-input:checked {
	background: var(--jm-green);
	border-color: var(--jm-green);
}

.cws-checkout-wrap[class] .cws-check-input:checked::after {
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.cws-checkout-wrap[class] .cws-check-label {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] .cws-check-muted {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jm-muted);
}

/*
 * checkout-page.php moves the ship-to-different toggle into the billing card,
 * so it needs the spacing the plugin's dedicated card used to give it.
 */
.cws-checkout-wrap[class] #ship-to-different-address {
	margin: 2px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--jm-line-2);
}

.cws-checkout-wrap[class] .cws-checkout-shipping-card .cws-card-h h2 {
	font-size: 15.5px;
}

/* ------------------------------------------------------ order review ------- */

.cws-checkout-wrap[class] .cws-checkout-line {
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 12px;
	padding: 14px 0;
	align-items: center;
	border-bottom: 1px solid var(--jm-line-2);
}

.cws-checkout-wrap[class] .cws-checkout-line-thumb {
	width: 52px;
	height: 52px;
	border: 1px solid var(--jm-line);
	border-radius: 0;
	background: var(--jm-media-bg);
}

.cws-checkout-wrap[class] .cws-checkout-line-thumb img {
	object-fit: contain;
}

.cws-checkout-wrap[class] .cws-checkout-line-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jm-ink);
	text-wrap: pretty;
}

.cws-checkout-wrap[class] .cws-checkout-line-meta {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--jm-muted);
}

.cws-checkout-wrap[class] .cws-checkout-line-qty {
	gap: 10px;
	margin-top: 7px;
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-quantity-input {
	display: inline-flex;
	align-items: center;
	height: 30px;
	background: none;
	border: 1.5px solid var(--jm-line);
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-decrease-quantity,
.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-increase-quantity {
	width: 28px;
	height: 100%;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--jm-accent);
	transition: background .15s;
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-decrease-quantity:hover,
.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-increase-quantity:hover {
	background: var(--jm-tint);
}

/*
 * The plugin paints the +/- white on a primary-coloured hover
 * (.cws-decrease-quantity:hover path, (0,2,1)). This design tints the cell
 * instead and keeps the icon blue, so the stroke is taken back at (0,4,1).
 */
.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-decrease-quantity:hover path,
.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-increase-quantity:hover path {
	stroke: currentColor;
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-decrease-quantity svg,
.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-increase-quantity svg {
	width: 12px;
	height: 12px;
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .cws-quantity {
	min-width: 22px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] .cws-checkout-line-qty .qunatitiy-multiplier,
.cws-checkout-wrap[class] .cws-checkout-line-single-price {
	font-size: 12px;
	font-weight: 600;
	color: var(--jm-muted);
	opacity: 1;
}

/*
 * DOM order is [remove, price]; the design reads price first, remove second.
 * row-reverse gets there without touching the markup.
 */
.cws-checkout-wrap[class] .cws-checkout-line-side {
	flex-direction: row-reverse;
	align-items: center;
	gap: 6px;
}

.cws-checkout-wrap[class] .cws-checkout-line-price {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jm-ink);
}

/*
 * The plugin ships this as a red circle pinned to the row's top-left corner
 * (position:absolute, border-radius:100%, white 5px strokes). The design
 * replaces it with a discreet in-row trash, so every one of those declarations
 * has to be taken back — position and offsets included, or the button floats
 * out of the row it belongs to.
 */
.cws-checkout-wrap[class] .cws-checkout-line-remove {
	position: static;
	top: auto;
	left: auto;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: none;
	cursor: pointer;
	transition: background .15s;
}

.cws-checkout-wrap[class] .cws-checkout-line-remove:hover {
	background: var(--jm-danger);
}

.cws-checkout-wrap[class] .cws-checkout-line-remove svg {
	width: 15px;
	height: 15px;
}

.cws-checkout-wrap[class] .cws-checkout-line-remove svg path {
	stroke: var(--jm-muted-2);
	stroke-width: 2px;
}

.cws-checkout-wrap[class] .cws-checkout-line-remove:hover svg path {
	stroke: #d0574f;
}

.cws-checkout-wrap[class] .cws-checkout-review-lines:empty::after {
	content: "Narudžba je prazna";
	display: block;
	padding: 32px 0;
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jm-muted);
}

/* ----------------------------------------------------------- totals -------- */

.cws-checkout-wrap[class] .cws-checkout-totals {
	gap: 0;
	margin-top: 0;
	padding-top: 16px;
	border-top: 0;
	font-size: 14px;
}

.cws-checkout-wrap[class] .cws-tot-row {
	align-items: baseline;
	gap: 14px;
	padding: 0 0 10px;
}

.cws-checkout-wrap[class] .cws-tot-row .l {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jm-ink-3);
}

.cws-checkout-wrap[class] .cws-tot-row .v {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] .cws-tot-row.cart-discount .v {
	color: var(--jm-green-lbl);
}

/* --- delivery ---------------------------------------------------------- */

.cws-checkout-wrap[class] .cws-tot-row.cws-checkout-shipping {
	display: block;
	padding: 8px 0 6px;
}

.cws-checkout-wrap[class] .cws-tot-row.cws-checkout-shipping .l {
	display: block;
	margin-bottom: 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--jm-muted);
}

.cws-checkout-wrap[class] .cws-tot-row.cws-checkout-shipping .v {
	display: block;
}

/*
 * The rate rows come from the plugin, and so does their mechanism: it hides the
 * native radio and paints .cws-ship-radio in its place, marking the row
 * .selected from JS on change. Only sizes and border weight are the design's;
 * the colours arrive through the --cws-* repaint at the top.
 */
.cws-checkout-wrap[class] .cws-ship-list {
	gap: 8px;
}

.cws-checkout-wrap[class] .cws-ship {
	border-width: 1.5px;
	padding: 12px 14px;
}

.cws-checkout-wrap[class] .cws-ship-radio,
.cws-checkout-wrap[class] .cws-pay-radio {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-width: 2px;
	border-color: #cbd8dd;
	border-radius: 50%;
}

/*
 * Only the dot's size is this design's — 8px inside the 2px ring. The centring
 * stays the plugin's: it puts the dot at top/left 50%, so translate(-50%, -50%)
 * is the exact centre of a circle, which has no optical correction to make.
 */
.cws-checkout-wrap[class] .cws-ship.selected .cws-ship-radio::after,
.cws-checkout-wrap[class] .cws-pay.selected .cws-pay-radio::after {
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
}

.cws-checkout-wrap[class] .cws-ship-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] .cws-ship-price {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jm-green-lbl);
}

/*
 * WooCommerce's own tax hint on shipping rates and totals ("(excl. VAT)" and
 * friends). The design says the tax story once, in .jm-co__vat under the grand
 * total, so every built-in restatement of it is hidden — same reasoning as
 * .includes_tax above.
 *
 * Scoped to the checkout root rather than global: .tax_label is WooCommerce's
 * class and also appears on product pages, in the order-received page and in
 * emails.
 */
.cws-checkout-wrap[class] .tax_label {
	display: none;
}

.cws-checkout-wrap[class] .cws-shipping-not-available {
	font-size: 13px;
	font-weight: 600;
	color: var(--jm-ink-3);
}

/* --- the grand total --------------------------------------------------- */

/*
 * The grand total and the VAT note are two elements — .cws-tot-row.grand is the
 * last child of .cws-checkout-totals, the note is the next sibling of that
 * block — but the design draws them as one panel. They are joined by dropping
 * the note's top border and pulling it up over the total's bottom one; a later
 * sibling paints its background over an earlier sibling's border, so the seam
 * disappears. The total alone still reads as a complete panel when the store
 * shows tax separately and the note is not rendered.
 */
.cws-checkout-wrap[class] .cws-tot-row.grand {
	margin-top: 8px;
	padding: 18px 20px 14px;
	background: var(--jm-panel);
	border: 1px solid var(--jm-line);
	font-size: inherit;
}

.cws-checkout-wrap[class] .cws-tot-row.grand .l {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--jm-body);
}

.cws-checkout-wrap[class] .cws-tot-row.grand .v {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.8px;
	color: var(--jm-ink);
}

/*
 * WooCommerce appends its own "(includes X PDV)" to the order total from
 * wc_cart_totals_order_total_html(), inside the value span. .jm-co__vat below
 * is the design's version of exactly that line, so the built-in one is hidden
 * rather than styled — two of them is the only thing that could go wrong here.
 *
 * The two always appear together: WooCommerce emits this only when prices are
 * displayed tax-inclusive, which is the same condition
 * (totals.tax_mode === 'none') that checkout-page.php renders .jm-co__vat on.
 * Drop the custom note and this rule has to go with it.
 */
.cws-checkout-wrap[class] .includes_tax {
	display: none;
}

/*
 * The 24px margin re-creates the card inset that .cws-checkout-totals gives the
 * grand-total row, so the two halves of the panel line up. Padding is the
 * total row's own 20px.
 */
.cws-checkout-wrap[class] .jm-co__vat {
	margin: -1px 24px 0;
	padding: 0 20px 14px;
	background: var(--jm-panel);
	border: 1px solid var(--jm-line);
	border-top: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--jm-muted);
	text-align: right;
}

/* ------------------------------------------------------------ coupon ------- */

.cws-checkout-wrap[class] .cws-checkout-coupon {
	margin-top: 18px;
}

.cws-checkout-wrap[class] .cws-coupon-toggle {
	padding: 12px 14px;
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: var(--jm-panel);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--jm-ink-3);
}

.cws-checkout-wrap[class] .cws-coupon-toggle b {
	font-weight: 600;
	color: var(--jm-accent);
}

.cws-checkout-wrap[class] .cws-suite-promocode-input-wrap > label {
	display: block;
	margin: 14px 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--jm-muted);
}

.cws-checkout-wrap[class] .cws-suite-promocode-input {
	display: flex;
	align-items: stretch;
}

.cws-checkout-wrap[class] .cws-suite-promocode-input .cws-coupon-input {
	flex: 1;
	min-width: 0;
	border-right: 0;
}

/* (0,3,0) — beats .elementor-kit-N .elementor-button (0,1,1) cleanly. */
.cws-checkout-wrap[class] .cws-checkout-coupon .cws-coupon-apply.cws-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	height: 46px;
	padding: 0 20px;
	border: 1.5px solid var(--jm-ink);
	border-radius: 0;
	background: var(--jm-ink);
	background-color: var(--jm-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	box-shadow: none;
	transition: background-color .15s, border-color .15s;
}

.cws-checkout-wrap[class] .cws-checkout-coupon .cws-coupon-apply.cws-cta:hover {
	background: var(--jm-accent);
	background-color: var(--jm-accent);
	border-color: var(--jm-accent);
	color: #fff;
	transform: none;
	filter: none;
}

/* ----------------------------------------------------------- payment ------- */

.cws-checkout-wrap[class] .cws-pay-list {
	gap: 10px;
}

.cws-checkout-wrap[class] .cws-pay {
	border-width: 1.5px;
	padding: 14px;
}

.cws-checkout-wrap[class] .cws-pay-head {
	gap: 12px;
}

.cws-checkout-wrap[class] .cws-pay-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] .cws-pay-body {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--jm-line-2);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--jm-ink-3);
}

.cws-checkout-wrap[class] .cws-pay-empty {
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: var(--jm-panel);
	padding: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--jm-ink-3);
}

/* --- terms + place order ----------------------------------------------- */

/*
 * (0,5,0). The plugin pins padding-bottom to 0 at the same specificity, so the
 * card's bottom inset has to be re-declared here rather than picked up from the
 * generic ".cws-checkout-payment > *:last-child" rule above.
 */
.cws-checkout-wrap[class] .cws-checkout-payment .cws-checkout-place-order.form-row.place-order {
	margin-top: 18px;
	padding-top: 18px;
	padding-bottom: 26px;
	border-top: 1px solid var(--jm-line-2);
	gap: 14px;
}

.cws-checkout-wrap[class] .cws-checkout-privacy,
.cws-checkout-wrap[class] .cws-checkout-terms-text {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jm-body);
}

.cws-checkout-wrap[class] .cws-checkout-privacy a,
.cws-checkout-wrap[class] .cws-checkout-terms-text a {
	color: var(--jm-accent);
	text-decoration: none;
	font-weight: 600;
}

.cws-checkout-wrap[class] .cws-checkout-privacy a:hover,
.cws-checkout-wrap[class] .cws-checkout-terms-text a:hover {
	color: var(--jm-accent-d);
}

.cws-checkout-wrap[class] .cws-checkout-terms {
	margin: 0;
}

.cws-checkout-wrap[class] .cws-checkout-place-order .cws-check-label {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jm-body);
}

/*
 * (0,4,1) with the id — comfortably past both the Elementor kit and the
 * plugin's own armour, which paints this button with the kit's primary colour.
 */
.cws-checkout-wrap[class] .cws-checkout-payment button#place_order.cws-checkout-place-order-btn,
.cws-checkout-wrap[class] button.cws-cta.cws-checkout-place-order-btn {
	width: 100%;
	height: 56px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--jm-green);
	background-color: var(--jm-green);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1;
	color: #fff;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .16s;
}

.cws-checkout-wrap[class] .cws-checkout-payment button#place_order.cws-checkout-place-order-btn:hover,
.cws-checkout-wrap[class] button.cws-cta.cws-checkout-place-order-btn:hover {
	background: var(--jm-green-h);
	background-color: var(--jm-green-h);
	color: #fff;
	transform: none;
	filter: none;
	box-shadow: none;
}

.cws-checkout-wrap[class] .cws-checkout-payment button#place_order.cws-checkout-place-order-btn[disabled],
.cws-checkout-wrap[class] .cws-checkout-payment button#place_order.cws-checkout-place-order-btn.loading,
.cws-checkout-wrap[class] button.cws-cta.cws-checkout-place-order-btn[disabled],
.cws-checkout-wrap[class] button.cws-cta.cws-checkout-place-order-btn.loading {
	background: var(--jm-muted-2);
	background-color: var(--jm-muted-2);
	color: #fff;
}

.cws-checkout-wrap[class] .jm-co__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--jm-muted);
}

.cws-checkout-wrap[class] .jm-co__trust .jm-ico {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------ notices ------ */

.cws-checkout-wrap[class] ul.woocommerce-error,
.cws-checkout-wrap[class] ul.woocommerce-info,
.cws-checkout-wrap[class] ul.woocommerce-message,
.cws-checkout-wrap[class] .cws-checkout-login-notice {
	border-radius: 0;
	border: 1px solid var(--jm-line);
	border-left: 3px solid var(--jm-accent);
	background: var(--jm-surface);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jm-ink);
}

.cws-checkout-wrap[class] ul.woocommerce-error {
	border-left-color: #d0574f;
}

.cws-checkout-wrap[class] ul.woocommerce-message {
	border-left-color: var(--jm-green);
}

.cws-checkout-wrap[class] .cws-suite-coupon-notice {
	border-radius: 0;
	font-size: 12.5px;
	font-weight: 700;
}

/* -------------------------------------------------------- responsive ------- */

@media (max-width: 960px) {
	/*
	 * The single !important in this file, and only because the plugin already
	 * uses one here ("gap: 20px !important" on .cws-checkout-grid below 960px).
	 * Specificity cannot outrank an !important, so matching it is the only way
	 * to change the value at all.
	 */
	.cws-checkout-wrap[class] .cws-checkout-grid {
		gap: 14px !important;
	}

	.cws-checkout-wrap[class] .cws-checkout-summary {
		position: static;
		gap: 14px;
	}
}

@media (max-width: 782px) {
	.cws-checkout-wrap[class] {
		padding-inline: 0;
	}

	.cws-checkout-wrap[class] .cws-card {
		border-left: 0;
		border-right: 0;
	}

	.cws-checkout-wrap[class] .cws-card-h {
		padding: 18px 18px 14px;
		margin-bottom: 16px;
	}

	.cws-checkout-wrap[class] .cws-card-h h2 {
		font-size: 16px;
	}


	.cws-checkout-wrap[class] .cws-checkout-main .cws-card > *:not(.cws-card-h),
	.cws-checkout-wrap[class] .cws-checkout-review > *,
	.cws-checkout-wrap[class] .cws-checkout-payment > * {
		padding-inline: 18px;
	}

	.cws-checkout-wrap[class] .cws-checkout-main .cws-card > *:last-child,
	.cws-checkout-wrap[class] .cws-checkout-review > *:last-child,
	.cws-checkout-wrap[class] .cws-checkout-payment > *:last-child {
		padding-bottom: 20px;
	}

	.cws-checkout-wrap[class] .cws-checkout-payment .cws-checkout-place-order.form-row.place-order {
		padding-bottom: 20px;
	}

	.cws-checkout-wrap[class] .jm-co__vat {
		margin-inline: 18px;
	}

	.cws-checkout-wrap[class] .cws-tot-row.grand .v {
		font-size: 24px;
		letter-spacing: -.6px;
	}

	.cws-checkout-wrap[class] .cws-checkout-line-name {
		font-size: 12.5px;
	}
}